:root {
  --fm-green: #00bf69;
  --fm-dark: #03271b;
  --fm-gold: #f7b916;
}

.mascot-five {
  min-height: 100vh;
  background: var(--fm-dark);
}

.mascot-five .shell {
  width: 100%;
  margin: 0;
}

.mascot-five .topbar {
  position: relative;
  z-index: 30;
  width: min(1252px, calc(100% - 116px));
  height: 78px;
  margin: 0 auto;
  color: #fff;
}

.mascot-five .home-brand {
  display:flex;
  align-items:center;
  gap:9px;
  width:286px;
  flex:0 0 auto;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.mascot-five .home-brand__mark {
  display:block;
  width:75px;
  height:auto;
  flex:0 0 auto;
}
.mascot-five .home-brand__copy {
  display:flex;
  width:max-content;
  flex:0 0 auto;
  flex-direction:column;
  justify-content:center;
}
.mascot-five .home-brand__name {
  display:block;
  color:#fff;
  font-size:27px;
  font-weight:800;
  letter-spacing:-.055em;
  line-height:.98;
  white-space:nowrap;
}
.mascot-five .home-brand__money { color:#18b98a; }
.mascot-five .home-brand__suffix { color:#fff; }
.mascot-five .home-brand__tagline {
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  margin-top:7px;
  color:#fff;
  font-size:9px;
  font-weight:650;
  letter-spacing:0;
  line-height:1;
  white-space:nowrap;
}
.mascot-five .nav,
.mascot-five .phone { color: rgba(255,255,255,.80); }
.mascot-five .nav a,
.mascot-five .phone { transition: color .2s ease; }
.mascot-five .nav a:hover,
.mascot-five .phone:hover { color: #fff; }

.mascot-five .login,
.mascot-five .primary,
.mascot-five .calc-button { background: var(--fm-green); }

.mascot-five .login,
.mascot-five .primary,
.mascot-five .calc-button,
.mascot-five .trust-item,
.mascot-five .calculator { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }

.mascot-five .login:hover,
.mascot-five .primary:hover,
.mascot-five .calc-button:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(0,191,105,.27); }
.mascot-five .trust-item:hover { transform: translateY(-3px); }

.mascot-five .hero {
  min-height: 650px;
  border: 0;
  border-radius: 0;
  isolation: isolate;
  overflow: hidden;
}

.mascot-five .quiet-layout {
  position: relative;
  z-index: 5;
  display: grid;
  width: min(1320px, calc(100% - 48px));
  min-height: 650px;
  margin: 0 auto;
  padding: 32px 34px 36px;
  grid-template-columns: minmax(0, 600px) 390px;
  gap: 230px;
  align-items: center;
}

.mascot-five .copy { position: relative; z-index: 8; }
.mascot-five .copy h1 {
  max-width: 610px;
  margin-top: 24px;
  color: #f8fffb;
  font-size: clamp(50px,4.25vw,66px);
  text-wrap: balance;
}
.mascot-five .copy h1 span { color: #11df7c; }
body.proposal-aurora .mascot-five .copy h1 span { color: #fff; }
.mascot-five .copy p { max-width: 520px; color: rgba(241,255,248,.80); }
.mascot-five .text-link,
.mascot-five .quiet-note { color: rgba(244,255,249,.84); }

.mascot-five .eyebrow {
  padding: 9px 14px;
  border-color: rgba(151,255,201,.32);
  background: rgba(0,31,20,.46);
  color: #abf5cf;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,16,9,.16);
  backdrop-filter: blur(10px);
}
.mascot-five .eyebrow::before { background:#25e487; box-shadow:0 0 0 4px rgba(37,228,135,.13),0 0 15px rgba(37,228,135,.55); }

.mascot-five .trust-row { max-width: 590px; margin-top: 38px; }
.mascot-five .trust-item {
  border-color: rgba(218,255,235,.18);
  background: rgba(255,255,255,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(9px);
}
.mascot-five .trust-item strong { color:#fff; }
.mascot-five .trust-item small { color:rgba(239,255,246,.67); }
.mascot-five .quiet-note i { background:rgba(59,234,140,.16); color:#a0f2c7; }

.mascot-five .calculator {
  position: relative;
  z-index: 10;
  width: 390px;
  border-color: rgba(255,255,255,.74);
  background: rgba(255,255,255,.965);
  box-shadow: 0 34px 90px rgba(0,18,11,.36), 0 0 0 1px rgba(255,255,255,.25);
}

.mascot-five-stage {
  position: absolute;
  z-index: 9;
  left: calc(50% - 75px);
  bottom: 12px;
  width: 245px;
  pointer-events: none;
}
.mascot-five-stage::after {
  position: absolute;
  z-index: -1;
  left: 11%; right: 7%; bottom: -8px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,16,9,.43);
  filter: blur(11px);
  content: '';
}
.mascot-five-stage img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 18px rgba(0,18,10,.32));
}
.variant-green .mascot-five-stage { left:calc(50% - 82px); width:260px; }
.clean-feet .mascot-five-stage::after { display:none; }
.clean-feet .mascot-five-stage img { filter:drop-shadow(0 12px 13px rgba(5,84,48,.13)); }

.mascot-five .hero::before,
.mascot-five .hero::after { pointer-events:none; }

/* 1 — светлый банковский шёлк для зелёного персонажа. */
body.mascot-five.scene-pearl .hero {
  background:
    radial-gradient(ellipse 42% 88% at 92% 38%, rgba(47,192,117,.24), transparent 67%),
    linear-gradient(115deg,#f8fcfa 0%,#eef8f2 56%,#bfe7d0 100%);
}
body.mascot-five.scene-pearl .hero::before {
  position:absolute;z-index:0;inset:0;
  background:linear-gradient(153deg,transparent 0 55%,rgba(255,255,255,.48) 55.2% 66%,transparent 66.2%);
  content:'';
}
body.mascot-five.scene-pearl .hero::after {
  position:absolute;z-index:0;right:-8%;bottom:-12%;width:68%;height:38%;
  background:linear-gradient(176deg,transparent,rgba(0,169,88,.16));
  clip-path:polygon(0 55%,100% 0,100% 100%,0 100%);
  content:'';
}
body.mascot-five.scene-pearl .copy h1 { color:#062d1e; }
body.mascot-five.scene-pearl .copy p,body.mascot-five.scene-pearl .text-link,body.mascot-five.scene-pearl .quiet-note { color:#587066; }
body.mascot-five.scene-pearl .eyebrow { border-color:#bde8d0;background:rgba(255,255,255,.70);color:#008a4b; }
body.mascot-five.scene-pearl .trust-item { border-color:#d5e7dd;background:rgba(255,255,255,.72); }
body.mascot-five.scene-pearl .trust-item strong { color:#07351f; }
body.mascot-five.scene-pearl .trust-item small { color:#71847a; }

/* 2 — глубокий горизонт, максимально близкий к выбранному тёмному фону. */
body.mascot-five.scene-horizon .hero {
  background:
    radial-gradient(ellipse 53% 88% at 91% 42%,rgba(91,232,155,.26),transparent 68%),
    radial-gradient(ellipse 74% 42% at 74% 111%,rgba(18,188,100,.27),transparent 70%),
    linear-gradient(116deg,#022419 0%,#043f2b 50%,#08734a 100%);
  box-shadow:inset 0 28px 90px rgba(0,14,8,.16),inset 0 -100px 140px rgba(0,22,13,.25);
}
body.mascot-five.scene-horizon .hero::before { position:absolute;z-index:0;inset:0;background:linear-gradient(157deg,transparent 0 58%,rgba(214,255,232,.09) 58.2% 67%,transparent 67.2%);content:''; }
body.mascot-five.scene-horizon .hero::after { position:absolute;z-index:0;right:-7%;bottom:-15%;width:75%;height:42%;background:linear-gradient(180deg,rgba(86,235,151,.18),rgba(0,63,37,.02));clip-path:polygon(0 64%,100% 2%,100% 100%,0 100%);content:''; }

/* 3 — мягкая изумрудная волна без колец и сетки. */
body.mascot-five.scene-wave .hero {
  background:
    radial-gradient(ellipse 48% 74% at 84% 34%,rgba(116,240,172,.24),transparent 67%),
    linear-gradient(125deg,#031e15 0%,#064631 53%,#0b7650 100%);
}
body.mascot-five.scene-wave .hero::before { position:absolute;z-index:0;left:-8%;right:-8%;bottom:-18%;height:42%;border-radius:48% 54% 0 0 / 36% 44% 0 0;background:linear-gradient(180deg,rgba(80,227,145,.22),rgba(1,49,30,.05));box-shadow:0 -25px 65px rgba(72,229,140,.10);transform:rotate(-2deg);content:''; }
body.mascot-five.scene-wave .hero::after { position:absolute;z-index:0;right:-18%;top:-26%;width:64%;height:92%;background:linear-gradient(138deg,transparent 25%,rgba(222,255,236,.10) 48%,transparent 68%);filter:blur(15px);content:''; }

/* 4 — банковское стекло: световой план за калькулятором, без рамки вокруг героя. */
body.mascot-five.scene-glass .hero {
  background:linear-gradient(118deg,#021d14 0%,#053a28 48%,#086a46 100%);
  box-shadow:inset 0 0 140px rgba(0,12,7,.34);
}
body.mascot-five.scene-glass .hero::before { position:absolute;z-index:0;right:-9%;top:-22%;width:57%;height:136%;background:linear-gradient(137deg,rgba(223,255,236,.17),rgba(102,236,160,.06) 46%,rgba(0,45,27,.28));clip-path:polygon(24% 0,100% 0,100% 100%,0 88%);content:''; }
body.mascot-five.scene-glass .hero::after { position:absolute;z-index:0;left:38%;right:-5%;bottom:-8%;height:32%;background:linear-gradient(180deg,transparent,rgba(77,223,142,.18));clip-path:polygon(0 66%,100% 0,100% 100%,0 100%);content:''; }

/* 5 — тёмный бархат: спокойная премиальная глубина и мягкие складки. */
body.mascot-five.scene-velvet .hero {
  background:
    radial-gradient(ellipse 70% 42% at 85% 10%,rgba(61,217,132,.18),transparent 71%),
    radial-gradient(ellipse 90% 52% at 76% 110%,rgba(3,186,91,.22),transparent 72%),
    linear-gradient(145deg,#021b12 0%,#063725 43%,#095c3c 72%,#087149 100%);
  box-shadow:inset 0 0 150px rgba(0,10,6,.44);
}
body.mascot-five.scene-velvet .hero::before { position:absolute;z-index:0;right:-20%;bottom:-44%;width:105%;height:74%;border-radius:52% 48% 0 0 / 60% 55% 0 0;background:linear-gradient(180deg,rgba(93,232,154,.17),rgba(0,62,37,.04));box-shadow:0 -25px 70px rgba(56,218,126,.12),inset 0 28px 68px rgba(0,30,18,.18);transform:rotate(-7deg);content:''; }
body.mascot-five.scene-velvet .hero::after { position:absolute;z-index:0;right:-12%;top:-36%;width:68%;height:110%;background:linear-gradient(138deg,transparent 30%,rgba(222,255,235,.10) 50%,transparent 69%);filter:blur(20px);content:''; }

/* Самостоятельная полоса преимуществ — не плавающий текст внутри hero. */
.mascot-five .bottom-bar {
  position:relative;z-index:20;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  width:100%;max-width:none;margin:0;
  padding:28px max(58px,calc((100% - 1252px)/2));
  border:0;
  background:
    radial-gradient(ellipse 34% 150% at 14% 100%,rgba(32,207,119,.10),transparent 72%),
    radial-gradient(ellipse 34% 150% at 86% 0,rgba(247,185,22,.075),transparent 72%),
    linear-gradient(180deg,#f6fbf8 0%,#eef7f2 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 -18px 55px rgba(0,24,14,.13);
}
.mascot-five .bottom-bar span {
  position:relative;
  min-height:92px;
  overflow:hidden;
  padding:20px 56px 20px 76px;
  border:1px solid #d5e8dc;
  border-radius:20px;
  background:linear-gradient(112deg,#fff 0 42%,#effbf5 51%,#fff 60% 100%);
  background-position:0 0;
  background-size:250% 100%;
  box-shadow:0 13px 30px rgba(7,50,30,.075),inset 0 1px 0 rgba(255,255,255,.95);
  color:#74847b;
  font-size:13px;
  line-height:1.45;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background-position .65s ease;
}
.mascot-five .bottom-bar span:hover {
  z-index:2;
  transform:translateY(-5px);
  border-color:#bfe3ce;
  background-position:100% 0;
  box-shadow:0 20px 38px rgba(6,58,33,.13),inset 0 1px 0 #fff;
}
.mascot-five .bottom-bar span::before { position:absolute;top:20px;left:20px;display:grid;width:42px;height:42px;place-items:center;border:1px solid rgba(0,164,88,.10);border-radius:14px;background:linear-gradient(145deg,#e3f9ec,#cdf2dd);box-shadow:0 8px 18px rgba(0,139,74,.10);color:#008e4e;font-size:12px;font-weight:850;content:'✓';transition:transform .25s ease,box-shadow .25s ease; }
.mascot-five .bottom-bar span:nth-child(2)::before { content:'BYN'; }
.mascot-five .bottom-bar span:nth-child(3)::before { content:'90%'; }
.mascot-five .bottom-bar span::after { position:absolute;top:14px;right:18px;color:rgba(4,74,43,.095);font-size:24px;font-weight:850;letter-spacing:-.05em;content:'01'; }
.mascot-five .bottom-bar span:nth-child(2)::after { color:rgba(215,148,0,.14);content:'02'; }
.mascot-five .bottom-bar span:nth-child(3)::after { content:'03'; }
.mascot-five .bottom-bar span:nth-child(2)::before { border-color:rgba(224,158,12,.14);background:linear-gradient(145deg,#fff4cb,#f6e5a7);color:#9f6b00; }
.mascot-five .bottom-bar span:hover::before { transform:translateY(-2px) rotate(-3deg) scale(1.05);box-shadow:0 12px 23px rgba(0,139,74,.16); }
.mascot-five .bottom-bar b { display:block;margin-bottom:3px;color:#0a3b27;font-size:17px;letter-spacing:-.015em; }

@media (prefers-reduced-motion:no-preference) {
  .mascot-five .copy > *,
  .mascot-five .calculator,
  .mascot-five .mascot-five-stage { opacity:0;animation:mascot-five-rise .62s cubic-bezier(.22,.8,.3,1) forwards; }
  .mascot-five .copy > h1 { animation-delay:.08s; }
  .mascot-five .copy > p { animation-delay:.15s; }
  .mascot-five .copy > .cta-row { animation-delay:.22s; }
  .mascot-five .copy > .trust-row { animation-delay:.29s; }
  .mascot-five .copy > .quiet-note { animation-delay:.36s; }
  .mascot-five .mascot-five-stage { animation-delay:.23s; }
  .mascot-five .calculator { animation-delay:.16s; }
  .mascot-five .bottom-bar span { opacity:0;animation:benefit-card-in .56s cubic-bezier(.22,.8,.3,1) forwards; }
  .mascot-five .bottom-bar span:nth-child(1) { animation-delay:.08s; }
  .mascot-five .bottom-bar span:nth-child(2) { animation-delay:.16s; }
  .mascot-five .bottom-bar span:nth-child(3) { animation-delay:.24s; }
}
@keyframes mascot-five-rise { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes benefit-card-in { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

@media (max-width:1180px) {
  .mascot-five .quiet-layout { grid-template-columns:minmax(0,1fr) 370px;gap:120px; }
  .mascot-five-stage { left:calc(50% + 4px);width:195px;opacity:.92; }
}
@media (max-width:980px) {
  .mascot-five .topbar,.mascot-five .quiet-layout { width:min(100% - 48px,720px); }
  .mascot-five .topbar { gap:18px; }
  .mascot-five .home-brand { width:240px; }
  .mascot-five .home-brand__mark { width:63px; }
  .mascot-five .home-brand__name { font-size:22.5px; }
  .mascot-five .home-brand__tagline { margin-top:6px;font-size:7.5px; }
  .mascot-five .quiet-layout { grid-template-columns:1fr;gap:38px;padding:48px 34px; }
  .mascot-five .calculator { width:min(100%,420px); }
  .mascot-five-stage { right:4%;left:auto;bottom:38px;width:205px;opacity:.18; }
  .mascot-five .bottom-bar { grid-template-columns:1fr;padding:22px 24px; }
}
@media (max-width:580px) {
  .mascot-five .topbar { width:min(100% - 44px,520px); }
  .mascot-five .topbar { gap:14px; }
  .mascot-five .home-brand { width:196px;gap:7px; }
  .mascot-five .home-brand__mark { width:51px; }
  .mascot-five .home-brand__name { font-size:18.5px; }
  .mascot-five .home-brand__tagline { margin-top:5px;font-size:6.2px; }
  .mascot-five .quiet-layout { padding:38px 22px; }
  .mascot-five .copy h1 { font-size:43px; }
  .mascot-five-stage { display:none; }
  .mascot-five .bottom-bar { padding:18px 12px; }
}