*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--background:oklch(0.985 0.002 160);--foreground:oklch(0.205 0.009 160);--primary:oklch(0.205 0.009 160);--primary-foreground:oklch(0.984 0.003 247.858);--muted-foreground:oklch(0.53 0.008 160);--accent:oklch(0.88 0.105 158);--accent-foreground:oklch(0.265 0.06 160);--soft-surface:oklch(0.962 0.004 160);--brand:oklch(0.58 0.135 163);--quiet-border:oklch(0.9 0.006 160);--ridge-cream:oklch(0.975 0.012 95);--device:oklch(0.17 0.01 160);--device-shadow:0 24px 55px oklch(0.2 0.02 160 / 14%);--font-display:"Manrope",sans-serif}
body{background:var(--background);color:var(--foreground);font-family:"DM Sans",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img,svg{display:block}h1,h2,h3{font-weight:inherit;font-size:inherit}
svg.icon{width:1em;height:1em;display:inline-block}
.store-button{display:inline-flex;align-items:center;cursor:pointer;border:0;background:var(--primary);color:var(--primary-foreground);font:inherit;transition:opacity .2s}
.store-button:hover{opacity:.85}.store-button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.dialog{border:0;border-radius:12px;padding:28px;max-width:420px;width:calc(100% - 40px);margin:auto;color:var(--foreground);box-shadow:0 20px 60px oklch(0.2 0.02 160 / 25%)}
.dialog::backdrop{background:oklch(0.2 0.02 160 / 45%)}
.dialog h2{font-family:var(--font-display);font-size:18px;font-weight:650;margin-bottom:8px;padding-right:24px}
.dialog p{font-size:14px;line-height:1.6;color:var(--muted-foreground)}
.dialog-close{position:absolute;top:14px;right:14px;background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--muted-foreground)}
.legal-page{max-width:672px;margin:0 auto;min-height:100vh;padding:64px 24px}
.back-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;padding:8px 12px;border-radius:8px;margin-left:-12px}.back-link:hover{background:var(--soft-surface)}
.legal-page h1{font-family:var(--font-display);font-size:36px;font-weight:600;margin:48px 0 24px}
.legal-content a{color:var(--brand);text-decoration:underline}
html { scroll-behavior: smooth; }
button, a { -webkit-tap-highlight-color: transparent; }
.site-header { height: 100px; padding: 0 5%; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.wordmark { font-family: var(--font-display); font-size: 25px; font-weight: 750; display: inline-flex; align-items: center; gap: 9px; }
.brand-mark { width: 29px; height: 25px; color: var(--brand); }
.header-note { font-size: 12px; color: var(--muted-foreground); display: flex; align-items: center; gap: 8px; }
.status-dot { width: 6px; height: 6px; background: var(--brand); border-radius: 50%; }
.hero { position: relative; min-height: 680px; text-align: center; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 58px 24px calc(clamp(230px, 34vw, 640px) + 30px); }
.hero-copy { position: relative; z-index: 1; max-width: 650px; margin: auto; }
.eyebrow { display: inline-flex; gap: 8px; align-items: center; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.7px; margin-bottom: 24px; }
.eyebrow svg { width: 15px; height: 15px; }
.hero h1 { font-family: var(--font-display); font-size: 100px; line-height: 1.08; font-weight: 700; margin: 0 0 18px; letter-spacing: 0; }
.hero h1 span { color: var(--brand); }
.hero-tagline { font-family: var(--font-display); font-size: 32px; line-height: 1.3; font-weight: 550; margin-bottom: 21px; }
.hero-description { color: var(--muted-foreground); font-size: 16px; line-height: 1.7; max-width: 390px; margin: 0 auto 29px; }
.store-row { display: flex; gap: 12px; justify-content: center; }
.store-button { min-width: 165px; height: 54px; justify-content: flex-start; gap: 11px; padding: 8px 17px; border-radius: 8px; }
.store-button svg { width: 25px; height: 29px; }
.store-button span { text-align: left; display: flex; flex-direction: column; }
.store-button small { font-size: 9px; line-height: 1.3; font-weight: 400; }
.store-button strong { font-size: 17px; font-weight: 500; line-height: 1.2; }
.download-note { font-size: 11px; color: var(--muted-foreground); margin-top: 17px; }
.hero-scene { position: absolute; left: 0; right: 0; bottom: -2px; height: calc(clamp(230px, 34vw, 640px) + 4px); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / 55%) 20%, #000 38%); mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / 55%) 20%, #000 38%); }
.hero-scene img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.scroll-cue { display: inline-flex; align-items: center; gap: 8px; position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: .4px; color: var(--ridge-cream); text-shadow: 0 1px 3px rgb(0 0 0 / 30%); }
.scroll-cue svg { width: 13px; height: 13px; }
.app-section { background: var(--soft-surface); padding: 66px 24px 74px; }
.section-intro { text-align: center; }
.section-kicker { color: var(--brand); font-size: 11px; text-transform: uppercase; letter-spacing: 1.7px; font-weight: 650; }
.section-intro h2 { font-family: var(--font-display); font-size: 34px; line-height: 1.25; font-weight: 600; margin: 12px 0 15px; }
.section-intro p { color: var(--muted-foreground); font-size: 14px; }
.app-layout { display: grid; grid-template-columns: 1fr 280px 1fr; align-items: center; max-width: 940px; margin: 48px auto 0; gap: 64px; }
.benefit { max-width: 240px; }
.benefit + .benefit { margin-top: 55px; }
.benefit-icon { width: 36px; height: 36px; background: var(--accent); color: var(--accent-foreground); display: grid; place-items: center; border-radius: 50%; margin-bottom: 15px; }
.benefit-icon svg { width: 17px; height: 17px; }
.benefit h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.benefit p { font-size: 13px; color: var(--muted-foreground); line-height: 1.75; }
.phone-frame { width: 280px; border: 7px solid var(--device); border-radius: 38px; overflow: hidden; box-shadow: var(--device-shadow); background: var(--device); transform: rotate(-3deg); }
.phone-frame img { display: block; width: 100%; height: auto; }
.right-benefits { align-self: center; }
.small-manifesto { font-family: var(--font-display); font-size: 23px; font-weight: 500; line-height: 1.5; margin-top: 42px; }
.small-manifesto span { color: var(--brand); }
.site-footer { position: relative; overflow: hidden; background: var(--soft-surface); padding: 176px 5% 35px; display: flex; align-items: center; justify-content: space-between; gap: 22px; font-size: 11px; color: var(--muted-foreground); }
.ridge-divider { position: absolute; top: 0; left: 0; width: 100%; height: clamp(96px, 12vw, 148px); object-fit: cover; object-position: center; opacity: .5; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34%, #000 66%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 34%, #000 66%, transparent 100%); }
.footer-contact { display: flex; flex-direction: column; gap: 7px; }
.footer-contact a { color: var(--foreground); font-size: 13px; }
.footer-links { display: flex; align-items: center; gap: 20px; }
.footer-links a:hover, .footer-contact a:hover { color: var(--brand); }
.legal-content { font-size: 14px; line-height: 1.8; color: var(--muted-foreground); }
.legal-content h2 { color: var(--foreground); font-size: 16px; font-weight: 600; margin: 24px 0 6px; }
.legal-content p + p { margin-top: 12px; }
@media (max-width: 900px) { .app-layout { gap: 25px; } .hero h1 { font-size: 85px; } }
@media (max-width: 640px) {
  .site-header { height: 76px; padding: 0 23px; } .wordmark { font-size: 22px; } .header-note { font-size: 10px; }
  .hero { min-height: 620px; padding: 78px 20px calc(clamp(230px, 34vw, 640px) + 26px); } .hero h1 { font-size: 62px; } .hero-tagline { font-size: 25px; } .hero-description { font-size: 14px; max-width: 295px; }
  .eyebrow { font-size: 9px; margin-bottom: 22px; }
  .store-row { gap: 9px; } .store-button { min-width: 146px; padding: 8px 12px; } .store-button strong { font-size: 15px; }
  .app-section { padding: 47px 25px 52px; } .section-intro h2 { font-size: 28px; } .section-intro p { line-height: 1.6; }
  .app-layout { display: flex; flex-direction: column; gap: 35px; margin-top: 34px; } .phone-frame { order: -1; width: 255px; } .left-benefits, .right-benefits { width: 100%; } .benefit { max-width: none; } .benefit + .benefit { margin-top: 28px; } .benefit-icon { margin-bottom: 10px; } .small-manifesto { margin-top: 28px; font-size: 22px; }
  .site-footer { flex-wrap: wrap; padding: 132px 25px 30px; gap: 25px; } .footer-links { width: 100%; justify-content: space-between; order: 3; gap: 12px; } .copyright { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.legal-content ul { margin: 8px 0 0 20px; list-style: disc; }
.legal-content li + li { margin-top: 4px; }
.legal-content strong { color: var(--foreground); font-weight: 600; }
.legal-updated { margin-bottom: 8px; }