:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --bg: #ffffff;
  --surface: #f8fafc;
  --ink: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;
  --navy: #f8fafc;
  --navy-title-color: #0f172a;
  --navy-text-color: #334155;
  --teal: #0d7a68;
  --orange: #c25e00;
  --cream: #8a5015;
  --soft: #f0fdfa;
  --nav-h: 112px
}

:root[data-theme="dark"] {
  --bg: #09121f;
  --surface: #112033;
  --ink: #f8fafc;
  --muted: #cbd5e1;
  --line: #223754;
  --navy: #0a1628;
  --navy-title-color: #f8fafc;
  --navy-text-color: #cbd5e1;
  --teal: #2ec4a5;
  --orange: #f59e0b;
  --cream: #fde68a;
  --soft: #0f2a35
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f8fafc;
  --ink: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;
  --navy: #f8fafc;
  --navy-title-color: #0f172a;
  --navy-text-color: #334155;
  --teal: #0d7a68;
  --orange: #c25e00;
  --cream: #8a5015;
  --soft: #f0fdfa
}

html {
  scroll-padding-top: 90px;
  scroll-behavior: smooth
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

*,
*:before,
*:after {
  box-sizing: border-box
}

:focus-visible {
  outline: 2px solid var(--teal, #2ec4a5);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  background: var(--surface, #101e33);
  color: var(--teal, #2ec4a5);
  border: 2px solid var(--teal, #2ec4a5);
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  z-index: 99999;
  text-decoration: none;
  transition: top .2s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}

.skip-link:focus {
  top: 20px;
  outline: 3px solid #2ec4a5;
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.req {
  color: var(--orange, #ee8a2a);
  font-weight: 700;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
}

h1,
h2,
h3 {
  line-height: 1.12;
  margin: 0;
  letter-spacing: 0;
  font-family: "Outfit", Georgia, "Times New Roman", serif
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px
}

a {
  color: inherit
}

.btn {
  display: inline-block;
  background: linear-gradient(135deg, #157365, #0d5442);
  color: #fff;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  transition: transform .15s, box-shadow .15s, background .2s;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2)
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .14)
}

.btn.ghost {
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
  transition: all .2s ease
}

.btn.ghost:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(13, 122, 104, .06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08)
}

nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: rgba(10, 22, 40, .92);
  backdrop-filter: blur(8px)
}

nav .wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  transition: height .35s ease;
  gap: 20px
}

nav.sm .wrap {
  height: 68px
}

nav {
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s
}

nav.sm {
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25)
}

.logo img {
  height: 92px;
  width: auto;
  display: block;
  transition: height .35s ease
}

nav.sm .logo img {
  height: 54px
}

.links {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-left: auto
}

.links a:not(.btn) {
  color: #c5d2e6;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600
}

.links a:not(.btn):hover {
  color: #2ec4a5
}

.nav-dropdown {
  position: relative;
  display: inline-block;
  width: 275px
}

.nav-dropdown-btn {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  padding: 8px 16px;
  border-radius: 20px;
  color: #f6c58f !important;
  font-weight: 700 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  gap: 8px;
  cursor: pointer;
  transition: all .2s ease;
  text-decoration: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.2
}

.nav-dropdown-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.nav-dropdown-btn:hover,
.nav-dropdown:hover .nav-dropdown-btn,
.nav-dropdown.open .nav-dropdown-btn {
  background: rgba(255, 255, 255, .16);
  border-color: #2ec4a5;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(46, 196, 165, .35)
}

.nav-dropdown-btn .arr {
  font-size: 10px;
  flex: none;
  transition: transform .2s ease
}

.nav-dropdown:hover .nav-dropdown-btn .arr,
.nav-dropdown.open .nav-dropdown-btn .arr {
  transform: rotate(180deg)
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 14px;
  padding: 8px 0;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 100
}

.nav-dropdown-menu:before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 18px;
  color: #c5d2e6 !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease
}

.nav-dropdown-item:hover {
  background: rgba(255, 255, 255, .08);
  color: #2ec4a5 !important
}

.nav-dropdown-item.active {
  color: var(--cream) !important;
  font-weight: 700;
  background: rgba(44, 138, 138, .18)
}

.mob-lbl {
  display: none
}

@media(max-width:820px) {
  :root {
    --nav-h: 84px
  }

  nav .wrap {
    height: var(--nav-h)
  }

  .logo img {
    height: 68px
  }

  nav.sm .logo img {
    height: 46px
  }

  nav.sm .wrap {
    height: 58px
  }
}

@media(max-width:540px) {
  .nav-dropdown {
    width: auto;
    min-width: 0;
    position: static;
    flex: 1 1 auto
  }

  .nav-dropdown-btn {
    padding: 6px 12px;
    font-size: 13px;
    justify-content: center
  }

  .nav-dropdown-menu {
    top: 100%;
    left: 16px;
    right: 16px;
    width: auto;
    min-width: 0
  }

  .nav-dropdown-menu:before {
    top: -28px;
    height: 28px
  }

  nav .btn {
    padding: 8px 14px;
    font-size: 13px;
    white-space: nowrap;
    flex: none
  }

  nav .wrap {
    padding: 0 16px;
    gap: 10px
  }

  .links {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end
  }
}

@media(max-width:440px) {
  .desk-lbl {
    display: none
  }

  .mob-lbl {
    display: inline
  }
}

.logo {
  display: flex;
  align-items: center
}

nav .btn {
  padding: 9px 18px;
  font-size: 14px
}

.hero {
  background: radial-gradient(900px 400px at 85% 0, rgba(44, 138, 138, .35), transparent), var(--navy);
  color: #fff;
  padding: 64px 0 88px
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: center;
  max-width: 1380px;
  padding-left: 32px;
  padding-right: 32px
}

.eyebrow {
  color: var(--teal);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px
}

.hero h1 {
  font-size: clamp(32px, 5.2vw, 54px);
  margin: 14px 0 18px;
  line-height: 1.15
}

.hero h1 em {
  color: var(--teal);
  font-style: normal;
  font-weight: 700
}

.hero p {
  color: #c5d2e6;
  font-size: clamp(16px, 1.6vw, 24px);
  line-height: 1.48;
  max-width: 660px;
  margin: 0
}

.cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px
}

.tiers {
  display: grid;
  gap: 14px
}

.tier {
  background: linear-gradient(135deg, var(--orange), #f5a95a);
  color: #1a0f00;
  border: 0;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 26px rgba(238, 138, 42, .25);
}

.tier.top {
  background: linear-gradient(135deg, #157365, #0d5442);
  color: #fff;
  border: 1px solid rgba(46, 196, 165, .25);
  box-shadow: 0 10px 26px rgba(21, 115, 101, .3);
}

.tier small {
  display: block;
  font-weight: 600;
  opacity: .8
}

.tier strong {
  font-size: 44px;
  font-family: "Outfit", Georgia, serif;
  display: block;
  line-height: 1.1
}

.strip {
  background: var(--surface);
  border-bottom: 1px solid var(--line)
}

.strip .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 26px 20px;
  text-align: center
}

.strip b {
  display: block;
  font: 700 28px "Outfit", Georgia, serif;
  color: var(--teal)
}

.strip span {
  color: var(--muted);
  font-size: 13px
}

section {
  padding: 76px 0
}

.h {
  max-width: 640px;
  margin-bottom: 36px
}

.h h2 {
  font-size: clamp(28px, 4vw, 42px)
}

.h p {
  color: var(--muted);
  margin: 12px 0 0
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.value-cards-grid {
  margin-top: 0;
  margin-bottom: 28px
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px
}

.card .n {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--orange);
  color: #1a0f00;
  font-weight: 800;
  display: grid;
  place-items: center;
  margin-bottom: 14px
}

.card h3 {
  font-size: 20px;
  margin-bottom: 8px
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px
}

.ico {
  font-size: 28px;
  margin-bottom: 10px
}

#calc .wrap {
  max-width: 1280px
}

.calc {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(560px 300px at 0% 0%, rgba(44, 138, 138, .22), transparent 65%),
    radial-gradient(560px 320px at 100% 100%, rgba(238, 138, 42, .14), transparent 65%),
    var(--navy);
  color: var(--navy-title-color);
  border-radius: 24px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center
}

.calc:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 20%, transparent 80%);
  pointer-events: none
}

.calc > * {
  position: relative;
  z-index: 1
}

[data-theme="light"] .calc {
  background:
    radial-gradient(560px 300px at 0% 0%, rgba(44, 138, 138, .12), transparent 65%),
    radial-gradient(560px 320px at 100% 100%, rgba(238, 138, 42, .10), transparent 65%),
    var(--navy)
}

[data-theme="light"] .calc:before {
  background-image:
    linear-gradient(rgba(11, 26, 46, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 26, 46, .05) 1px, transparent 1px)
}

#calc {
  position: relative
}



.calc label {
  font-size: 17px;
  color: #c5d2e6;
  font-weight: 600
}

.calc label b,
.calc label .calc-val {
  font-size: 1.3em;
  color: var(--orange);
  font-weight: 700;
}

#calc .calc > div:first-child > p {
  font-size: 18px
}

.calc input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  cursor: pointer;
  --fill: 0%
}

.calc input[type=range]::-webkit-slider-runnable-track {
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange) var(--fill), rgba(255, 255, 255, .14) var(--fill))
}

.calc input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  margin-top: -9px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  background: var(--orange);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  transition: transform .12s
}

.calc input[type=range]:active::-webkit-slider-thumb {
  transform: scale(1.15)
}

.calc input[type=range]::-moz-range-track {
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14)
}

.calc input[type=range]::-moz-range-progress {
  height: 14px;
  border-radius: 999px;
  background: var(--orange)
}

.calc input[type=range]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  background: var(--orange);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2)
}

.calc input[type=range]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-radius: 8px
}

[data-theme="light"] .calc input[type=range]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--orange) var(--fill), rgba(11, 26, 46, .15) var(--fill))
}

[data-theme="light"] .calc input[type=range]::-moz-range-track {
  background: rgba(11, 26, 46, .15)
}

.calc-spark {
  position: fixed;
  z-index: 9999;
  width: 7px;
  height: 7px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  pointer-events: none;
  background: var(--orange);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  animation: sparkFly .7s ease-out forwards
}

@keyframes sparkFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1)
  }

  100% {
    opacity: 0;
    transform: translate(var(--sx, 0px), var(--sy, -30px)) scale(.2)
  }
}

@media (prefers-reduced-motion:reduce) {
  .calc-spark {
    display: none
  }
}

.calc .row {
  margin-bottom: 26px
}

.calc-card-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.calc .ccwrap {
  margin: 0 auto;
  width: 100%;
  max-width: 480px
}

.calc-note {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: #c5d2e6;
  text-align: center;
  line-height: 1.45
}

.cc-amt.pop #amt {
  animation: pp .5s
}

.cc-amt.tier-flash #amt {
  animation: tierPop .9s cubic-bezier(.2, 1.4, .4, 1)
}

@keyframes tierPop {
  0% {
    transform: scale(1)
  }

  30% {
    transform: scale(1.28);
    color: #7cffb2;
    text-shadow: 0 0 22px rgba(124, 255, 178, .9), 0 0 6px rgba(124, 255, 178, .9)
  }

  60% {
    transform: scale(.97)
  }

  100% {
    transform: scale(1)
  }
}

.cc.tier-glow {
  animation: ccGlow 1.1s ease-out
}

@keyframes ccGlow {
  0%,
  100% {
    box-shadow: 0 20px 40px rgba(10, 22, 40, .25), inset 0 0 0 1px rgba(255, 255, 255, .14)
  }

  30% {
    box-shadow: 0 24px 48px rgba(10, 22, 40, .3), 0 0 0 2px var(--teal), inset 0 0 0 1px rgba(255, 255, 255, .14)
  }
}

.out {
  background: rgba(255, 255, 255, .07);
  border-radius: 18px;
  padding: 26px;
  text-align: center
}

.out .amt {
  font: 700 56px "Outfit", Georgia, serif;
  color: var(--orange)
}

.out p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0
}

.list li {
  padding: 8px 0 8px 30px;
  position: relative;
  color: var(--muted);
  font-size: 15px
}

.list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 800
}

.bonus {
  margin-top: 18px;
  background: var(--soft);
  border: 1.5px dashed var(--teal);
  border-radius: 18px;
  padding: 22px 26px;
  display: flex;
  gap: 16px;
  align-items: center
}

.bonus b {
  color: var(--teal)
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px
}

@media(max-width:640px) {
  .faq-grid {
    grid-template-columns: 1fr
  }
}

.faq-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 26px;
  transition: border-color .2s ease, box-shadow .2s ease
}

.faq-card:hover {
  border-color: var(--teal);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06)
}

.faq-card h3 {
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--ink);
  line-height: 1.35
}

.faq-card p {
  color: var(--muted);
  margin: 0;
  font-size: 15px;
  line-height: 1.6
}

.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 10px
}

.faq summary {
  cursor: pointer;
  font-weight: 700
}

.faq details p {
  color: var(--muted);
  margin: 10px 0 0;
  font-size: 15px
}

#apply {
  background: var(--navy);
  color: #fff
}

#apply .wrap {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 44px;
  align-items: start
}

#apply h2 {
  font-size: clamp(28px, 4vw, 42px)
}

#apply p {
  color: #c5d2e6
}

.contact a {
  color: var(--cream);
  text-decoration: none;
  display: block;
  margin-top: 6px
}

form {
  background: var(--surface);
  color: var(--ink);
  border-radius: 22px;
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

form .full {
  grid-column: 1/-1
}

form label {
  font-size: 13px;
  font-weight: 700;
  display: block;
  margin-bottom: 5px
}

form input,
form select,
form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit
}

form input:focus,
form select:focus,
form textarea:focus {
  outline: 2px solid var(--teal);
  border-color: var(--teal)
}

form .btn {
  width: 100%
}

.fine {
  font-size: 12px;
  color: var(--muted);
  margin: 0
}

#ok {
  display: none;
  text-align: center;
  padding: 20px
}

footer {
  background: #060d18;
  color: #8fa1bb;
  padding: 30px 0;
  font-size: 13px;
  text-align: center
}

@media(max-width:820px) {

  .hero .wrap,
  .grid3,
  .calc,
  .split,
  #apply .wrap {
    grid-template-columns: 1fr
  }

  .strip .wrap {
    grid-template-columns: 1fr 1fr
  }

  form {
    grid-template-columns: 1fr
  }

  .calc {
    padding: 26px
  }
}

#bar {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--teal), var(--orange));
  z-index: 20
}

.js .rv {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0s)
}

.js .rv.l {
  transform: translateX(-40px)
}

.js .rv.r {
  transform: translateX(40px)
}

.js .rv.z {
  transform: scale(.92)
}

.js .rv.in {
  opacity: 1;
  transform: none
}

.tiers {
  animation: fl 6s ease-in-out infinite
}

@keyframes fl {
  50% {
    transform: translateY(-10px)
  }
}

.hero {
  position: relative;
  overflow: hidden
}

.hero:before {
  display: none
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M48 0v48H0' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3Cpath d='M0 4v-8M-4 0h8' fill='none' stroke='rgba(44,218,178,0.55)' stroke-width='1.2'/%3E%3Ccircle cx='24' cy='24' r='1.4' fill='rgba(238,138,42,0.38)'/%3E%3C/svg%3E");
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 32%, #000 35%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 32%, #000 35%, transparent 95%)
}

.card {
  transition: transform .25s, box-shadow .25s
}

.card:hover {
  box-shadow: 0 14px 34px rgba(10, 22, 40, .14)
}

.js .card.in:hover {
  transform: translateY(-6px)
}

.btn.pulse {
  animation: none
}

.out.pop .amt {
  animation: pp .5s
}

@keyframes pp {
  40% {
    transform: scale(1.12)
  }
}

@media (prefers-reduced-motion:reduce) {
  .js .rv {
    opacity: 1;
    transform: none;
    transition: none
  }

  .tiers {
    animation: none
  }
}

.hero {
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
  box-sizing: border-box;
  display: flex;
  align-items: start;
  align-content: flex-start;
  padding: clamp(24px, 4vh, 44px) 0 clamp(72px, 12vh, 120px);
  background: var(--bg)
}

.hero .wrap {
  position: relative;
  z-index: 2
}

.hero h1 em {
  color: var(--teal);
  display: inline-block;
  font-style: normal;
  font-weight: 700;
  vertical-align: baseline
}

/* Rebate Amount Flipping Toggle in Hero Headline */
.rebate-toggle-slot {
  display: inline-grid;
  grid-template-columns: 1fr;
  vertical-align: baseline;
  clip-path: inset(-0.15em 0 -0.15em 0);
  line-height: inherit;
  margin: 0;
  padding: 0;
  position: relative;
}

.rebate-toggle-ghost {
  grid-area: 1 / 1;
  visibility: hidden;
  line-height: inherit;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

.rebate-toggle-val {
  grid-area: 1 / 1;
  display: inline-block;
  line-height: inherit;
  vertical-align: baseline;
  will-change: transform, opacity;
  white-space: nowrap;
}

.rebate-toggle-val.val-12k {
  animation: rebateToggle12k 6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.rebate-toggle-val.val-10k {
  animation: rebateToggle10k 6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes rebateToggle12k {
  0%, 42% {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
  49% {
    transform: translateY(-115%);
    opacity: 0;
    filter: blur(2px);
  }
  51% {
    transform: translateY(115%);
    opacity: 0;
    filter: blur(2px);
  }
  92% {
    transform: translateY(115%);
    opacity: 0;
    filter: blur(2px);
  }
  99%, 100% {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes rebateToggle10k {
  0%, 42% {
    transform: translateY(115%);
    opacity: 0;
    filter: blur(2px);
  }
  49%, 92% {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
  99% {
    transform: translateY(-115%);
    opacity: 0;
    filter: blur(2px);
  }
  100% {
    transform: translateY(115%);
    opacity: 0;
    filter: blur(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rebate-toggle-val.val-12k {
    animation: none;
    transform: none;
    opacity: 1;
    filter: none;
  }
  .rebate-toggle-val.val-10k {
    display: none;
  }
}

.gs {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  /* height: min(46vw, 380px); */
  min-height: 280px;
  z-index: 1;
  pointer-events: none;
  object-fit: cover;
  object-position: center bottom;
}

.gs .up {
  opacity: 0;
  transform: translateY(40px);
  animation: gsUp 1.2s cubic-bezier(.2, .7, .2, 1) forwards
}

@keyframes gsUp {
  to {
    opacity: 1;
    transform: none
  }
}

.tw {
  animation: tw 3s ease-in-out infinite
}

@keyframes tw {
  50% {
    opacity: .15
  }
}

.flick {
  animation: fk 4s infinite
}

@keyframes fk {

  0%,
  90%,
  100% {
    opacity: 1
  }

  92% {
    opacity: .25
  }

  95% {
    opacity: 1
  }

  97% {
    opacity: .45
  }
}

.gp {
  animation: gpp 4s ease-in-out infinite
}

@keyframes gpp {
  50% {
    opacity: .6
  }
}

.car {
  transform: translateX(-300px);
  animation: drive 18s linear 2.5s infinite
}

@keyframes drive {
  to {
    transform: translateX(1800px)
  }
}

.rd {
  animation: rd 2s linear infinite
}

@keyframes rd {
  to {
    stroke-dashoffset: -70
  }
}

.marq {
  background: #060d18;
  overflow: hidden;
  padding: 14px 0;
  border-bottom: 1px solid #12233a
}

.track {
  display: flex;
  width: max-content;
  animation: mq 34s linear infinite
}

.track span {
  color: var(--muted);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: normal;
  text-transform: none;
  padding: 0 26px;
  position: relative
}

.track span:after {
  content: "◆";
  position: absolute;
  right: -6px;
  color: var(--orange);
  font-size: 9px
}

@keyframes mq {
  to {
    transform: translateX(-50%)
  }
}

.btn {
  background: linear-gradient(135deg, #157365, #0d5442)
}

.btn:not(.ghost):after {
  content: "  →"
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(10, 22, 40, .06)
}

.card:before {
  display: none
}

.card .n {
  background: var(--orange);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12)
}

.ico {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--teal), #1e6a72);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08)
}

.ico svg {
  width: 26px;
  height: 26px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.h h2 {
  color: var(--ink)
}

.eyebrow:before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 8px
}

.strip b {
  color: var(--teal);
  font-weight: 700
}

.showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center
}

.vis {
  background: linear-gradient(160deg, #0a1628, #123a4a);
  border-radius: 28px;
  padding: 30px;
  box-shadow: 0 30px 60px rgba(10, 22, 40, .25)
}

.vis svg {
  width: 100%;
  height: auto;
  display: block
}

.fl2 {
  animation: fl2 5s ease-in-out infinite
}

@keyframes fl2 {
  50% {
    transform: translateY(-7px)
  }
}

.las {
  animation: tw 1.2s infinite
}

.check {
  margin-top: 26px;
  background: #fbf3e4;
  color: #20160a;
  border-radius: 10px;
  padding: 16px 22px;
  transform: rotate(-1.5deg);
  box-shadow: 0 18px 40px rgba(10, 22, 40, .25);
  border-left: 8px solid var(--orange)
}

.ck1,
.ck3 {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.ck1 {
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 800;
  color: #8a6a3a
}

.ck2 {
  margin: 12px 0;
  font-size: 15px
}

.ck2 b {
  font-family: "Outfit", Georgia, serif;
  font-size: 19px;
  border-bottom: 1.5px solid #20160a
}

.ck3 strong {
  font: 800 26px "Outfit", Georgia, serif;
  background: #fff;
  border: 1.5px solid #20160a;
  padding: 2px 12px;
  border-radius: 4px
}

.ck3 em {
  font-size: 13px;
  color: #6a5a44
}

@media(max-width:820px) {
  .showcase {
    grid-template-columns: 1fr
  }

  .hero {
    padding: 28px 0 200px;
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100dvh - var(--nav-h));
    align-items: flex-start
  }

  .hero .wrap {
    padding-left: 20px;
    padding-right: 20px
  }

  .hero p {
    display: none
  }

  .gs {
    height: 340px;
    min-height: 320px;
    bottom: -2px
  }

  .gs .up {
    animation-duration: 1s
  }
}

@media (prefers-reduced-motion:reduce) {
  .gs .up {
    opacity: 1;
    transform: none;
    animation: none
  }

  .car,
  .tw,
  .flick,
  .gp,
  .rd,
  .track,
  .fl2,
  .las {
    animation: none
  }
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px
}

.pills span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 6px 14px;
  border-radius: 999px
}

.car {
  animation: drive2 14s linear 2.5s infinite
}

@keyframes drive2 {
  0% {
    transform: translateX(-300px);
    animation-timing-function: cubic-bezier(.2, .6, .3, 1)
  }

  24%,
  80% {
    transform: translateX(740px);
    animation-timing-function: cubic-bezier(.6, 0, .9, .6)
  }

  100% {
    transform: translateX(1800px)
  }
}

.fc {
  opacity: 0;
  animation: fcard 14s linear 2.5s infinite
}

@keyframes fcard {

  0%,
  30% {
    opacity: 0;
    transform: none
  }

  32% {
    opacity: 1;
    transform: none
  }

  42% {
    opacity: 1;
    transform: translate(-48px, -30px) scale(.9)
  }

  45%,
  100% {
    opacity: 0;
    transform: translate(-48px, -30px) scale(.9)
  }
}

.wv1,
.wv2,
.wv3,
.pt,
.apr,
.cn {
  opacity: 0
}

.wv1 {
  animation: wv1 14s linear 2.5s infinite
}

.wv2 {
  animation: wv2 14s linear 2.5s infinite
}

.wv3 {
  animation: wv3 14s linear 2.5s infinite
}

@keyframes wv1 {

  0%,
  43% {
    opacity: 0
  }

  46% {
    opacity: 1
  }

  52%,
  100% {
    opacity: 0
  }
}

@keyframes wv2 {

  0%,
  46% {
    opacity: 0
  }

  49% {
    opacity: 1
  }

  55%,
  100% {
    opacity: 0
  }
}

@keyframes wv3 {

  0%,
  49% {
    opacity: 0
  }

  52% {
    opacity: 1
  }

  58%,
  100% {
    opacity: 0
  }
}

.pt {
  animation: pt 14s linear 2.5s infinite
}

@keyframes pt {

  0%,
  46% {
    opacity: 0
  }

  50%,
  78% {
    opacity: 1
  }

  82%,
  100% {
    opacity: 0
  }
}

.apr {
  transform-box: fill-box;
  transform-origin: center;
  animation: apr 14s linear 2.5s infinite
}

@keyframes apr {

  0%,
  50% {
    opacity: 0;
    transform: scale(.5)
  }

  54% {
    opacity: 1;
    transform: scale(1.12)
  }

  57%,
  78% {
    opacity: 1;
    transform: scale(1)
  }

  82%,
  100% {
    opacity: 0;
    transform: scale(.8)
  }
}

.cn {
  animation: cn 14s linear 2.8s infinite
}

@keyframes cn {

  0%,
  54% {
    opacity: 0;
    transform: translateY(0)
  }

  58% {
    opacity: 1
  }

  76% {
    opacity: 0;
    transform: translateY(-70px)
  }

  100% {
    opacity: 0
  }
}

.ccwrap {
  margin-top: 28px;
  perspective: 900px;
  max-width: 480px
}

.cc {
  position: relative;
  aspect-ratio: 1.586;
  border-radius: 24px;
  padding: 30px 32px;
  color: #fff;
  overflow: hidden;
  background: radial-gradient(circle at 85% 0, rgba(238, 138, 42, .55), transparent 55%), linear-gradient(135deg, #0a1628 0%, #14495a 60%, #2c8a8a 100%);
  box-shadow: 0 30px 50px rgba(10, 22, 40, .4), inset 0 0 0 1px rgba(255, 255, 255, .14);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .15s ease-out;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.cc-top {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.cc-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.15
}

.cc-brand b,
.cc-brand .cc-logo {
  background: #f6c58f;
  color: #0a1628;
  border-radius: 8px;
  padding: 6px 10px;
  font: 800 18px "Outfit", Georgia, serif;
  letter-spacing: 0;
  display: inline-block;
}

.cc-nfc {
  width: 34px;
  height: 34px;
  color: #f6e7c8;
  transform: rotate(90deg)
}

.cc-chip {
  width: 62px;
  height: 46px;
  margin-top: 6px
}

.cc-num {
  font: 600 clamp(19px, 4.6vw, 26px)/1 "Courier New", monospace;
  letter-spacing: .14em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 -1px 0 rgba(255, 255, 255, .25);
  margin: 4px 0
}

.cc-bot {
  display: flex;
  gap: 22px;
  align-items: flex-end
}

.cc-bot small {
  display: block;
  font-size: 9.5px;
  letter-spacing: .14em;
  opacity: .7
}

.cc-bot span {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em
}

.cc-amt {
  margin-left: auto;
  text-align: right
}

.cc-amt span {
  font: 800 26px "Outfit", Georgia, serif;
  color: #f6c58f;
  letter-spacing: 0
}

.cc-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 48%, transparent 60%);
  transform: translateX(-120%);
  animation: sh 5s ease-in-out infinite;
  pointer-events: none
}

@keyframes sh {

  0%,
  55% {
    transform: translateX(-120%)
  }

  100% {
    transform: translateX(120%)
  }
}

@media (prefers-reduced-motion:reduce) {

  .pt,
  .apr {
    opacity: 1
  }

  .car,
  .fc,
  .wv1,
  .wv2,
  .wv3,
  .pt,
  .apr,
  .cn,
  .cc-shine,
  .cc-amt.tier-flash #amt,
  .cc.tier-glow {
    animation: none
  }

  .car {
    transform: translateX(740px)
  }
}

.ob {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 40px;
  align-items: center
}

.ob-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.ob-line {
  position: absolute;
  left: 19px;
  transform: translateX(-50%);
  top: 33px;
  bottom: 85px;
  width: 3px;
  background: var(--line);
  border-radius: 3px;
  z-index: 1;
  pointer-events: none;
}

.ob-line i {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--teal), var(--orange));
  transition: height .7s ease;
  border-radius: 3px
}

.ob-step {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: .85;
  transition: opacity .3s, transform .3s
}

.ob-step:hover {
  opacity: 1
}

.ob-step.on {
  opacity: 1;
  z-index: 3;
}

.ob-n {
  flex: none;
  width: 38px;
  height: 38px;
  margin-top: 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f7a955, #ee8a2a);
  border: 1.5px solid transparent;
  display: grid;
  place-items: center;
  color: #1a0f00;
  position: relative;
  z-index: 2;
  transition: all .3s;
  font: 700 15px/1 inherit;
  box-shadow: 0 2px 8px rgba(238, 138, 42, .25);
}

.ob-n svg {
  width: 18px;
  height: 18px;
  stroke: currentColor
}

.ob-step.on .ob-n {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1)
}

.ob-step:not(.on):hover .ob-n {
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(238, 138, 42, .35);
}

.ob-t {
  flex: 1;
  min-width: 0;
  display: block;
  position: relative;
  z-index: 2;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 18px;
  padding: 16px 18px;
  overflow: hidden;
  transition: all .3s
}

.ob-step.on .ob-t {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 14px 34px rgba(10, 22, 40, .1)
}

.ob-step:not(.on):hover .ob-t {
  background: rgba(255, 255, 255, .03)
}

.ob-t em {
  display: block;
  font-style: normal;
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 700;
  color: var(--teal)
}

.ob-t b {
  display: block;
  font: 700 21px "Outfit", Georgia, serif;
  margin: 2px 0 4px
}

.ob-t small {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5
}

.ob-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--teal), var(--orange))
}

.go .ob-step.on .ob-bar {
  animation: obb 7s linear forwards
}

.ob:hover .ob-step.on .ob-bar {
  animation-play-state: paused
}

@keyframes obb {
  to {
    width: 100%
  }
}

.ob-stage {
  position: relative;
  background: linear-gradient(160deg, #0a1628, #123a4a);
  border-radius: 26px;
  min-height: 380px;
  box-shadow: 0 30px 60px rgba(10, 22, 40, .28);
  overflow: hidden;
  color: #fff
}

.ob-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.ob-chrome i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff6b5e
}

.ob-chrome i:nth-child(2) {
  background: #f7c548
}

.ob-chrome i:nth-child(3) {
  background: #3fb26a
}

.ob-chrome span {
  margin-left: 10px;
  font-size: 12px;
  color: #9fb0c8;
  font-weight: 600
}

.ob-pane {
  position: absolute;
  inset: 50px 0 0;
  padding: 26px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s, transform .5s;
  pointer-events: none
}

.ob-pane.on {
  opacity: 1;
  transform: none
}

.doc {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: #fbf3e4;
  color: #20160a;
  border-radius: 10px;
  padding: 22px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .35)
}

.doc-h {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .12em;
  margin-bottom: 14px
}

.doc-h span {
  display: block;
  font-weight: 600;
  font-size: 11px;
  color: #8a6a3a;
  letter-spacing: .04em;
  margin-top: 2px
}

.ln {
  display: block;
  height: 7px;
  background: #e6d7bb;
  border-radius: 4px;
  margin: 9px 0
}

.sig {
  margin-top: 16px;
  border-top: 1.5px solid #20160a;
  padding-top: 4px
}

.sig svg {
  width: 170px;
  height: 44px;
  margin-bottom: -4px;
  display: block
}

.sig span {
  font-size: 11px;
  color: #8a6a3a;
  letter-spacing: normal;
  text-transform: none
}

.sigp {
  fill: none;
  stroke: #1d3f8a;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420
}

.on .sigp {
  animation: sg 2s .3s ease forwards
}

@keyframes sg {
  to {
    stroke-dashoffset: 0
  }
}

.stamp {
  position: absolute;
  right: 16px;
  bottom: 22px;
  border: 3px solid #2f9e5b;
  color: #2f9e5b;
  font-weight: 900;
  letter-spacing: .1em;
  padding: 4px 10px;
  border-radius: 6px;
  transform: rotate(-12deg) scale(2);
  opacity: 0
}

.on .stamp {
  animation: st .4s 2.4s cubic-bezier(.3, 1.6, .5, 1) forwards
}

@keyframes st {
  to {
    opacity: 1;
    transform: rotate(-12deg) scale(1)
  }
}

.vol {
  width: 100%;
  max-width: 380px
}

.vol-h {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #9fb0c8;
  font-weight: 600;
  margin-bottom: 18px
}

.vol-h b {
  color: #f6c58f
}

.vtrack {
  position: relative;
  height: 14px;
  background: rgba(255, 255, 255, .1);
  border-radius: 8px
}

.vfill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--teal), var(--orange))
}

.on .vfill {
  animation: vf 3.2s .3s ease-out forwards
}

@keyframes vf {
  to {
    width: 100%
  }
}

.vtrack s {
  position: absolute;
  top: -6px;
  width: 3px;
  height: 26px;
  background: #fff;
  border-radius: 2px;
  transform: translateX(-3px)
}

.vlab {
  position: relative;
  height: 22px;
  margin-top: 8px
}

.vlab span {
  position: absolute;
  transform: translateX(-100%);
  font-size: 12px;
  font-weight: 700;
  color: #9fb0c8
}

.vlab span:first-child {
  transform: translateX(-50%)
}

.tiers2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px
}

.tiers2>div {
  border: 1.5px solid rgba(255, 255, 255, .15);
  border-radius: 14px;
  padding: 14px;
  opacity: .35
}

.tiers2 small {
  display: block;
  font-size: 11px;
  color: #9fb0c8
}

.tiers2 strong {
  font: 800 26px "Outfit", Georgia, serif
}

.on .t1 {
  animation: tl .5s 1.7s forwards
}

.on .t2 {
  animation: tl .5s 3.3s forwards
}

@keyframes tl {
  to {
    opacity: 1;
    border-color: var(--orange);
    background: rgba(238, 138, 42, .14);
    color: #f6c58f
  }
}

.pay {
  position: relative;
  width: 100%;
  max-width: 360px;
  display: grid;
  gap: 14px
}

.nt {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  padding: 16px;
  opacity: 0;
  transform: translateY(20px)
}

.nt i {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #2f9e5b;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 800
}

.nt.n2 i {
  background: var(--orange);
  color: #1a0f00
}

.nt b,
.nt .nt-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
}

.nt small {
  color: #9fb0c8;
  font-size: 12px
}

.nt strong {
  margin-left: auto;
  font: 800 22px "Outfit", Georgia, serif;
  color: #7cffb2
}

.on .n1 {
  animation: nt .6s .2s forwards
}

.on .n2 {
  animation: nt .6s 1.3s forwards
}

@keyframes nt {
  to {
    opacity: 1;
    transform: none
  }
}

.cf span {
  position: absolute;
  right: 56px;
  top: 96px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  opacity: 0
}

.on .cf span {
  animation: bu 1.1s 1.5s ease-out
}

@keyframes bu {
  0% {
    opacity: 1;
    transform: rotate(var(--a)) translateY(0)
  }

  100% {
    opacity: 0;
    transform: rotate(var(--a)) translateY(-80px)
  }
}

@media(max-width:820px) {
  .ob {
    grid-template-columns: 1fr
  }

  .ob-stage {
    min-height: 400px
  }
}

@media (prefers-reduced-motion:reduce) {
  .go .ob-step.on .ob-bar {
    animation: none
  }

  .sigp {
    stroke-dashoffset: 0
  }

  .stamp,
  .nt {
    opacity: 1;
    transform: none
  }

  .vfill {
    width: 100%
  }

  .tiers2>div {
    opacity: 1
  }
}

#how {
  position: relative;
  padding-top: 28px;
  border-top: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface)
}

#how:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 42%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 42%, #000 25%, transparent 78%);
  pointer-events: none
}

#how:after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='rgba(246,197,143,0.20)'/%3E%3C/svg%3E");
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
  pointer-events: none
}

#how .wrap {
  position: relative;
  z-index: 1
}

.ob-track {
  position: relative
}

.ob-track.scrolly {
  height: 300vh
}

.ob-track.scrolly .ob-sticky {
  position: sticky;
  top: 104px;
  min-height: calc(100vh - 104px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 14px;
  padding-bottom: 14px;
  box-sizing: border-box
}

.ob-track.scrolly .ob-step.on .ob-bar {
  animation: none !important
}

.ob-line i {
  transition: none
}

.ob-hint {
  margin: 8px 0 0 54px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted);
  animation: bob 1.6s ease-in-out infinite;
  transition: opacity .4s
}

.ob-hint.off {
  opacity: 0
}

.stmt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 340px
}

.stmt .btn {
  padding: 10px 22px;
  font-size: 14px
}

.stmt-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  border-top: 1.5px dashed #c9b489;
  padding-top: 10px;
  font-size: 13px;
  font-weight: 700
}

.stmt-total strong {
  font: 800 22px "Outfit", Georgia, serif
}

.drop {
  width: 100%;
  border: 1.5px dashed rgba(255, 255, 255, .35);
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  background: rgba(255, 255, 255, .04);
  transition: border-color .2s, background .2s, transform .2s
}

.drop:hover {
  border-color: var(--teal);
  background: rgba(44, 138, 138, .08)
}

.drop.drag {
  border-color: #7cffb2;
  background: rgba(124, 255, 178, .08);
  transform: scale(1.02)
}

.drop svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #f6c58f;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
  margin: 0 auto 8px
}

.drop b {
  display: block;
  font-size: 14px;
  color: #fff
}

.drop small {
  display: block;
  margin-top: 4px;
  color: #9fb0c8;
  font-size: 12px
}

.drop small u {
  color: #f6c58f
}

.filelist {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  width: 100%;
  max-height: 96px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.filelist li {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 12.5px;
  color: #e6edf6
}

.filelist li .fn {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.filelist li .ok {
  color: #7cffb2;
  font-weight: 800
}

.filelist li button {
  background: none;
  border: 0;
  color: #9fb0c8;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px
}

.filemsg {
  min-height: 18px;
  margin: 8px 0 0;
  font-size: 12.5px;
  color: #ffb4a6;
  text-align: center
}

.filemsg.good {
  color: #7cffb2
}

.stmt .btn[disabled] {
  opacity: .45;
  cursor: not-allowed
}

.pos {
  width: 100%;
  max-width: 340px;
  text-align: center
}

.pos svg {
  width: 100%;
  height: auto;
  display: block
}

.pos-cap {
  margin-top: 12px;
  font-size: 13px;
  color: #9fb0c8;
  font-weight: 600
}

@keyframes bob {
  50% {
    transform: translateY(4px)
  }
}

.gs {
  will-change: transform
}

/* feature icon row (replaces stats) */
.fi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px
}

.fi {
  text-align: center;
  padding: 18px 8px
}

.fi-ic {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--teal), #1e6a72);
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  box-shadow: 0 8px 18px rgba(44, 138, 138, .3)
}

.fi-ic svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.fi b {
  display: block;
  font-size: 14px
}

.fi small {
  color: var(--muted);
  font-size: 12px
}

@media(max-width:820px) {
  .fi-row {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* trust signals */
.trust-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px
}

.trust-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px
}

.trust-item svg {
  flex: none;
  width: 30px;
  height: 30px;
  stroke: var(--teal);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.trust-item b {
  display: block;
  font-size: 14px
}

.trust-item small {
  color: var(--muted);
  font-size: 12px
}

@media(max-width:820px) {
  .trust-row {
    grid-template-columns: 1fr 1fr
  }
}

/* bundle scene */
.bundle-vis {
  position: relative;
  background: linear-gradient(160deg, #0a1628, #123a4a);
  border-radius: 28px;
  padding: 0;
  box-shadow: 0 30px 60px rgba(10, 22, 40, .25);
  overflow: hidden
}

.bv-stage {
  position: relative;
  height: 320px
}

.bv-term {
  position: absolute;
  left: 36px;
  top: 70px;
  width: 96px;
  height: 150px;
  background: #0a1628;
  border: 2px solid var(--teal);
  border-radius: 12px;
  padding: 10px
}

.bv-screen {
  background: #0e2540;
  border-radius: 6px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px
}

.bv-amt {
  font: 700 16px "Outfit", Georgia, serif;
  color: #7cffb2
}

.bv-status {
  font-size: 8px;
  color: #9fb0c8;
  letter-spacing: .06em
}

.bv-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 8px
}

.bv-pad i {
  background: #12314d;
  border-radius: 3px;
  height: 12px
}

.bv-slot {
  margin-top: 8px;
  height: 5px;
  background: #000;
  border-radius: 2px
}

.bv-card {
  position: absolute;
  left: 96px;
  top: 34px;
  width: 70px;
  height: 44px;
  border-radius: 6px;
  background: linear-gradient(135deg, #123a4a, #2c8a8a);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .4);
  animation: bvtap 4s ease-in-out infinite
}

.bv-chip {
  position: absolute;
  left: 8px;
  top: 9px;
  width: 16px;
  height: 12px;
  border-radius: 2px;
  background: #f6c58f
}

.bv-nfc {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 14px;
  height: 14px;
  color: #f6e7c8;
  transform: rotate(90deg)
}

@keyframes bvtap {

  0%,
  16% {
    transform: translate(0, 0) rotate(0)
  }

  30%,
  42% {
    transform: translate(28px, 58px) rotate(-8deg)
  }

  70%,
  100% {
    transform: translate(0, 0) rotate(0)
  }
}

.bv-wave {
  position: absolute;
  left: 120px;
  top: 96px;
  width: 60px;
  height: 60px;
  opacity: 0;
  animation: bvwave 4s ease-in-out infinite
}

.bv-wave path {
  opacity: 0
}

@keyframes bvwave {

  0%,
  34% {
    opacity: 0
  }

  38% {
    opacity: 1
  }

  40% {}

  44% {
    opacity: 1
  }

  52%,
  100% {
    opacity: 0
  }
}

.bv-wave path {
  animation: bvwp 4s ease-in-out infinite
}

@keyframes bvwp {

  0%,
  36% {
    opacity: 0
  }

  40%,
  48% {
    opacity: 1
  }

  54%,
  100% {
    opacity: 0
  }
}

.bv-check {
  position: absolute;
  left: 132px;
  top: 60px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2f9e5b;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.4);
  animation: bvck 4s ease-in-out infinite
}

.bv-check svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round
}

@keyframes bvck {

  0%,
  48% {
    opacity: 0;
    transform: scale(.4)
  }

  54% {
    opacity: 1;
    transform: scale(1.15)
  }

  60%,
  80% {
    opacity: 1;
    transform: scale(1)
  }

  88%,
  100% {
    opacity: 0;
    transform: scale(.7)
  }
}

.bv-drawer {
  position: absolute;
  right: 36px;
  top: 150px;
  width: 110px;
  height: 56px;
  background: #0e2540;
  border: 2px solid var(--orange);
  border-radius: 8px;
  overflow: hidden
}

.bv-till {
  position: absolute;
  inset: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px
}

.bv-till i {
  background: #12314d;
  border-radius: 2px
}

.bv-drawer:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  background: #0a1628;
  transform: translateY(0);
  animation: bvdr 4s ease-in-out infinite
}

@keyframes bvdr {

  0%,
  58% {
    transform: translateY(0)
  }

  64%,
  80% {
    transform: translateY(58px)
  }

  90%,
  100% {
    transform: translateY(0)
  }
}

.bv-scan {
  position: absolute;
  right: 70px;
  top: 56px;
  width: 44px;
  height: 58px;
  background: #0a1628;
  border: 2px solid var(--teal);
  border-radius: 8px
}

.bv-beam {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 8px;
  height: 2px;
  background: #ff5a4a;
  box-shadow: 0 0 8px #ff5a4a;
  animation: bvbeam 4s ease-in-out infinite
}

@keyframes bvbeam {

  0%,
  8% {
    top: 8px
  }

  20% {
    top: 44px
  }

  30%,
  100% {
    top: 8px
  }
}

.bv-caption {
  text-align: center;
  font-size: 13px;
  color: #c5d2e6;
  padding: 14px 18px 20px;
  border-top: 1px solid rgba(255, 255, 255, .08)
}

@media (prefers-reduced-motion:reduce) {

  .bv-card,
  .bv-wave path,
  .bv-check,
  .bv-drawer:before,
  .bv-beam {
    animation: none
  }

  .bv-check {
    opacity: 1;
    transform: scale(1)
  }

  .bv-card {
    transform: translate(28px, 58px) rotate(-8deg)
  }
}

/* why tabbed showcase */
.why-wrap {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(10, 22, 40, .06)
}

.wt-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--soft)
}

.wt {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  padding: 18px 20px;
  cursor: pointer;
  position: relative
}

.wt-ic {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  transition: all .25s
}

.wt-ic svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--teal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.wt b {
  font-size: 14.5px;
  font-weight: 700
}

.wt.on {
  background: var(--surface);
  border-left-color: var(--orange)
}

.wt.on .wt-ic {
  background: linear-gradient(135deg, #f7a955, #ee8a2a);
  border-color: transparent
}

.wt.on .wt-ic svg {
  stroke: #fff
}

.wp-stage {
  position: relative;
  min-height: 280px;
  overflow: hidden
}

.wp-stage>.wp {
  z-index: 1
}

@media (prefers-reduced-motion:reduce) {
  .orb,
  .ring1,
  .ring2,
  .wave path,
  .wrench2,
  .screw,
  .line-chart,
  .dot-end,
  .savetxt,
  .bar1,
  .bar2,
  .bar3,
  .grow-arrow,
  .linkA,
  .linkB,
  .snip,
  .payoff,
  .flow1,
  .flow2 {
    animation: none;
    opacity: 1
  }
}

.wp {
  position: absolute;
  inset: 0;
  padding: 44px;
  display: none;
  flex-direction: column;
  justify-content: center;
  animation: wpIn .5s ease
}

.wp.on {
  display: flex
}

@keyframes wpIn {
  from {
    opacity: 0;
    transform: translateX(16px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.wp-ic {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--teal), #1e6a72);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  box-shadow: 0 10px 22px rgba(44, 138, 138, .3)
}

.wp-ic svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.wp h3 {
  font-size: 24px;
  margin-bottom: 10px
}

.wp p {
  color: var(--muted);
  font-size: 15.5px;
  max-width: 460px
}

@media(max-width:820px) {
  .why-wrap {
    grid-template-columns: 1fr
  }

  .wt-list {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line)
  }

  .wt {
    flex-direction: column;
    text-align: center;
    gap: 6px;
    padding: 14px 12px;
    border-left: 0;
    border-bottom: 3px solid transparent;
    min-width: 96px
  }

  .wt.on {
    border-left: 0;
    border-bottom-color: var(--orange)
  }

  .wt b {
    font-size: 11.5px
  }

  .wp {
    padding: 28px
  }
}

.wp {
  padding: 36px 44px
}

.wp-vis {
  width: 100%;
  max-width: 220px;
  margin-bottom: 14px;
  display: block
}

.wp-vis svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible
}

.orb {
  animation: orbf 6s ease-in-out infinite
}

@keyframes orbf {

  0%,
  100% {
    r: 70;
    opacity: 1
  }

  50% {
    r: 80;
    opacity: .7
  }
}

.ring1,
.ring2 {
  transform-origin: 110px 80px;
  animation: ripple 3s ease-out infinite
}

.ring2 {
  animation-delay: 1.5s
}

@keyframes ripple {
  0% {
    r: 30;
    opacity: .9
  }

  100% {
    r: 60;
    opacity: 0
  }
}

.wave path {
  transform-origin: center;
  animation: wv 1.2s ease-in-out infinite
}

@keyframes wv {

  0%,
  100% {
    transform: scaleY(.4)
  }

  50% {
    transform: scaleY(1)
  }
}

.wrench2 {
  transform-origin: 150px 62px;
  animation: wr2 2.2s ease-in-out infinite
}

@keyframes wr2 {

  0%,
  100% {
    transform: rotate(0)
  }

  50% {
    transform: rotate(-22deg)
  }
}

.screw {
  transform-origin: 110px 118px;
  animation: screwspin 2.2s ease-in-out infinite
}

@keyframes screwspin {

  0%,
  20% {
    transform: rotate(0)
  }

  80%,
  100% {
    transform: rotate(180deg)
  }
}

.line-chart {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  animation: lc2 2s ease forwards infinite alternate
}

@keyframes lc2 {
  to {
    stroke-dashoffset: 0
  }
}

.dot-end {
  animation: dep 2s ease-in-out infinite
}

@keyframes dep {

  0%,
  60% {
    opacity: 0;
    r: 2
  }

  70% {
    opacity: 1;
    r: 7
  }

  100% {
    opacity: 1;
    r: 5
  }
}

.savetxt {
  opacity: 0;
  animation: savein 2s ease infinite
}

@keyframes savein {

  0%,
  65% {
    opacity: 0;
    transform: translateY(6px)
  }

  80%,
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

.bar1,
.bar2,
.bar3 {
  transform-origin: bottom;
  animation: barrise 2.4s ease-in-out infinite
}

.bar1 {
  transform-box: fill-box
}

.bar2 {
  transform-box: fill-box;
  animation-delay: .15s
}

.bar3 {
  transform-box: fill-box;
  animation-delay: .3s
}

@keyframes barrise {

  0%,
  100% {
    transform: scaleY(.82)
  }

  50% {
    transform: scaleY(1)
  }
}

.grow-arrow {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: ga 2.4s ease infinite
}

@keyframes ga {
  0% {
    stroke-dashoffset: 140
  }

  60%,
  100% {
    stroke-dashoffset: 0
  }
}

.linkA {
  animation: linkwig 2.6s ease-in-out infinite
}

.linkB {
  animation: linkwig 2.6s ease-in-out infinite .1s
}

@keyframes linkwig {

  0%,
  100% {
    transform: translateX(0)
  }

  50% {
    transform: translateX(3px)
  }
}

.snip {
  transform-origin: 107px 50px;
  animation: snipmove 2.6s ease-in-out infinite
}

@keyframes snipmove {

  0%,
  20% {
    transform: rotate(0) translateY(0)
  }

  35% {
    transform: rotate(18deg) translateY(2px)
  }

  50% {
    transform: rotate(0) translateY(6px)
  }

  100% {
    transform: rotate(0) translateY(6px)
  }
}

.payoff {
  opacity: 0;
  animation: payin 2.6s ease infinite
}

@keyframes payin {

  0%,
  55% {
    opacity: 0;
    transform: translateY(6px)
  }

  70%,
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

.flow1,
.flow2 {
  stroke-dashoffset: 0;
  animation: flowmv 1.6s linear infinite
}

.flow2 {
  animation-delay: .5s
}

@keyframes flowmv {
  to {
    stroke-dashoffset: -20
  }
}

@media(max-width:820px) {
  .wp {
    padding: 22px
  }

  .wp-vis {
    max-width: 150px
  }
}

#why .wt-track {
  margin-top: 0
}

.wt-sticky .why-wrap {
  margin-top: 28px
}

.wt-track.scrolly {
  height: 220vh
}

.wt-track.scrolly .wt-sticky {
  position: sticky;
  top: 84px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box
}

.wt-track.scrolly .wt-sticky > .h {
  margin-bottom: 14px
}

.wt-track.scrolly .wt-sticky > .h h2 {
  font-size: 30px
}

.wt-track.scrolly .wt-sticky .why-wrap {
  margin-top: 16px
}

.calc-track {
  position: relative
}

.calc-track.scrolly {
  height: 210vh
}

.calc-track.scrolly .calc-sticky {
  position: sticky;
  top: 104px;
  min-height: calc(100vh - 104px);
  display: flex;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 14px;
  box-sizing: border-box
}

.calc-track.scrolly .calc-sticky>.calc {
  width: 100%
}

@media(max-width:820px) {
  .calc-track.scrolly {
    height: auto
  }

  .calc-track.scrolly .calc-sticky {
    position: static;
    min-height: 0;
    display: block;
    padding-top: 0
  }
}

@media(max-width:820px) {
  .wt-track.scrolly {
    height: auto
  }

  .wt-track.scrolly .wt-sticky {
    position: static
  }
}

.agent-cta {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  background: var(--soft);
  border: 1px dashed var(--teal);
  border-radius: 16px;
  padding: 18px 22px
}

.agent-cta b {
  display: block;
  font-size: 15px
}

.agent-cta span {
  color: var(--muted);
  font-size: 13.5px
}

.btn.ghost-lt {
  background: transparent;
  border: 1.5px solid var(--teal);
  color: var(--teal);
  padding: 10px 18px;
  font-size: 14px;
  transition: all .2s ease
}

.btn.ghost-lt:hover {
  border-color: #2ec4a5;
  color: #2ec4a5;
  box-shadow: 0 0 0 2px rgba(46, 196, 165, .3)
}

body {
  font-size: 16.5px;
  letter-spacing: 0
}

h1,
h2,
h3 {
  font-family: "Outfit", Georgia, serif;
  letter-spacing: 0
}

h2 {
  font-weight: 650
}

p {
  line-height: 1.65
}

.eyebrow {
  letter-spacing: 0;
  font-weight: 700
}

.card h3,
.wp h3,
.wt b {
  font-weight: 650
}

.trust-item {
  transition: transform .2s
}

.trust-item:hover {
  transform: translateY(-3px)
}

.trust-item svg {
  transition: transform .4s ease
}

.trust-item:nth-child(1) svg {
  animation: pulseIc 2.8s ease-in-out infinite
}

.trust-item:nth-child(2) svg {
  animation: swayIc 3.4s ease-in-out infinite
}

.trust-item:nth-child(3) svg {
  animation: riseIc 2.6s ease-in-out infinite
}

.trust-item:nth-child(4) svg {
  animation: spinIc 5s linear infinite
}

@keyframes pulseIc {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.14)
  }
}

@keyframes swayIc {

  0%,
  100% {
    transform: rotate(-4deg)
  }

  50% {
    transform: rotate(4deg)
  }
}

@keyframes riseIc {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-3px)
  }
}

@keyframes spinIc {
  0% {
    transform: rotate(0)
  }

  100% {
    transform: rotate(360deg)
  }
}

@media (prefers-reduced-motion:reduce) {
  .trust-item svg {
    animation: none
  }
}

.theme-toggle {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #f6c58f;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .2s ease;
  padding: 0;
  flex-shrink: 0
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, .16);
  border-color: #2ec4a5;
  color: #2ec4a5;
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(46, 196, 165, .35)
}

.theme-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s ease
}

.theme-toggle:hover svg {
  transform: rotate(15deg)
}

.theme-toggle .theme-icon-sun {
  display: block
}

.theme-toggle .theme-icon-moon {
  display: none
}

/* Light Theme Overrides */
[data-theme="light"] {
  color-scheme: light
}

[data-theme="light"] body {
  background: var(--bg);
  color: var(--ink)
}

[data-theme="light"] nav {
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid rgba(0, 0, 0, .08)
}

[data-theme="light"] nav.sm {
  border-color: rgba(0, 0, 0, .08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06)
}

[data-theme="light"] .links a:not(.btn) {
  color: #334155
}

[data-theme="light"] .links a:not(.btn):hover {
  color: #157365
}

[data-theme="light"] .btn:not(.ghost),
[data-theme="light"] .links .btn {
  color: #ffffff !important;
}

[data-theme="light"] .nav-dropdown-btn {
  background: rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .14);
  color: #0b1a2e !important
}

[data-theme="light"] .nav-dropdown-btn:hover,
[data-theme="light"] .nav-dropdown:hover .nav-dropdown-btn,
[data-theme="light"] .nav-dropdown.open .nav-dropdown-btn {
  background: rgba(0, 0, 0, .08);
  border-color: #157365;
  color: #157365 !important;
  box-shadow: 0 0 0 2px rgba(21, 115, 101, .2)
}

[data-theme="light"] .nav-dropdown-menu {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, .1);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .12)
}

[data-theme="light"] .nav-dropdown-item {
  color: #334155 !important
}

[data-theme="light"] .nav-dropdown-item:hover {
  background: rgba(44, 138, 138, .08);
  color: #157365 !important
}

[data-theme="light"] .nav-dropdown-item.active {
  color: #1d7272 !important;
  background: rgba(44, 138, 138, .12)
}

[data-theme="light"] .theme-toggle {
  background: rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .12);
  color: #475569
}

[data-theme="light"] .theme-toggle:hover {
  background: rgba(0, 0, 0, .09);
  border-color: #157365;
  color: #0b1a2e;
  box-shadow: 0 0 0 2px rgba(21, 115, 101, .2)
}

[data-theme="light"] .theme-toggle .theme-icon-sun {
  display: none
}

[data-theme="light"] .theme-toggle .theme-icon-moon {
  display: block
}

[data-theme="light"] .hero {
  background: var(--bg);
  color: var(--ink)
}

[data-theme="light"] .hero::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M48 0v48H0' fill='none' stroke='rgba(15,23,42,0.06)' stroke-width='1'/%3E%3Cpath d='M0 4v-8M-4 0h8' fill='none' stroke='rgba(29,114,114,0.45)' stroke-width='1.2'/%3E%3Ccircle cx='24' cy='24' r='1.4' fill='rgba(224,116,21,0.38)'/%3E%3C/svg%3E");
  mask-image: radial-gradient(ellipse 90% 80% at 50% 32%, #000 35%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 32%, #000 35%, transparent 95%)
}

[data-theme="light"] .hero h1 {
  color: #0b1a2e
}

[data-theme="light"] .hero h1 em {
  color: var(--teal);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  filter: none
}

[data-theme="light"] .hero p {
  color: #334155
}

[data-theme="light"] .hero .eyebrow {
  color: var(--teal)
}

[data-theme="light"] .tier {
  background: linear-gradient(135deg, var(--orange), #f5a95a);
  border: 0;
  color: #1a0f00;
  box-shadow: 0 10px 26px rgba(238, 138, 42, .25);
}

[data-theme="light"] .tier.top {
  background: linear-gradient(135deg, #157365, #0d5442);
  color: #fff;
  border: 0;
  box-shadow: 0 10px 26px rgba(21, 115, 101, .25);
}

[data-theme="light"] .btn.ghost {
  background: transparent;
  color: #0b1a2e;
  border: 1.5px solid rgba(11, 26, 46, .32);
  transition: all .2s ease
}

[data-theme="light"] .btn.ghost:hover {
  border-color: #157365;
  color: #157365;
  background: rgba(44, 138, 138, .06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08)
}

[data-theme="light"] .btn.ghost-lt {
  border-color: var(--teal);
  color: var(--teal)
}

[data-theme="light"] .btn.ghost-lt:hover {
  border-color: #157365;
  color: #157365
}

[data-theme="light"] .gs path[fill="#0c1d33"] {
  fill: #e2e8f0
}

[data-theme="light"] .marq {
  background: #edf2f7;
  border-bottom: 1px solid #cbd5e1
}

[data-theme="light"] .track span {
  color: #475569
}

[data-theme="light"] .strip {
  background: #ffffff;
  border-bottom: 1px solid var(--line)
}

[data-theme="light"] .strip b {
  color: var(--teal);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial
}

[data-theme="light"] .strip span {
  color: var(--muted)
}

[data-theme="light"] #how {
  background: var(--surface)
}

[data-theme="light"] #how:before {
  background-image:
    linear-gradient(rgba(11, 26, 46, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 26, 46, .06) 1px, transparent 1px)
}

[data-theme="light"] #how:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='rgba(138,80,21,0.20)'/%3E%3C/svg%3E")
}

[data-theme="light"] .card {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(11, 26, 46, .04)
}

[data-theme="light"] .card:hover {
  box-shadow: 0 16px 36px rgba(11, 26, 46, .08)
}

[data-theme="light"] .card h3 {
  color: #0b1a2e
}

[data-theme="light"] .card p {
  color: var(--muted)
}

.value-cards-grid .card {
  position: relative;
  overflow: hidden;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(8, 26, 38, .1), inset 0 1px 0 rgba(255, 255, 255, .38);
  padding: 26px;
  color: var(--ink);
  backdrop-filter: blur(8px)
}

.value-cards-grid .card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 78%),
    linear-gradient(132deg, rgba(255, 255, 255, .18), transparent 38%, rgba(255, 255, 255, .05) 68%, transparent);
  opacity: .72;
  transition: opacity .25s ease;
  pointer-events: none
}

.value-cards-grid .card::before {
  content: "";
  display: block;
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: 0;
  width: 32%;
  z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
  transform: translateX(-160%) rotate(20deg);
  animation: valueCardGloss 6s ease-in-out infinite;
  pointer-events: none
}

.value-cards-grid .card:hover::after {
  opacity: 1
}

.value-cards-grid .card h3 {
  position: relative;
  z-index: 1;
  color: var(--ink)
}

.value-cards-grid .card:hover {
  box-shadow: 0 16px 34px rgba(8, 26, 38, .24)
}

.js .value-cards-grid .card.in:hover {
  transform: translateY(-4px)
}

@keyframes valueCardGloss {
  0%, 12% {
    opacity: 0;
    transform: translateX(-160%) rotate(20deg)
  }

  24% {
    opacity: .7
  }

  70% {
    opacity: .3
  }

  100% {
    opacity: 0;
    transform: translateX(480%) rotate(20deg)
  }
}

@media (prefers-reduced-motion: reduce) {
  .value-cards-grid .card::before {
    animation: none
  }

  .value-cards-grid .card::after {
    background-image: linear-gradient(132deg, rgba(255, 255, 255, .18), transparent 38%, rgba(255, 255, 255, .05) 68%, transparent);
    transition: none
  }

  .js .value-cards-grid .card.in:hover {
    transform: none
  }
}

[data-theme="light"] .bonus {
  background: var(--soft);
  border-color: var(--teal)
}

[data-theme="light"] .faq details {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .02)
}

[data-theme="light"] .faq summary {
  color: #0b1a2e
}

[data-theme="light"] .faq p {
  color: var(--muted)
}

[data-theme="light"] .trust-item {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .03)
}

[data-theme="light"] .trust-item b {
  color: #0b1a2e
}

[data-theme="light"] .trust-item small {
  color: var(--muted)
}

[data-theme="light"] .why-wrap {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 36px rgba(11, 26, 46, .05)
}

[data-theme="light"] .wt-list {
  background: #f8fafc;
  border-color: var(--line)
}

[data-theme="light"] .wt {
  color: #334155
}

[data-theme="light"] .wt.on {
  background: #ffffff;
  color: #0b1a2e
}

[data-theme="light"] .wt-ic {
  background: #ffffff;
  border: 1px solid var(--line)
}

[data-theme="light"] .wp h3 {
  color: #0b1a2e
}

[data-theme="light"] .wp p {
  color: var(--muted)
}

[data-theme="light"] .agent-cta {
  background: var(--soft);
  border-color: var(--teal);
  color: #0b1a2e
}

[data-theme="light"] .agent-cta b {
  color: #0b1a2e
}

[data-theme="light"] .agent-cta span {
  color: var(--muted)
}

[data-theme="light"] .ob-step.on .ob-t {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 10px 30px rgba(11, 26, 46, .06)
}

[data-theme="light"] .ob-step:not(.on):hover .ob-t {
  background: rgba(11, 26, 46, .02)
}

[data-theme="light"] .ob-step.on .ob-n {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

[data-theme="light"] .ob-step:not(.on) .ob-n {
  background: linear-gradient(135deg, #f7a955, #ee8a2a);
  border-color: transparent;
  color: #1a0f00;
  box-shadow: 0 2px 8px rgba(238, 138, 42, .25);
}

[data-theme="light"] .ob-t b {
  color: #0b1a2e
}

[data-theme="light"] .ob-t small {
  color: var(--muted)
}

[data-theme="light"] #apply {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  color: var(--ink);
  border-top: 1px solid var(--line)
}

[data-theme="light"] #apply h2 {
  color: #0b1a2e
}

[data-theme="light"] #apply p {
  color: #334155
}

[data-theme="light"] .contact a {
  color: #0f5e5e
}

[data-theme="light"] form {
  background: #ffffff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(11, 26, 46, .06)
}

[data-theme="light"] form input,
[data-theme="light"] form select,
[data-theme="light"] form textarea {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0b1a2e
}

[data-theme="light"] footer {
  background: #e2e8f0;
  color: #475569;
  border-top: 1px solid #cbd5e1
}

[data-theme="light"] footer a {
  color: #1d7272
}

@media(max-width:540px) {
  .theme-toggle {
    width: 32px;
    height: 32px
  }

  .theme-toggle svg {
    width: 16px;
    height: 16px
  }

  .links {
    gap: 10px
  }
}

/* Floating Center-Right Section Navigation */
.floating-nav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 990;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s
}

body.chat-open .floating-nav {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(12px)
}

.floating-nav-track {
  pointer-events: auto;
  background: rgba(10, 22, 40, .76);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .05)
}

.floating-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  text-decoration: none;
  border-radius: 50%;
  outline: none;
  cursor: pointer
}

.floating-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .32);
  transition: all .28s cubic-bezier(.2, .8, .2, 1)
}

.floating-nav-item:hover .floating-nav-dot {
  background: #2ec4a5;
  transform: scale(1.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25)
}

.floating-nav-item.active .floating-nav-dot {
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2ec4a5 0%, #157365 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  transform: scale(1.05)
}

.floating-nav-tooltip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: rgba(10, 22, 40, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 6px 14px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45)
}

.floating-nav-tooltip::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(10, 22, 40, .94)
}

.floating-nav-item:hover .floating-nav-tooltip,
.floating-nav-item:focus-visible .floating-nav-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0)
}

.floating-nav-item:focus-visible {
  outline: 2px solid #2ec4a5;
  outline-offset: 3px
}

/* Light Theme Overrides for Floating Nav */
[data-theme="light"] .floating-nav-track {
  background: rgba(255, 255, 255, .88);
  border-color: rgba(0, 0, 0, .1);
  box-shadow: 0 14px 34px rgba(11, 26, 46, .12), 0 0 0 1px rgba(0, 0, 0, .04)
}

[data-theme="light"] .floating-nav-dot {
  background: rgba(15, 23, 42, .25)
}

[data-theme="light"] .floating-nav-item:hover .floating-nav-dot {
  background: #157365;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15)
}

[data-theme="light"] .floating-nav-item.active .floating-nav-dot {
  background: linear-gradient(180deg, #2ec4a5 0%, #157365 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15)
}

[data-theme="light"] .floating-nav-tooltip {
  background: #ffffff;
  border-color: rgba(0, 0, 0, .12);
  color: #0b1a2e;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14)
}

[data-theme="light"] .floating-nav-tooltip::after {
  border-color: transparent transparent transparent #ffffff
}

@media(max-width:900px) {
  .floating-nav {
    display: none
  }
}

/* Connect chat widget */
.chat-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
  font-size: 16px;
  font-family: "Lato", system-ui, sans-serif;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
  box-shadow: none;
  transition: transform .15s
}

.chat-fab:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: none
}

.chat-fab:after {
  display: none
}

@keyframes fabPing {
  0% {
    opacity: .8;
    transform: scale(1)
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(1.1)
  }
}

.chat-fab-avatar {
  animation: fabPulse 2.4s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .15))
}

@keyframes fabPulse {
  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.07)
  }
}

.chat-fab-avatar {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f7a955, #ee8a2a);
  display: grid;
  place-items: center;
  font: 800 22px "Outfit", Georgia, serif;
  color: #1a0f00
}

.chat-fab-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4)
}

.chat-fab-avatar:before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(238, 138, 42, .65);
  animation: fabPing 2.2s ease-out infinite;
  pointer-events: none
}

.chat-fab-live {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #7cffb2;
  border: 2.5px solid #fff;
  z-index: 1
}

.chat-fab-live:after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(124, 255, 178, .7);
  animation: livePing 1.8s ease-out infinite
}

@keyframes livePing {
  0% {
    opacity: .9;
    transform: scale(.6)
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(1.15)
  }
}

.chat-fab-tx {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
  text-align: center;
  background: linear-gradient(135deg, #f7a955, #ee8a2a);
  color: #1a0f00;
  padding: 7px 16px 8px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  animation: none
}

.chat-fab-tx:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .6) 48%, transparent 62%);
  transform: translateX(-130%);
  animation: fabShine 3.2s ease-in-out infinite;
  pointer-events: none
}

@keyframes fabGlow {
  0%,
  100% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18)
  }

  50% {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22)
  }
}

@keyframes fabShine {
  0%,
  55% {
    transform: translateX(-130%)
  }

  100% {
    transform: translateX(130%)
  }
}

.chat-fab-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  opacity: .92
}

.chat-fab-sub i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7cffb2;
  font-style: normal;
  animation: subBlink 1.6s infinite
}

@keyframes subBlink {
  50% {
    opacity: .4
  }
}

.chat-win {
  position: fixed;
  right: 118px;
  bottom: 22px;
  z-index: 1000;
  width: min(560px, calc(100vw - 160px));
  height: min(760px, calc(100dvh - 120px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.98);
  transform-origin: bottom right;
  transition: opacity .25s, transform .25s, visibility .25s
}

.chat-win.open {
  opacity: 1;
  visibility: visible;
  transform: none
}

.chat-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 14px 14px 16px;
  background: linear-gradient(160deg, #0a1628, #123a4a);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.chat-av {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg, #f7a955, #ee8a2a);
  display: grid;
  place-items: center;
  font: 800 16px "Outfit", Georgia, serif;
  color: #1a0f00
}

.chat-head-tx {
  flex: 1;
  min-width: 0
}

.chat-head-tx b,
.chat-head-tx .chat-head-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
}

.chat-head-tx span {
  display: block;
  font-size: 12px;
  color: #9fb0c8
}

.chat-ico {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: transparent;
  color: #f6c58f;
  font-size: 16px;
  cursor: pointer;
  display: grid;
  place-items: center
}

.chat-ico:hover {
  border-color: #2ec4a5;
  color: #2ec4a5
}

.chat-prog {
  height: 3px;
  background: rgba(127, 144, 168, .18)
}

.chat-prog i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--teal), var(--orange));
  transition: width .3s
}

.chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.chat-row {
  display: flex
}

.chat-row.user {
  justify-content: flex-end
}

.chat-bubble {
  max-width: 84%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.5
}

.chat-row.bot .chat-bubble {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  border-top-left-radius: 6px
}

.chat-row.user .chat-bubble {
  background: linear-gradient(135deg, #2ec4a5, #157365);
  color: #fff;
  border-top-right-radius: 6px
}

.chat-bubble a {
  color: var(--cream)
}

.chat-row.user .chat-bubble a {
  color: #fff
}

.chat-typing {
  display: inline-flex;
  gap: 5px;
  padding: 14px 16px
}

.chat-typing s {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  text-decoration: none;
  animation: chatBlink 1s infinite
}

.chat-typing s:nth-child(2) {
  animation-delay: .15s
}

.chat-typing s:nth-child(3) {
  animation-delay: .3s
}

@keyframes chatBlink {
  40% {
    opacity: .25;
    transform: translateY(2px)
  }
}

.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 14px 10px
}

.chat-chips:empty {
  display: none
}

.chat-chip {
  border: 1.5px solid var(--teal);
  background: transparent;
  color: var(--teal);
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s
}

.chat-chip:hover {
  background: var(--teal);
  color: #fff
}

.chat-bar {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--surface)
}

.chat-bar input {
  flex: 1;
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 999px;
  padding: 12px 16px;
  font: inherit;
  font-size: 14px;
  min-width: 0
}

.chat-bar input:focus {
  outline: 2px solid var(--teal);
  border-color: var(--teal)
}

.chat-send {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, #2ec4a5, #157365);
  color: #fff;
  font-size: 19px;
  cursor: pointer
}

.chat-send:hover {
  transform: translateY(-1px)
}

/* Chat-app message chrome */
.chat-row.bot {
  gap: 8px;
  align-items: flex-end
}

.chat-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column
}

.chat-row.bot .chat-col {
  align-items: flex-start
}

.chat-row.user .chat-col {
  align-items: flex-end
}

.chat-row.bot .chat-bubble {
  align-self: flex-start
}

.chat-row.user .chat-bubble {
  align-self: flex-end
}

.chat-row-av {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f7a955, #ee8a2a);
  display: grid;
  place-items: center;
  font: 800 11px "Outfit", Georgia, serif;
  color: #1a0f00;
  overflow: hidden
}

.chat-row-av img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.chat-row-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 3px 2px
}

.chat-time {
  font-size: 10.5px;
  color: var(--muted);
  opacity: .85;
  margin: 3px 2px 0
}

/* In-chat file dropzone */
.chat-drop {
  align-self: stretch;
  border: 1.5px dashed var(--teal);
  border-radius: 14px;
  padding: 16px 14px;
  text-align: center;
  cursor: pointer;
  background: rgba(44, 138, 138, .07);
  transition: border-color .15s, background .15s, transform .15s
}

.chat-drop b {
  display: block;
  font-size: 13.5px;
  color: var(--ink)
}

.chat-drop small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px
}

.chat-drop.drag {
  border-color: #7cffb2;
  background: rgba(124, 255, 178, .1);
  transform: scale(1.01)
}

.chat-drop-files {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px
}

.chat-drop-files:empty {
  display: none
}

.chat-drop-file {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--ink)
}

.chat-drop-file span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left
}

.chat-drop-file button {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px
}

[data-theme="light"] .chat-win {
  box-shadow: 0 24px 60px rgba(11, 26, 46, .22)
}

[data-theme="light"] .chat-row.bot .chat-bubble {
  background: #f1f5f9
}

[data-theme="light"] .chat-fab-tx {
  text-shadow: none
}

@media(max-width:540px) {
  .chat-fab {
    right: 16px;
    bottom: 16px;
    padding: 0;
    font-size: 14px
  }

  .chat-win {
    right: 16px;
    left: 16px;
    width: auto;
    bottom: 150px;
    height: min(600px, calc(100dvh - 180px))
  }
}

@media (prefers-reduced-motion:reduce) {
  .chat-fab-avatar,
  .chat-fab-avatar:before,
  .chat-fab-live:after,
  .chat-fab-sub i,
  .chat-fab-tx,
  .chat-fab-tx:after,
  .chat-typing s {
    animation: none
  }

  .chat-win {
    transition: none
  }
}

/* Terms & Conditions / Legal Page */
.legal-hero {
  padding: 64px 0 40px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.legal-hero .eyebrow {
  color: var(--teal);
  margin-bottom: 10px;
}

.legal-hero h1 {
  font-size: clamp(32px, 4.5vw, 48px);
  margin: 0 0 12px;
  color: var(--ink);
  line-height: 1.15;
}

.legal-hero p {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

.legal-body {
  padding: 48px 0 80px;
}

.legal-content {
  max-width: 840px;
  margin: 0 auto;
}

.legal-content h2 {
  font-size: 22px;
  color: var(--ink);
  margin: 40px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.legal-content h2:first-of-type {
  margin-top: 0;
}

.legal-content p {
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 16px;
}

.legal-content ul,
.legal-content ol {
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.7;
  padding-left: 24px;
  margin: 0 0 20px;
}

.legal-content li {
  margin-bottom: 8px;
}

.legal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 24px 0;
}

.legal-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--teal);
}

.legal-card p:last-child {
  margin-bottom: 0;
}

.legal-highlight {
  background: rgba(238, 138, 42, 0.08);
  border-left: 4px solid var(--orange);
  padding: 16px 20px;
  border-radius: 0 10px 10px 0;
  margin: 24px 0;
}

.legal-highlight p {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
}

.legal-back-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 24px;
  text-decoration: none;
  transition: opacity .2s;
}

.legal-back-nav:hover {
  opacity: .8;
}

/* ==========================================================================
   Agent / Distributor Hero Section Styles
   ========================================================================== */
.hero.agent {
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: start;
  align-content: flex-start;
  padding: clamp(24px, 4vh, 44px) 0 clamp(72px, 12vh, 120px);
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.hero.agent .wrap,
.hero.agent .agent-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
}

.hero-left-content {
  min-width: 0;
  position: relative;
  z-index: 2;
  text-align: left;
}

.hero-right-badges {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-self: stretch;
  gap: 20px;
  position: relative;
  z-index: 3;
  min-width: 0;
}

.hero-badge-card {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 24px;
  padding: 24px 20px 22px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 0;
  width: auto;
  max-width: 100%;
  min-width: 0;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  overflow: hidden;
}

.hero-badge-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  pointer-events: none;
  z-index: 0;
}

.hero-badge-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
  border-color: var(--teal);
}

.hero-badge-card.expert-badge:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
  border-color: var(--orange);
}

.badge-seal-medallion {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.badge-seal-medallion.emerald-seal {
  background: #0d4a3e;
  border: 2px solid #2ec4a5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.badge-seal-medallion.gold-seal {
  background: #733c08;
  border: 2px solid #f6c58f;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.seal-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.seal-banner {
  margin-top: -10px;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  padding: 3px 12px;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
  white-space: nowrap;
}

.seal-banner.emerald {
  background: linear-gradient(135deg, #1aa482, #0d5f4b);
  color: #d1faee;
  border: 1px solid rgba(78, 242, 187, 0.7);
}

.seal-banner.gold {
  background: linear-gradient(135deg, #ee8a2a, #9e5408);
  color: #fff4e5;
  border: 1px solid rgba(246, 197, 143, 0.7);
}

.badge-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
  z-index: 1;
  width: 100%;
}

.badge-name {
  font-family: "Outfit", Georgia, serif;
  font-size: 17.5px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}

.badge-sub {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}

.badge-cert-pill {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: normal;
  padding: 3.5px 12px;
  border-radius: 999px;
  text-transform: none;
  white-space: nowrap;
}

.badge-cert-pill.green {
  background: rgba(44, 218, 178, 0.14);
  border: 1px solid rgba(44, 218, 178, 0.4);
  color: #108e6c;
}

.badge-cert-pill.amber {
  background: rgba(238, 138, 42, 0.16);
  border: 1px solid rgba(238, 138, 42, 0.45);
  color: #b45309;
}

.hero.agent h1 {
  font-size: clamp(30px, 4.8vw, 56px);
  margin: 14px 0 18px;
  line-height: 1.15;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.hero.agent h1 em,
.hero.agent p em,
.hero.agent p .hero-highlight,
.hero-highlight {
  color: var(--teal);
  display: inline-block;
  font-style: normal;
  font-weight: 700;
  vertical-align: baseline;
}

.hero.agent p {
  color: #c5d2e6;
  font-size: clamp(17px, 1.85vw, 28px);
  line-height: 1.48;
  max-width: 660px;
  margin: 0;
  overflow-wrap: break-word;
}

.hero.agent .cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
  max-width: 100%;
}

.hero.agent .cta .btn {
  max-width: 100%;
  overflow-wrap: break-word;
}

.hero-distributor-bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1400px;
  max-height: clamp(240px, 48vh, 480px);
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  z-index: 1;
  pointer-events: none;
  opacity: 0.95;
}

@media(max-width:1180px) and (min-width:821px) {
  .hero.agent {
    min-height: 0;
    padding-bottom: clamp(100px, 14vw, 160px);
  }

  .hero.agent .agent-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-left-content {
    max-width: 720px;
  }

  .hero-right-badges {
    width: 100%;
    max-width: 820px;
    justify-self: start;
    gap: 20px;
  }

  .hero-badge-card {
    flex: 0 1 220px;
    width: 220px;
  }
}

@media(max-width:820px) {
  .hero.agent p {
    display: none;
  }

  .hero.agent {
    padding: 28px 0 clamp(160px, 25vw, 220px);
    min-height: 0;
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
  }

  .hero.agent .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero.agent .agent-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 8px;
  }

  .hero-left-content {
    max-width: 100%;
  }

  .hero-right-badges {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: stretch;
    gap: 12px;
  }

  .hero-badge-card {
    flex: none;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 20px 12px 18px;
  }

  .badge-seal-medallion {
    width: 68px;
    height: 68px;
  }

  .badge-name {
    font-size: 15.5px;
  }

  .badge-sub {
    font-size: 12.5px;
  }

  .badge-cert-pill {
    white-space: normal;
    text-align: center;
  }

  .hero.agent h1 {
    font-size: clamp(30px, 8.5vw, 40px);
  }

  .hero.agent p {
    font-size: clamp(16.5px, 4.2vw, 20px);
    line-height: 1.5;
    max-width: 100%;
  }

  .hero-distributor-bg {
    position: relative;
    left: auto;
    transform: none;
    max-width: none;
    width: 100%;
    height: auto;
    max-height: none;
    margin: 4px 0 0;
    opacity: 0.9;
  }
}

@media(max-width:480px) {
  .hero-right-badges {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-badge-card {
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero.agent .cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hero.agent .cta .btn {
    width: 100%;
    text-align: center;
    padding: 13px 18px;
    font-size: 15.5px;
  }
}

/* Light Theme Overrides for Agent Hero */
[data-theme="light"] .hero.agent p {
  color: #334155;
}

[data-theme="light"] .hero-badge-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, .96) 0%, rgba(243, 246, 250, .98) 100%) !important;
  border: 1.5px solid rgba(0, 0, 0, .1) !important;
  box-shadow: 0 16px 36px rgba(11, 26, 46, .08), 0 0 0 1px rgba(0, 0, 0, .04) !important;
}

[data-theme="light"] .hero-badge-card::after {
  border: 1px dashed rgba(0, 0, 0, .12) !important;
}

[data-theme="light"] .hero-badge-card:hover {
  box-shadow: 0 24px 48px rgba(11, 26, 46, .12), 0 0 24px rgba(44, 218, 178, .25) !important;
  border-color: rgba(44, 138, 138, .45) !important;
}

[data-theme="light"] .hero-badge-card.expert-badge:hover {
  box-shadow: 0 24px 48px rgba(11, 26, 46, .12), 0 0 24px rgba(238, 138, 42, .25) !important;
  border-color: rgba(238, 138, 42, .45) !important;
}

[data-theme="light"] .badge-seal-medallion {
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18) !important;
}

[data-theme="light"] .badge-seal-medallion.emerald-seal {
  background: radial-gradient(circle at 35% 30%, #15795f 0%, #0d5442 75%, #07382c 100%) !important;
  border-color: #2fd19f !important;
}

[data-theme="light"] .badge-seal-medallion.gold-seal {
  background: radial-gradient(circle at 35% 30%, #c4640c 0%, #8c4202 75%, #5a2900 100%) !important;
  border-color: #ee8a2a !important;
}

[data-theme="light"] .seal-banner.emerald {
  background: linear-gradient(135deg, #128267, #0b5744) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .4) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18) !important;
}

[data-theme="light"] .seal-banner.gold {
  background: linear-gradient(135deg, #d97316, #964800) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .4) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18) !important;
}

[data-theme="light"] .badge-name {
  color: #0b1a2e !important;
}

[data-theme="light"] .badge-sub {
  color: #475569 !important;
}

[data-theme="light"] .badge-cert-pill.green {
  background: rgba(44, 218, 178, .16) !important;
  border-color: rgba(20, 131, 102, .4) !important;
  color: #0d6e55 !important;
}

[data-theme="light"] .badge-cert-pill.amber {
  background: rgba(238, 138, 42, .16) !important;
  border-color: rgba(180, 87, 5, .4) !important;
  color: #92400e !important;
}