:root{
  --bg:#0b0c10;
  --panel:#121418;
  --text:#e9eef5;
  --muted:#b8c0cc;
  --accent:#72e0a5;
  --accent-2:#61dafb;
  --maxw:1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg, #0b0c10 0%, #111318 100%);
  color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.site-header{
  position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(11,12,16,0.6); border-bottom:1px solid rgba(255,255,255,0.06);
}
.brand{display:flex;align-items:center;gap:10px;padding:14px 0}
.logo-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.brand-name{font-weight:700;letter-spacing:0.2px}

.nav a{color:var(--muted);text-decoration:none;margin-left:16px}
.nav a:hover{color:var(--text)}

.hero{padding:88px 0 48px;text-align:center}
.hero h1{margin:0 0 10px;font-size:44px;line-height:1.1;letter-spacing:0.2px}
.subhead{margin:0 auto 28px;max-width:680px;color:var(--muted)}

.store-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.store-button img{height:48px;display:block;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
.store-button img:hover{transform:translateY(-1px);transition:transform .15s ease}

.features{padding:36px 0 64px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; padding:20px; min-height:150px;
}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}

.cta{
  padding:56px 0 80px; text-align:center;
  background:radial-gradient(1200px 600px at 50% -10%, rgba(114,224,165,0.18), rgba(0,0,0,0) 70%);
}
.cta h2{margin:0 0 8px;font-size:28px}
.cta p{margin:0 0 20px;color:var(--muted)}

.site-footer{
  border-top:1px solid rgba(255,255,255,0.08);
  padding:18px 0; color:var(--muted); background:#0b0c10;
}
.site-footer .nav a{margin-left:12px;color:var(--muted)}
.site-footer .nav a:hover{color:var(--text)}

@media (max-width: 900px){
  .grid-3{grid-template-columns:1fr}
  .hero h1{font-size:36px}
}