:root { color-scheme: dark; font-family: system-ui, sans-serif; --bg:#10131a; --card:#191e29; --text:#eef2ff; --muted:#aab3c5; --accent:#7dd3fc; }
* { box-sizing: border-box; } body { margin:0; background:var(--bg); color:var(--text); line-height:1.7; } a { color:var(--accent); text-decoration:none; } nav { max-width:1080px; margin:auto; padding:24px; display:flex; gap:28px; align-items:center; } nav strong { margin-right:auto; } .hero { min-height:70vh; background:radial-gradient(circle at 80% 20%, #263b63, transparent 45%); } .hero-content, main { max-width:1080px; margin:auto; padding:90px 24px; } h1 { max-width:700px; font-size:clamp(2.5rem,7vw,5rem); line-height:1.1; margin:15px 0; } h2 { font-size:2rem; } .eyebrow, .card span { color:var(--accent); letter-spacing:.12em; font-size:.8rem; } .button { display:inline-block; margin-top:24px; padding:10px 18px; border:1px solid var(--accent); border-radius:8px; } .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; } .card { padding:25px; background:var(--card); border:1px solid #293246; border-radius:14px; } .card h3 { margin:8px 0; } .card p, .about p, footer { color:var(--muted); } .about { padding:70px 0; } footer { max-width:1080px; margin:auto; padding:30px 24px; border-top:1px solid #293246; }