:root { --page:#15161b; --surface:#23242c; --text:#f2f2f2; --muted:#bfc0c4; --green:#9fdbbd; --green-strong:#559878; --line:#3b3d47; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; background:var(--page); color:var(--text); font-family:"Noto Sans Display",Arial,sans-serif; } a { color:inherit; text-decoration:none; }
.site-header,.hero,.features,.closing,footer { width:min(1180px,calc(100% - 48px)); margin:0 auto; }.site-header { height:80px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.brand { display:inline-flex; align-items:center; gap:10px; font-size:20px; font-weight:700; }.brand img { width:32px; height:32px; filter:brightness(0) invert(1); }nav { display:flex; align-items:center; gap:28px; color:var(--muted); font-size:14px; }nav a:hover { color:var(--green); }.nav-app { display:inline-flex; align-items:center; gap:7px; color:var(--green); font-weight:700; }svg { width:18px; height:18px; stroke-width:2; }
.hero { min-height:720px; display:grid; grid-template-columns:minmax(0,1fr) minmax(390px,.85fr); align-items:center; gap:76px; padding:64px 0 72px; overflow:hidden; }.eyebrow { margin:0 0 18px; color:var(--green); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; }h1,h2,h3 { margin:0; font-family:Merriweather,Georgia,serif; font-weight:400; }h1 { max-width:650px; font-size:clamp(44px,5vw,72px); line-height:1.14; }.hero-lead { max-width:560px; margin:28px 0 32px; color:var(--muted); font-size:19px; line-height:1.65; }.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }.button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:11px 18px; border:1px solid transparent; border-radius:6px; font-weight:700; }.button-primary { color:#11231a; background:var(--green); }.button-primary:hover { background:#bce9cf; }.button-secondary { color:var(--green); border-color:var(--green-strong); }.button-secondary:hover { border-color:var(--green); background:#1d3227; }.quiet-note { display:flex; align-items:center; gap:9px; margin:28px 0 0; color:var(--muted); font-size:14px; }.quiet-note svg { color:var(--green); }
.app-store-banner { display:inline-flex; transition:transform .16s ease; }.app-store-banner:hover { transform:translateY(-1px); }.app-store-banner img { display:block; height:46px; width:auto; }
.device-stack { position:relative; width:100%; min-height:590px; }.device { position:absolute; overflow:hidden; border:5px solid #08090c; border-radius:31px; background:#08090c; box-shadow:0 26px 70px rgba(0,0,0,.46); cursor:pointer; }.device:hover { box-shadow:0 32px 78px rgba(0,0,0,.58); }.device img { display:block; width:100%; height:auto; }.device-back { width:53%; top:38px; right:1%; transform:rotate(5deg); opacity:.86; }.device-front { width:59%; left:1%; top:112px; transform:rotate(-4deg); }
.features { padding:100px 0; border-top:1px solid var(--line); }.section-intro { max-width:700px; }h2 { font-size:clamp(31px,3.8vw,48px); line-height:1.28; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px; }.feature-grid article { min-height:230px; padding:30px; background:var(--surface); border:1px solid var(--line); border-radius:8px; }.feature-grid svg { width:28px; height:28px; color:var(--green); }h3 { margin-top:28px; font-size:21px; }.feature-grid p { margin:14px 0 0; color:var(--muted); line-height:1.55; }.closing { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:62px 0 100px; }.closing h2 { color:var(--green); }footer { display:flex; justify-content:space-between; padding:26px 0 34px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }footer div { display:flex; gap:20px; }footer a:hover { color:var(--green); }
@media (max-width:800px) { .site-header,.hero,.features,.closing,footer { width:min(100% - 32px,600px); }.site-header { height:68px; }nav { gap:16px; }nav > a:not(.nav-app) { display:none; }.hero { display:flex; flex-direction:column; align-items:flex-start; min-height:0; gap:28px; padding:60px 0 68px; }.hero-lead { font-size:17px; }.device-stack { min-height:480px; width:min(100%,480px); align-self:center; }.device-back { right:2%; }.device-front { left:2%; }.features { padding:72px 0; }.feature-grid { grid-template-columns:1fr; margin-top:32px; }.feature-grid article { min-height:0; }.closing { align-items:flex-start; flex-direction:column; padding:48px 0 72px; }footer { flex-direction:column; gap:12px; } }

/* Keep the static root page visually in lockstep with the Vue landing route. */
.site-header,.hero,.features,.closing,footer { width:min(1240px,calc(100% - 48px)); }
.brand { color:#fff; font:300 20px "Noto Sans Display",system-ui,sans-serif; letter-spacing:.03em; }
.hero { gap:52px; grid-template-columns:minmax(0,.94fr) minmax(450px,1.06fr); }
h1 { font-size:clamp(42px,4.5vw,62px); }
.device-stack { min-height:660px; }.device-back { right:0; top:12px; width:69%; }.device-front { left:0; top:76px; width:77%; }
@keyframes landing-rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
.hero-copy > *, .device, .section-intro, .feature-grid article, .closing, footer { animation:landing-rise .62s cubic-bezier(.22,.61,.36,1) both; }
.hero-copy > :nth-child(1) { animation-delay:.05s; }.hero-copy > :nth-child(2) { animation-delay:.12s; }.hero-copy > :nth-child(3) { animation-delay:.19s; }.hero-copy > :nth-child(4) { animation-delay:.26s; }.hero-copy > :nth-child(5) { animation-delay:.33s; }
.device-back { animation-delay:.2s; }.device-front { animation-delay:.34s; }.section-intro { animation-delay:.08s; }.feature-grid article:nth-child(1) { animation-delay:.16s; }.feature-grid article:nth-child(2) { animation-delay:.24s; }.feature-grid article:nth-child(3) { animation-delay:.32s; }.feature-grid article:nth-child(4) { animation-delay:.40s; }.feature-grid article:nth-child(5) { animation-delay:.48s; }.feature-grid article:nth-child(6) { animation-delay:.56s; }.closing { animation-delay:.1s; }footer { animation-delay:.16s; }
@media (max-width:800px) { .site-header,.hero,.features,.closing,footer { width:min(100% - 32px,600px); }.hero { gap:0; padding-top:34px; }.device-stack { align-self:center; min-height:330px; order:1; width:min(86%,390px); }.device-stack::after { background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.68) 44%,rgba(0,0,0,.38) 70%,transparent 86%); content:""; inset:0 -8px -72px; pointer-events:none; position:absolute; z-index:1; }.device-back { right:2%; top:0; width:60%; }.device-front { left:2%; top:38px; width:66%; }.hero-copy { margin-top:-126px; order:2; position:relative; z-index:2; }.hero-lead { max-width:34rem; } }
@media (min-width:1100px) { .hero { grid-template-columns:minmax(0,.86fr) minmax(590px,1.14fr); min-height:880px; overflow:hidden; }.device-stack { transform:translate(-34px,28px); z-index:2; }.device { height:720px; }.device img { height:100%; object-fit:cover; object-position:top; }.device-back { right:0; top:0; width:72%; }.device-front { left:0; top:70px; width:80%; }.features { padding-top:100px; position:relative; } }
@media (prefers-reduced-motion:reduce) { .hero-copy > *, .device, .section-intro, .feature-grid article, .closing, footer { animation:none; } }

.language-switch { appearance:none; background:transparent; border:1px solid var(--line); border-radius:4px; color:var(--muted); cursor:pointer; font:inherit; font-size:12px; font-weight:700; min-width:34px; padding:5px 7px; }
.language-switch:hover { border-color:var(--green); color:var(--green); }
h1, h2 { white-space:pre-line; }
.hero-actions { align-items:flex-start; flex-direction:column; gap:14px; }
.hero-web-actions,.hero-store-actions { align-items:center; display:flex; flex-wrap:wrap; gap:12px; }
.hero-store-actions { order:-1; }
.hero-open-app-label-mobile { display:none; }
/* Google's official badge includes more transparent padding than Apple's. */
.app-store-banner img[data-play-store-badge] { height:60px; margin:-7px 0; }
.privacy-panel { margin:0 auto; max-width:820px; padding:76px 0 90px; }.privacy-panel[hidden] { display:none; }.privacy-document { animation:landing-rise .38s cubic-bezier(.22,.61,.36,1) both; color:var(--muted); }.privacy-document h1,.privacy-document h2,.privacy-document h3 { color:var(--text); font-family:Merriweather,Georgia,serif; }.privacy-document h1 { font-size:clamp(2.35rem,5vw,4rem); margin:0 0 2rem; }.privacy-document h2 { border-top:1px solid var(--line); font-size:clamp(1.5rem,3vw,2.1rem); margin:3rem 0 1rem; padding-top:2.3rem; }.privacy-document h3 { font-size:1.15rem; margin:2.1rem 0 .7rem; }.privacy-document p,.privacy-document li { font-size:1rem; line-height:1.7; }.privacy-document a { color:var(--green); }.privacy-document .text-muted { color:var(--muted)!important; }
@media (max-width:800px) {
  .hero-actions { gap:12px; width:min(100%,460px); }
  .hero-web-actions,.hero-store-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .hero-web-actions .button { width:100%; }
  .hero-open-app-label { display:none; }
  .hero-open-app-label-mobile { display:inline!important; }
  .hero-store-actions .app-store-banner { justify-content:center; }
  .privacy-panel { padding:48px 0 68px; width:min(100% - 32px,600px); }
}