/* ============================================================
   CoCoByte — shared design system
   Modern dark · CoCo green phosphor · subtle CRT scanlines
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=VT323&display=swap');

:root{
  /* canvas — warm near-black, faint green tint */
  --bg:        oklch(0.165 0.012 160);
  --bg-2:      oklch(0.205 0.013 162);
  --surface:   oklch(0.225 0.014 165);
  --surface-2: oklch(0.262 0.015 165);
  --line:      oklch(0.34 0.016 165);
  --line-soft: oklch(0.30 0.014 165);

  /* ink */
  --fg:    oklch(0.94 0.012 150);
  --muted: oklch(0.70 0.014 155);
  --faint: oklch(0.56 0.014 158);

  /* brand accents */
  --green:  #69be00;            /* CoCoByte brand green */
  --green-2: oklch(0.82 0.20 132);
  --green-dim: oklch(0.52 0.13 135);
  --amber:  #ffb000;            /* CRT amber, used sparingly */
  --amber-dim: oklch(0.62 0.13 75);

  --glow-green: 0 0 0.6em oklch(0.82 0.20 132 / .55);
  --glow-amber: 0 0 0.6em oklch(0.84 0.16 78 / .5);

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --radius-lg: 8px;

  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --crt:  'VT323', 'JetBrains Mono', monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* faint global scanlines + vignette */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:9000;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      oklch(0 0 0 / .045) 2px 3px
    );
  mix-blend-mode:multiply;
}
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:8999;
  background:radial-gradient(120% 90% at 50% 0%, transparent 55%, oklch(0 0 0 / .35) 100%);
}

::selection{ background:var(--green); color:#0c1206; }

a{ color:inherit; text-decoration:none; }

img{ max-width:100%; display:block; }

h1,h2,h3,h4{ font-family:var(--sans); font-weight:600; line-height:1.05; margin:0; letter-spacing:-0.02em; }
p{ margin:0; }

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(64px, 9vw, 130px); }
.eyebrow{
  font-family:var(--mono); font-size:.78rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--green);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:"//"; color:var(--faint); }
.lead{ color:var(--muted); font-size:1.12rem; max-width:62ch; }
.kicker{ color:var(--amber); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:.86rem; font-weight:500;
  letter-spacing:.02em;
  padding:.78em 1.25em; border-radius:var(--radius);
  border:1px solid var(--line); color:var(--fg);
  background:var(--surface);
  cursor:pointer; transition:.18s ease;
  text-transform:uppercase;
}
.btn:hover{ border-color:var(--green); color:var(--green-2); transform:translateY(-2px); }
.btn .arr{ transition:transform .18s ease; }
.btn:hover .arr{ transform:translateX(3px); }
.btn--primary{
  background:var(--green); color:#0c1206; border-color:var(--green);
  font-weight:700;
}
.btn--primary:hover{
  background:var(--green-2); color:#0c1206; box-shadow:var(--glow-green);
  transform:translateY(-2px);
}
.btn--ghost{ background:transparent; }

/* ---------- header / nav ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(12px);
  background:oklch(0.165 0.012 160 / .78);
  border-bottom:1px solid var(--line-soft);
}
.nav__in{
  max-width:var(--maxw); margin:0 auto;
  padding:14px var(--gutter);
  display:flex; align-items:center; gap:28px;
}
.brand{ display:flex; align-items:center; gap:11px; color:var(--green); }
.brand svg{ height:24px; width:auto; display:block; filter:drop-shadow(var(--glow-green)); }
.brand__tag{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint);
  border-left:1px solid var(--line); padding-left:11px; margin-left:2px;
  align-self:center;
}
.nav__links{ display:flex; gap:4px; margin-left:auto; align-items:center; }
.nav__links a{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.03em;
  padding:.55em .85em; border-radius:var(--radius); color:var(--muted);
  transition:.16s ease; text-transform:uppercase;
}
.nav__links a:hover{ color:var(--fg); background:var(--surface); }
.nav__links a.active{ color:var(--green); }
.nav__links a.active::before{ content:"["; color:var(--faint); margin-right:2px; }
.nav__links a.active::after{ content:"]"; color:var(--faint); margin-left:2px; }
.nav__cta{ margin-left:8px; }

.menu-btn{ display:none; }

/* ---------- chips / tags ---------- */
.tag{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.04em;
  padding:.3em .6em; border:1px solid var(--line); border-radius:99px;
  color:var(--muted); text-transform:lowercase; white-space:nowrap;
}
.status{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.34em .7em; border-radius:99px;
}
.status::before{ content:""; width:7px; height:7px; border-radius:99px; background:currentColor; box-shadow:0 0 .5em currentColor; }
.status--live{ color:var(--green); border:1px solid var(--green-dim); }
.status--soon{ color:var(--amber); border:1px solid var(--amber-dim); }
.status--beta{ color:var(--muted); border:1px solid var(--line); }
.status--soon::before{ animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.3; } }

/* ---------- placeholder media ---------- */
.ph{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg,
      oklch(0.24 0.014 165) 0 10px,
      oklch(0.215 0.013 165) 10px 20px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  color:var(--faint);
}
.ph__label{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.06em;
  color:var(--muted); background:oklch(0.165 0.012 160 / .85);
  padding:.5em .85em; border:1px solid var(--line); border-radius:var(--radius);
}

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line-soft); background:var(--bg-2); }
.foot__in{
  max-width:var(--maxw); margin:0 auto; padding:64px var(--gutter) 40px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
}
.foot__brand svg{ height:30px; color:var(--green); filter:drop-shadow(var(--glow-green)); margin-bottom:16px; }
.foot__brand p{ color:var(--muted); font-size:.95rem; max-width:34ch; }
.foot h4{ font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:16px; }
.foot ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.foot a{ color:var(--muted); font-size:.95rem; transition:.15s; }
.foot a:hover{ color:var(--green-2); }
.foot__bar{
  border-top:1px solid var(--line-soft);
  max-width:var(--maxw); margin:0 auto;
  padding:20px var(--gutter);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.74rem; color:var(--faint); letter-spacing:.04em;
}

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ scroll-behavior:auto; }
}

/* ---------- responsive nav ---------- */
@media (max-width:820px){
  .nav__links{
    position:fixed; inset:57px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--bg-2); border-bottom:1px solid var(--line);
    padding:14px var(--gutter); margin:0;
    transform:translateY(-130%); transition:transform .28s ease;
  }
  .nav__links.open{ transform:none; }
  .nav__links a{ padding:.85em .4em; font-size:.95rem; }
  .nav__cta{ margin:8px 0 0; }
  .menu-btn{
    display:inline-flex; margin-left:auto; background:var(--surface);
    border:1px solid var(--line); color:var(--fg); border-radius:var(--radius);
    font-family:var(--mono); font-size:.8rem; padding:.5em .8em; cursor:pointer;
    text-transform:uppercase; letter-spacing:.08em;
  }
  .brand__tag{ display:none; }
}