/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Utility classes extracted from inline styles */
.ml-8 { margin-left:8px !important; }
.noscript-msg { background:#ffdddd; color:#900; padding:10px; text-align:center; font-family:sans-serif; font-size:14px; }
.placeholder-layout { position:relative; overflow:hidden; }
.hero-canvas { position:absolute; inset:0; width:100%; height:100%; }
.hero-caption-wrapper { position:relative; z-index:2; max-width:820px; text-align:center; pointer-events:none; }
.hero-controls { position:absolute; bottom:14px; right:16px; display:flex; gap:10px; z-index:3; pointer-events:auto; }
.hero-ctrl { background:rgba(13,32,44,0.6); border:1px solid rgba(88,178,245,0.55); color:#d8f2ff; padding:8px 14px; font-size:0.65rem; letter-spacing:.6px; text-transform:uppercase; font-weight:600; border-radius:8px; cursor:pointer; backdrop-filter:blur(4px); display:inline-flex; align-items:center; gap:6px; transition:background .35s,border-color .35s,color .35s, box-shadow .35s; }
.hero-ctrl:hover { background:rgba(20,54,72,0.75); border-color:#58b2f5; color:#fff; box-shadow:0 0 0 1px #58b2f5,0 0 12px -2px #58b2f5; }
.hero-ctrl:active { transform:scale(.92); }
.hero-ctrl:focus-visible { outline:3px solid #58b2f5; outline-offset:2px; }
@media (max-width:720px){ .hero-controls { bottom:10px; right:10px; gap:6px; } .hero-ctrl { padding:6px 10px; font-size:0.55rem; } }

/* --- Hero Characters Layer --- */
.hero-stage { position:relative; }
.hero-characters { position:absolute; inset:0; display:flex; justify-content:space-between; align-items:flex-end; pointer-events:none; padding:0 6%; z-index:2; }
.hero-characters.layout-hero-right { flex-direction:row; }
.hero-characters.layout-hero-right .char-wrapper.villain { order:0; }
.hero-characters.layout-hero-right .char-wrapper.hero,
.hero-characters.layout-hero-right .char-wrapper.victory-hero { order:1; margin-left:auto; }
.char-wrapper { position:relative; width:160px; max-width:26vw; filter:drop-shadow(0 6px 14px rgba(0,0,0,0.55)); opacity:0; transform:translateY(40px) scale(.9); animation:charEnter 1s ease forwards .25s; }
.char-wrapper.villain { animation-delay:.45s; }
@keyframes charEnter { to { opacity:1; transform:translateY(0) scale(1); } }

/* Floating / idle motion */
.dp-hero { animation:heroFloat 6.5s ease-in-out infinite; transform-origin:50% 50%; }
@keyframes heroFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14px); } }
.dp-hero.hero-greet { animation:heroGreet 2.2s ease-in-out 1, heroFloat 6.5s ease-in-out infinite 2.2s; }
@keyframes heroGreet { 0% { transform:translateY(0) rotate(0deg); } 30% { transform:translateY(-6px) rotate(-2deg); } 55% { transform:translateY(-10px) rotate(3deg); } 80% { transform:translateY(-4px) rotate(-1deg); } 100% { transform:translateY(0) rotate(0deg);} }
.dp-villain { animation:villainFloat 7.2s ease-in-out infinite; transform-origin:50% 50%; }
@keyframes villainFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
/* Micro tilt (pre-derrota) */
body:not(.villain-defeated) .dp-villain { animation:villainFloat 7.2s ease-in-out infinite, villainMicroTilt 9s ease-in-out infinite; }
@keyframes villainMicroTilt { 0%,100% { transform:translateY(0) rotate(0deg); } 25% { transform:translateY(-3px) rotate(-2deg); } 50% { transform:translateY(-6px) rotate(1.8deg); } 75% { transform:translateY(-2px) rotate(-1.2deg); } }

/* Core pulse and eyes */
.core-pulse { animation:corePulse 3.2s ease-in-out infinite; }
@keyframes corePulse { 0%,100% { transform:scale(.9); filter:drop-shadow(0 0 4px rgba(143,232,255,.55)); } 50% { transform:scale(1.15); filter:drop-shadow(0 0 10px rgba(143,232,255,.9)); } }
.dp-villain .v-eye { animation:eyeBlink 5.8s linear infinite; transform-origin:50% 50%; }
@keyframes eyeBlink { 0%,47%,53%,100% { transform:scaleY(1); } 50% { transform:scaleY(.15); } }

/* Cape subtle sway */
.cape { animation:capeWave 4.8s ease-in-out infinite; transform-origin:10% 10%; }
@keyframes capeWave { 0%,100% { transform:rotate(0deg); } 50% { transform:rotate(3deg); } }

/* Hero breathing */
.dp-hero .chest-breath { animation:chestBreath 5.2s ease-in-out infinite; transform-origin:50% 60%; }
@keyframes chestBreath { 0%,100% { transform:scaleY(1); } 45% { transform:scaleY(1.025); } }

/* Rim subtle pulsing when boost */
body.boost-active .dp-hero .torso path:nth-child(2) { animation:rimPulse 3.4s ease-in-out infinite; }
@keyframes rimPulse { 0%,100% { opacity:.35; } 50% { opacity:.85; } }

/* Boost mode intensifies glow */
body.boost-active .core-pulse { animation-duration:1.8s; }
body.boost-active .dp-villain .v-eye { animation-duration:3.2s; }
body.boost-active .dp-hero { animation-duration:4.2s; }
body.boost-active .dp-villain { animation-duration:4.6s; }
body.boost-active .dp-villain .v-eye { filter:drop-shadow(0 0 6px rgba(255,70,70,.8)); }

/* Villain cables subtle sway */
.dp-villain .v-cable { animation:cableSway 6.5s ease-in-out infinite; transform-origin:50% 0; }
@keyframes cableSway { 0%,100% { transform:rotate(0deg); } 50% { transform:rotate(4deg); } }

/* Rust patches shimmer faint in boost */
body.boost-active .dp-villain .rust-patches circle { animation:rustPulse 5.4s linear infinite; }
@keyframes rustPulse { 0%,100% { opacity:.45; } 50% { opacity:.7; } }

/* Villain eye random micro flicker overlay */
body.boost-active .dp-villain .v-eye { animation-name:eyeBlinkJitter, eyeFlicker; animation-duration:6.2s, .18s; animation-iteration-count:infinite; animation-timing-function:linear, steps(2,end); }
@keyframes eyeFlicker { 0% { filter:none; } 50% { filter:brightness(1.25); } 100% { filter:none; } }

/* Paused state (set by JS) */
body.anim-paused .dp-hero,
body.anim-paused .dp-villain,
body.anim-paused .core-pulse,
body.anim-paused .v-eye,
body.anim-paused .cape { animation-play-state:paused !important; }

/* Defeat state visuals */
body.villain-defeated .char-wrapper.villain { animation: villainDisintegrate 2.6s ease forwards; position:relative; }
body.villain-defeated .char-wrapper.villain::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 40% 40%,rgba(255,70,70,0.4),rgba(255,70,70,0) 70%); mix-blend-mode:screen; opacity:.65; animation:villainFlash 1.2s ease forwards; }
body.villain-defeated .char-wrapper.villain::before { content:""; position:absolute; inset:-6px; background:radial-gradient(circle at 55% 35%,rgba(40,0,0,0.65),rgba(20,0,0,0.1) 65%,rgba(0,0,0,0) 80%); filter:blur(8px); opacity:.75; mix-blend-mode:overlay; animation:decayPulse 3.2s ease-in-out infinite; }
@keyframes decayPulse { 0%,100% { opacity:.55; } 50% { opacity:.85; } }
@keyframes villainDisintegrate { 0% { filter:brightness(1) contrast(1) blur(0); opacity:1; transform:translateY(0) scale(1); } 35% { filter:brightness(1.4) contrast(1.15) blur(1px); } 55% { filter:brightness(.85) contrast(1.3) blur(2px); opacity:.65; } 70% { filter:brightness(.55) contrast(1.4) blur(3px); opacity:.35; } 85% { filter:brightness(.45) contrast(1.5) blur(5px); opacity:.18; transform:translateY(12px) scale(.94); } 100% { filter:brightness(.35) contrast(1.6) blur(8px); opacity:0; transform:translateY(22px) scale(.9); } }
@keyframes villainFlash { 0% { opacity:.75; } 60% { opacity:.2; } 100% { opacity:0; } }
body.villain-defeated .char-wrapper.hero { animation: heroVictoryGlow 2.8s ease-in-out forwards; }
@keyframes heroVictoryGlow { 0% { filter:drop-shadow(0 0 8px rgba(143,232,255,.6)); } 40% { filter:drop-shadow(0 0 22px rgba(143,232,255,.95)) saturate(1.3); } 70% { filter:drop-shadow(0 0 14px rgba(143,232,255,.7)) saturate(1.15); } 100% { filter:drop-shadow(0 0 10px rgba(143,232,255,.55)); }
}
body.villain-defeated .dp-hero .hero-smile { opacity:1 !important; transition:opacity .6s ease .4s; }
.dp-hero .hero-smile { opacity:0; }
body.hero-empowered .char-wrapper.hero { animation:heroEmpowerPulse 4.5s ease-in-out infinite alternate; }
@keyframes heroEmpowerPulse { 0% { filter:drop-shadow(0 0 10px rgba(143,232,255,.65)) saturate(1.05); } 50% { filter:drop-shadow(0 0 26px rgba(143,232,255,.95)) saturate(1.35) brightness(1.15); } 100% { filter:drop-shadow(0 0 14px rgba(143,232,255,.8)) saturate(1.2); } }
body.hero-empowered .dp-hero .core-pulse { animation-duration:1.3s; }
body.hero-empowered .dp-hero .eye { filter:drop-shadow(0 0 10px rgba(143,232,255,1)); }

/* Victory Hero Styles */
.char-wrapper.victory-hero {
    transform: scale(1.3);
    z-index: 10;
    opacity: 0;
    display: none;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body.hero-empowered .char-wrapper.victory-hero {
    display: block;
    animation: victoryAscend 2s ease-out 1s forwards;
}

.dp-hero-victory {
    filter: drop-shadow(0 0 30px rgba(0, 255, 255, 0.8)) 
            drop-shadow(0 0 60px rgba(0, 255, 255, 0.4));
}

.victory-pose {
    animation: victoryGlow 2s ease-in-out infinite alternate;
}

.victory-core {
    animation: victoryPulse 1s ease-in-out infinite, victoryRotate 4s linear infinite;
}

.victory-cape {
    animation: victoryFlow 3s ease-in-out infinite;
}

.victory-smile {
    stroke-width: 3;
    animation: victorySmile 2s ease-in-out infinite alternate;
}

.victory-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.victory-particles::before,
.victory-particles::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #00ffff 0%, transparent 70%);
    border-radius: 50%;
    animation: victoryParticles 3s linear infinite;
}

.victory-particles::before {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.victory-particles::after {
    top: 60%;
    right: 15%;
    animation-delay: 1.5s;
}

@keyframes victoryAscend {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.35) translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: scale(1.3) translateY(0);
    }
}

@keyframes victoryGlow {
    0% {
        filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.6));
    }
    100% {
        filter: drop-shadow(0 0 40px rgba(0, 255, 255, 1)) 
                drop-shadow(0 0 80px rgba(0, 255, 255, 0.6));
    }
}

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

@keyframes victoryRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes victoryFlow {
    0%, 100% {
        transform: translateX(0) scaleX(1);
    }
    50% {
        transform: translateX(-3px) scaleX(1.05);
    }
}

@keyframes victorySmile {
    0% {
        stroke-width: 2;
        opacity: 0.8;
    }
    100% {
        stroke-width: 4;
        opacity: 1;
    }
}

@keyframes victoryParticles {
    0% {
        transform: translateY(0) scale(0);
        opacity: 0;
    }
    20% {
        transform: translateY(-20px) scale(1);
        opacity: 1;
    }
    80% {
        transform: translateY(-100px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-120px) scale(0);
        opacity: 0;
    }
}

/* Enhanced Empowerment Ring */
.hero-empower-ring { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 380px; 
    height: 380px; 
    margin: -190px 0 0 -190px; 
    border-radius: 50%; 
    pointer-events: none; 
    background: 
        radial-gradient(circle at 50% 50%, 
            rgba(150,240,255,0.7) 0%,
            rgba(120,210,255,0.4) 30%, 
            rgba(88,178,245,0.25) 50%,
            rgba(80,160,210,0.1) 70%,
            transparent 85%
        ); 
    mix-blend-mode: screen; 
    opacity: 0; 
    transform: scale(.5) rotate(0deg);
    position: relative;
}

.hero-empower-ring::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: conic-gradient(
        rgba(143,232,255,.8) 0deg,
        rgba(88,178,245,.6) 90deg,
        rgba(160,240,255,.9) 180deg,
        rgba(88,178,245,.6) 270deg,
        rgba(143,232,255,.8) 360deg
    );
    mask: 
        radial-gradient(circle, transparent 60%, black 62%, black 64%, transparent 66%),
        conic-gradient(black, black);
    mask-composite: intersect;
    -webkit-mask: 
        radial-gradient(circle, transparent 60%, black 62%, black 64%, transparent 66%),
        conic-gradient(black, black);
    -webkit-mask-composite: source-in;
}

.hero-empower-ring::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(143,232,255,.4) 0%, 
        rgba(143,232,255,.2) 40%, 
        transparent 70%
    );
    transform: translate(-50%, -50%);
    animation: innerPulse 3s ease-in-out infinite;
}

body.hero-empowered .hero-empower-ring { 
    animation: 
        empowerRing 12s linear infinite, 
        empowerAppear 1.2s cubic-bezier(.25,.9,.35,1.1) forwards,
        empowerBreath 6s ease-in-out infinite 1.5s; 
}

@keyframes empowerRing { 
    to { transform: scale(.7) rotate(360deg); } 
}

@keyframes empowerAppear { 
    0% { 
        opacity: 0; 
        transform: scale(.3) rotate(0deg); 
    } 
    40% { 
        opacity: .8; 
        transform: scale(.8) rotate(45deg); 
    }
    70% { 
        opacity: 1; 
        transform: scale(.75) rotate(90deg); 
    } 
    100% { 
        opacity: .75; 
        transform: scale(.7) rotate(180deg); 
    } 
}

@keyframes empowerBreath {
    0%, 100% { 
        transform: scale(.7) rotate(0deg);
        filter: brightness(1);
    }
    50% { 
        transform: scale(.75) rotate(180deg);
        filter: brightness(1.2);
    }
}

@keyframes innerPulse {
    0%, 100% { 
        opacity: .4; 
        transform: translate(-50%, -50%) scale(1); 
    }
    50% { 
        opacity: .7; 
        transform: translate(-50%, -50%) scale(1.1); 
    }
}
body.hero-empowered .char-wrapper.hero { transform-origin:50% 60%; animation:heroEmpowerPulse 4.5s ease-in-out infinite alternate, heroLift 6.5s ease-in-out infinite; }
@keyframes heroLift { 0%,100% { transform:translateY(0) scale(1.02); } 50% { transform:translateY(-8px) scale(1.06); } }
body.hero-empowered .dp-hero .cape { animation:capeWaveEmpowered 3.2s ease-in-out infinite; }
@keyframes capeWaveEmpowered { 0%,100% { transform:rotate(0deg) skewX(0deg); } 50% { transform:rotate(6deg) skewX(4deg); } }
/* Victory badge */
/* Enhanced Victory Badge */
.hero-victory-badge { 
    position: absolute; 
    top: 16px; 
    left: 16px; 
    background: linear-gradient(135deg, #58b2f5, #89d8ff, #a4e4ff); 
    color: #033244; 
    font-size: 0.7rem; 
    font-weight: 800; 
    padding: 8px 14px 8px 36px; 
    border-radius: 12px; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    box-shadow: 
        0 6px 20px -4px rgba(0,0,0,0.7),
        0 0 0 2px rgba(143,232,255,0.8),
        inset 0 1px 0 rgba(255,255,255,0.3); 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    opacity: 0; 
    transform: translateY(-15px) scale(.8); 
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

.hero-victory-badge::before { 
    content: "★"; 
    position: absolute; 
    left: 12px; 
    font-size: 1.1rem; 
    color: #033244; 
    text-shadow: 0 0 8px rgba(255,255,255,0.9), 0 2px 4px rgba(0,0,0,0.3); 
    animation: starPulse 2.5s ease-in-out infinite; 
    z-index: 2;
}

.hero-victory-badge::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255,255,255,0.3) 50%, 
        transparent 70%
    );
    transform: translateX(-100%);
    animation: badgeShine 3s ease-in-out 1s infinite;
}

@keyframes starPulse { 
    0%, 100% { 
        transform: scale(1) rotate(0deg); 
        filter: drop-shadow(0 0 4px rgba(255,255,255,0.6));
    } 
    50% { 
        transform: scale(1.3) rotate(15deg); 
        filter: drop-shadow(0 0 8px rgba(255,255,255,0.9));
    } 
}

body.hero-empowered .hero-victory-badge { 
    animation: badgeIn 1s cubic-bezier(.25,.9,.35,1.15) forwards .2s; 
}

@keyframes badgeIn { 
    0% { 
        opacity: 0; 
        transform: translateY(-20px) scale(.7) rotateX(15deg); 
    } 
    60% { 
        opacity: 1; 
        transform: translateY(4px) scale(1.1) rotateX(0deg); 
    } 
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1) rotateX(0deg); 
    } 
}

@keyframes badgeShine {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}
/* Final empowerment message */
/* Enhanced Final Empowerment Message */
.hero-final-message { 
    position:absolute; top:50%; left:50%; transform:translate(-50%, -42%) scale(.92); opacity:0; 
    font-size:1.05rem; max-width:560px; text-align:center; line-height:1.45; letter-spacing:.6px; 
    background:linear-gradient(150deg, rgba(13,32,44,0.65), rgba(10,28,40,0.55)); 
    padding:20px 28px 22px; border:1px solid rgba(143,232,255,.45); border-radius:16px; color:#effbff; font-weight:600; 
    backdrop-filter:blur(8px) saturate(1.1); -webkit-backdrop-filter:blur(8px) saturate(1.1); 
    box-shadow:0 10px 32px -14px rgba(0,0,0,.85), 0 0 0 1px rgba(143,232,255,.25), inset 0 1px 0 rgba(255,255,255,.08); 
    pointer-events:none; text-shadow:0 2px 6px rgba(0,0,0,.55); position:relative; overflow:hidden; 
}

.hero-final-message::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        rgba(143,232,255,.6) 0%, 
        rgba(88,178,245,.4) 25%, 
        rgba(160,240,255,.7) 50%, 
        rgba(88,178,245,.4) 75%, 
        rgba(143,232,255,.6) 100%
    );
    border-radius: 20px;
    z-index: -1;
    animation: borderGlow 3s ease-in-out infinite alternate;
}

.hero-final-message::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle at center, 
        rgba(143,232,255,.15) 0%, 
        rgba(143,232,255,.05) 40%, 
        transparent 70%
    );
    transform: translate(-50%, -50%);
    z-index: -1;
    animation: auraBreath 4s ease-in-out infinite;
}

body.hero-empowered .hero-final-message { animation: finalMsgIn .95s cubic-bezier(.25,.9,.35,1.05) forwards; }

@keyframes finalMsgIn { 
    0% { opacity:0; transform:translate(-50%, -34%) scale(.7); filter:blur(6px) saturate(.7); }
    55% { opacity:.9; transform:translate(-50%, -44%) scale(1.03); filter:blur(1.2px) saturate(1.2); }
    100% { opacity:1; transform:translate(-50%, -42%) scale(1); filter:blur(0) saturate(1); }
}
/* Demo Panel */
.dp-demo-panel { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(5,15,22,0.72); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); z-index:12000; opacity:0; pointer-events:none; transition:opacity .35s ease; }
.dp-demo-panel.is-open { opacity:1; pointer-events:auto; }
.dp-demo-panel__inner { width:min(600px,90%); background:linear-gradient(145deg,#102330,#0b1a24); border:1px solid rgba(143,232,255,0.4); border-radius:18px; padding:28px 30px 26px; color:#d8f2ff; box-shadow:0 18px 48px -14px rgba(0,0,0,0.75),0 0 0 1px rgba(143,232,255,0.3); position:relative; }
.dp-demo-panel__title { margin:0 0 10px; font-size:1.3rem; letter-spacing:.8px; background:linear-gradient(90deg,#9fe8ff,#58b2f5); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dp-demo-panel__desc { margin:0 0 16px; font-size:.95rem; line-height:1.5; opacity:.85; }
.dp-demo-panel__content { max-height:200px; overflow:auto; border:1px solid rgba(143,232,255,0.25); background:rgba(255,255,255,0.04); padding:10px 12px; border-radius:12px; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03); }
.dp-demo-log { list-style:none; font-family:monospace; font-size:.78rem; line-height:1.55; }
.dp-demo-log li { padding:2px 0; color:#9fe8ff; }
.dp-demo-panel__actions { margin-top:18px; display:flex; justify-content:flex-end; }
.dp-demo-close { background:#173445; color:#d8f2ff; border:1px solid #356f8f; padding:8px 16px; border-radius:10px; cursor:pointer; font-size:.7rem; letter-spacing:.6px; font-weight:600; text-transform:uppercase; transition:background .3s, box-shadow .3s; }
.dp-demo-close:hover { background:#215068; box-shadow:0 0 0 1px #58b2f5,0 0 14px -4px #58b2f5; }
.dp-demo-close:focus-visible { outline:3px solid #58b2f5; outline-offset:2px; }

@keyframes borderGlow {
    0%, 100% { opacity: .6; }
    50% { opacity: .9; }
}

@keyframes auraBreath {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: .3; 
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.1); 
        opacity: .5; 
    }
}
/* Controls help inline hint */
.hero-controls-help { margin-top:8px; font-size:0.62rem; letter-spacing:.7px; text-transform:uppercase; opacity:.7; color:#58b2f5; font-weight:600; }
html.dark .hero-controls-help { color:#9fe8ff; }

/* Enhanced Scroll to Top Button */
#scrollToTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #193242, #0d1c28);
    color: #d8f2ff;
    border: 1px solid rgba(88, 178, 245, 0.4);
    border-radius: 50%;
    cursor: pointer;
    z-index: 9999;
    display: none;
    font-size: 1.4em;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(88, 178, 245, 0.4);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: scale(0.9);
    outline: none;
    font-family: inherit;
}

#scrollToTopBtn:hover {
    background: linear-gradient(135deg, #25526a, #193242);
    border-color: #58b2f5;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(88, 178, 245, 0.2);
    transform: scale(1) translateY(-2px);
}

#scrollToTopBtn:active {
    transform: scale(0.95) translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(88, 178, 245, 0.3);
}

#scrollToTopBtn:focus-visible {
    outline: 3px solid #58b2f5;
    outline-offset: 3px;
}

/* Scroll button entrance animation */
#scrollToTopBtn.show {
    animation: scrollBtnShow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes scrollBtnShow {
    from {
        opacity: 0;
        transform: scale(0.7) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(0.9) translateY(0);
    }
}
.hero-progress { margin-top:6px; position:relative; font-size:0.6rem; letter-spacing:.6px; text-transform:uppercase; padding:4px 10px; border:1px solid rgba(88,178,245,0.45); border-radius:16px; display:inline-block; color:#9fe8ff; background:linear-gradient(90deg,rgba(88,178,245,0.15) 0%,rgba(88,178,245,0.05) 100%); overflow:hidden; --p:0; transition:box-shadow .35s ease; }
.hero-progress::after { content:""; position:absolute; left:0; top:0; bottom:0; width:calc(var(--p)*1%); background:linear-gradient(90deg,#58b2f5,#8c58f5); opacity:0.55; pointer-events:none; transition:width .25s ease; }
.hero-progress[data-state="idle"] { --p:0; opacity:.65; }
.hero-progress[data-state="boosting"] { box-shadow:0 0 6px -2px rgba(88,178,245,0.7); }
.hero-progress[data-state="defeating"] { box-shadow:0 0 10px -2px rgba(255,140,70,0.75); }
.hero-progress[data-state="empowered"] { box-shadow:0 0 12px -2px rgba(140,88,245,0.8),0 0 24px -6px rgba(140,88,245,0.55); }
.hero-progress[data-state="empowered"]::after { background:linear-gradient(90deg,#8c58f5,#b28dff); }
.hero-progress .hero-progress-pct { font-weight:600; color:#d8f2ff; margin-left:4px; }
/* Additional hero highlight breathing */
.dp-hero .hero-head-glow ellipse { animation:headAura 7s ease-in-out infinite; transform-origin:50% 50%; }
@keyframes headAura { 0%,100% { transform:scale(1); opacity:.18; } 50% { transform:scale(1.08); opacity:.32; } }
.dp-hero .hero-highlights path { stroke-dasharray:34; stroke-dashoffset:34; animation:lineReveal 3.4s ease forwards 1.2s; }
@keyframes lineReveal { to { stroke-dashoffset:0; } }
body.anim-paused .video-placeholder::after { outline:2px solid rgba(143,232,255,.3); box-shadow:0 0 0 3px rgba(143,232,255,.15),0 0 18px -4px rgba(143,232,255,.55) inset; }

/* Enhanced Empowerment Particles */
.hero-empower-particle { 
    position: absolute; 
    background: radial-gradient(circle, 
        rgba(255,255,255,1) 0%, 
        rgba(143,232,255,0.9) 30%, 
        rgba(88,178,245,0.6) 70%, 
        transparent 100%
    ); 
    border-radius: 50%; 
    pointer-events: none; 
    opacity: 0; 
    box-shadow: 
        0 0 8px rgba(143,232,255,0.8),
        0 0 16px rgba(88,178,245,0.4),
        inset 0 0 4px rgba(255,255,255,0.3);
    animation: 
        empowerParticle 5s cubic-bezier(.25,.8,.25,1) forwards,
        empowerParticleGlow 2s ease-in-out infinite;
}

.hero-empower-particle:nth-child(odd) {
    animation: 
        empowerParticleLeft 6s cubic-bezier(.25,.8,.25,1) forwards,
        empowerParticleGlow 2.5s ease-in-out infinite;
    animation-delay: 0.2s;
}

.hero-empower-particle:nth-child(3n) {
    animation: 
        empowerParticleRight 7s cubic-bezier(.25,.8,.25,1) forwards,
        empowerParticleGlow 3s ease-in-out infinite;
    animation-delay: 0.4s;
    background: radial-gradient(circle, 
        rgba(255,255,255,0.9) 0%, 
        rgba(160,240,255,0.8) 30%, 
        rgba(120,210,255,0.5) 70%, 
        transparent 100%
    );
}

@keyframes empowerParticle { 
    0% { 
        opacity: 0; 
        transform: scale(.6) translateY(0px) rotate(0deg); 
    } 
    15% { 
        opacity: 1; 
        transform: scale(1.3) translateY(-10px) rotate(45deg); 
    }
    30% { 
        opacity: .9; 
        transform: scale(1) translateY(-25px) rotate(90deg); 
    } 
    60% { 
        opacity: .6; 
        transform: scale(.8) translateY(-50px) rotate(180deg); 
    } 
    85% { 
        opacity: .2; 
        transform: scale(.5) translateY(-75px) rotate(270deg); 
    } 
    100% { 
        opacity: 0; 
        transform: scale(.2) translateY(-100px) rotate(360deg); 
    } 
}

@keyframes empowerParticleLeft { 
    0% { 
        opacity: 0; 
        transform: scale(.6) translate(0px, 0px) rotate(0deg); 
    } 
    15% { 
        opacity: 1; 
        transform: scale(1.2) translate(-15px, -8px) rotate(60deg); 
    }
    40% { 
        opacity: .8; 
        transform: scale(1) translate(-35px, -30px) rotate(150deg); 
    } 
    70% { 
        opacity: .4; 
        transform: scale(.7) translate(-60px, -60px) rotate(240deg); 
    } 
    100% { 
        opacity: 0; 
        transform: scale(.3) translate(-90px, -95px) rotate(360deg); 
    } 
}

@keyframes empowerParticleRight { 
    0% { 
        opacity: 0; 
        transform: scale(.6) translate(0px, 0px) rotate(0deg); 
    } 
    15% { 
        opacity: 1; 
        transform: scale(1.4) translate(20px, -12px) rotate(-45deg); 
    }
    40% { 
        opacity: .8; 
        transform: scale(1.1) translate(45px, -35px) rotate(-120deg); 
    } 
    70% { 
        opacity: .4; 
        transform: scale(.8) translate(75px, -70px) rotate(-210deg); 
    } 
    100% { 
        opacity: 0; 
        transform: scale(.4) translate(105px, -105px) rotate(-360deg); 
    } 
}

@keyframes empowerParticleGlow {
    0%, 100% { 
        filter: brightness(1) blur(0px);
        box-shadow: 
            0 0 8px rgba(143,232,255,0.8),
            0 0 16px rgba(88,178,245,0.4),
            inset 0 0 4px rgba(255,255,255,0.3);
    }
    50% { 
        filter: brightness(1.3) blur(0.5px);
        box-shadow: 
            0 0 12px rgba(143,232,255,1),
            0 0 24px rgba(88,178,245,0.6),
            inset 0 0 6px rgba(255,255,255,0.5);
    }
}

/* Fragment particles for villain defeat */
body.villain-defeated .char-wrapper.villain .dp-villain { mask:radial-gradient(circle at 50% 40%, rgba(255,255,255,1) 0%, rgba(255,255,255,.6) 45%, rgba(255,255,255,0) 70%); position:relative; }
body.villain-defeated .char-wrapper.villain .dp-villain .fragment { animation: fragDrift 2s linear forwards; }
@keyframes fragDrift { 0% { transform:translate(0,0) scale(1); opacity:1; } 60% { opacity:.55; } 100% { transform:translate(var(--dx,20px), var(--dy,-40px)) scale(.4); opacity:0; } }

/* Fragment pieces container */
.villain-fragments { position:absolute; inset:0; pointer-events:none; }
.villain-fragments .vf-piece { position:absolute; width:10px; height:10px; background:linear-gradient(135deg,#701818,#c23); border-radius:2px; box-shadow:0 0 6px -1px rgba(255,70,70,0.6); opacity:0; animation:vFrag 1.8s ease forwards; }
@keyframes vFrag { 0% { transform:translate(0,0) scale(.9) rotate(0deg); opacity:0; } 10% { opacity:1; } 65% { opacity:.75; } 100% { transform:translate(var(--tx), var(--ty)) scale(.35) rotate(var(--rot,120deg)); opacity:0; filter:blur(1px); } }

/* Sparks (canvas overlay would supplement) - fallback CSS sparks */
.villain-fragments .vf-spark { position:absolute; width:4px; height:4px; background:#ffb347; border-radius:50%; box-shadow:0 0 8px 2px rgba(255,180,70,0.7); opacity:0; animation:vSpark 1.1s linear forwards; }
@keyframes vSpark { 0% { transform:translate(0,0) scale(.4); opacity:0; } 10% { opacity:1; } 80% { opacity:.3; } 100% { transform:translate(var(--sx), var(--sy)) scale(.2); opacity:0; filter:blur(1px); } }

/* Reactive eye colors (state-based) */
body.boost-active .dp-hero .eye { fill:#c4f3ff !important; filter:drop-shadow(0 0 6px rgba(143,232,255,.85)); }
body.villain-defeated .dp-hero .eye { fill:#9fe8ff !important; filter:drop-shadow(0 0 10px rgba(143,232,255,.95)); }
body.anim-paused .dp-hero .eye { filter:none; opacity:.65; }

/* Villain irregular blink (override base) */
.dp-villain .v-eye { animation:eyeBlinkJitter 6.2s linear infinite; }
@keyframes eyeBlinkJitter { 0%,46%,54%,100% { transform:scaleY(1); } 50% { transform:scaleY(.1); } 72% { transform:scaleY(.55); } 73% { transform:scaleY(1); } }

/* Tooltip base styles (will be enhanced later) */
.dp-tooltip { position:absolute; background:#0d1f2c; color:#dff6ff; padding:6px 10px; font-size:.65rem; line-height:1.3; border:1px solid #58b2f5; border-radius:6px; pointer-events:none; z-index:999; opacity:0; transform:translateY(-4px); transition:opacity .25s ease, transform .25s ease; max-width:200px; box-shadow:0 4px 14px -4px rgba(0,0,0,.55),0 0 0 1px rgba(88,178,245,0.45); }
.dp-tooltip[data-visible="true"] { opacity:1; transform:translateY(-8px); }
@media (prefers-reduced-motion: reduce){ .dp-tooltip { transition:none; } }

/* Hint text */
.hero-hint { font-size:.75rem; letter-spacing:.6px; text-transform:uppercase; opacity:.7; margin-top:12px; }
.hero-subclaim { font-size:.85rem; margin-top:14px; max-width:640px; margin-left:auto; margin-right:auto; line-height:1.5; font-weight:500; color:#cfeeff; letter-spacing:.4px; }
.hero-primary-cta-wrapper { margin-top:18px; display:flex; justify-content:center; }
.hero-primary-cta { background:linear-gradient(135deg,#58b2f5,#7acbff 45%,#8c58f5); color:#08202c; font-weight:700; border:none; padding:14px 30px; font-size:.8rem; letter-spacing:.8px; text-transform:uppercase; border-radius:28px; cursor:pointer; position:relative; box-shadow:0 6px 22px -6px rgba(0,0,0,.65),0 0 0 1px rgba(143,232,255,.55),0 0 18px -4px rgba(143,232,255,.45); transition:transform .35s, box-shadow .4s, filter .35s; }
.hero-primary-cta:hover { transform:translateY(-3px); box-shadow:0 12px 30px -6px rgba(0,0,0,.7),0 0 0 1px rgba(143,232,255,.8),0 0 26px -4px rgba(143,232,255,.6); }
.hero-primary-cta:active { transform:translateY(0) scale(.95); }
.hero-primary-cta:focus-visible { outline:3px solid #ffffff; outline-offset:3px; }
/* Reduce prominence of secondary controls vs primary CTA */
.hero-controls .hero-ctrl { opacity:.8; font-weight:500; text-transform:none; letter-spacing:.4px; }
.hero-controls .hero-ctrl:hover { opacity:1; }
@media (max-width:720px){ .hero-subclaim { font-size:.72rem; } .hero-primary-cta { font-size:.7rem; padding:12px 22px; } }

@media (max-width:900px){
    .hero-characters { padding:0 3%; }
    .char-wrapper { width:120px; }
}
@media (max-width:600px){
    .hero-characters { justify-content:space-around; }
    .char-wrapper { width:95px; }
    .hero-hint { font-size:.62rem; }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
    .dp-hero, .dp-villain, .core-pulse, .v-eye, .cape { animation:none !important; }
    .char-wrapper { opacity:1; transform:none; animation:none; }
}

:root {
    --primary-color: #3498db; /* Azul vibrante */
    --secondary-color: #2c3e50; /* Azul oscuro casi negro */
    --accent-color: #e74c3c; /* Rojo para énfasis */
    --text-color: #333;
    --light-text-color: #ecf0f1;
    --background-light: #f4f7f6;
    --background-dark: #23303e; /* Un poco más claro que secondary para contraste */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-dark: rgba(0, 0, 0, 0.3);
    --panel-bg: #ffffff;
    --panel-border: #d9e2ec;
    --code-glow: rgba(52,152,219,0.35);
}

/* Dark theme */
html.dark {
    --text-color: #e2e8f0;
    --background-light: #101922;
    --background-dark: #0d141b;
    --panel-bg: #182736;
    --panel-border: #274055;
    --shadow-light: rgba(0,0,0,0.4);
    --shadow-dark: rgba(0,0,0,0.6);
}
html.dark body {
    background: var(--background-light);
}
html.dark header { background: linear-gradient(135deg,#0f1f2b,#182c3a); }
html.dark .feature-item { background: var(--panel-bg); box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
html.dark table { background: var(--panel-bg); }
html.dark footer { background: #0f1f2b; }
html.dark .donations { background:#1d3242; }
html.dark #comparison { background: #0f1f2b; }
html.dark #vision-and-support { background:#0f1f2b; }
html.dark .tour-panel { background: var(--panel-bg); }
/* --- Tour Overlay (Repaired) --- */
.tour-overlay { position:fixed; inset:0; display:flex; align-items:flex-start; justify-content:center; padding:90px 24px 40px; background:rgba(8,18,26,0.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:10000; opacity:0; pointer-events:none; transition:opacity .35s ease; }
.tour-overlay.active { opacity:1; pointer-events:auto; }
.tour-panel { width: min(560px,100%); background:linear-gradient(145deg,rgba(18,40,55,0.92),rgba(14,30,42,0.92)); border:1px solid rgba(88,178,245,0.45); box-shadow:0 18px 48px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(88,178,245,0.3); border-radius:18px; padding:28px 32px 30px; position:relative; animation:panelPop .55s cubic-bezier(.25,.9,.35,1.15); color:#d8f2ff; }
@keyframes panelPop { 0% { transform:translateY(16px) scale(.92); opacity:0; } 55% { transform:translateY(-6px) scale(1.02); opacity:1; } 100% { transform:translateY(0) scale(1); } }
.tour-panel h3 { font-size:1.1rem; margin:0 0 8px; letter-spacing:.8px; background:linear-gradient(90deg,#9fe8ff,#58b2f5); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tour-panel p { font-size:.9rem; line-height:1.5; margin:0 0 18px; opacity:.9; }
.tour-actions { display:flex; gap:10px; justify-content:flex-end; }
.tour-actions button { background:rgba(20,54,72,0.7); color:#d8f2ff; border:1px solid rgba(88,178,245,0.5); padding:8px 16px; font-size:.72rem; text-transform:uppercase; letter-spacing:.8px; font-weight:600; border-radius:8px; cursor:pointer; transition:background .3s, box-shadow .3s, transform .25s; position:relative; }
.tour-actions button.secondary { background:rgba(14,34,46,0.55); }
.tour-actions button:hover { background:rgba(34,94,128,0.75); box-shadow:0 0 0 1px #58b2f5,0 0 14px -3px #58b2f5; }
.tour-actions button:active { transform:scale(.92); }
.tour-actions button:focus-visible { outline:3px solid #58b2f5; outline-offset:2px; }
.dp-tour-highlight { position:relative; z-index:9999; box-shadow:0 0 0 3px rgba(143,232,255,0.85),0 0 0 6px rgba(143,232,255,0.3),0 8px 28px -6px rgba(0,0,0,0.6); border-radius:10px; transition:box-shadow .4s ease; }
@media (max-width:680px){ .tour-panel { padding:24px 20px 26px; } .tour-panel h3 { font-size:1rem; } .tour-panel p { font-size:.82rem; } .tour-actions button { font-size:.6rem; padding:7px 12px; } .tour-overlay { padding:70px 18px 30px; } }
@media (prefers-reduced-motion: reduce){ .tour-panel { animation:none; } }

html.dark .video-placeholder { background:#142433; border-color:#246699; }

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-light);
    overflow-x: hidden; /* Prevenir scroll horizontal */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Language Switcher */
.language-switcher {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
}

.lang-btn {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--light-text-color);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 8px 12px;
    margin-left: 5px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9em;
    transition: background-color 0.3s, border-color 0.3s;
}

.lang-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
}

.lang-btn.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: bold;
}

/* Header */
header {
    background-color: var(--secondary-color);
    color: var(--light-text-color);
    padding: 60px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px var(--shadow-dark);
}

header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(52, 152, 219, 0.2) 0%, rgba(44, 62, 80, 0) 70%);
    animation: rotate 20s linear infinite;
    pointer-events: none; /* no bloquear clics */
}

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

header .logo {
    width: 120px;
    margin-bottom: 25px;
    filter: drop-shadow(0 0 8px var(--primary-color));
}

header h1 {
    font-size: 3.5em;
    margin-bottom: 15px;
    color: var(--primary-color);
    text-shadow: 3px 3px 6px var(--shadow-dark);
    letter-spacing: 1px;
}

header .tagline {
    font-size: 1.4em;
    margin-bottom: 40px;
    font-weight: 300;
    color: #e9f2f8; /* stronger contrast on dark header */
}

.btn-primary {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--light-text-color);
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 6px 12px var(--shadow-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 10; /* sobre overlay decorativo */
}

.btn-primary:hover {
    background-color: #2980b9;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 16px var(--shadow-dark);
}

/* Hero Video Section */
#hero-video {
    background-color: var(--background-dark);
    padding: 80px 0;
    text-align: center;
    color: var(--light-text-color);
}

/* Enhanced hero animated container */
.video-placeholder {
    position:relative;
    background:radial-gradient(circle at 50% 42%,#1a3142 0%,#12222e 55%,#0c181f 100%);
    height:460px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    border-radius:26px;
    font-size:1.55em;
    padding:40px 48px;
    line-height:1.4;
    box-shadow:0 22px 55px -18px rgba(0,0,0,0.65),0 8px 22px -6px rgba(0,0,0,0.55), inset 0 0 28px -4px rgba(88,178,245,0.35);
    border:1px solid rgba(88,178,245,0.45);
    overflow:hidden;
    backdrop-filter:blur(2px);
}
.video-placeholder::before, .video-placeholder::after { content:""; position:absolute; inset:0; pointer-events:none; }
/* animated border gradient sweep */
.video-placeholder::before { border-radius:inherit; padding:2px; background:linear-gradient(120deg,rgba(88,178,245,0.85),rgba(88,178,245,0) 28%,rgba(88,178,245,0) 72%,rgba(88,178,245,0.85)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:heroBorder 8s linear infinite; opacity:.65; }
/* subtle noise + inner vignette */
.video-placeholder::after { background:
    radial-gradient(circle at 50% 50%, rgba(88,178,245,0.18), rgba(88,178,245,0) 65%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 4px);
    mix-blend-mode:overlay; opacity:.35; }
@keyframes heroBorder { to { transform:rotate(360deg); } }
html.dark .video-placeholder { background:radial-gradient(circle at 50% 42%,#14232e 0%,#0e1b24 55%,#081117 100%); }

.video-placeholder p {
    margin: 15px 0;
    max-width: 800px;
    font-weight: 300;
}

/* Sections */
section {
    padding: 80px 0;
    text-align: center;
}

/* Animación opt-in: si JS carga añade .fade-in, sino el contenido permanece visible */
.fade-in {
    /* opacity: 0; */ /* Removed to ensure content is visible by default */
    /* transform: translateY(30px); */ /* Removed to ensure content is visible by default */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.section-alt {
    background-color: var(--background-light);
}

h2 {
    font-size: 3em;
    color: #1a2a36; /* Darker heading for contrast */
    margin-bottom: 50px;
    position: relative;
    display: inline-block;
    font-weight: 700;
}

h2::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15px;
    width: 100px;
    height: 5px;
    background-color: var(--primary-color);
    border-radius: 3px;
}

/* Feature Grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.feature-item {
    background-color: #ffffff;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 10px 25px var(--shadow-light);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    text-align: left;
    border-top: 5px solid var(--primary-color);
}

.feature-item:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 15px 35px var(--shadow-dark);
}

.feature-item h3 {
    color: #0c1a23; /* Max dark for contrast */
    font-size: 1.75em;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
    font-weight: 600;
}

.feature-item h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

.feature-item p {
    color: #23272a; /* Increased contrast */
    font-size: 1.05em;
    line-height: 1.7;
}

/* Comparison Table */
#comparison {
    background-color: var(--background-dark);
    color: var(--light-text-color);
}

#comparison h2 {
    color: var(--light-text-color);
}

#comparison .subtitle {
    font-size: 1.2em;
    /* Strengthen subtitle color for contrast on dark background */
    color: #f0f4f7;
    margin-bottom: 40px;
    font-weight: 300;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 40px;
    background-color: #fff;
    box-shadow: 0 10px 25px var(--shadow-dark);
    border-radius: 15px;
    overflow: hidden;
}

table th, table td {
    padding: 18px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

table th {
    background-color: #2579b8; /* Slightly darker primary for contrast */
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1em;
    letter-spacing: 0.5px;
}

table th:first-child {
    border-top-left-radius: 15px;
}

table th:last-child {
    border-top-right-radius: 15px;
}

table td {
    color: #000000 !important; /* Max contrast */
    background-color:#ffffff !important;
    font-size: 1.05em;
    font-weight: 500;
}

table tr:nth-child(even) {
    /* Slightly darker alternate row for improved contrast with text */
    background-color: #f2f5f7;
}
table span[data-i18n-key="tableRowPrivacyCloud"],
table span[data-i18n-key="tableRowLocalAICloud"] {
    color:#15232d; /* Ensure strong contrast for inline spans */
}

table tr:hover {
    background-color: #dbeff7; /* Keep readable contrast */
}

table .highlight {
    background-color: #c4e2f1;
    color: #0f2735;
    font-weight: bold;
    box-shadow: inset 3px 0 0 var(--primary-color);
}
html.dark table .highlight {
    background-color: #1a3a4e;
    color: #ffffff;
}

/* Accessibility helpers */
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); border:0; white-space:nowrap; }
*:focus-visible { outline: 3px solid var(--primary-color); outline-offset:2px; }
.skip-link { position:absolute; top:-40px; left:0; background:#000; color:#fff; padding:8px 14px; z-index:1000; border-radius:0 0 6px 0; text-decoration:none; font-size:0.95em; }
.skip-link:focus { top:0; }

/* Vision and Support Section */
#vision-and-support {
    background-color: var(--background-dark);
    color: var(--light-text-color);
    padding: 80px 0;
}

#vision-and-support h2 {
    color: var(--light-text-color);
}

.vision-text {
    font-size: 1.15em;
    line-height: 1.75;
    margin-bottom: 30px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
    color: #e6eef3; /* Slightly brighter for contrast */
}

.donations {
    background-color: #34495e;
    padding: 30px;
    border-radius: 15px;
    margin-top: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 8px 20px var(--shadow-dark);
    border: 1px solid var(--primary-color);
}

/* Enhanced donations redesign */
/* Refined enhanced donations block */
.donations.enhanced { max-width:1080px; border:1px solid rgba(88,178,245,0.35); background:linear-gradient(150deg,#162a38 0%,#0d1c28 60%,#0a141c 100%); position:relative; overflow:hidden; padding:46px 48px 40px; border-radius:18px; box-shadow:0 18px 45px -20px rgba(0,0,0,0.65),0 4px 18px -4px rgba(0,0,0,0.4); }
.donations.enhanced::before, .donations.enhanced::after { content:""; position:absolute; width:340px; height:340px; background:radial-gradient(circle at center,rgba(88,178,245,0.22),rgba(88,178,245,0) 70%); filter:blur(4px); opacity:.7; pointer-events:none; transition:transform 10s linear; }
.donations.enhanced::before { top:-120px; left:-100px; }
.donations.enhanced::after { bottom:-140px; right:-120px; }
.donations-header { margin-bottom:28px; text-align:center; }
.donations-header h3 { margin:0 0 12px; font-size:2.05em; letter-spacing:.6px; background:linear-gradient(90deg,#58b2f5,#7acbff 35%,#a4e4ff); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 6px rgba(0,0,0,0.35); }
.donations-sub { font-size:1.02em; opacity:.88; max-width:760px; line-height:1.55; margin:0 auto; font-weight:300; }
.donations-grid { display:grid; gap:30px; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); }
.donation-item { background:rgba(255,255,255,0.045); padding:22px 22px 20px; border:1px solid rgba(255,255,255,0.08); border-radius:16px; position:relative; overflow:hidden; backdrop-filter:blur(5px); transition:border-color .35s, transform .35s, background .4s; }
.donation-item::before { content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(88,178,245,0.18),rgba(88,178,245,0) 65%); opacity:0; transition:opacity .45s; }
.donation-item:hover { transform:translateY(-6px); border-color:rgba(88,178,245,0.65); background:rgba(255,255,255,0.065); }
.donation-item:hover::before { opacity:1; }
.donation-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.donation-meta .chain { font-weight:600; font-size:.92em; letter-spacing:.55px; color:#b1e4ff; text-transform:uppercase; }
.donation-address { display:flex; align-items:center; gap:10px; flex-wrap:wrap; word-break:break-all; position:relative; }
.donation-address code { background:#0c1a23; color:#e9f6ff; padding:8px 12px; border-radius:8px; font-size:.82em; letter-spacing:.55px; box-shadow:0 0 0 1px rgba(255,255,255,0.04),0 4px 12px -2px rgba(0,0,0,0.55); line-height:1.3; }
.copy-btn { background:#193242; color:#d7f0ff; font-size:.72em; border:1px solid #2c5e7a; padding:8px 14px; border-radius:8px; cursor:pointer; letter-spacing:.55px; font-weight:600; text-transform:uppercase; transition:background .35s,border-color .35s,color .35s,transform .25s, box-shadow .35s; position:relative; display:inline-flex; gap:6px; align-items:center; }
.copy-btn::after { content:""; width:8px; height:8px; background:#58b2f5; border-radius:50%; box-shadow:0 0 0 4px rgba(88,178,245,0.25); opacity:0; transform:scale(.3); transition:opacity .45s, transform .45s; }
.copy-btn:hover { background:#25526a; border-color:#58b2f5; color:#fff; box-shadow:0 4px 16px -4px rgba(88,178,245,0.45); }
.copy-btn:active { transform:scale(.9); }
.copy-btn.copied { background:#27804f; border-color:#37b066; color:#fff; box-shadow:0 0 0 1px #37b066,0 0 0 6px rgba(55,176,102,0.35),0 0 14px -2px #37b066; }
.copy-btn.copied::after { opacity:1; transform:scale(1); background:#37b066; box-shadow:0 0 0 4px rgba(55,176,102,0.35); }
.copy-btn:focus-visible { outline:3px solid #58b2f5; outline-offset:2px; }
.donations-feedback { margin-top:22px; font-size:.9em; min-height:1.25em; color:#8fd4ff; font-weight:500; letter-spacing:.35px; text-align:center; }
html.dark .donations.enhanced { background:linear-gradient(145deg,#0d1b25,#09131b 55%,#060c11); }
html.dark .donation-item { background:rgba(255,255,255,0.035); }
html.dark .donation-address code { background:#08141c; }

/* Responsive Design */
@media (max-width: 992px) {
    header h1 {
        font-size: 3em;
    }
    header .tagline {
        font-size: 1.2em;
    }
    h2 {
        font-size: 2.5em;
    }
    .video-placeholder {
        height: 350px;
        font-size: 1.4em;
    }
    .feature-item {
        padding: 30px;
    }
    .feature-item h3 {
        font-size: 1.6em;
    }
    table th, table td {
        padding: 15px;
        font-size: 0.9em;
    }
    #call-to-action p {
        font-size: 1.3em;
    }
    .vision-text {
        font-size: 1.1em;
    }
    .donations h3 {
        font-size: 1.4em;
    }
    .donations p {
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    header {
        padding: 40px 0;
    }
    header h1 {
        font-size: 2.5em;
    }
    header .tagline {
        font-size: 1em;
    }
    h2 {
        font-size: 2em;
        margin-bottom: 40px;
    }
    h2::after {
        bottom: -10px;
        width: 80px;
        height: 4px;
    }
    .video-placeholder {
        height: 280px;
        font-size: 1.2em;
    }
    .feature-grid {
        grid-template-columns: 1fr;
    }
    .feature-item {
        padding: 25px;
    }
    .feature-item h3 {
        font-size: 1.4em;
    }
    table {
        font-size: 0.8em;
    }
    table th, table td {
        padding: 12px;
    }
    #call-to-action p {
        font-size: 1.1em;
    }
    #scrollToTopBtn {
        padding: 12px 15px;
        font-size: 1.2em;
        bottom: 20px;
        right: 20px;
    }
    .language-switcher {
        top: 10px;
        right: 10px;
    }
    .lang-btn {
        padding: 6px 10px;
        font-size: 0.8em;
    }
    .donations {
        padding: 20px;
    }
    .donations h3 {
        font-size: 1.2em;
    }
    .donations p {
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 2em;
    }
    header .tagline {
        font-size: 0.9em;
    }
    .btn-primary {
        padding: 12px 25px;
        font-size: 0.9em;
    }
    h2 {
        font-size: 1.8em;
    }
    .video-placeholder {
        height: 200px;
        font-size: 1em;
    }
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    table thead, table tbody, table th, table td, table tr {
        display: block;
    }
    table th {
        text-align: center;
    }
    table td {
        background-color: #1f6fa8; /* Slightly darker primary for contrast */
        color: #ffffff;
        position: relative;
    }
    table td::before {
        content: attr(data-label);
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }
    #call-to-action p {
        font-size: 1em;
    }
}

/* Contrast explicit overrides */
h2[data-i18n-key="callToActionHeading"] { color:#0b2536; text-shadow:0 2px 4px rgba(0,0,0,0.35); }
html.dark h2[data-i18n-key="callToActionHeading"] { color:#d9f2ff; text-shadow:0 2px 4px rgba(0,0,0,0.6); }
#call-to-action .btn-primary[data-i18n-key="downloadBtn"] { background:#0d5fa3; box-shadow:0 0 0 1px #0d5fa3,0 6px 14px -4px rgba(0,0,0,0.55); }
#call-to-action .btn-primary[data-i18n-key="downloadBtn"]:hover { background:#0b4e87; }

/* Hero empowered enhanced aura */
.dp-hero.hero-empowered .core-pulse { animation-duration:1.4s; filter:drop-shadow(0 0 16px rgba(160,240,255,.9)) saturate(1.25); }
.dp-hero.hero-empowered { filter:drop-shadow(0 0 20px rgba(120,210,255,.55)); }
.dp-hero.hero-empowered .eye { fill:#c8f7ff !important; }

/* Villain defeat ooze (extra grotesque layer) */
.villain-fragments::after { content:""; position:absolute; left:50%; top:48%; width:8px; height:8px; background:radial-gradient(circle,#751515,#2b0606 70%); border-radius:50%; opacity:0; transform:translate(-50%, -50%) scale(.4); pointer-events:none; }
body.villain-defeated .villain-fragments::after { animation: oozeDrip 2.4s ease-out forwards .3s; }
@keyframes oozeDrip { 0% { opacity:0; transform:translate(-50%,-50%) scale(.4); filter:blur(0); } 15% { opacity:1; } 60% { transform:translate(-50%,40px) scale(1); opacity:.85; filter:blur(.5px); } 85% { opacity:.35; } 100% { transform:translate(-50%,60px) scale(1.1); opacity:0; filter:blur(2px); } }
#features.section-alt { background-color:#ffffff; }
#features.section-alt .feature-item { background-color:#ffffff; }
h2[data-i18n-key="whyUnbeatableHeading"] { color:#081219; }
td[data-i18n-key="tableRowChatBot"],
td[data-i18n-key="tableRowProjects"],
td[data-i18n-key="tableRowValidation"] { color:#0b1a22; }
/* Strengthen left feature column */
table tbody tr td:first-child { font-weight:600; color:#041017; }

/* Grotesque villain enhancements */
.dp-villain .villain-cracks path { stroke-dasharray:28; stroke-dashoffset:28; animation:crackReveal 5s ease forwards; }
@keyframes crackReveal { 0% { stroke-dashoffset:28; opacity:0; } 25% { opacity:.4; } 100% { stroke-dashoffset:0; opacity:.75; } }
.dp-villain .villain-slime .slime { stroke:#4d0f0f; stroke-width:0.8; fill:rgba(120,25,25,0.9); filter:drop-shadow(0 0 4px rgba(120,25,25,0.6)); transform-origin:50% 0; animation:slimeDrip 6.5s ease-in-out infinite; }
.dp-villain .villain-slime .slime:nth-child(2){ animation-duration:7.4s; animation-delay:1.4s; }
@keyframes slimeDrip { 0%,100% { transform:translateY(0) scaleY(1); opacity:.9; } 40% { transform:translateY(6px) scaleY(1.15); opacity:.75; } 70% { transform:translateY(10px) scaleY(1.25); opacity:.4; } }