*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#0A0A14; --surface:#12122A; --elevated:#1A1A35; --line:rgba(167,139,250,0.14);
  --accent:#A78BFA; --accent2:#7C5CF6; --text:#fff; --muted:#A5A5C4; --dim:#6B6B8F;
  --green:#34D399; --gold:#FCD34D;
}
html { scroll-behavior: smooth; }
body {
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text','Segoe UI',Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden;
}
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(720px 520px at 82% -8%, rgba(124,92,246,0.28), transparent 60%),
             radial-gradient(560px 460px at 4% 20%, rgba(167,139,250,0.09), transparent 55%);
}
body::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(167,139,250,0.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(167,139,250,0.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 16%, #000 0%, transparent 72%);
          mask-image:radial-gradient(circle at 50% 16%, #000 0%, transparent 72%);
}
.wrap { max-width:1120px; margin:0 auto; padding:0 28px; }
a { color:inherit; }

nav { display:flex; align-items:center; justify-content:space-between; padding:26px 0; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img { width:40px; height:40px; border-radius:11px; box-shadow:0 6px 20px rgba(124,92,246,0.45); }
.brand .word { font-size:22px; font-weight:800; letter-spacing:3px; color:var(--text); }
.brand-divider { width:1px; height:20px; background:var(--line); margin:0 4px; }
.brand-tag { font-size:15px; font-weight:600; color:var(--muted); letter-spacing:0.2px; }

.crumbs { padding:6px 0 0; font-size:13.5px; color:var(--dim); gap:8px; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--accent); }
.crumbs span { margin:0 4px; }

.hero { display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center; padding:34px 0 78px; }
.kicker { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.kicker::before { content:""; width:26px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--accent),transparent); }
h1 { font-size:clamp(38px,5.4vw,60px); font-weight:800; line-height:1.0; letter-spacing:-1.4px; margin-bottom:20px; }
.lede { font-size:18px; line-height:1.62; color:var(--muted); max-width:520px; margin-bottom:28px; }
.lede strong { color:var(--text); font-weight:600; }
.stats { display:flex; gap:30px; margin-bottom:30px; flex-wrap:wrap; }
.stat .n { font-size:30px; font-weight:800; letter-spacing:-0.5px; }
.stat .l { font-size:13px; color:var(--dim); margin-top:2px; }

.store-badge { display:inline-flex; align-items:center; gap:12px; background:var(--text); color:#06060d; padding:13px 22px 13px 20px; border-radius:14px; font-weight:700; box-shadow:0 10px 30px rgba(0,0,0,0.4); }
.store-badge svg { width:24px; height:24px; }
.store-badge .sub { display:block; font-size:11px; font-weight:600; color:#3a3a52; letter-spacing:0.3px; }
.store-badge .main { display:block; font-size:17px; line-height:1.1; }

.devices { position:relative; display:flex; align-items:center; justify-content:center; }
.phone { width:250px; border-radius:40px; background:#05050c; padding:9px; border:1px solid rgba(255,255,255,0.08); box-shadow:0 40px 80px -20px rgba(0,0,0,0.75); transform:rotate(-3deg); }
.phone img { display:block; width:100%; border-radius:32px; }

section.block { padding:66px 0; }
section.block.alt { background:linear-gradient(180deg, rgba(18,18,42,0.5), transparent); }
.section-head { max-width:640px; margin-bottom:36px; }
.eyebrow { font-size:13px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
h2 { font-size:clamp(27px,3.8vw,36px); font-weight:800; letter-spacing:-0.8px; line-height:1.08; margin-bottom:14px; }
.section-head p { color:var(--muted); font-size:16.5px; line-height:1.6; }

.units { display:flex; flex-direction:column; gap:9px; }
.unit { display:grid; grid-template-columns:88px 1fr auto; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:15px 18px; }
.unit .unum { font-size:12.5px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:var(--accent); }
.unit .utitle { font-size:15.5px; font-weight:600; }
.unit .ucards { font-size:13px; color:var(--dim); white-space:nowrap; }
.units-foot { margin-top:22px; font-size:14px; color:var(--dim); }
.units-foot strong { color:var(--muted); font-weight:600; }

.how { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.how-item { background:linear-gradient(180deg,var(--surface),#0d0d20); border:1px solid var(--line); border-radius:18px; padding:24px 22px; }
.how-item h3 { font-size:18px; font-weight:700; margin-bottom:8px; color:var(--accent); }
.how-item p { font-size:14.5px; color:var(--muted); line-height:1.6; }

.others { display:flex; flex-wrap:wrap; gap:10px; }
.others a { display:inline-block; background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:9px 17px; font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; }
.others a:hover { color:var(--text); border-color:var(--accent); }

footer { border-top:1px solid var(--line); padding:40px 0 60px; margin-top:20px; }
.foot-top { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:24px; }
.foot-links { display:flex; gap:24px; }
footer a { color:var(--muted); text-decoration:none; font-size:14px; }
footer a:hover { color:var(--accent); }
.disclaimer { font-size:11.5px; color:var(--dim); line-height:1.6; max-width:640px; }
.copyright { font-size:12.5px; color:var(--dim); margin-top:14px; }

@media (max-width:900px) {
  .hero { grid-template-columns:1fr; gap:16px; padding-bottom:36px; }
  .devices { order:-1; margin-top:6px; }
  .how { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .wrap { padding:0 20px; }
  .unit { grid-template-columns:1fr auto; }
  .unit .unum { grid-column:1 / -1; margin-bottom:-4px; }
  .stats { gap:22px; }
}