/* COGNAiO landing page. Colours and type from the 2026 explainer film (cognaio-video-system/src/theme/tokens.ts). */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --stage: #161029;
  --stage-hi: #231946;
  --deep: #0e0a1c;
  --violet: #7656a8;
  --lavender: #c4b5e8;
  --light: #f0eeff;
  --surface: #e4e0f5;
  --muted: #9a92bf;
  --ink: #1f1f1f;
  --ink-soft: #4a4466;
  --success: #8de89d;
  --success-on-light: #1f6e35; /* green text on light cards: 4.8 to 6.3:1 */
  --exception: #f2c94c;
  --pad: clamp(20px, 6.2vw, 96px);
  /* vertical rhythm: all sections share one backdrop, so the spacing alone separates them */
  --sec-pad: clamp(64px, 7vw, 112px); /* above and below each section */
  --head-gap: clamp(40px, 4.4vw, 64px); /* section heading to its main content */
  --block-gap: clamp(44px, 5vw, 72px); /* between two blocks inside a section */
  --max: 1440px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* theme channels (dark is the brand default; light overrides below) */
  --fg: #f0eeff;
  --fg-rgb: 240, 238, 255;
  --lav-rgb: 196, 181, 232;
  --panel-rgb: 46, 38, 82;
  --shadow-rgb: 4, 2, 12;
  --shadow-k: 1;
  --accent: #c4b5e8;
  --accent-hi: #d9cdf7;
  --card: #f0eeff;
  --core: #f0eeff;
  --core-rgb: 240, 238, 255;
  --btn-bg: #f0eeff;
  --btn-fg: #161029;
  --nav-bg: rgba(14, 10, 28, 0.94);
  --nav-solid: #0e0a1c; /* the open phone menu: no text may show through */
  --chip-solid: #1f1838;
  --success-fg: #8de89d;
  --hero-tint: rgba(118, 86, 168, 0.22);
  --panel: rgba(46, 38, 82, 0.5);
  --line: rgba(196, 181, 232, 0.18);
  --map-base: rgba(70, 60, 110, 0.55);
  --map-eu: rgba(118, 86, 168, 0.85);
  --map-ch: #f0eeff;
  --map-dc: #cdbff2;
  /* agent hexagon facets: idle and active (track.tsx FACETS) */
  --fi0: #4a4472; --fi1: #3e3866; --fi2: #605a8c; --fi3: #5a5486; --fi4: #544e80; --fi5: #4f497b;
  --fa0: #7c77b4; --fa1: #625d9a; --fa2: #cfcdeb; --fa3: #b6b4dd; --fa4: #9e9ccb; --fa5: #8d89c0;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --stage: #f7f6fb; /* almost white with a breath of lilac; no grey edges */
  --stage-hi: #ffffff;
  --deep: #f1f0f7;
  --muted: #625b80; /* 5.5:1 or more on the light page */
  --fg: #352b54; /* a dark lilac ink, about 12:1, instead of near-black */
  --fg-rgb: 22, 16, 41; /* stays near-black: the softer grey texts are mixed from it and keep their contrast */
  --lav-rgb: 118, 86, 168;
  --panel-rgb: 255, 255, 255;
  --shadow-rgb: 40, 26, 80;
  --shadow-k: 0.3;
  --accent: #6a4c9c;
  --accent-hi: #4f3585;
  --card: #ffffff;
  --core: #7656a8;
  --core-rgb: 118, 86, 168;
  --btn-bg: #352b54;
  --btn-fg: #f0eeff;
  --nav-bg: rgba(247, 246, 251, 0.94);
  --nav-solid: #f7f6fb;
  --chip-solid: #ffffff;
  --success-fg: #1f6e35;
  /* the proof cards (hero case, findings, decision, traceable result) turn dark on the light page */
  --inv-card: #33285a; --inv-line: rgba(196, 181, 232, 0.2); --inv-soft: #c9c2e3; --inv-label: #c4b5e8;
  --hero-tint: rgba(118, 86, 168, 0.08);
  --panel: rgba(255, 255, 255, 0.85);
  --line: rgba(70, 63, 106, 0.12);
  --map-base: #dcd8ec;
  --map-eu: #b4a5dc;
  --map-ch: #5f3f97;
  --map-dc: #8a6cc2;
  /* light-tone facets (AgentHex.tsx FACETS_IDLE / FACETS_ACTIVE) */
  --fi0: #b3abd7; --fi1: #a59ccd; --fi2: #cbc5e6; --fi3: #c0b9e0; --fi4: #b7afda; --fi5: #aea6d4; /* idle stays lighter than active, but visible on the lavender layer */
  --fa0: #5f5b8f; --fa1: #4b4778; --fa2: #b9b8da; --fa3: #a3a2c8; --fa4: #8a89b4; --fa5: #7a77a8;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
html.pos-wait body { opacity: 0; } /* the moment after a language switch, until the same place is shown (js/boot.js, js/site.js) */
body { transition: opacity 0.15s; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--deep);
  color: var(--fg);
  font-family: "Montserrat", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
#hex-idle .f0 { fill: var(--fi0); } #hex-idle .f1 { fill: var(--fi1); } #hex-idle .f2 { fill: var(--fi2); } #hex-idle .f3 { fill: var(--fi3); } #hex-idle .f4 { fill: var(--fi4); } #hex-idle .f5 { fill: var(--fi5); }
#hex-active .f0 { fill: var(--fa0); } #hex-active .f1 { fill: var(--fa1); } #hex-active .f2 { fill: var(--fa2); } #hex-active .f3 { fill: var(--fa3); } #hex-active .f4 { fill: var(--fa4); } #hex-active .f5 { fill: var(--fa5); }
.glow-stop { stop-color: rgb(var(--lav-rgb)); }
/* wordmark: negative on dark, positive on light */
.wm-pos { display: none !important; }
:root[data-theme="light"] .wm-neg { display: none !important; }
:root[data-theme="light"] .wm-pos { display: block !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* registered trademark after COGNAiO, small and raised as in the logo; line-height 0 keeps the line spacing */
.reg { font-size: 0.42em; font-weight: 600; line-height: 0; vertical-align: super; margin-left: 0.06em; letter-spacing: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 10px; background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.accent { color: var(--accent); }

/* stroke icons drawn from the sprite */
svg.i, .ti svg, .tag svg, .gbadge svg {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
svg.i { width: 20px; height: 20px; flex: none; }

/* ---------- navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  padding-block: clamp(16px, 2.4vh, 26px);
  transition: background 0.3s, padding 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled { background: var(--nav-bg); border-bottom-color: var(--line); padding-block: 12px; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav-logo { padding-block: 13px; margin-block: -13px; } /* 44px to tap, nothing moves */
.nav-logo img { height: clamp(18px, 1.6vw, 22px); width: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); font-size: 14px; font-weight: 600; }
.nav-links a { text-decoration: none; color: rgba(var(--fg-rgb), 0.72); transition: color 0.2s; }
.nav-links a:hover { color: var(--fg); }
@media (min-width: 1001px) { .nav-menu > a { padding-block: 11px; margin-block: -11px; } } /* 44px to click, nothing moves */
/* five links since "Try it" (2026-10-28): every label on one line; on laptops less space between them and the short
   "Demo" button, so the German bar fits too; below 1001px the menu button takes over */
@media (min-width: 1001px) { .nav-menu > a, .nav-cta { white-space: nowrap; } }
@media (min-width: 1001px) and (max-width: 1199px) { .nav-links { gap: clamp(12px, 3.6vw - 22px, 36px); } }
/* wide screens with a mouse: a soft highlight glides from link to link under the pointer (js/site.js moves it) */
.nav-links { position: relative; }
.nav-menu > a, .nav-links .lang-opt { position: relative; z-index: 1; }
.nav-glide {
  position: absolute; left: 0; top: 0; z-index: 0; height: 36px; border-radius: 11px; pointer-events: none; opacity: 0;
  background: rgba(var(--fg-rgb), 0.09); box-shadow: inset 0 0 0 1px rgba(var(--lav-rgb), 0.16);
  transition: opacity 0.2s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-glide.is-on { opacity: 1; }
.nav-glide.is-pill { border-radius: 99px; } /* over the language switch it takes the shape of its pills */
.nav-glide.is-jump { transition: opacity 0.2s ease; } /* it appears where the pointer is; it only glides once it is shown */
:root[data-theme="light"] .nav-glide { background: rgba(var(--lav-rgb), 0.12); }
@media (prefers-reduced-motion: reduce) { .nav-glide { transition: opacity 0.2s ease; } }
.nav-links .nav-cta {
  color: var(--fg); padding: 9px 16px; border-radius: 12px;
  border: 1px solid rgba(var(--lav-rgb), 0.35); transition: border-color 0.2s, background 0.2s;
}
.nav-links .nav-cta:hover { border-color: var(--accent); background: rgba(118, 86, 168, 0.25); }
.nav-links .nav-cta { display: inline-flex; align-items: center; min-height: 44px; }
/* section links: inline on wide screens, a drop-down panel behind the menu button on phones */
.nav-menu { display: contents; }
.menu-toggle {
  display: none; width: 44px; height: 44px; border-radius: 12px; place-items: center; cursor: pointer; padding: 0;
  background: none; border: 1px solid rgba(var(--lav-rgb), 0.35); color: var(--fg); transition: border-color 0.2s, background 0.2s;
}
.menu-toggle:hover { border-color: var(--accent); background: rgba(118, 86, 168, 0.18); }
.menu-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-toggle .i-close, .nav[data-open] .menu-toggle .i-menu { display: none; }
.nav[data-open] .menu-toggle .i-close { display: block; }
/* language switch EN / DE / IT: a small segmented pill next to the section links; a row in the phone menu */
.lang-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; border: 1px solid var(--line); }
.nav-links .lang-opt { padding: 5px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: rgba(var(--fg-rgb), 0.6); }
.nav-links .lang-opt[aria-current="page"] { background: rgba(118, 86, 168, 0.3); color: var(--fg); }
@media (max-width: 1000px) {
  .nav-links { gap: 10px; }
  .menu-toggle { display: grid; }
  .theme-toggle { width: 44px !important; height: 44px !important; }
  .nav-menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column;
    padding: 4px var(--pad) 12px; background: var(--nav-solid); border-bottom: 1px solid var(--line);
  }
  .nav[data-open] { background: var(--nav-solid); border-bottom-color: var(--line); }
  .nav[data-open] .nav-menu { display: flex; }
  .nav-menu a { display: flex; align-items: center; min-height: 48px; font-size: 16px; color: var(--fg); border-top: 1px solid var(--line); }
  .nav-menu a:first-child { border-top: 0; }
  .nav-menu .lang-switch { align-self: stretch; gap: 8px; padding: 12px 0 4px; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .nav-menu .lang-opt { min-height: 44px; min-width: 52px; justify-content: center; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; }
  .nav-menu .lang-opt[aria-current="page"] { border-color: var(--accent); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none;
  padding: 16px 22px 16px 24px; border-radius: 14px; border: 0; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 10px 30px rgba(var(--shadow-rgb), calc(0.35 * var(--shadow-k))); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 38px rgba(var(--shadow-rgb), calc(0.45 * var(--shadow-k))); }
.btn-primary svg { transition: transform 0.2s; }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-lg { font-size: 17px; padding: 18px 26px 18px 30px; }
.btn-film { background: none; color: var(--fg); padding-inline: 6px; gap: 12px; }
.btn-film .ring {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(var(--lav-rgb), 0.5); transition: border-color 0.2s, background 0.2s;
}
.btn-film:hover .ring { border-color: var(--accent); background: rgba(118, 86, 168, 0.3); }
.btn-film small { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: -4px; }

/* ---------- shared bits ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 clamp(16px, 2.4vh, 24px);
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent);
}
.eyebrow-hex { width: 16px; height: 16px; flex: none; }
.tag {
  flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
.tag svg { width: 11px; height: 11px; stroke-width: 3; }
.tag.done { background: rgba(141, 232, 157, 0.38); color: var(--success-on-light); }
.tag.you { background: rgba(118, 86, 168, 0.14); color: #6a4c9c; }
.ti { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--surface); color: var(--violet); }
.ti svg { width: 14px; height: 14px; stroke-width: 2.2; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; min-height: 100svh; }

/* ---------- the stage: fixed backdrop behind every section ---------- */
.backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(70% 60% at 72% 34%, var(--hero-tint) 0%, transparent 70%),
    radial-gradient(120% 90% at 50% 30%, var(--stage-hi) 0%, var(--stage) 55%, var(--deep) 100%);
}
.bd-float { position: absolute; animation: bdFloat 22s ease-in-out infinite alternate; }
.bd-hex { display: block; width: 100%; height: 100%; overflow: visible; animation: bdSpin 720s linear infinite; }
.bd-hex path { fill: rgba(118, 86, 168, 0.055); stroke: rgba(var(--lav-rgb), 0.05); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.f1 { width: 84vh; height: 84vh; left: calc(86vw - 42vh); top: -22vh; }
.f2 { width: 68vh; height: 68vh; left: calc(6vw - 34vh); top: 58vh; animation-duration: 28s; animation-delay: -9s; }
.f3 { width: 56vh; height: 56vh; left: calc(50vw - 28vh); top: 82vh; animation-duration: 25s; animation-delay: -4s; }
.f2 .bd-hex { animation-direction: reverse; animation-duration: 600s; }
.f3 .bd-hex { animation-duration: 840s; }
@keyframes bdFloat { from { transform: translate(-14px, -10px); } to { transform: translate(14px, 10px); } }
@keyframes bdSpin { to { transform: rotate(360deg); } }
:root[data-theme="light"] .bd-hex path { fill: rgba(255, 255, 255, 0.55); stroke: rgba(118, 86, 168, 0.13); } /* a fine embossing, not grey patches */
@media (prefers-reduced-motion: reduce) { .bd-float, .bd-hex { animation: none; } }
.hero-stage { position: absolute; inset: 0; z-index: 0; }
.hero-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-copy { position: relative; z-index: 2; padding-top: clamp(92px, 11vh, 128px); }
.hero-copy-inner { max-width: min(640px, 48vw); }
/* German: "Arbeit erledigt." is a little wider than "work done.", the column allows it on one line */
@media (min-width: 900px) { :lang(de) .hero-copy-inner { max-width: min(660px, 48vw); } }
.hero h1 {
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; text-wrap: balance;
  font-size: clamp(36px, min(4.3vw, 7.2vh), 64px); /* a sentence since 2026-10-17 ("Automate the repetitive work ..."), so smaller than the old three-word title */
}
/* the eyebrow sits inside the h1 (one heading for search engines); its line keeps the metrics of body text, so it sits
   exactly where the eyebrow above the h1 used to sit */
.hero h1 .eyebrow-line { display: block; font-size: 17px; font-weight: 400; line-height: 1.6; letter-spacing: normal; }
/* the German title is the longest: a step smaller on wide screens, so the process track stays in the first screen */
@media (min-width: 900px) { :lang(de) .hero h1 { font-size: clamp(34px, min(3.5vw, 5.8vh), 54px); } }
.lede {
  margin: clamp(18px, 2.8vh, 28px) 0 0; max-width: 33em;
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: rgba(var(--fg-rgb), 0.78);
}
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(22px, 3.6vh, 36px); }
.hero-toggle {
  position: absolute; z-index: 4; left: var(--pad); bottom: 22px;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(var(--panel-rgb), 0.6); border: 1px solid rgba(var(--lav-rgb), 0.28); color: var(--accent);
  transition: border-color 0.2s, color 0.2s;
}
.hero-toggle:hover { border-color: var(--accent); color: var(--fg); }
.hero-toggle::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; } /* 46px to click, 36px to see */
.hero-toggle .i-play { display: none; }
.hero-toggle[aria-pressed="true"] .i-play { display: block; }
.hero-toggle[aria-pressed="true"] .i-pause { display: none; }

@media (max-width: 899px) {
  .hero-copy { padding-top: clamp(88px, 12vh, 124px); }
  .hero-copy-inner { max-width: 560px; }
  .hero h1 { font-size: clamp(32px, 8.6vw, 52px); }
  .eyebrow { font-size: 11px; letter-spacing: 0.17em; gap: 10px; }
  .lede { font-size: 16px; line-height: 1.55; }
  .cta-row { gap: 10px 18px; }
  .btn { padding: 14px 18px 14px 20px; }
  .btn-film { padding-inline: 2px; }
  .btn-film .ring { width: 36px; height: 36px; }
  .hero-toggle { width: 44px; height: 44px; bottom: 16px; }
}
@media (max-width: 480px) { .hide-xs { display: none; } }
.nav-cta .cta-s { display: none; }
@media (max-width: 480px) { .nav-links .nav-cta { padding-inline: 11px; font-size: 14px; white-space: nowrap; } } /* stays on one line beside the menu button */
@media (max-width: 440px) { .nav-cta .cta-l { display: none; } .nav-cta .cta-s { display: inline; } } /* phones: just "Demo" */
@media (min-width: 1001px) and (max-width: 1199px) { .nav-cta .cta-l { display: none; } .nav-cta .cta-s { display: inline; } } /* laptops too (see the nav above) */
/* short laptop screens: keep the track in the first screen */
@media (min-width: 900px) and (max-height: 820px) {
  .hero h1 { font-size: clamp(34px, min(4vw, 6.6vh), 56px); }
  :lang(de) .hero h1 { font-size: clamp(32px, min(3.3vw, 5.4vh), 46px); }
  .lede { margin-top: 16px; }
  .cta-row { margin-top: 24px; }
}

/* ---------- hero stage overlays (positioned by js/hero.js) ---------- */
.hs-pool {
  position: absolute; left: 0; top: 0; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(150, 110, 210, 0.3) 0%, rgba(118, 86, 168, 0.11) 35%, transparent 62%);
  will-change: transform, opacity; pointer-events: none;
}
.hs-ov { position: absolute; inset: 0; pointer-events: none; }
.hs-ov > * { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.hs-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; color: var(--accent);
}
:root[data-theme="light"] .hs-label.is-lit { color: #12391d !important; background: #8de89d; border-radius: 6px; padding: 3px 7px; } /* the system that is reached, on a mint field */
.hs-chip {
  display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 10px; border-radius: 12px;
  background: var(--card); border: 1.5px solid transparent; color: var(--ink); /* in the colour of the case card it becomes */
  font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: 0 14px 34px rgba(var(--shadow-rgb), calc(0.45 * var(--shadow-k)));
}
.hs-chip svg { color: var(--violet); }
/* the small document a request drops into Incoming (the token then runs through the agents) */
.hs-doc {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--violet);
  box-shadow: 0 0 0 1.5px rgba(var(--core-rgb), 0.7), 0 6px 16px rgba(var(--shadow-rgb), calc(0.45 * var(--shadow-k)));
}
.hs-dec {
  padding: 10px 14px; border-radius: 12px; background: var(--card); color: var(--ink);
  font-size: 13px; font-weight: 700; line-height: 1.25; white-space: nowrap; box-shadow: 0 14px 34px rgba(var(--shadow-rgb), calc(0.45 * var(--shadow-k)));
}
.hs-dec .r1 { display: flex; align-items: center; gap: 8px; }
.hs-dec .r2 { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 500; color: var(--ink-soft); }
.hs-dec .av { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; }
.hs-dec .stack { display: grid; align-items: center; }
.hs-dec .stack > * { grid-area: 1 / 1; }
.hs-dec .ok { display: flex; align-items: center; gap: 6px; color: var(--success-on-light); font-weight: 700; }
.hs-dec .ok .ic { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--success); }

.hc-card {
  width: var(--cw, 360px); padding: 16px 18px 10px; border-radius: 16px; color: var(--ink);
  background: var(--card); box-shadow: 0 30px 80px rgba(var(--shadow-rgb), calc(0.55 * var(--shadow-k)));
}
.hc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 0 10px; border-bottom: 1px solid rgba(70, 63, 106, 0.14); }
.hc-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.hc-rows-wrap { position: relative; margin-top: 6px; clip-path: inset(0 -10px); } /* clips the rows at top and bottom only, so a highlighted row keeps its rounded corners at the sides */
.hc-row {
  position: absolute; left: 0; right: 0; top: 0; height: var(--rh, 30px);
  display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: #2a2540; white-space: nowrap;
}
.hc-row .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* the finding an agent throws into the case card: the dark panel with a fine frame, above the pile, so you see it land
   on its row and dissolve there into the row's lilac glow (critique step 20, Daniel 2026-10-16) */
.hs-find {
  z-index: 200; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 10px;
  background: rgba(var(--panel-rgb), 0.95); border: 1.5px solid rgba(var(--lav-rgb), 0.5); color: var(--fg);
  font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 14px 34px rgba(var(--shadow-rgb), calc(0.45 * var(--shadow-k))), 0 0 24px rgba(118, 86, 168, 0.3);
}
.hs-find .ic { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--success); font-size: 12px; font-weight: 800; }
.hs-find.flag { border-color: rgba(242, 201, 76, 0.75); }
.hs-find.flag .ic { background: var(--exception); }

/* the case card: queue of cases, one finding per agent, the outcome and a time-saved sticker */
.hc-queue { display: flex; align-items: center; gap: 6px; padding-bottom: 10px; }
.hc-queue .q { position: relative; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; border: 1.5px solid rgba(118, 86, 168, 0.35); color: #8a80ad; }
.hc-queue .q.now { background: var(--violet); border-color: var(--violet); color: #fff; }
.hc-queue .q.done { background: rgba(141, 232, 157, 0.45); border-color: transparent; color: var(--success-on-light); }
.hc-queue .qk { position: absolute; inset: -1.5px; border-radius: 7px; display: grid; place-items: center; background: #bdf0c6; color: var(--success-on-light); opacity: 0; }
.hc-queue .qt { margin-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6a4c9c; }
.hc-case .hc-head { padding-bottom: 4px; border-bottom: 0; }
.hc-case .hc-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface); color: var(--violet); }
.hc-sub { padding-bottom: 10px; border-bottom: 1px solid rgba(70, 63, 106, 0.14); font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.hc-find { margin: 0 -8px; padding: 0 8px; border-radius: 8px; background: rgba(118, 86, 168, calc(var(--hl, 0) * 0.34)); } /* the lilac glow a landing finding leaves on its row */
.hc-find .st { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.hc-find.ok .st { background: rgba(141, 232, 157, 0.45); color: var(--success-on-light); }
.hc-find.flag .st { background: #f2c94c; color: #5a4300; }
.hc-find.flag .txt { color: #7a5a00; font-weight: 600; }
.hc-foot-box { margin: 0 -18px; overflow: hidden; } /* its height opens at the end (js/hero.js) */
.hc-foot { display: grid; margin: 8px 0 0; padding: 10px 18px 2px; border-top: 1px solid rgba(70, 63, 106, 0.14); min-height: 30px; }
.hc-foot > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; opacity: 0; }
.hc-foot.is-dec .ft-a { color: #6a4c9c; }
.hc-foot .ft-b, .hc-foot.is-done .ft-a { color: var(--success-on-light); }
.hc-saved {
  position: absolute; right: -14px; top: -18px; display: flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 14px;
  background: var(--success); color: #12391d; font-size: 13px; font-weight: 700; white-space: nowrap; opacity: 0; transform-origin: 70% 50%;
  box-shadow: 0 14px 34px rgba(var(--shadow-rgb), calc(0.45 * var(--shadow-k)));
}
.hc-saved b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
/* the pile: each card keeps its own tilt and turns around its top centre; cards further back fade into the stage */
.hc-case { transform-origin: 50% 0; }
.hc-case::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--stage); opacity: var(--dim, 0); pointer-events: none; transition: opacity 0.25s; }
.hero-copy { pointer-events: none; } /* the text column only: the pile beside it can be clicked */
.hero-copy-inner { pointer-events: auto; }
.hero-stage.is-deck .hc-case { pointer-events: auto; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hero-stage.is-deck .hc-case:hover::after { opacity: calc(var(--dim, 0) * 0.45); }
.hero-stage.is-replaying .hc-case { transition: opacity 0.4s, transform 0.45s var(--ease); }
/* after the run: back, one dot per case, forward (placed by js/hero.js below the pile, on phones beside the replay button) */
.hero-deck { position: absolute; z-index: 4; left: 0; top: 0; display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.5s 0.25s; }
.hero-deck.is-on { opacity: 1; }
.hd-btn {
  position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(var(--panel-rgb), 0.6); border: 1px solid rgba(var(--lav-rgb), 0.28); color: var(--accent); transition: border-color 0.2s, color 0.2s;
}
.hd-btn:hover { border-color: var(--accent); color: var(--fg); }
.hd-btn::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; } /* 46px to click */
.hd-dots { display: flex; }
.hd-dot { position: relative; width: 26px; height: 36px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.hd-dot::before { content: ""; position: absolute; inset: -4px 0; } /* 44px tall to click */
.hd-dot::after { content: ""; width: 7px; height: 7px; border-radius: 4px; background: rgba(var(--lav-rgb), 0.45); transition: width 0.3s var(--ease), background-color 0.3s; }
.hd-dot:hover::after { background: rgba(var(--lav-rgb), 0.8); }
.hd-dot[aria-current="true"]::after { width: 18px; background: var(--accent); }
.hero-toggle .i-replay { display: none; }
.hero-toggle.is-replay .i-replay { display: block; }
.hero-toggle.is-replay :is(.i-pause, .i-play) { display: none; }

@media (max-width: 899px) {
  .hs-label { font-size: 9.5px; letter-spacing: 0.12em; }
  .hc-queue { padding-bottom: 8px; }
  .hc-queue .q { width: 20px; height: 20px; }
  .hc-sub { font-size: 11.5px; padding-bottom: 8px; }
  .hc-case .hc-ic { width: 26px; height: 26px; }
  .hc-find .st { width: 18px; height: 18px; font-size: 11px; }
  .hc-foot-box { margin: 0 -14px; }
  .hc-foot { margin: 6px 0 0; padding: 8px 14px 2px; min-height: 26px; }
  .hc-foot > span { font-size: 12px; }
  .hc-saved { right: 8px; top: auto; bottom: -30px; padding: 6px 11px; font-size: 12px; } /* hangs below the card: on phones the queue and the outcome fill the full width */
  .hc-saved b { font-size: 18px; }
  .hd-btn { width: 40px; height: 40px; }
  .hd-btn::before { inset: -2px; }
  .hd-dot { height: 40px; }
  .hs-chip { font-size: 11.5px; gap: 7px; padding: 6px 11px 6px 8px; border-radius: 10px; }
  .hs-find { font-size: 11.5px; padding: 4px 10px 4px 4px; gap: 6px; }
  .hs-find .ic { width: 17px; height: 17px; font-size: 11px; }
  .hs-chip svg { width: 13px; height: 13px; }
  .hs-dec { font-size: 11.5px; padding: 8px 11px; }
  .hc-card { padding: 12px 14px 6px; border-radius: 14px; }
  .hc-title { font-size: 15px; }
  .hc-row { font-size: 12.5px; gap: 8px; }
}

/* ---------- sections ---------- */
.sec { position: relative; padding-block: var(--sec-pad); overflow: hidden; } /* transparent: the fixed backdrop shows through */
.sec > .wrap { position: relative; }
.sec-head { max-width: 780px; }
.sec-head-center { margin-inline: auto; text-align: center; }
.sec h2 { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
.sec-lede { margin-top: 22px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.62; color: rgba(var(--fg-rgb), 0.76); max-width: 40em; }
.sec-head-center .sec-lede { margin-inline: auto; }
/* flush right above the right-hand column of a two-column block (Human in the lead); left again once the columns stack */
.sec-head-right { max-width: 1080px; margin-inline: auto; text-align: right; }
@media (max-width: 860px) { .sec-head-right { text-align: left; } }
.sec-text { margin-top: 16px; color: rgba(var(--fg-rgb), 0.66); max-width: 40em; }
.sec-note { margin-top: 28px; padding-left: 16px; border-left: 2px solid var(--violet); color: rgba(var(--fg-rgb), 0.7); font-size: 15px; }
.sec-close { margin-top: var(--block-gap); font-size: clamp(22px, 1.95vw, 28px); line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; max-width: 32em; text-wrap: balance; }
.fineprint { margin-top: 22px; font-size: 13px; color: var(--muted); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.split-rev > .sec-head { order: 2; }

/* reveal on scroll (the html.js class comes from js/boot.js) */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.tiles .reveal:nth-child(2) { transition-delay: 0.08s; }
.tiles .reveal:nth-child(3) { transition-delay: 0.16s; }
.tiles .reveal:nth-child(4) { transition-delay: 0.24s; }
.tiles .reveal:nth-child(5) { transition-delay: 0.32s; }
.tiles .reveal:nth-child(6) { transition-delay: 0.4s; }
/* looping decorations run only while visible */
[data-anim] *, [data-anim] *::before, [data-anim] *::after { animation-play-state: paused; }
[data-anim].is-on *, [data-anim].is-on *::before, [data-anim].is-on *::after { animation-play-state: running; }

/* ---------- logo band below the hero: customers and partners, one slow carousel (critique step 23 A) ---------- */
.lb { position: relative; overflow: hidden; border-top: 1px solid var(--line); background: rgba(var(--panel-rgb), 0.2); }
.lb-in { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); padding-block: clamp(20px, 2.4vw, 30px); }
.lb-label { flex: none; max-width: 11em; font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.lb-mask { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.lb-track { display: flex; width: max-content; animation: lbRun 70s linear infinite; }
.lb:hover .lb-track { animation-play-state: paused; }
.lb-set { display: flex; align-items: center; gap: clamp(44px, 5vw, 80px); padding-right: clamp(44px, 5vw, 80px); }
.lb-set img { display: block; height: var(--h, 28px); width: auto; opacity: 0.7; filter: brightness(0) invert(1); transition: opacity 0.2s; } /* white on the dark page */
.lb-set img:hover { opacity: 1; }
:root[data-theme="light"] .lb-set img { filter: none; opacity: 0.8; } /* the dark ink of the light page */
@keyframes lbRun { to { transform: translateX(-50%); } }
/* heights balanced by shape and ink (wide or light logos larger, compact or heavy ones smaller), not by the bounding box alone */
.lb-abraxas { --h: 24px; }
.lb-arcplace { --h: 31px; }
.lb-arlewo { --h: 29px; }
.lb-garaio-rem { --h: 30px; } /* its sub-line takes height */
.lb-ing { --h: 27px; }
.lb-lgt { --h: 40px; }
.lb-lukb { --h: 30px; }
.lb-migros-bank { --h: 20px; }
.lb-optimal-systems { --h: 30px; } /* its sub-line takes height */
.lb-post-at { --h: 30px; } /* the line horn with "Österreichische Post" beside it */
.lb-saga { --h: 27px; }
.lb-sika { --h: 40px; }
.lb-sps { --h: 39px; }
.lb-swisscom { --h: 30px; }
.lb-treibacher { --h: 25px; }
.lb-visana { --h: 29px; } /* the arc above the name takes height */
.lb-vodafone { --h: 28px; }
@media (max-width: 860px) {
  .lb-in { flex-direction: column; align-items: stretch; gap: 14px; }
  .lb-label { max-width: none; text-align: center; }
  .lb-set img { height: calc(var(--h, 28px) * 0.82); }
  .lb-track { animation-duration: 50s; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-track { animation: none; width: auto; }
  .lb-set { flex-wrap: wrap; justify-content: center; row-gap: 22px; padding-right: 0; }
  .lb-set + .lb-set { display: none; }
  .lb-mask { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- why COGNAiO: three messages (critique step 29 B, Daniel 2026-10-22) ----------
   More work done, faster results, simpler to run: the positive word in green, the statement large on the left, the
   explanation and a link to the section that tells more on the right. "Why COGNAiO" is the section heading, styled like
   every other eyebrow (hexagon on the left; .sec h2 would otherwise win over .eyebrow), no numbers (step 32, 2026-10-24). */
#gap .why-h { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); line-height: 1.4; text-wrap: initial; }
@media (max-width: 899px) { #gap .why-h { font-size: 11px; letter-spacing: 0.17em; gap: 10px; } }
.why3 { margin-top: clamp(20px, 2.6vw, 36px); }
.why3 > div { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: baseline; gap: 10px clamp(24px, 4vw, 72px); padding-block: clamp(22px, 2.6vw, 36px); border-top: 1px solid var(--line); }
.why3 > div:last-child { border-bottom: 1px solid var(--line); }
.why3 h3 { font-size: clamp(30px, min(3.9vw, 6.5vh), 58px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; }
.why3 h3 em { font-style: normal; color: var(--success-fg); }
/* light theme: green on a mint field, like the ticks and the time-saved sticker (mint as text would be too faint; Daniel 2026-10-23) */
:root[data-theme="light"] .why3 h3 em { color: #12391d; background: #8de89d; border-radius: 0.18em; padding: 0 0.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.why3-t { display: grid; gap: 14px; justify-items: start; }
.why3 p { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: rgba(var(--fg-rgb), 0.76); }
.why3 a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--fg); text-decoration: none; }
.why3 a svg.i { width: 16px; height: 16px; color: var(--accent); transition: transform 0.2s; }
.why3 a:hover svg.i { transform: translateX(3px); }
.why3-close { margin-top: clamp(32px, 4vw, 56px); }
@media (max-width: 860px) { .why3 > div { grid-template-columns: minmax(0, 1fr); } }
/* a step below the hero headline at every size, so the hero stays the largest (Daniel 2026-10-23) */
@media (max-width: 899px) { .why3 h3 { font-size: clamp(29px, 7.7vw, 46px); } }
@media (min-width: 900px) and (max-height: 820px) { .why3 h3 { font-size: clamp(30px, min(3.6vw, 5.9vh), 50px); } }

/* ---------- how it works: from general AI to business specialists ----------
   01 your business knowledge flows into the agent, the AI model drops in from above, 02 a traceable result comes out.
   The example is the plausibility check of the motor claim in the hero. Plays once when it scrolls in. */
.hw-head h2 { font-size: clamp(34px, 4.2vw, 60px); font-weight: 700; line-height: 1.06; letter-spacing: -0.026em; } /* a moment: one step larger */
.hw-head { max-width: 900px; }
.hw {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(28px, 0.2fr) auto minmax(28px, 0.2fr) minmax(0, 0.8fr); align-items: center;
  margin-top: calc(var(--head-gap) + 16px); margin-bottom: 72px; /* room for the model pill above and the agent's name below */
}
.hw-k { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(var(--fg-rgb), 0.78); }
.hw-know { position: relative; }
.hw-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hw-card { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 16px; background: rgba(var(--panel-rgb), 0.35); border: 1px solid rgba(var(--lav-rgb), 0.22); transition: border-color 0.3s, background 0.3s; }
/* each card is a button: a short line about what it is; hover (wide screens with a mouse) or a tap shows examples */
.hw-cbtn {
  position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; height: 100%; padding: 16px 18px 18px;
  font: inherit; color: inherit; text-align: left; background: none; border: 0; border-radius: inherit; cursor: pointer;
}
.hw-cbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hw-cbtn > * { flex-shrink: 0; } /* a small card cuts its text, never squeezes the icon */
.hw-card.is-on { border-color: rgba(var(--lav-rgb), 0.6); background: rgba(var(--panel-rgb), 0.6); }
.hw-ic { width: 34px; height: 34px; margin-bottom: 10px; border-radius: 10px; display: grid; place-items: center; background: rgba(118, 86, 168, 0.28); color: rgba(var(--fg-rgb), 0.85); }
.hw-ic svg.i { width: 18px; height: 18px; }
.hw-card b { font-size: 15px; font-weight: 700; }
.hw-plus { position: absolute; top: 18px; right: 18px; width: 12px; height: 12px; opacity: 0.55; transition: transform 0.35s var(--ease), opacity 0.3s; }
.hw-plus::before, .hw-plus::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 2px; border-radius: 2px; background: var(--fg); }
.hw-plus::after { transform: rotate(90deg); }
.hw-card.is-on .hw-plus { transform: rotate(45deg); opacity: 0.9; }
.hw-body { position: relative; display: block; }
.hw-v { display: block; font-size: 15px; line-height: 1.45; color: rgba(var(--fg-rgb), 0.68); transition: opacity 0.25s; }
/* details: closed by default; they open below the line (narrow screens, touch) or replace it (wide screens, see below) */
.hw-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.4s var(--ease), opacity 0.3s ease; }
.hw-more-in { display: grid; gap: 7px; min-height: 0; overflow: hidden; font-size: 15px; line-height: 1.45; color: rgba(var(--fg-rgb), 0.82); }
.hw-more-in > :first-child { margin-top: 10px; }
.hw-card.is-on .hw-more { grid-template-rows: 1fr; opacity: 1; }
.hw-q { font-style: italic; }
.hw-lead { font-weight: 600; color: var(--fg); }
.hw-li { position: relative; padding-left: 22px; }
.hw-li::before { content: "+"; position: absolute; left: 0; top: -1px; font-weight: 700; color: var(--accent); } /* the same "+" as in the skill details */
.hw-li b { font-size: inherit; font-weight: 700; color: var(--fg); }
html:not(.js) .hw-more { grid-template-rows: 1fr; opacity: 1; }
/* wide screens with a mouse: the card under the pointer grows, the others shrink to icon and title; the block keeps its
   height (js/site.js locks it), so nothing around it moves; the details take the place of the short line */
@media (min-width: 1001px) and (hover: hover) {
  .hw-cards { grid-template-rows: 1fr 1fr; transition: grid-template-columns 0.5s var(--ease), grid-template-rows 0.5s var(--ease); }
  .hw-cards[data-on="0"] { grid-template-columns: 2fr 1fr; grid-template-rows: 2fr 1fr; }
  .hw-cards[data-on="1"] { grid-template-columns: 1fr 2fr; grid-template-rows: 2fr 1fr; }
  .hw-cards[data-on="2"] { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 2fr; }
  .hw-cards[data-on="3"] { grid-template-columns: 1fr 2fr; grid-template-rows: 1fr 2fr; }
  .hw-more { position: absolute; left: 0; right: 0; top: 0; grid-template-rows: 1fr; transition: opacity 0.3s ease; }
  .hw-more-in > :first-child { margin-top: 0; }
  .hw-card.is-on .hw-v, .hw-cards.has-on .hw-card:not(.is-on) .hw-v { opacity: 0; }
  .hw-card.is-on .hw-more { transition-delay: 0.18s; }
}
.hw-cards.is-measuring, .hw-cards.is-measuring * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hw-cards, .hw-card, .hw-plus, .hw-v, .hw-more { transition: none !important; }
}

/* dashed connectors: knowledge -> agent -> result */
.hw-flow span { display: block; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(var(--lav-rgb), 0.55) 0 10px, transparent 10px 18px); }
.hw-agent { position: relative; display: grid; justify-items: center; padding-inline: 8px; }
.hw-core {
  width: clamp(140px, 12vw, 176px); height: clamp(140px, 12vw, 176px); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(14, 10, 28, 0.25), rgba(14, 10, 28, 0.6)); border: 1px solid rgba(var(--lav-rgb), 0.25);
  box-shadow: 0 0 0 10px rgba(118, 86, 168, 0.07), 0 0 90px rgba(118, 86, 168, 0.45);
}
/* light theme: a pearl lit from the top left instead of the dark glass sphere, which turned grey on a light page */
:root[data-theme="light"] .hw-core {
  background: radial-gradient(circle at 36% 28%, #ffffff 0%, #f3effc 42%, #dcd3f1 100%);
  border-color: rgba(118, 86, 168, 0.3);
  box-shadow: 0 0 0 10px rgba(118, 86, 168, 0.06), 0 22px 54px rgba(40, 26, 80, 0.16);
}
/* every glowing logo gets room for its glow inside its own box (padding, cancelled by a negative margin): Chrome sometimes
   cut a glow that reached outside the box, leaving a hard edge above the logo (Daniel 2026-10-16) */
.hw-hex { width: calc(66% + 56px); height: calc(66% + 56px); padding: 28px; margin: -28px; filter: drop-shadow(0 0 18px rgba(var(--lav-rgb), 0.35)); }
.hw-model {
  position: absolute; left: 50%; bottom: calc(100% + 44px); transform: translateX(-50%); display: inline-grid; place-items: center; white-space: nowrap;
  padding: 7px 16px; border-radius: 99px; border: 1px solid rgba(var(--lav-rgb), 0.4); background: rgba(var(--panel-rgb), 0.5);
  font-size: 12px; font-weight: 700; color: rgba(var(--fg-rgb), 0.85);
}
html:not(.js) .hw-mcap .mc-all { opacity: 1; }
/* the pill first shows the general "AI model", then the models COGNAiO works with take turns in it (one grid cell, so the
   pill keeps the width of the longest name); the caption above names the group: frontier (cloud), open (on-premises), decision (cloud / on-premises) */
.hw-mgen, .hw-mlist, .hw-mlist .mi { grid-area: 1 / 1; }
.hw-mgen { display: inline-flex; align-items: center; gap: 9px; letter-spacing: 0.16em; text-transform: uppercase; }
.hw-mgen i { width: 6px; height: 6px; border-radius: 50%; background: var(--fg); }
.hw-mlist { display: grid; place-items: center; }
.hw-mlist .mi { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0; color: var(--fg); opacity: 0; }
.hw-mlist .lg { width: 16px; height: 16px; flex: none; fill: currentColor; }
.hw-mlist .lg-gen { width: 16px; height: 16px; flex: none; } /* Jev and Laya: a neutral model symbol until their logos arrive */
.hw-mcap { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); display: grid; place-items: center; }
.hw-mcap .mc { grid-area: 1 / 1; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); opacity: 0; }
.hw-drop { position: absolute; left: 50%; bottom: 100%; width: 2px; height: 44px; margin-left: -1px; background: rgba(var(--lav-rgb), 0.4); }
.hw-name { position: absolute; top: calc(100% + 22px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 18px; font-weight: 700; }

.hw-result {
  padding: clamp(20px, 1.7vw, 24px); border-radius: 20px; background: var(--card); color: var(--ink);
  box-shadow: 0 30px 70px rgba(var(--shadow-rgb), calc(0.5 * var(--shadow-k)));
}
.hw-rhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.hw-result .hw-k { color: #6a4c9c; white-space: nowrap; }
.hw-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 99px; background: rgba(141, 232, 157, 0.35); color: var(--success-on-light); font-size: 13px; font-weight: 700; white-space: nowrap; }
.hw-badge svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--success-on-light); color: #fff; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.hw-find { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: rgba(118, 86, 168, 0.12); }
.hw-find p { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #6a4c9c; }
.hw-find b { display: block; margin-top: 6px; font-size: clamp(15.5px, 1.25vw, 18px); font-weight: 700; line-height: 1.35; }
.hw-dl > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(70, 63, 106, 0.14); font-size: 14px; }
.hw-dl dt { color: var(--ink-soft); white-space: nowrap; }
.hw-dl dd { font-weight: 700; text-align: right; }
.hw-conf { display: block; width: 96px; height: 7px; border-radius: 99px; background: rgba(118, 86, 168, 0.2); overflow: hidden; }
.hw-conf span { display: block; width: 84%; height: 100%; border-radius: 99px; background: var(--violet); }
.hw-human { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.hw-human svg.i { width: 17px; height: 17px; color: #6a4c9c; }
#how .close-row { margin-top: 0; }

/* build-up once it scrolls in (Daniel's choice B, 2026-10-13): the AI model drops into a grey, general agent; each
   knowledge card lights up and sends its knowledge along the connector, the agent gains colour with every piece and only
   then is the "Specialized AI agent"; it works (a light runs once around it), the result builds up line by line.
   The parts start with .go (js/site.js): on desktop all at once, on phones each part when it scrolls in.
   --d is the start of a part; every delay is relative to it. Without JS or with reduced motion everything simply stands. */
.js .hw .hw-card, .js .hw .hw-model, .js .hw .hw-core, .js .hw .hw-name,
.js .hw .hw-result, .js .hw .hw-rhead .hw-k, .js .hw .hw-badge, .js .hw .hw-find, .js .hw .hw-dl > div, .js .hw .hw-human { opacity: 0; }
.js .hw .hw-flow span { transform-origin: 0 50%; scale: 0 1; }
.js .hw .hw-drop { transform-origin: 50% 0; scale: 1 0; }
.js .hw .hw-conf span { width: 0; }
/* knowledge light that travels along a connector */
.hw .hw-flow span { position: relative; }
.hw .hw-flow span::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--core); box-shadow: 0 0 10px 3px rgba(var(--lav-rgb), 0.85); opacity: 0;
}
/* the agent at work: a light runs once around the core */
.hw .hw-core { position: relative; }
.hw .hw-core::before {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 55%, rgba(var(--lav-rgb), 0.95) 88%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}

.hw .hw-flow.in, .hw .hw-agent { --d: 0s; }
.hw .hw-know { --d: 0.6s; }
.hw .hw-flow.out, .hw .hw-result { --d: 3.4s; }
/* the general model drops in, grey */
.js .hw .hw-agent.go .hw-model { animation: hwDropIn 0.45s var(--ease) var(--d) both; }
.js .hw .hw-agent.go .hw-drop { animation: hwDrawY 0.3s ease-in calc(var(--d) + 0.35s) both; }
.js .hw .hw-agent.go .hw-core { animation: hwPop 0.6s var(--ease) calc(var(--d) + 0.55s) both, hwCore 0.4s ease-in-out calc(var(--d) + 1.3s) 4 both; }
/* four pieces of knowledge arrive (at 12.5 / 37.5 / 62.5 / 87.5 % of hwCharge), then it is a specialist and works */
.js .hw .hw-agent.go .hw-hex { animation: hwCharge 1.6s linear calc(var(--d) + 1.15s) both; }
.js .hw .hw-agent.go .hw-core::before { animation: hwSpin 1.3s linear calc(var(--d) + 2.7s) both; }
.js .hw .hw-agent.go .hw-name { animation: hwUp 0.5s var(--ease) calc(var(--d) + 2.65s) both; }
/* then the models take turns in the pill: frontier (3), open / on-premises (4), decision (2); 2 s each, 18 s per round */
.js .hw .hw-agent.go .hw-mgen { animation: hwFadeOut 0.35s ease calc(var(--d) + 4.1s) forwards; }
.js .hw .hw-agent.go .mi { animation: hwMi 18s linear infinite both; }
.js .hw .hw-agent.go .mi:nth-child(1) { animation-delay: calc(var(--d) + 4.3s); }
.js .hw .hw-agent.go .mi:nth-child(2) { animation-delay: calc(var(--d) + 6.3s); }
.js .hw .hw-agent.go .mi:nth-child(3) { animation-delay: calc(var(--d) + 8.3s); }
.js .hw .hw-agent.go .mi:nth-child(4) { animation-delay: calc(var(--d) + 10.3s); }
.js .hw .hw-agent.go .mi:nth-child(5) { animation-delay: calc(var(--d) + 12.3s); }
.js .hw .hw-agent.go .mi:nth-child(6) { animation-delay: calc(var(--d) + 14.3s); }
.js .hw .hw-agent.go .mi:nth-child(7) { animation-delay: calc(var(--d) + 16.3s); }
.js .hw .hw-agent.go .mi:nth-child(8) { animation-delay: calc(var(--d) + 18.3s); }
.js .hw .hw-agent.go .mi:nth-child(9) { animation-delay: calc(var(--d) + 20.3s); }
.js .hw .hw-agent.go .mc0 { animation: hwMc0 18s linear calc(var(--d) + 4.3s) infinite both; }
.js .hw .hw-agent.go .mc1 { animation: hwMc1 18s linear calc(var(--d) + 4.3s) infinite both; }
.js .hw .hw-agent.go .mc2 { animation: hwMc2 18s linear calc(var(--d) + 4.3s) infinite both; }
.js .hw .hw-agent.go .mc3 { animation: hwMc3 18s linear calc(var(--d) + 4.3s) infinite both; }
.js .hw .hw-flow.in.go span { animation: hwDrawX 0.4s ease-out calc(var(--d) + 0.8s) both; }
.js .hw .hw-flow.in.go span::after { animation: hwDot 0.4s ease-in-out calc(var(--d) + 0.95s) 4 both; }
.js .hw .hw-know.go .c0 { animation: hwUp 0.45s var(--ease) var(--d) both, hwCard 0.8s ease-in-out calc(var(--d) + 0.15s) both; }
.js .hw .hw-know.go .c1 { animation: hwUp 0.45s var(--ease) calc(var(--d) + 0.4s) both, hwCard 0.8s ease-in-out calc(var(--d) + 0.55s) both; }
.js .hw .hw-know.go .c2 { animation: hwUp 0.45s var(--ease) calc(var(--d) + 0.8s) both, hwCard 0.8s ease-in-out calc(var(--d) + 0.95s) both; }
.js .hw .hw-know.go .c3 { animation: hwUp 0.45s var(--ease) calc(var(--d) + 1.2s) both, hwCard 0.8s ease-in-out calc(var(--d) + 1.35s) both; }
/* the result builds up */
.js .hw .hw-flow.out.go span { animation: hwDrawX 0.4s ease-out var(--d) both; }
.js .hw .hw-flow.out.go span::after { animation: hwDot 0.6s ease-in-out calc(var(--d) + 0.4s) both; }
.js .hw .hw-result.go { animation: hwSlide 0.5s var(--ease) calc(var(--d) + 0.7s) both; }
.js .hw .hw-result.go .hw-rhead .hw-k { animation: hwFade 0.4s ease calc(var(--d) + 0.8s) both; }
.js .hw .hw-result.go .hw-find { animation: hwUp 0.45s var(--ease) calc(var(--d) + 0.85s) both; }
.js .hw .hw-result.go .hw-dl > div:nth-child(1) { animation: hwUp 0.4s var(--ease) calc(var(--d) + 1s) both; }
.js .hw .hw-result.go .hw-dl > div:nth-child(2) { animation: hwUp 0.4s var(--ease) calc(var(--d) + 1.12s) both; }
.js .hw .hw-result.go .hw-dl > div:nth-child(3) { animation: hwUp 0.4s var(--ease) calc(var(--d) + 1.24s) both; }
.js .hw .hw-result.go .hw-conf span { animation: hwBar 0.8s var(--ease) calc(var(--d) + 1.2s) both; }
.js .hw .hw-result.go .hw-badge { animation: hwPop 0.5s var(--ease) calc(var(--d) + 1.7s) both; }
.js .hw .hw-result.go .hw-human { animation: hwUp 0.45s var(--ease) calc(var(--d) + 1.85s) both; }

@keyframes hwUp { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes hwFadeOut { from { opacity: 1; } to { opacity: 0; } }
/* one model's turn: 2 s of a 16 s round (12.5 %), sliding in from below and out to the top */
@keyframes hwMi { 0% { opacity: 0; translate: 0 0.7em; } 1.42% { opacity: 1; translate: 0 0; } 9.78% { opacity: 1; translate: 0 0; } 11.11%, 100% { opacity: 0; translate: 0 -0.7em; } }
@keyframes hwMc0 { 0% { opacity: 0; } 1.42%, 32% { opacity: 1; } 33.33%, 100% { opacity: 0; } }
@keyframes hwMc1 { 0%, 33.33% { opacity: 0; } 34.75%, 76.44% { opacity: 1; } 77.78%, 100% { opacity: 0; } }
@keyframes hwMc2 { 0%, 77.78% { opacity: 0; } 79.2%, 87.56% { opacity: 1; } 88.89%, 100% { opacity: 0; } }
@keyframes hwMc3 { 0%, 88.89% { opacity: 0; } 90.3%, 98.67% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hwFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hwPop { 0% { opacity: 0; scale: 0.6; } 70% { opacity: 1; scale: 1.06; } 100% { opacity: 1; scale: 1; } }
@keyframes hwDropIn { from { opacity: 0; translate: 0 -18px; } to { opacity: 1; translate: 0 0; } }
@keyframes hwSlide { from { opacity: 0; translate: 28px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes hwDrawX { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes hwDrawY { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes hwDot { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes hwDotV { 0% { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes hwSpin { 0% { opacity: 0; rotate: 0deg; } 15%, 80% { opacity: 1; } 100% { opacity: 0; rotate: 540deg; } }
@keyframes hwBar { from { width: 0; } to { width: 84%; } }
@keyframes hwCharge {
  0%, 8% { filter: grayscale(1) brightness(0.55); opacity: 0.55; }
  12.5%, 33% { filter: grayscale(0.75) brightness(0.68); opacity: 0.66; }
  37.5%, 58% { filter: grayscale(0.5) brightness(0.8); opacity: 0.77; }
  62.5%, 83% { filter: grayscale(0.25) brightness(0.9); opacity: 0.88; }
  87.5%, 100% { filter: grayscale(0) brightness(1) drop-shadow(0 0 18px rgba(var(--lav-rgb), 0.35)); opacity: 1; }
}
@keyframes hwCard { 0%, 100% { border-color: rgba(var(--lav-rgb), 0.22); box-shadow: none; } 35%, 60% { border-color: rgba(var(--lav-rgb), 0.8); box-shadow: 0 0 0 1px rgba(var(--lav-rgb), 0.3), 0 0 30px rgba(118, 86, 168, 0.45); } }
@keyframes hwCore { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(118, 86, 168, 0.07), 0 0 90px rgba(118, 86, 168, 0.45); } 45% { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(118, 86, 168, 0.14), 0 0 130px rgba(var(--lav-rgb), 0.8); } }

/* phones: one column, every part starts when it scrolls in; the connectors run downwards */
@media (max-width: 1000px) {
  .hw .hw-know, .hw .hw-flow.in, .hw .hw-flow.out, .hw .hw-agent, .hw .hw-result { --d: 0.1s; }
  .js .hw .hw-flow span { transform-origin: 50% 0; scale: 1 0; }
  .hw .hw-flow span::after { left: 50%; top: 0; }
  .js .hw .hw-flow.in.go span, .js .hw .hw-flow.out.go span { animation-name: hwDrawY; }
  .js .hw .hw-flow.in.go span::after, .js .hw .hw-flow.out.go span::after { animation-name: hwDotV; }
  .js .hw .hw-result.go { animation-name: hwUp; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hw .hw-card, .js .hw .hw-model, .js .hw .hw-drop, .js .hw .hw-core, .js .hw .hw-hex,
  .js .hw .hw-name, .js .hw .hw-result, .js .hw .hw-rhead .hw-k, .js .hw .hw-badge, .js .hw .hw-find,
  .js .hw .hw-dl > div, .js .hw .hw-human, .js .hw .hw-flow span {
    animation: none !important; opacity: 1 !important; scale: none !important; translate: none !important;
  }
  .js .hw .hw-flow span::after, .js .hw .hw-core::before { animation: none !important; opacity: 0 !important; }
  .js .hw .hw-conf span { width: 84%; animation: none !important; }
  .js .hw .hw-mgen { animation: none !important; opacity: 1 !important; }
  .js .hw .mi, .js .hw .hw-mcap .mc { animation: none !important; opacity: 0 !important; }
  .js .hw .hw-mcap .mc-all { opacity: 1 !important; }
}
/* below 1400 px the result card needs its width back (badge and evidence would wrap) */
@media (max-width: 1399px) {
  .hw { grid-template-columns: minmax(0, 1fr) minmax(28px, 0.14fr) auto minmax(28px, 0.1fr) minmax(0, 0.9fr); }
}
@media (max-width: 1000px) {
  .hw { grid-template-columns: minmax(0, 1fr); margin: var(--head-gap) 0 var(--block-gap); }
  .hw-flow { justify-self: center; }
  .hw-flow span { width: 2px; height: 44px; margin: 14px 0; background: repeating-linear-gradient(180deg, rgba(var(--lav-rgb), 0.55) 0 8px, transparent 8px 14px); }
  .hw-agent { padding: 0; }
  .hw-model, .hw-drop, .hw-name { position: static; transform: none; }
  .hw-model { position: relative; left: auto; bottom: auto; margin-top: 26px; }
  .hw-drop { height: 26px; margin: 0; }
  .hw-name { margin-top: 16px; }
  .hw-core { width: 132px; height: 132px; }
}
@media (max-width: 560px) {
  /* phones: one column, icon beside the text so the four cards stay short */
  .hw-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hw-cbtn { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-content: start; column-gap: 14px; row-gap: 2px; padding: 14px 40px 14px 16px; }
  .hw-ic { grid-row: span 2; margin-bottom: 0; }
  .hw-plus { top: 16px; right: 16px; }
  .hw-rhead { flex-direction: column; align-items: flex-start; }
}

/* ---------- where it works: industries; a tile opens its examples right below its row ---------- */
/* dense packing: the open panel spans the full width and the tiles after it fill up the row above */
.industries { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-flow: row dense; gap: clamp(12px, 1.4vw, 18px); margin-top: var(--head-gap); }
.ind {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 18px 18px; border-radius: 18px; min-height: 132px;
  background: var(--panel); border: 1px solid var(--line); font: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em;
  color: var(--fg); text-align: left; cursor: pointer; hyphens: auto; -webkit-hyphens: auto;
  transition: border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s, background 0.25s;
}
/* German and Italian: break only where the text says so (­), so "Business Process Outsourcing" is not split as "Pro-cess" */
:lang(de) .ind, :lang(it) .ind { hyphens: manual; -webkit-hyphens: manual; }
.ind:hover { border-color: rgba(var(--lav-rgb), 0.6); transform: translateY(-2px); }
.ind[aria-expanded="true"] { border-color: var(--accent); background: rgba(118, 86, 168, 0.22); box-shadow: 0 0 0 1px rgba(var(--lav-rgb), 0.35); }
.ind-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(118, 86, 168, 0.2); color: var(--accent); }
.ind-ic svg.i { width: 22px; height: 22px; }
.ind-more { position: absolute; top: 18px; right: 16px; width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; transition: transform 0.3s var(--ease); }
.ind[aria-expanded="true"] .ind-more { transform: rotate(45deg); }
.js .ind { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), border-color 0.25s, box-shadow 0.25s, background 0.25s; }
.js .industries.is-in .ind { opacity: 1; transform: none; }
.ind:nth-of-type(2) { transition-delay: 0.06s; } .ind:nth-of-type(3) { transition-delay: 0.12s; } .ind:nth-of-type(4) { transition-delay: 0.18s; }
.ind:nth-of-type(5) { transition-delay: 0.24s; } .ind:nth-of-type(6) { transition-delay: 0.3s; } .ind:nth-of-type(7) { transition-delay: 0.36s; }
.industries.is-in .ind:hover, .industries.is-in .ind[aria-expanded="true"] { transition-delay: 0s; }
.js .industries.is-in .ind:hover { transform: translateY(-2px); }

/* seven in a row on wide screens, four and three on tablets, one column on phones (below) */
@media (max-width: 1100px) { .industries { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ind-panel {
  position: relative; grid-column: 1 / -1; padding: clamp(20px, 2.4vw, 30px); border-radius: 18px;
  background: var(--panel); border: 1px solid rgba(var(--lav-rgb), 0.45);
}
/* a small notch points at the open tile (site.js sets --nx) */
.ind-panel::before {
  content: ""; position: absolute; top: -8px; left: var(--nx, 40px); width: 14px; height: 14px; margin-left: -7px;
  background: inherit; border-left: 1px solid rgba(var(--lav-rgb), 0.45); border-top: 1px solid rgba(var(--lav-rgb), 0.45); transform: rotate(45deg);
}
.js .ind-panel { display: none; }
.js .ind-panel.is-open { display: block; animation: indOpen 0.4s var(--ease) both; }
@keyframes indOpen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.ind-panel-head { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.ind-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px clamp(24px, 3vw, 48px); margin-top: 14px; }
.ind-cases li { padding-left: 18px; border-left: 2px solid rgba(var(--lav-rgb), 0.45); }
.ind-cases h3 { font-size: 17px; font-weight: 700; line-height: 1.3; }
.ind-cases p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: rgba(var(--fg-rgb), 0.72); }
@media (prefers-reduced-motion: reduce) { .js .ind-panel.is-open { animation: none; } .ind-more { transition: none; } }

/* ---------- integration ---------- */
.patterns { display: grid; gap: 18px; margin-top: 32px; }
.pattern { display: flex; gap: 16px; align-items: flex-start; }
.pattern svg.i { width: 24px; height: 24px; margin-top: 2px; color: var(--accent); }
.pattern h3 { font-size: 17px; font-weight: 700; }
.pattern p { margin-top: 4px; font-size: 15px; color: rgba(var(--fg-rgb), 0.68); }

.intvis { padding: clamp(20px, 2.4vw, 32px); border-radius: 22px; background: rgba(var(--panel-rgb), 0.32); border: 1px solid var(--line); }
.intvis-label { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.intvis-sys, .intvis-api { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.intvis-sys li {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 12px; text-align: center;
  background: rgba(var(--panel-rgb), 0.95); border: 1.5px solid rgba(var(--lav-rgb), 0.35); font-size: 13px; font-weight: 600; line-height: 1.2;
}
.intvis-sys svg.i { color: var(--accent); }
.intvis-api li { position: relative; height: 70px; display: grid; place-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--accent); }
.intvis-api li::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(var(--lav-rgb), 0.35); }
.intvis-api li::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: var(--core); box-shadow: 0 0 10px 3px rgba(var(--lav-rgb), 0.8); opacity: 0; animation: apiPulse 3.2s infinite;
}
.intvis-api li:nth-child(2)::after { animation-delay: 0.6s; }
.intvis-api li:nth-child(3)::after { animation-delay: 1.3s; }
.intvis-api li:nth-child(4)::after { animation-delay: 1.9s; }
.intvis-api li:nth-child(5)::after { animation-delay: 2.5s; }
@keyframes apiPulse { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 45% { top: calc(100% - 6px); opacity: 1; } 55%, 100% { top: calc(100% - 6px); opacity: 0; } }
.intvis-api li span { position: relative; z-index: 1; padding: 2px 6px; border-radius: 6px; background: var(--chip-solid); border: 1px solid rgba(var(--lav-rgb), 0.3); }
.intvis-layer {
  position: relative; padding: 18px 20px 16px; border-radius: 16px; border: 1.5px solid rgba(var(--lav-rgb), 0.45);
  background: linear-gradient(180deg, rgba(118, 86, 168, 0.3), rgba(var(--panel-rgb), 0.55));
}
.intvis-layer > img { height: 15px; width: auto; opacity: 0.9; }
.intvis-track { position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-inline: 4px; }
.intvis-track svg { position: relative; width: 36px; height: 36px; }
.intvis-track .line { position: absolute; left: 20px; right: 20px; top: 50%; height: 2px; background: rgba(var(--lav-rgb), 0.35); }
.intvis-track .spark {
  position: absolute; top: 50%; left: 20px; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; z-index: 1;
  background: var(--core); box-shadow: 0 0 14px 4px rgba(var(--lav-rgb), 0.85); animation: spark 4s var(--ease) infinite;
}
@keyframes spark { 0% { left: 20px; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 20px); opacity: 0; } }
.intvis-cap { margin-top: 12px; text-align: right; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }

/* ---------- hero: trust line ---------- */
/* two signals that wrap as whole units (never mid-phrase); a short form on phones instead of hiding them */
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 24px; margin-top: clamp(12px, 2vh, 20px); font-size: 14px; font-weight: 600; }
.trust a { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; white-space: nowrap; color: rgba(var(--fg-rgb), 0.72); text-decoration: none; transition: color 0.2s; }
.trust a:hover { color: var(--fg); }
.trust svg.i { width: 18px; height: 18px; color: var(--accent); }
.t-short { display: none; }
@media (max-width: 899px) {
  .trust { font-size: 13px; gap: 0 18px; }
  .trust a { min-height: 44px; }
  .t-long { display: none; }
  .t-short { display: inline; }
}

/* ---------- sovereignty: map from the film (scene 8) ---------- */
.sov { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sov h2 .ln { display: block; }
/* regions (Daniel 2026-10-30): js/boot.js sets html[data-region] before the first paint; .r-eu is Europe, .r-az the
   Middle East and the Americas (the customer's own Azure subscription). Without JavaScript the page shows Europe. */
:root:is([data-region="me"], [data-region="am"]) .r-eu, :root:not([data-region="me"]):not([data-region="am"]) .r-az { display: none !important; }
/* the tabs, a larger sibling of the SaaS card's Azure / Sovereign switch; the chosen one follows html[data-region],
   so it is right from the first paint */
.reg-seg { display: inline-grid; grid-auto-flow: column; gap: 2px; margin-top: clamp(20px, 2.2vw, 28px); padding: 4px; border-radius: 999px; background: rgba(var(--fg-rgb), 0.06); box-shadow: inset 0 0 0 1px var(--line); }
:root:not(.js) .reg-seg { display: none; }
.reg-seg button {
  min-height: 40px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 14px; font-weight: 700; color: rgba(var(--fg-rgb), 0.62); background: none; transition: background 0.25s, color 0.25s;
}
.reg-seg button:hover { color: var(--fg); }
:root:not([data-region="me"]):not([data-region="am"]) .reg-seg [data-region="eu"], :root[data-region="me"] .reg-seg [data-region="me"], :root[data-region="am"] .reg-seg [data-region="am"] { color: var(--fg); background: rgba(var(--fg-rgb), 0.13); }
.reg-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reg-seg + .sec-lede { margin-top: clamp(16px, 1.8vw, 22px); }
@media (max-width: 420px) { .reg-seg button { min-height: 44px; padding: 0 13px; font-size: 13px; } }
/* switching changes text lengths in this section: the browser must not hold the view on a card below and jump */
#sovereignty { overflow-anchor: none; }
.sov-points { margin-top: clamp(28px, 3vw, 40px); }
.sov-points li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--line); }
.sp-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(118, 86, 168, 0.18); color: var(--accent); }
.sp-ic svg.i { width: 20px; height: 20px; }
.sov-points h3 { font-size: 17px; font-weight: 700; }
.sov-points p { margin-top: 3px; font-size: 15px; color: rgba(var(--fg-rgb), 0.68); }
.sov-map { position: relative; }
.sov-map svg { display: block; width: 100%; height: auto; overflow: visible; }
/* the globe (js/region.js): it turns to the region chosen in the tabs, and that region lights up; Switzerland and
   Germany, the sovereign cloud, light up brighter with Europe */
.rm-stage { position: relative; } /* the labels are placed in % of this box, so it holds only the globe */
.rm svg { opacity: 0; transition: opacity 0.8s var(--ease); }
.rm.is-drawn svg { opacity: 1; }
.rg-sphere { fill: rgba(var(--lav-rgb), 0.035); }
.rg-rim { fill: none; stroke: rgba(var(--lav-rgb), 0.2); stroke-width: 1.2; } /* the edge of the disc: the globe's own edge for North America */
.rg-shade { pointer-events: none; } /* the disc darkens a little towards its edge, so it reads as a sphere */
.rs-in { stop-color: rgb(var(--shadow-rgb)); stop-opacity: 0; }
.rs-out { stop-color: rgb(var(--shadow-rgb)); stop-opacity: 0.3; }
:root[data-theme="light"] .rs-out { stop-opacity: 0.07; }
.rg-grat { fill: none; stroke: rgba(var(--lav-rgb), 0.07); stroke-width: 1; }
.rg-land, .rg, .rg-dc { fill: var(--map-base); stroke: rgba(var(--lav-rgb), 0.2); stroke-width: 1.1; stroke-linejoin: round; }
.rg, .rg-dc { transition: fill 0.9s var(--ease), stroke 0.9s; }
.rm.is-in[data-view="eu"] :is(.rg-eu, .rg-dc), .rm.is-in[data-view="me"] .rg-me, .rm.is-in[data-view="am"] .rg-am { fill: var(--map-eu); stroke: rgba(var(--lav-rgb), 0.5); }
.rm.is-in[data-view="eu"] .rg-dc { fill: var(--map-dc); stroke: var(--map-ch); stroke-width: 2; transition-delay: 0.4s; }
.map-ring { fill: none; stroke: var(--map-ch); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.rm:not([data-view="eu"]) .map-ring, .rm.is-moving .map-ring { visibility: hidden; } /* only at rest, only in Europe */
.sov-map.is-in .map-ring { animation: chPulse 3.2s ease-out infinite 1.6s; }
.sov-map.is-in .map-ring.r2 { animation-delay: 3.2s; }
.sov-map.is-in .map-ring.r3 { animation-delay: 2.4s; }
.sov-map.is-in .map-ring.r4 { animation-delay: 4s; }
@keyframes chPulse { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(4.2); } }
.rm-label { position: absolute; transform: translate(-50%, -50%); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; pointer-events: none; color: var(--fg); text-shadow: 0 1px 12px rgba(var(--shadow-rgb), calc(0.9 * var(--shadow-k))); opacity: 0; transition: opacity 0.3s; }
.rm-label.rm-small { font-size: 10.5px; letter-spacing: 0.14em; }
.rm.is-in.is-drawn:not(.is-moving)[data-view="eu"] .rl-eu, .rm.is-in.is-drawn:not(.is-moving)[data-view="me"] .rl-me, .rm.is-in.is-drawn:not(.is-moving)[data-view="am"] .rl-am { opacity: 1; transition: opacity 0.5s 0.15s; }
/* Europe: what pulses (the sovereign cloud) and what is tinted (Azure, Switzerland or the EU) */
.rm-legend { display: grid; justify-content: center; justify-items: start; gap: 9px; margin-top: -1%; font-size: 13px; font-weight: 600; line-height: 1.35; color: rgba(var(--fg-rgb), 0.78); }
.rm-legend span { display: inline-flex; align-items: center; gap: 9px; }
.rm-legend i { flex: none; display: inline-block; }
.lg-az { width: 16px; height: 11px; border-radius: 3px; background: var(--map-eu); }
.lg-sov { position: relative; width: 10px; height: 10px; margin: 0 3px; border-radius: 50%; background: var(--map-dc); box-shadow: 0 0 0 2.5px var(--stage), 0 0 0 4px var(--map-ch); }
/* the legend's dot pulses like the rings on the map, so it is clear what it stands for */
.lg-sov::before, .lg-sov::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--map-ch); opacity: 0; }
.rm.is-in .lg-sov::before { animation: lgPulse 3.2s ease-out infinite 1.6s; }
.rm.is-in .lg-sov::after { animation: lgPulse 3.2s ease-out infinite 3.2s; }
@keyframes lgPulse { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
.js .rm-legend { opacity: 0; transition: opacity 0.6s 1.2s; }
.js .rm.is-in .rm-legend { opacity: 1; }
.map-chip { position: absolute; right: 2%; bottom: 10%; display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 11px; border-radius: 12px; background: rgba(var(--panel-rgb), 0.95); border: 1.5px dashed rgba(var(--lav-rgb), 0.5); font-size: 13px; font-weight: 600; color: var(--fg); white-space: nowrap; }
.map-chip svg.i, .map-chip svg.lg { width: 16px; height: 16px; color: var(--accent); }
.map-chip svg.lg { fill: currentColor; }
.rm .map-chip { position: relative; right: auto; bottom: auto; display: flex; width: max-content; margin: -1% auto 0; } /* Middle East and North America: under the globe, where Europe has its legend */
.js .sov-map .map-chip { opacity: 0; transition: opacity 0.6s; }
.js .sov-map.is-in .map-chip { opacity: 1; transition-delay: 2s; }
/* deployment options */
.deploy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin-top: var(--block-gap); }
.dep { position: relative; display: flex; flex-direction: column; padding: clamp(20px, 2vw, 26px); border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.dep h3 { display: flex; align-items: center; min-height: 30px; padding-left: 40px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
/* the icon sits next to the title, not as a tile above it (critique step 5) */
.dep .sp-ic { position: absolute; left: clamp(20px, 2vw, 26px); top: clamp(20px, 2vw, 26px); width: 30px; height: 30px; background: none; }
.dep .sp-ic svg.i { width: 24px; height: 24px; }
.dep p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: rgba(var(--fg-rgb), 0.68); }
.dep-main { border-color: rgba(var(--lav-rgb), 0.55); box-shadow: 0 0 0 1px rgba(var(--lav-rgb), 0.2); }
/* SaaS: a quiet switch Azure / Sovereign (js/site.js); both texts share one cell, so the card keeps its height */
.dep-seg { display: inline-grid; grid-auto-flow: column; gap: 2px; margin-top: 14px; padding: 3px; border-radius: 999px; background: rgba(var(--fg-rgb), 0.06); align-self: flex-start; }
.dep-seg button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: rgba(var(--fg-rgb), 0.6); background: none; transition: background 0.25s, color 0.25s;
}
.dep-seg button:hover { color: var(--fg); }
.dep-seg button[aria-selected="true"] { color: var(--fg); background: rgba(var(--fg-rgb), 0.12); }
.dep-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) { .dep-seg button { min-height: 44px; padding: 0 14px; } } /* big enough to tap */
.dep-seg svg { width: 14px; height: 14px; }
.dep .lg { fill: currentColor; }
.dep-panes { display: grid; }
.dep-panes > * { grid-area: 1 / 1; transition: opacity 0.3s; }
.dep-panes > .is-off { opacity: 0; visibility: hidden; }
.dep > .dep-panes { margin-top: 12px; }
.dep .dep-panes p { margin-top: 0; }
.dep .dep-promise { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 15px; line-height: 1.5; color: rgba(var(--fg-rgb), 0.82); }
.dep-promise svg.i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--success-fg); }
:root[data-theme="light"] .dep-promise svg.i { width: 20px; height: 20px; margin-top: 0; padding: 3px; border-radius: 50%; background: #8de89d; color: #12391d; } /* a mint tick, like in the hero */
/* every card that has one ends in the same quiet footer line, aligned across the row */
.dep .dep-foot {
  display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 6px 14px; min-height: 62px; margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--muted);
}
.dep:has(.dep-foot) > :nth-last-child(2) { margin-bottom: 18px; }
.dep-foot svg.i { width: 15px; height: 15px; color: var(--accent); }
.dep-foot .dep-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(var(--lav-rgb), 0.5); text-underline-offset: 3px; transition: color 0.2s, text-decoration-color 0.2s; } /* to the COGNAiO listing (Daniel 2026-10-22) */
.dep-foot .dep-link:hover { color: var(--fg); text-decoration-color: var(--accent); }
.dep .dep-foot-line { flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
.dep-foot-line svg.i { flex: none; margin-top: 1px; }
.dep-logo { display: inline-flex; align-items: center; gap: 6px; color: rgba(var(--fg-rgb), 0.8); }
.dep-logo svg { width: 16px; height: 16px; }
.dep-tags { margin-top: auto !important; padding-top: 14px; }
.dep-tags span { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(118, 86, 168, 0.18); color: var(--accent); font-size: 12px; font-weight: 700; }
.deploy .reveal:nth-child(2) { transition-delay: 0.08s; } .deploy .reveal:nth-child(3) { transition-delay: 0.16s; } .deploy .reveal:nth-child(4) { transition-delay: 0.24s; }
@media (max-width: 1100px) { .deploy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .deploy { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .sov { grid-template-columns: minmax(0, 1fr); } .sov-map { order: -1; max-width: 560px; margin: 0 auto; width: 100%; } }
@media (max-width: 560px) {
  .rm-label { font-size: 10px; } .rm-label.rm-small { font-size: 9px; }
  .map-chip, .rm .map-chip { position: relative; right: auto; bottom: auto; margin: 8px auto 0; display: flex; width: max-content; font-size: 12px; padding: 7px 12px 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sov-map.is-in .map-ring, .rm.is-in .lg-sov::before, .rm.is-in .lg-sov::after { animation: none; }
  .rm svg, .rg, .rg-dc, .rm-label, .sov-map .map-chip { transition: none !important; }
}

/* ---------- agent engineering ---------- */
.loopvis { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 40px); }
.loop-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 480px; margin: 0 auto; }
.loop-in li {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 12px; white-space: nowrap;
  background: rgba(var(--panel-rgb), 0.95); border: 1.5px solid rgba(var(--lav-rgb), 0.4); font-size: 14px; font-weight: 600;
}
.loop-in svg.i { color: var(--accent); width: 18px; height: 18px; }
.loop { text-align: center; }
.loop-assist { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.loop-assist span { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.loop-svg { width: 100%; max-width: 480px; height: auto; margin: 0 auto; overflow: visible; }
.loop-ring { fill: none; stroke: rgba(var(--lav-rgb), 0.28); stroke-width: 2; }
.loop-glow {
  fill: none; stroke: var(--success-fg); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 12 88; /* green, like the positive words (Daniel 2026-10-22) */
  transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 6px rgba(141, 232, 157, 0.75));
  animation: loopRun 8s linear infinite;
}
:root[data-theme="light"] .loop-glow { stroke: #2aa552; filter: drop-shadow(0 0 6px rgba(141, 232, 157, 0.95)) drop-shadow(0 0 2px rgba(42, 165, 82, 0.5)); } /* a line cannot sit on a field: a richer green that still glows (Daniel 2026-10-23) */
@keyframes loopRun { to { stroke-dashoffset: -100; } }
.loop-svg use { opacity: 0.6; animation: loopNode 8s linear infinite; }
.loop-svg use:nth-of-type(2) { animation-delay: 2s; }
.loop-svg use:nth-of-type(3) { animation-delay: 4s; }
.loop-svg use:nth-of-type(4) { animation-delay: 6s; }
@keyframes loopNode { 0%, 100% { opacity: 1; } 18%, 82% { opacity: 0.55; } }
.loop-t { fill: var(--fg); font-size: 18px; font-weight: 600; }
.loop-c { fill: var(--accent); font-size: 18px; font-weight: 600; }
.nos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin-top: var(--block-gap); }
.nos li { display: flex; gap: 18px; align-items: flex-start; padding: clamp(20px, 2vw, 26px); border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.nos strong { display: block; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--fg); }
.nos p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: rgba(var(--fg-rgb), 0.68); }
.no-ic { position: relative; flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(118, 86, 168, 0.2); color: var(--accent); }
.no-ic svg.i { width: 24px; height: 24px; opacity: 0.85; }
.no-ic .strike { position: absolute; inset: 6px; width: 36px; height: 36px; overflow: visible; }
.no-ic .strike path { fill: none; stroke: var(--fg); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 3px rgba(var(--lav-rgb), 0.8)); }
.js .nos .reveal .strike path { stroke-dashoffset: 1; transition: stroke-dashoffset 0.6s var(--ease) 0.7s; }
.js .nos .reveal.is-in .strike path { stroke-dashoffset: 0; }
.nos .reveal:nth-child(2) { transition-delay: 0.1s; } .nos .reveal:nth-child(2) .strike path { transition-delay: 0.85s; }
.nos .reveal:nth-child(3) { transition-delay: 0.2s; } .nos .reveal:nth-child(3) .strike path { transition-delay: 1s; }
/* what agent engineering makes unnecessary, in the orange of "Predefined rules" (critique step 23) */
.nos { --tone: #d9a440; }
:root[data-theme="light"] .nos { --tone: #8a5a00; }
.nos li { border-color: rgba(242, 201, 76, 0.22); }
.nos .no-ic { background: rgba(242, 201, 76, 0.12); color: var(--tone); box-shadow: inset 0 0 0 1px rgba(242, 201, 76, 0.35); }
.nos .no-ic svg.i { opacity: 0.75; }
.nos .no-ic .strike path { stroke: var(--tone); filter: drop-shadow(0 0 4px rgba(242, 201, 76, 0.55)); }
.nos .no-w { color: var(--tone); }
:root[data-theme="light"] .nos .no-ic { background: rgba(242, 201, 76, 0.2); box-shadow: inset 0 0 0 1px rgba(138, 90, 0, 0.3); }
:root[data-theme="light"] .nos li { border-color: rgba(138, 90, 0, 0.2); }

/* ---------- enterprise ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); margin-top: var(--head-gap); }
.tile { padding: clamp(22px, 2.2vw, 30px); border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.tile h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.tile p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: rgba(var(--fg-rgb), 0.68); }
.ti-ic { width: 26px; height: 26px; margin-bottom: 18px; color: var(--accent); }
.tile-seal { display: flex; align-items: center; gap: 20px; background: linear-gradient(140deg, rgba(118, 86, 168, 0.35), rgba(var(--panel-rgb), 0.5)); border-color: rgba(var(--lav-rgb), 0.35); }
.seal { flex: none; width: 158px; height: 158px; padding: 27px; margin: -27px; filter: drop-shadow(0 0 18px rgba(var(--lav-rgb), 0.3)); } /* 104px seal, room for its glow */
.seal-out { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.seal-in { fill: rgba(118, 86, 168, 0.35); stroke: rgba(var(--lav-rgb), 0.45); stroke-width: 1.5; stroke-linejoin: round; }
.seal-iso { fill: var(--accent); font-size: 17px; font-weight: 700; letter-spacing: 0.12em; }
.seal-num { fill: var(--fg); font-size: 27px; font-weight: 700; letter-spacing: 0.01em; }
.seal-cert { fill: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; }
.seals { flex: none; display: flex; gap: 2px; } /* GDPR and the Swiss FADP side by side: one claim, two laws */
@media (max-width: 1100px) { .tile-seal { flex-direction: column; align-items: flex-start; } } /* two seals leave no room beside them */
.seal-tick { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } /* GDPR: a tick where ISO has its name */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pills li { padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(var(--lav-rgb), 0.4); font-size: 12.5px; font-weight: 600; color: var(--accent); }

/* ---------- human in the lead: agents orbit the person (six facets around one centre) ---------- */
.orbit-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; max-width: 1080px; margin: var(--head-gap) auto 0; }
.orbit { position: relative; width: 400px; max-width: 100%; aspect-ratio: 1; margin: 0 auto; }
.orbit::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 1.5px dashed rgba(var(--lav-rgb), 0.25); }
.orbit-ring { position: absolute; inset: 0; animation: orbitSpin 80s linear infinite; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes orbitSpinRev { to { transform: rotate(-360deg); } }
.spoke { position: absolute; left: 50%; top: 50%; width: 41%; height: 2px; margin-top: -1px; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(var(--lav-rgb), 0.05), rgba(var(--lav-rgb), 0.28)); }
.spoke::after {
  content: ""; position: absolute; top: 50%; right: 0; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--core); box-shadow: 0 0 10px 3px rgba(var(--lav-rgb), 0.85); opacity: 0; animation: orbitDeliver 6s infinite;
}
@keyframes orbitDeliver { 0% { right: 0; opacity: 0; } 6% { opacity: 1; } 26% { right: calc(100% - 46px); opacity: 1; } 30%, 100% { right: calc(100% - 46px); opacity: 0; } }
.s0 { transform: rotate(-90deg); } .s0::after { animation-delay: 0s; } .s1 { transform: rotate(-30deg); } .s1::after { animation-delay: 1s; } .s2 { transform: rotate(30deg); } .s2::after { animation-delay: 2s; } .s3 { transform: rotate(90deg); } .s3::after { animation-delay: 3s; } .s4 { transform: rotate(150deg); } .s4::after { animation-delay: 4s; } .s5 { transform: rotate(210deg); } .s5::after { animation-delay: 5s; }
.oh { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.o0 { transform: rotate(-90deg) translate(164px) rotate(90deg); } .o1 { transform: rotate(-30deg) translate(164px) rotate(30deg); } .o2 { transform: rotate(30deg) translate(164px) rotate(-30deg); } .o3 { transform: rotate(90deg) translate(164px) rotate(-90deg); } .o4 { transform: rotate(150deg) translate(164px) rotate(-150deg); } .o5 { transform: rotate(210deg) translate(164px) rotate(-210deg); }
.oh svg { position: absolute; left: -48px; top: -48px; width: 96px; height: 96px; padding: 18px; filter: drop-shadow(0 0 12px rgba(var(--lav-rgb), 0.45)); animation: orbitSpinRev 80s linear infinite; }
.orbit-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 10px; }
.cp { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); border: 2.5px solid var(--light); color: #fff; box-shadow: 0 0 60px rgba(var(--lav-rgb), 0.55), 0 0 0 12px rgba(118, 86, 168, 0.18); }
.cp svg.i { width: 40px; height: 40px; stroke-width: 1.8; }
.cl { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg); white-space: nowrap; }
.orbit-text h3 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.orbit-text ul { margin-top: 24px; }
.orbit-text li { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid rgba(var(--lav-rgb), 0.2); font-size: clamp(16px, 1.3vw, 18px); font-weight: 600; line-height: 1.35; }
.orbit-text .ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.orbit-text .ico svg.i { width: 22px; height: 22px; color: var(--accent); }
@media (max-width: 860px) {
  .orbit-wrap { grid-template-columns: minmax(0, 1fr); }
  .orbit { width: 320px; }
  .o0 { transform: rotate(-90deg) translate(131px) rotate(90deg); } .o1 { transform: rotate(-30deg) translate(131px) rotate(30deg); } .o2 { transform: rotate(30deg) translate(131px) rotate(-30deg); } .o3 { transform: rotate(90deg) translate(131px) rotate(-90deg); } .o4 { transform: rotate(150deg) translate(131px) rotate(-150deg); } .o5 { transform: rotate(210deg) translate(131px) rotate(-210deg); }
  .oh svg { left: -42px; top: -42px; width: 84px; height: 84px; } /* 48px hexagon plus room for its glow */
  .cp { width: 78px; height: 78px; }
  .cp svg.i { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-ring, .oh svg { animation: none; }
  .spoke::after { display: none; }
}

/* ---------- DTI ---------- */
.dti-text p { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.7; color: rgba(var(--fg-rgb), 0.76); }
.dti-text p + p { margin-top: 18px; }
.dti { align-items: start; } /* its own section, second to last: heading left, story right */

/* ---------- film ---------- */
.film {
  max-width: 1120px; margin: var(--head-gap) auto 0; aspect-ratio: 16 / 9; border-radius: clamp(12px, 1.4vw, 18px); overflow: hidden;
  background: #000; border: 1px solid rgba(var(--lav-rgb), 0.22); box-shadow: 0 30px 80px rgba(var(--shadow-rgb), calc(0.6 * var(--shadow-k)));
}
.film video { display: block; width: 100%; height: 100%; background: #000; }
.film video::cue { font-family: inherit; font-size: 0.9em; background: rgba(14, 10, 28, 0.8); }
/* "Watch the film" opens the film over the page and plays it */
.fdlg { width: min(1280px, 94vw); max-width: none; padding: 0; border: 0; border-radius: 16px; background: #000; color: #f0eeff; overflow: visible; box-shadow: 0 40px 120px rgba(4, 2, 12, 0.6); }
.fdlg::backdrop { background: rgba(8, 5, 18, 0.88); }
.fdlg-v { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; }
.fdlg-v video { display: block; width: 100%; height: 100%; background: #000; }
.fdlg-v video::cue { font-family: inherit; font-size: 0.9em; background: rgba(14, 10, 28, 0.8); }
.fdlg-x {
  position: absolute; top: -58px; right: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(240, 238, 255, 0.12); border: 1px solid rgba(240, 238, 255, 0.35); color: #f0eeff; transition: background 0.2s, border-color 0.2s;
}
.fdlg-x:hover { background: rgba(240, 238, 255, 0.22); border-color: #f0eeff; }
.fdlg-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 640px) { .fdlg { width: 100vw; border-radius: 0; } .fdlg-v { border-radius: 0; } .fdlg-x { top: -54px; right: 10px; } }

/* the full film: the poster with a button; the film opens in a dialog after a short opt-in (Daniel 2026-10-28) */
.film-open { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: #f0eeff; font: inherit; cursor: pointer; }
.film-open img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.film-open:hover img { transform: scale(1.02); }
.film-cta { position: absolute; left: 50%; bottom: clamp(16px, 4.5%, 40px); translate: -50% 0; display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 20px 8px 8px; border-radius: 999px; white-space: nowrap; font-size: clamp(14px, 1.2vw, 16px); font-weight: 600;
  background: rgba(22, 16, 41, 0.72); border: 1px solid rgba(196, 180, 255, 0.45); backdrop-filter: blur(8px); transition: background 0.2s, border-color 0.2s; }
.film-cta .ring { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(118, 86, 168, 0.45); border: 1px solid rgba(196, 180, 255, 0.6); }
.film-cta .ring svg { width: 14px; height: 14px; fill: currentColor; margin-left: 2px; }
.film-cta small { font-size: 0.86em; font-weight: 500; color: rgba(240, 238, 255, 0.66); }
.film-open:hover .film-cta, .film-open:focus-visible .film-cta { background: rgba(118, 86, 168, 0.6); border-color: #c4b4ff; }
.film-alt { margin-top: 20px; text-align: center; font-size: 15px; color: rgba(var(--fg-rgb), 0.72); }
.film-alt a { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; font-weight: 600; color: var(--fg); text-decoration: none; }
.film-alt a svg.i { width: 16px; height: 16px; color: var(--accent); transition: transform 0.2s; }
.film-alt a:hover svg.i { transform: translateX(3px); }
@media (max-width: 560px) {
  .film-cta { bottom: 8px; gap: 8px; padding: 4px 14px 4px 4px; font-size: 13px; }
  .film-cta small { display: none; }
  .film-cta .ring { width: 26px; height: 26px; }
  .film-cta .ring svg { width: 10px; height: 10px; }
}
/* the film dialog: first the opt-in card (always dark, like the player), then the film with the link to share it */
.fdlg-film { width: min(1280px, 94vw, calc((100dvh - 190px) * 16 / 9)); }
.fdlg-film[data-state="gate"] { width: min(520px, 94vw); background: none; }
.fdlg-film[data-state="gate"] .fdlg-v, .fdlg-film[data-state="gate"] .fshare, .fdlg-film[data-state="film"] .fgate { display: none; }
.fgate { border-radius: 16px; overflow: hidden; background: #1b1430; border: 1px solid rgba(196, 180, 255, 0.22); }
.fgate-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.fgate-body { padding: 22px 26px 24px; }
.fgate-h { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: #f0eeff; }
.fgate-t { margin-top: 8px; font-size: 15px; line-height: 1.55; color: rgba(240, 238, 255, 0.74); }
.fgate-form { display: flex; gap: 10px; margin-top: 18px; }
.fgate-in { flex: 1; min-width: 0; min-height: 50px; padding: 0 16px; border-radius: 12px; font: inherit; font-size: 16px; color: #f0eeff;
  background: rgba(240, 238, 255, 0.06); border: 1px solid rgba(196, 180, 255, 0.35); }
.fgate-in::placeholder { color: rgba(240, 238, 255, 0.5); }
.fgate-in:focus { outline: none; border-color: #c4b4ff; box-shadow: 0 0 0 3px rgba(118, 86, 168, 0.45); }
.fgate .btn-primary { flex: none; background: #f0eeff; color: #161029; } /* dark card in both themes */
.fgate-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* a field only bots fill in */
.fgate-note { margin-top: 12px; font-size: 13px; color: rgba(240, 238, 255, 0.6); }
.fgate-note a { color: #f0eeff; }
.fshare { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding: 14px 16px; font-size: 15px; color: rgba(240, 238, 255, 0.74); }
.fshare .ct-mail { color: #f0eeff; }
.fshare .ct-copy:not([data-done]) { color: #c4b4ff; border-color: rgba(196, 180, 255, 0.4); }
@media (max-width: 640px) { .fdlg-film[data-state="film"] { width: 100vw; } }
@media (max-width: 480px) { .fgate-form { flex-direction: column; } .fgate-body { padding: 18px 18px 20px; } }

/* ---------- key figures below the hero: five numbers in a calm row (phones: the first one wide, then 2 x 2) ---------- */
.kf { position: relative; border-block: 1px solid var(--line); background: rgba(var(--panel-rgb), 0.35); }
.kf-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-block: clamp(26px, 3vw, 40px); }
.kf-item { padding-inline: clamp(14px, 1.8vw, 28px); border-left: 1px solid var(--line); }
.kf-item:first-child { padding-left: 0; border-left: 0; }
.kf-num { display: flex; align-items: baseline; font-size: clamp(36px, 3.6vw, 52px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kf-u { color: var(--accent); }
.kf-pre { margin-right: 0.3em; font-size: 0.32em; font-weight: 600; letter-spacing: 0.02em; color: rgba(var(--fg-rgb), 0.66); }
.kf-label { margin-top: 10px; max-width: 22ch; font-size: 15px; line-height: 1.4; color: rgba(var(--fg-rgb), 0.7); }
/* the values never move; the five figures only fade in one after another when the row scrolls in */
.js .kf-item.reveal { transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .kf-item.reveal.is-in { transform: none; }
.kf-item.reveal:nth-child(2) { transition-delay: 0.1s; }
.kf-item.reveal:nth-child(3) { transition-delay: 0.2s; }
.kf-item.reveal:nth-child(4) { transition-delay: 0.3s; }
.kf-item.reveal:nth-child(5) { transition-delay: 0.4s; }
@media (max-width: 860px) {
  .kf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .kf-item { padding: 0 0 0 18px; }
  .kf-item:nth-child(even) { padding-left: 0; border-left: 0; }
  .kf-item:first-child { grid-column: 1 / -1; }
  .kf-item:first-child .kf-num { font-size: 56px; }
  .kf-item:first-child .kf-label { max-width: none; }
}

/* ---------- quiet link to the contact section in the middle of the page ---------- */
.mid-cta { margin-top: clamp(36px, 4vw, 56px); }
.mid-cta a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 18px 10px 20px; border-radius: 12px;
  border: 1px solid rgba(var(--lav-rgb), 0.35); font-size: 16px; font-weight: 600; text-decoration: none; color: var(--fg);
  transition: border-color 0.2s, background 0.2s;
}
.mid-cta a:hover { border-color: var(--accent); background: rgba(118, 86, 168, 0.25); }
.mid-cta svg.i { width: 18px; height: 18px; color: var(--accent); transition: transform 0.2s; }
.mid-cta a:hover svg.i { transform: translateX(3px); }
/* right beside the section's closing line, below it once the row gets too narrow (step 32, Daniel 2026-10-24) */
.close-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(28px, 3vw, 48px); margin-top: var(--block-gap); }
.close-row .sec-close, .close-row .mid-cta { margin-top: 0; }
.close-row .mid-cta { flex: none; }
.sov .mid-cta { margin-top: clamp(24px, 2.6vw, 34px); } /* under the text next to the map, above the SaaS card */

/* ---------- FAQ: one quiet line at the very end that opens (Daniel 2026-10-24); inside, four topics as tabs (js/site.js)
   and the questions open one by one ---------- */
.sec-faq { padding-block: 0 clamp(48px, 5vw, 80px); } /* right under the contact, which brings its own space above */
.faq-box { max-width: 960px; margin-inline: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); transition: border-color 0.2s; }
.faq-box:hover, .faq-box[open] { border-color: rgba(var(--lav-rgb), 0.35); }
.faq-box > summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: 2px;
  padding: 18px 22px; cursor: pointer; list-style: none;
}
.faq-box > summary::-webkit-details-marker { display: none; }
.faq-box > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 18px; }
.faq-hex { grid-row: 1 / span 2; width: 18px; height: 18px; }
.sec .faq-box h2 { grid-column: 2; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; transition: color 0.2s; }
.faq-sub { grid-column: 2; font-size: 14px; line-height: 1.4; color: var(--muted); }
.faq-box > summary .faq-pm { grid-column: 3; grid-row: 1 / span 2; }
.faq-box > summary:hover h2 { color: var(--accent); }
.faq-box > summary:hover .faq-pm { border-color: var(--accent); }
.faq-box[open] > summary .faq-pm { background: rgba(118, 86, 168, 0.2); border-color: rgba(var(--lav-rgb), 0.6); }
.faq-box[open] > summary .faq-pm::after { transform: rotate(0deg); }
.faq-box[open] > .faq-tabs { animation: faqIn 0.4s var(--ease) both; }
.faq-tabs { padding: 6px 22px 22px; }
.faq-tablist { display: none; } /* without JavaScript every topic shows below the other, with its heading */
.js .faq-tablist { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.faq-tablist button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px 0 15px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; color: rgba(var(--fg-rgb), 0.72); background: none; border: 1px solid var(--line);
  transition: color 0.2s, background 0.25s, border-color 0.25s;
}
.faq-tablist svg.i { width: 18px; height: 18px; color: var(--accent); }
.faq-tablist button:hover { color: var(--fg); border-color: rgba(var(--lav-rgb), 0.5); }
.faq-tablist button[aria-selected="true"] { color: var(--fg); background: rgba(118, 86, 168, 0.24); border-color: rgba(var(--lav-rgb), 0.6); }
:root[data-theme="light"] .faq-tablist button[aria-selected="true"] { background: rgba(118, 86, 168, 0.12); }
.faq-tablist button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq-cat { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.js .faq-cat { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the tab names the topic */
.faq-group + .faq-group { margin-top: 44px; }
.js .faq-group + .faq-group { margin-top: 0; }
.js .faq-group { animation: faqIn 0.35s var(--ease) both; }
/* the questions: a hairline between them, a quiet + in a ring that turns into − */
.faq-q { border-top: 1px solid var(--line); }
.faq-q:last-child { border-bottom: 1px solid var(--line); }
.faq-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--fg);
}
.faq-q summary::-webkit-details-marker { display: none; }
.faq-qt { transition: color 0.2s; text-wrap: pretty; }
.faq-q summary:hover .faq-qt { color: var(--accent); }
.faq-q summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.faq-pm { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(var(--lav-rgb), 0.35); transition: border-color 0.2s, background 0.2s; }
.faq-pm::before, .faq-pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--accent); transition: transform 0.35s var(--ease); }
.faq-pm::after { transform: rotate(90deg); }
.faq-q[open] .faq-pm::after { transform: rotate(0deg); } /* the vertical bar lies down: + becomes − */
.faq-q summary:hover .faq-pm { border-color: var(--accent); }
.faq-q[open] .faq-pm { background: rgba(118, 86, 168, 0.2); border-color: rgba(var(--lav-rgb), 0.6); }
.faq-a { max-width: 48em; padding: 0 54px 26px 0; }
.faq-a p { font-size: 16px; line-height: 1.65; color: rgba(var(--fg-rgb), 0.76); }
.faq-q[open] .faq-a { animation: faqIn 0.4s var(--ease) both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .faq-group, .faq-q[open] .faq-a, .faq-box[open] > .faq-tabs { animation: none; } .faq-pm::before, .faq-pm::after { transition: none; } }
/* a quiet line after the questions */
.faq-more { margin-top: 22px; font-size: 15px; line-height: 1.5; color: rgba(var(--fg-rgb), 0.7); }
.faq-more a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--fg); text-decoration: underline; text-decoration-color: rgba(var(--lav-rgb), 0.5); text-underline-offset: 4px; transition: text-decoration-color 0.2s; }
.faq-more a:hover { text-decoration-color: var(--accent); }
.faq-more svg.i { width: 16px; height: 16px; color: var(--accent); transition: transform 0.2s; }
.faq-more a:hover svg.i { transform: translateX(3px); }
@media (max-width: 640px) {
  .faq-box > summary { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 16px 16px 16px 18px; }
  .faq-hex { display: none; } /* the title stays on one line */
  .sec .faq-box h2, .faq-sub { grid-column: 1; }
  .sec .faq-box h2 { font-size: 16px; }
  .faq-box > summary .faq-pm { grid-column: 2; }
  .faq-tabs { padding: 2px 16px 18px; }
  .faq-q summary { gap: 16px; padding: 16px 0; font-size: 16px; }
  .faq-a { padding-right: 0; }
}
/* phones: the four topics as a 2 × 2 grid, the names may wrap */
@media (max-width: 560px) {
  .js .faq-tablist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .faq-tablist button { min-height: 54px; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.25; text-align: left; }
  .faq-tablist svg.i { width: 16px; height: 16px; }
}

/* ---------- contact ---------- */
.contact { max-width: 820px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.contact-hex { width: 168px; height: 168px; padding: 46px; margin: -46px -46px -16px; filter: drop-shadow(0 0 30px rgba(var(--lav-rgb), 0.45)); } /* 76px logo, room for its glow */
.contact h2 { font-size: clamp(34px, 4.2vw, 60px); font-weight: 700; line-height: 1.06; letter-spacing: -0.026em; } /* a moment, like how it works */
.contact .sec-lede { margin-inline: auto; }
.contact .btn { margin-top: 36px; }
/* book a demo (primary) or write (secondary), side by side; stacked on narrow screens */
.ct-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }
.contact .ct-actions .btn { margin-top: 0; }
.btn-line { background: none; color: var(--fg); border: 1px solid rgba(var(--lav-rgb), 0.35); transition: border-color 0.2s, background 0.2s; }
.btn-line:hover { border-color: var(--accent); background: rgba(118, 86, 168, 0.18); }
/* what happens next: three hexagons on a short track, numbered by CSS */
.ct-next { width: 100%; max-width: 720px; margin-top: 34px; }
.ct-next-h { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.ct-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; } /* an ordered list: the order is in the markup, no numbers or line needed (Daniel, 2026-10-16) */
.ct-steps li { display: grid; justify-items: center; gap: 10px; text-align: center; font-size: 15px; line-height: 1.45; color: rgba(var(--fg-rgb), 0.86); }
.ct-ic { display: grid; place-items: center; width: 44px; height: 44px; color: var(--accent); }
.ct-ic svg.i { width: 28px; height: 28px; stroke-width: 1.8; }
/* the address to copy (for computers without a mail program) */
.ct-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 20px; font-size: 15px; color: rgba(var(--fg-rgb), 0.72); }
.ct-mail { font-weight: 700; color: var(--fg); user-select: all; }
.ct-copy {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 12px 6px 10px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--accent); background: none; border: 1px solid rgba(var(--lav-rgb), 0.35);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.ct-copy:hover { border-color: var(--accent); background: rgba(118, 86, 168, 0.18); }
.ct-copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct-copy .ct-i-ok, .ct-copy[data-done] .ct-i-copy { display: none; }
.ct-copy[data-done] { color: var(--success-fg); border-color: var(--success-fg); }
:root[data-theme="light"] .ct-copy[data-done] { color: #12391d; background: #8de89d; border-color: #8de89d; }
.ct-copy[data-done] .ct-i-ok { display: block; }
/* the page's security promises once more, where people decide to write */
.ct-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: rgba(var(--fg-rgb), 0.8); }
.ct-trust li { display: inline-flex; align-items: center; gap: 9px; }
.ct-trust svg.i { width: 18px; height: 18px; color: var(--accent); }
@media (max-width: 640px) {
  .ct-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: start; }
  .ct-steps li { grid-template-columns: 44px minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; }
  .ct-copy { min-height: 44px; }
  .ct-trust { flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; }
  .ct-trust li { align-items: flex-start; }
  .ct-trust svg.i { margin-top: 2px; }
}

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: 36px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.footer-brand { display: flex; align-items: center; gap: 18px; }
.footer-brand img { height: 18px; width: auto; }
.footer-brand p { font-size: 14px; font-weight: 600; color: var(--accent); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; font-size: 13px; color: rgba(var(--fg-rgb), 0.7); }
.footer-links a { padding-block: 11px; margin-block: -11px; text-decoration: none; } /* 44px to tap, nothing moves */
.footer-links a:hover { color: var(--fg); text-decoration: underline; }
.footer-links .muted { color: var(--muted); }

/* ---------- light theme: special cases ---------- */
/* the proof cards invert, like buttons and tooltips: dark on the light page. Their inside reads these variables. */
:root[data-theme="light"] :is(.hc-card, .hs-dec, .hw-result, .hs-chip, .hs-doc) {
  --card: var(--inv-card); --ink: #f0eeff; --ink-soft: var(--inv-soft); --surface: rgba(240, 238, 255, 0.1); --success-on-light: #8de89d;
  outline: 1px solid var(--inv-line); outline-offset: -1px;
}
/* the few colours that were written for a white card */
:root[data-theme="light"] .hc-row { color: #e6e1f5; }
:root[data-theme="light"] :is(.hc-head, .hc-sub, .hc-foot, .hw-dl > div) { border-color: var(--inv-line); }
:root[data-theme="light"] .hc-queue .q { color: #b3a9d6; border-color: rgba(196, 181, 232, 0.35); }
:root[data-theme="light"] .hc-queue .q.done { background: rgba(141, 232, 157, 0.22); }
:root[data-theme="light"] .hc-queue .qk { background: #24452f; }
:root[data-theme="light"] :is(.hc-queue .qt, .hc-foot.is-dec .ft-a, .hw-result .hw-k, .hw-find p, .hw-human svg.i, .hc-case .hc-ic, .hs-chip svg, .hs-doc) { color: var(--inv-label); }
:root[data-theme="light"] .hc-find.ok .st { background: rgba(141, 232, 157, 0.22); }
:root[data-theme="light"] .hc-find.flag .txt { color: #f2c94c; }
:root[data-theme="light"] .hc-find { background: rgba(196, 181, 232, calc(var(--hl, 0) * 0.3)); } /* the glow on the dark card */
:root[data-theme="light"] .hs-dec .r1 svg { stroke: var(--inv-label); }
:root[data-theme="light"] .hs-dec .av svg { stroke: #f0eeff; }
:root[data-theme="light"] .hw-badge { background: rgba(141, 232, 157, 0.16); }
:root[data-theme="light"] .hw-badge svg { color: #12391d; }
:root[data-theme="light"] .hw-find { background: rgba(196, 181, 232, 0.12); }
:root[data-theme="light"] .hw-conf { background: rgba(196, 181, 232, 0.2); }
/* the decision-ready result becomes the dark card on a light page */
:root[data-theme="light"] .hs-pool { opacity: 0.6; }
:root[data-theme="light"] .hc-card, :root[data-theme="light"] .hs-dec, :root[data-theme="light"] .hs-find { box-shadow: 0 18px 50px rgba(40, 26, 80, 0.16), 0 0 0 1px rgba(70, 63, 106, 0.08); }
:root[data-theme="light"] .hw-card, :root[data-theme="light"] .tile, :root[data-theme="light"] .intvis, :root[data-theme="light"] .ind, :root[data-theme="light"] .ind-panel, :root[data-theme="light"] .nos li, :root[data-theme="light"] .dep { box-shadow: 0 1px 2px rgba(40, 26, 80, 0.05), 0 12px 32px rgba(40, 26, 80, 0.06); } /* a hairline shadow plus a soft one */

/* theme switch in the navigation */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; padding: 0;
  background: none; border: 1px solid rgba(var(--lav-rgb), 0.35); color: var(--accent); transition: border-color 0.2s, background 0.2s;
}
.theme-toggle:hover { border-color: var(--accent); background: rgba(118, 86, 168, 0.18); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the icon shows the mode you switch to */
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-rev > .sec-head { order: 0; }
  .nos { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 640px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .intvis-sys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .intvis-api { display: none; }
  .intvis-layer { margin-top: 14px; }
  .intvis-track svg { width: 30px; height: 30px; }
  .loop-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .loop-in li { font-size: 13px; white-space: normal; }
  .tile-seal { flex-direction: column; align-items: flex-start; }
  .industries { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ind { min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 12px 48px 12px 12px; font-size: 15px; hyphens: manual; -webkit-hyphens: manual; }
  .ind-more { top: 50%; margin-top: -9px; }
  .ind-cases { grid-template-columns: minmax(0, 1fr); }
  .ind-ic { flex: none; width: 38px; height: 38px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .no-ic .strike path { transition: none !important; animation: none !important; }
  .loop-glow, .loop-svg use, .intvis-api li::after, .intvis-track .spark { animation: none; }
  .intvis-api li::after, .intvis-track .spark { display: none; }
}

/* ---------- technical terms (MCP, CLI, RAG, MACC ...): a dotted underline, the explanation shows on hover or tap ----------
   The explanation is part of the text, so screen readers read it too; js/site.js keeps the bubble inside the screen. */
.gl { position: relative; border-bottom: 1.5px dotted rgba(var(--lav-rgb), 0.85); cursor: help; outline-offset: 2px; }
.gl-tip {
  position: absolute; z-index: 40; left: 50%; bottom: calc(100% + 10px); width: max-content; max-width: min(280px, calc(100vw - 32px));
  padding: 10px 12px; border-radius: 10px; background: var(--card); color: var(--ink); box-shadow: 0 14px 34px rgba(4, 2, 12, 0.35);
  font-size: 13px; font-weight: 500; font-style: normal; line-height: 1.45; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
  opacity: 0; pointer-events: none; transform: translate(calc(-50% + var(--gx, 0px)), 4px); transition: opacity 0.15s, transform 0.15s;
}
.gl-tip .reg { color: inherit; }
.gl.is-below .gl-tip { bottom: auto; top: calc(100% + 10px); }
.gl:hover .gl-tip, .gl:focus .gl-tip { opacity: 1; transform: translate(calc(-50% + var(--gx, 0px)), 0); }
:root[data-theme="light"] .gl-tip { background: var(--btn-bg); color: #f0eeff; }
@media (prefers-reduced-motion: reduce) { .gl-tip { transition: none; } }

/* ---------- the film page for shared links (film/index.html, Daniel 2026-10-28) ---------- */
.fp { padding-top: calc(var(--sec-pad) + 40px); }
.fp h1 { font-size: clamp(34px, 4.2vw, 60px); font-weight: 700; line-height: 1.06; letter-spacing: -0.026em; text-wrap: balance; }
.fp-next { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-top: clamp(28px, 3vw, 40px); }