/* ============================================
   1. CSS VARIABLES & DESIGN TOKENS
   ============================================ */
:root {
    /* ===== SPACING SCALE ===== */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 3rem;

    /* ===== ANIMATION SPEEDS ===== */
    --anim-fast: 0.3s;
    --anim-medium: 0.5s;
    --anim-slow: 1s;
    --anim-slower: 2s;
    --anim-slowest: 3s;

    /* ===== BORDERS & RADII ===== */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-round: 50%;

    /* ===== SHADOWS ===== */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.3);

    /* ===== COLOR SHADOWS ===== */
    --shadow-yellow: 0 0 20px rgba(255, 214, 0, 0.5);
    --shadow-red: 0 2px 6px rgba(231, 76, 60, 0.4);
    --shadow-green: 0 4px 12px rgba(39, 174, 96, 0.5);
    --shadow-blue: 0 2px 8px rgba(52, 152, 219, 0.4);

    /* ===== TYPOGRAPHY SIZES ===== */
    --font-title-main: clamp(1.984rem, 5.29vw, 3.306rem);
    --font-title-visual: clamp(2.15rem, 2.875vw, 2.725rem);
    --font-description: clamp(1.157rem, 2.311vw, 1.488rem);
    --font-key-message: clamp(0.862rem, 1.725vw, 1.15rem);
    --font-transition: clamp(1.15rem, 2.3vw, 1.725rem);
    --font-number-large: clamp(2.012rem, 6.325vw, 3.162rem);
    --font-label-stat: clamp(0.862rem, 1.725vw, 1.15rem);

    /* ===== SLIDE CONTENT ===== */
    --slide-padding-y: 0;
    --slide-padding-x: 5vw;
    --slide-max-height: 96vh;

    /* ===== GRID LAYOUTS ===== */
    --grid-gap: 0.75rem;
    --grid-padding: 0.75rem;
    --grid-max-height: 64vh;

    /* ===== CARD COMPONENTS ===== */
    --card-padding: 0.75rem;
    --card-min-height: 160px;
    --card-gap: 0.4rem;

    /* ===== ICON SIZES ===== */
    --icon-small: 24px;
    --icon-medium: 36px;
    --icon-large: 64px;
    --icon-xlarge: 120px;

    /* ===== LIST ITEMS ===== */
    --list-icon-size: 27.5px;
    --list-padding-y: 0.4rem;
    --list-padding-x: 0.6rem;
    --list-gap: 0.6rem;
    --list-font-size: clamp(1.006rem, 2.156vw, 1.294rem);

    /* ===== COMPARISON GRIDS ===== */
    --comparison-gap: 1rem;
    --comparison-padding: 1rem;
    --comparison-viz-height: 180px;
    --comparison-font-size: 0.75rem;
    --comparison-vs-size: clamp(1.725rem, 4.025vw, 2.3rem);

    /* ===== PYRAMID/PLUGIN TOWER ===== */
    --pyramid-scale: 1;
    --pyramid-max-width: 500px;

    /* ===== NAVIGATION ===== */
    --nav-arrow-size: 60px;
    --nav-arrow-font: 2.3rem;
    --pagination-bullet-size: 14px;
}

/* ===== TABLET OVERRIDES (768px and below) ===== */
@media (max-width: 768px) {
    :root {
        --grid-gap: 0.5rem;
        --grid-max-height: 70vh;
        --card-padding: 0.5rem;
        --card-min-height: 160px;
        --icon-large: 50px;
        --comparison-gap: 0.5rem;
        --nav-arrow-size: 44px;
        --nav-arrow-font: 1.61rem;
    }
}

/* ===== MOBILE OVERRIDES (480px and below) ===== */
@media (max-width: 480px) {
    :root {
        /* Typography - scaled down 14.25% from base */
        --font-title-main: clamp(1.886rem, 6.408vw, 2.978rem);
        --font-title-visual: clamp(1.625rem, 2.708vw, 2.23rem);
        --font-description: clamp(1.074rem, 2.23vw, 1.372rem);
        --font-key-message: clamp(0.812rem, 1.625vw, 1.074rem);
        --font-transition: clamp(1.201rem, 2.491vw, 1.715rem);
        --font-number-large: clamp(1.887rem, 5.83vw, 2.916rem);
        --font-label-stat: clamp(0.812rem, 1.625vw, 1.074rem);

        /* Slide Content */
        --slide-padding-y: 0.677rem;
        --slide-padding-x: 0.903rem;
        --slide-max-height: 80vh;

        /* Grid Layouts */
        --grid-gap: 0.361rem;
        --grid-padding: 0.677rem;
        --grid-max-height: 60vh;

        /* Card Components */
        --card-padding: 0.433rem 0.262rem;
        --card-min-height: 120px;
        --card-font-size: 0.732rem;
        --card-title-size: 0.776rem;
        --card-text-size: 0.614rem;
        --card-gap: 0.131rem;
        --card-icon-size: 35px;

        /* Icon Sizes */
        --icon-small: 20px;
        --icon-medium: 25px;
        --icon-large: 39px;
        --icon-xlarge: 90px;

        /* List Items */
        --list-icon-size: 25px;
        --list-padding-y: 0.343rem;
        --list-padding-x: 0.515rem;
        --list-gap: 0.515rem;
        --list-font-size: 0.812rem;

        /* Comparison Grids */
        --comparison-gap: 0.271rem;
        --comparison-padding: 0.677rem;
        --comparison-viz-height: 95px;
        --comparison-font-size: 0.732rem;
        --comparison-title-size: 0.776rem;
        --comparison-vs-size: 1.029rem;
        --comparison-detail-size: 11px;

        /* Pyramid/Plugin Tower */
        --pyramid-scale: 0.9;
        --pyramid-max-width: 450px;

        /* Navigation */
        --nav-arrow-size: 32px;
        --nav-arrow-font: 1.245rem;
        --pagination-bullet-size: 10px;
    }
}

/* ===== SMALL HEIGHT MOBILE (max-height: 600px) ===== */
@media (max-width: 480px) and (max-height: 600px) {
    :root {
        /* Typography - 20% larger for better visibility */
        --font-title-main: clamp(1.56rem, 5.76vw, 2.52rem);
        --font-title-visual: clamp(1.38rem, 2.64vw, 1.92rem);
        --font-description: clamp(0.9rem, 1.92vw, 1.14rem);
        --font-key-message: clamp(0.72rem, 1.44vw, 0.9rem);
        --font-transition: clamp(1.02rem, 2.16vw, 1.38rem);
        --font-number-large: clamp(1.56rem, 5.04vw, 2.28rem);
        --font-label-stat: clamp(0.72rem, 1.44vw, 0.9rem);

        /* Slide Content - Balanced padding */
        --slide-padding-y: 0.2rem;
        --slide-padding-x: 0.6rem;
        --slide-max-height: 90vh;

        /* Grid Layouts - Improved spacing */
        --grid-gap: 0.125rem;
        --grid-padding: 0.25rem;
        --grid-max-height: 72vh;

        /* Card Components - 20% larger */
        --card-padding: 0.3rem 0.24rem;
        --card-min-height: 102px;
        --card-font-size: 0.66rem;
        --card-title-size: 0.72rem;
        --card-text-size: 0.6rem;
        --card-gap: 0.065rem;
        --card-icon-size: 31px;

        /* Icon Sizes - 20% larger */
        --icon-small: 19px;
        --icon-medium: 24px;
        --icon-large: 34px;
        --icon-xlarge: 78px;

        /* List Items - 20% larger */
        --list-icon-size: 24px;
        --list-padding-y: 0.23rem;
        --list-padding-x: 0.37rem;
        --list-gap: 0.25rem;
        --list-font-size: 0.72rem;

        /* Comparison Grids - 20% larger */
        --comparison-gap: 0.125rem;
        --comparison-padding: 0.45rem;
        --comparison-viz-height: 78px;
        --comparison-font-size: 0.66rem;
        --comparison-title-size: 0.72rem;
        --comparison-vs-size: 0.9rem;
        --comparison-detail-size: 11px;

        /* Pyramid/Plugin Tower - reduced by another 5% (0.771 * 0.95 = 0.732) */
        --pyramid-scale: 0.732;
        --pyramid-max-width: 360px;

        /* Navigation */
        --nav-arrow-size: 24px;
        --nav-arrow-font: 0.9rem;
        --pagination-bullet-size: 7px;

        /* Spacing Variables - Balanced (25% increase) */
        --space-xs: 0.065rem;
        --space-sm: 0.125rem;
        --space-md: 0.19rem;
        --space-lg: 0.25rem;
        --space-xl: 0.31rem;
        --space-2xl: 0.375rem;
        --space-3xl: 0.44rem;
    }

    /* Global overrides for all slides - balanced spacing */
    .slide__content {
        gap: 0.065rem !important;
        padding: var(--slide-padding-y) var(--slide-padding-x) !important;
    }

    /* All typography - compact but readable */
    h1, h2, h3, h4, h5, h6, p {
        margin: 0 !important;
        line-height: 1.15 !important;
    }

    .title--main,
    .title--visual,
    .title--sub {
        margin-bottom: 0.125rem !important;
    }

    .text--description,
    .text--key-message,
    .text--transition {
        margin-top: 0.065rem !important;
        margin-bottom: 0.065rem !important;
    }

    /* All grids and flex containers - minimal gaps */
    .grid--2col,
    .grid--3col,
    .grid--stats,
    .grid--comparison {
        gap: var(--grid-gap) !important;
    }

    .flex--center,
    .flex--column,
    .flex--row {
        gap: var(--flex-gap) !important;
    }

    /* All cards - compressed padding */
    .card--approach,
    .card--stat,
    .card--feature {
        padding: var(--card-padding) !important;
        gap: var(--card-gap) !important;
    }

    /* All list items - balanced spacing */
    .list-item {
        padding: var(--list-padding-y) var(--list-padding-x) !important;
        gap: var(--list-gap) !important;
        margin-bottom: 0.065rem !important;
    }

    /* Slide 2: Plugin tower - very tight spacing on super small */
    .swiper-slide[data-swiper-slide-index="1"] .slide__content {
        gap: 0 !important;
        padding-top: 0.08rem;
        padding-bottom: 0.08rem;
    }

    .swiper-slide[data-swiper-slide-index="1"] .title--visual {
        margin-bottom: -0.23rem !important;
        margin-top: 0 !important;
        font-size: calc(var(--font-title-visual) * 0.8) !important;
    }

    .pyramid {
        gap: 2px;
        margin: -0.17rem auto -0.23rem auto !important;
        padding: 0;
        transform: scale(var(--pyramid-scale));
        max-width: var(--pyramid-max-width);
    }

    .pyramid__layer {
        padding: 0.1rem 0.24rem;
        margin-bottom: 2px;
        font-size: 0.66rem;
    }

    .slide-data-overlays {
        margin-top: -0.35rem !important;
        gap: 0.125rem;
    }

    .data-badge,
    .badge--data,
    .swiper-slide[data-swiper-slide-index="1"] .badge--data,
    .swiper-slide[data-swiper-slide-index="1"] .data-badge {
        padding: 0.14rem 0.34rem !important;
        font-size: 0.65rem !important;
    }

    .slide-data-overlays .badge--data,
    .slide-data-overlays .data-badge,
    .swiper-slide[data-swiper-slide-index="1"] .slide-data-overlays div {
        font-size: 0.65rem !important;
    }

    .swiper-slide[data-swiper-slide-index="1"] .text--key-message {
        margin-top: -0.17rem !important;
    }

    /* Slide 3: Stats grid - balanced spacing */
    .swiper-slide[data-swiper-slide-index="2"] .slide__content {
        padding: 0.125rem 0.25rem;
    }

    .grid--stats {
        gap: 0.19rem;
        grid-template-columns: 1fr 1fr;
        max-width: 95vw;
        width: 100%;
        margin: 0.125rem auto;
    }

    .stat-item {
        padding: 0.25rem 0.19rem;
    }

    .stat-number,
    .number--large {
        font-size: 1.32rem !important;
        line-height: 1 !important;
        margin-bottom: 0.065rem !important;
    }

    .stat-label,
    .label--stat {
        font-size: 0.6rem !important;
        line-height: 1.15 !important;
    }

    /* Slide 4: Approach card icons constrained to 6vh max (5vh * 1.2) */
    .grid--2col .card--approach .icon-container,
    .grid--2col .card--approach .icon--large {
        width: 6vh !important;
        height: 6vh !important;
        min-width: 6vh !important;
        min-height: 6vh !important;
        max-width: 6vh !important;
        max-height: 6vh !important;
    }

    /* Constrain all elements inside icon containers */
    .card--approach .icon-container > *,
    .card--approach .icon--large > *,
    .card--approach .jenga-blocks,
    .card--approach .flex--center {
        max-height: 6vh !important;
        max-width: 6vh !important;
    }

    /* Jenga blocks specifically - scaled up 20% (0.5 * 1.2 = 0.6) */
    .card--approach .jenga-blocks {
        transform: scale(0.6);
        transform-origin: center;
    }

    .card--approach .jenga-block {
        height: 8px !important;
        width: 36px !important;
        margin-bottom: 1.5px !important;
    }

    /* SVG icons - 20% bigger (4vh * 1.2 = 4.8vh) */
    .card--approach svg {
        width: 4.8vh !important;
        height: 4.8vh !important;
        max-width: 4.8vh !important;
        max-height: 4.8vh !important;
    }

    /* Custom dev icon (crane with triangle) - 20% bigger (1.6vh * 1.2 = 1.92vh) */
    .card--approach:nth-child(3) svg {
        width: 1.92vh !important;
        height: 1.92vh !important;
        max-width: 1.92vh !important;
        max-height: 1.92vh !important;
    }

    /* Custom dev triangle background - 20% bigger */
    .card--approach:nth-child(3) [style*="border-left"],
    .card--approach:nth-child(3) [style*="border-bottom"] {
        border-left-width: 18px !important;
        border-right-width: 18px !important;
        border-bottom-width: 30px !important;
    }

    /* Node grid for headless - 20% bigger */
    .card--approach [style*="grid-template"] {
        gap: 6px !important;
        padding: 6px !important;
    }

    .card--approach [style*="grid-template"] > div {
        width: 10px !important;
        height: 10px !important;
    }

    /* Approach cards - make orange/red text prominent with shadow */
    .card--approach p[style*="color: #E74C3C"],
    .card--approach p[style*="color:#E74C3C"] {
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.08rem !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8),
                     0 0 8px rgba(231, 76, 60, 0.3) !important;
    }

    /* Keep subtitle text smaller */
    .card--approach p[style*="color: rgba(255, 255, 255"],
    .card--approach p[style*="color:rgba(255,255,255"] {
        font-size: 0.55rem !important;
    }

    .approaches-grid {
        max-height: 75vh;
    }

    /* Image stack slides - balanced spacing */
    .image-stack-grid {
        gap: 0.125rem !important;
        padding: 0.125rem !important;
    }

    .stack-container {
        gap: 0.065rem !important;
    }

    /* Comparison slides - balanced gaps and smaller icons */
    .grid--comparison {
        padding: var(--comparison-padding) !important;
        gap: var(--comparison-gap) !important;
    }

    /* Old way vs New way slide - reduce icons by 35% */
    .grid--comparison .icon--xlarge,
    .grid--comparison .icon--large,
    .grid--comparison svg {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }

    .grid--comparison .node,
    .grid--comparison [class*="conflict"] {
        width: 40px !important;
        height: 40px !important;
    }

    .grid--comparison .checkmark {
        width: 35px !important;
        height: 35px !important;
    }

    /* Jenga blocks - slightly more spacing */
    .jenga-stack {
        gap: 2px !important;
        margin: 0.125rem auto !important;
    }

    .jenga-block {
        margin-bottom: 2px !important;
    }

    /* Platform unified - balanced padding */
    .platform-unified {
        padding: 0.25rem 0.375rem !important;
        margin: 0.125rem auto !important;
    }

    /* CTA sections - balanced spacing */
    .cta-section {
        gap: 0.19rem !important;
        margin: 0.19rem auto !important;
        padding: 0 0.375rem !important;
    }

    .btn--primary {
        padding: 0.375rem 1.1rem !important;
        font-size: 0.75rem !important;
    }

    /* Visual/image slides - maximize space usage */
    .slide--visual img {
        max-height: 85vh !important;
    }

    /* Remove any extra margins/padding */
    .swiper-slide > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Slide 1: Fix overlapping with more vertical spacing */
    /* Target only the first slide (index 0) and its loop duplicates */
    .swiper-slide[data-swiper-slide-index="0"] .slide__content {
        gap: 0.5rem !important;
        padding: 0.4rem 0.5rem !important;
    }

    .swiper-slide[data-swiper-slide-index="0"] .title--main {
        margin-bottom: 0.4rem !important;
    }

    .swiper-slide[data-swiper-slide-index="0"] .jenga-stack {
        margin: 0.5rem auto !important;
        transform: scale(0.7);
    }

    .swiper-slide[data-swiper-slide-index="0"] .jenga-block {
        height: 8px !important;
        width: 36px !important;
        margin-bottom: 4px !important;
    }

    .swiper-slide[data-swiper-slide-index="0"] .jenga-block--large {
        height: 16px !important;
        width: 90px !important;
    }

    .swiper-slide[data-swiper-slide-index="0"] .text--description {
        margin-top: 0.5rem !important;
        margin-bottom: 0.3rem !important;
    }
}

/* ============================================
   2. BASE CONTAINER & STRUCTURE
   ============================================ */
.wwd-slider-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    margin-left: calc(-50vw + 50%) !important;
    margin-top: 15vh;
    margin-bottom: 10vh;
    padding: 0 !important;
    left: 0;
    right: 0;
    scroll-margin-top: 15vh;
}

.wwd-swiper {
    width: 100%;
    height: 100%;
    padding: 2vh 0;
    box-sizing: border-box;
}

.swiper-wrapper {
    height: 100% !important;
    align-items: center !important;
    display: flex !important;
}

.swiper-slide {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100vw !important;
    height: 100% !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    flex-shrink: 0 !important;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================
   3. SLIDE TYPES
   ============================================ */
.slide--text,
.slide--visual {
    background: transparent;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide--visual {
    position: relative;
    overflow: hidden;
}

.slide__content {
    text-align: center;
    width: 100vw;
    height: var(--slide-max-height);
    max-height: var(--slide-max-height);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--slide-padding-y) var(--slide-padding-x);
    box-sizing: border-box;
}

/* ============================================
   4. TYPOGRAPHY SYSTEM
   ============================================ */

/* Main Title */
.title--main {
    font-family: var(--mainFont);
    font-size: var(--font-title-main);
    margin-bottom: var(--space-md);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--mainYellow);
    text-shadow: var(--subtleTextShadow);
    line-height: 1.1;
}

/* Visual/Secondary Title */
.title--visual {
    font-family: var(--mainFont);
    font-size: var(--font-title-visual);
    margin-bottom: var(--space-sm);
    letter-spacing: 0.75px;
    text-transform: uppercase;
    color: var(--mainYellow);
    text-shadow: var(--subtleTextShadow);
    text-align: center;
    z-index: 2;
}

/* Description Text */
.text--description {
    font-family: var(--secondaryFont);
    font-size: var(--font-description);
    margin-bottom: var(--space-lg);
    color: white;
    line-height: 1.4;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

/* Key Message */
.text--key-message {
    font-family: var(--secondaryFont);
    font-size: var(--font-key-message);
    color: white;
    text-align: center;
    margin-top: var(--space-sm);
    font-style: italic;
    text-shadow: var(--subtleTextShadow);
}

/* Transition Text */
.text--transition {
    font-family: var(--mainFont);
    font-size: var(--font-transition);
    color: var(--mainYellow);
    text-align: center;
    margin-top: var(--space-lg);
    text-shadow: var(--subtleTextShadow);
    animation: fadeInUp 1s ease-out;
}

/* Squish modifier for tight spaces */
.title--squish {
    font-size: clamp(1.8rem, 4.8vw, 2.8rem);
}

.text--squish {
    margin: 0;
    padding: 0;
}

/* ============================================
   5. LAYOUT UTILITIES
   ============================================ */

/* Grid Systems */
.grid--2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
    margin: 0 auto;
    max-width: 640px;
    padding: 0 var(--grid-padding);
    max-height: var(--grid-max-height);
    overflow: visible;
}

.grid--stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-lg);
    margin: var(--space-md) auto;
    max-width: 550px;
}

.grid--comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--comparison-gap);
    margin: var(--space-lg) auto;
    max-width: 900px;
    padding: 0 var(--comparison-padding);
    align-items: stretch;
}

/* Flex Layouts */
.flex--column {
    display: flex;
    flex-direction: column;
}

.flex--center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex--list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: var(--space-lg) auto;
    max-width: 600px;
    padding: 0 var(--space-lg);
}

/* ============================================
   6. CARD & ITEM COMPONENTS
   ============================================ */

/* Base Card */
.card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all var(--anim-fast) ease;
}

.card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 214, 0, 0.5);
    box-shadow: var(--shadow-lg);
}

/* Stat Card */
.card--stat {
    padding: var(--space-lg) var(--space-md);
    border: 2px solid rgba(255, 214, 0, 0.3);
    border-radius: var(--radius-lg);
}

.card--stat:hover {
    transform: translateY(-8px);
    border-color: var(--mainYellow);
    box-shadow: var(--lightGoldenGlow);
}

/* Approach Card */
.card--approach {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: var(--card-gap);
    min-height: var(--card-min-height);
    overflow: hidden;
    padding: var(--card-padding);
}

/* List Item */
.list-item {
    display: flex;
    align-items: center;
    gap: var(--list-gap);
    padding: var(--list-padding-y) var(--list-padding-x);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--mainYellow);
    transition: all var(--anim-fast) ease;
}

.list-item:hover {
    transform: translateX(10px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: var(--lightGoldenGlow);
}

/* ============================================
   7. ICON SYSTEM
   ============================================ */

/* Base Icon Container */
.icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon--small {
    width: var(--icon-small);
    height: var(--icon-small);
}

.icon--medium {
    width: var(--icon-medium);
    height: var(--icon-medium);
}

.icon--large {
    width: var(--icon-large);
    height: var(--icon-large);
}

.icon--xlarge {
    width: var(--icon-xlarge);
    height: var(--icon-xlarge);
}

/* Icon Styles */
.icon--yellow {
    color: var(--mainYellow);
    stroke-width: 2;
    filter: drop-shadow(0 2px 4px rgba(255, 214, 0, 0.3));
}

.icon--round-bg {
    background: linear-gradient(135deg, rgba(255, 214, 0, 0.2) 0%, rgba(255, 214, 0, 0.1) 100%);
    border-radius: var(--radius-round);
    padding: 8px;
}

/* ============================================
   8. VISUAL COMPONENTS
   ============================================ */

/* Pyramid Base */
.pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: var(--space-sm) auto;
    max-width: var(--pyramid-max-width);
    padding: 0 var(--space-lg);
    transform: scale(var(--pyramid-scale));
    transform-origin: center center;
}

.pyramid__layer {
    width: var(--layer-width);
    background: linear-gradient(135deg, var(--layer-color) 0%, color-mix(in srgb, var(--layer-color) 70%, black) 100%);
    padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.4rem, 1.5vw, 0.75rem);
    border-radius: 2px;
    box-shadow: var(--shadow-sm);
    transition: all var(--anim-fast) ease;
    position: relative;
    overflow: hidden;
}

.pyramid__layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left var(--anim-medium) ease;
}

.pyramid__layer:hover::before {
    left: 100%;
}

/* Jenga Blocks */
.jenga-blocks {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.jenga-block {
    width: 48px;
    height: 11px;
    background: linear-gradient(135deg, #E67E22 0%, #D35400 100%);
    border-radius: 2px;
    box-shadow: var(--shadow-sm);
    position: relative;
    left: var(--offset, 0);
    animation: jenga-wobble var(--anim-slower) ease-in-out infinite;
}

.jenga-block--large {
    width: 120px;
    height: 22px;
    box-shadow: var(--shadow-md);
}

/* Data Badge */
.badge--data {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid var(--mainYellow);
    border-radius: var(--radius-sm);
    padding: 0.42rem 0.9rem;
    font-family: var(--mainFont);
    font-size: clamp(0.896rem, 1.726vw, 1.172rem);
    color: var(--mainYellow);
    box-shadow: var(--normalBoxShadow);
    animation: badgePulse var(--anim-slowest) ease-in-out infinite;
}

/* Unified Platform */
.platform-unified {
    width: 100%;
    max-width: 420px;
    padding: var(--space-2xl) var(--space-xl);
    background: linear-gradient(135deg, rgba(27, 154, 170, 0.3) 0%, rgba(26, 83, 92, 0.3) 100%);
    border: 2px solid var(--mainYellow);
    border-radius: var(--radius-xl);
    text-align: center;
    position: relative;
    box-shadow: var(--shadow-xl);
    transition: all var(--anim-fast) ease;
}

.platform-unified:hover {
    transform: translateY(-8px);
    box-shadow: var(--lightGoldenGlow), var(--shadow-xl);
}

/* ============================================
   9. STATUS INDICATORS
   ============================================ */

/* Success/Danger States */
.status--danger {
    border: 2px solid #E74C3C;
    background: rgba(231, 76, 60, 0.08);
}

.status--success {
    border: 2px solid #27AE60;
    background: rgba(39, 174, 96, 0.08);
}

/* Number Display */
.number--large {
    font-family: var(--mainFont);
    font-size: var(--font-number-large);
    color: var(--mainYellow);
    text-shadow: var(--subtleTextShadow);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

/* Label Text */
.label--stat {
    font-family: var(--secondaryFont);
    font-size: var(--font-label-stat);
    color: white;
    line-height: 1.3;
}

/* ============================================
   10. CTA COMPONENTS
   ============================================ */

.btn--primary {
    display: inline-block;
    padding: var(--space-lg) 2.5rem;
    background: linear-gradient(135deg, var(--mainYellow) 0%, #FFB700 100%);
    color: #0A0E27;
    font-family: var(--mainFont);
    font-size: clamp(1.092rem, 2.3vw, 1.322rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    transition: all var(--anim-fast) ease;
    box-shadow: 0 4px 12px rgba(255, 214, 0, 0.3);
}

.btn--primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(255, 214, 0, 0.5);
    background: linear-gradient(135deg, #FFD700 0%, var(--mainYellow) 100%);
}

.cta-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xl);
    margin: var(--space-2xl) auto;
    max-width: 600px;
    padding: 0 var(--space-lg);
    text-align: center;
}

/* ============================================
   11. NAVIGATION
   ============================================ */

.swiper-button-prev,
.swiper-button-next {
    width: var(--nav-arrow-size) !important;
    height: var(--nav-arrow-size) !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    transition: opacity var(--anim-fast) ease !important;
    pointer-events: auto !important;
    top: 35% !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: var(--nav-arrow-font) !important;
    font-weight: normal !important;
    color: rgba(0, 0, 0, 0.2) !important;
    transition: all var(--anim-fast) ease !important;
}

.swiper-button-prev.glow::after,
.swiper-button-next.glow::after {
    animation: arrowGlow var(--anim-slower) ease-in-out infinite !important;
}

.swiper-button-prev:hover::after,
.swiper-button-next:hover::after {
    color: rgba(0, 0, 0, 0.4) !important;
}

.swiper-button-prev {
    left: 1rem;
}

.swiper-button-next {
    right: 1rem;
}

/* Pagination */
.swiper-pagination {
    bottom: 2vh !important;
    z-index: 10 !important;
    position: absolute !important;
}

.swiper-pagination-bullet {
    width: var(--pagination-bullet-size);
    height: var(--pagination-bullet-size);
    background-color: white;
    opacity: 0.5;
    transition: all var(--anim-fast) ease;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background-color: var(--mainYellow);
    box-shadow: var(--lightGoldenGlow);
    transform: scale(1.3);
}

/* ============================================
   12. ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes jenga-wobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-2deg); }
    75% { transform: rotate(2deg); }
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 214, 0, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(255, 214, 0, 0.5);
    }
}

@keyframes arrowGlow {
    0%, 100% {
        opacity: 0.2;
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
    }
    50% {
        opacity: 0.5;
        filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
    }
}

@keyframes nodeFlicker {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

@keyframes conflictPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes checkmarkPop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ============================================
   13. RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet (768px and below) */
@media (max-width: 768px) {
    .swiper-button-prev {
        left: 0.5rem;
    }

    .swiper-button-next {
        right: 0.5rem;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
        color: rgba(0, 0, 0, 0.15) !important;
    }

    .slide__content {
        width: 95%;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .swiper-button-prev {
        left: 0.25rem;
    }

    .swiper-button-next {
        right: 0.25rem;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
        color: rgba(0, 0, 0, 0.1) !important;
    }

    /* Slide 2: Plugin tower - minimal gaps on all mobile */
    .swiper-slide[data-swiper-slide-index="1"] .slide__content {
        gap: 0 !important;
    }

    .swiper-slide[data-swiper-slide-index="1"] .title--visual {
        margin-bottom: -0.35rem !important;
    }

    .swiper-slide[data-swiper-slide-index="1"] .pyramid {
        margin: -0.25rem auto -0.35rem auto !important;
        transform: scale(0.95) !important;
    }

    .swiper-slide[data-swiper-slide-index="1"] .slide-data-overlays {
        margin-top: -0.46rem !important;
    }

    .swiper-slide[data-swiper-slide-index="1"] .text--key-message {
        margin-top: -0.25rem !important;
    }

    /* Approach card - make orange/red text bigger with shadow */
    .card--approach p[style*="color: #E74C3C"],
    .card--approach p[style*="color:#E74C3C"] {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.075rem !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8),
                     0 0 8px rgba(231, 76, 60, 0.3) !important;
    }

    /* Keep the subtitle text smaller */
    .card--approach p[style*="color: rgba(255, 255, 255"],
    .card--approach p[style*="color:rgba(255,255,255"] {
        font-size: 0.65rem !important;
    }

    /* Approach cards - just reduce spacing between items */
    .grid--2col .card--approach {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.2rem !important;
    }

    .card--approach .icon-container {
        margin-bottom: 0.1rem !important;
    }

    .card--approach h3.label--stat {
        margin: 0 0 0.05rem 0 !important;
    }

    .card--approach p[style*="color: #E74C3C"] {
        margin: 0 0 0.02rem 0 !important;
    }

    .card--approach p[style*="color: rgba(255, 255, 255"] {
        margin: 0 !important;
    }

    /* Approach card icons - 30% smaller on normal mobile */
    .grid--2col .card--approach .icon-container,
    .grid--2col .card--approach .icon--large {
        width: calc(var(--card-icon-size) * 0.7);
        height: calc(var(--card-icon-size) * 0.7);
        min-width: calc(var(--card-icon-size) * 0.7);
        min-height: calc(var(--card-icon-size) * 0.7);
        max-width: calc(var(--card-icon-size) * 0.7);
        max-height: calc(var(--card-icon-size) * 0.7);
        flex-shrink: 0;
    }

    .grid--2col .card--approach .icon-container svg,
    .grid--2col .card--approach .icon--large svg {
        width: 80% !important;
        height: 80% !important;
        max-width: 80%;
        max-height: 80%;
    }

    /* Jenga blocks on normal mobile */
    .card--approach .jenga-blocks {
        transform: scale(0.7);
    }

    .card--approach .jenga-block {
        height: 9px !important;
        width: 40px !important;
    }

    /* Custom dev icon - 30% smaller on normal mobile */
    .card--approach:nth-child(3) svg {
        width: 56% !important;
        height: 56% !important;
        max-width: 56% !important;
        max-height: 56% !important;
    }

    .card--approach:nth-child(3) [style*="border-left"],
    .card--approach:nth-child(3) [style*="border-bottom"] {
        border-left-width: 28px !important;
        border-right-width: 28px !important;
        border-bottom-width: 42px !important;
    }

    /* Node grid for headless on normal mobile */
    .card--approach [style*="grid-template"] {
        gap: 8px !important;
        padding: 8px !important;
    }

    .card--approach [style*="grid-template"] > div {
        width: 12px !important;
        height: 12px !important;
    }

    .grid--2col h3 {
        font-size: var(--card-title-size) !important;
    }

    .grid--2col p {
        font-size: var(--card-text-size) !important;
        line-height: 1.2 !important;
    }

    /* Comparison specific overrides */
    .grid--comparison > div {
        font-size: var(--comparison-font-size);
    }

    .grid--comparison .flex--center span {
        font-size: var(--comparison-vs-size) !important;
        writing-mode: initial !important;
        text-orientation: initial !important;
    }

    .grid--comparison h3 {
        font-size: var(--comparison-title-size) !important;
    }

    .grid--comparison div[style*="height: 180px"] {
        height: var(--comparison-viz-height) !important;
    }

    .grid--comparison div[style*="font-size: 18px"] {
        font-size: var(--comparison-detail-size) !important;
    }

    /* List item specific overrides */
    .list-item .icon--medium {
        width: var(--list-icon-size);
        height: var(--list-icon-size);
        min-width: var(--list-icon-size);
    }

    .list-item .label--stat {
        font-size: var(--list-font-size);
    }

    /* Make image slides larger on mobile */
    .slide--visual img {
        max-width: 100vw !important;
        width: 100% !important;
        height: auto !important;
    }

    .flex--center img {
        max-width: 95vw !important;
        width: 95vw !important;
    }
}

/* Large screens (1920px and above) */
@media (min-width: 1920px) {
    .slide__content {
        max-width: 1200px;
    }

    .swiper-button-prev,
    .swiper-button-next {
        width: 44px;
        height: 44px;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
        font-size: 1.495rem;
    }
}

/* ============================================
   14. UTILITY CLASSES
   ============================================ */

/* Spacing */
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Display */
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-none { display: none; }

/* Alignment */
.text-center { text-align: center; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }

/* Visibility */
.hidden { visibility: hidden; }
.visible { visibility: visible; }

/* Positioning */
.relative { position: relative; }
.absolute { position: absolute; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }