:root {
  color-scheme: dark;
  --bg:#0a0917;
  --panel:#17152b;
  --border:#34304d;
  --purple:#9565ff;
  --text:#f7f4ff;
  --muted:#b1abc9;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,sans-serif;
}
a { color:inherit;text-decoration:none }
.container { width:min(1120px,92%);margin:auto }
nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 0;
  gap:18px;
}
.logo { display:flex;align-items:center;gap:11px;font-weight:800 }
.logo-icon {
  display:grid;place-items:center;
  width:39px;height:39px;border-radius:12px;
  background:linear-gradient(135deg,#8250ff,#bd69fc);
  font-size:21px;
}
.navlinks { display:flex;gap:25px;color:var(--muted);font-size:14px }
.navlinks a:hover { color:white }
.btn {
  display:inline-block;
  padding:14px 24px;
  background:linear-gradient(135deg,#8a5cf6,#ae60fd);
  border-radius:12px;
  font-weight:700;
  transition:transform .2s;
}
.btn:hover { transform:translateY(-2px) }
.btn.alt {
  background:#24213b;
  border:1px solid var(--border);
}
.btn.disabled { opacity:.55;cursor:default }
.hero {
  text-align:center;
  padding:110px 0 100px;
  background:
    radial-gradient(ellipse at 50% 10%,#49239170,transparent 60%);
}
.tag {
  display:inline-block;
  border:1px solid #7955ae;
  background:#37224f;
  color:#d5bcff;
  border-radius:30px;
  font-size:12px;
  padding:9px 16px;
  letter-spacing:.05em;
}
h1 {
  font-size:clamp(42px,7vw,78px);
  letter-spacing:-.055em;
  line-height:1.07;
  margin:25px 0;
}
.gradient {
  background:linear-gradient(90deg,#a981ff,#e7bbff,#8cb9ff);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
}
.hero p {
  font-size:18px;
  color:var(--muted);
  max-width:650px;
  margin:0 auto 32px;
  line-height:1.8;
}
.actions { display:flex;gap:12px;justify-content:center;flex-wrap:wrap }
section { padding:78px 0 }
.section-title { font-size:clamp(28px,4vw,42px);margin:0 0 14px }
.section-sub { color:var(--muted);line-height:1.8;margin:0 0 34px }
.grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.card {
  padding:27px;
  background:linear-gradient(160deg,#201b38,#121123);
  border:1px solid var(--border);
  border-radius:22px;
}
.card h3 { font-size:20px;margin:12px 0 }
.card p { color:var(--muted);line-height:1.7 }
.symbol { font-size:34px;color:#bf9cff }
.label {
  display:inline-block;
  background:#302747;
  border-radius:30px;
  font-size:12px;
  color:#cbb9ff;
  padding:6px 12px;
}
.banner {
  background:linear-gradient(135deg,#34205f,#1c193b);
  border:1px solid #60468d;
  padding:48px 35px;
  text-align:center;
  border-radius:26px;
}
.banner p { color:#d0c6e7;line-height:1.8 }
details {
  border-bottom:1px solid var(--border);
  padding:18px 4px;
}
summary { cursor:pointer;font-weight:650 }
details p { color:var(--muted);line-height:1.7 }
footer {
  border-top:1px solid var(--border);
  padding:35px 0;
  color:var(--muted);
  font-size:13px;
}
.footerline { display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap }
.download-grid { margin-top:35px }
.store { font-size:12px;color:#d0b8ff }
@media(max-width:750px) {
  .grid { grid-template-columns:1fr }
  .navlinks { display:none }
  .hero { padding:75px 0 }
  section { padding:55px 0 }
  .banner { padding:32px 20px }
}