/*  ==========================================================================
    GLOBAL CONFIGURATION
    ======================================================================= */
:root{
    /* COLOR PALETTE – Komplementär (Zusatz-)Farben */
    --primary-hue: 195;
    --primary: hsl(var(--primary-hue) 90% 48%);
    --primary-dark: hsl(var(--primary-hue) 90% 38%);
    --primary-light: hsl(var(--primary-hue) 90% 58%);

    --accent-hue: calc(var(--primary-hue) + 180);
    --accent: hsl(var(--accent-hue) 90% 50%);
    --accent-dark: hsl(var(--accent-hue) 90% 40%);
    --accent-light: hsl(var(--accent-hue) 90% 60%);

    --bg-dark: #0a0d14;
    --bg-light: #ffffff;
    --text-dark: #222222;
    --text-light: #f5f5f5;

    --transition-fast: 0.25s ease;
    --transition-medium: 0.5s ease;

    --radius: 8px;
    --shadow-medium: 0 10px 25px rgba(0,0,0,.25);
    --glass-bg: rgba(255,255,255,0.15);
    --blur: blur(8px);
}

/*  ==========================================================================
    RESET & BASICS
    ======================================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{scroll-behavior:smooth;}
body{
    font-family:'Nunito',sans-serif;
    line-height:1.6;
    background:var(--bg-dark);
    color:var(--text-light);
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
    font-family:'Oswald',sans-serif;
    color:var(--text-light);
    text-shadow:1px 1px 3px rgba(0,0,0,0.5);
}

/*  ==========================================================================
    LAYOUT HELPERS
    ======================================================================= */
.container{
    width:90%;
    max-width:1200px;
    margin-inline:auto;
}
.container.is-two-thirds{max-width:1000px;}

.text-center{text-align:center;}
.flex{display:flex;align-items:center;}

/*  ==========================================================================
    HEADER
    ======================================================================= */
.header{
    position:sticky;
    top:0;
    z-index:1000;
    backdrop-filter:var(--blur);
    background:var(--glass-bg);
}
.header .logo{
    font-size:1.6rem;
    font-weight:600;
    color:var(--accent-light);
    text-decoration:none;
}
.navigation{display:flex;align-items:center;justify-content:space-between;}
.nav-list{list-style:none;display:flex;gap:1.5rem;}
.nav-list a{
    color:var(--text-light);
    text-decoration:none;
    font-weight:600;
    transition:color var(--transition-fast);
}
.nav-list a:hover{color:var(--accent);}
.burger{
    display:none;
    flex-direction:column;
    gap:4px;
    background:none;
    border:0;
    cursor:pointer;
}
.burger span{
    width:22px;height:2px;
    background:var(--text-light);
    transition:transform var(--transition-fast);
}

/* MOBILE NAVIGATION */
@media(max-width:768px){
    .nav-list{position:fixed;inset:0 0 0 40%;flex-direction:column;padding:5rem 2rem;
        background:var(--bg-dark);transform:translateX(100%);transition:transform var(--transition-medium);}
    .nav-list.open{transform:translateX(0);}
    .burger{display:flex;}
}

/*  ==========================================================================
    HERO
    ======================================================================= */
.hero{
    min-height:70vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
.hero-title{
    font-size:clamp(2rem,6vw,3.5rem);
    color:#ffffff;
    margin-bottom:1rem;
}
.hero-subtitle{color:#ffffff;max-width:700px;margin-inline:auto 2rem;}

/*  ==========================================================================
    BUTTONS & FORMS
    ======================================================================= */
.btn,
button,
input[type='submit']{
    display:inline-block;
    padding:.8rem 2.2rem;
    font-weight:700;
    color:var(--bg-light);
    background:var(--primary);
    border:0;border-radius:var(--radius);
    cursor:pointer;
    transition:background var(--transition-fast),transform var(--transition-fast);
}
.btn:hover,
button:hover,
input[type='submit']:hover{background:var(--primary-light);}
.btn:active{transform:scale(.96);}
.form-group{margin-bottom:1.3rem;}
label{display:block;margin-bottom:.4rem;font-weight:600;}
input,textarea{
    width:100%;padding:.9rem 1rem;border:2px solid var(--primary-dark);
    border-radius:var(--radius);background:rgba(255,255,255,0.07);
    color:var(--text-light);
}
input:focus,textarea:focus{outline:none;border-color:var(--accent);}

/*  ==========================================================================
    TIMELINE
    ======================================================================= */
.timeline{position:relative;margin:2rem 0;border-left:3px solid var(--accent);}
.timeline-item{padding-left:1.5rem;margin-bottom:2rem;position:relative;}
.timeline-title{font-size:1.2rem;margin-bottom:.3rem;color:var(--accent-light);}
.timeline-dot{
    position:absolute;left:-10px;top:.3rem;
    width:14px;height:14px;border-radius:50%;
    background:var(--accent);
    animation:morph 8s infinite ease-in-out;
}

/*  ==========================================================================
    CARDS / CUSTOMER STORIES
    ======================================================================= */
.cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2rem;
    margin-top:2rem;
}
.card{
    background:rgba(255,255,255,0.05);
    border-radius:var(--radius);
    box-shadow:var(--shadow-medium);
    display:flex;flex-direction:column;align-items:center;
    text-align:center;
    padding:1.5rem;
    transition:transform var(--transition-medium);
}
.card:hover{transform:translateY(-6px);}
.card-image{height:180px;width:100%;overflow:hidden;border-radius:var(--radius);}
.card-image img{
    width:100%;height:100%;object-fit:cover;margin:0 auto;display:block;
}
.card-content h3{margin-top:1rem;color:var(--accent-light);}

/*  ==========================================================================
    TESTIMONIAL SLIDER
    ======================================================================= */
.testimonials{background-size:cover;background-repeat:no-repeat;background-attachment:fixed;padding:4rem 0;}
.slider{position:relative;overflow:hidden;}
.slide{min-width:100%;padding:2rem;}
blockquote{font-size:1.1rem;font-style:italic;max-width:700px;margin:auto;color:#ffffff;}
cite{display:block;margin-top:.8rem;font-weight:700;color:var(--accent-light);}
.slider-prev,.slider-next{
    position:absolute;top:50%;transform:translateY(-50%);
    background:var(--accent-dark);color:#fff;border:0;padding:.5rem 1rem;border-radius:50%;
    cursor:pointer;transition:background var(--transition-fast);
}
.slider-prev:hover,.slider-next:hover{background:var(--accent);}
.slider-prev{left:1rem;}
.slider-next{right:1rem;}

/*  ==========================================================================
    MEDIA SECTION / PARALLAX
    ======================================================================= */
.media,.testimonials{color:#ffffff;}
.media p{max-width:750px;margin-inline:auto;}

/*  ==========================================================================
    RESOURCES
    ======================================================================= */
.resources ul{margin:1.5rem 0 0 0;list-style:none;padding:0;}
.resources li+li{margin-top:.8rem;}
.resources a{
    color:var(--primary-light);text-decoration:none;font-weight:600;
    position:relative;transition:color var(--transition-fast);
}
.resources a::after{
    content:'→';position:absolute;right:-18px;opacity:0;transition:opacity var(--transition-fast),right var(--transition-fast);
}
.resources a:hover{color:var(--accent);}
.resources a:hover::after{opacity:1;right:-10px;}

/*  ==========================================================================
    CONTACT SECTION
    ======================================================================= */
.contact{padding:4rem 0;}
.contact form{max-width:600px;margin:2rem auto;}
.contact p{max-width:680px;margin-inline:auto;}

/*  ==========================================================================
    FOOTER
    ======================================================================= */
.footer{
    background:#05070d;
    padding:2rem 0;
    font-size:.9rem;
}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;align-items:center;}
.footer-nav{list-style:none;display:flex;gap:1rem;flex-wrap:wrap;}
.footer-nav a{color:var(--text-light);text-decoration:none;transition:color var(--transition-fast);}
.footer-nav a:hover{color:var(--accent);}
.social-links a{
    color:var(--primary-light);margin-left:.8rem;text-decoration:none;
    font-weight:600;transition:color var(--transition-fast);
}
.social-links a:hover{color:var(--accent);}

/*  ==========================================================================
    SUCCESS PAGE
    ======================================================================= */
.success-page{
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    flex-direction:column;text-align:center;
    background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);
    color:var(--text-light);
}
.success-page h1{font-size:2.4rem;margin-bottom:1rem;}
.success-page p{max-width:500px;}

/*  ==========================================================================
    PRIVACY & TERMS PAGES
    ======================================================================= */
.page-privacy,.page-terms{padding-top:100px;padding-bottom:4rem;}

/*  ==========================================================================
    UTILITIES & ANIMATIONS
    ======================================================================= */
@keyframes morph{
    0%,100%{border-radius:20% 80% 70% 30%/30% 40% 60% 70%;}
    50%{border-radius:70% 30% 30% 70%/60% 50% 50% 40%;}
}
.parallax{background-attachment:fixed;}

.fade-in-up{
    opacity:0;transform:translateY(40px);
    animation:fadeUp .6s forwards;
}
@keyframes fadeUp{
    to{opacity:1;transform:translateY(0);}
}

/*  ==========================================================================
    READ-MORE LINK
    ======================================================================= */
.read-more{
    display:inline-block;
    margin-top:.8rem;
    color:var(--accent-light);
    text-decoration:none;
    font-weight:700;
    position:relative;
}
.read-more::after{
    content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;
    background:var(--accent-light);transition:width var(--transition-fast);
}
.read-more:hover::after{width:100%;}

/*  ==========================================================================
    RESPONSIVE TYPOGRAPHY
    ======================================================================= */
@media(min-width:992px){
    h1{font-size:3rem;}
    h2{font-size:2rem;}
    h3{font-size:1.5rem;}
}

/*  ==========================================================================
    DARK GRADIENT OVERLAYS FOR BACKGROUND IMAGES
    ======================================================================= */
.hero, .testimonials, .media{
    position:relative;
}
.hero::before, .testimonials::before, .media::before{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,0.6),rgba(0,0,0,0.6));
    z-index:0;
}
.hero >*, .testimonials >*, .media >*{position:relative;z-index:1;}

/*  ==========================================================================
    SCROLLBAR STYLING (WEBKIT)
    ======================================================================= */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:#111;}
::-webkit-scrollbar-thumb{background:var(--accent-dark);border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:var(--accent);}
.burger{
    display: none;
}