/* One theme for every page on the site: fonts, tokens, page chrome (header, footer, buttons) and
   the CRT layer. Page sheets (styles.css for the homepage, account/account.css for the account,
   legal and 404 pages) only lay out their own content on top of this. */
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:GlitchGoblin;src:url('/assets/fonts/GlitchGoblin.ttf') format('truetype');font-weight:400;font-display:swap}
/* Beon is unicase and has no U+2197 arrow: subheads and numbers only, never running text or CTAs. */
@font-face{font-family:Beon;src:url('/assets/fonts/Beon-Medium.woff') format('woff');font-weight:400;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#08070c;
  --bg-deep:#050407;
  --panel:#100c18;
  /* Every piece of text is pure white. Hierarchy comes from size, face and glow, not from greys. */
  --text:#fff;
  --accent:#b46cff;
  --accent-strong:#9c40ec;
  --line:rgba(221,199,255,.2);
  --line-bright:rgba(200,160,255,.5);
  --ok:#71e6a8;
  --warn:#f3c969;
  --bad:#ff7195;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:GlitchGoblin,var(--sans);
  --subhead:Beon,var(--display);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Phosphor: a tight white core, a violet bloom, and red/cyan fringes for the misconverged beam. */
  --glow:0 0 1px rgba(255,255,255,.85),0 0 7px rgba(214,170,255,.45),0 0 22px rgba(160,90,255,.28);
  --glow-soft:0 0 5px rgba(255,255,255,.3);
  --fringe:-.06em 0 rgba(255,45,95,.5),.06em 0 rgba(70,210,255,.5);
}

*{box-sizing:border-box}
/* Sale-state and reveal toggles use the hidden attribute; component display:flex/grid rules would
   otherwise beat the browser's own [hidden] rule and show both states at once. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:var(--bg);color:var(--text);font:400 18px/1.6 var(--sans);text-shadow:var(--glow-soft);-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;isolation:isolate}
img,video{max-width:100%;height:auto}
a{color:inherit}
p{margin:0;color:var(--text);line-height:1.7}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;letter-spacing:.025em;line-height:1.12;text-wrap:balance;text-shadow:var(--fringe),var(--glow)}
strong,b{font-weight:600}

.skip-link{position:fixed;left:1rem;top:-5rem;z-index:1100;padding:.8rem 1rem;background:#fff;color:var(--bg);text-shadow:none}
.skip-link:focus{top:1rem}
:focus-visible{outline:2px solid #fff;outline-offset:4px;box-shadow:0 0 0 6px rgba(180,108,255,.45)}
/* The skip link moves focus into <main tabindex="-1">; the container itself is not a control. */
main[tabindex="-1"]:focus,main[tabindex="-1"]:focus-visible{outline:none;box-shadow:none}

/* ---- Header ---- */
.site-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:1600px;min-height:4.6rem;margin:0 auto;padding:1rem 2rem;border-bottom:1px solid var(--line);border-inline:1px solid var(--line);background:rgba(8,7,12,.94);backdrop-filter:blur(18px) saturate(1.2)}
.brand{display:inline-flex;align-items:center;gap:.8rem;min-width:0;text-decoration:none}
.brand-logo{flex:0 0 auto;width:48px;height:48px;border:1px solid var(--line-bright);border-radius:50%;background:#08070c;box-shadow:0 0 22px rgba(255,64,170,.28)}
.brand-type{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem}
.brand strong{font-family:var(--display);font-weight:400;font-size:clamp(.95rem,1.6vw,1.5rem);letter-spacing:.03em;line-height:1.25;text-shadow:var(--fringe),var(--glow)}
.brand small{font:.72rem var(--mono);letter-spacing:.12em;text-transform:uppercase}
.site-header nav{display:flex;align-items:center;gap:.2rem}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px;padding:.7rem 1rem;border:1px solid transparent;font:.8rem var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:border-color .18s,background .18s}
.site-header nav a:hover{border-color:var(--line);background:rgba(255,255,255,.05)}
.site-header nav a[aria-current="page"]{border-color:var(--line)}
.site-header .nav-cta{margin-left:.35rem;border-color:var(--line-bright);background:rgba(168,85,247,.16)}

/* ---- Buttons ---- */
.button,button,.button-link{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:52px;padding:1rem 1.3rem;border:1px solid var(--line-bright);border-radius:3px;background:rgba(16,12,24,.9);color:var(--text);font:400 1rem/1.2 var(--sans);text-decoration:none;text-shadow:var(--glow-soft);cursor:pointer;transition:transform .18s,background .18s,box-shadow .18s}
.button:hover,button:hover,.button-link:hover{transform:translateY(-2px)}
.button.primary,button:not(.ghost,.danger),.button-link{background:var(--accent-strong);border-color:#c084fc;box-shadow:0 6px 32px rgba(168,85,247,.19)}
.button.primary:hover,button:not(.ghost,.danger):hover,.button-link:hover{background:#ae54f7;box-shadow:0 0 0 1px #d8b4fe,0 8px 40px rgba(168,85,247,.35)}
button.danger{border-color:var(--bad);background:rgba(255,113,149,.1)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---- Footer ---- */
.site-footer{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center;max-width:1480px;margin:0 auto;padding:2rem clamp(1.25rem,4vw,4rem);border-top:1px solid var(--line);font-size:.8rem}
/* Links in the middle column, copyright on the right; the left column stays empty for balance. */
.footer-links{grid-column:2;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.footer-links a{font:.75rem var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.site-footer>p{font:.75rem var(--mono);text-align:right}

/* ---- Background: the city texture with violet/crimson light moving over it ---- */
.ambient-light{position:fixed;inset:-12px;z-index:-2;pointer-events:none;overflow:hidden;contain:strict;background:linear-gradient(90deg,rgba(8,7,12,.32),rgba(8,7,12,.62) 30%,rgba(8,7,12,.62) 70%,rgba(8,7,12,.32)),url('/assets/digital-continuous-v2.webp') center/cover no-repeat;animation:environment-depth 18s ease-in-out infinite alternate}
.ambient-light>div{position:absolute;inset:-8%;pointer-events:none}
.ambient-violet{background:radial-gradient(ellipse at 4% 32%,rgba(164,60,255,.44),transparent 32%),radial-gradient(ellipse at 96% 65%,rgba(126,48,255,.4),transparent 34%);animation:violet-breathe 12s ease-in-out infinite alternate}
.ambient-crimson{background:radial-gradient(ellipse at 50% 64%,rgba(255,20,65,.28),transparent 38%),radial-gradient(ellipse at 82% 67%,rgba(255,48,94,.2),transparent 22%);animation:crimson-breathe 8s ease-in-out infinite alternate}
.ambient-drift{background:linear-gradient(105deg,transparent 9%,rgba(189,111,255,.17) 17%,transparent 25%,transparent 71%,rgba(193,103,255,.14) 78%,transparent 85%);animation:light-drift 20s ease-in-out infinite alternate}
.ambient-light::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 0% 60%,rgba(218,162,255,.2),transparent 18%),radial-gradient(ellipse at 100% 30%,rgba(202,133,255,.18),transparent 20%);animation:edge-shimmer 10s ease-in-out infinite alternate}
@keyframes violet-breathe{from{opacity:.45;transform:translate3d(-2%,2%,0)}to{opacity:.95;transform:translate3d(2%,-2%,0)}}
@keyframes crimson-breathe{from{opacity:.35}to{opacity:.95}}
@keyframes light-drift{from{opacity:.3;transform:translate3d(-7%,0,0)}to{opacity:.85;transform:translate3d(7%,0,0)}}
@keyframes edge-shimmer{from{opacity:.2}to{opacity:.8}}
@keyframes environment-depth{from{transform:translate3d(-6px,5px,0)}to{transform:translate3d(6px,-5px,0)}}
/* The rain canvas (painted by theme.js) sits over the city and under the scanlines. */
.rain{position:fixed;inset:0;z-index:-2;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}

/* ---- CRT, background only: scanlines and a vignette sit between the city texture
   (z-index -2) and the page, so they never cross text or panels. theme.js flickers them at
   random moments; without it they simply hold still. ---- */
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(0,0,0,.32) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(0,0,0,.5) 100%)}
.crt-flicker body::after{opacity:.75}
.page-inactive .ambient-light,.page-inactive .ambient-light>div,.page-inactive .ambient-light::after{animation-play-state:paused}

@media(max-width:980px){
  /* Wrap the nav onto its own row instead of hiding it, so every route stays reachable. */
  .site-header{flex-wrap:wrap;row-gap:.2rem;padding:1rem}
  .site-header .brand{flex:1 1 auto}
  .site-header nav{width:100%;flex-wrap:wrap;margin-left:-1rem}
  .site-footer{grid-template-columns:1fr;gap:1rem}
  .footer-links{grid-column:auto;justify-content:flex-start;gap:.2rem .25rem}
  .site-footer>p{text-align:left}
  /* Footer links are 17px tall; give them a touch-sized box where touch is likely. */
  .footer-links a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.5rem}
  .footer-links a:first-child{margin-left:-.5rem}
}
@media(max-width:640px){
  /* The wrapped nav makes the header ~140px tall; on a phone it scrolls away instead of sticking. */
  .site-header{position:static}
  .site-header nav a{padding:.6rem}
  .brand-logo{width:40px;height:40px}
  .ambient-drift{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ambient-light>div,.ambient-light::after{opacity:.35}
}
/* Readers who ask for more contrast get the white text without scanlines, rain, glow or fringes. */
@media(prefers-contrast:more){
  body::after,.rain{display:none}
  *{text-shadow:none!important}
}
@media print{
  body::after,.ambient-light,.rain{display:none}
  :root{--text:#000}
  body{background:#fff}
  *{text-shadow:none!important}
}