/* ═════════════════════════════════════════════════════════════════════
   ZOMBIE / HORROR LAYER — couche d'horreur immersive sur le thème zombie
   Photos en transparence, silhouettes, sang, corbeaux, toiles d'araignée
   ═════════════════════════════════════════════════════════════════════ */

/* Image d'asile abandonné en fond du body, très faible opacité */
html[data-theme="zombie"] body {
  background-image:
    radial-gradient(900px 600px at 18% -8%, rgba(180, 10, 20, 0.20), transparent 70%),
    radial-gradient(800px 700px at 90% 12%, rgba(111, 181, 63, 0.15), transparent 65%),
    radial-gradient(600px 500px at 50% 110%, rgba(180, 10, 20, 0.18), transparent 70%),
    url("https://images.unsplash.com/photo-1509248961158-e54f6934749c?w=1800&q=70&auto=format&fit=crop"),
    linear-gradient(180deg, #04060a 0%, #0a0d08 60%, #06080a 100%) !important;
  background-size: auto, auto, auto, cover, auto !important;
  background-position: center, center, center, center, center !important;
  background-blend-mode: normal, normal, normal, multiply, normal !important;
  background-attachment: fixed, fixed, fixed, fixed, fixed !important;
}

/* Couche supplémentaire : forêt brumeuse en parallax très faible opacité */
html[data-theme="zombie"] main { position: relative; }
html[data-theme="zombie"] main::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    url("https://images.unsplash.com/photo-1505144808419-1957a94ca61e?w=1800&q=70&auto=format&fit=crop") center/cover;
  opacity: .08;
  mix-blend-mode: screen;
  filter: hue-rotate(-30deg) saturate(.4) blur(1px);
}

/* SILHOUETTES DE ZOMBIES qui se baladent sur les bords */
html[data-theme="zombie"] .zombie-horde {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
html[data-theme="zombie"] .zombie-horde::before,
html[data-theme="zombie"] .zombie-horde::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 200px;
  height: 320px;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  opacity: .35;
  filter: brightness(.3) contrast(1.5);
}
html[data-theme="zombie"] .zombie-horde::before {
  left: -50px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 320'><g fill='%23000' opacity='.92'><ellipse cx='100' cy='40' rx='28' ry='34'/><circle cx='90' cy='38' r='3' fill='%23b40a14'/><circle cx='110' cy='38' r='3' fill='%23b40a14'/><path d='M75 75 q-15 30 -15 70 q0 60 5 110 q-30 30 -28 65 l40 0 l8 -50 l5 50 l25 0 l5 -50 l8 50 l40 0 q2 -35 -28 -65 q5 -50 5 -110 q0 -40 -15 -70 q-30 -10 -55 0 z'/><path d='M70 85 q-30 -10 -50 30 q-10 30 0 60 q5 5 15 0 q-5 -25 5 -55 q15 -25 30 -35 z' opacity='.7'/><path d='M130 85 q30 -10 50 30 q10 30 0 60 q-5 5 -15 0 q5 -25 -5 -55 q-15 -25 -30 -35 z' opacity='.7'/><path d='M85 90 l15 50 l15 -50' fill='%23b40a14' opacity='.4'/></g></svg>");
  animation: zomShamble 30s ease-in-out infinite;
}
html[data-theme="zombie"] .zombie-horde::after {
  right: -50px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 320'><g fill='%23000' opacity='.92'><ellipse cx='100' cy='45' rx='30' ry='35'/><path d='M70 80 q-10 50 0 110 q-25 25 -28 70 l38 0 l5 -55 l8 55 l20 0 l8 -55 l5 55 l38 0 q-3 -45 -28 -70 q10 -60 0 -110 q-30 -10 -66 0 z'/><path d='M75 90 q-40 0 -55 50 q-5 30 5 50 q5 5 12 -2 q-8 -25 5 -50 q15 -30 35 -40 z' opacity='.6'/><path d='M85 95 l15 45 l15 -45' fill='%236fb53f' opacity='.35'/></g></svg>");
  animation: zomShamble 32s ease-in-out -8s infinite reverse;
}
@keyframes zomShamble {
  0%   { transform: translateY(50px) rotate(2deg); opacity: 0; }
  10%  { opacity: .35; }
  50%  { transform: translateY(0) rotate(-2deg); }
  90%  { opacity: .35; }
  100% { transform: translateY(50px) rotate(2deg); opacity: 0; }
}

/* MAINS DE ZOMBIE qui sortent du sol */
html[data-theme="zombie"] .zombie-horde > .zhand {
  position: absolute;
  bottom: -50px;
  width: 80px;
  height: 120px;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 120'><g fill='%23000'><path d='M30 120 L30 70 q0 -8 -5 -10 l-5 -2 q-3 -1 -3 -5 l0 -20 q0 -3 3 -3 q3 0 3 3 l0 18 q3 0 3 -2 l0 -28 q0 -3 3 -3 q3 0 3 3 l0 28 q3 0 3 -2 l0 -32 q0 -3 3 -3 q3 0 3 3 l0 32 q3 0 3 -2 l0 -25 q0 -3 3 -3 q3 0 3 3 l0 25 q3 0 3 -1 l0 -18 q0 -3 3 -3 q3 0 3 3 l0 22 q-1 6 -5 8 l-5 2 q-5 2 -5 10 L50 120 Z'/></g></svg>");
  filter: brightness(.4);
  opacity: 0;
  animation: zHandRise 12s ease-out infinite;
}
.zombie-horde > .zhand:nth-child(1) { left: 8%;  animation-delay: 0s; }
.zombie-horde > .zhand:nth-child(2) { left: 32%; animation-delay: 4s; }
.zombie-horde > .zhand:nth-child(3) { right: 25%; animation-delay: 8s; }
.zombie-horde > .zhand:nth-child(4) { right: 5%;  animation-delay: 6s; }
@keyframes zHandRise {
  0%, 100% { transform: translateY(80px); opacity: 0; }
  20%      { transform: translateY(20px); opacity: .55; }
  60%      { transform: translateY(-10px); opacity: .55; }
  80%      { transform: translateY(20px); opacity: .35; }
}

/* CORBEAU silhouette qui passe en travers de l'écran */
html[data-theme="zombie"] .zombie-horde > .zcrow {
  position: absolute;
  top: 15%;
  left: -150px;
  width: 80px;
  height: 50px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 50'><path d='M5 30 q5 -8 12 -10 l8 -2 q4 -1 6 -3 l4 -4 q3 -2 6 -2 l8 0 q4 0 6 2 l3 3 q5 -3 12 -2 l8 2 q-3 4 -10 6 l-8 2 q-2 1 -3 3 l-2 8 q0 4 -3 5 l-8 2 q-4 1 -8 -2 l-3 -3 q-5 3 -12 2 l-8 -2 q-3 -1 -3 -4 z' fill='%23000'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  animation: zCrowFly 25s linear infinite;
  animation-delay: 5s;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.6));
}
@keyframes zCrowFly {
  0%   { left: -150px; top: 20%; transform: rotate(-5deg); opacity: 0; }
  10%  { opacity: .8; }
  50%  { left: 50%; top: 12%; transform: rotate(2deg); }
  90%  { opacity: .8; }
  100% { left: 110%; top: 25%; transform: rotate(-3deg); opacity: 0; }
}

/* TOILES D'ARAIGNÉE dans les coins */
html[data-theme="zombie"] .zombie-cobwebs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
html[data-theme="zombie"] .zombie-cobwebs::before,
html[data-theme="zombie"] .zombie-cobwebs::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .25;
}
html[data-theme="zombie"] .zombie-cobwebs::before {
  top: 60px; left: -10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23d8e6c8' stroke-width='.8' opacity='.7'><path d='M0 0 L200 80 M0 0 L160 130 M0 0 L100 170 M0 0 L40 200'/><path d='M30 12 L20 35 L42 50 L18 75 L48 92 L20 120 L52 130'/><path d='M60 24 L40 50 L70 65 L42 90 L80 100 L48 130 L88 140'/><path d='M90 36 L60 65 L100 80 L62 105 L110 115 L70 145 L122 155'/></g></svg>");
}
html[data-theme="zombie"] .zombie-cobwebs::after {
  top: 60px; right: -10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23d8e6c8' stroke-width='.8' opacity='.7'><path d='M200 0 L0 80 M200 0 L40 130 M200 0 L100 170 M200 0 L160 200'/><path d='M170 12 L180 35 L158 50 L182 75 L152 92 L180 120 L148 130'/><path d='M140 24 L160 50 L130 65 L158 90 L120 100 L152 130 L112 140'/></g></svg>");
}

/* TACHES DE SANG sur les sections */
html[data-theme="zombie"] .section { position: relative; }
html[data-theme="zombie"] .section::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 180px;
  height: 180px;
  top: 5%;
  right: 3%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='%238b0000'><path d='M100 30 q10 25 30 35 q-15 5 -20 25 q-5 -20 -25 -10 q5 -25 -15 -25 q15 -10 30 -25 z' opacity='.85'/><circle cx='150' cy='80' r='12' opacity='.7'/><circle cx='40' cy='100' r='8' opacity='.6'/><circle cx='80' cy='130' r='5' opacity='.5'/><circle cx='160' cy='140' r='4' opacity='.5'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .55;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
html[data-theme="zombie"] .section:nth-of-type(even)::before {
  top: auto;
  bottom: 8%;
  right: auto;
  left: 4%;
  transform: scaleX(-1);
}

/* ŒIL ROUGE qui apparaît parfois dans un coin */
html[data-theme="zombie"] .zombie-eye {
  position: fixed;
  bottom: 30%;
  left: 2%;
  width: 50px;
  height: 30px;
  pointer-events: none;
  z-index: 9990;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 30'><ellipse cx='25' cy='15' rx='22' ry='10' fill='%23000'/><circle cx='25' cy='15' r='8' fill='%23b40a14'/><circle cx='25' cy='15' r='3' fill='%23000'/><circle cx='27' cy='13' r='1' fill='%23ffe6e6' opacity='.8'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  animation: zEyeBlink 18s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(180,10,20,.8));
}
@keyframes zEyeBlink {
  0%, 95%, 100% { opacity: 0; transform: scale(.8); }
  3%, 8%        { opacity: .9; transform: scale(1); }
  5%            { opacity: 0; transform: scale(.6); }
  85%           { left: 2%; }
  87%           { left: 92%; opacity: 0; }
  88%, 92%      { opacity: .85; left: 92%; }
  90%           { opacity: 0; }
}

/* GOUTTES DE SANG qui tombent à intervalles */
html[data-theme="zombie"] .zombie-drips {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9995;
  overflow: hidden;
}
html[data-theme="zombie"] .zombie-drips span {
  position: absolute;
  top: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, #8b0000 0%, #4a0000 100%);
  border-radius: 0 0 50% 50%;
  animation: zDrip 6s ease-in infinite;
  filter: drop-shadow(0 0 4px rgba(139,0,0,.8));
}
.zombie-drips span:nth-child(1) { left: 12%; animation-delay: 0s; }
.zombie-drips span:nth-child(2) { left: 28%; animation-delay: 1.5s; }
.zombie-drips span:nth-child(3) { left: 47%; animation-delay: 3s; }
.zombie-drips span:nth-child(4) { left: 65%; animation-delay: .8s; }
.zombie-drips span:nth-child(5) { left: 78%; animation-delay: 4s; }
.zombie-drips span:nth-child(6) { left: 91%; animation-delay: 2.2s; }
@keyframes zDrip {
  0%   { height: 0;    opacity: 1; }
  20%  { height: 80px; opacity: 1; }
  100% { height: 80px; opacity: 0; transform: translateY(110vh); }
}

/* HEARTBEAT subtil sur tout le viewport */
html[data-theme="zombie"] .zombie-heartbeat {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9994;
  box-shadow: inset 0 0 100px 30px rgba(139,0,0,0);
  animation: zHeartbeat 1.4s ease-in-out infinite;
}
@keyframes zHeartbeat {
  0%, 100% { box-shadow: inset 0 0 80px 20px rgba(139,0,0,.15); }
  15%      { box-shadow: inset 0 0 140px 50px rgba(139,0,0,.45); }
  30%      { box-shadow: inset 0 0 80px 20px rgba(139,0,0,.15); }
  45%      { box-shadow: inset 0 0 120px 40px rgba(139,0,0,.35); }
}

/* Sections semi-transparentes pour voir le fond d'horreur */
html[data-theme="zombie"] .section,
html[data-theme="zombie"] section {
  background-color: rgba(6, 8, 10, .7) !important;
  backdrop-filter: blur(2px);
}

/* Reduced motion : on cache les particules animées */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="zombie"] .zombie-horde,
  html[data-theme="zombie"] .zombie-cobwebs,
  html[data-theme="zombie"] .zombie-eye,
  html[data-theme="zombie"] .zombie-drips,
  html[data-theme="zombie"] .zombie-heartbeat,
  html[data-theme="zombie"] main::before {
    display: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   COULEURS QUI RESSORTENT — boost de contraste et lisibilité
   ═════════════════════════════════════════════════════════════════════ */

/* Titres : gros glow vert toxique + ombre rouge sang */
html[data-theme="zombie"] h1,
html[data-theme="zombie"] h2,
html[data-theme="zombie"] .section__title,
html[data-theme="zombie"] .hero__title {
  color: #C8FF8C !important;
  text-shadow:
    0 0 8px rgba(155, 255, 110, .65),
    0 0 22px rgba(155, 255, 110, .35),
    2px 2px 0 rgba(180, 10, 20, .55) !important;
}
html[data-theme="zombie"] em,
html[data-theme="zombie"] .section__title em,
html[data-theme="zombie"] .hero__title em {
  color: #FF3344 !important;
  text-shadow:
    0 0 10px rgba(255, 51, 68, .8),
    0 0 24px rgba(180, 10, 20, .55),
    -2px 0 rgba(155, 255, 110, .25) !important;
}

/* Eyebrow / sous-titres / labels — vert acide vif */
html[data-theme="zombie"] .section__label,
html[data-theme="zombie"] .section__eyebrow,
html[data-theme="zombie"] .eyebrow,
html[data-theme="zombie"] .kicker,
html[data-theme="zombie"] .ctheme__label {
  color: #06080a !important;
  background: linear-gradient(90deg, #6FB53F 0%, #9BFF6E 50%, #6FB53F 100%) !important;
  border: 1px solid #9BFF6E !important;
  text-shadow: none !important;
  font-weight: 800 !important;
  box-shadow: 0 0 14px rgba(155, 255, 110, .5);
}

/* Sous-titres / paragraphes : meilleur contraste */
html[data-theme="zombie"] .section__sub,
html[data-theme="zombie"] .section__lead,
html[data-theme="zombie"] .hero__sub,
html[data-theme="zombie"] .hero__lead,
html[data-theme="zombie"] p,
html[data-theme="zombie"] li {
  color: #E8F5DD !important;
}

/* Numéros 01/02/03 des étapes */
html[data-theme="zombie"] .step__num,
html[data-theme="zombie"] .step-num,
html[data-theme="zombie"] [class*="step"][class*="num"] {
  color: #FF3344 !important;
  text-shadow: 0 0 14px rgba(255, 51, 68, .8), 0 0 28px rgba(180, 10, 20, .5) !important;
  -webkit-text-stroke: 1px rgba(155, 255, 110, .35);
}

/* Cards / boxes : bordure + glow vert toxique */
html[data-theme="zombie"] .step,
html[data-theme="zombie"] .testimonial,
html[data-theme="zombie"] .plan,
html[data-theme="zombie"] .faq__item,
html[data-theme="zombie"] .ctheme-card {
  border-color: rgba(155, 255, 110, .35) !important;
  box-shadow:
    0 0 0 1px rgba(180, 10, 20, .15),
    0 12px 30px rgba(0, 0, 0, .55),
    0 0 22px rgba(155, 255, 110, .12) !important;
}
html[data-theme="zombie"] .step:hover,
html[data-theme="zombie"] .testimonial:hover,
html[data-theme="zombie"] .plan:hover,
html[data-theme="zombie"] .ctheme-card:hover {
  border-color: #9BFF6E !important;
  box-shadow:
    0 0 0 1px #9BFF6E,
    0 14px 36px rgba(0, 0, 0, .6),
    0 0 30px rgba(155, 255, 110, .35) !important;
}

/* Icônes des cards (les petites pastilles bleu/violet sur le screenshot) */
html[data-theme="zombie"] .step__icon,
html[data-theme="zombie"] .step-icon,
html[data-theme="zombie"] .icon-pill,
html[data-theme="zombie"] [class*="step"][class*="icon"] {
  background: linear-gradient(135deg, #1a0a0a 0%, #2a0a0a 100%) !important;
  border: 1px solid #b40a14 !important;
  color: #FF3344 !important;
  box-shadow: 0 0 14px rgba(180, 10, 20, .5), inset 0 0 8px rgba(155, 255, 110, .15) !important;
}
html[data-theme="zombie"] .step__icon svg,
html[data-theme="zombie"] .step-icon svg,
html[data-theme="zombie"] [class*="step"][class*="icon"] svg {
  color: #FF3344 !important;
  filter: drop-shadow(0 0 6px rgba(255, 51, 68, .8));
}

/* Liens en italique (comme "votre site est en ligne") */
html[data-theme="zombie"] strong,
html[data-theme="zombie"] b {
  color: #FFB84D !important;
  text-shadow: 0 0 8px rgba(255, 184, 77, .5);
}

/* ═════════════════════════════════════════════════════════════════════
   SOCIAL RAIL — couleurs adaptées au thème zombie/horreur
   ═════════════════════════════════════════════════════════════════════ */

/* On override TOUS les boutons sociaux : passage au sang/toxique */
html[data-theme="zombie"] .social-rail__link {
  background: rgba(20, 6, 6, .85) !important;
  border-color: rgba(180, 10, 20, .55) !important;
  color: #FF3344 !important;
  box-shadow:
    0 0 0 1px rgba(155, 255, 110, .15),
    0 6px 18px rgba(180, 10, 20, .35) !important;
}
html[data-theme="zombie"] .social-rail__link svg {
  filter: drop-shadow(0 0 6px rgba(255, 51, 68, .7));
}

/* Override des dégradés brand au survol — Facebook, Instagram, X */
html[data-theme="zombie"] .social-rail__link--fb::before {
  background: linear-gradient(135deg, #8b0000 0%, #b40a14 100%) !important;
}
html[data-theme="zombie"] .social-rail__link--ig::before {
  background: linear-gradient(135deg, #6FB53F 0%, #b40a14 50%, #FF3344 100%) !important;
}
html[data-theme="zombie"] .social-rail__link--tw::before {
  background: linear-gradient(135deg, #1a0a0a 0%, #4a0000 100%) !important;
}
html[data-theme="zombie"] .social-rail__link:hover {
  color: #C8FF8C !important;
  border-color: #9BFF6E !important;
  transform: translateX(3px) scale(1.1);
  box-shadow:
    0 0 0 1px #9BFF6E,
    0 8px 24px rgba(155, 255, 110, .4),
    0 0 30px rgba(180, 10, 20, .4) !important;
}
html[data-theme="zombie"] .social-rail__link--fb:hover { box-shadow: 0 0 0 1px #FF3344, 0 8px 24px rgba(180, 10, 20, .65) !important; }
html[data-theme="zombie"] .social-rail__link--ig:hover { box-shadow: 0 0 0 1px #9BFF6E, 0 8px 24px rgba(180, 10, 20, .55), 0 0 22px rgba(155, 255, 110, .4) !important; }
html[data-theme="zombie"] .social-rail__link--tw:hover { box-shadow: 0 0 0 1px #C8FF8C, 0 8px 24px rgba(0, 0, 0, .8), 0 0 22px rgba(155, 255, 110, .35) !important; }

/* Lignes décoratives ::before/::after du rail = filets sang/toxique */
html[data-theme="zombie"] .social-rail::before,
html[data-theme="zombie"] .social-rail::after {
  background: linear-gradient(to bottom, transparent, #b40a14 50%, transparent) !important;
  filter: drop-shadow(0 0 4px rgba(180, 10, 20, .6));
}

/* Footer socials dans le footer principal (mêmes couleurs) */
html[data-theme="zombie"] .footer__social-link {
  background: rgba(20, 6, 6, .85) !important;
  border: 1px solid rgba(180, 10, 20, .55) !important;
  color: #FF3344 !important;
}
html[data-theme="zombie"] .footer__social-link:hover {
  background: linear-gradient(135deg, #b40a14, #6FB53F) !important;
  color: #06080a !important;
  border-color: #9BFF6E !important;
  box-shadow: 0 0 0 1px #9BFF6E, 0 8px 22px rgba(155, 255, 110, .35) !important;
}

/* Boutons primaires : passage en rouge sang avec glow vert */
html[data-theme="zombie"] .btn--primary,
html[data-theme="zombie"] .btn-primary {
  background: linear-gradient(135deg, #b40a14 0%, #8b0000 100%) !important;
  color: #C8FF8C !important;
  border: 1px solid #FF3344 !important;
  text-shadow: 0 0 8px rgba(255, 51, 68, .6);
  box-shadow: 0 0 0 1px rgba(155, 255, 110, .25), 0 8px 24px rgba(180, 10, 20, .55) !important;
}
html[data-theme="zombie"] .btn--primary:hover,
html[data-theme="zombie"] .btn-primary:hover {
  background: linear-gradient(135deg, #FF3344 0%, #b40a14 100%) !important;
  box-shadow: 0 0 0 1px #9BFF6E, 0 12px 32px rgba(180, 10, 20, .7), 0 0 22px rgba(155, 255, 110, .3) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   BADGE HERO — adapté au thème zombie (vert toxique + rouge sang)
   ───────────────────────────────────────────────────────────────────── */
html[data-theme="zombie"] .hero__badge {
  background: linear-gradient(135deg, rgba(10, 13, 8, .92) 0%, rgba(26, 10, 10, .92) 100%) !important;
  border: 1px solid #b40a14 !important;
  color: #C8FF8C !important;
  box-shadow:
    0 0 0 1px rgba(155, 255, 110, .25),
    0 0 22px rgba(155, 255, 110, .35),
    0 0 14px rgba(180, 10, 20, .45),
    inset 0 0 12px rgba(180, 10, 20, .25) !important;
  text-shadow: 0 0 6px rgba(155, 255, 110, .55), 0 0 2px rgba(180, 10, 20, .8);
  font-family: 'Creepster', 'Nosifer', system-ui, sans-serif;
  letter-spacing: .06em;
  position: relative;
  animation: zombieBadgeFlicker 4.5s ease-in-out infinite;
}
html[data-theme="zombie"] .hero__badge::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 100px;
  background: radial-gradient(60% 100% at 50% 50%, rgba(180, 10, 20, .35), transparent 70%);
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
}
html[data-theme="zombie"] .hero__badge em,
html[data-theme="zombie"] .hero__badge strong {
  color: #FF3344 !important;
  text-shadow: 0 0 10px rgba(255, 51, 68, .7);
  font-style: normal;
}
html[data-theme="zombie"] .hero__badge-dot {
  background: #9BFF6E !important;
  box-shadow: 0 0 10px #9BFF6E, 0 0 18px rgba(155, 255, 110, .6) !important;
  animation: zombieDotPulse 1.6s ease-in-out infinite !important;
}
html[data-theme="zombie"] .hero__badge-extra {
  color: #FF6677 !important;
  text-shadow: 0 0 8px rgba(255, 51, 68, .55);
  opacity: .92;
}
@keyframes zombieBadgeFlicker {
  0%, 100%   { opacity: 1; filter: none; }
  47%        { opacity: 1; }
  48%        { opacity: .55; filter: hue-rotate(-12deg); }
  49%        { opacity: 1; }
  82%        { opacity: 1; }
  83%        { opacity: .65; filter: brightness(1.15); }
  84%        { opacity: 1; }
}
@keyframes zombieDotPulse {
  0%, 100% { background: #9BFF6E; box-shadow: 0 0 10px #9BFF6E, 0 0 18px rgba(155, 255, 110, .6); transform: scale(1); }
  45%      { background: #FF3344; box-shadow: 0 0 14px #FF3344, 0 0 24px rgba(255, 51, 68, .7); transform: scale(1.15); }
  50%      { background: #b40a14; box-shadow: 0 0 10px #b40a14, 0 0 20px rgba(180, 10, 20, .7); transform: scale(1.05); }
  55%      { background: #FF3344; box-shadow: 0 0 14px #FF3344, 0 0 24px rgba(255, 51, 68, .7); transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="zombie"] .hero__badge,
  html[data-theme="zombie"] .hero__badge-dot { animation: none !important; }
}