:root {
    --brand-orange: #f85b00;
    --brand-green: #5e901d;
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

html { scroll-behavior: smooth; }
body { background-color: #ffffff; color: #18181b; overflow-x: hidden; }

/* Noise Texture */
.noise-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; opacity: 0.04;
    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.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Animations */
.fade-in-up { animation: fadeInUp 0.8s var(--ease-out-expo) forwards; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* Glows */
.shadow-glow-green {
    box-shadow: 0 0 20px rgba(94, 144, 29, 0.4), 0 0 40px rgba(94, 144, 29, 0.2);
    transition: all 0.3s var(--ease-out-expo);
}
.shadow-glow-green:hover {
    box-shadow: 0 0 30px rgba(94, 144, 29, 0.6), 0 0 60px rgba(94, 144, 29, 0.4);
    transform: scale(1.02);
}
.shadow-glow-orange { box-shadow: 0 10px 30px -5px rgba(248, 91, 0, 0.4); }
.shadow-float { box-shadow: 0 20px 40px -10px rgba(0,0,0,0.08); }

/* -----------------------------------------------------------
   CTA SECTION (VIBRANT/PREMIUM LOOK from earlier iteration)
----------------------------------------------------------- */

/* Basis für die gesamte Sektion */
.section-spacer { 
    padding: 100px 0; 
}

/* Die Hauptkarte: Großer Gradient-Hintergrund, Tiefe und Schatten */
.cta-card-vibrant {
    position: relative;
    /* Der starke Orange-Verlauf als Hintergrund */
    background: linear-gradient(135deg, #FF5E00 0%, #FF8A00 100%); 
    border-radius: 32px; /* --radius-xl */
    padding: 80px 40px;
    text-align: center;
    overflow: hidden;
    max-width: 950px;
    margin: 0 auto;
    /* Starker, farbiger Schattenwurf */
    box-shadow: 0 30px 60px -15px rgba(255, 94, 0, 0.4); 
    color: white;
}

/* Inhalt über dem Glow */
.cta-content-light { 
    position: relative; 
    z-index: 2; 
}

.cta-title { 
    font-size: 2.8rem; /* angelehnt an 2.5rem */
    margin-bottom: 16px; 
    color: white; 
    font-weight: 700;
}
.cta-text { 
    max-width: 500px; 
    margin: 0 auto 30px auto; 
    color: rgba(255,255,255,0.9); 
    font-size: 1.15rem; 
}

/* Features-Liste */
.cta-benefits-row { 
    display: flex; 
    justify-content: center; 
    gap: 20px; 
    margin-bottom: 40px; 
    flex-wrap: wrap; 
}
.cta-benefits-row span { 
    font-weight: 600; 
    font-size: 0.95rem; 
    color: #FF5E00; /* Orange Akzentfarbe */
    background: white; 
    padding: 10px 20px; 
    border-radius: 100px; /* Pill Shape */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
}

/* Button-Styling (Weiß auf farbigem Hintergrund) */
.btn-large {
    font-size: 1.1rem; 
    padding: 16px 40px; 
}

.btn-white {
    background: white; 
    color: #FF5E00; /* Orange Textfarbe */
    padding: 18px 48px; 
    font-size: 1.1rem; 
    border-radius: 100px; 
    font-weight: 700;
    transition: all 0.3s;
}

.btn-white:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
    background: #fdfdfd; 
}

/* Dekorative Hintergrund-Glühen */
.card-bg-glow {
    position: absolute; 
    top: -50%; 
    left: -20%; 
    width: 140%; 
    height: 200%;
    /* Subtiler weißer Glanz über dem Gradienten */
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
    pointer-events: none;
}