/* fonts loaded via <link> in <head> */

/* ── FONT FALLBACKS (used when Google Fonts unavailable) ── */
@font-face{font-family:'Syne';font-style:normal;font-weight:700 800;font-display:swap;src:local('Arial Black'),local('Impact');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 500 600;font-display:swap;src:local('Segoe UI'),local('system-ui'),local('Helvetica Neue');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:local('Consolas'),local('Courier New'),local('monospace');}



*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  /* Contact-form status message. Solved per theme to clear 4.5:1 on --panel2. */
  --msg-ok:#39ff14;--msg-err:#ff0090;
  --bg:#07080f;--bg2:#0a0c16;--panel:#0d0f1c;--panel2:#111325;
  --cyan:#00e5ff;--cyan-dim:rgba(0,229,255,0.08);
  --cyan-border:rgba(0,229,255,0.18);--cyan-glow:rgba(0,229,255,0.35);
  --magenta:#ff0090;--magenta-dim:rgba(255,0,144,0.08);
  --magenta-border:rgba(255,0,144,0.22);--magenta-glow:rgba(255,0,144,0.35);
  --green:#39ff14;--green-dim:rgba(57,255,20,0.07);
  --green-border:rgba(57,255,20,0.18);--green-glow:rgba(57,255,20,0.35);
  --cream:#e8f4ff;--dim:rgba(232,244,255,0.5);--dimmer:rgba(232,244,255,0.36);
  /* Typeface slots. A variant overrides these the same way a theme
     overrides the color slots above -- so a new design language is a
     token swap rather than a hunt through 200 hardcoded declarations. */
  --font-display:'Syne','Space Grotesk',sans-serif;
  /* Content headings. Syne is deliberately NOT used here: at 0.955 em per
     character it is the widest face in the stack, which forced every
     section headline down to fit a 375px column. Archivo is 38% narrower,
     so headings can run far larger, and being a neutral grotesque it
     supports Syne rather than competing with it -- Syne stays reserved
     for the hero and the wordmarks, which is what makes it read as an
     accent. Swap this one value to change every content heading. */
  --font-heading:'Archivo','Space Grotesk',sans-serif;
  --font-body:'Space Grotesk',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',Consolas,monospace;
  /* Default size of the notched corner. Each notched element overrides
     --cut with its own size and builds the polygon from it inline --
     the substitution has to happen in a real property on the element,
     because a var() nested inside another custom property resolves
     against wherever that property was declared, not where it is used.
     A variant squares the whole site off with:
         :root[data-variant="..."] *{--cut:0px !important;} */
  --cut:6px;
}
body{font-family:var(--font-body);background:var(--bg);color:var(--cream);overflow-x:hidden;line-height:1.6;}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9000;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,0.15) 2px,rgba(0,0,0,0.15) 3px);opacity:0.28;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:8999;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,0.75) 100%);}

/* ── PRELOADER ── */
#preloader{position:fixed;inset:0;z-index:9900;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:visibility 1.1s;}
#preloader.is-done{animation:pl-poweroff 1.1s cubic-bezier(0.4,0,0.6,1) forwards;visibility:hidden;}
#preloader.is-hidden{display:none;}
@keyframes pl-poweroff{
  0%{opacity:1;filter:brightness(1) saturate(1);transform:scale(1);}
  22%{opacity:1;filter:brightness(2.6) saturate(1.6);transform:scale(1.02);}
  38%{opacity:1;filter:brightness(4.5);transform:scaleY(.04) scaleX(1.15);}
  /* Hang here as a thin bright line, like an old CRT settling before it dies. */
  72%{opacity:1;filter:brightness(4.5);transform:scaleY(.04) scaleX(1.15);}
  100%{opacity:0;filter:brightness(4.5);transform:scaleY(.02) scaleX(1.15);}
}
#preloader::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(0,229,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.03) 1px,transparent 1px);background-size:48px 48px;animation:pl-grid 12s linear infinite;pointer-events:none;}
@keyframes pl-grid{0%{background-position:0 0,0 0}100%{background-position:48px 48px,48px 48px}}

.pl-corner{position:absolute;width:26px;height:26px;border-color:var(--cyan-border);border-style:solid;opacity:.55;z-index:2;}
.pl-tl{top:24px;left:24px;border-width:1px 0 0 1px;}
.pl-tr{top:24px;right:24px;border-width:1px 1px 0 0;}
.pl-bl{bottom:24px;left:24px;border-width:0 0 1px 1px;}
.pl-br{bottom:24px;right:24px;border-width:0 1px 1px 0;}

.pl-readout{position:absolute;font-family:var(--font-mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--dimmer);z-index:2;white-space:nowrap;}
.pl-readout-tl{top:38px;left:64px;}
.pl-readout-tr{top:38px;right:64px;text-align:right;}
.pl-readout-bl{bottom:38px;left:64px;}
.pl-readout-br{bottom:38px;right:64px;text-align:right;color:var(--cyan);opacity:.65;}

.pl-inner{position:relative;z-index:1;text-align:center;}
.pl-logo{position:relative;display:inline-block;font-family:var(--font-display);font-size:clamp(28px,5vw,40px);font-weight:800;letter-spacing:-1px;color:var(--cream);margin-bottom:2.5rem;}
.pl-tony{color:var(--cream);}
.pl-bytes{color:var(--cyan);text-shadow:0 0 20px var(--cyan-glow);}
.pl-logo::before,.pl-logo::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;overflow:hidden;font:inherit;letter-spacing:inherit;}
.pl-logo::before{color:var(--cyan);clip-path:polygon(0 0,100% 0,100% 35%,0 35%);animation:glitch-top 3.4s infinite;text-shadow:2px 0 var(--cyan);}
.pl-logo::after{color:var(--magenta);clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%);animation:glitch-bot 3.4s infinite;text-shadow:-2px 0 var(--magenta);}

.pl-canvas{width:190px;height:190px;margin:0 auto 1.5rem;display:block;}

.pl-bar-track{width:220px;height:2px;background:rgba(232,244,255,.08);margin:0 auto 1.25rem;overflow:hidden;border-radius:2px;}
#pl-bar{height:100%;background:linear-gradient(90deg,var(--cyan),var(--magenta));box-shadow:0 0 10px var(--cyan-glow);width:0;transition:width .1s linear;}

.pl-msg{width:220px;margin:0 auto;display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-family:var(--font-mono);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--dimmer);}
.pl-msg-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pl-msg-prompt{color:var(--cyan);}
.pl-msg-pct{flex:none;color:var(--cyan);opacity:.7;font-variant-numeric:tabular-nums;letter-spacing:1px;}
.pl-cursor{display:inline-block;margin-left:2px;color:var(--cyan);animation:bhd 0.9s step-end infinite;}

@media(max-width:560px){
  .pl-readout{display:none;}
  .pl-corner{width:18px;height:18px;}
  .pl-tl,.pl-tr{top:16px;}
  .pl-bl,.pl-br{bottom:16px;}
  .pl-tl,.pl-bl{left:16px;}
  .pl-tr,.pl-br{right:16px;}
  .pl-canvas{width:150px;height:150px;}
  .pl-bar-track,.pl-msg{width:180px;}
}
@media(prefers-reduced-motion:reduce){
  #preloader::before,.pl-logo::before,.pl-logo::after,.pl-cursor{animation:none!important;}
  #preloader.is-done{animation:none!important;opacity:0;}
}

/* ── CUSTOM CURSOR ── */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9800;transform:translate(calc(var(--cx,0px) - 50%),calc(var(--cy,0px) - 50%));opacity:0;transition:opacity .3s;}
body.cursor-ready .cursor-dot,body.cursor-ready .cursor-ring{opacity:1;}
.cursor-dot{width:6px;height:6px;background:var(--cyan);border-radius:50%;box-shadow:0 0 8px var(--cyan);}
.cursor-ring{width:28px;height:28px;border:1px solid rgba(0,229,255,.4);border-radius:50%;transition:width .2s,height .2s,opacity .2s;}
.cursor-label{position:fixed;top:0;left:0;pointer-events:none;z-index:9799;transform:translate(calc(var(--cx,0px) + 16px),calc(var(--cy,0px) - 10px));font-family:var(--font-mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);opacity:0;}
body.cur-link .cursor-ring{width:40px;height:40px;border-color:rgba(0,229,255,.6);}
body.cur-view .cursor-label{opacity:1;}
@media(pointer:coarse){.cursor-dot,.cursor-ring,.cursor-label{display:none;}}

/* ── REVEALS ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(0.16,1,0.3,1),transform .6s cubic-bezier(0.16,1,0.3,1);}
.reveal.in{opacity:1;transform:none;}

/* ── UTILS ── */
.wrap{max-width:1200px;margin:0 auto;padding:0 2.5rem;position:relative;z-index:1;}
.eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--cyan);display:flex;align-items:center;gap:10px;margin-bottom:1rem;}
.eyebrow::before{content:'▶';font-size:8px;}
.eyebrow.mag{color:var(--magenta);}
.eyebrow.mag::before{color:var(--magenta);}
.section-title{font-family:var(--font-heading);font-size:clamp(32px,4vw,52px);font-weight:800;letter-spacing:-2px;color:var(--cream);line-height:1.05;margin-bottom:1rem;}
.c{color:var(--cyan);text-shadow:0 0 30px var(--cyan-glow);}
.m{color:var(--magenta);text-shadow:0 0 30px var(--magenta-glow);}
.btn-cyan{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:var(--cyan);color:#07080f;padding:13px 26px;text-decoration:none;cursor:pointer;border:none;--cut:8px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));box-shadow:0 0 28px var(--cyan-glow);transition:box-shadow .2s,transform .1s;}
.btn-cyan:hover{box-shadow:0 0 60px var(--cyan),0 0 100px var(--cyan-glow);transform:translateY(-2px);}
.btn-magenta{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:var(--magenta);color:var(--cream);padding:13px 26px;text-decoration:none;cursor:pointer;border:none;--cut:8px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));box-shadow:0 0 28px var(--magenta-glow);transition:box-shadow .2s,transform .1s;}
.btn-magenta:hover{box-shadow:0 0 60px var(--magenta),0 0 100px var(--magenta-glow);transform:translateY(-2px);}
.btn-wire{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;background:transparent;color:var(--dim);padding:12px 26px;text-decoration:none;border:1px solid var(--cyan-border);--cut:8px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));transition:color .2s,border-color .2s,box-shadow .2s,transform .1s;}
.btn-wire:hover{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 16px var(--cyan-glow);transform:translateY(-1px);}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);display:inline-block;animation:bdot 1.8s ease-in-out infinite;}
@keyframes bdot{0%,100%{opacity:1}50%{opacity:.15}}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:5000;padding:1.1rem 2.5rem;display:flex;align-items:center;justify-content:space-between;transition:padding .4s,background .4s,border-color .4s,box-shadow .4s;}
nav.scrolled{padding:.65rem 2.5rem;background:rgba(7,8,15,.94);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-bottom:1px solid var(--cyan-border);box-shadow:0 2px 40px rgba(0,0,0,.6);}
.nav-wordmark{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.5px;color:var(--cream);text-decoration:none;position:relative;z-index:5100;line-height:1;transition:font-size .4s;user-select:none;}
nav.scrolled .nav-wordmark{font-size:18px;}
.w-tony{color:var(--cream);}
.w-bytes{color:var(--cyan);text-shadow:0 0 16px var(--cyan-glow),0 0 40px rgba(0,229,255,.15);}
.nav-wordmark::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:1px;background:linear-gradient(90deg,var(--cyan),var(--magenta));box-shadow:0 0 6px var(--cyan-glow);transition:width .35s cubic-bezier(0.34,1.56,0.64,1);}
.nav-wordmark:hover::after{width:100%;}
.nav-right{display:flex;align-items:center;gap:14px;position:relative;z-index:5100;}
.nav-hire{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--cream);text-decoration:none;padding:9px 20px;background:var(--magenta);--cut:7px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));box-shadow:0 0 20px var(--magenta-glow),inset 0 1px 0 rgba(255,255,255,.12);transition:box-shadow .2s,transform .15s,padding .4s;white-space:nowrap;}
.nav-hire:hover{box-shadow:0 0 50px var(--magenta),0 0 100px var(--magenta-glow);transform:translateY(-1px);}
nav.scrolled .nav-hire{padding:7px 16px;font-size:10px;}
.burger{position:relative;width:46px;height:46px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;z-index:5100;transition:width .4s,height .4s;}
nav.scrolled .burger{width:40px;height:40px;}
.bf{position:absolute;inset:0;pointer-events:none;}
.bf::before,.bf::after,.bf .bfl,.bf .bfr{content:'';position:absolute;width:9px;height:9px;border-color:var(--cyan);border-style:solid;opacity:.12;transition:opacity .25s,box-shadow .25s;}
.bf::before{top:0;left:0;border-width:2px 0 0 2px;}.bf::after{top:0;right:0;border-width:2px 2px 0 0;}
.bf .bfl{bottom:0;left:0;border-width:0 0 2px 2px;}.bf .bfr{bottom:0;right:0;border-width:0 2px 2px 0;}
.burger:hover .bf::before,.burger:hover .bf::after,.burger:hover .bf .bfl,.burger:hover .bf .bfr,
.burger.open .bf::before,.burger.open .bf::after,.burger.open .bf .bfl,.burger.open .bf .bfr{opacity:1;box-shadow:0 0 10px var(--cyan-glow);}
.blines{display:flex;flex-direction:column;gap:5px;}
.bline{display:block;height:2px;background:var(--cream);transition:transform .38s cubic-bezier(0.23,1,0.32,1),opacity .2s,width .3s,background .25s,box-shadow .25s;transform-origin:center;}
.bline:nth-child(1){width:26px;}.bline:nth-child(2){width:18px;margin-left:auto;}.bline:nth-child(3){width:22px;}
.burger:hover .bline{width:26px!important;background:var(--cyan);box-shadow:0 0 10px var(--cyan-glow);}
.burger.open .blines{gap:0;}
.burger.open .bline{background:var(--cyan);box-shadow:0 0 10px var(--cyan-glow);}
.burger.open .bline:nth-child(1){transform:translateY(7px) rotate(45deg);width:26px;}
.burger.open .bline:nth-child(2){opacity:0;transform:scaleX(0);}
.burger.open .bline:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:26px;}
.burger-glow{position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,rgba(0,229,255,.1) 0%,transparent 70%);opacity:0;transition:opacity .35s;pointer-events:none;}
.burger.open .burger-glow{opacity:1;}

/* ── MENU HINT ── */
.menu-hint{position:fixed;z-index:5050;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;transition:opacity .45s ease,transform .45s ease;transform:translateY(6px);}
.menu-hint.show{opacity:1;transform:translateY(0);}
.hint-label{font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 10px var(--cyan-glow);white-space:nowrap;animation:hpulse 2.4s ease-in-out infinite;}
@keyframes hpulse{0%,100%{opacity:1}50%{opacity:.4}}
.hint-arrow{width:28px;height:34px;color:var(--cyan);filter:drop-shadow(0 0 5px var(--cyan-glow));animation:hbounce 2s ease-in-out infinite;}
@keyframes hbounce{0%,100%{transform:translate(0,0) rotate(0deg)}35%{transform:translate(2px,-5px) rotate(-6deg)}65%{transform:translate(-1px,-2px) rotate(3deg)}}

/* Theme hint gets its own identity -- a tri-color gradient echoing the
   theme button's own dots -- so alternating with the (plain cyan) menu
   hint always reads as two distinct things, never a repeat. */
.theme-hint .hint-label{background:linear-gradient(90deg,var(--green),var(--magenta) 55%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;}
.theme-hint .hint-arrow{color:var(--magenta);filter:drop-shadow(0 0 5px var(--magenta-glow));}

/* ── OVERLAY ── */
.nav-overlay{position:fixed;inset:0;z-index:4999;background:var(--bg);pointer-events:none;clip-path:inset(0 0 100% 0);transition:clip-path .55s cubic-bezier(0.77,0,0.18,1),visibility 0s linear .55s;display:flex;flex-direction:column;visibility:hidden;}
.nav-overlay.open{pointer-events:all;clip-path:inset(0 0 0% 0);visibility:visible;transition:clip-path .55s cubic-bezier(0.77,0,0.18,1),visibility 0s;}
@keyframes crt-on{0%{opacity:0;filter:brightness(5) saturate(2)}6%{opacity:1;filter:brightness(2.5)}14%{opacity:.4;filter:brightness(.2)}26%{opacity:1;filter:brightness(1.8)}100%{opacity:1;filter:brightness(1)}}
.nav-overlay.open .ov-inner{animation:crt-on .5s ease-out forwards;}
.ov-grid{position:absolute;inset:0;background-image:linear-gradient(var(--cyan-dim) 1px,transparent 1px),linear-gradient(90deg,var(--cyan-dim) 1px,transparent 1px);background-size:48px 48px;opacity:.45;pointer-events:none;}
.ov-ga{position:absolute;top:-15%;left:-10%;width:65vw;height:65vw;background:radial-gradient(circle,rgba(0,229,255,.07) 0%,transparent 65%);pointer-events:none;}
.ov-gb{position:absolute;bottom:-15%;right:-10%;width:55vw;height:55vw;background:radial-gradient(circle,rgba(255,0,144,.07) 0%,transparent 65%);pointer-events:none;}
.ov-inner{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;padding:7rem 2.5rem 2.5rem;}
.ov-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2.5rem;flex-wrap:wrap;gap:1rem;}
.ov-eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:4px;text-transform:uppercase;color:rgba(0,229,255,.3);display:flex;align-items:center;gap:12px;}
.ov-eyebrow::before{content:'';width:28px;height:1px;background:rgba(0,229,255,.25);flex-shrink:0;}
.ov-current{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--dimmer);display:flex;align-items:center;gap:6px;}
.ov-current-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);}
.ov-links{list-style:none;flex:1;display:flex;flex-direction:column;justify-content:safe center;margin-bottom:2rem;overflow-y:auto;overscroll-behavior:contain;}
.ov-li{border-bottom:1px solid rgba(232,244,255,.05);overflow:hidden;}
.ov-li:first-child{border-top:1px solid rgba(232,244,255,.05);}
.ov-link{display:flex;align-items:center;gap:1.5rem;padding:1rem 0;text-decoration:none;color:var(--dim);position:relative;overflow:hidden;transition:color .2s;cursor:pointer;}
.ov-link::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(0,229,255,.04);transition:width .45s cubic-bezier(0.34,1.56,0.64,1);}
.ov-link:hover::before{width:100%;}
.ov-link:hover{color:var(--cream);}
.ov-num{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:rgba(0,229,255,.25);flex-shrink:0;width:36px;transition:color .2s;}
.ov-link:hover .ov-num,.ov-li.active .ov-num{color:var(--cyan);}
.ov-name{font-family:var(--font-heading);font-size:clamp(22px,min(7vw,6vh),80px);font-weight:800;letter-spacing:-.02em;line-height:1;flex:1;transition:transform .35s cubic-bezier(0.34,1.56,0.64,1),color .2s,text-shadow .2s;}
.ov-link:hover .ov-name{transform:translateX(16px);color:var(--cyan);text-shadow:0 0 40px var(--cyan-glow);}
.ov-li.active .ov-link{color:var(--cream);}
.ov-li.active .ov-name{color:var(--cyan);text-shadow:0 0 30px var(--cyan-glow);}
.ov-active-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan),0 0 20px var(--cyan-glow);flex-shrink:0;opacity:0;transition:opacity .2s;}
.ov-li.active .ov-active-dot{opacity:1;}
.ov-li:nth-child(2n) .ov-link:hover .ov-name{color:var(--magenta);text-shadow:0 0 40px var(--magenta-glow);}
.ov-li:nth-child(2n) .ov-link:hover .ov-num{color:var(--magenta);}
.ov-li:nth-child(2n) .ov-arr{color:var(--magenta);}
.ov-arr{font-size:20px;color:var(--cyan);opacity:0;transform:translateX(-14px);transition:opacity .2s,transform .35s cubic-bezier(0.34,1.56,0.64,1);flex-shrink:0;}
.ov-link:hover .ov-arr{opacity:1;transform:translateX(0);}
.nav-overlay.open .ov-li{animation:sli .5s cubic-bezier(0.34,1.56,0.64,1) both;}
.nav-overlay.open .ov-li:nth-child(1){animation-delay:.13s;}
.nav-overlay.open .ov-li:nth-child(2){animation-delay:.20s;}
.nav-overlay.open .ov-li:nth-child(3){animation-delay:.27s;}
.nav-overlay.open .ov-li:nth-child(4){animation-delay:.34s;}
.nav-overlay.open .ov-li:nth-child(5){animation-delay:.41s;}
.nav-overlay.open .ov-li:nth-child(6){animation-delay:.48s;}
.nav-overlay.open .ov-li:nth-child(7){animation-delay:.55s;}
.nav-overlay.open .ov-li:nth-child(8){animation-delay:.62s;}
@keyframes sli{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
.ov-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:1.75rem;border-top:1px solid rgba(232,244,255,.06);}
.ov-discord{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(88,101,242,.65);text-decoration:none;padding:9px 16px;border:1px solid rgba(88,101,242,.2);--cut:6px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));transition:color .2s,border-color .2s,background .2s;}
.ov-discord svg{width:16px;height:16px;fill:currentColor;}
.ov-discord:hover{color:#7289da;border-color:rgba(88,101,242,.5);background:rgba(88,101,242,.08);}
.ov-coin{font-family:var(--font-mono);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(0,229,255,.15);animation:bhd 2s step-end infinite;}
@keyframes bhd{0%,100%{opacity:1}50%{opacity:0}}
.ov-hire-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--magenta);text-decoration:none;padding:9px 18px;border:1px solid var(--magenta-border);--cut:6px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));transition:color .2s,border-color .2s,background .2s,box-shadow .2s;}
.ov-hire-link:hover{border-color:rgba(255,0,144,.5);background:var(--magenta-dim);box-shadow:0 0 20px var(--magenta-glow);}

/* ── MARQUEE ── */
.marquee{border-top:1px solid var(--cyan-border);border-bottom:1px solid var(--cyan-border);background:rgba(0,229,255,.025);padding:11px 0;overflow:hidden;position:relative;z-index:10;}
.mq-track{display:flex;width:max-content;animation:mq 32s linear infinite;}
.mq-track span{font-family:var(--font-mono);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(0,229,255,.4);padding:0 2rem;white-space:nowrap;}
.mq-track .sep{color:var(--magenta);opacity:.7;}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── FOOTER ── */
footer{border-top:1px solid var(--cyan-border);padding:3.5rem 0 2.5rem;}
.ft-panel{position:relative;border:1px solid rgba(232,244,255,.08);background:linear-gradient(180deg,rgba(0,229,255,.025),transparent);padding:2.5rem 2.5rem 1.5rem;--cut:18px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));}
.ft-spotlight{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(360px circle at var(--fmx,50%) var(--fmy,50%),rgba(0,229,255,.09),transparent 70%);mix-blend-mode:screen;}
.ft-panel.is-active .ft-spotlight{opacity:1;}
.ft-corner{position:absolute;width:16px;height:16px;border-color:var(--cyan-border);border-style:solid;opacity:0;transform:scale(1.4);transition:opacity .4s ease .15s,transform .4s cubic-bezier(0.34,1.56,0.64,1) .15s;pointer-events:none;}
.ft-panel.in .ft-corner{opacity:.6;transform:scale(1);}
.ft-tl{top:-1px;left:-1px;border-width:1px 0 0 1px;}
.ft-tr{top:-1px;right:-1px;border-width:1px 1px 0 0;}
.ft-bl{bottom:-1px;left:-1px;border-width:0 0 1px 1px;}
.ft-br{bottom:-1px;right:-1px;border-width:0 1px 1px 0;}

.ft-cta{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:2.25rem;}
.ft-eyebrow{font-family:var(--font-mono);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--cyan);margin-bottom:.6rem;}
.ft-headline{font-family:var(--font-heading);font-size:clamp(22px,3vw,34px);font-weight:800;letter-spacing:-1px;color:var(--cream);line-height:1.15;}
.ft-glitch{position:relative;display:inline-block;color:var(--cream);}
.ft-glitch::before,.ft-glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;overflow:hidden;font:inherit;letter-spacing:inherit;}
.ft-glitch::before{color:var(--cyan);clip-path:polygon(0 0,100% 0,100% 35%,0 35%);animation:glitch-top 5s infinite;text-shadow:2px 0 var(--cyan);}
.ft-glitch::after{color:var(--magenta);clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%);animation:glitch-bot 5s infinite;text-shadow:-2px 0 var(--magenta);}
.ft-cta-btn{flex-shrink:0;}

.ft-divider{height:1px;background:linear-gradient(90deg,var(--cyan-border),transparent 65%);margin-bottom:2.25rem;}

.ft-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2rem;}
.ft-col{display:flex;flex-direction:column;gap:.65rem;}
.ft-col-label{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--dimmer);margin-bottom:.25rem;}
.ft-col a{font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;color:var(--dim);text-decoration:none;transition:color .2s;width:fit-content;}
.ft-col a:hover{color:var(--cyan);}
.footer-wm{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--cream);}
.footer-wm em{color:var(--cyan);font-style:normal;text-shadow:0 0 16px var(--cyan-glow);}
.ft-tagline{font-size:12px;color:var(--dim);line-height:1.5;max-width:220px;margin:.75rem 0 1rem;}
.ft-status{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--green);width:fit-content;max-width:100%;}
.ft-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:sdp 1.8s ease-in-out infinite;flex-shrink:0;}
.ft-time{color:var(--dimmer);letter-spacing:1px;}
.ft-time::before{content:'· ';}
.ft-stat{display:flex;align-items:baseline;gap:8px;}
.ft-stat strong{font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--cyan);}
.ft-stat span{font-family:var(--font-mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--dimmer);}

.ft-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:1.25rem;border-top:1px solid rgba(232,244,255,.06);}
.footer-copy{font-family:var(--font-mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--dimmer);}
.footer-legal-link{color:var(--dimmer);text-decoration:underline;text-decoration-color:rgba(232,244,255,.15);text-underline-offset:2px;transition:color .2s,text-decoration-color .2s;}
.footer-legal-link:hover{color:var(--cyan);text-decoration-color:var(--cyan-border);}
.footer-coin{font-family:var(--font-mono);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(0,229,255,.16);animation:bhd 2s step-end infinite;}
.footer-arcade{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(0,229,255,.7);cursor:pointer;background:rgba(0,229,255,.03);border:1px solid rgba(0,229,255,.15);border-radius:999px;padding:7px 15px;transition:color .2s,border-color .2s,background .2s,box-shadow .2s;}
.footer-arcade:hover{color:var(--cyan);border-color:var(--cyan);background:var(--cyan-dim);box-shadow:0 0 16px var(--cyan-glow);}

@media(max-width:900px){
  .ft-grid{grid-template-columns:1fr 1fr;}
  .ft-panel{padding:2rem 1.5rem 1.25rem;}
}
@media(max-width:560px){
  .ft-grid{grid-template-columns:1fr 1fr;gap:1.5rem 1rem;}
  .ft-cta{flex-direction:column;align-items:flex-start;}
}
@media(max-width:480px){
  .ft-grid{grid-template-columns:1fr;gap:1.75rem;}
  .ft-bottom{justify-content:flex-start;}
}
@media(prefers-reduced-motion:reduce){
  .ft-glitch::before,.ft-glitch::after,.ft-dot{animation:none!important;}
}

@media(max-width:600px){
nav{padding:.9rem 1.5rem;}
nav.scrolled{padding:.55rem 1.5rem;}
.ov-inner{padding:5.5rem 1.5rem 2rem;}
.wrap{padding:0 1.5rem;}
/* Icon-only Hire Me on mobile — "Hire Me" text collapses to just the arrow
   so the wordmark, CTA, theme button, and burger all fit without crowding.
   The theme button joining this row (after Hire Me/burger were already
   tuned for mobile) pushed the row past the available width, so the
   wordmark also drops to the same compact size already used once scrolled,
   and nav-right's gap tightens slightly -- together that's real headroom,
   not just closing the gap exactly. */
.nav-wordmark{font-size:18px;}
.nav-right{gap:10px;}
.nav-hire{width:44px;height:44px;padding:0;justify-content:center;gap:0;}
.nav-hire span:first-child{display:none;}
.nav-hire span:last-child{font-size:17px;}
nav.scrolled .nav-hire{width:38px;height:38px;}
}
@media(max-width:360px){
nav{padding:.9rem 1rem;}
nav.scrolled{padding:.55rem 1rem;}
.nav-wordmark{font-size:16px;}
.nav-right{gap:8px;}
}


/* ══ TONYBOT ══ */
#tonybot{--tb-accent:#00e5ff;--tb-accent-rgb:0,229,255;position:fixed;bottom:0;z-index:300;left:14px;pointer-events:auto;user-select:none;display:flex;flex-direction:column;align-items:flex-start;}
#tonybot.is-hidden{transform:translateY(calc(100% - 18px));transition:transform .45s cubic-bezier(0.16,1,0.3,1);cursor:pointer;}
#tonybot.is-hidden:hover{transform:translateY(calc(100% - 26px));transition:transform .2s cubic-bezier(0.16,1,0.3,1);}
#tonybot.is-hidden .tonybot-bubble{opacity:0!important;pointer-events:none!important;transition:none;}
.tonybot-bubble{position:absolute;bottom:calc(100% + 8px);left:0;width:250px;padding:14px 16px 12px;background:#0a0c16;border:1px solid rgba(var(--tb-accent-rgb),.25);--cut:10px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));box-shadow:0 8px 32px rgba(0,0,0,.55),0 0 24px rgba(var(--tb-accent-rgb),.08);transform:translateY(6px) scale(.96);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease,border-color .3s,box-shadow .3s;}
.tonybot-bubble.is-visible{opacity:1;transform:none;pointer-events:auto;}
.tb-corner{position:absolute;width:9px;height:9px;border-color:var(--tb-accent);border-style:solid;opacity:.65;pointer-events:none;transition:border-color .3s;}
.tb-corner-tl{top:5px;left:5px;border-width:1px 0 0 1px;}
.tb-corner-br{bottom:5px;right:5px;border-width:0 1px 1px 0;}
.tonybot-bubble-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.tonybot-label{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--tb-accent);display:flex;align-items:center;gap:6px;transition:color .3s;}
.tonybot-label::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--tb-accent);box-shadow:0 0 8px var(--tb-accent);animation:tb-pulse 2s ease-in-out infinite;transition:background .3s,box-shadow .3s;}
@keyframes tb-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.tonybot-controls{display:flex;gap:6px;}
.tonybot-btn{padding:4px 9px;border-radius:999px;border:1px solid rgba(232,244,255,.1);background:rgba(232,244,255,.04);font-family:var(--font-mono);font-size:7px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(232,244,255,.35);transition:color .2s,border-color .2s;cursor:pointer;}
.tonybot-btn:hover{color:var(--tb-accent);border-color:rgba(var(--tb-accent-rgb),.3);}
.tonybot-typing{display:none;align-items:center;gap:4px;padding:6px 2px 4px;min-height:28px;}
.tonybot-typing span{width:5px;height:5px;border-radius:50%;background:rgba(var(--tb-accent-rgb),.5);animation:tb-dot .9s ease-in-out infinite;}
.tonybot-typing span:nth-child(2){animation-delay:.18s;background:rgba(var(--tb-accent-rgb),.65);}
.tonybot-typing span:nth-child(3){animation-delay:.36s;background:rgba(var(--tb-accent-rgb),.45);}
@keyframes tb-dot{0%,80%,100%{transform:scale(.8);opacity:.5}40%{transform:scale(1.1);opacity:1}}
.tonybot-text{font-size:13px;font-weight:500;color:rgba(232,244,255,.65);line-height:1.55;min-height:20px;}
.tonybot-char{width:68px;height:84px;cursor:pointer;display:block;outline:none!important;transition:transform .18s cubic-bezier(0.34,1.56,0.64,1),filter .3s;filter:drop-shadow(0 0 5px rgba(var(--tb-accent-rgb),.3)) drop-shadow(0 0 2px rgba(var(--tb-accent-rgb),.2));}
.tonybot-char:hover{transform:translateY(-3px) scale(1.05);filter:drop-shadow(0 0 14px rgba(var(--tb-accent-rgb),.55)) drop-shadow(0 0 4px rgba(var(--tb-accent-rgb),.35));}
.tonybot-char:active{transform:scale(.92);}
/* outline:none above strips the native focus ring with nothing standing in
   for keyboard users -- this is a real tabindex="0" role="button" control
   (Enter/Space activate it), so it needs its own visible focus state. */
.tonybot-char:focus-visible{outline:2px solid rgba(var(--tb-accent-rgb),.9)!important;outline-offset:4px;border-radius:8px;}
#tonybot.is-easter-armed .tonybot-char{animation:tbArmedPulse 1.1s ease-in-out infinite;}
@keyframes tbArmedPulse{0%,100%{filter:drop-shadow(0 0 6px rgba(0,229,255,.5)) drop-shadow(0 0 2px rgba(0,229,255,.3))}50%{filter:drop-shadow(0 0 16px rgba(255,0,144,.65)) drop-shadow(0 0 6px rgba(0,229,255,.4))}}
@media(prefers-reduced-motion:reduce){#tonybot.is-easter-armed .tonybot-char{animation:none;filter:drop-shadow(0 0 12px rgba(255,0,144,.6));}}

/* ── Touch targets — the New/Hide buttons and the hidden-state peek strip
   are sized for a precise mouse cursor by default; on a coarse (touch)
   pointer, enlarge both toward the ~44px minimum Apple/Google recommend. ── */
@media(pointer:coarse){
  #tonybot.is-hidden{transform:translateY(calc(100% - 40px));}
  .tonybot-controls{gap:8px;}
  .tonybot-btn{padding:9px 14px;font-size:10px;min-height:34px;display:inline-flex;align-items:center;justify-content:center;}
}

/* ── Turnaround beat — brief squash when the walk direction flips ── */
/* Note: deliberately animates opacity/brightness, not transform — the walk
   loop already drives transform:scaleX(±1) via inline style for facing, and
   an inline style always wins over a CSS animation's transform, so a squash
   keyframe here would just silently lose that fight. */
#tonybot.is-turning .tonybot-char{animation:tbTurn .3s ease-in-out;}
@keyframes tbTurn{0%,100%{opacity:1}50%{opacity:.55}}

/* ── Materialize entrance — plays once per page load ── */
#tonybot.tb-materialize{animation:tbMaterialize .6s steps(2,end) both;}
@keyframes tbMaterialize{
  0%{opacity:0;filter:brightness(3) blur(2px);}
  8%{opacity:1;}
  16%{opacity:.25;}
  24%{opacity:1;}
  32%{opacity:.45;}
  40%{opacity:1;filter:brightness(1.6);}
  100%{opacity:1;filter:none;}
}
@media(prefers-reduced-motion:reduce){
  #tonybot.tb-materialize{animation:tbMaterializeReduced .4s ease-out both;}
  @keyframes tbMaterializeReduced{from{opacity:0}to{opacity:1}}
  #tonybot.is-turning .tonybot-char{animation:none;}
}

/* ══ SPACE INVADERS ══ */
#invaders-overlay{position:fixed;inset:0;z-index:5200;background:rgba(7,8,15,.96);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s,visibility 0s linear .3s;padding:20px;visibility:hidden;}
#invaders-overlay.is-open{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .3s,visibility 0s;}
.inv-close{position:absolute;top:20px;right:20px;padding:9px 18px;border-radius:999px;border:1px solid rgba(232,244,255,.1);background:rgba(232,244,255,.04);font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(232,244,255,.5);transition:color .2s,border-color .2s;cursor:pointer;}
.inv-close:hover{color:#00e5ff;border-color:rgba(0,229,255,.3);}
/* safe center: once the game is taller than the viewport, plain centring
   pushes the header into unreachable negative space. */
#invaders-overlay{overflow-y:auto;justify-content:safe center;}
@media (max-height:700px){
  .inv-title{font-size:clamp(20px,3vw,28px);}
  .inv-header{margin-bottom:8px;}
  .arcade-tabs{margin-top:8px;}
  .inv-canvas{max-height:calc(100vh - 250px);max-height:calc(100dvh - 250px);}
}
.inv-header{text-align:center;margin-bottom:16px;}
.inv-title{font-family:var(--font-display);font-size:clamp(28px,4vw,48px);font-weight:800;letter-spacing:.04em;color:#00e5ff;text-shadow:0 0 30px rgba(0,229,255,.5);}
.inv-meta{font-family:var(--font-mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(232,244,255,.3);margin-top:4px;}
.arcade-tabs{display:flex;gap:8px;justify-content:center;margin-top:14px;}
.arcade-tab{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border-radius:999px;border:1px solid rgba(232,244,255,.1);background:transparent;color:rgba(232,244,255,.4);cursor:pointer;transition:color .2s,border-color .2s,background .2s,box-shadow .2s;}
.arcade-tab:hover{color:rgba(232,244,255,.8);border-color:rgba(0,229,255,.25);}
.arcade-tab.active{color:#00e5ff;border-color:#00e5ff;background:rgba(0,229,255,.08);box-shadow:0 0 16px rgba(0,229,255,.25);}
.inv-hud{display:flex;gap:28px;margin-bottom:12px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.16em;}
.inv-hud-item{text-align:center;}
.inv-hud-item span{display:block;font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:rgba(232,244,255,.3);margin-bottom:2px;}
.inv-hud-item strong{color:#00e5ff;font-size:14px;}
.inv-frame{border:1px solid rgba(0,229,255,.3);border-radius:16px;overflow:hidden;position:relative;}
.inv-canvas{display:block;max-width:100%;
  /* The 640x480 canvas had max-width but no max-height, so it scaled on a
     narrow screen and never on a short one. At 1024x500 the title sat 110px
     ABOVE the viewport and the game ran off the bottom, with no scroll --
     the same failure as the nav overlay. Canvas is a replaced element with
     an intrinsic ratio, so capping height alone rescales it proportionally. */
  max-height:calc(100vh - 300px);max-height:calc(100dvh - 300px);}
.inv-crt{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0px,rgba(0,0,0,.08) 1px,transparent 1px,transparent 4px);border-radius:16px;z-index:1;}
.inv-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;justify-content:center;}
.inv-btn{padding:10px 20px;border-radius:999px;border:1px solid rgba(232,244,255,.1);background:rgba(232,244,255,.04);font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,244,255,.5);transition:color .2s,border-color .2s,background .2s;cursor:pointer;}
.inv-btn:hover{color:#00e5ff;border-color:rgba(0,229,255,.3);background:rgba(0,229,255,.06);}
.inv-btn-start{background:#00e5ff;color:#07080f;border-color:#00e5ff;font-weight:900;}
.inv-btn-start:hover{background:#33eaff;box-shadow:0 6px 24px rgba(0,229,255,.3);}
.inv-touch{display:none;}
@media(pointer:coarse){.inv-touch{display:flex;gap:12px;margin-top:12px;}.inv-touch-btn{width:56px;height:56px;border-radius:16px;border:1px solid rgba(232,244,255,.1);background:rgba(232,244,255,.04);font-family:var(--font-mono);font-size:18px;color:rgba(232,244,255,.8);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.pac-dpad{display:grid!important;grid-template-columns:56px 56px 56px;grid-template-rows:56px 56px 56px;gap:8px;margin-top:12px;}
.pac-up{grid-column:2;grid-row:1;}.pac-left{grid-column:1;grid-row:2;}.pac-down{grid-column:2;grid-row:3;}.pac-right{grid-column:3;grid-row:2;}}
.inv-message,.inv-celebration{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#00e5ff;z-index:2;text-align:center;background:rgba(7,8,15,.85);padding:12px 20px;border-radius:8px;pointer-events:none;}
.inv-celebration{display:none;}


/* ══ HERO ══ */
/* svh, not vh: on iOS Safari 100vh includes the area behind the address
   bar, so the hero rendered taller than the visible viewport -- the centred
   content sat low and shifted when the bar collapsed. svh is the viewport
   with the chrome showing, which is what the visitor actually sees first.
   The plain vh line stays as the fallback for older browsers. */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;padding-top:0;}
.hero-pills{position:relative;z-index:2;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:5.5rem 2.5rem 0;}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-bg::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(0,229,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,0.04) 1px,transparent 1px);background-size:48px 48px;animation:grid-drift 20s linear infinite;}
@keyframes grid-drift{from{transform:translateY(0)}to{transform:translateY(48px)}}
.hero-bg::after{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(-45deg,transparent,transparent 60px,rgba(0,229,255,0.015) 60px,rgba(0,229,255,0.015) 61px);}
.glow-c{position:absolute;top:-20%;right:-5%;width:80vw;height:80vw;background:radial-gradient(circle,rgba(0,229,255,0.12) 0%,rgba(0,229,255,0.04) 35%,transparent 65%);pointer-events:none;animation:breathe-c 8s ease-in-out infinite;}
@keyframes breathe-c{0%,100%{transform:scale(1) translate(0,0);opacity:0.7}50%{transform:scale(1.08) translate(-2%,2%);opacity:1}}
.glow-m{position:absolute;bottom:-20%;left:-5%;width:70vw;height:70vw;background:radial-gradient(circle,rgba(255,0,144,0.1) 0%,rgba(255,0,144,0.03) 35%,transparent 65%);pointer-events:none;animation:breathe-m 10s ease-in-out infinite reverse;}
@keyframes breathe-m{0%,100%{transform:scale(1);opacity:0.6}50%{transform:scale(1.1);opacity:0.9}}
.scan-beam{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,229,255,0.3),transparent);box-shadow:0 0 20px rgba(0,229,255,0.2);animation:scan-sweep 6s linear infinite;pointer-events:none;z-index:1;}
@keyframes scan-sweep{0%{top:-2px;opacity:0}5%{opacity:1}95%{opacity:1}100%{top:100%;opacity:0}}
.particles{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.particle{position:absolute;background:var(--cyan);animation:particle-float linear infinite;}
@keyframes particle-float{0%{transform:translateY(100vh) translateX(0) rotate(0deg);opacity:0}10%{opacity:1}90%{opacity:0.6}100%{transform:translateY(-10vh) translateX(var(--dx)) rotate(360deg);opacity:0}}
.hero-content{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;padding:1.5rem 2.5rem 0;max-width:1400px;margin:0 auto;width:100%;}
.status-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:2px;text-transform:uppercase;padding:6px 14px;--cut:5px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));}
.sp-live{color:var(--green);background:rgba(57,255,20,0.06);border:1px solid rgba(57,255,20,0.2);}
.sp-solo{color:var(--cyan);background:var(--cyan-dim);border:1px solid var(--cyan-border);}
.sp-hiring{color:var(--magenta);background:var(--magenta-dim);border:1px solid var(--magenta-border);}
.status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.sd-g{background:var(--green);box-shadow:0 0 8px var(--green);animation:sdp 1.8s ease-in-out infinite;}
.sd-c{background:var(--cyan);box-shadow:0 0 8px var(--cyan);}
.sd-m{background:var(--magenta);box-shadow:0 0 8px var(--magenta);animation:sdp 1.8s ease-in-out infinite;}
@keyframes sdp{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.6)}}
.hero-headline-wrap{position:relative;margin-bottom:2.5rem;}
.hero-bg-text{position:absolute;top:50%;left:-1rem;transform:translateY(-50%);font-family:var(--font-display);font-size:clamp(120px,18vw,260px);font-weight:800;letter-spacing:-8px;color:transparent;-webkit-text-stroke:1px rgba(0,229,255,0.05);white-space:nowrap;pointer-events:none;user-select:none;z-index:0;line-height:1;}
.hero-headline{position:relative;z-index:1;font-family:var(--font-display);font-weight:800;line-height:0.88;letter-spacing:-4px;}
.hl-label{display:block;font-family:var(--font-mono);font-size:clamp(11px,1.2vw,14px);font-weight:400;letter-spacing:4px;text-transform:uppercase;color:var(--dimmer);line-height:1;margin-bottom:0.6rem;}
.hl-tony{display:block;font-size:clamp(80px,13vw,200px);color:var(--cream);position:relative;}
.hl-tony::before,.hl-tony::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;overflow:hidden;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;}
.hl-tony::before{color:var(--cyan);clip-path:polygon(0 0,100% 0,100% 35%,0 35%);animation:glitch-top 4s infinite;text-shadow:2px 0 var(--cyan);}
.hl-tony::after{color:var(--magenta);clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%);animation:glitch-bot 4s infinite;text-shadow:-2px 0 var(--magenta);}
@keyframes glitch-top{0%,90%,100%{transform:translate(0,0);opacity:0}91%{transform:translate(-3px,0);opacity:0.8}92%{transform:translate(3px,0);opacity:0.8}93%{transform:translate(0,0);opacity:0}94%{transform:translate(-2px,-1px);opacity:0.8}95%{transform:translate(0,0);opacity:0}}
@keyframes glitch-bot{0%,90%,100%{transform:translate(0,0);opacity:0}91%{transform:translate(3px,1px);opacity:0.8}92%{transform:translate(-3px,0);opacity:0.8}93%{transform:translate(0,0);opacity:0}94%{transform:translate(2px,-1px);opacity:0.8}95%{transform:translate(0,0);opacity:0}}
.hl-bytes{display:block;font-size:clamp(80px,13vw,200px);color:transparent;-webkit-text-stroke:2px var(--cyan);text-shadow:0 0 40px rgba(0,229,255,0.4),0 0 80px rgba(0,229,255,0.2),0 0 160px rgba(0,229,255,0.1);}
.hl-tagline{display:block;font-family:var(--font-body);font-size:clamp(14px,1.6vw,20px);font-weight:400;letter-spacing:0;color:var(--dim);line-height:1.5;margin-top:1.5rem;max-width:560px;}
.hl-tagline strong{color:var(--cream);font-weight:600;}
.hero-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:680px;}
.cta-card{display:flex;flex-direction:column;gap:0.5rem;padding:1.25rem 1.5rem;text-decoration:none;position:relative;overflow:hidden;transition:transform 0.2s,box-shadow 0.2s,border-color 0.2s;--cut:10px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));}
.cta-card:hover{transform:translateY(-3px);}
.cta-card-a{background:rgba(0,229,255,0.06);border:1px solid var(--cyan-border);}
.cta-card-a:hover{border-color:var(--cyan);box-shadow:0 0 40px rgba(0,229,255,0.2),inset 0 0 40px rgba(0,229,255,0.05);}
.cta-card-b{background:rgba(255,0,144,0.06);border:1px solid var(--magenta-border);}
.cta-card-b:hover{border-color:var(--magenta);box-shadow:0 0 40px rgba(255,0,144,0.2),inset 0 0 40px rgba(255,0,144,0.05);}
.cta-card-label{font-family:var(--font-mono);font-size:9px;letter-spacing:2.5px;text-transform:uppercase;display:flex;align-items:center;gap:6px;}
.cta-card-a .cta-card-label{color:var(--cyan);}.cta-card-b .cta-card-label{color:var(--magenta);}
.cta-card-title{font-family:var(--font-heading);font-size:clamp(18px,2vw,24px);font-weight:800;letter-spacing:-0.5px;color:var(--cream);line-height:1.1;}
.cta-card-sub{font-size:12px;color:var(--dimmer);line-height:1.5;}
.cta-card-action{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;margin-top:0.25rem;transition:gap 0.2s;}
.cta-card-a .cta-card-action{color:var(--cyan);}.cta-card-b .cta-card-action{color:var(--magenta);}
.cta-card:hover .cta-card-action{gap:10px;}
.hero-stat-bar{position:relative;z-index:2;border-top:1px solid rgba(0,229,255,0.1);padding:0 2.5rem;max-width:1400px;width:100%;margin:auto auto 0;}
.stat-bar-inner{display:grid;grid-template-columns:repeat(5,1fr);}
.stat-item{padding:1.5rem 0;text-align:center;border-right:1px solid rgba(232,244,255,0.05);transition:background 0.2s;}
.stat-item:last-child{border-right:none;}
.stat-item:hover{background:rgba(0,229,255,0.02);}
.stat-val{font-family:var(--font-display);font-size:clamp(24px,3vw,40px);font-weight:800;letter-spacing:-2px;display:block;line-height:1;margin-bottom:4px;}
.sv-c{color:var(--cyan);text-shadow:0 0 20px var(--cyan-glow);}
.sv-m{color:var(--magenta);text-shadow:0 0 20px var(--magenta-glow);}
.sv-g{color:var(--green);text-shadow:0 0 20px var(--green-glow);}
.sv-w{color:var(--cream);}
.stat-lbl{font-family:var(--font-mono);font-size:clamp(8px,0.9vw,10px);letter-spacing:1.5px;text-transform:uppercase;color:var(--dimmer);display:block;line-height:1.3;}
@media(max-width:960px){.hero-cta-row{grid-template-columns:1fr;}.stat-bar-inner{grid-template-columns:repeat(3,1fr);}.stat-item:nth-child(4),.stat-item:nth-child(5){display:none;}.hero-pills{padding:5rem 1.5rem 0;}.hero-content{padding:1rem 1.5rem 0;}.hero-stat-bar{padding:0 1.5rem;}}

/* ── THEME SWITCHER (button lives in nav-right; modal is a themeable
   plugin picker -- it reads the active theme's own variables, so it
   restyles itself automatically whichever theme is currently on) ── */
.theme-btn{position:relative;width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(232,244,255,.04);border:1px solid rgba(232,244,255,.12);cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s;--cut:6px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));}
.theme-btn:hover{border-color:var(--cyan-border);box-shadow:0 0 16px var(--cyan-glow);transform:translateY(-1px);}
.theme-btn-icon{display:flex;transition:transform .5s cubic-bezier(0.34,1.56,0.64,1);}
.theme-btn:hover .theme-btn-icon,.theme-btn.is-active .theme-btn-icon{transform:rotate(150deg);}
@media(prefers-reduced-motion:reduce){.theme-btn-icon{transition:none;}.theme-btn:hover .theme-btn-icon,.theme-btn.is-active .theme-btn-icon{transform:none;}}

.theme-modal-overlay{position:fixed;inset:0;z-index:6000;background:rgba(7,8,15,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;pointer-events:none;transition:opacity .25s,visibility 0s linear .25s;visibility:hidden;}
.theme-modal-overlay.open{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .25s,visibility 0s;}
.theme-modal{position:relative;width:min(440px,100%);max-height:calc(100vh - 3rem);max-height:calc(100dvh - 3rem);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--cyan-border);--cut:16px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));padding:1.75rem;transform:translateY(12px) scale(.98);transition:transform .25s;}
.theme-modal-overlay.open .theme-modal{transform:translateY(0) scale(1);}
.tm-head{flex-shrink:0;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;}
.tm-eyebrow{font-family:var(--font-mono);font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cyan);margin-bottom:.35rem;}
.tm-title{font-family:var(--font-heading);font-weight:800;font-size:19px;letter-spacing:-.5px;color:var(--cream);}
.tm-close{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(232,244,255,.12);color:var(--dim);font-size:16px;line-height:1;cursor:pointer;transition:color .2s,border-color .2s;}
.tm-close:hover{color:var(--cyan);border-color:var(--cyan-border);}
.tm-grid{display:grid;grid-template-columns:1fr;gap:.65rem;overflow-y:auto;min-height:0;margin:0 -.5rem;padding:0 .5rem;}
.tm-card{position:relative;display:flex;align-items:center;gap:.9rem;padding:.85rem 1rem;background:rgba(232,244,255,.02);border:1px solid rgba(232,244,255,.08);cursor:pointer;text-align:left;transition:border-color .2s,background .2s;font-family:inherit;color:inherit;width:100%;}
.tm-card:hover{border-color:var(--cyan-border);background:rgba(232,244,255,.04);}
.tm-card.is-active{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset;}
.tm-swatch{display:flex;flex-shrink:0;width:34px;height:34px;border-radius:50%;overflow:hidden;border:1px solid rgba(232,244,255,.1);}
.tm-swatch span{flex:1;height:100%;}
.tm-text{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.tm-name{font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--cream);}
.tm-tag{font-size:11.5px;color:var(--dim);}
.tm-check{margin-left:auto;flex-shrink:0;width:20px;height:20px;border-radius:50%;border:1px solid rgba(232,244,255,.18);display:flex;align-items:center;justify-content:center;color:var(--bg);opacity:0;transition:opacity .2s,background .2s,border-color .2s;}
.tm-card.is-active .tm-check{opacity:1;background:var(--cyan);border-color:var(--cyan);}
@media(max-width:480px){.theme-modal{padding:1.25rem;}}
@media(max-width:600px){.stat-bar-inner{grid-template-columns:repeat(2,1fr);}.stat-item:nth-child(3){display:none;}.hl-tony,.hl-bytes{font-size:clamp(44px,14vw,84px);letter-spacing:-2px;max-width:100%;overflow-wrap:break-word;}.hero-bg-text{display:none;}}

/* ─── MOBILE TAP TARGETS ───
   Audited at 375px: the theme-modal close button measured 27x27, the footer
   and contact links only 18px tall, and the nav-overlay buttons 36px.
   Anything under roughly 44px is genuinely hard to hit with a thumb, and
   these are the controls a phone visitor reaches for most.

   Padding and min-height only -- no type, colour or layout changes -- and
   scoped to touch/narrow so the desktop rendering is untouched. */
@media (hover: none), (max-width: 760px) {
  .tm-close{width:44px;height:44px;font-size:18px;}
  .ov-discord,.ov-hire-link{padding-top:13px;padding-bottom:13px;}
  .cl-link{display:inline-flex;align-items:center;min-height:44px;}
  .ft-col a{display:inline-flex;align-items:center;min-height:40px;}
  .footer-legal-link{display:inline-flex;align-items:center;min-height:40px;}
  .theme-btn{width:44px;height:44px;}
  .footer-arcade,.arcade-tab,.inv-close,.tonybot-btn{min-height:40px;}
}

/* ─── NAV OVERLAY: FIT ALL EIGHT LINKS ───
   .ov-name was sized off viewport WIDTH (5.5vw) inside a box constrained
   by viewport HEIGHT, which inverts on desktop: the wider the window, the
   bigger the type, and the fewer links fit. At 1440x900 the eight links
   needed 808px of a 595px budget and .ov-links had no scroll, so About and
   Contact were unreachable -- only five or six showed.

   Type is now capped by whichever axis is scarcer. Padding is recovered
   before the type shrinks. This block lives at the end of the file on
   purpose: the width-based mobile rules above set .ov-inner padding and
   .ov-footer padding with equal specificity, so anything earlier loses. */
@media (max-height:1100px){
  .ov-inner{padding-top:5.25rem;padding-bottom:1.25rem;}
  .ov-header{margin-bottom:1rem;}
  .ov-links{margin-bottom:.75rem;}
  .ov-link{padding:.55rem 0;gap:1rem;}
  .ov-footer{padding-top:.85rem;}
}
@media (max-height:760px){
  .ov-inner{padding-top:4.5rem;}
  .ov-link{padding:.3rem 0;}
  .ov-name{font-size:clamp(18px,min(5.5vw,5vh),44px);}
  .ov-footer{font-size:11px;padding-top:.7rem;}
}

/* ─── LONG-WORD SAFETY ───
 Titles come from the CMS, which accepts any string. With the default
 overflow-wrap:normal an unbroken word does not break: .ph-title needed
 768px inside a 327px box at 375px wide and the parent simply clipped it,
 so the title would be silently cut off rather than wrapped. Verified that
 this changes none of the existing content boxes -- it only takes effect on
 a word that would otherwise overflow. */
h1,h2,h3,h4,.section-title,.pc-title,.pt-title,.tt-title,.hf-title,.ph-title,.tpl-title,.pc-desc{overflow-wrap:anywhere;}

/* ─── FORM STATUS MESSAGE ───
 showMsg() in tb-core.js built this with inline styles and hardcoded
 #39ff14 / #ff0090, which ignored the theme entirely: against the contact
 section (--panel2) the success message measured 1.22:1 on Light and
 1.15:1 on Beach -- a visitor got no visible confirmation that their
 message had actually sent. */
.form-msg{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;}
.form-msg.is-ok{color:var(--msg-ok);}
.form-msg.is-err{color:var(--msg-err);}

/* ─── PRINT ───
 The design is dark-on-dark and browsers drop background colours when
 printing, so every heading and paragraph landed on white paper at 1.12:1 --
 a effectively blank sheet. Repaint text dark, drop the interactive chrome
 that means nothing on paper, and expose link targets since a printed link
 cannot be clicked. Screen rendering is untouched: this block only ever
 applies to the print medium. */
@media print {
  /* Screen-only furniture. */
  #preloader,.cursor-dot,.cursor-ring,.cursor-label,nav,#nav,.nav-overlay,
  .theme-modal-overlay,#invaders-overlay,#tonybot,.menu-hint,.marquee,
  .footer-arcade,.hero-bg,.particles,.scan-beam,.glow-c,.glow-m,
  .ov-grid,.ov-ga,.ov-gb{display:none !important;}

  html,body{background:#fff !important;color:#111 !important;}
  /* Decorative fills and glows would print as grey slabs. */
  *{background-image:none !important;box-shadow:none !important;text-shadow:none !important;}
  h1,h2,h3,h4,h5,h6,p,li,td,th,figcaption,blockquote,span,div,a{color:#111 !important;}
  a{text-decoration:underline;}
  /* A printed link is unusable without its target. Skip in-page anchors. */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#555 !important;word-break:break-all;}
  img{max-width:100% !important;page-break-inside:avoid;}
  h1,h2,h3{page-break-after:avoid;}
  p,li,blockquote{page-break-inside:avoid;orphans:3;widows:3;}
  section,article,.wrap{padding:0 !important;margin:0 !important;}
  @page{margin:18mm;}
}

/* ─── SKIP LINK ───
 Off-screen until focused rather than display:none, which would take it out
 of the tab order entirely and defeat the point. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:6000;padding:10px 18px;background:var(--panel);color:var(--cream);
  border:1px solid var(--cyan-border);font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;}
.skip-link:focus{left:8px;top:8px;outline:2px solid var(--cyan);outline-offset:2px;}

/* ═══════════════════════════════════════════════════════════════
   SHARED PAGE COMPONENTS
   Consolidated from the per-page <style> blocks. These rules were
   byte-identical in 2-6 page files each; editing one meant editing
   all of them, and they could drift apart silently.
   Only rules no theme stylesheet targets were moved -- page inline
   CSS loads after the themes, so anything a theme overrides has to
   stay where it is to keep winning.
   ═══════════════════════════════════════════════════════════════ */
.photo-frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.1);}
.pf-corner{position:absolute;width:16px;height:16px;border-color:var(--cyan);border-style:solid;}
.cf-select{appearance:none;cursor:pointer;}
.cf-select option{background:var(--bg2);color:var(--cream);}
.cf-select option:checked,.cf-select option:hover,.cf-select option:focus{background:var(--cyan);color:#07080f;}
.cf-ta{resize:vertical;min-height:100px;}
.hero-hud{position:absolute;inset:2rem;pointer-events:none;z-index:0;}
.hud-corner{position:absolute;width:22px;height:22px;border-color:var(--cyan-border);border-style:solid;opacity:.5;}
.hud-tl{top:0;left:0;border-width:1px 0 0 1px;}
.hud-tr{top:0;right:0;border-width:1px 1px 0 0;}
.hud-bl{bottom:0;left:0;border-width:0 0 1px 1px;}
.hud-br{bottom:0;right:0;border-width:0 1px 1px 0;}
.hero-top-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem;position:relative;z-index:1;}
.ph-glitch{position:relative;display:inline-block;}
.ph-glitch::before,.ph-glitch::after{content:attr(data-text);position:absolute;inset:0;overflow:hidden;}
@keyframes phGlitchTop{0%,92%,100%{transform:translate(0,0);opacity:0}93%{transform:translate(-3px,0);opacity:.8}94%{transform:translate(3px,0);opacity:.8}95%{transform:translate(0,0);opacity:0}96%{transform:translate(-2px,-1px);opacity:.8}97%{transform:translate(0,0);opacity:0}}
@keyframes phGlitchBot{0%,92%,100%{transform:translate(0,0);opacity:0}93%{transform:translate(3px,1px);opacity:.8}94%{transform:translate(-3px,0);opacity:.8}95%{transform:translate(0,0);opacity:0}96%{transform:translate(2px,-1px);opacity:.8}97%{transform:translate(0,0);opacity:0}}
.ph-lede{color:var(--dim);max-width:620px;margin-top:.75rem;font-size:15px;position:relative;z-index:1;}
.boot-line{margin-top:1.75rem;font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;color:var(--cyan);opacity:.85;position:relative;z-index:1;}
@keyframes bootType{to{width:var(--boot-len,40)ch;}}
.boot-caret{display:inline-block;margin-left:2px;animation:bhd 1s step-end infinite;color:var(--cyan);}
.faq-q::-webkit-details-marker{display:none;}
.faq-item[open] .faq-chevron{transform:rotate(45deg);}
.faq-a{color:var(--dim);font-size:14px;line-height:1.7;padding:0 1.75rem 1.5rem;max-width:720px;}
.sig-console-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.sig-console-label{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--dimmer);}
.sig-hud{font-family:var(--font-mono);font-size:9px;letter-spacing:1px;color:var(--cyan);opacity:.6;}
.sig-bars{display:flex;gap:.75rem;flex-wrap:wrap;}
.eq{display:flex;align-items:flex-end;gap:2px;height:16px;}
.eq-bar{width:3px;background:var(--dimmer);transform-origin:bottom;transition:background .2s;animation:eqPulse 1s ease-in-out infinite;animation-play-state:paused;}
.eq-bar:nth-child(1){animation-delay:0s;height:7px;}
.eq-bar:nth-child(2){animation-delay:.15s;height:13px;}
.eq-bar:nth-child(3){animation-delay:.3s;height:9px;}
.eq-bar:nth-child(4){animation-delay:.1s;height:16px;}
@keyframes eqPulse{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.sig-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;}
.sig-count{font-size:9px;font-weight:500;color:var(--dimmer);background:rgba(232,244,255,.05);border-radius:999px;padding:1px 7px;min-width:18px;text-align:center;transition:color .2s,background .2s;}
.hf-corner{position:absolute;width:20px;height:20px;border-color:var(--cyan);border-style:solid;opacity:0;transition:opacity .3s,transform .3s;z-index:3;}
.hf-tl{top:10px;left:10px;border-width:2px 0 0 2px;transform:translate(-6px,-6px);}
.hf-tr{top:10px;right:10px;border-width:2px 2px 0 0;transform:translate(6px,-6px);}
.hf-bl{bottom:10px;left:10px;border-width:0 0 2px 2px;transform:translate(-6px,6px);}
.hf-br{bottom:10px;right:10px;border-width:0 2px 2px 0;transform:translate(6px,6px);}
.hf-imgwrap{position:relative;overflow:hidden;min-height:320px;background:var(--bg2);}
.hf-imgwrap img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;filter:saturate(.85) contrast(1.05);transition:transform .6s cubic-bezier(0.16,1,0.3,1),filter .4s;}
.hf-imgwrap::after{content:'';position:absolute;inset:0;background:linear-gradient(200deg,rgba(0,229,255,.16),rgba(255,0,144,.10) 60%,transparent 100%);mix-blend-mode:color-dodge;opacity:.5;pointer-events:none;}
.hf-scan{position:absolute;left:0;right:0;height:2px;top:-2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:0;pointer-events:none;box-shadow:0 0 12px var(--cyan);}
@keyframes hfScan{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
.hf-info{padding:2.25rem 2.5rem;display:flex;flex-direction:column;justify-content:center;}
.hf-tag-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.hf-status{background:var(--green-dim);border:1px solid var(--green-border);color:var(--green);}
.hf-id{font-family:var(--font-mono);font-size:10px;color:var(--dimmer);letter-spacing:1px;}
.sdp{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;animation:sdp 1.6s ease-in-out infinite;}
.hf-kicker{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);margin-bottom:.5rem;}
.hf-excerpt{color:var(--dim);font-size:14px;line-height:1.6;margin-bottom:1.25rem;}
.hf-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.5rem;}
.hf-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--cyan);}
.archive-label{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--dimmer);}
.port-count{font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dimmer);white-space:nowrap;}
.port-count strong{color:var(--cyan);font-weight:700;}
@keyframes pcIn{to{opacity:1;transform:none;}}
.pc-hit{position:absolute;inset:0;z-index:6;}
.pc-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--panel);}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(0.16,1,0.3,1),filter .4s;filter:saturate(.9);}
.pc-img::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.5) 100%);pointer-events:none;z-index:2;}
@keyframes pcScan{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.pc-idx{position:absolute;top:10px;left:12px;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:1px;color:var(--cream);opacity:.6;text-shadow:0 1px 6px rgba(0,0,0,.8);z-index:3;}
.pc-hash{position:absolute;bottom:10px;left:12px;font-family:var(--font-mono);font-size:9px;color:var(--cyan);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;text-shadow:0 1px 6px rgba(0,0,0,.8);z-index:3;}
.pc-badge{position:absolute;top:10px;right:12px;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--bg);background:var(--cyan);padding:3px 8px;border-radius:999px;box-shadow:0 0 14px var(--cyan-glow);z-index:3;}
.pc-badge .sdp{width:4px;height:4px;color:var(--bg);}
.pc-body{padding:1.35rem 1.4rem 1.4rem;flex:1;display:flex;flex-direction:column;}
@keyframes pcTitleGlitch{0%{transform:translate(0)}25%{transform:translate(-1px,1px);text-shadow:1px 0 var(--cyan),-1px 0 var(--magenta)}50%{transform:translate(1px,-1px);text-shadow:-1px 0 var(--cyan),1px 0 var(--magenta)}100%{transform:translate(0);text-shadow:none;color:var(--cyan);}}
.pc-excerpt{color:var(--dim);font-size:13px;line-height:1.55;flex:1;margin-bottom:1rem;}
.pc-tags{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1rem;}
.port-empty{text-align:center;padding:5rem 0;}
.pe-glyph{font-size:40px;color:var(--cyan);opacity:.5;margin-bottom:1rem;}
.port-empty p{color:var(--dim);font-family:var(--font-mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-bottom:1.5rem;}
.pf-reset:hover{background:var(--cyan-dim);box-shadow:0 0 16px var(--cyan-glow);}
.back-link{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--dimmer);text-decoration:none;display:inline-block;margin-bottom:2rem;transition:color .2s;}
.ah-status{background:var(--ac-dim);border:1px solid var(--ac-border);color:var(--ac-color);}
.ah-tagline{font-family:'Syne',sans-serif;font-size:clamp(16px,1.8vw,20px);font-weight:700;color:var(--ac-color);margin-top:.5rem;}
.ah-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem;}
.section-alt{background:var(--panel2);}
.support-strip-section{padding-bottom:6rem;}
.support-strip{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding:2.5rem;border:1px solid var(--ac-border);background:var(--ac-dim);}
.ss-btns{display:flex;gap:1rem;flex-wrap:wrap;flex-shrink:0;}