/* ═══════════════════════════════════════════════════════════════
   KORI 404 — $KORI404 — "she broke the feed"
   paper-light glitch system: violet / lime / cyan on torn paper
   ═══════════════════════════════════════════════════════════════ */

:root{
  --paper:#F3F2F7;
  --paper-2:#E9E7F0;
  --card:#FFFFFF;
  --ink:#100B1C;
  --ink-2:#5D5870;
  --line:#D8D5E3;
  --violet:#6C24E8;
  --violet-deep:#3A12B8;
  --violet-night:#1B0940;
  --lime:#A8E10C;
  --lime-deep:#5A7D00;
  --cyan:#29D6E8;
  --f-display:'Syne',sans-serif;
  --f-body:'Instrument Sans',system-ui,sans-serif;
  --f-px:'Silkscreen',monospace;
  --f-mono:'JetBrains Mono',monospace;
  --shadow-hard:6px 6px 0 var(--violet);
  --shadow-soft:0 18px 44px -18px rgba(27,9,64,.28);
  --rip:polygon(1.5% 4%, 6% 0.5%, 13% 3%, 19% 0%, 27% 2.5%, 34% 0.8%, 42% 3.2%, 50% 0.4%, 58% 2.8%, 66% 0.6%, 74% 3%, 82% 0.9%, 89% 2.6%, 95% 0.7%, 98.7% 4.5%, 100% 12%, 98.5% 22%, 100% 33%, 98.8% 45%, 100% 57%, 98.6% 68%, 100% 79%, 98.7% 89%, 96% 97%, 90% 99.4%, 82% 97.4%, 74% 100%, 65% 97.8%, 56% 99.8%, 47% 97.5%, 38% 100%, 29% 97.6%, 20% 99.7%, 12% 97.3%, 5% 99.2%, 1.2% 95%, 0% 86%, 1.4% 75%, 0% 63%, 1.3% 51%, 0% 39%, 1.5% 27%, 0% 15%);
}

/* ── base ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{overflow-x:clip;scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  overflow-x:clip;
  min-height:100vh;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--violet);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--violet);color:var(--lime)}
::-webkit-scrollbar{width:12px;background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--violet);border:3px solid var(--paper-2);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--violet-deep)}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:4px}
#footer :focus-visible,.cta-tear :focus-visible,.feed-counter :focus-visible,.marquee :focus-visible{outline-color:var(--lime)}
section{scroll-margin-top:92px;position:relative;padding:110px 24px;max-width:1200px;margin:0 auto}
.sk{font-family:var(--f-px);letter-spacing:.04em}

/* subtle halftone wash behind everything */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 12% 8%, rgba(108,36,232,.05), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(41,214,232,.05), transparent 30%),
    radial-gradient(circle at 78% 88%, rgba(168,225,12,.06), transparent 32%),
    var(--paper);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(16,11,28,.05) 1px, transparent 1.4px);
  background-size:22px 22px;
}

/* ── signal bar (scroll progress) ─────────────────────────────── */
#signalBar{position:fixed;top:0;left:0;right:0;height:5px;z-index:97;background:transparent;pointer-events:none}
#signalBar i{
  display:block;height:100%;width:0;
  background:repeating-linear-gradient(90deg,var(--violet) 0 14px,var(--lime) 14px 20px,var(--violet) 20px 34px,var(--cyan) 34px 39px);
  box-shadow:0 0 10px rgba(108,36,232,.55);
}

/* ── pixel field canvas ───────────────────────────────────────── */
#pixelField{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,footer,#nav{position:relative;z-index:1}

/* ── preloader ────────────────────────────────────────────────── */
#preloader{
  position:fixed;inset:0;z-index:200;background:var(--paper);
  display:grid;place-items:center;transition:opacity .45s ease,visibility .45s;
}
#preloader.gone{opacity:0;visibility:hidden;pointer-events:none}
.pl-window{
  width:min(480px,88vw);background:var(--card);border:2px solid var(--ink);
  box-shadow:var(--shadow-hard);border-radius:10px;overflow:hidden;
}
.pl-bar{display:flex;align-items:center;gap:7px;background:var(--paper-2);border-bottom:2px solid var(--ink);padding:9px 12px}
.pl-dot{width:10px;height:10px;border-radius:50%;background:var(--line);border:1.5px solid var(--ink)}
.pl-bar .pl-dot:first-child{background:var(--violet)}
.pl-bar .pl-dot:nth-child(2){background:var(--lime)}
.pl-bar .pl-dot:nth-child(3){background:var(--cyan)}
.pl-title{font-family:var(--f-px);font-size:.68rem;color:var(--ink-2);margin-left:auto}
.pl-body{padding:26px 22px 30px;font-family:var(--f-mono);font-size:.95rem}
.pl-query em{font-style:normal;color:var(--violet);font-weight:600}
.pl-caret{display:inline-block;width:9px;height:1.1em;background:var(--ink);vertical-align:text-bottom;margin-left:3px;animation:blink .85s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.pl-status{margin-top:14px;color:var(--ink-2);font-size:.82rem}
.pl-error{
  margin-top:14px;font-family:var(--f-px);font-size:1rem;color:#fff;
  background:var(--violet);display:inline-block;padding:6px 12px;
  animation:err-jitter .12s steps(2) 6;
}
@keyframes err-jitter{0%{transform:translate(0,0)}25%{transform:translate(-3px,2px)}50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,-2px)}100%{transform:translate(0,0)}}

/* ── nav ──────────────────────────────────────────────────────── */
#nav{
  position:sticky;top:0;z-index:96;
  display:flex;align-items:center;gap:26px;
  padding:12px clamp(16px,4vw,42px);
  background:rgba(243,242,247,.82);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border-bottom:2px solid var(--ink);
}
.nav-brand{display:flex;align-items:center;gap:10px;color:var(--ink);flex-shrink:0}
.nav-brand:hover{text-decoration:none}
.nav-brand img{border-radius:8px;border:2px solid var(--ink)}
.brand-word{font-family:var(--f-display);font-weight:800;font-size:1.18rem;letter-spacing:.01em}
.brand-word b{color:var(--violet)}
.nav-links{display:flex;gap:22px;margin-left:auto}
.nav-links a{
  color:var(--ink);font-weight:600;font-size:.92rem;position:relative;white-space:nowrap;
}
.nav-links a:hover{text-decoration:none;color:var(--violet)}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-4px;height:3px;
  background:linear-gradient(90deg,var(--violet),var(--lime));transition:right .22s ease;
}
.nav-links a:hover::after{right:0}
.nav-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-body);font-weight:600;font-size:.95rem;
  padding:10px 18px;border-radius:9px;border:2px solid var(--ink);
  cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
  position:relative;color:var(--ink);background:var(--card);
}
.btn:hover{text-decoration:none;transform:translate(-2px,-2px)}
.btn:active{transform:translate(1px,1px)}
.btn-solid{background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--violet)}
.btn-solid:hover{background:var(--violet);box-shadow:6px 6px 0 var(--lime);color:#fff}
.btn-solid img{filter:invert(1)}
.btn-line{background:var(--card);box-shadow:4px 4px 0 var(--line)}
.btn-line:hover{box-shadow:6px 6px 0 var(--cyan)}
.btn-ghost{padding:10px 12px;box-shadow:none;border-color:transparent;background:transparent}
.btn-ghost:hover{border-color:var(--ink);background:var(--card)}
.btn-big{font-size:1.02rem;padding:13px 24px}
.btn-solid.btn-big:hover{animation:btn-glitch .25s steps(3) 1}
@keyframes btn-glitch{33%{clip-path:inset(0 0 34% 0)}66%{clip-path:inset(52% 0 0 0)}100%{clip-path:none}}

/* burger + mobile menu */
#burger{display:none;margin-left:auto;background:none;border:2px solid var(--ink);border-radius:8px;padding:9px 8px;cursor:pointer;flex-direction:column;gap:4px}
#burger span{display:block;width:20px;height:2.5px;background:var(--ink);transition:transform .2s,opacity .2s}
#burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#burger.open span:nth-child(2){opacity:0}
#burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
#mobileMenu{
  position:absolute;top:100%;left:0;right:0;
  background:var(--paper);border-bottom:2px solid var(--ink);
  padding:18px 22px 22px;flex-direction:column;gap:16px;display:none;
}
#mobileMenu.open{display:flex}
#mobileMenu a{color:var(--ink);font-weight:600;font-size:1.05rem}
#mobileMenu .btn{justify-content:center}

/* ── hero ─────────────────────────────────────────────────────── */
#hero{padding-top:70px;padding-bottom:80px;min-height:calc(100svh - 70px);display:flex;flex-direction:column;justify-content:center}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-errtag{
  display:inline-block;font-size:.72rem;color:#fff;background:var(--violet);
  padding:6px 12px;margin-bottom:22px;box-shadow:3px 3px 0 var(--lime);
}
.hero-h1{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(3.2rem,9.2vw,7.2rem);
  line-height:.92;letter-spacing:-.015em;text-transform:uppercase;
}
.hero-h1 .line{display:block}
.glitch-word{position:relative;color:var(--violet)}
.glitch-word .gl{
  position:absolute;inset:0;pointer-events:none;font-style:normal;opacity:0;
}
.motion .glitch-word .gl-a{color:var(--cyan);animation:gl-a 3.4s steps(2) infinite}
.motion .glitch-word .gl-b{color:var(--lime);animation:gl-b 3.4s steps(2) infinite}
@keyframes gl-a{
  0%,88%,100%{opacity:0;transform:none;clip-path:none}
  90%{opacity:.85;transform:translate(-5px,2px);clip-path:inset(8% 0 55% 0)}
  93%{opacity:.85;transform:translate(4px,-2px);clip-path:inset(58% 0 10% 0)}
  96%{opacity:0}
}
@keyframes gl-b{
  0%,89%,100%{opacity:0;transform:none;clip-path:none}
  91%{opacity:.8;transform:translate(5px,3px);clip-path:inset(48% 0 22% 0)}
  94%{opacity:.8;transform:translate(-4px,-3px);clip-path:inset(12% 0 64% 0)}
  97%{opacity:0}
}
.hero-sub{margin-top:26px;font-size:1.14rem;color:var(--ink-2);max-width:46ch}
.hero-sub b{color:var(--violet)}

.ca-pill{
  margin-top:28px;display:inline-flex;align-items:center;gap:12px;
  background:var(--card);border:2px dashed var(--violet);border-radius:12px;
  padding:11px 16px;cursor:pointer;max-width:100%;
  transition:transform .15s ease,box-shadow .15s ease;
}
.ca-pill:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(108,36,232,.25)}
.ca-label{font-size:.7rem;background:var(--violet);color:#fff;padding:4px 8px;border-radius:6px}
.ca-pill code{font-family:var(--f-mono);font-size:.92rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-copy{color:var(--violet);font-size:1.1rem}

.hero-btns{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px}
.hero-meta{margin-top:26px;font-size:.7rem;color:var(--ink-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hero-meta img{display:inline-block;vertical-align:middle}
.hero-scrollcue{margin-top:54px;text-align:center;font-size:.68rem;color:var(--ink-2)}
.motion .hero-scrollcue{animation:cue-bob 2.2s ease-in-out infinite}
@keyframes cue-bob{50%{transform:translateY(6px)}}

/* hero art: torn frame */
.hero-art{position:relative}
.rip-frame{
  position:relative;
  filter:drop-shadow(0 26px 40px rgba(27,9,64,.30));
}
.rip-frame .hero-logo{
  clip-path:var(--rip);
  width:min(520px,100%);margin:0 auto;
}
.motion .rip-frame{animation:float-soft 7s ease-in-out infinite}
@keyframes float-soft{50%{transform:translateY(-12px) rotate(.6deg)}}
.rip-px{position:absolute;width:16px;height:16px;background:var(--violet)}
.rip-px.rp2{background:var(--lime);width:11px;height:11px}
.rip-px.rp3{background:var(--cyan);width:9px;height:9px}
.rip-px.rp4{background:var(--violet);width:8px;height:8px}
.rip-px.rp5{background:var(--lime);width:14px;height:14px}
.rip-px.rp6{background:var(--cyan);width:12px;height:12px}
.rp1{top:6%;right:4%}.rp2{top:18%;left:2%}.rp3{bottom:24%;right:0%}
.rp4{bottom:6%;left:12%}.rp5{top:44%;right:-2%}.rp6{bottom:38%;left:-3%}
.motion .rip-px{animation:px-drift 5.5s ease-in-out infinite}
.motion .rp2{animation-delay:.7s}.motion .rp3{animation-delay:1.3s}
.motion .rp4{animation-delay:2s}.motion .rp5{animation-delay:2.6s}.motion .rp6{animation-delay:3.4s}
@keyframes px-drift{50%{transform:translate(7px,-11px) rotate(45deg)}}

/* ── marquee ──────────────────────────────────────────────────── */
.marquee{
  background:var(--ink);color:var(--paper);overflow:hidden;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  padding:13px 0;position:relative;z-index:1;
}
.marquee-track{display:flex;white-space:nowrap;width:max-content}
.motion .marquee-track{animation:mq 26s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-chunk{font-family:var(--f-px);font-size:.86rem;letter-spacing:.1em}
.mq-chunk i{color:var(--lime);font-style:normal;margin:0 14px}
.mq-chunk i:nth-of-type(even){color:var(--cyan)}

/* ── section headers ──────────────────────────────────────────── */
.sec-head{text-align:center;margin-bottom:58px}
.sec-tag{
  display:inline-block;font-size:.68rem;color:var(--violet);
  border:1.5px solid var(--violet);padding:5px 12px;border-radius:99px;
  margin-bottom:18px;background:rgba(108,36,232,.06);
}
.sec-h2{
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2rem,5.4vw,3.6rem);letter-spacing:-.01em;line-height:1.02;
}
.sec-sub{margin-top:16px;color:var(--ink-2);max-width:56ch;margin-left:auto;margin-right:auto}
.sec-sub b{color:var(--violet)}

/* ── lore ─────────────────────────────────────────────────────── */
.cache-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cache-card{
  background:var(--card);border:2px solid var(--ink);border-radius:12px;
  overflow:hidden;box-shadow:var(--shadow-soft);
  transition:transform .2s ease,box-shadow .2s ease;
}
.cache-card:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:8px 10px 0 rgba(108,36,232,.16)}
.cache-bar{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.62rem;padding:8px 12px;border-bottom:2px solid var(--ink);
  background:var(--paper-2);color:var(--ink-2);
}
.cc-ok{color:var(--lime-deep)}.cc-warn{color:#8A5500}.cc-err{color:var(--violet)}
.cache-body{padding:18px 16px 20px;font-size:.94rem;color:var(--ink-2)}
.cache-body b,.cache-body em{color:var(--ink)}
.cache-card.c2 .cache-body{filter:none}
.cache-card.c3{transform:rotate(.5deg)}
.cache-card.torn{
  border-style:dashed;border-color:var(--violet);
  background:
    linear-gradient(140deg,transparent 0 78%, rgba(108,36,232,.14) 78.5% 82%, transparent 82.5%),
    repeating-linear-gradient(0deg, var(--card) 0 5px, rgba(108,36,232,.045) 5px 6px);
}
.cache-card.torn .cache-body b{color:var(--violet)}
.cache-card.torn:hover{transform:translateY(-6px) rotate(1deg)}

.lore-banner{margin-top:46px;position:relative}
.lore-banner img{clip-path:var(--rip);width:100%}
.lore-banner{filter:drop-shadow(0 22px 34px rgba(27,9,64,.24))}
.lore-banner figcaption{
  text-align:center;margin-top:16px;font-size:.66rem;color:var(--ink-2);
}
.lore-close{
  margin-top:44px;text-align:center;font-size:1.16rem;max-width:62ch;
  margin-left:auto;margin-right:auto;color:var(--ink-2);
}
.lore-close b{color:var(--ink)}

/* ── feed game ────────────────────────────────────────────────── */
#feed .sec-sub b{color:var(--violet)}
.feed-shell{display:grid;grid-template-columns:1.5fr .8fr;gap:26px;align-items:start}
.feed-window{
  background:var(--card);border:2px solid var(--ink);border-radius:14px;
  box-shadow:var(--shadow-hard);overflow:hidden;
}
.feed-bar{
  display:flex;align-items:center;gap:7px;background:var(--ink);
  padding:10px 14px;color:var(--paper);
}
.fb-dot{width:10px;height:10px;border-radius:50%}
.feed-bar .fb-dot:nth-child(1){background:var(--violet)}
.feed-bar .fb-dot:nth-child(2){background:var(--lime)}
.feed-bar .fb-dot:nth-child(3){background:var(--cyan)}
.fb-title{font-size:.66rem;margin-left:8px;color:var(--paper);opacity:.85}
.fb-live{margin-left:auto;font-size:.62rem;color:var(--lime)}
.feed-posts{
  padding:16px;display:flex;flex-direction:column;gap:14px;
  min-height:430px;max-height:520px;overflow:hidden;position:relative;
}
.post{
  position:relative;border:2px solid var(--line);border-radius:12px;background:var(--card);
  padding:13px 15px;cursor:grab;user-select:none;-webkit-user-select:none;
  touch-action:pan-y;transition:box-shadow .15s ease,border-color .15s ease;
  will-change:transform;
}
.post:hover{border-color:var(--ink);box-shadow:4px 4px 0 var(--paper-2)}
.post.grabbed{cursor:grabbing;border-color:var(--violet);box-shadow:5px 5px 0 rgba(108,36,232,.2);z-index:3}
.post.kori{border-color:var(--violet);background:linear-gradient(135deg,#fff 60%,rgba(168,225,12,.12))}
.post-head{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.post-ava{width:30px;height:30px;border-radius:50%;background:var(--paper-2);border:1.5px solid var(--ink);display:grid;place-items:center;font-size:15px}
.post.kori .post-ava{background:var(--violet);border-color:var(--violet)}
.post-name{font-weight:600;font-size:.86rem}
.post-handle{font-size:.6rem;color:var(--ink-2);font-family:var(--f-px)}
.post-badge{margin-left:auto;font-family:var(--f-px);font-size:.56rem;color:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.post.kori .post-badge{color:var(--violet);border-color:var(--violet)}
.post-text{font-size:.92rem;color:var(--ink-2)}
.post.kori .post-text{color:var(--ink)}
.post-half{
  position:absolute;inset:0;padding:13px 15px;background:inherit;border-radius:12px;
  border:2px solid var(--violet);overflow:hidden;pointer-events:none;background:var(--card);
}
.half-l{clip-path:polygon(0 0, 54% 0, 46% 12%, 55% 25%, 45% 38%, 54% 52%, 46% 65%, 55% 78%, 47% 90%, 52% 100%, 0 100%)}
.half-r{clip-path:polygon(54% 0, 100% 0, 100% 100%, 52% 100%, 47% 90%, 55% 78%, 46% 65%, 54% 52%, 45% 38%, 55% 25%, 46% 12%)}
.motion .post.torn .half-l{animation:tear-l .6s ease-in forwards}
.motion .post.torn .half-r{animation:tear-r .6s ease-in forwards}
@keyframes tear-l{
  20%{transform:translate(-14px,0) rotate(-3deg)}
  100%{transform:translate(-90px,130px) rotate(-24deg);opacity:0}
}
@keyframes tear-r{
  20%{transform:translate(14px,2px) rotate(3deg)}
  100%{transform:translate(96px,140px) rotate(22deg);opacity:0}
}
.post.torn > .post-head,.post.torn > .post-text{visibility:hidden}
.post.collapse{transition:margin-bottom .3s ease,max-height .3s ease,opacity .3s ease;overflow:hidden}

.feed-side{display:flex;flex-direction:column;gap:18px}
.feed-counter{
  background:var(--ink);color:var(--paper);border-radius:14px;
  padding:26px 20px;text-align:center;border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--lime);
}
.fc-num{font-size:3rem;color:var(--lime);line-height:1}
.fc-label{margin-top:8px;font-size:.85rem;opacity:.8}
.feed-hint{
  background:var(--card);border:2px dashed var(--line);border-radius:12px;
  padding:16px;text-align:center;font-size:.88rem;color:var(--ink-2);line-height:1.9;
}
.feed-hint b{color:var(--violet)}
#feedReset{justify-content:center}

/* ── tokenomics: crash desk ───────────────────────────────────── */
.crash-desk{
  position:relative;height:480px;max-width:980px;margin:0 auto;
  border:2px dashed var(--line);border-radius:16px;
  background:
    repeating-linear-gradient(0deg,transparent 0 39px, rgba(16,11,28,.035) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px, rgba(16,11,28,.035) 39px 40px);
}
.err-win{
  position:absolute;left:var(--x);top:var(--y);width:min(400px,84%);
  background:var(--card);border:2px solid var(--ink);border-radius:10px;
  box-shadow:7px 7px 0 var(--violet);transform:rotate(var(--r));
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;
  transition:box-shadow .15s ease;
}
.err-win:nth-child(2){box-shadow:7px 7px 0 var(--lime)}
.err-win:nth-child(3){box-shadow:7px 7px 0 var(--cyan)}
.err-win:nth-child(4){box-shadow:7px 7px 0 var(--violet-deep)}
.err-win.drag{cursor:grabbing;box-shadow:12px 14px 0 rgba(16,11,28,.18);z-index:5}
.ew-bar{
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(90deg,var(--violet),var(--violet-deep));color:#fff;
  padding:8px 12px;border-bottom:2px solid var(--ink);border-radius:8px 8px 0 0;
}
.ew-title{font-size:.62rem}
.ew-x{font-size:.75rem;border:1.5px solid rgba(255,255,255,.7);border-radius:4px;padding:0 5px;line-height:1.4}
.ew-body{display:flex;gap:16px;align-items:center;padding:18px 18px 20px}
.ew-icon{
  font-size:1.6rem;width:52px;height:52px;flex:none;display:grid;place-items:center;
  background:var(--paper-2);border:2px solid var(--ink);border-radius:10px;
}
.ew-num{font-size:1.5rem;line-height:1.15;color:var(--ink)}
.ew-num i{font-style:normal;color:var(--violet)}
.ew-cap{margin-top:6px;font-size:.84rem;color:var(--ink-2)}

/* telemetry */
.telemetry{max-width:980px;margin:34px auto 0;background:var(--ink);border-radius:14px;padding:20px 22px;color:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--cyan)}
.tel-head{display:flex;align-items:center;gap:10px;font-size:.7rem;letter-spacing:.12em;color:var(--lime)}
.tel-head #telState{margin-left:auto;color:var(--paper);opacity:.7}
.tel-dot{width:9px;height:9px;border-radius:50%;background:var(--lime)}
.motion .tel-dot{animation:blink 1.6s steps(1) infinite}
.tel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.tel-tile{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.tt-label{font-size:.56rem;color:var(--cyan)}
.tt-val{font-size:1.05rem;color:#fff}

/* ── how to buy ───────────────────────────────────────────────── */
.how-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
.how-step{
  background:var(--card);border:2px solid var(--ink);border-radius:14px;
  padding:24px 20px 26px;position:relative;box-shadow:var(--shadow-soft);
  transition:transform .2s ease,box-shadow .2s ease;
}
.how-step:hover{transform:translateY(-6px);box-shadow:7px 9px 0 rgba(168,225,12,.35)}
.how-step:nth-child(even):hover{box-shadow:7px 9px 0 rgba(41,214,232,.35)}
.hs-num{
  position:absolute;top:-13px;left:16px;background:var(--ink);color:var(--lime);
  font-size:.62rem;padding:5px 10px;border-radius:7px;
}
.how-step img{margin-bottom:14px}
.how-step h3{font-family:var(--f-display);font-weight:700;font-size:1.12rem;margin-bottom:8px}
.how-step p{font-size:.9rem;color:var(--ink-2)}

/* ── roadmap ──────────────────────────────────────────────────── */
.status-rail{
  height:6px;background:var(--paper-2);border:1.5px solid var(--line);
  border-radius:99px;max-width:900px;margin:0 auto 34px;overflow:hidden;
}
.status-rail i{
  display:block;height:100%;width:0;border-radius:99px;
  background:repeating-linear-gradient(90deg,var(--violet) 0 18px,var(--lime) 18px 26px);
  transition:width 1.1s cubic-bezier(.6,.05,.25,1);
}
.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.status-card{
  background:var(--card);border:2px solid var(--line);border-radius:14px;
  padding:24px 20px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.status-card:hover{transform:translateY(-6px);border-color:var(--ink);box-shadow:var(--shadow-soft)}
.status-card.now{border-color:var(--violet);box-shadow:6px 6px 0 rgba(108,36,232,.2)}
.sc-code{
  font-size:1.9rem;color:#867F9C;line-height:1;
}
.status-card.now .sc-code{color:var(--violet)}
.status-card h3{font-family:var(--f-display);font-weight:700;font-size:1.06rem;margin:12px 0 8px}
.status-card p{font-size:.88rem;color:var(--ink-2)}
.sc-state{margin-top:14px;font-size:.6rem;color:var(--ink-2)}
.status-card.now .sc-state{color:var(--lime-deep)}

/* ── community CTA ────────────────────────────────────────────── */
#community{padding-bottom:130px}
.cta-tear{
  background:var(--violet-night);color:var(--paper);
  clip-path:var(--rip);padding:88px clamp(24px,7vw,90px);text-align:center;
  position:relative;overflow:hidden;
}
.cta-tear::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(circle at 18% 22%, rgba(108,36,232,.55), transparent 42%),
    radial-gradient(circle at 84% 74%, rgba(41,214,232,.3), transparent 38%),
    radial-gradient(circle at 66% 12%, rgba(168,225,12,.24), transparent 30%);
}
.cta-tear>*{position:relative}
.cta-h2{
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.2rem,6vw,4.2rem);letter-spacing:-.01em;color:#fff;
}
.cta-sub{margin:18px auto 30px;max-width:52ch;color:rgba(243,242,247,.82)}
.cta-tear .hero-btns{justify-content:center}
.cta-tear .btn-line{background:transparent;color:var(--paper);border-color:var(--paper);box-shadow:4px 4px 0 rgba(255,255,255,.25)}
.cta-tear .btn-line img{filter:invert(1)}
.cta-tear .btn-line:hover{box-shadow:6px 6px 0 var(--cyan)}

/* ── footer ───────────────────────────────────────────────────── */
#footer{background:var(--ink);color:var(--paper);padding:64px 24px 40px;border-top:3px solid var(--violet)}
.foot-search{max-width:520px;margin:0 auto 54px;text-align:center}
.foot-search label{font-size:.64rem;color:var(--lime);display:block;margin-bottom:12px;letter-spacing:.14em}
.fs-row{display:flex;gap:10px}
#searchBox{
  flex:1;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.25);
  border-radius:9px;color:#fff;font-family:var(--f-mono);font-size:1rem;padding:11px 14px;
}
#searchBox:focus{outline:none;border-color:var(--lime)}
#searchBox::placeholder{color:rgba(255,255,255,.4)}
.fs-result{margin-top:14px;min-height:1.4em;font-size:.68rem;color:var(--cyan)}
.foot-grid{
  max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:28px;
  padding-top:34px;border-top:1px solid rgba(255,255,255,.14);
}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand img{border-radius:10px;border:2px solid var(--violet)}
.foot-brand .sk{font-size:.6rem;color:rgba(255,255,255,.5)}
.foot-links{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{color:var(--paper);opacity:.75;font-size:.9rem}
.foot-links a:hover{opacity:1;color:var(--lime);text-decoration:none}
.foot-disclaimer{
  max-width:860px;margin:30px auto 0;font-size:.76rem;color:rgba(255,255,255,.45);
  text-align:center;line-height:1.7;
}
.foot-fine{margin-top:22px;text-align:center;font-size:.58rem;color:rgba(255,255,255,.55)}

/* ── crash overlay (typed "404" egg) ──────────────────────────── */
#crashOverlay{
  position:fixed;inset:0;z-index:210;background:var(--paper);
  display:grid;place-items:center;text-align:center;
}
#crashOverlay.on{display:grid}
.co-code{font-size:1rem;color:var(--violet);letter-spacing:.3em}
.co-msg{
  font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,9vw,6rem);
  text-transform:uppercase;margin:14px 0 10px;
  animation:err-jitter .14s steps(2) 8;
}
.co-sub{font-size:.66rem;color:var(--ink-2)}

/* ── toast ────────────────────────────────────────────────────── */
#toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);
  background:var(--ink);color:var(--lime);font-family:var(--f-px);font-size:.74rem;
  padding:12px 20px;border-radius:10px;border:2px solid var(--lime);
  z-index:150;transition:transform .3s cubic-bezier(.2,.9,.3,1.2);pointer-events:none;
  max-width:88vw;text-align:center;
}
#toast.show{transform:translate(-50%,0)}

/* ── scroll reveal ────────────────────────────────────────────── */
.motion [data-reveal]{opacity:0;transform:translateY(26px)}
.motion [data-reveal].in{
  opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);
}
.motion [data-reveal].in.glitched{animation:reveal-glitch .32s steps(4) 1}
@keyframes reveal-glitch{
  25%{clip-path:inset(6% 0 64% 0);transform:translate(-5px,0)}
  50%{clip-path:inset(48% 0 18% 0);transform:translate(5px,0)}
  75%{clip-path:inset(78% 0 2% 0);transform:translate(-3px,0)}
  100%{clip-path:none;transform:none}
}

/* ── shot mode (headless QA captures) ─────────────────────────── */
body.shot #preloader{display:none}
body.shot #hero{min-height:0}
body.shot [data-reveal]{opacity:1 !important;transform:none !important}
body.shot #pixelField{display:none}

/* ── responsive ───────────────────────────────────────────────── */
@media (max-width:1020px){
  .hero-inner{gap:34px}
  .cache-grid,.how-steps,.status-grid{grid-template-columns:repeat(2,1fr)}
  .feed-shell{grid-template-columns:1fr;}
  .feed-side{flex-direction:row;flex-wrap:wrap}
  .feed-side>*{flex:1 1 200px}
  .nav-links,.nav-cta{display:none}
  #burger{display:flex}
  .crash-desk{height:auto;border:none;background:none;display:grid;gap:18px}
  .err-win{position:static;width:100%;transform:rotate(var(--r));cursor:default;touch-action:auto}
}
@media (max-width:840px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-copy{display:flex;flex-direction:column;align-items:center}
  .hero-sub{max-width:56ch}
  .hero-art{order:-1;margin-top:10px}
  .rip-frame .hero-logo{width:min(340px,82vw)}
  section{padding:84px 18px}
  .telemetry .tel-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .cache-grid,.how-steps,.status-grid{grid-template-columns:1fr}
  .hero-btns{flex-direction:column;width:100%}
  .hero-btns .btn{justify-content:center;width:100%}
  .ca-pill{width:100%}
  .ca-pill code{font-size:.8rem}
  .fs-row{flex-direction:column}
  .feed-side{flex-direction:column}
  .feed-side>*{flex:0 0 auto}
  .feed-posts{max-height:none}
  .foot-grid{flex-direction:column;text-align:center}
  .foot-links{margin-left:0;justify-content:center}
}

/* ── reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body:not(.motion) *,body:not(.motion) *::before,body:not(.motion) *::after{
    animation:none !important;transition:none !important;
  }
}