:root{
  --blue:#2563EB;
  --blue-900:#1E3A8A;
  --orange:#F97316;
  --text:#0f172a;
  --muted:#475569;
  --bg:#F8FAFF;
  --card:#ffffff;
  --ring:rgba(37,99,235,0.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  color:var(--text);
  background:var(--bg);
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

.nav{
  background:var(--card);
  border-bottom:1px solid #e5e7eb;
  position:sticky;top:0;z-index:20
}
.nav-inner{display:flex;align-items:center;gap:10px;height:64px}
.brand-mark{width:28px;height:28px;border-radius:6px}
.brand{font-weight:800;letter-spacing:.2px}

.hero{
  background:linear-gradient(180deg, #EEF2FF 0%, #F8FAFF 100%);
  padding:56px 0 24px;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:40px;
  align-items:center;
}
.hero-text h1{
  font-size:40px;line-height:1.1;margin:0 0 12px;color:var(--blue-900)
}
.accent{color:var(--orange)}
.lead{font-size:18px;color:var(--muted);margin:0 0 22px;max-width:52ch}

.signup{display:flex;gap:10px;align-items:center}
.signup input{
  flex:1;
  height:48px;
  padding:0 14px;
  border:1px solid #d1d5db;
  border-radius:10px;
  outline:none;
  box-shadow:0 0 0 0 var(--ring);
  transition:box-shadow .15s,border-color .15s;
  font-size:16px;
  background:#fff;
}
.signup input:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--ring)}
.signup button{
  height:48px;
  padding:0 18px;
  border-radius:10px;
  border:none;
  background:var(--blue);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.signup button:hover{filter:brightness(.95)}
.small.hint{color:#6b7280;margin-top:10px}

.hero-art img{
  width:100%;
  border-radius:16px;
  box-shadow:0 18px 40px rgba(2,6,23,0.08);
}

.features{padding:36px 0 60px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:var(--card);
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:18px;
  box-shadow:0 10px 24px rgba(2,6,23,0.04);
}
.card h3{margin:6px 0 6px}
.card p{margin:0;color:#4b5563}

.footer{
  padding:18px 0;
  border-top:1px solid #e5e7eb;
  background:#fff;
}
.footer-inner{display:flex;align-items:center;gap:14px;justify-content:space-between}
.footer .brandline{font-weight:800}
.footer .tag{font-size:12px;color:#64748b}
.footer img{width:28px;height:28px;border-radius:6px}
.footer .link{color:var(--blue);text-decoration:none}
.footer .link:hover{text-decoration:underline}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.thanks{
  background:#ecfdf5;
  color:#065f46;
  border:1px solid #a7f3d0;
  border-radius:10px;
  padding:12px 14px;
  font-weight:600;
}

@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr;gap:24px}
  .hero-text h1{font-size:34px}
  .grid{grid-template-columns:1fr}
}