/* ── Reset & Variables ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--black:#050505;--dark:#0e0e0e;--mid:#191919;--gray:#2a2a2a;--lg:#484848;--silver:#aaa;--white:#f0f0f0;--theme-transition:.45s}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:'Space Mono',monospace;overflow-x:hidden;cursor:auto;transition:background var(--theme-transition),color var(--theme-transition)}

/* ── Light Theme ── */
body.light{background:#f0f0fa;color:#1a1a2e}
body.light nav::before{background:rgba(255,255,255,.96);backdrop-filter:blur(24px);border-bottom:1px solid rgba(108,71,255,.1)}
body.light nav::after{background:linear-gradient(90deg,transparent,rgba(108,71,255,.35),transparent)}
body.light .nav-logo-name{color:#1a1a2e}
body.light .nav-logo-slash{color:#6c47ff}
body.light .nav-logo-dot{background:#6c47ff;box-shadow:0 0 6px rgba(108,71,255,.6)}
body.light .nav-links{background:rgba(108,71,255,.05);border:1px solid rgba(108,71,255,.12)}
body.light .nav-pill{color:rgba(26,26,46,.45)}
body.light .nav-pill::before{color:#1a1a2e}
body.light .nav-pill.active{background:#6c47ff;color:#fff}
body.light .nav-pill:hover{background:rgba(108,71,255,.1)}
body.light section{background:#f0f0fa}
body.light .section-label{color:#6c47ff;letter-spacing:8px}
body.light .section-title{color:#1a1a2e;text-shadow:none}
body.light .section-title span{color:transparent;-webkit-text-stroke:1.5px rgba(108,71,255,.25)}
body.light footer{background:#f0f0fa;border-top:1px solid rgba(108,71,255,.1);color:rgba(26,26,46,.4)}
body.light #webgl-bg{opacity:.03;filter:invert(1) hue-rotate(210deg)}
body.light .cursor{background:#6c47ff;mix-blend-mode:normal}
body.light .cursor-ring{border-color:rgba(108,71,255,.4)}
body.light .binary-canvas{opacity:.02!important}

/* ── Cursor (disabled) ── */
.cursor,.cursor-ring{display:none!important}

/* ── Theme Toggle ── */
.theme-toggle{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(12,12,18,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:none;display:flex;align-items:center;justify-content:center;transition:transform .3s,box-shadow .3s,border-color .3s,background .3s;z-index:20;box-shadow:0 4px 20px rgba(0,0,0,.5);flex-shrink:0;position:relative}
.theme-toggle:hover{transform:scale(1.12);border-color:rgba(255,255,255,.4);box-shadow:0 6px 28px rgba(0,0,0,.65)}
.theme-toggle .moon-icon{position:absolute;transition:opacity .35s,transform .35s;opacity:1;transform:scale(1) rotate(0deg);color:rgba(210,220,255,.9)}
.theme-toggle .sun-icon{position:absolute;transition:opacity .35s,transform .35s;opacity:0;transform:scale(.4) rotate(-90deg);color:rgba(108,71,255,.9)}
body.light .theme-toggle{background:rgba(255,255,255,.9);border:1px solid rgba(108,71,255,.25);box-shadow:0 4px 20px rgba(108,71,255,.18)}
body.light .theme-toggle .moon-icon{opacity:0;transform:scale(.4) rotate(90deg)}
body.light .theme-toggle .sun-icon{opacity:1;transform:scale(1) rotate(0deg)}

/* ── Nav ── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:62px;background:transparent;transition:background .4s,border-color .4s}
nav::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,.92) 0%,rgba(14,14,14,.82) 50%,rgba(5,5,5,.92) 100%);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border-bottom:1px solid rgba(255,255,255,.07);z-index:-1}
nav::after{content:'';position:absolute;bottom:-1px;left:-100%;width:40%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:navScan 4s ease-in-out infinite}
@keyframes navScan{0%{left:-40%}100%{left:140%}}
.nav-logo{font-family:'Orbitron',monospace;font-weight:900;font-size:.98rem;letter-spacing:3px;opacity:0;animation:fadeDown .8s .2s forwards;display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--white)}
.nav-logo-name{color:var(--white);letter-spacing:4px}
.nav-logo-slash{color:rgba(255,255,255,.35);font-weight:400;font-size:1rem}
.nav-logo-dot{width:5px;height:5px;border-radius:50%;background:var(--white);animation:dotBlink 2s ease-in-out infinite;margin-left:2px}
@keyframes dotBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}
.nav-right{display:flex;align-items:center;gap:16px;opacity:0;animation:fadeDown .8s .4s forwards}
.nav-links{display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:4px}
.nav-pill{padding:6px 20px;border-radius:4px;color:rgba(255,255,255,.4);font-family:'Orbitron',monospace;font-size:.65rem;letter-spacing:2.5px;text-decoration:none;transition:color .25s,background .25s;position:relative;border:none;background:transparent;text-transform:uppercase}
.nav-pill::before{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:.55rem;letter-spacing:2.5px;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.nav-pill span{display:block;transition:opacity .2s,transform .2s}
.nav-pill:hover span,.nav-pill.active span{opacity:0;transform:translateY(-6px)}
.nav-pill:hover::before,.nav-pill.active::before{opacity:1;transform:translateY(0)}
.nav-pill.active{background:rgba(255,255,255,.1);color:var(--white)}
.nav-pill:hover{background:rgba(255,255,255,.07)}
.nav-hamburger{display:none}
body.light .nav-hamburger span{background:#1a1a2e}
body.light .nav-links.open{background:rgba(248,246,255,.98);border-bottom-color:rgba(108,71,255,.12)}

/* ── 3D Canvas BG ── */
#webgl-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.18}

/* ── Sections ── */
section{padding:110px 10%;position:relative}
.section-label{font-family:'Orbitron',monospace;font-size:.7rem;letter-spacing:8px;color:var(--lg);text-transform:uppercase;margin-bottom:14px}
.section-title{font-family:'Orbitron',monospace;font-weight:900;font-size:clamp(2rem,3.7vw,3.2rem);letter-spacing:2px;line-height:1.1;margin-bottom:48px}
.section-title span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22)}
.section-title{text-shadow:0 4px 24px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.05)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── Hero (shared) ── */
.hero-bg{position:absolute;inset:0;background:var(--black)}
.hero-bg::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#1a1a1a 0%,#222 30%,#111 48%,var(--black) 52%);clip-path:polygon(0 0,42% 0,22% 100%,0 100%)}
.beam{position:absolute;inset:0;background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.025) 45%,rgba(255,255,255,.055) 50%,rgba(255,255,255,.025) 55%,transparent 70%);pointer-events:none;animation:beamPulse 4s ease-in-out infinite}
@keyframes beamPulse{0%,100%{opacity:.6}50%{opacity:1}}
body.light .hero-bg{background:#f0f0fa}
body.light .hero-bg::before{background:linear-gradient(135deg,#e8e6ff 0%,#ede8ff 30%,#f2f0ff 48%,#f0f0fa 52%)}
body.light .beam{opacity:0}

/* ── Buttons ── */
.btn-outline{padding:11px 26px;border:1px solid rgba(255,255,255,.25);color:var(--white);font-family:'Space Mono',monospace;font-size:.74rem;letter-spacing:3px;text-decoration:none;text-transform:uppercase;transition:all .3s;position:relative;overflow:hidden;display:inline-block}
.btn-outline::before{content:'';position:absolute;inset:0;background:#fff;transform:translateX(-101%);transition:transform .3s;z-index:-1}
.btn-outline:hover::before{transform:translateX(0)}
.btn-outline:hover{color:var(--black)}
.btn-solid{padding:11px 26px;background:var(--white);color:var(--black);font-family:'Space Mono',monospace;font-size:.74rem;letter-spacing:3px;text-decoration:none;text-transform:uppercase;transition:all .3s;border:1px solid var(--white);display:inline-block;font-weight:700}
.btn-solid:hover{background:transparent;color:var(--white)}
body.light .btn-outline{border:2px solid #6c47ff;color:#6c47ff;background:transparent}
body.light .btn-outline::before{background:#6c47ff}
body.light .btn-outline:hover{color:#fff;border-color:#6c47ff}
body.light .btn-solid{background:#6c47ff;color:#fff;border:2px solid #6c47ff}
body.light .btn-solid:hover{background:transparent;color:#6c47ff}

/* ── Footer ── */
footer{padding:28px 10%;border-top:1px solid var(--gray);display:flex;justify-content:space-between;align-items:center;font-size:.7rem;letter-spacing:3px;color:var(--lg);position:relative;z-index:1}

/* ── Keyframes ── */
@keyframes fadeDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes shimmerLine{0%{left:-100%}60%,100%{left:150%}}

/* ── Mobile ── */
@media(max-width:768px){
  .cursor,.cursor-ring{display:none!important}
  body{cursor:auto}
  nav{padding:0 20px;height:56px;background:rgba(5,5,5,.96)!important;backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.07)}
  .nav-logo{font-size:.75rem}
  .nav-links{display:none;position:fixed;top:56px;left:0;right:0;flex-direction:column;background:rgba(8,8,8,.98);backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,.09);padding:10px 0 16px;z-index:199;gap:2px}
  .nav-links.open{display:flex}
  .nav-pill{padding:13px 28px;font-size:.55rem;letter-spacing:3px;border-radius:0;text-align:left;width:100%;border-bottom:1px solid rgba(255,255,255,.04)}
  .nav-hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:8px;background:transparent;border:none;cursor:pointer;width:40px;height:40px;flex-shrink:0}
  .nav-hamburger span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transform-origin:center;transition:transform .3s,opacity .3s,width .3s}
  .nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-hamburger.open span:nth-child(2){opacity:0;width:0}
  .nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  section{padding:80px 5% 64px}
  footer{flex-direction:column;gap:8px;text-align:center;padding:20px 5%;font-size:.52rem}
}