/* =============================================================================
   KanzleiVoice — Website Styles
   Palette: Kanzlei-Blau + Kupfer  ·  Mobile-first  ·  keine externen Ressourcen
   ========================================================================== */

/* ---------- Tokens --------------------------------------------------------- */
:root {
  --ink:        #0C1A2B;
  --blue-900:   #0B2A4A;
  --blue-800:   #0E3459;
  --blue-700:   #12466F;
  --blue-500:   #1E6FB8;
  --blue-300:   #7FB2DC;
  --blue-050:   #EEF4FA;

  --copper-700: #8C4E27;
  --copper-600: #A65E2E;
  --copper-500: #C17A3F;
  --copper-300: #E0A876;
  --copper-100: #F3E2D1;

  --paper:      #F7F4EF;
  --white:      #FFFFFF;
  --card:       #FFFFFF;

  --text:       #1B2B3A;
  --text-soft:  #4A5C6B;
  --line:       rgba(12, 26, 43, .12);
  --line-soft:  rgba(12, 26, 43, .07);

  --ring:       var(--copper-500);

  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif;

  --wrap:       1140px;
  --radius:     16px;
  --radius-sm:  10px;
  --shadow-sm:  0 1px 2px rgba(12, 26, 43, .06), 0 4px 14px rgba(12, 26, 43, .06);
  --shadow-md:  0 8px 30px rgba(12, 26, 43, .12);
  --shadow-lg:  0 24px 60px rgba(11, 42, 74, .22);

  --header-h:   68px;
  --ease:       cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.15; color: var(--blue-900); margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }
figure, blockquote { margin: 0; }
a { color: var(--blue-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
img, svg, canvas { display: block; max-width: 100%; }
ul, ol { margin: 0 0 1rem; padding-left: 1.2em; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ---------- Layout helpers -------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.25rem); }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4rem); }
.section--paper  { background: var(--paper); }
.section--white  { background: var(--white); }
.section--blue   { background: var(--blue-050); }
.section--dark {
  background: linear-gradient(160deg, var(--blue-900) 0%, var(--ink) 100%);
  color: #D9E4EE;
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark a { color: var(--copper-300); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-sans);
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--copper-600);
  margin-bottom: .9rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--copper-500); border-radius: 2px; }
.section--dark .eyebrow { color: var(--copper-300); }
.section--dark .eyebrow::before { background: var(--copper-300); }

.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.section__head h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.section__head p { font-size: 1.075rem; color: var(--text-soft); margin-bottom: 0; }
.section--dark .section__head p { color: #B7C6D3; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }

/* ---------- Buttons ------------------------------------------------------- */
/* Two solid fills, white text everywhere, guaranteed >= 4.5:1 contrast. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.4rem;
  font-family: var(--font-sans); font-size: .98rem; font-weight: 650;
  line-height: 1; text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent; border-radius: 999px;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

/* Primary — deep blue on light backgrounds */
.btn--primary { background: var(--blue-800); color: #fff; border-color: var(--blue-800); }
.btn--primary:hover { background: var(--blue-900); border-color: var(--blue-900); color: #fff; }

/* Secondary — solid copper, white text (was the unreadable "ghost") */
.btn--secondary { background: var(--copper-700); color: #fff; border-color: var(--copper-700); }
.btn--secondary:hover { background: var(--copper-600); border-color: var(--copper-600); color: #fff; }

/* Quiet — low-emphasis (e.g. modal close) */
.btn--quiet { background: transparent; color: var(--text); border-color: var(--line); }
.btn--quiet:hover { background: rgba(12,26,43,.06); color: var(--blue-900); border-color: var(--line); }

.btn--lg { padding: 1rem 1.7rem; font-size: 1.02rem; }
.btn--block { width: 100%; }

/* On dark (navy) sections: primary becomes copper, secondary becomes a white outline */
.section--dark .btn--primary,
.hero .btn--primary { background: var(--copper-600); border-color: var(--copper-600); color: #fff; }
.section--dark .btn--primary:hover,
.hero .btn--primary:hover { background: var(--copper-500); border-color: var(--copper-500); color: #fff; }
.section--dark .btn--secondary,
.hero .btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.section--dark .btn--secondary:hover,
.hero .btn--secondary:hover { background: #fff; color: var(--blue-900); border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Header ------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247, 244, 239, .0);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(247, 244, 239, .92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.brand__mark { width: 30px; height: 26px; color: var(--copper-500); flex: none; }
.brand__word {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.28rem; letter-spacing: -.01em;
  color: var(--blue-900);
}
.brand__word b { font-family: var(--font-sans); font-weight: 800; color: var(--copper-700); }
.site-header.is-stuck .brand__word { color: var(--blue-900); }

.nav { margin-left: auto; display: flex; align-items: center; gap: .15rem; }
.nav a:not(.btn) {
  padding: .45rem .5rem; border-radius: 8px;
  font-size: .9rem; font-weight: 550; color: var(--text); text-decoration: none; white-space: nowrap;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav a:not(.btn):hover { background: rgba(12,26,43,.06); color: var(--blue-900); }
.header-cta { display: flex; align-items: center; gap: .5rem; margin-left: .5rem; }
.header-cta .btn { padding: .55rem .85rem; font-size: .86rem; }

.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--blue-900); border-radius: 2px; transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after  { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

/* ---------- Hero ------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  color: #E4ECF3;
  background: linear-gradient(165deg, #0B2A4A 0%, #0A2036 55%, #0B1826 100%);
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3.5rem, 9vw, 6.5rem);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background-image: url("../img/photos/hero.jpg");
  background-size: cover; background-position: center 30%;
  opacity: .16; filter: grayscale(.4) contrast(1.05);
}
.hero__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .9; }
.hero__grid { display: grid; gap: 2rem; align-items: center; }
.hero__kicker {
  font-family: var(--font-sans);
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper-300); margin: 0 0 .9rem;
}
.hero__title {
  color: #fff;
  font-size: clamp(2.15rem, 6vw, 3.9rem);
  line-height: 1.06; letter-spacing: -.02em; margin-bottom: .5rem;
}
.hero__title .accent { color: var(--copper-300); }
.hero__lead { font-size: clamp(1.05rem, 2.2vw, 1.28rem); color: #C6D3DE; max-width: 40rem; margin-bottom: 1.6rem; }
.hero .btn-row { margin-bottom: 1.4rem; }
.hero__note { font-size: .9rem; color: #93A6B4; }
.hero__note strong { color: #C6D3DE; font-weight: 650; }

/* Hero "live call" card */
.hero__visual { display: none; }
.callcard {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(6px);
  max-width: 360px; margin-left: auto;
}
.callcard__head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.callcard__dot { width: 9px; height: 9px; border-radius: 50%; background: #46D08A; box-shadow: 0 0 0 4px rgba(70,208,138,.2); flex: none; }
.callcard__title { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #C6D3DE; }
.callcard__wave { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-bottom: 1rem; }
.callcard__wave i { flex: 1; background: linear-gradient(var(--copper-300), var(--copper-500)); border-radius: 3px; opacity: .7; animation: eq 1.7s ease-in-out infinite; }
.callcard__wave i:nth-child(2){animation-delay:.10s} .callcard__wave i:nth-child(3){animation-delay:.20s}
.callcard__wave i:nth-child(4){animation-delay:.30s} .callcard__wave i:nth-child(5){animation-delay:.15s}
.callcard__wave i:nth-child(6){animation-delay:.25s} .callcard__wave i:nth-child(7){animation-delay:.05s}
.callcard__wave i:nth-child(8){animation-delay:.35s} .callcard__wave i:nth-child(9){animation-delay:.18s}
@keyframes eq { 0%,100%{ height: 45%; } 50%{ height: 82%; } }
.callcard__row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .86rem; }
.callcard__row span { color: #93A6B4; }
.callcard__row b { color: #E4ECF3; font-weight: 650; text-align: right; }
@media (prefers-reduced-motion: reduce) { .callcard__wave i { animation: none; height: 60%; } }

/* Stepper aside */
.stepper__aside {
  display: none;
  place-items: center;
  background: var(--blue-050);
  border-radius: var(--radius-sm);
  min-height: 180px;
}
.phase-num {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 600;
  color: var(--copper-500);
  opacity: .5;
  line-height: 1;
}

/* Trust bar */
.trust {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: clamp(2.2rem, 5vw, 3.4rem); padding-top: 1.6rem;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.5rem;
}
.trust__item { }
.trust__num { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 600; color: #fff; line-height: 1; }
.trust__num .u { color: var(--copper-300); }
.trust__label { font-size: .84rem; color: #93A6B4; margin-top: .3rem; }

/* ---------- Challenge cards ---------------------------------------------- */
.thesis {
  display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3rem);
  padding: 1.4rem 1.5rem; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.thesis__row { display: grid; gap: .2rem; }
.thesis__k { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--copper-600); }
.thesis__v { color: var(--text); }
.thesis__v strong { color: var(--blue-900); }

.cards { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.card {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card__icon {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--blue-050); color: var(--blue-700); margin-bottom: .9rem;
}
.card__icon svg { width: 22px; height: 22px; stroke-width: 1.75; }
.section--blue .card__icon { background: rgba(255,255,255,.08); color: var(--copper-300); }
.card h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.card p { margin-bottom: 0; color: var(--text-soft); font-size: .99rem; }
.card p + p { margin-top: .6rem; }
.card p .lead-in { color: var(--copper-700); font-weight: 650; }

/* Spotlight + tilt (JS sets --mx/--my, .has-pointer gate) */
.spotlight { transform-style: preserve-3d; }
.has-pointer .spotlight::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(170px circle at var(--mx, 50%) var(--my, 0%), rgba(193,122,63,.09), transparent 62%);
  opacity: 0; transition: opacity .25s var(--ease);
}
.has-pointer .spotlight:hover::after { opacity: 1; }
.has-pointer .spotlight:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(193,122,63,.28); }

/* ---------- Mechanism flow -------------------------------------------------- */
.flow { display: grid; gap: 1rem; grid-template-columns: 1fr; counter-reset: flow; }
.flow__step {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 1.2rem 1.2rem 1.2rem 3.4rem; box-shadow: var(--shadow-sm);
}
.flow__step::before {
  counter-increment: flow; content: counter(flow);
  position: absolute; left: 1rem; top: 1.1rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-700); color: #fff; font-weight: 700; font-size: .9rem;
  font-family: var(--font-sans);
}
.flow__step h3 { font-size: 1.08rem; margin-bottom: .2rem; }
.flow__step p { margin-bottom: 0; font-size: .95rem; color: var(--text-soft); }

/* ---------- Use-case stepper --------------------------------------------- */
.stepper { display: grid; gap: 1.5rem; }
.stepper__tabs {
  display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.stepper__tab {
  flex: none; display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem .95rem; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  font-size: .9rem; font-weight: 600; color: var(--text-soft);
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.stepper__tab .n { font-family: var(--font-sans); font-weight: 800; color: var(--copper-600); }
.stepper__tab:hover { border-color: var(--copper-300); color: var(--blue-900); }
.stepper__tab[aria-selected="true"] { background: var(--blue-900); border-color: var(--blue-900); color: #fff; }
.stepper__tab[aria-selected="true"] .n { color: var(--copper-300); }

.stepper__panels { position: relative; }
.stepper__panel {
  display: grid; gap: 1.5rem; grid-template-columns: 1fr;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--shadow-sm);
}
.stepper__panel[hidden] { display: none; }
.stepper__panel > div { min-width: 0; }
.stepper__panel .phase-tag {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--copper-600);
}
.stepper__panel h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: .3rem 0 .5rem; }
.stepper__panel p { color: var(--text-soft); margin-bottom: 0; }
.stepper__examples { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem; border-radius: 999px;
  background: var(--blue-050); color: var(--blue-800);
  font-size: .85rem; font-weight: 600;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--copper-500); }
.stepper__progress { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.stepper__progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--copper-500), var(--copper-300)); transition: width .4s var(--ease); }

/* ---------- Benefits grid --------------------------------------------------- */
.grid-benefits { display: grid; gap: .9rem; grid-template-columns: 1fr; }
.benefit {
  position: relative; overflow: hidden;
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.15rem 1.2rem; border-radius: var(--radius-sm);
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.benefit svg { width: 22px; height: 22px; stroke-width: 1.75; color: var(--copper-600); flex: none; margin-top: .15rem; }
.benefit h3 { font-size: 1rem; margin-bottom: .15rem; font-family: var(--font-sans); font-weight: 700; color: var(--blue-900); }
.benefit p { margin: 0; font-size: .92rem; color: var(--text-soft); }

/* ---------- Examples (chat) ---------------------------------------------- */
.chat-tabs { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.chat-tab {
  padding: .6rem 1rem; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #C6D3DE;
  font-size: .9rem; font-weight: 600;
}
.chat-tab[aria-selected="true"] { background: var(--copper-500); border-color: var(--copper-500); color: #fff; }

.chat {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.8rem);
}
.chat[hidden] { display: none; }
.chat__line { display: flex; gap: .8rem; margin-bottom: 1rem; max-width: 90%; }
.chat__line:last-child { margin-bottom: 0; }
.chat__line.is-ki { }
.chat__line.is-client { flex-direction: row-reverse; margin-left: auto; }
.chat__avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em;
}
.chat__line.is-ki .chat__avatar { background: var(--copper-500); color: #fff; }
.chat__line.is-client .chat__avatar { background: rgba(255,255,255,.16); color: #E4ECF3; }
.chat__bubble {
  padding: .8rem 1rem; border-radius: 14px; font-size: .96rem; line-height: 1.55;
}
.chat__line.is-ki .chat__bubble { background: rgba(224,168,118,.14); border: 1px solid rgba(224,168,118,.28); color: #EBD9C8; border-bottom-left-radius: 4px; }
.chat__line.is-client .chat__bubble { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); color: #E4ECF3; border-bottom-right-radius: 4px; }
.chat__bubble .who { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-bottom: .25rem; }
.chat__bubble em { color: #A9B9C6; font-style: italic; }

/* ---------- Result callout ---------------------------------------------- */
.result {
  display: grid; gap: 1.5rem; align-items: center;
  background: linear-gradient(150deg, var(--blue-900), var(--ink));
  color: #E4ECF3; border-radius: var(--radius);
  padding: clamp(1.8rem, 5vw, 3rem);
}
.result h2, .result h3 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); font-family: var(--font-serif); font-weight: 600; margin: .3rem 0 .5rem; }
.result p { color: #B7C6D3; margin-bottom: 0; }

/* ---------- Ergebnis: Outlook-Posteingang-Demo -------------------- */
.ergebnis-grid { display: grid; gap: 1.5rem; align-items: stretch; }

.inbox-demo {
  --ol-blue: #0F6CBD;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-lg); overflow: hidden; align-self: start;
  font-family: "Segoe UI", var(--font-sans);
}
/* Windows-Titelleiste */
.inbox-demo__titlebar {
  display: flex; align-items: center; gap: .5rem;
  height: 34px; padding: 0 0 0 .7rem;
  background: #f3f3f3; border-bottom: 1px solid var(--line);
}
.inbox-demo__appicon { display: inline-flex; }
.inbox-demo__apptitle { flex: 1; font-size: .78rem; color: #444; letter-spacing: .01em; }
.inbox-demo__winbtns { display: flex; height: 100%; }
.inbox-demo__winbtn { width: 40px; height: 100%; position: relative; }
.inbox-demo__winbtn::before, .inbox-demo__winbtn::after { content: ""; position: absolute; inset: 0; margin: auto; background: #4a4a4a; }
.inbox-demo__winbtn--min::before { width: 10px; height: 1px; }
.inbox-demo__winbtn--min::after { display: none; }
.inbox-demo__winbtn--max::before { width: 9px; height: 9px; background: transparent; border: 1px solid #4a4a4a; }
.inbox-demo__winbtn--max::after { display: none; }
.inbox-demo__winbtn--close::before { width: 11px; height: 1px; transform: rotate(45deg); }
.inbox-demo__winbtn--close::after { width: 11px; height: 1px; transform: rotate(-45deg); }
.inbox-demo__winbtn--close { background: #E81123; }
.inbox-demo__winbtn--close::before, .inbox-demo__winbtn--close::after { background: #fff; }
/* schmale Outlook-Toolbar */
.inbox-demo__toolbar {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .8rem; font-size: .72rem; color: #666;
  background: #faf9f8; border-bottom: 1px solid var(--line);
}
.inbox-demo__tbsep { width: 1px; height: 12px; background: var(--line); }
/* Nachrichtenliste */
.inbox-demo__list { padding: .35rem; display: flex; flex-direction: column; }
.inbox-demo__row {
  position: relative;
  display: grid; grid-template-columns: 30px 1fr; gap: .65rem; align-items: start;
  padding: .7rem .85rem .7rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.inbox-demo__row:last-child { border-bottom: 0; }
.inbox-demo__row.is-in { opacity: 1; transform: none; }
.inbox-demo__accent { position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: transparent; }
.inbox-demo__row--unread .inbox-demo__accent { background: var(--ol-blue); }
.inbox-demo__avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: #e6f0f9; color: var(--ol-blue);
  font-size: .68rem; font-weight: 700;
}
.inbox-demo__main { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.inbox-demo__l1 { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.inbox-demo__sender { font-size: .82rem; color: #201f1e; }
.inbox-demo__row--unread .inbox-demo__sender { font-weight: 700; }
.inbox-demo__time { font-size: .72rem; color: var(--text-soft); white-space: nowrap; }
.inbox-demo__row--unread .inbox-demo__time { color: var(--ol-blue); font-weight: 600; }
.inbox-demo__subject { font-size: .82rem; color: #201f1e; line-height: 1.3; }
.inbox-demo__row--unread .inbox-demo__subject { font-weight: 600; }
.inbox-demo__preview {
  font-size: .78rem; color: #616161; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Modal: Testnummer-Erfolg ------------------------------- */
.modal__testnumber {
  display: inline-block; margin: .3rem 0 1rem;
  font-family: var(--font-serif); font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 600;
  color: var(--blue-900); text-decoration: none;
  border-bottom: 2px solid var(--copper-500);
}
.modal__testnumber:hover { color: var(--blue-700); }
.modal__testnumber-hint { font-size: .9rem; color: var(--text-soft); margin: .3rem 0 1rem; }
.modal__testnumber-hint a { color: var(--copper-700); font-weight: 650; }

/* ---------- Cookie-/Einwilligungs-Banner --------------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 130;
  padding: clamp(.8rem, 3vw, 1.1rem);
  background: rgba(247, 244, 239, .97);
  backdrop-filter: saturate(180%) blur(8px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(12, 26, 43, .12);
}
.cookie-banner__inner {
  max-width: var(--wrap); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem;
}
.cookie-banner__text { margin: 0; flex: 1 1 320px; font-size: .86rem; line-height: 1.55; color: var(--text); }
.cookie-banner__text a { color: var(--blue-700); }
.cookie-banner__actions { display: flex; gap: .6rem; flex: 0 0 auto; }
.cookie-banner__actions .btn { padding: .6rem 1.1rem; font-size: .88rem; }
@media (max-width: 520px) { .cookie-banner__actions { width: 100%; } .cookie-banner__actions .btn { flex: 1; } }
.result__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 1rem; }
.result__stat { }
.result__stat b { display: block; white-space: nowrap; font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.55rem, 3.6vw, 2.2rem); color: #fff; line-height: 1; }
.result__stat b .u, .result__stat b span { color: var(--copper-300); }
.result__stat > span { display: block; font-size: .82rem; color: #A9B9C6; margin-top: .4rem; }
.result__stat b .u { display: inline; color: var(--copper-300); }

/* ---------- Testimonials ----------------------------------------------- */
.quotes { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
.quote {
  position: relative;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem 1.75rem 1.6rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.quote::before {
  content: "\201C";
  position: absolute; top: .35rem; left: 1.2rem;
  font-family: var(--font-serif); font-size: 3.4rem; line-height: 1;
  color: var(--copper-300);
}
.quote__stars { color: var(--copper-500); letter-spacing: .18em; font-size: .82rem; margin-bottom: .8rem; }
.quote__text {
  font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.5;
  color: var(--blue-900); margin: 0 0 1.4rem;
}
.quote__who { margin-top: auto; display: flex; align-items: center; gap: .75rem; }
.quote__avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--copper-100); color: var(--copper-700);
  font-family: var(--font-sans); font-weight: 700; font-size: .9rem; letter-spacing: .02em;
}
.quote__name { font-family: var(--font-sans); font-weight: 700; font-size: .92rem; color: var(--blue-900); line-height: 1.25; }
.quote__role { display: block; font-size: .82rem; color: var(--text-soft); margin-top: .05rem; }
.quote__meta { display: block; font-size: .78rem; color: var(--text-soft); opacity: .8; margin-top: .1rem; }
.quote__logo { flex: none; width: 42px; height: 42px; border-radius: 8px; object-fit: contain; background: var(--blue-050); padding: 4px; }

/* ---------- Full-width photo band ------------------------------------- */
.photo-band {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end;
  min-height: clamp(400px, 40vw, 560px);
}
.photo-band img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%; z-index: -2;
}
.photo-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(11,26,43,.94) 0%, rgba(11,26,43,.7) 38%, rgba(11,26,43,.28) 72%, rgba(11,26,43,.12) 100%);
}
.photo-band__inner { padding-block: clamp(2rem, 5vw, 3.25rem); color: #E4ECF3; max-width: 34rem; }
.photo-band__inner h2 { color: #fff; font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-bottom: .5rem; }
.photo-band__inner p { color: #C6D3DE; margin-bottom: 1.1rem; }
.photo-band__inner a { color: var(--copper-300); font-weight: 650; text-decoration: none; }
.photo-band__inner a:hover { text-decoration: underline; }

/* Section image (rounded, in-flow) */
.section-figure { margin: 0 0 clamp(1.6rem, 4vw, 2.4rem); }
.section-figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 7; object-fit: cover; object-position: center 40%;
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}

/* ---------- Hörprobe ------------------------------------------------- */
.voice-sample {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem;
  margin: 0 0 clamp(1.6rem, 4vw, 2.4rem);
  padding: 1rem 1.15rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
}
.voice-sample__label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; color: #E4ECF3; font-size: .95rem; }
.voice-sample__label svg { width: 20px; height: 20px; color: var(--copper-300); }
.voice-sample__slot { flex: 1 1 260px; min-width: 220px; }
.voice-sample__player { width: 100%; height: 40px; }
.voice-sample__pending { margin: 0; font-size: .9rem; color: #A9B9C6; }

/* ---------- Recht & Vertraulichkeit ------------------------------------ */
.recht__note {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0; max-width: 46rem;
  font-size: .95rem; color: var(--text-soft);
}
.section--blue .recht__note { color: #3f5468; }

/* ---------- Final-CTA Zusätze ---------------------------------------- */
.final-cta__reassure { color: #93A6B4; font-size: .9rem; margin: 1.1rem auto 0; max-width: 40rem; }
.final-cta__phone { color: #C6D3DE; font-size: .95rem; margin: .5rem auto 0; }
.final-cta__phone a { color: var(--copper-300); font-weight: 650; text-decoration: none; }
.final-cta__phone a:hover { text-decoration: underline; }

/* ---------- Footer-Kontaktzeile ------------------------------------- */
.site-footer__contact { display: flex; flex-direction: column; gap: .35rem; margin-top: 1rem; font-size: .9rem; }
.site-footer__provider { color: #7D8F9C; }

/* ---------- Founder ---------------------------------------------------- */
.founder { display: grid; gap: 2rem; align-items: center; }
.founder__media { display: flex; justify-content: center; }
.founder__media img {
  width: 100%; max-width: 320px; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover; object-position: center top;
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.founder h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.founder blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 3px solid var(--copper-500); color: var(--text); }

/* ---------- Process -------------------------------------------------- */
.steps { display: grid; gap: 1rem; grid-template-columns: 1fr; counter-reset: step; }
.step {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem; box-shadow: var(--shadow-sm);
}
.step__n {
  counter-increment: step; font-family: var(--font-serif); font-size: 1.5rem; color: var(--copper-500);
  display: flex; align-items: baseline; gap: .5rem; margin-bottom: .4rem;
}
.step__n::before { content: counter(step, decimal-leading-zero); font-weight: 600; }
.step h3 { font-size: 1.08rem; margin-bottom: .25rem; }
.step p { margin: 0; font-size: .94rem; color: var(--text-soft); }

/* ---------- FAQ ----------------------------------------------------- */
.faq-group + .faq-group { margin-top: 2.5rem; }
.faq-group > h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.faq {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
  margin-bottom: .7rem; overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer; padding: 1.05rem 1.2rem; padding-right: 2.8rem;
  position: relative; font-weight: 650; color: var(--blue-900); font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.2rem; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2px solid var(--copper-600); border-bottom: 2px solid var(--copper-600);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.faq[open] summary::after { transform: rotate(-135deg); }
.faq__body { padding: 0 1.2rem 1.15rem; color: var(--text-soft); font-size: .97rem; }
.faq__body p:last-child { margin-bottom: 0; }

/* ---------- Final CTA --------------------------------------------------- */
.final-cta { text-align: center; }
.final-cta h2 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.6rem); }
.final-cta p { color: #B7C6D3; max-width: 40rem; margin-inline: auto; margin-bottom: 1.6rem; }
.final-cta .btn-row { justify-content: center; }

/* ---------- Team-Karten ------------------------------------------- */
/* Mobile/Tablet: schlichte Karte, Name/Rolle UNTER dem Foto.
   Desktop (>=900px): AURYS-Look mit schwebender Namens-Kachel. */
.team-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
.team-card {
  position: relative; border-radius: 14px; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.team-card img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center 12%;
}
.team-card figcaption {
  padding: .65rem .8rem .8rem;
}
.team-card__name { display: block; font-family: var(--font-sans); font-weight: 700; font-size: .88rem; color: var(--blue-900); line-height: 1.25; }
.team-card__role { display: block; margin-top: .1rem; font-size: .76rem; line-height: 1.3; color: var(--copper-700); }

/* ---------- Footer ---------------------------------------------------- */
.site-footer { background: var(--ink); color: #A9B9C6; padding-block: 3rem 2rem; }
.site-footer a { color: #C6D3DE; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__top { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
.site-footer .brand__word { color: #fff; }
.site-footer .brand__mark { color: var(--copper-300); }
.site-footer__tag { font-size: .9rem; margin-top: .6rem; max-width: 22rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.footer-nav a { font-size: .92rem; }
.site-footer__legal {
  margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.1);
  display: grid; gap: .5rem; font-size: .84rem;
}
.site-footer__legal .links { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- Footer: Produkte-Spalte (KanzleiVoice + KanzleiBrain) ----- */
.footer-products { display: flex; flex-direction: column; gap: .5rem; }
.footer-products__label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7D8F9C; margin-bottom: .2rem; }
.footer-products__item { display: block; font-size: .92rem; color: #C6D3DE; }
.footer-products__item:hover { color: #fff; }
.footer-products__desc { display: block; font-size: .78rem; color: #7D8F9C; margin-top: .1rem; }

/* ---------- Brain-Teaser (index.html) --------------------------------- */
.brain-teaser__inner { max-width: 40rem; }
.brain-teaser__points { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .5rem; }
.brain-teaser__points li { position: relative; padding-left: 1.6rem; font-size: .95rem; font-weight: 550; }
.brain-teaser__points li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--copper-500); }

/* ---------- Modal ---------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1.2rem; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(8, 18, 30, .62); backdrop-filter: blur(3px); animation: fade .2s var(--ease); }
.modal__dialog {
  position: relative; width: 100%; max-width: 460px;
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 4vw, 2.2rem);
  animation: pop .24s var(--ease);
}
.modal__close {
  position: absolute; top: .7rem; right: .7rem; width: 40px; height: 40px;
  border: none; background: transparent; border-radius: 10px; color: var(--text-soft);
  font-size: 1.5rem; line-height: 1; display: grid; place-items: center;
}
.modal__close:hover { background: rgba(12,26,43,.07); color: var(--blue-900); }
.modal__eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--copper-600); }
.modal h2 { font-size: 1.5rem; margin: .3rem 0 .4rem; }
.modal__intro { font-size: .95rem; color: var(--text-soft); margin-bottom: 1.2rem; }

.field { margin-bottom: .9rem; }
.field label { display: block; font-size: .85rem; font-weight: 650; color: var(--blue-900); margin-bottom: .3rem; }
.field input {
  width: 100%; padding: .75rem .9rem; font: inherit; font-size: .98rem;
  color: var(--text); background: var(--white);
  border: 1.5px solid var(--line); border-radius: 10px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus { outline: none; border-color: var(--copper-500); box-shadow: 0 0 0 3px rgba(193,122,63,.18); }
.field input:user-invalid { border-color: #C0392B; }
.field__err { display: none; margin-top: .3rem; font-size: .8rem; color: #C0392B; }
.field.is-invalid .field__err { display: block; }
.field.is-invalid input { border-color: #C0392B; }

.modal form .btn { margin-top: .4rem; }
.modal__fineprint { margin-top: .8rem; margin-bottom: 0; font-size: .78rem; color: var(--text-soft); }
.modal__success { text-align: center; padding: 1rem 0; }
.modal__success .check {
  width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%;
  background: #E7F3EC; color: #1E7A44; display: grid; place-items: center;
}
.modal__success .check svg { width: 28px; height: 28px; }
.modal__success h2 { margin-bottom: .3rem; }
.modal__success p { color: var(--text-soft); font-size: .95rem; }

/* ---------- Toast --------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%) translateY(1rem);
  z-index: 120; max-width: min(90vw, 30rem);
  background: var(--blue-900); color: #fff; padding: .85rem 1.15rem; border-radius: 12px;
  box-shadow: var(--shadow-lg); font-size: .92rem;
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Reveal on scroll -------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Legal pages ---------------------------------------------- */
.legal { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.legal .wrap { max-width: 820px; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 1.2rem; }
.legal h2 { font-size: 1.2rem; margin-top: 2rem; }
.legal h3 { font-size: 1.02rem; margin-top: 1.4rem; font-family: var(--font-sans); }
.legal p, .legal li { color: var(--text); font-size: .98rem; }
.legal .muted { color: var(--text-soft); font-size: .9rem; }
.legal a { color: var(--blue-700); word-break: break-word; }
.back-link { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1.5rem; font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--blue-700); }
.back-link::before { content: "\2190"; }

/* Simple header for legal pages */
.nav--static { position: static; margin-left: auto; transform: none; background: none; box-shadow: none; padding: 0; max-height: none; border: 0; flex-direction: row; width: auto; }
.nav--static .btn { color: #fff; }

/* =============================================================================
   Responsive
   ========================================================================== */
@media (min-width: 560px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .grid-benefits { grid-template-columns: repeat(2, 1fr); }
  .trust { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  :root { --header-h: 76px; }
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 3rem; }
  .hero__visual { display: block; align-self: center; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(5, 1fr); }
  .flow__step { padding: 3.2rem 1rem 1.1rem; }
  .flow__step::before { top: 1rem; left: 1rem; }
  .stepper { grid-template-columns: 260px 1fr; align-items: start; }
  .stepper__tabs { flex-direction: column; overflow: visible; max-height: none; }
  .stepper__tab { width: 100%; }
  .stepper__panel { grid-template-columns: 1.1fr .9fr; align-items: center; }
  .stepper__aside { display: grid; }
  .team-grid { grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
  /* Desktop: AURYS-Look – Foto füllt die Karte, Name als schwebende Kachel */
  .team-card { background: var(--blue-050); border: 0; }
  .team-card img { aspect-ratio: 4 / 5; object-position: center 10%; }
  .team-card figcaption {
    position: absolute; left: .75rem; right: .75rem; bottom: .75rem;
    background: rgba(255,255,255,.97);
    border-radius: 11px; padding: .55rem .85rem;
    box-shadow: 0 8px 22px rgba(12,26,43,.22);
  }
  .team-card__name { font-size: .95rem; }
  .team-card__role { font-size: .8rem; }
  .quotes { grid-template-columns: repeat(3, 1fr); }
  .ergebnis-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .result { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 300px 1fr; align-items: center; gap: 2.5rem; }
  .founder--media-right { grid-template-columns: 1fr 300px; }
  .founder--media-right .founder__media { order: 2; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .site-footer__top { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .legal .wrap { padding-inline: 2rem; }
}

@media (min-width: 1100px) {
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
  .site-footer__top { grid-template-columns: 1.4fr .85fr .85fr 1fr; }
}

@media (min-width: 1140px) {
  .nav-toggle { display: none; }
}

/* Mobile / tablet nav panel */
@media (max-width: 1139px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: .2rem;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 1rem clamp(1.1rem, 4vw, 2rem) 1.4rem;
    box-shadow: var(--shadow-md);
    transform: translateY(-140%); transition: transform .3s var(--ease);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); }
  .nav a:not(.btn) { padding: .8rem .6rem; border-radius: 10px; font-size: 1rem; border-bottom: 1px solid var(--line-soft); }
  .header-cta { flex-direction: column; align-items: stretch; margin: .8rem 0 0; gap: .5rem; }
  .header-cta .btn { width: 100%; padding: .85rem 1rem; font-size: .98rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }