/* ==========================================================================
   AUVEXIS SYSTEMS — Main Stylesheet
   Structure > Complexity. Precision > Effects. Clarity > Decoration.
   ========================================================================== */

@import url("tokens.css");

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  background: var(--color-bg);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

img, svg, picture, video { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-text-primary); line-height: var(--lh-tight); font-weight: 600; }
p { max-width: 68ch; }
a { color: inherit; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* ---------- Focus states ---------- */
:focus-visible {
  outline: 2px solid var(--color-primary-highlight);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-padding);
}

.section { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-8); }
.section-head { max-width: 44rem; margin-bottom: var(--space-7); }
.section-head--center { margin-inline: auto; text-align: center; }

.kicker {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-primary-highlight);
  margin-bottom: var(--space-3);
}

.section-title {
  font-size: var(--fs-2xl);
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--space-4);
}

.section-intro { color: var(--color-text-secondary); font-size: var(--fs-md); }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top var(--duration-base) var(--ease-standard);
}
.skip-link:focus { top: var(--space-4); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.btn--primary:hover { background: var(--color-primary-highlight); box-shadow: var(--glow-primary); }

.btn--ghost {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--color-primary-highlight); background: var(--color-primary-soft); }

.btn--sm { padding: 0.6rem 1.1rem; font-size: var(--fs-xs); }
.btn--full { width: 100%; justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 10, 13, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  flex-shrink: 0;
}
.brand__mark { width: 30px; height: 30px; flex-shrink: 0; }
/* Horizontal wordmark lockup: mark + single-line "AUVEXIS SYSTEMS", not a
   stacked two-line word. "SYSTEMS" is set lighter/smaller and in the accent
   blue so the lockup still reads as one unit while keeping AUVEXIS primary. */
.brand__word {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  line-height: 1;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-wide);
  color: var(--color-text-primary);
  font-weight: 700;
}
.brand__word-sub {
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  color: var(--color-primary-highlight);
}
@media (max-width: 420px) {
  .brand__word-sub { display: none; } /* keep the lockup from crowding the smallest phones */
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.main-nav__link {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-secondary);
  padding-block: var(--space-2);
  position: relative;
  transition: color var(--duration-fast) var(--ease-standard);
}
.main-nav__link:hover { color: var(--color-text-primary); }
.main-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-primary-highlight);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-standard);
}
.main-nav__link:hover::after { transform: scaleX(1); }

/* The CTA inside .main-nav only exists for the mobile drawer (shown when the
   drawer is open, see the max-width:900px block below). On desktop the
   single source-of-truth CTA is .header-cta-compact in .header-actions —
   without this, both would render side by side. */
.header-cta { display: none; }

.header-actions { display: flex; align-items: center; gap: var(--space-4); }

.lang-switch { display: flex; align-items: center; gap: var(--space-1); font-family: var(--font-heading); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); }
.lang-switch a {
  text-decoration: none;
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.lang-switch a[aria-current="true"] { color: var(--color-text-primary); background: var(--color-surface-raised); }
.lang-switch a:hover:not([aria-current="true"]) { color: var(--color-text-primary); }
.lang-switch__divider { color: var(--color-border-strong); }

.nav-toggle {
  display: none;
  padding: var(--space-2);
}
.nav-toggle__box { display: block; width: 22px; height: 16px; position: relative; }
.nav-toggle__box span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--color-text-primary);
  transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
}
.nav-toggle__box span:nth-child(1) { top: 0; }
.nav-toggle__box span:nth-child(2) { top: 7px; }
.nav-toggle__box span:nth-child(3) { top: 14px; }
.site-header.is-open .nav-toggle__box span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .nav-toggle__box span:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle__box span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 1080px, not 900px: with all 6 nav labels + lang switch + CTA + logo inline,
   the desktop header genuinely doesn't fit below ~1080px and was overflowing
   the viewport horizontally at common tablet/small-laptop widths (e.g.
   1024px) — found during responsive QA. The hamburger drawer now takes over
   before that cramped zone instead of after it. */
@media (max-width: 1080px) {
  /* top+height (not inset's bottom:0) so the panel always reaches the true
     viewport bottom even though `.site-header`'s `backdrop-filter` makes it
     the containing block for this fixed element (Chromium quirk: bottom:0
     would otherwise resolve against the ~64px-tall header, not the page). */
  .main-nav { position: fixed; top: 64px; left: 0; right: 0; height: calc(100vh - 64px); background: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding: var(--space-6) var(--content-padding); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); overflow-y: auto; }
  .site-header.is-open .main-nav { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .main-nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .main-nav__link { font-size: var(--fs-md); }
  .header-cta { display: none; }
  .site-header.is-open .header-cta { display: inline-flex; margin-top: var(--space-6); }
  .header-cta-compact { display: none; } /* redundant with the CTA inside the open mobile nav */
  .nav-toggle { display: block; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: var(--space-10) var(--space-9); overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 78% 10%, rgba(37, 99, 235, 0.16), transparent 70%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
}
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-9); align-items: center; }
.hero__status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: 999px;
  padding: var(--space-2) var(--space-4); margin-bottom: var(--space-5);
}
.hero__status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-status-dev); box-shadow: 0 0 8px var(--color-status-dev); }
.hero__headline {
  font-size: var(--fs-4xl);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.hero__headline span { display: block; }
.hero__headline span:nth-child(2) { color: var(--color-primary-highlight); }
.hero__sub { font-size: var(--fs-md); color: var(--color-text-secondary); margin-bottom: var(--space-6); max-width: 42ch; }
.hero__ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.hero__visual { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.hero__visual-core { width: 78%; filter: drop-shadow(0 0 40px rgba(37, 99, 235, 0.28)); }
.hero__visual-caption { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: var(--ls-wide); text-transform: uppercase; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 320px; margin-inline: auto; order: -1; }
  .hero__headline { font-size: var(--fs-3xl); }
}

/* ---------- System Architecture (Intelligence -> Logic -> Physical) ---------- */
.architecture { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.architecture__stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; position: relative; }
@media (min-width: 901px) {
  .architecture__stages > .stage-card:not(:last-child) { position: relative; }
  .architecture__stages > .stage-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%; right: calc(var(--space-6) * -1 + -1px);
    width: calc(var(--space-6) * 2 - 2px);
    height: 1px;
    background: linear-gradient(90deg, var(--color-border-strong), var(--color-primary-highlight) 50%, var(--color-border-strong));
    transform: translateY(-50%);
  }
}
@media (max-width: 900px) {
  .architecture__stages { grid-template-columns: 1fr; }
  .architecture__stages > .stage-card:not(:last-child) { position: relative; margin-bottom: var(--space-4); }
  .architecture__stages > .stage-card:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%; bottom: calc(var(--space-4) * -1 - 1px);
    height: calc(var(--space-4) * 2 - 2px);
    width: 1px;
    background: linear-gradient(180deg, var(--color-border-strong), var(--color-primary-highlight) 50%, var(--color-border-strong));
    transform: translateX(-50%);
  }
}

.stage-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.stage-card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
.stage-card__label {
  font-family: var(--font-heading); font-size: var(--fs-xs); letter-spacing: var(--ls-wider);
  color: var(--color-primary-highlight); margin-bottom: var(--space-2);
}
.stage-card__title { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.stage-card__desc { font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.stage-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag {
  font-size: var(--fs-xs); color: var(--color-text-secondary);
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
  padding: 0.3rem 0.7rem; border-radius: 999px;
}

/* ---------- Solutions ---------- */
.solutions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 1000px) { .solutions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .solutions-grid { grid-template-columns: 1fr; } }

.solution-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.solution-card:hover { border-color: var(--color-primary-highlight); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.solution-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.solution-card__icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--color-primary-soft); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); color: var(--color-primary-highlight); flex-shrink: 0;
}
.solution-card__icon svg { width: 22px; height: 22px; }
.solution-card__title { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.solution-card__desc { font-size: var(--fs-sm); }
.solution-card__topics { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.solution-card__topics li {
  font-size: var(--fs-xs); color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: 999px; padding: 0.25rem 0.65rem;
}

/* ---------- Status badge ---------- */
.status-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-heading); font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; padding: 0.3rem 0.75rem; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.status-badge--in-development { color: var(--color-status-dev); background: var(--color-status-dev-bg); border-color: rgba(59,130,246,0.3); }
.status-badge--in-development::before { background: var(--color-status-dev); }
.status-badge--prototyping { color: var(--color-status-prototype); background: var(--color-status-prototype-bg); border-color: rgba(34,193,164,0.3); }
.status-badge--prototyping::before { background: var(--color-status-prototype); }
.status-badge--concept { color: var(--color-status-concept); background: var(--color-status-concept-bg); border-color: rgba(197,203,213,0.25); }
.status-badge--concept::before { background: var(--color-status-concept); }
.status-badge--future,
.status-badge--future-concept { color: var(--color-status-future); background: var(--color-status-future-bg); border-color: rgba(167,139,250,0.3); }
.status-badge--future::before, .status-badge--future-concept::before { background: var(--color-status-future); }

/* ---------- Pipeline ---------- */
.pipeline-list { display: flex; flex-direction: column; border-top: 1px solid var(--color-border); }
.pipeline-item {
  display: grid; grid-template-columns: 1.4fr 1fr 2.5fr; gap: var(--space-5); align-items: center;
  padding-block: var(--space-6); border-bottom: 1px solid var(--color-border);
}
.pipeline-item__title { font-family: var(--font-heading); font-size: var(--fs-md); color: var(--color-text-primary); letter-spacing: var(--ls-wide); }
.pipeline-item__desc { font-size: var(--fs-sm); }
@media (max-width: 800px) {
  .pipeline-item { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ---------- Knowledge ---------- */
/* align-items: start keeps each card's own (possibly open, possibly closed)
   height — without it, grid's default `stretch` forces every card in a row
   to the row's tallest height, so opening one <details> visually stretches
   its still-closed row-mate and leaves empty space inside its border. */
.knowledge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 800px) { .knowledge-grid { grid-template-columns: 1fr; } }

.info-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.info-box__question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5); text-align: left;
  font-family: var(--font-heading); font-size: var(--fs-base); color: var(--color-text-primary); letter-spacing: 0.01em;
}
.info-box__icon { flex-shrink: 0; width: 20px; height: 20px; transition: transform var(--duration-base) var(--ease-standard); color: var(--color-primary-highlight); }
.info-box[open] .info-box__icon { transform: rotate(45deg); }
.info-box__answer { padding: 0 var(--space-5) var(--space-5); font-size: var(--fs-sm); }
.info-box summary { cursor: pointer; list-style: none; }
.info-box summary::-webkit-details-marker { display: none; }

/* ---------- Transparency ---------- */
.transparency { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); }
.transparency__text p { margin-bottom: var(--space-4); font-size: var(--fs-md); }
.transparency__text p:last-child { margin-bottom: 0; }
.status-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }

/* ---------- Vision / VYRO-B ---------- */
.vision-panel {
  position: relative;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  background: linear-gradient(160deg, var(--color-surface) 0%, var(--color-bg-alt) 100%);
  overflow: hidden;
}
.vision-panel::before {
  content: "";
  position: absolute; top: -20%; right: -10%; width: 60%; height: 140%;
  background: radial-gradient(circle, rgba(37,99,235,0.16), transparent 65%);
  pointer-events: none;
}
.vision-panel__head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.vision-panel__title { font-size: var(--fs-2xl); letter-spacing: var(--ls-wide); }
.vision-panel__subtitle { font-family: var(--font-heading); color: var(--color-text-muted); letter-spacing: var(--ls-wide); margin-bottom: var(--space-5); font-size: var(--fs-sm); }
.vision-panel__text p { margin-bottom: var(--space-4); max-width: 62ch; }
.vision-panel__text p:last-child { margin-bottom: 0; }

/* ---------- About ---------- */
.about-block { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 800px) { .about-block { grid-template-columns: 1fr; } }
.about-block__text p { margin-bottom: var(--space-4); font-size: var(--fs-md); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.form-field { margin-bottom: var(--space-5); }
.form-field label { display: block; font-size: var(--fs-sm); color: var(--color-text-primary); margin-bottom: var(--space-2); }
.form-field .required { color: var(--color-primary-highlight); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); color: var(--color-text-primary);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--color-border-strong); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--color-primary-highlight); }
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field__error { display: none; color: #f87171; font-size: var(--fs-xs); margin-top: var(--space-2); }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: #f87171; }
.form-field.has-error .form-field__error { display: block; }
.form-required-note { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--space-2); }

.form-status { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); border: 1px solid var(--color-border); display: none; }
.form-status.is-visible { display: block; }
.form-status--success { border-color: rgba(34,193,164,0.4); background: var(--color-status-prototype-bg); color: var(--color-text-primary); }
.form-status--error { border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.1); color: var(--color-text-primary); }
.form-status p:first-child { font-family: var(--font-heading); color: var(--color-text-primary); margin-bottom: var(--space-2); }

.contact-aside {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-6); align-self: start;
}
.contact-aside p { font-size: var(--fs-sm); margin-bottom: var(--space-3); }
.contact-aside a { color: var(--color-primary-highlight); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-bg-alt); padding-block: var(--space-8) var(--space-6); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-7); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand__tagline { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); color: var(--color-text-muted); margin-top: var(--space-3); text-transform: uppercase; }
.footer-col h3 { font-family: var(--font-heading); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { text-decoration: none; color: var(--color-text-secondary); font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--color-text-primary); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--color-border); font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---------- Legal pages ---------- */
.legal-page { padding-block: var(--space-9); }
.legal-page__container { max-width: 780px; }
/* overflow-wrap: German legal titles like "Datenschutzerklärung" are long,
   unbroken single words — at the large H1 size they can exceed the mobile
   container width with no space for the browser's default wrap to use. */
.legal-page h1 { font-size: var(--fs-3xl); margin-bottom: var(--space-5); overflow-wrap: anywhere; }
.legal-meta { font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: var(--space-5); }
/* translationNotice on EN legal pages: informational, not an error/warning —
   uses the same restrained "future/info" accent as elsewhere, not red/amber. */
.legal-notice { background: var(--color-status-future-bg); border: 1px solid rgba(167,139,250,0.3); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-8); font-size: var(--fs-sm); color: var(--color-text-primary); }

/* overflow-wrap: anywhere on the whole block, not just <p>: some eRecht24
   heading text is a single unbroken slash-joined compound (e.g.
   "Verbraucherstreitbeilegung/Universalschlichtungsstelle", 54 characters)
   with no space for the browser's default word-wrap to break on — without
   this it overflows the container width on mobile regardless of viewport
   size, since it doesn't shrink like a normal wrapping line would. */
.legal-body { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.legal-body h2 { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--color-text-primary); margin: var(--space-8) 0 var(--space-4); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-family: var(--font-heading); font-size: var(--fs-md); color: var(--color-text-primary); margin: var(--space-6) 0 var(--space-3); }
.legal-body h4 { font-family: var(--font-heading); font-size: var(--fs-base); color: var(--color-text-primary); margin: var(--space-5) 0 var(--space-2); }
.legal-body p { margin-bottom: var(--space-4); }
.legal-body ul { margin: 0 0 var(--space-4); padding-left: 1.3em; }
.legal-body li { margin-bottom: var(--space-2); }
.legal-body a { color: var(--color-primary-highlight); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--color-text-primary); }
.legal-body strong { color: var(--color-text-primary); font-weight: 600; }
.legal-source { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-border); font-size: var(--fs-xs); color: var(--color-text-muted); }
.legal-source a { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.legal-source a:hover { color: var(--color-primary-highlight); }

/* ---------- 404 ---------- */
.not-found { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: var(--space-9); }
.not-found h1 { font-size: var(--fs-3xl); margin-bottom: var(--space-4); }
.not-found p { margin-inline: auto; margin-bottom: var(--space-6); }

/* ---------- Reveal-on-scroll ----------
   Content is visible by default (progressive enhancement): the "pending"
   (hidden) state is only ever applied by JS, right before an element is
   observed, so users without JS — or before JS has finished loading —
   always see full content instead of a blank page. */
.reveal { transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard); }
.reveal.reveal-pending { opacity: 0; transform: translateY(16px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal.reveal-pending { opacity: 1; transform: none; }
}

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