/* style.css */

:root {
    /* Colors */
    --primary-color-start: #4A00E0; /* Vibrant Purple */
    --primary-color-end: #8E2DE2;   /* Lighter Purple/Violet */
    --gradient-primary: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    --primary-color-start-rgb: 74, 0, 224;
    
    --accent-color-1: #00B4DB;      /* Bright Cyan */
    --accent-color-2: #0083B0;      /* Deeper Cyan/Blue */

    --text-color-light: #FFFFFF;
    --text-color-medium: #F0F0F0;
    --text-color-dark: #333333;
    --text-color-darker: #222222; /* For important headings */
    --text-color-subtle: #555555;
    
    --background-color-light: #FFFFFF;
    --background-color-medium: #F8F9FA;
    --background-color-dark-section: #1A1A2E; /* Dark blue/purple for gradient-like sections */

    --success-color: #28A745;
    --error-color: #DC3545;

    --card-background: var(--background-color-light);
    --card-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    --card-hover-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    --card-border-radius: 12px;

    /* Typography */
    --font-family-heading: 'Roboto', 'Arial', sans-serif;
    --font-family-body: 'Lato', 'Arial', sans-serif;

    --font-size-base: 1rem; /* 16px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-md: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.5rem; /* 24px */
    --font-size-xxl: 2rem; /* 32px */
    --font-size-section-title: clamp(1.8rem, 4.5vw, 2.8rem);
    --font-size-hero-title: clamp(2.5rem, 6vw, 4rem);
    --font-size-hero-subtitle: clamp(1rem, 2.5vw, 1.25rem);


    --line-height-base: 1.7;
    --line-height-heading: 1.3;

    /* Spacing */
    --spacing-unit: 1rem;
    --spacing-xs: calc(var(--spacing-unit) * 0.25); /* 4px */
    --spacing-sm: calc(var(--spacing-unit) * 0.5);  /* 8px */
    --spacing-md: var(--spacing-unit);             /* 16px */
    --spacing-lg: calc(var(--spacing-unit) * 1.5); /* 24px */
    --spacing-xl: calc(var(--spacing-unit) * 2.5);   /* 40px */
    --spacing-xxl: calc(var(--spacing-unit) * 4);  /* 64px */
    --section-padding-y: var(--spacing-xxl);

    /* Borders & Shadows */
    --border-radius-sm: 5px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px; /* same as card */
    --box-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.07);
    --box-shadow-md: 0 5px 15px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.3s;
    --transition-speed-slow: 0.5s;
    --transition-timing-bouncy: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    --transition-timing-smooth: ease-in-out;

    /* Header */
    --header-height: 80px;
    --header-bg: var(--background-color-light);
    --header-shadow: var(--box-shadow-md);
}

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

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family-body);
    line-height: var(--line-height-base);
    color: var(--text-color-dark);
    background-color: var(--background-color-light);
    overflow-x: hidden; /* Prevent horizontal scroll from AOS or other animations */
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: 900;
    line-height: var(--line-height-heading);
    color: var(--text-color-darker);
    margin-bottom: var(--spacing-md);
}

h1 { font-size: var(--font-size-xxl); }
h2 { font-size: var(--font-size-xl); } /* For general page titles if not section */
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-md); }

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

a {
    color: var(--primary-color-end);
    text-decoration: none;
    transition: color var(--transition-speed-fast) var(--transition-timing-smooth);
}
a:hover {
    color: var(--primary-color-start);
    text-decoration: underline;
}

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

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

.section {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

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

.section-gradient {
    background-image: var(--gradient-primary);
    color: var(--text-color-light);
}
.section-gradient .section-title,
.section-gradient .section-intro,
.section-gradient h3,
.section-gradient p,
.section-gradient .accordion,
.section-gradient .resource-card h3 a,
.section-gradient .resource-card p {
    color: var(--text-color-light);
}
.section-gradient .section-title::after {
    background-image: linear-gradient(135deg, var(--text-color-light), var(--accent-color-1));
}
.section-gradient .resource-card {
    background-color: rgba(255,255,255,0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.section-gradient .resource-card:hover {
    background-color: rgba(255,255,255,0.15);
}
.section-gradient .resource-card h3 a:hover {
    color: var(--accent-color-1);
}

.columns {
    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * var(--spacing-sm)); /* Negative margin for gutter */
}
.column {
    padding: var(--spacing-sm); /* Gutter */
    flex-basis: 100%; /* Default to full width on small screens */
}

@media (min-width: 769px) { /* Tablet and up */
    .column.is-one-third { flex-basis: 33.3333%; max-width: 33.3333%; }
    .column.is-half { flex-basis: 50%; max-width: 50%; }
    .column.is-two-thirds { flex-basis: 66.6667%; max-width: 66.6667%; }
    .columns.is-multiline .column { /* Allow multiple rows */
        /* Default behavior is fine */
    }
}
.columns.is-centered { justify-content: center; }
.columns.is-vcentered { align-items: center; }
.columns.is-gapless { margin: 0; }
.columns.is-gapless > .column { padding: 0; }

/* Section Titles & Intro */
.section-title {
    font-size: var(--font-size-section-title);
    text-align: center;
    margin-bottom: var(--spacing-md);
    position: relative;
    padding-bottom: var(--spacing-sm);
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background-image: var(--gradient-primary);
    border-radius: 2px;
}
.section-intro {
    font-size: var(--font-size-lg);
    color: var(--text-color-subtle);
    text-align: center;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-xl);
}

/* Buttons (Global) */
.button, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-family-body);
    font-weight: 700;
    font-size: var(--font-size-md);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--border-radius-md);
    padding: calc(var(--spacing-sm) + var(--spacing-xs)) var(--spacing-lg); /* 10px 24px */
    transition: transform var(--transition-speed-normal) var(--transition-timing-bouncy), 
                box-shadow var(--transition-speed-normal) var(--transition-timing-smooth),
                background-color var(--transition-speed-normal) var(--transition-timing-smooth),
                background-image var(--transition-speed-normal) var(--transition-timing-smooth),
                color var(--transition-speed-normal) var(--transition-timing-smooth),
                border-color var(--transition-speed-normal) var(--transition-timing-smooth);
    user-select: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--box-shadow-md);
}

.button:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: var(--box-shadow-sm);
}

.button:focus-visible, button:focus-visible, input[type="submit"]:focus-visible, input[type="button"]:focus-visible {
    outline: 3px solid var(--accent-color-1);
    outline-offset: 2px;
}

.button-primary {
    background-image: var(--gradient-primary);
    background-size: 150% auto; /* For potential hover animation */
    color: var(--text-color-light);
    border-color: transparent;
}
.button-primary:hover {
    background-position: right center;
    box-shadow: 0 8px 20px rgba(var(--primary-color-start-rgb), 0.35);
}

.button-secondary {
    background-color: transparent;
    color: var(--primary-color-end);
    border: 2px solid var(--primary-color-end);
}
.button-secondary:hover {
    background-color: var(--primary-color-end);
    color: var(--text-color-light);
}

.button-large {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}

/* Header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--header-bg);
    box-shadow: var(--header-shadow);
    height: var(--header-height);
    transition: background-color var(--transition-speed-normal) var(--transition-timing-smooth),
                box-shadow var(--transition-speed-normal) var(--transition-timing-smooth);
}
/* Optional: Scrolled header style */
.site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 var(--spacing-md); /* Use container's padding or specific padding */
}
.container.header-container { /* Override default container padding if needed */
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}


.logo {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: 900;
    color: var(--primary-color-start);
    text-decoration: none;
}

.main-nav ul {
    list-style: none;
    display: flex;
}
.main-nav li:not(:last-child) {
    margin-right: var(--spacing-lg);
}
.main-nav a {
    font-family: var(--font-family-body);
    font-weight: 700;
    color: var(--text-color-dark);
    padding: var(--spacing-sm) 0;
    position: relative;
}
.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color-end);
    transition: width var(--transition-speed-normal) var(--transition-timing-smooth);
}
.main-nav a:hover, .main-nav a.active { /* JS should add 'active' class */
    color: var(--primary-color-end);
}
.main-nav a:hover::after, .main-nav a.active::after {
    width: 100%;
}

.nav-toggle { display: none; } /* Mobile burger menu */

/* Hero Section */
.hero-section {
    color: var(--text-color-light); /* VAЖНО: Text in hero section should be white */
    padding: calc(var(--section-padding-y) * 1.5) 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* For pseudo-element overlay if not using inline style */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* min-height: 70vh; Ensure enough visible area */
}
/* The linear-gradient for overlay is applied inline in HTML. This is an alternative:
.hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    z-index: 1;
}
.hero-content { position: relative; z-index: 2; }
*/
.hero-title {
    font-size: var(--font-size-hero-title);
    font-weight: 900;
    margin-bottom: var(--spacing-md);
    color: var(--text-color-light); /* Explicitly white */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* From HTML, good for contrast */
}
.hero-subtitle {
    font-size: var(--font-size-hero-subtitle);
    margin-bottom: var(--spacing-xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-color-light); /* Explicitly white */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* From HTML */
}
.hero-content .button-primary {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}


/* Cards General Styling */
.card {
    background-color: var(--card-background);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: transform var(--transition-speed-normal) var(--transition-timing-bouncy), 
                box-shadow var(--transition-speed-normal) var(--transition-timing-smooth);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%; /* For equal height cards in a row */
    text-align: center;
}
.card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: var(--card-hover-shadow);
}
.card-image, .image-container { /* Wrapper for image */
    width: 100%;
    height: 220px; /* STROGO: Fixed height for card images */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-image img, .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* STROGO: Ensure image covers the area */
    transition: transform var(--transition-speed-slow) var(--transition-timing-smooth);
}
.card:hover .card-image img, .card:hover .image-container img {
    transform: scale(1.08);
}
.card-content {
    padding: var(--spacing-lg);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes button/link to bottom */
    width: 100%;
}
.card-content h3 {
    font-size: var(--font-size-lg);
    color: var(--text-color-darker);
    margin-bottom: var(--spacing-sm);
}
.card-content p {
    font-size: var(--font-size-md);
    color: var(--text-color-subtle);
    margin-bottom: var(--spacing-md);
    flex-grow: 1;
}
.card-content .button, .card-content .read-more-link {
    margin-top: auto; /* Push to bottom */
    align-self: center; /* Center if not full width */
}

/* Features Section */
.feature-card .animated-icon {
    font-size: 2.5rem;
    color: var(--primary-color-end);
    margin-bottom: var(--spacing-md);
    transition: transform var(--transition-speed-normal) var(--transition-timing-bouncy);
}
.feature-card:hover .animated-icon {
    transform: scale(1.1) rotate(-5deg);
}

/* Innovation Section */
#innovation .responsive-image {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg);
}
.accordion-container { margin-top: var(--spacing-lg); }
.accordion {
    background-color: rgba(255,255,255, 0.15); /* If on gradient section */
    color: var(--text-color-light); /* If on gradient section */
    cursor: pointer;
    padding: var(--spacing-md);
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: var(--font-size-md);
    font-weight: 700;
    transition: background-color var(--transition-speed-fast);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-xs);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#innovation .accordion { /* Specific for innovation if text is light */
    color: var(--text-color-light);
    background-color: rgba(255,255,255,0.1);
}
#innovation .accordion:hover {
    background-color: rgba(255,255,255,0.2);
}
.accordion:not(#innovation .accordion) { /* Default accordion styles */
    background-color: var(--background-color-medium);
    color: var(--text-color-dark);
}
.accordion:not(#innovation .accordion):hover {
    background-color: #e9ecef;
}
.accordion::after { /* Icon for accordion */
    content: '\f078'; /* FontAwesome angle-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    transition: transform var(--transition-speed-normal) var(--transition-timing-smooth);
}
.accordion.active::after {
    transform: rotate(180deg);
}
.panel {
    padding: 0 var(--spacing-md);
    background-color: transparent; /* Assuming parent section handles bg */
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-speed-normal) ease-out, padding var(--transition-speed-normal) ease-out;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
}
.panel p { margin-top: var(--spacing-sm); font-size: var(--font-size-sm); }
#innovation .panel p { color: var(--text-color-medium); }


/* Success Stories & Modals */
.success-story-card .button-secondary { font-size: var(--font-size-sm); }

.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    align-items: center;
    justify-content: center;
}
.modal.is-active { display: flex; } /* Use JS to add/remove this class */

.modal-content-custom {
    background-color: var(--background-color-light);
    margin: auto;
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    width: 90%;
    max-width: 600px;
    box-shadow: var(--box-shadow-lg);
    position: relative;
    animation: modalOpen var(--transition-speed-normal) var(--transition-timing-bouncy);
}
@keyframes modalOpen {
    from { transform: scale(0.9) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
    color: var(--text-color-darker);
}
.modal-content-custom p {
    font-size: var(--font-size-md);
    color: var(--text-color-subtle);
    margin-bottom: var(--spacing-lg);
}
.modal-close-button {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--text-color-subtle);
    cursor: pointer;
    padding: var(--spacing-xs);
    line-height: 1;
}
.modal-close-button::before {
    content: '\00D7'; /* Multiplication sign for X */
}
.modal-close-button:hover { color: var(--error-color); }

/* Press Section */
.press-list { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.press-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--card-background);
    padding: var(--spacing-lg);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    transition: var(--card-hover-shadow) var(--transition-speed-normal) var(--transition-timing-smooth);
}
.press-item:hover { box-shadow: var(--card-hover-shadow); }

.press-item-logo {
    margin-bottom: var(--spacing-md);
    max-width: 150px; /* As per HTML */
    height: 50px; /* As per HTML */
}
.press-item-logo img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}
.press-item-content h4 {
    font-size: var(--font-size-lg);
    color: var(--text-color-darker);
    margin-bottom: var(--spacing-sm);
}
.press-item-content p {
    font-size: var(--font-size-md);
    color: var(--text-color-subtle);
    margin-bottom: var(--spacing-md);
}
.read-more-link {
    font-weight: 700;
    color: var(--primary-color-end);
    text-decoration: none;
    display: inline-block;
}
.read-more-link:hover {
    color: var(--primary-color-start);
    text-decoration: underline;
}
@media (min-width: 769px) {
    .press-item {
        flex-direction: row;
        align-items: center;
    }
    .press-item-logo {
        margin-right: var(--spacing-lg);
        margin-bottom: 0;
        flex-shrink: 0;
    }
}

/* Careers Section */
#careers .responsive-image {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg);
}
.open-positions { margin-top: var(--spacing-xl); }
.open-positions h3 {
    font-size: var(--font-size-xl);
    text-align: center;
    margin-bottom: var(--spacing-lg);
}
.job-listing {
    background-color: var(--background-color-medium);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--box-shadow-sm);
    transition: box-shadow var(--transition-speed-normal) var(--transition-timing-smooth);
}
.job-listing:hover { box-shadow: var(--box-shadow-md); }
.job-listing h4 {
    font-size: var(--font-size-lg);
    color: var(--text-color-darker);
    margin-bottom: var(--spacing-sm);
}
.job-listing p {
    color: var(--text-color-subtle);
    margin-bottom: var(--spacing-md);
}

/* External Resources Section */
.resource-card {
    height: 100%; /* Ensure cards in a row are same height */
}
.resource-card .card-content {
    text-align: left;
}
.resource-card h3 a {
    font-weight: 700;
}
#external-resources.section-gradient .resource-card h3 a {
    color: var(--text-color-light);
}
#external-resources.section-gradient .resource-card h3 a:hover {
    color: var(--accent-color-1);
}

/* Contact Section on Index Page (CTA) */
#contact.section .container.text-center {
    /* Styles are mostly handled by global .section-title, .section-intro, .button */
}

/* Contact Page (contacts.html) */
.contact-page-content {
    padding-top: calc(var(--header-height) + var(--spacing-xl));
    padding-bottom: var(--section-padding-y);
}
.contact-form-container {
    max-width: 700px;
    margin: 0 auto;
    background-color: var(--background-color-light);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg);
}
.contact-info {
    margin-bottom: var(--spacing-xl);
    text-align: center;
}
.contact-info h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
}
.contact-info p, .contact-info a {
    color: var(--text-color-subtle);
    font-size: var(--font-size-md);
}
.form-group {
    margin-bottom: var(--spacing-lg);
}
.form-group label {
    display: block;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: var(--spacing-sm);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid #ccc;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-body);
    font-size: var(--font-size-md);
    transition: border-color var(--transition-speed-fast), box-shadow var(--transition-speed-fast);
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary-color-end);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-start-rgb), 0.2);
    outline: none;
}
.form-group textarea {
    min-height: 120px;
    resize: vertical;
}
.form-group .button-primary {
    width: 100%;
}
@media (min-width: 769px) {
    .contact-form-container { padding: var(--spacing-xxl); }
}

/* Footer */
.site-footer {
    background-color: var(--text-color-darker);
    color: var(--text-color-medium);
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
}
.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-lg);
}
.footer-nav, .footer-contact, .footer-social {
    flex: 1;
    min-width: 200px; /* Ensure they don't get too squeezed */
    margin-bottom: var(--spacing-lg);
}
.site-footer h4 {
    font-size: var(--font-size-lg);
    color: var(--text-color-light);
    margin-bottom: var(--spacing-md);
    font-weight: 700;
}
.site-footer ul {
    list-style: none;
}
.site-footer ul li {
    margin-bottom: var(--spacing-sm);
}
.site-footer a {
    color: var(--text-color-medium);
    text-decoration: none;
}
.site-footer a:hover {
    color: var(--accent-color-1);
    text-decoration: underline;
}
.footer-contact p {
    color: var(--text-color-medium);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
}
.footer-social ul {
    /* For text links, standard list styling is fine */
}
.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: var(--spacing-lg);
}
.footer-bottom p {
    font-size: var(--font-size-sm);
    color: var(--text-color-subtle);
    margin: 0;
}
.footer-bottom p a { color: var(--text-color-subtle); }
.footer-bottom p a:hover { color: var(--accent-color-1); }


/* Success Page Styling */
body.page-success { /* Add this class to body of success.html */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.success-page-main-content { /* Wrapper for the main content of success page */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xl);
    background-image: var(--gradient-primary); /* Optional gradient background */
    color: var(--text-color-light);
}
.success-page-main-content .success-icon {
    font-size: 5rem; /* Example, use Font Awesome or SVG */
    color: var(--text-color-light); /* Or accent color like green */
    margin-bottom: var(--spacing-lg);
}
.success-page-main-content h1 {
    font-size: var(--font-size-xxl);
    color: var(--text-color-light);
    margin-bottom: var(--spacing-md);
}
.success-page-main-content p {
    font-size: var(--font-size-lg);
    color: var(--text-color-medium);
    margin-bottom: var(--spacing-xl);
}

/* Privacy & Terms Page Styling */
.page-static-content {
    padding-top: calc(var(--header-height) + var(--spacing-xl));
    padding-bottom: var(--section-padding-y);
}
.page-static-content .container h1.page-title { /* Main title of the page */
    font-size: var(--font-size-xxl);
    margin-bottom: var(--spacing-lg);
    color: var(--text-color-darker);
    text-align: center;
}
.page-static-content .container h2.section-subtitle {
    font-size: var(--font-size-xl);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    color: var(--text-color-darker);
    font-weight: 700;
}
.page-static-content .container p,
.page-static-content .container ul,
.page-static-content .container ol {
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-base);
    color: var(--text-color-dark);
    font-size: var(--font-size-md);
}
.page-static-content .container ul,
.page-static-content .container ol {
    padding-left: var(--spacing-lg);
}
.page-static-content .container ul li { margin-bottom: var(--spacing-sm); }


/* Responsive Adjustments */
@media (max-width: 768px) { /* Mobile */
    :root {
        --font-size-base: 15px; /* Slightly smaller base for mobile */
        --header-height: 70px;
    }
    .container {
        width: 95%;
    }
    .section {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }
    .hero-section {
        padding: var(--spacing-xl) 0;
        /* min-height: 50vh; */
    }

    .main-nav ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background-color: var(--header-bg);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        padding: var(--spacing-sm) 0;
        border-top: 1px solid #eee;
    }
    .main-nav ul.nav-active { display: flex; }
    .main-nav li { margin: 0; width: 100%; }
    .main-nav a {
        display: block;
        padding: var(--spacing-md);
        text-align: center;
        border-bottom: 1px solid #f0f0f0;
    }
    .main-nav li:last-child a { border-bottom: none; }
    .main-nav a::after { display: none; }

    .nav-toggle {
        display: block; /* Show burger */
        background: none;
        border: none;
        cursor: pointer;
        padding: var(--spacing-sm);
        z-index: 1001;
    }
    .hamburger {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--text-color-dark);
        position: relative;
        transition: transform var(--transition-speed-normal) var(--transition-timing-smooth), 
                    background-color var(--transition-speed-normal) var(--transition-timing-smooth);
    }
    .hamburger::before, .hamburger::after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: var(--text-color-dark);
        transition: transform var(--transition-speed-normal) var(--transition-timing-smooth), 
                    top var(--transition-speed-normal) var(--transition-timing-smooth);
    }
    .hamburger::before { top: -8px; }
    .hamburger::after { top: 8px; }

    .nav-toggle[aria-expanded="true"] .hamburger { background-color: transparent; }
    .nav-toggle[aria-expanded="true"] .hamburger::before { transform: rotate(45deg); top: 0; }
    .nav-toggle[aria-expanded="true"] .hamburger::after { transform: rotate(-45deg); top: 0; }

    .columns {
      margin-left: 0;
      margin-right: 0;
    }
    .column { /* Stack columns on mobile */
      flex-basis: 100% !important;
      max-width: 100% !important;
      padding-left: 0;
      padding-right: 0;
    }
    .columns > .column:not(:last-child) {
        margin-bottom: var(--spacing-lg); /* Add space between stacked columns */
    }
    
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
    .footer-nav, .footer-contact, .footer-social {
        min-width: 100%;
        margin-bottom: var(--spacing-lg);
    }
}

/* AOS Related - ensure elements are ready for animation */
[data-aos] {
    /*opacity: 0; !* Initial state for fade animations *!*/
    transform: translateY(20px); /* Initial state for up/down animations */
    transition-property: transform, opacity;
}
[data-aos].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

/* Cookie Consent Popup (from HTML, basic styling if needed) */
#cookieConsentPopup p {
    font-family: var(--font-family-body);
    color: var(--text-color-light); /* Assuming dark background */
}
#cookieConsentPopup button {
    font-family: var(--font-family-body);
}

/* Helper / Utility Classes */
.text-center { text-align: center; }
.responsive-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-md); /* Consistent rounding for standalone images */
}