:root {
  --primary: #2563eb;
  --secondary: #22d3ee;
  --dark: #0f172a;
  --light: #f9fafb;
  --muted: #6b7280;
  --radius: 1rem;
  --shadow: 0 4px 20px rgba(0,0,0,.1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:"Inter",system-ui,sans-serif;background:var(--light);color:var(--dark);line-height:1.5}
.container{max-width:1100px;margin:auto;padding:2rem}
a{text-decoration:none;color:inherit}
header.nav{background:var(--dark);color:white;box-shadow:var(--shadow)}
.nav__content{display:flex;align-items:center;justify-content:space-between}
.brand__logo{font-size:2rem;color:var(--secondary)}
.nav__links a{margin-left:1.5rem;transition:.2s}
.nav__links a:hover{color:var(--secondary)}
.btn{padding:.7rem 1.4rem;border-radius:.5rem;border:none;cursor:pointer;font-weight:600;transition:.3s}
.btn--primary{background:var(--primary);color:white}
.btn--primary:hover{background:#1e3a8a}
.btn--white{background:white;color:var(--primary)}
.btn--ghost{border:1px solid var(--primary);color:var(--primary);background:none}
.hero{display:flex;align-items:center;justify-content:center;min-height:90vh;background:linear-gradient(135deg,#22d3ee,#2563eb);color:white;text-align:left;padding:3rem 2rem}
.hero__content{display:flex;flex-wrap:wrap;align-items:center;gap:3rem}
.hero__text{flex:1 1 500px}
.hero__art{flex:1 1 300px;text-align:center}
h1{font-size:3rem;margin-bottom:1rem}
.lead{font-size:1.25rem;margin-bottom:2rem}
.gradient{background:linear-gradient(90deg,#22d3ee,#3b82f6);-webkit-background-clip:text;color:transparent}
.features{padding:5rem 0;background:white}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}
.card{background:var(--light);padding:2rem;border-radius:var(--radius);box-shadow:var(--shadow)}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.news{background:#f3f4f6;padding:4rem 0}
.soon{padding:4rem 0;text-align:center}
.inline-form{display:flex;justify-content:center;gap:1rem;margin-top:1rem}
.inline-form input{padding:.7rem 1rem;border:1px solid #ccc;border-radius:.5rem;flex:1;max-width:320px}
.footer{background:var(--dark);color:#ccc;padding:2rem 0}
.footer__content{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}
.footer a{color:#ccc;margin-left:1rem}
.footer a:hover{color:var(--secondary)}
.modal{border:none;border-radius:var(--radius);padding:2rem;max-width:400px;box-shadow:var(--shadow)}
.pill{background:var(--secondary);color:white;padding:.3rem .8rem;border-radius:50px;margin-right:.5rem}
.muted{color:var(--muted);font-size:.9rem}