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

:root {
    /* Colors */
    --primary-color: #005858;
    --primary-light: #009c9cff;
    --primary-lighter: #e7f3f3ff;
    --beige: #e6ce9d;
    --accent-color: var(--beige);
    --grey: var(--beige);
    --text-dark: #1a1a1a;
    --text-light: #666666;
    --text-white: #ffffff;
    --bg-light: var(--beige);
    --bg-white: #ffffff;
    --bg-section: var(--beige);
    --border-color: #e7f3f3ff;
    
    /* Typography - Fluid Responsive System */
    --font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-h1: clamp(2rem, 5vw, 2.625rem); /* 32px - 42px */
    --font-weight-h1: 600;
    --font-size-h2: clamp(1.25rem, 3vw, 1.625rem); /* 20px - 26px */
    --font-weight-h2: 600;
    --font-size-h3: clamp(1.125rem, 2vw, 1.25rem); /* 18px - 20px */
    --font-weight-h3: 500;
    --font-size-body: clamp(0.9375rem, 1.5vw, 1rem); /* 15px - 16px */
    --font-weight-body: 400;
    --line-height-body: 1.6;
    --font-size-cta: clamp(0.9375rem, 1.5vw, 1rem); /* 15px - 16px */
    --font-weight-cta: 600;
    --font-size-small: clamp(0.75rem, 1.2vw, 0.8125rem); /* 12px - 13px */
    --font-weight-small: 400;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;
    
    /* Transitions */
    --transition: all 0.3s ease;
}

/* Base Typography */
html { font-size: var(--font-size-base); scroll-behavior: smooth; }

body {
    font: var(--font-weight-body) var(--font-size-body)/var(--line-height-body) var(--font-family);
    color: var(--text-dark);
    background: var(--bg-white);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { line-height: 1.2; margin-bottom: var(--spacing-md); }
h1 { font: var(--font-weight-h1) var(--font-size-h1)/1.2 var(--font-family); }
h2 { font: var(--font-weight-h2) var(--font-size-h2)/1.2 var(--font-family); color: var(--primary-color); }
h3 { font: var(--font-weight-h3) var(--font-size-h3)/1.2 var(--font-family); }
h4, h5 { font: var(--font-weight-h3) var(--font-size-body)/1.2 var(--font-family); }

p {
    margin-bottom: var(--spacing-sm);
    color: var(--text-light);
    font: var(--font-weight-body) var(--font-size-body)/var(--line-height-body) var(--font-family);
}

a { color: var(--primary-color); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--primary-light); }

/* Container */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); }

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font: var(--font-weight-cta) var(--font-size-cta)/1 var(--font-family);
    text-align: center;
    cursor: pointer;
    border: none;
}

/* Unified Neumorphic Primary Button */
.btn-primary {
    background: var(--accent-color);
    color: var(--text-dark);
    border-radius: 20px;
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: 
        6px 6px 12px rgba(0, 0, 0, 0.35),         /* Strong dark shadow */
        -6px -6px 12px rgba(255, 255, 255, 0.2),  /* Light shadow */
        inset 1px 1px 2px rgba(255, 255, 255, 0.4), /* Top highlight */
        inset -1px -1px 2px rgba(0, 0, 0, 0.15);    /* Bottom shadow */
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: var(--accent-color);
    color: var(--text-dark);
    box-shadow: 
        4px 4px 8px rgba(0, 0, 0, 0.4),            /* Tighter, darker shadow */
        -4px -4px 8px rgba(255, 255, 255, 0.25),   /* Light adjustment */
        inset 1px 1px 2px rgba(255, 255, 255, 0.5), /* Brighter highlight */
        0 0 15px rgba(230, 206, 157, 0.6);          /* Accent glow */
    transform: translateY(-2px);
}

.btn-primary:active {
    opacity: 1;
    box-shadow: 
        inset 4px 4px 8px rgba(0, 0, 0, 0.35),     /* Deep pressed effect */
        inset -4px -4px 8px rgba(255, 255, 255, 0.2), /* Light inset */
        inset 0 0 5px rgba(0, 0, 0, 0.2);          /* Inner shadow */
    transform: translateY(3px);
}

.btn-secondary { background: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); }
.btn-secondary:hover { background: var(--primary-color); color: var(--text-white); }
.btn-outline { background: transparent; color: var(--text-dark); border: 2px solid var(--text-dark); }
.btn-outline:hover { background: var(--text-dark); color: var(--text-white); }

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 1000;
    transition: var(--transition);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

.navbar:hover {
    background: rgba(255, 255, 255, 0.95);
}

.nav-content { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm) 0; }
.nav-logo a { display: inline-block; line-height: 0; }
.nav-logo img { height: 40px; width: auto; display: block; }

.nav-toggle {
    display: block;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.nav-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--primary-color);
    margin: 5px 0;
    transition: var(--transition);
}

.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }

.nav-menu {
    position: fixed;
    top: 60px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 60px);
    background: var(--bg-white);
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg);
    transition: var(--transition);
    list-style: none;
    overflow-y: auto;
}

.nav-menu.active { left: 0; }
.nav-menu li { margin: var(--spacing-sm) 0; }
.nav-link { color: var(--primary-color); font-size: 20px; font-weight: 500; padding: 0.25rem 0; display: block; transition: var(--transition); position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 0;
    height: 2px;
    background-color: var(--accent-color);
    transition: width 0.3s ease;
}
.nav-link:hover {
    color: var(--primary-color);
}
.nav-link:hover::after {
    width: 100%;
}

.nav-cta {
    display: inline-block;
    margin-top: var(--spacing-md);
}

/* Navbar Button Specific Styles */
.nav-cta.btn-primary {
    padding: 0.5rem 1.5rem;
    margin: 0.5rem;
    border-radius: 8px;
    box-shadow: 
        3px 3px 6px rgba(0, 0, 0, 0.25),
        -3px -3px 6px rgba(255, 255, 255, 0.2),
        inset 0.75px 0.75px 1.5px rgba(255, 255, 255, 0.4),
        inset -0.75px -0.75px 1.5px rgba(0, 0, 0, 0.15);
}

.nav-cta.btn-primary:hover {
    box-shadow: 
        2.25px 2.25px 4.5px rgba(0, 0, 0, 0.3),
        -2.25px -2.25px 4.5px rgba(255, 255, 255, 0.25),
        inset 0.75px 0.75px 1.5px rgba(255, 255, 255, 0.5),
        0 0 7.5px rgba(230, 206, 157, 0.6);
}

.nav-cta.btn-primary:active {
    box-shadow: 
        inset 2.25px 2.25px 4.5px rgba(0, 0, 0, 0.3),
        inset -2.25px -2.25px 4.5px rgba(255, 255, 255, 0.2),
        inset 0 0 3px rgba(0, 0, 0, 0.2);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
background: linear-gradient(rgba(0, 88, 88, 0.81), rgba(0, 88, 88, 0.81)), url('images/backgrounds/Hero.jpg') center/cover no-repeat;
    position: relative;
    padding: var(--spacing-xxl) 0;
    margin-top: 0;
}

.particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-content { position: relative; z-index: 2; text-align: center; color: var(--text-white); }
.hero-title { margin-bottom: var(--spacing-md); animation: fadeInUp 1s ease; }
.hero-subtitle { font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 400; }
.hero-description {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin: 0 auto var(--spacing-lg);
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
}

.hero-buttons { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; }
.hero .btn-secondary { border-color: var(--text-white); color: var(--text-white); }
.hero .btn-secondary:hover { background: var(--text-white); color: var(--primary-color); }

/* Section Headers */
.section-header { text-align: center; margin-bottom: var(--spacing-xl); }
.section-title { color: var(--primary-color); margin-bottom: var(--spacing-sm); }
.section-subtitle { color: var(--text-light); font-size: 1.1rem; max-width: 600px; margin: 0 auto; }
.subsection-title { text-align: center; margin-bottom: var(--spacing-lg); }
.subsection-subtitle { text-align: center; margin-bottom: var(--spacing-lg); color: var(--text-dark); font-size: var(--font-size-h4); }


/* Team member hover */
.team-member:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 10;
}

/* Value Proposition Section */
.value-proposition { padding: var(--spacing-xxl) 0; background: var(--primary-lighter); }

.pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.pillar {
    background: var(--bg-white);
    padding: var(--spacing-lg);
    border-radius: 24px;
    text-align: center;
    box-shadow: 
        16px 16px 32px rgba(0, 0, 0, 0.15),
        -16px -16px 32px rgba(255, 255, 255, 0.7),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.pillar-icon { color: var(--primary-color); margin-bottom: var(--spacing-md); }
.pillar h2 { margin-bottom: var(--spacing-sm); }

/* Process Section */
.process { 
    padding: var(--spacing-xxl) 0;
    background: var(--primary-lighter);
}

/* Timeline Scroll Container */
.timeline-scroll-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    background: var(--bg-white);
    border-radius: 24px;
    box-shadow: 
        16px 16px 32px rgba(0, 0, 0, 0.15),
        -16px -16px 32px rgba(255, 255, 255, 0.7),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(0, 0, 0, 0.05);
    padding: 40px 40px 40px 130px;
    margin-bottom: 60px;
    overflow: hidden;
}

/* Animated Growing Timeline Line */
.timeline-mask {
    position: absolute;
    left: 77px;
    top: 50px;
    width: 6px;
    height: 0;
    background: linear-gradient(180deg, var(--accent-color), rgba(230, 206, 157, 0.62));
    border-radius: 4px;
    z-index: 2;
    transition: height 0.1s linear;
}

/* Arrow head at the bottom of the timeline */
.timeline-mask::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 16px solid rgba(230, 206, 157, 0.62);
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 156, 156, 0.3));
}

.timeline-mask.show-arrow::after {
    opacity: 1;
}

/* Timeline Steps */
.timeline-step {
    position: relative;
    margin-bottom: 100px;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.timeline-step:last-child {
    margin-bottom: 0;
}

/* Timeline Dot */
.timeline-dot {
    position: absolute;
    left: -80px;
    top: -4px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bg-white);
    box-shadow: 0 4px 12px rgba(0, 88, 88, 0.15);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-weight: var(--font-weight-h2);
    font-size: var(--font-size-h2);
}

/* Timeline Step Title */
.timeline-step-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-h2);
    color: var(--primary-color);
    margin-bottom: 8px;
    margin-top: 12px;
}

/* Timeline Step Description */
.timeline-step-desc {
    font-size: 1rem;
    color: var(--text-light);
    margin-bottom: 0;
    margin-top: -8px;
}

.timeline-step-desc ul,
.timeline-step-desc ol {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.timeline-step-desc ul li {
    padding: var(--spacing-xs) 0 var(--spacing-xs) 1.5rem;
    color: var(--text-light);
    position: relative;
    line-height: 1.6;
}

.timeline-step-desc ul.bullet-list li::before {
    content: "▪";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-size: 1.2em;
}

.timeline-step-desc ol {
    counter-reset: item;
}

.timeline-step-desc ol li {
    padding: var(--spacing-xs) 0 var(--spacing-xs) 2rem;
    color: var(--text-light);
    position: relative;
    line-height: 1.6;
    counter-increment: item;
}

.timeline-step-desc ol li::before {
    content: counter(item, lower-alpha) ".";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 640px) {
    .timeline-scroll-container {
        padding: 30px 10px 30px 70px;
        max-width: 98vw;
    }
    
    .timeline-mask {
        left: 27px; /* Adjusted position for mobile */
    }
    
    .timeline-dot {
        left: -55px;
        width: 32px;
        height: 32px;
        border-width: 2px;
        font-size: 0.9rem;
    }
    
    .timeline-step-title {
        font-size: 1.1rem;
    }
    
    .timeline-step-desc {
        font-size: 0.95rem;
    }
}

.finpad-highlight {
    background: var(--primary-lighter);
    border-radius: 24px;
    padding: var(--spacing-xl) var(--spacing-lg);
    color: var(--text-dark);
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 
        20px 20px 40px rgba(0, 0, 0, 0.15),
        -20px -20px 40px rgba(255, 255, 255, 0.7),
        inset 2px 2px 4px rgba(255, 255, 255, 0.3),
        inset -2px -2px 4px rgba(0, 0, 0, 0.05);
}

.finpad-highlight h2 { 
    margin-bottom: var(--spacing-md);
}

.finpad-highlight p { 
    color: var(--text-light); 
    margin-bottom: var(--spacing-lg);
    line-height: 1.7;
}


/* Target Groups Section */
.target-groups { padding: var(--spacing-xxl) 0; background: var(--primary-lighter); }

.target-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.target-item {
    background: var(--bg-white);
    padding: var(--spacing-lg);
    border-radius: 24px;
    text-align: center;
    box-shadow: 
        16px 16px 32px rgba(0, 0, 0, 0.15),
        -16px -16px 32px rgba(255, 255, 255, 0.7),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.target-icon { color: var(--primary-color); margin-bottom: var(--spacing-md); }
.target-item h2 { margin-bottom: var(--spacing-xs); }
.target-item h4 { color: var(--primary-color); font-size: 1.1rem; margin-bottom: var(--spacing-md); }

.target-item ul { list-style: none; padding: 0; margin-bottom: var(--spacing-md); text-align: left; }
.target-item ul li { padding: var(--spacing-xs) 0 var(--spacing-xs) 1.5rem; color: var(--text-light); position: relative; }
.target-groups .target-item ul li::before {
    content: "•" !important;
    position: absolute;
    left: 0;
    color: var(--accent-color) !important;
    font-size: 1.15em !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}
.target-item .btn { 
    margin-top: auto;
}

.target-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md) 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.mini-stat { text-align: center; }
.mini-stat .stat-number { display: block; font-size: 1.5rem; font-weight: 700; color: var(--primary-color); margin-bottom: 0.25rem; }
.mini-stat .stat-label { display: block; font-size: 0.85rem; color: var(--text-light); }

/* Projects Section */
.projects { padding: var(--spacing-xxl) 0; background: var(--primary-lighter); }

.projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.project-card {
    background: var(--bg-white);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 
        16px 16px 32px rgba(0, 0, 0, 0.15),
        -16px -16px 32px rgba(255, 255, 255, 0.7),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

.project-image { position: relative; overflow: hidden; height: 200px; background: var(--bg-light); }
.project-image img { width: 100%; height: 100%; object-fit: cover; }

.project-content { padding: var(--spacing-lg); }
.project-content h3 { color: var(--text-dark); margin-bottom: var(--spacing-xs); font-size: 1.25rem; }
.project-location { color: var(--text-light); font-size: 0.9rem; margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--border-color); }
.project-details { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.project-detail { display: flex; justify-content: space-between; align-items: center; }
.detail-label { color: var(--text-light); font-size: 0.9rem; }
.detail-value { color: var(--text-dark); font-weight: 600; font-size: 0.95rem; }

.projects-summary { margin-top: var(--spacing-xl); padding-top: var(--spacing-xl); border-top: 2px solid var(--border-color); }
.summary-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg); }

/* About Us Section */
.about-us { 
    padding: 0 0 var(--spacing-xxl) 0;
    background: var(--primary-lighter);
    position: relative;
}

/* Wir Header Container with Background */
.wir-header-container {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: var(--spacing-xxl) calc(50vw - 50%) var(--spacing-lg);
    background: linear-gradient(rgba(0, 88, 88, 0.50), rgba(0, 88, 88, 0.50)), url('images/backgrounds/team.jpg') center/cover no-repeat;
    background-attachment: scroll; /* Default to scroll for mobile */
    position: relative;
}

/* Wir Intro Glassbox - matching team member styling */
.wir-intro-glassbox {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(15px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    padding: var(--spacing-lg);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    transition: var(--transition);
}

.wir-intro-glassbox:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.wir-intro-glassbox h1 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.wir-intro-glassbox p {
    color: var(--text-dark);
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

.team-section { 
    margin-bottom: var(--spacing-xxl);
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
    background: linear-gradient(rgba(0, 88, 88, 0.50), rgba(0, 88, 88, 0.50)), url('images/backgrounds/team.jpg') center/cover no-repeat;
    background-attachment: scroll; /* Default to scroll for mobile */
    position: relative;
}

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

.team-member {
    position: relative;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(15px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    cursor: pointer;
}

.member-card { text-align: center; padding: var(--spacing-md); }
.member-image { width: 100%; display: block; margin-bottom: var(--spacing-md); }
.member-image img { width: 150px; height: 150px; object-fit: cover; border-radius: 12px; margin: 0 auto; display: block; }
.member-basic-info h3 { color: var(--text-dark); margin-bottom: var(--spacing-xs); font-size: 1.1rem; }
.member-title { color: var(--primary-color); font-weight: 500; font-size: 0.9rem; margin: 0; }

.member-details {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 400px;
    max-width: 90vw;
    min-height: 200px;
    background: var(--bg-white);
    padding: var(--spacing-lg);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
    max-height: 80vh;
    overflow-y: auto;
    margin-top: var(--spacing-sm);
}

.team-member:has(.member-details):hover .member-details { 
    opacity: 1; 
    visibility: visible;
    z-index: 1001;
}
.member-details-content h3 { color: var(--text-dark); margin-bottom: var(--spacing-xs); }
.member-details-content .member-title { color: var(--primary-color); font-weight: 500; margin-bottom: var(--spacing-md); display: block; }
.member-bio { color: var(--text-light); margin-bottom: var(--spacing-md); line-height: 1.6; }
.member-quote { border-left: 3px solid var(--primary-color); padding-left: var(--spacing-md); color: var(--text-dark); font-style: italic; margin-top: var(--spacing-md); }

.supervisory-board { margin-top: var(--spacing-xl); }

/* Partners Subsection */
.partners-subsection { 
    margin-bottom: var(--spacing-xxl);
}

/* Mobile Optimization for Network Diagram */
.network-mobile-image {
    display: block;
    width: 100%;
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.network-mobile-image img {
    max-width: 100%;
    height: auto;
}

.network-diagram-container {
    display: none;
}

.network-diagram {
    max-width: 900px;
    margin: 0 auto var(--spacing-xl);
}

.network-top-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

.network-connections {
    position: relative;
    height: 80px;
    width: 100%;
    margin-top: -10px; /* Overlap slightly with box shadow */
    margin-bottom: -10px;
    z-index: 20; /* Fixed Z-Index issue */
    display: none; /* Hidden on mobile */
    /* Handled by children for drawing animation */
}

.connection-line-left,
.connection-line-right {
    position: absolute;
    top: 0;
    height: calc(50% + 1px);
    width: 3px;
    background-color: var(--primary-color);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s ease;
}

.connection-line-left { left: 25%; }
.connection-line-right { left: 75%; }

.connections-visible .connection-line-left,
.connections-visible .connection-line-right {
    transform: scaleY(1);
    transition-delay: 0s;
}

.connection-line-horizontal-1 {
    position: absolute;
    top: 50%;
    left: calc(25% - 1px);
    width: calc(25% + 2px);
    height: 3px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left; /* Outside (Left) to Center */
    transition: transform 0.5s ease;
    margin-top: -1.5px;
}

.connection-line-horizontal-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(25% + 1px);
    height: 3px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: right; /* Outside (Right) to Center */
    transition: transform 0.5s ease;
    margin-top: -1.5px;
}

.connections-visible .connection-line-horizontal-1,
.connections-visible .connection-line-horizontal-2 {
    transform: scaleX(1);
    transition-delay: 0.5s;
}

.connection-line-vertical {
    position: absolute;
    top: 50%;
    left: 50%;
    height: calc(50% + 5px);
    width: 3px;
    background-color: var(--primary-color);
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
    transition: transform 0.5s ease;
}

.connections-visible .connection-line-vertical {
    transform: translateX(-50%) scaleY(1);
    transition-delay: 1.0s;
}

.connection-arrow {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid var(--primary-color);
    z-index: 20; /* Fixed Z-Index */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.connections-visible .connection-arrow {
    opacity: 1;
    transition-delay: 1.5s;
}

.network-bottom-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
}

.network-diagram .partner-item {
    width: 35%;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    min-height: 0; /* Override general min-height */
    padding: var(--spacing-md);
    display: flex;
    justify-content: center;
    align-items: center;
}

.network-bottom-row .partner-item {
    width: 35%; /* Side boxes */
}

.network-bottom-row .partner-item:nth-child(2) {
    width: 56.7%; /* RECON */
}

.network-bottom-row-2 {
    display: flex;
    justify-content: center;
}

.network-connections-2 {
    position: relative;
    height: 80px;
    width: 100%;
    margin-top: -10px;
    margin-bottom: -80px;
    z-index: 20; /* Fixed Z-Index */
    display: none;
}

.connection-line-vertical-simple {
    position: absolute;
    top: 0;
    left: 50%;
    height: calc(100% + 5px);
    width: 3px;
    background-color: var(--primary-color);
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
    transition: transform 0.5s ease;
}

.connections-visible .connection-line-vertical-simple {
    transform: translateX(-50%) scaleY(1);
    transition-delay: 1.8s;
}

.connection-arrow-simple {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid var(--primary-color);
    z-index: 20; /* Fixed Z-Index */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.connections-visible .connection-arrow-simple {
    opacity: 1;
    transition-delay: 2.3s;
}

.network-connections-sides {
    position: relative;
    height: 80px;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    z-index: 20; /* Fixed Z-Index */
    display: none;
}

/* Side connections animation: Top-down flow */
.connection-line-vertical-left {
    position: absolute;
    top: -50px;
    left: calc(18% - 30px);
    height: calc(50% + 50px);
    width: 3px;
    background-color: var(--primary-color);
    transform: scaleY(0);
    transform-origin: top; /* Changed to top-down */
    transition: transform 0.5s ease;
}

.connections-visible .connection-line-vertical-left {
    transform: scaleY(1);
    transition-delay: 0.5s;
}

.connection-line-horizontal-left {
    position: absolute;
    top: 50%;
    left: calc(18% - 30px);
    width: calc(32% + 30px);
    height: 3px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
    margin-top: -1.5px;
}

.connections-visible .connection-line-horizontal-left {
    transform: scaleX(1);
    transition-delay: 1.0s;
}

.connection-line-vertical-right {
    position: absolute;
    top: -50px;
    right: calc(18% - 30px);
    height: calc(50% + 50px);
    width: 3px;
    background-color: var(--primary-color);
    transform: scaleY(0);
    transform-origin: top; /* Changed to top-down */
    transition: transform 0.5s ease;
}

.connections-visible .connection-line-vertical-right {
    transform: scaleY(1);
    transition-delay: 0.5s;
}

.connection-line-horizontal-right {
    position: absolute;
    top: 50%;
    right: calc(18% - 30px);
    width: calc(32% + 30px);
    height: 3px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease;
    margin-top: -1.5px;
}

.connections-visible .connection-line-horizontal-right {
    transform: scaleX(1);
    transition-delay: 1.0s;
}

/* Z-Index Hierarchy for correct overlapping */
.network-top-row { position: relative; z-index: 50; }
.network-top-row .partner-item:hover { z-index: 55; }

.network-connections { z-index: 40 !important; }
.network-connections-sides { z-index: 25 !important; }

.network-bottom-row { position: relative; z-index: 30; }
.network-bottom-row .partner-item:hover { z-index: 35; }

.network-connections-2 { z-index: 20 !important; }

.network-bottom-row-2 { position: relative; z-index: 10; }
.network-bottom-row-2 .partner-item:hover { z-index: 15; }

.partners-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.partner-item { 
    text-align: center; 
    padding: var(--spacing-lg); 
    background: var(--bg-white); 
    border-radius: 24px;
    box-shadow: 
        16px 16px 32px rgba(0, 0, 0, 0.15),
        -16px -16px 32px rgba(255, 255, 255, 0.7),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    min-height: 245px;
    position: relative;
    z-index: 1;
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
}

.partner-item:hover {
    transform: translateY(-5px);
    box-shadow: 
        20px 20px 40px rgba(0, 0, 0, 0.2),
        -20px -20px 40px rgba(255, 255, 255, 0.8),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(0, 0, 0, 0.05);
    z-index: 10;
}

.partner-item h4 { margin-bottom: var(--spacing-md); color: var(--text-dark); }
.partner-logo { display: flex; justify-content: center; align-items: center; min-height: 120px; margin: var(--spacing-lg) 0; flex: 1; }
.partner-logo img { max-width: 250px; width: 100%; height: auto; object-fit: contain; }

.partner-logos {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    align-items: center;
    justify-content: center;
    margin: var(--spacing-lg) 0;
    flex: 1;
}

.partner-logos img { max-width: 220px; width: 100%; height: auto; object-fit: contain; }
.partner-logos img:first-child { max-width: 180px; }

.partner-benefits { margin-top: var(--spacing-xl); }
.partner-benefits h4 { text-align: center; margin-bottom: var(--spacing-md); color: var(--text-dark); font-size: var(--font-size-h4); }
.partner-benefits p { text-align: center; max-width: 800px; margin: 0 auto var(--spacing-lg); }

.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); }
.benefit-item { text-align: center; padding: var(--spacing-md); }
.benefit-icon { color: var(--primary-color); margin-bottom: var(--spacing-sm); }
.benefit-item h5 { color: var(--text-dark); margin-bottom: var(--spacing-xs); font-size: 1.1rem; }
.benefit-item p { color: var(--text-light); font-size: var(--font-size-small); }

/* Values Subsection */
.values-subsection { 
    margin-bottom: var(--spacing-xxl);
    padding: 0 var(--spacing-md);
}
.values-content { max-width: 900px; margin: 0 auto; }
.values-intro { text-align: center; margin-bottom: var(--spacing-xl); color: var(--text-light); }
.values-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); }

.value-item {
    background: var(--bg-white);
    padding: var(--spacing-lg);
    border-radius: 24px;
    box-shadow: 
        16px 16px 32px rgba(0, 0, 0, 0.15),
        -16px -16px 32px rgba(255, 255, 255, 0.7),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(0, 0, 0, 0.05);
}

.value-item h4 { color: var(--primary-color); margin-bottom: var(--spacing-xs); font-size: 1.1rem; font-weight: 700; }
.value-item p { margin: 0; }

/* Testimonials Section */
.testimonials { 
    padding: var(--spacing-xxl) 0; 
    background: linear-gradient(rgba(0, 88, 88, 0.50), rgba(0, 88, 88, 0.50)), url('images/backgrounds/Kunden.jpg') center/cover no-repeat;
    background-attachment: scroll; /* Default to scroll for mobile */
    position: relative;
}

/* Testimonials Header Glassbox */
.testimonials-header-glassbox {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(15px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    padding: var(--spacing-lg);
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-xl);
    position: relative;
    z-index: 2;
    transition: var(--transition);
}

.testimonials-header-glassbox:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.testimonials-header-glassbox h1 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.testimonials-header-glassbox p {
    color: var(--text-dark);
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(15px);
    padding: var(--spacing-lg);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

.testimonial-text { color: var(--text-dark); font-style: italic; margin-bottom: var(--spacing-md); }
.testimonial-author { text-align: right; }
.testimonial-author strong { display: block; color: var(--text-dark); margin-bottom: 0.25rem; }
.testimonial-author span { color: var(--text-light); font-size: var(--font-size-small); }

/* News Section */
.news { 
    padding: var(--spacing-xxl) 0; 
    background: var(--primary-lighter); 
}

/* Mobile-first styling for News section */
@media (max-width: 767px) {
    .news {
        padding: var(--spacing-lg) 0 var(--spacing-md) 0;
    }
    
    .news .section-header {
        margin-bottom: var(--spacing-md);
    }
    
    .news .section-title {
        font-size: clamp(1.5rem, 4vw, 2rem);
        margin-bottom: var(--spacing-sm);
    }
    
    .news .section-subtitle {
        flex-direction: column;
        gap: var(--spacing-sm);
        font-size: 0.95rem;
    }
}

.linkedin-post {
    background: var(--primary-lighter);
    padding-bottom: var(--spacing-xxl);
}

/* Mobile-first styling for LinkedIn posts */
@media (max-width: 767px) {
    .linkedin-post {
        padding-bottom: var(--spacing-lg);
    }
}

.linkedin-posts-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    padding: 40px 0;
    max-width: 1800px;
    margin: 0 auto;
}

/* Mobile optimization for LinkedIn posts container */
@media (max-width: 767px) {
    .linkedin-posts-container {
        gap: var(--spacing-xl);
        padding: var(--spacing-lg) var(--spacing-sm);
    }
}

.linkedin-post-card {
    background: var(--bg-white);
    border-radius: 24px;
    box-shadow: 
        16px 16px 32px rgba(0, 0, 0, 0.15),
        -16px -16px 32px rgba(255, 255, 255, 0.7),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    overflow: hidden;
}

/* Mobile optimization for LinkedIn post cards */
@media (max-width: 767px) {
    .linkedin-post-card {
        border-radius: 16px;
        box-shadow: 
            8px 8px 16px rgba(0, 0, 0, 0.12),
            -8px -8px 16px rgba(255, 255, 255, 0.7),
            inset 1px 1px 2px rgba(255, 255, 255, 0.3),
            inset -1px -1px 2px rgba(0, 0, 0, 0.05);
        overflow: auto;
    }
}

.linkedin-post-card iframe {
    width: 100%;
    height: 700px;
    border: none;
    display: block;
    overflow: auto;
}

/* Mobile optimization for LinkedIn iframes */
@media (max-width: 767px) {
    .linkedin-post-card iframe {
        height: 600px;
        min-height: 500px;
        overflow: auto;
    }
}

/* Extra optimization for very small screens */
@media (max-width: 480px) {
    .linkedin-post-card iframe {
        height: 550px;
        min-height: 450px;
        overflow: auto;
    }
}

.linkedin-link {
    display: inline-block;
    margin-top: var(--spacing-md);
    transition: var(--transition);
}

/* Mobile optimization for LinkedIn link */
@media (max-width: 767px) {
    .linkedin-link {
        margin-top: var(--spacing-sm);
    }
}

.linkedin-logo {
    height: 30px;
    width: auto;
    transition: var(--transition);
}

/* Mobile optimization for LinkedIn logo */
@media (max-width: 767px) {
    .linkedin-logo {
        height: 26px;
    }
}

.linkedin-link:hover .linkedin-logo {
    transform: translateY(-2px);
    opacity: 0.8;
}

.news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

.news-item {
    background: var(--bg-white);
    padding: var(--spacing-lg);
    border-radius: 24px;
    box-shadow: 
        16px 16px 32px rgba(0, 0, 0, 0.15),
        -16px -16px 32px rgba(255, 255, 255, 0.7),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.news-date { color: var(--accent-color); font-size: var(--font-size-small); font-weight: 600; margin-bottom: var(--spacing-xs); }
.news-item h3 { color: var(--text-dark); margin-bottom: var(--spacing-sm); }
.news-link { color: var(--primary-color); font-weight: 500; margin-top: auto; padding-top: var(--spacing-sm); display: inline-block; }
.news-link:hover { color: var(--accent-color); }

/* Karriere Section */
.karriere { padding: var(--spacing-xxl) 0; background: var(--primary-lighter); }
.karriere-intro { max-width: 900px; margin: 0 auto var(--spacing-xl); text-align: center; }
.karriere-intro p { margin-bottom: var(--spacing-md); color: var(--text-light); line-height: 1.8; }

.job-listings {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.job-card {
    background: var(--bg-white);
    padding: var(--spacing-lg);
    border-radius: 24px;
    box-shadow: 
        16px 16px 32px rgba(0, 0, 0, 0.15),
        -16px -16px 32px rgba(255, 255, 255, 0.7),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.job-header h4 { color: var(--primary-color); margin-bottom: var(--spacing-md); font-size: 1.25rem; }
.job-description { margin-bottom: var(--spacing-lg); flex-grow: 1; }
.job-description p { color: var(--text-light); line-height: 1.7; }
.job-card .btn { 
    width: 100%; 
    margin-top: auto;
}

.karriere-contact {
    max-width: 800px;
    margin: var(--spacing-xl) auto 0;
    padding: var(--spacing-lg);
    text-align: center;
}

.karriere-contact p { margin-bottom: var(--spacing-sm); color: var(--text-light); }
.karriere-contact a { color: var(--primary-color); font-weight: 500; }
.karriere-note { font-size: var(--font-size-small); font-style: italic; color: var(--text-light); margin-bottom: 0; }

/* Contact Section - Neumorphism Design */
.contact { padding: var(--spacing-xxl) 0; background: var(--primary-lighter); }
.contact-content { max-width: 600px; margin: 0 auto; }

.form-group { margin-bottom: var(--spacing-sm); }

.form-group input,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: none;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-dark);
    font: var(--font-weight-body) var(--font-size-body)/1 var(--font-family);
    box-shadow: 
        inset 10px 10px 20px rgba(0, 0, 0, 0.15),
        inset -10px -10px 20px rgba(255, 255, 255, 0.7),
        inset 0 0 8px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-light);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    box-shadow: 
        inset 8px 8px 16px rgba(0, 0, 0, 0.2),
        inset -8px -8px 16px rgba(255, 255, 255, 0.8),
        inset 0 0 12px rgba(0, 0, 0, 0.12),
        0 0 0 4px rgba(0, 88, 88, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.1);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    font-size: var(--font-size-small);
    color: var(--text-light);
}

.checkbox-label input[type="checkbox"] { width: auto; margin-right: var(--spacing-xs); margin-top: 3px; }

.file-upload-label {
    display: block;
    padding: var(--spacing-md);
    border: none;
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 
        inset 8px 8px 16px rgba(0, 0, 0, 0.12),
        inset -8px -8px 16px rgba(255, 255, 255, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.05);
}

.file-upload-label:hover { 
    box-shadow: 
        inset 6px 6px 12px rgba(0, 0, 0, 0.15),
        inset -6px -6px 12px rgba(255, 255, 255, 0.7),
        0 0 0 3px rgba(0, 88, 88, 0.15),
        0 3px 6px rgba(0, 0, 0, 0.08);
}
.file-upload-label input[type="file"] { display: none; }
.file-upload-text { color: var(--text-light); font-size: var(--font-size-body); }
.file-upload-label:hover .file-upload-text { color: var(--primary-color); }

.file-list { margin-top: var(--spacing-sm); }
.file-item { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: var(--spacing-sm) var(--spacing-md); 
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    margin-bottom: var(--spacing-sm);
    box-shadow: 
        6px 6px 12px rgba(0, 0, 0, 0.08),
        -6px -6px 12px rgba(255, 255, 255, 0.5),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3);
    transition: var(--transition);
}
.file-item:hover {
    box-shadow: 
        4px 4px 8px rgba(0, 0, 0, 0.1),
        -4px -4px 8px rgba(255, 255, 255, 0.6),
        inset 1px 1px 2px rgba(255, 255, 255, 0.4);
}
.file-item-name { flex: 1; color: var(--text-dark); font-size: var(--font-size-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item-remove { 
    background: none; 
    border: none; 
    color: var(--primary-color); 
    cursor: pointer; 
    font-size: 1.2rem; 
    padding: 0 var(--spacing-xs); 
    transition: var(--transition);
    border-radius: 8px;
}
.file-item-remove:hover { 
    color: #c0392b;
    background: rgba(192, 57, 43, 0.1);
}


/* Contact Info Cards - Neumorphism */
.contact-item {
    background: var(--primary-lighter);
    padding: var(--spacing-md);
    border-radius: 20px;
    box-shadow: 
        12px 12px 24px rgba(0, 0, 0, 0.12),
        -12px -12px 24px rgba(255, 255, 255, 0.8),
        inset 1px 1px 2px rgba(255, 255, 255, 0.5),
        inset -1px -1px 2px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.contact-item:hover {
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.15),
        -8px -8px 16px rgba(255, 255, 255, 0.9),
        inset 1px 1px 2px rgba(255, 255, 255, 0.6),
        inset -1px -1px 2px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Contact Form Neumorphism */
.contact-form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Form Message Styles */
.form-message {
    padding: var(--spacing-md);
    border-radius: 16px;
    text-align: center;
    font-size: var(--font-size-body);
    font-weight: 500;
    line-height: 1.5;
    transition: var(--transition);
    animation: fadeInUp 0.4s ease;
}

.form-message.success {
    background: rgba(46, 204, 113, 0.15);
    color: #27ae60;
    box-shadow: 
        inset 8px 8px 16px rgba(46, 204, 113, 0.1),
        inset -8px -8px 16px rgba(255, 255, 255, 0.8),
        0 4px 12px rgba(46, 204, 113, 0.2);
    border: 1px solid rgba(46, 204, 113, 0.3);
}

.form-message.error {
    background: rgba(231, 76, 60, 0.15);
    color: #c0392b;
    box-shadow: 
        inset 8px 8px 16px rgba(231, 76, 60, 0.1),
        inset -8px -8px 16px rgba(255, 255, 255, 0.8),
        0 4px 12px rgba(231, 76, 60, 0.2);
    border: 1px solid rgba(231, 76, 60, 0.3);
}

/* Submit Button Disabled State */
.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: 
        4px 4px 8px rgba(0, 0, 0, 0.2),
        -4px -4px 8px rgba(255, 255, 255, 0.15),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(0, 0, 0, 0.1);
}

.btn-primary:disabled:hover {
    transform: none;
    box-shadow: 
        4px 4px 8px rgba(0, 0, 0, 0.2),
        -4px -4px 8px rgba(255, 255, 255, 0.15),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(0, 0, 0, 0.1);
}

/* Newsletter Section - Neumorphism Design */
.newsletter { 
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); 
    padding: var(--spacing-xl) 0; 
}

.newsletter-content { 
    text-align: center; 
    color: var(--text-white);
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-lg);
    background: rgba(255, 255, 255, 0.31);
    border-radius: 32px;
    box-shadow: 
        20px 20px 40px rgba(0, 0, 0, 0.3),
        -20px -20px 40px rgba(255, 255, 255, 0.15),
        inset 2px 2px 4px rgba(255, 255, 255, 0.1),
        inset -2px -2px 4px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.newsletter-content h3 { 
    color: var(--text-white); 
    margin-bottom: var(--spacing-sm);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.newsletter-content p { 
    color: rgba(255, 255, 255, 0.9); 
    margin-bottom: var(--spacing-lg);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
}

.newsletter-form { 
    display: flex; 
    gap: var(--spacing-sm); 
    max-width: 500px; 
    margin: 0 auto; 
    flex-direction: column; 
}

.newsletter-form input { 
    flex: 1; 
    padding: var(--spacing-md);
    border: none; 
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-dark);
    font: var(--font-weight-body) var(--font-size-body)/1 var(--font-family);
    box-shadow: 
        inset 12px 12px 24px rgba(0, 0, 0, 0.25),
        inset -12px -12px 24px rgba(255, 255, 255, 0.8),
        inset 0 0 10px rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

.newsletter-form input::placeholder {
    color: var(--text-light);
}

.newsletter-form input:focus {
    outline: none;
    box-shadow: 
        inset 10px 10px 20px rgba(0, 0, 0, 0.3),
        inset -10px -10px 20px rgba(255, 255, 255, 0.9),
        inset 0 0 15px rgba(0, 0, 0, 0.15),
        0 0 0 5px rgba(230, 206, 157, 0.5),
        0 6px 12px rgba(0, 0, 0, 0.15);
}

.newsletter-form .btn { 
    white-space: nowrap;
}

/* Footer */
.footer { background: var(--primary-color); color: var(--text-white); padding: var(--spacing-xl) 0 var(--spacing-lg); }
.footer p { color: var(--text-white); }
.footer-content { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.footer-column h4 { color: var(--accent-color); margin-bottom: var(--spacing-md); }
.footer-column p { color: var(--text-white); }
.footer-column ul { list-style: none; padding: 0; }
.footer-column li { margin-bottom: var(--spacing-xs); }
.footer-column a { color: var(--text-white); }
.footer-column a:hover { color: var(--accent-color); }

.footer-bottom { text-align: center; padding-top: var(--spacing-lg); border-top: 1px solid rgba(255, 255, 255, 0.15); color: var(--text-white); }
.footer-bottom p { color: var(--text-white); }

/* Stats Section */
.stat { text-align: center; }
.stat-number { font-size: 2.5rem; font-weight: 700; color: var(--primary-color); }
.stat-label { color: var(--text-light); }

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Tablet Styles (768px and up) */
@media (min-width: 768px) {
    .network-mobile-image { display: none; }
    .network-diagram-container { display: block; }

    .nav-toggle { display: none; }
    .nav-menu { position: static; width: auto; height: auto; background: transparent; flex-direction: row; padding: 0; left: 0; gap: var(--spacing-md); align-items: center; }
    .nav-menu li { margin: 0; }
    .nav-cta { margin-top: 0; margin-left: var(--spacing-md); }
    .target-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .process-steps { grid-template-columns: repeat(3, 1fr); }
    .team-core { grid-template-columns: 1fr; }
    .team-member.featured { display: grid; grid-template-columns: 1fr 2fr; gap: var(--spacing-lg); align-items: start; }
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
    .news-grid { grid-template-columns: repeat(3, 1fr); }
    .newsletter-form { flex-direction: row; }
    .footer-content { grid-template-columns: repeat(4, 1fr); }
    .partners-grid { grid-template-columns: repeat(2, 1fr); }
    .partner-logos { flex-direction: row; gap: var(--spacing-xl); }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .job-listings { grid-template-columns: repeat(3, 1fr); }
    
    /* LinkedIn posts responsive - match job listings layout */
    .linkedin-posts-container {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Network Diagram Responsive */
    .network-top-row { grid-template-columns: 1fr 1fr; }
    .network-connections { display: block; }
    .network-bottom-row .partner-item { width: 17.5%; } /* Side boxes (17.5%) on desktop */
    .network-bottom-row .partner-item:nth-child(2) { width: 28.35%; } /* RECON (28.35%) on desktop */
    
    .network-connections-2 { display: block; }
    .network-connections-sides { display: block; }
    .network-bottom-row-2 .partner-item { width: 17.5%; } /* Matches Top Box size on desktop */
}

/* Desktop Styles (1024px and up) */
@media (min-width: 1024px) {
    .hero { min-height: 90vh; }
    .projects-grid { grid-template-columns: repeat(3, 1fr); }
    .values-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Large Desktop Styles (1440px and up) */
@media (min-width: 1440px) {
    .container { max-width: 1320px; }
}

/* Enable parallax backgrounds on desktop (1024px+) where performance is better */
@media (min-width: 1024px) {
    .wir-header-container,
    .team-section,
    .testimonials {
        background-attachment: fixed;
    }
}