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

1.  CSS Variables
2.  Global Styles & Resets
3.  Typography
4.  Layout & Utility Classes
5.  Header / Navbar
6.  Hero Section
7.  Buttons (Global)
8.  Cards (General, Futuristic, Accolades)
9.  Accordion (FAQ)
10. Forms (Contact)
11. Carousel (Case Studies)
12. List Group (External Resources)
13. Footer
14. Page-Specific Styles (Success, Privacy, Terms)
15. Animations & Effects (Scroll, Hover, Parallax, Glassmorphism)
16. Responsive Design
-------------------------------------------------------------------*/

/* 1. CSS Variables */
:root {
    /* Fonts */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'DM Sans', sans-serif;

    /* Primary Colors (Futuristic Blue/Teal) */
    --color-primary: #00A9FF; /* Bright, modern blue */
    --color-primary-dark: #007FBF;
    --color-primary-light: #66D2FF;

    /* Accent Colors */
    --color-accent: #FF2E88; /* Vibrant Pink/Magenta */
    --color-accent-dark: #C6005C;

    /* Neutral Colors */
    --color-bg-light: #F0F4F8;      /* Very light gray, almost white */
    --color-bg-medium: #FFFFFF;     /* Pure white for contrast elements */
    --color-bg-dark: #0F172A;       /* Deep, dark blue-gray (Futuristic) */
    --color-bg-dark-secondary: #1E293B; /* Slightly lighter dark for card backgrounds */

    --color-text-on-light: #334155; /* Dark slate gray for readability on light */
    --color-text-on-dark: #CBD5E1;  /* Light gray for readability on dark */
    --color-text-headings-on-light: #0F172A; /* Match dark bg for strong headings */
    --color-text-headings-on-dark: #F0F4F8; /* Light headings on dark */
    --color-text-muted-on-light: #64748B;
    --color-text-muted-on-dark: #94A3B8;

    --color-border-light: #E2E8F0;
    --color-border-dark: #334155;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));


    /* UI Elements */
    --border-radius-soft: 12px;      /* Softer, biomorphic feel */
    --border-radius-medium: 8px;
    --border-radius-pill: 50px;
    --shadow-soft: 0 4px 12px rgba(15, 23, 42, 0.05);
    --shadow-medium: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-strong: 0 12px 36px rgba(15, 23, 42, 0.12);
    --shadow-interactive: 0 0 0 3px rgba(var(--color-primary-rgb), 0.3); /* For focus states */
    
    /* Transitions */
    --transition-fast: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);

    /* Navbar Height */
    --navbar-height: 70px;
    --color-primary-rgb: 0, 169, 255; /* For rgba usage with primary color */
}

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

html {
    scroll-behavior: smooth;
}

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

/* 3. Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.75em;
    color: var(--color-text-headings-on-light);
}
.section-bg-dark h1, .section-bg-dark h2, .section-bg-dark h3, .section-bg-dark h4, .section-bg-dark h5, .section-bg-dark h6 {
    color: var(--color-text-headings-on-dark);
}
.section-bg-dark p, .section-bg-dark li {
    color: var(--color-text-on-dark);
}
.section-bg-dark .text-muted {
    color: var(--color-text-muted-on-dark) !important;
}


p {
    margin-bottom: 1rem;
    font-size: 1rem; /* 16px */
}

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

.section-title {
    font-size: clamp(2rem, 5vw, 2.8rem); /* Responsive font size */
    margin-bottom: 2.5rem;
    position: relative;
    padding-bottom: 0.8rem;
    text-align: center;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background-color: var(--color-primary);
    border-radius: var(--border-radius-pill);
}
.section-bg-dark .section-title::after {
    background-color: var(--color-primary-light);
}

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

/* 4. Layout & Utility Classes */
.section-padding { /* More control than Bootstrap's py-5 if needed */
    padding-top: clamp(3rem, 8vw, 6rem);
    padding-bottom: clamp(3rem, 8vw, 6rem);
}
.section-bg-light {
    background-color: var(--color-bg-light);
}
.section-bg-dark {
    background-color: var(--color-bg-dark);
    color: var(--color-text-on-dark);
}

/* 5. Header / Navbar */
.futuristic-header.navbar {
    background-color: rgba(15, 23, 42, 0.85); /* Dark, semi-transparent */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    height: var(--navbar-height);
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.2);
    box-shadow: var(--shadow-soft);
}
.navbar-brand {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--color-primary-light) !important;
}
.nav-link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.6rem 1rem !important;
    color: var(--color-text-on-dark) !important;
    border-radius: var(--border-radius-medium);
    position: relative;
}
.nav-link::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 70%;
    height: 2px;
    background-color: var(--color-primary);
    transition: var(--transition-smooth);
    transform-origin: center;
}
.nav-link:hover::before,
.nav-link.active::before {
    transform: translateX(-50%) scaleX(1);
}
.nav-link:hover,
.nav-link.active {
    color: var(--color-primary-light) !important;
    background-color: rgba(var(--color-primary-rgb), 0.1);
}
.navbar-toggler {
    border-color: rgba(var(--color-primary-rgb), 0.5);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 169, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: rgba(30, 41, 59, 0.98); /* Slightly lighter for dropdown */
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-radius: var(--border-radius-soft);
        margin-top: 0.5rem;
        padding: 1rem;
        box-shadow: var(--shadow-medium);
    }
}

/* 6. Hero Section */
.hero-section {
    color: #FFFFFF; /* Ensures white text as per strict rule */
    padding: clamp(6rem, 15vh, 10rem) 0;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Simple parallax */
    /* Dark overlay is applied via linear-gradient in HTML style attribute */
}
.hero-section h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
    color: #FFFFFF !important; /* Explicitly white */
    margin-bottom: 1rem;
}
.hero-section .lead {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    max-width: 700px;
    margin: 0 auto 2rem auto;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.5);
    color: #FFFFFF !important; /* Explicitly white */
}

/* 7. Buttons (Global) */
.btn, button, input[type='submit'], input[type='button'] {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.75rem 1.8rem;
    border-radius: var(--border-radius-pill);
    border: 2px solid transparent;
    transition: var(--transition-smooth);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.btn-primary,
.futuristic-button { /* General class for main call-to-action buttons */
    background-image: var(--gradient-primary);
    color: var(--color-bg-dark-secondary) !important; /* Ensure good contrast on bright button */
    border-color: transparent;
    box-shadow: var(--shadow-medium), 0 0 20px rgba(var(--color-primary-rgb), 0.3);
}
.btn-primary:hover,
.futuristic-button:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--shadow-strong), 0 0 30px rgba(var(--color-primary-rgb), 0.5);
    color: var(--color-bg-dark) !important;
}
.btn-primary::before,
.futuristic-button::before { /* Shiny hover effect */
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: var(--transition-smooth);
    z-index: -1;
}
.btn-primary:hover::before,
.futuristic-button:hover::before {
    left: 100%;
}

.btn-secondary {
    background-color: var(--color-bg-dark-secondary);
    color: var(--color-text-on-dark) !important;
    border-color: var(--color-border-dark);
}
.btn-secondary:hover {
    background-color: var(--color-border-dark);
    color: var(--color-primary-light) !important;
    border-color: var(--color-primary-light);
}

/* Read More Link Styling */
.read-more-link {
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.read-more-link:hover {
    color: var(--color-accent-dark);
    text-decoration: none;
}
.read-more-link::after { /* Optional: arrow icon */
    content: '→';
    transition: var(--transition-fast);
}
.read-more-link:hover::after {
    transform: translateX(4px);
}


/* 8. Cards (General, Futuristic, Accolades) */
.card {
    background-color: var(--color-bg-medium);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
    overflow: hidden; /* For image containers */
    display: flex; /* As per strict rule */
    flex-direction: column; /* As per strict rule */
    align-items: center; /* As per strict rule - centers .card-image if not full width */
    text-align: center; /* As per strict rule - for text content */
    height: 100%; /* For consistent height in card grids (Bootstrap's .h-100) */
}
.card:hover {
    transform: translateY(-6px) perspective(1000px) rotateX(2deg);
    box-shadow: var(--shadow-strong);
}

.card-image { /* Or .image-container */
    width: 100%; /* Usually takes full width of card */
    height: 220px; /* Fixed height for image containers in cards */
    overflow: hidden;
    margin-bottom: 1rem; /* Space between image and body, if body is separate */
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers and is centered */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Smooth zoom */
}
.card:hover .card-image img {
    transform: scale(1.08);
}

.card-body { /* Bootstrap class */
    padding: 1.5rem;
    width: 100%; /* Ensures it spans the card width if card is flex */
}
.card-title {
    font-size: 1.3rem;
    color: var(--color-text-headings-on-light);
    margin-bottom: 0.75rem;
}
.card-text {
    color: var(--color-text-muted-on-light);
    font-size: 0.9rem;
}

/* Futuristic Cards (typically for dark backgrounds) */
.futuristic-card {
    background-color: var(--color-bg-dark-secondary);
    border-color: var(--color-border-dark);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.futuristic-card .card-title {
    color: var(--color-text-headings-on-dark);
}
.futuristic-card .card-text {
    color: var(--color-text-on-dark);
}
.futuristic-card:hover {
    border-color: rgba(var(--color-primary-rgb), 0.5);
}

/* Accolades specific card styling */
.futuristic-card-sm { /* For accolade items */
    padding: 1.5rem 1rem;
    background-color: var(--color-bg-dark-secondary);
    border: 1px solid var(--color-border-dark);
    justify-content: center; /* Vertically center content since it's flex */
}
.card-image-sm { /* Specific container for accolade logos */
    height: 80px; /* Fixed height for logo area */
    width: auto;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-image-sm img {
    max-height: 100%;
    width: auto;
    object-fit: contain; /* Logos should be contained */
    filter: brightness(0.9) contrast(1.1); /* Slight enhancement for logos */
}
.card-title-sm {
    font-size: 0.95rem;
    color: var(--color-text-on-dark);
    font-weight: 500;
}


/* 9. Accordion (FAQ) */
.futuristic-accordion .accordion-item {
    background-color: rgba(30, 41, 59, 0.7); /* Dark semi-transparent */
    border: 1px solid var(--color-border-dark);
    border-radius: var(--border-radius-medium);
    margin-bottom: 0.8rem;
    backdrop-filter: blur(5px);
}
.futuristic-accordion .accordion-button {
    font-family: var(--font-heading);
    font-weight: 500;
    background-color: transparent; /* Button itself is transparent on the item */
    color: var(--color-text-headings-on-dark);
    border-radius: var(--border-radius-medium);
    padding: 1.2rem 1.5rem;
}
.futuristic-accordion .accordion-button:not(.collapsed) {
    color: var(--color-primary-light);
    background-color: rgba(var(--color-primary-rgb), 0.1);
    box-shadow: none;
}
.futuristic-accordion .accordion-button:focus {
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.4);
    border-color: transparent; /* Avoid double border */
}
.futuristic-accordion .accordion-button::after { /* Custom arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23CBD5E1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transition: var(--transition-smooth);
}
.futuristic-accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300A9FF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
}
.futuristic-accordion .accordion-body {
    padding: 0 1.5rem 1.2rem 1.5rem;
    color: var(--color-text-on-dark);
    font-size: 0.95rem;
}

/* 10. Forms (Contact) */
.futuristic-form .form-label {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--color-text-muted-on-light);
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}
.section-bg-dark .futuristic-form .form-label {
    color: var(--color-text-muted-on-dark);
}

.futuristic-form .form-control {
    background-color: var(--color-bg-medium);
    border: 1px solid var(--color-border-light);
    color: var(--color-text-on-light);
    border-radius: var(--border-radius-medium);
    padding: 0.8rem 1rem;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-soft);
}
.futuristic-form .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-soft), 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
    background-color: var(--color-bg-medium); /* Keep bg on focus */
}
.section-bg-dark .futuristic-form .form-control {
    background-color: var(--color-bg-dark-secondary);
    border-color: var(--color-border-dark);
    color: var(--color-text-on-dark);
}
.section-bg-dark .futuristic-form .form-control:focus {
    background-color: var(--color-bg-dark-secondary);
    border-color: var(--color-primary);
}


/* 11. Carousel (Case Studies) */
#caseStudiesCarousel .carousel-indicators button {
    background-color: rgba(var(--color-primary-rgb), 0.5);
    border-radius: var(--border-radius-pill);
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border: none;
}
#caseStudiesCarousel .carousel-indicators .active {
    background-color: var(--color-primary);
    transform: scale(1.2);
}
#caseStudiesCarousel .carousel-control-prev-icon,
#caseStudiesCarousel .carousel-control-next-icon {
    background-color: rgba(15, 23, 42, 0.5); /* Darker control bg */
    border-radius: var(--border-radius-pill);
    padding: 1.2rem; /* Make clickable area larger */
    width: 2.5rem;
    height: 2.5rem;
    background-size: 50% 50%;
}
#caseStudiesCarousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300A9FF'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
#caseStudiesCarousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300A9FF'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
#caseStudiesCarousel .card { /* Ensure cards in carousel fit well */
    box-shadow: none; /* Often carousels handle shadow on the track */
    border: 1px solid var(--color-border-light);
}

/* 12. List Group (External Resources) */
.list-group-item.futuristic-list-item {
    background-color: var(--color-bg-medium);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-medium);
    margin-bottom: 0.8rem;
    padding: 1.2rem 1.5rem;
    transition: var(--transition-smooth);
    position: relative;
}
.list-group-item.futuristic-list-item:hover {
    transform: translateX(8px) scale(1.01);
    box-shadow: var(--shadow-medium);
    border-left: 4px solid var(--color-primary);
}
.list-group-item.futuristic-list-item h5 {
    color: var(--color-primary-dark);
    font-size: 1.1rem;
}
.list-group-item.futuristic-list-item p {
    font-size: 0.9rem;
    color: var(--color-text-muted-on-light);
}


/* 13. Footer */
.futuristic-footer {
    background-color: var(--color-bg-dark);
    color: var(--color-text-on-dark);
    padding: clamp(3rem, 8vw, 5rem) 0 2rem 0;
    border-top: 3px solid rgba(var(--color-primary-rgb), 0.3);
}
.futuristic-footer h5 {
    font-family: var(--font-heading);
    color: var(--color-primary-light);
    margin-bottom: 1.2rem;
    letter-spacing: 0.5px;
}
.futuristic-footer p, .futuristic-footer li {
    font-size: 0.9rem;
    color: var(--color-text-muted-on-dark);
}
.futuristic-footer a {
    color: var(--color-text-muted-on-dark);
    transition: var(--transition-fast);
}
.futuristic-footer a:hover {
    color: var(--color-primary-light);
    text-decoration: none; /* Keep consistent with nav links */
    transform: translateX(3px); /* Subtle hover for links */
}
.futuristic-footer .list-unstyled li {
    margin-bottom: 0.5rem;
}
.futuristic-footer .list-unstyled a {
    display: inline-block; /* For transform to work */
}
.futuristic-footer hr {
    border-color: rgba(var(--color-primary-rgb), 0.2);
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}
.futuristic-footer #currentYear {
    font-weight: 500;
}
/* Social links in footer are text, so regular 'a' styling applies */


/* 14. Page-Specific Styles */
/* Success Page */
body.success-page main { /* Add class 'success-page' to body of success.html */
    min-height: calc(100vh - var(--navbar-height)); /* Subtract navbar height if fixed */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.success-icon svg {
    width: clamp(60px, 10vw, 90px);
    height: clamp(60px, 10vw, 90px);
    fill: var(--color-primary); /* Use primary color for success icon */
    filter: drop-shadow(0 4px 10px rgba(var(--color-primary-rgb), 0.4));
    margin-bottom: 1.5rem;
}

/* Privacy & Terms Pages */
.content-page { /* Apply to main content wrapper on privacy/terms pages */
    padding-top: calc(var(--navbar-height) + 2rem); /* Space for fixed navbar + extra */
    padding-bottom: 3rem;
}
.content-page h1, .content-page h2, .content-page h3, .content-page h4 {
    margin-top: 1.8em;
    margin-bottom: 0.8em;
    color: var(--color-text-headings-on-light);
}
.content-page h1:first-child {
    margin-top: 0;
}
.content-page p, .content-page li {
    line-height: 1.8;
    color: var(--color-text-on-light);
}
.content-page ul {
    list-style-position: outside;
    padding-left: 1.5rem;
}
.content-page strong {
    font-weight: 600;
    color: var(--color-text-headings-on-light);
}

/* 15. Animations & Effects */
/* Scroll-triggered fade-in animations */
[data-scroll-fade] {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 0.7s var(--transition-smooth), transform 0.7s var(--transition-smooth);
}
[data-scroll-fade].is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Glassmorphism utility (if needed for specific elements) */
.glassmorphic {
    background: var(--gradient-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius-soft);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* 16. Responsive Design */
@media (max-width: 991.98px) {
    .hero-section {
        background-attachment: scroll; /* Disable fixed attachment on mobile for performance */
    }
    .section-title {
        margin-bottom: 2rem;
    }
    .card-image {
        height: 200px;
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 0.95rem; /* Slightly smaller base font on mobile */
    }
    .section-title {
        font-size: 1.8rem;
    }
    .hero-section h1 {
        font-size: 2rem;
    }
    .hero-section .lead {
        font-size: 0.95rem;
    }
    .btn, button, input[type='submit'], input[type='button'] {
        padding: 0.65rem 1.5rem;
        font-size: 0.9rem;
    }
    .futuristic-footer .row > div {
        text-align: center;
        margin-bottom: 2rem;
    }
    .futuristic-footer .list-unstyled {
        padding-left: 0;
    }
    .card-image {
        height: 180px;
    }
    .content-page {
        padding-top: calc(var(--navbar-height) + 1rem);
    }
}

/* Cookie Popup - already styled inline in HTML, but can be overridden here if needed */
#cookiePopup {
    /* Example: To ensure fonts are consistent if not inheriting */
    /* font-family: var(--font-body); */
}