/* TABLE OF CONTENTS
1.  :ROOT VARIABLES
2.  GENERAL STYLES & TYPOGRAPHY
3.  UTILITY CLASSES
4.  HEADER & NAVIGATION
5.  HERO SECTION
6.  SECTION STYLING
7.  FORM STYLING (GLOBAL & SPECIFIC)
8.  CARD STYLING (RESOURCE, WEBINAR, TESTIMONIAL)
9.  STATISTICS WIDGETS
10. FOOTER
11. SPECIFIC PAGE STYLES (SUCCESS, PRIVACY, TERMS)
12. ANIMATIONS & INTERACTIVITY
13. RESPONSIVE DESIGN
*/

/* 1. :ROOT VARIABLES */
:root {
    /* Futuristic Complementary Color Scheme */
    --primary-color-dark: #0A192F;      /* Deep Navy Blue - Backgrounds, Dark Elements */
    --primary-color-medium: #172A46;   /* Medium Navy Blue - Accents, Cards */
    --primary-color-light: #304A6E;    /* Lighter Navy Blue - Hover, Borders */

    --secondary-color-main: #F9A826;   /* Bright Orange/Gold - CTAs, Highlights */
    --secondary-color-light: #FFC107;  /* Lighter Orange/Gold - Hover */
    --secondary-color-dark: #E69500;   /* Darker Orange/Gold - Active States */
    --secondary-color-main-rgb: 249, 168, 38; /* For rgba usage */

    --accent-glow-color: rgba(249, 168, 38, 0.7); /* For glowing effects */

    /* Text Colors */
    --text-color-light: #EAEAEA;        /* For dark backgrounds */
    --text-color-medium: #A8B2D1;      /* Subtitles, less important text on dark bg */
    --text-color-dark: #222222;         /* For light backgrounds (increased contrast) */
    --text-color-headings-dark-bg: #FFFFFF;
    --text-color-headings-light-bg: #111111; /* Very dark for titles on light bg */

    /* Backgrounds */
    --background-color-main: #061222; /* Very Dark Blue - Main Page BG */
    --background-color-section-light: #F8F9FA; /* Off-white for light sections */
    --background-color-section-dark-tint: rgba(10, 25, 47, 0.85);
    --background-gradient-dynamic: linear-gradient(135deg, var(--primary-color-medium) 0%, var(--primary-color-dark) 100%);
    --accent-gradient: linear-gradient(90deg, var(--secondary-color-main), var(--secondary-color-light));

    /* Fonts */
    --font-family-headings: 'Manrope', sans-serif;
    --font-family-body: 'Rubik', sans-serif;

    /* Transitions & Animations */
    --transition-speed-fast: 0.2s ease-in-out;
    --transition-speed-medium: 0.35s ease-in-out;
    --transition-speed-slow: 0.5s ease-in-out;

    /* Borders & Shadows */
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;
    --box-shadow-light: 0 4px 15px rgba(0, 0, 0, 0.1);
    --box-shadow-glow: 0 0 10px rgba(var(--secondary-color-main-rgb), 0.3), 0 0 20px rgba(var(--secondary-color-main-rgb), 0.2);
    --box-shadow-inset: inset 0 1px 3px rgba(0,0,0,0.2);
    --box-shadow-card: 0 6px 20px rgba(0,0,0,0.15), 0 2px 8px rgba(var(--primary-color-dark), 0.1);

    /* Navbar height for content offset */
    --navbar-height: 5.25rem; /* Bulma's default navbar height */
}

/* 2. GENERAL STYLES & TYPOGRAPHY */
html {
    scroll-behavior: smooth;
    background-color: var(--background-color-main);
    color: var(--text-color-light);
    font-size: 16px; /* Base font size for rem calculations */
}

body {
    font-family: var(--font-family-body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    background-color: var(--background-color-main);
    color: var(--text-color-light);
}

.main-container {
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .title, .subtitle {
    font-family: var(--font-family-headings);
    font-weight: 800; /* Manrope bold */
    color: var(--text-color-headings-dark-bg);
    line-height: 1.25;
    text-rendering: optimizeLegibility;
}
.title, .subtitle { /* Override Bulma if needed */
    font-family: var(--font-family-headings);
}

.title {
    color: var(--text-color-headings-dark-bg);
    margin-bottom: 1rem !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.subtitle {
    color: var(--text-color-medium);
    margin-bottom: 1.5rem !important;
    font-weight: 400; /* Rubik regular for subtitles */
}

.section-title {
    font-size: clamp(2.2rem, 5vw, 3rem); /* Responsive font size */
    margin-bottom: 0.75rem !important;
    font-weight: 800;
}
.section-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem !important;
    color: var(--text-color-medium);
    line-height: 1.6;
}

p, .content p {
    font-family: var(--font-family-body);
    color: var(--text-color-light);
    margin-bottom: 1.15rem;
    font-size: 1rem;
    line-height: 1.7;
}

.content.is-medium p { /* Used in About Us */
    font-size: 1.1rem;
    line-height: 1.8;
}

a {
    color: var(--secondary-color-main);
    text-decoration: none;
    transition: color var(--transition-speed-fast);
}
a:hover {
    color: var(--secondary-color-light);
    text-decoration: underline;
}

/* Styles for sections with a light background */
.section.has-light-background {
    background-color: var(--background-color-section-light) !important;
    color: var(--text-color-dark) !important;
}
.section.has-light-background .title,
.section.has-light-background .section-title,
.section.has-light-background h1, .section.has-light-background h2, .section.has-light-background h3,
.section.has-light-background h4, .section.has-light-background h5, .section.has-light-background h6 {
    color: var(--text-color-headings-light-bg) !important;
    text-shadow: none;
}
.section.has-light-background p,
.section.has-light-background .content p,
.section.has-light-background .subtitle,
.section.has-light-background .section-subtitle {
    color: var(--text-color-dark) !important; /* Ensure good contrast for body text */
    opacity: 0.85; /* Slight softening */
}
.section.has-light-background a {
    color: var(--secondary-color-dark) !important;
}
.section.has-light-background a:hover {
    color: var(--primary-color-medium) !important;
}

/* Global Button Styles */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-family-headings);
    font-weight: 700;
    border-radius: var(--border-radius-medium) !important;
    border: none; /* Remove default border for custom styling */
    transition: all var(--transition-speed-medium) !important;
    padding: 0.8em 1.8em !important;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.9rem;
    line-height: 1.5;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.button.is-primary.is-futuristic,
button.is-primary.is-futuristic {
    background: var(--accent-gradient) !important;
    color: var(--text-color-dark) !important; /* Dark text on bright button */
    box-shadow: var(--box-shadow-glow);
}
.button.is-primary.is-futuristic:hover,
button.is-primary.is-futuristic:hover {
    background: linear-gradient(90deg, var(--secondary-color-light), var(--secondary-color-main)) !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 5px 15px rgba(var(--secondary-color-main-rgb), 0.5), var(--box-shadow-glow);
    color: var(--text-color-dark) !important;
}
.button.is-primary.is-futuristic:active,
button.is-primary.is-futuristic:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 2px 8px rgba(var(--secondary-color-main-rgb), 0.3);
}

.button.is-large {
    padding: 1em 2.5em !important;
    font-size: 1.05rem !important;
}
.button.is-small {
    padding: 0.6em 1.4em !important;
    font-size: 0.8rem !important;
}

/* Read More Link Style */
.read-more-link {
    display: inline-block;
    font-family: var(--font-family-headings);
    font-weight: 700;
    color: var(--secondary-color-main);
    margin-top: 0.75rem;
    padding: 0.5rem 0;
    position: relative;
    text-decoration: none;
    font-size: 0.95rem;
}
.read-more-link::after {
    content: '→';
    margin-left: 0.5rem;
    transition: margin-left var(--transition-speed-fast);
}
.read-more-link:hover {
    color: var(--secondary-color-light);
    text-decoration: none;
}
.read-more-link:hover::after {
    margin-left: 0.8rem;
}


/* 3. UTILITY CLASSES */
.animated-gradient-text {
    background-image: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 6s ease infinite alternate;
    background-size: 250% 250%;
    display: inline; /* Important for text clipping */
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.has-text-white { color: #FFFFFF !important; }
.has-text-light { color: var(--text-color-light) !important; }
.has-text-grey-dark { color: #909090 !important; } /* Adjusted for better readability if used on dark cards */

/* Parallax Setup */
[data-parallax-speed] {
    background-attachment: fixed; /* Simple parallax, JS enhances */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.section {
    padding: clamp(3rem, 8vw, 5rem) 1.5rem; /* Responsive section padding */
}

/* Background image handling */
[style*="background-image"] { /* Applies to elements with inline background images */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* 4. HEADER & NAVIGATION */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(6, 18, 34, 0.8); /* Darker, more opaque for better readability */
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    transition: background-color var(--transition-speed-medium);
}

.navbar.is-transparent {
    background-color: transparent !important;
}
.navbar-item, .navbar-link {
    color: var(--text-color-light) !important;
    font-family: var(--font-family-headings);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.5rem 1rem !important; /* Adjusted padding */
    transition: color var(--transition-speed-fast), background-color var(--transition-speed-fast);
    border-radius: var(--border-radius-small); /* Subtle rounding */
}
.navbar-item:hover, .navbar-link:hover, .navbar-item.is-active {
    background-color: rgba(var(--secondary-color-main-rgb), 0.15) !important;
    color: var(--secondary-color-main) !important;
}
.logo-text {
    font-size: 1.7rem !important;
    font-weight: 800 !important;
    color: var(--secondary-color-main) !important;
    letter-spacing: -0.5px;
    padding: 0.5rem 0.75rem !important;
}
.logo-text:hover {
    color: var(--secondary-color-light) !important;
    background-color: transparent !important;
}

.navbar-burger {
    color: var(--text-color-light) !important;
    width: var(--navbar-height);
    height: var(--navbar-height);
}
.navbar-burger span {
    background-color: var(--text-color-light) !important;
    height: 2.5px;
    width: 22px; /* Slightly wider lines */
    left: calc(50% - 11px); /* Center lines */
}
.navbar-burger span:nth-child(1) { top: calc(50% - 8px); }
.navbar-burger span:nth-child(2) { top: calc(50% - 1.25px); }
.navbar-burger span:nth-child(3) { top: calc(50% + 5.5px); }

.navbar-menu {
    background-color: rgba(6, 18, 34, 0.95); /* For mobile dropdown */
}
@media screen and (min-width: 1024px) {
    .navbar-menu {
        background-color: transparent !important;
    }
}

/* 5. HERO SECTION */
.hero {
    position: relative;
    /* Background properties (size, position, repeat) set globally for [style*="background-image"] */
    /* Overlay from HTML: style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)), url(...)" */
}
.hero.is-fullheight-with-navbar {
  min-height: 100vh;
  padding-top: var(--navbar-height); /* Offset for fixed navbar */
  display: flex; /* Ensure hero-body can be centered */
  align-items: center; /* Vertically center hero-body */
  justify-content: center; /* Horizontally center hero-body */
}
.hero-body {
    padding: clamp(2rem, 10vw, 4rem) 1.5rem;
    width: 100%; /* Ensure hero-body takes up space */
}
.hero-title {
    font-size: clamp(2.5rem, 7vw, 4rem); /* Responsive title */
    font-weight: 800;
    color: #FFFFFF !important; /* Explicitly white */
    margin-bottom: 1.25rem !important;
    text-shadow: 2px 3px 10px rgba(0,0,0,0.7);
}
.hero-subtitle {
    font-size: clamp(1.1rem, 3vw, 1.6rem); /* Responsive subtitle */
    color: #E0E0E0 !important; /* Light grey for subtitle */
    margin-bottom: 2.5rem !important;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 2px 6px rgba(0,0,0,0.6);
    font-weight: 400;
}
.hero .button { /* Specific styling for hero button if needed */
    transform: scale(1.05); /* Slightly larger hero button */
}


/* 6. SECTION STYLING (Generic) */
/* Backgrounds for About Us & Community are handled by inline styles in HTML */
#community .section-title, #community .section-subtitle {
    color: var(--text-color-headings-dark-bg) !important; /* White/light on dark community bg */
}
#community .section-subtitle {
    color: var(--text-color-light) !important;
}
/* Sections with default dark theme */
#webinars .section-title, #resources .section-title, .contact-form-section-top .section-title {
    color: var(--text-color-headings-dark-bg) !important;
}
#webinars .section-subtitle, #resources .section-subtitle, .contact-form-section-top .section-subtitle {
    color: var(--text-color-medium) !important;
}
.contact-form-section-top {
    background: var(--background-gradient-dynamic);
}

/* 7. FORM STYLING (GLOBAL & SPECIFIC) */
.futuristic-label {
    color: var(--text-color-medium) !important;
    font-family: var(--font-family-headings);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.6em !important;
    display: block; /* Ensure it takes full width if needed */
}
.futuristic-input, .futuristic-textarea {
    background-color: rgba(23, 42, 70, 0.6) !important;
    border: 1.5px solid var(--primary-color-light) !important;
    color: var(--text-color-light) !important;
    border-radius: var(--border-radius-medium) !important;
    padding: 0.9em 1.1em !important;
    transition: border-color var(--transition-speed-medium), box-shadow var(--transition-speed-medium), background-color var(--transition-speed-medium);
    box-shadow: var(--box-shadow-inset);
    font-family: var(--font-family-body);
    font-size: 1rem;
}
.futuristic-input::placeholder, .futuristic-textarea::placeholder {
    color: var(--text-color-medium) !important;
    opacity: 0.6;
}
.futuristic-input:focus, .futuristic-textarea:focus {
    background-color: rgba(23, 42, 70, 0.8) !important;
    border-color: var(--secondary-color-main) !important;
    box-shadow: 0 0 0 2px rgba(var(--secondary-color-main-rgb), 0.2), var(--box-shadow-inset) !important;
    outline: none !important;
}
.futuristic-textarea {
    min-height: 120px;
}

/* 8. CARD STYLING */
.card {
    background-color: var(--primary-color-medium) !important;
    border-radius: var(--border-radius-large) !important;
    box-shadow: var(--box-shadow-card) !important;
    transition: transform var(--transition-speed-medium), box-shadow var(--transition-speed-medium);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%; /* For equal height cards in a row */
}
.card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 12px 28px rgba(0,0,0,0.25), 0 8px 12px rgba(var(--primary-color-dark), 0.15) !important;
}
.card .card-content {
    padding: 1.5rem; /* Standard padding */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.card .title, .card .subtitle {
    color: var(--text-color-headings-dark-bg) !important;
}
.card .subtitle {
    color: var(--text-color-medium) !important;
    font-size: 0.9rem;
}
.card p, .card .content p {
    color: var(--text-color-light) !important;
    font-size: 0.95rem;
    line-height: 1.6;
}
.card .card-content .button { /* Ensure button in card has space */
    margin-top: auto; /* Push to bottom */
    align-self: flex-start; /* Align left */
}

/* Card Image Styling */
.card .card-image { /* Bulma's .card-image */
    text-align: center;
    overflow: hidden;
    position: relative; /* For potential overlays or effects */
}
.card .card-image figure.image { /* Bulma figure */
    margin: 0 !important;
    width: 100%;
}
.card .card-image img {
    width: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed-slow), opacity 0.4s;
    /* Fixed height for card images where aspect ratio isn't controlled by Bulma class */
    /* e.g., if not using .is-16by9 etc. then height must be set here */
}
.webinar-card .card-image img {
    /* Bulma's is-16by9 handles aspect ratio, height auto from that */
    /* No explicit height needed here if aspect ratio class is used */
}
.card:hover .card-image img {
    transform: scale(1.08);
    opacity: 0.9;
}

/* Resource Cards */
.resource-card .card-content .title a {
    color: var(--secondary-color-main);
}
.resource-card .card-content .title a:hover {
    color: var(--secondary-color-light);
}

/* Testimonial Cards */
.community-testimonial-card {
    background-color: var(--primary-color-light) !important;
    text-align: center;
    padding-top: 1rem; /* Space for image */
}
.community-testimonial-card .card-image {
     margin-bottom: 0.5rem; /* Space between image and text */
}
.community-testimonial-card .card-image img.is-rounded {
    border-radius: 50% !important;
    border: 3px solid var(--secondary-color-main);
    width: 100px !important; /* Fixed size */
    height: 100px !important;
    object-fit: cover;
    margin: 0 auto; /* Center image */
    display: block;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.community-testimonial-card .card-content .title.is-5 {
    margin-bottom: 0.5rem !important;
}
.community-testimonial-card .card-content p.has-text-grey-dark {
    color: var(--text-color-medium) !important; /* Improved contrast */
    font-style: italic;
    font-size: 0.9rem;
}

/* 9. STATISTICS WIDGETS */
.statistics-widgets {
    margin-top: 2.5rem;
}
.stat-widget {
    background-color: rgba(var(--primary-color-light), 0.3);
    padding: 1.75rem 1.25rem;
    border-radius: var(--border-radius-medium);
    text-align: center;
    border-left: 5px solid var(--secondary-color-main);
    transition: transform var(--transition-speed-medium), box-shadow var(--transition-speed-medium), background-color var(--transition-speed-medium);
}
.stat-widget:hover {
    transform: translateY(-6px);
    background-color: rgba(var(--primary-color-light), 0.5);
    box-shadow: 0 8px 20px rgba(var(--secondary-color-main-rgb), 0.15);
}
.futuristic-stat-number {
    font-size: clamp(2rem, 6vw, 2.8rem);
    font-weight: 800;
    color: var(--secondary-color-main) !important;
    margin-bottom: 0.15rem !important;
    line-height: 1.1;
}
.futuristic-stat-label {
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    color: var(--text-color-medium) !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 500;
}

/* 10. FOOTER */
.futuristic-footer {
    background-color: var(--primary-color-dark) !important;
    color: var(--text-color-medium) !important;
    padding: 3.5rem 1.5rem 1.5rem;
    border-top: 4px solid var(--primary-color-light);
}
.futuristic-footer .footer-logo-text {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--secondary-color-main) !important;
    margin-bottom: 0.75rem;
}
.futuristic-footer .title.is-5.footer-title {
    color: var(--text-color-headings-dark-bg) !important;
    margin-bottom: 1rem !important;
    font-size: 1.15rem;
    font-weight: 700;
}
.futuristic-footer p {
    font-size: 0.9rem;
    color: var(--text-color-medium) !important;
}
.futuristic-footer ul {
    list-style: none;
    margin-left: 0; padding-left: 0;
}
.futuristic-footer ul li { margin-bottom: 0.3rem; }
.futuristic-footer ul li a {
    color: var(--text-color-medium) !important;
    padding: 0.2rem 0;
    display: inline-block;
    transition: color var(--transition-speed-fast), padding-left var(--transition-speed-fast);
    font-size: 0.9rem;
}
.futuristic-footer ul li a:hover {
    color: var(--secondary-color-main) !important;
    padding-left: 6px;
    text-decoration: none;
}
.futuristic-footer .footer-social-link { /* Text-based social links */
    color: var(--text-color-medium) !important;
    margin: 0 0.4rem;
    font-weight: 500;
    font-size: 0.9rem;
    display: inline-block; /* To allow margin */
}
.futuristic-footer .footer-social-link:hover {
    color: var(--secondary-color-main) !important;
    text-decoration: none;
}
.futuristic-footer hr {
    background-color: var(--primary-color-light) !important;
    height: 1px !important;
    margin: 1.8rem 0 !important;
    border: none;
}
.futuristic-footer .content p { /* Copyright text */
    color: var(--text-color-medium) !important;
    font-size: 0.85rem;
    opacity: 0.8;
}
.futuristic-footer .input.futuristic-input.is-small {
    background-color: rgba(23, 42, 70, 0.8) !important;
    border-color: var(--primary-color-light) !important;
    font-size: 0.9rem;
}
.futuristic-footer .button.is-primary.is-small.is-futuristic {
    font-size: 0.75rem !important;
    padding: 0.7em 1.3em !important;
}

/* 11. SPECIFIC PAGE STYLES */
/* Success Page */
body.success-page { /* Add this class to body of success.html */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--background-gradient-dynamic);
}
.success-page .main-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.success-content-wrapper { /* This div should wrap success content in success.html */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    color: var(--text-color-light);
}
.success-content-wrapper .success-icon { /* Example: use a checkmark character or SVG */
    font-size: 4.5rem;
    color: var(--secondary-color-main);
    margin-bottom: 1.25rem;
    animation: bounceIn 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
.success-content-wrapper .title {
    color: var(--text-color-headings-dark-bg) !important;
    margin-bottom: 0.75rem !important;
}
.success-content-wrapper .subtitle {
    color: var(--text-color-light) !important;
    margin-bottom: 1.8rem !important;
}

/* Privacy & Terms Pages */
body.privacy-page, body.terms-page { /* Add these classes to respective body tags */
    background-color: var(--background-color-section-light) !important;
    color: var(--text-color-dark) !important;
}
.privacy-page .main-container > .section:first-of-type, /* Target first section */
.terms-page .main-container > .section:first-of-type {
    padding-top: calc(var(--navbar-height) + 2.5rem) !important; /* Navbar + extra */
    padding-bottom: 2.5rem !important;
}
.privacy-page .title, .terms-page .title,
.privacy-page h1, .terms-page h1, .privacy-page h2, .terms-page h2,
.privacy-page h3, .terms-page h3, .privacy-page h4, .terms-page h4 {
    color: var(--text-color-headings-light-bg) !important;
    text-shadow: none;
}
.privacy-page p, .terms-page p,
.privacy-page li, .terms-page li {
    color: var(--text-color-dark) !important;
    opacity: 0.9;
    font-size: 1rem;
    line-height: 1.75;
}
.privacy-page .content, .terms-page .content {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}
.privacy-page .content h2, .terms-page .content h2 { margin-top: 2rem; }
.privacy-page .content h3, .terms-page .content h3 { margin-top: 1.5rem; }


/* 12. ANIMATIONS & INTERACTIVITY */
/* Parallax will be JS driven, CSS supports background properties */

/* Subtle fade-in for sections (requires JS to add 'visible' class on scroll) */
.section.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 13. RESPONSIVE DESIGN */
@media screen and (max-width: 1023px) { /* Tablet and below */
    .navbar-menu.is-active {
        position: absolute;
        width: 100%;
        left: 0;
        top: var(--navbar-height); /* Align with bottom of navbar */
        background-color: var(--primary-color-dark) !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.4);
        padding: 0.5rem 0; /* Padding for items */
    }
    .navbar-item, .navbar-link {
        padding: 0.75rem 1.5rem !important;
        border-bottom: 1px solid var(--primary-color-medium);
        border-radius: 0; /* Flat items in mobile menu */
    }
    .navbar-item:last-child, .navbar-link:last-child {
        border-bottom: none;
    }
    .navbar-end .buttons .button {
        display: block;
        width: calc(100% - 3rem); /* Full width with padding */
        margin: 0.75rem 1.5rem !important;
    }

    .hero-title { font-size: clamp(2rem, 6vw, 2.8rem); }
    .hero-subtitle { font-size: clamp(1rem, 2.5vw, 1.3rem); }
    .section-title { font-size: clamp(1.8rem, 4vw, 2.4rem); }
    .section-subtitle { margin-bottom: 2rem !important; }
}

@media screen and (max-width: 768px) { /* Mobile */
    .section { padding: clamp(2.5rem, 6vw, 3.5rem) 1rem; }
    .columns.is-mobile { display: flex; flex-wrap: wrap; } /* Ensure wrapping */
    .columns.is-mobile > .column { margin-bottom: 1.5rem; } /* Space between stacked columns */
    .columns.is-mobile > .column:last-child { margin-bottom: 0; }

    .stat-widget { margin-bottom: 1.25rem; }
    .futuristic-footer .columns > .column {
        margin-bottom: 1.8rem;
        text-align: left; /* Revert to left for mobile, or keep center if preferred */
    }
    .futuristic-footer .columns > .column:last-child { margin-bottom: 0; }
    .futuristic-footer .footer-social-link {
        margin: 0.3rem 0.3rem 0.3rem 0;
    }
    .contact-form-section-top .column.is-two-thirds {
        width: 100% !important; /* Bulma class */
        padding-left: 0; padding-right: 0;
    }
    .card { margin-bottom: 1.5rem; } /* Space between cards when stacked */
    .columns > .column:last-child .card { margin-bottom: 0; } /* No margin for last card in stack */
}

/* Cookie Popup styling from HTML - ensure it fits the theme */
#cookie-popup {
    background-color: var(--primary-color-dark) !important; /* Match footer */
    color: var(--text-color-medium) !important;
    border-top: 2px solid var(--primary-color-light) !important;
    box-shadow: 0 -3px 15px rgba(0,0,0,0.25);
    font-size: 0.85rem;
}
#cookie-popup p a {
    color: var(--secondary-color-main) !important;
}
#cookie-popup p a:hover {
    color: var(--secondary-color-light) !important;
}
#accept-cookie {
    background-color: var(--secondary-color-main) !important;
    color: var(--text-color-dark) !important;
    font-size: 0.85rem;
    padding: 0.6em 1.2em !important;
}
#accept-cookie:hover {
    background-color: var(--secondary-color-light) !important;
}