/* ============================================================
   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;      /* Rueckfallwert fuer alte Browser */
  height: 100svh;     /* iOS: 100vh meint dort den GROSSEN Viewport (ohne
                         Adressleiste). Gemessen auf iPhone 16 Pro: 100vh
                         = 760px, sichtbar sind aber nur 678px — die
                         zentrierte Buehne wurde oben und unten um je gut
                         40px beschnitten. svh ist der kleinste sichtbare
                         Bereich und passt immer. */
  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; }
}

/* ============================================================
   SPACING NORMALISATION (2026-07-24)
   Zwei Ursachen, ein Block:
   (a) .container-site hatte KEINEN Seitenabstand — Sektionen haben das
       einzeln kompensiert (oder nicht). Folge: Text stand je nach Sektion
       bei 0 / 16 / 20 / 48 px, unter 1240px Viewport teilweise direkt an
       der Bildschirmkante (mobil: pricing, values, stack, team, marquee).
       -> Die Content-Spalte bringt ihren Seitenabstand jetzt selbst mit.
   (b) Vertikaler Rhythmus war 0-280px zwischen den Sektionen.
       -> Eine Variable, gleicher Abstand oben wie unten.
   ============================================================ */
:root {
  --gutter: clamp(20px, 4vw, 48px);   /* Seitenabstand, alle Breakpoints */
  --sec-y: 72px;                      /* vertikaler Abstand je Sektionskante */
}
@media (max-width: 780px) { :root { --sec-y: 44px; } }

/* --- (a) horizontal ------------------------------------------------ */
/* max-width waechst um die Polsterung, damit die Textspalte weiterhin
   1240px breit bleibt und nicht schmaler wird. */
.container-site {
  max-width: calc(var(--container-site) + 2 * var(--gutter));
  padding-inline: var(--gutter);
}
/* Sektionen, die selbst schon seitlich polstern UND eine .container-site
   enthalten -> sonst doppelter Abstand. */
[data-section="services"],
[data-section="migration"],
[data-section="contact"] { padding-inline: 0; }

/* Handkompensationen von frueher: beide Elemente TRAGEN selbst .container-site,
   bekommen den Abstand also schon oben — die Extra-Polsterung entfaellt. */
[data-section="stats"] .stats { padding-left: var(--gutter); padding-right: var(--gutter); }
[data-section="marquee"] .marquee-label { padding-inline: var(--gutter); }

/* Sektionen ohne .container-site: gleicher Wert wie die Spalte. */
[data-section="hero"],
[data-section="comparison"],
[data-section="finalcta"] { padding-inline: var(--gutter); }

/* --- (b) vertikal --------------------------------------------------- */
/* Alle Sektionen gleich. Ausnahmen bewusst: hero (over the fold),
   forwhom (scroll-gesteuert, eigene Logik), booking (Overlay). */
main > section[data-section]:not([data-section="hero"]):not([data-section="forwhom"]) {
  padding-block: var(--sec-y);
}
/* Frueher gesetzte Einzelwerte zuruecknehmen (sonst gewinnt die
   spezifischere Regel und der Rhythmus bricht wieder auf). */
[data-section="testimonial"],
[data-section="values"],
[data-section="team"],
[data-section="stack"],
[data-section="marquee"],
[data-section="finalcta"] { padding-block: var(--sec-y); }

/* ============================================================
   HEADER-BAND + SCROLL-AFFORDANCE (2026-07-24)
   ============================================================ */

/* --- (5) iOS/WebKit: nichts mehr oberhalb des Headers ---------------
   Die Leiste sass auf top:0, die Safe-Area (Notch/Statusleiste) blieb
   aber unbedeckt — beim Scrollen schob sich Inhalt sichtbar durch diesen
   Streifen. Die Leiste reicht jetzt in die Safe-Area hinein, ihr
   Hintergrund deckt sie mit ab.
   Der bunte Fortschrittsbalken wandert dabei von "ganz oben, ueber
   allem" an die UNTERKANTE der Leiste: er ist damit die farbige
   Unterkante des Headers statt eines Strichs im Nichts — und darf
   dicker sein (2 -> 3px). */
.nav {
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  padding-bottom: 18px;
}
.nav.scrolled {
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  padding-bottom: 14px;
}
/* Deckung auch waehrend des iOS-Rubberbands: die Flaeche wird nach oben
   ueber den Viewport-Rand hinaus verlaengert. */
.nav::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 60px;
  background: inherit;
  backdrop-filter: inherit;
  -webkit-backdrop-filter: inherit;
  pointer-events: none;
}
.scroll-progress {
  position: absolute;
  top: auto;
  bottom: -1px;                    /* liegt auf der Border, nicht darunter */
  left: 0; right: 0;
  height: 3px;
  z-index: 1;
  border-radius: 0 2px 2px 0;      /* die laufende Kante leicht gerundet */
}

/* --- (6) Android: sichtbar machen, dass es seitlich weitergeht -------
   Team-Karussell und Vergleichstabelle scrollen horizontal, hatten aber
   keinerlei Hinweis darauf (Scrollbar ist bewusst ausgeblendet) — man
   hoert einfach auf zu wischen. Jetzt: weiche Kante dort, wo noch
   Inhalt liegt. Die Klassen setzt app.js. */
.h-scroll { position: relative; }
/* Weiche Kante als MASKE auf dem Container, nicht als Flaeche darueber.
   Die erste Fassung (2026-07-24) hat links und rechts je 56px Verlauf als
   ::before/::after mit z-index 2 ueber den Inhalt gelegt. Zwei Probleme:
   auf schmalen Schirmen verdunkelte das ganze Karten statt nur die Kante,
   und .cf-team-card:hover setzt z-index 3 — die Karte unter dem Zeiger
   sprang also ueber den Verlauf, der Streifen "verschwand" beim Hovern und
   kam beim Wegfahren zurueck. Als Maske faellt beides weg: der Inhalt
   selbst blendet aus, nichts liegt darueber, nichts kann sich davorschieben.
   Ausserdem schmaler (36px) und unabhaengig von der Hintergrundfarbe. */
.h-scroll {
  --fade-l: 0px;
  --fade-r: 0px;
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0, #000 var(--fade-l),
      #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(90deg,
      transparent 0, #000 var(--fade-l),
      #000 calc(100% - var(--fade-r)), transparent 100%);
}
.h-scroll.can-left  { --fade-l: 36px; }
.h-scroll.can-right { --fade-r: 36px; }

/* Wisch-Hinweis, solange noch nicht gescrollt wurde */
.h-scroll-hint {
  display: none;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-text-faint);
  align-items: center;
  gap: 7px;
}
.h-scroll-hint .arr {
  display: inline-block;
  animation: hint-nudge 1.6s var(--ease-smooth, ease-in-out) infinite;
}
@keyframes hint-nudge {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  50%      { transform: translateX(5px); opacity: 1; }
}
@media (hover: none) {
  .h-scroll.can-right .h-scroll-hint { display: flex; }
  .h-scroll.scrolled-once .h-scroll-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .h-scroll-hint .arr { animation: none; }
}

/* Hero und forwhom behalten ihren eigenen Einstieg (Above-the-fold bzw.
   scroll-gesteuert), sollen aber unten im gleichen Takt schliessen. */
[data-section="hero"] { padding-bottom: var(--sec-y); }
[data-section="forwhom"] { padding-bottom: var(--sec-y); }

/* ============================================================
   SAFE AREA / STATUSLEISTE (2026-07-24, Nachtrag zu 0.0.8)
   Auf dem iPhone lief der Seiteninhalt sichtbar durch den Streifen
   zwischen Uhrzeit/Batterie und der Kopfleiste. Ursache: im Viewport-Meta
   fehlte `viewport-fit=cover`, dadurch lieferte env(safe-area-inset-*)
   konstant 0 — die Kopfleiste konnte den Streifen gar nicht abdecken.
   Meta ist ergaenzt; hier die Folgearbeiten.
   ============================================================ */

/* Querformat: Notch/Dynamic Island liegt seitlich. Der Seitenabstand
   nimmt die Insets jetzt mit, sonst rutscht Text darunter. */
:root {
  --gutter: max(clamp(20px, 4vw, 48px),
                env(safe-area-inset-left, 0px),
                env(safe-area-inset-right, 0px));
}

/* EINE Flaeche, nicht zwei.
   Vorher lag ueber der Leiste ein eigener Streifen mit eigener Deckkraft
   (0.92 gegen 0.72 der Leiste). Das war als "Kappe" gedacht, sah aber als
   flacher Fleck ueber der Leiste aus, und an der Kante zwischen beiden
   Schichten blieb durch Rundung eine 1-2px-Naht sichtbar.
   Jetzt gibt es nur noch die Leiste selbst: ihre Polsterung enthaelt den
   Safe-Area-Inset, ihr Hintergrund und ihr Blur reichen damit durchgehend
   bis zur Bildschirmkante — eine einzige transluzente Flaeche von ganz
   oben bis zur farbigen Unterkante. */

/* Gegen die Haarlinie an der Oberkante: die Leiste beginnt zwei Pixel
   oberhalb des Viewports und bekommt sie als Polsterung zurueck. Damit
   liegt auch bei sub-pixeligem Inset (env() ist nicht immer ganzzahlig)
   und beim Compositing waehrend des Scrollens immer Flaeche an der Kante. */
.nav {
  top: -2px;
  padding-top: calc(18px + 2px + env(safe-area-inset-top, 0px));
  padding-inline: var(--gutter);      /* Querformat: Notch-Inset mitnehmen */
}
.nav.scrolled {
  padding-top: calc(14px + 2px + env(safe-area-inset-top, 0px));
}
/* Ueberscroll nach oben (iOS-Rubberband): dieselbe Flaeche fortsetzen,
   damit auch dort kein Bruch entsteht. */
.nav::before { background: inherit; }

/* Deckkraft der Flaeche.
   Mit 0.72 blieb der Inhalt lesbar — auf dem iPhone besonders stoerend, weil
   er direkt hinter Uhrzeit und Batterie durchlief. Jetzt milchiger: staerkerer
   Blur, hoehere Deckkraft. Bewegung und Farbe dahinter bleiben ahnbar (es ist
   weiter eine Glasflaeche, kein Balken), lesen laesst sich nichts mehr.
   Der Wert ist die Stellschraube — 0.80 zeigt mehr, 1 macht sie dicht. */
.nav.scrolled {
  background: rgba(7, 11, 22, 0.94);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}

/* Unten: Home-Indicator nicht ueberdecken. */
.site-footer { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }

/* Vollbild-Menue: liegt mit viewport-fit=cover ebenfalls unter der
   Statusleiste. Oben den Inset aufschlagen, seitlich den gemeinsamen
   Gutter nehmen (Querformat-Notch). */
.mobile-menu {
  padding-top: calc(100px + env(safe-area-inset-top, 0px));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Fünfte Sprache (Platt) in der Leiste.
   „PLATT" ist breiter als DE/EN/ES/JP (58px statt 35px). Zwischen 881px
   (darunter klappt die Leiste ins Menü) und ~1100px lief die Navigation
   damit über den rechten Rand hinaus. Der Umschalter wird in diesem
   Bereich enger gesetzt; ab 1100px bleibt er wie vorher. */
@media (max-width: 1100px) {
  .lang-toggle.desktop-lang a {
    padding-inline: 6px;
    letter-spacing: 0.02em;
  }
}

/* Hover-Effekte nur da, wo es einen Mauszeiger gibt.
   Die Team-Karten heben sich beim Hovern an und skalieren (translateY(-8px)
   scale(1.045), z-index 3) — auf Touch bleibt dieser Zustand nach einem
   Tipper hängen, die Karte liegt dann vergrößert über ihren Nachbarn.
   Bisher war das nur über die Breite (<=900px) abgefangen. Das greift
   nicht, wenn Safari die Seite auf dem Handy als Desktop-Version
   ausliefert ("Desktop-Website anfordern", ~980px Layoutbreite): dann
   gilt die Desktop-Regel auf einem Touch-Gerät.
   `hover: none` fragt die Fähigkeit statt der Breite ab und deckt beides ab. */
@media (hover: none) {
  .cf-team-card:hover,
  .cf-team-card:focus-visible,
  .cf-team-card:focus-within {
    transform: none;
    box-shadow: none;
    z-index: auto;
  }
  .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;
  }
}

/* LinkedIn-Verweis auf den Team-Karten (nur wo ein Profil vorliegt).
   Bewusst ein kleines Symbol und NICHT die ganze Karte als Link: auf dem
   Handy ist die Karte ein Wisch-Karussell, ein Link ueber die volle Flaeche
   wuerde beim Wischen mitgehen. */
.cf-team-id {
  position: relative;
  padding-right: 52px;              /* Platz fuer das Symbol, Text bricht nicht darunter */
}
.cf-team-li {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;                      /* Trefferflaeche, das Symbol selbst ist kleiner */
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-text-faint);
  transition: color 0.25s, background 0.25s;
}
.cf-team-li svg { width: 17px; height: 17px; display: block; }
.cf-team-li:hover,
.cf-team-li:focus-visible {
  color: var(--color-text);
  background: rgba(145, 180, 255, 0.10);
}

/* (Stapel-Fallback fuer niedrige Viewports wieder entfernt, Niko will
   das Scroll-Theater auch auf dem Telefon.) */

/* Sektions-Icons auch auf dem Telefon (2026-07-24)
   Sie waren unter 768px generell aus — nicht nur bei "migration", sondern
   in allen sieben Sektionen. Auf dem Telefon blieben dadurch nur die drei
   Icons in den "Was uns unterscheidet"-Karten uebrig, was inkonsistent
   wirkt. Jetzt auch klein sichtbar: etwas groesser im Verhaeltnis zur
   Breite, weiter an den Rand geschoben und noch dezenter, damit sie
   hinter dem Text nicht stoeren. */
@media (max-width: 767px) {
  [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;
    width: min(58vw, 250px);
    /* Auf dem Telefon ist das Icon kleiner und liegt naeher am Text.
       Mit 0.04 war es vom Hintergrund kaum zu unterscheiden, deshalb
       hier etwas kraeftiger als auf dem Desktop (0.05). */
    opacity: 0.075;
  }
  /* "Von AWS weg. In sechs Wochen." lag bei left:-10%, davon hingen auf
     dem Telefon rund 40px links aus dem Bild und der Rest verlief hinter
     dem Text. Rechtsbuendig ist mehr davon zu sehen. */
  [data-section="migration"]::before {
    left: auto;
    right: -6%;
  }
}

/* Trennlinie ueber den Kennzahlen entfernt (2026-07-24)
   War eine border-top auf dem Element und lief randlos von Bildschirm-
   kante zu Bildschirmkante. Erst auf die Textspalte eingerueckt, dann
   auf Wunsch ganz raus: der Abstand darueber (40px Aussen- plus 44px
   Innenabstand) trennt die Bloecke ausreichend. */
[data-section="stats"] .stats { border-top: 0; }

/* ============================================================
   forwhom auf Telefon/Tablet: Scrollytelling in sechs Takten
   (2026-07-24, ersetzt Pan- und Dichte-Ansatz — Nikos Brief: das Element
   soll Freude machen, nicht Text unterbringen)
   Jeder Fall hat zwei VOLLBILD-Takte: Takt A = Zitat + Person, Takt B =
   die Zahlen (Balken animieren beim Eintritt). app.js schaltet .on auf
   .fw-story / .fw-compare (floor(progress*6)). Jeder Takt passt mit Luft
   in den Viewport, grosse Schrift, kein innerer Scroller, kein Pan.
   Die Haken-Liste (fw-perks) ist hier ausgeblendet: dreimal fast gleicher
   Clusterfish-Pitch, kein Fall-Inhalt. Desktop: unveraendert, .on wird
   dort nicht gestylt.
   ============================================================ */
@media (max-width: 980px) {
  /* Volle Bildschirmbreite, nichts wackelt seitlich. */
  [data-section="forwhom"] { overflow-x: clip; }
  [data-section="forwhom"] .fw-stage {
    justify-content: flex-start;
    /* Polsterung atmet mit der Viewporthoehe (Untergrenze: Kopfleiste,
       ~72px auf Mobil im gescrollten Zustand). Keine Pixel-Schwelle,
       an der ploetzlich nichts mehr greift. */
    padding: clamp(74px, 12svh, 92px) 0 clamp(12px, 2.5svh, 20px);
    touch-action: pan-y;            /* horizontale Gesten gar nicht erst */
  }
  [data-section="forwhom"] .fw-head {
    flex: 0 0 auto;
    margin-bottom: 10px;
    padding-inline: var(--gutter);  /* Text behaelt den Gutter, Karte nicht */
  }
  [data-section="forwhom"] .fw-head .section-eyebrow { margin-bottom: 8px; }
  [data-section="forwhom"] .fw-lede {
    font-size: clamp(12.5px, 2.2svh, 15px);
    line-height: 1.4;
  }

  /* Karte randlos, nimmt den Restplatz. */
  [data-section="forwhom"] .fw-panels {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
  }
  [data-section="forwhom"] .fw-panel {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    overflow: hidden;
    display: block;                 /* Grid des Desktops aufheben */
  }

  /* Die zwei Takte: uebereinander, zentriert, weiche Wechsel. */
  [data-section="forwhom"] .fw-story,
  [data-section="forwhom"] .fw-compare {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px var(--gutter);
    border: 0;                      /* compare hat auf Mobil sonst border-top */
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.5s var(--ease-smooth), transform 0.5s var(--ease-smooth);
    pointer-events: none;
  }
  [data-section="forwhom"] .fw-panel.active .fw-story.on,
  [data-section="forwhom"] .fw-panel.active .fw-compare.on {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Takt A: das Zitat traegt den Takt — grosse Schrift. */
  [data-section="forwhom"] .fw-quote {
    /* Hoehe entscheidet, wieviel Zitat auf einen Takt passt — deshalb
       svh statt vw: SE ~18px, iPhone 16 ~22px, grosse Geraete 26px. */
    font-size: clamp(17px, 3.3svh, 26px);
    line-height: 1.32;
    margin-bottom: clamp(10px, 2.4svh, 20px);
  }
  [data-section="forwhom"] .fw-meta { margin-bottom: clamp(8px, 2.2svh, 18px); }
  [data-section="forwhom"] .fw-attribution { padding-top: clamp(8px, 2svh, 16px); }

  /* Takt B: Zahlen ohne Beiwerk, Balken laufen bei jedem Eintritt an. */
  [data-section="forwhom"] .fw-perks { display: none; }
  [data-section="forwhom"] .fw-saved {
    margin-top: clamp(6px, 1.6svh, 14px);
    padding-top: clamp(10px, 2svh, 20px);
    padding-bottom: clamp(10px, 2svh, 20px);
  }
  [data-section="forwhom"] .fw-compare .fw-bar-fill {
    width: 0;
    transition: width 0.9s var(--ease-smooth) 0.25s;
  }
  [data-section="forwhom"] .fw-compare.on .fw-bar-fill { width: var(--w); }

  /* Fortschritt/Punkte behalten den Gutter. */
  [data-section="forwhom"] .fw-progress { padding-inline: var(--gutter); }
}


/* Sehr kurze Buehnen (SE-Klasse, unter ~640px sichtbar): der
   Einleitungssatz verlaesst den geklebten Kopf, der Rest rueckt enger.
   Additive Kompaktion: die Basis oben funktioniert ab ~640px ohnehin,
   dieser Block macht NUR kleinere Schirme enger — anders als die
   820px-Falle von heute, wo der Fix selbst im Query gefangen war. */
@media (max-width: 980px) and (max-height: 640px) {
  [data-section="forwhom"] .fw-lede { display: none; }
  [data-section="forwhom"] .fw-head { margin-bottom: 6px; }
}

/* Reduzierte Bewegung: die Takt-Choreografie entfaellt, alles steht
   gestapelt und sichtbar (der Block weiter oben macht die Panels statisch;
   hier nur die Takt-Opazitaet neutralisieren). */
@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  [data-section="forwhom"] .fw-story,
  [data-section="forwhom"] .fw-compare {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  [data-section="forwhom"] .fw-compare .fw-bar-fill { width: var(--w); }
}