/* --- CSS Styles --- */

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

/* --- THEME VARIABLES --- */
:root {
    /* Color Palette */
    --logistick-blue: #005cb9;
    --logistick-dark-blue: #0a1930;
    --mfcinema-green: #8CC63F;
    --mfcinema-dark-green: #2E8B57;
    --accent-orange: #FF5733;
    --accent-gold: #D4AF37;
    --white: #ffffff;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --black: #000000;

    /* Dark Theme (Default) */
    --bg-primary: #121212;
    --bg-secondary: #0A0A0A;
    --bg-card: #1E1E1E;
    --bg-card-highlight: #282828;
    --bg-hero-gradient-start: rgba(0, 25, 50, 0.8);
    --bg-hero-gradient-end: rgba(10, 10, 10, 0.8);
    --text-primary: var(--gray-100);
    --text-secondary: var(--gray-400);
    --text-heading: var(--white);
    --text-hero: var(--white);
    --text-link: var(--logistick-blue);
    --text-link-hover: var(--mfcinema-green);
    --border-color: var(--gray-700);
    --divider-color: #444;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --card-shadow-color: rgba(0, 0, 0, 0.3);
    --card-hover-shadow-color: rgba(0, 0, 0, 0.4);
    --team-img-filter: grayscale(80%);
    --team-img-hover-filter: grayscale(0%);
    --parallax-opacity: 0.08;
    --req-request-bg: rgba(0, 0, 0, 0.3);
    --req-request-text: var(--gray-300);
    --req-request-border: var(--mfcinema-green);
    --enhancement-bg: rgba(30, 30, 30, 0.95);
    --enhancement-marker-color: var(--logistick-blue);
    --nav-menu-bg: rgba(10, 10, 10, 0.8);
    --header-scrolled-bg: rgba(10, 10, 10, 0.95);
    --btn-secondary-text: var(--accent-gold);
    --btn-secondary-border: var(--accent-gold);
    --btn-secondary-bg-hover: var(--accent-gold);
    --btn-secondary-text-hover: var(--bg-secondary);
    --accent-1: var(--mfcinema-green);
    --accent-2: var(--accent-gold);
    --accent-3: var(--logistick-blue);
    --hero-text-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
    --client-logo-filter: grayscale(100%) opacity(0.7); /* Grayscale + slight fade */

    /* Transitions */
    --transition-slow: 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    --transition-medium: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    --transition-fast: 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

body.light-theme {
    /* Light Theme Overrides */
    --bg-primary: var(--gray-100);
    --bg-secondary: var(--white);
    --bg-card: var(--white);
    --bg-card-highlight: var(--gray-100);
    --bg-hero-gradient-start: rgba(200, 220, 255, 0.85);
    --bg-hero-gradient-end: rgba(240, 240, 240, 0.85);
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-heading: var(--gray-900);
    --text-hero: var(--gray-900);
    --text-link: var(--logistick-blue);
    --text-link-hover: var(--logistick-blue);
    --border-color: var(--gray-300);
    --divider-color: var(--gray-300);
    --shadow-color: rgba(0, 0, 0, 0.15);
    --card-shadow-color: rgba(0, 0, 0, 0.1);
    --card-hover-shadow-color: rgba(0, 0, 0, 0.15);
    --team-img-filter: grayscale(0%);
    --team-img-hover-filter: grayscale(0%);
    --parallax-opacity: 0.1;
    --req-request-bg: rgba(0, 92, 185, 0.05);
    --req-request-text: var(--gray-700);
    --req-request-border: var(--logistick-blue);
    --enhancement-bg: rgba(212, 175, 55, 0.08); /* Light gold bg */
    --enhancement-marker-color: var(--accent-gold); /* Gold marker */
    --nav-menu-bg: rgba(255, 255, 255, 0.8);
    --header-scrolled-bg: rgba(255, 255, 255, 0.95);
    --btn-secondary-text: var(--accent-gold);
    --btn-secondary-border: var(--accent-gold);
    --btn-secondary-bg-hover: var(--accent-gold);
    --btn-secondary-text-hover: var(--white);
    --accent-1: var(--logistick-blue);
    --accent-2: var(--accent-gold);
    --accent-3: var(--logistick-blue);
    --hero-text-shadow: none;
    --client-logo-filter: grayscale(100%) opacity(0.8); /* Grayscale + slight fade */
}
/* --- END THEME VARIABLES --- */

html {
    scroll-behavior: smooth;
}

/* Updated Body Styles */
body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    transition: background-color var(--transition-medium), color var(--transition-medium);
    /* Add position: relative for absolute positioning context (for nav menu) */
    position: relative;
    /* REMOVED padding-bottom - JS handles overlap now */
}


h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-heading);
}

p {
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
    color: var(--text-secondary);
}
/* Prevent bottom margin on last p in a container */
p:last-child {
     margin-bottom: 0;
}

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--text-link-hover);
}

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

/* Header Styles */
header {
    background-color: var(--bg-secondary);
    box-shadow: 0 2px 10px var(--shadow-color);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: all var(--transition-medium);
}

header.scrolled {
    padding: 0.5rem 0;
    background-color: var(--header-scrolled-bg);
    backdrop-filter: blur(10px);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.logo {
    height: 50px;
    transition: all var(--transition-medium);
}
.logo img {
     height: 100%;
     width: auto;
     display: block;
}

header.scrolled .logo {
    height: 40px;
}

.divider {
    height: 40px;
    width: 2px;
    background-color: var(--divider-color);
}

.view-pdf-btn {
    background-color: transparent;
    border: 2px solid var(--btn-secondary-border);
    color: var(--btn-secondary-text);
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    font-weight: 500;
    transition: all var(--transition-medium);
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    white-space: nowrap; /* Prevent wrapping */
}
.view-pdf-btn i, .view-pdf-btn .material-symbols-outlined { /* Apply to both icon types */
     margin-right: 0.5em; /* Default margin */
     transition: margin var(--transition-fast);
     font-size: 1.1em; /* Adjust icon size if needed */
     vertical-align: middle; /* Align icon better */
}

.view-pdf-btn:hover {
    background-color: var(--btn-secondary-bg-hover);
    color: var(--btn-secondary-text-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-color);
}

#theme-toggle-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0.5rem;
    margin-left: 1rem;
    transition: color var(--transition-fast), transform var(--transition-fast);
    line-height: 1;
}
#theme-toggle-btn:hover {
    color: var(--text-primary);
    transform: scale(1.1);
}

/* Hero Section */
.hero {
    min-height: 100vh; /* Ensure it takes full viewport height */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Default: Align content left */
    /* Default background (Dark Mode) */
    background:
        linear-gradient(135deg, var(--bg-hero-gradient-start), var(--bg-hero-gradient-end)),
        url('bgtop.png') no-repeat center center / cover; /* Default: center/cover */
    color: var(--text-hero);
    position: relative;
    overflow: hidden;
    margin-top: 80px; /* Adjust based on final header height */
    transition: background var(--transition-medium), justify-content var(--transition-medium);
}

/* Light Theme Hero Override */
body.light-theme .hero {
     background:
        linear-gradient(135deg, var(--bg-hero-gradient-start), var(--bg-hero-gradient-end)),
        url('bgtop2.png') no-repeat right center / 150% auto;
     justify-content: flex-end; /* Align content right */
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    /* text-align: left; /* Default */
}
/* Text align right for light mode hero content */
body.light-theme .hero-content {
     text-align: right;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-hero);
    /* opacity: 0; */ /* Let GSAP handle animation */
    /* transform: translateY(30px); */ /* Let GSAP handle animation */
    /* animation: fadeInUp 1s forwards 0.5s; */ /* Let GSAP handle animation */
    line-height: 1.2;
    text-shadow: var(--hero-text-shadow);
}

.hero h1 span {
    color: var(--accent-1);
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    color: var(--text-hero);
    /* opacity: 0; */ /* Let GSAP handle animation */
    /* transform: translateY(30px); */ /* Let GSAP handle animation */
    /* animation: fadeInUp 1s forwards 0.8s; */ /* Let GSAP handle animation */
    text-shadow: var(--hero-text-shadow);
}
/* Ensure last p in hero has margin */
.hero p:last-child {
     margin-bottom: 2rem;
}

/* Sections */
main { /* Wrap sections in main for semantic structure */
    display: block; /* Ensure main behaves like a block element */
}

section {
    padding: 5rem 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--text-heading);
    position: relative;
    padding-bottom: 1rem;
    /* opacity: 0; */ /* Let GSAP handle animation */
    /* transform: translateY(20px); */ /* Let GSAP handle animation */
    transition: color var(--transition-medium); /* Only transition color */
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0; /* Default left alignment */
    width: 80px;
    height: 4px;
    background: var(--accent-2);
    transition: background-color var(--transition-medium);
}
.section-title-icon {
    font-size: 0.9em; /* Relative size */
    color: var(--accent-2);
    transition: color var(--transition-medium);
    vertical-align: middle; /* May not be needed with flex */
}
/* Style for Google Material Symbols */
.section-title .material-symbols-outlined {
     font-size: 1.1em; /* Adjust size if needed */
     transition: color var(--transition-medium);
}
/* Adjust pseudo-element position based on icon presence */
.section-title i + span::after,
.section-title .material-symbols-outlined + span::after {
     left: 0; /* Ensure underline starts under text */
}

.title-container {
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

/* Executive Summary */
.exec-summary {
    background-color: var(--bg-card);
    box-shadow: 0 10px 30px var(--card-shadow-color);
    border-radius: 8px;
    padding: 3rem;
    margin-top: -100px; /* Pulls summary up over hero */
    position: relative;
    z-index: 10;
    border-left: 4px solid var(--accent-2);
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(30px); */ /* Let GSAP handle */
}
.exec-summary .section-title-icon { color: var(--accent-2); }

.exec-summary p {
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(30px); */ /* Let GSAP handle */
    transition: color var(--transition-medium); /* Animate color change */
    color: var(--text-secondary);
}
 .exec-summary p:last-child { margin-bottom: 0; }

/* Vision Section */
.vision {
    background-color: var(--bg-secondary);
    transition: background-color var(--transition-medium);
}

.vision::before { /* Decorative gradient */
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 92, 185, 0.03), transparent);
    pointer-events: none;
    z-index: 0;
    transition: background var(--transition-medium);
}
body.light-theme .vision::before {
     background: linear-gradient(to left, rgba(0, 92, 185, 0.02), transparent);
}

.vision-content {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    align-items: stretch; /* Make columns same height */
}

.vision-text {
    flex: 1; /* Take up remaining space */
    min-width: 300px;
}
.vision-text p:last-child { margin-bottom: 0; }

.vision-image {
    flex: 1; /* Take up available space */
    min-width: 300px;
    border-radius: 8px;
    box-shadow: 0 10px 30px var(--card-shadow-color);
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(50px); */ /* Let GSAP handle */
    transition: box-shadow var(--transition-medium), background-color var(--transition-medium);
    max-width: 100%; /* Ensure it doesn't overflow container */
    min-height: 400px;
    overflow: hidden; /* Hide iframe borders/scrollbars */
    display: flex; /* Allow iframe to fill */
    background-color: var(--bg-card); /* Background while loading */
}

.vision-image iframe {
    width: 100%;
    height: 100%;
    display: block; /* Remove extra space below iframe */
    border: none; /* Remove iframe border */
}

.vision-text p, .vision-text h3, .vision-text ul li {
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(30px); */ /* Let GSAP handle */
    transition: color var(--transition-medium); /* Only animate color */
}
.vision-text p { color: var(--text-secondary); }
.vision-text h3 { color: var(--text-heading); }

.vision-text ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem; /* Indentation for list */
    list-style-type: none; /* Remove default bullets */
}

.vision-text li {
    margin-bottom: 0.8rem;
    position: relative; /* For custom bullet positioning */
    padding-left: 1.5rem; /* Space for custom bullet */
    color: var(--text-secondary);
}

.vision-text li::before {
    content: '•'; /* Custom bullet */
    position: absolute;
    left: 0;
    color: var(--accent-1); /* Use accent color */
    font-size: 1.2rem;
    transition: color var(--transition-medium);
}

/* Solution Section */
.solution {
    background-color: var(--bg-primary);
    transition: background-color var(--transition-medium);
}

.solution::before { /* Decorative gradient */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to top, var(--bg-primary), transparent);
    pointer-events: none;
    z-index: 0;
    transition: background var(--transition-medium);
}

.solution .text-center {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 800px; /* Constrain width */
    margin-left: auto;
    margin-right: auto;
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(30px); */ /* Let GSAP handle */
    color: var(--text-secondary);
    transition: color var(--transition-medium);
}
 .solution .text-center p:last-child { margin-bottom: 0; }

.solution-card {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 5px 20px var(--card-shadow-color);
    transition: all var(--transition-medium); /* Animate all changes */
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(30px); */ /* Let GSAP handle */
    border-top: 3px solid transparent; /* For hover effect */
    margin-bottom: 2rem; /* Space between cards */
}

.solution-card:hover {
    transform: translateY(-10px) !important; /* Ensure hover lift overrides GSAP initial transform */
    box-shadow: 0 15px 30px var(--card-hover-shadow-color);
    background-color: var(--bg-card-highlight);
    border-color: var(--accent-1); /* Show accent border */
}

.solution-card i, .solution-card .material-symbols-outlined {
    font-size: 2.5rem;
    color: var(--accent-1);
    margin-bottom: 1rem;
    display: block;
    text-align: left; /* Align icon left */
    transition: color var(--transition-medium);
}

.solution-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-heading);
    transition: color var(--transition-medium);
}
.solution-card p { color: var(--text-secondary); margin-bottom: 0; transition: color var(--transition-medium);}

.solution-card ul {
    margin-top: 1rem;
    margin-left: 1.5rem; /* Indent list */
    list-style-position: outside; /* Bullets outside text */
}

.solution-card li {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    transition: color var(--transition-medium);
}

/* Architecture Section */
.architecture {
    background-color: var(--bg-secondary);
    transition: background-color var(--transition-medium);
}

.architecture-content {
    background-color: var(--bg-card);
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 10px 30px var(--card-shadow-color);
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(30px); */ /* Let GSAP handle */
    transition: all var(--transition-medium); /* Animate background, shadow */
    position: relative; /* Ensure content is above pseudo-elements */
    z-index: 1;
}

.architecture-content p {
    margin-bottom: 2rem;
    color: var(--text-secondary);
    transition: color var(--transition-medium);
}
.architecture-content p:last-child {
     margin-bottom: 0;
}

.architecture-content .highlight {
    color: var(--accent-2);
    font-weight: 500;
    transition: color var(--transition-medium);
}

/* Capabilities Section */
.capabilities {
    background-color: var(--bg-secondary); /* Match adjacent sections */
    transition: background-color var(--transition-medium);
}

.capabilities::before { /* Decorative gradient */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 80%, rgba(0, 92, 185, 0.04), transparent 50%);
    pointer-events: none;
    z-index: 0;
    transition: background var(--transition-medium);
}
body.light-theme .capabilities::before {
    background: radial-gradient(circle at 30% 80%, rgba(0, 92, 185, 0.02), transparent 50%);
}

.capabilities-intro {
    margin-bottom: 4rem;
    max-width: 900px; /* Constrain width */
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(30px); */ /* Let GSAP handle */
    position: relative; z-index: 1;
}
.capabilities-intro p { color: var(--text-secondary); transition: color var(--transition-medium);}
.capabilities-intro p:last-child {
     margin-bottom: 0;
}

.requirements-container {
    position: relative; /* For positioning child elements */
    padding-bottom: 3rem; /* Space at the bottom */
    z-index: 1;
}

.requirement-card {
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(80px); */ /* Let GSAP handle */
    /* transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); */ /* Let GSAP handle */
    margin-bottom: 5rem; /* Space between requirement groups */
    position: relative; /* For z-index stacking */
    /* will-change: transform, opacity; */ /* Let GSAP handle */
    background-color: transparent; /* Ensure no background conflicts */
}

.requirement-header {
    background-color: var(--bg-card);
    padding: 1.8rem 2rem;
    position: relative; /* For z-index stacking */
    border-radius: 8px;
    box-shadow: 0 5px 25px var(--card-shadow-color);
    z-index: 2; /* Keep header above content */
    transition: background-color var(--transition-medium), box-shadow var(--transition-medium);
}

.requirement-header h3 {
    margin-bottom: 0.8rem;
    color: var(--text-heading);
    font-size: 1.6rem;
    display: flex; /* Align icon and text */
    align-items: center;
    gap: 0.75rem;
    transition: color var(--transition-medium);
}
.requirement-title-icon {
    font-size: 0.9em;
    color: var(--accent-1);
    vertical-align: middle; /* Align icons better */
    transition: color var(--transition-medium);
}
/* Style for Google Material Symbols */
.requirement-title-icon.material-symbols-outlined {
     font-size: 1.1em; /* Adjust size if needed */
}

.requirement-header .accent {
    color: var(--accent-2); /* Highlight part of title */
    transition: color var(--transition-medium);
}

.requirement-request {
    background-color: var(--req-request-bg);
    padding: 1.2rem 1.5rem;
    font-style: italic;
    color: var(--req-request-text);
    border-left: 3px solid var(--req-request-border);
    margin-top: 1rem;
    border-radius: 0 4px 4px 0;
    transition: background-color var(--transition-medium), color var(--transition-medium), border-color var(--transition-medium);
}
.requirement-request p {
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: inherit; /* Inherit color from parent */
}

.requirement-content {
    position: relative; /* For z-index stacking */
    z-index: 1; /* Below header */
}

.approach-container, .enhancement-container {
    padding: 2rem;
    background-color: var(--bg-card);
    margin-top: 1.5rem; /* Space below header */
    border-radius: 8px;
    box-shadow: 0 5px 25px var(--card-shadow-color);
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(30px); */ /* Let GSAP handle */
    transition: all var(--transition-medium); /* Animate background, shadow */
                /* Opacity/transform handled by GSAP */
    /* will-change: transform, opacity; */ /* Let GSAP handle */
}

.enhancement-container {
    background-color: var(--enhancement-bg);
    /* transition-delay: 0.6s; */ /* Let GSAP handle delay */
}

.approach-container h4, .enhancement-container h4 {
    display: flex; /* Align marker and text */
    align-items: center;
    margin-bottom: 1.2rem;
    color: var(--text-heading);
    font-size: 1.3rem;
    transition: color var(--transition-medium);
}

.approach-container h4::before, .enhancement-container h4::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 0.8rem; /* Space marker and text */
    border-radius: 50%; /* Circular marker */
    transition: background-color var(--transition-medium);
}

.approach-container h4::before {
    background-color: var(--accent-1); /* Approach marker color */
}

.enhancement-container h4::before {
    background-color: var(--enhancement-marker-color); /* Enhancement marker color */
}

.approach-container ul, .enhancement-container ul {
    list-style: disc; /* Default bullet points */
    margin-left: 1.5rem; /* Indent list */
    padding-left: 0.5rem; /* Further indent text */
    color: var(--text-secondary);
    transition: color var(--transition-medium);
}
.approach-container li, .enhancement-container li {
    margin-bottom: 0.5rem;
}
.approach-container p, .enhancement-container p {
     margin-bottom: 0;
     color: var(--text-secondary);
     transition: color var(--transition-medium);
}

.capabilities-conclusion {
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(30px); */ /* Let GSAP handle */
    position: relative; z-index: 1;
}
.capabilities-conclusion p { color: var(--text-secondary); transition: color var(--transition-medium); }
.capabilities-conclusion p:last-child {
     margin-bottom: 0;
}

/* Team Section */
.team {
    background-color: var(--bg-primary);
    transition: background-color var(--transition-medium);
}

/* Removed conflicting .team::before rule */

.team-intro {
    margin-bottom: 4rem;
    max-width: 900px; /* Constrain width */
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(30px); */ /* Let GSAP handle */
     position: relative; z-index: 1;
}
.team-intro p { margin-bottom: 0; color: var(--text-secondary); transition: color var(--transition-medium); }

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */
    gap: 2rem; /* Space between members */
     position: relative; z-index: 1;
}

.team-member {
    background: var(--bg-card);
    border-radius: 8px;
    overflow: hidden; /* Ensure image corners are rounded */
    box-shadow: 0 10px 30px var(--card-shadow-color);
    transition: all var(--transition-medium); /* Animate transforms, shadow, color */
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(30px); */ /* Let GSAP handle */
    border-top: 3px solid transparent; /* Hover effect */
}

.team-member:hover {
    transform: translateY(-10px) !important; /* Lift effect - override GSAP */
    box-shadow: 0 20px 40px var(--card-hover-shadow-color);
    border-color: var(--accent-2); /* Show accent border */
}

.team-img {
    width: 100%;
    height: 250px; /* Fixed height for consistency */
    object-fit: cover; /* Cover area, crop if needed */
    filter: var(--team-img-filter); /* Theme-based filter */
    transition: filter var(--transition-medium); /* Only animate filter */
    display: block; /* Remove extra space */
    background-color: var(--gray-500); /* Placeholder background */
}

.team-member:hover .team-img {
    filter: var(--team-img-hover-filter); /* Change filter on hover */
}

.team-info {
    padding: 1.8rem;
}

.team-name {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--text-heading);
    transition: color var(--transition-medium);
}

.team-role {
    color: var(--accent-1); /* Accent color for role */
    font-weight: 500;
    margin-bottom: 1.2rem;
    font-size: 1rem;
    display: flex; /* Align icon and text */
    align-items: center;
    gap: 0.5rem;
    transition: color var(--transition-medium);
}
.team-role-icon {
     font-size: 1.1em;
     opacity: 0.8;
     vertical-align: middle; /* Align icons better */
     transition: opacity var(--transition-medium);
}
 /* Style for Google Material Symbols */
.team-role-icon.material-symbols-outlined {
     font-size: 1.2em; /* Adjust size if needed */
}

.team-info p:not(.team-role) { /* Style description */
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 0;
    transition: color var(--transition-medium);
}

.team-conclusion {
    margin-top: 3rem;
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(30px); */ /* Let GSAP handle */
     position: relative; z-index: 1;
}
.team-conclusion p { color: var(--text-secondary); transition: color var(--transition-medium); }
.team-conclusion p:last-child {
     margin-bottom: 0;
}

/* Client Section Styles */
.clients {
     background-color: var(--bg-primary); /* Match team section bg */
     transition: background-color var(--transition-medium);
}
.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: 2rem;
    position: relative; z-index: 1;
}
.client-card {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 5px 20px var(--card-shadow-color);
    transition: all var(--transition-medium); /* Animate all */
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(30px); */ /* Let GSAP handle */
    border-left: 3px solid var(--accent-1); /* Use theme accent */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text */
}
.client-card:hover {
     transform: translateY(-5px) !important; /* Slight lift - override GSAP */
     box-shadow: 0 10px 25px var(--card-hover-shadow-color);
}
/* Client Logo Styles */
.client-logo {
    display: block;
    max-height: 55px; /* Increased size */
    width: auto;
    max-width: 180px; /* Max logo width */
    margin-bottom: 1.5rem;
    object-fit: contain; /* Scale logo nicely */
    filter: var(--client-logo-filter); /* Apply theme filter */
    transition: filter var(--transition-medium); /* Animate filter only */
}
/* Hover effect for logo */
.client-card:hover .client-logo {
     filter: none; /* Show color on card hover */
}

.client-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    color: var(--text-heading);
    margin-top: auto; /* Push text down if logo is short */
    transition: color var(--transition-medium);
}
.client-card p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 0;
    transition: color var(--transition-medium);
}

/* Project Assurance Section */
.assurance {
    background-color: var(--bg-secondary);
    transition: background-color var(--transition-medium);
}

.assurance::after { /* Decorative element */
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 92, 185, 0.03), transparent 70%);
    pointer-events: none;
    border-radius: 50%;
    z-index: 0;
    transition: background var(--transition-medium);
}
 body.light-theme .assurance::after {
     background: radial-gradient(circle, rgba(0, 92, 185, 0.02), transparent 70%);
 }

.assurance-content {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    align-items: flex-start; /* Align items at the top */
    position: relative; z-index: 1;
}

.assurance-text {
    flex: 2; /* Take more space */
    min-width: 300px;
}

.assurance-img {
    flex: 1; /* Take less space */
    min-width: 300px;
    border-radius: 8px;
    box-shadow: 0 10px 30px var(--card-shadow-color);
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(50px); */ /* Let GSAP handle */
    transition: box-shadow var(--transition-medium), background-color var(--transition-medium);
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    background-color: var(--gray-600); /* Placeholder */
    min-height: 350px; /* Ensure minimum height */
}
.assurance-img img {
     width: 100%;
     height: 100%; /* Fill container */
     object-fit: cover; /* Cover area */
     display: block;
     border-radius: 8px; /* Match container rounding */
}

.assurance-text h3 { color: var(--text-heading); transition: color var(--transition-medium);}
.assurance-text p { color: var(--text-secondary); transition: color var(--transition-medium);}
.assurance-text h3, .assurance-text p {
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(30px); */ /* Let GSAP handle */
    /* transition: all var(--transition-slow); */ /* Let GSAP handle */
}
.assurance-text ul {
    list-style: none; /* Remove default bullets */
    padding-left: 0;
    margin-top: 1.5rem;
}
.assurance-text li {
    padding-left: 1.5rem; /* Space for custom bullet */
    position: relative; /* For custom bullet positioning */
    margin-bottom: 1rem;
    color: var(--text-secondary);
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(30px); */ /* Let GSAP handle */
    transition: color var(--transition-medium); /* Animate color only */
}
.assurance-text li::before {
    content: '✓'; /* Custom checkmark bullet */
    position: absolute;
    left: 0;
    color: var(--accent-2);
    font-weight: bold;
    transition: color var(--transition-medium);
}
.assurance-text p:last-child {
    margin-bottom: 0;
}

/* Conclusion Section */
.conclusion {
    background: linear-gradient(135deg, var(--logistick-dark-blue), #001529);
    color: var(--white);
    transition: background var(--transition-medium), color var(--transition-medium);
}
body.light-theme .conclusion {
     background: linear-gradient(135deg, var(--gray-200), var(--gray-100));
     color: var(--text-primary);
}

.conclusion::before { /* Background overlay pattern/texture */
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    /* background-image: url('path/to/texture.png'); Optional texture */
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
    transition: opacity var(--transition-medium);
}

.conclusion .section-title::after {
    background: var(--accent-3); /* Use different accent */
}
/* Ensure title/icon color contrast in light theme */
body.light-theme .conclusion .section-title { color: var(--text-heading); }
body.light-theme .conclusion .section-title-icon { color: var(--accent-3); }

.conclusion-content {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    align-items: stretch; /* Make columns same height */
     position: relative; z-index: 1;
}

.conclusion-text {
    flex: 1; /* Flexible width */
    min-width: 300px;
    max-width: 900px; /* Limit text width */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content */
}

.conclusion-text p {
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(30px); */ /* Let GSAP handle */
    transition: color var(--transition-medium); /* Animate color */
    margin-bottom: 1.5rem;
    color: inherit; /* Inherit from section */
}
.conclusion-text ul {
    list-style: none; /* Remove default bullets */
    padding-left: 0;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}
.conclusion-text li {
    padding-left: 1.5rem; /* Space for custom bullet */
    position: relative; /* For custom bullet */
    margin-bottom: 1rem;
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(30px); */ /* Let GSAP handle */
    transition: color var(--transition-medium); /* Animate color */
     color: inherit; /* Inherit from section */
}
 .conclusion-text li::before {
    content: '★'; /* Custom star bullet */
    position: absolute;
    left: 0;
    color: var(--accent-2);
    font-size: 0.9em;
    top: 2px; /* Adjust vertical alignment */
    transition: color var(--transition-medium);
}
body.light-theme .conclusion-text li::before {
     color: var(--accent-3); /* Use theme accent */
}
.conclusion-text p:last-of-type { /* Target last paragraph specifically */
    margin-bottom: 0;
}

/* 3D Model Container */
#model-container {
    flex: 1; /* Flexible width */
    min-width: 300px;
    min-height: 400px;
    position: relative; /* For loading indicator */
    /* opacity: 0; */ /* Let GSAP handle */
    /* transform: translateY(30px); */ /* Let GSAP handle */
    border-radius: 8px;
    overflow: hidden; /* Clip canvas */
    border: 1px solid transparent; /* Optional border */
    transition: border-color var(--transition-medium); /* Only animate border */
}
body.light-theme #model-container {
     border-color: var(--border-color); /* Add border in light theme */
}

#model-canvas {
    display: block; /* Remove extra space */
    width: 100%;
    height: 100%;
}
#loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-primary);
    font-size: 1.2em;
    display: none; /* Hidden by default */
    background: rgba(0,0,0,0.5);
    padding: 1rem;
    border-radius: 5px;
    z-index: 5; /* Ensure it's above canvas */
    transition: background-color var(--transition-medium), color var(--transition-medium);
}
body.light-theme #loading-indicator {
     background: rgba(255,255,255,0.7);
     color: var(--text-primary);
}

/* Scroll Progress Indicator */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    z-index: 1001; /* Above header */
    transition: width 0.1s ease-out; /* Smoother transition */
}

/* --- Updated Navigation Menu Styles --- */
.nav-menu {
    position: fixed; /* Start as fixed */
    bottom: 2rem; /* Default fixed position from bottom */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--nav-menu-bg);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 0.8rem 1.5rem;
    display: flex;
    gap: 1.5rem;
    z-index: 100; /* Ensure it's above most content but below modals etc. */
    box-shadow: 0 5px 20px var(--shadow-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: bottom 0.3s ease-in-out, /* Smooth transition for bottom changes */
                position 0.1s linear, /* Quick transition for position switch */
                background-color var(--transition-medium),
                border-color var(--transition-medium),
                box-shadow var(--transition-medium);
    width: auto; /* Don't force full width */
    max-width: 90%; /* Prevent overflow on small screens */
}
body.light-theme .nav-menu {
     border-color: rgba(0, 0, 0, 0.1);
}

/* Style for when JS docks the menu above the footer */
.nav-menu.is-docked {
    position: absolute; /* Position relative to body */
    /* 'bottom' style will be set dynamically by JavaScript */
    transform: translateX(-50%) translateY(0); /* Adjust transform if needed */
    /* Optionally remove fixed bottom if needed, but JS setting it is fine */
    /* bottom: auto; */
}

.nav-item {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    transition: all var(--transition-medium); /* Animate color, background */
    cursor: pointer;
    white-space: nowrap; /* Prevent wrapping */
}

.nav-item:hover {
    color: var(--text-primary);
    /* background-color: rgba(255, 255, 255, 0.1); Optional hover background */
}

.nav-item.active {
    background-color: var(--accent-2);
    color: var(--bg-secondary); /* High contrast text */
}
body.light-theme .nav-item.active {
     color: var(--white); /* Ensure contrast in light theme */
}

/* --- Updated Footer Styles --- */
.site-footer {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    /* Reduced padding to make the footer half as high */
    padding: 1.5rem 0;
    margin-top: 4rem; /* Space above the footer */
    border-top: 1px solid var(--divider-color); /* Separator line */
    font-size: 0.9rem;
    position: relative; /* Needed for potential absolute children or pseudo-elements */
    z-index: 1; /* Ensure it's above background elements */
    transition: background-color var(--transition-medium), color var(--transition-medium), border-color var(--transition-medium);
}

.footer-content {
    display: flex;
    justify-content: space-between; /* Pushes left and right elements apart */
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 1.5rem; /* Add gap between elements */
}

.footer-left {
    text-align: left;
}

.powered-by-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.powered-by-link:hover {
    color: var(--text-link-hover);
}

.footer-logo {
    height: 30px; /* Logo size */
    width: auto;
    filter: grayscale(100%); /* Desaturated */
    transition: filter var(--transition-medium);
    vertical-align: middle;
}

.powered-by-link:hover .footer-logo {
    filter: grayscale(0%); /* Full saturation on hover */
}

.footer-right {
    text-align: right;
    flex-shrink: 0; /* Prevent shrinking */
}


/* Parallax Background Styles */
.parallax-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0; /* Behind content */
    background-repeat: no-repeat; /* Default */
    background-position: center center; /* Default */
    background-size: cover; /* Default */
    background-attachment: fixed; /* Parallax effect */
    opacity: var(--parallax-opacity);
    transition: opacity var(--transition-medium);
    /* filter: grayscale(50%); Optional filter */
}

/* Assign specific images AND ensure repeat/size */
#vision.parallax-bg::before {
    background-image: url('bg1.png');
    background-repeat: no-repeat;
    background-size: cover;
}
#solution.parallax-bg::before {
    background-image: url('bg2.png');
    background-repeat: no-repeat;
    background-size: cover;
}
#capabilities.parallax-bg::before {
    background-image: url('bg3.png');
    background-repeat: no-repeat;
    background-size: cover;
}
#team.parallax-bg::before {
    background-image: url('bg4.png');
    background-repeat: no-repeat;
    background-size: cover;
}

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

@keyframes scale {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.scale-animation {
    animation: scale 8s infinite ease-in-out;
}

/* Responsive Button Text/Icon Styles */
.show-on-small {
    display: none; /* Hidden by default */
}

/* Additive style for initial animation state for GSAP */
.fade-in {
    opacity: 0;
    /* Initial transform is better handled by GSAP defaults or specific setup */
    /* transform: translateY(30px); */
}
/* Ensure elements meant to fade in start invisible if JS fails/delays */
.exec-summary, .vision-text p, .vision-text h3, .vision-text li, .vision-image,
.solution-card, .architecture-content, .capabilities-intro, .requirement-card,
.capabilities-conclusion, .team-intro, .team-member, .team-conclusion,
.client-card, .assurance-text h3, .assurance-text p, .assurance-text li,
.assurance-img, .conclusion-text p, .conclusion-text li, #model-container,
.approach-container, .enhancement-container /* Add containers if they fade in */
{
  opacity: 0; /* Start invisible */
}


/* --- Responsive Design --- */
@media (max-width: 1200px) {
    .section-title { font-size: 2.2rem; }
    .hero h1 { font-size: 3rem; }
    .nav-menu { padding: 0.6rem 1rem; gap: 1rem; } /* Adjust menu padding/gap */
    .nav-item { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
    #model-container { min-height: 350px; }
    .team-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .client-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

@media (max-width: 992px) {
    .hero { min-height: 90vh; }
    .hero h1 { font-size: 2.5rem; }
    .section-title { font-size: 2rem; }
    .nav-menu { bottom: 1.5rem; gap: 0.8rem; }
    .nav-item { padding: 0.3rem 0.7rem; font-size: 0.75rem; }
    #model-container { min-height: 300px; }
    .parallax-bg::before {
         background-attachment: scroll; /* Disable parallax on smaller screens */
    }
     .team-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
     .client-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}

@media (max-width: 768px) { /* Breakpoint for mobile button & menu wrapping */
    .container { padding: 0 1.5rem; }
    .header-container { padding: 0.8rem 1rem; }
    header.scrolled .logo { height: 35px; } /* Adjust scrolled logo size */
    .logo { height: 40px; } /* Adjust default logo size */
    .view-pdf-btn { padding: 0.5rem 0.8rem; font-size: 0.8rem; } /* Adjust padding */
    .view-pdf-btn .hide-on-small { display: none; } /* Hide full text */
    .view-pdf-btn .show-on-small { display: inline; } /* Show "PDF" */
    .view-pdf-btn i, .view-pdf-btn .material-symbols-outlined { margin-right: 0.3em; } /* Adjust icon margin */

    .hero { min-height: 85vh; height: auto; } /* Use min-height for content */
    .hero h1 { font-size: 2.2rem; }
    .hero p { font-size: 1.1rem; }
    .exec-summary { margin-top: -50px; padding: 2rem; }
    .section-title { font-size: 1.8rem; }
    .requirement-header, .approach-container, .enhancement-container { padding: 1.5rem; }
    .requirement-request { padding: 1rem; }

.nav-menu {
    position: fixed; /* Keep it fixed */
    bottom: 2rem; /* Default fixed position from bottom */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--nav-menu-bg);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 0.8rem 1.5rem;
    display: flex;
    gap: 1.5rem;
    z-index: 100;
    box-shadow: 0 5px 20px var(--shadow-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Remove transition for 'bottom' and 'position' if handled purely by GSAP scrub */
    transition: background-color var(--transition-medium),
                border-color var(--transition-medium),
                box-shadow var(--transition-medium);
    width: auto; /* Don't force full width */
    max-width: 90%; /* Prevent overflow on small screens */
    /* Remove the .is-docked class - GSAP handles positioning */
}
    .nav-item { padding: 0.3rem 0.6rem; font-size: 0.7rem; }

    .conclusion-content { flex-direction: column; align-items: center; }
    .conclusion-text { max-width: 100%; justify-content: flex-start; }
    #model-container { min-height: 300px; height: 300px; width: 100%; max-width: 400px; margin: 0 auto; }
    .team-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .client-grid { grid-template-columns: 1fr; } /* Stack clients */

    /* Footer adjustments for stacking */
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }
    .footer-left,
    .footer-right {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .container { padding: 0 1rem; }
    .hero { min-height: 75vh; }
    .hero h1 { font-size: 1.8rem; }
    .exec-summary, .approach-container, .enhancement-container, .requirement-header { padding: 1.2rem; }
    .requirement-request { padding: 1rem; }
    .nav-menu { padding: 0.5rem; gap: 0.3rem 0.5rem; bottom: 0.5rem; }
    .nav-item { padding: 0.25rem 0.5rem; font-size: 0.65rem; }
    #model-container { min-height: 250px; height: 250px; }
    .team-grid { grid-template-columns: 1fr; } /* Stack team members */
    .site-footer { padding: 2rem 0; } /* Adjust footer padding */
}