/* =========================================================
   SUNSET DESK — $SDESK
   palette sampled from the original artwork
   ========================================================= */
:root{
  --night:#0b1010;
  --navy:#160f2e;
  --indigo:#2a1747;
  --sweater:#402f4a;
  --sweater-hi:#725977;
  --plum:#8e0a68;
  --magenta:#e0229a;
  --pink:#f460a1;
  --red:#e8251d;
  --orange:#f78a04;
  --gold:#ffb83a;
  --yellow:#e7e31c;
  --cream:#fff4c8;
  --paper:#f3ecd2;
  --teal:#26dbd0;
  --mug:#67e6e5;
  --ceiling:#4c8886;
  --blue:#1e39dd;
  --sky:#1a74e1;
  --lime:#7df03a;
  --green:#1a9b4f;
  --desk:#50120e;
  --ink:#1a0c28;

  --f-display:"Bungee", "Impact", system-ui, sans-serif;
  --f-shade:"Bungee Shade", "Bungee", "Impact", sans-serif;
  --f-pixel:"VT323", ui-monospace, monospace;
  --f-body:"Rubik", system-ui, -apple-system, sans-serif;

  --wrap:1200px;
  --hdr:74px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:var(--f-body);color:var(--cream);background:var(--navy);
  overflow-x:hidden;line-height:1.5;-webkit-font-smoothing:antialiased;
}
body.is-loading{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{width:1em;height:1em;flex:none}
.wrap{width:min(var(--wrap),100% - 32px);margin-inline:auto;position:relative;z-index:2}
::selection{background:var(--magenta);color:#fff}

/* pixel-grain overlay over entire site, like the dithered artwork */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:900;opacity:.09;mix-blend-mode:overlay;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.6) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 1px,transparent 1px 3px);
}

/* ================= KEYCAP BUTTONS (retro keyboard) ================= */
.key{
  --c:var(--lime);--c2:#3fae1a;--tx:var(--ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--f-display);letter-spacing:.02em;color:var(--tx);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#fff) 0%,var(--c) 22%,var(--c) 100%);
  border:3px solid var(--ink);border-radius:14px;
  box-shadow:0 7px 0 0 var(--c2),0 7px 0 3px var(--ink),0 16px 26px rgba(0,0,0,.45);
  transform:translateY(0);transition:transform .12s ease,box-shadow .12s ease,filter .2s;
  user-select:none;white-space:nowrap;
}
.key::before{ /* keycap inner dish */
  content:"";position:absolute;inset:5px 7px 9px;border-radius:9px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 55%);
}
.key:hover{filter:brightness(1.07) saturate(1.1);transform:translateY(-2px);
  box-shadow:0 9px 0 0 var(--c2),0 9px 0 3px var(--ink),0 20px 30px rgba(0,0,0,.45)}
.key:active{transform:translateY(6px);box-shadow:0 1px 0 0 var(--c2),0 1px 0 3px var(--ink),0 4px 8px rgba(0,0,0,.4)}
.key svg{width:1.15em;height:1.15em;position:relative}
.key span{position:relative}
.key-xl{font-size:clamp(1rem,1.6vw,1.3rem);padding:1.05em 1.5em}
.key-lg{font-size:1rem;padding:.9em 1.3em}
.key-sm{width:44px;height:44px;border-radius:11px;font-size:1.15rem;
  box-shadow:0 5px 0 0 var(--c2),0 5px 0 3px var(--ink),0 10px 16px rgba(0,0,0,.35)}
.key-sm:hover{box-shadow:0 7px 0 0 var(--c2),0 7px 0 3px var(--ink),0 12px 18px rgba(0,0,0,.35)}
.key-sm:active{box-shadow:0 1px 0 0 var(--c2),0 1px 0 3px var(--ink)}
.key-sm::before{inset:4px 5px 7px}
.key-lime{--c:var(--lime);--c2:#3e9a16}
.key-pink{--c:var(--pink);--c2:#a3106b;--tx:var(--ink)}
.key-teal{--c:var(--mug);--c2:#169c95}
.key-yellow{--c:var(--yellow);--c2:#a39a0c}
.key-lime.key-xl{animation:keyGlow 2.6s ease-in-out infinite}
@keyframes keyGlow{
  0%,100%{filter:drop-shadow(0 0 0 rgba(125,240,58,0))}
  50%{filter:drop-shadow(0 0 18px rgba(125,240,58,.55))}
}

/* ================= CA NAMEPLATE ================= */
.nameplate{
  display:flex;align-items:stretch;max-width:100%;
  background:linear-gradient(180deg,#f7d98a,#c99433 55%,#a8761f);
  border:3px solid var(--ink);border-radius:10px;overflow:hidden;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 6px 0 var(--ink),0 14px 24px rgba(0,0,0,.4);
  color:var(--ink);transition:transform .15s;
}
.nameplate:hover{transform:translateY(-2px)}
.nameplate:active{transform:translateY(3px)}
.np-label{font-family:var(--f-display);font-size:.85rem;padding:.8em .8em;background:var(--ink);color:var(--gold);display:grid;place-items:center}
.np-ca{font-family:var(--f-pixel);font-size:1.3rem;padding:.45em .9em;letter-spacing:.03em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;text-align:left;
  text-shadow:0 1px 0 rgba(255,255,255,.5);display:flex;align-items:center}
.np-copy{display:flex;align-items:center;gap:.4em;padding:0 1em;font-family:var(--f-display);font-size:.8rem;
  background:var(--magenta);color:#fff;border-left:3px solid var(--ink)}
.nameplate.copied .np-copy{background:var(--green)}

/* ================= PRELOADER ================= */
.preloader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#000;overflow:hidden}
.pl-photo{position:absolute;inset:-4%;background:url(../img/sunset-desk.jpg) center/cover no-repeat;
  animation:plZoom 5s ease-out forwards;filter:saturate(1.15)}
.pl-photo::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(22,15,46,.1) 0%,rgba(22,15,46,.55) 60%,rgba(11,16,16,.92) 100%)}
@keyframes plZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.pl-scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px);
  animation:flick .12s steps(2) infinite}
@keyframes flick{50%{opacity:.8}}
.pl-center{position:relative;text-align:center;display:grid;justify-items:center;gap:14px;
  padding:26px 30px 22px;background:rgba(22,15,46,.72);border:3px solid var(--ink);border-radius:18px;
  box-shadow:0 0 0 3px var(--pink),0 20px 60px rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.pl-sun{width:92px;height:92px;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-6deg)}}
.pl-title{font-family:var(--f-display);font-size:clamp(1.6rem,5vw,2.6rem);line-height:1;
  background:linear-gradient(180deg,var(--yellow),var(--orange) 55%,var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(3px 3px 0 var(--ink))}
.pl-bar{width:min(320px,70vw);height:22px;border:3px solid var(--cream);border-radius:4px;padding:2px;background:var(--ink)}
.pl-fill{height:100%;width:0;
  background:repeating-linear-gradient(90deg,var(--lime) 0 12px,transparent 12px 15px);transition:width .25s linear}
.pl-text{display:flex;justify-content:space-between;width:min(320px,70vw);font-family:var(--f-pixel);font-size:1.35rem;color:var(--mug)}
.pl-text span:first-child::after{content:"_";animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.preloader.done{animation:crtOff .75s cubic-bezier(.7,0,.3,1) forwards}
@keyframes crtOff{
  0%{clip-path:inset(0 0 0 0);filter:brightness(1)}
  45%{clip-path:inset(49.5% 0 49.5% 0);filter:brightness(3)}
  75%{clip-path:inset(49.5% 49% 49.5% 49%);filter:brightness(4)}
  100%{clip-path:inset(50% 50% 50% 50%);opacity:0;visibility:hidden}
}

/* ================= HEADER ================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:500;height:var(--hdr);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 max(16px,calc((100% - var(--wrap))/2));
  transition:background .3s,box-shadow .3s,height .3s;
}
.site-header.scrolled{background:rgba(22,15,46,.94);box-shadow:0 3px 0 var(--magenta),0 10px 30px rgba(0,0,0,.35);height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:1.15rem;letter-spacing:.02em;
  text-shadow:2px 2px 0 var(--ink)}
.brand img{filter:drop-shadow(2px 2px 0 var(--ink))}
.nav{display:flex;align-items:center;gap:28px}
.nav>a{font-family:var(--f-display);font-size:.82rem;letter-spacing:.04em;position:relative;padding:6px 0;text-shadow:2px 2px 0 var(--ink)}
.nav>a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--yellow);transition:right .25s}
.nav>a:hover::after{right:0}
.nav-social{display:none}
.head-social{display:flex;gap:12px}
.burger{display:none;width:46px;height:46px;border:3px solid var(--ink);border-radius:11px;background:var(--yellow);
  box-shadow:0 5px 0 var(--ink);position:relative;z-index:2;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{width:20px;height:3px;background:var(--ink);border-radius:2px;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ================= HERO ================= */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;align-items:center;
  padding:calc(var(--hdr) + 30px) 0 110px;isolation:isolate}
.hero-layers{position:absolute;inset:0;z-index:-1}
.layer{position:absolute;inset:-6% -4% -4%;will-change:transform}
.layer img{width:100%;height:100%;object-fit:cover;object-position:center 70%;image-rendering:pixelated}
.l-sky img{object-position:center 60%}
.hero-grid{position:absolute;left:-20%;right:-20%;bottom:0;height:24%;
  background:
    linear-gradient(180deg,rgba(22,15,46,0),rgba(22,15,46,.4)),
    repeating-linear-gradient(90deg,rgba(244,96,161,.55) 0 2px,transparent 2px 80px),
    repeating-linear-gradient(0deg,rgba(244,96,161,.55) 0 2px,transparent 2px 40px);
  transform:perspective(300px) rotateX(58deg);transform-origin:bottom;opacity:.45;
  mask-image:linear-gradient(0deg,#000 20%,transparent)}
.hero-fade{position:absolute;inset:0;
  background:
   linear-gradient(90deg,rgba(22,15,46,.78) 0%,rgba(22,15,46,.35) 42%,rgba(22,15,46,0) 65%),
   linear-gradient(0deg,var(--navy) 0%,rgba(22,15,46,0) 22%)}
.hero-inner{width:min(var(--wrap),100% - 32px);margin-inline:auto;display:grid;grid-template-columns:1.05fr 1fr;
  align-items:center;gap:40px;position:relative}
.hero-copy{position:relative}
.ticker-sticker{
  display:inline-block;font-family:var(--f-display);font-size:clamp(1.1rem,2vw,1.5rem);
  padding:.35em .75em;background:var(--yellow);color:var(--ink);border:3px solid var(--ink);border-radius:999px;
  box-shadow:4px 4px 0 var(--ink);transform:rotate(-6deg);margin-bottom:14px;
  animation:wiggle 3.5s ease-in-out infinite;
}
@keyframes wiggle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-2deg) scale(1.04)}}
.hero-title{font-family:var(--f-display);line-height:.86;font-weight:400;margin-bottom:14px}
.hero-title span{display:block}
.hero-title .t1{font-size:clamp(3.4rem,9.4vw,8.4rem);
  background:linear-gradient(180deg,#fff27a 0%,var(--gold) 40%,var(--orange) 62%,var(--magenta) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(5px 5px 0 var(--ink)) drop-shadow(0 0 30px rgba(247,138,4,.35))}
.hero-title .t2{font-family:var(--f-shade);font-size:clamp(3.4rem,9.4vw,8.4rem);color:var(--mug);
  text-shadow:0 0 24px rgba(38,219,208,.45)}
.hero-tag{font-family:var(--f-pixel);font-size:clamp(1.3rem,2vw,1.7rem);color:var(--cream);margin-bottom:26px;
  text-shadow:2px 2px 0 var(--ink)}
.hero-cta{display:flex;flex-wrap:wrap;gap:18px 16px;margin-bottom:26px}
.hero .nameplate{width:min(520px,100%)}

.hero-visual{perspective:1100px;display:grid;place-items:center;width:100%}
.crt-wrap{position:relative;width:min(470px,92%);transform-style:preserve-3d;will-change:transform;transition:transform .08s linear}
.crt{position:relative;padding:22px 22px 0;border-radius:26px 26px 18px 18px;
  background:linear-gradient(160deg,#efe9d4 0%,#d6ccb0 55%,#b3a88a 100%);
  border:4px solid var(--ink);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.7),inset 0 -6px 0 rgba(0,0,0,.12),14px 18px 0 rgba(11,16,16,.55),0 30px 60px rgba(0,0,0,.5);
  transform:translateZ(30px)}
.crt-screen{position:relative;aspect-ratio:1;border-radius:22px/18px;overflow:hidden;border:4px solid #2a2230;
  box-shadow:inset 0 0 30px rgba(0,0,0,.7);background:#000}
.crt-screen img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1) contrast(1.03)}
.crt-scan{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px)}
.crt-screen::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 60px rgba(0,0,0,.55)}
.crt-glare{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.28),rgba(255,255,255,0) 45%)}
.crt-chin{display:flex;align-items:center;justify-content:space-between;padding:12px 6px 14px}
.crt-brand{font-family:var(--f-display);font-size:.8rem;color:#6f6552;letter-spacing:.08em}
.crt-led{width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime),0 0 0 2px var(--ink);animation:led 2s infinite}
@keyframes led{50%{opacity:.55}}
.crt-stand{width:46%;height:34px;margin:-2px auto 0;border:4px solid var(--ink);border-top:0;border-radius:0 0 16px 16px;
  background:linear-gradient(180deg,#b3a88a,#8e8468);transform:translateZ(10px)}
.coin{position:absolute;width:118px;height:118px;left:-44px;top:-30px;transform-style:preserve-3d;
  animation:spin 6s linear infinite;transform:translateZ(90px)}
@keyframes spin{from{transform:translateZ(90px) rotateY(0)}to{transform:translateZ(90px) rotateY(360deg)}}
.coin-face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;display:grid;place-items:center;
  border:4px solid var(--ink);background:radial-gradient(circle at 35% 30%,#fff7a0,var(--gold) 50%,var(--orange));
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.25)}
.coin-face img{width:84%}
.coin-face.back{transform:rotateY(180deg);background:radial-gradient(circle at 35% 30%,#ff9dd0,var(--magenta) 60%,var(--plum))}
.coin-face.back span{font-family:var(--f-display);font-size:1.05rem;color:#fff;text-shadow:2px 2px 0 var(--ink)}
.mug-sticker{position:absolute;right:-34px;bottom:48px;width:128px;border:4px solid var(--ink);border-radius:14px;overflow:hidden;
  transform:translateZ(70px) rotate(8deg);box-shadow:6px 6px 0 var(--ink)}
.mug-sticker img{aspect-ratio:1;object-fit:cover}

.scroll-hint{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);width:30px;height:48px;border:3px solid var(--cream);
  border-radius:16px;display:flex;justify-content:center;padding-top:8px;opacity:.85}
.scroll-hint span{width:6px;height:10px;border-radius:3px;background:var(--yellow);animation:sh 1.6s infinite}
@keyframes sh{0%{transform:translateY(0);opacity:1}80%{transform:translateY(16px);opacity:0}100%{opacity:0}}

/* ================= TAPE MARQUEE ================= */
.tape{position:relative;z-index:5;margin-top:-56px;padding:20px 0 30px;overflow:hidden}
.tape-row{display:flex;overflow:hidden;border-block:3px solid var(--ink);white-space:nowrap}
.tape-row.r1{background:var(--yellow);color:var(--ink);transform:rotate(-2.2deg);box-shadow:0 8px 0 rgba(0,0,0,.25)}
.tape-row.r2{background:var(--magenta);color:#fff;transform:rotate(1.6deg);margin-top:-4px}
.tape-track{display:flex;align-items:center;gap:26px;padding:10px 13px;flex:none;animation:marq 32s linear infinite;
  font-family:var(--f-display);font-size:clamp(1rem,2vw,1.4rem)}
.r2 .tape-track{animation-direction:reverse;animation-duration:40s;font-size:clamp(.9rem,1.6vw,1.15rem)}
.tape-track i{font-style:normal}
@keyframes marq{to{transform:translateX(-50%)}}

/* ================= SECTIONS ================= */
.section{position:relative;padding:120px 0;overflow:hidden;isolation:isolate}
.section::before,.section::after{content:"";position:absolute;left:0;right:0;height:160px;z-index:-1;pointer-events:none}
.section::before{top:0;background:linear-gradient(180deg,var(--navy),rgba(22,15,46,0))}
.section::after{bottom:0;background:linear-gradient(0deg,var(--navy),rgba(22,15,46,0))}
.sec-bg{position:absolute;inset:-12% 0;z-index:-2;background-size:cover;background-position:center;will-change:transform;image-rendering:pixelated}
.sec-head{text-align:center;margin-bottom:54px}
.eyebrow{display:inline-block;font-family:var(--f-pixel);font-size:1.4rem;letter-spacing:.12em;color:var(--ink);
  background:var(--mug);padding:.05em .7em;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);margin-bottom:14px;transform:rotate(-1.5deg)}
.sec-title{font-family:var(--f-display);font-weight:400;font-size:clamp(2.4rem,6.4vw,5rem);line-height:.95;color:var(--cream);
  text-shadow:4px 4px 0 var(--ink),8px 8px 0 var(--magenta)}

/* ---- lore ---- */
.bg-desk{background-image:linear-gradient(180deg,var(--navy) 0%,rgba(22,15,46,0) 18%,rgba(22,15,46,0) 82%,var(--navy) 100%),url(../img/bg-desk.webp)}
.lore-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.memo{position:relative;color:var(--ink);padding:44px 40px 40px 70px;border-radius:4px;
  background:url(../img/paper.webp) center/cover;transform:rotate(-2.5deg);
  box-shadow:0 2px 0 rgba(0,0,0,.1),14px 18px 0 rgba(0,0,0,.35),0 30px 60px rgba(0,0,0,.45);transform-style:preserve-3d}
.memo.in{transform:rotate(-2.5deg)}
.tape-piece{position:absolute;width:120px;height:32px;background:rgba(255,242,122,.72);border:1px solid rgba(0,0,0,.08);top:-14px}
.tp1{left:30px;transform:rotate(-8deg)}.tp2{right:30px;transform:rotate(6deg)}
.memo-head{display:flex;justify-content:space-between;font-family:var(--f-display);font-size:.9rem;color:var(--plum);
  border-bottom:3px double var(--plum);padding-bottom:10px;margin-bottom:14px}
.memo-no{font-family:var(--f-pixel);font-size:1.2rem;color:var(--ink)}
.memo-meta{font-family:var(--f-pixel);font-size:1.3rem;line-height:1.25;margin-bottom:18px}
.memo-title{font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,4vw,3rem);line-height:1;margin-bottom:14px;
  color:var(--magenta);text-shadow:3px 3px 0 var(--ink)}
.memo p{font-size:1.08rem;margin-bottom:12px;font-weight:600}
.memo-sign{font-family:var(--f-display);font-size:1.15rem!important;color:var(--plum)}
.memo-sign span{display:inline-block;background:var(--yellow);border:2px solid var(--ink);border-radius:50%;width:1.5em;height:1.5em;line-height:1.3em;text-align:center}
.stamp{position:absolute;right:26px;bottom:26px;font-family:var(--f-display);font-size:1.3rem;color:var(--red);
  border:4px solid var(--red);padding:.2em .6em;border-radius:6px;transform:rotate(-14deg) scale(1.6);opacity:0;
  transition:transform .45s cubic-bezier(.3,1.6,.5,1) .5s,opacity .2s .5s;mix-blend-mode:multiply}
.memo.in .stamp{transform:rotate(-14deg) scale(1);opacity:.85}

.wall{position:relative;height:560px}
.polaroid{position:absolute;background:#fbf7ea;padding:12px 12px 40px;border:3px solid var(--ink);box-shadow:10px 12px 0 rgba(0,0,0,.4);will-change:transform}
.polaroid img{width:100%;height:100%;object-fit:cover;border:2px solid var(--ink)}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:var(--f-pixel);font-size:1.5rem;color:var(--ink)}
.polaroid::before{content:"";position:absolute;top:-12px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ff9dd0,var(--magenta));border:2px solid var(--ink);z-index:2}
.p1{width:62%;height:250px;left:0;top:10px;--r:-4deg}
.p2{width:38%;height:300px;right:0;top:0;--r:5deg}
.p3{width:44%;height:250px;left:14%;top:285px;--r:3deg}
.p4{width:32%;height:230px;right:6%;top:320px;--r:-7deg}
.polaroid{transform:rotate(var(--r))}

/* ---- how to buy (filing cabinet) ---- */
.bg-ceiling{background-image:linear-gradient(180deg,var(--navy) 0%,rgba(22,15,46,.25) 16%,rgba(22,15,46,.55) 70%,var(--navy) 100%),url(../img/bg-ceiling.webp)}
.cabinet{max-width:820px;margin:0 auto;perspective:1400px;position:relative}
.cabinet-top{height:22px;border:4px solid var(--ink);border-bottom:0;border-radius:12px 12px 0 0;
  background:linear-gradient(180deg,#e9e3cf,#c9bf9f)}
.cabinet-base{height:26px;border:4px solid var(--ink);border-top:0;border-radius:0 0 8px 8px;background:#6f6552;
  box-shadow:0 20px 40px rgba(0,0,0,.5)}
.drawer{--dc:var(--magenta);--dc2:#9d0d68;border-inline:4px solid var(--ink);background:#2a2230;padding:8px 10px;position:relative}
.drawer::before{content:"";position:absolute;inset:8px 10px;background:#0f0b16;box-shadow:inset 0 10px 20px rgba(0,0,0,.8)}
.drawer-front{position:relative;display:flex;align-items:center;gap:24px;padding:22px 28px;min-height:112px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--dc) 75%,#fff) 0%,var(--dc) 18%,var(--dc) 82%,var(--dc2) 100%);
  border:3px solid var(--ink);border-radius:6px;color:var(--ink);
  transform:translateZ(0);transition:transform .9s cubic-bezier(.2,1.2,.3,1),box-shadow .9s;
  box-shadow:0 0 0 rgba(0,0,0,0)}
.drawer.in .drawer-front{transform:translateZ(70px) translateY(-4px);box-shadow:0 22px 30px rgba(0,0,0,.55)}
.drawer:hover .drawer-front{transform:translateZ(110px) translateY(-6px)}
.d1{--dc:#e21aa5;--dc2:#8e0a68}.d2{--dc:#7df03a;--dc2:#1a9b4f}.d3{--dc:#3b5bff;--dc2:#1e39dd}.d4{--dc:#f0ec5a;--dc2:#b1b94a}
.d3 .drawer-front{color:#fff}
.d1.in .drawer-front{transition-delay:.05s}.d2.in .drawer-front{transition-delay:.15s}.d3.in .drawer-front{transition-delay:.25s}.d4.in .drawer-front{transition-delay:.35s}
.drawer-no{font-family:var(--f-display);font-size:2.6rem;line-height:1;min-width:2.1em;text-align:center;
  background:#fbf7ea;color:var(--ink);border:3px solid var(--ink);padding:.12em .1em;box-shadow:3px 3px 0 var(--ink)}
.drawer-txt{flex:1}
.drawer-txt h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.05;margin-bottom:4px}
.drawer-txt p{font-weight:600;font-size:1rem;opacity:.9}
.drawer-handle{width:78px;height:22px;border:3px solid var(--ink);border-radius:12px;background:linear-gradient(180deg,#fff,#b9b3a0);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.2)}
.buy-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px;margin-top:54px}
.buy-cta .nameplate{width:min(480px,100%)}

/* ---- chart (monitor) ---- */
.bg-chart{background:
  radial-gradient(ellipse at 50% 40%,rgba(224,34,154,.35),rgba(22,15,46,0) 60%),
  repeating-linear-gradient(0deg,rgba(38,219,208,.07) 0 2px,transparent 2px 46px),
  repeating-linear-gradient(90deg,rgba(38,219,208,.07) 0 2px,transparent 2px 46px),
  linear-gradient(180deg,var(--navy),var(--indigo) 50%,var(--navy))}
.monitor{max-width:1000px;margin:0 auto;perspective:1400px}
.monitor-bezel{padding:26px 26px 0;border-radius:28px 28px 20px 20px;border:4px solid var(--ink);
  background:linear-gradient(160deg,#efe9d4,#cfc4a6 60%,#a99e80);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.7),16px 20px 0 rgba(0,0,0,.45),0 40px 80px rgba(0,0,0,.5)}
.monitor-screen{position:relative;aspect-ratio:16/9;border:5px solid #2a2230;border-radius:20px/16px;overflow:hidden;background:#05060a}
.monitor-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.monitor-chin{display:flex;justify-content:space-between;align-items:center;padding:14px 8px 16px;
  font-family:var(--f-display);font-size:.78rem;color:#6f6552;letter-spacing:.06em}
.no-signal{position:absolute;inset:0;display:grid;place-items:center}
.no-signal .bars{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr)}
.bars i:nth-child(1){background:#e7e3cf}.bars i:nth-child(2){background:var(--yellow)}.bars i:nth-child(3){background:var(--mug)}
.bars i:nth-child(4){background:var(--lime)}.bars i:nth-child(5){background:var(--magenta)}.bars i:nth-child(6){background:var(--red)}.bars i:nth-child(7){background:var(--blue)}
.no-signal .bars{animation:roll 5s linear infinite;filter:saturate(.9)}
@keyframes roll{0%,92%{transform:none}94%{transform:translateY(-4%) skewX(4deg)}96%{transform:translateY(3%)}}
.ns-box{position:relative;display:grid;justify-items:center;gap:8px;background:var(--ink);color:var(--cream);
  border:4px solid var(--cream);padding:22px 30px;box-shadow:8px 8px 0 rgba(0,0,0,.5);text-align:center}
.ns-box img{width:64px;animation:bob 1.6s ease-in-out infinite}
.ns-box b{font-family:var(--f-display);font-weight:400;font-size:clamp(1.2rem,3vw,2rem)}
.ns-box span{font-family:var(--f-pixel);font-size:1.4rem;color:var(--mug)}
.chart-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:44px}

/* ---- roadmap (sunset shift) ---- */
.roadmap{position:relative;height:400vh}
.rm-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.rm-sky{position:absolute;inset:0;z-index:-3;
  background:linear-gradient(180deg,var(--s1,#3aa6d8) 0%,var(--s2,#9bd9e6) 55%,var(--s3,#ffe6a8) 100%)}
.rm-sun{position:absolute;z-index:-2;left:50%;width:min(48vw,460px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,0);top:var(--sunY,6%);
  background:linear-gradient(180deg,#fff27a,var(--gold) 40%,var(--orange) 70%,var(--magenta));
  box-shadow:0 0 80px rgba(255,190,60,.6),0 0 200px rgba(255,120,60,.35);
  -webkit-mask:linear-gradient(180deg,#000 0 52%,transparent 52% 56%,#000 56% 64%,transparent 64% 69%,#000 69% 76%,transparent 76% 82%,#000 82% 88%,transparent 88% 95%,#000 95%);
          mask:linear-gradient(180deg,#000 0 52%,transparent 52% 56%,#000 56% 64%,transparent 64% 69%,#000 69% 76%,transparent 76% 82%,#000 82% 88%,transparent 88% 95%,#000 95%)}
.rm-city{position:absolute;left:0;right:0;bottom:0;height:48vh;z-index:-1;
  background:url(../img/rm-city.webp) center bottom/auto 100% repeat-x;image-rendering:pixelated;filter:brightness(var(--cityB,.8))}
.rm-stars{position:absolute;inset:0 0 40% 0;z-index:-2;opacity:var(--stars,0);pointer-events:none;
  background-image:radial-gradient(2px 2px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 32% 8%,#fff 50%,transparent 51%),
  radial-gradient(3px 3px at 58% 22%,#fff4c8 50%,transparent 51%),radial-gradient(2px 2px at 77% 12%,#fff 50%,transparent 51%),
  radial-gradient(2px 2px at 88% 30%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 45% 35%,#67e6e5 50%,transparent 51%),
  radial-gradient(2px 2px at 22% 40%,#fff 50%,transparent 51%),radial-gradient(3px 3px at 69% 42%,#f460a1 50%,transparent 51%),
  radial-gradient(2px 2px at 5% 30%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 95% 6%,#fff 50%,transparent 51%);
  background-size:520px 420px}
.rm-inner{height:100%;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:40px;padding-top:var(--hdr)}
.rm-head .sec-title{margin-bottom:18px}
.clock{display:inline-block;font-family:var(--f-pixel);font-size:clamp(4rem,10vw,8rem);line-height:.9;color:var(--lime);
  background:var(--ink);padding:.08em .3em .02em;border:4px solid var(--ink);border-radius:12px;
  box-shadow:inset 0 0 0 3px #2a3a2a,8px 8px 0 rgba(0,0,0,.45);text-shadow:0 0 18px rgba(125,240,58,.7)}
.clock .colon{animation:blink 1s steps(1) infinite}
.rm-progress{margin-top:22px;height:14px;width:min(360px,100%);border:3px solid var(--ink);background:rgba(22,15,46,.6);border-radius:8px;overflow:hidden}
.rm-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yellow),var(--orange),var(--magenta),var(--indigo))}
.rm-cards{list-style:none;position:relative;height:min(420px,56vh)}
.rm-card{position:absolute;inset:0;margin:auto;height:fit-content;max-width:520px;
  background:rgba(251,247,234,.96);color:var(--ink);border:4px solid var(--ink);border-radius:16px;padding:30px 30px 28px;
  box-shadow:12px 12px 0 rgba(22,15,46,.55);
  opacity:0;transform:translateY(60px) rotateX(-25deg) scale(.94);transition:opacity .5s,transform .7s cubic-bezier(.2,1.1,.3,1);transform-origin:bottom}
.rm-card.active{opacity:1;transform:none}
.rm-card.past{opacity:0;transform:translateY(-70px) rotateX(20deg) scale(.94)}
.rm-time{display:inline-block;font-family:var(--f-pixel);font-size:1.6rem;background:var(--ink);color:var(--lime);padding:0 .45em;border-radius:6px;margin-bottom:10px}
.rm-card h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1;margin-bottom:10px;color:var(--plum)}
.rm-card p{font-weight:600;font-size:1.08rem}
.rm-card:nth-child(2){background:rgba(255,244,200,.97)}
.rm-card:nth-child(3){background:rgba(255,214,190,.97)}
.rm-card:nth-child(4){background:rgba(64,47,74,.97);color:var(--cream)}
.rm-card:nth-child(4) h3{color:var(--mug)}

/* ---- keyboard nav ---- */
.bg-night{background-image:linear-gradient(180deg,var(--navy) 0%,rgba(22,15,46,0) 20%,rgba(22,15,46,.1) 80%,var(--navy) 100%),url(../img/bg-night.webp);background-position:center bottom}
.keyboard{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:22px;padding:30px 30px 38px;
  background:linear-gradient(180deg,#d8cfb4,#b3a88a);border:4px solid var(--ink);border-radius:22px;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.6),0 12px 0 #7d735a,0 12px 0 4px var(--ink),0 40px 70px rgba(0,0,0,.55);
  transform:perspective(1200px) rotateX(14deg);transform-origin:center bottom}
.key-cap{--c:var(--cream);--c2:#b9ae8c;position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  min-height:108px;padding:12px 16px 16px;color:var(--ink);text-align:left;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 65%,#fff),var(--c) 30%);
  border:3px solid var(--ink);border-radius:14px;
  box-shadow:0 9px 0 var(--c2),0 9px 0 3px var(--ink),0 18px 20px rgba(0,0,0,.3);
  transition:transform .1s,box-shadow .1s}
.key-cap small{font-family:var(--f-pixel);font-size:1.25rem;opacity:.75}
.key-cap b{font-family:var(--f-display);font-weight:400;font-size:clamp(.95rem,1.5vw,1.2rem);line-height:1.05;display:flex;align-items:center;gap:.4em}
.key-cap:hover{transform:translateY(-3px);box-shadow:0 12px 0 var(--c2),0 12px 0 3px var(--ink),0 22px 24px rgba(0,0,0,.3)}
.key-cap:active,.key-cap.pressed{transform:translateY(8px);box-shadow:0 1px 0 var(--c2),0 1px 0 3px var(--ink),0 4px 6px rgba(0,0,0,.3)}
.key-cap.wide{grid-column:span 2}
.key-cap.space{grid-column:span 5;min-height:84px;align-items:center;flex-direction:row;justify-content:center;gap:16px}
.c-yellow{--c:var(--yellow);--c2:#9e9a10}.c-pink{--c:var(--pink);--c2:#a3106b}.c-teal{--c:var(--mug);--c2:#169c95}
.c-blue{--c:#4a66ff;--c2:#1e2a9d;color:#fff!important}.c-orange{--c:var(--orange);--c2:#a45800}.c-lime{--c:var(--lime);--c2:#3e9a16}
.c-purple{--c:var(--sweater-hi);--c2:#3a2a44;color:#fff!important}.c-cream{--c:#f3ecd2;--c2:#b9ae8c}
.key-cap.c-lime b{font-size:clamp(1.3rem,2.4vw,1.9rem)}

/* ================= FOOTER ================= */
.footer{position:relative;background:var(--night);padding:250px 0 50px;overflow:hidden;text-align:center;border-top:4px solid var(--ink)}
.footer-sun{position:absolute;left:50%;top:-330px;width:520px;height:520px;transform:translateX(-50%);border-radius:50%;
  background:linear-gradient(180deg,#fff27a,var(--orange) 45%,var(--magenta) 80%);opacity:.9;
  -webkit-mask:linear-gradient(180deg,#000 0 60%,transparent 60% 64%,#000 64% 72%,transparent 72% 77%,#000 77% 84%,transparent 84% 90%,#000 90% 95%,transparent 95%);
          mask:linear-gradient(180deg,#000 0 60%,transparent 60% 64%,#000 64% 72%,transparent 72% 77%,#000 77% 84%,transparent 84% 90%,#000 90% 95%,transparent 95%)}
.footer-inner{display:grid;justify-items:center;gap:28px;position:relative}
.brand-lg{font-size:clamp(1.8rem,4vw,2.6rem);gap:14px;text-align:left}
.brand-lg span{display:flex;flex-direction:column;line-height:1}
.brand-lg em{font-style:normal;font-family:var(--f-pixel);font-size:.7em;color:var(--mug);text-shadow:none}
.footer-social{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.footer .nameplate{width:min(520px,100%)}
.disclaimer{max-width:560px;font-size:.85rem;opacity:.6}
.copy{font-family:var(--f-pixel);font-size:1.2rem;color:var(--pink)}

/* ================= TOAST ================= */
.toast{position:fixed;left:50%;bottom:28px;z-index:950;transform:translate(-50%,160%);opacity:0;visibility:hidden;
  font-family:var(--f-display);font-size:.95rem;background:var(--lime);color:var(--ink);border:3px solid var(--ink);border-radius:12px;
  padding:.8em 1.3em;box-shadow:5px 5px 0 var(--ink);transition:transform .35s cubic-bezier(.3,1.5,.5,1);max-width:calc(100% - 32px);text-align:center}
.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible}
.toast{transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .25s,visibility .35s}
.toast.warn{background:var(--yellow)}

/* ================= REVEAL ================= */
.reveal{opacity:0;transform:translateY(50px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.memo.reveal{transform:translateY(60px) rotate(-8deg)}
.memo.reveal.in{transform:rotate(-2.5deg)}
.polaroid.reveal{transform:translateY(70px) rotate(calc(var(--r) * 3)) scale(.9)}
.polaroid.reveal.in{transform:rotate(var(--r))}
.p2.reveal{transition-delay:.12s}.p3.reveal{transition-delay:.24s}.p4.reveal{transition-delay:.36s}
.drawer.reveal{transform:translateY(30px)}
.keyboard.reveal{transform:perspective(1200px) rotateX(40deg) translateY(60px)}
.keyboard.reveal.in{transform:perspective(1200px) rotateX(14deg)}

/* ================= RESPONSIVE ================= */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;text-align:center;gap:34px}
  .hero-copy{display:flex;flex-direction:column;align-items:center}
  .hero-cta{justify-content:center}
  .hero-fade{background:linear-gradient(180deg,rgba(22,15,46,.55),rgba(22,15,46,.25) 45%,rgba(22,15,46,.4) 70%,var(--navy))}
  .hero-visual{order:2}
  .crt-wrap{width:min(400px,84%)}
  .lore-grid{grid-template-columns:1fr;gap:70px}
  .rm-inner{grid-template-columns:1fr;align-content:center;gap:18px;text-align:center}
  .rm-head{display:flex;flex-direction:column;align-items:center}
  .rm-cards{height:300px}
  .keyboard{grid-template-columns:repeat(3,1fr);transform:none}
  .keyboard.reveal.in{transform:none}
  .keyboard.reveal{transform:translateY(60px)}
  .key-cap.space{grid-column:span 3}
  .key-cap.wide{grid-column:span 1}
}
@media (max-width:860px){
  .nav{position:fixed;inset:0;z-index:1;flex-direction:column;justify-content:center;gap:26px;background:#160f2e;
    transform:translateY(-100%);transition:transform .45s cubic-bezier(.7,0,.2,1)}
  .nav.open{transform:none}
  .nav>a{font-size:1.6rem}
  .nav-social{display:flex;gap:16px;margin-top:10px}
  .head-social{display:none}
  .burger{display:flex}
}
@media (max-width:600px){
  :root{--hdr:66px}
  .section{padding:90px 0}
  .brand span{font-size:1rem}
  .hero{padding-top:calc(var(--hdr) + 20px)}
  .hero-cta{width:100%;flex-direction:column;align-items:stretch}
  .hero-cta .key{width:100%}
  .coin{width:84px;height:84px;left:-18px;top:-26px}
  .mug-sticker{width:88px;right:-14px}
  .memo{padding:36px 22px 30px 34px}
  .wall{height:520px}
  .p1{width:70%;height:190px}.p2{width:44%;height:230px}.p3{width:54%;height:210px;left:4%;top:230px}.p4{width:40%;height:200px;top:280px;right:2%}
  .drawer-front{gap:14px;padding:16px 16px;min-height:96px}
  .drawer-no{font-size:1.8rem}
  .drawer-handle{display:none}
  .drawer.in .drawer-front{transform:translateZ(30px)}
  .monitor-bezel{padding:14px 14px 0;border-radius:18px}
  .monitor-screen{aspect-ratio:3/4}
  .keyboard{grid-template-columns:repeat(2,1fr);gap:16px;padding:20px 18px 26px}
  .key-cap.space{grid-column:span 2}
  .key-cap.wide{grid-column:span 2}
  .key-cap{min-height:92px}
  .np-ca{font-size:1.1rem}
  .memo{padding-bottom:78px}
  .stamp{right:18px;bottom:18px;font-size:1.05rem}
  .key-cap.f4,.key-cap.xk{grid-column:span 2}
  .footer{padding-top:230px}
  .footer-social .key{flex:1 1 40%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}