/* ==========================================================================
   Operator Z website
   Dark military HUD. One accent (signal red, from the logo). All-sharp
   corners. Chakra Petch display, Geist body, JetBrains Mono for HUD text.
   ========================================================================== */

:root{
  --bg:#0b0c0a;
  --bg-2:#10110e;
  --panel:#141512;
  --panel-2:#1a1b17;
  --line:rgba(233,231,225,.10);
  --line-2:rgba(233,231,225,.20);
  --text:#e9e7e1;
  --muted:#a3a49b;
  --dim:#6d6f66;
  --accent:#e4472f;
  --accent-soft:rgba(228,71,47,.14);
  --on-accent:#140604;

  --display:'Chakra Petch', 'Arial Narrow', system-ui, sans-serif;
  --body:'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'Consolas', monospace;

  --s:1;  /* size scale, raised on big screens (see bottom of file) */
  --wrap:calc(1440px * var(--s));
  --pad:clamp(20px, 4vw, calc(56px * var(--s)));
  --ease:cubic-bezier(.16,1,.3,1);
  --header-h:calc(68px * var(--s));

  /* z-index scale */
  --z-rifle:0;
  --z-content:1;
  --z-header:20;
  --z-drawer:40;
  --z-toast:50;
  --z-boot:60;
  --z-grain:70;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:calc(16px * var(--s));
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-booting{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; }
h1,h2,h3,h4,h5,h6,p,dl,dd,ol,ul{ margin:0; }
ol,ul{ list-style:none; padding:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
[hidden]{ display:none !important; }
section[id], .block-title[id]{ scroll-margin-top:calc(var(--header-h) + 12px); }

/* film grain, fixed and non-interactive */
body::after{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:var(--z-grain);
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip-link{
  position:absolute; left:-9999px; top:12px;
  background:var(--accent); color:var(--on-accent);
  padding:8px 14px; z-index:100; font-family:var(--mono); font-size:calc(13px * var(--s));
}
.skip-link:focus{ left:12px; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad); }

/* ---- HUD label (used sparingly) ---- */
.hud-label{
  font-family:var(--mono);
  font-size:calc(12px * var(--s));
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px;
}
.hud-label span{ color:var(--accent); margin:0 .4em; }

/* ---- Buttons: sharp, notched corner ---- */
.btn{
  --notch:10px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:calc(48px * var(--s));
  padding:0 calc(24px * var(--s));
  font-family:var(--mono);
  font-size:calc(13px * var(--s)); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap;
  clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  transition:background-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--on-accent); }
.btn-primary:hover{ background:#f0573f; }
.btn-ghost{
  background:transparent; color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.btn-ghost:hover{ background:rgba(233,231,225,.06); }
.btn-block{ width:100%; }
.btn-sm{ min-height:calc(38px * var(--s)); padding:0 calc(16px * var(--s)); font-size:calc(12px * var(--s)); }
.btn svg{ width:calc(18px * var(--s)); height:calc(18px * var(--s)); flex:none; }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.boot{
  position:fixed; inset:0;
  z-index:var(--z-boot);
  background:var(--bg);
  display:grid; place-items:center;
  padding:var(--pad);
  transition:opacity .6s var(--ease), visibility .6s;
}
.boot.is-done{ opacity:0; visibility:hidden; }
.boot-inner{ width:min(440px, 100%); }
.boot-logo{ width:72px; height:auto; margin-bottom:28px; }
.boot-log{
  font-family:var(--mono); font-size:calc(13px * var(--s)); line-height:1.9;
  color:var(--muted);
  min-height:calc(1.9em * 5);
  margin-bottom:26px;
}
.boot-log li::before{ content:'> '; color:var(--accent); }
.boot-log li.ok::after{ content:' OK'; color:var(--text); }
.boot-meter-row{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:calc(12px * var(--s)); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px;
}
.boot-meter-row span:last-child{ color:var(--text); font-variant-numeric:tabular-nums; }
.boot-bar{ height:2px; background:var(--line); }
.boot-bar span{ display:block; height:100%; width:0; background:var(--accent); transition:width .25s linear; }
.boot-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.boot-actions .btn{ flex:1 1 180px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:var(--z-header);
  height:var(--header-h);
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(11,12,10,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
}
.site-header .wrap{ max-width:none; }
.header-row{ height:100%; display:flex; align-items:center; gap:32px; }
.brand{ display:flex; align-items:center; gap:12px; white-space:nowrap; font-family:var(--display); font-weight:600; font-size:calc(20px * var(--s)); letter-spacing:.06em; text-transform:uppercase; }
.brand img{ width:calc(40px * var(--s)); height:auto; }
.brand b{ color:var(--accent); font-weight:700; }
.nav{ display:flex; gap:calc(30px * var(--s)); margin-left:auto; }
.nav a{
  font-family:var(--mono); font-size:calc(12px * var(--s)); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  transition:color .2s var(--ease);
}
.nav a i{ font-style:normal; color:var(--dim); margin-right:8px; }
.nav a:hover{ color:var(--text); }
.nav a:hover i{ color:var(--accent); }
.header-tools{ display:flex; align-items:center; gap:6px; }
.tool{
  height:calc(40px * var(--s)); min-width:calc(40px * var(--s));
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:0 10px;
  color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:color .2s var(--ease), box-shadow .2s var(--ease);
  position:relative;
}
.tool:hover{ color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2); }
.tool svg{ width:calc(18px * var(--s)); height:calc(18px * var(--s)); }
.tool-label{ font-family:var(--mono); font-size:calc(11px * var(--s)); letter-spacing:.12em; text-transform:uppercase; }

/* equalizer bars on the sound toggle */
.eq{ display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.eq i{ width:2px; height:3px; background:currentColor; transition:height .2s; }
.sound-toggle[aria-pressed="true"]{ color:var(--text); }
.sound-toggle[aria-pressed="true"] .eq i{ background:var(--accent); animation:eq 1s ease-in-out infinite; }
.sound-toggle[aria-pressed="true"] .eq i:nth-child(2){ animation-delay:-.4s; }
.sound-toggle[aria-pressed="true"] .eq i:nth-child(3){ animation-delay:-.2s; }
.sound-toggle[aria-pressed="true"] .eq i:nth-child(4){ animation-delay:-.7s; }
.sound-toggle.is-unavailable{ opacity:.5; }
@keyframes eq{ 0%,100%{ height:3px; } 50%{ height:14px; } }

.cart-count{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 5px;
  display:grid; place-items:center;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--mono); font-size:calc(10px * var(--s)); font-weight:700;
}

/* ==========================================================================
   HERO (layout follows the reference: centered visual, faded title left,
   stats panel right, ticker on top, corner info bottom-left)
   ========================================================================== */
.hero{
  position:relative;
  min-height:100dvh;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.hero-grid-bg{
  position:absolute; inset:0; z-index:var(--z-rifle);
  pointer-events:none;
  background-image:
    linear-gradient(rgba(233,231,225,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,231,225,.035) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 45%, #000 20%, transparent 85%);
          mask-image:radial-gradient(90% 70% at 50% 45%, #000 20%, transparent 85%);
}
/* perspective floor grid at the bottom of the hero */
.hero-floor{
  position:absolute; left:-25%; right:-25%; bottom:-10%; height:55%;
  background-image:
    linear-gradient(rgba(228,71,47,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228,71,47,.16) 1px, transparent 1px);
  background-size:72px 72px;
  transform:perspective(600px) rotateX(68deg);
  transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 75%);
          mask-image:linear-gradient(to top, #000 0%, transparent 75%);
  animation:floor 6s linear infinite;
}
@keyframes floor{ to{ background-position:0 72px, 0 0; } }

.hero-rifle, .hero-pulse{ position:absolute; inset:0; width:100%; height:100%; }
.hero-rifle{ z-index:var(--z-rifle); cursor:crosshair; }
.hero-pulse{ z-index:1; pointer-events:none; }

/* status ticker, top right like the reference */
.ticker{
  position:absolute; z-index:3;
  top:calc(var(--header-h) + 14px); left:48%; right:0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track{ display:flex; gap:calc(34px * var(--s)); width:max-content; animation:ticker 38s linear infinite; }
.ticker-track span{ display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:calc(15px * var(--s)); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.ticker-track i{ font-style:normal; font-family:var(--mono); font-weight:400; font-size:calc(9.5px * var(--s)); letter-spacing:.14em; color:var(--dim); padding:2px 6px; box-shadow:inset 0 0 0 1px var(--line); }
.ticker-track b{ font-weight:600; color:var(--accent); }
@keyframes ticker{ to{ transform:translateX(-50%); } }

.hero-layout{
  position:relative; z-index:2;
  flex:1;
  width:100%;
  padding:calc(var(--header-h) + 60px) var(--pad) calc(120px * var(--s));
  display:grid;
  grid-template-columns:clamp(280px, 24vw, calc(420px * var(--s))) 1fr clamp(220px, 17vw, calc(300px * var(--s)));
  align-items:center;
  pointer-events:none;           /* let the cursor reach the rifle behind */
}
.hero-layout a, .hero-layout button{ pointer-events:auto; }
.hero-left{ grid-column:1; }
.hero-panel{ grid-column:3; }

/* faded title */
.hero-title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(46px, 5vw, calc(80px * var(--s)));
  line-height:.9;
  text-transform:uppercase;
  color:rgba(233,231,225,.2);
  margin-bottom:calc(28px * var(--s));
}
.hero-title em{ font-style:normal; color:rgba(228,71,47,.5); }
.hero-log{ position:relative; padding-left:calc(38px * var(--s)); margin-bottom:calc(26px * var(--s)); }
.hero-log::before{ content:''; position:absolute; left:0; top:.7em; width:calc(26px * var(--s)); height:1px; background:var(--line-2); }
.log-tag{ font-family:var(--mono); font-size:calc(10.5px * var(--s)); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:6px; }
.hero-sub{ font-family:var(--mono); font-size:calc(12px * var(--s)); line-height:1.7; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); max-width:34ch; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* stats panel, right */
.hero-panel{ font-family:var(--mono); }
.panel-title{ font-size:calc(10.5px * var(--s)); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:6px; }
.panel-state{ display:flex; align-items:center; gap:8px; font-size:calc(12px * var(--s)); letter-spacing:.12em; text-transform:uppercase; margin-bottom:22px; }
.live{ width:7px; height:7px; background:var(--dim); flex:none; border-radius:50%; }
.hero-panel.is-active .live{ background:var(--text); box-shadow:0 0 0 3px rgba(233,231,225,.12); }
.panel-meter{ margin-bottom:calc(16px * var(--s)); }
.panel-meter-row{ display:flex; justify-content:space-between; font-size:calc(10.5px * var(--s)); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.panel-meter-row span:last-child{ color:var(--text); font-variant-numeric:tabular-nums; }
.panel-bar{ height:calc(2px * var(--s)); background:var(--line); }
.panel-bar i{ display:block; height:100%; width:0; background:var(--muted); transition:width 1.2s var(--ease); }
.panel-log{ margin-top:22px; display:grid; gap:4px; }
.panel-log li{ font-size:calc(10px * var(--s)); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.panel-log li::before{ content:'> '; }

/* bottom-left corner info */
.hero-corner{
  position:absolute; z-index:3;
  left:var(--pad); bottom:calc(32px * var(--s));
  display:flex; gap:calc(48px * var(--s));
}
.hero-corner span{ display:block; font-family:var(--mono); font-size:calc(11px * var(--s)); letter-spacing:.06em; color:var(--dim); }
.hero-corner a, .hero-corner b{ font-family:var(--mono); font-size:calc(13px * var(--s)); font-weight:500; color:var(--text); }
.hero-corner a:hover{ color:var(--accent); }

/* ==========================================================================
   DOCK (bottom right): waveform sound toggle + current section
   ========================================================================== */
.dock{
  position:fixed; right:var(--pad); bottom:calc(24px * var(--s));
  z-index:var(--z-header);
  display:flex; align-items:stretch; gap:8px;
}
.dock-sound{
  width:calc(52px * var(--s)); height:calc(44px * var(--s));
  display:grid; place-items:center;
  color:var(--muted);
  transition:color .2s var(--ease);
}
.dock-sound:hover{ color:var(--text); }
.wave{ width:calc(40px * var(--s)); height:calc(20px * var(--s)); }
.wave path{ stroke-dasharray:4 0; }
.dock-sound[aria-pressed="true"]{ color:var(--accent); }
.dock-sound[aria-pressed="true"] .wave path{ stroke-dasharray:60 30; animation:wave 1.4s linear infinite; }
.dock-sound.is-unavailable{ opacity:.45; }
@keyframes wave{ to{ stroke-dashoffset:-90; } }
.dock-section{
  min-width:calc(190px * var(--s)); height:calc(44px * var(--s));
  display:flex; align-items:center; gap:12px;
  padding:0 18px;
  background:rgba(20,21,18,.92);
  box-shadow:inset 0 0 0 1px var(--line-2);
  font-family:var(--display); font-weight:600; font-size:calc(15px * var(--s)); letter-spacing:.08em; text-transform:uppercase;
}
.dock-section i{ font-style:normal; font-family:var(--mono); font-weight:400; font-size:calc(11px * var(--s)); color:var(--dim); }

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* red line that trails the crosshair and fades */
.cursor-trail{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:calc(var(--z-toast) + 1); }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{ padding-block:clamp(80px, 12vw, calc(150px * var(--s))); position:relative; }
.section-title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(40px, 6vw, calc(84px * var(--s)));
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:-.005em;
  margin-bottom:22px;
}
.section-sub{ max-width:56ch; color:var(--muted); font-size:calc(17px * var(--s)); }

/* reveal on scroll (IntersectionObserver adds .is-in) */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* ---- Access: two big offer panels ---- */
.access{ border-top:1px solid var(--line); }
.access-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px; }
.offer{
  display:grid; grid-template-rows:auto 1fr;
  background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .3s var(--ease);
}
.offer:nth-child(2){ transition-delay:.08s; }
.offer:hover{ box-shadow:inset 0 0 0 1px var(--line-2); }
.offer-media{ position:relative; aspect-ratio:16/8; overflow:hidden; }
.offer-media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.15) brightness(.7);
  transition:transform 1.2s var(--ease), filter .6s var(--ease);
}
.offer-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, var(--panel) 0%, transparent 60%);
}
.offer:hover .offer-media img{ transform:scale(1.04); filter:grayscale(.6) contrast(1.15) brightness(.8); }
.offer-body{ padding:calc(28px * var(--s)); display:flex; flex-direction:column; }
.offer h3{ font-family:var(--display); font-weight:600; font-size:calc(32px * var(--s)); text-transform:uppercase; line-height:1; margin-bottom:12px; }
.offer p{ color:var(--muted); max-width:42ch; margin-bottom:20px; }
.offer-specs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.offer-specs li{
  font-family:var(--mono); font-size:calc(11px * var(--s)); letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); padding:5px 10px; box-shadow:inset 0 0 0 1px var(--line);
}
.offer-foot{ margin-top:auto; display:flex; align-items:end; justify-content:space-between; gap:16px; padding-top:20px; border-top:1px solid var(--line); }
.price b{ display:block; font-family:var(--display); font-weight:600; font-size:calc(44px * var(--s)); line-height:1; }
.price span{ font-family:var(--mono); font-size:calc(11px * var(--s)); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }

/* ---- Armory ---- */
.armory{ background:var(--bg-2); border-block:1px solid var(--line); }
.armory-block{ margin-top:calc(64px * var(--s)); }
.block-title{
  font-family:var(--mono); font-weight:500; font-size:calc(13px * var(--s)); letter-spacing:.16em; text-transform:uppercase;
  color:var(--text);
  display:flex; align-items:center; gap:14px;
  margin-bottom:20px;
}
.block-title::after{ content:''; flex:1; height:1px; background:var(--line); }

/* Base Decor: bento, vehicle tile spans 2 columns */
.decor-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:calc(16px * var(--s)); }
.tile{
  position:relative;
  display:flex; flex-direction:column;
  min-height:calc(240px * var(--s));
  padding:calc(24px * var(--s));
  background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);
  overflow:hidden;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.tile:hover{ box-shadow:inset 0 0 0 1px var(--line-2); transform:translateY(-2px); }
.tile.featured{
  grid-column:span 2;
  background:
    repeating-linear-gradient(-45deg, rgba(233,231,225,.035) 0 2px, transparent 2px 14px),
    radial-gradient(70% 90% at 85% 15%, var(--accent-soft), transparent 70%),
    var(--panel);
}
.tile-icon{ width:calc(52px * var(--s)); height:calc(52px * var(--s)); display:grid; place-items:center; color:var(--accent); box-shadow:inset 0 0 0 1px var(--line-2); margin-bottom:auto; }
.tile-icon svg{ width:calc(26px * var(--s)); height:calc(26px * var(--s)); }
.tile.featured .tile-icon{ width:calc(68px * var(--s)); height:calc(68px * var(--s)); }
.tile.featured .tile-icon svg{ width:calc(36px * var(--s)); height:calc(36px * var(--s)); }
.tile h4{ font-family:var(--display); font-weight:600; font-size:calc(24px * var(--s)); text-transform:uppercase; line-height:1.05; margin:28px 0 8px; }
.tile.featured h4{ font-size:calc(38px * var(--s)); }
.tile p{ color:var(--muted); font-size:calc(15px * var(--s)); margin-bottom:22px; max-width:38ch; }
.tile-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tile-price{ font-family:var(--mono); font-size:calc(20px * var(--s)); font-weight:500; }

/* Gear Skins: loadout rows */
.loadout{ display:grid; gap:10px; }
.row{
  display:grid;
  grid-template-columns:calc(56px * var(--s)) minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items:center;
  gap:calc(24px * var(--s));
  padding:calc(18px * var(--s)) calc(22px * var(--s));
  background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.row:hover{ box-shadow:inset 0 0 0 1px var(--line-2), inset 3px 0 0 var(--accent); background:var(--panel-2); }
.row .tile-icon{ width:calc(48px * var(--s)); height:calc(48px * var(--s)); margin:0; }
.row .tile-icon svg{ width:calc(24px * var(--s)); height:calc(24px * var(--s)); }
.row h4{ font-family:var(--display); font-weight:600; font-size:calc(22px * var(--s)); text-transform:uppercase; line-height:1.1; }
.row p{ color:var(--muted); font-size:calc(14px * var(--s)); margin-top:2px; }
.row .chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chips li{ font-family:var(--mono); font-size:calc(10.5px * var(--s)); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:3px 8px; box-shadow:inset 0 0 0 1px var(--line); }
.row .badge{
  font-family:var(--mono); font-size:calc(10.5px * var(--s)); letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); padding:3px 8px; box-shadow:inset 0 0 0 1px rgba(228,71,47,.5);
  justify-self:start;
}
.row-buy{ display:flex; align-items:center; gap:22px; }
.row.featured{ background:linear-gradient(90deg, var(--accent-soft), transparent 55%), var(--panel); }

/* ---- Process track ---- */
.process{ border-bottom:1px solid var(--line); }
.process-track{
  position:relative;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:40px;
  margin-top:48px; padding-top:40px;
}
.process-track::before{
  content:''; position:absolute; top:7px; left:0; right:0; height:1px;
  background:var(--line-2);
  transform-origin:left; transform:scaleX(0);
  transition:transform 1.4s var(--ease);
}
.process-track.is-in::before{ transform:scaleX(1); }
.process-track li{ position:relative; }
.node{ position:absolute; top:-40px; left:0; width:15px; height:15px; background:var(--bg); box-shadow:inset 0 0 0 1px var(--accent); }
.node::after{ content:''; position:absolute; inset:4px; background:var(--accent); }
.process-track h3{ font-family:var(--display); font-weight:600; font-size:calc(28px * var(--s)); text-transform:uppercase; margin-bottom:8px; }
.process-track p{ color:var(--muted); max-width:34ch; }

/* ---- Intel band ---- */
.intel-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.intel-grid .section-sub{ margin-bottom:30px; }
.intel-count{ display:grid; justify-items:end; text-align:right; }
.intel-num{
  font-family:var(--display); font-weight:700;
  font-size:clamp(120px, 18vw, calc(260px * var(--s))); line-height:.8;
  font-variant-numeric:tabular-nums;
}
.intel-of{ font-family:var(--mono); font-size:calc(13px * var(--s)); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:18px; }
.intel-of b{ color:var(--text); font-weight:500; }
.intel-count.is-standby .intel-num{ font-size:clamp(56px, 7vw, calc(96px * var(--s))); color:var(--dim); letter-spacing:.06em; }
.intel-bar{ width:min(420px, 100%); height:2px; background:var(--line); margin-top:18px; }
.intel-bar i{ display:block; height:100%; width:0; background:var(--accent); transition:width 1.2s var(--ease); }

/* ---- FAQ ---- */
.faq{ border-top:1px solid var(--line); }
.faq-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:start; }
.faq-list details{ border-top:1px solid var(--line); }
.faq-list details:last-child{ border-bottom:1px solid var(--line); }
.faq-list summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:22px 0;
  font-family:var(--display); font-weight:600; font-size:calc(21px * var(--s)); text-transform:uppercase;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:'+'; font-family:var(--mono); font-size:calc(20px * var(--s)); color:var(--accent); transition:transform .3s var(--ease); }
.faq-list details[open] summary::after{ transform:rotate(45deg); }
.faq-list details p{ color:var(--muted); padding-bottom:22px; max-width:60ch; }

/* ---- Footer ---- */
.site-footer{ border-top:1px solid var(--line); padding-block:36px; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.footer-brand{ display:flex; align-items:center; gap:14px; color:var(--dim); font-size:calc(13px * var(--s)); }
.footer-brand img{ width:34px; height:auto; }
.footer-links{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a{ font-family:var(--mono); font-size:calc(11px * var(--s)); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.footer-links a:hover{ color:var(--text); }

/* ==========================================================================
   CART DRAWER, SETTINGS, TOAST
   ========================================================================== */
.scrim{ position:fixed; inset:0; background:rgba(5,6,5,.6); z-index:var(--z-drawer); }
.drawer{
  position:fixed; top:0; right:0; bottom:0;
  width:min(420px, 100%);
  z-index:calc(var(--z-drawer) + 1);
  background:var(--panel);
  box-shadow:-1px 0 0 var(--line-2);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .45s var(--ease);
}
.drawer.is-open{ transform:none; }
.drawer-head, .config-head{ display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--line); }
.drawer-head h2, .config-head h2{ font-family:var(--mono); font-weight:500; font-size:calc(13px * var(--s)); letter-spacing:.16em; text-transform:uppercase; }
.drawer-items{ flex:1; overflow-y:auto; padding:8px 24px; }
.drawer-empty{ color:var(--muted); padding:40px 0; text-align:center; }
.line{ display:grid; grid-template-columns:40px 1fr auto; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.line .tile-icon{ width:40px; height:40px; margin:0; }
.line .tile-icon svg{ width:20px; height:20px; }
.line-name{ font-family:var(--display); font-weight:600; text-transform:uppercase; line-height:1.1; }
.line-meta{ font-family:var(--mono); font-size:calc(11px * var(--s)); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.line-right{ text-align:right; }
.line-price{ font-family:var(--mono); }
.line-remove{ font-family:var(--mono); font-size:calc(11px * var(--s)); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-top:4px; }
.line-remove:hover{ color:var(--accent); }
.drawer-foot{ padding:20px 24px 24px; border-top:1px solid var(--line); }
.drawer-total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; font-family:var(--mono); font-size:calc(12px * var(--s)); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.drawer-total b{ font-family:var(--display); font-size:calc(30px * var(--s)); color:var(--text); letter-spacing:0; }
.drawer-note{ font-size:calc(12.5px * var(--s)); color:var(--dim); margin-top:12px; text-align:center; }

.config{
  position:fixed; top:calc(var(--header-h) + 8px); right:var(--pad);
  width:min(320px, calc(100% - 2 * var(--pad)));
  z-index:calc(var(--z-drawer) + 2);
  background:var(--panel);
  box-shadow:0 0 0 1px var(--line-2), 0 24px 60px rgba(0,0,0,.5);
}
.config-row{ display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:calc(12px * var(--s)); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.seg{ display:flex; box-shadow:inset 0 0 0 1px var(--line-2); }
.seg button{ padding:7px 14px; font-family:var(--mono); font-size:calc(11px * var(--s)); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.seg button[aria-pressed="true"]{ background:var(--text); color:var(--bg); }
.config-note{ padding:14px 24px 18px; font-size:calc(12.5px * var(--s)); color:var(--dim); }

.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  z-index:var(--z-toast);
  background:var(--text); color:var(--bg);
  font-family:var(--mono); font-size:calc(12px * var(--s)); letter-spacing:.1em; text-transform:uppercase;
  padding:12px 18px;
  animation:toast-in .35s var(--ease);
}
@keyframes toast-in{ from{ opacity:0; transform:translate(-50%, 8px); } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px){
  .nav{ display:none; }
  .header-tools{ margin-left:auto; }
  .hero-layout{ grid-template-columns:minmax(240px, 300px) 1fr minmax(200px, 230px); }
  .row{ grid-template-columns:48px minmax(0,1fr) auto; }
  .row .row-extra{ grid-column:2 / 3; grid-row:2; }
  .row .row-buy{ grid-column:3; grid-row:1 / 3; flex-direction:column; align-items:flex-end; gap:10px; }
}
@media (max-width: 768px){
  :root{ --header-h:60px; }
  .tool-label{ display:none; }
  .brand{ font-size:17px; gap:10px; }
  .brand img{ width:34px; }
  .hero-layout{ grid-template-columns:1fr; padding-top:calc(var(--header-h) + 38vh); padding-bottom:150px; gap:36px; align-items:start; }
  .hero-left, .hero-panel{ grid-column:1; }
  .ticker{ left:0; top:calc(var(--header-h) + 6px); }
  .hero-corner{ gap:28px; bottom:84px; }
  .dock-section{ display:none; }
  .dock{ right:14px; bottom:14px; }
  .dock-sound{ background:rgba(20,21,18,.92); box-shadow:inset 0 0 0 1px var(--line-2); }
  .access-grid, .decor-grid, .intel-grid, .faq-grid, .process-track{ grid-template-columns:1fr; }
  .tile.featured{ grid-column:auto; }
  .intel-count{ justify-items:start; text-align:left; }
  .process-track{ gap:44px; padding-top:0; padding-left:34px; }
  .process-track::before{ top:0; bottom:0; left:7px; right:auto; width:1px; height:auto; transform:scaleY(0); transform-origin:top; }
  .process-track.is-in::before{ transform:scaleY(1); }
  .node{ top:4px; left:-34px; }
  .row{ grid-template-columns:44px minmax(0,1fr); gap:14px 16px; }
  .row .row-extra{ grid-column:2; grid-row:auto; }
  .row .row-buy{ grid-column:1 / -1; grid-row:auto; flex-direction:row; justify-content:space-between; align-items:center; }
  .offer-foot{ flex-wrap:wrap; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ==========================================================================
   BIG SCREENS (1440p, 4K): scale everything up instead of leaving a
   narrow strip of small text in the middle of the screen.
   ========================================================================== */
@media (min-width: 1700px){ :root{ --s:1.15; } }
@media (min-width: 2200px){ :root{ --s:1.35; } }
@media (min-width: 2800px){ :root{ --s:1.65; } }
@media (min-width: 3400px){ :root{ --s:1.95; } }

/* ==========================================================================
   SHARED SHELL ADDITIONS (header variants, mobile menu, footer)
   ========================================================================== */
.site-header.is-solid{ background:rgba(11,12,10,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line); }
.nav a[aria-current="page"]{ color:var(--text); }
.nav a[aria-current="page"] i{ color:var(--accent); }
.tool-discord svg{ width:calc(17px * var(--s)); height:calc(17px * var(--s)); }
.menu-btn{ display:none; }
body.menu-open{ overflow:hidden; }
.mnav{
  position:fixed; inset:0; z-index:calc(var(--z-drawer) + 3);
  background:rgba(11,12,10,.97);
  display:flex; flex-direction:column; gap:28px;
  padding:18px var(--pad) 32px;
  overflow-y:auto;
}
.mnav-head{ display:flex; justify-content:space-between; align-items:center; }
.mnav-head .hud-label{ margin:0; }
.mnav-links{ display:grid; border-top:1px solid var(--line); }
.mnav-links a{
  display:flex; align-items:baseline; gap:14px;
  padding:16px 0; border-bottom:1px solid var(--line);
  font-family:var(--display); font-weight:600; font-size:28px; text-transform:uppercase; line-height:1;
}
.mnav-links a i{ font-style:normal; font-family:var(--mono); font-weight:400; font-size:12px; color:var(--accent); }
.mnav .btn svg{ width:18px; height:18px; }

.site-footer{ padding-block:calc(56px * var(--s)) calc(32px * var(--s)); background:var(--bg-2); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:calc(40px * var(--s)); padding-bottom:calc(40px * var(--s)); }
.footer-about p{ color:var(--dim); font-size:calc(14px * var(--s)); max-width:44ch; margin-top:16px; }
.footer-col{ display:grid; align-content:start; gap:10px; }
.footer-col h4{ font-family:var(--mono); font-weight:500; font-size:calc(11px * var(--s)); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:6px; }
.footer-col a{ color:var(--muted); font-size:calc(14.5px * var(--s)); transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--text); }
.site-footer .footer-row{ border-top:1px solid var(--line); padding-top:calc(24px * var(--s)); }
.footer-legal{ color:var(--dim); font-size:calc(12.5px * var(--s)); max-width:70ch; }
.footer-admin{ opacity:.55; }

/* cart drawer extras */
.drawer-empty a{ color:var(--accent); font-family:var(--mono); font-size:calc(12px * var(--s)); letter-spacing:.1em; text-transform:uppercase; display:inline-block; margin-top:12px; }
.line-gift{ display:flex; align-items:center; gap:6px; margin-top:4px; font-family:var(--mono); font-size:calc(10.5px * var(--s)); letter-spacing:.06em; color:var(--accent); word-break:break-all; }
.line-gift svg{ width:13px; height:13px; flex:none; }
.btn.is-disabled{ opacity:.45; }

/* ==========================================================================
   HOME ADDITIONS
   ========================================================================== */
.offer-list{ display:grid; gap:8px; margin-bottom:26px; }
.offer-list li{ position:relative; padding-left:22px; color:var(--muted); font-size:calc(15px * var(--s)); }
.offer-list li::before{ content:''; position:absolute; left:0; top:.62em; width:10px; height:1px; background:var(--accent); }
.offer-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.sub-strip{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:16px; padding:14px 16px;
  background:var(--accent-soft); box-shadow:inset 0 0 0 1px rgba(228,71,47,.4);
}
.sub-strip b{ display:block; font-family:var(--display); font-weight:600; font-size:calc(18px * var(--s)); text-transform:uppercase; line-height:1.1; }
.sub-strip span{ font-family:var(--mono); font-size:calc(11px * var(--s)); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.sub-strip span span{ color:var(--text); }
.sub-panel .sub-state{ font-family:var(--display); font-weight:600; font-size:calc(24px * var(--s)); text-transform:uppercase; line-height:1.1; margin-bottom:6px; }
.sub-panel p{ color:var(--muted); font-size:calc(14px * var(--s)); margin-bottom:16px; }
.process-cta{ margin-top:calc(44px * var(--s)); }
.connect-box{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:26px; padding:14px 16px;
  box-shadow:inset 0 0 0 1px var(--line);
  max-width:520px;
}
.connect-label{ font-family:var(--mono); font-size:calc(11px * var(--s)); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.connect-box code{ font-family:var(--mono); font-size:calc(16px * var(--s)); color:var(--text); flex:1; }
.cta{ border-top:1px solid var(--line); background:radial-gradient(60% 120% at 85% 50%, var(--accent-soft), transparent 70%); }
.cta-row{ display:grid; grid-template-columns:1.3fr auto; gap:40px; align-items:end; }

/* ==========================================================================
   FORMS, MODAL
   ========================================================================== */
.field{ margin-bottom:20px; }
.field label, .field .label{
  display:block; margin-bottom:8px;
  font-family:var(--mono); font-size:calc(11px * var(--s)); letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.field label small{ text-transform:none; letter-spacing:0; color:var(--dim); font-size:inherit; }
.field input, .field select, .field textarea{
  width:100%; min-height:calc(48px * var(--s));
  padding:0 14px;
  background:var(--bg);
  border:0; border-radius:0;
  box-shadow:inset 0 0 0 1px var(--line-2);
  color:var(--text); font:inherit; font-family:var(--mono); font-size:calc(14px * var(--s));
  transition:box-shadow .2s var(--ease);
}
.field select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(-45deg, transparent 50%, var(--muted) 50%); background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px; }
.field input::placeholder{ color:var(--dim); }
.field input:focus, .field select:focus{ outline:none; box-shadow:inset 0 0 0 1px var(--accent); }
.field input.invalid{ box-shadow:inset 0 0 0 1px var(--accent), inset 3px 0 0 var(--accent); }
.field-error{ display:none; margin-top:8px; color:#ff7a66; font-size:calc(13px * var(--s)); }
.field-error.show{ display:block; }
.hint{ margin-top:8px; color:var(--dim); font-size:calc(13px * var(--s)); }
.hint a, .note a, .prose a{ color:var(--text); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip, .radio-chip{
  display:inline-flex; align-items:center; min-height:calc(38px * var(--s)); padding:0 14px;
  font-family:var(--mono); font-size:calc(12px * var(--s)); letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); box-shadow:inset 0 0 0 1px var(--line-2);
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.chip.is-selected, .radio-chip.selected{ background:var(--text); color:var(--bg); box-shadow:none; }
.radio-chip:hover{ color:var(--text); }
.radio-chip.selected:hover{ color:var(--bg); }

.modal{ position:fixed; inset:0; z-index:calc(var(--z-drawer) + 4); background:rgba(5,6,5,.72); display:grid; place-items:center; padding:var(--pad); }
.modal-box{ width:min(480px, 100%); background:var(--panel); box-shadow:0 0 0 1px var(--line-2), 0 30px 80px rgba(0,0,0,.6); padding:calc(28px * var(--s)); animation:toast-in .35s var(--ease); }
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.modal-head h2{ font-family:var(--display); font-weight:600; font-size:calc(28px * var(--s)); text-transform:uppercase; }
.modal-sub{ color:var(--muted); margin-bottom:24px; }

/* note boxes (custom items, priority) */
.note{
  display:flex; gap:12px; align-items:flex-start;
  margin-top:18px; padding:14px 16px;
  box-shadow:inset 0 0 0 1px var(--line-2), inset 3px 0 0 var(--muted);
  background:rgba(233,231,225,.03);
  color:var(--muted); font-size:calc(14px * var(--s)); line-height:1.6;
}
.note svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--muted); }
.note b{ color:var(--text); font-weight:600; }
.note-accent{ box-shadow:inset 0 0 0 1px rgba(228,71,47,.45), inset 3px 0 0 var(--accent); background:var(--accent-soft); }
.note-accent svg{ color:var(--accent); }

/* ==========================================================================
   INNER PAGES
   ========================================================================== */
.page{ padding-top:var(--header-h); min-height:70vh; }
.page-head{ padding-block:clamp(48px, 7vw, calc(96px * var(--s))) clamp(28px, 4vw, calc(48px * var(--s))); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.page-head::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(233,231,225,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(233,231,225,.035) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent);
          mask-image:linear-gradient(to bottom, #000, transparent);
}
.page-head .wrap{ position:relative; }
.crumbs{ font-family:var(--mono); font-size:calc(11px * var(--s)); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:16px; }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--text); }
.crumbs span{ color:var(--accent); margin:0 .5em; }
.page-title{ font-family:var(--display); font-weight:700; font-size:clamp(44px, 7vw, calc(96px * var(--s))); line-height:.92; text-transform:uppercase; }
.page-sub{ color:var(--muted); max-width:60ch; margin-top:16px; font-size:calc(17px * var(--s)); }
.page-body{ padding-block:clamp(40px, 6vw, calc(80px * var(--s))) clamp(80px, 10vw, calc(140px * var(--s))); }
.wrap.narrow > *{ max-width:calc(900px * var(--s)); }

.panel{ background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); padding:calc(28px * var(--s)); }
.panel + .panel{ margin-top:20px; }
.panel-h{ font-family:var(--mono); font-weight:500; font-size:calc(12px * var(--s)); letter-spacing:.16em; text-transform:uppercase; color:var(--text); display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.panel-h::after{ content:''; flex:1; height:1px; background:var(--line); }

/* checkout */
.checkout-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:20px; align-items:start; }
.checkout-grid .panel:last-child{ position:sticky; top:calc(var(--header-h) + 20px); }
.summary-line{ display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.summary-line .name{ font-family:var(--display); font-weight:600; text-transform:uppercase; line-height:1.15; }
.summary-line .sub{ display:block; font-family:var(--mono); font-weight:400; font-size:calc(11px * var(--s)); letter-spacing:.06em; color:var(--dim); margin-top:4px; text-transform:uppercase; word-break:break-all; }
.summary-line b{ font-family:var(--mono); font-weight:500; white-space:nowrap; }
.summary-total{ display:flex; justify-content:space-between; align-items:baseline; padding-top:18px; font-family:var(--mono); font-size:calc(12px * var(--s)); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.summary-total b{ font-family:var(--display); font-size:calc(36px * var(--s)); color:var(--text); letter-spacing:0; }
.pay-note{ text-align:center; color:var(--dim); font-size:calc(13px * var(--s)); margin-top:14px; }
.btn.is-loading{ opacity:.6; pointer-events:none; }
.btn + .btn-block{ margin-top:10px; }

.empty-state{ text-align:center; padding:calc(56px * var(--s)) calc(28px * var(--s)); }
.empty-state svg{ width:40px; height:40px; color:var(--dim); margin:0 auto 18px; }
.empty-state p{ color:var(--muted); margin-bottom:22px; }

/* checkout success */
.confirm-box{ text-align:center; padding:calc(48px * var(--s)) calc(32px * var(--s)); }
.confirm-box h2{ font-family:var(--display); font-weight:700; font-size:calc(40px * var(--s)); text-transform:uppercase; line-height:1; margin-bottom:14px; }
.confirm-box > p{ color:var(--muted); max-width:46ch; margin:0 auto; }
.check-mark{ width:calc(64px * var(--s)); height:calc(64px * var(--s)); margin:0 auto 24px; display:grid; place-items:center; color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.check-mark svg{ width:50%; height:50%; }
.order-id{ display:inline-block; margin-top:22px; font-family:var(--mono); font-size:calc(15px * var(--s)); letter-spacing:.1em; }
.order-id:not(:empty){ padding:10px 16px; box-shadow:inset 0 0 0 1px var(--line-2); }
.confirm-box .note{ text-align:left; }
.confirm-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.loader{ width:36px; height:2px; margin:24px auto 0; background:var(--line); position:relative; overflow:hidden; }
.loader::after{ content:''; position:absolute; inset:0; width:40%; background:var(--accent); animation:load 1.1s var(--ease) infinite; }
@keyframes load{ from{ transform:translateX(-100%); } to{ transform:translateX(260%); } }

/* profile */
.stat-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); box-shadow:0 0 0 1px var(--line); margin-bottom:20px; }
.stat-card{ background:var(--panel); padding:calc(22px * var(--s)); }
.stat-card .v{ font-family:var(--display); font-weight:600; font-size:calc(38px * var(--s)); line-height:1; font-variant-numeric:tabular-nums; }
.stat-card .k{ font-family:var(--mono); font-size:calc(11px * var(--s)); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:10px; }
.profile-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:20px; align-items:start; }
.profile-card{ text-align:left; }
.profile-avatar{ width:calc(64px * var(--s)); height:calc(64px * var(--s)); display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); box-shadow:inset 0 0 0 1px rgba(228,71,47,.5); font-family:var(--display); font-weight:700; font-size:calc(24px * var(--s)); margin-bottom:18px; }
.profile-card h3{ font-family:var(--display); font-weight:600; font-size:calc(30px * var(--s)); text-transform:uppercase; line-height:1; }
.profile-card .sub{ font-family:var(--mono); font-size:calc(11px * var(--s)); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:8px 0 18px; }
.profile-field{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--line); }
.profile-field .k{ font-family:var(--mono); font-size:calc(11px * var(--s)); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.profile-field .v{ font-family:var(--mono); font-size:calc(13px * var(--s)); text-align:right; word-break:break-all; }
.profile-card .btn{ margin-top:18px; }
.kd-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line); box-shadow:0 0 0 1px var(--line); margin-bottom:18px; }
.kd-grid .stat-card .v{ font-size:calc(30px * var(--s)); }
.history-h{ font-family:var(--display); font-weight:600; font-size:calc(28px * var(--s)); text-transform:uppercase; margin-bottom:18px; }
.order-history{ display:grid; gap:14px; }
.order-card{ background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); padding:calc(20px * var(--s)) calc(22px * var(--s)); }
.order-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.order-card-head .oid{ font-family:var(--mono); font-size:calc(14px * var(--s)); letter-spacing:.06em; }
.order-card-head .odate{ font-family:var(--mono); font-size:calc(11px * var(--s)); color:var(--dim); letter-spacing:.08em; text-transform:uppercase; margin-top:4px; }
.cart-item-price{ font-family:var(--mono); font-size:calc(16px * var(--s)); }
.order-line{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0 0; }
.order-line .n{ font-family:var(--display); font-weight:600; text-transform:uppercase; line-height:1.15; }
.order-line .n small{ display:block; font-family:var(--mono); font-weight:400; font-size:calc(11px * var(--s)); letter-spacing:.06em; color:var(--dim); margin-top:3px; word-break:break-all; }
.status-badge{ flex:none; font-family:var(--mono); font-size:calc(10.5px * var(--s)); letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--muted); white-space:nowrap; }
.status-badge.active{ color:var(--text); box-shadow:inset 0 0 0 1px rgba(233,231,225,.45); }
.status-badge.active::before{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:#7bd389; margin-right:7px; vertical-align:1px; }
.status-badge.expired{ color:var(--dim); }
.status-badge.permanent{ color:var(--accent); box-shadow:inset 0 0 0 1px rgba(228,71,47,.5); }

/* leaderboard */
.lb-intro{ display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:24px; }
.lb-tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.lb-note{ color:var(--dim); font-size:calc(13.5px * var(--s)); max-width:52ch; }
.lb-empty{ padding:calc(56px * var(--s)) 24px; text-align:center; color:var(--muted); line-height:1.7; }
.lb-empty b{ color:var(--text); font-family:var(--display); font-weight:600; font-size:calc(22px * var(--s)); text-transform:uppercase; }
.lb-panel{ background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); }
.lb-head-row, .lb-row{ display:grid; grid-template-columns:calc(70px * var(--s)) minmax(0, 1fr) calc(90px * var(--s)) calc(90px * var(--s)) calc(140px * var(--s)); align-items:center; gap:12px; padding:0 calc(20px * var(--s)); }
.lb-head-row{ min-height:calc(46px * var(--s)); font-family:var(--mono); font-size:calc(10.5px * var(--s)); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); border-bottom:1px solid var(--line); }
.lb-row{ min-height:calc(68px * var(--s)); border-bottom:1px solid var(--line); transition:background-color .2s var(--ease); }
.lb-row:last-child{ border-bottom:0; }
.lb-row:hover{ background:var(--panel-2); }
.lb-rank{ text-align:center; font-family:var(--mono); color:var(--muted); }
.lb-medal{ display:inline-grid; place-items:center; width:30px; height:30px; font-family:var(--display); font-weight:700; color:var(--on-accent); background:var(--accent); }
.lb-row.silver .lb-medal{ background:var(--text); color:var(--bg); }
.lb-row.bronze .lb-medal{ background:var(--muted); color:var(--bg); }
.lb-row.gold{ background:linear-gradient(90deg, var(--accent-soft), transparent 60%); }
.lb-player{ display:flex; align-items:center; gap:14px; min-width:0; }
.lb-player > span:last-child{ min-width:0; }
.lb-avatar{ flex:none; width:36px; height:36px; display:grid; place-items:center; font-family:var(--display); font-weight:700; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--muted); }
.lb-name{ display:block; font-family:var(--display); font-weight:600; font-size:calc(18px * var(--s)); text-transform:uppercase; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-steamid{ display:block; font-family:var(--mono); font-size:calc(11px * var(--s)); color:var(--dim); }
.lb-stat{ text-align:center; font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--muted); }
.lb-highlight{ text-align:right; color:var(--text); font-size:calc(18px * var(--s)); padding-right:8px; }

/* legal text */
.prose{ background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); padding:clamp(24px, 4vw, calc(48px * var(--s))); }
.prose .updated{ font-family:var(--mono); font-size:calc(11px * var(--s)); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:28px; }
.prose h3{ font-family:var(--display); font-weight:600; font-size:calc(22px * var(--s)); text-transform:uppercase; margin:36px 0 12px; padding-top:28px; border-top:1px solid var(--line); }
.prose h3:first-of-type{ margin-top:0; padding-top:0; border-top:0; }
.prose p, .prose li{ color:var(--muted); max-width:72ch; }
.prose p + p{ margin-top:12px; }
.prose ul{ list-style:square; padding-left:22px; margin-top:10px; }
.prose li + li{ margin-top:6px; }
.prose b, .prose strong{ color:var(--text); }
.prose code, .warning code, .panel code{ font-family:var(--mono); font-size:.9em; background:var(--bg); padding:1px 6px; box-shadow:inset 0 0 0 1px var(--line); }

/* admin */
.warning{ display:flex; gap:16px; align-items:flex-start; margin-bottom:20px; }
.warning svg{ width:24px; height:24px; flex:none; color:var(--accent); }
.warning h4{ font-family:var(--display); font-weight:600; font-size:calc(20px * var(--s)); text-transform:uppercase; margin-bottom:8px; }
.warning p{ color:var(--muted); font-size:calc(14.5px * var(--s)); }
.warning p + p{ margin-top:10px; }
.admin-status-pill{ font-family:var(--mono); font-size:calc(10.5px * var(--s)); letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; color:var(--text); box-shadow:inset 0 0 0 1px rgba(233,231,225,.4); }
.admin-status-pill.off{ color:var(--dim); box-shadow:inset 0 0 0 1px var(--line-2); }
.panel p.muted{ color:var(--muted); font-size:calc(14.5px * var(--s)); }
.admin-unlock .muted{ margin-bottom:18px; }
.stat-card .sub{ font-family:var(--mono); font-size:calc(11px * var(--s)); color:var(--muted); margin-top:6px; }
.vis-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:6px 0 14px; }
.vis-h{ font-family:var(--mono); font-weight:500; font-size:calc(11px * var(--s)); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:12px; }
.vis-head .vis-h{ margin-bottom:0; }
.vis-range{ display:flex; gap:6px; }
.vis-range .radio-chip{ min-height:calc(30px * var(--s)); padding:0 10px; }
.vis-chart{ margin-bottom:28px; }
.vis-bars{ display:grid; grid-template-columns:repeat(var(--n), minmax(0, 1fr)); gap:2px; align-items:end; height:calc(150px * var(--s)); padding:0 1px; box-shadow:inset 0 -1px 0 var(--line-2); }
.vis-bar{ height:100%; display:flex; align-items:flex-end; cursor:default; }
.vis-bar i{ display:block; width:100%; background:var(--accent); opacity:.85; transition:opacity .15s; }
.vis-bar:hover i{ opacity:1; background:var(--text); }
.vis-axis{ display:flex; justify-content:space-between; margin-top:8px; font-family:var(--mono); font-size:calc(10.5px * var(--s)); color:var(--dim); letter-spacing:.06em; }
.vis-cols{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.vis-list{ display:grid; gap:4px; }
.vis-row{ position:relative; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 10px; font-size:calc(14px * var(--s)); }
.vis-fill{ position:absolute; inset:0 auto 0 0; background:rgba(233,231,225,.07); box-shadow:inset 2px 0 0 var(--accent); pointer-events:none; }
.vis-name{ position:relative; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vis-n{ position:relative; font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--text); white-space:nowrap; }
.vis-n em{ font-style:normal; color:var(--dim); margin-left:8px; }
.vis-empty{ color:var(--dim); font-size:calc(14px * var(--s)); }
.vis-foot{ margin-top:22px; color:var(--dim); font-size:calc(13px * var(--s)); }
.vis-actions{ display:flex; gap:10px; margin-top:16px; }
@media (max-width: 640px){ .vis-cols{ grid-template-columns:1fr; } .vis-bars{ gap:1px; } }

/* ==========================================================================
   RESPONSIVE (shell + inner pages)
   ========================================================================== */
@media (max-width: 1024px){
  .menu-btn{ display:inline-flex; }
  .tool-discord .tool-label{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; }
  .footer-about{ grid-column:1 / -1; }
  .checkout-grid, .profile-grid{ grid-template-columns:1fr; }
  .checkout-grid .panel:last-child{ position:static; }
  .cta-row{ grid-template-columns:1fr; align-items:start; }
}
@media (max-width: 768px){
  .tool-discord{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .offer-foot{ align-items:stretch; flex-direction:column; }
  .offer-actions{ justify-content:stretch; }
  .offer-actions .btn{ flex:1 1 auto; }
  .lb-head-row, .lb-row{ grid-template-columns:44px minmax(0, 1fr) 54px 80px; padding:0 12px; gap:8px; }
  .lb-deaths-col, .lb-row .lb-stat:nth-of-type(4){ display:none; }
  .lb-avatar{ display:none; }
  .order-line{ flex-direction:column; align-items:flex-start; }
  .confirm-actions .btn{ flex:1 1 100%; }
}