/* ============================================================
   SlamAddons — dev-console / cyberpunk theme
   ============================================================ */

/* ---- Tokens ---- */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 4.5rem);

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  --radius-sm: .375rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem;
  --radius-full: 9999px;

  --content-wide: 1180px;
  --transition-interactive: 180ms cubic-bezier(0.16,1,0.3,1);

  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-body: 'Inter', system-ui, sans-serif;
}

:root, [data-theme="dark"] {
  --color-bg: #080b0a;
  --color-surface: #0d1110;
  --color-surface-2: #111716;
  --color-surface-3: #161d1b;
  --color-border: #1e2b27;
  --color-border-strong: #2c3f39;
  --color-text: #d6e4df;
  --color-text-muted: #7f948d;
  --color-text-faint: #51635d;

  --neon-green: #34f5a0;
  --neon-cyan: #2ee6f0;
  --neon-violet: #9d6bff;
  --neon-green-soft: rgba(52,245,160,0.12);
  --neon-cyan-soft: rgba(46,230,240,0.12);
  --neon-violet-soft: rgba(157,107,255,0.14);

  --primary: var(--neon-green);
  --glow: 0 0 0 1px rgba(52,245,160,.25), 0 8px 40px -8px rgba(52,245,160,.35);
  --grid-line: rgba(52,245,160,0.055);
}

/* ---- Base ---- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; scroll-padding-top:5rem; }
body {
  min-height:100dvh; line-height:1.6; font-family:var(--font-body);
  font-size:var(--text-base); color:var(--color-text); background:var(--color-bg);
  overflow-x:hidden;
}
img,svg { display:block; max-width:100%; }
ul[role="list"] { list-style:none; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { text-wrap:balance; line-height:1.12; }
p { text-wrap:pretty; }
::selection { background:var(--neon-green-soft); color:var(--color-text); }
:focus-visible { outline:2px solid var(--primary); outline-offset:3px; border-radius:var(--radius-sm); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

.container { width:100%; max-width:var(--content-wide); margin-inline:auto; padding-inline:var(--space-6); }
.skip-link { position:absolute; left:-999px; top:0; background:var(--primary); color:#04110b; padding:var(--space-2) var(--space-4); z-index:100; border-radius:0 0 var(--radius-md) 0; }
.skip-link:focus { left:0; }

.eyebrow {
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.08em;
  color:var(--neon-cyan); text-transform:lowercase; margin-bottom:var(--space-3);
}

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-weight:600; font-size:var(--text-sm);
  padding:var(--space-3) var(--space-5); border-radius:var(--radius-md);
  border:1px solid transparent; transition:all var(--transition-interactive); cursor:pointer;
  white-space:nowrap;
}
.btn-sm { padding:var(--space-2) var(--space-4); }
.btn-primary {
  background:var(--primary); color:#04110b;
  box-shadow:0 0 0 1px color-mix(in oklab, var(--primary) 50%, transparent), 0 8px 26px -10px var(--primary);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 0 0 1px var(--primary), 0 12px 32px -8px var(--primary); }
.btn-ghost {
  background:transparent; color:var(--color-text);
  border-color:var(--color-border-strong);
}
.btn-ghost:hover { border-color:var(--neon-cyan); color:var(--neon-cyan); background:var(--neon-cyan-soft); }

/* ---- Header ---- */
.site-header {
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--color-bg) 82%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--color-border);
}
.header-inner { display:flex; align-items:center; gap:var(--space-6); height:64px; }
.brand { display:flex; align-items:center; gap:var(--space-3); color:var(--color-text); }
.brand-mark { color:var(--primary); flex-shrink:0; }
.brand-text { font-family:var(--font-mono); font-weight:800; font-size:1.05rem; letter-spacing:-.01em; }
.brand-text.small { font-size:1rem; }
.brand-accent { color:var(--primary); }
.brand-caret { color:var(--neon-cyan); animation:blink 1.1s steps(1) infinite; }
@keyframes blink { 50%{ opacity:0; } }

.nav { display:flex; gap:var(--space-6); margin-left:auto; font-family:var(--font-mono); font-size:var(--text-sm); }
.nav a { color:var(--color-text-muted); transition:color var(--transition-interactive); position:relative; }
.nav a:hover { color:var(--neon-cyan); }
/* ---- Grid background ---- */
.grid-bg {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 80% 70% at 60% 0%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 0%, #000 30%, transparent 80%);
}

/* ---- Hero ---- */
.hero { position:relative; overflow:hidden; padding-block:clamp(var(--space-14, 3.5rem), 8vw, var(--space-24)) var(--space-10); }
.hero-inner { position:relative; z-index:1; display:block; text-align:center; }
.hero-copy { max-width:820px; margin-inline:auto; }
.tag-chip {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--neon-green);
  background:var(--neon-green-soft); border:1px solid color-mix(in oklab,var(--neon-green) 30%, transparent);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-full); margin-bottom:var(--space-5);
}
.tag-chip .dot { width:7px; height:7px; border-radius:50%; background:var(--neon-green); box-shadow:0 0 8px var(--neon-green); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50%{ opacity:.4; transform:scale(.8); } }

.hero-title { font-size:clamp(2.15rem, 1rem + 3.2vw, 3.85rem); font-weight:800; letter-spacing:-.02em; margin-bottom:var(--space-5); }
.hero-accent {
  color:var(--primary);
  background:linear-gradient(90deg, var(--neon-green) 0%, var(--neon-cyan) 58%, var(--neon-violet) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 24px color-mix(in oklab, var(--neon-green) 24%, transparent);
}
.hero-accent-alt {
  background:linear-gradient(90deg, var(--neon-violet) 0%, var(--neon-cyan) 42%, var(--neon-green) 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.glitch {
  display:inline-block;
  color:var(--primary);
  background:linear-gradient(90deg, var(--neon-green) 0%, var(--neon-cyan) 62%, var(--neon-violet) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 24px color-mix(in oklab, var(--neon-green) 28%, transparent);
}
.hero-sub { font-size:var(--text-lg); color:var(--color-text-muted); max-width:46ch; margin:0 auto var(--space-8); }
.hero-cta { display:flex; justify-content:center; gap:var(--space-4); flex-wrap:wrap; }
.hero-cta.center { justify-content:center; }

.badge-row { display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; }
.ver-badge {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-weight:600; font-size:var(--text-sm); color:var(--color-text);
  background:var(--color-surface-2); border:1px solid var(--color-border-strong);
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-md);
}
.ver-key { color:var(--neon-cyan); font-size:var(--text-xs); }
.ver-note { color:var(--color-text-muted); font-size:var(--text-sm); }

/* ---- Section heads ---- */
.section-head { max-width:64ch; margin-bottom:var(--space-12); }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head h2, .preview-copy h2, .cta h2 { font-size:var(--text-2xl); font-weight:800; letter-spacing:-.02em; margin-bottom:var(--space-4); }
.section-lead { color:var(--color-text-muted); font-size:var(--text-lg); }

/* ---- Features ---- */
.features { padding-block:var(--space-8) var(--space-10); }
.modules-eyebrow { margin-bottom:var(--space-6); }
.cards-grid { display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--space-6); }
.feat-card:first-child { flex:1 1 100%; }
.feat-card:not(:first-child) { flex:1 1 320px; }
.feat-card:nth-child(3) { flex-basis:520px; }
.feat-card:nth-child(4) { order:5; flex-basis:100%; }
.feat-card:nth-child(5) { order:4; }
.feat-card {
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-8); position:relative; overflow:hidden;
  transition:border-color var(--transition-interactive), transform var(--transition-interactive);
}
.feat-card::before {
  content:""; position:absolute; left:0; top:0; height:100%; width:3px;
  background:linear-gradient(var(--neon-green), var(--neon-cyan)); opacity:.6;
}
.feat-card:hover { border-color:var(--color-border-strong); transform:translateY(-3px); }
.feat-head { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4); flex-wrap:wrap; }
.feat-icon {
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:var(--radius-md); background:var(--neon-green-soft); color:var(--primary);
  border:1px solid color-mix(in oklab,var(--primary) 25%, transparent);
}
.feat-head h3 { font-size:var(--text-lg); font-weight:700; }
.feat-count {
  margin-left:auto; font-family:var(--font-mono); font-size:var(--text-xs);
  color:var(--neon-cyan); background:var(--neon-cyan-soft); padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-full);
}
.chip-list { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.chip {
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-text-muted);
  background:var(--color-surface-2); border:1px solid var(--color-border);
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-sm);
  transition:all var(--transition-interactive);
}
.chip:hover { color:var(--color-text); border-color:var(--color-border-strong); }
.chip::before { content:"› "; color:var(--color-text-faint); }
.chip-hot {
  color:var(--neon-green); background:var(--neon-green-soft);
  border-color:color-mix(in oklab,var(--neon-green) 35%, transparent);
  font-weight:600;
}
.chip-hot::before { content:"» "; color:var(--neon-green); }
.chip-hot:hover { color:var(--neon-green); border-color:var(--neon-green); box-shadow:0 0 12px -2px var(--neon-green-soft); }
.wip {
  font-size:.62rem; background:var(--neon-violet-soft); color:var(--neon-violet);
  padding:0 5px; border-radius:3px; margin-left:4px; vertical-align:middle;
}
.feat-more { margin-top:var(--space-5); font-size:var(--text-xs); color:var(--color-text-faint); font-style:italic; }

/* ---- Fit ---- */
.fit { padding-block:var(--space-8) var(--space-10); }
.fit-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-5); }
.fit-card {
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-6); transition:border-color var(--transition-interactive);
}
.fit-card:hover { border-color:var(--neon-violet); }
.fit-card h3 { font-family:var(--font-mono); font-size:var(--text-base); color:var(--primary); margin-bottom:var(--space-3); }
.fit-card p { font-size:var(--text-sm); color:var(--color-text-muted); }
/* ---- CTA ---- */
.cta { padding-block:0 var(--space-12); }
.cta-inner {
  position:relative; overflow:hidden; text-align:center;
  background:var(--color-surface); border:1px solid var(--color-border-strong);
  border-radius:var(--radius-xl); padding:var(--space-8) var(--space-6);
  box-shadow:none;
  max-width:760px;
}
.cta h2 {
  color:var(--primary);
  font-size:var(--text-xl);
  text-shadow:none;
}
.cta-inner > * { position:relative; z-index:1; }
.cta-inner p { color:var(--color-text-muted); font-size:var(--text-base); max-width:50ch; margin:var(--space-2) auto var(--space-6); }
.cta .btn-primary {
  box-shadow:none;
}
.cta .btn-primary:hover {
  box-shadow:0 0 0 1px var(--primary);
}
.cta-inner p.download-filename {
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--neon-cyan);
  margin:var(--space-3) auto 0;
  max-width:46ch; word-break:break-all;
}

/* ---- Footer ---- */
.site-footer { border-top:1px solid var(--color-border); background:var(--color-surface); padding-block:var(--space-8) var(--space-5); }
.footer-inner { display:grid; grid-template-columns:auto minmax(420px, 1fr); align-items:start; gap:var(--space-10); padding-bottom:var(--space-6); }
.footer-brand p { color:var(--color-text-muted); font-size:var(--text-sm); margin-top:var(--space-3); max-width:38ch; }
.footer-disclaimer {
  justify-self:end;
  text-align:right;
  color:var(--color-text-muted);
  font-size:var(--text-sm);
  line-height:1.55;
  max-width:66ch;
  text-wrap:balance;
}
.footer-nav { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); }
.footer-nav h4 { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-text-faint); text-transform:uppercase; letter-spacing:.1em; margin-bottom:var(--space-3); }
.footer-nav a { display:block; color:var(--color-text-muted); font-size:var(--text-sm); padding:var(--space-1) 0; transition:color var(--transition-interactive); }
.footer-nav a:hover { color:var(--neon-cyan); }
.footer-bottom {
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3);
  padding-top:var(--space-6); border-top:1px solid var(--color-border);
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-text-faint);
}
.footer-tag { color:var(--neon-green); }

/* ---- Responsive ---- */
@media (max-width: 900px){
  .fit-grid { grid-template-columns:repeat(2,1fr); }
  .nav { display:none; }
  .footer-inner { grid-template-columns:1fr; gap:var(--space-5); }
  .footer-disclaimer { justify-self:start; text-align:left; max-width:100%; }
}
@media (max-width: 620px){
  .cards-grid { display:flex; flex-direction:column; }
  .feat-card, .feat-card:first-child, .feat-card:not(:first-child) { width:100%; flex-basis:auto; }
  .fit-grid { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; gap:var(--space-5); }
}