/* ---------- COMMUNITYINDUSTRY — design tokens ---------- */
:root {
  --ink: #0A0A0A;
  --ash: #131313;
  --char: #1B1B1B;
  --line: rgba(237, 237, 237, 0.10);
  --line-2: rgba(237, 237, 237, 0.18);
  --bone: #EDEDED;
  --mist: #8A8A8A;
  --dim: #5A5A5A;
  --orange: #FF6A1A;
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
  --gut: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }
html {
  margin: 0;
  padding: 0;
  /* scroll-behavior smooth set in animations section, with reduced-motion fallback */
}
html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* overflow-x lives on body only — putting it on html alongside
   scroll-behavior breaks smooth-scroll on Safari/Chromium. */
body { font-feature-settings: "ss01", "ss02", "cv11"; overflow-x: hidden; }
::selection { background: var(--bone); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* layout */
.shell { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--gut); }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .gap-10 { gap: 40px; } .gap-12 { gap: 48px; }

/* type utilities */
.mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); font-weight: 400; }
.mono-bone { color: var(--bone); }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.eyebrow .tick { width: 18px; height: 1px; background: var(--mist); display: inline-block; }
.dot { width: 6px; height: 6px; border-radius: 999px; background: var(--bone); display: inline-block; }
.dot.live { background: #E83A2F; box-shadow: 0 0 0 0 rgba(232,58,47,.6); animation: pulse 1.6s ease-out infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(232,58,47,.6); }
  100% { box-shadow: 0 0 0 10px rgba(232,58,47,0); }
}

/* Reusable display headline (Geist semibold, big) */
.display {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.96;
}
.display.hairline { font-weight: 400; }
.display.semi { font-weight: 600; }

/* ---------- Global custom cursor ---------- */
/* Hide the OS cursor across the WHOLE page once the JS attaches the
   `has-custom-cursor` class. The `.hero { cursor: none }` rule below stays
   as a fallback for the moment between first paint and JS hydration so the
   hero never flashes a native arrow. Buttons/links opt back in. */
body.has-custom-cursor,
body.has-custom-cursor * { cursor: none !important; }
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor input,
body.has-custom-cursor textarea,
body.has-custom-cursor [role="button"] { cursor: none !important; }
.global-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 28px;
  margin-left: -1px; margin-top: -1px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity .15s ease;
  /* Single drop-shadow instead of 3 stacked. Each blur filter forces a
     separate GPU render pass on every cursor move (~60fps); cutting to
     one drops per-frame GPU work to 1/3 with a near-identical glow look. */
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.45));
  will-change: transform, opacity;
}
.global-cursor svg { display: block; }
.global-cursor.is-down { transform-origin: 0 0; }
/* On touch devices, never show — even if JS attaches the class somehow */
@media (hover: none) {
  body.has-custom-cursor,
  body.has-custom-cursor * { cursor: auto !important; }
  .global-cursor { display: none; }
}

/* Hero */
.hero {
  position: relative;
  height: 100svh;
  min-height: 720px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255,255,255,0.045), transparent 60%),
    var(--ink);
}
.hero::before {
  /* Subtle grid lines behind the stars — sits below the radial wash,
     above the page bg. The mask fades the grid out at the edges so it
     doesn't look like a hard-edged sheet of paper. */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0%, #000 25%, transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, #000 0%, #000 25%, transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 100%);
          mask-composite: intersect;
}
@media (max-width: 600px) {
  .hero::before { background-size: 48px 48px; }
}
.hero-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 260px 260px;
}

/* Star field — split into TWO canvases:
   .star-field-bg sits BEHIND the carousel + content (z-index: 1)
   .star-field-fg sits ON TOP so the cursor + lines paint over tiles
   (z-index: 20). Both are pointer-events:none. */
.star-field {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}
.star-field-bg { z-index: 1; }
.star-field-fg { z-index: 20; }
/* Hide the OS cursor only inside the hero, since the canvas paints its own
   glowing replacement. Buttons opt back in to a normal pointer. */
.hero { cursor: none; }
.hero a, .hero button { cursor: pointer; }
@media (hover: none) {
  /* Touch devices — keep the native tap experience, don't replace cursor */
  .hero { cursor: auto; }
}

/* Header */
.topnav {
  position: fixed;
  top: 24px; left: 0; right: 0;
  z-index: 100;
  display: flex; justify-content: center;
  padding: 0 var(--gut);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.topnav.is-hidden { transform: translate3d(0, -140%, 0); }
.nav-pill {
  display: inline-flex; align-items: center;
  gap: 32px;
  padding: 10px 12px 10px 26px;
  background: rgba(14, 14, 14, 0.78);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  box-shadow:
    0 20px 40px -16px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.06);
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.brand-mark {
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
}
/* CI. wordmark — replaces the old bitmap logo. The period is the
   brand accent and is always orange, in both the nav and the footer. */
.brand-wordmark, .foot-wordmark {
  display: block;
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--bone);
  text-transform: uppercase;
}
.brand-wordmark { font-size: 30px; }
.foot-wordmark { font-size: clamp(56px, 7vw, 96px); }
.brand-dot { color: var(--orange); }
.brand-mark .glyph {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: 4px;
  font-family: var(--font-sans); font-weight: 600; font-size: 12px;
  letter-spacing: -0.03em;
}
.navlinks { display: flex; gap: 26px; }
.navlinks a {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: rgba(237,237,237,0.7);
  transition: color .25s ease;
}
.navlinks a:hover { color: var(--bone); }
.nav-cta {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  background: var(--bone); color: var(--ink);
  border: 0;
  padding: 10px 18px; border-radius: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .2s ease, transform .2s ease;
  white-space: nowrap;
}
.nav-cta:hover { background: #FFFFFF; transform: translateY(-1px); }

@media (min-width: 761px) {
  .topnav {
    top: 26px;
    padding-inline: clamp(28px, 4.5vw, 76px);
  }
  .nav-pill {
    width: 100%;
    justify-content: space-between;
    gap: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Hamburger button — hidden on desktop, visible on mobile */
.nav-burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  align-items: center; justify-content: center;
  color: var(--bone);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  cursor: pointer;
  transition: background .2s ease;
}
.nav-burger:hover { background: rgba(255,255,255,0.06); }

@media (max-width: 760px) {
  .navlinks { display: none; }
  /* Handy zeigt jetzt denselben „Join us"-Button oben rechts wie Desktop —
     kein Hamburger-Menü mehr. */
  .nav-cta-desktop { display: inline-flex; }
  .nav-burger { display: none; }
  /* On mobile the header becomes a full-width solid rectangle pinned to
     the top of the screen — no floating pill, no rounded corners. */
  .topnav { top: 0; padding: 0; }
  .nav-pill {
    width: 100%;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 14px 16px;
    gap: 0;
    justify-content: space-between;
  }
  .nav-pill .brand-mark { font-size: 16px; }
}

/* Mobile menu — appears as a sheet at the top of the screen, content
   below remains visible (matches the reference where stars + headline
   show under the menu rather than being covered). */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1;
  background: #0a0a0a;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 88px 24px 28px;
  transform: translateY(-100%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
/* Mobile-Menü bleibt deaktiviert — der „Join us"-Button ersetzt es. */
.mobile-menu.is-open { transform: translateY(0); pointer-events: auto; }
.mobile-menu-links {
  display: flex; flex-direction: column;
  gap: 22px;
  margin-bottom: 28px;
}
.mobile-menu-links a {
  font-family: var(--font-sans);
  font-size: 17px; font-weight: 500;
  color: var(--bone);
  letter-spacing: -0.01em;
  padding: 4px 0;
}
.mobile-menu-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  background: var(--bone); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; font-weight: 500;
  padding: 16px 24px;
  border-radius: 14px;
  text-decoration: none;
}

/* Hero content */
.hero-inner {
  position: relative; z-index: 50;
  padding-top: clamp(120px, 13vh, 160px);
  padding-bottom: 8px;
  text-align: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mist);
}
.hero-eyebrow .tick { width: 28px; height: 1px; background: var(--mist); display: inline-block; }

.hero-title {
  margin: 18px auto 0;
  font-family: var(--font-sans); font-weight: 500;
  letter-spacing: -0.04em; line-height: 0.95;
  font-size: clamp(28px, 4vw, 52px);
  max-width: 26ch;
  text-shadow:
    0 0 24px rgba(255, 255, 255, 0.12),
    0 0 60px rgba(255, 255, 255, 0.08);
}
.hero-title .em,
.hero-title .word-roll-item {
  font-style: italic; font-weight: 700; color: var(--bone);
  background: linear-gradient(180deg, #FFFFFF, #B4B4B4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* Italic letters slant past their own bounding box. With
     -webkit-background-clip: text, the right edge of a slanted glyph (the
     "o" in "Into" was sitting at the very end of its span) gets clipped
     by the background-paint rect. Pad the span so the slant has room. */
  padding-right: 0.08em;
}
.hero-title .em-light {
  font-weight: 400;
  padding-right: 0.06em;
}

/* Each headline line is its own block so the copy breaks exactly where it
   was written, instead of relying on max-width to land the breaks. */
.hero-title .hl-line { display: block; }

/* missions / visions / goals — the word rolls upward on a loop. The track
   holds the three words plus a repeat of the first, so the jump back to
   translateY(0) at the end of the cycle is invisible. Height is 1.14em
   rather than 1em to give the descender of "goals" room inside the clip. */
.hero-title .word-roll {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  height: 1.14em;
  line-height: 1.14;
}
.hero-title .word-roll-track {
  display: block;
  animation: wordRoll 6.6s cubic-bezier(.76,0,.24,1) infinite;
}
.hero-title .word-roll-item {
  display: block;
  height: 1.14em;
  line-height: 1.14;
  white-space: nowrap;
}
@keyframes wordRoll {
  0%,   27%  { transform: translateY(0); }
  33.3%, 60% { transform: translateY(-1.14em); }
  66.6%, 93% { transform: translateY(-2.28em); }
  100%       { transform: translateY(-3.42em); }
}
.brk-mobile { display: none; }
@media (max-width: 600px) {
  .brk-mobile { display: inline; }
}
.hero-sub {
  margin: 6px auto 0;
  max-width: 52ch;
  color: rgba(237,237,237,0.62);
  font-size: clamp(14px, 1.25vw, 19px);
  line-height: 1.5;
}
.hero-cta-row {
  margin: 32px auto 0;
  display: inline-flex; align-items: center; gap: 18px;
}
@media (max-width: 600px) {
  .hero-inner { padding-top: clamp(140px, 17vh, 180px); }
  .hero-title { font-size: clamp(26px, 7.2vw, 38px); line-height: 1.08; max-width: 22ch; }
  .hero-title .em { white-space: normal; }
  .hero-sub { margin-top: 10px; }
  .hero-cta-row {
    margin-top: 26px;
    display: inline-flex;
    gap: 8px;
    width: auto;
    justify-content: center;
  }
  .hero-cta-row .btn-primary,
  .hero-cta-row .btn-secondary {
    flex: 0 0 auto;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 13px 22px;
    border-radius: 14px;
  }
  .hero-cta-row .btn-secondary {
    background: #1a1a1a;
    border-color: rgba(255,255,255,0.08);
  }
  /* Drop the arrow on mobile — reference is title-case label only */
  .hero-cta-row .btn-primary span[aria-hidden] { display: none; }
}
.btn-primary {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--bone); color: var(--ink);
  padding: 16px 28px; border-radius: 16px;
  font-family: var(--font-sans); font-size: 16px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .2s ease, box-shadow .3s ease;
  white-space: nowrap;
}
.btn-primary::before,
.btn-secondary::before {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 19px;
  padding: 3px;
  background: conic-gradient(from var(--hb-angle, 0deg),
    transparent 0deg,
    rgba(255, 106, 26, 0) 40deg,
    rgba(255, 106, 26, 1) 95deg,
    rgba(255, 168, 92, 1) 130deg,
    rgba(255, 106, 26, 1) 165deg,
    rgba(255, 106, 26, 0) 220deg,
    transparent 360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.btn-primary:hover::before,
.btn-secondary:hover::before {
  opacity: 1;
  animation: hb-spin 2s linear infinite;
}
@property --hb-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes hb-spin {
  to { --hb-angle: 360deg; }
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.04);
  background: #FFFFFF;
  box-shadow: 0 16px 40px -8px rgba(255, 106, 26, 0.55), 0 0 0 1px rgba(255, 106, 26, 0.18);
}
.btn-secondary {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  background: #1a1a1a;
  color: var(--bone);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 16px 28px; border-radius: 16px;
  font-family: var(--font-sans); font-size: 16px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .2s ease, border-color .2s ease, box-shadow .3s ease;
  white-space: nowrap;
}
.btn-secondary:hover {
  transform: translateY(-3px) scale(1.04);
  background: #232323;
  border-color: rgba(255, 106, 26, 0.4);
  box-shadow: 0 16px 40px -8px rgba(255, 106, 26, 0.45), 0 0 0 1px rgba(255, 106, 26, 0.15);
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mist);
  padding: 14px 4px;
  white-space: nowrap;
}
.btn-ghost:hover { color: var(--bone); }
.btn-ghost .chev { transition: transform .25s ease; }
.btn-ghost:hover .chev { transform: translateX(3px); }

/* Hero status bar */
.hero-status {
  position: absolute; left: var(--gut); right: var(--gut); bottom: 18px; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dim);
  pointer-events: none;
}
.hero-status .scroll-arrow { width: 24px; height: 1px; background: var(--dim); display: inline-block; }

/* ---------- Inward concave carousel ---------- */
.stage {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(460px, 58vh, 660px);
  perspective: 1100px;
  perspective-origin: 50% 55%;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}
/* Short-window fix — as viewport height drops, .stage was creeping up
   over the hero CTA row. Increase hero's min-height so there's always
   enough room between the CTA row bottom and the stage top, even on
   shrunk windows. Trade-off: page becomes vertically scrollable at
   very small heights, but tiles keep their proper 3D arc shape (which
   was getting squished when we shrunk the stage itself). */
@media (max-height: 900px) {
  .hero { min-height: 880px; }
}
@media (max-height: 780px) {
  /* Raised from 820px: the five-line headline needs the bottom-anchored
     .stage to sit lower than it did under the old two-line hero. */
  .hero { min-height: 880px; }
}
@media (max-height: 680px) {
  .hero { min-height: 880px; }
  .stage { height: clamp(440px, 60vh, 540px); }
}
.stage .tile { pointer-events: auto; }
.stage-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  background: linear-gradient(to bottom, transparent, #0A0A0A);
  pointer-events: none;
  z-index: 5;
}

/* The signature green vertical light beam behind the center of the arc */
.green-beam {
  position: absolute;
  left: 50%; top: 8%;
  width: 0; height: 84%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}
.green-beam .beam-core {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(170, 255, 90, 0.0) 4%,
    rgba(190, 255, 110, 0.95) 22%,
    rgba(220, 255, 150, 1) 50%,
    rgba(190, 255, 110, 0.95) 78%,
    rgba(170, 255, 90, 0.0) 96%,
    transparent 100%);
  box-shadow:
    0 0 12px rgba(190, 255, 110, 0.9),
    0 0 28px rgba(170, 255, 90, 0.55),
    0 0 60px rgba(160, 255, 80, 0.35);
  border-radius: 2px;
  animation: beamPulse 4.2s ease-in-out infinite;
}
.green-beam .beam-halo {
  position: absolute;
  left: 50%; top: 10%; bottom: 10%;
  width: 320px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 50% 90% at 50% 50%,
    rgba(160, 255, 80, 0.28),
    rgba(160, 255, 80, 0.08) 35%,
    transparent 70%);
  filter: blur(20px);
}
.green-beam .beam-floor {
  position: absolute;
  left: 50%; bottom: -40px;
  width: 480px; height: 220px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 60% 50% at 50% 100%,
    rgba(160, 255, 80, 0.5),
    rgba(160, 255, 80, 0.15) 35%,
    transparent 70%);
  filter: blur(30px);
  opacity: 0.7;
}
@keyframes beamPulse {
  0%, 100% { opacity: 1; transform: translateX(-50%) scaleY(1); }
  50%      { opacity: 0.85; transform: translateX(-50%) scaleY(0.985); }
}

.track {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  will-change: transform;
  z-index: 3;
}
@media (max-width: 600px) {
  .track { top: 50%; }
  .stage {
    position: relative;
    left: auto; right: auto; bottom: auto;
    height: 360px;
    margin-top: 40px;
    perspective: 800px;
  }
  .tile {
    width: 140px; height: 200px;
    /* On mobile the carousel is frozen — kill the opacity/transform
       transition so re-renders snap into place without a slow-mo fade. */
    transition: none !important;
  }
  .tile .frame { border-radius: 14px; }
  .hero { height: auto; min-height: 100svh; padding-bottom: 16px; }
  .hero-status { display: none; }
  .green-beam { height: 70%; top: 14%; }
  .green-beam .beam-halo { width: 180px; }
  .green-beam .beam-floor { width: 280px; height: 140px; }
}
.tile {
  position: absolute;
  top: 50%; left: 50%;
  width: 400px; height: 580px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: opacity .4s ease;
  will-change: transform, opacity;
}
.tile .frame {
  position: absolute; inset: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 50px 120px -40px rgba(0,0,0,0.95),
    0 0 0 1px rgba(255,255,255,0.02) inset;
  background: #0E0E0E;
  isolation: isolate;
}
.tile image-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.tile .tile-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  background: transparent;
  /* iOS Safari overlays a play-button shield on autoplay-blocked muted
     videos (Low Power Mode, low memory). Decorative loops shouldn't be
     tap-target-able anyway — kill pointer-events + native controls. */
  pointer-events: none;
}
/* WebKit's media-controls shadow tree — hide every variant of the
   tap-to-play overlay on DECORATIVE autoplay loops only. Performance-card
   videos (.perf-video) opt back in via `controls` so the user can play +
   hear audio. */
.tile-video::-webkit-media-controls,
.tile-video::-webkit-media-controls-enclosure,
.tile-video::-webkit-media-controls-panel,
.tile-video::-webkit-media-controls-overlay-play-button,
.tile-video::-webkit-media-controls-start-playback-button,
.cli-poster::-webkit-media-controls,
.cli-poster::-webkit-media-controls-enclosure,
.cli-poster::-webkit-media-controls-panel,
.cli-poster::-webkit-media-controls-overlay-play-button,
.cli-poster::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 0 !important;
}
/* Poster — matches .tile-video geometry so the swap-in is pixel-aligned with
   the video's first frame. Sits one level above the video and is removed
   from the DOM the moment the video emits its first `playing` event. */
.tile .tile-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
  background: transparent;
  pointer-events: none;
  user-select: none;
}
/* VideoSlot reused inside .perf-media — make it fill the card edge-to-edge
   so uploaded MP4s aren't shown at their intrinsic size. */
.perf-media .video-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.perf-media .tile-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.tile .video-slot {
  position: absolute; inset: 0;
  z-index: 1;
  cursor: pointer;
}
.tile .video-slot.is-drag {
  outline: 2px dashed rgba(190, 255, 110, 0.7);
  outline-offset: -8px;
}
.tile .video-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  pointer-events: none;
  z-index: 8;
  transition: opacity .2s ease;
}
.tile .video-slot:hover .video-empty { opacity: 0.85; }
.tile .video-empty-plus {
  width: 56px; height: 56px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  font-size: 30px; font-weight: 300; line-height: 1;
  color: #fff;
}
.tile .video-empty-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.tile .video-tools {
  position: absolute;
  top: 10px; right: 10px;
  display: flex; gap: 6px;
  z-index: 9;
}
.tile .video-tools button {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.tile .video-tools button:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(190, 255, 110, 0.5);
}
.tile .tone-overlay {
  position: absolute; inset: 0;
  z-index: 2;
  mix-blend-mode: color;
  opacity: 0.55;
  pointer-events: none;
}
.tile .halftone {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(circle at center, rgba(255,255,255,0.7) 0.6px, transparent 1.2px);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
}
/* Kill all tone/halftone/vignette/sheen treatments — overlays were meant to
   give EMPTY placeholders character, but they wash out real creatives. The
   per-tone --tile-bg gradients still show through on empty tiles, so the
   placeholders keep their color identity without tinting the actual video. */
.tile .tone-overlay,
.tile .halftone,
.tile .vignette,
.tile .sheen {
  display: none !important;
}
.tile .vignette {
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 30%, transparent 35%, rgba(0,0,0,0.45) 100%),
    linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0.05) 35%, rgba(0,0,0,0) 65%);
}
.tile .sheen {
  position: absolute; inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,0.08) 48%,
    rgba(255,255,255,0.0) 60%);
  opacity: 0.6;
}

/* Default placeholder texture inside an empty image-slot, so the tile
   reads as imagery even before the user drops a file. */
.tile image-slot::part(empty-bg),
.tile image-slot {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.025) 0 2px,
      transparent 2px 8px),
    var(--tile-bg, linear-gradient(165deg, #2a2a2a 0%, #141414 60%, #080808 100%));
}

/* Per-tile tones — different gradients + tint */
.tile.tone-halftone { --tile-bg: linear-gradient(165deg, #3a3a3a, #1a1a1a 60%, #0a0a0a); }
.tile.tone-halftone .halftone   { opacity: 0.55; }
.tile.tone-halftone .tone-overlay { background: linear-gradient(180deg, #d0d0d0, #2a2a2a); opacity: 0.75; mix-blend-mode: saturation; }

.tile.tone-mono     { --tile-bg: linear-gradient(170deg, #1c1c1c, #0a0a0a 60%, #050505); }
.tile.tone-mono .tone-overlay { background: linear-gradient(180deg, #ffffff, #0a0a0a); opacity: 0.6; mix-blend-mode: saturation; }
.tile.tone-mono .halftone   { opacity: 0.28; }

.tile.tone-dim      { --tile-bg: linear-gradient(170deg, #1a1d22, #0d1014 60%, #050608); }
.tile.tone-dim .tone-overlay { background: linear-gradient(160deg, #4a5a6e, #14181f); opacity: 0.35; mix-blend-mode: color; }

.tile.tone-warm     { --tile-bg: linear-gradient(160deg, #3a1c10 0%, #c84418 35%, #5a1a08 75%, #1a0805); }
.tile.tone-warm .tone-overlay { background: linear-gradient(160deg, #ff6a2a, #1a0805); opacity: 0.5; mix-blend-mode: color; }

.tile.tone-cool     { --tile-bg: linear-gradient(175deg, #20262c, #0e1116 60%, #050608); }
.tile.tone-cool .tone-overlay { background: linear-gradient(165deg, #d7e8ff, #1a2230); opacity: 0.4; mix-blend-mode: color; }

.tile.tone-vivid    { --tile-bg: linear-gradient(155deg, #ff2eb2 0%, #b026d6 45%, #3a1240 80%, #15061a); }
.tile.tone-vivid .tone-overlay { background: linear-gradient(155deg, #ff3ec2, #2a0a2a); opacity: 0.55; mix-blend-mode: color; }

/* ---------- Sections shared ---------- */
section { position: relative; }
.section {
  position: relative;
  padding-block: clamp(16px, 1.5vw, 24px) clamp(20px, 2vw, 32px);
  padding-inline: var(--gut);
}
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(36px, 6vw, 80px); flex-wrap: wrap; }
.section-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mist); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.section-eyebrow .tick { width: 28px; height: 1px; background: var(--mist); }
.section-title {
  font-family: var(--font-sans); font-weight: 500;
  letter-spacing: -0.035em; line-height: 0.95;
  font-size: clamp(40px, 6.5vw, 96px);
  max-width: 18ch;
}
.section-title em { font-style: italic; font-weight: 400; color: rgba(237,237,237,0.7); }

/* ---------- Scale callout (red check + pill badge + huge stat) ---------- */
.scale-section {
  position: relative;
  background: var(--ink);
  padding: clamp(80px, 14vw, 180px) var(--gut) clamp(40px, 6vw, 80px);
  margin-top: -160px;
}
@media (max-width: 600px) {
  .scale-section { padding-top: 40px; margin-top: 0; position: relative; z-index: 5; }
}
.scale-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.scale-check {
  width: clamp(72px, 8vw, 110px);
  height: auto;
  margin-bottom: -6px;
  filter: drop-shadow(0 0 18px rgba(255, 59, 34, 0.35));
}
.scale-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: #141414;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--bone);
  letter-spacing: 0;
}
.scale-headline {
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.92;
  font-size: clamp(28px, 4.6vw, 62px);
  color: var(--bone);
  text-transform: uppercase;
  max-width: 18ch;
}
.scale-headline .scale-prefix {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-right: 0.28em;
  color: var(--bone);
  -webkit-text-stroke: -0.5px currentColor;
          text-stroke: -0.5px currentColor;
  paint-order: stroke fill;
  /* Tabular figures so the count-up animation doesn't reflow per tick. */
  font-variant-numeric: tabular-nums;
}
.scale-headline .scale-emph {
  /* eurostile-extended (Adobe Fonts kit aqp8wqx) — wide geometric display.
     Falls back through Michroma → system sans if the kit is unavailable. */
  font-family: "eurostile-extended", "Michroma", var(--font-sans), sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 75px;
  letter-spacing: -0.07em;
  vertical-align: 0.04em;
}
.scale-headline .scale-emph + .scale-emph,
.scale-headline .scale-emph { /* kept for older selector compatibility */ }
@media (max-width: 600px) {
  .scale-section { padding-block: 70px 32px; }
  .scale-headline { font-size: clamp(28px, 9vw, 52px); max-width: 14ch; }
  .scale-headline .scale-emph { font-size: 38px; }
}
/* ---------- Ad-type tabs (Tabbed Switcher) ---------- */
.section-head-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  text-align: center;
}
.section-head-center .section-title { text-align: center; margin: 0 auto; }
.section-head-center .scale-pill { margin: 0; }

/* "Ads that print / REVENUE." — matches the "How do we serve / BRANDS?"
   typographic system: regular line 1, eurostile-extended display line 2. */
.perf-title {
  text-align: center;
  font-family: var(--font-sans);
  letter-spacing: -0.025em;
  line-height: 0.92;
  max-width: none;
  margin: 0 auto;
}
.perf-title .line-1 {
  display: block;
  font-weight: 500;
  font-size: clamp(28px, 4.6vw, 62px);
}
.perf-title .line-2 {
  display: block;
  font-family: "eurostile-extended", "Michroma", var(--font-sans), sans-serif;
  font-weight: 900;
  font-size: 75px;
  text-transform: uppercase;
  letter-spacing: -0.07em;
}
@media (max-width: 600px) {
  .perf-title .line-1 { font-size: clamp(28px, 9vw, 52px); }
  .perf-title .line-2 { font-size: 38px; }
}
.adtype-tabs {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
  margin: 0 auto clamp(18px, 2.4vw, 32px);
  padding: 6px;
  background: #0e0e0e;
  border: 1px solid var(--line);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}
.adtype-tab {
  position: relative;
  z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: transparent;
  color: rgba(237,237,237,0.7);
  border: 0;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
}
.adtype-tab:hover { color: var(--bone); }
.adtype-tab.is-active {
  background: var(--bone);
  color: var(--ink);
}
.adtype-tab .adtype-count {
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  color: inherit;
  opacity: 0.65;
}
.adtype-tab.is-active .adtype-count { background: rgba(0,0,0,0.12); opacity: 0.85; }
.adtype-tab:not(.is-active) .adtype-count { background: rgba(255,255,255,0.06); }
@media (max-width: 600px) {
  .adtype-tabs {
    border-radius: 18px;
    padding: 4px;
    gap: 4px;
    width: 100%;
  }
  .adtype-tab {
    flex: 1 1 auto;
    padding: 9px 10px;
    font-size: 12px;
    border-radius: 14px;
    justify-content: center;
  }
  .adtype-tab .adtype-count { display: none; }
}
.clients {
  position: relative;
  z-index: 6;
  background: var(--ink);
  padding: 0 var(--gut) clamp(20px, 2vw, 32px);
}
.clients-rail {
  position: relative;
  /* Constrain the showcase rail so it doesn't span edge-to-edge — cards
     keep their full 230px width, the bordered container just gets shorter
     and centered horizontally on desktop. */
  max-width: 1280px;
  margin: 0 auto;
  border: 1px solid #FFFFFF;
  border-radius: 28px;
  /* Equal top & bottom padding so cards sit symmetrically inside the rail.
     The pill sits above the rail (top: -16px) — it doesn't push the cards
     down because it's absolute-positioned. Earlier we had padding-top: 56px
     to "make room" for the pill, but the pill is outside the box, so all
     that did was create an asymmetric gap. Keeping both at 18px lines the
     top whitespace up with the bottom one. */
  padding: 18px;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255,255,255,0.035), transparent 60%),
    transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 0 0 0.5px rgba(255,255,255,0.05);
}
.clients-pill {
  position: absolute;
  top: -16px; left: 0;
  z-index: 3;
  display: inline-flex; align-items: center;
  padding: 10px 16px;
  background: #EDEDED;
  color: #0A0A0A;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.clients-pill-q {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: #1A1A1A;
  color: #EDEDED;
  display: grid; place-items: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}
.clients-pill-q:hover { background: #2A2A2A; }
.clients-marquee {
  position: relative;
  overflow: hidden;
  padding: 2px 0;
  /* Reserve the card height up front. Cards are lazy-mounted (only when
     the user scrolls near the section) — without this, the marquee
     collapses to 0px on first paint and snaps to ~420px on scroll =
     ugly CLS. Match the desktop card height; mobile override below. */
  min-height: 420px;
}
@media (max-width: 600px) {
  .clients-marquee { min-height: 336px; }
}
.clients-track {
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;
  /* Promote each card into its own composite layer so the marquee transform
     is a pure GPU translate — no per-card paint on every frame. */
  transform: translateZ(0);
  backface-visibility: hidden;
}
@keyframes clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.cli-card {
  flex: 0 0 230px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px;
  background: transparent;
  /* Integer-pixel border to stop sub-pixel alpha flicker when the marquee
     translates at fractional positions. 0.7px white was visually nice but
     each frame the GPU re-rasterized the border edge at a slightly different
     sub-pixel alpha, reading as a blink. 1px @ 0.6 alpha matches the
     visual weight without the flicker. */
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  /* Promote each card to its own GPU composite layer so the border rasterizes
     once at integer coords and the parent's translate only moves the layer. */
  transform: translateZ(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.35);
}
.cli-name {
  display: flex; align-items: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.cli-media {
  position: relative;
  width: 100%;
  /* 3:4 Hochformat */
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(165deg, #2a2a2a 0%, #141414 60%, #0a0a0a 100%);
}
.cli-media image-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.cli-media .video-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.cli-media video,
.cli-media .video-slot video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cli-media .cli-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* Static <picture> poster behind the <video>. Was an inline
   backgroundImage URL before — replaced with a real <img> so AVIF/WebP
   negotiation via the parent <picture> actually works (CSS image-set
   support is uneven across Safari versions). The <picture> itself is
   absolutely positioned to match the cli-media box so its intrinsic
   image size doesn't break the parent's aspect-ratio constraint —
   without this, mobile cards stretched 6x tall. */
.cli-media picture {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.cli-media .cli-bg-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cli-foot {
  display: flex; flex-direction: column; gap: 12px;
}
.cli-arrow { display: none; }
.cli-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: baseline;
}
.cli-stat { display: contents; }
.cli-stat-v {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.cli-stat-l {
  font-family: var(--font-sans);
  font-size: 12px;
  color: rgba(237,237,237,0.55);
  font-weight: 400;
  letter-spacing: -0.005em;
}
@media (max-width: 600px) {
  .clients { padding: 0 16px clamp(40px, 8vw, 80px); }
  .clients-rail { padding: 14px; border-radius: 22px; }
  /* Pill: match desktop look (same size + bold), just nudge up slightly so
     it sits visually centered on the border on mobile (where line-height
     rendering rounds it down a touch). */
  .clients-pill { top: -20px; }
  .clients-pill-q { width: 20px; height: 20px; font-size: 10px; }
  .cli-card { flex: 0 0 180px; padding: 12px; gap: 12px; }
  .cli-name { font-size: 16px; }
  .cli-stat-v { font-size: 13px; }
  .cli-stat-l { font-size: 11px; }
}

/* ---------- Services v2 (How do we serve CREATORS?) ---------- */
.services-v2 {
  position: relative;
  background: var(--ink);
  padding: clamp(24px, 3vw, 44px) var(--gut) clamp(20px, 2vw, 32px);
  color: var(--bone);
}
@media (max-width: 600px) {
  .services-v2 { padding: 20px 24px 16px; }
  .services-v2-pillwrap { margin-bottom: 18px; }
  .services-v2-title { margin: 0 auto 4px; }
}
.services-v2-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.services-v2-pillwrap {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.services-v2-pill {
  display: inline-flex; align-items: center;
  padding: 8px 18px;
  background: #141414;
  color: var(--bone);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.services-v2-title {
  margin: 0 auto 56px;
  text-align: center;
  font-family: var(--font-sans);
  letter-spacing: -0.025em;
  line-height: 0.92;
  max-width: none;
}
.services-v2-title .line-1 {
  display: block;
  font-weight: 500;
  font-size: clamp(28px, 4.6vw, 62px);
  margin-bottom: 0;
}

/* ── Title cinematic reveal ──────────────────────────────
   Each direct-child span of `.title-reveal` is a mask
   (overflow hidden) and its `.title-inner` slides up from
   below + blur softens out + opacity fades in. Successive
   lines stagger via :nth-of-type for a cinematic cascade. */
.title-reveal > span {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em; /* keep descenders / italic slant visible */
}
.title-reveal .title-inner {
  display: inline-block;
  transform: translateY(115%) skewY(4deg);
  opacity: 0;
  filter: blur(10px);
  transition:
    transform 1.05s cubic-bezier(.16,.84,.28,1),
    opacity .9s ease,
    filter .9s ease;
  will-change: transform, opacity, filter;
}
.title-reveal.in .title-inner {
  transform: translateY(0) skewY(0);
  opacity: 1;
  filter: blur(0);
}
.title-reveal.in > span:nth-of-type(2) .title-inner {
  transition-delay: .18s;
}
.title-reveal.in > span:nth-of-type(3) .title-inner {
  transition-delay: .34s;
}
@media (prefers-reduced-motion: reduce) {
  .title-reveal .title-inner { transition: none; transform: none; opacity: 1; filter: none; }
}

.services-v2-title .line-2 {
  display: block;
  /* eurostile-extended (Adobe Fonts kit aqp8wqx) — same family as the
     "SPEND OPTIMIZED" scale headline so the typographic voice matches. */
  font-family: "eurostile-extended", "Michroma", var(--font-sans), sans-serif;
  font-weight: 900;
  font-size: 75px;
  text-transform: uppercase;
  letter-spacing: -0.07em;
}
@media (max-width: 600px) {
  .services-v2-title .line-1 { font-size: clamp(28px, 9vw, 52px); }
  .services-v2-title .line-2 { font-size: 38px; }
}
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 56px;
  width: 100%;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .pillars { gap: 12px; }
  .pillar { padding: 22px 18px 20px; gap: 14px; }
  .pillar-icon { width: 60px; height: 60px; }
  .pillar-icon svg { width: 26px; height: 26px; }
  .pillar-title { font-size: 15px; }
  .pillar-desc { font-size: 12px; line-height: 1.35; margin-top: -6px; }
}
@media (max-width: 600px) {
  .pillars { grid-template-columns: 1fr; gap: 12px; max-width: 100%; width: 100%; padding: 0; }
  .pillar { aspect-ratio: auto; padding: 24px 22px 22px; gap: 14px; min-width: 0; max-width: 100%; }
  .pillar-icon { width: 60px; height: 60px; }
  .pillar-icon svg { width: 26px; height: 26px; }
  .pillar-title { font-size: 16px; }
  .pillar-desc { font-size: 13px; line-height: 1.35; margin-top: -6px; }
}
.pillar {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 22px 24px 22px;
  background: #0C0C0C;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
}
.pillar-icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: #1A1A1A;
  border: 1px solid rgba(255,255,255,0.06);
  display: grid; place-items: center;
  color: var(--bone);
}
.pillar-icon svg { width: 28px; height: 28px; }
.pillar-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.pillar-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.35;
  color: rgba(237,237,237,0.6);
  max-width: 30ch;
  font-weight: 400;
  margin-top: -8px;
}
.compare {
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(255,255,255,0.03), transparent 60%),
    #0C0C0C;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  padding: 36px clamp(20px, 3vw, 44px);
}
.compare-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 28px;
  align-items: center;
}
.compare-head {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  align-items: start;
}
.compare-col-label {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--bone);
  letter-spacing: -0.01em;
}
.compare-col { text-align: left; }
.compare-col-title {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--bone);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.compare-col-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(237,237,237,0.55);
  max-width: 30ch;
  margin: 0 auto;
}
.compare-rows { display: flex; flex-direction: column; }
.compare-row {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.compare-row:last-child { border-bottom: 0; }
.compare-row-label {
  font-family: var(--font-sans);
  font-size: 15px;
  color: rgba(237,237,237,0.85);
  letter-spacing: -0.005em;
}
.compare-cell {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1;
}
/* Text-comparison variant — left-aligned, smaller, two-tone (trad muted,
   AI bright). Used when each cell holds a feature description rather than
   a check/cross icon. */
.compare-cell.compare-text {
  text-align: left;
  font-size: 15px;
  line-height: 1.45;
  padding-right: 12px;
}
.compare-cell.compare-text.trad { color: rgba(237, 237, 237, 0.5); }
.compare-cell.compare-text.ai   { color: var(--bone); font-weight: 500; }
.compare-cell .check { color: var(--bone); font-weight: 600; }
.compare-cell .cross { color: rgba(237,237,237,0.25); font-weight: 400; }
@media (max-width: 700px) {
  /* Keep the desktop 3-column layout on mobile too — just compress fonts
     and tighten gaps so each row reads as a clean symmetrical comparison
     without overflowing the viewport. */
  .compare { padding: 22px 16px; border-radius: 18px; }
  .compare-grid {
    gap: 10px;
    grid-template-columns: 0.9fr 1fr 1fr;
  }
  .compare-col-label { font-size: 12px; }
  .compare-col-title { font-size: 12px; }
  .compare-row-label { font-size: 12px; }
  .compare-cell.compare-text { font-size: 11.5px; line-height: 1.4; padding-right: 4px; }
  .compare-row { padding: 14px 0; }
  .compare-head { padding: 14px 0 12px; }
}

.marquee {
  overflow: hidden;
  padding-block: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.marquee-row {
  display: flex; width: max-content; will-change: transform;
  font-family: var(--font-sans); font-weight: 400; font-style: italic;
  font-size: clamp(40px, 8vw, 96px); letter-spacing: -0.02em;
  white-space: nowrap;
}
.marquee-row span.item { display: inline-flex; align-items: center; gap: 32px; padding-inline: 32px; }
.marquee-row .dotmark { width: 8px; height: 8px; border-radius: 999px; background: var(--bone); display: inline-block; }

/* Services list */
.services { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.svc-row {
  display: grid; grid-template-columns: 56px 1.6fr 1.2fr 160px;
  gap: 24px; align-items: start;
  padding: clamp(28px, 4vw, 56px) 0;
  border-top: 1px solid var(--line);
  transition: background .25s ease;
}
.svc-row:first-child { border-top: 0; }
.svc-row:hover { background: rgba(255,255,255,0.015); }
.svc-row .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); padding-top: 14px; }
.svc-row .t {
  font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.03em;
  font-size: clamp(36px, 5.5vw, 72px); line-height: 0.96;
  display: flex; align-items: baseline; gap: 14px;
}
.svc-row .t .arrow { font-size: 0.5em; opacity: 0; transform: translateX(-6px); transition: opacity .35s ease, transform .35s ease; }
.svc-row:hover .t .arrow { opacity: 1; transform: translateX(0); }
.svc-row .d { color: rgba(237,237,237,0.6); font-size: 15px; line-height: 1.5; max-width: 38ch; padding-top: 22px; }
.svc-row .m { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); padding-top: 22px; text-align: right; }
@media (max-width: 800px) {
  .svc-row { grid-template-columns: 40px 1fr; }
  .svc-row .d, .svc-row .m { grid-column: 2 / -1; padding-top: 14px; text-align: left; }
}

/* Performance / case studies */
.perf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
}
@media (max-width: 900px) { .perf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  /* Mobile: convert grid to a horizontally-swipeable rail with snap, like
     Instagram posts. One card visible at a time; flick to advance. */
  .perf-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    /* Negative inline margin so the rail bleeds out of the section gutter
       and the first card sits flush with the screen edge. */
    margin: 0 calc(var(--gut) * -1);
    padding: 0 var(--gut);
    /* Reserve space so the last card's snap-end works correctly. */
    scroll-padding-inline: var(--gut);
  }
  .perf-grid::-webkit-scrollbar { display: none; }
  .perf-grid > .perf-card {
    flex: 0 0 calc(100% - var(--gut) * 2);
    scroll-snap-align: start;
  }
}

/* Page dots — mobile only, mirrors which card is in view */
.perf-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
@media (max-width: 600px) {
  .perf-dots { display: flex; }
}
.perf-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.18);
  padding: 0;
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.perf-dot.is-active {
  width: 22px;
  background: var(--bone);
}

.perf-card {
  border-radius: 16px;
  background: var(--ash);
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
  transition: border-color .3s ease, transform .35s ease;
}
.perf-card:hover { border-color: rgba(255, 255, 255, 0.28); transform: translateY(-2px); }

.perf-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #000;
}
.perf-media .perf-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
/* Big centred play button shown until the user first hits play. Once they
   do, PerfCard adds the native `controls` attribute and this button is
   unmounted, so the native UI (seek bar, audio, fullscreen) takes over. */
.perf-media .perf-play {
  position: absolute; inset: 0;
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.perf-media .perf-play::before {
  content: "";
  position: absolute;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s ease;
}
.perf-media .perf-play svg {
  position: relative;
  z-index: 1;
  margin-left: 4px; /* optical centre — triangle's visual mass leans left */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
.perf-media .perf-play:hover::before {
  transform: scale(1.08);
  background: rgba(0, 0, 0, 0.7);
}
.perf-media .perf-play:active::before {
  transform: scale(0.96);
}
.perf-media .poster {
  position: absolute; inset: 0;
  background: var(--bg);
}
.perf-media .scan {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.1), transparent 60%);
  mix-blend-mode: screen;
}
.perf-media .badge {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
}
.perf-media .platform {
  position: absolute; bottom: 12px; left: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone);
}
.perf-media .wave-mini {
  position: absolute; bottom: 12px; right: 12px;
  display: flex; align-items: flex-end; gap: 2px; height: 14px;
}
.perf-media .wave-mini span { width: 2px; background: var(--bone); opacity: 0.85; animation: wave 1.2s ease-in-out infinite; border-radius: 1px; }

.perf-body { padding: 18px 18px 22px; }
.perf-body .brand {
  font-family: var(--font-sans); font-weight: 500; font-size: 18px; letter-spacing: -0.02em; color: var(--bone);
  display: flex; align-items: center; justify-content: space-between;
}
.perf-body .sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist); margin-top: 6px; }
.perf-stats { margin-top: 18px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
.perf-stats .cell { border-top: 1px solid var(--line); padding-top: 10px; }
.perf-stats .label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); }
.perf-stats .value {
  font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.03em;
  font-size: 30px; margin-top: 6px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.perf-stats .delta { font-family: var(--font-mono); font-size: 10px; color: #6BD088; letter-spacing: 0.16em; margin-top: 4px; }

/* Process */
.process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2vw, 32px);
  position: relative;
}
@media (max-width: 900px) { .process-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }
.process-grid .step { padding-top: 28px; border-top: 1px solid var(--line-2); }
.process-grid .step .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--mist); text-transform: uppercase; margin-bottom: 28px; }
.process-grid .step .t { font-family: var(--font-sans); font-weight: 500; font-size: clamp(28px, 3.6vw, 48px); letter-spacing: -0.03em; line-height: 0.98; margin-bottom: 14px; }
.process-grid .step .d { color: rgba(237,237,237,0.6); font-size: 14.5px; line-height: 1.5; max-width: 30ch; }

/* Stats strip */
.strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
@media (max-width: 760px) { .strip { grid-template-columns: 1fr 1fr; } }
.strip .cell {
  padding: 28px var(--gut);
  border-right: 1px solid var(--line);
}
.strip .cell:last-child { border-right: 0; }
.strip .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); margin-bottom: 10px; }
.strip .num {
  font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.035em;
  font-size: clamp(40px, 5vw, 64px); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.strip .sub { margin-top: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(237,237,237,0.45); }

/* CTA */
.cta {
  text-align: center;
  padding-block: clamp(16px, 1.5vw, 24px) clamp(60px, 9vw, 140px);
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,255,255,0.05), transparent 65%),
    var(--ink);
  position: relative;
}
/* "Contact" CTA card — dark rounded container, two-line heading, paragraph,
   light pill button. Matches the typographic system used elsewhere
   (line-1 regular + line-2 eurostile-extended). */
.cta-card {
  margin: 20px auto 0;
  max-width: 1100px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: clamp(48px, 7vw, 96px) clamp(28px, 4vw, 64px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.cta-title {
  margin: 0;
  font-family: var(--font-sans);
  letter-spacing: -0.025em;
  line-height: 0.95;
}
.cta-title .line-1 {
  display: block;
  font-weight: 500;
  font-size: clamp(28px, 4.6vw, 62px);
}
.cta-title .line-2 {
  display: block;
  font-family: "eurostile-extended", "Michroma", var(--font-sans), sans-serif;
  font-weight: 900;
  font-size: 75px;
  text-transform: uppercase;
  letter-spacing: -0.07em;
}
.cta-sub {
  margin: 0;
  max-width: 50ch;
  color: rgba(237, 237, 237, 0.6);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
}
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  border-radius: 14px;
  transition: background .2s ease, transform .2s ease;
}
.cta-btn:hover { background: #ffffff; transform: translateY(-1px); }
.cta-btn span[aria-hidden] {
  display: inline-block;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.cta-btn:hover span[aria-hidden] {
  transform: translate(2px, -2px);
}
.cta-or {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  color: rgba(237,237,237,0.55);
}
.cta-mail {
  color: var(--bone);
  border-bottom: 1px solid rgba(237,237,237,0.3);
  transition: color .2s ease, border-color .2s ease;
}
.cta-mail:hover {
  color: #FFFFFF;
  border-bottom-color: rgba(237,237,237,0.8);
}
@media (max-width: 600px) {
  .cta-card { padding: 36px 22px; gap: 16px; border-radius: 20px; }
  .cta-title .line-1 { font-size: clamp(28px, 9vw, 52px); }
  .cta-title .line-2 { font-size: 38px; }
  .cta-sub { font-size: 14px; }
}

/* ──────────────────────────────────────────────────────────────────────
   Site-wide micro-interactions
   ──────────────────────────────────────────────────────────────────────
   Tasteful hover/press feedback layered on top of the existing styles.
   No new visuals — just smooth transitions and subtle motion so the page
   feels alive. Everything respects prefers-reduced-motion below. */

html { scroll-behavior: smooth; }

/* Buttons: press-down feedback + glow lift on hover */
.btn-primary, .btn-secondary, .cta-btn, .foot-cta, .nav-cta,
.adtype-tab, .perf-dot, .nav-burger {
  transform: translateZ(0);
  will-change: transform;
}
.btn-primary, .btn-secondary, .cta-btn, .foot-cta, .nav-cta {
  transition:
    transform .25s cubic-bezier(.2,.7,.2,1),
    background .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}
.btn-primary:hover, .cta-btn:hover, .foot-cta:hover, .nav-cta:hover {
  box-shadow: 0 12px 32px -8px rgba(255,255,255,0.18);
  transform: translateY(-2px);
}
.btn-primary:active, .btn-secondary:active, .cta-btn:active,
.foot-cta:active, .nav-cta:active {
  transform: translateY(0) scale(0.97);
  transition-duration: .08s;
}
.btn-secondary:hover { transform: translateY(-2px); }
/* The "↗" arrow inside primary CTAs nudges up-right on hover. */
.btn-primary span[aria-hidden],
.nav-cta span[aria-hidden] {
  display: inline-block;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.btn-primary:hover span[aria-hidden],
.nav-cta:hover span[aria-hidden] {
  transform: translate(3px, -3px);
}

/* Ad-type tabs — macOS-dock magnify: the tab under the cursor scales up,
   immediate neighbours swell a touch (via the :has() sibling rule below). */
.adtype-tab { transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(.2,.7,.2,1); transform-origin: center bottom; }
.adtype-tab:not(.is-active):hover {
  transform: scale(1.18) translateY(-2px);
}
/* Neighbour swell — when a tab is hovered, the tab right next to it
   nudges slightly (CSS only, no JS). Uses :has() so it doesn't depend on
   DOM ordering rules. Graceful degrade on older browsers. */
.adtype-tab:hover + .adtype-tab { transform: scale(1.07); }
.adtype-tabs:has(.adtype-tab + .adtype-tab:hover) .adtype-tab:has(+ .adtype-tab:hover) {
  transform: scale(1.07);
}
.adtype-tab:active { transform: scale(0.97); }

/* Nav links — subtle underline grow + soft magnify popup on hover */
.navlinks a {
  position: relative;
  padding-bottom: 2px;
  display: inline-block;
  transform-origin: center bottom;
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    color .25s ease,
    text-shadow .35s ease;
}
.navlinks a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.navlinks a:hover {
  transform: scale(1.15);
  text-shadow: 0 0 24px rgba(255,255,255,0.35);
  color: var(--bone);
}
.navlinks a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Pillar service cards — lift + border glow on hover */
.pillar {
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    border-color .35s ease,
    box-shadow .35s ease;
  will-change: transform;
}
.pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.6);
}
.pillar:hover .pillar-icon {
  transform: scale(1.06) rotate(-2deg);
}
.pillar-icon {
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}

/* Perf cards — already lifting, add scale on inner video */
.perf-card { will-change: transform; }
.perf-card .tile-video,
.perf-card .video-slot {
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.perf-card:hover .tile-video { transform: scale(1.04); }

/* Page dots — pulse on the active dot */
.perf-dot { transition: width .25s ease, background .25s ease, transform .15s ease; }
.perf-dot:active { transform: scale(0.85); }

/* Footer columns — link arrow hint */
.foot-col a {
  position: relative;
  display: inline-block;
  transition: color .2s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.foot-col a:hover { transform: translateX(3px); }

/* CTA card — soft inner glow on hover */
.cta-card {
  transition:
    border-color .4s ease,
    box-shadow .4s ease,
    transform .4s cubic-bezier(.2,.7,.2,1);
}
.cta-card:hover {
  border-color: rgba(255,255,255,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 24px 60px -20px rgba(255,255,255,0.08);
}

/* Hero title + sub: cinematic rise with blur-up + slide + fade. Slower
   than a basic rise so it reads as deliberate and premium, not snappy. */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); filter: blur(12px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero-title  { animation: heroRise 1.2s cubic-bezier(.2,.7,.2,1) both; }
.hero-cta-row { animation: heroRise .9s cubic-bezier(.2,.7,.2,1) .35s both; }

/* Static gradient on the italic — animated shimmer removed because Chrome
   was repainting the clipped-text region every frame, causing whole-page
   jank (other browsers handled it fine but Chrome was lagging visibly).
   The gradient itself stays; just no infinite animation. */

/* Scale-section red check: draw-in on first paint */
@keyframes checkDraw {
  from { opacity: 0; transform: translateY(-6px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.scale-check { animation: checkDraw .8s cubic-bezier(.2,.7,.2,1) .2s both; }
.scale-pill,
.scale-headline { animation: heroRise .9s cubic-bezier(.2,.7,.2,1) .4s both; }

/* Logo (header) — magnify pop on hover, like nav links */
.brand-mark, .foot-brand {
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    filter .35s ease;
}
.brand-mark:hover, .foot-brand:hover {
  transform: scale(1.12);
  filter: drop-shadow(0 0 16px rgba(255,255,255,0.35));
}
.brand-mark:active, .foot-brand:active { transform: scale(0.97); }

/* Respect users who opted out of motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-title, .hero-cta-row, .scale-check, .scale-pill, .scale-headline,
  .word-roll-track {
    animation: none;
  }
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}
.footer {
  border-top: 1px solid var(--line);
  padding-top: 0;
  background: var(--ink);
}
.foot-shell {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 60px;
  padding: 80px var(--gut) 60px;
  align-items: start;
}
.foot-left { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 560px; }
.foot-brand { display: inline-flex; align-items: baseline; gap: 8px; }
.foot-brand-mark {
  font-family: var(--font-sans);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bone);
  text-transform: uppercase;
}
.foot-brand-sub {
  font-family: var(--font-sans);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(237,237,237,0.6);
  text-transform: uppercase;
}
.foot-headline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  margin: 6px 0 0;
  color: var(--bone);
  letter-spacing: -0.01em;
}
.foot-copy {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(237,237,237,0.6);
  max-width: 44ch;
}
.foot-cta {
  margin-top: 8px;
  display: inline-flex; align-items: center;
  padding: 14px 24px;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  border-radius: 14px;
  transition: background .2s ease, transform .2s ease;
}
.foot-cta:hover { background: #fff; transform: translateY(-1px); }

.foot-right {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
}
.foot-col { display: flex; flex-direction: column; gap: 14px; }
.foot-col-head {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--bone);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.foot-col a {
  font-family: var(--font-sans);
  font-size: 14px;
  color: rgba(237,237,237,0.6);
  line-height: 1.6;
  transition: color .2s ease;
}
.foot-col a:hover { color: var(--bone); }
.foot-socials {
  display: flex; align-items: center; gap: 14px;
}
.foot-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: rgba(237,237,237,0.7);
  transition: color .2s ease;
}
.foot-social:hover { color: var(--bone); }

.foot-legal {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px var(--gut);
  border-top: 1px solid var(--line);
  font-family: var(--font-sans); font-size: 12px; color: var(--dim);
  flex-wrap: wrap; gap: 12px;
}
@media (max-width: 760px) {
  .foot-shell { grid-template-columns: 1fr; gap: 48px; padding: 56px 24px 40px; }
  .foot-right { grid-template-columns: 0.6fr 1fr; gap: 32px; }
  .foot-left { align-items: flex-start; text-align: left; gap: 18px; max-width: 100%; }
  .foot-brand-img { height: 72px; }
  .foot-headline { font-size: 20px; margin-top: 8px; }
  .foot-copy { font-size: 14px; }
  .foot-cta { margin-top: 4px; }
}

/* Reveal anim */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ── Pillars: card lift-in + icon bounce-pop ─────────────
   Different from .title-reveal (which uses translateY+skew
   on inline text). Here whole cards rise + scale, while the
   icon inside each card pops with a slight overshoot for a
   tactile/wow feel. Stagger left → right matches the
   visual reading direction so the eye is led across. */
.pillars-reveal { transform: none; opacity: 1; }
.pillars-reveal .pillar {
  opacity: 0;
  transform: translateY(34px) scale(.94);
  transition:
    opacity .7s cubic-bezier(.2,.7,.2,1),
    transform .85s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s ease,
    border-color .35s ease;
  will-change: transform, opacity;
}
.pillars-reveal.in .pillar {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.pillars-reveal.in .pillar:nth-child(1) { transition-delay: 0s, 0s, 0s, 0s; }
.pillars-reveal.in .pillar:nth-child(2) { transition-delay: .12s, .12s, 0s, 0s; }
.pillars-reveal.in .pillar:nth-child(3) { transition-delay: .24s, .24s, 0s, 0s; }

/* Icon pops with an overshoot curve, slightly after the
   card finishes settling. The rotate adds a playful turn. */
.pillars-reveal .pillar-icon {
  opacity: 0;
  transform: scale(.4) rotate(-14deg);
  transition:
    opacity .55s ease,
    transform .7s cubic-bezier(.34, 1.6, .54, 1); /* overshoot */
}
.pillars-reveal.in .pillar-icon {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.pillars-reveal.in .pillar:nth-child(1) .pillar-icon { transition-delay: .26s; }
.pillars-reveal.in .pillar:nth-child(2) .pillar-icon { transition-delay: .38s; }
.pillars-reveal.in .pillar:nth-child(3) .pillar-icon { transition-delay: .50s; }

/* Title + desc gently rise into place after the icon lands */
.pillars-reveal .pillar-title,
.pillars-reveal .pillar-desc {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2,.7,.2,1);
}
.pillars-reveal.in .pillar-title,
.pillars-reveal.in .pillar-desc {
  opacity: 1;
  transform: translateY(0);
}
.pillars-reveal.in .pillar:nth-child(1) .pillar-title { transition-delay: .42s; }
.pillars-reveal.in .pillar:nth-child(1) .pillar-desc  { transition-delay: .50s; }
.pillars-reveal.in .pillar:nth-child(2) .pillar-title { transition-delay: .54s; }
.pillars-reveal.in .pillar:nth-child(2) .pillar-desc  { transition-delay: .62s; }
.pillars-reveal.in .pillar:nth-child(3) .pillar-title { transition-delay: .66s; }
.pillars-reveal.in .pillar:nth-child(3) .pillar-desc  { transition-delay: .74s; }

/* Hover lift — works in concert with the entrance animation */
.pillar { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease; }
.pillars-reveal.in .pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.6);
}
.pillars-reveal.in .pillar:hover .pillar-icon {
  transform: scale(1.06) rotate(0);
  transition: transform .3s cubic-bezier(.34, 1.6, .54, 1);
}

@media (prefers-reduced-motion: reduce) {
  .pillars-reveal .pillar,
  .pillars-reveal .pillar-icon,
  .pillars-reveal .pillar-title,
  .pillars-reveal .pillar-desc { transition: none; opacity: 1; transform: none; }
}

/* ── Comparison-table staggered reveal ──────────────────
   The wrapper itself fades in (default .reveal). Inside,
   the header + each row rises from below + sharpens, each
   ~70ms after the previous one. AI column gets a soft
   horizontal sheen sweep on settle for that "premium"
   feel. */
.compare-reveal { transform: none; }
.compare-reveal .compare-head,
.compare-reveal .compare-row {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity .7s cubic-bezier(.2,.7,.2,1),
    transform .7s cubic-bezier(.2,.7,.2,1),
    filter .7s ease;
}
.compare-reveal.in .compare-head,
.compare-reveal.in .compare-row {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.compare-reveal.in .compare-head { transition-delay: .04s; }
.compare-reveal.in .compare-row:nth-child(1)  { transition-delay: .12s; }
.compare-reveal.in .compare-row:nth-child(2)  { transition-delay: .18s; }
.compare-reveal.in .compare-row:nth-child(3)  { transition-delay: .24s; }
.compare-reveal.in .compare-row:nth-child(4)  { transition-delay: .30s; }
.compare-reveal.in .compare-row:nth-child(5)  { transition-delay: .36s; }
.compare-reveal.in .compare-row:nth-child(6)  { transition-delay: .42s; }
.compare-reveal.in .compare-row:nth-child(7)  { transition-delay: .48s; }
.compare-reveal.in .compare-row:nth-child(8)  { transition-delay: .54s; }
.compare-reveal.in .compare-row:nth-child(9)  { transition-delay: .60s; }
.compare-reveal.in .compare-row:nth-child(10) { transition-delay: .66s; }

/* Soft sheen sweep across the AI column once the table settles */
.compare-reveal .compare-cell.ai {
  position: relative;
  overflow: hidden;
}
.compare-reveal .compare-cell.ai::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,0.18) 50%,
    transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
.compare-reveal.in .compare-cell.ai::after {
  animation: aiSheen 1.8s cubic-bezier(.2,.7,.2,1) .9s 1 forwards;
}
@keyframes aiSheen {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .compare-reveal .compare-head,
  .compare-reveal .compare-row { transition: none; opacity: 1; transform: none; filter: none; }
  .compare-reveal.in .compare-cell.ai::after { animation: none; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTFOLIO-NETZ — das scrollgesteuerte Kartennetz unter den Buttons.
   Ersetzt die frühere Foto-Bühne (.stage). Logik: /portfolio-tunnel.js
   ══════════════════════════════════════════════════════════════════════════ */

/* Der Scroll-Treiber. Er ist so hoch wie ein Viewport plus der Weg, den der
   Fokus durch das Netz braucht; der Hero klebt darin fest. Sobald der Treiber
   durchgescrollt ist, löst sich der Pin und der nächste Abschnitt übernimmt.
   --pf-scroll wird von portfolio-tunnel.js aus der Kartenzahl berechnet; der
   Wert hier ist der identische Fallback für 6 Karten, damit die Seitenhöhe
   schon vor dem ersten Skript-Tick stimmt (kein Layout Shift). */
.hero-scroll {
  position: relative;
  --pf-scroll: 207svh;
  height: calc(100svh + var(--pf-scroll));
}
/* Im Netzmodus muss der gepinnte Hero exakt einen Viewport hoch sein, sonst
   laufen Unterkante und Pin auseinander. Die min-height-Stufen weiter oben
   stammen von der alten Foto-Bühne und werden hier neutralisiert. */
.hero-scroll > .hero {
  position: sticky;
  top: 0;
}
html:not(.pf-flat) .hero-scroll > .hero {
  height: 100svh;
  min-height: 0;
}

/* Flacher Modus (Mobile + prefers-reduced-motion): kein Pin, keine Kamera. */
html.pf-flat .hero-scroll {
  height: auto;
}
html.pf-flat .hero-scroll > .hero {
  position: relative;
  height: auto;
  min-height: 100svh;
}

/* ── Der Raum ─────────────────────────────────────────────────────────────
   Der Fluchtpunkt liegt exakt auf dem Fokuspunkt, damit die Fokuskarte dort
   unverzerrt sitzt und die übrigen Knoten von ihr wegfächern. */
portfolio-tunnel {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: block;
  perspective: var(--pf-perspective, 1600px);
  perspective-origin: var(--pf-focus-x, 30%) var(--pf-focus-y, 52%);
  pointer-events: none;
  contain: layout paint;
}
.pf-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* ── Die Netzlinien ───────────────────────────────────────────────────────
   Eigene SVG-Ebene hinter den Karten. Die Koordinaten setzt das Skript pro
   Frame aus denselben projizierten Punkten, auf denen auch die Karten
   sitzen — dadurch bleiben Linien und Karten immer deckungsgleich. */
.pf-web {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.pf-web line {
  stroke: rgba(255, 226, 200, 0.34);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.pf-web circle {
  fill: var(--orange);
  filter: drop-shadow(0 0 5px rgba(255, 106, 26, 0.85));
}

/* ── Die Karte ────────────────────────────────────────────────────────────
   Eine leere Box. Alle Karten teilen sich exakt diese Regeln; unterschiedlich
   sind nur der Platzhaltertext bzw. das Bild und die Position im Netz. */
.pf-card {
  position: absolute;
  /* Der unverschobene Kartenmittelpunkt liegt genau auf dem Fluchtpunkt.
     Erst dadurch projiziert jeder Netzversatz sauber von dort aus. */
  left: var(--pf-focus-x, 30%);
  top: var(--pf-focus-y, 52%);
  /* Fallback nur für den ersten Frame — die echten Werte misst
     portfolio-tunnel.js aus dem freien Raum unter den Buttons. */
  width: var(--pf-card-w, 320px);
  height: var(--pf-card-h, 410px);
  margin: 0;
  border-radius: 18px;
  border: 1px solid rgba(255, 238, 224, 0.13);
  background:
    linear-gradient(158deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(160deg, #17171A 0%, #101012 55%, #0B0B0D 100%);
  box-shadow:
    0 40px 80px -26px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  opacity: 0;
  transform: translate(-50%, -50%) translateZ(-4000px);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .4s ease, box-shadow .4s ease;
}
/* Nur die Karte im Fokus ist anfassbar — alles andere lässt Klicks durch. */
.pf-card.is-focus {
  pointer-events: auto;
  /* Kein cursor: pointer — die Seite blendet den System-Cursor global aus
     (body.has-custom-cursor * { cursor: none !important }) und zeichnet einen
     eigenen. Die Anfassbarkeit signalisiert deshalb der Hover-Zustand. */
  border-color: rgba(255, 168, 92, 0.32);
  box-shadow:
    0 40px 80px -26px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 106, 26, 0.12),
    0 22px 64px -28px rgba(255, 106, 26, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pf-card.is-focus:hover {
  border-color: rgba(255, 168, 92, 0.55);
  box-shadow:
    0 40px 80px -26px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 106, 26, 0.22),
    0 26px 76px -26px rgba(255, 106, 26, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.pf-card-inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
/* Platzhaltertext, solange kein Bild in den Daten steht. */
.pf-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(237, 237, 237, 0.42);
  text-align: center;
}
/* Die Motive und Cards teilen dasselbe 4:5-Seitenverhältnis. */
.pf-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Flacher Modus: dieselben Boxen, ruhig untereinander ──────────────── */
portfolio-tunnel.is-flat {
  position: relative;
  inset: auto;
  perspective: none;
  pointer-events: auto;
  padding: 8px 0 4px;
}
portfolio-tunnel.is-flat .pf-web { display: none; }
portfolio-tunnel.is-flat .pf-stage {
  position: relative;
  inset: auto;
  transform-style: flat;
  display: grid;
  gap: 16px;
  padding-inline: var(--gut);
}
portfolio-tunnel.is-flat .pf-card {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  max-width: 340px;
  height: auto;
  aspect-ratio: 0.78;
  margin-inline: auto;
  opacity: 1;
  transform: none;
  will-change: auto;
  pointer-events: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   IMAGE TEXT REVEAL — adapted from the supplied component.
   ══════════════════════════════════════════════════════════════════════════ */
.community-story {
  position: relative;
  z-index: 2;
  margin-top: -160px;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--bone);
  cursor: default;
}
.community-story-shell {
  max-width: none;
  padding: clamp(88px, 10vw, 144px) clamp(18px, 3vw, 48px);
}
.community-story-lines {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.7vw, 24px);
}
.community-story-line {
  display: flex;
  width: min(100%, 1680px);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.7vw, 24px);
  margin: 0;
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 6.8vw, 7.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: .98;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
  user-select: none;
}
.community-story-text { min-width: 0; flex: 0 1 auto; }
/* Jedes Wort blendet scrollgebunden auf (Deckkraft setzt economy-chart.js).
   Gedimmter Startwert, damit es vor dem ersten Tick schon richtig aussieht;
   die kurze Transition glättet grobe Scrollsprünge, ohne von der Scroll-
   position zu entkoppeln. */
.community-story-word {
  display: inline-block;
  opacity: 0.08;
  transition: opacity .14s linear;
  will-change: opacity;
}
@media (prefers-reduced-motion: reduce) {
  .community-story-word { opacity: 1; transition: none; }
}
.community-inline-visual {
  position: relative;
  display: inline-block;
  width: var(--visual-width, 0px);
  height: clamp(42px, 6.2vw, 96px);
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: clamp(7px, 1vw, 16px);
  background: var(--char);
  cursor: pointer;
}
.community-inline-visual img,
.community-story-follower img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.community-inline-visual img { opacity: .8; transition: opacity .3s ease; }
.community-inline-visual:hover img { opacity: 1; }
.community-story-follower {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 500px;
  height: 330px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--char);
  box-shadow: 0 30px 70px -10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(237,237,237,.1);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(50vw, 50vh, 0) translate(-50%, -50%);
  scale: .75;
  transition: opacity .3s ease, scale .3s ease;
}
.community-story-follower.is-visible { opacity: 1; scale: 1; }
.community-story + .economy-section { margin-top: 0; }

@media (max-width: 767px) {
  .community-story { margin-top: -80px; }
  .community-story-shell { padding: 80px 16px; }
  .community-story-lines { gap: 14px; }
  .community-story-line { width: 100%; font-size: clamp(1.7rem, 8.2vw, 3.1rem); gap: 7px; }
  .community-inline-visual { height: clamp(38px, 10vw, 48px); }
  .community-story-follower { width: 280px; height: 190px; }
}

@media (max-width: 1100px) and (min-width: 768px) {
  .community-story { margin-top: -110px; }
  .community-story-shell { padding-block: 100px; }
  .community-story-line { max-width: 960px; font-size: clamp(2.4rem, 6.1vw, 4.8rem); }
}

@media (hover: none), (pointer: coarse) {
  .community-story-follower { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .community-inline-visual { width: 300px !important; }
  .community-story-follower { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   COMMUNITY ECONOMY — bespoke annual-volume data story.
   Mounted by /economy-chart.js.
   ══════════════════════════════════════════════════════════════════════════ */
.scale-section.economy-section {
  margin-top: -160px;
  padding: clamp(170px, 15vw, 210px) var(--gut) clamp(84px, 10vw, 140px);
  background:
    radial-gradient(ellipse 72% 54% at 18% 52%, rgba(255, 106, 26, 0.07), transparent 62%),
    var(--ink);
  overflow: hidden;
}
.economy-shell {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: clamp(28px, 4vw, 52px);
}
.economy-header {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 480px);
  align-items: end;
  gap: 48px;
}
.economy-header h2 {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-sans);
  font-size: clamp(48px, 6vw, 82px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-wrap: balance;
}
.economy-header h2 span {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.94em;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--orange);
}
.economy-header h2 span em { color: var(--bone); font: inherit; font-style: normal; }
.economy-header p {
  margin: 0 0 5px;
  max-width: 48ch;
  color: rgba(237, 237, 237, 0.62);
  font-size: 15px;
  line-height: 1.6;
}

.economy-board {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 2.05fr) minmax(300px, 0.95fr);
  min-height: 510px;
  overflow: hidden;
  border: 1px solid rgba(237, 237, 237, 0.12);
  border-radius: 16px;
  background: rgba(237, 237, 237, 0.10);
  box-shadow: 0 36px 90px -52px rgba(0, 0, 0, 0.95);
}
.economy-plot,
.economy-current {
  min-width: 0;
  background: #101010;
}
.economy-plot {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 40px);
  overflow: hidden;
}
.economy-hero-value {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 4px 0 clamp(30px, 4vw, 54px);
}
.economy-hero-value > span {
  color: rgba(255, 168, 92, 0.88);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.economy-hero-value strong {
  max-width: 100%;
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: clamp(32px, 4.55vw, 66px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.economy-hero-value small {
  color: rgba(237, 237, 237, 0.52);
  font-size: 12px;
}
.economy-plot-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: rgba(237, 237, 237, 0.5);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.economy-plot-meta span:last-child { color: rgba(255, 168, 92, 0.82); }
.economy-chart-stage {
  position: relative;
  flex: 1;
  min-height: 390px;
}
.economy-chart {
  display: block;
  width: 100%;
  height: auto;
  min-height: 390px;
  margin-top: 12px;
  overflow: visible;
}
.economy-gridlines path {
  fill: none;
  stroke: rgba(237, 237, 237, 0.08);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.economy-axis-labels,
.economy-value-sub {
  fill: rgba(237, 237, 237, 0.46);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
}
.economy-chart-area {
  fill: url(#economyArea);
  transform-origin: 74px 374px;
  transition: clip-path 1.4s cubic-bezier(.16,1,.3,1);
}
.economy-chart-line,
.economy-chart-line-shadow {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.45s cubic-bezier(.16,1,.3,1);
}
.economy-chart-line-shadow {
  stroke: rgba(255, 106, 26, 0.22);
  stroke-width: 10;
  filter: blur(8px);
}
.economy-chart-line {
  stroke: var(--orange);
  stroke-width: 2;
}
.economy-now-marker > path,
.economy-forecast-marker > path {
  stroke: rgba(237, 237, 237, 0.14);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}
.economy-point-halo {
  fill: rgba(255, 106, 26, 0.11);
  stroke: rgba(255, 106, 26, 0.26);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .28s cubic-bezier(.16,1,.3,1), fill .28s ease, stroke .28s ease;
}
.economy-point-core {
  fill: var(--orange);
  stroke: #101010;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transition: fill .2s ease, stroke .2s ease;
}
.economy-point-hit { fill: transparent; }
.economy-point-guide {
  stroke: rgba(255, 168, 92, 0.38);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  transition: opacity .2s ease;
}
.economy-chart-point {
  outline: none;
  transition: opacity .2s ease;
}
.economy-chart-point:hover .economy-point-halo,
.economy-chart-point:focus .economy-point-halo,
.economy-chart-point.is-active .economy-point-halo {
  fill: rgba(255, 106, 26, 0.22);
  stroke: rgba(255, 168, 92, 0.75);
  transform: scale(1.55);
}
.economy-chart-point:hover .economy-point-core,
.economy-chart-point:focus .economy-point-core,
.economy-chart-point.is-active .economy-point-core {
  fill: var(--bone);
  stroke: var(--orange);
}
.economy-chart-point:hover .economy-point-guide,
.economy-chart-point:focus .economy-point-guide,
.economy-chart-point.is-active .economy-point-guide { opacity: 1; }
.economy-chart-stage.has-active-point .economy-chart-point:not(.is-active) { opacity: 0.42; }
.economy-chart-point:focus-visible .economy-point-halo {
  stroke: var(--bone);
  stroke-width: 2;
}
.economy-tooltip {
  position: absolute;
  z-index: 8;
  display: grid;
  min-width: 168px;
  gap: 2px;
  padding: 13px 14px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 168, 92, 0.24);
  background: #090909;
  color: var(--bone);
  box-shadow: 0 22px 46px -18px rgba(0, 0, 0, 0.98);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.97);
  transform-origin: 50% 100%;
  transition: opacity .18s ease, transform .24s cubic-bezier(.16,1,.3,1);
}
.economy-tooltip.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.economy-tooltip-year {
  color: #ffa86a;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: 1;
}
.economy-tooltip-value {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.economy-tooltip-detail { color: rgba(237, 237, 237, .62); font-size: 11px; }
.economy-tooltip-note {
  margin-top: 6px;
  color: #ffa86a;
  font-family: var(--font-mono);
  font-size: 8px;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.economy-value-label {
  fill: var(--bone);
  font-family: var(--font-sans);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.economy-current {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(28px, 3vw, 42px);
  border-left: 1px solid rgba(237, 237, 237, 0.10);
  background:
    linear-gradient(154deg, rgba(255, 255, 255, 0.045), transparent 42%),
    #0c0c0c;
}
.economy-current-kicker {
  margin: 0 0 12px;
  color: rgba(255, 168, 92, 0.82);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.economy-current h3 {
  margin: 0;
  max-width: 11ch;
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.economy-current-value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.economy-current-value strong {
  font-family: var(--font-sans);
  font-size: clamp(50px, 4.7vw, 68px);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 0.88;
  font-variant-numeric: tabular-nums;
}
.economy-current-value span {
  color: rgba(237, 237, 237, 0.5);
  font-size: 12px;
}
.economy-progress-wrap { display: grid; gap: 10px; }
.economy-progress-labels,
.economy-progress-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: rgba(237, 237, 237, 0.58);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.economy-progress-labels span:last-child { color: var(--bone); }
.economy-progress {
  position: relative;
  height: 7px;
  overflow: visible;
  background: rgba(237, 237, 237, 0.12);
  border-radius: 999px;
}
.economy-progress::before {
  content: "";
  position: absolute;
  inset: -5px 0;
  background-image: linear-gradient(to right, transparent calc(100% - 1px), rgba(237,237,237,0.14) calc(100% - 1px));
  background-size: 25% 100%;
  pointer-events: none;
}
.economy-progress-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--orange);
  box-shadow: 0 5px 18px -5px rgba(255, 106, 26, 0.72);
  transform: scaleX(0.515);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1) .15s;
}
.economy-progress i {
  position: absolute;
  left: 51.5%;
  top: 50%;
  width: 13px;
  height: 13px;
  border: 3px solid #0c0c0c;
  border-radius: 50%;
  background: var(--orange);
  transform: translate(-50%, -50%);
}
.economy-progress-scale { color: rgba(237, 237, 237, 0.34); }

.platform-breakdown {
  overflow: hidden;
  border: 1px solid rgba(237, 237, 237, 0.1);
  border-radius: 14px;
  background: #0e0e0e;
}
.platform-breakdown-header {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  align-items: end;
  gap: 32px;
  padding: 26px clamp(20px, 3vw, 38px) 22px;
  border-bottom: 1px solid rgba(237, 237, 237, 0.09);
}
.platform-breakdown-header h3 {
  margin: 0;
  color: var(--bone);
  font-size: clamp(25px, 2.4vw, 36px);
  font-weight: 560;
  letter-spacing: -0.035em;
  line-height: 1;
}
.platform-breakdown-header p {
  max-width: 50ch;
  margin: 0;
  color: rgba(237, 237, 237, 0.46);
  font-size: 12px;
  line-height: 1.55;
}
.platform-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.platform-list > li {
  border-bottom: 1px solid rgba(237, 237, 237, 0.07);
}
.platform-list > li:last-child { border-bottom: 0; }
.platform-row {
  display: grid;
  grid-template-columns: minmax(150px, .75fr) minmax(150px, 1.5fr) minmax(150px, .65fr);
  align-items: center;
  gap: clamp(18px, 2.6vw, 38px);
  min-height: 72px;
  padding: 0 clamp(20px, 3vw, 38px);
  color: inherit;
  text-decoration: none;
  transition: background-color .22s ease;
}
.platform-row:hover,
.platform-row:focus-visible { background: rgba(255, 106, 26, 0.035); }
.platform-row:focus-visible { outline: 1px solid rgba(255, 106, 26, .7); outline-offset: -1px; }
.platform-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}
.platform-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(237, 237, 237, 0.07);
}
.platform-icon img { display: block; width: 22px; height: 22px; object-fit: contain; }
.platform-identity > span:last-child { display: grid; gap: 4px; min-width: 0; }
.platform-identity strong {
  color: var(--bone);
  font-size: 14px;
  font-weight: 590;
  line-height: 1;
}
.platform-identity small {
  overflow: hidden;
  color: rgba(237, 237, 237, 0.38);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .06em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.platform-chart {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 106, 26, 0.1);
}
.platform-chart span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--orange);
  transform: scaleX(var(--platform-share));
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.16,1,.3,1) var(--platform-delay);
}
.platform-revenue { display: grid; justify-items: end; gap: 5px; text-align: right; }
.platform-revenue strong {
  color: var(--bone);
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 610;
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.platform-revenue em {
  margin-left: 4px;
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .1em;
  vertical-align: 2px;
}
.platform-revenue > span {
  color: rgba(237, 237, 237, 0.38);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .2s ease;
}
.platform-revenue i { font-style: normal; }
.platform-row:hover .platform-revenue > span,
.platform-row:focus-visible .platform-revenue > span { color: var(--orange); }
.platform-pending .platform-chart span { transform: scaleX(0); }
.platform-pending .platform-identity,
.platform-pending .platform-revenue { opacity: .38; }
.platform-identity,
.platform-revenue {
  opacity: 1;
  transition: opacity .5s ease var(--platform-delay);
}

.economy-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.economy-kpi {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid rgba(237, 237, 237, 0.10);
  border-radius: 14px;
  background: #101010;
  transition: border-color .3s ease, background-color .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.economy-kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), transparent 72%);
  opacity: .35;
  transform: scaleX(.36);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.economy-kpi:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 168, 92, 0.30);
  background: #121110;
}
.economy-kpi:hover::before { opacity: .9; transform: scaleX(1); }
.economy-kpi dt {
  margin-bottom: 16px;
  color: rgba(237, 237, 237, 0.46);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}
.economy-kpi-signal {
  height: 42px;
  margin-bottom: 22px;
  color: var(--orange);
}
.economy-kpi-signal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.economy-kpi-signal svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  opacity: .58;
  transition: opacity .3s ease, stroke-width .3s ease;
}
.economy-kpi-signal svg circle {
  fill: #101010;
  stroke: currentColor;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition: fill .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
  transform-box: fill-box;
  transform-origin: center;
}
.economy-kpi:hover .economy-kpi-signal svg path { opacity: 1; stroke-width: 1.8; }
.economy-kpi:hover .economy-kpi-signal svg circle { fill: var(--orange); transform: scale(1.25); }
.economy-kpi-signal--steps span {
  display: flex;
  height: 100%;
  align-items: end;
  gap: 7px;
  border-bottom: 1px solid rgba(237,237,237,.1);
}
.economy-kpi-signal--steps i {
  width: 12px;
  height: var(--h);
  background: linear-gradient(to top, rgba(255,106,26,.18), var(--orange));
  opacity: .64;
  transform-origin: bottom;
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.economy-kpi:hover .economy-kpi-signal--steps i { opacity: 1; transform: scaleY(.86); }
.economy-kpi--platforms .economy-kpi-signal { color: #ffd0ae; }
.economy-kpi--growth .economy-kpi-signal { color: #ff8642; }
.economy-kpi dd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}
.economy-kpi-value {
  min-width: 0;
  font-family: var(--font-sans);
  font-size: clamp(26px, 2.45vw, 40px);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.economy-kpi-badge {
  flex: 0 0 auto;
  padding: 5px 7px 4px;
  border: 1px solid rgba(237, 237, 237, 0.12);
  border-radius: 6px;
  color: rgba(237, 237, 237, 0.58);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.economy-kpi--current .economy-kpi-badge,
.economy-kpi--forecast .economy-kpi-badge {
  border-color: rgba(255, 106, 26, 0.25);
  background: rgba(255, 106, 26, 0.08);
  color: #ffa86a;
}

.economy-pending .economy-chart-area { clip-path: inset(0 100% 0 0); }
.economy-pending .economy-chart-line,
.economy-pending .economy-chart-line-shadow { stroke-dashoffset: 1; }
.economy-pending .economy-progress-fill { transform: scaleX(0); }

@media (max-width: 980px) {
  .economy-header { grid-template-columns: 1fr; gap: 22px; }
  .economy-header p { max-width: 60ch; }
  .economy-board { grid-template-columns: 1fr; }
  .economy-current { border-left: 0; border-top: 1px solid rgba(237, 237, 237, 0.10); }
  .economy-current-value { margin-block: 14px; }
  .platform-breakdown-header { grid-template-columns: 1fr; gap: 10px; }
  .economy-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .scale-section.economy-section {
    margin-top: 0;
    padding: 72px 20px 84px;
  }
  .economy-shell { padding-inline: 0; gap: 28px; }
  .economy-header h2 { max-width: 100%; font-size: clamp(36px, 10.2vw, 40px); }
  .economy-header p { font-size: 14px; }
  .economy-board { min-height: 0; border-radius: 14px; }
  .economy-plot { padding: 22px 14px 10px; }
  .economy-hero-value { padding: 4px 8px 34px; }
  .economy-hero-value strong { font-size: clamp(27px, 7.6vw, 32px); }
  .economy-plot-meta { padding-inline: 8px; }
  .economy-plot-meta span:last-child { display: none; }
  .economy-chart-stage { min-height: 285px; }
  .economy-chart { min-height: 285px; margin-left: -8px; width: calc(100% + 16px); }
  .economy-axis-labels { font-size: 18px; }
  .economy-value-label { font-size: 28px; }
  .economy-value-sub { font-size: 17px; }
  .economy-current { padding: 28px 24px; }
  .economy-current h3 { max-width: 14ch; }
  .economy-current-value strong { font-size: clamp(48px, 15vw, 58px); }
  .economy-tooltip { min-width: 146px; padding: 11px 12px 10px; }
  .economy-tooltip-value { font-size: 21px; }
  .platform-breakdown-header { padding: 22px 18px 18px; }
  .platform-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 16px;
    min-height: 86px;
    padding: 12px 18px;
  }
  .platform-chart { grid-column: 1 / -1; grid-row: 2; }
  .platform-identity { grid-column: 1; grid-row: 1; }
  .platform-revenue { grid-column: 2; grid-row: 1; }
  .platform-identity small { max-width: 35vw; }
  .economy-kpis { gap: 10px; }
  .economy-kpi { padding: 18px 16px; }
  .economy-kpi dt { min-height: 2.8em; margin-bottom: 12px; }
  .economy-kpi-signal { height: 32px; margin-bottom: 18px; }
  .economy-kpi dd { display: grid; gap: 12px; }
  .economy-kpi-value { font-size: clamp(23px, 7.5vw, 31px); }
  .economy-kpi-badge { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .economy-chart-area,
  .economy-chart-line,
  .economy-chart-line-shadow,
  .economy-progress-fill,
  .platform-chart span { transition: none; }
  .economy-kpi:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TEAM-SHOWCASE — Foto-Raster + Namensliste zwischen Economy und CTA.
   Logik: /team-showcase.js
   ══════════════════════════════════════════════════════════════════════════ */
.team-showcase {
  position: relative;
  z-index: 2;
  background: var(--ink);
  color: var(--bone);
  padding: clamp(64px, 8vw, 120px) 0 clamp(56px, 7vw, 104px);
}
.team-shell { max-width: 1180px; }

.team-header { text-align: center; margin-bottom: clamp(40px, 5vw, 72px); }
.team-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--mist);
}
.team-eyebrow-tick { width: 22px; height: 1px; background: var(--orange); display: inline-block; }
.team-title {
  margin: 16px 0 0;
  font-family: var(--font-sans); font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 4rem); letter-spacing: -0.04em; line-height: 1.02;
  color: var(--bone);
}
.team-title em { font-style: italic; font-weight: 800; color: var(--orange); }
.team-sub {
  margin: 16px auto 0; max-width: 46ch;
  font-family: var(--font-sans); font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.55; color: rgba(237, 237, 237, 0.6);
}

/* ── Layout: Raster links, Liste rechts ─────────────────────────────────── */
.team-body {
  display: flex; flex-direction: column; gap: 40px;
  align-items: flex-start;
}
@media (min-width: 900px) {
  .team-body { flex-direction: row; gap: clamp(40px, 5vw, 72px); }
}

/* ── Foto-Raster (3 versetzte Spalten) ──────────────────────────────────── */
.team-grid { display: flex; gap: clamp(8px, 1vw, 14px); flex-shrink: 0; }
.team-col { display: flex; flex-direction: column; gap: clamp(8px, 1vw, 14px); }
.team-col-2 { margin-top: clamp(40px, 5vw, 68px); }
.team-col-3 { margin-top: clamp(18px, 2.4vw, 32px); }

.team-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
  width: clamp(104px, 12vw, 158px);
  aspect-ratio: 1 / 1.06;
  background:
    linear-gradient(158deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 55%),
    linear-gradient(160deg, #191919, #0e0e0e);
  border: 1px solid rgba(255, 238, 224, 0.10);
}
.team-col-2 .team-card { width: clamp(116px, 13.4vw, 176px); }
.team-col-3 .team-card { width: clamp(110px, 12.6vw, 166px); }

.team-card-media { position: absolute; inset: 0; }
.team-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(0.72);
  transition: filter .5s ease;
}
.team-card-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.team-silhouette {
  width: 42%; height: auto;
  stroke: rgba(237, 237, 237, 0.22); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .4s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}

/* Aktiv/gedimmt — geteilt zwischen Foto und Name */
.team-showcase.has-active .team-card { opacity: 0.5; }
.team-showcase.has-active .team-card.is-active { opacity: 1; }
.team-card.is-active {
  transform: translateY(-2px);
  border-color: rgba(255, 168, 92, 0.35);
  box-shadow: 0 20px 50px -22px rgba(255, 106, 26, 0.5);
}
.team-card.is-active .team-card-media img { filter: grayscale(0) brightness(1); }
.team-card.is-active .team-silhouette { stroke: var(--orange); transform: scale(1.05); }

/* ── Namensliste ────────────────────────────────────────────────────────── */
.team-list {
  display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 22px);
  flex: 1; width: 100%; padding-top: 4px;
}
@media (min-width: 560px) and (max-width: 899px) {
  .team-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; }
}
.team-row {
  cursor: pointer; outline: none;
  transition: opacity .3s ease;
}
.team-showcase.has-active .team-row { opacity: 0.45; }
.team-showcase.has-active .team-row.is-active { opacity: 1; }

.team-row-head { display: flex; align-items: center; gap: 11px; }
.team-bar {
  width: 16px; height: 12px; border-radius: 5px; flex-shrink: 0;
  background: rgba(237, 237, 237, 0.22);
  transition: width .3s ease, background .3s ease;
}
.team-row.is-active .team-bar { width: 22px; background: var(--orange); }
.team-name {
  font-family: var(--font-sans); font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1;
  color: rgba(237, 237, 237, 0.82);
  transition: color .3s ease; white-space: nowrap;
}
.team-row.is-active .team-name { color: var(--bone); }

/* Social-Links blenden beim Aktivieren ein */
.team-socials {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 2px;
  opacity: 0; transform: translateX(-8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.team-row.is-active .team-socials { opacity: 1; transform: translateX(0); pointer-events: auto; }
.team-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  color: var(--mist);
  transition: color .15s ease, background .15s ease, transform .15s ease;
}
.team-social svg { width: 13px; height: 13px; display: block; }
.team-social:hover { color: var(--bone); background: rgba(255, 255, 255, 0.08); transform: scale(1.12); }
.team-tba {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim);
  padding: 3px 8px; border: 1px solid rgba(255, 238, 224, 0.12); border-radius: 999px;
}
.team-role {
  margin: 7px 0 0; padding-left: 27px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--dim);
}

/* Reveal beim Reinscrollen */
.team-showcase .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.team-showcase .reveal.in { opacity: 1; transform: none; }

@media (max-width: 560px) {
  .team-grid { overflow-x: auto; padding-bottom: 4px; }
  .team-role { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .team-showcase .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── „Join us"-Buttons: weiß mit orangem Schimmer-Ring beim Hover ─────────────
   (derselbe rotierende Rahmen wie „Learn more"/.btn-secondary, in Orange).
   Gilt für den Header-Button (.nav-cta) UND den QUANTUM-MOVER-Button (.cta-btn).
   Der Button selbst bleibt weiß — nur der Ring schimmert. */
.nav-cta { position: relative; }
.cta-btn { position: relative; }
.nav-cta::before,
.cta-btn::before {
  content: "";
  position: absolute; inset: -3px;
  padding: 3px;
  background: conic-gradient(from var(--hb-angle, 0deg),
    transparent 0deg,
    rgba(255, 106, 26, 0) 40deg,
    rgba(255, 106, 26, 1) 95deg,
    rgba(255, 168, 92, 1) 130deg,
    rgba(255, 106, 26, 1) 165deg,
    rgba(255, 106, 26, 0) 220deg,
    transparent 360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.nav-cta::before { border-radius: 19px; }
.cta-btn::before { border-radius: 17px; }
.nav-cta:hover::before,
.cta-btn:hover::before {
  opacity: 1;
  animation: hb-spin 2s linear infinite;
}

/* ── Handy: KPI-Karten leuchten beim Reinscrollen auf (spiegelt den Hover) ──── */
.economy-kpi.is-lit {
  border-color: rgba(255, 168, 92, 0.30);
  background: #121110;
}
.economy-kpi.is-lit::before { opacity: .9; transform: scaleX(1); }
.economy-kpi.is-lit .economy-kpi-signal svg path { opacity: 1; stroke-width: 1.8; }
.economy-kpi.is-lit .economy-kpi-signal svg circle { fill: var(--orange); transform: scale(1.25); }
.economy-kpi.is-lit .economy-kpi-signal--steps i { opacity: 1; transform: scaleY(.86); }