/* Yellow & black theme. html:root beats the inline :root accent in index.html */
html:root { --accent: #facc15; --ink: #0b0b0b; --accent-soft: #fef6c7; }

/* Black text on anything filled with yellow */
.btn, .btn:hover, .mark, .svc-icon, .tag, .step-icon, .marquee, .callbar, .pill-dot, .btn-light:hover { color: var(--ink); }
.btn-light { color: var(--ink); }
.btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Dark header */
.top { background: rgba(11,11,11,.92); }
.top.scrolled { border-color: #222; }
.brand-text b { color: #fff; }
.brand-text small { color: #a3a3a3; }
.links a { color: #e5e5e5; }
.mark { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--accent); }
.icon-btn { background: #1f1f1f; color: var(--accent); }
.infobar { background: #000; }

/* Dark hero */
.hero-dark .hero { color: #fff; background: radial-gradient(900px 520px at 50% -12%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%), linear-gradient(180deg, #121212 0%, #050505 100%); }
.hero-dark .hero .headline { color: #fff; }
.hero-dark .hero .headline .accent { color: var(--accent); }
.hero-dark .hero .lede, .hero-dark .hero .chips span { color: rgba(255,255,255,.72); }
.hero-dark .hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.hero-dark .hero .pill, .hero-dark .hero .chips li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.hero-dark .hero .chips b { color: var(--accent); }
.hero-dark .hero .scroll-cue { border-color: rgba(255,255,255,.35); color: #fff; }
.hero-dark .hero .glow { opacity: .07; }

/* Black text with a yellow highlighter on white sections */
.kicker { color: var(--ink); }
.kicker::before { background: var(--accent); height: 4px; }
em { color: var(--ink); background: linear-gradient(transparent 58%, var(--accent) 58%); padding: 0 .08em; }
.big a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 6px; text-underline-offset: 6px; }
.svc-num { color: #a16207; }
.step::after { color: #a16207; }
.plus::before, .plus::after, details[open] .plus::before, details[open] .plus::after { background: var(--ink); }

/* Dark CTA */
.cta { background: #0b0b0b; }
.cta-bg { opacity: .28; }
.cta::before { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 30%, transparent), #0b0b0b 75%); }
.cta em, .hero em { color: var(--accent); background: none; padding: 0; }
.foot-row a { color: var(--accent); }