/* ============================================================
   vyzn website — built on the vyzn Design System v4.0
   Poppins everywhere · navy structure · yellow the one accent
   white-first · warm shadows · lavender = AI speaking
   ============================================================ */

:root {
  /* primary */
  --navy:        #1D3461;
  --navy-deep:   #202453;
  --blue:        #1C4C98;
  --yellow:      #F8B400;
  --yellow-light:#FFCB4F;
  --yellow-bg:   #FFF4E0;
  --warm-cream:  #FFEED2;
  /* trend (KPI improved / worsened) — muted to sit with navy + yellow, not traffic-light */
  --pos:         #1A9A63;
  --neg:         #D2462C;
  /* extended */
  --lavender:    #B4B4D8;
  --lavender-bg: #ECEDFF;
  --purple-bg:   #E8E0F6;
  --taupe:       #AD9C89;
  /* neutrals */
  --white:       #FFFFFF;
  --gray-50:     #FAFAF8;
  --gray-100:    #F3F3F3;
  --gray-200:    #D5D5D5;
  --gray-400:    #999999;
  --gray-500:    #878787;
  --gray-700:    #5E5E5E;
  --gray-900:    #353535;
  --black:       #000000;

  --font: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-hand: 'Caveat', cursive;

  --shadow-sm: 0 1px 3px rgba(29,52,97,0.06);
  --shadow-md: 0 6px 20px -6px rgba(29,52,97,0.12);
  --shadow-lg: 0 24px 60px -24px rgba(29,52,97,0.22);
  --shadow-warm: 0 20px 50px -20px rgba(173,156,137,0.40);
  --shadow-card: 0 2px 14px -6px rgba(173,156,137,0.30);
  --shadow-card-hover: 0 16px 44px -18px rgba(173,156,137,0.46);

  --maxw: 1200px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gray-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--navy); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ── eyebrow / labels ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gray-500); margin: 0 0 28px;
}
.eyebrow::before, .eyebrow::after {
  content: ""; width: 22px; height: 2px; background: var(--yellow); border-radius: 2px; flex: none;
}
.eyebrow.center { justify-content: center; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px;
  border-radius: var(--radius-full); font-family: var(--font); font-size: 15px; font-weight: 600;
  cursor: pointer; border: 1.5px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; white-space: nowrap; }
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover { box-shadow: var(--shadow-lg); }
.btn-accent { background: var(--yellow); color: var(--navy); box-shadow: 0 6px 18px -6px rgba(248,180,0,0.6); }
.btn-accent:hover { background: var(--yellow-light); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--gray-200); }
.btn-outline:hover { border-color: var(--navy); }
.btn-ghost { background: transparent; color: var(--navy); padding: 0 8px; height: auto; }
.btn-ghost:hover { color: var(--blue); transform: none; }
.btn .arr { transition: transform .15s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* ── floating "Get in touch" CTA (mobile) ──
   Mobile-only companion to the header CTA (hidden ≤720px). Deliberately the site's
   canonical yellow pill rather than a generic round FAB. Default state is hidden/offset;
   main.js adds .is-visible once the hero is scrolled past and removes it again near the
   page-bottom CTA band / footer. Shown only inside the ≤720px media query below. */
.floating-cta {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  display: none; align-items: center; gap: 8px; height: 48px; padding: 0 22px;
  border: none; border-radius: var(--radius-full);
  background: var(--yellow); color: var(--navy);
  font-family: var(--font); font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer;
  box-shadow: 0 12px 28px -8px rgba(248,180,0,0.7), 0 2px 8px rgba(29,52,97,0.14);
  opacity: 0; transform: translateY(140%); pointer-events: none;
  transition: opacity .28s ease, transform .32s cubic-bezier(.2,.8,.2,1), background .15s ease;
}
.floating-cta .arr { transition: transform .15s ease; }
.floating-cta.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.floating-cta.is-visible:hover { background: var(--yellow-light); }
.floating-cta.is-visible:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .floating-cta { transition: opacity .2s ease; transform: none; }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid rgba(213,213,213,0.5); }
.header-row { display: flex; align-items: center; justify-content: space-between; height: 82px; }
.brand img { height: 46px; width: auto; display: block; }
.nav-login { font-size: 15px; font-weight: 500; color: var(--gray-700); transition: color .15s ease; white-space: nowrap; }
.nav-login:hover { color: var(--navy); text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 30px; margin: 0 auto; }  /* centered between logo and actions */
.nav-links a { font-size: 15px; font-weight: 500; color: var(--gray-700); transition: color .15s ease; white-space: nowrap; }
.nav-links a:hover, .nav-links a.is-active { color: var(--navy); text-decoration: none; }
/* DMP is a brand word — a navy proper noun with a lavender "AI surface" dot */
.nav-links a.nav-dmp { font-weight: 600; color: var(--navy); letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 7px; }
.nav-links a.nav-dmp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lavender); transition: transform .15s ease, box-shadow .15s ease; }
.nav-links a.nav-dmp:hover::before, .nav-links a.nav-dmp.is-active::before { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(180,180,216,0.28); }
.nav-toggle, .nav-m-login { display: none; }  /* mobile-only — shown in the ≤900px media query */
/* right-hand utility + CTA cluster */
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-sep { width: 1px; height: 22px; background: var(--gray-200); }
.footer-lang .lang-globe { width: 14px; height: 14px; flex: none; color: rgba(255,255,255,0.55); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; padding: 84px 0 104px; }
.hero::before { /* soft warm wash behind hero — kept well inside the hero so the
                   customer marquee below never clips it */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(1080px 560px at 84% 4%, var(--lavender-bg) 0%, rgba(236,237,255,0) 60%),
    radial-gradient(820px 600px at 2% 56%, var(--warm-cream) 0%, rgba(255,238,210,0) 62%);
}
.hero-grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(40px, 5vw, 60px); font-weight: 700; }
.hero h1 .mark { position: relative; white-space: nowrap; }
.hero h1 .mark::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 6px; height: 14px;
  background: var(--yellow); z-index: -1; border-radius: 3px; opacity: .9; }
.hero .lede { font-size: 19px; color: var(--gray-700); max-width: 540px; margin: 24px 0 20px; }
.hero-points { list-style: none; display: grid; gap: 11px; max-width: 540px; margin: 0 0 32px; padding: 0; }
.hero-points li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.5; color: var(--gray-700); }
.hero-points li::before { content: ""; position: absolute; left: 0; top: 11px; width: 16px; height: 2px;
  background: var(--yellow); border-radius: 2px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-trust { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 30px 0 0; padding: 0; color: var(--gray-500); font-size: 13.5px; }
.hero-trust li { display: flex; align-items: center; gap: 14px; }
.hero-trust li:not(:first-child)::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gray-200); }
.btn .arr-down { font-size: 13px; }

/* Spline stage with floating metric chips (Clay-style) */
.hero-visual { position: relative; width: 100%; container-type: inline-size; } /* lets chips overflow the rounded stage; container-type lets the orbit radius scale with stage width (cqw) */
.hero-stage { position: relative; aspect-ratio: 1/1; width: 100%;
  background: transparent; overflow: hidden; } /* no panel — 3D floats on the page */
/* The exported Spline camera frames the tower too tight (roof clipped) and a touch
   high. main.js zooms the scene out (setZoom 0.6) so the whole building shows even
   when the costs-high morph grows it taller; the scale here enlarges the canvas back
   up so the model reads large, and the 6% nudge centres it vertically in the stage. */
.hero-stage spline-viewer { width: 100%; height: 100%; display: block; pointer-events: none;
  transform: translate(-4%, 6%) scale(0.92); transform-origin: center center; }
.hero-stage .stage-badge { position: absolute; left: 18px; top: 18px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.9); backdrop-filter: blur(6px); font-size: 12px; font-weight: 600; color: var(--navy); box-shadow: var(--shadow-sm); }
.hero-stage .stage-badge .live { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 0 rgba(248,180,0,0.6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(248,180,0,0.5);} 70% { box-shadow: 0 0 0 9px rgba(248,180,0,0);} 100% { box-shadow: 0 0 0 0 rgba(248,180,0,0);} }
/* Spline's "Built with Spline" watermark is hidden via JS (main.js → hideSplineLogo). */

/* Each chip slowly orbits the building. It's anchored at the stage centre, pushed out by
   the orbit radius (--R), and kept upright by counter-rotating against the spin. The base
   transform places it at its start angle (--a), so reduced-motion shows the ring static;
   the animation then turns the whole ring. A negative, --a-derived delay spaces the five
   evenly and keeps them spaced as they drift. The visible card lives in .chip-card so its
   change-pulse (scale) composes with the orbit instead of fighting it. */
.chip { position: absolute; z-index: 2; left: 50%; top: 50%; --R: 37cqw; will-change: transform;
  transform: rotate(calc(var(--a) * 1deg)) translateY(calc(-1 * var(--R))) rotate(calc(var(--a) * -1deg)) translate(-50%, -50%);
  animation: orbit var(--orbit-dur, 72s) linear infinite;
  animation-delay: calc(var(--orbit-dur, 72s) * var(--a) / -360); }
@keyframes orbit {
  from { transform: rotate(0deg)   translateY(calc(-1 * var(--R))) rotate(0deg)    translate(-50%, -50%); }
  to   { transform: rotate(360deg) translateY(calc(-1 * var(--R))) rotate(-360deg) translate(-50%, -50%); }
}
.chip-card { position: relative; display: flex; align-items: center; gap: 10px; transform: scale(1); white-space: nowrap;
  padding: 10px 14px; background: #fff; border-radius: 14px; box-shadow: 0 16px 36px -10px rgba(29,52,97,0.35);
  font-size: 13px; }
.chip .chip-ico { width: 28px; height: 28px; display: grid; place-items: center; flex: none; }
.chip .chip-ico img { width: 28px; height: 28px; object-fit: contain; display: block; }
.chip .chip-ico svg { width: 17px; height: 17px; }
.chip .chip-k { color: var(--gray-500); font-size: 11px; font-weight: 500; line-height: 1.1; }
.chip .chip-v { color: var(--navy); font-size: 15px; font-weight: 700; line-height: 1.15;
  display: inline-block; font-variant-numeric: tabular-nums; }
/* Start angles, evenly spaced 72° apart, clockwise from the top. */
.chip-1 { --a: 0;   }  /* Cost — top */
.chip-5 { --a: 72;  }  /* Safety — upper right */
.chip-3 { --a: 144; }  /* Energy — lower right */
.chip-2 { --a: 216; }  /* Emissions — lower left */
.chip-4 { --a: 288; }  /* Comfort — upper left */
/* Value change — the product's key beat. When the model morphs, the affected card lifts
   and its new figure flashes in (the number itself rolls to its value, driven by main.js). */
.chip-card.is-changing { animation: chipLift .7s cubic-bezier(.22,.61,.36,1); }
@keyframes chipLift {
  0%   { transform: scale(1);    box-shadow: 0 16px 36px -10px rgba(29,52,97,0.35); }
  32%  { transform: scale(1.06); box-shadow: 0 30px 56px -12px rgba(29,52,97,0.5); }
  100% { transform: scale(1);    box-shadow: 0 16px 36px -10px rgba(29,52,97,0.35); }
}
.chip-v.is-set { animation: chipVset .75s cubic-bezier(.22,.61,.36,1); }
@keyframes chipVset {
  0%   { opacity: .2; transform: translateY(7px); color: var(--blue); }
  55%  { opacity: 1; color: var(--blue); }
  100% { opacity: 1; transform: translateY(0); color: var(--navy); }
}
/* Impact arrow — when a morph recomputes a metric, a small corner badge flags the
   direction of the impact: green + up when the change improved that KPI, red + down
   when it worsened it (which way is "better" is per-metric, set in main.js). It's a
   white badge in the card's own material, positioned in the corner so the card never
   reflows; it springs in on the change, then keeps a gentle directional bob. Injected
   and driven by main.js, so it exists only while the live sync runs. */
.chip-trend { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 50%; background: #fff;
  box-shadow: 0 6px 16px -6px rgba(29,52,97,0.4); opacity: 0; transform: scale(.4);
  pointer-events: none; }
.chip-trend.is-up   { color: var(--pos); }
.chip-trend.is-down { color: var(--neg); }
.chip-trend-i { display: grid; place-items: center; }
.chip-trend.is-down .chip-trend-i { transform: rotate(180deg); }
.chip-trend svg { width: 11px; height: 11px; display: block; }
/* The badge is a transient flag, not a persistent state: on a change it springs in,
   gives one gentle bob in its direction, holds a beat, then fades out — so it clears
   itself once the change animation is done (forwards leaves it hidden). main.js
   restarts it by re-adding .show on the next change. */
.chip-trend.show { animation: trendBadge 1.8s cubic-bezier(.22,.61,.36,1) forwards; }
.chip-trend.show.is-up   .chip-trend-i { animation: trendBob     1.8s ease-in-out forwards; }
.chip-trend.show.is-down .chip-trend-i { animation: trendBobDown 1.8s ease-in-out forwards; }
@keyframes trendBadge {
  0%   { opacity: 0; transform: scale(.4);  }
  14%  { opacity: 1; transform: scale(1.12); }
  26%  { opacity: 1; transform: scale(1);    }
  74%  { opacity: 1; transform: scale(1);    }
  100% { opacity: 0; transform: scale(.7);   }
}
@keyframes trendBob     { 0%, 40%, 100% { transform: translateY(0); }                20% { transform: translateY(-2.5px); } }
@keyframes trendBobDown { 0%, 40%, 100% { transform: rotate(180deg) translateY(0); } 20% { transform: rotate(180deg) translateY(-2.5px); } }
/* On phones the stage shrinks but the cards don't, so the pentagon's lower pair would
   collide. Scale the cards down to keep the arrangement clear. */
@media (max-width: 560px) {
  .chip-card { font-size: 11px; gap: 8px; padding: 8px 11px; border-radius: 12px; }
  .chip .chip-ico, .chip .chip-ico img { width: 22px; height: 22px; }
  .chip .chip-k { font-size: 10px; }
  .chip .chip-v { font-size: 13px; }
  /* On phones the chips are large relative to the stage, so the desktop framing buries the
     tower under them. Shrink the model so the whole building reads with the chips orbiting
     clear of it (the runtime keeps the camera zoomed out so nothing clips). */
  .hero-stage spline-viewer { transform: translate(0, 2%) scale(0.68); }
}

/* ============================================================
   TRUST / LOGO STRIP
   ============================================================ */
.trust-strip { padding: 30px 0 8px; }
/* The hero clips its warm bottom-left wash at its own bottom edge (overflow:hidden,
   which it needs to contain the orbiting metric chips). On the desktop layout the hero
   is short enough that the wash is still visible where it gets cut, leaving a hard line
   above the (transparent) logo strip. Continue the very same radial through the strip so
   it fades out naturally instead of being chopped. The center is the hero wash projected
   310px past the hero's bottom edge (hero ≈704px tall, wash centered at 56%), so the two
   meet seamlessly. Desktop only: once the hero stacks (≤980px) it's tall enough that the
   wash already fades to nothing before its bottom, so there's no cut to continue. */
@media (min-width: 981px) {
  .trust-strip { background: radial-gradient(820px 600px at 2% -310px, var(--warm-cream) 0%, rgba(255,238,210,0) 62%); }
}
.trust-strip .tlabel { text-align: center; color: var(--gray-400); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-row { display: flex; gap: 56px; width: max-content; animation: scroll-x 32s linear infinite; }
.marquee-row span { color: var(--gray-500); font-size: 19px; font-weight: 600; white-space: nowrap; opacity: .8; }
/* logo strip */
.logo-row { display: flex; align-items: center; gap: 56px; width: max-content; animation: scroll-x 20s linear infinite; }
/* Promote the moving rows to their own compositor layer. Without this the browser repaints
   the whole strip — re-applying the edge mask and every logo's grayscale filter — on each
   frame, which is what makes the marquee stutter on phones. As an isolated layer it
   rasterizes once and the animation is a pure GPU transform. */
.marquee-row, .logo-row { will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
.logo-item { flex: none; display: grid; place-items: center; height: 52px; }
.logo-item img { max-height: 38px; max-width: 165px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: 0.55; transition: opacity .2s ease, filter .2s ease; }
.logo-item:hover img { filter: grayscale(0); opacity: 1; }
/* genuinely square / compact marks get more height to offset their narrow width */
.logo-item.logo-senn img { max-height: 50px; max-width: 50px; }
.logo-item.logo-hrs img { max-height: 46px; }
/* the one ultra-thin wordmark needs more width to stay legible */
.logo-item.logo-boltshauser img { max-width: 250px; }
/* partners marquee (About) — same design, more logos, a touch larger + slower */
.partners-strip { padding: 60px 0 64px; }
.partners-row { gap: 66px; animation-duration: 40s; }
.partners-row .logo-item { height: 48px; }
.partners-row .logo-item img { max-height: 44px; max-width: 172px; }
@keyframes scroll-x { from { transform: translateX(0);} to { transform: translateX(-50%);} }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section { padding: 112px 0; }
.section.tint-lav { background: var(--lavender-bg); }
.section.tint-purple { background: var(--purple-bg); }
.section.tint-cream { background: var(--yellow-bg); }
.section.navy { background: var(--navy); }
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-head h2 { font-size: clamp(30px, 3.6vw, 44px); }
/* a highlighted headline needs extra line-height so the cloned yellow bars clear each other
   instead of overlapping into the line above when the title wraps. The painted highlight box
   is ~1.48em tall (font glyph box + padding), so anything tighter overlaps — the h2 default
   1.12 collides badly; 1.5 leaves a small clean gap between the bars. */
.section-head h2:has(.hl-yellow) { line-height: 1.5; }
/* highlighter swipe behind a headline — clones across line wraps so it hugs the words */
.hl-yellow { background: var(--yellow); color: var(--navy); padding: 0.04em 0.22em; border-radius: 5px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* description paragraph only — must exclude the .eyebrow <p>, or it overrides the
   eyebrow's size/colour/spacing (it sits directly above the title) */
.section-head p:not(.eyebrow) { font-size: 18px; color: var(--gray-700); margin: 16px 0 0; }
/* left-aligned feature heading used inside two-up content blocks (AI optimizer, showcase, story) —
   one shared size so these block titles stay consistent across pages */
.h-block { font-size: clamp(28px, 3.4vw, 42px); }

/* ── stat row — three headline KPIs with a featured centre: speed · margin · CO₂ ──
   The margin figure (the headline buying reason) sits centre, larger, on a soft
   cream panel that lifts off the page. Blue figures, a brand-yellow > accent.
   Editorial, not SaaS-generic. */
.stats { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 16px; align-items: center; max-width: 1000px; margin: 0 auto; }
.stat { text-align: center; padding: 8px 24px; position: relative; }
.stat .num { font-size: clamp(48px, 5.6vw, 76px); font-weight: 700; color: var(--blue); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.stat .num .gt { color: var(--yellow); font-weight: 600; font-size: 0.5em; vertical-align: 0.28em; margin-right: 0.03em; letter-spacing: 0; }
.stat .num .u { color: var(--blue); font-weight: 500; font-size: 0.78em; margin-left: 0.02em; }
.stat .lab { margin: 16px auto 0; max-width: 17ch; color: var(--gray-700); font-size: 15px; font-weight: 500; line-height: 1.4; }
/* featured centre KPI — larger figure on a soft cream panel with a gentle lift */
.stat.is-featured { background: var(--yellow-bg); border: 1px solid rgba(248,180,0,0.22); border-radius: var(--radius-xl); padding: 40px 28px; box-shadow: var(--shadow-warm); }
.stat.is-featured .num { font-size: clamp(62px, 7.4vw, 100px); }
.stat.is-featured .lab { color: var(--navy); font-weight: 600; font-size: 16px; }
/* the KPIs are the payoff to the before/after above — pull the section up so they
   read as its result rather than a free-floating band */
.section.stat-section { padding-top: 40px; }
.stat-section .section-head { margin-bottom: 40px; }
/* keep the vyzn wordmark lowercase inside uppercased labels */
.kw { text-transform: none; }

/* ── navy "Der Vorsprung" band: three equal KPIs split by hairlines + a handwritten kicker ── */
.section.navy { background: var(--navy); color: #fff; }
.section.navy.stat-section { padding: 96px 0; }
.section.navy .section-head h2 { color: #fff; }
.section.navy .section-head p:not(.eyebrow) { color: rgba(255,255,255,0.72); }
.section.navy .eyebrow { color: rgba(255,255,255,0.65); }
.stats-navy { grid-template-columns: 1fr 1fr 1fr; gap: 0; max-width: none; }
.stats-navy .stat { padding: 10px 32px; }
.stats-navy .stat:nth-child(2) { border-left: 1px solid rgba(255,255,255,0.14); border-right: 1px solid rgba(255,255,255,0.14); }
.stats-navy .num { color: #fff; font-size: clamp(56px, 5.6vw, 84px); }
.stats-navy .num .gt { color: var(--yellow); }
.stats-navy .num .u { color: rgba(255,255,255,0.55); font-weight: 500; }
.stats-navy .lab { color: rgba(255,255,255,0.78); max-width: 18ch; }
.stat-hand { text-align: center; margin: 54px 0 0; font-size: 24px; color: rgba(255,255,255,0.85); transform: rotate(-1deg); }
@media (max-width: 680px) {
  .stats-navy { grid-template-columns: 1fr; gap: 4px; }
  .stats-navy .stat:nth-child(2) { border-left: none; border-right: none;
    border-top: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(255,255,255,0.14); padding: 22px 32px; }
}

/* ── bundle carousel (the five bundle cards; the DMP engine has its own section) ── */
/* Peek carousel: a single horizontal scroll-snap row at every width. The five cards
   never all fit, so the next one always peeks past the right edge — the affordance that
   says "there's more, scroll." Desktop also gets prev/next buttons (mouse can't scroll
   sideways natively); touch just swipes. */
.bundle-carousel { position: relative; }
/* No scroll-snap: the row drifts continuously (JS), so it must rest anywhere, not lock to cards.
   cursor:grab signals you can pan it by dragging. */
.domains { display: flex; flex-wrap: nowrap; gap: 24px; overflow-x: auto; cursor: grab;
  /* breathing room so the hover-lift and card shadow aren't clipped by overflow-x (vertical
     only — horizontal stays 0 so a card's offsetLeft equals the scrollLeft that starts it) */
  padding: 14px 0 28px; margin: -14px 0 -12px;
  /* Soft edges: cards drift in from the right and out on the left, so instead of a hard cut at
     each side they dissolve to transparent and the cream section shows through. Horizontal only
     (the gradient is uniform top-to-bottom), so the card shadows above/below stay intact. */
  --edge-fade: clamp(36px, 5vw, 72px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent 100%);
  scrollbar-width: none; -ms-overflow-style: none; }
.domains::-webkit-scrollbar { display: none; }
.domains.grabbing { cursor: grabbing; user-select: none; }
.domains:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 8px; }
/* fixed-fraction width → a fractional card count → a guaranteed peek. align-items:stretch
   (the flex default in this single non-wrapping row) keeps all five the same height — the
   tallest card, Energy with three app rows, sets it — so they read as equal peers without
   the old min-height hack. min-width:0 holds every card to its basis (else Energy's nowrap
   "in development" tag forces it wider than the others). */
.domain { display: flex; flex-direction: column; flex: 0 0 82%; min-width: 0;
  background: #fff; border-radius: 20px; padding: 30px; box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease; }
@media (min-width: 600px) { .domain { flex-basis: 46%; } }
@media (min-width: 900px) { .domain { flex-basis: 31%; } }
.domain:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); text-decoration: none; }

/* icon — rounded app-style tile */
.domain .d-ico { width: 54px; height: 54px; flex: none; border-radius: 15px; background: var(--gray-100);
  display: grid; place-items: center; margin-bottom: 20px; color: var(--navy); }
.domain .d-ico img { width: 34px; height: 34px; object-fit: contain; display: block; }
.domain .d-ico svg { width: 26px; height: 26px; }
.domain h3 { font-size: 19px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.domain > p { color: var(--gray-700); font-size: 14.5px; line-height: 1.5; margin: 0; }

/* apps — clean, divided list (the product, shown plainly) */
.bundle-apps { margin-top: 22px; }
.bundle-apps .ba-label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray-400); margin-bottom: 2px; }
.app-list { list-style: none; margin: 0; padding: 0; }
.app-list .app { display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-top: 1px solid var(--gray-100); font-size: 14px; color: var(--gray-900); line-height: 1.35; }
.app-name { flex: 1 1 auto; }
.app-mark { flex: none; width: 18px; height: 18px; position: relative; }
.app-mark::after { content: ""; position: absolute; left: 6px; top: 1px; width: 5px; height: 10px;
  border: solid var(--yellow); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* in-development apps: hollow mark + muted name + state tag */
.app-list .app.app-dev .app-name { color: var(--gray-500); }
.app-mark--open::after { display: none; }
.app-mark--open { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--gray-200); }
.app-state { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gray-400); background: var(--gray-50); border: 1px solid var(--gray-100); padding: 3px 8px;
  border-radius: var(--radius-full); white-space: nowrap; }
.bundle-empty { margin: 0; padding: 11px 0 0; border-top: 1px solid var(--gray-100);
  font-size: 14px; color: var(--gray-500); }

/* norm tag — pinned to the card bottom so every card lines up */
.domain .d-tag { margin-top: auto; padding-top: 22px; font-size: 12px; font-weight: 600;
  color: var(--gray-500); letter-spacing: 0.02em; }
.domain .d-tag.accent { color: var(--yellow-light); }

/* soon pill */
.domain h3 .soon { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray-500); background: var(--gray-100); padding: 3px 9px; border-radius: var(--radius-full); }
.domain.is-soon { opacity: 0.82; }
.domain.is-soon:hover { opacity: 1; }

/* navy DMP "engine" card */
.domain.navy-card { background: var(--navy); box-shadow: var(--shadow-lg); }
.domain.navy-card:hover { box-shadow: var(--shadow-lg); }
.domain.navy-card .d-ico { background: rgba(255,255,255,0.12); color: #fff; }
.domain.navy-card h3 { color: #fff; }
.domain.navy-card > p { color: rgba(255,255,255,0.78); }
.domain.feature-wide { grid-column: span 3; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; overflow: hidden; align-items: stretch; }
.domain.feature-wide .fw-copy { padding: 40px; align-self: center; }
.domain.feature-wide .fw-media { background: var(--gray-50); display: grid; place-items: center; padding: 24px; }
.domain.feature-wide .fw-media img { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }

/* ── bundle selector: a tab rail (left) + a detail panel (right). main.js auto-cycles
   the tabs while the section is in view and stops once the visitor clicks. Bundle 0 is
   server-rendered open, so it reads fine with no JS. (Supersedes the .domains carousel.) ── */
.bundle-select { display: grid; grid-template-columns: 0.42fr 0.58fr; gap: 28px; align-items: start; }
.bsel-tabs { display: flex; flex-direction: column; gap: 6px; }
.bsel-tab { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 15px 18px 15px 26px; border: none; border-radius: 14px; background: transparent; cursor: pointer;
  font-family: inherit; transition: background .25s ease, box-shadow .25s ease; }
.bsel-tab.is-active { background: #fff; box-shadow: 0 14px 36px -16px rgba(173,156,137,0.5); }
.bsel-bar { position: absolute; left: 8px; top: 16px; bottom: 16px; width: 4px; border-radius: 4px;
  background: var(--yellow); opacity: 0; transform: scaleY(0.4); transition: opacity .25s ease, transform .25s ease; }
.bsel-tab.is-active .bsel-bar { opacity: 1; transform: scaleY(1); }
.bsel-ico { width: 44px; height: 44px; flex: none; border-radius: 12px; background: #fff; display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(29,52,97,0.06); transition: background-color .25s ease, box-shadow .25s ease; }
.bsel-tab.is-active .bsel-ico { background: var(--yellow-bg); box-shadow: none; }
.bsel-ico img { width: 26px; height: 26px; object-fit: contain; display: block; }
.bsel-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bsel-name { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; color: var(--gray-700); transition: color .25s ease; }
.bsel-tab.is-active .bsel-name { color: var(--navy); }
.bsel-tag { font-size: 12.5px; font-weight: 500; color: var(--gray-400); }
.bsel-name .soon { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gray-500); background: var(--gray-100); padding: 3px 8px; border-radius: var(--radius-full); }

.bsel-panels { position: relative; background: #fff; border-radius: 24px; box-shadow: 0 24px 60px -28px rgba(173,156,137,0.55);
  padding: 42px 44px; min-height: 430px; }
@keyframes bsel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.bsel-panel.is-active { animation: bsel-in .5s cubic-bezier(.2,.7,.3,1) both; }
.bsel-panel-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.bsel-panel-ico { width: 60px; height: 60px; flex: none; border-radius: 16px; background: var(--gray-100); display: grid; place-items: center; }
.bsel-panel-ico img { width: 36px; height: 36px; object-fit: contain; display: block; }
.bsel-panel-meta { display: flex; flex-direction: column; gap: 2px; }
.bsel-panel-meta h3 { font-size: 24px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.bsel-panel-meta .soon { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gray-500); background: var(--gray-100); padding: 4px 10px; border-radius: var(--radius-full); }
.bsel-panel-tag { font-size: 14px; font-weight: 500; color: var(--gray-400); }
.bsel-panel-desc { font-size: 16px; line-height: 1.6; color: var(--gray-700); margin: 0 0 26px; }
.bsel-includes { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 2px; }
.bsel-apps { list-style: none; margin: 0 0 26px; padding: 0; }
.bsel-app { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--gray-100); font-size: 14.5px; line-height: 1.35; color: var(--gray-900); }
.bsel-app-name { flex: 1 1 auto; }
.bsel-app.is-dev .bsel-app-name { color: var(--gray-500); }
.bsel-app-mark { flex: none; width: 18px; height: 18px; position: relative; }
.bsel-app-mark::after { content: ""; position: absolute; left: 6px; top: 1px; width: 5px; height: 10px;
  border: solid var(--yellow); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bsel-app-mark--open { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--gray-200); }
.bsel-app-mark--open::after { display: none; }
.bsel-app-state { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gray-400); background: var(--gray-50); border: 1px solid var(--gray-100); padding: 3px 8px; border-radius: var(--radius-full); white-space: nowrap; }
.bsel-norms { display: flex; gap: 8px; flex-wrap: wrap; }
.bsel-norms span { font-size: 12px; font-weight: 600; color: var(--gray-700); background: var(--gray-50);
  border: 1px solid var(--gray-100); padding: 6px 12px; border-radius: var(--radius-full); }

@media (max-width: 820px) {
  .bundle-select { grid-template-columns: 1fr; gap: 18px; }
  .bsel-panels { padding: 32px 26px; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .bsel-panel.is-active { animation: none; } }

/* ============================================================
   THE TECHNOLOGY BEHIND IT — DMP teaser (home; navy)
   Hand-sketched: DMP is hand-circled (the founders' motif) and strokes
   draw themselves out to the five bundles → funnels into /dmp.html.
   ============================================================ */
.section.dmp-tech { background: var(--navy); color: #fff; }
.dmp-tech-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
.dmp-tech .eyebrow { color: rgba(255,255,255,0.72); }
.dmp-tech-copy h2 { color: #fff; font-size: clamp(30px, 3.7vw, 46px); line-height: 1.08; margin: 0; }
/* DMP reads as the wordmark: a touch larger + tighter, no underline */
.dmp-tech-copy .dmp-kw { color: var(--lavender); white-space: nowrap; font-size: 1.07em; letter-spacing: -0.012em; }
.dmp-tech-lede { color: rgba(255,255,255,0.82); font-size: 18px; line-height: 1.6; margin: 22px 0 0; max-width: 520px; }
/* claims: a clean list with the site's static yellow check, no pulsing pills */
.dmp-tech-chips { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.dmp-tech-chips li { font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,0.92); padding-left: 24px; position: relative; }
.dmp-tech-chips li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 6px; height: 11px;
  margin-top: -7px; border: solid var(--yellow); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dmp-tech-actions { margin-top: 32px; }

/* —— the "inputs → DMP → bundles" flow diagram (top feeds the core, core feeds the row) —— */
.dmp-tech-viz { position: relative; width: 100%; max-width: 460px; margin: 0 auto; aspect-ratio: 100 / 116; }
/* connectors: dashes drift continuously along each path (inputs in, bundles out) */
.dtv-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.dtv-flow { fill: none; stroke: rgba(236,237,255,0.4); stroke-width: 0.8; stroke-linecap: round;
  stroke-dasharray: 2.5 2.5; animation: dashFlow 1.5s linear infinite; animation-delay: var(--d, 0s); }
@keyframes dashFlow { from { stroke-dashoffset: 10; } to { stroke-dashoffset: 0; } }

/* input formats feeding in at the top */
.dtv-in { position: absolute; top: 3.5%; transform: translateX(-50%); white-space: nowrap; z-index: 2;
  padding: 6px 13px; border-radius: var(--radius-full); background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2); font-size: 12px; font-weight: 600; color: #fff; }
.dtv-in-1 { left: 20%; } .dtv-in-2 { left: 50%; } .dtv-in-3 { left: 80%; }

/* the DMP core — the dark "engine" at the centre */
.dtv-core { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 2;
  width: 31%; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 3px;
  background: #21366a; border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 18px 44px -16px rgba(0,0,0,0.65); }
.dtv-core strong { font-size: clamp(20px, 4.3vw, 30px); font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1; }
.dtv-core small { font-size: 7.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--lavender); padding: 0 10px; }
/* the founders' hand-drawn marker circle, drawn around DMP */
/* Centred on the same anchor as .dtv-core and sized from the viz width (+ its own square
   aspect-ratio), so the ring stays concentric with the core on every engine — including iOS
   Safari, which mis-resolves percentage insets taken against an aspect-ratio height. */
.dtv-circle { position: absolute; left: 50%; top: 45%; width: 40%; aspect-ratio: 1; z-index: 2;
  transform: translate(-50%, -50%) rotate(-4deg); transform-origin: center;
  pointer-events: none; overflow: visible; }
.dtv-circle path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dmp-tech-viz.in .dtv-circle path { stroke-dashoffset: 0; transition: stroke-dashoffset .85s ease .15s; }
/* a handwritten margin note, set to the left (Caveat) */
.dtv-note { position: absolute; left: 0; top: 60%; transform: rotate(-5deg); z-index: 3;
  font-family: var(--font-hand); font-size: 16px; color: rgba(236,237,255,0.92); white-space: nowrap; opacity: 0; }
.dmp-tech-viz.in .dtv-note { animation: dtv-note-in .6s ease .9s both; }
@keyframes dtv-note-in { from { opacity: 0; transform: rotate(-5deg) translateY(6px); }
  to { opacity: 1; transform: rotate(-5deg) translateY(0); } }

/* the five bundle outputs, in a row along the bottom (positions set inline via left) */
.dtv-nodes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 2; }
.dtv-out { position: absolute; top: 88%; transform: translate(-50%, 0); display: flex; flex-direction: column;
  align-items: center; gap: 6px; width: 86px; opacity: 0; }
.dmp-tech-viz.in .dtv-out { animation: dtv-out-in .5s ease both; animation-delay: calc(0.4s + var(--i) * 0.12s); }
.dtv-out-ic { width: 46px; height: 46px; border-radius: 13px; background: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,0.55); }
.dtv-out-ic img { width: 28px; height: 28px; object-fit: contain; display: block; }
.dtv-out-l { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.85); }
@keyframes dtv-out-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* —— once landed, the icons gently float and the core breathes —— */
.dmp-tech-viz.in .dtv-out-ic {
  animation: dtv-float calc(4.4s + var(--i) * 0.4s) ease-in-out infinite;
  animation-delay: calc(0.9s + var(--i) * 0.3s); }
@keyframes dtv-float {
  0%, 100% { transform: translateY(0); box-shadow: 0 10px 24px -10px rgba(0,0,0,0.55); }
  50% { transform: translateY(-5px); box-shadow: 0 18px 30px -12px rgba(0,0,0,0.42); } }
.dmp-tech-viz.in .dtv-core { animation: dtv-core-pulse 3.6s ease-in-out 1.2s infinite; }
@keyframes dtv-core-pulse {
  0%, 100% { box-shadow: 0 18px 44px -16px rgba(0,0,0,0.65); }
  50% { box-shadow: 0 18px 44px -16px rgba(0,0,0,0.65),
    0 0 0 6px rgba(180,180,216,0.12), 0 0 38px rgba(180,180,216,0.22); } }

@media (max-width: 860px) {
  .dmp-tech-grid { grid-template-columns: 1fr; gap: 40px; }
  .dmp-tech-viz { max-width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .dtv-flow { animation: none; }
  .dtv-circle path, .dmp-tech-viz.in .dtv-circle path { stroke-dashoffset: 0; transition: none; }
  .dtv-out, .dtv-note { opacity: 1; animation: none; }
  .dmp-tech-viz.in .dtv-out, .dmp-tech-viz.in .dtv-out-ic, .dmp-tech-viz.in .dtv-core { animation: none; }
}

/* ── before / with comparison ── */
.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch;
  background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.compare .col { padding: 44px; }
.compare .col.before { background: var(--gray-50); }
.compare .col.after { background: #fff; }
.compare .col h3 { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; }
.compare .col.before h3 { color: var(--gray-400); }
/* the headline figure — the contrast that sells the gap: ~60 weeks vs <10 minutes */
.compare .cmp-big { margin: 18px 0 6px; font-size: clamp(34px, 3.2vw, 44px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--gray-400); }
.compare .cmp-big--accent { color: var(--blue); }
.compare .cmp-sub { margin: 0 0 28px; font-size: 14px; color: var(--gray-500); }
.compare .col.before .cmp-sub { color: var(--gray-400); }
.compare .col.after h3 { color: var(--navy); }
.compare .col.after h3 .dotmark { color: var(--yellow); text-transform: none; }
.compare ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.compare li { display: flex; gap: 12px; font-size: 15.5px; color: var(--gray-700); align-items: flex-start; }
.compare li .ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; margin-top: 1px; }
.compare .before li .ic { background: var(--gray-200); color: #fff; }
.compare .after li .ic { background: var(--yellow); color: var(--navy); font-weight: 700; }
.compare .col.after li { color: var(--gray-900); }
.compare .divider { width: 1px; background: var(--gray-100); }

/* ── how it works ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
.step { position: relative; padding: 28px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.step::before { counter-increment: step; content: "0" counter(step); font-size: 13px; font-weight: 700; color: var(--yellow); letter-spacing: 0.1em; }
.step h3 { font-size: 19px; margin: 12px 0 8px; }
.step p { color: var(--gray-700); font-size: 15px; margin: 0; }

/* ── use cases — the project journey: competition → early planning → build decision.
   Three numbered stations sit on a timeline axis that draws itself in on scroll;
   each station lights up and its card rises, in sequence. ── */
.usecases {
  --uc-gap: 26px;
  --uc-node: 52px;
  --uc-lead: .15s;   /* beat before the axis starts drawing */
  --uc-draw: 1.1s;   /* time for the axis to travel from node 01 to node 03 */
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--uc-gap);
  isolation: isolate;  /* own stacking context so the axis stays pinned behind the nodes */
}
/* the axis runs through the centre of the three station nodes */
.usecases::before, .usecases::after {
  content: ""; position: absolute; height: 2px; border-radius: 2px; z-index: -1;  /* always behind the nodes */
  top: calc(var(--uc-node) / 2);
  left:  calc((100% - 2 * var(--uc-gap)) / 6);
  right: calc((100% - 2 * var(--uc-gap)) / 6);
}
.usecases::before { background: var(--gray-100); }            /* static track */
.usecases::after {                                            /* yellow progress, draws left → right */
  background: linear-gradient(90deg, var(--yellow-light), var(--yellow));
  transform: scaleX(0); transform-origin: left center;
  /* symmetric ease so 50% drawn lands at 50% time — lets each node light exactly as the line crosses it */
  transition: transform var(--uc-draw) cubic-bezier(.45,.05,.55,.95) var(--uc-lead);
}
.usecases.in::after { transform: scaleX(1); }

.usecase { display: flex; flex-direction: column; }

/* the station node */
.uc-marker { display: flex; justify-content: center; margin-bottom: 22px; }
.uc-num {
  position: relative; z-index: 1;
  width: var(--uc-node); height: var(--uc-node); border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 700; letter-spacing: .01em; color: var(--navy);
  background: #fff; border: 2px solid var(--gray-100);
  box-shadow: 0 0 0 7px var(--white), var(--shadow-sm);       /* white halo masks the axis behind the node */
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), background-color .4s ease, border-color .4s ease;
}
.usecases:not(.in) .uc-num { transform: scale(.72); }
.usecases.in .uc-num {                                        /* pop + light up exactly as the axis reaches each node */
  background: var(--yellow-bg); border-color: var(--yellow);
  transition-delay: calc(var(--uc-lead) + var(--i) / 2 * var(--uc-draw));
}

/* the card hanging below each station */
.uc-card {
  flex: 1; display: flex; flex-direction: column; padding: 28px 26px 30px;
  background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); transition: transform .25s ease, box-shadow .25s ease;
}
.usecase:hover .uc-card { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.uc-phase { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray-500); margin-bottom: 13px; }
.uc-card h3 { font-size: 20px; line-height: 1.22; margin: 0 0 12px; }
.uc-card p { font-size: 15px; line-height: 1.6; color: var(--gray-700); margin: 0; }

/* the <ol> is only the scroll-reveal host — the stations animate, not the box itself */
.usecases.reveal { opacity: 1; transform: none; transition: none; }
.uc-marker { opacity: 0; transition: opacity .4s ease; }
.uc-card { opacity: 0; transform: translateY(20px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.25,1); }
/* node fades in as the axis arrives; its card rises a beat behind it */
.usecases.in .uc-marker { opacity: 1; transition-delay: calc(var(--uc-lead) + var(--i) / 2 * var(--uc-draw)); }
.usecases.in .uc-card { opacity: 1; transform: none; transition-delay: calc(var(--uc-lead) + var(--i) / 2 * var(--uc-draw) + .1s); }

@media (max-width: 900px) {
  /* collapse to a vertical timeline: nodes down the left, cards to the right */
  /* no drawing axis here, so tighten the per-node stagger */
  .usecases { grid-template-columns: 1fr; gap: 0; --uc-lead: .1s; --uc-draw: .5s; }
  .usecases::before, .usecases::after { display: none; }
  .usecase { position: relative; display: grid; grid-template-columns: var(--uc-node) 1fr;
    column-gap: 18px; padding-bottom: 26px; }
  .usecase:last-child { padding-bottom: 0; }
  .usecase:not(:last-child)::before { content: ""; position: absolute; width: 2px; background: var(--gray-100);
    left: calc(var(--uc-node) / 2 - 1px); top: var(--uc-node); bottom: 0; }
  .uc-marker { margin: 0; justify-content: flex-start; }
  .uc-card { padding: 22px 22px 24px; }
}

/* ── AI optimizer (lavender = system speaking) ── */
.ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ai-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: var(--radius-full);
  background: var(--lavender); color: var(--navy); font-size: 12px; font-weight: 600; margin-bottom: 18px; }
.ai-card { position: relative; }
/* twinkling sparkle pair (the AI star, two sizes, diagonal) */
.sparkles { position: absolute; top: -16px; right: -12px; width: 60px; height: 50px; z-index: 4; pointer-events: none; }
.spark { position: absolute; color: var(--yellow); animation: twinkle 2.6s ease-in-out infinite; }
.spark svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 5px rgba(248,180,0,0.5)); }
.spark-lg { width: 32px; height: 32px; right: 4px; top: 14px; }
.spark-sm { width: 17px; height: 17px; right: 30px; top: 0; animation-delay: .9s; }
@keyframes twinkle { 0%, 100% { transform: scale(.6) rotate(-8deg); opacity: .3; } 50% { transform: scale(1) rotate(0deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .spark { animation: none; opacity: 1; transform: none; } }

/* the chat as a little app window: chrome bar (dots + title + replay) over the transcript */
.ai-window { background: #fff; border: 1px solid var(--gray-100); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); }
.ai-bar { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--gray-100); background: var(--gray-50); }
.ai-dot { width: 10px; height: 10px; border-radius: 50%; background: #E3E3E3; }
.ai-bar-title { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; font-size: 13px; font-weight: 600; color: var(--navy); }
.ai-bar-pip { width: 6px; height: 6px; border-radius: 50%; background: var(--lavender); }
.ai-replay { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gray-200);
  background: #fff; color: var(--gray-700); font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  font-family: inherit; transition: color .15s ease, border-color .15s ease; }
.ai-replay:hover { color: var(--navy); border-color: var(--navy); }

.ai-chat { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; min-height: 352px; }
.cb { display: flex; align-items: flex-end; gap: 8px; }
.cb p { margin: 0; padding: 11px 15px; font-size: 14.5px; line-height: 1.5; border-radius: 18px; max-width: 86%; }
.cb-vyzn { justify-content: flex-start; }
.cb-vyzn p { background: var(--lavender-bg); color: var(--navy); border-bottom-left-radius: 6px; }
.cb-user { justify-content: flex-end; }
.cb-user p { background: var(--navy); color: #fff; border-bottom-right-radius: 6px; max-width: 78%; }
.cb-av { flex: none; order: 2; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; }
.cb-typing { display: flex; align-self: flex-start; width: max-content; align-items: center; gap: 5px;
  background: var(--lavender-bg); padding: 15px 17px; border-radius: 18px 18px 18px 6px; }
.cb-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); opacity: .4;
  animation: cbdot 1.3s infinite ease-in-out; }
.cb-typing i:nth-child(2) { animation-delay: .18s; }
.cb-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes cbdot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: .95; } }

/* the recommendation chips, popped in with the rec message */
.ai-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0 2px; }
.ai-chip { font-size: 13px; font-weight: 600; color: var(--navy); background: var(--yellow-bg);
  border: 1px solid rgba(248,180,0,0.4); padding: 7px 13px; border-radius: var(--radius-full); font-variant-numeric: tabular-nums; }
.ai-chip--lead { background: var(--yellow); border-color: var(--yellow); }

/* JS-driven playback: once main.js sets .is-ready, only .is-on bubbles show (so the
   transcript is fully visible with no JS). Each surfacing bubble bubbles in. */
.ai-window.is-ready [data-step]:not(.is-on),
.ai-window.is-ready .cb-typing:not(.is-on) { display: none; }
.ai-window.is-ready [data-step].is-on { animation: bubbleIn .45s cubic-bezier(.2,.7,.3,1) both; }
.ai-window.is-ready .ai-chips.is-on .ai-chip { animation: popIn .4s ease both; }
.ai-window.is-ready .ai-chips.is-on .ai-chip:nth-child(2) { animation-delay: .15s; }
.ai-window.is-ready .ai-chips.is-on .ai-chip:nth-child(3) { animation-delay: .3s; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cb-typing i { animation: none; }
  .ai-window.is-ready [data-step].is-on,
  .ai-window.is-ready .ai-chips.is-on .ai-chip { animation: none; }
}
.hand { font-family: var(--font-hand); font-size: 22px; font-weight: 500; color: var(--navy); }

/* ── product showcase ── */
.showcase { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.showcase .sc-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
/* the summary mockup is a transparent floating-laptop graphic with hand-drawn
   annotations — set on a soft white rounded card so it lifts off the cream section.
   Padding keeps the labels off the rounded corners. */
.showcase .sc-media img.sc-shot { width: 100%; height: auto; box-sizing: border-box;
  background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 14px 16px; }
/* image placeholder (temporary — swap for real assets later) */
.img-ph { width: 100%; aspect-ratio: 4/3; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: var(--lavender-bg); border: 1.5px dashed rgba(28,76,152,0.22); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md); color: var(--blue); }
.img-ph svg { width: 44px; height: 44px; opacity: 0.5; }
.img-ph span { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); }
.feature-list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 14px; }
.feature-list li { display: flex; gap: 12px; font-size: 16px; color: var(--gray-700); }
.feature-list .ic { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow);
  color: var(--navy); display: grid; place-items: center; font-size: 13px; font-weight: 700; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-teaser-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.blog-teaser-head h2 { font-size: clamp(28px, 3.4vw, 40px); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-image { aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: var(--lavender-bg); }
.card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tag { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-full); background: var(--lavender-bg); color: var(--blue); }
.card-title { font-size: 19px; line-height: 1.25; margin-bottom: 10px; }
.card-excerpt { color: var(--gray-700); font-size: 14.5px; margin: 0 0 18px; flex: 1; }
.card-meta { color: var(--gray-400); font-size: 13px; }
.empty { grid-column: 1/-1; text-align: center; color: var(--gray-400); padding: 60px 0; }

/* blog index hero */
.page-hero { padding: 72px 0 40px; }
.page-hero.center { text-align: center; }
.page-hero h1 { font-size: clamp(38px, 5vw, 58px); font-weight: 700; }
.page-hero p { font-size: 19px; color: var(--gray-700); max-width: 620px; margin: 18px auto 0; }
.page-hero.left p { margin-left: 0; }

/* blog filters */
.filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 36px 0 8px; }
.filters button { font-family: var(--font); font-size: 13.5px; font-weight: 500; cursor: pointer;
  padding: 8px 16px; border-radius: var(--radius-full); border: 1px solid var(--gray-200);
  background: #fff; color: var(--gray-700); transition: all .15s ease; }
.filters button:hover { border-color: var(--navy); color: var(--navy); }
.filters button.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── post page ── */
.post { padding-bottom: 96px; }
.post-header { max-width: 760px; padding: 56px 28px 28px; }
.post-back { font-size: 14px; color: var(--gray-500); display: inline-flex; gap: 6px; margin-bottom: 26px; }
.post-back:hover { color: var(--navy); text-decoration: none; }
.post-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.post-title { font-size: clamp(32px, 4.6vw, 50px); font-weight: 700; margin-bottom: 18px; }
.post-meta { color: var(--gray-500); font-size: 14px; display: flex; gap: 8px; align-items: center; }
.post-meta .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.post-cover { max-width: 980px; margin: 12px auto 44px; aspect-ratio: 21/9; background-size: cover; background-position: center; background-color: var(--lavender-bg); border-radius: var(--radius-lg); }
.post-body { max-width: 720px; margin: 0 auto; font-size: 18px; line-height: 1.75; color: var(--gray-900); }
.post-body h2 { font-size: 28px; margin: 44px 0 12px; }
.post-body h3 { font-size: 22px; margin: 34px 0 10px; }
.post-body h4 { font-size: 18px; margin: 26px 0 8px; color: var(--navy); }
.post-body p { margin: 0 0 18px; }
.post-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.post-body ul, .post-body ol { padding-left: 22px; margin: 0 0 18px; }
.post-body li { margin-bottom: 8px; }
.post-body blockquote { border-left: 3px solid var(--yellow); margin: 28px 0; padding: 4px 0 4px 22px;
  font-size: 20px; color: var(--navy); font-style: normal; }
.post-body figure { margin: 32px 0; }
.post-body figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.post-body hr { border: 0; border-top: 1px solid var(--gray-100); margin: 40px 0; }
.post-body img { border-radius: var(--radius-md); }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-hero { padding: 80px 0 8px; }
.about-hero .container { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.about-hero h1 { font-size: clamp(40px, 5vw, 60px); font-weight: 700; }
.about-hero p { font-size: 19px; color: var(--gray-700); margin: 22px 0 0; max-width: 540px; }
.about-hero .about-figure { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.about-hero .about-figure img { width: 100%; height: 100%; object-fit: cover; }

/* story / mission two-up */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.story p { font-size: 17px; color: var(--gray-700); margin: 0 0 16px; }
.story p b { color: var(--navy); font-weight: 600; }
.story .hand { font-size: 24px; margin-top: 6px; }
.story .about-figure { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.story .about-figure img { width: 100%; height: 100%; object-fit: cover; }

/* mission stat band */
.mission-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.mission-stats .ms { padding: 4px; }
.mission-stats .ms .n { font-size: clamp(30px,3.4vw,42px); font-weight: 700; color: var(--navy); line-height: 1; letter-spacing: -0.03em; }
.mission-stats .ms .n .u { color: rgba(28,76,152,0.5); font-weight: 400; }
.mission-stats .ms .l { margin-top: 8px; color: var(--gray-500); font-size: 14px; }

/* team grid */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.member { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-lg);
  padding: 26px 22px; text-align: center; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease; }
.member:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.avatar-lg { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-size: 28px; font-weight: 600; letter-spacing: 0.01em; position: relative; }
.avatar-lg.photo { background: var(--lavender-bg); }
/* min-height:0 stops a tall portrait source (e.g. pk.jpg 516x640) from inflating the grid row and overflowing the circle */
.avatar-lg img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center 22%; border-radius: 50%; display: block; }
/* hand-drawn (open, slightly wobbly) marker circle around every team member */
.member:not(.position) .avatar-lg::before {
  content: ""; position: absolute; inset: -11px; pointer-events: none; transform: rotate(-5deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M52 7 C74 6 93 24 92 49 C91 73 72 93 47 92 C23 91 7 70 9 45 C11 23 27 9 50 8 C58 8 65 10 71 13' fill='none' stroke='%23F8B400' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.member h3 { font-size: 18px; margin-bottom: 3px; }
.member .role { color: var(--blue); font-size: 13.5px; font-weight: 500; }
.member.hiring { background: var(--navy); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.team-note { text-align: center; color: var(--gray-500); font-size: 14.5px; margin-top: 36px; }
.team-note b { color: var(--navy); font-weight: 600; }

/* open-position cards (in the careers grid) */
.careers-grid { grid-template-columns: repeat(2, 1fr); max-width: 740px; margin: 0 auto; }
.member.position { text-decoration: none; cursor: pointer; }
.member.position:hover { text-decoration: none; }
.member.position .position-ico { background: var(--lavender-bg); color: var(--navy); }
.member.position .position-ico svg { width: 30px; height: 30px; }
.member.position .position-cta { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--blue); }
.member.position:hover .position-cta { color: var(--navy); }

/* career detail page */
.career-hero { background: var(--lavender-bg); padding: 44px 0 48px; }
.career-hero .container { max-width: 920px; }
.career-hero .post-back { color: var(--gray-600, #5E5E5E); }
.career-pills { display: flex; gap: 8px; margin: 22px 0 14px; }
.career-pills .pill { font-size: 12px; font-weight: 600; color: var(--navy); background: rgba(255,255,255,0.7);
  padding: 5px 12px; border-radius: var(--radius-full); }
.career-hero h1 { font-size: clamp(30px, 4.4vw, 48px); font-weight: 700; margin: 0 0 14px; max-width: 16ch; }
.career-blurb { font-size: 18px; color: var(--gray-700); margin: 0; max-width: 60ch; }
.career-grid { max-width: 920px; display: grid; grid-template-columns: 1.7fr 1fr; gap: 48px; align-items: start; }
.career-main h2 { font-size: 20px; margin: 0 0 14px; }
.career-main h2:not(:first-child) { margin-top: 36px; }
.career-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.career-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: var(--gray-900); line-height: 1.45; }
.career-list li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 5px;
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D3461' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat; }
.career-aside { position: sticky; top: 96px; }
.career-card { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-md); }
.cc-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
.cc-row .cc-k { color: var(--gray-500); font-size: 13px; }
.cc-row .cc-v { color: var(--navy); font-size: 14px; font-weight: 600; }
.cc-apply { width: 100%; justify-content: center; margin-top: 18px; }
.cc-link { display: block; text-align: center; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--blue); }

/* values */
.values { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.value { padding: 28px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.value .v-k { font-family: var(--font-hand); font-size: 24px; color: var(--yellow); line-height: 1; }
.value h3 { font-size: 18px; margin: 12px 0 8px; }
.value p { color: var(--gray-700); font-size: 15px; margin: 0; }

/* ============================================================
   DMP — Deep Model Processing (engine page)
   ============================================================ */
/* —— HERO: navy "engine room" —— */
.dmp-hero { position: relative; background: var(--navy); color: #fff; padding: 56px 0 92px; overflow: hidden; }
.dmp-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(1250px 820px at 80% -12%, rgba(180,180,216,0.44), rgba(180,180,216,0.14) 38%, rgba(180,180,216,0) 66%); }
.dmp-hero > .container { position: relative; z-index: 1; }
.dmp-hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; }
.dmp-hero .post-back { display: block; width: max-content; margin-bottom: 28px; color: rgba(255,255,255,0.6); font-size: 14px; }
.dmp-hero .post-back:hover { color: #fff; }
.dmp-hero .eyebrow { color: rgba(255,255,255,0.72); margin-bottom: 16px; }
.dmp-hero .eyebrow::after { display: none; }
.dmp-hero h1 { color: #fff; margin: 0; line-height: 1; }
.dmp-acro { display: block; font-size: clamp(58px, 9vw, 104px); font-weight: 700; letter-spacing: -0.04em; }
.dmp-sub { display: block; font-size: clamp(22px, 3.1vw, 34px); font-weight: 600; color: var(--lavender); letter-spacing: -0.02em; margin-top: clamp(16px, 1.8vw, 26px); }
.dmp-hero .dmp-lede { color: rgba(255,255,255,0.82); max-width: 520px; margin: 26px 0 0; }
.dmp-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.dmp-hero-meta span { font-size: 13px; font-weight: 600; color: #fff; background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16); padding: 8px 15px; border-radius: var(--radius-full); }
.dmp-hero-fig { background: #fff; border-radius: var(--radius-xl); padding: 16px; box-shadow: var(--shadow-lg); }
.dmp-hero-fig img { width: 100%; height: auto; display: block; border-radius: 12px; }

/* —— "pop": load-entrance choreography (plays once when the DMP page opens) —— */
.dmp-acro { position: relative; display: inline-block; }
.dmp-acro > span { display: inline-block; will-change: transform, opacity;
  animation: dmp-pop .72s cubic-bezier(.18,.9,.22,1.14) both; }
.dmp-acro > span:nth-child(1) { animation-delay: .10s; }
.dmp-acro > span:nth-child(2) { animation-delay: .22s; }
.dmp-acro > span:nth-child(3) { animation-delay: .34s; }
/* breathing lavender halo behind the wordmark (AI surface) */
.dmp-acro::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: 124%; height: 168%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(180,180,216,0.55), rgba(180,180,216,0) 72%);
  filter: blur(8px); opacity: 0;
  animation: dmp-halo-in 1s ease .18s forwards, dmp-breathe 6s ease-in-out 1.25s infinite; }
/* signature yellow brand underline that draws in under DMP (echoes the home hero) */
.dmp-acro::after { content: ""; position: absolute; left: 3px; bottom: -2px; height: 9px; width: 0;
  background: var(--yellow); border-radius: var(--radius-full);
  animation: dmp-underline .55s cubic-bezier(.2,.8,.2,1) .62s forwards; }
.dmp-hero .post-back { animation: dmp-fade .6s ease both; }
.dmp-hero .dmp-sub  { animation: dmp-rise .7s cubic-bezier(.2,.8,.2,1) .46s both; }
.dmp-hero .dmp-lede { animation: dmp-rise .7s cubic-bezier(.2,.8,.2,1) .58s both; }
.dmp-hero-meta      { animation: dmp-rise .7s cubic-bezier(.2,.8,.2,1) .70s both; }
.dmp-hero-meta span { will-change: transform; }
.dmp-hero-fig       { animation: dmp-zoom .9s cubic-bezier(.2,.8,.2,1) .30s both; }

@keyframes dmp-pop { 0% { opacity: 0; transform: translateY(48px) scale(.7); }
  62% { opacity: 1; transform: translateY(-7px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dmp-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dmp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dmp-zoom { from { opacity: 0; transform: scale(.94) translateY(14px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes dmp-halo-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dmp-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .8; }
  50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; } }
@keyframes dmp-underline { from { width: 0; } to { width: calc(100% - 3px); } }

@media (prefers-reduced-motion: reduce) {
  .dmp-acro > span, .dmp-acro::before, .dmp-acro::after, .dmp-hero .post-back,
  .dmp-hero .dmp-sub, .dmp-hero .dmp-lede, .dmp-hero-meta, .dmp-hero-fig {
    animation: none; opacity: 1; transform: none; }
  .dmp-acro::after { width: calc(100% - 3px); }
  .dmp-acro::before { opacity: .8; }
}

/* —— shared copy: every band is full-width; text capped for readability —— */
.dmp-band h2, .dmp-split h2 { font-size: clamp(26px, 3.2vw, 38px); margin: 14px 0 0; max-width: 820px; }
.dmp-lede { font-size: 20px; line-height: 1.55; }
.dmp-p { font-size: 17px; color: var(--gray-700); line-height: 1.75; margin: 20px 0 0; max-width: 680px; }
.dmp-band .eyebrow::after, .dmp-split .eyebrow::after { display: none; }
/* header-left / body-right lead so text sections fill the band like the hero */
.dmp-lead { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.dmp-lead .dmp-p { max-width: 540px; }
.dmp-lead .dmp-p:first-child { margin-top: 0; }

/* —— problem: today's defects, listed then struck out as the section scrolls in —— */
/* Each defect is the ink of "today"; a navy pen-stroke nixes it and dims it to grey —
   the visual claim that DMP closes them. The resolution beat speaks in the AI voice. */
.dmp-defects { margin-top: 38px; }
.dmp-defects.reveal { opacity: 1; transform: none; transition: none; } /* observer host only — no fade */
.dmp-defects-list { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px;
  margin: 0; padding: 0; list-style: none; }
.dmp-defect-sep { color: var(--taupe); font-size: 12px; line-height: 1; user-select: none;
  transform: translateY(-1px); }
.dmp-defect-label { position: relative; display: inline-block; white-space: nowrap;
  font-size: clamp(17px, 1.9vw, 21px); font-weight: 500; letter-spacing: -0.01em;
  color: var(--navy); transition: color .55s ease; transition-delay: calc(var(--i, 0) * 150ms); }
/* the strike — a pen-stroke across the word, a touch off-level so it reads hand-struck */
.dmp-defect-label::after { content: ""; position: absolute; left: -3px; right: -3px; top: 55%;
  height: 2px; border-radius: 2px; background: var(--navy);
  transform: scaleX(0) rotate(-1.3deg); transform-origin: left center;
  transition: transform .5s cubic-bezier(.65,.02,.1,1); transition-delay: calc(var(--i, 0) * 150ms); }
.dmp-defects.in .dmp-defect-label { color: var(--gray-400); }
.dmp-defects.in .dmp-defect-label::after { transform: scaleX(1) rotate(-1.3deg); }
/* resolution beat — arrives after the last strike, in the AI/DMP (lavender) voice */
.dmp-defects-resolve { display: flex; align-items: center; gap: 10px; margin: 22px 0 0;
  font-family: var(--font-hand); font-size: 23px; line-height: 1; color: var(--blue);
  opacity: 0; transform: translateY(6px); transition: opacity .55s ease, transform .55s ease; }
.dmp-defects.in .dmp-defects-resolve { opacity: 1; transform: none; transition-delay: 1s; }
.dmp-defects-check { display: inline-grid; place-items: center; width: 23px; height: 23px;
  flex: none; border-radius: var(--radius-full); background: var(--lavender-bg);
  color: var(--blue); font-family: var(--font); font-size: 12px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .dmp-defect-label, .dmp-defect-label::after, .dmp-defects-resolve { transition: none; }
}

/* —— pipeline: input → DMP → output —— */
.dmp-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 12px; margin-top: 44px; }
.dmp-flow-node { background: #fff; border-radius: var(--radius-lg); padding: 22px 20px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 9px; }
.dmp-flow-node .k { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.dmp-flow-node strong { font-size: 15.5px; font-weight: 600; color: var(--navy); line-height: 1.35; }
.dmp-flow-node.is-engine { background: var(--navy); box-shadow: var(--shadow-lg); }
.dmp-flow-node.is-engine .k { color: var(--lavender); }
.dmp-flow-node.is-engine strong { color: #fff; }
.dmp-flow-arrow { align-self: center; color: var(--lavender); font-size: 22px; font-weight: 700; }
.dmp-caps { margin-top: 32px; }
.dmp-caps .k { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); }
.dmp-caps-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 13px; }
.dmp-caps-row span { font-size: 13.5px; font-weight: 600; color: var(--navy); background: #fff; padding: 9px 15px;
  border-radius: var(--radius-full); box-shadow: var(--shadow-sm); }
.dmp-caps-note { margin: 16px 0 0; font-family: var(--font-hand); font-size: 22px; color: var(--blue); }

/* —— scroll-triggered cascade + "processing" motion for the pipeline & caps —— */
/* The .reveal on these containers exists only to receive .in from the observer;
   the container itself stays put while its children animate in sequence. */
.dmp-flow.reveal, .dmp-caps.reveal { opacity: 1; transform: none; transition: none; }

/* pipeline nodes lift + fade; arrows fade only (so the mobile 90° rotate survives) */
.dmp-flow .dmp-flow-node { opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease; }
.dmp-flow.in .dmp-flow-node { opacity: 1; transform: none; }
.dmp-flow .dmp-flow-arrow { opacity: 0; transition: opacity .55s ease; }
.dmp-flow.in .dmp-flow-arrow { opacity: 1; }
/* left → right cascade: input → arrow → engine → arrow → output */
.dmp-flow.in > *:nth-child(1) { transition-delay: .04s; }
.dmp-flow.in > *:nth-child(2) { transition-delay: .18s; }
.dmp-flow.in > *:nth-child(3) { transition-delay: .32s; }
.dmp-flow.in > *:nth-child(4) { transition-delay: .46s; }
.dmp-flow.in > *:nth-child(5) { transition-delay: .60s; }
/* once landed, the engine keeps a soft "processing" glow and the arrows drift */
.dmp-flow.in .dmp-flow-node.is-engine { animation: dmp-engine-glow 3.4s ease-in-out 1.1s infinite; }
@keyframes dmp-engine-glow {
  0%, 100% { box-shadow: var(--shadow-lg); }
  50% { box-shadow: var(--shadow-lg), 0 0 0 5px rgba(180,180,216,0.22), 0 0 32px rgba(28,76,152,0.22); } }
.dmp-flow.in .dmp-flow-arrow { animation: dmp-arrow-flow 2.6s ease-in-out 1.3s infinite; }
@keyframes dmp-arrow-flow {
  0%, 100% { transform: translateX(0); opacity: .7; }
  50% { transform: translateX(5px); opacity: 1; } }

/* "under the hood" label, capability pills and note stagger in */
.dmp-caps .k, .dmp-caps .dmp-caps-row span, .dmp-caps .dmp-caps-note {
  opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.dmp-caps.in .k, .dmp-caps.in .dmp-caps-row span, .dmp-caps.in .dmp-caps-note {
  opacity: 1; transform: none; }
.dmp-caps.in .k { transition-delay: 0s; }
.dmp-caps.in .dmp-caps-row span:nth-child(1) { transition-delay: .12s; }
.dmp-caps.in .dmp-caps-row span:nth-child(2) { transition-delay: .22s; }
.dmp-caps.in .dmp-caps-row span:nth-child(3) { transition-delay: .32s; }
.dmp-caps.in .dmp-caps-note { transition-delay: .46s; }

/* —— annotated transform exhibit (replaces the bare floating render) —— */
.dmp-exhibit { margin: 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(29,52,97,0.07);
  background: radial-gradient(125% 120% at 50% 0%, #f5f6fc 0%, #e9eaf5 55%, #e1e4f1 100%); }
.dmp-exhibit-head { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; padding: 20px 24px 2px; }
.dmp-exhibit-tag { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--navy);
  background: #fff; padding: 6px 13px; border-radius: var(--radius-full); box-shadow: var(--shadow-sm); }
.dmp-exhibit-sub { font-size: 13.5px; color: var(--gray-500); }
.dmp-exhibit-img { padding: 8px 20px 22px; }
.dmp-exhibit-img img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }

/* —— cards (principles / moat) —— */
.dmp-cards { display: grid; gap: 22px; margin-top: 44px; }
.dmp-cards.three { grid-template-columns: repeat(3, 1fr); }
.dmp-cards.two { grid-template-columns: repeat(2, 1fr); }
.dmp-card { background: #fff; border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease; }
.dmp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.dmp-card .n { display: block; font-family: var(--font-hand); font-size: 30px; line-height: 1; color: var(--yellow); }
.dmp-card h3 { font-size: 19px; margin: 12px 0 8px; }
.dmp-card p { font-size: 15.5px; color: var(--gray-700); line-height: 1.65; margin: 0; }
.dmp-bundles { display: flex; gap: 12px; margin-top: 20px; }
.dmp-bundles img { width: 30px; height: 30px; }

/* —— interactive model viewer (live <model-viewer> 3D embed) —— */
.dmp-viewer { position: relative; margin-top: 44px; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--lavender-bg); }
.dmp-viewer model-viewer { width: 100%; height: clamp(360px, 46vw, 560px); display: block;
  --poster-color: transparent; background: radial-gradient(120% 120% at 50% 0%, #f4f5fb 0%, #e7e9f4 60%, #dfe2f0 100%); }
.dmp-viewer-hint { position: absolute; bottom: 16px; left: 16px; z-index: 2; pointer-events: none;
  font-size: 13px; color: var(--navy); background: rgba(255,255,255,0.82); backdrop-filter: blur(4px);
  padding: 6px 12px; border-radius: var(--radius-full); box-shadow: var(--shadow-sm); }
.dmp-viewer-tag { position: absolute; top: 16px; left: 16px; z-index: 2; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); background: #fff; padding: 6px 12px;
  border-radius: var(--radius-full); box-shadow: var(--shadow-sm); }
/* IFC ↔ gbXML before/after comparison wipe (two synced viewers) */
.dmp-compare .dmp-cmp-stage { position: relative; width: 100%; height: clamp(360px, 46vw, 560px); --split: 50%; }
.dmp-compare .dmp-cmp-mv { position: absolute; inset: 0; width: 100%; height: 100%; }
.dmp-compare .dmp-cmp-top { position: absolute; inset: 0; pointer-events: none; will-change: clip-path;
  clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.dmp-cmp-label { position: absolute; bottom: 16px; z-index: 5; pointer-events: none; display: flex; flex-direction: column;
  line-height: 1.1; font-size: 12.5px; font-weight: 600; color: var(--navy); background: rgba(255,255,255,0.82);
  backdrop-filter: blur(6px); padding: 6px 12px; border-radius: var(--radius-full); box-shadow: var(--shadow-sm); }
.dmp-cmp-label small { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; }
.dmp-cmp-label.is-left { left: 16px; }
.dmp-cmp-label.is-right { right: 16px; align-items: flex-end; }
/* IFC-only view toggle: elements ↔ rooms */
.dmp-cmp-iftoggle { position: absolute; top: 52px; left: 16px; z-index: 7; display: flex; gap: 3px; padding: 3px;
  background: rgba(255,255,255,0.86); backdrop-filter: blur(6px); border-radius: var(--radius-full); box-shadow: var(--shadow-sm); }
.dmp-cmp-iftoggle button { border: none; cursor: pointer; background: transparent; color: var(--gray-700); font-family: var(--font);
  font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: var(--radius-full); transition: background .15s ease, color .15s ease; }
.dmp-cmp-iftoggle button:hover { color: var(--navy); }
.dmp-cmp-iftoggle button.is-active { background: var(--navy); color: #fff; }
.dmp-cmp-divider { position: absolute; top: 0; bottom: 0; left: var(--split); width: 44px; margin-left: -22px; z-index: 6;
  display: flex; align-items: center; justify-content: center; cursor: ew-resize; touch-action: none; }
.dmp-cmp-divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
  background: rgba(255,255,255,0.95); box-shadow: 0 0 0 1px rgba(29,52,97,0.12); }
.dmp-cmp-handle { flex: none; position: relative; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--navy);
  display: grid; place-items: center; box-shadow: 0 2px 8px rgba(29,52,97,0.28), 0 0 0 1px rgba(29,52,97,0.10);
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease; }
.dmp-cmp-divider:hover .dmp-cmp-handle, .dmp-compare.is-dragging .dmp-cmp-handle {
  transform: scale(1.08); background: var(--navy); color: #fff; box-shadow: 0 5px 16px rgba(29,52,97,0.40); }
.dmp-cmp-handle svg { width: 20px; height: 20px; }
.dmp-compare.is-dragging .dmp-cmp-divider::before { background: var(--yellow); }
.dmp-cmp-divider:focus-visible { outline: none; }
.dmp-cmp-divider:focus-visible .dmp-cmp-handle { box-shadow: 0 0 0 3px var(--yellow); }

/* —— closing CTA spacing —— */
.dmp-cta { padding-top: 92px; padding-bottom: 104px; }

/* —— generic split: copy + figure —— */
.dmp-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center; }
.dmp-figure { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); background: #fff; }
.dmp-figure img { width: 100%; height: auto; display: block; }

.section.tint-gray { background: var(--gray-50); }

@media (max-width: 900px) { .dmp-cards.three, .dmp-cards.two { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .dmp-hero-grid, .dmp-split, .dmp-lead { grid-template-columns: 1fr; gap: 34px; }
  .dmp-hero-fig { transform: none; }
  .dmp-split .dmp-figure { order: 2; }
  .dmp-flow { grid-template-columns: 1fr; }
  .dmp-flow-arrow { transform: rotate(90deg); justify-self: center; }
  /* keep the stacked arrows rotated — drop the desktop horizontal drift */
  .dmp-flow.in .dmp-flow-arrow { animation: none; opacity: 1; }
}

/* The interactive playground configurator (used on the home "Spiel den Workflow durch" section and
   the standalone /playground page) is styled in the PLAYGROUND block further down (.pg-grid etc.). */

/* ============================================================
   CTA BAND + FOOTER (navy)
   ============================================================ */
.cta-band { background: var(--navy); border-radius: var(--radius-xl); padding: 64px 56px; text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { color: #fff; font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; }
.cta-band p { color: rgba(255,255,255,0.8); font-size: 18px; margin: 16px auto 30px; max-width: 540px; }
.cta-band .hand { color: var(--yellow-light); }
/* the secondary CTA button always sits on the navy band — one rule instead of repeating
   the white-on-navy override inline on every page (home, about, post, dmp) */
.cta-band .btn-outline { color: #fff; border-color: rgba(255,255,255,0.3); }
.cta-band .btn-outline:hover { color: #fff; border-color: #fff; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.section.navy h2, .section.navy p { color: #fff; }

/* ── Footer — a calm, structured sign-off. Two tiers: brand + claim with grouped nav on top,
      then a hairline-divided legal bar (copyright · legal · language). Full-bleed navy, set apart
      from the rounded CTA band above by the white gutter around that card. ── */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.7); padding: 56px 0 30px; }

/* tier 1 — brand identity (left) + grouped link columns (right) */
.footer-main { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 40px 64px; flex-wrap: wrap; padding-bottom: 36px; }
.footer-identity { display: flex; flex-direction: column; gap: 16px; max-width: 32ch; }
.footer-brand img { height: 26px; display: block; }
.footer-claim { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.5); }
.footer-social { display: inline-flex; gap: 10px; margin-top: 2px; }
.footer-social-link { display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.18); transition: color .15s, background .15s, border-color .15s; }
.footer-social-link:hover { color: var(--navy); background: var(--yellow-light); border-color: var(--yellow-light); }
.footer-social-link svg { width: 18px; height: 18px; display: block; }
/* two tidy columns (product, then company) — order fills column 1 top-to-bottom, then column 2 */
.footer-nav { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 14px 56px; }
.footer-nav a { color: rgba(255,255,255,0.72); font-size: 14px; transition: color .15s; }
.footer-nav a:hover { color: var(--yellow-light); text-decoration: none; }

/* tier 2 — legal bar */
.footer-legal { display: flex; align-items: center; justify-content: space-between; gap: 14px 28px;
  flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 12.5px; color: rgba(255,255,255,0.4); }
.footer-copy { color: rgba(255,255,255,0.4); }
.footer-legal-links { display: inline-flex; gap: 20px; flex-wrap: wrap; }
.footer-legal-links a { color: rgba(255,255,255,0.55); transition: color .15s; }
.footer-legal-links a:hover { color: var(--yellow-light); text-decoration: none; }
.footer-lang { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: rgba(255,255,255,0.3); }
.footer-lang a { color: rgba(255,255,255,0.55); transition: color .15s; }
.footer-lang a:hover { color: var(--yellow-light); text-decoration: none; }
.footer-lang a.is-active { color: #fff; }
.footer-lang-sep { color: rgba(255,255,255,0.25); }

/* ============================================================
   LEGAL PAGES (Impressum + Datenschutz/Privacy)
   ============================================================ */
.legal .post-body { font-size: 16.5px; line-height: 1.72; }
.legal .post-body h2 { font-size: 20px; margin: 36px 0 10px; color: var(--navy); }
.legal-lede { font-size: 18px; line-height: 1.6; color: var(--gray-500); margin: 10px 0 0; }
.legal-address { font-style: normal; line-height: 1.7; margin: 0 0 26px; }
.legal-address strong { color: var(--navy); }
.legal-facts { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 8px 24px; margin: 0 0 12px; }
.legal-facts dt { font-weight: 600; color: var(--navy); }
.legal-facts dd { margin: 0; color: var(--gray-900); }
.legal-updated { font-size: 14px; color: var(--gray-500); margin-top: 28px; }
@media (max-width: 560px) {
  .legal-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .legal-facts dd { margin-bottom: 12px; }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .chip { animation: none; }  /* base transform keeps each chip at its --a angle (static ring) */
  .chip-card.is-changing, .chip-v.is-set, .chip-trend, .chip-trend-i, .hero-stage .stage-badge .live, .marquee-row { animation: none; }
  .dmp-flow .dmp-flow-node, .dmp-flow .dmp-flow-arrow,
  .dmp-caps .k, .dmp-caps .dmp-caps-row span, .dmp-caps .dmp-caps-note {
    opacity: 1; transform: none; transition: none; }
  .dmp-flow.in .dmp-flow-node.is-engine, .dmp-flow.in .dmp-flow-arrow { animation: none; }
  /* use-case timeline: show the lit end-state, no draw/pop/rise */
  .usecases::after { transform: scaleX(1); transition: none; }
  .usecases .uc-num { transform: none; background: var(--yellow-bg); border-color: var(--yellow); transition: none; }
  .uc-marker, .uc-card { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* below 900px: collapse the inline nav into a hamburger dropdown */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border: none; background: transparent; color: var(--navy); cursor: pointer; padding: 0; margin-left: 2px; }
  .nav-toggle svg { width: 24px; height: 24px; }
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    gap: 0; margin: 0; background: #fff; border-top: 1px solid var(--gray-100); box-shadow: var(--shadow-lg);
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: max-height .28s ease, opacity .2s ease; }
  .site-header.nav-open .nav-links { max-height: 360px; opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 14px 24px; font-size: 16px; border-bottom: 1px solid var(--gray-50, #F4F5F7); }
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-stage { max-width: 460px; }
  .ai-grid, .showcase, .story, .career-grid { grid-template-columns: 1fr; gap: 36px; }
  .career-aside { position: static; }
  .about-hero .container { grid-template-columns: 1fr; gap: 32px; }
  .domains { grid-template-columns: repeat(2, 1fr); }
  .domain.feature-wide { grid-column: span 2; grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .container { padding: 0 20px; }
  /* header: just logo + menu — the "Get in touch" CTA lives in the hamburger menu (plus the hero + page CTAs) */
  .header-row { height: 68px; }
  .brand img { height: 40px; }
  .nav-actions { display: none; }
  .nav-login { display: none; }
  /* the persistent CTA now lives in the bottom-right floating pill (revealed on scroll by main.js) */
  .floating-cta { display: inline-flex; }
  .careers-grid { grid-template-columns: 1fr; }
  /* hero: eyebrow fits cleanly, trust line stacks instead of wrapping with stray dots */
  .hero { padding: 40px 0 64px; }
  /* keep the two-line slogan on two lines — at 40px "Smarter decisions," alone overflows
     and wraps to three; scale it to the viewport so the manual <br> stays the only break */
  .hero h1 { font-size: clamp(28px, 8.4vw, 40px); }
  .eyebrow { font-size: 11px; letter-spacing: 0.08em; margin-bottom: 20px; }
  .hero-trust { flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 26px; }
  .hero-trust .dot { display: none; }
  .mission-stats { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  /* KPIs stack into a single column; the featured one keeps its cream panel */
  .stats { grid-template-columns: 1fr; max-width: 380px; gap: 12px; }
  .stats .stat { padding: 16px 8px; }
  .stats .stat.is-featured { padding: 28px 20px; }
  .domains, .blog-grid, .steps { grid-template-columns: 1fr; }
  .domains { grid-auto-rows: auto; }
  .domain.feature-wide { grid-column: span 1; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .compare { grid-template-columns: 1fr; }
  .compare .divider { display: none; }
  .cta-band { padding: 48px 24px; }
  .section { padding: 64px 0; }
  /* footer: brand block stacks above the nav columns; tighten the vertical rhythm */
  .site-footer { padding: 44px 0 28px; }
  .footer-main { gap: 32px 48px; padding-bottom: 30px; }
  .footer-nav { gap: 12px 48px; }
}

/* ============================================================
   Contact modal — pre-qualifies the request, then routes it
   ============================================================ */
.contact-overlay {
  position: fixed; inset: 0; height: 100dvh; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(29,52,97,0.42); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .2s ease;
}
.contact-overlay[hidden] { display: none; }
.contact-overlay.is-open { opacity: 1; }
/* while closing (or before opening) the invisible overlay must not swallow clicks —
   matters under prefers-reduced-motion where it lingers display:flex until the JS timeout */
.contact-overlay:not(.is-open) { pointer-events: none; }
body.contact-lock { overflow: hidden; }

.contact-modal {
  position: relative; width: 100%; max-width: 480px;
  max-height: calc(100dvh - 48px);
  display: flex; flex-direction: column; overflow: hidden;  /* scroll happens in .contact-scroll */
  background: #fff; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transform: translateY(8px) scale(0.98); transition: transform .22s ease;
}
.contact-overlay.is-open .contact-modal { transform: none; }
/* the scrolling body — close button + sticky footer sit outside it and stay put */
.contact-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 42px 36px 0; }
/* steps without a sticky footer (qualify, success) need their own bottom breathing room */
.contact-step:not(:has(.cf-actions)) { padding-bottom: 34px; }
/* the meeting form lays interest (left) beside the fields (right) — needs more width on desktop */
.contact-modal.is-wide { max-width: 820px; }

.contact-close {
  position: absolute; top: 16px; right: 16px; z-index: 4;
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-full); background: var(--gray-100);
  color: var(--navy); cursor: pointer; transition: background .15s ease;
}
.contact-close:hover { background: var(--gray-200); }
.contact-close svg { width: 18px; height: 18px; }
/* keyboard focus ring for the modal's buttons (matches the .domains convention elsewhere) */
.contact-choice:focus-visible,
.contact-back:focus-visible,
.contact-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.contact-step { display: none; }
.contact-step.is-active { display: block; animation: contact-fade .25s ease; }
/* opacity-only: a transform here would temporarily disable the sticky footer's positioning */
@keyframes contact-fade { from { opacity: 0; } to { opacity: 1; } }

.contact-eyebrow {
  font-family: var(--font-hand); color: var(--blue);
  font-size: 21px; line-height: 1; margin: 0 0 6px;
}
.contact-modal h3 { font-size: 25px; margin: 0 0 8px; }
.contact-lede { color: var(--gray-700); margin: 0 0 22px; font-size: 15px; }

/* ── qualify choices ── */
.contact-choices { display: flex; flex-direction: column; gap: 10px; }
.contact-choice {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  text-align: left; width: 100%; padding: 16px 18px;
  border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  background: #fff; cursor: pointer; color: var(--navy);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.contact-choice:hover { border-color: var(--navy); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.cc-text { display: flex; flex-direction: column; gap: 2px; }
.cc-title { font-weight: 600; font-size: 16px; }
.cc-sub { font-size: 13px; color: var(--gray-500); }
.cc-arr { color: var(--yellow); font-size: 18px; transition: transform .15s ease; flex-shrink: 0; }
.contact-choice:hover .cc-arr { transform: translateX(3px); }

/* primary route — "Get a quote" is the highlighted, recommended option */
.contact-choice.is-primary {
  border-color: var(--yellow); background: var(--yellow-bg);
  box-shadow: 0 6px 18px -10px rgba(248,180,0,0.55);
}
.contact-choice.is-primary:hover { border-color: var(--yellow); }
.contact-choice.is-primary .cc-arr { color: var(--navy); }
/* topics under the "Contact us" option — plain text (no pills) */
.cc-topics { display: block; margin-top: 6px; font-size: 13px; color: var(--gray-500); }

/* ── customer step ── */
.contact-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

/* ── form ── */
.contact-form { display: flex; flex-direction: column; gap: 20px; }
/* interest (left) | fields (right): stacked by default, side-by-side on desktop when the
   interest column is present (meeting route). Collapses to one column when interest is hidden. */
.cf-cols { display: flex; flex-direction: column; gap: 20px; }
.cf-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (min-width: 640px) {
  .cf-cols:has(> .cf-interest:not([hidden])) {
    display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 40px; align-items: start;
  }
}
.cf-field { display: flex; flex-direction: column; gap: 8px; }
/* first name / last name share a row; hidden fields (per route) are fully removed */
.cf-row { display: flex; gap: 12px; }
.cf-row > .cf-field { flex: 1; min-width: 0; }
.contact-form [hidden] { display: none !important; }
.cf-label { font-size: 13px; font-weight: 600; color: var(--navy); }
.cf-opt { font-weight: 400; color: var(--gray-400); }
.contact-form input,
.contact-form textarea {
  width: 100%; font-family: var(--font); font-size: 15px; color: var(--gray-900);
  padding: 11px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  background: var(--gray-50); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.contact-form textarea { resize: vertical; min-height: 76px; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none; border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(28,76,152,0.12);
}
.contact-form input.cf-invalid,
.contact-form textarea.cf-invalid { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,0.10); }

/* honeypot — kept in the DOM for bots, off-screen for humans */
.cf-botcheck { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


.cf-error { margin: 2px 0 0; color: #C0392B; font-size: 13px; font-weight: 500; }
/* sticky footer: the back + submit float as round icon buttons pinned to the bottom while the
   form scrolls BEHIND them (no white bar). The row itself is transparent and click-through; only
   the two buttons capture pointer events, so scrolling/typing behind them still works. */
.cf-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: sticky; bottom: 0; z-index: 2;
  margin-top: 8px; padding: 10px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  background: transparent; pointer-events: none;
}
.cf-actions > * { pointer-events: auto; }

/* round "back" icon — floats over the scrolling content */
.contact-back {
  flex: none; width: 48px; height: 48px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--gray-200); background: #fff; color: var(--navy);
  cursor: pointer; box-shadow: var(--shadow-card);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.contact-back svg { width: 20px; height: 20px; }
.contact-back:hover { border-color: var(--navy); transform: translateX(-2px); box-shadow: var(--shadow-card-hover); }

/* round accent "next / submit" icon */
.cf-go {
  flex: none; width: 56px; height: 56px; padding: 0; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 26px -10px rgba(248,180,0,0.75), 0 6px 16px -8px rgba(29,52,97,0.25);
}
.cf-go svg { width: 22px; height: 22px; }
.cf-go:hover { transform: translateX(2px); }
.cf-go[disabled] { opacity: 0.85; cursor: progress; transform: none; }
/* loading: swap the arrow for a spinner */
.cf-spin { display: none; width: 22px; height: 22px; border-radius: var(--radius-full);
  border: 2.5px solid rgba(29,52,97,0.25); border-top-color: var(--navy); animation: cf-spin .7s linear infinite; }
.cf-submit.is-loading .cf-go-arr { display: none; }
.cf-submit.is-loading .cf-spin { display: block; }
@keyframes cf-spin { to { transform: rotate(360deg); } }

/* ── quote pre-qualification stepper ── */
/* padding-right keeps the progress bar clear of the floating close (×) at the top-right */
.pq-head { margin-bottom: 26px; padding-right: 40px; }
.pq-bar { height: 4px; border-radius: var(--radius-full); background: var(--gray-200); overflow: hidden; }
.pq-bar-fill { display: block; height: 100%; width: 25%; background: var(--yellow); border-radius: var(--radius-full); transition: width .3s ease; }
.pq-count { margin: 9px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--gray-500); text-transform: uppercase; }
.pq-q { display: none; }
.pq-q.is-active { display: block; animation: contact-fade .25s ease; }
.pq-q h3 { font-size: 20px; margin: 0 0 4px; }
.pq-q h3:focus { outline: none; }
.pq-hint { margin: 0 0 12px; font-size: 13px; color: var(--gray-500); }
.pq-q h3 + .pq-options { margin-top: 14px; }
.pq-options { display: flex; flex-direction: column; gap: 10px; }
.pq-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; padding: 13px 16px;
  border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  background: #fff; cursor: pointer; color: var(--navy);
  font-family: var(--font); font-size: 15px; font-weight: 500;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}
.pq-opt:hover { border-color: var(--navy); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.pq-opt.is-selected { border-color: var(--yellow); background: var(--yellow-bg); }
.pq-opt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pq-opt--rich { align-items: flex-start; }
.pq-opt-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.pq-opt-name { font-weight: 600; font-size: 14px; color: var(--navy); }
.pq-opt-desc { font-weight: 400; font-size: 12.5px; line-height: 1.45; color: var(--gray-700); }
/* selection check — empty placeholder keeps text alignment steady until picked */
.pq-opt::after { content: ""; width: 20px; height: 20px; flex-shrink: 0; }
.pq-opt.is-selected::after {
  content: "✓"; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); background: var(--yellow); color: var(--navy);
  font-size: 12px; font-weight: 700;
}
[data-pq-next][disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* per-question eyebrow (e.g. "Dein Umfang", "Deine Services") */
.pq-eyebrow { font-family: var(--font-hand); color: var(--blue); font-size: 19px; line-height: 1; margin: 0 0 6px; }

/* ── stepper: card selector (Frage 3 — Arbeitsmodell) ── */
.pq-cards { display: flex; flex-direction: column; gap: 16px; }
.pq-q h3 + .pq-cards { margin-top: 18px; }
.pq-card {
  position: relative; display: flex; flex-direction: column; gap: 9px;
  width: 100%; text-align: left; padding: 20px 22px;
  border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  background: #fff; cursor: pointer; color: var(--navy); font-family: var(--font);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}
.pq-card:hover { border-color: var(--navy); box-shadow: var(--shadow-card); transform: translateY(-2px); }
/* "featured" (recommended) = yellow OUTLINE only — must look clearly UNselected, so picking the
   other card doesn't leave this one looking chosen. Only .is-selected gets the filled treatment. */
.pq-card.is-featured { border-color: var(--yellow); border-width: 2px; background: #fff; }
.pq-card.is-selected { border-color: var(--yellow); border-width: 2px; background: var(--yellow-bg); box-shadow: 0 6px 18px -10px rgba(248,180,0,0.55); }
/* once a card is chosen (.has-pick added in JS, not :has — 100% reliable invalidation), a
   featured-but-unselected card drops its accent to a neutral border, so picking the other card
   never leaves "Leistungspakete" looking highlighted */
.pq-cards.has-pick .pq-card.is-featured:not(.is-selected) { border-color: var(--gray-200); border-width: 1px; }
.pq-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* selected marker — distinct from the always-yellow "featured" highlight */
.pq-card.is-selected::after {
  content: "✓"; position: absolute; top: -10px; right: 16px;
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); background: var(--navy); color: #fff; font-size: 12px; font-weight: 700;
  box-shadow: var(--shadow-card);
}
.pq-card-title { font-weight: 600; font-size: 16px; }
.pq-card-text { font-size: 13px; line-height: 1.55; color: var(--gray-700); }
.pq-card-badge {
  position: absolute; top: -10px; left: 16px;
  background: var(--navy); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 10px; border-radius: var(--radius-full); box-shadow: var(--shadow-card);
}

/* ── form: interest checkboxes + contact-preference radios ── */
.cf-interest, .cf-pref { border: none; margin: 0; padding: 0; min-width: 0; }
.cf-interest > .cf-label, .cf-pref > .cf-label { display: block; float: none; margin-bottom: 14px; padding: 0; }
.cf-checks, .cf-pref { display: flex; flex-direction: column; gap: 13px; }
.cf-check, .cf-radio {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer; color: var(--gray-900); font-size: 14px; line-height: 1.4;
}
.cf-check input, .cf-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.cf-check-box, .cf-radio-dot {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  border: 1px solid var(--gray-400); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, background .15s ease;
}
.cf-check-box { border-radius: 6px; }
.cf-radio-dot { border-radius: var(--radius-full); }
.cf-check:hover .cf-check-box, .cf-radio:hover .cf-radio-dot { border-color: var(--navy); }
.cf-check input:checked ~ .cf-check-box { border-color: var(--yellow); background: var(--yellow); }
.cf-check input:checked ~ .cf-check-box::after { content: "✓"; color: var(--navy); font-size: 12px; font-weight: 700; }
.cf-radio input:checked ~ .cf-radio-dot { border-color: var(--yellow); }
.cf-radio input:checked ~ .cf-radio-dot::after { content: ""; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--yellow); }
.cf-check input:focus-visible ~ .cf-check-box, .cf-radio input:focus-visible ~ .cf-radio-dot { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── success ── */
.contact-step[data-step="success"] { text-align: center; padding: 12px 0 40px; }
.contact-step[data-step="success"].is-active { display: flex; flex-direction: column; align-items: center; }
.contact-step[data-step="success"] .contact-lede { width: 100%; max-width: 380px; margin-left: auto; margin-right: auto; white-space: pre-line; }
.contact-success-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: var(--radius-full); background: var(--yellow-bg); color: var(--navy);
}
.contact-success-mark svg { width: 26px; height: 26px; }
/* stack the success-step actions centered: booking CTA (15min choice) above the Close button */
.contact-step[data-step="success"] .contact-book { display: flex; width: fit-content; margin: 4px auto 0; }
/* the booking CTA is only un-hidden for the quote "15-min" choice; .btn's display would otherwise
   beat the [hidden] attribute, leaving a dead "#" button on the meeting/contact success screens */
.contact-book[hidden] { display: none !important; }
.contact-step[data-step="success"] .contact-done { display: flex; width: fit-content; margin: 8px auto 0; }

@media (max-width: 520px) {
  /* top-align and use the dynamic viewport height so the modal top is never pushed behind
     the iOS URL bar; the modal scrolls internally when the form is taller than the screen */
  .contact-overlay { align-items: flex-start; padding: 14px; }
  .contact-modal { border-radius: var(--radius-lg); max-height: calc(100dvh - 28px); }
  .contact-scroll { padding: 32px 22px 0; }
  .contact-modal h3 { font-size: 22px; }
  /* stack the paired fields full-width so name/company stay comfortable to type on phones */
  .cf-row { flex-direction: column; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-overlay, .contact-modal, .contact-step { transition: none; animation: none; }
}

/* ===== PRICING PAGE ===== */
/* hero — editorial statement on a soft warm-cream + lavender wash (no image) */
.pr-hero {
  position: relative;
  padding: 84px 0 76px;
  background:
    radial-gradient(900px 480px at 82% -8%, var(--lavender-bg) 0%, rgba(236,237,255,0) 60%),
    radial-gradient(760px 540px at -2% 28%, var(--warm-cream) 0%, rgba(255,238,210,0) 64%);
}
.pr-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.pr-hero h1 { font-size: clamp(33px, 4.6vw, 52px); font-weight: 700; line-height: 1.08; margin-top: 8px; }
.pr-hero h1 .mark { position: relative; white-space: nowrap; }
.pr-hero h1 .mark::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 6px; height: 14px; background: var(--yellow); z-index: -1; border-radius: 3px; opacity: .9; }
.pr-hero-lede { font-size: 19px; line-height: 1.55; color: var(--gray-700); max-width: 624px; margin: 22px auto 0; }

/* the three "Preismodell" principles, sitting on the hero wash */
.pr-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 54px; }
.pr-principle {
  background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg);
  padding: 28px 26px; box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pr-principle:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.pr-principle-n {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  font-weight: 700; font-size: 14px; color: var(--navy);
  background: var(--yellow-bg); border: 1px solid var(--warm-cream);
}
.pr-principle h3 { font-size: 19px; margin: 0 0 10px; }
.pr-principle p { margin: 0; color: var(--gray-700); font-size: 15px; line-height: 1.6; }

/* configurator layout — the project (right) carries the weight */
.pc { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 30px; align-items: start; margin-top: 6px; }
.pc-catalog { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pc-group { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-card); }
.pc-group-head { margin-bottom: 16px; }
.pc-group-head h3 { font-size: 19px; }
.pc-group-head p { margin: 4px 0 0; color: var(--gray-500); font-size: 14px; }
.pc-items { display: flex; flex-wrap: wrap; gap: 12px; }
.pc-items > .pc-item { flex: 1 1 200px; min-width: 0; }

/* a draggable catalog card */
.pc-item {
  position: relative; display: flex; flex-direction: column;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-md);
  background: var(--gray-50); cursor: grab;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}
.pc-item:hover { border-color: var(--navy); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.pc-item:active { cursor: grabbing; }
.pc-item.is-dragging { opacity: .45; }
.pc-item.is-added { border-color: var(--yellow); background: var(--yellow-bg); }
/* card header: the add button (fills the row) + an icon-only info toggle pinned right */
.pc-item-row { display: flex; align-items: center; }
.pc-item-main {
  display: flex; align-items: center; gap: 11px; flex: 1 1 auto; min-width: 0; padding: 14px 13px;
  background: none; border: 0; cursor: inherit; text-align: left; font-family: var(--font); color: var(--navy);
}
.pc-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--white); border: 1px solid var(--gray-100); }
.pc-ico img { width: 24px; height: 24px; object-fit: contain; }
.pc-ico--line { color: var(--navy); }
.pc-ico--line svg { width: 22px; height: 22px; }
/* "coin" badges (Leistungspakete): self-contained navy disc, no chip chrome */
.pc-ico--coin { background: none; border: 0; }
.pc-ico--coin svg { width: 38px; height: 38px; }
.pc-item-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pc-item-name { font-weight: 600; font-size: 14px; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
.pc-item-tag { font-size: 12.5px; color: var(--gray-500); line-height: 1.35; }
.pc-info-btn { flex: none; align-self: center; display: grid; place-items: center; margin: 0 10px 0 2px; padding: 6px; background: none; border: 0; cursor: pointer; color: var(--gray-400); }
.pc-info-btn:hover, .pc-info-btn[aria-expanded="true"] { color: var(--navy); }
.pc-info-i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 10.5px; font-style: italic; font-weight: 700; font-family: Georgia, "Times New Roman", serif; }
.pc-info { padding: 2px 14px 14px; }
.pc-info[hidden] { display: none; }
.pc-info-desc { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--gray-700); }

/* the full-platform card leads the software group, but styled as a peer of the other catalog
   cards (no accent border / no enlarged sizing) so no option looks preferred */
.pc-platform-bundles { display: flex; gap: 7px; margin-top: 7px; }
.pc-platform-bundles img { width: 19px; height: 19px; object-fit: contain; opacity: .92; }

/* single-bundles dropdown (the secondary option) */
.pc-bundles { margin-top: 14px; }
.pc-bundles-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 13px 16px;
  border-radius: var(--radius-md); background: var(--white); border: 1.5px dashed var(--gray-200); cursor: pointer;
  font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--gray-700);
  transition: border-color .15s, color .15s, background .15s;
}
.pc-bundles-toggle:hover { border-color: var(--navy); color: var(--navy); }
.pc-bundles-toggle[aria-expanded="true"] { border-style: solid; border-color: var(--navy); color: var(--navy); }
.pc-bundles-chev { flex: none; width: 18px; height: 18px; color: var(--gray-400); transition: transform .25s ease; }
.pc-bundles-chev svg { width: 18px; height: 18px; }
.pc-bundles-toggle[aria-expanded="true"] .pc-bundles-chev { transform: rotate(45deg); color: var(--navy); }
.pc-bundles-body { margin-top: 12px; }
.pc-bundles-body[hidden] { display: none; }
.pc-bundles-note { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--gray-500); }

/* a bundle's apps — information only (you buy the bundle, not the app) */
.pc-applist { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--gray-200); }
.pc-applist-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400); }
.pc-apps-info { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pc-app-info { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--gray-700); }
.pc-app-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.pc-app-dot.is-dev { background: transparent; border: 1.5px solid var(--gray-300); }
.pc-app-name { flex: 1 1 auto; min-width: 0; }
.pc-app-state { font-size: 11px; color: var(--gray-400); white-space: nowrap; }

/* the project — the drop target the user focuses on ("their building") */
.pc-project { position: sticky; top: 92px; }
.pc-project-card {
  background: var(--navy); color: #fff; border-radius: var(--radius-xl); padding: 26px 24px;
  box-shadow: var(--shadow-lg); border: 2px dashed rgba(255,255,255,0.2);
  transition: border-color .18s, box-shadow .18s, background .18s, transform .18s;
}
.pc.is-dragging-any .pc-project-card { border-color: rgba(248,180,0,.55); box-shadow: 0 0 0 3px rgba(248,180,0,.18), var(--shadow-lg); }
.pc-project-card.is-over { border-color: var(--yellow); border-style: solid; background: var(--navy-deep); box-shadow: 0 0 0 4px rgba(248,180,0,.3), var(--shadow-lg); transform: translateY(-2px); }
.pc-project-head { display: flex; align-items: center; gap: 13px; }
.pc-house { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,0.1); color: var(--yellow); }
.pc-house svg { width: 28px; height: 28px; }
.pc-project-titles { display: flex; flex-direction: column; gap: 2px; }
.pc-project-label { font-weight: 700; font-size: 18px; color: #fff; }
.pc-project-count { font-size: 13px; color: rgba(255,255,255,0.75); font-weight: 600; }
.pc-project-count[hidden] { display: none; }
.pc-dropzone { margin-top: 18px; }
.pc-project-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px;
  min-height: 152px; padding: 22px 16px; border-radius: var(--radius-lg); border: 1.5px dashed rgba(255,255,255,0.18); color: rgba(255,255,255,0.6);
}
.pc-project-empty[hidden] { display: none; }
.pc-empty-ico { width: 34px; height: 34px; color: rgba(255,255,255,0.5); }
.pc-empty-ico svg { width: 34px; height: 34px; }
.pc-empty-title { font-weight: 600; font-size: 14.5px; color: rgba(255,255,255,0.84); }
.pc-empty-hint { font-size: 12.5px; line-height: 1.45; max-width: 240px; color: rgba(255,255,255,0.5); }
.pc-project-card.is-over .pc-project-empty { border-color: var(--yellow); color: var(--yellow-light); }

/* dropped items — white mini-cards that pop on the navy project */
.pc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.pc-chip {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.97); box-shadow: var(--shadow-md); border-left: 3px solid var(--gray-200);
  animation: pc-chip-in .26s cubic-bezier(.2,.7,.3,1.2) both;
}
@keyframes pc-chip-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
.pc-chip.is-pulse { animation: pc-chip-pulse .5s ease; }
@keyframes pc-chip-pulse { 0%,100% { box-shadow: var(--shadow-md); } 40% { box-shadow: 0 0 0 3px var(--yellow), var(--shadow-md); } }
.pc-chip--platform { border-left-color: var(--yellow); }
.pc-chip--bundle { border-left-color: var(--blue); }
.pc-chip--service { border-left-color: var(--lavender); }
.pc-chip--extra { border-left-color: var(--taupe); }
.pc-chip-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--gray-50); color: var(--navy); }
.pc-chip-ico img { width: 22px; height: 22px; object-fit: contain; }
.pc-chip-ico svg { width: 20px; height: 20px; }
/* service "coin" badges carry their own navy disc — drop the chip chrome, let the coin fill */
.pc-chip--service .pc-chip-ico { background: none; }
.pc-chip--service .pc-chip-ico svg { width: 34px; height: 34px; }
.pc-chip-x { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--gray-100); border: 0; cursor: pointer; color: var(--gray-700); transition: background .15s, color .15s; }
.pc-chip-x:hover { background: var(--neg); color: #fff; }
.pc-chip-x svg { width: 14px; height: 14px; }

.pc-project-foot { margin-top: 18px; }
.pc-project-foot[hidden] { display: none; }
.pc-quote { width: 100%; justify-content: center; }
.pc-cta-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.55); text-align: center; }

.pr-trust-strip { padding: 56px 0; }

.pc-item-main:focus-visible, .pc-info-btn:focus-visible, .pc-bundles-toggle:focus-visible,
.pc-chip-x:focus-visible, .pc-quote:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pc-quote:focus-visible { outline-color: #fff; }

@media (max-width: 980px) {
  .pc { grid-template-columns: 1fr; }
  .pc-project { position: static; }
}
@media (max-width: 760px) {
  .pr-principles { grid-template-columns: 1fr; gap: 14px; }
  .pc-items > .pc-item { flex-basis: 100%; }
  .pr-hero { padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-principle, .pc-item, .pc-chip, .pc-bundles-chev, .pc-project-card { transition: none; animation: none; }
}

/* numberless principle heading (no .pr-principle-n) */
.pr-principle h3 { margin-top: 0; }
/* drag handle — signals draggability (no "+") */
.pc-grip { flex: none; width: 16px; height: 24px; display: grid; place-items: center; color: var(--gray-300); cursor: grab; }
.pc-grip svg { width: 13px; height: 19px; }
.pc-item:hover .pc-grip { color: var(--gray-400); }
.pc-item.is-added .pc-grip { color: var(--yellow); }
/* extras — no icon, detail shown inline */
.pc-item--noicon .pc-item-main { align-items: flex-start; }
.pc-item-desc { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--gray-500); }
/* Leistungspakete (service packages): stack the coin icon above the text so the long
   single-word names (e.g. "Wettbewerbsanalyse") fit on one line instead of hyphenating */
.pc-item[data-group="service"] .pc-item-row { align-items: flex-start; }
.pc-item[data-group="service"] .pc-item-main { flex-direction: column; align-items: flex-start; gap: 9px; padding: 14px 11px; }
.pc-item[data-group="service"] .pc-item-name { font-size: 13px; hyphens: none; overflow-wrap: normal; white-space: nowrap; }
.pc-item[data-group="service"] .pc-info-btn { align-self: flex-start; }

/* dropped chip without an icon (extras) */
.pc-chip--noico { padding-left: 13px; }
/* hand-written (Caveat) drag instruction above the configurator */
.pr-config-section .section-head { margin-bottom: 24px; }
.pr-drag-note { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 auto 34px; max-width: 700px; text-align: center; }
.pr-drag-note-txt { font-family: var(--font-hand); font-weight: 600; font-size: clamp(20px, 2.5vw, 27px); line-height: 1.15; color: var(--navy); }
.pr-drag-arrow { flex: none; width: 54px; height: 28px; }
.pr-drag-arrow svg { width: 54px; height: 28px; display: block; }

/* bundles: 2-up grid so the icon + name + tag have room (the 3-up flex was cramped) */
.pc-items--bundles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pc-items--bundles .pc-item-main { align-items: flex-start; }
/* cart: dropped items grouped by type, each with a short description */
.pc-chip-group-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,0.5); margin: 0 0 8px; }
.pc-chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pc-chip { align-items: flex-start; }
.pc-chip-ico { margin-top: 1px; }
.pc-chip-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pc-chip-name { font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.25; }
.pc-chip-desc { font-size: 11.5px; line-height: 1.4; color: var(--gray-500); }

/* ── MOBILE configurator (≤760px) ──
   Drag-and-drop is unusable on touch, so on phones the catalog cards become tap-to-add
   "+" buttons (no grip), the project/cart is lifted above the catalog, and the only
   floating CTA is a cart-gated "Get a quote" (the generic "Get in touch" pill is
   suppressed here, so nothing floats until the visitor adds their first item). */
@media (max-width: 760px) {
  /* cart at the top, catalog (the items you add) after it */
  .pc { gap: 18px; }
  .pc-project { order: -1; }

  /* tap-to-add: drop the drag handle + grab cursor, badge every card with a "+" */
  .pc-item, .pc-item:active, .pc-item-main { cursor: pointer; }
  .pc-grip { display: none; }
  .pc-item-main { padding-right: 12px; }
  .pc-item-main::after {
    content: ""; flex: none; align-self: center; margin-left: 8px;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 17px no-repeat;
    box-shadow: 0 2px 6px rgba(29,52,97,0.22);
  }
  /* added: the "+" turns into a check (the card itself already shifts to the yellow added state) */
  .pc-item.is-added .pc-item-main::after {
    background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 18px no-repeat;
  }

  /* single-bundles dropdown: one per row so the icon + name + tag breathe */
  .pc-items--bundles { grid-template-columns: 1fr; }

  /* drop the drag-only instructions (hand-written note + the cart's "drag here" hint) */
  .pr-drag-note { display: none; }
  .pc-empty-hint { display: none; }
  .pc-project-empty { min-height: 96px; padding: 18px 16px; }

  /* the project's "Get a quote" becomes the floating CTA. It reuses the existing
     cart-gated visibility (main.js hides .pc-project-foot while the cart is empty),
     so nothing floats until the first item is added. */
  body:has([data-pricing-config]) .floating-cta { display: none; }
  .pc-project-foot {
    position: fixed; left: auto; right: 16px; z-index: 90; margin: 0; width: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    animation: pc-fab-in .32s cubic-bezier(.2,.8,.2,1) both;
  }
  .pc-quote { width: auto; padding: 0 22px; box-shadow: 0 12px 28px -8px rgba(248,180,0,0.7), 0 2px 8px rgba(29,52,97,0.16); }
  .pc-cta-note { display: none; }
  /* breathing room so the floating pill never sits on top of the page-bottom content */
  body:has(.pc.has-items) { padding-bottom: 88px; }
}
@keyframes pc-fab-in { from { opacity: 0; transform: translateY(140%); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pc-project-foot { animation: none; } }
/* ===== END PRICING PAGE ===== */


/* ============================================================
   PLAYGROUND — orbit viewer + 6-step building-height configurator
   (page: /playground.html · scene: /assets/playground.splinecode)
   ============================================================ */
.pg { padding: 56px 0 96px;
  background:
    radial-gradient(900px 520px at 88% -4%, var(--lavender-bg) 0%, rgba(236,237,255,0) 58%),
    var(--white); }
.pg-grid { display: grid; gap: 24px; align-items: stretch;
  grid-template-columns: 296px minmax(0, 1fr) 312px;
  grid-template-areas: "config stage results"; }
.pg-panel   { grid-area: config; }
.pg-stage   { grid-area: stage; }
.pg-results { grid-area: results; }

/* ── left configurator rail ── */
.pg-panel { display: flex; flex-direction: column; gap: 8px; background: var(--white);
  border-radius: var(--radius-xl); padding: 16px; box-shadow: var(--shadow-card); }
.pg-title { font-size: clamp(22px, 2.2vw, 28px); margin: 9px 0 0; }
.pg-lede { font-size: 13.5px; color: var(--gray-700); line-height: 1.5; margin: 9px 0 16px; }

.pg-control { background: var(--gray-50); border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); padding: 9px 13px; }
.pg-control-label { display: block; margin-bottom: 6px; font-size: 11.5px; font-weight: 600;
  color: var(--navy); letter-spacing: 0.04em; text-transform: uppercase; }

/* segmented choice (window scaling: small / mid / large) */
.pg-segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pg-seg { appearance: none; border: 1px solid var(--gray-200); background: #fff;
  border-radius: var(--radius-md); height: 33px; font-family: var(--font);
  font-size: 13px; font-weight: 600; color: var(--gray-700); cursor: pointer;
  padding: 0; transition: background .14s ease, border-color .14s ease, color .14s ease; }
.pg-seg:hover { border-color: var(--navy); color: var(--navy); }
.pg-seg.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.pg-seg:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(28,76,152,0.25); }
/* two-up variant — for a 2-option choice (Heizsystem: Wärmepumpe / Fernwärme) so each label
   gets a full half-width column rather than a cramped third. */
.pg-segment-2 { grid-template-columns: 1fr 1fr; }

/* slider — brand fill via --p (0..1) set by the inline script */
.pg-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 22px;
  background: transparent; cursor: pointer; margin: 0; }
.pg-slider:focus { outline: none; }
/* simple: navy fill up to the thumb, light-gray track behind */
.pg-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--navy) calc(var(--p,0) * 100%), var(--gray-200) calc(var(--p,0) * 100%)); }
.pg-slider::-moz-range-track { height: 6px; border-radius: 999px; background: var(--gray-200); }
.pg-slider::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--navy); }
.pg-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: #fff; border: 3px solid var(--navy); box-shadow: var(--shadow-md);
  transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.pg-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--navy); box-shadow: var(--shadow-md); }
.pg-slider:active::-webkit-slider-thumb { transform: scale(1.12); }
.pg-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(28,76,152,0.25); }
/* AI optimum → thumbs glow yellow */
.pg-opt .pg-slider::-webkit-slider-thumb { background: var(--yellow); border-color: var(--navy); box-shadow: 0 0 0 4px rgba(248,180,0,.35), var(--shadow-md); }
.pg-opt .pg-slider::-moz-range-thumb { background: var(--yellow); border-color: var(--navy); }

/* Ausbaustandard slider — fill + thumb take the per-stop colour --ac (Simple=brown · Mid=grey · Luxus=blue),
   set on .pg-control-ausbau by the inline script and inherited by the track, thumb and stop labels. */
.pg-slider-ausbau::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--ac, var(--navy)) calc(var(--p,0) * 100%), var(--gray-200) calc(var(--p,0) * 100%)); }
.pg-slider-ausbau::-moz-range-progress { background: var(--ac, var(--navy)); }
.pg-slider-ausbau::-webkit-slider-thumb { border-color: var(--ac, var(--navy)); }
.pg-slider-ausbau::-moz-range-thumb { border-color: var(--ac, var(--navy)); }
.pg-ausbau-stops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; }
.pg-ausbau-stop { appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--gray-500);
  text-align: center; transition: color .14s ease; }
.pg-ausbau-stop:first-child { text-align: left; }
.pg-ausbau-stop:last-child { text-align: right; }
.pg-ausbau-stop:hover { color: var(--navy); }
.pg-ausbau-stop.is-active { color: var(--ac, var(--navy)); }

/* ── middle orbit viewer ── */
/* FIXED ASPECT RATIO is load-bearing: the building is framed high in the camera, so we recentre it
   with a CSS transform tuned for ONE aspect. Pinning the stage to a constant aspect (≈ the config
   panel's height at desktop) means resizing the window scales the stage proportionally instead of
   changing its shape — so the recentre transform stays correct and the model never gets clipped.
   align-self:start keeps the stage at its aspect height while config + results stretch equal. */
/* FIXED height: the stage must NOT stretch to the (tall) results column, or the model floats in a
   huge empty frame. This height hugs the model with sensible margins. The camera zoom is locked once
   in main.js (no measure loop); grid uses align-items:start so the columns just top-align. */
.pg-stage { position: relative; min-height: 560px; align-self: stretch;   /* stretch to the row height so the viewer matches the config + results columns (desktop) */
  border-radius: var(--radius-xl);
  overflow: hidden; border: 1px solid var(--gray-100); box-shadow: var(--shadow-warm);
  background: radial-gradient(120% 92% at 50% 2%, #fff 0%, var(--gray-50) 66%, #ECECE6 100%); }
/* Pre-fit fallback only. main.js MEASURES the building after load and writes an inline transform to
   zoom-to-fit + centre it (re-running on height/width changes); this static value just avoids a flash. */
/* Interaction: drag-to-orbit is enabled on pointer-fine devices (mouse/trackpad). On touch we keep
   pointer-events:none so a one-finger drag SCROLLS the page instead of getting trapped orbiting the
   canvas; touch-action:pan-y is a belt-and-braces guard for the same. The config rail (sliders/
   buttons) still drives the model everywhere — orbit is an extra, not the only way to interact. */
.pg-stage spline-viewer { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none; touch-action: pan-y; }
@media (hover: hover) and (pointer: fine) {
  .pg-stage spline-viewer { pointer-events: auto; cursor: grab; }
  .pg-stage spline-viewer:active { cursor: grabbing; }
}
.pg-stage-badge { position: absolute; left: 18px; top: 18px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 600; color: var(--navy); box-shadow: var(--shadow-sm); }
.pg-stage-badge .live { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow);
  box-shadow: 0 0 0 0 rgba(248,180,0,0.6); animation: pulse 2s infinite; }

/* ── AI optimiser button — flat vyzn navy pill (matches .btn-primary); yellow spark. On success it
   flips to the accent-yellow CTA, echoing the gold "Beste Variante" crown. No gradients/glow. ── */
.pg-ai { margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: none; border-radius: var(--radius-full); height: 48px; padding: 0 22px; cursor: pointer;
  font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--navy);
  background: var(--yellow); box-shadow: 0 6px 18px -6px rgba(248,180,0,0.6);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease; }
.pg-ai:hover { transform: translateY(-2px); background: var(--yellow-light); box-shadow: 0 10px 24px -8px rgba(248,180,0,0.7); }
.pg-ai:active { transform: translateY(0); }
.pg-ai:disabled { cursor: default; transform: none; }
.pg-ai:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(28,52,97,.35); }
.pg-ai-spark { width: 18px; height: 18px; color: var(--navy); flex: none; }
.pg-ai-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-ai-glow { display: none; }
.pg-ai.is-busy .pg-ai-spark { animation: pg-spin .9s linear infinite; }
@keyframes pg-spin { to { transform: rotate(360deg); } }
/* AI optimum → the chosen config segments highlight yellow too */
.pg-opt .pg-seg.is-active { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }

/* ── right results rail — flat list, apps under their 5 bundles (no border, no per-app bars) ── */
.pg-results { display: flex; flex-direction: column; gap: 10px;
  background: var(--white); border-radius: var(--radius-xl); padding: 14px 16px; box-shadow: var(--shadow-card); }
/* the ONE bold overall score, leading the panel — flips to a yellow pill + crown at the AI optimum */
.pg-results-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 9px 6px; border-bottom: 1px solid var(--gray-100); }
.pg-results-title { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gray-500); max-width: 92px; line-height: 1.35; }
.pg-score { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 6px; border-radius: var(--radius-md); }
.pg-score-crown { width: 19px; height: 19px; flex: none; color: var(--navy); align-self: center; margin-right: 1px; display: none; }
.pg-score-num { font-size: 33px; font-weight: 700; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.pg-score-max { font-size: 13px; font-style: normal; font-weight: 600; color: var(--gray-500); }
.pg-results.is-best .pg-score { background: var(--yellow); padding: 5px 13px; box-shadow: 0 6px 16px -6px rgba(248,180,0,.7); animation: pg-pop .55s cubic-bezier(.2,1.3,.4,1); }
.pg-results.is-best .pg-score-max { color: var(--navy); opacity: .55; }
.pg-results.is-best .pg-score-crown { display: inline-block; }
@keyframes pg-pop { 0% { transform: scale(.85); } 55% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* every app on one line — bundle icon in front · name · its result. Distributed to fill the column. */
.pg-applist { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.pg-kpi { display: flex; align-items: center; gap: 9px; padding: 0 4px; }
.pg-kpi-ico { width: 17px; height: 17px; flex: none; object-fit: contain; }
.pg-kpi-label { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-kpi-val { font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.pg-kpi-num { font-size: 13px; font-weight: 700; color: var(--navy); }
.pg-kpi-unit { font-size: 10px; font-style: normal; font-weight: 600; color: var(--gray-500); margin-left: 2px; }
.pg-compliant { font-size: 12px; font-weight: 600; color: var(--navy); white-space: nowrap; flex: none; }

/* live state: subtle ring only while the AI search runs */
.pg-results.is-thinking { box-shadow: 0 0 0 2px rgba(110,143,214,.4), var(--shadow-card); }
.pg-celebrate .pg-stage { animation: pg-flash 1.3s ease; }
@keyframes pg-flash { 0%,100% { box-shadow: var(--shadow-warm); } 32% { box-shadow: 0 0 0 3px rgba(248,180,0,.5), var(--shadow-warm); } }

/* ── responsive: 3 cols → single stack (viewer · config · results). The adaptive framing JS keeps
   the model fit + centred at every breakpoint, so the stage just needs a sensible height. */
@media (max-width: 1080px) {
  .pg-grid { grid-template-columns: 1fr; grid-template-areas: "stage" "config" "results"; gap: 22px; }
  .pg-stage { height: 60vh; min-height: 0; }   /* single-column: pure vh, drop the desktop stretch floor */
}
@media (max-width: 680px) {
  .pg-grid { gap: 18px; }
  .pg-stage { height: 56vh; }
  .pg-ai { margin-top: 6px; }
}
/* ===== END PLAYGROUND ===== */