/* Navision — сайт.
   Раскладка: лист измерений. Тёмные чернила, сатиновые обои самой системы за первым
   экраном, разделы подписаны именами процессов, которые их делают, между разделами —
   линейка с делениями (как шкала кадров). Цвет измеренных чисел — янтарь. */
@import url("../fonts/fonts.css");

:root{
  color-scheme:dark;
  --ink:#0B0A1E; --ink-2:#12102E; --ink-3:#1A1740;
  --fg:#EEECFF; --fg-2:#ABA8CF; --fg-3:#77749C;
  --line:rgba(190,185,255,.14); --line-2:rgba(190,185,255,.26);
  --violet:#9478FF; --sky:#52D3F6; --amber:#F7B48C; --amber-2:#EA8A5C;
  --ok:#5AD3A6;
  --plate:rgba(255,255,255,.035); --plate-2:rgba(255,255,255,.07);
  --bar:rgba(190,185,255,.22);
  --wall:url("../shots/wall-dark.webp");
  --shadow:0 40px 120px rgba(4,2,30,.7),0 2px 0 rgba(255,255,255,.06) inset;
  --display:"Unbounded","Onest",system-ui,sans-serif;
  --body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: light){:root{
  color-scheme:light;
  --ink:#F4F2FC; --ink-2:#ECE9FA; --ink-3:#E1DDF6;
  --fg:#16142E; --fg-2:#4F4C72; --fg-3:#7F7CA0;
  --line:rgba(40,34,110,.14); --line-2:rgba(40,34,110,.28);
  --violet:#5B3FE0; --sky:#0E86B4; --amber:#B4502A; --amber-2:#B4502A;
  --ok:#0F8A62;
  --plate:rgba(255,255,255,.6); --plate-2:rgba(255,255,255,.9);
  --bar:rgba(40,34,110,.16);
  --wall:url("../shots/wall-light.webp");
  --shadow:0 40px 100px rgba(60,50,150,.28),0 0 0 1px rgba(40,34,110,.08);
}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--fg);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
img{max-width:100%;display:block;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{text-wrap:balance}
a{color:inherit}
code,kbd{font-family:var(--mono);font-size:.82em}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:6px}
::selection{background:var(--violet);color:#fff}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── Верхняя строка ── */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ink) 78%,transparent);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;height:60px}
.mark{display:flex;align-items:center;gap:10px;font:600 15px/1 var(--display);letter-spacing:.01em;text-decoration:none}
.mark svg{width:22px;height:22px}
.top nav{display:flex;gap:4px;margin-left:auto;font-size:14.5px}
.top nav a{padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--fg-2);white-space:nowrap}
.top nav a:hover{color:var(--fg);background:var(--plate-2)}
.langs{display:flex;font:500 11.5px/1 var(--mono);border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.langs a{padding:8px 9px;text-decoration:none;color:var(--fg-2)}
.langs a[aria-current]{background:var(--fg);color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:10px;font:600 15px/1 var(--body);text-decoration:none;border:1px solid var(--line-2);background:var(--plate);color:var(--fg);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--plate-2)}
.btn.go{background:var(--fg);color:var(--ink);border-color:var(--fg)}
.btn.go:hover{background:color-mix(in srgb,var(--fg) 88%,var(--violet))}
.top .btn{height:36px;padding:0 14px;font-size:14px}
@media (max-width:900px){.top nav{display:none}.langs{margin-left:auto}}

/* ── Первый экран ── */
.hero{position:relative;isolation:isolate;padding-block:72px 0}
.hero::before{content:"";position:absolute;inset:0 0 18% 0;z-index:-1;background:var(--wall) center top/cover no-repeat;opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:56px;align-items:end}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);margin-bottom:28px}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 25%,transparent)}
h1{font:600 clamp(34px,5.3vw,72px)/1.05 var(--display);letter-spacing:-.025em}
h1 em{font-style:normal;color:transparent;background:linear-gradient(100deg,var(--violet),var(--sky));-webkit-background-clip:text;background-clip:text}
.lede{margin-top:28px;max-width:38em;font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--fg-2)}
.lede b{color:var(--fg);font-weight:600}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.spec{border-top:1px solid var(--line-2);font:400 12.5px/1.5 var(--mono)}
.spec div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.spec dt{color:var(--fg-3)}
.spec dd{text-align:right;color:var(--fg)}

.shot{margin-top:64px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--ink-3)}
.shot img{width:100%}

/* Полоса кадров: рисуется только когда что-то меняется. */
.strip{margin-top:28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 32px;align-items:end}
.strip canvas{grid-column:1/-1;width:100%;height:88px;display:block;border-block:1px solid var(--line)}
.strip p{font-size:15px;color:var(--fg-2);max-width:46em}
.strip output{font:400 12.5px/1.5 var(--mono);color:var(--fg-3);text-align:right;white-space:nowrap}
.strip output b{color:var(--amber);font-weight:500}

/* ── Четыре измерения ── */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:72px;border-block:1px solid var(--line-2)}
.facts li{padding:28px 24px 30px 0}
.facts li+li{padding-left:24px;border-left:1px solid var(--line)}
.facts .v{font:500 clamp(30px,3.6vw,46px)/1 var(--display);letter-spacing:-.02em;color:var(--amber)}
.facts .v small{font:400 13px/1 var(--mono);letter-spacing:0;color:var(--fg-2);margin-left:6px}
.facts h3{margin-top:14px;font:600 15.5px/1.35 var(--body)}
.facts p{margin-top:6px;font-size:14px;line-height:1.45;color:var(--fg-3)}

/* ── Разделы ── */
.sec{padding-block:112px 0}
.rule{height:14px;margin-bottom:56px;
  background:
    repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 120px) left bottom/100% 14px no-repeat,
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 12px) left bottom/100% 6px no-repeat;
  border-bottom:1px solid var(--line-2)}
.tag{font:500 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--amber)}
.tag span{color:var(--fg-3)}
h2{margin-top:16px;font:500 clamp(27px,3.7vw,46px)/1.1 var(--display);letter-spacing:-.02em;max-width:19em}
.sec>.wrap>.lead,.head .lead{margin-top:22px;max-width:40em;font-size:19px;line-height:1.55;color:var(--fg-2)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:start;margin-top:56px}
.two.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.two .shot{margin-top:0;border-radius:14px}
.points{display:grid;gap:0}
.points li{padding:20px 0;border-top:1px solid var(--line)}
.points li:last-child{border-bottom:1px solid var(--line)}
.points h3{font:600 17px/1.35 var(--body)}
.points p{margin-top:6px;font-size:15.5px;line-height:1.55;color:var(--fg-2)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin-top:56px}
.cols.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.cols .points li:last-child{border-bottom:0}

/* Путь команды root — настоящая последовательность. */
.flow{display:flex;flex-wrap:wrap;gap:8px;margin-top:48px;font:400 12.5px/1.3 var(--mono);counter-reset:s}
.flow li{flex:1 1 150px;min-width:0;padding:14px 14px 16px;border:1px solid var(--line-2);border-radius:10px;background:var(--plate);counter-increment:s}
.flow li::before{content:counter(s);display:block;color:var(--fg-3);margin-bottom:10px}
.flow b{display:block;font-weight:500;color:var(--fg);overflow-wrap:anywhere}
.flow span{display:block;margin-top:6px;font-family:var(--body);font-size:13.5px;line-height:1.4;color:var(--fg-2)}
.flow li:last-child{border-color:var(--amber);}
.flow li:last-child b{color:var(--amber)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chips li{font:400 12px/1 var(--mono);padding:9px 11px;border:1px solid var(--line-2);border-radius:999px;color:var(--fg-2)}

/* ── Таблицы и диаграммы ── */
.scroll{overflow-x:auto;margin-top:40px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{padding:12px 16px 12px 0;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font:500 11.5px/1.35 var(--mono);letter-spacing:.03em;color:var(--fg-3);border-bottom-color:var(--line-2);vertical-align:bottom}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap}
tr.us td{color:var(--fg);font-weight:600}
tr.us td.n{color:var(--amber);font-weight:500}
tbody td{color:var(--fg-2)}
tbody td:first-child{color:var(--fg);white-space:nowrap}
td.best{color:var(--ok)}
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 64px;margin-top:56px}
.chart h3{font:600 17px/1.3 var(--body)}
.chart>p{margin-top:6px;font-size:14px;color:var(--fg-3);line-height:1.45}
.bars{display:grid;gap:9px;margin-top:22px}
.bars li{display:grid;grid-template-columns:118px minmax(0,1fr) 62px;gap:12px;align-items:center;font-size:13.5px;color:var(--fg-2)}
.bars i{display:block;height:14px;border-radius:2px;background:var(--bar);width:calc(var(--v)/var(--max)*100%);min-width:2px}
.bars b{font:400 12.5px/1 var(--mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--fg-2)}
.bars .us{color:var(--fg);font-weight:600}
.bars .us i{background:linear-gradient(90deg,var(--amber-2),var(--amber))}
.bars .us b{color:var(--amber)}
.note{margin-top:40px;padding:22px 24px;border-left:2px solid var(--amber);background:var(--plate);font-size:15.5px;line-height:1.55;color:var(--fg-2);max-width:60em}
.note b{color:var(--fg)}
.machine{margin-top:28px;font:400 12px/1.7 var(--mono);color:var(--fg-3);max-width:70em}

/* Как идёт кадр. */
.pipe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:56px;border-top:1px solid var(--line-2)}
.pipe li{padding:20px 20px 0 0;position:relative}
.pipe li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--amber)}
.pipe h3{font:600 15.5px/1.3 var(--body)}
.pipe p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--fg-2)}

/* Службы: что живёт и когда гаснет. */
.procs{columns:2;column-gap:64px;margin-top:40px;font-size:14.5px}
.procs li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:10px 0;border-bottom:1px solid var(--line);break-inside:avoid}
.procs code{color:var(--fg);font-size:12.5px}
.procs span{color:var(--fg-2)}
.procs em{font-style:normal;color:var(--amber)}

.apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;margin-top:48px}
.apps li{padding:16px 0;border-top:1px solid var(--line)}
.apps h3{font:600 16px/1.3 var(--body)}
.apps p{margin-top:4px;font-size:14px;line-height:1.45;color:var(--fg-2)}

.vs{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;margin-top:56px}
.vs h3{font:500 12px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3);margin-bottom:8px}

/* ── Скачать ── */
.get{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;margin-top:56px}
.card{padding:32px;border:1px solid var(--line-2);border-radius:16px;background:var(--plate);min-width:0}
.card h3{font:500 22px/1.2 var(--display);letter-spacing:-.01em}
.card .meta{margin-top:10px;font:400 11.5px/1.5 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3)}
.card p{margin-top:16px;font-size:15.5px;color:var(--fg-2);line-height:1.55}
.card p code{color:var(--fg)}
.term{margin-top:22px;display:flex;align-items:stretch;border:1px solid var(--line-2);border-radius:10px;background:var(--ink-2);overflow:hidden}
.term pre{margin:0;flex:1;min-width:0;overflow-x:auto;padding:16px;font:400 12.5px/1.6 var(--mono);color:var(--fg)}
.term pre::before{content:"$ ";color:var(--amber)}
.term button{flex:none;border:0;border-left:1px solid var(--line-2);background:none;color:var(--fg-2);font:500 12px/1 var(--mono);padding:0 16px;cursor:pointer;min-width:84px}
.term button:hover{color:var(--fg);background:var(--plate-2)}
.card .btn{margin-top:22px}
.limits{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;font-size:15px}
.limits li{padding:14px 0;border-top:1px solid var(--line);color:var(--fg-2)}
.limits b{color:var(--fg);font-weight:600}

footer{margin-top:120px;border-top:1px solid var(--line-2);padding-block:40px 56px;font-size:14px;color:var(--fg-3)}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between}
footer a{color:var(--fg-2)}

/* ── Узкие экраны ── */
@media (max-width:1000px){
  .hero-grid,.two,.two.flip,.vs,.get{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts li:nth-child(3){padding-left:0;border-left:0}
  .facts li:nth-child(n+3){border-top:1px solid var(--line)}
  .cols,.cols.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .charts{grid-template-columns:minmax(0,1fr)}
  .pipe{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px;border-top:0}
  .pipe li{border-top:1px solid var(--line-2)}
  .apps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .procs{columns:1}
}
@media (max-width:600px){
  body{font-size:16px}
  .hero{padding-block:44px 0}
  .sec{padding-block:80px 0}
  .rule{margin-bottom:40px}
  .facts,.cols,.cols.four,.apps,.limits,.pipe{grid-template-columns:minmax(0,1fr)}
  .facts li,.facts li+li{padding:22px 0;border-left:0}
  .facts li+li{border-top:1px solid var(--line)}
  .strip{grid-template-columns:minmax(0,1fr)}
  .strip output{text-align:left;white-space:normal}
  .bars li{grid-template-columns:92px minmax(0,1fr) 52px;gap:8px;font-size:12.5px}
  .procs li{grid-template-columns:minmax(0,1fr);gap:2px}
  .card{padding:22px}
  .top .btn{display:none}
  .shot{border-radius:10px;margin-top:44px}
}

/* Заголовки числовых столбцов переносятся: таблица сравнения помещается без прокрутки. */
thead th.n{white-space:normal;min-width:74px}

/* ════════ Движение ════════
   Всё движение идёт само и не зависит от указателя: живые обои за первым экраном,
   лента кадров, разговор с Помощником, бегущая строка, появление разделов при
   прокрутке. С «Меньше движения» страница стоит на месте и читается целиком. */

/* Живые обои (WebGL); под ними остаётся обычная картинка обоев. */
.hero::before{z-index:-2}
.satin{position:absolute;inset:0 0 14% 0;width:100%;height:86%;z-index:-1;opacity:0;transition:opacity 1.4s ease;
  -webkit-mask-image:linear-gradient(180deg,#000 35%,transparent);mask-image:linear-gradient(180deg,#000 35%,transparent)}
.satin.on{opacity:.9}

/* Первый экран собирается по очереди. */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes stage-in{from{opacity:0;transform:translateY(70px) scale(.96)}to{opacity:1;transform:none}}
.hero .eyebrow,.hero h1,.hero .lede,.hero .cta,.hero .spec{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.hero h1{animation-delay:.08s}.hero .lede{animation-delay:.18s}.hero .cta{animation-delay:.28s}.hero .spec{animation-delay:.38s}
.stage{position:relative;margin-top:64px;perspective:1800px;animation:stage-in 1.2s .35s cubic-bezier(.2,.8,.2,1) both}
.stage .shot{margin-top:0;transform:rotateX(var(--tilt,0deg));transform-origin:50% 100%;will-change:transform}
.eyebrow i{animation:beat 2.4s ease-in-out infinite}
@keyframes beat{50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--ok) 0%,transparent)}}
h1 em{background-size:220% 100%;animation:sheen 7s ease-in-out infinite alternate}
@keyframes sheen{to{background-position:100% 0}}

/* Разговор с Помощником поверх скриншота. */
.demo{position:absolute;right:28px;bottom:-44px;width:min(372px,calc(100% - 56px));padding:18px 18px 20px;border-radius:18px;
  background:color-mix(in srgb,var(--ink-2) 72%,transparent);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--line-2);box-shadow:0 30px 80px rgba(4,2,30,.55);display:grid;gap:10px;font-size:14.5px;line-height:1.45}
.demo p{transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.demo p.off{opacity:0;transform:translateY(8px)}
.demo-head{display:flex;align-items:center;gap:8px;font:500 11.5px/1 var(--mono);letter-spacing:.04em;color:var(--fg-2);padding-bottom:6px}
.demo-head i{width:14px;height:14px;border-radius:5px;background:linear-gradient(135deg,var(--violet),var(--sky))}
.demo-head span{margin-left:auto;color:var(--fg-3)}
.demo-user{justify-self:end;max-width:92%;padding:9px 13px;border-radius:14px 14px 4px 14px;background:linear-gradient(135deg,var(--violet),color-mix(in srgb,var(--violet) 55%,var(--sky)));color:#fff}
.demo-user .rest{color:transparent}
.demo-user .caret{display:inline-block;width:2px;height:1em;margin-left:1px;vertical-align:-2px;background:#fff;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.demo-bot{color:var(--fg)}
.demo-cmd code{display:block;padding:10px 12px;border-radius:9px;background:var(--ink);border:1px solid var(--line);color:var(--amber);font-size:12px}
.demo-pw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:9px;border:1px solid var(--amber);font-size:13px}
.demo-pw b{font-weight:600}
.dots{display:flex;gap:5px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:background .15s,transform .15s}
.dots i.on{background:var(--fg);transform:scale(1.15)}
.demo-ok{color:var(--ok);font-weight:600}
.demo-ok::before{content:"✓ "}

/* Лента кадров. */
.strip{margin-top:92px}
.strip canvas{height:104px}
.strip-out{font:400 12.5px/1.5 var(--mono);color:var(--fg-3);text-align:right;white-space:nowrap}
.strip-out b{color:var(--amber);font-weight:500}

/* Разделы: свет вместо линейки, подпись-капсула. */
.sec{position:relative}
.sec::before{content:"";position:absolute;z-index:-1;top:40px;right:4%;width:min(620px,70vw);height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--violet) 26%,transparent),transparent);filter:blur(30px);animation:drift 16s ease-in-out infinite alternate}
.sec:nth-of-type(even)::before{right:auto;left:0;background:radial-gradient(closest-side,color-mix(in srgb,var(--sky) 18%,transparent),transparent);animation-duration:21s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-70px,50px) scale(1.18)}}
.rule{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--violet) 50%,var(--line-2) 82%,transparent)}
.tag{display:inline-block;padding:8px 13px;border:1px solid var(--line-2);border-radius:999px;background:var(--plate)}

/* Карточки вместо строк. */
.cols{gap:14px}
.cols .points{gap:14px}
.cols .points li,.cols .points li:last-child,.apps li{padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--plate)}
.apps{gap:14px}
.card,.cols .points li,.apps li,.flow li{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
.card::after,.cols .points li::after,.apps li::after,.flow li::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--violet) 26%,transparent),transparent 70%)}
.card:hover::after,.cols .points li:hover::after,.apps li:hover::after,.flow li:hover::after{opacity:1}
.card:hover,.cols .points li:hover,.apps li:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 18px 50px rgba(4,2,30,.3)}
.two .shot{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.two .shot:hover{transform:scale(1.015) translateY(-4px)}
.btn{transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}

/* Путь команды: шаги загораются по очереди. */
.flow li{animation:step 7.5s infinite}
.flow li:nth-child(2){animation-delay:1.5s}.flow li:nth-child(3){animation-delay:3s}.flow li:nth-child(4){animation-delay:4.5s}.flow li:nth-child(5){animation-delay:6s}
@keyframes step{0%,18%{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,var(--plate));box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 14%,transparent)}
  26%,100%{border-color:var(--line-2);background:var(--plate);box-shadow:none}}
.flow li:last-child{border-color:var(--line-2)}

/* Как идёт кадр: точка бежит по линии. */
.pipe{position:relative}
.pipe::after{content:"";position:absolute;top:-4px;left:0;width:64px;height:7px;border-radius:4px;
  background:linear-gradient(90deg,transparent,var(--amber));filter:drop-shadow(0 0 8px var(--amber));animation:run 4.2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes run{from{left:-64px;opacity:0}8%{opacity:1}92%{opacity:1}to{left:100%;opacity:0}}

/* Бегущая строка возможностей (включает скрипт, без него — обычный список). */
.marquee.on{overflow:hidden;margin-top:28px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee.on .chips{flex-wrap:nowrap;width:max-content;margin-top:0;animation:mq 46s linear infinite}
.marquee.on:hover .chips{animation-play-state:paused}
.marquee.on .chips li{white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}

/* Появление при прокрутке (классы ставит скрипт; без него всё видно сразу). */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.bars.grow i{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.bars.grow.in i{transform:none}
.bars.grow li:nth-child(2) i{transition-delay:.06s}.bars.grow li:nth-child(3) i{transition-delay:.12s}.bars.grow li:nth-child(4) i{transition-delay:.18s}
.bars.grow li:nth-child(5) i{transition-delay:.24s}.bars.grow li:nth-child(6) i{transition-delay:.3s}.bars.grow li:nth-child(7) i{transition-delay:.36s}
.bars .us i{position:relative;overflow:hidden}
.bars .us i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:glint 3.6s ease-in-out infinite}
@keyframes glint{60%,100%{transform:translateX(100%)}}

@media (max-width:1000px){
  .demo{position:relative;right:auto;bottom:auto;width:auto;margin-top:14px}
  .strip{margin-top:44px}
}
@media (max-width:600px){.stage{margin-top:44px}.strip-out{text-align:left;white-space:normal}}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none}.bars.grow i{transform:none}.pipe::after{display:none}}

/* Заголовок читается поверх живых обоев. */
:root{--em-1:#CFC2FF;--em-2:#86E6FF}
@media (prefers-color-scheme: light){:root{--em-1:#5B3FE0;--em-2:#0E86B4}}
h1 em{background-image:linear-gradient(100deg,var(--em-1),var(--em-2),var(--em-1))}
.hero .lede{color:color-mix(in srgb,var(--fg) 82%,transparent)}
.hero .spec dt{color:color-mix(in srgb,var(--fg) 60%,transparent)}

/* ════════ Графика вместо таблиц ════════ */

/* Значки в цвете Дока. */
.ic{display:block;width:42px;height:42px;padding:9px;border-radius:13px;margin-bottom:16px;fill:none;stroke:var(--c,var(--violet));stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  background:color-mix(in srgb,var(--c,var(--violet)) 20%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,var(--violet)) 35%,transparent)}
.ic.big{width:60px;height:60px;padding:14px;border-radius:18px;margin-inline:auto}
.apps li:hover .ic{transform:scale(1.08) rotate(-4deg)}
.apps .ic{transition:transform .35s cubic-bezier(.2,.8,.2,1)}

/* Шкала двух кадров 120 Гц. */
.lat{margin-top:64px}
.lat-ruler{position:relative;height:216px;margin-inline:6px;--w:16.67}
.lat-ruler::before{content:"";position:absolute;left:0;right:0;top:112px;height:16px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px calc(100%/16.67)) left/100% 100%;border-top:2px solid var(--line-2)}
.lat-ruler>*{position:absolute;left:calc(var(--at)/var(--w)*100%)}
.vb{top:74px;height:76px;width:1px;background:var(--fg-3)}
.vb span{position:absolute;top:100%;left:0;transform:translateX(-50%);padding-top:8px;font:500 11px/1 var(--mono);font-style:normal;color:var(--fg-3);white-space:nowrap}
.vb:first-child span{transform:none}.vb:nth-child(3) span{transform:translateX(-100%)}
.span{top:98px;height:12px;border-radius:6px;width:calc((var(--to) - var(--at))/var(--w)*100%);transform-origin:0 50%;
  background:linear-gradient(90deg,color-mix(in srgb,var(--amber) 10%,transparent),var(--amber));animation:growA 5s linear infinite}
.span.two{top:130px;background:linear-gradient(90deg,color-mix(in srgb,var(--sky) 10%,transparent),var(--sky));animation-name:growB}
@keyframes growA{0%{transform:scaleX(0)}24.6%,92%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes growB{0%{transform:scaleX(0)}61.8%,92%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.mk{top:0;transform:translateX(-50%);text-align:center;font-weight:400;white-space:nowrap}
.mk strong{display:block;font:500 clamp(20px,2.4vw,30px)/1 var(--display);letter-spacing:-.02em;color:var(--amber)}
.mk span{display:block;margin-top:6px;font-size:13px;color:var(--fg-2)}
.mk::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:calc(98px - 100%);margin-top:6px;background:linear-gradient(var(--amber),transparent)}
.mk:nth-of-type(2) strong{color:var(--sky)}.mk:nth-of-type(2)::after{background:linear-gradient(var(--sky),transparent);height:calc(128px - 100%)}
.mk.low{top:160px;transform:translateX(-80%)}
.mk.low strong{font-size:17px;color:var(--fg-2)}
.mk.low::after{display:none}
.sweep{top:86px;width:2px;height:66px;background:var(--fg);box-shadow:0 0 14px var(--fg);left:0;animation:sweep 5s linear infinite}
@keyframes sweep{from{left:0}92%{left:100%;opacity:1}to{left:100%;opacity:0}}
.lat-cap{margin-top:18px;font-size:15px;color:var(--fg-2);max-width:46em}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.tiles li{padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--plate)}
.tiles .v{font:500 clamp(24px,2.6vw,34px)/1 var(--display);letter-spacing:-.02em;color:var(--amber);white-space:nowrap}
.tiles .v small{font:400 12px/1 var(--mono);letter-spacing:0;color:var(--fg-2);margin-left:6px}
.tiles h3{margin-top:14px;font:600 16px/1.35 var(--body)}
.tiles p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--fg-2)}

/* Таблица сравнения — по запросу. */
.more{margin-top:48px}
.more summary{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:10px;background:var(--plate);font:600 15px/1 var(--body);cursor:pointer;list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";font:400 18px/1 var(--mono);color:var(--amber)}
.more[open] summary::after{content:"−"}
.more .scroll{margin-top:20px}

/* Диспетчер и агенты. */
.hub{margin-top:72px;display:grid;justify-items:center;text-align:center}
.hub-you{padding:10px 18px;border-radius:999px;background:linear-gradient(135deg,var(--violet),color-mix(in srgb,var(--violet) 55%,var(--sky)));color:#fff;font-weight:600;font-size:15px}
.hub-core{position:relative;margin-top:34px;display:flex;align-items:center;gap:12px;padding:16px 26px 16px 18px;border-radius:20px;border:1px solid var(--violet);background:var(--plate-2);
  font:500 19px/1 var(--display);animation:glow 3.2s ease-in-out infinite}
.hub-core .ic{margin:0;width:36px;height:36px;padding:7px;fill:var(--violet)}
@keyframes glow{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--violet) 10%,transparent),0 0 60px color-mix(in srgb,var(--violet) 45%,transparent)}}
.hub-core::before,.hub-core::after{content:"";position:absolute;left:50%;width:1px;height:34px;background:var(--line-2)}
.hub-core::before{bottom:100%}.hub-core::after{top:100%}
.hub-agents{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px;padding-top:34px}
.hub-agents::before{content:"";position:absolute;top:0;left:9%;right:9%;height:1px;background:var(--line-2)}
.hub-agents li{position:relative;padding:12px 18px;border:1px solid var(--line-2);border-radius:12px;background:var(--plate);font:500 13px/1 var(--mono);animation:lit 6s infinite}
.hub-agents li::before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:34px;background:var(--line-2)}
.hub-agents li::after{content:"";position:absolute;left:50%;bottom:100%;width:7px;height:7px;margin-left:-3px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber);animation:drop 6s infinite}
.hub-agents li:nth-child(2),.hub-agents li:nth-child(2)::after{animation-delay:1.2s}
.hub-agents li:nth-child(3),.hub-agents li:nth-child(3)::after{animation-delay:2.4s}
.hub-agents li:nth-child(4),.hub-agents li:nth-child(4)::after{animation-delay:3.6s}
.hub-agents li:nth-child(5),.hub-agents li:nth-child(5)::after{animation-delay:4.8s}
@keyframes drop{0%{transform:translateY(-34px);opacity:0}4%{opacity:1}14%{transform:translateY(-2px);opacity:1}18%,100%{transform:translateY(-2px);opacity:0}}
@keyframes lit{0%,13%{border-color:var(--line-2);color:var(--fg)}16%,34%{border-color:var(--amber);color:var(--amber)}42%,100%{border-color:var(--line-2);color:var(--fg)}}
.hub-cap{margin-top:26px;font-size:15px;color:var(--fg-2);max-width:34em}

/* Remote: сервер — провод — Mac. */
.wire{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:center;margin-top:64px}
.node{padding:30px 24px;border:1px solid var(--line-2);border-radius:20px;background:var(--plate);text-align:center}
.node h3{font:500 19px/1.2 var(--display)}
.node p{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--fg-2)}
.link{display:grid;gap:4px}
.link li{position:relative;display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:13px 2px 15px;font-size:14px;color:var(--fg-2);border-bottom:1px dashed var(--line-2)}
.link b{font:500 12.5px/1 var(--mono);color:var(--amber);white-space:nowrap}
.link li::after{content:"";position:absolute;bottom:-4px;left:0;width:26px;height:7px;border-radius:4px;background:linear-gradient(90deg,transparent,var(--amber));animation:fly 2.6s linear infinite}
.link li:nth-child(2)::after{animation-delay:-.7s}.link li:nth-child(3)::after{animation-delay:-1.5s}.link li:nth-child(4)::after{animation-delay:-2.1s;animation-duration:1.3s}
.link .back b{color:var(--sky)}
.link .back::after{background:linear-gradient(270deg,transparent,var(--sky));animation-name:flyback;animation-duration:1.6s}
@keyframes fly{from{left:0;opacity:0}10%,90%{opacity:1}to{left:calc(100% - 26px);opacity:0}}
@keyframes flyback{from{left:calc(100% - 26px);opacity:0}10%,90%{opacity:1}to{left:0;opacity:0}}

/* Слои системы. */
.arch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center;margin-top:64px}
.iso{position:relative;height:520px}
.pl{position:absolute;left:0;right:0;height:80px;top:calc(var(--n)*78px + 60px);z-index:calc(10 - var(--n));animation:float 6s ease-in-out infinite;animation-delay:calc(var(--n)*-.9s)}
.pl::before{content:"";position:absolute;left:4%;top:-64px;width:208px;height:208px;border-radius:26px;transform:rotateX(62deg) rotateZ(45deg);
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 85%,transparent),color-mix(in srgb,var(--c) 30%,var(--ink-2)));
  border:1px solid color-mix(in srgb,var(--c) 70%,#fff);box-shadow:-18px 18px 40px rgba(4,2,30,.45)}
.pl span{position:absolute;left:min(64%,330px);top:18px;font:600 16px/1.2 var(--body);padding-left:18px;border-left:2px solid var(--c)}
.pl small{display:block;margin-top:5px;font:400 11.5px/1.2 var(--mono);color:var(--fg-3)}
.p5{--n:0;--c:#9478FF}.p4{--n:1;--c:#52D3F6}.p3{--n:2;--c:#F7B48C}.p2{--n:3;--c:#3FD0A4}.p1{--n:4;--c:#7D839F}
@keyframes float{50%{transform:translateY(-9px)}}
.tech{display:grid;gap:0}
.tech li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 18px;padding:13px 0;border-top:1px solid var(--line)}
.tech h3{font:600 15px/1.4 var(--body);grid-row:span 2}
.tech code{font-size:12px;color:var(--amber);overflow-wrap:anywhere}
.tech p{font-size:13.5px;line-height:1.45;color:var(--fg-2)}

/* Службы: полоска жизни убывает до выключения. */
.procs li{position:relative}
.procs li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--amber-2),var(--amber));transform-origin:0 50%;animation:drain 10s linear infinite}
.procs li:nth-child(3n)::after{animation-delay:-3s}.procs li:nth-child(3n+1)::after{animation-delay:-6.5s}.procs li:nth-child(4n)::after{animation-duration:7s}
@keyframes drain{0%{transform:scaleX(1);opacity:1}80%{transform:scaleX(0);opacity:1}81%,100%{transform:scaleX(0);opacity:0}}

/* Скачать: карточки на обоях системы. */
.get{padding:28px;border-radius:30px;background:var(--wall) center/cover no-repeat;box-shadow:var(--shadow)}
.get .card{background:color-mix(in srgb,var(--ink) 62%,transparent);backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%)}

@media (max-width:1000px){
  .wire,.arch{grid-template-columns:minmax(0,1fr)}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .iso{max-width:520px}
}
@media (max-width:600px){
  .lat-ruler{height:232px}
  .mk span{font-size:11.5px;white-space:normal;width:104px}
  .mk:nth-of-type(1){transform:translateX(-35%)}
  .hub-agents::before,.hub-agents li::before,.hub-agents li::after,.hub-core::after{display:none}
  .hub-agents{padding-top:0;margin-top:18px}
  .pl::before{width:150px;height:150px;top:-36px;left:0}
  .pl{top:calc(var(--n)*66px + 40px)}
  .pl span{left:58%;font-size:14px;padding-left:12px}
  .iso{height:400px}
  .tech li{grid-template-columns:minmax(0,1fr)}
  .tech h3{grid-row:auto}
  .get{padding:12px;border-radius:22px}
}
@media (prefers-reduced-motion: reduce){.sweep,.link li::after,.hub-agents li::after,.procs li::after{display:none}}
@media (max-width:600px){.mk.low{top:182px}.lat-ruler{height:252px}}
@media (prefers-color-scheme: light){.ic{stroke:color-mix(in srgb,var(--c,var(--violet)) 62%,#1c1560)}.hub-core .ic{fill:var(--violet)}}

/* ── Помощник в первом экране: как настоящее окно — шапка сессии, лиловая реплика,
   белая строка ввода с подсветкой, под ней папка, режим и заполнение контекста. ── */
.demo{width:min(400px,calc(100% - 56px));padding:0;gap:0;border-radius:20px;overflow:hidden;font-size:14.5px;
  background:linear-gradient(125deg,color-mix(in srgb,var(--violet) 16%,var(--ink-2)) 0%,color-mix(in srgb,var(--ink-2) 92%,transparent) 55%,color-mix(in srgb,var(--amber) 14%,var(--ink-2)) 100%)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .demo{background:linear-gradient(125deg,color-mix(in srgb,var(--violet) 22%,transparent),color-mix(in srgb,var(--ink-2) 74%,transparent) 55%,color-mix(in srgb,var(--amber) 16%,transparent)),color-mix(in srgb,var(--ink-2) 70%,transparent)}
}
.demo-head{gap:9px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--line);font:600 13.5px/1 var(--body);letter-spacing:0;color:var(--fg)}
.demo-head i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--violet),color-mix(in srgb,var(--violet) 60%,var(--sky)))}
.demo-head i svg{width:13px;height:13px;fill:#fff}
.demo-head b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-head b::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 9px;border:solid var(--fg-3);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.demo-head em{margin-left:auto;font:500 10.5px/1 var(--mono);letter-spacing:.04em;color:var(--fg-3);font-style:normal}
.demo-head u{flex:none;width:20px;height:20px;border-radius:50%;background:var(--plate-2);border:1px solid var(--line);text-decoration:none}
.demo-head u+u{margin-left:-3px}
.demo-body{display:grid;gap:11px;padding:16px 16px 14px;min-height:196px;align-content:start}
.demo-user{justify-self:end;max-width:88%;padding:9px 14px;border-radius:14px;color:var(--fg);
  background:color-mix(in srgb,var(--violet) 22%,var(--plate-2))}
.demo-bot{line-height:1.7}
.demo-bot code{padding:3px 7px;border-radius:6px;font-size:12px;color:var(--violet);background:color-mix(in srgb,var(--violet) 16%,transparent);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--violet) 40%,transparent);text-underline-offset:3px}
.demo-pw{border:1px solid var(--line-2);border-radius:12px;background:var(--plate-2);padding:9px 13px}
.demo-in{display:flex;align-items:center;gap:8px;margin:0 14px;padding:7px 8px;border-radius:14px;background:var(--plate-2);
  border:1px solid color-mix(in srgb,var(--violet) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 16%,transparent),0 8px 24px rgba(4,2,30,.18)}
.demo-in .rb{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--plate);color:var(--fg-2);font:400 17px/1 var(--body);font-style:normal}
.demo-in .rb svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.demo-field{flex:1;min-width:0;white-space:nowrap;overflow:hidden;font-size:13.5px;line-height:1.4}
.demo-field:empty::before{content:attr(data-ph);color:var(--fg-3);border-left:1.5px solid var(--violet);padding-left:3px;animation:phc 1s steps(2) infinite}
@keyframes phc{50%{border-left-color:transparent}}
.demo-field .caret{display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-2px;background:var(--violet);animation:blink 1s steps(2) infinite}
.demo-foot{display:flex;align-items:center;gap:14px;padding:10px 18px 13px;font-size:11.5px;color:var(--fg-3)}
.demo-foot .ctx{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px}
.demo-foot .ctx i{width:34px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--violet) 37%,var(--bar) 37%)}
@media (max-width:420px){.demo-foot span:nth-child(2){display:none}}

/* ── Шапка: парящая стеклянная капсула, текущий раздел подсвечен ── */
.top{top:10px;margin-top:10px;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;padding-inline:max(12px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-right,0px))}
.top .wrap{max-width:1176px;height:56px;gap:16px;padding-inline:18px 10px;border-radius:18px;border:1px solid var(--line-2);
  background:color-mix(in srgb,var(--ink-2) 62%,transparent);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  box-shadow:0 12px 40px rgba(4,2,30,.28),0 1px 0 rgba(255,255,255,.08) inset}
.top nav{gap:2px;font-size:14px}
.top nav a{padding:7px 11px;border-radius:10px;transition:color .2s,background .2s}
.top nav a.on{color:var(--fg);background:color-mix(in srgb,var(--violet) 22%,transparent)}
.langs{border-radius:10px;background:var(--plate)}
.langs a[aria-current]{border-radius:8px}
.top .btn{border-radius:11px;border:0;color:#fff;background:linear-gradient(135deg,var(--violet),color-mix(in srgb,var(--violet) 50%,var(--sky)));box-shadow:0 6px 18px color-mix(in srgb,var(--violet) 40%,transparent)}
.top .btn:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--violet) 88%,#fff),color-mix(in srgb,var(--violet) 45%,var(--sky)))}
@media (prefers-color-scheme: light){.top .wrap{background:rgba(255,255,255,.62);box-shadow:0 12px 36px rgba(60,50,150,.14),0 1px 0 rgba(255,255,255,.7) inset}}

/* ── Подвал: матовое стекло поверх медленных цветных пятен ── */
footer{position:relative;margin-top:120px;padding-block:56px 44px;border-top:0;overflow:hidden;font-size:14.5px;color:var(--fg-2)}
footer .glow{position:absolute;inset:0;pointer-events:none}
footer .glow i{position:absolute;width:44%;aspect-ratio:1.6;border-radius:50%;filter:blur(70px);opacity:.75;animation:drift 16s ease-in-out infinite alternate}
footer .glow i:nth-child(1){left:2%;top:10%;background:var(--violet)}
footer .glow i:nth-child(2){left:36%;top:38%;background:var(--sky);opacity:.5;animation-duration:21s;animation-direction:alternate-reverse}
footer .glow i:nth-child(3){right:0;top:0;background:var(--amber-2);opacity:.55;animation-duration:25s}
@keyframes drift{from{transform:translate3d(-6%,6%,0) scale(1)}to{transform:translate3d(10%,-10%,0) scale(1.18)}}
footer .wrap{position:relative;display:block}
.ft{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:28px 40px;padding:34px 36px;border-radius:26px;
  border:1px solid var(--line-2);background:color-mix(in srgb,var(--ink) 52%,transparent);
  backdrop-filter:blur(34px) saturate(170%);-webkit-backdrop-filter:blur(34px) saturate(170%);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 30px 80px rgba(4,2,30,.3)}
.ft-brand{display:grid;gap:14px;justify-items:start;align-content:start}
.ft-brand .mark{font-size:19px}
.ft-brand .mark svg{width:26px;height:26px}
.ft-brand p{max-width:30ch;color:var(--fg-2)}
.ft nav{display:grid;gap:4px;align-content:start;justify-items:start}
.ft nav:nth-of-type(1){grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.ft nav a{padding:5px 0;text-decoration:none;color:var(--fg-2);transition:color .2s}
.ft nav a:hover{color:var(--fg)}
@media (prefers-color-scheme: light){.ft{background:rgba(255,255,255,.5);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 30px 70px rgba(60,50,150,.16)}footer .glow i{opacity:.5}}
@media (max-width:760px){.ft{grid-template-columns:minmax(0,1fr);padding:26px 22px;border-radius:22px}}
@media (max-width:1000px){.demo{width:auto}}
footer .glow{-webkit-mask-image:linear-gradient(transparent,#000 55%);mask-image:linear-gradient(transparent,#000 55%)}
.demo{grid-template-columns:minmax(0,1fr)}
.demo>*,.demo-body>*{min-width:0}
.demo-ok{overflow-wrap:anywhere}
@media (max-width:760px){footer .glow{-webkit-mask-image:linear-gradient(transparent,#000 25%);mask-image:linear-gradient(transparent,#000 25%)}footer .glow i{width:90%}}