/* ============================================================
   KRASSTORIA — Design-Tokens
   Void-Schwarz / Beton-Grau / Stahl-Blau / Krass-Gelb / Kalk-Weiß / Glut-Orange
   ============================================================ */
:root {
  --c-void:      #121214;
  --c-void-2:    #1b1c1f;   /* leicht angehobene Fläche, z.B. Karten */
  --c-concrete:  #8a8b90;
  --c-steel:     #3e7cb1;
  --c-steel-dim: #294f6c;
  --c-signal:    #f5b700;
  --c-signal-dim:#8a6600;
  --c-chalk:     #edebe4;
  --c-ember:     #e8622c;

  --font-display: 'Fira Sans Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Fira Sans', system-ui, sans-serif;
  --font-mono:    'Fira Code', ui-monospace, 'Consolas', monospace;
  --font-slab:    'Zilla Slab', Georgia, serif;

  --fs-hero:  clamp(3rem, 11vw, 8.5rem);
  --fs-h2:    clamp(1.8rem, 4.2vw, 2.75rem);
  --fs-h3:    clamp(1.2rem, 2.4vw, 1.5rem);
  --fs-lead:  clamp(1.05rem, 1.6vw, 1.25rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-mono:  0.75rem;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --space-6: 7rem;

  --container: 84rem;
  --cut: 16px; /* Kappungsmaß der "gestempelten" Ecke */
  --nav-h: 5.5rem; /* Höhe von .site-nav__inner, ohne den border-bottom der Nav */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  background: var(--c-void);
  color: var(--c-chalk);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.05; text-wrap: balance; }

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

.skip-link {
  position: absolute; left: var(--space-2); top: -3rem;
  background: var(--c-signal); color: var(--c-void);
  padding: var(--space-1) var(--space-2); font-family: var(--font-mono);
  font-size: var(--fs-small); z-index: 200; transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--space-2); }

:focus-visible {
  outline: 2px solid var(--c-signal);
  outline-offset: 3px;
}

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-signal);
  margin-bottom: var(--space-2);
}

/* Gestempelte Ecke — wiederkehrendes Formmotiv auf Buttons & Karten */
.cut-corner {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

/* ============================================================
   Nav
   ============================================================ */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(18, 18, 20, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(237, 235, 228, 0.1);
}
.site-nav__inner {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
}

/* Sticky Nav überlagert sonst den Anker-Zielpunkt beim Springen zu #hero etc. */
#hero, #ueber, #server, #kontakt {
  scroll-margin-top: calc(var(--nav-h) + 2px); /* +2px = border-bottom der Nav */
}
.site-nav__brand {
  font-family: var(--font-slab); font-weight: 700;
  font-size: 1.6rem; letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 0.6rem;
}
.site-nav__mark {
  width: 3rem; height: 3rem; display: block; object-fit: contain;
}
.site-nav__menu { display: flex; align-items: center; gap: var(--space-4); }
.site-nav__menu a {
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding-block: 0.25rem; border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.site-nav__menu a:hover,
.site-nav__menu a:focus-visible,
.site-nav__menu a.is-active { border-color: var(--c-signal); color: var(--c-signal); }
/* Am rechten Rand angedockter Sprachumschalter, unterhalb der Sticky-Nav.
   Nur im DOM, wenn count(LOCALES) > 1 - siehe includes/header.php. */
.lang-dock {
  position: fixed; top: calc(var(--nav-h) + 2px); z-index: 90;
  /* rechter Rand fluchtet mit dem Nav-Container statt mit dem Browser-Rand */
  right: calc((100vw - min(100% - 2.5rem, var(--container))) / 2);
  display: flex; flex-direction: row;
  background: rgba(18, 18, 20, 0.9);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(237,235,228,0.15);
  border-top: none;
}
.lang-dock a {
  padding: 0.5rem 0.9rem;
  font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--c-concrete); text-align: center;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lang-dock a + a { border-left: 2px solid rgba(237,235,228,0.1); }
.lang-dock a:hover, .lang-dock a:focus-visible { color: var(--c-signal); }
.lang-dock a.is-active { color: var(--c-void); background: var(--c-signal); }

.site-nav__toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.25rem; height: 2.25rem;
}
.site-nav__toggle span { width: 100%; height: 2px; background: var(--c-chalk); }

/* ============================================================
   Hero + Partikel-Netz
   ============================================================ */
.hero {
  min-height: 92vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: var(--space-5);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, transparent 0%, rgba(18,18,20,0) 60%, var(--c-void) 100%),
    linear-gradient(135deg,
      rgba(138,139,144,0.07) 0%, rgba(138,139,144,0.07) 0.8%, transparent 0.8%, transparent 50%,
      rgba(138,139,144,0.07) 50%, rgba(138,139,144,0.07) 50.8%, transparent 50.8%, transparent 100%);
  background-size: auto, 128px 128px;
  animation: hairline-drift 55s linear infinite;
  pointer-events: none;
}

/* Positioniert (stack level 0) und nach dem ::before im DOM, damit es
   zuverlässig darüber liegt - ganz ohne z-index. */
.hero__particles {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
}

.hero__content {
  position: relative;
  margin-top: -4rem;
}

.hero__eyebrow {
  font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--c-concrete);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
body.loaded .hero__eyebrow { opacity: 1; transform: none; }

.hero__title {
  font-family: var(--font-slab); font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin-block: var(--space-2);
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease) 0.08s, transform var(--dur-slow) var(--ease) 0.08s;
}
body.loaded .hero__title { opacity: 1; transform: none; }

.hero__sub {
  max-width: 38rem;
  font-size: var(--fs-lead);
  color: var(--c-concrete);
  margin-top: var(--space-3);
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-med) var(--ease) 0.2s, transform var(--dur-med) var(--ease) 0.2s;
}
body.loaded .hero__sub { opacity: 1; transform: none; }

.hero__actions {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-4);
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-med) var(--ease) 0.4s, transform var(--dur-med) var(--ease) 0.4s;
}
body.loaded .hero__actions { opacity: 1; transform: none; }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.02em; text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--c-signal); color: var(--c-void); }
.btn--primary:hover, .btn--primary:focus-visible { transform: translateY(-2px); background: #ffcc33; }
.btn--ghost {
  border: 1px solid rgba(237,235,228,0.25); color: var(--c-chalk);
}
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--c-signal); color: var(--c-signal); }

.btn--disabled {
  border: 1px solid rgba(237,235,228,0.15); color: var(--c-concrete);
  cursor: not-allowed;
}
.btn--disabled:hover, .btn--disabled:focus-visible { transform: none; }

/* Ein normaler `border` zeichnet keine Linie entlang einer clip-path-Schräge, und
   eine Rechteck-Maske (padding+content-box) erzeugt an der Diagonale einen zu
   dicken/dunklen Klecks (die Maske denkt in Rechtecken, die Ecke ist schräg).
   Stattdessen: außen = Randfarbe im vollen Fünfeck, innen ein eigenständig auf
   1px versetztes, leicht kleineres Fünfeck in der Hintergrundfarbe - beide sind
   sauber eigene clip-path-Formen, keine Maskenrechnung, kein Eckenfehler. */
.btn--ghost.cut-corner, .btn--disabled.cut-corner {
  border: none;
  position: relative;
  background: var(--c-concrete);
  transition: background var(--dur-fast) var(--ease);
}
.btn--ghost.cut-corner:hover, .btn--ghost.cut-corner:focus-visible { background: var(--c-signal); }
.btn--disabled.cut-corner { background: var(--c-concrete); }

.btn--ghost.cut-corner::before, .btn--disabled.cut-corner::before {
  content: '';
  position: absolute; inset: 2px;
  background: var(--c-void);
  clip-path: polygon(0 0, calc(100% - (var(--cut) - 1.172px)) 0, 100% calc(var(--cut) - 1.172px), 100% 100%, 0 100%);
  pointer-events: none;
}
/* Reiner Text läuft im Stacking unter positionierten Elementen wie ::before -
   Label/Tag brauchen deshalb selbst position:relative, um sichtbar zu bleiben. */
.btn__label { position: relative; }
.btn__soon {
  position: relative;
  font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-steel);
  border: 1px solid var(--c-steel-dim); padding: 0.15rem 0.4rem;
}

/* ============================================================
   Hazard-Divider — einmalig eingesetzt, nicht als generelles Muster
   ============================================================ */
.hazard {
  height: 10px;
  background-image: linear-gradient(135deg,
    var(--c-signal) 25%, var(--c-void-2) 25%, var(--c-void-2) 50%,
    var(--c-signal) 50%, var(--c-signal) 75%, var(--c-void-2) 75%);
  background-size: 72px 72px;
  animation: diagonal-scroll-72 1.8s linear infinite;
}

/* Muster liegt zweimal (an 0% und 50%) in einer quadratischen Kachel - das ist
   die einzige Konstruktion, bei der ein diagonales Muster durch reines
   horizontales Kacheln wieder nahtlos ineinander übergeht. Deshalb rein
   horizontal um exakt eine Kachelbreite verschieben, kein Diagonal-Versatz. */
@keyframes diagonal-scroll-72 {
  to { background-position: 72px 0; }
}

@keyframes diagonal-scroll-128 {
  to { background-position: 128px 0; }
}

@keyframes hairline-drift {
  to { background-position: 0 0, 128px 0; }
}

/* ============================================================
   Sections — generisch
   ============================================================ */
/* Gemeinsamer Hintergrund-Wrapper um Über-uns/Server/Kontakt, damit die
   Diagonaltextur EINEN durchgehenden Nullpunkt hat statt in jeder Sektion
   neu anzusetzen (das erzeugte sichtbare Versätze an den Übergängen). */
.page-sections { position: relative; }
.page-sections::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
  background-image: linear-gradient(135deg,
    rgba(138,139,144,0.05) 0%, rgba(138,139,144,0.05) 0.8%, transparent 0.8%, transparent 50%,
    rgba(138,139,144,0.05) 50%, rgba(138,139,144,0.05) 50.8%, transparent 50.8%, transparent 100%);
  background-size: 128px 128px;
  animation: diagonal-scroll-128 55s linear infinite;
  pointer-events: none;
}

.section {
  padding-block: var(--space-6);
  padding-inline: var(--space-4);
  position: relative;
  border-left: 2px solid rgba(237,235,228,0.1);
  border-right: 2px solid rgba(237,235,228,0.1);
}
.section--tight { padding-block: var(--space-5); }

[data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
[data-reveal].in-view { opacity: 1; transform: none; }

/* ============================================================
   Über-Sektion
   ============================================================ */
.about__prose { max-width: 46rem; }
.about__prose .eyebrow { font-size: 1rem; }
.about__prose h2 { font-size: var(--fs-h2); max-width: 20ch; }
.about__lead {
  margin-top: var(--space-3);
  font-size: var(--fs-lead);
  color: var(--c-chalk);
  max-width: 46ch;
}
.about__prose p { margin-top: var(--space-3); max-width: 52ch; color: var(--c-chalk); }
.about__prose p + p { color: var(--c-concrete); }

/* ============================================================
   Server-Status
   ============================================================ */
.servers__head { max-width: 42rem; margin-bottom: var(--space-4); }
.servers__head .eyebrow { font-size: 1rem; }
.servers__head h2 { font-size: var(--fs-h2); }
.servers__head p { color: var(--c-concrete); margin-top: var(--space-2); }

.servers-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-3);
}
.server-card {
  position: relative;
  background: var(--c-concrete);
  padding: var(--space-3);
}
.server-card::before {
  content: '';
  position: absolute; inset: 2px;
  background: var(--c-void-2);
  clip-path: polygon(0 0, calc(100% - (var(--cut) - 1.172px)) 0, 100% calc(var(--cut) - 1.172px), 100% 100%, 0 100%);
  pointer-events: none;
}
.server-card__inner { position: relative; }
.server-card h3 { font-size: var(--fs-h3); margin-top: var(--space-2); }

.server-card__status {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-mono); font-size: var(--fs-mono);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-signal);
}
.server-card__dot {
  width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--c-signal);
  box-shadow: 0 0 0 0 rgba(245,183,0,0.55);
  animation: status-pulse 2s ease-out infinite;
}
.server-card[data-status="offline"] .server-card__status { color: var(--c-concrete); }
.server-card[data-status="offline"] .server-card__dot { background: var(--c-concrete); animation: none; box-shadow: none; }
.server-card[data-status="geplant"] .server-card__status { color: var(--c-steel); }
.server-card[data-status="geplant"] .server-card__dot { background: var(--c-steel); animation: none; box-shadow: none; }

@keyframes status-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,183,0,0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(245,183,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,183,0,0); }
}

.server-card__meta {
  margin-top: var(--space-3);
  display: grid; grid-template-columns: auto 1fr; gap: 0.4rem var(--space-2);
  font-size: var(--fs-small);
}
.server-card__meta dt { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--c-concrete); }
.server-card__meta dd { color: var(--c-chalk); }

.server-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.server-card__actions .btn { padding: 0.6rem 1.1rem; font-size: 0.85rem; }

/* ============================================================
   Kontakt
   ============================================================ */
.kontakt__inner { text-align: center; max-width: 36rem; margin-inline: auto; }
.kontakt__inner .eyebrow { font-size: 1rem; }
.kontakt__inner h2 { font-size: clamp(1.15rem, 6.5vw, 3.5rem); white-space: nowrap; }
.kontakt__inner p { color: var(--c-concrete); margin-top: var(--space-3); font-size: var(--fs-lead); }

.kontakt-form {
  margin-top: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
  text-align: left;
}
.kontakt-form__row { display: flex; flex-direction: column; gap: 0.4rem; }
.kontakt-form__row label {
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-concrete);
}
.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form textarea {
  background: var(--c-void-2);
  border: 1px solid rgba(237,235,228,0.15);
  color: var(--c-chalk);
  font-family: var(--font-body); font-size: var(--fs-body);
  padding: 0.75rem 0.9rem;
  resize: vertical;
  transition: border-color var(--dur-fast) var(--ease);
}
.kontakt-form input:focus-visible,
.kontakt-form textarea:focus-visible {
  outline: 2px solid var(--c-signal); outline-offset: 2px; border-color: var(--c-signal);
}
.kontakt-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kontakt-form .btn { align-self: flex-start; }
.kontakt-form__status { font-size: var(--fs-small); min-height: 1.2em; }
.kontakt-form__status[data-state="success"] { color: var(--c-signal); }
.kontakt-form__status[data-state="error"] { color: var(--c-ember); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { border-top: 2px solid rgba(237,235,228,0.1); padding-block: var(--space-4); font-size: var(--fs-lead); }
.site-footer__inner {
  width: min(100% - 2.5rem, var(--container)); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-3) var(--space-5);
  align-items: start;
}
.site-footer__brand { font-family: var(--font-slab); font-weight: 700; letter-spacing: 0.02em; }
.site-footer__brand p { font-family: var(--font-body); font-weight: 400; color: var(--c-concrete); margin-top: 0.3rem; }
.site-footer__links { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.site-footer__links a { color: var(--c-concrete); transition: color var(--dur-fast) var(--ease); }
.site-footer__links a:hover, .site-footer__links a:focus-visible { color: var(--c-signal); }
.site-footer__legal {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  color: var(--c-concrete);
  border-top: 2px dotted rgba(237,235,228,0.12); padding-top: var(--space-2); margin-top: var(--space-1);
}
.site-footer__legal-links { display: flex; gap: var(--space-3); }
.site-footer__legal-links a { color: var(--c-concrete); transition: color var(--dur-fast) var(--ease); }
.site-footer__legal-links a:hover, .site-footer__legal-links a:focus-visible { color: var(--c-signal); }

/* ============================================================
   Impressum (Platzhalter)
   ============================================================ */
.legal::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(135deg,
    rgba(138,139,144,0.05) 0%, rgba(138,139,144,0.05) 0.8%, transparent 0.8%, transparent 50%,
    rgba(138,139,144,0.05) 50%, rgba(138,139,144,0.05) 50.8%, transparent 50.8%, transparent 100%);
  background-size: 128px 128px;
  animation: diagonal-scroll-128 55s linear infinite;
  pointer-events: none;
}
.legal h1 { font-size: var(--fs-h2); margin-bottom: var(--space-3); }
.legal .notice {
  border-left: 3px solid var(--c-signal); padding: var(--space-2) var(--space-3);
  background: var(--c-void-2); margin-bottom: var(--space-4); color: var(--c-concrete);
  font-size: 0.95rem;
}
.legal__block {
  max-width: 56rem;
  padding-top: var(--space-4); margin-top: var(--space-4);
  border-top: 1px solid rgba(237,235,228,0.1);
}
.legal__block:first-of-type { border-top: none; padding-top: 0; }
.legal__block h2 {
  font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-signal); margin-bottom: var(--space-2);
}
.legal__block p { color: var(--c-concrete); max-width: 65ch; }
.legal__block p + p { margin-top: 0.4rem; }
.legal .back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: var(--space-4);
  padding: 0.55rem 1rem;
  border: 1px solid rgba(237,235,228,0.15);
  font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-concrete);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.legal .back:hover, .legal .back:focus-visible { color: var(--c-signal); border-color: var(--c-signal); }
.legal .back__arrow { display: inline-flex; transition: transform var(--dur-fast) var(--ease); }
.legal .back:hover .back__arrow, .legal .back:focus-visible .back__arrow { transform: translateX(-4px); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 48rem) {
  .site-nav__toggle { display: flex; }
  .site-nav__menu {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--c-void); border-bottom: 1px solid rgba(237,235,228,0.1);
    flex-direction: column; align-items: flex-start; gap: 0;
    max-height: 0; overflow: hidden; transition: max-height var(--dur-med) var(--ease);
  }
  .site-nav__menu.is-open { max-height: 16rem; }
  .site-nav__menu a { width: 100%; padding: var(--space-2) var(--space-2); border-bottom: 1px solid rgba(237,235,228,0.06); }

  .hero__title { font-size: clamp(2.6rem, 15vw, 4rem); }
  .hero { min-height: auto; padding-block: var(--space-4) var(--space-5); }

  .section { padding-inline: var(--space-2); }

  .site-footer__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }

  .hero__title, .hero__eyebrow, .hero__sub, .hero__actions { opacity: 1; transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
}