/* =========================================================
   ELIXIR — landing
   Дизайн-направление: светлый бетон, плотная гротеск-типографика,
   глянцевые 3D-объекты, блочные секции.
   ========================================================= */

/* ---------- ТОКЕНЫ ---------- */
:root{
  --bg:          #eeeeec;
  --bg-2:        #e5e5e2;
  --paper:       #f7f7f5;
  --ink:         #0e0e0d;
  --ink-2:       #37372f;
  --ink-3:       #6c6c62;
  --line:        rgba(14,14,13,.12);
  --line-soft:   rgba(14,14,13,.07);

  --lime:        #c8f24e;
  --lime-deep:   #a9d92c;
  --mag:         #ff5fd6;
  --aqua:        #8fd8ff;
  --amber:       #ffb84d;

  --r-s: 12px;
  --r-m: 20px;
  --r-l: 30px;
  --r-xl: 44px;
  --r-pill: 999px;

  --pad: clamp(20px, 4.2vw, 68px);
  --gap: clamp(16px, 2.2vw, 28px);
  --sect: clamp(88px, 12vw, 190px);

  --disp: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22,.68,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:110px }
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
::selection{ background:var(--lime); color:var(--ink) }

/* ---------- ВЕКТОРНЫЙ ЛОГОТИП ---------- */
.sprite{ position:absolute; width:0; height:0; overflow:hidden }
.wordmark{ display:block; fill:currentColor; color:var(--ink) }

/* ---------- ЗЕРНО ---------- */
.grain{
  position:fixed; inset:-50%; z-index:9999; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  animation:grainShift 6s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}     20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}  100%{transform:translate(0,0)}
}

/* =========================================================
   ТИПОГРАФИКА
   ========================================================= */
.h2{
  font-family:var(--disp);
  font-weight:800;
  font-size:clamp(34px, 5.6vw, 78px);
  line-height:.95;
  letter-spacing:-.035em;
  font-variation-settings:"wdth" 92;
}
.h2--tight{ font-size:clamp(38px, 5.2vw, 72px) }
.h2--inv{ color:var(--paper) }
.h2 em{ font-style:normal; position:relative; white-space:nowrap }
.h2 em::after{
  content:""; position:absolute; left:-.04em; right:-.04em; bottom:.06em; height:.3em;
  background:var(--lime); z-index:-1; border-radius:3px;
  transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease) .2s;
}
.h2 em{ z-index:0 }
.is-in .h2 em::after, .h2.is-in em::after{ transform:scaleX(1) }

.kicker{
  font-family:var(--disp); font-weight:700; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:22px;
}
.kicker--inv{ color:rgba(247,247,245,.5) }

.lead{
  font-size:clamp(16px, 1.35vw, 20px);
  line-height:1.5; color:var(--ink-2); max-width:56ch;
}
.lead--inv{ color:rgba(247,247,245,.68) }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--disp); font-weight:600; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  padding:9px 16px 9px 12px; border:1px solid var(--line);
  border-radius:var(--r-pill); background:rgba(255,255,255,.55);
  backdrop-filter:blur(8px);
}
.pulse{
  width:7px; height:7px; border-radius:50%; background:var(--lime-deep);
  box-shadow:0 0 0 0 rgba(169,217,44,.7); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(169,217,44,.65) }
  70%{ box-shadow:0 0 0 11px rgba(169,217,44,0) }
  100%{ box-shadow:0 0 0 0 rgba(169,217,44,0) }
}

/* =========================================================
   КНОПКИ
   ========================================================= */
.btn{
  --bh:46px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:var(--bh); padding:0 22px; border-radius:var(--r-pill);
  font-family:var(--disp); font-weight:600; font-size:14.5px; letter-spacing:-.005em;
  white-space:nowrap; border:1px solid transparent;
  transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .35s var(--ease);
  will-change:transform;
}
.btn svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) }
.btn--lg{ --bh:54px; padding:0 28px; font-size:15.5px }
.btn--xl{ --bh:62px; padding:0 34px; font-size:17px }

.btn--dark{ background:var(--ink); color:var(--paper) }
.btn--dark:hover{ background:#232320; box-shadow:0 12px 30px -14px rgba(14,14,13,.7) }

.btn--lime{ background:var(--lime); color:var(--ink); border-color:rgba(14,14,13,.1) }
.btn--lime:hover{ background:#d6ff62; box-shadow:0 14px 34px -16px rgba(169,217,44,.95) }

.btn--outline{ border-color:var(--line); color:var(--ink); background:transparent }
.btn--outline:hover{ border-color:var(--ink); background:rgba(14,14,13,.04) }
.btn--outline.btn--inv{ border-color:rgba(247,247,245,.3); color:var(--paper) }
.btn--outline.btn--inv:hover{ border-color:var(--paper); background:rgba(247,247,245,.1) }

.btn--plain{ color:var(--ink); padding:0 6px }
.btn--plain:hover{ color:var(--ink-3) }
.btn--plain svg{ transition:transform .35s var(--ease) }
.btn--plain:hover svg{ transform:translateX(4px) }

/* =========================================================
   НАВИГАЦИЯ
   ========================================================= */
.nav{
  position:fixed; top:14px; left:0; right:0; z-index:900;
  display:flex; align-items:center; gap:14px;
  padding:0 var(--pad);
  transition:top .4s var(--ease);
}
/* без подложки: знак стоит прямо на фоне, высота по содержимому,
   вертикальный центр даёт align-items:center у самой .nav */
.nav__brand{
  display:flex; align-items:flex-end; gap:5px;
  height:auto; padding:0;
  transition:opacity .35s var(--ease);
}
.nav__brand:hover{ opacity:.62 }
.nav__mark{ width:74px; height:18.6px }
.nav__dot{ width:6px; height:6px; border-radius:50%; background:var(--lime-deep); margin-bottom:2px }

.nav__pill{
  display:flex; align-items:center; gap:4px;
  height:52px; padding:0 8px; border-radius:var(--r-pill);
  background:rgba(247,247,245,.72); border:1px solid var(--line-soft);
  backdrop-filter:blur(16px) saturate(1.4);
}
.nav__pill a{
  font-family:var(--disp); font-weight:500; font-size:14px;
  padding:9px 15px; border-radius:var(--r-pill);
  color:var(--ink-2); transition:background .3s, color .3s;
}
.nav__pill a:hover{ background:rgba(14,14,13,.07); color:var(--ink) }

.nav__right{ margin-left:auto; display:flex; align-items:center; gap:8px }
.nav__ghost{
  font-family:var(--disp); font-weight:500; font-size:14px;
  padding:0 14px; height:52px; display:inline-flex; align-items:center;
  border-radius:var(--r-pill); color:var(--ink-2);
  background:rgba(247,247,245,.72); border:1px solid var(--line-soft);
  backdrop-filter:blur(16px);
  transition:color .3s, background .3s;
}
.nav__ghost:hover{ color:var(--ink); background:rgba(247,247,245,.95) }
.nav__cta{ --bh:52px }

.nav__burger{ display:none; width:52px; height:52px; border-radius:var(--r-pill);
  background:var(--ink); flex-direction:column; align-items:center; justify-content:center; gap:5px }
.nav__burger i{ width:18px; height:2px; background:var(--paper); border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s }
.nav__burger[aria-expanded="true"] i:first-child{ transform:translateY(3.5px) rotate(45deg) }
.nav__burger[aria-expanded="true"] i:last-child{ transform:translateY(-3.5px) rotate(-45deg) }

/* скрытие при скролле вниз */
.nav.is-hidden{ top:-90px }
/* тень только у элементов с подложкой — у знака её больше нет */
.nav.is-stuck .nav__pill,
.nav.is-stuck .nav__ghost{ box-shadow:0 10px 30px -20px rgba(14,14,13,.55) }

.drawer[hidden]{ display:none }
.drawer{
  position:fixed; inset:78px 12px auto 12px; z-index:880;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  padding:14px; display:flex; flex-direction:column;
  box-shadow:0 30px 60px -30px rgba(14,14,13,.4);
  animation:drawerIn .35s var(--ease-out);
}
@keyframes drawerIn{ from{ opacity:0; transform:translateY(-10px) } }
.drawer a{
  font-family:var(--disp); font-weight:600; font-size:19px; letter-spacing:-.02em;
  padding:13px 12px; border-radius:var(--r-s);
}
.drawer a:hover{ background:rgba(14,14,13,.05) }
.drawer a:last-child{ color:var(--ink-3); font-size:15px; font-weight:500 }

/* =========================================================
   ГЕРОЙ
   ========================================================= */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(120px,14vh,170px) var(--pad) clamp(60px,8vw,90px);
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 70% 0%, #f6f6f4 0%, transparent 58%),
    radial-gradient(90% 60% at 12% 12%, rgba(200,242,78,.28) 0%, transparent 60%),
    radial-gradient(70% 55% at 88% 26%, rgba(255,95,214,.16) 0%, transparent 62%),
    var(--bg);
}
.hero__grid{
  position:relative; z-index:3;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(34px,4.4vw,80px); align-items:center;
  max-width:1500px; width:100%; margin:0 auto;
}
.hero__inner{ min-width:0 }
.hero__gallery{ min-width:0 }

.hero__title{
  font-family:var(--disp); font-weight:900;
  font-size:clamp(40px, 5.2vw, 92px);
  line-height:.9; letter-spacing:-.045em;
  font-variation-settings:"wdth" 88;
  margin:0; max-width:14ch;
}
.hero__title .ln{ display:block; padding-block:.02em }
.hero__title em{
  font-style:normal;
  background:linear-gradient(96deg,#7fae1a 0%, #c8f24e 38%, #ff5fd6 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{
  margin-top:clamp(22px,2.6vw,34px); max-width:52ch;
  font-size:clamp(16px,1.35vw,20px); line-height:1.5; color:var(--ink-2);
}
.hero__cta{ margin-top:clamp(26px,3vw,40px); display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center }

.hero__scroll{
  position:absolute; right:var(--pad); bottom:clamp(40px,6vw,70px); z-index:3;
  display:flex; align-items:center; gap:10px;
  font-family:var(--disp); font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  writing-mode:vertical-rl;
}
.hero__scroll span{
  writing-mode:horizontal-tb; width:1px; height:44px;
  background:linear-gradient(var(--ink-3), transparent);
  animation:scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{transform:scaleY(.2); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(.2); transform-origin:bottom} }


/* =========================================================
   БЕГУЩАЯ СТРОКА
   ========================================================= */
.ticker{
  border-block:1px solid var(--line); background:var(--paper);
  padding:18px 0; overflow:hidden;
}
.ticker__row{ display:flex; width:max-content; animation:marq 34s linear infinite }
.ticker__set{ display:flex; align-items:center; gap:34px; padding-right:34px }
.ticker__set span{
  font-family:var(--disp); font-weight:700; font-size:clamp(14px,1.5vw,20px);
  letter-spacing:-.02em; text-transform:uppercase; white-space:nowrap;
}
.ticker__set b{ color:var(--lime-deep); font-size:14px }
@keyframes marq{ to{ transform:translateX(-50%) } }
.ticker:hover .ticker__row{ animation-play-state:paused }

/* =========================================================
   МАНИФЕСТ
   ========================================================= */
.statement{ padding:var(--sect) var(--pad); max-width:1500px; margin:0 auto }
.statement__text{
  font-family:var(--disp); font-weight:700;
  font-size:clamp(26px, 4.1vw, 62px); line-height:1.08; letter-spacing:-.035em;
  max-width:20ch;
}
.statement__text .mk{
  background:none; color:inherit; position:relative; padding:0 .08em; white-space:nowrap;
}
.statement__text .mk::before{
  content:""; position:absolute; inset:.08em -.02em .1em; z-index:-1; border-radius:6px;
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease);
}
.statement__text .mk{ z-index:0 }
.mk--lime::before{ background:var(--lime) }
.mk--mag::before{ background:var(--mag) }
.mk--ink::before{ background:var(--ink) }
.mk--ink{ transition:color .5s .25s }
.is-in .mk::before{ transform:scaleX(1) }
.is-in .mk--ink{ color:var(--paper) }
.mk--lime::before{ transition-delay:.05s }
.mk--ink::before{ transition-delay:.2s }
.mk--mag::before{ transition-delay:.35s }

/* =========================================================
   СЕКЦИИ
   ========================================================= */
.section{ padding:var(--sect) var(--pad); max-width:1500px; margin:0 auto }
.section--tight{ padding-block:clamp(60px,8vw,120px) }
.section--dark{
  max-width:none; background:var(--ink); color:var(--paper);
  border-radius:clamp(24px,3vw,48px); margin:0 clamp(10px,1.5vw,22px);
  padding-inline:clamp(24px,5vw,90px);
}
.section__head{ margin-bottom:clamp(40px,5vw,72px); max-width:900px }
.section__head .lead{ margin-top:20px }

/* =========================================================
   КАРТОЧКИ ПРИЛОЖЕНИЙ
   ========================================================= */
.apps{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit, minmax(340px,1fr));
}
.apps--two{ grid-template-columns:repeat(2, minmax(0,1fr)) }
@media (max-width:860px){ .apps--two{ grid-template-columns:1fr } }
.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:clamp(24px,2.4vw,34px);
  overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.card::before{
  content:""; position:absolute; inset:auto -30% -60% -30%; height:70%; z-index:-1;
  background:radial-gradient(60% 100% at 50% 100%, var(--acc) 0%, transparent 72%);
  opacity:.22; transition:opacity .55s var(--ease), transform .6s var(--ease);
  transform:translateY(24%);
}
.card:hover{ transform:translateY(-6px); border-color:rgba(14,14,13,.22);
  box-shadow:0 32px 60px -34px rgba(14,14,13,.4) }
.card:hover::before{ opacity:.42; transform:translateY(6%) }

.card__top{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; margin-bottom:20px }
.card__icon{ width:56px; height:56px; border-radius:16px; overflow:hidden; flex:none;
  box-shadow:0 8px 18px -10px rgba(14,14,13,.6) }
.card__icon svg,
.card__icon img{ width:100%; height:100%; object-fit:cover; display:block }
.card__icon--empty{
  display:grid; place-items:center; background:rgba(14,14,13,.06);
  border:1px dashed rgba(14,14,13,.25); box-shadow:none;
}
.card__icon--empty span{ font-family:var(--disp); font-weight:800; font-size:19px; color:var(--ink-3) }

.card__name{ font-family:var(--disp); font-weight:800; font-size:clamp(20px,1.7vw,25px);
  letter-spacing:-.03em; line-height:1.1 }
.card__tag{ font-size:13.5px; color:var(--ink-3); margin-top:3px }

.chip{
  align-self:start; font-family:var(--disp); font-weight:700; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase;
  padding:6px 11px; border-radius:var(--r-pill); white-space:nowrap;
}
.chip--live{ background:var(--acc); color:var(--acc-ink) }
.chip--soon{ background:transparent; color:var(--ink-3); border:1px dashed rgba(14,14,13,.3) }

.card__desc{ color:var(--ink-2); font-size:15.5px; line-height:1.55; margin-bottom:24px }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  border-top:1px solid var(--line-soft); padding-top:20px; margin-bottom:24px }
.stats dt{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px }
.stats dd{ font-family:var(--disp); font-weight:700; font-size:clamp(14px,1.15vw,17px); letter-spacing:-.02em }

.skeleton{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  border-top:1px solid var(--line-soft); padding-top:20px; margin-bottom:24px }
.skeleton i{ display:block; height:34px; border-radius:9px;
  background:linear-gradient(100deg, rgba(14,14,13,.05) 30%, rgba(14,14,13,.11) 50%, rgba(14,14,13,.05) 70%);
  background-size:220% 100%; animation:shimmer 2.2s linear infinite }
@keyframes shimmer{ to{ background-position:-220% 0 } }

.card__foot{ margin-top:auto; display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center }
.card--soon{ background:rgba(247,247,245,.5) }

/* =========================================================
   РАЗВОРОТЫ ПРИЛОЖЕНИЙ
   ========================================================= */
.spread{
  padding:var(--sect) var(--pad);
  border-radius:clamp(24px,3vw,48px);
  margin:0 clamp(10px,1.5vw,22px);
  overflow:hidden; position:relative;
}
.spread--lime{ background:linear-gradient(168deg,#dff2b4 0%, #eef7dc 46%, var(--bg) 100%) }
.spread--mag{ background:linear-gradient(168deg,#f9dcf2 0%, #f6e9f5 46%, var(--bg) 100%) }
.spread__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(36px,5vw,90px); align-items:start;
  max-width:1500px; margin:0 auto;
}
.spread__grid--rev .spread__visual{ order:-1 }
.spread__sticky{ position:sticky; top:130px }
.spread__sticky .lead{ margin-top:24px }
.spread__cta{ margin-top:34px; display:flex; flex-direction:column; align-items:flex-start; gap:14px }
.note{ font-size:13px; color:var(--ink-3) }

.ticks{ list-style:none; margin-top:30px; display:grid; gap:2px }
.ticks li{
  position:relative; padding:13px 0 13px 34px;
  border-bottom:1px solid rgba(14,14,13,.1);
  font-size:15.5px; color:var(--ink-2);
}
.ticks li::before{
  content:""; position:absolute; left:2px; top:19px; width:14px; height:8px;
  border-left:2.4px solid var(--ink); border-bottom:2.4px solid var(--ink);
  transform:rotate(-45deg); border-radius:1px;
}

/* =========================================================
   СТОПКА СКРИНОВ — КАРУСЕЛЬ
   Пропорция кадра не меняется: карточка держит 1024/1536,
   картинка вписывается через contain, поэтому кроп исключён.
   ========================================================= */
.spread__visual{
  display:flex; flex-direction:column; align-items:center; gap:clamp(18px,2.2vw,30px);
}
.stack{
  --card-w: 72%;
  position:relative; width:100%; max-width:440px;
  /* высота = высота развёрнутой карточки: 0.72 * 1.5 = 1.08 */
  aspect-ratio:1 / 1.08;
  perspective:1600px;
}
.stack__item{
  position:absolute; top:0; left:0;
  width:var(--card-w); aspect-ratio:1024 / 1536;
  border-radius:clamp(16px,1.7vw,24px); overflow:hidden;
  background:var(--ink);
  box-shadow:0 30px 55px -28px rgba(14,14,13,.6), 0 0 0 1px rgba(14,14,13,.1);
  transition:transform .75s var(--ease-out), opacity .6s var(--ease),
             filter .6s var(--ease), box-shadow .6s var(--ease);
  will-change:transform;
  backface-visibility:hidden;
}
.stack__item img{
  width:100%; height:100%; display:block;
  object-fit:contain;          /* пропорция кадра сохраняется целиком */
  object-position:center;
}

/* три позиции веера */
.stack__item[data-slot="0"]{
  transform:translate3d(0,0,0) scale(1) rotate(0deg);
  z-index:3; opacity:1; filter:none;
}
.stack__item[data-slot="1"]{
  transform:translate3d(19%,-3%,0) scale(.9) rotate(3deg);
  z-index:2; opacity:.92; filter:brightness(.86);
}
.stack__item[data-slot="2"]{
  transform:translate3d(36%,-6%,0) scale(.81) rotate(6deg);
  z-index:1; opacity:.8; filter:brightness(.72);
}
/* четвёртый кадр ждёт очереди за последней позицией */
.stack__item[data-slot="3"]{
  transform:translate3d(36%,-6%,0) scale(.74) rotate(8deg);
  z-index:0; opacity:0; pointer-events:none;
}
.stack__item[data-slot="1"],
.stack__item[data-slot="2"]{ cursor:pointer }
.stack__item[data-slot="1"]:hover{ filter:brightness(.95) }
.stack__item[data-slot="2"]:hover{ filter:brightness(.85) }

/* точки */
.stack__dots{ display:flex; gap:9px; align-items:center }
.stack__dot{
  width:8px; height:8px; padding:0; border-radius:var(--r-pill);
  background:rgba(14,14,13,.22); border:0; cursor:pointer;
  transition:width .45s var(--ease), background .35s var(--ease);
}
.stack__dot:hover{ background:rgba(14,14,13,.42) }
.stack__dot[aria-selected="true"]{ width:26px; background:var(--ink) }
.stack__dot:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }

/* --- вариант для героя: большой кадр слева, остальные уменьшаются вправо --- */
.stack--hero{
  --card-w:44%;
  max-width:none;
  /* высота = высота большого кадра: 0.44 * 1.5 = 0.66.
     Ширины хватает на веер до 2.13 карточки плюс запас на поворот. */
  aspect-ratio:1 / .66;
}
.stack--hero .stack__item{ border-radius:clamp(18px,1.6vw,26px) }

.stack--hero .stack__item[data-slot="0"]{
  transform:translate3d(0,0,0) scale(1) rotate(0deg);
  z-index:5; opacity:1; filter:none;
}
.stack--hero .stack__item[data-slot="1"]{
  transform:translate3d(52%,-2%,0) scale(.9) rotate(2deg);
  z-index:4; opacity:1; filter:brightness(.94);
}
.stack--hero .stack__item[data-slot="2"]{
  transform:translate3d(92%,-4%,0) scale(.81) rotate(4deg);
  z-index:3; opacity:.96; filter:brightness(.86);
}
.stack--hero .stack__item[data-slot="3"]{
  transform:translate3d(126%,-6%,0) scale(.73) rotate(6deg);
  z-index:2; opacity:.88; filter:brightness(.78);
}
/* запасные кадры ждут своей очереди за последней позицией */
.stack--hero .stack__item[data-slot="4"],
.stack--hero .stack__item[data-slot="5"]{
  transform:translate3d(126%,-6%,0) scale(.66) rotate(7deg);
  z-index:1; opacity:0; pointer-events:none;
}

/* =========================================================
   ШАГИ / ЦИФРЫ (тёмная секция)
   ========================================================= */
.steps{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.step{
  border:1px solid rgba(247,247,245,.16); border-radius:var(--r-l);
  padding:clamp(22px,2.2vw,32px); background:rgba(247,247,245,.035);
  transition:background .4s var(--ease), transform .5s var(--ease), border-color .4s;
}
.step:hover{ background:rgba(247,247,245,.085); transform:translateY(-5px); border-color:rgba(200,242,78,.5) }
.step__n{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.14em; color:var(--lime) }
.step h3{ font-family:var(--disp); font-weight:800; font-size:clamp(19px,1.6vw,24px);
  letter-spacing:-.028em; margin:14px 0 10px; color:var(--paper) }
.step p{ font-size:14.5px; line-height:1.55; color:rgba(247,247,245,.62) }

.bignums{
  display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin-top:clamp(40px,5vw,72px); padding-top:clamp(34px,4vw,52px);
  border-top:1px solid rgba(247,247,245,.16);
}
.bignum b{
  display:block; font-family:var(--disp); font-weight:900;
  font-size:clamp(38px,4.6vw,68px); line-height:1; letter-spacing:-.05em;
  color:var(--paper); font-variation-settings:"wdth" 88;
}
.bignum b i{ font-style:normal; color:var(--lime); font-size:.5em; vertical-align:.35em; margin-left:.08em }
.bignum span{ display:block; margin-top:12px; font-size:13.5px; color:rgba(247,247,245,.55) }

/* =========================================================
   ОТЗЫВЫ
   ========================================================= */
.quotes{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.quote{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(22px,2.2vw,30px); display:flex; flex-direction:column; justify-content:space-between; gap:22px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.quote:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -32px rgba(14,14,13,.4) }
.quote blockquote{
  font-family:var(--disp); font-weight:600; font-size:clamp(16px,1.4vw,20px);
  line-height:1.3; letter-spacing:-.025em;
}
.quote blockquote::before{ content:"«" } .quote blockquote::after{ content:"»" }
.quote figcaption{ font-size:12.5px; color:var(--ink-3); letter-spacing:.01em }
.quote--crit{ background:transparent; border-style:dashed }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(30px,5vw,80px); align-items:start }
.faq__head{ position:sticky; top:130px }
.ac{ border-bottom:1px solid var(--line) }
.ac summary{
  list-style:none; cursor:pointer; padding:24px 46px 24px 0; position:relative;
  font-family:var(--disp); font-weight:700; font-size:clamp(17px,1.55vw,23px);
  letter-spacing:-.028em; line-height:1.25;
  transition:color .3s;
}
.ac summary::-webkit-details-marker{ display:none }
.ac summary:hover{ color:var(--ink-3) }
.ac__x{ position:absolute; right:4px; top:50%; width:16px; height:16px; margin-top:-8px }
.ac__x::before,.ac__x::after{
  content:""; position:absolute; left:0; top:7px; width:16px; height:2px;
  background:var(--ink); border-radius:2px; transition:transform .4s var(--ease);
}
.ac__x::after{ transform:rotate(90deg) }
.ac[open] .ac__x::after{ transform:rotate(0) }
.ac__body{ padding:0 8% 26px 0; overflow:hidden }
.ac__body p{ color:var(--ink-2); font-size:15.5px; line-height:1.6 }
.ac__body a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px }
.ac__body a:hover{ color:var(--lime-deep) }
.ac[open] .ac__body{ animation:acOpen .45s var(--ease-out) }
@keyframes acOpen{ from{ opacity:0; transform:translateY(-8px) } }

/* =========================================================
   ФИНАЛЬНЫЙ CTA
   ========================================================= */
.cta{
  position:relative; background:var(--ink); color:var(--paper);
  border-radius:clamp(24px,3vw,48px); margin:clamp(10px,1.5vw,22px);
  padding:clamp(70px,10vw,150px) var(--pad) 0; overflow:hidden;
}
.cta::before{
  content:""; position:absolute; top:-40%; left:50%; transform:translateX(-50%);
  width:120%; aspect-ratio:2/1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(200,242,78,.3), transparent 68%);
}
.cta__inner{ position:relative; max-width:1200px; margin:0 auto; text-align:center }
.cta__title{
  font-family:var(--disp); font-weight:900;
  font-size:clamp(34px,6.4vw,104px); line-height:.94; letter-spacing:-.05em;
  font-variation-settings:"wdth" 88;
}
.cta__row{ margin-top:clamp(30px,4vw,50px); display:flex; flex-wrap:wrap; gap:14px; justify-content:center }
.cta__marq{
  margin-top:clamp(50px,7vw,90px); display:flex; width:max-content;
  animation:marq 28s linear infinite; opacity:.13;
}
.cta__set{
  font-family:var(--disp); font-weight:900; font-size:clamp(52px,11vw,180px);
  letter-spacing:-.05em; line-height:.9; white-space:nowrap; color:var(--paper);
}

/* =========================================================
   ПОДВАЛ
   ========================================================= */
.footer{ padding:clamp(50px,7vw,100px) var(--pad) 30px; max-width:1500px; margin:0 auto }
.footer__grid{
  display:grid; gap:clamp(28px,4vw,60px);
  grid-template-columns:minmax(0,1.4fr) repeat(3, minmax(0,1fr));
  padding-bottom:clamp(36px,5vw,64px); border-bottom:1px solid var(--line);
}
.footer__mark{ width:126px; height:31.7px }
.footer__brand p{ margin-top:18px; color:var(--ink-3); font-size:14.5px; line-height:1.5 }
.footer__col h4{ font-family:var(--disp); font-weight:700; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px }
.footer__col a{ display:block; padding:6px 0; font-size:15px; color:var(--ink-2);
  transition:color .3s, transform .3s var(--ease) }
.footer__col a:hover{ color:var(--ink); transform:translateX(3px) }
.footer__bar{
  display:flex; flex-wrap:wrap; gap:12px 30px; justify-content:space-between;
  padding-top:26px; font-size:12.5px; color:var(--ink-3);
}

/* =========================================================
   АНИМАЦИИ ПОЯВЛЕНИЯ
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out) }
.reveal.is-in{ opacity:1; transform:none }
/* :not(.is-in) обязателен — иначе это правило идёт после .reveal.is-in
   с той же специфичностью и сдвиг на 40px не снимается никогда */
.hero__title.reveal:not(.is-in){ transform:translateY(40px) }

.word{ display:inline-block; opacity:0; transform:translateY(.45em) rotate(2deg);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out) }
.word.is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important }
  .reveal,.word{ opacity:1; transform:none }
}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width:1180px){
  .nav__pill{ display:none }
  .faq{ grid-template-columns:1fr }
  .faq__head{ position:static }
}
@media (max-width:1000px){
  /* герой в одну колонку: сначала текст, галерея — внизу блока */
  .hero__grid{ grid-template-columns:1fr; gap:clamp(32px,6vw,54px) }
  .hero__gallery{ width:100%; max-width:520px; margin-inline:auto }

  .spread__grid{ grid-template-columns:1fr }
  /* в блоках приложений галерея наоборот уходит наверх */
  .spread__grid .spread__visual{ order:-1 }
  .spread__sticky{ position:static }
  .footer__grid{ grid-template-columns:1fr 1fr }
  .footer__brand{ grid-column:1 / -1 }
}
@media (max-width:760px){
  html{ scroll-padding-top:90px }
  .nav__ghost{ display:none }
  .nav__cta span{ display:none }
  .nav__cta{ width:52px; padding:0 }
  .nav__burger{ display:flex }
  .hero{ padding-top:130px; min-height:92svh }
  .hero__scroll{ display:none }
  .stack--hero{ --card-w:52%; aspect-ratio:1 / .78 }
  .stats,.skeleton{ grid-template-columns:repeat(2,1fr); gap:14px }
  .stack{ max-width:330px; --card-w:70%; aspect-ratio:1 / 1.05 }
  .quotes{ grid-template-columns:1fr }
}
@media (max-width:460px){
  .card__top{ grid-template-columns:auto 1fr; row-gap:12px }
  .chip{ grid-column:1 / -1 ; justify-self:start }
  .footer__grid{ grid-template-columns:1fr }
}