/* ============================================================================
   VÆLARUM — Components
   Reusable UI primitives + the underwater-hero effect for the home page.
   ============================================================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-75);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: all var(--dur-fast) var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}

.btn::after {
  content: "→";
  font-weight: var(--fw-regular);
  transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover::after { transform: translateX(3px); }

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn--primary {
  background: var(--brand-x-dark);
  color: var(--text-inverse);
  border-color: var(--brand-x-dark);
}

.btn--primary:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--text-1);
  border-color: var(--border-2);
}

.btn--ghost:hover {
  border-color: var(--brand-x-dark);
  background: var(--surface-1);
}

/* Theme-adaptive — uses color-mix with --text-1 so the tint matches the
   current text color: light tint on dark theme, dark tint on light theme. */
.btn--on-dark {
  background: color-mix(in srgb, var(--text-1) 8%, transparent);
  color: var(--text-1);
  border-color: color-mix(in srgb, var(--text-1) 25%, transparent);
}

.btn--on-dark:hover {
  background: color-mix(in srgb, var(--text-1) 16%, transparent);
  border-color: color-mix(in srgb, var(--text-1) 50%, transparent);
  color: var(--text-1);
}

.btn--inline {
  padding: 0;
  background: none;
  border: 0;
  color: var(--brand-mid);
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.btn--inline::after { display: none; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ---------- Language Switcher ---------- */
.lang-switch {
  display: inline-flex;
  gap: 0;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  padding: 2px;
  background: var(--surface-0);
}

.lang-switch a {
  padding: var(--space-2) var(--space-3);
  color: var(--text-3);
  text-decoration: none;
  border-radius: 3px;
  transition: all var(--dur-fast) var(--ease-out);
  line-height: 1;
}

.lang-switch a:hover {
  background: var(--surface-1);
  color: var(--text-1);
}

.lang-switch a[aria-current="true"] {
  background: var(--brand-x-dark);
  color: var(--text-inverse);
}

.lang-switch a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand);
}

/* ---------- Cards ---------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  height: 100%;
}

.card:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-mid);
}

.card__title {
  font-size: var(--fs-200);
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}

.card__text {
  color: var(--text-2);
  font-size: var(--fs-100);
  line-height: var(--lh-relaxed);
}

.card__meta {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-1);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
}

/* Featured stat card */
.stat-card {
  padding: var(--space-6) var(--space-5);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stat-card__value {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-tight);
  color: var(--brand-x-dark);
  line-height: 1;
}

.stat-card__unit {
  font-size: 0.55em;
  margin-left: 0.18em;
  color: var(--text-2);
  font-weight: var(--fw-medium);
}

.stat-card__label {
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-3);
}

.stat-card__note {
  margin-top: var(--space-2);
  font-size: var(--fs-75);
  color: var(--text-2);
  line-height: var(--lh-base);
}

/* ---------- Pipeline (steps with connectors) ---------- */
.pipeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  counter-reset: pipeline;
}

@media (min-width: 720px) {
  .pipeline {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
  }
}

.pipeline__step {
  position: relative;
  padding: var(--space-5);
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  counter-increment: pipeline;
}

.pipeline__step::before {
  content: counter(pipeline, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  color: var(--brand-mid);
  margin-bottom: var(--space-3);
}

.pipeline__step h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-125);
  margin-bottom: var(--space-3);
  letter-spacing: 0;
}

.pipeline__step p {
  font-size: var(--fs-75);
  color: var(--text-2);
  line-height: var(--lh-base);
  margin: 0;
  max-width: none;
}

@media (min-width: 720px) {
  .pipeline__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--space-4) * -1);
    width: var(--space-4);
    height: 1px;
    background: var(--border-2);
    z-index: 1;
  }
}

/* ---------- Case row (cases as horizontal entries) ---------- */
.case-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-1);
}

@media (min-width: 720px) {
  .case-row {
    grid-template-columns: 220px 1fr 260px;
    gap: var(--space-7);
    align-items: start;
  }
}

.case-row__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-75);
}

.case-row__location {
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--fs-50);
  color: var(--brand-mid);
}

.case-row__title {
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  margin-bottom: var(--space-3);
  letter-spacing: 0;
}

.case-row__metrics {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-1);
  border-radius: var(--r-sm);
}

.case-row__metric {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-75);
  font-variant-numeric: tabular-nums;
}

.case-row__metric dt {
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-50);
}

.case-row__metric dd {
  margin: 0;
  font-weight: var(--fw-semibold);
}

/* ---------- Forms ---------- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 580px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-2);
}

.field input,
.field textarea,
.field select {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  background: var(--surface-0);
  font-size: var(--fs-100);
  line-height: var(--lh-base);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(48, 57, 64, 0.12);
}

.field textarea {
  font-family: var(--font-sans);
  min-height: 8rem;
  resize: vertical;
}

.field__hint {
  font-size: var(--fs-50);
  color: var(--text-3);
}

/* ---------- Inline alert / proto banner ---------- */
.banner {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-md);
  border-left: 3px solid var(--status-review);
  background: rgba(138, 122, 46, 0.06);
  font-size: var(--fs-75);
  line-height: var(--lh-base);
}

.banner strong {
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--status-review);
  display: block;
  margin-bottom: 2px;
}

/* ============================================================================
   STORM HERO — Iteration A.2 (replaces Tubes)
   Self-contained: WebGL shader for lightning + DOM/CSS raindrops.
   No external libraries, no dynamic imports — works under file://.
   ============================================================================ */

.hero--storm {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(30, 40, 55, 0.55) 0%, transparent 70%),
    linear-gradient(180deg, #0a0d12 0%, #1a232c 50%, #0a0d12 100%);
  color: var(--text-inverse);
}

/* Lightning canvas — drawn ABOVE the flash so the bolt isn't muted */
.hero--storm__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 3;          /* above rain (1) and flash (2) */
  opacity: 0;
  pointer-events: none;
  /* No blend mode — full alpha output from the shader, crisp bolt */
}

.hero--storm__canvas.is-flashing {
  opacity: 1;
}

/* Screen-wide flash overlay — below the bolt, brief white wash */
.hero--storm__flash {
  position: absolute;
  inset: 0;
  z-index: 2;          /* between rain and canvas */
  background: radial-gradient(circle at 50% 30%, rgba(220, 230, 245, 0.55) 0%, rgba(220, 230, 245, 0) 70%);
  opacity: 0;
  pointer-events: none;
}

.hero--storm__flash.is-active {
  animation: storm-flash 320ms ease-out forwards;
}

@keyframes storm-flash {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  20%  { opacity: 0.35; }
  30%  { opacity: 0.9; }
  60%  { opacity: 0.15; }
  100% { opacity: 0; }
}

/* Rain layer — diagonal, generated via JS */
.hero--storm__rain {
  position: absolute;
  inset: -10%;
  z-index: 1;          /* bottom layer */
  pointer-events: none;
  transform: rotate(12deg);
  transform-origin: center center;
}

.hero--storm__drop {
  position: absolute;
  top: -20px;
  background: linear-gradient(to bottom, transparent, rgba(180, 200, 230, 0.55));
  animation-name: storm-rainfall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  border-radius: 1px;
  will-change: transform;
}

@keyframes storm-rainfall {
  0%   { transform: translateY(-20px); }
  100% { transform: translateY(110vh); }
}

/* Foreground stage (logo + wordmark) */
.hero--storm__stage {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  pointer-events: none;
}

.hero--storm__logo {
  width: clamp(220px, 30vw, 420px);
  aspect-ratio: 1;
  filter:
    drop-shadow(0 0 60px rgba(0, 0, 0, 0.6))
    drop-shadow(0 8px 32px rgba(0, 0, 0, 0.5));
  animation: storm-rise 1.4s var(--ease-out) 0.2s both;
}

.hero--storm__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Wordmark — Cinzel serif (matches original logo lettering) */
.hero--storm__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 7vw, 6rem);
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow:
    0 0 30px rgba(0, 0, 0, 0.85),
    0 2px 12px rgba(0, 0, 0, 0.7);
  line-height: 1;
  margin: 0;
  animation: storm-rise 1.4s var(--ease-out) 0.55s both;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Slogan / tagline under the wordmark */
.hero--storm__slogan {
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.8);
  margin: 0;
  margin-top: var(--space-2);
  max-width: 40ch;
  line-height: var(--lh-base);
  animation: storm-rise 1.4s var(--ease-out) 0.85s both;
}

a.hero--storm__scroll-hint {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-pill);
  pointer-events: auto;
  animation: storm-rise 1.4s var(--ease-out) 1.1s both,
             storm-hint-pulse 2.4s ease-in-out 2.6s infinite;
  transition: background 180ms ease-out, color 180ms ease-out;
}

a.hero--storm__scroll-hint:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

a.hero--storm__scroll-hint::after {
  content: " ↓";
  display: inline-block;
  margin-left: 0.4em;
}

a.hero--storm__scroll-hint:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

@keyframes storm-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes storm-hint-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--storm__logo,
  .hero--storm__wordmark,
  .hero--storm__scroll-hint,
  .hero--storm__drop {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero--storm__rain,
  .hero--storm__canvas,
  .hero--storm__flash {
    display: none !important;
  }
}

/* ============================================================================
   TUBES HERO — Iteration A.1 (UNUSED in A.2 — kept for revert)
   Background canvas driven by threejs-components CDN library. Foreground:
   large logo + VÆLARUM wordmark. Brand-palette tubes + accent lights.
   Click-to-randomize disabled to keep brand consistency.
   ============================================================================ */

.hero--tubes {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(75, 112, 81, 0.18) 0%, transparent 55%),
    var(--brand-x-dark);
  color: var(--text-inverse);
}

.hero--tubes__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  /* pointer-events left default — TubesCursor library tracks mouse globally
     but blocking the canvas would also kill direct hover/touch reactivity. */
}

.hero--tubes__stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  pointer-events: none;
}

.hero--tubes__logo {
  width: clamp(220px, 30vw, 420px);
  aspect-ratio: 1;
  filter:
    drop-shadow(0 0 60px rgba(0, 0, 0, 0.55))
    drop-shadow(0 8px 32px rgba(0, 0, 0, 0.45));
  animation: hero-tubes-rise 1.4s var(--ease-out) 0.2s both;
}

.hero--tubes__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hero--tubes__wordmark {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: clamp(2.5rem, 7vw, 6rem);
  letter-spacing: var(--tracking-wide);
  color: #fff;
  text-shadow:
    0 0 30px rgba(0, 0, 0, 0.85),
    0 2px 8px rgba(0, 0, 0, 0.6);
  line-height: 1;
  margin: 0;
  animation: hero-tubes-rise 1.4s var(--ease-out) 0.55s both;
  font-feature-settings: "kern" 1, "liga" 1;
}

.hero--tubes__scroll-hint {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  animation: hero-tubes-rise 1.4s var(--ease-out) 1.1s both,
             hero-tubes-pulse 2.4s ease-in-out 2.6s infinite;
}

.hero--tubes__scroll-hint::after {
  content: " ↓";
  display: inline-block;
  margin-left: 0.4em;
}

@keyframes hero-tubes-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-tubes-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--tubes__logo,
  .hero--tubes__wordmark,
  .hero--tubes__scroll-hint {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Scroll hint as an anchor — make it tactile */
a.hero--tubes__scroll-hint {
  pointer-events: auto;
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-pill);
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

a.hero--tubes__scroll-hint:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

a.hero--tubes__scroll-hint:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
  color: #fff;
}

/* ----------------------------------------------------------------------------
   INTRO SECTION — sits right under the tubes hero on home pages.
   Inherits .section styles; overrides metric colors so the hero__meta block
   reads correctly on a light surface.
   ---------------------------------------------------------------------------- */
.section--intro {
  padding-block: var(--space-7) var(--space-8);
}

.section--intro h2 {
  font-size: clamp(1.875rem, 3.5vw, var(--fs-400));
  letter-spacing: var(--tracking-tight);
}

.section--intro .hero__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-1);
  max-width: var(--container-narrow);
}

@media (min-width: 600px) {
  .section--intro .hero__meta {
    grid-template-columns: repeat(3, 1fr);
  }
}

.section--intro .hero__metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.section--intro .hero__metric-value {
  color: var(--brand-x-dark);
}

.section--intro .hero__metric-label {
  color: var(--text-3);
}

/* ----------------------------------------------------------------------------
   TECH FIGURE — large product visualization on Technologie pages.
   Used for the Speed-o-Clar® 360° render, CFD comparisons, and similar
   technical imagery. Centered, slightly framed against a soft surface.
   ---------------------------------------------------------------------------- */
.tech-figure {
  margin: var(--space-7) auto var(--space-8);
  max-width: var(--container-narrow);
  text-align: center;
}

.tech-figure__frame {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(48, 57, 64, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.tech-figure__frame img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 380px;
  margin: 0 auto;
}

.tech-figure__caption {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-75);
  color: var(--text-3);
  letter-spacing: var(--tracking-wide);
  line-height: var(--lh-base);
  text-align: center;
  max-width: 56ch;
  margin-inline: auto;
}

.tech-figure__caption strong {
  color: var(--text-2);
  font-weight: var(--fw-semibold);
}

/* ============================================================================
   MORPH PANEL — collapsed pill morphs into a contact textarea
   Adapted from a React/Framer-Motion component to plain HTML/CSS.
   Spring physics approximated with cubic-bezier easing.
   ============================================================================ */

.morph-panel-wrap {
  display: flex;
  justify-content: center;
  padding: var(--space-5) 0;
}

/* Floating variant — fixed to the bottom-right corner of the viewport so the
   "Schnellanfrage" pill is always reachable on every page during scroll. */
.morph-panel-wrap--floating {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 50;
  padding: 0;
  display: block;
  /* Let scroll events pass through everywhere except the panel itself */
  pointer-events: none;
}

.morph-panel-wrap--floating .morph-panel {
  pointer-events: auto;
}

@media (max-width: 640px) {
  .morph-panel-wrap--floating {
    bottom: var(--space-3);
    right: var(--space-3);
  }
  .morph-panel-wrap--floating .morph-panel {
    --mp-expanded-w: min(340px, calc(100vw - var(--space-5)));
    --mp-expanded-h: 200px;
  }
}

.morph-panel {
  --mp-pill-h: 44px;
  --mp-expanded-w: 380px;
  --mp-expanded-h: 220px;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  height: var(--mp-pill-h);
  border-radius: var(--r-pill);
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  overflow: hidden;
  transition:
    width 380ms cubic-bezier(0.22, 1, 0.36, 1),
    height 380ms cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 380ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms var(--ease-out);
  box-shadow: var(--shadow-1);
}

.morph-panel:hover {
  box-shadow: var(--shadow-2);
}

.morph-panel[data-state="open"] {
  width: var(--mp-expanded-w);
  height: var(--mp-expanded-h);
  border-radius: 14px;
  box-shadow: var(--shadow-3);
}

/* ---------- Pill (collapsed) ---------- */
.morph-panel__pill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--mp-pill-h);
  padding: 0 var(--space-4) 0 var(--space-3);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-75);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-1);
  background: transparent;
  white-space: nowrap;
  transition: opacity 180ms var(--ease-out);
}

.morph-panel__pill:hover {
  color: var(--brand-x-dark);
}

.morph-panel__pill:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-pill);
}

.morph-panel[data-state="open"] .morph-panel__pill {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Color Orb (CSS conic-gradient) ---------- */
@property --orb-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* The animated conic-orb was replaced with the VÆLARUM logo mark. The
   path is relative to this CSS file (assets/css/ → ../logo/). */
.morph-panel__orb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  background:
    url("../logo/vaelarum-mark.png") center / contain no-repeat;
}

/* Larger logo orb shown inside the expanded panel */
.morph-panel__orb--lg {
  width: 28px;
  height: 28px;
}

/* ---------- Form (expanded state) ---------- */
.morph-panel__form {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-3) var(--space-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out) 120ms;
}

.morph-panel[data-state="open"] .morph-panel__form {
  opacity: 1;
  pointer-events: auto;
}

.morph-panel__form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.morph-panel__form-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-75);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-1);
}

.morph-panel__hint {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.morph-panel__key {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 1px 6px;
  border: 1px solid var(--border-1);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--surface-1);
  color: var(--text-2);
  line-height: 1.2;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.morph-panel__key--ghost { background: transparent; border-color: transparent; padding-left: 0; padding-right: 0; }

.morph-panel__textarea {
  flex: 1;
  width: 100%;
  resize: none;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface-1);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-100);
  line-height: var(--lh-base);
  color: var(--text-1);
  outline: 0;
}

.morph-panel__textarea:focus {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 2px rgba(48, 57, 64, 0.12);
}

.morph-panel__textarea::placeholder {
  color: var(--text-3);
}

.morph-panel__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-3);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out) 180ms;
}

.morph-panel[data-state="open"] .morph-panel__close {
  opacity: 1;
  pointer-events: auto;
}

.morph-panel__close:hover {
  background: var(--surface-2);
  color: var(--text-1);
}

.morph-panel__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Success state — brief check-mark flash after submit */
.morph-panel__success {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-75);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out);
}

.morph-panel[data-state="success"] .morph-panel__success {
  opacity: 1;
}

.morph-panel__success-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(75, 112, 81, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 18px;
}

/* ============================================================================
   DARK-THEME ADJUSTMENTS — Iteration A.3
   surface-0 is now the brand color (#303940). Components that previously
   assumed a white page bg are corrected here. All edits live in one block
   so a light-mode revert is a single delete-block.
   ============================================================================ */

/* Body becomes transparent so the shader canvas (z-index -1) shows through.
   HTML keeps the brand color as a fallback for when the shader is paused
   (prefers-reduced-motion) or fails to load. */
html {
  /* Page background = the same gradient that's used as the hero water-bg
     fallback. Tokens --hero-fallback-top/bot already adapt per theme:
       dark  : #15191f → #2a323a  (deep slate, top → bottom)
       light : #d6dde3 → #f0f3f6  (pale silver)
     `background-attachment: fixed` keeps the gradient locked to the viewport,
     so every scroll position on every page feels like the hero. */
  background:
    linear-gradient(180deg,
      var(--hero-fallback-top) 0%,
      var(--hero-fallback-bot) 100%);
  background-color: var(--hero-fallback-bot);
  background-attachment: fixed;
  background-size: 100% 100vh;
  background-repeat: no-repeat;
}

body {
  background: transparent;
  color: var(--text-1);
}

/* Water-bg canvas — scoped to the .hero--water container so the water effect
   stays inside the hero and scrolls out of view with it. Parent hero has
   position: relative + overflow: hidden, so the absolute fill works cleanly. */
.water-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
  /* Static fallback under the gradient — visible if WebGL fails. Uses
     hero-specific tones that work in both themes. */
  background: linear-gradient(180deg, var(--hero-fallback-top, #15191f) 0%, var(--hero-fallback-bot, #2a323a) 100%);
}

/* Lift every visible page element above the water canvas.
   .site-header is omitted here because it keeps its own `position: sticky`
   from layout.css and its own --z-header z-index (=10) which is already > 0. */
main,
.site-footer,
.skip-link {
  position: relative;
  z-index: 1;
}

/* ============================================================================
   CSS FALLBACK — quiet static gradient when WebGL is refused.
   No animation (per user preference); on the real public domain WebGL is
   active for ~95% of visitors, so this code path is rare.
   ============================================================================ */

.water-bg--fallback {
  background:
    radial-gradient(ellipse 60% 40% at 22% 28%, rgba(96, 174, 213, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 82%, rgba(58, 68, 82, 0.20) 0%, transparent 65%),
    linear-gradient(180deg, var(--surface-0) 0%, var(--surface-1) 100%);
}

:root[data-theme="light"] .water-bg--fallback {
  background:
    radial-gradient(ellipse 60% 40% at 22% 28%, rgba(180, 185, 195, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 82%, rgba(130, 140, 152, 0.14) 0%, transparent 65%),
    linear-gradient(180deg, var(--surface-0) 0%, var(--surface-1) 100%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .water-bg--fallback {
    background:
      radial-gradient(ellipse 60% 40% at 22% 28%, rgba(180, 185, 195, 0.22) 0%, transparent 60%),
      radial-gradient(ellipse 70% 60% at 50% 82%, rgba(130, 140, 152, 0.14) 0%, transparent 65%),
      linear-gradient(180deg, var(--surface-0) 0%, var(--surface-1) 100%);
  }
}

/* Section--alt: fully transparent so the page-wide hero gradient flows
   through without a tinted band. Cards inside still elevate visually. */
.section--alt {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* .section--dark used to be a solid dark accent band. Now transparent so the
   page-wide hero gradient shows through — uniform look across all sections.
   Text and button colors fall back to theme tokens (no forced inversion). */
.section--dark {
  background: transparent;
  color: var(--text-1);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6,
.section--dark p,
.section--dark a:not(.btn) {
  color: var(--text-1);
}

.section--dark .section__eyebrow {
  color: var(--text-3);
}

.section--dark .section__lede {
  color: var(--text-2);
}

/* Footer matches the header glass — same bg, same translucency, theme-adaptive.
   Text colors use tokens so dark mode → light text, light mode → dark text. */
.site-footer {
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--border-1);
  color: var(--text-2);
}

.site-footer h2,
.site-footer .site-footer__tag,
.site-footer__list a,
.site-footer__meta {
  color: var(--text-2);
}

.site-footer h2 {
  /* Dim eyebrow-style heading using theme-aware text-3 token */
  color: var(--text-3);
}

.site-footer__list a {
  color: var(--text-2);
}

.site-footer__list a:hover {
  color: var(--text-1);
}

.site-footer__meta {
  color: var(--text-3);
}

.site-footer__brand .site-brand,
.site-footer__brand .site-brand:hover {
  color: var(--text-1);
}

/* Fixed shader-bg canvas — sits behind every body child.
   The CSS background is a static brand-color gradient that's visible
   whenever WebGL is unavailable, hardware-accelerated rendering is
   disabled, or `prefers-reduced-motion` is on. When the shader runs,
   it paints over this gradient — so the visual is animated in good
   conditions, static-but-still-on-brand otherwise. */
.shader-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  display: block;
  pointer-events: none;
  /* Brighter color washes so the fallback gradient is clearly visible.
     If you see this, the new CSS has loaded — and you'll know cache was
     the only issue. */
  background:
    radial-gradient(ellipse 60% 80% at 20% 25%, rgba(96, 174, 213, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(131, 243, 110, 0.25) 0%, transparent 55%),
    radial-gradient(ellipse 70% 70% at 50% 85%, rgba(154, 200, 228, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 15% 75%, rgba(75, 112, 81, 0.40) 0%, transparent 55%),
    linear-gradient(135deg, #15191f 0%, #303940 50%, #1a232c 100%);
}

/* Header — dark translucent backdrop instead of white */
.site-header {
  background: var(--header-bg);
  border-bottom-color: var(--border-1);
}

.site-brand {
  color: var(--text-1);
}

/* The VÆLARUM wordmark — always rendered in the Cinzel display serif so it
   visually matches the brand image in the hero. Inherits the size of the
   surrounding text (1em) so it doesn't disrupt body/header rhythm. */
.vael,
.site-brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Registered-trademark mark appended after every styled VÆLARUM occurrence.
   Renders in the body mono font (not Cinzel), small and raised, with a hair
   of trailing space so it doesn't collide with the next word. */
.vael::after {
  content: "\00AE";
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.65em;
  vertical-align: 0.45em;
  margin-left: 0.1em;
  letter-spacing: 0;
}
/* Avoid double-stamping when the wordmark sits inside .site-brand__name
   (the outer span has no .vael class, but the inner one does — so only
   the inner ::after fires; nothing extra to do here). */

.site-brand:hover {
  color: var(--text-1);
}

/* Eyebrows / labels — brand-mid is now too dark on dark page */
.section__eyebrow,
.card__eyebrow {
  color: var(--text-3);
}

.section__eyebrow {
  color: #9ac8e4;        /* tinted light turquoise — water-tech accent */
}

/* Pipeline step numbers — same problem */
.pipeline__step::before {
  color: #9ac8e4;
}

/* Cards / stat-cards / pipeline steps — elevate above brand-color page */
.card,
.pipeline__step {
  background: var(--surface-1);
  border-color: var(--border-1);
}

.card:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}

.card__meta {
  border-top-color: var(--border-1);
  color: var(--text-3);
}

.stat-card {
  background: var(--surface-1);
  border-color: var(--border-1);
}

.stat-card__value {
  color: var(--text-1);
}

.stat-card__unit,
.stat-card__label,
.stat-card__note {
  color: var(--text-3);
}

/* Pipeline connector line */
.pipeline__step::after {
  background: var(--border-2);
}

/* Section--intro: metric values were brand-x-dark = invisible */
.section--intro .hero__metric-value {
  color: var(--text-1);
}

.section--intro .hero__metric-label {
  color: var(--text-3);
}

.section--intro .hero__meta {
  border-top-color: var(--border-1);
}

/* .section--alt stays semi-transparent (defined earlier with color-mix +
   backdrop-blur) so the hero gradient on <html> shows through. The earlier
   rule wins now — no override here. */

/* Case rows */
.case-row {
  border-top-color: var(--border-1);
}

.case-row__metrics {
  background: var(--surface-1);
}

.case-row__metric dt {
  color: var(--text-3);
}

.case-row__location {
  color: #9ac8e4;
}

/* Forms — inputs were surface-0 = same as body */
.field input,
.field textarea,
.field select {
  background: var(--surface-1);
  color: var(--text-1);
  border-color: var(--border-1);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  background: var(--surface-2);
  border-color: var(--text-3);
  box-shadow: 0 0 0 3px rgba(240, 242, 245, 0.10);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-3);
}

.field label {
  color: var(--text-2);
}

.field__hint {
  color: var(--text-3);
}

/* Buttons */
.btn--primary {
  background: var(--brand-x-dark);
  color: #fff;
  border-color: var(--brand-x-dark);
}

.btn--primary:hover {
  background: var(--brand-mid);
  border-color: var(--brand-mid);
}

.btn--ghost {
  color: var(--text-1);
  border-color: var(--border-2);
}

.btn--ghost:hover {
  border-color: var(--text-1);
  background: var(--surface-1);
  color: var(--text-1);
}

.btn--inline {
  color: #9ac8e4;
}

/* Banners + proto blocks need adjusted contrast on dark */
.banner {
  background: rgba(138, 122, 46, 0.12);
  border-left-color: #d4c172;
  color: var(--text-1);
}

.banner strong {
  color: #d4c172;
}

.proto-block {
  background:
    repeating-linear-gradient(135deg,
      rgba(240, 242, 245, 0.02) 0 8px,
      rgba(240, 242, 245, 0.05) 8px 16px),
    var(--surface-1);
  border-color: var(--border-2);
  color: var(--text-2);
}

.proto-block strong {
  color: var(--text-1);
}

.proto-note {
  color: #d4c172;
  background: rgba(138, 122, 46, 0.18);
  border-color: rgba(212, 193, 114, 0.4);
}

/* Tables */
th, td {
  border-bottom-color: var(--border-1);
}

th {
  color: var(--text-3);
}

/* Inline code */
code, kbd, samp {
  background: var(--surface-1);
  color: var(--text-1);
}

/* Tech figure — gradient already elevates, just deepen border */
.tech-figure__frame {
  border-color: var(--border-1);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.20) 0%, transparent 60%),
    linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 100%);
}

.tech-figure__caption {
  color: var(--text-3);
}

.tech-figure__caption strong {
  color: var(--text-2);
}

/* Lang-switch (header) */
.lang-switch {
  background: var(--surface-1);
  border-color: var(--border-1);
}

.lang-switch a {
  color: var(--text-3);
}

.lang-switch a:hover {
  background: var(--surface-2);
  color: var(--text-1);
}

.lang-switch a[aria-current="true"] {
  /* Token-driven: in dark mode bg=light, text=dark; in light mode reversed */
  background: var(--text-1);
  color: var(--surface-0);
}

/* Primary nav — use text token so the active link adapts to theme */
.primary-nav__link {
  color: var(--text-2);
}

.primary-nav__link:hover {
  color: var(--text-1);
  border-bottom-color: #9ac8e4;
}

.primary-nav__link[aria-current="page"] {
  color: var(--text-1);
  border-bottom-color: #9ac8e4;
}

/* Nav toggle (mobile burger) */
.nav-toggle {
  color: var(--text-1);
}

.nav-toggle:hover {
  background: var(--surface-1);
}

.mobile-nav {
  background: var(--surface-0);
  border-bottom-color: var(--border-1);
}

/* Morph panel — elevate */
.morph-panel {
  background: var(--surface-1);
  border-color: var(--border-1);
}

.morph-panel__pill {
  color: var(--text-1);
}

.morph-panel__pill:hover {
  color: #fff;
}

.morph-panel__form-title {
  color: var(--text-1);
}

.morph-panel__textarea {
  background: var(--surface-2);
  color: var(--text-1);
}

.morph-panel__textarea:focus {
  background: var(--surface-3);
  box-shadow: inset 0 0 0 2px rgba(240, 242, 245, 0.18);
}

.morph-panel__textarea::placeholder {
  color: var(--text-3);
}

.morph-panel__key {
  background: var(--surface-2);
  color: var(--text-2);
  border-color: var(--border-2);
}

.morph-panel__close {
  color: var(--text-3);
}

.morph-panel__close:hover {
  background: var(--surface-2);
  color: var(--text-1);
}

/* Skip link */
.skip-link {
  background: var(--surface-3);
  color: var(--text-1);
}

/* Selection */
::selection {
  background: #9ac8e4;
  color: var(--brand);
}

/* Links — re-tune underline color so they don't disappear */
a {
  color: #9ac8e4;
  text-decoration-color: rgba(154, 200, 228, 0.4);
}

a:hover {
  color: #fff;
  text-decoration-color: currentColor;
}

/* Body prose colors — explicit so paragraphs read clearly on dark */
p {
  color: var(--text-2);
}

.section--intro p,
.prose-page__body p {
  color: var(--text-2);
}

/* Headings always near-white for max contrast */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-1);
}

h6 {
  color: var(--text-3);
}

/* Force print to revert to light-on-white */
@media print {
  html, body {
    background: #fff !important;
    color: #000 !important;
  }
  .card, .stat-card, .pipeline__step, .case-row__metrics, .morph-panel,
  .field input, .field textarea, .field select, .tech-figure__frame,
  .proto-block, .banner {
    background: #fff !important;
    color: #000 !important;
    border-color: #999 !important;
  }
  a { color: #000 !important; }
  h1, h2, h3, h4, h5, h6 { color: #000 !important; }
}

/* ============================================================================
   UNDERWATER HERO — the home-page signature effect
   Logo emerges from beneath an animated water surface; ripples spread on
   surface-break; afterwards a gentle floating motion.
   Implementation is pure CSS + a single inline SVG (path-driven wave).
   Currently UNUSED in Iteration A.1 (replaced by hero--tubes) but CSS kept
   for easy revert.
   ============================================================================ */

.hero--underwater {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 92vh;
  padding-block: var(--space-6) var(--space-8);
  background:
    radial-gradient(ellipse at 50% 110%, rgba(75, 112, 81, 0.22) 0%, transparent 55%),
    linear-gradient(180deg,
      #1c2530 0%,
      #1c2530 35%,
      #15191f 60%,
      #0c1014 100%);
  color: var(--text-inverse);
}

/* Sky / Air strip at top (very subtle lightness) */
.hero--underwater::before {
  content: "";
  position: absolute;
  inset: 0 0 60% 0;
  background: linear-gradient(180deg,
    rgba(80, 100, 120, 0.18) 0%,
    rgba(60, 80, 100, 0.05) 50%,
    transparent 100%);
  z-index: 0;
  pointer-events: none;
}

/* Caustic shimmer — moving light gradient across the water column */
.hero--underwater::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 70%, rgba(120, 160, 200, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 80% 80%, rgba(90, 130, 170, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 90%, rgba(60, 100, 140, 0.12) 0%, transparent 60%);
  mix-blend-mode: screen;
  animation: caustics 14s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}

@keyframes caustics {
  0%   { transform: translate3d(-2%, 1%, 0) scale(1); opacity: 0.55; }
  50%  { transform: translate3d(2%, -1%, 0) scale(1.05); opacity: 0.8; }
  100% { transform: translate3d(-1%, 2%, 0) scale(1); opacity: 0.5; }
}

.hero--underwater .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: calc(92vh - var(--space-8) - var(--space-6));
  gap: var(--space-7);
}

/* Eyebrow at top */
.hero--underwater .hero__eyebrow {
  margin: 0;
  align-self: start;
}

/* Center stage holds the logo + title together */
.hero-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  text-align: center;
}

/* Water surface — wavy SVG line that animates horizontally */
.hero-surface {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 38%;
  height: 80px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  animation: surface-reveal 1.2s var(--ease-out) 0.4s forwards;
}

.hero-surface svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 -2px 8px rgba(0, 0, 0, 0.35));
}

.hero-surface__wave {
  fill: none;
  stroke: rgba(180, 210, 230, 0.4);
  stroke-width: 1.2;
  animation: wave-shift 9s linear infinite;
}

.hero-surface__wave--back {
  stroke: rgba(140, 170, 200, 0.22);
  stroke-width: 1;
  animation: wave-shift 13s linear infinite reverse;
}

.hero-surface__glint {
  fill: none;
  stroke: rgba(220, 235, 245, 0.7);
  stroke-width: 0.8;
  stroke-dasharray: 2 14;
  animation: wave-shift 11s linear infinite;
}

@keyframes wave-shift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes surface-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Logo wrapper — rises from below the surface */
.hero-logo {
  position: relative;
  width: clamp(140px, 18vw, 220px);
  aspect-ratio: 1;
  z-index: 2;
  transform-origin: center;
  animation:
    rise 3.6s cubic-bezier(0.18, 0.72, 0.22, 1) 0.2s forwards,
    float 7s ease-in-out 3.8s infinite;
  opacity: 0;
  filter: blur(14px) brightness(0.65);
}

.hero-logo svg {
  width: 100%;
  height: 100%;
}

@keyframes rise {
  0% {
    transform: translateY(34%) scale(0.78);
    filter: blur(14px) brightness(0.6) saturate(0.7);
    opacity: 0.15;
  }
  40% {
    transform: translateY(18%) scale(0.88);
    filter: blur(7px) brightness(0.78) saturate(0.85);
    opacity: 0.55;
  }
  72% {
    transform: translateY(4%) scale(0.97);
    filter: blur(2px) brightness(0.92) saturate(0.95);
    opacity: 0.92;
  }
  100% {
    transform: translateY(0) scale(1);
    filter: blur(0) brightness(1) saturate(1);
    opacity: 1;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(0.5deg); }
}

/* Ripples emanating from the surface where logo breaks through */
.hero-ripple {
  position: absolute;
  top: 38%;
  left: 50%;
  width: clamp(140px, 18vw, 220px);
  height: clamp(35px, 4.5vw, 55px);
  margin-left: calc(clamp(140px, 18vw, 220px) / -2);
  margin-top: calc(clamp(35px, 4.5vw, 55px) / -2);
  border: 1.5px solid rgba(210, 230, 245, 0.65);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transform: scale(0.3);
}

.hero-ripple--1 {
  animation: ripple 2.6s ease-out 3.2s 2;
}
.hero-ripple--2 {
  animation: ripple 2.6s ease-out 3.7s 2;
}
.hero-ripple--3 {
  animation: ripple 2.6s ease-out 4.2s 2;
}

@keyframes ripple {
  0%   { transform: scale(0.3); opacity: 0; }
  20%  { opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Bubbles rising from depth */
.hero-bubble {
  position: absolute;
  bottom: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.9), rgba(200, 220, 240, 0.3) 50%, transparent 70%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

.hero-bubble--a { left: 18%; animation: bubble-rise 6s ease-in 1.6s infinite; width: 5px; height: 5px; }
.hero-bubble--b { left: 32%; animation: bubble-rise 7.5s ease-in 2.4s infinite; width: 4px; height: 4px; }
.hero-bubble--c { left: 64%; animation: bubble-rise 6.8s ease-in 0.8s infinite; width: 7px; height: 7px; }
.hero-bubble--d { left: 78%; animation: bubble-rise 8s ease-in 3.2s infinite; width: 4px; height: 4px; }
.hero-bubble--e { left: 48%; animation: bubble-rise 7s ease-in 4.5s infinite; width: 5px; height: 5px; }

@keyframes bubble-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  8%   { opacity: 0.55; }
  60%  { transform: translate3d(8px, -45vh, 0); opacity: 0.4; }
  100% { transform: translate3d(-4px, -65vh, 0); opacity: 0; }
}

/* Title and lede appear after the logo has surfaced */
.hero--underwater .hero__title {
  opacity: 0;
  animation: text-fade-in 1.2s var(--ease-out) 3.6s forwards;
  margin-top: var(--space-4);
}

.hero--underwater .hero__lede {
  opacity: 0;
  animation: text-fade-in 1.2s var(--ease-out) 4s forwards;
  margin-inline: auto;
}

.hero--underwater .hero__meta {
  opacity: 0;
  animation: text-fade-in 1.2s var(--ease-out) 4.4s forwards;
  align-self: end;
  border-top-color: rgba(240, 242, 245, 0.18);
}

.hero--underwater .btn-row {
  opacity: 0;
  animation: text-fade-in 1.2s var(--ease-out) 4.2s forwards;
  justify-content: center;
}

@keyframes text-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduced motion — skip animations, show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .hero-logo,
  .hero--underwater .hero__title,
  .hero--underwater .hero__lede,
  .hero--underwater .hero__meta,
  .hero--underwater .btn-row,
  .hero-surface {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .hero-ripple,
  .hero-bubble {
    display: none;
  }
  .hero--underwater::after {
    animation: none;
  }
}

/* ============================================================================
   WATER HERO — Iteration A.5
   Animated WebGL water surface (top-down) with mouse-driven ripples.
   Foreground: logo + VÆLARUM wordmark + slogan + scroll hint.
   ============================================================================ */

.hero--water {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  /* Transparent — the global .water-bg shows through */
  background: transparent;
  color: var(--text-1);
  cursor: crosshair;
}

/* Slogan + scroll-hint colors should follow the theme, not be hard white */
:root[data-theme="light"] .hero--water__slogan,
:root[data-theme="light"] a.hero--water__scroll-hint {
  color: rgba(42, 50, 58, 0.78);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.8);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero--water__slogan,
  :root:not([data-theme="dark"]) a.hero--water__scroll-hint {
    color: rgba(42, 50, 58, 0.78);
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.8);
  }
}

.hero--water__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

.hero--water__stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Top-align so the slogan stays inside the first viewport even on shorter
     screens. Slim top padding — keep logo close to the header. */
  justify-content: flex-start;
  min-height: 100vh;
  gap: var(--space-4);
  padding: clamp(1rem, 3vh, 2.25rem) var(--space-5) var(--space-7);
  text-align: center;
  pointer-events: none;
}

.hero--water__logo {
  width: clamp(240px, 32vw, 460px);
  aspect-ratio: 1;
  /* Theme-aware shadow lives in the variable below — avoids a grey halo on
     light backgrounds while still giving the logo depth on dark backgrounds. */
  filter: var(--logo-shadow, drop-shadow(0 0 60px rgba(0, 0, 0, 0.55)) drop-shadow(0 8px 32px rgba(0, 0, 0, 0.45)));
  animation: water-rise 1.4s var(--ease-out) 0.2s both;
}

/* Light theme: drop shadow becomes invisible (none) so the logo sits cleanly
   on the pale water without a grey cloud around it. */
:root[data-theme="light"] .hero--water__logo {
  --logo-shadow: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero--water__logo {
    --logo-shadow: none;
  }
}

.hero--water__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* h1 wrapping the wordmark image — replaces the Cinzel text */
.hero--water__wordmark {
  margin: 0;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.12em;
  line-height: 0;
  animation: water-rise 1.4s var(--ease-out) 0.55s both;
  /* Reserve space for the wordmark even before/instead of the image so the
     layout doesn't jump and the fallback text has correct sizing. */
  min-height: 1em;
}

/* Registered-trademark mark next to the hero wordmark image.
   Sits at the top-right of the logotype, scaled to the wordmark's clamp. */
.hero--water__wordmark-r {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1rem, 1.7vw, 2rem);
  line-height: 1;
  color: var(--text-2);
  opacity: 0.78;
  margin-top: 0.6em;
}
:root[data-theme="light"] .hero--water__wordmark-r {
  color: var(--text-1);
  opacity: 0.65;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero--water__wordmark-r {
    color: var(--text-1);
    opacity: 0.65;
  }
}

.hero--water__wordmark-img {
  width: clamp(360px, 62vw, 880px);
  height: auto;
  display: block;
  /* In dark mode: lighten makes white/grey letters glow on dark water.
     In light mode: theme override below switches to multiply. */
  mix-blend-mode: lighten;
  filter:
    drop-shadow(0 0 40px rgba(0, 0, 0, 0.55))
    drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}

:root[data-theme="light"] .hero--water__wordmark-img {
  mix-blend-mode: multiply;
  filter: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero--water__wordmark-img {
    mix-blend-mode: multiply;
    filter: none;
  }
}

/* Fallback when the wordmark PNG fails to load — the onerror handler on the
   <img> replaces itself with a text node and adds the --text modifier so the
   h1 styles itself as the Cinzel wordmark instead. */
.hero--water__wordmark--text {
  line-height: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 7vw, 6rem);
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow:
    0 0 30px rgba(0, 0, 0, 0.85),
    0 2px 12px rgba(0, 0, 0, 0.7);
  font-feature-settings: "kern" 1, "liga" 1;
  min-height: 0;
}

:root[data-theme="light"] .hero--water__wordmark--text {
  color: var(--brand);
  text-shadow:
    0 0 24px rgba(255, 255, 255, 0.85),
    0 2px 8px rgba(48, 57, 64, 0.25);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero--water__wordmark--text {
    color: var(--brand);
    text-shadow:
      0 0 24px rgba(255, 255, 255, 0.85),
      0 2px 8px rgba(48, 57, 64, 0.25);
  }
}

.hero--water__slogan {
  font-family: var(--font-mono);
  /* Larger now that the slogan is a tight 2-word claim ("Fließende Präzision") */
  font-size: clamp(1.1rem, 2.2vw, 1.9rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 0 24px rgba(0, 0, 0, 0.8);
  margin: 0;
  margin-top: var(--space-3);
  /* Keep the slogan on a single line in every language — German is the
     longest at 19 chars uppercase + wide tracking. */
  max-width: none;
  white-space: nowrap;
  line-height: var(--lh-tight);
  animation: water-rise 1.4s var(--ease-out) 0.85s both;
}

@media (max-width: 480px) {
  .hero--water__slogan {
    /* Reduce tracking on narrow phones so the German slogan still fits */
    letter-spacing: var(--tracking-wider);
    font-size: 1rem;
  }
}

a.hero--water__scroll-hint {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-pill);
  pointer-events: auto;
  animation: water-rise 1.4s var(--ease-out) 1.1s both,
             water-hint-pulse 2.4s ease-in-out 2.6s infinite;
  transition: background 180ms ease-out, color 180ms ease-out;
}

a.hero--water__scroll-hint:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

a.hero--water__scroll-hint::after {
  content: " ↓";
  display: inline-block;
  margin-left: 0.4em;
}

a.hero--water__scroll-hint:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

@keyframes water-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes water-hint-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--water__logo,
  .hero--water__brand,
  .hero--water__wordmark,
  .hero--water__slogan,
  .hero--water__scroll-hint {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero--water__canvas {
    /* Keep the static gradient bg from .hero--water itself */
    display: none !important;
  }
}

/* Mobile: smaller logo, less padding, comfortable touch targets */
@media (max-width: 640px) {
  .hero--water {
    min-height: 88vh;
  }
  .hero--water__stage {
    min-height: 88vh;
    padding: var(--space-6) var(--space-4);
    gap: var(--space-4);
  }
  .hero--water__brand-img {
    width: min(78vw, 360px);
  }
  .hero--water__slogan {
    font-size: 0.85rem;
    letter-spacing: 0.10em;
    max-width: 30ch;
  }
  a.hero--water__scroll-hint {
    bottom: var(--space-4);
    font-size: 10px;
    padding: var(--space-2) var(--space-3);
  }

  /* Tables: compact mobile padding, smaller caption text */
  .data-table-wrap { margin: var(--space-5) calc(var(--space-4) * -1); border-radius: 0; }
  .data-table { font-size: 0.78rem; min-width: 360px; }
  .data-table caption { padding: var(--space-3) var(--space-4); }
  .data-table thead th { padding: var(--space-2) var(--space-3); }
  .data-table tbody td { padding: var(--space-2) var(--space-3); }

  /* Bar chart: stack label + bar vertically */
  .bar-chart { padding: var(--space-4); }
  .bar-chart__row {
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
  }
  .bar-chart__row .label { grid-column: 1 / 2; }
  .bar-chart__row .num   { grid-column: 2 / 3; }
  .bar-chart__row .track { grid-column: 1 / 3; }
}

@media (max-width: 380px) {
  .hero--water__brand-img { width: min(82vw, 280px); }
  .hero--water__slogan    { font-size: 0.78rem; }
}

/* ============================================================================
   THEMATIC TABLES, FIGURES, CHARTS — Iteration A.5
   Reusable building blocks for technology / case / spec tables.
   ============================================================================ */

.data-table-wrap {
  overflow-x: auto;
  margin: var(--space-6) 0;
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
  background: rgba(255, 255, 255, 0.02);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--fs-75);
  color: var(--text-1);
  min-width: 480px;
}

.data-table caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border-1);
}

.data-table thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-50);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-2);
  border-bottom: 1px solid var(--border-2);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}

.data-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-1);
  vertical-align: top;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

.data-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.data-table .badge {
  display: inline-block;
  font-size: var(--fs-50);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(154, 200, 228, 0.15);
  color: #9ac8e4;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
}

.data-table .badge--ok    { background: rgba(75,112,81,0.20);  color: #88c992; }
.data-table .badge--plan  { background: rgba(138,122,46,0.20); color: #d9c46c; }
.data-table .badge--flag  { background: rgba(122,55,72,0.20);  color: #e09aa9; }

/* ---------- Themed image figure ---------- */

.theme-figure {
  margin: var(--space-6) 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border-1);
  background: var(--surface-1);
}

.theme-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.theme-figure figcaption {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-75);
  color: var(--text-3);
  border-top: 1px solid var(--border-1);
}

.theme-figure figcaption strong {
  color: var(--text-1);
  font-weight: var(--fw-semibold);
}

.theme-figure--svg {
  background: var(--surface-1);
  padding: var(--space-5);
}

.theme-figure__svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Card Stack — 3D fan carousel
   ============================================================ */
.card-stack {
  width: 100%;
  margin: var(--space-6) 0 var(--space-7);
}

.card-stack__stage {
  position: relative;
  width: 100%;
  height: 460px;
  perspective: 1100px;
  outline: none;
}

.card-stack__stage:focus-visible {
  outline: 2px solid var(--brand-light);
  outline-offset: 8px;
  border-radius: 12px;
}

.card-stack__cards {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.card-stack__card {
  --card-w: 520px;
  --card-h: 320px;
  position: absolute;
  bottom: 24px;
  left: 50%;
  width: var(--card-w);
  height: var(--card-h);
  margin-left: calc(var(--card-w) / -2);
  border-radius: 18px;
  border: 4px solid rgba(255, 255, 255, 0.10);
  background: var(--surface-2);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  will-change: transform, opacity;
  transition: transform 380ms cubic-bezier(0.34, 1.0, 0.36, 1),
              opacity 240ms ease;
  transform-style: preserve-3d;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

:root[data-theme="light"] .card-stack__card {
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .card-stack__card {
    border-color: rgba(0, 0, 0, 0.10);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
  }
}

.card-stack__card.is-active {
  cursor: grab;
}
.card-stack__card.is-active:active {
  cursor: grabbing;
}

.card-stack__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}

/* Portrait product render — keep whole image visible, no crop */
.card-stack__image--contain {
  object-fit: contain;
  object-position: center;
  padding: var(--space-3);
}
.card-stack__card--product {
  background: linear-gradient(180deg, #0e151f 0%, #06090e 100%);
}
:root[data-theme="light"] .card-stack__card--product {
  background: linear-gradient(180deg, #e8edf3 0%, #c9d3e0 100%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .card-stack__card--product {
    background: linear-gradient(180deg, #e8edf3 0%, #c9d3e0 100%);
  }
}

/* Empty placeholder card (no image, no text) */
.card-stack__card--empty {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 14px,
      rgba(255, 255, 255, 0.025) 14px,
      rgba(255, 255, 255, 0.025) 15px
    ),
    var(--surface-2);
}
:root[data-theme="light"] .card-stack__card--empty {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 14px,
      rgba(0, 0, 0, 0.04) 14px,
      rgba(0, 0, 0, 0.04) 15px
    ),
    var(--surface-2);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .card-stack__card--empty {
    background:
      repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 14px,
        rgba(0, 0, 0, 0.04) 14px,
        rgba(0, 0, 0, 0.04) 15px
      ),
      var(--surface-2);
  }
}

.card-stack__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.75) 100%);
  pointer-events: none;
}

.card-stack__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
  z-index: 2;
  color: #fff;
}

.card-stack__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.card-stack__desc {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-90);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-stack__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.card-stack__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-1);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.card-stack__dot:hover:not(.is-active) {
  background: var(--text-3);
}

.card-stack__dot.is-active {
  background: var(--text-1);
  transform: scale(1.2);
}

.card-stack__dot:focus-visible {
  outline: 2px solid var(--brand-light);
  outline-offset: 3px;
}

@media (max-width: 880px) {
  .card-stack__stage {
    height: 420px;
  }
  .card-stack__card {
    --card-w: min(82vw, 440px);
    --card-h: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-stack__card {
    transition: none;
  }
}

/* Tiny "+" affordance on the active card to signal "click for more" */
.card-stack__card.is-active::after {
  content: "";
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><path d='M7 2 V 12 M2 7 H 12' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  opacity: 0;
  animation: card-hint-fade 320ms 260ms ease-out forwards;
}
.card-stack__card--empty.is-active::after { display: none; }

@keyframes card-hint-fade {
  to { opacity: 1; }
}

/* ============================================================
   Card detail modal (opens on card click)
   ============================================================ */
.card-modal[hidden] { display: none !important; }

.card-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.card-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: card-modal-bg 220ms ease-out;
  cursor: pointer;
}
@keyframes card-modal-bg {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.card-modal__panel {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  max-height: calc(100vh - var(--space-5) * 2);
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  animation: card-modal-panel 320ms cubic-bezier(0.34, 1.0, 0.36, 1);
}
@keyframes card-modal-panel {
  from { opacity: 0; transform: scale(0.94) translateY(18px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.card-modal__media {
  position: relative;
  background: linear-gradient(180deg, #0e151f, #06090e);
  min-height: 360px;
  padding: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
}
:root[data-theme="light"] .card-modal__media {
  background: linear-gradient(180deg, #eef2f7, #cdd6e1);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .card-modal__media {
    background: linear-gradient(180deg, #eef2f7, #cdd6e1);
  }
}
.card-modal__media picture {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-modal__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.card-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s, transform 0.12s;
  padding: 0;
}
.card-modal__close:hover  { background: rgba(0, 0, 0, 0.78); }
.card-modal__close:active { transform: scale(0.95); }
.card-modal__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.card-modal__body {
  padding: var(--space-7) var(--space-6) var(--space-6);
  overflow-y: auto;
  max-height: calc(100vh - var(--space-5) * 2);
}

.card-detail__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--space-3);
}
.card-detail__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: clamp(var(--fs-300), 4vw, var(--fs-400));
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--text-1);
  line-height: 1.05;
}
.card-detail__lede {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-110);
  line-height: 1.55;
  color: var(--text-2);
}
.card-detail__features {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}
.card-detail__features li {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-1);
  font-family: var(--font-mono);
  font-size: var(--fs-90);
  color: var(--text-2);
}
.card-detail__features li:first-child {
  border-top: 0;
  padding-top: 0;
}
.card-detail__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--text-1);
  color: var(--surface-0);
  text-decoration: none;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-90);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: opacity 0.18s, transform 0.12s;
}
.card-detail__cta:hover  { opacity: 0.88; }
.card-detail__cta:active { transform: scale(0.98); }

@media (max-width: 760px) {
  .card-modal__panel {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 32vh) 1fr;
  }
  .card-modal__media {
    min-height: 0;
  }
  .card-modal__body {
    padding: var(--space-5) var(--space-5);
  }
}

/* ---------- Clarifier comparison (Klassisch vs Speed-o-Clar) ---------- */
.theme-figure--clarifier {
  padding: var(--space-5);
}

.clarifier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.clarifier-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}

.clarifier-panel__label {
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-3);
}

.clarifier-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}

/* Dark mode: invert white → black so the image background blends with the
   page slate, then hue-rotate back to preserve the cyan water tones. */
.clarifier-img {
  filter: invert(1) hue-rotate(180deg);
}

:root[data-theme="light"] .clarifier-img {
  filter: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .clarifier-img {
    filter: none;
  }
}

@media (max-width: 720px) {
  .clarifier-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* ---------- Speed-o-Clar 3D product render (transparent PNG/WebP) ---------- */
.theme-figure--product {
  padding: var(--space-7) var(--space-6) var(--space-5);
  background: transparent;
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  margin: var(--space-6) 0;
}

.theme-figure--product .product-img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 0 auto;
}

.theme-figure--product figcaption {
  padding-top: var(--space-4);
  margin-top: var(--space-5);
  border-top: 1px solid var(--border-1);
  background: transparent;
}


/* ---------- Speed-o-Clar rising from water (GIF) ---------- */
.theme-figure--water {
  padding: 0;
  margin: var(--space-6) 0;
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0a0e14;
}

.theme-figure--water .water-gif,
.theme-figure--water .water-video {
  display: block;
  width: 100%;
  height: auto;
}

.theme-figure--water figcaption {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-1);
  background: var(--surface-1);
}

/* Light mode: soften the dark frame edge so it blends with the page */
:root[data-theme="light"] .theme-figure--water {
  background: #0a0e14;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-figure--water {
    background: #0a0e14;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  }
}

/* ---------- Pure-CSS / inline-SVG bar chart ---------- */

.bar-chart {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
}

.bar-chart__title {
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--space-4) 0;
}

.bar-chart__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bar-chart__row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 4fr auto;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-75);
}

.bar-chart__row .label {
  color: var(--text-2);
}

.bar-chart__row .track {
  position: relative;
  height: 10px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.bar-chart__row .fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  background: linear-gradient(90deg, #60aed5 0%, #9ac8e4 100%);
  border-radius: var(--r-pill);
  transition: width 600ms var(--ease-out);
}

.bar-chart__row .fill--ok   { background: linear-gradient(90deg, #4b7051 0%, #88c992 100%); }
.bar-chart__row .fill--flag { background: linear-gradient(90deg, #7a3748 0%, #c87a8a 100%); }

/* Bar-fill width classes (linear scale, value/168 h) — used in Technologie chart */
.bar-fill-3   { width: 1.8%;  min-width: 8px; }
.bar-fill-7   { width: 4.2%;  min-width: 8px; }
.bar-fill-168 { width: 100%; }

.proto-note--mt { margin-top: var(--space-3); }

/* ============================================================================
   THEME TOGGLE — sun/moon icon in header
   Default state = auto (follow OS). Click → explicit light/dark, persisted.
   ============================================================================ */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-1);
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  padding: 0;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--surface-1);
  border-color: var(--border-2);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-light);
}

.theme-toggle__icon {
  width: 18px;
  height: 18px;
  display: block;
}

/* Show only the relevant icon: moon when in dark, sun when in light */
.theme-toggle__icon--sun  { display: none; }
.theme-toggle__icon--moon { display: block; }

:root[data-theme="light"] .theme-toggle__icon--sun  { display: block; }
:root[data-theme="light"] .theme-toggle__icon--moon { display: none; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle__icon--sun  { display: block; }
  :root:not([data-theme="dark"]) .theme-toggle__icon--moon { display: none; }
}

/* Bar-fill percentage utility classes (Referenzen growth chart) */
.bar-fill-pct-8   { width: 8%; }
.bar-fill-pct-25  { width: 25%; }
.bar-fill-pct-45  { width: 45%; }
.bar-fill-pct-65  { width: 65%; }
.bar-fill-pct-82  { width: 82%; }
.bar-fill-pct-100 { width: 100%; }

/* ============================================================================
   BOOKING / TERMIN-KALENDER — Iteration A.5
   Calendar + time-slot picker. Mailto on submit.
   ============================================================================ */

.booking {
  margin: var(--space-7) 0;
  padding: var(--space-6);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.booking__heading {
  margin: var(--space-2) 0 var(--space-3) 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
}

.booking__lede {
  color: var(--text-2);
  margin: 0 0 var(--space-6) 0;
  max-width: 56ch;
}

.booking__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-6);
}

.booking__pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.booking__cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.booking__cal-title {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-125);
  color: var(--text-1);
  text-transform: capitalize;
}

.booking__nav {
  appearance: none;
  background: rgba(255,255,255,0.04);
  color: var(--text-1);
  border: 1px solid var(--border-1);
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.booking__nav:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--border-2);
}
.booking__nav:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-light);
}

.booking__weekdays,
.booking__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.booking__weekdays {
  margin-top: var(--space-2);
}

.booking__weekdays span {
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  padding: var(--space-2) 0;
}

.booking__day {
  appearance: none;
  background: rgba(255,255,255,0.025);
  border: 1px solid transparent;
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-sm);
  padding: var(--space-3) 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  min-height: 44px;
}
.booking__day:hover:not(:disabled) {
  background: rgba(154, 200, 228, 0.12);
  border-color: rgba(154, 200, 228, 0.4);
}
.booking__day.is-selected {
  background: #9ac8e4;
  color: #15191f;
  border-color: #9ac8e4;
  font-weight: var(--fw-semibold);
}
.booking__day:disabled,
.booking__day.is-out,
.booking__day.is-weekend {
  color: var(--text-disabled);
  background: transparent;
  cursor: not-allowed;
}
.booking__day.is-empty {
  background: transparent;
  pointer-events: none;
}
.booking__day:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-light);
}

.booking__time-head {
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-1);
}

.booking__times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.booking__slot {
  appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-1);
  color: var(--text-1);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-75);
  padding: var(--space-2) 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  min-height: 40px;
}
.booking__slot:hover {
  background: rgba(154, 200, 228, 0.12);
  border-color: rgba(154, 200, 228, 0.5);
}
.booking__slot.is-selected {
  background: #9ac8e4;
  color: #15191f;
  border-color: #9ac8e4;
  font-weight: var(--fw-semibold);
}
.booking__slot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-light);
}

.booking__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-1);
}

.booking__summary {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

.booking__footer .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.booking__note {
  margin: var(--space-4) 0 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  color: var(--text-3);
}

@media (max-width: 720px) {
  .booking {
    padding: var(--space-4);
  }
  .booking__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .booking__day { padding: var(--space-2) 0; font-size: var(--fs-75); }
  .booking__times { max-height: 240px; }
  .booking__footer { flex-direction: column; align-items: stretch; }
  .booking__footer .btn { width: 100%; }
}

.bar-chart__row .num {
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  font-weight: var(--fw-semibold);
}

.bar-chart__note {
  margin: var(--space-4) 0 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  color: var(--text-3);
}

/* ============================================================================
   ARCHITEKTUR-SEITE — Iteration A.8
   New section primitives: .layers-stack, .tagline-cross, .ticker,
   .capabilities-grid, .compliance-grid, .pipeline-grid
   ============================================================================ */

.layers-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.layer-row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) 3fr;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-1) 85%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: border-color var(--dur-base) var(--ease-out);
}

.layer-row:hover { border-color: var(--border-2); }

.layer-row__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.layer-row__lvl {
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  color: var(--text-3);
}
.layer-row__lvl::before { content: "— "; }

.layer-row__title {
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-1);
  line-height: var(--lh-tight);
  margin: 0;
}

.layer-row__desc {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-75);
  line-height: var(--lh-base);
  margin: 0;
}

.layer-row__desc strong { color: var(--text-1); font-weight: var(--fw-semibold); }

@media (max-width: 720px) {
  .layer-row { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4); }
}

/* ---------- Tagline cross ---------- */
.tagline-cross {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-9) var(--space-5);
  text-align: center;
}

.tagline-cross__phrase {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 4.5vw, 3.5rem);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.tagline-cross__phrase em {
  color: var(--text-3);
  font-style: normal;
  font-weight: var(--fw-regular);
}

.tagline-cross__phrase--left  { text-align: right; }
.tagline-cross__phrase--right { text-align: left;  }

.tagline-cross__burst {
  width: clamp(120px, 18vw, 240px);
  height: clamp(120px, 18vw, 240px);
  display: block;
  flex-shrink: 0;
  color: var(--brand-light);
}

@media (max-width: 720px) {
  .tagline-cross { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-7) var(--space-4); }
  .tagline-cross__phrase--left,
  .tagline-cross__phrase--right { text-align: center; }
  .tagline-cross__burst { margin: 0 auto; }
}

/* ---------- Ticker ---------- */
.ticker {
  overflow: hidden;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  padding: var(--space-3) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-3);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.ticker__inner {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: ticker-scroll 90s linear infinite;
}

.ticker__inner > span { margin-right: var(--space-5); }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__inner { animation: none; padding-left: 0; }
}

/* ---------- Compliance grid (4 cards) ---------- */
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.compliance-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
}

.compliance-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-3);
}

.compliance-card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-150);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--text-1);
  margin: 0;
}

.compliance-card__text {
  font-family: var(--font-mono);
  font-size: var(--fs-75);
  line-height: var(--lh-base);
  color: var(--text-2);
  margin: 0;
}

@media (max-width: 980px) { .compliance-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .compliance-grid { grid-template-columns: 1fr; } }

/* ---------- Capabilities (asymmetric 2-col) ---------- */
.capabilities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

.capability-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.capability-card:hover { border-color: var(--border-2); transform: translateY(-2px); }

.capability-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-3);
}

.capability-card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--text-1);
  margin: 0;
}

.capability-card__text {
  font-family: var(--font-mono);
  font-size: var(--fs-75);
  line-height: var(--lh-base);
  color: var(--text-2);
  margin: 0;
}

.capability-card--featured  { grid-row: span 2; min-height: 280px; }
.capability-card--featured .capability-card__title { font-size: var(--fs-300); }
.capability-card--wide      { grid-column: span 2; }

@media (max-width: 720px) {
  .capabilities-grid { grid-template-columns: 1fr; }
  .capability-card--featured { grid-row: auto; min-height: 0; }
  .capability-card--wide     { grid-column: auto; }
}

/* ---------- Pipeline as 3×2 step grid ---------- */
.pipeline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* .pipeline-grid > .card surface intentionally NOT overridden here so the
   Liquid Glass [data-glow] treatment applies uniformly. */

@media (max-width: 980px) { .pipeline-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pipeline-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   LIQUID GLASS — Iteration A.14
   iOS-style frosted glass material for cards across Technologie, Architektur,
   Referenzen, Unternehmen, Kontakt (and home cards for cohesion).
   Applied via spotlight.js → [data-glow] on .card, .stat-card, .layer-row,
   .compliance-card, .capability-card, .pipeline__step, .case-row, etc.

   No ::before/::after chrome here: pipeline steps already use both pseudos
   for step numbers and connectors. Specular rim is pure box-shadow + gradient fill.
   ============================================================================ */

[data-glow] {
  position: relative;
  isolation: isolate;
  border-radius: var(--glass-radius) !important;
  border: 1px solid var(--glass-rim) !important;
  background:
    linear-gradient(
      165deg,
      var(--glass-sheen-top) 0%,
      var(--glass-sheen-mid) 38%,
      rgba(255, 255, 255, 0.02) 100%
    ),
    var(--glass-fill) !important;
  -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)) !important;
  backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)) !important;
  box-shadow:
    inset 0 1px 0 0 var(--glass-inset-top),
    inset 1px 0 0 0 var(--glass-inset-side),
    inset 0 -1px 0 0 var(--glass-inset-bot),
    inset 0 0 0 0.5px color-mix(in srgb, var(--glass-rim) 70%, transparent),
    var(--glass-shadow) !important;
  transition:
    transform 320ms var(--ease-out),
    box-shadow 320ms var(--ease-out),
    border-color 220ms var(--ease-out),
    background 220ms var(--ease-out) !important;
}

[data-glow]:hover {
  border-color: var(--glass-rim-hover) !important;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--glass-sheen-top) 120%, white) 0%,
      var(--glass-sheen-mid) 42%,
      rgba(255, 255, 255, 0.04) 100%
    ),
    var(--glass-fill-hover) !important;
  box-shadow:
    inset 0 1px 0 0 color-mix(in srgb, var(--glass-inset-top) 110%, white),
    inset 1px 0 0 0 var(--glass-inset-side),
    inset 0 -1px 0 0 var(--glass-inset-bot),
    inset 0 0 0 0.5px color-mix(in srgb, var(--glass-rim-hover) 80%, transparent),
    var(--glass-shadow-hover) !important;
  transform: translateY(-3px);
}

/* Case rows become glass panels (were hairline dividers only) */
[data-glow].case-row {
  padding: var(--space-6) !important;
  margin: var(--space-4) 0;
  border-top: 1px solid var(--glass-rim) !important;
  gap: var(--space-5);
}

[data-glow].case-row:hover {
  transform: translateY(-2px);
}

/* Nested metrics box: quieter glass, no double lift */
.case-row__metrics {
  border-radius: calc(var(--glass-radius) - 6px);
  border: 1px solid color-mix(in srgb, var(--glass-rim) 70%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--glass-sheen-top) 55%, transparent) 0%,
      transparent 70%
    ),
    color-mix(in srgb, var(--surface-1) 30%, transparent) !important;
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--glass-inset-top) 70%, transparent);
}

/* Forms / booking / tables tagged by spotlight — same material, less lift */
[data-glow].booking,
[data-glow].data-table-wrap,
[data-glow].bar-chart,
[data-glow].theme-figure {
  transform: none;
}

[data-glow].booking:hover,
[data-glow].data-table-wrap:hover,
[data-glow].bar-chart:hover,
[data-glow].theme-figure:hover {
  transform: none;
}

/* Value cards on Unternehmen — padding only; surface from [data-glow] */
.value-card {
  padding: var(--space-5);
}

/* Card-stack = product media carousel.
   Do NOT apply liquid-glass blur here — backdrop-filter frosts the product
   render and makes COREX/VECTRA unreadable (regression A.14).
   Keep only a thin specular rim + depth shadow; image stays crisp. */
.card-stack__card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 20px !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.22),
    0 18px 48px rgba(0, 0, 0, 0.28) !important;
}

:root[data-theme="light"] .card-stack__card,
:root:not([data-theme="dark"]) .card-stack__card {
  border-color: rgba(48, 57, 64, 0.12) !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.85),
    0 16px 40px rgba(21, 25, 31, 0.14) !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .card-stack__card {
    border-color: rgba(48, 57, 64, 0.12) !important;
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.85),
      0 16px 40px rgba(21, 25, 31, 0.14) !important;
  }
}

/* Content label: gradient scrim only — no blur over the product image */
.card-stack__content {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 42%,
    rgba(10, 14, 20, 0.55) 72%,
    rgba(10, 14, 20, 0.82) 100%
  ) !important;
}

:root[data-theme="light"] .card-stack__content {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 42%,
    rgba(255, 255, 255, 0.55) 72%,
    rgba(255, 255, 255, 0.88) 100%
  ) !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .card-stack__content {
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 42%,
      rgba(255, 255, 255, 0.55) 72%,
      rgba(255, 255, 255, 0.88) 100%
    ) !important;
  }
  :root:not([data-theme="dark"]) .card-stack__title {
    color: var(--text-1);
    text-shadow: none;
  }
  :root:not([data-theme="dark"]) .card-stack__desc {
    color: var(--text-2);
  }
}

/* Active "+" hint keeps original small pill (defined earlier).
   Do not restyle ::after here — that would wipe the expand affordance. */

/* Gradient overlay stays subtle so product art remains legible */
.card-stack__gradient {
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

:root[data-theme="light"] .card-stack__gradient {
  background: linear-gradient(
    180deg,
    transparent 45%,
    rgba(255, 255, 255, 0.35) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  [data-glow],
  [data-glow]:hover {
    transition: none !important;
    transform: none !important;
  }
}

/* Fallback when backdrop-filter is unavailable — still look glassy via sheen */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-glow] {
    background:
      linear-gradient(
        165deg,
        var(--glass-sheen-top) 0%,
        var(--glass-sheen-mid) 40%,
        transparent 100%
      ),
      color-mix(in srgb, var(--surface-1) 88%, transparent) !important;
  }
}

/* ============================================================================
   INTERACTIVE GLOBE — Iteration A.13
   D3-orthographic SVG globe. Drag to rotate. Highlighted countries fill in
   brand turquoise. Theme-adaptive via CSS variables on stroke/fill.
   ============================================================================ */

.globe {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-5) 0;
  position: relative;       /* anchor for tooltip / back button overlays */
}

.globe.globe--interactive {
  max-width: 1100px;
}

.globe.globe--zoomed.globe--interactive,
.globe.globe--zooming.globe--interactive {
  max-width: min(1180px, 100%);
}

.globe > svg {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-select: none;
  user-select: none;
}

.globe__sphere {
  fill: rgba(255, 255, 255, 0.025);
  stroke: none;
}

.globe__graticule {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 0.5;
}

.globe__country {
  fill: rgba(255, 255, 255, 0.10);
  stroke: rgba(255, 255, 255, 0.20);
  stroke-width: 0.4;
  transition: fill 200ms var(--ease-out);
}

.globe__country--active {
  fill: #9ac8e4;          /* brand turquoise */
  stroke: #c8e0ec;
  stroke-width: 0.6;
}

.globe__outline {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
  pointer-events: none;
}

.globe__caption {
  margin: var(--space-3) auto 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-3);
}

/* Light theme: invert alpha — dark line work on light sphere */
:root[data-theme="light"] .globe__sphere {
  fill: rgba(0, 0, 0, 0.025);
}
:root[data-theme="light"] .globe__graticule {
  stroke: rgba(0, 0, 0, 0.10);
}
:root[data-theme="light"] .globe__country {
  fill: rgba(0, 0, 0, 0.08);
  stroke: rgba(0, 0, 0, 0.18);
}
:root[data-theme="light"] .globe__country--active {
  fill: #2c7fa6;
  stroke: #1a4e6a;
}
:root[data-theme="light"] .globe__outline {
  stroke: rgba(0, 0, 0, 0.22);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .globe__sphere       { fill:   rgba(0, 0, 0, 0.025); }
  :root:not([data-theme="dark"]) .globe__graticule    { stroke: rgba(0, 0, 0, 0.10); }
  :root:not([data-theme="dark"]) .globe__country      { fill:   rgba(0, 0, 0, 0.08); stroke: rgba(0, 0, 0, 0.18); }
  :root:not([data-theme="dark"]) .globe__country--active { fill: #2c7fa6; stroke: #1a4e6a; }
  :root:not([data-theme="dark"]) .globe__outline      { stroke: rgba(0, 0, 0, 0.22); }
}

@media (prefers-reduced-motion: reduce) {
  .globe__country { transition: none; }
  .globe__marker-pulse { animation: none; }
}

/* ----- Installation markers (visible after click-zoom into a country) ----- */
.globe__marker {
  fill: #9ac8e4;
  stroke: #ffffff;
  stroke-width: 1.5;
  cursor: pointer;
  transition: fill 180ms var(--ease-out);
}
.globe__marker:hover {
  fill: #ffffff;
  stroke: #9ac8e4;
}

.globe__marker-pulse {
  fill: none;
  stroke: #9ac8e4;
  stroke-width: 1.5;
  opacity: 0.55;
  pointer-events: none;
  animation: globe-pulse 2.2s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes globe-pulse {
  0%   { r: 6;  opacity: 0.65; stroke-width: 1.8; }
  100% { r: 28; opacity: 0;    stroke-width: 0.4; }
}

:root[data-theme="light"] .globe__marker       { fill: #2c7fa6; stroke: #ffffff; }
:root[data-theme="light"] .globe__marker:hover { fill: #1a4e6a; stroke: #ffffff; }
:root[data-theme="light"] .globe__marker-pulse { stroke: #2c7fa6; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .globe__marker       { fill: #2c7fa6; stroke: #ffffff; }
  :root:not([data-theme="dark"]) .globe__marker:hover { fill: #1a4e6a; stroke: #ffffff; }
  :root:not([data-theme="dark"]) .globe__marker-pulse { stroke: #2c7fa6; }
}

/* ----- Tooltip on marker click ----- */
.globe__tooltip {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -160%);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-75);
  color: var(--text-1);
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
  box-shadow: var(--shadow-2);
}
.globe__tooltip[hidden] {
  display: none;
}
.globe__tooltip strong {
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
}

/* ----- Back button (visible only while zoomed) ----- */
.globe__back {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 6;
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  color: var(--text-1);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out),
              border-color 180ms var(--ease-out);
}
.globe--zoomed .globe__back {
  opacity: 1;
  pointer-events: auto;
}
.globe__back:hover {
  border-color: var(--border-2);
}
.globe__back:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-light);
}

/* ----- Interactive layout: stage + detail panel ----- */
.globe--interactive {
  max-width: 1100px;
  width: 100%;
  margin-inline: auto;
  transition: max-width 420ms var(--ease-out);
}

/* Nearly full-page when a country is zoomed */
.globe--zoomed.globe--interactive,
.globe--zooming.globe--interactive {
  max-width: min(1180px, 100%);
}

.globe__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: var(--space-5);
  align-items: stretch;
  transition: grid-template-columns 420ms var(--ease-out);
}

.globe--zoomed .globe__layout,
.globe--zooming .globe__layout {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.7fr);
}

.globe__stage {
  position: relative;
  min-height: 0;
  border-radius: var(--glass-radius, 22px);
  overflow: hidden;
}

.globe__stage .globe__svg,
.globe__stage svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  transition: max-height 420ms var(--ease-out);
}

.globe--zoomed .globe__stage .globe__svg,
.globe--zoomed .globe__stage svg,
.globe--zooming .globe__stage .globe__svg,
.globe--zooming .globe__stage svg {
  max-height: min(86vh, 920px);
}

/* Countries with installations — clearly clickable */
.globe__country--has-sites {
  fill: #6eb3d4 !important;
  stroke: #d7eef8 !important;
  stroke-width: 1.1 !important;
  cursor: pointer;
  transition: fill 200ms var(--ease-out), stroke 200ms var(--ease-out), opacity 200ms var(--ease-out);
}

.globe__country--has-sites:hover,
.globe__country--has-sites:focus-visible {
  fill: #9ac8e4 !important;
  stroke: #ffffff !important;
  outline: none;
}

.globe__country--has-sites.is-focused {
  fill: #b7daf0 !important;
  stroke: #ffffff !important;
  stroke-width: 1.4 !important;
}

/* Soft market tint (not clickable for zoom) */
.globe__country--market {
  fill: rgba(154, 200, 228, 0.22);
  stroke: rgba(200, 224, 236, 0.35);
  stroke-width: 0.5;
  pointer-events: none;
}

:root[data-theme="light"] .globe__country--has-sites {
  fill: #2c7fa6 !important;
  stroke: #0f3d55 !important;
}
:root[data-theme="light"] .globe__country--has-sites:hover,
:root[data-theme="light"] .globe__country--has-sites.is-focused {
  fill: #1f6a8f !important;
  stroke: #0a2a3c !important;
}
:root[data-theme="light"] .globe__country--market {
  fill: rgba(44, 127, 166, 0.18);
  stroke: rgba(26, 78, 106, 0.25);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .globe__country--has-sites {
    fill: #2c7fa6 !important;
    stroke: #0f3d55 !important;
  }
  :root:not([data-theme="dark"]) .globe__country--has-sites:hover,
  :root:not([data-theme="dark"]) .globe__country--has-sites.is-focused {
    fill: #1f6a8f !important;
    stroke: #0a2a3c !important;
  }
  :root:not([data-theme="dark"]) .globe__country--market {
    fill: rgba(44, 127, 166, 0.18);
    stroke: rgba(26, 78, 106, 0.25);
  }
}

.globe__marker-g.is-active .globe__marker {
  fill: #ffffff;
  stroke: #9ac8e4;
  stroke-width: 2.2;
}

.globe__marker-g.is-active .globe__marker-pulse {
  opacity: 0.95;
  stroke: #ffffff;
}

/* Solid, readable markers (not hollow rings only) */
.globe__marker {
  fill: #e8f4fa;
  stroke: #1a3a4a;
  stroke-width: 1.6;
  cursor: pointer;
  transition: fill 180ms var(--ease-out), stroke 180ms var(--ease-out);
}
.globe__marker:hover {
  fill: #ffffff;
  stroke: #9ac8e4;
}

.globe__marker-pulse {
  fill: rgba(154, 200, 228, 0.18);
  stroke: #9ac8e4;
  stroke-width: 1.4;
  opacity: 0.7;
  pointer-events: none;
  animation: globe-pulse 2.2s ease-out infinite;
}

:root[data-theme="light"] .globe__marker {
  fill: #0f3d55;
  stroke: #ffffff;
  stroke-width: 1.8;
}
:root[data-theme="light"] .globe__marker:hover {
  fill: #1a4e6a;
}
:root[data-theme="light"] .globe__marker-pulse {
  fill: rgba(44, 127, 166, 0.15);
  stroke: #2c7fa6;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .globe__marker {
    fill: #0f3d55;
    stroke: #ffffff;
    stroke-width: 1.8;
  }
  :root:not([data-theme="dark"]) .globe__marker:hover { fill: #1a4e6a; }
  :root:not([data-theme="dark"]) .globe__marker-pulse {
    fill: rgba(44, 127, 166, 0.15);
    stroke: #2c7fa6;
  }
}

.globe-panel {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  max-height: min(86vh, 920px);
  padding: var(--space-5);
  border-radius: var(--glass-radius, 22px);
  border: 1px solid var(--glass-rim, rgba(255, 255, 255, 0.16));
  background:
    linear-gradient(
      165deg,
      var(--glass-sheen-top, rgba(255, 255, 255, 0.16)) 0%,
      var(--glass-sheen-mid, rgba(255, 255, 255, 0.05)) 40%,
      rgba(255, 255, 255, 0.02) 100%
    ),
    var(--glass-fill, color-mix(in srgb, var(--surface-1) 40%, transparent));
  -webkit-backdrop-filter: saturate(var(--glass-sat, 180%)) blur(var(--glass-blur, 24px));
  backdrop-filter: saturate(var(--glass-sat, 180%)) blur(var(--glass-blur, 24px));
  box-shadow:
    inset 0 1px 0 0 var(--glass-inset-top, rgba(255, 255, 255, 0.28)),
    var(--glass-shadow, 0 12px 36px rgba(0, 0, 0, 0.22));
  overflow: hidden;
}

.globe--zoomed .globe-panel,
.globe--zooming .globe-panel {
  max-height: min(86vh, 920px);
}

.globe-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}

.globe-panel__count {
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-3);
}

.globe-panel__close {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-1);
  background: color-mix(in srgb, var(--surface-1) 40%, transparent);
  color: var(--text-2);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.globe-panel__close:hover {
  border-color: var(--border-2);
  color: var(--text-1);
}

.globe-panel__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.globe-panel__empty {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-75);
  line-height: var(--lh-base);
  color: var(--text-2);
}

.globe-panel__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: #9ac8e4;
  margin-bottom: var(--space-2);
}

.globe-panel__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-1);
  line-height: var(--lh-tight);
}

.globe-panel__sub {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-75);
  color: var(--text-3);
}

.globe-panel__hint {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
}

.globe-panel__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}

.globe-panel__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-75);
  border-top: 1px solid var(--border-1);
  padding-top: var(--space-3);
}

.globe-panel__row dt {
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-50);
}

.globe-panel__row dd {
  margin: 0;
  color: var(--text-1);
  font-weight: var(--fw-semibold);
  text-align: right;
}

.globe-panel__list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.globe-panel__site-btn {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
  background: color-mix(in srgb, var(--surface-1) 35%, transparent);
  color: var(--text-1);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.globe-panel__site-btn:hover {
  border-color: var(--border-2);
  background: color-mix(in srgb, var(--surface-2) 40%, transparent);
  transform: translateY(-1px);
}

.globe-panel__site-name {
  font-family: var(--font-sans);
  font-size: var(--fs-75);
  font-weight: var(--fw-semibold);
}

.globe-panel__site-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  letter-spacing: var(--tracking-wide);
  color: var(--text-3);
  text-transform: uppercase;
}

.globe-panel__approx {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  line-height: var(--lh-base);
  color: var(--text-3);
  letter-spacing: var(--tracking-wide);
}

@media (max-width: 860px) {
  .globe__layout,
  .globe--zoomed .globe__layout,
  .globe--zooming .globe__layout {
    grid-template-columns: 1fr;
  }
  .globe-panel {
    min-height: 0;
    max-height: none;
  }
  .globe--zoomed .globe__stage .globe__svg,
  .globe--zoomed .globe__stage svg,
  .globe--zooming .globe__stage .globe__svg,
  .globe--zooming .globe__stage svg {
    max-height: min(70vh, 640px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .globe__marker-pulse { animation: none !important; }
  .globe--interactive,
  .globe__layout,
  .globe__stage .globe__svg,
  .globe__stage svg {
    transition: none !important;
  }
}

/* ===========================================================================
   GLOBE DIRECTORY — list under globe, two-way sync with pins
   =========================================================================== */

.globe-dir {
  margin: var(--space-7) auto 0;
  max-width: min(960px, 100%);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-radius: var(--glass-radius, 22px);
  border: 1px solid var(--border-1);
  background: color-mix(in srgb, var(--surface-1) 42%, transparent);
}

.globe-dir__head {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (min-width: 720px) {
  .globe-dir__head {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 1.1fr);
    align-items: end;
  }
}

.globe-dir__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--space-2);
}

.globe-dir__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  letter-spacing: -0.02em;
}

.globe-dir__hint {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-75);
  color: var(--text-3);
  max-width: 42ch;
}

.globe-dir__tools {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.globe-dir__search-wrap { display: block; }

.globe-dir__search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: var(--fs-75);
}

.globe-dir__search:focus {
  outline: 2px solid color-mix(in srgb, var(--brand-light) 55%, transparent);
  outline-offset: 2px;
}

.globe-dir__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.globe-dir__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border-1);
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), color 160ms var(--ease-out);
}

.globe-dir__chip:hover {
  border-color: var(--border-2);
  color: var(--text-1);
}

.globe-dir__chip.is-active {
  border-color: color-mix(in srgb, #4aa3c7 55%, var(--border-2));
  background: color-mix(in srgb, #4aa3c7 16%, transparent);
  color: var(--text-1);
}

.globe-dir__chip-n {
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

.globe-dir__status {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
}

.globe-dir__scroll {
  max-height: min(420px, 55vh);
  overflow: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
  background: color-mix(in srgb, var(--surface-2) 28%, transparent);
}

.globe-dir__list {
  list-style: none;
  margin: 0;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.globe-dir__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  text-align: left;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-radius: calc(var(--r-md) - 2px);
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
  transition: background 140ms var(--ease-out);
}

.globe-dir__btn:hover {
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}

.globe-dir__item.is-active .globe-dir__btn {
  background: color-mix(in srgb, #4aa3c7 18%, transparent);
}

.globe-dir__item.is-active .globe-dir__dot {
  background: #4aa3c7;
  box-shadow: 0 0 0 4px color-mix(in srgb, #4aa3c7 28%, transparent);
}

.globe-dir__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, #4aa3c7 70%, var(--text-3));
}

.globe-dir__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.globe-dir__name {
  font-family: var(--font-sans);
  font-size: var(--fs-75);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.globe-dir__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.globe-dir__product {
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
}

.globe-panel__site-btn.is-active {
  border-color: color-mix(in srgb, #4aa3c7 55%, var(--border-2));
  background: color-mix(in srgb, #4aa3c7 16%, transparent);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:root[data-theme="light"] .globe-dir {
  background: color-mix(in srgb, #ffffff 72%, transparent);
}

:root[data-theme="light"] .globe-dir__item.is-active .globe-dir__btn {
  background: color-mix(in srgb, #2c7fa6 12%, #ffffff);
}

@media (prefers-reduced-motion: reduce) {
  .globe-dir__chip,
  .globe-dir__btn {
    transition: none !important;
  }
}

/* ===========================================================================
   TECH PAIR — two-product logic strip under card stack
   =========================================================================== */

.card-stack--duo {
  margin-bottom: var(--space-6);
}

.card-stack--duo .card-stack__stage {
  height: 440px;
}

@media (max-width: 720px) {
  .card-stack--duo .card-stack__stage {
    height: 400px;
  }
}

.tech-pair {
  margin: 0 auto var(--space-8);
  max-width: var(--container-narrow);
}

.tech-pair__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.tech-pair__item {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--glass-radius, 22px);
  border: 1px solid var(--glass-rim, rgba(255,255,255,0.16));
  background:
    linear-gradient(
      165deg,
      var(--glass-sheen-top, rgba(255,255,255,0.18)) 0%,
      var(--glass-sheen-mid, rgba(255,255,255,0.05)) 40%,
      rgba(255,255,255,0.02) 100%
    ),
    var(--glass-fill, color-mix(in srgb, var(--surface-1) 40%, transparent));
  -webkit-backdrop-filter: saturate(var(--glass-sat, 180%)) blur(var(--glass-blur, 28px));
  backdrop-filter: saturate(var(--glass-sat, 180%)) blur(var(--glass-blur, 28px));
  box-shadow:
    inset 0 1px 0 0 var(--glass-inset-top, rgba(255,255,255,0.3)),
    var(--glass-shadow, 0 12px 36px rgba(0,0,0,0.2));
  transition: transform 320ms var(--ease-out), border-color 220ms var(--ease-out);
}

.tech-pair__item:hover {
  transform: translateY(-2px);
  border-color: var(--glass-rim-hover, rgba(255,255,255,0.3));
}

.tech-pair__code {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  color: var(--text-3);
  margin-bottom: var(--space-3);
}

.tech-pair__title {
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-1);
  margin: 0 0 var(--space-3);
  line-height: var(--lh-tight);
}

.tech-pair__text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-75);
  line-height: var(--lh-base);
  color: var(--text-2);
}

.tech-pair__note {
  margin: var(--space-5) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  line-height: var(--lh-base);
}

@media (max-width: 640px) {
  .tech-pair__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tech-pair__item,
  .tech-pair__item:hover {
    transition: none;
    transform: none;
  }
}