/* Wordo — website styles. Pixel/retro arcade per design-system/wordo/MASTER.md.
   Press Start 2P (headings) + VT323 (body). Neon red+blue on dark, green CTA. */

:root {
  --color-primary:   #DC2626;
  --color-secondary: #2563EB;
  --color-accent:    #22C55E;
  --color-background:#0F172A;
  --color-foreground:#FFFFFF;
  --color-muted:     #1F1829;
  --color-surface:   #161E33;
  --color-border:    rgba(255,255,255,0.10);
  --color-dim:       #9AA3B8;

  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  --radius: 6px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: 'VT323', ui-monospace, monospace;
  font-size: 21px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Subtle scanline + glow backdrop */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(820px 420px at 50% -120px, rgba(220,38,38,0.16), transparent 70%),
    radial-gradient(720px 420px at 90% 10%, rgba(37,99,235,0.12), transparent 70%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(
    to bottom, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
}

.wrap { max-width: 780px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; }

a { color: var(--color-accent); text-underline-offset: 3px; cursor: pointer; }
a:hover { text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-secondary); outline-offset: 3px;
}

h1, h2, h3, .wordmark, .hero-title, .pixel {
  font-family: 'Press Start 2P', 'VT323', monospace;
  line-height: 1.5;
  letter-spacing: 0.5px;
}

/* ---- Masthead ---- */
.masthead { padding: 22px 0 18px; border-bottom: 1px solid var(--color-border); }
.wordmark {
  display: inline-block;
  font-size: 22px;
  color: var(--color-foreground);
  text-decoration: none;
  text-shadow: 0 0 10px rgba(220,38,38,0.7);
}
.tagline { font-size: 19px; color: var(--color-dim); margin-top: 10px; }
.nav { margin-top: 16px; font-size: 18px; }
.nav a {
  color: var(--color-foreground);
  text-decoration: none;
  margin-right: 18px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--color-primary);
}
.nav a:hover { color: var(--color-primary); }

/* ---- Hero ---- */
.hero { text-align: center; padding: 52px 0 26px; }
.hero-word {
  font-family: 'Press Start 2P', monospace;
  font-size: 30px;
  letter-spacing: 10px;
  color: var(--color-accent);
  text-shadow: 0 0 12px rgba(34,197,94,0.55);
  margin-bottom: 22px;
}
.hero-word .cursor {
  color: var(--color-primary);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.hero-title {
  font-size: 26px;
  line-height: 1.6;
  margin: 8px 0 16px;
  text-shadow: 0 0 10px rgba(37,99,235,0.5);
}
.hero-sub {
  font-size: 21px;
  color: var(--color-dim);
  max-width: 520px;
  margin: 0 auto 24px;
}

/* ---- Buttons ---- */
.btn-primary, .btn-secondary {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  text-decoration: none;
  padding: 16px 22px;
  border-radius: var(--radius);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  cursor: pointer;
}
.btn-primary {
  background: var(--color-accent);
  color: #06210F;
  border: 2px solid #16331f;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.45);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 6px 6px 0 rgba(0,0,0,0.45); }
.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  margin-left: 10px;
}
.btn-secondary:hover { background: rgba(220,38,38,0.12); }
.hero-cta { margin-top: 6px; }
.badge {
  display: inline-block; margin-top: 18px;
  font-size: 16px; color: var(--color-dim);
}

/* ---- Cards ---- */
main { padding: 30px 0 12px; }
.card {
  background: var(--color-muted);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 26px;
  margin-bottom: 22px;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.35);
}

.kicker {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}

h1 { font-size: 20px; margin-bottom: 14px; }
h2 { font-size: 15px; color: var(--color-foreground); margin: 28px 0 12px; }
h3 { font-size: 13px; margin: 16px 0 6px; color: var(--color-foreground); }
p { margin-bottom: 14px; }
ul { margin: 0 0 14px 22px; }
li { margin-bottom: 7px; }
strong { color: var(--color-foreground); }

.lede { font-size: 22px; color: var(--color-dim); }
.updated {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--color-dim); margin-bottom: 18px;
}

/* ---- Feature rows (SVG icons, no emoji) ---- */
.feature {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--color-border);
}
.feature:last-child { border-bottom: 0; }
.feature .ico {
  flex: none; width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-secondary);
}
.feature .ico svg { width: 22px; height: 22px; }
.feature h3 { margin: 2px 0 4px; }
.feature p { margin: 0; color: var(--color-dim); font-size: 19px; }

/* ---- Callout ---- */
.callout {
  background: var(--color-surface);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 16px 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ---- FAQ ---- */
.faq-q { color: var(--color-foreground); font-size: 22px; margin-top: 20px; margin-bottom: 4px; }
.faq-q::before { content: "> "; color: var(--color-accent); }

.rule { border: 0; border-top: 1px solid var(--color-border); margin: 22px 0; }

/* ---- Footer ---- */
.footer { border-top: 1px solid var(--color-border); margin-top: 30px; padding: 24px 0 44px; }
.footer p { font-size: 17px; color: var(--color-dim); margin-bottom: 8px; }
.footer .nav-foot a { color: var(--color-foreground); margin-right: 14px; }
.footer .copy {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px; letter-spacing: 0.08em; color: var(--color-dim);
}

/* ---- Responsive ---- */
@media (max-width: 560px) {
  body { font-size: 20px; }
  .hero-word { font-size: 20px; letter-spacing: 6px; }
  .hero-title { font-size: 18px; }
  .card { padding: 18px; }
  h1 { font-size: 16px; }
  .btn-secondary { margin-left: 0; margin-top: 10px; }
  .nav a { margin-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}