:root {
  --bg:#F7F5F0; --ink:#1B1A17; --muted:#6B6559; --soft:#8C867A;
  --accent:#FF5C39; --accent-soft:#FFE6DF;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font-family:'Hanken Grotesk',-apple-system,system-ui,sans-serif; line-height:1.55;
  -webkit-font-smoothing:antialiased; }
.display { font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:800;
  letter-spacing:-.025em; }
.wrap { max-width:1040px; margin:0 auto; padding:0 22px; }
a { color:var(--accent); }

/* Language switch */
.langswitch { position:fixed; top:14px; right:14px; z-index:10; display:flex; gap:2px;
  background:#fff; border-radius:9999px; padding:4px; font-size:13px; font-weight:700;
  box-shadow:0 1px 2px rgba(20,18,14,.06),0 8px 20px rgba(20,18,14,.08); }
.langswitch a, .langswitch span { padding:5px 12px; border-radius:9999px; text-decoration:none; }
.langswitch .on { background:var(--accent); color:#fff; }
.langswitch .off { color:var(--soft); }

/* Hero */
header.hero { padding:80px 0 36px; text-align:center; }
.eyebrow { font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); }
h1.tagline { font-size:clamp(38px,7vw,68px); line-height:1.02; margin:14px 0 0; }
.sub-en { font-size:clamp(16px,2.4vw,20px); color:var(--soft); font-weight:600; margin-top:10px; }
.intro { max-width:560px; margin:20px auto 0; color:var(--muted); font-size:17px; }
.badge { display:inline-block; margin-top:26px; padding:10px 18px; border-radius:9999px;
  background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:14px; }

/* Screenshots */
.shots { display:flex; gap:22px; overflow-x:auto; padding:40px 22px 10px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.shots img { width:236px; flex:none; border-radius:28px; scroll-snap-align:center;
  box-shadow:0 2px 6px rgba(20,18,14,.06),0 26px 60px rgba(20,18,14,.16);
  border:1px solid rgba(27,26,23,.06); }
@media (min-width:1040px){ .shots { justify-content:center; overflow:visible; } }

/* Features */
.features { padding:48px 0 8px; }
.features h2 { text-align:center; font-size:13px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--soft); margin-bottom:26px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.card { background:#fff; border-radius:20px; padding:20px 22px;
  box-shadow:0 1px 2px rgba(20,18,14,.04),0 10px 26px rgba(20,18,14,.05); }
.card .dot { width:40px; height:40px; border-radius:12px; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.card .dot svg { width:22px; height:22px; stroke:var(--accent); fill:none; }
.card h3 { font-size:17px; margin:0 0 3px; }
.card p { margin:0; color:var(--muted); font-size:14.5px; }

/* Footer */
footer { margin-top:56px; padding:40px 0 64px; border-top:1px solid rgba(27,26,23,.1);
  text-align:center; }
footer a { text-decoration:none; font-weight:600; margin:0 12px; }
footer .small { color:var(--soft); font-size:13.5px; margin-top:16px; }

/* Legal / support pages */
.doc { max-width:720px; margin:0 auto; padding:64px 22px 80px; }
.doc h1 { font-size:32px; letter-spacing:-.02em; margin:0 0 4px; }
.doc h2 { font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:var(--accent);
  margin:40px 0 10px; }
.doc h3 { font-size:17px; margin:24px 0 4px; }
.doc p, .doc li { color:var(--muted); }
.doc .date { color:#A8A296; font-size:14px; margin-bottom:8px; }
.doc .tag { display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.doc .infocard { background:#fff; border-radius:18px; padding:18px 20px; margin:14px 0;
  box-shadow:0 1px 2px rgba(20,18,14,.04),0 8px 22px rgba(20,18,14,.05); }
.doc .back { display:inline-block; margin-top:40px; font-weight:600; text-decoration:none; }