/* ============================================================
   АЙВИ — ИИ-помощник. Скролл-сторителлинг лендинг.
   Vanilla CSS. Анимации закомментированы по секциям.
   ============================================================ */

:root{
  --blue:#a8c5d1;          /* фон героя (из Figma) */
  --blue-deep:#8fb4c4;
  --navy:#0a2c47;
  --ink:#12324b;
  --muted:#5f7789;
  --cream:#f7f4ee;
  --card-blue:#b9d9e8;
  --card-yellow:#f5e3a4;
  --card-green:#bfe3c9;
  --radius:28px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{background:#fff}            /* НЕТ scroll-behavior:smooth глобально (Правило 1.2) */
body{
  margin:0;
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  color:var(--navy);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  touch-action:pan-y;            /* iOS: только вертикаль (Правило 1.5) */
  overscroll-behavior-y:none;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px;border-radius:999px;font-weight:700;font-size:16px;
  cursor:pointer;transition:transform .3s var(--ease),background .3s,box-shadow .3s;
  white-space:nowrap;line-height:1;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--navy);color:#fff;box-shadow:0 12px 30px rgba(10,44,71,.28)}
.btn--primary:hover{box-shadow:0 18px 40px rgba(10,44,71,.36)}
.btn--ghost{background:rgba(255,255,255,.55);color:var(--navy);backdrop-filter:blur(4px)}
.btn--ghost:hover{background:rgba(255,255,255,.8)}
.btn--light{background:#fff;color:var(--navy);box-shadow:0 16px 40px rgba(0,0,0,.25);font-size:17px;padding:17px 38px}
.btn--nav{background:var(--navy);color:#fff;padding:11px 22px;font-size:14px}

/* ============================================================
   ШАПКА — прозрачная над героем, уплотняется при скролле
   ============================================================ */
/* Навигация — центрированная «пилюля» (как в референсе) */
.nav{
  position:fixed;top:18px;left:0;right:0;z-index:100;
  display:flex;justify-content:center;
  padding:0 16px;
  transition:top .4s var(--ease);
}
.nav__pill{
  display:flex;align-items:center;gap:clamp(14px,2vw,28px);
  padding:9px 9px 9px 20px;border-radius:999px;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(6px);            /* ≤6px на fixed-элементе (Правило 1.6) */
  box-shadow:0 6px 24px rgba(10,44,71,.14),inset 0 0 0 1px rgba(10,44,71,.06);
  transition:background .4s var(--ease),box-shadow .4s;
}
.nav--solid{top:10px}
.nav--solid .nav__pill{
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 28px rgba(10,44,71,.16),inset 0 0 0 1px rgba(10,44,71,.1);
}
.nav__logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:.02em}
.nav__dot{width:12px;height:12px;border-radius:50%;background:var(--navy);
  box-shadow:0 0 0 4px rgba(10,44,71,.14)}
.nav__links{display:flex;gap:clamp(14px,1.6vw,26px);font-weight:600;font-size:14.5px}
.nav__links a{opacity:.8;transition:opacity .25s}
.nav__links a:hover{opacity:1}
.nav__cta{
  padding:10px 20px;border-radius:999px;background:var(--navy);color:#fff;
  font-weight:700;font-size:14px;transition:transform .3s var(--ease),background .3s;
}
.nav__cta:hover{transform:translateY(-1px);background:#0d3a5e}

/* ============================================================
   СЕКЦИЯ 1 — ГЕРОЙ
   Высокая обёртка = зона скролла. Внутри sticky-экран.
   JS двигает --p (0→1): контент масштабируется/тает,
   фон плавно светлеет к белому.
   ============================================================ */
/* Герой — один экран. Не пиннится: при скролле «уезжает» вглубь
   (scale+fade), открывая белый фон следующей секции. Без мёртвой
   зоны прокрутки. Пиннится дальше именно карточка чата. */
.hero{position:relative;height:100svh;overflow:hidden;background:var(--blue)}
.hero__sticky{
  position:relative;height:100%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue);                 /* JS слегка светлит по прогрессу */
}
/* полноэкранное фоновое видео с роботом */
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 78%;
  z-index:0;transform-origin:60% 40%;will-change:transform,opacity;
}
/* лёгкий скрим сверху/снизу — читаемость заголовка и кнопок над видео */
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(168,197,209,.6) 0%,rgba(168,197,209,0) 26%,
    rgba(168,197,209,0) 58%,rgba(168,197,209,.5) 100%);
}
/* Текст-блок слева, по вертикали центрирован (как в референсе) */
.hero__content{
  position:relative;z-index:2;height:100%;width:100%;max-width:1280px;margin:0 auto;
  padding:0 clamp(24px,6vw,76px);
  display:flex;align-items:center;justify-content:flex-start;text-align:left;
  will-change:transform,opacity;
}
.hero__text{max-width:520px;margin-top:9vh}   /* текст ниже, у тела робота — как в референсе */
@media (min-width:821px){.hero__text{margin-left:-75px;margin-top:calc(9vh - 30px)}}  /* сдвиг текста левее и выше на десктопе */
.hero__badge{
  display:inline-flex;align-items:center;gap:9px;padding:8px 16px;margin-bottom:26px;
  border-radius:999px;background:rgba(255,255,255,.6);backdrop-filter:blur(4px);
  font-size:13px;font-weight:600;color:var(--navy);
  box-shadow:0 4px 16px rgba(10,44,71,.1),inset 0 0 0 1px rgba(255,255,255,.5);
}
.hero__badge-dot{width:8px;height:8px;border-radius:50%;background:#63b6e6;
  box-shadow:0 0 0 4px rgba(99,182,230,.25)}
.hero__title{
  font-weight:800;letter-spacing:-.03em;line-height:.9;
  font-size:clamp(72px,12vw,160px);color:var(--navy);
  text-shadow:0 4px 30px rgba(168,197,209,.6);
}
.hero__dot{color:#63b6e6}
.hero__sub{
  max-width:400px;margin:20px 0 0;font-size:clamp(16px,1.8vw,20px);
  line-height:1.5;color:var(--ink);font-weight:500;
}
.hero__actions{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap;margin-top:30px}

/* Печатная машинка (вариант 7) */
.hero__tw{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-top:16px;font-weight:700}
.hero__tw-label{font-size:14px;color:var(--muted);font-weight:600}
.hero__tw-line{font-size:clamp(16px,1.8vw,20px);color:#1f6fa3}
.tw-cursor{display:inline-block;width:2px;height:1.05em;background:#1f6fa3;
  vertical-align:-2px;margin-left:1px;animation:twblink 1s steps(1) infinite}
@keyframes twblink{50%{opacity:0}}

/* Анимация появления по элементам (вариант 8) — запускается после прелоадера */
.hero__text>*{opacity:0;transform:translateY(22px)}
.hero.is-ready .hero__text>*{animation:heroUp .8s var(--ease) forwards}
.hero.is-ready .hero__badge{animation-delay:.05s}
.hero.is-ready .hero__title{animation-delay:.18s}
.hero.is-ready .hero__sub{animation-delay:.34s}
.hero.is-ready .hero__tw{animation-delay:.48s}
.hero.is-ready .hero__actions{animation-delay:.6s}
@keyframes heroUp{to{opacity:1;transform:none}}

/* Плавающие реплики вокруг робота (вариант 9) */
.hero__bubbles{position:absolute;inset:0;z-index:2;pointer-events:none}
.fbub{position:absolute;max-width:236px;padding:11px 15px;font-size:14px;line-height:1.4;
  border-radius:16px;box-shadow:0 12px 26px rgba(10,44,71,.14);opacity:0}
.fbub--in{background:#fff;color:var(--ink);border:1px solid rgba(10,44,71,.08);border-bottom-left-radius:5px}
.fbub--out{background:var(--navy);color:#fff;border-bottom-right-radius:5px}
.fbub.b1{right:15%;top:20%}
.fbub.b2{right:4%;top:40%}
.fbub.b3{right:17%;top:59%}
.hero.is-ready .fbub{animation:heroBubIn .7s var(--ease) forwards, bob 4.6s ease-in-out infinite}
.hero.is-ready .fbub.b1{animation-delay:.7s,.7s}
.hero.is-ready .fbub.b2{animation-delay:1.15s,1.15s}
.hero.is-ready .fbub.b3{animation-delay:1.6s,1.6s}
@keyframes heroBubIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.hero__scrollhint{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  opacity:.7;transition:opacity .3s;
}
.hero__mouse{width:22px;height:34px;border:2px solid var(--navy);border-radius:14px;position:relative}
.hero__mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;
  border-radius:2px;background:var(--navy);transform:translateX(-50%);
  animation:wheel 1.5s infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}
  100%{opacity:0;transform:translate(-50%,10px)}}

/* ============================================================
   СЕКЦИЯ 2 — ЧАТ
   Карточка «прилипает» по центру. JS двигает появление/уход
   (scale+opacity+translateY) и последовательный показ реплик.
   ============================================================ */
.chat{position:relative;height:300svh;background:#fff}
.chat__sticky{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  padding:0 20px;
}
.chat__card{
  width:min(440px,92vw);background:#fff;border-radius:32px;
  box-shadow:0 40px 90px rgba(10,44,71,.18),0 4px 12px rgba(10,44,71,.06);
  border:1px solid rgba(10,44,71,.06);overflow:hidden;
  transform:translateY(60px) scale(.86);opacity:0;
  will-change:transform,opacity;
}
.chat__head{
  display:flex;align-items:center;gap:12px;padding:16px 18px;
  background:var(--navy);color:#fff;
}
.chat__avatar{width:38px;height:38px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 50% 38%,#eafaff 0 32%,var(--card-blue) 33% 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.chat__meta{display:flex;flex-direction:column;line-height:1.3;flex:1}
.chat__meta strong{font-size:16px}
.chat__status{font-size:12px;opacity:.7;display:flex;align-items:center;gap:6px}
.chat__status::before{content:"";width:7px;height:7px;border-radius:50%;background:#63e6a0;
  box-shadow:0 0 0 3px rgba(99,230,160,.25)}
.chat__close{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.35)}
.chat__body{
  padding:20px 18px;display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(180deg,#f4f8fb,#fff);min-height:280px;
}
.bubble{
  max-width:80%;padding:12px 16px;font-size:15px;line-height:1.45;border-radius:18px;
  opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.bubble.is-shown{opacity:1;transform:none}
.bubble--in{align-self:flex-start;background:#fff;border:1px solid rgba(10,44,71,.08);
  border-bottom-left-radius:6px;color:var(--ink)}
.bubble--out{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:6px}
.bubble--typing{align-self:flex-start;background:#fff;border:1px solid rgba(10,44,71,.08);
  display:flex;gap:5px;padding:15px 18px;border-bottom-left-radius:6px}
.bubble--typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);
  animation:blink 1.2s infinite}
.bubble--typing span:nth-child(2){animation-delay:.2s}
.bubble--typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.chat__input{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid rgba(10,44,71,.07)}
.chat__field{flex:1;color:var(--muted);font-size:14px}
.chat__send{width:34px;height:34px;border-radius:50%;flex:none;background:var(--navy);position:relative}
.chat__send::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;
  left:3px}
.chat__caption{
  font-size:clamp(16px,2.2vw,20px);font-weight:600;color:var(--ink);text-align:center;
  max-width:440px;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s;
}
.chat__caption.is-shown{opacity:.9;transform:none}

/* ============================================================
   СЕКЦИЯ 3 — СТЕК КАРТОЧЕК
   Классический sticky-stack: каждая карточка прилипает с
   растущим top-offset и z-index, предыдущая «выглядывает».
   ============================================================ */
.cards{background:#fff;padding:40px 0 0}
.cards__intro{text-align:center;max-width:640px;margin:0 auto;padding:60px 24px 30px}
.cards__intro h2{font-size:clamp(32px,5vw,56px);font-weight:800;letter-spacing:-.02em}
.cards__intro p{margin-top:16px;font-size:18px;color:var(--muted)}

.card{
  position:sticky;
  top:calc(88px + var(--i) * 26px);       /* растущий отступ → предыдущая карта видна */
  z-index:calc(var(--i) + 1);
  width:min(1120px,92vw);margin:0 auto 40px;min-height:78svh;
  border-radius:var(--radius);overflow:hidden;
  display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:20px;
  padding:clamp(30px,5vw,64px);
  box-shadow:0 30px 70px rgba(10,44,71,.16);
}
.card--blue{background:var(--card-blue)}
.card--yellow{background:var(--card-yellow)}
.card--green{background:var(--card-green)}
.card__num{font-weight:800;font-size:15px;letter-spacing:.14em;opacity:.5;color:var(--navy)}
.card__text h3{font-size:clamp(28px,4vw,46px);font-weight:800;letter-spacing:-.02em;margin:14px 0 18px;color:var(--navy)}
.card__text p{font-size:clamp(16px,1.8vw,19px);line-height:1.55;color:var(--ink);max-width:440px}
.card__img{display:flex;justify-content:center;align-items:center}
.card__img img{width:100%;max-width:440px;border-radius:20px;
  filter:drop-shadow(0 20px 30px rgba(10,44,71,.16))}

/* ============================================================
   СЕКЦИЯ 4 — ВОЗМОЖНОСТИ (статичная, две колонки)
   ============================================================ */
.features{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center;
  max-width:1180px;margin:0 auto;padding:clamp(80px,12vw,140px) clamp(24px,5vw,40px);
  content-visibility:auto;contain-intrinsic-size:1px 900px;   /* below-the-fold (Правило 3.2) */
}
.features__media img{width:100%;border-radius:var(--radius);background:var(--card-green);
  box-shadow:0 30px 60px rgba(10,44,71,.14)}
.features__title{font-size:clamp(30px,4.5vw,48px);font-weight:800;letter-spacing:-.02em;margin-bottom:36px}
.feature{display:flex;gap:18px;padding:20px 0;border-top:1px solid rgba(10,44,71,.1)}
.feature:last-child{border-bottom:1px solid rgba(10,44,71,.1)}
.feature__ico{
  flex:none;width:44px;height:44px;border-radius:12px;background:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--navy);
}
.feature h4{font-size:19px;font-weight:700;margin-bottom:6px}
.feature p{font-size:15.5px;line-height:1.5;color:var(--muted)}

/* ============================================================
   СЕКЦИЯ 5 — FAQ (аккордеон)
   ============================================================ */
.faq{
  max-width:820px;margin:0 auto;padding:clamp(40px,8vw,100px) clamp(24px,5vw,40px) clamp(80px,12vw,140px);
  content-visibility:auto;contain-intrinsic-size:1px 700px;
}
.faq__title{font-size:clamp(30px,4.5vw,52px);font-weight:800;letter-spacing:-.02em;text-align:center;margin-bottom:44px}
.faq__item{border-bottom:1px solid rgba(10,44,71,.12)}
.faq__item summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-size:clamp(17px,2.2vw,21px);font-weight:700;color:var(--navy);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-size:26px;font-weight:400;color:var(--muted);transition:transform .35s var(--ease);
}
.faq__item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq__answer{padding:0 40px 26px 0;font-size:16.5px;line-height:1.6;color:var(--muted);
  animation:faqOpen .4s var(--ease)}
@keyframes faqOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ============================================================
   СЕКЦИЯ 6 — НИЖНИЙ ГЕРОЙ (фото-заглушка под будущее видео)
   ============================================================ */
.cta{position:relative;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cta::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,44,71,.25),rgba(10,44,71,.55))}
.cta__inner{position:relative;z-index:2;text-align:center;color:#fff;max-width:760px;padding:0 24px}
.cta__inner h2{font-size:clamp(34px,6vw,72px);font-weight:800;letter-spacing:-.02em;line-height:1.02}
.cta__inner p{margin:22px auto 34px;max-width:520px;font-size:clamp(16px,2vw,19px);line-height:1.5;opacity:.92}
.cta__note{display:block;margin-top:20px;font-size:13px;opacity:.8;letter-spacing:.03em}

/* ============================================================
   ФУТЕР
   ============================================================ */
.footer{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:26px clamp(24px,5vw,64px);background:var(--navy);color:#fff;font-size:14px;
}
.footer__logo{font-weight:800;font-size:20px;letter-spacing:.04em}
.footer__copy{opacity:.7}
.footer__made{opacity:.5;font-size:13px}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:820px){
  .nav__links{display:none}
  .nav__pill{padding:8px 8px 8px 18px}
  .hero{height:100svh}
  /* мобайл: робот выше, текст внизу — не перекрывают друг друга */
  .hero__video{object-position:center 24%}
  .hero__content{align-items:flex-end;justify-content:flex-start;padding-bottom:11svh}
  .hero__text{max-width:100%}
  .hero__scrim{background:linear-gradient(180deg,
    rgba(168,197,209,.35) 0%,rgba(168,197,209,0) 30%,
    rgba(168,197,209,.15) 52%,rgba(168,197,209,.8) 100%)}
  .hero__title{font-size:clamp(66px,22vw,110px)}
  .hero__sub{max-width:440px}
  .hero__bubbles{display:none}          /* реплики только на десктопе */
  .hero__tw{margin-top:12px}
  .chat{height:280svh}
  .card{grid-template-columns:1fr;min-height:auto;gap:24px;text-align:left}
  .card__img img{max-width:280px}
  .card__img{order:-1}
  .features{grid-template-columns:1fr}
  .features__media{max-width:420px;margin:0 auto}
  .footer{justify-content:center;text-align:center}
}
@media (max-width:520px){
  .btn{padding:14px 24px;font-size:15px}
  .hero__title{font-size:clamp(40px,13vw,60px)}
}
/* короткие / ландшафтные экраны — заголовок компактнее */
@media (max-height:720px){
  .hero__title{font-size:clamp(52px,11vh,100px)}
  .hero__badge{margin-bottom:14px}
  .hero__sub{font-size:15px;margin-top:14px}
  .hero__actions{margin-top:20px}
  .hero__scrollhint{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}