/* =========================================================
   TRUMP & MORTY — $TRORTY
   palette sampled from the source picture
   ========================================================= */
:root{
  --mustard:#f3d440; --cream:#f2e281; --paper:#fff7cf;
  --navy:#292f44;    --navy-2:#1d2233;
  --orange:#ef9043;  --coral:#f6b68f; --sand:#eda57c;
  --pink:#ea829a;    --pink-2:#f2a8b8;
  --red:#d23c34;     --rust:#c74a3e;
  --teal:#89cebc;    --slime:#a6d86f; --slime-2:#7fbb4c;
  --ink:#1a0f0b;     --white:#fafafa;
  --display:'Luckiest Guy','Impact','Arial Black',sans-serif;
  --body:'Fredoka','Poppins','Segoe UI',system-ui,sans-serif;
  --mono:'VT323','Courier New',monospace;
  --ol:4px; --sh:6px;
  --ease:cubic-bezier(.2,.9,.25,1.2);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis-on{scroll-behavior:auto}
body{font-family:var(--body);background:var(--navy-2);color:var(--ink);overflow-x:hidden;line-height:1.45;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
body.is-loading{overflow:hidden}
.wrap{width:min(1180px,92vw);margin:0 auto;position:relative;z-index:2}

.grain{position:fixed;inset:0;pointer-events:none;z-index:900;background:url(../img/grain.png);opacity:.05;mix-blend-mode:multiply}

/* ================= LOADER ================= */
#loader{position:fixed;inset:0;z-index:2000;background:#000;overflow:hidden;display:grid;place-items:center;transition:opacity .5s ease .1s}
.loader__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.15) contrast(1.05);transform:scale(1.08);animation:loaderZoom 6s ease-out forwards}
@keyframes loaderZoom{to{transform:scale(1)}}
.loader__static{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.55;transition:opacity .6s}
.loader__scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px);pointer-events:none;animation:scanroll 8s linear infinite}
@keyframes scanroll{to{background-position:0 400px}}
.loader__vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.75) 100%)}
.loader__osd{position:absolute;top:22px;font-family:var(--mono);font-size:clamp(26px,3vw,40px);color:#b8ff6a;text-shadow:0 0 8px rgba(160,255,90,.8),2px 2px 0 #000}
.loader__osd--tl{left:28px}
.loader__osd--tr{right:28px;color:#ff5a4a;text-shadow:0 0 8px rgba(255,80,60,.8),2px 2px 0 #000;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.loader__center{position:relative;text-align:center;transform:rotate(-3deg)}
.loader__title{font-family:var(--display);font-size:clamp(46px,9vw,140px);line-height:.9;color:var(--white);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:6px 6px 0 var(--ink),10px 10px 0 var(--red)}
.loader__title span{color:var(--mustard)}
.loader__ticker{display:inline-block;margin-top:14px;font-family:var(--display);font-size:clamp(24px,3.4vw,46px);background:var(--slime);color:var(--ink);padding:6px 22px 2px;border:var(--ol) solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);transform:rotate(4deg)}
.loader__bottom{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:min(520px,82vw);text-align:center}
.loader__label{font-family:var(--mono);font-size:30px;color:#b8ff6a;text-shadow:0 0 8px rgba(160,255,90,.8),2px 2px 0 #000;margin-bottom:6px}
.loader__bar{height:18px;border:3px solid var(--ink);background:rgba(0,0,0,.55);border-radius:10px;overflow:hidden;box-shadow:4px 4px 0 var(--ink)}
.loader__bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(-45deg,var(--slime) 0 12px,var(--slime-2) 12px 24px);transition:width .25s}
#loader.is-off{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.6% 0 49.6% 0);filter:brightness(3)}
  75%{clip-path:inset(49.6% 49% 49.6% 49%);filter:brightness(5)}
  100%{clip-path:inset(50% 50% 50% 50%);opacity:0}
}

/* ================= HEADER ================= */
.site-header{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px clamp(14px,3vw,36px);transition:background .3s,box-shadow .3s,padding .3s}
.site-header.scrolled{background:var(--mustard);box-shadow:0 var(--ol) 0 var(--ink);padding-top:8px;padding-bottom:8px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:28px;letter-spacing:1px;color:var(--white);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink)}
.logo img{width:44px;height:44px;animation:eyeSpin 9s linear infinite}
@keyframes eyeSpin{0%,80%{transform:rotate(0)}90%{transform:rotate(-20deg) scale(1.1)}100%{transform:rotate(0)}}
.nav{display:flex;gap:6px;background:var(--white);border:var(--ol) solid var(--ink);border-radius:999px;padding:5px;box-shadow:4px 4px 0 var(--ink)}
.nav a{font-weight:700;font-size:15px;padding:8px 16px;border-radius:999px;transition:background .2s,transform .2s}
.nav a:hover{background:var(--mustard);transform:rotate(-3deg)}
.header__social{display:flex;align-items:center;gap:10px}

/* ---------- sticker buttons (TG / X / DEX) ---------- */
.sticker{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-size:20px;letter-spacing:.5px;padding:10px 18px 7px;border:var(--ol) solid var(--ink);border-radius:16px;box-shadow:var(--sh) var(--sh) 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s;position:relative}
.sticker svg{width:22px;height:22px;fill:currentColor;flex:none;margin-top:-3px}
.sticker:hover{transform:translate(-3px,-3px) rotate(-4deg);box-shadow:calc(var(--sh) + 3px) calc(var(--sh) + 3px) 0 var(--ink)}
.sticker:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--ink)}
.sticker--sm{font-size:17px;padding:8px 13px 5px;border-radius:13px;--sh:4px}
.sticker--sm svg{width:18px;height:18px}
.sticker--tg{background:var(--teal);color:var(--ink)}
.sticker--x{background:var(--ink);color:var(--white);box-shadow:var(--sh) var(--sh) 0 var(--red)}
.sticker--x:hover{box-shadow:calc(var(--sh) + 3px) calc(var(--sh) + 3px) 0 var(--red)}
.sticker--dex{background:var(--red);color:var(--white)}
.burger{display:none;width:48px;height:44px;background:var(--white);border:var(--ol) solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:5px;position:relative;z-index:2}
.burger i{display:block;width:22px;height:3px;background:var(--ink);border-radius:3px;transition:transform .3s,opacity .3s}
.burger.open i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ================= HERO ================= */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:var(--mustard);display:flex;align-items:center;padding:110px 0 120px;isolation:isolate}
.hero__layer{position:absolute;pointer-events:none;will-change:transform}
.hero__sky{inset:-6% -4%;background:url(../img/sky.webp) center/cover}
.hero__planet{width:min(62vw,860px);left:-16vw;top:-22vw;animation:spin 140s linear infinite}
@keyframes spin{to{rotate:360deg}}
.hero__ring{width:min(22vw,300px);right:36%;top:9%;animation:bob 7s ease-in-out infinite}
@keyframes bob{50%{translate:0 -18px}}
.hero__dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero__desert-far{left:-5%;right:-5%;bottom:13%;height:36%;background:url(../img/desert-far.webp) center bottom/auto 100% repeat-x}
.hero__desert-near{left:-5%;right:-5%;bottom:-2%;height:30%;background:url(../img/desert-near.webp) center top/auto 100% repeat-x}
.hero__inner{position:relative;z-index:3;width:min(1240px,94vw);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px}

.onair{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:24px;background:var(--ink);color:#b8ff6a;padding:4px 14px 2px;border-radius:8px;transform:rotate(-2deg);box-shadow:4px 4px 0 var(--red)}
.onair i{width:12px;height:12px;border-radius:50%;background:#ff4b3e;box-shadow:0 0 10px #ff4b3e;animation:blink 1s steps(2) infinite}
.title{font-family:var(--display);font-weight:400;line-height:.86;margin:18px 0 8px;letter-spacing:1px;display:flex;flex-direction:column;align-items:flex-start}
.title__row{display:flex;align-items:center;font-size:clamp(58px,8.6vw,132px);color:var(--white);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:7px 7px 0 var(--ink)}
.title__row:last-child{color:var(--paper);margin-left:.35em}
.title__row .l{display:inline-block;transform-origin:50% 90%;animation:wob 2.6s ease-in-out infinite}
.title__row:first-child .l{text-shadow:7px 7px 0 var(--ink),11px 11px 0 var(--red)}
.title__row:last-child .l{text-shadow:7px 7px 0 var(--ink),11px 11px 0 var(--pink)}
@keyframes wob{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-4px) rotate(-3deg)}75%{transform:translateY(2px) rotate(2.5deg)}}
.title__amp{display:inline-block;margin-left:.12em;font-size:.62em;color:var(--slime);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink);transform:rotate(12deg) translateY(.18em);animation:ampSpin 4s var(--ease) infinite}
@keyframes ampSpin{0%,80%{rotate:0deg}90%{rotate:-25deg}100%{rotate:0deg}}
.ticker-badge{display:inline-block;margin:6px 0 22px;transform:rotate(-4deg)}
.ticker-badge span{display:inline-block;font-family:var(--display);font-size:clamp(30px,3.6vw,50px);padding:10px 24px 4px;background:var(--red);color:var(--white);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;border:var(--ol) solid var(--ink);border-radius:16px;box-shadow:var(--sh) var(--sh) 0 var(--ink);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.05) rotate(2deg)}}

/* ---------- main buttons ---------- */
.cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-size:clamp(22px,2.2vw,30px);letter-spacing:.5px;padding:16px 28px 11px;border:var(--ol) solid var(--ink);border-radius:20px;box-shadow:7px 7px 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s;isolation:isolate}
.btn svg{width:28px;height:28px;flex:none;margin-top:-4px}
.btn:hover{transform:translate(-3px,-3px) rotate(-2deg);box-shadow:10px 10px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:2px 2px 0 var(--ink)}
.btn--pump{background:var(--slime);color:var(--ink);padding:18px 30px 13px;font-size:clamp(22px,2.2vw,32px)}
.btn--pump .pill{fill:var(--white);stroke:var(--ink);stroke-width:2}
.btn--pump::before{content:"";position:absolute;inset:6px 10px auto 10px;height:30%;border-radius:12px;background:rgba(255,255,255,.4);z-index:-1}
.drip{position:absolute;left:16%;right:16%;top:100%;height:30px;pointer-events:none;margin-top:calc(var(--ol) * -1)}
.drip::before,.drip::after{content:"";position:absolute;top:0;width:18px;border:var(--ol) solid var(--ink);border-top:0;background:var(--slime);border-radius:0 0 12px 12px;animation:drip 2.8s ease-in-out infinite}
.drip::before{left:18%;height:22px}
.drip::after{left:66%;height:14px;width:14px;animation-delay:1.1s}
@keyframes drip{0%,100%{transform:scaleY(1);transform-origin:top}50%{transform:scaleY(1.45)}}
.btn--dex{background:var(--red);color:var(--white)}
.btn--dex span{-webkit-text-stroke:1px var(--ink);paint-order:stroke fill}
.btn--small{font-size:18px;padding:10px 16px 6px;border-radius:14px;box-shadow:4px 4px 0 var(--ink);background:var(--mustard)}

/* ---------- CA copy ---------- */
.ca{display:flex;align-items:center;gap:0;margin-top:34px;max-width:100%;background:var(--white);border:var(--ol) solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 var(--ink);overflow:hidden;text-align:left;transition:transform .2s var(--ease),box-shadow .2s}
.ca:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.ca:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.ca__label{font-family:var(--display);font-size:20px;padding:12px 14px 8px;background:var(--navy);color:var(--mustard);align-self:stretch;display:flex;align-items:center}
.ca__value{font-family:var(--mono);font-size:22px;padding:8px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.ca__btn{font-family:var(--display);font-size:18px;color:var(--ink);padding:12px 16px 8px;background:var(--mustard);border-left:var(--ol) solid var(--ink);align-self:stretch;display:flex;align-items:center}
.ca.copied .ca__btn{background:var(--slime)}
.ca--light{margin-top:0}
.ca--dark{background:var(--navy-2);color:var(--cream);box-shadow:6px 6px 0 var(--mustard);margin:26px auto 0}
.ca--dark .ca__label{background:var(--mustard);color:var(--ink)}

/* ---------- CRT TV ---------- */
.hero__tv-wrap{position:relative;perspective:1200px;display:flex;justify-content:center}
.tv{position:relative;width:min(100%,540px);transform-style:preserve-3d;transition:transform .15s linear;will-change:transform}
.tv__antenna{position:absolute;left:50%;top:-58px;width:0;height:60px}
.tv__antenna i{position:absolute;bottom:0;left:0;width:6px;height:90px;background:var(--ink);border-radius:4px;transform-origin:bottom center}
.tv__antenna i:first-child{transform:rotate(-32deg);animation:ant 3s ease-in-out infinite}
.tv__antenna i:last-child{transform:rotate(28deg);animation:ant2 3.4s ease-in-out infinite}
.tv__antenna i::after{content:"";position:absolute;top:-10px;left:-5px;width:16px;height:16px;border-radius:50%;background:var(--red);border:3px solid var(--ink)}
@keyframes ant{50%{transform:rotate(-24deg)}}
@keyframes ant2{50%{transform:rotate(36deg)}}
.tv__body{position:relative;display:flex;gap:16px;background:linear-gradient(160deg,#ffb36b,var(--orange) 55%,#d9702e);border:5px solid var(--ink);border-radius:34px;padding:22px;box-shadow:10px 12px 0 var(--ink),inset 0 -10px 0 rgba(0,0,0,.12),inset 0 8px 0 rgba(255,255,255,.25)}
.tv__screen{position:relative;flex:1;aspect-ratio:1;border:5px solid var(--ink);border-radius:28px/34px;overflow:hidden;background:#000;box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.tv__screen img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);animation:screenJit 6s steps(1) infinite}
@keyframes screenJit{0%,96%,100%{transform:scale(1.02) translateX(0);filter:none}97%{transform:scale(1.02) translateX(-6px);filter:hue-rotate(40deg) saturate(1.6)}98%{transform:scale(1.02) translateX(5px)}}
.tv__scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 4px);pointer-events:none}
.tv__glare{position:absolute;inset:0;background:radial-gradient(ellipse at 25% 15%,rgba(255,255,255,.35),transparent 45%),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.45));pointer-events:none}
.tv__osd{position:absolute;top:12px;left:14px;font-family:var(--mono);font-size:24px;color:#b8ff6a;text-shadow:0 0 6px rgba(160,255,90,.9),2px 2px 0 #000}
.tv__osd b{font-weight:400;color:#ff5a4a;margin-left:8px;animation:blink 1s steps(2) infinite}
.tv__panel{width:62px;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:10px}
.knob{display:block;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,var(--mustard) 45%,#c9a520);border:4px solid var(--ink);box-shadow:3px 3px 0 var(--ink);position:relative;transition:transform .5s var(--ease)}
.knob::after{content:"";position:absolute;left:50%;top:4px;width:4px;height:14px;margin-left:-2px;background:var(--ink);border-radius:2px}
.tv:hover .knob:first-child{transform:rotate(120deg)}
.tv:hover .knob:nth-child(2){transform:rotate(-80deg)}
.tv__grill{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.tv__grill i{display:block;width:40px;height:6px;border-radius:4px;background:var(--ink);opacity:.75}
.tv__legs{display:flex;justify-content:space-between;padding:0 70px}
.tv__legs i{display:block;width:20px;height:34px;background:var(--ink);border-radius:0 0 8px 8px}
.tv__legs i:first-child{transform:skewX(12deg)}
.tv__legs i:last-child{transform:skewX(-12deg)}
.float-eye{position:absolute;width:86px;pointer-events:none;filter:drop-shadow(4px 5px 0 rgba(26,15,11,.85));z-index:4}
.float-eye--1{left:-4%;top:6%;animation:floatA 6s ease-in-out infinite}
.float-eye--2{right:-2%;bottom:18%;width:64px;animation:floatB 7s ease-in-out infinite}
.float-eye--3{left:10%;bottom:-2%;width:54px;animation:floatA 5s ease-in-out infinite reverse}
@keyframes floatA{0%,100%{transform:translate3d(0,0,0) rotateY(0) rotate(0)}50%{transform:translate3d(10px,-22px,0) rotateY(180deg) rotate(20deg)}}
@keyframes floatB{0%,100%{transform:translate3d(0,0,0) rotateX(0) rotate(0)}50%{transform:translate3d(-12px,-16px,0) rotateX(180deg) rotate(-25deg)}}

/* ================= TAPE ================= */
.tape{position:relative;z-index:6;height:150px;margin:-70px 0 -80px;overflow:hidden;pointer-events:none}
.tape__row{position:absolute;left:-5%;right:-5%;border-block:var(--ol) solid var(--ink);overflow:hidden;white-space:nowrap;box-shadow:0 6px 0 rgba(0,0,0,.25)}
.tape__row--a{top:28px;background:var(--red);transform:rotate(-2.5deg);z-index:2}
.tape__row--b{top:62px;background:var(--navy);transform:rotate(2deg)}
.tape__track{display:inline-block;font-family:var(--display);font-size:32px;padding:12px 0 6px;color:var(--white);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;will-change:transform}
.tape__row--b .tape__track{font-family:var(--mono);-webkit-text-stroke:0;font-size:34px;color:var(--mustard);padding:10px 0 6px}

/* ================= SECTIONS ================= */
.section{position:relative;padding:150px 0 130px;overflow:hidden}
.section--space{background:var(--navy) url(../img/space-navy.webp) center/cover;color:var(--cream)}
.section--sky{background:#f0df7b url(../img/sky.webp) center bottom/cover}
.section--pink{background:var(--sand);padding-top:40px}
.section--pink::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(199,74,62,.35) 2px,transparent 2.5px);background-size:26px 26px;pointer-events:none}
.head{margin-bottom:48px}
.head--center{text-align:center}
.ch{display:inline-block;font-family:var(--mono);font-size:28px;line-height:1;padding:6px 14px 4px;background:var(--ink);color:#b8ff6a;border-radius:8px;box-shadow:4px 4px 0 var(--red);transform:rotate(-2deg);margin-bottom:14px}
.h2{font-family:var(--display);font-weight:400;font-size:clamp(48px,7vw,104px);line-height:.9;color:var(--mustard);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:6px 6px 0 var(--ink),10px 10px 0 var(--red)}
.h2--ink{color:var(--white);text-shadow:6px 6px 0 var(--ink),10px 10px 0 var(--pink)}

/* ---------- lore ---------- */
.lore{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.lore__visual{position:relative;min-height:480px;perspective:1000px}
.frame{position:absolute;border:5px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:10px 10px 0 var(--mustard),10px 10px 0 5px var(--ink);background:#000}
.frame img{width:100%;height:100%;object-fit:cover}
.frame--tilt-l{width:78%;left:0;top:0;aspect-ratio:430/370;transform:rotate(-4deg)}
.frame--small{width:46%;right:0;bottom:0;aspect-ratio:440/470;transform:rotate(6deg);box-shadow:10px 10px 0 var(--pink),10px 10px 0 5px var(--ink)}
.frame__tag{position:absolute;left:14px;bottom:14px;font-family:var(--mono);font-size:26px;background:var(--ink);color:#b8ff6a;padding:2px 10px;border-radius:6px}
.lore__text{font-size:clamp(18px,1.6vw,22px);font-weight:500;max-width:520px;margin-top:22px;color:#f7efd0}
.quote{font-family:var(--display);font-size:clamp(34px,4vw,56px);line-height:1;color:var(--slime);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink);margin:22px 0 4px;transform:rotate(-2deg)}
.stats{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}
.stat{background:var(--cream);color:var(--ink);border:var(--ol) solid var(--ink);border-radius:18px;padding:12px 20px 10px;box-shadow:5px 5px 0 var(--ink);text-align:center;min-width:110px}
.stat:nth-child(2){transform:rotate(3deg);background:var(--pink)}
.stat:nth-child(3){transform:rotate(-2deg);background:var(--teal)}
.stat b{display:block;font-family:var(--display);font-size:42px;line-height:1;font-weight:400}
.stat span{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.5px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;perspective:1000px}
.step{position:relative;background:var(--white);border:var(--ol) solid var(--ink);border-radius:26px;padding:30px 22px 26px;box-shadow:8px 8px 0 var(--ink);transform-style:preserve-3d;transition:transform .2s linear}
.step:nth-child(1){background:var(--paper)}
.step:nth-child(2){background:var(--coral)}
.step:nth-child(3){background:var(--teal)}
.step:nth-child(4){background:var(--pink-2)}
.step__n{position:absolute;top:-22px;right:18px;font-family:var(--display);font-size:36px;background:var(--red);color:var(--white);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;padding:6px 14px 0;border:var(--ol) solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);transform:rotate(6deg)}
.step__ico{width:68px;height:68px;display:grid;place-items:center;font-size:36px;background:var(--white);border:var(--ol) solid var(--ink);border-radius:50%;box-shadow:4px 4px 0 var(--ink);margin-bottom:18px;font-weight:700}
.step h3{font-family:var(--display);font-weight:400;font-size:28px;line-height:1;margin-bottom:8px}
.step p{font-weight:500;font-size:16px}
.buy__cta{display:flex;flex-wrap:wrap;gap:24px 30px;align-items:center;justify-content:center;margin-top:56px}
.buy__cta .ca{max-width:560px;flex:1 1 320px}
.section--sky#buy{padding-bottom:240px}
.desert-edge{position:absolute;left:0;right:0;bottom:-1px;height:200px;background:url(../img/desert-near.webp) center top/auto 100% repeat-x;z-index:1;pointer-events:none}

/* ---------- big tv chart ---------- */
.big-tv{background:linear-gradient(160deg,#4a5170,var(--navy) 60%,#1f2436);border:5px solid var(--ink);border-radius:36px;padding:24px 24px 16px;box-shadow:12px 12px 0 var(--ink)}
.big-tv__screen{position:relative;aspect-ratio:16/8.4;min-height:380px;border:5px solid var(--ink);border-radius:22px;overflow:hidden;background:#0d1016}
.big-tv__screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.big-tv__scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 2px,transparent 2px 4px);pointer-events:none}
.chart-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;background:radial-gradient(circle at center,#2b3150,#0d1016 70%)}
.chart-placeholder::before{content:"";position:absolute;inset:0;opacity:.18;background:repeating-radial-gradient(circle at 50% 50%,#fff 0 1px,transparent 1px 3px);animation:staticShift .25s steps(3) infinite}
@keyframes staticShift{33%{background-position:3px 2px}66%{background-position:-2px 3px}}
.chart-placeholder img{width:110px;animation:floatA 5s ease-in-out infinite;position:relative}
.chart-placeholder p{font-family:var(--mono);font-size:44px;color:#b8ff6a;text-shadow:0 0 10px rgba(160,255,90,.8);position:relative}
.chart-placeholder span{font-weight:600;color:var(--cream);opacity:.8;position:relative}
.big-tv__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:16px;flex-wrap:wrap}
.big-tv__brand{font-family:var(--display);font-size:24px;color:var(--mustard);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink)}

/* ---------- roadmap ---------- */
.episodes{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-top:40px}
.episodes__line{position:absolute;left:4%;right:4%;top:0;height:14px;border:3px solid var(--ink);border-radius:10px;background:rgba(255,255,255,.12);overflow:hidden}
.episodes__line i{display:block;height:100%;width:0;background:repeating-linear-gradient(-45deg,var(--slime) 0 12px,var(--slime-2) 12px 24px)}
.ep{position:relative;background:var(--cream);color:var(--ink);border:var(--ol) solid var(--ink);border-radius:22px;padding:24px 20px 22px;box-shadow:8px 8px 0 var(--ink)}
.ep::before{content:"";position:absolute;top:-47px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--mustard);border:4px solid var(--ink)}
.ep:nth-child(3){transform:translateY(24px) rotate(1.5deg);background:var(--coral)}
.ep:nth-child(4){transform:rotate(-1.5deg);background:var(--teal)}
.ep:nth-child(5){transform:translateY(24px) rotate(1deg);background:var(--pink-2)}
.ep__code{display:inline-block;font-family:var(--mono);font-size:24px;background:var(--ink);color:#b8ff6a;padding:0 10px;border-radius:6px;margin-bottom:12px}
.ep h3{font-family:var(--display);font-weight:400;font-size:30px;line-height:1;margin-bottom:8px}
.ep p{font-weight:500}
.ep__status{display:inline-block;margin-top:14px;font-family:var(--display);font-size:16px;padding:6px 12px 2px;border:3px solid var(--ink);border-radius:10px;background:var(--white)}
.ep__status--on{background:var(--red);color:var(--white)}

/* ---------- remote ---------- */
.section--remote{padding:130px 0 120px}
.remote{max-width:620px;margin:0 auto;background:linear-gradient(170deg,#3a4160,var(--navy) 50%,#1a1e2e);border:5px solid var(--ink);border-radius:48px 48px 70px 70px;padding:30px 30px 36px;box-shadow:14px 14px 0 var(--ink);transform:rotate(-1.5deg)}
.remote__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding:0 6px}
.remote__led{width:16px;height:16px;border-radius:50%;background:#ff4b3e;border:3px solid var(--ink);box-shadow:0 0 12px #ff4b3e;animation:blink 1.4s steps(2) infinite}
.remote__brand{font-family:var(--mono);font-size:26px;color:var(--mustard);letter-spacing:2px}
.remote__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.key{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:96px;font-family:var(--display);font-size:clamp(17px,2vw,22px);letter-spacing:.5px;text-align:center;border:var(--ol) solid var(--ink);border-radius:22px;box-shadow:0 7px 0 var(--ink);transition:transform .12s,box-shadow .12s;line-height:1.05;padding:8px 6px 4px;position:relative;overflow:hidden}
.key::before{content:"";position:absolute;left:8px;right:8px;top:6px;height:28%;border-radius:14px;background:rgba(255,255,255,.35);pointer-events:none}
.key small{font-family:var(--mono);font-size:26px;line-height:1}
.key:hover{transform:translateY(-3px);box-shadow:0 10px 0 var(--ink)}
.key:active{transform:translateY(6px);box-shadow:0 1px 0 var(--ink)}
.key--yellow{background:var(--mustard)} .key--pink{background:var(--pink)} .key--teal{background:var(--teal)}
.key--orange{background:var(--orange)} .key--navy{background:#4b5578;color:var(--white)} .key--red{background:var(--red);color:var(--white)}
.key--green{background:var(--slime)} .key--blue{background:#6fb7e8} .key--black{background:#111;color:var(--white)}
.key--black::before{background:rgba(255,255,255,.12)}
.remote__power{display:block;width:100%;margin-top:22px;font-family:var(--display);font-size:26px;padding:16px 0 10px;background:var(--cream);border:var(--ol) solid var(--ink);border-radius:999px;box-shadow:0 7px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.remote__power:hover{transform:translateY(-3px);box-shadow:0 10px 0 var(--ink)}
.remote__power:active{transform:translateY(6px);box-shadow:0 1px 0 var(--ink)}
.remote__power.copied{background:var(--slime)}

/* ================= FOOTER ================= */
.footer{position:relative;background:var(--sand);padding:210px 0 50px;text-align:center;overflow:hidden}
.footer__desert{position:absolute;left:0;right:0;top:0;height:200px;background:#f0df7b url(../img/desert-near.webp) center top/auto 100% repeat-x}
.footer__inner{display:flex;flex-direction:column;align-items:center}
.footer__avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:5px solid var(--ink);box-shadow:6px 6px 0 var(--ink);margin-top:-60px;position:relative;z-index:2}
.footer__name{font-family:var(--display);font-size:clamp(40px,6vw,76px);line-height:1;margin:18px 0 26px;color:var(--white);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink)}
.footer__name span{display:block;color:var(--mustard);font-size:.6em}
.footer__social{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.footer__legal{max-width:620px;margin-top:34px;font-size:13px;font-weight:500;opacity:.75}

/* ================= TOAST ================= */
.toast{position:fixed;left:50%;bottom:28px;z-index:1500;transform:translate(-50%,220px) rotate(-2deg);font-family:var(--display);font-size:22px;padding:14px 24px 9px;background:var(--slime);border:var(--ol) solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 var(--ink);transition:transform .35s var(--ease);pointer-events:none;white-space:nowrap}
.toast.show{transform:translate(-50%,0) rotate(-2deg)}
.toast.warn{background:var(--mustard)}

/* ================= REVEAL ================= */
.reveal{opacity:0;transform:translateY(46px) scale(.96);transition:opacity .7s ease,transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.ep.reveal.in:nth-child(3){transform:translateY(24px) rotate(1.5deg)}
.ep.reveal.in:nth-child(4){transform:rotate(-1.5deg)}
.ep.reveal.in:nth-child(5){transform:translateY(24px) rotate(1deg)}
.remote.reveal.in{transform:rotate(-1.5deg)}
.ch.reveal.in{transform:rotate(-2deg)}
.quote.reveal.in{transform:rotate(-2deg)}

/* ================= RESPONSIVE ================= */
@media (max-width:1020px){
  .nav{display:none;position:fixed;top:0;left:0;right:0;flex-direction:column;gap:4px;border-radius:0 0 28px 28px;padding:90px 20px 24px;box-shadow:0 6px 0 var(--ink);border-width:0 0 var(--ol) 0;background:var(--mustard)}
  .nav.open{display:flex}
  .nav a{font-family:var(--display);font-weight:400;font-size:30px;text-align:center;padding:10px}
  .burger{display:flex}
  .logo{position:relative;z-index:2}
  .hero__inner{grid-template-columns:1fr;text-align:center}
  .hero__copy{display:flex;flex-direction:column;align-items:center}
  .title{align-items:center}
  .title__row:last-child{margin-left:0}
  .cta{justify-content:center}
  .hero__tv-wrap{margin-top:30px}
  .tv{width:min(88%,460px)}
  .hero__planet{width:90vw;left:-40vw;top:-30vw}
  .hero__ring{right:4%;top:14%;width:26vw}
  .lore{grid-template-columns:1fr;gap:40px}
  .lore__visual{min-height:0;aspect-ratio:1.15}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .episodes{grid-template-columns:repeat(2,1fr);row-gap:44px}
  .episodes__line{display:none}
  .ep::before{display:none}
}
@media (max-width:600px){
  :root{--ol:3px;--sh:5px}
  .site-header{padding:10px 12px}
  .logo{font-size:22px}
  .logo img{width:36px;height:36px}
  .header__social .sticker span{display:none}
  .header__social .sticker{padding:9px 10px}
  .hero{padding:100px 0 120px}
  .title__row{-webkit-text-stroke:4px var(--ink);text-shadow:5px 5px 0 var(--ink)}
  .title__row:first-child .l{text-shadow:5px 5px 0 var(--ink),8px 8px 0 var(--red)}
  .title__row:last-child .l{text-shadow:5px 5px 0 var(--ink),8px 8px 0 var(--pink)}
  .btn--pump{padding:18px 24px 12px}
  .cta{flex-direction:column;align-items:stretch;width:100%}
  .cta .btn{justify-content:center}
  .ca{width:100%}
  .ca__value{font-size:18px}
  .tv__body{padding:14px;gap:10px;border-radius:26px}
  .tv__panel{width:40px}
  .knob{width:32px;height:32px}
  .tv__grill i{width:28px}
  .tv__legs{padding:0 40px}
  .float-eye{width:60px}
  .tape__track{font-size:24px}
  .tape__row--b .tape__track{font-size:26px}
  .section{padding:120px 0 100px}
  .steps,.episodes{grid-template-columns:1fr}
  .ep:nth-child(n){transform:none}
  .ep.reveal.in:nth-child(n){transform:none}
  .big-tv{padding:12px 12px 10px;border-radius:24px}
  .big-tv__screen{aspect-ratio:auto;height:440px;min-height:0}
  .remote{padding:22px 16px 26px;border-radius:36px 36px 50px 50px}
  .remote__grid{gap:10px}
  .key{min-height:80px;border-radius:16px}
  .key small{font-size:22px}
  .sticker{font-size:18px}
  .onair{font-size:18px;padding:3px 10px 1px}
  .hero__tv-wrap{margin-top:90px}
  .key{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}