/* ============================================================
   MVB Medical — design system
   Clinical / high-tech. Medical blue. IBM Plex family.
   ============================================================ */

:root {
  /* --- color tokens (cool, clinical) --- */
  --bg:        oklch(0.992 0.003 240);
  --bg-tint:   oklch(0.972 0.008 240);
  --surface:   #ffffff;
  --ink:       oklch(0.24 0.028 252);
  --ink-soft:  oklch(0.46 0.022 252);
  --ink-mute:  oklch(0.60 0.018 252);
  --line:      oklch(0.916 0.008 245);
  --line-soft: oklch(0.952 0.006 245);

  /* medical blue — matched to the MVB Medical logo (#2374A5 / #56A9DE) */
  --blue:      #2374A5;
  --blue-deep: #1a5a82;
  --blue-ink:  #123c57;
  --blue-tint: #e9f3fb;
  --blue-tint2:#cfe6f7;

  /* secondary high-tech accent (same chroma family, shifted hue) */
  --teal:      oklch(0.55 0.155 206);
  --teal-tint: oklch(0.955 0.022 200);

  /* signal */
  --ok:        oklch(0.62 0.13 158);

  /* radii / shadow */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 26px;
  --shadow-s: 0 1px 2px oklch(0.4 0.05 252 / 0.06), 0 2px 6px oklch(0.4 0.05 252 / 0.05);
  --shadow-m: 0 4px 14px oklch(0.4 0.05 252 / 0.07), 0 12px 34px oklch(0.4 0.05 252 / 0.07);
  --shadow-l: 0 18px 50px oklch(0.35 0.06 252 / 0.13);

  /* type */
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 74px;

  /* accent — overridden by tweaks */
  --accent: var(--blue);
  --accent-deep: var(--blue-deep);
  --accent-tint: var(--blue-tint);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: #fff; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display, var(--sans));
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

/* --- shared utility --- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: 1380px; margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1.5px;
  background: var(--accent);
  display: inline-block;
}
.eyebrow.no-rule::before { display: none; }

.section { padding-block: clamp(64px, 9vw, 124px); }
.section-tight { padding-block: clamp(48px, 6vw, 84px); }

.lead {
  font-size: clamp(18px, 2vw, 21px);
  color: var(--ink-soft);
  line-height: 1.6;
}

/* --- buttons --- */
.btn {
  --b-bg: var(--accent);
  --b-fg: #fff;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 13px 22px;
  border-radius: 100px;
  border: 1px solid transparent;
  background: var(--b-bg);
  color: var(--b-fg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background .2s, border-color .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(35, 116, 165, 0.30); }
.btn:active { transform: translateY(0); }
.btn .ar { transition: transform .2s; }
.btn:hover .ar { transform: translateX(3px); }

.btn.ghost {
  --b-bg: transparent;
  --b-fg: var(--ink);
  border-color: var(--line);
}
.btn.ghost:hover { background: var(--surface); border-color: var(--accent); box-shadow: var(--shadow-s); }

.btn.light {
  --b-bg: #fff;
  --b-fg: var(--blue-ink);
}
.btn.light:hover { box-shadow: 0 10px 30px oklch(0.2 0.05 252 / 0.25); }

.btn.lg { padding: 16px 28px; font-size: 16.5px; }

/* --- chips / pills --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 7px 13px;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* --- cards --- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}

/* --- image placeholder slots --- */
image-slot {
  --is-bg: var(--bg-tint);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  color: var(--ink-mute);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* striped placeholder look behind image-slot caption when empty */
.ph {
  background:
    repeating-linear-gradient(135deg, oklch(0.93 0.012 245) 0 11px, oklch(0.96 0.008 245) 11px 22px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--line);
}

/* --- entrance on route change ---
   Resting opacity stays 1 and we animate ONLY transform, so content is never
   hidden if the animation clock is throttled (offscreen tab / rasterized capture). */
.route-fade { opacity: 1; animation: routeIn .5s cubic-bezier(.2,.7,.3,1); }
@keyframes routeIn {
  from { transform: translateY(12px); }
  to   { transform: none; }
}

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, .route-fade { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}