/* ============================================================================
   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);
}

.btn--on-dark {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-inverse);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.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-mono);
  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-mono);
  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;
}

.morph-panel__orb {
  --orb-base: #2a323a;
  --orb-a1: #60aed5;
  --orb-a2: #83f36e;
  --orb-a3: #4b7051;

  width: 22px;
  height: 22px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
}

.morph-panel__orb::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background:
    conic-gradient(from calc(var(--orb-angle) * 2)  at 25% 70%, var(--orb-a3), transparent 20% 80%, var(--orb-a3)),
    conic-gradient(from calc(var(--orb-angle) * -3) at 80% 20%, var(--orb-a1), transparent 40% 60%, var(--orb-a1)),
    conic-gradient(from calc(var(--orb-angle))      at 45% 75%, var(--orb-a2), transparent 30% 60%, var(--orb-a2)),
    var(--orb-base);
  filter: blur(2px) contrast(1.4);
  animation: orb-spin 16s linear infinite;
}

.morph-panel__orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.18) 0%, transparent 60%);
  pointer-events: none;
}

@keyframes orb-spin {
  to { --orb-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .morph-panel__orb::before { animation: none; }
}

/* Larger 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 {
  /* Theme-adaptive surface — was transparent before, which caused the
     browser canvas default (often dark in Edge) to bleed through and
     made light mode look dark. The hero water canvas is scoped to the
     hero section now, so html doesn't need to be transparent. */
  background: var(--surface-0);
}

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%);
  }
}

/* Translucent panels so the water shimmers behind content while readability
   stays intact. Cards/tables/forms remain opaque (defined in their own rules). */
.section--alt {
  background: color-mix(in srgb, var(--surface-1) 85%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.section--dark {
  background: var(--brand-x-dark);
  /* Always force light text inside the dark CTA band — regardless of theme.
     text-inverse is LIGHT here because the surface is dark; that lets buttons
     using `color: var(--text-inverse)` (btn--on-dark / btn--primary) render
     readable on this band in both themes. */
  --text-1:    #f0f2f5;
  --text-2:    rgba(240, 242, 245, 0.85);
  --text-3:    rgba(240, 242, 245, 0.60);
  --text-inverse: #f0f2f5;
  color: #f0f2f5;
}

.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: #f0f2f5;
}

/* Force a visible primary button on the dark CTA band: inverted color scheme
   regardless of theme. */
.section--dark .btn--primary {
  background: #f0f2f5;
  color: var(--brand-x-dark);
  border-color: #f0f2f5;
}
.section--dark .btn--primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--brand-x-dark);
}

/* Force a visible footer regardless of theme — footer is always dark slate */
.site-footer {
  --text-1: #f0f2f5;
  --text-2: rgba(240, 242, 245, 0.85);
  --text-3: rgba(240, 242, 245, 0.62);
  --text-inverse: #f0f2f5;
  color: #f0f2f5;
}

.site-footer h2,
.site-footer .site-footer__tag,
.site-footer__list a,
.site-footer__meta {
  color: #f0f2f5;
}

.site-footer h2 {
  color: rgba(240, 242, 245, 0.55);  /* dim eyebrow-style heading */
}

.site-footer__list a {
  color: rgba(240, 242, 245, 0.78);
}

.site-footer__list a:hover {
  color: #fff;
}

.site-footer__meta {
  color: rgba(240, 242, 245, 0.55);
}

/* 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);
}

.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 is now slightly lighter (brand-mid via surface-1) */
.section--alt {
  background: var(--surface-1);
}

/* 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;
  justify-content: center;
  min-height: 100vh;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-5);
  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: block;
  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;
}

.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);
  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.78);
  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: water-rise 1.4s var(--ease-out) 0.85s both;
}

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;
}

/* ---------- 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-mono);
  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 {
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

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

/* ============================================================================
   ANIMATED GRADIENT BORDER — Iteration A.11
   Masked ring on top of every "square". The conic-gradient is painted on
   ::before, then a mask-composite trick hides everything except a thin ring
   at the card's border. The card body shows through untouched — works
   regardless of whether the card has an opaque or translucent background.
   ============================================================================ */

@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes vael-gradient-rotate {
  from { --gradient-angle: 0deg;   }
  to   { --gradient-angle: 360deg; }
}

[data-glow] {
  --grad-primary:   #15191f;   /* deep slate baseline */
  --grad-secondary: #3a4452;   /* mid slate */
  --grad-accent:    #9ac8e4;   /* brand turquoise — the bright sweep */
  --grad-speed:     6s;
  --grad-thickness: 2.5px;     /* ring thickness */

  position: relative;
  isolation: isolate;
}

[data-glow]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  padding: var(--grad-thickness);

  background: conic-gradient(
    from var(--gradient-angle, 0deg),
    var(--grad-primary)   0%,
    var(--grad-secondary) 26%,
    var(--grad-accent)    30%,
    var(--grad-secondary) 34%,
    var(--grad-primary)   42%,
    var(--grad-primary)   58%,
    var(--grad-secondary) 76%,
    var(--grad-accent)    80%,
    var(--grad-secondary) 84%,
    var(--grad-primary)   90%
  );

  /* Clip to a hollow ring: two black mask layers, XOR composited, so only
     the band between content-box and border-box is visible (= a ring with
     width equal to the padding). */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  animation: vael-gradient-rotate var(--grad-speed) linear infinite;
}

/* Light theme: lighter primary/secondary so the ring blends with white
   surfaces; keep turquoise accent visible but slightly darker. */
:root[data-theme="light"] [data-glow] {
  --grad-primary:   #c8d0d8;
  --grad-secondary: #8a929a;
  --grad-accent:    #2c7fa6;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) [data-glow] {
    --grad-primary:   #c8d0d8;
    --grad-secondary: #8a929a;
    --grad-accent:    #2c7fa6;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-glow]::before { animation: none; }
}