/* Utenx: a scroll-driven assembly, with progressive enhancement. */
:root { --coral:#ff5a3c; --bone:#f4f2ed; --ink:#0b0d11; }
body { overflow-x:clip; }
html { scroll-padding-top:90px; }
.topbar { position:fixed; width:100%; height:76px; padding:0 4vw; background:rgba(9,11,13,.9); color:var(--bone); border-bottom:1px solid #ffffff20; backdrop-filter:blur(16px); }
.topbar-mark rect[fill="#0B0D11"] { fill:var(--bone); }
.topbar-name { font-size:24px; }
.topbar-nav { gap:32px; }
.topbar-nav a:last-child { padding:10px 15px; border:1px solid #ffffff40; }
.assembly { height:280svh; position:relative; background:#090b0d; color:var(--bone); }
.assembly.static-assembly { min-height:640px; }
.static-assembly .scroll-track::after { animation:none; }
.assembly-stage { height:100svh; position:sticky; top:0; overflow:hidden; min-height:600px; }
.assembly-media { position:absolute; inset:0; width:100%; height:100%; }
.assembly-poster { width:100%; height:100%; object-fit:contain; }
#assembly-canvas { position:absolute; inset:0; width:100%; height:100%; }
.assembly-shade { position:absolute; inset:0; background:linear-gradient(90deg,#090b0d88,transparent 60%),linear-gradient(0deg,#090b0d 0%,transparent 26%); pointer-events:none; }
.assembly-copy { position:absolute; left:4vw; top:50%; transform:translateY(-50%); width:49%; max-width:710px; }
.assembly .eyebrow { color:#b6b8bb; font-size:10px; letter-spacing:.16em; margin-bottom:30px; }
.assembly h1 { font-size:clamp(52px,6.7vw,108px); line-height:.99; letter-spacing:-.068em; font-weight:500; margin-bottom:30px; }
.assembly h1 span { display:block; color:#8e9398; }
.assembly .sub { color:#a8adb2; font-size:clamp(15px,1.3vw,19px); max-width:40ch; line-height:1.6; margin-bottom:30px; }
.assembly .cta-row { display:flex; gap:12px; flex-wrap:wrap; }
.assembly .cta { font-size:10px; padding:15px 19px; }
.assembly .primary { background:var(--coral); border-color:var(--coral); color:var(--ink); }
.assembly .primary:hover { background:#ff795e; }
.assembly .ghost { border-color:#ffffff38; color:var(--bone); }
.assembly .ghost:hover { background:var(--bone); color:var(--ink); }
.assembly-status { position:absolute; top:106px; right:4vw; font:10px 'JetBrains Mono',monospace; color:#a7a9ac; display:flex; gap:10px; letter-spacing:.12em; }
.status-dot { width:6px; height:6px; background:var(--coral); margin-top:4px; box-shadow:0 0 10px #ff5a3c88; }
.assembly-footer { position:absolute; left:4vw; right:4vw; bottom:35px; border-top:1px solid #ffffff30; padding-top:20px; display:grid; grid-template-columns:1fr 1fr auto; gap:24px; align-items:start; }
.assembly-instruction,.assembly-count,.assembly-phase { font:10px 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
.assembly-instruction { color:#a5a9ae; display:flex; gap:15px; align-items:center; }
.scroll-track { width:1px; height:30px; background:#ffffff24; position:relative; }
.scroll-track::after { content:''; display:block; height:12px; width:1px; background:var(--coral); animation:track 2s ease-in-out infinite; }
@keyframes track { 0%,100%{transform:translateY(0)} 50%{transform:translateY(18px)} }
.assembly-phase { display:flex; gap:30px; color:#70767d; }
.assembly-phase .active { color:var(--bone); }
.assembly-count { color:var(--coral); min-width:50px; text-align:right; }
.assembly-progress { position:absolute; bottom:0; left:0; height:2px; width:100%; background:var(--coral); transform:scaleX(var(--assembly-progress,0)); transform-origin:left; }
.section.wrap { padding:100px 4vw; max-width:1440px; }
.section h2 { font-size:clamp(40px,5.4vw,80px); font-weight:500; letter-spacing:-.06em; line-height:1.03; max-width:18ch; }
.section p.lede { font-size:22px; max-width:65ch; color:#555a60; }
.eyebrow { font-size:10px; }
.two-col { gap:8vw; }
.system-section { background:#101316; color:var(--bone); padding:100px 4vw; }
.system-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:7vw; max-width:1320px; margin:auto; align-items:center; }
.system-section .eyebrow { color:#a6adb3; }
.system-section h2 { font-size:clamp(40px,5vw,76px); font-weight:500; letter-spacing:-.055em; line-height:1.03; margin-bottom:25px; }
.system-section h2 span { color:var(--coral); }
.system-section p { color:#a6adb3; font-size:17px; max-width:45ch; }
.system-board { position:relative; min-height:430px; border:1px solid #ffffff20; background:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px); background-size:32px 32px; }
.system-board svg { position:absolute; width:100%; height:100%; inset:0; pointer-events:none; }
.system-path { stroke:#ff5a3c44; fill:none; stroke-width:1; }
.system-path.selected { stroke:var(--coral); stroke-width:2; }
.signal { stroke:var(--coral); stroke-width:2; stroke-dasharray:4 170; animation:signal 4s linear infinite; }
@keyframes signal { to { stroke-dashoffset:-348; } }
.system-core { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:58px; height:58px; background:var(--coral); display:grid; place-items:center; font:22px 'JetBrains Mono',monospace; color:#0b0d11; box-shadow:0 0 50px #ff5a3c25; }
.system-node { position:absolute; background:#181c20; color:#c2c7ca; border:1px solid #ffffff26; font:10px 'JetBrains Mono',monospace; padding:14px 13px; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; transform:translate(-50%,-50%); transition:border-color .2s,color .2s; white-space:nowrap; }
.system-node:hover,.system-node[aria-pressed="true"] { border-color:var(--coral); color:var(--bone); }
.system-node:nth-of-type(1){left:24%;top:20%}.system-node:nth-of-type(2){left:76%;top:20%}.system-node:nth-of-type(3){left:24%;top:80%}.system-node:nth-of-type(4){left:76%;top:80%}.system-node:nth-of-type(5){left:50%;top:94%}
.system-detail { border-top:1px solid #ffffff20; padding-top:20px; margin-top:28px; min-height:114px; }
.system-detail h3 { color:var(--bone); font-size:21px; font-weight:500; margin-bottom:9px; }
.system-detail p { margin:0; font-size:15px; }
.system-note { margin-top:14px; font:9px 'JetBrains Mono',monospace!important; color:#848e96!important; letter-spacing:.1em; text-transform:uppercase; }
.domain-grid { border-color:#babbb7; }
.domain-cell { border-color:#babbb7; padding:32px 22px; }
.domain-cell h3 { font-weight:500; font-size:27px; letter-spacing:-.04em; }
.domain-cell .domain-label { color:#6c7177; font-size:9px; }
.hw-grid .domain-label,.hw-grid .domain-meta { color:#a9afb5!important; }
.hw-grid .domain-cell { min-height:200px; }
.hw-grid .domain-cell h3 { font-size:23px; }
.step-num { font-weight:500; color:#7b7c76; }
.step h3 { font-weight:500; }
.hw-ladder .ladder-line { transform:scaleX(1); }
.eng-row { transition:background .2s; }
.eng-row:not(.head):hover { background:#e8e5dc; }
.quote-block { padding:45px; }
.quote-block p { font-weight:400; letter-spacing:-.03em; }
footer h4,footer .brand-block p,footer .foot-meta { color:#9da3aa; }
.cal-inline { min-height:400px; }
.cal-fab { background:#ff5a3c; color:#0b0d11; border:0; }
.cal-fab-arrow { color:#0b0d11; }
.assembly-visible .cal-fab { opacity:0; pointer-events:none; }
.reveal { opacity:1; }
.motion-ready .reveal { opacity:0; transform:translateY(20px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1); }
.motion-ready .reveal.visible { opacity:1; transform:none; }
:focus-visible { outline:2px solid var(--coral); outline-offset:5px; }
.motion-toggle { position:absolute; right:4vw; bottom:105px; background:transparent; color:#a7adb2; border:1px solid #ffffff28; padding:9px 12px; font:9px 'JetBrains Mono',monospace; cursor:pointer; }
.topbar + .hero:not(.hero-galaxy) { margin-top:76px; }
@media(max-width:1000px){
 .assembly-copy{width:52%}.assembly h1{font-size:7.2vw}.assembly-phase{gap:15px}.system-layout{gap:35px}.system-node{font-size:9px;padding:12px 9px}.section.wrap{padding:75px 5vw}.system-section{padding:75px 5vw}.domain-cell h3{font-size:26px}
}
@media(max-width:720px){
 .topbar{height:64px;padding:0 20px}.topbar-left{gap:10px}.topbar-name{font-size:20px}.topbar-nav{gap:15px}.topbar-nav a:last-child{border:0;padding:8px 0}.assembly{height:230svh}.assembly-stage{min-height:640px}.assembly-copy{top:115px;left:22px;right:22px;transform:none;width:auto}.assembly h1{font-size:clamp(43px,11.5vw,74px);margin-bottom:17px}.assembly .eyebrow{font-size:8px;margin-bottom:19px;letter-spacing:.09em}.assembly .sub{font-size:14px;max-width:32ch;margin-bottom:19px}.assembly .cta{padding:12px 13px;font-size:8px}.assembly-status{display:none}.assembly-media{top:285px;height:calc(100% - 335px)}.assembly-shade{background:linear-gradient(0deg,#090b0d 0%,transparent 23%)}.assembly-footer{left:22px;right:22px;bottom:22px;grid-template-columns:1fr auto;gap:12px;padding-top:14px}.assembly-phase{display:none}.assembly-instruction{font-size:8px}.assembly-count{font-size:9px}.motion-toggle{bottom:82px;right:22px;font-size:8px;padding:7px}.system-layout{grid-template-columns:1fr;gap:35px}.system-board{min-height:350px}.system-section h2{font-size:47px}.system-detail{min-height:105px}.section.wrap{padding:65px 22px}.section p.lede{font-size:19px}.two-col{gap:18px;margin-top:25px}.domain-grid{margin-top:30px}.domain-cell{min-height:170px}.section h2{font-size:44px}.hw-ladder{margin-top:25px}.ladder-head,.modes-head{margin-top:50px}.sec-spec{display:block;overflow-x:auto}.sec-spec td{min-width:100px}.sec-spec td:last-child{min-width:240px}.quote-block{padding:28px}.cal-fab{bottom:14px;right:14px}.system-node:nth-of-type(1){left:23%}.system-node:nth-of-type(2){left:77%}.system-node:nth-of-type(3){left:23%}.system-node:nth-of-type(4){left:77%}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.assembly{height:100svh;min-height:640px}.assembly-stage{position:relative}.scroll-track::after,.signal{animation:none}.motion-ready .reveal{opacity:1;transform:none}.assembly-progress{display:none}
}
@media(max-width:720px){.assembly-media{top:380px;height:calc(100% - 430px)}}