/* ===== SF Pro Rounded: подключение локальных файлов ===== */
@font-face{
    font-family: "SF Pro Rounded";
    src: url("/fonts/SF-Pro-Rounded-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: "SF Pro Rounded";
    src: url("/fonts/SF-Pro-Rounded-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


:root{
  --sky:#25A8DB;         /* голубой фон */
  --pink:#E2B1C4;        /* нежно-розовый */
  --text:#ffffff;
  --ink:#16324F;
  --accent:#e9b3c7;      /* градиентная розовая часть текста */
  --btn-pink:#e4b7c6;
  --btn-pink-ghost:rgba(255,255,255,0.35);
  --radius-xxl:28px;
  --font-ui: "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

html{
    scroll-behavior: smooth;
}

html.i18n-pending body{
    visibility: hidden;
}

*{box-sizing:border-box}
body{margin:0; font-family: var(--font-ui); background:var(--sky); color:var(--text); overflow-x:hidden}
.container{max-width:1220px; margin:0 auto; padding:0 24px}

/* ====== Шапка ====== */
.header{
  position:fixed; inset:0 0 auto 0; z-index:20; background:transparent;
}
.header .container{
  display:flex; align-items:center; gap:24px; padding:18px 24px;
}
.brand img{height:40px}
.nav{display:flex; gap:28px; margin-left:24px; flex:1}
.nav__link{color:#dbf2ff; text-decoration:none; font-weight:600; opacity:.9}
.nav__link--active,.nav__link:hover{color:#fff; opacity:1}
.store-badges{display:flex; gap:12px}
.store-badges img{height:36px; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.menu-toggle{display:none; background:none; border:0; width:40px; height:40px}
.menu-toggle span{display:block; height:2px; background:#fff; margin:7px 6px}

/* ====== HERO ====== */
.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-columns: minmax(300px,1fr) minmax(420px, 720px);
  align-items:center;
}
.hero__split{
  position:absolute; top:0; right:0; bottom:0; width:30%;
  background:var(--pink); z-index:0;
}

/* левая колонка */
.hero__copy{ z-index:5; padding-top:120px; padding-bottom:64px }
.hero__title{
  margin:0 0 28px; font-size: clamp(40px, 3.75vw, 68px); line-height:1.1; letter-spacing:-.02em;
}
.accent{
  background:linear-gradient(180deg,#ffd6e8 0%, #cda0b4 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800;
}
.hero__ctas{display:flex; gap:20px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; height:56px; padding:0 28px; border-radius:999px; text-decoration:none; font-weight:700}
.btn--primary{background:var(--btn-pink); color:#2a2a2a; box-shadow:0 10px 24px rgba(226,177,196,.35), inset 0 -3px 0 rgba(0,0,0,.05)}
.btn--outline{color:#e8f6ff; border:2px solid rgba(255,255,255,.35); background:transparent}
.btn__arrow{margin-left:10px}

/* правая колонка */
.hero__visual{
    position:relative; display:flex; align-items:center; justify-content:flex-start; z-index:2; transform:translate(10%, 5%);
}
.hero__phone{
  display:block;
  width:min(440px, 100%); height:auto;
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.45));
}

/* большой пузырь поверх телефона */
.hero__bubble{
  position:absolute; left:50%; top:42%;
  transform:translate(-120%, -40%);
  width:360px; height:360px; border-radius:50%;
  background:
    radial-gradient(60% 60% at 40% 40%, rgba(255,255,255,.65) 0%, rgba(255,255,255,.28) 40%, rgba(255,255,255,.10) 65%, rgba(255,255,255,0) 73%),
    radial-gradient(closest-side at 70% 70%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter:drop-shadow(0 16px 36px rgba(0,0,0,.25));
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.hero__bubble img{ width:50%; height:auto }

/* плавающие пузыри вокруг */
.bubble{ width:82px; height:82px;  opacity: .5; object-fit:contain; filter:drop-shadow(0 10px 24px rgba(0,0,0,.18)); animation:float 9s ease-in-out infinite }
.hb{ position:absolute; z-index:1 }
.hb-1{ left:34px; top:140px; width:120px; height:120px }
.hb-2{ left:300px; top:50px; width:90px; height:90px; animation-delay:-2s }
.hb-3{ left:520px; top:210px; width:66px; height:66px; animation-delay:-4s }
.hb-4{ right:120px; top:150px; width:110px; height:110px }
.hb-5{ right:60px; bottom:140px; width:220px; height:220px; animation-delay:-3s }
.hb-6{ left:46%; bottom:120px; width:90px; height:90px; animation-delay:-1s }

@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* адаптив */
@media (max-width: 1100px){
  .hero{ grid-template-columns:1fr }
  .hero__split{ width:100%; height:52%; right:0; left:auto; top:auto; bottom:0 }
  .hero__visual{ padding-bottom:28px }
  .hero__bubble{ left:50%; transform:translate(-50%, -50%); width:340px; height:340px }
}
@media (max-width: 860px){
  .nav{ position:fixed; inset:64px 16px auto 16px; background:rgba(0,0,0,.35); backdrop-filter:blur(6px); border-radius:16px; padding:14px 16px; display:none; flex-direction:column; gap:14px }
  .nav.open{ display:flex }
  .menu-toggle{ display:block }
  .store-badges{ display:none }
}
@media (max-width: 520px){
  .btn{ height:52px }
  .hero__bubble{ width:300px; height:300px }
  .hero__phone{ transform:none }
}


/* ============== How it works ============== */
.how{
  position:relative;
  padding:84px 0 96px;
  background:#fff;
}
.how__header{
  text-align:center; margin-bottom:28px; color:#2b235a;
}
.how__header h2{
  margin:0 0 8px; font-weight:800; color:#221a64;
  font-size: clamp(24px, 2.8vw, 40px);
}
.how__header p{
  margin:0; color:#6c6a86;
}

.how__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  align-items:start;
  transform:translate(0%, 8%);
}

/* Карточка шага */
.how-card{
  text-align:center; color:#221a64;
}
.how-card h3{
  margin:18px 0 0; font-size:22px;
}

/* Круг-пузырь с иллюстрацией внутри */
.how-card__bubble{
    width: 20vw;
    height: 20vw;
  margin:0 auto;
  border-radius:50%;
  position:relative;
  background:
    radial-gradient(60% 60% at 40% 40%, rgba(255,255,255,.95) 0 35%, rgba(255,255,255,.55) 36% 60%, rgba(255,255,255,.22) 61% 72%, rgba(255,255,255,0) 73%),
    radial-gradient(circle at 75% 30%, rgba(255,255,255,.85) 0 10%, transparent 12% 100%),
    radial-gradient(120% 120% at 80% 20%, rgba(96,205,255,.6), rgba(226,177,196,.6));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.7),
    0 24px 60px rgba(0,0,0,.15);
  overflow:hidden;
}
.how-card__bubble img{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
  width:70%; height:auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
}

/* Декоративные пузыри */
.how .hw{position:absolute; animation:float 10s ease-in-out infinite; z-index:0}
.how .hw-1{ left:24px; top:-10px; width:180px; height:180px }
.how .hw-2{ right:24px; top:18px; width:64px; height:64px; animation-delay:-2.5s }

/* Адаптив */
@media (max-width: 1100px){
  .how-card__bubble{ --size:300px }
}
@media (max-width: 900px){
  .how__grid{ grid-template-columns:1fr 1fr }
  .how-card__bubble{ --size:280px }
}
@media (max-width: 620px){
  .how__grid{ grid-template-columns:1fr; gap:36px }
  .how-card__bubble{ --size:260px }
}


/* ============== Pricing ============== */
.pricing{
  position:relative;
  padding:96px 0 120px;
  color:#2b235a;
  background:linear-gradient(135deg, rgba(37,168,219,0.95) 0%, rgba(226,177,196,0.95) 100%);
}
.pricing .container{position:relative; z-index:2}

.pricing__header{
  text-align:center; color:#2b235a; margin-bottom:36px;
}
.pricing__header h2{margin:0 0 10px; color:#2b235a}
.pricing__header p{margin:0; color:#5f6990}

.pricing__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
  margin-top:28px;
}

/* Card */
.price-card{
  position:relative;
  background:rgba(255,255,255,0.92);
  border-radius:22px;
  padding:24px 22px 26px;
  box-shadow:
    0 24px 60px rgba(0,0,0,.15),
    inset 0 0 0 1px rgba(255,255,255,.65);
  overflow:hidden;
}
.price-card header h3{
  margin:0 0 10px; color:#3a2d85; font-weight:700;
}
.price-card__price{
  display:flex; align-items:baseline; gap:8px; margin-bottom:4px;
}
.price-card__price .num{
  font-size:48px; font-weight:800; color:#18a8e6;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.price-card__price .per{
  color:#18a8e6; font-weight:700;
}
.price-card__subtitle{margin:0 0 14px; color:#6e6c86}

.price-card__list{
  list-style:none; margin:0 0 22px; padding:0; display:grid; gap:12px; color:#6b6a84;
}
.price-card__list li{
  position:relative; padding-left:28px;
}
.price-card__list li::before{
  content:""; position:absolute; left:0; top:6px;
  width:18px; height:18px; border-radius:4px;
  background:
    radial-gradient(circle at 35% 35%, #fff 0 40%, transparent 41%),
    linear-gradient(135deg, #25A8DB, #6ed3ff);
  mask:
    radial-gradient(10px at 50% 50%, #000 99%, transparent 100%);
  box-shadow:0 2px 6px rgba(37,168,219,.35);
}
/* CTA inside card */
.price-card__btn{
  width:100%; justify-content:center; height:48px;
  border-radius:18px; background:linear-gradient(180deg,#e4b7c6,#cfa9b9);
  color:#2b235a;
}

/* Ghost outlines of clothes (pure CSS lines) */
.price-card__ghost{
  position:absolute; right:-6px; bottom:0; top:30px; width:62%;
  opacity:.16; pointer-events:none;
  background-repeat:no-repeat; background-position:center right; background-size:contain;
  filter:contrast(110%) brightness(110%);
}
.price-card__ghost--hoodie{
  background-image:
    radial-gradient(circle at 60% 35%, transparent 28%, rgba(255,255,255,0.9) 29% 31%, transparent 32%),
    linear-gradient(transparent 60%, rgba(255,255,255,.9) 60% 61%, transparent 62%),
    linear-gradient(90deg, transparent 25%, rgba(255,255,255,.9) 25% 27%, transparent 28%),
    linear-gradient(transparent 20%, rgba(255,255,255,.9) 20% 21%, transparent 22%); /* схематичный худи */
}
.price-card__ghost--shirt{
  background-image:
    linear-gradient(transparent 16%, rgba(255,255,255,.9) 16% 17%, transparent 18%),
    linear-gradient(90deg, transparent 40%, rgba(255,255,255,.9) 40% 41%, transparent 42%),
    linear-gradient(transparent 55%, rgba(255,255,255,.9) 55% 56%, transparent 57%);
}
.price-card__ghost--tee{
  background-image:
    linear-gradient(transparent 28%, rgba(255,255,255,.9) 28% 29%, transparent 30%),
    linear-gradient(90deg, transparent 35%, rgba(255,255,255,.9) 35% 36%, transparent 37%);
}

/* Decorative bubbles */
.pricing__decor .pb{position:absolute; z-index:0; animation:float 11s ease-in-out infinite}
.pricing .pb-1{ left:40px; top:60px; width:200px; height:200px }
.pricing .pb-2{ left:50%; transform:translateX(-50%); top:-40px; width:120px; height:120px; animation-delay:-3s }

/* Responsive */
@media (max-width: 980px){
  .pricing__grid{ grid-template-columns:1fr 1fr }
}
@media (max-width: 660px){
  .pricing{ padding:72px 0 90px }
  .pricing__grid{ grid-template-columns:1fr }
}

/* ============== Our Story ============== */
.story{
  position:relative;
  background:#fff;
  color:#2b235a;                 /* темно-фиолетовый текст */
  border-top-left-radius:24px;   /* лёгкое «врезание» в синий фон сверху */
  border-top-right-radius:24px;
  margin-top:-48px;              /* немного заезжаем на хиро */
  padding:96px 0;
  z-index:1;
}
.story__inner{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:64px;
  align-items:center;
}

/* Левая колонка — аватарки в «рассыпуху» */
.story__gallery{
  position:relative;
  min-height:520px;
}
.avatar{
  --size:200px;
  position:absolute; margin:0;
  width:var(--size); height:var(--size);
  border-radius:50%;
  overflow:hidden; background:#f4f6fb;
  box-shadow:0 20px 50px rgba(0,0,0,.08), inset 0 0 0 6px #ffffff;
}
.avatar img{width:100%;height:100%;object-fit:cover}

/* Раскладка кружков как в макете */
.avatar.a1{ --size:180px; left:40px; top:40px}
.avatar.a2{ --size:180px; left:190px; top:160px}
.avatar.a3{ --size:180px; left:0; bottom:20px}
.avatar.a4{ --size:90px; left:260px; bottom:40px; padding:10px; background:transparent; box-shadow:none}

/* Правая колонка — текст */
.story__text h2{
  margin:0 0 12px; font-weight:800; color:#2b235a; letter-spacing:.2px;
}
.story__text h3{
  margin:0 0 20px; color:#2b235a; opacity:.95;
}
.story__text p{
  margin:0 0 16px; color:#615f7a; line-height:1.7;
}
.story__cta{ margin-top:20px; border-radius:18px; padding:0 26px }

/* Декоративные пузыри вокруг секции */
.story__decor .sb{position:absolute; z-index:0; opacity:.9; animation:float 10s ease-in-out infinite}
.story .sb-1{ left:-30px; top:220px; width:120px; height:120px }
.story .sb-2{ right:22%; top:-56px; width:160px; height:160px; animation-delay:-3s }
.story .sb-3{ left:44%; bottom:-30px; width:84px; height:84px; animation-delay:-1.5s }

/* Адаптив */
@media (max-width: 1100px){
  .story__inner{
    grid-template-columns:1fr;
    gap:36px;
  }
  .story__gallery{ min-height:380px }
  .avatar.a1{ left:10px; top:10px }
  .avatar.a2{ left:130px; top:150px }
  .avatar.a3{ left:-10px; bottom:0 }
  .avatar.a4{ left:220px; bottom:0 }
}
@media (max-width: 640px){
  .story{ padding:72px 0 }
  .story__gallery{ min-height:300px }
  .avatar{ --size:150px }
  .avatar.a2{ --size:170px }
  .avatar.a4{ --size:70px }
}


/*==================Take control of your time!===================*/
/* Общие стили feature уже есть.
   Ниже — небольшие доп.правки под этот экран (картинка-телефон справа). */

/* Лавандовый фон и типографика */
.feature--lavender{
  background:#CFABB9;
  color:#221a64;
  padding:96px 0;
}
.feature__inner--reverse{
  display:grid;
  grid-template-columns: 1fr 1.1fr;   /* текст слева, телефон справа */
  gap:60px;
  align-items:center;
}

/* Телефон как картинка справа */
.feature__phone{
  display:block;
  width:min(350px, 100%);
  height:auto;
  filter: drop-shadow(0 25px 60px rgba(0,0,0,.35));
  border-radius:28px;
}

/* Текстовые цвета на лавандовом фоне */
.feature--lavender .feature__content h2{ color:#2b235a; font-weight:800; margin:8px 0 8px }
.feature--lavender .feature__content h3{ color:#3b2f86; margin:0 0 14px; font-weight:700 }
.feature--lavender .feature__content p{ color:#524f6c; line-height:1.75; margin:0 }
.feature--lavender .feature__icon img{
  width:72px; height:auto; opacity:.9;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.12));
  margin-bottom:10px;
}

/* Точки-переключатели под телефоном */
.feature__visual{ margin:0; position:relative }
.feature__dots{
  display:flex; gap:10px; justify-content:center; margin-top:22px;
}
.feature__dots .dot{
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.35);
  border:0; cursor:default;
}
.feature__dots .dot.is-active{ background:rgba(255,255,255,.55) }

/* Адаптив */
@media (max-width: 1060px){
  .feature__inner--reverse{
    grid-template-columns:1fr;
    gap:32px;
  }
  .feature--lavender .feature__content{
    text-align:center;
  }
  .feature__phone--right{
    margin:0 auto;
    transform:none;  /* на мобильном без наклона */
  }
}




/* ============== Feature Choose Service (image phone) ============== */
.feature--blue{
  background:#25A8DB;
  color:#eaf7ff;
  padding:96px 0;
}
.feature__inner{
  display:grid;
  grid-template-columns: 1.1fr 1fr;  /* слева картинка, справа текст */
  gap:60px;
  align-items:center;
}

.feature__visual{ margin:0; position:relative }

/* точки-переключатели под телефоном (для вида) */
.feature__dots{
  display:flex; gap:10px; justify-content:center;
  margin-top:22px;
}
.feature__dots .dot{
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.25);
  border:0; cursor:default;
}
.feature__dots .dot.is-active{ background:rgba(255,255,255,.45) }

/* контент справа */
.feature__content h2{
  margin:8px 0 8px; color:#ffffff; font-weight:800;
}
.feature__content h3{
  margin:0 0 14px; color:#d3f1ff; font-weight:700;
}
.feature__content p{
  margin:0; color:#e1f3ff; opacity:.9; line-height:1.75;
}
.feature__icon img{
  width:72px; height:auto; opacity:.9;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.15));
  margin-bottom:10px;
}

/* Адаптив */
@media (max-width: 1060px){
  .feature__inner{ grid-template-columns:1fr; gap:32px }
  .feature__content{ text-align:center }
  .feature__phone{ margin:0 auto; transform:none }   /* на мобильном без наклона */
}


/* ============== Feature Lavender (Track) ============== */
.feature--lavender{
  background:#CFABB9;           /* мягкий лавандовый как на макете */
  color:#221a64;
  padding:96px 0;
}
.feature__inner--reverse{
  grid-template-columns: 1fr 1.1fr;
}

/* Переиспользуем шаблон feature, зеркалим телефон */
.phone--tilt-r .phone__bezel{
  width:420px; max-width:100%;
  transform:rotate(4deg);
  box-shadow:0 25px 60px rgba(0,0,0,.35);
}
.screen--map{
  position:relative; overflow:hidden; background:#e9eef7;
}
.screen--map .mapshot{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Заглушка карты (если нет скриншота) */
.mapstub{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.0) 80%, rgba(255,255,255,.92) 80% 100%),
    radial-gradient(90% 100% at 110% 110%, #87d1ff 0 40%, transparent 41%),
    conic-gradient(from 0deg at 70% 30%, #b2e4c8, #e2f2bb, #9fd6ff, #b2e4c8);
  filter:saturate(0.95) contrast(1.05);
}
.mapstub .marker{
  position:absolute; left:50%; top:35%;
  transform:translate(-50%, -50%);
  width:26px; height:26px; border-radius:50%;
  background:#2aa9dd; box-shadow:0 0 0 4px rgba(42,169,221,.25);
}
.mapstub .marker::after{
  content:""; position:absolute; left:50%; top:100%; transform:translate(-50%, -4px);
  width:10px; height:10px; background:#2aa9dd; clip-path:polygon(50% 100%, 0 0, 100% 0);
}

/* Нижняя панель адреса и кнопки */
.map__bottom{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 12px 14px;
  display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 28%, rgba(255,255,255,.98) 100%);
}
.map__bottom .addr{
  background:#fff; border-radius:12px; padding:10px 12px;
  color:#283a53; font-weight:600; box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.map__bottom .btn-yes{
  display:block; text-align:center; text-decoration:none;
  background:#9fe0ff; color:#153247; font-weight:800;
  border-radius:14px; padding:10px 12px;
}
.map__bottom .btn-ghost{
  display:block; text-align:center; text-decoration:none;
  background:#eef1f6; color:#3b4b63; font-weight:700;
  border-radius:14px; padding:10px 12px;
}

/* Тексты слева на лавандовом фоне */
.feature--lavender .feature__content h2{
  color:#2b235a;
}
.feature--lavender .feature__content h3{
  color:#3b2f86; opacity:.9;
}
.feature--lavender .feature__content p{
  color:#524f6c; opacity:.95;
}
.feature--lavender .feature__icon img{
  width:72px; opacity:.9; filter:drop-shadow(0 8px 24px rgba(0,0,0,.12));
}

/* Адаптив зеркального блока */
@media (max-width: 1060px){
  .feature__inner--reverse{ grid-template-columns:1fr }
  .feature--lavender .feature__content{ order:2; text-align:center }
  .phone--tilt-r .phone__bezel{ order:1; margin:0 auto }
}


/* ============== Trust / Why you can trust ============== */
.trust{
  position:relative;
  background:#ffffff;
  padding:96px 0 120px;
  overflow:hidden;
}
.trust__header{
  text-align:center; max-width:860px; margin:0 auto 36px;
}
.trust__header h2{
  margin:0 0 10px; color:#221a64; font-weight:800;
}
.trust__header p{
  margin:0; color:#6b6a86;
}

.trust__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
}

/* Карточка преимущества */
.trust-card{
  background:#F6EDEF;                 /* очень светло‑розовый фон */
  border-radius:22px;
  padding:34px 26px 30px;
  text-align:center;
  color:#2b235a;
  position:relative;
  box-shadow:
    0 24px 60px rgba(152, 187, 255, .28),   /* мягкое «сияние» снизу */
    inset 0 0 0 1px rgba(255,255,255,.75);
}
.trust-card__icon{
  width:140px; height:auto; display:block; margin:0 auto 12px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.06));
  opacity:.95;
}
.trust-card h3{
  margin:8px 0 10px; font-size:22px; color:#221a64;
}
.trust-card p{
  margin:0; color:#6b6a86; line-height:1.7;
}

/* Декоративные пузыри вокруг блока */
.trust .tr{ position:absolute; animation:float 12s ease-in-out infinite; z-index:0 }
.trust .tr-1{ left:40px; top:120px; width:120px; height:120px }
.trust .tr-2{ right:22%; top:70px; width:100px; height:100px; animation-delay:-3s }
.trust .tr-3{ left:32%; bottom:-24px; width:120px; height:120px; animation-delay:-1.5s }
.trust .tr-4{ right:24px; bottom:-40px; width:220px; height:220px; animation-delay:-2.5s }

/* Адаптив */
@media (max-width: 1024px){
  .trust__grid{ grid-template-columns:1fr 1fr }
}
@media (max-width: 640px){
  .trust{ padding:72px 0 96px }
  .trust__grid{ grid-template-columns:1fr }
  .trust-card__icon{ width:120px }
}


/* ============== CTA Start for free ============== */
.cta{
  height: 55vh;
  position:relative;
  overflow:hidden;
  padding:96px 0;
  color:#ffffff;
  background:linear-gradient(135deg, #25A8DB 0%, #E2B1C4 100%);
}
.cta__inner{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  align-items:center;
  gap:40px;
}

/* Текст и кнопка слева */
.cta__text h2{
  margin:0 0 14px;
  font-weight:800;
  font-size: clamp(34px, 5vw, 60px);
}
.cta__text p{
  margin:0 0 28px;
  color:#eaf7ff;
  opacity:.95;
  max-width:52ch;
}
.cta__btn{
  height:56px;
  padding:0 26px;
  border-radius:999px;
  background:#e4b7c6;
  color:#2b235a;
  box-shadow:0 10px 24px rgba(226,177,196,.35), inset 0 -3px 0 rgba(0,0,0,.05);
}

/* Телефон справа (картинка) */
.cta__visual{
  position:relative;
  width:min(350px, 100%);
  height:auto;
  display:flex; justify-content:flex-end;
}
.cta__phone{
  width:min(640px, 100%);
  height:auto;
  filter: drop-shadow(0 24px 64px rgba(0,0,0,.35));
  border-radius:30px; /* полезно, если PNG с прозрачностью */
}

/* Пузыри */
.cta-b1,.cta-b2,.cta-b3{
  position:absolute;
  animation:float 12s ease-in-out infinite;
  z-index:0;
}
.cta-b1{ left:54%; bottom:80px; width:220px; height:220px; animation-delay:-2s }
.cta-b2{ right:4%; top:-40px; width:260px; height:260px; animation-delay:-4s }
.cta-b3{ left:-2%; top:18%; width:140px; height:140px; animation-delay:-1s }

/* Адаптив */
@media (max-width: 1024px){
  .cta__inner{
    grid-template-columns:1fr;
    gap:28px;
  }
  .cta__text{ text-align:left }
  .cta__visual{ justify-content:center }
  .cta__phone{ transform:none; width:min(520px,100%) }
}
@media (max-width: 560px){
  .cta{ padding:72px 0 }
  .cta__text p{ max-width:none }
}


/* ============== Testimonials ============== */
.testimonials{
  position:relative;
  background:#fff;
  padding:96px 0 120px;
  overflow:hidden;
}
.testimonials__header{
  text-align:center; margin-bottom:26px;
}
.testimonials__header h2{
  margin:0; color:#221a64; font-weight:800;
}

.testimonials__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 36px;
}

/* Карточка отзыва */
.t-card{
  position:relative;
  background:#ffffff;
  border-radius:18px;
  padding:22px 24px 26px;
  box-shadow:
    0 12px 36px rgba(27, 60, 120, .10),
    inset 0 0 0 1px rgba(142,160,200,.25);
}
.t-card__bubble{
  position:absolute; left:18px; top:-18px; width:72px; height:72px;
  opacity:.9; filter:drop-shadow(0 10px 20px rgba(0,0,0,.12));
}
.t-card__bubble--right{ left:auto; right:18px }

.t-card__head{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; margin-bottom:8px;
}
.t-card__avatar{
  width:70px; height:70px; border-radius:50%; object-fit:cover;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.t-card__name{
  font-weight:800; color:#1f1a5c; align-self:center;
}

.t-card__stars{
  color:#f7c948; letter-spacing:2px; font-size:20px;
  margin:2px 0 8px;
}
.t-card h3{
  margin:0 0 8px; color:#2b235a; font-size:18px;
}
.t-card p{
  margin:0; color:#66668a; line-height:1.7;
}

/* Декоративные пузыри вокруг секции */
.tm{ position:absolute; animation:float 12s ease-in-out infinite; z-index:0 }
.tm-1{ left:-20px; top:-40px; width:220px; height:220px }
.tm-2{ left:22%; top:76px; width:86px; height:86px; animation-delay:-3s }
.tm-3{ right:8%; top:110px; width:86px; height:86px; animation-delay:-1.5s }
.tm-4{ right:4%; bottom:-40px; width:220px; height:220px; animation-delay:-2.5s }

/* Адаптив */
@media (max-width: 900px){
  .testimonials__grid{ grid-template-columns:1fr }
  .t-card__bubble{ display:none }
}


/* ============== Footer ============== */
.footer{
  position:relative;
  background:#1A1451;        /* глубокий индиго как в макете */
  color:#cfd5ff;
  padding:66px 0 72px;
}
.footer__inner{
  display:grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap:40px 56px;
  align-items:start;
}

/* Левая колонка */
.footer .brand img{ height:42px; display:block; margin-bottom:18px }
.footer__tagline{
  margin:0 0 32px;
  font-size:22px;
  line-height:1.4;
  color:#e9ebff;
}
.footer__legal{
  display:flex; gap:28px; flex-wrap:wrap;
}
.footer__legal a{
  color:#cfd5ff; text-decoration:none; opacity:.9;
}
.footer__legal a:hover{ opacity:1 }

/* Центр: группы ссылок */
.footer__links{
  display:grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap:32px 56px;
}
.footer__col h4{
  margin:0 0 12px; color:#ffffff; font-weight:700;
}
.footer__col a{
  display:block; color:#cfd5ff; text-decoration:none; margin:10px 0 0;
  opacity:.85;
}
.footer__col a:hover{ opacity:1 }

/* Правая колонка: бейджи стора */
.footer__stores{
  display:flex; flex-direction:column; gap:16px; justify-self:end;
}
.footer__stores img{
  height:44px; display:block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* Декор */
.footer-b1{
  position:absolute; left:180px; top:34px; width:36px; height:36px; animation:float 10s ease-in-out infinite;
}

/* Адаптив */
@media (max-width: 1024px){
  .footer__inner{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:auto;
  }
  .footer__stores{ justify-self:start }
}
@media (max-width: 700px){
  .footer{ padding:48px 0 56px }
  .footer__inner{
    grid-template-columns:1fr;
    gap:28px;
  }
  .footer__links{
    grid-template-columns:1fr 1fr;
  }
  .footer__tagline{ font-size:20px }
}
@media (max-width: 420px){
  .footer__links{
    grid-template-columns:1fr;
  }
}