:root { --bg:#09111f; --panel:#111d30; --text:#ecf4ff; --muted:#9caec4; --accent:#72e2a8; --accent-dark:#073b2a; --line:#263b58; --warning:#ffd36d; --danger:#ff8d96; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 85% 0,#163b4a 0,transparent 30%),var(--bg); color:var(--text); font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.site-header { max-width:1120px; margin:auto; padding:22px 28px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.brand { color:var(--text); text-decoration:none; display:flex; align-items:center; gap:9px; font-size:1.24rem; font-weight:800; letter-spacing:-.04em; }.brand-mark { display:grid; place-items:center; width:32px; height:32px; background:var(--accent); color:#06140f; border-radius:9px; }
nav { display:flex; gap:4px; }.nav-link,.button { border:0; cursor:pointer; font:inherit; }.nav-link { padding:8px 11px; border-radius:7px; color:var(--muted); background:transparent; }.nav-link:hover,.nav-link.active { color:var(--text); background:#1a2b43; }
main { max-width:1120px; margin:auto; padding:35px 28px 70px; }.view { display:none; }.view.active { display:block; animation:appear .25s ease-out; } @keyframes appear { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.hero { padding:76px 0 72px; max-width:735px; }.eyebrow { margin:0 0 12px; color:var(--accent); font-size:.75rem; font-weight:800; letter-spacing:.12em; }.hero h1,.section-heading h1 { margin:0; font-size:clamp(2.5rem,7vw,5.4rem); line-height:1; letter-spacing:-.065em; }.hero-copy { max-width:650px; color:var(--muted); font-size:1.15rem; margin:24px 0 30px; }.hero-actions,.form-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { border-radius:8px; padding:12px 17px; font-weight:750; }.primary { color:#052419; background:var(--accent); }.primary:hover { background:#a0f1c4; }.secondary { color:var(--text); background:#1a2b43; }.text { color:var(--muted); background:transparent; }.text:hover { color:var(--danger); }
.how-it-works { border-top:1px solid var(--line); padding-top:25px; }.how-it-works h2 { font-size:1rem; }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.steps article { padding:18px; background:rgba(17,29,48,.7); border:1px solid var(--line); border-radius:10px; }.steps span { color:var(--accent); font-weight:800; }.steps h3 { margin:9px 0 4px; }.steps p,.section-heading p { margin:0; color:var(--muted); }
.section-heading { margin:22px 0 30px; }.section-heading h1 { font-size:clamp(2.7rem,6vw,4.2rem); margin-bottom:14px; }.panel { background:rgba(17,29,48,.92); border:1px solid var(--line); border-radius:12px; padding:24px; }.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }.form-grid label { display:grid; gap:7px; color:#c7d4e3; font-size:.9rem; font-weight:650; }.form-grid input { width:100%; padding:11px 12px; color:var(--text); background:#091524; border:1px solid #314866; border-radius:7px; font:inherit; }.form-grid input:focus { outline:2px solid var(--accent); outline-offset:1px; }.form-actions { grid-column:1/-1; padding-top:6px; }
.saved-card,.result { margin-top:22px; padding:22px; border-radius:12px; background:var(--panel); border:1px solid var(--line); }.saved-card h2,.result h2 { margin:0 0 12px; font-size:1.25rem; }.spec-list,.result-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.spec-list li,.result-list li { padding:9px 11px; background:#0a1626; border-radius:6px; }.result.ok { border-color:#297d55; }.result.review { border-color:#8a6c22; }.status { display:inline-block; margin-bottom:15px; padding:5px 9px; border-radius:999px; font-weight:750; font-size:.85rem; }.ok .status { color:#9df6c5; background:var(--accent-dark); }.review .status { color:var(--warning); background:#4b3b10; }.note { color:var(--muted); font-size:.9rem; margin:15px 0 0; }
footer { max-width:1120px; margin:auto; padding:22px 28px 35px; color:var(--muted); font-size:.85rem; } footer a { color:var(--accent); }
@media (max-width:650px) { .site-header { padding:17px 18px; align-items:flex-start; flex-direction:column; }.site-header nav { width:100%; justify-content:space-between; }.nav-link { padding:7px 5px; font-size:.88rem; } main { padding:18px 18px 50px; }.hero { padding:45px 0; }.steps,.form-grid,.spec-list,.result-list { grid-template-columns:1fr; }.panel { padding:18px; } }