/* ==========================================================================
   AURODEC — Marketing Site Stylesheet
   Single cohesive design system · navy ↔ teal · serif wordmark feel
   Static, bilingual (DE default / EN), responsive, no JS dependencies here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Reset & base
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

:root{
  /* Brand palette — anchor tokens */
  --brand:#1a2545;          /* Marineblau / primary navy */
  --brand-dark:#0f1731;     /* darker navy */
  --brand-light:#e8edf3;    /* light tint */
  --teal:#3a8a8e;           /* petrol/teal */
  --teal-bright:#2d9b88;    /* bright teal — primary CTA */
  --teal-soft:#d8ecec;      /* soft teal surface */

  --text:#1a2545;
  --muted:#5e6b87;
  --border:#d8dde7;
  --bg:#f5f8f8;
  --white:#ffffff;

  /* Geometry & elevation */
  --radius:14px;
  --radius-lg:22px;
  --shadow:0 4px 24px rgba(26,37,69,.09);
  --shadow-lg:0 20px 60px rgba(15,23,49,.18);
  --container:1160px;
  --nav-h:72px;

  /* Signature gradients */
  --grad-navy-teal:linear-gradient(135deg,#0f1731,#1a2545 45%,#2c5b6c);
  --grad-cta:linear-gradient(135deg,#2d9b88,#3a8a8e 60%,#1a2545);
  --glow-teal:radial-gradient(circle, rgba(45,155,136,.25), transparent 70%);

  /* Type stacks */
  --font-body:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head:Georgia, "Times New Roman", serif;
}

body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;              /* guard against decorative overflow */
}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;color:var(--text)}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}
::selection{background:rgba(45,155,136,.25)}

/* --------------------------------------------------------------------------
   1. Language visibility (JS toggles html.lang-de / html.lang-en)
   Only ever hide the inactive one; never force a display type on the active.
   -------------------------------------------------------------------------- */
html.lang-de .only-en{display:none}
html.lang-en .only-de{display:none}

/* --------------------------------------------------------------------------
   2. Layout primitives
   -------------------------------------------------------------------------- */
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,2rem);
}

section.section{
  padding-block:clamp(3.5rem,8vw,6.5rem);
  position:relative;
}
.section--alt{background:var(--white)}
.section--tint{background:var(--brand-light)}

/* Dark sections: navy gradient + inverted text */
.section--dark{
  background:var(--grad-navy-teal);
  color:rgba(255,255,255,.86);
  overflow:hidden;
}
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark .section-title{color:#fff}
.section--dark .section-lead{color:rgba(255,255,255,.78)}
.section--dark .eyebrow{color:#7fd6c4}

/* --------------------------------------------------------------------------
   3. Section headings
   -------------------------------------------------------------------------- */
.section-head{
  max-width:720px;
  margin-inline:auto;
  text-align:center;
  margin-bottom:clamp(2rem,5vw,2.75rem);
}
.section-head--left{
  margin-inline:0;
  text-align:left;
  max-width:640px;
}
.eyebrow{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  font-weight:800;
  color:var(--teal-bright);
  margin-bottom:.85rem;
}
.section-title{
  font-size:clamp(1.7rem,4vw,2.6rem);
  letter-spacing:-.01em;
}
.section-lead{
  margin-top:1rem;
  color:var(--muted);
  font-size:clamp(1.02rem,1.6vw,1.18rem);
  line-height:1.7;
}

/* Optional gradient text accent (reused in hero + headings) */
.grad-text{
  background:linear-gradient(120deg,#7fd6c4,#2d9b88 55%,#3a8a8e);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.8rem 1.5rem;
  border:1.5px solid transparent;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.01em;
  line-height:1;
  transition:transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .2s ease;
  white-space:nowrap;
}
.btn:focus-visible{outline:3px solid rgba(45,155,136,.5);outline-offset:3px}

.btn--primary{
  background:var(--teal-bright);
  color:#fff;
  box-shadow:0 8px 22px rgba(45,155,136,.35);
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(45,155,136,.45);
  background:#279a86;
}

.btn--ghost{
  background:rgba(255,255,255,.06);
  color:#fff;
  border-color:rgba(255,255,255,.55);
}
.btn--ghost:hover{
  background:rgba(255,255,255,.16);
  border-color:#fff;
  transform:translateY(-2px);
}

.btn--dark{
  background:var(--brand);
  color:#fff;
}
.btn--dark:hover{
  background:var(--brand-dark);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.btn--lg{
  padding:1rem 2rem;
  font-size:1.05rem;
}

/* --------------------------------------------------------------------------
   5. Navigation — sticky glassmorphism, solid on scroll
   -------------------------------------------------------------------------- */
header.site-nav{
  position:sticky;
  top:0;
  z-index:100;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  background:rgba(245,248,248,.72);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(26,37,69,.08);
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
header.site-nav.scrolled{
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow);
  border-bottom-color:transparent;
}

.nav-inner{
  max-width:var(--container);
  width:100%;
  margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,2rem);
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

a.nav-logo{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.25rem;
  color:var(--brand);
  letter-spacing:.01em;
}
a.nav-logo img{height:40px;width:auto}

nav.nav-menu{
  display:flex;
  align-items:center;
  gap:clamp(1rem,2.5vw,2rem);
}

a.nav-link{
  position:relative;
  font-weight:600;
  font-size:.96rem;
  color:var(--brand);
  padding:.35rem 0;
  transition:color .2s ease;
}
a.nav-link::after{
  content:"";
  position:absolute;
  left:0;bottom:-2px;
  width:0;height:2px;
  background:var(--teal-bright);
  border-radius:2px;
  transition:width .28s cubic-bezier(.2,.7,.2,1);
}
a.nav-link:hover{color:var(--teal-bright)}
a.nav-link:hover::after{width:100%}
a.nav-link.active{color:var(--teal-bright)}
a.nav-link.active::after{width:100%}

/* Language pill toggle */
.lang-toggle{
  display:inline-flex;
  align-items:center;
  border:1.5px solid var(--border);
  border-radius:999px;
  padding:3px;
  background:var(--white);
  gap:2px;
}
.lang-toggle button{
  border:none;
  background:transparent;
  color:var(--muted);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.04em;
  padding:.32rem .7rem;
  border-radius:999px;
  transition:background .2s ease, color .2s ease;
}
.lang-toggle button:hover{color:var(--brand)}
.lang-toggle button.active{
  background:var(--brand);
  color:#fff;
}

/* Burger — hidden on desktop */
button.nav-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;height:44px;
  border:none;
  background:transparent;
  border-radius:10px;
}
button.nav-burger .bar{
  display:block;
  width:24px;height:2.5px;
  margin-inline:auto;
  background:var(--brand);
  border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}
header.site-nav.open button.nav-burger .bar:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
header.site-nav.open button.nav-burger .bar:nth-child(2){opacity:0}
header.site-nav.open button.nav-burger .bar:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* --------------------------------------------------------------------------
   6. Hero — gradient, parallax layers, centered content
   -------------------------------------------------------------------------- */
section.hero{
  position:relative;
  overflow:hidden;
  min-height:min(88vh,720px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(4rem,10vw,7rem) clamp(1.25rem,5vw,2rem);
  background:var(--grad-navy-teal);
  color:#fff;
}

.hero-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  will-change:transform;
}
.hero-layer--glow{
  background:
    radial-gradient(60% 55% at 72% 30%, rgba(45,155,136,.42), transparent 70%),
    radial-gradient(48% 48% at 18% 78%, rgba(58,138,142,.34), transparent 72%);
  filter:saturate(120%);
}
.hero-layer--grid{
  opacity:.14;
  background-image:repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.35) 0,
    rgba(255,255,255,.35) 1px,
    transparent 1px,
    transparent 24px
  );
  mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent 85%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent 85%);
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:820px;
  margin-inline:auto;
}
.hero-badge{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.74rem;
  font-weight:800;
  color:#8fe0cf;
  border:1px solid rgba(143,224,207,.4);
  background:rgba(45,155,136,.12);
  padding:.45rem 1rem;
  border-radius:999px;
  margin-bottom:1.5rem;
  backdrop-filter:blur(4px);
}
h1.hero-title{
  color:#fff;
  font-size:clamp(2.2rem,5.5vw,3.8rem);
  line-height:1.08;
  letter-spacing:-.015em;
  margin-bottom:1.25rem;
}
p.hero-sub{
  font-size:clamp(1.05rem,1.9vw,1.25rem);
  color:rgba(255,255,255,.82);
  max-width:620px;
  margin:0 auto 2rem;
  line-height:1.65;
}
.hero-cta{
  display:flex;
  gap:1rem;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}

/* Downward scroll cue */
.hero-scroll{
  position:absolute;
  left:50%;bottom:1.8rem;
  transform:translateX(-50%);
  z-index:2;
  width:26px;height:42px;
  border:2px solid rgba(255,255,255,.5);
  border-radius:999px;
}
.hero-scroll::before{
  content:"";
  position:absolute;
  left:50%;top:8px;
  width:4px;height:8px;
  background:#fff;
  border-radius:2px;
  transform:translateX(-50%);
  animation:heroScroll 1.8s ease-in-out infinite;
}
@keyframes heroScroll{
  0%{opacity:0;transform:translate(-50%,0)}
  30%{opacity:1}
  70%{opacity:1}
  100%{opacity:0;transform:translate(-50%,14px)}
}

/* --------------------------------------------------------------------------
   7. Grids & cards
   -------------------------------------------------------------------------- */
.grid{
  display:grid;
  gap:clamp(1rem,3vw,1.75rem);
}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}

.card{
  position:relative;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .28s ease, box-shadow .3s ease, border-color .3s ease;
}
.card::before{
  content:"";
  position:absolute;
  left:0;top:0;
  width:100%;height:4px;
  background:linear-gradient(90deg,var(--teal-bright),var(--teal),var(--brand));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(45,155,136,.5);
}
.card:hover::before{transform:scaleX(1)}

.card-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;height:54px;
  border-radius:50%;
  background:var(--teal-soft);
  color:var(--teal-bright);
  font-size:1.5rem;
  margin-bottom:1.15rem;
}
.card h3{
  font-size:1.25rem;
  color:var(--brand);
  margin-bottom:.6rem;
}
.card p{
  color:var(--muted);
  font-size:.98rem;
  line-height:1.65;
}
a.card-link{
  display:inline-flex;
  align-items:center;
  margin-top:1.1rem;
  color:var(--teal-bright);
  font-weight:700;
  font-size:.95rem;
}
a.card-link::after{
  content:"→";
  margin-left:.4rem;
  transition:transform .25s ease;
}
a.card-link:hover::after{transform:translateX(5px)}

/* Cards inside dark sections invert to glass surfaces */
.section--dark .card{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  box-shadow:none;
}
.section--dark .card h3{color:#fff}
.section--dark .card p{color:rgba(255,255,255,.75)}
.section--dark .card-icon{
  background:rgba(45,155,136,.22);
  color:#8fe0cf;
}
.section--dark .card:hover{border-color:rgba(143,224,207,.5)}

/* --------------------------------------------------------------------------
   8. Split feature rows
   -------------------------------------------------------------------------- */
.split{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.split + .split{margin-top:clamp(3rem,7vw,5rem)}
.split--reverse .split-visual{order:-1}

.split-text h2{
  font-size:clamp(1.5rem,3.2vw,2.15rem);
  margin-bottom:1rem;
  letter-spacing:-.01em;
}
.split-text p{
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.7;
  margin-bottom:1.25rem;
}

.split-visual{
  position:relative;
  min-height:320px;
  border-radius:var(--radius-lg);
  background:var(--grad-navy-teal);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.split-visual::before{  /* soft inner glow */
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(55% 55% at 70% 25%, rgba(45,155,136,.4), transparent 70%),
    radial-gradient(45% 45% at 20% 85%, rgba(58,138,142,.35), transparent 72%);
}
.split-visual::after{ /* faint frame highlight */
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}

/* Photo variant: real image fills the panel, branded tint keeps it on-theme.
   Paint order → img (child) sits above the ::before glow (hidden here),
   the ::after overlay carries the navy↔teal tint above the image. */
.split-visual--photo{background:var(--brand-dark)}
.split-visual img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}
.split-visual--photo::before{display:none}
.split-visual--photo::after{
  background:linear-gradient(135deg, rgba(15,23,49,.30), rgba(45,155,136,.14) 70%, rgba(58,138,142,.10));
}

/* Check list */
.check-list{margin-top:.5rem}
.check-list li{
  position:relative;
  padding-left:2rem;
  margin-bottom:.85rem;
  color:var(--text);
  line-height:1.55;
}
.check-list li::before{
  content:"✓";
  position:absolute;
  left:0;top:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.35rem;height:1.35rem;
  border-radius:50%;
  background:var(--teal-soft);
  color:var(--teal-bright);
  font-size:.8rem;
  font-weight:800;
}
.section--dark .check-list li{color:rgba(255,255,255,.85)}
.section--dark .check-list li::before{
  background:rgba(45,155,136,.25);
  color:#8fe0cf;
}

/* --------------------------------------------------------------------------
   9. Stats / trust strip
   -------------------------------------------------------------------------- */
.stat-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(1.5rem,5vw,3.5rem);
  text-align:center;
}
.stat{min-width:140px}
.stat-num{
  font-family:var(--font-head);
  font-size:clamp(2rem,4.5vw,3rem);
  font-weight:700;
  color:var(--teal-bright);
  line-height:1;
}
.stat-label{
  display:block;
  margin-top:.55rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.76rem;
  font-weight:700;
  color:var(--muted);
}
.section--dark .stat-num{color:#8fe0cf}
.section--dark .stat-label{color:rgba(255,255,255,.7)}

/* --------------------------------------------------------------------------
   10. CTA band
   -------------------------------------------------------------------------- */
.cta-band{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--grad-cta);
  color:#fff;
  text-align:center;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,5vw,3rem);
  box-shadow:var(--shadow-lg);
}
.cta-band::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(50% 80% at 50% 0%, rgba(255,255,255,.22), transparent 70%);
  pointer-events:none;
}
.cta-band h2{
  color:#fff;
  font-size:clamp(1.7rem,4vw,2.5rem);
  margin-bottom:.9rem;
  position:relative;
  z-index:1;
}
.cta-band p{
  color:rgba(255,255,255,.9);
  max-width:560px;
  margin:0 auto 1.8rem;
  font-size:1.08rem;
  position:relative;
  z-index:1;
}
.cta-band .hero-cta{position:relative;z-index:1}

/* --------------------------------------------------------------------------
   11. Reveal-on-scroll (JS adds .is-visible)
   -------------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0s);
}
.reveal--left{transform:translateX(-30px)}
.reveal--right{transform:translateX(30px)}
.reveal--scale{transform:scale(.94)}
.reveal.is-visible{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
footer.site-footer{
  background:var(--brand-dark);
  color:rgba(255,255,255,.7);
  padding-block:3rem;
}
.footer-inner{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,2rem);
  display:grid;
  grid-template-columns:1.6fr repeat(3,1fr);
  gap:clamp(1.75rem,4vw,3rem);
}
.footer-brand img{
  height:34px;width:auto;margin-bottom:1rem;
  background:#fff;                       /* weiße Box: Navy-Logo lesbar auf dunklem Footer */
  padding:.45rem .65rem;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.footer-brand p{
  color:rgba(255,255,255,.55);
  font-size:.92rem;
  line-height:1.6;
  max-width:320px;
}
.footer-col h4{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
  color:#7fd6c4;
  margin-bottom:1rem;
  font-family:var(--font-body);
  font-weight:800;
}
.footer-col a{
  display:block;
  color:rgba(255,255,255,.65);
  font-size:.94rem;
  line-height:2.1;
  transition:color .2s ease;
}
.footer-col a:hover{color:#fff}
.footer-addr{
  display:block;
  color:rgba(255,255,255,.5);
  font-size:.9rem;
  line-height:1.7;
  margin-top:.4rem;
}

.footer-bottom{
  max-width:var(--container);
  margin-inline:auto;
  margin-top:2.5rem;
  padding-top:1.5rem;
  padding-inline:clamp(1.25rem,5vw,2rem);
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
  font-size:.85rem;
  color:rgba(255,255,255,.5);
}
.footer-legal a{
  color:rgba(255,255,255,.6);
  margin-left:1.25rem;
  transition:color .2s ease;
}
.footer-legal a:first-child{margin-left:0}
.footer-legal a:hover{color:#7fd6c4}

/* --------------------------------------------------------------------------
   13. Legal pages typography
   -------------------------------------------------------------------------- */
.legal{
  max-width:820px;
  margin-inline:auto;
  padding-block:clamp(2.5rem,6vw,4rem);
}
.legal h1{
  font-size:clamp(1.9rem,4vw,2.6rem);
  margin-bottom:1.5rem;
  letter-spacing:-.01em;
}
.legal h2{
  color:var(--brand);
  font-size:1.4rem;
  margin-top:2.25rem;
  margin-bottom:.75rem;
}
.legal h3{
  color:var(--brand);
  font-size:1.12rem;
  margin-top:1.5rem;
  margin-bottom:.5rem;
}
.legal p,
.legal li{
  line-height:1.7;
  color:#3d4a68;
  font-size:.98rem;
  margin-bottom:.85rem;
}
.legal ul{padding-left:1.4rem;list-style:disc}
.legal ul li{margin-bottom:.4rem}
.legal address{
  font-style:normal;
  line-height:1.7;
  color:#3d4a68;
  margin-bottom:.85rem;
}
.legal a{
  color:var(--teal-bright);
  text-decoration:underline;
  text-underline-offset:2px;
}
.legal a:hover{color:var(--teal)}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--teal-bright);
  font-weight:700;
  margin-bottom:1.5rem;
  transition:transform .2s ease, color .2s ease;
}
.back-link::before{content:"←";transition:transform .2s ease}
.back-link:hover{color:var(--teal)}
.back-link:hover::before{transform:translateX(-4px)}
.muted-note{
  color:var(--muted);
  font-size:.85rem;
  margin-top:1.5rem;
}

/* --------------------------------------------------------------------------
   14. Responsive — tablet
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}

/* --------------------------------------------------------------------------
   15. Responsive — burger breakpoint / small tablet ≤820px
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  button.nav-burger{display:flex}

  nav.nav-menu{
    position:absolute;
    top:var(--nav-h);
    left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
    background:var(--white);
    padding:1rem clamp(1.25rem,5vw,2rem) 1.5rem;
    box-shadow:var(--shadow-lg);
    border-bottom:1px solid var(--border);
    /* hidden by default */
    display:none;
  }
  header.site-nav.open nav.nav-menu{display:flex}

  a.nav-link{
    padding:.75rem .25rem;
    border-bottom:1px solid var(--border);
  }
  a.nav-link::after{display:none}
  a.nav-link:last-of-type{border-bottom:none}

  .lang-toggle{align-self:flex-start;margin-top:.5rem}

  /* Split stacks; reversed visual returns to natural order */
  .split{grid-template-columns:1fr}
  .split--reverse .split-visual{order:0}
  .split-visual{min-height:260px}
}

/* --------------------------------------------------------------------------
   16. Responsive — phones ≤560px
   -------------------------------------------------------------------------- */
@media (max-width:560px){
  .grid--2,
  .grid--3{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .footer-legal a{margin-left:0;margin-right:1.25rem}
}

@media (max-width:380px){
  .footer-inner{grid-template-columns:1fr}
  .stat-row{gap:1.5rem 2rem}
}

/* --------------------------------------------------------------------------
   17. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1 !important;transform:none !important}
  .hero-layer{transform:none !important}
  .hero-scroll::before{animation:none}
}