/* ═══════════════════════════════════════════════════════════
   Zykloid Landing — editorial, warm, zyklus-zentriert
   Palette aus /static/style.css übernommen
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg: #fdf6ee;
  --bg-deep: #f5ebe0;
  --ink: #3d2b1f;
  --ink-mute: #7a5c44;
  --ink-dim: #9c7b60;
  --paper: #fff9f3;
  --line: #e8d5c0;
  --line-strong: #d4b896;

  --terra: #c1440e;
  --terra-soft: #f5d0bf;
  --terra-glow: rgba(193, 68, 14, 0.08);

  --sage: #4a7c59;
  --sage-soft: #daeede;

  --dove: #3a6186;
  --dove-soft: #d6e4ef;

  --ocher: #d4a017;

  --serif: 'Fraunces', 'Times New Roman', serif;
  --mono: 'DM Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--mono);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Papier-Textur analog zur App */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0;
}

/* Dezente Marginalia-Linien links & rechts (editorial) */
body::after {
  content: '';
  position: fixed;
  top: 0; bottom: 0;
  left: 48px; right: 48px;
  border-left: 1px solid rgba(61, 43, 31, 0.04);
  border-right: 1px solid rgba(61, 43, 31, 0.04);
  pointer-events: none;
  z-index: 0;
}

.shell { position: relative; z-index: 1; }

/* ── SITE-WIDE TECH BACKGROUND ─────────────────── */
.tech-bg {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Blueprint-Grid (fein, dezent, driftet langsam) */
.tech-bg .tech-grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(to right,  rgba(61, 43, 31, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(61, 43, 31, 0.045) 1px, transparent 1px),
    linear-gradient(to right,  rgba(61, 43, 31, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(61, 43, 31, 0.025) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  mask-image: radial-gradient(ellipse at center, black 10%, rgba(0,0,0,0.55) 55%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 10%, rgba(0,0,0,0.55) 55%, transparent 95%);
  animation: grid-drift 90s linear infinite;
}

@keyframes grid-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 120px 120px, 120px 120px, 24px 24px, 24px 24px; }
}

/* Neuronales Mesh: ein zusammenhaengendes Netz, JS-generiert */
.tech-bg .tech-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  mask-image: radial-gradient(ellipse at center, black 20%, rgba(0,0,0,0.75) 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, rgba(0,0,0,0.75) 60%, transparent 100%);
}

.net-edge {
  stroke: var(--terra);
  stroke-width: 0.9;
  fill: none;
  opacity: 0.22;
  animation: edge-fade var(--fade-dur, 10s) ease-in-out var(--fade-delay, 0s) infinite;
}

.net-node {
  fill: var(--terra);
  opacity: 0.5;
  animation: node-fade var(--fade-dur, 6s) ease-in-out var(--fade-delay, 0s) infinite;
}

.net-halo {
  fill: none;
  stroke: var(--terra);
  stroke-width: 0.6;
  opacity: 0.12;
  animation: halo-fade var(--fade-dur, 10s) ease-in-out var(--fade-delay, 0s) infinite;
}

@keyframes edge-fade {
  0%, 100% { opacity: 0.12; }
  45%      { opacity: 0.48; }
  60%      { opacity: 0.22; }
}
@keyframes node-fade {
  0%, 100% { opacity: 0.18; }
  35%      { opacity: 0.95; }
  55%      { opacity: 0.35; }
  80%      { opacity: 0.7; }
}
@keyframes halo-fade {
  0%, 100% { opacity: 0.04; }
  50%      { opacity: 0.38; }
}

/* Scan-Sweep: langsamer Lichtstreifen, diagonal */
.tech-bg .tech-scan {
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(115deg,
              transparent 42%,
              rgba(193, 68, 14, 0.035) 49%,
              rgba(212, 160, 23, 0.05) 50%,
              rgba(193, 68, 14, 0.035) 51%,
              transparent 58%);
  animation: scan 18s linear infinite;
}

@keyframes scan {
  from { transform: translate3d(-40%, -40%, 0); }
  to   { transform: translate3d(40%, 40%, 0); }
}

/* ── NAV ───────────────────────────────────────── */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 48px;
  border-bottom: 1px solid var(--line);
  background: rgba(253, 246, 238, 0.85);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 50;
}

.brand {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.brand > span:first-of-type {
  position: relative;
  color: var(--ink);
}
/* Feine Zykloid-Grundlinie unter dem Schriftzug — zitiert das Brand-Mark */
.brand > span:first-of-type::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: linear-gradient(to right, var(--terra) 0%, var(--terra) 35%, transparent 100%);
  opacity: 0.5;
  transform: scaleX(0.85);
  transform-origin: left;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.brand:hover > span:first-of-type::after {
  transform: scaleX(1);
  opacity: 0.9;
}
.brand:hover .brand-mark { color: var(--ink); }

.brand-mark {
  display: inline-block;
  width: 30px; height: 24px;
  transform: translateY(5px);
  color: var(--terra);
  transition: color 0.2s var(--ease);
}

.brand-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 400;
}
.brand-sub::before {
  content: '';
  display: inline-block;
  width: 14px; height: 1px;
  background: var(--line-strong);
  vertical-align: middle;
  margin-right: 10px;
  transform: translateY(-1px);
}

.nav-right {
  display: flex; align-items: center; gap: 8px;
}

.lang {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 2px;
  background: var(--paper);
  font-family: var(--mono);
}

.lang button {
  border: 0; background: transparent;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.2s var(--ease);
}

.lang button.on {
  background: var(--ink);
  color: var(--bg);
}

.nav-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
  transition: color 0.2s;
}
.nav-link:hover { color: var(--terra); }

.btn {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 999px;
  transition: all 0.25s var(--ease);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn:hover {
  background: var(--terra);
  border-color: var(--terra);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  background: var(--paper);
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
}

/* ── HERO ──────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 640px);
  gap: 60px;
  padding: 90px 48px 120px;
  align-items: center;
  position: relative;
}
.hero > div:first-child { position: relative; z-index: 2; }

.hero-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 28px;
  display: flex; align-items: center; gap: 14px;
}
.hero-meta::before {
  content: '';
  display: inline-block;
  width: 36px; height: 1px;
  background: var(--terra);
}

h1.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(44px, 6.2vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 28px;
}

h1.hero-title .accent {
  font-style: normal;
  font-weight: 600;
  color: var(--terra);
  position: relative;
  display: inline-block;
}
h1.hero-title .accent::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 8px;
  background: var(--terra-soft);
  z-index: -1;
  transform: skew(-8deg);
}

.hero-lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 52ch;
  margin-bottom: 40px;
  background: rgba(253, 246, 238, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 6px;
  padding: 10px 14px;
  margin-left: -14px;
}

.hero-cta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 56px;
}

.hero-stats {
  display: flex; gap: 40px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  max-width: 540px;
}
.hero-stat-num {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.hero-stat-lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 8px;
}

/* ── CYCLE (SVG Hero Visual) ───────────────────── */
.cycle-wrap {
  position: absolute;
  top: 50%; right: 6%;
  transform: translateY(-50%);
  aspect-ratio: 1/1;
  width: min(58vw, 780px);
  margin: 0;
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}

.cycle-wrap svg {
  width: 100%; height: 100%;
  overflow: visible;
}

.cycle-wrap .orbit {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  opacity: 0.8;
}

.cycle-wrap .arc {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Progressions-Spirale */
.cycle-wrap .spiral {
  stroke: var(--terra);
  stroke-width: 1.2;
  stroke-dasharray: 2 6;
  opacity: 0.45;
}
.cycle-wrap .spiral-tip {
  stroke: var(--terra);
  stroke-width: 1.8;
  opacity: 0.75;
}
.cycle-wrap .prog-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--terra);
  opacity: 0.8;
}
/* Zufällig platzierte Begriffe über dem gesamten Seitenhintergrund */
.floating-terms {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.floating-term {
  position: absolute;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra);
  opacity: 0;
  white-space: nowrap;
  animation: term-fade 7s ease-in-out forwards;
  will-change: opacity, transform;
}
@keyframes term-fade {
  0%   { opacity: 0; transform: translateY(4px); }
  20%  { opacity: 0.38; transform: translateY(0); }
  80%  { opacity: 0.38; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}

.cycle-node {
  position: absolute;
  width: 140px; height: 140px;
  margin-left: -70px; margin-top: -70px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(255, 249, 243, 0.55) 0%,
      rgba(255, 249, 243, 0.35) 60%,
      rgba(255, 249, 243, 0.15) 100%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1.5px solid currentColor;
  display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 14px 10px 12px;
  transition: all 0.35s var(--ease);
  cursor: default;
  box-shadow:
    0 1px 0 rgba(232, 213, 192, 0.4),
    0 6px 20px rgba(61, 43, 31, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  overflow: visible;
  isolation: isolate;
}

/* Dendriten-Ring: 24 radiale Ticks per conic-gradient */
.cycle-node::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      currentColor 0deg, currentColor 1.2deg, transparent 1.2deg, transparent 15deg,
      currentColor 15deg, currentColor 16.2deg, transparent 16.2deg, transparent 30deg,
      currentColor 30deg, currentColor 31.2deg, transparent 31.2deg, transparent 45deg,
      currentColor 45deg, currentColor 46.2deg, transparent 46.2deg, transparent 60deg,
      currentColor 60deg, currentColor 61.2deg, transparent 61.2deg, transparent 75deg,
      currentColor 75deg, currentColor 76.2deg, transparent 76.2deg, transparent 90deg,
      currentColor 90deg, currentColor 91.2deg, transparent 91.2deg, transparent 105deg,
      currentColor 105deg, currentColor 106.2deg, transparent 106.2deg, transparent 120deg,
      currentColor 120deg, currentColor 121.2deg, transparent 121.2deg, transparent 135deg,
      currentColor 135deg, currentColor 136.2deg, transparent 136.2deg, transparent 150deg,
      currentColor 150deg, currentColor 151.2deg, transparent 151.2deg, transparent 165deg,
      currentColor 165deg, currentColor 166.2deg, transparent 166.2deg, transparent 180deg,
      currentColor 180deg, currentColor 181.2deg, transparent 181.2deg, transparent 195deg,
      currentColor 195deg, currentColor 196.2deg, transparent 196.2deg, transparent 210deg,
      currentColor 210deg, currentColor 211.2deg, transparent 211.2deg, transparent 225deg,
      currentColor 225deg, currentColor 226.2deg, transparent 226.2deg, transparent 240deg,
      currentColor 240deg, currentColor 241.2deg, transparent 241.2deg, transparent 255deg,
      currentColor 255deg, currentColor 256.2deg, transparent 256.2deg, transparent 270deg,
      currentColor 270deg, currentColor 271.2deg, transparent 271.2deg, transparent 285deg,
      currentColor 285deg, currentColor 286.2deg, transparent 286.2deg, transparent 300deg,
      currentColor 300deg, currentColor 301.2deg, transparent 301.2deg, transparent 315deg,
      currentColor 315deg, currentColor 316.2deg, transparent 316.2deg, transparent 330deg,
      currentColor 330deg, currentColor 331.2deg, transparent 331.2deg, transparent 345deg,
      currentColor 345deg, currentColor 346.2deg, transparent 346.2deg, transparent 360deg
    );
  -webkit-mask: radial-gradient(circle, transparent 68%, black 68.5%, black 80%, transparent 80.5%);
          mask: radial-gradient(circle, transparent 68%, black 68.5%, black 80%, transparent 80.5%);
  opacity: 0.55;
  z-index: -1;
  animation: dendrite-rotate 42s linear infinite;
}

/* Atmende Aura in der Node-Farbe */
.cycle-node::after {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor 0%, transparent 62%);
  opacity: 0.14;
  z-index: -2;
  animation: node-breathe 4.6s ease-in-out infinite;
  pointer-events: none;
}

.cycle-node:hover {
  transform: scale(1.06);
  box-shadow:
    0 4px 0 var(--line),
    0 14px 34px rgba(61, 43, 31, 0.15),
    inset 0 0 0 1px rgba(255,255,255,0.7);
}
.cycle-node:hover::after { opacity: 0.28; }

/* Node-ID: technisches Mono-Label */
.cycle-node .node-id {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.75;
  margin-bottom: 2px;
}

/* Glyph (kognitives Icon) */
.cycle-node .node-glyph {
  width: 22px; height: 22px;
  color: currentColor;
  opacity: 0.85;
  margin: 2px 0 4px;
}

.cycle-node .name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

@keyframes dendrite-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes node-breathe {
  0%, 100% { opacity: 0.12; transform: scale(1); }
  50%      { opacity: 0.26; transform: scale(1.06); }
}

/* Gedämpfte Node-Farbtöne — fügen sich ruhiger ins Papier ein als die
   vollgesättigten Akzent-Variablen (terra/ocher) */
.cycle-node[data-hue="terra"] { color: #a55a38; }
.cycle-node[data-hue="terra"] .name { color: #a55a38; }
.cycle-node[data-hue="sage"]  { color: #5d7a67; }
.cycle-node[data-hue="sage"]  .name { color: #5d7a67; }
.cycle-node[data-hue="dove"]  { color: #556d85; }
.cycle-node[data-hue="dove"]  .name { color: #556d85; }
.cycle-node[data-hue="ocher"] { color: #b08a3a; }
.cycle-node[data-hue="ocher"] .name { color: #b08a3a; }

/* ── Tech-Erweiterungen: Ticks, Inner-Ring, Core, Flow ── */

.cycle-wrap .inner-ring {
  fill: none;
  stroke: var(--ink-mute);
  stroke-width: 0.6;
  stroke-dasharray: 1 4;
  opacity: 0.35;
}
.inner-ring-group {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: orbit-reverse 40s linear infinite;
}

.cycle-wrap .tick {
  stroke: var(--ink-mute);
  stroke-linecap: round;
}
.cycle-wrap .tick-minor { stroke-width: 0.6; opacity: 0.35; }
.cycle-wrap .tick-major { stroke-width: 1.2; opacity: 0.55; stroke: var(--terra); }
.tick-group {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: orbit 90s linear infinite;
}

.cycle-wrap .coord {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  fill: var(--ink-mute);
  opacity: 0.65;
}

/* Daten-Fluss zwischen Nodes */
.cycle-wrap .flow-line {
  fill: none;
  stroke: var(--terra);
  stroke-width: 1;
  stroke-dasharray: 2 10;
  opacity: 0.55;
  animation: flow-dash 3s linear infinite;
}
@keyframes flow-dash {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -120; }
}

/* Zentrum: Crosshair + Zyklus-Meta */
.cycle-wrap .core-ring {
  fill: none;
  stroke: var(--terra);
  stroke-width: 0.8;
  stroke-dasharray: 2 4;
  opacity: 0.5;
  animation: orbit 24s linear infinite;
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.cycle-wrap .core-dot {
  fill: var(--terra);
  filter: drop-shadow(0 0 4px var(--terra));
  animation: core-pulse 2.4s ease-in-out infinite;
}
@keyframes core-pulse {
  0%, 100% { opacity: 0.6; r: 2.5; }
  50%      { opacity: 1;   r: 3.4; }
}
.cycle-wrap .core-label,
.cycle-wrap .core-num {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  fill: var(--ink-mute);
}
.cycle-wrap .core-label { opacity: 0.7; }
.cycle-wrap .core-num   { opacity: 0.85; fill: var(--terra); }

/* Mehrere Daten-Pulse, unterschiedlich schnell/groß */
.pulse {
  fill: var(--terra);
  filter: drop-shadow(0 0 6px var(--terra));
}
.pulse-a { fill: var(--terra); }
.pulse-b { fill: var(--ocher); filter: drop-shadow(0 0 5px var(--ocher)); }
.pulse-c { fill: var(--sage);  filter: drop-shadow(0 0 4px var(--sage));  opacity: 0.7; }
.pulse-path {
  animation: orbit 14s linear infinite;
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.pulse-b-rot { animation: orbit 9s linear infinite reverse; }
.pulse-c-rot { animation: orbit 22s linear infinite; }

@keyframes orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes orbit-reverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* Einblenden der Nodes */
.cycle-node {
  animation: nodeIn 0.9s var(--ease) backwards;
}
.cycle-node:nth-child(1) { animation-delay: 0.2s; }
.cycle-node:nth-child(2) { animation-delay: 0.35s; }
.cycle-node:nth-child(3) { animation-delay: 0.5s; }
.cycle-node:nth-child(4) { animation-delay: 0.65s; }
@keyframes nodeIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── SECTION CHROME ──────────────────────────── */
.section {
  padding: 110px 48px;
  position: relative;
}
.section + .section { border-top: 1px solid var(--line); }

.section-head {
  max-width: 880px;
  margin: 0 auto 64px;
  text-align: center;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 20px;
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--terra);
  border-radius: 999px;
}

h2.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.section-lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin-top: 20px;
  max-width: 64ch;
  margin-left: auto; margin-right: auto;
}

/* ── METHODIK CARDS ──────────────────────────── */
.methodik {
  background: var(--paper);
}
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1320px;
  margin: 0 auto;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 2px;
}
.card {
  padding: 44px 30px;
  border-right: 1px solid var(--line);
  position: relative;
  transition: background 0.3s var(--ease);
}
.card:last-child { border-right: 0; }
.card:hover { background: var(--bg-deep); }

.card-no {
  font-family: var(--serif);
  font-style: italic;
  font-size: 52px;
  color: var(--terra);
  line-height: 0.9;
  margin-bottom: 28px;
  font-weight: 400;
}
.card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  color: var(--ink);
}
.card p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin-bottom: 20px;
}
.card-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-strong);
}
.tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-deep);
  color: var(--ink-mute);
}

/* ── AUDIENCE / QUOTE BLOCK ───────────────────── */
.audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 1240px;
  margin: 0 auto;
  align-items: center;
}
.audience-list {
  list-style: none;
  border-top: 1px solid var(--line-strong);
  background: rgba(253, 246, 238, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 6px;
  padding: 0 14px;
}
.audience-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
}
.audience-list li .idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
}

.quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
  color: var(--ink);
  padding: 36px 40px;
  background: rgba(253, 246, 238, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-left: 3px solid var(--sage);
  border-radius: 6px;
  position: relative;
}
.quote::before {
  content: '„';
  font-family: var(--serif);
  font-size: 80px;
  position: absolute;
  top: -12px; left: 16px;
  color: var(--sage);
  opacity: 0.35;
}
.quote-attr {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 20px;
  display: block;
}

/* ── CTA FINAL ───────────────────────────────── */
.cta-final {
  text-align: center;
  padding: 130px 48px;
  background: var(--ink);
  color: var(--bg);
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(193, 68, 14, 0.2), transparent 60%),
              radial-gradient(circle at 80% 70%, rgba(74, 124, 89, 0.15), transparent 60%);
  pointer-events: none;
}
.cta-final > * { position: relative; }

.cta-final h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--bg);
  margin-bottom: 24px;
}
.cta-final p {
  font-family: var(--serif);
  font-size: 18px;
  color: rgba(253, 246, 238, 0.7);
  margin-bottom: 40px;
  max-width: 56ch;
  margin-left: auto; margin-right: auto;
}

.cta-final .btn {
  background: var(--terra);
  border-color: var(--terra);
  color: var(--bg);
  font-size: 13px;
  padding: 14px 26px;
}
.cta-final .btn:hover {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--ink);
}
.cta-final .btn-ghost {
  background: transparent;
  border-color: rgba(253, 246, 238, 0.3);
  color: var(--bg);
}
.cta-final .btn-ghost:hover {
  background: rgba(253, 246, 238, 0.08);
  border-color: var(--bg);
  color: var(--bg);
}

/* ── FOOTER ──────────────────────────────────── */
footer {
  padding: 40px 48px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  flex-wrap: wrap;
  gap: 18px;
}
footer a {
  color: var(--ink-mute);
  text-decoration: none;
  margin-left: 22px;
  transition: color 0.2s;
}
footer a:hover { color: var(--terra); }

.foot-dev {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 1180px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card:nth-child(2) { border-right: 0; }
  .card:nth-child(1), .card:nth-child(2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 56px 24px 80px;
    gap: 60px;
  }
  .cycle-wrap { max-width: 420px; }
  .nav { padding: 16px 20px; }
  .section { padding: 72px 20px; }
  .cards { grid-template-columns: 1fr; }
  .card { border-right: 0; border-bottom: 1px solid var(--line); }
  .card:last-child { border-bottom: 0; }
  .audience { grid-template-columns: 1fr; gap: 40px; }
  body::after { display: none; }
  footer { padding: 28px 20px; flex-direction: column; align-items: flex-start; }
  footer a { margin-left: 0; margin-right: 18px; }
  .cycle-node { width: 112px; height: 112px; margin-left: -56px; margin-top: -56px; padding: 10px 8px; }
  .cycle-node .name { font-size: 14px; }
  .cycle-node .node-id { font-size: 8px; letter-spacing: 0.18em; }
  .cycle-node .node-glyph { width: 16px; height: 16px; margin: 1px 0 2px; }
  .cycle-node::before { inset: -10px; }
}

@media (max-width: 560px) {
  .hero-stats { flex-direction: column; gap: 18px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
  .brand-sub { display: none; }
  .nav-link { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pulse-path, .cycle-node, .cycle-node::before, .cycle-node::after,
  .tech-grid, .tech-scan,
  .net-edge, .net-node, .net-halo,
  .inner-ring-group, .tick-group, .flow-line,
  .core-ring, .core-dot { animation: none !important; }
  html { scroll-behavior: auto; }
}