:root{
  --bg:#D6D6DA; --bg-hi:#E6E6EA; --ink:#0B1222; --muted:#4C5568;
  --signal:#3FA9FF; --volt:#1D7BFF; --pulse:#D24BFF; --live:#18B87A;
  --card:#F4F4F7; --line:rgba(11,18,34,.12);
  --acc:linear-gradient(100deg,#1D7BFF 0%,#3FA9FF 45%,#D24BFF 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0; color:var(--ink); background:var(--bg); font-family:'Manrope',system-ui,sans-serif; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}

/* ---------- шапка ---------- */
.top{position:fixed; z-index:50; left:0; right:0; top:0; height:64px; display:flex; align-items:center; gap:28px; padding:0 4vw; background:linear-gradient(to bottom, rgba(230,230,234,.92), rgba(230,230,234,0)); transition:background .25s, box-shadow .25s}
.top.scrolled{background:rgba(236,236,240,.94); box-shadow:0 1px 0 rgba(11,18,34,.08)}
.kicker i{display:inline-block; width:8px; height:8px; border-radius:50%; background:#18B87A; box-shadow:0 0 10px #18B87A; margin-right:10px; vertical-align:middle}
.copy-hero h1{font-size:clamp(30px,3.4vw,54px)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:'Unbounded'; font-weight:700; letter-spacing:.14em; font-size:15px}
.brand img{height:30px}
.nav{display:flex; gap:26px; margin-left:auto; font-weight:600; font-size:15px}
.nav a{text-decoration:none; opacity:.75}
.nav a:hover{opacity:1}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 26px; border-radius:999px; background:var(--ink); color:#fff; text-decoration:none; font-weight:700; font-size:16px; border:2px solid var(--ink)}
.btn:hover{background:var(--volt); border-color:var(--volt)}
.btn-ghost{background:transparent; color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn-sm{min-height:40px; padding:0 18px; font-size:14px}

/* ---------- сцена ---------- */
.story{position:relative; height:800vh}
.stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  background:radial-gradient(120% 80% at 62% 38%, var(--bg-hi) 0%, var(--bg) 55%, #CACACF 100%)}
/* Слои сцены ускоряются только во время движения. В покое will-change снимается, и браузер
   перерисовывает стойки, телефон и экраны в настоящем масштабе — без мыла от растянутой картинки. */
.stage.moving > *,.stage.moving .stand{will-change:transform,opacity}

.bigword{position:absolute; left:0; top:0; font-family:'Unbounded'; font-weight:900; font-size:clamp(90px,15vw,260px); line-height:.9; letter-spacing:-.04em; white-space:nowrap;
  background:var(--acc); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:0; pointer-events:none; user-select:none}

#stands{position:absolute; inset:0}
/* стойка: вырезка из фото (assets/stand-cut.webp, собрана tools/cutout.html) + своя тень на странице */
.stand{position:absolute; left:0; top:0; width:1333px; height:2000px; transform-origin:0 0}
.stand > img{position:absolute; left:0; top:0; width:1333px; height:2000px; display:block}
.stand .shadow{position:absolute; left:15px; top:1700px; width:1300px; height:200px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(11,18,34,.34), rgba(11,18,34,.12) 55%, rgba(11,18,34,0))}
.stand .shadow.contact{left:95px; top:1762px; width:1140px; height:64px; background:radial-gradient(closest-side, rgba(11,18,34,.55), rgba(11,18,34,0))}
.stand .shadow.led{left:240px; top:1772px; width:880px; height:46px; background:radial-gradient(closest-side, rgba(63,169,255,.45), rgba(63,169,255,0))}
.stand .glare{mix-blend-mode:screen; opacity:.38; pointer-events:none}
/* Стекло экрана (весь четырёхугольник с фото) — чёрное; изображение светится только в рабочей
   области матрицы внутри рамки, как у настоящего планшета: отступы и радиус сняты с фото стойки. */
.scr{position:absolute; left:0; top:0; width:800px; height:1280px; transform-origin:0 0; overflow:hidden;
  /* рамка около 2 мм: стекло ~140 мм в ширину = 800 px холста, значит 2 мм ≈ 12 px */
  --ins:24px 12px 13px 12px; --rad:22px 22px 12px 12px;
  background:radial-gradient(120% 90% at 30% 20%, #10141c 0%, #05070b 60%, #020305 100%)}
/* блик и отражение стекла поверх всего экрана */
.scr::after{content:''; position:absolute; inset:0; z-index:6; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 22%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 72%, rgba(255,255,255,.06) 100%)}
.sc{position:absolute; inset:var(--ins); border-radius:var(--rad); overflow:hidden; opacity:0; isolation:isolate}
/* матрица: мягкая тень по краю рабочей области и лёгкая виньетка — без «вырезанного» прямоугольника */
.sc::after,.gm-scr::after{content:''; position:absolute; inset:0; z-index:5; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.5), inset 0 0 26px rgba(0,0,0,.35), inset 0 0 90px rgba(0,0,0,.18)}

/* экран A: ротация рекламы */
.sa .slide{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:90px 70px; color:#fff; opacity:0; animation:slides 9s infinite}
.sa .slide:nth-child(2){animation-delay:3s}
.sa .slide:nth-child(3){animation-delay:6s}
.sa .slide b{font-family:'Unbounded'; font-weight:600; font-size:40px; letter-spacing:.14em; opacity:.85}
.sa .slide strong{font-family:'Unbounded'; font-weight:900; font-size:150px; line-height:.95; margin:40px 0 30px; letter-spacing:-.03em}
.sa .slide strong.mid{font-size:104px}
.sa .slide span{font-size:52px; font-weight:600; line-height:1.2}
@keyframes slides{0%{opacity:0}4%{opacity:1}30%{opacity:1}34%{opacity:0}100%{opacity:0}}

/* экран B: ролик пекарни */
.ad{position:absolute; inset:0; color:#fff; overflow:hidden; background:linear-gradient(160deg,#FFB547 0%,#FF7A3D 45%,#E8366B 100%); font-family:'Manrope'}
.ad::before{content:""; position:absolute; width:900px; height:900px; border-radius:50%; right:-420px; top:-300px; background:radial-gradient(circle,rgba(255,255,255,.35),rgba(255,255,255,0) 65%)}
.ad::after{content:""; position:absolute; width:620px; height:620px; border-radius:50%; left:-240px; bottom:-220px; border:60px solid rgba(255,255,255,.14)}
.ad .ad-brand{position:absolute; left:70px; top:90px; font-family:'Unbounded'; font-weight:700; font-size:40px; letter-spacing:.12em}
.ad .ad-big{position:absolute; left:52px; top:290px; font-family:'Unbounded'; font-weight:900; font-size:168px; line-height:.9; letter-spacing:-.05em}
.ad .ad-txt{position:absolute; left:70px; top:620px; right:70px; font-size:66px; font-weight:800; line-height:1.1}
.ad .ad-pill{position:absolute; left:70px; bottom:110px; padding:22px 40px; border-radius:999px; background:#fff; color:#E8366B; font-weight:800; font-size:40px}

/* экран C: ролик + QR */
.sc-c .ad .ad-big{font-size:150px; top:230px}
.sc-c .ad .ad-txt{top:470px; font-size:54px}
.sc-c .ad .ad-pill{display:none}
.qr-panel{position:absolute; left:40px; right:40px; bottom:44px; height:460px; border-radius:36px; background:#fff; display:flex; align-items:center; gap:36px; padding:36px; color:var(--ink)}
.qr-panel svg{width:300px; height:300px; flex:none}
.qr-panel p{margin:0; font-size:44px; font-weight:800; line-height:1.15}

/* экран D: место свободно */
.sc-d{background:#fff; color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px}
.sc-d img{width:420px; height:420px; object-fit:contain}
.sc-d b{font-family:'Unbounded'; font-weight:800; font-size:76px; line-height:1.05; margin-top:30px}
.sc-d span{font-size:44px; font-weight:600; color:var(--muted); margin-top:30px}

/* ---------- линии-потоки ---------- */
.lines{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.lines path{fill:none; stroke:url(#g-stream); stroke-linecap:round; stroke-linejoin:round}
.lines .stream{stroke-width:7}
.lines .wire{stroke-width:4}
.lines .halo{stroke-opacity:.22}
.lines .stream.halo{stroke-width:20}
.lines .wire.halo{stroke-width:13}
.lines .scan{stroke:#18B87A; stroke-width:3; stroke-dasharray:2 10}
.lines circle{fill:#fff; stroke:#1D7BFF; stroke-width:3}

/* ---------- телефон ---------- */
.phone{position:absolute; left:0; top:0; width:300px; height:620px; border-radius:46px; background:#0B1222; padding:11px; transform-origin:50% 50%; box-shadow:0 40px 80px -30px rgba(11,18,34,.55), inset 0 0 0 2px #2a3550}
.phone-scr{position:relative; width:100%; height:100%; border-radius:36px; overflow:hidden; background:#F4F4F7}
.ph{position:absolute; inset:0; opacity:0}
.ph-cab{padding:20px 18px; display:flex; flex-direction:column; align-items:center}
.ph-bar{align-self:stretch; display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; color:var(--muted)}
.ph-bar img{height:18px}
.ph-title{align-self:stretch; font-family:'Unbounded'; font-weight:700; font-size:18px; margin:16px 0 14px}
.ph-thumb{position:relative; width:150px; height:240px; border-radius:14px; overflow:hidden; box-shadow:0 10px 24px -10px rgba(11,18,34,.5)}
.ph-thumb .ad{transform:scale(.1875); transform-origin:0 0; width:800px; height:1280px; right:auto; bottom:auto}
.ph-prog{align-self:stretch; height:8px; border-radius:8px; background:#DDE1EA; margin:18px 0 8px; overflow:hidden}
.ph-prog i{display:block; height:100%; width:100%; background:var(--volt); border-radius:8px; transform-origin:0 50%; transform:scaleX(0)}
.ph-status{align-self:stretch; font-size:13px; font-weight:700; color:var(--muted); display:flex; align-items:center; gap:6px}
.ph-status.on{color:var(--live)}
.ph-status.on::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--live)}
.ph-btn{align-self:stretch; margin-top:auto; height:46px; border-radius:14px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px}
.ph-btn.done{background:#DDE1EA; color:var(--muted)}
.ph-cam{background:#1a1f2b; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px}
.cam-frame{position:relative; width:180px; height:180px}
.cam-frame i{position:absolute; width:40px; height:40px; border:4px solid #fff}
.cam-frame i:nth-child(1){left:0; top:0; border-right:0; border-bottom:0; border-radius:10px 0 0 0}
.cam-frame i:nth-child(2){right:0; top:0; border-left:0; border-bottom:0; border-radius:0 10px 0 0}
.cam-frame i:nth-child(3){left:0; bottom:0; border-right:0; border-top:0; border-radius:0 0 0 10px}
.cam-frame i:nth-child(4){right:0; bottom:0; border-left:0; border-top:0; border-radius:0 0 10px 0}
.cam-hint{color:#fff; font-weight:700; font-size:14px; opacity:.85}
.ph-site{background:#FFF8F1; padding:22px 18px; display:flex; flex-direction:column}
.site-head{font-family:'Unbounded'; font-weight:800; font-size:17px; color:#C2410C}
.site-promo{margin:16px 0; border-radius:16px; padding:14px; color:#fff; background:linear-gradient(140deg,#FF7A3D,#E8366B); display:flex; align-items:center; gap:12px}
.site-promo b{font-family:'Unbounded'; font-weight:900; font-size:28px}
.site-promo span{font-size:13px; font-weight:700; line-height:1.25}
.site-menu{list-style:none; margin:0; padding:0; font-size:14px}
.site-menu li{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid rgba(194,65,12,.15)}
.site-btn{margin-top:auto; height:44px; border-radius:14px; background:#C2410C; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px}

.fly{position:absolute; left:0; top:0; width:800px; height:1280px; border-radius:60px; overflow:hidden; transform-origin:50% 50%; opacity:0; box-shadow:0 60px 120px -40px rgba(232,54,107,.6)}

/* ---------- статистика ---------- */
.stats{position:absolute; left:0; top:0; width:560px; height:340px; transform-origin:50% 50%; border-radius:28px; padding:26px 30px; opacity:0;
  background:rgba(250,250,252,.96); box-shadow:0 30px 70px -30px rgba(11,18,34,.45), inset 0 0 0 1px rgba(255,255,255,.7)}
.stats-h{display:flex; justify-content:space-between; align-items:baseline; font-weight:700; font-size:15px; color:var(--muted)}
.stats-h em{font-style:normal; font-size:12px; text-transform:uppercase; letter-spacing:.08em; opacity:.7}
.stats-row{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-top:6px}
.stats-num{font-family:'Unbounded'; font-weight:800; font-size:64px; line-height:1.05; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.stats-side{text-align:right; font-size:13px; color:var(--muted); line-height:1.35; max-width:190px}
.stats-side b{display:block; font-size:16px; color:var(--ink)}
.bars{display:flex; align-items:flex-end; gap:14px; height:150px; margin-top:16px}
.bar{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end}
.bar i{width:100%; border-radius:10px 10px 4px 4px; background:var(--acc); height:0; transform-origin:50% 100%; transform:scaleY(0)}
.bar span{font-size:12px; font-weight:700; color:var(--muted)}

/* ---------- тексты ---------- */
.copy{position:absolute; left:6vw; top:42%; width:min(34vw,540px); opacity:0; pointer-events:none}
.copy.on{pointer-events:auto}
.copy h1,.copy h2{font-family:'Unbounded'; font-weight:800; font-size:clamp(34px,4.1vw,66px); line-height:1; letter-spacing:-.03em; margin:0; text-transform:uppercase; text-wrap:balance}
.copy .acc{background:var(--acc); -webkit-background-clip:text; background-clip:text; color:transparent}
.kicker{font-weight:700; font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 18px}
.snum{font-family:'Unbounded'; font-weight:800; font-size:20px; color:var(--volt); margin:0 0 14px}
.lead{font-size:clamp(16px,1.25vw,19px); color:var(--muted); margin:22px 0 0; max-width:440px}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

.dots{position:absolute; right:2.2vw; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:12px; z-index:5}
.dots button{width:10px; height:10px; padding:0; border-radius:50%; border:2px solid var(--ink); background:transparent; opacity:.35; cursor:pointer}
.dots button.on{background:var(--ink); opacity:1; height:26px; border-radius:6px}
.hint{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}

.final{min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px 16px; background:var(--ink); color:#fff}
.final h2{font-family:'Unbounded'; font-weight:800; font-size:clamp(28px,4vw,52px); margin:0; text-transform:uppercase}
.final p{color:#8C9BBB}
.foot{padding:24px 16px; text-align:center; font-size:13px; color:#8C9BBB; background:var(--ink); border-top:1px solid rgba(255,255,255,.08)}

@media (max-width:759px){
  .nav{display:none}
  .top{padding:0 16px}
  .brand span{font-size:13px; white-space:nowrap}
  .top{gap:12px; justify-content:space-between}
  .top .btn-sm{min-height:38px; padding:0 14px; font-size:13px; white-space:nowrap}
  .copy-hero .lead{display:none}
  .copy{left:16px; right:16px; top:76px; width:auto}
  .copy h1,.copy h2{font-size:clamp(26px,7.6vw,40px)}
  .lead{font-size:15px; margin-top:12px}
  .kicker{font-size:12px; margin-bottom:10px}
  .snum{font-size:16px; margin-bottom:8px}
  .cta{margin-top:16px}
  .btn{min-height:44px; padding:0 20px; font-size:15px}
  .bigword{display:none}
  .dots{right:8px}
  .hint{display:none}
}
/* ротация рекламы на главной стойке останавливается после первого шага */
.stand.paused .sa .slide{animation-play-state:paused}
/* облегчённый режим для телефонов и планшетов (класс lite ставит app.js) */
.lite .stand .glare{display:none}
/* телефоны: стойки — готовые картинки (bake.js); слоёв видеокарты минимум */
.lite .stage{contain:layout paint}
.lite .lines{will-change:opacity}
.stand.baked .bk{position:absolute; left:0; top:0; width:1333px; height:2000px; opacity:0; visibility:hidden}
.stand.baked .bk[data-k="off"]{opacity:1; visibility:visible}
.fly-img{display:block; width:100%; height:100%}
.lite .lines .halo{display:none}
.lite .sc::after,.lite .gm-scr::after{box-shadow:inset 0 0 0 2px rgba(0,0,0,.5), inset 0 0 16px rgba(0,0,0,.3)}
.lite .fly{box-shadow:none}
.lite .stats{box-shadow:0 16px 36px -22px rgba(11,18,34,.45)}

/* шапка на средней ширине: меню не переносится на две строки */
.brand,.nav a,.top .btn{white-space:nowrap}
@media (max-width:1240px){ .nav a:nth-child(n+5){display:none} }
@media (max-width:1000px){ .nav{display:none} .top{justify-content:space-between} }

@media (prefers-reduced-motion:reduce){
  .sa .slide{animation:none}
  .sa .slide:first-child{opacity:1}
}