@font-face{font-family:"Departure Mono";src:url(fonts/DepartureMono-Regular.woff2) format("woff2");font-display:swap}
:root{
  --ink:#06070b;--ink2:#0b0d14;--ink3:#12151f;--line:rgba(233,230,220,.09);--line2:rgba(233,230,220,.18);
  --bone:#e9e6dc;--mute:#8b8f9d;--dim:#5a5e6b;
  --iris:#ffb020;--iris2:#ff6a1a;
  --c-deals:#ffb020;--c-saas:#35d6ff;--c-weather:#4d7cff;--c-media:#ff4fa3;--c-services:#b6ff3a;--c-bots:#a071ff;--c-income:#ffd86b;--c-bench:#8a8f9c;--c-dead:#3f4350;
  --mono:"Departure Mono",ui-monospace,Menlo,monospace;--disp:"Unbounded",sans-serif;--body:"IBM Plex Sans",system-ui,sans-serif;
  --gut:clamp(16px,4vw,64px);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--bone);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
  radial-gradient(1200px 700px at 72% 38%,rgba(255,176,32,.07),transparent 60%),
  radial-gradient(900px 600px at 10% 90%,rgba(53,214,255,.05),transparent 60%),var(--ink)}
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:50;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.6s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,-1%)}100%{transform:translate(2%,2%)}}
a{color:inherit;text-decoration:none}
.eyebrow{font:11px/1 var(--mono);letter-spacing:.16em;color:var(--mute);margin:0 0 14px}
kbd{font:11px var(--mono);border:1px solid var(--line2);border-radius:4px;padding:1px 5px;color:var(--bone)}

/* top */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:28px;padding:14px var(--gut);
  background:linear-gradient(var(--ink) 60%,rgba(6,7,11,0));backdrop-filter:blur(6px)}
.wordmark{display:flex;align-items:center;gap:10px}
.mark{width:18px;height:18px;border-radius:50%;border:2px solid var(--c-saas);position:relative;box-shadow:0 0 14px rgba(53,214,255,.35)}
.mark::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--iris);box-shadow:0 0 10px var(--iris)}
.wm{font:800 15px/1 var(--disp);letter-spacing:.08em}.wm em{font-style:normal;font-weight:300;color:var(--mute)}
.wm.small{font-size:12px}
.nav{display:flex;gap:22px;font:11px var(--mono);letter-spacing:.14em;color:var(--mute);margin-left:auto}
.nav a:hover{color:var(--bone)}
.chip{font:11px var(--mono);letter-spacing:.08em;color:var(--mute);border:1px solid var(--line2);border-radius:999px;padding:6px 11px;background:rgba(12,13,20,.6)}
.chip i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c-services);margin-right:7px;box-shadow:0 0 8px var(--c-services);vertical-align:1px;animation:blink 2.4s infinite}
@keyframes blink{50%{opacity:.35}}

/* hero */
.optic{display:grid;grid-template-columns:minmax(300px,34fr) 66fr;gap:24px;min-height:calc(100vh - 56px);padding:12px var(--gut) 40px;align-items:center}
.copy{position:relative;z-index:3;max-width:480px}
h1{font:800 clamp(40px,4.6vw,66px)/1.0 var(--disp);letter-spacing:-.02em;margin:0 0 22px}
h1 span{color:var(--iris);text-shadow:0 0 30px rgba(255,176,32,.35)}
.lede{color:var(--mute);font-size:17px;max-width:40ch;margin:0 0 26px}.lede b{color:var(--bone);font-weight:500}
.legend{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:8px 14px}
.legend li{font:11px var(--mono);letter-spacing:.1em;color:var(--mute);display:flex;align-items:center;gap:7px;cursor:pointer;transition:color .2s}
.legend li:hover,.legend li.on{color:var(--bone)}
.legend i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.legend small{color:var(--dim);letter-spacing:0}
.hint{font:11px var(--mono);color:var(--dim);letter-spacing:.06em;margin:0}

.stage{position:relative;aspect-ratio:1;max-height:calc(100vh - 90px);width:100%;justify-self:end}
#optic-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.iris-read{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px;
  width:var(--pupil,160px)}
.ir-eyebrow{font:9px var(--mono);letter-spacing:.2em;color:rgba(255,216,107,.75)}
.ir-num{font:800 clamp(28px,calc(var(--pupil,160px)*.34),64px)/1 var(--disp);letter-spacing:-.03em;color:#fff;text-shadow:0 0 24px rgba(255,176,32,.7),0 0 60px rgba(255,106,26,.45)}
.iris-read.small .ir-sub{display:none}.iris-read.small .ir-eyebrow{font-size:8px;letter-spacing:.12em}
.ir-feed{font:8px var(--mono);letter-spacing:.14em;color:var(--dim);white-space:nowrap;margin-top:2px}.ir-feed.live{color:var(--c-services)}.ir-feed.off{color:#ff6b6b}
.iris-read.small .ir-feed{display:none}
.ir-sub{font:9px var(--mono);letter-spacing:.12em;color:rgba(233,230,220,.55);white-space:nowrap}

.card{position:absolute;z-index:5;width:min(300px,calc(100% - 24px));padding:16px 18px 14px;border-radius:14px;
  background:linear-gradient(160deg,rgba(18,21,31,.92),rgba(10,12,19,.92));border:1px solid var(--line2);backdrop-filter:blur(14px);
  box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);pointer-events:auto;
  animation:pop .18s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}}
.card[hidden]{display:none}
.card-x{position:absolute;right:8px;top:6px;background:none;border:0;color:var(--mute);font:18px/1 var(--body);cursor:pointer}
.c-lane{font:10px var(--mono);letter-spacing:.16em;color:var(--c);text-shadow:0 0 10px var(--c)}
.card h3{font:500 17px/1.2 var(--disp);margin:6px 0 8px;letter-spacing:-.01em}
.card p{margin:0 0 10px;color:var(--mute);font-size:13.5px;line-height:1.45}
.card dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:0 0 10px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.card dt{font:9px var(--mono);letter-spacing:.16em;color:var(--dim)}.card dd{margin:2px 0 0;font:12.5px var(--mono);color:var(--bone)}
.c-gate{font-size:12.5px!important}.c-gate b{color:var(--bone);font-weight:500}
.c-dom{font:11px var(--mono)!important;color:var(--c-saas)!important;margin:0!important;word-break:break-all}
.tag{display:inline-block;font:9px var(--mono);letter-spacing:.14em;padding:3px 7px;border-radius:4px;border:1px solid}
.tag.FOCUS{color:var(--iris);border-color:rgba(255,176,32,.6);background:rgba(255,176,32,.1)}
.tag.SHIP{color:var(--c-services);border-color:rgba(182,255,58,.5)}
.tag.INCOME{color:var(--c-income);border-color:rgba(255,216,107,.5)}
.tag.HOLD{color:var(--c-saas);border-color:rgba(53,214,255,.4)}
.tag.PARK{color:var(--mute);border-color:var(--line2)}
.tag.KILL{color:#ff6b6b;border-color:rgba(255,107,107,.5)}

/* strip */
.strip{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 var(--gut)}
.strip > div{padding:22px 18px 20px;border-right:1px solid var(--line);position:relative;overflow:hidden}
.strip > div:last-child{border-right:0}
.strip .k{font:10px var(--mono);letter-spacing:.16em;color:var(--mute);display:block;margin-bottom:10px}
.strip .v{font:500 clamp(26px,2.6vw,38px)/1 var(--disp);letter-spacing:-.02em;display:block}
.strip .v small{font:11px var(--mono);color:var(--dim);letter-spacing:.08em;margin-left:6px}
.strip .s{font:11px var(--mono);color:var(--dim);display:block;margin-top:8px;letter-spacing:.04em}
.strip .v.gold{color:var(--iris)}.strip .v.lime{color:var(--c-services)}
.strip > div::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--c,var(--iris));transition:width .6s ease}
.strip > div.in::after{width:100%}

/* lanes */
section.lanes,section.gates,section.rule{padding:84px var(--gut) 20px}
.sec-head{max-width:720px;margin-bottom:38px}
h2{font:500 clamp(26px,3vw,40px)/1.1 var(--disp);letter-spacing:-.02em;margin:0 0 12px}
.sub{color:var(--mute);margin:0;font-size:16px}
.lane{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;padding:22px 0;border-top:1px solid var(--line);position:relative}
.lane:last-child{border-bottom:1px solid var(--line)}
.lane .lh{font:11px var(--mono);letter-spacing:.16em;color:var(--c)}
.lane .lh small{display:block;color:var(--dim);margin-top:5px;letter-spacing:.06em}
.pipe{position:relative;display:flex;flex-wrap:wrap;gap:10px;padding:10px 0}
.pipe::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,var(--c),transparent);opacity:.35}
.pill{position:relative;display:inline-flex;align-items:center;gap:9px;padding:9px 12px 9px 10px;border-radius:999px;border:1px solid var(--line2);
  background:rgba(12,13,20,.85);color:var(--bone);font:13px var(--body);cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}
.pill:hover{border-color:var(--c);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.03),0 10px 24px rgba(0,0,0,.45),0 0 18px color-mix(in srgb,var(--c) 25%,transparent)}
.pill .d{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.pill.s-building .d{background:transparent;border:2px solid var(--c);box-shadow:none}
.pill.s-idea .d,.pill.s-paper .d{background:transparent;border:1px dashed var(--c);box-shadow:none}
.pill.s-parked .d,.pill.s-dormant .d{background:var(--dim);box-shadow:none}
.pill.s-dead{opacity:.5}.pill.s-dead .d{background:var(--c-dead);box-shadow:none}
.pill .tag{margin-left:2px}
.pill .dom{font:10px var(--mono);color:var(--dim);letter-spacing:.04em}

/* gates rail */
.rail{position:relative;padding:150px 0 170px;overflow:visible}
.rail .axis{position:relative;height:2px;background:linear-gradient(90deg,var(--iris),rgba(255,176,32,.15));border-radius:2px}
.rail .tick{position:absolute;top:-6px;width:1px;height:14px;background:var(--line2)}
.rail .tick span{position:absolute;top:44px;left:0;transform:translateX(-50%);font:10px var(--mono);letter-spacing:.12em;color:var(--dim);white-space:nowrap}
.rail .now{position:absolute;top:-10px;left:0;width:2px;height:22px;background:var(--c-services);box-shadow:0 0 12px var(--c-services)}
.rail .now span{position:absolute;top:26px;left:50%;transform:translateX(-50%);font:10px var(--mono);letter-spacing:.14em;color:var(--c-services)}
.g{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c);transform:translate(-50%,-50%);cursor:pointer}
.g.up{top:-1px}.g.up .lb{bottom:16px}.g.dn{top:-1px}.g.dn .lb{top:22px}
.g .lb{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;text-align:center;font:11px var(--mono);letter-spacing:.06em;color:var(--mute);transition:color .2s}
.g .lb b{display:block;color:var(--bone);font-weight:400}
.g:hover .lb{color:var(--c)}
.g.hot{animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 25%,transparent),0 0 12px var(--c)}}
.rail-list{display:none}

/* rule */
.rule blockquote{margin:0 0 54px;max-width:980px;font:300 clamp(20px,2.4vw,32px)/1.35 var(--disp);letter-spacing:-.01em;color:var(--bone)}
.rule blockquote::before{content:"";display:block;width:64px;height:3px;background:var(--iris);margin-bottom:26px;box-shadow:0 0 14px var(--iris)}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;border-top:1px solid var(--line);padding-top:30px}
.how h4{font:500 14px var(--disp);margin:0 0 8px;letter-spacing:-.01em}.how p{margin:0;color:var(--mute);font-size:14.5px}

.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:48px var(--gut) 40px;margin-top:60px;border-top:1px solid var(--line);font:11px var(--mono);letter-spacing:.1em;color:var(--dim)}

/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

@media (max-width:1000px){
  .optic{grid-template-columns:1fr;min-height:0;padding-top:6px}
  .stage{order:-1;justify-self:center;max-height:none;width:min(100%,640px)}
  .copy{max-width:none}
  .strip{grid-template-columns:repeat(3,1fr)}.strip > div:nth-child(3n){border-right:0}.strip > div:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .how{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav{display:none}
  .lane{grid-template-columns:1fr;gap:8px}
  .rail{padding:0}.rail .axis{display:none}.rail-list{display:block;border-top:1px solid var(--line)}
  .rail-list div{display:grid;grid-template-columns:70px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;align-items:baseline}
  .rail-list .dt{font:11px var(--mono);color:var(--c)}.rail-list .left{font:11px var(--mono);color:var(--dim)}
  .rail-list small{display:block;color:var(--mute);font-size:12.5px}
  .card{left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto}
  .strip{grid-template-columns:1fr 1fr;margin:0 var(--gut)}.strip > div{border-right:0!important;border-bottom:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){.grain{animation:none}.rv{opacity:1;transform:none;transition:none}}
