/* varun-sv.github.io — "Signal Graph" hero + "Agent Run" body */
:root{
  --bg:#07080C; --bg-2:#0B0D13; --line:#1B1E27; --line-2:#2A2F3B;
  --ink:#E9ECF2; --ink-2:#B9C0CC; --ink-3:#9AA3B2; --ink-4:#8A92A2;
  --amber:#FFB547; --amber-2:#FFD08A; --cool:#8FD3FF; --ok:#7EE2A8;
  --display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1200px; --pad:clamp(20px,4vw,32px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--amber)} a:hover{color:var(--amber-2)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--mono)}
.amber{color:var(--amber)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--amber);color:#07080C;padding:10px 14px;border-radius:8px}
.skip:focus{left:8px}
h1,h2,h3{font-variation-settings:'wdth' 112;letter-spacing:-.02em;margin:0}

/* ---------- WebGL layer ---------- */
#hero-gl{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;z-index:0;display:block;pointer-events:none;transition:opacity .2s linear}
.gl-labels{position:fixed;inset:0;z-index:1;pointer-events:none}
.gl-label{position:absolute;left:0;top:0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#D7DBE3;white-space:nowrap;opacity:0;will-change:transform,opacity;text-shadow:0 0 12px rgba(7,8,12,.9)}
.gl-label.cool{color:var(--cool)}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;transition:background .25s,border-color .25s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(7,8,12,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px;flex-wrap:wrap}
.brand{color:var(--ink);text-decoration:none;font-weight:800;font-size:17px;font-variation-settings:'wdth' 122;letter-spacing:.03em}
.nav-links{display:flex;gap:2px;font-size:13px;flex-wrap:wrap}
.nav-links a{color:var(--ink-2);text-decoration:none;padding:12px 10px;border-radius:999px}
.nav-links a:hover{color:var(--ink)}
.nav-links a.pill{background:var(--amber);color:#07080C;font-weight:600;padding:12px 16px;margin-left:6px}
@media (max-width:620px){.nav-links a:not(.pill){display:none}}

/* ---------- Hero (tall: the camera descends while it scrolls) ---------- */
main{position:relative;z-index:2}
.hero{position:relative;height:190vh;height:190svh}
.hero-inner{position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:22px;padding-top:88px;padding-bottom:64px;will-change:opacity,transform}
.hero-inner > *{max-width:640px}
.eyebrow{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.hero h1{font-size:clamp(42px,6.6vw,92px);line-height:.95;font-weight:800}
.lead{margin:0;font-size:clamp(17px,1.6vw,19px);color:var(--ink-2);max-width:520px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;font-weight:700;text-decoration:none;font-family:var(--display);font-size:16px;cursor:pointer;border:0;transition:transform .15s,background .15s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--amber);color:#07080C}
.btn.primary:hover{background:var(--amber-2);color:#07080C}
.btn.ghost{background:rgba(7,8,12,.4);border:1px solid #343947;color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink-3);color:var(--ink)}
.status{margin:0;font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:10px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:pulse 2s ease-in-out infinite}
.scroll-cue{position:absolute;left:0;right:0;top:calc(100vh - 56px);top:calc(100svh - 56px);margin:0;text-align:center;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);animation:bob 2.4s ease-in-out infinite}
@media (max-width:820px){
  .hero{height:170vh;height:170svh}
  .hero-inner{justify-content:flex-end;padding-bottom:96px}
}

/* ---------- Sections ---------- */
section:not(.hero){background:var(--bg);position:relative}
.glance{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.glance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;padding-block:32px}
.stat{display:flex;flex-direction:column;gap:6px}
.stat strong{font-size:38px;font-weight:800;font-variation-settings:'wdth' 110;line-height:1}
.stat span{font-size:12px;color:var(--ink-3)}
.section-head{display:flex;flex-direction:column;gap:14px;margin-bottom:32px;max-width:760px}
.section-head h2,.contact h2{font-size:clamp(34px,4.6vw,60px);line-height:1;font-weight:800}
.kicker{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:500}
.sub{margin:0;color:var(--ink-2);font-size:18px;max-width:620px}
.muted{color:var(--ink-3)!important}

/* ---------- Agent console ---------- */
.ask{padding-block:clamp(72px,10vw,120px)}
.console{border:1px solid var(--line-2);border-radius:22px;background:var(--bg-2);overflow:hidden;box-shadow:0 30px 80px -40px rgba(255,181,71,.18)}
.prompt{padding:20px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.label{margin:0;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.prompt-row{display:flex;flex-wrap:wrap;gap:10px}
.input-wrap{flex:1 1 220px;min-width:0;display:flex;align-items:center;min-height:52px;padding:0 16px;border:1px solid #343947;border-radius:14px;background:var(--bg)}
.input-wrap:focus-within{border-color:var(--amber)}
.caret-sign{color:var(--amber);margin-right:10px}
#ask-input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;outline:none;height:50px}
#ask-input::placeholder{color:var(--ink-4)}
.run{border-radius:14px;min-height:52px;padding:0 26px}
.run[disabled]{opacity:.6;cursor:progress}
.chips{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:620px){
  .chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding:2px 20px 6px;scroll-snap-type:x proximity;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;scroll-snap-align:start}
  .run{padding:0 18px}
  .prompt,.trace{padding-inline:16px}.answer{margin-inline:16px;padding:18px}.engine{padding-inline:16px}
}
.chip{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #343947;background:transparent;color:var(--ink-2);font:inherit;font-size:14px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:#07080C;border-color:var(--ink)}
.engine{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:10px 20px;background:#05060A;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-3);min-height:44px}
.engine-state{display:flex;align-items:center;gap:8px}
.led{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.led.busy{background:var(--amber);box-shadow:0 0 8px var(--amber);animation:pulse 1s ease-in-out infinite}
.engine button{font-family:var(--mono);font-size:12px;color:var(--amber);background:transparent;border:1px solid rgba(255,181,71,.45);border-radius:999px;padding:8px 14px;min-height:36px;cursor:pointer}
.engine button:hover{background:rgba(255,181,71,.1)}
.progress{position:relative;padding:10px 20px;border-bottom:1px solid var(--line)}
.progress .bar{height:4px;border-radius:4px;background:var(--line-2);overflow:hidden;position:relative}
.progress .bar::after{content:"";position:absolute;inset:0;width:var(--p,0%);background:var(--amber);transition:width .3s}
.progress-text{display:block;margin-top:8px;font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trace{list-style:none;margin:0;padding:20px 20px 4px;display:flex;flex-direction:column;gap:10px;min-height:8px}
.step{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#090B10;animation:rise .35s ease both}
.badge{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;padding:4px 8px;border-radius:6px}
.badge.PLAN{color:#C9D6FF;background:rgba(120,150,255,.16)}
.badge.TOOL{color:var(--amber);background:rgba(255,181,71,.13)}
.badge.CHECK{color:var(--ok);background:rgba(126,226,168,.12)}
.badge.MODEL{color:var(--cool);background:rgba(143,211,255,.13)}
.step-label{font-family:var(--mono);font-size:13.5px;color:var(--ink);flex:1 1 240px;min-width:0;overflow-wrap:anywhere}
.step-detail{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);flex:1 1 100%;overflow-wrap:anywhere}
.step.pending .step-detail::after{content:"▍";animation:blink 1s steps(1) infinite;color:var(--amber)}
.answer{margin:12px 20px 20px;padding:22px;border-radius:16px;background:rgba(255,181,71,.06);border:1px solid rgba(255,181,71,.28);display:flex;flex-direction:column;gap:12px}
.answer-text{margin:0;font-size:18px;line-height:1.6;color:var(--ink);white-space:pre-wrap}
.answer-text .cite{color:var(--amber);font-family:var(--mono);font-size:.8em}
.answer-text.streaming::after{content:"▍";color:var(--amber);animation:blink 1s steps(1) infinite}
.sources{display:flex;flex-wrap:wrap;gap:8px}
.sources a{font-family:var(--mono);font-size:12px;text-decoration:none;color:var(--ink-2);padding:8px 12px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg)}
.sources a:hover{color:var(--ink);border-color:var(--amber)}
.note{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:0}

/* ---------- Systems ---------- */
.systems{padding-block:clamp(64px,8vw,96px)}
.chapters{display:flex;flex-direction:column;gap:clamp(72px,10vw,120px)}
.chapter{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.chapter.flip{flex-wrap:wrap-reverse;flex-direction:row-reverse}
.chapter .copy{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:16px}
.chapter h2{font-size:clamp(34px,4.2vw,54px);line-height:1;font-weight:800}
.chapter p{margin:0;color:var(--ink-2)}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:#C9CED8}
.tags li{border:1px solid var(--line-2);border-radius:999px;padding:6px 12px}
.more{font-weight:700;text-decoration:none;padding:12px 0;align-self:flex-start}
.figs{display:flex;flex-wrap:wrap;gap:28px;padding:6px 0}
.figs strong{display:block;font-size:34px;font-weight:800;line-height:1.1}
.figs span{font-size:12px;color:var(--ink-3)}
.fine{font-size:11.5px;color:var(--ink-4)!important}

/* CSS-3D motifs (cheap, GPU-composited) */
.motif{flex:1 1 400px;min-width:0;height:360px;position:relative;border:1px solid var(--line);border-radius:22px;background:radial-gradient(60% 60% at 50% 50%,#10131b,var(--bg-2));perspective:1100px;overflow:hidden}
.motif i{position:absolute;left:50%;top:50%;display:block}
.orbit{position:absolute;inset:0;transform-style:preserve-3d;animation:spin 56s linear infinite}
.ring{border-radius:50%;border:1px solid rgba(255,181,71,.3)}
.r1{width:120px;height:120px;margin:-60px 0 0 -60px;transform:rotateX(90deg) translateZ(60px)}
.r2{width:220px;height:220px;margin:-110px 0 0 -110px;transform:rotateX(90deg)}
.r3{width:320px;height:320px;margin:-160px 0 0 -160px;transform:rotateX(90deg) translateZ(-60px);border-color:rgba(143,211,255,.3)!important}
.node{width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--amber);box-shadow:0 0 18px 4px rgba(255,181,71,.5);transform:translate3d(var(--x,0),var(--y,0),var(--z,0))}
.node.cool{background:var(--cool);box-shadow:0 0 16px 3px rgba(143,211,255,.45)}
.n-t1{--y:-60px;width:16px;height:16px;margin:-8px 0 0 -8px}
.planes{animation-duration:34s}
.plane{width:240px;height:150px;margin:-75px 0 0 -120px;border:1px solid rgba(255,181,71,.45);background:rgba(255,181,71,.05);border-radius:8px}
.p1{transform:rotateX(70deg) translateZ(-80px)}
.p2{transform:rotateX(70deg)}
.p3{transform:rotateX(70deg) translateZ(80px);border-color:rgba(143,211,255,.55)!important;background:rgba(143,211,255,.05)!important}
.motif-tag{position:absolute;right:22px;font-size:11px;letter-spacing:.12em;color:#C9CED8}
.motif-tag.t1{top:28%}.motif-tag.t2{top:48%}.motif-tag.t3{top:68%;color:var(--cool)}
.cube{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;transform-style:preserve-3d;animation:tumble 24s linear infinite}
.cube .face{left:0;top:0;width:150px;height:150px;border:1px solid rgba(143,211,255,.55);background:rgba(143,211,255,.04)}
.f1{transform:translateZ(75px)}.f2{transform:rotateY(180deg) translateZ(75px)}.f3{transform:rotateY(90deg) translateZ(75px)}
.f4{transform:rotateY(-90deg) translateZ(75px)}.f5{transform:rotateX(90deg) translateZ(75px)}.f6{transform:rotateX(-90deg) translateZ(75px)}
.cube .core{left:50%;top:50%}

.more-builds{display:flex;flex-direction:column;gap:18px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.card{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2);color:var(--ink-2);text-decoration:none;font-size:15px;transition:border-color .2s,transform .2s}
a.card:hover{border-color:var(--amber);transform:translateY(-2px);color:var(--ink-2)}
.card strong{color:var(--ink);font-size:20px;font-variation-settings:'wdth' 110}
.tagline{font-size:11.5px;color:var(--amber)}

/* ---------- Industry ---------- */
.industry{padding-block:clamp(64px,8vw,104px);border-top:1px solid var(--line)}
.industry-grid{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.roles{list-style:none;margin:0;padding:0;flex:1 1 560px;min-width:0;display:flex;flex-direction:column}
.roles > li{padding:22px 0;border-top:1px solid var(--line)}
.roles > li:first-child{border-top:0;padding-top:0}
.when{margin:0 0 4px;font-size:12px;color:var(--amber)}
.roles h3{font-size:22px;font-weight:700}
.roles ul{margin:12px 0 0;padding-left:20px;color:var(--ink-2);font-size:15.5px;display:flex;flex-direction:column;gap:8px}
.roles b{color:var(--ink)}
.finding{flex:1 1 340px;min-width:0;margin:0;padding:24px;border:1px solid var(--line-2);border-radius:20px;background:var(--bg-2);display:flex;flex-direction:column;gap:16px}
.finding-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;font-variation-settings:'wdth' 108}
.bars{display:flex;flex-direction:column;gap:12px}
.bar-row{display:grid;grid-template-columns:110px 1fr 74px;gap:10px;align-items:center;font-size:13.5px;color:var(--ink-2)}
.bar-row .mono{text-align:right;font-size:13px}
.track{height:20px;background:#151821;border-radius:4px;overflow:hidden}
.track i{display:block;height:100%;width:0;background:var(--ink);transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.track i.amber-bg{background:var(--amber)}
.finding.in .track i{width:var(--w)}
.finding figcaption{font-size:13.5px;color:var(--ink-3)}

/* ---------- Credentials ---------- */
.credentials{padding-block:clamp(56px,7vw,88px);border-top:1px solid var(--line)}
.cred-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px}
.cred-grid h3{margin-bottom:14px}
.plain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:15px;color:var(--ink-2)}
.plain b{color:var(--ink);font-weight:600}
.stack-col p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.75}

/* ---------- Contact / footer ---------- */
.contact{padding-block:clamp(72px,10vw,128px);border-top:1px solid var(--line)}
.contact-inner{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.contact h2{max-width:820px}
.contact .btn.primary{overflow-wrap:anywhere}
.footer{position:relative;z-index:2;background:var(--bg);border-top:1px solid var(--line)}
.footer-inner{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;padding-block:26px;font-size:12.5px;color:var(--ink-3)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@keyframes spin{from{transform:rotateX(-14deg) rotateY(0)}to{transform:rotateX(-14deg) rotateY(360deg)}}
@keyframes tumble{from{transform:rotateX(-22deg) rotateY(0)}to{transform:rotateX(-22deg) rotateY(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes blink{50%{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .hero{height:auto}
  .hero-inner{position:relative}
  .scroll-cue{display:none}
}