/* ===========================================================================
   ONE RAID STUDIO — base.css
   Tokens, shell, shared components. Loaded on every page before the page CSS.

   Aesthetic: pixel-arcade neon on near-black. Hard offset shadows, no radii,
   one dominant red + sparing cyan/magenta accents.

   Physical model (applies to every interactive surface):
     rest   -> sits on a hard maroon shadow
     hover  -> lifts up-left, shadow grows
     active -> presses down-right, shadow shrinks
   =========================================================================== */

/* ---------------------------------------------------------------- 1 TOKENS */
:root{
  color-scheme:dark;

  /* surfaces */
  --bg:#0B0410;
  --surface:#170912;
  --surface-2:#22101B;
  --border:#4A1630;
  --rule:#2C0E1D;

  /* brand */
  --maroon:#63132F;
  --brand-red:#C72941;       /* tints, gradients, glows                       */
  --brand-red-lit:#D82A46;   /* solid fills that must pop (buttons, on-states) */
  --brand-red-deep:#901F3B;
  --neon-red:#FF2E4D;
  --neon-cyan:#00E5FF;
  --neon-magenta:#FF2D95;
  --neon-lime:#B6FF3B;       /* prices only — 15.9:1 on --surface, 11.3:1 on --brand-red-deep */
  --white:#FEFEFE;

  /* text — every value below clears 4.5:1 on --bg and --surface */
  --text:#FFF3F6;
  --text-muted:#C9AEB6;
  --text-dim:#9B7A86;      /* was #7A5A64 — 3.4:1, failed AA */

  --teal-deep:#0D4F59;       /* the cyan counterpart to --maroon           */
  --glow-red:rgba(255,46,77,.62);
  --glow-cyan:rgba(0,229,255,.5);
  --glow-lime:rgba(182,255,59,.45);
  --chrome:linear-gradient(180deg,#FFFFFF 0%,#E7ECF4 22%,#AAB4C6 50%,#6E7488 68%,#EAB8C6 88%,#00E5FF 100%);

  /* type families */
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Kept as the fallback inside --title and nothing else. A webfont is only
     downloaded when something actually renders in it, so while Wellbutrin
     loads this costs a few bytes of stylesheet and no request.            */
  --pixel:'Pixelify Sans',var(--mono);
  /* THE display face — every heading, title, nav link, wordmark and price on
     the site resolves through here. Wellbutrin is self-hosted (@font-face
     below); if the file is missing the chain falls straight back to Pixelify
     Sans, so nothing breaks and nothing shifts layout badly.

     To revert the whole site to the old look, change this one line to:
         --title:var(--pixel);                                             */
  --title:'Wellbutrin',var(--pixel);
  --arcade:'Press Start 2P',var(--mono);
  --bitmap:'Silkscreen',var(--mono);
  --script:'Pirata One',Georgia,serif;
  --body:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;

  /* type scale — the ONLY sizes on the site. No inline font-size overrides. */
  --fs-display:clamp(1.25rem,4.4vw,2.6rem);  /* hero wordmark, arcade face  */
  --fs-h1:clamp(2rem,4.2vw,3.15rem);
  --fs-h2:clamp(1.6rem,2.9vw,2.35rem);
  --fs-h3:clamp(1.25rem,1.5vw,1.45rem);
  --fs-lede:clamp(1rem,.9rem + .35vw,1.0625rem);
  --fs-body:1rem;
  --fs-sm:.9375rem;
  --fs-label:.72rem;                          /* mono, uppercase           */
  --fs-tag:.68rem;

  --lh-head:1.14;
  --lh-body:1.62;
  --tracking-label:.12em;

  /* space scale */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:44px; --sp-8:64px;
  --sec-y:clamp(56px,8vw,104px);              /* every full section         */
  --sec-y-sm:clamp(40px,5.5vw,72px);          /* page heads, tight bands    */
  --gutter:clamp(16px,4vw,24px);
  --wrap:1200px;
  --tap:44px;                                 /* minimum touch target       */

  /* hard pixel shadows */
  --sh-1:3px 3px 0 var(--maroon);
  --sh-2:5px 5px 0 var(--maroon);
  --sh-3:8px 8px 0 var(--maroon);
  --glow-sm:0 0 20px var(--glow-red);
  --glow-md:0 0 34px var(--glow-red);

  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur-fast:.14s;
  --dur:.2s;
  --dur-slow:.6s;

  /* CRT — tune the whole screen effect from these three values.
     Scanlines carry the effect; grain is a whisper on top of it. */
  --crt-line:rgba(255,243,246,.030);
  --crt-pitch:3px;                            /* scanline period            */
  --crt-grain:.05;                            /* 0 = off. Keep under .08.   */
  --vignette:.55;
}

/* ------------------------------------------------------------- 2 ELEMENTS */
*,*::before,*::after{box-sizing:border-box}

html{
  /* clip (not hidden) — keeps the sticky header working */
  overflow-x:clip;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  overflow-x:clip;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;display:block}
h1,h2,h3,h4,p{margin:0;text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
ul{margin:0;padding:0;list-style:none}

/* --------------------------------------------------------------- WEBFONT
   Wellbutrin — Karen Clemens & Apostrophic Labs, 2000. Freeware, cleared for
   commercial use. Self-hosted because it is not on Google Fonts.

   Drop the file in as  assets/fonts/wellbutrin.ttf  (the .woff2 line is there
   if you convert it later — smaller, but the .ttf alone works everywhere).

   The weight RANGE is deliberate: the family ships one weight, so declaring
   400-700 tells the browser this face covers all of them and stops it faking
   a bold. Synthetic bold on a rounded-rectangle face looks like a smudge.  */
@font-face{
  font-family:'Wellbutrin';
  src:url('../assets/fonts/wellbutrin.woff2') format('woff2'),
      url('../assets/fonts/wellbutrin.ttf') format('truetype');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

a{color:var(--neon-cyan);text-decoration:none}
a:hover{color:var(--white)}

button{font:inherit;color:inherit}
a,button,.chip,.filter,.social,.switch button{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(255,46,77,.2);
}

:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:3px}
::selection{background:var(--neon-magenta);color:#0B0410}

[id]{scroll-margin-top:96px}

/* scrollbar — squared off, brand red on the surface colour */
html{scrollbar-color:var(--brand-red-lit) var(--surface);scrollbar-width:auto}
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:var(--surface);border-left:1px solid var(--border)}
::-webkit-scrollbar-thumb{
  background:var(--brand-red-lit);
  border:3px solid var(--surface);
  box-shadow:inset 0 0 0 1px var(--neon-red);
}
::-webkit-scrollbar-thumb:hover{background:var(--neon-red)}
::-webkit-scrollbar-thumb:active{background:var(--neon-red)}
::-webkit-scrollbar-corner{background:var(--surface)}

/* pending links — a URL hasn't been filled into js/links.js yet.
   Deliberately NOT dimmed: opacity here washed out every CTA on the page. */
[data-pending]{cursor:not-allowed}

/* ------------------------------------------------------------- 3 LAYOUT */
.wrap{
  position:relative;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:max(var(--gutter),env(safe-area-inset-left),env(safe-area-inset-right));
}
.sec{position:relative;overflow:clip;padding-block:var(--sec-y)}
.sec--rule{border-top:1px solid var(--rule)}

.skip{
  position:fixed;left:12px;top:-80px;z-index:12000;
  padding:12px 18px;background:var(--brand-red);color:var(--white);
  font-family:var(--mono);font-size:.8rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  border:2px solid var(--neon-red);transition:top var(--dur) var(--ease);
}
.skip:focus{top:12px;color:var(--white)}

/* -------------------------------------------------- 4 SCREEN EFFECTS (CRT)
   Scanlines only, painted straight onto the page — no blend mode, no
   full-viewport flicker. The grain rides on `overlay`, so it textures the
   mid-tones and stays invisible in the blacks instead of lifting them.
   Both layers sit above the header so the effect is unbroken.            */
.crt{
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  background-image:repeating-linear-gradient(
    to bottom,
    var(--crt-line) 0, var(--crt-line) 1px,
    transparent 1px, transparent var(--crt-pitch)
  );
}
.crt::after{
  content:"";position:absolute;inset:0;
  opacity:var(--crt-grain);
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size:200px 200px;
}
.vignette{
  position:fixed;inset:0;z-index:8990;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,var(--vignette)) 100%);
}

/* ------------------------------------------------------- 4b BOOT SCREEN
   Covers the font swap and first image paint. Dismissed by main.js once the
   page has loaded; the failsafe keyframe below guarantees it can never
   permanently block the page if the script never runs.                    */
.boot{
  position:fixed;inset:0;z-index:8950;
  display:grid;place-items:center;
  background:var(--bg);
  transition:opacity .45s var(--ease),visibility .45s var(--ease);
  animation:bootFailsafe 0s linear 8s forwards;
}
.boot.is-done{opacity:0;visibility:hidden;pointer-events:none}
@keyframes bootFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}

.boot__inner{display:flex;flex-direction:column;align-items:center;gap:18px;padding:var(--sp-5)}
.boot__mark{width:64px;height:64px;image-rendering:pixelated;animation:floaty 2.4s ease-in-out infinite}
.boot__word{
  font-family:var(--arcade);font-size:1.15rem;letter-spacing:.12em;
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px var(--neon-red);text-shadow:0 0 22px var(--glow-red);
}
.boot__bar{
  position:relative;overflow:hidden;
  width:min(58vw,260px);height:16px;
  background:var(--surface-2);border:2px solid var(--border);box-shadow:var(--sh-1);
}
.boot__bar i{
  display:block;height:100%;width:0;
  background:var(--brand-red-lit);box-shadow:0 0 16px var(--glow-red);
  transition:width .28s var(--ease);
}
/* LED segments */
.boot__bar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 9px,var(--bg) 9px 12px);
}
.boot.is-done .boot__bar i{width:100%}
.boot__label{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-dim);
}

/* --------------------------------------------------------- 5 KEYFRAMES */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.82;transform:scale(1.06)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ 6 HEADER */
.hdr{
  position:sticky;top:0;z-index:100;
  padding-block:14px;
  padding-top:max(14px,env(safe-area-inset-top));
  background:rgba(11,4,16,.84);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:padding var(--dur) var(--ease),background var(--dur) var(--ease);
}
.hdr.is-scrolled{padding-block:8px;background:rgba(11,4,16,.96)}
.hdr__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5)}

.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;min-height:var(--tap)}
/* 32px display from the 64px source is an exact 2:1 reduction, so the pixel
   grid stays square. 26px was a 0.406 scale — that was the distortion. */
.brand img{width:32px;height:32px;image-rendering:pixelated}
/* LED tube lockup — same hollow-stroke treatment as the hero wordmark */
.brand__word{
  font-family:var(--arcade);font-weight:400;font-size:1rem;letter-spacing:.1em;
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px var(--neon-red);
  white-space:nowrap;
}

.nav{display:flex;align-items:center;gap:clamp(16px,2vw,28px)}
.nav__link{
  display:inline-flex;align-items:center;min-height:32px;padding-bottom:2px;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.nav__link:hover{color:var(--text);border-bottom-color:var(--neon-red)}
.nav__link[aria-current="page"]{color:var(--text);border-bottom-color:var(--neon-red)}

/* ----------------------------------------------------------- 7 BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);
  padding:14px 26px;
  font-family:var(--mono);font-weight:700;font-size:.85rem;
  letter-spacing:.08em;text-transform:uppercase;text-align:center;
  border:2px solid var(--border);background:transparent;color:var(--text);
  box-shadow:var(--sh-2);cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-3);background:var(--surface-2);border-color:var(--neon-cyan);color:var(--white)}
.btn:active{transform:translate(2px,2px);box-shadow:var(--sh-1)}

.btn--primary{background:var(--brand-red-lit);border-color:var(--neon-red);color:var(--white);box-shadow:var(--sh-2),var(--glow-sm)}
.btn--primary:hover{background:var(--neon-red);border-color:var(--neon-red);color:var(--white);box-shadow:var(--sh-3),var(--glow-md)}
.btn--primary:active{box-shadow:var(--sh-1),var(--glow-sm)}

.btn--sm{min-height:38px;padding:9px 16px;font-size:.76rem;box-shadow:var(--sh-1),var(--glow-sm)}
.btn--sm:hover{box-shadow:var(--sh-2),var(--glow-sm)}
.btn--lg{padding:18px 32px;font-size:.95rem}
.btn__caret{margin-left:.5em;font-size:.9em;line-height:1}

.burger{
  display:none;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);
  background:var(--surface-2);border:2px solid var(--border);box-shadow:var(--sh-1);
  color:var(--text);cursor:pointer;padding:0;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.burger:hover{border-color:var(--neon-red)}
.burger:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--maroon)}
.burger span{display:flex;flex-direction:column;gap:4px}
.burger i{display:block;width:18px;height:3px;background:var(--text)}
.burger i:first-child{background:var(--neon-red)}
.burger i:last-child{background:var(--neon-cyan)}

/* ------------------------------------------------------------ 8 DRAWER */
/* The drawer replaces the header row on screen, so its first row has to land
   in exactly the same place. That means the page gutter (16px on a phone), not
   the drawer's own 24px pad, and the header's 14px top pad — otherwise O.R.S
   and the close button both sit low and inboard of the brand and burger they
   are standing in for. Vertical alignment then follows for free: both rows are
   one --tap-tall control inside a 14px pad. */
.drawer{
  position:fixed;inset:0;z-index:9500;
  display:none;flex-direction:column;
  background:var(--bg);
  padding-inline:max(var(--gutter),env(safe-area-inset-left),env(safe-area-inset-right));
  padding-top:max(14px,env(safe-area-inset-top));
  padding-bottom:max(var(--sp-5),env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer.is-open{display:flex}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  min-height:var(--tap);
}
.drawer__close{
  width:var(--tap);height:var(--tap);flex-shrink:0;
  background:var(--surface-2);border:2px solid var(--border);box-shadow:var(--sh-1);
  color:var(--neon-red);font-family:var(--mono);font-size:1.1rem;cursor:pointer;
}
.drawer__close:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--maroon)}
.drawer__nav{display:flex;flex-direction:column;margin-top:clamp(20px,5vh,48px)}
.drawer__link{
  display:flex;align-items:center;min-height:var(--tap);
  padding:16px 4px;
  font-family:var(--title);font-size:clamp(1.5rem,6vw,2rem);
  color:var(--text);border-bottom:2px solid var(--rule);
}
.drawer__link:hover,.drawer__link[aria-current="page"]{color:var(--neon-red)}
.drawer .btn{margin-top:auto;padding-top:16px}
.drawer__cta{margin-top:clamp(24px,6vh,40px)}
body.is-locked{overflow:hidden}

/* ------------------------------------------- 9 SECTION HEADING SYSTEM
   One pattern for every section on every page:
   eyebrow + script flourish -> h2 -> optional lede -> optional inline link. */
.eyebrow{
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--neon-cyan);
}
.script{
  display:inline-block;
  font-family:var(--script);font-size:1.55rem;line-height:1;color:var(--neon-red);
  text-shadow:0 0 18px var(--glow-red);white-space:nowrap;
  margin-inline:2px;
  transform:rotate(var(--tilt,-6deg));
  transform-origin:center;
  animation:splash 1.35s ease-in-out infinite;
}
/* Minecraft splash-text pulse: the tilt eases toward level at peak scale,
   which is what makes it read bouncy rather than a flat zoom. */
@keyframes splash{
  0%,100%{transform:rotate(var(--tilt,-6deg)) scale(1)}
  50%    {transform:rotate(calc(var(--tilt,-6deg) * .8)) scale(1.13)}
}
.sec-head{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-7)}
.sec-head--tight{margin-bottom:var(--sp-5)}
.sec-head__row{display:flex;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap}
.sec-head .lede,.page-head .lede{margin-top:var(--sp-1)}

.h1{font-family:var(--title);font-weight:600;font-size:var(--fs-h1);line-height:var(--lh-head)}
.h2{font-family:var(--title);font-weight:600;font-size:var(--fs-h2);line-height:var(--lh-head)}
.h3{font-family:var(--title);font-weight:500;font-size:var(--fs-h3);line-height:1.2;color:var(--text)}

/* Two heading tones, identical treatment — solid neon fill, hard offset
   shadow, soft halo. .tone-ice is the cyan counterpart to .tone-red. */
.tone-red{color:var(--neon-red);text-shadow:3px 3px 0 var(--maroon),0 0 20px var(--glow-red)}
.tone-ice{color:var(--neon-cyan);text-shadow:3px 3px 0 var(--teal-deep),0 0 20px var(--glow-cyan)}

.lede{max-width:62ch;font-size:var(--fs-lede);line-height:var(--lh-body);color:var(--text-muted)}
.prose{max-width:62ch;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-muted)}

/* .vh — present for crawlers and screen readers, absent on screen. Used for
   copy that belongs in the document but is shown somewhere else visually
   (portfolio tile descriptions, which surface in the lightbox). Never use it
   to hide text that does not match what the page shows. */
.vh{
  position:absolute!important;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* reply-time promise — the single highest-value line on a services site, so
   it gets a live-looking indicator rather than being buried in body copy */
.promise{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--neon-cyan);
}
.promise i{
  display:block;width:8px;height:8px;flex-shrink:0;
  background:var(--neon-cyan);box-shadow:0 0 10px var(--glow-cyan);
  animation:pulse 2.4s ease-in-out infinite;
}

/* page head — shared by releases / services / portfolio */
.page-head{position:relative;overflow:clip;padding-block:var(--sec-y-sm) clamp(20px,3vw,36px)}
.page-head__inner{position:relative;display:flex;flex-direction:column;gap:var(--sp-3)}

/* giant ghost word — anchored to the content column, never the viewport */
.ghostword{
  position:absolute;top:-18px;
  font-family:var(--arcade);font-size:clamp(2rem,6vw,4.4rem);line-height:.9;
  color:var(--neon-red);text-shadow:4px 4px 0 var(--maroon),0 0 26px var(--glow-red);
  opacity:.15;white-space:nowrap;pointer-events:none;user-select:none;
}
.ghostword--l{left:var(--gutter)}
.ghostword--r{right:var(--gutter)}

/* ------------------------------------------------- 10 IMAGE FRAMES
   Every image on the site sits in a .frame. If the file isn't there yet the
   frame renders a labelled placeholder at the right aspect ratio, so layout
   never shifts and you can see exactly which asset is still missing.      */
.frame{position:relative;overflow:hidden;background:var(--surface-2);isolation:isolate}
.frame--1x1{aspect-ratio:1/1}
.frame--4x3{aspect-ratio:4/3}
.frame img{width:100%;height:100%;object-fit:cover}
.frame[data-empty]::before{
  content:"";position:absolute;inset:10px;
  border:2px dashed var(--border);
}
.frame[data-empty]::after{
  content:attr(data-label);
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-5);text-align:center;
  font-family:var(--mono);font-size:var(--fs-tag);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dim);
}

/* service icon frame — drop a 128×128 PNG in and it fills this exactly */
.icon-frame{
  position:relative;flex:0 0 auto;
  width:104px;height:104px;
  background:var(--surface-2);border:2px solid var(--border);box-shadow:var(--sh-1);
  overflow:hidden;
}
.icon-frame img{width:100%;height:100%;object-fit:contain;padding:10px;image-rendering:pixelated}
.icon-frame[data-empty]::before{content:"";position:absolute;inset:8px;border:2px dashed var(--border)}
.icon-frame[data-empty]::after{
  content:attr(data-label);
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:10px;text-align:center;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-dim);line-height:1.4;
}

/* ------------------------------------------------------------- 11 CARDS */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
.card{
  display:flex;flex-direction:column;
  background:var(--surface);border:2px solid var(--border);box-shadow:var(--sh-2);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.card:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-3);border-color:var(--brand-red)}
.card__media{border-bottom:2px solid var(--border)}
.card__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.card__title{font-family:var(--title);font-weight:500;font-size:var(--fs-h3);line-height:1.15;color:var(--text)}
.card__text{font-size:var(--fs-sm);line-height:1.55;color:var(--text-muted)}

.tags{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tag{
  font-family:var(--mono);font-size:var(--fs-tag);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);padding:5px 9px;
}
.tag--cyan{color:var(--neon-cyan);border-color:var(--neon-cyan)}
.tag--free{color:var(--neon-magenta);border-color:var(--neon-magenta);font-weight:700}

.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text);background:var(--surface);border:2px solid var(--border);
  box-shadow:var(--sh-1);padding:8px 12px;
}

.arrow{
  margin-top:auto;padding-top:var(--sp-2);align-self:flex-start;
  display:inline-flex;align-items:center;min-height:32px;
  font-family:var(--mono);font-size:.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--neon-cyan);
  transition:color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.arrow:hover{color:var(--white);transform:translateX(3px)}
.arrow--inline{margin-top:0;padding-top:0}
.arrow__glyph{margin-left:.45em}

/* ---------------------------------------------------------- 12 CTA BAND */
.band{
  position:relative;overflow:clip;padding-block:var(--sec-y-sm);
  border-top:2px solid var(--border);border-bottom:2px solid var(--border);
  background:linear-gradient(180deg,var(--surface) 0%,#1B0A16 100%);
}
.band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 80% at 50% 50%,rgba(199,41,65,.2),transparent 72%);
}
.band__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);text-align:center}

/* ---------------------------------------------------------------- 13 FAQ
   Built on native <details>, so it opens with no JS, keyboard-operates for
   free, and Ctrl+F still finds text inside a closed answer. Items are
   independent — any number can stand open at once.

   The question IS the chip from the about-page tag row — closed it reads
   as a plain tag, open it takes the --lead highlight. Same recipe, one
   state apart, so the two never drift. Every question spans the full
   column so the chips stack as an even ladder and line up edge-to-edge
   with the answer panels underneath them.                               */
.faq{display:flex;flex-direction:column;gap:var(--sp-4);max-width:78ch}

.faq__q{
  display:flex;align-items:center;gap:var(--sp-4);
  width:100%;min-height:var(--tap);
  padding:11px 15px;cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.5;
  color:var(--text);background:var(--surface-2);
  border:2px solid var(--border);box-shadow:var(--sh-1);
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease);
}
/* both are needed — WebKit still ships the legacy marker pseudo-element */
.faq__q::-webkit-details-marker{display:none}
.faq__q::marker{content:""}
.faq__q:hover{border-color:var(--brand-red);color:var(--white)}
.faq__q:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--maroon)}

/* open state — identical to .chip--lead, plus the glow the CTAs carry */
.faq__item[open]>.faq__q{
  background:var(--brand-red-deep);border-color:var(--neon-red);color:var(--white);
  box-shadow:var(--sh-1),var(--glow-sm);
}

.faq__sign{
  flex:0 0 auto;margin-left:auto;
  display:grid;place-items:center;
  width:18px;height:18px;
  border:1px solid currentColor;
  font-size:.78rem;line-height:1;
}
.faq__sign::before{content:"+"}
.faq__item[open] .faq__sign::before{content:"\2212"}

.faq__a{
  margin-top:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  background:var(--surface);
  border:2px solid var(--border);border-left:4px solid var(--neon-red);
  box-shadow:var(--sh-1);
  font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-muted);
  animation:faqIn .26s var(--ease) both;
}
.faq__a p+p{margin-top:var(--sp-3)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ 14 FOOTER */
.footer{
  position:relative;border-top:2px solid var(--border);background:var(--surface);
  padding-block:clamp(40px,6vw,64px) var(--sp-5);
  padding-bottom:max(var(--sp-5),env(safe-area-inset-bottom));
}
.footer__grid{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:var(--sp-7) var(--sp-7)}
.footer__brand{display:flex;flex-direction:column;gap:10px}
.footer__word{
  font-family:var(--title);font-weight:700;font-size:1.25rem;
  color:var(--neon-cyan);
  text-shadow:2px 2px 0 var(--teal-deep),0 0 20px var(--glow-cyan);
}
.footer__tag{font-family:var(--bitmap);font-size:.95rem;line-height:1.5;color:var(--text-muted)}
.footer__col{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.footer__label{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-dim)}
.footer__link{display:inline-flex;align-items:center;min-height:30px;font-size:.92rem;color:var(--text-muted)}
.footer__link:hover{color:var(--neon-red)}
.footer__bar{
  max-width:var(--wrap);margin:var(--sp-6) auto 0;
  padding:var(--sp-5) var(--gutter) 0;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);justify-content:space-between;
}
.footer__fine{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;color:var(--text-dim)}

.switch{display:flex;border:2px solid var(--border);background:var(--surface-2);width:max-content;max-width:100%}
.switch button{
  min-height:var(--tap);padding:9px 14px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);background:transparent;border:0;border-right:2px solid var(--border);cursor:pointer;
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.switch button:last-child{border-right:0}
.switch button:hover{color:var(--text);background:rgba(199,41,65,.18)}
.switch button.is-on{background:var(--brand-red-lit);color:var(--white);box-shadow:inset 0 0 14px rgba(255,46,77,.5)}

/* ------------------------------------------------- 15 SCROLL REVEAL */
.reveal.is-armed{opacity:0;transform:translateY(18px)}
.reveal.is-armed.is-in{
  opacity:1;transform:none;
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);
}

/* --------------------------------------------------- 16 MOTION MODES
   max    — everything, including ambient loops
   subtle — no ambient loops; hover + reveal transitions stay
   zero   — nothing moves                                                */
[data-motion="subtle"] .marquee__track,
[data-motion="subtle"] .hero__cube img,
[data-motion="subtle"] .hero__cube::before,
[data-motion="subtle"] .script,
[data-motion="subtle"] .chip{animation:none}
[data-motion="subtle"]{--crt-grain:0}

[data-motion="zero"] *,
[data-motion="zero"] *::before,
[data-motion="zero"] *::after{animation:none !important;transition:none !important}
[data-motion="zero"] .crt,
[data-motion="zero"] .vignette{display:none}
[data-motion="zero"] .hero__cube:hover .hero__cube__inner{transform:none}

@media (prefers-reduced-motion:reduce){
  .marquee__track,.hero__cube img,.hero__cube::before,.script,.chip,.promise i{animation:none !important}
}

/* ------------------------------------------------------ 17 RESPONSIVE
   Verified at 360 / 390 / 768 / 834 / 1024 / 1280 / 1600 / 1920.        */

/* ultra-wide — let the column breathe rather than stranding it */
@media (min-width:1600px){
  :root{--wrap:1320px}
}

/* laptop */
@media (max-width:1100px){
  .nav{gap:16px}
  .nav__link{font-size:.74rem}
}

/* tablet landscape — nav becomes the drawer */
@media (max-width:960px){
  .nav{display:none}
  .burger{display:inline-flex}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1 / -1}
}

/* tablet portrait */
@media (max-width:768px){
  :root{--sec-y:clamp(48px,9vw,72px)}
  .ghostword{font-size:clamp(1.8rem,8vw,3rem);opacity:.1}
}

/* phone */
@media (max-width:640px){
  :root{
    --crt-grain:.035;--crt-line:rgba(255,243,246,.026);
    /* the desktop clamp floors at 20px on any phone, which reads far too
       small for the hero lockup — roughly +50% at 390px */
    --fs-display:clamp(1.7rem,7.7vw,1.9rem);
  }
  .grid{grid-template-columns:1fr}
  .ghostword{display:none}
  .footer__grid{grid-template-columns:1fr;gap:var(--sp-5)}
  /* the link lists flow inline and wrap — one 44px row per link made the
     footer taller than the viewport */
  nav.footer__col{flex-flow:row wrap;align-items:center;gap:0 var(--sp-4)}
  nav.footer__col .footer__label{flex:1 0 100%;margin-bottom:2px}
  .footer__link{min-width:44px}
  .footer__bar{flex-direction:column;gap:var(--sp-2)}
  .switch{width:100%}
  .switch button{flex:1;padding-inline:6px}
  .btn{width:100%}
  .band .btn,.hdr .btn{width:auto}
  /* every inline link becomes a full 44px target on touch */
  .arrow,.footer__link,.btn--sm{min-height:var(--tap)}
}

/* short viewports (phone in landscape) — keep the drawer usable */
@media (max-height:560px){
  .drawer__nav{margin-top:var(--sp-4)}
  .drawer__link{font-size:1.25rem;padding-block:10px}
  .drawer__cta{margin-top:var(--sp-4)}
}

@media (max-width:400px){
  .brand__word{font-size:.8rem;letter-spacing:.06em}
}

/* ---------------------------------------------------------- 18 PRINT */
@media print{
  .crt,.vignette,.drawer,.burger,.marquee,.skip,.switch{display:none !important}
  body{background:#fff;color:#000}
  .hdr{position:static;background:none}
  a{color:#000;text-decoration:underline}
  /* a closed <details> prints blank otherwise — force every answer out */
  .faq__a{display:block !important;animation:none;box-shadow:none}
  .faq__sign{display:none}
}