/* Spy21 theme — neon green, modern type. Loaded after styles.css. */
body { font-feature-settings: 'cv11', 'ss01'; letter-spacing: -0.005em; }
h1, h2, h3, h4, .section-title, .page-title, .logo-text, .hero h1, .stat .v, .btn { font-family: var(--font-display); }
.logo-text { font-weight: 700; letter-spacing: -0.6px; }
.logo-text span { color: var(--accent); text-shadow: 0 0 18px rgba(57,255,106,.55); }
.mono, code, .kv dd.mono, .stat .v { font-family: var(--font-mono); }
.stat .v { letter-spacing: -0.5px; }

/* buttons: dark text on neon */
.btn-primary { color: #04130a; background: linear-gradient(180deg, #6dff92, #39ff6a); box-shadow: 0 0 0 1px rgba(57,255,106,.5), 0 10px 34px rgba(57,255,106,.28); font-weight: 700; }
.btn-primary:hover { background: linear-gradient(180deg, #9dffb5, #5cff85); box-shadow: 0 0 0 1px rgba(57,255,106,.8), 0 12px 40px rgba(57,255,106,.4); }
.btn-ghost { border-color: rgba(57,255,106,.22); }
.btn-ghost:hover { border-color: rgba(57,255,106,.55); background: rgba(57,255,106,.06); }
.step::before, .badge.hot, .nav-item.active .badge { color: #04130a; }

/* nav */
.topnav { background: rgba(3,6,4,.72); border-bottom-color: rgba(57,255,106,.12); }
.nav-links a.active { color: var(--accent); }

/* hero */
.hero { background:
  radial-gradient(ellipse 55% 65% at 75% 35%, rgba(57,255,106,.22), transparent 70%),
  radial-gradient(ellipse 40% 50% at 5% 100%, rgba(0,200,83,.12), transparent 70%),
  linear-gradient(180deg, #050a07, #030604); }
.hero::before { background-image: linear-gradient(rgba(57,255,106,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(57,255,106,.09) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 60% 70% at 60% 40%, #000, transparent 75%); opacity: 1; }
.hero h1 { font-weight: 700; letter-spacing: -0.045em; line-height: .98; font-size: clamp(42px, 5.6vw, 78px); }
.hero h1 em { background: linear-gradient(90deg, #b8ffcb, #39ff6a 55%, #00d65c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 28px rgba(57,255,106,.35)); }
.kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid rgba(57,255,106,.3); background: rgba(57,255,106,.07); color: #c8ffd8; font-size: 13px; font-weight: 600; margin-bottom: 22px; font-family: var(--font-display); }
.kicker b { background: var(--accent); color: #04130a; border-radius: 999px; padding: 2px 8px; font-size: 11px; letter-spacing: .4px; }
.speed-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 34px; max-width: 520px; }
.speed-strip div { border: 1px solid rgba(57,255,106,.18); background: rgba(57,255,106,.04); border-radius: 14px; padding: 12px 14px; }
.speed-strip strong { display: block; font-family: var(--font-mono); font-size: 22px; color: var(--accent); text-shadow: 0 0 18px rgba(57,255,106,.4); }
.speed-strip span { font-size: 12px; color: var(--text-muted); }
.shot { box-shadow: 0 40px 100px rgba(0,0,0,.75), 0 0 0 1px rgba(57,255,106,.25), 0 0 90px rgba(57,255,106,.18); }
.shot-badge .ring { background: rgba(57,255,106,.14); }

/* cards / features */
.feature { background: linear-gradient(180deg, rgba(57,255,106,.035), transparent 60%), var(--bg-card); }
.feature:hover { border-color: rgba(57,255,106,.5); box-shadow: 0 0 0 1px rgba(57,255,106,.15), 0 20px 50px rgba(0,0,0,.5); }
.feature .fi { background: rgba(57,255,106,.1); box-shadow: inset 0 0 0 1px rgba(57,255,106,.25); }
.section-title { letter-spacing: -0.035em; font-weight: 700; }
.opener { border-color: rgba(57,255,106,.3); background: radial-gradient(ellipse at top right, rgba(57,255,106,.14), transparent 60%), var(--bg-card); }

/* legal notice strip */
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(251,191,36,.3); background: rgba(251,191,36,.07); color: #ffe7a6; font-size: 14px; line-height: 1.55; }
.notice svg { width: 18px; height: 18px; color: var(--warning); margin-top: 2px; }
.notice-wrap { padding-top: 26px; }
.notice .btn svg { color: inherit; width: 16px; height: 16px; margin-top: 0; }

.iconbtn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-primary); color: var(--text-secondary); cursor: pointer; }
.iconbtn:hover { color: var(--accent); border-color: var(--accent); }
.iconbtn svg { width: 15px; height: 15px; }
.progress > div { background: linear-gradient(90deg, #00d65c, #39ff6a); box-shadow: 0 0 12px rgba(57,255,106,.5); }

@media (max-width: 900px) {
  .speed-strip { grid-template-columns: repeat(3, 1fr); }
}