/* Base */
:root{
  --bg:#0b1720;
  --bg-alt:#0e1e29;
  --fg:#d9f2ff;
  --muted:#a8c3d4;
  --accent:#d7ff4d;
  --glass:rgba(8,22,33,.5);
  --border:rgba(255,255,255,.08);
  --ring:rgba(215,255,77,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--fg);
  background:radial-gradient(1200px 800px at 80% -10%, #1b3950 0%, var(--bg) 60%);
  line-height:1.6;
}

/* Nav */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(to bottom, rgba(11,23,32,.9), rgba(11,23,32,.5));
  border-bottom:1px solid var(--border);
}
.brand{font-weight:800; letter-spacing:.4px; text-decoration:none; color:var(--fg)}
.links a{color:var(--fg); text-decoration:none; margin-left:20px; opacity:.9}
.links a:hover{opacity:1}
@media (max-width:720px){
  .links{display:none}
}

/* Hero */
.hero{position:relative; min-height:90vh; display:grid; place-items:center; overflow:hidden; border-bottom:1px solid var(--border)}
.hero-bg{position:absolute; inset:0; z-index:-2}
.hero-bg img{width:100%; height:100%; object-fit:cover; opacity:.28; filter:contrast(110%) saturate(105%)}
.overlay{position:absolute; inset:0; background:radial-gradient(900px 600px at 30% 20%, rgba(0,255,163,.12), transparent 60%), linear-gradient(180deg, rgba(11,23,32,.4), rgba(11,23,32,.9)); z-index:-1}
.hero-content{max-width:960px; padding:56px 24px}
.hero h1{
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
  line-height:1.05; margin:0 0 12px 0; letter-spacing:.2px;
  text-wrap:balance;
}
.hero .accent{color:var(--accent)}
.subtitle{color:var(--muted); font-size:clamp(1rem, 1.2vw + .5rem, 1.35rem); max-width:60ch}
.cta{
  display:inline-block; margin-top:22px; padding:14px 22px; border-radius:999px;
  text-decoration:none; color:#0b1720; background:var(--accent); font-weight:700;
  box-shadow:0 10px 30px var(--ring), inset 0 0 0 1px rgba(0,0,0,.06);
  transition:transform .06s ease;
}
.cta:active{transform:translateY(1px)}
.powered{margin-top:28px; color:var(--muted); font-size:.95rem}
.logo{display:inline-flex; gap:.35rem; align-items:center; font-weight:700}

/* Sections */
.section{padding:72px 20px}
.section.alt{background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.container{max-width:980px; margin:0 auto}
h2{font-size: clamp(1.6rem, 1.8vw + .8rem, 2.2rem); margin:0 0 12px 0}
.cards{list-style:none; padding:0; margin:18px 0 0 0; display:grid; gap:12px}
.cards li{
  background:var(--glass);
  border:1px solid var(--border); padding:14px 16px; border-radius:16px;
}
.timeline{list-style:none; padding:0; margin:18px 0 0 0; display:grid; gap:14px}
.timeline li{
  border-left:2px solid var(--accent); padding:8px 16px; background:var(--glass);
  border-radius:12px; border:1px solid var(--border)
}
.timeline span{font-weight:700; margin-right:6px; color:var(--accent)}
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px; background:var(--glass);
  color:var(--fg); text-decoration:none; border:1px dashed var(--border); cursor:not-allowed;
}

/* FAQs */
.faqs details{background:var(--glass); border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:10px}
.faqs summary{cursor:pointer; font-weight:600}
.faqs p{margin:.4rem 0 0 0}

/* Subscribe */
.subscribe{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.subscribe input{
  flex:1 1 300px; min-width:220px; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#0f2230; color:var(--fg)
}
.subscribe button{
  padding:12px 16px; border-radius:12px; border:0; background:var(--accent); color:#0b1720; font-weight:800; cursor:pointer
}
.form-msg{min-height:1.2em; margin-left:2px; color:var(--muted)}
.small{color:var(--muted); font-size:.9rem}

/* Footer */
.footer{border-top:1px solid var(--border); padding:28px 20px; background:#0a141c}
.footer .container{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.footer .top{color:var(--muted); text-decoration:none}
.footer .top:hover{color:var(--fg)}

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