@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Instrument+Serif:ital@0;1&display=swap');
:root { --bg:#0b0d0a; --ink:#f3f5ee; --muted:#9aa194; --line:rgba(243,245,238,.12); --lime:#c8ff3d; --lime-ink:#0b0d0a; --card:rgba(20,23,18,.72);
  --paper:#f6f4ee; --paper-ink:#14170f; --paper-muted:#6a7064; --paper-line:rgba(20,23,15,.14); --moss:#4d8a12; }
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:Geist, system-ui, sans-serif; line-height:1.5; overflow-x:hidden; }
a { color:inherit; }
img, svg { display:block; }
.serif { font-family:"Instrument Serif", serif; font-weight:400; }
.eyebrow { color:var(--lime); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; cursor:pointer; font:500 15px Geist, sans-serif; padding:14px 22px; border-radius:999px;
  background:var(--lime); color:var(--lime-ink); text-decoration:none; transition:transform .2s, box-shadow .2s, background .2s; white-space:nowrap; }
.btn:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(200,255,61,.25); }
.btn.ghost { background:transparent; color:inherit; border-color:var(--line); }
.btn.ghost:hover { box-shadow:none; border-color:currentColor; }
.btn.dark { background:var(--paper-ink); color:var(--paper); }
.btn.block { width:100%; }
.wrap { max-width:1240px; margin:0 auto; padding:0 clamp(20px,5vw,64px); }
:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }

/* ---------- nav ---------- */
.nav { position:fixed; z-index:100; top:0; left:0; right:0; transition:background .3s, border-color .3s; border-bottom:1px solid transparent; }
.nav.solid { background:rgba(11,13,10,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-color:var(--line); }
.nav .wrap { display:flex; align-items:center; gap:28px; height:68px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:500; }
.brand svg { width:30px; height:30px; color:var(--ink); }
.nav ul { display:flex; gap:24px; list-style:none; margin-left:auto; font-size:14px; }
.nav ul a { text-decoration:none; color:var(--muted); transition:color .2s; }
.nav ul a:hover { color:var(--ink); }
.nav .btn { padding:10px 18px; font-size:14px; }
@media (max-width:860px){ .nav ul { display:none; } .nav .btn { margin-left:auto; } }
.brand span { white-space:nowrap; }
@media (max-width:420px){ .nav .wrap { gap:12px; } .brand { font-size:14px; gap:8px; } .nav .btn { padding:9px 14px; font-size:13px; } }

/* ---------- 1. launch ---------- */
.launch { position:relative; }
.launch .stick { position:sticky; top:0; height:100vh; margin-bottom:-100vh; z-index:0; }
.panel { position:relative; z-index:2; height:100vh; min-height:620px; display:grid; grid-template-columns:1fr minmax(240px,32vw) 1fr; align-items:center; padding:0 clamp(20px,5vw,80px); pointer-events:none; }
.panel a, .panel button { pointer-events:auto; }
.panel .l { grid-column:1; }
.panel .r { grid-column:3; justify-self:end; width:min(340px,100%); }
.panel .num { color:var(--muted); font-size:13px; letter-spacing:.14em; font-variant-numeric:tabular-nums; }
.panel h2 { font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(64px,9vw,148px); line-height:.9; letter-spacing:-.03em; margin:14px 0; }
.panel h2 em { font-style:normal; color:var(--c); }
.panel .tag { font-size:clamp(18px,1.6vw,22px); max-width:360px; }
.panel .l > * { opacity:0; transform:translateY(24px); transition:all .7s cubic-bezier(.2,.8,.2,1); }
.panel.in .l > * { opacity:1; transform:none; }
.panel.in .l > *:nth-child(2) { transition-delay:.08s; } .panel.in .l > *:nth-child(3) { transition-delay:.16s; }
.spec { border-top:1px solid var(--line); padding:16px 0; display:flex; gap:14px; align-items:baseline; opacity:0; transform:translateY(14px); transition:all .6s cubic-bezier(.2,.8,.2,1); }
.spec:last-child { border-bottom:1px solid var(--line); }
.spec b { color:var(--c); font-weight:500; font-size:13px; }
.panel.in .spec { opacity:1; transform:none; }
.panel.in .spec:nth-child(2) { transition-delay:.1s; } .panel.in .spec:nth-child(3) { transition-delay:.2s; }
.panel.hero { display:flex; flex-direction:column; justify-content:flex-start; text-align:center; padding-top:clamp(120px,18vh,180px); }
.panel.hero h1 { font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(56px,8vw,128px); line-height:.92; letter-spacing:-.03em; margin:14px 0; }
.panel.hero p { color:var(--muted); font-size:19px; }
.panel.hero .row { display:flex; gap:10px; justify-content:center; margin-top:26px; flex-wrap:wrap; }
.panel.hero .cue { position:absolute; bottom:30px; left:0; right:0; color:var(--muted); font-size:13px; letter-spacing:.14em; text-transform:uppercase; }
.rail { position:fixed; z-index:5; left:50%; bottom:22px; transform:translateX(-50%); display:flex; gap:8px; transition:opacity .3s; opacity:0; pointer-events:none; }
.rail i { width:22px; height:3px; border-radius:2px; background:rgba(243,245,238,.2); transition:all .3s; }
.rail i.on { background:var(--c, var(--lime)); width:40px; }
@media (max-width:820px){
  .panel { grid-template-columns:1fr; grid-template-rows:auto 1fr auto; padding-top:88px; padding-bottom:40px; align-items:start; }
  .panel .l { grid-row:1; } .panel .r { grid-row:3; grid-column:1; justify-self:stretch; width:100%; }
  .panel.hero { align-items:center; padding-top:110px; } .panel.hero h1 { font-size:58px; } .panel.hero p { font-size:16px; }
  .panel h2 { font-size:64px; margin:8px 0; } .panel .tag { font-size:16px; } .spec { padding:10px 0; font-size:14px; }
  .rail { display:none; }
}

/* ---------- 2. org chart (light) ---------- */
.paper { background:var(--paper); color:var(--paper-ink); position:relative; z-index:3; }
.paper .eyebrow { color:var(--moss); }
.paper .btn.ghost { border-color:var(--paper-line); }
.org-head { padding:clamp(100px,14vh,150px) 0 30px; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:end; }
.org-head h2 { font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(50px,6.6vw,104px); line-height:.92; letter-spacing:-.025em; }
.org-head h2 i { color:var(--moss); }
.org-head p { font-size:19px; color:var(--paper-muted); max-width:440px; }
.rule { border-top:1px solid var(--paper-ink); display:flex; justify-content:space-between; padding-top:10px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-muted); }
.chart { position:relative; padding:70px 0 100px; }
.chart .gl { position:absolute; inset:0; pointer-events:none; z-index:3; }
.chart svg { position:absolute; inset:0; width:100%; height:100%; z-index:0; overflow:visible; pointer-events:none; }
.chart svg path { fill:none; stroke:var(--paper-ink); stroke-width:1; stroke-dasharray:1400; stroke-dashoffset:1400; transition:stroke-dashoffset 1.4s cubic-bezier(.6,.1,.2,1); }
.chart.go svg path { stroke-dashoffset:0; }
.lvl { position:relative; z-index:1; display:flex; justify-content:center; gap:clamp(12px,2.2vw,36px); }
.lvl + .lvl { margin-top:70px; }
.node { background:#fff; border:1px solid var(--paper-line); border-radius:18px; padding:16px 18px; text-align:center; opacity:0; transform:translateY(16px); transition:all .6s cubic-bezier(.2,.8,.2,1); }
.chart.go .node { opacity:1; transform:none; }
.node.you { padding:18px 30px; background:var(--paper-ink); color:var(--paper); border:0; }
.node.you small { color:#b9c0b0; }
.node small { display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-muted); }
.node b { font-weight:500; font-size:17px; }
.dept { font-family:"Instrument Serif",serif; font-size:26px; }
.group { display:flex; flex-direction:column; align-items:center; }
.seats { display:flex; gap:12px; margin-top:56px; }
.seat { width:clamp(96px,7.6vw,132px); padding:14px 8px; cursor:pointer; }
.seat .chair { width:72px; height:72px; border-radius:50%; margin:0 auto 10px; border:1.5px dashed rgba(20,23,15,.25); transition:all .5s; }
.seat.filled .chair { border:1.5px solid var(--c); background:color-mix(in srgb, var(--c) 10%, transparent); }
.seat b { font-size:13px; display:block; line-height:1.25; min-height:34px; }
.seat em { display:inline-block; margin-top:8px; font-style:normal; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:rgba(20,23,15,.06); color:var(--paper-muted); transition:all .4s; }
.seat.filled em { background:var(--c); color:#fff; }
.tally { display:flex; gap:48px; flex-wrap:wrap; padding:0 0 110px; font-family:"Instrument Serif",serif; font-size:clamp(34px,3.4vw,48px); line-height:1; }
.tally small { display:block; font-family:Geist,sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-muted); margin-top:8px; }
@media (max-width:1100px){ .org-head { grid-template-columns:1fr; } .lvl.depts { flex-direction:column; align-items:center; gap:60px; } .seats { margin-top:30px; } .chart svg { display:none; } }
@media (max-width:520px){ .seat { width:104px; } .seat .chair { width:64px; height:64px; } .seats { gap:6px; } }

/* ---------- 3. team picker ---------- */
.game { position:relative; height:100vh; min-height:700px; overflow:hidden; --c:#c8ff3d; z-index:3;
  background:radial-gradient(60% 70% at 32% 50%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), #0b0d0a; }
.game::before { content:""; position:absolute; inset:-20%; background:repeating-linear-gradient(115deg, transparent 0 60px, color-mix(in srgb, var(--c) 7%, transparent) 60px 64px); animation:drift 18s linear infinite; pointer-events:none; }
@keyframes drift { to { transform:translateX(128px); } }
.arena { position:absolute; left:0; top:0; bottom:120px; width:60%; }
.g-title { position:absolute; z-index:3; left:clamp(16px,4vw,56px); top:96px; }
.g-title .eyebrow { color:var(--c); }
.g-title h2 { font-weight:600; font-size:clamp(22px,2.4vw,32px); letter-spacing:.01em; text-transform:uppercase; margin-top:6px; }
.g-title p { color:var(--muted); font-size:14px; margin-top:4px; }
.team { position:absolute; z-index:3; left:clamp(16px,4vw,56px); top:200px; display:flex; gap:8px; align-items:center; }
.team span { font-size:12px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; margin-right:6px; }
.team i { width:42px; height:42px; border-radius:12px; border:1px dashed rgba(243,245,238,.25); display:grid; place-items:center; font-style:normal; font-weight:600; color:#0b0d0a; transition:transform .3s cubic-bezier(.3,1.6,.5,1); }
.team i.on { border:0; background:var(--tc); transform:rotate(-4deg) scale(1.05); box-shadow:0 0 18px var(--tc); }
.g-panel { position:absolute; z-index:3; right:clamp(16px,4vw,64px); top:50%; transform:translateY(-55%); width:min(420px,38vw); }
.cls { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--c); }
.gname { font-weight:600; font-size:clamp(56px,7vw,108px); line-height:.9; letter-spacing:-.03em; text-transform:uppercase; font-style:italic; margin:6px 0 4px;
  background:linear-gradient(180deg, #fff 40%, color-mix(in srgb, var(--c) 70%, #fff)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gname.pop { animation:pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { from { transform:translateX(30px) skewX(-8deg); opacity:0; } }
.grole { color:var(--muted); font-size:16px; margin-bottom:22px; }
.stat { display:grid; grid-template-columns:120px 1fr 26px; align-items:center; gap:12px; margin:10px 0; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.bar { height:10px; border-radius:2px; overflow:hidden; display:grid; grid-template-columns:repeat(10,1fr); gap:2px; }
.bar b { background:var(--c); opacity:.15; transition:opacity .25s; }
.bar b.on { opacity:1; box-shadow:0 0 8px var(--c); }
.stat em { font-style:normal; color:var(--ink); text-align:right; }
.special { margin-top:20px; padding:14px 16px; border-radius:14px; border:1px solid color-mix(in srgb, var(--c) 40%, transparent); background:color-mix(in srgb, var(--c) 8%, transparent); }
.special small { display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--c); }
.g-actions { display:flex; gap:10px; margin-top:20px; }
.g-actions .pick { background:var(--c); }
.roster { position:absolute; z-index:3; left:0; right:0; bottom:0; height:120px; display:flex; justify-content:center; align-items:center; gap:10px; padding:0 16px; background:linear-gradient(transparent, rgba(0,0,0,.6)); overflow-x:auto; scrollbar-width:none; }
.tile { flex:none; width:84px; height:84px; border-radius:16px; border:1px solid var(--line); background:rgba(20,23,18,.8); cursor:pointer; position:relative; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font:11px Geist,sans-serif; transition:all .2s; transform:skewX(-6deg); }
.tile > * { transform:skewX(6deg); }
.tile .dot { width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff, var(--tc) 60%); box-shadow:0 0 12px var(--tc); }
.tile:hover { border-color:var(--tc); color:var(--ink); }
.tile.sel { border:2px solid var(--tc); color:var(--ink); transform:skewX(-6deg) translateY(-8px); box-shadow:0 10px 30px color-mix(in srgb, var(--tc) 35%, transparent); }
.tile.got::after { content:"\2713"; position:absolute; top:6px; right:8px; color:var(--tc); font-size:12px; transform:skewX(6deg); }
.done { position:absolute; z-index:6; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.66); opacity:0; pointer-events:none; transition:opacity .4s; text-align:center; padding:16px; }
.done.on { opacity:1; pointer-events:auto; }
.done h3 { font-weight:600; font-style:italic; text-transform:uppercase; font-size:clamp(46px,8vw,120px); line-height:.9; letter-spacing:-.03em; }
.done p { color:var(--muted); font-size:18px; margin:14px auto 24px; max-width:560px; }
.done .row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
@media (max-width:860px){
  .arena { width:100%; bottom:auto; height:40vh; top:120px; }
  .g-title { top:80px; } .g-title p { display:none; }
  .g-panel { left:16px; right:16px; width:auto; top:auto; bottom:128px; transform:none; }
  .gname { font-size:46px; } .grole { margin-bottom:8px; font-size:14px; } .stat { margin:5px 0; grid-template-columns:96px 1fr 22px; font-size:11px; }
  .special, .team { display:none; }
  .roster { justify-content:flex-start; } .tile { width:70px; height:70px; }
}

/* ---------- 4. savings (light) ---------- */
.sec-head { padding:clamp(100px,13vh,140px) 0 40px; max-width:760px; }
.sec-head h2 { font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(46px,5.6vw,84px); line-height:.95; letter-spacing:-.02em; margin:14px 0 16px; }
.sec-head p { font-size:18px; color:var(--paper-muted); }
.dark .sec-head p { color:var(--muted); }
.sav { display:grid; grid-template-columns:1.1fr 1fr; gap:20px; padding-bottom:120px; }
.box { background:#fff; border:1px solid var(--paper-line); border-radius:24px; padding:28px; }
.box legend, .box .lab { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-muted); margin-bottom:12px; }
.box fieldset { border:0; margin-bottom:26px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip input { position:absolute; opacity:0; pointer-events:none; }
.chip span { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; border:1px solid var(--paper-line); font-size:14px; cursor:pointer; transition:all .2s; user-select:none; }
.chip span::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--c, #999); opacity:.35; transition:opacity .2s; }
.chip input:checked + span { background:var(--paper-ink); color:var(--paper); border-color:var(--paper-ink); }
.chip input:checked + span::before { opacity:1; }
.chip input:focus-visible + span { outline:2px solid var(--moss); outline-offset:2px; }
.seg { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.seg span { display:block; text-align:center; padding:12px 8px; border-radius:14px; border:1px solid var(--paper-line); cursor:pointer; font-size:14px; transition:all .2s; }
.seg small { display:block; font-size:12px; color:var(--paper-muted); }
.seg input:checked + span { background:var(--paper-ink); color:var(--paper); border-color:var(--paper-ink); }
.seg input:checked + span small { color:#b9c0b0; }
.seg label { position:relative; } .seg input { position:absolute; opacity:0; }
.rng { display:block; margin-top:20px; }
.rng .row { display:flex; justify-content:space-between; font-size:14px; margin-bottom:10px; }
.rng output { font-weight:500; }
input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; background:linear-gradient(90deg, var(--paper-ink) var(--fill,50%), rgba(20,23,15,.12) var(--fill,50%)); outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--paper-ink); border:4px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.25); cursor:pointer; }
input[type=range]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--paper-ink); border:3px solid #fff; cursor:pointer; }
.res { background:var(--paper-ink); color:var(--paper); border-color:var(--paper-ink); display:flex; flex-direction:column; gap:18px; }
.res .ppl { display:flex; justify-content:space-between; font-size:15px; color:#b9c0b0; }
.res .ppl b { color:var(--paper); font-weight:500; }
.bars { display:grid; gap:14px; }
.brow { display:grid; grid-template-columns:110px 1fr auto; gap:12px; align-items:center; font-size:14px; }
.brow .tr { height:12px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.brow .tr i { display:block; height:100%; border-radius:6px; background:#ff6b5a; transition:width .5s cubic-bezier(.2,.8,.2,1); }
.brow.ai .tr i { background:var(--lime); }
.keep { border-top:1px solid rgba(255,255,255,.12); padding-top:18px; }
.keep span { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#b9c0b0; }
.keep strong { display:block; font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(54px,6vw,84px); line-height:1; color:var(--lime); margin:6px 0; }
.keep small { color:#b9c0b0; }
.fine { font-size:12px; color:#8d9486; }
@media (max-width:900px){ .sav { grid-template-columns:1fr; } }

/* ---------- 5. faq ---------- */
.faq { display:grid; grid-template-columns:1fr 1.3fr; gap:40px; padding-bottom:120px; }
.faq .sec-head { padding-bottom:0; }
.faq details { border-top:1px solid var(--line); padding:20px 0; }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; list-style:none; font-size:18px; font-weight:500; display:flex; justify-content:space-between; gap:20px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--lime); font-size:24px; line-height:1; transition:transform .3s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { color:var(--muted); margin-top:10px; max-width:600px; }
@media (max-width:900px){ .faq { grid-template-columns:1fr; } }

/* ---------- 6. hire form ---------- */
.hire { position:relative; z-index:3; padding:clamp(100px,13vh,140px) 0 120px; background:radial-gradient(60% 60% at 80% 30%, rgba(200,255,61,.08), transparent 70%), var(--bg); border-top:1px solid var(--line); }
.hire .wrap { display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:start; }
.hire h2 { font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(50px,6vw,92px); line-height:.92; letter-spacing:-.02em; margin:14px 0 18px; }
.hire h2 i { color:var(--lime); }
.hire .lede { color:var(--muted); font-size:18px; max-width:480px; }
.ticks { list-style:none; margin-top:26px; display:grid; gap:12px; }
.ticks li { display:flex; gap:10px; }
.ticks li::before { content:"\2713"; color:var(--lime); }
.picked { margin-top:26px; padding:16px 18px; border-radius:16px; border:1px dashed var(--line); font-size:14px; color:var(--muted); }
.picked b { color:var(--ink); font-weight:500; }
.form { background:#141712; border:1px solid var(--line); border-radius:24px; padding:28px; display:grid; gap:16px; }
.form .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form label > span { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.form label em { font-style:normal; color:#6f766a; }
.form input:not([type=checkbox]), .form textarea { width:100%; background:#0b0d0a; border:1px solid var(--line); border-radius:12px; padding:13px 14px; color:var(--ink); font:15px Geist,sans-serif; outline:none; transition:border-color .2s; }
.form input:focus, .form textarea:focus { border-color:var(--lime); }
.form [aria-invalid=true] { border-color:#ff6b6b !important; }
.form fieldset { border:0; }
.form legend { font-size:13px; color:var(--muted); margin-bottom:10px; }
.form .chip span { border-color:var(--line); }
.form .chip input:checked + span { background:var(--lime); color:var(--lime-ink); border-color:var(--lime); }
.msg { font-size:14px; min-height:20px; }
.msg.ok { color:var(--lime); } .msg.err { color:#ff8a8a; }
@media (max-width:900px){ .hire .wrap { grid-template-columns:1fr; } .form .grid2 { grid-template-columns:1fr; } }

/* ---------- footer ---------- */
.foot { border-top:1px solid var(--line); padding:40px 0 60px; color:var(--muted); font-size:13px; position:relative; z-index:3; background:var(--bg); }
.foot .wrap { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot b { color:var(--ink); font-weight:500; }

.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior:auto; } .reveal { opacity:1; transform:none; } }

/* ---------- 1. HERO org chart (dark) ---------- */
.ohero { position:relative; z-index:3; min-height:100vh; padding:clamp(88px,11vh,120px) 0 48px; overflow:hidden;
  background:radial-gradient(70% 55% at 50% 0%, rgba(200,255,61,.10), transparent 70%), radial-gradient(50% 50% at 50% 75%, rgba(143,123,255,.07), transparent 70%), var(--bg); }
.ohero-bg { position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(rgba(243,245,238,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(243,245,238,.045) 1px, transparent 1px);
  background-size:56px 56px; -webkit-mask-image:radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 80%); mask-image:radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 80%); }
.oh-head { position:relative; text-align:center; max-width:1000px; margin:0 auto; }
.oh-head .eyebrow { display:inline-flex; align-items:center; gap:8px; }
.livedot { width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 12px var(--lime); animation:blinky 1.6s infinite; }
@keyframes blinky { 50% { opacity:.3; } }
.oh-head h1 { font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(42px,min(5vw,8.2vh),84px); line-height:.94; letter-spacing:-.025em; margin:12px 0 12px; }
.oh-head h1 i { font-style:italic; background:linear-gradient(90deg, #c8ff3d, #22e6b8 50%, #8f7bff); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.06em; }
.oh-head p { color:var(--muted); font-size:18px; }
.oh-head .row { display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
.ochart { position:relative; margin-top:clamp(28px,4.5vh,56px); }
.ochart .gl { position:absolute; inset:-40px 0; pointer-events:none; z-index:3; }
.ochart svg { position:absolute; inset:0; width:100%; height:100%; z-index:0; overflow:visible; pointer-events:none; }
.ochart svg .ln { fill:none; stroke-width:1.4; stroke-linecap:round; stroke-dasharray:1600; stroke-dashoffset:1600; transition:stroke-dashoffset 1.5s cubic-bezier(.6,.1,.2,1); opacity:.55; }
.ochart.go svg .ln { stroke-dashoffset:0; }
.ochart svg .px { fill:none; stroke-width:2.4; stroke-linecap:round; stroke-dasharray:10 600; opacity:0; filter:drop-shadow(0 0 4px currentColor); }
.ochart.live svg .px { opacity:1; animation:flow 3.2s linear infinite; }
@keyframes flow { from { stroke-dashoffset:610; } to { stroke-dashoffset:0; } }
.olvl { position:relative; z-index:1; display:flex; justify-content:center; gap:clamp(14px,2.4vw,40px); }
.olvl + .olvl { margin-top:clamp(30px,5vh,52px); }
.onode { position:relative; text-align:center; border-radius:18px; padding:12px 20px; background:rgba(20,23,18,.75); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line); opacity:0; transform:translateY(16px); transition:opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.ochart.go .onode { opacity:1; transform:none; }
.onode small { display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.onode b { font-weight:500; font-size:17px; }
.onode.you { background:var(--lime); color:var(--lime-ink); border:0; padding:12px 34px; box-shadow:0 0 0 6px rgba(200,255,61,.08), 0 10px 40px rgba(200,255,61,.25); }
.onode.you small { color:rgba(11,13,10,.6); }
.onode.you .pulse { position:absolute; inset:-6px; border-radius:22px; border:1px solid var(--lime); animation:ring 2.4s infinite; pointer-events:none; }
@keyframes ring { from { opacity:.7; transform:scale(1); } to { opacity:0; transform:scale(1.25,1.6); } }
.odept { font-family:"Instrument Serif",serif; font-size:23px; }
.ogroup { display:flex; flex-direction:column; align-items:center; }
.ogroup .dept-node { border-color:color-mix(in srgb, var(--g) 45%, transparent); }
.ogroup .dept-node small { color:var(--g); }
.oseats { display:flex; gap:12px; margin-top:clamp(26px,4.2vh,44px); }
.oseat { width:clamp(100px,7.8vw,132px); padding:12px 8px 12px; cursor:pointer; overflow:hidden; }
.oseat::before { content:""; position:absolute; inset:auto -30% -55% -30%; height:90%; background:radial-gradient(closest-side, var(--c), transparent); opacity:0; transition:opacity .5s; pointer-events:none; }
.oseat.filled::before { opacity:.16; }
.ochart.go .oseat:hover { border-color:var(--c); transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.oseat:focus-visible { outline:2px solid var(--c); outline-offset:3px; }
.oseat .chair { position:relative; width:70px; height:70px; border-radius:50%; margin:2px auto 10px; border:1.5px dashed rgba(243,245,238,.18); transition:all .5s; }
.oseat.filled .chair { border:1.5px solid color-mix(in srgb, var(--c) 70%, transparent); box-shadow:0 0 22px color-mix(in srgb, var(--c) 35%, transparent), inset 0 0 18px color-mix(in srgb, var(--c) 20%, transparent); }
.oseat b { position:relative; display:block; font-size:12.5px; line-height:1.25; min-height:32px; }
.oseat em { position:relative; display:inline-block; margin-top:8px; font-style:normal; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:999px;
  background:rgba(243,245,238,.06); color:var(--muted); transition:all .4s; }
.oseat.filled em { background:var(--c); color:#0b0d0a; font-weight:600; }
.oseat .go { position:absolute; left:0; right:0; bottom:-30px; font-size:11px; color:var(--c); transition:bottom .25s; }
.oseat:hover .go { bottom:6px; }
.oseat:hover em { opacity:0; }
.otally { position:relative; display:flex; justify-content:center; gap:clamp(30px,6vw,80px); margin-top:clamp(36px,6vh,56px); font-family:"Instrument Serif",serif; font-size:clamp(30px,3vw,44px); line-height:1; text-align:center; }
.otally b { font-weight:400; color:var(--lime); }
.otally small { display:block; font-family:Geist,sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
@media (max-width:1100px){
  .olvl.depts { flex-direction:column; align-items:center; gap:36px; } .oseats { margin-top:22px; } .ochart svg { display:none; }
  .olvl + .olvl { margin-top:32px; }
}
@media (max-width:520px){ .oseat { width:31vw; } .oseat .chair { width:60px; height:60px; } .oseats { gap:6px; } .oh-head p { font-size:16px; } }