/* ============================================================
   Clusterfish — static site styles
   Ported from the Next.js rebuild (clusterfish-next). No Tailwind,
   no build: @theme tokens become :root custom properties, module
   CSS becomes namespaced plain classes. Fonts: see assets/fonts.css.
   ============================================================ */

/* ---- Design tokens (from globals.css @theme) ---- */
:root {
  /* Surfaces — deep navy */
  --color-bg: #070b16;
  --color-bg-2: #0a1222;
  --color-bg-3: #0f1a30;
  --color-surface: #121f3a;
  --color-surface-2: #172748;

  --color-border: rgba(145, 180, 255, 0.08);
  --color-border-strong: rgba(145, 180, 255, 0.18);

  --color-text: #f2f5fc;
  --color-text-dim: #9db0cf;
  --color-text-faint: #5d6f91;

  /* Clusterfish blue */
  --color-brand: #3d8bff;
  --color-brand-2: #6ba6ff;
  --color-brand-deep: #1f5fd1;
  --color-brand-soft: rgba(61, 139, 255, 0.12);
  --color-brand-glow: rgba(61, 139, 255, 0.5);

  /* Warm amber */
  --color-amber: #ffb347;
  --color-amber-2: #ff8a3d;
  --color-amber-glow: rgba(255, 179, 71, 0.5);

  /* Fonts — self-hosted (assets/fonts.css declares the @font-face faces) */
  --font-inter: "Inter", system-ui, -apple-system, sans-serif;
  --font-inter-tight: "Inter Tight", sans-serif;
  --font-sans: var(--font-inter), system-ui, -apple-system, sans-serif;
  --font-tight: var(--font-inter-tight), sans-serif;

  /* Radii */
  --radius-card: 20px;
  --radius-pill: 100px;

  /* Easings */
  --ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out-quart: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container-site: 1240px;
}

/* ---- Base ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv11";
  min-height: 100dvh;
}

/* Subtle film grain for texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.45;
  mix-blend-mode: overlay;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }

::selection { background: var(--color-brand); color: #05091a; }

:focus-visible {
  outline: 2px solid var(--color-brand-2);
  outline-offset: 3px;
  border-radius: 4px;
}

[lang="ja"] body { word-break: break-word; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Keyframes ---- */
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(3%, -2%) rotate(0.6deg); }
  66% { transform: translate(-2%, 3%) rotate(-0.4deg); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes btn-shimmer {
  0% { transform: translateX(-120%); }
  55% { transform: translateX(-120%); }
  90% { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

/* ---- Reusable primitives ---- */
.container-site { max-width: var(--container-site); margin-inline: auto; width: 100%; }

.section-pad { padding: 140px clamp(20px, 4vw, 48px); }
@media (max-width: 780px) { .section-pad { padding: 96px clamp(20px, 4vw, 48px); } }

.section-eyebrow {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--color-brand-2);
  margin-bottom: 14px;
  display: block;
}
.section-title {
  font-family: var(--font-tight);
  font-weight: 700;
  font-size: clamp(36px, 5.2vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.section-lede {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--color-text-dim);
  margin-top: 24px;
  max-width: 580px;
}

.text-gradient {
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 45%, #a9c9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Buttons */
.btn {
  padding: 16px 28px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth), background 0.3s;
  position: relative;
  overflow: hidden;
  letter-spacing: -0.005em;
  min-height: 52px;
  cursor: pointer;
  border: 0;
}
.btn-primary {
  background: linear-gradient(135deg, var(--color-brand-2) 0%, var(--color-brand) 55%, #2a6df0 100%);
  color: #05091a;
  font-weight: 700;
  padding: 17px 30px;
  box-shadow: 0 14px 50px -10px var(--color-brand-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(135deg, #8ebcff 0%, var(--color-brand-2) 55%, var(--color-brand) 100%);
  box-shadow: 0 26px 60px -10px var(--color-brand-glow), 0 0 0 1px rgba(61, 139, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: btn-shimmer 4.5s var(--ease-smooth) infinite;
}
.btn-primary:hover::after { animation-duration: 1.4s; }
.btn-secondary {
  background: rgba(145, 180, 255, 0.04);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  backdrop-filter: blur(8px);
}
.btn-secondary:hover {
  background: rgba(145, 180, 255, 0.09);
  transform: translateY(-2px);
  border-color: var(--color-brand);
}
.btn .arrow { transition: transform 0.35s var(--ease-smooth); }
.btn:hover .arrow { transform: translateX(5px); }

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1.1s var(--ease-out-quart), transform 1.1s var(--ease-out-quart);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.stagger > * {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s var(--ease-out-quart), transform 1s var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * 0.09s);
}
.reveal.stagger.in > * { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.stagger > * { opacity: 1; transform: none; }
}

/* Inline-markup helpers (live inside translation messages) */
.tier-price {
  font-family: var(--font-tight);
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 6px;
}
.tier-price .from, .tier-price .mo {
  font-size: 16px;
  color: var(--color-text-faint);
  font-weight: 500;
  letter-spacing: 0;
}
.tier-price .from { margin-right: 4px; }
.price-inline strong { color: var(--color-text); font-weight: 600; }
.testimonial-quote .highlight {
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}
.cta-title .grad {
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-2) 60%, #a9c9ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Language toggle (shared by nav + mobile menu) */
.lang-toggle {
  display: flex;
  gap: 2px;
  background: rgba(145, 180, 255, 0.06);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 3px;
}
.lang-toggle button, .lang-toggle a {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-text-faint);
  border-radius: var(--radius-pill);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.lang-toggle button:hover, .lang-toggle a:hover { color: var(--color-text-dim); }
.lang-toggle button.active, .lang-toggle a.active { background: var(--color-brand); color: #05091a; }

/* ---- Scroll progress ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 999;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--color-brand), var(--color-brand-2), var(--color-amber));
}

/* ---- Nav ---- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: backdrop-filter 0.4s, background 0.4s, border-color 0.4s, padding 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  background: rgba(7, 11, 22, 0.72);
  border-bottom-color: var(--color-border);
  padding-top: 14px;
  padding-bottom: 14px;
}
.nav-logo { display: flex; align-items: center; gap: 14px; color: var(--color-text); }
.nav-logo-img { height: 30px; width: auto; transition: transform 0.4s var(--ease-smooth); }
.nav-logo:hover .nav-logo-img { transform: scale(1.03); }
.nav-logo-sub {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-faint);
  letter-spacing: 0.04em;
  line-height: 1.35;
  max-width: 130px;
  border-left: 1px solid var(--color-border-strong);
  padding-left: 14px;
}
.nav-links { display: flex; gap: 32px; font-size: 14px; color: var(--color-text-dim); }
.nav-links a { position: relative; font-weight: 600; transition: color 0.25s; padding: 4px 0; }
.nav-links a:hover { color: var(--color-text); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out-quart);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta {
  padding: 10px 20px;
  background: var(--color-brand);
  color: #05091a;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  box-shadow: 0 6px 24px -6px var(--color-brand-glow);
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s, background 0.25s;
}
.nav-cta:hover {
  transform: translateY(-2px);
  background: var(--color-brand-2);
  box-shadow: 0 14px 32px -8px var(--color-brand-glow);
}
.nav-menu-btn {
  display: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--color-border-strong);
  background: rgba(255, 255, 255, 0.03);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s;
}
.nav-menu-btn:hover { background: rgba(255, 255, 255, 0.07); }
.nav-menu-btn span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--color-text);
  position: relative;
  transition: transform 0.35s var(--ease-smooth), opacity 0.2s;
}
.nav-menu-btn span::before, .nav-menu-btn span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%; height: 1.5px;
  background: var(--color-text);
  transition: transform 0.35s var(--ease-smooth);
}
.nav-menu-btn span::before { top: -6px; }
.nav-menu-btn span::after { top: 6px; }
.nav-menu-btn.menu-open span { transform: rotate(45deg); }
.nav-menu-btn.menu-open span::before { transform: translate(0, 6px) rotate(-90deg); }
.nav-menu-btn.menu-open span::after { transform: translate(0, -6px) rotate(-90deg); opacity: 0; }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(7, 11, 22, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: 100px clamp(20px, 4vw, 48px) 40px;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-smooth);
}
.mobile-menu.menu-open { opacity: 1; pointer-events: auto; }
.mobile-menu a, .mobile-menu button.menu-link {
  font-family: var(--font-tight);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.025em;
  padding: 16px 0;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.6s var(--ease-out-quart), opacity 0.6s var(--ease-out-quart), color 0.25s;
}
.mobile-menu a:hover, .mobile-menu button.menu-link:hover { color: var(--color-brand-2); }
.mobile-menu.menu-open a, .mobile-menu.menu-open button.menu-link { opacity: 1; transform: translateY(0); }
.mobile-menu.menu-open > *:nth-child(1) { transition-delay: 0.08s; }
.mobile-menu.menu-open > *:nth-child(2) { transition-delay: 0.14s; }
.mobile-menu.menu-open > *:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu.menu-open > *:nth-child(4) { transition-delay: 0.26s; }
.mobile-menu.menu-open > *:nth-child(5) { transition-delay: 0.32s; }
.mobile-menu.menu-open > *:nth-child(6) { transition-delay: 0.38s; }
.footer-note {
  margin-top: auto;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-text-faint);
  letter-spacing: 0.05em;
}
.mobile-lang { margin-top: 16px; justify-content: center; }

@media (max-width: 720px) {
  .nav-logo-sub { display: none; }
  .nav-logo-img { height: 26px; }
}
@media (max-width: 880px) {
  .nav-links, .nav-cta, .desktop-lang { display: none; }
  .nav-menu-btn { display: flex; }
}
@media (min-width: 881px) {
  .mobile-menu { display: none; }
}

/* ============================================================
   TEMPORARY — palette experiments (default → petrol → graphit → nordlicht)
   ============================================================ */
:root.palette-petrol {
  --color-bg: #0a2a38; --color-bg-2: #0d3445; --color-bg-3: #114052;
  --color-surface: #16506a; --color-surface-2: #1f6585;
  --color-border: rgba(186, 224, 226, 0.14); --color-border-strong: rgba(186, 224, 226, 0.28);
  --color-text: #f4f1e1; --color-text-dim: #b6d4d8; --color-text-faint: #88acb6;
  --color-brand: #21b8c4; --color-brand-2: #5fd3d8; --color-brand-deep: #15919e;
  --color-brand-soft: rgba(33, 184, 196, 0.12); --color-brand-glow: rgba(33, 184, 196, 0.5);
  --color-amber: #f59a23; --color-amber-2: #ffae4d; --color-amber-glow: rgba(245, 154, 35, 0.5);
  --color-brand-tint: #bae0e2;
}
:root.palette-graphit {
  --color-bg: #0b0d10; --color-bg-2: #0f1216; --color-bg-3: #14181e;
  --color-surface: #171c23; --color-surface-2: #1f2630;
  --color-border: rgba(210, 225, 235, 0.08); --color-border-strong: rgba(210, 225, 235, 0.18);
  --color-text: #f4f5f3; --color-text-dim: #a9b3be; --color-text-faint: #7c8894;
  --color-brand: #34d399; --color-brand-2: #6ee7b7; --color-brand-deep: #0ea371;
  --color-brand-soft: rgba(52, 211, 153, 0.12); --color-brand-glow: rgba(52, 211, 153, 0.45);
  --color-amber: #ffb347; --color-amber-2: #ff8a3d; --color-amber-glow: rgba(255, 179, 71, 0.5);
  --color-brand-tint: #d2fae8;
}
:root.palette-nordlicht {
  --color-bg: #0b0a1e; --color-bg-2: #100e2a; --color-bg-3: #161339;
  --color-surface: #1a1742; --color-surface-2: #242057;
  --color-border: rgba(186, 178, 255, 0.1); --color-border-strong: rgba(186, 178, 255, 0.22);
  --color-text: #f3f2fc; --color-text-dim: #b1abd8; --color-text-faint: #837dba;
  --color-brand: #8b7cf6; --color-brand-2: #ab9dff; --color-brand-deep: #6a59e6;
  --color-brand-soft: rgba(139, 124, 246, 0.14); --color-brand-glow: rgba(139, 124, 246, 0.5);
  --color-amber: #ffb347; --color-amber-2: #ff8a3d; --color-amber-glow: rgba(255, 179, 71, 0.5);
  --color-brand-tint: #ded7ff;
}
.palette-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 7px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: rgba(145, 180, 255, 0.06);
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, transform 0.15s;
}
.palette-toggle:hover { border-color: var(--color-border-strong); }
.palette-toggle:active { transform: scale(0.96); }
.palette-toggle.active { border-color: var(--color-brand); background: var(--color-brand-soft); }
.palette-toggle span {
  width: 11px; height: 11px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
:root.palette-petrol .btn-primary,
:root.palette-graphit .btn-primary,
:root.palette-nordlicht .btn-primary {
  background: linear-gradient(135deg, var(--color-brand-2) 0%, var(--color-brand) 55%, var(--color-brand-deep) 100%);
}
:root.palette-petrol .btn-primary:hover,
:root.palette-graphit .btn-primary:hover,
:root.palette-nordlicht .btn-primary:hover {
  background: linear-gradient(135deg, var(--color-brand-tint) 0%, var(--color-brand-2) 55%, var(--color-brand) 100%);
}
:root.palette-petrol .text-gradient,
:root.palette-graphit .text-gradient,
:root.palette-nordlicht .text-gradient,
:root.palette-petrol .cta-title .grad,
:root.palette-graphit .cta-title .grad,
:root.palette-nordlicht .cta-title .grad {
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 45%, var(--color-brand-tint) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   SECTION STYLES — appended per section during the port
   ============================================================ */

/* ===== section: hero ===== */
/* ============================================================
   hero — Hero layout + rotating headline + BillChart
   Scoped to [data-section="hero"]; classes prefixed hero-/bc-.
   Ported from Hero.module.css + BillChart.module.css.
   ============================================================ */

.sec-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 150px clamp(20px, 4vw, 48px) 80px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(145, 180, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(145, 180, 255, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 80%);
}
.hero-mesh {
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse 50% 40% at 18% 28%, rgba(61, 139, 255, 0.25), transparent 60%),
    radial-gradient(ellipse 40% 50% at 82% 62%, rgba(255, 179, 71, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(61, 139, 255, 0.12), transparent 70%);
  filter: blur(60px);
  animation: drift 22s ease-in-out infinite;
}

.hero-inner {
  position: relative;
  max-width: var(--container-site);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 80px;
  align-items: center;
}

.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-text-dim);
  letter-spacing: -0.005em;
  margin-bottom: 30px;
  opacity: 0;
  transform: translateY(12px);
  animation: hero-rise 0.9s var(--ease-out-quart) 0.1s forwards;
}

.hero-title {
  font-family: var(--font-tight);
  font-weight: 800;
  font-size: clamp(44px, 8vw, 112px);
  line-height: 0.93;
  letter-spacing: -0.04em;
  text-wrap: balance;
  margin-bottom: 32px;
}
.hero-title .hero-line {
  display: block;
  overflow: hidden;
}
.hero-title .hero-line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: hero-slide-up 1.1s var(--ease-out-quart) forwards;
}
.hero-title .hero-line:nth-child(1) > span { animation-delay: 0.2s; }
.hero-title .hero-line:nth-child(2) > span { animation-delay: 0.34s; }
.hero-title .hero-line:nth-child(3) > span { animation-delay: 0.48s; }
.hero-title .hero-line:nth-child(4) > span { animation-delay: 0.62s; }
.hero-title .hero-accent {
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 45%, #a9c9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-rotator {
  display: inline-flex;
  overflow: hidden;
  height: 0.93em;
  vertical-align: top;
  /* no width transition: animating width forced continuous layout/paint
     (15-23% idle CPU in Firefox); the vertical roll stays animated */
}
.hero-rotator-track {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-rotator-track > span {
  display: block;
  height: 0.93em;
  white-space: nowrap;
}
.hero-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--color-text-dim);
  max-width: 540px;
  line-height: 1.55;
  margin-bottom: 44px;
  opacity: 0;
  transform: translateY(20px);
  animation: hero-rise 1s var(--ease-out-quart) 0.75s forwards;
}
.hero-sub strong {
  color: var(--color-text);
  font-weight: 700;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  animation: hero-rise 1s var(--ease-out-quart) 0.9s forwards;
}

.hero-trust {
  display: flex;
  gap: 24px;
  margin-top: 42px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-dim);
  font-family: var(--font-sans);
  letter-spacing: -0.005em;
  opacity: 0;
  animation: hero-rise 1s var(--ease-out-quart) 1.1s forwards;
}
.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-trust span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-brand-2);
  flex-shrink: 0;
}

[lang="ja"] .sec-hero .hero-title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
}

@media (max-width: 980px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .sec-hero {
    padding-top: 130px;
    padding-bottom: 60px;
    min-height: auto;
  }
  .hero-title {
    font-size: clamp(44px, 12vw, 80px);
  }
  .hero-trust {
    gap: 18px;
  }
}

@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-slide-up {
  to { transform: translateY(0); }
}

/* Palette experiments: keep the hero accent gradient on-palette */
:root.palette-petrol [data-section="hero"] .hero-accent,
:root.palette-graphit [data-section="hero"] .hero-accent,
:root.palette-nordlicht [data-section="hero"] .hero-accent {
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 45%, var(--color-brand-tint) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   BillChart
   ============================================================ */
.bill-chart {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  font-family: var(--font-sans);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.5);
}
.bc-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bc-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-faint);
}
.bc-meta {
  font-size: 13px;
  color: var(--color-text-dim);
  line-height: 1.4;
}
.bc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: end;
}
.bc-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.bc-col-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: center;
  margin-bottom: -4px;
}
.bc-col-num {
  font-family: var(--font-tight);
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bc-col-bar {
  width: 100%;
  height: 240px;
  display: flex;
  align-items: flex-end;
  position: relative;
}
.bc-col-logo {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  color: rgba(255, 255, 255, 0.95);
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.bc-col-logo svg {
  height: 22px;
  width: auto;
  display: block;
  max-width: 100%;
}
.bc-col-fill {
  width: 100%;
  height: 0;
  border-radius: 14px 14px 4px 4px;
  transition: height 1.1s var(--ease-out-quart);
}
.bc-col-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-dim);
  text-align: center;
}

.bc-col-comp .bc-col-num {
  color: #94a3b8;
}
.bc-col-comp .bc-col-tag {
  color: #94a3b8;
}
.bc-col-comp .bc-col-fill {
  background: linear-gradient(180deg, #94a3b8 0%, #64748b 55%, #475569 100%);
  box-shadow: 0 0 20px rgba(148, 163, 184, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.bc-col-cf .bc-col-num {
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bc-col-cf .bc-col-tag {
  color: var(--color-brand-2);
}
.bc-col-cf .bc-col-fill {
  background: linear-gradient(180deg, var(--color-brand-2) 0%, var(--color-brand) 100%);
  box-shadow: 0 0 28px rgba(61, 139, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* cross-fade: only these text/logo bits fade, NOT the bars or numbers */
.bc-eyebrow,
.bc-meta,
.bc-col-label,
.bc-col-logo,
.bc-savings-sub {
  transition: opacity 0.35s ease;
}
.bill-chart.fading .bc-eyebrow,
.bill-chart.fading .bc-meta,
.bill-chart.fading .bc-col-label,
.bill-chart.fading .bc-col-logo,
.bill-chart.fading .bc-savings-sub {
  opacity: 0;
}

.bc-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}
.bc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  border: 0;
  padding: 0;
  transition: background 0.3s, transform 0.3s;
}
.bc-dot:hover {
  background: rgba(255, 255, 255, 0.3);
}
.bc-dot.active {
  background: var(--color-brand-2);
  transform: scale(1.35);
}

.bc-savings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.bc-savings-num {
  font-family: var(--font-tight);
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.9;
  background: linear-gradient(135deg, #22c55e 0%, #4ade80 50%, #86efac 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.bc-savings-sub {
  font-size: 13px;
  color: var(--color-text-dim);
}
.bc-foot {
  font-family: var(--font-tight);
  font-style: italic;
  font-size: 18px;
  color: var(--color-text);
  text-align: center;
  margin-top: 2px;
}
.bc-model-note {
  margin-top: 6px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
}

@media (max-width: 980px) {
  .bill-chart {
    padding: 26px 24px 24px;
  }
}

/* Palette experiments — billchart */
:root.palette-petrol [data-section="hero"] .bc-savings-num {
  background: linear-gradient(135deg, var(--color-amber) 0%, var(--color-amber-2) 60%, #ffd29a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root.palette-petrol [data-section="hero"] .bc-col-cf .bc-col-logo,
:root.palette-graphit [data-section="hero"] .bc-col-cf .bc-col-logo {
  color: var(--color-bg);
  filter: none;
}


/* ===== section: stats ===== */
/* ===== STATS ===== */
[data-section="stats"] .stats {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  border-top: 1px solid var(--color-border);
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
  padding-top: 44px;
}
@media (min-width: 768px) {
  [data-section="stats"] .stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
  }
}

[data-section="stats"] .stat-num {
  background: linear-gradient(180deg, var(--color-text) 30%, var(--color-text-dim));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-tight);
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}

[data-section="stats"] .stat-label {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-faint);
}


/* ===== section: pricing ===== */
/* ===== PRICING ===== */

/* Header block: mb-[72px] max-w-[760px], md:mb-[52px] */
[data-section="pricing"] .pricing-head {
  margin-bottom: 72px;
  max-width: 760px;
}
@media (min-width: 768px) {
  [data-section="pricing"] .pricing-head {
    margin-bottom: 52px;
  }
}

/* Grid: grid grid-cols-1 items-stretch gap-[22px], md:grid-cols-3 */
[data-section="pricing"] .pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 22px;
}
@media (min-width: 768px) {
  [data-section="pricing"] .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card base: relative flex flex-col rounded-[20px] border p-[34px]
   transition-transform duration-500; border-border bg-surface
   hover:-translate-y-2 hover:border-border-strong */
[data-section="pricing"] .pricing-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 34px;
  transition: transform .5s;
}
[data-section="pricing"] .pricing-tier:hover {
  transform: translateY(-8px);
  border-color: var(--color-border-strong);
}

/* Featured card: border-brand/40 (literal blue),
   bg-[linear-gradient(180deg,rgba(61,139,255,0.12),var(--color-surface)_40%)],
   shadow-[0_40px_100px_-40px_var(--color-brand-glow)],
   -translate-y-1, hover:-translate-y-2.5 */
[data-section="pricing"] .pricing-tier--featured {
  border-color: rgba(61, 139, 255, 0.4);
  background: linear-gradient(180deg, rgba(61, 139, 255, 0.12), var(--color-surface) 40%);
  box-shadow: 0 40px 100px -40px var(--color-brand-glow);
  transform: translateY(-4px);
}
[data-section="pricing"] .pricing-tier--featured:hover {
  transform: translateY(-10px);
}

/* Badge: absolute -top-[11px] left-[34px] rounded-pill bg-brand px-3.5 py-1.5
   font-sans text-[11px] font-bold uppercase tracking-[0.06em] text-[#05091a] */
[data-section="pricing"] .pricing-tier-badge {
  position: absolute;
  top: -11px;
  left: 34px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #05091a;
}

/* Tier name: mb-3 font-sans text-[11px] uppercase tracking-[0.16em] text-text-faint */
[data-section="pricing"] .pricing-tier-name {
  margin-bottom: 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-faint);
}

/* Tier title: mb-3.5 font-tight text-[26px] font-bold tracking-[-0.025em] */
[data-section="pricing"] .pricing-tier-title {
  margin-bottom: 14px;
  font-family: var(--font-tight);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* Tier desc: mb-[30px] min-h-[42px] text-sm leading-[1.5] text-text-dim */
[data-section="pricing"] .pricing-tier-desc {
  margin-bottom: 30px;
  min-height: 42px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-dim);
}

/* Tier note: mb-7 font-sans text-xs text-text-faint */
[data-section="pricing"] .pricing-tier-note {
  margin-bottom: 28px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-text-faint);
}

/* Features list: mb-8 flex-1 list-none; each li:
   flex items-center gap-3 border-t border-dashed border-border py-[11px]
   text-sm text-text-dim; tick: shrink-0 font-bold text-brand-2 */
[data-section="pricing"] .pricing-tier-feats {
  margin-bottom: 32px;
  flex: 1 1 0;
  list-style: none;
  padding: 0;
}
[data-section="pricing"] .pricing-tier-feats li {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px dashed var(--color-border);
  padding: 11px 0;
  font-size: 14px;
  color: var(--color-text-dim);
}
[data-section="pricing"] .pricing-tick {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--color-brand-2);
}

/* CTA base: min-h-[48px] w-full rounded-pill border px-4 py-[15px] text-sm
   font-semibold transition hover:-translate-y-px;
   non-featured: border-border-strong bg-[rgba(145,180,255,0.05)] text-text
   hover:bg-[rgba(145,180,255,0.12)] */
[data-section="pricing"] .pricing-tier-cta {
  min-height: 48px;
  width: 100%;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: rgba(145, 180, 255, 0.05);
  color: var(--color-text);
  padding: 15px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s, background .15s, border-color .15s;
}
[data-section="pricing"] .pricing-tier-cta:hover {
  transform: translateY(-1px);
  background: rgba(145, 180, 255, 0.12);
}

/* CTA featured: border-brand bg-brand text-[#05091a] hover:bg-brand-2 */
[data-section="pricing"] .pricing-tier-cta--featured {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: #05091a;
}
[data-section="pricing"] .pricing-tier-cta--featured:hover {
  transform: translateY(-1px);
  background: var(--color-brand-2);
}


/* ===== section: testimonial ===== */
/* ===== TESTIMONIAL ===== */
[data-section="testimonial"] .testimonial-wrap{
  margin-inline:auto;
  max-width:960px;
  text-align:center;
}

[data-section="testimonial"] .testimonial-quote{
  margin-bottom:48px;
  font-family:var(--font-tight);
  font-size:clamp(28px,4.4vw,54px);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-0.03em;
  text-wrap:balance;
}

[data-section="testimonial"] .testimonial-chip{
  display:inline-flex;
  align-items:center;
  gap:14px;
  border-radius:var(--radius-pill);
  border:1px solid var(--color-border);
  background:var(--color-surface);
  padding:10px 22px 10px 10px;
  text-align:left;
}

[data-section="testimonial"] .testimonial-avatar{
  display:grid;
  place-items:center;
  height:46px;
  width:46px;
  border-radius:9999px;
  font-family:var(--font-tight);
  font-size:15px;
  font-weight:800;
  letter-spacing:-0.03em;
  color:var(--color-text);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--color-brand) 16%, var(--color-surface)), var(--color-bg-3)) padding-box,
    linear-gradient(135deg, var(--color-brand-2), var(--color-brand-deep)) border-box;
  border:1.6px solid transparent;
  box-shadow:0 6px 16px -8px var(--color-brand-glow), inset 0 1px 0 rgba(255,255,255,0.1);
  flex-shrink:0;
}

[data-section="testimonial"] .testimonial-name{
  font-size:14px;
  font-weight:600;
}

[data-section="testimonial"] .testimonial-role{
  font-family:var(--font-sans);
  font-size:12px;
  color:var(--color-text-faint);
  transition:color .15s;
}
[data-section="testimonial"] .testimonial-role:hover{
  color:var(--color-brand-2);
}


/* ===== section: comparison ===== */
/* ====== comparison — "Alles drin" feature matrix ====== */

[data-section="comparison"] {
  padding: 110px 24px;
  background: var(--color-bg-2);
}

[data-section="comparison"] .comparison-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
[data-section="comparison"] .comparison-eyebrow {
  color: var(--color-brand-2);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 18px;
}
[data-section="comparison"] .comparison-head h2 {
  font-family: var(--font-tight);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
  text-wrap: balance;
}
[data-section="comparison"] .comparison-head p {
  color: var(--color-text-dim);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto;
}

[data-section="comparison"] .comparison-wrap {
  max-width: var(--container-site);
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
[data-section="comparison"] .comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.4;
  min-width: 760px;
}
[data-section="comparison"] .comparison-table th,
[data-section="comparison"] .comparison-table td {
  padding: 22px 24px;
  text-align: left;
  vertical-align: middle;
}
[data-section="comparison"] .comparison-table thead th {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px;
  padding-bottom: 16px;
}
[data-section="comparison"] .comparison-th-cf {
  color: var(--color-brand-2) !important;
  background: rgba(61, 139, 255, 0.08);
  border-top: 1px solid rgba(61, 139, 255, 0.28);
  border-left: 1px solid rgba(61, 139, 255, 0.22);
  border-right: 1px solid rgba(61, 139, 255, 0.22);
  border-radius: 12px 12px 0 0;
}

[data-section="comparison"] .comparison-table tbody td {
  color: var(--color-text-dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
[data-section="comparison"] .comparison-table tbody tr:last-child td {
  border-bottom: 0;
}
[data-section="comparison"] .comparison-table tbody td:first-child {
  color: var(--color-text);
  font-weight: 600;
}

[data-section="comparison"] .comparison-cf-cell {
  color: var(--color-text) !important;
  background: rgba(61, 139, 255, 0.06);
  border-left: 1px solid rgba(61, 139, 255, 0.22);
  border-right: 1px solid rgba(61, 139, 255, 0.22);
  font-weight: 600;
}
[data-section="comparison"] .comparison-table tbody tr:last-child .comparison-cf-cell {
  border-bottom: 1px solid rgba(61, 139, 255, 0.28);
  border-radius: 0 0 12px 12px;
}

[data-section="comparison"] .comparison-check {
  color: var(--color-brand-2);
  margin-right: 9px;
  font-size: 1.05em;
  font-weight: 700;
}

[data-section="comparison"] .comparison-special td:not(.comparison-cf-cell) {
  background: rgba(61, 139, 255, 0.04);
}
[data-section="comparison"] .comparison-special td:first-child {
  box-shadow: inset 3px 0 0 var(--color-brand-2);
}

[data-section="comparison"] .comparison-tag {
  display: inline-block;
  margin-left: 10px;
  color: var(--color-brand-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  vertical-align: 1px;
}

[data-section="comparison"] .comparison-footer {
  max-width: var(--container-site);
  margin: 44px auto 0;
  text-align: center;
}
[data-section="comparison"] .comparison-footer p {
  font-family: var(--font-tight);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.25;
  color: var(--color-text);
  margin: 0;
}

@media (max-width: 760px) {
  [data-section="comparison"] {
    padding: 80px 16px;
  }
  [data-section="comparison"] .comparison-wrap {
    overflow: visible;
  }
  [data-section="comparison"] .comparison-table {
    min-width: 0;
    font-size: 15px;
  }
  [data-section="comparison"] .comparison-table thead {
    display: none;
  }
  [data-section="comparison"] .comparison-table tbody,
  [data-section="comparison"] .comparison-table tr,
  [data-section="comparison"] .comparison-table td {
    display: block;
    width: 100%;
  }
  [data-section="comparison"] .comparison-table tr {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 16px 18px 6px;
    margin-bottom: 12px;
  }
  [data-section="comparison"] .comparison-table td {
    padding: 9px 0;
    border-bottom: 0;
    color: var(--color-text-dim);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    text-align: right;
  }
  [data-section="comparison"] .comparison-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-dim);
    text-align: left;
    flex-shrink: 0;
    max-width: 48%;
  }
  [data-section="comparison"] .comparison-table td:first-child {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text);
    padding: 0 0 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
  }
  [data-section="comparison"] .comparison-table td:first-child::before {
    display: none;
  }
  [data-section="comparison"] .comparison-cf-cell {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--color-brand-2) !important;
    font-weight: 700;
  }
  [data-section="comparison"] .comparison-special {
    border-color: rgba(61, 139, 255, 0.35);
    background: rgba(61, 139, 255, 0.05);
  }
  [data-section="comparison"] .comparison-special td:not(.comparison-cf-cell) {
    background: transparent;
  }
  [data-section="comparison"] .comparison-special td:first-child {
    box-shadow: none;
  }
  [data-section="comparison"] .comparison-tag {
    margin-left: 8px;
    vertical-align: 1px;
  }
}


/* ===== section: forwhom ===== */
/* ============================================================
   ForWhom — "Die sind schon raus" scrollytelling
   All selectors scoped to [data-section="forwhom"] / prefixed fw-
   ============================================================ */

[data-section="forwhom"] {
  padding: 0;
  position: relative;
}
[data-section="forwhom"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 15% 20%, var(--sc-bg-a, rgba(61, 139, 255, 0.1)), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 80%, var(--sc-bg-b, rgba(61, 139, 255, 0.04)), transparent 70%);
  pointer-events: none;
  transition: background 1s var(--ease-smooth);
}

[data-section="forwhom"] .fw-container {
  position: relative;
  height: 340vh;
}
[data-section="forwhom"] .fw-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 760px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px clamp(20px, 4vw, 48px) 60px;
  overflow: hidden;
}
[data-section="forwhom"] .fw-head {
  max-width: var(--container-site);
  margin: 0 auto 40px;
  width: 100%;
}
[data-section="forwhom"] .fw-title {
  font-family: var(--font-tight);
  font-weight: 700;
  font-size: clamp(32px, 4.8vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
[data-section="forwhom"] .fw-lede {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--color-text-dim);
  margin-top: 16px;
  max-width: 580px;
}
[data-section="forwhom"] .fw-lede em {
  font-style: italic;
}

[data-section="forwhom"] .fw-panels {
  max-width: var(--container-site);
  margin: 0 auto;
  width: 100%;
  position: relative;
  flex: 1;
  min-height: 470px;
}

[data-section="forwhom"] .fw-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-surface);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-smooth);
  --case-accent: var(--color-brand);
  --case-accent-2: var(--color-brand-2);
  --case-accent-deep: var(--color-brand-deep);
  --case-accent-soft: var(--color-brand-soft);
  --case-accent-glow: var(--color-brand-glow);
}
[data-section="forwhom"] .fw-panel[data-case="1"] {
  --case-accent: #ffb347;
  --case-accent-2: #ffd17a;
  --case-accent-deep: #d97706;
  --case-accent-soft: rgba(255, 179, 71, 0.1);
  --case-accent-glow: rgba(255, 179, 71, 0.5);
}
[data-section="forwhom"] .fw-panel[data-case="2"] {
  --case-accent: #10b981;
  --case-accent-2: #34d399;
  --case-accent-deep: #047857;
  --case-accent-soft: rgba(16, 185, 129, 0.1);
  --case-accent-glow: rgba(16, 185, 129, 0.5);
}
[data-section="forwhom"] .fw-panel.active {
  opacity: 1;
  pointer-events: auto;
}
[data-section="forwhom"] .fw-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
  background: linear-gradient(90deg, var(--case-accent), var(--case-accent-2));
  box-shadow: 0 0 20px var(--case-accent-glow);
}

[data-section="forwhom"] .fw-story {
  padding: 46px 42px;
  background: linear-gradient(180deg, var(--case-accent-soft), rgba(255, 255, 255, 0.005));
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
[data-section="forwhom"] .fw-story::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--case-accent-soft), transparent 60%);
  filter: blur(50px);
}
[data-section="forwhom"] .fw-story > * {
  position: relative;
}

/* Staggered entrance — initial (hidden) state */
[data-section="forwhom"] .fw-meta,
[data-section="forwhom"] .fw-quote,
[data-section="forwhom"] .fw-attribution,
[data-section="forwhom"] .fw-compare-head,
[data-section="forwhom"] .fw-bar-row,
[data-section="forwhom"] .fw-saved,
[data-section="forwhom"] .fw-perks li {
  opacity: 0;
  transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);
}
[data-section="forwhom"] .fw-meta { transform: translateY(16px); }
[data-section="forwhom"] .fw-quote { transform: translateY(24px); }
[data-section="forwhom"] .fw-attribution { transform: translateX(-20px); }
[data-section="forwhom"] .fw-compare-head { transform: translateY(12px); }
[data-section="forwhom"] .fw-bar-row { transform: translateX(-16px); }
[data-section="forwhom"] .fw-saved { transform: scale(0.92) translateY(10px); }
[data-section="forwhom"] .fw-perks li { transform: translateX(-18px); }

[data-section="forwhom"] .fw-panel.active .fw-meta,
[data-section="forwhom"] .fw-panel.active .fw-quote,
[data-section="forwhom"] .fw-panel.active .fw-attribution,
[data-section="forwhom"] .fw-panel.active .fw-compare-head,
[data-section="forwhom"] .fw-panel.active .fw-bar-row,
[data-section="forwhom"] .fw-panel.active .fw-saved,
[data-section="forwhom"] .fw-panel.active .fw-perks li {
  opacity: 1;
  transform: none;
}
[data-section="forwhom"] .fw-panel.active .fw-quote { transition-delay: 0.05s; }
[data-section="forwhom"] .fw-panel.active .fw-attribution { transition-delay: 0.1s; }
[data-section="forwhom"] .fw-panel.active .fw-saved { transition-delay: 0.15s; }
[data-section="forwhom"] .fw-panel.active .fw-perks li:nth-child(1) { transition-delay: 0.2s; }
[data-section="forwhom"] .fw-panel.active .fw-perks li:nth-child(2) { transition-delay: 0.28s; }
[data-section="forwhom"] .fw-panel.active .fw-perks li:nth-child(3) { transition-delay: 0.36s; }

[data-section="forwhom"] .fw-meta {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--case-accent-2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
[data-section="forwhom"] .fw-meta::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--case-accent);
}
[data-section="forwhom"] .fw-quote {
  font-family: var(--font-tight);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 30px;
  text-wrap: balance;
}
[data-section="forwhom"] .fw-quote em {
  font-style: normal;
  background: linear-gradient(135deg, var(--case-accent), var(--case-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}
[data-section="forwhom"] .fw-attribution {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px dashed var(--color-border);
}
[data-section="forwhom"] .fw-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-tight);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.03em;
  color: var(--color-text);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--color-brand) 16%, var(--color-surface)), var(--color-bg-3)) padding-box,
    linear-gradient(135deg, var(--color-brand-2), var(--color-brand-deep)) border-box;
  border: 1.6px solid transparent;
  box-shadow: 0 6px 16px -8px var(--color-brand-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
[data-section="forwhom"] .fw-name {
  font-family: var(--font-tight);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}
[data-section="forwhom"] .fw-role {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-text-faint);
  margin-top: 2px;
  letter-spacing: 0.04em;
}
[data-section="forwhom"] .fw-srclink {
  display: inline-block;
  margin-top: 3px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-brand-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
[data-section="forwhom"] .fw-srclink:hover {
  border-bottom-color: var(--color-brand-2);
}

[data-section="forwhom"] .fw-compare {
  padding: 40px 36px;
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  position: relative;
  overflow: hidden;
}
[data-section="forwhom"] .fw-compare-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
[data-section="forwhom"] .fw-compare-head {
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-faint);
  margin-bottom: 4px;
}
[data-section="forwhom"] .fw-bar-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 14px;
}
[data-section="forwhom"] .fw-bar-label {
  font-size: 11px;
  color: var(--color-text-dim);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
[data-section="forwhom"] .fw-bar-track {
  height: 28px;
  background: rgba(145, 180, 255, 0.04);
  border-radius: 6px;
  overflow: hidden;
}
[data-section="forwhom"] .fw-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 6px;
  transition: width 0.9s var(--ease-out-quart) 0.2s;
}
[data-section="forwhom"] .fw-panel.active .fw-bar-fill {
  width: var(--w);
}
[data-section="forwhom"] .fw-bar-row.before .fw-bar-fill {
  background-image: repeating-linear-gradient(135deg, rgba(255, 107, 107, 0.22) 0 6px, transparent 6px 12px),
    linear-gradient(90deg, rgba(255, 107, 107, 0.3), rgba(255, 107, 107, 0.55));
}
[data-section="forwhom"] .fw-bar-row.after .fw-bar-fill {
  background: linear-gradient(90deg, var(--case-accent-deep), var(--case-accent));
  box-shadow: 0 0 22px -4px var(--case-accent-glow);
}
[data-section="forwhom"] .fw-bar-amount {
  font-family: var(--font-tight);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-text);
  min-width: 72px;
  text-align: right;
}
[data-section="forwhom"] .fw-saved {
  margin-top: 8px;
  padding: 20px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--case-accent-soft), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--case-accent-glow);
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
[data-section="forwhom"] .fw-saved-pct {
  font-family: var(--font-tight);
  font-size: clamp(36px, 3.8vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, var(--case-accent), var(--case-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-section="forwhom"] .fw-saved-label {
  font-size: 11px;
  color: var(--color-text-dim);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.4;
}
[data-section="forwhom"] .fw-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
  margin: 0;
}
[data-section="forwhom"] .fw-perks li {
  font-size: 13px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
[data-section="forwhom"] .fw-perks li::before {
  content: "\2713";
  color: var(--case-accent-2);
  font-weight: 700;
  flex-shrink: 0;
}

[data-section="forwhom"] .fw-progress {
  max-width: var(--container-site);
  margin: 0 auto;
  width: 100%;
  padding-top: 32px;
  display: flex;
  align-items: center;
  gap: 24px;
}
[data-section="forwhom"] .fw-rail {
  flex: 1;
  height: 2px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
[data-section="forwhom"] .fw-rail-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand) 33%, #ffb347 33%, #ffb347 66%, #10b981 66%, #10b981 100%);
  background-size: 300% 100%;
  border-radius: 2px;
}
[data-section="forwhom"] .fw-dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
[data-section="forwhom"] .fw-dots button {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(145, 180, 255, 0.03);
  border: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--color-text-faint);
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.4s var(--ease-smooth);
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-section="forwhom"] .fw-dots button span {
  display: none;
}
[data-section="forwhom"] .fw-dots button.active span {
  display: inline;
  font-weight: 700;
}
[data-section="forwhom"] .fw-dots button[data-idx="0"].active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #05091a;
  box-shadow: 0 4px 20px -4px var(--color-brand-glow);
}
[data-section="forwhom"] .fw-dots button[data-idx="1"].active {
  background: #ffb347;
  border-color: #ffb347;
  color: #05091a;
  box-shadow: 0 4px 20px -4px rgba(255, 179, 71, 0.5);
}
[data-section="forwhom"] .fw-dots button[data-idx="2"].active {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
  box-shadow: 0 4px 20px -4px rgba(16, 185, 129, 0.5);
}
[data-section="forwhom"] .fw-dots button:hover:not(.active) {
  background: rgba(145, 180, 255, 0.08);
  color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  [data-section="forwhom"] .fw-container {
    height: auto;
  }
  [data-section="forwhom"] .fw-stage {
    position: relative;
    height: auto;
    min-height: auto;
    padding: 96px clamp(20px, 4vw, 48px);
  }
  [data-section="forwhom"] .fw-panels {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-height: auto;
  }
  [data-section="forwhom"] .fw-panel {
    position: relative;
    opacity: 1;
    pointer-events: auto;
  }
  [data-section="forwhom"] .fw-panel .fw-meta,
  [data-section="forwhom"] .fw-panel .fw-quote,
  [data-section="forwhom"] .fw-panel .fw-attribution,
  [data-section="forwhom"] .fw-panel .fw-compare-head,
  [data-section="forwhom"] .fw-panel .fw-bar-row,
  [data-section="forwhom"] .fw-panel .fw-saved,
  [data-section="forwhom"] .fw-panel .fw-perks li {
    opacity: 1;
    transform: none;
  }
  [data-section="forwhom"] .fw-panel .fw-bar-fill {
    width: var(--w);
  }
  [data-section="forwhom"] .fw-progress,
  [data-section="forwhom"]::before {
    display: none;
  }
}

@media (max-width: 980px) {
  [data-section="forwhom"] .fw-container {
    height: 360vh;
  }
  [data-section="forwhom"] .fw-stage {
    min-height: auto;
    padding: 100px 20px 40px;
  }
  [data-section="forwhom"] .fw-head {
    margin-bottom: 24px;
  }
  [data-section="forwhom"] .fw-panels {
    min-height: 540px;
  }
  [data-section="forwhom"] .fw-panel {
    grid-template-columns: 1fr;
    gap: 0;
    overflow-y: auto;
  }
  [data-section="forwhom"] .fw-story,
  [data-section="forwhom"] .fw-compare {
    padding: 26px 22px;
  }
  [data-section="forwhom"] .fw-compare {
    border-left: 0;
    border-top: 1px solid var(--color-border);
    justify-content: flex-start;
  }
  [data-section="forwhom"] .fw-quote {
    font-size: 20px;
    margin-bottom: 18px;
  }
  [data-section="forwhom"] .fw-bar-row {
    grid-template-columns: 70px 1fr auto;
    gap: 10px;
  }
  [data-section="forwhom"] .fw-bar-amount {
    font-size: 14px;
    min-width: 56px;
  }
  [data-section="forwhom"] .fw-dots button span {
    display: none !important;
  }
}


/* ===== section: services ===== */
/* ============================================================
   SERVICES SECTION  (data-section="services", id="services")
   Ported from clusterfish-next/src/components/sections/Services.tsx
   All selectors scoped under [data-section="services"] and/or
   prefixed with "services-". No bare class names.
   ============================================================ */

/* Section shell: section-pad + relative + overflow-hidden + bg-2.
   The section element carries .sec-services (no .section-pad), so the
   pad values are reproduced here verbatim. */
[data-section="services"] {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-2);
  padding: 140px clamp(20px, 4vw, 48px);
}
@media (max-width: 780px) {
  [data-section="services"] {
    padding: 96px clamp(20px, 4vw, 48px);
  }
}

/* Growth-gear watermark: brand-token fill clipped by the PNG alpha mask.
   Hidden below 768px (md:block). Retints with palette via --color-brand-2. */
[data-section="services"] .services-gear {
  position: absolute;
  right: -6%;
  top: 30px;
  aspect-ratio: 1 / 1;
  width: min(48vw, 620px);
  transform: rotate(-6deg);
  opacity: 0.05;
  background: var(--color-brand-2);
  -webkit-mask-image: url(assets/img/icons/devops.svg);
  mask-image: url(assets/img/icons/devops.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}
@media (max-width: 767px) {
  [data-section="services"] .services-gear {
    display: none;
  }
}

/* Inner wrapper keeps content above the absolute gear. */
[data-section="services"] .services-inner {
  position: relative;
}

/* Header block (reveal, no stagger). Mobile 72px, desktop (md ≥768px) 52px. */
[data-section="services"] .services-head {
  margin-bottom: 72px;
  max-width: 760px;
}
@media (min-width: 768px) {
  [data-section="services"] .services-head {
    margin-bottom: 52px;
  }
}

/* Cards grid (reveal.stagger). */
[data-section="services"] .services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  [data-section="services"] .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card. Hover-parent (group) for accent + bignum effects.
   Tailwind duration-500 with no ease utility -> default cubic-bezier(0.4,0,0.2,1). */
[data-section="services"] .services-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 34px;
  padding-top: 44px;
  transition: transform .5s, border-color .5s, box-shadow .5s;
}
[data-section="services"] .services-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-brand);
  box-shadow: 0 28px 70px -28px var(--color-brand-glow);
}

/* Top accent bar. */
[data-section="services"] .services-accent {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: linear-gradient(90deg, var(--color-brand), var(--color-brand-2), transparent 75%);
  opacity: 0.5;
  transition: opacity .5s;
  pointer-events: none;
}
[data-section="services"] .services-card:hover .services-accent {
  opacity: 1;
}

/* Giant number watermark. Hardcoded raw Clusterfish blue — does NOT retint. */
[data-section="services"] .services-bignum {
  position: absolute;
  right: -8px;
  top: -20px;
  font-family: var(--font-tight);
  font-size: 120px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(61, 139, 255, 0.06);
  transition: all .5s;
  pointer-events: none;
}
[data-section="services"] .services-card:hover .services-bignum {
  transform: scale(1.1) rotate(-3deg);
  color: rgba(61, 139, 255, 0.16);
}

/* Label. */
[data-section="services"] .services-label {
  position: relative;
  margin-bottom: 18px;
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-brand-2);
}

/* Card title. */
[data-section="services"] .services-card-title {
  position: relative;
  margin-bottom: 16px;
  font-family: var(--font-tight);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* Card description. relative keeps it above the bignum. */
[data-section="services"] .services-card-desc {
  position: relative;
  margin-bottom: 28px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-dim);
}

/* Feature list. */
[data-section="services"] .services-feats {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
[data-section="services"] .services-feat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-top: 1px dashed var(--color-border);
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 13px;
  color: var(--color-text);
}
[data-section="services"] .services-dot {
  margin-top: 3px;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--color-brand);
  background: radial-gradient(circle, var(--color-brand) 40%, transparent 42%);
}


/* ===== section: values ===== */
/* ===== values / warum section ===== */

/* shared header rule: mb 72px mobile, 52px desktop (md >=768px), max-width 760px */
[data-section="values"] .values-head {
  margin-bottom: 72px;
  max-width: 760px;
}
@media (min-width: 768px) {
  [data-section="values"] .values-head { margin-bottom: 52px; }
}

/* cards grid: gap-6 = 24px */
[data-section="values"] .values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  [data-section="values"] .values-grid { grid-template-columns: repeat(3, 1fr); }
}

/* each card */
[data-section="values"] .values-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(145, 180, 255, 0.025), rgba(145, 180, 255, 0.005));
  padding: 34px;
  transition: transform .5s, border-color .5s; /* duration-500, default ease */
}
[data-section="values"] .values-card:hover {
  transform: translateY(-6px); /* -translate-y-1.5 */
  border-color: var(--color-border-strong);
}

/* number badge */
[data-section="values"] .values-badge {
  margin-bottom: 26px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px; /* rounded-xl */
  border: 1px solid rgba(61, 139, 255, 0.25); /* border-brand/25 */
  background: var(--color-brand-soft);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-brand-2);
}

/* title */
[data-section="values"] .values-card h3 {
  margin-bottom: 14px; /* mb-3.5 */
  font-family: var(--font-tight);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* desc */
[data-section="values"] .values-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-dim);
}


/* ===== section: migration ===== */
/* ============================================================
   MIGRATION — section wrapper + CI-pipeline panel
   ============================================================ */

/* Section chrome: index.html owns the <section> (no section-pad / bg-bg-2
   classes on it), so apply both here, scoped. */
[data-section="migration"] {
  padding: 140px clamp(20px, 4vw, 48px);
  background: var(--color-bg-2);
}
@media (max-width: 780px) {
  [data-section="migration"] { padding: 96px clamp(20px, 4vw, 48px); }
}

/* ---- wrapper grid (Tailwind -> CSS) ---- */
.migration-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .migration-grid {
    grid-template-columns: 1fr 1.3fr;
    gap: 5rem;
  }
}
@media (min-width: 768px) {
  .migration-sticky {
    position: sticky;
    top: 120px;
  }
}
.migration-cta-wrap { margin-top: 2.25rem; }

/* ============================================================
   Pipeline panel (ported from MigrationPipeline.module.css)
   ============================================================ */
[data-section="migration"] .mp-panel {
  border: 1px solid var(--color-border-strong);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--color-bg-3), var(--color-bg-2) 80%);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

[data-section="migration"] .mp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--color-border);
  background: rgba(145, 180, 255, 0.04);
}
[data-section="migration"] .mp-headDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-text-faint);
  flex-shrink: 0;
}
[data-section="migration"] .mp-headDot[data-state="live"] {
  background: var(--color-amber);
  animation: mp-pulse-dot 1.1s ease-in-out infinite;
}
[data-section="migration"] .mp-headDot[data-state="done"] {
  background: #4ade80;
}
[data-section="migration"] .mp-headTitle {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--color-text-dim);
}
[data-section="migration"] .mp-headWeek {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-brand-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
[data-section="migration"] .mp-headBar {
  width: 90px;
  height: 4px;
  border-radius: 2px;
  background: rgba(145, 180, 255, 0.14);
  overflow: hidden;
  flex-shrink: 0;
}
[data-section="migration"] .mp-headBarFill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-brand), var(--color-brand-2));
  transform-origin: left;
  transition: transform 0.5s var(--ease-smooth);
}

[data-section="migration"] .mp-stages {
  list-style: none;
  margin: 0;
  padding: 20px 22px 8px;
}
[data-section="migration"] .mp-stage {
  display: flex;
  gap: 16px;
  opacity: 0.45;
  transition: opacity 0.45s var(--ease-smooth);
}
[data-section="migration"] .mp-stage[data-status="running"],
[data-section="migration"] .mp-stage[data-status="passed"] {
  opacity: 1;
}

[data-section="migration"] .mp-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 26px;
}
[data-section="migration"] .mp-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-bg-3);
  color: var(--color-text-faint);
  transition: border-color 0.3s, color 0.3s, background 0.3s, box-shadow 0.3s;
}
[data-section="migration"] .mp-stage[data-status="running"] .mp-icon {
  border-color: var(--color-brand);
  color: var(--color-brand-2);
  box-shadow: 0 0 0 4px var(--color-brand-soft);
}
[data-section="migration"] .mp-stage[data-status="passed"] .mp-icon {
  border-color: rgba(74, 222, 128, 0.5);
  background: rgba(74, 222, 128, 0.1);
  color: #4ade80;
}
[data-section="migration"] .mp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
[data-section="migration"] .mp-check {
  width: 14px;
  height: 14px;
  animation: mp-check-pop 0.35s var(--ease-spring);
}
[data-section="migration"] .mp-spinner {
  width: 16px;
  height: 16px;
  animation: spin 0.9s linear infinite;
}
[data-section="migration"] .mp-connector {
  flex: 1;
  width: 2px;
  min-height: 18px;
  margin: 4px 0;
  background: rgba(145, 180, 255, 0.12);
  border-radius: 1px;
  overflow: hidden;
}
[data-section="migration"] .mp-connectorFill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #4ade80, rgba(74, 222, 128, 0.4));
  transform-origin: top;
  transition: transform 0.45s var(--ease-smooth);
}

[data-section="migration"] .mp-body {
  flex: 1;
  min-width: 0;
  padding-bottom: 18px;
}
[data-section="migration"] .mp-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
[data-section="migration"] .mp-title {
  font-family: var(--font-tight);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 700;
  letter-spacing: -0.015em;
}
[data-section="migration"] .mp-week {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}
[data-section="migration"] .mp-desc {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-dim);
  max-width: 52ch;
}
[data-section="migration"] .mp-metaRow {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 8px;
}
[data-section="migration"] .mp-log {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-brand-2);
  min-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.3s;
}
[data-section="migration"] .mp-log[data-active="true"] {
  opacity: 1;
}
[data-section="migration"] .mp-logPrompt {
  color: var(--color-text-faint);
  margin-right: 2px;
}
[data-section="migration"] .mp-caret {
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--color-brand-2);
  animation: mp-caret-blink 0.7s steps(1) infinite;
}
[data-section="migration"] .mp-effort {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
}
[data-section="migration"] .mp-effort strong {
  color: var(--color-amber);
  font-weight: 700;
}

[data-section="migration"] .mp-footer {
  padding: 16px 22px 20px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-tight);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);
}
[data-section="migration"] .mp-footer[data-visible="true"] {
  opacity: 1;
  transform: none;
}

@media (max-width: 640px) {
  [data-section="migration"] .mp-stages {
    padding: 16px 16px 4px;
  }
  [data-section="migration"] .mp-head {
    padding: 12px 16px;
  }
  [data-section="migration"] .mp-headBar {
    display: none;
  }
  [data-section="migration"] .mp-row {
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  [data-section="migration"] .mp-week {
    margin-left: 0;
    order: 3;
    flex-basis: 100%;
  }
  [data-section="migration"] .mp-metaRow {
    flex-direction: column;
    gap: 6px;
  }
  [data-section="migration"] .mp-log {
    white-space: normal;
  }
  [data-section="migration"] .mp-footer {
    padding: 14px 16px 18px;
  }
}

@keyframes mp-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes mp-caret-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes mp-check-pop {
  0% { transform: scale(0.4); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  [data-section="migration"] .mp-headDot,
  [data-section="migration"] .mp-spinner,
  [data-section="migration"] .mp-caret,
  [data-section="migration"] .mp-check {
    animation: none;
  }
  [data-section="migration"] .mp-headBarFill,
  [data-section="migration"] .mp-connectorFill,
  [data-section="migration"] .mp-stage,
  [data-section="migration"] .mp-footer {
    transition: none;
  }
}


/* ===== section: stack ===== */
/* ============================================================
   STACK — tilted layer pile
   Scope: [data-section="stack"] + "stack-" prefixed classes
   ============================================================ */

[data-section="stack"] {
  background: var(--color-bg-2);
}

/* grid grid-cols-1 items-center gap-14 md:grid-cols-2 md:gap-[80px] */
.stack-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 56px;
}
@media (min-width: 768px) {
  .stack-grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}

/* h2: section-title + mb-7 (1.75rem) */
.stack-title {
  margin-bottom: 28px;
}

/* p: text-[17px] leading-[1.65] text-text-dim */
.stack-desc {
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text-dim);
}

/* badge wrapper: mt-[34px] flex flex-wrap gap-2.5 */
.stack-badges {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---- BADGES ----
   base was: rounded-[12px] border px-4 py-[9px] font-sans text-xs transition-colors */
.stack-badge {
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 9px 16px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1rem;
  transition: border-color 0.25s, background-color 0.25s, color 0.25s;
  display: inline-block;
}
/* border-brand/35 bg-brand/[0.06] text-brand-2 (literal rgba baked from default brand) */
.stack-badge--brand {
  border-color: rgba(61, 139, 255, 0.35);
  background: rgba(61, 139, 255, 0.06);
  color: var(--color-brand-2);
}
/* border-[rgba(93,213,217,0.35)] bg-[rgba(93,213,217,0.05)] text-brand-2 (hardcoded teal) */
.stack-badge--green {
  border-color: rgba(93, 213, 217, 0.35);
  background: rgba(93, 213, 217, 0.05);
  color: var(--color-brand-2);
}
/* border-amber/35 bg-amber/[0.06] text-amber (literal rgba baked from default amber) */
.stack-badge--amber {
  border-color: rgba(255, 179, 71, 0.35);
  background: rgba(255, 179, 71, 0.06);
  color: var(--color-amber);
}
/* border-border bg-[rgba(145,180,255,0.04)] text-text-dim */
.stack-badge--neutral {
  border-color: var(--color-border);
  background: rgba(145, 180, 255, 0.04);
  color: var(--color-text-dim);
}

/* ---- THE PILE ---- */
.stack-pile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.stack-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 94%;
  padding: 24px 30px;
  border-radius: 22px;
  border: 1px solid var(--color-border-strong);
  background: linear-gradient(135deg, var(--color-surface-2), var(--color-surface) 60%);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.45s var(--ease-spring), border-color 0.3s, box-shadow 0.45s var(--ease-smooth);
}
.stack-card + .stack-card {
  margin-top: -7px;
}
.stack-card:nth-child(odd) {
  align-self: flex-start;
}
.stack-card:nth-child(even) {
  align-self: flex-end;
}
.stack-card:hover {
  transform: rotate(0deg) translateY(-5px) scale(1.015);
  border-color: var(--color-brand);
  box-shadow: 0 28px 60px -20px var(--color-brand-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  z-index: 3;
}

.stack-card--highlight {
  border-color: color-mix(in srgb, var(--color-brand) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-brand) 22%, var(--color-surface)), color-mix(in srgb, var(--color-brand) 6%, var(--color-surface)) 70%);
}

.stack-num {
  flex-shrink: 0;
  font-family: var(--font-tight);
  font-size: clamp(34px, 3.2vw, 52px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-text);
  opacity: 0.14;
  font-variant-numeric: tabular-nums;
}
.stack-card--highlight .stack-num {
  color: var(--color-brand-2);
  opacity: 0.5;
}

.stack-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.stack-label {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-dim);
}
.stack-value {
  font-family: var(--font-tight);
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text);
  text-wrap: balance;
}
.stack-card--highlight .stack-value {
  color: var(--color-brand-2);
}

@media (max-width: 900px) {
  .stack-card {
    width: 100%;
    padding: 20px 22px;
    gap: 16px;
  }
  .stack-card + .stack-card {
    margin-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stack-card {
    transform: none;
  }
  .stack-card:hover {
    transform: none;
  }
}


/* ===== section: team ===== */
/* ============================================================
   Team v2 — large portrait cards. Desktop: hover (or keyboard
   focus) lifts the card and slides blurb + vita over the darkened
   portrait. Mobile: a scroll-snap carousel where blurb + vita are
   always visible below the photo — nothing hides behind a tap.
   Ported from Team.module.css. All classes prefixed cf-team-.
   ============================================================ */

/* HEADER */
.cf-team-head { margin-bottom: 72px; max-width: 760px; }

/* GRID (desktop default = 5-col) */
.cf-team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

/* CARD */
.cf-team-card {
  border-radius: 22px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
  outline: none;
  transition: transform 0.45s var(--ease-spring), border-color 0.3s, box-shadow 0.45s var(--ease-smooth);
}
.cf-team-card:hover,
.cf-team-card:focus-visible,
.cf-team-card:focus-within {
  transform: translateY(-8px) scale(1.045);
  border-color: color-mix(in srgb, var(--color-brand) 45%, transparent);
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--color-brand-soft);
  z-index: 3;
  position: relative;
}

/* MEDIA / IMG */
.cf-team-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.cf-team-media img,
.cf-team-initials {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
  transition: transform 0.6s var(--ease-smooth), filter 0.45s var(--ease-smooth);
}
.cf-team-card:hover .cf-team-media img,
.cf-team-card:focus-within .cf-team-media img {
  transform: scale(1.07);
  filter: saturate(0.9) brightness(0.38);
}
.cf-team-card:hover .cf-team-initials,
.cf-team-card:focus-within .cf-team-initials {
  transform: scale(1.07);
  filter: brightness(0.45);
}
.cf-team-initials {
  display: grid;
  place-items: center;
  font-family: var(--font-tight);
  font-size: clamp(44px, 4.5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #05091a;
}

/* OVERLAY (desktop hover reveal) */
.cf-team-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s var(--ease-smooth) 0.05s, transform 0.45s var(--ease-smooth) 0.05s;
  pointer-events: none;
}
.cf-team-card:hover .cf-team-reveal,
.cf-team-card:focus-within .cf-team-reveal {
  opacity: 1;
  transform: translateY(0);
}

.cf-team-blurb {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text);
}
.cf-team-vita {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-brand-2);
}

.cf-team-mobileInfo {
  display: none;
}

.cf-team-id {
  padding: 16px 18px 18px;
  text-align: left;
}
.cf-team-name {
  font-family: var(--font-tight);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.cf-team-role {
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
}

/* 3-col only in narrow band */
@media (max-width: 1100px) and (min-width: 901px) {
  .cf-team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* MOBILE carousel <=900px */
@media (max-width: 900px) {
  .cf-team-head { margin-bottom: 52px; }

  /* Swipeable snap carousel; blurb always visible, photo stays bright. */
  .cf-team-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 18px;
    margin: 0 -4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cf-team-grid::-webkit-scrollbar {
    display: none;
  }
  .cf-team-card {
    flex: 0 0 76%;
    max-width: 320px;
    scroll-snap-align: center;
  }
  .cf-team-card:hover,
  .cf-team-card:focus-within {
    transform: none;
  }
  .cf-team-card:hover .cf-team-media img,
  .cf-team-card:focus-within .cf-team-media img,
  .cf-team-card:hover .cf-team-initials,
  .cf-team-card:focus-within .cf-team-initials {
    transform: none;
    filter: saturate(0.9);
  }
  .cf-team-media {
    aspect-ratio: 1 / 1;
  }
  .cf-team-reveal {
    display: none;
  }
  .cf-team-mobileInfo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px 0;
  }
  .cf-team-mobileInfo .cf-team-blurb {
    color: var(--color-text-dim);
  }
  .cf-team-id {
    padding-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cf-team-card,
  .cf-team-media img,
  .cf-team-initials,
  .cf-team-reveal {
    transition: none;
  }
}


/* ===== section: marquee ===== */
/* ===== Marquee — brand logo strip ("Wo wir unsere Spuren hinterlassen haben") ===== */

[data-section="marquee"] {
  background: var(--color-bg-2);
  padding-bottom: 110px;
}

/* Label — left-aligned to the 1240px content column (.container-site is shared) */
[data-section="marquee"] .marquee-label {
  margin-bottom: 36px;                 /* mb-9 = 2.25rem */
  padding-inline: clamp(20px, 4vw, 48px);
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-text-dim);
}

/* Frame — full-bleed, clips the off-screen half */
[data-section="marquee"] .marquee-frame {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);   /* border-y */
  padding-top: 40px;
  padding-bottom: 40px;                            /* py-10 = 2.5rem */
}

/* Track — sizes to its (double) content; scrolls left forever */
[data-section="marquee"] .marquee-track {
  display: flex;
  align-items: center;
  width: max-content;                  /* w-max */
  gap: 96px;                           /* gap-24 = 6rem */
  animation: marquee 64s linear infinite;
}

/* Item — base monochrome tint; SVG fill=currentColor inherits this */
[data-section="marquee"] .marquee-item {
  display: flex;
  align-items: center;
  gap: 14px;                           /* gap-3.5 = 0.875rem */
  white-space: nowrap;
  color: var(--color-text-faint);
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-section="marquee"] .marquee-item:hover {
  color: var(--color-text-dim);
}

/* SVG marks */
[data-section="marquee"] .marquee-item svg {
  display: block;
  width: auto;
}

/* Rolls-Royce wordmark */
[data-section="marquee"] .marquee-wordmark {
  font-family: var(--font-tight);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Fosanis text wordmark */
[data-section="marquee"] .marquee-wordmark-text {
  font-family: var(--font-tight);
  font-size: 28px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: -0.01em;
}

/* Edge fades — dissolve logos into the section background (palette-aware) */
[data-section="marquee"] .marquee-fade {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;                           /* inset-y-0 */
  z-index: 2;
  width: 180px;
}
[data-section="marquee"] .marquee-fade-left {
  left: 0;
  background: linear-gradient(90deg, var(--color-bg-2), transparent);
}
[data-section="marquee"] .marquee-fade-right {
  right: 0;
  background: linear-gradient(-90deg, var(--color-bg-2), transparent);
}


/* ===== section: contact ===== */
/* ==========================================================================
   CONTACT  (#contact)  — Contact form + info column
   Section bg + section padding (rebuild: <section class="section-pad bg-bg-2">)
   ========================================================================== */
[data-section="contact"] {
  display: block;
  padding: 140px clamp(20px, 4vw, 48px);
  background: var(--color-bg-2);
}
@media (max-width: 780px) {
  [data-section="contact"] { padding: 96px clamp(20px, 4vw, 48px); }
}

/* ---- 2-col grid ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 56px;
}
@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
  }
}

/* ---- left column ---- */
.contact-title { margin-bottom: 28px; }

.contact-desc {
  margin-bottom: 36px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text-dim);
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-detail {
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: rgba(145, 180, 255, 0.02);
  padding: 18px 22px;
  transition: border-color .15s, background .15s;
}
.contact-detail:hover {
  border-color: var(--color-brand);
  background: rgba(61, 139, 255, 0.04);
}

.contact-detail-label {
  margin-bottom: 6px;
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-faint);
}
.contact-detail-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}

/* ---- right column: form ---- */
.contact-form {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 28px 22px;
}
@media (min-width: 768px) {
  .contact-form { padding: 42px; }
}

.contact-row { margin-bottom: 22px; }

.contact-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-faint);
}

.contact-field {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-3);
  padding: 14px 16px;
  font-size: 15px;
  color: var(--color-text);
  font-family: var(--font-sans);
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.contact-field:focus {
  border-color: var(--color-brand);
  background: var(--color-bg-2);
  box-shadow: 0 0 0 4px rgba(61, 139, 255, 0.12);
}

.contact-textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-sans);
}

.contact-consent {
  margin-bottom: 28px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.contact-checkbox {
  margin-top: 3px;
  height: 16px;
  width: 16px;
  accent-color: var(--color-brand);
}
.contact-consent-label {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-dim);
}

/* ---- submit (flat brand fill, NOT the .btn-primary gradient) ---- */
.contact-submit {
  min-height: 56px;
  width: 100%;
  border-radius: 100px;
  background: var(--color-brand);
  padding: 17px;
  font-size: 15px;
  font-weight: 700;
  color: #05091a;
  box-shadow: 0 10px 30px -10px var(--color-brand-glow);
  transition: transform .15s, background .15s;
  border: 0;
  cursor: pointer;
}
.contact-submit:hover {
  transform: translateY(-2px);
  background: var(--color-brand-2);
}
.contact-submit:disabled {
  cursor: not-allowed;
  opacity: .7;
}
.contact-submit:disabled:hover {
  transform: none;
}
.contact-status {
  margin-top: 16px;
  border-radius: 10px;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text);
}
.contact-status[hidden] {
  display: none;
}
.contact-status.is-success {
  border: 1px solid rgba(61, 139, 255, 0.4);
  background: rgba(61, 139, 255, 0.08);
}
.contact-status.is-error {
  border: 1px solid rgba(255, 61, 61, 0.4);
  background: rgba(255, 61, 61, 0.08);
}


/* ===== section: finalcta ===== */
[data-section="finalcta"]{
  position:relative;
  overflow:hidden;
  padding:110px clamp(20px,4vw,48px);
  text-align:center;
}
@media(min-width:768px){
  [data-section="finalcta"]{padding-top:160px;padding-bottom:160px}
}

[data-section="finalcta"] .finalcta-bg-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(61,139,255,0.18),transparent 70%),radial-gradient(ellipse 40% 40% at 30% 30%,rgba(255,179,71,0.05),transparent 70%);
}

[data-section="finalcta"] .finalcta-bg-grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(rgba(145,180,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(145,180,255,0.03) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,black,transparent);
  mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,black,transparent);
}

[data-section="finalcta"] .finalcta-content{
  position:relative;
  z-index:1;
  margin-inline:auto;
  max-width:780px;
}

[data-section="finalcta"] .finalcta-title{
  font-family:var(--font-tight);
  font-size:clamp(40px,6.5vw,92px);
  font-weight:800;
  line-height:0.95;
  letter-spacing:-0.04em;
  text-wrap:balance;
  margin-bottom:28px;
}

[data-section="finalcta"] .finalcta-sub{
  margin-bottom:44px;
  font-size:19px;
  color:var(--color-text-dim);
}

[data-section="finalcta"] .finalcta-btn{
  padding:20px 36px;
  font-size:16px;
}


/* ===== section: footer ===== */
/* ===== FOOTER ===== */
/* The <footer class="site-footer"> shell carries the border-top + padding
   (matches Footer.tsx: border-t border-border px-[clamp(20px,4vw,48px)] py-[52px]). */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 52px clamp(20px, 4vw, 48px);
}

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 13px;
  color: var(--color-text-faint);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.footer-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}
.footer-link:hover {
  color: var(--color-text);
}


/* ===== section: booking ===== */
/* Calendly-style booking modal — scoped light theme isolated from the dark site. */
[data-section="booking"].booking-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-smooth);
}
[data-section="booking"].booking-modal.open {
  opacity: 1;
  pointer-events: auto;
}

[data-section="booking"] .booking-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 14, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}

[data-section="booking"] .booking-dialog {
  --b-bg: #f6f8fc;
  --b-surface: #ffffff;
  --b-border: #e8ecf5;
  --b-border-strong: #d4dae8;
  --b-text: #0a0f1f;
  --b-text-dim: #5a6785;
  --b-text-faint: #8891a8;
  --b-accent: #3d8bff;
  --b-accent-hover: #2570e6;
  --b-accent-soft: rgba(61, 139, 255, 0.08);
  --b-accent-strong: rgba(61, 139, 255, 0.18);
  --b-accent-border: rgba(61, 139, 255, 0.28);

  position: relative;
  display: grid;
  grid-template-columns: 290px 1fr;
  width: 100%;
  max-width: 820px;
  max-height: calc(100dvh - 48px);
  background: var(--b-bg);
  border: 1px solid var(--b-border-strong);
  border-radius: 18px;
  overflow: hidden;
  color: var(--b-text);
  box-shadow: 0 40px 100px -10px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.5s var(--ease-out-quart);
}
[data-section="booking"].booking-modal.open .booking-dialog {
  transform: translateY(0) scale(1);
}
[data-section="booking"] .booking-dialog::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--b-accent), transparent);
  opacity: 0.7;
  z-index: 2;
}

[data-section="booking"] .booking-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(10, 15, 31, 0.04);
  border: 1px solid var(--b-border);
  display: grid;
  place-items: center;
  color: var(--b-text-dim);
  z-index: 10;
  cursor: pointer;
  transition: all 0.25s var(--ease-smooth);
}
[data-section="booking"] .booking-close:hover {
  background: rgba(10, 15, 31, 0.08);
  color: var(--b-text);
  transform: rotate(90deg);
}
[data-section="booking"] .booking-close svg {
  width: 15px;
  height: 15px;
}

[data-section="booking"] .booking-side {
  padding: 32px 28px;
  border-right: 1px solid var(--b-border);
  background: var(--b-surface);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  overflow-y: auto;
}
[data-section="booking"] .booking-logo {
  height: 22px;
  width: auto;
  flex-shrink: 0;
}
[data-section="booking"] .booking-host {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-top: 4px;
}
[data-section="booking"] .booking-host-avatar {
  display: flex;
  align-items: center;
}
[data-section="booking"] .booking-host-avatar span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-tight);
  font-weight: 800;
  font-size: 12px;
  color: #ffffff;
  border: 2px solid var(--b-surface);
  letter-spacing: -0.02em;
}
[data-section="booking"] .booking-host-avatar span:nth-child(1) {
  background: linear-gradient(135deg, #3d8bff, #1f5fd1);
}
[data-section="booking"] .booking-host-avatar span:nth-child(2) {
  background: linear-gradient(135deg, #2fb1b6, #1d8589);
  margin-left: -10px;
}
[data-section="booking"] .booking-host-name {
  font-family: var(--font-tight);
  font-weight: 700;
  font-size: 13px;
  color: var(--b-text);
  letter-spacing: -0.01em;
}
[data-section="booking"] .booking-host-role {
  font-family: var(--font-sans);
  font-size: 9.5px;
  color: var(--b-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}
[data-section="booking"] .booking-title {
  font-family: var(--font-tight);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-top: 2px;
  color: var(--b-text);
}
[data-section="booking"] .booking-meta {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0;
  margin: 0;
  width: 100%;
}
[data-section="booking"] .booking-meta li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--b-text-dim);
}
[data-section="booking"] .booking-meta svg {
  width: 15px;
  height: 15px;
  stroke: var(--b-accent);
  flex-shrink: 0;
}
[data-section="booking"] .booking-desc {
  color: var(--b-text-dim);
  font-size: 12px;
  line-height: 1.6;
  padding-top: 14px;
  border-top: 1px solid var(--b-border);
  width: 100%;
}
[data-section="booking"] .booking-trust {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  color: var(--b-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: auto;
  padding-top: 16px;
  width: 100%;
}
[data-section="booking"] .booking-trust span::before {
  content: "✓  ";
  color: var(--b-accent);
}

[data-section="booking"] .booking-main {
  padding: 32px 34px;
  overflow-y: auto;
  max-height: calc(100dvh - 48px);
  background: var(--b-bg);
}
[data-section="booking"] .booking-step-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
[data-section="booking"] .booking-main h3 {
  font-family: var(--font-tight);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--b-text);
}

[data-section="booking"] .booking-month-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
[data-section="booking"] .booking-month-label {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--b-text);
  font-weight: 600;
  min-width: 114px;
  text-align: center;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
[data-section="booking"] .booking-month-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid var(--b-border);
  display: grid;
  place-items: center;
  color: var(--b-text-dim);
  transition: all 0.2s var(--ease-smooth);
  cursor: pointer;
}
[data-section="booking"] .booking-month-btn:hover:not(:disabled) {
  background: var(--b-accent-soft);
  color: var(--b-accent);
  border-color: var(--b-accent-border);
}
[data-section="booking"] .booking-month-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
[data-section="booking"] .booking-month-btn svg {
  width: 13px;
  height: 13px;
}

[data-section="booking"] .booking-calendar {
  padding: 16px;
  border: 1px solid var(--b-border);
  border-radius: 12px;
  background: var(--b-surface);
}
[data-section="booking"] .booking-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
[data-section="booking"] .booking-cal-weekdays span {
  font-family: var(--font-sans);
  font-size: 9.5px;
  text-align: center;
  color: var(--b-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 0;
}
[data-section="booking"] .booking-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
[data-section="booking"] .booking-cal-day {
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--b-text-dim);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s var(--ease-smooth);
  display: grid;
  place-items: center;
  position: relative;
}
[data-section="booking"] .booking-cal-day.outside {
  pointer-events: none;
  opacity: 0;
}
[data-section="booking"] .booking-cal-day.disabled {
  color: var(--b-text-faint);
  cursor: not-allowed;
  opacity: 0.4;
}
[data-section="booking"] .booking-cal-day.disabled::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 1px;
  background: currentColor;
  transform: rotate(-18deg);
  opacity: 0.5;
}
[data-section="booking"] .booking-cal-day.available {
  background: var(--b-accent-soft);
  color: var(--b-accent);
  font-weight: 700;
}
[data-section="booking"] .booking-cal-day.available:hover {
  background: var(--b-accent-strong);
  transform: scale(1.08);
}
[data-section="booking"] .booking-cal-day.today {
  outline: 1px dashed var(--b-accent);
  outline-offset: -3px;
}
[data-section="booking"] .booking-cal-day.selected {
  background: var(--b-accent);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 14px -2px rgba(61, 139, 255, 0.5);
  transform: scale(1.05);
}

[data-section="booking"] .booking-time-wrap {
  margin-top: 20px;
  animation: booking-slot-fade 0.4s var(--ease-out-quart) both;
}
[data-section="booking"] .booking-time-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  gap: 12px;
}
[data-section="booking"] .booking-time-head h4 {
  font-family: var(--font-tight);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--b-text);
}
[data-section="booking"] .booking-tz {
  font-family: var(--font-sans);
  font-size: 9.5px;
  color: var(--b-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
[data-section="booking"] .booking-time-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 4px;
}
[data-section="booking"] .booking-time-slot {
  padding: 11px 8px;
  border-radius: 8px;
  background: var(--b-surface);
  border: 1px solid var(--b-border-strong);
  color: var(--b-text);
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-sans);
  transition: all 0.2s var(--ease-smooth);
  cursor: pointer;
  min-height: 40px;
}
[data-section="booking"] .booking-time-slot:hover:not(.taken) {
  border-color: var(--b-accent);
  color: var(--b-accent);
  background: var(--b-accent-soft);
  transform: translateY(-1px);
}
[data-section="booking"] .booking-time-slot.taken {
  color: var(--b-text-faint);
  text-decoration: line-through;
  cursor: not-allowed;
  opacity: 0.5;
  background: transparent;
}

[data-section="booking"] .booking-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-family: var(--font-sans);
  color: var(--b-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  transition: color 0.2s;
  padding: 6px 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}
[data-section="booking"] .booking-back-btn:hover {
  color: var(--b-accent);
}
[data-section="booking"] .booking-back-btn svg {
  width: 12px;
  height: 12px;
}

[data-section="booking"] .booking-selected-display {
  padding: 14px 18px;
  border: 1px solid var(--b-accent-border);
  background: var(--b-accent-soft);
  border-radius: 10px;
  display: flex;
  gap: 13px;
  align-items: center;
  margin-bottom: 20px;
}
[data-section="booking"] .booking-sel-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--b-accent-strong);
  display: grid;
  place-items: center;
  color: var(--b-accent);
  flex-shrink: 0;
}
[data-section="booking"] .booking-sel-icon svg {
  width: 16px;
  height: 16px;
}
[data-section="booking"] .booking-sel-date {
  font-family: var(--font-tight);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--b-text);
}
[data-section="booking"] .booking-sel-dur {
  font-size: 11px;
  color: var(--b-text-faint);
  margin-top: 3px;
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
}

[data-section="booking"] .booking-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
[data-section="booking"] .booking-field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--b-text-faint);
  margin-bottom: 5px;
}
[data-section="booking"] .booking-field input,
[data-section="booking"] .booking-field textarea {
  width: 100%;
  padding: 11px 13px;
  background: var(--b-surface);
  border: 1px solid var(--b-border-strong);
  border-radius: 9px;
  color: var(--b-text);
  font-size: 13.5px;
  transition: all 0.2s var(--ease-smooth);
  font-family: inherit;
}
[data-section="booking"] .booking-field textarea {
  resize: vertical;
  min-height: 68px;
}
[data-section="booking"] .booking-field input::placeholder,
[data-section="booking"] .booking-field textarea::placeholder {
  color: var(--b-text-faint);
}
[data-section="booking"] .booking-field input:focus,
[data-section="booking"] .booking-field textarea:focus {
  outline: none;
  border-color: var(--b-accent);
  box-shadow: 0 0 0 3px rgba(61, 139, 255, 0.14);
}
[data-section="booking"] .booking-submit {
  width: 100%;
  padding: 13px;
  border-radius: var(--radius-pill);
  background: var(--b-accent);
  color: #ffffff;
  font-weight: 700;
  font-size: 13.5px;
  margin-top: 6px;
  transition: all 0.3s var(--ease-smooth);
  box-shadow: 0 8px 24px -8px rgba(61, 139, 255, 0.5);
  min-height: 48px;
  font-family: inherit;
  border: 0;
  cursor: pointer;
}
[data-section="booking"] .booking-submit:hover {
  transform: translateY(-1px);
  background: var(--b-accent-hover);
  box-shadow: 0 12px 32px -6px rgba(61, 139, 255, 0.55);
}
[data-section="booking"] .booking-submit:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
[data-section="booking"] .booking-submit:disabled:hover {
  transform: none;
  box-shadow: 0 8px 24px -8px rgba(61, 139, 255, 0.5);
}
[data-section="booking"] .booking-form-error {
  margin-top: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 61, 61, 0.4);
  background: rgba(255, 61, 61, 0.08);
  padding: 12px 16px;
  font-size: 13.5px;
}
[data-section="booking"] .booking-form-error[hidden] {
  display: none;
}

[data-section="booking"] .booking-success {
  text-align: center;
  padding: 12px 0 0;
}
[data-section="booking"] .booking-success-check {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--b-accent-soft);
  display: grid;
  place-items: center;
}
[data-section="booking"] .booking-success-check svg {
  width: 48px;
  height: 48px;
  stroke: var(--b-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  overflow: visible;
}
[data-section="booking"] .booking-success-check svg circle {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: booking-check-circle 0.6s var(--ease-out-quart) 0.1s forwards;
}
[data-section="booking"] .booking-success-check svg path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: booking-check-path 0.4s var(--ease-out-quart) 0.6s forwards;
}
[data-section="booking"] .booking-success h3 {
  font-size: 22px;
  margin-bottom: 8px;
  font-weight: 800;
  color: var(--b-text);
}
[data-section="booking"] .booking-success > p {
  color: var(--b-text-dim);
  font-size: 13px;
  margin-bottom: 14px;
}
[data-section="booking"] .booking-success-card {
  padding: 16px 20px;
  border: 1px solid var(--b-accent-border);
  background: var(--b-accent-soft);
  border-radius: 11px;
  margin: 16px 0 12px;
}
[data-section="booking"] .booking-success-when {
  font-family: var(--font-tight);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--b-text);
}
[data-section="booking"] .booking-success-with {
  font-size: 11px;
  color: var(--b-text-faint);
  margin-top: 3px;
  font-family: var(--font-sans);
}
[data-section="booking"] .booking-success-note {
  font-size: 11.5px;
  color: var(--b-text-faint);
  margin: 12px 0 18px;
}

@media (max-width: 780px) {
  [data-section="booking"].booking-modal {
    padding: 0;
  }
  [data-section="booking"] .booking-dialog {
    grid-template-columns: 1fr;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    max-width: 100%;
  }
  [data-section="booking"] .booking-side {
    padding: 60px 20px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--b-border);
    gap: 12px;
  }
  [data-section="booking"] .booking-title {
    font-size: 20px;
  }
  [data-section="booking"] .booking-meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  [data-section="booking"] .booking-meta li {
    font-size: 11px;
  }
  [data-section="booking"] .booking-desc,
  [data-section="booking"] .booking-trust {
    display: none;
  }
  [data-section="booking"] .booking-main {
    padding: 22px 18px 28px;
  }
  [data-section="booking"] .booking-calendar {
    padding: 12px;
  }
  [data-section="booking"] .booking-cal-day {
    font-size: 11.5px;
  }
  [data-section="booking"] .booking-time-slots {
    grid-template-columns: repeat(3, 1fr);
  }
  [data-section="booking"] .booking-step-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

@keyframes booking-slot-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes booking-check-circle {
  to { stroke-dashoffset: 0; }
}
@keyframes booking-check-path {
  to { stroke-dashoffset: 0; }
}

/* Palette experiments: shift the modal's blue accent on-palette (stays a light theme) */
:root.palette-petrol [data-section="booking"] .booking-dialog,
:root.palette-graphit [data-section="booking"] .booking-dialog,
:root.palette-nordlicht [data-section="booking"] .booking-dialog {
  --b-accent: var(--color-brand-deep);
  --b-accent-hover: color-mix(in srgb, var(--color-brand-deep) 82%, black);
  --b-accent-soft: color-mix(in srgb, var(--color-brand-deep) 8%, transparent);
  --b-accent-strong: color-mix(in srgb, var(--color-brand-deep) 18%, transparent);
  --b-accent-border: color-mix(in srgb, var(--color-brand-deep) 28%, transparent);
}

/* ===== spacing tune ===== */
/* Money quote sits between stats and pricing — give it standalone breathing room. */
[data-section="testimonial"] { padding-block: clamp(90px, 10vw, 140px); }


/* ============================================================
   TEAM-FEEDBACK FIXES (2026-07-08, staging review)
   ============================================================ */

/* Anchor jumps: keep headings clear of the fixed nav (Preise etc.) */
main section[id] { scroll-margin-top: 96px; }

/* Perf: composite the blurred hero mesh once, drift on GPU */
.hero-mesh { will-change: transform; }

/* iOS: keep the fixed header on its own layer; suppress rubber-band offsets */
.nav { transform: translateZ(0); -webkit-transform: translateZ(0); }
html { overscroll-behavior-y: none; }

/* iOS Safari: dynamic viewport height for the fullscreen menu + safe area */
.mobile-menu {
  bottom: auto;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}
/* 6th nav link added: the CTA button is now child 7 of the stagger */
.mobile-menu.menu-open > *:nth-child(7) { transition-delay: 0.44s; }

/* Mobile: reveal with less travel so fast scrolling never shows blank space */
@media (hover: none) {
  .reveal { transform: translateY(24px); }
  .reveal.stagger > * { transform: translateY(18px); }
}

/* Section rhythm: values/team/stack headings had 0-90px above vs 140px elsewhere */
[data-section="values"] { padding-top: 84px; }
[data-section="team"] { padding-top: 110px; }
[data-section="stack"] { padding-top: 56px; }

/* Marquee text wordmarks (SEAT, thyssenkrupp, Lufthansa Technik, jetBlue) */
[data-section="marquee"] .marquee-brandtext {
  font-family: var(--font-tight);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ============================================================
   SECTION BACKGROUND ICONS (2026-07-08)
   One icon per section from the team's set, mapped by filename.
   Palette-tinted mask, faint, hidden below 768px, behind content.
   forwhom already owns ::before (a gradient) -> its icon uses ::after.
   services keeps its own .services-gear element (now the devops icon).
   ============================================================ */
[data-section="stats"], [data-section="pricing"], [data-section="comparison"],
[data-section="forwhom"], [data-section="migration"], [data-section="stack"],
[data-section="contact"] { position: relative; }

[data-section="stats"]::before, [data-section="pricing"]::before,
[data-section="comparison"]::before, [data-section="forwhom"]::after,
[data-section="migration"]::before, [data-section="stack"]::before,
[data-section="contact"]::before {
  content: "";
  position: absolute;
  aspect-ratio: 1 / 1;
  width: min(38vw, 470px);
  background: var(--color-brand-2);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  display: none;
}
@media (min-width: 768px) {
  [data-section="stats"]::before, [data-section="pricing"]::before,
  [data-section="comparison"]::before, [data-section="forwhom"]::after,
  [data-section="migration"]::before, [data-section="stack"]::before,
  [data-section="contact"]::before { display: block; }
}
/* keep each section's content above its background icon */
[data-section="stats"] > *, [data-section="pricing"] > *, [data-section="comparison"] > *,
[data-section="forwhom"] > *, [data-section="migration"] > *, [data-section="stack"] > *,
[data-section="contact"] > * { position: relative; z-index: 1; }

/* per-section icon + placement */
[data-section="stats"]::before      { -webkit-mask-image:url(assets/img/icons/icon_werprofitiert.svg); mask-image:url(assets/img/icons/icon_werprofitiert.svg); right:-6%;  top:-30px;   transform:rotate(-6deg); }
[data-section="pricing"]::before    { -webkit-mask-image:url(assets/img/icons/icon_save_money.svg);    mask-image:url(assets/img/icons/icon_save_money.svg);    right:-7%;  top:40px;    transform:rotate(-8deg); }
[data-section="comparison"]::before { -webkit-mask-image:url(assets/img/icons/wasist.svg);              mask-image:url(assets/img/icons/wasist.svg);              left:-9%;   bottom:30px; transform:rotate(9deg); }
[data-section="forwhom"]::after     { -webkit-mask-image:url(assets/img/icons/zielgruppen.svg);         mask-image:url(assets/img/icons/zielgruppen.svg);         right:-6%;  top:60px;    transform:rotate(-7deg); opacity:0.045; }
[data-section="migration"]::before  { -webkit-mask-image:url(assets/img/icons/umzug.svg);               mask-image:url(assets/img/icons/umzug.svg);               left:-10%;  top:80px;    transform:rotate(7deg); }
[data-section="stack"]::before      { -webkit-mask-image:url(assets/img/icons/paas.svg);                mask-image:url(assets/img/icons/paas.svg);                left:-8%;   bottom:40px; transform:rotate(-9deg); }
[data-section="contact"]::before    { -webkit-mask-image:url(assets/img/icons/kontakt.svg);             mask-image:url(assets/img/icons/kontakt.svg);             right:-7%;  bottom:50px; transform:rotate(-8deg); }

/* Value cards: each gets its exact-match icon, faint in the bottom-right */
[data-section="values"] .values-card::before {
  content: "";
  position: absolute;
  right: -12px;
  bottom: -12px;
  width: 116px;
  height: 116px;
  background: var(--color-brand-2);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
[data-section="values"] .values-card:nth-child(1)::before { -webkit-mask-image:url(assets/img/icons/transparenz.svg); mask-image:url(assets/img/icons/transparenz.svg); }
[data-section="values"] .values-card:nth-child(2)::before { -webkit-mask-image:url(assets/img/icons/fokus.svg);       mask-image:url(assets/img/icons/fokus.svg); }
[data-section="values"] .values-card:nth-child(3)::before { -webkit-mask-image:url(assets/img/icons/kompetenz.svg);   mask-image:url(assets/img/icons/kompetenz.svg); }
[data-section="values"] .values-card > * { position: relative; z-index: 1; }
/* Nested language pills must not inherit the big menu-link typography */
.mobile-menu .lang-toggle a {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-bottom: 0;
  text-align: center;
}

/* ============================================================
   ROUND 2 — einheitlicher Abstand der getönten Sektions-Blöcke
   ("Abstand hinter Kacheln unterschiedlich") + Fix stack:
   stack ist getönt, hatte aber 56/0 → Block wirkte gequetscht.
   Alle getönten Blöcke jetzt symmetrisch und gleich.
   ============================================================ */
[data-section="comparison"], [data-section="services"], [data-section="migration"],
[data-section="stack"], [data-section="contact"] {
  padding-top: 68px;
  padding-bottom: 68px;
}
@media (min-width: 768px) {
  [data-section="comparison"], [data-section="services"], [data-section="migration"],
  [data-section="stack"], [data-section="contact"] {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/* ============================================================
   LEGAL MODALS — Impressum / Datenschutz (footer)
   v2 design: palette-aware tokens, tinted surface, flat rules.
   ============================================================ */
.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-smooth);
}
.legal-modal.open { opacity: 1; pointer-events: auto; }

.legal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 14, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: pointer;
}

.legal-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-card);
  box-shadow: 0 40px 100px -10px rgba(0, 0, 0, 0.6);
  transform: translateY(20px) scale(0.98);
  transition: transform 0.5s var(--ease-out-quart);
}
.legal-modal.open .legal-dialog { transform: none; }
.legal-dialog::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-brand), transparent);
  opacity: 0.7;
  z-index: 3;
}

.legal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--color-text-dim);
  background: rgba(145, 180, 255, 0.06);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.legal-close:hover {
  color: var(--color-text);
  background: var(--color-brand-soft);
  border-color: var(--color-border-strong);
}

.legal-body {
  flex: 1;
  overflow-y: auto;
  padding: 44px 40px 12px;
}
.legal-body .section-eyebrow { color: var(--color-brand); margin-bottom: 6px; }
.legal-title {
  font-family: var(--font-tight);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 24px;
}

.legal-block { margin-bottom: 18px; }
.legal-block p {
  color: var(--color-text-dim);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}
.legal-block p strong { color: var(--color-text); font-weight: 600; }
.legal-label {
  display: block;
  color: var(--color-text);
  font-weight: 600;
  margin-bottom: 2px;
}
.legal-block h4 {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 6px;
}
.legal-rule {
  height: 1px;
  background: var(--color-border);
  margin: 20px 0;
}

.legal-dismiss {
  margin: 12px 40px 32px;
  align-self: flex-start;
}

@media (max-width: 560px) {
  .legal-body { padding: 40px 24px 12px; }
  .legal-title { font-size: 25px; }
  .legal-dismiss { margin: 12px 24px 28px; }
}