/* ==================== LAÏC EDUCATION - 5 THÈMES SPECTACULAIRES ==================== */
/* Des animations jamais vues dans le monde ! */

/* ==================== THÈME 1: COSMIC GALAXY ==================== */
/* Univers infini avec étoiles filantes, nébuleuses et trous noirs */

[data-theme="cosmic"] {
    --theme-bg: linear-gradient(135deg, #03082e 0%, #071B9F 50%, #050f5a 100%);
    --theme-accent-glow: rgba(252, 169, 9, 0.6);
}

[data-theme="cosmic"] body {
    background: #03082e;
}

[data-theme="cosmic"]::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: 
        radial-gradient(ellipse at 20% 80%, rgba(7, 27, 159, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(252, 169, 9, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 40% 40%, rgba(7, 27, 159, 0.15) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
    animation: cosmicPulse 15s ease-in-out infinite;
}

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

/* Étoiles scintillantes */
[data-theme="cosmic"] .cosmic-stars {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

[data-theme="cosmic"] .cosmic-star {
    position: absolute;
    width: 3px; height: 3px;
    background: white;
    border-radius: 50%;
    animation: starTwinkle 3s ease-in-out infinite;
    box-shadow: 0 0 10px white, 0 0 20px white;
}

@keyframes starTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.5); }
}

/* Étoile filante */
[data-theme="cosmic"] .shooting-star {
    position: fixed;
    width: 150px; height: 2px;
    background: linear-gradient(90deg, white, transparent);
    border-radius: 100%;
    animation: shootingStar 4s ease-in-out infinite;
    opacity: 0;
    z-index: 1;
}

@keyframes shootingStar {
    0% { opacity: 0; transform: translate(0, 0) rotate(-45deg); }
    5% { opacity: 1; }
    15% { opacity: 0; transform: translate(500px, 500px) rotate(-45deg); }
    100% { opacity: 0; }
}

/* Trou noir effet */
[data-theme="cosmic"] .black-hole {
    position: fixed;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, #000 0%, transparent 40%);
    box-shadow: 
        0 0 60px 30px rgba(7, 27, 159, 0.4),
        0 0 100px 60px rgba(252, 169, 9, 0.2),
        0 0 140px 90px rgba(7, 27, 159, 0.1);
    animation: blackHoleRotate 20s linear infinite, blackHolePulse 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes blackHoleRotate {
    to { transform: rotate(360deg); }
}

@keyframes blackHolePulse {
    0%, 100% { box-shadow: 0 0 60px 30px rgba(7, 27, 159, 0.4), 0 0 100px 60px rgba(252, 169, 9, 0.2); }
    50% { box-shadow: 0 0 80px 40px rgba(7, 27, 159, 0.6), 0 0 140px 80px rgba(252, 169, 9, 0.4); }
}

/* Cards cosmiques */
[data-theme="cosmic"] .service-card,
[data-theme="cosmic"] .testimonials,
[data-theme="cosmic"] .contact__form {
    background: rgba(7, 27, 100, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(252, 169, 9, 0.3);
    box-shadow: 0 0 30px rgba(7, 27, 159, 0.3);
}

[data-theme="cosmic"] .service-card:hover {
    border-color: rgba(252, 169, 9, 0.8);
    box-shadow: 
        0 0 50px rgba(252, 169, 9, 0.4),
        inset 0 0 30px rgba(7, 27, 159, 0.2);
    transform: translateY(-15px) rotateX(5deg);
}

[data-theme="cosmic"] .hero {
    background: linear-gradient(135deg, #03082e 0%, #071B9F 50%, #050f5a 100%);
}

/* ==================== THÈME 2: LIQUID MORPHING ==================== */
/* Formes liquides qui se transforment en continu */

[data-theme="liquid"] {
    --liquid-color-1: #071B9F;
    --liquid-color-2: #1a3bc4;
    --liquid-color-3: #FCA909;
}

[data-theme="liquid"] .liquid-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: -1;
}

[data-theme="liquid"] .liquid-blob {
    position: absolute;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    filter: blur(40px);
    opacity: 0.6;
    animation: liquidMorph 15s ease-in-out infinite;
}

[data-theme="liquid"] .liquid-blob:nth-child(1) {
    width: 600px; height: 600px;
    background: linear-gradient(135deg, var(--liquid-color-1), var(--liquid-color-2));
    top: -200px; left: -200px;
}

[data-theme="liquid"] .liquid-blob:nth-child(2) {
    width: 500px; height: 500px;
    background: linear-gradient(135deg, var(--liquid-color-2), var(--liquid-color-3));
    bottom: -150px; right: -150px;
    animation-delay: -5s;
    animation-direction: reverse;
}

[data-theme="liquid"] .liquid-blob:nth-child(3) {
    width: 400px; height: 400px;
    background: linear-gradient(135deg, var(--liquid-color-3), var(--liquid-color-1));
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -10s;
}

@keyframes liquidMorph {
    0%, 100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
        transform: translate(50px, -50px) rotate(90deg) scale(1.1);
    }
    50% {
        border-radius: 50% 60% 30% 70% / 50% 70% 30% 50%;
        transform: translate(-30px, 30px) rotate(180deg) scale(0.9);
    }
    75% {
        border-radius: 30% 70% 70% 30% / 70% 40% 60% 40%;
        transform: translate(40px, 20px) rotate(270deg) scale(1.05);
    }
}

/* Ripple effect on scroll */
[data-theme="liquid"] .ripple-wave {
    position: fixed;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}

[data-theme="liquid"] .ripple-wave::before {
    content: '';
    position: absolute;
    width: 200%; height: 200%;
    top: -50%; left: -50%;
    background: repeating-radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        transparent 0,
        transparent 40px,
        rgba(7, 27, 159, 0.03) 40px,
        rgba(7, 27, 159, 0.03) 80px
    );
    animation: rippleExpand 4s ease-out infinite;
}

@keyframes rippleExpand {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Liquid cards */
[data-theme="liquid"] .service-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(252, 169, 9, 0.3);
    position: relative;
    overflow: hidden;
}

[data-theme="liquid"] .service-card::before {
    content: '';
    position: absolute;
    top: -100%; left: -100%;
    width: 300%; height: 300%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(7, 27, 159, 0.3) 60deg,
        transparent 120deg
    );
    animation: liquidRotate 6s linear infinite;
}

@keyframes liquidRotate {
    to { transform: rotate(360deg); }
}

[data-theme="liquid"] .service-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(252, 169, 9, 0.6);
}

[data-theme="liquid"] .hero {
    background: linear-gradient(135deg, #050f5a 0%, #071B9F 100%);
}

/* ==================== THÈME 3: NEON CYBERPUNK ==================== */
/* Néons brillants, glitch, scanlines futuristes */

[data-theme="cyberpunk"] {
    --neon-pink: #FCA909;
    --neon-cyan: #1a3bc4;
    --neon-yellow: #ffbe3d;
}

[data-theme="cyberpunk"] body {
    background: #050a1a;
}

/* Scanlines effect */
[data-theme="cyberpunk"] .scanlines {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9998;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15) 0px,
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
    animation: scanlineMove 0.5s linear infinite;
}

@keyframes scanlineMove {
    0% { background-position: 0 0; }
    100% { background-position: 0 4px; }
}

/* Glitch effect */
[data-theme="cyberpunk"] .glitch-text {
    position: relative;
    animation: glitch 3s infinite;
}

[data-theme="cyberpunk"] .glitch-text::before,
[data-theme="cyberpunk"] .glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

[data-theme="cyberpunk"] .glitch-text::before {
    color: var(--neon-cyan);
    animation: glitchTop 2s infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

[data-theme="cyberpunk"] .glitch-text::after {
    color: var(--neon-pink);
    animation: glitchBottom 2.5s infinite;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitch {
    0%, 90%, 100% { transform: translate(0); }
    92% { transform: translate(-3px, 1px); }
    94% { transform: translate(3px, -1px); }
    96% { transform: translate(-2px, 2px); }
    98% { transform: translate(2px, -2px); }
}

@keyframes glitchTop {
    0%, 90%, 100% { transform: translate(0); opacity: 0.8; }
    92% { transform: translate(-5px, 0); }
    94% { transform: translate(5px, 0); }
}

@keyframes glitchBottom {
    0%, 90%, 100% { transform: translate(0); opacity: 0.8; }
    93% { transform: translate(5px, 0); }
    95% { transform: translate(-5px, 0); }
}

/* Neon glow borders */
[data-theme="cyberpunk"] .service-card {
    background: rgba(5, 15, 90, 0.9);
    border: 2px solid var(--neon-cyan);
    position: relative;
    box-shadow: 
        0 0 10px var(--neon-cyan),
        0 0 20px var(--neon-cyan),
        0 0 40px var(--neon-cyan),
        inset 0 0 20px rgba(7, 27, 159, 0.2);
    animation: neonFlicker 4s infinite;
}

@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        box-shadow: 
            0 0 10px var(--neon-cyan),
            0 0 20px var(--neon-cyan),
            0 0 40px var(--neon-cyan),
            inset 0 0 20px rgba(7, 27, 159, 0.2);
    }
    20%, 24%, 55% {
        box-shadow: none;
    }
}

[data-theme="cyberpunk"] .service-card:hover {
    border-color: var(--neon-pink);
    box-shadow: 
        0 0 20px var(--neon-pink),
        0 0 40px var(--neon-pink),
        0 0 60px var(--neon-pink),
        inset 0 0 30px rgba(252, 169, 9, 0.3);
    transform: translateY(-10px) perspective(500px) rotateX(5deg);
}

/* Circuit lines */
[data-theme="cyberpunk"] .circuit-lines {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.1;
    background-image: 
        linear-gradient(var(--neon-cyan) 1px, transparent 1px),
        linear-gradient(90deg, var(--neon-cyan) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: circuitPulse 2s ease-in-out infinite;
}

@keyframes circuitPulse {
    0%, 100% { opacity: 0.05; }
    50% { opacity: 0.15; }
}

[data-theme="cyberpunk"] .hero {
    background: linear-gradient(135deg, #050a1a 0%, #071B9F 100%);
}

/* ==================== THÈME 4: NATURE ORGANIC ==================== */
/* Feuilles qui tombent, vagues, croissance organique */

[data-theme="nature"] {
    --nature-green: #071B9F;
    --nature-gold: #FCA909;
    --nature-earth: #1a3bc4;
}

[data-theme="nature"] body {
    background: linear-gradient(180deg, #e8eeff 0%, #f0f4ff 50%, #fff8e8 100%);
}

/* Falling leaves */
[data-theme="nature"] .falling-leaves {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

[data-theme="nature"] .leaf {
    position: absolute;
    width: 30px; height: 30px;
    background: var(--nature-green);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    animation: leafFall linear infinite;
    opacity: 0.7;
}

@keyframes leafFall {
    0% {
        transform: translateY(-100px) rotate(0deg) translateX(0);
        opacity: 0;
    }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% {
        transform: translateY(100vh) rotate(720deg) translateX(100px);
        opacity: 0;
    }
}

/* Growing vines */
[data-theme="nature"] .vine {
    position: fixed;
    width: 3px;
    background: linear-gradient(to top, var(--nature-green), transparent);
    bottom: 0;
    animation: vineGrow 10s ease-out infinite;
}

@keyframes vineGrow {
    0% { height: 0; }
    50% { height: 50vh; }
    100% { height: 0; }
}

/* Water waves */
[data-theme="nature"] .water-waves {
    position: fixed;
    bottom: 0; left: 0;
    width: 200%; height: 200px;
    pointer-events: none;
    z-index: 0;
}

[data-theme="nature"] .water-wave {
    position: absolute;
    width: 200%;
    height: 100%;
    background: linear-gradient(180deg, transparent 50%, rgba(7, 27, 159, 0.1) 100%);
    border-radius: 100% 100% 0 0;
    animation: waveMove 8s ease-in-out infinite;
}

[data-theme="nature"] .water-wave:nth-child(2) {
    animation-delay: -2s;
    opacity: 0.5;
}

[data-theme="nature"] .water-wave:nth-child(3) {
    animation-delay: -4s;
    opacity: 0.3;
}

@keyframes waveMove {
    0%, 100% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(-25%) translateY(-20px); }
}

/* Organic cards */
[data-theme="nature"] .service-card {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 30px 10px 30px 10px;
    box-shadow: 
        10px 10px 30px rgba(7, 27, 159, 0.15),
        -5px -5px 20px rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
}

[data-theme="nature"] .service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 5px;
    background: linear-gradient(90deg, var(--nature-green), var(--nature-gold));
}

[data-theme="nature"] .service-card:hover {
    transform: translateY(-15px) rotate(1deg);
    box-shadow: 
        15px 15px 40px rgba(7, 27, 159, 0.2),
        -8px -8px 30px rgba(255, 255, 255, 0.9);
}

[data-theme="nature"] .hero {
    background: linear-gradient(135deg, #071B9F 0%, #050f5a 100%);
}

/* Butterfly animation */
[data-theme="nature"] .butterfly {
    position: fixed;
    width: 20px; height: 20px;
    pointer-events: none;
    z-index: 2;
}

[data-theme="nature"] .butterfly::before,
[data-theme="nature"] .butterfly::after {
    content: '';
    position: absolute;
    width: 15px; height: 20px;
    background: linear-gradient(135deg, #FCA909, #d48f00);
    border-radius: 50% 50% 50% 0;
    animation: wingFlap 0.2s ease-in-out infinite alternate;
}

[data-theme="nature"] .butterfly::before {
    transform-origin: right center;
    left: 0;
}

[data-theme="nature"] .butterfly::after {
    transform-origin: left center;
    right: 0;
    animation-delay: 0.1s;
}

@keyframes wingFlap {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(60deg); }
}

/* ==================== THÈME 5: GEOMETRIC FUTURISTIC ==================== */
/* Formes géométriques 3D, hologrammes, grilles */

[data-theme="geometric"] {
    --geo-blue: #1a3bc4;
    --geo-purple: #071B9F;
    --geo-pink: #FCA909;
}

[data-theme="geometric"] body {
    background: #050a1a;
    perspective: 1000px;
}

/* 3D Grid floor */
[data-theme="geometric"] .geo-grid {
    position: fixed;
    bottom: 0; left: 0;
    width: 200%; height: 60vh;
    transform: rotateX(60deg) translateY(50%);
    transform-origin: center bottom;
    pointer-events: none;
    z-index: 0;
    background-image: 
        linear-gradient(var(--geo-blue) 1px, transparent 1px),
        linear-gradient(90deg, var(--geo-blue) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.2;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% { background-position: 0 0; }
    100% { background-position: 80px 80px; }
}

/* Floating geometric shapes */
[data-theme="geometric"] .geo-shapes {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    perspective: 1000px;
}

[data-theme="geometric"] .geo-shape {
    position: absolute;
    animation: geoFloat 20s ease-in-out infinite;
}

[data-theme="geometric"] .geo-cube {
    width: 100px; height: 100px;
    transform-style: preserve-3d;
    animation: cubeRotate 15s linear infinite;
}

[data-theme="geometric"] .geo-cube .face {
    position: absolute;
    width: 100px; height: 100px;
    border: 2px solid var(--geo-blue);
    background: rgba(0, 212, 255, 0.05);
    box-shadow: 0 0 20px var(--geo-blue);
}

[data-theme="geometric"] .geo-cube .front { transform: translateZ(50px); }
[data-theme="geometric"] .geo-cube .back { transform: translateZ(-50px) rotateY(180deg); }
[data-theme="geometric"] .geo-cube .left { transform: translateX(-50px) rotateY(-90deg); }
[data-theme="geometric"] .geo-cube .right { transform: translateX(50px) rotateY(90deg); }
[data-theme="geometric"] .geo-cube .top { transform: translateY(-50px) rotateX(90deg); }
[data-theme="geometric"] .geo-cube .bottom { transform: translateY(50px) rotateX(-90deg); }

@keyframes cubeRotate {
    0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
    100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

@keyframes geoFloat {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(50px, -30px); }
    50% { transform: translate(-30px, 50px); }
    75% { transform: translate(40px, 20px); }
}

/* Hologram effect */
[data-theme="geometric"] .hologram {
    position: relative;
}

[data-theme="geometric"] .hologram::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        rgba(0, 212, 255, 0.03) 2px,
        transparent 4px
    );
    animation: hologramScan 2s linear infinite;
    pointer-events: none;
}

@keyframes hologramScan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* Geometric cards */
[data-theme="geometric"] .service-card {
    background: rgba(10, 10, 26, 0.8);
    border: 1px solid var(--geo-blue);
    clip-path: polygon(
        0 20px, 20px 0, calc(100% - 20px) 0, 100% 20px,
        100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px)
    );
    position: relative;
    box-shadow: 
        0 0 30px rgba(0, 212, 255, 0.3),
        inset 0 0 30px rgba(0, 212, 255, 0.05);
}

[data-theme="geometric"] .service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(0, 212, 255, 0.1) 50%,
        transparent 100%
    );
    animation: cardShine 3s ease-in-out infinite;
}

@keyframes cardShine {
    0%, 100% { opacity: 0; transform: translateX(-100%); }
    50% { opacity: 1; transform: translateX(100%); }
}

[data-theme="geometric"] .service-card:hover {
    border-color: var(--geo-purple);
    box-shadow: 
        0 0 50px rgba(178, 75, 243, 0.4),
        0 0 100px rgba(178, 75, 243, 0.2),
        inset 0 0 50px rgba(178, 75, 243, 0.1);
    transform: translateY(-20px) scale(1.02);
}

/* Particle lines */
[data-theme="geometric"] .particle-line {
    position: fixed;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--geo-blue), transparent);
    animation: particleLine 4s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes particleLine {
    0% { transform: translateX(-100vw); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(100vw); opacity: 0; }
}

[data-theme="geometric"] .hero {
    background: linear-gradient(135deg, #050a1a 0%, #071B9F 100%);
}

/* Triangle decoration */
[data-theme="geometric"] .triangle-deco {
    position: fixed;
    width: 0; height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 86px solid rgba(0, 212, 255, 0.1);
    animation: trianglePulse 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes trianglePulse {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.3; }
    50% { transform: scale(1.2) rotate(180deg); opacity: 0.6; }
}

/* ==================== THEME TRANSITIONS ==================== */
[data-theme] * {
    transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* ==================== THEME SELECTOR PREVIEW ==================== */
.theme-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.theme-card {
    position: relative;
    padding: 1.5rem;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    min-height: 180px;
}

.theme-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 0.3s;
}

.theme-card:hover::before {
    opacity: 1;
}

.theme-card.active {
    transform: scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.theme-card.active::after {
    content: '✓';
    position: absolute;
    top: 10px; right: 10px;
    width: 30px; height: 30px;
    background: #10B981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.theme-card__name {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.theme-card__desc {
    font-size: 0.85rem;
    opacity: 0.8;
    position: relative;
    z-index: 1;
}

/* Theme card styles */
.theme-card--cosmic {
    background: linear-gradient(135deg, #03082e, #071B9F);
    color: white;
    border: 2px solid #FCA909;
    box-shadow: 0 0 30px rgba(252, 169, 9, 0.3);
}

.theme-card--liquid {
    background: linear-gradient(135deg, #071B9F, #1a3bc4);
    color: white;
    border: 2px solid #FCA909;
}

.theme-card--cyberpunk {
    background: #050a1a;
    color: #FCA909;
    border: 2px solid #1a3bc4;
    box-shadow: 0 0 20px rgba(7, 27, 159, 0.4);
}

.theme-card--nature {
    background: linear-gradient(135deg, #e8eeff, #f0f4ff);
    color: #071B9F;
    border: 2px solid #FCA909;
}

.theme-card--geometric {
    background: linear-gradient(135deg, #050a1a, #071B9F);
    color: #FCA909;
    border: 2px solid #1a3bc4;
    clip-path: polygon(0 15px, 15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px));
}

.theme-card--default {
    background: linear-gradient(135deg, #071B9F, #0a1f6b);
    color: white;
    border: 2px solid #FCA909;
}