:root{color-scheme:light;--ink:#171717;--muted:#4c4c4c;--line:#e5e5e5;--canvas:#fafafa;--yellow:#fec000;--yellow-soft:#fef2cc}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit;text-underline-offset:.2em}
a:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
::selection{background:var(--yellow-soft);color:var(--ink)}
.skip-link{position:absolute;left:18px;top:-70px;z-index:10;padding:10px 14px;background:#fff;border:1px solid var(--line)}
.skip-link:focus{top:12px}
.landing-main{display:grid}
.hero{width:100%;max-width:1440px;min-height:650px;margin:0 auto;padding:68px 32px 84px;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center;gap:48px}
.hero-copy{max-width:660px}
h1{max-width:15ch;margin:0 0 26px;font-size:clamp(40px,4vw,56px);font-weight:650;letter-spacing:-.03em;line-height:1.08}
.hero-copy>p:not(.platform-note){max-width:55ch;margin:0;color:#343434;font-size:clamp(17px,1.6vw,20px);line-height:1.55}
.actions{display:grid;justify-items:start;gap:12px;margin-top:36px}
.button{min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:12px 20px;border-radius:10px;border:1px solid transparent;font-size:15px;font-weight:650;text-decoration:none;transition:background-color .18s ease,border-color .18s ease,transform .18s ease}
.button span{font-size:18px;line-height:1}
.button:hover{transform:translateY(-2px)}
.button-primary{background:var(--yellow);border-color:var(--yellow)}
.button-primary:hover{background:#e9b100;border-color:#e9b100}
.store-actions{display:flex;flex-wrap:wrap;gap:10px}
.store-button{position:relative;min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 10px;border:1px solid #d8d8d8;border-radius:10px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap}
.store-button img{display:block;width:24px;height:24px;object-fit:contain}
a.store-button:hover{border-color:#888;background:#f7f7f7}
.store-button-unavailable{background:#f7f7f7;color:var(--muted);cursor:help}
.store-button-unavailable img{opacity:.75}
.store-button-unavailable:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.store-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;z-index:2;padding:7px 10px;border-radius:6px;background:var(--ink);color:#fff;font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,4px);transition:opacity .15s ease,transform .15s ease}
.store-button-unavailable:hover .store-tooltip,.store-button-unavailable:focus-visible .store-tooltip{opacity:1;transform:translate(-50%,0)}
.platform-note{max-width:65ch;margin:28px 0 0;color:var(--muted);font-size:14px;line-height:1.6}
.hero-product{min-width:0;display:grid;place-items:center}
.app-screenshot{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 20px 45px rgba(0,0,0,.09)}
@media(max-width:820px){.hero{grid-template-columns:1fr;min-height:0;gap:44px;padding:64px 24px}}
@media(max-width:540px){.hero{padding:48px 20px 56px;gap:36px}h1{font-size:clamp(36px,9vw,44px);max-width:15ch}.actions,.store-actions{width:100%}.store-actions{display:grid;grid-template-columns:1fr}.button,.store-button{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.store-tooltip{transition:none}.button:hover{transform:none}}