:root{
  /* ✅ Поменяй путь на свой фон */
  --hero-bg: url("./assets/hero.jpg");

  --text: #ffffff;
  --text-dim: rgba(255,255,255,.85);

  --blue: #2f6fb3;
  --blue2:#2b7cc8;
  --yellow:#f2d04c;
  --gray:#cfd6df;

  --shadow: 0 18px 40px rgba(0,0,0,.22);
  --shadow2: 0 10px 26px rgba(0,0,0,.18);

  --container: 1120px;
  --radius: 14px;

  --ui: rgba(255,255,255,.12);
  --ui2: rgba(255,255,255,.18);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#fff;
  color:#0c1d2d;
}

.container{
  width:min(var(--container), calc(100% - 36px));
  margin:0 auto;
}

/* HERO */
.hero{
  position:relative;
  min-height: 520px;
  color: var(--text);
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background-image: url("./img/1.webp");
  background-size: cover;
  background-position: right center;
  transform: scale(1.03);
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.35) 42%, rgba(0,0,0,.18) 65%, rgba(0,0,0,.08) 100%);
}
.hero__content{
  position:relative;
  padding: 22px 0 0;
}
.hero__left{
  padding-top: 14px;
  max-width: 560px;
}

.tag{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 800;
  letter-spacing:.5px;
  font-size: 12px;
}

.hero__title{
  margin: 14px 0 8px;
  display:flex;
  align-items:flex-start;
  gap: 14px;
}
.hero__discount{
  font-weight: 900;
  font-size: clamp(52px, 7vw, 92px);
  line-height: .95;
  color: #ffd44f;
  text-shadow: 0 10px 22px rgba(0,0,0,.28);
}
.hero__currency{ font-size: .55em; vertical-align: top; margin-left: 2px; }
.hero__titleText{
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.hero__bold{ font-weight: 900; }

.hero__valid{
  margin-top: 6px;
  color: rgba(255,255,255,.85);
  font-weight: 600;
  font-size: 40px;
}
.hero__desc{
  margin: 16px 0 18px;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.25;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  text-shadow: 0 6px 18px rgba(0,0,0,.22);
}

.ctaBtn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  background: linear-gradient(180deg, #4a9ee6, #2e78c7);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  padding: 20px 30px;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 800;
  box-shadow: var(--shadow2);
  text-decoration:none;
  user-select:none;
}
.ctaBtn:hover{ filter: brightness(1.05); }
.ctaBtn:active{ transform: translateY(1px); }
.ctaBtn__arrow{ font-size: 18px; }

.ctaBtn--center{
  margin: 50px auto 0;
  margin-bottom: 50px;
  display:flex;
  width: fit-content;
}

/* ICON BAR */
.iconbar{
  position: relative;
  margin-top: 24px;
  padding: 14px 0 18px;
  background: rgba(0,0,0,.20);
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.iconbar__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.iconbar__item{
  width: 100%;
  min-width: 110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;

  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor:pointer;
  color: rgba(255,255,255,.95);
}
.iconbar__item:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
}
.iconbar__item.is-active{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
}
.iconbar__ico{
  width: 44px; height: 44px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-size: 20px;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.18);
}
.ico--heart{ background: radial-gradient(circle at 30% 30%, #ff5b6b, #cf2c40); }
.ico--gly{ background: radial-gradient(circle at 30% 30%, #7cc8ff, #3b78c9); }
.ico--weight{ background: radial-gradient(circle at 30% 30%, #63c7c0, #2d8f86); }
.ico--soup{ background: radial-gradient(circle at 30% 30%, #f2d04c, #cc9f18); }
.ico--flower{ background: radial-gradient(circle at 30% 30%, #ff9fd0, #d85a9b); }
.ico--cloche{ background: radial-gradient(circle at 30% 30%, #e7e7e7, #b9c2cb); }

.iconbar__label{
  font-size: 12px;
  font-weight: 700;
  opacity: .95;
}

/* PROGRAMS */
.section{ padding: 26px 0 44px; background:#fff; }
.section__titleRow{
  display:flex;
  align-items:center;
  gap: 10px;
}
.section__title{
  margin: 0;
  font-size: 18px;
  color: #17324a;
  font-weight: 800;
}
.programs{ padding-top: 18px; }

.cardsGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.programCard{
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 14px 36px rgba(10,30,50,.12);
  border: 1px solid rgba(15,40,70,.10);
  background:#fff;
}
.programCard__img{
  height: 200px;
  background-size: cover;
  background-position: center;
}

/* Плейсхолдеры картинок (можешь заменить на свои) */
.img--1{ background-image: url("./img/p1.webp"); }
.img--2{ background-image: url("./img/p2.webp"); }
.img--3{ background-image: url("./img/p3.webp"); }
.img--4{ background-image: url("./img/p4.webp"); }
.img--5{ background-image: url("./img/p5.webp"); }
.img--6{ background-image: url("./img/p6.webp"); }

.programCard__body{
  padding: 12px 12px 14px;
  color:#fff;
  min-height: 170px;
  display:flex;
  flex-direction:column;
}
.theme--red{ background: linear-gradient(180deg, #de5962, #d62632); }
.theme--blue2{ background: linear-gradient(180deg, #2b7cc8, #2567a6); }
.theme--yellow{ background: linear-gradient(180deg, #f1d350, #caa31c); color:#1e2b36; }
.theme--gray{ background: linear-gradient(180deg, #e8eef5, #cfd6df); color:#1e2b36; }
.theme--green{ background: linear-gradient(180deg, #6de4da, #47a49c); color:#1e2b36; }
.theme--pink{ background: linear-gradient(180deg, #eb98c6, #cf70a2); color:#1e2b36; }


.programCard__head{
  display:flex;
  align-items:center;
  gap: 10px;
}
.programCard__icon{
  width: 30px; height: 30px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  font-size: 16px;
}
.theme--yellow .programCard__icon,
.theme--gray .programCard__icon{
  background: rgba(255,255,255,.55);
  border-color: rgba(30,43,54,.10);
}
.programCard__title{
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
}
.programCard__text{
  margin: 10px 0 12px;
  font-size: 12px;
  line-height: 1.35;
  opacity: .95;
  font-weight: 600;
}
.theme--yellow .programCard__text,
.theme--gray .programCard__text{
  color: rgba(30,43,54,.85);
}

.offerBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.22);
  color: inherit;
  font-weight: 900;
  cursor:pointer;
  text-decoration: none; /* ⬅️ важно */
}

.theme--yellow .offerBtn,
.theme--gray .offerBtn{
  background: rgba(255,255,255,.62);
  border-color: rgba(30,43,54,.12);
}
.offerBtn:hover{ filter: brightness(1.04); }
.offerBtn:active{ transform: translateY(1px); }

/* TRUST (2nd screenshot vibe) */
.trust{
  padding: 46px 0 54px;
background: radial-gradient(900px 420px at 50% 0%, rgb(255 130 130 / 55%), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #fff7f7, #ffe8e8 55%, #ffd9d9);
  border-top: 1px solid rgba(15,40,70,.08);
}
.trust__inner{ text-align:center; }
.trust__title{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  color:#14304a;
}
.trust__sub{
  margin: 8px auto 0;
  max-width: 720px;
  color: rgba(20,48,74,.70);
  font-weight: 650;
  font-size: 13px;
}
.trust__grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  text-align:left;
}
.reviewCard{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(15,40,70,.10);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 12px 26px rgba(10,30,50,.10);
  backdrop-filter: blur(10px);

  /* главное: фиксируем структуру и "уровень" аватара */
  display: grid;
  grid-template-rows: auto 1fr auto auto; /* stars | text | avatar | name/role */
  min-height: 330px; /* подстрой: 320–380 если нужно */
  align-content: start;
}

.reviewCard__stars{ color:#f1b900; font-size: 25px;;font-weight: 900; letter-spacing: 1px; }
.reviewCard__text{
  margin: 8px 0 12px;
  color: rgba(20,48,74,.78);
  font-weight: 650;
  font-size: 12px;
  line-height: 1.45;
}
.reviewCard__who{
  display: block;
  margin-top: 8px;
}

.avatar{
  width: 100px;
  height: 100px;
  border-radius: 999px;
  border: 1px solid rgba(15,40,70,.12);

  /* чтобы фотки всегда выглядели одинаково */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* небольшое выравнивание по центру карточки */
  margin-top: 6px;
}

.av--1{ background-image: url("./img/photo_1.webp"); }
.av--2{ background-image: url("./img/photo_2.webp"); }
.av--3{ background-image: url("./img/photo_3.webp"); }
.av--4{ background-image: url("./img/photo_4.webp"); }
.av--5{ background-image: url("./img/photo_5.webp"); }


.reviewCard__name{ font-weight: 900; color:#14304a; font-size: 12px; }
.reviewCard__role{ color: rgba(20,48,74,.60); font-weight: 700; font-size: 11px; margin-top: 2px; }

/* Lead box */
.leadBox{
  margin: 18px auto 0;
  max-width: 720px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,40,70,.10);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 12px 26px rgba(10,30,50,.10);
}
.leadBox__hint{
  color: rgba(20,48,74,.65);
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 10px;
  text-transform: lowercase;
}
.leadBox__form{
  display:flex;
  gap: 10px;
}
.leadBox__input{
  flex: 1;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,40,70,.12);
  outline:none;
  font-weight: 650;
}
.leadBox__input:focus{
  border-color: rgba(47,124,200,.35);
  box-shadow: 0 0 0 4px rgba(47,124,200,.14);
}
.leadBox__submit{
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, #f1d350, #caa31c);
  font-weight: 900;
  cursor:pointer;
}
.leadBox__submit:active{ transform: translateY(1px); }

.leadBox__fine{
  margin-top: 10px;
  color: rgba(20,48,74,.55);
  font-weight: 650;
  font-size: 11px;
}

.toast{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(47,124,200,.12);
  border: 1px solid rgba(47,124,200,.18);
  color: rgba(20,48,74,.85);
  font-weight: 800;
  font-size: 12px;
}

/* mini footer */
.miniFooter{
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid rgba(15,40,70,.10);
  color: rgba(20,48,74,.70);
  font-weight: 700;
  font-size: 12px;
}
.miniFooter__row{
  display:flex;
  justify-content:center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.miniFooter__links{
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
}
.miniFooter__links a{
  color: rgba(20,48,74,.62);
  text-decoration:none;
}
.miniFooter__links a:hover{ color: rgba(20,48,74,.85); }

/* NEWSLETTER */
.newsletter{
  padding: 56px 0 64px;
background: radial-gradient(700px 300px at 50% 0%, rgb(255 224 224 / 45%), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #fff7f7, #ffeeee);
  border-top: 1px solid rgba(15,40,70,.08);
  border-radius: 32px;
  overflow: hidden;
}

.newsletter__inner{
  /*max-width: 720px;*/
  text-align: center;
}

.newsletter__title{
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  color: #14304a;
  line-height: 1.2;
}

.newsletter__desc{
  margin: 12px auto 22px;
  font-size: 14px;
  font-weight: 650;
  color: rgba(20,48,74,.75);
  max-width: 560px;
}

.newsletter__form{
  display: flex;
  gap: 10px;
  justify-content: center;
}

.newsletter__input{
  flex: 1;
  max-width: 420px;
  padding: 14px 16px;
  border-radius: 999px;
  border: 1px solid rgba(15,40,70,.14);
  font-weight: 650;
  outline: none;

}

.newsletter__input:focus{
  border-color: rgba(47,124,200,.45);
  box-shadow: 0 0 0 4px rgba(47,124,200,.15);
}

.newsletter__submit{
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, #f1d350, #caa31c);
  font-weight: 900;
  cursor: pointer;
  color: white !important;
}

.newsletter__submit:active{
  transform: translateY(1px);
}

.newsletter__fine{
  margin-top: 14px;
  font-size: 12px;
  font-weight: 650;
  color: rgba(20,48,74,.60);
}

.newsletter__fine a{
  color: rgba(20,48,74,.85);
  text-decoration: underline;
}


/* Responsive */
@media (max-width: 980px){
  .cardsGrid{ grid-template-columns: repeat(2, 1fr); }
  .trust__grid{ grid-template-columns: repeat(2, 1fr); }
  .iconbar__inner{ overflow:auto; justify-content:flex-start; }
  .iconbar__item{ min-width: 120px; }
}
@media (max-width: 560px){
  .hero{ min-height: 560px; }
  .hero__title{ flex-direction: column; gap: 6px; }
  .hero__left{ max-width: 100%; }
  .cardsGrid{ grid-template-columns: 1fr; }
  .trust__grid{ grid-template-columns: 1fr; }
  .leadBox__form{ flex-direction: column; }
    .reviewCard{
    min-height: unset;
    grid-template-rows: auto auto auto auto; /* без растягивания */
  }
  .avatar{margin: 0 auto;}
  .reviewCard__who{margin: 0 auto;}
  .newsletter__form{
    flex-direction: column;
  }

  .newsletter__input,
  .newsletter__submit{
    width: 100%;
  }

  .newsletter__title{
    font-size: 22px;
  }
}


.cardsStage{
  margin-top: 14px;
  display: grid;
  place-items: center;
}

/* по умолчанию все скрыты */
.cardsStage .programCard{
  display: none;
  width: min(420px, 100%);
}

/* показываем активную */
.cardsStage .programCard.is-active{
  display: block;
}



.advantages{
  padding: 42px 0 52px;
  background: radial-gradient(900px 420px at 50% 0%, rgba(130,190,255,.55), rgba(255,255,255,0) 60%),
              linear-gradient(180deg, #f7fbff, #e8f2ff 55%, #d9ecff);
  border-top: 1px solid rgba(15,40,70,.08);
}

.advantages__inner{ text-align:center; }

.advantages__title{ margin:0; font-size:26px; font-weight:900; color:#14304a; }
.advantages__sub{ margin:8px auto 0; max-width:720px; color:rgba(20,48,74,.70); font-weight:650; font-size:13px; }

.advantages__grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  text-align:left;
}

.advCard{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(15,40,70,.10);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 26px rgba(10,30,50,.08);
}

.advCard__ico{
  width:46px; height:46px;
  border-radius:14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.70);
  border:1px solid rgba(15,40,70,.10);
  font-size:22px;
  flex: 0 0 46px;
}

.advCard__h{ font-weight:900; color:#14304a; font-size:13px; line-height:1.2; }
.advCard__p{ margin-top:3px; color:rgba(20,48,74,.70); font-weight:650; font-size:12px; line-height:1.35; }

.advantages__cta{
  margin:18px auto 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 20px 30px;
  font-size: 20px;
  border-radius:999px;
  background: linear-gradient(180deg, #f1d350, #caa31c);
  color:#fff;
  text-decoration:none;
  font-weight:900;
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
}
@media (max-width: 980px){
  .advantages__grid{ grid-template-columns: 1fr; }
}





















/* EXIT INTENT MODAL */
.exitModal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.exitModal.is-open{ display: block; }

.exitModal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

.exitModal__dialog{
  position: relative;
  width: min(760px, calc(100% - 24px));
  margin: 6vh auto 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,40,70,.10);
  box-shadow: 0 22px 70px rgba(0,0,0,.28);
}

.exitModal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(15,40,70,.12);
  background: rgba(255,255,255,.7);
  cursor: pointer;
  font-weight: 900;
}

.exitModal__badge{
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f1d350, #caa31c);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .3px;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

.exitModal__content{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 0;
}

.exitModal__left{
  padding: 54px 22px 18px;
  color: #14304a;
}

.exitModal__title{
  margin: 0 0 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 900;
  line-height: 1.1;
}

.exitModal__discount{
  font-size: 52px;
  color: #f1c933;
  text-shadow: 0 10px 22px rgba(0,0,0,1);
}

.exitModal__text{
  margin: 10px 0;
  color: rgba(20,48,74,.78);
  font-weight: 650;
  font-size: 13px;
  line-height: 1.45;
}

.exitModal__cta{
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f1d350, #caa31c);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
}

.exitModal__dontshow{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(20,48,74,.70);
  font-weight: 700;
  font-size: 12px;
}

.exitModal__no{
  margin-top: 10px;
  border: none;
  background: transparent;
  color: rgba(20,48,74,.70);
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
}

.exitModal__right{
  background-image: url("./img/p1.webp"); /* поменяй на нужную картинку */
  background-size: cover;
  background-position: center;
  min-height: 340px;
  border-left: 1px solid rgba(15,40,70,.10);  
}



.DATE{
  font-size: 20px;
  font-weight: 800;
  color: red;
  /*-webkit-text-stroke: 0.4px white;*/
}




/* mobile */
@media (max-width: 560px){
  .exitModal__content{ grid-template-columns: 1fr; }
  .exitModal__right{ min-height: 200px; border-left: none; border-top: 1px solid rgba(15,40,70,.10); }
  .exitModal__left{ padding-top: 62px; }
  .exitModal__discount{ font-size: 44px; }
  .hero__discount{font-size: 100px;}
}

@keyframes pulseSoft {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--pulse, rgba(241, 211, 80, 0.55));
  }
  70% {
    transform: scale(1.04);
    box-shadow: 0 0 0 16px rgba(0,0,0,0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
  }
}


.ctaBtn,
.offerBtn,
.advantages__cta,
.exitModal__cta,
.newsletter__submit{
  cursor: pointer;
  text-decoration: none;
  animation: pulseSoft 2.4s infinite;
}
.ctaBtn{ --pulse: rgba(74,158,230,.55); }
.advantages__cta{ --pulse: rgba(241,211,80,.55); }
.exitModal__cta{ --pulse: rgba(241,211,80,.55); }
.newsletter__submit{ --pulse: rgba(241,211,80,.55); }

.theme--red  .offerBtn{ --pulse: rgba(214,38,50,.50); }
.theme--blue2 .offerBtn{ --pulse: rgba(43,124,200,.50); }
.theme--green .offerBtn{ --pulse: rgba(71,164,156,.50); }
.theme--yellow .offerBtn{ --pulse: rgba(242,208,76,.55); }
.theme--pink .offerBtn{ --pulse: rgba(207,112,162,.50); }
.theme--gray .offerBtn{ --pulse: rgba(207,214,223,.65); }

.offerBtn { animation-delay: .4s; }
.advantages__cta { animation-delay: .8s; }
.exitModal__cta { animation-delay: 1.2s; }
.newsletter__submit { animation-delay: 1.6s; }



/* COOKIE BAR */
.cookieBar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 9998;
  display: none;
}

.cookieBar.is-visible{
  display: block;
}

.cookieBar__inner{
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;

  padding: 14px 16px;
  border-radius: 16px;

  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(15,40,70,.10);
  box-shadow: 0 18px 46px rgba(0,0,0,.18);
}

.cookieBar__text{
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  color: rgba(20,48,74,.78);
  line-height: 1.45;
}

.cookieBar__text a{
  color: rgba(20,48,74,.9);
  text-decoration: underline;
}

.cookieBar__actions{
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookieBar__btn{
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid rgba(15,40,70,.12);
  background: rgba(255,255,255,.6);
  color: #14304a;
}

.cookieBar__btn--primary{
  background: linear-gradient(180deg, #4a9ee6, #2e78c7);
  color: #fff;
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}

.cookieBar__btn--ghost{
  background: transparent;
}

.cookieBar__btn:active{
  transform: translateY(1px);
}

/* mobile */
@media (max-width: 560px){
  .cookieBar{
    bottom: 10px;
  }

  .cookieBar__inner{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .cookieBar__actions{
    justify-content: flex-end;
  }
}