:root { color-scheme: light; --ink:#123b37; --muted:#52706b; --line:#c9e1dd; --mint:#e9f5f2; --teal:#006b61; --orange:#f28c28; }
* { box-sizing:border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; color:var(--ink); background:#fbfdfc; line-height:1.5; }
.site-header, main, footer { width:min(1120px, calc(100% - 40px)); margin-inline:auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; min-height:76px; border-bottom:1px solid var(--line); }
.brand { color:var(--teal); font-size:1.1rem; font-weight:800; letter-spacing:.14em; text-decoration:none; }
nav { display:flex; align-items:center; gap:24px; } nav a { color:var(--ink); text-decoration:none; font-size:.95rem; } nav a:hover { color:var(--teal); }
.nav-button, .button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:8px; font-weight:700; text-decoration:none; }
.nav-button, .primary { color:#fff; background:var(--teal); } .secondary { color:var(--teal); border:1px solid var(--line); background:#fff; }
.hero { padding:clamp(72px, 12vw, 150px) 0 100px; max-width:780px; } .eyebrow { margin:0 0 14px; color:var(--orange); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin:0; max-width:760px; font-size:clamp(2.5rem, 6vw, 5rem); line-height:1.02; letter-spacing:-.03em; } h2 { margin:0 0 8px; font-size:1.15rem; }
.lead { max-width:620px; margin:24px 0 0; color:var(--muted); font-size:1.2rem; } .actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding-bottom:80px; } article { border-top:3px solid var(--orange); padding:22px; background:var(--mint); } article p { margin:0; color:var(--muted); }
footer { display:flex; justify-content:space-between; gap:16px; padding:22px 0 30px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
.register-page { min-height:80vh; padding-top:10vh; } .register-page h1 { font-size:clamp(2.2rem, 5vw, 4rem); }
@media (max-width:700px) { .site-header { align-items:flex-start; gap:16px; padding:18px 0; } nav { flex-wrap:wrap; justify-content:flex-end; gap:12px; } nav a:not(.nav-button) { display:none; } .hero { padding-top:72px; } .feature-grid { grid-template-columns:1fr; } footer { flex-direction:column; } }