/* ROOT VARIABLES ======================================================= */
:root {
    /* Fonts */
    --font-primary: 'Oswald', sans-serif;
    --font-secondary: 'Nunito', sans-serif;

    /* Analogous Color Scheme */
    --color-primary-deep-blue: #0A2463; /* Deep Blue - Main Background / Dark Elements */
    --color-secondary-purple-blue: #403F75; /* Purple-Blue - Supporting Darker Element */
    --color-accent-bright-teal: #2AFFEA;   /* Bright Teal/Cyan - CTAs, Highlights */
    
    --color-primary-darker: #071A48; /* Darker shade of primary */
    --color-accent-darker: #1FB8A8;  /* Darker shade of accent for hovers */

    /* Neutral Colors */
    --color-text-light: #FFFFFF;
    --color-text-light-secondary: #E0E0E0;
    --color-text-dark: #222222; /* Primary dark text for high contrast */
    --color-text-dark-secondary: #333333; /* Slightly lighter dark text */
    
    --color-background-page: #f0f4f8; /* Light neutral page background */
    --color-background-card-light: #FFFFFF;
    --color-background-section-dark: var(--color-primary-deep-blue);

    /* Borders & Lines */
    --color-border-light: #DDE4ED;
    --color-border-medium: #AAB8C9;

    /* Glassmorphism */
    --glass-bg-light-card: rgba(255, 255, 255, 0.65); /* More opaque for readability on light cards */
    --glass-bg-dark-card: rgba(45, 63, 102, 0.5); /* Tinted for dark sections */
    --glass-bg-header: rgba(10, 36, 99, 0.7); /* For scrolled header */
    --glass-border-light: rgba(255, 255, 255, 0.3);
    --glass-border-dark: rgba(175, 200, 255, 0.25);
    --glass-blur: 8px; /* Subtle blur */

    /* Neo-Brutalism */
    --neo-border-color-light-bg: var(--color-text-dark); /* Strong border on light elements */
    --neo-border-color-dark-bg: var(--color-accent-bright-teal); /* Bright border on dark elements */
    --neo-border-width: 2px; /* Slightly less thick for a cleaner look */
    --neo-box-shadow-light-bg: 4px 4px 0px var(--color-text-dark-secondary);
    --neo-box-shadow-dark-bg: 4px 4px 0px var(--color-accent-bright-teal);

    /* Spacing & Sizing */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-xxl: 3rem;    /* 48px */
    --spacing-section: 4rem; /* 64px vertical padding for sections */

    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;

    /* Transitions */
    --transition-fast: 0.2s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;

    /* Header */
    --header-height: 70px; /* Adjusted */
    --header-height-mobile: 60px;
}

/* GLOBAL RESETS & BASE STYLES ========================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

body {
    font-family: var(--font-secondary);
    line-height: 1.6;
    color: var(--color-text-dark);
    background-color: var(--color-background-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: var(--header-height); /* Account for fixed header */
}

.main-container {
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* TYPOGRAPHY =========================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-dark); /* Default dark color for headings */
}

h1 { font-size: 2.8rem; letter-spacing: -0.5px; } /* ~44.8px */
h2 { font-size: 2.2rem; } /* ~35.2px */
h3 { font-size: 1.6rem; } /* ~25.6px */
h4 { font-size: 1.25rem; } /* ~20px */

p {
    margin-bottom: var(--spacing-md);
    font-size: 1rem; /* ~16px */
}

a {
    color: var(--color-accent-bright-teal);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-darker);
    text-decoration: underline;
}

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

ul, ol {
    list-style-position: inside;
    margin-bottom: var(--spacing-md);
}

/* UTILITY CLASSES ======================================================== */
.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.centered-text { text-align: center; }
.text-light { color: var(--color-text-light) !important; }
.text-light-secondary { color: var(--color-text-light-secondary) !important; }

/* For images inside containers that need centering */
.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Ensure image respects container bounds */
}
.image-container img {
    object-fit: cover; /* Default behavior, can be overridden */
}

.centered-image { /* Utility to center a block-level image container */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Centers inline-block children too */
}

/* SECTION STYLING ====================================================== */
.content-section {
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
    position: relative; /* For pseudo-elements or absolute positioning inside */
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    font-size: 2.5rem; /* Larger section titles */
    color: var(--color-text-dark);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.section-subtitle {
    text-align: center;
    font-size: 1.15rem;
    color: var(--color-text-dark-secondary);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-xl);
    font-weight: 400;
}

.section-dark {
    background-color: var(--color-background-section-dark);
}
.section-dark .section-title,
.section-dark .section-subtitle,
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4,
.section-dark p, .section-dark li, .section-dark blockquote {
    color: var(--color-text-light);
}
.section-dark .section-title {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.section-dark .section-subtitle {
    color: var(--color-text-light-secondary);
}
.section-dark a {
    color: var(--color-accent-bright-teal);
}
.section-dark a:hover {
    color: var(--color-text-light);
}

/* HEADER & NAVIGATION ================================================== */
.site-header {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color var(--transition-normal), box-shadow var(--transition-normal), padding var(--transition-normal);
    background-color: rgb(73, 73, 73); /* Initial state */
    padding: calc(var(--spacing-sm) * 1.5) 0;
    height: var(--header-height);
}

.site-header.scrolled {
    background-color: var(--glass-bg-header);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: var(--spacing-sm) 0;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-text-light); /* Logo text is white as per requirement for header */
}
.logo img {
    height: 40px; /* Adjust as needed */
    width: auto;
    margin-right: var(--spacing-sm);
    transition: transform var(--transition-fast);
}
.logo a:hover img {
    transform: scale(1.05);
}
.logo span {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 500;
}

.main-navigation .nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0; padding: 0; /* Override list defaults */
}
.main-navigation .nav-links li {
    margin-left: var(--spacing-lg);
    margin-bottom: 0; /* Override p defaults */
}
.main-navigation .nav-links a {
    color: var(--color-text-light);
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 500;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    position: relative;
}
.main-navigation .nav-links a::after { /* Underline effect */
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--color-accent-bright-teal);
    transition: all var(--transition-normal);
    transform: translateX(-50%);
}
.main-navigation .nav-links a:hover,
.main-navigation .nav-links a.active /* Add .active class via JS for current page */ {
    color: var(--color-accent-bright-teal);
}
.main-navigation .nav-links a:hover::after,
.main-navigation .nav-links a.active::after {
    width: 70%;
}

.burger-menu {
    display: none; /* Hidden on desktop */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
    z-index: 1010; /* Above nav links when open */
}
.burger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-text-light);
    margin: 5px 0;
    border-radius: 3px;
    transition: all var(--transition-normal);
}

/* HERO SECTION ========================================================= */
.hero-section {
    min-height: calc(100vh - var(--header-height)); /* Full viewport height minus header */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-md);
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--color-text-light); /* Enforced white text */
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.65)); /* Darkening overlay */
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}
.hero-title {
    font-size: 3.5rem; /* Larger for hero */
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-light); /* Enforced white text */
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}
.hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: var(--spacing-xl);
    color: var(--color-text-light-secondary) !important; /* Enforced white text, slightly dimmer */
    font-weight: 400;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

/* BUTTONS (GLOBAL) ===================================================== */
.btn, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg); /* 10px 24px approx */
    font-family: var(--font-primary);
    font-size: 1.1rem; /* Slightly larger base for buttons */
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: var(--neo-border-width) solid transparent; /* For neo effect on hover */
    position: relative; /* For potential pseudo-element effects */
    line-height: 1.5; /* Ensure text is vertically centered if padding varies */
}

.btn-primary {
    background-color: var(--color-accent-bright-teal);
    color: var(--color-primary-deep-blue); /* High contrast */
    border-color: var(--color-accent-bright-teal);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn-primary:hover {
    background-color: var(--color-accent-darker);
    border-color: var(--color-accent-darker);
    color: var(--color-primary-deep-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.btn-primary.btn-hero { /* Specific for hero button if needed */
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1.25rem;
}

.btn-secondary {
    background-color: var(--color-secondary-purple-blue);
    color: var(--color-text-light);
    border-color: var(--color-secondary-purple-blue);
}
.section-dark .btn-secondary { /* Secondary button on dark background */
    background-color: var(--color-text-light-secondary);
    color: var(--color-primary-deep-blue);
    border-color: var(--color-text-light-secondary);
}
.btn-secondary:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}
.section-dark .btn-secondary:hover {
    background-color: var(--color-text-light);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-accent-bright-teal);
    border-color: var(--color-accent-bright-teal);
}
.btn-outline:hover {
    background-color: var(--color-accent-bright-teal);
    color: var(--color-primary-deep-blue);
}
.section-dark .btn-outline {
    color: var(--color-accent-bright-teal);
    border-color: var(--color-accent-bright-teal);
}
.section-dark .btn-outline:hover {
    background-color: var(--color-accent-bright-teal);
    color: var(--color-primary-deep-blue);
}

/* CARDS (GLOBAL) ======================================================== */
.glass-effect {
    /* background: var(--glass-bg-light-card); */
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border-light);
    border-radius: var(--border-radius-lg); /* Slightly more rounded for glass */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.section-dark .glass-effect {
    background: var(--glass-bg-dark-card);
    border: 1px solid var(--glass-border-dark);
}

.neo-border { /* This is the primary neo-brutalist border style */
    border-width: var(--neo-border-width);
    border-style: solid;
}
/* Default: light card, dark border */
.card.neo-border, .pricing-card.neo-border, .resource-card.neo-border, .press-item.neo-border, .accordion-item.neo-border {
    border-color: var(--neo-border-color-light-bg);
    box-shadow: var(--neo-box-shadow-light-bg);
}
/* Dark section: dark card, accent border */
.section-dark .card.neo-border, .section-dark .pricing-card.neo-border, .section-dark .resource-card.neo-border, .section-dark .press-item.neo-border, .section-dark .accordion-item.neo-border {
    border-color: var(--neo-border-color-dark-bg);
    box-shadow: var(--neo-box-shadow-dark-bg);
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center direct children like image-container and card-content */
    text-align: center; /* Center text within card-content */
    background-color: var(--color-background-card-light);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    overflow: hidden; /* For neo borders and shadows not to be cut by parent */
    color: var(--color-text-dark); /* Default text color for light cards */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.section-dark .card {
    background-color: var(--color-primary-darker); /* Solid dark for non-glass cards */
    color: var(--color-text-light);
}
.section-dark .card:hover {
    box-shadow: 0 10px 20px rgba(42, 255, 234, 0.1); /* Teal glow */
}

/* Card image container - STRICT RULE */
.card .card-image { /* Generic card image container */
    width: 100%;
    height: 200px; /* EXAMPLE - ADJUST PER CARD TYPE/ASPECT RATIO */
    margin-bottom: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    overflow: hidden; /* Ensures image fits */
    display: flex; /* Centers the img tag itself if it's smaller */
    justify-content: center;
    align-items: center;
}
.card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crucial for fixed height container */
    display: block;
}

.card-content {
    width: 100%; /* Ensure content takes full width */
}
.card-title {
    font-family: var(--font-primary);
    font-size: 1.4rem; /* Adjusted card title size */
    margin-bottom: var(--spacing-sm);
    color: inherit; /* Inherit from .card or .section-dark .card */
}
.section-dark .card-title {
    color: var(--color-text-light);
}

/* HISTORY SECTION ====================================================== */
.history-item {
    display: flex;
    gap: var(--spacing-xl);
    align-items: center;
    margin-bottom: var(--spacing-xxl);
}
.history-item.reverse {
    flex-direction: row-reverse;
}
.history-image-container {
    flex: 0 0 45%; /* Approx 45% width */
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.history-image-container img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    object-fit: cover;
}
.history-text {
    flex: 1;
}
.history-text h3 {
    color: var(--color-primary-deep-blue);
    margin-bottom: var(--spacing-sm);
}

/* PROJECTS SECTION ===================================================== */
/* Assuming .custom-slider will be handled by JS for layout. Grid for fallback. */
.projects-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
}
.projects-gallery .card .card-image { height: 220px; } /* Example height */

/* SUSTAINABILITY - ACCORDION =========================================== */
.accordion-container {
    max-width: 800px;
    margin: 0 auto;
}
.accordion-item {
    margin-bottom: var(--spacing-md);
    border-radius: var(--border-radius-md); /* Match glass/neo */
    background-color: var(--color-background-card-light);
}
.accordion-item.glass-effect { /* Specific styling for glass accordions */
    background: var(--glass-bg-light-card);
}
.accordion-header {
    background: transparent; /* Button itself is transparent */
    border: none;
    width: 100%;
    text-align: left;
    padding: var(--spacing-md) var(--spacing-lg);
    font-family: var(--font-primary);
    font-size: 1.15rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-dark); /* Text color for light accordion item */
}
.section-dark .accordion-item {
     background-color: var(--color-primary-darker);
}
.section-dark .accordion-item.glass-effect {
    background: var(--glass-bg-dark-card);
}
.section-dark .accordion-header {
    color: var(--color-text-light);
}
.accordion-icon {
    font-size: 1.5rem;
    transition: transform var(--transition-fast);
}
.accordion-item.active .accordion-icon {
    transform: rotate(45deg);
}
.accordion-content {
    padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal), padding var(--transition-normal);
}
.accordion-item.active .accordion-content {
    max-height: 500px; /* Adjust as needed */
    /* Padding already set, will animate with max-height */
}
.accordion-content img.inline-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-md);
}

/* SUCCESS STORIES - SLIDER ============================================= */
/* Assuming .custom-slider or .success-stories-slider handles layout via JS */
.success-stories-slider {
    display: grid; /* Fallback grid */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
    /* For JS slider, items might be display:none initially */
}
.success-stories-slider .card {
    /* Specific styles for testimonial cards */
    align-items: center; /* Center content */
}
.success-stories-slider .card .card-image {
    width: 120px; /* Smaller portrait */
    height: 120px;
    border-radius: 50%; /* Circular portrait */
    margin-bottom: var(--spacing-lg);
}
.success-stories-slider blockquote {
    font-style: italic;
    margin: var(--spacing-md) 0;
    padding-left: var(--spacing-md);
    border-left: 3px solid var(--color-accent-bright-teal);
    color: var(--color-text-dark-secondary);
}
.section-dark .success-stories-slider blockquote {
    color: var(--color-text-light-secondary);
    border-left-color: var(--color-accent-bright-teal);
}
.success-stories-slider blockquote footer {
    font-style: normal;
    font-weight: bold;
    margin-top: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--color-text-dark);
}
.section-dark .success-stories-slider blockquote footer {
    color: var(--color-text-light);
}

/* PRICING SECTION ====================================================== */
.pricing-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    align-items: stretch; /* Make cards same height if content differs */
}
.pricing-card {
    display: flex;
    flex-direction: column; /* Ensure button is at bottom */
    padding: var(--spacing-xl) var(--spacing-lg);
    position: relative; /* For popular badge */
}
.pricing-card.popular {
    border-color: var(--color-accent-bright-teal) !important; /* Override default neo border */
    box-shadow: 0 0 25px rgba(42, 255, 234, 0.3), 5px 5px 0 var(--color-accent-bright-teal) !important;
    transform: scale(1.03);
}
.popular-badge {
    position: absolute;
    top: -1px; /* Align with neo-border */
    right: var(--spacing-lg);
    background-color: var(--color-accent-bright-teal);
    color: var(--color-primary-deep-blue);
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.8rem;
    font-family: var(--font-primary);
    font-weight: bold;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pricing-title {
    font-size: 1.8rem;
    margin-bottom: var(--spacing-sm);
}
.pricing-price {
    font-size: 2.5rem;
    font-family: var(--font-primary);
    color: var(--color-primary-deep-blue);
    margin-bottom: var(--spacing-md);
}
.section-dark .pricing-price {
    color: var(--color-accent-bright-teal);
}
.pricing-price .pricing-period {
    font-size: 1rem;
    font-family: var(--font-secondary);
    color: var(--color-text-dark-secondary);
}
.section-dark .pricing-price .pricing-period {
    color: var(--color-text-light-secondary);
}
.pricing-features {
    list-style: none;
    padding: 0;
    margin-bottom: var(--spacing-lg);
    text-align: left; /* Align feature list items to left within centered card */
    flex-grow: 1; /* Push button to bottom */
}
.pricing-features li {
    margin-bottom: var(--spacing-sm);
    padding-left: var(--spacing-lg);
    position: relative;
}
.pricing-features li::before {
    content: '✓'; /* Checkmark */
    color: var(--color-accent-bright-teal);
    position: absolute;
    left: 0;
    font-weight: bold;
}
.pricing-card .btn {
    margin-top: auto; /* Push button to bottom */
    width: 100%;
}
.custom-plan-cta {
    text-align: center;
    margin-top: var(--spacing-xxl);
}
.custom-plan-cta p {
    margin-bottom: var(--spacing-sm);
    font-size: 1.1rem;
}

/* PRESS SECTION ======================================================== */
.press-mentions {
    display: grid;
    gap: var(--spacing-xl);
}
.press-item {
    display: flex;
    flex-direction: column; /* Stack logo and content on small screens */
    align-items: center; /* Center content within the item */
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
}
.press-item-logo img {
    max-height: 40px; /* Control logo size */
    width: auto;
    filter: grayscale(1) brightness(0.5); /* Desaturate for dark bg, or adjust */
    opacity: 0.8;
}
.section-dark .press-item-logo img {
    filter: brightness(0) invert(1) opacity(0.7); /* Make logos white on dark */
}
.press-item-content h4 {
    font-size: 1.15rem;
    margin-bottom: var(--spacing-xs);
    font-family: var(--font-secondary); /* Less prominent than section titles */
    font-weight: bold;
}
.press-item-content p {
    font-size: 0.95rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-dark-secondary);
}
.section-dark .press-item-content p {
    color: var(--color-text-light-secondary);
}
.read-more-link {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--color-accent-bright-teal);
    text-decoration: none;
    transition: letter-spacing var(--transition-fast);
}
.read-more-link:hover {
    letter-spacing: 0.3px;
    text-decoration: underline;
}

/* EXTERNAL RESOURCES =================================================== */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}
.resource-card {
    padding: var(--spacing-lg);
}
.resource-card .resource-title {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-xs);
}
.resource-card .resource-title a {
    color: var(--color-primary-deep-blue); /* Distinct link color for titles */
    text-decoration: none;
}
.resource-card .resource-title a:hover {
    color: var(--color-accent-bright-teal);
    text-decoration: underline;
}
.section-dark .resource-card .resource-title a {
    color: var(--color-text-light);
}
.section-dark .resource-card .resource-title a:hover {
    color: var(--color-accent-bright-teal);
}
.resource-card .resource-description {
    font-size: 0.9rem;
    color: var(--color-text-dark-secondary);
    margin-bottom: 0;
}
.section-dark .resource-card .resource-description {
    color: var(--color-text-light-secondary);
}

/* CONTACT FORM ========================================================= */
.contact-form {
    padding: var(--spacing-xl);
    max-width: 700px;
    margin: 0 auto; /* Center the form if it's standalone */
}
.form-group {
    margin-bottom: var(--spacing-lg);
}
.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    color: inherit; /* Inherit from .section-dark or default */
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border-medium);
    font-family: var(--font-secondary);
    font-size: 1rem;
    background-color: var(--color-background-card-light);
    color: var(--color-text-dark);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-group textarea {
    min-height: 120px;
    resize: vertical;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent-bright-teal);
    box-shadow: 0 0 0 2px rgba(42, 255, 234, 0.3); /* Teal focus ring */
}
.section-dark .form-group input, .section-dark .form-group textarea {
    background-color: rgba(255,255,255,0.1); /* Light input on dark bg */
    border-color: var(--glass-border-dark);
    color: var(--color-text-light);
}
.section-dark .form-group input::placeholder,
.section-dark .form-group textarea::placeholder {
    color: var(--color-text-light-secondary);
    opacity: 0.7;
}

.contact-info { /* For info next to form on index page */
    margin-top: var(--spacing-xl);
    text-align: center;
}
.contact-info p {
    margin-bottom: var(--spacing-xs);
}
.contact-info a {
    color: var(--color-accent-bright-teal); /* Ensure links are visible */
}
.section-dark .contact-info a {
    color: var(--color-accent-bright-teal);
}

/* Contact Page Specific Layout */
.contact-page-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: var(--spacing-xxl);
}
.contact-form-column {
    flex: 1 1 55%; /* Form takes more space, min 350px */
    min-width: 350px;
}
.contact-info-column {
    flex: 1 1 35%; /* Info takes less space, min 300px */
    min-width: 300px;
}
.contact-info-column .section-title { text-align: left; }
.contact-details {
    padding: var(--spacing-lg);
}
.contact-details p { margin-bottom: var(--spacing-sm); }
.contact-icon {
    margin-right: var(--spacing-sm);
    color: var(--color-accent-bright-teal);
}
.map-placeholder {
    margin-top: var(--spacing-xl);
    width: 100%;
    /* height: 300px; /* Example height for map placeholder */
    background-color: var(--color-border-light); /* Placeholder bg */
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}
.map-placeholder img {
    width: 100%;
    height: 100%; /* If container has fixed height */
    object-fit: cover;
    border-radius: var(--border-radius-md);
}

/* FOOTER =============================================================== */
.site-footer {
    background-color: var(--color-primary-darker); /* Very dark base for footer */
    color: var(--color-text-light-secondary);
    padding: var(--spacing-xl) 0 var(--spacing-lg) 0;
    font-size: 0.9rem;
}
.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-xl);
    align-items: start;
}
.site-footer h4 {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.site-footer ul li {
    margin-bottom: var(--spacing-xs);
}
.site-footer ul li a {
    color: var(--color-text-light-secondary);
    text-decoration: none;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.site-footer ul li a:hover {
    color: var(--color-accent-bright-teal);
    padding-left: var(--spacing-xs); /* Slight indent on hover */
}
.footer-social ul { /* Text based social links */
    display: flex;
    flex-wrap: wrap; /* Allow wrapping if many links */
    gap: var(--spacing-sm) var(--spacing-md); /* Row and column gap */
}
.footer-contact p {
    margin-bottom: var(--spacing-xs);
}
.footer-contact a {
    color: var(--color-text-light-secondary);
}
.footer-contact a:hover {
    color: var(--color-accent-bright-teal);
}
.footer-copyright {
    grid-column: 1 / -1; /* Span full width */
    text-align: center;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--glass-border-dark); /* Subtle separator */
    font-size: 0.85rem;
}

/* SPECIFIC PAGE STYLING =============================================== */
/* About Page */
.page-title-section { /* For About, Contact, Legal pages */
    min-height: 300px; /* Shorter than hero */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.page-title-section .hero-overlay { /* Re-use hero overlay style */
    background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.55));
}
.page-title-section h1 {
    font-size: 2.8rem;
    color: var(--color-text-light);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    margin-bottom: var(--spacing-sm);
}
.page-title-section p {
    font-size: 1.2rem;
    color: var(--color-text-light-secondary);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    margin-bottom: 0;
}

.team-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
}
.team-member-card .card-image {
    width: 180px;
    height: 180px;
    border-radius: 50%; /* Circular for team members */
}
.team-member-title {
    font-family: var(--font-secondary);
    font-weight: bold;
    color: var(--color-accent-bright-teal);
    font-size: 1rem;
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

/* Legal Pages (Privacy, Terms) */
.legal-content.content-section {
    padding-top: 100px !important; /* Specific override for header */
}
.legal-content h2 {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-sm);
    font-size: 1.8rem;
    border-bottom: 2px solid var(--color-border-light);
    padding-bottom: var(--spacing-xs);
}
.legal-content h3 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-xs);
    font-size: 1.3rem;
    color: var(--color-primary-deep-blue);
}
.legal-content ul {
    padding-left: var(--spacing-lg);
}
.legal-content ul li {
    margin-bottom: var(--spacing-xs);
}

/* Success Page */
.success-page.content-section {
    min-height: calc(100vh - var(--header-height)); /* Full viewport height minus header */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    text-align: center;
    padding-top: 0; /* Override general section padding */
    padding-bottom: 0;
    background-color: var(--color-background-section-dark); /* Match dark theme */
}
.success-page .container {
    max-width: 600px;
}
.success-page .success-icon img {
    width: 80px; /* Adjust size */
    height: 80px;
    margin-bottom: var(--spacing-lg);
}
.success-page .section-title {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}
.success-page .section-subtitle {
    color: var(--color-text-light-secondary);
    margin-bottom: var(--spacing-md);
}
.success-page p {
    color: var(--color-text-light-secondary);
    margin-bottom: var(--spacing-xl);
}

/* COOKIE POPUP (FROM HTML) ============================================= */
/* Basic styling for the cookie popup is in HTML, can be expanded here if needed */
#cookiePopup {
    /* Styles are mostly inline in HTML for simplicity */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
#cookiePopup p a {
    text-decoration: underline;
}
#cookiePopup p a:hover {
    text-decoration: none;
}
#acceptCookie {
    /* Styles are mostly inline in HTML */
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
#acceptCookie:hover {
    background-color: var(--color-text-light) !important;
    color: var(--color-primary-deep-blue) !important;
}

/* RESPONSIVE DESIGN ==================================================== */
@media (max-width: 992px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    .hero-title { font-size: 3rem; }
    .hero-subtitle { font-size: 1.2rem; }

    .history-item, .history-item.reverse {
        flex-direction: column;
        text-align: center;
    }
    .history-image-container {
        flex-basis: auto; /* Reset flex basis */
        width: 80%; /* Control size on smaller screens */
        max-width: 400px;
        margin-bottom: var(--spacing-lg);
    }
    .history-text { text-align: left; } /* Keep text left aligned for readability */
}

@media (max-width: 768px) {
    body { padding-top: var(--header-height-mobile); }
    .site-header { height: var(--header-height-mobile); }
    .logo img { height: 35px; }
    .logo span { font-size: 1.3rem; }

    .main-navigation .nav-links {
        display: none; /* Hide for burger menu */
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--color-primary-darker); /* Solid background for mobile menu */
        padding-top: calc(var(--header-height-mobile) + var(--spacing-xl));
        align-items: center;
        justify-content: flex-start; /* Align items to top */
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform var(--transition-normal);
        z-index: 999; /* Below burger icon, above content */
    }
    .main-navigation .nav-links.open {
        display: flex;
        transform: translateX(0);
    }
    .main-navigation .nav-links li {
        margin: var(--spacing-md) 0;
        width: 100%;
        text-align: center;
    }
    .main-navigation .nav-links a {
        font-size: 1.3rem;
        padding: var(--spacing-sm) var(--spacing-xl);
        display: block; /* Make links full width */
    }
    .burger-menu {
        display: block;
    }
    /* Burger animation when open */
    .burger-menu.open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .burger-menu.open span:nth-child(2) {
        opacity: 0;
    }
    .burger-menu.open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1.1rem; }
    .btn-primary.btn-hero { font-size: 1.1rem; padding: var(--spacing-sm) var(--spacing-lg); }

    .section-title { font-size: 2rem; }
    .section-subtitle { font-size: 1rem; }
    
    .pricing-plans, .projects-gallery, .success-stories-slider, .team-gallery, .resources-grid {
        grid-template-columns: 1fr; /* Stack cards */
    }
    .pricing-card.popular { transform: scale(1); } /* Disable pop on mobile if stacked */

    .contact-page-container {
        flex-direction: column; /* Stack form and info */
    }
    .contact-form-column, .contact-info-column {
        flex-basis: 100%; /* Full width when stacked */
    }
    .footer-container {
        grid-template-columns: 1fr; /* Stack footer columns */
        text-align: center;
    }
    .footer-container h4 { text-align: center; }
    .footer-social ul { justify-content: center; }
    .site-footer ul li a:hover { padding-left: 0; }
}

@media (max-width: 480px) {
    h1 { font-size: 2rem; }
    .hero-title { font-size: 2.2rem; }
    .section-title { font-size: 1.8rem; }
    
    :root {
        --spacing-section: 3rem; /* Reduce section padding */
    }
    .btn, button, input[type="submit"], input[type="button"] {
        font-size: 1rem; /* Slightly smaller buttons */
        padding: calc(var(--spacing-sm)*0.9) calc(var(--spacing-lg)*0.9);
    }
}

/* ANIMATIONS (Scroll-based - to be triggered by JS) =================== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px); /* Start slightly lower */
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Parallax effect for background images (simple version) */
.parallax-bg-section {
    background-attachment: fixed;
    /* Ensure background-size, position, repeat are set in HTML or specific section style */
}
/* For block-level parallax, JS (Motion One) will be needed to manipulate transforms.
   This CSS provides a basic fixed background parallax.
*/