/* style.css */

/*------------------------------------------------------------------
[TABLE OF CONTENTS]

1.  CSS Variables
2.  Global Styles & Typography
3.  Utility Classes
4.  Layout (Container, Grids)
5.  Button Styles (Global)
6.  Form Styles (Global)
7.  Card Component (Global)
8.  Volumetric Elements & UI
9.  Header & Navigation
10. Hero Section
11. Features Section
12. Methodology Section (Timeline)
13. Success Stories Section (Carousel)
14. Pricing Section
15. External Resources Section
16. Media Section
17. Contact Section
18. Footer
19. Specific Page Styles (Success, Privacy, Terms)
20. Animations & Scroll Effects
21. Responsive Design
-------------------------------------------------------------------*/

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

    --color-text: #333333;
    --color-text-light: #FFFFFF;
    --color-text-subtle: #555555;
    --color-heading: #222222;

    --color-bg-page: #f4f6f8; /* Light grayish blue */
    --color-bg-section-light: #FFFFFF;
    --color-bg-section-medium: #e9ecef; /* Slightly darker than page for subtle contrast */
    --color-bg-section-dark: #212529; /* Footer */
    --color-bg-card: #FFFFFF;

    --color-primary: #005A9C; /* Professional Blue */
    --color-primary-dark: #004170;
    --color-accent: #FF8C00; /* Dark Orange for CTAs */
    --color-accent-dark: #CC7000;

    --color-border: #ced4da;
    --color-shadow-light: rgba(0, 0, 0, 0.05);
    --color-shadow-medium: rgba(0, 0, 0, 0.1);
    --color-shadow-dark: rgba(0, 0, 0, 0.15);

    --volumetric-shadow-small: 2px 2px 5px var(--color-shadow-light), -1px -1px 3px var(--color-bg-section-light);
    --volumetric-shadow-medium: 4px 4px 10px var(--color-shadow-medium), -2px -2px 8px rgba(255,255,255,0.8);
    --volumetric-shadow-large: 6px 6px 15px var(--color-shadow-dark), -4px -4px 12px rgba(255,255,255,0.7);
    --volumetric-shadow-inset: inset 2px 2px 5px var(--color-shadow-medium), inset -2px -2px 5px rgba(255,255,255,0.7);

    --spacing-xs: 0.5rem;  /* 8px */
    --spacing-sm: 1rem;    /* 16px */
    --spacing-md: 1.5rem;  /* 24px */
    --spacing-lg: 2.5rem;  /* 40px */
    --spacing-xl: 4rem;    /* 64px */

    --section-padding: var(--spacing-lg) 0;
    --section-padding-large: var(--spacing-xl) 0;

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

    --transition-speed: 0.3s ease-in-out;
    --transition-speed-fast: 0.2s ease-in-out;

    --header-height: 80px;
    --footer-height: auto;

    --max-width-container: 1200px;
}

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

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

body {
    font-family: var(--font-secondary);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text);
    background-color: var(--color-bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll caused by animations */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--color-heading);
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
    font-weight: 700;
    text-rendering: optimizeLegibility;
}

h1 { font-size: 2.8rem; margin-bottom: var(--spacing-md); }
h2 { font-size: 2.2rem; margin-bottom: var(--spacing-md); } /* Section titles */
h3 { font-size: 1.6rem; margin-bottom: var(--spacing-sm); } /* Card titles */
h4 { font-size: 1.25rem; }

p {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-subtle);
}

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

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

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

ul, ol {
    margin-bottom: var(--spacing-sm);
    padding-left: var(--spacing-md); /* Default padding for lists */
}
li {
    margin-bottom: var(--spacing-xs);
}

section {
    padding: var(--section-padding);
}

.bg-light {
    background-color: var(--color-bg-section-light);
}

.bg-medium {
    background-color: var(--color-bg-section-medium);
}

.bg-dark {
    background-color: var(--color-bg-section-dark);
    color: var(--color-text-light);
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark p, .bg-dark li {
    color: var(--color-text-light);
}
.bg-dark a {
    color: var(--color-accent);
}
.bg-dark a:hover {
    color: #ffd07a; /* Lighter accent for hover on dark bg */
}

/* 3. Utility Classes
-------------------------------------------------------------------*/
.text-center {
    text-align: center;
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-heading);
    font-weight: 700;
}

.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: var(--color-text-subtle);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-md);
}

/* 4. Layout (Container, Grids)
-------------------------------------------------------------------*/
.container {
    width: 90%;
    max-width: var(--max-width-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

/* Basic Grid for Features, Pricing etc. */
.features-grid, .pricing-grid, .media-grid, .resources-list {
    display: grid;
    gap: var(--spacing-md);
}

@media (min-width: 768px) {
    .features-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .pricing-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .media-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .resources-list { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}

/* 5. Button Styles (Global)
-------------------------------------------------------------------*/
.cta-button,
.cta-button-outline,
button, /* Includes form submit */
input[type="submit"], /* For older forms */
input[type="button"] {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    padding: 0.8em 1.8em;
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
    border: 2px solid transparent;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cta-button {
    background-color: var(--color-accent);
    color: var(--color-text-light);
    border-color: var(--color-accent);
}
.cta-button:hover, .cta-button:focus {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-text-light);
    text-decoration: none;
    transform: translateY(-2px);
}

.cta-button-outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.cta-button-outline:hover, .cta-button-outline:focus {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    text-decoration: none;
    transform: translateY(-2px);
}

.volumetric-button { /* Applied to .cta-button, .cta-button-outline */
    box-shadow: var(--volumetric-shadow-small);
}
.volumetric-button:hover, .volumetric-button:focus {
    box-shadow: 4px 4px 12px var(--color-shadow-medium), -3px -3px 10px rgba(255,255,255,0.7);
}
.volumetric-button:active {
    transform: translateY(1px);
    box-shadow: var(--volumetric-shadow-inset);
}


/* 6. Form Styles (Global)
-------------------------------------------------------------------*/
.form-group {
    margin-bottom: var(--spacing-sm);
}

.form-group label {
    display: block;
    font-family: var(--font-primary);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.8em 1em;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    font-family: var(--font-secondary);
    font-size: 1rem;
    color: var(--color-text);
    background-color: var(--color-bg-section-light);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    box-shadow: var(--volumetric-shadow-inset); /* Subtle inset for volumetric feel */
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="password"]:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.1), var(--volumetric-shadow-inset);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

/* 7. Card Component (Global)
-------------------------------------------------------------------*/
.card {
    background-color: var(--color-bg-card);
    border-radius: var(--border-radius-large);
    overflow: hidden; /* Ensures content respects border radius */
    display: flex;
    flex-direction: column;
    height: 100%; /* Makes cards in a grid equal height */
    text-align: left; /* Default text alignment */
}

.card.volumetric-element { /* Apply volumetric shadow defined globally */
    box-shadow: var(--volumetric-shadow-medium);
}
.card.volumetric-element:hover {
    transform: translateY(-5px);
    box-shadow: var(--volumetric-shadow-large);
}


.card-image.image-container { /* User's HTML uses both classes */
    width: 100%;
    overflow: hidden;
    position: relative; /* For potential overlays */
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Specific heights for image containers where needed */
.features-section .card-image.image-container { height: 200px; }
.methodology-section .card-image.image-container { height: 230px; }
.success-stories-section .card-image.image-container {
    width: 100px; /* Smaller, circular for testimonials */
    height: 100px;
    border-radius: 50%;
    margin: var(--spacing-sm) auto; /* Center it */
}
.media-section .card-image.image-container img { /* Media logos might be smaller, object-fit contain */
    object-fit: contain;
    padding: var(--spacing-xs);
}
.media-section .media-item.card .card-image.image-container {
    height: 120px; /* Example height for media images/logos */
}
.media-section .media-item.card img[alt*="Conférencier"],
.media-section .media-item.card img[alt*="webinaire"] {
    object-fit: cover; /* Cover for photos */
    height: 180px;
}


.card-image.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Default to cover */
    transition: transform var(--transition-speed);
}
.card:hover .card-image.image-container img {
    transform: scale(1.05);
}

.card-content {
    padding: var(--spacing-md);
    flex-grow: 1; /* Allows content to fill space, useful for equal height cards */
    display: flex;
    flex-direction: column;
}
.card-content h3 {
    margin-top: 0; /* Remove top margin if image is directly above */
    color: var(--color-heading);
}
.card-content p {
    font-size: 0.95rem;
    color: var(--color-text-subtle);
    flex-grow: 1; /* Pushes elements like buttons to bottom if card is flex-column */
}
.card-content .cta-button, .card-content .cta-button-outline {
    margin-top: auto; /* Pushes button to the bottom of the card */
    align-self: flex-start; /* Align button to the start of cross axis */
}

/* Centering for specific cards, if overall card isn't text-center */
.success-stories-section .card-content {
    text-align: center;
}
.success-stories-section .card-content h4 {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    color: var(--color-heading);
}
.success-stories-section .card-content span {
    font-size: 0.9rem;
    color: var(--color-primary);
    font-family: var(--font-secondary);
    font-weight: 700;
}


/* 8. Volumetric Elements & UI
-------------------------------------------------------------------*/
/* .volumetric-element class is defined in Card styles, can be used elsewhere too */
/* Applied to icons, buttons, cards by default */

/* 9. Header & Navigation
-------------------------------------------------------------------*/
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.9); /* Slight transparency */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px var(--color-shadow-light);
    padding: 0; /* Remove default section padding */
    transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
}

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

.main-navigation .nav-list {
    list-style: none;
    display: flex;
    padding-left: 0; /* Override default ul padding */
    margin-bottom: 0; /* Override default ul margin */
}

.main-navigation .nav-list li {
    margin-left: var(--spacing-md);
    margin-bottom: 0;
}

.main-navigation .nav-list a {
    font-family: var(--font-primary);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 400;
    padding: 0.5em 0;
    position: relative;
    transition: color var(--transition-speed);
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

.main-navigation .nav-list a:hover,
.main-navigation .nav-list a.active-link { /* Assuming JS adds .active-link */
    color: var(--color-primary);
}

.main-navigation .nav-list a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-speed);
}

.main-navigation .nav-list a:hover::after,
.main-navigation .nav-list a.active-link::after {
    width: 100%;
}

.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    z-index: 1001; /* Above nav list on mobile */
}

.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-heading);
    position: relative;
    transition: background-color var(--transition-speed-fast);
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-heading);
    transition: transform var(--transition-speed), top var(--transition-speed), bottom var(--transition-speed);
}

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

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


/* 10. Hero Section
-------------------------------------------------------------------*/
.hero-section {
    /* height: calc(100vh - var(--header-height)); Minimum height example, adjust as needed */
    min-height: 80vh; /* Ensure it's substantial but not always full screen */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative; /* For overlay if not inline */
    padding-top: var(--header-height); /* Account for fixed header */
}

.hero-content {
    max-width: 800px;
    animation: fadeInFromBottom 1s ease-out forwards;
}
.hero-content h1 {
    font-size: 3.5rem; /* From HTML style */
    color: var(--color-text-light); /* From HTML style */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* From HTML style */
    margin-bottom: var(--spacing-md);
}
.hero-content p {
    font-size: 1.25rem; /* From HTML style */
    color: var(--color-text-light); /* From HTML style */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* From HTML style */
    margin-bottom: var(--spacing-lg);
}
.hero-section .cta-button {
    padding: 1em 2.5em;
    font-size: 1.1rem;
}

@keyframes fadeInFromBottom {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 11. Features Section - Uses global card and grid styles */

/* 12. Methodology Section (Timeline)
-------------------------------------------------------------------*/
.methodology-section { background-color: var(--color-bg-section-medium); }

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-md) 0;
}
.timeline::after { /* The central line */
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--color-primary);
    opacity: 0.3;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    border-radius: var(--border-radius-small);
}

.timeline-item {
    padding: var(--spacing-sm) var(--spacing-lg);
    position: relative;
    background-color: inherit;
    width: 50%;
}
/* Odd items on the left */
.timeline-item:nth-child(odd) {
    left: 0;
    padding-right: calc(var(--spacing-lg) + 30px); /* 30px is half icon width + space */
}
/* Even items on the right */
.timeline-item:nth-child(even) {
    left: 50%;
    padding-left: calc(var(--spacing-lg) + 30px); /* 30px is half icon width + space */
}

.timeline-icon.volumetric-element {
    position: absolute;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-light);
    background-color: var(--color-primary);
    text-align: center;
    border-radius: 50%;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-primary);
    box-shadow: var(--volumetric-shadow-medium); /* Using volumetric class */
}
.timeline-item:nth-child(odd) .timeline-icon {
    right: -30px; /* Half of its width to sit on the line */
}
.timeline-item:nth-child(even) .timeline-icon {
    left: -30px; /* Half of its width to sit on the line */
}

.timeline-content.card {
    position: relative;
    /* Volumetric provided by .card.volumetric-element */
}
.timeline-content h3 {
    color: var(--color-primary);
}


/* 13. Success Stories Section (Carousel)
-------------------------------------------------------------------*/
.content-carousel {
    display: flex;
    overflow-x: auto; /* Basic scroll, JS will enhance */
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-sm); /* For scrollbar or shadow visibility */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.content-carousel::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.carousel-item {
    min-width: 300px; /* Adjust as needed */
    flex-shrink: 0;
}

.carousel-controls {
    text-align: center;
    margin-top: var(--spacing-md);
}
.carousel-controls button {
    margin: 0 var(--spacing-xs);
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border: none;
    width: 45px;
    height: 45px;
    padding: 0;
    font-size: 1.5rem;
}
.carousel-controls button:hover {
    background-color: var(--color-primary-dark);
}

/* 14. Pricing Section
-------------------------------------------------------------------*/
.pricing-section { background-color: var(--color-bg-section-medium); }
.pricing-plan.card {
    text-align: center;
    padding-top: var(--spacing-md); /* Add padding inside for popular badge */
}
.pricing-plan h3 {
    font-size: 1.8rem;
    color: var(--color-primary);
}
.pricing-plan .price {
    font-size: 2.5rem;
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--color-heading);
    margin: var(--spacing-sm) 0;
}
.pricing-plan .price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-subtle);
    font-family: var(--font-secondary);
}
.pricing-plan ul {
    list-style: none;
    padding-left: 0;
    margin: var(--spacing-md) 0;
}
.pricing-plan ul li {
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-subtle);
}
.pricing-plan ul li:last-child {
    border-bottom: none;
}
.pricing-plan .cta-button, .pricing-plan .cta-button-outline {
    width: 80%;
    margin: var(--spacing-sm) auto 0;
}
.pricing-plan.popular {
    border: 2px solid var(--color-accent);
    position: relative;
    box-shadow: 0 0 25px rgba(var(--color-accent), 0.3), var(--volumetric-shadow-large); /* Enhanced shadow */
}
.popular-badge {
    position: absolute;
    top: -1px; /* Adjust to sit nicely on border */
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: var(--color-accent);
    color: var(--color-text-light);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.9rem;
    font-family: var(--font-primary);
    font-weight: 700;
    border-radius: var(--border-radius-small);
    text-transform: uppercase;
}
.pricing-note {
    text-align: center;
    margin-top: var(--spacing-lg);
    font-size: 0.9rem;
    color: var(--color-text-subtle);
}


/* 15. External Resources Section
-------------------------------------------------------------------*/
.resource-item.card {
    /* Standard card styling applies */
}
.resource-item h3 a {
    color: var(--color-primary);
    font-size: 1.2rem;
}
.resource-item h3 a:hover {
    color: var(--color-primary-dark);
}
.resource-item p {
    font-size: 0.9rem;
}

/* 16. Media Section
-------------------------------------------------------------------*/
.media-section { background-color: var(--color-bg-section-medium); }
.media-item.card {
    text-align: center;
}
.media-item .card-content p {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text);
}


/* 17. Contact Section
-------------------------------------------------------------------*/
.contact-wrapper {
    display: grid;
    gap: var(--spacing-lg);
}
@media (min-width: 992px) {
    .contact-wrapper {
        grid-template-columns: 2fr 1fr; /* Form takes more space */
    }
}
.contact-form-container.volumetric-element {
    padding: var(--spacing-lg);
}
.contact-info h3 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}
.contact-info ul {
    list-style: none;
    padding-left: 0;
}
.contact-info ul li {
    margin-bottom: var(--spacing-sm);
    font-size: 1.05rem;
    color: var(--color-text-subtle);
}
.contact-info ul li strong {
    color: var(--color-text);
    font-weight: 700;
}
.map-placeholder img {
    border-radius: var(--border-radius-medium);
    margin-top: var(--spacing-md);
    box-shadow: var(--volumetric-shadow-small);
    width: 100%; /* Ensure map image is responsive */
    height: 250px; /* Match HTML attribute */
    object-fit: cover;
}


/* 18. Footer
-------------------------------------------------------------------*/
.site-footer {
    padding: var(--section-padding-large) 0 var(--spacing-lg);
    color: rgba(255,255,255,0.8); /* Slightly muted white */
}
.site-footer h4 {
    font-family: var(--font-primary);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
    font-size: 1.3rem;
}
.footer-grid {
    display: grid;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}
@media (min-width: 576px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .footer-grid { grid-template-columns: repeat(4, 1fr); }
}

.footer-column ul {
    list-style: none;
    padding-left: 0;
}
.footer-column ul li a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color var(--transition-speed-fast);
}
.footer-column ul li a:hover {
    color: var(--color-text-light);
    text-decoration: underline;
}
.footer-column p {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    margin-bottom: var(--spacing-xs);
}
.footer-column p a {
    color: rgba(255,255,255,0.7);
}
.footer-column p a:hover {
    color: var(--color-text-light);
}

.social-links-text li { /* Styling for text-based social links */
    margin-bottom: var(--spacing-xs);
}
.social-links-text a {
    display: inline-block; /* If icons were used, this would help */
}

.copyright {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
}

/* 19. Specific Page Styles
-------------------------------------------------------------------*/
/* success.html */
.success-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    padding: var(--spacing-md);
    background-color: var(--color-bg-page);
}
.success-page-container h1 {
    color: var(--color-primary);
    font-size: 3rem;
}
.success-page-container p {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-lg);
}
.success-page-container .cta-button {
    background-color: var(--color-success); /* Assuming success color */
    border-color: var(--color-success);
}
.success-page-container .cta-button:hover {
    background-color: #1f7a35; /* Darker success */
    border-color: #1f7a35;
}

/* privacy.html, terms.html */
.static-page-content {
    padding-top: calc(var(--header-height) + var(--spacing-lg));
    padding-bottom: var(--spacing-xl);
    background-color: var(--color-bg-section-light); /* Ensure light background */
    min-height: calc(100vh - var(--header-height) - var(--footer-height)); /* Basic full page feel */
}
.static-page-content .container h1 {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}
.static-page-content .container h2 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    font-size: 1.8rem;
    color: var(--color-primary);
}
.static-page-content .container p,
.static-page-content .container ul,
.static-page-content .container ol {
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
}
.static-page-content .container ul,
.static-page-content .container ol {
    padding-left: var(--spacing-md);
}


/* 20. Animations & Scroll Effects (ScrollReveal basic setup)
-------------------------------------------------------------------*/
[data-scroll-reveal] {
    visibility: hidden; /* Hidden by default, ScrollReveal makes it visible */
}
/* Barba.js transition example */
.barba-leave-active,
.barba-enter-active {
  transition: opacity .5s ease-in-out;
}
.barba-leave-to,
.barba-enter-from {
  opacity: 0;
}


/* 21. Responsive Design
-------------------------------------------------------------------*/
@media (max-width: 991px) { /* Tablet and below */
    .main-navigation .nav-list {
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background-color: var(--color-bg-section-light);
        flex-direction: column;
        align-items: center;
        padding: var(--spacing-md) 0;
        box-shadow: 0 5px 10px var(--color-shadow-light);
        transform: translateY(-150%); /* Start off-screen */
        transition: transform var(--transition-speed), opacity var(--transition-speed);
        opacity: 0;
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
    }
    .main-navigation .nav-list.active {
        transform: translateY(0);
        opacity: 1;
    }
    .main-navigation .nav-list li {
        margin: var(--spacing-sm) 0;
        width: 100%;
        text-align: center;
    }
    .main-navigation .nav-list a {
        display: block;
        padding: var(--spacing-sm);
        font-size: 1.1rem;
    }
    .main-navigation .nav-list a::after { display: none; } /* Remove underline hover on mobile */

    .menu-toggle {
        display: block;
    }
    .menu-toggle.active .hamburger {
        background-color: transparent; /* Middle line disappears */
    }
    .menu-toggle.active .hamburger::before {
        transform: rotate(45deg);
        top: 0;
    }
    .menu-toggle.active .hamburger::after {
        transform: rotate(-45deg);
        bottom: 0;
    }

    .timeline::after { left: 30px; margin-left: 0; }
    .timeline-item { width: 100%; padding-left: calc(var(--spacing-lg) + 45px); padding-right: var(--spacing-sm); }
    .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { left: 0; }
    .timeline-item:nth-child(odd) .timeline-icon, .timeline-item:nth-child(even) .timeline-icon { left: 0px; }

    .hero-content h1 { font-size: 2.5rem; }
    .hero-content p { font-size: 1.1rem; }
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.4rem; }
}

@media (max-width: 767px) { /* Mobile */
    :root {
        --spacing-lg: 2rem;  /* 32px */
        --spacing-xl: 3rem;    /* 48px */
        --section-padding: var(--spacing-lg) 0;
    }
    .hero-content h1 { font-size: 2rem; }
    .hero-content p { font-size: 1rem; }
    .hero-section .cta-button {
        padding: 0.8em 2em;
        font-size: 1rem;
    }

    .contact-wrapper { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr; } /* Single column for small mobile */
    @media (min-width: 500px) and (max-width: 767px) {
        .footer-grid { grid-template-columns: repeat(2, 1fr); } /* Two columns for larger mobile */
    }

    .pricing-plan .cta-button, .pricing-plan .cta-button-outline { width: 100%; }
}

/* Ensure high contrast for text over images/gradients */
.hero-section {
    /* Linear gradient already applied in HTML style attribute for hero */
    /* For other sections if image background is used: */
    /* background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), var(--bg-image-url) center/cover no-repeat; */
}
.hero-section h1, .hero-section p {
    position: relative; /* Ensure text is above pseudo-elements if any were used for overlay */
    z-index: 1;
}

/* Final check for text contrast */
body:not(.bg-dark) .section-title,
body:not(.bg-dark) h1,
body:not(.bg-dark) h2,
body:not(.bg-dark) h3,
body:not(.bg-dark) h4 {
    color: var(--color-heading); /* Ensured dark for light backgrounds */
}

body:not(.bg-dark) p {
    color: var(--color-text-subtle); /* Ensured dark enough for light backgrounds */
}