:root{
  --bg:#050507;
  --surface:#0d0b12;
  --surface2:#13101a;
  --text:#fbf9ff;
  --muted:#aaa4b5;
  --border:rgba(255,255,255,.09);
  --purple:#a44dff;
  --purple2:#6f2cff;
  --pink:#d45cff;
  --orange:#ff9138;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(800px 600px at 50% -5%,rgba(137,58,255,.23),transparent 62%),
    radial-gradient(600px 450px at 8% 30%,rgba(255,132,52,.08),transparent 60%),
    var(--bg);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}
.nav-wrap{
  position:sticky;top:0;z-index:50;
  background:rgba(5,5,7,.74);backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(255,255,255,.06)
}
nav{height:74px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;gap:11px;align-items:center;font-weight:800;letter-spacing:-.02em}
.logo{
  width:34px;height:34px;border-radius:12px;
  background:conic-gradient(from 220deg,var(--orange),var(--purple),#5a35ff,var(--orange));
  box-shadow:0 0 34px rgba(155,70,255,.4);position:relative
}
.logo:after{
  content:"";position:absolute;inset:8px;transform:rotate(45deg);
  background:white;clip-path:polygon(50% 0,65% 35%,100% 50%,65% 65%,50% 100%,35% 65%,0 50%,35% 35%)
}
.nav-links{display:flex;align-items:center;gap:26px;color:#c2bdca;font-size:14px}
.nav-links a:hover{color:white}
.nav-cta,.button{
  padding:12px 18px;border-radius:12px;font-weight:750;
  background:linear-gradient(135deg,var(--purple2),var(--purple));
  box-shadow:0 14px 34px rgba(111,44,255,.27)
}
.hero{padding:112px 0 80px;text-align:center;overflow:hidden}
.pill{
  display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border-radius:999px;
  border:1px solid rgba(182,118,255,.28);background:rgba(146,67,255,.08);
  color:#d7b8ff;font-size:13px;font-weight:700
}
.hero h1{
  margin:22px auto 20px;max-width:900px;
  font-size:clamp(52px,8vw,92px);line-height:.98;letter-spacing:-.065em
}
.gradient-text{
  background:linear-gradient(100deg,#fff 15%,#d4b4ff 50%,#ffb46f);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero-copy{max-width:730px;margin:0 auto;color:var(--muted);font-size:21px}
.hero-actions{display:flex;justify-content:center;gap:14px;margin-top:34px;flex-wrap:wrap}
.button.secondary{background:rgba(255,255,255,.06);box-shadow:none;border:1px solid var(--border)}
.orb{
  width:min(520px,90vw);aspect-ratio:1;margin:58px auto 0;border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.65),transparent 6%),
    radial-gradient(circle at 45% 40%,#8f48ff,transparent 32%),
    radial-gradient(circle at 62% 58%,#ff8945,transparent 24%),
    radial-gradient(circle at 50% 55%,#3a0b72 10%,#0a0711 63%);
  box-shadow:0 0 90px rgba(126,45,255,.4),inset 0 0 80px rgba(255,255,255,.08);
  position:relative
}
.orb:after{
  content:"";position:absolute;inset:-28%;border-radius:50%;
  background:radial-gradient(circle,rgba(136,56,255,.18),transparent 55%);
  filter:blur(20px);z-index:-1
}
.section{padding:90px 0}
.kicker{color:#bd7cff;font-weight:800;text-transform:uppercase;letter-spacing:.13em;font-size:12px}
.section h2{font-size:clamp(38px,5vw,60px);line-height:1.06;letter-spacing:-.045em;margin:12px 0 18px}
.section-lead{color:var(--muted);font-size:19px;max-width:680px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.card{
  border:1px solid var(--border);border-radius:24px;padding:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  box-shadow:inset 0 1px rgba(255,255,255,.04)
}
.card-icon{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:rgba(158,74,255,.13);color:#c993ff;font-size:21px;margin-bottom:20px
}
.card h3{font-size:22px;margin:0 0 9px}
.card p{color:var(--muted);margin:0}
.screens{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:end;
  margin-top:46px
}
.phone{
  border-radius:32px;overflow:hidden;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 60px rgba(0,0,0,.45);background:#050507
}
.phone:nth-child(2),.phone:nth-child(4){transform:translateY(34px)}
.story{
  display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center
}
.story-panel{
  border-radius:30px;padding:42px;border:1px solid var(--border);
  background:
    radial-gradient(circle at 80% 20%,rgba(166,74,255,.18),transparent 35%),
    rgba(255,255,255,.025)
}
.story-panel blockquote{font-size:29px;line-height:1.3;margin:0}
.story-panel small{display:block;color:var(--muted);margin-top:20px}
.faq{display:grid;gap:12px;margin-top:36px}
.faq details{border:1px solid var(--border);border-radius:16px;padding:18px 20px;background:rgba(255,255,255,.025)}
.faq summary{cursor:pointer;font-weight:750}
.faq p{color:var(--muted)}
.cta-band{
  text-align:center;border:1px solid rgba(167,91,255,.3);border-radius:30px;padding:64px 28px;
  background:radial-gradient(circle at 50% 0,rgba(143,55,255,.24),transparent 60%),#0d0a13
}
.legal{padding:70px 0 100px;max-width:860px}
.legal h1{font-size:54px;letter-spacing:-.045em;margin-bottom:8px}
.legal h2{margin-top:38px;font-size:25px}
.legal h3{margin-top:26px}
.legal p,.legal li{color:#c6c0ce}
.notice{padding:18px 20px;border-radius:15px;background:rgba(157,77,255,.09);border:1px solid rgba(157,77,255,.3)}
footer{border-top:1px solid var(--border);padding:34px 0 48px;color:#918a99;font-size:14px}
.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
@media(max-width:900px){
  .feature-grid{grid-template-columns:1fr}
  .screens{grid-template-columns:repeat(2,1fr)}
  .screens .phone:last-child{display:none}
  .phone:nth-child(2),.phone:nth-child(4){transform:none}
  .story{grid-template-columns:1fr}
}
@media(max-width:620px){
  .nav-links a:not(.nav-cta){display:none}
  .hero{padding-top:80px}.hero h1{font-size:52px}
  .screens{grid-template-columns:1fr 1fr;gap:10px}
  .legal h1{font-size:42px}
}