/* DLU Capital homepage, round 3 (05.10.2026); round 5 (same day): at most one moving thing in view,
   steps on one stage, modules with one focus, tool graphics still until pointed at.
   Look of the live site dlu-capital.com: dark and cream full-width bands, large centred
   DM Serif headlines, gold pill button, Lucide line icons. Product loops sit in a thin
   device bezel. No card boxes: groups are built with space and hairlines.
   Base unit 8px. style.css stays untouched (the SEO entry page uses it). */

@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/DMSerifDisplay-normal-400-latin.woff2) format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/DMSerifDisplay-normal-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/DMSerifDisplay-italic-400-latin.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url(/fonts/DMSans-normal-100_1000-latin.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url(/fonts/DMSans-normal-100_1000-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg-dark: #0F1117; --bg-dark-el: #181B23; --bg-light: #F5F0E8; --bg-light-el: #EDE8DC;
  --on-dark: #F0EDE8; --muted-dark: #B0AFA8; --on-light: #1A1D24; --muted-light: #5F5B54;
  --gold: #D4AF37; --gold-bright: #E8C878; --gold-deep: #8A6D12;
  --steel: #7B8FA8; --steel-bright: #A8B8CC; --steel-deep: #4A5D74;
  --hair-dark: rgba(255,255,255,.09); --hair-light: rgba(26,29,36,.14);
  --u: 8px; --pad: 24px; --max: 1120px;
  --serif: "DM Serif Display", Georgia, serif; --sans: "DM Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg-dark); color: var(--on-dark); font: 400 17px/1.6 var(--sans); overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.center { text-align: center; }
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Bands */
.band { padding: calc(var(--u) * 10) 0; }
.band-el { background: var(--bg-dark-el); }
.band-light { background: var(--bg-light); color: var(--on-light); }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: calc(var(--u) * 2); }
.band-light .kicker { color: var(--gold-deep); }
.kicker-steel { color: var(--steel-bright); }
h2 { font-size: 34px; line-height: 1.1; letter-spacing: -.02em; }
.lede { font-size: 17px; color: var(--muted-dark); max-width: 600px; margin: calc(var(--u) * 2) auto 0; }
.band-light .lede { color: var(--muted-light); }

/* Header (over the hero, like the live site) */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; padding-bottom: 12px; max-width: 1280px; }
.logo { display: inline-flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: var(--on-dark); font-family: var(--serif); line-height: 1; }
.logo-dlu { font-size: 30px; letter-spacing: .02em; }
.logo-capital { font-size: 13px; letter-spacing: .1em; border-top: 1.5px solid var(--gold); padding-top: 4px; margin-top: 4px; align-self: stretch; text-align: center; }
.header-right { display: flex; align-items: center; gap: 24px; }
.nav { display: none; gap: 28px; }
.nav a, .lang a, .lang span { font-size: 15px; color: var(--muted-dark); text-decoration: none; }
.nav a:hover, .lang a:hover { color: var(--on-dark); }
.lang { font-size: 13px; font-weight: 500; letter-spacing: .06em; }
.lang .active { color: var(--gold); }
.lang .divider { opacity: .4; margin: 0 4px; }

/* Buttons and lines under buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; border-radius: 100px; font: 600 17px/1 var(--sans); letter-spacing: .03em; text-decoration: none; color: #0F1117;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold), #B8960F);
  box-shadow: 0 4px 24px rgba(212,175,55,.35), 0 1px 4px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.15); transition: transform .35s, box-shadow .35s; }
.btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 40px rgba(212,175,55,.45), 0 2px 8px rgba(0,0,0,.3); }
.btn .icon { width: 18px; height: 18px; stroke-width: 2; }
/* Round 6 (08.10.): two paths, two equal buttons. Core gold, Operator steel (as in the hero video):
   same shape, size, weight and glow; only the colour tells the paths apart. */
.btn-op { background: linear-gradient(160deg, #BFCCDC, #9DAEC3 45%, #7489A3);
  box-shadow: 0 4px 24px rgba(168,184,204,.3), 0 1px 4px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.2); }
.btn-op:hover { box-shadow: 0 8px 40px rgba(168,184,204,.42), 0 2px 8px rgba(0,0,0,.3); }
.btn-ghost { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 100px; border: 1px solid rgba(240,237,232,.25); font: 500 14px/1 var(--sans); color: var(--on-dark); text-decoration: none; transition: border-color .3s; }
.btn-ghost:hover { border-color: var(--on-dark); }
.cta { margin-top: calc(var(--u) * 5); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.risk { font-size: 14px; color: var(--muted-dark); }
.micro { font-size: 13px; color: var(--muted-dark); opacity: .85; }
.band-light .risk { color: var(--muted-light); }
/* The pair: one column on a narrow phone (Core above Operator, same width), side by side from 520px. */
.paths { display: grid; grid-template-columns: 1fr; gap: 16px; width: 100%; max-width: 340px; margin: calc(var(--u) * 5) auto 0; }
.path { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.path .btn { width: 100%; justify-content: center; padding: 16px 12px; font-size: 16px; white-space: nowrap; }
.path .risk { text-align: center; }
.t-core { color: var(--gold); font-weight: 600; }
.t-op { color: var(--steel-bright); font-weight: 600; }
@media (min-width: 520px) {
  /* minmax(0, 1fr): the longer label must not widen its column; both buttons stay exactly the same width */
  .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
}

/* Product videos: no bezel, no box (CEO 05.10.). The loops are rendered on near-black; every video
   sits on the dark page ground and its edges fade out through a mask, so no video edge is visible. */
.media { position: relative; }
video.fade { width: 100%; height: auto; background: transparent;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
  mask-composite: intersect; }
.band-rule { border-top: 1px solid var(--hair-dark); }

/* 1 Hero. Phone: headline, button, video, subline, small print. Desktop (1000px): text left, video right. */
.hero { background: radial-gradient(ellipse 100% 60% at 50% -10%, rgba(212,175,55,.09) 0%, transparent 70%), var(--bg-dark);
  padding: 104px 0 calc(var(--u) * 7); }
.hero-grid { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-text { display: contents; }
.hero h1 { order: 1; font-size: 42px; line-height: 1.05; letter-spacing: -.03em; }
.hero h1 em, h2 em.accent { font-style: italic; color: var(--gold); }
.hero-sub { order: 2; font-size: 18px; max-width: 520px; margin-top: calc(var(--u) * 2); color: var(--muted-dark); }
.hero .cta { order: 3; margin-top: calc(var(--u) * 3); gap: 8px; }
.hero .paths { order: 3; margin-top: calc(var(--u) * 3); gap: 12px; }
.hero .path { gap: 6px; }
.hero-media { order: 4; width: 300px; margin-top: calc(var(--u) * 2); display: flex; flex-direction: column; align-items: center; }
.hero-meta { order: 5; margin-top: calc(var(--u) * 2); display: flex; flex-direction: column; gap: 8px; }
#explainer { cursor: pointer; }
.play-full { display: inline-flex; align-items: center; gap: 8px; margin-top: 0; padding: 8px 16px; border-radius: 100px; border: 1px solid rgba(240,237,232,.22); background: none; color: var(--on-dark); font: 500 14px/1 var(--sans); cursor: pointer; transition: border-color .3s, color .3s; }
.play-full .icon { width: 14px; height: 14px; color: var(--gold); fill: currentColor; stroke: none; }
.play-full:hover { border-color: var(--gold); color: var(--gold-bright); }
.video-dialog { border: 0; padding: 0; background: transparent; width: min(92vw, 1280px); max-width: none; overflow: visible; }
.video-dialog::backdrop { background: rgba(8,9,12,.94); }
.video-dialog video { width: 100%; height: auto; max-height: 84vh; background: var(--bg-dark); border-radius: 8px; }
.dialog-close { position: absolute; top: -52px; right: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(240,237,232,.25); background: none; color: var(--on-dark); cursor: pointer; }
.dialog-close:hover { border-color: var(--gold); }

/* 2 Steps (round 5): one stage, one video, one bright step at a time (CEO 05.10.: three loops at once
   leave the eye nowhere to go). home.js plays the three loops one after another in the same slot.
   Phone: video, numbers 1 2 3, the active step's text (all three texts share one grid cell, so nothing jumps).
   Desktop (900px): the steps as a list on a vertical track at the left, the video at the right. */
.flow { margin-top: calc(var(--u) * 5); display: grid; gap: 24px; text-align: left; }
/* 08.10.: the stage is a plain 4:5 box and the video fills it absolutely. It used to be a grid with
   place-items: center, and Safari sized the video from its own intrinsic size there instead of the 100 %
   width, so it showed at about 40 % of the stage (CEO screenshot shots/ceo/2026-10-08-ablauf-klein.webp). */
.flow-stage { position: relative; width: min(100%, 340px); margin: 0 auto; aspect-ratio: 4 / 5; }
@supports not (aspect-ratio: 1) { .flow-stage::before { content: ""; display: block; padding-top: 125%; } }
.flow-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .2s; }
.flow-stage video.is-out { opacity: 0; }
.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.flow-head { display: flex; align-items: baseline; gap: 16px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.flow-head:focus-visible, .flow-dots button:focus-visible, .modules li:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.flow .step-num { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--gold); width: 28px; flex: none; }
.flow-step h3 { font-size: 24px; line-height: 1.2; }
.flow-step p { color: var(--muted-dark); font-size: 16px; margin-top: 12px; }
.flow-dots { display: none; }
html.js .flow-dots { display: flex; justify-content: center; gap: 16px; }
.flow-dots button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(240,237,232,.22); background: none; color: var(--muted-dark); font: 400 20px/1 var(--serif); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.flow-dots button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #0F1117; }
@media (max-width: 899px) {
  html.js .flow-steps > li { grid-area: 1 / 1; visibility: hidden; text-align: center; }
  html.js .flow-steps > li.is-active { visibility: visible; }
  html.js .flow .step-num { display: none; }
  html.js .flow-head { justify-content: center; cursor: default; }
}

/* 2 Dein Weg (round 6): three situations, each marked with the colour of its path (two gold, one steel).
   A 2px rule on top and the tag carry the colour; the link leads to the path's section. No boxes. */
.ways { list-style: none; margin: calc(var(--u) * 6) 0 0; padding: 0; display: grid; gap: 40px; text-align: left; }
.way { --way: var(--gold); --way-ink: #75600F; --way-soft: rgba(212,175,55,.16); display: flex; flex-direction: column; padding-top: 24px; border-top: 2px solid var(--way); }
.way-op { --way: var(--steel); --way-ink: var(--steel-deep); --way-soft: rgba(123,143,168,.18); }
.way-tag { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; background: var(--way-soft); color: var(--way-ink); margin-bottom: 16px; }
.way h3 { font-size: 24px; line-height: 1.2; margin-bottom: 12px; }
.way p { color: var(--muted-light); }
.way-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; font-weight: 600; font-size: 16px; color: var(--way-ink); text-decoration: none; }
.way-link .icon { width: 18px; height: 18px; stroke-width: 2; transition: transform .3s; }
.way-link:hover .icon { transform: translateX(4px); }
.unsure { margin-top: calc(var(--u) * 5); display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--muted-light); }
.unsure a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: 100px; border: 1px solid rgba(26,29,36,.35); color: var(--on-light); font-weight: 600; font-size: 15px; text-decoration: none; transition: border-color .3s; }
.unsure a .icon { width: 18px; height: 18px; }
.unsure a:hover { border-color: var(--on-light); }
.fit-no { display: flex; gap: 12px; align-items: flex-start; justify-content: center; margin: calc(var(--u) * 6) auto 0; max-width: 640px; padding-top: 32px; border-top: 1px solid var(--hair-light); text-align: left; color: var(--muted-light); }
.fit-no .icon { width: 20px; height: 20px; margin-top: 4px; color: #9A4A3A; }
.fit-no strong { color: var(--on-light); }

/* 4 Core: modules as a path, tools as icon rows next to the tool reel */
.label { font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: 24px; }
.modules { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; text-align: left; position: relative; }
.modules li { display: flex; align-items: center; gap: 16px; padding: 8px 0; position: relative; }
.modules li::before { content: ""; position: absolute; left: 27px; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--gold), rgba(212,175,55,.25)); z-index: 0; }
.modules li:first-child::before { top: 50%; }
.modules li:last-child::before { bottom: 50%; }
.mod-icon { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-dark); border: 1.5px solid rgba(212,175,55,.55); color: var(--gold); flex: none; }
.mod-num { font-size: 13px; font-weight: 600; color: var(--gold); letter-spacing: .05em; width: 24px; }
.mod-name { font-family: var(--serif); font-size: 21px; line-height: 1.2; }
.core-modules { margin-top: calc(var(--u) * 7); }
/* Round 5: one module in focus (class .is-focus from home.js), the other five step back. The focus jumps,
   it does not build up: the ring fills gold and grows at once, the name turns bright. */
html.js .modules li { cursor: pointer; outline: none; }
html.js .modules .mod-icon { transition: transform .18s cubic-bezier(.3,1.5,.5,1), background .12s, color .12s, border-color .12s, box-shadow .18s; }
html.js .modules li:not(.is-focus) .mod-icon { border-color: rgba(212,175,55,.28); color: rgba(212,175,55,.55); }
html.js .modules li:not(.is-focus) .mod-num { color: rgba(212,175,55,.7); }
html.js .modules li:not(.is-focus) .mod-name { color: rgba(240,237,232,.7); }
html.js .modules li.is-focus .mod-icon { background: var(--gold); border-color: var(--gold); color: #0F1117; transform: scale(1.18); box-shadow: 0 0 0 8px rgba(212,175,55,.12), 0 6px 28px rgba(212,175,55,.35); }
html.js .modules li.is-focus .mod-name { color: var(--on-dark); }
.core-extra { color: var(--muted-dark); max-width: 640px; margin: calc(var(--u) * 7) auto 0; font-size: 16px; }
/* Operator modules (round 6): the same path in steel, eight stations */
.modules-op li::before { background: linear-gradient(var(--steel-bright), rgba(123,143,168,.3)); }
.modules-op .mod-icon { border-color: rgba(168,184,204,.6); color: var(--steel-bright); }
.modules-op .mod-num { color: var(--steel-bright); }
html.js .modules-op li:not(.is-focus) .mod-icon { border-color: rgba(168,184,204,.3); color: rgba(168,184,204,.6); }
html.js .modules-op li:not(.is-focus) .mod-num { color: rgba(168,184,204,.75); }
html.js .modules-op li.is-focus .mod-icon { background: var(--steel-bright); border-color: var(--steel-bright); box-shadow: 0 0 0 8px rgba(168,184,204,.12), 0 6px 28px rgba(168,184,204,.3); }
.op-modules { margin-top: calc(var(--u) * 8); }
.op-note { font-size: 14px; color: var(--muted-dark); max-width: 420px; }

/* 5 Operator */
.op-grid { display: grid; gap: 40px; margin-top: calc(var(--u) * 6); text-align: left; align-items: center; }
.op-grid .media { width: 300px; margin: 0 auto; }

/* 5b Tool cards: the live site's preview cards. Core graphics in gold, Operator-only graphics in steel.
   With JavaScript a graphic starts empty and builds up when its card comes into view; hover (desktop)
   or a tap (phone) plays it again and opens the sentence. Without JavaScript everything is static and open. */
.tc-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: calc(var(--u) * 5); }
.tc-filter button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 100px; font: 500 14px/1 var(--sans); cursor: pointer;
  background: rgba(255,255,255,.05); color: rgba(240,237,232,.6); border: 1px solid rgba(255,255,255,.08); transition: background .3s, color .3s, border-color .3s; }
.tc-filter button span { font-size: 11px; opacity: .6; }
.tc-filter button[aria-pressed="true"] { background: rgba(212,175,55,.13); color: var(--on-dark); border-color: rgba(212,175,55,.35); }
html:not(.js) .tc-filter { display: none; }
.tc-grid { list-style: none; margin: calc(var(--u) * 5) calc(var(--pad) * -1) 0; padding: 4px var(--pad) 16px; text-align: left;
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tc-grid::-webkit-scrollbar { display: none; }
.tc { position: relative; scroll-snap-align: center; display: flex; flex-direction: column; padding: 20px; border-radius: 16px; cursor: pointer; overflow: hidden;
  background: #20232B; border: 1px solid rgba(255,255,255,.08); transition: border-color .4s, transform .4s, box-shadow .4s; --tc: var(--gold); --tc-soft: rgba(212,175,55,.15); }
.tc-op { --tc: var(--steel-bright); --tc-soft: rgba(123,143,168,.18); }
.tc::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: linear-gradient(90deg, transparent, var(--tc), transparent); opacity: .35; }
.tc::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(at 50% 0%, var(--tc-soft), transparent 70%); }
.tc[hidden] { display: none; }
.tc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.tag { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; background: rgba(212,175,55,.14); color: var(--gold); }
.tag-op { background: rgba(123,143,168,.16); color: var(--steel-bright); }
.tc-chev { width: 18px; height: 18px; margin-left: auto; color: var(--tc); opacity: .5; transition: transform .3s, opacity .3s; }
.tc h3 { font-size: 20px; line-height: 1.2; margin-bottom: 16px; }
.tc-fig { height: 168px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); color: rgba(240,237,232,.62); font-size: 11px; line-height: 1.2; }
.tc-text { font-size: 15px; color: var(--muted-dark); margin-top: 16px; }
html.js .tc-text { max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; transition: max-height .4s ease-out, opacity .4s, margin-top .4s; }
html.js .tc.is-open .tc-text { max-height: 140px; opacity: 1; margin-top: 16px; }
.tc.is-open .tc-chev { transform: rotate(180deg); opacity: .9; }
.tc.is-open::after { opacity: 1; }
@media (hover: hover) and (min-width: 760px) {
  .tc:hover { border-color: color-mix(in srgb, var(--tc) 40%, transparent); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
  .tc:hover::after { opacity: 1; }
  .tc:hover .tc-chev { transform: rotate(180deg); opacity: .9; }
  html.js .tc:hover .tc-text { max-height: 140px; opacity: 1; margin-top: 16px; }
}

/* Graphics */
.fig-checks { display: flex; flex-direction: column; gap: 6px; }
.fig-checks span { display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.06); }
.fig-checks i { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--tc); display: grid; place-items: center; flex: none; }
.fig-checks i::after { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--tc); }
.fig-bars, .fig-dcf { display: flex; flex-direction: column; gap: 8px; }
.bars { flex: 1; display: flex; align-items: flex-end; gap: 6px; }
.bars b { flex: 1; height: var(--h); border-radius: 3px; background: rgba(255,255,255,.15); transform-origin: bottom; }
.bars b.on, .fig-dcf .bars b { background: var(--tc); opacity: .9; }
.fig-dcf .bars b.flat { opacity: .45; }
.chips { display: flex; gap: 8px; }
.chips span { flex: 1; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.07); color: var(--tc); font-size: 13px; font-weight: 700; }
.chips small { display: block; font-size: 10px; font-weight: 400; color: rgba(240,237,232,.5); margin-bottom: 2px; }
.dcf-labels { display: flex; } .dcf-labels span { flex: 5; } .dcf-labels span + span { flex: 3; }
.fig-dcf .value { color: var(--tc); font-size: 13px; font-weight: 700; }
.fig-doc, .fig-ips { display: flex; flex-direction: column; gap: 12px; }
.doc-top { display: flex; align-items: center; gap: 8px; }
.doc-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--tc-soft); color: var(--tc); flex: none; }
.doc-icon .icon { width: 14px; height: 14px; stroke-width: 2; }
.doc-title { font-size: 13px; color: var(--on-dark); }
.line { display: block; height: 8px; width: var(--w); border-radius: 4px; background: rgba(255,255,255,.1); transform-origin: left; }
.doc-top .line { height: 10px; background: rgba(255,255,255,.12); }
.doc-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.pills { display: flex; gap: 8px; }
.pills span { padding: 4px 10px; border-radius: 100px; border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent); color: var(--tc); font-size: 10px; }
.fig-watch { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.fig-watch div { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.05); }
.fig-watch .icon { width: 14px; height: 14px; color: var(--tc); }
.fig-watch b { height: 8px; width: var(--w, 54%); border-radius: 4px; background: rgba(255,255,255,.14); }
.spark { width: 60px; height: 20px; margin-left: auto; fill: none; stroke: var(--tc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spark path { stroke-dasharray: 100; }
.fig-donut { display: flex; align-items: center; gap: 20px; padding-left: 20px; }
.fig-donut svg { width: 112px; height: 112px; flex: none; transform: rotate(-90deg); }
.fig-donut circle { fill: none; stroke-width: 10; }
.fig-donut .track { stroke: rgba(255,255,255,.08); }
.fig-donut .seg { stroke: var(--gold); stroke-dasharray: var(--d) 189; stroke-dashoffset: var(--o); }
.fig-donut .s2 { stroke: var(--gold-bright); } .fig-donut .s3 { stroke: var(--steel); } .fig-donut .s4 { stroke: #8C877E; }
.fig-donut ul, .fig-stack ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 12px; }
.fig-donut li, .fig-stack li { display: flex; align-items: center; gap: 8px; }
.fig-donut li i, .fig-stack li i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.fig-donut li i.s2 { background: var(--gold-bright); } .fig-donut li i.s3 { background: var(--steel); } .fig-donut li i.s4 { background: #8C877E; }
.fig-ring { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.ring { position: relative; width: 100px; height: 100px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring .track { stroke: rgba(255,255,255,.1); }
.ring .arc { stroke: var(--tc); stroke-linecap: round; stroke-dasharray: 160 214; }
.ring span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring strong { font-size: 18px; color: var(--tc); }
.ring small { font-size: 10px; color: rgba(240,237,232,.5); }
.fig-ring p { color: rgba(240,237,232,.42); }
.fig-ips .rows { display: flex; flex-direction: column; gap: 10px; }
.fig-ips .rows span, .fig-score span { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px; }
.fig-ips .rows b, .fig-score b { height: 8px; width: var(--w); border-radius: 4px; background: var(--tc); opacity: .8; transform-origin: left; }
.fig-ips .rows b { background: rgba(255,255,255,.14); opacity: 1; }
.fig-score { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.fig-dilute span { grid-template-columns: 60px 1fr 32px; }
.fig-dilute em { font-style: normal; color: var(--tc); font-weight: 700; text-align: right; }
.cols, .fall { height: 100%; display: flex; align-items: flex-end; gap: 12px; }
.cols span, .fall span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; text-align: center; }
.cols b { width: 100%; height: var(--h); border-radius: 4px 4px 0 0; background: var(--tc); opacity: calc(1 - var(--i) * .25); transform-origin: bottom; }
.fall span { position: relative; }
.fall b { width: 100%; height: var(--h); margin-bottom: var(--b); border-radius: 3px; background: color-mix(in srgb, var(--tc) 55%, transparent); transform-origin: bottom; }
.fall .exit b { background: var(--tc); }
.fig-stack { display: flex; flex-direction: column; gap: 12px; }
.stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; }
.stack b { width: var(--w); background: var(--tc); opacity: calc(1 - var(--i) * .17); transform-origin: left; }
.fig-stack ul { grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.fig-stack li i { background: var(--tc); opacity: calc(1 - var(--i) * .17); }
.fig-stack li span { margin-left: auto; color: var(--tc); font-weight: 700; }

/* Build-up animation (class .play set by home.js) */
@keyframes tc-up { from { transform: scaleY(0); } }
@keyframes tc-right { from { transform: scaleX(0); } }
@keyframes tc-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes tc-draw { from { stroke-dashoffset: 100; } }
@keyframes tc-arc { from { stroke-dasharray: 0 214; } }
@keyframes tc-seg { from { stroke-dasharray: 0 189; } }
@keyframes tc-pop { 0%, 60% { transform: scale(0); } }
.tc.play .bars b, .tc.play .cols b, .tc.play .fall b { animation: tc-up .7s cubic-bezier(.2,.7,.2,1) backwards calc(var(--i, 0) * 70ms); }
.tc.play .line, .tc.play .fig-score b, .tc.play .fig-ips b, .tc.play .stack b, .tc.play .fig-watch b { animation: tc-right .7s cubic-bezier(.2,.7,.2,1) backwards calc(var(--i, 0) * 90ms); }
.tc.play .chips span, .tc.play .pills span, .tc.play .fig-checks span, .tc.play .fig-watch div, .tc.play .fig-donut li, .tc.play .fig-stack li, .tc.play .fig-score span, .tc.play .rows span, .tc.play .value { animation: tc-in .5s ease-out backwards calc(var(--i, 0) * 90ms); }
.tc.play .fig-checks i::after { animation: tc-pop .9s cubic-bezier(.3,1.6,.5,1) backwards calc(var(--i, 0) * 180ms + 300ms); }
.tc.play .spark path { animation: tc-draw 1.1s ease-out backwards calc(var(--i, 0) * 150ms + 200ms); }
.tc.play .ring .arc { animation: tc-arc 1.2s cubic-bezier(.2,.7,.2,1) backwards .15s; }
.tc.play .fig-donut .seg { animation: tc-seg .8s ease-out backwards calc(var(--i, 0) * 200ms); }
.op-body p { color: var(--muted-dark); }
.op-body p + p { margin-top: 24px; }
.op-body .lead { display: block; font-family: var(--serif); font-size: 24px; line-height: 1.2; color: var(--on-dark); margin-bottom: 8px; }

/* 6 Compare: an open table on cream, hairlines only */
.compare { width: 100%; border-collapse: collapse; margin-top: calc(var(--u) * 6); text-align: left; }
.compare caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.compare thead th { font-family: var(--serif); font-weight: 400; font-size: 26px; padding: 0 16px 16px; }
.compare thead .c-core { color: var(--gold-deep); border-bottom: 2px solid var(--gold); }
.compare thead .c-op { color: var(--steel-deep); border-bottom: 2px solid var(--steel); }
.compare thead .c-row { font: 600 12px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--muted-light); vertical-align: bottom; border-bottom: 2px solid var(--hair-light); }
.compare tbody th, .compare td { padding: 16px; border-bottom: 1px solid var(--hair-light); vertical-align: top; font-size: 15px; }
.compare tbody th { font-weight: 600; font-size: 15px; white-space: nowrap; }
.row-label { display: flex; align-items: center; gap: 12px; }
.row-label .icon { width: 20px; height: 20px; color: var(--muted-light); }
.compare strong { font-weight: 600; }
.compare .none { color: #8C877E; }
.compare details summary { list-style: none; cursor: pointer; display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; }
.compare details summary::-webkit-details-marker { display: none; }
.compare details p { margin-top: 8px; color: var(--muted-light); }
.plus { flex: none; width: 18px; height: 18px; margin-top: 3px; position: relative; opacity: .55; }
.plus::before, .plus::after { content: ""; position: absolute; left: 3px; right: 3px; top: 8px; height: 1.5px; background: currentColor; transition: transform .3s; }
.plus::after { transform: rotate(90deg); }
details[open] .plus::after { transform: rotate(0); }

/* 7 Founder */
.founder-grid { display: grid; gap: 40px; margin-top: 0; align-items: start; }
.portrait { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 4px; background: var(--bg-dark-el); }
.portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 4px; filter: saturate(.9); }
.portrait::after { content: ""; position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(transparent 60%, rgba(15,17,23,.55)); pointer-events: none; }
.portrait figcaption { font-size: 12px; color: var(--muted-dark); margin-top: 8px; }
.founder-text h2 { margin-bottom: 24px; }
.founder-text > p { color: var(--muted-dark); }
.founder-text > p + p { margin-top: 16px; }
.quote { margin: 40px 0 0; padding: 0; position: relative; }
.quote::before { content: "\201E"; position: absolute; left: -4px; top: -64px; font-family: var(--serif); font-size: 120px; line-height: 1; color: var(--gold); opacity: .35; }
.quote p { font-family: var(--serif); font-style: italic; font-size: 28px; line-height: 1.25; color: var(--on-dark); }
.quote footer { margin-top: 16px; font-size: 15px; color: var(--on-dark); }
.insta { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--on-dark); text-decoration: none; font-size: 15px; }
.insta .icon { color: var(--gold); }
.insta span { border-bottom: 1px solid rgba(240,237,232,.3); }
.insta:hover span { border-color: var(--gold); }

/* 8 FAQ */
.faq-list { max-width: 760px; margin: calc(var(--u) * 6) auto 0; text-align: left; border-top: 1px solid var(--hair-light); }
.faq-item { border-bottom: 1px solid var(--hair-light); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { width: 20px; height: 20px; color: var(--gold-deep); margin-top: 3px; }
.faq-item h3 { flex: 1; font-size: 20px; line-height: 1.3; }
.faq-item p { padding: 0 34px 24px 36px; color: var(--muted-light); }

/* 9 Closing and footer */
.closing { background: radial-gradient(ellipse 80% 50% at 50% 20%, rgba(212,175,55,.09) 0%, transparent 60%), var(--bg-dark); padding: calc(var(--u) * 12) 0; }
.closing h2 { font-size: 40px; }
/* Closing (round 6): two equal blocks, Core and Operator, split by a hairline; colour on the rule, name and button */
.close-paths { display: grid; gap: 48px; max-width: 880px; margin: calc(var(--u) * 7) auto 0; }
.close-path { --cp: var(--gold); display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 32px; border-top: 2px solid var(--cp); }
.close-op { --cp: var(--steel-bright); }
.close-path h3 { font-size: 40px; line-height: 1; color: var(--cp); }
.close-meta { font-size: 15px; font-weight: 600; color: var(--on-dark); hyphens: manual; }
.close-path > p:not(.close-meta):not(.risk) { color: var(--muted-dark); max-width: 340px; flex: 1; }
.close-path .btn { margin-top: 12px; padding: 16px 18px; font-size: 16px; width: 100%; max-width: 300px; justify-content: center; white-space: nowrap; }
.closing > .wrap > .micro { margin-top: calc(var(--u) * 6); }
.site-footer { border-top: 1px solid var(--hair-dark); padding: 48px 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; font-size: 13px; }
.footer-links a, .footer-links span { color: var(--muted-dark); text-decoration: none; }
.footer-links a:hover { color: var(--on-dark); }
.site-footer .disclaimer { font-size: 13px; color: var(--muted-dark); max-width: 640px; margin-top: 24px; }
.site-footer .copyright { font-size: 12px; color: var(--muted-dark); opacity: .7; margin-top: 16px; }

/* Desktop */
@media (min-width: 760px) {
  :root { --pad: 48px; }
  .band { padding: calc(var(--u) * 14) 0; }
  h2 { font-size: 48px; }
  .lede { font-size: 18px; }
  .hero h1 { font-size: 56px; }
  .hero-media { width: 100%; max-width: 640px; }
  .tc-grid { grid-auto-flow: row; grid-template-columns: 1fr 1fr; overflow: visible; margin: calc(var(--u) * 5) 0 0; padding: 0; gap: 16px; }
  .ways { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .close-paths { grid-template-columns: 1fr 1fr; gap: 64px; }
  .modules { grid-template-columns: repeat(6, 1fr); text-align: center; }
  .modules-op { grid-template-columns: repeat(4, 1fr); row-gap: 32px; }
  .modules-op li:nth-child(4n+1)::before { left: 50%; }
  .modules-op li:nth-child(4n)::before { right: 50%; }
  .modules li { flex-direction: column; gap: 12px; padding: 0 8px; }
  .modules li::before { left: 0; right: 0; top: 28px; bottom: auto; width: auto; height: 1px; background: rgba(212,175,55,.45); }
  .modules li:first-child::before { left: 50%; top: 28px; }
  .modules li:last-child::before { right: 50%; bottom: auto; }
  .mod-num { width: auto; }
  .mod-name { font-size: 18px; }
  .op-grid { grid-template-columns: 400px 1fr; gap: 64px; }
  .op-grid .media { width: 100%; }
  .founder-grid { grid-template-columns: 5fr 7fr; gap: 72px; }
  .closing h2 { font-size: 64px; }
}
/* Steps on desktop: list left on a hairline track, the stage right. Inactive steps step back and
   keep only their heading; a click on one jumps there. */
@media (min-width: 900px) {
  .flow { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: center; margin-top: calc(var(--u) * 8); max-width: 1000px; margin-left: auto; margin-right: auto; }
  .flow-stage { order: 2; width: 100%; max-width: 440px; }
  .flow-steps { order: 1; gap: 0; }
  html.js .flow-dots { display: none; }
  .flow-step { position: relative; padding: 24px 0 24px 32px; border-left: 1px solid var(--hair-dark); }
  .flow-step::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--gold); opacity: 0; }
  .flow-step p { margin-left: 44px; }
  html.js .flow-step:not(.is-active) { opacity: .45; }
  html.js .flow-step:not(.is-active):hover { opacity: .75; }
  html.js .flow-step:not(.is-active) p { display: none; }
  html.js .flow-step.is-active::before { opacity: 1; }
}
/* Wide screens (08.10.): both product loops use the full 1024 px content width, the loop column 6fr,
   the text column 5fr, so each loop reads at the size of the text beside it (about 506 px to 422 px). */
@media (min-width: 1200px) {
  .flow { max-width: none; gap: 96px; }
  .flow-stage { max-width: none; }
  .op-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 96px; }
}
@media (min-width: 1100px) {
  .nav { display: flex; }
  /* Operator path in one row like Core's; eight stations need the smaller name size */
  .modules-op { grid-template-columns: repeat(8, 1fr); row-gap: 0; }
  .modules-op li:nth-child(4n+1)::before { left: 0; }
  .modules-op li:nth-child(4n)::before { right: 0; }
  .modules-op li:first-child::before { left: 50%; }
  .modules-op li:last-child::before { right: 50%; }
  .modules-op .mod-name { font-size: 16px; }
  .tc-grid { grid-template-columns: repeat(3, 1fr); }
  .compare tbody th, .compare td { padding: 18px 20px; }
}

/* Desktop hero: two columns, text left aligned, the explainer to the right */
@media (min-width: 1000px) {
  .hero { padding: 136px 0 calc(var(--u) * 12); }
  .hero .wrap.hero-grid { max-width: 1280px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; text-align: left; }
  .hero-text { display: flex; flex-direction: column; align-items: flex-start; }
  .hero h1 { font-size: 60px; }
  .hero-sub { order: 2; margin-top: 24px; font-size: 19px; }
  .hero .cta { order: 3; margin-top: 32px; align-items: flex-start; }
  .hero .paths { order: 3; margin: 32px 0 0; max-width: 520px; }
  .hero-meta { order: 5; margin-top: 20px; }
  .hero-media { max-width: none; margin-top: 0; }
}
/* Round 5: the new h1 has longer words; it stays at 60px and the gold phrase never breaks. */
.hero h1 em { white-space: nowrap; }

/* Phone: the comparison table becomes stacked rows, Core and Operator side by side */
@media (max-width: 759px) {
  .compare, .compare thead, .compare tbody { display: block; }
  .compare tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .compare thead .c-row { display: none; }
  .compare thead th { font-size: 22px; padding: 0 0 12px; }
  .compare tbody th { grid-column: 1 / -1; white-space: normal; padding: 20px 0 8px; border-bottom: 0; }
  .compare td { padding: 0 0 16px; font-size: 14px; }
  .faq-item p { padding: 0 0 24px 36px; }
  .tc-filter { gap: 6px; flex-wrap: nowrap; }
  .tc-filter button { padding: 9px 13px; font-size: 13px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-ghost, .way-link .icon, .tc, .tc-text, .flow-stage video, .flow-dots button, html.js .modules .mod-icon { transition: none; } html { scroll-behavior: auto; }
  .tc *, .tc *::after { animation: none !important; }
}