* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --hacker-bg:#050505; --green:#00FF66; --amber:#FFB000;
  --indigo:#8C96FF; --violet:#C0B4FF; --white:#FFFFFF; --ink:#EDEDF2;
  --gray:#9AA0AC; --dim:#76767F;
  --mono:"JetBrains Mono",monospace; --sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
}
html{ scroll-behavior:auto; }
body{ background:var(--hacker-bg); color:#C5C5C5; font-family:var(--sans); overflow-x:hidden; touch-action:manipulation; }

/* ===== fixed bg layers ===== */
#bgPremium{ position:fixed; inset:0; z-index:0; opacity:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 72% 30%, rgba(120,130,240,.20), transparent 60%),
    radial-gradient(ellipse 60% 70% at 80% 110%, rgba(155,140,255,.12), transparent 60%); }
#bg{ position:fixed; inset:0; z-index:1; }
#vignette{ position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 130% 95% at 50% 40%, transparent 52%, rgba(0,0,0,.6) 100%); }
#scanlines{ position:fixed; inset:0; z-index:3; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 1px, transparent 3px); }

/* ===== boot gate ===== */
#boot{ position:fixed; inset:0; z-index:100; background:var(--hacker-bg);
  display:flex; align-items:center; justify-content:center; transition:opacity .6s ease; }
#boot.done{ opacity:0; pointer-events:none; }
.boot-inner{ padding:0 6vw; }
#bootText{ font-family:var(--mono); font-size:clamp(.75rem,1.6vw,.95rem); color:var(--dim); line-height:2; white-space:pre; min-height:8em; }
#bootText .ok{ color:var(--green); }
body.locked{ overflow:hidden; }
.boot-gate{ margin-top:2.4rem; opacity:0; transform:translateY(14px); transition:opacity .8s ease, transform .8s ease; }
.boot-gate.show{ opacity:1; transform:none; }
.boot-tag{ font-family:var(--mono); font-size:clamp(1.2rem,3.4vw,2.1rem); color:var(--white); font-weight:700; line-height:1.5; }
.boot-tag em{ font-style:normal; color:var(--green); }
.btn{ display:inline-block; font-family:var(--mono); cursor:pointer; color:var(--green); background:transparent;
  border:1px solid var(--green); padding:14px 28px; letter-spacing:2px; font-size:clamp(.85rem,2vw,1rem);
  transition:background .2s,color .2s,box-shadow .2s; }
.btn:hover,.btn:focus-visible{ background:var(--green); color:#04140B; box-shadow:0 0 28px rgba(0,255,102,.35); outline:none; }
#runBtn{ margin-top:2.2rem; animation:floaty 3.4s ease-in-out infinite; } /* only the button floats */
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
.btn .kbd{ margin-left:14px; font-size:.72em; opacity:.6; }

/* ===== fixed chrome ===== */
.logo{ position:fixed; top:26px; left:4vw; z-index:20; font-family:var(--mono); font-size:1rem; color:#888; letter-spacing:2px; mix-blend-mode:difference; }
#progress{ position:fixed; top:0; left:0; z-index:20; width:2px; height:100vh; background:var(--green); transform-origin:top; transform:scaleY(0); opacity:.55; }

/* ===== content layers ===== */
.hero,.scene,.plain{ position:relative; z-index:5; }
.scene .pin{ position:sticky; top:0; height:100vh; display:flex; align-items:center; }

/* hero (hacker) — left column */
.hero{ height:100vh; display:flex; align-items:center; }
.hero-inner{ padding:0 6vw; max-width:680px; text-shadow:0 1px 18px rgba(0,0,0,.9); }
.hero h1{ font-family:var(--mono); font-size:clamp(2.4rem,8vw,6.4rem); font-weight:700; color:var(--white); line-height:1.05; letter-spacing:-.02em; }
.hero h1 .blink{ color:var(--green); animation:blink 1.05s steps(1) infinite; }
.hero .sub{ margin-top:1.8rem; font-family:var(--mono); font-size:clamp(.9rem,1.8vw,1.15rem); color:var(--gray); max-width:520px; line-height:1.7; }
.hero .tags{ margin-top:1.1rem; font-family:var(--mono); font-size:clamp(.7rem,1.3vw,.82rem); color:var(--dim); letter-spacing:1px; }
.hero .hint{ margin-top:6vh; font-family:var(--mono); font-size:.78rem; color:var(--dim); animation:bob 2.2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(8px); opacity:1 } }
@keyframes blink{ 0%,55%{ opacity:1 } 56%,100%{ opacity:0 } }

/* ===== scan act — chaos → building point cloud ===== */
#sc-scan{ height:300vh; }
.term-panel{ margin-left:6vw; width:min(44vw,520px); padding:2.8rem 0;
  background:linear-gradient(90deg, rgba(6,10,8,.94) 0%, rgba(6,10,8,.68) 60%, rgba(6,10,8,0) 100%);
  font-family:var(--mono); text-shadow:0 1px 16px rgba(0,0,0,.95),0 0 5px rgba(0,0,0,.8); }
.term-label{ font-size:clamp(.65rem,1.3vw,.8rem); color:var(--dim); letter-spacing:3px; margin-bottom:2.2rem; }
.term-cmd{ font-size:clamp(1.05rem,3vw,1.7rem); font-weight:500; color:var(--white); white-space:pre; }
.term-line{ margin-top:1.1rem; font-size:clamp(.72rem,1.8vw,1rem); color:var(--gray); opacity:0; }
.term-line i{ font-style:normal; color:var(--green); }
.term-line b{ font-weight:500; color:#E8E8E8; }
.term-narr{ margin-top:3.2rem; font-size:clamp(1rem,2.4vw,1.35rem); color:var(--gray); font-weight:300; opacity:0; }
.term-narr em{ font-style:normal; color:var(--white); }

/* ===== ACT 1 compiler (hacker) — code panel left, building right ===== */
#compiler{ height:680vh; }
.code-panel{ margin-left:6vw; width:min(44vw,520px); background:rgba(6,10,8,.85);
  border:1px solid rgba(0,255,102,.22); border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(0,255,102,.05);
  font-family:var(--mono); overflow:hidden; backdrop-filter:blur(4px); }
.code-head{ font-size:.72rem; color:var(--dim); padding:12px 16px; border-bottom:1px solid rgba(0,255,102,.15);
  letter-spacing:1px; display:flex; align-items:center; gap:8px; }
.code-head::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--amber); box-shadow:16px 0 0 #2a2a2a,32px 0 0 #2a2a2a; }
.code-body{ padding:18px 16px 8px; font-size:clamp(.74rem,1.4vw,.92rem); line-height:2.05; }
.cl{ display:flex; opacity:.22; transition:opacity .3s; white-space:pre; }
.cl.active{ opacity:1; } .cl.done{ opacity:.55; }
.cl .ln{ color:#3a3a3a; width:2.4em; flex:none; user-select:none; }
.cl .kw{ color:var(--violet); } .cl .fn{ color:var(--green); } .cl .ar{ color:var(--amber); } .cl .pn{ color:#6f6f6f; } .cl .cm{ color:#4a4a4a; }
.code-status{ min-height:2.8em; padding:12px 16px 16px; font-size:clamp(.72rem,1.4vw,.88rem); border-top:1px solid rgba(0,255,102,.12); white-space:pre; }
.code-status .spin{ color:var(--amber); } .code-status .ok{ color:var(--green); }
.code-note{ font-family:var(--sans); font-size:.7rem; color:var(--dim); padding:8px 16px 12px; letter-spacing:.4px; }
.cursor{ display:inline-block; color:var(--green); animation:blink 1.05s steps(1) infinite; }

/* ===== proof chips (counter / metric card / live dashboard) ===== */
.q-chip,.metric-card{ display:inline-block; font-family:var(--mono); font-size:clamp(.68rem,1.5vw,.82rem);
  color:var(--violet); border:1px solid rgba(140,150,255,.45); background:rgba(10,10,20,.55);
  padding:10px 16px; margin-top:1.6rem; letter-spacing:1px; opacity:0; }
.q-chip b,.metric-card b{ color:var(--white); font-weight:600; }
.metric-card .mc-t{ color:var(--dim); letter-spacing:2px; margin-right:10px; font-size:.85em; }
.metric-card .live{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#7CE8A4;
  margin-right:10px; animation:livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(124,232,164,.5) } 50%{ opacity:.55; box-shadow:0 0 0 5px rgba(124,232,164,0) } }
.pipeline{ font-family:var(--mono); font-size:clamp(.62rem,1.3vw,.74rem); letter-spacing:2px; color:var(--gray); margin-bottom:2rem; opacity:0; }
.pipeline i{ font-style:normal; color:var(--violet); padding:0 6px; }

/* ===== premium scenes — text LEFT column, building stays RIGHT ===== */
.scene.premium .pin{ justify-content:flex-start; width:100%; }
#q1{ height:300vh; } #q2{ height:300vh; } #q3{ height:300vh; }
.q-wrap{ margin-left:6vw; padding:0; width:clamp(420px,44vw,720px); flex:0 0 auto; position:relative; }
.q-wrap::before{ content:""; position:absolute; top:-55vh; bottom:-55vh; left:-8vw; right:-2vw; z-index:-1;
  background:linear-gradient(to right, rgba(8,8,16,.88) 0%, rgba(8,8,16,.50) 65%, transparent 100%); }
.q-num{ font-family:var(--mono); font-size:.8rem; letter-spacing:4px; color:var(--violet); opacity:0; margin-bottom:1.6rem; text-shadow:0 1px 10px rgba(0,0,0,.95); }
.q{ font-family:var(--sans); font-weight:700; color:var(--white); font-size:clamp(1.75rem,3.6vw,3.25rem);
  line-height:1.15; letter-spacing:-.025em; width:100%; text-shadow:0 2px 30px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.7); }
.q .accent{ color:var(--violet); }
.q-sub{ font-family:var(--sans); font-weight:400; margin-top:1.8rem; font-size:clamp(1rem,1.8vw,1.25rem);
  color:#AEB3BE; opacity:0; width:100%; max-width:36em; line-height:1.6; text-shadow:0 1px 14px rgba(0,0,0,.95),0 0 5px rgba(0,0,0,.85); }
.q-line{ opacity:0; }

/* founder + end (premium) — left column */
.plain{ padding:18vh 0; }
.plain-inner{ margin-left:6vw; padding:0; width:clamp(420px,44vw,720px); position:relative; }
.plain-inner::before{ content:""; position:absolute; top:-40vh; bottom:0; left:-8vw; right:-2vw; z-index:-1;
  background:linear-gradient(to right, rgba(8,8,16,.88) 0%, rgba(8,8,16,.50) 65%, transparent 100%); }
.label{ font-family:var(--mono); font-size:clamp(.65rem,1.3vw,.8rem); letter-spacing:3px; color:var(--violet); margin-bottom:2.2rem; }
.founder-text{ font-family:var(--sans); font-weight:300; font-size:clamp(1.1rem,2.4vw,1.6rem); color:var(--gray); line-height:1.85; }
.founder-text em{ font-style:normal; color:var(--white); font-weight:500; }
#end{ padding:22vh 0 6vh; min-height:100vh; }
.end-cmd{ font-family:var(--mono); font-size:clamp(1.05rem,3vw,1.7rem); font-weight:500; color:var(--white); }
.end-cmd.sm{ font-size:clamp(.85rem,2vw,1.05rem); color:var(--gray); margin-bottom:.9rem; }
#end .term-line.exp{ font-family:var(--mono); font-size:clamp(.7rem,1.6vw,.9rem); color:var(--gray); opacity:0; margin:0 0 .9rem; }
#end .term-line.exp i{ font-style:normal; color:var(--indigo); }
#end .term-line.exp b{ font-weight:500; color:var(--white); }
.end-note{ font-family:var(--sans); font-size:clamp(.85rem,1.8vw,1.05rem); color:var(--gray); opacity:0; margin:0 0 2.6rem; max-width:34em; }
.coming{ font-family:var(--mono); margin-top:2.2rem; font-size:clamp(1.05rem,3vw,1.7rem); color:var(--indigo); letter-spacing:1px; opacity:0; }
.contact{ margin-top:2.6rem; opacity:0; }
.contact .hire{ font-family:var(--mono); display:block; color:var(--dim); letter-spacing:2px; font-size:.76rem; margin-bottom:1.1rem; }
.mail-btn{ display:inline-block; font-family:var(--mono); text-decoration:none; cursor:pointer; color:var(--indigo);
  background:transparent; border:1px solid var(--indigo); padding:14px 26px; letter-spacing:1.5px; font-size:clamp(.85rem,2vw,1.02rem);
  transition:background .2s,color .2s,box-shadow .2s; }
.mail-btn:hover,.mail-btn:focus-visible{ background:var(--indigo); color:#0A0A14; box-shadow:0 0 28px rgba(140,150,255,.4); outline:none; }
.mail-btn .kbd{ margin-left:12px; font-size:.72em; opacity:.65; }
a:focus-visible{ outline:2px solid var(--indigo); outline-offset:4px; }
footer{ position:fixed; bottom:0; left:0; right:0; z-index:20; padding:2.5vh 6vw; font-family:var(--mono); font-size:.72rem; color:var(--dim);
  letter-spacing:1px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  background:linear-gradient(to top, rgba(5,5,5,.75) 0%, transparent 100%); pointer-events:none; }

@media (max-width:767px){
  /* ── Hero: text at bottom, particles fill the screen above ── */
  .hero{ align-items:flex-end; padding-bottom:max(10vh, calc(6vh + env(safe-area-inset-bottom, 30px))); }
  .hero-inner{ max-width:100%; }
  .hero h1{ font-size:clamp(2.2rem,12vw,4rem); }

  /* ── Compiler panel: ONE line at a time on small screens, so the 3D stays big ── */
  #compiler .pin{ align-items:flex-end; padding-bottom:max(10vh, calc(6vh + env(safe-area-inset-bottom, 30px))); }
  .code-panel{ width:min(80vw,330px); margin:0 0 0 4vw; }
  .code-head{ font-size:.6rem; padding:8px 12px; }
  .code-body{ font-size:.78rem; line-height:1.5; padding:10px 12px 6px; }
  .code-body .cl{ display:none; }            /* hide all lines... */
  .code-body .cl.active{ display:flex; opacity:1; }  /* ...show only the current one */
  .code-body .ln{ width:2.2em; }
  .code-status{ font-size:.72rem; min-height:2em; padding:8px 12px 10px; }
  .code-note{ font-size:.58rem; padding:6px 12px 8px; }
  .q-chip,.metric-card{ padding:8px 12px; margin-top:1rem; font-size:.66rem; }
  /* ── Scan panel: compact text (shrink text, not the 3D) ── */
  #sc-scan .pin{ align-items:flex-end; padding-bottom:max(10vh, calc(6vh + env(safe-area-inset-bottom, 30px))); }
  .term-panel{ width:min(88vw,360px); margin:0 0 0 4vw; padding:1.2rem 1.2rem; }
  .term-label{ margin-bottom:1.1rem; }
  .term-cmd{ font-size:1rem; }
  .term-line{ font-size:.66rem; margin-top:.7rem; }
  .term-narr{ font-size:.95rem; margin-top:1.4rem; }

  /* ── Q sections: text anchored to bottom, 3D visible above ── */
  .scene.premium .pin{ align-items:flex-end; padding-bottom:max(10vh, calc(6vh + env(safe-area-inset-bottom, 30px))); }
  .q-wrap, .plain-inner{ margin-left:0; padding:0 6vw; width:100%; max-width:none; }
  .q{ font-size:clamp(1.4rem,6.5vw,2.2rem); }

  /* ── Bottom-up dark gradient for text readability ── */
  .q-wrap::before,.plain-inner::before{
    left:-6vw; right:-6vw; top:-55vh; bottom:-3vh;
    background:linear-gradient(to top, rgba(8,8,16,.96) 0%, rgba(8,8,16,.8) 22%, rgba(8,8,16,.4) 55%, transparent 100%);
  }

  /* ── Plain sections (founder/end): content anchored to bottom, 3D above ── */
  .plain{ min-height:100vh; display:flex; flex-direction:column; justify-content:flex-end;
    padding:0 0 max(10vh, calc(7vh + env(safe-area-inset-bottom, 30px))); }
  #end{ padding:0 0 max(10vh, calc(7vh + env(safe-area-inset-bottom, 30px))); }
  .plain-inner::before{ top:-55vh; bottom:-6vh; left:-6vw; right:-6vw;
    background:linear-gradient(to top, rgba(8,8,16,.96) 0%, rgba(8,8,16,.8) 24%, rgba(8,8,16,.4) 58%, transparent 100%); }

  /* Issue 3: Founder text — tighter font so long sentences don't force 3+ lines ── */
  .founder-text{ font-size:clamp(.92rem,3.8vw,1.05rem); line-height:1.65; }
  .label{ font-size:.6rem; letter-spacing:2px; margin-bottom:1.2rem; }

  /* ── End section: tighter spacing so 3 lines don't spread and cover the building ── */
  .end-cmd{ font-size:clamp(.9rem,4vw,1.1rem); }
  .coming{ margin-top:.7rem; font-size:clamp(.9rem,4vw,1.1rem); }
  .contact{ margin-top:.9rem; }
  .contact .hire{ font-size:.68rem; letter-spacing:1px; margin-bottom:.5rem; }
  .mail-btn{ padding:10px 18px; font-size:.85rem; }

  /* ── Footer: not fixed on mobile — only appears in flow at the very end (under the email) ── */
  footer{ position:static; z-index:5; background:none; pointer-events:auto; padding:2vh 6vw 4vh; }
}
@media (prefers-reduced-motion:reduce){ #runBtn,.hint,.hero h1 .blink,.cursor,.metric-card .live{ animation:none; } }