/* ═══════════════════════════════════════════════════════════════════
   nevident.eu — company presentation.

   Hand-rolled, no framework: the site is five sections and a header, and
   a CSS bundle would be ten times the weight of the page it dresses.

   ⚠ SELF-CONTAINED BY NECESSITY. The vhost sends
   Content-Security-Policy: default-src 'self', so there is no web font,
   no CDN and no analytics — everything here is on our own disk. That is
   also why the type is a system stack: it renders in the first frame.

   DARK ONLY, on Daniel's word (2026-08-07: "Not too bright, I like darker
   style pages"). There is no light theme to fall out of sync.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Deep, slightly blue-black — not flat #000, which kills the aurora. */
  --bg:            #070B14;
  --bg-raised:     #0B1120;
  --bg-card:       #0E1526;
  --line:          rgba(148, 178, 214, .12);
  --line-strong:   rgba(148, 178, 214, .22);

  --text:          #E6EDF7;
  --text-soft:     #A7B4C8;
  --text-dim:      #6B7A92;

  /* One accent, used sparingly. Mint reads clinical without reading cold. */
  --accent:        #5EEAD4;
  --accent-deep:   #2DD4BF;
  --accent-glow:   rgba(94, 234, 212, .18);
  --violet:        #8B7BF7;

  --radius:        16px;
  --radius-sm:     10px;
  --ease:          cubic-bezier(.16, 1, .3, 1);
  --wrap:          1140px;

  /* ⚠ SELF-HOSTED SINCE 2026-08-07, and that is a CSP decision as much as a
     design one: the vhost sends default-src 'self', so a Google Fonts link
     would have meant widening the policy for typography. These come off our
     own disk — see assets/fonts/ and the @font-face block below.

     Before this the stack fell through to the SYSTEM font, so the site read
     as Segoe UI on Windows, SF Pro on a Mac and Roboto on Android. It now
     looks the same everywhere.

     TO CHANGE THE TYPE, change these two lines. --font is body text,
     --font-display is headlines and the brand. */
  /* ⚠ SWAPPED 2026-08-07 (Daniel): the SANS carries the big text and the
     SERIF the small. The usual pairing is the other way round; this one
     reads as engineering with an editorial voice underneath, which is
     closer to what this company actually is. */
  --font:         "Saira", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Saira", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ⚠ The @font-face rules live in fonts.css, linked BEFORE this file in the
   markup rather than @import-ed here. @import is only legal at the top of a
   stylesheet — after a rule block it is silently dropped — and it serialises
   the download besides. Two <link>s fetch in parallel. */

/* ═══ TYPOGRAPHY PREVIEW ═══════════════════════════════════════════
   Five candidates, switchable live so the choice is made by looking
   rather than by imagining. Add ?preview to the address to get the
   switcher; ?type=<name> picks one directly.

   ⚠ TEMPORARY. When one is chosen, its two lines move up into :root,
   the losing @font-face rules and their files are deleted, and this
   block and the switcher in site.js go with them. Every candidate is a
   VARIABLE font, so each is a single file of 6-12 KB.
   ═══════════════════════════════════════════════════════════════ */
/* ⚠ ROUND TWO: SQUARE AND WIDE (Daniel, 2026-08-07: "I like square fonts...
   I don't like narrow fonts that are much higher than wide"). Every family
   here is a grotesque or geometric with generous width and a heavy top end;
   nothing condensed, nothing with a tall narrow lowercase. */
html[data-type="rubik"]   { --font: "Rubik", sans-serif;             --font-display: "Rubik", sans-serif; }
html[data-type="chivo"]   { --font: "Chivo", sans-serif;             --font-display: "Chivo", sans-serif; }
html[data-type="archivo"] { --font: "Archivo", sans-serif;           --font-display: "Archivo", sans-serif; }
html[data-type="mont"]    { --font: "Montserrat", sans-serif;        --font-display: "Montserrat", sans-serif; }
html[data-type="grotesk"] { --font: "Space Grotesk", sans-serif;     --font-display: "Space Grotesk", sans-serif; }

/* ⚠ THESE TWO HAVE A WIDTH AXIS, which is the only honest way to get
   "wider" - stretching a fixed font distorts the strokes. Set wide for
   body and wider still for the hero. */
html[data-type="anybody"] { --font: "Anybody", sans-serif;           --font-display: "Anybody", sans-serif; }
html[data-type="anybody"] body { font-variation-settings: 'wdth' 118; }
html[data-type="anybody"] .display { font-variation-settings: 'wdth' 125; }

html[data-type="saira"]   { --font: "Saira", sans-serif;             --font-display: "Saira", sans-serif; }  /* the chosen one - already the default */

html[data-type="noto"]    { --font: "Noto Sans", sans-serif;         --font-display: "Noto Sans", sans-serif; }

/* The serif accent line only makes sense in the mixed pairing it was
   drawn for; under a sans-only candidate it follows the display face. */
html[data-type] .display .accent { font-family: var(--font-display); letter-spacing: inherit; }

.type-switch {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  display: none; flex-direction: column; gap: .3rem;
  padding: .6rem; border-radius: 12px;
  background: rgba(11, 17, 32, .94); border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px); box-shadow: 0 18px 40px rgba(0,0,0,.5);
  font-family: system-ui, sans-serif;
}
.type-switch.is-on { display: flex; }
.type-switch b { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .2rem; font-weight: 600; }
.type-switch button {
  appearance: none; border: 1px solid transparent; background: transparent;
  color: var(--text-soft); font: inherit; font-size: .82rem; text-align: left;
  padding: .32rem .6rem; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.type-switch button:hover { color: var(--text); background: rgba(255,255,255,.05); }
.type-switch button.is-on { background: var(--accent); color: #04121b; font-weight: 600; }


/* ═══ BOOTSTRAP, WEARING OUR PALETTE ═══════════════════════════════
   Bootstrap ships first and this file second, so everything below wins.
   The point of overriding VARIABLES rather than rules is that a Bootstrap
   upgrade keeps working: its components go on reading --bs-* and simply
   come out in our colours.

   ⚠ Both scopes are set. :root covers the page; [data-bs-theme="dark"]
   covers the components that re-declare these inside their own theme
   block (cards, accordion, navbar), which would otherwise fall back to
   Bootstrap's stock greys.
   ═══════════════════════════════════════════════════════════════════ */
:root,
[data-bs-theme="dark"] {
  --bs-primary:            #5EEAD4;
  --bs-primary-rgb:        94, 234, 212;
  --bs-body-bg:            #070B14;
  --bs-body-bg-rgb:        7, 11, 20;
  --bs-body-color:         #E6EDF7;
  --bs-body-color-rgb:     230, 237, 247;
  --bs-secondary-color:    rgba(230, 237, 247, .72);
  --bs-tertiary-color:     rgba(230, 237, 247, .5);
  --bs-emphasis-color:     #FFFFFF;
  --bs-border-color:       rgba(148, 178, 214, .16);
  --bs-border-radius:      12px;
  --bs-border-radius-lg:   16px;
  --bs-link-color:         #5EEAD4;
  --bs-link-hover-color:   #9BF3E4;
  --bs-link-color-rgb:     94, 234, 212;

  --bs-card-bg:            #0E1526;
  --bs-card-border-color:  rgba(148, 178, 214, .16);
  --bs-card-cap-bg:        transparent;

  --bs-accordion-bg:            transparent;
  --bs-accordion-color:         #E6EDF7;
  --bs-accordion-border-color:  rgba(148, 178, 214, .16);
  --bs-accordion-btn-color:     #E6EDF7;
  --bs-accordion-active-bg:     rgba(94, 234, 212, .07);
  --bs-accordion-active-color:  #5EEAD4;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(94, 234, 212, .2);

  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-font-sans-serif:    var(--font);
}

/* A mint primary is LIGHT, so its text must be dark - Bootstrap assumes
   white and would give us unreadable buttons. */
.btn-primary {
  --bs-btn-color: #04121b;
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: #04121b;
  --bs-btn-hover-bg: #7DEFDC;
  --bs-btn-hover-border-color: #7DEFDC;
  --bs-btn-active-bg: #4BD8C2;
  --bs-btn-active-color: #04121b;
  --bs-btn-focus-shadow-rgb: 94, 234, 212;
  font-weight: 700;
}

.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: rgba(94, 234, 212, .55);
  --bs-btn-hover-color: #04121b;
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-color: #04121b;
  --bs-btn-focus-shadow-rgb: 94, 234, 212;
  font-weight: 700;
}

.btn-outline-light {
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--accent);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: rgba(94, 234, 212, .1);
  --bs-btn-active-color: var(--accent);
  font-weight: 700;
}

/* The language pair: an ordinary Bootstrap btn-group, left to look like
   one. Only the colours are ours - the active button takes the mint, which
   is what tells you which language you are reading. */
.lang .btn {
  --bs-btn-color: var(--text-dim);
  --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: rgba(255, 255, 255, .06);
  --bs-btn-hover-border-color: var(--line-strong);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-color: #04121b;
  --bs-btn-active-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: 94, 234, 212;
  font-size: .8rem;
  font-weight: 500;
}

/* The sign-in button sits in the navbar, so it follows the same rule as
   the links beside it: smaller, and not bold. */
.navbar .btn-outline-primary { font-size: .85rem; font-weight: 500; }

/* ⚠ NO border-radius OVERRIDE. Bootstrap's own radius is the house style
   now (Daniel, 2026-08-07) - a pill button was the hand-rolled look, and
   mixing the two reads as two design systems in one header. */
.btn-lg { --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: .7rem; --bs-btn-font-size: 1.02rem; }

/* ---- navbar ---------------------------------------------------- */
.navbar-toggler { color: var(--text); box-shadow: none !important; font-size: 1.2rem; }

/* ⚠ NOTHING IN THE NAVBAR IS BOLD EXCEPT THE BRAND (Daniel, 2026-08-07).
   The brand is the one thing that should carry weight up there; a row of
   bold links competes with it and makes the header shout. Smaller, too -
   navigation is not reading matter. */
.site-nav .nav-link {
  color: var(--text-soft); position: relative; font-family: var(--font-display);
  font-size: .92rem; font-weight: 400; transition: color .25s var(--ease);
}
.site-nav .nav-link:hover, .site-nav .nav-link.is-current { color: var(--text); }
.site-nav .nav-link::after {
  content: ""; position: absolute; left: .5rem; right: 100%; bottom: .2rem; height: 2px;
  background: var(--accent); transition: right .35s var(--ease);
}
.site-nav .nav-link:hover::after, .site-nav .nav-link.is-current::after { right: .5rem; }

/* ⚠ THE NAV NEVER WRAPS TO A SECOND ROW (Daniel, 2026-08-07). Between the
   lg breakpoint and a comfortable width the six items plus the sign-in
   button and the language pair are tight, and the browser's instinct is to
   push a link onto a new line - which doubles the header height and shoves
   the hero down. Instead the row refuses to wrap and the labels ellipsize.
   min-width:0 on every flex ancestor is the part people miss: without it a
   flex item will not shrink below its content and text-overflow never
   fires. Same fix as the app's own navbar. */
@media (min-width: 992px) {
  .navbar > .container-fluid { flex-wrap: nowrap; min-width: 0; }
  .navbar-collapse { min-width: 0; }
  .site-nav { flex-wrap: nowrap; min-width: 0; }
  .site-nav .nav-item { min-width: 0; }
  .site-nav .nav-link {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
    /* Room to breathe sideways, almost none above and below. */
    padding-inline: .6rem; padding-block: .3rem;
  }
  .navbar .btn-outline-primary, .lang { flex: none; }
}

@media (max-width: 991.98px) {
  .navbar-collapse { background: rgba(7,11,20,.98); margin: .5rem -1rem -.5rem; padding: .5rem 1.5rem 1.2rem; border-top: 1px solid var(--line); }
  .site-nav .nav-link::after { display: none; }
}

/* ---- cards ------------------------------------------------------
   ⚠ SET ON .card, NOT ON :root, AND THAT IS NOT A STYLE CHOICE.
   Bootstrap declares --bs-card-bg INSIDE its own .card rule
   (`--bs-card-bg: var(--bs-body-bg)`), and a declaration on the element
   shadows an inherited one however specific the :root rule is. Overriding
   it at :root therefore does nothing at all: the cards come out the same
   colour as the page and look like they have vanished - which is exactly
   what happened first time round. The same applies to the accordion
   below, and to every other Bootstrap component that re-declares its
   variables locally. */
.card {
  --bs-card-bg: #0E1526;
  --bs-card-border-color: rgba(148, 178, 214, .16);
  --bs-card-color: var(--text);
  position: relative;
  /* The sheen below is a full-bleed pseudo-element; without this it would
     square off the rounded corners it sits inside. */
  overflow: hidden;
  /* A quiet lift off the flat fill, so a card reads as a surface rather
     than a rectangle of slightly different colour. */
  background-image: linear-gradient(160deg, rgba(148, 178, 214, .05), rgba(148, 178, 214, 0) 55%);
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}

/* ⚠ THE POINTER-FOLLOW SHEEN. --mx/--my are written by site.js on
   pointermove; the gradient is centred on them, so the accent glow tracks
   the cursor across the card. Restored 2026-08-07 after the Bootstrap
   rebuild dropped it - the JS half had survived, so only this was missing.
   Behind a hover query: on a touch screen there is no pointer to follow
   and the glow would simply sit wherever the last tap landed. */
@media (hover: hover) {
  .card::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
                                var(--accent-glow), transparent 65%);
    transition: opacity .4s var(--ease);
  }
  .card:hover::before { opacity: 1; }
}

/* The card body has to sit above the sheen, or the text is washed out. */
.card > .card-body { position: relative; z-index: 1; }
.card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 22px 50px rgba(0,0,0,.4); }
.card-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
.card-text { color: var(--text-soft); }
.card-quiet { background: linear-gradient(160deg, rgba(94,234,212,.08), rgba(139,123,247,.05)); }
.card-link { color: var(--accent); text-decoration: none; font-weight: 700; }
.card-link::after { content: " \2192"; transition: margin .25s var(--ease); }
.card-link:hover::after { margin-left: .25rem; }

/* The icon that replaced the old 01/02 numerals. */
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 11px; margin-bottom: .9rem;
  background: rgba(94, 234, 212, .1); color: var(--accent); font-size: 1.05rem;
}

/* ---- accordion --------------------------------------------------
   Declared on .accordion for the same reason as .card above. */
.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--text);
  --bs-accordion-border-color: var(--line);
  --bs-accordion-btn-color: var(--text);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-bg: rgba(94, 234, 212, .07);
  --bs-accordion-active-color: var(--accent);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(94, 234, 212, .2);
}
.accordion-item { background: transparent; }
.accordion-button { font-family: var(--font-display); font-weight: 700; font-size: 1.07rem; background: transparent; }
.accordion-button:not(.collapsed) { box-shadow: none; }
.accordion-button::after { filter: hue-rotate(120deg) saturate(3) brightness(1.6); }
.accordion-body { color: var(--text-soft); font-size: 1.03rem; }
.accordion-body li + li { margin-top: .45rem; }
.accordion-body strong { color: var(--text); }

/* ---- the MDR alert ---------------------------------------------- */
.mdr {
  background: rgba(94, 234, 212, .07); border: 1px solid var(--line-strong);
  color: var(--text-soft); font-size: 1rem; line-height: 1.6; margin: 1.6rem 0 0;
}
.mdr strong { color: var(--text); }

/* The lettered badge, restored 2026-08-07 - it names the regulation, which
   an icon cannot. A certificate glyph said "official"; this says MDR. */
.mdr-badge {
  flex: none; align-self: flex-start; margin-top: .12rem;
  padding: .14rem .5rem; border-radius: .35rem;
  background: var(--accent); color: #04121b;
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 700; letter-spacing: .06em;
}

/* ---- partner cards ---------------------------------------------- */
.partner address { font-style: normal; color: var(--text-dim); font-size: .97rem; line-height: 1.9; }
.partner address i { color: var(--accent); width: 1.1em; }
.partner address a { color: var(--accent); text-decoration: none; }
.partner address a:hover { text-decoration: underline; }

/* ---- the panel -------------------------------------------------- */
.panel { background: linear-gradient(120deg, rgba(94,234,212,.10), rgba(139,123,247,.08)); border-color: var(--line-strong); }
.panel p { color: var(--text-soft); max-width: 52ch; }

/* ---- the AlignerManager mark ------------------------------------ */
.am-mark { width: 44px; height: auto; flex: none; }
.am-mark-sm { width: 26px; }
.am-mark-xs { width: 18px; vertical-align: -3px; }

/* ---- scroll progress (renamed: .progress is Bootstrap's) --------- */
.progress-top { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 1060; background: transparent; }
.progress-top span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--violet)); box-shadow: 0 0 14px var(--accent-glow); }

/* ---- footer links ----------------------------------------------- */
.foot-links li + li { margin-top: .5rem; }
.foot-links a { color: var(--text-soft); text-decoration: none; font-size: .98rem; transition: color .25s; }
.foot-links a:hover { color: var(--accent); }
.foot-links i { color: var(--accent); width: 1.1em; }

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

/**
 * ⚠ LABELS AND CONTROLS ARE SANS; RUNNING PROSE IS SERIF (Daniel,
 * 2026-08-07: "for eyebrow, kicker etc. use sans fonts").
 *
 * The body face is the serif, so anything that is NOT a sentence has to be
 * named here: eyebrows, kickers, buttons, navigation, the small-caps
 * labels, figures and legal identifiers. A serif set in letterspaced
 * uppercase at 12px is unreadable, which is the practical reason as much
 * as the aesthetic one.
 */
.eyebrow, .kicker, .card-num, .mdr-badge,
.btn, .btn-signin, .site-nav a, .lang button,
.hero-facts, .map-key, .foot-links, .foot-legal, .foot-brand,
.doc-size, .faq summary, .steps h4, .feat h4, .pr h4,
.partner h3, .card h3, .panel h3, .brand-name {
  font-family: var(--font-display);
}

html { -webkit-text-size-adjust: 100%; }

/* ⚠ NO CSS SMOOTH SCROLLING (Daniel, 2026-08-07 - and the same call he made
   for the app's manual pages). Bootstrap's reboot turns it on globally:
   `@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior:
   smooth } }`, which makes every anchor jump glide slowly down the page.

   ⚠ IT MUST BE :root, NOT html. Bootstrap's rule uses :root - a pseudo-class,
   specificity (0,1,0) - which beats a bare `html` element selector (0,0,1)
   however much later it appears. Matching the selector is what makes this
   win; the first attempt used `html` and did nothing.

   The full-view paging is unaffected: it passes behavior:'smooth' to
   scrollTo() explicitly, and a JS option is not governed by this. */
:root, html { scroll-behavior: auto; }

/* Touch devices get CSS snapping rather than the wheel script - PROXIMITY,
   not mandatory, so a long section can still be read at its own pace. */
@media (hover: none) {
  html { scroll-snap-type: y proximity; }
  .hero, .section { scroll-snap-align: start; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  /* A serif needs a touch more leading and a touch less size than the sans
     it replaced, or body copy sets too dense. */
  font-size: 17.5px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: inherit; }


/* Keyboard users first. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #04121b; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ── scroll progress ─────────────────────────────────────────────── */

/* ── header ──────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  /* Tighter vertically than horizontally (Daniel, 2026-08-07) - the bar
     should read as a thin horizontal rule of links, not a band. */
  padding: .6rem clamp(1.25rem, 4vw, 2.5rem);
  transition: padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Condenses once you leave the hero — set by site.js. */
.site-head.is-stuck {
  padding-block: .6rem;
  background: rgba(7, 11, 20, .82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-weight: 700; letter-spacing: -.02em; }
/* Bigger than the nav around it (Daniel, 2026-08-07) - it is the mark, not
   another menu item. Shrinks a little once the header condenses. */
/* ⚠ em, NOT rem (Daniel, 2026-08-07: "use 1.9em"). It multiplies
   Bootstrap's own .navbar-brand size, so the mark stays in proportion if
   that ever changes - which is the point of em here. Lowercase because the
   brand is set as a wordmark, not a sentence. */
.brand-name {
  font-family: var(--font-display);
  font-size: 1.6em;
  text-transform: lowercase;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  transition: font-size .4s var(--ease);
}
.site-head.is-stuck .brand-name { font-size: 1.4em; }
/* ⚠ The entry animation lives on the CONTAINER, never on the eye.
   An eye carrying both an entry animation and a hover animation replays
   the entry one on mouse-OUT, because unhovering restores the original
   `animation` list - a visible twitch every time the pointer leaves the
   brand. One animation per element, and they cannot fight. */
.brand-mark { display: block; width: 30px; color: var(--accent); animation: mark-in .55s var(--ease) both; }
.brand-mark svg { display: block; }
.brand-mark .eye-r { transform-box: fill-box; transform-origin: center; }
/* The right eye is a closed dash at rest, so the mark arrives already
   winking; hover simply blinks it again. */
.navbar-brand:hover .brand-mark .eye-r,
.navbar-brand:focus-visible .brand-mark .eye-r { animation: wink 1s var(--ease); }
@keyframes mark-in { from { opacity: 0; transform: translateY(4px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes wink { 0%, 100% { transform: scaleY(1); } 34%, 54% { transform: scaleY(.14); } }
@media (prefers-reduced-motion: reduce) {
  .brand-mark { animation: none; }
  .navbar-brand:hover .brand-mark .eye-r,
  .navbar-brand:focus-visible .brand-mark .eye-r { animation: none; }
}


.head-tools { display: flex; align-items: center; gap: .6rem; }



.burger[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* ── hero ────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(3.5rem, 9vh, 5.5rem) 0 clamp(3.5rem, 9vh, 5.5rem);
}
.hero-inner { position: relative; z-index: 2; }

/* The aurora: three slow blobs behind a faint grid. Pure CSS, so it costs
   no JavaScript and stops dead under prefers-reduced-motion. */
.aurora { position: absolute; inset: -20% -10% 0; z-index: 0; filter: blur(70px); opacity: .55; }
.blob { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; }
.b1 { width: 52vw; height: 52vw; left: -8vw;  top: -6vw;  background: radial-gradient(circle, rgba(45,212,191,.55), transparent 68%); animation: drift1 22s ease-in-out infinite; }
.b2 { width: 44vw; height: 44vw; right: -6vw; top: 4vw;   background: radial-gradient(circle, rgba(139,123,247,.45), transparent 68%); animation: drift2 27s ease-in-out infinite; }
.b3 { width: 38vw; height: 38vw; left: 32vw;  top: 22vw;  background: radial-gradient(circle, rgba(56,189,248,.35), transparent 70%); animation: drift3 31s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: none; } 50% { transform: translate(6vw, 4vw) scale(1.12); } }
@keyframes drift2 { 0%,100% { transform: none; } 50% { transform: translate(-5vw, 6vw) scale(1.08); } }
@keyframes drift3 { 0%,100% { transform: none; } 50% { transform: translate(3vw, -5vw) scale(1.15); } }

.grid-lines {
  position: absolute; inset: 0; filter: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%);
  opacity: .5;
}

.eyebrow {
  font-size: .87rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1.4rem; font-weight: 700;
}

/* ⚠ SUPER BOLD (Daniel, 2026-08-07: "The hero should be super bold, heavy").
   900 where the family has it - every candidate below is variable and runs
   to 900 - with tracking closed right up, which is what makes a heavy
   setting read as one solid block rather than a row of letters. */
.display {
  margin: 0; font-family: var(--font-display); font-weight: 900; letter-spacing: -.038em;
  font-size: clamp(2.5rem, 7vw, 4.9rem); line-height: 1.0;
}
.display .line { display: block; }

/* ⚠ THE ACCENT LINE IS THE SERIF (Daniel, 2026-08-07: "for line accent
   element use the font you selected as first"). The headline therefore
   carries both faces - the statement in sans, the answer in serif - which
   is the whole point of pairing two families rather than one. Serifs need
   air, so it keeps its own tracking rather than the sans line's. */
.display .accent {
  font-family: var(--font);
  letter-spacing: -.01em;
  background: linear-gradient(100deg, var(--accent) 10%, var(--violet) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.lede { max-width: 56ch; color: var(--text-soft); font-size: 1.16rem; margin: 1.3rem 0 1.5rem; }

/* The brand relationship, stated once and quietly. */
.brand-note {
  margin: -.5rem 0 1.5rem; padding-left: .9rem;
  border-left: 2px solid var(--accent);
  color: var(--text-soft); font-size: 1.04rem; max-width: 52ch;
}
.brand-note strong { color: var(--text); }

.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; }


.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 2.2rem; margin: 2.2rem 0 0; padding: 0; }
.hero-facts li { display: flex; flex-direction: column; }
.hero-facts strong { font-size: 1.1rem; }
.hero-facts span { color: var(--text-dim); font-size: .98rem; }

.scroll-hint { position: absolute; left: 50%; bottom: 2rem; translate: -50% 0; width: 22px; height: 34px; border: 1.5px solid var(--line-strong); border-radius: 12px; z-index: 2; }
.scroll-hint span { position: absolute; left: 50%; top: 7px; translate: -50% 0; width: 3px; height: 6px; border-radius: 2px; background: var(--accent); animation: wheel 1.9s ease-in-out infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* ── sections ────────────────────────────────────────────────────── */
/* ⚠ FULL-VIEW SECTIONS. Daniel, 2026-08-07: "not to scroll rows, but entire
   view." Each section is at least one screen tall and centres its own
   content, so paging between them lands on a composed view rather than
   halfway down a paragraph. site.js does the paging; this is what makes the
   result look deliberate.

   min-height, never height: a section with more in it than fits is allowed
   to grow, and the paging script lets you scroll through it normally before
   moving on. Trapping content off-screen would be the classic failure of
   this pattern. */
.section {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  /* Tuned so the tallest section still fits a 768px laptop - the height at
     which paging either feels composed or feels like it is fighting you. */
  padding: clamp(3.5rem, 7vh, 5rem) 0 clamp(2.5rem, 5vh, 3.5rem);
  position: relative;
}
.section-alt { background: var(--bg-raised); border-block: 1px solid var(--line); }

.kicker { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 .9rem; }
.h2 { margin: 0 0 .9rem; font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); letter-spacing: -.028em; line-height: 1.14; font-weight: 800; }
.section-lede { max-width: 62ch; color: var(--text-soft); font-size: 1.12rem; margin: 0 0 2.1rem; }

/* ── cards ───────────────────────────────────────────────────────── */
.card-link { display: inline-block; margin-top: 1rem; color: var(--accent); text-decoration: none; font-weight: 600; font-size: .93rem; }
.card-link::after { content: " →"; transition: margin .25s var(--ease); }
.card-link:hover::after { margin-left: .25rem; }

/* ── split + steps ───────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.split-text p { color: var(--text-soft); }

.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1.5px; background: linear-gradient(var(--accent), transparent); }
.steps li { position: relative; padding: 0 0 1.9rem 2.4rem; }
.steps li:last-child { padding-bottom: 0; }
.dot { position: absolute; left: 0; top: 7px; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--accent); background: var(--bg-raised); }
.dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity .5s var(--ease); }
.steps li.is-in .dot::after { opacity: 1; }
.steps h4 { margin: 0 0 .25rem; font-size: 1.07rem; }
.steps p { margin: 0; color: var(--text-dim); font-size: 1rem; }

/* ── the MDR statement ───────────────────────────────────────────── */
.mdr strong { color: var(--text); }

/* ── the patient accordion ───────────────────────────────────────
   <details>, not a script: it works with JavaScript off, it is keyboard
   and screen-reader native, and it keeps this section one screen tall
   however much guidance goes into it. */
.pt-foot { margin: 1.8rem 0 0; color: var(--text-dim); font-size: .97rem; max-width: 64ch; }

/* ── partners + the map ──────────────────────────────────────────── */
.partner address a { color: var(--accent); text-decoration: none; }
.partner address a:hover { text-decoration: underline; }

.map-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; margin-top: .5rem; }
.eu-map { flex: 1 1 340px; max-width: 620px; height: auto; }

/* Every country is a quiet silhouette; the four are lit. The highlight
   draws itself in when the section arrives - see [data-anim].is-in. */
.eu-map .c { fill: #131C2E; stroke: #1E293F; stroke-width: 1; transition: fill .8s var(--ease); }
.eu-map .is-sk { fill: var(--accent); }
.eu-map .is-cz { fill: #46C9C0; }
.eu-map .is-hu { fill: #6FD9E0; }
.eu-map .is-ch { fill: var(--violet); }
[data-anim] .eu-map .is-sk, [data-anim] .eu-map .is-cz,
[data-anim] .eu-map .is-hu, [data-anim] .eu-map .is-ch { fill: #131C2E; }
[data-anim].is-in .eu-map .is-sk { fill: var(--accent); }
[data-anim].is-in .eu-map .is-cz { fill: #46C9C0; }
[data-anim].is-in .eu-map .is-hu { fill: #6FD9E0; }
[data-anim].is-in .eu-map .is-ch { fill: var(--violet); }

.map-key { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: 1rem; color: var(--text-soft); }
.map-key li { display: flex; align-items: center; gap: .6rem; }
.sw { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.sw-sk { background: var(--accent); }
.sw-cz { background: #46C9C0; }
.sw-hu { background: #6FD9E0; }
.sw-ch { background: var(--violet); }

/* ── features + principles ───────────────────────────────────────── */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.15rem 1.9rem; margin-bottom: 2rem; }
.feat { padding-left: 1.1rem; border-left: 2px solid var(--line-strong); transition: border-color .35s var(--ease); }
.feat:hover { border-left-color: var(--accent); }
.feat h4 { margin: 0 0 .35rem; font-size: 1.07rem; }
.feat p { margin: 0; color: var(--text-soft); font-size: 1.02rem; }

.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem 2.6rem; }
.pr h4 { margin: 0 0 .4rem; font-size: 1.08rem; }
.pr h4::before { content: "—"; color: var(--accent); margin-right: .5rem; }
.pr p { margin: 0; color: var(--text-soft); font-size: 1.04rem; }

/* ── panel ───────────────────────────────────────────────────────── */

/* ── contact + footer ────────────────────────────────────────────── */
.contact { text-align: center; }
.contact .section-lede { margin-inline: auto; }
.mail { font-family: var(--font-display); font-size: clamp(1.3rem, 3.4vw, 2rem); font-weight: 700; letter-spacing: -.02em; margin: .5rem 0 0; }
.mail a { text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom / 0 2px; transition: background-size .45s var(--ease), color .3s; }
.mail a:hover { color: var(--accent); background-size: 100% 2px; }

.site-foot { border-top: 1px solid var(--line); padding: 3rem 0 2rem; background: var(--bg-raised); }
.foot-inner { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: start; }
.foot-brand { margin: 0 0 .3rem; font-weight: 700; letter-spacing: -.01em; }
.foot-note { margin: 0; color: var(--text-dim); font-size: .97rem; max-width: 46ch; }
.foot-links a { color: var(--text-soft); text-decoration: none; transition: color .25s; }
.foot-links a:hover { color: var(--accent); }
.foot-brand-sub { color: var(--text-dim); font-weight: 500; }

/* The statutory identifiers. Deliberately quiet but never hidden - they are
   a legal requirement, not decoration, so they get their own rule above the
   line rather than being tucked into the copyright. */
.foot-legal { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); color: var(--text-dim); font-size: .88rem; line-height: 1.75; }
.legal-ids { margin: 0 0 .35rem; }
.legal-addr { margin: 0; }
@media (max-width: 700px) {
  .legal-ids { font-size: .84rem; }
}

/* ── scroll reveal ───────────────────────────────────────────────── */
[data-anim] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-anim].is-in { opacity: 1; transform: none; }

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
      .site-nav.is-open { transform: none; }
      .hero-facts { gap: 1.5rem 2rem; }
}

/* ⚠ Everything decorative stops here. Vestibular disorders are not an edge
   case, and this site has a lot of movement in it. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-anim] { opacity: 1; transform: none; }
  .blob { animation: none; }
}