:root {
--orange: #FF8C00;
--red: #E63946;
--black: #0F0F0F;
--white: #FFFFFF;
--gray-100: #f2f2f2;
--gray-300: #c3c3c3;
--gray-500: #8e8e8e;
--gray-700: #3a3a3a;
--card: #151515;
--gradient-primary: linear-gradient(135deg, #FF8C00, #E63946);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: 'DM Sans', sans-serif;
background: var(--black);
color: var(--white);
line-height: 1.55;
}

/* Motion primitives */
.reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity .55s ease, transform .55s ease;
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.stagger-1 { transition-delay: .05s; }
.stagger-2 { transition-delay: .12s; }
.stagger-3 { transition-delay: .19s; }
.stagger-4 { transition-delay: .26s; }

.container {
width: min(1120px, 92vw);
margin-inline: auto;
}

/* NAV */
.nav {
position: fixed;
top: 0;
width: 100%;
z-index: 50;
background: rgba(15,15,15,.72);
border-bottom: 1px solid rgba(255,140,0,.10);
backdrop-filter: blur(10px);
transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.nav.scrolled {
background: rgba(15,15,15,.92);
border-bottom-color: rgba(255,140,0,.18);
backdrop-filter: blur(16px);
}
.nav-inner {
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.brand {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: 1.45rem;
letter-spacing: -.03em;
}
.brand .four { color: var(--orange); }
.brand .dot { color: var(--red); }
.nav-links {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
.nav-links a {
color: var(--gray-300);
text-decoration: none;
font-size: .83rem;
text-transform: uppercase;
letter-spacing: .08em;
position: relative;
transition: color .2s ease;
}
.nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 1px;
background: linear-gradient(90deg, var(--orange), var(--red));
transform: scaleX(0);
transform-origin: left;
transition: transform .2s ease;
}
.nav-links a:hover { color: var(--orange); }
.nav-links a:hover::after { transform: scaleX(1); }
.cta-nav {
border: 1px solid rgba(255,140,0,.35);
background: rgba(255,140,0,.10);
color: var(--orange);
border-radius: 999px;
padding: .58rem .95rem;
text-decoration: none;
font-weight: 700;
font-size: .87rem;
}

/* HERO */
.hero {
position: relative;
padding: 130px 0 88px;
overflow: hidden;
}
.hero::before,
.hero::after {
content: "";
position: absolute;
border-radius: 999px;
pointer-events: none;
}
.hero::before {
width: 620px; height: 620px;
top: -280px; right: -220px;
background: radial-gradient(circle, rgba(255,140,0,.18), transparent 70%);
}
.hero::after {
width: 520px; height: 520px;
bottom: -300px; left: -200px;
background: radial-gradient(circle, rgba(230,57,70,.13), transparent 70%);
}
.badge {
display: inline-flex;
gap: .5rem;
align-items: center;
font-size: .74rem;
text-transform: uppercase;
letter-spacing: .13em;
color: var(--orange);
border: 1px solid rgba(255,140,0,.3);
background: rgba(255,140,0,.06);
border-radius: 999px;
padding: .45rem .85rem;
}
.badge::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--orange);
}
h1 {
font-family: 'Outfit', sans-serif;
font-size: clamp(2rem, 4.8vw, 3.8rem);
line-height: 1.05;
margin: 1rem 0 1rem;
letter-spacing: -.04em;
max-width: 900px;
}
.sub {
color: var(--gray-300);
font-size: clamp(1rem, 2vw, 1.2rem);
max-width: 760px;
}
.hero-bullets {
margin: 1.1rem 0 1.6rem;
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: .7rem 1.5rem;
max-width: 860px;
}
.hero-bullets li {list-style: none;
color: var(--gray-100);
}
.hero-bullets li::before {
content: "✓ ";
color: var(--orange);
font-weight: 700;
}
.cta-row {
display: flex;
flex-wrap: wrap;
gap: .8rem;
}
.btn {
display: inline-block;
border-radius: 12px;
padding: .88rem 1.05rem;
text-decoration: none;
font-weight: 700;
transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
background: var(--gradient-primary);
color: var(--white);
box-shadow: 0 8px 22px rgba(255,140,0,.16);
}
.btn-primary:hover { box-shadow: 0 12px 26px rgba(230,57,70,.18); }
.btn-secondary {
border: 1px solid rgba(255,255,255,.15);
color: var(--white);
background: rgba(255,255,255,.03);
}
.btn-secondary:hover { border-color: rgba(255,140,0,.35); }

/* Sections */
section {
padding: 78px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.section-kicker {
color: var(--orange);
text-transform: uppercase;
letter-spacing: .15em;
font-size: .7rem;
font-family: 'Space Mono', monospace;
}
h2 {
font-family: 'Outfit', sans-serif;
font-size: clamp(1.7rem, 3.5vw, 2.6rem);
letter-spacing: -.02em;
margin: .4rem 0 0.8rem;
}
.lead { color: var(--gray-300); max-width: 760px; }

.grid-2 {
margin-top: 1.3rem;
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 1rem;
}
.card {
background: linear-gradient(180deg, #171717, #131313);
border: 1px solid rgba(255,255,255,.07);
border-radius: 14px;
padding: 1rem;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover {
transform: translateY(-2px);
border-color: rgba(255,140,0,.24);
box-shadow: 0 12px 26px rgba(0,0,0,.28);
}
.card h3 {
margin: 0 0 .4rem;
font-size: 1rem;
}
.card p { margin: 0; color: var(--gray-300); }

.timeline {
margin-top: 1rem;
display: grid;
gap: .7rem;
}
.step {
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
padding: .88rem 1rem;
background: rgba(255,255,255,.02);
}
.step strong { color: var(--orange); }
.keyline {
margin-top: 1rem;
font-weight: 700;
color: #ffd4ab;
}

.faq {
display: grid;
gap: .65rem;
margin-top: .9rem;
}
.faq details {
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px;
padding: .7rem .8rem;
background: rgba(255,255,255,.02);
}
.faq summary { cursor: pointer; font-weight: 700; }
.faq p { color: var(--gray-300); }

.form-wrap {
margin-top: 1rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: .8rem;
}
.input, textarea, select {
width: 100%;
background: #121212;
color: var(--white);
border: 1px solid rgba(255,255,255,.12);
border-radius: 10px;
padding: .8rem;
font: inherit;
transition: border-color .2s ease, box-shadow .2s ease;
}
.input:focus, textarea:focus, select:focus {
outline: none;
border-color: rgba(255,140,0,.55);
box-shadow: 0 0 0 3px rgba(255,140,0,.14);
}
textarea { min-height: 130px; resize: vertical; }
.form-full { grid-column: 1 / -1; }
.note { color: var(--gray-500); font-size: .9rem; margin-top: .6rem; }
.form-msg { margin-top: .6rem; color: #ffd8b0; display:none; }

footer {
border-top: 1px solid rgba(255,255,255,.06);
padding: 28px 0 40px;
}
.footer-logo { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 1.3rem; }
.footer-logo .four { color: var(--orange); }
.footer-logo .dot { color: var(--red); }
.footer-meta { color: var(--gray-500); margin-top: .4rem; }

@media (max-width: 980px) {
.nav-links { display:none; }
.hero-bullets, .grid-2, .form-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
.cta-nav { display:none; }
}