/* style.css */

/* Table of Contents
------------------------------------
1. CSS Variables
2. Global Styles
3. Utility Classes
4. Header & Navigation
5. Hero Section
6. Buttons
7. Cards (Generic)
8. Section Specific Styles
    8.1 Features Section
    8.2 Services Section
    8.3 Methodology Section (Accordion)
    8.4 Behind The Scenes Section
    8.5 Success Stories Section
    8.6 Testimonials Section
    8.7 External Resources Section
    8.8 Press Section
    8.9 Community Section
    8.10 Contact Section
9. Footer
10. Special Page Styles (Success, Legal)
11. Animations & Transitions (General)
12. Responsive Design
------------------------------------ */

/* 1. CSS Variables
------------------------------------ */
:root {
    --font-primary: 'Manrope', sans-serif;
    --font-secondary: 'Rubik', sans-serif;

    --color-primary: #00d1ff; /* Bright Cyan/Blue */
    --rgb-primary: 0, 209, 255;
    --color-primary-dark: #00a3cc;
    --color-primary-light: #66e7ff;

    --color-accent: #ff6b6b; /* A contrasting accent if needed */
    --rgb-accent: 255, 107, 107;

    --color-text-light: #f0f0f0;
    --color-text-light-secondary: #b0b0b0; /* For less important light text */
    --color-text-dark: #333333;
    --color-text-dark-headings: #222222; /* For section titles as requested */
    --color-text-dark-secondary: #555555; /* For less important dark text */

    --color-bg-light: #f7f9fa; /* Very light gray, almost white */
    --color-bg-light-texture: #efefef; /* For sections with subtle light texture */
    --color-bg-dark: #121212; /* Very dark gray / soft black */
    --color-bg-dark-texture: #1a1a1a; /* For sections with subtle dark texture */
    --color-bg-dark-overlay: rgba(18, 18, 18, 0.7); /* Overlay for dark sections with BG image */
    --color-bg-light-overlay: rgba(247, 249, 250, 0.8); /* Overlay for light sections with BG image */


    --color-neutral-border: rgba(255, 255, 255, 0.1); /* For dark backgrounds */
    --color-neutral-border-light: rgba(0, 0, 0, 0.1); /* For light backgrounds */

    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-strong: 0 8px 25px rgba(0, 0, 0, 0.15);
    --shadow-futuristic: 0 0 15px rgba(var(--rgb-primary), 0.3);

    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;

    --spacing-unit: 1rem; /* 16px base */
    --header-height: 80px;

    --transition-smooth: all 0.3s ease-in-out;
    --transition-fast: all 0.2s ease-in-out;
}

/* 2. Global Styles
------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-secondary);
    line-height: 1.7;
    color: var(--color-text-dark);
    background-color: var(--color-bg-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll from animations */
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-unit);
    padding-right: var(--spacing-unit);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-dark-headings);
    margin-bottom: calc(var(--spacing-unit) * 0.75); /* 12px */
}

h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem); /* Responsive font size */
    font-weight: 800;
}

h2.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: calc(var(--spacing-unit) * 2); /* 32px */
    text-align: center;
    color: var(--color-text-dark-headings); /* Darker headings as requested */
    position: relative;
}
/* Optional: futuristic underline for section titles */
h2.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: var(--color-primary);
    margin: var(--spacing-unit) auto 0;
    border-radius: var(--border-radius-small);
}


p {
    margin-bottom: var(--spacing-unit);
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    color: var(--color-text-dark-secondary);
}

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

a:hover, a:focus {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

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

ul, ol {
    list-style: none;
}

/* Background image styling for sections */
[style*="background-image"] {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

/* Overlay for dark background images with text */
.hero-overlay, .community-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)); /* Ensure text readability */
    z-index: 1;
}
/* Content on top of overlay */
.hero-content, .community-content-wrapper {
    position: relative;
    z-index: 2;
}

.achievements-grid, .team-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* 3. Utility Classes
------------------------------------ */
.section-padding {
    padding-top: calc(var(--spacing-unit) * 4); /* 64px */
    padding-bottom: calc(var(--spacing-unit) * 4);
}

.text-center {
    text-align: center;
}

.text-light {
    color: var(--color-text-light) !important;
}
.text-light p, .text-light h1, .text-light h2, .text-light h3, .text-light h4 {
    color: var(--color-text-light) !important;
}

.bg-light-texture {
    background-color: var(--color-bg-light-texture);
    /* Example texture - replace with actual image if available */
    /* background-image: url('image/subtle-light-texture.jpg');
       data-prompt="Subtle light grey abstract geometric texture for background" */
}

.bg-dark-texture {
    background-color: var(--color-bg-dark-texture);
    color: var(--color-text-light);
     /* Example texture - replace with actual image if available */
    /* background-image: url('image/subtle-dark-texture.jpg');
       data-prompt="Subtle dark grey abstract metallic texture for background" */
}
.bg-dark-texture h1, .bg-dark-texture h2, .bg-dark-texture h3, .bg-dark-texture p {
    color: var(--color-text-light);
}
.bg-dark-texture .section-title::after {
    background-color: var(--color-text-light); /* White underline on dark bg */
}


.section-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    color: var(--color-text-dark-secondary);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(var(--spacing-unit) * 2.5); /* 40px */
}
.bg-dark-texture .section-subtitle {
    color: var(--color-text-light-secondary);
}


/* 4. Header & Navigation
------------------------------------ */
.site-header {
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: calc(var(--spacing-unit) * 0.75) 0; /* 12px */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: var(--shadow-light);
    height: var(--header-height);
}

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

.logo {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-text-dark-headings);
    text-decoration: none;
}
.logo:hover { text-decoration: none; }

.logo .logo-accent {
    color: var(--color-primary);
}

.main-nav .nav-list {
    display: flex;
    align-items: center;
}

.main-nav .nav-link {
    font-family: var(--font-primary);
    color: var(--color-text-dark-secondary);
    padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit); /* 8px 16px */
    text-decoration: none;
    font-weight: 500;
    position: relative;
    font-size: 1rem;
}

.main-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: var(--transition-fast);
}

.main-nav .nav-link:hover::after,
.main-nav .nav-link.active::after { /* Add 'active' class via JS */
    width: 70%;
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active {
    color: var(--color-primary-dark);
    text-decoration: none;
}

.nav-toggle { /* Burger icon */
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Above nav list on mobile */
}

.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-text-dark);
    position: relative;
    transition: var(--transition-smooth);
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-text-dark);
    transition: var(--transition-smooth);
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    bottom: -8px;
}

/* Burger active state (JS adds 'nav-open' to body or header) */
.nav-open .hamburger {
    background-color: transparent; /* Middle line disappears */
}
.nav-open .hamburger::before {
    transform: translateY(8px) rotate(45deg);
}
.nav-open .hamburger::after {
    transform: translateY(-8px) rotate(-45deg);
}


/* 5. Hero Section
------------------------------------ */
.hero-section {
    color: var(--color-text-light);
    padding: calc(var(--header-height) + var(--spacing-unit) * 3) 0 calc(var(--spacing-unit) * 5); /* Top padding includes header height */
    min-height: 70vh; /* Ensure it's substantial but not fixed */
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    max-width: 800px;
}

.hero-title {
    color: #FFFFFF !important; /* As requested */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    margin-bottom: var(--spacing-unit);
}

.hero-subtitle {
    color: #FFFFFF !important; /* As requested */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    font-weight: 400;
}

.btn-hero {
    padding: calc(var(--spacing-unit)*0.9) calc(var(--spacing-unit)*2.5); /* 14px 40px */
    font-size: 1.1rem;
}

/* 6. Buttons (Global)
------------------------------------ */
.btn, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 2px solid transparent;
    padding: calc(var(--spacing-unit)*0.75) calc(var(--spacing-unit)*1.5); /* 12px 24px */
    font-size: 1rem;
    border-radius: var(--border-radius-medium);
    transition: var(--transition-smooth);
    text-decoration: none; /* Remove underline from <a> tags styled as buttons */
}
.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    text-decoration: none; /* Ensure no underline on hover */
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-bg-dark); /* Text color for primary button */
    border-color: var(--color-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-bg-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-futuristic);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--color-primary);
    color: var(--color-bg-dark);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}
.bg-dark-texture .btn-secondary {
    color: var(--color-text-light);
    border-color: var(--color-text-light);
}
.bg-dark-texture .btn-secondary:hover, .bg-dark-texture .btn-secondary:focus {
    background-color: var(--color-text-light);
    color: var(--color-bg-dark);
    border-color: var(--color-text-light);
}


/* Read More Link Style */
.read-more-link {
    font-weight: 700;
    color: var(--color-primary);
    display: inline-block;
    position: relative;
    padding-right: calc(var(--spacing-unit) * 1.2); /* Space for arrow */
}
.read-more-link::after {
    content: '→'; /* Simple arrow */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: var(--transition-fast);
}
.read-more-link:hover::after {
    transform: translateY(-50%) translateX(3px);
}
.read-more-link:hover {
    text-decoration: underline;
    color: var(--color-primary-dark);
}

/* 7. Cards (Generic)
------------------------------------ */
.card {
    background-color: #fff;
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-medium);
    overflow: hidden;
    transition: var(--transition-smooth);
    display: flex; /* For vertical centering if needed and for strict rules */
    flex-direction: column; /* Stack image and content */
    height: 100%; /* Make cards in a grid equal height */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-strong);
}

.bg-dark-texture .card {
    background-color: rgba(255, 255, 255, 0.05); /* Subtle glassmorphism on dark bg */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid var(--color-neutral-border);
    color: var(--color-text-light);
}
.bg-dark-texture .card h3, .bg-dark-texture .card p {
    color: var(--color-text-light);
}
.bg-dark-texture .card .btn-secondary { /* Ensure button contrast */
    color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}
.bg-dark-texture .card .btn-secondary:hover {
    background-color: var(--color-primary-light);
    color: var(--color-bg-dark);
}


.card-image { /* Wrapper for image */
    width: 100%;
    height: 200px; /* Fixed height for consistent card images */
    overflow: hidden; /* Crucial for object-fit */
    background-color: var(--color-bg-medium); /* Placeholder while image loads */
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area, might crop */
    transition: transform 0.4s ease;
}
.card:hover .card-image img {
    transform: scale(1.05); /* Subtle zoom on hover */
}

.card-content {
    padding: calc(var(--spacing-unit) * 1.5); /* 24px */
    flex-grow: 1; /* Allows content to fill space if card heights vary */
    display: flex;
    flex-direction: column;
    /* text-align: center; /* STRICT: Center content if design calls for it */
}
.card-content h3 {
    font-size: 1.4rem;
    color: var(--color-text-dark-headings);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.card-content p {
    font-size: 0.95rem;
    color: var(--color-text-dark-secondary);
    flex-grow: 1; /* Pushes button to bottom if present */
    margin-bottom: var(--spacing-unit);
}
.card-content .btn {
    margin-top: auto; /* Pushes button to bottom */
    align-self: flex-start; /* Default align for button, can be centered if needed */
}
/* Centering text and button inside card-content */
.card.text-center .card-content,
.feature-card .card-content, /* Example specific card centering */
.success-story-card .card-content {
    text-align: center;
}
.card.text-center .card-content .btn,
.feature-card .card-content .btn,
.success-story-card .card-content .btn {
    align-self: center;
}


/* Grid layouts for cards */
.features-grid, .services-grid, .success-stories-grid, .testimonials-grid, .resources-grid, .press-grid {
    display: grid;
    gap: calc(var(--spacing-unit) * 1.8); /* ~30px */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
}


/* 8. Section Specific Styles
------------------------------------ */

/* 8.1 Features Section */
.feature-card h3 {
    color: var(--color-primary);
    font-size: 1.5rem;
}

/* 8.2 Services Section */
.service-card .service-title {
    font-size: 1.6rem;
}

/* 8.3 Methodology Section (Accordion) */
.accordion-container {
    max-width: 800px;
    margin: 0 auto;
}
.accordion-item {
    background-color: #fff;
    margin-bottom: var(--spacing-unit);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-light);
    overflow: hidden;
}
.accordion-header {
    background-color: transparent;
    border: none;
    width: 100%;
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
    text-align: left;
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-dark-headings);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--transition-fast);
}
.accordion-header:hover {
    background-color: var(--color-bg-light-texture);
}
.accordion-icon {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    transition: transform var(--transition-fast);
}
.accordion-item.active .accordion-icon {
    transform: rotate(45deg);
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}
.accordion-content p {
    padding: 0 calc(var(--spacing-unit) * 1.5) var(--spacing-unit);
    font-size: 1rem;
    color: var(--color-text-dark-secondary);
    margin: 0; /* remove default p margin if padding is on content */
}
.accordion-item.active .accordion-content {
    /* max-height will be set by JS based on content */
    padding-bottom: var(--spacing-unit);
}


/* 8.4 Behind The Scenes Section */
.behind-scenes-section {
    /* Background image and overlay handled by global styles if HTML has it */
    color: var(--color-text-light);
}
.behind-scenes-section .section-title,
.behind-scenes-section .section-subtitle,
.behind-scenes-section p {
    color: var(--color-text-light); /* Ensure text is light on dark BG */
}
.behind-scenes-content .card-image { /* Image is not a card here, just an image */
    border-radius: var(--border-radius-large);
    overflow: hidden;
    margin: 0 auto calc(var(--spacing-unit)*1.5);
    box-shadow: var(--shadow-strong);
    max-width: 700px; /* As per HTML */
    height: auto; /* Adjust from fixed card-image height */
}
.behind-scenes-content .card-image img {
    object-fit:contain; /* Or cover, depending on desired look */
}
.behind-scenes-content p {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1rem;
    line-height: 1.8;
}

/* 8.5 Success Stories Section */
/* Uses generic card styles. Specific styles if needed. */
.success-story-card .story-title {
    font-size: 1.3rem;
}

/* 8.6 Testimonials Section */
.testimonial-card {
    background-color: var(--color-primary-light); /* Light blue bg for testimonials */
    background-image: linear-gradient(135deg, rgba(var(--rgb-primary),0.15), rgba(var(--rgb-primary),0.05));
    border-left: 5px solid var(--color-primary);
    padding: var(--spacing-unit);
}
.testimonial-card .card-content {
    text-align: left; /* Testimonials are usually not fully centered */
}
.testimonial-quote {
    font-style: italic;
    font-size: 1.1rem;
    margin-bottom: var(--spacing-unit);
    position: relative;
    padding-left: calc(var(--spacing-unit)*1.5);
}
.testimonial-quote::before {
    content: '“';
    font-family: Georgia, serif;
    font-size: 3rem;
    color: var(--color-primary);
    position: absolute;
    left: -5px;
    top: -10px;
    opacity: 0.8;
}
.testimonial-author {
    font-weight: 700;
    color: var(--color-text-dark-headings);
    text-align: right;
    font-size: 1rem;
}

/* 8.7 External Resources Section */
.resource-card {
    /* Basic card style, maybe less shadow or different bg */
    background-color: var(--color-bg-light);
}
.resource-card h4 a {
    font-family: var(--font-primary);
    color: var(--color-text-dark-headings);
    font-size: 1.2rem;
}
.resource-card h4 a:hover {
    color: var(--color-primary);
}

/* 8.8 Press Section */
.press-card .card-image {
    width: 100px; /* Smaller images for logos */
    height: 70px;
    margin: 0 auto var(--spacing-unit); /* Center logo */
    border-radius: var(--border-radius-small);
}
.press-card .card-image img {
    object-fit: contain; /* Logos should not be cropped */
}
.press-card .card-content {
    text-align: center;
}
.press-title {
    font-size: 1.2rem;
}

/* 8.9 Community Section */
.community-section {
    color: var(--color-text-light);
    background-color: #222222;
}
.community-section .section-title,
.community-section .section-subtitle,
.community-section p,
.community-section li {
    color: var(--color-text-light);
}
.community-image {
    border-radius: var(--border-radius-large);
    margin-bottom: var(--spacing-unit);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.community-benefits {
    text-align: left;
    max-width: 600px;
    margin: var(--spacing-unit) auto calc(var(--spacing-unit) * 1.5);
    padding-left: var(--spacing-unit);
}
.community-benefits li {
    padding-left: calc(var(--spacing-unit) * 1.5);
    position: relative;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    font-size: 1.05rem;
}
.community-benefits li::before {
    content: '✓'; /* Checkmark */
    color: var(--color-primary-light);
    position: absolute;
    left: 0;
    font-weight: bold;
}


/* 8.10 Contact Section */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column on small screens */
    gap: calc(var(--spacing-unit) * 3);
}

.contact-form-container, .contact-details-container {
    padding: var(--spacing-unit); /* Some padding around content */
}

.contact-subtitle {
    font-size: 1.8rem;
    margin-bottom: var(--spacing-unit);
    color: var(--color-text-dark-headings);
}

/* Form styles */
.contact-form .form-group {
    margin-bottom: calc(var(--spacing-unit) * 1.2);
}
.contact-form label {
    display: block;
    font-weight: 500;
    margin-bottom: calc(var(--spacing-unit) * 0.3);
    color: var(--color-text-dark-secondary);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: calc(var(--spacing-unit) * 0.75); /* 12px */
    border: 1px solid var(--color-neutral-border-light);
    border-radius: var(--border-radius-medium);
    font-family: var(--font-secondary);
    font-size: 1rem;
    background-color: #fff;
    color: var(--color-text-dark);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--rgb-primary), 0.2);
}
.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}
.contact-form .btn-submit {
    width: 100%;
    padding: calc(var(--spacing-unit) * 0.9); /* 14px */
}

.contact-info p {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    font-size: 1.05rem;
}
.contact-info p strong {
    color: var(--color-text-dark-headings);
}
.map-placeholder img {
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-medium);
    margin-top: var(--spacing-unit);
}

/* 9. Footer
------------------------------------ */
.site-footer {
    background-color: var(--color-bg-dark-texture);
    color: var(--color-text-light-secondary);
    padding: calc(var(--spacing-unit) * 3) 0 0;
}
.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: calc(var(--spacing-unit) * 2);
    padding-bottom: calc(var(--spacing-unit) * 2);
}
.site-footer h4 {
    font-family: var(--font-primary);
    color: var(--color-text-light);
    font-size: 1.3rem;
    margin-bottom: var(--spacing-unit);
}
.site-footer ul li {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.site-footer a {
    color: var(--color-text-light-secondary);
    text-decoration: none;
}
.site-footer a:hover {
    color: var(--color-primary-light);
    text-decoration: underline;
}
.footer-social .social-links-text li a {
    /* Text links are default, no special styling needed beyond standard <a> */
    display: inline-block; /* If needed for spacing */
}
.footer-bottom {
    border-top: 1px solid var(--color-neutral-border);
    padding: var(--spacing-unit) 0;
    text-align: center;
    font-size: 0.9rem;
}
.footer-bottom p {
    margin-bottom: 0;
}


/* 10. Special Page Styles
------------------------------------ */
/* Success Page */
.success-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--header-height) - 68px); /* 68px approx footer height, adjust if needed */
    text-align: center;
    padding: var(--spacing-unit); /* Add some padding */
    margin-top: var(--header-height); /* Account for fixed header */
}
.success-page-container h1 {
    color: var(--color-primary);
    font-size: 3rem;
    margin-bottom: var(--spacing-unit);
}
.success-page-container p {
    font-size: 1.2rem;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.success-page-container .icon-success { /* Example */
    font-size: 5rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-unit);
}

/* Privacy Policy & Terms Pages */
.legal-page-content {
    padding-top: calc(var(--header-height) + var(--spacing-unit) * 2); /* Ensure content below fixed header */
    padding-bottom: calc(var(--spacing-unit) * 2);
    min-height: calc(100vh - var(--header-height) - 68px); /* Adjust footer height approx */
}
.legal-page-content .container h1 {
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.legal-page-content .container h2 {
    font-size: 1.8rem;
    margin-top: calc(var(--spacing-unit) * 2);
    margin-bottom: var(--spacing-unit);
    color: var(--color-text-dark-headings);
}
.legal-page-content .container p,
.legal-page-content .container ul li {
    line-height: 1.8;
    color: var(--color-text-dark-secondary);
}
.legal-page-content .container ul {
    list-style: disc;
    padding-left: calc(var(--spacing-unit) * 1.5);
}

/* Cookie Popup (basic fallback if inline styles are removed or for consistency) */
#cookie-popup {
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
}
#cookie-popup p a:hover {
    color: #FFF; /* Ensure hover is visible on dark bg */
}
#accept-cookie:hover {
    background-color: var(--color-primary-dark) !important;
}


/* 11. Animations & Transitions (General)
------------------------------------ */
/* AOS animations are handled by the library.
   These are for general hover effects etc. */

/* Parallax effect for background images (simple version) */
.parallax-bg {
    background-attachment: fixed;
}
/* More complex parallax would require JS */


/* Glassmorphism example class (can be applied to cards or elements) */
.glassmorphism {
    background: rgba(255, 255, 255, 0.05); /* Adjust alpha for lightness/darkness */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-medium);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.bg-dark-texture .glassmorphism {
    background: rgba(var(--rgb-primary), 0.05); /* Tinted glass on dark */
    border: 1px solid rgba(var(--rgb-primary), 0.1);
}


/* 12. Responsive Design
------------------------------------ */
@media (max-width: 992px) {
    .contact-grid {
        /* Already 1fr by default for mobile-first, can adjust here for medium screens if needed */
    }
    .features-grid, .services-grid, .success-stories-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 70px;
    }
    h1 { font-size: 2.2rem; }
    h2.section-title { font-size: 1.8rem; }

    .main-nav .nav-list {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        background-color: rgba(255, 255, 255, 0.98); /* Slightly more opaque for mobile */
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth slide */
        padding-bottom: var(--header-height); /* Space for potential bottom bar or just padding */
        overflow-y: auto; /* Allow scrolling if content overflows */
    }
    .nav-open .main-nav .nav-list {
        transform: translateX(0);
    }
    .main-nav .nav-link {
        font-size: 1.5rem; /* Larger links for mobile menu */
        padding: var(--spacing-unit) 0;
        width: 80%;
        text-align: center;
        border-bottom: 1px solid var(--color-neutral-border-light);
    }
    .main-nav .nav-link:last-child {
        border-bottom: none;
    }
    .main-nav .nav-link::after { /* Mobile nav link indicator */
        display: none; /* Or style differently */
    }
    .main-nav .nav-link:hover,
    .main-nav .nav-link.active {
        color: var(--color-primary);
        background-color: rgba(var(--rgb-primary), 0.05);
    }

    .nav-toggle {
        display: block; /* Show burger icon */
    }

    .hero-section {
        padding-top: calc(var(--header-height) + var(--spacing-unit) * 1.5);
        padding-bottom: calc(var(--spacing-unit) * 3);
        min-height: 60vh;
    }

    .contact-grid {
        grid-template-columns: 1fr; /* Ensure single column for contact form/details */
    }

    .footer-container {
        grid-template-columns: 1fr; /* Stack footer columns */
        text-align: center;
    }
    .footer-container > div {
        margin-bottom: var(--spacing-unit);
    }
    .site-footer ul {
        padding-left: 0;
    }
}

@media (min-width: 769px) {
    /* Specific rules for larger screens, e.g., if contact was 2/3 and 1/3 */
    .contact-grid {
      grid-template-columns: 2fr 1fr; /* Example: form takes 2/3, details 1/3 */
                                    /* This satisfies "is-two-thirds" concept for one column */
    }
    /* If details should be on the right (default due to HTML order is details-container second)
       .contact-form-container { order: 1; }
       .contact-details-container { order: 2; }
    */
}