.btn-glass {
    background: rgba(255, 255, 255, 0.35);
    color: #222;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 40px;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.10), 0 1.5px 0 0 rgba(255, 255, 255, 0.25) inset;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-weight: 500;
    font-size: 20px;
    padding: 18px 38px;
    transition: all 0.18s cubic-bezier(.4, 0, .2, 1);
    outline: none;
}

.btn-glass:hover,
.btn-glass:focus {
    background: rgba(255, 255, 255, 0.55);
    color: #111;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.13), 0 2px 0 0 rgba(255, 255, 255, 0.30) inset;
    border-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px) scale(1.03);
}

/* HERO SECTION NEU */
.hero {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #f7f8fa;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.hero-bg-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
    opacity: 0.95;
    z-index: 1;
    pointer-events: none;
}

.hero-bg-overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 55vw;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0.01) 100%);
    z-index: 2;
    pointer-events: none;
}

.hero-bg-circle {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
    pointer-events: none;
}

.hero-hormones-label {
    position: absolute;
    right: 12vw;
    bottom: 18vh;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #222;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    padding: 6px 18px;
    z-index: 4;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.dot-blue {
    width: 10px;
    height: 10px;
    background: #1976d2;
    border-radius: 50%;
    display: inline-block;
}

/* --- CSS RESET & VARIABLES --- */
:root {
    --color-bg: #ffffff;
    --color-text-main: #111111;
    --color-text-muted: #555555;
    --color-primary: #000000;
    --color-border: #e2e4e7;

    --font-main: 'Inter', sans-serif;
    --font-serif: 'Playfair Display', serif;

    --container-width: 1200px;
    --header-height: 72px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* html {
    Lenis handles smooth scrolling, so we remove native behavior to prevent conflicts
    scroll-behavior: smooth;
} */

/* --- CUSTOM SCROLLBAR (Liquid Glass) --- */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f7f8fa;
}

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 5px;
    border: 2px solid #f7f8fa;
    /* Padding effect */
    transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
    background: #999;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-text-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
}

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

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* --- UTILITIES --- */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* Buttons im Lucis-Stil */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 9999px;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.btn:active,
.btn-glass:active {
    transform: scale(0.96) !important;
}

.btn-primary {
    background: rgba(30, 30, 30, 0.95);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset;
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    transition: all 0.2s ease-out;
}

.btn-primary:hover {
    background: rgba(20, 20, 20, 0.98);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.3), 0 1px 0 0 rgba(255, 255, 255, 0.12) inset;
    transform: translateY(-1px);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid #d1d5db;
    color: var(--color-text-main);
}

.btn-outline:hover {
    border-color: #000;
    background-color: #f9fafb;
}

.section-padding {
    padding: 100px 0;
}

.text-muted {
    color: var(--color-text-muted);
}

/* --- HEADER --- */
header {
    height: var(--header-height);
    display: flex;
    /* align-items: center;  REMOVED to allow expansion without centering content vertically */
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    /* Default fallback */
    width: calc(100% - 32px);
    /* Mobile width with margins */
    max-width: 1300px;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08), 0 1px 4px 0 rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 30px;
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    z-index: 1000;
    /* Transition only specific properties to avoid jitter */
    transition:
        width 0.5s cubic-bezier(0.77, 0, 0.175, 1),
        height 0.5s cubic-bezier(0.77, 0, 0.175, 1),
        top 0.5s cubic-bezier(0.77, 0, 0.175, 1),
        border-radius 0.5s cubic-bezier(0.77, 0, 0.175, 1),
        background 0.5s ease,
        backdrop-filter 0.5s ease;
    padding: 12px 40px 12px 40px;
    padding-right: 1px;
    padding-left: 2px;
    overflow: hidden;
    /* Ensure content doesn't spill during anim */
}

/* Expanded Header State */
body.menu-open header {
    top: 0;
    /* Keep Left/Transform centralized so it just expands OUTWARDS from center */
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    /* Expands to full width */
    max-width: 100%;
    height: 100vh;
    border-radius: 0;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    /* Match the desired glass overlay look */
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    align-items: flex-start;
    /* Ensure content stays at top */
    padding-top: 20px;
    /* Adjust if needed for top spacing on mobile */
}

header.scrolled {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.1), 0 2px 8px 0 rgba(0, 0, 0, 0.04);
    top: 12px;
}

/* Desktop Header Width override */
@media (min-width: 768px) {
    header {
        width: auto;
    }
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    gap: 48px;
}

.logo {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #000;
}

.nav-links {
    display: none;
}

@media (min-width: 768px) {
    .nav-links {
        display: flex;
        gap: 4px;
        font-size: 15px;
        font-weight: 500;
        color: #444;
        align-items: center;
        position: relative;
        --pill-left: 0px;
        --pill-width: 0px;
        --pill-height: 0px;
        --pill-top: 0px;
    }

    .nav-links::before {
        content: '';
        position: absolute;
        left: var(--pill-left);
        top: var(--pill-top);
        width: var(--pill-width);
        height: var(--pill-height);
        background: rgba(255, 255, 255, 0.35);
        backdrop-filter: blur(40px) saturate(200%);
        -webkit-backdrop-filter: blur(40px) saturate(200%);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 0.5px 0 rgba(255, 255, 255, 0.5) inset, 0 -0.5px 0 rgba(0, 0, 0, 0.03) inset;
        border-radius: 14px;
        border: 0.5px solid rgba(255, 255, 255, 0.5);
        transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
        opacity: 0;
        pointer-events: none;
        z-index: -1;
    }

    .nav-links.has-active::before {
        opacity: 1;
    }

    .nav-links a {
        padding: 8px 20px;
        border-radius: 14px;
        transition: color 0.25s ease-out;
        position: relative;
        z-index: 1;
    }

    .nav-links a:hover {
        color: #000;
    }

    /* Hide mobile CTA on desktop */
    .mobile-cta {
        display: none !important;
    }
}

.nav-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Hide desktop CTA on mobile */
@media (max-width: 768px) {
    .nav-actions .btn {
        display: none;
    }

    .nav-actions .hamburger-btn {
        display: flex;
        /* Ensure hamburger is visible */
    }
}

.nav-actions .btn {
    padding: 10px 28px;
    font-size: 14px;
    border-radius: 18px;
    line-height: 1.4;
    white-space: nowrap;
}

/* --- HERO SECTION --- */
.hero {
    padding-top: calc(var(--header-height) + 60px);
    padding-bottom: 80px;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-align: center;
}

/* Weicher Hintergrund-Glow */
.hero-glow {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 800px;
    height: 600px;
    background: radial-gradient(circle, rgba(240, 245, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: -1;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
    max-width: 600px;
    margin-left: 5vw;
    top: 80px;
    padding: 0;

    /* Reset defaults */
    background: none;
    box-shadow: none;
    border-radius: 0;
    backdrop-filter: none;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 64px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 24px;
    color: #0a0a0a;
}

.hero-sub-text {
    font-size: 20px;
    color: #444;
    margin-bottom: 36px;
}

.hero-sub-text span {
    color: #000;
    font-weight: 600;
}

.hero-cta-group {
    display: flex;
    gap: 20px;
    margin-bottom: 32px;
}

.btn-glass-hero {
    font-size: 20px;
    padding: 18px 38px;
    border-radius: 40px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.35);
    color: #222;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.10), 0 1.5px 0 0 rgba(255, 255, 255, 0.25) inset;
    transition: all 0.18s;
}

/* Mobile Adjustments for Hero */
@media (max-width: 768px) {
    .hero-content {
        margin-left: 0;
        top: 0;
        text-align: center;
        max-width: 100%;
        padding: 0 20px;
        margin-top: 40px;
    }

    .hero-title {
        font-size: 42px;
    }

    .hero-sub-text {
        font-size: 18px;
    }

    .hero-cta-group {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .btn-glass-hero {
        width: 100%;
        justify-content: center;
        display: flex;
    }
}

/* Badge Style */
.hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background-color: #f7f7f7;
    border: 1px solid #eaeaea;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    margin-bottom: 30px;
    letter-spacing: 0.2px;
}

.hero h1 {
    font-family: var(--font-serif);
    font-size: 48px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -1px;
    margin-bottom: 24px;
    color: #0a0a0a;
}

@media (min-width: 768px) {
    .hero h1 {
        font-size: 72px;
    }
}

@media (max-width: 767px) {
    .hero h1 {
        font-size: 42px;
        /* Smaller font for mobile */
        margin-bottom: 20px;
    }

    .hero p {
        font-size: 16px;
        padding: 0 16px;
    }

    .hero-content {
        margin-left: 0;
        text-align: center;
        padding: 0 20px;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }
}

.hero p {
    font-size: 18px;
    color: var(--color-text-muted);
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 70px;
}

/* Container für das Bild */
.hero-image-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

.hero-image-wrapper {
    border-radius: 20px;
    overflow: hidden;
    /* Sanfter, tiefer Schatten */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.03);
    background: #ffffff;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fallback Placeholder falls Bild nicht geladen wird */
.image-placeholder-fallback {
    width: 100%;
    height: 100%;
    background: #f4f5f7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888;
    border: 2px dashed #ddd;
}

/* --- HOW IT WORKS --- */
.steps-section {
    background-color: #fafafa;
    border-top: 1px solid #eee;
}

.section-header h2 {
    font-family: var(--font-serif);
    font-size: 38px;
    margin-bottom: 16px;
    color: #000;
}

.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 768px) {
    .steps-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.step-card {
    background: #fff;
    padding: 32px;
    border-radius: 12px;
    border: 1px solid #eee;
    transition: transform 0.2s;
}

.step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05);
}

.step-num {
    font-family: var(--font-serif);
    font-size: 50px;
    color: #f0f0f0;
    line-height: 1;
    margin-bottom: 10px;
    font-weight: 700;
}

.step-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}

.step-card p {
    font-size: 15px;
    color: #666;
}

/* --- TEUFELSKREIS ANIMATION --- */
.cycle-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 500px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 32px;
    background: url('../images/cycle-bg.jpg') center/cover no-repeat;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.cycle-arrows {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 85%;
    pointer-events: none;
    filter: drop-shadow(0 10px 40px rgba(31, 38, 135, 0.12));
}

.pill-text text {
    font-family: 'Inter', sans-serif;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.pill-shape {
    transition: filter 0.4s ease;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.06));
}

.glow-circle {
    filter: blur(15px);
    mix-blend-mode: screen;
    opacity: 1;
}

.cycle-channel {
    opacity: 1;
}

.cycle-pill {
    position: absolute;
    background: transparent;
    backdrop-filter: blur(30px) saturate(200%);
}

/* --- Benefits Grid --- */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 80px;
    max-width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
}

.benefits-grid::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.benefit-card {
    padding: 40px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-rows: 1fr 1fr;
    row-gap: 40px;
    background: white;
    position: relative;
    min-height: 280px;
}

.benefit-card:last-child {
    border-right: none;
}

.benefit-card h3 {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    color: #1a1a1a;
    width: 100%;
    display: flex;
    align-items: center;
    text-align: left;
}

.benefit-plus {
    font-size: 24px;
    font-weight: 300;
    color: #1a1a1a;
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    z-index: 10;
}

.benefit-card:last-child .benefit-plus {
    display: none;
}

.benefit-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin: 0;
    display: flex;
    align-items: center;
    text-align: left;
}

@media (max-width: 1024px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 60px;
    }

    .benefit-card {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .benefit-card:nth-child(odd) {
        border-right: 1px solid rgba(0, 0, 0, 0.1);
    }

    .benefit-card:nth-last-child(-n+2) {
        border-bottom: none;
    }

    /* Fix Alignment of Plus-Icons for 2x2 Grid */
    .benefit-plus {
        display: none;
        /* Hide default side positioning */
    }

    /* Only show plus in the absolute center (attached to Card 1) */
    .benefit-card:nth-child(1) .benefit-plus {
        display: flex;
        top: auto;
        bottom: -12px;
        right: -12px;
        transform: none;
    }
}

@media (max-width: 640px) {
    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .benefit-card {
        border-right: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .benefit-card:last-child {
        border-bottom: none;
    }
}

.cycle-pill {
    position: absolute;
    background: transparent;
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    border: none;
    border-radius: 20px;
    padding: 20px 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    max-width: 220px;
    z-index: 10;
}

.pill-number {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px;
}

.cycle-pill p {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

.cycle-pill strong {
    color: #000;
    font-weight: 600;
}

/* Positionierung der Pills horizontal */
.cycle-pill-1 {
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.cycle-pill-2 {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.cycle-pill-3 {
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.cycle-pill-4 {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}

@media (max-width: 768px) {
    .cycle-container {
        height: auto;
        min-height: 400px;
        aspect-ratio: 1/1;
        max-width: 100%;
    }

    .cycle-arrows {
        width: 100%;
        height: 100%;
        max-width: 350px;
        max-height: 350px;
    }

    .cycle-pill {
        max-width: 160px;
        padding: 10px 14px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .cycle-pill p {
        font-size: 11px;
    }

    .pill-number {
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        margin-bottom: 6px;
    }

    .cycle-pill-2 {
        right: 0px;
    }

    .cycle-pill-4 {
        left: 0px;
    }
}


/* --- WIE SECTION (Science) --- */
#science {
    position: relative;
    overflow: hidden;
    /* Distinct darker grey/zinc background to separate from white sections */
    background: #f0f0f2;
    padding: 140px 0;
    /* More vertical space */
}

#science::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    /* Larger cover */
    height: 120%;
    background:
        radial-gradient(circle at 10% 10%, rgba(255, 45, 143, 0.15), transparent 50%),
        radial-gradient(circle at 90% 90%, rgba(60, 60, 80, 0.1), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 45, 143, 0.05), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

#science .container {
    position: relative;
    z-index: 2;
    /* Ensure card sits above the background blobs */
}

/* --- FEATURE SECTION (DASHBOARD) --- */
.feature-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: center;
}

@media (min-width: 900px) {
    .feature-section {
        grid-template-columns: 1fr 1fr;
    }
}

.mock-dashboard {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #eaeaea;
}

.mock-row {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #f5f5f5;
}

.score-good {
    color: #16a34a;
    font-weight: 600;
}

.score-bad {
    color: #dc2626;
    font-weight: 600;
}

.score-warn {
    color: #ea580c;
    font-weight: 600;
}

/* --- FOOTER --- */
footer {
    background: #fff;
    padding: 80px 0 40px;
    border-top: 1px solid #eee;
}

.footer-grid {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }
}

.footer-brand p {
    margin-top: 16px;
    color: var(--color-text-muted);
    max-width: 300px;
}

.footer-col h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #000;
}

.footer-col ul li a {
    font-size: 14px;
    color: #666;
    display: block;
    margin-bottom: 12px;
}

.footer-col ul li a:hover {
    color: #000;
}

.footer-bottom {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    color: #9ca3af;
    font-size: 14px;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Scroll Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: opacity, transform;
}

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

.stagger-1 {
    transition-delay: 0.1s;
}

.stagger-2 {
    transition-delay: 0.2s;
}

.stagger-3 {
    transition-delay: 0.3s;
}

/* --- Dark Slider Card --- */
.slider-card {
    background: rgba(28, 28, 30, 0.6);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    /* Slightly rounder */
    padding: 80px 100px;
    /* More internal breathing room */
    /* Mehr Padding für hochwertigen Look */
    color: #fff;
    min-height: 700px;
    /* Taller */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: 1400px;
    /* Wider */
    width: 95%;
    /* Responsive safety */
    margin: 0 auto;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5);
    /* Tiefe */
    z-index: 1;
    /* For stacking with pseudo-element glow */
}

/* Ambient Glow behind the card contents but within the card container bounds if needed, 
   OR pseudo element on the section if we want it behind the card. 
   Since the card clips overflow, putting a massive glow INSIDE might be cut off.
   But if we want the card ITSELF to be glassy, the glow should be BEHIND it (on the parent or ::before of card with different z-index).
   Let's try a radial gradient on the card's ::before but sized large to create a soft spot.
*/

.slider-card::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 45, 143, 0.15), transparent 60%);
    pointer-events: none;
    z-index: -1;
    opacity: 0.8;
}

.slider-header {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-bottom: 60px;
    display: block;
    text-align: center;
    padding: 0 140px;
    /* Space for title and button */
    box-sizing: border-box;
}

.slider-title {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Push button to the right */
.slider-header>.btn-white {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Center controls */
.slider-header>.slider-controls {
    display: -webkit-inline-flex !important;
    display: inline-flex !important;
}

/* Liquid Glass Controls (iOS Style) */
.slider-controls {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 20px;
    background: rgba(80, 80, 80, 0.2);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 12px 28px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}

.slider-controls:hover {
    background: rgba(90, 90, 90, 0.3);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.nav-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn:hover {
    color: #fff;
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

.step-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Enger für Dots */
}

.dot-nav {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dot-nav.active {
    background: #fff;
    transform: scale(1.4);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.dot-nav:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Liquid Glass Button (Primary) */
.btn-white {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #000;
    padding: 14px 32px;
    border-radius: 99px;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

.btn-white:hover {
    transform: translateY(-2px) scale(1.02);
    background: #fff;
    box-shadow: 0 15px 35px rgba(255, 255, 255, 0.15);
}

/* Slide Content */
.slider-content-wrapper {
    flex-grow: 1;
    position: relative;
    z-index: 2;
    /* Ensure enough height for absolute slides */
    min-height: 400px;
}

.slide {
    position: absolute;
    top: 50%;
    /* Center vertically in the container */
    left: 0;
    width: 100%;
    transform: translateY(-50%) scale(0.92);
    /* Start slightly smaller */
    opacity: 0;
    visibility: hidden;
    filter: blur(8px);
    /* Blur out */
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.6s;

    /* Ensure outgoing slides don't block clicks */
    pointer-events: none;

    display: block;
}

.slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
    /* Scale up to normal */
    filter: blur(0);
    /* Focus */
    z-index: 5;
    pointer-events: auto;
    /* Re-enable clicks */
}

.slide-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    width: 100%;
}

.slide-text h2 {
    font-family: var(--font-serif);
    font-size: 48px;
    line-height: 1.1;
    margin-bottom: 24px;
    color: #fff;
    font-weight: 400;
}

.slide-text p {
    font-size: 16px;
    line-height: 1.6;
    color: #AEAEB2;
    max-width: 400px;
}

.slide-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboard-card-dark {
    background: rgba(255, 255, 255, 0.05);
    /* Lighter translucent bg */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 240px;
    display: flex;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    /* Clip any elements bleeding outside */
}

.dash-panel {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.dash-panel:first-child {
    border-right: 1px solid #3A3A3C;
}

/* Interne Animationen für Visuals */
@keyframes dashPulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 0.5;
    }
}

@keyframes barGrow {
    0% {
        height: 0%;
    }

    100% {
        height: 85%;
    }
}

@keyframes heartBeat {
    0% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.15);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.15);
    }

    60% {
        transform: scale(1);
    }
}

@keyframes trophyFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Anwenden der Animationen wenn Slide active ist */
.slide.active .dashboard-card-dark .dash-panel:nth-child(2) svg {
    /* Icons im rechten Panel */
    animation: trophyFloat 3s ease-in-out infinite;
}

/* Speziell für Slide 1 Pulsing Circle */
.slide.active .dashboard-card-dark .dash-panel:nth-child(2) div[style*="opacity: 0.5"] {
    animation: dashPulse 2s infinite ease-in-out;
}

/* Speziell für Slide 3 Herzfrequenz */
.slide[data-step="3"].active svg[stroke="#FF2D8F"] {
    animation: heartBeat 1.5s infinite ease-in-out;
}

/* Speziell für Slide 3 Progress Bar */
.slide[data-step="3"].active div[style*="width:85%"] {
    height: 100%;
    width: 0;
    animation: slideRight 1s ease-out forwards 0.3s;
}

@keyframes slideRight {
    from {
        width: 0;
    }

    to {
        width: 85%;
    }
}

/* Speziell für Slide 4 Chart Bar */
.slide[data-step="4"].active div[style*="height:85%"] {
    height: 0;
    animation: barGrow 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.3s;
}

.dash-label {
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    margin-top: 10px;
    font-size: 11px;
    color: #aaa;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dot-pink {
    width: 6px;
    height: 6px;
    background: #FF2D8F;
    border-radius: 50%;
}

.dash-label-right {
    position: absolute;
    bottom: 12px;
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: #FF2D8F;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Timeline */
.slider-timeline {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 120px;
    pointer-events: none;
    z-index: 1;
}

.timeline-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.timeline-indicator {
    /* Pfad um Radius (16px) nach oben verschoben, damit Kugel AUF der Linie (y=80) rollt */
    offset-path: path("M 100,64 L 900,64");
    offset-distance: 0%;
    transition: offset-distance 1s cubic-bezier(0.25, 1, 0.5, 1);
    offset-rotate: 0deg;
    /* Leichter Schatten direkt darunter für Bodenkontakt */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.timeline-text {
    fill: #fff;
    font-size: 16px;
    font-weight: 600;
}

/* Medium screens - scale down */
@media (max-width: 1100px) {
    .slider-header {
        padding: 0 120px;
    }

    .slider-title {
        font-size: 12px;
        max-width: 220px;
    }

    .slider-card {
        padding: 40px 15px;
        /* Reduced side padding from default */
        min-height: auto;
        height: auto;
    }

    .slider-header>.btn-white {
        padding: 12px 24px;
        font-size: 14px;
    }
}

@media (max-width: 900px) {
    .slide-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .slide-text p {
        margin: 0 auto;
        font-size: 14px;
        line-height: 1.5;
        max-width: 100%;
    }

    .slide-text h2 {
        font-size: 32px;
        margin-bottom: 16px;
    }

    .slide-visual {
        justify-content: center;
    }

    .slider-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 0 20px;
        text-align: center;
        margin-bottom: 40px;
        position: relative;
        /* Ensure it doesn't overlap absolute elements if any */
        z-index: 10;
    }

    .slider-header .slider-title {
        position: static;
        transform: none;
        max-width: 100%;
        font-size: 13px;
        margin-bottom: 0;
    }

    .slider-header>.btn-white {
        position: static;
        /* No longer absolute on mobile */
        transform: none;
        margin-top: 10px;
    }

    .slider-controls {
        position: static;
        margin: 0 auto;
    }

    /* Ensure content has space */
    .slider-content-wrapper {
        margin-top: 0;
        min-height: 480px;
        /* Give it more room */
        padding-bottom: 60px;
        /* Ensure space for timeline inside */
    }

    /* Adjust Timeline position - Bring it back INSIDE */
    .slider-timeline {
        bottom: 0px;
        /* Reset from -20px */
        left: 0;
        width: 100%;
        transform: scale(0.9);
        /* Slight scale down fits better */
        transform-origin: bottom center;
    }

    .slider-header>.btn-white {
        position: static;
        transform: none;
        padding: 10px 24px;
        font-size: 14px;
    }

    .slider-header>.slider-controls {
        display: inline-flex !important;
        padding: 8px 16px;
        gap: 12px;
    }

    .slider-header .nav-btn svg {
        width: 18px;
        height: 18px;
    }

    .slider-header .dot-nav {
        width: 7px;
        height: 7px;
    }
}

/* --- Dashboard Preview Section --- */
.preview-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.preview-card-rewards-new {
    background: #FFF0E6;
    border-radius: 24px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    height: fit-content;
}

.preview-card-trends-new {
    background: #fff;
    border-radius: 24px;
    padding: 25px;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease;
    height: fit-content;
}

.preview-card-coach {
    background: #fff;
    border-radius: 24px;
    padding: 0;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    height: fit-content;
}

/* Coach Card Styles */
.coach-header {
    background: #fdfdfd;
    border-bottom: 1px solid #f3f4f6;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.coach-avatar-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
}

.coach-avatar-bg {
    width: 100%;
    height: 100%;
    background: #eef2ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4f46e5;
}

.coach-status-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #22c55e;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coach-content {
    padding: 25px;
    background: #fff;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.coach-greeting {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 10px;
}

.coach-intro-text {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 30px;
}

.coach-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    margin-bottom: 20px;
}

.coach-action-btn {
    background: white;
    border: 1px solid #e5e7eb;
    padding: 12px;
    border-radius: 12px;
    font-size: 11px;
    color: #374151;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.coach-action-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.coach-input-area {
    padding: 15px 20px;
    border-top: 1px solid #f3f4f6;
    background: #fafafa;
}

.coach-input-box {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Data Safe Section Styles */
.data-safe-section {
    background: #0a0a0a;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.data-safe-container {
    position: relative;
    z-index: 2;
}

.data-safe-header {
    text-align: center;
    margin-bottom: 60px;
}

.tee-badge {
    color: #22c55e;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

.data-safe-title {
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin: 0;
    line-height: 1.1;
}

.data-safe-title span {
    color: #6b7280;
}

.data-safe-desc {
    color: #9ca3af;
    max-width: 600px;
    margin: 20px auto 0;
    font-size: 18px;
}

.data-safe-visuals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    align-items: center;
}

/* Vault UI */
.vault-ui-container {
    background: #111;
    border: 1px solid #333;
    border-radius: 24px;
    padding: 30px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.vault-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.vault-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vault-label {
    color: white;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    letter-spacing: 1px;
    font-size: 14px;
}

.vault-dots {
    display: flex;
    gap: 6px;
}

.vault-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.vault-dropzone {
    border: 2px dashed #333;
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.02);
}

.vault-icon-box {
    width: 40px;
    height: 40px;
    background: #222;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.vault-file-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vault-file-item {
    background: #1a1a1a;
    padding: 12px 16px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #222;
}

.vault-file-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-icon-box {
    width: 32px;
    height: 32px;
    background: #262626;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-name {
    color: #ddd;
    font-size: 14px;
    font-family: monospace;
}

.file-badge-locked {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(34, 197, 94, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.badge-text-locked {
    color: #22c55e;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.vault-footer {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 20px;
    border-top: 1px solid #222;
}

.vault-footer-text {
    color: #666;
    font-size: 11px;
    letter-spacing: 1px;
    font-family: monospace;
}

/* AI Terminals */
.ai-terminals-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.terminal-card {
    background: #111;
    border: 1px solid #333;
    border-radius: 20px;
    padding: 24px;
    transition: transform 0.2s;
}

.terminal-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.terminal-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.terminal-title h3 {
    color: white;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.terminal-title p {
    color: #666;
    font-size: 13px;
    margin: 0;
}

.code-block {
    background: #1a1a1a;
    padding: 15px;
    border-radius: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    border: 1px solid #2a2a2a;
}

/* Hard Facts Grid */
.data-safe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.safe-card {
    background: #111;
    border: 1px solid #333;
    border-radius: 20px;
    padding: 24px;
}

.safe-icon-box {
    width: 48px;
    height: 48px;
    border: 1px solid #22c55e;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.05);
    margin-bottom: 20px;
}

.safe-card h3 {
    color: white;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.safe-card p {
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .preview-grid {
        grid-template-columns: 1fr;
    }

    .data-safe-visuals {
        grid-template-columns: 1fr;
    }

    .roi-grid {
        grid-template-columns: 1fr !important;
        /* Force stack on mobile */
    }
}


.reward-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.9);
}

.reward-badge-discount {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #86efac;
    color: #064e3b;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
}

.reward-badge-redeemed {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: #22c55e;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.trend-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.trend-title {
    font-size: 18px;
    font-weight: 600;
    color: #111;
    display: flex;
    align-items: center;
    gap: 8px;
}

.trend-period-badge {
    background: #2563eb;
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
}

.trend-grid-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.trend-box {
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    padding: 15px;
    position: relative;
    overflow: hidden;
}

.trend-box-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.trend-val-large {
    font-size: 20px;
    font-weight: 700;
    color: #111;
}

.preview-card-light:hover,
.preview-card-dark-dash:hover,
.preview-card-beige:hover,
.preview-card-rewards-new:hover,
.preview-card-trends-new:hover,
.preview-card-coach:hover {
    transform: translateY(-5px);
}

@media (max-width: 1024px) {
    .preview-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
    }

    .preview-card-light,
    .preview-card-dark-dash,
    .preview-card-beige {
        min-height: auto;
    }

    .preview-card-dark-dash>div:nth-child(2) svg {
        /* Fix size issue on mobile if needed */
        width: 100%;
        height: auto;
    }
}

/* --- PRICING SECTION --- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    align-items: center;
    /* Vertikal zentrieren damit die mittlere Card größer wirken kann */
}

.pricing-card {
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.pricing-header {
    margin-bottom: 30px;
    text-align: center;
}

.pricing-badge {
    display: inline-block;
    padding: 4px 12px;
    background: #f3f4f6;
    color: #555;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.pricing-header h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    font-family: var(--font-serif);
}

.pricing-header .price {
    font-size: 36px;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
    font-family: var(--font-main);
}

.pricing-header .price span {
    font-size: 14px;
    color: #666;
    font-weight: 400;
}

.pricing-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.pricing-features {
    flex-grow: 1;
    /* Drückt den Button nach unten */
    margin-bottom: 30px;
    text-align: left;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 14px;
    color: #444;
}

.pricing-features .check {
    color: var(--color-primary);
    /* Passt zum Lucis Style (schwarz oder dunkel) */
    font-weight: bold;
}

/* --- PRICING SECTION V2 (Refined Liquid Glass) --- */

.pricing-section {
    position: relative;
    background-color: #0f0f11;
    /* Very dark base */
    padding: 120px 0;
    color: #fff;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}

/* Background Ambient Glows for the whole section */
.pricing-section::before {
    content: '';
    position: absolute;
    top: 20%;
    left: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(255, 45, 143, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.pricing-section::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: -10%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(25, 118, 210, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.container--pricing {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.pricing-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    /* More breathing room */
    align-items: stretch;
}

@media (max-width: 960px) {
    .pricing-grid-v2 {
        grid-template-columns: 1fr;
        gap: 80px;
    }
}

.pricing-col {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* --- Metallic Pricing Cards (Titanium & Platinum) --- */

/* 3D Container Preserved */
.credit-card-container {
    perspective: 1200px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

/* Base Metallic Card */
.credit-card-3d {
    position: relative;
    width: 100%;
    aspect-ratio: 1.586;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: transform 0.1s linear, box-shadow 0.2s ease;
    /* Faster response for haptics */
    will-change: transform;

    /* Chamfered Edge - Cleaner */
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Brushed Metal + Noise Texture (Anti-Plastic) */
.credit-card-3d::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Noise Texture directly via Data URI for grain */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E"),
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0px,
            rgba(255, 255, 255, 0) 1px,
            rgba(255, 255, 255, 0.03) 1px,
            rgba(255, 255, 255, 0.03) 2px);
    background-size: 150px 150px, 100% 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.15;
    /* Low opacity grain */
    mix-blend-mode: overlay;
}

/* Dynamic Border Rim (Light Source) */
.credit-card-3d::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    pointer-events: none;
    z-index: 20;
    /* Topmost layer for border */
    padding: 1.5px;
    /* Border width */
    background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.1) 40%,
            transparent 80%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.6;
}

/* Hidden Pattern (Revealed by Light - Spotlight Effect) */
.card-pattern {
    position: absolute;
    inset: 0;
    /* Tighter dot matrix for premium feel */
    background-image: radial-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px);
    background-size: 20px 20px;
    /* Larger spacing like example */
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: overlay;

    /* Static Visibility + Glow Mask */
    /* Center is 100% visible (black), Edge is 20% visible (rgba 0,0,0,0.2) */
    -webkit-mask-image: radial-gradient(300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            black 0%,
            rgba(0, 0, 0, 0.15) 100%);
    mask-image: radial-gradient(300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            black 0%,
            rgba(0, 0, 0, 0.15) 100%);
    opacity: 1;
}

.credit-card-3d--dark .card-pattern {
    /* Brighter sparks on dark metal */
    background-image: radial-gradient(rgba(255, 255, 255, 0.3) 1.5px, transparent 1.5px);
}

.credit-card-3d--light .card-pattern {
    /* Darker etch on light metal */
    background-image: radial-gradient(rgba(0, 0, 0, 0.2) 1.5px, transparent 1.5px);
    mix-blend-mode: multiply;
}

/* Hover Effects */
.credit-card-3d:hover {
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.6),
        0 0 50px rgba(255, 45, 143, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* --- Dark Card (Northern Lights / Aurora) --- */
.credit-card-3d--dark {
    /* Deep Space Base */
    background-color: #0d0d12;
    /* Aurora Gradients in background layers */
    background-image:
        /* Top Right Cyan Glow */
        radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.4) 0%, transparent 50%),
        /* Bottom Left Purple/Pink Glow */
        radial-gradient(circle at 0% 100%, rgba(192, 38, 211, 0.4) 0%, transparent 50%),
        /* Center Deep Blue Sweep */
        linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(88, 28, 135, 0.3) 50%, rgba(15, 23, 42, 0.9) 100%);
    /* Ensure opacity allows this to stack if needed, but here it's main bg */
}

/* Dark Card Text */
.credit-card-3d--dark .card-title {
    color: #fff;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    background: none;
    -webkit-text-fill-color: #fff;
    font-weight: 600;
    /* Increased weight for readability against aurora */
}

.credit-card-3d--dark .card-price .val {
    color: #fff;
}

/* --- Light Card (Solar Aurora / Dawn) --- */
.credit-card-3d--light {
    /* Warm Silver Base */
    background-color: #fff0f5;
    /* Solar Gradients */
    background-image:
        /* Top Right Gold Sun */
        radial-gradient(circle at 100% 0%, rgba(251, 191, 36, 0.4) 0%, transparent 60%),
        /* Bottom Left Hot Pink Glow */
        radial-gradient(circle at 0% 100%, rgba(255, 45, 143, 0.3) 0%, transparent 60%),
        /* Metallic White Sweep */
        linear-gradient(135deg, #ffffff 0%, #fce7f3 100%);
}

/* Light Card Text - HIGH CONTRAST */
.credit-card-3d--light .card-title,
.credit-card-3d--light .card-price .val,
.credit-card-3d--light .card-price .period,
.credit-card-3d--light .card-note {
    color: #111 !important;
    text-shadow: none;
    -webkit-text-fill-color: #111;
}

.credit-card-3d--light .card-brand {
    color: rgba(0, 0, 0, 0.4);
}

/* Shine */
.card-shine {
    position: absolute;
    inset: 0;
    /* Static layer, gradient moves via background-position if needed, or mask */
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(255, 255, 255, 0.4) 0%,
            transparent 40%);
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: overlay;
}

/* Content Z-Index Fix */
.card-content-layer {
    position: relative;
    z-index: 20;
}

/* Fix: Removed duplicate .credit-card-3d--light .card-title rule that was resetting color to white */

.card-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 10px;
}

/* Default Text Styles (Dark Base) */
.card-price .val {
    font-family: 'Inter', sans-serif;
    font-size: 42px;
    font-weight: 300;
    color: #fff;
    letter-spacing: -1px;
}

.card-price .period {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.card-note {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 12px;
    line-height: 1.4;
}

.card-brand {
    position: relative;
    z-index: 10;
    align-self: flex-end;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
}

/* --- LIGHT CARD OVERRIDES (Must be last to win specificity) --- */
.credit-card-3d--light .card-title {
    color: #111 !important;
    text-shadow: none;
    -webkit-text-fill-color: #111 !important;
}

.credit-card-3d--light .card-price .val {
    color: #111 !important;
}

.credit-card-3d--light .card-price .period {
    color: #555 !important;
}

.credit-card-3d--light .card-note {
    color: #444 !important;
}

.credit-card-3d--light .card-brand {
    color: rgba(0, 0, 0, 0.2) !important;
}

/* --- Actions & Features List --- */
.pricing-actions {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

/* Feature List */
.pricing-features-v2 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feature-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.4;
}

.feature-item-row .check-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 45, 143, 0.2);
    color: #FF2D8F;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}

/* Button V2 Styles matching Glass aesthetics */
.btn-v2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 99px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    text-decoration: none;
}

.btn-stretch {
    width: 100%;
}

.btn-v2--white {
    background: #fff;
    color: #000;
    border: 1px solid #fff;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);
}

.btn-v2--white:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.25);
}

.btn-v2--outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-v2--outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #fff;
    transform: translateY(-2px);
}


/* Images */
.pricing-card-v2__image {
    width: 180px;
    height: 120px;
    position: relative;
    border-radius: 12px;
    margin-top: 10px;
    flex-shrink: 0;

    /* 3D Haptic Effects */
    transform-style: preserve-3d;
    perspective: 1000px;
    /* Optional on self if using container perspective, but we'll use transform function in JS */
    cursor: pointer;
}

.pricing-card-v2__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    /* Basic shadow */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    /* Make image the base plane */
    transform: translateZ(0);
}

/* Optional: Glossy glare overlay */
.pricing-card-v2__image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 50%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    mix-blend-mode: overlay;
    transform: translateZ(1px);
    /* Just above image */
}

.pricing-card-v2__image:hover::after {
    opacity: 1;
}

.card-label {
    position: absolute;
    bottom: 12px;
    left: 14px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.5px;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);

    /* Pop out in 3D */
    transform: translateZ(30px);
    pointer-events: none;
}

/* Features List styles */
.pricing-features-v2 h4 {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 400;
    margin: 0 0 8px 0;
    color: #fff;
}

.pricing-features-v2 p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin: 0;
    max-width: 90%;
}

/* Internal overrides for light card */
.pricing-features-v2--internal {
    margin-top: auto;
    /* Push to bottom if space allows, or just margin top */
    padding-top: 30px;
}

.pricing-features-v2--internal h4 {
    color: #111;
}

.pricing-features-v2--internal p {
    color: #555;
}


.media-separator {
    height: 1px;
    background: #eaeaea;
    margin: 24px 0;
    width: 100%;
}

.pricing-media-separator {
    height: 40px;
    /* Spacer between top card part and list in right card */
}

/* Responsive adjustments */
@media (max-width: 500px) {
    .pricing-card-v2__main {
        flex-direction: column-reverse;
        /* Image on top? Or bottom? Screenshot has images on right. On mobile usually stack. */
    }

    .pricing-card-v2__image {
        width: 100%;
        height: 160px;
        margin-top: 0;
        margin-bottom: 20px;
    }

    .price-val {
        font-size: 42px;
    }
}

/* --- FULL 3D CARD OVERHAUL --- */

/* Reset container sizes */
.pricing-col {
    perspective: 1500px;
    /* Deep perspective for the columns */
}

/* Base Card Style */
.full-3d-card {
    height: 100%;
    border-radius: 20px;
    /* More rounded like a CC */
    padding: 40px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
    /* Super fast response via JS */
    cursor: pointer;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Slight edge visual */
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.03'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Card Content Layer - lifts off the surface */
.card-content-layer {
    transform: translateZ(40px);
    /* Significant pop */
    /* pointer-events: none; allow buttons to work? actually we want clicks. 
       If we put pointer-events:none, buttons wont click. 
       But transform preserves pointer events usually. */
}

/* Dark Card tweaks */
.pricing-card-v2--dark {
    background-color: #242828;
    background: linear-gradient(145deg, #2a2e2e, #1f2222);
}

/* Light Card tweaks */
.pricing-card-v2--light {
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* CHIP ICON */
.card-chip-icon {
    width: 50px;
    height: 38px;
    background: linear-gradient(135deg, #e6c589 0%, #c19b4a 50%, #e6c589 100%);
    border-radius: 6px;
    position: absolute;
    top: 40px;
    right: 40px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    /* Chip lines */
    background-image:
        linear-gradient(90deg, transparent 48%, rgba(0, 0, 0, 0.1) 48%, rgba(0, 0, 0, 0.1) 52%, transparent 52%),
        linear-gradient(0deg, transparent 48%, rgba(0, 0, 0, 0.1) 48%, rgba(0, 0, 0, 0.1) 52%, transparent 52%);
    background-size: 100% 100%;
}

.card-chip-icon--dark {
    background: linear-gradient(135deg, #bbb 0%, #888 50%, #bbb 100%);
    border: 1px solid #999;
}

/* Separator Line */
.pricing-separator-line {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 30px 0;
    width: 100%;
}

.pricing-card-v2--light .pricing-separator-line {
    background: rgba(0, 0, 0, 0.08);
}

/* Shine Effect - Dynamic Spotlight */
.card-shine {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    /* Spotlight gradient using CSS variables updated by JS */
    background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%),
            rgba(255, 255, 255, 0.6) 0%,
            rgba(255, 255, 255, 0.1) 40%,
            transparent 80%);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.2s;
    /* Ensure it doesnt block sharpness */
    will-change: opacity, background;
}

.credit-card-3d:hover .card-shine {
    opacity: 1;
}

/* Stronger shine for dark card to simulate metallic reflection */
.credit-card-3d--dark .card-shine {
    mix-blend-mode: soft-light;
    background: radial-gradient(600px circle at var(--shine-x, 50%) var(--shine-y, 50%),
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0.1) 40%,
            transparent 80%);
}

.credit-card-3d--light .card-shine {
    mix-blend-mode: overlay;
    background: radial-gradient(600px circle at var(--shine-x, 50%) var(--shine-y, 50%),
            rgba(255, 255, 255, 0.8) 0%,
            rgba(255, 255, 255, 0.2) 40%,
            transparent 60%);
}

/* Ensure buttons are clickable and pop out */
.btn-v2 {
    transform: translateZ(20px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10;
}


/* --- FAQ SECTION --- */
.faq-section {
    background: #fcfcfd;
    padding: 100px 0 80px 0;
}

.faq-container {
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

/* Left Box: Noch Fragen */
.faq-left-box {
    flex: 1;
    min-width: 320px;
    max-width: 420px;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/faq-bg.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    min-height: 420px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.faq-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.faq-icon-question {
    font-size: 32px;
    color: #fff;
}

.faq-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.faq-desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 36px;
    line-height: 1.6;
}

.faq-contact-btn {
    font-size: 17px;
    padding: 16px 36px;
    border-radius: 40px;
    /* Liquid Glass iOS Style */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    color: #fff;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.5px;
}

.faq-contact-btn:hover {
    transform: translateY(-2px) scale(1.02);
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 15px 40px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* Right Box: Accordion & Switch */
.faq-right-box {
    flex: 2;
    min-width: 340px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-switch-container {
    position: relative;
    display: inline-flex;
    background: rgba(0, 0, 0, 0.03);
    /* Subtle track */
    border-radius: 99px;
    padding: 6px;
    margin-bottom: 32px;
}

.faq-switch-bg {
    position: absolute;
    top: 6px;
    left: 0;
    height: calc(100% - 12px);
    background: #fff;
    border-radius: 99px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
    /* Default width/transform handled by JS, but set init for no-js fallback or first load */
    width: 0;
    opacity: 0;
}

.faq-switch-btn {
    position: relative;
    background: transparent;
    border: none;
    font-size: 18px;
    font-weight: 500;
    color: #999;
    cursor: pointer;
    padding: 10px 24px;
    border-radius: 99px;
    z-index: 2;
    /* Above pill */
    transition: color 0.3s;
}

.faq-switch-btn.active {
    color: #111;
    font-weight: 600;
}

.faq-switch-btn:hover {
    color: #555;
}

/* Accordion Item */
.faq-item {
    background: rgba(255, 255, 255, 0.75);
    border-radius: 24px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s, border 0.2s;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.faq-item:hover {
    box-shadow: 0 12px 36px 0 rgba(31, 38, 135, 0.16);
    border-color: #e0e7ef;
}

.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    outline: none;
    font-size: 19px;
    font-weight: 600;
    color: #222;
    padding: 28px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}

/* FAQ Icon (+/-) */
.faq-icon-toggle {
    display: inline-block;
    width: 28px;
    height: 28px;
    position: relative;
    transition: transform 0.18s;
}

.faq-icon-line {
    position: absolute;
    background: #888;
    border-radius: 2px;
    display: block;
    transition: all 0.22s cubic-bezier(.4, 1.4, .6, 1);
    transform-origin: center center;
}

.faq-icon-line.vertical {
    left: 13px;
    top: 4px;
    width: 2px;
    height: 20px;
}

.faq-icon-line.horizontal {
    left: 4px;
    top: 13px;
    width: 20px;
    height: 2px;
}

/* Open State classes */
.faq-item.open .faq-icon-line.vertical {
    transform: rotate(45deg);
}

.faq-item.open .faq-icon-line.horizontal {
    transform: rotate(45deg);
}


.faq-answer {
    display: none;
    padding: 0 36px 28px 36px;
    color: #555;
    font-size: 17px;
    line-height: 1.6;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 0 0 24px 24px;
}

.faq-item.open .faq-answer {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* --- WARUM / HOW INTRO --- */
#how .section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

#how .cycle-wrapper {
    max-width: 900px;
    margin: 0 auto 80px;
}

#how .liquid-ring-group {
    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.06));
}

#how .center-title-group {
    pointer-events: none;
}

/* Dark Theme Adjustments for Cycle Container */
.cycle-container .pill-text text,
.cycle-container .center-title-group text {
    fill: #ffffff !important;
}

.cycle-container .pill-text text[fill="#555"] {
    fill: rgba(255, 255, 255, 0.7) !important;
}

/* --- IMPACT STORIES SECTION --- */
.impact-section {
    margin-top: 80px;
    padding-bottom: 40px;
    overflow: hidden;
}

.impact-grid {
    display: flex;
    gap: 32px;
    /* Increased gap for better separation */
    padding-bottom: 20px;

    /* Full Width Breakout */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: 24px;
    padding-right: 24px;

    overflow-x: hidden;
    /* Hide scrollbar completely */
}

/* Marquee Track */
.marquee-track {
    display: flex;
    gap: 32px;
    width: max-content;
    padding-right: 32px;
    /* Ensure 50% translation lands correctly */
    animation: scrollMarquee 60s linear infinite;
    /* Hardware acceleration */
    will-change: transform;
}

@keyframes scrollMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.impact-card {
    background: rgba(255, 255, 255, 0.65);
    /* Liquid Glass transparency */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);

    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
    /* Performance Boost */
    display: flex;
    flex-direction: column;

    /* Flex/Scroll props */
    flex: 0 0 340px;
    /* Fixed width */
    scroll-snap-align: center;
}

.impact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}

.impact-card-image {
    height: 240px;
    background-color: #ddd;
    background-size: cover;
    background-position: center;
    position: relative;
    /* Use mask to fade completely into the background */
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

/* Remove old gradient overlay since we use mask now */
.impact-card-image::after {
    display: none;
}

.impact-card-content {
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    white-space: normal;
    /* Fix inheritance from grid */
}

.impact-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    line-height: 1.2;
    color: #1d1d1f;
    margin-top: 0;
    margin-bottom: 24px;
    font-weight: 400;
    white-space: normal;
    /* Ensure title wraps */
}

.impact-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    gap: 15px;
}

.impact-row:first-of-type {
    border-top: none;
}

.impact-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #888;
    min-width: 100px;
    flex-shrink: 0;
}

.impact-value {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    text-align: right;
    font-weight: 500;
    white-space: normal;
    /* Ensure text wraps */
    overflow-wrap: break-word;
    /* Prevent overflow */
}

.impact-divider {
    display: flex;
    justify-content: flex-start;
    padding: 4px 0;
    color: #ccc;
    margin-left: 2px;
}

.result-row {
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.result-row .impact-value {
    color: #111;
    font-weight: 600;
}

/* --- MOBILE MENU & HAMBURGER --- */
.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1100;
    /* Above overlay */
    padding: 10px;
}

.hamburger-btn .bar {
    width: 24px;
    height: 2px;
    background-color: #333;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

/* Rotate bars when active (2 bars to X) */
body.menu-open .hamburger-btn .bar:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}

body.menu-open .hamburger-btn .bar:nth-child(2) {
    transform: translateY(-4px) rotate(-45deg);
    opacity: 1;
    /* Ensure visibility */
    width: 24px;
    /* Maintain width */
}


/* Mobile Menu Overlay - Now inside expanded header */
.mobile-menu-overlay {
    position: fixed;
    /* Still fixed or absolute? Fixed relative to viewport is safest */
    top: 80px;
    /* Push down to avoid overlap with logo/hamburger */
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background: transparent;
    /* Header provides background now */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease 0.2s;
    /* Delay for header expansion */
}

body.menu-open .mobile-menu-overlay {
    opacity: 1;
    pointer-events: all;
    /* transition-delay: 0.2s; already in base */
}

.mobile-menu-content {
    width: 100%;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.menu-open .mobile-nav-links {
    transform: translateY(0);
}

.mobile-nav-links a {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 500;
    color: #111;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    display: inline-block;
}

/* Specific style for the CTA in mobile menu */
.mobile-nav-links .mobile-cta {
    font-family: var(--font-main);
    /* Use main font for button */
    font-size: 16px;
    padding: 14px 28px;
    margin-top: 32px;
    display: inline-flex !important;
    /* Override desktop hide if needed, though class scoping should handle it */
    width: auto;
    color: #fff !important;
    /* Force white text */
    background: #000;
    /* Solid black for better contrast or stick to btn-primary */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- SCROLL ANIMATIONS (Liquid Blur Reveal) --- */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(10px);
    /* The "Liquid" start state */
    transition: all 1.0s cubic-bezier(0.2, 1, 0.3, 1);
    /* Heavy, premium ease */
    will-change: opacity, transform, filter;
}

.fade-in-up.visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Stagger Delays */
.stagger-1 {
    transition-delay: 0.1s;
}

.stagger-2 {
    transition-delay: 0.2s;
}

.stagger-3 {
    transition-delay: 0.3s;
}

/* Apply stagger to grid children if needed, but mainly we use the classes directly */
.benefits-grid .benefit-card {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(5px);
    transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.benefits-grid.visible .benefit-card {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Z-Index Fix for Plus Icons overlapping */
.benefits-grid .benefit-card:nth-child(1) {
    z-index: 4;
}

.benefits-grid .benefit-card:nth-child(2) {
    z-index: 3;
}

.benefits-grid .benefit-card:nth-child(3) {
    z-index: 2;
}

.benefits-grid .benefit-card:nth-child(4) {
    z-index: 1;
}

.benefits-grid.visible .benefit-card:nth-child(1) {
    transition-delay: 0.1s;
}

.benefits-grid.visible .benefit-card:nth-child(2) {
    transition-delay: 0.2s;
}

.benefits-grid.visible .benefit-card:nth-child(3) {
    transition-delay: 0.3s;
}

.benefits-grid.visible .benefit-card:nth-child(4) {
    transition-delay: 0.4s;
}

/* Stagger animation for links could be done with nth-child in JS or CSS, keeping simpler for now */

.mobile-nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #000;
    transform: translateX(-101%);
    transition: transform 0.3s ease;
}

.mobile-nav-links a:hover::after {
    transform: translateX(0);
}

@media (min-width: 768px) {
    .hamburger-btn {
        display: none;
    }

    .mobile-menu-overlay {
        display: none;
    }
}

/* --- FOOTER (Liquid Glass Theme) --- */
.footer-glass {
    position: relative;
    background: #0a0a0c;
    color: #fff;
    padding: 80px 0 40px;
    overflow: hidden;
    margin-top: 80px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-glow-1,
.footer-glow-2 {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
}

.footer-glow-1 {
    background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
    top: -300px;
    left: -200px;
}

.footer-glow-2 {
    background: radial-gradient(circle, #ec4899 0%, transparent 70%);
    bottom: -300px;
    right: -200px;
}

.footer-glass .container {
    position: relative;
    z-index: 2;
}

.footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 80px;
}

.footer-brand-col {
    flex: 1;
    min-width: 300px;
    max-width: 400px;
}

.footer-logo {
    color: #fff;
    display: block;
    margin-bottom: 20px;
    font-size: 26px;
}

.footer-desc {
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Newsletter-Form */
.footer-newsletter {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    width: 100%;
}

.newsletter-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
}

.newsletter-form {
    display: flex;
    gap: 10px;
}

.newsletter-form input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 14px;
    color: #fff;
    font-size: 14px;
    flex: 1;
    outline: none;
    transition: border-color 0.2s;
}

.newsletter-form input:focus {
    border-color: rgba(255, 255, 255, 0.3);
}

.newsletter-form button {
    background: #fff;
    color: #000;
    border: none;
    border-radius: 8px;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.newsletter-form button:hover {
    background: #f0f0f0;
    transform: scale(1.05);
}

/* Links Columns */
.footer-links-grid {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
}

.footer-col h4 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 24px;
    letter-spacing: 0.5px;
}

.footer-col ul li {
    margin-bottom: 14px;
}

.footer-col ul li a {
    color: #9ca3af;
    font-size: 14px;
    transition: color 0.2s;
    text-decoration: none;
}

.footer-col ul li a:hover {
    color: #fff;
}

/* Footer Bottom */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #6b7280;
    font-size: 13px;
}

.social-links {
    display: flex;
    gap: 20px;
}

.social-links a {
    color: #6b7280;
    transition: color 0.2s, transform 0.2s;
}

.social-links a:hover {
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        gap: 50px;
    }

    .footer-links-grid {
        gap: 40px;
        width: 100%;
        justify-content: space-between;
    }

    .footer-brand-col {
        max-width: 100%;
    }

    .footer-bottom {
        flex-direction: column-reverse;
        gap: 20px;
    }
}

.btn-footer-small {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #fff !important;
    transition: all 0.2s ease;
}

.btn-footer-small:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- CONTACT MODAL (Liquid Glass) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 480px;
    border-radius: 24px;
    padding: 40px;
    position: relative;
    transform: scale(0.95) translateY(20px);
    transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
}

.modal-overlay.active .modal-glass {
    transform: scale(1) translateY(0);
}

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #555;
    line-height: 1;
}

.modal-close-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: rotate(90deg);
}

.modal-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    margin-bottom: 8px;
    color: #111;
}

.modal-content p {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #333;
    outline: none;
    transition: all 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
    background: #fff;
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* --- Select Dropdown Style --- */
.contact-form select {
    width: 100%;
    padding: 14px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #333;
    outline: none;
    transition: all 0.2s;
    appearance: none;
    /* Hide default arrow */
    -webkit-appearance: none;
}

.contact-form select:focus {
    background: #fff;
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.contact-form select:invalid {
    color: #888;
}

@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 0 !important;
    }
}

/* --- LEGAL PAGES --- */
.legal-page {
    padding-top: 140px;
    /* Space for fixed header */
    padding-bottom: 80px;
    background: #fdfdfd;
    min-height: 100vh;
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 60px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.legal-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    margin-bottom: 40px;
    color: #111;
}

.legal-content h2 {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 16px;
    color: #111;
}

.legal-content p,
.legal-content ul li {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 16px;
}

.legal-content ul {
    margin-bottom: 16px;
    padding-left: 20px;
}

.legal-content a {
    color: #3b82f6;
    text-decoration: underline;
}

@media(max-width: 768px) {
    .legal-content {
        padding: 30px;
    }

    .legal-content h1 {
        font-size: 32px;
    }
}

/* --- COOKIE CONSENT --- */
.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    max-width: 500px;
    margin: 0 auto;
    /* Center on mobile if full width */
    background: rgba(255, 255, 255, 0.85);
    /* Light glass */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    padding: 24px;
    z-index: 10000;
    display: none;
    /* Hidden by default, shown via JS */
    animation: slideUpCookie 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUpCookie {
    from {
        transform: translateY(100px);
        opacity: 0;
    }

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

.cookie-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #111;
}

.cookie-content p {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 20px;
}

.cookie-actions {
    display: flex;
    gap: 10px;
}

@media (max-width: 600px) {
    .cookie-banner {
        bottom: 10px;
        left: 10px;
        right: 10px;
        width: auto;
    }

    .cookie-actions {
        flex-direction: column;
    }
}

/* --- Cookie Settings Modal (Reusing Modal Glass Styles) --- */
.cookie-settings {
    margin-top: 20px;
}

.cookie-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.cookie-option:last-child {
    border-bottom: none;
}

.cookie-label h4 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.cookie-label p {
    font-size: 12px;
    color: #777;
    margin: 0;
}

/* Custom Switch Toggle */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #22c55e;
    /* Green */
}

input:focus+.slider {
    box-shadow: 0 0 1px #22c55e;
}

input:checked+.slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

input:disabled+.slider {
    background-color: #e5e7eb;
    cursor: not-allowed;
}

input:disabled+.slider:before {
    background-color: #9ca3af;
}

/* --- LOGO IMAGE STYLES --- */
.logo img {
    height: 40px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Invert logo in footer (dark background) if it's black */
.footer-logo img {
    filter: invert(1) brightness(200%);
    opacity: 0.9;
}

@media (max-width: 768px) {
    .logo img {
        height: 32px;
    }
}

/* --- HERO ANIMATIONS --- */

/* Pulse Animation for the SVG Circle */
@keyframes pulse-ring {
    0% {
        transform: scale(0.95);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.6;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.3;
    }
}

.hero-bg-circle {
    animation: pulse-ring 8s ease-in-out infinite;
    transform-origin: center;
}

/* Base styles for entrance animations (hidden initially) */
/* We'll handle visibility via GSAP, but good to have a fallback or helper */
/* .hero-title, .hero-sub, .hero-buttons { opacity: 0; } - handled by GSAP */

/* --- ADDITIONAL MOBILE TWEAKS --- */

/* Footer Stacking */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .footer-brand-col {
        min-width: auto;
        max-width: 100%;
    }

    .footer-links-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    /* Ensure logo image is centered */
    .footer-logo {
        display: inline-block;
    }
}

/* Pricing Card Actions Stacking on Mobile */
@media (max-width: 480px) {
    .pricing-actions {
        padding: 24px 16px;
    }

    .pricing-features-v2 li {
        font-size: 14px;
    }
}

/* Cookie Banner Mobile */
@media (max-width: 600px) {
    .cookie-actions {
        flex-direction: column;
    }

    .cookie-actions .btn {
        width: 100%;
    }
}

/* --- ROI CALCULATOR --- */
#roi-calculator {
    position: relative;
    overflow: hidden;
}

.roi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 991px) {
    .roi-grid {
        grid-template-columns: 1fr;
    }
}

.roi-controls {
    transition: transform 0.3s ease;
}

/* Tactile Slider */
.input-wrapper input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    /* Slightly thicker track */
    background: #e5e7eb;
    border-radius: 4px;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    /* Inner shadow for depth */
}

.input-wrapper input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e5e7eb;
    /* Subtle border */
    cursor: pointer;
    transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.1s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    /* Drop shadow */
    margin-top: -8px;
    /* Center thumb on track if needed, or adjust height */
}

/* Firefox Thumb */
.input-wrapper input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.1s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.input-wrapper input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    background: #f9fafb;
}

.input-wrapper input[type="range"]:active::-moz-range-thumb {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    background: #f9fafb;
}

.advanced-toggle button:hover #roi-advanced-icon {
    transform: rotate(180deg);
}

.roi-results {
    background: linear-gradient(145deg, #1d1d1f, #2a2a2c);
    /* Subtle gradient for surface feel */
    color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    /* Lift it up */
}

/* Fix for background-clip warning */
#roi-total-savings {
    background-clip: text;
    -webkit-background-clip: text;
}

/* Tooltip Styling */
.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #e5e7eb;
    color: #666;
    border-radius: 50%;
    font-size: 10px;
    margin-left: 6px;
    cursor: help;
    position: relative;
    font-family: sans-serif;
    font-style: normal;
}

.tooltip-icon:hover::after {
    content: attr(data-title);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #1d1d1f;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    min-width: 150px;
    text-align: center;
}

.tooltip-icon:hover::before {
    content: '';
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #1d1d1f transparent transparent transparent;
    z-index: 10;
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #3f3f46;
    /* Darker grey for inactive */
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    /* Matches slider transition */
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked+.slider {
    background-color: #22c55e;
    /* Green-500 */
}

input:checked+.slider:before {
    transform: translateX(16px);
}

/* --- DATA SAFE SECTION --- */
#data-safe {
    --mouse-x: 50%;
    --mouse-y: 50%;
}

.data-safe-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(34, 197, 94, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 197, 94, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.4;
    mask-image: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),
            black,
            transparent 40%);
    -webkit-mask-image: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),
            black,
            transparent 40%);
    pointer-events: none;
    z-index: 1;
}

.safe-card {
    background: #111;
    /* Match Terminal/Vault */
    border: 1px solid #333;
    border-radius: 20px;
    padding: 30px;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    will-change: transform;
    /* Performance Boost */
    /* backdrop-filter removed for solid dark consistency */
}

/* Matrix Binary Trail Effect */
.matrix-digit {
    position: fixed;
    color: #22c55e;
    font-family: 'JetBrains Mono', monospace;
    font-weight: bold;
    font-size: 14px;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    user-select: none;
    animation: matrixFade 1s forwards;
    will-change: transform, opacity;
    /* GPU Hint */
    /* text-shadow: 0 0 5px rgba(34, 197, 94, 0.8); - Performance Optimization */
}

@keyframes matrixFade {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1.2);
    }

    100% {
        opacity: 0;
        transform: translateY(30px) scale(0.8);
        /* Falls down like Matrix rain */
    }
}

.safe-card:hover {
    transform: translateY(-5px);
    background: #161616;
    border-color: #22c55e;
    /* Green glow on hover like Matrix */
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.05);
}

.safe-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid #333;
    /* Darker border */
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

/* Green Highlight for Icon Box on Hover */
.safe-card:hover .safe-icon-box {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.safe-card h3 {
    color: white;
    font-size: 18px;
    /* Unified font size */
    font-weight: 700;
    margin-bottom: 12px;
    font-family: 'Inter', sans-serif;
}

.safe-card p {
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.safe-card strong {
    color: #e5e7eb;
}

/* AI Terminal Hover Effects */
.terminal-card:hover {
    transform: translateX(5px);
    border-color: #444 !important;
    background: #141414 !important;
}

.vault-file-item {
    transition: background 0.2s;
}

.vault-ui-container:hover .vault-file-item {
    background: #202020 !important;
}

/* =========================================
   TECH & ENGAGEMENT OVERHAUL (PREMIUM)
   ========================================= */

#tech-engagement {
    position: relative;
    z-index: 20;
}

#tech-engagement .visual-ui-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
}

@media (min-width: 992px) {
    #tech-engagement .visual-ui-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

/* --- Card Architecture --- */
#tech-engagement .terminal-card {
    background: #0a0a0a;
    /* Deep black */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    padding: 0;
    /* Let headers/body handle padding */
    height: 100%;
}

.terminal-header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.terminal-body {
    padding: 32px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* --- Typography --- */
#tech-engagement h3 {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: white;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

#tech-engagement p {
    font-size: 15px;
    line-height: 1.6;
    color: #a3a3a3;
    margin-bottom: 24px;
}

/* --- Badges (Universal Adapter) --- */
.tech-stack-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

.tech-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: #e5e7eb;
    transition: all 0.2s ease;
}

.tech-badge:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    color: #fff;
    transform: translateY(-1px);
}

/* --- Status List (Clinical Engine) --- */
.terminal-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
}

.terminal-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.terminal-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 6px;
    position: relative;
    box-shadow: 0 0 12px currentColor;
}

.status-green {
    background: #22c55e;
    color: rgba(34, 197, 94, 0.4);
}

.status-blue {
    background: #3b82f6;
    color: rgba(59, 130, 246, 0.4);
}

/* --- Result Boxes (Bottom) --- */
.terminal-body .p-3 {
    margin-top: auto;
    background: transparent !important;
    /* Override inline styles */
    border: 1px dashed rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 16px !important;
    text-align: center;
}

.terminal-body strong {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- NEW ORBIT DESIGN (Teufelskreis Replacement) --- */
.cycle-orbit-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    /* Wider to accommodate side cards */
    height: 440px;
    /* Reduced from 600px */
    margin: 40px auto;
    /* Reduced margin */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Background Ring */
.orbit-ring-bg {
    position: absolute;
    width: 400px;
    /* Reduced from 600px */
    height: 400px;
    border: 2px dashed rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    animation: rotateRing 60s linear infinite;
    pointer-events: none;
}

@keyframes rotateRing {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Central Core */
.orbit-core {
    position: absolute;
    width: 130px;
    /* Reduced from 160px */
    height: 130px;
    background: radial-gradient(circle at 30% 30%, #ff2d8f, #d11a70);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 0 50px rgba(255, 45, 143, 0.4);
    z-index: 10;
}

.core-glare {
    position: absolute;
    top: 15%;
    left: 20%;
    width: 30%;
    height: 20%;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    filter: blur(4px);
}

.core-label {
    color: white;
    font-weight: 700;
    font-size: 16px;
    /* Slightly smaller */
    line-height: 1.2;
    z-index: 2;
}

/* Orbit Steps */
.cycle-step {
    position: absolute;
    width: 240px;
    /* Reduced from 280px */
    transition: all 0.5s ease;
    z-index: 20;
    /* Ensure it's above Lightning (5) and Core (10) */
}

.step-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 18px;
    /* Reduced padding */
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.step-number {
    position: absolute;
    top: -8px;
    left: 15px;
    font-size: 32px;
    /* Reduced */
    font-weight: 800;
    color: rgba(255, 45, 143, 0.1);
    z-index: 0;
}

.step-title {
    position: relative;
    font-size: 17px;
    /* Reduced */
    margin-bottom: 6px;
    z-index: 1;
}

.step-desc {
    position: relative;
    font-size: 13px;
    /* Reduced */
    color: #555;
    z-index: 1;
}

/* Positioning - Adjusted for transparency overlaping */
.step-1 {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.step-2 {
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
}

/* Pulled in */
.step-3 {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.step-4 {
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
}

/* Pulled in */

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .cycle-orbit-wrapper {
        height: auto;
        flex-direction: column;
        gap: 20px;
        padding-top: 150px;
        /* Reduced space */
        margin: 40px auto;
        max-width: 100%;
    }

    .orbit-ring-bg {
        display: none;
    }

    .orbit-core {
        top: 0;
        position: absolute;
        width: 120px;
        height: 120px;
    }

    .core-label {
        font-size: 14px;
    }

    .cycle-step {
        position: relative;
        width: 100%;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
    }
}

/* Lightning Effect */
.orbit-lightning-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    /* Below Core (10) but above Ring */
}

.lightning-bolt {
    stroke: #ff2d8f;
    stroke-width: 2px;
    filter: drop-shadow(0 0 8px #ff2d8f);
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity 0.1s ease;
}

.lightning-bolt.active {
    opacity: 1 !important;
    animation: flashBolt 0.1s infinite alternate;
}

@keyframes flashBolt {
    0% {
        stroke-opacity: 1;
        stroke-width: 2px;
    }

    50% {
        stroke-opacity: 0.6;
        stroke-width: 3px;
    }

    100% {
        stroke-opacity: 0.8;
        stroke-width: 1px;
        filter: drop-shadow(0 0 12px #ffffff);
    }
}

/* ROI Calculator Section */
.roi-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
}

.roi-header-container {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.roi-title {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    margin-bottom: 24px;
    color: #1d1d1f;
    line-height: 1.1;
}

.roi-description {
    font-size: 18px;
    color: #666;
    line-height: 1.5;
}

.roi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.glass-panel-light {
    background: #fff;
    padding: 40px;
    border-radius: 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.roi-panel-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.roi-step-number {
    background: #1d1d1f;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.roi-input-wrapper {
    margin-bottom: 25px;
}

.roi-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #374151;
}

.roi-input-group-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.roi-range-input {
    flex: 1;
    accent-color: #1d1d1f;
}

.roi-number-input {
    width: 80px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #ddd;
    text-align: center;
    font-weight: 600;
}

.roi-input-icon-wrapper {
    position: relative;
}

.roi-currency-symbol {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.roi-currency-input {
    width: 100%;
    padding: 10px 10px 10px 35px;
    border-radius: 10px;
    border: 1px solid #eee;
}

.roi-advanced-toggle {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f9fafb;
    padding: 12px 16px;
    border-radius: 12px;
}

.roi-advanced-label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.roi-advanced-inputs {
    display: none;
    padding-top: 10px;
    border-top: 1px dashed #eee;
}

.roi-label-flex {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #555;
}

.roi-full-width-input {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #eee;
}

.glass-panel-dark {
    background: #1d1d1f;
    padding: 40px;
    border-radius: 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.roi-bg-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 45, 143, 0.3) 0%, transparent 60%);
    filter: blur(60px);
    opacity: 0.6;
}

.roi-subtitle {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 30px;
}

.result-box {
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

#roi-total-savings {
    font-family: 'Playfair Display', serif;
    font-size: 64px;
    line-height: 1;
    font-weight: 400;
    background: linear-gradient(90deg, #fff, #ddd);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.roi-savings-text {
    color: #22c55e;
    font-size: 16px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.roi-breakdown {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.bar-group-header {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
    color: #aaa;
}

.bar-bg {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.bar-fill {
    width: 0%;
    height: 100%;
    border-radius: 3px;
    transition: width 1s ease;
}

.bar-fill-blue {
    background: #3b82f6;
}

.bar-fill-yellow {
    background: #eab308;
}

.bar-fill-pink {
    background: #ec4899;
}

.roi-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    position: relative;
    z-index: 2;
}

.roi-footer-label {
    font-size: 12px;
    color: #666;
}

.roi-footer-val {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

@media (max-width: 768px) {
    .roi-section {
        padding: 60px 0;
    }

    .roi-title {
        font-size: 32px;
    }

    .roi-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .glass-panel-light,
    .glass-panel-dark {
        padding: 24px;
    }

    #roi-total-savings {
        font-size: 48px;
    }
}

/* --- LEGAL PAGES (Datenschutz & AGB) --- */
.legal-page {
    padding-top: calc(var(--header-height) + 60px);
    padding-bottom: 100px;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 1) 0%, #f7f8fa 100%);
    min-height: 100vh;
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    padding: 60px;
}

.legal-content h1 {
    font-family: var(--font-serif);
    font-size: 42px;
    margin-bottom: 12px;
    color: #000;
    text-align: center;
}

.legal-content>p:first-of-type {
    text-align: center;
    color: var(--color-text-muted);
    margin-bottom: 40px;
    font-size: 15px;
}

.legal-content h2 {
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #111;
    font-weight: 600;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.legal-content h3 {
    font-size: 18px;
    margin-top: 24px;
    margin-bottom: 12px;
    color: #333;
    font-weight: 600;
}

.legal-content p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 16px;
    color: #444;
}

.legal-content ul {
    margin-bottom: 24px;
    padding-left: 20px;
}

.legal-content li {
    font-size: 16px;
    margin-bottom: 8px;
    color: #444;
    position: relative;
    padding-left: 8px;
}

.legal-content li::marker {
    color: #ccc;
}

.legal-content a {
    color: #000;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.3);
    text-underline-offset: 3px;
    transition: all 0.2s;
}

.legal-content a:hover {
    text-decoration-color: #000;
}

@media (max-width: 768px) {
    .legal-content {
        padding: 30px 20px;
        margin: 0 16px;
    }

    .legal-content h1 {
        font-size: 32px;
    }
}