/* ============================================
   MASTERCLASS IA - STYLES PROFESSIONNELS
   Responsive et adaptatif - Aucun zoom requis
   ============================================ */

/* ============================================
   VARIABLES CSS
   ============================================ */
:root {
    /* Couleurs principales */
    --primary-dark: #1a1f36;
    --primary-blue: #3b5998;
    --accent-gold: #d4af37;
    --accent-emerald: #2ecc71;
    --accent-ruby: #e74c3c;

    /* Couleurs de texte */
    --text-dark: #2c3e50;
    --text-light: #7f8c8d;
    --text-white: #ffffff;

    /* Couleurs de fond */
    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
    --bg-dark: #1a1f36;

    /* Typographie */
    --font-heading: 'Poppins', 'Montserrat', sans-serif;
    --font-body: 'Inter', 'Open Sans', sans-serif;
    --font-accent: 'Playfair Display', serif;

    /* Espacements fluides */
    --spacing-xs: clamp(0.25rem, 0.5vw, 0.5rem);
    --spacing-sm: clamp(0.5rem, 1vw, 1rem);
    --spacing-md: clamp(1rem, 2vw, 2rem);
    --spacing-lg: clamp(1.5rem, 3vw, 3rem);
    --spacing-xl: clamp(2rem, 4vw, 4rem);

    /* Ombres */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================
   RESET & BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: clamp(12px, 1.5vw, 16px);
    scroll-behavior: smooth;
    width: 100%;
    height: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background: var(--bg-white);
    line-height: 1.5;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    height: 100%;
}

/* ============================================
   PRESENTATION CONTAINER
   ============================================ */
.presentation {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* ============================================
   SLIDES
   ============================================ */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-slow), visibility var(--transition-slow);
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vh, 4rem) clamp(1rem, 3vw, 4rem);
}

.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

/* Réduction du padding pour slides avec beaucoup de contenu */
.slide:has(.module-plan),
.slide:has(.agenda-container),
.slide:has(.recap-modules),
.slide:has(.objectives-container),
.slide:has(.rules-container),
.slide:has(.poll-container),
.slide:has(.benefits-list),
.slide:has(.use-cases),
.slide:has(.workshop-instructions),
.slide:has(.detail-container),
.slide:has(.key-messages),
.slide:has(.before-after) {
    padding: clamp(0.5rem, 1.5vh, 2rem) clamp(0.8rem, 2vw, 3rem);
    align-items: flex-start;
}

/* Slide Content */
.slide-content {
    max-width: min(1200px, 90vw);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: fadeInUp 0.8s ease;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-sm);
}

/* Optimisation pour les slides avec beaucoup de contenu */
.slide-content:has(.module-plan),
.slide-content:has(.agenda-container),
.slide-content:has(.objectives-container),
.slide-content:has(.recap-modules),
.slide-content:has(.rules-container),
.slide-content:has(.poll-container),
.slide-content:has(.benefits-list),
.slide-content:has(.use-cases),
.slide-content:has(.workshop-instructions),
.slide-content:has(.detail-container),
.slide-content:has(.key-messages),
.slide-content:has(.before-after) {
    padding: clamp(0.4rem, 0.8vw, 0.8rem) clamp(0.6rem, 1.2vw, 1.2rem);
    justify-content: flex-start;
    max-height: 92vh;
}

/* Scrollbar styling */
.slide-content::-webkit-scrollbar {
    width: 8px;
}

.slide-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.slide-content::-webkit-scrollbar-thumb {
    background: var(--primary-blue);
    border-radius: 4px;
}

/* ============================================
   TYPOGRAPHY - Tailles fluides
   ============================================ */
.slide-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Réduction des marges pour les slides avec beaucoup de contenu */
.slide-content:has(.module-plan) .slide-title,
.slide-content:has(.agenda-container) .slide-title,
.slide-content:has(.objectives-container) .slide-title,
.slide-content:has(.rules-container) .slide-title,
.slide-content:has(.poll-container) .slide-title,
.slide-content:has(.benefits-list) .slide-title,
.slide-content:has(.use-cases) .slide-title,
.slide-content:has(.workshop-instructions) .slide-title,
.slide-content:has(.detail-container) .slide-title,
.slide-content:has(.key-messages) .slide-title,
.slide-content:has(.recap-modules) .slide-title,
.slide-content:has(.before-after) .slide-title {
    margin-bottom: clamp(0.5rem, 1vw, 1rem);
    font-size: clamp(1.2rem, 3vw, 2.2rem);
    line-height: 1.1;
}

h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 2.5vw, 1.75rem);
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: var(--spacing-sm);
}

h4 {
    font-family: var(--font-heading);
    font-size: clamp(0.95rem, 2vw, 1.25rem);
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: var(--spacing-xs);
}

p {
    font-size: clamp(0.85rem, 1.5vw, 1.125rem);
    line-height: 1.6;
    color: var(--text-dark);
}

.subtitle {
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: var(--text-light);
    font-weight: 400;
}

.intro-text {
    font-size: clamp(0.95rem, 1.8vw, 1.25rem);
    color: var(--text-light);
    margin-bottom: var(--spacing-md);
}

/* ============================================
   TITLE SLIDE
   ============================================ */
.title-slide {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-blue) 100%);
    color: var(--text-white);
    text-align: center;
}

.title-container {
    max-width: min(900px, 85vw);
    margin: 0 auto;
}

.main-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 6vw, 4.5rem);
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: var(--spacing-md);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.title-slide .subtitle {
    font-size: clamp(1rem, 2.5vw, 1.75rem);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-lg);
}

.title-details {
    font-size: clamp(0.9rem, 1.8vw, 1.25rem);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-xl);
}

.title-details p {
    color: rgba(255, 255, 255, 0.8);
    margin: var(--spacing-xs) 0;
}

.logo {
    margin-top: var(--spacing-lg);
}

.company-name {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--accent-gold);
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 1s ease;
}

.animate-fade-in-delay-1 {
    animation: fadeIn 1s ease 0.3s both;
}

.animate-fade-in-delay-2 {
    animation: fadeIn 1s ease 0.6s both;
}

.animate-fade-in-delay-3 {
    animation: fadeIn 1s ease 0.9s both;
}

/* ============================================
   NAVIGATION CONTROLS
   ============================================ */
.controls {
    position: fixed;
    bottom: clamp(15px, 3vh, 30px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 50px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
}

.nav-btn {
    width: clamp(35px, 5vw, 45px);
    height: clamp(35px, 5vw, 45px);
    border: none;
    background: var(--primary-dark);
    color: var(--text-white);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.nav-btn:hover {
    background: var(--primary-blue);
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

.nav-btn:active {
    transform: scale(0.95);
}

.nav-btn svg {
    width: clamp(18px, 3vw, 24px);
    height: clamp(18px, 3vw, 24px);
}

.progress-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.progress-bar {
    width: clamp(100px, 20vw, 200px);
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.progress-bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-gold), var(--primary-blue));
    width: var(--progress, 0%);
    transition: width var(--transition-normal);
}

.slide-counter {
    font-size: clamp(0.7rem, 1.2vw, 0.875rem);
    color: var(--text-light);
    font-weight: 500;
}

/* ============================================
   MENU
   ============================================ */
.menu-toggle {
    position: fixed;
    top: clamp(15px, 3vh, 30px);
    right: clamp(15px, 3vw, 30px);
    z-index: 1001;
    width: clamp(40px, 6vw, 50px);
    height: clamp(40px, 6vw, 50px);
    border: none;
    background: var(--primary-dark);
    color: var(--text-white);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

.menu-toggle:hover {
    background: var(--primary-blue);
    transform: scale(1.1);
}

.menu-toggle svg {
    width: clamp(18px, 3vw, 24px);
    height: clamp(18px, 3vw, 24px);
}

.nav-menu {
    position: fixed;
    top: 0;
    right: -350px;
    width: min(350px, 80vw);
    height: 100vh;
    background: var(--bg-white);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    padding: var(--spacing-lg) var(--spacing-md);
    transition: right var(--transition-normal);
    overflow-y: auto;
}

.nav-menu.active {
    right: 0;
}

.nav-menu h3 {
    color: var(--primary-dark);
    margin-bottom: var(--spacing-md);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
}

.nav-menu ul {
    list-style: none;
}

.nav-menu li {
    margin-bottom: var(--spacing-sm);
}

.nav-menu a {
    display: block;
    padding: var(--spacing-sm);
    color: var(--text-dark);
    text-decoration: none;
    border-radius: 8px;
    transition: all var(--transition-fast);
    font-weight: 500;
    font-size: clamp(0.85rem, 1.5vw, 1rem);
}

.nav-menu a:hover {
    background: var(--bg-light);
    color: var(--primary-blue);
    padding-left: var(--spacing-md);
}

/* ============================================
   FULLSCREEN BUTTON
   ============================================ */
.fullscreen-btn {
    position: fixed;
    top: clamp(15px, 3vh, 30px);
    left: clamp(15px, 3vw, 30px);
    z-index: 1001;
    width: clamp(40px, 6vw, 50px);
    height: clamp(40px, 6vw, 50px);
    border: none;
    background: var(--bg-white);
    color: var(--primary-dark);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

.fullscreen-btn:hover {
    background: var(--primary-dark);
    color: var(--text-white);
    transform: scale(1.1);
}

.fullscreen-btn svg {
    width: clamp(16px, 2.5vw, 20px);
    height: clamp(16px, 2.5vw, 20px);
}

/* ============================================
   AGENDA
   ============================================ */
.agenda-container {
    display: flex;
    flex-direction: column;
    gap: clamp(0.3rem, 0.8vw, 0.6rem);
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.agenda-item {
    display: grid;
    grid-template-columns: minmax(100px, auto) 1fr;
    gap: clamp(0.3rem, 0.8vw, 0.6rem);
    padding: clamp(0.4rem, 0.8vw, 0.7rem);
    border-left: 4px solid var(--bg-light);
    transition: all var(--transition-fast);
}

.agenda-item:hover {
    background: var(--bg-light);
    border-left-color: var(--primary-blue);
    transform: translateX(5px);
}

.agenda-item.highlight {
    background: linear-gradient(90deg, rgba(59, 89, 152, 0.05) 0%, transparent 100%);
    border-left-color: var(--primary-blue);
}

.agenda-item.break {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.05) 0%, transparent 100%);
    border-left-color: var(--accent-gold);
}

.agenda-item .time {
    font-weight: 600;
    color: var(--primary-blue);
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    white-space: nowrap;
}

.agenda-item .session-title {
    font-size: clamp(0.85rem, 1.5vw, 1.125rem);
    color: var(--text-dark);
}

/* ============================================
   OBJECTIVES
   ============================================ */
.objectives-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: clamp(0.5rem, 1vw, 0.8rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.objective-item {
    display: flex;
    gap: clamp(0.4rem, 0.8vw, 0.6rem);
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.objective-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.objective-icon {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    flex-shrink: 0;
}

.objective-item p {
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    line-height: 1.4;
}

/* ============================================
   RULES / GUIDELINES
   ============================================ */
.rules-container {
    display: flex;
    flex-direction: column;
    gap: clamp(0.3rem, 0.8vw, 0.6rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.rule-item {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 0.8vw, 0.6rem);
    padding: clamp(0.4rem, 0.8vw, 0.7rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.rule-item:hover {
    background: var(--bg-light);
    transform: translateX(5px);
}

.rule-icon {
    font-size: clamp(1.2rem, 2.5vw, 1.7rem);
    flex-shrink: 0;
}

.rule-item p {
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    line-height: 1.4;
}

/* ============================================
   COUNTRIES GRID
   ============================================ */
.countries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0;
}

.country-badge {
    padding: var(--spacing-sm);
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-blue) 100%);
    color: var(--text-white);
    text-align: center;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.country-badge:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: var(--shadow-md);
}

.welcome-text {
    text-align: center;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: var(--text-light);
    margin-top: var(--spacing-lg);
}

/* ============================================
   POLLS / SONDAGES
   ============================================ */
.poll-container {
    max-width: min(800px, 90vw);
    margin: 0 auto;
    text-align: center;
}

.poll-question {
    font-size: clamp(1rem, 2.5vw, 1.7rem);
    color: var(--primary-dark);
    margin-bottom: clamp(0.5rem, 1vw, 0.8rem);
    line-height: 1.2;
}

.poll-instruction {
    margin: clamp(0.4rem, 0.8vw, 0.8rem) 0;
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: linear-gradient(135deg, rgba(59, 89, 152, 0.1) 0%, rgba(212, 175, 55, 0.1) 100%);
    border-radius: 12px;
}

.poll-instruction p {
    font-size: clamp(0.8rem, 1.4vw, 1.1rem);
    margin: clamp(0.2rem, 0.4vw, 0.3rem) 0;
}

.poll-options {
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 0.6vw, 0.4rem);
    margin-top: clamp(0.5rem, 1vw, 0.8rem);
}

.poll-option {
    padding: clamp(0.4rem, 0.8vw, 0.7rem);
    background: var(--bg-white);
    border: 2px solid var(--bg-light);
    border-radius: 12px;
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    transition: all var(--transition-fast);
    cursor: pointer;
    line-height: 1.3;
}

.poll-option:hover {
    border-color: var(--primary-blue);
    background: var(--bg-light);
    transform: translateX(5px);
}

/* ============================================
   QUOTES
   ============================================ */
.quote-slide {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-blue) 100%);
    color: var(--text-white);
}

.main-quote {
    max-width: min(900px, 85vw);
    margin: 0 auto;
    text-align: center;
}

.main-quote p {
    font-family: var(--font-accent);
    font-size: clamp(1.2rem, 3.5vw, 2.5rem);
    line-height: 1.4;
    color: var(--text-white);
    margin: var(--spacing-xs) 0;
    font-weight: 400;
}

.main-quote cite {
    display: block;
    margin-top: var(--spacing-lg);
    font-size: clamp(0.9rem, 1.8vw, 1.25rem);
    color: var(--accent-gold);
    font-style: normal;
}

/* ============================================
   MODULE TRANSITION
   ============================================ */
.module-transition {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-blue) 100%);
    color: var(--text-white);
    text-align: center;
    justify-content: center;
}

.module-number {
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--accent-gold);
    margin-bottom: var(--spacing-sm);
}

.module-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: var(--spacing-md);
    line-height: 1.1;
}

.module-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.75rem);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-md);
}

.module-duration {
    font-size: clamp(0.9rem, 1.8vw, 1.25rem);
    color: var(--accent-gold);
    font-weight: 600;
}

/* ============================================
   MODULE PLAN
   ============================================ */
.module-plan {
    display: flex;
    flex-direction: column;
    gap: clamp(0.4rem, 1vw, 0.8rem);
}

.plan-section {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-left: 4px solid var(--primary-blue);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.plan-section h3 {
    color: var(--primary-blue);
    margin-bottom: clamp(0.2rem, 0.5vw, 0.4rem);
    font-size: clamp(0.9rem, 1.8vw, 1.3rem);
    line-height: 1.2;
}

.plan-section ul {
    list-style: none;
    padding-left: clamp(0.4rem, 1vw, 0.8rem);
    margin: 0;
}

.plan-section li {
    padding: clamp(0.1rem, 0.3vw, 0.25rem) 0;
    color: var(--text-dark);
    font-size: clamp(0.7rem, 1.2vw, 0.95rem);
    line-height: 1.3;
}

.plan-section li::before {
    content: "▸";
    color: var(--accent-emerald);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* ============================================
   CAPABILITIES GRID
   ============================================ */
.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.capability-item {
    padding: var(--spacing-md);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: all var(--transition-fast);
}

.capability-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.capability-icon {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    margin-bottom: var(--spacing-sm);
}

.capability-item h4 {
    color: var(--primary-blue);
    margin-bottom: var(--spacing-xs);
}

/* ============================================
   CENTERED CONTENT
   ============================================ */
.centered-content {
    text-align: center;
    justify-content: center;
}

.analogy-box {
    max-width: min(800px, 85vw);
    margin: var(--spacing-lg) auto;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(59, 89, 152, 0.05) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-radius: 16px;
    border: 2px solid var(--bg-light);
}

.analogy-text {
    font-size: clamp(1.1rem, 2.5vw, 1.75rem);
    line-height: 1.5;
    color: var(--primary-dark);
    margin: var(--spacing-xs) 0;
}

.example-box {
    max-width: min(700px, 85vw);
    margin: var(--spacing-lg) auto 0;
    padding: var(--spacing-md);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

/* ============================================
   LEVELS CONTAINER
   ============================================ */
.levels-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.level-item {
    padding: var(--spacing-md);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid;
}

.level-item.current {
    background: linear-gradient(90deg, rgba(46, 204, 113, 0.1) 0%, transparent 100%);
    border-left-color: var(--accent-emerald);
}

.level-item.future {
    background: linear-gradient(90deg, rgba(59, 89, 152, 0.1) 0%, transparent 100%);
    border-left-color: var(--primary-blue);
}

.level-item.scifi {
    background: linear-gradient(90deg, rgba(231, 76, 60, 0.1) 0%, transparent 100%);
    border-left-color: var(--accent-ruby);
}

.level-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--accent-gold);
    color: var(--text-white);
    border-radius: 20px;
    font-size: clamp(0.7rem, 1.2vw, 0.875rem);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.level-item h3 {
    margin-bottom: var(--spacing-xs);
}

.level-item .example {
    color: var(--text-light);
    font-style: italic;
}

.level-item .stat {
    font-weight: 600;
    color: var(--primary-blue);
    margin-top: var(--spacing-xs);
}

/* ============================================
   FAMILIES GRID
   ============================================ */
.families-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--spacing-md);
}

.family-card {
    padding: var(--spacing-md);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
}

.family-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-blue);
}

.family-card.highlight {
    background: linear-gradient(135deg, rgba(59, 89, 152, 0.05) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-color: var(--accent-gold);
}

.family-icon {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    margin-bottom: var(--spacing-sm);
}

.family-card h3 {
    color: var(--primary-blue);
    font-size: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: var(--spacing-sm);
}

.family-example {
    color: var(--text-light);
    font-style: italic;
    margin-top: var(--spacing-xs);
    font-size: clamp(0.8rem, 1.3vw, 1rem);
}

/* ============================================
   DETAIL CONTAINER
   ============================================ */
.detail-container {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 0.8rem);
}

.detail-section {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.detail-section h3 {
    font-size: clamp(0.9rem, 1.8vw, 1.3rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
}

.detail-section ul {
    list-style: none;
    padding-left: clamp(0.4rem, 0.8vw, 0.6rem);
}

.detail-section li {
    padding: clamp(0.15rem, 0.3vw, 0.2rem) 0;
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    line-height: 1.4;
}

.detail-section li::before {
    content: "•";
    color: var(--primary-blue);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.sector-examples {
    display: flex;
    flex-direction: column;
    gap: clamp(0.3rem, 0.6vw, 0.5rem);
}

.sector-example {
    padding: clamp(0.4rem, 0.8vw, 0.6rem);
    background: var(--bg-light);
    border-radius: 8px;
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    display: flex;
    align-items: center;
    gap: clamp(0.3rem, 0.6vw, 0.5rem);
    line-height: 1.3;
}

.sector-example.highlight {
    background: linear-gradient(90deg, rgba(59, 89, 152, 0.1) 0%, transparent 100%);
    border-left: 3px solid var(--primary-blue);
}

.sector-icon {
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    flex-shrink: 0;
}

/* ============================================
   COMPARISON CONTAINER
   ============================================ */
.comparison-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--spacing-md);
    align-items: center;
    margin-top: var(--spacing-md);
}

@media (max-width: 900px) {
    .comparison-container {
        grid-template-columns: 1fr;
    }
    .comparison-arrow {
        transform: rotate(90deg);
        margin: var(--spacing-sm) 0;
    }
}

.comparison-col {
    padding: var(--spacing-md);
    border-radius: 12px;
    min-height: auto;
}

.comparison-col.before {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, rgba(231, 76, 60, 0.05) 100%);
}

.comparison-col.after {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.1) 0%, rgba(46, 204, 113, 0.05) 100%);
}

.comparison-col h3 {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.comparison-col ul {
    list-style: none;
    padding: 0;
}

.comparison-col li {
    padding: var(--spacing-xs) 0;
    font-size: clamp(0.85rem, 1.5vw, 1.125rem);
}

.comparison-col.before li::before {
    content: "✗";
    color: var(--accent-ruby);
    font-weight: bold;
    display: inline-block;
    width: 1.5em;
}

.comparison-col.after li::before {
    content: "✓";
    color: var(--accent-emerald);
    font-weight: bold;
    display: inline-block;
    width: 1.5em;
}

.comparison-arrow {
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--primary-blue);
    font-weight: bold;
}

.key-message {
    text-align: center;
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.2) 0%, transparent 100%);
    border-radius: 12px;
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 600;
    color: var(--primary-dark);
}

/* ============================================
   STATS GRID
   ============================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.stat-card {
    padding: var(--spacing-lg);
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: all var(--transition-fast);
}

.stat-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.stat-number {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-heading);
}

.stat-label {
    font-size: clamp(0.85rem, 1.5vw, 1.125rem);
    color: var(--text-dark);
    line-height: 1.5;
}

/* ============================================
   BENEFITS LIST
   ============================================ */
.benefits-list {
    display: flex;
    flex-direction: column;
    gap: clamp(0.3rem, 0.8vw, 0.6rem);
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 0.8rem);
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.benefit-item:hover {
    transform: translateX(10px);
    box-shadow: var(--shadow-md);
}

.benefit-number {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    flex-shrink: 0;
}

.benefit-content h3 {
    color: var(--primary-blue);
    margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem);
    font-size: clamp(0.85rem, 1.7vw, 1.2rem);
}

.benefit-content p {
    color: var(--text-light);
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    line-height: 1.3;
}

/* ============================================
   CASE STUDY
   ============================================ */
.case-study {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-light);
    border-radius: 16px;
}

.case-study h3 {
    text-align: center;
    color: var(--primary-blue);
    margin-bottom: clamp(0.5rem, 1vw, 0.8rem);
    font-size: clamp(0.9rem, 1.8vw, 1.3rem);
}

.before-after {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: clamp(0.5rem, 1vw, 0.8rem);
    margin-bottom: clamp(0.5rem, 1vw, 0.8rem);
}

.before, .after {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    border-radius: 12px;
    background: var(--bg-white);
}

.before h4 {
    color: var(--accent-ruby);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
    font-size: clamp(0.85rem, 1.7vw, 1.1rem);
}

.after h4 {
    color: var(--accent-emerald);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
    font-size: clamp(0.85rem, 1.7vw, 1.1rem);
}

.before ul, .after ul {
    list-style: none;
    padding: 0;
}

.before li, .after li {
    padding: clamp(0.15rem, 0.3vw, 0.2rem) 0;
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    line-height: 1.4;
}

.result-box {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: linear-gradient(135deg, var(--accent-emerald) 0%, rgba(46, 204, 113, 0.8) 100%);
    color: var(--text-white);
    border-radius: 12px;
    text-align: center;
    font-size: clamp(0.8rem, 1.5vw, 1.1rem);
    font-weight: 600;
    line-height: 1.3;
}

.innovation-example {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 0.8rem);
}

.innovation-desc, .innovation-results {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
}

.innovation-desc h4, .innovation-results h4 {
    font-size: clamp(0.85rem, 1.7vw, 1.1rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
}

.innovation-desc p, .innovation-results p {
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    line-height: 1.4;
}

.innovation-desc ul, .innovation-results ul {
    list-style: none;
    padding-left: clamp(0.4rem, 0.8vw, 0.6rem);
}

.innovation-desc li, .innovation-results li {
    padding: clamp(0.15rem, 0.3vw, 0.2rem) 0;
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    line-height: 1.4;
}

/* ============================================
   USE CASES
   ============================================ */
.use-cases {
    display: flex;
    flex-direction: column;
    gap: clamp(0.3rem, 0.8vw, 0.6rem);
}

.use-case-item {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-left: 4px solid var(--accent-emerald);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.use-case-item:hover {
    transform: translateX(10px);
    box-shadow: var(--shadow-md);
}

.use-case-item h4 {
    color: var(--primary-dark);
    margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem);
    font-size: clamp(0.85rem, 1.7vw, 1.1rem);
}

.use-case-item p {
    color: var(--text-light);
    font-style: italic;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    line-height: 1.3;
}

/* ============================================
   ROI TABLE
   ============================================ */
.roi-table {
    background: var(--bg-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.roi-header, .roi-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
}

@media (max-width: 600px) {
    .roi-header, .roi-row {
        grid-template-columns: 1.5fr 1fr 1fr;
        font-size: 0.85rem;
    }
}

.roi-header {
    background: var(--primary-dark);
    color: var(--text-white);
    font-weight: 600;
    font-size: clamp(0.8rem, 1.4vw, 1.125rem);
}

.roi-row {
    border-bottom: 1px solid var(--bg-light);
    transition: background var(--transition-fast);
    font-size: clamp(0.8rem, 1.4vw, 1rem);
}

.roi-row:hover {
    background: var(--bg-light);
}

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

.roi-value {
    color: var(--accent-emerald);
    font-weight: 700;
    font-size: clamp(0.9rem, 1.6vw, 1.25rem);
}

.note {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, transparent 100%);
    border-left: 3px solid var(--accent-gold);
    border-radius: 8px;
    font-style: italic;
    font-size: clamp(0.8rem, 1.3vw, 1rem);
}

/* ============================================
   KEY MESSAGES
   ============================================ */
.key-messages {
    display: flex;
    flex-direction: column;
    gap: clamp(0.3rem, 0.8vw, 0.6rem);
}

.key-message-item {
    display: flex;
    gap: clamp(0.4rem, 0.8vw, 0.6rem);
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.key-message-item:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

.key-message-item .check {
    font-size: clamp(1.2rem, 2.5vw, 1.7rem);
    color: var(--accent-emerald);
    flex-shrink: 0;
}

.key-message-item p {
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    line-height: 1.4;
}

/* ============================================
   WORKSHOP
   ============================================ */
.workshop-instructions {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-light);
    border-radius: 16px;
}

.workshop-header {
    text-align: center;
    margin-bottom: clamp(0.4rem, 0.8vw, 0.8rem);
}

.duration {
    display: inline-block;
    padding: clamp(0.2rem, 0.4vw, 0.3rem) clamp(0.4rem, 0.8vw, 0.6rem);
    background: var(--accent-gold);
    color: var(--text-white);
    border-radius: 20px;
    font-weight: 600;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
}

.workshop-mission {
    text-align: center;
    margin: clamp(0.5rem, 1vw, 0.8rem) 0;
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.workshop-mission h3 {
    font-size: clamp(0.9rem, 1.8vw, 1.3rem);
    margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem);
}

.workshop-mission p {
    font-size: clamp(0.75rem, 1.3vw, 1rem);
}

.workshop-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: clamp(0.5rem, 1vw, 0.8rem);
    margin: clamp(0.5rem, 1vw, 0.8rem) 0;
}

.step {
    display: flex;
    align-items: center;
    gap: clamp(0.3rem, 0.6vw, 0.5rem);
    padding: clamp(0.5rem, 1vw, 0.8rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.step-number {
    width: clamp(35px, 5vw, 45px);
    height: clamp(35px, 5vw, 45px);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-gold) 100%);
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.9rem, 1.8vw, 1.2rem);
    font-weight: 700;
    flex-shrink: 0;
}

.step p {
    font-size: clamp(0.75rem, 1.3vw, 0.95rem);
}

.workshop-guide {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    margin: clamp(0.4rem, 0.8vw, 0.8rem) 0;
}

.workshop-guide h4 {
    font-size: clamp(0.85rem, 1.7vw, 1.1rem);
    margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem);
}

.workshop-guide ul {
    list-style: none;
    padding-left: clamp(0.4rem, 0.8vw, 0.6rem);
}

.workshop-guide li {
    padding: clamp(0.15rem, 0.3vw, 0.2rem) 0;
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    line-height: 1.4;
}

.workshop-guide li::before {
    content: "?";
    color: var(--primary-blue);
    font-weight: bold;
    display: inline-block;
    width: 1.5em;
    margin-left: -1.5em;
}

.workshop-cta {
    text-align: center;
    margin-top: clamp(0.5rem, 1vw, 0.8rem);
    font-size: clamp(0.85rem, 1.7vw, 1.2rem);
    font-weight: 600;
    color: var(--primary-blue);
}

/* ============================================
   PAUSE SLIDE
   ============================================ */
.pause-title {
    font-size: clamp(3rem, 10vw, 6rem);
    color: var(--accent-gold);
    margin-bottom: var(--spacing-md);
}

.pause-duration {
    font-size: clamp(1.8rem, 5vw, 3rem);
    color: var(--text-dark);
    margin-bottom: var(--spacing-sm);
}

.pause-return {
    font-size: clamp(1.1rem, 2.5vw, 1.75rem);
    color: var(--text-light);
}

/* ============================================
   PROFILE
   ============================================ */
.profile-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--spacing-lg);
}

.profile-info {
    max-width: min(700px, 85vw);
    padding: var(--spacing-lg);
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}

.profile-name {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    color: var(--primary-blue);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.profile-details {
    list-style: none;
    padding: 0;
}

.profile-details li {
    padding: var(--spacing-sm) 0;
    font-size: clamp(0.9rem, 1.6vw, 1.25rem);
    border-bottom: 1px solid var(--bg-light);
}

.profile-details li:last-child {
    border-bottom: none;
}

.profile-details li::before {
    content: "▸";
    color: var(--accent-emerald);
    font-weight: bold;
    display: inline-block;
    width: 1.5em;
}

.contact-info {
    text-align: center;
    margin-top: var(--spacing-lg);
    font-size: clamp(0.95rem, 1.8vw, 1.25rem);
    color: var(--primary-blue);
    font-weight: 600;
}

/* ============================================
   RECAP MODULES
   ============================================ */
.recap-modules {
    display: flex;
    flex-direction: column;
    gap: clamp(0.4rem, 0.8vw, 0.7rem);
}

.recap-module {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-left: 4px solid var(--primary-blue);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.recap-module h3 {
    color: var(--primary-blue);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
    font-size: clamp(0.9rem, 1.8vw, 1.3rem);
    line-height: 1.2;
}

.recap-module ul {
    list-style: none;
    padding-left: clamp(0.4rem, 0.8vw, 0.6rem);
}

.recap-module li {
    padding: clamp(0.1rem, 0.3vw, 0.2rem) 0;
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    line-height: 1.4;
}

.recap-module li::before {
    content: "✓";
    color: var(--accent-emerald);
    font-weight: bold;
    display: inline-block;
    width: 1.5em;
    margin-left: -1.5em;
}

/* ============================================
   CONTACT DETAILS
   ============================================ */
.contact-details {
    margin: var(--spacing-lg) 0;
}

.contact-details p {
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1rem, 2vw, 1.5rem);
    margin: var(--spacing-xs) 0;
}

.closing-message {
    font-size: clamp(1.2rem, 3vw, 2rem);
    color: var(--text-white);
    margin-top: var(--spacing-lg);
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .controls,
    .menu-toggle,
    .fullscreen-btn,
    .nav-menu {
        display: none;
    }

    .slide {
        page-break-after: always;
        position: relative;
        opacity: 1;
        visibility: visible;
    }

    html {
        font-size: 12pt;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.positive {
    color: var(--accent-emerald);
}

.negative {
    color: var(--accent-ruby);
}

.highlight-text {
    background: linear-gradient(120deg, var(--accent-gold) 0%, rgba(212, 175, 55, 0.3) 100%);
    padding: 0 var(--spacing-xs);
    border-radius: 4px;
}

/* ============================================
   TOOLS COMPARISON (Slide 39)
   ============================================ */
.tools-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: clamp(0.5rem, 1vw, 0.8rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.tool-card {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--bg-light);
    transition: all var(--transition-fast);
}

.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-blue);
}

.tool-card.featured {
    border-color: var(--accent-gold);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, var(--bg-white) 100%);
}

.tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
}

.tool-header h3 {
    font-size: clamp(0.9rem, 1.8vw, 1.3rem);
    margin-bottom: 0;
}

.badge {
    display: inline-block;
    padding: clamp(0.2rem, 0.4vw, 0.3rem) clamp(0.3rem, 0.6vw, 0.5rem);
    background: var(--accent-gold);
    color: var(--text-white);
    border-radius: 12px;
    font-size: clamp(0.6rem, 1vw, 0.75rem);
    font-weight: 600;
}

.badge.popular {
    background: var(--primary-blue);
}

.tool-desc {
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    margin: clamp(0.3rem, 0.6vw, 0.5rem) 0;
    line-height: 1.3;
}

.tool-features {
    list-style: none;
    padding: 0;
    margin: clamp(0.4rem, 0.8vw, 0.6rem) 0;
}

.tool-features li {
    padding: clamp(0.15rem, 0.3vw, 0.2rem) 0;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    line-height: 1.3;
}

.tool-price {
    margin-top: clamp(0.4rem, 0.8vw, 0.6rem);
    padding-top: clamp(0.3rem, 0.6vw, 0.5rem);
    border-top: 1px solid var(--bg-light);
    font-weight: 600;
    color: var(--primary-blue);
    font-size: clamp(0.75rem, 1.3vw, 0.95rem);
}

/* ============================================
   DEMO EXAMPLE (Slides 46, 47, etc.)
   ============================================ */
.demo-example {
    display: flex;
    flex-direction: column;
    gap: clamp(0.4rem, 0.8vw, 0.6rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.prompt-section, .example-section, .benefit-box, .tips-section {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.prompt-section h3, .example-section h3, .benefit-box h3 {
    font-size: clamp(0.85rem, 1.7vw, 1.2rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
}

.prompt-box {
    padding: clamp(0.5rem, 1vw, 0.8rem);
    background: var(--bg-light);
    border-radius: 8px;
    border-left: 3px solid var(--primary-blue);
}

.prompt-box p {
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    line-height: 1.4;
    margin: clamp(0.15rem, 0.3vw, 0.2rem) 0;
    font-family: monospace;
}

.tips-section h4 {
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
}

.tips-section ul {
    list-style: none;
    padding-left: clamp(0.4rem, 0.8vw, 0.6rem);
}

.tips-section li {
    padding: clamp(0.15rem, 0.3vw, 0.2rem) 0;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    line-height: 1.3;
}

.tips-section li::before {
    content: "•";
    color: var(--accent-emerald);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.benefit-box ul {
    list-style: none;
    padding: 0;
}

.benefit-box li {
    padding: clamp(0.15rem, 0.3vw, 0.2rem) 0;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    line-height: 1.3;
}

/* ============================================
   GAINS TABLE (Slide 57)
   ============================================ */
.gains-table {
    background: var(--bg-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.gain-header, .gain-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 0.8fr;
    gap: clamp(0.3rem, 0.6vw, 0.5rem);
    padding: clamp(0.4rem, 0.8vw, 0.7rem);
}

@media (max-width: 700px) {
    .gain-header, .gain-row {
        grid-template-columns: 1.2fr 0.8fr 0.8fr 0.7fr;
        font-size: 0.8rem;
    }
}

.gain-header {
    background: var(--primary-dark);
    color: var(--text-white);
    font-weight: 600;
    font-size: clamp(0.7rem, 1.2vw, 0.95rem);
}

.gain-header div {
    font-size: clamp(0.7rem, 1.2vw, 0.95rem);
}

.gain-row {
    border-bottom: 1px solid var(--bg-light);
    transition: background var(--transition-fast);
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
}

.gain-row:hover {
    background: var(--bg-light);
}

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

.gain-row div {
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
}

.gain-value {
    color: var(--accent-emerald);
    font-weight: 700;
    font-size: clamp(0.8rem, 1.4vw, 1.1rem) !important;
}

.total-weekly {
    margin-top: clamp(0.5rem, 1vw, 0.8rem);
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.1) 0%, rgba(46, 204, 113, 0.05) 100%);
    border-radius: 12px;
    text-align: center;
}

.total-weekly p {
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    line-height: 1.4;
    margin: clamp(0.2rem, 0.4vw, 0.3rem) 0;
}

/* ============================================
   PRINCIPLE DETAIL (Slide 64)
   ============================================ */
.principle-detail {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 0.8rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.principle-explanation {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-light);
    border-radius: 12px;
}

.principle-explanation h3 {
    font-size: clamp(0.85rem, 1.7vw, 1.2rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
}

.principle-explanation p {
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    line-height: 1.4;
}

.good-bad-examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: clamp(0.5rem, 1vw, 0.8rem);
}

.good-example, .bad-example {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.good-example {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.1) 0%, rgba(46, 204, 113, 0.05) 100%);
    border-left: 4px solid var(--accent-emerald);
}

.bad-example {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, rgba(231, 76, 60, 0.05) 100%);
    border-left: 4px solid var(--accent-ruby);
}

.good-example h4, .bad-example h4 {
    font-size: clamp(0.8rem, 1.5vw, 1.1rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
}

.good-example p, .bad-example p {
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    line-height: 1.4;
}

.implementation {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.implementation h4 {
    font-size: clamp(0.85rem, 1.7vw, 1.1rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
}

.implementation ul {
    list-style: none;
    padding-left: clamp(0.4rem, 0.8vw, 0.6rem);
}

.implementation li {
    padding: clamp(0.15rem, 0.3vw, 0.2rem) 0;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    line-height: 1.3;
}

.implementation li::before {
    content: "▸";
    color: var(--primary-blue);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* ============================================
   DATA PROTECTION & CYBER RISKS (Slides 68-69)
   ============================================ */
.data-protection-rules {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 0.8rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.rule-category {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.rule-category.danger {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, rgba(231, 76, 60, 0.05) 100%);
    border-left: 4px solid var(--accent-ruby);
}

.rule-category.safe {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.1) 0%, rgba(46, 204, 113, 0.05) 100%);
    border-left: 4px solid var(--accent-emerald);
}

.rule-category h3 {
    font-size: clamp(0.85rem, 1.7vw, 1.2rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
}

.forbidden-list, .safe-list {
    list-style: none;
    padding: 0;
}

.forbidden-list li, .safe-list li {
    padding: clamp(0.15rem, 0.3vw, 0.2rem) 0;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    line-height: 1.3;
}

.example-anonymization {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.example-anonymization h4 {
    font-size: clamp(0.85rem, 1.7vw, 1.1rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
}

.comparison-inline {
    display: flex;
    flex-direction: column;
    gap: clamp(0.3rem, 0.6vw, 0.5rem);
}

.before-anon, .after-anon {
    padding: clamp(0.4rem, 0.8vw, 0.6rem);
    border-radius: 8px;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    line-height: 1.3;
}

.before-anon {
    background: linear-gradient(90deg, rgba(231, 76, 60, 0.1) 0%, transparent 100%);
}

.after-anon {
    background: linear-gradient(90deg, rgba(46, 204, 113, 0.1) 0%, transparent 100%);
}

.cyber-risks {
    display: flex;
    flex-direction: column;
    gap: clamp(0.4rem, 0.8vw, 0.6rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.risk-item {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    border-left: 4px solid var(--accent-ruby);
    box-shadow: var(--shadow-sm);
}

.risk-item h3 {
    font-size: clamp(0.85rem, 1.7vw, 1.2rem);
    margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem);
    color: var(--accent-ruby);
}

.risk-desc {
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    line-height: 1.4;
    margin: clamp(0.2rem, 0.4vw, 0.3rem) 0;
    color: var(--text-light);
}

.risk-example {
    padding: clamp(0.4rem, 0.8vw, 0.6rem);
    background: var(--bg-light);
    border-radius: 8px;
    margin: clamp(0.3rem, 0.6vw, 0.5rem) 0;
}

.risk-example p {
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    line-height: 1.3;
}

.mitigation {
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    color: var(--accent-emerald);
    margin-top: clamp(0.3rem, 0.6vw, 0.5rem);
    line-height: 1.3;
}

/* ============================================
   CHARTER (Slide 71)
   ============================================ */
.charter-content {
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.charter-intro {
    font-size: clamp(0.8rem, 1.4vw, 1.1rem);
    text-align: center;
    margin-bottom: clamp(0.5rem, 1vw, 0.8rem);
    color: var(--primary-blue);
    font-weight: 500;
}

.charter-rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: clamp(0.4rem, 0.8vw, 0.6rem);
}

.charter-section {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--primary-blue);
}

.charter-section h3 {
    font-size: clamp(0.8rem, 1.5vw, 1.1rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
    color: var(--primary-blue);
}

.charter-section ul {
    list-style: none;
    padding: 0;
}

.charter-section li {
    padding: clamp(0.15rem, 0.3vw, 0.2rem) 0;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    line-height: 1.3;
}

.charter-section li::before {
    content: "▸";
    color: var(--accent-emerald);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.charter-footer {
    margin-top: clamp(0.5rem, 1vw, 0.8rem);
    padding: clamp(0.5rem, 1vw, 0.8rem);
    background: linear-gradient(90deg, rgba(231, 76, 60, 0.1) 0%, transparent 100%);
    border-left: 3px solid var(--accent-ruby);
    border-radius: 8px;
    font-size: clamp(0.75rem, 1.3vw, 0.95rem);
    text-align: center;
}

/* ============================================
   ROADMAP (Slide 72)
   ============================================ */
.roadmap {
    display: flex;
    flex-direction: column;
    gap: clamp(0.4rem, 0.8vw, 0.6rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.roadmap-step {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--primary-blue);
}

.step-header {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 0.8vw, 0.6rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
}

.step-num {
    width: clamp(35px, 5vw, 45px);
    height: clamp(35px, 5vw, 45px);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-gold) 100%);
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.9rem, 1.8vw, 1.3rem);
    font-weight: 700;
    flex-shrink: 0;
}

.step-header h3 {
    font-size: clamp(0.85rem, 1.7vw, 1.2rem);
    margin-bottom: 0;
    color: var(--primary-dark);
}

.duration {
    margin-left: auto;
    padding: clamp(0.2rem, 0.4vw, 0.3rem) clamp(0.4rem, 0.8vw, 0.6rem);
    background: var(--accent-gold);
    color: var(--text-white);
    border-radius: 12px;
    font-size: clamp(0.65rem, 1.1vw, 0.8rem);
    font-weight: 600;
}

.step-tasks {
    list-style: none;
    padding-left: clamp(0.4rem, 0.8vw, 0.6rem);
}

.step-tasks li {
    padding: clamp(0.15rem, 0.3vw, 0.2rem) 0;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    line-height: 1.3;
}

.step-tasks li::before {
    content: "▸";
    color: var(--accent-emerald);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* ============================================
   MISTAKES GRID (Slide 75)
   ============================================ */
.mistakes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: clamp(0.5rem, 1vw, 0.8rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.mistake-item {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
    border: 2px solid transparent;
}

.mistake-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-ruby);
}

.mistake-number {
    width: clamp(30px, 4vw, 40px);
    height: clamp(30px, 4vw, 40px);
    border-radius: 50%;
    background: var(--accent-ruby);
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.8rem, 1.5vw, 1.1rem);
    font-weight: 700;
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
}

.mistake-item h3 {
    font-size: clamp(0.85rem, 1.7vw, 1.1rem);
    margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem);
    color: var(--accent-ruby);
}

.mistake-item p {
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    line-height: 1.3;
    margin: clamp(0.2rem, 0.4vw, 0.3rem) 0;
}

.solution {
    color: var(--accent-emerald) !important;
    font-weight: 500;
    margin-top: clamp(0.3rem, 0.6vw, 0.5rem) !important;
}

/* ============================================
   KPIs CATEGORIES (Slide 76)
   ============================================ */
.kpis-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: clamp(0.5rem, 1vw, 0.8rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.kpi-category {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--primary-blue);
}

.kpi-category h3 {
    font-size: clamp(0.85rem, 1.7vw, 1.1rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
    color: var(--primary-blue);
}

.kpi-list {
    list-style: none;
    padding: 0;
}

.kpi-list li {
    padding: clamp(0.15rem, 0.3vw, 0.2rem) 0;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    line-height: 1.3;
}

.kpi-list li::before {
    content: "▸";
    color: var(--accent-emerald);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.kpi-tip {
    margin-top: clamp(0.5rem, 1vw, 0.8rem);
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, transparent 100%);
    border-left: 3px solid var(--accent-gold);
    border-radius: 8px;
    text-align: center;
}

.kpi-tip p {
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    line-height: 1.3;
}

/* ============================================
   EVALUATION GUIDE (Slide 73)
   ============================================ */
.evaluation-guide {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 0.8rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.eval-section {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--accent-gold);
}

.eval-section h3 {
    font-size: clamp(0.85rem, 1.7vw, 1.2rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
    color: var(--accent-gold);
}

.eval-section ul {
    list-style: none;
    padding-left: clamp(0.4rem, 0.8vw, 0.6rem);
}

.eval-section li {
    padding: clamp(0.15rem, 0.3vw, 0.2rem) 0;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    line-height: 1.3;
}

.eval-section li::before {
    content: "▸";
    color: var(--accent-emerald);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.eval-questions {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.eval-questions h3 {
    font-size: clamp(0.85rem, 1.7vw, 1.2rem);
    margin-bottom: clamp(0.4rem, 0.8vw, 0.6rem);
    color: var(--primary-blue);
}

.question-category {
    margin-bottom: clamp(0.4rem, 0.8vw, 0.6rem);
}

.question-category h4 {
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem);
    color: var(--text-dark);
}

.question-category ul {
    list-style: none;
    padding-left: clamp(0.4rem, 0.8vw, 0.6rem);
}

.question-category li {
    padding: clamp(0.1rem, 0.3vw, 0.15rem) 0;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    line-height: 1.3;
}

.question-category li::before {
    content: "?";
    color: var(--primary-blue);
    font-weight: bold;
    display: inline-block;
    width: 1.2em;
    margin-left: -1.2em;
}

/* ============================================
   BUDGET SCENARIOS (Slide 77)
   ============================================ */
.budget-scenarios {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 0.8rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.budget-level {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--primary-blue);
}

.budget-level h3 {
    font-size: clamp(0.85rem, 1.7vw, 1.2rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
    color: var(--primary-dark);
}

.budget-amount {
    font-size: clamp(0.8rem, 1.5vw, 1.1rem);
    color: var(--primary-blue);
    font-weight: 600;
    margin: clamp(0.2rem, 0.4vw, 0.3rem) 0;
}

.budget-breakdown ul {
    list-style: none;
    padding-left: clamp(0.4rem, 0.8vw, 0.6rem);
    margin: clamp(0.3rem, 0.6vw, 0.5rem) 0;
}

.budget-breakdown li {
    padding: clamp(0.1rem, 0.3vw, 0.15rem) 0;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    line-height: 1.3;
}

.budget-breakdown li::before {
    content: "•";
    color: var(--accent-emerald);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.what-you-get {
    margin-top: clamp(0.3rem, 0.6vw, 0.5rem);
    padding: clamp(0.4rem, 0.8vw, 0.6rem);
    background: var(--bg-light);
    border-radius: 8px;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    line-height: 1.3;
}

/* ============================================
   ROLES GRID (Slide 78)
   ============================================ */
.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: clamp(0.5rem, 1vw, 0.8rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.role-card {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--primary-blue);
    transition: all var(--transition-fast);
}

.role-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.role-card h3 {
    font-size: clamp(0.85rem, 1.7vw, 1.1rem);
    margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem);
    color: var(--primary-blue);
}

.role-desc {
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    color: var(--text-light);
    margin: clamp(0.2rem, 0.4vw, 0.3rem) 0;
    font-style: italic;
}

.role-responsibilities {
    list-style: none;
    padding-left: clamp(0.4rem, 0.8vw, 0.6rem);
    margin: clamp(0.3rem, 0.6vw, 0.5rem) 0;
}

.role-responsibilities li {
    padding: clamp(0.1rem, 0.3vw, 0.15rem) 0;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    line-height: 1.3;
}

.role-responsibilities li::before {
    content: "▸";
    color: var(--accent-emerald);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.when {
    margin-top: clamp(0.3rem, 0.6vw, 0.5rem);
    padding: clamp(0.3rem, 0.6vw, 0.5rem);
    background: var(--bg-light);
    border-radius: 8px;
    font-size: clamp(0.65rem, 1.1vw, 0.8rem);
    line-height: 1.3;
}

.alternative {
    margin-top: clamp(0.5rem, 1vw, 0.8rem);
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, transparent 100%);
    border-left: 3px solid var(--accent-gold);
    border-radius: 8px;
    font-size: clamp(0.75rem, 1.3vw, 0.95rem);
    text-align: center;
}

/* ============================================
   TRAINING LEVELS (Slide 79)
   ============================================ */
.training-levels {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 0.8rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.training-level {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--accent-emerald);
}

.training-level h3 {
    font-size: clamp(0.85rem, 1.7vw, 1.1rem);
    margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem);
    color: var(--accent-emerald);
}

.training-content {
    margin: clamp(0.3rem, 0.6vw, 0.5rem) 0;
}

.training-content p {
    font-size: clamp(0.75rem, 1.3vw, 0.95rem);
    margin: clamp(0.2rem, 0.4vw, 0.3rem) 0;
}

.training-content ul {
    list-style: none;
    padding-left: clamp(0.4rem, 0.8vw, 0.6rem);
    margin: clamp(0.2rem, 0.4vw, 0.3rem) 0;
}

.training-content li {
    padding: clamp(0.1rem, 0.3vw, 0.15rem) 0;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    line-height: 1.3;
}

.training-content li::before {
    content: "•";
    color: var(--primary-blue);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.target {
    margin-top: clamp(0.3rem, 0.6vw, 0.5rem);
    padding: clamp(0.3rem, 0.6vw, 0.5rem);
    background: var(--bg-light);
    border-radius: 8px;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    font-weight: 500;
}

.training-tip {
    margin-top: clamp(0.5rem, 1vw, 0.8rem);
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, transparent 100%);
    border-left: 3px solid var(--accent-gold);
    border-radius: 8px;
    text-align: center;
}

.training-tip p {
    font-size: clamp(0.75rem, 1.3vw, 0.95rem);
    line-height: 1.3;
}

/* ============================================
   REGULATION (Slide 80)
   ============================================ */
.regulation-content {
    display: flex;
    flex-direction: column;
    gap: clamp(0.4rem, 0.8vw, 0.6rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.regulation-intro {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-light);
    border-radius: 12px;
    text-align: center;
}

.regulation-intro p {
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    line-height: 1.4;
}

.risk-levels h3 {
    font-size: clamp(0.85rem, 1.7vw, 1.2rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
    color: var(--primary-dark);
}

.risk-level {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
}

.risk-level.prohibited {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, rgba(231, 76, 60, 0.05) 100%);
    border-left: 4px solid var(--accent-ruby);
}

.risk-level.high {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.1) 0%, rgba(255, 165, 0, 0.05) 100%);
    border-left: 4px solid #ff9800;
}

.risk-level.limited {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%);
    border-left: 4px solid #ffc107;
}

.risk-level.minimal {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.1) 0%, rgba(46, 204, 113, 0.05) 100%);
    border-left: 4px solid var(--accent-emerald);
}

.risk-level h4 {
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem);
}

.risk-level p {
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    margin: clamp(0.2rem, 0.4vw, 0.3rem) 0;
}

.risk-level ul {
    list-style: none;
    padding-left: clamp(0.4rem, 0.8vw, 0.6rem);
}

.risk-level li {
    padding: clamp(0.1rem, 0.3vw, 0.15rem) 0;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    line-height: 1.3;
}

.risk-level li::before {
    content: "•";
    color: var(--primary-blue);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.compliance-tip {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.compliance-tip p {
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    margin: clamp(0.2rem, 0.4vw, 0.3rem) 0;
    line-height: 1.3;
}

/* ============================================
   SUCCESS STORIES (Slide 81+)
   ============================================ */
.success-stories {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 0.8rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.story-card {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--accent-gold);
}

.story-card h3 {
    font-size: clamp(0.85rem, 1.7vw, 1.2rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
    color: var(--accent-gold);
}

.story-context {
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    margin: clamp(0.2rem, 0.4vw, 0.3rem) 0;
}

.story-solution {
    margin: clamp(0.3rem, 0.6vw, 0.5rem) 0;
}

.story-solution p {
    font-size: clamp(0.75rem, 1.3vw, 0.95rem);
    font-weight: 600;
    margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem);
}

.story-solution ul {
    list-style: none;
    padding-left: clamp(0.4rem, 0.8vw, 0.6rem);
}

.story-solution li {
    padding: clamp(0.1rem, 0.3vw, 0.15rem) 0;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    line-height: 1.3;
}

.story-solution li::before {
    content: "▸";
    color: var(--primary-blue);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* ============================================
   CERTIFICATION OFFER (Slide 89)
   ============================================ */
.certification-offer {
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.offer-header {
    text-align: center;
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-blue) 100%);
    color: var(--text-white);
    border-radius: 12px 12px 0 0;
}

.offer-header h3 {
    font-size: clamp(0.9rem, 1.8vw, 1.3rem);
    margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem);
    color: var(--text-white);
}

.offer-subtitle {
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    color: rgba(255, 255, 255, 0.9);
}

.offer-content {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-sm);
}

.offer-details, .offer-benefits, .offer-formats {
    margin-bottom: clamp(0.4rem, 0.8vw, 0.6rem);
}

.offer-details h4, .offer-benefits h4, .offer-formats h4 {
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem);
    color: var(--primary-blue);
}

.offer-details ul, .offer-benefits ul {
    list-style: none;
    padding-left: clamp(0.4rem, 0.8vw, 0.6rem);
}

.offer-details li, .offer-benefits li {
    padding: clamp(0.1rem, 0.3vw, 0.15rem) 0;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    line-height: 1.3;
}

.offer-details li::before {
    content: "▸";
    color: var(--primary-blue);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.format-options {
    display: flex;
    flex-direction: column;
    gap: clamp(0.3rem, 0.6vw, 0.5rem);
}

.format-option {
    padding: clamp(0.4rem, 0.8vw, 0.6rem);
    background: var(--bg-light);
    border-radius: 8px;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    line-height: 1.3;
}

.offer-cta {
    margin-top: clamp(0.5rem, 1vw, 0.8rem);
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.2) 0%, transparent 100%);
    border-left: 3px solid var(--accent-gold);
    border-radius: 8px;
    text-align: center;
}

.offer-cta p {
    font-size: clamp(0.8rem, 1.4vw, 1.1rem);
    font-weight: 600;
    line-height: 1.3;
}

/* ============================================
   SERVICES GRID (Slide 90)
   ============================================ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: clamp(0.5rem, 1vw, 0.8rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.service-card {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--primary-blue);
    transition: all var(--transition-fast);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.service-card h3 {
    font-size: clamp(0.85rem, 1.7vw, 1.2rem);
    margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem);
    color: var(--primary-blue);
}

.service-desc {
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    color: var(--text-light);
    margin: clamp(0.2rem, 0.4vw, 0.3rem) 0;
}

.service-includes {
    list-style: none;
    padding-left: clamp(0.4rem, 0.8vw, 0.6rem);
    margin: clamp(0.3rem, 0.6vw, 0.5rem) 0;
}

.service-includes li {
    padding: clamp(0.1rem, 0.3vw, 0.15rem) 0;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    line-height: 1.3;
}

.service-includes li::before {
    content: "✓";
    color: var(--accent-emerald);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* ============================================
   RESOURCES PROVIDED (Slide 91)
   ============================================ */
.resources-provided {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: clamp(0.5rem, 1vw, 0.8rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.resource-item {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.resource-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--accent-gold);
}

.resource-item h3 {
    font-size: clamp(0.85rem, 1.7vw, 1.1rem);
    margin-bottom: clamp(0.2rem, 0.4vw, 0.3rem);
    color: var(--primary-dark);
}

.resource-item p {
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    color: var(--text-light);
    line-height: 1.3;
}

.resources-access {
    margin-top: clamp(0.5rem, 1vw, 0.8rem);
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, transparent 100%);
    border-left: 3px solid var(--accent-gold);
    border-radius: 8px;
    text-align: center;
    font-size: clamp(0.8rem, 1.4vw, 1.1rem);
    font-weight: 500;
}

/* ============================================
   GOVERNANCE STRUCTURE & OTHER MISSING CLASSES
   ============================================ */
.governance-structure {
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.bias-explanation {
    display: flex;
    flex-direction: column;
    gap: clamp(0.4rem, 0.8vw, 0.6rem);
    margin-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

.what-is-bias {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-light);
    border-radius: 12px;
}

.what-is-bias h3 {
    font-size: clamp(0.85rem, 1.7vw, 1.2rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
}

.bias-examples {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.bias-examples h3 {
    font-size: clamp(0.85rem, 1.7vw, 1.2rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
    color: var(--accent-ruby);
}

.bias-case {
    margin-bottom: clamp(0.4rem, 0.8vw, 0.6rem);
    padding: clamp(0.4rem, 0.8vw, 0.6rem);
    background: var(--bg-light);
    border-radius: 8px;
}

.bias-case strong {
    font-size: clamp(0.75rem, 1.3vw, 0.95rem);
}

.bias-case p {
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    margin: clamp(0.2rem, 0.4vw, 0.3rem) 0;
    line-height: 1.3;
}

.lesson {
    color: var(--primary-blue);
    font-weight: 500;
}

.how-to-avoid {
    padding: clamp(0.6rem, 1.2vw, 1rem);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.how-to-avoid h4 {
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    margin-bottom: clamp(0.3rem, 0.6vw, 0.5rem);
    color: var(--accent-emerald);
}

.how-to-avoid ul {
    list-style: none;
    padding-left: clamp(0.4rem, 0.8vw, 0.6rem);
}

.how-to-avoid li {
    padding: clamp(0.1rem, 0.3vw, 0.15rem) 0;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    line-height: 1.3;
}

.how-to-avoid li::before {
    content: "▸";
    color: var(--accent-emerald);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}