/* ─────────────────────────────────────────────────────────────────────────
   VIABLE shared site stylesheet — Single Source of Truth
   Canonical design tokens, typography, navigation, hero, sections, cards,
   footer, and cookie banner. Linked from every page BEFORE the page's
   inline <style> so per-page rules can still override when needed.

   Design system summary
   ─────────────────────
   · Font stack    : Space Grotesk (display)  ·  IBM Plex Sans (body)  ·  IBM Plex Mono (mono)
   · Type scale    : 12  14  16  18  20  24  32  40  px   (modular 1.125 ratio above 14)
   · Spacing scale : 4  8  12  16  20  24  32  40  48  64  96  px
   · Radius scale  : 6  8  12  16  24  999  px
   · Line heights  : 1.15 (display) · 1.35 (snug) · 1.55 (body) · 1.7 (relaxed)
   · Tracking      : -0.02 (tight) · 0 (normal) · 0.05 (wide) · 0.1 (wider) · 0.18 (widest)
   · White overlay : 92 (high) · 78 (mid) · 55 (low)
   ───────────────────────────────────────────────────────────────────────── */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── DESIGN TOKENS ── */
:root {
  /* Brand colour palette (unchanged) */
  --ink:           #003154;
  --ink-soft:      #1a4a6e;
  --ink-deep:      #001a30;
  --haze:          #f4f6fa;
  --surface:       #ffffff;
  --accent:        #5db8a0;
  --accent-solid:  #0b7a4f;
  --accent-soft:   #a8d8c8;
  --muted-fg:      #5a6b7a;
  --border:        #dfe3e9;
  --hero-from:     #2d3b5e;
  --hero-via:      #1a2440;
  --hero-to:       #141d33;

  /* Canonical white-overlay opacity steps (use on dark backgrounds) */
  --on-dark-hi:    rgba(255,255,255,0.92);
  --on-dark-md:    rgba(255,255,255,0.78);
  --on-dark-lo:    rgba(255,255,255,0.55);

  /* Shadow palette */
  --shadow-soft:     0 8px 24px -12px rgba(20, 29, 51, 0.18);
  --shadow-elevated: 0 20px 60px -20px rgba(20, 29, 51, 0.35);

  /* Type stacks */
  --font-display:  'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:     'IBM Plex Sans',  -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'IBM Plex Mono',  ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (rem-based, 16px base) */
  --fs-xs:    0.75rem;   /* 12px */
  --fs-sm:    0.875rem;  /* 14px */
  --fs-base:  1rem;      /* 16px */
  --fs-md:    1.125rem;  /* 18px */
  --fs-lg:    1.25rem;   /* 20px */
  --fs-xl:    1.5rem;    /* 24px */
  --fs-2xl:   2rem;      /* 32px */
  --fs-3xl:   2.5rem;    /* 40px */

  /* Line heights */
  --lh-tight:    1.15;
  --lh-snug:     1.35;
  --lh-normal:   1.55;
  --lh-relaxed:  1.7;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.18em;

  /* Spacing scale (4px base) */
  --sp-1:   0.25rem;   /* 4  */
  --sp-2:   0.5rem;    /* 8  */
  --sp-3:   0.75rem;   /* 12 */
  --sp-4:   1rem;      /* 16 */
  --sp-5:   1.25rem;   /* 20 */
  --sp-6:   1.5rem;    /* 24 */
  --sp-8:   2rem;      /* 32 */
  --sp-10:  2.5rem;    /* 40 */
  --sp-12:  3rem;      /* 48 */
  --sp-16:  4rem;      /* 64 */
  --sp-24:  6rem;      /* 96 */

  /* Radius scale */
  --r-sm:    6px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-xl:    16px;
  --r-2xl:   24px;
  --r-full:  999px;
}

/* ── BASE TYPOGRAPHY ── */
/* The <html> root is painted in the hero's deepest navy so that any frame the
   browser shows BEFORE the hero gradient finishes painting (page navigation,
   over-scroll, Safari swipe-back transition) is the same dark colour as the
   header — no light-haze seam under the logo. Body sits on top with the
   normal light haze for everything below the hero. */
html { background: var(--ink-deep); }
body {
  font-family: var(--font-body);
  background: var(--haze);
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

h3 { font-size: var(--fs-md); line-height: var(--lh-snug); }

.accent { color: var(--accent-solid); }

/* Global tap & a11y tuning — kills 300ms iOS click delay, subtle Apple-style highlight */
a, button, select, input, textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,49,84,0.08);
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-10);
  background: rgba(244, 246, 250, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 0.25s ease, backdrop-filter 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  border-bottom: 1px solid transparent;
}
nav.scrolled {
  background: rgba(244, 246, 250, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.nav-logo { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.nav-logo img { height: 48px; width: auto; display: block; }
.nav-logo .logo-navy  { display: none; }
.nav-logo .logo-white { display: block; }
nav.scrolled .nav-logo .logo-navy  { display: block; }
nav.scrolled .nav-logo .logo-white { display: none; }

.nav-links { display: flex; gap: var(--sp-8); list-style: none; }
.nav-links a {
  color: var(--on-dark-md);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-links a.active { color: #ffffff; font-weight: 600; }
.nav-links a:hover  { color: #ffffff; }
nav.scrolled .nav-links a         { color: var(--muted-fg); }
nav.scrolled .nav-links a.active  { color: var(--ink); }
nav.scrolled .nav-links a:hover   { color: var(--ink); }

.nav-right { display: flex; align-items: center; gap: var(--sp-3); }

.btn-demo {
  background: var(--ink); color: #ffffff;
  border: none; border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-body);
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.btn-demo:hover { background: var(--ink-soft); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
nav:not(.scrolled) .btn-demo        { background: #ffffff; color: var(--ink); }
nav:not(.scrolled) .btn-demo:hover  { background: var(--on-dark-hi); }

/* ── Primary CTA pill (Talk to an Engineer) ───────────────────────────── */
.btn-cta {
  background: var(--accent-solid); color: #ffffff;
  border: none; border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-body);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04) inset;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, filter 0.2s;
  white-space: nowrap;
}
.btn-cta:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(244,99,30,0.55); }
.btn-cta::after { content: '→'; font-weight: 500; transform: translateX(0); transition: transform 0.2s; }
.btn-cta:hover::after { transform: translateX(2px); }

/* ── Enterprise Pilot — premium link indicator ────────────────────────── */
.nav-links .nav-pilot > a {
  font-weight: 600;
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.nav-links .nav-pilot > a::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-solid);
  box-shadow: 0 0 0 3px rgba(244,99,30,0.16);
  flex-shrink: 0;
}

.lang-select {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.9);
  font-family: var(--font-body);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-wider);
  cursor: pointer; padding: var(--sp-1) var(--sp-5) var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3e%3cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-opacity='0.7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 9px;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.lang-select:hover { color: #ffffff; border-color: rgba(255,255,255,0.55); }
.lang-select option { background: var(--ink); color: #ffffff; font-family: var(--font-body); }
nav.scrolled .lang-select {
  color: var(--ink); border-color: var(--border);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3e%3cpath d='M1 1l4 4 4-4' stroke='%23003154' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}
nav.scrolled .lang-select:hover { border-color: var(--ink); }
nav.scrolled .lang-select option { background: var(--surface); color: var(--ink); }

/* ── USE CASES DROPDOWN ── */
.nav-dropdown { position: relative; }
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: var(--sp-5);
  pointer-events: auto;
  background: transparent;
}
.nav-dropdown > a {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  line-height: inherit;
}
.nav-dropdown > a::after {
  content: '';
  display: inline-block; width: 8px; height: 5px; flex-shrink: 0;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1 1l3 3 3-3' stroke='%23ffffff' stroke-opacity='0.8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: center;
}
nav.scrolled .nav-dropdown > a::after {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1 1l3 3 3-3' stroke='%23506075' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}
.dropdown-panel {
  display: none;
  position: absolute; top: calc(100% + var(--sp-3)); left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0,49,84,0.08); border-radius: var(--r-lg);
  padding: var(--sp-2); box-shadow: 0 16px 40px -12px rgba(0,49,84,0.22), 0 2px 6px rgba(0,49,84,0.06);
  min-width: 200px; z-index: 150;
  opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.dropdown-panel a {
  display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  color: var(--ink); font-size: var(--fs-sm); font-weight: 500;
  text-decoration: none; transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.dropdown-panel a:hover { background: var(--haze); color: var(--accent-solid); }
.dropdown-panel a.active { background: transparent; color: var(--ink); font-weight: 500; }
.dropdown-panel a.active:hover { background: var(--haze); color: var(--accent-solid); }
.nav-dropdown:hover .dropdown-panel,
.nav-dropdown:focus-within .dropdown-panel,
.nav-dropdown.open .dropdown-panel {
  display: block; opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ── MOBILE NAV ── */
.nav-hamburger {
  display: none;
  background: transparent; border: none; cursor: pointer;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; color: var(--ink); padding: 0;
}
.nav-hamburger span {
  width: 22px; height: 2px; background: currentColor; border-radius: var(--r-sm);
  transition: background 0.2s;
}
nav:not(.scrolled) .nav-hamburger { color: var(--on-dark-hi); }
nav.scrolled .nav-hamburger { color: var(--ink); }

.mobile-menu {
  display: none;
  /* Starts BELOW the fixed nav (64px) so the hamburger stays fully visible and
     always tappable — re-clicking it closes the menu. Previously top: 0 covered
     the nav area on mobile and trapped users with no close affordance. */
  position: fixed; top: 64px; right: 0; bottom: 0;
  width: 78vw; max-width: 320px; z-index: 199;
  background: var(--surface);
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  flex-direction: column; gap: var(--sp-5);
  box-shadow: -8px 0 24px rgba(20, 29, 51, 0.12);
  transition: transform 0.3s ease;
  transform: translateX(100%);
}
.mobile-menu.open { display: flex; transform: translateX(0); }
/* Hamburger button stays above the menu drawer even if the drawer ever overlaps */
.nav-hamburger { position: relative; z-index: 200; }
/* When the menu is open, tint the hamburger so the user clearly sees the close-affordance */
nav:has(~ .mobile-menu.open) .nav-hamburger { color: var(--accent-solid); }
.mobile-nav-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.mobile-nav-links a {
  font-size: var(--fs-md); font-weight: 600; color: var(--ink);
  text-decoration: none;
  transition: color 0.15s;
}
.mobile-nav-links a:hover, .mobile-nav-links a:focus { color: var(--accent); }
.mobile-menu .btn-cta, .mobile-menu .btn-demo {
  width: 100%; justify-content: center;
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-md);
  white-space: nowrap;
  margin-top: auto;
}

/* ── HERO (canonical, +5% scale across all pages for visual rhythm) ── */
.hero {
  position: relative; overflow: hidden;
  /* Radial gradient locked to absolute pixel size so the dark→light wedge sits
     at the SAME horizontal position on every page, regardless of hero height.
     Previously `ellipse at top` defaulted to farthest-corner sizing — on a
     287px-tall interior hero the ellipse compressed and the diagonal shifted
     leftward toward the logo. Fixing the ellipse radii pins the geometry. */
  background: radial-gradient(ellipse 1400px 900px at top, var(--hero-from) 0%, var(--hero-via) 60%, var(--hero-to) 100%);
  background-color: var(--hero-to);
  color: #ffffff;
  /* Truly fixed height — every interior page hero is identical regardless of content.
     Total reduction of 13px from baseline 287: H1→lead gap halved four times
     (12 → 6 → 3 → 1.5 → 0.75 px). Holds a 2-line lead with breathing room. */
  height: 274px;
  padding: 0 var(--sp-10);
  padding-top: 80px; /* push content below fixed nav */
  display: flex; align-items: center;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url('/assets/viable-latest.jpg');
  /* Image anchored to the hero's full width (not `cover`) so the horizontal
     slice we see is identical on every page. Height auto means the image
     overflows vertically — `background-position: center 38%` consistently
     reveals the same middle band on a 287px interior hero AND on the 100vh
     landing hero, so the silhouette pattern + diagonal align. */
  background-size: 100% auto;
  background-position: center 38%;
  background-repeat: no-repeat;
  opacity: 0.34; mix-blend-mode: screen;
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  /* Grid mask locked to absolute size so the "spotlight" ellipse on the grid
     pattern sits in the same place on every page (was percentage-of-hero,
     which collapsed vertically on short hero boxes). */
  mask-image: radial-gradient(ellipse 1100px 520px at 50% 40%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 1100px 520px at 50% 40%, black 0%, transparent 80%);
  opacity: 0.5;
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto; width: 100%;
}
.hero-tag {
  display: block; font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--accent); font-weight: 600;
  /* Fixed vertical slot so the tag never collapses on pages with shorter content */
  min-height: 1em; line-height: 1;
  margin-bottom: var(--sp-3);
}

/* Heading and lead use IDENTICAL geometry on every page —
   short titles get a 2-line slot (no upward jump), long titles get clamped
   to 2 lines (no downward shift). Same for the lead at 2 lines.
   Net effect: H1 baseline + lead bottom edge sit in the same vertical
   position on /why-viable, /technologie, /about, /contact, /insights, etc. */
.hero h1 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700; line-height: var(--lh-tight);
  /* Title→lead gap halved four times: 12 → 6 → 3 → 1.5 → 0.75 px. At this
     point the H1's natural line-box descender provides the entire visual
     separation; the explicit margin is purely a hairline. */
  color: #ffffff; margin-bottom: 0.5rem; max-width: 820px;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* One-line reserve — a single-line title sits right above its lead instead
     of leaving an empty second line of slack (tighter title→subtext gap). */
  min-height: calc(var(--lh-tight) * 1em);
}
.hero h1 .accent { color: var(--accent); }
.hero p.lead, .hero .lead {
  font-size: var(--fs-base); line-height: var(--lh-normal);
  color: var(--on-dark-md); max-width: 640px;
  /* No line-clamp — full lead text always renders, including the longer
     descriptions ("…eIDAS 2.0 ready, GDPR-compliant, API-first.").
     `min-height` keeps short leads pinned to the same 2-line vertical slot
     so the H1 baseline doesn't jump between pages. Long leads simply flow
     past the slot — the hero `overflow: hidden` clips at the bottom edge. */
  min-height: calc(var(--lh-normal) * 2em);
}

/* ── BODY SECTIONS ── */
section.body {
  padding: var(--sp-12) var(--sp-10);
  max-width: 1200px;
  margin: 0 auto;
}
section.alt {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
section.alt > .inner {
  max-width: 1200px; margin: 0 auto;
  padding: var(--sp-12) var(--sp-10);
}

.section-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
section.alt .section-tag,
.hero       .section-tag { color: var(--accent); }

h2.section-h, .section-h {
  font-size: clamp(2.2rem, 3.8vw, 3.1rem);
  line-height: var(--lh-tight);
  font-weight: 700;
  margin-bottom: var(--sp-3);
  max-width: 860px; text-wrap: balance;
}
h2.section-h .accent { color: var(--accent); }
h2.section-h .ink   { color: var(--ink-soft); }

p.lead-fade, .lead-fade {
  font-size: var(--fs-md); line-height: var(--lh-normal);
  color: var(--muted-fg);
  max-width: 680px;
  margin-bottom: var(--sp-8);
}

/* ── CARD GRID ── */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.25s;
  will-change: transform;
}
section.alt .card { background: var(--haze); }
.card:hover { border-color: var(--ink-soft); transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.card-icon {
  width: 38px; height: 38px; border-radius: var(--r-md);
  /* derived from --accent-solid (#0b7a4f) at 10% alpha — was a wild #0ea472 ghost */
  background: rgba(11, 122, 79, 0.1);
  color: var(--accent-solid);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-3);
}
.card-icon svg { width: 20px; height: 20px; }
.card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); font-weight: 600; }
.card p  { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--muted-fg); }

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--border);
  padding: var(--sp-6) var(--sp-10);
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-sm); color: var(--muted-fg);
  background: var(--surface);
  flex-wrap: wrap; gap: var(--sp-3);
}
footer a { color: var(--ink); text-decoration: none; font-weight: 500; }
footer a:hover { text-decoration: underline; }

/* ── COOKIE BANNER ── */
#cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--ink-deep); color: var(--on-dark-hi);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-3) var(--sp-8);
  font-size: var(--fs-sm); line-height: var(--lh-normal); font-family: var(--font-body);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.28); transition: transform 0.3s ease;
}
#cookie-banner.dismissed { transform: translateY(110%); }
#cookie-banner p { max-width: 680px; margin: 0; }
.cookie-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
#cookie-more {
  color: var(--accent-soft); text-decoration: none;
  font-size: var(--fs-sm); white-space: nowrap;
}
#cookie-more:hover { text-decoration: underline; }
#cookie-ok {
  background: var(--accent-soft); color: var(--ink); border: none; border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer; font-family: var(--font-body);
  transition: background 0.15s; white-space: nowrap;
}
#cookie-ok:hover { background: #c2e6d6; }

/* ── RESPONSIVE ── */
@media (max-width: 800px) {
  nav { padding: var(--sp-3) var(--sp-5); }
  .nav-logo img { height: 38px; }
  .nav-links { display: none; }
  .nav-right .btn-demo, .nav-right .btn-cta { display: none; }
  .mobile-menu .btn-demo, .mobile-menu .btn-cta { display: inline-flex; }
  .nav-hamburger { display: flex; }
  footer { flex-direction: column; gap: var(--sp-2); text-align: center; padding: var(--sp-6) var(--sp-5); }
}
@media (max-width: 768px) {
  .hero {
    /* Mobile: auto height so longer reframed titles are never clipped by a
       fixed box (was height:234px + overflow:hidden, which cut off multi-line
       headlines like "Mandatory compliance by 2027. Frictionless check-in today."). */
    height: auto;
    min-height: 234px;
    padding: 70px var(--sp-5) 1.75rem;
  }
  /* Fill the hero with the scene (centered) instead of a floating 100%-width
     band that looked misaligned on narrow viewports. */
  .hero::before { background-size: cover; background-position: center; }
  .hero h1 { font-size: clamp(1.25rem, 5.5vw, 1.65rem); margin-bottom: 0.5rem; }
  .hero p.lead, .hero .lead { font-size: var(--fs-sm); line-height: var(--lh-snug); }
  .hero-tag { font-size: var(--fs-xs); margin-bottom: var(--sp-2); }
  section.body,
  section.alt > .inner { padding: var(--sp-10) var(--sp-5); }
  .grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
  .card { padding: var(--sp-4); border-radius: var(--r-lg); }
  .card h3 { font-size: var(--fs-md); }
  .card p { font-size: var(--fs-sm); }
  h2.section-h, .section-h { font-size: clamp(1.65rem, 5.5vw, 2.1rem); }
  p.lead-fade, .lead-fade { font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  #cookie-banner { padding: var(--sp-3) var(--sp-5); gap: var(--sp-3); }
  .cookie-actions { width: 100%; justify-content: flex-end; }
}

/* ── A11y focus ring (keyboard navigation) ───────────────────────────── */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
.tab-btn:focus-visible,
.cs-opt:focus-visible,
.ctl-btn:focus-visible,
.dropdown-panel a:focus-visible,
.nav-hamburger:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
  border-radius: 6px;
}
