/* Reactiiv HQ — shared design system (matches reactiiv.ai funnel tokens) */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:#030712; color:#f3f4f6; font-family:Inter,system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; line-height:1.6; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:72rem; margin:0 auto; padding:0 1.5rem; }
.narrow { max-width:48rem; margin:0 auto; }

nav.site { position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(3,7,18,.8); backdrop-filter:blur(24px); border-bottom:1px solid hsla(0,0%,100%,.06); }
nav.site .inner { max-width:72rem; margin:0 auto; padding:1rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.logo { font-weight:900; font-size:1.125rem; letter-spacing:-.025em; white-space:nowrap; }
.logo span { color:#60a5fa; }
.nav-links { display:flex; align-items:center; gap:1.75rem; font-size:.875rem; color:#9ca3af; }
.nav-links a:hover { color:#fff; }
.nav-links a.active { color:#fff; font-weight:600; }
.nav-cta { background:#2563eb; color:#fff !important; font-weight:600; font-size:.875rem; padding:.625rem 1.25rem; border-radius:.5rem; transition:background .15s; white-space:nowrap; }
.nav-cta:hover { background:#3b82f6; }
@media(max-width:640px){ .nav-links a:not(.nav-cta){ display:none; } }

.hero { padding:9rem 0 4rem; text-align:center; }
.kicker { display:inline-block; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:#60a5fa; background:rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.2); padding:.375rem 1rem; border-radius:9999px; margin-bottom:1.5rem; }
h1 { font-size:2.75rem; font-weight:900; letter-spacing:-.025em; line-height:1.1; }
@media(min-width:768px){ h1{ font-size:4rem; } }
.hero p.sub { color:#9ca3af; font-size:1.125rem; max-width:44rem; margin:1.5rem auto 0; }

.section-head { text-align:center; margin:5rem 0 3rem; }
.section-head h2 { font-size:2rem; font-weight:900; letter-spacing:-.025em; }
.section-head p { color:#9ca3af; margin-top:.75rem; max-width:38rem; margin-left:auto; margin-right:auto; }

.card { border:1px solid hsla(0,0%,100%,.06); background:hsla(0,0%,100%,.02); border-radius:1rem; padding:2rem; }
.grid3 { display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media(min-width:768px){ .grid3{ grid-template-columns:repeat(3,1fr); } }
.grid2 { display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media(min-width:768px){ .grid2{ grid-template-columns:repeat(2,1fr); } }
.card h3 { font-size:1.125rem; font-weight:700; margin-bottom:.5rem; }
.card p { color:#9ca3af; font-size:.9375rem; }
.card .icon { width:2.5rem; height:2.5rem; border-radius:.5rem; background:rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.2); display:flex; align-items:center; justify-content:center; color:#60a5fa; font-weight:700; margin-bottom:1rem; }

.proof-strip { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:2rem 0; }
@media(min-width:768px){ .proof-strip{ grid-template-columns:repeat(4,1fr); } }
.proof { background:hsla(0,0%,100%,.03); border:1px solid hsla(0,0%,100%,.06); border-radius:.75rem; padding:1.25rem; text-align:center; }
.proof .num { font-size:1.75rem; font-weight:900; color:#4ade80; letter-spacing:-.025em; }
.proof .lbl { font-size:.8125rem; color:#9ca3af; margin-top:.25rem; }

.cta-band { text-align:center; padding:4rem 0 6rem; }
.cta-band h2 { font-size:2rem; font-weight:900; letter-spacing:-.025em; margin-bottom:1rem; }
.cta-band p { color:#9ca3af; max-width:36rem; margin:0 auto 2rem; }
.btn-primary { display:inline-block; background:#2563eb; color:#fff; font-weight:600; font-size:1.125rem; padding:1rem 2.5rem; border-radius:.75rem; transition:background .15s; }
.btn-primary:hover { background:#3b82f6; }
.btn-ghost { display:inline-block; color:#60a5fa; font-weight:600; font-size:1rem; padding:1rem 1.5rem; }
.btn-ghost:hover { color:#93c5fd; }

footer.site { border-top:1px solid hsla(0,0%,100%,.04); padding:2.5rem 1.5rem; text-align:center; color:#6b7280; font-size:.8125rem; }
footer.site p + p { margin-top:.5rem; }
footer.site nav { margin-bottom:1rem; display:flex; gap:1.5rem; justify-content:center; color:#9ca3af; font-size:.875rem; }
footer.site nav a:hover { color:#fff; }