:root {
  color-scheme: light dark;
  --bg: #f2f6f4;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-solid: #fff;
  --ink: #142129;
  --muted: #64727a;
  --line: rgba(15, 23, 29, 0.12);
  --coal: #0f171d;
  --coal-2: #17272e;
  --amber: #f29a2e;
  --amber-2: #dc7514;
  --teal: #168d82;
  --soft: #e5f3ef;
  --shadow: 0 28px 80px rgba(7, 18, 23, 0.14);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(circle at 12% 10%, rgba(22, 141, 130, 0.13), transparent 30rem),
    radial-gradient(circle at 88% 22%, rgba(242, 154, 46, 0.14), transparent 28rem),
    var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.container { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(15, 23, 29, 0.9);
  backdrop-filter: blur(18px);
}
.topbar-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: white; text-decoration: none; }
.brand img { width: 174px; height: 58px; object-fit: contain; }
.brand strong { display: block; font-size: 19px; font-weight: 950; letter-spacing: -.035em; line-height: 1; }
.brand small { display: block; margin-top: 5px; color: #9dafb7; font-size: 9px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.top-links { display: flex; align-items: center; gap: 8px; }
.top-links a { border-radius: 999px; padding: 9px 13px; color: #d5dfe3; font-size: 13px; font-weight: 800; text-decoration: none; transition: .2s ease; }
.top-links a:hover { background: rgba(255,255,255,.08); color: white; }
.theme-button { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; background: rgba(255,255,255,.06); color: white; cursor: pointer; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero { position: relative; overflow: hidden; padding: 76px 0 46px; }
.hero::before { content: ""; position: absolute; width: 34rem; height: 34rem; right: -18rem; top: -12rem; border: 1px solid rgba(22,141,130,.22); border-radius: 50%; box-shadow: 0 0 0 70px rgba(22,141,130,.035), 0 0 0 140px rgba(22,141,130,.025); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.12fr) minmax(320px,.72fr); align-items: center; gap: 70px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; border: 1px solid rgba(22,141,130,.24); border-radius: 999px; background: rgba(229,243,239,.75); padding: 7px 12px; color: #0f7169; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(22,141,130,.12); }
h1 { max-width: 760px; margin: 0; font-size: clamp(42px, 6.2vw, 76px); font-weight: 950; letter-spacing: -.06em; line-height: .98; text-wrap: balance; }
.gradient-text { background: linear-gradient(110deg, var(--amber-2), var(--amber), #dca84f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { max-width: 650px; margin: 24px 0 0; color: var(--muted); font-size: clamp(17px, 2vw, 20px); line-height: 1.7; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 14px; padding: 13px 20px; font-weight: 900; text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(135deg, var(--amber), var(--amber-2)); color: #18130e; box-shadow: 0 16px 38px rgba(220,117,20,.28); }
.button-secondary { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.button[aria-busy="true"] { cursor: wait; opacity: .72; }
.trust-row { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 28px; color: var(--muted); font-size: 13px; font-weight: 750; }
.trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.trust-row .icon { width: 17px; height: 17px; color: var(--teal); }
.download-card { position: relative; border: 1px solid rgba(255,255,255,.11); border-radius: 30px; background: linear-gradient(145deg, var(--coal), var(--coal-2)); padding: 28px; color: white; box-shadow: var(--shadow); }
.download-card::after { content:""; position:absolute; inset:12px; pointer-events:none; border:1px solid rgba(255,255,255,.06); border-radius:22px; }
.qr-frame { position: relative; z-index: 1; width: min(260px, 76vw); margin: auto; border-radius: 22px; background: white; padding: 15px; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.qr-frame img { display: block; width: 100%; border-radius: 12px; }
.download-card h2 { position:relative; z-index:1; margin: 22px 0 5px; font-size: 20px; text-align: center; }
.download-card p { position:relative; z-index:1; margin: 0; color: #aebdc4; font-size: 13px; text-align: center; }
.platform-pill { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:7px; width:max-content; margin:17px auto 0; border-radius:999px; background:rgba(255,255,255,.08); padding:7px 11px; color:#dce7ea; font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.platform-content[hidden] { display: none; }
.section { padding: 58px 0; }
.section-heading { max-width: 680px; margin-bottom: 28px; }
.section-heading h2 { margin: 0; font-size: clamp(30px,4vw,46px); line-height: 1.05; letter-spacing: -.045em; }
.section-heading p { margin: 13px 0 0; color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.feature-card, .step-card { border: 1px solid var(--line); border-radius: 22px; background: var(--surface); padding: 24px; box-shadow: 0 10px 35px rgba(8,17,22,.05); }
.feature-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: var(--soft); color: var(--teal); }
.feature-card h3, .step-card h3 { margin: 18px 0 7px; font-size: 17px; }
.feature-card p, .step-card p { margin: 0; color: var(--muted); font-size: 14px; }
.ios-callout { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; border-radius: 28px; background: linear-gradient(135deg,#122027,#1b3738); padding: 30px; color: white; }
.ios-callout h2 { margin: 0; font-size: clamp(25px,4vw,38px); letter-spacing: -.04em; }
.ios-callout p { max-width: 650px; margin: 9px 0 0; color: #b7c5ca; }
.tutorial-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; counter-reset: steps; }
.step-card { position: relative; overflow: hidden; counter-increment: steps; }
.step-card::after { content: counter(steps, decimal-leading-zero); position: absolute; right: 14px; top: 5px; color: rgba(22,141,130,.11); font-size: 68px; font-weight: 950; line-height: 1; }
.illustration { position: relative; z-index: 1; display: grid; height: 150px; place-items: center; border-radius: 17px; background: linear-gradient(145deg,#e6f4f0,#fbf5e8); }
.illustration svg { width: 112px; height: 112px; }
.footer { margin-top: 58px; border-top: 1px solid var(--line); padding: 28px 0 38px; color: var(--muted); font-size: 13px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer a { font-weight: 800; text-underline-offset: 3px; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 24px; transform: translate(-50%, 25px); border-radius: 13px; background: #0f171d; padding: 12px 16px; color: white; font-size: 13px; font-weight: 800; opacity: 0; pointer-events: none; transition: .24s ease; box-shadow: 0 14px 40px rgba(0,0,0,.3); }
.toast.show { transform: translate(-50%,0); opacity: 1; }

@media (prefers-color-scheme: dark) {
  :root { --bg:#0c1419; --surface:rgba(20,32,39,.9); --surface-solid:#142027; --ink:#eef5f5; --muted:#9badb4; --line:rgba(255,255,255,.1); --soft:#143630; }
  .eyebrow { background: rgba(20,54,48,.75); color:#8bd5cc; }
  .illustration { background:linear-gradient(145deg,#183631,#342d20); }
}
html[data-theme="light"] { color-scheme:light; --bg:#f2f6f4; --surface:rgba(255,255,255,.88); --surface-solid:#fff; --ink:#142129; --muted:#64727a; --line:rgba(15,23,29,.12); --soft:#e5f3ef; }
html[data-theme="dark"] { color-scheme:dark; --bg:#0c1419; --surface:rgba(20,32,39,.9); --surface-solid:#142027; --ink:#eef5f5; --muted:#9badb4; --line:rgba(255,255,255,.1); --soft:#143630; }
html[data-theme="dark"] .eyebrow { background:rgba(20,54,48,.75); color:#8bd5cc; }
html[data-theme="dark"] .illustration { background:linear-gradient(145deg,#183631,#342d20); }

@media (max-width: 850px) {
  .hero { padding-top: 50px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .download-card { max-width: 430px; width: 100%; margin: auto; }
  .feature-grid { grid-template-columns: 1fr; }
  .tutorial-grid { grid-template-columns: repeat(2,1fr); }
  .ios-callout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .container { width: min(100% - 24px,1120px); }
  .topbar-inner { min-height: 64px; }
  .top-links a:first-child { display:none; }
  .brand small { display:none; }
  .brand img { width: 136px; height: 46px; }
  .hero { padding-top: 38px; }
  .lead { font-size:16px; }
  .actions { display:grid; }
  .button { width:100%; }
  .tutorial-grid { grid-template-columns:1fr; }
  .footer-inner { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}