/* ==========================================================================
   PINEA Familienkapital — gemeinsames Stylesheet
   Wird von index.html und impressum.html genutzt.
   ========================================================================== */

        @font-face {
            font-family: 'CustomWebFont';
            src: url('font/BrandonText-Regular.woff2') format('woff2'),
                 url('font/BrandonText-Regular.woff') format('woff');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'CustomWebFont';
            src: url('font/BrandonText-Medium.woff2') format('woff2'),
                 url('font/BrandonText-Medium.woff') format('woff');
            font-weight: 500 700;
            font-style: normal;
            font-display: swap;
        }

        /* CSS Custom Properties */
        :root {
            --primary-color: #001C3D;
            --secondary-color: #1e40af;
            --accent-color: #3b82f6;
            --text-primary: #001C3D;
            --text-primary-alt: #1f2937;
            --text-secondary: #001C3D;
            --text-secondary-alt: #6b7280;
            --text-light: #9ca3af;
            --bg-primary: #ffffff;
            --bg-secondary: #FBF6EF;
            --bg-tertiary: #f3f4f6;
            --border-color: #e5e7eb;
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --font-family-primary: 'CustomWebFont', Arial, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            --font-size-xs: 0.75rem;
            --font-size-sm: 0.875rem;
            --font-size-base: 1rem;
            --font-size-lg: 1.125rem;
            --font-size-xl: 1.25rem;
            --font-size-2xl: 1.5rem;
            --font-size-3xl: 1.875rem;
            --font-size-4xl: 2.25rem;
            --font-size-5xl: 3rem;
            --spacing-xs: 0.25rem;
            --spacing-sm: 0.5rem;
            --spacing-md: 1rem;
            --spacing-lg: 1.5rem;
            --spacing-xl: 2rem;
            --spacing-2xl: 3rem;
            --spacing-3xl: 4rem;
            --spacing-4xl: 6rem;
            --border-radius-sm: 0.375rem;
            --border-radius-md: 0.5rem;
            --border-radius-lg: 0.75rem;
            --border-radius-xl: 1rem;
            --transition-fast: 0.15s ease-in-out;
            --transition-normal: 0.3s ease-in-out;
            --transition-slow: 0.5s ease-in-out;
            --header-height: 90px;
            --line-height: 1.2;
        }

        /* Reset & Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-family-primary);
            font-size: var(--font-size-base);
            line-height: 1.6;
            color: var(--text-primary);
            background-color: var(--bg-primary);
            overflow-x: hidden;
        }

        /* Header Styles */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border-color);
            transition: var(--transition-normal);
            padding: var(--spacing-lg) 0;
        }

        .header.scrolled {
            padding: var(--spacing-md) 0;
            box-shadow: var(--shadow-md);
        }

        .header__container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-lg);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

       .header__logo,
       .header__logo * {
         cursor: pointer;
       }

        .header__logo {
    /* Remove or comment out these lines as they were for text-based logos */
    /* font-size: var(--font-size-xl); */
    /* font-weight: 700; */
    /* color: var(--primary-color); */

        text-decoration: none;
        transition: var(--transition-fast);
        display: flex; /* Allows for vertical alignment of the SVG */
        align-items: center; /* Centers the SVG vertically within the link */
        }

        /* SVG-Logo: inline eingebettet, damit color transition beim Hover greift */
        .header__logo-svg {
            height: 50px; /* Adjust this to your desired logo height */
        width: auto; /* Maintains the aspect ratio of the SVG */
        }

        .header__logo-svg path {
            fill: var(--primary-color); /* Sets the default color of the SVG */
            transition: fill var(--transition-fast); /* Smooth transition for color change */
        }

        .header__logo:hover .header__logo-svg path {
        fill: var(--secondary-color); /* Changes the SVG color on hover */
        }

        .header__nav {
            display: flex;
            gap: var(--spacing-2xl);
        }

        .header__nav-link {
            color: var(--text-primary);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition-fast);
            position: relative;
        }

        .header__nav-link::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary-color);
            transition: var(--transition-fast);
        }

        .header__nav-link:hover::after {
            width: 100%;
        }

        .header__nav-link:hover {
            color: var(--primary-color);
        }

        /* Hero Section */
        .hero {
            position: relative;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;

        }

        .hero__video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -2;
        }

        .hero__overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            z-index: 1;
        }

        .hero__content {
            text-align: center;
            color: white;
            max-width: 900px;
            padding: 0 var(--spacing-lg);
            z-index: 2;
            position: relative;
        }

        .hero__title {
            font-size: var(--font-size-5xl);
            font-weight: 700;
            margin-bottom: var(--spacing-lg);
            /* opacity: 0.01 statt 0 -- dies ist das LCP-Element der Seite;
               siehe Kommentar bei .fade-in weiter unten zum Chromium/Lighthouse-Bug. */
            opacity: 0.01;
            transform: translateY(30px);
            animation: fadeInUp 1s ease-out 0.5s forwards;
        }

        .hero__subtitle {
            font-size: var(--font-size-xl);
            margin-bottom: var(--spacing-2xl);
            opacity: 0.01;
            transform: translateY(30px);
            animation: fadeInUp 1s ease-out 0.7s forwards;
        }

        .hero__cta {
            display: inline-block;
            background-color: white;
            color: var(--primary-color);
            padding: var(--spacing-md) var(--spacing-2xl);
            text-decoration: none;
            border-radius: var(--border-radius-lg);
            font-weight: 600;
            transition: var(--transition-normal);
            opacity: 0.01;
            transform: translateY(30px);
            animation: fadeInUp 1s ease-out 0.9s forwards;
        }

        .hero__cta:hover {
            background-color: var(--bg-secondary);
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .image-left {
            max-width: 200px;
        }

        /* --- New Module: Headline Above Two Columns --- */
.text-module--stacked-headline-cols {
    max-width: 1200px; /* Behält die maximale Breite bei */
    margin: 0 auto; /* Zentriert das gesamte Modul */
}

/* Stil für die Hauptüberschrift, die über den Spalten steht */
.text-module__main-title {
    font-size: var(--font-size-4xl); /* Beispielgröße, anpassen nach Bedarf */
    font-weight: 700;
    color: var(--text-primary);
    text-align: left; /* Sorgt für Links-Ausrichtung */
    margin-bottom: var(--spacing-3xl); /* Abstand zur den Spalten darunter */
    max-width: 800px; /* Optional: Begrenzt die Breite der Überschrift, wenn sie sehr lang ist */
}

/* Stil für die Subüberschrift, beim zweispaltigem Aufzählungsmodul */
.text-module__sub-title {
    font-size: var(--font-size-2xl); /* Beispielgröße, anpassen nach Bedarf */
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-primary);
    text-align: left; /* Sorgt für Links-Ausrichtung */
    margin-bottom: var(--spacing-xl); /* Abstand zur den Spalten darunter */
    max-width: 800px; /* Optional: Begrenzt die Breite der Überschrift, wenn sie sehr lang ist */
}

/* Der Container, der die zwei Spalten hält */
.text-module__two-cols-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    /* max-width: 1200px; */
    /* margin: 0 auto; */
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .text-module__two-cols-content {
        grid-template-columns: 1fr; /* Spalten auf kleinen Bildschirmen untereinander stapeln */
    }

    .text-module__main-title {
        font-size: var(--font-size-3xl); /* Headline-Größe anpassen für Mobile */
        margin-bottom: var(--spacing-xl); /* Abstand auf Mobile anpassen */
    }
}

        /* Text Module - Two Column */
        .text-module--two-col {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-3xl);
            max-width: 1200px;
            margin: 0 auto;
        }

        .text-module--two-col .text-module__column {
            text-align: left;
        }

        .text-module--two-col .text-module__title {
            text-align: left;
        }

        /* Text Module - Headline Left */
        .text-module--headline-left {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: var(--spacing-3xl);
            max-width: 1200px;
            margin: 0 auto;
        }

        .text-module--headline-left .text-module__title {
            text-align: left;
            margin-bottom: 0;
        }

        .text-module--headline-left .text-module__content {
            text-align: left;
        }

        /* Text Module - Two Column with Headline */
        .text-module--two-col-with-headline {
            max-width: 1200px;
            margin: 0 auto;
        }

        .text-module--two-col-with-headline .text-module__headline {
            font-size: var(--font-size-3xl);
            font-weight: 700;
            margin-bottom: var(--spacing-xl);
            color: var(--text-primary);
            text-align: left;
        }

        .text-module--two-col-with-headline .text-module__columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-3xl);
        }

        .text-module--two-col-with-headline .text-module__column {
            text-align: left;
        }

        .text-module--two-col-with-headline .text-module__column .text-module__title {
            margin-bottom: var(--spacing-lg);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .text-module--two-col-with-headline .text-module__columns {
                grid-template-columns: 1fr;
                gap: var(--spacing-xl);
            }
        }

        .small-logos {
  display: block;
  margin: 1.5rem 0 0 0; /* Top margin, centered horizontally */
  max-height: 64px;           /* Adjust as needed for your design */
  max-width: 100%;            /* verhindert horizontalen Überlauf auf schmalen Screens */
  width: auto;                /* Responsive: scales down on small screens */
  height: auto;               /* Maintain aspect ratio */
  filter: grayscale(100%);    /* Optional: makes the image grayscale like your other logos */
  opacity: 0.85;              /* Optional: slightly faded for subtlety */
}

        /* Logo-Leiste: picture-Wrapper und Container auf max. Containerbreite begrenzen,
           damit die breite Logo-Grafik auf schmalen Screens nicht überläuft. */
        .logo-row {
            max-width: 100%;
            overflow: hidden;
        }

        .logo-row picture {
            display: block;
            max-width: 100%;
        }

        /* Section Base Styles */
        .section {
            padding: var(--spacing-4xl) 0;
        }

        .section--alt {
            background-color: var(--bg-secondary);
        }

        .section__container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-lg);
        }

        .section[id] {
            scroll-margin-top: var(--header-height); /* Fügt den Abstand oberhalb des Elements hinzu */
        }

        .divider {
            width: 100%;
            height: 1px;
            border: none;
            background-color: #1c1c1c; /* Farbe anpassen */
            margin: 0 0 50px; /* Abstand oben/rechts/unten anpassen */
        }

        /* Text Module - Single Column */
        .text-module {
            max-width: 840px;
            margin: 0 0;
            text-align: left;
        }

        /* WICHTIG: .text-module--two-col und .text-module--headline-left müssen nach .text-module
           stehen, da Elemente beide Klassen gleichzeitig tragen (z.B. class="text-module text-module--two-col").
           Bei gleicher CSS-Spezifität gewinnt die später deklarierte Regel - diese muss daher hier
           erneut (mit max-width: 1200px) stehen, um .text-module's max-width: 840px zu überschreiben. */
        .text-module--two-col {
            max-width: 1200px;
        }

        .text-module--headline-left {
            max-width: 1200px;
        }

        .text-module__title {
            font-size: var(--font-size-3xl);
            font-weight: 700;
            margin-bottom: var(--spacing-lg);
            color: var(--text-primary);
            line-height: var(--line-height);
        }

        .text-module__subtitle {
            font-size: var(--font-size-xl);
            color: var(--text-secondary);
            margin-bottom: var(--spacing-xl);
        }

        .text-module__content {
            font-size: var(--font-size-lg);
            line-height: 1.6;
            color: var(--text-secondary);
        }

        .text-module__content p {
            margin-bottom: var(--spacing-lg);
        }

        .text-module__content p:last-child {
            margin-bottom: 0;
        }
        .text-module__content a {
            color: #001C3D;
        }   

        .text-module__content a:link {
            color: #001C3D;
            text-decoration: underline;
        }

       .text-module__content a:hover {
        text-decoration: none;
        }

        .text-module__content a:active {
        text-decoration: underline;
        }

        .text-module__list {
            list-style: none;
            margin-top: var(--spacing-lg);
        }

        .text-module__list li {
            position: relative;
            padding-left: var(--spacing-lg);
            margin-bottom: var(--spacing-xl);
        }

        .text-module__list li::before {
            content: '•';
            position: absolute;
            left: 0;
            color: var(--primary-color);
            font-weight: 700;
        }

        /* Liste in Impressum/Datenschutz: gleicher Bullet-Stil, saubere Einrückung im Satzspiegel */
        .legal-list {
            list-style: none;
            margin: var(--spacing-sm) 0 var(--spacing-md);
        }

        .legal-list li {
            position: relative;
            padding-left: var(--spacing-lg);
            margin-bottom: var(--spacing-xs);
        }

        .legal-list li::before {
            content: '•';
            position: absolute;
            left: 0;
            color: var(--primary-color);
            font-weight: 700;
        }

        .text-module__image {
            max-width: 100%;
            height: auto;
        display: block;
            margin-top: 20px; /* Abstand zur Headline */
        }

        /* Image-Text Module */
        .image-text-module {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: var(--spacing-3xl);
            align-items: center;
            margin-bottom: var(--spacing-4xl);
        }

        /* Grid-Items dürfen unter ihre intrinsische Inhaltsbreite schrumpfen.
           Ohne min-width: 0 erzwingt das 725px breite Portrait-Bild eine
           Mindestbreite, die das Modul auf Mobile überlaufen lässt. */
        .image-text-module > * {
            min-width: 0;
        }

        /* Das <picture> ist hier das eigentliche Grid-Item. Als Standard-inline-
           Element nimmt es die Breite seines Inhalts an, was mit dem 725px breiten
           Bild zu instabiler Breitenberechnung führt (sichtbares "Springen" beim
           Laden/Animieren auf Mobile). Als Block mit voller Breite ist es stabil. */
        .image-text-module picture {
            display: block;
            width: 100%;
        }

        .image-text-module:last-child {
            margin-bottom: 0;
        }

        .image-text-module--reverse {
            direction: rtl;
        }

        .image-text-module--reverse > * {
            direction: ltr;
        }

        .image-text-module__image {
            width: 100%;
            max-width: 100%;
            height: 400px;
            object-fit: cover;
            border-radius: var(--border-radius-xl);
            box-shadow: var(--shadow-md);
            transition: var(--transition-normal);
        }

        .image-text-module__image:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }

        .image-text-module__content {
            padding: var(--spacing-lg);
        }

        .image-text-module__title {
            font-size: var(--font-size-2xl);
            font-weight: 700;
            margin-bottom: var(--spacing-md);
            color: var(--text-primary);
        }

        .image-text-module__text {
            font-size: var(--font-size-lg);
            line-height: 1.8;
            color: var(--text-secondary);
        }

        /* Footer */
        .footer {
            background-color: var(--text-primary);
            color: #9ca3af;
            padding: var(--spacing-4xl) 0 var(--spacing-xl);
        }

        .footer__container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-lg);
        }

        .footer__content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--spacing-2xl);
            margin-bottom: var(--spacing-2xl);
        }

        .footer__section h3 {
            font-size: var(--font-size-lg);
            font-weight: 600;
            margin-bottom: var(--spacing-md);
            color: var(--primary-color);
        }

        .footer__section p,
        .footer__section a {
            color: #d1d5db;
            text-decoration: none;
            line-height: 1.8;
        }

        .footer__section a:hover {
            color: #9ca3af;
            text-decoration: underline;
        }

        .footer a {
            color: #9ca3af;
            text-decoration: none;
            line-height: 1.8;
            margin-left: 20px;
        }

        .footer a:hover {
            color: white;
            text-decoration: underline;
        }

        .footer__links {
            list-style: none;
        }

        .footer__links li {
            margin-bottom: var(--spacing-sm);
        }

        .footer__bottom {
            text-align: center;
            padding-top: var(--spacing-xl);
            border-top: 1px solid #374151;
            color: #9ca3af;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .header__nav {
                display: none;
            }

            .hero__title {
                font-size: var(--font-size-3xl);
            }

            .hero__subtitle {
                font-size: var(--font-size-lg);
            }

            .text-module--two-col,
            .text-module--headline-left,
            .image-text-module {
                grid-template-columns: 1fr;
                gap: var(--spacing-xl);
            }

            /* RTL-Trick (zum Spalten-Umkehren auf Desktop) auf Mobile zurücksetzen,
               da das Layout hier ohnehin einspaltig ist - sonst läuft der Inhalt
               des Caroline-Lange-Moduls über den rechten Bildschirmrand hinaus. */
            .image-text-module--reverse,
            .image-text-module--reverse > * {
                direction: ltr;
            }

            .text-module__title {
                font-size: var(--font-size-2xl);
            }

            .image-left {
                display: none;
            }

            .section {
                padding: var(--spacing-2xl) 0;
            }

            .section__container {
                padding: 0 var(--spacing-md);
            }

        }

        @media (max-width: 480px) {
            .hero__title {
                font-size: var(--font-size-2xl);
            }

            .hero__subtitle {
                font-size: var(--font-size-base);
            }

            .hero__cta {
                padding: var(--spacing-sm) var(--spacing-lg);
            }
        }

        /* Scroll-triggered animations */
        .fade-in {
            /* opacity: 0.01 statt 0 -- vermeidet einen bekannten Chromium/Lighthouse-Bug,
               bei dem ein potenzielles LCP-Element mit opacity:0 die mobile
               Performance-Messung mit NO_LCP abbrechen lässt. Visuell ist der
               Unterschied für Menschen nicht wahrnehmbar. */
            opacity: 0.01;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- New Module: Wide Two Columns with Eyebrow --- */
.text-module--stacked-headline-cols-wide-eyebrow {
    max-width: 1200px;
    margin: 0 auto;
}
.text-module--stacked-headline-cols-wide-eyebrow .text-module__two-cols-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-3xl);
    align-items: start;
}
.text-module--stacked-headline-cols-wide-eyebrow .text-module__column-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Remove position and padding */
}
.text-module--stacked-headline-cols-wide-eyebrow .text-module__eyebrow {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary-alt);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 5px;
    line-height: 1;
    padding: 0;
    display: block;
}
.text-module--stacked-headline-cols-wide-eyebrow .text-module__main-title {
    margin-bottom: 0;
    margin-top: 0;
    line-height: 1;
}
.text-module--stacked-headline-cols-wide-eyebrow .text-module__column-right .text-module__content p:first-child {
    margin-top: 18px;
}

.text-module img {
    max-width: 90%;
    height: auto;
    max-height: 350px;
    display: block;
}

/* --- New Module: Headline Above Two Columns (Wide) --- */
.text-module--stacked-headline-cols-wide {
    max-width: 1200px;
    margin: 0 auto;
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1100;
  position: relative;
}
.burger__bar {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 3px;
  background: var(--primary-color);
  border-radius: 2px;
  transition: 0.3s;
}
.burger__bar:nth-child(1) {
  top: 11px;
}
.burger__bar:nth-child(2) {
  top: 18.5px;
}
.burger__bar:nth-child(3) {
  top: 26px;
}
.burger.active .burger__bar:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.burger.active .burger__bar:nth-child(2) {
  opacity: 0;
}
.burger.active .burger__bar:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}
.mobile-nav {
  display: none;
}
@media (max-width: 768px) {
  .header__nav {
    display: none;
  }
  .burger {
    display: flex;
  }
  .mobile-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: white;
    box-shadow: var(--shadow-md);
    z-index: 1050;
    padding: var(--spacing-xl) 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    pointer-events: none;
    opacity: 0;
  }
  .mobile-nav.open {
    transform: translateY(0);
    pointer-events: auto;
    opacity: 1;
  }
  .mobile-nav__link {
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--font-size-xl);
    padding: var(--spacing-md) var(--spacing-xl);
    transition: background 0.2s;
  }
  .mobile-nav__link:hover {
    background: var(--bg-secondary);
  }
  .text-module--stacked-headline-cols-wide-eyebrow .text-module__two-cols-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  /* Auf Desktop richtet dieser margin-top den Fließtext an der Headline aus
     (Spalten nebeneinander). Im einspaltigen Mobile-Layout entsteht dadurch
     zusammen mit dem grid-gap ein zu großer Abstand zwischen Headline und Text. */
  .text-module--stacked-headline-cols-wide-eyebrow .text-module__column-right .text-module__content p:first-child {
    margin-top: 0;
  }

  /* Das margin-bottom der Headline addiert sich auf Mobile zum grid-gap (beide ~32px),
     was den Abstand zwischen Headline und Fließtext zu groß macht. Hier reduzieren. */
  .text-module--stacked-headline-cols-wide-eyebrow .text-module__sub-title {
    margin-bottom: 0;
  }

    .image-left {
                display: none;
            }
.text-module img {
    max-width: 50%; /* oder 50%, je nach gewünschter Größe */
    margin: 0 auto; /* zentriert das Bild horizontal */
    }
}
.hero__arrow {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  cursor: pointer;
  transition: transform 0.2s;
  text-decoration: none;
}
.hero__arrow:hover {
  transform: translateX(-50%) scale(1.15);
}
.hero__arrow svg {
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}