/* =========================
   MOBILE STAGE + TOKENS
   ========================= */
:root{ --ios-bottom-ui: 0px; }
@supports (-webkit-touch-callout: none){  /* iOS Safari */
  :root{ --ios-bottom-ui: 56px; }
}

:root{
  --ref-w: 390; /* width in CSS px (iPhone 13 Pro) */
  --ref-h: 844; /* height in CSS px */

  /* ширина-только; апскейл разрешён — сцена ровно до краёв */
  --scale-css: calc(100svw / var(--ref-w));
  --scale-js: var(--scale-css);
}
/* fallback, если нет svw */
@supports not (width: 1svw){
  :root{
    --scale-css: calc(100dvw / var(--ref-w));
    --scale-js: var(--scale-css);
  }
}
/* fallback, если нет dvw */
@supports not (width: 1dvw){
  :root{
    --scale-css: calc(100vw / var(--ref-w));
    --scale-js: var(--scale-css);
  }
}

/* Запрещаем скролл у всей страницы — прокрутка внутри сцены */
html, body{ height:100%; overflow:hidden; }

/* ОБЁРТКА СЦЕНЫ: растягиваем и якорим, без grid-центрирования */
.stageWrap{
  position: fixed;
  inset: 0;  /* растянуть на весь экран */
  /* безопасные отступы оставляем как padding, чтобы сцена не заезжала под вырезы */
  padding: env(safe-area-inset-top,0) env(safe-area-inset-right,0)
           env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
  overflow: hidden;
}

/* САМА СЦЕНА: якорим в левый верх и масштабируем из (0,0) */
.stage{
  position: absolute;
  left: 0; top: 0;
  width: calc(var(--ref-w) * 1px);
  height: calc(var(--ref-h) * 1px);
  transform-origin: 0 0;
  transform: translate3d(0,0,0) scale(var(--scale-js));
  overflow: hidden;
  margin: 0;
  inset: auto;
}

/* Внутренний скролл только по вертикали */
.stageScroll{
  position:absolute; inset:0;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* -------- Tokens / Resets -------- */
:root{
  --bg:#0a0f16;
  --bg2:#0b1220;
  --text:#e9eefc;
  --muted:#9aa4b2;
  --ring:rgba(255,255,255,.10);
  --accent:#8ea2ff;
  --good:#37d080;
  --bad:#ff6b6b;
  --surface: rgba(255,255,255,.03);
  --surface-2: rgba(255,255,255,.06);
  --grad:linear-gradient(90deg,#aab7ff,#ff4ecd,#ffb800,#aab7ff);
  --frame-w: 2px;

  /* Параметры «общей пилюли» */
  --nav-pill-radius: 16px;
  --nav-pill-pad-v: 8px;
  --nav-actions-visual-width: 160px; /* как на 13 Pro */
  --edge-pad: 20px;

  /* Waitlist sticky CTA */
  --wl-sticky-h: 56px;
  --wl-sticky-gap: 10px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; height:100%;
  color:var(--text);
  font:16px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:
    radial-gradient(900px 600px at 70% 12%, #131b2e 0%, #0a0f16 55%),
    linear-gradient(180deg, #0b1220, #0a0f16);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.wrap{max-width:720px;margin:0 авто;padding:14px 16px}
.only-mobile{display:block}
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  white-space:nowrap;clip:rect(0 0 0 0);overflow:hidden
}
.dd-ico{width:18px;height:18px;flex:0 0 18px;opacity:.95}

/* Скрыть ВСЕ возможные «якорные» блоки */
#topMenu, .topMenu, .anchors, .anchor-nav, .toc, .toc-wrap{ display:none !important; }

/* =========================
   NAV (mobile)
   ========================= */
.nav{
  position:sticky; top:0; z-index:100;
  display:block; padding:10px 16px 8px;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.nav::before,.nav::after{content:none !important}

/* Контент плашки; сама плашка рисуется псевдо-элементом */
.nav .brand{
  display:flex; align-items:center; gap:10px; font-weight:800; position:relative;
  padding: var(--nav-pill-pad-v) 12px;
  padding-right: calc(var(--nav-actions-visual-width) + var(--edge-pad));
  min-width:0;
}
.nav .brand::after{
  content:"";
  position:absolute;
  top: calc(var(--nav-pill-pad-v) * -1 - 2px);
  left:50%;
  transform:translateX(-50%);
  height: calc(100% + var(--nav-pill-pad-v)*2 + 4px);
  width: calc(var(--ref-w) * 1px - 32px); /* 390 - 16 - 16 */
  border-radius: var(--nav-pill-radius);
  background: rgba(12,16,26,.88);
  border:1px solid var(--ring);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  pointer-events:none;
  z-index:0;
}

.nav .brand > *{ position:relative; z-index:1; }

.brand .avatarWrap{
  position:relative;width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.35);
  background: radial-gradient(80% 80% at 30% 20%, #1a2440 0%, #0d1528 100%);
  border:1.5px solid rgba(255,255,255,.22);
}
.brand .avatar{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.brand .avatarFallback{display:none}

/* Правая группа — в той же плашке */
.navActions{
  position:absolute;
  right: max(var(--edge-pad), calc(env(safe-area-inset-right, 0px) + 12px));
  top:10px;
  display:flex; gap:6px; align-items:center;
  z-index:1;
  width: var(--nav-actions-visual-width);
  justify-content:flex-end;
  white-space:nowrap; flex-wrap:nowrap;
}

.dropbtn{
  min-height:40px; padding:8px 12px;
  border-radius:12px; border:1px solid var(--ring);
  background:rgba(255,255,255,.06); color:#e9eefc; font-weight:800;
}

/* превращаем текст в иконки ТОЛЬКО на мобиле — ИДЕАЛЬНОЕ ЦЕНТРИРОВАНИЕ */
#langDd .dropbtn, #socialDd .dropbtn{
  width:40px; height:40px; padding:0; font-size:0; line-height:0;
  display:grid; place-items:center;
  position:relative;
}
#langDd .dropbtn::after,
#socialDd .dropbtn::after{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:block;
  width:1em; height:1em;
  line-height:1; text-align:center;
  pointer-events:none;
  font-size:18px;
}
#langDd .dropbtn::after{content:"🌐";}
#socialDd .dropbtn::after{content:"💬";}

/* Узкие телефоны — компактнее, но структура та же */
@media (max-width:380px){
  :root{ --nav-actions-visual-width: 140px; }
  #langDd .dropbtn, #socialDd .dropbtn{ width:36px; height:36px; }
  #langDd .dropbtn::after, #socialDd .dropbtn::after{ font-size:18px; }
  .navActions{ gap:4px; }
}
@media (max-width:340px){
  :root{ --nav-actions-visual-width: 132px; }
  #langDd .dropbtn, #socialDd .dropbtn{ width:34px; height:34px; }
  #langDd .dropbtn::after, #socialDd .dropbtn::after{ font-size:18px; }
}

/* =========================
   DROPDOWNS
   ========================= */
.dropdown{ position:relative }

.dropdown-menu{
  position:absolute;
  left:auto;
  right: max(-4px, calc(env(safe-area-inset-right, 0px) - 4px));
  top: calc(100% + 10px);
  z-index:1003;
  display:none; padding:6px;

  min-width:220px;
  max-width:min(420px, 86%);
  width:max-content;

  border:1px solid var(--ring); border-radius:14px;
  background:rgba(11,19,32,.98);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  overflow:auto;
  max-height: calc(var(--ref-h) * 1px * 0.60);
}
#langDd[aria-expanded="true"] > .dropdown-menu,
#socialDd[aria-expanded="true"] > .dropdown-menu{display:block}
details.dropdown > summary::-webkit-details-marker{display:none}
details.dropdown > summary::marker{content:""}
details.dropdown[open] > .dropdown-menu{display:block}

.dropdown-menu a,
.dropdown-menu button,
.dropdown-menu li{
  display:flex; align-items:center; gap:10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:10px 10px; border-radius:10px; color:#e9eefc; font:600 14px/1.2 Inter,system-ui;
  background:transparent; border:0;
}
.dropdown-menu a:active,
.dropdown-menu button:active{background:rgba(255,255,255,.08)}
.dropdown-menu img, .dropdown-menu .dd-ico{
  width:18px; height:18px; flex:0 0 18px; object-fit:cover; border-radius:4px; opacity:.95;
}

/* -------- CTA Docs -------- */
.cta{
  min-width:40px; height:40px; padding:0 12px; border-radius:12px; border:1px solid var(--ring);
  background:rgba(255,255,255,.06); color:#fff; font-weight:800; display:grid; place-items:center;
}
.cta .gtext{
  display:inline-block;
  background:var(--grad);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:shimmer 6s linear infinite;
  will-change:background-position;
}
@keyframes shimmer{to{background-position:300% 0;}}

/* -------- HIDE topMenu ON MOBILE (дублируем на всякий) -------- */
#topMenu{ display:none !important; }

/* =========================
   HERO
   ========================= */
.hero{
  display:grid; gap:10px; align-items:center;
  min-height: calc(var(--ref-h) * 1px * 0.32);
  text-align:center; padding-top:6px;
}
.kicker{color:var(--muted);font-size:12px}
.kicker.thin{font-weight:300;font-size:clamp(18px, calc((var(--ref-w) * 1px) * 0.052), 24px);letter-spacing:.01em;color:#e9eefc;opacity:.98}
h1{margin:.2em 0 .15em;font-size:clamp(26px, calc((var(--ref-w) * 1px) * 0.07), 34px);line-height:1.08}
.lead{color:#cbd3e4;max-width:68ch;margin:0 авто}
.actions{margin-top:10px; display:grid; gap:8px; grid-template-columns:1fr}
.btn{
  padding:12px 16px; border-radius:12px; border:1px solid var(--ring);
  background:rgba(255,255,255,.06); color:#fff; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
}

/* =========================
   SECTIONS
   ========================= */
section{padding:26px 0 34px; scroll-margin-top:76px}
h2{margin:0 0 .6em; font-size:clamp(20px, calc((var(--ref-w) * 1px) * 0.055), 26px)}
.muted{color:#9aa4b2;font-size:14px}
.tiny{font-size:12px;opacity:.9}

/* =========================
   FEATURES (FLIP CARDS) — фикс исчезновения
   ========================= */
#features .grid{
  display:flex; gap:10px; overflow-x:auto; padding:2px 0 10px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
#features .grid::-webkit-scrollbar{display:none}

#features .flip{
  position:relative;
  flex:0 0 82%; max-width:82%;
  scroll-snap-align:center;
  perspective:1000px;
  border-radius:16px;
}

/* внутренняя «книжка» */
#features .flip-inner{
  position:relative; width:100%; height:210px; border-radius:16px;
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
  overflow:hidden;
}

/* hover на тач не нужен */
#features .flip:hover .flip-inner{ transform:none }

/* переворот — поддерживаем оба класса, как в твоём JS */
#features .flip.is-flipped .flip-inner,
#features .flip.touched .flip-inner{ transform:rotateY(180deg) }

/* стороны */
#features .face{
  position:absolute; inset:0; padding:14px;
  border-radius:16px; border:1px solid var(--ring);
  background:rgba(255,255,255,.04);
  overflow:hidden;
  /* не прячем бэкфейс аппаратно — видимость рулит opacity */
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  transform: translateZ(0);
}
#features .back{ transform: rotateY(180deg) translateZ(0.1px); }

/* заголовки */
#features .face h3{margin:.15em 0 .4em;font-size:17px;color:#e9eefc;opacity:1}

/* KV visual */
#features .kv-canvas{
  position:relative; display:block; aspect-ratio:16/9; min-height:120px; margin-top:0;
  border-radius:12px; background:none !important; border:none !important; box-shadow:none !important;
  overflow:hidden;
  clip-path: inset(0 round 12px);
  -webkit-mask-image: linear-gradient(#fff,#fff);
          mask-image: linear-gradient(#fff,#fff);
  contain: paint; isolation:isolate;
  transform: translateZ(0);
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}
#features .kv-canvas::before,
#features .kv-canvas::after{ content:none !important; }

#features .kv-canvas > .kv-img,
#features .face .kv-canvas > .kv-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover !important; padding:0 !important; transform:none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

/* контент всегда над картинкой */
#features .face > *{ position:relative; z-index:2 }
#features .face .kv-canvas{ position:relative; z-index:1 }

/* ЖЁСТКИЙ СВОП ВИДИМОСТИ + клики только на активной стороне */
#features .face:not(.back){ opacity: 1; pointer-events:auto; }
#features .back{ opacity: 0; pointer-events:none; }
#features .flip.is-flipped .face:not(.back),
#features .flip.touched    .face:not(.back){ opacity: 0 !important; pointer-events:none !important; }
#features .flip.is-flipped .back,
#features .flip.touched    .back{ opacity: 1 !important; pointer-events:auto !important; }

/* мелкие элементы в карточках */
.pill{
  display:inline-block; padding:2px 8px; margin-right:6px; margin-bottom:4px;
  border:1px solid var(--ring); border-radius:999px; background:rgba(255,255,255,.05);
  font-size:12px; color:#cbd3e4; white-space:nowrap
}
.hint{margin-top:8px;color:#cbd3e4}

/* =========================
   FLOW-FACTORY (КОМПАКТ)
   ========================= */
.ff-top{display:flex; align-items:center; gap:8px; justify-content:space-between; margin:.2rem 0 10px}

.attn{
  position:relative; width:26px; height:26px; border-radius:999px;
  border:1px solid var(--ring); background:rgba(255,255,255,.06);
  display:inline-grid; place-items:center; vertical-align:middle;
  cursor:pointer; user-select:none;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.attn .attn__txt{
  font-weight:900; font-size:14px; line-height:1; color:#ffd54a;
  text-shadow:0 0 10px rgba(255,215,64,.55);
  animation:attnBlink 1.2s ease-in-out infinite;
  display:inline-block;
}
.attn::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(255,230,0,.38);
  animation:attnPulse 1.8s ease-out infinite;
}
.attn:active{ transform:scale(.96) }
.attn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(142,162,255,.22);
}
.attn[aria-expanded="true"]{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset }
.attn[aria-expanded="true"] .attn__txt{ color:#e9eefc; text-shadow:none; animation:none; }
.attn[aria-expanded="true"]::after{ animation:none }
@keyframes attnBlink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes attnPulse{
  0%{box-shadow:0 0 0 0 rgba(255,230,0,.38)}
  70%{box-shadow:0 0 0 12px rgba(255,230,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,230,0,0)}
}

/* ——— Показ инфокарточки от .attn (CSS-only) ——— */
.infocard{
  margin:8px 0 12px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--ring);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  box-shadow:0 10px 32px rgba(0,0,0,.28)
}
.infocard.compact .tiny{font-size:12px}
.infocard[hidden]{display:none}
@keyframes cardIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
@supports selector(.ff-top:has(.attn[aria-expanded="true"])) {
  .ff-top:has(.attn[aria-expanded="true"]) + .infocard[hidden]{
    display:block !important;
    animation:cardIn .18s ease-out;
  }
}
.attn[aria-expanded="true"] ~ .infocard[hidden]{
  display:block !important;
  animation:cardIn .18s ease-out;
}

/* =========================
   FACTORY LITE (DOM)
   ========================= */
.factory{
  position:relative;
  border:var(--frame-w) solid var(--ring);
  border-radius:16px;
  background:var(--surface);
  padding:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.2)
}
.demo__controls{display:flex; gap:8px; flex-wrap:wrap}
.pillBtn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px; min-height:34px;
  border-radius:999px; border:1px solid var(--ring); background:rgba(255,255,255,.04);
  font-size:13px; color:#cbd3e4; font-weight:700
}
.pillBtn.is-active{border-color:var(--accent); box-shadow:0 0 0 1px rgba(142,162,255,.25) inset}

/* Высота/холст */
#factoryCanvas{
  width:100%;
  height:clamp(88px, calc((var(--ref-w) * 1px) * 0.28), 116px);
  display:block; border-radius:12px;
  background:#0b1320;
  border:var(--frame-w) solid var(--ring);
}
@media (max-width:1024px){
  #factoryCanvas{ height:clamp(84px, calc((var(--ref-w) * 1px) * 0.24), 112px) !important; }
}

/* Бэйдж статуса и легенда */
.factory__status{
  position:absolute; right:12px; bottom:12px; padding:6px 8px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--ring); font-weight:800; font-size:12px
}
.factory__legend{display:flex; gap:10px; align-items:center; margin-top:6px; color:#cbd3e4; flex-wrap:wrap}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;border:1px solid var(--ring)}
.dot--pine{background:#34d399}.dot--ml{background:#8ea2ff}.dot--rl{background:#f59e0b}
.kv-badge{display:inline-block;padding:2px 6px;border-radius:6px;border:1px solid var(--ring);font-size:11px;color:#cbd3e4}

/* Конвейер */
.mfactory{--s:1; position:relative; border-radius:16px; padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.10));
  outline:1px solid rgba(255,255,255,.06); overflow:hidden; user-select:none}
.mfactory *{box-sizing:border-box}
.mf-row{position:relative; height: clamp(200px, calc((var(--ref-w) * 1px) * 0.56), 300px)}
.mf-belt{position:absolute; left:4%; right:4%; height: calc(32px*var(--s));
  bottom: calc(16px*var(--s)); border-radius:10px; background:rgba(255,255,255,.06);
  outline:1px solid rgba(255,255,255,.10)}

/* Стойки */
.mf-st{
  position:absolute; width:calc(54px*var(--s)); height:calc(124px*var(--s));
  bottom: calc(32px*var(--s)); border-radius:12px; background:rgba(255,255,255,.06);
  outline:1px solid rgba(255,255,255,.10);
}
.mf-st--pine{left:18%} .mf-st--ml{left:40%} .mf-st--rl{left:65%}

/* === Кружки-статусы — ЕЩЁ ВЫШЕ, чтобы ничего не налезало === */
:root{
  --mf-dot-d: 14px;     /* диаметр кружка */
  --mf-dot-gap: 26px;   /* доп. отступ над подписью — увеличен */
}
.mf-dot{
  position:absolute;
  left:50%; transform:translateX(-50%);
  top: calc(-1.2em - var(--mf-dot-d) - var(--mf-dot-gap)); /* над подписью и «полосами» */
  width:calc(var(--mf-dot-d)*var(--s)); height:calc(var(--mf-dot-d)*var(--s));
  border-radius:50%;
  border:1px solid var(--ring);
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  z-index:3;
  pointer-events:none;
}
/* Цвета под стойки */
.mf-st--pine .mf-dot{ background:#34d399 }  /* зелёный */
.mf-st--ml   .mf-dot{ background:#8ea2ff }  /* синий */
.mf-st--rl   .mf-dot{ background:#f59e0b }  /* янтарный */

/* Подписи к стойкам */
.mf-label{
  position:absolute; top:-1.2em; left:50%; transform:translateX(-50%);
  color:#9aa4b2; font:600 calc(12px*var(--s))/1 Inter, system-ui; white-space:nowrap
}

/* Выход */
.mf-out{
  position:absolute; right:4%; bottom: calc(62px*var(--s));
  padding:6px 10px; border-radius:10px; color:#cbd3e4; font:700 calc(12px*var(--s)) Inter,system-ui;
  background:rgba(255,255,255,.06); outline:1px solid rgba(255,255,255,.10)
}
.mf-out.is-pulse{animation:mfPulse .7s ease-out}
@keyframes mfPulse{0%{box-shadow:0 0 0 0 rgba(55,208,128,.55)}100%{box-shadow:0 0 0 18px rgba(55,208,128,0)}}

/* Гейдж */
.mf-gauge{position:absolute; left:6%; top:8px; width:calc(120px*var(--s)); opacity:.85}
.mf-gauge .bar{height:8px; border-radius:6px; background:rgba(255,255,255,.06);
  outline:1px solid rgba(255,255,255,.10); overflow:hidden}
.mf-gauge .fill{height:100%; width:0%; background:#8ea2ff; transition:width .25s}
.mf-gauge .ttl{color:#9aa4b2; font:600 12px/1 Inter, system-ui; margin-bottom:6px}

/* Токены */
.tok{position:absolute; width:calc(46px*var(--s)); height:calc(18px*var(--s)); border-radius:999px;
  box-shadow:0 calc(4px*var(--s)) calc(10px*var(--s)) rgba(0,0,0,.35)}
.tok.blue{background:#8ea2ff} .tok.green{background:#37d080}

/* Метки */
.stamp{
  position:absolute; left:50%; top:-2px; transform:translate(-50%,-130%);
  padding:2px 6px; border-radius:999px; font:700 calc(10px*var(--s))/1 Inter, system-ui;
  background:rgba(255,255,255,.08); border:1px solid currentColor; color:#8ea2ff; display:none
}
.stamp.good{color:#22c55e}

.pstamp{
  position:absolute; left:50%; top:0; transform:translate(-50%,-165%);
  padding:1px 5px; border-radius:8px; font:700 calc(9px*var(--s))/1 Inter, system-ui;
  background:rgba(255,255,255,.08); border:1px solid #8ea2ff; color:#8ea2ff; display:none
}

@media (prefers-reduced-motion: reduce){
  .tok,.mf-gauge .fill{transition:none; animation:none}
}

/* =========================
   ROADMAP + ABOUT
   ========================= */
.road{margin-top:10px; padding:6px 0}
.rmini{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.stepMini{
  position:relative; padding:12px; border-radius:14px;
  background:rgba(255,255,255,.03);
  display:flex; align-items:center; justify-content:center; text-align:center; min-height:56px;
  border:1px solid rgba(255,255,255,.08);
}
.stepMini h4{margin:0;font-size:14px;font-weight:700;color:#d6ddf0}
.stepMini.smoke{background:rgba(255,255,255,.02);color:#9aa4b2}
.stepMini.pine{color:#0b0f16; background:linear-gradient(135deg,#00d1ff,#7a5cff,#ff4ecd,#ffb800); border:none}
.stepMini.ml{background:linear-gradient(180deg,rgba(142,162,255,.14),rgba(142,162,255,.06)); border:1px solid rgba(142,162,255,.36)}

.about{display:grid; grid-template-columns:1fr; gap:12px}
.card{border:1px solid var(--ring); border-radius:16px; background:rgba(255,255,255,.03); padding:14px}
.silver{
  background: linear-gradient(90deg,#cfd5e3,#f5f7fa 25%,#b7becf 50%,#eef1f5 75%,#c2c9d8);
  background-size: 200% 100%;
  -webkit-background-clip:text; background-clip:text; color: transparent;
  animation: silverShift 12s linear infinite; letter-spacing:.2px;
}
.silver-soft{
  background: linear-gradient(90deg,#d8dee9,#f6f8fb 22%,#c4cbda 50%,#eef1f6 78%,#d1d7e4);
  background-size:180% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: silverShift 14s linear infinite; opacity:.94;
}
@keyframes silverShift{ to{ background-position: 200% 0; } }

/* -------- Life mosaic -------- */
#lifeMosaic{ position:relative; height:260px; overflow:visible }
#lifeMosaic .tile{
  position:absolute; width:66%; height:100%;
  border-radius:14px; border:1px solid var(--ring); background:rgba(255,255,255,.04);
  box-shadow:0 10px 28px rgba(0,0,0,.25);
  transition:transform .28s ease, box-shadow .28s ease, z-index .1s; will-change:transform;
}
#lifeMosaic .tile.a{ left:-6%; z-index:10; transform:rotate(-7deg) translateY(0) }
#lifeMosaic .tile.b{ left:8%;  z-index:20; transform:rotate(-1.5deg) translateY(-2px) }
#lifeMosaic .tile.c{ left:22%; z-index:15; transform:rotate(6deg) translateY(0) }
#lifeMosaic .tile:focus,
#lifeMosaic .tile.is-top{
  z-index:40; transform:rotate(0deg) translateY(-6px) scale(1.02);
  box-shadow:0 18px 44px rgba(0,0,0,.38);
}
#lifeMosaic .tile img{width:100%;height:100%;object-fit:cover;display:block}
#lifeMosaic .tile .chip{
  position:absolute; left:10px; bottom:10px; padding:4px 8px; font-size:12px; color:#e9eefc;
  border-radius:999px; background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.18);
}

/* =========================
   FORMS
   ========================= */
.wl{display:grid; grid-template-columns:1fr; gap:12px}
.form{background:rgba(255,255,255,.03); border:1px solid var(--ring); border-radius:16px; padding:14px}
.frow{display:grid; grid-template-columns:1fr; gap:10px}
label{display:block; font-size:13px; color:#cbd3e4; margin-bottom:6px}
input[type="text"], input[type="email"]{
  width:100%; padding:12px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12); background:#0a0f16; color:var(--text);
  min-height:44px;
}
.checkrow{display:flex; gap:10px; align-items:flex-start; margin-top:2px}
.checkrow input[type="checkbox"]{width:18px; height:18px; margin-top:2px}
.checkrow label{margin:0}
button[type="submit"]{
  width:100%; min-height:46px; padding:12px 14px; margin-top:6px;
  border-radius:12px; border:1px solid var(--ring);
  background:rgba(255,255,255,.08); color:#fff; font-weight:800
}
.ok{display:none; margin-top:10px; color:#b2f5b4}

/* === WL (waitlist) — улучшенная кликабельность кнопки === */
@media (max-width: 860px){
  .wl{
    position:relative;
    padding-bottom: calc(
      var(--wl-sticky-h) + var(--wl-sticky-gap) +
      env(safe-area-inset-bottom,0px) + var(--ios-bottom-ui)
    );
  }
  .wl button[type="submit"]{
    position: sticky;
    bottom: calc(
      env(safe-area-inset-bottom,0px) + var(--wl-sticky-gap) + var(--ios-bottom-ui)
    );
    z-index: 40;
    min-height: var(--wl-sticky-h);
    font-size: 15px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
    border-color: rgba(255,255,255,.16);
    box-shadow:
      0 10px 32px rgba(0,0,0,.35),
      0 0 0 1px rgba(255,255,255,.06) inset;
  }
  .wl button[type="submit"]:active{ transform: translateY(1px); }
}

/* =========================
   LIGHTBOX
   ========================= */
.lb{ position:fixed; inset:0; display:none; place-items:center; background:rgba(3,7,18,.92); z-index:1000 }
.lb[aria-hidden="false"]{display:grid}
.lb__img{ max-width:92%; max-height:88%; border-radius:12px; border:1px solid rgba(255,255,255,.18); box-shadow:0 24px 80px rgba(0,0,0,.55) }
.lb__close, .lb__nav{
  position:absolute; display:grid; place-items:center; width:40px; height:40px;
  border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08); color:#fff; font-weight:900
}
.lb__close{top:16px; right:16px}
.lb__nav{top:50%; transform:translateY(-50%)}
.lb__nav.prev{left:12px}
.lb__nav.next{right:12px}

/* Лайтбокс внутри трансформированной сцены — absolute */
.stage .lb{ position:absolute !important; inset:0; }

/* =========================
   Touch comfort
   ========================= */
button, .btn, .dropbtn, .cta, #topMenu a, .attn{touch-action:manipulation}

/* ==== Пример иконки корзины (если нужна) ==== */
.trashIcon{
  position:absolute !important;
  font:500 18px/1 Inter,system-ui;
  opacity:.95;
  left: calc(65% + 10px);
  bottom: 6px;
  top: auto; right: auto;
  transform: translateX(0);
  z-index: 2;
}
.trashIcon::before{ content:"🗑️"; }

/* =========================
   Flip/KV hard fixes (base)
   ========================= */
#features .kv-canvas{
  position:relative;
  overflow:hidden !important;
  border-radius:12px !important;
  clip-path: inset(0 round 12px);
  -webkit-mask-image: linear-gradient(#fff,#fff);
          mask-image: linear-gradient(#fff,#fff);
  contain: paint;
  isolation: isolate;
  transform: translateZ(0); /* базовый слой */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#features .kv-canvas > .kv-img{
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
  transform: none !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
#features .flip{ perspective:1000px; }
#features .flip-inner{ transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
#features .face{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  overflow: hidden;
}
#features .back{ transform: rotateY(180deg) translateZ(0); }

/* FRONT image shrink — FINAL OVERRIDE */
:root{ --kv-front-scale: .99; }
@media (max-width: 860px){
  #features .face:not(.back) .kv-canvas > .kv-img{
    position: absolute !important;
    inset: auto !important;
    left: 50% !important;
    top: 50% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: translate(-50%, -50%) scale(var(--kv-front-scale)) !important;
    transform-origin: 50% 50% !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
  }
}

/* =========================
   iOS FIX PACK (опционально)
   ========================= */
@supports (-webkit-touch-callout:none){
  /* Если на старых iOS мерцает текст на обороте, можно ослабить лишние слои: */
  /* #features .kv-canvas{ transform: none !important; will-change: auto !important; }
     #features .kv-canvas > .kv-img{ transform: none !important; will-change: auto !important; } */

  #features .back{
    background: rgba(12,19,32,.96) !important;
  }
  #features .face,
  #features .face *{
    -webkit-backface-visibility: hidden !important;
            backface-visibility: hidden !important;
  }
}

/* === FINAL: гарантируем отрисовку сторон (переопределяем скрытие бэкфейса) === */
#features .face,
#features .face *,
#features .kv-canvas,
#features .kv-canvas > .kv-img{
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
}

/* На всякий — прячем горизонтальную полосу прокрутки у сцены */
.stageScroll::-webkit-scrollbar:horizontal{ display:none; }
.stageScroll{
  scroll-behavior: smooth;
  scroll-padding-top: 76px; /* совпадает с section{scroll-margin-top:76px} */
}