:root{
  --bg:#080A0C; --card:#0E1116; --muted:#98A2B3; --line:#1F2937;
  --acc:#22FF88; --acc-2:#0CF; --white:#F8FAFC;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 75% -10%, rgba(34,255,136,.12), transparent 60%),
              radial-gradient(900px 500px at -10% 20%, rgba(0,204,255,.10), transparent 60%),
              var(--bg);
  color:var(--white); line-height:1.6;
}
a{color:var(--acc); text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:24px}
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(6px);
  background:linear-gradient(to bottom, rgba(8,10,12,.85), rgba(8,10,12,.35));
  border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:40px; height:40px} .logo img{display:block; width:100%; height:auto}
.brand h1{font-size:18px; margin:0; letter-spacing:.4px}
.cta{display:flex; gap:10px; align-items:center}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color:var(--white);
  transition:transform .15s ease, border-color .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.16); box-shadow:0 8px 30px -12px rgba(34,255,136,.35)}
.btn.primary{background:linear-gradient(180deg, rgba(34,255,136,.25), rgba(34,255,136,.16)); color:#05140c}
.hero{padding:84px 0 36px} .hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center}
.h-eyebrow{color:var(--acc); text-transform:uppercase; letter-spacing:.2em; font-weight:700; font-size:.85rem}
.h-title{font-size:clamp(32px, 4.2vw, 56px); line-height:1.08; margin:.5rem 0 1rem}
.h-sub{color:var(--muted); font-size:1.1rem; margin:0 0 1.5rem}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.section{padding:56px 0} .section h2{font-size:28px; margin:0 0 20px}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; min-height:180px}
.card h3{margin:6px 0 8px; font-size:18px} .card p{margin:0; color:#C7D0DB}
.split{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center}
.list{display:grid; gap:10px} .list li{background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.08); padding:12px 14px; border-radius:12px}
.mock{position:relative; background:linear-gradient(180deg,#0b0f14,#0e1319); border:1px solid rgba(255,255,255,.06); border-radius:18px; overflow:hidden; box-shadow:0 20px 60px -30px rgba(0,0,0,.6)}
footer{border-top:1px solid rgba(255,255,255,.06); margin-top:56px; background:rgba(0,0,0,.3)}
.foot{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; padding:18px 24px}
.small{color:#9AA4B2; font-size:.95rem}
@media (max-width: 980px){.hero-inner{grid-template-columns:1fr} .grid{grid-template-columns:1fr 1fr} .split{grid-template-columns:1fr}}
@media (max-width: 640px){.grid{grid-template-columns:1fr}}