/* WP-block-inspired static styles */
:root {
  --c-1: #f0f5f0;
  --c-2: #A020F0;
  --c-3: #39FF14;
  --c-4: #121312;
  --c-5: #000000;
  --bg: var(--c-4);
  --text: #f5f7fa;
  --muted: #c9d1d9;
  --card: #181a1b;
  --accent: var(--c-3);
  --accent-2: var(--c-2);
  --gap: 1.25rem;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui, Segoe UI, Roboto, Ubuntu, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width:min(1100px, 92vw); margin:0 auto; padding:2rem 0; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; }
.nav .brand { display:flex; align-items:center; gap:.75rem; font-weight:700; letter-spacing:.02em; }
.nav img { height:40px; }
.nav .links a { margin-left:1rem; opacity:.9; }
.hero { text-align:center; padding:5rem 0 3rem; background: radial-gradient(80% 80% at 50% 0%, rgba(160,32,240,.25), transparent 60%), linear-gradient(180deg, rgba(57,255,20,.12), transparent 30%); }
.hero h1 { font-size:clamp(2rem, 6vw, 3.25rem); line-height:1.05; letter-spacing:-.02em; margin:.5rem 0; }
.tagline { color:var(--muted); margin:.5rem 0 1.5rem; }
.cta { display:inline-block; background:var(--accent); color:#001006; padding:.9rem 1.2rem; border-radius:1rem; font-weight:700; }
.grid { display:grid; gap:var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background:var(--card); border:1px solid #23272b; border-radius:1rem; padding:1rem; }
.badge { display:inline-block; padding:.3rem .6rem; border-radius:.6rem; font-size:.8rem; font-weight:700; }
.badge.g {
  background: color-mix(in srgb, var(--c-3) 20%, #000);
  color: var(--c-3);
  border:1px solid color-mix(in srgb, var(--c-3) 40%, #000);
}
.badge.p {
  background: color-mix(in srgb, var(--c-2) 20%, #000);
  color: var(--c-2);
  border:1px solid color-mix(in srgb, var(--c-2) 40%, #000);
}
.section-accent { background: #0f1112; border:1px solid #1f2326; border-radius:1rem; padding:1.5rem; }
.section-accent h2 { margin-top:0; }
footer { color:var(--muted); border-top:1px solid #23272b; margin-top:2rem; padding:2rem 0; }
small .year { opacity:.9; }

@media (prefers-reduced-motion: no-preference) {
  .hero img { filter: drop-shadow(0 0 24px color-mix(in srgb, var(--c-3) 35%, #000)); }
}