:root {
    --paper:#FBFBFD; --surface:#FFFFFF; --sunk:#F1F3F7;
    --ink:#14161C; --muted:#646E80; --line:#DFE3EB;
    --accent:#1F4FE0; --accent-2:#00B4C6; --accent-soft:#E8EDFD;
    --on-accent:#FFFFFF; --glow:rgba(31,79,224,.16); --warm-wave:#D9822B;
    --display:'Unbounded','Golos Text',system-ui,sans-serif;
    --body:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
    --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
    --wide:1160px; --text:66ch;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper:#0D0F14; --surface:#14171E; --sunk:#191D26;
      --ink:#E9ECF2; --muted:#939DAF; --line:#262C38;
      --accent:#6D91FF; --accent-2:#2FD9E8; --accent-soft:#1A2240;
      --on-accent:#0D0F14; --glow:rgba(109,145,255,.22); --warm-wave:#F2A65A;
    }
  }
  :root[data-theme="dark"] {
    --paper:#0D0F14; --surface:#14171E; --sunk:#191D26;
    --ink:#E9ECF2; --muted:#939DAF; --line:#262C38;
    --accent:#6D91FF; --accent-2:#2FD9E8; --accent-soft:#1A2240;
    --on-accent:#0D0F14; --glow:rgba(109,145,255,.22); --warm-wave:#F2A65A;
  }

  *,*::before,*::after { box-sizing: border-box; }
  body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body);
         font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  .wrap { width:min(100% - 2.5rem, var(--wide)); margin-inline:auto; }
  a { color:inherit; } p { margin:0; }
  :focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

  h1,h2,h3 { font-family:var(--display); font-weight:600; text-wrap:balance; margin:0; line-height:1.12; letter-spacing:-.022em; }
  h1 { font-size:clamp(2.6rem,6.6vw,4.7rem); font-weight:700; }
  h2 { font-size:clamp(1.8rem,3.8vw,2.9rem); }
  h3 { font-size:1.1rem; font-family:var(--body); font-weight:600; letter-spacing:0; }
  section { padding-block:clamp(3.5rem,8vw,7rem); position:relative; }
  .lede { max-width:var(--text); color:var(--muted); font-size:1.12rem; }

  .rev { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1); }
  .rev.in { opacity:1; transform:none; }
  .rev[data-d="1"]{transition-delay:.09s} .rev[data-d="2"]{transition-delay:.18s}
  .rev[data-d="3"]{transition-delay:.27s} .rev[data-d="4"]{transition-delay:.36s} .rev[data-d="5"]{transition-delay:.45s}

  .mark { display:flex; align-items:baseline; gap:.85rem; font-family:var(--mono); font-size:.78rem;
          font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:1.4rem; }
  .mark b { color:var(--accent); font-weight:500; font-variant-numeric:tabular-nums; }
  .mark span { flex:1; height:1px; background:var(--line); }

  header { position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--paper) 86%, transparent);
           backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
  .bar { display:flex; align-items:center; gap:1.5rem; height:68px; }
  .logo { font-family:var(--display); font-weight:700; font-size:1.18rem; letter-spacing:-.02em; text-decoration:none; display:flex; align-items:center; gap:.55rem; }
  .logo i { color:var(--accent); font-style:normal; }
  .logo .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 2.6s ease-out infinite; }
  @keyframes pulse { 0%{box-shadow:0 0 0 0 var(--glow)} 70%{box-shadow:0 0 0 11px transparent} 100%{box-shadow:0 0 0 0 transparent} }
  nav { margin-left:auto; display:flex; gap:1.6rem; font-size:.95rem; }
  nav a { color:var(--muted); text-decoration:none; position:relative; }
  nav a::after { content:''; position:absolute; left:0; right:100%; bottom:-3px; height:1.5px; background:var(--accent); transition:right .25s ease; }
  nav a:hover { color:var(--ink); } nav a:hover::after { right:0; }
  @media (max-width:900px){ nav{display:none} }
  .clock { font-family:var(--mono); font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums; }
  @media (max-width:560px){ .clock{display:none} }
  .scrub { position:absolute; left:0; bottom:-1px; height:2px; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }

  .btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.82rem 1.55rem;
         border-radius:9px; background:var(--accent); color:var(--on-accent); font-weight:600; font-size:1rem;
         text-decoration:none; border:1px solid transparent; cursor:pointer; position:relative; overflow:hidden;
         transition:transform .14s ease, box-shadow .2s ease; }
  .btn::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%); transform:translateX(-120%); }
  .btn:hover { transform:translateY(-2px); box-shadow:0 10px 26px -10px var(--glow); }
  .btn:hover::after { transform:translateX(120%); transition:transform .7s ease; }
  .btn.ghost { background:transparent; color:var(--ink); border-color:var(--line); }
  .btn.ghost:hover { border-color:var(--accent); box-shadow:none; }
  .btn.sm { padding:.55rem 1.1rem; font-size:.92rem; }

  /* ════ СЦЕНА 1 · герой, слои разной глубины ════ */
  .hero { padding-top:clamp(3rem,7vw,5.5rem); padding-bottom:clamp(3rem,7vw,5rem); min-height:92vh; display:flex; align-items:center; }
  .depth { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  .depth .blob { position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; }
  .b1 { width:46vw; height:46vw; left:-8vw; top:-14vw; background:var(--glow);
        transform:translate3d(calc(var(--mx,0)*22px), calc(var(--p,0)*260px + var(--my,0)*18px), 0); }
  .b2 { width:34vw; height:34vw; right:-6vw; top:2vw; background:color-mix(in srgb,var(--accent-2) 20%,transparent);
        transform:translate3d(calc(var(--mx,0)*-30px), calc(var(--p,0)*420px + var(--my,0)*-22px), 0); }
  .depth .far { position:absolute; inset:auto 0 12%; height:120px; opacity:.5;
                transform:translate3d(0, calc(var(--p,0)*-180px), 0); }
  .depth .mid { position:absolute; inset:auto 0 4%; height:80px; opacity:.85;
                transform:translate3d(0, calc(var(--p,0)*-320px), 0); }
  .hero .wrap { position:relative; z-index:2; }
  h1 .ln { display:block; overflow:hidden; }
  h1 .ln i { display:block; font-style:normal; transform:translateY(105%); animation:up .9s cubic-bezier(.2,.75,.25,1) forwards; }
  h1 .ln:nth-child(2) i { animation-delay:.1s } h1 .ln:nth-child(3) i { animation-delay:.2s }
  @keyframes up { to { transform:none; } }
  h1 em { font-style:normal; color:var(--accent); }
  .hero .lede { margin-top:1.5rem; font-size:1.2rem; opacity:0; animation:fade .8s ease .5s forwards; }
  .cta { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem; align-items:center; opacity:0; animation:fade .8s ease .65s forwards; }
  .cta small { color:var(--muted); font-size:.9rem; }
  @keyframes fade { to { opacity:1 } }
  .hint { margin-top:3rem; display:flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.74rem;
          letter-spacing:.12em; text-transform:uppercase; color:var(--muted); opacity:0; animation:fade .8s ease 1s forwards; }
  .hint .ar { width:1px; height:26px; background:linear-gradient(var(--accent),transparent); animation:drop 1.8s ease-in-out infinite; }
  @keyframes drop { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(7px);opacity:.4} }

  /* ════ СЦЕНА 2 · закреплённая: звук становится текстом ════ */
  .scene { position:relative; }
  .scene .pin { position:sticky; top:0; height:100vh; display:grid; align-content:center; overflow:hidden; }
  .s2 { height:340vh; }
  .s2 .pin { background:var(--paper); }
  .s2 .inner { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
  @media (max-width:900px){ .s2 .inner{ grid-template-columns:1fr; gap:2rem } }
  .s2 h2 { margin-bottom:1rem; }
  .s2 .side { transform:translate3d(0, calc((1 - var(--p,0)) * 60px), 0); opacity:calc(.2 + var(--p,0)*2.2); }
  .board { border:1px solid var(--line); border-radius:18px; background:var(--surface); overflow:hidden;
           box-shadow:0 30px 70px -40px var(--glow);
           transform:perspective(1400px) rotateY(calc((1 - var(--p,0)) * 9deg)) translate3d(calc((1 - var(--p,0)) * 40px),0,0); }
  .board-head { display:flex; align-items:center; gap:.8rem; padding:.75rem 1.1rem; border-bottom:1px solid var(--line);
                font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
  .board-head .live { width:7px; height:7px; border-radius:50%; background:var(--accent-2); }
  .board-head .r { margin-left:auto; color:var(--accent); font-variant-numeric:tabular-nums; }
  .board-wave { padding:1rem 1.1rem .35rem; position:relative; }
  .board-wave canvas { display:block; width:100%; height:86px; }
  .play { position:absolute; top:.9rem; bottom:.35rem; width:2px; background:var(--accent); left:calc(1.1rem + var(--p,0) * (100% - 2.2rem)); box-shadow:0 0 12px var(--accent); }
  .board-lines { border-top:1px solid var(--line); padding:.5rem .8rem .9rem; }
  .bl { display:grid; grid-template-columns:4.6rem 5rem 1fr; gap:.9rem; align-items:baseline; padding:.55rem .6rem;
        border-radius:8px; opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease, background .3s ease; }
  .bl.show { opacity:1; transform:none; }
  .bl.now { background:var(--accent-soft); }
  .bl .t { font-family:var(--mono); font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums; }
  .bl .s { font-family:var(--mono); font-size:.78rem; color:var(--accent); }
  .bl .x { font-size:.95rem; }
  @media (max-width:640px){ .bl{grid-template-columns:4rem 1fr; row-gap:.1rem} .bl .s,.bl .x{grid-column:2} }

  /* ════ СЦЕНА 3 · закреплённая: горизонтальный ход возможностей ════ */
  .s3 { height:400vh; }
  .s3 .pin { align-content:center; }
  .s3 .rail { display:flex; gap:1.5rem; padding-inline:max(2.5rem,calc((100vw - var(--wide))/2));
              transform:translate3d(calc(var(--p,0) * var(--shift,-1400px)),0,0); will-change:transform; }
  .card { flex:0 0 340px; border:1px solid var(--line); border-radius:18px; background:var(--surface);
          padding:2rem 1.7rem; display:grid; gap:.6rem; align-content:start; min-height:300px; }
  .card svg { width:26px; height:26px; color:var(--accent); margin-bottom:.4rem; }
  .card p { color:var(--muted); font-size:.98rem; }
  .card .k { font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; }
  @media (max-width:640px){ .card{flex-basis:78vw} }
  .s3 .cap { padding-inline:max(2.5rem,calc((100vw - var(--wide))/2)); margin-bottom:2rem; }
  .s3 .bar2 { position:absolute; left:max(2.5rem,calc((100vw - var(--wide))/2)); right:max(2.5rem,calc((100vw - var(--wide))/2));
              bottom:8vh; height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
  .s3 .bar2 i { display:block; height:100%; width:calc(var(--p,0)*100%); background:var(--accent); }

  /* ════ полоса чисел ════ */
  .band { border-block:1px solid var(--line); background:var(--sunk); }
  .nums { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }
  .num { background:var(--sunk); padding:1.8rem 1.2rem; display:grid; gap:.25rem; }
  .num b { font-family:var(--display); font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
  .num span { color:var(--muted); font-size:.92rem; }
  @media (max-width:760px){ .nums{grid-template-columns:repeat(2,1fr)} }

  /* ════ шаги, слоями ════ */
  .steps { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; grid-template-columns:repeat(3,1fr); }
  .step { background:var(--surface); padding:1.9rem 1.6rem; display:grid; gap:.6rem; align-content:start; transition:background .25s ease; }
  .step:hover { background:var(--accent-soft); }
  .step .n { font-family:var(--mono); font-size:.76rem; color:var(--accent); letter-spacing:.1em; }
  .step p { color:var(--muted); font-size:.98rem; }
  @media (max-width:820px){ .steps{grid-template-columns:1fr} }

  /* ════ две встречные бегущие строки ════ */
  .belt { overflow:hidden; border-top:1px solid var(--line); background:var(--surface); padding-block:.95rem;
          -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
  .belt:last-of-type { border-bottom:1px solid var(--line); }
  .belt-run { display:flex; gap:3rem; width:max-content; animation:run 36s linear infinite; }
  .belt.back .belt-run { animation-direction:reverse; animation-duration:44s; }
  .belt:hover .belt-run { animation-play-state:paused; }
  @keyframes run { to { transform:translateX(-50%) } }
  .belt b { font-family:var(--display); font-weight:600; font-size:1rem; color:var(--muted); white-space:nowrap; letter-spacing:-.01em; }
  .belt b::before { content:'·'; margin-right:3rem; color:var(--accent); }

  .cases { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:2rem; }
  .case { border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:1.5rem; display:grid; gap:.45rem;
          align-content:start; transition:border-color .25s ease, transform .25s ease; }
  .case:hover { border-color:var(--accent); transform:translateY(-3px); }
  .case .k { font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; color:var(--accent); text-transform:uppercase; }
  .case p { color:var(--muted); font-size:.95rem; }

  .plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1rem; margin-top:2rem; }
  .plan { border:1px solid var(--line); border-radius:15px; background:var(--surface); padding:1.6rem; display:grid; gap:.35rem;
          align-content:start; position:relative; transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease; }
  .plan:hover { transform:translateY(-5px); border-color:var(--accent); box-shadow:0 18px 40px -24px var(--glow); }
  .plan.pick { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
  .plan .tag { position:absolute; top:-.72rem; left:1.4rem; background:var(--accent); color:var(--on-accent); font-size:.72rem; font-weight:600; padding:.2rem .65rem; border-radius:999px; }
  .plan .mins { font-family:var(--display); font-size:1.5rem; font-weight:600; }
  .plan .rub { font-size:1.95rem; font-weight:600; font-variant-numeric:tabular-nums; }
  .plan .per { color:var(--muted); font-size:.9rem; font-family:var(--mono); }

  .calc { margin-top:2.2rem; border:1px solid var(--line); border-radius:16px; background:var(--surface); overflow:hidden; display:grid; grid-template-columns:1.25fr 1fr; }
  @media (max-width:820px){ .calc{grid-template-columns:1fr} }
  .calc-in { padding:1.8rem 1.6rem; display:grid; gap:1.4rem; align-content:start; }
  .calc-out { padding:1.8rem 1.6rem; background:var(--sunk); border-left:1px solid var(--line); display:grid; gap:.3rem; align-content:center; }
  @media (max-width:820px){ .calc-out{border-left:0; border-top:1px solid var(--line)} }
  .fld { display:grid; gap:.55rem; }
  .fld label { font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
  .fld .val { font-family:var(--display); font-size:1.35rem; font-weight:600; font-variant-numeric:tabular-nums; }
  input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:3px; background:var(--line); outline:none; }
  input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--accent); border:3px solid var(--surface); box-shadow:0 2px 8px -2px var(--glow); cursor:pointer; }
  input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--accent); border:3px solid var(--surface); cursor:pointer; }
  .togs { display:flex; flex-wrap:wrap; gap:.6rem; }
  .tog { display:inline-flex; align-items:center; gap:.55rem; border:1px solid var(--line); border-radius:999px; padding:.5rem 1.05rem;
         cursor:pointer; font-size:.95rem; transition:border-color .2s ease, background .2s ease; user-select:none; }
  .tog input { position:absolute; opacity:0; width:0; height:0; }
  .tog .box { width:15px; height:15px; border-radius:4px; border:1.5px solid var(--line); display:grid; place-items:center; transition:.2s ease; }
  .tog .box::after { content:''; width:7px; height:7px; border-radius:2px; background:var(--on-accent); transform:scale(0); transition:transform .18s ease; }
  .tog:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
  .tog:has(input:checked) .box{ background:var(--accent); border-color:var(--accent); }
  .tog:has(input:checked) .box::after{ transform:scale(1); }
  .tog:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:3px; }
  .calc-out .big { font-family:var(--display); font-size:clamp(2rem,4vw,2.9rem); font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
  .calc-out .cap2 { font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
  .calc-out .rub2 { font-size:1.1rem; font-weight:600; margin-top:.6rem; }
  .calc-out .fine { color:var(--muted); font-size:.88rem; margin-top:.35rem; }

  .tw { overflow-x:auto; border:1px solid var(--line); border-radius:15px; background:var(--surface); margin-top:1.6rem; }
  table { width:100%; border-collapse:collapse; font-size:.98rem; }
  th,td { text-align:left; padding:.8rem 1.1rem; border-bottom:1px solid var(--line); }
  tr:last-child td { border-bottom:0; }
  th { font-weight:600; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  td:last-child, th:last-child { text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
  .note { margin-top:1.2rem; color:var(--muted); font-size:.95rem; max-width:var(--text); }

  details { border-bottom:1px solid var(--line); padding:1.15rem 0; }
  summary { cursor:pointer; font-weight:600; list-style:none; display:flex; gap:1rem; align-items:baseline; }
  summary::-webkit-details-marker { display:none; }
  summary::after { content:'+'; margin-left:auto; color:var(--accent); font-family:var(--mono); font-size:1.2rem; }
  details[open] summary::after { content:'−'; }
  details p { margin-top:.8rem; color:var(--muted); max-width:var(--text); }

  .final { background:var(--sunk); border-block:1px solid var(--line); overflow:hidden; position:relative; }
  .final .wrap { display:grid; gap:1.4rem; justify-items:start; position:relative; z-index:2; }
  .final canvas { position:absolute; inset:auto 0 -10px; height:170px; opacity:.4; z-index:0;
                  transform:translate3d(0,calc((1 - var(--p,0)) * 60px),0); }
  footer { padding-block:2.6rem; font-size:.92rem; color:var(--muted); }
  footer .wrap { display:flex; flex-wrap:wrap; gap:1.2rem 2rem; align-items:center; }
  footer a { text-decoration:none; } footer a:hover { color:var(--ink); }
  footer .sp { margin-left:auto; }

  /* Сцены — это движение. Если движение не нужно, они становятся
     обычными разделами: закрепление снимается, слои встают на место. */
  @media (prefers-reduced-motion: reduce) {
    .rev { opacity:1 !important; transform:none !important; transition:none !important; }
    .scene { height:auto !important; }
    .scene .pin { position:static; height:auto; padding-block:clamp(3rem,7vw,5rem); }
    .s3 .rail { flex-wrap:wrap; transform:none !important; }
    .card { flex-basis:300px; }
    .s3 .bar2 { display:none; }
    .board, .s2 .side, .final canvas, .depth .blob, .depth .far, .depth .mid { transform:none !important; opacity:1 !important; }
    .bl { opacity:1 !important; transform:none !important; }
    .belt-run { animation:none; }
    h1 .ln i { animation:none; transform:none; }
    .hero .lede, .cta, .hint { opacity:1; animation:none; }
    .play { display:none; }
  }

/* ═══════════════════════════════════════════════════════════════
   ПОЛНОЭКРАННЫЕ СЦЕНЫ
   Каждая — закреплённый экран, внутри которого объект живёт по мере
   прокрутки. Прогресс приходит числом в --p, вся геометрия считается
   в CSS: так слои не расходятся между собой и не считаются в JS
   поштучно.
   ═══════════════════════════════════════════════════════════════ */

/* Тёмный захват. Сцена переопределяет токены у себя, и всё внутри
   переворачивается разом — заголовки, подписи, рамки. Так делается
   контрастный разворот посреди светлой страницы. */
.dark {
  --paper:#0A0C11; --surface:#11141B; --sunk:#161A22;
  --ink:#EDEFF4; --muted:#8C96A8; --line:#242B38;
  --accent:#7B9BFF; --accent-2:#3BE0EF; --accent-soft:#151E38;
  --on-accent:#0A0C11; --glow:rgba(123,155,255,.26); --warm-wave:#F2A65A;
  background:var(--paper); color:var(--ink);
}

/* Заголовок, проявляющийся по словам вслед за прокруткой. */
.wr { display:flex; flex-wrap:wrap; gap:0 .32em; }
.wr span {
  opacity:clamp(.12, calc((var(--p,0) * var(--n) - var(--i) + .35) * 2.2), 1);
  transform:translateY(clamp(0px, calc((var(--i) - var(--p,0) * var(--n)) * 9px), 26px));
  transition:none;
}

/* ── СЦЕНА · один голос разделяется на несколько ── */
.s5 { height:360vh; }
.s5 .pin { display:grid; align-content:center; gap:clamp(1.5rem,4vw,3rem); }
.s5 .hd { padding-inline:max(2.5rem,calc((100vw - var(--wide))/2)); max-width:min(100%,var(--wide)); margin-inline:auto; width:100%; }
.s5 h2 { font-size:clamp(2rem,5.2vw,4rem); }
.s5 .lanes { position:relative; height:min(46vh,340px); width:min(100% - 3rem,var(--wide)); margin-inline:auto; }
.s5 .lane { position:absolute; left:0; right:0; height:33.33%; display:grid; grid-template-columns:7.5rem 1fr; align-items:center; gap:1rem; }
.s5 .lane canvas { width:100%; height:100%; display:block; }
/* Дорожки разъезжаются: в начале лежат друг на друге, потом расходятся. */
.s5 .l1 { top:33.33%; transform:translateY(calc(var(--p,0) * -33.33%)); }
.s5 .l2 { top:33.33%; }
.s5 .l3 { top:33.33%; transform:translateY(calc(var(--p,0) * 33.33%)); }
.s5 .who { font-family:var(--mono); font-size:.85rem; letter-spacing:.06em; text-align:right;
           opacity:clamp(0,calc((var(--p,0) - .35) * 4),1);
           transform:translateX(calc((1 - clamp(0,calc((var(--p,0) - .35) * 4),1)) * 20px)); }
.s5 .l1 .who { color:var(--accent); } .s5 .l2 .who { color:var(--accent-2); } .s5 .l3 .who { color:#F2A65A; }
@media (max-width:700px){ .s5 .lane { grid-template-columns:4.6rem 1fr } .s5 .who { font-size:.72rem } }

/* ── СЦЕНА · длинный текст сжимается в протокол ── */
.s6 { height:380vh; }
.s6 .pin { display:grid; align-content:center; }
.s6 .duo { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
           width:min(100% - 3rem,var(--wide)); margin-inline:auto; }
@media (max-width:880px){ .s6 .duo { grid-template-columns:1fr; gap:1.5rem } .s6 .stack { display:none } }
.s6 .stack { display:grid; gap:.42rem; transform:scale(calc(1 - var(--p,0) * .22)); transform-origin:left center; }
.s6 .row { height:11px; border-radius:6px; background:var(--line);
           opacity:clamp(.15,calc(1 - var(--p,0) * 1.5),1); }
.s6 .row.a { width:96% } .s6 .row.b { width:74% } .s6 .row.c { width:88% } .s6 .row.d { width:61% }
.s6 .card2 { border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:1.7rem 1.5rem;
             box-shadow:0 30px 70px -40px var(--glow);
             transform:translateY(calc((1 - var(--p,0)) * 40px)) scale(calc(.94 + var(--p,0) * .06));
             opacity:clamp(0,calc(var(--p,0) * 2.2),1); }
.s6 .card2 .ttl { font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; }
.s6 .it { display:grid; grid-template-columns:auto 1fr; gap:.7rem; padding:.55rem 0; border-top:1px solid var(--line); align-items:start; }
.s6 .it:first-of-type { border-top:0; }
.s6 .it .m { width:16px; height:16px; border-radius:5px; background:var(--accent-soft); color:var(--accent);
             display:grid; place-items:center; font-size:.62rem; font-family:var(--mono); margin-top:.35rem; }
.s6 .it p { font-size:.95rem; }
.s6 .it b { display:block; font-size:.78rem; color:var(--muted); font-weight:500; font-family:var(--mono); }

/* ── СЦЕНА · источники слетаются в приложение ── */
.s7 { height:340vh; }
.s7 .pin { display:grid; place-items:center; }
.s7 .field { position:relative; width:min(100% - 3rem,var(--wide)); height:min(60vh,460px); }
.s7 .core { position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:3;
            border:1px solid var(--line); border-radius:18px; background:var(--surface); padding:1.6rem 1.9rem;
            text-align:center; box-shadow:0 30px 80px -40px var(--glow);
            transform:scale(calc(.86 + var(--p,0) * .14)); }
.s7 .core .n { font-family:var(--display); font-weight:700; font-size:clamp(1.2rem,2.6vw,1.8rem); letter-spacing:-.02em; }
.s7 .core .u { font-family:var(--mono); font-size:.74rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-top:.3rem; }
.s7 .orb { position:absolute; left:50%; top:50%; z-index:2;
           border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:.5rem 1.05rem;
           font-size:.92rem; white-space:nowrap; box-shadow:0 10px 30px -18px var(--glow);
           /* Летят к центру: радиус сжимается вместе с прогрессом. */
           /* Координаты приходят готовыми из скрипта: cos() и sin()
              в CSS поддержаны не везде, а промах здесь схлопнул бы
              все источники в одну точку. */
           translate:calc(-50% + var(--x,0px) * (1 - var(--p,0) * .82))
                     calc(-50% + var(--y,0px) * (1 - var(--p,0) * .82));
           opacity:clamp(0,calc(1.15 - var(--p,0) * 1.1),1);
           scale:calc(1 - var(--p,0) * .25); }
@media (max-width:760px){ .s7 .orb { font-size:.8rem; padding:.4rem .8rem } }

/* ── СЦЕНА · крупное число ── */
.s8 { height:260vh; }
.s8 .pin { display:grid; place-items:center; text-align:center; }
.s8 .huge { font-family:var(--display); font-weight:700; letter-spacing:-.04em; line-height:.9;
            font-size:clamp(5rem,22vw,17rem); color:var(--accent);
            transform:scale(calc(.72 + var(--p,0) * .28)); font-variant-numeric:tabular-nums; }
.s8 .cap3 { font-size:clamp(1.1rem,2.4vw,1.6rem); color:var(--muted); max-width:24ch; margin:1.2rem auto 0;
            opacity:clamp(0,calc((var(--p,0) - .25) * 3),1); }

@media (prefers-reduced-motion: reduce) {
  .s5, .s6, .s7, .s8 { height:auto !important; }
  .s5 .pin, .s6 .pin, .s7 .pin, .s8 .pin { position:static; height:auto; padding-block:clamp(3rem,7vw,5rem); }
  .wr span { opacity:1 !important; transform:none !important; }
  .s5 .l1, .s5 .l3 { position:relative; top:auto; transform:none; }
  .s5 .l2 { position:relative; top:auto; }
  .s5 .lanes { height:auto; display:grid; gap:1rem; }
  .s5 .lane { position:relative; height:90px; }
  .s5 .who { opacity:1 !important; transform:none !important; }
  .s6 .stack, .s6 .card2, .s7 .core, .s7 .orb, .s8 .huge { transform:none !important; opacity:1 !important; scale:none !important; }
  .s6 .row { opacity:1 !important; }
  .s7 .field { height:auto; display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
  .s7 .orb, .s7 .core { position:relative; left:auto; top:auto; translate:none; }
  .s8 .cap3 { opacity:1 !important; }
}

/* Карточка-ссылка в разделе-указателе: ведёт себя как карточка,
   а не как подчёркнутый текст. */
a.case { text-decoration:none; color:inherit; }
a.case:hover h3 { color:var(--accent); }

/* ── статья ────────────────────────────────────────────────────
   Колонка держится около 66 символов: длиннее строка — и глаз
   теряет начало следующей. */
.art { max-width:var(--text); display:grid; gap:1.15rem; }
.art h2 { font-size:clamp(1.35rem,2.6vw,1.85rem); margin-top:1.4rem; }
.art h2:first-child { margin-top:0; }
.art p { font-size:1.06rem; }
.art ul { margin:0; padding-left:1.25rem; display:grid; gap:.5rem; color:var(--muted); }
.art li::marker { color:var(--accent); }
.art aside { border-left:3px solid var(--accent); background:var(--accent-soft);
             padding:1rem 1.2rem; border-radius:0 10px 10px 0; font-size:1rem; }

/* Список статей в блоге. */
.posts { display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
         border-radius:16px; overflow:hidden; margin-top:2rem; }
.post { background:var(--surface); padding:1.5rem 1.6rem; display:grid; gap:.4rem;
        text-decoration:none; color:inherit; transition:background .22s ease; }
.post:hover { background:var(--accent-soft); }
.post .k { font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
           text-transform:uppercase; color:var(--accent); }
.post h3 { font-size:1.18rem; font-family:var(--display); font-weight:600; letter-spacing:-.02em; }
.post p { color:var(--muted); font-size:.97rem; }