/* Core variables (light) */ :root{ --bg:#ffffff; --surface:#ffffff; --ink:#0e141b; --muted:#64748b; --accent:#007aff; --accent-ink:#ffffff; --ring:rgba(0,122,255,.35); --shadow:0 20px 50px rgba(2,6,23,.12); --radius:20px; --maxw:1120px; --header-h:64px; /* review stages */ --stage-1:#e11d48; --stage-2:#f97316; --stage-3:#0ea5e9; --stage-4:#f59e0b; --stage-5:#a855f7; --stage-6:#22c55e; --stage-7:#92400e; --stage-8:#4b5563; } /* Dark scheme (auto) */ @media (prefers-color-scheme: dark){ :root{ --bg:#0b1220; --surface:#0f172a; --ink:#f1f5f9; --muted:#94a3b8; --accent:#0a84ff; --accent-ink:#ffffff; --shadow:0 20px 50px rgba(0,0,0,.35); } } /* Manual dark theme override (toggle adds .theme-dark to ) */ html.theme-dark{ --bg:#0b1220; --surface:#0f172a; --ink:#f1f5f9; --muted:#94a3b8; --accent:#0a84ff; --accent-ink:#ffffff; --shadow:0 20px 50px rgba(0,0,0,.35); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font:16px/1.55 ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} .container{max-width:var(--maxw);margin:0 auto;padding:0 20px} /* Skip link */ .skip-link{ position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden; } .skip-link:focus{ position:fixed;left:20px;top:20px;width:auto;height:auto;padding:10px 14px;border-radius:8px;background:var(--accent);color:#fff;box-shadow:var(--shadow);z-index:1000; } /* Header / Nav */ .header{ position:sticky;top:0;z-index:50;background:color-mix(in oklab, var(--surface) 85%, transparent); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid color-mix(in oklab, var(--ink) 8%, transparent); } .nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)} .logo{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none} .logo img{width:28px;height:28px;border-radius:6px;display:block} .logo-text{font-weight:600;letter-spacing:.2px} .navlinks{display:flex;gap:20px;align-items:center} .navlinks a{color:var(--ink);opacity:.8;padding:6px 0;position:relative;white-space:nowrap} .navlinks a.active{opacity:1} .navlinks a.active::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:3px;border-radius:3px;background:var(--accent)} .nav-cta{display:flex;gap:10px;align-items:center} .icon-btn{background:transparent;border:1px solid color-mix(in oklab, var(--ink) 12%, transparent);border-radius:999px;padding:8px 10px;cursor:pointer;color:var(--ink)} .icon-btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px} .menu-toggle{display:none;flex-direction:column;gap:3px} .menu-toggle__bar{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px} /* Mobile menu */ @media (max-width: 980px){ .navlinks{position:fixed;inset:var(--header-h) 0 auto 0;background:var(--surface);border-bottom:1px solid color-mix(in oklab, var(--ink) 8%, transparent);padding:20px;display:none;flex-direction:column;gap:14px} .navlinks.open{display:flex} .menu-toggle{display:flex} } /* Buttons */ .cta,.btn,.badge{ display:inline-block;border-radius:999px;padding:10px 16px;transition:.2s;cursor:pointer;white-space:nowrap } .cta{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 24px color-mix(in oklab, var(--accent) 30%, transparent);border:0} .cta:hover{transform:translateY(-1px)} .cta.ghost{background:transparent;color:var(--ink);border:1px solid color-mix(in oklab, var(--ink) 12%, transparent);box-shadow:none} .btn{background:transparent;color:var(--ink);border:1px solid color-mix(in oklab, var(--ink) 12%, transparent)} .btn:hover{transform:translateY(-1px)} .cta:focus-visible,.btn:focus-visible,.badge:focus-visible{outline:3px solid var(--ring);outline-offset:2px} .btn-icon{vertical-align:-3px;margin-right:8px} /* Hero */ .section--tight{padding:42px 0} .hero{background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 10%, var(--bg)) 0%, var(--bg) 44%)} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center} .kicker{letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-size:.8rem;margin-bottom:12px} h1{font-size:56px;line-height:1.05;margin:0 0 14px} .lead{font-size:18px;color:color-mix(in oklab, var(--ink) 75%, transparent);margin:0 0 18px} .note{color:var(--muted)} .hero-visual{position:relative;height:560px;overflow:hidden} .hero-visual .mock{position:absolute;bottom:-18px;width:clamp(220px,26vw,360px);filter:drop-shadow(0 30px 60px rgba(2,6,23,.30))} .hero-visual .mock.left{left:8%;transform:rotate(-8deg)} .hero-visual .mock.center{left:36%;transform:rotate(6deg);z-index:2} .hero-visual .mock.right{left:60%;transform:rotate(-4deg)} .hero-visual picture{display:block} .hero-visual img{display:block;width:100%;height:auto} /* Sections */ .section{padding:56px 0} h2{font-size:40px;margin:0 0 18px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .numbered{counter-reset: steps} .numbered > li{counter-increment: steps} .card{background:var(--surface);border:1px solid color-mix(in oklab, var(--ink) 8%, transparent);border-radius:18px;padding:18px;box-shadow:var(--shadow)} .card h3{margin:8px 0 6px} /* Testimonials */ .testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .quote{background:var(--surface);border:1px solid color-mix(in oklab, var(--ink) 8%, transparent);border-radius:18px;padding:16px;box-shadow:var(--shadow)} .quote blockquote{margin:0 0 8px} .quote figcaption{color:var(--muted);font-size:14px} /* Review stage colors + animation trigger */ .stagebar{display:flex;gap:8px;margin-top:10px} .stage{width:18px;height:18px;border-radius:6px;opacity:.65;transform:scale(.9)} .stage:nth-child(1){background:var(--stage-1)} .stage:nth-child(2){background:var(--stage-2)} .stage:nth-child(3){background:var(--stage-3)} .stage:nth-child(4){background:var(--stage-4)} .stage:nth-child(5){background:var(--stage-5)} .stage:nth-child(6){background:var(--stage-6)} .stage:nth-child(7){background:var(--stage-7)} .stage:nth-child(8){background:var(--stage-8)} .stagebar.is-anim .stage{animation: stage-pop .5s ease-out forwards} .stagebar.is-anim .stage:nth-child(2){animation-delay:.07s} .stagebar.is-anim .stage:nth-child(3){animation-delay:.14s} .stagebar.is-anim .stage:nth-child(4){animation-delay:.21s} .stagebar.is-anim .stage:nth-child(5){animation-delay:.28s} .stagebar.is-anim .stage:nth-child(6){animation-delay:.35s} .stagebar.is-anim .stage:nth-child(7){animation-delay:.42s} .stagebar.is-anim .stage:nth-child(8){animation-delay:.49s} @keyframes stage-pop{from{transform:scale(.9);opacity:.65} to{transform:scale(1);opacity:1}} /* Screenshots grid */ .screens{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .screens picture{display:block;border-radius:18px;overflow:hidden;border:1px solid color-mix(in oklab, var(--ink) 8%, transparent);box-shadow:var(--shadow)} .screens img{width:100%;height:auto;display:block} /* Pricing */ .pricing{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .price-card{background:var(--surface);border:1px solid color-mix(in oklab, var(--ink) 8%, transparent);border-radius:18px;padding:18px;box-shadow:var(--shadow)} .price-card h3{margin:8px 0} /* Privacy glance */ .privacy-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} /* FAQ */ .faq details{border:1px solid color-mix(in oklab, var(--ink) 8%, transparent);border-radius:14px;padding:12px 14px;background:var(--surface);margin:10px 0;box-shadow:var(--shadow)} .faq summary{cursor:pointer;font-weight:600;outline:none} .faq p{margin:10px 0 0;color:color-mix(in oklab, var(--ink) 75%, transparent)} /* Footer / Socials */ .footer{padding:28px 0;border-top:1px solid color-mix(in oklab, var(--ink) 8%, transparent);background:var(--surface)} .badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px} .badge{background:transparent;border:1px solid color-mix(in oklab, var(--ink) 12%, transparent);padding:8px 12px;border-radius:999px} .socials{display:flex;gap:10px} .socials a{width:28px;height:28px;border-radius:999px;background:color-mix(in oklab, var(--ink) 8%, var(--surface));display:inline-grid;place-items:center;border:1px solid color-mix(in oklab, var(--ink) 8%, transparent)} .socials svg, .socials svg *{fill:currentColor;stroke:currentColor} .fineprint{color:var(--muted);font-size:12px} /* Sticky CTA (mobile) */ .sticky-cta{position:fixed;left:0;right:0;bottom:12px;display:flex;justify-content:center;pointer-events:none;z-index:60} .sticky-cta .cta{pointer-events:auto;box-shadow:0 10px 24px rgba(2,6,23,.25)} @media (min-width: 980px){ .sticky-cta{display:none} } /* Reveal on scroll */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .45s ease, transform .45s ease} .reveal.is-visible{opacity:1;transform:translateY(0)} /* Anchor offset so sticky header doesn't cover target */ section[id]{scroll-margin-top:calc(var(--header-h) + 12px)} /* Responsive */ @media (max-width: 980px){ .hero-grid{grid-template-columns:1fr} .hero-visual{height:420px} .hero-visual .mock{width:clamp(200px,46vw,320px)} .grid-4{grid-template-columns:1fr 1fr} .screens{grid-template-columns:1fr 1fr} .privacy-cards{grid-template-columns:1fr} .pricing{grid-template-columns:1fr} h1{font-size:44px} .testimonials{grid-template-columns:1fr} } @media (max-width: 620px){ .hero-visual{height:360px} .screens{grid-template-columns:1fr} .grid-4{grid-template-columns:1fr} } /* Modal */ .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:100} .modal.open{display:flex} .modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)} .modal__dialog{position:relative;background:var(--surface);border:1px solid color-mix(in oklab, var(--ink) 8%, transparent);border-radius:18px;padding:12px;max-width:min(960px, 96vw);width:96vw;box-shadow:var(--shadow)} .modal__close{position:absolute;right:8px;top:8px} .demo-video{width:100%;height:auto;border-radius:12px} /* Motion reduction */ @media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} } /* Hero visual override: use single centered card */ .hero-visual .mock.left, .hero-visual .mock.right{display:none} .hero-visual .mock.center{left:50%;transform:translateX(-50%);z-index:1}