/* ============================================
   XR ANATOMY - HOMEPAGE STYLES
   Webflow-Inspired Organization
   Version: 1.0
   Last Updated: November 2025
   ============================================ */

/* --------------------------------------------
   TABLE OF CONTENTS

   1. CSS Custom Properties (Variables)
   2. Typography Base Classes
   3. Layout Containers
   4. Hero Section
   5. Introduction Section
   6. Feature Showcase Sections
   7. Content Categories Section
   8. CTA Section
   9. Utility Classes
   10. Media Queries - Desktop XL (min-width: 1280px)
   11. Media Queries - Tablet (max-width: 992px)
   12. Media Queries - Mobile (max-width: 768px)
   13. Media Queries - Small Mobile (max-width: 480px)
   -------------------------------------------- */

/* ============================================
   1. CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================ */

:root {
    /* Color Palette - Gray Tones */
    --home-color-primary: #3498db;
    --home-color-primary-dark: #2980b9;
    --home-color-primary-shadow: rgba(52, 152, 219, 0.3);
    --home-color-primary-shadow-hover: rgba(52, 152, 219, 0.4);

    --home-color-secondary: #7f8c8d;
    --home-color-secondary-dark: #6c7a7b;
    --home-color-secondary-shadow: rgba(127, 140, 141, 0.3);
    --home-color-secondary-shadow-hover: rgba(127, 140, 141, 0.4);

    --home-color-text-dark: #363636;
    --home-color-text-medium: #666666;
    --home-color-text-light: #999999;

    --home-color-bg-white: #ffffff;
    --home-color-bg-light: #f9f9f9;
    --home-color-bg-lighter: #ECECEC;
    --home-color-bg-lightest: #D2D7D3;

    --home-shadow-light: rgba(0, 0, 0, 0.08);
    --home-shadow-medium: rgba(0, 0, 0, 0.1);
    --home-shadow-dark: rgba(0, 0, 0, 0.15);

    /* Spacing Scale */
    --home-spacing-xs: 12px;
    --home-spacing-sm: 16px;
    --home-spacing-md: 20px;
    --home-spacing-lg: 24px;
    --home-spacing-xl: 32px;
    --home-spacing-xxl: 40px;
    --home-spacing-section: 60px;
    --home-spacing-section-lg: 80px;
    --home-spacing-section-xl: 100px;

    /* Typography Scale */
    --home-font-size-xs: 0.875rem;         /* 14px */
    --home-font-size-sm: 1rem;              /* 16px */
    --home-font-size-md: 1.05rem;           /* 17px */
    --home-font-size-base: 1.125rem;        /* 18px */
    --home-font-size-lg: 1.3rem;            /* 21px */
    --home-font-size-xl: 1.5rem;            /* 24px */
    --home-font-size-xxl: 2rem;             /* 32px */
    --home-font-size-hero-sm: 2.5rem;       /* 40px */
    --home-font-size-hero: 3rem;            /* 48px */

    /* Font Family */
    --home-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

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

    /* Border Radius */
    --home-radius-sm: 8px;
    --home-radius-md: 16px;
    --home-radius-lg: 20px;
    --home-radius-pill: 50px;

    /* Shadows */
    --home-shadow-sm: 0 4px 15px var(--home-shadow-light);
    --home-shadow-md: 0 8px 30px var(--home-shadow-light);
    --home-shadow-lg: 0 10px 40px var(--home-shadow-medium);
    --home-shadow-card: 0 4px 20px var(--home-shadow-light);
    --home-shadow-card-hover: 0 8px 30px var(--home-shadow-dark);

    /* Transitions */
    --home-transition-base: all 0.3s ease;
    --home-transition-fast: all 0.2s ease;

    /* Z-Index Scale */
    --home-z-dropdown: 10;
    --home-z-modal: 100;
}

/* ============================================
   2. TYPOGRAPHY BASE CLASSES
   ============================================ */

.home-heading-hero {
    font-family: var(--home-font-family);
    font-size: var(--home-font-size-hero);
    font-weight: var(--home-font-weight-bold);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--home-color-text-dark);
    text-transform: uppercase;
}

.home-heading-primary {
    font-family: var(--home-font-family);
    font-size: var(--home-font-size-hero-sm);
    font-weight: var(--home-font-weight-semibold);
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--home-color-text-dark);
}

.home-heading-secondary {
    font-family: var(--home-font-family);
    font-size: var(--home-font-size-xxl);
    font-weight: var(--home-font-weight-semibold);
    line-height: 1.3;
    color: var(--home-color-text-dark);
}

.home-text-subtitle {
    font-family: var(--home-font-family);
    font-size: var(--home-font-size-lg);
    font-weight: var(--home-font-weight-normal);
    line-height: 1.5;
    color: var(--home-color-text-medium);
}

.home-text-body {
    font-family: var(--home-font-family);
    font-size: var(--home-font-size-md);
    line-height: 1.7;
    color: var(--home-color-text-medium);
}

.home-text-description {
    font-family: var(--home-font-family);
    font-size: var(--home-font-size-base);
    line-height: 1.7;
    color: var(--home-color-text-medium);
}

.home-text-highlight {
    color: var(--home-color-primary);
}

/* ============================================
   3. LAYOUT CONTAINERS
   ============================================ */

.home-section {
    width: 100%;
    padding: var(--home-spacing-section-lg) var(--home-spacing-md);
}

.home-section--lg {
    padding: var(--home-spacing-section-xl) var(--home-spacing-md);
}

.home-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.home-container--sm {
    max-width: 800px;
    margin: 0 auto;
}

.home-container--md {
    max-width: 900px;
    margin: 0 auto;
}

/* ============================================
   4. HERO SECTION
   ============================================ */

.home-hero {
    width: 100%;
    background: #F1F1F1;
    padding: var(--home-spacing-section-lg) 0 var(--home-spacing-section);
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--home-spacing-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.home-hero__text {
    text-align: left;
    margin-bottom: 0;
}

.home-hero__title {
    font-family: var(--home-font-family);
    font-size: var(--home-font-size-hero);
    font-weight: var(--home-font-weight-bold);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--home-color-text-dark);
    margin-bottom: var(--home-spacing-md);
    text-transform: uppercase;
    text-align: left;
}

.home-hero__subtitle {
    font-family: var(--home-font-family);
    font-size: var(--home-font-size-lg);
    font-weight: var(--home-font-weight-normal);
    color: var(--home-color-text-medium);
    line-height: 1.5;
    text-align: left;
}

.home-hero__image-wrapper {
    width: 100%;
    max-width: 100%;
}

.home-hero__image {
    width: 100%;
    height: auto;
    border-radius: var(--home-radius-lg);
    box-shadow: var(--home-shadow-lg);
}

/* ============================================
   4B. FREE 3D CONTENT PROMOTION SECTION
   ============================================ */

.home-free-content {
    width: 100%;
    background-color: var(--home-color-bg-white);
    padding: var(--home-spacing-section-lg) 0;
}

.home-free-content__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--home-spacing-md);
    display: grid;
    grid-template-columns: 6fr 4fr;
    gap: 60px;
    align-items: center;
}

.home-free-content__text {
    text-align: left;
}

.home-free-content__heading {
    font-family: var(--home-font-family);
    font-size: var(--home-font-size-hero-sm);
    font-weight: var(--home-font-weight-bold);
    color: var(--home-color-text-dark);
    margin-bottom: var(--home-spacing-md);
    line-height: 1.2;
}

.home-free-content__description {
    font-size: var(--home-font-size-base);
    color: var(--home-color-text-medium);
    line-height: 1.7;
    margin-bottom: var(--home-spacing-xl);
}

.home-free-content__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--home-spacing-xl) 0;
}

.home-free-content__item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--home-spacing-md);
    font-size: var(--home-font-size-base);
    color: var(--home-color-text-dark);
}

.home-free-content__icon {
    width: 24px;
    height: 24px;
    color: #28a745;
    flex-shrink: 0;
}

.home-free-content__cta {
    display: inline-block;
    padding: var(--home-spacing-sm) var(--home-spacing-xxl);
    background-color: #28a745;
    color: var(--home-color-bg-white);
    text-decoration: none;
    font-size: var(--home-font-size-base);
    font-weight: var(--home-font-weight-semibold);
    border-radius: var(--home-radius-pill);
    transition: var(--home-transition-base);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.home-free-content__cta:hover {
    background-color: #218838;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
    color: var(--home-color-bg-white);
    text-decoration: none;
}

.home-free-content__media {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-free-content__gif {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: var(--home-radius-lg);
}

/* ============================================
   5. INTRODUCTION SECTION
   ============================================ */

.home-intro {
    padding: var(--home-spacing-section-lg) var(--home-spacing-md);
    background-color: var(--home-color-bg-light);
    text-align: center;
}

.home-intro__heading {
    font-family: var(--home-font-family);
    font-size: var(--home-font-size-hero-sm);
    font-weight: var(--home-font-weight-semibold);
    letter-spacing: -0.025em;
    color: var(--home-color-text-dark);
    margin-bottom: var(--home-spacing-lg);
    line-height: 1.2;
}

.home-intro__description {
    font-family: var(--home-font-family);
    font-size: var(--home-font-size-base);
    color: var(--home-color-text-medium);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ============================================
   5B. LEARNING STYLE NAVIGATOR
   ============================================ */

.learning-navigator {
    margin-top: var(--home-spacing-section);
}

.learning-navigator__title {
    font-family: var(--home-font-family);
    font-size: var(--home-font-size-xl);
    font-weight: var(--home-font-weight-semibold);
    color: var(--home-color-text-dark);
    text-align: center;
    margin-bottom: var(--home-spacing-xxl);
}

.learning-navigator__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--home-spacing-xl);
    max-width: 1200px;
    margin: 0 auto;
}

.learning-card {
    background: var(--home-color-bg-white);
    border-radius: var(--home-radius-lg);
    padding: var(--home-spacing-xl);
    text-align: center;
    border: 3px solid transparent;
    cursor: pointer;
    transition: var(--home-transition-base);
    box-shadow: var(--home-shadow-card);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.learning-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--home-shadow-card-hover);
}

.learning-card--ar {
    border-color: #2196F3;
}

.learning-card--ar:hover {
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
}

.learning-card--3d {
    border-color: #4CAF50;
}

.learning-card--3d:hover {
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
}

.learning-card--mr {
    border-color: #9C27B0;
}

.learning-card--mr:hover {
    background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%);
}

.learning-card__icon {
    margin-bottom: var(--home-spacing-md);
    color: inherit;
}

.learning-card__icon img {
    width: 72px;
    height: 72px;
    border-radius: 22.37%;
}

.learning-card--ar .learning-card__icon {
    color: #2196F3;
}

.learning-card--3d .learning-card__icon {
    color: #4CAF50;
}

.learning-card--mr .learning-card__icon {
    color: #9C27B0;
}

.learning-card__title {
    font-family: var(--home-font-family);
    font-size: var(--home-font-size-lg);
    font-weight: normal;
    color: var(--home-color-text-dark);
    margin-bottom: var(--home-spacing-sm);
}

.learning-card__description {
    font-size: var(--home-font-size-sm);
    color: var(--home-color-text-medium);
    line-height: 1.6;
    margin-bottom: var(--home-spacing-md);
}

.learning-card__cta {
    font-size: var(--home-font-size-sm);
    font-weight: var(--home-font-weight-semibold);
    color: var(--home-color-primary);
    margin-top: auto;
}

.learning-card--ar .learning-card__cta {
    color: #2196F3;
}

.learning-card--3d .learning-card__cta {
    color: #4CAF50;
}

.learning-card--mr .learning-card__cta {
    color: #9C27B0;
}

/* ============================================
   5C. COLOR-CODED SECTION BACKGROUNDS
   ============================================ */

.section-ar {
    background: linear-gradient(135deg, #E3F2FD 0%, #ffffff 100%);
    padding: var(--home-spacing-section-lg) 0;
}

.section-ar .bg-section1 {
    background-color: transparent;
}

.section-3d {
    background: linear-gradient(135deg, #E8F5E9 0%, #ffffff 100%);
    padding: var(--home-spacing-section-lg) 0;
}

.section-3d .bg-section1 {
    background-color: transparent;
}

.section-mr {
    background: linear-gradient(135deg, #F3E5F5 0%, #ffffff 100%);
    padding: var(--home-spacing-section-lg) 0;
}

.section-mr .bg-section0 {
    background-color: transparent;
}

.section-3d__header {
    text-align: center;
    margin-bottom: var(--home-spacing-xxl);
    padding: 0 var(--home-spacing-md);
}

.section-3d__title {
    font-family: var(--home-font-family);
    font-size: var(--home-font-size-hero-sm);
    font-weight: var(--home-font-weight-semibold);
    color: var(--home-color-text-dark);
    margin-bottom: var(--home-spacing-md);
    line-height: 1.2;
}

.section-3d__description {
    font-size: var(--home-font-size-base);
    color: var(--home-color-text-medium);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   6. FEATURE SHOWCASE SECTIONS
   ============================================ */

.home-feature {
    padding: var(--home-spacing-section-lg) var(--home-spacing-md);
    background-color: var(--home-color-bg-light);
}

.home-feature--alternate {
    background-color: var(--home-color-bg-lighter);
}

.home-feature__container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--home-spacing-section);
    align-items: center;
}

.home-feature__container--reverse .home-feature__text {
    order: 1;
}

.home-feature__container--reverse .home-feature__media {
    order: 2;
}

.home-feature__media {
    width: 100%;
}

.home-feature__image {
    width: 100%;
    height: auto;
    border-radius: var(--home-radius-md);
    box-shadow: var(--home-shadow-md);
    transition: var(--home-transition-base);
}

.home-feature__image:hover {
    transform: scale(1.02);
}

.home-feature__text {
    padding: var(--home-spacing-md);
}

.home-feature__title {
    font-family: var(--home-font-family);
    font-size: var(--home-font-size-xxl);
    font-weight: var(--home-font-weight-semibold);
    color: var(--home-color-text-dark);
    line-height: 1.3;
    margin-bottom: var(--home-spacing-md);
}

.home-feature__details {
    margin-top: var(--home-spacing-md);
}

.home-feature__description {
    font-size: var(--home-font-size-md);
    color: var(--home-color-text-medium);
    line-height: 1.7;
    margin-bottom: var(--home-spacing-md);
}

.home-feature__link {
    display: inline-block;
    padding: var(--home-spacing-xs) var(--home-spacing-xl);
    background-color: var(--home-color-primary);
    color: var(--home-color-bg-white);
    text-decoration: none;
    font-size: var(--home-font-size-sm);
    font-weight: var(--home-font-weight-semibold);
    border-radius: var(--home-radius-pill);
    transition: var(--home-transition-base);
    box-shadow: 0 4px 15px var(--home-color-primary-shadow);
}

.home-feature__link:hover {
    background-color: var(--home-color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--home-color-primary-shadow-hover);
    color: var(--home-color-bg-white);
    text-decoration: none;
}

/* ============================================
   7. CONTENT CATEGORIES SECTION
   ============================================ */

.home-categories {
    padding: var(--home-spacing-section-lg) var(--home-spacing-md);
    background-color: var(--home-color-bg-white);
    border-radius: var(--home-radius-lg);
}

.home-categories__heading {
    font-family: var(--home-font-family);
    font-size: var(--home-font-size-hero-sm);
    font-weight: var(--home-font-weight-semibold);
    letter-spacing: -0.025em;
    color: var(--home-color-text-dark);
    margin-bottom: var(--home-spacing-lg);
    line-height: 1.2;
    text-align: center;
}

.home-categories__description {
    font-size: var(--home-font-size-base);
    color: var(--home-color-text-medium);
    line-height: 1.7;
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--home-spacing-xxl);
}

.home-categories__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--home-spacing-xxl);
    max-width: 900px;
    margin: 0 auto;
}

.home-category-card {
    background: var(--home-color-bg-white);
    border-radius: var(--home-radius-lg);
    overflow: hidden;
    box-shadow: var(--home-shadow-card);
    transition: var(--home-transition-base);
    text-decoration: none;
    display: block;
}

.home-category-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--home-shadow-card-hover);
    text-decoration: none;
}

.home-category-card__image {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.home-category-card__body {
    padding: var(--home-spacing-lg);
}

.home-category-card__title {
    font-family: var(--home-font-family);
    font-size: var(--home-font-size-xl);
    font-weight: var(--home-font-weight-semibold);
    color: var(--home-color-text-dark);
    margin-bottom: var(--home-spacing-xs);
}

.home-category-card__text {
    font-size: var(--home-font-size-sm);
    color: var(--home-color-text-medium);
    line-height: 1.6;
    margin: 0;
}

/* ============================================
   8. CTA SECTION
   ============================================ */

.home-cta {
    padding: var(--home-spacing-section-xl) var(--home-spacing-md);
    background: linear-gradient(135deg, var(--home-color-bg-lighter) 0%, var(--home-color-bg-lightest) 100%);
    text-align: center;
}

.home-cta__title {
    font-family: var(--home-font-family);
    font-size: var(--home-font-size-hero-sm);
    font-weight: var(--home-font-weight-bold);
    color: var(--home-color-text-dark);
    margin-bottom: var(--home-spacing-sm);
    letter-spacing: -0.025em;
}

.home-cta__subtitle {
    font-size: var(--home-font-size-lg);
    color: var(--home-color-text-medium);
    margin-bottom: var(--home-spacing-xxl);
    line-height: 1.6;
}

.home-cta__buttons {
    display: flex;
    gap: var(--home-spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.home-cta__button {
    display: inline-block;
    padding: var(--home-spacing-sm) var(--home-spacing-xxl);
    background-color: var(--home-color-primary);
    color: var(--home-color-bg-white);
    text-decoration: none;
    font-size: var(--home-font-size-base);
    font-weight: normal;
    border-radius: var(--home-radius-pill);
    transition: var(--home-transition-base);
    box-shadow: 0 4px 15px var(--home-color-primary-shadow);
}

.home-cta__button:hover {
    background-color: var(--home-color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--home-color-primary-shadow-hover);
    color: var(--home-color-bg-white);
    text-decoration: none;
}

.home-cta__button--secondary {
    background-color: var(--home-color-secondary);
    box-shadow: 0 4px 15px var(--home-color-secondary-shadow);
}

.home-cta__button--secondary:hover {
    background-color: var(--home-color-secondary-dark);
    box-shadow: 0 6px 20px var(--home-color-secondary-shadow-hover);
}

/* Two-Tier Navigation Styles */
.home-cta__section-nav {
    margin-bottom: var(--home-spacing-xxl);
}

.home-cta__page-nav {
    margin-top: var(--home-spacing-xl);
}

.home-cta__section-label,
.home-cta__page-label {
    font-size: var(--home-font-size-base);
    color: var(--home-color-text-medium);
    margin-bottom: var(--home-spacing-md);
    font-weight: var(--home-font-weight-medium);
}

.home-cta__button--ar {
    background-color: #2196F3;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
}

.home-cta__button--ar:hover {
    background-color: #1976D2;
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
}

.home-cta__button--3d {
    background-color: #4CAF50;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.home-cta__button--3d:hover {
    background-color: #388E3C;
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

.home-cta__button--mr {
    background-color: #9C27B0;
    box-shadow: 0 4px 15px rgba(156, 39, 176, 0.3);
}

.home-cta__button--mr:hover {
    background-color: #7B1FA2;
    box-shadow: 0 6px 20px rgba(156, 39, 176, 0.4);
}

.home-cta__link {
    display: inline-block;
    padding: var(--home-spacing-xs) var(--home-spacing-lg);
    background-color: transparent;
    color: var(--home-color-primary);
    text-decoration: underline;
    font-size: var(--home-font-size-sm);
    font-weight: var(--home-font-weight-medium);
    border-radius: var(--home-radius-pill);
    transition: var(--home-transition-base);
}

.home-cta__link:hover {
    color: var(--home-color-primary-dark);
    text-decoration: none;
}

/* ============================================
   9. UTILITY CLASSES
   ============================================ */

.home-text-center {
    text-align: center;
}

.home-margin-bottom-sm {
    margin-bottom: var(--home-spacing-sm);
}

.home-margin-bottom-md {
    margin-bottom: var(--home-spacing-md);
}

.home-margin-bottom-lg {
    margin-bottom: var(--home-spacing-lg);
}

.home-padding-top-sm {
    padding-top: var(--home-spacing-sm);
}

.home-padding-top-md {
    padding-top: var(--home-spacing-md);
}

.home-padding-top-lg {
    padding-top: var(--home-spacing-lg);
}

/* ============================================
   10. MEDIA QUERIES - DESKTOP XL
   (min-width: 1280px)
   ============================================ */

@media screen and (min-width: 1280px) {
    .home-hero__container {
        max-width: 1400px;
    }

    .home-feature__container {
        max-width: 1400px;
        gap: 80px;
    }
}

/* ============================================
   11. MEDIA QUERIES - TABLET
   (max-width: 992px)
   ============================================ */

@media screen and (max-width: 992px) {
    .home-hero__title {
        font-size: var(--home-font-size-hero-sm);
    }

    .home-feature__container {
        grid-template-columns: 1fr;
        gap: var(--home-spacing-xxl);
    }

    .home-feature__container--reverse .home-feature__text,
    .home-feature__container--reverse .home-feature__media {
        order: initial;
    }

    .home-feature__title {
        font-size: 1.75rem;
    }

    .home-intro__heading,
    .home-categories__heading {
        font-size: var(--home-font-size-xxl);
    }

    .home-cta__title {
        font-size: var(--home-font-size-xxl);
    }
}

/* ============================================
   12. MEDIA QUERIES - MOBILE
   (max-width: 768px)
   ============================================ */

@media screen and (max-width: 768px) {
    .home-hero {
        padding: var(--home-spacing-section) 0 var(--home-spacing-xxl);
    }

    .home-hero__container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .home-hero__text {
        text-align: center;
    }

    .home-hero__title {
        font-size: var(--home-font-size-xxl);
        text-align: center;
    }

    .home-hero__subtitle {
        font-size: 1.1rem;
        text-align: center;
    }

    .home-free-content__container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .home-free-content__text {
        text-align: center;
    }

    .home-free-content__heading {
        font-size: var(--home-font-size-xxl);
    }

    .home-free-content__gif {
        max-width: 400px;
    }

    .home-section {
        padding: var(--home-spacing-section) var(--home-spacing-md);
    }

    .home-intro,
    .home-feature,
    .home-categories {
        padding: var(--home-spacing-section) var(--home-spacing-md);
    }

    .home-feature__title {
        font-size: var(--home-font-size-xl);
    }

    .home-intro__heading,
    .home-categories__heading {
        font-size: 1.75rem;
    }

    .home-categories__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .learning-navigator__grid {
        grid-template-columns: 1fr;
        gap: var(--home-spacing-md);
    }

    .learning-card {
        padding: var(--home-spacing-md);
    }

    .section-3d__title {
        font-size: var(--home-font-size-xxl);
    }

    .home-cta {
        padding: var(--home-spacing-section) var(--home-spacing-md);
    }

    .home-cta__title {
        font-size: 1.75rem;
    }

    .home-cta__buttons {
        flex-direction: column;
        align-items: center;
    }

    .home-cta__button {
        width: 100%;
        max-width: 300px;
    }
}

/* ============================================
   13. MEDIA QUERIES - SMALL MOBILE
   (max-width: 480px)
   ============================================ */

@media screen and (max-width: 480px) {
    .home-hero__title {
        font-size: 1.6rem;
    }

    .home-hero__subtitle {
        font-size: var(--home-font-size-sm);
    }

    .home-feature__title {
        font-size: 1.25rem;
    }

    .home-intro__heading,
    .home-categories__heading {
        font-size: var(--home-font-size-xl);
    }

    .home-cta__title {
        font-size: var(--home-font-size-xl);
    }
}