:root {
  color-scheme: dark;
  --bg: #05050c;
  --bg-soft: #0b0813;
  --surface: rgba(18, 12, 29, .78);
  --surface-strong: #130d20;
  --line: rgba(211, 132, 255, .22);
  --text: #f8f5ff;
  --muted: #afa6bd;
  --violet: #7c3aed;
  --purple: #b94cff;
  --pink: #ff2f92;
  --cyan: #79f7ff;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 78% 8%, rgba(124, 58, 237, .17), transparent 34rem),
    radial-gradient(circle at 18% 42%, rgba(255, 47, 146, .08), transparent 30rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 99; padding: 10px 14px; background: #fff; color: #000; border-radius: 8px; }
.skip-link:focus { top: 12px; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  background: linear-gradient(to bottom, rgba(5, 5, 12, .95), rgba(5, 5, 12, .68));
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
}
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 950; letter-spacing: .16em; }
.brand img { border-radius: 12px; box-shadow: 0 0 25px rgba(190, 65, 255, .24); }
.brand span { background: linear-gradient(90deg, #fff, #d48dff 55%, #ff4ca5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-links { display: flex; gap: 30px; color: var(--muted); font-size: .92rem; font-weight: 700; }
.nav-links a:hover, .footer-links a:hover { color: #fff; }
.nav-cta { border: 1px solid var(--line); background: rgba(124,58,237,.14); border-radius: 999px; padding: 10px 18px; font-weight: 800; font-size: .9rem; }
.nav-cta:hover { border-color: rgba(255,47,146,.6); box-shadow: 0 0 24px rgba(255,47,146,.16); }

.hero { min-height: 940px; padding: 132px 0 70px; position: relative; overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgba(255,255,255,.018) 50%, transparent 50.2%),
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}
.hero::after { content:""; position:absolute; z-index:-1; width:800px; height:800px; right:-220px; top:10px; border-radius:50%; background: radial-gradient(circle, rgba(140,55,255,.21), rgba(255,42,153,.08) 38%, transparent 67%); filter: blur(8px); }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 54px; }
.hero-copy { padding-top: 12px; position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #d99aff; font-weight: 900; letter-spacing: .18em; font-size: .76rem; }
.eyebrow span { width: 34px; height: 2px; background: linear-gradient(90deg, var(--violet), var(--pink)); box-shadow: 0 0 12px var(--purple); }
h1, h2 { margin: 18px 0 20px; line-height: .98; letter-spacing: -.055em; }
h1 { font-size: clamp(4rem, 6.8vw, 7.2rem); max-width: 760px; }
h2 { font-size: clamp(3rem, 5vw, 5.4rem); }
h1 em, h2 em { font-style: normal; background: linear-gradient(90deg, #c991ff, #ff479e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy > p { max-width: 620px; margin: 0 0 32px; color: var(--muted); font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.store-button { min-width: 190px; min-height: 62px; display: inline-flex; align-items: center; gap: 13px; padding: 11px 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); }
.store-button svg { width: 29px; height: 29px; fill: currentColor; flex: 0 0 auto; }
.store-button span { display: flex; flex-direction: column; font-size: 1.12rem; font-weight: 900; line-height: 1.15; }
.store-button small { font-size: .58rem; letter-spacing: .13em; margin-bottom: 3px; color: #c9c2d3; }
.store-button.google { position: relative; overflow: hidden; background: linear-gradient(135deg, #7c3aed, #d72f9a); box-shadow: 0 13px 44px rgba(124,58,237,.27); }
.store-button.google::after { content:""; position:absolute; width:75px; height:150px; background:rgba(255,255,255,.19); transform:rotate(28deg); left:-90px; transition:.35s ease; }
.store-button.google:hover::after { left:220px; }
.store-button.google:hover { transform: translateY(-2px); box-shadow: 0 18px 50px rgba(255,47,146,.26); }
.store-button.ios { color: #918a9d; background: rgba(255,255,255,.035); border-style: dashed; cursor: default; }
.trust-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; color: #8e859b; font-size: .77rem; font-weight: 700; }

.hero-visual { min-height: 760px; position: relative; display: grid; place-items: center; }
.phone { position: relative; z-index: 2; width: min(428px, 94%); height: auto; object-fit: contain; object-position: top center; border-radius: 32px; clip-path: inset(0 round 32px); filter: drop-shadow(0 42px 70px rgba(0,0,0,.75)); }
.halo { position: absolute; border-radius: 50%; border: 1px solid rgba(190,96,255,.19); }
.halo-one { width: 610px; height: 610px; box-shadow: inset 0 0 80px rgba(124,58,237,.07), 0 0 70px rgba(124,58,237,.06); }
.halo-two { width: 470px; height: 470px; border-color: rgba(255,47,146,.12); }
.floating-card { position:absolute; z-index:3; border:1px solid rgba(223,154,255,.24); background:rgba(13,9,22,.72); box-shadow:0 16px 45px rgba(0,0,0,.38); backdrop-filter:blur(16px); border-radius:14px; color:#e9d9f7; font-size:.78rem; font-weight:800; }
.card-top { right: -8px; top: 126px; padding: 12px 16px; }
.card-bottom { left: -15px; bottom: 154px; padding: 13px 16px; display:flex; flex-direction:column; }
.card-bottom b { color:#e89bff; font-size:1.15rem; letter-spacing:.08em; }
.card-bottom span { color:#8e839c; font-size:.68rem; }
.pulse { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#74ffb4; box-shadow:0 0 13px #74ffb4; }
.hero-noise { pointer-events:none; position:absolute; inset:0; opacity:.12; z-index:5; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); }

.wordmark-strip { padding: 24px 0 70px; }
.wordmark-strip .shell { max-width: 980px; overflow: hidden; border-radius: 28px; border: 1px solid rgba(212,125,255,.15); box-shadow: 0 30px 90px rgba(65,19,104,.23); }
.wordmark-strip img { width:100%; height:auto; aspect-ratio:auto; object-fit:contain; }

.section { padding: 110px 0; position: relative; }
.split { display:grid; grid-template-columns: 1fr .9fr; align-items:center; gap:80px; }
.section-copy > p { color:var(--muted); max-width:600px; font-size:1.02rem; }
.metric-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:30px; }
.metric-grid div { padding:19px; border-radius:16px; background:rgba(255,255,255,.028); border:1px solid var(--line); }
.metric-grid strong { display:block; font-size:1.4rem; color:#d796ff; }
.metric-grid span { color:#8f859c; font-size:.76rem; }
.detail-stage { height:730px; position:relative; display:grid; place-items:center; overflow:hidden; border-radius:36px; background:radial-gradient(circle at 50% 40%, rgba(124,58,237,.25), transparent 65%); }
.detail-stage img { height:740px; width:auto; position:relative; z-index:2; object-fit:contain; object-position:top; border-radius:32px; clip-path:inset(0 round 32px); filter:drop-shadow(0 28px 55px rgba(0,0,0,.65)); }
.detail-glow { position:absolute; width:450px; height:600px; border-radius:50%; background:linear-gradient(#6424d9,#ff2f92); filter:blur(100px); opacity:.18; }

.features { background:linear-gradient(180deg, transparent, rgba(14,8,25,.75), transparent); }
.section-heading { max-width:920px; margin-bottom:40px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature-card { min-height:250px; padding:26px; border-radius:22px; background:linear-gradient(145deg, rgba(25,16,40,.85), rgba(10,8,17,.85)); border:1px solid rgba(211,132,255,.14); transition:.25s ease; }
.feature-card:hover { transform:translateY(-5px); border-color:rgba(255,69,161,.34); box-shadow:0 24px 60px rgba(0,0,0,.25); }
.feature-card.featured { grid-row:span 2; min-height:516px; display:flex; flex-direction:column; justify-content:flex-end; background:radial-gradient(circle at 50% 18%, rgba(176,65,255,.28), transparent 40%), linear-gradient(145deg,#1c1030,#090711); }
.feature-icon { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; margin-bottom:28px; color:#fff; font-size:1.35rem; background:linear-gradient(135deg,rgba(124,58,237,.75),rgba(255,47,146,.75)); box-shadow:0 0 35px rgba(171,54,238,.2); }
.feature-card.featured .feature-icon { width:84px; height:84px; font-size:2.1rem; }
.feature-kicker { color:#c987ff; font-weight:900; letter-spacing:.16em; font-size:.7rem; }
.feature-card h3 { margin:0 0 10px; font-size:1.35rem; }
.feature-card p { margin:0; color:#958ba1; font-size:.9rem; }

.final-cta { padding-bottom:130px; }
.cta-panel { position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:34px; padding:48px; border-radius:30px; border:1px solid rgba(221,141,255,.23); background:linear-gradient(125deg,rgba(34,17,58,.92),rgba(12,8,22,.94)); box-shadow:0 35px 100px rgba(0,0,0,.3); }
.cta-panel::before { content:""; position:absolute; width:420px; height:420px; right:10%; background:#b12eff; filter:blur(150px); opacity:.12; }
.cta-panel > * { position:relative; z-index:1; }
.cta-panel > img { border-radius:28px; box-shadow:0 0 42px rgba(210,63,255,.22); }
.cta-panel h2 { font-size:clamp(2.5rem,4vw,4.4rem); margin-bottom:0; }

.footer { border-top:1px solid rgba(255,255,255,.06); padding:34px 0; color:#81788d; }
.footer-inner { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; }
.footer-inner p { margin:0; }
.footer-links { display:flex; gap:20px; justify-self:end; }
.footer-inner small { grid-column:1/-1; font-size:.7rem; opacity:.7; }

.legal-page { background:radial-gradient(circle at 75% 0,rgba(124,58,237,.2),transparent 40rem),var(--bg); }
.legal { max-width:850px; padding:150px 0 100px; }
.legal h1 { font-size:clamp(3.2rem,7vw,5.5rem); }
.legal h2 { font-size:1.45rem; margin:38px 0 10px; letter-spacing:-.02em; }
.legal p, .legal li { color:#b4aabd; }
.legal a { color:#d68fff; text-decoration:underline; text-underline-offset:3px; }
.text-link { display:inline-block; margin-top:36px; font-weight:800; }

@media (max-width: 960px) {
  .hero { min-height:auto; padding-top:120px; }
  .hero-grid, .split { grid-template-columns:1fr; }
  .hero-copy { text-align:center; }
  .hero-copy .eyebrow, .hero-actions, .trust-row { justify-content:center; }
  .hero-copy > p { margin-inline:auto; }
  .hero-visual { min-height:690px; }
  .phone { width:min(388px,94%); }
  .floating-card { display:none; }
  .split { gap:48px; }
  .detail-stage { height:680px; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .feature-card.featured { grid-row:auto; min-height:250px; }
  .cta-panel { grid-template-columns:auto 1fr; }
  .cta-panel .store-button { grid-column:1/-1; justify-self:start; }
}

@media (max-width: 680px) {
  .shell { width:min(calc(100% - 28px),var(--max)); }
  .nav { min-height:68px; }
  .nav-links { display:none; }
  .nav-cta { padding:8px 13px; }
  .brand span { font-size:.84rem; }
  .brand img { width:38px; height:38px; }
  .hero { padding-top:106px; }
  h1 { font-size:clamp(3.4rem,16vw,5rem); }
  .hero-copy > p { font-size:.98rem; }
  .hero-actions { display:grid; grid-template-columns:1fr 1fr; }
  .store-button { min-width:0; padding:10px 12px; gap:9px; }
  .store-button svg { width:25px; }
  .store-button span { font-size:.92rem; }
  .hero-visual { min-height:575px; margin-top:10px; }
  .phone { width:min(332px,94%); border-radius:26px; clip-path:inset(0 round 26px); }
  .halo-one { width:430px; height:430px; }
  .halo-two { width:330px; height:330px; }
  .wordmark-strip { padding-top:0; }
  .wordmark-strip .shell { border-radius:18px; }
  .section { padding:76px 0; }
  h2 { font-size:clamp(2.7rem,13vw,4rem); }
  .metric-grid, .feature-grid { grid-template-columns:1fr; }
  .detail-stage { height:570px; border-radius:24px; }
  .detail-stage img { height:590px; border-radius:26px; clip-path:inset(0 round 26px); }
  .feature-card, .feature-card.featured { min-height:auto; }
  .feature-card.featured { padding-top:90px; }
  .cta-panel { grid-template-columns:1fr; text-align:center; padding:34px 22px; }
  .cta-panel > img, .cta-panel .store-button { justify-self:center; }
  .cta-panel .eyebrow { justify-content:center; }
  .footer-inner { grid-template-columns:1fr; text-align:center; justify-items:center; }
  .footer-links { justify-self:center; }
  .footer-inner small { grid-column:auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; animation:none !important; }
}