/* === BAU DATA PLATTFORM — by LEANATIC === */
/* Dark industrial · Hi-Vis safety yellow · Space Grotesk + JetBrains Mono */

:root {
  /* Greys (dark base) */
  --bg:       oklch(13% 0.006 260);
  --bg-2:     oklch(15% 0.007 260);
  --bg-3:     oklch(18% 0.008 260);
  --bg-4:     oklch(22% 0.008 260);
  --line:     oklch(26% 0.008 260);
  --line-2:   oklch(32% 0.008 260);
  --ink:      oklch(96% 0.008 95);
  --ink-2:    oklch(78% 0.009 90);
  --ink-3:    oklch(58% 0.011 260);
  --ink-4:    oklch(40% 0.011 260);

  /* Hi-vis safety yellow (Bau-Warnfarbe, DIN 1450-adjacent) */
  --hi:        oklch(91% 0.20 105);
  --hi-2:      oklch(95% 0.20 102);
  --hi-soft:   oklch(91% 0.20 105 / 0.12);
  --hi-line:   oklch(91% 0.20 105 / 0.32);

  /* Blueprint blue for data motion */
  --blue:      oklch(68% 0.16 240);
  --blue-soft: oklch(68% 0.16 240 / 0.18);

  /* Warm cream (only used in Guarantee section) */
  --cream:     oklch(95% 0.020 90);
  --cream-2:   oklch(91% 0.025 80);
  --cream-ink: oklch(18% 0.008 60);
  --cream-line:oklch(82% 0.030 80);

  /* States */
  --ok:        oklch(74% 0.18 145);
  --warn:      oklch(78% 0.16 75);
  --bad:       oklch(70% 0.20 25);

  --shadow-md: 0 8px 24px -10px rgba(0,0,0,0.6);
  --shadow-lg: 0 30px 80px -32px rgba(0,0,0,0.7), 0 6px 20px rgba(0,0,0,0.4);

  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-xl: 24px;

  --container: 1320px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.5;
  background:
    radial-gradient(ellipse 1200px 600px at 50% -200px, oklch(20% 0.018 95 / 0.18), transparent 70%),
    var(--bg);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ===================== layout ===================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}

.container-wide {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}

section { position: relative; }

/* ===================== top bar (minimal brand only) ===================== */

.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 24px 0;
  pointer-events: none;
}

.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  pointer-events: auto;
}

.brand {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  line-height: 1;
}

.brand-mark {
  width: 32px;
  height: 32px;
  display: block;
  flex: 0 0 auto;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 1px;
}

.brand-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.brand-sub b { color: var(--hi); font-weight: 500; }

.topbar-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.topbar-meta::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--hi);
  border-radius: 1px;
}

/* ===================== buttons ===================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  transition: transform 0.15s, background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  border: 1px solid transparent;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--hi);
  color: oklch(15% 0.02 95);
  border-color: var(--hi);
  box-shadow: 0 0 0 1px oklch(91% 0.20 105 / 0.2), 0 12px 30px -12px oklch(91% 0.20 105 / 0.5);
}
.btn-primary:hover { background: var(--hi-2); border-color: var(--hi-2); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-ghost:hover {
  background: var(--bg-3);
  border-color: var(--ink-4);
}

.btn-arrow {
  display: inline-flex;
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}
.btn:hover .btn-arrow { transform: translateX(2px); }

/* ===================== hero ===================== */

.hero {
  padding: 140px 0 100px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, oklch(26% 0.008 260) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(26% 0.008 260) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black, transparent 100%);
  opacity: 0.4;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: 4px;
  margin-bottom: 28px;
}

.hero-tag .square {
  width: 8px;
  height: 8px;
  background: var(--hi);
}

.hero h1 {
  font-size: clamp(48px, 6.6vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0 0 28px;
  color: var(--ink);
  text-wrap: balance;
}

.hero h1 .hi {
  color: var(--hi);
}

.hero h1 .mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.82em;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 0 0.18em;
  border-radius: 6px;
  display: inline-block;
  line-height: 1.05;
}

.hero h1 .crossed {
  position: relative;
  color: var(--ink-3);
}
.hero h1 .crossed::after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  top: 53%;
  height: 0.06em;
  background: var(--hi);
  transform: rotate(-3deg);
}

.hero p.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 580px;
  text-wrap: pretty;
  margin: 0;
}

.hero-cta {
  margin-top: 36px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-meta {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 0;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.hero-meta > div {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-right: 40px;
}

.hero-meta > div + div {
  padding-left: 40px;
  border-left: 1px solid var(--line);
}

.hero-meta div span {
  display: block;
  font-size: 24px;
  font-family: var(--font-sans);
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  font-feature-settings: "tnum";
  font-weight: 600;
  text-transform: none;
}

.hero-side {
  position: relative;
  aspect-ratio: 1 / 1.05;
  width: 100%;
}

/* corner brackets around the hero diagram */
.hero-side::before,
.hero-side::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--hi);
  z-index: 3;
}
.hero-side::before {
  top: -2px; left: -2px;
  border-right: 0; border-bottom: 0;
}
.hero-side::after {
  bottom: -2px; right: -2px;
  border-left: 0; border-top: 0;
}

.hero-side-label {
  position: absolute;
  top: -2px;
  right: -2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 4px 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  z-index: 4;
}

/* ===================== logos marquee ===================== */

.logos {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
  overflow: hidden;
  background: var(--bg-2);
}

.logos-row {
  display: flex;
  gap: 64px;
  align-items: center;
}

.logos-label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-right: 24px;
  border-right: 1px solid var(--line);
}

.logos-marquee {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 60px, black calc(100% - 60px), transparent);
}

.logos-track {
  display: flex;
  gap: 64px;
  align-items: center;
  animation: marquee 38s linear infinite;
  width: max-content;
}

.logos-track .logo {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  white-space: nowrap;
  font-family: var(--font-sans);
  opacity: 0.8;
  transition: opacity 0.2s, color 0.2s;
}
.logos-track .logo:hover { opacity: 1; color: var(--ink); }

.logos-track .logo .small {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  margin-left: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
}

@keyframes marquee {
  to { transform: translateX(calc(-50% - 32px)); }
}

/* ===================== section header (no chapter numbers) ===================== */

.section-head {
  position: relative;
  z-index: 2;
  padding: 96px 0 56px;
  max-width: 920px;
}

.section-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hi);
  margin-bottom: 18px;
}
.section-head .kicker::before {
  content: "■";
  font-size: 7px;
  line-height: 1;
}

.section-head h2 {
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

.section-head h2 .hi { color: var(--hi); }
.section-head h2 .mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78em;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 0 0.16em;
  border-radius: 6px;
  display: inline-block;
  line-height: 1.05;
}

.section-head .lede {
  margin-top: 22px;
  color: var(--ink-2);
  font-size: 18px;
  max-width: 680px;
  text-wrap: pretty;
}

/* ===================== manifest section (no chapter label) ===================== */

.manifest {
  padding: 64px 0 24px;
  border-top: 1px solid var(--line);
  position: relative;
}

.manifest::before {
  content: "// THESIS";
  position: absolute;
  top: 20px;
  left: 32px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink-4);
}

.manifest-quote {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.024em;
  font-weight: 500;
  margin: 32px 0 0;
  color: var(--ink);
  max-width: 1180px;
  text-wrap: balance;
}

.manifest-quote .hi {
  color: var(--hi);
}

.manifest-quote strong {
  font-weight: 600;
  color: var(--ink);
  background: var(--hi-soft);
  padding: 0 6px;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ===================== problems / solutions split ===================== */

.split {
  padding: 32px 0 96px;
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.split-card {
  position: relative;
  border-radius: var(--r-lg);
  padding: 36px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
}

.split-card.solutions {
  border-color: var(--hi-line);
  background:
    radial-gradient(ellipse 600px 200px at 100% 0%, var(--hi-soft), transparent 60%),
    var(--bg-2);
}

.split-card h3 {
  font-size: 13px;
  margin: 0 0 28px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.split-card.solutions h3 { color: var(--hi); }

.split-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.split-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  letter-spacing: -0.003em;
  color: var(--ink);
}

.split-list li:last-child { padding-bottom: 0; }

.split-list .ico {
  width: 30px;
  height: 22px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  border-right: 1px solid var(--line);
  text-align: left;
  padding-right: 8px;
  justify-self: stretch;
}

.split-card.solutions .split-list .ico {
  color: var(--hi);
}

/* ===================== capabilities grid ===================== */

.caps { padding: 32px 0 96px; }

.caps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-2);
}

.cap {
  background: var(--bg-2);
  padding: 28px 28px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 330px;
  cursor: pointer;
  transition: background 0.25s ease;
  overflow: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.caps-grid > .cap:nth-child(3n) { border-right: 0; }
.caps-grid > .cap:nth-last-child(-n+3) { border-bottom: 0; }

.cap:hover { background: var(--bg-3); }
.cap:hover .cap-num { color: var(--hi); }

.cap-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.cap-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.cap-num b { color: var(--ink-2); font-weight: 500; }

.cap-id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.1em;
}

.cap-title {
  font-size: 21px;
  letter-spacing: -0.018em;
  margin: 0 0 10px;
  font-weight: 600;
  color: var(--ink);
}

.cap-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

.cap-vis {
  margin-top: auto;
  padding-top: 22px;
  height: 110px;
  position: relative;
}

.cap-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.cap-tags span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-2);
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-3);
  letter-spacing: 0.04em;
}

/* ===================== agent demo section ===================== */

.demo { padding: 32px 0 96px; }

.demo-frame {
  background: linear-gradient(180deg, var(--bg-2), oklch(13% 0.006 260));
  border-radius: var(--r-xl);
  padding: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.demo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%, var(--hi-soft), transparent 40%),
    radial-gradient(circle at 100% 100%, var(--blue-soft), transparent 45%);
  pointer-events: none;
}

.demo-bar {
  position: absolute;
  top: 14px; left: 14px; right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding: 0 14px;
  height: 32px;
  z-index: 3;
  pointer-events: none;
}

.demo-bar .l { display: flex; gap: 14px; align-items: center; }
.demo-bar .dots { display: flex; gap: 5px; }
.demo-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-4); display: inline-block; }
.demo-bar .dots i.live { background: var(--hi); box-shadow: 0 0 8px var(--hi); }

.demo-inner {
  position: relative;
  display: grid;
  grid-template-columns: 280px 1fr 1fr;
  gap: 14px;
  min-height: 560px;
  margin-top: 38px;
}

.demo-pane {
  background: var(--bg-3);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
}

.demo-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

.demo-pane-head .pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--bg-4);
  color: var(--ink-2);
  border: 1px solid var(--line);
  text-transform: none;
  letter-spacing: 0;
}

.demo-pane-head .pill.hi {
  background: var(--hi-soft);
  color: var(--hi);
  border-color: var(--hi-line);
}

.demo-pane-body {
  padding: 14px;
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  overflow: hidden;
  position: relative;
}

.task-list { display: flex; flex-direction: column; gap: 6px; }

.task {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--bg-2);
  border: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}

.task.active {
  background: oklch(20% 0.04 95);
  border-color: var(--hi-line);
}

.task.done .check {
  background: var(--ok);
  color: var(--bg);
}

.task .check {
  width: 16px; height: 16px;
  border-radius: 3px;
  background: var(--bg-4);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--ink-3);
}

.task.active .check {
  background: var(--hi);
  color: oklch(15% 0.02 95);
  animation: spin 1.5s linear infinite;
}

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

.task .label { color: var(--ink); font-size: 12px; }
.task .meta { color: var(--ink-3); font-size: 11px; }

.demo-logs {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.demo-logs .row {
  display: grid;
  grid-template-columns: 56px 18px 1fr;
  gap: 10px;
  padding: 2px 0;
}

.demo-logs .ts { color: var(--ink-4); }
.demo-logs .lvl-info { color: var(--blue); }
.demo-logs .lvl-ok   { color: var(--ok); }
.demo-logs .lvl-warn { color: var(--warn); }

.demo-data { display: flex; flex-direction: column; }

.demo-data-body {
  padding: 14px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  height: 100%;
}

.dd-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.dd-stat strong {
  font-family: var(--font-sans);
  font-size: 36px;
  letter-spacing: -0.024em;
  color: var(--ink);
  font-weight: 600;
  text-transform: none;
}

.dd-stat strong span { color: var(--hi); font-size: 18px; margin-left: 4px; }

.dd-row {
  display: grid;
  grid-template-columns: 90px 1fr 60px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.dd-row:first-child { border-top: 0; padding-top: 0; }

.dd-row .key { color: var(--ink-3); }
.dd-row .val { color: var(--ink); text-align: right; font-feature-settings: "tnum"; }

.dd-bar {
  height: 6px;
  border-radius: 1px;
  background: var(--bg-4);
  overflow: hidden;
  position: relative;
}

.dd-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--hi), var(--hi-2));
  transition: width 0.6s cubic-bezier(.2,.7,.2,1);
}

.demo-data-foot {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-data-foot span {
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}

/* ===================== two services ===================== */

.services { padding: 32px 0 96px; }

.svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.svc-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 40px;
  display: flex;
  flex-direction: column;
  min-height: 500px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
}

.svc-card:hover { border-color: var(--line-2); }

.svc-card.featured {
  border-color: var(--hi-line);
  background:
    radial-gradient(ellipse 600px 300px at 100% 0%, var(--hi-soft), transparent 70%),
    var(--bg-2);
}

.svc-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-3);
  width: max-content;
}

.svc-card.featured .svc-tag {
  background: var(--hi-soft);
  color: var(--hi);
  border-color: var(--hi-line);
}

.svc-card h3 {
  font-size: 34px;
  letter-spacing: -0.025em;
  font-weight: 600;
  line-height: 1.08;
  margin: 22px 0 16px;
  text-wrap: balance;
  color: var(--ink);
}

.svc-card h3 .hi { color: var(--hi); }

.svc-card p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

.svc-bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  margin: 24px 0 28px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  list-style: none;
  padding: 0;
}

.svc-bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px dashed var(--line);
  color: var(--ink);
}

.svc-bullets li::before {
  content: "+";
  color: var(--hi);
  font-weight: 600;
}

.svc-foot {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.svc-foot .timeline {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.svc-card.featured .svc-foot .timeline { color: var(--hi); }

/* ===================== testimonial ===================== */

.testimonial {
  padding: 96px 0;
  border-top: 1px solid var(--line);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 64px;
  align-items: center;
}

.testimonial .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hi);
  margin-bottom: 24px;
}
.testimonial .kicker::before {
  content: "■";
  font-size: 7px;
  line-height: 1;
}

.testimonial blockquote {
  font-family: var(--font-sans);
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.22;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  text-wrap: balance;
}

.testimonial blockquote .quotemark {
  font-family: var(--font-sans);
  font-size: 1.4em;
  line-height: 0;
  color: var(--hi);
  margin-right: 4px;
  vertical-align: -0.15em;
  font-weight: 700;
}

.testimonial cite {
  font-style: normal;
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

.testimonial cite strong {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  display: block;
}

.testimonial cite small {
  font-size: 10.5px;
  font-family: var(--font-mono);
  display: block;
}

.test-avatar {
  width: 44px;
  height: 44px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--hi);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  border-radius: 4px;
}

.test-figure {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--bg-2);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  background-image: repeating-linear-gradient(135deg, transparent 0 12px, oklch(18% 0.008 260) 12px 13px);
  display: grid;
  place-items: center;
}

.test-figure .placeholder {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  text-align: center;
  padding: 12px;
  background: var(--bg);
  border: 1px dashed var(--line-2);
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.6;
}

.test-stats {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}

.test-stat .n {
  font-size: 28px;
  letter-spacing: -0.022em;
  font-weight: 600;
  color: var(--ink);
}

.test-stat .l {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 4px;
}

/* ===================== guarantee (cream break) ===================== */

.guarantee {
  padding: 80px 0;
  background: var(--cream);
  color: var(--cream-ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.guarantee::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg,
      var(--cream) 0,
      var(--cream) 24px,
      transparent 24px,
      transparent 30px),
    linear-gradient(135deg,
      var(--cream-2) 0,
      var(--cream-2) 30px,
      transparent 30px);
  background-size: 30px 30px, 30px 30px;
  opacity: 0;
  pointer-events: none;
}

.guarantee-card {
  background: var(--cream);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 56px;
  align-items: center;
}

.guarantee-stamp {
  width: 220px;
  height: 220px;
  position: relative;
}

.guarantee-stamp .ring { position: absolute; inset: 0; animation: spin 32s linear infinite; }

.guarantee-stamp .ring text {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  fill: var(--cream-ink);
  text-transform: uppercase;
}

.guarantee-stamp .ring-bg {
  fill: none;
  stroke: var(--cream-ink);
  stroke-dasharray: 2 4;
  stroke-width: 1;
  opacity: 0.4;
}

.guarantee-stamp .center {
  position: absolute;
  inset: 24px;
  border: 1px solid var(--cream-line);
  background:
    repeating-linear-gradient(45deg, transparent 0 6px, oklch(91% 0.022 95) 6px 7px),
    var(--cream);
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
}

.guarantee-stamp .center strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 64px;
  line-height: 0.9;
  color: var(--cream-ink);
  letter-spacing: -0.04em;
  font-weight: 700;
}

.guarantee-stamp .center span {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--cream-ink);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

.guarantee .svc-tag {
  background: var(--cream);
  border-color: var(--cream-line);
  color: var(--cream-ink);
}

.guarantee h3 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.024em;
  margin: 0 0 16px;
  font-weight: 600;
  text-wrap: balance;
  color: var(--cream-ink);
}

.guarantee h3 .hi {
  background: oklch(15% 0.02 95);
  color: var(--hi);
  padding: 0 8px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.guarantee p {
  margin: 0;
  font-size: 16px;
  color: var(--cream-ink);
  opacity: 0.85;
  line-height: 1.55;
  max-width: 580px;
}

.guarantee .author {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cream-ink);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ===================== contact / team ===================== */

.contact {
  padding: 96px 0 96px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.contact-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 24px;
}

.team {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.team-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, background 0.2s;
}

.team-card:hover {
  border-color: var(--hi-line);
  background: var(--bg-3);
}

.team-avatar {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--hi);
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}

.team-card .name {
  font-size: 17px;
  letter-spacing: -0.012em;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}

.team-card .role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-top: 4px;
}

.team-card .channels {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
}

.team-card .channels a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  transition: color 0.15s;
}

.team-card .channels a:hover { color: var(--hi); }
.team-card .channels svg { width: 14px; height: 14px; color: var(--ink-3); flex: 0 0 auto; }

/* contact form */
.contact-form {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-form .field label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #f3f3ec;
  display: block;
  margin-bottom: 6px;
}

.contact-form .field input,
.contact-form .field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 12px 14px;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.contact-form .field input::placeholder,
.contact-form .field textarea::placeholder { color: var(--ink-3); opacity: 1; }

.contact-form .field input:focus,
.contact-form .field textarea:focus {
  border-color: var(--hi);
  background: var(--bg-3);
  box-shadow: 0 0 0 3px var(--hi-soft);
}

.contact-form .field textarea { min-height: 96px; resize: vertical; }

.contact-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contact-form .submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.contact-form .submit small {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-4);
}

.contact-cta-strip {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  align-items: center;
  letter-spacing: 0.06em;
}

.contact-cta-strip span {
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: 4px;
}

/* ===================== footer (minimal) ===================== */

footer.foot {
  border-top: 1px solid var(--line);
  padding: 32px 0;
  background: var(--bg);
  color: var(--ink-3);
  font-size: 13px;
}

.foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.foot-row .left {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.foot-row .left a { color: var(--ink-2); }
.foot-row .left a:hover { color: var(--hi); }

.foot-row .right {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.foot-row .right span,
.foot-row .right a {
  color: var(--ink-3);
  transition: color 0.15s;
}
.foot-row .right a:hover { color: var(--ink); }

/* ===================== reveal animations ===================== */

/* Reveal: bulletproof — always visible. Optional transform-only slide when JS opts in. */
.reveal {
  opacity: 1;
  transform: none;
}

.js-reveal .reveal {
  transform: translateY(14px);
  transition: transform 0.7s cubic-bezier(.2,.7,.2,1);
}

.js-reveal .reveal.is-visible {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { transform: none; transition: none; }
  .logos-track, .guarantee-stamp .ring, .task.active .check { animation: none; }
}

/* ===================== responsive ===================== */

@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .demo-inner { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .guarantee-card { grid-template-columns: 1fr; gap: 36px; padding: 0; }
  .caps-grid { grid-template-columns: repeat(2, 1fr); }
  .caps-grid > .cap { border-right: 1px solid var(--line); }
  .caps-grid > .cap:nth-child(2n) { border-right: 0; }
  .caps-grid > .cap:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .caps-grid > .cap:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 720px) {
  .container, .container-wide { padding: 0 20px; }
  .hero { padding: 110px 0 64px; }
  .split-grid { grid-template-columns: 1fr; }
  .caps-grid { grid-template-columns: 1fr; }
  .caps-grid > .cap { border-right: 0; border-bottom: 1px solid var(--line) !important; }
  .caps-grid > .cap:last-child { border-bottom: 0 !important; }
  .svc-grid { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form .row { grid-template-columns: 1fr; }
  .hero-meta { grid-template-columns: 1fr; gap: 12px; }
  .hero-meta > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
  .hero-meta > div { padding-right: 0; }
  .topbar-meta { display: none; }
  .foot-row { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* === LEAN PARTS landing page additions (loads after styles.css) === */
.aos-topbar{position:fixed;inset:0 0 auto 0;padding:20px 0;pointer-events:none;transition:padding .25s cubic-bezier(.2,.8,.2,1),background .25s,border-color .25s;border-bottom:1px solid transparent}
.aos-topbar.stuck{padding:12px 0;background:oklch(13% 0.006 260 / .85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--line)}
.lp-brand{display:inline-flex;align-items:center;font-size:32px;text-decoration:none;line-height:1}
.lp-brand .lp-mark{width:1em;height:1em;display:block;flex:0 0 auto}
.foot-legal{text-transform:none}
.guarantee-photo{overflow:hidden;border-radius:50%;border:2px solid var(--cream-line);animation:none}
.guarantee-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.team-avatar{overflow:hidden}
.team-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.lp-name{font-family:var(--font-sans);font-weight:700;font-size:.62em;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);margin-left:.34em;padding-top:.07em;white-space:nowrap}
.aos-topbar-cta{padding:11px 16px;font-size:13.5px}
@media (max-width:640px){.lp-name{display:none}.aos-topbar-cta{padding:10px 14px;font-size:13px}}
/* hero: 2/3 typo, 1/3 graphic — from tablet up */
@media (min-width:1025px){.hero-inner{grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:56px;align-items:center}}
@media (min-width:768px) and (max-width:1024px){.hero-inner{grid-template-columns:minmax(0,2fr) minmax(220px,1fr)!important;gap:36px!important;align-items:center}}
.hero-inner>*{min-width:0}
.hero-meta{min-width:0}
.hero-meta>div{min-width:0}
@media (max-width:1180px){.hero-meta{gap:0}}
.hero-side{aspect-ratio:1/1.25}
.hero-side canvas{padding:1px}
.hero-inner>div:first-child{container-type:inline-size}
.hero h1{font-size:clamp(28px,9.1cqw,96px);line-height:.98;letter-spacing:-.035em;text-wrap:nowrap}
.hero h1 .l{display:block;white-space:nowrap}
@supports not (font-size:1cqw){.hero h1{font-size:clamp(30px,4.5vw,80px)}@media (min-width:768px) and (max-width:1024px){.hero h1{font-size:clamp(30px,4.3vw,52px)}}@media (max-width:767px){.hero h1{font-size:clamp(26px,8.2vw,50px)}}}
.hero h1 .mono{font-size:.94em;white-space:nowrap}
.hero .lede{max-width:44em}
.hero-meta{grid-template-columns:repeat(3,auto);justify-content:start}
.hero-meta > div > span:not(.big),.hero-meta > div > span span{display:inline;font-size:14px;font-family:inherit;font-weight:inherit;color:#FFFFFF;letter-spacing:inherit;line-height:inherit;margin:0;white-space:normal}
.hero-meta > div > span.big{display:block;font-size:clamp(17px,3.6cqw,24px);letter-spacing:-.02em;white-space:nowrap}
.hero-meta > div > span.big span{font-size:inherit;font-family:inherit;color:var(--ink);display:inline}
@media (max-width:1180px){.hero-meta>div+div{padding-left:18px}.hero-meta>div{padding-right:18px}}
/* offer */
.offer{padding:32px 0 96px}
.offer-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:stretch}
.offer-close{margin-top:auto;padding-top:24px;border-top:1px dashed var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.offer-card .price{display:flex;align-items:baseline;gap:14px;margin:0;padding:0;border:0}
.offer-card .price strong{font-size:40px;letter-spacing:-.03em;font-weight:600;color:var(--ink);line-height:1}
.offer-card .price span{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);max-width:190px;line-height:1.5}
.offer-close .btn{flex:0 0 auto}
@media (max-width:720px){.offer-close{flex-direction:column;align-items:stretch;gap:18px}.offer-card .price{flex-direction:column;gap:8px}.offer-card .price strong{font-size:34px}.offer-card .price span{max-width:none}.offer-close .btn{width:100%;justify-content:center}}
.proc{display:flex;flex-direction:column;gap:0;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-xl);padding:12px 40px;height:100%}
.proc-head{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);padding:24px 0 8px}
.step{display:grid;grid-template-columns:44px 1fr auto;gap:20px;padding:26px 0;border-top:1px solid var(--line);align-items:start}
.step:last-child{padding-bottom:30px}
.step .n{font-family:var(--font-mono);font-size:12px;color:var(--hi);padding-top:5px}
.step h4{margin:0 0 8px;font-size:20px;font-weight:600;letter-spacing:-.018em;color:var(--ink)}
.step p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.step .dur{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em;padding:4px 8px;border:1px solid var(--line);border-radius:3px;background:var(--bg-3);white-space:nowrap}
.step.hot .dur{color:var(--hi);border-color:var(--hi-line);background:var(--hi-soft)}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
.benefit{padding:28px 32px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2)}
.benefit .k{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--hi);margin-bottom:14px}
.benefit h4{margin:0 0 8px;font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.benefit p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.offer-lead{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}
/* thesis decision */
.manifest-quote{max-width:920px}
.manifest-decide{margin-top:34px;max-width:920px}
.md-lead{margin:0 0 14px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#B9B8B1}
.md-opts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.md-opts li{display:flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);font-size:17px;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.md-opts .box{width:22px;height:22px;flex:0 0 auto;border:1px solid var(--line);border-radius:3px;display:grid;place-items:center;background:var(--bg-3)}
.md-opts .box svg{width:14px;height:14px}
.md-opts .box-a{color:var(--hi);border-color:var(--hi-line);background:var(--hi-soft)}
.md-opts .box-b{color:var(--ink-3)}
/* module "Bald" badge — aligned with .cap-id baseline */
.cap-head{align-items:center;min-height:19px}
.cap-soon{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--hi);border:1px solid var(--hi-line);background:var(--hi-soft);padding:1px 7px;border-radius:3px;text-transform:uppercase;line-height:1.5}
/* module 06 visual: full width, cropped at the bottom like 03/04 */
.cap-vis-wide{margin-top:auto;padding-top:22px;position:relative}
.cap-vis-wide svg{display:block;width:100%;height:auto;margin-bottom:-14px}
/* quote cloud */
.quotes{padding:64px 0 96px;border-top:1px solid var(--line)}
.quote-cloud{columns:3;column-gap:20px}
.quote-card{break-inside:avoid;margin:0 0 20px;padding:24px 26px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg)}
.quote-card:nth-child(3n+2){margin-left:0;background:var(--bg-3)}
.quote-card blockquote{margin:0;font-size:16px;line-height:1.5;color:var(--ink);letter-spacing:-.012em;text-wrap:pretty}
.quote-card.big blockquote{font-size:22px;line-height:1.35}
.quote-card blockquote::before{content:"„";color:var(--hi);margin-right:1px}
.quote-card blockquote::after{content:"\201C"}
.quote-card figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.quote-card figcaption strong{font-size:13.5px;font-weight:600;color:var(--ink)}
.quote-card figcaption small{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
@media (max-width:980px){.quote-cloud{columns:2}}
@media (max-width:680px){.quote-cloud{columns:1}.quote-card.big blockquote{font-size:18px}}
/* contact tags: single frame */
.contact-cta-strip span{border:1px solid var(--line);outline:0;box-shadow:none;background:var(--bg-2)}
/* about */
.about{padding:88px 0 96px;border-top:1px solid var(--line);background:var(--bg-2)}
.about-grid{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:start}
.about-head{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.about-lockup{display:flex;align-items:center;gap:14px}
.about-lockup .lp-mark{width:44px;height:44px;flex:0 0 auto}
.about-lockup-text{display:flex;flex-direction:column;gap:5px}
.about-lockup-text strong{font-family:var(--font-sans);font-weight:700;font-size:26px;line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)}
.about-lockup-text small{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.about-body p{margin:0 0 18px;font-size:16px;line-height:1.65;color:var(--ink-2);text-wrap:pretty}
.about-lead{font-size:24px!important;line-height:1.35!important;color:var(--ink)!important;letter-spacing:-.02em;font-weight:500}
@media (max-width:860px){.about-grid{grid-template-columns:1fr;gap:28px}}
@media (max-width:980px){.offer-grid,.benefits{grid-template-columns:1fr}.step{grid-template-columns:36px 1fr}.step .dur{grid-column:2}}

/* === Impressum legal styles === */
.legal-head{padding:150px 0 0}
.legal-head .kicker{margin-bottom:22px}
.legal-head h1{margin:0;font-size:clamp(40px,6vw,84px);line-height:1;letter-spacing:-.04em;font-weight:600}
.legal-head p{margin:26px 0 0;font-size:18px;line-height:1.6;color:var(--ink-2);max-width:620px;text-wrap:pretty}
.legal{padding:64px 0 96px}
.legal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;align-items:start}
.card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);padding:34px 36px}
.card h2{margin:0 0 24px;font-size:13px;font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hi);font-weight:400}
.dl{display:grid;grid-template-columns:auto 1fr;gap:14px 26px;margin:0;font-size:16px;line-height:1.55}
.dl dt{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:4px}
.dl.stack{grid-template-columns:1fr;gap:6px 0}
.dl.stack dt{padding-top:14px}
.dl.stack dt:first-child{padding-top:0}
.dl dd{margin:0;color:var(--ink)}
.dl dd b{font-weight:600}
.dl dd small{display:block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);margin-top:5px}
.card + .card{margin-top:0}
.terms{margin-top:56px;border-top:1px solid var(--line);padding-top:48px;max-width:74ch}
.terms h2{margin:0 0 8px;font-size:30px;font-weight:600;letter-spacing:-.025em}
.terms > p{margin:0 0 40px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.para{display:grid;grid-template-columns:1fr;gap:14px;padding:30px 0;border-top:1px solid var(--line)}
.para h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.para h3 span{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;color:var(--hi);margin-right:12px;font-weight:400}
.para p{margin:0;font-size:16px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}
.para p + p{margin-top:14px}
.back{display:inline-flex;align-items:center;gap:10px;margin-top:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-decoration:none}
.back:hover{color:var(--hi)}
@media (max-width:900px){.legal-head{padding-top:120px}}

/* Form status messages */
.contact-form .form-status{margin-top:16px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.contact-form .form-status.ok{color:var(--ok)}
.contact-form .form-status.err{color:var(--bad)}
.contact-form .form-status.ok strong{color:var(--ink);display:block;margin-bottom:6px;font-size:17px}
.contact-form button:disabled{opacity:.55;cursor:not-allowed}