:root{
  --bg:#0a0a08; --panel:#131310; --panel2:#1b1b15; --ink:#e8e6df; --dim:#8f8c80;
  --acc:#f5c518; --acc2:#ffe27a; --line:#2c2b22; --good:#7dd97a;
}
html[data-theme="light"]{
  --bg:#f2efe4; --panel:#ffffff; --panel2:#eae6d8; --ink:#151410; --dim:#6d685c;
  --acc:#b9901f; --acc2:#8a6a12; --line:#d8d3c2; --good:#2f8c2c;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:'VT323',monospace; font-size:20px; line-height:1.5;
  overflow-x:hidden; cursor:none; transition:background .4s,color .4s;
}
@media (hover:none){ body{cursor:auto} }
h1,h2,h3,.px{font-family:'Press Start 2P',monospace; line-height:1.5}
a{color:inherit}
::selection{background:var(--acc); color:#000}
img,canvas{image-rendering:pixelated}

/* ---- pixel cursor ---- */
#cur{position:fixed;width:14px;height:14px;z-index:1000;pointer-events:none;display:none}
@media (hover:hover){ #cur{display:block} }
#cur::before{content:"";position:absolute;inset:0;
  background:
    linear-gradient(var(--acc),var(--acc)) 0 0/14px 4px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 0 0/4px 14px no-repeat;
  outline:2px solid var(--bg);}

/* ---- CRT scanlines + vignette ---- */
#crt{position:fixed;inset:0;z-index:900;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 2px, transparent 2px 4px);
  mix-blend-mode:multiply; opacity:.5}
html[data-theme="light"] #crt{opacity:.18}
#vig{position:fixed;inset:0;z-index:899;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.34))}
html[data-theme="light"] #vig{opacity:.35}

/* ---- boot screen ---- */
#boot{position:fixed;inset:0;z-index:2000;background:#000;color:#f5c518;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  font-family:'Press Start 2P',monospace;font-size:12px;transition:opacity .5s}
#boot.off{opacity:0;pointer-events:none}
#boot .bar{width:min(420px,70vw);height:22px;border:3px solid #f5c518;padding:3px}
#boot .fill{height:100%;width:0;background:#f5c518}
#boot small{font-size:8px;color:#7a6a2a;letter-spacing:2px}

/* ---- frame helpers ---- */
.pxframe{border:3px solid var(--ink); box-shadow:6px 6px 0 var(--acc); background:var(--panel)}
.pxbtn{display:inline-block;font-family:'Press Start 2P',monospace;font-size:11px;
  padding:14px 20px;background:var(--acc);color:#0a0a08;border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);text-decoration:none;cursor:none;transition:transform .08s, box-shadow .08s}
.pxbtn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.pxbtn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.pxbtn.ghost{background:transparent;color:var(--ink)}
.wrap{max-width:1150px;margin:0 auto;padding:0 22px}
.kick{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--acc);letter-spacing:2px;margin-bottom:16px}
.h2{font-size:clamp(20px,4vw,34px);margin-bottom:10px}
.h2 .y{color:var(--acc)}
section{position:relative;padding:90px 0}
.blink{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .blink{animation:none} }

/* ---- nav ---- */
header{position:fixed;top:0;left:0;right:0;z-index:800;background:var(--bg);
  border-bottom:3px solid var(--ink);display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px;gap:10px}
header .logo{display:flex;align-items:center;gap:12px;text-decoration:none}
header .logo .t{font-family:'Press Start 2P',monospace;font-size:12px}
header .logo .t small{display:block;font-size:7px;color:var(--acc);margin-top:5px;letter-spacing:2px}
header nav{display:flex;gap:20px}
header nav a{font-family:'Press Start 2P',monospace;font-size:9px;text-decoration:none;padding:6px 2px}
header nav a:hover{color:var(--acc)}
.hbtns{display:flex;gap:10px;align-items:center}
.sqbtn{width:38px;height:38px;border:3px solid var(--ink);background:var(--panel);color:var(--ink);
  font-family:'Press Start 2P',monospace;font-size:12px;cursor:none;box-shadow:3px 3px 0 var(--ink)}
.sqbtn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
@media(max-width:920px){header nav{display:none}}

/* ---- hero ---- */
#hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding-top:120px;position:relative;overflow:clip}
#hero h1{font-size:clamp(26px,7vw,74px);letter-spacing:2px}
#hero h1 .y{color:var(--acc)}
#hero .sub{font-family:'Press Start 2P',monospace;font-size:clamp(8px,1.6vw,13px);color:var(--dim);margin:18px 0 6px}
#hero .byline{display:inline-block;margin-top:10px;padding:8px 14px;border:3px solid var(--acc);
  font-family:'Press Start 2P',monospace;font-size:9px;color:var(--acc);transform:rotate(-2deg)}
#skullbox{margin:34px auto 10px;position:relative;width:min(300px,64vw)}
#skullbox canvas{width:100%;height:auto;display:block}
#score{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--dim);margin-top:10px}
#score b{color:var(--acc)}
#hero .cta{margin-top:26px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
#duckwalk{position:absolute;bottom:8px;left:-80px;width:64px;height:56px;animation:walk 26s linear infinite}
@keyframes walk{from{left:-90px}to{left:105%}}
@media (prefers-reduced-motion:reduce){ #duckwalk{animation:none;left:20px} }
.press{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--dim);margin-top:34px;letter-spacing:2px}

/* ---- ticker ---- */
#ticker{border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);background:var(--acc);color:#0a0a08;
  overflow:hidden;padding:10px 0}
#ticker .track{display:inline-flex;white-space:nowrap;animation:tick 30s linear infinite;
  font-family:'Press Start 2P',monospace;font-size:10px}
#ticker span{margin:0 24px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ #ticker .track{animation:none} }

/* ---- about ---- */
#about .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center}
#about p{color:var(--dim);font-size:21px;margin-bottom:14px}
#about .stamp{padding:26px;text-align:center}
#about .stamp .big{font-family:'Press Start 2P',monospace;font-size:13px;line-height:2}
#about .stamp .big .y{color:var(--acc)}
#about .stamp img{width:110px;height:auto;margin-bottom:8px}
@media(max-width:920px){#about .grid{grid-template-columns:1fr}}

/* ---- stats / xp ---- */
#stats .row{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.xp{padding:18px}
.xp .lbl{display:flex;justify-content:space-between;font-family:'Press Start 2P',monospace;font-size:9px;margin-bottom:10px}
.xp .lbl b{color:var(--acc)}
.xp .bar{height:20px;border:3px solid var(--ink);padding:3px;background:var(--panel2)}
.xp .fill{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--acc) 0 10px, var(--acc2) 10px 20px);
  transition:width 1.4s steps(14)}
@media(max-width:700px){#stats .row{grid-template-columns:1fr}}

/* ---- services inventory ---- */
#services .inv{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;margin-top:40px}
.item{padding:12px 12px 16px;text-align:center;cursor:none;position:relative;background:var(--panel);
  transition:transform .14s steps(4), box-shadow .14s steps(4);text-decoration:none;display:block;color:var(--ink)}
.item:hover{transform:translate(-4px,-4px) scale(1.09);box-shadow:11px 11px 0 var(--acc);z-index:5}
.item .ph{position:relative;aspect-ratio:4/3;overflow:hidden;border:3px solid var(--ink);background:#000}
.item .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .25s steps(5)}
.item:hover .ph img{transform:scale(1.14)}
.item:hover .nm{color:var(--acc)}
.item .nm{font-family:'Press Start 2P',monospace;font-size:9px;margin-top:12px;line-height:1.8;min-height:30px}
.item .lv{position:absolute;top:4px;inset-inline-end:8px;z-index:3;font-family:'Press Start 2P',monospace;font-size:7px;
  color:#0a0a08;background:var(--acc);padding:3px 5px;border:2px solid var(--ink)}
.item::before,.item::after{content:"✦";position:absolute;color:var(--acc);font-size:15px;opacity:0;z-index:6;transition:opacity .1s}
.item::before{top:-12px;inset-inline-start:-8px}
.item::after{bottom:-12px;inset-inline-end:-8px}
.item:hover::before,.item:hover::after{opacity:1;animation:blink .45s steps(1) infinite}
.item .go{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--dim);margin-top:6px;opacity:0;transition:opacity .15s}
.item:hover .go{opacity:1;color:var(--acc)}

/* ---- quest log ---- */
#workflow .q{display:flex;gap:18px;align-items:flex-start;padding:20px;margin-bottom:14px;background:var(--panel)}
#workflow .chk{width:30px;height:30px;flex:none;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-family:'Press Start 2P',monospace;font-size:13px;color:var(--good)}
#workflow .q .tt{font-family:'Press Start 2P',monospace;font-size:11px;margin-bottom:6px}
#workflow .q .dd{color:var(--dim)}
#workflow .q.done .tt{color:var(--good)}

/* ---- gallery ---- */
#work .g,.g{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:36px}
.shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--panel2);
  transition:transform .14s steps(4), box-shadow .14s steps(4)}
.shot:hover{transform:translate(-3px,-3px) scale(1.04);box-shadow:9px 9px 0 var(--acc);z-index:4}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s steps(6)}
.shot:hover img{transform:scale(1.12)}
.shot .cap{position:absolute;left:0;right:0;bottom:0;z-index:3;background:rgba(0,0,0,.72);color:#ffe27a;
  font-family:'Press Start 2P',monospace;font-size:8px;padding:8px;letter-spacing:1px;transition:background .2s}
.shot:hover .cap{background:rgba(0,0,0,.9)}

/* ---- why / cards ---- */
#why .cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px}
#why .c{padding:26px}
#why .c h3{font-size:12px;color:var(--acc);margin-bottom:14px}
#why .c p{color:var(--dim)}
@media(max-width:800px){#why .cards{grid-template-columns:1fr}}

/* ---- join / contact ---- */
#join .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;margin-top:36px}
#join form,.member{padding:26px}
#join input,#join textarea,.member input{width:100%;margin-bottom:14px;background:var(--panel2);border:3px solid var(--ink);
  color:var(--ink);font-family:'VT323',monospace;font-size:20px;padding:10px 12px;outline:none}
#join input:focus,.member input:focus{border-color:var(--acc)}
.member{text-align:center}
.member img{width:80px;height:auto;margin:6px 0 12px}
.member h3{font-size:11px;margin-bottom:8px}
.member p{color:var(--dim);margin-bottom:14px}
@media(max-width:860px){#join .grid{grid-template-columns:1fr}}

/* ---- footer ---- */
footer{border-top:3px solid var(--ink);padding:40px 0 90px;text-align:center;color:var(--dim);position:relative;overflow:clip}
footer .px{font-size:8px;letter-spacing:2px;margin-top:10px}
#wa{position:fixed;inset-inline-end:20px;bottom:20px;z-index:850}

/* toast */
#toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,90px);z-index:960;
  font-family:'Press Start 2P',monospace;font-size:9px;background:var(--ink);color:var(--bg);
  padding:14px 20px;border:3px solid var(--acc);transition:transform .3s steps(6)}
#toast.on{transform:translate(-50%,0)}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .5s steps(8), transform .5s steps(8)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} }

/* ================= HOVER EVERYTHING ================= */
header nav a{position:relative}
header nav a::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--acc);transition:width .15s steps(3)}
header nav a:hover::after{width:100%}
header .logo{transition:transform .12s steps(3)}
header .logo:hover{transform:translateY(-2px)}
header .logo:hover .t{color:var(--acc)}
.xp{transition:transform .14s steps(3), box-shadow .14s steps(3)}
.xp:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--acc)}
.xp:hover .lbl span{color:var(--acc)}
#about .stamp{transition:transform .15s steps(3)}
#about .stamp:hover{transform:rotate(-2deg) scale(1.04)}
#about p{transition:color .2s}
#about p:hover{color:var(--ink)}
#workflow .q{transition:transform .14s steps(3), box-shadow .14s steps(3)}
#workflow .q:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--acc)}
#workflow .q:hover .chk{background:var(--acc);color:#0a0a08;border-color:var(--acc)}
#why .c{transition:transform .14s steps(3), box-shadow .14s steps(3)}
#why .c:hover{transform:translate(-3px,-3px) scale(1.02);box-shadow:9px 9px 0 var(--acc)}
#join form,.member{transition:transform .14s steps(3), box-shadow .14s steps(3)}
#join form:hover,.member:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--acc)}
#join input:hover,#join textarea:hover,.member input:hover{border-color:var(--dim)}
.member img,#about .stamp img{transition:transform .2s steps(4)}
.member:hover img,#about .stamp:hover img{transform:scale(1.12) rotate(-4deg)}
.meta .m{transition:transform .14s steps(3), box-shadow .14s steps(3)}
.meta .m:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--acc)}
.meta .m:hover .k{color:var(--ink)}
#svc-details li{transition:color .15s, padding .15s steps(3)}
#svc-details li:hover{color:var(--ink);padding-inline-start:12px}
#svc-hero .bigimg{transition:transform .15s steps(3), box-shadow .15s steps(3)}
#svc-hero .bigimg:hover{transform:translate(-3px,-3px) scale(1.02);box-shadow:10px 10px 0 var(--acc)}
#svc-hero .bigimg img{transition:transform .3s steps(6)}
#svc-hero .bigimg:hover img{transform:scale(1.08)}
#score{transition:color .2s}
#score:hover{color:var(--acc)}
.kick{transition:letter-spacing .2s steps(4)}
.kick:hover{letter-spacing:4px}
.h2{transition:transform .15s steps(3)}
.h2:hover{transform:translateX(4px)}
footer div{transition:color .2s}
footer div:hover{color:var(--ink)}
#hero h1{transition:text-shadow .15s}
#hero h1:hover{text-shadow:5px 5px 0 var(--acc)}
#hero .byline{transition:transform .15s steps(3), background .15s}
#hero .byline:hover{transform:rotate(2deg) scale(1.06);background:var(--acc);color:#0a0a08}
#skullbox{transition:transform .18s steps(4)}
#skullbox:hover{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){
  .item:hover,.shot:hover,.xp:hover,#workflow .q:hover,#why .c:hover,#skullbox:hover{transform:none}
}

/* ================= SERVICE DETAIL PAGE ================= */
#svc-hero{padding:150px 0 50px}
#svc-hero .top{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
#svc-hero .crumb{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--dim);margin-bottom:22px;display:inline-block;text-decoration:none}
#svc-hero .crumb:hover{color:var(--acc)}
#svc-hero h1{font-size:clamp(18px,4.4vw,42px)}
#svc-hero h1 .y{color:var(--acc)}
#svc-hero .desc{color:var(--dim);font-size:22px;margin-top:16px;max-width:520px}
#svc-hero .bigimg{aspect-ratio:4/3;position:relative;overflow:hidden}
#svc-hero .bigimg img{width:100%;height:100%;object-fit:cover}
#svc-hero .lvtag{position:absolute;top:10px;inset-inline-start:10px;font-family:'Press Start 2P',monospace;font-size:9px;
  background:var(--acc);color:#0a0a08;padding:6px 9px;border:3px solid var(--ink)}
@media(max-width:860px){#svc-hero .top{grid-template-columns:1fr}}
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.meta .m{padding:16px;text-align:center}
.meta .m .k{font-family:'Press Start 2P',monospace;font-size:7.5px;color:var(--dim);letter-spacing:1px;margin-bottom:8px}
.meta .m .v{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--acc);line-height:1.7}
@media(max-width:860px){.meta{grid-template-columns:repeat(2,1fr)}}
#svc-details ul{list-style:none;margin-top:26px}
#svc-details li{padding:12px 0;border-bottom:2px dashed var(--line);color:var(--dim);font-size:21px}
#svc-details li::before{content:"▸ ";color:var(--acc);font-family:'Press Start 2P',monospace;font-size:11px}