/* USBOperator public landing (/ and /en). docs/design.md §10.
   World: the office desk and the cable. A USB device sits in one place; a drawn cable carries it to the window
   where it works. Pale steel daylight (the window's own wall), ink type, one committed indigo field for the
   admin band and the close. Display: Unbounded; text: Golos Text (both OFL, self-hosted in /assets/fonts).
   One grid: 1200px container, 12 columns, 24px gutters; sections differ in shape, not in spacing rules. */
@font-face{font-family:"Golos";font-style:normal;font-display:swap;font-weight:400 900;src:url(/assets/fonts/golos-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos";font-style:normal;font-display:swap;font-weight:400 900;src:url(/assets/fonts/golos-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Unbounded";font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/fonts/unbounded-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/fonts/unbounded-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ground:#e9ecf5;--paper:#f8f9fd;--sheet:#fff;
  --ink:#15172e;--muted:#454b69;--dim:#5b6185;
  --accent:#4f55d4;--accent-ink:#3d42b8;--accent-tint:rgba(79,85,212,.1);
  --field:#20235a;--field-ink:#eef0ff;--field-dim:#b9bdf0;--field-line:rgba(238,240,255,.16);
  --ok:#11764f;--ok-tint:rgba(17,118,79,.12);--warn:#94600f;--warn-tint:rgba(184,120,20,.14);
  --line:rgba(21,23,46,.12);--line-strong:rgba(21,23,46,.22);
  --cable:#2a2d52;
  --shadow:0 1px 2px rgba(21,23,46,.06),0 18px 40px -22px rgba(30,34,110,.35);
  --ease:cubic-bezier(.22,.8,.24,1);
  --display:"Unbounded","Golos",system-ui,sans-serif;
  --text:"Golos","Segoe UI",system-ui,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,"DejaVu Sans Mono","Liberation Mono",monospace;
  --gut:24px;--sec:clamp(72px,9vw,128px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#161925;--paper:#1d2130;--sheet:#232838;
    --ink:#eceef6;--muted:#bcc2d6;--dim:#9ea6be;
    --accent:#5a60e0;--accent-ink:#b4b8ff;--accent-tint:rgba(122,127,240,.16);
    --field:#262a68;--field-ink:#f0f1ff;--field-dim:#c3c6f4;--field-line:rgba(240,241,255,.16);
    --ok:#44d08d;--ok-tint:rgba(68,208,141,.15);--warn:#f0b955;--warn-tint:rgba(240,185,85,.14);
    --line:rgba(236,238,246,.1);--line-strong:rgba(236,238,246,.2);
    --cable:#c9cdf0;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 20px 44px -22px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--ground);color:var(--ink);font:400 17px/1.6 var(--text);-webkit-font-smoothing:antialiased;caret-color:var(--accent);font-feature-settings:"tnum" 0}
::selection{background:color-mix(in srgb,var(--accent) 26%,transparent);color:inherit}
a{color:var(--accent-ink);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
img,svg,video{display:block;max-width:100%}
h1,h2,h3{font-family:var(--display);color:inherit;text-wrap:balance;font-weight:600}
h2{font-size:clamp(1.65rem,2.8vw,2.4rem);line-height:1.1;letter-spacing:-.025em;font-weight:550}
h3{font-family:var(--text);font-size:1.1875rem;line-height:1.3;font-weight:650;letter-spacing:-.005em}
p,li,summary,dd{text-wrap:pretty}
.wrap{max-width:1248px;margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:var(--sheet);padding:8px 12px;border-radius:8px;z-index:10}
.skip:focus{left:8px}
.fine{font-size:.875rem;line-height:1.5;color:var(--dim)}
.lead{font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.55;color:var(--muted);max-width:36em}
.sec{padding-block:var(--sec)}
.sec-h{max-width:820px;margin-bottom:clamp(36px,4vw,56px)}
.sec-h p{margin-top:16px}
svg.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;border-radius:12px;font:600 15px/1 var(--text);text-decoration:none;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:background-color .15s var(--ease),transform .12s var(--ease),box-shadow .2s var(--ease)}
.btn:active{transform:scale(.97);transition-duration:.06s}
.btn.big{height:56px;padding:0 28px;font-size:17px;border-radius:14px}
.btn.acc{background:var(--accent);color:#fff;box-shadow:0 10px 24px -12px rgba(61,66,184,.9)}
.btn.acc:hover{background:var(--accent-ink)}
@media (prefers-color-scheme:dark){.btn.acc:hover{background:#4c52d2}}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--sheet)}
.btn.light{background:#fff;color:#2b2f8f}
.btn.light:hover{background:#e8eaff}
.btn.line-light{background:transparent;color:var(--field-ink);border-color:var(--field-line)}
.btn.line-light:hover{background:rgba(255,255,255,.08)}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* header: translucent layer, content scrolls under it */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ground) 80%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);transition:box-shadow .2s}
.top.scrolled{box-shadow:0 1px 0 var(--line)}
.top-in{height:68px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:650 19px/1 var(--display);letter-spacing:-.02em;flex:none}
.brand img{width:30px;height:30px}
.menu{display:flex;gap:4px;margin-inline:auto}
.menu a{color:var(--muted);text-decoration:none;font-size:15px;padding:8px 12px;border-radius:10px;white-space:nowrap}
.menu a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.top-act{display:flex;align-items:center;gap:8px;flex:none}
.lang{color:var(--muted);text-decoration:none;font-weight:600;font-size:14px;padding:8px 10px;border-radius:10px}
.lang:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.top .btn{height:40px;padding:0 16px;font-size:14.5px}
@media (max-width:1100px){.menu{display:none}.top-act{margin-left:auto}}
@media (max-width:560px){.top .login{display:none}.brand span{font-size:17px}}

/* ---------- hero: headline left, the cable scene right ---------- */
.hero{overflow:hidden}
.hero-in{position:relative;display:flex;flex-direction:column;gap:clamp(32px,4vw,56px);padding-block:clamp(24px,3.5vw,48px) clamp(64px,7vw,104px);container-type:inline-size}
.hero-text{min-width:0}
.hero h1{font-size:clamp(2.1rem,3.7vw,3.5rem);line-height:1.06;letter-spacing:-.03em;font-weight:550;max-width:15em}
.hero .lead{margin-top:24px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-fine{margin-top:18px;max-width:34em}

.origin{grid-area:origin;justify-self:end;display:flex;align-items:center;gap:18px;margin-top:clamp(16px,3vw,48px)}
.pc{width:clamp(170px,17cqw,230px);height:auto;overflow:visible;flex:none}
.pc-tower{fill:var(--sheet);stroke:var(--line-strong);stroke-width:1.5}
.pc-slot{fill:var(--line)}
.pc-pwr{fill:none;stroke:var(--dim);stroke-width:2}
.tk-body{fill:#23264a}
.tk-shine{fill:rgba(255,255,255,.14)}
.tk-plug{fill:#c8ccd9;stroke:#9aa0b5;stroke-width:1}
.tk-hole{fill:#6d7390}
.tk-ring{fill:none;stroke:#23264a;stroke-width:4}
.tk-led{fill:#59607f;transition:fill .3s}
.scene.lit .tk-led{fill:#3be38e;filter:drop-shadow(0 0 4px rgba(59,227,142,.9))}
@media (prefers-color-scheme:dark){.tk-body{fill:#3a3e70}.tk-ring{stroke:#3a3e70}}
.place{display:flex;flex-direction:column;line-height:1.3;font-size:.9375rem;color:var(--dim)}
.place b{font:600 1.0625rem/1.2 var(--display);color:var(--ink);letter-spacing:-.01em}
.origin .place{align-items:flex-end;text-align:right}
.place.to{grid-area:to;justify-self:start;margin:20px 0 12px 4px}
.cable{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.cable path{fill:none;stroke-linecap:round}
.cable-line{stroke:var(--cable);stroke-width:3;opacity:.85}
.cable-pulse{stroke:var(--accent);stroke-width:5;stroke-dasharray:28 4000;stroke-dashoffset:28;opacity:0}
.scene.flow .cable-pulse{opacity:1;animation:pulse 1.1s var(--ease) forwards}
@keyframes pulse{to{stroke-dashoffset:calc(-1 * var(--len,800px))}}
@media (prefers-color-scheme:dark){.cable-pulse{stroke:#9ea3ff}}

/* the window, built in em: the whole thing scales with the scene (container units) */
.win{grid-area:win;position:relative;z-index:1;font-size:calc(100cqw / 61);
  --wc-wall:linear-gradient(150deg,#e7eaf9 0%,#ece9f8 52%,#e4eff7 100%);--wc-card:#f7f8fd;--wc-hi:rgba(44,50,110,.1);--wc-line:rgba(44,50,110,.11);
  --wc-text:#1b1e33;--wc-dim:#5a6183;--wc-acc:#4f55d4;--wc-field:#eceef9;--wc-ok:#14855a;--wc-ok-t:rgba(20,133,90,.13)}
@media (prefers-color-scheme:dark){.win{--wc-wall:linear-gradient(150deg,#1d222c 0%,#232a36 55%,#1f2631 100%);--wc-card:#2a303c;--wc-hi:rgba(255,255,255,.09);--wc-line:rgba(255,255,255,.08);--wc-text:#e9edf3;--wc-dim:#a3adc0;--wc-acc:#5a60e0;--wc-field:#20252f;--wc-ok:#33d17a;--wc-ok-t:rgba(51,209,122,.18)}}
.win>.w-cap,.win>.w-body{font-family:var(--text);color:var(--wc-text)}
.win>.w-cap,.win>.w-body{background:var(--wc-wall)}
.win{border-radius:1em;box-shadow:0 0 0 1px var(--wc-hi),0 2px 6px rgba(21,23,46,.08),0 50px 90px -40px rgba(30,34,110,.55);overflow:hidden}
.win figcaption{padding:.9em 1.1em;font-size:max(13px,.8em);background:var(--sheet);border-top:1px solid var(--line)}
.w-cap{height:2.2em;display:flex;align-items:center;gap:.5em;padding-left:.8em;font-size:.82em;border-bottom:1px solid var(--wc-line)}
.w-cap img{width:1.15em;height:1.15em}
.w-cap b{flex:1;font-weight:600}
.w-cap i{width:3em;height:100%;position:relative}
.w-cap i::after{content:"";position:absolute;left:50%;top:50%;width:.75em;height:1px;background:currentColor;opacity:.6;transform:translate(-50%,-50%)}
.w-cap i:nth-of-type(2)::after{height:.7em;background:none;border:1px solid currentColor}
.w-cap i:nth-of-type(3)::after{width:.9em;transform:translate(-50%,-50%) rotate(45deg)}
.w-cap i:nth-of-type(3)::before{content:"";position:absolute;left:50%;top:50%;width:.9em;height:1px;background:currentColor;opacity:.6;transform:translate(-50%,-50%) rotate(-45deg)}
.w-body{display:flex;gap:.7em;padding:.7em;height:32.8em}
.w-side{width:12.6em;flex:none;display:flex;flex-direction:column;gap:.7em}
.sq{width:1.6em;height:1.6em;border-radius:.5em;display:grid;place-items:center;color:#fff;flex:none}
.sq svg{width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.c-blue{background:linear-gradient(160deg,#6a7cff,#4a55d8)}.c-teal{background:linear-gradient(160deg,#3cc6c0,#1f9a9e)}
.c-green{background:linear-gradient(160deg,#4fcf80,#259a5a)}.c-orange{background:linear-gradient(160deg,#ffae4a,#f08a1c)}
.c-purple{background:linear-gradient(160deg,#a881ff,#7b55e8)}.c-indigo{background:linear-gradient(160deg,#5b6bd6,#33409e)}
.c-gray{background:linear-gradient(160deg,#9aa0b8,#737a96)}
.w-me{height:3.3em;display:flex;align-items:center;gap:.55em;padding:0 .7em;background:var(--wc-card);border:1px solid var(--wc-hi);border-radius:.85em}
.w-me .sq{width:1.9em;height:1.9em}
.w-me-t{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.w-me-t small{font-size:.72em;color:var(--wc-dim)}
.w-me-t b{font-size:.82em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-nav{list-style:none;display:flex;flex-direction:column;gap:.15em}
.w-nav li{height:2.4em;display:flex;align-items:center;gap:.55em;padding:0 .5em;border-radius:.6em;font-size:.84em;white-space:nowrap}
.w-nav li .sq{width:1.55em;height:1.55em;border-radius:.45em}
.w-nav li b{margin-left:auto;font-weight:400;color:var(--wc-dim);font-size:.9em;font-variant-numeric:tabular-nums}
.w-nav li.on{background:var(--wc-card);box-shadow:0 1px 3px rgba(40,40,90,.12);font-weight:600}
.w-acct{margin-top:auto;padding:.6em;background:var(--wc-card);border:1px solid var(--wc-hi);border-radius:.85em;display:flex;flex-direction:column;gap:.45em}
.w-b{height:2em;display:flex;align-items:center;justify-content:center;border-radius:.6em;background:var(--wc-field);border:1px solid var(--wc-line);font-size:.76em;font-weight:600;white-space:nowrap}
.w-b.acc{background:var(--wc-acc);border-color:transparent;color:#fff}
.w-st{display:flex;align-items:center;gap:.45em;font-size:.72em;color:var(--wc-dim);padding:.1em .2em 0}
.led{width:.5em;height:.5em;border-radius:50%;background:var(--wc-ok,#14855a);flex:none;box-shadow:0 0 0 .18em var(--wc-ok-t,rgba(20,133,90,.13))}
.w-main{flex:1;min-width:0;display:grid;grid-template-columns:1fr 1fr;align-content:start;background:color-mix(in srgb,var(--wc-card) 45%,transparent);border:1px solid var(--wc-hi);border-radius:.85em;padding:.9em .4em;position:relative}
.w-main::before{content:"";position:absolute;left:50%;top:1em;bottom:1em;border-left:1px dashed var(--wc-line)}
.w-col{padding:0 .7em;display:flex;flex-direction:column;align-items:center;min-width:0}
.w-col .w-h{width:100%;display:flex;align-items:center;justify-content:center;gap:.5em;font:600 .78em/1.2 var(--text);color:var(--wc-text);white-space:nowrap;margin-bottom:1em}
.w-col .w-h span{overflow:hidden;text-overflow:ellipsis}
.w-col .w-h b{min-width:1.5em;height:1.5em;padding:0 .4em;border-radius:.75em;background:var(--wc-line);display:grid;place-items:center;font-weight:600;font-size:.9em;font-variant-numeric:tabular-nums}
.w-empty{width:100%;height:2.6em;display:grid;place-items:center;border:1px dashed var(--wc-line);border-radius:.8em;font-size:.76em;color:var(--wc-dim)}
.w-col[data-here]:has(.w-tile) .w-empty{display:none}
.w-grp{display:flex;align-items:center;gap:.45em;font-size:.78em;font-weight:600;margin:.1em 0 .6em}
.w-grp .sq{width:1.45em;height:1.45em;border-radius:.42em}
.w-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:.6em;margin-bottom:1em}
.w-grid:not(:has(.w-tile)),.w-grp:has(+ .w-grid:not(:has(.w-tile))){display:none}
.w-tile{width:10.2em;height:11.2em;padding:.65em;border-radius:.9em;background:var(--wc-card);border:1px solid var(--wc-hi);display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden}
.w-tile.on{border-color:color-mix(in srgb,var(--wc-ok) 45%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--wc-ok) 22%,transparent)}
.w-top{width:100%;display:flex;align-items:center;justify-content:space-between;height:1.7em;flex:none}
.w-gear{width:1em;height:1em;fill:none;stroke:var(--wc-dim);stroke-width:1.8;stroke-linecap:round}
.w-top .sq{width:1.7em;height:1.7em}
.w-nm{margin-top:.4em;width:100%;font-size:.8em;font-weight:650;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:.25em;border-bottom:1px solid var(--wc-line)}
.w-ln{width:100%;height:1.2em;font-size:.7em;line-height:1.2em;color:var(--wc-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.12em}
.w-act{margin-top:auto;width:100%;height:3.6em;display:flex;flex-direction:column;justify-content:flex-end;gap:.3em}
.w-pill{display:none;height:1.55em;border-radius:.8em;background:var(--wc-ok-t);color:var(--wc-ok);font-size:.68em;font-weight:650;line-height:1.55em;align-self:center;padding:0 .8em}
.w-tile.on .w-pill{display:block}
.w-btn{height:2.1em;border-radius:.6em;border:1px solid transparent;background:var(--wc-acc);color:#fff;font:650 .74em/1 var(--text);cursor:pointer;transition:transform .1s var(--ease),filter .15s}
.w-btn:hover{filter:brightness(1.07)}
.w-btn:active,.w-btn.press{transform:scale(.95)}
.w-tile.on .w-btn{background:var(--wc-field);border-color:var(--wc-line);color:var(--wc-text)}
.w-tile.wait .w-btn{background:var(--wc-field);border-color:var(--wc-line);color:var(--wc-dim);cursor:progress}
.w-btn:focus-visible{outline:2px solid var(--wc-acc);outline-offset:2px}

/* ---------- section: what can be passed (a catalogue index, not a card grid) ---------- */
.devices{background:var(--paper)}
.kinds{border-top:2px solid var(--ink)}
.kind{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) minmax(0,2fr);gap:24px 40px;padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline}
.kind dt{font:550 clamp(1.15rem,1.7vw,1.5rem)/1.2 var(--display);letter-spacing:-.02em}
.kind dd p{color:var(--muted);max-width:40em}
.kind .st{justify-self:end;font-size:.875rem;font-weight:600;padding:5px 12px;border-radius:999px;white-space:nowrap}
.st.ok{background:var(--ok-tint);color:var(--ok)}
.st.warn{background:var(--warn-tint);color:var(--warn)}
.st.no{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--muted)}
.kinds-more{margin-top:24px}

/* ---------- section: three cases, three different shapes ---------- */
.who{padding-top:clamp(24px,4vw,56px)}
.role{padding-block:clamp(48px,6vw,88px)}
.role-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.role-h{font:550 clamp(1.9rem,3.4vw,2.75rem)/1.02 var(--display);letter-spacing:-.03em}
.role-sub{margin-top:16px;font-size:clamp(1.125rem,1.5vw,1.375rem);line-height:1.4;font-weight:550;max-width:28em}
.facts{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:14px;max-width:38em}
.facts li{position:relative;padding-left:24px;color:var(--muted)}
.facts li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:2px;background:var(--accent);border-radius:1px}
/* the admin band: the one committed indigo field */
.role-adm{background:var(--field);color:var(--field-ink)}
.role-adm .role-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.role-adm .facts li{color:var(--field-dim)}
.role-adm .facts li::before{background:#9ea3ff}
.role-adm a{color:#fff}
.role-off .role-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}

/* mock request cards (client style) */
.role-art{position:relative;cursor:default;user-select:none;display:flex;flex-direction:column;align-items:center;gap:14px;font-size:clamp(14px,1.25vw,17px)}
.m-req,.m-code{width:min(100%,25em);background:var(--sheet);border:1px solid var(--line);border-radius:1.1em;padding:1.1em;box-shadow:var(--shadow)}
.m-req-2{width:min(100%,21em);align-self:flex-end;transform:translateX(-6%)}
.m-req-h,.m-code-h{display:flex;gap:.8em;align-items:center}
.m-req-h .sq,.m-code-h .sq{width:2.2em;height:2.2em;border-radius:.65em}
.m-req-h>span:last-child,.m-code-h>span:last-child{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.m-req-h b,.m-code-h b{font-size:.95em;font-weight:650}
.m-req-h small,.m-code-h small{font-size:.82em;color:var(--dim)}
.m-req-b{display:grid;grid-template-columns:1fr 1fr;gap:.6em;margin-top:1em}
.m-req-b .w-b{height:2.5em;font-size:.88em;background:var(--paper);border-color:var(--line);color:var(--ink)}
.m-req-b .w-b.acc{background:var(--accent);color:#fff}
.m-digits{display:flex;justify-content:center;gap:.6em;margin:1.2em 0 .9em}
.m-digits i{width:2.4em;height:2.9em;display:grid;place-items:center;font:600 1.4em/1 var(--display);font-style:normal;border-radius:.4em;background:var(--accent-tint);color:var(--accent-ink);font-variant-numeric:tabular-nums}
.m-trust{display:flex;align-items:center;gap:.6em;font-size:.9em;color:var(--muted)}
.m-check{width:1.15em;height:1.15em;border-radius:.3em;background:var(--accent);position:relative}
.m-check::after{content:"";position:absolute;left:.36em;top:.16em;width:.3em;height:.6em;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* the API card on the indigo field */
.m-term{width:100%;max-width:36em;background:#15173f;border:1px solid var(--field-line);border-radius:18px;padding:22px 24px;color:var(--field-ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.m-term-h{font:600 1rem/1.2 var(--display);margin-bottom:14px}
.m-term pre{font:500 .875rem/1.6 var(--mono);color:#dfe2ff;white-space:pre-wrap;overflow-wrap:anywhere;padding:14px 16px;background:rgba(255,255,255,.05);border-radius:10px}
.c-p{color:#8f95ff;user-select:none}
.m-ev{list-style:none;margin-top:14px}
.m-ev li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--field-line);font-size:.9375rem}
.m-ev li:last-child{border-bottom:0}
.m-ev code{font:500 .875rem/1.5 var(--mono);color:#c7cbff}
.m-ev span{color:var(--field-dim);text-align:right}
.m-term-f{margin-top:12px;font-size:.875rem;color:var(--field-dim)}
.m-term-f code{font-family:var(--mono);color:#fff}

/* ---------- how to start: a real sequence, joined by the cable ---------- */
.start{background:var(--paper)}
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;position:relative}
.steps::before{content:"";position:absolute;left:28px;right:calc(33.3% - 28px);top:27px;height:3px;background:var(--cable);opacity:.85;border-radius:2px}
.steps li{counter-increment:s;position:relative}
.steps li::before{content:counter(s);display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--paper);border:3px solid var(--cable);font:600 1.375rem/1 var(--display);position:relative;margin-bottom:22px}
.steps li:last-child::before{background:var(--accent);border-color:var(--accent);color:#fff}
.steps p{margin-top:8px;color:var(--muted);max-width:26em}
.get{margin-top:56px;padding:32px;border-radius:22px;background:var(--sheet);border:1px solid var(--line);box-shadow:var(--shadow)}
.plat-p{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.plat-p .fine{max-width:34em}
.plat-p+.plat-p{margin-top:28px}
.plat.js .plat-p+.plat-p{margin-top:0}
.plat.js .plat-p[hidden]{display:none}
.plat.js .plat-p{animation:plat-in .28s var(--ease)}
@keyframes plat-in{from{opacity:0;transform:translateY(4px)}}
.seg{display:none;position:relative;grid-template-columns:1fr 1fr;padding:4px;margin-bottom:24px;border-radius:12px;background:var(--ground);border:1px solid var(--line)}
.plat.js .seg{display:inline-grid}
.seg button{position:relative;z-index:1;width:128px;height:38px;border:0;border-radius:9px;background:none;color:var(--muted);font:600 15px/1 var(--text);cursor:pointer;transition:color .2s var(--ease)}
.seg button[aria-selected="true"]{color:var(--ink)}
.seg-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:9px;background:var(--sheet);box-shadow:0 1px 3px rgba(21,23,46,.14);transition:transform .38s cubic-bezier(.2,.9,.25,1)}
.seg[data-on="linux"] .seg-thumb{transform:translateX(100%)}
.cmd{width:min(100%,720px);padding:15px 20px;border-radius:12px;background:var(--ground);border:1px solid var(--line);margin-bottom:16px}
.cmd code{display:block;font:500 16px/1.45 var(--mono);white-space:normal;overflow-wrap:anywhere;user-select:all}
.cmd-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cmd-row .btn{flex:none;width:200px;padding:0}
.cmd-row .btn.done{background:var(--ok)}

/* ---------- the recorded window + live demo ---------- */
.demo{display:flex;flex-direction:column;gap:14px}
.app-win{border-radius:16px;overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 40px 80px -40px rgba(30,34,110,.5)}
.app-cap{display:flex;align-items:center;gap:8px;height:34px;padding-left:12px;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line)}
.app-cap img{width:16px;height:16px}
.app-cap b{font-weight:600;flex:1}
.app-cap i{width:46px;height:34px}
.app-vid{display:block;width:100%;height:auto;aspect-ratio:1590/900;background:var(--ground)}
.stage{position:relative;overflow:hidden;cursor:pointer;transition:height .45s cubic-bezier(.16,1,.3,1)}
.stage.on{cursor:auto}
.stage .app-vid{transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.stage.on .app-vid{opacity:0;transform:scale(.985)}
.try{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px 0 8px;border:0;border-radius:999px;font:600 16px/1 var(--text);color:#fff;background:rgba(21,23,46,.82);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 10px 30px -12px rgba(20,22,60,.7);cursor:pointer;transition:background-color .15s ease,transform .1s ease-out,opacity .3s ease}
.try-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent)}
.try-ic svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stage:hover .try{background:rgba(21,23,46,.94)}
.try:active{transform:translateX(-50%) scale(.97)}
.stage.on .try{opacity:0;pointer-events:none}
.live{position:absolute;inset:0;opacity:0;transform:scale(1.015);transform-origin:50% 0;transition:opacity .45s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.stage.on .live.ready{opacity:1;transform:none}
.live iframe{position:absolute;left:0;top:0;width:1060px;height:700px;border:0;transform-origin:0 0;background:var(--ground)}
.demo-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.demo-bar[hidden]{display:none}
.demo-bar span{flex:1;font-size:15px;color:var(--dim)}
@media (prefers-reduced-motion:reduce){.stage,.stage .app-vid,.live{transition:opacity .2s ease}.stage.on .app-vid,.live{transform:none}}

/* ---------- trust: two spec sheets ---------- */
.trust-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px)}
.trust-col h3{font:550 1.25rem/1.2 var(--display);margin-bottom:8px}
.rows>div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:24px;padding:16px 0}
.rows dt{font-weight:650}
.rows dd{color:var(--muted)}

/* ---------- pricing: one comparison table ---------- */
.price{background:var(--paper)}
.ptable{border-top:2px solid var(--ink)}
.prow{display:grid;grid-template-columns:minmax(0,3fr) repeat(3,minmax(0,2.4fr))}
.prow>span{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.prow>span:first-child{padding-left:0;color:var(--muted)}
.prow .pro{background:var(--accent-tint)}
.phead>span{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px;padding-block:24px 18px}
.phead b{font:600 1.125rem/1.2 var(--display)}
.phead em{font:600 2rem/1 var(--display);font-style:normal;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.phead em small{font:500 .9375rem/1 var(--text);color:var(--dim);letter-spacing:0}
.pact>span{border-bottom:0;padding-block:20px}
.pact .pro{border-radius:0 0 18px 18px}
.pact .btn{width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.plans-note{margin-top:20px}

/* ---------- FAQ and contact ---------- */
.faq-in,.contact-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.qa{border-top:2px solid var(--ink)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:20px 48px 20px 0;font-weight:650;font-size:1.0625rem;line-height:1.4;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border:solid var(--dim);border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)}
.qa details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.qa summary:hover{color:var(--accent-ink)}
.qa details p{padding:0 48px 22px 0;color:var(--muted);max-width:44em}
.qa code{font:500 .9em var(--mono)}
.contact{background:var(--paper)}
.contact-text .lead{margin-top:16px}
.fb{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fb label{display:flex;flex-direction:column;gap:6px;font-size:.875rem;font-weight:600;color:var(--muted)}
.fb .wide{grid-column:1/-1}
.fb input,.fb textarea{font:400 1rem/1.4 var(--text);color:var(--ink);padding:12px 14px;border-radius:12px;border:1px solid var(--line-strong);background:var(--sheet);resize:vertical}
.fb input:focus,.fb textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.fb .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fb-act{display:flex;align-items:center;gap:16px}
.fb-st{font-size:.9375rem}
.fb-st.ok{color:var(--ok)}.fb-st.err{color:#c23a46}

/* ---------- the close ---------- */
.final{background:var(--field);color:var(--field-ink)}
.final-in{padding-block:clamp(72px,9vw,120px)}
.final h2{font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.06;letter-spacing:-.03em;max-width:17em}
.final p{margin-top:20px;font-size:1.125rem;color:var(--field-dim);max-width:36em}
.final .cta{margin-top:36px}
.final-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px;align-items:center}
.final-art{width:100%;max-width:380px;justify-self:end;overflow:visible}
.final-art .pc-tower{fill:#2c3075;stroke:rgba(255,255,255,.22)}
.final-art .pc-slot{fill:rgba(255,255,255,.14)}
.final-art .pc-pwr{stroke:#9ea3ff}
.final-art .tk-body{fill:#0f1133}
.final-art .tk-ring{stroke:#0f1133}
.final-art .tk-led{fill:#3be38e;filter:drop-shadow(0 0 5px rgba(59,227,142,.9))}
@media (max-width:860px){.final-in{grid-template-columns:1fr}.final-art{display:none}}

/* ---------- footer ---------- */
.foot{padding-block:48px 56px;font-size:.9375rem;color:var(--dim)}
.foot-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 64px}
.foot-brand{display:flex;flex-direction:column;gap:6px}
.foot-brand .brand{margin-bottom:8px}
.foot nav{display:grid;grid-template-columns:repeat(2,auto);gap:8px 32px;align-content:start}
.foot nav a{color:var(--muted);text-decoration:none}
.foot nav a:hover{color:var(--ink);text-decoration:underline}

/* ---------- motion once, on arrival ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .origin{justify-self:start;flex-direction:row-reverse;margin-top:40px;padding:0}
  .origin .place{align-items:flex-start;text-align:left}
  .place.to{margin-top:56px}
  .kind{grid-template-columns:minmax(0,1fr) auto;gap:10px 24px}
  .kind dd:not(.st){grid-column:1/-1;grid-row:2}
  .kind .st{grid-column:2;grid-row:1}
}
@media (max-width:900px){
  .role-in,.role-adm .role-in,.role-off .role-in{grid-template-columns:1fr}
  .role-off .role-art{order:2}
  .role-art{align-items:flex-start}
  .m-req-2{align-self:flex-start;transform:translateX(12%)}
}
@media (max-width:860px){
  .steps{grid-template-columns:1fr;gap:28px}
  .steps::before{left:27px;right:auto;top:28px;bottom:28px;width:3px;height:auto}
  .steps li{padding-left:80px;min-height:56px}
  .steps li::before{position:absolute;left:0;top:0;margin:0}
  .trust-in{grid-template-columns:1fr}
  .faq-in,.contact-in{grid-template-columns:1fr}
  .prow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .prow>span:first-child{grid-column:1/-1;padding:16px 0 4px;border-bottom:0;font-weight:600;color:var(--ink)}
  .phead>span:first-child,.pact>span:first-child{display:none}
  .prow>span{padding:10px 12px}
  .phead>span{padding-block:18px 14px}
  .phead em{font-size:1.5rem}
  .foot-in{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--gut:20px}
  body{font-size:16px}
  .rows>div{grid-template-columns:1fr;gap:4px}
  .fb{grid-template-columns:1fr}
  .cta .btn{flex:1 1 100%;white-space:normal;text-align:center}
  .get{padding:22px}
  .cmd-row .btn,.plat-p .btn{width:100%;white-space:normal;text-align:center;height:auto;min-height:56px;padding-block:12px}
  .kind .st{font-size:.8125rem;padding:4px 10px}
  .prow>span{padding:10px 8px;font-size:.9375rem}
  .phead b{font-size:1rem}
}
/* narrow hero: the window drops its sidebar and stacks the two halves */
@container (max-width:600px){
  .win{font-size:calc(100cqw / 24)}
  .w-tile{width:9.8em}
  .w-side{display:none}
  .w-body{height:auto}
  .w-main{grid-template-columns:1fr;padding:.9em 0}
  .w-main::before{display:none}
  .w-col[data-there]{border-top:1px dashed var(--wc-line);padding-top:1em}
}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.seg-thumb{transition:none}.plat.js .plat-p{animation:none}.scene.flow .cable-pulse{animation:none;opacity:0}}
@media (prefers-contrast:more){:root{--line:rgba(21,23,46,.35)}}
@media (prefers-color-scheme:dark){.win,.app-win{box-shadow:0 0 0 1px var(--line),0 40px 80px -40px rgba(0,0,0,.85)}.btn.acc{box-shadow:none}}