/* ============================================================
   CyberNytronX — Theme Tokens (dark-only, Fortune-500 cyber)
   ============================================================ */
:root{
  color-scheme: dark;

  /* Base surfaces */
  --bg-0:#05070b;
  --bg-1:#070b12;
  --bg-2:#0b1220;
  --bg-3:#0f1826;
  --surface-0:rgba(255,255,255,.03);
  --surface-1:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.08);
  --surface-3:rgba(255,255,255,.11);

  /* Text */
  --text-0:#f3f7ff;
  --text-1:rgba(243,247,255,.80);
  --text-2:rgba(243,247,255,.60);
  --text-3:rgba(243,247,255,.42);
  --text-invert:#061018;

  /* Brand accents */
  --cyan-0:#bff6ff;
  --cyan-1:#5fe9ff;
  --cyan-2:#00d4ff;
  --cyan-3:#00a8cc;
  --cyan-4:#007a99;

  --violet-1:#d7b7ff;
  --violet-2:#a855f7;
  --violet-3:#7c3aed;

  --gold-1:#ffe7b0;
  --gold-2:#f6c453;
  --gold-3:#c99a2a;

  /* Semantic */
  --success:#2ee59d;
  --warning:#ffcc66;
  --danger:#ff5c7a;
  --info:#5fe9ff;

  /* Borders + rings */
  --border-0:rgba(255,255,255,.08);
  --border-1:rgba(95,233,255,.22);
  --border-2:rgba(168,85,247,.25);
  --ring:rgba(0,212,255,.45);

  /* Shadows */
  --shadow-1:0 10px 30px rgba(0,0,0,.45);
  --shadow-2:0 18px 60px rgba(0,0,0,.55);
  --shadow-glow-cyan:0 0 40px rgba(0,212,255,.22);
  --shadow-glow-violet:0 0 40px rgba(168,85,247,.18);

  /* Radii */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --r-xl:24px;
  --r-2xl:32px;

  /* Spacing scale */
  --s-1:4px;   --s-2:8px;   --s-3:12px;  --s-4:16px;
  --s-5:24px;  --s-6:32px;  --s-7:48px;  --s-8:64px;  --s-9:96px;

  /* Font families */
  --font-display:'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Header */
  --header-h:72px;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg-0);
  color:var(--text-1);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1100px circle at 12% 0%, rgba(0,212,255,.10), transparent 55%),
    radial-gradient(900px circle at 90% 10%, rgba(168,85,247,.08), transparent 55%),
    radial-gradient(700px circle at 50% 120%, rgba(246,196,83,.05), transparent 55%);
}
body::after{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.45;
  mix-blend-mode:screen;
}
main,header,footer,section{position:relative;z-index:1;}

::selection{background:rgba(0,212,255,.28);color:var(--text-0);}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);border-radius:8px;}

/* Typography */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--text-0);
  letter-spacing:-.02em;
  line-height:1.2;
  margin:0 0 var(--s-4);
  font-weight:600;
}
h1{font-size:clamp(2.25rem,4.8vw,3.75rem);font-weight:700;}
h2{font-size:clamp(1.75rem,3vw,2.5rem);}
h3{font-size:clamp(1.25rem,1.6vw,1.5rem);}
h4{font-size:1.125rem;}
p{margin:0 0 var(--s-4);color:var(--text-1);}
a{color:var(--cyan-2);text-decoration:none;transition:color .18s ease;}
a:hover{color:var(--cyan-1);}
ul,ol{margin:0 0 var(--s-4);padding-left:1.25rem;color:var(--text-1);}
li{margin-bottom:.35rem;}
code{font-family:var(--font-mono);font-size:.9em;background:rgba(0,212,255,.08);color:var(--cyan-1);padding:1px 6px;border-radius:6px;border:1px solid rgba(0,212,255,.15);}
pre{
  font-family:var(--font-mono);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-md);
  padding:var(--s-4);
  overflow:auto;
  font-size:.875rem;
  line-height:1.6;
  margin:0 0 var(--s-4);
}
pre code{background:transparent;border:none;padding:0;color:var(--cyan-1);}
img{max-width:100%;display:block;}

/* Container */
.container{width:100%;max-width:1220px;margin:0 auto;padding:0 20px;}
@media (min-width:768px){.container{padding:0 28px;}}
@media (min-width:1024px){.container{padding:0 40px;}}

/* Eyebrow badges */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.22em;
  color:var(--cyan-2);background:rgba(0,212,255,.08);
  border:1px solid rgba(0,212,255,.22);
  padding:6px 12px;border-radius:999px;
}
.eyebrow.violet{color:var(--violet-2);background:rgba(168,85,247,.08);border-color:rgba(168,85,247,.28);}
.eyebrow.gold{color:var(--gold-2);background:rgba(246,196,83,.08);border-color:rgba(246,196,83,.28);}
.eyebrow i{font-size:.8rem;}

/* Section rhythm */
.section{padding:var(--s-8) 0;}
@media (min-width:1024px){.section{padding:var(--s-9) 0;}}
.section-header{text-align:center;max-width:760px;margin:0 auto var(--s-7);}
.section-header .eyebrow{margin-bottom:var(--s-4);}
.section-header p{color:var(--text-2);font-size:1.05rem;}

/* Gradient text */
.text-gradient{
  background:linear-gradient(110deg, var(--cyan-2) 0%, var(--violet-1) 55%, var(--gold-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;
}

/* Divider strip */
.divider-strip{height:1px;background:linear-gradient(90deg, transparent, rgba(0,212,255,.5), rgba(168,85,247,.4), transparent);}

/* Utilities */
.text-center{text-align:center;}
.mono{font-family:var(--font-mono);}
.muted{color:var(--text-2);}
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}