/* ============ RESET & BASE ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

:root {
  --bg: #181923;
  --bg-2: #20212d;
  --panel: #292a38;
  --ink: #f3f3f2;
  --ink-dim: #a5a5aa;
  --ink-faint: #6f6f76;
  --line: rgba(255,255,255,0.12);
  --line-soft: rgba(255,255,255,0.06);

  --studio: #ff2900;
  --studio-dark: #cc2000;
  --studio-rgb: 255,41,0;

  --software: #000dff;
  --software-dark: #000bb8;
  --software-rgb: 0,13,255;

  /* default = software blue; overridden per-division below */
  --accent: var(--software);
  --accent-dark: var(--software-dark);
  --accent-rgb: var(--software-rgb);

  --ff-display: 'Archivo', 'Space Grotesk', sans-serif;
  --ff-body: 'Space Grotesk', sans-serif;
  --nav-top: clamp(8px, 1.6vw, 14px);
  /* One consistent breathing space around every regular page surface. */
  --page-gutter: clamp(20px, 3vw, 52px);
}

body.theme-studio { --accent: var(--studio); --accent-dark: var(--studio-dark); --accent-rgb: var(--studio-rgb); }
body.theme-software { --accent: var(--software); --accent-dark: var(--software-dark); --accent-rgb: var(--software-rgb); }

/* Default stays dark. This class is only added after an explicit user choice. */
body.light-mode {
  --bg: #f2f2ee;
  --bg-2: #e8e8e3;
  --panel: #ffffff;
  --ink: #17171b;
  --ink-dim: #55555d;
  --ink-faint: #7a7a82;
  --line: rgba(23,23,27,0.15);
  --line-soft: rgba(23,23,27,0.08);
}

html { scroll-behavior: smooth; overflow-x: clip; width: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-body);
  overflow-x: clip;
  width: 100%;
  cursor: default;
}

html { scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border: 2px solid var(--bg); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dark); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
section { position: relative; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }

/* Text links are always recognisable: the active division colour plus a
   measured underline. Navigation and button treatments keep their own UI. */
main p a,
main li a,
.quote-block__name,
.footer__links a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color .2s ease, text-decoration-thickness .2s ease;
}
main p a:hover,
main li a:hover,
.quote-block__name:hover,
.footer__links a:hover { color: var(--accent-dark); text-decoration-thickness: 3px; }

::selection { background: var(--accent); color: #fff; }

.wrap { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }

/* Keep the actual page canvas away from the viewport edge.  Padding alone
   only moved its text; this makes the margin apply to every page section. */
main:not(.legal-wrap) {
  width: calc(100% - (2 * var(--page-gutter)));
  margin-inline: var(--page-gutter);
}
main:not(.legal-wrap) > .wrap { padding-left: 0; padding-right: 0; }

/* ============ PLACEHOLDER (drop-in slot for real images/graphics) ============ */
.placeholder {
  position: relative; overflow: hidden; border-radius: 20px;
  background: repeating-linear-gradient(135deg, var(--panel) 0 16px, var(--bg-2) 16px 32px);
  border: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: flex-start;
  color: var(--ink-faint); transition: transform .2s ease; will-change: transform;
}
.placeholder__label {
  padding: 14px 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(24,24,27,0.75); backdrop-filter: blur(4px); color: var(--ink-dim);
}

/* ============ INTRO ============ */
.intro {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity .8s ease, transform .8s ease;
}
.intro.done { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.intro__content { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; width: 100%; padding: 0 3vw; }
.intro__ring {
  position: absolute; top: 50%; left: 50%; width: 40px; height: 40px;
  border: 1.5px solid var(--accent); border-radius: 50%;
  transform: translate(-50%, -70%) scale(0.4); opacity: 0;
}
@keyframes introRing { 0% { opacity: 0; transform: translate(-50%, -70%) scale(0.4); } 25% { opacity: .8; } 100% { opacity: 0; transform: translate(-50%, -70%) scale(6); } }
@keyframes introMarkGlow {
  0% { filter: drop-shadow(0 0 0 rgba(var(--accent-rgb),0)); }
  45% { filter: drop-shadow(0 0 26px rgba(var(--accent-rgb),0.85)); }
  100% { filter: drop-shadow(0 0 0 rgba(var(--accent-rgb),0)); }
}

.intro__mark {
  display: flex; justify-content: center; width: 100%;
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(40px, 13vw, 200px); color: #fff; letter-spacing: -0.015em;
  white-space: nowrap; line-height: 1;
  opacity: 0; transform: scale(.85); filter: blur(6px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1), filter .6s ease;
}
.intro__mark.in { opacity: 1; transform: scale(1); filter: blur(0); }
.intro__mark span.im-accent { color: var(--accent); }
body.light-mode .intro__mark { color: #17171b; }
@media (max-width: 480px) {
  .intro__mark { font-size: clamp(30px, 12vw, 46px); }
}

.intro__tagline {
  margin-top: 16px; color: var(--ink-dim); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease;
}
.intro__tagline.in { opacity: 1; transform: translateY(0); }

.intro__bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--line-soft); }
.intro__bar span { display: block; height: 100%; width: 0%; background: var(--accent); transition: width 1s cubic-bezier(.65,0,.35,1); }
.intro__bar.fill span { width: 100%; }

/* ============ FIRST-VISIT VIDEO (vertical, phone-like player) ============ */
.welcome-video {
  position: fixed; inset: 0; z-index: 1950; display: grid; place-items: center;
  padding: clamp(18px, 4vw, 52px); background: rgba(24,24,27,.94);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s ease, visibility .5s step-end;
}
.welcome-video.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .5s ease; }
/* The video now lives in section 01 / Über Risi, never as a first-visit overlay. */
body.home .welcome-video { display: none !important; }
.welcome-video__device {
  position: relative; width: min(74svh, 580px); aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 28px; background: #060608; border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 28px 90px rgba(0,0,0,.6), 0 0 0 8px rgba(255,255,255,.035);
  transform: translateY(24px) scale(.96); transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.welcome-video.open .welcome-video__device { transform: translateY(0) scale(1); }
.welcome-video__media { width: 100%; height: 100%; display: block; object-fit: cover; background: #060608; transform: scale(1.1); cursor: pointer; }
.welcome-video__controls { position: absolute; right: 14px; bottom: 76px; z-index: 2; display: grid; gap: 8px; }
.welcome-video__control { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(8,8,11,.64); backdrop-filter: blur(14px); color: #fff; font: 700 14px/1 var(--ff-body); }
.welcome-video__control:hover { background: #fff; color: var(--bg); }
.welcome-video__bar {
  position: absolute; left: 14px; right: 14px; bottom: 14px; height: 40px; z-index: 1;
  display: flex; align-items: center; gap: 10px; padding: 0 12px; overflow: hidden;
  border-radius: 999px; background: rgba(8,8,11,.64); backdrop-filter: blur(14px);
}
.welcome-video__scrubber { flex: 1; min-width: 0; accent-color: var(--accent); cursor: pointer; }
.welcome-video__time { color: rgba(255,255,255,.78); font: 700 10px/1 var(--ff-body); letter-spacing: .06em; min-width: 30px; text-align: right; }
.welcome-video__skip { position: absolute; top: 14px; right: 14px; z-index: 2; border: 0; border-radius: 999px; background: rgba(8,8,11,.64); backdrop-filter: blur(14px); color: #fff; padding: 11px 14px; font: 700 11px/1 var(--ff-body); letter-spacing: .08em; text-transform: uppercase; }
.welcome-video__skip:hover { background: #fff; color: var(--bg); }

/* ============ CURSOR ============ */
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 16px; height: 16px;
  border-radius: 50%; border: 1.5px solid var(--accent);
  pointer-events: none; z-index: 1000;
  transform: translate(-50%, -50%);
  transition: width .2s, height .2s, opacity .2s, background .2s, border-color .2s;
  opacity: 0; mix-blend-mode: difference;
}
@media (hover: hover) and (pointer: fine) { .cursor-dot { opacity: 1; } }
.cursor-dot.hover { width: 42px; height: 42px; background: rgba(var(--accent-rgb),0.35); }

/* ============ NAV ============ */
.nav { position: static; }
.logo-copy { font-size: 0.32em; vertical-align: top; margin-left: 3px; opacity: .85; color: var(--accent); }

.nav__logo-risi, .nav__logo-works {
  position: fixed; top: calc(var(--nav-top) + 1px); z-index: 100;
  font-family: var(--ff-display); font-weight: 900; line-height: 1;
  font-size: clamp(26px, 3.6vw, 44px); letter-spacing: -0.01em; white-space: nowrap;
  transform-origin: 0% 0%; opacity: 1;
  transition: top .55s cubic-bezier(.4,0,.2,1), left .55s cubic-bezier(.4,0,.2,1),
              transform .6s cubic-bezier(.4,0,.2,1), opacity .55s ease, color .3s ease;
}
.nav__logo-risi { left: var(--page-gutter); color: #fff; }
.nav__logo-works { left: calc(var(--page-gutter) + var(--nav-logo-risi-w, 130px)); color: var(--accent); }
.nav__logo-sub {
  position: fixed; top: calc(var(--nav-top) + 1px); z-index: 100;
  left: calc(var(--page-gutter) + var(--nav-logo-total-w, 210px) + 12px);
  font-family: var(--ff-body); font-weight: 700; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); padding-left: 12px; border-left: 1px solid var(--line);
  transition: opacity .3s ease;
}
body.docked .nav__logo-sub, body.footer-near .nav__logo-sub { opacity: 0; }
body.home .nav__logo-risi, body.home .nav__logo-works { font-size: clamp(30px, 4.2vw, 50px); top: calc(var(--nav-top) + 15px); }

/* hub only: tagline sits where nav__logo-sub would, copyright mark hides
   to make room for it and returns once the tagline's slot is no longer needed */
.nav__tagline {
  position: fixed; top: calc(var(--nav-top) + 14px); z-index: 100;
  left: calc(var(--page-gutter) + var(--nav-logo-total-w, 210px) + 16px);
  font-size: 13px; color: var(--ink-dim); max-width: 320px; line-height: 1.4;
  opacity: 0; transform: translateY(4px);
  transition: opacity .4s ease .15s, transform .4s ease .15s;
}
body.home:not(.docked):not(.footer-near) .nav__tagline { opacity: 1; transform: translateY(0); }
body.home .nav__logo-works .logo-copy { opacity: 0; transition: opacity .3s ease .2s; }
body.home.docked .nav__logo-works .logo-copy, body.home.footer-near .nav__logo-works .logo-copy { opacity: .85; }
@media (max-width: 1100px) { .nav__tagline { display: none; } }
/* the tagline occupies the same visual row as the centre nav links, give it
   the floor at the top of the hub page (only where the tagline actually
   shows), nav links return once docked or once we're back below that width */
@media (min-width: 1101px) {
  body.home:not(.docked) .nav__links { opacity: 0; pointer-events: none; }
}
@media (max-width: 480px) {
  .nav__logo-risi, .nav__logo-works,
  body.home .nav__logo-risi, body.home .nav__logo-works {
    font-size: clamp(18px, 6.4vw, 24px);
  }
  .nav__logo-sub { display: none; }
}
.nav__logo-risi.fused, .nav__logo-works.fused { opacity: 0; }

body.docked .nav__logo-risi { top: 100%; left: 0; transform: rotate(-90deg); }
body.docked .nav__logo-works {
  left: 0; transform: rotate(-90deg);
  top: calc(100% - var(--nav-logo-risi-w, 130px));
}
body.docked .nav__logo-risi.fused,
body.docked .nav__logo-works.fused {
  transform: rotate(0deg) translate(var(--fuse-dx, 0), var(--fuse-dy, 0)) scale(0.5);
}

.nav__links {
  position: fixed; top: var(--nav-top); left: 50%; transform: translateX(-50%);
  z-index: 100; display: flex; align-items: center; gap: 28px;
  font-size: 14px; font-weight: 600; padding-top: 10px;
  opacity: 1; transition: opacity .4s ease;
}
body.docked .nav__links, body.footer-near .nav__links { opacity: 0; pointer-events: none; }
.nav__links a { position: relative; padding: 4px 0; color: var(--ink-dim); transition: color .2s; }
.nav__links a:hover { color: #fff; }

.nav__right {
  position: fixed; top: var(--nav-top); right: var(--page-gutter);
  bottom: auto; left: auto; z-index: 100; opacity: 1; pointer-events: auto;
  display: flex; align-items: center; gap: 14px; padding: 0; border-radius: 999px;
  transition: top .55s cubic-bezier(.4,0,.2,1), bottom .55s cubic-bezier(.4,0,.2,1),
              right .55s cubic-bezier(.4,0,.2,1), left .55s cubic-bezier(.4,0,.2,1),
              background .35s ease, box-shadow .35s ease, padding .35s ease, opacity .4s ease;
}
body.footer-near .nav__right,
body.footer-near .nav__burger { opacity: 0; pointer-events: none; }
.lang-switch { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; transition: border-color .35s ease; }
.lang-btn { border: none; background: none; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; padding: 6px 12px; border-radius: 999px; color: var(--ink-dim); transition: background .2s, color .2s; }
.lang-btn.active { background: #fff; color: var(--bg); }
/* Sun/moon day-night switch. The inner track keeps its original 90x50 design
   size and is scaled down as a whole so every hand-placed crater and star
   keeps its proportions; the outer .theme-toggle is just the nav-sized frame
   that centers it. Unchecked = day (sun), checked = night (moon) = dark mode. */
.theme-toggle__input { position: absolute; left: -9999px; }
.theme-toggle {
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  position: relative; width: 50px; height: 28px; flex: none;
}
.theme-toggle__input:focus-visible + .theme-toggle { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; }
.theme-toggle__track {
  position: relative; flex: none; width: 90px; height: 50px;
  background-color: #83d8ff; border-radius: 84px; transform: scale(.55);
  transition: background-color 200ms cubic-bezier(.445,.05,.55,.95), transform .25s ease;
}
.theme-toggle:hover .theme-toggle__track { transform: scale(.6); }
.theme-toggle__handler {
  display: block; position: absolute; z-index: 1; top: 3px; left: 3px;
  width: 44px; height: 44px; background-color: #ffcf96; border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  transition: all 400ms cubic-bezier(.68,-.55,.265,1.55);
  transform: rotate(-45deg);
}
.theme-toggle__crater { position: absolute; background-color: #e8cda5; opacity: 0; transition: opacity 200ms ease-in-out; border-radius: 100%; }
.theme-toggle__crater--1 { top: 18px; left: 10px; width: 4px; height: 4px; }
.theme-toggle__crater--2 { top: 28px; left: 22px; width: 6px; height: 6px; }
.theme-toggle__crater--3 { top: 10px; left: 25px; width: 8px; height: 8px; }
.theme-toggle__star { position: absolute; background-color: #fff; border-radius: 50%; transition: all 300ms cubic-bezier(.445,.05,.55,.95); }
.theme-toggle__star--1 { top: 10px; left: 35px; z-index: 0; width: 30px; height: 3px; }
.theme-toggle__star--2 { top: 18px; left: 28px; z-index: 1; width: 30px; height: 3px; }
.theme-toggle__star--3 { top: 27px; left: 40px; z-index: 0; width: 30px; height: 3px; }
.theme-toggle__star--4,
.theme-toggle__star--5,
.theme-toggle__star--6 { opacity: 0; transition: all 300ms 0s cubic-bezier(.445,.05,.55,.95); }
.theme-toggle__star--4 { top: 16px; left: 11px; z-index: 0; width: 2px; height: 2px; transform: translate3d(3px,0,0); }
.theme-toggle__star--5 { top: 32px; left: 17px; z-index: 0; width: 3px; height: 3px; transform: translate3d(3px,0,0); }
.theme-toggle__star--6 { top: 36px; left: 28px; z-index: 0; width: 2px; height: 2px; transform: translate3d(3px,0,0); }

.theme-toggle__input:checked + .theme-toggle .theme-toggle__track { background-color: #749dd6; }
.theme-toggle__input:checked + .theme-toggle .theme-toggle__handler { background-color: #ffe5b5; transform: translate3d(40px,0,0) rotate(0); }
.theme-toggle__input:checked + .theme-toggle .theme-toggle__crater { opacity: 1; }
.theme-toggle__input:checked + .theme-toggle .theme-toggle__star--1 { width: 2px; height: 2px; }
.theme-toggle__input:checked + .theme-toggle .theme-toggle__star--2 { width: 4px; height: 4px; transform: translate3d(-5px,0,0); }
.theme-toggle__input:checked + .theme-toggle .theme-toggle__star--3 { width: 2px; height: 2px; transform: translate3d(-7px,0,0); }
.theme-toggle__input:checked + .theme-toggle .theme-toggle__star--4,
.theme-toggle__input:checked + .theme-toggle .theme-toggle__star--5,
.theme-toggle__input:checked + .theme-toggle .theme-toggle__star--6 { opacity: 1; transform: translate3d(0,0,0); }
.theme-toggle__input:checked + .theme-toggle .theme-toggle__star--4 { transition: all 300ms 200ms cubic-bezier(.445,.05,.55,.95); }
.theme-toggle__input:checked + .theme-toggle .theme-toggle__star--5 { transition: all 300ms 300ms cubic-bezier(.445,.05,.55,.95); }
.theme-toggle__input:checked + .theme-toggle .theme-toggle__star--6 { transition: all 300ms 400ms cubic-bezier(.445,.05,.55,.95); }

.nav__cta {
  background: var(--accent); color: #fff; padding: 10px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; transition: background .2s, transform .2s;
  white-space: nowrap;
}
.nav__cta:hover { background: #fff; color: var(--bg); transform: translateY(-1px); }

.nav__burger {
  display: none; position: fixed; top: var(--nav-top); right: var(--page-gutter); z-index: 210;
  width: 40px; height: 40px; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 0;
  transition: top .55s cubic-bezier(.4,0,.2,1), bottom .55s cubic-bezier(.4,0,.2,1), right .55s cubic-bezier(.4,0,.2,1);
}
.nav__burger-line { display: block; width: 24px; height: 2px; background: #fff; transition: transform .3s ease, opacity .2s ease; }
body.docked .nav__burger { top: auto; bottom: 22px; right: 22px; }
.nav__burger.open .nav__burger-line--top { transform: translateY(7px) rotate(45deg); }
.nav__burger.open .nav__burger-line--mid { opacity: 0; }
.nav__burger.open .nav__burger-line--bottom { transform: translateY(-7px) rotate(-45deg); }

body.docked .nav__right { top: auto; bottom: 22px; right: 22px; }

.scroll-top {
  position: fixed; bottom: 22px; right: 22px; z-index: 100;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display); font-size: 20px; font-weight: 700; line-height: 1;
  opacity: 0; pointer-events: none; transform: scale(.7);
  transition: opacity .4s ease, transform .4s cubic-bezier(.4,0,.2,1), background .2s ease;
}
body.footer-near .scroll-top { opacity: 1; pointer-events: auto; transform: scale(1); }
.scroll-top:hover { background: #fff; color: var(--bg); transform: scale(1.06); }

@media (min-width: 901px) {
  body.docked .nav__right {
    background: rgba(32,32,36,0.92); backdrop-filter: blur(12px);
    padding: 8px; border: 1px solid var(--line); border-radius: 999px;
  }
  body.docked .lang-btn.active { background: var(--accent); color: #fff; }
}

.mobile-menu {
  position: fixed; inset: 0; background: var(--bg); z-index: 190;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px;
  padding: 0 32px; transform: translateY(-100%); transition: transform .4s cubic-bezier(.65,0,.35,1);
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a { font-family: var(--ff-display); font-weight: 800; font-size: 30px; color: #fff; }
.mobile-menu__lang { display: flex; gap: 10px; margin-top: 16px; }
.mobile-menu__lang .lang-btn { border: 1px solid var(--line); padding: 8px 16px; color: #fff; }
.mobile-menu__lang .lang-btn.active { background: var(--accent); color: #fff; }

@media (max-width: 900px) {
  .nav__links, .nav__right .lang-switch, .nav__right .theme-toggle, .nav__right .nav__cta { display: none; }
  .nav__burger { display: flex; }
}

/* Text and controls which were deliberately white in dark mode stay legible
   on the light canvas without changing their dark-mode look. */
body.light-mode .nav__logo-risi,
body.light-mode .nav__burger-line,
body.light-mode .tile__title,
body.light-mode .tile__link,
body.light-mode .section-title,
body.light-mode .sticky-scroll__pin h3,
body.light-mode .subchapter__head h3,
body.light-mode .feature-row__label,
body.light-mode .timeline__body h3,
body.light-mode .quote-block__text,
body.light-mode .contact__title,
body.light-mode .hero__mark,
body.light-mode .hero__sub strong,
body.light-mode .btn--ghost,
body.light-mode .divider__title,
body.light-mode .risi-chapter h1,
body.light-mode .risi-chapter h2,
body.light-mode .risi-timeline__item h3 { color: var(--ink); }
body.light-mode .tile__body { background: linear-gradient(0deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.68) 65%, transparent 100%); }
body.light-mode .tile__text { color: var(--ink-dim); }
body.light-mode .placeholder { background: var(--panel); }
body.light-mode .mobile-menu { background: var(--bg); }
body.light-mode .mobile-menu a,
body.light-mode .mobile-menu__lang .lang-btn { color: var(--ink); }

/* ============ FLOATING CHAPTER NAV ============ */
.chapter-nav {
  position: fixed; right: 28px; top: 50%; transform: translateY(-50%) translateX(20px);
  z-index: 90; display: flex; flex-direction: column; gap: 4px;
  opacity: 0; pointer-events: none; transition: opacity .4s ease, transform .4s ease;
}
.chapter-nav.visible { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.chapter-nav a { display: flex; align-items: center; justify-content: flex-end; gap: 11px; padding: 9px 11px; border-radius: 999px; }
.chapter-nav__num { font-family: var(--ff-display); font-weight: 800; font-size: 14px; color: var(--ink-faint); transition: color .25s; }
.chapter-nav__label {
  font-size: 14px; font-weight: 600; color: var(--ink-faint);
  max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s ease, opacity .3s ease, color .25s;
  opacity: 0;
}
.chapter-nav a:hover .chapter-nav__label,
.chapter-nav a.active .chapter-nav__label { max-width: 160px; opacity: 1; }
.chapter-nav a.active .chapter-nav__num,
.chapter-nav a.active .chapter-nav__label,
.chapter-nav a:hover .chapter-nav__num { color: var(--accent); }

@media (max-width: 1100px) { .chapter-nav { display: none; } }

/* ============ HUB HERO (full viewport: intro text + two division tiles) ============ */
.hub-hero {
  min-height: 100svh; display: flex; flex-direction: column;
  padding: calc(var(--nav-top) + 90px) 0 clamp(20px, 4vw, 40px);
}
.hero::after {
  content: 'SCROLL ↓'; position: absolute; left: calc(var(--page-gutter) + 18px); bottom: clamp(18px, 3vw, 36px);
  color: var(--ink-dim); font: 800 10px/1 var(--ff-body); letter-spacing: .16em;
  animation: scrollCue 1.5s cubic-bezier(.65,0,.35,1) infinite;
  transition: opacity .35s ease;
}
.hero::before { content: ''; position: absolute; z-index: 1; left: var(--page-gutter); bottom: clamp(18px, 3vw, 36px); width: 1px; height: 26px; background: var(--accent); transform-origin: bottom; animation: scrollLine 1.5s cubic-bezier(.65,0,.35,1) infinite; transition: opacity .35s ease; }
body.scrolled .hero::after, body.scrolled .hero::before { animation: none; opacity: 0; pointer-events: none; }
@keyframes scrollCue { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(6px); opacity: 1; } }
@keyframes scrollLine { 0%, 100% { transform: scaleY(.28); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero::after { animation: none; } }
.hub-hero__intro {
  display: flex; justify-content: flex-end; align-items: flex-start; gap: 24px;
  padding-bottom: clamp(30px, 6vw, 70px);
}
.hub-hero__mobile-tagline { display: none; font-size: 15px; line-height: 1.5; color: var(--ink-dim); max-width: 34ch; }
.hub-hero__label {
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
  padding-top: 4px; white-space: nowrap; transition: color .2s ease;
}
.hub-hero__label:hover { color: var(--accent); }
.hub-hero__intro-links { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hub-hero__about-link { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding-top: 4px; white-space: nowrap; transition: color .2s ease; }
.hub-hero__about-link:hover { color: var(--accent); }
@media (max-width: 1100px) {
  .hub-hero__intro { justify-content: space-between; }
  .hub-hero__mobile-tagline { display: block; }
}
@media (max-width: 560px) {
  .hub-hero__intro { flex-direction: column; align-items: flex-start; }
  .hub-hero__intro-links { align-items: flex-start; gap: 10px; }
}
.hub-hero__tiles { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-height: 0; }
@media (max-width: 860px) {
  .hub-hero { min-height: 0; }
  .hub-hero__tiles { grid-template-columns: 1fr; }
}

/* ============ DIVISION TILE (image card w/ overlay label) ============ */
.tile {
  position: relative; overflow: hidden; padding: 0; border-radius: 24px;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 340px; background: var(--panel); border: 1px solid var(--line);
  transition: transform .3s ease;
}
.tile:hover { transform: translateY(-2px); }
.tile__media { position: absolute; inset: 0; z-index: 0; border-radius: 0; border: none; background: var(--panel); overflow: hidden; }
.tile__media svg { width: 100% !important; height: 100% !important; }
.tile__body { position: relative; z-index: 1; padding: 34px; background: linear-gradient(0deg, rgba(24,24,27,0.92) 0%, rgba(24,24,27,0.55) 65%, transparent 100%); }
.tile__num { position: absolute; top: 28px; right: 28px; z-index: 2; font-family: var(--ff-display); font-weight: 900; font-size: 13px; letter-spacing: 0.05em; color: rgba(255,255,255,0.6); }
.tile__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }
.tile--studio .tile__eyebrow { color: var(--studio); }
.tile--software .tile__eyebrow { color: var(--software); }
.tile__title { font-family: var(--ff-display); font-weight: 900; font-size: clamp(26px, 3vw, 38px); line-height: 1; margin-bottom: 14px; color: #fff; }
.tile__text { font-size: 14px; line-height: 1.6; max-width: 40ch; color: rgba(255,255,255,0.75); margin-bottom: 20px; }
.tile__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; }
.tile__link em { font-style: normal; transition: transform .25s; }
.tile:hover .tile__link em { transform: translate(4px,-4px); }

/* ============ MARQUEE ============ */
.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden; padding: 44px 0; background: var(--bg-2); margin: 0;
  border-radius: 20px;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.hero + .marquee { position: relative; z-index: auto; margin-top: 0; }
.marquee__track {
  display: flex; width: max-content; white-space: nowrap; will-change: transform;
  font-family: var(--ff-display); font-weight: 800; font-size: clamp(20px, 3.4vw, 38px);
  text-transform: uppercase; color: var(--ink);
}
.marquee__track span { padding: 0 28px; transition: color .25s ease; }
.marquee__track span:nth-child(4n-2) { color: var(--accent); }
.marquee__track span:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .marquee__track { transform: none !important; } }

/* ============ SECTION HEAD ============ */
.section { padding: 120px 0; border-top: 1px solid var(--line); }
/* The first numbered chapter on each main page keeps its large background
   number unobstructed; later chapters retain their separators. */
#about,
#services { border-top: 0; }
.chapter__ghost {
  position: absolute; top: 10px; right: clamp(10px, 3vw, 40px);
  font-family: var(--ff-display); font-weight: 900; font-size: clamp(120px, 22vw, 320px);
  color: rgba(255,255,255,0.03); line-height: 1; z-index: 0; pointer-events: none; user-select: none;
}
.section-label { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; margin-bottom: 18px; }
.section-label__num { color: var(--accent); font-family: var(--ff-display); font-weight: 800; }
.section-title { position: relative; z-index: 1; font-family: var(--ff-display); font-weight: 800; font-size: clamp(28px, 4.4vw, 48px); line-height: 1.05; max-width: 820px; color: #fff; }

/* ============ STICKY SCROLL (pinned label, scrolling content) ============ */
.sticky-scroll { position: relative; z-index: 1; margin-top: 56px; display: grid; grid-template-columns: 0.9fr 1.6fr; gap: 50px; align-items: start; }
.sticky-scroll__pin { position: sticky; top: calc(var(--nav-top) + 78px); align-self: start; }
.sticky-scroll__pin-eyebrow { font-family: var(--ff-display); font-weight: 800; color: var(--accent); font-size: 13px; margin-bottom: 10px; }
.sticky-scroll__pin h3 { font-size: clamp(20px, 2.2vw, 28px); color: #fff; line-height: 1.15; }
.sticky-scroll__list { display: flex; flex-direction: column; }
.studio-guide-showcase { min-height: 110svh; padding-top: 0; padding-bottom: 0; }
.studio-guide-laptop-slot { min-height: 100svh; }
.studio-guide-laptop { --laptop-angle-y: 0deg; --laptop-angle-x: 0deg; --laptop-scale: 1; --laptop-lift: 0px; padding: 12px 12px 0; border-radius: 20px 20px 4px 4px; background: linear-gradient(145deg, #5c5c62, #111114 48%, #36363c); box-shadow: 0 34px 68px rgba(0,0,0,.44); transform-origin: center center; }
.studio-guide-laptop--hero { --laptop-width: calc(100vw - var(--page-gutter) - var(--page-gutter)); --laptop-top: 50%; --laptop-y: -50%; position: sticky; top: var(--laptop-top); width: var(--laptop-width); margin: 0; transform: translateY(calc(var(--laptop-y) + var(--laptop-lift))) perspective(1100px) rotateY(var(--laptop-angle-y)) rotateX(var(--laptop-angle-x)) scale(var(--laptop-scale)); will-change: width, top, transform; }
.studio-guide-laptop.is-docked { position: static; top: auto; width: min(100%, 470px); margin: 0 0 28px; transform: perspective(1100px) rotateY(8deg) rotateX(3deg); }
.studio-guide-laptop:hover { --laptop-lift: -8px; }
.studio-guide-laptop__camera { position: absolute; z-index: 2; top: 4px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #08080a; box-shadow: 0 0 0 1px rgba(255,255,255,.12); transform: translateX(-50%); }
.studio-guide-laptop__screen { aspect-ratio: 16 / 10; overflow: hidden; border: 2px solid #08080a; border-radius: 9px 9px 2px 2px; background: #1d1d22; }
.studio-guide-laptop__screen iframe { display: block; width: 100%; height: 100%; border: 0; background: #1d1d22; }
.studio-guide-laptop__base { position: relative; left: -5%; width: 110%; height: 12px; border-radius: 2px 2px 12px 12px; background: linear-gradient(180deg, #909097, #39393f 65%, #1a1a1e); }
.studio-guide-laptop__base::before { content: ''; position: absolute; top: 0; left: 50%; width: 22%; height: 4px; border-radius: 0 0 5px 5px; background: #18181c; transform: translateX(-50%); }
.software-demo-showcase { min-height: 86svh; padding-top: 0; padding-bottom: 0; }
.software-demo-slot { min-height: 76svh; display:flex; align-items:center; }
.software-demo-devices { width:100%; display:flex; align-items:center; gap:clamp(16px,3vw,48px); transition: width .4s ease; }
.software-demo-laptop { flex:.82; min-width:0; padding:10px 10px 0; border-radius:16px 16px 3px 3px; background:linear-gradient(145deg,#5c5c62,#111114 48%,#36363c); box-shadow:0 28px 62px rgba(0,0,0,.42); }
.software-demo-laptop__screen { aspect-ratio:16/10; overflow:hidden; border:2px solid #08080a; border-radius:8px 8px 2px 2px; background:#fff; }
.software-demo-laptop iframe { width:100%; height:100%; border:0; display:block; }
.software-demo-laptop__base { position:relative; left:-4%; width:108%; height:11px; border-radius:2px 2px 11px 11px; background:linear-gradient(180deg,#98989e,#36363c 65%,#19191d); }
.software-demo-phone { position:relative; flex:0 0 clamp(140px,18vw,240px); aspect-ratio:9/16; overflow:hidden; border:7px solid #101012; border-radius:24px; background:#fff; box-shadow:0 25px 55px rgba(0,0,0,.42); }
.software-demo-phone__notch { position:absolute; z-index:3; top:0; left:50%; width:46%; height:5.5%; min-height:11px; transform:translateX(-50%); background:#101012; border-radius:0 0 11px 11px; }
.software-demo-phone iframe { display:block; width:100%; height:100%; border:0; }
.software-demo-devices.is-docked { width:min(100%,470px); display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:28px; }
.software-demo-devices.is-docked .software-demo-laptop { width:100%; flex:none; }
.software-demo-devices.is-docked .software-demo-phone { flex:none; width:min(45%,190px); align-self:center; }
@media (max-width: 860px) {
  .sticky-scroll { grid-template-columns: 1fr; gap: 30px; }
  .sticky-scroll__pin { position: static; }
}

/* ============ SUBCHAPTER + FEATURE LIST (services, inside sticky-scroll list) ============ */
.subchapter {
  position: relative; z-index: 1;
  padding: 40px 0;
}
.subchapter {
  padding-left: 18px;
  transition: transform .45s cubic-bezier(.16,1,.3,1), background .35s ease;
}
.subchapter::before { content: ''; position: absolute; top: 40px; bottom: 40px; left: 0; width: 2px; background: var(--accent); transform: scaleY(.2); transform-origin: top; opacity: .3; transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.subchapter:hover { transform: translateX(8px); }
.subchapter:hover::before { transform: scaleY(1); opacity: 1; }
.subchapter:hover .subchapter__tag { letter-spacing: .18em; }
.subchapter__tag { font-family: var(--ff-display); font-weight: 800; color: var(--accent); font-size: 13px; }
.subchapter__head h3 { font-size: clamp(20px, 2.4vw, 26px); margin: 10px 0 12px; color: #fff; }
.subchapter__head p { color: var(--ink-dim); line-height: 1.65; max-width: 52ch; margin-bottom: 20px; }
.feature-list { list-style: none; }
.feature-row {
  display: flex; align-items: center; gap: 16px;
  padding: 17px 2px; border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
  opacity: 0; transform: translateX(22px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.feature-row:first-child { border-top: 1px solid var(--line); }
.feature-row.in { opacity: 1; transform: translateX(0); }
.feature-row::before {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--accent);
  transition: width .45s cubic-bezier(.16,1,.3,1);
}
.feature-row:hover::before { width: 100%; }
.feature-row__marker {
  width: 8px; height: 8px; min-width: 8px; background: var(--ink-faint);
  transition: background .3s, transform .4s cubic-bezier(.34,1.56,.64,1);
  transform: rotate(0deg);
}
.feature-row:hover .feature-row__marker { background: var(--accent); transform: rotate(45deg) scale(1.3); }
.feature-row__label {
  flex: 1; font-size: 15px; font-weight: 600; color: #fff;
  transition: transform .3s cubic-bezier(.16,1,.3,1), color .3s;
}
.feature-row:hover .feature-row__label { transform: translateX(8px); color: var(--accent); }

/* ============ FÜR WEN PILLS ============ */
.pill-row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.pill { border: 1px solid var(--line); border-radius: 999px; padding: 12px 22px; font-size: 14px; font-weight: 600; background: var(--panel); }

/* ============ TIMELINE (connecting line fills in and highlights steps on scroll) ============ */
.timeline { position: relative; z-index: 1; margin-top: 50px; max-width: 900px; }
.timeline::before {
  content: ''; position: absolute; left: 77px; width: 2px; background: var(--line);
  top: var(--timeline-line-top, 0px); height: var(--timeline-line-height, 100%);
}
.timeline__progress {
  position: absolute; left: 77px; width: 2px; height: 0; border-radius: 2px;
  top: var(--timeline-line-top, 0px);
  background: var(--accent); box-shadow: 0 0 14px rgba(var(--accent-rgb), .55);
}
.timeline__item { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 26px; padding: 30px 0; align-items: center; }
.timeline__item::after {
  content: ''; position: absolute; left: 77px; top: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink-faint);
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease; z-index: 2;
}
.timeline__num {
  position: relative; z-index: 1; font-family: var(--ff-display); font-weight: 800; font-size: 26px;
  color: var(--ink-faint); transition: color .4s ease, text-shadow .4s ease;
}
.timeline__item.is-active .timeline__num { color: var(--accent); text-shadow: 0 0 18px rgba(var(--accent-rgb), .4); }
.timeline__item.is-active::after { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .6); }
.timeline__body h3 { font-size: 19px; margin-bottom: 8px; color: #fff; }
.timeline__body p { color: var(--ink-dim); line-height: 1.6; max-width: 56ch; }
@media (prefers-reduced-motion: reduce) { .timeline__progress { transition: none; } }

/* ============ QUOTE ============ */
.quote-block { position: relative; z-index: 1; margin-top: 70px; border-radius: 24px; padding: 52px clamp(24px, 5vw, 64px); text-align: center; background: var(--panel); border: 1px solid var(--line); }
.quote-block__text { font-family: var(--ff-display); font-weight: 700; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.4; max-width: 780px; margin: 0 auto; color: #fff; }
.quote-block__text .vp-word { display: inline-block; white-space: nowrap; }
.quote-block__text .vp-letter { display: inline-block; }
.quote-block__attr { margin-top: 24px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.quote-block__name { font-family: var(--ff-display); font-weight: 900; letter-spacing: 0.04em; color: var(--accent); font-size: 14px; }
.quote-block__role { font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }

/* ============ FOUNDER (Über Risi) ============ */
.founder__media { aspect-ratio: 3 / 4; margin-bottom: 28px; }
.about-video-phone {
  position: relative; width: min(100%, 360px); aspect-ratio: 9 / 16; margin-inline: auto;
  overflow: hidden; border-radius: 38px; background: #070708;
  border: 8px solid #070708; box-shadow: 0 26px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.16);
}
.about-video-phone::before { content: ''; position: absolute; z-index: 2; top: 0; left: 50%; width: 38%; height: 24px; transform: translateX(-50%); border-radius: 0 0 15px 15px; background: #070708; }
.about-video-phone__media { width: 100%; height: 100%; object-fit: cover; display: block; background: #070708; }
.about-video-phone__sound { position: absolute; z-index: 3; right: 11px; bottom: 11px; width: 36px; height: 36px; border: 0; border-radius: 50%; padding: 0; background: rgba(7,7,8,.72); color: #fff; font: 700 16px/1 var(--ff-body); }
.about-video-phone__replay { position: absolute; z-index: 4; top: 50%; left: 50%; width: 68px; height: 68px; border: 0; border-radius: 50%; background: rgba(7,7,8,.78); color: #fff; font: 700 34px/1 var(--ff-display); transform: translate(-50%,-50%) scale(.7); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.about-video-phone.ended .about-video-phone__replay { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }
.about-video-phone__replay:hover { background: var(--accent); transform: translate(-50%,-50%) scale(1.08); }
.about-video-phone__label { position: absolute; z-index: 3; left: 12px; bottom: 13px; color: #fff; font: 700 9px/1 var(--ff-body); letter-spacing: .1em; }
body.light-mode .about-video-phone { border-color: rgba(23,23,27,.22); }
.founder__facts {
  position: relative; z-index: 1; margin-top: 40px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.founder__fact { background: var(--panel); padding: 28px; border: 1px solid var(--line); border-radius: 18px; }
.founder__fact h4 { font-family: var(--ff-display); font-weight: 800; font-size: 17px; color: var(--ink); margin: 34px 0 10px; letter-spacing: -0.01em; }
.founder__fact p { font-size: 14px; color: var(--ink-dim); line-height: 1.6; }
.founder__fact { position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.16,1,.3,1), background .35s ease; }
.founder__fact::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--accent); border-radius: inherit; opacity: 0; transition: opacity .3s ease; }
.founder__fact-num { position: absolute; top: 22px; left: 26px; color: var(--accent); font: 800 12px/1 var(--ff-display); letter-spacing: .1em; }
.founder__fact:hover { transform: translateY(-8px) rotate(-.4deg); background: color-mix(in srgb, var(--panel) 78%, var(--accent)); }
.founder__fact:hover::before { transform: scaleX(1); }
.founder__fact:hover::before { opacity: 1; }
.founder__fact:nth-child(2) { transition-delay: .06s; }
.founder__fact:nth-child(3) { transition-delay: .12s; }
.founder__fact:nth-child(4) { transition-delay: .18s; }
.risiworks-price { position: relative; margin-top: 34px; max-width: 620px; padding: 20px 0 20px 22px; border-left: 3px solid var(--accent); color: var(--ink-dim); line-height: 1.65; }
.risiworks-price::before { content: 'PREIS'; position: absolute; top: -8px; left: 14px; padding: 0 6px; background: var(--bg); color: var(--accent); font: 800 10px/1 var(--ff-display); letter-spacing: .1em; }
.pricing-section__intro { max-width: 660px; margin: 20px 0 42px; color: var(--ink-dim); line-height: 1.7; }
.pricing-section__note { max-width: 660px; margin: 20px 0 0; color: var(--ink-faint); font-size: 13px; line-height: 1.65; }
.pricing-section__note::first-letter { color: var(--accent); font-size: 18px; }
.pricing-switch { display: none; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pricing-grid--software { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.price-plan { position: relative; min-height: 310px; padding: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); display: flex; flex-direction: column; transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .3s ease, background .3s ease; }
.price-plan::after { content: ''; position: absolute; width: 130px; height: 130px; right: -54px; bottom: -54px; border-radius: 50%; background: rgba(var(--accent-rgb),.18); filter: blur(10px); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.price-plan:hover { transform: translateY(-10px) rotate(-.5deg); border-color: var(--accent); }
.price-plan:hover::after { transform: scale(1.45) translate(-12px,-12px); }
.price-plan__num { color: var(--accent); font: 800 12px/1 var(--ff-display); letter-spacing: .1em; }
.price-plan h3 { position: relative; z-index: 1; margin: 38px 0 12px; color: var(--ink); font: 800 clamp(21px, 2.1vw, 28px)/1.05 var(--ff-display); }
.price-plan p { position: relative; z-index: 1; color: var(--ink-dim); font-size: 14px; line-height: 1.65; }
.price-plan strong { position: relative; z-index: 1; margin-top: auto; color: var(--accent); font: 800 20px/1 var(--ff-display); }
.price-plan--accent { background: var(--accent); border-color: var(--accent); }
.price-plan--accent::after { background: rgba(255,255,255,.2); }
.price-plan--accent .price-plan__num,
.price-plan--accent h3,
.price-plan--accent p,
.price-plan--accent strong { color: #fff; }
@media (max-width: 700px) {
  .pricing-switch { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 0 14px; }
  .pricing-switch button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font: 700 21px/1 var(--ff-display); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
  .pricing-switch button:active { transform: scale(.94); }
  .pricing-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .pricing-switch span { min-width: 56px; color: var(--accent); text-align: center; font: 800 12px/1 var(--ff-display); letter-spacing: .08em; }
  .pricing-grid, .pricing-grid--software { display: flex; max-width: none; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 0 2px 16px; scrollbar-width: none; }
  .pricing-grid::-webkit-scrollbar { display: none; }
  .price-plan { flex: 0 0 min(82vw, 340px); scroll-snap-align: start; min-height: 290px; }
}
@media (max-width: 640px) { .founder__facts { grid-template-columns: 1fr; } }

/* ============ CONTACT ============ */
.contact { padding: 130px 0 90px; text-align: center; }
.contact__label-wrap { justify-content: center; }
.contact__title { position: relative; z-index: 1; font-family: var(--ff-display); font-weight: 900; font-size: clamp(32px, 5.6vw, 68px); text-transform: uppercase; margin: 18px 0 12px; color: #fff; }
.contact__sub { position: relative; z-index: 1; color: var(--ink-dim); margin-bottom: 38px; }
.contact__email { position: relative; z-index: 1; display: inline-block; font-family: var(--ff-display); font-weight: 800; font-size: clamp(20px, 4vw, 40px); color: var(--accent); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb),0.35); text-underline-offset: 6px; transition: text-decoration-color .25s; }
.contact__email:hover { text-decoration-color: var(--accent); }
.contact__meta { position: relative; z-index: 1; display: flex; justify-content: center; gap: 52px; margin-top: 52px; flex-wrap: wrap; }
.contact__meta > div { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.fact__label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); }

/* ============ FOOTER (white floating card = contrast to the dark page) ============ */
.footer {
  --ink: #14151a; --ink-dim: #55565c; --ink-faint: #86868c; --line: rgba(20,21,26,0.12);
  margin: 0 var(--page-gutter) var(--page-gutter);
  border-radius: 32px;
  padding: clamp(44px, 7vw, 72px) clamp(24px, 5vw, 64px) 30px;
  background: #f5f4f0; color: var(--ink);
  overflow: hidden; position: relative; z-index: 1;
}
.footer__top { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 40px; }
.footer__logo { display: block; font-family: var(--ff-display); font-weight: 900; color: var(--ink); font-size: clamp(52px, 13vw, 176px); line-height: 0.86; letter-spacing: -0.02em; }
.footer__logo-part--accent { color: var(--accent); }
.footer__logo-letter { display: inline-block; }
.footer__top p { color: var(--ink-dim); max-width: 420px; font-size: 15px; }
.footer__links { display: flex; gap: 22px; font-size: 13px; color: var(--ink-dim); padding-top: 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.footer__links a { transition: color .2s; }
.footer__links a:hover { color: var(--accent); }
.footer__bottom { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-faint); padding-top: 18px; flex-wrap: wrap; gap: 10px; }
.footer__bottom a { text-decoration: underline; text-underline-offset: 2px; transition: color .2s; }
.footer__bottom a:hover { color: var(--accent); }
@media (min-width: 901px) { .footer__bottom { padding-right: 84px; } }
/* the floating scroll-to-top button is fixed to the viewport corner and
   overlaps the footer's last line once the footer is in view, give the
   text room to clear it on every width, not just desktop */
@media (max-width: 900px) { .footer__bottom { padding-right: 66px; } }
@media (max-width: 640px) { .footer { margin: 0 var(--page-gutter) var(--page-gutter); border-radius: 24px; } }
@media (max-width: 480px) { .footer__logo { font-size: clamp(30px, 10.5vw, 58px); } }
/* force an even 2-per-row split (rather than a width-dependent wrap
   that can leave an odd one alone on its own line) */
@media (max-width: 640px) {
  .footer__links { display: grid; grid-template-columns: 1fr 1fr; row-gap: 14px; }
}

/* The footer intentionally inverts in light mode to retain the strong final
   contrast that the white footer creates in dark mode. */
body.light-mode .footer { background: #222329; color: #f5f4f0; }
body.light-mode .footer__logo { color: #f5f4f0; }
body.light-mode .footer__top p,
body.light-mode .footer__links { color: rgba(245,244,240,.66); }
body.light-mode .footer__bottom { color: rgba(245,244,240,.46); }

/* ============ LEGAL PAGES ============ */
.legal-wrap {
  width: calc(100% - (2 * var(--page-gutter))); margin-inline: var(--page-gutter);
  padding: calc(var(--nav-top) + 110px) 0 var(--page-gutter);
}
.legal {
  max-width: 780px; margin: 0 auto;
  color: var(--ink); padding: clamp(28px, 4vw, 54px) 0 70px;
}
.legal__back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: 44px; }
.legal[data-lang-content] { display: none; }
html[lang="de"] .legal[data-lang-content="de"],
html[lang="en"] .legal[data-lang-content="en"] { display: block; }
.legal h1 { font-family: var(--ff-display); font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 5vw, 46px); line-height: 1.05; margin-bottom: 10px; color: var(--ink); }
.legal__updated { color: var(--ink-faint); font-size: 13px; margin-bottom: 20px; }
.legal h2 { font-family: var(--ff-display); font-weight: 700; font-size: 19px; margin: 42px 0 14px; color: var(--ink); }
.legal p, .legal li { color: var(--ink-dim); line-height: 1.75; margin-bottom: 14px; }
.legal ul { padding-left: 20px; margin-bottom: 14px; }
.legal strong { color: var(--ink); }
.legal a.inline-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .legal { max-width: none; }
}

/* ============ ERROR PAGE (404) ============ */
.error-wrap {
  min-height: 100svh; display: grid; grid-template-columns: minmax(180px, 250px) minmax(280px, 430px); align-items: center;
  justify-content: center; gap: clamp(42px, 7vw, 104px); max-width: 900px; margin: 0 auto;
  padding: calc(var(--nav-top) + 110px) var(--page-gutter) var(--page-gutter);
}
.error-face { width: min(100%, clamp(160px, 26vw, 240px)); color: var(--accent); justify-self: center; }
.error-copy { max-width: 440px; text-align: left; }
.error-copy__eyebrow { color: var(--accent); font: 800 11px/1 var(--ff-body); letter-spacing: .14em; }
.error-copy h1 { margin: 18px 0; color: var(--ink); font: 900 clamp(38px, 4.2vw, 58px)/.91 var(--ff-display); letter-spacing: -.045em; }
.error-copy > p:not(.error-copy__eyebrow) { max-width: 32ch; margin-bottom: 30px; color: var(--ink-dim); font-size: 16px; line-height: 1.6; }
@media (max-width: 700px) {
  .error-wrap { grid-template-columns: 1fr; gap: 32px; padding-top: calc(var(--nav-top) + 84px); text-align: center; }
  .error-face { width: min(54vw, 220px); }
  .error-copy { text-align: center; }
  .error-copy > p:not(.error-copy__eyebrow) { margin-inline: auto; }
}
.error-face__eyes,
.error-face__eye-lid,
.error-face__mouth-left,
.error-face__mouth-right,
.error-face__nose,
.error-face__pupil { animation: error-eyes 1s .3s forwards; }
.error-face__eye-lid,
.error-face__pupil { animation-duration: 4s; animation-delay: 1.3s; animation-iteration-count: infinite; }
.error-face__eye-lid { animation-name: error-eye-lid; }
.error-face__mouth-left { animation-name: error-mouth-left; }
.error-face__mouth-right { animation-name: error-mouth-right; }
.error-face__nose { animation-name: error-nose; }
.error-face__pupil { animation-name: error-pupil; }

@keyframes error-eye-lid {
  0%, 40%, 45%, 100% { transform: translateY(0); }
  42.5% { transform: translateY(17.5px); }
}
@keyframes error-eyes {
  from { transform: translateY(112.5px); }
  to { transform: translateY(15px); }
}
@keyframes error-pupil {
  0%, 37.5%, 40%, 45%, 87.5%, 100% { stroke-dashoffset: 0; transform: translate(0, 0); }
  12.5%, 25%, 62.5%, 75% { transform: translate(-35px, 0); }
  42.5% { stroke-dashoffset: 35; transform: translate(0, 17.5px); }
}
@keyframes error-mouth-left {
  from, 50% { stroke-dashoffset: -102; }
  to { stroke-dashoffset: 0; }
}
@keyframes error-mouth-right {
  from, 50% { stroke-dashoffset: 102; }
  to { stroke-dashoffset: 0; }
}
@keyframes error-nose {
  from { transform: translate(0, 0); }
  to { transform: translate(0, 22.5px); }
}


/* ============ SIMPLE HERO (Studio / Software pages) ============ */
.hero { min-height: 100svh; display: flex; align-items: center; padding: 150px 0 70px; }
.hero__row { display: flex; gap: clamp(30px, 5vw, 70px); align-items: center; width: 100%; }
.hero__content { flex: 1.1 1 480px; min-width: 0; }
.hero__media {
  flex: 1 1 520px; min-width: 0; aspect-ratio: 1; display: none;
  position: relative; background: transparent; overflow: visible;
  transform: translateX(clamp(-132px, -10vw, -44px)); pointer-events: none;
}
.hero__media::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -14% -18%; border-radius: 50%;
  background: radial-gradient(ellipse 50% 58% at 45% 56%, rgba(var(--accent-rgb),.28) 0%, rgba(var(--accent-rgb),.12) 35%, transparent 74%);
  filter: blur(26px); transform: rotate(-18deg);
}
.hero__media::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 56%; aspect-ratio: 1; right: 0; top: 9%; border: 1px solid rgba(var(--accent-rgb),.25); border-radius: 50%;
  transform: rotate(-18deg); opacity: .72;
}
body.theme-studio .hero__media::before { background: radial-gradient(ellipse 48% 62% at 36% 64%, rgba(var(--studio-rgb),.32) 0%, rgba(var(--studio-rgb),.12) 36%, transparent 74%); transform: rotate(-28deg) scale(1.08); }
body.theme-studio .hero__media::after { display: none; }
body.theme-software .hero__media::before { background: radial-gradient(ellipse 58% 48% at 62% 40%, rgba(var(--software-rgb),.30) 0%, rgba(var(--software-rgb),.12) 38%, transparent 76%); transform: rotate(22deg) scale(1.06); }
body.theme-software .hero__media::after { right: -4%; top: 17%; transform: rotate(22deg); }
.hero__media svg { width: 100% !important; height: 100% !important; overflow: visible; }
@media (min-width: 901px) { .hero__media { display: flex; } }
/* between 901-1180px the content column is too narrow for the media's
   usual left bleed (negative translateX + glow inset), so the glow
   creeps under the heading text, pull it back in until there's room */
@media (min-width: 901px) and (max-width: 1180px) {
  .hero__mark { font-size: clamp(40px, 7vw, 74px); }
  .hero__media { transform: translateX(0); }
  .hero__media::before { inset: -10%; }
}
.hero__eyebrow {
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 22px;
}
.hero__mark {
  font-family: var(--ff-display); font-weight: 900; letter-spacing: -0.02em;
  font-size: clamp(46px, 8.5vw, 128px); line-height: 0.92; color: #fff;
}
.hero__mark .accent { color: var(--accent); }
.reveal-line { display: block; overflow: hidden; }
.reveal-line span { display: block; transform: translateY(110%); transition: transform .8s cubic-bezier(.16,1,.3,1); }
.hero.in .reveal-line span, .divider.in .reveal-line span { transform: translateY(0); }
.hero.in .reveal-line:nth-child(2) span, .divider.in .reveal-line:nth-child(2) span { transition-delay: .08s; }
.hero.in .reveal-line:nth-child(3) span, .divider.in .reveal-line:nth-child(3) span { transition-delay: .16s; }
.hero__sub {
  max-width: 560px; margin-top: 26px; font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink-dim); line-height: 1.6;
}
.hero__sub strong { color: #fff; font-weight: 700; }
.hero__cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 26px; border-radius: 999px; font-size: 15px; font-weight: 600;
  transition: transform .25s ease, background .25s, color .25s, border-color .25s;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: #fff; color: var(--bg); transform: translateY(-2px); }
.btn--primary em { font-style: normal; transition: transform .25s; }
.btn--primary:hover em { transform: translate(3px,-3px); }
.btn--ghost { border: 1px solid var(--line); color: #fff; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* ============ DIVIDER (giant stacked words) ============ */
.divider {
  position: relative; padding: clamp(120px, 17vw, 230px) 0; margin: 0;
  display: block; overflow: hidden;
}
.divider::before { display: none; }
.divider__mark { display: none; }
.divider__title {
  position: relative; z-index: 1; max-width: none;
  font-family: var(--ff-display); font-weight: 900; text-align: center;
  font-size: clamp(42px, 9vw, 116px); line-height: .91; letter-spacing: -0.025em; color: #fff;
}
.divider__accent { color: var(--divider-accent, var(--accent)); }
.divider__rotate { display: inline-flex; overflow: hidden; vertical-align: bottom; }
.divider__rotate .rt-char { display: inline-block; }
.divider__rotate .rt-char--out { animation: rt-out .35s cubic-bezier(.5,0,.75,0) forwards; }
.divider__rotate .rt-char--in { animation: rt-in .5s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes rt-out { to { transform: translateY(-120%); opacity: 0; } }
@keyframes rt-in { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .divider .reveal-line span { transition: none; }
  .divider__rotate .rt-char--out, .divider__rotate .rt-char--in { animation: none; }
}

/* ============ EASTER EGG ============ */
.egg-toast {
  position: fixed; bottom: 32px; left: 50%; z-index: 3000;
  transform: translate(-50%, 20px); opacity: 0;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
  padding: 14px 26px; border-radius: 999px; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
  transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.egg-toast.in { opacity: 1; transform: translate(-50%, 0); }
@keyframes partySpin { to { transform: rotate(360deg); } }
@keyframes partyHue { to { filter: hue-rotate(360deg); } }
body.party-mode .nav__logo-works,
body.party-mode .footer__logo-part--accent,
body.party-mode .hero__mark .accent { animation: partyHue 1.2s linear 2; }
body.party-mode .nav__logo,
body.party-mode .intro__mark { animation: partySpin 1s cubic-bezier(.65,0,.35,1); }

/* ============ RISI (about page): sticky full-height portrait + scrolling story ============ */
.risi-layout { display: flex; align-items: stretch; margin-bottom: 48px; }
.risi-portrait-col { flex: 0 0 46%; position: relative; align-self: stretch; min-height: 100%; }
.risi-portrait-col--mobile { display: none; }
.risi-portrait-sticky {
  /* The portrait remains anchored for the complete story and releases only
     when the Risi section reaches the footer. */
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 2.6vw, 38px) 0;
}
.risi-portrait {
  position: relative; width: 100%; height: 100%; min-height: 520px; max-height: 900px;
  display: flex; align-items: flex-end; justify-content: center; isolation: isolate;
  transition: transform .6s cubic-bezier(.16,1,.3,1), filter .6s ease;
  animation: risiFloat 6s ease-in-out infinite;
}
.risi-portrait::before { content: ''; position: absolute; z-index: -1; inset: 8% -30% 8%; background: rgba(0,13,255,.16); filter: blur(90px); border-radius: 50%; }
.risi-portrait img { position: relative; z-index: 1; width: auto; max-width: none; height: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.45)); }
.risi-portrait.placeholder { align-items: center; border-radius: 24px; }
@keyframes risiFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* ============ RISI: FULL SCREEN INTERACTIVE LANYARD ============ */
.risi-lanyard-stage {
  position: relative; min-height: 100svh; overflow: visible; isolation: isolate;
  background: transparent;
}
.risi-lanyard-stage__copy { display: none; }
.risi-lanyard-stage__face {
  position: absolute; z-index: 2; right: clamp(20px, 3vw, 52px); bottom: clamp(16px, 2.5vw, 34px);
  max-width: min(32vw, 420px); color: #fff; text-align: right;
  font: 900 clamp(30px, 4.6vw, 72px)/.88 var(--ff-display); letter-spacing: -.045em; pointer-events: none;
}
.risi-lanyard-stage__face span { color: var(--accent); }
body.light-mode .risi-lanyard-stage__face,
body.light-mode .risi-lanyard-stage__face span { color: #17171b; }
.risi-lanyard-stage__face.is-pinned {
  position: fixed; z-index: 8; top: var(--face-pin-top, calc(var(--nav-top) + 110px)); right: var(--page-gutter); bottom: auto;
  max-width: min(32vw, 420px); font-size: clamp(30px, 4.6vw, 72px);
}
.risi-lanyard-stage__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--accent); text-transform: uppercase; margin-bottom: 18px; }
.risi-lanyard-stage h1 { color: #fff; font-family: var(--ff-display); font-size: clamp(74px, 13vw, 188px); font-weight: 900; line-height: .8; letter-spacing: -.055em; }
.risi-lanyard-stage h1 span { color: var(--accent); }
.risi-lanyard-stage__quote { max-width: 29ch; margin-top: 28px; color: var(--ink-dim); font-size: clamp(16px, 1.7vw, 21px); line-height: 1.5; }
.risi-lanyard-stage__rope { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#lanyardRopeShadow { fill: none; stroke: rgba(0,0,0,.3); stroke-width: 26; stroke-linecap: round; filter: blur(8px); transform: translate(10px, 13px); }
#lanyardRopePath { fill: none; stroke: #070708; stroke-width: 19; stroke-linecap: round; filter: drop-shadow(0 4px 2px rgba(0,0,0,.42)); }
.lanyard-card { position: absolute; z-index: 2; width: clamp(260px, 26vw, 400px); transform-origin: 50% 0; touch-action: none; user-select: none; cursor: grab; perspective: 1100px; }
.lanyard-card.is-dragging { cursor: grabbing; }
.lanyard-card__clip { position: absolute; z-index: 2; top: -22px; left: 50%; width: 30px; height: 24px; transform: translateX(-50%); border-radius: 7px; background: linear-gradient(90deg, #41434a, #b0b3ba 48%, #41434a); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 5px 11px rgba(0,0,0,.42); }
.lanyard-card__ring { position: absolute; left: 50%; bottom: 18px; width: 47px; height: 34px; transform: translateX(-50%); border: 5px solid #101116; border-right-color: #676a72; border-bottom-color: #777a82; border-radius: 50%; box-shadow: inset 0 1px 1px rgba(255,255,255,.3), 0 3px 5px rgba(0,0,0,.45); }
.lanyard-card__hook { position: absolute; left: 50%; top: 17px; width: 17px; height: 30px; transform: translateX(-50%); border: 5px solid #31333a; border-top: 0; border-left-color: #8c8f96; border-radius: 0 0 14px 14px; box-shadow: 2px 2px 4px rgba(0,0,0,.34); }
.lanyard-card__body { position: relative; overflow: hidden; padding: clamp(22px, 2.5vw, 36px); text-align: center; border: 0; border-radius: 15px; background: var(--panel); box-shadow: 0 42px 75px -28px rgba(0,0,0,.75); transform: rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg)); transition: box-shadow .2s ease; }
.lanyard-card__punch-hole { position: absolute; top: 12px; left: 50%; width: 30px; height: 14px; transform: translateX(-50%); border-radius: 999px; background: #0a0a0c; box-shadow: inset 0 2px 4px #000, 0 1px rgba(255,255,255,.08); }
.lanyard-card:hover .lanyard-card__body, .lanyard-card:focus-visible .lanyard-card__body { box-shadow: 0 48px 90px -25px rgba(var(--accent-rgb),.35); }
.lanyard-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }
.lanyard-card__issuer { display: block; color: #fff; font-family: var(--ff-display); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.lanyard-card__photo { width: clamp(126px, 13vw, 194px); aspect-ratio: 1; overflow: hidden; margin: clamp(18px, 2vw, 28px) auto 20px; border-radius: 50%; border: 4px solid var(--accent); background: #fff; }
.lanyard-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 27%; transform: scale(1.34); }
.lanyard-card__name { color: var(--accent); font-family: var(--ff-display); font-size: clamp(34px, 4.2vw, 56px); font-weight: 900; line-height: .9; letter-spacing: -.035em; }
.lanyard-card__role { margin-top: 11px; color: var(--ink-faint); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.lanyard-card__barcode { height: 26px; margin-top: clamp(24px, 3vw, 34px); background: repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 6px, var(--accent) 6px 8px, transparent 8px 12px, var(--accent) 12px 14px, transparent 14px 18px); }
.lanyard-card__number { display: block; margin-top: 9px; color: var(--ink-faint); font-size: 9px; letter-spacing: .18em; }
.risi-lanyard-stage__scroll { position: absolute; z-index: 3; bottom: 28px; left: 50%; width: 44px; height: 54px; transform: translateX(-50%); border: 1px solid var(--line); border-radius: 99px; }
.risi-lanyard-stage__scroll span { display: block; width: 5px; height: 12px; margin: 10px auto 0; border-radius: 9px; background: var(--accent); animation: lanyardScroll 1.6s ease-in-out infinite; }
@keyframes lanyardScroll { 0%,100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(16px); opacity: .18; } }
body.light-mode .risi-lanyard-stage h1 { color: var(--ink); }
@media (max-width: 900px) {
  .risi-lanyard-stage { min-height: max(720px, 100svh); }
  .risi-lanyard-stage__copy { top: 118px; transform: none; max-width: calc(100% - (var(--page-gutter) * 2)); padding-right: 0; }
  .risi-lanyard-stage h1 { font-size: clamp(64px, 20vw, 110px); }
  .risi-lanyard-stage__quote { margin-top: 16px; }
  .lanyard-card { width: min(72vw, 320px); }
  .lanyard-card__body { padding: 22px; }
  #lanyardRopePath { stroke-width: 12; }
  #lanyardRopeShadow { stroke-width: 20; }
}
.risi-lanyard-stage__scroll { display: none; }
.risi-lanyard-stage::after { content: 'SCROLL ↓'; position: absolute; z-index: 1; left: calc((100vw - 100%) * -1 + var(--page-gutter) + 3cm + 18px); bottom: clamp(18px, 3vw, 36px); color: var(--ink-dim); font: 800 10px/1 var(--ff-body); letter-spacing: .16em; animation: scrollCue 1.5s cubic-bezier(.65,0,.35,1) infinite; transition: opacity .35s ease; }
.risi-lanyard-stage::before { content: ''; position: absolute; z-index: 1; left: calc((100vw - 100%) * -1 + var(--page-gutter) + 3cm); bottom: clamp(18px, 3vw, 36px); width: 1px; height: 26px; background: var(--accent); transform-origin: bottom; animation: scrollLine 1.5s cubic-bezier(.65,0,.35,1) infinite; transition: opacity .35s ease; }
body.scrolled .risi-lanyard-stage::after, body.scrolled .risi-lanyard-stage::before { animation: none; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .risi-lanyard-stage::after, .risi-lanyard-stage::before { animation: none; } }
/* subtle scroll-reactive shift as the reader moves through each chapter */
.risi-portrait[data-chapter="werdegang"] { transform: translateY(-6px) scale(1.015); }
.risi-portrait[data-chapter="philosophie"] { transform: translateY(-10px) scale(1.03); filter: drop-shadow(0 0 60px rgba(var(--accent-rgb),0.25)); }
.risi-portrait[data-chapter="kontakt"] { transform: translateY(-4px) scale(1); }

.risi-content-col { flex: 1 1 58%; min-width: 0; padding: 0; }
.risi-story-scroll { position: relative; }
.risi-founder-intro { position: sticky; z-index: 3; top: 24svh; align-self: flex-start; min-height: 0; padding: 0; pointer-events: none; isolation: isolate; }
.risi-founder-intro__sticky { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; }
.risi-founder-intro__sticky .risi-chapter__quote { max-width: none; white-space: nowrap; }
.risi-founder-intro .risi-chapter__quote { margin-bottom: 96px !important; }
.risi-content-col > .risi-chapter { scroll-margin-top: calc(60svh + 24px); }
#persoenlich > .risi-chapter__eyebrow { display: none; }
#persoenlich { min-height: 0; padding-top: 0; justify-content: flex-start; }
.risi-chapter { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 48px 0; }
.risi-chapter:first-child { border-top: none; min-height: 100svh; }
.risi-chapter__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.risi-chapter h1 {
  font-family: var(--ff-display); font-weight: 900; letter-spacing: -0.02em;
  font-size: clamp(50px, 9vw, 140px); line-height: 0.9; color: #fff; margin-bottom: 24px;
}
.risi-chapter h1 .accent { color: var(--accent); }
.risi-chapter h2 { font-family: var(--ff-display); font-weight: 800; font-size: clamp(24px, 3vw, 36px); color: #fff; margin-bottom: 22px; }
.risi-chapter__risi-title { font-family: var(--ff-display) !important; font-weight: 900 !important; font-size: clamp(58px, 7.2vw, 100px) !important; line-height: .82; letter-spacing: -.045em; margin: 0 0 24px !important; }
.risi-chapter__risi-title span { color: var(--accent); }
.risi-chapter__quote { color: var(--ink-dim) !important; font-size: clamp(17px, 1.9vw, 23px) !important; font-style: italic; margin-bottom: 38px !important; }
.risi-chapter p { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.75; color: var(--ink-dim); max-width: 56ch; margin-bottom: 18px; }
.risi-chapter p.placeholder-text {
  color: var(--accent); font-style: italic; border: 1px dashed rgba(var(--accent-rgb),0.4);
  border-radius: 14px; padding: 16px 20px; background: rgba(var(--accent-rgb),0.06);
}
.risi-content-col .placeholder-text { display: none; }
.risi-timeline { position: relative; z-index: 6; margin-top: 30px; margin-left: 5mm; padding-left: 26px; display: flex; flex-direction: column; }
.risi-timeline::before {
  /* The rail's centre shares the exact same x-position as every marker. */
  content: ''; position: absolute; left: 2px; width: 2px; background: var(--line);
  top: var(--timeline-line-top, 0px); height: var(--timeline-line-height, 100%);
}
.risi-timeline__progress {
  position: absolute; left: 2px; width: 2px; height: 0; border-radius: 2px;
  top: var(--timeline-line-top, 0px);
  background: var(--accent); box-shadow: 0 0 14px rgba(var(--accent-rgb), .55);
}
.risi-timeline__item { position: relative; padding: 24px 0; }
.risi-timeline__item:not(.risi-timeline__item--real) { display: none; }
.risi-timeline__item--real::after {
  /* Anchored by JS to the heading of each entry, not to its date. This keeps
     the marker beside the actual story and lets the rail meet its exact centre. */
  /* Items begin after the timeline's 26px text inset. Pull the marker back
     so its centre meets the rail at x = 2px. */
  content: ''; position: absolute; left: -23px; top: var(--risi-timeline-marker, 30px); transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink-faint);
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease; z-index: 8;
}
.risi-timeline__item.is-active::after { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .6); }
.risi-timeline__tag { font-family: var(--ff-display); font-weight: 800; color: var(--accent); font-size: 13px; }
.risi-timeline__item h3 { font-size: 18px; color: #fff; margin: 8px 0 6px; }
.risi-timeline__item p { color: var(--ink-dim); font-size: 15px; margin-bottom: 0; }

@media (max-width: 900px) {
  .risi-lanyard-stage::after,
  .risi-lanyard-stage::before { display: none; }
  .risi-layout { flex-direction: column; }
  .risi-layout > .risi-portrait-col:not(.risi-portrait-col--mobile) { display: none; }
  .risi-portrait-col--mobile { display: block; flex: none; width: 100%; margin-top: -96px; }
  .risi-portrait-sticky { position: static; height: auto; padding: 0 0 38px; }
  .risi-portrait { width: min(100%, 520px); height: min(72svh, 640px); min-height: 420px; margin: 0 auto; animation: none; }
  .risi-portrait img { max-width: 100%; width: auto; height: 100%; }
  .risi-content-col { padding: 0; }
  .risi-lanyard-stage__face { top: auto; left: var(--page-gutter); right: auto; bottom: 92px; max-width: calc(100% - (var(--page-gutter) * 2)); text-align: left; font-size: clamp(34px, 12vw, 58px); }
  .risi-founder-intro { position: sticky; top: 76px; z-index: 3; min-height: 0; padding: 0; pointer-events: none; }
  .risi-founder-intro__sticky { min-height: 0; }
  .risi-lanyard-stage__face.is-pinned { position: fixed; top: var(--face-pin-top, calc(var(--nav-top) + 92px)); right: auto; bottom: auto; left: var(--page-gutter); max-width: calc(100% - (var(--page-gutter) * 2)); text-align: left; font-size: clamp(34px, 12vw, 58px); }
  .risi-founder-intro__sticky .risi-chapter__quote { white-space: normal; }
  .risi-content-col > .risi-chapter { scroll-margin-top: 100px; }
  #persoenlich { min-height: 0; padding-top: 0; justify-content: flex-start; }
  .risi-timeline::before, .risi-timeline__progress { left: 10px; }
  .risi-timeline__item--real::after { left: -16px; }
  body.theme-risi.docked .nav__logo-risi { top: 100%; left: -20px; transform: rotate(-90deg); }
  body.theme-risi.docked .nav__logo-works { left: -20px; top: calc(100% - var(--nav-logo-risi-w, 130px)); transform: rotate(-90deg); }
  .risi-chapter:first-child { min-height: 0; }
}

/* ============ REVEAL ANIMATION ============ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ============ SCROLL STACK (service chapters) ============ */
.scroll-stack { --stack-top: calc(var(--nav-top) + 88px); position: relative; padding-bottom: clamp(76px, 12vw, 152px); }
.scroll-stack .subchapter {
  --stack-scale: 1; --stack-x: 0px; position: sticky; top: calc(var(--stack-top) + (var(--stack-index) * 15px));
  margin-bottom: clamp(42px, 6vw, 74px); padding: clamp(26px, 3vw, 38px); border: 1px solid var(--line);
  border-radius: 22px; background: color-mix(in srgb, var(--bg-2) 92%, transparent); box-shadow: 0 20px 44px rgba(0,0,0,.18);
  transform: translate3d(var(--stack-x), 0, 0) scale(var(--stack-scale)); transform-origin: top center; will-change: transform, filter;
}
.scroll-stack .subchapter::before { top: 28px; bottom: 28px; left: 18px; }
.scroll-stack .subchapter:hover { --stack-x: 8px; transform: translate3d(var(--stack-x), 0, 0) scale(var(--stack-scale)); }
.scroll-stack .subchapter.reveal.in { transform: translate3d(var(--stack-x), 0, 0) scale(var(--stack-scale)); }
.scroll-stack .subchapter:nth-child(1) { --stack-index: 0; }
.scroll-stack .subchapter:nth-child(2) { --stack-index: 1; }
.scroll-stack .subchapter:nth-child(3) { --stack-index: 2; }
.scroll-stack .subchapter:nth-child(4) { --stack-index: 3; }
@media (prefers-reduced-motion: reduce) { .scroll-stack .subchapter { position: relative; top: auto; transform: none !important; filter: none !important; } }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .scroll-stack { padding-bottom: 0; }
  .scroll-stack .subchapter {
    position: relative; top: auto; margin-bottom: 0; padding: 40px 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    transform: none !important; filter: none !important;
  }
  .scroll-stack .subchapter::before { top: 40px; bottom: 40px; left: 0; }
  :root { --nav-top: 22px; }
  .nav__logo-risi, .nav__logo-works { top: var(--nav-top); }
  /* the docked state normally rotates the wordmark into the empty outer
     page margin, mobile has no margin to rotate into, so keep it in its
     normal nav spot instead of letting it drop onto the content below */
  body.docked .nav__logo-risi { top: var(--nav-top); left: var(--page-gutter); transform: none; }
  body.docked .nav__logo-works { top: var(--nav-top); left: calc(var(--page-gutter) + var(--nav-logo-risi-w, 130px)); transform: none; }
  .hero { padding-top: 130px; min-height: 0; }
  .hero__row { flex-direction: column; align-items: flex-start; }
  .hero__content { flex: none; width: 100%; }
  .hero__media {
    display: flex; flex: none; width: min(72vw, 300px); margin: 4px auto 0; transform: none; pointer-events: none;
  }
  .hero__media::before { inset: 10% 6% 0 6%; filter: blur(40px); }
  .contact__meta { gap: 30px; }
  .footer__top { flex-direction: column; align-items: flex-start; }
  .footer__top p { text-align: left; }
  .chapter__ghost { font-size: clamp(80px, 30vw, 160px); }
  /* Mobile keeps the wordmark stable instead of moving it into the side dock. */
  body .nav__logo-risi,
  body .nav__logo-works,
  body.docked .nav__logo-risi,
  body.docked .nav__logo-works,
  body.docked .nav__logo-risi.fused,
  body.docked .nav__logo-works.fused {
    top: var(--nav-top); transform: none; font-size: clamp(18px, 6.4vw, 24px); opacity: 1;
  }
  body .nav__logo-risi,
  body.docked .nav__logo-risi { left: var(--page-gutter); }
  body .nav__logo-works,
  body.docked .nav__logo-works { left: calc(var(--page-gutter) + var(--nav-logo-risi-w, 130px)); }
  body.footer-near .nav__logo-risi,
  body.footer-near .nav__logo-works { opacity: 0; pointer-events: none; }
}

/* ============ PRIVATE CORPORATE DESIGN GUIDE ============ */
.brand-guide { background: #1d1d22; color: #f3f3f2; }
.brand-guide, html:has(.brand-guide) { scrollbar-width: thin; scrollbar-color: #000dff #17171b; }
.brand-guide::-webkit-scrollbar, html:has(.brand-guide)::-webkit-scrollbar { width: 7px; }
.brand-guide::-webkit-scrollbar-track, html:has(.brand-guide)::-webkit-scrollbar-track { background: #17171b; }
.brand-guide::-webkit-scrollbar-thumb, html:has(.brand-guide)::-webkit-scrollbar-thumb { background: #000dff; border-radius: 99px; }
.brand-guide::-webkit-scrollbar-thumb:hover, html:has(.brand-guide)::-webkit-scrollbar-thumb:hover { background: #3340ff; }
.brand-guide--studio, html:has(.brand-guide--studio) { scrollbar-color: #ff2900 #17171b; }
.brand-guide--studio::-webkit-scrollbar-thumb, html:has(.brand-guide--studio)::-webkit-scrollbar-thumb { background: #ff2900; }
.brand-guide--studio::-webkit-scrollbar-thumb:hover, html:has(.brand-guide--studio)::-webkit-scrollbar-thumb:hover { background: #d92300; }
.brand-guide__main { max-width: 1440px; margin: 0 auto; padding: clamp(28px, 5vw, 80px); }
.brand-guide__hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid rgba(255,255,255,.15); }
.brand-guide__eyebrow, .brand-guide__label { color: #8c8c95; font: 700 12px/1 var(--ff-body); letter-spacing: .12em; text-transform: uppercase; }
.brand-guide__hero h1 { margin: 20px 0; font: 900 clamp(48px, 12vw, 165px)/.78 var(--ff-display); letter-spacing: -.05em; }
.brand-guide__hero h1 sup { display: inline-block; margin-left: .08em; vertical-align: top; color: var(--software); font-size: .24em; line-height: 1; letter-spacing: 0; }
.brand-guide__hero h1 span, .brand-guide__wordmark span, .brand-guide__closing span { color: var(--software); }
.brand-guide__hero > p:last-child { max-width: 390px; color: #a5a5aa; font-size: 17px; line-height: 1.6; }
.brand-guide__hero-meta { display: flex; justify-content: space-between; gap: 24px; max-width: 620px; margin-top: 54px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); color: #8c8c95; font: 700 10px/1 var(--ff-body); letter-spacing: .12em; }
.brand-guide__section { padding: clamp(72px, 10vw, 150px) 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.brand-guide__label { margin-bottom: 34px; }
.brand-guide__identity { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: end; }
.brand-guide__wordmark { font: 900 clamp(48px, 9vw, 130px)/.82 var(--ff-display); letter-spacing: -.045em; }
.brand-guide__identity p { max-width: 440px; color: #a5a5aa; line-height: 1.75; }
.brand-guide__logo-system { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: center; }
.brand-guide__safe-area { position: relative; min-height: 360px; display: grid; place-items: center; overflow: hidden; border: 1px dashed rgba(255,255,255,.32); background: linear-gradient(135deg, rgba(0,13,255,.18), transparent 55%); }
.brand-guide__safe-area::before, .brand-guide__safe-area::after { content: ''; position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.14); pointer-events: none; }
.brand-guide__safe-area::after { inset: 26%; border-color: rgba(0,13,255,.7); }
.brand-guide__safe-area .brand-guide__wordmark { position: relative; z-index: 1; font-size: clamp(38px, 6vw, 82px); }
.brand-guide__wordmark sup, .brand-guide__application sup { color: var(--software); font-size: .28em; vertical-align: top; }
.brand-guide__safe-area i { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--software); box-shadow: -120px -78px 0 -4px var(--software), 120px 78px 0 -4px var(--software); animation: safeAreaPulse 2.6s ease-in-out infinite; }
@keyframes safeAreaPulse { 50% { transform: scale(1.5); opacity: .55; } }
.brand-guide__logo-rules { display: grid; gap: 0; }
.brand-guide__logo-rules article { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.brand-guide__logo-rules b { color: #f3f3f2; font: 800 15px/1 var(--ff-display); }
.brand-guide__logo-rules p { margin-top: 8px; color: #a5a5aa; line-height: 1.6; }
.brand-guide__colours { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.brand-guide__colour { position: relative; min-height: 290px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 18px; cursor: copy; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.brand-guide__colour:hover { transform: translateY(-10px) rotate(-1deg); }
.brand-guide__colour:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.brand-guide__colour::after { content: 'KOPIERT'; position: absolute; top: 18px; right: 18px; padding: 8px 10px; border-radius: 999px; background: rgba(0,0,0,.7); color: #fff; font: 800 10px/1 var(--ff-body); letter-spacing: .1em; opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; }
.brand-guide__colour.is-copied::after { opacity: 1; transform: translateY(0); }
.brand-guide__colour span, .brand-guide__colour small { font: 700 11px/1.3 var(--ff-body); letter-spacing: .08em; text-transform: uppercase; }
.brand-guide__colour strong { font: 900 clamp(22px, 2.2vw, 34px)/1 var(--ff-display); }
.brand-guide__colour--studio { background: #ff2900; color: #fff; }
.brand-guide__colour--software { background: #000dff; color: #fff; }
.brand-guide__colour--dark { background: #0b0b0d; color: #fff; border: 1px solid rgba(255,255,255,.15); }
.brand-guide__colour--light { background: #f2f2ee; color: #17171b; }
.brand-guide__type { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; }
.brand-guide__type span { display: block; margin-bottom: 18px; color: var(--software); font: 700 11px/1 var(--ff-body); letter-spacing: .1em; }
.brand-guide__type strong { font: 900 clamp(44px, 6vw, 86px)/.9 var(--ff-display); letter-spacing: -.04em; }
.brand-guide__type p { max-width: 410px; color: #a5a5aa; font-size: 18px; line-height: 1.7; }
.brand-guide__principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.brand-guide__principles article { padding: 28px 0; border-top: 2px solid rgba(255,255,255,.2); transition: border-color .25s ease, transform .25s ease; }
.brand-guide__principles article:hover { border-color: var(--software); transform: translateY(-6px); }
.brand-guide__principles b { color: var(--software); font: 800 12px/1 var(--ff-display); }
.brand-guide__principles h2 { margin: 36px 0 12px; font: 800 28px/1 var(--ff-display); }
.brand-guide__principles p, .brand-guide__closing > p:last-child { color: #a5a5aa; line-height: 1.65; }
.brand-guide__applications { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.brand-guide__application { min-height: 270px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 16px; overflow: hidden; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.brand-guide__application:hover { transform: translateY(-10px) rotate(-1deg); }
.brand-guide__application > span { font: 800 10px/1 var(--ff-body); letter-spacing: .12em; }
.brand-guide__application strong { font: 900 clamp(26px, 3vw, 42px)/.85 var(--ff-display); letter-spacing: -.04em; }
.brand-guide__application strong span { color: var(--software); }
.brand-guide__application p { font-size: 13px; line-height: 1.55; }
.brand-guide__application--dark { background: #0b0b0d; color: #fff; }
.brand-guide__application--light { background: #f2f2ee; color: #17171b; }
.brand-guide__application--studio { background: #ff2900; color: #fff; }
.brand-guide__application--software { background: #000dff; color: #fff; }
.brand-guide__closing h2 { margin: 0 0 24px; font: 900 clamp(52px, 9vw, 130px)/.83 var(--ff-display); letter-spacing: -.045em; }
.brand-guide__closing > p:last-child { max-width: 500px; font-size: 17px; }
.brand-guide__footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 32px clamp(28px, 5vw, 80px); background: #f2f2ee; color: #17171b; }
.brand-guide__footer > span { font: 900 clamp(28px, 4vw, 56px)/.85 var(--ff-display); letter-spacing: -.04em; }
.brand-guide__footer > span span { color: var(--software); }
.brand-guide__footer p { color: #67676d; font-size: 13px; }
.brand-guide__footer a { color: var(--software); font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 800px) {
  .brand-guide__hero { min-height: 100svh; }
  .brand-guide__identity, .brand-guide__type, .brand-guide__logo-system { grid-template-columns: 1fr; gap: 30px; }
  .brand-guide__colours { grid-template-columns: repeat(2, 1fr); }
  .brand-guide__colour { min-height: 190px; }
  .brand-guide__principles { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .brand-guide__applications { grid-template-columns: repeat(2, 1fr); }
  .brand-guide__application { min-height: 200px; }
  .brand-guide__safe-area { min-height: 260px; }
  .brand-guide__hero-meta { margin-top: 36px; }
  .brand-guide__footer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 900px) {
  .studio-guide-showcase { min-height: auto; padding-top: 120px; padding-bottom: 80px; }
  .studio-guide-laptop-slot { min-height: auto; }
  .studio-guide-laptop--hero { position: relative; top: auto; width: min(100%, 560px); margin-inline: auto; transform: translateY(var(--laptop-lift)); }
  .studio-guide-laptop.is-docked { display: none; }
  .studio-guide-laptop:hover { --laptop-lift: -4px; }
  .software-demo-showcase { min-height:auto; padding-top:100px; padding-bottom:72px; }
  .software-demo-slot { min-height:auto; }
  .software-demo-devices { max-width:560px; margin:0 auto; align-items:flex-end; gap:16px; }
  .software-demo-phone { flex-basis:clamp(110px,28vw,170px); }
  .software-demo-devices.is-docked { display:none; }
}
@media (max-width: 560px) {
  .software-demo-devices { flex-direction:column; align-items:center; }
  .software-demo-laptop { width:100%; }
  .software-demo-phone { flex:none; width:min(46%,180px); }
}