/* Primary visual theme. Legacy variant A remains available via ?v=a. */

html[data-site-variant="b"] {
  --b-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --b-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --b-hot: #ff573f;
  --b-pink: #ff3f88;
  --b-violet: #6f4cff;
  --b-cyan: #26d9ff;
  --b-ease: cubic-bezier(.16, 1, .3, 1);
}

html[data-site-variant="b"] body {
  font-family: var(--b-body);
}

html[data-site-variant="b"] h1,
html[data-site-variant="b"] h2,
html[data-site-variant="b"] h3,
html[data-site-variant="b"] .brand,
html[data-site-variant="b"] .cta,
html[data-site-variant="b"] .hero-features strong,
html[data-site-variant="b"] .price {
  font-family: var(--b-display);
}

html[data-site-variant="b"] h2,
html[data-site-variant="b"] h3 {
  letter-spacing: -.028em;
}

html[data-site-variant="b"] .hero {
  --glow-x: 70%;
  --glow-y: 38%;
  isolation: isolate;
  background:
    radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 63, 136, .17), transparent 23%),
    radial-gradient(circle at 86% 64%, rgba(38, 217, 255, .12), transparent 24%),
    #080a0f;
}

html[data-site-variant="b"] .hero::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(115deg, transparent 0 48%, rgba(255, 255, 255, .035) 48% 48.12%, transparent 48.12% 100%),
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(255, 255, 255, .022) 96px 97px);
  content: "";
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
  pointer-events: none;
}

html[data-site-variant="b"] .site-header {
  background: rgba(8, 10, 15, .66);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

html[data-site-variant="b"] .brand {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: .08em;
}

html[data-site-variant="b"] .site-nav {
  letter-spacing: .025em;
}

html[data-site-variant="b"] .site-nav a::after {
  height: 2px;
  background: linear-gradient(90deg, var(--b-hot), var(--b-pink));
}

html[data-site-variant="b"] .hero-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(440px, .88fr);
}

html[data-site-variant="b"] .hero-copy {
  z-index: 5;
  max-width: 930px;
  padding-top: clamp(60px, 8vh, 94px);
}

html[data-site-variant="b"] .hero-eyebrow {
  font-family: var(--b-display);
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .22em;
  text-shadow: 0 0 22px rgba(255, 87, 63, .38);
  animation: b-copy-in .7s .06s both var(--b-ease);
}

html[data-site-variant="b"] .hero-copy h1 {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin-bottom: 28px;
  font-size: clamp(62px, 5.55vw, 92px);
  font-style: normal;
  font-weight: 800;
  letter-spacing: -.052em;
  line-height: .87;
  text-wrap: initial;
}

html[data-site-variant="b"] .hero-copy h1 > span {
  display: block;
  transform-origin: left center;
  animation: b-title-in .9s both var(--b-ease);
}

html[data-site-variant="b"] .hero-copy h1 > span:first-child {
  animation-delay: .1s;
}

html[data-site-variant="b"] .hero-copy h1 > span:last-child {
  animation-delay: .18s;
}

html[data-site-variant="b"] .hero-energy-stroke {
  position: absolute;
  z-index: 1;
  top: clamp(130px, 18vh, 205px);
  left: -4%;
  display: block;
  width: min(92%, 820px);
  height: clamp(130px, 18vw, 220px);
  border: 2px solid rgba(255, 87, 63, .76);
  border-right-color: rgba(111, 76, 255, .18);
  border-left-color: rgba(255, 63, 136, .18);
  border-radius: 50%;
  transform: rotate(-5deg) scaleX(.85);
  box-shadow: 0 0 30px rgba(255, 63, 136, .08), inset 0 0 22px rgba(111, 76, 255, .06);
  opacity: 0;
  pointer-events: none;
  animation: b-stroke-in 1.15s .36s forwards var(--b-ease), b-stroke-float 9s 1.5s infinite ease-in-out;
}

html[data-site-variant="b"] .hero-lead {
  position: relative;
  z-index: 2;
  max-width: 650px;
  color: rgba(239, 237, 255, .82);
  font-size: clamp(19px, 1.55vw, 24px);
  animation: b-copy-in .8s .3s both var(--b-ease);
}

html[data-site-variant="b"] .hero-features {
  position: relative;
  z-index: 2;
  animation: b-copy-in .8s .38s both var(--b-ease);
}

html[data-site-variant="b"] .hero-features strong {
  font-size: 21px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.02em;
}

html[data-site-variant="b"] .hero-copy .cta-primary {
  position: relative;
  z-index: 3;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(105deg, var(--b-hot) 0%, #ff4f4a 46%, var(--b-pink) 100%);
  box-shadow: 0 20px 54px rgba(255, 63, 95, .2);
  animation: b-copy-in .8s .46s both var(--b-ease);
}

html[data-site-variant="b"] .hero-copy .cta-primary::before {
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -34%;
  width: 24%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
  content: "";
  transition: left .75s var(--b-ease);
}

html[data-site-variant="b"] .hero-copy .cta-primary:hover::before,
html[data-site-variant="b"] .hero-copy .cta-primary:focus-visible::before {
  left: 112%;
}

html[data-site-variant="b"] .hero-copy .cta-primary svg {
  transition: transform .35s var(--b-ease);
}

html[data-site-variant="b"] .hero-copy .cta-primary:hover svg,
html[data-site-variant="b"] .hero-copy .cta-primary:focus-visible svg {
  transform: translateX(7px);
}

html[data-site-variant="b"] .hero-proof {
  z-index: 2;
  animation: b-copy-in .8s .52s both var(--b-ease);
}

html[data-site-variant="b"] .hero-proof::before {
  width: 112px;
  background: linear-gradient(90deg, var(--b-hot), var(--b-pink), transparent);
}

html[data-site-variant="b"] .hero-media {
  --motion-x: 0px;
  --motion-y: 0px;
  z-index: 1;
  width: min(57vw, 900px);
  clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%, 0 19%);
  transform: translate3d(var(--motion-x), var(--motion-y), 0);
  transition: transform .9s var(--b-ease);
}

html[data-site-variant="b"] .hero-media::before {
  position: absolute;
  z-index: 2;
  inset: -8%;
  background:
    radial-gradient(circle at 66% 24%, rgba(38, 217, 255, .28), transparent 22%),
    radial-gradient(circle at 38% 72%, rgba(255, 63, 136, .34), transparent 28%),
    linear-gradient(135deg, rgba(111, 76, 255, .12), transparent 42%);
  content: "";
  mix-blend-mode: screen;
  pointer-events: none;
  animation: b-glow-pulse 7s infinite alternate ease-in-out;
}

html[data-site-variant="b"] .hero-media::after {
  z-index: 3;
  background:
    linear-gradient(90deg, #080a0f 0%, rgba(8, 10, 15, .86) 10%, rgba(8, 10, 15, .12) 38%, transparent 62%),
    linear-gradient(0deg, rgba(8, 10, 15, .58), transparent 28%);
}

html[data-site-variant="b"] .hero-media img {
  transform: scale(1.055);
  filter: saturate(1.12) contrast(1.06);
  animation: b-image-in 1.2s .08s both var(--b-ease);
}

html[data-site-variant="b"] .motion-lines-hero {
  z-index: 4;
  top: 8%;
  left: -18%;
  width: 82%;
  height: 72%;
  filter: drop-shadow(0 0 12px rgba(255, 63, 136, .24));
  animation: b-ring-drift 11s infinite alternate ease-in-out;
}

html[data-site-variant="b"] .motion-lines::before,
html[data-site-variant="b"] .motion-lines::after {
  border-color: rgba(255, 87, 63, .44);
}

html[data-site-variant="b"] .hero-next {
  height: 76px;
  border-radius: 0;
  transform: skewY(-1.2deg);
  transform-origin: right bottom;
}

html[data-site-variant="b"] .section-heading h2,
html[data-site-variant="b"] .program-heading h2,
html[data-site-variant="b"] .authority-copy h2,
html[data-site-variant="b"] .practice-heading h2,
html[data-site-variant="b"] .offer-copy h2,
html[data-site-variant="b"] .mentorship-copy h2,
html[data-site-variant="b"] .nutrition-copy h2,
html[data-site-variant="b"] .faq h2 {
  font-style: normal;
  font-weight: 800;
  line-height: .94;
}

html[data-site-variant="b"] .cta-primary {
  background: linear-gradient(105deg, var(--b-hot), #ff4f4a 54%, var(--b-pink));
}

html[data-site-variant="b"].motion-variant-active [data-motion-reveal] {
  transition:
    opacity .75s var(--b-ease),
    transform .85s var(--b-ease),
    filter .75s var(--b-ease);
  transition-delay: calc(var(--motion-index, 0) * 45ms);
}

html[data-site-variant="b"].motion-variant-active [data-motion-reveal].motion-pending {
  transform: translateY(34px);
  filter: blur(5px);
  opacity: 0;
}

html[data-site-variant="b"].motion-variant-active [data-motion-reveal].is-motion-visible {
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
}

@keyframes b-title-in {
  from { transform: translateY(62px) skewY(4deg); clip-path: inset(0 0 100% 0); opacity: 0; }
  to { transform: translateY(0) skewY(0); clip-path: inset(-8% -4% -8% -4%); opacity: 1; }
}

@keyframes b-copy-in {
  from { transform: translateY(22px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes b-image-in {
  from { transform: scale(1.14) translateX(34px); filter: saturate(.7) contrast(1.1); opacity: 0; }
  to { transform: scale(1.055) translateX(0); filter: saturate(1.12) contrast(1.06); opacity: 1; }
}

@keyframes b-stroke-in {
  from { transform: rotate(-10deg) scaleX(.45); opacity: 0; }
  to { transform: rotate(-5deg) scaleX(.85); opacity: .76; }
}

@keyframes b-stroke-float {
  0%, 100% { transform: rotate(-5deg) scaleX(.85) translate3d(0, 0, 0); }
  50% { transform: rotate(-3deg) scaleX(.9) translate3d(12px, -5px, 0); }
}

@keyframes b-glow-pulse {
  from { transform: translate3d(-2%, 1%, 0) scale(.98); opacity: .72; }
  to { transform: translate3d(2%, -1%, 0) scale(1.04); opacity: 1; }
}

@keyframes b-ring-drift {
  from { transform: rotate(-4deg) translate3d(-8px, 0, 0); }
  to { transform: rotate(5deg) translate3d(14px, -8px, 0); }
}

@media (max-width: 1080px) {
  html[data-site-variant="b"] .hero-copy h1 {
    font-size: clamp(56px, 6.9vw, 76px);
  }
}

@media (max-width: 780px) {
  html[data-site-variant="b"] .site-header {
    background: rgba(8, 10, 15, .84);
  }

  html[data-site-variant="b"] .hero {
    min-height: 980px;
  }

  html[data-site-variant="b"] .hero-grid {
    min-height: 908px;
    grid-template-columns: 1fr;
  }

  html[data-site-variant="b"] .hero-copy {
    padding-top: 40px;
  }

  html[data-site-variant="b"] .hero-copy h1 {
    max-width: 690px;
    font-size: clamp(46px, 13.3vw, 68px);
    line-height: .9;
  }

  html[data-site-variant="b"] .hero-energy-stroke {
    top: 132px;
    left: -12%;
    width: 116%;
    height: 150px;
  }

  html[data-site-variant="b"] .hero-lead {
    max-width: 590px;
    font-size: 17px;
  }

  html[data-site-variant="b"] .hero-media {
    right: 0;
    left: 0;
    width: 100%;
    height: 40%;
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
  }

  html[data-site-variant="b"] .hero-media::after {
    background: linear-gradient(180deg, #080a0f 0%, rgba(8, 10, 15, .4) 22%, transparent 48%);
  }
}

@media (max-width: 420px) {
  html[data-site-variant="b"] .hero {
    min-height: 950px;
  }

  html[data-site-variant="b"] .hero-grid {
    min-height: 878px;
  }

  html[data-site-variant="b"] .brand {
    font-size: 28px;
  }

  html[data-site-variant="b"] .hero-copy h1 {
    margin-bottom: 22px;
    font-size: clamp(42px, 12.9vw, 54px);
  }

  html[data-site-variant="b"] .hero-energy-stroke {
    top: 122px;
    height: 132px;
  }

  html[data-site-variant="b"] .hero-features strong {
    font-size: 15px;
  }

  html[data-site-variant="b"] .hero-media {
    height: 37%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-site-variant="b"] .hero-copy *,
  html[data-site-variant="b"] .hero-media,
  html[data-site-variant="b"] .hero-media *,
  html[data-site-variant="b"] [data-motion-reveal] {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  html[data-site-variant="b"] .hero-energy-stroke {
    transform: rotate(-5deg) scaleX(.85) !important;
    opacity: .62 !important;
  }
}