/* =========================================================
   VERSIONBLUE · One-Pager — LIGHT EDITORIAL
   Palette aus dem Logo · hübsch, modern, ruhig
   ========================================================= */

:root {
  /* core: aus dem Logo */
  --logo-deep:  #282653;
  --logo-navy:  #303068;
  --logo-mid:   #384088;
  --logo-slate: #3d6db2;
  --logo-light: #6770b8;
  --logo-ice:   #a8aacc;

  /* light palette */
  --bg-0: #f5f3ec;    /* warmes Pergament */
  --bg-1: #ecebe1;    /* helles Stein */
  --bg-2: #ffffff;    /* Karten */
  --bg-tint: #f0eee5;

  --tint-1: rgba(56, 64, 136, 0.05);
  --tint-2: rgba(56, 64, 136, 0.10);

  --line:    rgba(40,38,83, 0.10);
  --line-2:  rgba(40,38,83, 0.18);
  --line-3:  rgba(40,38,83, 0.26);

  --ink-1: #1a1c3a;
  --ink-2: #494c70;
  --ink-3: #7a7e9a;
  --ink-4: #a6aac0;

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 26px;
  --radius-xl: 32px;

  --maxw: 1320px;
  --gutter: clamp(20px, 4vw, 64px);

  --display: "Bricolage Grotesque", "Manrope", system-ui, -apple-system, sans-serif;
  --sans:    "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif:   "Instrument Serif", "Manrope", serif;

  --ease-out: cubic-bezier(.2,.7,.1,1);
  --ease-in-out: cubic-bezier(.6,.2,.1,1);

  --shadow-sm: 0 1px 2px rgba(40,38,83,0.04), 0 2px 8px rgba(40,38,83,0.04);
  --shadow-md: 0 4px 10px rgba(40,38,83,0.05), 0 18px 36px rgba(40,38,83,0.07);
  --shadow-lg: 0 8px 18px rgba(40,38,83,0.08), 0 36px 70px rgba(40,38,83,0.12);
}

/* ===================== DARK THEME ===================== */
[data-theme="dark"] {
  --bg-0: #07091c;
  --bg-1: #0c1029;
  --bg-2: #11163a;
  --bg-tint: #0a0d24;

  --tint-1: rgba(103, 112, 184, 0.10);
  --tint-2: rgba(103, 112, 184, 0.18);

  --line:    rgba(255, 255, 255, 0.07);
  --line-2:  rgba(255, 255, 255, 0.14);
  --line-3:  rgba(255, 255, 255, 0.22);

  --ink-1: #f3f4fb;
  --ink-2: #c4c8e2;
  --ink-3: #8489ab;
  --ink-4: #5a608a;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 4px 12px rgba(0,0,0,0.25);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.35), 0 22px 44px rgba(0,0,0,0.30);
  --shadow-lg: 0 10px 24px rgba(0,0,0,0.40), 0 40px 80px rgba(0,0,0,0.40);
}
[data-theme="dark"] body {
  background:
    radial-gradient(1100px 700px at 92% -10%, rgba(103,112,184,0.20), transparent 60%),
    radial-gradient(900px 700px at -5% 25%, rgba(61,109,178,0.16), transparent 55%),
    radial-gradient(900px 700px at 50% 110%, rgba(40,38,83,0.50), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 80%, #02030f 100%);
}
[data-theme="dark"] ::selection { background: var(--logo-slate); color: #fff; }

[data-theme="dark"] .bg-fx .orb { mix-blend-mode: screen; opacity: 0.45; }
[data-theme="dark"] .grain { mix-blend-mode: overlay; opacity: 0.05; }
[data-theme="dark"] .bg-fx::after {
  background-image: radial-gradient(circle, rgba(168,170,204,0.08) 1px, transparent 1px);
}

/* Nav */
[data-theme="dark"] .nav {
  background: rgba(7,9,28,0.85);
  border-bottom-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .nav.is-stuck {
  background: rgba(7,9,28,0.94);
}
[data-theme="dark"] .nav__logo img,
[data-theme="dark"] .hero__logo img,
[data-theme="dark"] .footer__logo img,
[data-theme="dark"] .logo-inv img { filter: brightness(0) invert(1); }
[data-theme="dark"] .nav__logo-meta {
  color: var(--ink-3);
  border-left-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .nav__links { color: var(--ink-2); }
[data-theme="dark"] .nav__links a:hover { color: var(--ink-1); }
[data-theme="dark"] .nav__links .nav__num { color: var(--logo-light); }
[data-theme="dark"] .nav__cta {
  background: rgba(255,255,255,0.04);
  color: var(--ink-1);
  border-color: rgba(255,255,255,0.14);
}
[data-theme="dark"] .nav__cta:hover {
  background: var(--logo-light);
  color: var(--bg-0);
  border-color: var(--logo-light);
}
[data-theme="dark"] .floating-lang .langswitch,
[data-theme="dark"] .langswitch {
  background: rgba(20,24,52,0.85);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .langswitch__btn { color: var(--ink-2); }
[data-theme="dark"] .langswitch__btn.is-active { background: var(--logo-light); color: var(--bg-0); }
[data-theme="dark"] .theme-toggle {
  background: rgba(20,24,52,0.85);
  border-color: rgba(255,255,255,0.10);
  color: var(--ink-1);
}
[data-theme="dark"] .theme-toggle:hover { background: var(--logo-light); color: var(--bg-0); }

/* Eyebrow + section heads in dark */
[data-theme="dark"] .eyebrow { color: var(--ink-3); }
[data-theme="dark"] .eyebrow::before { background: var(--logo-light); }
[data-theme="dark"] .section__title { color: var(--ink-1); }

/* Management card "Hand am Pult" */
[data-theme="dark"] .mgr {
  background:
    radial-gradient(700px 350px at 100% 100%, rgba(61,109,178,0.20), transparent 60%),
    linear-gradient(160deg, #131638 0%, #0a0c24 100%);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .mgr__name { color: var(--ink-1); }
[data-theme="dark"] .mgr__bio { color: var(--ink-2); }
[data-theme="dark"] .mgr__role { color: var(--logo-light); }
[data-theme="dark"] .mgr__link {
  background: rgba(255,255,255,0.04);
  color: var(--ink-1);
  border-color: rgba(255,255,255,0.14);
}
[data-theme="dark"] .mgr__link:hover {
  background: var(--logo-light);
  color: var(--bg-0);
  border-color: var(--logo-light);
}
[data-theme="dark"] .mgr__sig { color: var(--ink-3); }
[data-theme="dark"] .mgr__sig + *,
[data-theme="dark"] .mgr__sig {
  border-color: rgba(255,255,255,0.08) !important;
}

/* Timeline dark */
[data-theme="dark"] .tl,
[data-theme="dark"] .tl__item { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .tl__item:hover {
  background: linear-gradient(90deg, transparent, rgba(103,112,184,0.10) 30%, rgba(103,112,184,0.10) 70%, transparent);
}
[data-theme="dark"] .tl__body strong { color: var(--ink-1); }
[data-theme="dark"] .tl__body p { color: var(--ink-2); }
[data-theme="dark"] .tl__dot { border-color: var(--bg-0); }

/* About card heading + numbers */
[data-theme="dark"] .about__h { color: var(--ink-1); }
[data-theme="dark"] .about__p { color: var(--ink-2); }
[data-theme="dark"] .about__num { color: var(--logo-light); }
[data-theme="dark"] .about__num::after { background: var(--logo-light); }

/* Contact rows */
[data-theme="dark"] .contact__row { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .contact__row p,
[data-theme="dark"] .contact__row a { color: var(--ink-1); }
[data-theme="dark"] .contact__row a:hover { color: var(--logo-light); }
[data-theme="dark"] .contact__h { color: var(--ink-1); }
[data-theme="dark"] .contact__p { color: var(--ink-2); }

/* News / careers / FAQ body text */
[data-theme="dark"] .news__h,
[data-theme="dark"] .careers__h,
[data-theme="dark"] .careers__open strong { color: var(--ink-1); }
[data-theme="dark"] .news__p,
[data-theme="dark"] .careers__p { color: var(--ink-2); }
[data-theme="dark"] .news__cat {
  background: rgba(103,112,184,0.10);
  border-color: rgba(103,112,184,0.30);
  color: var(--logo-light);
}
[data-theme="dark"] .news__meta time { color: var(--ink-3); }
[data-theme="dark"] .careers__card {
  background:
    radial-gradient(700px 400px at 100% 100%, rgba(61,109,178,0.18), transparent 60%),
    linear-gradient(160deg, #131638 0%, #0a0c24 100%);
}
[data-theme="dark"] .faq__list,
[data-theme="dark"] .faq__item { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .btn--ghost {
  background: rgba(255,255,255,0.04);
  color: var(--ink-1);
  border-color: rgba(255,255,255,0.14);
}
[data-theme="dark"] .btn--ghost:hover {
  background: var(--logo-light);
  color: var(--bg-0);
  border-color: var(--logo-light);
}

/* Section borders + footer */
[data-theme="dark"] .section__head,
[data-theme="dark"] .footer { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .footer__row,
[data-theme="dark"] .footer__top { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .footer__claim { color: var(--ink-2); }

/* Cards */
[data-theme="dark"] .brand,
[data-theme="dark"] .about__card,
[data-theme="dark"] .news__card,
[data-theme="dark"] .careers__open li,
[data-theme="dark"] .partners__grid li,
[data-theme="dark"] .stat,
[data-theme="dark"] .num {
  background: var(--bg-2);
}
/* Replace cream-tinted brand backgrounds with dark variants */
[data-theme="dark"] .brand--insertplay .brand__bg {
  background:
    radial-gradient(500px 380px at 100% 0%, rgba(61,109,178,0.22), transparent 60%),
    radial-gradient(500px 380px at 0% 100%, rgba(40,38,83,0.6), transparent 60%),
    linear-gradient(135deg, #161a3d 0%, #0a0c24 100%);
  filter: none;
}
[data-theme="dark"] .brand--cosmos .brand__bg {
  background:
    radial-gradient(500px 380px at 20% 80%, rgba(168,144,200,0.20), transparent 60%),
    radial-gradient(500px 380px at 85% 10%, rgba(103,112,184,0.22), transparent 60%),
    linear-gradient(135deg, #1a153d 0%, #0a0820 100%);
  filter: none;
}
[data-theme="dark"] .brand--arcademanager .brand__bg {
  background:
    radial-gradient(700px 500px at 80% 20%, rgba(61,109,178,0.28), transparent 60%),
    radial-gradient(500px 380px at 10% 90%, rgba(103,112,184,0.18), transparent 60%),
    linear-gradient(135deg, #131c44 0%, #07091e 100%);
  filter: none;
}
[data-theme="dark"] .brand--elbparty .brand__bg {
  background:
    radial-gradient(700px 500px at 80% 100%, rgba(80,170,200,0.22), transparent 60%),
    radial-gradient(500px 400px at 20% 0%, rgba(61,109,178,0.20), transparent 60%),
    linear-gradient(135deg, #0c1c38 0%, #050d22 100%);
  filter: none;
}
[data-theme="dark"] .brand--it .brand__bg {
  background:
    radial-gradient(700px 400px at 20% 0%, rgba(61,109,178,0.22), transparent 60%),
    radial-gradient(500px 380px at 100% 100%, rgba(103,112,184,0.18), transparent 60%),
    linear-gradient(135deg, #131638 0%, #07091e 100%);
  filter: none;
}
[data-theme="dark"] .brand__spot {
  background: radial-gradient(420px 320px at var(--mx) var(--my), rgba(103,112,184,0.15), transparent 60%);
}
/* Invert INSERT-PLAY full-color logo on dark */
[data-theme="dark"] .brand__logo {
  filter: invert(1) hue-rotate(180deg) brightness(1.05) contrast(0.95);
}
[data-theme="dark"] .brand__wordmark { color: var(--ink-1); }
[data-theme="dark"] .brand__chip,
[data-theme="dark"] .brand__link,
[data-theme="dark"] .brand__pills li {
  background: rgba(255,255,255,0.04);
  color: var(--ink-2);
}
[data-theme="dark"] .brand__link:hover {
  background: var(--logo-light);
  color: var(--bg-0);
  border-color: var(--logo-light);
}

/* Hero strip */
[data-theme="dark"] .hero__strip {
  background: rgba(20,24,52,0.4);
  border: 1px solid rgba(255,255,255,0.08);
}
[data-theme="dark"] .hero__strip-cell {
  background: rgba(20,24,52,0.55);
  border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .hero__strip-cell:hover { background: rgba(20,24,52,0.85); }
[data-theme="dark"] .hero__strip-cell--feature {
  background:
    radial-gradient(500px 280px at 0% 100%, rgba(103,112,184,0.35), transparent 60%),
    linear-gradient(160deg, #1a1f4d 0%, #0a0e26 100%) !important;
}
[data-theme="dark"] .hero__strip-stats {
  background: rgba(255,255,255,0.08);
}
[data-theme="dark"] .hero__strip-stats .hero__strip-cell {
  background: rgba(20,24,52,0.55);
}
[data-theme="dark"] .hero__strip-stats .hero__strip-cell:hover { background: rgba(20,24,52,0.85); }
[data-theme="dark"] .hero__strip-l { color: var(--ink-3); }
[data-theme="dark"] .hero__strip-pre { color: var(--logo-light); }
[data-theme="dark"] .hero__strip-cell--feature .hero__strip-l { color: var(--ink-2); }
[data-theme="dark"] .hero__strip-cell--feature .hero__strip-k,
[data-theme="dark"] .hero__strip-stats .hero__strip-k {
  background: linear-gradient(140deg, var(--logo-ice) 0%, var(--logo-light) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="dark"] .hero__strip-sym { color: var(--logo-light); }
[data-theme="dark"] .hero__strip-unit { color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); }

/* Hero floating brand chips */
[data-theme="dark"] .chip {
  background: var(--bg-2);
  border-color: rgba(255,255,255,0.08);
  color: var(--ink-1);
}
[data-theme="dark"] .chip span { color: var(--ink-1); }
[data-theme="dark"] .chip em { color: var(--ink-3); }
[data-theme="dark"] .chip svg { color: var(--logo-light); }
[data-theme="dark"] .chip:hover { border-color: rgba(255,255,255,0.18); }

/* Hero loc + dot */
[data-theme="dark"] .hero__loc { color: var(--ink-3); }

/* Buttons in dark */
[data-theme="dark"] .btn--primary {
  background: linear-gradient(180deg, var(--logo-light), var(--logo-mid));
  color: var(--bg-0);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.28);
}
[data-theme="dark"] .btn--primary:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.32);
}

/* Hero h1 lede bg / contact lede */
[data-theme="dark"] .hero__lede strong { color: var(--ink-1); }
[data-theme="dark"] .hero__lede { color: var(--ink-2); }

/* Manifesto card on dark */
[data-theme="dark"] .manifesto__inner {
  background:
    radial-gradient(700px 400px at 80% 100%, rgba(103,112,184,0.18), transparent 60%),
    radial-gradient(500px 300px at 0% 0%, rgba(61,109,178,0.18), transparent 60%),
    linear-gradient(160deg, #131638 0%, #0a0c24 100%);
}
[data-theme="dark"] .manifesto__inner::after { color: var(--logo-light); opacity: 0.08; }
[data-theme="dark"] .manifesto__text { color: var(--ink-1); }
[data-theme="dark"] .manifesto__text em { color: var(--logo-light); }

/* Ticker / marquee */
[data-theme="dark"] .ticker { background: transparent; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .ticker__track,
[data-theme="dark"] .ticker__track .sep { color: var(--ink-3); }
[data-theme="dark"] .ticker__track .sep { color: var(--logo-light); }
[data-theme="dark"] .marquee { background: rgba(20,24,52,0.4); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .ml span { color: var(--ink-1); }
[data-theme="dark"] .ml--cos span { color: var(--logo-ice); }
[data-theme="dark"] .ml--am span  { color: var(--logo-light); }
[data-theme="dark"] .marquee__row i { color: var(--logo-ice); }

/* Sections */
[data-theme="dark"] .section__title em,
[data-theme="dark"] .contact__h em,
[data-theme="dark"] .careers__h em {
  background: linear-gradient(90deg, var(--logo-light), var(--logo-ice));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="dark"] .tl__year {
  background: linear-gradient(140deg, var(--logo-ice) 0%, var(--logo-light) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="dark"] .num__big {
  color: var(--ink-1);
}

/* Contact card */
[data-theme="dark"] .contact__card {
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(103,112,184,0.18), transparent 60%),
    linear-gradient(180deg, #131638 0%, #0a0c24 100%);
}

/* Newsletter / cookie */
[data-theme="dark"] .cookie {
  background: rgba(15,18,48,0.95);
}
[data-theme="dark"] .cookie__text strong { color: var(--ink-1); }

/* Modal */
[data-theme="dark"] .modal__panel { background: var(--bg-2); }
[data-theme="dark"] .modal__panel::-webkit-scrollbar-thumb { border-color: var(--bg-2); }
[data-theme="dark"] .modal__close,
[data-theme="dark"] .modal__arrow {
  background: rgba(255,255,255,0.06);
  color: var(--ink-1);
}
[data-theme="dark"] .mb__hero--elbparty::before,
[data-theme="dark"] .mb__hero--cosmos::before,
[data-theme="dark"] .mb__hero--insertplay::before,
[data-theme="dark"] .mb__hero--arcademanager::before {
  filter: brightness(0.45) saturate(1.2);
}
[data-theme="dark"] .mb__wordmark { color: var(--ink-1); }

/* Map */
[data-theme="dark"] .presence__canvas {
  background:
    radial-gradient(700px 400px at 80% 100%, rgba(61,109,178,0.18), transparent 60%),
    linear-gradient(160deg, #131638 0%, #0a0c24 100%);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .presence__legend {
  background: var(--bg-2);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .pl { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .pl:hover,
[data-theme="dark"] .pl.is-active {
  background: linear-gradient(90deg, rgba(103,112,184,0.12), transparent);
}
[data-theme="dark"] .pl.is-active { background: rgba(103,112,184,0.16); }
[data-theme="dark"] .pl__body strong { color: var(--ink-1); }
[data-theme="dark"] .pl__body em { color: var(--ink-2); }
[data-theme="dark"] .pl__code {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .pl.is-active .pl__code {
  background: rgba(103,112,184,0.30);
  border-color: var(--logo-light);
}
[data-theme="dark"] .pl__role {
  background: rgba(103,112,184,0.12);
  color: var(--logo-light);
  border-color: rgba(103,112,184,0.30);
}
[data-theme="dark"] .pl__role--active {
  background: rgba(60,200,140,0.12);
  color: #6de0a8;
  border-color: rgba(60,200,140,0.30);
}
[data-theme="dark"] .pl__role--soon {
  background: rgba(232,184,80,0.14);
  color: #f0c870;
  border-color: rgba(232,184,80,0.30);
}

[data-theme="dark"] .dach-map .leaflet-tile-pane { filter: invert(0.92) hue-rotate(180deg) saturate(0.7) brightness(0.95); }
[data-theme="dark"] .dach-map .leaflet-container { background: #0a0e26 !important; }
[data-theme="dark"] .dach-map__legend-overlay {
  background: rgba(15,18,48,0.92);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .dlo__row { color: var(--ink-2); }
[data-theme="dark"] .dlo__row i { border-color: var(--bg-2); }
[data-theme="dark"] .vp-marker__label { background: var(--bg-2); color: var(--ink-1); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .vp-marker__label strong { color: var(--ink-1); }

/* Sourcing strip */
[data-theme="dark"] .sourcing__card {
  background:
    radial-gradient(500px 200px at 100% 50%, rgba(103,112,184,0.16), transparent 60%),
    linear-gradient(180deg, #131638 0%, #0a0c24 100%);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .sourcing__pre { color: var(--logo-light); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .sourcing__flag {
  background: rgba(255,255,255,0.04);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}
[data-theme="dark"] .sourcing__text strong { color: var(--ink-1); }
[data-theme="dark"] .sourcing__text em { color: var(--ink-2); }
[data-theme="dark"] .sourcing__tag {
  background: rgba(103,112,184,0.12);
  color: var(--logo-light);
  border-color: rgba(103,112,184,0.30);
}

/* FAQ */
[data-theme="dark"] .faq__item[open] {
  background: linear-gradient(180deg, rgba(103,112,184,0.10), transparent);
}
[data-theme="dark"] .faq__item summary { color: var(--ink-1); }
[data-theme="dark"] .faq__item summary::before {
  background: rgba(255,255,255,0.04);
  color: var(--logo-light);
}

/* Footer */
[data-theme="dark"] .footer { border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .footer__claim em { color: var(--logo-light); }


* { box-sizing: border-box; }

/* =========================================================
   Page scrollbar — branded
   ========================================================= */

html {
  scrollbar-width: thin;
  scrollbar-color: var(--logo-slate) transparent;
}
html::-webkit-scrollbar {
  width: 12px;
}
html::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--logo-light), var(--logo-mid));
  border-radius: 999px;
  border: 3px solid var(--bg-0);
  background-clip: padding-box;
  transition: background .25s ease;
}
html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--logo-slate), var(--logo-deep));
  background-clip: padding-box;
  border: 3px solid var(--bg-0);
}
[data-theme="dark"] html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--logo-light), var(--logo-mid));
  border-color: var(--bg-0);
  background-clip: padding-box;
}
[data-theme="dark"] html {
  scrollbar-color: var(--logo-light) transparent;
}
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-0);
  color: var(--ink-1);
  font-family: var(--sans);
  font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
  position: relative;
  background:
    radial-gradient(1100px 700px at 92% -10%, rgba(103,112,184,0.20), transparent 60%),
    radial-gradient(900px 700px at -5% 25%, rgba(61,109,178,0.10), transparent 55%),
    radial-gradient(900px 700px at 50% 110%, rgba(168,170,204,0.18), transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, #ece9df 100%);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--logo-mid); color: #fff; }

/* ---- Animated background orbs (pastel) ---- */
.bg-fx { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bg-fx .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.6;
  mix-blend-mode: multiply;
}
.bg-fx .orb--a {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #c9d2f5, transparent 65%);
  top: -14%; left: 62%;
  animation: float-a 22s ease-in-out infinite;
}
.bg-fx .orb--b {
  width: 660px; height: 660px;
  background: radial-gradient(circle, #d6dcf2, transparent 65%);
  top: 38%; left: -12%;
  animation: float-b 28s ease-in-out infinite;
}
.bg-fx .orb--c {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #e8e0f3, transparent 65%);
  top: 78%; left: 58%;
  animation: float-c 26s ease-in-out infinite;
  opacity: 0.5;
}
@keyframes float-a { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-40px,60px) scale(1.08);} }
@keyframes float-b { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(80px,-40px) scale(0.95);} }
@keyframes float-c { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-60px,-50px) scale(1.1);} }

/* dot grid */
.bg-fx::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(40,38,83,0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
}

.grain {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 0.03;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain 8s steps(8) infinite;
}
@keyframes grain {
  0%{transform:translate(0,0);} 20%{transform:translate(-2%,3%);} 40%{transform:translate(3%,-2%);}
  60%{transform:translate(-3%,2%);} 80%{transform:translate(2%,-3%);} 100%{transform:translate(0,0);}
}

main, .nav, .footer { position: relative; z-index: 2; }

/* =========================================================
   Layout
   ========================================================= */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--logo-slate);
  display: inline-block;
  animation: line-grow 1.2s var(--ease-out) both;
}
@keyframes line-grow { from{width:0;opacity:0;} to{width:22px;opacity:1;} }

/* =========================================================
   Nav
   ========================================================= */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(245,243,236,0.85);
  border-bottom: 1px solid var(--line);
  transform: translateY(-110%);
  transition: transform .45s var(--ease-out), background .3s ease, border-color .3s ease;
}
.nav.is-stuck {
  transform: translateY(0);
  background: rgba(245,243,236,0.94);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  gap: 24px;
}
.nav__right {
  display: flex; align-items: center; gap: 16px;
}

.langswitch {
  display: inline-flex;
  align-items: center;
  height: 36px;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  box-sizing: border-box;
}

/* Theme toggle */
.theme-toggle {
  appearance: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.6);
  color: var(--ink-1);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  transition: background .25s ease, border-color .25s ease, transform .3s var(--ease-out);
}
.theme-toggle:hover {
  background: var(--logo-deep);
  color: #fff;
  border-color: var(--logo-deep);
  transform: rotate(20deg);
}
.theme-toggle__sun, .theme-toggle__moon {
  position: absolute;
  inset: 0; margin: auto;
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
}
.theme-toggle__moon { opacity: 0; transform: rotate(-180deg) scale(0.4); }
[data-theme="dark"] .theme-toggle__sun  { opacity: 0; transform: rotate(180deg) scale(0.4); }
[data-theme="dark"] .theme-toggle__moon { opacity: 1; transform: rotate(0) scale(1); }

/* Floating langswitch — shown when nav is hidden at top */
.floating-lang {
  position: fixed;
  top: 22px; right: clamp(20px, 4vw, 56px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity .35s var(--ease-out), transform .4s var(--ease-out);
}
.floating-lang .langswitch {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 4px 14px rgba(40,38,83,0.10), 0 0 0 1px rgba(40,38,83,0.04);
  border-color: rgba(40,38,83,0.10);
}
.floating-lang.is-hidden {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.langswitch__btn {
  appearance: none;
  background: transparent;
  border: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  padding: 0 12px 0 6px;
  height: 100%;
  border-radius: 999px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .25s var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.langswitch__btn img {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  display: block;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(40,38,83,0.1);
}
.langswitch__btn:hover { color: var(--ink-1); }
.langswitch__btn.is-active {
  background: var(--logo-deep);
  color: #fff;
}
@media (max-width: 600px) { .langswitch { display: none; } }
.nav__logo {
  display: flex; align-items: center; gap: 14px;
  height: 40px;
  transition: transform .3s var(--ease-out);
  position: relative;
}
.nav__logo:hover { transform: translateY(-1px); }
.nav__logo img { height: 32px; width: auto; }
.nav__logo-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-left: 14px;
  border-left: 1px solid var(--line);
  align-self: center;
}
@media (max-width: 600px) { .nav__logo-meta { display: none; } }

.nav__links {
  display: flex; gap: 28px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.nav__links a {
  position: relative; padding: 6px 2px;
  display: inline-flex; align-items: baseline; gap: 6px;
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--ink-1); }
.nav__links .nav__num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--logo-slate);
  letter-spacing: 0.08em;
}
.nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--logo-slate), var(--logo-light));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-in-out);
}
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.10em;
  padding: 9px 16px 9px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-1);
  transition: all .3s ease;
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.5);
}
.nav__cta .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #1f9d6b;
  box-shadow: 0 0 0 0 rgba(31,157,107,0.6);
  animation: pulse-green 2.2s ease-out infinite;
}
@keyframes pulse-green {
  0%{box-shadow:0 0 0 0 rgba(31,157,107,0.6);}
  70%{box-shadow:0 0 0 10px rgba(31,157,107,0);}
  100%{box-shadow:0 0 0 0 rgba(31,157,107,0);}
}
.nav__cta:hover {
  background: var(--logo-deep);
  color: #fff;
  border-color: var(--logo-deep);
}

@media (max-width: 880px) { .nav__links { display: none; } }

/* =========================================================
   Hero
   ========================================================= */

.hero {
  padding: clamp(56px, 9vh, 110px) 0 clamp(48px, 8vh, 96px);
  position: relative;
  overflow: hidden;
}

.hero__top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: clamp(20px, 3vw, 40px);
  flex-wrap: wrap; gap: 16px;
  padding-bottom: clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--line);
}
.hero__logo { display: inline-flex; align-items: center; transition: transform .3s var(--ease-out); }
.hero__logo:hover { transform: translateY(-1px); }
.hero__logo img {
  height: clamp(42px, 5vw, 64px);
  width: auto;
}
.hero__loc {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hero__h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(56px, 11vw, 168px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  margin: 0 0 clamp(40px, 6vw, 72px);
  color: var(--ink-1);
}
.hero__h1 .em {
  font-style: italic;
  font-weight: 400;
  font-family: var(--serif);
  background: linear-gradient(92deg,
    var(--logo-slate) 0%,
    var(--logo-light) 45%,
    var(--logo-mid) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 7s ease-in-out infinite;
  letter-spacing: -0.02em;
}
@keyframes shimmer { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }

.split-line { display: block; overflow: hidden; }
.split-line .ch {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: rise 1s var(--ease-out) forwards;
}
.split-line .ch.space { width: 0.28em; }

.rotator {
  display: inline-block;
  position: relative;
  min-width: 4.3ch;
  text-align: left;
}
.rotator span {
  position: absolute; left: 0; top: 0;
  opacity: 0;
  transform: translateY(40%);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
  white-space: nowrap;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(90deg, var(--logo-slate), var(--logo-light), var(--logo-mid));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shimmer 7s ease-in-out infinite;
}
.rotator span.is-active { opacity: 1; transform: translateY(0); }
.rotator span.is-out    { opacity: 0; transform: translateY(-40%); }
.rotator-placeholder {
  /* reserves real width for the rotator container */
  visibility: hidden !important;
  position: static !important;
  opacity: 1 !important;
  display: inline-block !important;
}

@keyframes rise { to { transform: translateY(0); opacity: 1; } }

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: end;
}
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; gap: 40px; } }

.hero__lede {
  color: var(--ink-2);
  font-size: clamp(16px, 1.35vw, 19px);
  max-width: 50ch;
  margin: 0 0 28px;
  grid-column: 1;
}
.hero__lede strong {
  color: var(--ink-1);
  font-weight: 600;
}
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; grid-column: 1; }

.hero__stack {
  grid-column: 2; grid-row: 1 / span 2;
  display: grid;
  gap: 12px;
  align-content: end;
  align-self: end;
}
@media (max-width: 980px) {
  .hero__stack { grid-column: 1; grid-row: auto; }
}

.chip {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease-out), box-shadow .4s ease, border-color .3s ease;
  color: var(--logo-deep);
  position: relative; overflow: hidden;
}
.chip:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-2);
}
.chip svg { width: 28px; height: 28px; color: var(--logo-slate); }
.chip span {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 17px;
}
.chip em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: var(--ink-3);
  text-transform: uppercase;
}
/* nudged offsets */
.chip--1 { margin-left: 0; }
.chip--2 { margin-left: 32px; }
.chip--3 { margin-left: 16px; }
.chip--4 { margin-left: 48px; }
@media (max-width: 980px) {
  .chip--1, .chip--2, .chip--3, .chip--4 { margin-left: 0; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all .3s var(--ease-out);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn--lg { padding: 18px 28px; font-size: 16px; }
.btn--primary {
  background: linear-gradient(180deg, var(--logo-mid), var(--logo-deep));
  color: #fff;
  box-shadow: 0 6px 16px rgba(40,38,83,0.18), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn--primary::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease-in-out);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(40,38,83,0.30), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn--ghost {
  background: rgba(255,255,255,0.6);
  color: var(--ink-1);
  border-color: var(--line-2);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: #ffffff;
  border-color: var(--logo-slate);
  color: var(--logo-deep);
}
.btn .arr { transition: transform .3s var(--ease-out); display: inline-block; }
.btn:hover .arr { transform: translateX(4px); }

/* hero strip (stats) */
/* hero strip — Investment-Panel + KPIs */
.hero__strip {
  margin-top: clamp(56px, 8vw, 96px);
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
@media (max-width: 880px) {
  .hero__strip { grid-template-columns: 1fr; }
}

.hero__strip-cell {
  padding: 28px 28px;
  display: flex; flex-direction: column; gap: 10px;
  justify-content: space-between;
  min-height: 130px;
  background: rgba(255,255,255,0.55);
  transition: background .4s ease;
}
.hero__strip-cell:hover { background: rgba(255,255,255,0.85); }

.hero__strip-cell--feature {
  position: relative;
  padding: 32px clamp(28px, 3vw, 44px);
  background:
    radial-gradient(500px 280px at 0% 100%, rgba(61,109,178,0.16), transparent 60%),
    linear-gradient(160deg, #f6f4ec 0%, #ffffff 100%);
  border-right: 1px solid var(--line);
  overflow: hidden;
  min-height: 220px;
}
.hero__strip-cell--feature::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--logo-slate), var(--logo-mid));
}
.hero__strip-cell--feature::after {
  content: "";
  position: absolute;
  right: -40px; bottom: -40px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,109,178,0.10), transparent 65%);
  pointer-events: none;
}

.hero__strip-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
@media (max-width: 720px) {
  .hero__strip-stats { grid-template-columns: repeat(2, 1fr); }
}
.hero__strip-stats .hero__strip-cell {
  background: rgba(255,255,255,0.5);
  padding: 22px 20px;
  min-height: 100px;
}
.hero__strip-stats .hero__strip-k {
  font-size: clamp(40px, 4.4vw, 56px);
  letter-spacing: -0.035em;
  font-weight: 800;
  line-height: 0.9;
  background: linear-gradient(140deg, var(--logo-deep) 0%, var(--logo-slate) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__strip-stats .hero__strip-k i {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.65em;
  margin-left: 2px;
  -webkit-text-fill-color: initial;
  background: linear-gradient(180deg, var(--logo-light), var(--logo-slate));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__strip-pre {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--logo-slate);
  display: inline-flex; align-items: center; gap: 10px;
}
.hero__strip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #1f9d6b;
  box-shadow: 0 0 0 4px rgba(31,157,107,0.18);
  flex-shrink: 0;
}

.hero__strip-k {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink-1);
  display: inline-flex; align-items: baseline; gap: 4px;
}
.hero__strip-cell--feature .hero__strip-k {
  font-size: clamp(56px, 7vw, 96px);
  letter-spacing: -0.045em;
  font-weight: 800;
  background: linear-gradient(140deg, var(--logo-deep) 0%, var(--logo-slate) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 0.9;
}
.hero__strip-sym {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.62em;
  margin-right: 6px;
  background: linear-gradient(180deg, var(--logo-slate), var(--logo-mid));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__strip-unit {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.32em;
  margin-left: 8px;
  align-self: center;
  letter-spacing: 0;
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
  background: none;
}
.hero__strip-k i {
  font-style: normal;
  color: var(--logo-slate);
  font-weight: 500;
  font-size: 0.55em;
}
.hero__strip-l {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero__strip-cell--feature .hero__strip-l {
  font-size: 12px;
  color: var(--ink-2);
}

.hero__cue {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0.8;
}
.hero__cue .bar {
  width: 1px; height: 36px;
  background: linear-gradient(180deg, var(--logo-slate), transparent);
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue {
  0%{transform:scaleY(0);transform-origin:top;}
  50%{transform:scaleY(1);transform-origin:top;}
  51%{transform:scaleY(1);transform-origin:bottom;}
  100%{transform:scaleY(0);transform-origin:bottom;}
}

/* =========================================================
   Marquee (oversized wordmarks)
   ========================================================= */

.marquee {
  padding: clamp(36px, 5vw, 56px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  background: var(--bg-tint);
}
.marquee__track {
  display: inline-flex;
  white-space: nowrap;
  animation: tick 48s linear infinite;
  gap: 0;
}
.marquee__row {
  display: inline-flex; align-items: center; gap: 48px;
  padding-right: 48px;
}
.marquee__row b {
  font-weight: 400;
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 26px);
  color: var(--logo-slate);
  opacity: 0.5;
}
.ml {
  display: inline-flex; align-items: center; gap: 16px;
  height: clamp(48px, 6vw, 72px);
  color: var(--logo-deep);
}
.ml img {
  height: 100%;
  width: auto;
  display: block;
}
.ml svg {
  height: 60%;
  width: auto;
  flex-shrink: 0;
}
.ml span {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--logo-deep);
}
.ml--cos span { color: var(--logo-mid); }
.ml--am  span { color: var(--logo-slate); }
.ml--elb span { color: var(--logo-deep); }
@keyframes tick { to { transform: translateX(-50%); } }

/* =========================================================
   Section heads
   ========================================================= */

.section { padding: clamp(56px, 8vh, 100px) 0; position: relative; }
.section__head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 5vw, 64px);
  margin-bottom: 64px;
  align-items: end;
}
@media (max-width: 880px) {
  .section__head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 40px; }
}
.section__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 5.2vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.032em;
  margin: 14px 0 0;
  text-wrap: balance;
  color: var(--ink-1);
}
.section__title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(90deg, var(--logo-slate), var(--logo-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section__lede {
  color: var(--ink-2);
  font-size: clamp(15px, 1.2vw, 18px);
  max-width: 62ch; margin: 0;
}

/* =========================================================
   About
   ========================================================= */

.about__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) { .about__grid { grid-template-columns: 1fr; } }
.about__card {
  --mx: 50%; --my: 50%;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: border-color .4s ease, transform .4s var(--ease-out), box-shadow .4s ease;
  box-shadow: var(--shadow-sm);
}
.about__card:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.about__card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(380px 220px at var(--mx) var(--my), rgba(103,112,184,0.16), transparent 65%);
  opacity: 0; transition: opacity .5s ease;
  pointer-events: none;
}
.about__card:hover::before { opacity: 1; }
.about__num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--logo-slate);
  letter-spacing: 0.12em;
  margin-bottom: 24px;
  display: inline-flex; align-items: center; gap: 8px;
}
.about__num::after { content: ""; width: 24px; height: 1px; background: var(--logo-slate); }
.about__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--ink-1);
}
.about__p { color: var(--ink-2); font-size: 15px; margin: 0; }

/* =========================================================
   Portfolio — 4 gleich große Karten (2×2)
   ========================================================= */

.bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr; }
}

.brand {
  --mx: 50%; --my: 50%;
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #ffffff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(28px, 2.8vw, 40px);
  transition: transform .5s var(--ease-in-out), border-color .4s ease, box-shadow .5s ease;
  isolation: isolate;
  color: var(--ink-1);
  box-shadow: var(--shadow-sm);
  min-height: 460px;
  cursor: pointer;
}

/* IT card spans full bento width as founder strip */
.brand--it {
  grid-column: 1 / -1;
  min-height: 320px;
}
.brand--it .brand__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
  margin-top: clamp(24px, 3vw, 36px);
}
.brand--it .brand__body > p { margin: 0; max-width: none; }
.brand--it .brand__wordmark { font-size: clamp(34px, 4vw, 56px); margin-bottom: 0; }
.brand--it .brand__bg {
  background:
    radial-gradient(700px 400px at 20% 0%, rgba(61,109,178,0.18), transparent 60%),
    radial-gradient(500px 380px at 100% 100%, rgba(103,112,184,0.14), transparent 60%),
    linear-gradient(135deg, #f1f3fb 0%, #ffffff 100%);
}
@media (max-width: 880px) {
  .brand--it .brand__body { grid-template-columns: 1fr; gap: 16px; }
}

.brand__wordmark-dot {
  color: var(--logo-slate);
  font-weight: 500;
  font-style: italic;
  font-family: var(--serif);
  margin-left: 2px;
}
.brand:focus-visible { outline: 2px solid var(--logo-slate); outline-offset: 4px; }
.brand__open-hint {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--logo-deep);
  transition: all .3s var(--ease-out);
  z-index: 2;
  backdrop-filter: blur(6px);
}
.brand__open-hint svg { width: 14px; height: 14px; }
.brand:hover .brand__open-hint {
  background: var(--logo-deep);
  color: #fff;
  border-color: var(--logo-deep);
  transform: rotate(45deg);
}
.brand:hover {
  transform: translateY(-5px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-lg);
}

.brand__bg {
  position: absolute; inset: 0;
  z-index: -2;
  transition: transform 1.4s var(--ease-out);
}
.brand:hover .brand__bg { transform: scale(1.04); }

.brand__spot {
  position: absolute; inset: 0;
  z-index: -1;
  background: radial-gradient(420px 320px at var(--mx) var(--my), rgba(255,255,255,0.7), transparent 60%);
  opacity: 0; transition: opacity .5s ease;
  pointer-events: none;
}
.brand:hover .brand__spot { opacity: 1; }

/* big SVG glyph */
.brand__glyph {
  position: absolute;
  top: -10px; right: -20px;
  width: 280px; height: 280px;
  opacity: 0.85;
  z-index: -1;
  transition: transform 1s var(--ease-out), opacity .5s ease;
}
.brand:hover .brand__glyph { transform: rotate(-4deg) scale(1.05); }
.brand__glyph--sm { width: 200px; height: 200px; top: -20px; right: -10px; }
.brand__glyph--wide {
  width: 380px; height: auto;
  top: auto; bottom: 36px; right: 36px;
  opacity: 0.7;
}

/* per-brand backgrounds */
.brand--arcademanager .brand__bg {
  background:
    radial-gradient(700px 500px at 80% 20%, rgba(61,109,178,0.18), transparent 60%),
    radial-gradient(500px 380px at 10% 90%, rgba(103,112,184,0.10), transparent 60%),
    linear-gradient(135deg, #f3f5fc 0%, #ffffff 100%);
}
.brand--cosmos .brand__bg {
  background:
    radial-gradient(500px 380px at 20% 80%, rgba(168,144,200,0.20), transparent 60%),
    radial-gradient(500px 380px at 85% 10%, rgba(103,112,184,0.18), transparent 60%),
    linear-gradient(135deg, #f7f0fa 0%, #ffffff 100%);
}
.brand--elbparty .brand__bg {
  background:
    radial-gradient(700px 500px at 80% 100%, rgba(80,170,200,0.20), transparent 60%),
    radial-gradient(500px 400px at 20% 0%, rgba(61,109,178,0.18), transparent 60%),
    linear-gradient(135deg, #eef6fa 0%, #fafdff 100%);
}
.brand--insertplay .brand__bg {
  background:
    radial-gradient(500px 380px at 100% 0%, rgba(230,180,110,0.18), transparent 60%),
    radial-gradient(500px 380px at 0% 100%, rgba(56,64,136,0.10), transparent 60%),
    linear-gradient(135deg, #fcf7ec 0%, #ffffff 100%);
}

.brand__head {
  display: flex; align-items: center; justify-content: space-between;
}
.brand__tag {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 8px;
}
.brand__tag .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--logo-slate);
  box-shadow: 0 0 0 0 rgba(61,109,178,0.5);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  0%{box-shadow:0 0 0 0 rgba(61,109,178,0.5);}
  70%{box-shadow:0 0 0 12px rgba(61,109,178,0);}
  100%{box-shadow:0 0 0 0 rgba(61,109,178,0);}
}
.brand__chip {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  letter-spacing: 0.10em;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
  text-transform: uppercase;
}

.brand__body { margin-top: clamp(40px, 6vw, 80px); }
.brand__body--wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: end;
}
@media (max-width: 880px) {
  .brand__body--wide { grid-template-columns: 1fr; gap: 18px; }
}

.brand__wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(36px, 4.5vw, 64px);
  letter-spacing: -0.04em;
  margin: 0 0 14px;
  line-height: 0.95;
  display: inline-block;
  position: relative;
  color: var(--logo-deep);
}
.brand__logo {
  height: clamp(48px, 5.5vw, 72px);
  width: auto;
  margin: 0 0 18px;
  display: block;
}
.brand--feature .brand__wordmark { font-size: clamp(40px, 5vw, 64px); }
.brand--wide .brand__wordmark { font-size: clamp(40px, 5vw, 72px); }
.brand__wordmark::after {
  content: "";
  position: absolute; left: 0; bottom: -10px;
  width: 32px; height: 2px;
  background: var(--logo-slate);
  transition: width .5s var(--ease-out);
}
.brand:hover .brand__wordmark::after { width: 96px; }

.brand__sub {
  color: var(--ink-2);
  margin: 22px 0 0;
  font-size: 15px;
  max-width: 42ch;
}

.brand__quote {
  font-family: var(--serif);
  font-style: italic;
  color: var(--logo-mid);
  font-size: 19px;
  margin: 18px 0 0;
  max-width: 38ch;
  line-height: 1.35;
}

.brand__pills {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
  align-self: end;
}
.brand__pills li {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  background: rgba(255,255,255,0.6);
}

.brand__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px dashed var(--line-2);
  gap: 12px;
}
.brand__meta { display: flex; gap: 22px; flex-wrap: wrap; }
.brand__meta div { display: flex; flex-direction: column; }
.brand__meta strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-1);
  letter-spacing: -0.01em;
}
.brand__meta strong i { font-style: normal; color: var(--logo-slate); font-weight: 500; }
.brand__meta span {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.brand__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-1);
  padding: 11px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  transition: all .3s var(--ease-out);
  white-space: nowrap;
  background: rgba(255,255,255,0.6);
}
.brand__link:hover {
  background: var(--logo-deep);
  color: #fff;
  border-color: var(--logo-deep);
}
.brand__link .arr { transition: transform .3s var(--ease-out); }
.brand__link:hover .arr { transform: translate(3px, -3px); }

/* =========================================================
   Capabilities — list of rows
   ========================================================= */

.caps__list { list-style: none; padding: 0; margin: 0; }
.caps__row {
  display: grid;
  grid-template-columns: 100px 1.2fr 2fr auto;
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
  padding: 32px 4px;
  border-top: 1px solid var(--line);
  transition: background .3s ease, padding .3s ease;
  position: relative;
}
.caps__row:last-child { border-bottom: 1px solid var(--line); }
.caps__row:hover {
  background: linear-gradient(90deg, transparent, rgba(61,109,178,0.04) 30%, rgba(61,109,178,0.04) 70%, transparent);
  padding-left: 16px;
}
@media (max-width: 720px) {
  .caps__row {
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto;
    gap: 8px 18px;
  }
  .caps__p, .caps__tag {
    grid-column: 1 / -1;
  }
  .caps__row:hover { padding-left: 8px; }
}

.caps__num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--logo-slate);
}
.caps__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 32px);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink-1);
}
.caps__p {
  color: var(--ink-2);
  font-size: 15.5px;
  margin: 0;
  max-width: 56ch;
}
.caps__tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--logo-deep);
  padding: 7px 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  transition: all .3s ease;
  white-space: nowrap;
}
.caps__row:hover .caps__tag {
  background: var(--logo-deep);
  color: #fff;
  border-color: var(--logo-deep);
}

/* =========================================================
   Presence / Map
   ========================================================= */

.presence__layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: stretch;
}
@media (max-width: 980px) {
  .presence__layout { grid-template-columns: 1fr; }
}

.presence__canvas {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 24px;
  background:
    radial-gradient(700px 400px at 80% 100%, rgba(61,109,178,0.08), transparent 60%),
    linear-gradient(160deg, #f9f7ee 0%, #ffffff 100%);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.map { width: 100%; height: auto; display: block; }

/* =========================================================
   DACH Map (Leaflet)
   ========================================================= */

.dach-map {
  width: 100%;
  height: 540px;
  border-radius: var(--radius-l);
  overflow: hidden;
  position: relative;
  z-index: 0;
}
@media (max-width: 720px) { .dach-map { height: 400px; } }

/* tile color treatment — desaturate + tint toward indigo */
.dach-map .leaflet-tile-pane {
  filter: saturate(0.55) brightness(1.02) contrast(0.96);
}
.dach-map .leaflet-container {
  background: #f4f1e6 !important;
  font-family: var(--sans);
  outline: none;
}
.dach-map .leaflet-control-attribution {
  background: rgba(255,255,255,0.7);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  padding: 4px 8px;
  border-radius: 6px 0 0 0;
}
.dach-map .leaflet-control-attribution a {
  color: var(--logo-slate);
}
.dach-map .leaflet-control-zoom {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.dach-map .leaflet-control-zoom a {
  background: #fff;
  color: var(--ink-1);
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 600;
}
.dach-map .leaflet-control-zoom a:hover {
  background: var(--logo-deep);
  color: #fff;
}
.dach-map .leaflet-control-zoom a:last-child { border-bottom: none; }

/* custom marker */
.vp-marker {
  position: relative;
  width: 0; height: 0;
}
.vp-marker__pin {
  position: absolute;
  left: -7px; top: -7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--logo-deep);
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(40,38,83,0.35), 0 0 0 0 rgba(61,109,178,0.4);
  animation: vp-pulse 2.4s ease-out infinite;
}
.vp-marker--lg .vp-marker__pin { width: 18px; height: 18px; left: -9px; top: -9px; }
.vp-marker--planned .vp-marker__pin {
  background: #fff;
  border: 2px dashed var(--logo-slate);
  animation: none;
  box-shadow: 0 4px 10px rgba(40,38,83,0.2);
}
@keyframes vp-pulse {
  0%   { box-shadow: 0 4px 12px rgba(40,38,83,0.35), 0 0 0 0 rgba(61,109,178,0.5); }
  70%  { box-shadow: 0 4px 12px rgba(40,38,83,0.35), 0 0 0 14px rgba(61,109,178,0); }
  100% { box-shadow: 0 4px 12px rgba(40,38,83,0.35), 0 0 0 0 rgba(61,109,178,0); }
}

.vp-marker__label {
  position: absolute;
  left: 14px; top: -14px;
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 12px;
  box-shadow: 0 6px 18px rgba(40,38,83,0.10);
  display: flex; flex-direction: column;
  gap: 1px;
}
.vp-marker__label strong {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
.vp-marker__label em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--logo-slate);
}
.vp-marker--planned .vp-marker__label em { color: #8a6a1a; }

.dach-map__legend-overlay {
  position: absolute;
  bottom: 16px; left: 16px;
  z-index: 400;
  display: flex; flex-direction: column;
  gap: 6px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.dlo__row {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dlo__row i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--logo-deep);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
  flex-shrink: 0;
}
.dlo__row--planned i {
  background: #fff;
  border: 1px dashed var(--logo-slate);
  box-shadow: none;
}

.pl__role--active {
  background: rgba(31,157,107,0.10);
  color: #1a7a52;
  border-color: rgba(31,157,107,0.20);
}
.pl__role--soon {
  background: rgba(212,160,56,0.12);
  color: #8a6a1a;
  border-color: rgba(212,160,56,0.22);
}

/* =========================================================
   Sourcing / Händler strip
   ========================================================= */

.sourcing {
  padding: 0 0 clamp(60px, 8vw, 100px);
}
.sourcing__card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  padding: 22px clamp(20px, 3vw, 36px);
  background:
    radial-gradient(500px 200px at 100% 50%, rgba(61,109,178,0.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbf9f0 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
@media (max-width: 720px) {
  .sourcing__card { grid-template-columns: 1fr; gap: 14px; }
}

.sourcing__pre {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--logo-slate);
  padding-right: 24px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .sourcing__pre { border-right: none; padding-right: 0; padding-bottom: 4px; }
}
.sourcing__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--logo-slate);
  box-shadow: 0 0 0 4px rgba(61,109,178,0.18);
}

.sourcing__body {
  display: flex; align-items: center; gap: 18px;
}
.sourcing__flag {
  border-radius: 10px;
  width: 56px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
  padding: 4px;
  background: #fff;
}
.sourcing__flag img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.sourcing__text { display: flex; flex-direction: column; gap: 2px; }
.sourcing__text strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
.sourcing__text em {
  font-style: normal;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.45;
}
.sourcing__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(61,109,178,0.10);
  color: var(--logo-deep);
  border: 1px solid rgba(61,109,178,0.18);
  white-space: nowrap;
  justify-self: end;
}

.presence__legend {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: #ffffff;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pl {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .3s ease;
}
.pl:last-child { border-bottom: none; }
.pl:hover, .pl.is-active {
  background: linear-gradient(90deg, rgba(61,109,178,0.06), transparent);
}
.pl.is-active { background: rgba(61,109,178,0.08); }

.pl__code {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--logo-deep);
  background: rgba(61,109,178,0.06);
  border: 1px solid rgba(61,109,178,0.15);
  border-radius: 8px;
  width: 44px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  transition: all .3s ease;
  overflow: hidden;
  padding: 4px;
}
.pl__code img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.pl.is-active .pl__code {
  background: rgba(61,109,178,0.18);
  border-color: var(--logo-slate);
}

.pl__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl__body strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
.pl__body em {
  font-style: normal;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}

.pl__role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(61,109,178,0.08);
  color: var(--logo-deep);
  border: 1px solid rgba(61,109,178,0.18);
  white-space: nowrap;
}

.presence__intl {
  margin-top: 24px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 22px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-l);
  background: rgba(255,255,255,0.4);
}
.presence__intl-pre {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--logo-slate);
  padding-right: 16px;
  border-right: 1px solid var(--line);
  margin-right: 4px;
}
@media (max-width: 600px) {
  .presence__intl-pre { border-right: none; padding-right: 0; }
}
.presence__intl-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px;
  color: var(--ink-1);
}
.presence__intl-chip strong {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(61,109,178,0.10);
  color: var(--logo-deep);
}


/* =========================================================
   Timeline
   ========================================================= */

.tl {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--line);
}
.tl__item {
  display: grid;
  grid-template-columns: 120px 32px 1fr;
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
  padding: 24px 4px;
  border-bottom: 1px solid var(--line);
  transition: background .3s ease, padding-left .3s ease;
}
.tl__item:hover {
  background: linear-gradient(90deg, transparent, rgba(61,109,178,0.05) 30%, rgba(61,109,178,0.05) 70%, transparent);
  padding-left: 16px;
}
.tl__year {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px);
  letter-spacing: -0.02em;
  background: linear-gradient(140deg, var(--logo-deep) 0%, var(--logo-slate) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  line-height: 1;
  display: inline-block;
}
.tl__year i {
  font-style: normal;
  display: inline-block;
  font-size: 1em;
  margin: 0 0 2px;
  opacity: 1;
  font-weight: 700;
}
.tl__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--logo-slate);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--logo-slate);
  justify-self: center;
}
.tl__item--upcoming .tl__dot {
  background: #fff;
  box-shadow: 0 0 0 2px var(--logo-slate);
}
.tl__body strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  display: block;
  margin-bottom: 4px;
}
.tl__body p {
  color: var(--ink-2);
  font-size: 14.5px;
  margin: 0;
  max-width: 60ch;
}
.tl__item--upcoming .tl__body strong::after {
  content: "geplant";
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(212,160,56,0.12);
  color: #8a6a1a;
  border: 1px solid rgba(212,160,56,0.22);
  margin-left: 10px;
  display: inline-block;
  vertical-align: middle;
}
@media (max-width: 720px) {
  .tl__item { grid-template-columns: 60px 20px 1fr; }
  .tl__year { font-size: 20px; }
}

/* =========================================================
   Management
   ========================================================= */

.mgr {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  background:
    radial-gradient(700px 350px at 100% 100%, rgba(61,109,178,0.10), transparent 60%),
    linear-gradient(160deg, #ffffff 0%, #fbf9f0 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-md);
}
@media (max-width: 880px) {
  .mgr { grid-template-columns: 100px 1fr; }
  .mgr__sig { grid-column: 1 / -1; flex-direction: row !important; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--line); }
}
.mgr__monogram {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--logo-mid), var(--logo-deep));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 8px 24px rgba(40,38,83,0.30), inset 0 1px 0 rgba(255,255,255,0.18);
  position: relative;
}
.mgr__monogram::after {
  content: ""; position: absolute; inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
}
.mgr__monogram span {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.03em;
}
.mgr__role {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--logo-slate);
}
.mgr__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -0.025em;
  margin: 8px 0 14px;
  color: var(--ink-1);
}
.mgr__bio {
  color: var(--ink-2);
  font-size: 15.5px;
  max-width: 60ch;
  margin: 0 0 22px;
}
.mgr__contact { display: flex; gap: 18px; flex-wrap: wrap; }
.mgr__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-1);
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  transition: all .3s var(--ease-out);
}
.mgr__link:hover {
  background: var(--logo-deep);
  color: #fff;
  border-color: var(--logo-deep);
}
.mgr__sig {
  display: flex; flex-direction: column;
  gap: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
}

/* =========================================================
   News / Presse
   ========================================================= */

.news__grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 880px) { .news__grid { grid-template-columns: 1fr; } }
.news__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 28px;
  display: flex; flex-direction: column;
  gap: 16px;
  transition: transform .4s var(--ease-out), box-shadow .4s ease, border-color .3s ease;
  box-shadow: var(--shadow-sm);
}
.news__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-2);
}
.news__meta {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.news__cat {
  padding: 5px 10px;
  border: 1px solid rgba(61,109,178,0.2);
  border-radius: 999px;
  color: var(--logo-deep);
  background: rgba(61,109,178,0.06);
}
.news__meta time { color: var(--ink-3); }
.news__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink-1);
}
.news__p { color: var(--ink-2); font-size: 14.5px; margin: 0; flex: 1; }
.news__link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--logo-slate);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .3s var(--ease-out);
}
.news__link:hover { gap: 12px; color: var(--logo-deep); }
.news__more {
  margin-top: 32px;
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}

/* =========================================================
   Partners
   ========================================================= */

.partners { padding: clamp(60px, 8vw, 100px) 0; }
.partners__head { text-align: center; margin-bottom: 32px; }
.partners__lede { font-size: 14.5px; color: var(--ink-2); margin: 12px 0 0; }
.partners__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
}
@media (max-width: 880px) { .partners__grid { grid-template-columns: repeat(2, 1fr); } }
.partners__grid li {
  background: #fff;
  padding: 28px 24px;
  text-align: center;
  color: var(--ink-2);
  min-height: 120px;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s ease, color .3s ease;
}
.partners__grid li img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  opacity: 0.75;
  filter: grayscale(0.6);
  transition: opacity .3s ease, filter .3s ease, transform .3s ease;
  color: var(--ink-1);
}
.partners__grid li:hover {
  background: rgba(61,109,178,0.06);
}
.partners__grid li:hover img {
  opacity: 1;
  filter: grayscale(0);
  color: var(--logo-deep);
  transform: translateY(-2px);
}
[data-theme="dark"] .partners__grid li { color: var(--ink-2); }
[data-theme="dark"] .partners__grid li img { color: var(--ink-2); }
[data-theme="dark"] .partners__grid li:hover { background: rgba(103,112,184,0.10); }
[data-theme="dark"] .partners__grid li:hover img { color: var(--logo-light); }

/* =========================================================
   FAQ
   ========================================================= */

.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); transition: background .3s ease; }
.faq__item[open] { background: linear-gradient(180deg, rgba(61,109,178,0.04), transparent); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 4px 22px 60px;
  position: relative;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 21px);
  letter-spacing: -0.015em;
  color: var(--ink-1);
  display: flex;
  align-items: center;
  transition: color .3s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before {
  content: "+";
  position: absolute;
  left: 4px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-weight: 400;
  font-size: 18px;
  color: var(--logo-slate);
  transition: all .35s var(--ease-out);
}
.faq__item[open] summary::before {
  content: "−";
  background: var(--logo-deep);
  color: #fff;
  border-color: var(--logo-deep);
  transform: rotate(180deg);
}
.faq__item summary:hover { color: var(--logo-deep); }
.faq__body {
  padding: 0 4px 24px 60px;
  color: var(--ink-2);
  font-size: 15.5px;
  max-width: 70ch;
}
.faq__body a {
  color: var(--logo-slate);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(61,109,178,0.4);
}
.faq__body a:hover { text-decoration-color: var(--logo-slate); }

/* =========================================================
   Careers
   ========================================================= */

.careers__card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 56px);
  padding: clamp(36px, 5vw, 64px);
  background:
    radial-gradient(700px 400px at 100% 100%, rgba(61,109,178,0.10), transparent 60%),
    linear-gradient(160deg, #ffffff 0%, #fbf9f0 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
@media (max-width: 880px) { .careers__card { grid-template-columns: 1fr; } }
.careers__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 4.5vw, 56px);
  letter-spacing: -0.028em;
  line-height: 1.0;
  margin: 14px 0 18px;
  color: var(--ink-1);
}
.careers__h em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(90deg, var(--logo-slate), var(--logo-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.careers__p { color: var(--ink-2); margin: 0 0 28px; max-width: 48ch; }
.careers__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.careers__open {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  align-self: end;
}
.careers__open li {
  background: rgba(255,255,255,0.7);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
  transition: background .3s ease, padding-left .3s ease;
  cursor: pointer;
}
.careers__open li:hover {
  background: #ffffff;
  padding-left: 22px;
}
.careers__open strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
.careers__placeholder {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 36px 32px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-m);
  background:
    radial-gradient(400px 200px at 100% 100%, rgba(61,109,178,0.08), transparent 60%),
    rgba(255,255,255,0.4);
  align-self: end;
}
.careers__placeholder-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(61,109,178,0.08);
  color: var(--logo-slate);
}
.careers__placeholder strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--ink-1);
}
.careers__placeholder em {
  font-style: normal;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 36ch;
}
.careers__placeholder em a {
  color: var(--logo-slate);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(61,109,178,0.4);
}
[data-theme="dark"] .careers__placeholder {
  background:
    radial-gradient(400px 200px at 100% 100%, rgba(103,112,184,0.16), transparent 60%),
    rgba(20,24,52,0.4);
  border-color: rgba(255,255,255,0.14);
}
[data-theme="dark"] .careers__placeholder-icon {
  background: rgba(103,112,184,0.15);
  color: var(--logo-light);
}
[data-theme="dark"] .careers__placeholder strong { color: var(--ink-1); }
[data-theme="dark"] .careers__placeholder em { color: var(--ink-2); }
[data-theme="dark"] .careers__placeholder em a { color: var(--logo-light); }

/* =========================================================
   Newsletter
   ========================================================= */

.newsletter { padding: 0 0 clamp(40px, 6vw, 80px); }
.nl__card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
  background: linear-gradient(160deg, var(--logo-deep) 0%, #1a1c44 100%);
  border-radius: var(--radius-l);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.nl__card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(500px 300px at 100% 0%, rgba(103,112,184,0.40), transparent 60%);
  pointer-events: none;
}
@media (max-width: 720px) { .nl__card { grid-template-columns: 1fr; gap: 24px; } }
.nl__card .eyebrow { color: var(--logo-light); }
.nl__card .eyebrow::before { background: var(--logo-light); }
.nl__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 10px 0 8px;
  position: relative;
}
.nl__h em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--logo-ice);
}
.nl__p {
  color: rgba(255,255,255,0.7);
  margin: 0;
  font-size: 14.5px;
  position: relative;
}
.nl__form {
  display: flex;
  gap: 8px;
  position: relative;
}
.nl__form input {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font: inherit;
  padding: 12px 16px;
  border-radius: 999px;
  outline: none;
  transition: border-color .3s ease, background .3s ease;
}
.nl__form input::placeholder { color: rgba(255,255,255,0.45); }
.nl__form input:focus {
  border-color: var(--logo-light);
  background: rgba(255,255,255,0.12);
}
.nl__form button {
  appearance: none;
  background: #fff;
  color: var(--logo-deep);
  border: none;
  font: inherit;
  font-weight: 500;
  padding: 12px 18px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .3s var(--ease-out);
}
.nl__form button:hover:not(:disabled) {
  background: var(--logo-light);
  color: #fff;
}
.nl__form button:disabled { opacity: 0.7; cursor: default; }
.nl__form button .arr { transition: transform .3s var(--ease-out); }
.nl__form button:hover:not(:disabled) .arr { transform: translateX(3px); }

/* =========================================================
   Cookie Banner
   ========================================================= */

.cookie {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 80;
  max-width: 720px;
  width: calc(100% - 32px);
  padding: 18px 22px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.cookie.is-shown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 600px) {
  .cookie { grid-template-columns: 1fr 1fr; }
  .cookie__text { grid-column: 1 / -1; }
}
.cookie__text {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.cookie__text strong { color: var(--ink-1); font-weight: 600; }
.cookie__text a { color: var(--logo-slate); text-decoration: underline; }
.cookie__btn {
  appearance: none;
  font: inherit;
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: 0.10em;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .25s var(--ease-out);
  white-space: nowrap;
}
.cookie__btn--ghost {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
}
.cookie__btn--ghost:hover { color: var(--ink-1); border-color: var(--ink-3); }
.cookie__btn--primary {
  background: var(--logo-deep);
  color: #fff;
  border: 1px solid var(--logo-deep);
}
.cookie__btn--primary:hover { background: var(--logo-mid); border-color: var(--logo-mid); }

.manifesto {
  padding: clamp(80px, 12vh, 140px) 0;
  position: relative;
  overflow: hidden;
}
.manifesto::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 500px at 50% 50%, rgba(103,112,184,0.10), transparent 60%);
  pointer-events: none;
}
.manifesto__inner {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(48px, 6vw, 80px) clamp(28px, 5vw, 64px) clamp(40px, 5vw, 60px);
  background:
    radial-gradient(700px 400px at 80% 100%, rgba(61,109,178,0.10), transparent 60%),
    radial-gradient(500px 300px at 0% 0%, rgba(103,112,184,0.10), transparent 60%),
    linear-gradient(160deg, #f7f4eb 0%, #ffffff 100%);
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.manifesto__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(40,38,83,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  pointer-events: none;
}
.manifesto__inner::after {
  /* big watermark V */
  content: "V";
  position: absolute;
  bottom: -40px; right: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(280px, 28vw, 420px);
  line-height: 0.8;
  color: var(--logo-deep);
  opacity: 0.04;
  font-weight: 400;
  pointer-events: none;
  user-select: none;
}

.manifesto__label {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--logo-slate);
  margin-bottom: 36px;
}
.manifesto__label::before,
.manifesto__label::after {
  content: "";
  width: 28px; height: 1px;
  background: var(--logo-slate);
  opacity: 0.6;
}

.manifesto__text {
  position: relative;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5.6vw, 84px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--logo-deep);
  max-width: 24ch;
  margin: 0 auto;
}
.manifesto__text em {
  font-style: italic;
  color: var(--logo-slate);
}
.manifesto__text .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40%);
}
.manifesto__text.in .word {
  animation: rise .9s var(--ease-out) forwards;
}

.manifesto__seal {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  margin: clamp(36px, 5vw, 56px) auto 24px;
  max-width: 520px;
}
.manifesto__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.manifesto__glyphs {
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--logo-slate);
}
.manifesto__glyphs svg {
  width: 22px; height: 22px;
  opacity: 0.7;
  transition: opacity .3s ease, transform .3s ease;
}
.manifesto__glyphs svg:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.manifesto__sig {
  position: relative;
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.manifesto__sig em {
  font-style: normal;
  color: var(--logo-slate);
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0;
  margin: 0 4px;
}

/* =========================================================
   Contact
   ========================================================= */

.contact { padding: clamp(80px, 12vh, 140px) 0 clamp(60px, 10vh, 100px); }
.contact__card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(36px, 5vw, 72px);
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(103,112,184,0.18), transparent 60%),
    linear-gradient(180deg, #ffffff, #fbfaf2);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: end;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
@media (max-width: 880px) { .contact__card { grid-template-columns: 1fr; gap: 32px; } }
.contact__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 4.8vw, 60px);
  letter-spacing: -0.028em;
  line-height: 1.0;
  margin: 16px 0 18px;
  color: var(--ink-1);
}
.contact__h em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(90deg, var(--logo-slate), var(--logo-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.contact__cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.contact__p { color: var(--ink-2); margin: 0 0 28px; max-width: 48ch; }
.contact__meta { display: grid; gap: 0; }
.contact__row {
  display: flex; flex-direction: column;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.contact__row:first-child { border-top: none; padding-top: 0; }
.contact__row span {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.contact__row a, .contact__row p {
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink-1);
  margin: 0;
  transition: color .2s ease;
}
.contact__row a:hover { color: var(--logo-slate); }

/* =========================================================
   Footer
   ========================================================= */

.footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 56px;
  font-size: 13px;
  color: var(--ink-3);
}
.footer__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 24px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.footer__logo img { height: 26px; width: auto; }
.footer__claim {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-2);
  margin: 0;
  text-align: right;
  line-height: 1.3;
}
.footer__claim em {
  font-style: italic;
  color: var(--logo-slate);
}

/* =========================================================
   Modal scrollbar — pretty
   ========================================================= */

.modal__panel {
  scrollbar-width: thin;
  scrollbar-color: var(--logo-light) transparent;
}
.modal__panel::-webkit-scrollbar {
  width: 10px;
}
.modal__panel::-webkit-scrollbar-track {
  background: transparent;
  margin: 14px 0;
}
.modal__panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--logo-slate), var(--logo-mid));
  border-radius: 999px;
  border: 3px solid #fff;
  background-clip: padding-box;
}
.modal__panel::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--logo-mid), var(--logo-deep));
  background-clip: padding-box;
  border: 3px solid #fff;
}
.footer__row {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px;
}
.footer__links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__links a { transition: color .2s ease; }
.footer__links a:hover { color: var(--ink-1); }

/* =========================================================
   Reveal-on-scroll
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .40s; }

/* =========================================================
   Brand Modal — Redesign
   ========================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 40px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s var(--ease-out), visibility 0s linear .35s;
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .35s var(--ease-out), visibility 0s linear 0s;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 48, 0.55);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  cursor: pointer;
}

.modal__panel {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  max-height: 92vh;
  background: var(--bg-0);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: auto;
  overflow-x: hidden;
  transform: translateY(20px) scale(0.98);
  opacity: 0;
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.modal.is-open .modal__panel { opacity: 1; transform: none; }
.modal__panel {
  scrollbar-width: thin;
  scrollbar-color: var(--logo-light) transparent;
}
.modal__panel::-webkit-scrollbar { width: 10px; }
.modal__panel::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
.modal__panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--logo-light), var(--logo-mid));
  border-radius: 999px;
  border: 3px solid var(--bg-0);
  background-clip: padding-box;
}

.modal__close, .modal__arrow {
  appearance: none;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink-1);
  transition: all .25s var(--ease-out);
}
.modal__close { position: absolute; top: 20px; right: 20px; z-index: 4; }
.modal__close:hover { background: var(--logo-deep); color: #fff; border-color: var(--logo-deep); transform: rotate(90deg); }
.modal__nav { position: absolute; top: 20px; left: 20px; z-index: 4; display: flex; gap: 8px; }
.modal__arrow:hover { background: var(--logo-deep); color: #fff; border-color: var(--logo-deep); }

.modal__body { padding: 0; }

/* Article wrapper */
.mb {
  position: relative;
  isolation: isolate;
}

/* Top breadcrumb */
.mb__top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px clamp(28px, 4vw, 56px) 0;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 14px;
  position: relative;
}
.mb__crumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mb__cat {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--logo-slate);
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(61,109,178,0.22);
  background: rgba(61,109,178,0.06);
}

/* Hero block */
.mb__hero {
  position: relative;
  margin: 0 clamp(28px, 4vw, 56px);
  border-radius: var(--radius-l);
  padding: clamp(36px, 5vw, 72px) clamp(28px, 4vw, 64px);
  overflow: hidden;
  isolation: isolate;
  min-height: 360px;
  display: flex; flex-direction: column; justify-content: space-between;
}

.mb__hero-bg {
  position: absolute; inset: 0;
  z-index: -2;
  opacity: 1;
}
.mb__hero-grain {
  position: absolute; inset: 0;
  z-index: -1;
  opacity: 0.4;
  background-image: radial-gradient(circle, rgba(40,38,83,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%);
  pointer-events: none;
}
.mb__hero-glyph {
  position: absolute;
  right: -40px; top: 50%;
  transform: translateY(-50%);
  width: clamp(280px, 36vw, 460px);
  height: clamp(280px, 36vw, 460px);
  z-index: -1;
  opacity: 0.85;
  pointer-events: none;
  animation: mb-glyph-in 1.2s var(--ease-out) both;
}
.mb__hero-glyph svg { width: 100%; height: 100%; display: block; }
@keyframes mb-glyph-in {
  from { opacity: 0; transform: translateY(-50%) rotate(-8deg) scale(0.85); }
  to   { opacity: 0.85; transform: translateY(-50%) rotate(0) scale(1); }
}

/* per-brand hero backgrounds */
.mb__hero--elbparty .mb__hero-bg {
  background:
    radial-gradient(800px 500px at 80% 100%, rgba(80,180,200,0.28), transparent 60%),
    radial-gradient(500px 400px at 20% 0%, rgba(61,109,178,0.22), transparent 60%),
    linear-gradient(135deg, #eaf4f9 0%, #fafdff 100%);
}
.mb__hero--cosmos .mb__hero-bg {
  background:
    radial-gradient(600px 420px at 20% 80%, rgba(168,144,200,0.30), transparent 60%),
    radial-gradient(500px 380px at 85% 10%, rgba(103,112,184,0.25), transparent 60%),
    linear-gradient(135deg, #f5edf9 0%, #ffffff 100%);
}
.mb__hero--insertplay .mb__hero-bg {
  background:
    radial-gradient(600px 380px at 100% 0%, rgba(230,180,110,0.22), transparent 60%),
    radial-gradient(500px 380px at 0% 100%, rgba(56,64,136,0.18), transparent 60%),
    linear-gradient(135deg, #fbf5e8 0%, #ffffff 100%);
}
.mb__hero--arcademanager .mb__hero-bg {
  background:
    radial-gradient(700px 500px at 80% 20%, rgba(61,109,178,0.24), transparent 60%),
    radial-gradient(500px 380px at 10% 90%, rgba(103,112,184,0.18), transparent 60%),
    linear-gradient(135deg, #eef1fc 0%, #ffffff 100%);
}
.mb__hero--it .mb__hero-bg {
  background:
    radial-gradient(700px 500px at 20% 0%, rgba(61,109,178,0.24), transparent 60%),
    radial-gradient(500px 380px at 100% 100%, rgba(103,112,184,0.20), transparent 60%),
    linear-gradient(135deg, #eef1fc 0%, #ffffff 100%);
}

/* Hero content */
.mb__hero-content {
  position: relative;
  max-width: 60%;
}
@media (max-width: 720px) {
  .mb__hero-content { max-width: 100%; }
  .mb__hero-glyph { opacity: 0.25; right: -120px; }
}

.mb__tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--logo-slate);
  margin-bottom: 22px;
}
.mb__tag i {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--logo-slate);
  box-shadow: 0 0 0 0 rgba(61,109,178,0.6);
  animation: pulse 2.2s ease-out infinite;
}

.mb__wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: -0.04em;
  line-height: 0.92;
  margin: 0 0 18px;
  color: var(--logo-deep);
  word-break: break-word;
}

.mb__claim {
  font-family: var(--serif);
  font-style: italic;
  color: var(--logo-mid);
  font-size: clamp(18px, 1.9vw, 24px);
  max-width: 32ch;
  margin: 0;
  line-height: 1.35;
}

/* Hero foot — model + CTA */
.mb__hero-foot {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  margin-top: clamp(28px, 4vw, 48px);
  padding-top: 20px;
  border-top: 1px solid rgba(40,38,83,0.12);
}
.mb__model {
  display: flex; flex-direction: column; gap: 2px;
}
.mb__model em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mb__model strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--ink-1);
}

.mb__cta-primary {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--logo-deep);
  color: #fff;
  border: 1px solid var(--logo-deep);
  transition: all .3s var(--ease-out);
  position: relative; overflow: hidden;
}
.mb__cta-primary::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease-in-out);
}
.mb__cta-primary:hover {
  background: var(--logo-mid);
  border-color: var(--logo-mid);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(40,38,83,0.30);
}
.mb__cta-primary:hover::after { transform: translateX(120%); }
.mb__cta-primary span { transition: transform .3s var(--ease-out); display: inline-block; }
.mb__cta-primary:hover span { transform: translate(3px, -3px); }

/* Body sections */
.mb__body {
  padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 56px) clamp(36px, 5vw, 56px);
}

.mb__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--logo-slate);
  margin: 0 0 14px;
  display: inline-flex; align-items: center; gap: 10px;
}
.mb__eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--logo-slate);
}

.mb__intro { margin-bottom: 36px; }
.mb__sub {
  color: var(--ink-2);
  font-size: clamp(15px, 1.3vw, 17px);
  max-width: 68ch;
  margin: 0;
  line-height: 1.65;
}

/* KPI strip */
.mb__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  margin-bottom: 40px;
}
@media (max-width: 720px) { .mb__facts { grid-template-columns: 1fr 1fr; } }
.mb__fact {
  padding: 22px 22px;
  background: #ffffff;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  transition: background .3s ease;
}
.mb__fact:hover { background: rgba(61,109,178,0.04); }
.mb__fact:nth-child(3n) { grid-column: span 1; }
@media (max-width: 720px) {
  .mb__fact:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}
.mb__fact-k {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(140deg, var(--logo-deep) 0%, var(--logo-slate) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.mb__fact-k i {
  font-style: normal;
  font-size: 0.6em;
  font-weight: 500;
  font-family: var(--serif);
}
.mb__fact-l {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Services list */
.mb__services { margin-bottom: 36px; }
.mb__service-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
}
@media (max-width: 720px) { .mb__service-list { grid-template-columns: 1fr; } }
.mb__service-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: #ffffff;
  font-size: 14.5px;
  color: var(--ink-1);
  transition: background .3s ease, padding-left .3s ease;
}
.mb__service-list li:hover {
  background: rgba(61,109,178,0.04);
  padding-left: 22px;
}
.mb__sv-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--logo-slate);
  background: rgba(61,109,178,0.08);
  border-radius: 8px;
  padding: 6px 8px;
  text-align: center;
  font-weight: 600;
}
.mb__sv-text { line-height: 1.5; }

/* Footer CTA bar */
.mb__foot {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  padding: 24px 26px;
  background:
    radial-gradient(500px 200px at 100% 50%, rgba(61,109,178,0.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbf9f0 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
.mb__foot-text { display: flex; flex-direction: column; gap: 4px; max-width: 56ch; }
.mb__foot-pre {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--logo-slate);
}
.mb__foot-text strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
.mb__cta-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-1);
  border: 1px solid var(--line-3);
  transition: all .3s var(--ease-out);
  white-space: nowrap;
}
.mb__cta-ghost:hover {
  background: var(--logo-deep);
  color: #fff;
  border-color: var(--logo-deep);
}
.mb__cta-ghost span { transition: transform .3s var(--ease-out); display: inline-block; }
.mb__cta-ghost:hover span { transform: translateX(4px); }

/* Dark mode */
[data-theme="dark"] .modal__panel { background: var(--bg-1); }
[data-theme="dark"] .modal__panel::-webkit-scrollbar-thumb { border-color: var(--bg-1); }
[data-theme="dark"] .modal__close,
[data-theme="dark"] .modal__arrow {
  background: rgba(20,24,52,0.85);
  border-color: rgba(255,255,255,0.10);
  color: var(--ink-1);
}
[data-theme="dark"] .modal__close:hover,
[data-theme="dark"] .modal__arrow:hover {
  background: var(--logo-light); color: var(--bg-0); border-color: var(--logo-light);
}
[data-theme="dark"] .mb__crumb { color: var(--ink-3); }
[data-theme="dark"] .mb__cat {
  background: rgba(103,112,184,0.12); color: var(--logo-light);
  border-color: rgba(103,112,184,0.30);
}
[data-theme="dark"] .mb__hero--elbparty .mb__hero-bg {
  background:
    radial-gradient(800px 500px at 80% 100%, rgba(80,180,200,0.22), transparent 60%),
    radial-gradient(500px 400px at 20% 0%, rgba(61,109,178,0.22), transparent 60%),
    linear-gradient(135deg, #0c1c38 0%, #050d22 100%);
}
[data-theme="dark"] .mb__hero--cosmos .mb__hero-bg {
  background:
    radial-gradient(600px 420px at 20% 80%, rgba(168,144,200,0.25), transparent 60%),
    radial-gradient(500px 380px at 85% 10%, rgba(103,112,184,0.25), transparent 60%),
    linear-gradient(135deg, #1a153d 0%, #0a0820 100%);
}
[data-theme="dark"] .mb__hero--insertplay .mb__hero-bg {
  background:
    radial-gradient(600px 380px at 100% 0%, rgba(230,180,110,0.20), transparent 60%),
    radial-gradient(500px 380px at 0% 100%, rgba(56,64,136,0.32), transparent 60%),
    linear-gradient(135deg, #161a3d 0%, #0a0c24 100%);
}
[data-theme="dark"] .mb__hero--arcademanager .mb__hero-bg,
[data-theme="dark"] .mb__hero--it .mb__hero-bg {
  background:
    radial-gradient(700px 500px at 80% 20%, rgba(61,109,178,0.28), transparent 60%),
    radial-gradient(500px 380px at 10% 90%, rgba(103,112,184,0.18), transparent 60%),
    linear-gradient(135deg, #131c44 0%, #07091e 100%);
}
[data-theme="dark"] .mb__wordmark { color: var(--ink-1); }
[data-theme="dark"] .mb__claim { color: var(--logo-ice); }
[data-theme="dark"] .mb__hero-foot { border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .mb__model strong { color: var(--ink-1); }
[data-theme="dark"] .mb__sub { color: var(--ink-2); }
[data-theme="dark"] .mb__facts,
[data-theme="dark"] .mb__service-list {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .mb__fact,
[data-theme="dark"] .mb__service-list li {
  background: var(--bg-2);
  color: var(--ink-1);
}
[data-theme="dark"] .mb__fact:hover,
[data-theme="dark"] .mb__service-list li:hover {
  background: rgba(103,112,184,0.10);
}
[data-theme="dark"] .mb__fact-k {
  background: linear-gradient(140deg, var(--logo-ice) 0%, var(--logo-light) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="dark"] .mb__sv-num {
  background: rgba(103,112,184,0.14);
  color: var(--logo-light);
}
[data-theme="dark"] .mb__foot {
  background:
    radial-gradient(500px 200px at 100% 50%, rgba(103,112,184,0.16), transparent 60%),
    linear-gradient(180deg, #131638 0%, #0a0c24 100%);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .mb__foot-text strong { color: var(--ink-1); }
[data-theme="dark"] .mb__cta-ghost {
  color: var(--ink-1);
  border-color: rgba(255,255,255,0.18);
}
[data-theme="dark"] .mb__cta-ghost:hover {
  background: var(--logo-light); color: var(--bg-0); border-color: var(--logo-light);
}

body.modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}