/* Five clean background-only directions. Content, calculator and mascot stay identical. */
body.hero-backdrop-five .hero {
  position:relative;
  isolation:isolate;
  min-height:650px;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(190,255,220,.07),inset 0 -110px 150px rgba(0,20,12,.22);
}

body.hero-backdrop-five .hero::before,
body.hero-backdrop-five .hero::after {
  position:absolute;
  z-index:0;
  display:block;
  content:'';
  pointer-events:none;
}

/* 01 — Neon trace: one continuous line, with restrained glow and no grid. */
body.backdrop-neon .hero {
  background:
    radial-gradient(ellipse 58% 120% at 91% 48%,rgba(26,211,123,.22),transparent 68%),
    radial-gradient(ellipse 54% 70% at 18% 104%,rgba(0,133,72,.18),transparent 72%),
    linear-gradient(118deg,#021c14 0%,#043d2b 50%,#075b3d 100%);
}
body.backdrop-neon .hero::before {
  inset:-12% -8% -18% -8%;
  border:0;
  background:
    linear-gradient(153deg,transparent 0 62.1%,rgba(147,255,197,.16) 62.2%,rgba(76,255,163,.96) 62.48%,rgba(36,217,127,.38) 62.72%,transparent 63.1%),
    linear-gradient(153deg,transparent 0 68.3%,rgba(80,239,153,.16) 68.55%,transparent 69.3%);
  filter:drop-shadow(0 0 7px rgba(66,255,160,.72)) drop-shadow(0 0 22px rgba(28,222,128,.38));
}
body.backdrop-neon .hero::after {
  top:-28%;
  right:-11%;
  width:62%;
  height:118%;
  border:0;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(70,255,161,.16),rgba(11,116,67,.05) 43%,transparent 70%);
  filter:blur(14px);
}

/* 02 — Light spots: layered studio lights with soft transitions. */
body.backdrop-spots .hero {
  background:
    radial-gradient(circle at 12% 18%,rgba(111,240,171,.16),transparent 24%),
    radial-gradient(circle at 52% 88%,rgba(39,210,126,.20),transparent 31%),
    radial-gradient(circle at 88% 22%,rgba(130,255,188,.22),transparent 27%),
    radial-gradient(circle at 93% 91%,rgba(0,112,62,.28),transparent 34%),
    linear-gradient(128deg,#03271c 0%,#07543a 52%,#06412d 100%);
}
body.backdrop-spots .hero::before {
  inset:-22% -18%;
  border:0;
  background:
    radial-gradient(ellipse 17% 36% at 33% 38%,rgba(222,255,237,.105),transparent 70%),
    radial-gradient(ellipse 19% 48% at 77% 57%,rgba(92,255,169,.12),transparent 72%),
    radial-gradient(ellipse 13% 31% at 57% 19%,rgba(255,209,83,.038),transparent 72%);
  filter:blur(26px);
}
body.backdrop-spots .hero::after {
  right:-14%;
  bottom:-34%;
  width:78%;
  height:74%;
  border:0;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(122,246,180,.09),rgba(1,55,33,.03));
  box-shadow:0 -30px 95px rgba(81,236,153,.08);
  transform:rotate(-7deg);
}

/* 03 — Studio depth: the quiet, premium option I would choose for trust. */
body.backdrop-studio .hero {
  background:
    radial-gradient(ellipse 72% 88% at 51% -12%,rgba(105,220,158,.18),transparent 66%),
    radial-gradient(ellipse 64% 52% at 78% 112%,rgba(8,185,97,.20),transparent 70%),
    linear-gradient(132deg,#021d15 0%,#073828 48%,#064f35 100%);
  box-shadow:inset 0 0 180px rgba(0,11,7,.28),inset 0 -120px 170px rgba(0,27,16,.28);
}
body.backdrop-studio .hero::before {
  inset:0;
  border:0;
  background:linear-gradient(116deg,rgba(255,255,255,.025),transparent 27% 73%,rgba(81,238,154,.055));
}
body.backdrop-studio .hero::after {
  left:24%;
  right:-12%;
  bottom:-27%;
  height:43%;
  border:0;
  border-radius:50% 50% 0 0 / 38% 42% 0 0;
  background:radial-gradient(ellipse at 63% 0,rgba(82,231,151,.15),rgba(3,70,42,.04) 55%,transparent 72%);
  filter:blur(4px);
}

/* 04 — Architectural glass: clear planes support the financial-terminal metaphor. */
body.backdrop-prism .hero {
  background:
    radial-gradient(ellipse 48% 100% at 90% 48%,rgba(44,209,129,.23),transparent 69%),
    linear-gradient(118deg,#021e15 0%,#06442f 52%,#075b3d 100%);
}
body.backdrop-prism .hero::before {
  top:-26%;
  right:-12%;
  bottom:-25%;
  width:70%;
  border:0;
  background:
    linear-gradient(132deg,rgba(231,255,242,.13),rgba(226,255,239,.018) 34%,rgba(0,40,24,.21) 68%),
    linear-gradient(104deg,transparent 0 32%,rgba(255,255,255,.075) 32.2% 32.55%,transparent 32.8%),
    linear-gradient(104deg,transparent 0 59%,rgba(124,255,185,.07) 59.2% 59.55%,transparent 59.8%);
  clip-path:polygon(18% 0,100% 0,100% 100%,0 86%);
}
body.backdrop-prism .hero::after {
  top:-20%;
  right:24%;
  width:9%;
  height:132%;
  border:0;
  background:linear-gradient(101deg,transparent,rgba(245,184,28,.055) 46%,rgba(231,255,241,.09) 51%,transparent 58%);
  filter:blur(7px);
  transform:rotate(7deg);
}

/* 05 — Forward flow: broad bands create direction without becoming a road illustration. */
body.backdrop-flow .hero {
  background:
    radial-gradient(ellipse 52% 93% at 91% 38%,rgba(60,225,139,.21),transparent 69%),
    linear-gradient(123deg,#021f16 0%,#06442f 49%,#08714a 100%);
}
body.backdrop-flow .hero::before {
  inset:-18% -10% -26% -18%;
  border:0;
  background:
    linear-gradient(157deg,transparent 0 46%,rgba(222,255,237,.09) 46.3% 53%,transparent 53.3%),
    linear-gradient(157deg,transparent 0 61%,rgba(61,225,139,.11) 61.2% 68%,transparent 68.3%);
  transform:skewX(-4deg);
}
body.backdrop-flow .hero::after {
  left:-10%;
  right:-12%;
  bottom:-32%;
  height:57%;
  border:0;
  border-radius:50% 50% 0 0 / 55% 45% 0 0;
  background:linear-gradient(180deg,rgba(99,239,164,.15),rgba(0,55,32,.025));
  box-shadow:0 -20px 74px rgba(75,228,145,.09),inset 0 24px 62px rgba(0,39,23,.13);
  transform:rotate(-3deg);
}

/* 06 — Emerald tech showroom: luminous horizon and floating neon arcs, without a grid. */
body.backdrop-showroom .hero {
  background:
    radial-gradient(ellipse 66% 82% at 73% 47%,rgba(20,224,129,.34),transparent 62%),
    radial-gradient(ellipse 38% 54% at 95% 16%,rgba(79,255,167,.20),transparent 68%),
    linear-gradient(124deg,#011c14 0%,#03432e 48%,#08724a 100%);
  box-shadow:inset 0 1px 0 rgba(189,255,220,.08),inset 0 -140px 190px rgba(0,21,12,.30);
}
body.backdrop-showroom .hero::before {
  inset:-26% -13% -18% 34%;
  border:0;
  background:
    radial-gradient(ellipse 57% 74% at 76% 47%,transparent 0 49.4%,rgba(164,255,207,.13) 49.7%,rgba(60,255,157,.82) 50.05%,rgba(24,194,113,.20) 50.45%,transparent 50.9%),
    radial-gradient(ellipse 78% 92% at 76% 47%,transparent 0 49.2%,rgba(144,255,197,.10) 49.55%,rgba(53,246,148,.56) 49.9%,rgba(15,163,92,.14) 50.35%,transparent 50.8%),
    radial-gradient(ellipse 98% 110% at 76% 47%,transparent 0 49.3%,rgba(77,241,151,.11) 49.65%,rgba(37,224,132,.37) 49.95%,transparent 50.55%);
  filter:drop-shadow(0 0 7px rgba(67,255,163,.60)) drop-shadow(0 0 24px rgba(15,211,116,.32));
  opacity:.88;
}
body.backdrop-showroom .hero::after {
  left:-10%;
  right:-10%;
  bottom:-24%;
  height:43%;
  border:0;
  border-radius:50% 50% 0 0 / 13% 13% 0 0;
  background:
    radial-gradient(ellipse 44% 35% at 74% 2%,rgba(131,255,192,.28),transparent 71%),
    linear-gradient(180deg,rgba(154,255,202,.72) 0,rgba(48,240,147,.30) 1px,rgba(6,112,67,.15) 3px,rgba(2,42,25,.05) 54%,rgba(0,22,13,.20) 100%);
  box-shadow:0 -2px 9px rgba(131,255,192,.78),0 -10px 46px rgba(26,224,128,.38),inset 0 30px 65px rgba(70,237,149,.08);
  transform:perspective(700px) rotateX(55deg) scaleX(1.15);
  transform-origin:50% 0;
}

body.hero-backdrop-five .copy,
body.hero-backdrop-five .calculator-shell { position:relative;z-index:5; }
body.hero-backdrop-five .mascot-five-stage { z-index:9; }

@media (prefers-reduced-motion:no-preference) {
  body.backdrop-neon .hero::before { animation:backdrop-neon-breathe 5.8s ease-in-out infinite; }
  body.backdrop-spots .hero::before { animation:backdrop-spots-drift 10s ease-in-out infinite alternate; }
  body.backdrop-prism .hero::after { animation:backdrop-prism-glint 7s ease-in-out infinite alternate; }
  body.backdrop-showroom .hero::before { animation:backdrop-showroom-glow 6.2s ease-in-out infinite alternate; }
}

@keyframes backdrop-neon-breathe {
  0%,100% { opacity:.74;filter:drop-shadow(0 0 6px rgba(66,255,160,.55)) drop-shadow(0 0 18px rgba(28,222,128,.28)); }
  50% { opacity:1;filter:drop-shadow(0 0 9px rgba(66,255,160,.82)) drop-shadow(0 0 30px rgba(28,222,128,.46)); }
}
@keyframes backdrop-spots-drift { from{transform:translate3d(-7px,5px,0)} to{transform:translate3d(18px,-12px,0)} }
@keyframes backdrop-prism-glint { from{opacity:.46;transform:translateX(-10px) rotate(7deg)} to{opacity:.9;transform:translateX(18px) rotate(7deg)} }
@keyframes backdrop-showroom-glow {
  from { opacity:.72;filter:drop-shadow(0 0 6px rgba(67,255,163,.48)) drop-shadow(0 0 20px rgba(15,211,116,.24)); }
  to { opacity:1;filter:drop-shadow(0 0 10px rgba(99,255,177,.78)) drop-shadow(0 0 34px rgba(15,211,116,.42)); }
}