/* ==========================================================================
   HELVERUX — Design System
   Swiss precision · AI-native technology company
   Author: Helverux SA — Lausanne, Vaud, Switzerland
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand */
  --brand-1: #2e6bff;
  --brand-2: #7c5cff;
  --brand-3: #00d3c7;
  --swiss-red: #e4322b;

  --gradient-brand: linear-gradient(115deg, var(--brand-1) 0%, var(--brand-2) 48%, var(--brand-3) 100%);
  --gradient-soft: linear-gradient(115deg, rgba(46, 107, 255, .16), rgba(124, 92, 255, .12) 50%, rgba(0, 211, 199, .14));

  /* Dark theme (default) */
  --bg: #05070b;
  --bg-alt: #080b11;
  --surface: rgba(255, 255, 255, .026);
  --surface-2: rgba(255, 255, 255, .045);
  --surface-solid: #0c1017;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  --text: #eaeff7;
  --text-2: #b3bdcc;
  --muted: #7c8798;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 18px 40px -18px rgba(0, 0, 0, .8);
  --shadow-lg: 0 48px 90px -40px rgba(0, 0, 0, .9);
  --glow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 70px -30px rgba(46, 107, 255, .45);
  --noise-opacity: .035;
  --grid-line: rgba(255, 255, 255, .045);
  --scheme: dark;

  /* Type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-eyebrow: .6875rem;
  --fs-body: 1rem;
  --fs-lead: clamp(1.0625rem, .95rem + .5vw, 1.25rem);
  --fs-h4: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-h3: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  --fs-h2: clamp(2rem, 1.5rem + 2.1vw, 3.25rem);
  --fs-h1: clamp(2.75rem, 1.7rem + 4.4vw, 5.25rem);
  --fs-display: clamp(3.25rem, 1.6rem + 6.6vw, 7rem);

  /* Space & shape */
  --wrap: 1240px;
  --wrap-narrow: 860px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(5rem, 9vw, 9.5rem);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --dur-1: .22s;
  --dur-2: .45s;
  --dur-3: .9s;
}

[data-theme="light"] {
  --bg: #f6f7f9;
  --bg-alt: #ffffff;
  --surface: rgba(10, 14, 22, .028);
  --surface-2: rgba(10, 14, 22, .05);
  --surface-solid: #ffffff;
  --line: rgba(10, 14, 22, .1);
  --line-strong: rgba(10, 14, 22, .2);
  --text: #080b11;
  --text-2: #3d4757;
  --muted: #616d7f;
  --shadow-md: 0 18px 40px -22px rgba(10, 20, 40, .28);
  --shadow-lg: 0 46px 90px -46px rgba(10, 20, 40, .35);
  --glow: 0 0 0 1px rgba(10, 14, 22, .06), 0 30px 70px -34px rgba(46, 107, 255, .35);
  --noise-opacity: .02;
  --grid-line: rgba(10, 14, 22, .05);
  --scheme: light;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  color-scheme: var(--scheme);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out);
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.03em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

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

:focus-visible {
  outline: 2px solid var(--brand-3);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--bg);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 6vw, 6rem); }
.section--alt { background: var(--bg-alt); }

.section--line::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
}

.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 999;
  padding: .7rem 1.1rem;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--dur-1) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* Flipping data-theme changes every colour token at once, so every element
   that transitions a colour starts animating simultaneously — hundreds of them,
   several with blurred backdrops. The switch is meant to be instant anyway, so
   transitions are suppressed for the one frame it takes to repaint.
   Set and cleared by Theme.set() in main.js. */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
  animation-duration: .001s !important;
}

/* Ambient page texture */
.texture {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.texture::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 10%, transparent 75%);
}
.texture::after {
  content: "";
  position: absolute;
  inset: -50%;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, header, footer { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   4. Typography helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gradient-brand);
}
.eyebrow--plain::before { display: none; }

.display { font-size: var(--fs-display); }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); letter-spacing: -.02em; }

.lead {
  font-size: var(--fs-lead);
  color: var(--text-2);
  line-height: 1.6;
  max-width: 62ch;
}

.muted { color: var(--muted); }
.text-2 { color: var(--text-2); }

.grad-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mono {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .04em;
}

.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .eyebrow { margin-bottom: 1.25rem; }
.section-head .lead { margin-top: 1.35rem; }

.section-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--text);
  --btn-fg: var(--bg);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
  will-change: transform;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

.btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--dur-2) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary {
  --btn-fg: #fff;
  background: var(--gradient-brand);
  background-size: 180% 180%;
  background-position: 0% 50%;
  box-shadow: 0 14px 34px -16px rgba(46, 107, 255, .8);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-position var(--dur-3) var(--ease-out);
}
.btn--primary:hover {
  background-position: 100% 50%;
  box-shadow: 0 22px 46px -18px rgba(124, 92, 255, .9);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: var(--text); background: var(--surface); }

.btn--sm { padding: .6rem 1.15rem; font-size: .875rem; }
.btn--lg { padding: 1.1rem 2rem; font-size: 1rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--text);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--brand-3), var(--brand-3));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  /* backdrop-filter is deliberately NOT in this list. Animating it makes the
     browser re-blur the strip behind the header on every frame for the whole
     transition, which is the single most expensive thing on a phone GPU. */
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.header.is-stuck {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--line);
}

.header.is-hidden { transform: translateY(-102%); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  flex: none;
}
.brand__logo { height: 30px; width: auto; }
.brand__logo--full { display: block; }
.brand:hover .brand__logo { animation: brand-pulse .6s var(--ease-out); }

/* The mark ships as a black silhouette on transparency. On the dark theme that
   would sit invisibly on a near-black page, so it is inverted to white. One
   asset, both themes — see .founder__mark for the same treatment on the plates. */
[data-theme="dark"] .brand__logo { filter: invert(1); }

/* Wordmark — remove this span once a full lockup logo file is supplied */
.brand__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text);
}
.brand__name--lg { font-size: 1.25rem; }

@keyframes brand-pulse {
  50% { transform: translateY(-2px) rotate(-1.5deg); }
}

.nav {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.nav__link {
  position: relative;
  padding: .55rem .9rem;
  border-radius: var(--r-pill);
  font-size: .9125rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.nav__link:hover { color: var(--text); background: var(--surface); }
.nav__link.is-active { color: var(--text); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .18rem;
  translate: -50% 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gradient-brand);
}

.header__actions { display: flex; align-items: center; gap: .5rem; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--text-2);
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface); transform: translateY(-1px); }
.icon-btn svg { width: 17px; height: 17px; }

.theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Language switcher */
.lang { position: relative; }
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 38px;
  padding: 0 .8rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--text-2);
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.lang__btn:hover, .lang.is-open .lang__btn { color: var(--text); border-color: var(--line-strong); background: var(--surface); }
.lang__btn svg { width: 12px; height: 12px; transition: transform var(--dur-2) var(--ease-out); }
.lang.is-open .lang__btn svg { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 172px;
  padding: .4rem;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.97);
  transform-origin: top right;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-2);
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; }

.lang__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  padding: .55rem .7rem;
  border-radius: var(--r-sm);
  font-size: .875rem;
  color: var(--text-2);
  text-align: left;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.lang__item:hover { background: var(--surface-2); color: var(--text); }
.lang__item[aria-current="true"] { color: var(--text); font-weight: 600; }
.lang__item span { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; color: var(--muted); }

/* Mobile menu */
.burger { display: none; width: 38px; height: 38px; place-items: center; border-radius: var(--r-pill); border: 1px solid var(--line); }
.burger__box { position: relative; width: 17px; height: 11px; }
.burger__box i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.burger__box i:nth-child(1) { top: 0; }
.burger__box i:nth-child(2) { top: 50%; translate: 0 -50%; }
.burger__box i:nth-child(3) { bottom: 0; }
body.menu-open .burger__box i:nth-child(1) { transform: translateY(4.75px) rotate(45deg); }
body.menu-open .burger__box i:nth-child(2) { opacity: 0; }
body.menu-open .burger__box i:nth-child(3) { transform: translateY(-4.75px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  padding: 108px var(--gutter) 2.5rem;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-out), visibility var(--dur-2);
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }

.mobile-menu__nav { display: grid; gap: .25rem; }
.mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.035em;
  opacity: 0;
  transform: translateY(18px);
}
body.menu-open .mobile-menu__link {
  animation: menu-in .6s var(--ease-out) forwards;
  animation-delay: calc(.08s * var(--i, 0) + .12s);
}
.mobile-menu__link span {
  font-family: var(--font-mono);
  font-size: .6875rem;
  color: var(--muted);
  letter-spacing: .1em;
}

@keyframes menu-in { to { opacity: 1; transform: none; } }

.mobile-menu__foot { display: grid; gap: 1rem; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: clamp(680px, 100svh, 1020px);
  display: flex;
  align-items: center;
  padding-top: 120px;
  padding-bottom: clamp(3rem, 6vw, 6rem);
  overflow: hidden;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .85;
  mask-image: radial-gradient(ellipse 75% 70% at 60% 45%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 60% 45%, #000 20%, transparent 78%);
}

/* The blur that used to sit here — filter: blur(70px) on this element, with
   three circles drifting inside it forever — was the most expensive thing on
   the desktop page. A filter on a parent cannot be cached while its children
   move: every frame the browser redrew the circles, blended them, then re-ran
   a 70px gaussian over a viewport-sized layer. It never stopped, not even once
   the hero was scrolled past. The phone breakpoint further down already traded
   this away; what follows is the same trade for the desktop.
   The softness now comes from the gradients themselves — a mid stop makes the
   falloff read the same — and the circles are a little larger because the blur
   used to spread them. Each one is now a plain layer the GPU moves with a
   composited transform, with nothing to repaint. */
.hero__aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  z-index: 0;
  pointer-events: none;
  opacity: .82;
}
.hero__aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
/* Nothing on screen to animate for. main.js adds this once the hero leaves the
   viewport and takes it off again on the way back. */
.hero__aurora.is-idle i { animation-play-state: paused; }

[data-theme="light"] .hero__aurora { opacity: .5; }
[data-theme="light"] .hero__aurora i { mix-blend-mode: multiply; }

.hero__aurora i:nth-child(1) {
  width: 52vw; height: 52vw; left: 2%; top: 10%;
  background: radial-gradient(circle, rgba(46, 107, 255, .5), rgba(46, 107, 255, .26) 38%, transparent 72%);
  animation: drift-a 22s var(--ease-in-out) infinite alternate;
}
.hero__aurora i:nth-child(2) {
  width: 46vw; height: 46vw; right: 4%; top: 2%;
  background: radial-gradient(circle, rgba(124, 92, 255, .46), rgba(124, 92, 255, .23) 38%, transparent 72%);
  animation: drift-b 26s var(--ease-in-out) infinite alternate;
}
.hero__aurora i:nth-child(3) {
  width: 44vw; height: 44vw; left: 40%; bottom: 10%;
  background: radial-gradient(circle, rgba(0, 211, 199, .44), rgba(0, 211, 199, .22) 38%, transparent 72%);
  animation: drift-c 30s var(--ease-in-out) infinite alternate;
}

@keyframes drift-a { to { transform: translate3d(9%, 8%, 0) scale(1.18); } }
@keyframes drift-b { to { transform: translate3d(-11%, 12%, 0) scale(1.1); } }
@keyframes drift-c { to { transform: translate3d(6%, -14%, 0) scale(1.22); } }

.hero__inner { position: relative; z-index: 2; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .5rem .45rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  backdrop-filter: blur(10px);
  font-size: .8125rem;
  color: var(--text-2);
  margin-bottom: 1.75rem;
}
.hero__badge b { color: var(--text); font-weight: 600; }
.hero__badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-3);
  box-shadow: 0 0 0 0 rgba(0, 211, 199, .6);
  animation: pulse-dot 2.4s infinite;
}
.hero__badge .chip {
  padding: .2rem .55rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(0, 211, 199, .55); }
  70% { box-shadow: 0 0 0 9px rgba(0, 211, 199, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 211, 199, 0); }
}

.hero__title {
  font-size: var(--fs-h1);
  max-width: 15ch;
  margin-bottom: 1.75rem;
}
.hero__title em { font-style: normal; }

.hero__lead { max-width: 54ch; margin-bottom: 2.5rem; }

.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

.hero__meta {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hero__meta div {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  padding: 1.4rem 1.5rem;
}
.hero__meta dt {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .5rem;
}
.hero__meta dd {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.02em;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  translate: -50% 0;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.scroll-cue i {
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--line-strong), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue i::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 40%;
  background: var(--brand-3);
  animation: cue 2.2s var(--ease-in-out) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(250%); }
}

/* --------------------------------------------------------------------------
   8. Marquee
   -------------------------------------------------------------------------- */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 1.75rem;
  border-block: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 3.5rem;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.marquee__item::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand-1);
  opacity: .7;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--brand-1) 22%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.card:hover::before { opacity: 1; }

.card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  margin-bottom: 1.4rem;
  color: var(--text);
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.card__icon svg { width: 21px; height: 21px; }
.card:hover .card__icon { border-color: color-mix(in srgb, var(--brand-1) 55%, transparent); color: var(--brand-3); }

.card__title { font-size: var(--fs-h4); margin-bottom: .7rem; }
.card__text { color: var(--text-2); font-size: .9375rem; line-height: 1.65; }

.card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.4rem; }
.tag {
  padding: .28rem .6rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Status pills — product availability */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.pill i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pill--live {
  color: var(--brand-3);
  border-color: color-mix(in srgb, var(--brand-3) 32%, transparent);
  background: color-mix(in srgb, var(--brand-3) 10%, transparent);
}
.pill--live i {
  box-shadow: 0 0 0 0 rgba(0, 211, 199, .6);
  animation: pulse-dot 2.4s infinite;
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.card__kicker {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.card__lead {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin-bottom: .85rem;
}
.card__foot { margin-top: 1.75rem; }

.note-strip {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: center;
  margin-top: 1.5rem;
  padding: .9rem 1.2rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  font-size: .875rem;
  color: var(--text-2);
  text-align: center;
}
.note-strip svg { width: 17px; height: 17px; color: var(--brand-3); flex: none; }

.card--num .card__num {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  color: var(--brand-3);
  margin-bottom: 1rem;
  display: block;
}
/* Icon + number together: tighten the stack so the card head stays compact */
.card--num .card__icon { margin-bottom: 1.05rem; }
.card--num .card__icon + .card__num { margin-bottom: .45rem; }

.card--feature {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 3vw, 3rem);
}

/* --------------------------------------------------------------------------
   10. Split / feature blocks
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split--reverse .split__media { order: -1; }

.split__body .eyebrow { margin-bottom: 1.25rem; }
.split__body h2 { margin-bottom: 1.25rem; }

.checklist { display: grid; gap: .9rem; margin-top: 2rem; }
.checklist li { display: flex; gap: .8rem; align-items: flex-start; list-style: none; color: var(--text-2); font-size: .9375rem; }
.checklist svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--brand-3); }
.checklist b { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------------
   11. Product mock (Shiftorix UI)
   -------------------------------------------------------------------------- */

.mock {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface-solid) 96%, transparent), var(--bg-alt));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out);
}
.mock::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, .07), transparent 42%);
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.mock__dots { display: flex; gap: .38rem; }
.mock__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.mock__url {
  flex: 1;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: .6875rem;
  color: var(--muted);
  text-align: center;
}

.mock__body { padding: 1.15rem; display: grid; gap: .9rem; }

.mock__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mock__head strong { font-family: var(--font-display); font-size: 1rem; letter-spacing: -.02em; }
.mock__pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .6rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--brand-3) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-3) 30%, transparent);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .08em;
  color: var(--brand-3);
}

.mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.mock__kpi {
  padding: .75rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.mock__kpi span {
  display: block;
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .3rem;
}
.mock__kpi b { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.03em; }

.mock__grid {
  display: grid;
  grid-template-columns: 76px repeat(7, minmax(0, 1fr));
  gap: 4px;
  align-items: center;
}
.mock__grid .lbl {
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.mock__cell {
  height: 22px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}
.mock__cell--on {
  background: color-mix(in srgb, var(--brand-1) 40%, transparent);
  border-color: color-mix(in srgb, var(--brand-1) 55%, transparent);
}
.mock__cell--ai {
  background: color-mix(in srgb, var(--brand-3) 34%, transparent);
  border-color: color-mix(in srgb, var(--brand-3) 55%, transparent);
}
.mock__cell--warn {
  background: color-mix(in srgb, var(--brand-2) 34%, transparent);
  border-color: color-mix(in srgb, var(--brand-2) 55%, transparent);
}
.mock__cell--pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: translateX(-100%);
  animation: sweep 2.6s var(--ease-in-out) infinite;
}
@keyframes sweep { 60%, 100% { transform: translateX(100%); } }

.mock__note {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .85rem;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--brand-3) 26%, transparent);
  background: color-mix(in srgb, var(--brand-3) 8%, transparent);
  font-size: .78rem;
  color: var(--text-2);
}
.mock__note svg { width: 15px; height: 15px; color: var(--brand-3); flex: none; }

/* Module rail — the mock reads as a real multi-module app, not a single grid */
.mock__tabs {
  display: flex;
  gap: .3rem;
  padding-bottom: .15rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.mock__tabs::-webkit-scrollbar { display: none; }
.mock__tab {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .38rem .68rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: .7rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  flex: none;
}
.mock__tab svg { width: 13px; height: 13px; flex: none; }
.mock__tab--on {
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand-1) 45%, transparent);
  background: color-mix(in srgb, var(--brand-1) 15%, transparent);
}

/* --------------------------------------------------------------------------
   10b. Product identity — the Shiftorix mark and its official address
   -------------------------------------------------------------------------- */

/* Product marks ship as black silhouettes on transparency, so the dark theme
   inverts them — same treatment as the Helverux brand logo. No plate behind
   them: the mark is a finished shape and a box around it only adds noise. */
.mark { display: block; width: auto; flex: none; }
[data-theme="dark"] .mark { filter: invert(1); }
.mark--xl { height: 46px; }
.mark--lg { height: 36px; }
.mark--md { height: 30px; }
.mark--sm { height: 22px; }

/* Sits in the mock's address bar the way a favicon sits in a browser tab */
.mock__fav { display: inline-block; height: 11px; width: auto; margin-right: .4rem; vertical-align: -1px; }
[data-theme="dark"] .mock__fav { filter: invert(1); }

/* Closing brand moment above the final call to action */
.cta__mark { margin: 0 auto 1.75rem; }

/* Product lockup: mark, name, official address. The whole block is the link —
   a 12px line of text is not a click target. */
.prodmark {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  margin-top: 1.5rem;
  padding: .6rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.prodmark:hover {
  border-color: color-mix(in srgb, var(--brand-1) 50%, transparent);
  background: var(--surface-2);
  transform: translateY(-2px);
}
.prodmark:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 3px; }

.prodmark__body { display: grid; gap: .12rem; min-width: 0; }
.prodmark__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.prodmark__link {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--muted);
  transition: color var(--dur-1) var(--ease-out);
}
.prodmark:hover .prodmark__link { color: var(--brand-3); }
.prodmark__link svg { width: 11px; height: 11px; flex: none; transition: transform var(--dur-2) var(--ease-out); }
.prodmark:hover .prodmark__link svg { transform: translate(2px, -2px); }

/* Inline external address, used inside cards and the footer */
.extlink { display: inline-flex; align-items: center; gap: .3rem; }
.extlink svg { width: 11px; height: 11px; flex: none; opacity: .75; }

/* An outbound address sitting beside a primary link is secondary — it should
   not compete with it, and its arrow points out of the site rather than along it. */
.link-arrow.extlink { color: var(--muted); font-weight: 500; }
.link-arrow.extlink:hover { color: var(--text); }
.link-arrow.extlink svg { width: 13px; height: 13px; }
.link-arrow.extlink:hover svg { transform: translate(2px, -2px); }

/* --------------------------------------------------------------------------
   11a. Consolidation visual — many scattered tools collapsing into one
   -------------------------------------------------------------------------- */

/* Panels size to their own content — forcing equal heights leaves a dead gap
   under the shorter one, since the two sides deliberately hold different amounts. */
.sprawl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}

.sprawl__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 2.4vw, 2rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.sprawl__panel--before { border-style: dashed; }
.sprawl__panel--after {
  border-color: color-mix(in srgb, var(--brand-1) 40%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand-1) 9%, transparent), transparent 62%), var(--surface);
  box-shadow: var(--glow);
}

.sprawl__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.35rem;
}
.sprawl__brand { display: inline-flex; align-items: center; gap: .55rem; }
.sprawl__label {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.sprawl__count {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--muted);
}
.sprawl__panel--after .sprawl__count {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The scattered side: chips sit at slight angles so the block reads as clutter */
.sprawl__cloud { display: flex; flex-wrap: wrap; gap: .45rem; }
.sprawl__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: .75rem;
  color: var(--muted);
  transition: transform var(--dur-2) var(--ease-out);
}
.sprawl__chip::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
  flex: none;
}
.sprawl__chip:nth-child(3n)   { transform: rotate(-1.4deg); }
.sprawl__chip:nth-child(3n+1) { transform: rotate(1.1deg); }
.sprawl__chip:nth-child(4n)   { transform: rotate(2deg); }

/* The consolidated side: the same jobs, as one ordered list */
.sprawl__mods { display: grid; gap: .4rem; }
.sprawl__mod {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .2rem;
  font-size: .8125rem;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
}
.sprawl__mod:last-child { border-bottom: 0; }
.sprawl__mod svg { width: 15px; height: 15px; flex: none; color: var(--brand-3); }

.sprawl__link { margin-top: 1.5rem; }

/* Connector — an arrow on desktop, a downward chevron once the grid stacks */
.sprawl__arrow {
  display: grid;
  place-items: center;
  align-self: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text-2);
  flex: none;
}
.sprawl__arrow svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .sprawl { grid-template-columns: minmax(0, 1fr); }
  .sprawl__arrow { transform: rotate(90deg); justify-self: center; }
}

/* --------------------------------------------------------------------------
   11b. Layer stack visual
   -------------------------------------------------------------------------- */

.layers { display: grid; gap: .6rem; position: relative; }
.layers::before {
  content: "";
  position: absolute;
  left: -1.4rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  border-radius: 2px;
  background: var(--gradient-brand);
  opacity: .5;
}
.layer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.layer:hover {
  border-color: color-mix(in srgb, var(--brand-1) 50%, transparent);
  background: var(--surface-2);
  transform: translateX(5px);
}
.layer b { font-family: var(--font-display); font-size: .9375rem; font-weight: 600; letter-spacing: -.015em; }
.layer span {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 900px) { .layers::before { left: -.9rem; } }

/* --------------------------------------------------------------------------
   12. Steps / process
   -------------------------------------------------------------------------- */

.steps { display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .18em;
  color: var(--muted);
  padding-top: .35rem;
}
.step__title { font-size: var(--fs-h3); }
.step__text { color: var(--text-2); font-size: .9375rem; }
.step:hover .step__title { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step__title { transition: color var(--dur-2) var(--ease-out); }

/* --------------------------------------------------------------------------
   13. Stats
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat { background: var(--bg); padding: clamp(1.5rem, 3vw, 2.25rem); }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
  margin-bottom: .6rem;
}
.stat__label { font-size: .875rem; color: var(--muted); }
.section--alt .stat { background: var(--bg-alt); }

/* --------------------------------------------------------------------------
   14. Accordion
   -------------------------------------------------------------------------- */

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.4rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
  transition: color var(--dur-1) var(--ease-out);
}
.acc__btn:hover { color: var(--brand-3); }
.acc__ico {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
}
.acc__ico::before, .acc__ico::after {
  content: "";
  position: absolute;
  inset: 50% 5px auto;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.acc__ico::after { transform: rotate(90deg); }
.acc__item.is-open .acc__ico::after { transform: rotate(0); opacity: 0; }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-2) var(--ease-out);
}
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding-bottom: 1.5rem; color: var(--text-2); max-width: 70ch; font-size: .9375rem; }

/* --------------------------------------------------------------------------
   15. CTA band
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--bg-alt);
  overflow: hidden;
  text-align: center;
}
.cta::before {
  content: "";
  position: absolute;
  inset: -60% -10% auto -10%;
  height: 180%;
  background: var(--gradient-soft);
  filter: blur(50px);
  opacity: .9;
  animation: drift-a 24s var(--ease-in-out) infinite alternate;
}
.cta > * { position: relative; }
.cta h2 { margin-bottom: 1.25rem; }
.cta .lead { margin-inline: auto; margin-bottom: 2.25rem; }
.cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .85rem; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-bottom: 2rem;
  background: var(--bg-alt);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, .8fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.footer__brand p { color: var(--muted); font-size: .9375rem; max-width: 34ch; margin-top: 1.25rem; }
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.footer__col ul { list-style: none; display: grid; gap: .7rem; }
.footer__col a {
  font-size: .9375rem;
  color: var(--text-2);
  transition: color var(--dur-1) var(--ease-out), padding-left var(--dur-2) var(--ease-out);
}
.footer__col a:hover { color: var(--text); padding-left: 5px; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--muted);
}
.footer__legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer__legal a:hover { color: var(--text); }

.swiss-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .7rem .3rem .45rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: .75rem;
  color: var(--text-2);
}
.swiss-badge svg { width: 15px; height: 15px; border-radius: 3px; }

.socials { display: flex; gap: .5rem; margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   17. Page header (inner pages)
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  padding-top: clamp(9rem, 15vw, 12rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: -40% 20% auto -10%;
  height: 140%;
  background: var(--gradient-soft);
  filter: blur(80px);
  opacity: .8;
  pointer-events: none;
  animation: drift-b 28s var(--ease-in-out) infinite alternate;
}
.page-hero > * { position: relative; }
.page-hero h1 { margin-block: 1.4rem; max-width: 18ch; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.breadcrumb a:hover { color: var(--text); }
.breadcrumb span { opacity: .5; }

/* --------------------------------------------------------------------------
   18. Timeline
   -------------------------------------------------------------------------- */

.timeline { display: grid; gap: 0; position: relative; }
.timeline__item {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
  border-top: 1px solid var(--line);
  position: relative;
}
.timeline__item:last-child { border-bottom: 1px solid var(--line); }
.timeline__year {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--brand-3);
  padding-top: .3rem;
}
.timeline__item h3 { font-size: var(--fs-h4); margin-bottom: .5rem; }
.timeline__item p { color: var(--text-2); font-size: .9375rem; max-width: 62ch; }

/* --------------------------------------------------------------------------
   19. Founder card
   -------------------------------------------------------------------------- */

.founder {
  display: grid;
  /* Tuned for the square brand plate; a 4:5 photograph wants closer to .85fr */
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  overflow: hidden;
}
.founder__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 100% at 30% 0%, color-mix(in srgb, var(--brand-1) 26%, transparent), transparent 60%),
    radial-gradient(100% 100% at 80% 100%, color-mix(in srgb, var(--brand-3) 22%, transparent), transparent 60%),
    var(--surface-2);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.founder__portrait img { width: 100%; height: 100%; object-fit: cover; }
.founder__initials {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -.05em;
  color: var(--text);
  opacity: .9;
}

/* Three equal cards, stacked */
.founders { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }

/* Brand plate — stands in for a portrait until a real photograph exists.
   The mark carries its own gradient, so the tile behind it stays quiet.
   Square rather than 4:5: a logo is not a face, and three tall cards in a
   row would push the section past any reasonable scroll. */
.founder__portrait--mark {
  aspect-ratio: 1;
  background:
    radial-gradient(76% 58% at 50% 42%, color-mix(in srgb, var(--brand-2) 20%, transparent), transparent 70%),
    var(--surface-2);
}
.founder__portrait--mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(70% 60% at 50% 45%, transparent 30%, #000 100%);
  opacity: .8;
  pointer-events: none;
}
.founder__portrait img.founder__mark {
  position: relative;
  z-index: 1;
  width: 48%;            /* the mark is a wide triangle, so it needs more room than a square badge */
  max-width: 168px;
  height: auto;
  object-fit: contain;
}

/* Black silhouette: inverted to white on the dark theme, left as-is on the light one.
   On a light plate a black drop shadow reads as smudge, so it is tinted to the brand. */
[data-theme="dark"] .founder__portrait img.founder__mark { filter: invert(1) drop-shadow(0 20px 36px rgba(0, 0, 0, .5)); }
[data-theme="light"] .founder__portrait img.founder__mark { filter: drop-shadow(0 16px 30px rgba(46, 107, 255, .22)); }

.founder__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.founder__quote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.35;
  margin-bottom: 1.75rem;
}
.founder__name { font-weight: 600; }
.founder__role { color: var(--muted); font-size: .875rem; }

/* --------------------------------------------------------------------------
   20. Contact
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.contact-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.contact-list__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  padding: 1.35rem 1.5rem;
  background: var(--bg);
  transition: background-color var(--dur-2) var(--ease-out);
}
.section--alt .contact-list__item { background: var(--bg-alt); }
.contact-list__item:hover { background: var(--surface-2); }
.contact-list__item svg {
  grid-row: 1 / span 2;
  width: 19px; height: 19px;
  color: var(--brand-3);
  margin-top: 3px;
}
.contact-list__item dt {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .3rem;
}
.contact-list__item dd { font-size: .9375rem; font-weight: 500; }
.contact-list__item dd a:hover { color: var(--brand-3); }

.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .5rem; }
.field--row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
.field label {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: .9rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: .9375rem;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand-1) 60%, transparent);
  background: var(--surface-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-1) 12%, transparent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .7; }
.field select { cursor: pointer; padding-block: .85rem; }
.field select option { background: var(--surface-solid); color: var(--text); }

.form__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.form__note { font-size: .8125rem; color: var(--muted); max-width: 40ch; }

.form__status {
  display: none;
  padding: .9rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--brand-3) 35%, transparent);
  background: color-mix(in srgb, var(--brand-3) 10%, transparent);
  font-size: .875rem;
  color: var(--text);
}
.form__status.is-visible { display: block; animation: fade-up .5s var(--ease-out); }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
}

/* Map placeholder */
.map {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  display: grid;
  place-items: center;
}
.map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
}
.map__pin {
  position: relative;
  display: grid;
  place-items: center;
  gap: .75rem;
  text-align: center;
}
.map__pin i {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--brand-3);
  box-shadow: 0 0 0 0 rgba(0, 211, 199, .5);
  animation: pulse-dot 2.6s infinite;
}
.map__pin b { font-family: var(--font-display); letter-spacing: -.02em; }
.map__pin span { display: block; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }

/* --------------------------------------------------------------------------
   21. Legal / prose
   -------------------------------------------------------------------------- */

.prose { max-width: 74ch; }
.prose h2 { font-size: var(--fs-h3); margin-top: 3rem; margin-bottom: 1rem; }
.prose h3 { font-size: var(--fs-h4); margin-top: 2rem; margin-bottom: .65rem; }
.prose p, .prose li { color: var(--text-2); font-size: .9375rem; margin-bottom: .85rem; }
.prose ul { padding-left: 1.15rem; margin-bottom: 1rem; }
.prose li { margin-bottom: .4rem; }
.prose a { color: var(--brand-3); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); }

/* --------------------------------------------------------------------------
   22. Reveal animations
   -------------------------------------------------------------------------- */

/* Everything below is gated on html.js, set by assets/js/boot.js in <head>.
   Without it these elements would sit at opacity 0 forever, so a visitor whose
   JavaScript is blocked — or whose main.js simply failed to load — would be
   served a blank page. Hiding content is only safe if something is guaranteed
   to bring it back. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

html.js [data-reveal="fade"] { transform: none; }
html.js [data-reveal="left"] { transform: translateX(-30px); }
html.js [data-reveal="right"] { transform: translateX(30px); }
html.js [data-reveal="scale"] { transform: scale(.96); }

/* .word spans only exist once the splitter has run, so they are inherently
   script-dependent — but keep the guard for symmetry with [data-reveal]. */
html.js .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em) rotate(1.5deg);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--w, 0) * 42ms);
}
/* Must carry the same html.js prefix as the rule that hides them. Without it
   this selector scores lower than "html.js .word" and loses, leaving every
   split heading invisible for good. */
html.js .is-in .word, html.js .word.is-in { opacity: 1; transform: none; }

/* Parallax hooks */
[data-parallax] { will-change: transform; }

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav, .header__actions .btn { display: none; }
  .burger { display: grid; }
  .split, .contact-grid, .founder, .card--feature, .section-head--split {
    grid-template-columns: minmax(0, 1fr);
  }
  .split--reverse .split__media { order: 0; }
  .founder__portrait { max-width: 320px; }
  .card--feature { grid-column: span 1; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { grid-template-columns: 60px minmax(0, 1fr); }
  .step__text { grid-column: 2; }
  .timeline__item { grid-template-columns: 84px minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--row { grid-template-columns: minmax(0, 1fr); }
  .mock__grid { grid-template-columns: 46px repeat(7, minmax(0, 1fr)); gap: 3px; }
  .hero { min-height: auto; padding-top: 124px; }
  .scroll-cue { display: none; }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .timeline__item { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .acc__btn { gap: 1rem; }
  .card__head { flex-wrap: wrap; }

  /* Full-width call-to-action buttons only where they lead the layout */
  .hero__cta .btn,
  .cta__actions .btn,
  .page-hero .row > .btn,
  .mobile-menu__foot .btn,
  .form__foot .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   23b. Mobile & touch optimisation
   -------------------------------------------------------------------------- */

/* Safe areas (notches, home indicator, rounded corners) */
@supports (padding: max(0px)) {
  .wrap {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .mobile-menu {
    padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
}

/* Kill the 300ms delay and the grey flash on tap */
a, button, .btn, .card, summary, [role="button"], input, select, textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Body scroll lock while the mobile menu is open (set from JS) */
body.menu-open { position: fixed; inset-inline: 0; width: 100%; }
.mobile-menu { overscroll-behavior: contain; }

@media (max-width: 900px) {
  html { scroll-padding-top: 84px; }
  .header__inner { height: 64px; }
  .mobile-menu { padding-top: 96px; }

  /* Comfortable, thumb-sized controls */
  .icon-btn, .lang__btn, .burger { height: 42px; min-width: 42px; }
  .icon-btn, .burger { width: 42px; }
  .nav__link { padding-block: .75rem; }
  .footer__col a, .footer__legal a { display: inline-block; padding-block: .2rem; }

  /* iOS zooms the page when a focused field is under 16px — never let it */
  .field input, .field textarea, .field select { font-size: 16px; }

  /* Heavy compositing costs more than it gives on a phone */
  .texture::after { display: none; }
  /* Phones: trade every backdrop-filter for a more opaque background.
     Above the fold there were seven blurred layers at once — the header, the
     ghost buttons and the four hero facts — and each one makes the GPU sample
     and blur what is behind it on every repaint. Opening the language menu or
     flipping the theme repaints that whole region, which is exactly when the
     interface was stuttering. The look barely changes; the cost collapses. */
  .header.is-stuck {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in srgb, var(--bg) 95%, transparent);
  }
  .mobile-menu { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  .hero__meta div { backdrop-filter: none; background: color-mix(in srgb, var(--bg) 92%, transparent); }
  .btn--ghost { backdrop-filter: none; background: color-mix(in srgb, var(--bg) 55%, transparent); }
  .hero__badge { backdrop-filter: none; }

  /* On a phone the aurora drops the drift entirely and becomes what it reads as
     anyway: one static soft wash, painted once. The desktop rule above already
     gave up the parent blur that used to make this so expensive; here we also
     give up the motion and the blend mode, because a phone GPU still pays for
     three screen-blended layers moving over each other. */
  .hero__aurora {
    opacity: .5;
    background:
      radial-gradient(48% 38% at 18% 12%, rgba(46, 107, 255, .55), transparent 70%),
      radial-gradient(46% 36% at 82% 22%, rgba(124, 92, 255, .45), transparent 70%),
      radial-gradient(52% 42% at 60% 82%, rgba(0, 211, 199, .38), transparent 72%);
  }
  .hero__aurora i { display: none; }
  [data-theme="light"] .hero__aurora { opacity: .3; }

  /* Same pattern, same fix: keep the glow, drop the moving blur. */
  .page-hero::before, .cta::before { animation: none; filter: blur(46px); }
  .marquee__track { animation-duration: 30s; }
}

@media (max-width: 560px) {
  /* The header must never crowd on a 360px screen */
  .brand__logo { height: 26px; }
  .brand__name { font-size: .9375rem; letter-spacing: .12em; }
  .brand { gap: .55rem; }
  .header__actions { gap: .35rem; }
  .lang__btn { padding: 0 .6rem; gap: .3rem; }
  .lang__btn > svg:first-child { display: none; }
  .lang__menu { min-width: 156px; }

  .hero__badge { font-size: .75rem; gap: .45rem; padding-left: .65rem; }
  .hero__badge .chip { display: none; }
  .mock__url { font-size: .625rem; }
  .note-strip { flex-direction: column; gap: .5rem; }
  .founder__portrait { max-width: 100%; }
  .form__foot { flex-direction: column; align-items: stretch; }
  .form__note { max-width: none; }
}

@media (max-width: 380px) {
  .hero__meta { grid-template-columns: minmax(0, 1fr); }
  .mock__kpis { grid-template-columns: minmax(0, 1fr); }
  .brand__name { display: none; }
}

/* Touch devices: hover styles must not stick after a tap */
@media (hover: none) {
  .card:hover, .layer:hover, .btn:hover, .icon-btn:hover,
  .mock:hover, .contact-list__item:hover { transform: none; }
  .card:hover::before { opacity: 0; }
  .card:hover .card__icon { border-color: var(--line); color: var(--text); }
  .btn:hover svg { transform: none; }
  .step:hover .step__title { color: var(--text); background: none; -webkit-background-clip: initial; background-clip: initial; }
  .footer__col a:hover { padding-left: 0; }
  .marquee:hover .marquee__track { animation-play-state: running; }
  .brand:hover .brand__logo { animation: none; }

  /* Give touch its own feedback instead */
  .btn:active { transform: scale(.98); }
  .card:active, .layer:active { background: var(--surface-2); }
  .nav__link:active, .mobile-menu__link:active, .footer__col a:active { opacity: .6; }
}

/* Landscape phones: the hero should not demand a full screen height */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: 108px; padding-bottom: 3rem; }
  .scroll-cue { display: none; }
  .mobile-menu { padding-top: 84px; overflow-y: auto; }
  .mobile-menu__link { font-size: 1.5rem; padding-block: .5rem; }
}

/* --------------------------------------------------------------------------
   24. Motion & print preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], .word { opacity: 1 !important; transform: none !important; }
  .hero__canvas { display: none; }
}

@media print {
  .header, .mobile-menu, .texture, .scroll-cue, .hero__canvas, .hero__aurora { display: none !important; }
  body { background: #fff; color: #000; }
}