:root {
  --proposal-deep: #021e15;
  --proposal-mid: #064b34;
  --proposal-bright: #0a7650;
  --proposal-green: #15df7c;
  --proposal-gold: #f7b916;
}

body.hero-proposal .hero {
  position: relative;
  isolation: isolate;
  min-height: 650px;
  overflow: hidden;
  background: var(--proposal-deep);
  box-shadow: inset 0 1px rgba(211,255,231,.08), inset 0 -120px 160px rgba(0,18,10,.26);
}

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

body.hero-proposal .quiet-layout { position: relative; z-index: 4; }
body.hero-proposal .copy { position: relative; z-index: 7; }
body.hero-proposal .calculator-shell,
body.hero-proposal .calculator { position: relative; z-index: 12; }
body.hero-proposal .calculator-shell { transform: translateX(76px); }

body.hero-proposal .mascot-calculator-pointer {
  z-index: 14;
  left: calc(50% - 12px);
  bottom: 6px;
  width: 210px;
}
body.hero-proposal .mascot-calculator-pointer::after { display: none; }
body.hero-proposal .mascot-calculator-pointer img {
  width: 100%;
  filter: drop-shadow(0 2px 1px rgba(0,27,18,.34)) drop-shadow(0 18px 14px rgba(0,17,10,.24));
}

/* Shared lower-benefit content; each direction changes the container architecture. */
body.hero-proposal .proposal-benefits {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  width: 100%;
  max-width: none;
  margin: 0;
}
body.hero-proposal .proposal-benefits > span {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
}
body.hero-proposal .proposal-benefits span::before,
body.hero-proposal .proposal-benefits span::after {
  display: none;
  content: none;
}
body.hero-proposal .proposal-benefits > span > span {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  animation: none;
}
body.hero-proposal .proposal-benefits i {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  font-style: normal;
  font-weight: 850;
}
body.hero-proposal .proposal-benefits b,
body.hero-proposal .proposal-benefits small { display: block; }
body.hero-proposal .proposal-benefits b { margin: 0 0 4px; font-size: 16px; }
body.hero-proposal .proposal-benefits small { font-size: 12px; line-height: 1.35; }

/* Shared time card reset: four alternatives replace the old moving shine. */
body.hero-proposal .time-focus { position: relative; overflow: visible; padding-left: 50px; }
body.hero-proposal .time-effect {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
}

/* 01 — Neon contour: flowing light traces, not straight bands. */
body.proposal-neon .hero {
  background:
    radial-gradient(ellipse 56% 105% at 91% 46%,rgba(37,237,141,.29),transparent 67%),
    radial-gradient(ellipse 60% 72% at 15% 110%,rgba(0,132,72,.24),transparent 72%),
    linear-gradient(121deg,#011c14 0%,#043d2b 48%,#08704a 100%);
}
body.proposal-neon .hero::before {
  inset: -30% -8% -36% 31%;
  border: 2px solid rgba(93,255,172,.70);
  border-right-width: 5px;
  border-radius: 47% 53% 54% 46%;
  box-shadow: 0 0 7px rgba(77,255,162,.70),0 0 25px rgba(32,224,132,.36),inset 0 0 28px rgba(31,219,127,.09);
  transform: rotate(-14deg) skewX(-8deg);
  opacity: .68;
}
body.proposal-neon .hero::after {
  inset: -20% 17% -44% 47%;
  border: 1px solid rgba(157,255,203,.36);
  border-radius: 50%;
  filter: drop-shadow(0 0 8px rgba(59,247,151,.42));
  transform: rotate(18deg);
}
body.proposal-neon .proposal-benefits {
  gap: 0;
  padding: 22px max(58px,calc((100% - 1252px)/2));
  border-top: 1px solid rgba(130,255,190,.18);
  background: linear-gradient(92deg,#021f16,#063c2a 52%,#052b20);
  color: rgba(231,255,242,.66);
}
body.proposal-neon .proposal-benefits > span { min-height: 74px; padding: 10px 34px; border-right: 1px solid rgba(158,255,204,.16); }
body.proposal-neon .proposal-benefits > span:last-child { border-right: 0; }
body.proposal-neon .proposal-benefits i { width: 38px; height: 38px; margin-right: 15px; border: 1px solid rgba(81,255,164,.26); border-radius: 50%; color: #72f4ad; box-shadow: 0 0 18px rgba(35,225,133,.14); }
body.proposal-neon .proposal-benefits b { color: #f3fff8; }
/* Effect 1: a real clock hand makes one calm sweep. */
body.proposal-neon .time-effect { border: 2px solid rgba(78,246,157,.64); border-radius: 50%; }
body.proposal-neon .time-effect::before { position:absolute;left:10px;top:4px;width:2px;height:8px;border-radius:2px;background:#8dffc1;content:'';transform-origin:1px 8px;animation:proposal-clock 6s cubic-bezier(.3,.7,.3,1) infinite; }
body.proposal-neon .time-effect::after { position:absolute;left:9px;top:9px;width:4px;height:4px;border-radius:50%;background:#f7b916;box-shadow:0 0 10px rgba(247,185,22,.65);content:''; }

/* 02 — Aurora depth: soft light volumes and controlled banking glow. */
body.proposal-aurora .hero {
  background:
    radial-gradient(circle at 84% 17%,rgba(136,255,194,.26),transparent 25%),
    radial-gradient(circle at 56% 96%,rgba(35,221,130,.25),transparent 31%),
    radial-gradient(circle at 8% 35%,rgba(31,158,98,.18),transparent 28%),
    linear-gradient(132deg,#021f16 0%,#07533a 55%,#06402e 100%);
}
body.proposal-aurora .hero::before {
  inset: -35% -12%;
  background:
    radial-gradient(ellipse 18% 46% at 41% 48%,rgba(213,255,233,.12),transparent 72%),
    radial-gradient(ellipse 21% 54% at 79% 53%,rgba(111,255,179,.17),transparent 72%);
  filter: blur(23px);
  animation: proposal-aurora-drift 11s ease-in-out infinite alternate;
}
body.proposal-aurora .hero::after {
  right: -16%; bottom: -38%; width: 82%; height: 72%; border-radius: 50%;
  background: radial-gradient(ellipse at 48% 4%,rgba(132,255,191,.15),rgba(3,70,43,.03) 58%,transparent 72%);
}
body.proposal-aurora .proposal-benefits {
  gap: 14px;
  padding: 26px max(58px,calc((100% - 1252px)/2));
  background: linear-gradient(180deg,#f5fbf8,#e9f5ef);
}
body.proposal-aurora .proposal-benefits > span { min-height: 88px; padding: 18px 22px; border: 1px solid rgba(18,114,70,.13); border-radius: 22px; background: rgba(255,255,255,.88); box-shadow: 0 13px 30px rgba(4,53,31,.08); }
body.proposal-aurora .proposal-benefits i { width: 42px; height: 42px; margin-right: 16px; border-radius: 14px; background: linear-gradient(145deg,#dff8ea,#c8efd9); color:#008d4d; }
body.proposal-aurora .proposal-benefits > span:nth-child(2) i { background:linear-gradient(145deg,#fff2bd,#f6dfa0);color:#966400; }
body.proposal-aurora .proposal-benefits b { color:#073c28; }
body.proposal-aurora .proposal-benefits small { color:#72837a; }
/* Effect 2: a soft local aura breathes behind the number; the card does not scale. */
body.proposal-aurora .time-effect { border-radius:50%;background:radial-gradient(circle,rgba(247,185,22,.78) 0 10%,rgba(38,225,135,.34) 12% 32%,transparent 68%);animation:proposal-aura 4.8s ease-in-out infinite; }

/* 03 — Liquid ribbons: layered broad curves create premium material depth. */
body.proposal-ribbons .hero {
  background:
    radial-gradient(ellipse 54% 88% at 92% 40%,rgba(83,233,153,.23),transparent 69%),
    linear-gradient(125deg,#021e15 0%,#06432f 51%,#08724c 100%);
}
body.proposal-ribbons .hero::before {
  left: -16%; right: -11%; bottom: -42%; height: 72%;
  border: 42px solid rgba(121,255,183,.105); border-radius: 50%;
  box-shadow: 0 -19px 58px rgba(76,233,148,.12),inset 0 29px 74px rgba(0,40,23,.20);
  transform: rotate(-7deg);
}
body.proposal-ribbons .hero::after {
  left: 26%; right: -19%; bottom: -47%; height: 72%;
  border: 20px solid rgba(225,255,239,.095); border-radius: 50%;
  filter: blur(.2px); transform: rotate(5deg);
}
body.proposal-ribbons .proposal-benefits {
  gap: 1px;
  padding: 0 max(58px,calc((100% - 1252px)/2));
  background: #eef7f2;
}
body.proposal-ribbons .proposal-benefits > span { min-height: 104px; padding: 22px 28px; background:linear-gradient(145deg,#fff,#f0f8f4); }
body.proposal-ribbons .proposal-benefits > span::after { position:absolute;right:-1px;top:25%;width:1px;height:50%;background:#cfe2d7;content:''; }
body.proposal-ribbons .proposal-benefits > span:last-child::after { display:none; }
body.proposal-ribbons .proposal-benefits i { align-self:stretch;width:33px;margin-right:17px;border-radius:18px;background:#0a3c29;color:#72efab;writing-mode:vertical-rl; }
body.proposal-ribbons .proposal-benefits b { color:#062f20; }
body.proposal-ribbons .proposal-benefits small { color:#74857b; }
/* Effect 3: three small timing bars count in sequence. */
body.proposal-ribbons .time-effect { display:flex;align-items:flex-end;justify-content:center;gap:3px; }
body.proposal-ribbons .time-effect::before,
body.proposal-ribbons .time-effect::after,
body.proposal-ribbons .time-effect span { width:4px;border-radius:4px;background:#24e086;content:'';animation:proposal-bars 3.6s ease-in-out infinite; }
body.proposal-ribbons .time-effect::before { height:8px; }
body.proposal-ribbons .time-effect span { height:16px;animation-delay:.16s; }
body.proposal-ribbons .time-effect::after { height:11px;animation-delay:.32s; }

/* 04 — Luminous horizon: directional depth and a restrained gold accent. */
body.proposal-horizon .hero {
  background:
    radial-gradient(ellipse 70% 100% at 80% 50%,rgba(42,225,135,.30),transparent 64%),
    linear-gradient(122deg,#011d14 0%,#044832 52%,#08724a 100%);
}
body.proposal-horizon .hero::before {
  left: -8%; right: -8%; bottom: 18%; height: 2px;
  background:linear-gradient(90deg,transparent 4%,rgba(123,255,187,.20) 26%,rgba(191,255,220,.92) 65%,rgba(69,247,157,.38) 82%,transparent 98%);
  box-shadow:0 0 7px rgba(109,255,180,.62),0 0 30px rgba(38,223,134,.33);
  transform:rotate(-8deg);
}
body.proposal-horizon .hero::after {
  left:-11%;right:-9%;bottom:-37%;height:64%;border-radius:50%;
  background:linear-gradient(180deg,rgba(116,246,177,.17),rgba(1,46,28,.04) 56%,transparent);
  box-shadow:inset 0 31px 76px rgba(0,37,22,.19);transform:rotate(-3deg);
}
body.proposal-horizon .proposal-benefits {
  gap: 0;
  padding: 18px max(58px,calc((100% - 1252px)/2));
  background:linear-gradient(90deg,#f8fcfa,#edf7f2 52%,#f8fbf9);
  box-shadow:inset 0 1px #fff,0 -15px 50px rgba(0,29,17,.13);
}
body.proposal-horizon .proposal-benefits > span { min-height:78px;padding:12px 28px;border-left:3px solid #15c873; }
body.proposal-horizon .proposal-benefits > span:nth-child(2) { border-left-color:var(--proposal-gold); }
body.proposal-horizon .proposal-benefits i { width:34px;height:34px;margin-right:14px;border-radius:50%;background:#063725;color:#fff; }
body.proposal-horizon .proposal-benefits > span:nth-child(2) i { background:#f7b916;color:#513700; }
body.proposal-horizon .proposal-benefits b { color:#073521; }
body.proposal-horizon .proposal-benefits small { color:#718177; }
/* Effect 4: one short elevation/focus cycle, then a long pause. */
body.proposal-horizon .time-focus { animation:proposal-lift 7s ease-in-out infinite; }
body.proposal-horizon .time-effect { border-radius:50%;background:#0a3b29;box-shadow:inset 0 0 0 6px rgba(71,236,148,.18); }
body.proposal-horizon .time-effect::after { position:absolute;inset:7px;border-radius:50%;background:#f7b916;box-shadow:0 0 10px rgba(247,185,22,.45);content:''; }

@keyframes proposal-clock { 0%,15%{transform:rotate(0)} 52%,100%{transform:rotate(360deg)} }
@keyframes proposal-aura { 0%,100%{opacity:.56;filter:blur(0)} 45%{opacity:1;filter:blur(1px)} }
@keyframes proposal-bars { 0%,20%,100%{transform:scaleY(.55);opacity:.48} 42%{transform:scaleY(1);opacity:1} 64%{transform:scaleY(.72);opacity:.72} }
@keyframes proposal-lift { 0%,8%,20%,100%{transform:translateY(0);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)} 13%{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,18,10,.20)} }
@keyframes proposal-aurora-drift { from{transform:translate3d(-12px,8px,0)} to{transform:translate3d(20px,-11px,0)} }

@media (prefers-reduced-motion: reduce) {
  body.hero-proposal *,body.hero-proposal *::before,body.hero-proposal *::after { animation: none !important; }
}

@media (max-width:1180px) {
  body.hero-proposal .calculator-shell { transform:translateX(24px); }
  body.hero-proposal .mascot-calculator-pointer { left:calc(50% - 8px);width:205px; }
}
@media (max-width:980px) {
  body.hero-proposal .calculator-shell { transform:none; }
  body.hero-proposal .mascot-calculator-pointer { right:2%;left:auto;bottom:34px;width:235px;opacity:.18; }
  body.hero-proposal .proposal-benefits { grid-template-columns:1fr;padding:18px 24px; }
  body.hero-proposal .proposal-benefits > span { border-right:0; }
}
@media (max-width:580px) {
  body.hero-proposal .mascot-calculator-pointer { display:none; }
  body.hero-proposal .proposal-benefits { padding:14px 12px; }
}