:root{
  --bg:#0d0d0f; --bg2:#141420; --card:#16161c; --border:#26262e;
  --ink:#f5f7ff; --muted:#9aa0b4; --accent:#6ea8ff; --violet:#a24bff; --gold:#f5c451;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Header */
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;position:sticky;top:0;z-index:10;
  background:rgba(13,13,15,.78);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
}
.brand{font-weight:800;letter-spacing:.02em}
.brand__mark{color:var(--accent)} .brand__sub{color:var(--muted);font-weight:600}
.site-nav{display:flex;gap:22px;align-items:center;font-size:14px;color:var(--muted)}
.site-nav a:hover{color:var(--ink)}
.site-nav__cta{background:var(--accent);color:#0d0d0f;font-weight:700;padding:8px 16px;border-radius:999px}
@media(max-width:680px){.site-nav a:not(.site-nav__cta){display:none}}

/* Hero */
.hero{padding:64px 24px 40px;background:radial-gradient(60% 80% at 65% 30%,#1b1535 0%,#0d0d0f 60%)}
.hero__inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.platforms{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.pill{font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--border);background:rgba(255,255,255,.04);padding:6px 12px;border-radius:999px}
.hero__title{font-size:46px;font-weight:800;line-height:1.08;letter-spacing:-.02em}
.hero__title span{color:var(--accent)}
.hero__lead{margin-top:16px;color:var(--muted);font-size:17px;max-width:520px}
.store-badges{margin-top:24px}
.store-badge svg{width:170px;height:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.store-note{margin-top:10px;color:var(--muted);font-size:13px}
.hero__art{display:flex;justify-content:center}
.hero__icon{width:min(320px,80%);filter:drop-shadow(0 24px 60px rgba(110,82,255,.35));border-radius:24px}
@media(max-width:780px){.hero__inner{grid-template-columns:1fr;text-align:center}.hero__lead{margin-inline:auto}.platforms{justify-content:center}.hero__title{font-size:36px}}

/* Sections */
.section{max-width:1080px;margin:0 auto;padding:64px 24px}
.section__title{font-size:30px;font-weight:800;text-align:center;letter-spacing:-.01em}
.section__lead{text-align:center;color:var(--muted);margin-top:8px}

/* Steps */
.steps__grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.step{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px}
.step__num{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--violet));color:#0d0d0f;font-weight:800;margin-bottom:12px}
.step h3{font-size:16px;margin-bottom:4px}
.step p{color:var(--muted);font-size:14px}
@media(max-width:780px){.steps__grid{grid-template-columns:1fr 1fr}}

/* Features */
.features__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.feature{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px}
.feature h3{font-size:17px;margin-bottom:6px}
.feature p{color:var(--muted);font-size:14px}
@media(max-width:780px){.features__grid{grid-template-columns:1fr}}

/* Screens */
.screens__row{display:flex;gap:18px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.phone-shot{width:200px;border-radius:22px;overflow:hidden;border:1px solid var(--border);background:#000;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.phone-shot img{width:100%}

/* CTA */
.cta-final{text-align:center;padding:72px 24px;background:radial-gradient(60% 100% at 50% 0%,#1b1535 0%,#0d0d0f 70%)}
.cta-final h2{font-size:30px;font-weight:800}
.cta-final p{color:var(--muted);margin-top:8px}
.store-badges--center{display:flex;justify-content:center;margin-top:22px}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:36px 28px;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.site-footer__brand p{color:var(--muted);font-size:13px;margin-top:4px}
.site-footer__links{display:flex;gap:20px;font-size:14px;color:var(--muted)}
.site-footer__links a:hover{color:var(--ink)}
.site-footer__copy{color:var(--muted);font-size:12px;width:100%;text-align:center;margin-top:8px}

/* Availability notice for apps not yet published in a store. Replaces the
   store lockup so the page never implies a download that does not exist. */
.store-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  font-weight: 500;
}
.store-soon::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f5a524;
  box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.18);
}