@charset "utf-8";
/* ==========================================================================
   Visible Solutions AG — site stylesheet
   --------------------------------------------------------------------------
   Sections
     1. Tokens          verbatim from the Visible Solutions Design System
     2. Base            reset + element defaults
     3. Layout          container, sections, grids
     4. Components      button, icon, eyebrow, card, stat, tile, form, ...
     5. Page sections   header, cube hero, client wall, founders, contact, footer
     6. Responsive      the 820px single-column / mobile-nav breakpoint

   Rule: never fork a token value into a component. Change the token.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* ---- Brand core (2026 mark: one blue, three tonal facets) ----
     The six 2013 facet colours (green, lime, red, orange, old navy, old
     blue) are retired. They are not in the token set and must not come
     back — the cube is three tones of one blue. ---- */
  --vs-blue: #145AFF; --vs-navy: #01061C; --vs-ink: #01061C;
  --vs-facet-top: #6FA1FF; --vs-facet-face: #145AFF; --vs-facet-left: #0937A0;

  /* ---- Blue ramp (the single primary) ---- */
  --blue-50: #ECF4FF; --blue-100: #D8E9FF; --blue-200: #B7D5FF; --blue-300: #89B6FF;
  --blue-400: #4F8BFF; --blue-500: #145AFF; --blue-600: #0346DD; --blue-700: #0135B1;
  --blue-800: #022680; --blue-900: #031950; --blue-950: #020C2D;

  /* ---- Neutral ramp (blue-tinted greys, hue 263 — the brand's own hue) ---- */
  --neutral-0: #FFFFFF; --neutral-25: #FBFCFE; --neutral-50: #F7F9FD; --neutral-100: #EFF2F7;
  --neutral-200: #E0E5ED; --neutral-300: #CBD1DC; --neutral-400: #979FAD; --neutral-500: #727B8A;
  --neutral-600: #555E6F; --neutral-700: #394355; --neutral-800: #1F293C; --neutral-900: #0C1529;
  --neutral-950: #01061C;

  /* ---- Navy field (re-derived on the blue's hue, not the old logo navy) ---- */
  --navy-ink: #01061C; --navy-mid: #07183D; --navy-lift: #122E6A;

  /* ---- Semantic — these report state, they never decorate ---- */
  --success: #00945F; --success-strong: #00794B; --success-soft: #E2F8EC; --success-border: #A6E0C3;
  --warning: #EA951E; --warning-strong: #C67700; --warning-soft: #FFEEDC; --warning-border: #F3C89A;
  --danger:  #D92E3E; --danger-strong:  #B51D2F; --danger-soft:  #FFE8E5; --danger-border:  #FFB6B3;
  --danger-600: #B51D2F;
  --info:    #145AFF; --info-soft:    #ECF4FF; --info-border:    #B7D5FF;

  /* ---- Semantic aliases ---- */
  --text-strong: var(--neutral-900); --text-body: var(--neutral-700);
  --text-muted: var(--neutral-500);  --text-subtle: var(--neutral-400);
  --text-inverse: #FFFFFF; --text-link: var(--blue-600); --text-link-hover: var(--blue-700);
  --surface-page: #FFFFFF; --surface-sunken: var(--neutral-50); --surface-card: #FFFFFF;
  --surface-raised: #FFFFFF; --surface-inverse: var(--navy-ink);
  --surface-brand: var(--blue-500); --surface-brand-soft: var(--blue-50);
  --border-subtle: var(--neutral-100); --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300); --border-brand: var(--blue-500);
  --focus-ring: rgba(20, 90, 255, .32);

  /* ---- Gradients — there is exactly one brand gradient ---- */
  --gradient-navy: linear-gradient(160deg, #01061C 0%, #07183D 55%, #122E6A 100%);
  --gradient-blue: linear-gradient(135deg, #145AFF 0%, #0346DD 100%);

  /* The ink as a bare triple, so the hero's legibility overlays can vary the
     alpha on it. Same value as --navy-ink; change both together. */
  --navy-ink-rgb: 1, 6, 28;

  /* ---- On-navy surfaces (the only other place transparency is allowed) ---- */
  --on-navy-fill: rgba(255, 255, 255, .06);
  --on-navy-border: rgba(255, 255, 255, .10);
  --on-navy-text: rgba(255, 255, 255, .72);
  --on-navy-muted: rgba(255, 255, 255, .66);
  --on-navy-eyebrow: rgba(255, 255, 255, .62);
  --on-navy-faint: rgba(255, 255, 255, .45);

  /* ---- Typography ---- */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sans: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-icon: 'Material Symbols Rounded';

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;

  --text-display-xl: 72px; --lh-display-xl: 1.02; --ls-display-xl: -0.03em;
  --text-display-l:  56px; --lh-display-l:  1.05; --ls-display-l:  -0.028em;
  --text-display-m:  44px; --lh-display-m:  1.08; --ls-display-m:  -0.022em;
  --text-h1: 36px; --lh-h1: 1.15; --ls-h1: -0.02em;
  --text-h2: 28px; --lh-h2: 1.2;  --ls-h2: -0.016em;
  --text-h3: 22px; --lh-h3: 1.3;  --ls-h3: -0.01em;
  --text-h4: 18px; --lh-h4: 1.35; --ls-h4: -0.005em;
  --text-body-l: 18px; --lh-body-l: 1.6;
  /* Size, not the colour alias above — the design system split these because
     --text-body was doing both jobs. */
  --text-body-size: 16px; --lh-body: 1.6;
  --text-body-s: 14px; --lh-body-s: 1.55;
  --text-caption: 13px; --lh-caption: 1.45;
  --text-eyebrow: 12px; --lh-eyebrow: 1.2; --ls-eyebrow: 0.12em;
  --text-mono: 14px; --lh-mono: 1.5; --ls-mono: -0.01em;

  /* ---- Spacing & layout ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px; --space-32: 128px; --space-40: 160px;
  --container-max: 1200px; --container-narrow: 760px; --gutter: 24px;
  --section-y: 96px; --section-y-lg: 128px;
  --header-h: 76px;

  /* ---- Radius ---- */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px; --radius-circle: 50%;

  /* ---- Elevation — navy-tinted (#01061C), never neutral black ---- */
  --shadow-xs: 0 1px 2px rgba(1, 6, 28, .06);
  --shadow-sm: 0 1px 3px rgba(1, 6, 28, .08), 0 1px 2px rgba(1, 6, 28, .04);
  --shadow-md: 0 4px 12px rgba(1, 6, 28, .09);
  --shadow-lg: 0 12px 32px rgba(1, 6, 28, .11);
  --shadow-xl: 0 24px 60px rgba(1, 6, 28, .15);
  --shadow-brand: 0 12px 28px rgba(20, 90, 255, .24);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --dur-instant: 80ms; --dur-fast: 120ms; --dur-base: 200ms;
  --dur-slow: 360ms; --dur-slower: 600ms;
  --transition-control:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms;
    --dur-slow: 0ms; --dur-slower: 0ms;
  }
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  margin: 0;
  font-weight: var(--fw-bold);
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 3px; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

::selection { background: var(--blue-100); color: var(--neutral-900); }

/* Anchor targets clear the sticky header. */
[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-s);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.skip-link:focus { transform: translateY(0); text-decoration: none; }


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Marketing section rhythm. No two adjacent bands share a background. */
.section { padding-block: clamp(72px, 9vw, 128px); }
.section--wall  { padding-block: clamp(48px, 6vw, 72px); }
.section--kpi   { padding-block: clamp(56px, 7vw, 88px); }

.section--white  { background: var(--surface-page); }
.section--sunken { background: var(--surface-sunken); }
.section--navy   { background: var(--gradient-navy); }

.section--rule-top    { border-top: 1px solid var(--border-subtle); }
.section--rule-bottom { border-bottom: 1px solid var(--border-subtle); }

/* Auto-fit grid. --grid-min is the column minimum, --grid-gap the gutter.
   min(100%, …) stops a wide minimum from overflowing narrow viewports. */
.grid {
  display: grid;
  gap: var(--grid-gap, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 280px)), 1fr));
}
.grid--cards     { --grid-min: 320px; --grid-gap: 24px; }
/* 180px keeps the security tiles 2-up inside the narrower column. */
.grid--panels    { --grid-min: 180px; --grid-gap: 16px; }
.grid--stats     { --grid-min: 190px; --grid-gap: 32px; }
.grid--footer    { --grid-min: 200px; --grid-gap: 40px; }

/* Two-column marketing split: heading left, content right. */
.split {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--split-min, 300px)), 1fr));
}
/* The security split collapses early on purpose: below 460px per column the
   heading side would strand a band of empty navy. */
.split--wide { --split-min: 460px; }
.split--start { align-items: start; }

.mt-cards { margin-top: 56px; }


/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* ---- Icon — Material Symbols Rounded, by ligature name ------------------ */
.icon {
  font-family: var(--font-icon);
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  user-select: none;
  font-size: 20px;
  width: 20px;
  height: 20px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
.icon--14 { font-size: 14px; width: 14px; height: 14px; }
.icon--18 { font-size: 18px; width: 18px; height: 18px; }
.icon--20 { font-size: 20px; width: 20px; height: 20px; }
.icon--22 { font-size: 22px; width: 22px; height: 22px; }
.icon--24 { font-size: 24px; width: 24px; height: 24px; }
/* Filled only ever confirms state. */
.icon--fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ---- Eyebrow — the uppercase kicker above nearly every section ---------- */
.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--blue-500);
}
.eyebrow--inverse { color: var(--on-navy-eyebrow); }
.eyebrow--muted   { color: var(--text-subtle); }

/* ---- Button — always a full pill ---------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding-inline: 22px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition-control);
}
.btn:hover { text-decoration: none; }
.btn:active:not(:disabled) { transform: scale(0.975); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible { border-radius: var(--radius-pill); }

.btn--lg { height: 54px; padding-inline: 28px; font-size: 16px; }
.btn--lg .icon { font-size: 22px; width: 22px; height: 22px; }
.btn--block { display: flex; width: 100%; }

/* Hover darkens, never lightens. */
.btn--primary {
  background: var(--blue-500);
  border-color: var(--blue-500);
  color: #fff;
}
.btn--primary:hover:not(:disabled) { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }

.btn--secondary {
  background: var(--neutral-0);
  border-color: var(--border-default);
  color: var(--neutral-900);
}
.btn--secondary:hover:not(:disabled) { background: var(--neutral-50); border-color: var(--border-strong); color: var(--neutral-900); }

.btn--inverse {
  background: var(--neutral-0);
  border-color: var(--neutral-0);
  color: var(--neutral-900);
}
.btn--inverse:hover:not(:disabled) { background: var(--blue-50); border-color: var(--blue-50); color: var(--neutral-900); }

.btn__spinner { display: none; }
.btn.is-loading .btn__spinner { display: inline-flex; animation: vs-spin 900ms linear infinite; }
.btn.is-loading .btn__icon { display: none; }
@keyframes vs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading .btn__spinner { animation: none; }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---- Section heading ---------------------------------------------------- */
.section-heading {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}
.section-heading--420 { max-width: 420px; }

.section-heading__title {
  font-family: var(--font-display);
  font-size: var(--text-display-m);
  line-height: var(--lh-display-m);
  letter-spacing: var(--ls-display-m);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}
.section-heading__text {
  font-size: var(--text-body-l);
  line-height: var(--lh-body-l);
  color: var(--text-muted);
  margin: 0;
  text-wrap: pretty;
}
.section-heading--inverse .section-heading__title { color: #fff; }
.section-heading--inverse .section-heading__text { color: var(--on-navy-text); }

/* ---- Card --------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  height: 100%;
}
/* Interactive cards lift. No colour change, no border accent. */
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  margin-bottom: 4px;
  background: var(--blue-50);
  color: var(--blue-500);
}
.card__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin: 0;
}
.card__body {
  font-size: var(--text-body-size);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 0;
  text-wrap: pretty;
}

.card--inverse {
  background: var(--gradient-navy);
  border-color: transparent;
  box-shadow: none;
}
.card--inverse .card__icon { background: var(--on-navy-border); color: #fff; }
.card--inverse .card__title { color: #fff; }
.card--inverse .card__body { color: var(--on-navy-text); }

/* The two platform cards on the home page. */
.card--platform { padding: 40px; border-radius: var(--radius-xl); }
.card--founder  { padding: 32px; }

.card__wordmark {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--fw-black);
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 8px;
}
/* align-self stops the column flex from stretching the logo to card width. */
.card__logo { height: 30px; width: auto; align-self: flex-start; display: block; margin-bottom: 10px; }
/* The Reviu mark is far squarer than the Photo Collect lockup; matching cap
   heights rather than box heights keeps the two cards reading as a pair. */
.card__logo--reviu { height: 34px; }
.card__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Tag ---------------------------------------------------------------- */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.tag--inverse {
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: #fff;
  background: var(--on-navy-fill);
  border: 1px solid var(--on-navy-border);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}

/* ---- StatTile — rows are three tiles, never four ------------------------ */
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-display-l);
  line-height: 1;
  letter-spacing: var(--ls-display-l);
  font-weight: var(--fw-bold);
  color: var(--blue-500);
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: 15px; color: var(--text-muted); }
.stat--inverse .stat__value { color: #fff; }
.stat--inverse .stat__label { color: var(--on-navy-muted); }

/* ---- Logo — the parent lockup is a component, not an image file --------
   Live Archivo type: "Visible" at 400 in ink, "Solutions" at 800 in brand
   blue, beside the isometric mark. Everything scales off --logo-size, the
   same ratios the design system's Logo component uses. ---- */
.logo {
  --logo-size: 26px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-size) * 0.32);
}
.logo__mark {
  display: block;
  flex: none;
  height: var(--logo-size);
  width: calc(var(--logo-size) * 0.866);
}
.logo__word {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: calc(var(--logo-size) * 0.57);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-strong);
  white-space: nowrap;
}
.logo__word span {
  font-weight: var(--fw-black);
  color: var(--blue-500);
}
/* Reversed lockup for the navy footer. */
.logo--white .logo__word,
.logo--white .logo__word span { color: #fff; }
.logo--white .facet--top  { fill: rgba(255, 255, 255, .72); }
.logo--white .facet--face { fill: #fff; }
.logo--white .facet--left { fill: rgba(255, 255, 255, .40); }

/* ---- Tile — icon well stacked above the title -------------------------- */
.tile {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: var(--blue-50);
  color: var(--blue-500);
}
.tile__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin: 0 0 6px;
}
.tile__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

.tile--inverse {
  background: var(--on-navy-fill);
  border-color: var(--on-navy-border);
  box-shadow: none;
}
.tile--inverse .tile__icon { background: var(--on-navy-border); color: #fff; }
.tile--inverse .tile__title { color: #fff; }
.tile--inverse .tile__body { color: var(--on-navy-muted); }

/* ---- Form controls ------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.field--full { grid-column: 1 / -1; }
.field__label {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--neutral-700);
}
.field__control {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--neutral-900);
  background: var(--neutral-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  outline: none;
  transition: var(--transition-control);
}
input.field__control,
select.field__control { height: 46px; padding: 0 14px; }
textarea.field__control { padding: 12px 14px; resize: vertical; line-height: 1.55; }

.field__control::placeholder { color: var(--text-subtle); }
.field__control:hover:not(:focus) { border-color: var(--border-strong); }
.field__control:focus {
  border-color: var(--blue-500);
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-md);
}

.field__select { position: relative; display: flex; align-items: center; }
select.field__control { appearance: none; padding-right: 40px; cursor: pointer; }
.field__chevron {
  position: absolute;
  right: 12px;
  color: var(--neutral-400);
  pointer-events: none;
}

/* Honeypot. Off-screen rather than display:none — bots skip hidden fields. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-status {
  font-size: 14px;
  line-height: 1.5;
  min-height: 1.5em;
}
.form-status--ok { color: var(--success); }
.form-status--error { color: var(--danger); }

/* Standalone confirmation page served by send.php when JavaScript is off. */
.notice {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: var(--surface-sunken);
}
.notice__box {
  max-width: 520px;
  padding: clamp(24px, 4vw, 40px);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.notice__text {
  margin: 0 0 24px;
  font-size: var(--text-body-l);
  line-height: var(--lh-body-l);
}
.notice__text--ok { color: var(--success); }
.notice__text--error { color: var(--danger); }


/* ==========================================================================
   5. PAGE SECTIONS
   ========================================================================== */

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.site-header__logo { display: block; }
.site-header__logo:hover { text-decoration: none; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--neutral-700);
}
.nav__link:hover { color: var(--blue-600); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--blue-600); }

/* Marks a link that leaves the site. Muted so it reads as a hint, not a mark. */
.nav__ext {
  color: var(--text-subtle);
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav__link:hover .nav__ext,
.nav-drawer__link:hover .nav__ext { color: var(--blue-600); }
.site-footer__links .nav__ext { color: rgba(255, 255, 255, .45); }
.site-footer__links a:hover .nav__ext { color: var(--blue-300); }

/* Language switcher. Quiet by design — it is wayfinding, not a call to
   action, so it stays type-only and introduces no new colour. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.lang-switch__link {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.lang-switch__link:hover { color: var(--blue-600); text-decoration: none; }
.lang-switch__link[aria-current="true"] { color: var(--text-strong); }
.lang-switch__sep {
  width: 1px;
  height: 12px;
  background: var(--border-default);
}

.lang-switch--drawer { gap: 14px; }
.lang-switch--drawer .lang-switch__link { font-size: 15px; padding: 10px 4px; }
.lang-switch--drawer .lang-switch__sep { height: 16px; }

.nav-drawer__lang {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding-inline: 18px;
  background: var(--neutral-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--neutral-900);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: var(--transition-control);
}
.nav-toggle:hover { background: var(--neutral-50); border-color: var(--border-strong); }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline-flex; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }

.nav-drawer {
  display: none;
  position: absolute;
  inset-inline: 0;
  top: var(--header-h);
  padding: 20px var(--gutter) 28px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
}
.nav-drawer.is-open { display: block; }
.nav-drawer__list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.nav-drawer__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 4px;
  font-size: 17px;
  font-weight: var(--fw-medium);
  color: var(--neutral-700);
}
.nav-drawer__link:hover { color: var(--blue-600); text-decoration: none; }

/* ---- Hero — full-viewport cube constellation ----------------------------
   Spec: HERO.md. One navy band exactly one viewport tall, twelve isometric
   cubes behind the copy. Two motion layers, neither looping: a staggered
   entrance that plays once, and pointer parallax on the outer groups.

   Deviation on record: the design system describes a LIGHT hero with a soft
   radial blue wash and reserves --gradient-navy for the security band, the
   platform cards and the footer. This hero is fully navy at the client's
   explicit request. It still honours the adjacent-background rule — the
   grey-50 client wall follows it. Do not "fix" this back.
   ------------------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
}
.hero--cube {
  /* height, not min-height: a floor lets tall content push past the fold.
     dvh so the mobile URL bar cannot do the same. */
  height: calc(100dvh - var(--header-h));
  min-height: 440px;
  background: var(--gradient-navy);
  display: flex;
}

/* ---- Constellation ---- */
.cube-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Facets are classed, never given a fill attribute: SVG presentation
   attributes cannot take var(), and hard-coded hex is what turns a brand
   colour change into a manual hunt. (HERO.md asks for inline style; classes
   achieve the same and keep the CSP free of 'unsafe-inline'.) */
.facet--top  { fill: var(--vs-facet-top); }
.facet--face { fill: var(--vs-facet-face); }
.facet--left { fill: var(--vs-facet-left); }

/* Outer group carries parallax, inner group the entrance. Two levels, so the
   parallax transform never fights the animation's final keyframe. */
.cube-drift { transition: transform 420ms var(--ease-out); }

.vs-cube {
  opacity: 0;
  animation:
    vs-cube-drop var(--dur-slower) cubic-bezier(0.16, 1, 0.3, 1) forwards,
    vs-cube-fade 480ms var(--ease-out) forwards;
}
@keyframes vs-cube-drop {
  from { transform: translate3d(0, -28px, 0); }
  to   { transform: none; }
}
@keyframes vs-cube-fade {
  from { opacity: 0; }
  to   { opacity: var(--cube-o, 1); }
}
/* Two coordinated animations, twelve target opacities, via --cube-o. Opacity
   is the depth cue: it drives the fade target and the parallax rate together,
   so a cube that looks nearer also moves more. Keep them coupled. */
.vs-cube--0 { --cube-o: 0.14; animation-delay: 0ms; }
.vs-cube--1 { --cube-o: 0.16; animation-delay: 60ms; }
.vs-cube--2 { --cube-o: 0.18; animation-delay: 120ms; }
.vs-cube--3 { --cube-o: 0.22; animation-delay: 180ms; }
.vs-cube--4 { --cube-o: 0.26; animation-delay: 240ms; }
.vs-cube--5 { --cube-o: 0.28; animation-delay: 300ms; }
.vs-cube--6 { --cube-o: 0.32; animation-delay: 360ms; }
.vs-cube--7 { --cube-o: 0.36; animation-delay: 420ms; }
.vs-cube--8 { --cube-o: 0.44; animation-delay: 480ms; }
.vs-cube--9 { --cube-o: 0.5; animation-delay: 540ms; }
.vs-cube--10 { --cube-o: 0.62; animation-delay: 600ms; }
.vs-cube--11 { --cube-o: 1; animation-delay: 660ms; }

@media (prefers-reduced-motion: reduce) {
  .vs-cube { animation-duration: 1ms !important; animation-delay: 0ms !important; }
}

/* ---- Legibility overlays — both required, at every crop ---- */
.hero__fade,
.hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__fade {
  background: linear-gradient(90deg,
    rgba(var(--navy-ink-rgb), .94) 0%,
    rgba(var(--navy-ink-rgb), .66) 32%,
    rgba(var(--navy-ink-rgb), 0) 68%);
}
.hero__vignette {
  background: linear-gradient(180deg,
    rgba(var(--navy-ink-rgb), .5) 0%,
    rgba(var(--navy-ink-rgb), .08) 38%,
    rgba(var(--navy-ink-rgb), .62) 100%);
}

/* ---- Content column ---- */
.hero__inner {
  position: relative;
  flex: 1;
  min-height: 0;            /* without this a flex item refuses to shrink */
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  padding: clamp(24px, 4vh, 64px) var(--gutter) clamp(20px, 3vh, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 4vh, 64px);
}

.hero__eyebrow { margin-bottom: clamp(12px, 2vh, 22px); }

/* The min(vw, vh) inside each clamp is the load-bearing part: on a wide but
   short viewport a vw-only term keeps the H1 huge and overflows the fold. */
.hero__title {
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(32px, min(7.4vw, 10vh), 86px);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--ls-display-xl);
  font-weight: var(--fw-bold);
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.hero__lede {
  max-width: 46ch;
  margin-top: clamp(14px, 2.4vh, 26px);
  font-size: clamp(15px, min(1.9vw, 2.6vh), 20px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
  text-wrap: pretty;
}
.hero__actions { margin-top: clamp(20px, 3.5vh, 36px); }

/* ---- Client wall -------------------------------------------------------- */
.logo-wall { display: flex; flex-direction: column; gap: 24px; }
.logo-wall__caption {
  font-size: 14px;
  text-align: center;
  margin: 0;
  color: var(--text-muted);
}
.logo-wall__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px 40px;
  align-items: center;
  justify-items: center;
}
/* Understated proof: real marks, greyed back so they never outshout the page. */
.logo-wall__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  filter: grayscale(1);
  opacity: .9;
}
.logo-wall__logo {
  max-height: 30px;
  max-width: 130px;
  width: auto;
  height: auto;
  display: block;
}
/* Fallback cell for a client with no licensed logo file. */
.logo-wall__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  text-align: center;
  line-height: 1.2;
  color: var(--neutral-400);
}

/* ---- Founders ----------------------------------------------------------- */
.founder { display: flex; gap: 24px; align-items: flex-start; }
.founder__well {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-circle);
  background: var(--neutral-100);
  overflow: hidden;
  position: relative;
}
/* Deliberately wider than the well so the head crops correctly inside the
   circle. max-width:none is required — the global img cap would undo it. */
.founder__well img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 112%;
  max-width: none;
  height: auto;
  display: block;
}
.founder__name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin: 0;
}
.founder__role { margin-top: 6px; }
.founder__bio {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---- Contact ------------------------------------------------------------ */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}
.contact-detail { display: flex; gap: 14px; align-items: flex-start; }
.contact-detail .icon { color: var(--blue-500); }
.contact-detail__label { margin-bottom: 4px; }
.contact-detail__value {
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--text-strong);
  line-height: 1.5;
}
a.contact-detail__value:hover { color: var(--blue-600); }

.contact-panel {
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 40px);
}
.contact-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 18px;
}
.contact-form__submit {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: var(--gradient-navy); color: #fff; }
.site-footer__inner { padding-block: clamp(56px, 7vw, 88px) 36px; }
.site-footer__logo { display: inline-flex; margin-bottom: 20px; }
.site-footer__address {
  font-size: 14px;
  line-height: 1.7;
  color: var(--on-navy-muted);
}
/* Eyebrow tone="inverse" — .62, not the .45 used for the bottom bar. */
.site-footer__heading { margin-bottom: 16px; color: var(--on-navy-eyebrow); }
.site-footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.site-footer__links a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #fff; }
.site-footer__links a:hover { color: var(--blue-300); }
.site-footer__meta {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.9;
  color: var(--on-navy-muted);
  font-variant-numeric: tabular-nums;
}
.site-footer__bar {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--on-navy-border);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--on-navy-faint);
}


/* ==========================================================================
   6. RESPONSIVE
   The layout is fluid by default — every grid is auto-fit and type uses
   clamp(). These are the two places that genuinely need a breakpoint.
   ========================================================================== */

/* Client wall: 5 fixed columns would crush below desktop. */
@media (max-width: 900px) {
  .logo-wall__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .logo-wall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

/* The cube hero needs no width breakpoint: the constellation is centred in
   its viewBox with radial falloff and uses preserveAspectRatio="slice", so a
   wide viewport crops top and bottom and a tall one crops the sides, and the
   dense middle stays in frame either way. Height is handled by the vh terms
   in the type clamps, not by a media query. */

/* Mobile navigation drawer.
   Sized for the longest language, not the shortest: the German header
   ("Über uns", "Kontakt aufnehmen") plus the language switcher exactly fills
   a 760px container, so the drawer takes over at 820px for both locales.
   Keep this in step with the matchMedia query in site.js. */
@media (max-width: 820px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__inner { gap: 16px; }

  .card--platform { padding: 28px; }
  .founder { gap: 20px; }
  .stat__value { font-size: var(--text-display-m); }
  .section-heading__title { font-size: clamp(32px, 8vw, 44px); }
}

@media (max-width: 420px) {
  .founder { flex-direction: column; }
}

@media print {
  .site-header, .nav-drawer, .contact-panel, .skip-link { display: none; }
  body { color: #000; }
}