/* ──────────────────────────────────────────────────────────────────────
   Quotien website, shared base stylesheet (Path A)
   Tokens, fonts, base type, buttons, top bar, footer, shared utilities.
   Page-specific CSS (scroll hero, report tabs, contact form) stays in
   each page until de-duplicated. See README, task 1.
   ────────────────────────────────────────────────────────────────────── */

/* fonts, subset woff2, Latin range */
@font-face{font-family:"Geist";font-weight:400;font-display:swap;src:url("fonts/Geist-Regular.woff2") format("woff2")}
@font-face{font-family:"Geist";font-weight:500;font-display:swap;src:url("fonts/Geist-Medium.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:400;font-display:swap;src:url("fonts/GeistMono-Regular.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:500;font-display:swap;src:url("fonts/GeistMono-Medium.woff2") format("woff2")}

/* tokens */
:root{
  --bg:#fafaf8; --bg-2:#f3f2ee; --bg-3:#ebeae5;
  --ink:#15140f; --ink-2:#3b3a34; --ink-3:#6b6a62; --ink-4:#a3a299;
  --rule:#d9d7cf; --rule-2:#c6c4ba;
  --flux:oklch(0.88 0.20 124); --flux-2:oklch(0.82 0.19 126); --flux-soft:oklch(0.88 0.20 124 / 0.16); --flux-line:oklch(0.88 0.20 124 / 0.40); --on-flux:#15140f;
  --signal:oklch(0.60 0.16 145); --warn:oklch(0.62 0.16 60); --danger:oklch(0.55 0.20 25); --accent:oklch(0.46 0.06 245);
  --viz-green:oklch(0.72 0.17 145); --viz-blue:oklch(0.60 0.15 250); --viz-purple:oklch(0.55 0.20 295); --viz-pink:oklch(0.66 0.22 358); --viz-orange:oklch(0.72 0.18 52); --viz-yellow:oklch(0.87 0.17 96);
  --tag-sage:oklch(0.90 0.04 145); --tag-mist:oklch(0.88 0.04 240); --tag-peach:oklch(0.90 0.05 50); --tag-lilac:oklch(0.88 0.04 300); --tag-ochre:oklch(0.92 0.05 90);
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --dur:160ms; --ease:cubic-bezier(.2,.8,.2,1);
  --col:1120px;
}

/* base */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:60px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.dark{--bg:#0f0f0d;--bg-2:#181814;--bg-3:#22221d;--ink:#f5f3ec;--ink-2:#cfcdc4;--ink-3:#8a8881;--ink-4:#5a5852;--rule:#2c2b26;--rule-2:#3d3c36;background:var(--bg);color:var(--ink)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:var(--col);margin:0 auto;padding:0 32px}
h1,h2,h3{margin:0;font-weight:400;letter-spacing:-0.015em}
.display{font-weight:500;font-size:clamp(38px,6vw,68px);line-height:1.0;letter-spacing:-0.03em;text-wrap:balance}
.display em{font-style:normal;color:var(--ink-3)}
.h2{font-size:clamp(25px,3.2vw,34px);line-height:1.18;letter-spacing:-0.02em;text-wrap:balance;font-weight:500}
.deck{font-size:18px;line-height:1.55;color:var(--ink-2)}
p{margin:0 0 14px;color:var(--ink-2)}
.muted{color:var(--ink-3)}
.mono{font-family:var(--mono)}
.cap{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3)}
section{padding:84px 0;border-top:1px solid var(--rule)}
.lead{max-width:62ch}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;letter-spacing:.01em;padding:12px 18px;border-radius:2px;border:1px solid var(--ink);cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn .ar{transition:transform var(--dur) var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.btn-flux{background:var(--flux);border-color:var(--flux);color:var(--on-flux)} .btn-flux:hover{background:transparent;color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)} .btn-ghost:hover{background:var(--ink);color:var(--bg)}
.btn-lg{padding:14px 22px;font-size:14px}

/* top bar */
.topbar{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--rule)}
.topbar .wrap{display:flex;align-items:center;gap:26px;height:60px}
.brand{display:flex;align-items:center;gap:9px;font-weight:500;font-size:18px;letter-spacing:-0.02em}
.brand img{height:22px;width:auto;display:block}
.topbar .brand img{height:26px}
.navlinks{display:flex;gap:22px;margin-left:6px}
.navlinks a{font-size:14px;color:var(--ink-2)}.navlinks a:hover{color:var(--ink)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.tb-right .signin{font-size:14px;color:var(--ink-2)}.tb-right .signin:hover{color:var(--ink)}

/* live dot */
.dot-live{width:8px;height:8px;border-radius:999px;background:var(--flux);display:inline-block;vertical-align:middle;margin-right:7px}
@media (prefers-reduced-motion:no-preference){.dot-live{animation:pulse 2.4s var(--ease) infinite}}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--flux-line)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* footer */
.site-footer{border-top:1px solid var(--rule);padding:40px 0;color:var(--ink-3);font-size:13px}
.site-footer .wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.site-footer a{color:var(--ink-3)} .site-footer a:hover{color:var(--ink)}
.site-footer .fl{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}

/* language selector */
.langsel{display:flex;gap:1px;font-family:var(--mono);font-size:12px;align-items:center}
.langsel a{padding:4px 6px;color:var(--ink-4);border-radius:2px;letter-spacing:.02em}
.langsel a:hover{color:var(--ink)}
.langsel a.on{color:var(--ink)}
.site-footer .langsel{margin-left:0}