/*
================================================================================
ACADÉMIE JSP - STYLESHEET
================================================================================

This stylesheet controls all the visual design of your website.
It's organized into clear sections with comments to help you make changes easily.

QUICK EDIT GUIDE:
- To change colors: Look for the :root section below
- To change fonts: Look for the Typography section
- To adjust spacing: Look for spacing variables in :root
- To modify a specific section: Use the table of contents below

TABLE OF CONTENTS:
1. Design Tokens (Colors, Spacing, Typography)
2. Reset & Base Styles
3. Typography
4. Buttons
5. Navigation
6. Hero Section
7. Introduction Section
8. Programs Section
9. Image Divider
10. About Section
11. Contact Section
12. Footer
13. Responsive Design (Mobile/Tablet)
14. Accessibility & Animations

================================================================================
*/


/*
================================================================================
1. DESIGN TOKENS
================================================================================
These are the main design variables for the entire site.
Change these to customize colors, spacing, and fonts throughout the site.
*/

:root {
    /* COLOR PALETTE - Extracted from Académie JSP Logo */
    /* Primary colors - Vibrant Red from logo bats */
    --color-primary: #E63946;           /* Vibrant red - main brand color from logo */
    --color-primary-light: #FF4D5A;     /* Lighter red for hovers */
    --color-primary-dark: #D32F3C;      /* Darker red for depth */

    /* Accent colors - Cyan/Turquoise from logo text */
    --color-accent: #00D9FF;            /* Bright cyan from logo */
    --color-accent-light: #33E3FF;      /* Lighter cyan for hovers */
    --color-accent-dark: #00B8D4;       /* Darker cyan */

    /* Neutral colors */
    --color-white: #FFFFFF;
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;
    --color-black: #000000;

    /* Semantic colors */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;

    /* SPACING SYSTEM */
    /* Based on 8px grid for consistency */
    --space-xs: 0.5rem;      /* 8px */
    --space-sm: 1rem;        /* 16px */
    --space-md: 1.5rem;      /* 24px */
    --space-lg: 2rem;        /* 32px */
    --space-xl: 3rem;        /* 48px */
    --space-2xl: 4rem;       /* 64px */
    --space-3xl: 6rem;       /* 96px */

    /* TYPOGRAPHY */
    /* Font families - using system fonts for performance */
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Font sizes */
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */
    --font-size-4xl: 2.25rem;    /* 36px */
    --font-size-5xl: 3rem;       /* 48px */
    --font-size-6xl: 3.75rem;    /* 60px */

    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* LAYOUT */
    --container-max-width: 1200px;
    --container-padding: var(--space-lg);

    /* BORDERS */
    --border-radius-sm: 0.375rem;    /* 6px */
    --border-radius-md: 0.5rem;      /* 8px */
    --border-radius-lg: 0.75rem;     /* 12px */
    --border-radius-xl: 1rem;        /* 16px */
    --border-radius-2xl: 1.5rem;     /* 24px */
    --border-radius-full: 9999px;    /* Fully rounded */

    /* SHADOWS */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* TRANSITIONS */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    /* Z-INDEX LAYERS */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}


/*
================================================================================
2. RESET & BASE STYLES
================================================================================
Normalizes browser defaults and sets up base styles
*/

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-gray-800);
    background-color: var(--color-white);
    overflow-x: hidden;
}

/* Demo Option Styles for Hero Section */
/* Option A: Bigger logo */
.hero-logo-large {
    width: 400px;
    height: 400px;
    margin-bottom: var(--space-xl);
}

/* Option B: Prominent description */
.hero-description-prominent {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-2xl);
}

/* Option C: Subtle tagline */
.hero-tagline-subtle {
    font-size: var(--font-size-base);
    color: var(--color-accent);
    text-align: center;
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xl);
    font-weight: var(--font-weight-normal);
    font-style: italic;
    opacity: 0.9;
}

/* Option D: Better spacing */
.hero-content-spaced {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

/* Option E: Loading animation */
.hero-logo-animated {
    animation: logoFadeIn 1.5s ease-out;
}

.hero-content-animated > * {
    opacity: 0;
    animation: contentFadeIn 0.8s ease-out forwards;
}

.hero-content-animated > *:nth-child(1) {
    animation-delay: 0.3s;
}

.hero-content-animated > *:nth-child(2) {
    animation-delay: 0.6s;
}

.hero-content-animated > *:nth-child(3) {
    animation-delay: 0.9s;
}

@keyframes logoFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes contentFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Prevent scrolling when mobile menu is open */
body.menu-open {
    overflow: hidden;
}

/* Container for consistent content width */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}


/*
================================================================================
3. TYPOGRAPHY
================================================================================
Heading styles and text formatting
*/

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-gray-900);
    margin-bottom: var(--space-md);
}

h1 {
    font-size: var(--font-size-5xl);
}

h2 {
    font-size: var(--font-size-4xl);
}

h3 {
    font-size: var(--font-size-3xl);
}

h4 {
    font-size: var(--font-size-2xl);
}

h5 {
    font-size: var(--font-size-xl);
}

h6 {
    font-size: var(--font-size-lg);
}

p {
    margin-bottom: var(--space-md);
}

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

a:hover {
    color: var(--color-primary-light);
}

strong {
    font-weight: var(--font-weight-bold);
}

/* Section titles */
.section-title {
    text-align: center;
    margin-bottom: var(--space-md);
    color: var(--color-gray-900);
}

.section-subtitle {
    text-align: center;
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    margin-bottom: var(--space-2xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


/*
================================================================================
4. BUTTONS
================================================================================
Button styles for CTAs and actions
TO EDIT BUTTON COLORS: Change the background-color and color properties below
*/

.btn {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    text-decoration: none;
    border-radius: var(--border-radius-lg);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-base);
    line-height: 1.5;
}

/* Primary button - Navy blue */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Secondary button - Red accent */
.btn-secondary {
    background-color: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Large button size */
.btn-large {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-lg);
}

/* Button focus state for accessibility */
.btn:focus {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
}


/*
================================================================================
5. NAVIGATION
================================================================================
Fixed navigation bar at the top
TO EDIT: Change colors, adjust height, modify mobile breakpoint
*/

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
    background-color: rgba(0, 0, 0, 0.95);    /* Black background */
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    transition: all var(--transition-base);
}

.navbar.scrolled {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
    background-color: rgba(0, 0, 0, 0.98);    /* Solid black when scrolled */
}

.nav-container {
    max-width: 100%;             /* Full width instead of constrained */
    margin: 0;                   /* No centering - truly left-aligned */
    padding: var(--space-sm) var(--container-padding);
    display: flex;
    justify-content: flex-start; /* Align content to left */
    align-items: center;
}

.nav-logo img {
    height: 50px;
    width: auto;
    display: none; /* Hide navigation logo */
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--space-lg);
    align-items: center;
}

.nav-link {
    font-weight: var(--font-weight-medium);
    color: var(--color-white);                /* White text on black nav */
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-md);
    border-bottom: 2px solid transparent;     /* Invisible border for smooth transition */
    transition: all var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-accent);               /* Cyan text on hover */
    background-color: rgba(0, 217, 255, 0.1); /* Subtle cyan background */
    border-bottom-color: var(--color-accent); /* Cyan underline on hover */
}

/* CTA button in nav */
.nav-link-cta {
    background-color: transparent;            /* No background - clean look */
    color: var(--color-white);                /* White text like other links */
    padding: var(--space-xs) var(--space-sm); /* Same padding as other nav links */
    font-weight: var(--font-weight-medium);   /* Same as other nav links - completely identical */
    border-radius: var(--border-radius-md);   /* Same border radius as other links */
    border-bottom: 2px solid transparent;     /* Invisible border for smooth transition */
    transition: all var(--transition-fast);
}

.nav-link-cta:hover {
    color: var(--color-accent);               /* Cyan text on hover - matches other links */
    background-color: rgba(0, 217, 255, 0.1); /* Cyan background - matches other links */
    border-bottom-color: var(--color-accent); /* Cyan underline - matches other links */
}

/* Mobile menu toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-xs);
}

.mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-white);    /* White hamburger icon on black nav */
    transition: all var(--transition-base);
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}


/*
================================================================================
6. HERO SECTION
================================================================================
Large banner section with background image
TO EDIT BACKGROUND IMAGE: Change the image in the url() below
*/

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;         /* Center content vertically */
    justify-content: center;
    text-align: center;
    background-image: url('images/background.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--color-white);
}

/* Dark overlay for better text readability */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.65),       /* Darker overlay */
        rgba(0, 50, 80, 0.4)       /* Dark blue tint instead of red */
    );
}

.hero-content {
    position: relative;
    z-index: 1;
    padding: var(--space-2xl) var(--container-padding);
    max-width: 800px;
    margin: 0 auto;
}

.hero-logo {
    width: 320px;                        /* Slightly smaller to balance with text */
    height: 320px;                       /* Fixed height for perfect circle */
    object-fit: contain;                 /* Prevents cropping - shows full logo */
    margin: 0 auto var(--space-lg);      /* Spacing below logo */
    padding: 0;                          /* Zero padding - no black space at all */
    background-color: #000000;           /* Solid black background */
    border-radius: 50%;                  /* Perfect circle */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7), /* Large shadow for depth */
                0 0 0 3px var(--color-accent); /* Cyan border from logo */
    display: block;                      /* Ensures proper centering */
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hero-logo:hover {
    transform: translateY(-5px) scale(1.03); /* Subtle lift effect on hover */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8),
                0 0 0 4px var(--color-accent-light); /* Brighter cyan on hover */
}

.hero-title {
    font-size: var(--font-size-6xl);
    color: var(--color-white);
    margin-bottom: var(--space-md);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: var(--font-size-3xl);
    color: var(--color-accent);          /* Cyan color for tagline */
    margin-bottom: var(--space-md);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    font-weight: var(--font-weight-bold);
}

.hero-description {
    font-size: var(--font-size-lg);
    color: var(--color-white);
    margin-bottom: var(--space-xl);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: var(--line-height-relaxed);
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-white);
    animation: bounce 2s infinite;
    transition: opacity var(--transition-base);
    z-index: 0;                             /* Below hero content (z-index: 1) */
}

@keyframes bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}


/*
================================================================================
7. INTRODUCTION SECTION
================================================================================
Brief intro section after hero
*/

.intro {
    padding: var(--space-3xl) 0;
    background-color: var(--color-white);
}

.intro h2 {
    text-align: center;
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
}

.intro-text {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    color: var(--color-gray-700);
}


/*
================================================================================
8. PROGRAMS SECTION
================================================================================
Cards displaying programs and pricing
TO EDIT PRICING: Find the HTML pricing values, not here
TO EDIT CARD COLORS: Change background-color and border-color below
*/

.programs {
    padding: var(--space-3xl) 0;
    background: linear-gradient(to bottom, var(--color-gray-50), var(--color-white));
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

/* Program card */
.program-card {
    background-image: url('images/background.jpeg');
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    position: relative;
    border: 2px solid transparent;
    overflow: hidden;
}

/* Dark overlay for program cards */
.program-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%);
    z-index: 0;
    transition: all var(--transition-base);
}

/* Keep all content above overlay */
.program-card > * {
    position: relative;
    z-index: 1;
}

.program-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl), 0 0 0 2px var(--color-accent); /* Cyan glow on hover */
    border-color: var(--color-primary);
}

.program-card:hover::before {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%);
}

/* Featured program card */
.program-card.featured {
    border: 3px solid var(--color-accent); /* Cyan border for featured */
    box-shadow: var(--shadow-lg), 0 0 20px rgba(0, 217, 255, 0.2); /* Cyan glow */
}

.program-card.featured::before {
    background: linear-gradient(135deg, rgba(0, 50, 80, 0.9) 0%, rgba(0, 0, 0, 0.85) 100%);
}

/* Featured badge */
.featured-badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background-color: var(--color-accent);
    color: var(--color-white);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Program icon */
.program-icon {
    font-size: var(--font-size-5xl);
    margin-bottom: var(--space-md);
    text-align: center;
}

.program-title {
    color: var(--color-accent);          /* Cyan color on dark background */
    text-align: center;
    margin-bottom: var(--space-md);
}

.program-description {
    text-align: center;
    color: var(--color-white);           /* White text on dark background */
    margin-bottom: var(--space-lg);
    line-height: var(--line-height-relaxed);
}

/* Pricing table */
.pricing-table {
    background-color: rgba(0, 0, 0, 0.4);    /* Semi-transparent dark background */
    border-radius: var(--border-radius-lg);
    padding: var(--space-sm) var(--space-md); /* More condensed padding */
    margin-bottom: var(--space-lg);
    border: 1px solid rgba(0, 217, 255, 0.3); /* Subtle cyan border */
}

.pricing-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;              /* More condensed - reduced from space-sm */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--font-size-sm);          /* Slightly smaller text for condensed look */
}

.pricing-row:last-child {
    border-bottom: none;
}

.pricing-label {
    color: var(--color-white);               /* White text */
    font-weight: var(--font-weight-medium);
}

.pricing-value {
    color: var(--color-accent);              /* Cyan for pricing */
    font-weight: var(--font-weight-bold);
}

/* Price highlight for featured program */
.price-highlight {
    text-align: center;
    padding: var(--space-lg) 0;
    margin-bottom: var(--space-lg);
}

.price-amount {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);              /* Cyan for featured price */
    line-height: 1;
}

.price-label {
    font-size: var(--font-size-lg);
    color: var(--color-white);               /* White text */
    margin-top: var(--space-xs);
}

/* Program features list */
.program-features {
    list-style: none;
    margin-bottom: var(--space-lg);
}

.program-features li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    color: var(--color-white);               /* White text for features */
}

.check-icon {
    flex-shrink: 0;
    stroke: var(--color-accent);             /* Cyan checkmarks */
}

/* Program note */
.program-note {
    font-size: var(--font-size-sm);
    color: var(--color-white);               /* White text */
    font-style: italic;
    margin-bottom: var(--space-lg);
    text-align: center;
}

/* Button at bottom of card */
.program-card .btn {
    margin-top: auto;
    width: 100%;
}


/*
================================================================================
9. IMAGE DIVIDER
================================================================================
Full-width image break between sections
TO EDIT: Change the image in the HTML
*/

.image-divider {
    width: 100%;
    height: 300px;                          /* Fixed height for consistency */
    position: relative;
    overflow: hidden;
}

.image-divider::before {
    content: '';
    position: absolute;
    top: -200px;                            /* Extra space for parallax movement (quadrupled) */
    left: 0;
    right: 0;
    bottom: -200px;                         /* Extra space for parallax movement (quadrupled) */
    background-image: url('images/banderole.jpg');
    background-size: cover;
    background-position: center;
    will-change: transform;                 /* Optimize for animations */
    transform: translateY(var(--parallax-y, 0));  /* JS-controlled parallax */
    z-index: 1;
}

.image-divider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.3),                /* Subtle dark overlay */
        rgba(0, 50, 80, 0.4)               /* Dark blue tint */
    );
    z-index: 2;                             /* Above the parallax image */
}


/*
================================================================================
10. ABOUT SECTION
================================================================================
Information about the academy
*/

.about {
    padding: var(--space-3xl) 0;
    background-color: var(--color-white);
}

.about-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-2xl);
    align-items: start;
    margin-top: var(--space-2xl);
}

.about-text {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-gray-700);
}

.about-text p {
    margin-bottom: var(--space-lg);
}

.about-highlights {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.highlight-card {
    background: linear-gradient(135deg, var(--color-gray-800) 0%, var(--color-gray-700) 100%);
    color: var(--color-white);
    padding: var(--space-lg);
    border-radius: var(--border-radius-xl);
    text-align: center;
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--color-accent); /* Cyan accent border */
    transition: all var(--transition-base);
}

.highlight-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl), 0 0 25px rgba(0, 217, 255, 0.4); /* Cyan glow on hover */
    background: linear-gradient(135deg, var(--color-gray-700) 0%, var(--color-gray-600) 100%);
}

.highlight-number {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-xs);
}

.highlight-label {
    font-size: var(--font-size-sm);
    opacity: 0.9;
}


/*
================================================================================
11. CONTACT SECTION
================================================================================
Contact information and call-to-action
TO EDIT CONTACT INFO: Change in the HTML, not here
*/

.contact {
    padding: var(--space-3xl) 0;
    background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
    color: var(--color-white);
}

.contact .section-title,
.contact .section-subtitle {
    color: var(--color-white);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.contact-card {
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 2px solid var(--color-accent); /* Cyan border */
    border-radius: var(--border-radius-xl);
    padding: var(--space-xl);
    text-align: center;
    transition: all var(--transition-base);
}

.contact-card:hover {
    background-color: rgba(0, 0, 0, 0.5);
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl), 0 0 30px rgba(0, 217, 255, 0.5); /* Cyan glow */
    border-color: var(--color-accent-light);
}

.contact-icon {
    margin-bottom: var(--space-md);
    color: var(--color-white);
}

.contact-icon svg {
    width: 48px;
    height: 48px;
}

.contact-card h3 {
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.contact-link {
    display: inline-block;
    color: var(--color-white);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-sm);
    transition: color var(--transition-fast);
}

.contact-link:hover {
    color: var(--color-accent-light);
    text-decoration: underline;
}

.contact-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-sm);
}

/* Call to action box */
.cta-box {
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--color-gray-900);
    border-radius: var(--border-radius-2xl);
    padding: var(--space-2xl);
    border: 3px solid var(--color-accent); /* Cyan border */
    text-align: center;
    box-shadow: var(--shadow-xl);
    margin-top: var(--space-2xl);
}

.cta-box h3 {
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.cta-box p {
    font-size: var(--font-size-xl);
    color: var(--color-gray-700);
    margin-bottom: var(--space-lg);
}


/*
================================================================================
12. FOOTER
================================================================================
Simple footer with copyright
*/

.footer {
    background-color: var(--color-gray-900);
    color: var(--color-gray-300);
    padding: var(--space-2xl) 0;
}

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

.footer-logo {
    max-width: 150px;
    height: auto;
    margin: 0 auto var(--space-md);
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.footer p {
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-sm);
}

.footer-tagline {
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
}


/*
================================================================================
13. RESPONSIVE DESIGN (MOBILE/TABLET)
================================================================================
Adjustments for smaller screens
*/

/* Tablet and below (768px) */
@media (max-width: 768px) {
    :root {
        --font-size-6xl: 2.5rem;
        --font-size-5xl: 2rem;
        --font-size-4xl: 1.75rem;
        --font-size-3xl: 1.5rem;
    }

    /* Mobile navigation */
    .mobile-menu-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.98); /* Black mobile menu */
        flex-direction: column;
        gap: 0;
        padding: var(--space-md);
        box-shadow: var(--shadow-lg);
        transform: translateY(-100%);
        opacity: 0;
        transition: all var(--transition-base);
        pointer-events: none;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }

    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }

    .nav-menu li {
        width: 100%;
    }

    .nav-link {
        display: block;
        padding: var(--space-md);
        text-align: center;
    }

    .nav-link-cta {
        margin-top: var(--space-sm);
    }

    /* Hero section */
    .hero {
        background-attachment: scroll;
    }

    .hero-logo {
        width: 240px;          /* Smaller circle for tablets */
        height: 240px;         /* Perfect circle maintained */
        padding: 0;            /* Zero padding for tablet */
    }

    .hero-title {
        font-size: var(--font-size-4xl);
    }

    .hero-subtitle {
        font-size: var(--font-size-2xl);
    }

    .hero-description {
        font-size: var(--font-size-base);
        padding: 0 var(--space-md);
    }

    .hero-title {
        font-size: var(--font-size-4xl);
    }

    .hero-subtitle {
        font-size: var(--font-size-xl);
    }

    /* Programs grid */
    .programs-grid {
        grid-template-columns: 1fr;
    }

    /* Image divider */
    .image-divider {
        height: 200px;                      /* Smaller height on tablets */
    }

    /* About content */
    .about-content {
        grid-template-columns: 1fr;
    }

    .about-highlights {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .highlight-card {
        flex: 1;
        min-width: 150px;
    }

    /* Contact grid */
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile only (480px and below) */
@media (max-width: 480px) {
    :root {
        --container-padding: var(--space-md);
        --space-3xl: var(--space-2xl);
    }

    .hero-content {
        padding: var(--space-xl) var(--space-md);
    }

    .hero-logo {
        width: 200px;          /* Smaller circle for mobile */
        height: 200px;         /* Perfect circle maintained */
        padding: 0;            /* Zero padding for mobile */
    }

    .hero-title {
        font-size: var(--font-size-3xl);
    }

    .hero-subtitle {
        font-size: var(--font-size-xl);
    }

    .hero-description {
        font-size: var(--font-size-sm);
    }

    .btn-large {
        padding: var(--space-md) var(--space-lg);
        font-size: var(--font-size-base);
    }

    /* Demo options - mobile responsive */
    .hero-logo-large {
        width: 250px;
        height: 250px;
    }

    .hero-description-prominent {
        font-size: var(--font-size-lg);
    }

    .hero-content-spaced {
        gap: var(--space-lg);
    }

    /* Program cards - improved mobile layout */
    .programs-grid {
        gap: var(--space-lg);                /* Reduce gap between cards */
    }

    .program-card {
        padding: var(--space-md);            /* Reduce padding from 32px to 24px */
    }

    .program-icon {
        font-size: var(--font-size-4xl);     /* Reduce icon size */
        margin-bottom: var(--space-sm);      /* Reduce margin */
    }

    .program-title {
        font-size: var(--font-size-xl);      /* Slightly smaller title */
        margin-bottom: var(--space-sm);      /* Reduce margin */
    }

    .program-description {
        font-size: var(--font-size-sm);      /* Smaller description text */
        margin-bottom: var(--space-md);      /* Reduce margin */
    }

    .pricing-table {
        padding: var(--space-xs) var(--space-sm); /* Tighter padding */
        margin-bottom: var(--space-md);      /* Reduce margin */
    }

    .pricing-row {
        padding: var(--space-xs) 0;          /* Already minimal */
        font-size: var(--font-size-xs);      /* Smaller text */
    }

    .program-note {
        font-size: var(--font-size-xs);      /* Smaller note text */
        margin-bottom: var(--space-md);      /* Reduce margin */
    }

    .about-highlights {
        flex-direction: column;
    }
}


/*
================================================================================
14. ACCESSIBILITY & ANIMATIONS
================================================================================
Focus states and motion preferences
*/

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .scroll-indicator {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --color-gray-600: var(--color-gray-700);
        --color-gray-500: var(--color-gray-600);
    }

    .btn {
        border-width: 3px;
    }
}

/* Print styles */
@media print {
    .navbar,
    .scroll-indicator,
    .mobile-menu-toggle,
    .btn {
        display: none;
    }

    body {
        background: white;
        color: black;
    }
}


/*
================================================================================
END OF STYLESHEET
================================================================================
If you need help making changes, look for the section headings above
and find the property you want to modify. All colors are defined in the
Design Tokens section at the top.
================================================================================
*/