/* ============================================================
   home.css — Seiten-CSS der Startseite (One-Pager)
   1:1 EXTRAKTION des Inline-<style> aus site/index.html
   (am 2026-06-09 visuell abgenommenes Design — NICHT verändern).

   Geändert gegenüber dem Inline-Original (NUR diese 3 Punkte):
   1. @import (Google Fonts) entfernt — Fonts lädt index.html
      per <link preconnect/stylesheet> (STRAT-25: kein @import).
      WICHTIG: Die Startseite lädt Cormorant OHNE Italic-Schnitte
      (wght 500/600/700) — der Hero-Kicker rendert sein Italic
      synthetisch. Exakt so war der abgenommene Stand.
   2. :root hier nur noch die Bild-Variablen; Farben/Schatten/Linie
      kommen aus tokens.css (Werte byte-identisch verifiziert).
   3. Bild-Pfade von "images/…" auf "../../images/…" (CSS-relativ).

   Lade-Reihenfolge in index.html: tokens.css → sections.css → home.css
   ============================================================ */

:root{
  --hero-icon:url("../../images/hoof-icon-rund-web.webp");
  --hero-wordmark:url("../../images/hoofolution_wordmark_FINAL.svg");

  --proof-before:url("../../images/fox-mare-before.jpg");
  --proof-markings:url("../../images/fox-mare-markings.png");
  --proof-after:url("../../images/fox-mare-after.jpg");
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:"Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:#0E0E0E;
  background:var(--white);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

.container{
  width:1400px;
  margin-inline:auto;
}

/* =========================
   HEADER
========================= */

.site-header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:transparent;
  border-bottom:none;
  box-shadow:none;
}

.site-header::before{
  display:none;
}

.header-inner{
  position:relative;
  z-index:1;
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:3px;
  color:var(--white);
  min-width:0;
}

.brand-mark{
  font-size:1.18rem;
  font-weight:300;
  letter-spacing:0.14em;
  text-transform:lowercase;
  line-height:1;
  white-space:nowrap;
  opacity:0.98;
}

.brand-tag{
  font-size:0.76rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  opacity:0.80;
  white-space:nowrap;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:24px;
  color:rgba(255,255,255,0.84);
  font-size:0.95rem;
}

.main-nav a{
  opacity:0.92;
  transition:opacity 0.2s ease;
}

.main-nav a:hover{ opacity:1; }

.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,0.20);
  border-radius:999px;
  color:var(--white);
  font-size:0.92rem;
  background:rgba(255,255,255,0.06);
  transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.nav-cta:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.10);
  border-color:rgba(255,255,255,0.30);
}

/* =========================
   HERO
========================= */

.hero{
  position:relative;
  overflow:hidden;
  color:var(--white);
  padding:180px 0 84px;
  background:
    radial-gradient(circle at 2% 3%, rgba(227,130,50,0.32), rgba(227,130,50,0.08) 14%, rgba(227,130,50,0.00) 24%),
    linear-gradient(135deg, #1a3050 0%, #13283F 30%, #0f1f30 100%);
  isolation:isolate;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:none;
  pointer-events:none;
  z-index:0;
}

.hero::after{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.010) 0 1px, transparent 1px 28px);
  opacity:0.12;
  mix-blend-mode:soft-light;
  pointer-events:none;
  z-index:0;
}

.hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:687px 659px;
  gap:54px;
  align-items:start;
  min-height:800px;
}

.hero-copy{
  position:relative;
  z-index:2;
  max-width:780px;
  padding-top:62px;
  padding-bottom:8px;
}

.hero-kicker{
  margin:0;
  margin-left:-0.12ch;
  transform:translateY(-132px) translateX(-6ch);
  font-family:"Cormorant", Georgia, serif;
  font-size:2.34rem;
  font-weight:600;
  font-style:italic; /* 25.04.2026: Editorial-Italic uebernommen (Eyebrow-Tradition) */
  letter-spacing:0.01em;
  line-height:1;
  color:rgba(255,255,255,0.95);
  white-space:nowrap;
  text-shadow:0 8px 24px rgba(0,0,0,0.10);
}

.hero-mainblock{
  margin-top:104px;
}

.hero-headline{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  font-size:77px;
  line-height:0.82;
  font-weight:760;
  letter-spacing:-0.095em;
}

.hero-word{
  display:block;
  white-space:nowrap;
  text-shadow:0 10px 30px rgba(0,0,0,0.14);
}

.hero-word.start{
  margin-left:2.72ch;
  color:var(--orange);
}

.hero-word.growing{
  margin-left:1.34ch;
  color:var(--orange);
}

.kicker-highlight{
  color:var(--orange);
}

.hero-word.working{
  margin-left:0.16ch;
  color:rgba(255,255,255,0.80);
  text-shadow:0 10px 30px rgba(0,0,0,0.16);
}

.hero-word.hooves{
  margin-left:1.26ch;
  color:rgba(255,255,255,0.80);
}

.hero-problem{
  margin:52px 0 0 0.9ch;
  font-size:2.3rem;
  font-weight:500;
  color:rgba(255,255,255,0.95);
  max-width:17ch;
  line-height:1.02;
  letter-spacing:-0.03em;
}

/* ES-Zeile ist deutlich laenger als DE/EN — ein Punkt kleiner,
   bleibt im Verhaeltnis zur Subline gross (Inhaber 02.08.). */
:lang(es) .hero-problem{
  font-size:2.2rem;
}

.hero-subline{
  margin:24px 0 0 0.9ch;
  font-size:1.14rem;
  color:rgba(255,255,255,0.82);
  max-width:41ch;
}

.hero-actions{
  margin-top:46px;
  margin-left:0.9ch;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.button-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 22px;
  border-radius:999px;
  background:rgba(255,255,255,0.96);
  color:var(--blue-deep);
  font-weight:600;
  letter-spacing:0.01em;
  box-shadow:0 12px 30px rgba(0,0,0,0.16);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.button-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 36px rgba(0,0,0,0.22);
}

.hero-visual{
  position:relative;
  min-height:720px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  isolation:isolate;
  padding-top:0;
}

.hero-visual::before{
  content:"";
  position:absolute;
  inset:22% 2% 8% 16%;
  background:
    radial-gradient(circle at 42% 24%, rgba(255,255,255,0.20), transparent 0 16%),
    radial-gradient(circle at 44% 50%, rgba(78,131,184,0.22), transparent 0 28%),
    radial-gradient(circle at 70% 52%, rgba(9,20,32,0.28), transparent 0 24%);
  filter:blur(34px);
  opacity:0.95;
  pointer-events:none;
  z-index:0;
  border-radius:46% 38% 42% 34% / 36% 42% 36% 46%;
}

.hero-visual::after{
  content:"";
  position:absolute;
  inset:auto 9% 4% 28%;
  height:21%;
  background:radial-gradient(circle at 50% 50%, rgba(7,16,26,0.38), transparent 68%);
  filter:blur(24px);
  pointer-events:none;
  z-index:0;
}

.hero-brand-group{
  position:absolute;
  top:-176px;
  left:52%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  pointer-events:none;
}

.hero-wordmark{
  width:416px;
  aspect-ratio:4.2 / 1;
  background-image:var(--hero-wordmark);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  opacity:0.90;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,0.14)) drop-shadow(6px 8px 10px rgba(255,255,255,0.50));
}

.hero-motto{
  font-family:"Montserrat", system-ui, sans-serif;
  font-weight:300;
  font-size:16px;
  letter-spacing:0.18em;
  color:rgba(255,255,255,0.75);
  white-space:nowrap;
  transform:translateY(10px);
}

.hero-hoof{
  position:relative;
  z-index:1;
  width:566px;
  aspect-ratio:1 / 1;
  background-image:var(--hero-icon);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center 44%;
  filter:drop-shadow(0 30px 54px rgba(0,0,0,0.28));
  transform:translateX(2%) translateY(-6px) scale(1.05);
}

.hero-hoof::before{
  display:none;
}

/* =========================
   PROOF
========================= */

.proof{
  position:relative;
  overflow:hidden;
  padding:96px 0 112px;
  background:
    linear-gradient(180deg, rgba(238,232,219,0.96) 0%, var(--surface-warm) 9%, var(--surface-warm) 100%);
}

.proof::before{
  content:"";
  position:absolute;
  top:-34px;
  left:0;
  right:0;
  height:72px;
  background:
    linear-gradient(180deg, rgba(190,176,148,0.20) 0%, rgba(248,246,241,0.94) 72%, rgba(248,246,241,0.00) 100%);
  pointer-events:none;
}

.proof::after{
  content:"";
  position:absolute;
  left:-180px;
  top:-26px;
  width:700px;
  height:470px;
  background:
    radial-gradient(circle at 34% 18%, rgba(55,104,156,0.18), rgba(55,104,156,0.08) 30%, rgba(55,104,156,0.00) 72%);
  filter:blur(18px);
  pointer-events:none;
  opacity:0.95;
}

.proof-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:559px 805px;
  gap:36px;
  align-items:start;
}

.proof-copy{
  max-width:430px;
  justify-self:end;
  margin-top:189px;
  padding-top:8px;
  transform:translateX(18px);
}

.proof-title{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  font-size:4.9rem;
  line-height:0.88;
  letter-spacing:-0.08em;
  font-weight:760;
  color:var(--blue-deep);
}

.proof-word{
  display:block;
  white-space:nowrap;
}

.proof-word.see{
  margin-left:0;
  color:var(--blue-deep);
}

.proof-word.how{
  margin-left:0.8ch;
  color:var(--blue-deep);
}

.proof-word.works{
  margin-left:0;
  color:var(--blue-deep);
}

.proof-line{
  margin:20px 0 0 0.1ch;
  font-size:1.3rem;
  line-height:1.24;
  color:rgba(31,58,95,0.78);
  max-width:18ch;
}

.proof-detail{
  margin:22px 0 0 0.1ch;
  font-size:1rem;
  line-height:1.56;
  color:rgba(31,58,95,0.78); /* 25.04.2026: 0.62 → 0.78 fuer WCAG AA Body (~5.8:1) */
  max-width:28ch;
}

.proof-stage{
  position:relative;
  width:610px;
  justify-self:end;
  aspect-ratio:4 / 5;
  border-radius:32px;
  overflow:hidden;
  background:#dfe7ef;
  box-shadow:var(--shadow);
  border:1px solid rgba(19,40,63,0.10);
  isolation:isolate;
}

.proof-surface{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)),
    radial-gradient(circle at 50% 15%, rgba(255,255,255,0.20), transparent 24%),
    linear-gradient(180deg, rgba(16,31,49,0.05), rgba(16,31,49,0.14));
  z-index:5;
  pointer-events:none;
}

.proof-layer{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.01);
}

.proof-before{
  background-image:var(--proof-before);
  z-index:1;
}

.proof-markings{
  background-image:var(--proof-markings);
  z-index:2;
  opacity:0;
  animation:markingsFade 9s ease-in-out infinite;
}

.proof-after{
  background-image:var(--proof-after);
  z-index:3;
  opacity:0;
  animation:afterFade 9s ease-in-out infinite;
}

.proof-topbar{
  position:absolute;
  top:18px;
  left:18px;
  right:18px;
  z-index:6;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.proof-chip{
  display:inline-flex;
  align-items:center;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(19,40,63,0.72);
  color:var(--white);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(8px);
}

.proof-chip.active{
  background:rgba(227,122,45,0.92);
  border-color:rgba(227,122,45,0.92);
  color:#fff;
}

.proof-bottom{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:6;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.proof-note{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.88);
  color:var(--blue-deep);
  font-size:0.82rem;
  border:1px solid rgba(19,40,63,0.08);
  backdrop-filter:blur(8px);
}

.proof-note strong{
  font-weight:650;
  margin-right:6px;
}

@keyframes markingsFade{
  0%, 18% { opacity:0; }
  28%, 56% { opacity:1; }
  68%, 100% { opacity:0; }
}

@keyframes afterFade{
  0%, 48% { opacity:0; }
  62%, 86% { opacity:1; }
  100% { opacity:0; }
}

/* =========================
   APP
========================= */

.app{
  position:relative;
  overflow:hidden;
  padding:112px 0 96px;
  color:var(--white);
  background:
    radial-gradient(circle at 98% 97%, rgba(227,130,50,0.24), rgba(227,130,50,0.06) 14%, rgba(227,130,50,0.00) 24%),
    linear-gradient(135deg, #1a3050 0%, #13283F 30%, #0f1f30 100%);
  isolation:isolate;
}

.app::after{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.010) 0 1px, transparent 1px 28px);
  opacity:0.12;
  mix-blend-mode:soft-light;
  pointer-events:none;
  z-index:0;
}

.app-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:659px 687px;
  gap:54px;
  align-items:center;
}

.app-stage{
  position:relative;
  width:610px;
  aspect-ratio:16 / 10;
  border-radius:32px;
  overflow:hidden;
  background:linear-gradient(145deg, #1c3652, #0f1f30);
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,0.08);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:18px;
}

.app-topbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  z-index:2;
}

.app-chip{
  display:inline-flex;
  align-items:center;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(19,40,63,0.72);
  color:var(--white);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(8px);
}

.app-chip.active{
  background:rgba(227,122,45,0.92);
  border-color:rgba(227,122,45,0.92);
  color:#fff;
}

.app-placeholder{
  flex:1;
  margin:16px 14px;
  border:2px dashed rgba(255,255,255,0.15);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.app-placeholder-label{
  font-size:0.82rem;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.35);
}

.app-bottombar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:2;
}

.app-colors{
  display:flex;
  gap:10px;
}

.app-color-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.15);
}

.app-copy{
  max-width:480px;
  padding-top:0;
}

.app-kicker{
  margin:0 0 14px;
  font-family:"Cormorant", Georgia, serif;
  font-size:1.12rem;
  font-weight:600;
  color:var(--orange);
  letter-spacing:0.01em;
}

.app-title{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  font-size:2.0rem;
  line-height:0.88;
  letter-spacing:-0.08em;
  font-weight:760;
  color:var(--white);
}

.app-word{
  display:block;
  white-space:nowrap;
}

.app-line{
  margin:20px 0 0;
  font-size:1.12rem;
  line-height:1.5;
  color:rgba(255,255,255,0.82);
  max-width:28ch;
}

.app-detail{
  margin:18px 0 0;
  font-size:1rem;
  line-height:1.56;
  color:rgba(255,255,255,0.58);
  max-width:32ch;
}

.app-actions{
  margin-top:40px;
}

/* =========================
   EXAMPLES
========================= */

.examples{
  padding:112px 0 96px;
  background:var(--surface-warm);
}

.examples-header{
  text-align:center;
  margin-bottom:64px;
}

.examples-kicker{
  font-family:"Cormorant", serif;
  font-weight:600;
  font-size:1.12rem;
  color:var(--orange-deep);
  margin:0 0 8px;
}

.examples-title{
  font-family:"Montserrat", sans-serif;
  font-weight:760;
  font-size:2.0rem;
  color:var(--blue);
  margin:0 0 8px;
  line-height:1.2;
}

.examples-sub{
  font-size:1.0rem;
  color:rgba(14,14,14,0.60);
  margin:0;
}

.examples-grid{
  display:grid;
  grid-template-columns:434px 434px 434px;
  gap:32px;
  justify-content:center;
}

.example-card{
  background:var(--white);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.example-thumb{
  aspect-ratio:16/10;
  background:var(--surface);
  border-bottom:1px solid rgba(0,0,0,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.example-thumb-placeholder{
  width:calc(100% - 48px);
  height:calc(100% - 48px);
  border:2px dashed rgba(31,58,95,0.18);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.88rem;
  color:rgba(31,58,95,0.35);
  letter-spacing:0.06em;
  text-transform:uppercase;
}

.example-body{
  padding:28px 28px 32px;
  flex:1;
  display:flex;
  flex-direction:column;
}

.example-label{
  font-size:0.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--orange);
  margin:0 0 10px;
}

.example-name{
  font-family:"Montserrat", sans-serif;
  font-weight:700;
  font-size:1.12rem;
  color:var(--blue);
  margin:0 0 6px;
}

.example-desc{
  font-size:0.98rem;
  line-height:1.6;
  color:rgba(14,14,14,0.58);
  margin:0;
}

/* =========================
   BOOK
========================= */

.book{
  position:relative;
  overflow:hidden;
  padding:112px 0 96px;
  color:var(--white);
  background:
    radial-gradient(circle at 2% 97%, rgba(227,130,50,0.24), rgba(227,130,50,0.06) 14%, rgba(227,130,50,0.00) 24%),
    linear-gradient(135deg, #1a3050 0%, #13283F 30%, #0f1f30 100%);
  isolation:isolate;
}

.book::after{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.010) 0 1px, transparent 1px 28px);
  opacity:0.12;
  mix-blend-mode:soft-light;
  pointer-events:none;
  z-index:0;
}

.book-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:687px 659px;
  gap:54px;
  align-items:center;
}

.book-kicker{
  font-family:"Cormorant", serif;
  font-weight:600;
  font-size:1.12rem;
  color:var(--orange);
  margin:0 0 8px;
}

.book-title{
  font-family:"Montserrat", sans-serif;
  font-weight:760;
  font-size:2.0rem;
  line-height:1.2;
  margin:0 0 14px;
}

.book-title .book-word{
  display:block;
}

.book-line{
  font-size:1.12rem;
  font-weight:400;
  line-height:1.5;
  opacity:0.78;
  margin:0 0 12px;
}

.book-detail{
  font-size:1.0rem;
  line-height:1.6;
  opacity:0.58;
  margin:0 0 28px;
}

.book-actions{
  margin-top:8px;
}

.book-actions .button-primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 36px;
  border-radius:999px;
  background:var(--white);
  color:var(--blue);
  font-weight:700;
  font-size:1rem;
  text-decoration:none;
  box-shadow:0 4px 24px rgba(0,0,0,0.10);
}

.book-cover{
  display:flex;
  align-items:center;
  justify-content:center;
}

.book-cover-placeholder{
  width:380px;
  height:540px;
  border-radius:8px;
  background:linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:2px dashed rgba(255,255,255,0.18);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  box-shadow:
    12px 16px 48px rgba(0,0,0,0.30),
    0 0 0 1px rgba(255,255,255,0.04);
  transform:perspective(800px) rotateY(-4deg);
}

.book-cover-title{
  font-family:"Montserrat", sans-serif;
  font-weight:700;
  font-size:1.4rem;
  color:rgba(255,255,255,0.60);
  text-align:center;
  padding:0 32px;
  line-height:1.4;
}

.book-cover-sub{
  font-size:0.88rem;
  color:rgba(255,255,255,0.30);
  text-transform:uppercase;
  letter-spacing:0.08em;
}

/* =========================
   FAQ
========================= */

.faq{
  padding:112px 0 96px;
  background:var(--surface-warm);
}

.faq-header{
  text-align:center;
  margin-bottom:56px;
}

.faq-kicker{
  font-family:"Cormorant", serif;
  font-weight:600;
  font-size:1.12rem;
  color:var(--orange-deep);
  margin:0 0 8px;
}

.faq-title{
  font-family:"Montserrat", sans-serif;
  font-weight:760;
  font-size:2.0rem;
  color:var(--blue);
  margin:0;
  line-height:1.2;
}

.faq-list{
  max-width:820px;
  margin:0 auto;
}

.faq-item{
  border-bottom:1px solid rgba(31,58,95,0.12);
}

.faq-question{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:20px 0;
  background:none;
  border:none;
  cursor:pointer;
  font-family:"Montserrat", sans-serif;
  font-weight:600;
  font-size:1.06rem;
  color:var(--blue);
  text-align:left;
  line-height:1.5;
}

.faq-question::after{
  content:"+";
  font-size:1.6rem;
  font-weight:300;
  color:var(--orange);
  margin-left:24px;
  flex-shrink:0;
  transition:transform 0.3s ease;
}

.faq-item.open .faq-question::after{
  content:"\2212";
  transform:rotate(180deg);
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.35s ease, padding 0.35s ease;
}

.faq-item.open .faq-answer{
  max-height:300px;
  padding-bottom:24px;
}

.faq-answer p{
  margin:0;
  font-size:1.02rem;
  line-height:1.7;
  color:rgba(14,14,14,0.62);
}

/* =========================
   FOOTER
========================= */

.site-footer{
  padding:48px 0;
  background:var(--blue-deep);
  border-top:1px solid rgba(255,255,255,0.08);
}

.footer-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  color:rgba(255,255,255,0.70);
  font-size:0.95rem;
}

.footer-nav a:hover{
  color:var(--white);
}