:root{
  --bg0:#070a12;
  --bg1:#0b1220;
  --ink:#e8eefc;
  --muted:rgba(232,238,252,.72);
  --muted2:rgba(232,238,252,.52);
  --line:rgba(255,255,255,.10);
  --glass:rgba(255,255,255,.06);
  --glass2:rgba(255,255,255,.10);
  --blue:#3b82f6;
  --cyan:#22d3ee;
  --violet:#8b5cf6;
  --good:#10b981;
  --warn:#f59e0b;
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --shadow2: 0 12px 28px rgba(0,0,0,.45);
  --r: 18px;
  --r2: 26px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 900px at 10% 10%, rgba(59,130,246,.14), transparent 60%),
              radial-gradient(900px 700px at 80% 20%, rgba(34,211,238,.10), transparent 55%),
              radial-gradient(900px 900px at 70% 80%, rgba(139,92,246,.12), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.95}

.bg{position:fixed;inset:0;pointer-events:none;z-index:-1}
.bg__grid{position:absolute;inset:-2px;background-image:
  linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 20%, black 0%, transparent 72%);
  opacity:.45;
}
.bg__glow{position:absolute;inset:0;background:
  radial-gradient(600px 500px at 20% 15%, rgba(59,130,246,.22), transparent 60%),
  radial-gradient(650px 520px at 70% 20%, rgba(34,211,238,.15), transparent 60%),
  radial-gradient(700px 620px at 60% 75%, rgba(139,92,246,.16), transparent 62%);
  filter: blur(12px);
  opacity:.75;
}

.container{width:min(1120px, calc(100% - 48px));margin:0 auto}

.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(7,10,18,.78), rgba(7,10,18,.52));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.brand__mark{width:28px;height:28px}
.brand__name{font-size:15px}

.nav__links{display:flex;gap:18px;align-items:center;color:var(--muted)}
.nav__links a{font-size:14px}
.nav__cta{display:flex;align-items:center;gap:10px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:42px;padding:0 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  color:var(--ink);
  font-weight:600;font-size:14px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform: translateY(-1px);background: rgba(255,255,255,.09);border-color: rgba(255,255,255,.18)}
.btn:active{transform: translateY(0px)}
.btn--primary{background: linear-gradient(135deg, rgba(59,130,246,.95), rgba(34,211,238,.72));border-color: rgba(59,130,246,.35)}
.btn--primary:hover{background: linear-gradient(135deg, rgba(59,130,246,1), rgba(34,211,238,.84))}
.btn--ghost{background: rgba(255,255,255,.04)}

.nav__menu{display:none;flex-direction:column;gap:4px;border:0;background:transparent;padding:10px;border-radius:10px}
.nav__menu span{display:block;width:18px;height:2px;background:rgba(255,255,255,.75);border-radius:2px}
.nav__drawer{border-top:1px solid rgba(255,255,255,.10);padding:14px 0}
.nav__drawer a{display:block;padding:10px 0;color:var(--muted)}

.hero{padding:64px 0 30px;position:relative}
.hero__inner{display:grid;grid-template-columns: 1.05fr .95fr;gap:40px;align-items:center}
.hero__copy{min-width:0}

.pill{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding:8px 12px;border-radius:999px;
  color:var(--muted);
  font-size:13px;
}
.dot{width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg, var(--cyan), var(--blue));box-shadow:0 0 16px rgba(34,211,238,.6)}

.hero__title{font-size: clamp(34px, 4.2vw, 54px);line-height:1.02;margin:16px 0 12px}
.hero__subtitle{color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 18px}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 16px}

.hero__stats{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px;margin-top:10px}
.stat{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);border-radius:14px;padding:12px 12px;box-shadow: var(--shadow2)}
.stat__k{font-weight:700;font-size:13px}
.stat__v{color:var(--muted2);font-size:13px;margin-top:4px}

.hero__art{position:relative}

.phone{position:relative;isolation:isolate}
.phone__frame{
  width:min(420px, 100%);
  aspect-ratio: 9/19;
  margin-left:auto;
  border-radius: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow);
  padding:14px;
}
.phone__notch{width:120px;height:26px;border-radius:999px;background:rgba(0,0,0,.55);margin:10px auto 0}
.phone__screen{
  margin-top:10px;
  height: calc(100% - 46px);
  border-radius: 28px;
  background: radial-gradient(600px 400px at 20% 10%, rgba(59,130,246,.18), transparent 60%),
              radial-gradient(500px 450px at 70% 25%, rgba(34,211,238,.12), transparent 60%),
              linear-gradient(180deg, rgba(11,18,32,1), rgba(7,10,18,1));
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  position:relative;
}
.phone__shadow{position:absolute;inset:auto 10% -18% 10%;height:120px;background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent);filter: blur(20px);z-index:-1}

.screen__top{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px}
.screen__title{font-weight:700;letter-spacing:.2px}
.screen__icons{display:flex;gap:8px}
.ic{width:18px;height:18px;border-radius:8px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10)}

.screen__card{margin:10px 16px 0;border-radius:18px;padding:14px;background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(34,211,238,.10));border:1px solid rgba(255,255,255,.12)}
.screen__row{display:flex;align-items:center;justify-content:space-between}
.screen__label{color:var(--muted2);font-size:12px}
.screen__value{font-weight:700;margin-top:3px}
.screen__badge{font-size:12px;font-weight:700;color:rgba(255,255,255,.85);padding:6px 10px;border-radius:999px;background:rgba(16,185,129,.18);border:1px solid rgba(16,185,129,.28)}
.screen__price{font-size:38px;font-weight:800;letter-spacing:-.8px;margin:12px 0 10px}
.screen__actions{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12px;font-weight:700;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10)}

.screen__list{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px 12px}
.dotc{width:12px;height:12px;border-radius:999px;background:linear-gradient(135deg, var(--blue), var(--cyan))}
.dotc--p{background:linear-gradient(135deg, var(--violet), var(--blue))}
.dotc--g{background:linear-gradient(135deg, var(--good), var(--cyan))}
.t{font-weight:700;font-size:13px}
.s{color:var(--muted2);font-size:12px;margin-top:2px}
.pill2{margin-left:auto;font-size:12px;font-weight:800;padding:6px 10px;border-radius:999px;background:rgba(59,130,246,.18);border:1px solid rgba(59,130,246,.26)}
.pill2--warn{background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.28)}

.floaters{position:absolute;inset:-60px -40px -40px -40px;pointer-events:none}
.coin{position:absolute;width:110px;height:110px;border-radius:999px;background:
  radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.08) 32%, rgba(255,255,255,.06) 60%, rgba(255,255,255,.02) 100%),
  linear-gradient(135deg, rgba(59,130,246,.55), rgba(34,211,238,.18));
  border:1px solid rgba(255,255,255,.16);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.45));
  opacity:.85;
}
.coin--1{left:-10px;top:0;transform:rotate(18deg)}
.coin--2{right:-10px;top:80px;transform:rotate(-12deg);width:98px;height:98px}
.coin--3{left:40px;bottom:10px;transform:rotate(6deg);width:86px;height:86px}
.ring{position:absolute;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.02);filter:blur(.2px)}
.ring--1{right:40px;bottom:-20px;width:220px;height:220px}
.ring--2{left:10px;top:110px;width:180px;height:180px}

.section{padding:72px 0}
.section--alt{background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.section__head{max-width:780px}
.h2{font-size: clamp(26px, 2.8vw, 36px);margin:0 0 10px;letter-spacing:-.2px}
.p{color:var(--muted);margin:0;font-size:16px;line-height:1.6}

.cards{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px;margin-top:26px}
.card{border-radius:var(--r2);border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);padding:18px;box-shadow: var(--shadow2);position:relative;overflow:hidden}
.card:before{content:"";position:absolute;inset:-2px;background:radial-gradient(500px 250px at 20% 0%, rgba(59,130,246,.18), transparent 55%);opacity:.9}
.card__icon{position:relative;font-size:18px;width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.card h3{position:relative;margin:12px 0 6px;font-size:18px}
.card p{position:relative;margin:0;color:var(--muted);line-height:1.55}
.card__meta{position:relative;margin-top:12px;color:var(--muted2);font-size:12px}

.marquee{margin-top:34px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:999px;overflow:hidden}
.marquee__track{display:flex;gap:16px;padding:12px 18px;white-space:nowrap;will-change:transform}
.m{color:rgba(255,255,255,.85);font-weight:700;letter-spacing:.2px}
.sep{color:rgba(255,255,255,.28)}

.split{display:grid;grid-template-columns: 1.1fr .9fr;gap:24px;align-items:start}
.list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;color:var(--muted)}
.check{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:6px;margin-right:10px;background:rgba(16,185,129,.16);border:1px solid rgba(16,185,129,.26);color:rgba(255,255,255,.9);font-weight:900}

.glass{border-radius:var(--r2);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);box-shadow: var(--shadow2);overflow:hidden}
.glass__header{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.glass__dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.14)}
.glass__title{margin-left:6px;color:rgba(255,255,255,.85);font-weight:700;font-size:13px}
.glass__body{padding:14px;display:grid;gap:10px}
.kv{display:flex;align-items:center;justify-content:space-between;padding:12px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.k{color:rgba(255,255,255,.86);font-weight:800}
.v{color:var(--muted);font-weight:600}

.cta{border-radius:32px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg, rgba(59,130,246,.16), rgba(34,211,238,.06));box-shadow: var(--shadow);overflow:hidden;display:grid;grid-template-columns: 1.1fr .9fr;gap:0}
.cta__copy{padding:28px 26px}
.cta__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.fine{margin-top:18px;color:var(--muted2);font-size:13px;display:grid;gap:8px}
.fine__row{display:flex;gap:10px;align-items:center}
.label{display:inline-flex;align-items:center;justify-content:center;min-width:66px;height:24px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-size:12px;color:rgba(255,255,255,.82)}

.cta__art{position:relative;min-height:320px}
.orb{position:absolute;border-radius:999px;filter: blur(14px);opacity:.85}
.orb--a{width:220px;height:220px;right:20px;top:26px;background:rgba(59,130,246,.32)}
.orb--b{width:260px;height:260px;left:10px;bottom:10px;background:rgba(34,211,238,.22)}
.orb--c{width:180px;height:180px;right:70px;bottom:40px;background:rgba(139,92,246,.24)}
.cta__card{position:absolute;inset:auto 22px 22px 22px;border-radius:24px;border:1px solid rgba(255,255,255,.14);background:rgba(7,10,18,.42);backdrop-filter: blur(14px);padding:16px;box-shadow: var(--shadow2)}
.cta__cardTitle{font-weight:900;margin-bottom:8px}
.cta__cardText{color:var(--muted);font-size:13px;line-height:1.5;margin-top:8px}

.footer{padding:26px 0;border-top:1px solid rgba(255,255,255,.08);background:rgba(7,10,18,.42)}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:14px}
.footer__right{display:flex;gap:16px;color:var(--muted)}
.brand--small .brand__mark{width:22px;height:22px}
.muted{color:var(--muted2);font-size:13px;margin-top:8px}

.reveal{opacity:0;transform: translateY(12px) scale(.99);filter: blur(6px);transition: opacity .7s ease, transform .7s ease, filter .7s ease}
.reveal.is-in{opacity:1;transform: translateY(0) scale(1);filter: blur(0)}

@media (max-width: 960px){
  .hero__inner{grid-template-columns:1fr;gap:26px}
  .hero__art{order:-1}
  .phone__frame{margin:0 auto}
  .split{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
  .cta__art{min-height:260px}
  .nav__links{display:none}
  .nav__menu{display:flex}
  .nav__inner{padding:12px 0}
}

@media (prefers-reduced-motion: reduce){
  .reveal{transition:none}
  .btn{transition:none}
}