* { box-sizing: border-box }
:root { --ink:#201f25; --muted:#605d66; --line:#dbd8d4; --stop-0:#5434b4; --stop-1:#ff798c; --stop-2:#ffca88; scroll-behavior:smooth }
body { margin:0; background:#f7f6f2; color:var(--ink); font:16px/1.5 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif }
header,main,footer { width:min(90%,1240px); margin:auto }
header,footer,.brand { display:flex; align-items:center; justify-content:space-between }
header { height:80px; border-bottom:1px solid var(--line) }
a { color:inherit; text-decoration:none }
nav a,footer a { padding:12px 0; font-size:14px }
a:hover { text-decoration:underline; text-underline-offset:4px }
.brand { gap:10px; font-weight:650; font-size:24px; letter-spacing:-.06em }
.brand img { width:32px; border-radius:9px }
.hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:5%; padding:36px 0 54px }
h1,h2,h3,p { margin:0 }
h1 { font-size:clamp(60px,7.8vw,116px); font-weight:500; line-height:.97; letter-spacing:-.075em }
h1 em { color:#594970; font-family:Georgia,serif; font-weight:400 }
.intro p { max-width:35ch; color:var(--muted); font-size:clamp(16px,1.35vw,20px); margin-top:24px }
.stage { display:grid; place-items:center; padding:34px 14px; overflow:hidden; border-radius:24px; background:radial-gradient(ellipse at 88% 90%,color-mix(in srgb,var(--stop-2) 65%,#fff),transparent 66%),linear-gradient(135deg,color-mix(in srgb,var(--stop-0) 40%,#ded9ef),color-mix(in srgb,var(--stop-1) 28%,#fff)) }
#ios { border-top:1px solid var(--line); padding:44px 0 54px }
h2 { font-weight:500; letter-spacing:-.055em; font-size:clamp(32px,4vw,54px); line-height:1.1 }
.features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:28px }
.feature { display:flex; flex-direction:column; overflow:hidden; border-radius:22px; background:#ece7f2 }
.feature-copy { padding:clamp(20px,3vw,44px); max-width:52ch }
.feature h3 { font-size:clamp(24px,3vw,40px); line-height:1.08; font-weight:520; letter-spacing:-.05em }
.feature p { margin-top:10px; color:#504a56; text-wrap:pretty }
.feature-art { margin:auto clamp(18px,4vw,64px) 0; display:grid; align-items:end }
.feature-art img { display:block; width:100%; height:auto; border-radius:18px 18px 0 0 }
.feature-wide { grid-column:1/-1; display:grid; grid-template-columns:.85fr 1.5fr; align-items:center; padding:clamp(18px,3vw,44px); gap:18px }
.feature-wide .feature-copy { padding:0 0 0 min(2vw,22px) }
.feature-wide .feature-art { margin:0 }
.feature-wide img { border-radius:16px }
.feature-patterns { background:#eee3df }
.feature-pair { background:#e3e9e6 }
footer { border-top:1px solid var(--line); padding:16px 0; color:var(--muted); font-size:14px }
:focus-visible { outline:3px solid #5959ac; outline-offset:3px }
@media(max-width:700px) { header {height:62px} .hero {grid-template-columns:1fr; gap:25px; padding:32px 0} h1 {font-size:clamp(48px,10vw,68px)} h1 br {display:none} h1 em::before {content:" "} .intro p {margin-top:14px} .stage {padding:24px 10px} .features {grid-template-columns:1fr; gap:16px} .feature-wide {display:flex; align-items:stretch; padding:0; gap:0} .feature-wide .feature-copy {padding:20px} .feature-wide .feature-art {margin:0 12px 14px} #ios {padding:32px 0} }
@media(prefers-reduced-motion:reduce) { :root { scroll-behavior:auto } }

.stage { position:relative; padding:24px 12px 48px }
.demo { display:block; height:clamp(360px,62vh,550px); max-width:94%; border:4px solid #25232a; border-radius:34px; background:#17151a; box-shadow:0 12px 28px -12px #35253d70 }
.playback { position:absolute; bottom:2px; right:12px; min-height:44px; border:0; padding:0 10px; background:transparent; color:#2b232d; font:550 13px/1.2 system-ui; cursor:pointer }
@media(max-width:700px) { .demo {height:clamp(320px,55svh,455px)} }
.store-link { display:inline-flex; margin-top:22px; border-radius:7px }
.store-link img { display:block; height:48px; width:auto }
.floating-download { position:fixed; z-index:5; right:max(18px,env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom)); display:inline-flex; align-items:center; gap:9px; min-height:48px; padding:0 20px; border:1px solid #ffffff40; border-radius:999px; background:#27232d; color:white; box-shadow:0 4px 18px #211d3033; font-size:15px; font-weight:600 }
.floating-download[hidden] { display:none }
.floating-download:hover { background:#403849; text-decoration:none }
footer { margin-bottom:calc(70px + env(safe-area-inset-bottom)) }