/* DRTY REX — drtyrex.com
   HORRORCORE x CYBERPUNK: a pirate signal from the back of the classroom in 2087.
   Haunted frequency. Blood red, chrome decay, terminal text, scanlines.
   No frameworks. transform/opacity only. Mobile-first. */

:root{
  --bg:#070708;
  --bg2:#0e0d0f;
  --bg3:#161418;
  --line:#262227;
  --bone:#e8e0d0;
  --cream:#f4edde;
  --red:#c81e2b;
  --red-deep:#7a0e16;
  --blood:#a31621;
  --amber:#d8a24a;
  --gray:#8f887a;
  --dim:#5c564c;
  --nav-h:64px;
  --max:1160px;
  --ease:cubic-bezier(.16,1,.3,1);
}

@font-face{font-family:'Anton';src:url('../fonts/anton.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Archivo Black';src:url('../fonts/archivo-black.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Pirata One';src:url('../fonts/pirata-one.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Nosifer';src:url('../fonts/nosifer.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Rubik Glitch';src:url('../fonts/rubik-glitch.ttf') format('truetype');font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--bone);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--bone)}
::selection{background:var(--red);color:var(--cream)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}

/* ============ broadcast overlays ============ */

/* scanlines — the haunted frequency sits under everything.
   (no mix-blend-mode: full-viewport blending crashes some renderers;
   plain alpha on black lines reads identically) */
.scanlines{
  position:fixed;inset:0;z-index:290;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.20) 0 1px,transparent 1px 3px);
  opacity:.55;
}
/* film grain — static texture, no motion */
.grain{
  position:fixed;inset:-40px;z-index:291;pointer-events:none;opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
/* vignette — surveillance darkness at the edges */
.vignette{
  position:fixed;inset:0;z-index:289;pointer-events:none;
  background:radial-gradient(ellipse 120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.5) 100%);
}

/* ============ motion system ============ */
.reveal{
  opacity:0;transform:translateY(38px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-46px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
.reveal-l.in{opacity:1;transform:none}
.reveal-r{opacity:0;transform:translateX(46px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
.reveal-r.in{opacity:1;transform:none}
.reveal-s{opacity:0;transform:scale(.94);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0ms)}
.reveal-s.in{opacity:1;transform:none}

/* glitch headline — RGB signal decay on hover */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;inset:0;opacity:0;pointer-events:none;
  white-space:nowrap;
}
.glitch::before{color:var(--red);z-index:-1}
.glitch::after{color:#7dd7d7;z-index:-2}
a:hover .glitch::before,.glitch:hover::before,
a:hover .glitch::after,.glitch:hover::after{opacity:.85;animation:glitchShift .32s steps(2) infinite}
@keyframes glitchShift{
  0%{transform:translate(-3px,-2px);clip-path:inset(12% 0 60% 0)}
  50%{transform:translate(3px,1px);clip-path:inset(58% 0 8% 0)}
  100%{transform:translate(-2px,2px);clip-path:inset(28% 0 38% 0)}
}

/* ============ type ============ */
.eyebrow{
  font-family:'Archivo Black',sans-serif;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--red);margin-bottom:16px;
}
.eyebrow.drip{font-family:'Nosifer',serif;font-size:13px;letter-spacing:.12em;color:var(--red);text-transform:lowercase}
h1,h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;line-height:1}
h1 .r,h2 .r{color:var(--red)}
.display-glitch{font-family:'Rubik Glitch',serif;font-weight:400}

/* ============ nav ============ */
.nav{
  position:sticky;top:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;background:rgba(7,7,8,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--red) 30%,var(--red) 70%,transparent);
  opacity:.5;
}
.nav-brand{display:flex;align-items:center;text-decoration:none}
.nav-links{display:flex;gap:24px;list-style:none;align-items:center}
.nav-links a{
  text-decoration:none;font-family:'Archivo Black',sans-serif;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone);opacity:.8;
  transition:opacity .2s,color .2s;
}
.nav-links a:hover{opacity:1;color:var(--red)}
.nav-links a.hot{color:var(--red)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--bone);margin:6px 0;transition:transform .25s var(--ease),opacity .2s}

/* ============ fresh bar ============ */
.freshbar{
  position:sticky;top:var(--nav-h);z-index:99;
  display:flex;align-items:center;gap:12px;
  padding:9px 20px;background:#120608;border-bottom:1px solid var(--red-deep);
  font-size:13px;text-decoration:none;
  transform:translateY(-110%);transition:transform .35s var(--ease);
}
.freshbar.show{transform:translateY(0)}
.freshbar .tag{
  font-family:'Archivo Black',sans-serif;font-size:10px;letter-spacing:.16em;
  background:var(--red);color:var(--cream);padding:4px 8px;flex:none;
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
.freshbar .txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.92}
.freshbar .go{margin-left:auto;flex:none;color:var(--red);font-weight:700}

/* ============ hero: enter the hallway ============ */
.hero{
  position:relative;min-height:96svh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;background:#050506;
}
.hero-bg{
  position:absolute;inset:-6%;z-index:0;
  background:url('../assets/scenes/hallway.webp') center/cover no-repeat,
             url('../assets/hero-banner.webp') center/cover no-repeat;
  will-change:transform;
  animation:hallFlicker 18s infinite;
}
/* dying fluorescent — mostly holds steady, one uneasy dip in a while */
@keyframes hallFlicker{
  0%,100%{filter:brightness(1)}
  3%{filter:brightness(1)}3.4%{filter:brightness(.62)}3.9%{filter:brightness(1)}
  61%{filter:brightness(1)}61.3%{filter:brightness(.74)}61.7%{filter:brightness(1)}
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 90% 65% at 50% 45%,rgba(200,30,43,.22),transparent 62%),
    linear-gradient(180deg,rgba(5,5,6,.78) 0%,rgba(5,5,6,.5) 45%,rgba(7,7,8,.96) 100%);
}
.hero-inner{position:relative;z-index:2;padding:100px 20px 80px;max-width:900px;width:100%}
.boot{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;letter-spacing:.08em;color:var(--amber);opacity:.9;
  min-height:3.2em;margin-bottom:22px;text-align:center;white-space:pre-wrap;
}
.boot .cursor{display:inline-block;width:8px;height:15px;background:var(--amber);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* ============ DRTY REX custom wordmark — inline SVG lockup ============
   DRTY: bone-white Anton, heavy grime. REX: blood-red chrome Anton,
   two thin scar slashes cut through R and E. The most designed
   element on the page. Built by JS into [data-wordmark] mounts. */
.wmount{display:inline-flex;align-items:center}
.wmount svg{display:block;overflow:visible;height:40px;width:auto}
.wm-t{font-family:'Anton',sans-serif}
.nav-brand .wmount svg{height:34px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.7))}
.foot-brand .wmount svg{height:44px;width:auto;margin-bottom:14px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.7))}
.hero-wordmark{width:min(620px,90vw);margin:0 auto 10px;animation:wordIn 1.2s var(--ease) both .7s}
.hero-wordmark svg{width:100%;height:auto;filter:drop-shadow(0 12px 34px rgba(0,0,0,.85))}
@keyframes wordIn{from{opacity:0;transform:scale(1.06);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
/* dying-neon flicker — rare, once in a while, for unease (hero only) */
.wm-flick{animation:wmFlicker 13s linear infinite}
@keyframes wmFlicker{
  0%,100%{opacity:1}
  2.5%{opacity:1}2.9%{opacity:.5}3.3%{opacity:1}
  58%{opacity:1}58.3%{opacity:.65}58.7%{opacity:1}
}
/* sheen sweep — rare pass of light across the letters, then long stillness */
.wm-sheen{animation:wmSheen 13s ease-in-out infinite}
@keyframes wmSheen{0%{transform:translateX(0)}7%{transform:translateX(940px)}100%{transform:translateX(940px)}}
.hero-lyric{
  font-family:'Pirata One',serif;font-size:clamp(1.3rem,3.6vw,2rem);
  color:var(--bone);opacity:.95;margin:18px auto 4px;max-width:30em;min-height:2.6em;
}
.hero-lyric .attr{
  display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  letter-spacing:.2em;color:var(--dim);margin-top:10px;text-transform:uppercase;
}
.hero-sub{font-size:clamp(.95rem,2.4vw,1.15rem);color:var(--bone);opacity:.85;max-width:34em;margin:14px auto 0}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.hero-smile{font-family:'Pirata One',serif;font-size:clamp(1.5rem,4vw,2.1rem);color:var(--red);margin-top:16px;text-shadow:0 0 24px rgba(200,30,43,.5)}
.scroll-hint{margin-top:46px;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--dim);animation:hintFloat 4s ease-in-out infinite}
@keyframes hintFloat{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(8px);opacity:1}}

/* ============ signal-break divider: channel-surfing a cursed broadcast ============ */
.sigbreak{
  position:relative;height:74px;background:#040405;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.sigbreak::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23s)' opacity='.55'/%3E%3C/svg%3E");
}
.sigbreak::after{
  content:"";position:absolute;left:0;right:0;top:46%;height:2px;
  background:var(--red);opacity:.55;box-shadow:0 0 18px var(--red);
  animation:tearSlide 9s var(--ease) infinite;
}
@keyframes tearSlide{0%,100%{transform:translateX(-8%) scaleX(.7);opacity:.4}50%{transform:translateX(8%) scaleX(1);opacity:.6}}
.sigbreak span{
  position:relative;z-index:1;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.4em;color:var(--bone);opacity:.85;text-transform:uppercase;
  background:#040405;padding:6px 18px;border:1px solid var(--line);
}

/* ============ tickers ============ */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0a090b;overflow:hidden;white-space:nowrap;padding:13px 0;position:relative}
.ticker-track{display:inline-block;animation:tick 55s linear infinite;will-change:transform}
.ticker span{font-family:'Anton',sans-serif;font-size:19px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);opacity:.88;padding:0 20px}
.ticker span.r{color:var(--red)}
.ticker span.amb{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--amber);letter-spacing:.24em;opacity:.8}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ sections ============ */
.section{padding:88px 20px;max-width:var(--max);margin:0 auto;position:relative}
.section.tight{padding:64px 20px}
.sec-head{margin-bottom:42px;max-width:720px}
.sec-head h2{font-size:clamp(2.2rem,6vw,4rem)}
.sec-head h2 .r{color:var(--red)}
.sec-head p{color:var(--gray);margin-top:12px;font-size:1.02rem;max-width:44em}
.rule{height:3px;width:70px;background:linear-gradient(90deg,var(--red),transparent);margin:20px 0 0;transform:skewX(-24deg)}

/* ============ intercepted transmission: lyric moments ============ */
.intercept{
  position:relative;overflow:hidden;
  border-top:1px solid var(--red-deep);border-bottom:1px solid var(--red-deep);
  background:#08070a;
}
.intercept .tx-bg{
  position:absolute;inset:-8%;
  background-size:cover;background-position:center;
  filter:saturate(.85) brightness(.8);
  will-change:transform;
}
.intercept::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,7,8,.9),rgba(7,7,8,.55) 50%,rgba(7,7,8,.92));
}
.intercept::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 4px);
  opacity:.5;
}
.tx-inner{position:relative;z-index:2;max-width:900px;margin:0 auto;padding:96px 22px;text-align:center}
.tx-head{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.3em;
  color:var(--amber);text-transform:uppercase;margin-bottom:26px;
  display:inline-block;border:1px solid rgba(216,162,74,.4);padding:8px 16px;background:rgba(0,0,0,.5);
}
/* slow surveillance pulse — a live feed breathes, it doesn't strobe */
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.3}}
.tx-head i{font-style:normal;color:var(--red);animation:recPulse 3s ease-in-out infinite}
.intercept blockquote{
  font-family:'Pirata One',serif;font-size:clamp(1.7rem,5vw,3.1rem);
  line-height:1.25;color:var(--cream);text-wrap:balance;
  text-shadow:0 4px 30px rgba(0,0,0,.9),0 0 44px rgba(200,30,43,.25);
}
.intercept .tx-attr{
  margin-top:22px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12px;letter-spacing:.28em;color:var(--gray);text-transform:uppercase;
}

/* ============ fresh feed: detention slips ============ */
.fresh-list{display:grid;gap:20px}
.slip{
  position:relative;display:grid;grid-template-columns:92px 1fr;gap:18px;align-items:start;
  background:linear-gradient(160deg,#efe6d2,#ddcfb4);
  color:#191410;text-decoration:none;
  padding:22px 24px 20px;
  transform:rotate(-.7deg);
  clip-path:polygon(0 3%,4% 0,97% 1%,100% 6%,99% 94%,95% 100%,3% 99%,0 93%);
  box-shadow:0 14px 34px rgba(0,0,0,.55);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.slip:nth-child(even){transform:rotate(.9deg)}
.slip::before,.slip::after{ /* tape */
  content:"";position:absolute;top:-12px;width:92px;height:26px;
  background:rgba(200,30,43,.28);border-left:1px dashed rgba(0,0,0,.2);border-right:1px dashed rgba(0,0,0,.2);
  backdrop-filter:blur(1px);
}
.slip::before{left:8%;transform:rotate(-6deg)}
.slip::after{right:8%;transform:rotate(5deg)}
a.slip:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 20px 44px rgba(200,30,43,.22)}
.slip .fresh-date{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:#6b5f4c;letter-spacing:.06em;padding-top:5px}
.slip .fresh-tag{
  display:inline-block;font-family:'Archivo Black',sans-serif;font-size:10px;letter-spacing:.18em;
  color:#8f0f1a;border:2px solid #8f0f1a;padding:3px 9px;margin-bottom:9px;
  transform:rotate(-1.5deg);text-transform:uppercase;
}
.slip h3{font-family:'Anton',sans-serif;font-weight:400;font-size:1.4rem;text-transform:uppercase;letter-spacing:.02em;color:#14100b}
.slip p{color:#3d332a;font-size:.94rem;margin-top:5px}
.slip .stamp-mini{
  position:absolute;right:14px;bottom:10px;font-family:'Archivo Black',sans-serif;
  font-size:9px;letter-spacing:.24em;color:rgba(143,15,26,.55);text-transform:uppercase;
  transform:rotate(-8deg);border:1px solid rgba(143,15,26,.5);padding:3px 7px;
}

/* ============ promo band ============ */
.promo{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#4a060c,#1c0306 70%);
  border-top:1px solid var(--red);border-bottom:1px solid var(--red);
}
.promo::before{
  content:"";position:absolute;inset:0;opacity:.35;
  background:radial-gradient(ellipse 60% 120% at 85% 20%,rgba(200,30,43,.5),transparent 65%);
}
.promo-inner{
  position:relative;max-width:var(--max);margin:0 auto;padding:64px 22px;
  display:grid;gap:28px;grid-template-columns:1fr auto;align-items:center;
}
.promo-code{
  font-family:'Rubik Glitch',serif;font-size:clamp(2.6rem,8vw,5rem);
  color:var(--cream);line-height:1;letter-spacing:.02em;
  text-shadow:0 0 34px rgba(200,30,43,.55);
}
.promo-detail{font-size:1.05rem;color:var(--bone);opacity:.92;max-width:36em;margin-top:8px}
.countdown{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.cd{
  background:rgba(0,0,0,.5);border:1px solid rgba(232,224,208,.2);
  min-width:76px;padding:10px 8px;text-align:center;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
}
.cd b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:1.9rem;color:var(--cream)}
.cd i{font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--bone);opacity:.7;font-family:ui-monospace,Menlo,monospace}
.promo-dead{font-family:'Anton',sans-serif;font-size:1.6rem;color:var(--cream);text-transform:uppercase}

/* ============ artifact cards ============ */
.cards{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.card{
  position:relative;background:linear-gradient(165deg,var(--bg3),#0c0b0d);
  border:1px solid var(--line);padding:28px 26px;text-decoration:none;
  display:flex;flex-direction:column;gap:10px;overflow:hidden;
  clip-path:polygon(0 0,100% 2%,98% 100%,1% 98%);
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s var(--ease);
}
.card::before{ /* spray edge */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(ellipse 80% 40% at 50% -10%,rgba(200,30,43,.16),transparent 60%);
}
a.card:hover{transform:translateY(-5px) rotate(-.4deg);border-color:var(--red);box-shadow:0 18px 44px rgba(200,30,43,.18)}
.card .k{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.26em;color:var(--amber);text-transform:uppercase}
.card h3{font-family:'Anton',sans-serif;font-weight:400;font-size:1.55rem;text-transform:uppercase}
.card p{color:var(--bone);opacity:.8;font-size:.94rem;flex:1}
.card .cta{font-family:'Archivo Black',sans-serif;font-size:12px;letter-spacing:.14em;color:var(--red);text-transform:uppercase}
.card img.mark{width:74px;height:74px;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))}

/* ============ buttons ============ */
.btn{
  display:inline-block;font-family:'Archivo Black',sans-serif;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  padding:15px 32px;border:1px solid var(--bone);color:var(--bone);background:rgba(0,0,0,.35);
  cursor:pointer;position:relative;overflow:hidden;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  transition:transform .2s var(--ease),border-color .2s,color .2s;
}
.btn:hover{transform:translateY(-2px);border-color:var(--red);color:var(--cream)}
.btn-red{background:var(--red);border-color:var(--red);color:var(--cream)}
.btn-red:hover{background:#e02432;border-color:#e02432;box-shadow:0 8px 30px rgba(200,30,43,.4)}
.btn-ghost{opacity:.85}

/* ============ embeds / tracks ============ */
.embed{overflow:hidden;border:1px solid var(--line);background:#000;position:relative;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.embed iframe{display:block;width:100%;border:0}
.embed-note{font-size:.85rem;color:var(--gray);margin-top:10px}
.track-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:28px}
.track{
  background:linear-gradient(170deg,#121013,#0a090b);border:1px solid var(--line);
  padding:20px;position:relative;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  transition:transform .35s var(--ease),border-color .3s;
}
.track:hover{transform:translateY(-4px);border-color:var(--red-deep)}
.track::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--red),transparent);opacity:0;transition:opacity .3s;
}
.track:hover::before{opacity:1}
.track h3{font-family:'Anton',sans-serif;font-weight:400;font-size:1.3rem;text-transform:uppercase;margin-bottom:4px}
.track p{font-size:.88rem;color:var(--gray);margin-bottom:12px}
.track .wave{height:26px;margin-bottom:12px;opacity:.8}

/* ============ pillars / about ============ */
.pillars{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:32px}
.pillar{
  background:linear-gradient(165deg,var(--bg3),#0b0a0c);border:1px solid var(--line);
  padding:22px;position:relative;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
  transition:transform .35s var(--ease),border-color .3s;
}
.pillar:hover{transform:translateY(-4px) rotate(.4deg);border-color:var(--red-deep)}
.pillar b{font-family:'Archivo Black',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:8px}
.pillar p{font-size:.93rem;opacity:.85}
.prose p{margin-bottom:1.15em;max-width:46em}
.prose p.lead{font-size:1.18rem;color:var(--cream)}
.stamp{
  display:inline-block;border:2px solid var(--red);color:var(--red);
  font-family:'Archivo Black',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  padding:10px 18px;transform:rotate(-2deg);margin:26px 0;
  clip-path:polygon(3% 0,100% 4%,97% 100%,0 96%);
}

/* ============ radar ============ */
.radar{
  position:relative;overflow:hidden;
  border:1px solid var(--line);padding:clamp(30px,5vw,58px);display:grid;gap:22px;
  background:linear-gradient(170deg,#141114,#0a090b);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
}
.radar::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(ellipse 70% 90% at 50% 0%,rgba(200,30,43,.16),transparent 70%);
}
.radar h2{font-size:clamp(2rem,5vw,3.2rem)}
.radar-btns{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}

/* ============ footer ============ */
footer{border-top:1px solid var(--line);background:#060607;margin-top:0;position:relative}
footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--red-deep),transparent)}
.foot-inner{max-width:var(--max);margin:0 auto;padding:58px 20px 34px;display:grid;gap:30px}
.foot-brand p{font-size:.9rem;color:var(--gray);max-width:34em}
.socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.socials a{
  font-family:'Archivo Black',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--line);padding:10px 16px;color:var(--bone);
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  transition:border-color .2s,color .2s;
}
.socials a:hover{border-color:var(--red);color:var(--red)}
.foot-nav{display:flex;gap:20px;flex-wrap:wrap;list-style:none}
.foot-nav a{color:var(--gray);text-decoration:none;font-size:.9rem}
.foot-nav a:hover{color:var(--bone)}
.legal{font-size:.8rem;color:#4d4d4d;border-top:1px solid #1c1c1c;padding-top:20px;font-family:ui-monospace,Menlo,monospace;letter-spacing:.04em}
.legal .vtag{color:var(--red)}

/* ============ subpage hero: surveillance drop-in ============ */
.page-hero{position:relative;overflow:hidden;padding:110px 20px 46px;background:#060607}
.page-hero .ph-bg{
  position:absolute;inset:-8%;background-size:cover;background-position:center;
  filter:saturate(.8) brightness(.62);will-change:transform;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,6,7,.82),rgba(6,6,7,.45) 55%,var(--bg) 100%);
}
.page-hero::after{ /* surveillance frame line */
  content:"";position:absolute;inset:14px;border:1px solid rgba(232,224,208,.14);pointer-events:none;
}
.ph-inner{position:relative;z-index:1;max-width:var(--max);margin:0 auto}
.ph-cam{
  display:flex;justify-content:space-between;align-items:center;
  font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.26em;
  color:var(--amber);text-transform:uppercase;margin-bottom:20px;opacity:.9;
}
.ph-cam .rec{color:var(--red);animation:recPulse 3.2s ease-in-out infinite}
.page-hero h1{font-size:clamp(2.8rem,9vw,5.6rem);text-shadow:0 6px 40px rgba(0,0,0,.8)}
.page-hero p{color:var(--gray);margin-top:14px;max-width:42em;font-size:1.05rem}

/* ============ content + commerce rail ============ */
.with-rail{
  max-width:var(--max);margin:0 auto;padding:6px 20px 90px;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start;
  position:relative;z-index:2;
}
.rail{display:grid;gap:18px;position:sticky;top:calc(var(--nav-h) + 58px);align-content:start}
.rail-mod{
  background:linear-gradient(165deg,var(--bg3),#0b0a0c);border:1px solid var(--line);
  padding:24px 22px;text-decoration:none;display:block;color:var(--bone);position:relative;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  transition:border-color .25s,transform .3s var(--ease);
}
a.rail-mod:hover{border-color:var(--red);transform:translateY(-3px)}
.rail-mod .k{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.26em;color:var(--amber);text-transform:uppercase}
.rail-mod h3{font-family:'Anton',sans-serif;font-weight:400;font-size:1.45rem;text-transform:uppercase;margin:10px 0 6px}
.rail-mod p{font-size:.9rem;opacity:.8;margin-bottom:4px}
.rail-mod .cta{font-family:'Archivo Black',sans-serif;font-size:12px;letter-spacing:.14em;color:var(--red);text-transform:uppercase}
.rail-sale{background:linear-gradient(135deg,#4a060c,#1c0306);border-color:var(--red-deep)}
.rail-sale .k{color:var(--cream)}
.rail-sale .btn{margin-top:14px;padding:12px 20px;font-size:12px}
.pick{display:block;text-decoration:none;padding:12px 0;border-top:1px solid var(--line)}
.pick:first-of-type{border-top:0;padding-top:12px}
.pick b{display:block;font-size:.98rem;color:var(--bone)}
.pick span{display:block;font-size:.84rem;color:var(--gray)}
.pick i{font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--red);text-transform:uppercase;font-family:'Archivo Black',sans-serif}

/* ============ gallery: surveillance wall ============ */
.galgrid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.gal{
  position:relative;background:#0a090b;border:1px solid var(--line);overflow:hidden;
  transition:transform .4s var(--ease),border-color .3s;
}
.gal:nth-child(odd){transform:rotate(-.6deg)}
.gal:nth-child(even){transform:rotate(.6deg)}
.gal:hover{transform:rotate(0) scale(1.015);border-color:var(--red-deep);z-index:2}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--ease);filter:saturate(.85)}
.gal:hover img{transform:scale(1.05)}
.gal .cam-tag{
  position:absolute;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;
  font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.2em;
  color:var(--cream);text-transform:uppercase;opacity:.85;text-shadow:0 1px 6px #000;
}
.gal .cam-tag .rec{color:var(--red)}
.gal figcaption{padding:12px 16px;font-size:.88rem;color:var(--gray);font-style:italic;border-top:1px solid var(--line)}
.galsec{margin-bottom:70px}
.gal-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.gal-strip a{display:block;overflow:hidden;border:1px solid var(--line);position:relative;transition:border-color .3s,transform .35s var(--ease)}
.gal-strip a:nth-child(odd){transform:rotate(-.8deg)}
.gal-strip a:nth-child(even){transform:rotate(.8deg)}
.gal-strip a:hover{border-color:var(--red);transform:rotate(0) scale(1.03)}
.gal-strip img{width:100%;aspect-ratio:1/1;object-fit:cover}

/* ============ mini player ============ */
.miniplayer{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:rgba(10,7,9,.96);border-top:1px solid var(--red-deep);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.mp-toggle{width:100%;display:flex;align-items:center;gap:14px;background:none;border:0;cursor:pointer;padding:12px 20px;color:var(--bone);text-align:left}
.mp-glyph{flex:none;width:44px;height:44px;background:var(--red);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--cream);transition:background .15s,transform .2s var(--ease);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mp-toggle:hover .mp-glyph{background:#e02432;transform:scale(1.07)}
.mp-label b{display:block;font-family:'Archivo Black',sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream)}
.mp-label i{display:block;font-style:normal;font-size:12px;color:var(--gray)}
.mp-live{margin-left:auto;flex:none;font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.24em;color:var(--red);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.mp-live::before{content:"";width:8px;height:8px;background:var(--red);animation:recPulse 3s ease-in-out infinite}
.mp-panel{border-top:1px solid var(--line);padding:14px 20px 18px;max-width:860px;margin:0 auto}
.mp-panel iframe{display:block;width:100%;height:152px;border:0}
body.has-player{padding-bottom:70px}

/* ============ page wipe: fast static-cut channel change ============ */
.wipe{position:fixed;inset:0;z-index:400;pointer-events:none;visibility:hidden}
.wipe.go{visibility:visible}
.wipe .wp{position:absolute;top:-10%;bottom:-10%;width:120%;left:-10%;background:linear-gradient(100deg,#12060a,#0a0508);transform:translateX(-110%) skewX(-8deg)}
.wipe .wp.w2{display:none}
.wipe.go .wp{animation:wipeIn .34s var(--ease) both}
@keyframes wipeIn{
  0%{transform:translateX(-110%) skewX(-8deg)}
  45%,55%{transform:translateX(0) skewX(-8deg)}
  100%{transform:translateX(110%) skewX(-8deg)}
}

/* ============ scramble text ============ */
[data-scramble]{display:inline-block}

/* ============ responsive ============ */
@media (max-width:1100px){.nav-links{gap:16px}}
@media (max-width:960px){
  .with-rail{grid-template-columns:1fr}
  .rail{position:static;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .promo-inner{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav-links{
    position:fixed;top:var(--nav-h);right:0;left:0;flex-direction:column;align-items:stretch;
    background:#0b0a0c;border-bottom:1px solid var(--line);padding:10px 20px 20px;
    gap:0;display:none;z-index:100;
  }
  .nav-links.open{display:flex}
  .nav-links a{display:block;padding:14px 4px;border-bottom:1px solid #1c1c1c;font-size:14px}
  .nav-toggle{display:block}
  .section{padding:64px 18px}
  .slip{grid-template-columns:1fr;gap:8px;padding:20px}
  .hero{min-height:94svh}
  .hero-inner{padding:80px 18px 60px}
  .tx-inner{padding:72px 20px}
  .gal-strip{grid-template-columns:repeat(2,1fr)}
  .boot{font-size:11px}
  .sigbreak{height:60px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .ticker-track{animation:none}
  .scanlines{display:none}
  .wm-sheen,.wm-flick{animation:none}
  .reveal,.reveal-l,.reveal-r,.reveal-s{opacity:1;transform:none}
  .hero-bg{inset:0}
}