/* =====================================================================
   OpenHood — Landing Page
   Design tokens & component styles
   Three themes: Asphalt (dark, default) · Werkbank (sand) · Tannengrün (forest)
   ===================================================================== */

/* ---------------------------------------------------------------------
   Self-hosted fonts — Fontsource 5.3.0 woff2, SIL Open Font License 1.1
   (see fonts/OFL.txt). Served from our own origin, so no visitor data is
   sent to a third-party font CDN (avoids the Google-Fonts/GDPR issue).

   Five ranges per face: latin, latin-ext, cyrillic, greek, devanagari.
   `unicode-range` is what makes them combine rather than override each
   other, and it keeps the cost per visitor flat — a German page still
   fetches exactly the latin files and nothing else, Polish adds latin-ext,
   Ukrainian and Bulgarian add cyrillic, Greek adds greek, Hindi adds
   devanagari. Without it the last matching @font-face would win outright
   and the extras would be dead weight.

   Keep the ranges in sync with each package's unicode.json on jsdelivr.
   A language outside these five (Vietnamese, Arabic, …) needs its own files
   added here — see fonts/README.md.
   --------------------------------------------------------------------- */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Regular-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Regular-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Regular-cyrillic.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Regular-greek.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Medium-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Medium-latin-ext.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Medium-cyrillic.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Medium-greek.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-SemiBold-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-SemiBold-latin-ext.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-SemiBold-cyrillic.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-SemiBold-greek.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Bold-latin.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Bold-latin-ext.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Bold-cyrillic.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Bold-greek.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Regular-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Regular-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Regular-cyrillic.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Regular-greek.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Italic-latin.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Italic-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Italic-cyrillic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Italic-greek.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular-cyrillic.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular-greek.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Medium-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Medium-latin-ext.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Medium-cyrillic.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Medium-greek.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}


/* ---------------------------------------------------------------------
   Devanagari (Hindi). Unlike latin-ext / cyrillic / greek, this is NOT a
   subset of the three brand families — none of them draws Devanagari at
   all. IBM Plex ships a separate companion face, so the sans keeps its
   brand identity; the serif accent falls to Noto Serif Devanagari, and the
   mono labels fall to the Plex Devanagari sans because no Devanagari
   monospace exists. Declaring them under the existing family names plus a
   unicode-range means nothing else in this stylesheet has to know.
   There is deliberately no italic: Devanagari has no italic tradition and
   slanting it is wrong, so the italic face points at the upright file.
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSansDevanagari-Regular-devanagari.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSansDevanagari-Medium-devanagari.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSansDevanagari-SemiBold-devanagari.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSansDevanagari-Bold-devanagari.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/NotoSerifDevanagari-Regular-devanagari.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/NotoSerifDevanagari-Regular-devanagari.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/IBMPlexSansDevanagari-Regular-devanagari.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/IBMPlexSansDevanagari-Medium-devanagari.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}

:root {
  --bg: #0b0b0c;
  --bg-2: #131316;
  --bg-3: #1c1c20;
  --line: #26262b;
  --line-2: #36363d;
  --fg: #f5f5f3;
  --fg-2: #b4b4ad;
  --fg-3: #76767a;
  --accent: #ff5a1f;
  --accent-fg: #0b0b0c;
  --good: #6dd49a;
}
[data-theme="sand"] {
  --bg: #f4f1ec;
  --bg-2: #ebe6dd;
  --bg-3: #ddd6c8;
  --line: #cfc7b6;
  --line-2: #a89e89;
  --fg: #1a1714;
  --fg-2: #4e4940;
  --fg-3: #807a6e;
  --accent: #c8421a;
  --accent-fg: #f4f1ec;
  --good: #2f7a52;
}
[data-theme="forest"] {
  --bg: #0d1f17;
  --bg-2: #142a20;
  --bg-3: #1c3a2c;
  --line: #2a4a39;
  --line-2: #3d6450;
  --fg: #ecf5ee;
  --fg-2: #a6c4b1;
  --fg-3: #6b8a76;
  --accent: #f5c84a;
  --accent-fg: #0d1f17;
  --good: #9be3b8;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
  /* Multilingual safety net. The page ships in languages that build nouns far
     longer than German — Danish "prissammenligningsside" overran the pull
     quote by 43px, Danish "Godkendelse" overran a 45px dashboard card. A word
     that genuinely cannot fit its box has to break rather than widen the whole
     page; ordinary wrapping is untouched, because this only applies when there
     is no other break opportunity. Headings restate it with their own
     comments — see h1 and h2. */
  overflow-wrap: break-word;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.serif { font-family: 'Source Serif 4', serif; font-weight: 400; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* nav */
nav.top {
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
}
nav.top .row {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
}
/* The nav wordmark is a link back to the top; the footer one is a plain div.
   Without this the nav copy renders in the browser's default link blue with
   an underline, because nothing else in the sheet resets anchors globally. */
a.logo { color: inherit; text-decoration: none; }
.logo-mark {
  width: 28px; height: 28px;
  display: block;
  border-radius: 6px;
  flex: none;
}
nav.top ul {
  display: flex; gap: 28px; list-style: none; padding: 0; margin: 0;
  font-size: 14px; color: var(--fg-2);
}
nav.top ul a { color: inherit; text-decoration: none; }
nav.top ul a:hover { color: var(--fg); }
nav.top .cta-row { display: flex; align-items: center; gap: 16px; }

/* Language switcher
   A <details> element, so picking a language works without JavaScript and
   keeps working as the list grows past a handful of entries. main.js only
   adds click-outside / Escape dismissal on top. */
.lang-switch { position: relative; flex: none; }
.lang-switch > summary {
  display: inline-grid; place-items: center;
  min-width: 34px; height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: transparent;
  color: var(--fg-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* Suppress the native disclosure triangle in both engine families. */
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary::marker { content: ''; }
.lang-switch > summary:hover { background: var(--bg-2); border-color: var(--fg-3); color: var(--fg); }
.lang-switch[open] > summary { background: var(--bg-2); border-color: var(--fg-3); color: var(--fg); }

.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  display: grid;
  min-width: 180px;
  /* Enough languages to need scrolling — cap the height rather than let the
     menu run off the bottom of the viewport. */
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.lang-menu a {
  padding: 8px 10px;
  border-radius: 4px;
  color: var(--fg-2);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  /* Deliberately the system font, not IBM Plex. Every language name is written
     in its own script, so this menu is the one place where every page carries
     text from every script we ship. Left in the brand font it would pull the
     cyrillic subset (and later Greek, Devanagari, …) into *every* locale for
     the sake of one hidden dropdown. The system font also guarantees a script
     we have no subset for still renders. */
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.lang-menu a:hover { background: var(--bg-2); color: var(--fg); }
.lang-menu a[aria-current] { color: var(--fg); font-weight: 600; }
/* Mark the active language without relying on colour alone. */
.lang-menu a[aria-current]::after { content: ' ·'; color: var(--accent); }

/* theme toggle */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { background: var(--bg-2); border-color: var(--fg-3); color: var(--fg); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-radius: 4px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent); color: var(--accent-fg);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost {
  background: transparent; color: var(--fg);
  border-color: var(--line-2);
}
.btn-ghost:hover { background: var(--bg-2); border-color: var(--fg-3); }
.btn-sm { padding: 9px 14px; font-size: 13px; }

/* hero */
.hero {
  border-bottom: 1px solid var(--line);
  padding: 48px 0 0;
  position: relative;
  overflow: hidden;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--fg-3);
  margin-bottom: 28px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent);
}
.hero h1 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: clamp(40px, 6.5vw, 84px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0 0 28px;
  max-width: 14ch;
  overflow-wrap: break-word;
}
/* Keep the non-breaking "Werkstatt und Kunde." run from overflowing
   narrow viewports. */
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(30px, 8.4vw, 40px); }
}
.hero h1 em {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.hero-sub {
  font-size: 19px;
  color: var(--fg-2);
  max-width: 56ch;
  margin: 0 0 40px;
  line-height: 1.5;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: end;
  padding-bottom: 56px;
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* split paths */
.paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
@media (max-width: 720px) { .paths { grid-template-columns: 1fr; } }
.path {
  padding: 32px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 16px;
  transition: background 0.2s ease;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.path:last-child { border-right: none; }
@media (max-width: 720px) {
  .path { border-right: none; border-bottom: 1px solid var(--line); }
  .path:last-child { border-bottom: none; }
}
.path:hover { background: var(--bg-2); }
.path-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex; align-items: center; gap: 8px;
}
.path-tag::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px; border-radius: 1px;
  background: var(--accent);
}
.path h3 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.path p {
  color: var(--fg-2);
  font-size: 15px;
  margin: 0;
  flex: 1;
}
.path-cta {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px;
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
  margin-top: 4px;
}
.path-cta .arrow {
  transition: transform 0.2s ease;
}
.path:hover .arrow { transform: translateX(4px); }

/* product visual placeholder */
.product-frame {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  display: flex; flex-direction: column;
}
.product-frame .frame-label {
  position: absolute;
  top: 12px; left: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* phone mock */
.phone-mock {
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  width: 240px;
  height: 480px;
  margin: auto;
  padding: 18px 14px;
  display: flex; flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.phone-mock::before {
  content: ""; position: absolute;
  top: 8px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 4px; border-radius: 2px;
  background: var(--line);
}
.phone-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; color: var(--fg-3);
}
.phone-status {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
}
.ph-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.ph-label {
  font-size: 10px; color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.ph-value {
  font-size: 11px; color: var(--fg); font-weight: 600;
}
.ph-title {
  font-size: 14px; color: var(--fg);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 6px 0 12px;
}
.progress {
  display: flex; gap: 4px; margin-bottom: 12px;
}
.progress-step {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--line);
}
.progress-step.done { background: var(--accent); }
.progress-step.active {
  background: var(--accent);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.stages {
  display: flex; justify-content: space-between;
  font-size: 8px; color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
}
.stages span.active-s { color: var(--accent); }
.chat-bubble {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11px;
  max-width: 80%;
  line-height: 1.35;
}
.chat-bubble.them {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg);
  align-self: flex-start;
  border-bottom-left-radius: 2px;
}
.chat-bubble.you {
  background: var(--accent);
  color: var(--accent-fg);
  align-self: flex-end;
  border-bottom-right-radius: 2px;
  font-weight: 500;
}
.chat-time {
  font-size: 8px; color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
}

/* sections */
section {
  padding: 96px 0;
  border-bottom: 1px solid var(--line);
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
}
.section-head .left { max-width: 60ch; min-width: 0; }
.section-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
  /* Some languages make this label much longer than the German "Das Problem"
     (Hungarian: "01 A probléma"). As a flex container it defaults to
     min-width:auto and would push the whole section past a 320px viewport,
     so let it shrink and wrap instead. */
  flex-wrap: wrap; min-width: 0;
}
.section-tag .num {
  color: var(--accent);
}
h2 {
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  max-width: 18ch;
  /* Last-resort safety net for a compound longer than its column
     (Hungarian "szervizkommunikáció" at 320px), so a single word can never
     widen the page. The tablet band is handled by stacking .section-head
     early instead — see the media query below. */
  overflow-wrap: break-word;
}
h2 em {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.section-lede {
  font-size: 17px;
  color: var(--fg-2);
  max-width: 44ch;
  margin: 0;
  line-height: 1.5;
}

/* problem */
.problems {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 880px) { .problems { grid-template-columns: 1fr; } }
.problem {
  background: var(--bg);
  padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.problem-num {
  font-family: 'Source Serif 4', serif;
  font-size: 48px;
  line-height: 1;
  color: var(--fg-3);
  font-style: italic;
}
.problem h4 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--fg);
}
.problem p {
  font-size: 14px;
  color: var(--fg-2);
  margin: 0;
  line-height: 1.55;
}
.problem .quote {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  color: var(--fg-3);
  font-style: italic;
}

/* steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}
@media (max-width: 880px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px;
  background: var(--bg-2);
  position: relative;
}
.step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 12px;
}
.step h4 {
  font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.step p {
  font-size: 14px; color: var(--fg-2); margin: 0; line-height: 1.5;
}
.step-illu {
  height: 80px;
  margin-bottom: 16px;
  border: 1px dashed var(--line-2);
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 8px,
      var(--line) 8px,
      var(--line) 9px
    );
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* features */
.features {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 960px) { .features { grid-template-columns: 1fr; } }
.feature-list {
  display: flex; flex-direction: column;
}
.feature {
  border-top: 1px solid var(--line);
  padding: 28px 0;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  cursor: pointer;
  transition: padding 0.2s ease;
}
.feature:last-child { border-bottom: 1px solid var(--line); }
.feature:hover { padding-left: 8px; }
.feature-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--fg-3);
  padding-top: 4px;
}
.feature h4 {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.feature p {
  font-size: 15px; color: var(--fg-2); margin: 0;
  line-height: 1.5;
}

/* dashboard mock */
.dashboard-mock {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  font-size: 11px;
  position: sticky;
  top: 88px;
}
.dash-bar {
  background: var(--bg-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--fg-3);
}
.dash-bar .traf { display: flex; gap: 4px; margin-right: 8px; }
.dash-bar .traf span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.dash-body {
  display: grid;
  grid-template-columns: 100px 1fr;
  min-height: 360px;
}
.dash-side {
  background: var(--bg-3);
  border-right: 1px solid var(--line);
  padding: 14px 8px;
  display: flex; flex-direction: column; gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}
.dash-side .item {
  padding: 6px 8px; border-radius: 3px;
  color: var(--fg-3);
}
.dash-side .item.active {
  background: var(--bg);
  color: var(--fg);
}
.dash-main { padding: 16px; }
.dash-h {
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.dash-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 16px;
}
.dash-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px;
  /* A grid item defaults to min-width:auto, so a label longer than the German
     "Umsatz" (Danish "Omsætning", Finnish "Liikevaihto") widened the whole
     three-column row past a 320px viewport. Let the card shrink and the label
     wrap instead. */
  min-width: 0;
}
.dash-card .lbl { overflow-wrap: break-word; }
.dash-card .lbl { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; }
.dash-card .val { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; }
.dash-card .delta { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--good); margin-top: 2px; }
.job-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden;
}
.job-row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 10px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 12px;
}
.job-row:last-child { border-bottom: none; }
.job-cust { font-size: 11px; font-weight: 600; }
.job-meta { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--fg-3); margin-top: 2px; }
.job-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 2px;
}
.job-status.work { background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); }
.job-status.appr { background: color-mix(in oklab, var(--good) 18%, transparent); color: var(--good); }
.job-status.done { background: var(--bg-2); color: var(--fg-3); border: 1px solid var(--line); }

/* founding */
.founding {
  background: var(--bg);
}
.founding-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 880px) { .founding-grid { grid-template-columns: 1fr; } }
.founding-card {
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: 6px;
  overflow: hidden;
}
.founding-card .header {
  background: var(--accent);
  color: var(--accent-fg);
  padding: 18px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
}
.founding-card .body {
  padding: 32px 24px;
}
.founding-card h3 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.founding-card .sub {
  color: var(--fg-2); font-size: 15px;
  margin: 0 0 24px;
}
.founding-list {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.founding-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  font-size: 14px;
  color: var(--fg);
}
.founding-list li::before {
  content: "→";
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}
/* big stats / quote-style */
.quote-block {
  padding: 0;
}
.quote-block p {
  font-family: 'Source Serif 4', serif;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.2;
  margin: 0 0 24px;
  color: var(--fg);
  font-style: italic;
  letter-spacing: -0.01em;
}
.quote-block .who {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* final cta */
.final {
  padding: 120px 0;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
    var(--bg);
}
.final h2 {
  margin: 0 auto 24px;
  max-width: 18ch;
  text-align: center;
}
.final p {
  color: var(--fg-2);
  font-size: 18px;
  max-width: 50ch;
  margin: 0 auto 40px;
}
.final .cta-row {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.final small {
  display: block;
  margin-top: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* footer */
footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 32px;
  background: var(--bg-2);
}
footer .row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 720px) { footer .row { grid-template-columns: 1fr 1fr; } }
footer h5 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 14px;
  font-weight: 500;
}
footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
footer ul a {
  color: var(--fg-2); font-size: 14px; text-decoration: none;
}
footer ul a:hover { color: var(--fg); }
footer .legal {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--fg-3);
}

/* schematic placeholder */
.placeholder-stripe {
  background:
    repeating-linear-gradient(
      135deg,
      var(--bg-3),
      var(--bg-3) 10px,
      var(--bg-2) 10px,
      var(--bg-2) 20px
    );
  border: 1px dashed var(--line-2);
  display: grid; place-items: center;
  color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 4px;
}

/* =====================================================================
   Production additions (not in the original static mockup)
   ===================================================================== */

/* Reveal-on-scroll — progressive enhancement.
   Elements are fully visible unless JS is active (html.js), so the page
   is never blank for no-JS users or crawlers. */
.reveal { transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   Devanagari typography. Two things this design does are wrong for the
   script, so they are switched off on the Hindi page only:

   - Tracking. Every heading here uses negative tracking and every label a
     positive one. Devanagari joins the letters of a word under a shirorekha
     (the horizontal headline stroke); spacing them apart breaks that stroke,
     and tightening them collides the matras. `normal` is the only correct
     value. It needs !important because roughly thirty rules set tracking at
     a higher specificity than a sane [lang] selector can reach.

   - Display line-height. The Latin headings sit at 0.98–1.03, which works
     because Latin has little above the cap line. Devanagari stacks matras
     above and below the base character, and those get clipped at that
     leading.
   --------------------------------------------------------------------- */
[lang="hi"] { letter-spacing: normal !important; }
[lang="hi"] .hero h1,
[lang="hi"] h2,
[lang="hi"] .quote-block p,
[lang="hi"] .legal-main h1 { line-height: 1.3; }
[lang="hi"] .problem-num,
[lang="hi"] .dash-card .val { line-height: 1.2; }

/* ---------------------------------------------------------------------
   Language suggestion banner. Docked to the bottom rather than the top: the
   nav bar is already sticky and crowded, and a bar that pushes the hero down
   on arrival is worse than one that sits out of the way. Built by main.js,
   so it never exists for crawlers or without JavaScript — it is an offer,
   not content.
   --------------------------------------------------------------------- */
.lang-banner {
  position: fixed; z-index: 70;
  left: 16px; right: 16px; bottom: 16px;
  margin: 0 auto;
  max-width: 640px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--bg-2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  font-size: 14px;
  /* Starts out of the way and slides in, so it cannot be mistaken for part
     of the page. Respects reduced-motion below. */
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.lang-banner.in { opacity: 1; transform: none; }
.lang-banner-text { flex: 1 1 220px; color: var(--fg-2); min-width: 0; }
.lang-banner-cta {
  flex: none;
  padding: 8px 14px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.lang-banner-cta:hover { filter: brightness(1.08); }
.lang-banner-close {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: transparent;
  color: var(--fg-2);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  padding: 0;
}
.lang-banner-close:hover { background: var(--bg); color: var(--fg); }
@media (prefers-reduced-motion: reduce) {
  .lang-banner { transition: none; opacity: 1; transform: none; }
}
/* On a phone the CTA gets its own line rather than squeezing the sentence. */
@media (max-width: 480px) {
  .lang-banner { gap: 10px; }
  .lang-banner-text { flex-basis: 100%; }
}

/* Accessible focus ring */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The two login buttons take the most room — drop them first on narrower
   viewports (login is still reachable via the hero/founding/final CTAs). */
@media (max-width: 1024px) {
  nav.top .cta-row .nav-login { display: none; }
}
/* Between the login buttons disappearing and the section nav collapsing, the
   full link list and the CTA have to share one row. German fits; the longer
   languages do not (Ukrainian overran 1024px by 29px). Tighten the spacing
   through that band rather than hiding navigation from tablet visitors. */
@media (max-width: 1100px) {
  nav.top ul { gap: 18px; font-size: 13px; }
  nav.top .cta-row { gap: 12px; }
}
/* Collapse the section nav on small screens. The language switcher stays —
   unlike the old static "DE" tag it is the only way to change language, so
   hiding it would strand every non-German visitor on a phone. */
@media (max-width: 820px) {
  nav.top ul { display: none; }
}
/* The nav CTA is sized by whatever the locale calls "Kostenlos testen", and
   several languages are far longer (Ukrainian "Спробувати безкоштовно" is
   ~90% wider). Buy the nav room on small screens instead of shortening copy
   language by language — the padding here is nav-only, so page layout below
   the bar is untouched. */
@media (max-width: 560px) {
  nav.top .wrap { padding: 0 20px; }
  nav.top .cta-row { gap: 8px; }
  nav.top .cta-row .btn-sm { padding: 9px 11px; font-size: 12px; }
  nav.top .logo { font-size: 16px; gap: 8px; }
}
/* Below ~360px the wordmark is the cheapest thing to give up: the mark still
   identifies the brand, and the nav stays intact for the longest translations
   on the narrowest phones still in use. German alone already overran here
   before the other languages existed. */
@media (max-width: 360px) {
  nav.top .logo span { display: none; }
}
/* The language dropdown is right-aligned to its own button, so on a narrow
   phone a 180px menu runs off the LEFT edge and gets clipped — 4px in German,
   17px with the three-letter CNR badge. Dropping position:relative from the
   switcher re-anchors the menu to nav.top (which is sticky, so it is a
   positioned ancestor) and lets it span the bar instead. position:fixed would
   not work here: nav.top has a backdrop-filter, which makes it the containing
   block for fixed descendants. */
@media (max-width: 420px) {
  .lang-switch { position: static; }
  .lang-menu { left: 12px; right: 12px; min-width: 0; }
}

/* Allow flex/grid children to shrink below their content width so the
   page never scrolls horizontally on narrow viewports. */
.feature-list,
.dashboard-mock,
.dash-main { min-width: 0; }

/* Stack the section header (heading + lede) on small screens.
   Raised from 720px to 900px: side by side, the heading column is only ~230px
   at 768px while the type is still ~34px, which split words mid-letter in
   every language with a long noun — English "communicatio/n", Dutch
   "Garagesoftware", Italian "comunicazione". Stacked, the heading gets the
   full width and wraps between words. */
@media (max-width: 900px) {
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 40px;
  }
  /* align-items:flex-start sizes .left to its content, so a heading with a
     long compound (Hungarian "szervizkommunikáció") made the column wider
     than the viewport. Pin it to the container and let the heading wrap. */
  .section-head .left { width: 100%; }
}

/* Give the decorative dashboard mock more breathing room on small screens */
@media (max-width: 520px) {
  .dash-body { grid-template-columns: 80px 1fr; }
  .dash-cards { gap: 6px; }
  .dash-main { padding: 12px; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   Legal pages (Impressum / Datenschutz)
   ===================================================================== */
.legal-nav {
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
}
.legal-nav .row {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.legal-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 32px 112px;
}
.legal-back {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--fg-3);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 40px;
}
.legal-back:hover { color: var(--fg); }

/* header */
.legal-head { margin-bottom: 8px; }
.legal-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-3);
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.legal-eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 1px; background: var(--accent);
}
.legal-main h1 {
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.03;
  margin: 0 0 16px;
  max-width: none;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Long German compounds / URLs must never force horizontal scroll */
.legal-main p,
.legal-main li,
.legal-card { overflow-wrap: break-word; }
.legal-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* sections */
.legal-main h2 {
  font-size: 19px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
  max-width: none;
  margin: 44px 0 14px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.legal-main h2::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px; border-radius: 1px;
  background: var(--accent);
  margin-right: 12px;
  position: relative; top: -3px;
}
.legal-main p {
  color: var(--fg-2);
  margin: 0 0 14px;
  line-height: 1.7;
  max-width: 64ch;
}
.legal-main ul {
  color: var(--fg-2);
  margin: 0 0 14px;
  padding-left: 22px;
  line-height: 1.7;
  max-width: 64ch;
}
.legal-main li { margin-bottom: 7px; }
.legal-main li::marker { color: var(--fg-3); }
.legal-main strong { color: var(--fg); font-weight: 600; }
.legal-main a { color: var(--accent); text-decoration: none; }
.legal-main a:hover { text-decoration: underline; }

/* highlighted info block (contact, address, authority) */
.legal-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 0 0 14px;
  color: var(--fg);
  line-height: 1.7;
  max-width: 64ch;
}

.legal-foot-links { display: flex; gap: 16px; flex-wrap: wrap; }
.legal-foot-links a { color: inherit; text-decoration: none; }
.legal-foot-links a:hover { color: var(--fg); }