/* ==========================================================================
   CONNECTCIRCUIT — Design Tokens & Base Styles
   Palette: Beige / Marmor + Gold — quiet luxury, editorial, technology
   ========================================================================== */

:root,
[data-theme='light'] {
  /* Surfaces — warm beige marble editorial base */
  --color-bg: #d4c9b7;
  --color-surface: #fbf8f2;
  --color-surface-2: #ada79c;
  --color-surface-offset: #ece3d4;
  --color-surface-offset-2: #e4d8c4;
  --color-divider: #ddd0b8;
  --color-border: #d1c1a0;

  /* Text — warm near-black on beige/marble */
  --color-text: #36322c;
  --color-text-muted: #5c5343;
  --color-text-faint: #8c8271;
  --color-text-inverse: #f7f3ec;

  /* Primary accent — Quiet Gold (spotlight / prestige) */
  --color-primary: #b1a38a;
  --color-primary-hover: #8a7e68;
  --color-primary-active: #6b4f1d;
  --color-primary-highlight: #ece0c4;

  /* Secondary accent — Deep Bronze (grounding contrast) */
  --color-secondary: #4a3c28;
  --color-secondary-hover: #3a2f1f;

  --color-success: #4a7a3e;
  --color-warning: #96601f;
  --color-error: #9c3b3b;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px oklch(0.3 0.02 80 / 0.12);
  --shadow-md: 0 8px 24px oklch(0.3 0.02 80 / 0.14);
  --shadow-lg: 0 20px 48px oklch(0.25 0.02 80 / 0.18);

  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --content-full: 100%;

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'General Sans', 'Helvetica Neue', sans-serif;
}

/* Dark surfaces reserved for footer / high-contrast bands only */
.on-dark {
  --color-bg: #211b12;
  --color-surface: #2a2216;
  --color-text: #f2ecdd;
  --color-text-muted: #c2b69a;
  --color-text-faint: #a89a80;
  --color-divider: #3d3323;
  --color-border: #4a3e2a;
  --color-primary: #cba456;
  --color-primary-hover: #ddbb75;
}

/* Type Scale */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.25rem, 0.5rem + 4.4vw, 4.75rem);
}

/* Spacing */
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-16);
}

body {
  min-height: 100dvh;
  line-height: 1.6;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
  line-height: 1.1;
  font-family: var(--font-display);
  font-weight: 500;
}

p,
li,
figcaption {
  text-wrap: pretty;
  max-width: 68ch;
}

::selection {
  background: color-mix(in oklab, var(--color-primary) 30%, transparent);
  color: var(--color-text);
}

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

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

button {
  cursor: pointer;
  background: none;
  border: none;
}

a,
button,
[role='button'],
input,
textarea,
select {
  transition:
    color var(--transition-interactive),
    background var(--transition-interactive),
    border-color var(--transition-interactive),
    box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   Layout Primitives
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-16));
}

.container--narrow {
  max-width: var(--content-default);
}

section {
  padding-block: clamp(var(--space-16), 10vw, var(--space-32));
  position: relative;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.section-label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--color-primary);
}

.eyebrow-line {
  color: var(--color-text-faint);
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-divider);
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header--hidden {
  transform: translateY(-100%);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
}

.brand-mark {
  width: 34px;
  height: 34px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.01em;
}

.brand-sub {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-top: -2px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav-links {
  display: flex;
  gap: var(--space-6);
}

.nav-links a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--color-text);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: #201503;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .nav-links {
    display: none;
  }
  .nav-cta {
    display: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  padding-top: clamp(var(--space-16), 10vw, 6.5rem);
  padding-bottom: clamp(var(--space-12), 6vw, var(--space-16));
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.85;
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--color-bg) 0%, color-mix(in oklab, var(--color-bg) 55%, transparent) 32%, color-mix(in oklab, var(--color-bg) 15%, transparent) 60%);
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-bg) 25%, transparent) 0%, var(--color-bg) 92%);
}

.hero-grid {
  display: grid;
  gap: var(--space-12);
  align-items: end;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-6);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  width: fit-content;
}

.hero-title {
  font-size: var(--text-hero);
  font-weight: 500;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.hero-title em {
  font-style: normal;
  color: var(--color-primary);
}

.hero-sub {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 56ch;
  font-family: var(--font-body);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--color-primary);
  color: #201503;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-20);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-divider);
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-1);
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .hero-stats {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* ==========================================================================
   Manifesto / What We Build
   ========================================================================== */
.manifesto {
  background: var(--color-secondary);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  overflow: hidden;
  color: #f2ecdd;
}

.manifesto-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.55;
}

.manifesto-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, color-mix(in oklab, var(--color-secondary) 55%, transparent) 0%, var(--color-secondary) 85%);
}

.manifesto .container {
  position: relative;
  z-index: 1;
}

.manifesto .section-label,
.manifesto-body p {
  color: #c2b69a;
}

.manifesto .section-label {
  color: #d9b877;
}

.manifesto .section-label::before {
  background: #d9b877;
}

.manifesto-quote {
  color: #f2ecdd;
}

.manifesto-quote span {
  color: #d9b877;
}

.manifesto .confidential-note svg,
.manifesto .pillar-icon {
  color: #d9b877;
}

.manifesto .pillar-card {
  background: color-mix(in oklab, var(--color-secondary) 70%, black 10%);
  border: 1px solid color-mix(in oklab, #f2ecdd 18%, transparent);
}

.manifesto .pillar-card h3 {
  color: #f2ecdd;
}

.manifesto .pillar-card p {
  color: #c2b69a;
}

.manifesto .confidential-note {
  background: color-mix(in oklab, var(--color-secondary) 65%, black 8%);
  border-color: color-mix(in oklab, #f2ecdd 22%, transparent);
  color: #c2b69a;
}

.manifesto-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.manifesto-quote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.35;
}

.manifesto-body p {
  margin-bottom: var(--space-5);
}

.manifesto-body p:last-child {
  margin-bottom: 0;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-16);
}

.pillar-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.pillar-icon {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.pillar-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.pillar-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.confidential-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-12);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-offset);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.confidential-note svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .manifesto-grid {
    grid-template-columns: 1fr;
  }
  .pillars {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Vertrauliche Entwicklung — radiale Statussysteme + konzentrisches Projektmodell
   ========================================================================== */
.market {
  padding: var(--space-20) 0 clamp(var(--space-12), 5vw, var(--space-16));
  background:
    radial-gradient(circle at 14% 4%, rgba(255, 255, 255, 0.82), transparent 26%),
    radial-gradient(circle at 86% 18%, rgba(203, 164, 86, 0.18), transparent 29%),
    linear-gradient(180deg, var(--color-bg) 0%, #efe6d8 52%, #f3eadc 100%);
}

.market-head {
  max-width: 720px;
  margin: 0 auto clamp(var(--space-16), 6vw, var(--space-24));
  text-align: center;
}

.market-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text);
  margin: var(--space-3) 0 var(--space-4);
}

.market-intro {
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.market-grid {
  display: block;
}

.market-card {
  position: relative;
  min-width: 0;
  background:
    linear-gradient(142deg, rgba(255, 255, 255, 0.23), transparent 40%),
    linear-gradient(160deg, rgba(137, 117, 88, 0.88) 0%, rgba(108, 89, 66, 0.9) 54%, rgba(79, 64, 47, 0.92) 100%);
  border: 1px solid rgba(255, 240, 207, 0.38);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 24px 62px -38px rgba(72, 52, 27, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(85, 62, 29, 0.12);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
  backdrop-filter: blur(24px) saturate(125%);
  isolation: isolate;
}

.market-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(128deg, rgba(255, 255, 255, 0.08), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.025)),
    linear-gradient(90deg, rgba(242, 206, 133, 0.052) 1px, transparent 1px),
    linear-gradient(rgba(242, 206, 133, 0.052) 1px, transparent 1px);
  background-size: 100% 100%, 36px 36px, 36px 36px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 88%);
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.market-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -16rem;
  right: -13rem;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 221, 153, 0.28), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}

.market-card--unified {
  width: 100%;
  padding-block: clamp(var(--space-5), 2vw, var(--space-6));
  padding-inline: clamp(var(--space-6), 3vw, var(--space-8));
}

.market-unified-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: stretch;
}

.market-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-block: 0;
}

.market-panel:first-child {
  padding-right: clamp(var(--space-6), 3vw, var(--space-10));
  border-right: 1px solid rgba(255, 230, 180, 0.2);
}

.market-panel:last-child {
  padding-left: clamp(var(--space-6), 3vw, var(--space-10));
}

.market-card-head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: clamp(var(--space-6), 4vw, var(--space-8));
  border-bottom: 1px solid rgba(255, 230, 180, 0.22);
}

.market-card-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: #fff1d2;
  font-weight: 600;
  white-space: nowrap;
}

.market-card-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c7b486;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Radiale Wachstumsvisualisierung --- */
.growth-visual {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--space-5), 3vw, var(--space-8));
  flex: 1;
  align-items: start;
}

.growth-orbit {
  position: relative;
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid rgba(255, 232, 183, 0.17);
  border-radius: calc(var(--radius-xl) - 0.2rem);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.018));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 38px -30px rgba(25, 15, 4, 0.48);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.growth-orbit::after {
  content: '';
  position: absolute;
  inset: 12% 14% auto;
  height: 44%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 207, 126, 0.17), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}

.orbit-shell {
  position: relative;
  width: min(100%, 242px);
  aspect-ratio: 1;
  margin-inline: auto;
}

.orbit-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.orbit-guide {
  fill: none;
  stroke: rgba(244, 211, 145, 0.2);
  stroke-width: 7;
}

.orbit-guide--outer {
  stroke-width: 1;
  stroke-dasharray: 1.5 6;
  opacity: 0.75;
}

.orbit-progress {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  stroke-dashoffset: 0;
  transition: stroke-dasharray 1.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.orbit-node {
  fill: #f5d994;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.45s ease 1.1s, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 1.1s;
  transform: scale(0.25);
}

.growth-visual.is-animated .orbit-progress {
  stroke-dasharray: calc(var(--orbit-target) * 1) 100;
}

.growth-visual.is-animated .orbit-node {
  opacity: 1;
  transform: scale(1);
}

.growth-orbit--secondary .orbit-progress {
  transition-delay: 0.16s;
}

.growth-orbit--secondary .orbit-node {
  transition-delay: 1.25s;
}

.orbit-center {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.orbit-kicker {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c5b287;
}

.orbit-multiple {
  margin-block: 0.15rem 0.05rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
  font-weight: 500;
  color: #fff3d6;
  text-shadow: 0 0 26px rgba(224, 178, 86, 0.22);
  font-variant-numeric: tabular-nums;
}

.orbit-cagr {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 9px;
  letter-spacing: 0.03em;
  color: #d0b474;
}

.orbit-copy {
  position: relative;
  z-index: 2;
  margin-top: var(--space-3);
}

.orbit-copy h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: #f4ead3;
  text-align: center;
  margin-bottom: var(--space-4);
}

.growth-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.growth-range > span {
  min-width: 0;
}

.growth-range > span:last-child {
  text-align: right;
}

.growth-range small {
  display: block;
  margin-bottom: 0.2rem;
  color: #8f7e5d;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.growth-range strong {
  display: block;
  color: #eaddbf;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: clamp(8px, 1vw, 10px);
  line-height: 1.35;
  font-weight: 500;
  white-space: normal;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.growth-range svg {
  width: 30px;
  color: #a4957c;
}

.growth-range path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Geschützte Projektdimensionen als konzentrisches Modell --- */
.market-rings {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  flex: 1;
}

.market-rings-visual {
  position: relative;
  width: min(100%, 288px);
  aspect-ratio: 1;
  margin: calc(var(--space-2) * -1) auto 0;
}

.market-rings-visual svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.market-ring {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  stroke-dashoffset: 0;
  transition: stroke-dasharray 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.market-ring--outer {
  opacity: 0.72;
}

.market-ring--middle {
  stroke-width: 9;
  transition-delay: 0.12s;
}

.market-ring--core {
  stroke-width: 10;
  transition-delay: 0.24s;
}

.market-rings.is-animated .market-ring {
  stroke-dasharray: 100 100;
}

.market-ring-node {
  fill: #f7dfa7;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.2);
  transition: opacity 0.35s ease 1.12s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.12s;
}

.market-ring-node--middle {
  transition-delay: 1.24s;
}

.market-ring-node--core {
  transition-delay: 1.36s;
}

.market-rings.is-animated .market-ring-node {
  opacity: 1;
  transform: scale(1);
}

.market-rings-core {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.market-rings-core span {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c3af82;
}

.market-rings-core strong {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1;
  font-weight: 500;
  color: #fff1ce;
}

.market-rings-legend {
  display: grid;
  gap: var(--space-2);
}

.market-ring-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(255, 230, 178, 0.14);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.market-ring-row::before {
  content: '';
  position: absolute;
}

.market-ring-index {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 9px;
  color: #8d7954;
}

.market-ring-row > div {
  min-width: 0;
}

.market-ring-row strong {
  display: block;
  color: #eadcbd;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.market-ring-row small {
  display: block;
  margin-top: 0.12rem;
  color: #8f805f;
  font-size: 9px;
  line-height: 1.35;
}

.market-ring-row b {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: clamp(9px, 1vw, 11px);
  font-weight: 500;
  color: #f0dfb9;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.market-ring-row--core {
  border-color: rgba(245, 217, 153, 0.18);
  box-shadow: inset 3px 0 0 rgba(245, 217, 153, 0.45);
}

.market-source {
  position: relative;
  z-index: 1;
  font-size: 10px;
  color: #b9a77e;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(151, 114, 44, 0.18);
  line-height: 1.6;
}

.market-source a {
  color: #e0c995;
  text-decoration: underline;
  text-decoration-color: rgba(151, 114, 44, 0.4);
  text-underline-offset: 2px;
}

.market-source a:hover {
  color: #dec597;
}

@media (max-width: 1020px) {
  .market-unified-grid {
    grid-template-columns: 1fr;
  }

  .market-panel:first-child {
    padding-right: 0;
    padding-bottom: var(--space-8);
    border-right: 0;
    border-bottom: 1px solid rgba(255, 230, 180, 0.2);
  }

  .market-panel:last-child {
    padding-left: 0;
    padding-top: var(--space-8);
  }

  .growth-visual {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-rings {
    display: grid;
    grid-template-columns: minmax(220px, 0.75fr) minmax(280px, 1fr);
    align-items: center;
  }
}

@media (max-width: 680px) {
  .growth-visual,
  .market-rings {
    grid-template-columns: 1fr;
  }

  .growth-orbit {
    max-width: 390px;
    width: 100%;
    margin-inline: auto;
  }

  .market-rings-visual {
    width: min(90vw, 280px);
  }
}

@media (max-width: 480px) {
  .market-card {
    padding: var(--space-5);
  }

  .market-card-head {
    align-items: flex-start;
  }

  .market-card-label {
    white-space: normal;
  }

  .orbit-shell {
    width: min(100%, 225px);
  }

  .market-ring-row {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .market-ring-row b {
    grid-column: 2;
    margin-top: 0.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-progress,
  .orbit-node,
  .market-ring,
  .market-ring-node {
    transition: none;
  }
}

/* ==========================================================================
   About / Über mich
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-16);
  align-items: center;
}

.about-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-content h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-6);
}

.about-content p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.about-editnote {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  font-style: italic;
  border-left: 2px solid var(--color-divider);
  padding-left: var(--space-4);
  margin-bottom: var(--space-6) !important;
}

.about-signature {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}

.about-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
}

.about-role {
  font-size: var(--text-sm);
  color: var(--color-primary);
  margin-top: var(--space-1);
}

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-portrait {
    max-width: 360px;
  }
}

.about-cta {
  margin-top: var(--space-8);
}

/* ==========================================================================
   About Teaser (Homepage)
   ========================================================================== */
.about-teaser {
  background: var(--color-surface);
}

.about-teaser--button {
  padding: clamp(var(--space-8), 4vw, var(--space-12)) 0 clamp(var(--space-12), 5vw, var(--space-16));
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.68), transparent 34%),
    radial-gradient(circle at 88% 76%, rgba(203, 164, 86, 0.11), transparent 32%),
    linear-gradient(180deg, #f3eadc 0%, #f6efe4 42%, #f8f2e8 100%);
  border-top: 0;
  border-bottom: 1px solid rgba(209, 193, 160, 0.34);
}

.founder-link-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}

.physical-feature {
  position: relative;
  isolation: isolate;
  width: min(calc(100% + clamp(3rem, 7vw, 6rem)), calc(100vw - clamp(2rem, 4vw, 3rem)));
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
  gap: clamp(var(--space-6), 4vw, var(--space-12));
  align-items: stretch;
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--color-border) 72%, white 28%);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, color-mix(in oklab, white 52%, transparent), transparent 48%),
    color-mix(in oklab, var(--color-surface) 78%, transparent);
  box-shadow:
    0 24px 60px -42px rgba(62, 42, 13, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.physical-feature::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 360px;
  height: 360px;
  left: -150px;
  bottom: -230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(203, 164, 86, 0.18), transparent 68%);
  pointer-events: none;
}

.physical-feature-copy {
  align-self: center;
  padding-block: var(--space-2);
}

.physical-feature-copy h2 {
  max-width: 19ch;
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
}

.physical-feature-copy p {
  max-width: 65ch;
  color: var(--color-text-muted);
}

.physical-use-cues {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.physical-use-cues span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-4);
  border: 1px solid color-mix(in oklab, var(--color-border) 72%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--color-bg) 62%, transparent);
  color: var(--color-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

.physical-feature-media {
  position: relative;
  min-height: 270px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: calc(var(--radius-xl) - 0.25rem);
  box-shadow: 0 18px 36px -28px rgba(28, 18, 6, 0.72);
}

.physical-feature-media::before,
.physical-feature-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.physical-feature-media::before {
  background: linear-gradient(135deg, rgba(247, 243, 236, 0.2), transparent 38%);
}

.physical-feature-media::after {
  background: linear-gradient(180deg, transparent 48%, rgba(24, 17, 8, 0.58) 100%);
}

.physical-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  opacity: 0.86;
  transform: scale(1.03);
  filter: saturate(0.78) contrast(0.94) brightness(1.04);
}

.physical-feature-code {
  position: absolute;
  z-index: 2;
  left: var(--space-5);
  right: var(--space-5);
  bottom: var(--space-5);
  color: rgba(255, 246, 224, 0.86);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.founder-link {
  min-width: min(100%, 260px);
  justify-content: center;
  background: color-mix(in oklab, var(--color-surface) 72%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 780px) {
  .physical-feature {
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .physical-feature-media {
    min-height: 190px;
  }

  .physical-feature-copy h2 {
    max-width: 22ch;
  }
}

.about-teaser-card {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: var(--space-12);
  align-items: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

.about-teaser-media {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.about-teaser-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-teaser-body h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-5);
}

.about-teaser-body p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

@media (max-width: 760px) {
  .about-teaser-card {
    grid-template-columns: 1fr;
    padding: var(--space-6);
  }
  .about-teaser-media {
    max-width: 280px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   Page Header (subpages)
   ========================================================================== */
.page-header {
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-divider);
}

.breadcrumb {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}

.breadcrumb a {
  color: var(--color-text-faint);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.page-title {
  font-size: var(--text-3xl);
}

.nav-links a.active {
  color: var(--color-primary);
}

/* ==========================================================================
   Values Strip (About subpage)
   ========================================================================== */
.values-strip {
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
}

.value-index {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.value-item h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

.value-item p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

@media (max-width: 900px) {
  .values-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(207, 180, 122, 0.10), transparent 34%),
    radial-gradient(circle at 88% 90%, rgba(235, 225, 202, 0.06), transparent 38%),
    linear-gradient(145deg, #30302d 0%, #292926 48%, #33312c 100%);
  border-top: 1px solid rgba(235, 225, 202, 0.10);
  border-bottom: 1px solid rgba(235, 225, 202, 0.10);
  color: #f4efe5;
}

.contact::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 46%, rgba(255, 255, 255, 0.018) 52%, transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.06));
}

.contact .container {
  position: relative;
  z-index: 1;
}

.contact .section-label {
  color: #cebd97;
}

.contact .section-label::before {
  background: #d5b875;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  gap: clamp(var(--space-10), 7vw, var(--space-20));
  align-items: start;
}

.contact-intro {
  padding-top: var(--space-3);
}

.contact-intro h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-5);
  color: #f5f0e7;
  letter-spacing: -0.025em;
}

.contact-intro > p {
  color: #c9c3b7;
  margin-bottom: var(--space-10);
  max-width: 52ch;
}

.contact-option {
  position: relative;
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(238, 228, 207, 0.13);
  border-radius: 0;
  margin: 0;
  align-items: flex-start;
}

.contact-option:last-of-type {
  border-bottom: 1px solid rgba(238, 228, 207, 0.13);
}

.contact-option > svg {
  width: 38px;
  height: 38px;
  padding: 9px;
  color: #9d9071;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(235, 220, 190, 0.14);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  margin-top: 1px;
}

.contact-option h4 {
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
  font-family: var(--font-body);
  font-weight: 600;
  color: #f1ecdf;
}

.contact-option p {
  font-size: var(--text-sm);
  color: #bdb6aa;
  margin: 0;
}

.contact-option-btn {
  margin-top: var(--space-4);
  display: inline-flex;
}

.form-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(235, 222, 194, 0.17);
  border-radius: calc(var(--radius-xl) + 4px);
  padding: clamp(var(--space-7), 4vw, var(--space-10));
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.form-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.035), transparent 28%, transparent 72%, rgba(213, 184, 117, 0.025));
}

.form-card > * {
  position: relative;
  z-index: 1;
}

.form-row {
  margin-bottom: var(--space-5);
}

.form-row label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #a9a296;
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  background: rgba(16, 16, 15, 0.20);
  border: 1px solid rgba(235, 225, 202, 0.14);
  border-radius: var(--radius-md);
  padding: 0.88rem var(--space-4);
  color: #f4efe5;
  font-size: var(--text-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

.form-row input:hover,
.form-row textarea:hover,
.form-row select:hover {
  border-color: rgba(216, 189, 128, 0.28);
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: #8f897f;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  border-color: #c9ab68;
  background: rgba(16, 16, 15, 0.28);
  box-shadow: 0 0 0 3px rgba(201, 171, 104, 0.08);
}

.form-row select option {
  background: #2c2c29;
  color: #f4efe5;
}

.form-row textarea {
  min-height: 120px;
  resize: vertical;
}

.form-submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
  background: linear-gradient(135deg, #d6b971, #91856e);
  color: #201b12;
  box-shadow: 0 12px 28px rgba(174, 134, 63, 0.16);
}

.form-submit:hover {
  background: linear-gradient(135deg, #dfc582, #a4977f);
}

.form-note {
  font-size: var(--text-xs);
  color: #979187;
  margin-top: var(--space-4);
  text-align: center;
}

.contact .btn-outline {
  border-color: rgba(235, 225, 202, 0.20);
  color: #eee7da;
  background: rgba(255, 255, 255, 0.025);
}

.contact .btn-outline:hover {
  border-color: #c9ab68;
  color: #dfc582;
  background: rgba(213, 184, 117, 0.05);
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .contact-intro {
    padding-top: 0;
  }
}

/* ==========================================================================
   PERBRA / Real Estate Slider
   ========================================================================== */
.realestate {
  overflow: hidden;
}

.realestate-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
  flex-wrap: wrap;
}

.realestate-head h2 {
  font-size: var(--text-2xl);
  max-width: 20ch;
}

.realestate-head p {
  color: var(--color-text-muted);
  max-width: 42ch;
}

.slider-viewport {
  overflow: hidden;
}

.slider-track {
  display: flex;
  gap: var(--space-6);
}

.slider-card {
  flex: 0 0 clamp(280px, 32vw, 380px);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.slider-card-media {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  position: relative;
}

.slider-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.slider-card:hover .slider-card-media img {
  transform: scale(1.05);
}

.slider-card-tag {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background: color-mix(in oklab, var(--color-bg) 75%, transparent);
  backdrop-filter: blur(6px);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
}

.slider-card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.slider-card-body h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.slider-card-body p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  flex-grow: 1;
}

.slider-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.slider-card-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-interactive);
}

.slider-card-link:hover svg {
  transform: translateX(3px);
}

.slider-controls {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.slider-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}

.slider-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.slider-btn svg {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-12);
  background: var(--color-bg);
  color: var(--color-text);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer-brand-mark {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.footer-meta {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.footer-links {
  display: flex;
  gap: var(--space-6);
}

.footer-links a {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--color-text);
}

/* ==========================================================================
   Mobile Nav Drawer
   ========================================================================== */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-drawer.is-open {
  transform: translateX(0);
}

.mobile-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-10);
}

.mobile-drawer nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.mobile-drawer nav a {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  text-decoration: none;
}

@media (min-width: 861px) {
  .mobile-drawer {
    display: none;
  }
}

@media (max-width: 860px) {
  .nav-toggle {
    display: flex;
  }
}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================================================== 
   Cohesion refinement — confidential development as one premium module
   ========================================================================== */
.market-card--unified {
  overflow: hidden;
}

.market-physical-bridge {
  position: relative;
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
  margin-inline: calc(clamp(var(--space-6), 3vw, var(--space-8)) * -1);
  margin-bottom: calc(clamp(var(--space-5), 2vw, var(--space-6)) * -1);
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 255, 255, 0.88), transparent 32%),
    radial-gradient(circle at 88% 80%, rgba(203, 164, 86, 0.13), transparent 34%),
    linear-gradient(135deg, #fbf6ed 0%, #f3eadc 58%, #eee1cf 100%);
  border-top: 1px solid rgba(255, 232, 186, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.market-physical-bridge::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 54px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(45, 35, 24, 0.16), transparent);
  opacity: 0.45;
}

.physical-feature--integrated {
  width: 100%;
  max-width: none;
  min-height: 410px;
  grid-template-columns: minmax(0, 1.3fr) minmax(310px, 0.7fr);
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  padding: clamp(var(--space-10), 5vw, var(--space-16));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.physical-feature--integrated::before {
  width: 500px;
  height: 500px;
  left: -220px;
  bottom: -330px;
  background: radial-gradient(circle, rgba(203, 164, 86, 0.22), transparent 68%);
}

.physical-feature--integrated .physical-feature-copy {
  padding-block: var(--space-4);
}

.physical-feature--integrated .physical-feature-copy h2 {
  max-width: 20ch;
  font-size: clamp(2rem, 2.7vw, 3.15rem);
  line-height: 1.06;
  margin-bottom: var(--space-5);
}

.physical-feature--integrated .physical-feature-copy p {
  max-width: 70ch;
  font-size: var(--text-base);
  line-height: 1.72;
}

.physical-feature--integrated .physical-feature-media {
  min-height: 330px;
  align-self: stretch;
  border-color: rgba(113, 83, 39, 0.18);
  box-shadow: 0 28px 58px -38px rgba(34, 23, 8, 0.72);
}

.founder-link-wrap--market {
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
  gap: 0;
}

/* Contact form: larger and visually balanced with the editorial left side */
.contact .container {
  max-width: 1320px;
}

.contact-grid {
  grid-template-columns: minmax(0, 0.78fr) minmax(520px, 1.22fr);
  gap: clamp(var(--space-12), 7vw, var(--space-24));
  align-items: stretch;
}

.form-card {
  min-height: 100%;
  padding: clamp(var(--space-8), 4.5vw, var(--space-12));
}

.form-row textarea {
  min-height: 148px;
}

@media (max-width: 980px) {
  .physical-feature--integrated {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .physical-feature--integrated .physical-feature-media {
    min-height: 260px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
}

@media (max-width: 780px) {
  .market-physical-bridge {
    margin-top: var(--space-8);
    margin-inline: calc(clamp(var(--space-6), 3vw, var(--space-8)) * -1);
  }

  .physical-feature--integrated {
    width: 100%;
    padding: var(--space-8) clamp(var(--space-5), 6vw, var(--space-8));
  }

  .physical-feature--integrated .physical-feature-copy h2 {
    font-size: clamp(1.9rem, 8vw, 2.55rem);
  }

  .physical-feature--integrated .physical-feature-media {
    min-height: 210px;
  }
}

/* ========================================================================== 
   Readability refinement — market + contact in one warm premium palette
   ========================================================================== */

/* Stronger contrast inside the lightened market panel */
.market-card-label {
  color: #fff8e8;
  text-shadow: 0 1px 12px rgba(52, 37, 20, 0.18);
}

.market-card-tag,
.orbit-kicker,
.market-rings-core span {
  color: #ead9b4;
}

.orbit-multiple,
.market-rings-core strong {
  color: #fffaf0;
  text-shadow: 0 0 24px rgba(255, 226, 165, 0.24);
}

.orbit-cagr {
  color: #f3d58e;
}

.orbit-copy h4 {
  color: #fff7e8;
}

.growth-range small,
.market-ring-index,
.market-ring-row small {
  color: #d9c7a3;
}

.growth-range strong,
.market-ring-row strong,
.market-ring-row b {
  color: #fff4dc;
}

.market-source {
  color: #e1d1b0;
  border-top-color: rgba(255, 235, 196, 0.22);
}

.market-source a {
  color: #fff0c7;
  text-decoration-color: rgba(255, 230, 176, 0.52);
}

.market-source a:hover {
  color: #fff8e7;
}

/* Contact: warm taupe/champagne visual family */
.contact {
  background:
    linear-gradient(142deg, rgba(255, 255, 255, 0.18), transparent 38%),
    linear-gradient(160deg, rgba(137, 117, 88, 0.94) 0%, rgba(108, 89, 66, 0.96) 54%, rgba(79, 64, 47, 0.97) 100%);
  border-top-color: rgba(255, 240, 207, 0.26);
  border-bottom-color: rgba(255, 240, 207, 0.22);
  color: #fff8ea;
}

.contact::before {
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.075), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.02)),
    linear-gradient(90deg, rgba(242, 206, 133, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(242, 206, 133, 0.045) 1px, transparent 1px);
  background-size: 100% 100%, 36px 36px, 36px 36px;
}

.contact .section-label {
  color: #f0d28d;
}

.contact .section-label::before {
  background: #f0d28d;
}

.contact-intro h2 {
  color: #fff9ee;
}

.contact-intro > p {
  color: #eadfc9;
}

.contact-option {
  border-top-color: rgba(255, 239, 207, 0.22);
}

.contact-option:last-of-type {
  border-bottom-color: rgba(255, 239, 207, 0.22);
}

.contact-option > svg {
  color: #f1d28b;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 238, 202, 0.24);
}

.contact-option h4 {
  color: #fff7e8;
}

.contact-option p {
  color: #e0d3bc;
}

.form-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.045));
  border-color: rgba(255, 239, 207, 0.28);
  box-shadow:
    0 28px 70px rgba(54, 37, 17, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.form-row label {
  color: #ead8b7;
}

.form-row input,
.form-row textarea,
.form-row select {
  background: rgba(58, 43, 29, 0.34);
  border-color: rgba(255, 238, 202, 0.24);
  color: #fff9ee;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: #cdbfa7;
}

.form-row input:hover,
.form-row textarea:hover,
.form-row select:hover {
  border-color: rgba(247, 213, 145, 0.48);
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  border-color: #efd18d;
  background: rgba(58, 43, 29, 0.43);
  box-shadow: 0 0 0 3px rgba(239, 209, 141, 0.12);
}

.form-row select option {
  background: #6c5942;
  color: #fff8ea;
}

.form-note {
  color: #d9ccb5;
}

.contact .btn-outline {
  border-color: rgba(255, 239, 207, 0.32);
  color: #fff7e8;
  background: rgba(255, 255, 255, 0.055);
}

.contact .btn-outline:hover {
  border-color: #f0d28d;
  color: #fff6df;
  background: rgba(255, 230, 176, 0.10);
}


/* ========================================================================== 
   Language selector
   ========================================================================== */
.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0.28rem 0.38rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
}

.language-switcher a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  min-height: 1.75rem;
  padding: 0.18rem 0.34rem;
  border-radius: var(--radius-full);
  color: var(--color-text-faint);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}

.language-switcher a:hover {
  color: var(--color-text);
}

.language-switcher a.active,
.language-switcher a[aria-current="page"] {
  background: var(--color-primary);
  color: #201503;
}

.language-switcher--mobile {
  width: max-content;
  margin-top: var(--space-8);
}

@media (max-width: 520px) {
  .language-switcher--desktop {
    display: none;
  }
}


.mobile-drawer .language-switcher a {
  min-width: 1.9rem;
  min-height: 1.75rem;
  padding: 0.18rem 0.34rem;
  color: var(--color-text-faint);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
}

.mobile-drawer .language-switcher a:hover {
  color: var(--color-text);
}

.mobile-drawer .language-switcher a.active,
.mobile-drawer .language-switcher a[aria-current="page"] {
  color: #201503;
}

/* ==========================================================================
   CONNECTCIRCUIT — Startup Hero Refinement
   Scoped exclusively to the homepage hero
   ========================================================================== */

   .hero--startup {
    isolation: isolate;
    min-height: min(900px, calc(100svh - 76px));
    display: flex;
    align-items: center;
    padding-top: clamp(5rem, 9vw, 8rem);
    padding-bottom: clamp(3.5rem, 6vw, 6rem);
  }
  
  /* Clean luxury-tech treatment of the existing background */
  .hero--startup .hero-bg {
    opacity: 0.66;
    filter: saturate(0.72) contrast(1.02);
  }
  
  .hero--startup .hero-bg::before {
    background:
      linear-gradient(
        90deg,
        rgba(159, 143, 97, 0.97) 0%,
        rgba(137, 113, 80, 0.88) 42%,
        rgba(119, 95, 70, 0.52) 72%,
        rgba(41, 38, 37, 0.31) 100%
      );
  }
  
  /* Fine technical grid, deliberately subtle */
  .hero--startup::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.33;
    background-image:
      linear-gradient(rgba(42, 35, 24, 0.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(42, 35, 24, 0.055) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.9),
      rgba(0, 0, 0, 0.4) 50%,
      transparent
    );
  }
  
  /* Soft animated technology glow */
  .hero--startup::after {
    content: '';
    position: absolute;
    width: min(52vw, 720px);
    aspect-ratio: 1;
    right: -14%;
    top: -18%;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    background:
      radial-gradient(
        circle,
        rgba(188, 148, 72, 0.18) 0%,
        rgba(188, 148, 72, 0.07) 38%,
        transparent 50%
      );
    filter: blur(4px);
    animation: heroTechGlow 9s ease-in-out infinite alternate;
  }
  
  .hero--startup .hero-grid {
    max-width: 1050px;
  }
  





.hero--startup .hero-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.78rem;

  width: fit-content;
  margin-bottom: var(--space-6);
  padding: 0;

  overflow: visible;

  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: clamp(0.66rem, 0.61rem + 0.17vw, 0.77rem);
  font-weight: 600;
  line-height: 1.3;

  letter-spacing: 0.16em;
  text-transform: uppercase;

  /* Metallic-Gold-Schrift */
  color: transparent;
  -webkit-text-fill-color: transparent;

  background-image:
  linear-gradient(
    110deg,
    #d8d6d0 0%,
    #f4f2ed 25%,
    #ffffff 40%,
    #f7f5ef 46%,
    #c0b194 50%,
    #c7c1b0 54%,
    #b9a789 58%,
    #fffdf8 63%,
    #ece9e2 78%,
    #ffffff 100%
  );

  background-size: 240% auto;
  background-position: 100% center;

  -webkit-background-clip: text;
  background-clip: text;

  filter:
    drop-shadow(0 0 5px rgba(190, 143, 48, 0.18));

  animation: heroKickerMetallic 5.5s ease-in-out infinite;
}

/* Metallic leuchtender Goldpunkt */
.hero--startup .hero-kicker::before {
  content: '';

  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  border-radius: 50%;

  background:
  radial-gradient(
    circle at 35% 30%,
    #ffffff 0%,
    #f7f5ef 28%,
    #dedbd3 48%,
    #dcd6ca 64%,
    #d7cfba 76%,
    #c8bead 88%,
    #f7f4ec 100%
  );

  box-shadow:
    inset 0 0 2px rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(111, 74, 13, 0.38),
    0 0 7px rgba(211, 163, 67, 0.72),
    0 0 18px rgba(211, 163, 67, 0.42);

  animation: heroKickerMetalPulse 2.8s ease-in-out infinite;
}

/* Metallic Connector-Linie rechts */
.hero--startup .hero-kicker::after {
  content: '';

  width: clamp(44px, 5vw, 80px);
  height: 1px;

  margin-left: 0.15rem;

  background:
  linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 10%,
    #dedbd3 24%,
    #ffffff 40%,
    #bfae8d 48%,
    #ffe6a1 52%,
    #c3a97d 57%,
    #fffdf8 64%,
    #e8e5de 78%,
    transparent 100%
  );

  background-size: 240% 100%;
  background-position: 100% center;

  box-shadow:
    0 0 5px rgba(216, 171, 80, 0.42),
    0 0 12px rgba(216, 171, 80, 0.18);

  animation: heroKickerMetalLine 4.4s ease-in-out infinite;
}

@keyframes heroKickerMetallic {
  0%,
  100% {
    background-position: 100% center;

    filter:
      drop-shadow(0 0 3px rgba(190, 143, 48, 0.12));
  }

  50% {
    background-position: 0% center;

    filter:
      drop-shadow(0 0 7px rgba(222, 177, 84, 0.34));
  }
}

@keyframes heroKickerMetalPulse {
  0%,
  100% {
    transform: scale(0.82);

    box-shadow:
      inset 0 0 2px rgba(255, 255, 255, 0.88),
      0 0 0 1px rgba(111, 74, 13, 0.34),
      0 0 6px rgba(211, 163, 67, 0.48),
      0 0 12px rgba(211, 163, 67, 0.2);
  }

  50% {
    transform: scale(1.2);

    box-shadow:
      inset 0 0 3px rgba(255, 255, 255, 1),
      0 0 0 1px rgba(248, 218, 143, 0.72),
      0 0 11px rgba(236, 193, 100, 0.92),
      0 0 26px rgba(211, 163, 67, 0.54);
  }
}

@keyframes heroKickerMetalLine {
  0%,
  100% {
    background-position: 100% center;
    opacity: 0.42;
  }

  50% {
    background-position: 0% center;
    opacity: 1;

    box-shadow:
      0 0 7px rgba(235, 192, 99, 0.68),
      0 0 18px rgba(216, 171, 80, 0.28);
  }
}








  /* Cleaner startup typography instead of an editorial magazine look */
  .hero--startup .hero-title {
    max-width: 19ch;
    font-family: var(--font-body);
    font-size: clamp(3rem, 1.75rem + 4.5vw, 6.35rem);
    font-weight: 570;
    line-height: 0.98;
    letter-spacing: -0.064em;
    text-wrap: balance;
  }
  
  .hero--startup .hero-title em {
    font-weight: 500;
    letter-spacing: -0.057em;
  
    background:
      linear-gradient(
        108deg,
        #fff8ed 0%,
        #fff6e7 18%,
        #f1efeb 34%,
        #f1eae2 48%,
        #eee9e1 58%,
        #d9d2c8 68%,
        #fcf7f0 82%,
        #fbf7f1 100%
      );
  
    background-size: 100% 100%;
  
    color: #89837a;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  
    filter:
      drop-shadow(0 1px 0 rgba(255, 255, 255, 0.28))
      drop-shadow(0 2px 6px rgba(48, 44, 39, 0.12));
  
    animation: none;
  }
  
  .hero--startup .hero-sub {
    max-width: 61ch;
    margin-top: clamp(1.5rem, 2.5vw, 2.2rem);
    color: #514a3f;
    font-size: clamp(1.05rem, 0.96rem + 0.42vw, 1.3rem);
    line-height: 1.66;
    letter-spacing: -0.015em;
  }
  
  /* Cleaner, less playful buttons */
  .hero--startup .hero-actions {
    margin-top: clamp(2rem, 3vw, 2.8rem);
  }
  
  .hero--startup .btn {
    min-height: 54px;
    padding: 0.9rem 1.6rem;
    border-radius: 0.78rem;
    transition:
      transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1),
      background-color 260ms ease,
      border-color 260ms ease;
  }
  
  .hero--startup .btn-primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #a1947e, #d9cfbc);
    color: #fffaf0;
    box-shadow:
      0 14px 34px rgba(111, 79, 24, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }
  
  .hero--startup .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow:
      0 20px 42px rgba(111, 79, 24, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  
  .hero--startup .btn-outline {
    background: rgba(255, 255, 255, 0.27);
    border-color: rgba(76, 61, 35, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  
  /* ==========================================================================
     Animated hero signal cards
     ========================================================================== */
  
  .hero--startup .hero-signal-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.8rem, 1.5vw, 1.25rem);
    margin-top: clamp(4rem, 7vw, 6.5rem);
    padding-top: 0;
    border-top: 0;
  }
  
  /* Fine connecting line behind the cards */
  .hero--startup .hero-signal-grid::before {
    content: '';
    position: absolute;
    left: 7%;
    right: 7%;
    top: 50%;
    height: 1px;
    z-index: -1;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(151, 114, 44, 0.22) 18%,
      rgba(151, 114, 44, 0.22) 82%,
      transparent
    );
  }
  
  .hero--startup .hero-signal-card {
    --card-delay: calc(var(--signal-index) * 110ms);
  
    position: relative;
    min-height: 185px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(1.3rem, 2.3vw, 1.8rem);
    border: 1px solid rgba(120, 96, 54, 0.17);
    border-radius: 1rem;
    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.7),
        rgba(244, 237, 224, 0.38)
      );
    box-shadow:
      0 22px 60px rgba(74, 57, 27, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(22px) saturate(115%);
    -webkit-backdrop-filter: blur(22px) saturate(115%);
  
    transition:
      opacity 720ms cubic-bezier(0.16, 1, 0.3, 1) var(--card-delay),
      transform 720ms cubic-bezier(0.16, 1, 0.3, 1) var(--card-delay),
      border-color 300ms ease,
      box-shadow 300ms ease;
  }
  
  .hero--startup .hero-signal-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(
        circle at 82% 4%,
        rgba(184, 142, 62, 0.16),
        transparent 34%
      );
  }
  
  .hero--startup .hero-signal-card::after {
    content: '';
    position: absolute;
    left: -45%;
    top: 0;
    width: 34%;
    height: 100%;
    pointer-events: none;
    transform: skewX(-18deg);
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.52),
      transparent
    );
    animation: heroCardScan 8s ease-in-out infinite;
    animation-delay: calc(var(--signal-index) * 900ms);
  }
  
  .hero--startup .hero-signal-card:hover {
    transform: translateY(-7px);
    border-color: rgba(151, 114, 44, 0.38);
    box-shadow:
      0 30px 75px rgba(74, 57, 27, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }
  
  .hero-signal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .hero-signal-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.71rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    color: rgba(79, 65, 41, 0.5);
  }
  
  .hero-signal-status {
    position: relative;
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
  }
  
  .hero-signal-dot {
    position: relative;
    z-index: 2;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a78034;
    box-shadow: 0 0 12px rgba(167, 128, 52, 0.52);
  }
  
  .hero-signal-pulse {
    position: absolute;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(167, 128, 52, 0.65);
    border-radius: 50%;
    animation: heroSignalPulse 2.6s ease-out infinite;
    animation-delay: calc(var(--signal-index) * 500ms);
  }
  
  .hero--startup .stat-value {
    position: relative;
    z-index: 1;
    margin-top: 1.6rem;
    font-family: var(--font-body);
    font-size: clamp(1.35rem, 1.08rem + 0.75vw, 1.9rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: #211d17;
  }
  
  .hero--startup .stat-label {
    position: relative;
    z-index: 1;
    max-width: 28ch;
    margin-top: 0.65rem;
    font-size: clamp(0.78rem, 0.74rem + 0.15vw, 0.9rem);
    line-height: 1.5;
    letter-spacing: 0.005em;
    color: #777064;
  }
  
  .hero-signal-line {
    position: relative;
    z-index: 1;
    height: 2px;
    margin-top: 1.45rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(151, 114, 44, 0.11);
  }
  
  .hero-signal-line span {
    position: absolute;
    inset-block: 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(166, 126, 48, 0.88),
      transparent
    );
    animation: heroSignalLine 3.8s ease-in-out infinite;
    animation-delay: calc(var(--signal-index) * 430ms);
  }
  
  /* ==========================================================================
     Motion
     ========================================================================== */
  
  @keyframes heroTechGlow {
    from {
      transform: translate3d(-2%, -1%, 0) scale(0.96);
      opacity: 0.6;
    }
    to {
      transform: translate3d(3%, 3%, 0) scale(1.07);
      opacity: 1;
    }
  }
  
  @keyframes heroKickerScan {
    0%,
    58% {
      transform: translateX(-160%) skewX(-24deg);
    }
    78%,
    100% {
      transform: translateX(360%) skewX(-24deg);
    }
  }
  
  @keyframes heroTitleGold {
    from {
      background-position: 0% center;
    }
    to {
      background-position: 100% center;
    }
  }
  
  @keyframes heroCardScan {
    0%,
    60% {
      left: -45%;
      opacity: 0;
    }
    70% {
      opacity: 0.55;
    }
    88%,
    100% {
      left: 130%;
      opacity: 0;
    }
  }
  
  @keyframes heroSignalPulse {
    0% {
      transform: scale(0.8);
      opacity: 0.8;
    }
    75%,
    100% {
      transform: scale(3.25);
      opacity: 0;
    }
  }
  
  @keyframes heroSignalLine {
    0% {
      transform: translateX(-125%);
      opacity: 0;
    }
    22% {
      opacity: 1;
    }
    72% {
      opacity: 1;
    }
    100% {
      transform: translateX(335%);
      opacity: 0;
    }
  }
  
  /* ==========================================================================
     Responsive
     ========================================================================== */
  
  @media (max-width: 900px) {
    .hero--startup {
      min-height: auto;
    }
  
    .hero--startup .hero-title {
      max-width: 16ch;
      letter-spacing: -0.052em;
    }
  
    .hero--startup .hero-signal-grid {
      grid-template-columns: 1fr;
    }
  
    .hero--startup .hero-signal-grid::before {
      display: none;
    }
  
    .hero--startup .hero-signal-card {
      min-height: 155px;
    }
  }
  
  @media (max-width: 560px) {
    .hero--startup {
      padding-top: 4.5rem;
    }
  
    .hero--startup .hero-title {
      font-size: clamp(2.65rem, 12vw, 4rem);
      line-height: 1.01;
    }
  
    .hero--startup .hero-sub {
      font-size: 1rem;
      line-height: 1.6;
    }
  
    .hero--startup .hero-actions {
      display: grid;
      grid-template-columns: 1fr;
    }
  
    .hero--startup .hero-actions .btn {
      width: 100%;
      justify-content: center;
    }
  
    .hero--startup .hero-signal-grid {
      margin-top: 3.2rem;
    }
  }
  
  /* Respect users who prefer less motion */
  @media (prefers-reduced-motion: reduce) {
    .hero--startup::after,
    .hero--startup .hero-kicker::after,
    .hero--startup .hero-title em,
    .hero--startup .hero-signal-card::after,
    .hero-signal-pulse,
    .hero-signal-line span {
      animation: none !important;
    }
  
    .hero--startup .hero-signal-card {
      transition-delay: 0ms !important;
    }
  }
  








/* ==========================================================================
   CONNECTCIRCUIT — Animated asymmetric connector network - NEUE LINIEN ANIMIERT!!
   ========================================================================== */

.hero--startup {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Text, Buttons und Karten bleiben über dem Netzwerk */
.hero--startup .hero-grid {
  position: relative;
  z-index: 3;
}

.hero--startup .hero-grid > div {
  position: relative;
}

.hero--startup .hero-grid > div > *:not(.hero-tech-network) {
  position: relative;
  z-index: 2;
}

/* Dezentes technisches Micro-Grid im Hintergrund */
.hero--startup::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  opacity: 0.13;

  background-image:
    linear-gradient(
      rgba(145, 105, 35, 0.07) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(145, 105, 35, 0.07) 1px,
      transparent 1px
    );
  
    background-size: 34px 34px;
    background-position:
      0 0,
      0 0;
  
    -webkit-mask-image: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0.82) 66%,
      rgba(0, 0, 0, 0.3) 88%,
      transparent 100%
    );
  
    mask-image: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0.82) 66%,
      rgba(0, 0, 0, 0.3) 88%,
      transparent 100%
    );
  
    animation: ccGridDrift 30s linear infinite;
  }
  
  /* Großes asymmetrisches Netzwerk hinter dem gesamten Hero-Text */
  .hero-tech-network {
    position: absolute;
    inset: -10% -9% -8% -9%;
    z-index: 1;
  
    width: 118%;
    height: 118%;
  
    overflow: hidden;
    pointer-events: none;
  
    opacity: 0.96;
  
    transform: translate(-6%, -5%) scale(1.06);
    transform-origin: 44% 46%;
  }
  
  /* Dezentes Lichtfeld hinter dem Netzwerk */
  .hero-tech-network::before {
    content: '';
    position: absolute;
  
    width: min(72vw, 1050px);
    aspect-ratio: 1;
  
    left: -8%;
    top: -34%;
  
    border-radius: 50%;
  
    background:
      radial-gradient(
        circle,
        rgba(205, 158, 67, 0.22) 0%,
        rgba(205, 158, 67, 0.09) 38%,
        transparent 70%
      );
  
    filter: blur(14px);
  
    animation: ccNetworkGlow 10s ease-in-out infinite alternate;
  }
  
  /* Langsamer Licht-Scan durch das Netzwerk */
  .hero-tech-network::after {
    content: '';
    position: absolute;
  
    top: -18%;
    bottom: -18%;
    left: -26%;
  
    width: 15%;
  
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(207, 167, 83, 0.055),
        rgba(255, 248, 226, 0.13),
        transparent
      );
  
    transform: skewX(-14deg);
  
    animation: ccNetworkSweep 12s ease-in-out infinite;
  }
  
  /* ==========================================================================
     Leuchtende Connector-Nodes
     ========================================================================== */
  
  .hero-tech-network .tech-node {
    position: absolute;
    z-index: 3;
  
    width: 6px;
    height: 6px;
  
    border-radius: 50%;
    border: 1px solid rgba(255, 251, 241, 0.98);
  
    background: #b98b35;
  
    box-shadow:
      0 0 0 1px rgba(236, 203, 132, 0.62),
      0 0 13px rgba(224, 175, 79, 0.88),
      0 0 30px rgba(203, 151, 57, 0.38);
  
    animation: ccNodeCore 3.4s ease-in-out infinite;
  }
  
  .hero-tech-network .tech-node::before,
  .hero-tech-network .tech-node::after {
    content: '';
    position: absolute;
  
    left: 50%;
    top: 50%;
  
    border-radius: 50%;
  
    transform: translate(-50%, -50%);
  }
  
  .hero-tech-network .tech-node::before {
    width: 24px;
    height: 24px;
  
    border: 1px solid rgba(166, 123, 41, 0.3);
  
    animation: ccNodePulse 3.4s ease-out infinite;
  }
  
  .hero-tech-network .tech-node::after {
    width: 40px;
    height: 40px;
  
    background:
      radial-gradient(
        circle,
        rgba(180, 135, 47, 0.13),
        transparent 72%
      );
  }
  
  /* Bewusst asymmetrische Positionen */
  
  .hero-tech-network .tech-node--1 {
    left: 9%;
    top: 29%;
    animation-delay: 0s;
  }
  
  .hero-tech-network .tech-node--2 {
    left: 34%;
    top: 14%;
    animation-delay: 0.55s;
  }
  
  .hero-tech-network .tech-node--3 {
    left: 49%;
    top: 47%;
    animation-delay: 1.1s;
  }
  
  .hero-tech-network .tech-node--4 {
    left: 76%;
    top: 24%;
    animation-delay: 1.65s;
  }
  
  .hero-tech-network .tech-node--5 {
    left: 20%;
    top: 75%;
    animation-delay: 2.2s;
  }
  
  .hero-tech-network .tech-node--6 {
    left: 86%;
    top: 69%;
    animation-delay: 2.75s;
  }
  
  .hero-tech-network .tech-node--1::before {
    animation-delay: 0s;
  }
  
  .hero-tech-network .tech-node--2::before {
    animation-delay: 0.55s;
  }
  
  .hero-tech-network .tech-node--3::before {
    animation-delay: 1.1s;
  }
  
  .hero-tech-network .tech-node--4::before {
    animation-delay: 1.65s;
  }
  
  .hero-tech-network .tech-node--5::before {
    animation-delay: 2.2s;
  }
  
  .hero-tech-network .tech-node--6::before {
    animation-delay: 2.75s;
  }
  
  /* ==========================================================================
     Asymmetrische Verbindungslinien
     ========================================================================== */
  
  .hero-tech-network .tech-link {
    position: absolute;
    z-index: 2;
  
    height: 1px;
  
    overflow: hidden;
    transform-origin: left center;
  
    opacity: 0.98;
  
    background:
      linear-gradient(
        90deg,
        rgba(154, 109, 30, 0.12),
        rgba(190, 143, 52, 0.62),
        rgba(154, 109, 30, 0.15)
      );
  
    box-shadow:
      0 0 10px rgba(206, 158, 66, 0.24);
  }
  
  .hero-tech-network .tech-link::after {
    content: '';
    position: absolute;
  
    top: -1px;
    bottom: -1px;
    left: 0;
  
    width: 27%;
  
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(220, 174, 82, 0.96),
        rgba(255, 250, 228, 1),
        rgba(235, 192, 101, 1),
        transparent
      );
  
    filter:
      blur(0.1px)
      drop-shadow(0 0 7px rgba(221, 174, 80, 0.96))
      drop-shadow(0 0 14px rgba(203, 150, 53, 0.48));
  
    animation: ccLinkSignal 4.7s ease-in-out infinite;
  }
  
  /* Große Verbindungen hinter Überschrift, Text und Buttons */
  
  .hero-tech-network .tech-link--1 {
    left: 9.3%;
    top: 29.3%;
  
    width: clamp(270px, 29vw, 540px);
  
    transform: rotate(-22deg);
  }
  
  .hero-tech-network .tech-link--2 {
    left: 34.3%;
    top: 14.3%;
  
    width: clamp(230px, 24vw, 440px);
  
    transform: rotate(42deg);
  }
  
  .hero-tech-network .tech-link--3 {
    left: 49.3%;
    top: 47.3%;
  
    width: clamp(270px, 30vw, 550px);
  
    transform: rotate(-25deg);
  }
  
  .hero-tech-network .tech-link--4 {
    left: 20.3%;
    top: 75.3%;
  
    width: clamp(290px, 34vw, 590px);
  
    transform: rotate(-32deg);
  }
  
  .hero-tech-network .tech-link--5 {
    left: 49.3%;
    top: 47.3%;
  
    width: clamp(350px, 41vw, 720px);
  
    transform: rotate(17deg);
  }
  
  /* Signale starten versetzt */
  
  .hero-tech-network .tech-link--1::after {
    animation-delay: 0s;
  }
  
  .hero-tech-network .tech-link--2::after {
    animation-delay: 0.85s;
  }
  
  .hero-tech-network .tech-link--3::after {
    animation-delay: 1.7s;
  }
  
  .hero-tech-network .tech-link--4::after {
    animation-delay: 2.55s;
  }
  
  .hero-tech-network .tech-link--5::after {
    animation-delay: 3.4s;
  }
  
  /* ==========================================================================
     Animationen
     ========================================================================== */
  
  @keyframes ccGridDrift {
    from {
      background-position:
        0 0,
        0 0;
    }
  
    to {
      background-position:
        34px 34px,
        34px 34px;
    }
  }
  
  @keyframes ccNetworkGlow {
    from {
      transform: translate3d(-3%, -2%, 0) scale(0.95);
      opacity: 0.55;
    }
  
    to {
      transform: translate3d(4%, 3%, 0) scale(1.07);
      opacity: 1;
    }
  }
  
  @keyframes ccNetworkSweep {
    0%,
    16% {
      transform: translateX(-20%) skewX(-14deg);
      opacity: 0;
    }
  
    34% {
      opacity: 0.72;
    }
  
    78%,
    100% {
      transform: translateX(830%) skewX(-14deg);
      opacity: 0;
    }
  }
  
  @keyframes ccNodeCore {
    0%,
    100% {
      transform: scale(0.86);
      opacity: 0.65;
    }
  
    48% {
      transform: scale(1.22);
      opacity: 1;
    }
  }
  
  @keyframes ccNodePulse {
    0% {
      transform: translate(-50%, -50%) scale(0.32);
      opacity: 0.88;
    }
  
    72%,
    100% {
      transform: translate(-50%, -50%) scale(1.75);
      opacity: 0;
    }
  }
  
  @keyframes ccLinkSignal {
    0% {
      transform: translateX(-130%);
      opacity: 0;
    }
  
    18% {
      opacity: 1;
    }
  
    72% {
      opacity: 1;
    }
  
    100% {
      transform: translateX(530%);
      opacity: 0;
    }
  }
  
  /* ==========================================================================
     Responsive
     ========================================================================== */
  
  @media (max-width: 1050px) {
    .hero-tech-network {
      inset: -8% -16% -7% -12%;
  
      width: 128%;
      height: 115%;
  
      opacity: 0.62;
  
      transform: translate(-4%, -3%) scale(1.02);
    }
  
    .hero--startup::before {
      opacity: 0.11;
      background-size: 30px 30px;
    }
  }
  
  @media (max-width: 760px) {
    .hero-tech-network {
      inset: -4% -30% -4% -20%;
  
      width: 150%;
      height: 108%;
  
      opacity: 0.38;
  
      transform: none;
    }
  
    .hero--startup::before {
      opacity: 0.08;
      background-size: 28px 28px;
    }
  
    .hero-tech-network .tech-node--2,
    .hero-tech-network .tech-node--4,
    .hero-tech-network .tech-link--2 {
      display: none;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .hero--startup::before,
    .hero-tech-network::before,
    .hero-tech-network::after,
    .hero-tech-network .tech-node,
    .hero-tech-network .tech-node::before,
    .hero-tech-network .tech-link::after {
      animation: none !important;
    }
  }
/* ==========================================================================
   CONNECTCIRCUIT — WARM SILVER / IVORY / CHAMPAGNE SYSTEM
   Cohesive 2026 visual refinement across the main website.
   This block intentionally overrides color and surface treatment only.
   ========================================================================== */

:root,
[data-theme='light'] {
  --color-bg: #d4c9b7;
  --color-surface: #e8e1d6;
  --color-surface-2: #c8c0b4;
  --color-surface-offset: #ddd5c8;
  --color-surface-offset-2: #c9c0b2;
  --color-divider: rgba(67, 59, 49, 0.16);
  --color-border: #b8ad9b;

  --color-text: #2f2b26;
  --color-text-muted: #625b51;
  --color-text-faint: #8a8277;
  --color-text-inverse: #f5f1ea;

  --color-primary: #b5a995;
  --color-primary-hover: #9c907d;
  --color-primary-active: #807565;
  --color-primary-highlight: #ece7de;

  --color-secondary: #3b3833;
  --color-secondary-hover: #302d29;
}

body {
  background:
    radial-gradient(circle at 9% 3%, rgba(255, 255, 255, 0.28), transparent 25%),
    linear-gradient(180deg, #d7ccbb 0%, #d1c6b5 100%);
}

::selection {
  background: rgba(201, 163, 91, 0.28);
  color: #241f1a;
}

/* Header — warm ivory glass with quiet metallic detail */
.header {
  background: rgba(225, 216, 201, 0.88);
  border-bottom-color: rgba(76, 67, 55, 0.13);
  box-shadow: 0 8px 34px rgba(48, 42, 34, 0.035);
  backdrop-filter: blur(22px) saturate(1.06);
  -webkit-backdrop-filter: blur(22px) saturate(1.06);
}

.brand-mark {
  color: #a89c89;
  filter: drop-shadow(0 0 8px rgba(226, 207, 166, 0.22));
}

.brand-sub,
.nav-links a {
  color: #71695f;
}

.nav-links a:hover,
.nav-links a.active {
  color: #2f2b26;
}

.nav-cta {
  color: #27231e;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent 42%),
    linear-gradient(135deg, #b8ad99 0%, #a99d88 54%, #c2b7a4 100%);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow:
    0 10px 26px rgba(67, 58, 46, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.nav-cta:hover {
  color: #211e1a;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.32), transparent 42%),
    linear-gradient(135deg, #c1b6a4 0%, #ada18d 54%, #ccc2b0 100%);
  box-shadow:
    0 14px 32px rgba(67, 58, 46, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.language-switcher {
  border-color: rgba(78, 68, 55, 0.15);
  background: rgba(239, 233, 223, 0.62);
}

.language-switcher a.active,
.language-switcher a[aria-current='page'] {
  color: #24201b;
  background:
    radial-gradient(circle at 32% 25%, rgba(255, 255, 255, 0.36), transparent 42%),
    #b8ad99;
}

/* Shared buttons outside the custom startup hero */
.btn-primary:not(.hero--startup .btn-primary),
.form-submit {
  color: #29241f;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 42%),
    linear-gradient(135deg, #c1b7a5 0%, #a99c87 56%, #d0c5b2 100%);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    0 14px 34px rgba(63, 54, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.btn-primary:not(.hero--startup .btn-primary):hover,
.form-submit:hover {
  color: #201d19;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 42%),
    linear-gradient(135deg, #cdc3b2 0%, #b3a793 56%, #d8cebd 100%);
}

.btn-outline {
  color: #39342e;
  border-color: rgba(75, 66, 54, 0.2);
  background: rgba(244, 239, 231, 0.34);
}

.btn-outline:hover {
  color: #25211d;
  border-color: rgba(101, 90, 74, 0.42);
  background: rgba(245, 240, 232, 0.58);
}

/* ==========================================================================
   PROJECT IDENTITY / MANIFESTO — premium warm graphite + silver glass
   ========================================================================== */

.manifesto {
  isolation: isolate;
  color: #f4f0e9;
  background:
    radial-gradient(circle at 11% 18%, rgba(231, 218, 190, 0.13), transparent 28%),
    radial-gradient(circle at 86% 72%, rgba(201, 166, 96, 0.08), transparent 32%),
    linear-gradient(142deg, #45413b 0%, #393631 48%, #2f2d29 100%);
  border-top-color: rgba(244, 238, 227, 0.12);
  border-bottom-color: rgba(244, 238, 227, 0.1);
}

.manifesto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.26;
  background-image:
    linear-gradient(rgba(238, 230, 216, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 230, 216, 0.04) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: linear-gradient(120deg, #000 0%, rgba(0, 0, 0, 0.62) 52%, transparent 100%);
  mask-image: linear-gradient(120deg, #000 0%, rgba(0, 0, 0, 0.62) 52%, transparent 100%);
}

.manifesto::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 68vw;
  max-width: 980px;
  aspect-ratio: 1;
  left: -26%;
  bottom: -72%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 226, 196, 0.12), transparent 69%);
  filter: blur(22px);
}

.manifesto-bg {
  z-index: 0;
  opacity: 0.38;
  filter: saturate(0.48) contrast(0.94) brightness(0.78);
}

.manifesto-bg::after {
  background:
    linear-gradient(90deg, rgba(43, 40, 36, 0.28), rgba(43, 40, 36, 0.08) 52%, rgba(43, 40, 36, 0.28)),
    linear-gradient(160deg, rgba(63, 59, 53, 0.38) 0%, rgba(42, 40, 36, 0.78) 86%);
}

.manifesto .container {
  z-index: 2;
}

.manifesto .section-label {
  position: relative;
  gap: 0.72rem;
  color: #f1ede5;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-shadow: 0 0 12px rgba(239, 230, 211, 0.12);
}

.manifesto .section-label::before {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff9df 0%, #e7c87f 22%, #bc8d37 60%, #7e5a20 100%);
  box-shadow:
    0 0 0 1px rgba(255, 250, 235, 0.36),
    0 0 10px rgba(221, 179, 87, 0.58),
    0 0 22px rgba(221, 179, 87, 0.24);
}

.manifesto .section-label::after {
  content: '';
  width: clamp(46px, 5vw, 82px);
  height: 1px;
  margin-left: 0.1rem;
  background: linear-gradient(90deg, rgba(225, 190, 119, 0.82), rgba(245, 238, 224, 0.48), transparent);
  box-shadow: 0 0 8px rgba(221, 179, 87, 0.2);
}

.manifesto-quote {
  color: #f2eee7;
  line-height: 1.28;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.16);
}

.manifesto-quote span {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(108deg, #b4904d 0%, #d6bb82 34%, #f3ead6 54%, #c8a564 76%, #9f7b3e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 7px rgba(219, 181, 103, 0.14));
}

.manifesto-body p {
  color: #d8d2c8;
  line-height: 1.72;
}

.manifesto .pillars {
  gap: clamp(0.9rem, 1.7vw, 1.35rem);
}

.manifesto .pillar-card {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  padding: clamp(1.35rem, 2.2vw, 1.8rem);
  color: #f2eee7;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.024)),
    rgba(38, 36, 33, 0.5);
  border: 1px solid rgba(239, 233, 221, 0.18);
  border-radius: 14px;
  box-shadow:
    0 24px 58px rgba(9, 8, 7, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(1.04);
  -webkit-backdrop-filter: blur(18px) saturate(1.04);
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 320ms ease,
    background 320ms ease,
    box-shadow 320ms ease;
}

.manifesto .pillar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 88% 3%, rgba(234, 213, 170, 0.11), transparent 32%),
    linear-gradient(125deg, rgba(255, 255, 255, 0.035), transparent 28%);
}

.manifesto .pillar-card:hover {
  transform: translateY(-5px);
  border-color: rgba(239, 233, 221, 0.3);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.032)),
    rgba(42, 39, 35, 0.56);
  box-shadow:
    0 30px 70px rgba(9, 8, 7, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.manifesto .pillar-icon {
  position: relative;
  z-index: 1;
  color: #dfc58f;
  filter: drop-shadow(0 0 8px rgba(215, 177, 96, 0.22));
}

.manifesto .pillar-card h3 {
  position: relative;
  z-index: 1;
  color: #f3efe8;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.manifesto .pillar-card p {
  position: relative;
  z-index: 1;
  color: #cbc4b9;
  line-height: 1.66;
}

.manifesto .confidential-note {
  color: #d4cec4;
  background: rgba(38, 36, 33, 0.42);
  border-color: rgba(239, 233, 221, 0.22);
}

.manifesto .confidential-note svg {
  color: #dec18a;
}

/* ==========================================================================
   CONFIDENTIAL DEVELOPMENT MODULE — warm graphite, ivory and silver
   ========================================================================== */

.market {
  background:
    radial-gradient(circle at 12% 3%, rgba(255, 255, 255, 0.42), transparent 27%),
    radial-gradient(circle at 87% 17%, rgba(213, 195, 159, 0.16), transparent 31%),
    linear-gradient(180deg, #d7ccbb 0%, #cec3b3 54%, #d8cebf 100%);
}

.market-title {
  color: #2f2b26;
}

.market-intro {
  color: #625b51;
}

.market-card {
  background:
    linear-gradient(142deg, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(158deg, #655f57 0%, #504b45 52%, #3d3a35 100%);
  border-color: rgba(242, 236, 224, 0.24);
  box-shadow:
    0 28px 70px -42px rgba(36, 31, 25, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.market-card::before {
  background-image:
    linear-gradient(128deg, rgba(255, 255, 255, 0.055), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.018)),
    linear-gradient(90deg, rgba(235, 227, 212, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(235, 227, 212, 0.035) 1px, transparent 1px);
}

.market-card::after {
  background: radial-gradient(circle, rgba(235, 220, 190, 0.18), transparent 68%);
}

.market-panel:first-child,
.market-card-head,
.market-panel:last-child {
  border-color: rgba(237, 229, 214, 0.14);
}

.market-card-label,
.market-card-tag,
.orbit-kicker,
.market-rings-core span {
  color: #dfd7ca;
}

.orbit-multiple,
.market-rings-core strong,
.orbit-copy h4,
.growth-range strong,
.market-ring-row strong,
.market-ring-row b {
  color: #f4efe6;
}

.orbit-cagr,
.market-source a,
.market-ring-row--core,
.growth-range svg {
  color: #d5b977;
}

.growth-range small,
.market-ring-index,
.market-ring-row small,
.market-source {
  color: #c4bcaf;
}

.growth-orbit,
.market-ring-row {
  border-color: rgba(239, 232, 219, 0.14);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018));
}

.orbit-guide {
  stroke: rgba(237, 230, 217, 0.18);
}

.orbit-guide--outer {
  stroke: rgba(219, 190, 130, 0.32);
}

.orbit-node,
.market-ring-node {
  fill: #e1c688;
}

.market-physical-bridge {
  background:
    radial-gradient(circle at 9% 12%, rgba(255, 255, 255, 0.52), transparent 32%),
    radial-gradient(circle at 88% 80%, rgba(206, 189, 155, 0.12), transparent 34%),
    linear-gradient(135deg, #ddd4c6 0%, #d1c6b6 58%, #c8bcac 100%);
  border-top-color: rgba(248, 243, 234, 0.32);
}

.physical-feature--integrated .physical-feature-copy h2 {
  color: #302c27;
}

.physical-feature--integrated .physical-feature-copy p {
  color: #645d53;
}

.physical-use-cues span {
  color: #3d3832;
  border-color: rgba(76, 67, 54, 0.18);
  background: rgba(241, 235, 226, 0.42);
}

/* About, supporting sections and cards */
.about-teaser,
.values-strip,
.realestate,
.page-header {
  background:
    radial-gradient(circle at 10% 4%, rgba(255, 255, 255, 0.34), transparent 26%),
    linear-gradient(180deg, #d8cebf 0%, #d2c7b7 100%);
}

.about-teaser--button {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.46), transparent 34%),
    radial-gradient(circle at 88% 76%, rgba(206, 189, 155, 0.12), transparent 32%),
    linear-gradient(180deg, #d8cebf 0%, #d1c6b6 48%, #d9cfc0 100%);
  border-bottom-color: rgba(75, 66, 54, 0.13);
}

.physical-feature,
.about-teaser-card,
.slider-card {
  border-color: rgba(76, 67, 54, 0.16);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08)),
    rgba(215, 206, 191, 0.68);
  box-shadow:
    0 24px 60px -42px rgba(48, 42, 34, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.physical-use-cues span,
.slider-card-tag {
  background: rgba(236, 230, 220, 0.66);
}

.slider-card-tag,
.slider-card-link,
.about-role,
.value-index {
  color: #7f735f;
}

.slider-card-body h3,
.about-content h2,
.about-teaser-body h2,
.value-item h3,
.page-title {
  color: #302c27;
}

.slider-card-body p,
.about-content p,
.about-teaser-body p,
.value-item p {
  color: #625b51;
}

/* Contact — same dark family as Project Identity, cleaner and less brown */
.contact {
  color: #f3eee7;
  background:
    radial-gradient(circle at 12% 8%, rgba(231, 218, 190, 0.1), transparent 34%),
    radial-gradient(circle at 88% 90%, rgba(231, 226, 215, 0.05), transparent 38%),
    linear-gradient(145deg, #4a4640 0%, #3a3732 48%, #302e2a 100%);
  border-top-color: rgba(240, 233, 220, 0.11);
  border-bottom-color: rgba(240, 233, 220, 0.1);
}

.contact::before {
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.04), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.012)),
    linear-gradient(90deg, rgba(235, 227, 212, 0.028) 1px, transparent 1px),
    linear-gradient(rgba(235, 227, 212, 0.028) 1px, transparent 1px);
  background-size: 100% 100%, 38px 38px, 38px 38px;
}

.contact .section-label {
  color: #e4ddd1;
}

.contact .section-label::before {
  background: #d6b878;
}

.contact-intro h2,
.contact-option h4 {
  color: #f4efe7;
}

.contact-intro > p,
.contact-option p,
.form-note {
  color: #cbc4b9;
}

.contact-option,
.contact-option:last-of-type {
  border-color: rgba(239, 232, 219, 0.14);
}

.contact-option > svg {
  color: #d9bf87;
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(239, 232, 219, 0.16);
}

.form-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  border-color: rgba(239, 232, 219, 0.18);
  box-shadow:
    0 28px 70px rgba(15, 13, 11, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.075);
}

.form-row label {
  color: #d8d0c4;
}

.form-row input,
.form-row textarea,
.form-row select {
  color: #f4efe7;
  background: rgba(27, 25, 22, 0.24);
  border-color: rgba(239, 232, 219, 0.16);
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: #aba397;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  border-color: #c9b995;
  background: rgba(27, 25, 22, 0.32);
  box-shadow: 0 0 0 3px rgba(201, 185, 149, 0.09);
}

.form-row select option {
  background: #3b3833;
}

.contact .btn-outline {
  color: #f0ebe3;
  border-color: rgba(239, 232, 219, 0.22);
  background: rgba(255, 255, 255, 0.035);
}

.contact .btn-outline:hover {
  color: #fffaf1;
  border-color: rgba(222, 202, 160, 0.5);
  background: rgba(255, 255, 255, 0.065);
}

/* Footer and mobile navigation */
.footer {
  color: #37322c;
  background: #d4c9b7;
  border-top-color: rgba(74, 65, 53, 0.14);
}

.footer-meta,
.footer-links a {
  color: #776f64;
}

.footer-links a:hover {
  color: #2f2b26;
}

.footer-brand-mark {
  color: #9b8f7c;
}

.mobile-drawer {
  color: #302c27;
  background:
    radial-gradient(circle at 88% 5%, rgba(255, 255, 255, 0.42), transparent 28%),
    linear-gradient(180deg, #ddd4c6 0%, #d1c6b6 100%);
}

/* Responsive refinement */
@media (max-width: 900px) {
  .manifesto .pillar-card {
    min-height: auto;
  }

  .manifesto-grid {
    gap: var(--space-10);
  }
}

@media (max-width: 560px) {
  .manifesto .section-label::after {
    width: 34px;
  }

  .manifesto .pillar-card {
    border-radius: 12px;
  }
}

/* ==========================================================================
   CONNECTCIRCUIT — Premium homepage motion system
   Refined entrance choreography and subtle interactive movement.
   ========================================================================== */

/* Hero entrance: the complete opening sequence settles in with depth. */
.hero--startup .hero-kicker {
  will-change: opacity, transform, filter;
  animation:
    ccHeroKickerEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both,
    heroKickerMetallic 5.5s ease-in-out 1.05s infinite;
}

.hero--startup .hero-title {
  will-change: opacity, transform, filter;
  transform-origin: left center;
  overflow: visible;
  padding-bottom: 0.12em;
  line-height: 1.035;
  animation: ccHeroTitleEnter 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}

.hero--startup .hero-title em {
  display: inline-block;
  overflow: visible;
  padding-bottom: 0.16em;
  line-height: 1.04;
  will-change: opacity, transform, filter;
  animation: ccHeroAccentEnter 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both;
}

/* Language-specific title composition — two clean, left-aligned lines */
html[lang='de'] .hero--startup .hero-title,
html[lang='en'] .hero--startup .hero-title {
  width: 100%;
  max-width: none;
  white-space: nowrap;
  text-wrap: nowrap;
  line-height: 0.98;
}

html[lang='de'] .hero--startup .hero-title {
  font-size: clamp(3rem, 1.62rem + 4.05vw, 5.85rem);
}

html[lang='en'] .hero--startup .hero-title {
  font-size: clamp(3rem, 1.55rem + 4.15vw, 5.95rem);
}

html[lang='de'] .hero--startup .hero-title em,
html[lang='en'] .hero--startup .hero-title em {
  display: block;
  width: fit-content;
  max-width: none;
  margin-top: 0.12em;
  margin-left: 0;
  padding-bottom: 0.2em;
  white-space: nowrap;
  text-wrap: nowrap;
}

.hero--startup .hero-sub {
  will-change: opacity, transform, filter;
  animation: ccHeroCopyEnter 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.62s both;
}

.hero--startup .hero-actions {
  will-change: opacity, transform;
  animation: ccHeroActionsEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.78s both;
}

.hero--startup .hero-actions .btn {
  position: relative;
  will-change: transform;
}

.hero--startup .hero-actions .btn:nth-child(1) {
  animation: ccHeroButtonEnter 0.78s cubic-bezier(0.16, 1, 0.3, 1) 0.86s both;
}

.hero--startup .hero-actions .btn:nth-child(2) {
  animation: ccHeroButtonEnter 0.78s cubic-bezier(0.16, 1, 0.3, 1) 0.98s both;
}

/* Network fades and expands into position instead of appearing abruptly. */
.hero-tech-network {
  will-change: opacity, transform;
  animation: ccHeroNetworkEnter 1.65s cubic-bezier(0.16, 1, 0.3, 1) 0.02s both;
}

/* Signal cards settle in sequentially when the existing reveal script activates them. */
.hero--startup .hero-signal-card.is-visible {
  animation: ccHeroCardEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--card-delay) both;
}

/* Premium scroll reveals across the homepage. */
main [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(0.988);
  filter: blur(8px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.85s ease;
  will-change: opacity, transform, filter;
}

main [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

/* Subtle living surfaces without changing the visual system. */
.manifesto .pillar-card,
.market-card,
.physical-feature,
.form-card {
  transition:
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s ease,
    box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.45s ease;
}

.manifesto .pillar-card:hover {
  transform: translate3d(0, -7px, 0);
  border-color: rgba(240, 226, 197, 0.32);
  box-shadow:
    0 28px 64px -36px rgba(12, 10, 8, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 0 24px rgba(211, 171, 91, 0.07);
}

.market-card:hover,
.physical-feature:hover {
  transform: translate3d(0, -5px, 0);
}

.contact-option {
  transition:
    transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.32s ease;
}

.contact-option:hover {
  transform: translate3d(7px, 0, 0);
  border-color: rgba(240, 222, 184, 0.32);
}

/* A restrained highlight crosses the primary hero button occasionally. */
.hero--startup .btn-primary::after {
  content: '';
  position: absolute;
  inset: -35% auto -35% -42%;
  width: 28%;
  pointer-events: none;
  transform: skewX(-19deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.42),
    transparent
  );
  animation: ccHeroButtonSheen 7.5s ease-in-out 1.8s infinite;
}

@keyframes ccHeroKickerEnter {
  from {
    opacity: 0;
    transform: translate3d(-38px, 0, 0);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes ccHeroTitleEnter {
  0% {
    opacity: 0;
    transform: translate3d(-74px, 24px, 0) scale(0.965);
    filter: blur(13px);
  }
  62% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes ccHeroAccentEnter {
  from {
    opacity: 0;
    transform: translate3d(42px, 30px, 0) scale(0.97);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes ccHeroCopyEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes ccHeroActionsEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ccHeroButtonEnter {
  from {
    opacity: 0;
    transform: translate3d(-18px, 14px, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes ccHeroNetworkEnter {
  from {
    opacity: 0;
    transform: translate(-11%, -9%) scale(1.14);
    filter: blur(8px);
  }
  to {
    opacity: 0.96;
    transform: translate(-6%, -5%) scale(1.06);
    filter: blur(0);
  }
}

@keyframes ccHeroCardEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(0.97);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes ccHeroButtonSheen {
  0%,
  58% {
    left: -42%;
    opacity: 0;
  }
  68% {
    opacity: 0.62;
  }
  84%,
  100% {
    left: 132%;
    opacity: 0;
  }
}

@media (max-width: 1050px) {
  @keyframes ccHeroNetworkEnter {
    from {
      opacity: 0;
      transform: translate(-8%, -6%) scale(1.08);
      filter: blur(7px);
    }
    to {
      opacity: 0.62;
      transform: translate(-4%, -3%) scale(1.02);
      filter: blur(0);
    }
  }
}

@media (max-width: 760px) {
  .hero--startup .hero-title {
    animation-duration: 0.95s;
  }

  .hero--startup .hero-title em {
    animation-delay: 0.32s;
  }

  html[lang='de'] .hero--startup .hero-title,
  html[lang='en'] .hero--startup .hero-title {
    width: auto;
    max-width: 15.5ch;
    white-space: normal;
    text-wrap: balance;
  }

  html[lang='de'] .hero--startup .hero-title em,
  html[lang='en'] .hero--startup .hero-title em {
    max-width: 13.8ch;
    margin-left: 0;
    white-space: normal;
    text-wrap: balance;
  }

  .hero-tech-network {
    animation: ccHeroNetworkEnterMobile 1.35s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes ccHeroNetworkEnterMobile {
    from {
      opacity: 0;
      transform: translate3d(-4%, -3%, 0) scale(1.05);
      filter: blur(6px);
    }
    to {
      opacity: 0.38;
      transform: none;
      filter: blur(0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--startup .hero-kicker,
  .hero--startup .hero-title,
  .hero--startup .hero-title em,
  .hero--startup .hero-sub,
  .hero--startup .hero-actions,
  .hero--startup .hero-actions .btn,
  .hero-tech-network,
  .hero--startup .hero-signal-card.is-visible,
  .hero--startup .btn-primary::after {
    animation: none !important;
  }

  main [data-reveal],
  main [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .manifesto .pillar-card:hover,
  .market-card:hover,
  .physical-feature:hover,
  .contact-option:hover {
    transform: none;
  }
}

/* ==========================================================================
   HOMEPAGE HERO → PROJECT IDENTITY
   TRUE PINNED GLASS STACK
   The hero stays fixed while the glass section physically scrolls upward.
   ========================================================================== */

/*
  This is the real inverse-scroll construction:
  the first screen is pinned; the following section moves over it with the
  document scroll. No short animation that stops after a few pixels.
*/
.hero--startup {
  position: sticky;
  top: 0;
  z-index: 1;

  min-height: calc(100svh - 4.65rem);
  padding-bottom: clamp(3.5rem, 5vw, 5rem);

  transform: translateZ(0);
  backface-visibility: hidden;
}

/* All later sections remain above the pinned hero. */
main > section:not(.hero--startup) {
  position: relative;
  z-index: 4;
}

/*
  Full-width glass panel.
  Straight edge, no frame, no rounded corners, no decorative geometry.
*/
.manifesto--scroll-rise {
  position: relative;
  z-index: 5;
  isolation: isolate;

  margin-top: 0;
  border: 0;
  border-radius: 0;
  clip-path: none;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(38, 37, 34, 0.82) 0%,
      rgba(39, 38, 35, 0.92) 12%,
      rgba(45, 42, 38, 0.97) 42%,
      rgba(42, 39, 35, 0.985) 100%
    );

  -webkit-backdrop-filter:
    blur(30px)
    saturate(112%)
    brightness(0.74);
  backdrop-filter:
    blur(30px)
    saturate(112%)
    brightness(0.74);

  box-shadow:
    0 -28px 72px rgba(14, 14, 13, 0.26),
    0 -6px 18px rgba(14, 14, 13, 0.18),
    inset 0 22px 52px rgba(8, 8, 8, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  transform: translateZ(0);
  backface-visibility: hidden;
}

/*
  Flat glass edge:
  not a bezel and not a frame — only a dark optical depth at the contact line.
*/
.manifesto--scroll-rise::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 6;

  height: clamp(2.6rem, 4vw, 4.2rem);

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(4, 4, 4, 0.72) 0%,
      rgba(12, 12, 12, 0.48) 14%,
      rgba(25, 24, 22, 0.26) 38%,
      rgba(255, 255, 255, 0.055) 48%,
      rgba(18, 18, 17, 0.12) 58%,
      transparent 100%
    );

  -webkit-backdrop-filter:
    blur(38px)
    saturate(108%)
    brightness(0.68);
  backdrop-filter:
    blur(38px)
    saturate(108%)
    brightness(0.68);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 14px 32px rgba(0, 0, 0, 0.18);
}

/* One mirror-thin reflection exactly on the glass plane. */
.manifesto--scroll-rise::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 7;

  height: 1px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.015),
      rgba(255, 255, 255, 0.20) 24%,
      rgba(255, 252, 244, 0.42) 50%,
      rgba(255, 255, 255, 0.20) 76%,
      rgba(255, 255, 255, 0.015)
    );

  box-shadow:
    0 0 10px rgba(238, 229, 207, 0.10);
}

/*
  The image remains visible, but behaves like content behind smoked glass.
*/
.manifesto--scroll-rise .manifesto-bg {
  opacity: 0.38;
  mix-blend-mode: soft-light;
}

.manifesto--scroll-rise .manifesto-bg img {
  filter:
    saturate(0.54)
    contrast(0.92)
    brightness(0.66);
}

/* Replace the older opaque overlay with a glass-compatible depth gradient. */
.manifesto--scroll-rise .manifesto-bg::after {
  background:
    linear-gradient(
      180deg,
      rgba(7, 7, 7, 0.34) 0%,
      rgba(31, 29, 26, 0.20) 15%,
      rgba(43, 40, 36, 0.42) 56%,
      rgba(42, 39, 35, 0.82) 100%
    );
}

/* Very broad reflection on the glass, intentionally almost invisible. */
.manifesto--scroll-rise .manifesto-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 25%,
      rgba(255, 255, 255, 0.035) 39%,
      rgba(255, 255, 255, 0.065) 46%,
      rgba(255, 255, 255, 0.018) 55%,
      transparent 69%,
      transparent 100%
    );

  transform: translate3d(-8%, 0, 0);
  opacity: 0.72;
}

/*
  Subtle depth while the glass passes over the pinned hero.
  The movement itself is entirely controlled by scrolling, not by a timed
  entrance animation.
*/
@supports (animation-timeline: view()) {
  .manifesto--scroll-rise {
    animation: ccPinnedGlassDepth linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }

  @keyframes ccPinnedGlassDepth {
    from {
      background-color: rgba(35, 34, 31, 0.70);

      -webkit-backdrop-filter:
        blur(16px)
        saturate(106%)
        brightness(0.80);
      backdrop-filter:
        blur(16px)
        saturate(106%)
        brightness(0.80);

      box-shadow:
        0 -10px 32px rgba(14, 14, 13, 0.12),
        inset 0 10px 30px rgba(8, 8, 8, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
    }

    to {
      background-color: rgba(42, 39, 35, 0.96);

      -webkit-backdrop-filter:
        blur(30px)
        saturate(112%)
        brightness(0.74);
      backdrop-filter:
        blur(30px)
        saturate(112%)
        brightness(0.74);

      box-shadow:
        0 -28px 72px rgba(14, 14, 13, 0.26),
        0 -6px 18px rgba(14, 14, 13, 0.18),
        inset 0 22px 52px rgba(8, 8, 8, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
  }
}

@media (max-width: 900px) {
  .hero--startup {
    min-height: calc(100svh - 4.15rem);
    padding-bottom: clamp(2.8rem, 7vw, 3.8rem);
  }

  .manifesto--scroll-rise {
    -webkit-backdrop-filter:
      blur(24px)
      saturate(108%)
      brightness(0.74);
    backdrop-filter:
      blur(24px)
      saturate(108%)
      brightness(0.74);
  }

  .manifesto--scroll-rise::before {
    height: 2.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .manifesto--scroll-rise {
    animation: none !important;
  }
}

/* ==========================================================================
   PROJECT STATUS — moved below "Physische Nutzung"
   Same content and animation language, now placed where it belongs.
   ========================================================================== */

.project-status-section {
  position: relative;
  overflow: hidden;

  padding-top: clamp(2.4rem, 4vw, 3.8rem);
  padding-bottom: clamp(5rem, 7vw, 7.25rem);

  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(255, 255, 255, 0.78),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 82%,
      rgba(197, 157, 80, 0.11),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #f8f2e8 0%,
      #f3ece0 52%,
      #eee5d7 100%
    );

  border-top: 1px solid rgba(116, 91, 50, 0.08);
}

.project-status-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(163, 125, 54, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(163, 125, 54, 0.035) 1px,
      transparent 1px
    );

  background-size: 52px 52px;
  opacity: 0.36;

  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.6),
    transparent 82%
  );
  mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.6),
    transparent 82%
  );
}

.project-status-section .container {
  position: relative;
  z-index: 1;
}

.project-status-section .project-status-grid {
  position: relative;
  isolation: isolate;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.5vw, 1.25rem);

  width: 100%;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.project-status-section .project-status-grid::before {
  content: '';
  position: absolute;
  left: 7%;
  right: 7%;
  top: 50%;
  z-index: 0;

  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(151, 114, 44, 0.22) 18%,
    rgba(151, 114, 44, 0.22) 82%,
    transparent
  );
}

.project-status-section .hero-signal-card {
  --card-delay: calc(var(--signal-index) * 110ms);

  position: relative;
  z-index: 1;

  min-height: 185px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;

  padding: clamp(1.3rem, 2.3vw, 1.8rem);

  border: 1px solid rgba(120, 96, 54, 0.17);
  border-radius: 1rem;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.76),
      rgba(244, 237, 224, 0.44)
    );

  box-shadow:
    0 22px 60px rgba(74, 57, 27, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(22px) saturate(115%);
  -webkit-backdrop-filter: blur(22px) saturate(115%);

  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1) var(--card-delay),
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1) var(--card-delay),
    border-color 300ms ease,
    box-shadow 300ms ease;
}

.project-status-section .hero-signal-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 82% 4%,
      rgba(184, 142, 62, 0.16),
      transparent 34%
    );
}

.project-status-section .hero-signal-card::after {
  content: '';
  position: absolute;
  left: -45%;
  top: 0;

  width: 34%;
  height: 100%;

  pointer-events: none;
  transform: skewX(-18deg);

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.52),
    transparent
  );

  animation: heroCardScan 8s ease-in-out infinite;
  animation-delay: calc(var(--signal-index) * 900ms);
}

.project-status-section .hero-signal-card:hover {
  transform: translateY(-7px);
  border-color: rgba(151, 114, 44, 0.38);

  box-shadow:
    0 30px 75px rgba(74, 57, 27, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.project-status-section .stat-value {
  position: relative;
  z-index: 1;

  margin-top: 1.6rem;

  font-family: var(--font-body);
  font-size: clamp(1.35rem, 1.08rem + 0.75vw, 1.9rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #211d17;
}

.project-status-section .stat-label {
  position: relative;
  z-index: 1;

  max-width: 28ch;
  margin-top: 0.65rem;

  font-size: clamp(0.78rem, 0.74rem + 0.15vw, 0.9rem);
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: #777064;
}

.project-status-section .hero-signal-card.is-visible {
  animation:
    ccHeroCardEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1)
    var(--card-delay) both;
}

@media (max-width: 900px) {
  .project-status-section .project-status-grid {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-inline: auto;
  }

  .project-status-section .project-status-grid::before {
    display: none;
  }

  .project-status-section .hero-signal-card {
    min-height: 155px;
  }
}

@media (max-width: 560px) {
  .project-status-section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-status-section .hero-signal-card::after,
  .project-status-section .hero-signal-card.is-visible {
    animation: none !important;
  }
}

/* ==========================================================================
   PROJECT IDENTITY — MAX FUTURISTIC AI GLASS
   Keeps the true pinned-glass scroll behavior and intensifies only section 2.
   ========================================================================== */

/* Make the background artwork substantially more visible behind the glass. */
.manifesto--scroll-rise .manifesto-bg {
  opacity: 0.76;
  mix-blend-mode: normal;
}

.manifesto--scroll-rise .manifesto-bg img {
  opacity: 1;
  transform: scale(1.025);
  filter:
    saturate(0.82)
    contrast(1.04)
    brightness(0.86);

  animation:
    ccAiBackdropDrift 18s
    cubic-bezier(0.45, 0, 0.55, 1)
    infinite alternate;
}

/*
  Lighter smoked-glass depth:
  the image remains clearly recognizable without compromising text contrast.
*/
.manifesto--scroll-rise .manifesto-bg::after {
  z-index: 1;

  background:
    radial-gradient(
      circle at 76% 24%,
      rgba(220, 178, 91, 0.08),
      transparent 31%
    ),
    linear-gradient(
      90deg,
      rgba(18, 18, 17, 0.44) 0%,
      rgba(28, 27, 25, 0.20) 38%,
      rgba(35, 33, 30, 0.12) 62%,
      rgba(18, 18, 17, 0.36) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.20) 0%,
      rgba(24, 23, 21, 0.16) 26%,
      rgba(37, 35, 32, 0.48) 76%,
      rgba(37, 35, 32, 0.72) 100%
    );
}

/*
  AI network layer:
  fine micro-grid, asymmetric gold signal paths, and small luminous nodes.
*/
.manifesto--scroll-rise .manifesto-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;

  pointer-events: none;
  opacity: 0.78;

  background:
    /* signal nodes */
    radial-gradient(
      circle at 12% 31%,
      rgba(255, 249, 226, 0.98) 0 1px,
      rgba(222, 174, 78, 0.82) 2px,
      rgba(197, 143, 46, 0.24) 4px,
      transparent 10px
    ),
    radial-gradient(
      circle at 34% 67%,
      rgba(255, 249, 226, 0.94) 0 1px,
      rgba(222, 174, 78, 0.72) 2px,
      rgba(197, 143, 46, 0.18) 4px,
      transparent 10px
    ),
    radial-gradient(
      circle at 61% 24%,
      rgba(255, 249, 226, 0.96) 0 1px,
      rgba(222, 174, 78, 0.78) 2px,
      rgba(197, 143, 46, 0.20) 4px,
      transparent 11px
    ),
    radial-gradient(
      circle at 86% 61%,
      rgba(255, 249, 226, 0.92) 0 1px,
      rgba(222, 174, 78, 0.70) 2px,
      rgba(197, 143, 46, 0.18) 4px,
      transparent 10px
    ),

    /* asymmetric connector paths */
    linear-gradient(
      24deg,
      transparent 49.72%,
      rgba(203, 157, 69, 0.30) 49.84%,
      rgba(244, 216, 153, 0.52) 50%,
      rgba(203, 157, 69, 0.26) 50.16%,
      transparent 50.28%
    ) 7% 16% / 35% 42% no-repeat,

    linear-gradient(
      -17deg,
      transparent 49.74%,
      rgba(203, 157, 69, 0.24) 49.86%,
      rgba(241, 211, 144, 0.44) 50%,
      rgba(203, 157, 69, 0.22) 50.14%,
      transparent 50.26%
    ) 30% 20% / 37% 47% no-repeat,

    linear-gradient(
      28deg,
      transparent 49.76%,
      rgba(203, 157, 69, 0.22) 49.88%,
      rgba(241, 211, 144, 0.42) 50%,
      rgba(203, 157, 69, 0.20) 50.12%,
      transparent 50.24%
    ) 56% 19% / 33% 48% no-repeat,

    linear-gradient(
      90deg,
      transparent 0%,
      rgba(199, 151, 58, 0.20) 18%,
      rgba(239, 207, 139, 0.46) 52%,
      rgba(199, 151, 58, 0.18) 82%,
      transparent 100%
    ) 12% 68% / 76% 1px no-repeat,

    /* micro-grid */
    linear-gradient(
      rgba(235, 220, 190, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(235, 220, 190, 0.045) 1px,
      transparent 1px
    );

  background-size:
    auto,
    auto,
    auto,
    auto,
    35% 42%,
    37% 47%,
    33% 48%,
    76% 1px,
    46px 46px,
    46px 46px;

  -webkit-mask-image:
    linear-gradient(
      110deg,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.78) 58%,
      rgba(0, 0, 0, 0.38) 100%
    );
  mask-image:
    linear-gradient(
      110deg,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.78) 58%,
      rgba(0, 0, 0, 0.38) 100%
    );

  animation:
    ccAiNetworkBreathe 7.5s ease-in-out infinite alternate,
    ccAiGridDrift 22s linear infinite;
}

/* Preserve the glass edge while adding a tiny gold data signal. */
.manifesto--scroll-rise::after {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.015),
      rgba(255, 255, 255, 0.18) 18%,
      rgba(228, 191, 113, 0.34) 42%,
      rgba(255, 250, 237, 0.62) 50%,
      rgba(228, 191, 113, 0.34) 58%,
      rgba(255, 255, 255, 0.18) 82%,
      rgba(255, 255, 255, 0.015)
    );

  box-shadow:
    0 0 12px rgba(238, 229, 207, 0.12),
    0 0 28px rgba(205, 158, 67, 0.10);
}

/* Content remains above the technical overlays. */
.manifesto--scroll-rise .container {
  position: relative;
}

.manifesto--scroll-rise .manifesto-grid,
.manifesto--scroll-rise .pillars {
  position: relative;
  z-index: 3;
}

/*
  Large, restrained AI orbital HUD on the upper-right.
  Faint enough to feel architectural rather than decorative.
*/
.manifesto--scroll-rise .container::before {
  content: '';
  position: absolute;
  z-index: 1;

  top: clamp(-2rem, -1vw, -0.5rem);
  right: clamp(-7rem, -5vw, -3rem);

  width: clamp(15rem, 27vw, 27rem);
  aspect-ratio: 1;

  pointer-events: none;
  opacity: 0.46;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      transparent 0 23%,
      rgba(230, 198, 130, 0.12) 23.3% 23.6%,
      transparent 23.9% 37%,
      rgba(230, 198, 130, 0.17) 37.3% 37.6%,
      transparent 37.9% 49%,
      rgba(230, 198, 130, 0.10) 49.3% 49.6%,
      transparent 49.9%
    ),
    conic-gradient(
      from 18deg,
      transparent 0 12%,
      rgba(225, 184, 99, 0.32) 12.2% 13.2%,
      transparent 13.4% 31%,
      rgba(245, 220, 164, 0.42) 31.2% 32%,
      transparent 32.2% 56%,
      rgba(213, 166, 75, 0.25) 56.2% 57.4%,
      transparent 57.6% 83%,
      rgba(241, 211, 145, 0.34) 83.2% 84%,
      transparent 84.2% 100%
    );

  filter:
    drop-shadow(0 0 16px rgba(214, 167, 75, 0.12));

  -webkit-mask-image:
    radial-gradient(
      circle,
      transparent 0 18%,
      #000 19% 52%,
      transparent 68%
    );
  mask-image:
    radial-gradient(
      circle,
      transparent 0 18%,
      #000 19% 52%,
      transparent 68%
    );

  animation:
    ccAiOrbitRotate 26s linear infinite;
}

/* Minimal vertical data rail on the far right. */
.manifesto--scroll-rise .container::after {
  content: '';
  position: absolute;
  z-index: 2;

  right: clamp(0.25rem, 1.5vw, 1.4rem);
  top: 17%;
  bottom: 24%;

  width: 1px;

  pointer-events: none;
  opacity: 0.58;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(224, 184, 101, 0.48) 18%,
      rgba(244, 217, 157, 0.72) 50%,
      rgba(224, 184, 101, 0.30) 82%,
      transparent
    );

  box-shadow:
    0 0 9px rgba(221, 176, 85, 0.22),
    7px 38px 0 -0.2px rgba(230, 199, 137, 0.42),
    -5px 93px 0 -0.2px rgba(230, 199, 137, 0.34),
    8px 151px 0 -0.2px rgba(230, 199, 137, 0.30);

  animation:
    ccAiRailPulse 4.6s ease-in-out infinite alternate;
}

/* Metallic AI text accent remains alive, but slow and expensive. */
.manifesto--scroll-rise .manifesto-quote span {
  background-size: 220% auto;

  animation:
    ccAiMetalText 8s ease-in-out infinite alternate;
}

/* Refined technical section label. */
.manifesto--scroll-rise .section-label::before {
  animation:
    ccAiNodePulse 2.8s ease-in-out infinite;
}

.manifesto--scroll-rise .section-label::after {
  background-size: 220% 100%;

  animation:
    ccAiSignalLine 4.8s ease-in-out infinite;
}

/* Connect the three AI principles as one system. */
.manifesto--scroll-rise .pillars::before {
  content: '';
  position: absolute;
  left: 5%;
  right: 5%;
  top: 50%;
  z-index: 0;

  height: 1px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(199, 151, 58, 0.20) 12%,
      rgba(239, 207, 139, 0.42) 50%,
      rgba(199, 151, 58, 0.20) 88%,
      transparent
    );

  box-shadow:
    0 0 10px rgba(216, 169, 76, 0.12);
}

/* Cards become compact AI interface modules. */
.manifesto--scroll-rise .pillar-card {
  position: relative;
  z-index: 1;

  min-height: 240px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.105),
      rgba(255, 255, 255, 0.024)
    ),
    rgba(27, 27, 25, 0.44);

  border-color: rgba(237, 225, 200, 0.19);

  box-shadow:
    0 26px 64px rgba(8, 8, 7, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(191, 143, 49, 0.08);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(112%);
  backdrop-filter:
    blur(22px)
    saturate(112%);
}

/* Gold node and compact circuitry inside every module. */
.manifesto--scroll-rise .pillar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(255, 247, 220, 0.96) 0 1px,
      rgba(222, 174, 78, 0.70) 2px,
      rgba(197, 143, 46, 0.18) 5px,
      transparent 14px
    ),
    linear-gradient(
      90deg,
      transparent,
      rgba(222, 183, 103, 0.28),
      transparent
    ) 100% 12% / 38% 1px no-repeat,
    linear-gradient(
      180deg,
      transparent,
      rgba(222, 183, 103, 0.22),
      transparent
    ) 88% 0 / 1px 44% no-repeat,
    radial-gradient(
      circle at 88% 12%,
      rgba(230, 197, 127, 0.10),
      transparent 34%
    );
}

/* Slow data scan through each module. */
.manifesto--scroll-rise .pillar-card::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -42%;
  z-index: 0;

  width: 22%;

  pointer-events: none;
  opacity: 0;

  transform: skewX(-17deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 247, 226, 0.11),
      rgba(225, 184, 96, 0.12),
      transparent
    );

  animation:
    ccAiModuleScan 9s ease-in-out infinite;
}

.manifesto--scroll-rise .pillar-card:nth-child(2)::after {
  animation-delay: 1.4s;
}

.manifesto--scroll-rise .pillar-card:nth-child(3)::after {
  animation-delay: 2.8s;
}

.manifesto--scroll-rise .pillar-card:hover {
  transform: translateY(-7px);

  border-color: rgba(230, 201, 141, 0.36);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.032)
    ),
    rgba(30, 29, 27, 0.52);

  box-shadow:
    0 34px 80px rgba(8, 8, 7, 0.24),
    0 0 0 1px rgba(214, 173, 91, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

/* Icons read as compact AI nodes rather than generic illustrations. */
.manifesto--scroll-rise .pillar-icon {
  width: 42px;
  height: 42px;
  padding: 10px;

  border: 1px solid rgba(230, 199, 135, 0.26);
  border-radius: 50%;

  color: #e4c98f;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.025) 52%,
      transparent 72%
    );

  box-shadow:
    0 0 0 5px rgba(224, 184, 101, 0.035),
    0 0 18px rgba(218, 171, 78, 0.16);

  animation:
    ccAiIconBreathe 4.2s ease-in-out infinite alternate;
}

/* Keep text comfortably readable above the new effects. */
.manifesto--scroll-rise .pillar-card h3,
.manifesto--scroll-rise .pillar-card p,
.manifesto--scroll-rise .pillar-icon {
  position: relative;
  z-index: 2;
}

@keyframes ccAiBackdropDrift {
  from {
    transform: scale(1.025) translate3d(-0.4%, -0.2%, 0);
  }

  to {
    transform: scale(1.055) translate3d(0.6%, 0.35%, 0);
  }
}

@keyframes ccAiNetworkBreathe {
  from {
    opacity: 0.58;
    filter: brightness(0.92);
  }

  to {
    opacity: 0.88;
    filter: brightness(1.12);
  }
}

@keyframes ccAiGridDrift {
  from {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      7% 16%,
      30% 20%,
      56% 19%,
      12% 68%,
      0 0,
      0 0;
  }

  to {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      8.5% 17.5%,
      31.2% 18.8%,
      54.5% 20.5%,
      13% 68%,
      46px 23px,
      23px 46px;
  }
}

@keyframes ccAiOrbitRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ccAiRailPulse {
  from {
    opacity: 0.34;
    filter: brightness(0.84);
  }

  to {
    opacity: 0.72;
    filter: brightness(1.18);
  }
}

@keyframes ccAiMetalText {
  from {
    background-position: 0% center;
  }

  to {
    background-position: 100% center;
  }
}

@keyframes ccAiNodePulse {
  0%,
  100% {
    transform: scale(0.92);
    box-shadow:
      0 0 0 1px rgba(255, 250, 235, 0.32),
      0 0 8px rgba(221, 179, 87, 0.44),
      0 0 18px rgba(221, 179, 87, 0.16);
  }

  50% {
    transform: scale(1.12);
    box-shadow:
      0 0 0 1px rgba(255, 250, 235, 0.48),
      0 0 13px rgba(221, 179, 87, 0.74),
      0 0 30px rgba(221, 179, 87, 0.28);
  }
}

@keyframes ccAiSignalLine {
  0%,
  100% {
    background-position: 0% center;
    opacity: 0.58;
  }

  50% {
    background-position: 100% center;
    opacity: 1;
  }
}

@keyframes ccAiModuleScan {
  0%,
  18% {
    left: -42%;
    opacity: 0;
  }

  34% {
    opacity: 0.76;
  }

  58% {
    left: 128%;
    opacity: 0;
  }

  100% {
    left: 128%;
    opacity: 0;
  }
}

@keyframes ccAiIconBreathe {
  from {
    transform: translateY(0) scale(0.98);
    filter: drop-shadow(0 0 7px rgba(215, 177, 96, 0.18));
  }

  to {
    transform: translateY(-2px) scale(1.02);
    filter: drop-shadow(0 0 13px rgba(215, 177, 96, 0.32));
  }
}

@media (max-width: 900px) {
  .manifesto--scroll-rise .manifesto-bg {
    opacity: 0.68;
  }

  .manifesto--scroll-rise .manifesto-bg::before {
    opacity: 0.54;
    background-size:
      auto,
      auto,
      auto,
      auto,
      48% 36%,
      50% 41%,
      46% 40%,
      88% 1px,
      42px 42px,
      42px 42px;
  }

  .manifesto--scroll-rise .container::before {
    width: 19rem;
    right: -9rem;
    opacity: 0.30;
  }

  .manifesto--scroll-rise .container::after {
    display: none;
  }

  .manifesto--scroll-rise .pillars::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .manifesto--scroll-rise .manifesto-bg img,
  .manifesto--scroll-rise .manifesto-bg::before,
  .manifesto--scroll-rise .container::before,
  .manifesto--scroll-rise .container::after,
  .manifesto--scroll-rise .manifesto-quote span,
  .manifesto--scroll-rise .section-label::before,
  .manifesto--scroll-rise .section-label::after,
  .manifesto--scroll-rise .pillar-card::after,
  .manifesto--scroll-rise .pillar-icon {
    animation: none !important;
  }
}

/* ==========================================================================
   PHYSICAL INTEGRATION + PROJECT STATUS
   One bespoke premium system module — no stacked template cards.
   ========================================================================== */

.physical-system-section {
  position: relative;
  z-index: 4;
  overflow: hidden;

  padding:
    clamp(5.5rem, 8vw, 8.5rem)
    0
    clamp(6rem, 9vw, 9.5rem);

  background:
    radial-gradient(
      circle at 9% 12%,
      rgba(255, 255, 255, 0.82),
      transparent 29%
    ),
    radial-gradient(
      circle at 91% 80%,
      rgba(189, 148, 70, 0.12),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #eee7dc 0%,
      #e8dfd1 58%,
      #e4d9c9 100%
    );
}

.physical-system-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(
      rgba(132, 104, 55, 0.032) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(132, 104, 55, 0.032) 1px,
      transparent 1px
    );

  background-size: 52px 52px;
  opacity: 0.58;

  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.78) 20%,
      rgba(0, 0, 0, 0.48) 82%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.78) 20%,
      rgba(0, 0, 0, 0.48) 82%,
      transparent 100%
    );
}

.physical-system-section .container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
}

.physical-system-shell {
  position: relative;
  isolation: isolate;

  width: 100%;
  overflow: hidden;

  border: 1px solid rgba(105, 83, 48, 0.17);
  border-radius: 1.7rem;

  background:
    linear-gradient(
      142deg,
      rgba(255, 255, 255, 0.72),
      rgba(247, 241, 231, 0.42) 48%,
      rgba(231, 221, 205, 0.52) 100%
    );

  box-shadow:
    0 42px 100px -58px rgba(66, 49, 24, 0.44),
    0 18px 46px -34px rgba(66, 49, 24, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);

  -webkit-backdrop-filter:
    blur(28px)
    saturate(112%);
  backdrop-filter:
    blur(28px)
    saturate(112%);
}

.physical-system-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 18% 16%,
      rgba(255, 255, 255, 0.76),
      transparent 28%
    ),
    radial-gradient(
      circle at 82% 84%,
      rgba(194, 150, 67, 0.13),
      transparent 32%
    ),
    linear-gradient(
      118deg,
      transparent 0%,
      transparent 34%,
      rgba(255, 255, 255, 0.17) 44%,
      transparent 54%,
      transparent 100%
    );
}

.physical-system-shell::after {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  top: 0;
  z-index: 3;

  height: 1px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(207, 169, 97, 0.30) 24%,
      rgba(255, 248, 231, 0.78) 50%,
      rgba(207, 169, 97, 0.30) 76%,
      transparent
    );

  box-shadow:
    0 0 18px rgba(205, 163, 81, 0.15);
}

/* --------------------------------------------------------------------------
   Upper physical-integration area
   -------------------------------------------------------------------------- */

.physical-system-top {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns:
    minmax(0, 1.28fr)
    minmax(340px, 0.72fr);

  min-height: 430px;
}

.physical-system-copy {
  position: relative;
  z-index: 2;

  align-self: center;

  padding:
    clamp(2.7rem, 5vw, 5rem)
    clamp(2.3rem, 4.5vw, 4.7rem);
}

.physical-system-copy::after {
  content: '';
  position: absolute;
  right: 0;
  top: 14%;
  bottom: 14%;

  width: 1px;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(119, 94, 51, 0.19) 18%,
      rgba(119, 94, 51, 0.19) 82%,
      transparent
    );
}

.physical-system-label {
  margin-bottom: 1.35rem;

  color: #867b69;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
}

.physical-system-label::before {
  width: 34px;
  background: #aa936b;
}

.physical-system-copy h2 {
  max-width: 20ch;
  margin: 0 0 1.35rem;

  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.25vw, 3.75rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.038em;
  color: #28241e;
}

.physical-system-copy > p {
  max-width: 63ch;

  color: #625b51;
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.13rem);
  line-height: 1.76;
}

.physical-system-cues {
  gap: 0.55rem;
  margin-top: 1.7rem;
}

.physical-system-cues span {
  position: relative;

  min-height: 31px;
  padding: 0 0.9rem 0 1.55rem;

  border: 1px solid rgba(113, 89, 48, 0.16);
  border-radius: 0.42rem;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.58),
      rgba(244, 237, 226, 0.38)
    );

  color: #524b41;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.025em;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.physical-system-cues span::before {
  content: '';
  position: absolute;
  left: 0.72rem;
  top: 50%;

  width: 4px;
  height: 4px;
  border-radius: 50%;

  transform: translateY(-50%);

  background: #a77f32;

  box-shadow:
    0 0 8px rgba(167, 127, 50, 0.46);
}

.physical-system-cta {
  margin-top: 2rem;

  min-height: 46px;
  padding: 0.78rem 1.2rem;

  border-color: rgba(102, 79, 43, 0.20);
  border-radius: 0.55rem;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.66),
      rgba(238, 229, 215, 0.50)
    );

  color: #312b23;

  box-shadow:
    0 14px 34px -24px rgba(64, 46, 20, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.physical-system-cta:hover {
  border-color: rgba(151, 114, 44, 0.42);
  color: #7a5b22;

  transform: translateY(-2px);

  box-shadow:
    0 20px 42px -24px rgba(64, 46, 20, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

/* --------------------------------------------------------------------------
   Integrated media — full architectural column, not a nested card
   -------------------------------------------------------------------------- */

.physical-system-media {
  position: relative;
  min-width: 0;
  min-height: 430px;
  overflow: hidden;

  margin: 0;

  background: #38332d;
}

.physical-system-media::before,
.physical-system-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.physical-system-media::before {
  background:
    linear-gradient(
      118deg,
      rgba(255, 255, 255, 0.14),
      transparent 31%
    ),
    linear-gradient(
      90deg,
      rgba(26, 23, 20, 0.16),
      transparent 28%
    );
}

.physical-system-media::after {
  background:
    linear-gradient(
      rgba(239, 214, 163, 0.052) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(239, 214, 163, 0.052) 1px,
      transparent 1px
    ),
    linear-gradient(
      180deg,
      transparent 38%,
      rgba(20, 17, 13, 0.72) 100%
    );

  background-size:
    38px 38px,
    38px 38px,
    100% 100%;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.48),
      rgba(0, 0, 0, 0.92)
    );
  mask-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.48),
      rgba(0, 0, 0, 0.92)
    );
}

.physical-system-media img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  object-position: center;

  transform: scale(1.035);

  filter:
    saturate(0.74)
    contrast(0.98)
    brightness(0.92);

  transition:
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s ease;
}

.physical-system-shell:hover .physical-system-media img {
  transform: scale(1.065);

  filter:
    saturate(0.84)
    contrast(1)
    brightness(0.96);
}

.physical-system-media-ui {
  position: absolute;
  inset: 0;
  z-index: 2;

  pointer-events: none;
}

.physical-system-media-code {
  position: absolute;
  left: 1.45rem;
  right: 4rem;
  bottom: 1.35rem;

  color: rgba(255, 245, 222, 0.84);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 0.58rem;
  line-height: 1.55;
  letter-spacing: 0.15em;
  text-transform: uppercase;

  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.46);
}

.physical-system-media-node {
  position: absolute;
  right: 1.45rem;
  bottom: 1.55rem;

  width: 7px;
  height: 7px;
  border-radius: 50%;

  background: #d0a64d;

  box-shadow:
    0 0 0 1px rgba(255, 245, 218, 0.34),
    0 0 13px rgba(219, 171, 71, 0.72),
    0 0 28px rgba(219, 171, 71, 0.28);

  animation:
    physicalSystemNodePulse 2.8s ease-in-out infinite;
}

.physical-system-media-ui::before {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  top: 14%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(229, 194, 121, 0.36),
      transparent
    );

  box-shadow:
    0 0 9px rgba(214, 164, 68, 0.18);
}

.physical-system-media-ui::after {
  content: '';
  position: absolute;
  right: 12%;
  top: 14%;
  bottom: 16%;

  width: 1px;

  background:
    linear-gradient(
      180deg,
      rgba(230, 195, 125, 0.36),
      transparent 46%,
      rgba(230, 195, 125, 0.20)
    );
}

/* --------------------------------------------------------------------------
   Bottom project-status rail — one integrated system, no separate cards
   -------------------------------------------------------------------------- */

.physical-system-status {
  position: relative;
  z-index: 2;

  border-top: 1px solid rgba(109, 85, 46, 0.15);

  background:
    linear-gradient(
      180deg,
      rgba(210, 198, 179, 0.24),
      rgba(255, 255, 255, 0.22)
    );
}

.physical-system-status::before {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  top: -1px;

  height: 1px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(191, 146, 62, 0.26) 22%,
      rgba(248, 227, 183, 0.56) 50%,
      rgba(191, 146, 62, 0.26) 78%,
      transparent
    );
}

.physical-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;

  margin: 0;
  padding: 0;

  border: 0;
}

.physical-status-grid::before {
  display: none;
}

.physical-system-shell .physical-status-item {
  --card-delay: calc(var(--signal-index) * 120ms);

  position: relative;

  min-height: 190px;
  padding:
    clamp(1.65rem, 2.6vw, 2.35rem)
    clamp(1.45rem, 2.4vw, 2.2rem);

  border: 0;
  border-right: 1px solid rgba(109, 85, 46, 0.13);
  border-radius: 0;

  background: transparent;

  box-shadow: none;

  -webkit-backdrop-filter: none;
  backdrop-filter: none;

  transition:
    background 280ms ease,
    transform 280ms ease,
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1) var(--card-delay);
}

.physical-system-shell .physical-status-item:last-child {
  border-right: 0;
}

.physical-system-shell .physical-status-item::before {
  content: '';
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 84% 18%,
      rgba(187, 142, 58, 0.12),
      transparent 32%
    );
}

.physical-system-shell .physical-status-item::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -34%;

  width: 18%;

  pointer-events: none;
  opacity: 0;

  transform: skewX(-16deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.36),
      rgba(221, 180, 94, 0.12),
      transparent
    );

  animation:
    physicalSystemStatusScan 8.5s ease-in-out infinite;

  animation-delay:
    calc(var(--signal-index) * 1.1s);
}

.physical-system-shell .physical-status-item:hover {
  transform: none;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.24),
      rgba(255, 255, 255, 0.07)
    );

  box-shadow: none;
}

.physical-system-shell .physical-status-item .hero-signal-head {
  position: relative;
  z-index: 2;
}

.physical-system-shell .physical-status-item .hero-signal-number {
  color: rgba(61, 52, 38, 0.52);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
}

.physical-system-shell .physical-status-item .hero-signal-dot {
  background: #a97f2e;

  box-shadow:
    0 0 10px rgba(169, 127, 46, 0.50);
}

.physical-system-shell .physical-status-item .hero-signal-pulse {
  border-color: rgba(169, 127, 46, 0.55);
}

.physical-system-shell .physical-status-item .stat-value {
  position: relative;
  z-index: 2;

  margin-top: 1.45rem;

  font-family: var(--font-body);
  font-size: clamp(1.35rem, 1.12rem + 0.7vw, 1.85rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.038em;
  color: #27231d;
}

.physical-system-shell .physical-status-item .stat-label {
  position: relative;
  z-index: 2;

  max-width: 30ch;
  margin-top: 0.65rem;

  color: #71695e;
  font-size: 0.84rem;
  line-height: 1.5;
}

.physical-system-shell .physical-status-item .hero-signal-line {
  position: relative;
  z-index: 2;

  height: 1px;
  margin-top: 1.55rem;

  border-radius: 0;

  background:
    linear-gradient(
      90deg,
      rgba(135, 102, 44, 0.10),
      rgba(135, 102, 44, 0.18),
      rgba(135, 102, 44, 0.08)
    );
}

.physical-system-shell .physical-status-item .hero-signal-line span {
  width: 34%;

  border-radius: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(185, 137, 48, 0.92),
      rgba(246, 220, 164, 0.96),
      transparent
    );

  box-shadow:
    0 0 8px rgba(192, 143, 52, 0.24);
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@keyframes physicalSystemNodePulse {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.72;
  }

  50% {
    transform: scale(1.16);
    opacity: 1;
  }
}

@keyframes physicalSystemStatusScan {
  0%,
  22% {
    left: -34%;
    opacity: 0;
  }

  38% {
    opacity: 0.62;
  }

  62% {
    left: 118%;
    opacity: 0;
  }

  100% {
    left: 118%;
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .physical-system-top {
    grid-template-columns: 1fr;
  }

  .physical-system-copy::after {
    display: none;
  }

  .physical-system-media {
    min-height: 330px;
    border-top: 1px solid rgba(109, 85, 46, 0.14);
  }

  .physical-system-media img {
    min-height: 330px;
  }
}

@media (max-width: 760px) {
  .physical-system-section {
    padding:
      var(--space-16)
      0
      var(--space-20);
  }

  .physical-system-shell {
    border-radius: 1.15rem;
  }

  .physical-system-copy {
    padding:
      2.2rem
      clamp(1.25rem, 6vw, 2rem);
  }

  .physical-system-copy h2 {
    font-size: clamp(2rem, 9vw, 2.85rem);
  }

  .physical-system-cues span {
    white-space: normal;
  }

  .physical-system-media,
  .physical-system-media img {
    min-height: 245px;
  }

  .physical-status-grid {
    grid-template-columns: 1fr;
  }

  .physical-system-shell .physical-status-item {
    min-height: 150px;

    border-right: 0;
    border-bottom: 1px solid rgba(109, 85, 46, 0.13);
  }

  .physical-system-shell .physical-status-item:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .physical-system-media-node,
  .physical-system-shell .physical-status-item::after {
    animation: none !important;
  }
}

/* ==========================================================================
   PHYSICAL SYSTEM — LANDSCAPE MEDIA STRIP
   Full-width horizontal image between the copy area and the status modules.
   ========================================================================== */

/* Stack the unified module vertically: copy → panoramic media → status rail. */
.physical-system-top {
  display: block;
  min-height: 0;
}

/* The copy area now uses the full width of the upper module. */
.physical-system-copy {
  width: 100%;
  max-width: none;

  padding:
    clamp(2.8rem, 4.8vw, 4.8rem)
    clamp(2.3rem, 4.8vw, 5rem)
    clamp(2.4rem, 4vw, 3.8rem);
}

.physical-system-copy::after {
  display: none;
}

.physical-system-copy h2 {
  max-width: 22ch;
}

.physical-system-copy > p {
  max-width: 76ch;
}

/*
  Wide cinematic strip:
  no portrait card, no separate container feeling.
  It runs edge-to-edge across the entire system module.
*/
.physical-system-media {
  width: 100%;
  min-height: 0;
  height: clamp(220px, 21vw, 310px);

  border-top: 1px solid rgba(107, 84, 45, 0.15);
  border-bottom: 1px solid rgba(107, 84, 45, 0.15);

  background: #302c27;
}

.physical-system-media img {
  width: 100%;
  height: 100%;
  min-height: 0;

  object-fit: cover;
  object-position: center 48%;

  transform: scale(1.018);

  filter:
    saturate(0.78)
    contrast(1.01)
    brightness(0.90);
}

.physical-system-shell:hover .physical-system-media img {
  transform: scale(1.038);

  filter:
    saturate(0.88)
    contrast(1.02)
    brightness(0.95);
}

/* Cleaner horizontal light architecture across the panoramic image. */
.physical-system-media::before {
  background:
    linear-gradient(
      90deg,
      rgba(22, 20, 17, 0.24) 0%,
      transparent 18%,
      transparent 82%,
      rgba(22, 20, 17, 0.18) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.10),
      transparent 28%,
      transparent 72%,
      rgba(14, 12, 10, 0.26)
    );
}

.physical-system-media::after {
  background:
    linear-gradient(
      rgba(239, 214, 163, 0.052) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(239, 214, 163, 0.052) 1px,
      transparent 1px
    ),
    linear-gradient(
      180deg,
      transparent 44%,
      rgba(17, 14, 11, 0.60) 100%
    );

  background-size:
    42px 42px,
    42px 42px,
    100% 100%;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.76),
      rgba(0, 0, 0, 0.96) 50%,
      rgba(0, 0, 0, 0.76)
    );
  mask-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.76),
      rgba(0, 0, 0, 0.96) 50%,
      rgba(0, 0, 0, 0.76)
    );
}

/* Reposition the technical caption for the horizontal composition. */
.physical-system-media-code {
  left: clamp(1.4rem, 3vw, 3rem);
  right: clamp(5rem, 9vw, 8rem);
  bottom: clamp(1rem, 2vw, 1.6rem);

  max-width: 72ch;
}

.physical-system-media-node {
  right: clamp(1.4rem, 3vw, 3rem);
  bottom: clamp(1.1rem, 2vw, 1.7rem);
}

.physical-system-media-ui::before {
  left: 7%;
  right: 7%;
  top: 16%;
}

.physical-system-media-ui::after {
  right: 7%;
  top: 16%;
  bottom: 18%;
}

/* The status rail now sits directly under the panoramic image. */
.physical-system-status {
  border-top: 0;
}

/* Slightly more compact cells so the lower system line feels lighter. */
.physical-system-shell .physical-status-item {
  min-height: 168px;

  padding:
    clamp(1.45rem, 2.2vw, 2rem)
    clamp(1.35rem, 2.2vw, 2rem);
}

.physical-system-shell .physical-status-item .stat-value {
  margin-top: 1.2rem;
}

.physical-system-shell .physical-status-item .hero-signal-line {
  margin-top: 1.3rem;
}

@media (max-width: 980px) {
  .physical-system-copy {
    padding:
      2.5rem
      clamp(1.6rem, 5vw, 3rem)
      2.2rem;
  }

  .physical-system-media {
    height: clamp(210px, 34vw, 290px);
  }

  .physical-system-media img {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .physical-system-copy {
    padding:
      2.15rem
      clamp(1.25rem, 6vw, 2rem)
      1.9rem;
  }

  .physical-system-media {
    height: clamp(190px, 52vw, 245px);
  }

  .physical-system-media,
  .physical-system-media img {
    min-height: 0;
  }

  .physical-system-media-code {
    left: 1.1rem;
    right: 3.8rem;
    bottom: 0.9rem;

    font-size: 0.52rem;
  }

  .physical-system-media-node {
    right: 1.1rem;
    bottom: 1rem;
  }
}

/* ==========================================================================
   PHYSICAL SYSTEM — HEADLINE TYPOGRAPHY
   Match the main hero headline typography.
   ========================================================================== */

.physical-system-copy h2 {
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

/* ==========================================================================
   CONNECTCIRCUIT — HOMEPAGE COLOR MASTER
   One coherent palette: warm pearl, platinum taupe, graphite glass,
   restrained champagne gold. Layout and motion remain unchanged.
   ========================================================================== */

:root {
  --cc-pearl-0: #f6f1e9;
  --cc-pearl-1: #ebe3d7;
  --cc-pearl-2: #ddd2c2;
  --cc-pearl-3: #cec1ae;

  --cc-platinum: #aaa08f;
  --cc-platinum-dark: #82796b;

  --cc-ink: #282521;
  --cc-ink-soft: #454039;
  --cc-muted: #6f685f;
  --cc-muted-light: #aaa297;

  --cc-graphite-0: #383936;
  --cc-graphite-1: #2d2e2b;
  --cc-graphite-2: #232421;
  --cc-graphite-3: #1b1c1a;

  --cc-gold-deep: #8d682b;
  --cc-gold: #b48b45;
  --cc-gold-soft: #cfad69;
  --cc-gold-light: #e5cb91;

  --cc-light-border: rgba(103, 82, 48, 0.16);
  --cc-dark-border: rgba(239, 229, 209, 0.16);
}

/* --------------------------------------------------------------------------
   Global surface continuity
   -------------------------------------------------------------------------- */

body {
  color: var(--cc-ink);
  background: var(--cc-pearl-2);
}

::selection {
  color: var(--cc-ink);
  background: rgba(205, 173, 105, 0.34);
}

:focus-visible {
  outline-color: var(--cc-gold-soft);
}

/* --------------------------------------------------------------------------
   Header — warm platinum glass
   -------------------------------------------------------------------------- */

.header {
  background:
    linear-gradient(
      180deg,
      rgba(237, 230, 218, 0.94),
      rgba(226, 217, 202, 0.88)
    );

  border-bottom-color: rgba(93, 75, 48, 0.12);

  box-shadow:
    0 10px 32px rgba(52, 45, 36, 0.045),
    inset 0 -1px 0 rgba(255, 255, 255, 0.34);

  backdrop-filter: blur(24px) saturate(108%);
  -webkit-backdrop-filter: blur(24px) saturate(108%);
}

.brand {
  color: var(--cc-ink);
}

.brand-mark,
.footer-brand-mark {
  color: #a69a87;

  filter:
    drop-shadow(0 0 8px rgba(221, 190, 126, 0.18));
}

.brand-sub,
.nav-links a {
  color: #716a60;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--cc-ink);
}

.language-switcher {
  border-color: rgba(94, 75, 46, 0.14);

  background:
    rgba(246, 240, 230, 0.58);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.language-switcher a {
  color: #746c61;
}

.language-switcher a.active,
.language-switcher a[aria-current='page'] {
  color: #25221e;

  background:
    radial-gradient(
      circle at 32% 24%,
      rgba(255, 255, 255, 0.42),
      transparent 44%
    ),
    linear-gradient(
      135deg,
      #c3b7a4,
      #aa9d87
    );

  box-shadow:
    0 5px 14px rgba(70, 55, 34, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.nav-cta {
  color: #27231e;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.28),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #c3b7a3 0%,
      #aa9d87 54%,
      #d0c4b0 100%
    );

  border-color: rgba(255, 255, 255, 0.34);

  box-shadow:
    0 12px 28px rgba(66, 51, 29, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

.nav-cta:hover {
  color: #201d19;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.36),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #cfc3af 0%,
      #b3a58e 54%,
      #d9cebc 100%
    );

  box-shadow:
    0 16px 36px rgba(66, 51, 29, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

/* --------------------------------------------------------------------------
   Hero — warm pearl + metallic gold network
   -------------------------------------------------------------------------- */

.hero--startup {
  color: var(--cc-ink);
  background: var(--cc-pearl-2);
}

.hero--startup .hero-bg {
  opacity: 0.88;
}

.hero--startup .hero-bg img {
  filter:
    saturate(0.70)
    contrast(0.93)
    brightness(1.045);
}

.hero--startup .hero-bg::before {
  background:
    linear-gradient(
      90deg,
      rgba(226, 218, 205, 0.98) 0%,
      rgba(214, 203, 186, 0.92) 42%,
      rgba(195, 181, 160, 0.63) 72%,
      rgba(137, 127, 115, 0.32) 100%
    );
}

.hero--startup::before {
  opacity: 0.28;

  background-image:
    linear-gradient(
      rgba(122, 94, 45, 0.050) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(122, 94, 45, 0.050) 1px,
      transparent 1px
    );
}

.hero--startup::after {
  background:
    radial-gradient(
      circle,
      rgba(190, 146, 63, 0.17) 0%,
      rgba(190, 146, 63, 0.065) 38%,
      transparent 68%
    );
}

.hero--startup .hero-title {
  color: #2a2723;
}

.hero--startup .hero-title em {
  background:
    linear-gradient(
      108deg,
      #fffaf0 0%,
      #f8f1e6 18%,
      #eee9e1 36%,
      #e4ddd3 54%,
      #d1c8bc 69%,
      #fbf5ec 84%,
      #fffaf2 100%
    );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.36))
    drop-shadow(0 3px 10px rgba(54, 48, 41, 0.13));
}

.hero--startup .hero-sub {
  color: #5f5951;
}

.hero--startup .hero-kicker {
  color: #f2ece2;
}

.hero--startup .hero-kicker::before {
  background: #d3a95a;

  box-shadow:
    0 0 10px rgba(211, 169, 90, 0.62),
    0 0 24px rgba(211, 169, 90, 0.20);
}

.hero--startup .hero-kicker::after {
  background:
    linear-gradient(
      90deg,
      rgba(174, 131, 50, 0.08),
      rgba(219, 181, 104, 0.72),
      rgba(255, 242, 207, 0.92),
      rgba(219, 181, 104, 0.72),
      rgba(174, 131, 50, 0.08)
    );
}

.hero--startup .btn-primary {
  color: #fffaf1;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.20),
      transparent 40%
    ),
    linear-gradient(
      135deg,
      #958a78 0%,
      #aaa08f 45%,
      #c9bea9 100%
    );

  border-color: rgba(255, 255, 255, 0.24);

  box-shadow:
    0 16px 38px rgba(69, 53, 31, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.hero--startup .btn-primary:hover {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.25),
      transparent 40%
    ),
    linear-gradient(
      135deg,
      #9f9380 0%,
      #b4a996 45%,
      #d2c7b3 100%
    );

  box-shadow:
    0 22px 48px rgba(69, 53, 31, 0.21),
    inset 0 1px 0 rgba(255, 255, 255, 0.43);
}

.hero--startup .btn-outline {
  color: #302c27;

  background:
    rgba(248, 243, 234, 0.47);

  border-color:
    rgba(87, 68, 39, 0.19);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.50);

  backdrop-filter:
    blur(14px)
    saturate(108%);
  -webkit-backdrop-filter:
    blur(14px)
    saturate(108%);
}

.hero--startup .btn-outline:hover {
  color: #765723;
  border-color: rgba(157, 116, 45, 0.34);
}

/* Unify all hero network elements to one champagne-metal family. */
.hero-tech-network .tech-link {
  background:
    linear-gradient(
      90deg,
      rgba(143, 101, 28, 0.10),
      rgba(190, 143, 52, 0.62),
      rgba(143, 101, 28, 0.12)
    );

  box-shadow:
    0 0 11px rgba(205, 158, 66, 0.22);
}

.hero-tech-network .tech-link::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(221, 177, 87, 0.94),
      rgba(255, 248, 225, 1),
      rgba(228, 184, 94, 0.96),
      transparent
    );

  filter:
    drop-shadow(0 0 7px rgba(220, 174, 82, 0.86))
    drop-shadow(0 0 15px rgba(201, 149, 54, 0.34));
}

.hero-tech-network .tech-node {
  background: #d8ad58;

  box-shadow:
    0 0 0 1px rgba(255, 242, 208, 0.52),
    0 0 13px rgba(223, 176, 82, 0.82),
    0 0 30px rgba(201, 150, 57, 0.31);
}

/* --------------------------------------------------------------------------
   Project identity — neutral graphite glass, same gold language
   -------------------------------------------------------------------------- */

.manifesto,
.manifesto--scroll-rise {
  color: #f4efe7;

  background:
    radial-gradient(
      circle at 10% 16%,
      rgba(224, 205, 164, 0.10),
      transparent 29%
    ),
    radial-gradient(
      circle at 87% 74%,
      rgba(190, 145, 61, 0.075),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      var(--cc-graphite-0) 0%,
      var(--cc-graphite-1) 48%,
      var(--cc-graphite-2) 100%
    );
}

.manifesto--scroll-rise {
  border-top-color: rgba(10, 10, 10, 0.90);

  box-shadow:
    0 -30px 76px rgba(13, 13, 12, 0.25),
    0 -7px 20px rgba(13, 13, 12, 0.18),
    inset 0 24px 55px rgba(6, 6, 6, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.manifesto--scroll-rise::before {
  background:
    linear-gradient(
      180deg,
      rgba(3, 3, 3, 0.68) 0%,
      rgba(13, 13, 13, 0.43) 15%,
      rgba(31, 31, 29, 0.23) 39%,
      rgba(255, 255, 255, 0.052) 49%,
      rgba(21, 21, 20, 0.11) 60%,
      transparent 100%
    );
}

.manifesto--scroll-rise::after {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.012),
      rgba(255, 255, 255, 0.15) 18%,
      rgba(218, 178, 95, 0.30) 42%,
      rgba(255, 249, 232, 0.58) 50%,
      rgba(218, 178, 95, 0.30) 58%,
      rgba(255, 255, 255, 0.15) 82%,
      rgba(255, 255, 255, 0.012)
    );
}

.manifesto--scroll-rise .manifesto-bg img {
  filter:
    saturate(0.76)
    contrast(1.03)
    brightness(0.84);
}

.manifesto .section-label,
.manifesto--scroll-rise .section-label {
  color: #eee7dc;
}

.manifesto .section-label::before,
.manifesto--scroll-rise .section-label::before {
  background: var(--cc-gold-soft);
}

.manifesto-quote {
  color: #f6f1e9;
}

.manifesto-quote span {
  background:
    linear-gradient(
      105deg,
      #d1aa61 0%,
      #f0d89e 34%,
      #fff0c7 50%,
      #c99c4f 74%,
      #e2c482 100%
    );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.manifesto-body p {
  color: #d2cbc0;
}

.manifesto--scroll-rise .pillar-card {
  color: #f4efe7;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.095),
      rgba(255, 255, 255, 0.021)
    ),
    rgba(24, 25, 23, 0.48);

  border-color:
    rgba(238, 226, 203, 0.17);

  box-shadow:
    0 28px 68px rgba(7, 7, 7, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(180, 133, 43, 0.075);
}

.manifesto--scroll-rise .pillar-card h3 {
  color: #f7f1e8;
}

.manifesto--scroll-rise .pillar-card p {
  color: #cfc7bb;
}

.manifesto--scroll-rise .pillar-icon {
  color: #dfc183;

  border-color:
    rgba(226, 194, 128, 0.24);

  box-shadow:
    0 0 0 5px rgba(218, 176, 90, 0.032),
    0 0 18px rgba(211, 163, 69, 0.14);
}

/* --------------------------------------------------------------------------
   Physical integration module — pearl architecture
   -------------------------------------------------------------------------- */

.physical-system-section {
  background:
    radial-gradient(
      circle at 8% 10%,
      rgba(255, 255, 255, 0.76),
      transparent 30%
    ),
    radial-gradient(
      circle at 92% 82%,
      rgba(187, 144, 65, 0.105),
      transparent 33%
    ),
    linear-gradient(
      180deg,
      #eee7dc 0%,
      #e7ded0 58%,
      #dfd3c2 100%
    );
}

.physical-system-section::before {
  background:
    linear-gradient(
      rgba(137, 105, 51, 0.028) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(137, 105, 51, 0.028) 1px,
      transparent 1px
    );
}

.physical-system-shell {
  border-color:
    rgba(101, 80, 45, 0.15);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.71),
      rgba(245, 238, 228, 0.45) 48%,
      rgba(226, 215, 198, 0.55) 100%
    );

  box-shadow:
    0 44px 104px -60px rgba(62, 46, 23, 0.42),
    0 18px 46px -34px rgba(62, 46, 23, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

.physical-system-shell::after,
.physical-system-status::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(190, 145, 61, 0.24) 23%,
      rgba(249, 229, 188, 0.58) 50%,
      rgba(190, 145, 61, 0.24) 77%,
      transparent
    );
}

.physical-system-label {
  color: #837a6c;
}

.physical-system-label::before {
  background: #aa9063;
}

.physical-system-copy h2 {
  color: #292621;
}

.physical-system-copy > p {
  color: #625c53;
}

.physical-system-cues span {
  color: #514b43;

  border-color:
    rgba(108, 84, 45, 0.15);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.62),
      rgba(241, 233, 221, 0.42)
    );
}

.physical-system-cues span::before {
  background: var(--cc-gold);

  box-shadow:
    0 0 8px rgba(180, 139, 69, 0.42);
}

.physical-system-cta {
  color: #302b24;

  border-color:
    rgba(99, 76, 39, 0.18);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.68),
      rgba(234, 224, 209, 0.52)
    );

  box-shadow:
    0 15px 35px -24px rgba(62, 45, 20, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.physical-system-cta:hover {
  color: #775723;
  border-color: rgba(153, 112, 42, 0.38);
}

.physical-system-media {
  background: #34312d;

  border-color:
    rgba(103, 79, 41, 0.14);
}

.physical-system-media img {
  filter:
    saturate(0.76)
    contrast(1.01)
    brightness(0.91);
}

.physical-system-status {
  background:
    linear-gradient(
      180deg,
      rgba(205, 193, 174, 0.25),
      rgba(255, 255, 255, 0.22)
    );

  border-color:
    rgba(105, 81, 43, 0.14);
}

.physical-system-shell .physical-status-item {
  border-color:
    rgba(105, 81, 43, 0.12);
}

.physical-system-shell .physical-status-item .hero-signal-number {
  color: rgba(58, 51, 40, 0.50);
}

.physical-system-shell .physical-status-item .stat-value {
  color: #29251f;
}

.physical-system-shell .physical-status-item .stat-label {
  color: #70695f;
}

.physical-system-shell .physical-status-item .hero-signal-dot {
  background: var(--cc-gold);

  box-shadow:
    0 0 10px rgba(180, 139, 69, 0.46);
}

.physical-system-media-node {
  background: var(--cc-gold-soft);

  box-shadow:
    0 0 0 1px rgba(255, 246, 220, 0.34),
    0 0 13px rgba(215, 169, 76, 0.66),
    0 0 28px rgba(215, 169, 76, 0.25);
}

/* --------------------------------------------------------------------------
   Contact — same graphite family as project identity
   -------------------------------------------------------------------------- */

.contact {
  color: #f3eee6;

  background:
    radial-gradient(
      circle at 10% 8%,
      rgba(221, 201, 159, 0.09),
      transparent 34%
    ),
    radial-gradient(
      circle at 89% 90%,
      rgba(237, 230, 216, 0.04),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #383936 0%,
      #2c2d2a 48%,
      #232421 100%
    );

  border-top-color:
    rgba(239, 229, 209, 0.11);

  border-bottom-color:
    rgba(239, 229, 209, 0.09);
}

.contact::before {
  background:
    linear-gradient(
      128deg,
      rgba(255, 255, 255, 0.035),
      transparent 28%,
      transparent 72%,
      rgba(255, 255, 255, 0.010)
    ),
    linear-gradient(
      90deg,
      rgba(232, 218, 190, 0.026) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(232, 218, 190, 0.026) 1px,
      transparent 1px
    );

  background-size:
    100% 100%,
    42px 42px,
    42px 42px;
}

.contact .section-label {
  color: #eee7dc;
}

.contact .section-label::before {
  background: var(--cc-gold-soft);
}

.contact-intro h2,
.contact-option h4 {
  color: #f7f1e9;
}

.contact-intro > p,
.contact-option p,
.form-note {
  color: #ccc5ba;
}

.contact-option,
.contact-option:last-of-type {
  border-color:
    rgba(237, 227, 207, 0.13);
}

.contact-option > svg {
  color: #dcc184;

  background:
    rgba(255, 255, 255, 0.050);

  border-color:
    rgba(237, 227, 207, 0.15);
}

.form-card {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.076),
      rgba(255, 255, 255, 0.023)
    );

  border-color:
    rgba(237, 227, 207, 0.17);

  box-shadow:
    0 30px 74px rgba(10, 10, 9, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.070);
}

.form-row label {
  color: #d8d0c4;
}

.form-row input,
.form-row textarea,
.form-row select {
  color: #f5efe7;

  background:
    rgba(19, 20, 18, 0.27);

  border-color:
    rgba(237, 227, 207, 0.15);
}

.form-row input:hover,
.form-row textarea:hover,
.form-row select:hover {
  border-color:
    rgba(222, 190, 124, 0.28);
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  border-color: var(--cc-gold-soft);

  background:
    rgba(17, 18, 16, 0.34);

  box-shadow:
    0 0 0 3px rgba(202, 166, 94, 0.09);
}

.form-submit,
.btn-primary:not(.hero--startup .btn-primary) {
  color: #29241e;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.30),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #c4b8a4 0%,
      #aa9c85 52%,
      #d1c5b1 100%
    );

  border-color:
    rgba(255, 255, 255, 0.22);

  box-shadow:
    0 15px 34px rgba(45, 35, 20, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

.form-submit:hover,
.btn-primary:not(.hero--startup .btn-primary):hover {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.36),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #d0c3ae 0%,
      #b4a58d 52%,
      #ddd2bf 100%
    );
}

.contact .btn-outline {
  color: #eee7dc;

  background:
    rgba(255, 255, 255, 0.028);

  border-color:
    rgba(237, 227, 207, 0.18);
}

.contact .btn-outline:hover {
  color: #e3c98f;
  border-color: rgba(222, 190, 124, 0.38);
}

/* --------------------------------------------------------------------------
   Footer and mobile navigation
   -------------------------------------------------------------------------- */

.footer {
  color: #39342e;

  background:
    linear-gradient(
      180deg,
      #dfd4c4 0%,
      #d5c9b7 100%
    );

  border-top-color:
    rgba(91, 72, 42, 0.13);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.footer-meta,
.footer-links a {
  color: #746d63;
}

.footer-links a:hover {
  color: var(--cc-ink);
}

.mobile-drawer {
  color: var(--cc-ink);

  background:
    radial-gradient(
      circle at 88% 5%,
      rgba(255, 255, 255, 0.44),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #e8e0d4 0%,
      #d8cdbd 100%
    );
}

/* --------------------------------------------------------------------------
   Responsive color refinement
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .header {
    background:
      rgba(232, 224, 212, 0.94);
  }

  .hero--startup .hero-bg::before {
    background:
      linear-gradient(
        180deg,
        rgba(225, 217, 204, 0.96) 0%,
        rgba(211, 200, 182, 0.89) 55%,
        rgba(190, 176, 154, 0.70) 100%
      );
  }

  .physical-system-section {
    background:
      linear-gradient(
        180deg,
        #ede6dc 0%,
        #e1d6c6 100%
      );
  }
}

/* ==========================================================================
   PHYSICAL SYSTEM — PREMIUM REFINEMENT
   Smoother editorial hierarchy, tighter spacing, one continuous luxury module.
   ========================================================================== */

/* More architectural, less like a centered website-builder card. */
.physical-system-section {
  padding:
    clamp(5rem, 7vw, 7.5rem)
    0
    clamp(5.5rem, 8vw, 8.5rem);

  background:
    radial-gradient(
      circle at 7% 12%,
      rgba(255, 255, 255, 0.72),
      transparent 29%
    ),
    radial-gradient(
      circle at 93% 82%,
      rgba(184, 141, 62, 0.085),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #eee7dc 0%,
      #e9e1d5 48%,
      #e2d7c7 100%
    );
}

.physical-system-section .container {
  max-width: 1320px;
}

.physical-system-shell {
  border-radius: 1.35rem;

  border-color:
    rgba(91, 72, 42, 0.14);

  background:
    linear-gradient(
      146deg,
      rgba(255, 255, 255, 0.76),
      rgba(246, 239, 229, 0.52) 46%,
      rgba(226, 215, 198, 0.60) 100%
    );

  box-shadow:
    0 42px 100px -62px rgba(54, 41, 22, 0.40),
    0 16px 38px -30px rgba(54, 41, 22, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* --------------------------------------------------------------------------
   Top copy: premium editorial two-column composition
   -------------------------------------------------------------------------- */

.physical-system-copy {
  display: grid;

  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(360px, 1.08fr);

  grid-template-areas:
    "label label"
    "title intro"
    "title cues"
    "title cta";

  column-gap: clamp(3rem, 6vw, 7rem);
  row-gap: 0;

  align-items: start;

  padding:
    clamp(3.25rem, 5vw, 5rem)
    clamp(2.5rem, 5vw, 5.25rem)
    clamp(3rem, 4.6vw, 4.6rem);
}

.physical-system-copy::before {
  content: '';
  position: absolute;
  top: clamp(5.6rem, 8vw, 7.4rem);
  bottom: clamp(3rem, 5vw, 4.5rem);
  left: 46.6%;

  width: 1px;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(110, 87, 48, 0.14) 18%,
      rgba(110, 87, 48, 0.14) 82%,
      transparent
    );
}

.physical-system-label {
  grid-area: label;

  margin-bottom: clamp(1.6rem, 2.4vw, 2.25rem);

  color: #857b6c;
}

.physical-system-copy h2 {
  grid-area: title;

  align-self: start;

  max-width: 13ch;
  margin: 0;

  font-size: clamp(2.65rem, 4.35vw, 5.1rem);
  line-height: 0.94;
  letter-spacing: -0.066em;
  color: #292621;
}

.physical-system-copy > p {
  grid-area: intro;

  max-width: 58ch;
  margin: 0;

  color: #625c53;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.14rem);
  line-height: 1.72;
}

.physical-system-cues {
  grid-area: cues;

  align-self: start;

  margin-top: 1.6rem;
  gap: 0.5rem;
}

.physical-system-cues span {
  min-height: 30px;

  padding:
    0
    0.82rem
    0
    1.45rem;

  border-radius: 0.38rem;

  color: #514a41;
  font-size: 0.69rem;
  letter-spacing: 0.02em;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.66),
      rgba(240, 232, 220, 0.42)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

.physical-system-cta {
  grid-area: cta;

  justify-self: start;

  margin-top: 1.75rem;

  min-height: 45px;
  padding: 0.76rem 1.15rem;

  border-radius: 0.48rem;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.70),
      rgba(232, 222, 207, 0.54)
    );

  box-shadow:
    0 14px 30px -22px rgba(55, 40, 18, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

/* --------------------------------------------------------------------------
   Panoramic image: cinematic, slimmer, cleaner
   -------------------------------------------------------------------------- */

.physical-system-media {
  height: clamp(235px, 19vw, 305px);

  border-top-color:
    rgba(92, 71, 37, 0.14);

  border-bottom-color:
    rgba(92, 71, 37, 0.14);
}

.physical-system-media img {
  object-position: center 47%;

  filter:
    saturate(0.82)
    contrast(1.02)
    brightness(0.93);
}

.physical-system-media::before {
  background:
    linear-gradient(
      90deg,
      rgba(18, 16, 14, 0.20) 0%,
      transparent 17%,
      transparent 83%,
      rgba(18, 16, 14, 0.14) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.07),
      transparent 24%,
      transparent 74%,
      rgba(13, 11, 9, 0.24)
    );
}

.physical-system-media::after {
  background:
    linear-gradient(
      rgba(239, 214, 163, 0.042) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(239, 214, 163, 0.042) 1px,
      transparent 1px
    ),
    linear-gradient(
      180deg,
      transparent 48%,
      rgba(15, 12, 10, 0.54) 100%
    );

  background-size:
    46px 46px,
    46px 46px,
    100% 100%;
}

.physical-system-media-code {
  color: rgba(255, 246, 224, 0.78);

  font-size: 0.54rem;
  letter-spacing: 0.14em;
}

/* --------------------------------------------------------------------------
   Bottom status rail: one continuous instrument panel
   -------------------------------------------------------------------------- */

.physical-system-status {
  background:
    linear-gradient(
      180deg,
      rgba(229, 220, 206, 0.56),
      rgba(247, 241, 232, 0.48)
    );
}

.physical-status-grid {
  position: relative;
}

.physical-status-grid::after {
  content: '';
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 0;

  height: 1px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(132, 101, 47, 0.10) 18%,
      rgba(132, 101, 47, 0.18) 50%,
      rgba(132, 101, 47, 0.10) 82%,
      transparent
    );
}

.physical-system-shell .physical-status-item {
  min-height: 174px;

  padding:
    clamp(1.65rem, 2.4vw, 2.15rem)
    clamp(1.55rem, 2.5vw, 2.25rem);

  border-right-color:
    rgba(99, 76, 39, 0.11);
}

.physical-system-shell .physical-status-item::before {
  background:
    radial-gradient(
      circle at 84% 18%,
      rgba(182, 138, 57, 0.09),
      transparent 34%
    );
}

.physical-system-shell .physical-status-item .hero-signal-number {
  color: rgba(55, 48, 37, 0.46);

  font-size: 0.62rem;
  letter-spacing: 0.18em;
}

.physical-system-shell .physical-status-item .stat-value {
  margin-top: 1.15rem;

  font-size: clamp(1.45rem, 1.15rem + 0.8vw, 2rem);
  line-height: 1;
  color: #29251f;
}

.physical-system-shell .physical-status-item .stat-label {
  margin-top: 0.58rem;

  color: #70695f;
  font-size: 0.80rem;
  line-height: 1.45;
}

.physical-system-shell .physical-status-item .hero-signal-line {
  margin-top: 1.25rem;

  background:
    linear-gradient(
      90deg,
      rgba(126, 95, 42, 0.08),
      rgba(126, 95, 42, 0.15),
      rgba(126, 95, 42, 0.06)
    );
}

.physical-system-shell .physical-status-item:hover {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.19),
      rgba(255, 255, 255, 0.045)
    );
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .physical-system-copy {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "title"
      "intro"
      "cues"
      "cta";

    row-gap: 0;

    padding:
      clamp(2.6rem, 6vw, 4rem)
      clamp(1.8rem, 6vw, 3.5rem)
      clamp(2.4rem, 5vw, 3.4rem);
  }

  .physical-system-copy::before {
    display: none;
  }

  .physical-system-copy h2 {
    max-width: 17ch;
    margin-bottom: 1.4rem;

    font-size: clamp(2.5rem, 7vw, 4rem);
    line-height: 0.97;
  }

  .physical-system-copy > p {
    max-width: 68ch;
  }

  .physical-system-media {
    height: clamp(215px, 34vw, 290px);
  }
}

@media (max-width: 760px) {
  .physical-system-section {
    padding:
      var(--space-16)
      0
      var(--space-20);
  }

  .physical-system-shell {
    border-radius: 1rem;
  }

  .physical-system-copy {
    padding:
      2.15rem
      clamp(1.2rem, 6vw, 1.85rem)
      2rem;
  }

  .physical-system-copy h2 {
    font-size: clamp(2.25rem, 10vw, 3.2rem);
  }

  .physical-system-media {
    height: clamp(190px, 54vw, 245px);
  }

  .physical-system-shell .physical-status-item {
    min-height: 145px;
  }
}

/* ==========================================================================
   CONNECTCIRCUIT — SIGNATURE CTA SYSTEM
   Warm platinum/taupe metallic buttons inspired by the hero video-call CTA.
   ========================================================================== */

:root {
  --cc-cta-ink: #fffaf1;
  --cc-cta-edge: rgba(245, 239, 226, 0.42);

  --cc-cta-dark: #9d9586;
  --cc-cta-mid: #aaa293;
  --cc-cta-light: #bab2a1;

  --cc-cta-shadow:
    0 18px 38px rgba(72, 61, 45, 0.17),
    0 5px 14px rgba(72, 61, 45, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(88, 79, 65, 0.08);
}

/*
  Primary signature buttons across the homepage:
  hero booking, header CTA, founder CTA, contact booking and submit.
*/
.header .nav-cta,
.hero--startup .btn-primary,
.physical-system-cta,
.contact .contact-option-btn .btn-outline,
.contact .form-submit {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-height: 54px;
  padding: 0.92rem 1.55rem;

  border: 1px solid var(--cc-cta-edge);
  border-radius: 1.05rem;

  color: var(--cc-cta-ink);
  -webkit-text-fill-color: currentColor;

  font-weight: 600;
  letter-spacing: -0.012em;

  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.08) 22%,
      transparent 45%
    ),
    linear-gradient(
      135deg,
      var(--cc-cta-dark) 0%,
      var(--cc-cta-mid) 52%,
      var(--cc-cta-light) 100%
    );

  box-shadow: var(--cc-cta-shadow);

  backdrop-filter:
    blur(18px)
    saturate(108%);
  -webkit-backdrop-filter:
    blur(18px)
    saturate(108%);

  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 260ms ease,
    border-color 260ms ease,
    background 260ms ease;
}

/* Static glass highlight, not an obvious animation. */
.header .nav-cta::before,
.hero--startup .btn-primary::before,
.physical-system-cta::before,
.contact .contact-option-btn .btn-outline::before,
.contact .form-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;

  pointer-events: none;

  background:
    linear-gradient(
      112deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.055) 34%,
      transparent 54%
    );
}

/* Very restrained metallic reflection on hover. */
.header .nav-cta::after,
.hero--startup .btn-primary::after,
.physical-system-cta::after,
.contact .contact-option-btn .btn-outline::after,
.contact .form-submit::after {
  content: '';
  position: absolute;
  top: -28%;
  bottom: -28%;
  left: -38%;
  z-index: -1;

  width: 24%;

  pointer-events: none;
  opacity: 0;

  transform: skewX(-16deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.30),
      rgba(255, 247, 228, 0.17),
      transparent
    );

  transition:
    left 720ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 220ms ease;
}

.header .nav-cta:hover,
.hero--startup .btn-primary:hover,
.physical-system-cta:hover,
.contact .contact-option-btn .btn-outline:hover,
.contact .form-submit:hover {
  color: #fffdf7;
  -webkit-text-fill-color: currentColor;

  transform: translateY(-3px);

  border-color: rgba(255, 248, 232, 0.58);

  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.27) 0%,
      rgba(255, 255, 255, 0.10) 22%,
      transparent 45%
    ),
    linear-gradient(
      135deg,
      #a49c8d 0%,
      #b1a99a 52%,
      #c4bcab 100%
    );

  box-shadow:
    0 24px 48px rgba(72, 61, 45, 0.21),
    0 8px 18px rgba(72, 61, 45, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.47),
    inset 0 -1px 0 rgba(88, 79, 65, 0.07);
}

.header .nav-cta:hover::after,
.hero--startup .btn-primary:hover::after,
.physical-system-cta:hover::after,
.contact .contact-option-btn .btn-outline:hover::after,
.contact .form-submit:hover::after {
  left: 118%;
  opacity: 0.76;
}

/* Arrow behavior stays subtle and architectural. */
.header .nav-cta svg,
.hero--startup .btn-primary svg,
.physical-system-cta svg,
.contact .contact-option-btn .btn-outline svg,
.contact .form-submit svg {
  position: relative;
  z-index: 2;

  flex-shrink: 0;

  color: currentColor;

  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.header .nav-cta:hover svg,
.hero--startup .btn-primary:hover svg,
.physical-system-cta:hover svg,
.contact .contact-option-btn .btn-outline:hover svg,
.contact .form-submit:hover svg {
  transform: translateX(4px);
}

/*
  Secondary homepage buttons use the same geometry in a light pearl version,
  so the system feels related without making every action equally dominant.
*/
.hero--startup .btn-outline {
  min-height: 54px;
  padding: 0.92rem 1.45rem;

  border-radius: 1.05rem;

  color: #302c27;

  border-color: rgba(104, 84, 51, 0.16);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.68),
      rgba(239, 231, 219, 0.48)
    );

  box-shadow:
    0 12px 28px rgba(70, 58, 40, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.hero--startup .btn-outline:hover {
  color: #6f5424;

  border-color: rgba(151, 114, 44, 0.30);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.80),
      rgba(235, 225, 210, 0.60)
    );

  transform: translateY(-2px);

  box-shadow:
    0 17px 34px rgba(70, 58, 40, 0.105),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

/* Header version remains slightly more compact. */
.header .nav-cta {
  min-height: 46px;
  padding: 0.76rem 1.25rem;
  border-radius: 0.95rem;
}

/* Contact form CTA keeps the full available width. */
.contact .form-submit {
  width: 100%;
  justify-content: center;
}

/* The dark contact section needs slightly deeper taupe for contrast. */
.contact .contact-option-btn .btn-outline,
.contact .form-submit {
  --cc-cta-dark: #91897b;
  --cc-cta-mid: #a29a8b;
  --cc-cta-light: #b8b09f;

  box-shadow:
    0 20px 44px rgba(7, 7, 7, 0.20),
    0 6px 16px rgba(7, 7, 7, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(22, 21, 19, 0.12);
}

@media (max-width: 760px) {
  .header .nav-cta,
  .hero--startup .btn-primary,
  .physical-system-cta,
  .contact .contact-option-btn .btn-outline,
  .contact .form-submit,
  .hero--startup .btn-outline {
    min-height: 50px;
    border-radius: 0.92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header .nav-cta::after,
  .hero--startup .btn-primary::after,
  .physical-system-cta::after,
  .contact .contact-option-btn .btn-outline::after,
  .contact .form-submit::after {
    display: none;
  }
}

/* ==========================================================================
   PHYSICAL SYSTEM — SLIM CINEMATIC IMAGE STRIP
   Reduces only the panoramic image height.
   ========================================================================== */

.physical-system-media {
  height: clamp(165px, 13vw, 215px);
  min-height: 0;
}

.physical-system-media img {
  height: 100%;
  min-height: 0;
  object-position: center 46%;
}

@media (max-width: 980px) {
  .physical-system-media {
    height: clamp(175px, 26vw, 225px);
  }
}

@media (max-width: 760px) {
  .physical-system-media {
    height: clamp(165px, 43vw, 205px);
  }
}

/* ==========================================================================
   CONNECTCIRCUIT — FOUNDER PAGE
   Modern founder architecture aligned with the homepage design system.
   ========================================================================== */

.founder-page {
  --founder-pearl: #e8dfd2;
  --founder-pearl-light: #f5f0e8;
  --founder-ink: #292621;
  --founder-muted: #686158;
  --founder-gold: #b48b45;
  --founder-gold-soft: #d3b36e;
  --founder-graphite: #2c2d2a;
}

/* --------------------------------------------------------------------------
   Main founder stage
   -------------------------------------------------------------------------- */

.founder-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding:
    clamp(5.5rem, 8vw, 8rem)
    0
    clamp(6rem, 9vw, 9rem);

  background:
    radial-gradient(
      circle at 10% 8%,
      rgba(255, 255, 255, 0.72),
      transparent 29%
    ),
    radial-gradient(
      circle at 88% 78%,
      rgba(184, 141, 62, 0.11),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #e9e1d5 0%,
      #e3d9ca 56%,
      #ddd1c0 100%
    );
}

.founder-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background:
    linear-gradient(
      rgba(133, 102, 50, 0.03) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(133, 102, 50, 0.03) 1px,
      transparent 1px
    );

  background-size: 52px 52px;

  -webkit-mask-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.72),
      transparent 86%
    );
  mask-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.72),
      transparent 86%
    );
}

.founder-stage .container {
  position: relative;
  z-index: 2;
  max-width: 1320px;
}

.founder-stage-network {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.52;
}

.founder-stage-network::before,
.founder-stage-network::after {
  content: '';
  position: absolute;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(181, 139, 61, 0.34),
      rgba(242, 216, 157, 0.62),
      rgba(181, 139, 61, 0.24),
      transparent
    );

  box-shadow:
    0 0 10px rgba(205, 158, 66, 0.18);
}

.founder-stage-network::before {
  width: 46vw;
  left: -5vw;
  top: 22%;
  transform: rotate(18deg);
}

.founder-stage-network::after {
  width: 42vw;
  right: -4vw;
  top: 61%;
  transform: rotate(-16deg);
}

.founder-stage-network span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;

  background: #cda153;

  box-shadow:
    0 0 0 1px rgba(255, 243, 213, 0.44),
    0 0 12px rgba(209, 160, 66, 0.72),
    0 0 26px rgba(209, 160, 66, 0.22);

  animation:
    founderNodePulse 3.8s ease-in-out infinite;
}

.founder-stage-network span:nth-child(1) {
  left: 11%;
  top: 21%;
}

.founder-stage-network span:nth-child(2) {
  right: 14%;
  top: 17%;
  animation-delay: 0.7s;
}

.founder-stage-network span:nth-child(3) {
  left: 36%;
  bottom: 17%;
  animation-delay: 1.3s;
}

.founder-stage-network span:nth-child(4) {
  right: 7%;
  bottom: 20%;
  animation-delay: 2s;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.founder-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.55rem;

  margin-bottom:
    clamp(1.5rem, 2.5vw, 2.25rem);

  color: #7a7369;
  font-size: 0.82rem;
}

.founder-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.founder-breadcrumb a:hover {
  color: #6d5120;
}

/* --------------------------------------------------------------------------
   Unified founder module
   -------------------------------------------------------------------------- */

.founder-shell {
  position: relative;
  isolation: isolate;

  display: grid;
  grid-template-columns:
    minmax(330px, 0.82fr)
    minmax(0, 1.18fr);

  overflow: hidden;

  border: 1px solid rgba(96, 75, 42, 0.15);
  border-radius: 1.5rem;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.74),
      rgba(246, 239, 229, 0.46) 48%,
      rgba(225, 214, 197, 0.58) 100%
    );

  box-shadow:
    0 46px 110px -64px rgba(57, 42, 20, 0.43),
    0 18px 44px -32px rgba(57, 42, 20, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);

  -webkit-backdrop-filter:
    blur(28px)
    saturate(112%);
  backdrop-filter:
    blur(28px)
    saturate(112%);
}

.founder-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 18% 14%,
      rgba(255, 255, 255, 0.64),
      transparent 27%
    ),
    radial-gradient(
      circle at 82% 82%,
      rgba(188, 145, 64, 0.10),
      transparent 34%
    );
}

.founder-shell::after {
  content: '';
  position: absolute;
  left: 5%;
  right: 5%;
  top: 0;
  z-index: 3;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(201, 160, 80, 0.26) 24%,
      rgba(255, 242, 209, 0.70) 50%,
      rgba(201, 160, 80, 0.26) 76%,
      transparent
    );

  box-shadow:
    0 0 16px rgba(198, 150, 60, 0.14);
}

/* --------------------------------------------------------------------------
   Portrait
   -------------------------------------------------------------------------- */

.founder-visual {
  position: relative;
  min-height: 760px;
  overflow: hidden;

  background: #393531;
}

.founder-visual::before,
.founder-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.founder-visual::before {
  background:
    linear-gradient(
      118deg,
      rgba(255, 255, 255, 0.12),
      transparent 32%
    ),
    linear-gradient(
      90deg,
      rgba(18, 16, 14, 0.18),
      transparent 33%
    );
}

.founder-visual::after {
  background:
    linear-gradient(
      rgba(239, 214, 163, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(239, 214, 163, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      180deg,
      transparent 52%,
      rgba(19, 16, 13, 0.62) 100%
    );

  background-size:
    42px 42px,
    42px 42px,
    100% 100%;
}

.founder-visual img {
  width: 100%;
  height: 100%;
  min-height: 760px;
  object-fit: cover;
  object-position: center 18%;

  filter:
    saturate(0.84)
    contrast(1.01)
    brightness(0.96);

  transform: scale(1.015);

  transition:
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s ease;
}

.founder-shell:hover .founder-visual img {
  transform: scale(1.035);

  filter:
    saturate(0.92)
    contrast(1.02)
    brightness(0.98);
}

.founder-visual-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.founder-visual-code {
  position: absolute;
  left: 1.5rem;
  bottom: 1.4rem;

  color: rgba(255, 246, 225, 0.78);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.44);
}

.founder-visual-node {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;

  width: 7px;
  height: 7px;
  border-radius: 50%;

  background: #d0a64d;

  box-shadow:
    0 0 0 1px rgba(255, 246, 220, 0.34),
    0 0 13px rgba(216, 169, 76, 0.68),
    0 0 28px rgba(216, 169, 76, 0.24);

  animation:
    founderNodePulse 3.2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */

.founder-copy {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    clamp(3.2rem, 5.3vw, 5.6rem)
    clamp(2.6rem, 5.3vw, 5.8rem);
}

.founder-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;

  margin-bottom: 1.6rem;

  color: #857b6d;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.founder-kicker::before {
  content: '';
  width: 34px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      #aa9165,
      rgba(231, 207, 160, 0.76),
      transparent
    );
}

.founder-title {
  max-width: 14ch;
  margin: 0;

  font-family: var(--font-body);
  font-size:
    clamp(3rem, 4.65vw, 5.35rem);

  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.063em;
  color: var(--founder-ink);
}

.founder-text {
  margin-top: 2.1rem;
}

.founder-text p {
  max-width: 62ch;
  margin-bottom: 1.15rem;

  color: var(--founder-muted);
  font-size:
    clamp(0.98rem, 0.95rem + 0.15vw, 1.08rem);

  line-height: 1.74;
}

.founder-text p:last-child {
  margin-bottom: 0;
}

.founder-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;

  margin-top: 1.8rem;
  padding-top: 1.4rem;

  border-top:
    1px solid rgba(101, 78, 40, 0.14);
}

.founder-note-node {
  width: 6px;
  height: 6px;
  margin-top: 0.5rem;
  border-radius: 50%;

  background: var(--founder-gold);

  box-shadow:
    0 0 10px rgba(180, 139, 69, 0.48);
}

.founder-note p {
  margin: 0;

  color: #837b70;
  font-size: 0.82rem;
  line-height: 1.6;
  font-style: normal;
}

.founder-signature {
  margin-top: 1.85rem;
}

.founder-name {
  color: #2c2822;
  font-family: var(--font-body);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.founder-role {
  margin-top: 0.25rem;

  color: #88785e;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.founder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;

  margin-top: 2rem;
}

.founder-actions .btn {
  min-height: 52px;
  padding: 0.88rem 1.35rem;

  border-radius: 1rem;
}

.founder-actions .btn-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  color: #fffaf1;

  border-color:
    rgba(245, 239, 226, 0.40);

  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.22),
      transparent 44%
    ),
    linear-gradient(
      135deg,
      #9d9586 0%,
      #aaa293 52%,
      #bab2a1 100%
    );

  box-shadow:
    0 18px 38px rgba(72, 61, 45, 0.17),
    0 5px 14px rgba(72, 61, 45, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.founder-actions .btn-primary:hover {
  color: #fffdf7;

  transform: translateY(-3px);

  border-color:
    rgba(255, 248, 232, 0.56);

  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.27),
      transparent 44%
    ),
    linear-gradient(
      135deg,
      #a49c8d 0%,
      #b1a99a 52%,
      #c4bcab 100%
    );

  box-shadow:
    0 24px 48px rgba(72, 61, 45, 0.21),
    inset 0 1px 0 rgba(255, 255, 255, 0.47);
}

.founder-actions .btn-outline {
  color: #302c27;

  border-color:
    rgba(103, 82, 48, 0.17);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.68),
      rgba(238, 230, 218, 0.48)
    );

  box-shadow:
    0 12px 28px rgba(70, 58, 40, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.founder-actions .btn-outline:hover {
  color: #715522;

  transform: translateY(-2px);

  border-color:
    rgba(151, 114, 44, 0.30);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.82),
      rgba(235, 225, 210, 0.60)
    );
}

/* --------------------------------------------------------------------------
   Values — integrated graphite system rail
   -------------------------------------------------------------------------- */

.founder-values {
  position: relative;
  overflow: hidden;

  padding:
    clamp(5rem, 8vw, 8rem)
    0;

  color: #f4efe7;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(223, 203, 161, 0.09),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 82%,
      rgba(187, 142, 61, 0.065),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #373835 0%,
      #2b2c29 48%,
      #222320 100%
    );
}

.founder-values::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(
      rgba(235, 220, 190, 0.032) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(235, 220, 190, 0.032) 1px,
      transparent 1px
    );

  background-size: 46px 46px;
}

.founder-values .container {
  position: relative;
  z-index: 1;
  max-width: 1320px;
}

.founder-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  border-top:
    1px solid rgba(236, 224, 201, 0.15);

  border-bottom:
    1px solid rgba(236, 224, 201, 0.12);
}

.founder-value {
  position: relative;
  min-height: 250px;

  padding:
    clamp(2rem, 3.4vw, 3.3rem);

  border-right:
    1px solid rgba(236, 224, 201, 0.12);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.028),
      rgba(255, 255, 255, 0.008)
    );

  transition:
    background 280ms ease,
    transform 280ms ease;
}

.founder-value:last-child {
  border-right: 0;
}

.founder-value::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 84% 16%,
      rgba(219, 175, 86, 0.10),
      transparent 34%
    );
}

.founder-value:hover {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.052),
      rgba(255, 255, 255, 0.014)
    );
}

.founder-value-head {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.founder-value-index {
  color: rgba(225, 216, 201, 0.52);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
}

.founder-value-node {
  width: 6px;
  height: 6px;
  border-radius: 50%;

  background: #c99c4d;

  box-shadow:
    0 0 10px rgba(205, 158, 66, 0.58);
}

.founder-value h2 {
  position: relative;
  z-index: 1;

  max-width: 17ch;
  margin-top: 2.2rem;

  color: #f6f1e9;
  font-family: var(--font-body);
  font-size:
    clamp(1.45rem, 1.15rem + 0.9vw, 2.15rem);

  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.038em;
}

.founder-value p {
  position: relative;
  z-index: 1;

  max-width: 36ch;
  margin-top: 0.9rem;

  color: #cfc7bb;
  font-size: 0.88rem;
  line-height: 1.62;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@keyframes founderNodePulse {
  0%,
  100% {
    opacity: 0.64;
    transform: scale(0.92);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .founder-shell {
    grid-template-columns: 1fr;
  }

  .founder-visual {
    min-height: 520px;
  }

  .founder-visual img {
    min-height: 520px;
    object-position: center 16%;
  }

  .founder-copy {
    padding:
      clamp(2.6rem, 6vw, 4rem)
      clamp(1.8rem, 6vw, 3.5rem);
  }

  .founder-title {
    max-width: 16ch;
    font-size:
      clamp(2.8rem, 7vw, 4.4rem);
  }
}

@media (max-width: 760px) {
  .founder-stage {
    padding:
      calc(4.5rem + env(safe-area-inset-top))
      0
      var(--space-20);
  }

  .founder-breadcrumb {
    margin-bottom: 1.25rem;
    font-size: 0.76rem;
  }

  .founder-shell {
    border-radius: 1rem;
  }

  .founder-visual {
    min-height: 420px;
  }

  .founder-visual img {
    min-height: 420px;
    object-position: center 13%;
  }

  .founder-copy {
    padding:
      2.2rem
      clamp(1.25rem, 6vw, 2rem)
      2.4rem;
  }

  .founder-kicker {
    margin-bottom: 1.2rem;
  }

  .founder-title {
    max-width: 13ch;

    font-size:
      clamp(2.45rem, 10.8vw, 3.55rem);

    line-height: 0.98;
  }

  .founder-text {
    margin-top: 1.6rem;
  }

  .founder-text p {
    font-size: 0.94rem;
    line-height: 1.66;
  }

  .founder-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .founder-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .founder-values {
    padding:
      var(--space-16)
      0;
  }

  .founder-values-grid {
    grid-template-columns: 1fr;
  }

  .founder-value {
    min-height: 190px;

    border-right: 0;
    border-bottom:
      1px solid rgba(236, 224, 201, 0.12);
  }

  .founder-value:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 430px) {
  .founder-visual {
    min-height: 370px;
  }

  .founder-visual img {
    min-height: 370px;
  }

  .founder-title {
    font-size:
      clamp(2.25rem, 10.6vw, 3rem);
  }

  .founder-copy {
    padding:
      1.9rem
      1.15rem
      2.1rem;
  }
}

@media (hover: none) and (pointer: coarse) {
  .founder-shell:hover .founder-visual img {
    transform: scale(1.015);

    filter:
      saturate(0.84)
      contrast(1.01)
      brightness(0.96);
  }

  .founder-actions .btn-primary:hover,
  .founder-actions .btn-outline:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .founder-stage-network span,
  .founder-visual-node {
    animation: none !important;
  }
}

/* ==========================================================================
   FOUNDER PAGE — BALANCED EDITORIAL CORRECTION
   Returns to the cleaner previous composition.
   No oversized portrait, no forced crop, no giant card architecture.
   ========================================================================== */

.founder-page--balanced {
  background:
    linear-gradient(
      180deg,
      #ded3c2 0%,
      #e8dfd2 48%,
      #ddd1c0 100%
    );
}

/* Compact breadcrumb band instead of a second oversized "Founder" title. */
.founder-page--balanced .founder-page-header {
  padding:
    clamp(2.6rem, 4vw, 4rem)
    0
    clamp(1.2rem, 2vw, 1.8rem);

  border-bottom: 0;

  background:
    linear-gradient(
      180deg,
      rgba(222, 211, 194, 0.95),
      rgba(228, 218, 202, 0.72)
    );
}

.founder-page--balanced .breadcrumb {
  margin: 0;

  color: #777064;
  font-size: 0.84rem;
}

.founder-page--balanced .breadcrumb a {
  color: inherit;
}

/* Main founder section: close to the original layout, but cleaner. */
.founder-page--balanced .founder-about {
  padding:
    clamp(2.5rem, 4vw, 4rem)
    0
    clamp(5.5rem, 8vw, 8rem);

  background:
    radial-gradient(
      circle at 10% 8%,
      rgba(255, 255, 255, 0.62),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 78%,
      rgba(184, 141, 62, 0.08),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #e8dfd2 0%,
      #e1d7c8 100%
    );
}

.founder-page--balanced .founder-about .container {
  max-width: 1240px;
}

.founder-page--balanced .founder-about-grid {
  display: grid;

  grid-template-columns:
    minmax(330px, 0.82fr)
    minmax(0, 1.18fr);

  gap: clamp(3rem, 6vw, 7rem);

  align-items: center;
}

/*
  Exact source-image ratio: 1123 × 1401.
  This prevents the face/body from being cut off.
*/
.founder-page--balanced .founder-portrait {
  width: min(100%, 470px);
  max-width: 470px;
  aspect-ratio: 1123 / 1401;

  margin: 0;

  align-self: center;
  justify-self: start;

  overflow: hidden;

  border:
    1px solid rgba(97, 75, 40, 0.15);

  border-radius: 1.15rem;

  background: #d8d0c4;

  box-shadow:
    0 34px 80px -48px rgba(50, 38, 20, 0.42),
    0 12px 28px -22px rgba(50, 38, 20, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.founder-page--balanced .founder-portrait img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  transform: none;

  filter:
    saturate(0.90)
    contrast(1)
    brightness(0.98);
}

.founder-page--balanced .founder-portrait::before,
.founder-page--balanced .founder-portrait::after {
  display: none;
}

.founder-page--balanced .founder-about-content {
  max-width: 680px;
}

.founder-page--balanced .founder-about-content .section-label {
  margin-bottom: 1.25rem;

  color: #887b67;
}

.founder-page--balanced .founder-about-content .section-label::before {
  background: #ae9363;
}

.founder-page--balanced .founder-main-title {
  max-width: 15ch;
  margin: 0 0 2rem;

  font-family: var(--font-body);
  font-size:
    clamp(2.8rem, 4.4vw, 5rem);

  font-weight: 500;
  line-height: 0.99;
  letter-spacing: -0.058em;
  color: #292621;
}

.founder-page--balanced .founder-about-content > p {
  max-width: 62ch;

  margin-bottom: 1.1rem;

  color: #665f56;
  font-size:
    clamp(0.98rem, 0.95rem + 0.16vw, 1.08rem);

  line-height: 1.72;
}

.founder-page--balanced .about-editnote {
  margin-top: 1.45rem;
  padding:
    1rem
    0
    0
    1.15rem;

  border-left:
    1px solid rgba(174, 139, 70, 0.34);

  color: #80776b;
  font-size: 0.83rem;
  font-style: normal;
}

.founder-page--balanced .about-signature {
  margin-top: 1.65rem;
  padding-top: 1.35rem;

  border-top:
    1px solid rgba(99, 76, 40, 0.13);
}

.founder-page--balanced .about-name {
  color: #2d2923;
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 600;
}

.founder-page--balanced .about-role {
  color: #85765f;
}

.founder-page--balanced .founder-page-actions {
  margin-top: 1.85rem;
}

/* Keep the same premium button language as the homepage. */
.founder-page--balanced .founder-page-actions .btn {
  min-height: 50px;
  padding: 0.84rem 1.3rem;

  border-radius: 0.95rem;
}

.founder-page--balanced .founder-page-actions .btn-primary {
  color: #fffaf1;

  border-color:
    rgba(245, 239, 226, 0.40);

  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.22),
      transparent 44%
    ),
    linear-gradient(
      135deg,
      #9d9586 0%,
      #aaa293 52%,
      #bab2a1 100%
    );

  box-shadow:
    0 18px 38px rgba(72, 61, 45, 0.17),
    0 5px 14px rgba(72, 61, 45, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.founder-page--balanced .founder-page-actions .btn-outline {
  color: #302c27;

  border-color:
    rgba(103, 82, 48, 0.17);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.68),
      rgba(238, 230, 218, 0.48)
    );

  box-shadow:
    0 12px 28px rgba(70, 58, 40, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

/* Values: clean, restrained, not a separate oversized visual world. */
.founder-page--balanced .founder-values-strip {
  padding:
    clamp(4.5rem, 7vw, 7rem)
    0;

  color: #f4efe7;

  background:
    linear-gradient(
      145deg,
      #383936 0%,
      #2c2d2a 48%,
      #232421 100%
    );

  border-top:
    1px solid rgba(239, 229, 209, 0.10);
}

.founder-page--balanced .founder-values-strip .values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 0;

  border-top:
    1px solid rgba(236, 224, 201, 0.14);

  border-bottom:
    1px solid rgba(236, 224, 201, 0.12);
}

.founder-page--balanced .founder-values-strip .value-item {
  min-height: 220px;

  padding:
    clamp(1.8rem, 3vw, 3rem);

  border-right:
    1px solid rgba(236, 224, 201, 0.12);
}

.founder-page--balanced .founder-values-strip .value-item:last-child {
  border-right: 0;
}

.founder-page--balanced .founder-values-strip .value-index {
  color: #c9a55f;
}

.founder-page--balanced .founder-values-strip h3 {
  color: #f6f1e9;
  font-family: var(--font-body);
  font-size:
    clamp(1.35rem, 1.1rem + 0.7vw, 1.9rem);

  font-weight: 500;
  letter-spacing: -0.035em;
}

.founder-page--balanced .founder-values-strip p {
  color: #cfc7bb;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .founder-page--balanced .founder-about-grid {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }

  .founder-page--balanced .founder-portrait {
    justify-self: center;

    width: min(100%, 420px);
    max-width: 420px;
  }

  .founder-page--balanced .founder-about-content {
    max-width: 720px;
  }

  .founder-page--balanced .founder-main-title {
    max-width: 16ch;

    font-size:
      clamp(2.65rem, 7vw, 4rem);
  }
}

@media (max-width: 700px) {
  .founder-page--balanced .founder-page-header {
    padding:
      calc(4.15rem + env(safe-area-inset-top))
      0
      1rem;
  }

  .founder-page--balanced .founder-about {
    padding:
      1.7rem
      0
      var(--space-20);
  }

  .founder-page--balanced .founder-portrait {
    width: min(100%, 360px);
    max-width: 360px;

    border-radius: 0.95rem;
  }

  .founder-page--balanced .founder-main-title {
    max-width: 13ch;
    margin-bottom: 1.5rem;

    font-size:
      clamp(2.35rem, 10.5vw, 3.3rem);

    line-height: 0.99;
  }

  .founder-page--balanced .founder-about-content > p {
    font-size: 0.94rem;
    line-height: 1.65;
  }

  .founder-page--balanced .founder-page-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .founder-page--balanced .founder-page-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .founder-page--balanced .founder-values-strip {
    padding:
      var(--space-16)
      0;
  }

  .founder-page--balanced .founder-values-strip .values-grid {
    grid-template-columns: 1fr;
  }

  .founder-page--balanced .founder-values-strip .value-item {
    min-height: 170px;

    border-right: 0;
    border-bottom:
      1px solid rgba(236, 224, 201, 0.12);
  }

  .founder-page--balanced .founder-values-strip .value-item:last-child {
    border-bottom: 0;
  }
}

@media (hover: none) and (pointer: coarse) {
  .founder-page--balanced .founder-portrait img {
    transform: none;
  }
}

/* ==========================================================================
   FOUNDER PAGE — WIDE TITLE + UNIFIED CONTENT BOX
   Full-width headline first, portrait and text together below.
   ========================================================================== */

.founder-page--titlewide {
  background:
    linear-gradient(
      180deg,
      #ded3c2 0%,
      #e8dfd2 48%,
      #ddd1c0 100%
    );
}

.founder-titlewide-stage {
  position: relative;
  overflow: hidden;

  padding:
    clamp(3.2rem, 5vw, 5rem)
    0
    clamp(5.5rem, 8vw, 8rem);

  background:
    radial-gradient(
      circle at 8% 7%,
      rgba(255, 255, 255, 0.64),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 82%,
      rgba(184, 141, 62, 0.08),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #e7ded1 0%,
      #e0d5c5 100%
    );
}

.founder-titlewide-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(
      rgba(133, 102, 50, 0.026) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(133, 102, 50, 0.026) 1px,
      transparent 1px
    );

  background-size: 52px 52px;

  -webkit-mask-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.58),
      transparent 88%
    );
  mask-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.58),
      transparent 88%
    );
}

.founder-titlewide-stage .container {
  position: relative;
  z-index: 1;
  max-width: 1320px;
}

.founder-titlewide-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.55rem;

  margin-bottom:
    clamp(1.8rem, 3vw, 2.8rem);

  color: #787065;
  font-size: 0.82rem;
}

.founder-titlewide-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.founder-titlewide-breadcrumb a:hover {
  color: #6d5120;
}

/* Full-width header */
.founder-titlewide-header {
  position: relative;

  margin-bottom:
    clamp(2.6rem, 5vw, 4.8rem);

  padding-bottom:
    clamp(2rem, 3.2vw, 3.2rem);

  border-bottom:
    1px solid rgba(100, 77, 39, 0.14);
}

.founder-titlewide-header .section-label {
  margin-bottom: 1.25rem;
  color: #857965;
}

.founder-titlewide-header .section-label::before {
  background: #aa9162;
}

.founder-titlewide-title {
  max-width: 24ch;
  margin: 0;

  font-family: var(--font-body);
  font-size:
    clamp(3.1rem, 5.6vw, 6.7rem);

  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.067em;
  color: #292621;

  text-wrap: balance;
}

/* Unified box below */
.founder-titlewide-shell {
  position: relative;
  isolation: isolate;

  display: grid;
  grid-template-columns:
    minmax(320px, 0.72fr)
    minmax(0, 1.28fr);

  gap: 0;
  overflow: hidden;

  border:
    1px solid rgba(96, 74, 39, 0.15);

  border-radius: 1.35rem;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.73),
      rgba(245, 238, 228, 0.49) 48%,
      rgba(226, 215, 198, 0.58) 100%
    );

  box-shadow:
    0 44px 104px -62px rgba(56, 41, 20, 0.42),
    0 16px 40px -30px rgba(56, 41, 20, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);

  -webkit-backdrop-filter:
    blur(26px)
    saturate(110%);
  backdrop-filter:
    blur(26px)
    saturate(110%);
}

.founder-titlewide-shell::after {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  top: 0;
  z-index: 3;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(200, 159, 79, 0.24) 24%,
      rgba(255, 240, 205, 0.66) 50%,
      rgba(200, 159, 79, 0.24) 76%,
      transparent
    );

  box-shadow:
    0 0 14px rgba(198, 150, 60, 0.12);
}

/* Portrait keeps original ratio and remains fully visible */
.founder-titlewide-portrait {
  position: relative;
  align-self: stretch;
  min-height: 0;

  overflow: hidden;
  background: #d7cec1;

  border-right:
    1px solid rgba(95, 73, 39, 0.14);
}

.founder-titlewide-portrait img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  transform: none;

  filter:
    saturate(0.90)
    contrast(1)
    brightness(0.98);
}

/*
  Preserve the original portrait ratio while still filling the left column.
  The column height is determined by the text content, but the image is never
  zoomed or repositioned.
*/
.founder-titlewide-portrait::before {
  content: '';
  display: block;
  padding-top: calc(1401 / 1123 * 100%);
}

.founder-titlewide-portrait img {
  position: absolute;
  inset: 0;
}

/* Content side */
.founder-titlewide-content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    clamp(2.7rem, 4.8vw, 5rem)
    clamp(2.3rem, 4.8vw, 5.2rem);
}

.founder-titlewide-text p {
  max-width: 66ch;
  margin-bottom: 1.15rem;

  color: #645e55;
  font-size:
    clamp(0.98rem, 0.95rem + 0.15vw, 1.08rem);

  line-height: 1.72;
}

.founder-titlewide-text p:last-child {
  margin-bottom: 0;
}

.founder-titlewide-note {
  margin-top: 1.7rem;
  padding:
    1rem
    0
    0
    1.1rem;

  border-left:
    1px solid rgba(176, 139, 68, 0.34);

  color: #80776b;
  font-size: 0.83rem;
  line-height: 1.6;
}

.founder-titlewide-signature {
  margin-top: 1.7rem;
  padding-top: 1.3rem;

  border-top:
    1px solid rgba(99, 76, 40, 0.13);
}

.founder-titlewide-name {
  color: #2d2923;
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 600;
}

.founder-titlewide-role {
  margin-top: 0.25rem;
  color: #85765f;
  font-size: 0.82rem;
}

.founder-titlewide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;

  margin-top: 1.8rem;
}

.founder-titlewide-actions .btn {
  min-height: 50px;
  padding: 0.84rem 1.3rem;
  border-radius: 0.95rem;
}

.founder-titlewide-actions .btn-primary {
  color: #fffaf1;

  border-color:
    rgba(245, 239, 226, 0.40);

  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.22),
      transparent 44%
    ),
    linear-gradient(
      135deg,
      #9d9586 0%,
      #aaa293 52%,
      #bab2a1 100%
    );

  box-shadow:
    0 18px 38px rgba(72, 61, 45, 0.17),
    0 5px 14px rgba(72, 61, 45, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.founder-titlewide-actions .btn-outline {
  color: #302c27;

  border-color:
    rgba(103, 82, 48, 0.17);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.68),
      rgba(238, 230, 218, 0.48)
    );

  box-shadow:
    0 12px 28px rgba(70, 58, 40, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

/* Keep the existing values strip */
.founder-page--titlewide .founder-values-strip {
  padding:
    clamp(4.5rem, 7vw, 7rem)
    0;

  color: #f4efe7;

  background:
    linear-gradient(
      145deg,
      #383936 0%,
      #2c2d2a 48%,
      #232421 100%
    );
}

.founder-page--titlewide .founder-values-strip .values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;

  border-top:
    1px solid rgba(236, 224, 201, 0.14);

  border-bottom:
    1px solid rgba(236, 224, 201, 0.12);
}

.founder-page--titlewide .founder-values-strip .value-item {
  min-height: 220px;
  padding:
    clamp(1.8rem, 3vw, 3rem);

  border-right:
    1px solid rgba(236, 224, 201, 0.12);
}

.founder-page--titlewide .founder-values-strip .value-item:last-child {
  border-right: 0;
}

.founder-page--titlewide .founder-values-strip .value-index {
  color: #c9a55f;
}

.founder-page--titlewide .founder-values-strip h3 {
  color: #f6f1e9;
  font-family: var(--font-body);
  font-size:
    clamp(1.35rem, 1.1rem + 0.7vw, 1.9rem);

  font-weight: 500;
  letter-spacing: -0.035em;
}

.founder-page--titlewide .founder-values-strip p {
  color: #cfc7bb;
}

@media (max-width: 980px) {
  .founder-titlewide-title {
    max-width: 18ch;
    font-size:
      clamp(2.9rem, 7vw, 4.8rem);
  }

  .founder-titlewide-shell {
    grid-template-columns: 1fr;
  }

  .founder-titlewide-portrait {
    width: min(100%, 520px);
    justify-self: center;

    border-right: 0;
    border-bottom:
      1px solid rgba(95, 73, 39, 0.14);
  }

  .founder-titlewide-content {
    padding:
      clamp(2.4rem, 6vw, 4rem)
      clamp(1.8rem, 6vw, 3.5rem);
  }
}

@media (max-width: 700px) {
  .founder-titlewide-stage {
    padding:
      calc(4.25rem + env(safe-area-inset-top))
      0
      var(--space-20);
  }

  .founder-titlewide-breadcrumb {
    margin-bottom: 1.35rem;
    font-size: 0.76rem;
  }

  .founder-titlewide-header {
    margin-bottom: 2rem;
    padding-bottom: 1.6rem;
  }

  .founder-titlewide-title {
    max-width: 13ch;

    font-size:
      clamp(2.45rem, 10.8vw, 3.6rem);

    line-height: 0.97;
  }

  .founder-titlewide-shell {
    border-radius: 1rem;
  }

  .founder-titlewide-portrait {
    width: min(100%, 360px);
  }

  .founder-titlewide-content {
    padding:
      2.1rem
      clamp(1.2rem, 6vw, 1.9rem)
      2.3rem;
  }

  .founder-titlewide-text p {
    font-size: 0.94rem;
    line-height: 1.65;
  }

  .founder-titlewide-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .founder-titlewide-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .founder-page--titlewide .founder-values-strip .values-grid {
    grid-template-columns: 1fr;
  }

  .founder-page--titlewide .founder-values-strip .value-item {
    min-height: 170px;
    border-right: 0;
    border-bottom:
      1px solid rgba(236, 224, 201, 0.12);
  }

  .founder-page--titlewide .founder-values-strip .value-item:last-child {
    border-bottom: 0;
  }
}

/* ==========================================================================
   MOBILE STABILITY + PERFORMANCE — HOMEPAGE
   Prevents the pinned hero from flashing through later sections on iOS.
   Reduces mobile paint cost while preserving the visual design.
   ========================================================================== */

/* JS toggles this class after the reverse-scroll pair has finished. */
.hero--startup.reverse-hero-passed {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transition:
    opacity 90ms linear,
    visibility 0s linear 90ms;
}

/* Re-enable immediately when scrolling back into the reverse-scroll region. */
.hero--startup:not(.reverse-hero-passed) {
  visibility: visible;
}

/* Stable, opaque compositor planes above the pinned hero. */
.manifesto--scroll-rise,
.physical-system-section,
.contact,
.founder-values-strip,
.footer {
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* No transparent gaps where the sticky hero can briefly bleed through. */
.physical-system-section {
  background-color: #e7ded0;
}

.contact {
  background-color: #2c2d2a;
}

.footer {
  position: relative;
  z-index: 20;
  background-color: #d5c9b7;
}

/* Keep the actual site header above every stacked plane. */
.header {
  z-index: 100;
}

/* Lower sections can be skipped during initial rendering. */
@supports (content-visibility: auto) {
  .physical-system-section,
  .contact,
  .founder-values-strip {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }
}

@media (max-width: 900px) {
  /*
    Large full-surface blur layers and permanent background transforms are the
    main source of mobile scrolling jank. The futuristic elements remain, but
    the expensive continuous full-area animations become static on phones.
  */
  .manifesto--scroll-rise {
    -webkit-backdrop-filter:
      blur(16px)
      saturate(106%)
      brightness(0.76);
    backdrop-filter:
      blur(16px)
      saturate(106%)
      brightness(0.76);
  }

  .manifesto--scroll-rise::before {
    -webkit-backdrop-filter:
      blur(14px)
      saturate(104%)
      brightness(0.72);
    backdrop-filter:
      blur(14px)
      saturate(104%)
      brightness(0.72);
  }

  .physical-system-shell {
    -webkit-backdrop-filter:
      blur(14px)
      saturate(106%);
    backdrop-filter:
      blur(14px)
      saturate(106%);
  }

  .header {
    -webkit-backdrop-filter:
      blur(14px)
      saturate(106%);
    backdrop-filter:
      blur(14px)
      saturate(106%);
  }

  .manifesto--scroll-rise .manifesto-bg img,
  .manifesto--scroll-rise .manifesto-bg::before,
  .manifesto--scroll-rise .container::before,
  .manifesto--scroll-rise .container::after,
  .manifesto--scroll-rise .pillar-card::after,
  .physical-system-shell .physical-status-item::after {
    animation: none !important;
  }

  .manifesto--scroll-rise .manifesto-bg img {
    transform: scale(1.025) !important;
  }

  .manifesto--scroll-rise .manifesto-bg::before {
    opacity: 0.58;
  }

  /* Small signal animations remain, but large hover zooms are disabled. */
  .physical-system-media img,
  .founder-titlewide-portrait img {
    transition: none;
  }

  .physical-system-shell:hover .physical-system-media img {
    transform: scale(1.018);
  }
}

@media (hover: none) and (pointer: coarse) {
  .hero--startup .btn-primary:hover,
  .hero--startup .btn-outline:hover,
  .physical-system-cta:hover,
  .contact .btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   FOUNDER PAGE — MOBILE TITLE FIX
   Prevents long German/English headline words from running off-screen.
   ========================================================================== */

.founder-titlewide-stage,
.founder-titlewide-stage .container,
.founder-titlewide-header {
  min-width: 0;
  overflow-x: clip;
}

.founder-titlewide-title {
  max-width: 100%;

  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  text-wrap: pretty;
}

@media (max-width: 700px) {
  .founder-titlewide-header {
    margin-bottom: 1.75rem;
    padding-bottom: 1.35rem;
  }

  .founder-titlewide-title {
    max-width: 100%;

    font-size:
      clamp(2.05rem, 9.3vw, 3rem);

    line-height: 0.99;
    letter-spacing: -0.058em;

    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

@media (max-width: 430px) {
  .founder-titlewide-title {
    font-size:
      clamp(1.95rem, 8.85vw, 2.65rem);

    line-height: 1;
    letter-spacing: -0.052em;
  }
}

/* ==========================================================================
   PHYSICAL SYSTEM — DESKTOP HEADLINE FIT
   Gives the left headline more width and keeps “anschlussfähig.” inside its column.
   ========================================================================== */

@media (min-width: 981px) {
  .physical-system-copy {
    grid-template-columns:
      minmax(0, 1.08fr)
      minmax(360px, 0.92fr);

    column-gap:
      clamp(2.75rem, 4vw, 4.75rem);
  }

  .physical-system-copy::before {
    left: 53.1%;
  }

  .physical-system-copy h2 {
    max-width: 13ch;

    font-size:
      clamp(2.55rem, 3.75vw, 4.65rem);

    line-height: 0.96;
    letter-spacing: -0.062em;

    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
}

/* ==========================================================================
   CONNECTCIRCUIT — PRIVATE ACCESS ENTRY
   Public header link to the fully separate access.connectcircuit.com project.
   ========================================================================== */

.nav-private-access {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  flex-shrink: 0;

  min-height: 42px;
  padding: 0.68rem 0.92rem;

  border: 1px solid rgba(117, 92, 49, 0.18);
  border-radius: 0.82rem;

  color: #4b4439;
  text-decoration: none;
  white-space: nowrap;

  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.035em;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.58),
      rgba(238, 229, 216, 0.36)
    );

  box-shadow:
    0 10px 24px rgba(69, 54, 32, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);

  -webkit-backdrop-filter:
    blur(14px)
    saturate(108%);
  backdrop-filter:
    blur(14px)
    saturate(108%);

  transition:
    color 240ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 240ms ease,
    box-shadow 240ms ease,
    background 240ms ease;
}

.nav-private-access::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    linear-gradient(
      112deg,
      rgba(255, 255, 255, 0.22),
      transparent 44%
    );
}

.nav-private-access svg {
  flex-shrink: 0;
  color: #9e7935;

  filter:
    drop-shadow(0 0 7px rgba(193, 145, 54, 0.20));
}

.nav-private-access:hover {
  color: #2f2a23;

  transform: translateY(-2px);

  border-color:
    rgba(163, 123, 52, 0.34);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.72),
      rgba(232, 221, 205, 0.48)
    );

  box-shadow:
    0 15px 32px rgba(69, 54, 32, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.nav-private-access:hover svg {
  color: #b58b42;
}

/* Compact the navigation gracefully before the mobile breakpoint. */
@media (max-width: 1180px) and (min-width: 861px) {
  .nav {
    gap: 1rem;
  }

  .nav-links {
    gap: 1rem;
  }

  .nav-links a {
    font-size: 0.78rem;
  }

  .nav-private-access {
    padding-inline: 0.74rem;
  }

  .nav-private-access span {
    max-width: 5.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-cta {
    padding-inline: 1rem;
  }
}

@media (max-width: 860px) {
  .nav-private-access {
    display: none;
  }
}

/* Mobile drawer access module */
.mobile-private-access {
  position: relative;
  overflow: hidden;

  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;

  margin-top: 0.7rem;
  padding: 1rem 1.05rem !important;

  border: 1px solid rgba(137, 104, 48, 0.20);
  border-radius: 0.95rem;

  color: #2f2a23 !important;
  text-decoration: none;

  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(255, 255, 255, 0.54),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.54),
      rgba(220, 207, 188, 0.50)
    );

  box-shadow:
    0 18px 38px rgba(65, 49, 25, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.mobile-private-access::after {
  content: '';
  position: absolute;
  inset: auto 1rem 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(180, 137, 57, 0.44),
      rgba(248, 224, 176, 0.72),
      rgba(180, 137, 57, 0.44),
      transparent
    );
}

.mobile-private-access-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 35px;
  height: 35px;
  border-radius: 50%;

  color: #a77f35;

  border:
    1px solid rgba(166, 126, 54, 0.22);

  background:
    rgba(255, 255, 255, 0.36);

  box-shadow:
    0 0 0 5px rgba(180, 137, 57, 0.035),
    0 0 16px rgba(180, 137, 57, 0.13);
}

.mobile-private-access > span:nth-child(2) {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.015em;
}

.mobile-private-access-arrow {
  color: #88745a;

  transition:
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-private-access:hover .mobile-private-access-arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .nav-private-access,
  .mobile-private-access-arrow {
    transition: none;
  }
}