:root {
  --bg-emerald: #00bf69;
  --bg-ink: #03271b;
  --bg-gold: #f4b51a;
}

/* These pages compare only the background. The composition remains identical. */
body.background-five {
  min-height: 100vh;
  background: var(--bg-ink);
}

body.background-five .hero {
  position: relative;
  min-height: 650px;
  isolation: isolate;
  overflow: hidden;
}

body.background-five .hero::before,
body.background-five .hero::after {
  position: absolute;
  z-index: 0;
  display: block;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  transform: none;
  content: '';
  pointer-events: none;
}

body.background-five .quiet-layout {
  position: relative;
}

body.background-five .mascot-five-stage {
  position: absolute;
}

/* 01. Light / Air — cool pearl surface with diagonal daylight. */
body.background-five.bg-light-air .hero {
  background:
    radial-gradient(ellipse 54% 105% at 98% 48%, rgba(0, 111, 60, .25), transparent 70%),
    linear-gradient(118deg, #f4fff8 0%, #d9f3e5 47%, #70ad87 100%);
  box-shadow: inset 0 -80px 125px rgba(0, 73, 39, .105), inset 0 1px 0 rgba(255,255,255,.78);
}
body.background-five.bg-light-air .hero::before {
  inset: -20% -9% -15% 28%;
  background:
    linear-gradient(151deg, transparent 0 35%, rgba(255,255,255,.54) 35.2% 43%, transparent 43.2%),
    linear-gradient(151deg, transparent 0 56%, rgba(37,168,101,.15) 56.2% 64%, transparent 64.2%);
  opacity: .82;
}
body.background-five.bg-light-air .hero::after {
  right: -8%;
  bottom: -24%;
  width: 78%;
  height: 54%;
  background: linear-gradient(180deg, rgba(244,255,249,.42), rgba(0,128,68,.17));
  clip-path: polygon(0 66%, 100% 4%, 100% 100%, 0 100%);
}

/* Clean deep emerald: no gray, no muddy middle tones. */
body.background-five.bg-deep-air .hero {
  background:
    radial-gradient(ellipse 52% 110% at 89% 43%, rgba(24,194,108,.20), transparent 69%),
    linear-gradient(118deg,#052f21 0%,#075438 48%,#073c29 100%);
  box-shadow:inset 0 -100px 145px rgba(0,24,14,.25),inset 0 1px 0 rgba(174,255,213,.08);
}
body.background-five.bg-deep-air .hero::before {
  inset:-24% -12% -22% -22%;
  background:
    linear-gradient(151deg,transparent 0 43%,rgba(231,255,241,.075) 43.2% 49.8%,transparent 50%),
    linear-gradient(151deg,transparent 0 58%,rgba(20,190,103,.10) 58.2% 65%,transparent 65.2%);
  opacity:.9;
}
body.background-five.bg-deep-air .hero::after {
  right:-8%;bottom:-24%;width:78%;height:54%;
  background:linear-gradient(180deg,rgba(57,204,127,.10),rgba(0,31,18,.20));
  clip-path:polygon(0 66%,100% 4%,100% 100%,0 100%);
}
body.background-five.bg-deep-air .copy h1 { color:#f8fffb; }
body.background-five.bg-deep-air .copy p,
body.background-five.bg-deep-air .text-link,
body.background-five.bg-deep-air .quiet-note { color:rgba(239,255,246,.76); }
body.background-five.bg-deep-air .eyebrow {
  border-color:rgba(117,235,171,.33);
  background:rgba(0,38,23,.40);
  color:#b5f2d0;
  box-shadow:0 12px 28px rgba(0,20,11,.16),inset 0 1px 0 rgba(255,255,255,.07);
}
body.background-five.bg-deep-air .trust-item {
  border-color:rgba(211,255,231,.18);
  background:rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 27px rgba(0,26,15,.10);
  backdrop-filter:blur(10px);
}
body.background-five.bg-deep-air .trust-item strong { color:#fff; }
body.background-five.bg-deep-air .trust-item small { color:rgba(235,255,244,.68); }
body.background-five.bg-deep-air .trust-item strong em { color:#31e58b; }
body.background-five.bg-deep-air .quiet-note i { background:rgba(65,225,139,.16);color:#a8f1c9; }
body.background-five.bg-deep-air .calculator { box-shadow:0 34px 90px rgba(0,18,10,.40),0 0 0 1px rgba(255,255,255,.25); }

/* 02. Light / Satin — warmer white with a soft layered landscape. */
body.background-five.bg-light-satin .hero {
  background:
    radial-gradient(ellipse 55% 110% at 84% 45%, rgba(238, 188, 59, .085), transparent 66%),
    linear-gradient(122deg, #ffffff 0%, #f5faf7 51%, #d1ebdd 100%);
  box-shadow: inset 0 -80px 125px rgba(7, 81, 47, .065);
}
body.background-five.bg-light-satin .hero::before {
  left: -7%;
  right: -8%;
  bottom: -17%;
  height: 47%;
  background: linear-gradient(178deg, rgba(255,255,255,.88) 4%, rgba(190,232,208,.56) 70%, rgba(83,190,137,.24));
  clip-path: polygon(0 61%, 19% 49%, 39% 58%, 60% 31%, 79% 41%, 100% 13%, 100% 100%, 0 100%);
}
body.background-five.bg-light-satin .hero::after {
  top: -31%;
  right: -11%;
  width: 63%;
  height: 122%;
  background: linear-gradient(142deg, transparent 21%, rgba(255,255,255,.55) 42%, rgba(46,185,112,.08) 55%, transparent 71%);
  filter: blur(10px);
}

/* 03. Dark / Velvet — expensive, quiet depth with fabric-like folds. */
body.background-five.bg-dark-velvet .hero {
  background:
    radial-gradient(ellipse 67% 92% at 93% 43%, rgba(50, 210, 128, .23), transparent 68%),
    linear-gradient(121deg, #021d14 0%, #043624 50%, #087349 100%);
  box-shadow: inset 0 0 150px rgba(0, 13, 8, .31), inset 0 -100px 130px rgba(0, 20, 12, .25);
}
body.background-five.bg-dark-velvet .hero::before {
  inset: -23% -13% -26% 22%;
  background:
    linear-gradient(147deg, transparent 0 39%, rgba(209,255,230,.10) 47%, transparent 58%),
    linear-gradient(147deg, transparent 0 62%, rgba(1,30,18,.28) 69%, transparent 78%);
  filter: blur(17px);
}
body.background-five.bg-dark-velvet .hero::after {
  right: -10%;
  bottom: -26%;
  width: 82%;
  height: 53%;
  background: linear-gradient(180deg, rgba(69,223,140,.13), rgba(0,31,18,.18));
  clip-path: polygon(0 72%, 100% 3%, 100% 100%, 0 100%);
}

/* 04. Dark / Glass — architectural glass planes behind the calculator. */
body.background-five.bg-dark-glass .hero {
  background:
    radial-gradient(ellipse 42% 92% at 87% 45%, rgba(76, 225, 147, .25), transparent 68%),
    linear-gradient(116deg, #011b12 0%, #053825 50%, #076a44 100%);
  box-shadow: inset 0 0 160px rgba(0, 10, 6, .38);
}
body.background-five.bg-dark-glass .hero::before {
  top: -22%;
  right: -10%;
  bottom: -23%;
  width: 63%;
  background:
    linear-gradient(137deg, rgba(232,255,241,.18), rgba(232,255,241,.025) 43%, rgba(0,35,21,.22) 73%),
    linear-gradient(105deg, transparent 0 45%, rgba(255,255,255,.11) 45.2% 45.5%, transparent 45.8%);
  clip-path: polygon(21% 0, 100% 0, 100% 100%, 0 84%);
}
body.background-five.bg-dark-glass .hero::after {
  top: 0;
  right: 30%;
  width: 22%;
  height: 100%;
  background: linear-gradient(101deg, transparent 8%, rgba(243,181,26,.055) 48%, transparent 82%);
  filter: blur(8px);
}

/* 05. Dark / Aurora — a restrained luminous ribbon, no rings and no grid. */
body.background-five.bg-dark-aurora .hero {
  background:
    radial-gradient(ellipse 60% 80% at 83% 36%, rgba(38, 213, 127, .25), transparent 69%),
    linear-gradient(123deg, #011a11 0%, #033624 48%, #066943 100%);
  box-shadow: inset 0 0 155px rgba(0, 10, 6, .34);
}
body.background-five.bg-dark-aurora .hero::before {
  left: 24%;
  right: -15%;
  bottom: -9%;
  height: 58%;
  background:
    linear-gradient(169deg, transparent 0 38%, rgba(111,255,176,.19) 48%, rgba(247,181,26,.055) 55%, transparent 70%);
  filter: blur(19px);
  transform: skewY(-5deg);
}
body.background-five.bg-dark-aurora .hero::after {
  inset: 0;
  background: linear-gradient(153deg, transparent 0 54%, rgba(230,255,240,.08) 54.2% 61%, transparent 61.2%);
}

/* Shared readable text treatment for both light scenes. */
body.background-five.bg-light-air .copy h1,
body.background-five.bg-light-satin .copy h1 { color: #062d1e; }
body.background-five.bg-light-air .copy p,
body.background-five.bg-light-air .text-link,
body.background-five.bg-light-air .quiet-note,
body.background-five.bg-light-satin .copy p,
body.background-five.bg-light-satin .text-link,
body.background-five.bg-light-satin .quiet-note { color: #587066; }
body.background-five.bg-light-air .eyebrow,
body.background-five.bg-light-satin .eyebrow {
  border-color: #bde8d0;
  background: rgba(255,255,255,.76);
  color: #008a4b;
}
body.background-five.bg-light-air .trust-item,
body.background-five.bg-light-satin .trust-item {
  border-color: #d5e7dd;
  background: rgba(255,255,255,.78);
}
body.background-five.bg-light-air .trust-item strong,
body.background-five.bg-light-satin .trust-item strong { color: #07351f; }
body.background-five.bg-light-air .trust-item small,
body.background-five.bg-light-satin .trust-item small { color: #71847a; }

/* Dark scenes keep the calculator bright and make surrounding information crisp. */
body.background-five.bg-dark-velvet .calculator,
body.background-five.bg-dark-glass .calculator,
body.background-five.bg-dark-aurora .calculator {
  box-shadow: 0 34px 90px rgba(0, 12, 7, .46), 0 0 0 1px rgba(255,255,255,.22);
}

body.background-five .mascot-five-stage img {
  filter: drop-shadow(0 14px 15px rgba(0,22,13,.22));
}