*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,sans-serif;background:#0e0e1a;color:#ccc;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
a{color:#6c63ff;text-decoration:none}
a:hover{color:#9999ff}

/* NAV */
.nav{background:#13132a;border-bottom:1px solid #ffffff0a;padding:0 24px}
.nav-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{display:flex;align-items:center;gap:8px}
.logo-icon{width:28px;height:28px;background:linear-gradient(135deg,#6c63ff,#48cfad);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#fff}
.logo-text{font-size:16px;font-weight:700;background:linear-gradient(90deg,#6c63ff,#48cfad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:flex;gap:24px}
.nav-links a{font-size:14px;color:#888;transition:color .2s}
.nav-links a:hover{color:#e0e0f0}

/* HERO */
main{flex:1}
.hero{text-align:center;padding:80px 24px 60px;max-width:700px;margin:0 auto}
.hero-badge{display:inline-block;background:#6c63ff18;color:#9999ff;border:1px solid #6c63ff33;border-radius:20px;padding:4px 14px;font-size:12px;margin-bottom:20px}
.hero h1{font-size:clamp(32px,6vw,56px);font-weight:800;color:#fff;line-height:1.15;margin-bottom:20px}
.hero-sub{font-size:16px;color:#888;max-width:500px;margin:0 auto 32px}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-primary{background:linear-gradient(90deg,#6c63ff,#48cfad);color:#fff;padding:12px 28px;border-radius:10px;font-size:15px;font-weight:600;transition:opacity .2s}
.btn-primary:hover{opacity:.85;color:#fff}
.btn-secondary{background:#ffffff0a;color:#e0e0f0;border:1px solid #ffffff14;padding:12px 28px;border-radius:10px;font-size:15px;font-weight:600;transition:background .2s}
.btn-secondary:hover{background:#ffffff14;color:#fff}

/* FEATURES */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;max-width:900px;margin:0 auto;padding:0 24px 80px}
.feature{background:#13132a;border:1px solid #ffffff0a;border-radius:12px;padding:24px}
.feature-icon{font-size:28px;margin-bottom:12px}
.feature h3{font-size:16px;font-weight:700;color:#e0e0f0;margin-bottom:8px}
.feature p{font-size:13px;color:#666}

/* PAGE (privacy/support) */
.page{flex:1;padding:60px 24px}
.page-inner{max-width:720px;margin:0 auto}
.page-inner h1{font-size:32px;font-weight:800;color:#fff;margin-bottom:8px}
.updated{font-size:12px;color:#555;margin-bottom:28px}
.page-inner h2{font-size:18px;font-weight:700;color:#e0e0f0;margin:28px 0 10px}
.page-inner p{color:#888;margin-bottom:12px}
.page-inner ul,.page-inner ol{padding-left:20px;color:#888;margin-bottom:12px}
.page-inner li{margin-bottom:6px}
.page-inner strong{color:#bbb}

/* FOOTER */
.footer{background:#0a0a14;border-top:1px solid #ffffff07;padding:20px 24px;text-align:center}
.footer p{font-size:12px;color:#444}
.footer a{color:#555}
.footer a:hover{color:#888}

@media(max-width:600px){
  .hero{padding:50px 20px 40px}
  .nav-links{gap:16px}
}