:root {
  --ink: #003f3f;
  --teal: #07958f;
  --coral: #ff4d55;
  --yellow: #ffc857;
  --green: #8cb82c;
  --paper: #fbfcf7;
  --muted: #52706d;
  --line: #dbe8e2;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 8%, rgba(255,200,87,.18), transparent 28%), radial-gradient(circle at 90% 35%, rgba(7,149,143,.11), transparent 30%); }
.page-shell { position: relative; width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 52px 0 64px; }
.hero { max-width: 720px; }
.brand-logo { width: min(280px, 72vw); height: auto; display: block; margin-bottom: 64px; }
.eyebrow { display: inline-block; color: var(--teal); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; }
h1 { margin: 0; max-width: 800px; font-size: clamp(3.25rem, 8vw, 6.8rem); line-height: .93; letter-spacing: -.06em; }
h1 span { color: var(--coral); }
.lead { max-width: 640px; margin: 28px 0 34px; color: var(--muted); font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.55; }
.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.store-button { min-height: 86px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 13px; padding: 17px 20px; border-radius: 18px; color: white; text-decoration: none; font-size: 1rem; font-weight: 800; box-shadow: 0 10px 30px rgba(0,63,63,.13); transition: transform .18s ease, box-shadow .18s ease; }
.store-button:hover, .store-button:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,63,63,.2); }
.store-button small { display: block; margin-bottom: 2px; opacity: .72; font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.apple { background: var(--ink); }
.android { background: var(--teal); }
.store-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.14); color: var(--yellow); }
.store-icon.play { color: white; }
.arrow { font-size: 1.5rem; }
.promo-card { margin-top: 18px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.8); }
.promo-card p { margin: 0; color: var(--muted); font-size: .92rem; }
#copy-code { display: flex; align-items: center; gap: 13px; border: 0; border-radius: 12px; background: #fff2f3; color: var(--coral); padding: 11px 14px; cursor: pointer; }
#promo-code { letter-spacing: .09em; }
#copy-label { color: var(--muted); font-size: .78rem; }
.fine-print { max-width: 670px; color: #718784; font-size: .76rem; line-height: 1.5; margin: 18px 2px 0; }
.benefits { margin-top: 88px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.benefits article { padding: 30px 30px 0 0; }
.benefits article + article { padding-left: 30px; border-left: 1px solid var(--line); }
.benefits span { color: var(--coral); font-size: .75rem; font-weight: 900; letter-spacing: .12em; }
.benefits h2 { margin: 12px 0 9px; font-size: 1.1rem; }
.benefits p { margin: 0; color: var(--muted); line-height: 1.55; font-size: .92rem; }
footer { position: relative; display: flex; justify-content: space-between; gap: 20px; width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 40px; border-top: 1px solid var(--line); color: #718784; font-size: .76rem; }
footer p { margin: 0; } footer a { color: var(--ink); }
@media (max-width: 700px) { .page-shell { padding-top: 30px; } .brand-logo { margin-bottom: 46px; } .actions, .benefits { grid-template-columns: 1fr; } .benefits { margin-top: 64px; } .benefits article, .benefits article + article { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--line); } footer { flex-direction: column; } }
@media (max-width: 460px) { .page-shell, footer { width: min(100% - 28px, 1120px); } .promo-card { align-items: stretch; flex-direction: column; } #copy-code { justify-content: space-between; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
.android-shell { min-height: calc(100vh - 1px); display: grid; align-items: center; }
.android-card { margin: 0 auto; width: min(100%, 720px); }
.android-card .brand-logo { margin: 34px 0 54px; }
.back-link { color: var(--muted); font-size: .9rem; font-weight: 700; text-decoration: none; }
.android-actions { display: grid; gap: 12px; max-width: 520px; }
.secondary-button { min-height: 52px; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.secondary-button:hover, .secondary-button:focus-visible { border-color: var(--teal); }
.browser-note { max-width: 620px; margin-top: 24px; padding: 18px 20px; border-radius: 16px; background: rgba(255,200,87,.16); }
.browser-note h2 { margin: 0 0 6px; font-size: .95rem; }
.browser-note p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }