:root{--color-primary: #2563EB;--color-primary-light: #3B82F6;--color-primary-dark: #1D4ED8;--color-primary-50: #EFF6FF;--color-secondary: #10B981;--color-secondary-light: #34D399;--color-secondary-dark: #059669;--color-accent: #F59E0B;--color-accent-light: #FBBF24;--color-accent-dark: #D97706;--color-success: #10B981;--color-warning: #F59E0B;--color-error: #EF4444;--color-info: #3B82F6;--color-white: #FFFFFF;--color-gray-50: #F9FAFB;--color-gray-100: #F3F4F6;--color-gray-200: #E5E7EB;--color-gray-300: #D1D5DB;--color-gray-400: #9CA3AF;--color-gray-500: #6B7280;--color-gray-600: #4B5563;--color-gray-700: #374151;--color-gray-800: #1F2937;--color-gray-900: #111827;--color-black: #000000;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-serif: "Playfair Display", Georgia, serif;--font-mono: "Fira Code", "Consolas", monospace;--font-display: "Comic Neue", cursive;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--font-light: 300;--font-regular: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.75;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 24px;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .35s ease;--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-modal: 400;--z-tooltip: 500}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-gray-900);background-color:var(--color-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,svg{display:block;max-width:100%}button{cursor:pointer;font-family:inherit}a{color:inherit;text-decoration:none}ul,ol{list-style:none}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-6)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.section{padding:var(--space-24) 0}.section:nth-child(2n){background:var(--color-gray-50)}.section-header{text-align:center;max-width:700px;margin:0 auto var(--space-16)}.section-number{display:inline-block;font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-primary);background:var(--color-primary-50);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);margin-bottom:var(--space-4)}.section-title{font-size:var(--text-4xl);font-weight:var(--font-bold);color:var(--color-gray-900);margin-bottom:var(--space-4)}.section-intro{font-size:var(--text-lg);color:var(--color-gray-600);line-height:var(--leading-relaxed)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.section-header{animation:fadeIn .6s ease-out}:target{scroll-margin-top:80px}@media(max-width:640px){.section{padding:var(--space-16) 0}.section-title{font-size:var(--text-2xl)}.section-intro{font-size:var(--text-base)}}.main-nav{position:fixed;top:0;left:0;right:0;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-gray-200);z-index:var(--z-fixed)}.nav-container{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:var(--space-4) var(--space-6)}.logo{display:flex;align-items:center;gap:var(--space-2)}.logo-icon{font-size:var(--text-2xl)}.logo-text{font-weight:var(--font-bold);font-size:var(--text-lg);color:var(--color-gray-900)}.nav-links{display:flex;gap:var(--space-6);list-style:none;margin:0;padding:0}.nav-link{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-gray-600);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);transition:all var(--transition-fast);text-decoration:none}.nav-link:hover:not(.locked),.nav-link.active:not(.locked){color:var(--color-primary);background:var(--color-primary-50)}.nav-link.locked{color:var(--color-gray-400);cursor:not-allowed;opacity:.6}.nav-link.locked:hover{background:transparent;color:var(--color-gray-400)}.lock-icon{font-size:var(--text-xs);margin-right:var(--space-1)}.mobile-menu-btn{display:none;flex-direction:column;gap:4px;background:none;border:none;padding:var(--space-2);cursor:pointer}.mobile-menu-btn span{display:block;width:24px;height:2px;background:var(--color-gray-700);border-radius:var(--radius-full);transition:var(--transition-fast)}@media(max-width:768px){.nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;padding:var(--space-4);box-shadow:var(--shadow-lg);gap:var(--space-2)}.nav-links.mobile-open,.mobile-menu-btn{display:flex}}.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary-50) 0%,var(--color-white) 50%,#FEF3C7 100%);padding:var(--space-20) var(--space-6);position:relative;overflow:hidden}.hero-content{text-align:center;max-width:800px;z-index:2}.hero-title{font-size:clamp(2.5rem,5vw,4rem);font-weight:var(--font-bold);color:var(--color-gray-900);line-height:var(--leading-tight);margin-bottom:var(--space-6)}.hero-subtitle{font-size:var(--text-xl);color:var(--color-gray-600);margin-bottom:var(--space-8)}.cta-button{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-8);background:var(--color-primary);color:var(--color-white);font-weight:var(--font-semibold);font-size:var(--text-lg);border-radius:var(--radius-lg);border:none;transition:all var(--transition-base);box-shadow:var(--shadow-md);text-decoration:none;cursor:pointer}.cta-button:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.hero-visual{position:absolute;inset:0;pointer-events:none}.floating-shapes{position:relative;width:100%;height:100%}.shape{position:absolute;border-radius:var(--radius-full);opacity:.6;animation:float 6s ease-in-out infinite}.shape-1{width:300px;height:300px;background:linear-gradient(135deg,var(--color-primary-light),var(--color-secondary));top:10%;right:10%;animation-delay:0s}.shape-2{width:200px;height:200px;background:linear-gradient(135deg,var(--color-accent),#FCD34D);bottom:20%;left:10%;animation-delay:2s}.shape-3{width:150px;height:150px;background:linear-gradient(135deg,#EC4899,var(--color-primary));top:50%;left:50%;animation-delay:4s}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(5deg)}}@media(max-width:640px){.hero-title{font-size:var(--text-3xl)}.hero-subtitle{font-size:var(--text-base)}}.quiz-container{margin-top:var(--space-8);padding:var(--space-6);background:linear-gradient(135deg,#f8fafc,#e2e8f0);border-radius:var(--radius-xl);border:2px solid var(--color-primary-100)}.quiz-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}.quiz-badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#fff;font-size:var(--text-sm);font-weight:var(--font-bold);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:1px}.quiz-progress{font-size:var(--text-sm);color:var(--color-gray-600);font-weight:var(--font-medium)}.quiz-question h3{font-size:var(--text-xl);color:var(--color-gray-900);margin-bottom:var(--space-6);line-height:1.4}.quiz-options{display:flex;flex-direction:column;gap:var(--space-3)}.quiz-option{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:#fff;border:2px solid var(--color-gray-200);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);text-align:left;width:100%}.quiz-option:hover:not(:disabled){border-color:var(--color-primary);background:var(--color-primary-50);transform:translate(4px)}.quiz-option.selected{border-color:var(--color-primary);background:var(--color-primary-50)}.quiz-option.correct{border-color:var(--color-success);background:#ecfdf5}.quiz-option.incorrect{border-color:var(--color-error);background:#fef2f2}.option-letter{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--color-gray-100);border-radius:var(--radius-md);font-weight:var(--font-bold);font-size:var(--text-sm);color:var(--color-gray-600);flex-shrink:0}.quiz-option.correct .option-letter{background:var(--color-success);color:#fff}.quiz-option.incorrect .option-letter{background:var(--color-error);color:#fff}.option-text{flex:1;font-size:var(--text-base);color:var(--color-gray-700)}.option-check{font-size:var(--text-lg);color:var(--color-success)}.quiz-feedback{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--color-gray-200)}.feedback-correct{font-size:var(--text-lg);color:var(--color-success);font-weight:var(--font-semibold);margin-bottom:var(--space-4)}.feedback-incorrect{font-size:var(--text-base);color:var(--color-gray-600);margin-bottom:var(--space-4);line-height:1.5}.quiz-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border:none;border-radius:var(--radius-lg);font-size:var(--text-base);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--transition-fast)}.quiz-btn.next{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#fff}.quiz-btn.next:hover{transform:translateY(-2px);box-shadow:0 4px 12px #6366f166}.quiz-btn.retry{background:var(--color-gray-100);color:var(--color-gray-700)}.quiz-btn.retry:hover{background:var(--color-gray-200)}.quiz-result{text-align:center;padding:var(--space-8)}.result-icon{font-size:4rem;margin-bottom:var(--space-4);animation:bounce .5s ease-out}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.quiz-result h3{font-size:var(--text-2xl);margin-bottom:var(--space-2)}.quiz-result.passed h3{color:var(--color-success)}.quiz-result.failed h3{color:var(--color-gray-700)}.result-score{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-gray-900);margin-bottom:var(--space-4)}.result-message{font-size:var(--text-base);color:var(--color-gray-600);margin-bottom:var(--space-6)}.quiz-completed{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8);background:linear-gradient(135deg,#ecfdf5,#d1fae5);border-radius:var(--radius-xl);border:2px solid var(--color-success);text-align:center;margin-top:var(--space-8)}.quiz-completed-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--color-success);color:#fff;font-size:var(--text-2xl);font-weight:var(--font-bold);border-radius:50%;margin-bottom:var(--space-4)}.quiz-completed p{font-size:var(--text-lg);color:var(--color-success);font-weight:var(--font-medium);margin:0}.section-locked{position:relative;min-height:400px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);overflow:hidden}.section-locked:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(0,0,0,.03) 10px,rgba(0,0,0,.03) 20px)}.locked-content{position:relative;z-index:10;text-align:center;padding:var(--space-8);max-width:400px}.locked-icon{font-size:4rem;margin-bottom:var(--space-4);opacity:.8}.locked-content h3{font-size:var(--text-2xl);color:var(--color-gray-700);margin-bottom:var(--space-3)}.locked-content p{font-size:var(--text-base);color:var(--color-gray-500);margin:0;line-height:1.6}@media(max-width:640px){.quiz-container{padding:var(--space-4)}.quiz-header{flex-direction:column;gap:var(--space-2);align-items:flex-start}.quiz-option{padding:var(--space-3) var(--space-4)}.option-letter{width:28px;height:28px;font-size:var(--text-xs)}.quiz-result{padding:var(--space-6)}.result-icon{font-size:3rem}}.section-colors{padding:var(--space-24) 0}.color-explorer{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);margin-bottom:var(--space-16)}@media(max-width:900px){.color-explorer{grid-template-columns:1fr}}.color-wheel-container{background:var(--color-white);padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}.color-wheel-container h3{font-size:var(--text-xl);margin-bottom:var(--space-2)}.color-wheel-container>p{color:var(--color-gray-500);margin-bottom:var(--space-6)}.color-wheel{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}.color-btn{width:60px;height:60px;border-radius:var(--radius-lg);border:3px solid transparent;background:none;padding:var(--space-1);transition:all var(--transition-base);cursor:pointer}.color-btn:hover,.color-btn.active{transform:scale(1.1);border-color:var(--color-gray-900)}.color-swatch{display:block;width:100%;height:100%;background:var(--color);border-radius:var(--radius-md)}.color-info-panel{background:var(--color-white);padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}.color-preview{width:100%;height:120px;border-radius:var(--radius-lg);background:var(--color-gray-200);margin-bottom:var(--space-6);transition:background var(--transition-base)}.color-info-panel h3{font-size:var(--text-2xl);margin-bottom:var(--space-6)}.color-details{display:flex;flex-direction:column;gap:var(--space-6)}.detail-item h4{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-primary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-2)}.detail-item p{color:var(--color-gray-600);line-height:var(--leading-relaxed)}.color-harmonies{margin-bottom:var(--space-16)}.color-harmonies h3{font-size:var(--text-2xl);text-align:center;margin-bottom:var(--space-8)}.harmonies-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-6)}.harmony-card{background:var(--color-white);padding:var(--space-6);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);text-align:center;transition:transform var(--transition-base)}.harmony-card:hover{transform:translateY(-4px)}.harmony-visual{display:flex;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-4)}.harmony-color{width:50px;height:50px;border-radius:var(--radius-md)}.harmony-card h4{font-size:var(--text-lg);margin-bottom:var(--space-2)}.harmony-card p{font-size:var(--text-sm);color:var(--color-gray-500)}.interactive-exercise{background:var(--color-white);padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}.interactive-exercise h3{font-size:var(--text-xl);margin-bottom:var(--space-2)}.interactive-exercise>p{color:var(--color-gray-500);margin-bottom:var(--space-6)}.palette-builder{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}@media(max-width:768px){.palette-builder{grid-template-columns:1fr}}.palette-slots{display:flex;flex-wrap:wrap;gap:var(--space-4)}.palette-slot{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.palette-slot input[type=color]{width:80px;height:80px;border:none;border-radius:var(--radius-lg);cursor:pointer;padding:0;overflow:hidden}.palette-slot input[type=color]::-webkit-color-swatch-wrapper{padding:0}.palette-slot input[type=color]::-webkit-color-swatch{border:2px solid var(--color-gray-200);border-radius:var(--radius-lg)}.slot-label{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-gray-600)}.palette-preview{background:var(--color-gray-100);padding:var(--space-6);border-radius:var(--radius-lg)}.preview-card{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}.preview-header{padding:var(--space-4);font-weight:var(--font-semibold)}.preview-body{padding:var(--space-6)}.preview-body h4{margin-bottom:var(--space-2)}.preview-body p{font-size:var(--text-sm);margin-bottom:var(--space-4);opacity:.8}.preview-btn{padding:var(--space-2) var(--space-4);color:#fff;border:none;border-radius:var(--radius-md);font-weight:var(--font-medium);cursor:pointer}.section-typography{padding:var(--space-24) 0;background:var(--color-gray-50)}.font-categories{margin-bottom:var(--space-16)}.font-categories h3{font-size:var(--text-2xl);text-align:center;margin-bottom:var(--space-8)}.category-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}.tab-btn{padding:var(--space-3) var(--space-6);background:var(--color-gray-100);border:2px solid transparent;border-radius:var(--radius-full);font-weight:var(--font-medium);color:var(--color-gray-600);transition:all var(--transition-fast);cursor:pointer}.tab-btn:hover{background:var(--color-gray-200)}.tab-btn.active{background:var(--color-primary);color:var(--color-white)}.category-content{background:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden}.category-panel{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);padding:var(--space-8)}@media(max-width:768px){.category-panel{grid-template-columns:1fr}}.font-showcase{display:flex;align-items:center;justify-content:center;background:var(--color-gray-50);border-radius:var(--radius-lg);padding:var(--space-12)}.showcase-text{font-size:var(--text-4xl);color:var(--color-gray-800)}.category-info h4{font-size:var(--text-xl);margin-bottom:var(--space-4)}.font-traits{list-style:none;margin-bottom:var(--space-6)}.font-traits li{padding:var(--space-2) 0;border-bottom:1px solid var(--color-gray-100);font-size:var(--text-sm);color:var(--color-gray-600)}.font-traits li:last-child{border-bottom:none}.font-traits strong{color:var(--color-gray-900)}.usage-examples{display:flex;flex-wrap:wrap;gap:var(--space-2)}.usage-tag{font-size:var(--text-xs);padding:var(--space-1) var(--space-3);background:var(--color-primary-50);color:var(--color-primary);border-radius:var(--radius-full);font-weight:var(--font-medium)}.type-hierarchy{margin-bottom:var(--space-16)}.type-hierarchy h3{font-size:var(--text-2xl);text-align:center;margin-bottom:var(--space-2)}.type-hierarchy>p{text-align:center;color:var(--color-gray-500);margin-bottom:var(--space-8)}.hierarchy-demo{background:var(--color-white);padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}.hierarchy-scale{display:flex;flex-direction:column;gap:var(--space-6)}.scale-item{display:flex;align-items:baseline;gap:var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-gray-100)}.scale-label{font-size:var(--text-sm);font-family:var(--font-mono);color:var(--color-gray-500);min-width:120px}.demo-h1{font-size:48px;font-weight:var(--font-bold);margin:0}.demo-h2{font-size:36px;font-weight:var(--font-semibold);margin:0}.demo-h3{font-size:24px;font-weight:var(--font-semibold);margin:0}.demo-body{font-size:16px;margin:0}.demo-small{font-size:14px;color:var(--color-gray-500)}.font-pairings{margin-bottom:var(--space-16)}.font-pairings h3{font-size:var(--text-2xl);text-align:center;margin-bottom:var(--space-2)}.font-pairings>p{text-align:center;color:var(--color-gray-500);margin-bottom:var(--space-8)}.pairings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-6)}.pairing-card{background:var(--color-white);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);transition:transform var(--transition-base)}.pairing-card:hover{transform:translateY(-4px)}.pairing-preview{padding:var(--space-8);background:var(--color-gray-50);display:flex;flex-direction:column;gap:var(--space-2)}.pairing-title{font-size:var(--text-2xl);color:var(--color-gray-900)}.pairing-body{font-size:var(--text-base);color:var(--color-gray-600)}.pairing-info{padding:var(--space-6)}.pairing-info strong{display:block;margin-bottom:var(--space-2)}.pairing-info p{font-size:var(--text-sm);color:var(--color-gray-500)}.font-tester{background:var(--color-white);padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}.font-tester h3{font-size:var(--text-xl);margin-bottom:var(--space-6)}.tester-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-6);margin-bottom:var(--space-6)}.control-group{display:flex;flex-direction:column;gap:var(--space-2)}.control-group label{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-gray-700)}.control-group select,.control-group input[type=range]{width:100%}.control-group select{padding:var(--space-3);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--text-base)}.control-group input[type=range]{height:8px;border-radius:var(--radius-full);background:var(--color-gray-200);appearance:none}.control-group input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:var(--radius-full);background:var(--color-primary);cursor:pointer}.tester-preview{padding:var(--space-8);background:var(--color-gray-50);border-radius:var(--radius-lg);border:1px solid var(--color-gray-200)}.tester-preview p{transition:all var(--transition-base);margin:0}.section-consistency{padding:var(--space-24) 0}.consistency-comparison{margin-bottom:var(--space-16)}.consistency-comparison h3{font-size:var(--text-2xl);text-align:center;margin-bottom:var(--space-6)}.comparison-toggle{display:flex;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-6)}.toggle-btn{padding:var(--space-3) var(--space-6);background:var(--color-gray-100);border:2px solid transparent;border-radius:var(--radius-full);font-weight:var(--font-medium);color:var(--color-gray-600);transition:all var(--transition-fast);cursor:pointer}.toggle-btn.active[data-view=inconsistent]{background:var(--color-error);color:var(--color-white)}.toggle-btn.active[data-view=consistent]{background:var(--color-success);color:var(--color-white)}.comparison-panel{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);background:var(--color-white);padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}@media(max-width:900px){.comparison-panel{grid-template-columns:1fr}}.bad-design-example,.good-design-example{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-gray-200)}.good-design-example{font-family:var(--font-sans)}.good-header{background:var(--color-primary);padding:var(--space-4) var(--space-6)}.good-header h3{color:var(--color-white);font-size:var(--text-lg);font-weight:var(--font-semibold);margin:0}.good-content{padding:var(--space-6);background:var(--color-gray-50);display:flex;flex-direction:column;gap:var(--space-4)}.good-card{background:var(--color-white);padding:var(--space-5);border-radius:var(--radius-lg);border:1px solid var(--color-gray-200)}.good-card h4{font-size:var(--text-base);font-weight:var(--font-semibold);margin-bottom:var(--space-2);color:var(--color-gray-900)}.good-card p{font-size:var(--text-sm);color:var(--color-gray-600);margin-bottom:var(--space-4)}.good-btn{padding:var(--space-2) var(--space-4);border:none;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-fast)}.good-btn.primary{background:var(--color-primary);color:var(--color-white)}.good-btn.secondary{background:transparent;color:var(--color-primary);border:1px solid var(--color-primary)}.issues-list,.benefits-list{padding:var(--space-6);border-radius:var(--radius-lg)}.issues-list{background:#fef2f2}.benefits-list{background:#ecfdf5}.issues-list h4,.benefits-list h4{font-size:var(--text-base);margin-bottom:var(--space-4)}.issues-list ul,.benefits-list ul{display:flex;flex-direction:column;gap:var(--space-3);list-style:none;padding:0;margin:0}.issues-list li,.benefits-list li{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}.issue-icon{color:var(--color-error)}.benefit-icon{color:var(--color-success);font-weight:var(--font-bold)}.consistency-rules{margin-bottom:var(--space-16)}.consistency-rules h3{font-size:var(--text-2xl);text-align:center;margin-bottom:var(--space-8)}.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-6)}.rule-card{background:var(--color-white);padding:var(--space-6);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);text-align:center}.rule-icon{font-size:var(--text-3xl);margin-bottom:var(--space-4)}.rule-card h4{font-size:var(--text-lg);margin-bottom:var(--space-2)}.rule-card p{font-size:var(--text-sm);color:var(--color-gray-600);margin-bottom:var(--space-4)}.rule-example{display:flex;justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-4);background:var(--color-gray-50);border-radius:var(--radius-md)}.color-dot{width:24px;height:24px;border-radius:var(--radius-full)}.type-scale{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1)}.spacing-box{width:32px;height:32px;background:var(--color-primary);color:var(--color-white);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:var(--font-medium)}.component-demo{display:flex;gap:var(--space-3)}.demo-btn{padding:var(--space-2) var(--space-4);border:none;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium);background:var(--color-primary);color:var(--color-white);cursor:pointer}.demo-btn.outline{background:transparent;border:1px solid var(--color-primary);color:var(--color-primary)}.icons-demo{font-size:var(--text-xl);display:flex;gap:var(--space-2)}.consistency-quiz{background:var(--color-white);padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}.consistency-quiz h3{font-size:var(--text-xl);margin-bottom:var(--space-6);text-align:center}.quiz-prompt{font-size:var(--text-lg);font-weight:var(--font-medium);margin-bottom:var(--space-6);text-align:center}.quiz-visual{display:flex;justify-content:center;gap:var(--space-4);margin-bottom:var(--space-6);padding:var(--space-6);background:var(--color-gray-50);border-radius:var(--radius-lg)}.quiz-options{display:flex;flex-direction:column;gap:var(--space-3);max-width:400px;margin:0 auto}.quiz-option{padding:var(--space-4);background:var(--color-gray-100);border:2px solid transparent;border-radius:var(--radius-lg);font-weight:var(--font-medium);text-align:left;transition:all var(--transition-fast);cursor:pointer}.quiz-option:hover:not(:disabled){background:var(--color-gray-200)}.quiz-option:disabled{cursor:default}.quiz-option.correct{background:#ecfdf5;border-color:var(--color-success);color:var(--color-success)}.quiz-option.incorrect{background:#fef2f2;border-color:var(--color-error);color:var(--color-error)}.quiz-feedback{margin-top:var(--space-4);padding:var(--space-4);border-radius:var(--radius-lg);text-align:center}.quiz-feedback.correct{background:#ecfdf5;color:var(--color-success)}.quiz-feedback.incorrect{background:#fef2f2;color:var(--color-error)}.quiz-result{text-align:center}.quiz-result h4{font-size:var(--text-2xl);margin-bottom:var(--space-4)}.result-score{font-size:var(--text-xl);margin-bottom:var(--space-6)}.restart-quiz{padding:var(--space-3) var(--space-6);background:var(--color-primary);color:var(--color-white);border:none;border-radius:var(--radius-lg);font-weight:var(--font-medium);cursor:pointer}.section-accessibility{padding:var(--space-24) 0;background:var(--color-gray-50)}.accessibility-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-6);margin-bottom:var(--space-16)}.stat-card{background:var(--color-white);padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);text-align:center}.stat-number{display:block;font-size:var(--text-4xl);font-weight:var(--font-bold);color:var(--color-primary);margin-bottom:var(--space-2)}.stat-label{font-size:var(--text-sm);color:var(--color-gray-600)}.contrast-checker{margin-bottom:var(--space-16)}.contrast-checker h3{font-size:var(--text-2xl);text-align:center;margin-bottom:var(--space-2)}.contrast-checker>p{text-align:center;color:var(--color-gray-500);margin-bottom:var(--space-8)}.contrast-tool{background:var(--color-white);padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);margin-bottom:var(--space-8)}.contrast-inputs{display:flex;justify-content:center;align-items:center;gap:var(--space-6);flex-wrap:wrap;margin-bottom:var(--space-8)}.color-input-group{display:flex;flex-direction:column;gap:var(--space-2)}.color-input-group label{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-gray-700)}.color-input-wrapper{display:flex;gap:var(--space-2)}.color-input-wrapper input[type=color]{width:60px;height:40px;border:none;border-radius:var(--radius-md);cursor:pointer;padding:0}.hex-input{width:100px;padding:var(--space-2) var(--space-3);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--text-sm)}.swap-colors button{padding:var(--space-3);background:var(--color-gray-100);border:none;border-radius:var(--radius-full);font-size:var(--text-xl);cursor:pointer;transition:all var(--transition-fast)}.swap-colors button:hover{background:var(--color-gray-200)}.contrast-preview{padding:var(--space-6);border-radius:var(--radius-lg);margin-bottom:var(--space-6);text-align:center;transition:all var(--transition-base)}.preview-text{margin:var(--space-2) 0}.preview-text.large{font-size:var(--text-xl);font-weight:var(--font-semibold)}.preview-text.normal{font-size:var(--text-base)}.preview-text.small{font-size:var(--text-sm)}.contrast-results{display:grid;grid-template-columns:auto 1fr;gap:var(--space-6);align-items:center}@media(max-width:600px){.contrast-results{grid-template-columns:1fr}}.result-ratio{text-align:center;padding:var(--space-6);background:var(--color-gray-50);border-radius:var(--radius-lg)}.ratio-label{display:block;font-size:var(--text-sm);color:var(--color-gray-500);margin-bottom:var(--space-2)}.ratio-value{font-size:var(--text-3xl);font-weight:var(--font-bold)}.wcag-levels{display:flex;flex-direction:column;gap:var(--space-4)}.wcag-level{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);background:var(--color-gray-50);border-radius:var(--radius-lg);flex-wrap:wrap}.level-name{font-weight:var(--font-semibold);min-width:100px}.level-results{display:flex;gap:var(--space-4);flex-wrap:wrap}.result-item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}.result-item .check{width:20px;height:20px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs)}.result-item.pass .check{background:var(--color-success);color:var(--color-white)}.result-item.fail .check{background:var(--color-error);color:var(--color-white)}.wcag-explanation{margin-top:var(--space-8)}.wcag-explanation h4{font-size:var(--text-lg);margin-bottom:var(--space-4);text-align:center}.wcag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6)}.wcag-card{background:var(--color-white);padding:var(--space-6);border-radius:var(--radius-lg);border:1px solid var(--color-gray-200)}.wcag-card h5{font-size:var(--text-base);margin-bottom:var(--space-3);color:var(--color-primary)}.wcag-card ul{list-style:disc;padding-left:var(--space-5);margin:0}.wcag-card li{font-size:var(--text-sm);color:var(--color-gray-600);margin-bottom:var(--space-2)}.color-blindness-sim{margin-bottom:var(--space-16)}.color-blindness-sim h3{font-size:var(--text-2xl);text-align:center;margin-bottom:var(--space-2)}.color-blindness-sim>p{text-align:center;color:var(--color-gray-500);margin-bottom:var(--space-8)}.simulation-demo{background:var(--color-white);padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}.sim-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}.sim-btn{padding:var(--space-2) var(--space-4);background:var(--color-gray-100);border:2px solid transparent;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-gray-600);transition:all var(--transition-fast);cursor:pointer}.sim-btn:hover{background:var(--color-gray-200)}.sim-btn.active{background:var(--color-primary);color:var(--color-white)}.sim-preview{padding:var(--space-6);background:var(--color-gray-50);border-radius:var(--radius-lg);transition:filter var(--transition-base)}.sim-card{background:var(--color-white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);max-width:500px;margin:0 auto}.sim-header{background:var(--color-gray-800);color:var(--color-white);padding:var(--space-4);font-weight:var(--font-semibold)}.sim-chart{display:flex;align-items:flex-end;gap:var(--space-4);height:200px;padding:var(--space-6);background:var(--color-gray-50)}.chart-bar{flex:1;border-radius:var(--radius-md) var(--radius-md) 0 0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--space-2);transition:all var(--transition-base)}.chart-bar span{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-white);writing-mode:vertical-rl;text-orientation:mixed}.chart-bar.success{background:#10b981}.chart-bar.warning{background:#f59e0b}.chart-bar.error{background:#ef4444}.chart-bar.info{background:#3b82f6}.sim-legend{display:flex;justify-content:center;gap:var(--space-4);padding:var(--space-4);border-top:1px solid var(--color-gray-200);flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}.legend-item:before{content:"";width:12px;height:12px;border-radius:var(--radius-sm)}.legend-item.success:before{background:#10b981}.legend-item.warning:before{background:#f59e0b}.legend-item.error:before{background:#ef4444}.legend-item.info:before{background:#3b82f6}.a11y-best-practices h3{font-size:var(--text-2xl);text-align:center;margin-bottom:var(--space-8)}.practices-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-6)}.practice-card{background:var(--color-white);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md)}.practice-do,.practice-dont{padding:var(--space-6)}.practice-do{border-left:4px solid var(--color-success)}.practice-dont{border-left:4px solid var(--color-error)}.practice-do h4,.practice-dont h4{font-size:var(--text-lg);margin-bottom:var(--space-4)}.practice-do h4{color:var(--color-success)}.practice-dont h4{color:var(--color-error)}.practice-do ul,.practice-dont ul{list-style:disc;padding-left:var(--space-5);margin:0}.practice-do li,.practice-dont li{font-size:var(--text-sm);color:var(--color-gray-600);margin-bottom:var(--space-2)}.color-blind-filters{position:absolute;width:0;height:0;overflow:hidden}.section-design-system{padding:var(--space-24) 0}.ds-benefits{margin-bottom:var(--space-16)}.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-6)}.benefit-card{background:var(--color-white);padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);text-align:center;transition:all var(--transition-base)}.benefit-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}.benefit-icon{font-size:3rem;display:block;margin-bottom:var(--space-4)}.benefit-card h4{font-size:var(--text-xl);margin-bottom:var(--space-2);color:var(--color-gray-900)}.benefit-card p{font-size:var(--text-sm);color:var(--color-gray-500);margin:0}.ds-structure{margin-bottom:var(--space-16)}.ds-structure h3{font-size:var(--text-2xl);text-align:center;margin-bottom:var(--space-8)}.ds-layers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-6)}.ds-layer{background:var(--color-white);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);transition:all var(--transition-base)}.ds-layer:hover{transform:scale(1.02);box-shadow:var(--shadow-lg)}.layer-header{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-6);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#fff}.layer-icon{font-size:2rem}.layer-title{display:flex;flex-direction:column}.layer-number{font-size:var(--text-xs);opacity:.8;text-transform:uppercase;letter-spacing:1px}.layer-header h4{font-size:var(--text-lg);margin:0}.layer-content{padding:var(--space-6)}.layer-items{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}.layer-item{padding:var(--space-1) var(--space-3);background:var(--color-primary-50);color:var(--color-primary);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-medium)}.layer-desc{font-size:var(--text-sm);color:var(--color-gray-500);margin:0}.ds-preview{background:var(--color-white);padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);margin-bottom:var(--space-16)}.ds-preview h3{font-size:var(--text-xl);margin-bottom:var(--space-6);text-align:center}.preview-showcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-8)}.preview-group h4{font-size:var(--text-sm);color:var(--color-gray-500);margin-bottom:var(--space-4);text-transform:uppercase;letter-spacing:1px}.preview-buttons{display:flex;flex-wrap:wrap;gap:var(--space-3)}.preview-badges{display:flex;flex-wrap:wrap;gap:var(--space-2)}.ds-btn{padding:var(--space-3) var(--space-5);border:none;border-radius:var(--radius-md);font-weight:var(--font-medium);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast)}.ds-btn-primary{background:var(--color-primary);color:var(--color-white)}.ds-btn-primary:hover{background:var(--color-primary-dark)}.ds-btn-secondary{background:var(--color-secondary);color:var(--color-white)}.ds-btn-outline{background:transparent;border:2px solid var(--color-primary);color:var(--color-primary)}.ds-badge{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-medium)}.ds-badge-success{background:#ecfdf5;color:var(--color-success)}.ds-badge-warning{background:#fffbeb;color:var(--color-warning)}.ds-badge-error{background:#fef2f2;color:var(--color-error)}.ds-badge-info{background:var(--color-primary-50);color:var(--color-primary)}.ds-input{width:100%;padding:var(--space-3) var(--space-4);border:2px solid var(--color-gray-200);border-radius:var(--radius-md);font-size:var(--text-base);transition:all var(--transition-fast)}.ds-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-50)}.ds-tools h3{font-size:var(--text-2xl);text-align:center;margin-bottom:var(--space-8)}.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4)}.tool-card{background:var(--color-white);padding:var(--space-6);border-radius:var(--radius-xl);border:2px solid var(--color-gray-100);text-align:center;transition:all var(--transition-base)}.tool-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-4px)}.tool-icon{font-size:2.5rem;display:block;margin-bottom:var(--space-3)}.tool-card h5{font-size:var(--text-lg);margin-bottom:var(--space-2);color:var(--color-gray-900)}.tool-card p{font-size:var(--text-sm);color:var(--color-gray-500);margin:0}.section-conclusion{position:relative;min-height:100vh;display:flex;align-items:center;background:linear-gradient(135deg,#0f0f23,#1a1a3e,#0d1b2a);padding:var(--space-24) 0;overflow:hidden}.conclusion-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}.gradient-orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.3;animation:float-orb 8s ease-in-out infinite}.orb-1{width:500px;height:500px;background:linear-gradient(135deg,#667eea,#764ba2);top:-10%;right:-10%;animation-delay:0s}.orb-2{width:400px;height:400px;background:linear-gradient(135deg,#f093fb,#f5576c);bottom:-15%;left:-10%;animation-delay:2s}.orb-3{width:300px;height:300px;background:linear-gradient(135deg,#4facfe,#00f2fe);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:4s}@keyframes float-orb{0%,to{transform:translate(0) scale(1)}25%{transform:translate(30px,-30px) scale(1.05)}50%{transform:translate(-20px,20px) scale(.95)}75%{transform:translate(20px,10px) scale(1.02)}}.particles{position:absolute;inset:0}.particle{position:absolute;width:4px;height:4px;background:#fff;border-radius:50%;left:var(--x);bottom:-10px;opacity:0;animation:rise var(--duration) ease-in-out infinite;animation-delay:var(--delay)}@keyframes rise{0%{opacity:0;transform:translateY(0) scale(0)}10%{opacity:.8;transform:scale(1)}90%{opacity:.3}to{opacity:0;transform:translateY(-100vh) scale(.5)}}.conclusion-content{position:relative;z-index:10;width:100%;background:#0f0f23b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:var(--space-12);border-radius:var(--radius-2xl);border:1px solid rgba(255,255,255,.1)}.conclusion-header{text-align:center;margin-bottom:var(--space-16);opacity:0;transform:translateY(30px);transition:all .8s ease-out}.section-conclusion.visible .conclusion-header{opacity:1;transform:translateY(0)}.conclusion-badge{display:inline-block;padding:var(--space-2) var(--space-5);background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-medium);color:#a78bfa;text-transform:uppercase;letter-spacing:2px;margin-bottom:var(--space-6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.conclusion-header h2{font-size:clamp(2rem,5vw,3.5rem);font-weight:var(--font-bold);color:#fff;margin-bottom:var(--space-4);background:linear-gradient(135deg,#fff,#c4b5fd,#f9a8d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 20px rgba(167,139,250,.3)}.conclusion-header p{font-size:var(--text-xl);color:#ffffffe6;max-width:500px;margin:0 auto;text-shadow:0 1px 3px rgba(0,0,0,.5)}.recap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-5);margin-bottom:var(--space-16)}.recap-item{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-6);background:#1e1e3ccc;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;transform:translateY(20px);transition:all .6s ease-out;transition-delay:var(--delay)}.section-conclusion.visible .recap-item{opacity:1;transform:translateY(0)}.recap-item:hover{background:#ffffff1a;border-color:#a78bfa80;transform:translateY(-4px) scale(1.02);box-shadow:0 20px 40px #0000004d}.recap-icon{font-size:2.5rem;flex-shrink:0;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.recap-content{flex:1}.recap-number{display:inline-block;font-size:var(--text-xs);font-weight:var(--font-bold);color:#a78bfa;background:#a78bfa33;padding:2px 8px;border-radius:var(--radius-full);margin-bottom:var(--space-2)}.recap-item h4{font-size:var(--text-lg);font-weight:var(--font-semibold);color:#fff;margin-bottom:var(--space-1)}.recap-item p{font-size:var(--text-sm);color:#ffffffd9;margin:0;line-height:1.5}.cta-final{position:relative;text-align:center;opacity:0;transform:translateY(20px);transition:all .8s ease-out .5s}.section-conclusion.visible .cta-final{opacity:1;transform:translateY(0)}.cta-glow{position:absolute;top:50%;left:50%;width:300px;height:150px;background:radial-gradient(ellipse,rgba(167,139,250,.3) 0%,transparent 70%);transform:translate(-50%,-50%);pointer-events:none}.cta-final p{font-size:var(--text-2xl);color:#fff;margin-bottom:var(--space-8);text-shadow:0 1px 3px rgba(0,0,0,.5)}.cta-final .cta-button{position:relative;display:inline-flex;align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-10);background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:var(--font-semibold);font-size:var(--text-lg);border-radius:var(--radius-full);border:none;text-decoration:none;cursor:pointer;overflow:hidden;transition:all var(--transition-base);box-shadow:0 10px 40px #667eea66}.cta-final .cta-button:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#764ba2,#f093fb);opacity:0;transition:opacity var(--transition-base)}.cta-final .cta-button:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 20px 60px #667eea80}.cta-final .cta-button:hover:before{opacity:1}.cta-final .cta-button span,.cta-final .cta-button svg{position:relative;z-index:1}.cta-final .cta-button svg{transition:transform var(--transition-fast)}.cta-final .cta-button:hover svg{transform:translate(4px)}@media(max-width:768px){.recap-grid{grid-template-columns:1fr}.conclusion-header h2{font-size:2rem}.gradient-orb{filter:blur(60px)}.orb-1{width:300px;height:300px}.orb-2{width:250px;height:250px}.orb-3{width:200px;height:200px}}.main-footer{background:var(--color-gray-900);color:var(--color-gray-400);padding:var(--space-12) 0;text-align:center}.main-footer p{margin-bottom:var(--space-2)}.footer-credits{font-size:var(--text-sm);opacity:.7}