:root {
  --black: #000;
  --zinc-950: #09090b;
  --zinc-925: #0d0d10;
  --zinc-900: #18181b;
  --zinc-850: #202024;
  --zinc-800: #27272a;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --red: #3a1ccb;
  --red-500: #82d859 ;
  --red-700: #3a1ccb;
  --red-oklch: #82d859;
  --icon-card-bg: oklch(0.21 0.006 285.885);
  --green: #4ade80;
  --yellow: #eab308;
  --container: 1280px;
  --radius: 16px;
  --shadow-red: 0 0 30px rgba(58, 28, 203, .45);
  --shadow-deep: 0 25px 70px rgba(0, 0, 0, .55);
  --ring: rgba(58, 28, 203, .28);
  --input: #27272a;
  --input-bg: #050505;
  --muted: rgba(255, 255, 255, .08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth;
  background: #000
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #000;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

img {
  max-width: 100%;
  display: block
}

a {
  text-decoration: none;
  color: inherit
}

button,
input,
select,
textarea {
  font: inherit
}

button {
  cursor: pointer
}

.relative {
  position: relative
}

.overflow-hidden {
  overflow: hidden
}

.page-container {
  width: min(100% - 48px, var(--container));
  margin: 0 auto
}

.narrow-container {
  width: min(100% - 48px, 1024px);
  margin: 0 auto
}

.bg-black {
  background: #000
}

.section {
  position: relative;
  padding: 96px 0
}

.section-zinc {
  background: #09090b
}

.center {
  text-align: center
}

.compact {
  margin-bottom: 48px
}

.delay-1 {
  transition-delay: .12s
}

.gradient-red-radial {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 65% 45%, rgba(58, 28, 203, .34), rgba(58, 28, 203, .12) 18%, transparent 48%);
  pointer-events: none
}

.gradient-red-radial.soft {
  opacity: .34
}

.gradient-red-radial.subtle {
  opacity: .14
}

.glass {
  background: linear-gradient(135deg, rgba(39, 39, 42, .58), rgba(9, 9, 11, .48));
  border: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .28)
}

.glass-red {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(58, 28, 203, .10);
  border: 1px solid rgba(58, 28, 203, .30);
  color: var(--red-500);
  border-radius: 999px;
  padding: 8px 16px
}

.glass-red svg {
  width: 16px;
  height: 16px
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  padding: 16px 32px;
  font-weight: 800;
  font-size: 1rem;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  border: 1px solid transparent;
  white-space: nowrap;
  position: relative;
  overflow: hidden
}

.btn svg {
  width: 20px;
  height: 20px
}

.btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--ring), var(--shadow-red)
}

.btn-red {
  background: linear-gradient(135deg, #3a1ccb 0%, #3a1ccb 100%);
  color: #fff;
  box-shadow: var(--shadow-red)
}

.btn-red:hover {
  background: none;
  transform: scale(1.045);
  box-shadow: 0 0 42px rgba(58, 28, 203, .62)
}

.btn-red:active {
  transform: scale(.99)
}

.btn-glass {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14);
  color: #fff;
  backdrop-filter: blur(12px)
}

.btn-glass:hover {
  background: rgba(255, 255, 255, .12);
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, .22)
}

.btn-white {
  background: #fff;
  color: #3a1ccb;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25)
}

.btn-white:hover {
  transform: scale(1.04)
}

/* Header + mobile sheet */
.top-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: .25s
}

.top-nav.scrolled {
  position: fixed;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 5px 15px;
}

.nav-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px
}

.brand-logo-only {
  gap: 0;
}

.logo-mark {
  width: 200px;
  height: auto;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.logo-mark img {
  width: 200px;
  height: auto;
  object-fit: contain;
  display: block;
}

.top-nav .logo-mark {
  width: 260px;
}

.sheet-head .logo-mark {
  width: 190px;
  height: auto;
}

.footer-brand .logo-mark {
  width: 240px;
  height: auto;
}

@media (max-width: 840px) {
  .top-nav .logo-mark {
    width: 210px;
  }

  .sheet-head .logo-mark {
    width: 170px;
  }
}

@media (max-width: 560px) {
  .top-nav .logo-mark {
    width: 180px;
  }
}

.brand-text {
  display: grid
}

.brand-text strong {
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.02em
}

.brand-text small {
  color: var(--gray-400);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 54px;
  margin-left: auto;
}


.desktop-nav>a:not(.phone-pill) {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  transition: .2s
}

.desktop-nav>a:not(.phone-pill):hover {
  color: var(--red-500)
}

.phone-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--red);
  padding: 12px 24px;
  border-radius: 10px;
  font-size: .875rem;
  font-weight: 800;
  box-shadow: var(--shadow-red);
  transition: .25s
}

.phone-pill:hover {
  background: #3a1ccb;
  transform: translateY(-1px)
}

.phone-pill svg {
  width: 16px
}

.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  align-items: center;
  justify-content: center
}

.menu-button:focus-visible,
.sheet-close:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--ring)
}

.mobile-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: .3s
}

.mobile-sheet.open {
  pointer-events: auto;
  opacity: 1
}

.sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .56);
  backdrop-filter: blur(4px)
}

.sheet-panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(82vw, 360px);
  background: #09090b;
  border-left: 1px solid rgba(255, 255, 255, .12);
  box-shadow: var(--shadow-deep);
  padding: 22px;
  transform: translateX(105%);
  transition: .35s cubic-bezier(.22, .8, .28, 1);
  display: flex;
  flex-direction: column
}

.mobile-sheet.open .sheet-panel {
  transform: translateX(0)
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  padding-bottom: 18px
}

.sheet-head .brand-mark {
  width: 40px;
  height: 40px
}

.sheet-head .brand-text strong {
  font-size: 1.35rem
}

.sheet-head .brand-text small {
  font-size: .58rem
}

.sheet-close {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  width: 38px;
  height: 38px;
  border-radius: 10px
}

.sheet-links {
  display: grid;
  gap: 8px;
  padding: 22px 0
}

.sheet-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  color: #d4d4d8;
  font-weight: 750;
  border: 1px solid transparent;
  transition: .2s
}

.sheet-links a:hover {
  background: rgba(58, 28, 203, .12);
  border-color: rgba(58, 28, 203, .25);
  color: #fff
}

.sheet-links svg {
  width: 18px;
  color: var(--red-500)
}

.sheet-cta {
  margin-top: auto;
  width: 100%;
}


/* White text readability improvement */
.hero-copy h1 span,
.hero-copy h1 small,
.hero-copy p,
.section-head h2,
.section-head h2 span,
.section-head p,
.btn,
.phone-pill,
.service-card h3,
.outcome-card h3,
.card-heading h3,
.session-copy b,
.curriculum-card h3,
.ready-card h3,
.ready-card p,
.review-copy p,
.review-copy b,
.review-copy small,
.quote-card blockquote,
.quote-card b,
.quote-card small,
.package-card h3,
.package-card strong,
.package-card li,
.contact-card h3,
.contact-card p,
.contact-feature h3,
.contact-feature p,
.footer,
.footer p,
.footer a,
.footer h3,
.footer-bottom,
.video-label,
.cta-copy h2,
.cta-copy p,
.cta-chips span,
.cta-phone b,
.cta-phone small {
  text-shadow:
    0 2px 10px rgba(0,0,0,.55),
    0 1px 3px rgba(0,0,0,.65);
}


/* Hero */
.hero-section {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

.hero-bg,
.hero-bg img,
.hero-dark-gradient {
  position: absolute;
  inset: 0
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.hero-dark-gradient {
  background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .92) 46%, rgba(0, 0, 0, .12) 100%)
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 128px 0 80px
}

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

.hero-copy {
  display: grid;
  gap: 18px;
}

.inline-badge {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 16px;
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  margin-top: 24px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red-500);
  display: inline-block;
  animation: pulse 1.6s infinite
}

.pulse-dot.white {
  background: #fff
}

.hero-copy h1 {
  display: grid;
  color: #fff;
  line-height: 1.05
}

.hero-copy h1 span,
.hero-copy h1 b {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 950;
  letter-spacing: -.02em
}

.hero-copy h1 b {
  background: linear-gradient(135deg, #3a1ccb 0%, #3a1ccb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.hero-copy h1 small {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin-top: 8px
}

.hero-copy h1 small em {
  font-style: normal;
  color: var(--red-500)
}

.hero-lead {
  max-width: 560px;
  color: var(--gray-300);
  font-size: 1.125rem;
  line-height: 1.8;
  margin-bottom: 20px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .10)
}

.hero-stats div {
  position: relative
}

.hero-stats strong {
  display: block;
  color: var(--red-500);
  font-size: 2.5rem;
  font-weight: 950;
  line-height: 1.05
}

.hero-stats span {
  display: block;
  color: var(--gray-400);
  font-size: .875rem;
  font-weight: 700;
    margin-top: 6px;
    margin-bottom: 5px;
}

.hero-stats em {
  display: inline-block;
  margin-top: 4px;
  background: rgba(34, 197, 94, .18);
  border: 1px solid rgba(34, 197, 94, .36);
  color: #4ade80;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: .7rem;
  font-weight: 850;
  font-style: normal
}

.hero-side {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.hero-info-card {
  border-radius: 16px;
  padding: 32px;
  display: flex;
  gap: 18px;
  transition: .3s
}

.hero-info-card:hover {
  transform: scale(1.045)
}

.red-icon,
.outline-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: none
}

.red-icon {
  background: var(--red);
  box-shadow: var(--shadow-red)
}

.outline-icon {
  background: #18181b;
  border: 2px solid #83d859;
  color: #83d859;
}

.red-icon svg,
.outline-icon svg {
  width: 28px;
  height: 28px
}

.hero-info-card h3 {
  font-size: 1.25rem;
  font-weight: 900;
  margin-bottom: 8px
}

.hero-info-card p {
  color: var(--gray-400);
  font-size: .875rem;
  line-height: 1.6;
  margin-bottom: 10px
}

.hero-info-card a {
  color: white;
  font-size: 1.125rem;
  font-weight: 850
}

.hero-info-card strong {
  color: #83d859;
  font-size: .9rem
}

.scroll-indicator {
  position: absolute;
  z-index: 3;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .6);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em
}

.scroll-indicator i {
  width: 24px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  position: relative
}

.scroll-indicator i:after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  background: var(--red-500);
  border-radius: 99px;
  transform: translateX(-50%);
  animation: bounce 1.2s infinite
}

/* Sections */
.section-head {
  max-width: 1024px;
  margin: 0 auto 64px
}

.section-head h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 950;
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 22px 0 20px
}

.section-head h2 span {
  color: var(--red-500)
}

.section-head p {
  color: var(--gray-400);
  font-size: 1.125rem;
  line-height: 1.8
}

.section-badge span {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .875rem;
  font-weight: 850
}

.small-label {
  display: inline-block;
  background: rgba(58, 28, 203, .10);
  border: 1px solid rgba(58, 28, 203, .30);
  color: var(--red-500);
  border-radius: 10px;
  padding: 8px 16px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .875rem;
  font-weight: 800
}

.glow-dot {
  position: absolute;
  width: 384px;
  height: 384px;
  border-radius: 50%;
  background: rgba(58, 28, 203, .12);
  filter: blur(64px);
  pointer-events: none
}

.top-left {
  top: 0;
  left: 0
}

.top-right {
  top: 0;
  right: 0
}

.bottom-left {
  bottom: 0;
  left: 0
}

.bottom-right {
  bottom: 0;
  right: 0
}

.mid-left {
  top: 50%;
  left: 20%;
  background: rgba(58, 28, 203, .18)
}

.mid-right {
  bottom: 20%;
  right: 20%;
  background: rgba(58, 28, 203, .18)
}

.pattern-grid:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .05;
  background-image: linear-gradient(rgba(58, 28, 203, .32) 1px, transparent 1px), linear-gradient(90deg, rgba(58, 28, 203, .32) 1px, transparent 1px);
  background-size: 50px 50px
}

.pattern-dots:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .1;
  background-image: radial-gradient(circle at 2px 2px, rgba(58, 28, 203, .32) 1px, transparent 0);
  background-size: 40px 40px
}

.services-grid,
.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px
}

.outcomes-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 32px
}

.service-card,
.outcome-card {
  border-radius: 16px;
  padding: 32px;
  transition: .3s;
  position: relative;
  overflow: hidden
}

.service-card:hover,
.outcome-card:hover {
  transform: scale(1.045);
  background: rgba(58, 28, 203, .10);
  border-color: rgba(58, 28, 203, .30);
  box-shadow: var(--shadow-red)
}

.service-card span,
.outcome-card span {
  width: 56px;
  height: 56px;
  background: var(--red);
  box-shadow: var(--shadow-red);
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 24px
}

.service-card svg,
.outcome-card svg {
  width: 28px;
  height: 28px
}

.service-card h3,
.outcome-card h3 {
  font-size: 1.25rem;
  font-weight: 900;
  margin-bottom: 12px
}

.service-card p,
.outcome-card p {
  color: var(--gray-400);
  font-size: .93rem;
  line-height: 1.65;
  margin-bottom: 18px
}

.service-card b {
  color: var(--red-500);
  font-size: .875rem;
  font-weight: 900
}

.outcome-card .num {
  position: absolute;
  top: 24px;
  right: 24px;
  color: rgba(255, 255, 255, .10);
  font-size: 3rem;
  font-weight: 950;
  line-height: 1
}

/* Class info */
.class-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px
}

.class-column {
  display: grid;
  gap: 32px
}

.about-card,
.curriculum-card,
.session-card {
  border-radius: 16px;
  padding: 32px
}

.card-heading {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 24px
}

.red-square {
  width: 48px;
  height: 48px;
  background: var(--red);
  box-shadow: var(--shadow-red);
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none
}

.red-square svg {
  width: 24px
}

.card-heading h3 {
  font-size: 1.25rem;
  font-weight: 900
}

.card-heading p {
  color: var(--red-500) !important;
  font-size: .8rem !important;
  font-weight: 750 !important;
  letter-spacing: .05em
}

.about-card>p {
  color: #d4d4d8;
  font-size: .95rem;
  line-height: 1.8;
  margin-bottom: 16px
}

.about-card>p:last-child {
  color: #e4e7ec;
  margin-bottom: 0
}

.formats-block h3,
.session-card h3 {
  font-size: 1.125rem;
  font-weight: 850;
  margin-bottom: 16px
}

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

.format-card {
  border-radius: 14px;
  text-align: center;
  padding: 20px;
  transition: .3s
}

.format-card:hover {
  background: rgba(58, 28, 203, .10);
  border-color: rgba(58, 28, 203, .30)
}

.format-card span {
  width: 40px;
  height: 40px;
  background: rgba(58, 28, 203, .18);
  color: var(--red-500);
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px
}

.format-card h4 {
  font-weight: 900;
  font-size: .9rem;
  margin-bottom: 5px
}

.format-card p {
  color: #71717a;
  font-size: .75rem;
  line-height: 1.45
}

.mini-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, .08)
}

.mini-item:first-of-type {
  border-top: 0
}

.mini-item svg {
  color: var(--red-500);
  width: 22px;
  height: 22px;
  flex: none
}

.mini-item b {
  display: block;
  font-size: .95rem
}

.mini-item p {
  color: #a1a1aa;
  font-size: .86rem;
  line-height: 1.55;
  margin-top: 3px
}

.curriculum-card {
  display: flex;
  flex-direction: column
}


.course-cta {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .08)
}

.course-cta .btn {
  width: 100%
}

/* stats process packages */
.stats-section {
  background: #000
}

.stats-bg,
.stats-bg img,
.stats-bg div {
  position: absolute;
  inset: 0
}

.stats-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .2
}

.stats-bg div {
  background: linear-gradient(180deg, #09090b, rgba(0, 0, 0, .92), #09090b)
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px
}

.stat-card {
  border-radius: 16px;
  padding: 32px;
  transition: .3s
}

.stat-card:hover {
  transform: scale(1.045);
  background: rgba(58, 28, 203, .10)
}

.stat-card>span,
.step-card>span,
.package-card>span {
  width: 56px;
  height: 56px;
  background: var(--red);
  border-radius: 14px;
  box-shadow: var(--shadow-red);
  display: grid;
  place-items: center;
  margin-bottom: 24px
}

.stat-card svg,
.step-card svg,
.package-card svg {
  width: 28px;
  height: 28px
}

.stat-card strong {
  font-size: 3rem;
  font-weight: 950;
  display: block;
  line-height: 1;
  margin-bottom: 8px
}

.stat-card p {
  color: #a1a1aa;
  font-weight: 750;
  margin-bottom: 18px
}

.progress {
  height: 8px;
  background: rgba(255, 255, 255, .10);
  border-radius: 999px;
  overflow: hidden
}

.progress i {
  height: 100%;
  width: 0;
  display: block;
  background: linear-gradient(90deg, #3a1ccb, #82d859);
  border-radius: 999px;
  transition: width 1.4s ease
}

.timeline-wrap {
  position: relative
}

.timeline-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3a1ccb, #82d859, #3a1ccb);
  transform: translateY(-50%)
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative
}

.step-card {
  position: relative;
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  transition: .3s
}

.step-card:hover {
  transform: scale(1.045);
  background: rgba(58, 28, 203, .10);
  box-shadow: var(--shadow-red)
}

.step-num {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--red);
  border: 4px solid #09090b;
  box-shadow: var(--shadow-red);
  font-weight: 950;
  font-size: .9rem
}

.step-card>span {
  margin: 18px auto 24px
}

.step-card h3 {
  font-size: 1.18rem;
  font-weight: 900;
  margin-bottom: 12px
}

.step-card p {
  color: #a1a1aa;
  line-height: 1.65;
  font-size: .92rem
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: start
}

.package-card {
  position: relative;
  border-radius: 16px;
  padding: 32px;
  transition: .3s
}

.package-card:hover {
  transform: scale(1.045);
  border-color: rgba(58, 28, 203, .5)
}

.package-card.featured {
  border: 2px solid var(--red);
  box-shadow: var(--shadow-red);
  transform: scale(1.05)
}

.package-card.featured:hover {
  transform: scale(1.09)
}

.price-badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: #18181b;
  border: 2px solid #27272a;
  border-radius: 999px;
  padding: 8px 16px;
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap
}

.price-badge.red {
  background: linear-gradient(135deg, #3a1ccb 0%, #3a1ccb 100%);
  /* border-color: #82d859 ;*/
}

.package-card h3 {
  font-size: 1.5rem;
  font-weight: 950;
  margin-bottom: 12px
}

.package-card strong {
  display: block;
  font-size: 2rem;
  font-weight: 950;
  color: var(--red-500);
  margin-bottom: 8px
}

.package-card p {
  color: #a1a1aa;
  margin-bottom: 24px;
  line-height: 1.6
}

.package-card ul {
  display: grid;
  gap: 12px;
  margin-bottom: 28px
}

.package-card li {
  display: flex;
  gap: 10px;
  color: #d4d4d8;
  font-size: .92rem
}

.package-card li:before {
  content: "✓";
  color: var(--red-500);
  font-weight: 950
}

.package-card .btn {
  width: 100%
}

/* reviews cta forms contact footer */
.reviews-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 64px
}

/* VIDEO CONTAINER */
.reference-video-frame{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  background:#000;
  aspect-ratio:16/9;
}

/* VIDEO + POSTER */
.reference-video-frame video{
  width:100%;
  height:100%;

  /* IMPORTANT */
  object-fit:contain;

  background:#000;
  display:block;
}

/* REMOVE ZOOMING */
.reference-video-frame video::-webkit-media-controls{
  z-index:20;
}

/* VIDEO OVERLAY */
.video-gradient{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.72),
      rgba(0,0,0,.12),
      transparent
    );

  pointer-events:none;
  transition:.3s ease;
}

/* PLAY BUTTON */
.play-button{
  position:absolute;
  inset:0;
  margin:auto;
  width:84px;
  height:84px;
  border-radius:999px;
  border:none;
  background:rgba(58, 28, 203, .94);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  cursor:pointer;

  transition:.25s ease;
}

.play-button:hover{
  transform:scale(1.08);
}

/* LABEL */
.video-label{
  position:absolute;
  bottom:18px;
  left:18px;
  z-index:8;
}

/* WHEN PLAYING */
.reference-video-frame.is-playing .video-gradient{
  opacity:0;
}

.reference-video-frame.is-playing .video-label{
  opacity:0;
}

.reference-video-frame.is-playing .play-button{
  opacity:0;
  pointer-events:none;
  transform:scale(.9);
}

.reference-video-frame.is-playing .play-button:hover{
  opacity:1;
}


.video-card {
  border-radius: 16px;
  overflow: hidden;
}

.video-frame {
  position: relative;
  aspect-ratio: 16/9;
  background: #18181b;
  overflow: hidden
}

.video-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
}

.video-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .12), transparent)
}

.play-button {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 80px;
  height: 80px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  box-shadow: var(--shadow-red);
  transition: .3s;
  
}

.play-button:hover {
  transform: scale(1.1)
}

.play-button svg {
  width: 36px;
  height: 36px;
  fill: currentColor;
  margin-left: 4px
}

.video-label {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .85);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .05em
}

.review-copy,
.quote-card {
  padding: 24px
}

.stars {
  color: var(--yellow);
  letter-spacing: 1px;
  margin-bottom: 14px
}

.review-copy p,
.quote-card p {
  color: #d4d4d8;
  line-height: 1.7;
  font-size: .95rem;
  margin-bottom: 22px
}

.person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .10)
}

.person span {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(58, 28, 203, .18);
  border: 2px solid rgba(58, 28, 203, .4);
  color: #82d859;
  font-weight: 950
}

.person b {
  display: block
}

.person small {
  color: #71717a;
  font-size: .82rem;
  font-weight: 750
}

.review-stack {
  position: relative
}

.quote-card {
  display: none;
  border-radius: 16px;
  min-height: 305px
}

.quote-card.active {
  display: block;
  animation: fadeIn .35s ease
}

.carousel-controls {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  justify-content: flex-end
}

.carousel-controls button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  transition: .2s
}

.carousel-controls button:hover {
  background: var(--red)
}

.review-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.review-metrics div {
  background: rgba(24, 24, 27, .56);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 24px;
  text-align: center
}

.review-metrics svg {
  width: 28px;
  height: 28px;
  color: var(--red-500);
  margin: 0 auto 12px
}

.review-metrics b {
  display: block;
  font-size: 2rem;
  font-weight: 950
}

.review-metrics span {
  color: #a1a1aa;
  font-size: .875rem
}

.cta-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #3a1ccb 0%, #3a1ccb 100%);
  padding: 80px 0
}

.hazard-lines {
  position: absolute;
  inset: 0;
  opacity: .20;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255, 255, 255, .15) 35px, rgba(255, 255, 255, .15) 70px)
}

.white-glow {
  position: absolute;
  width: 256px;
  height: 256px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  filter: blur(64px);
  top: 50%
}

.white-glow.left {
  left: 25%
}

.white-glow.right {
  right: 25%
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative
}

.cta-copy {
  display: flex;
  gap: 24px;
  align-items: flex-start
}

.cta-icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .20);
  display: grid;
  place-items: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
  flex: none;
  animation: pulseGlow 2s infinite
}

.cta-icon svg {
  width: 40px;
  height: 40px
}

.white-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: 5px 12px;
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .1em;
  margin-bottom: 16px
}

.cta-copy h2 {
  font-size: clamp(2rem, 5vw, 2.5rem);
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -.02em;
  margin-bottom: 12px
}

.cta-copy p {
  color: #fff7f7;
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 620px;
  margin-bottom: 20px
}

.cta-chips {
  display: flex;
  gap: 16px;
  flex-wrap: wrap
}

.cta-chips span {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .12);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: .875rem;
  font-weight: 850
}

.cta-actions {
  display: grid;
  gap: 16px;
  min-width: 280px
}

.cta-phone {
  display: grid;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 16px;
  padding: 18px;
  text-align: center
}

.cta-phone small {
  color: #82d859;
  font-weight: 800
}

.cta-phone b {
  font-size: 1.55rem
}

.tab-toggle {
  width: max-content;
  margin: 0 auto 40px;
  padding: 6px;
  border-radius: 16px;
  display: flex;
  gap: 8px
}

.tab {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  padding: 12px 24px;
  color: #a1a1aa;
  background: transparent;
  font-weight: 900;
  font-size: .9rem;
  transition: .25s
}

.tab:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--ring)
}

.tab.active {
  background: #27272a;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .24)
}

.tab[data-tab="purchase"].active {
  background: linear-gradient(135deg, #3a1ccb 0%, #3a1ccb 100%);
  box-shadow: var(--shadow-red)
}

.form-shell {
  border-radius: 16px;
  overflow: hidden
}

.tab-panel {
  display: none;
  grid-template-columns: 2fr 3fr
}

.tab-panel.active {
  display: grid;
  animation: fadeIn .28s ease
}

.form-side {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.red-side {
  background: linear-gradient(135deg, #3a1ccb 0%, #3a1ccb 100%)
}

.dark-side {
  background: #18181b;
  border-right: 1px solid rgba(255, 255, 255, .06)
}

.form-side>svg {
  width: 40px;
  height: 40px;
  margin-bottom: 24px;
  opacity: .9
}

.dark-side>svg {
  color: var(--red-500)
}

.form-side h3 {
  font-size: 1.5rem;
  font-weight: 950;
  margin-bottom: 16px
}

.form-side p {
  color: #82d859;
  line-height: 1.8;
  font-size: .9rem;
  margin-bottom: 26px
}

.dark-side p {
  color: #a1a1aa
}

.form-side ul {
  display: grid;
  gap: 16px
}

.form-side li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #82d859;
  font-size: .875rem
}

.form-side li svg {
  width: 20px
}

.form-side small {
  display: block;
  color: #82d859;
  font-size: .8rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: 26px;
  margin-top: 26px
}

.course-preview {
  display: grid;
  gap: 12px
}

.course-preview div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, .38);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 12px 14px
}

.course-preview b {
  font-size: .875rem
}

.course-preview span {
  color: var(--red-500);
  font-size: .8rem;
  font-weight: 900
}

.dark-side a {
  color: var(--red-500)
}

.contact-form {
  padding: 40px;
  background: rgba(0, 0, 0, .20)
}

.form-fields {
  display: grid;
  gap: 22px
}

.two-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

label {
  display: grid;
  gap: 8px
}

label span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: .875rem;
  font-weight: 800
}

label svg {
  width: 16px;
  color: var(--red-500)
}

input,
select,
textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input);
  border-radius: 10px;
  padding: 13px 15px;
  color: #fff;
  outline: 0;
  transition: border-color .2s, box-shadow .2s, background .2s
}

textarea {
  min-height: 118px;
  resize: none
}

input:hover,
select:hover,
textarea:hover {
  border-color: #3f3f46
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(58, 28, 203, .16)
}

input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown),
select:invalid:not(:focus) {
  border-color: rgba(58, 28, 203, .6)
}

::placeholder {
  color: #71717a
}

.submit-btn {
  width: 100%;
  border: 0
}

.form-note {
  text-align: center;
  color: #71717a;
  font-size: .8rem
}

.success-message {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  padding: 24px
}

.success-message[hidden] {
  display: none
}

.success-message span {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(58, 28, 203, .18);
  box-shadow: var(--shadow-red);
  color: #82d859;
  margin-bottom: 24px
}

.success-message span svg {
  width: 40px;
  height: 40px
}

.success-message h3 {
  font-size: 1.5rem;
  font-weight: 950;
  margin-bottom: 12px
}

.success-message p {
  color: #a1a1aa;
  line-height: 1.7;
  max-width: 420px;
  margin-bottom: 22px
}

.success-message button {
  border: 0;
  background: transparent;
  color: var(--red-500);
  font-weight: 850
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px
}

.contact-list {
  display: grid;
  gap: 24px
}

.contact-card {
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  gap: 18px;
  transition: .25s
}

.contact-card:hover {
  border-color: rgba(58, 28, 203, .50);
  transform: translateY(-2px)
}

.contact-card span {
  width: 48px;
  height: 48px;
  background: rgb(44 44 44);
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--red-500);
  flex: none
}

.contact-card h3 {
  font-size: 1.25rem;
  font-weight: 900;
  margin-bottom: 8px
}

.contact-card p {
  color: #a1a1aa;
  line-height: 1.6
}

.contact-card a {
  color: #fff
}

.contact-card a:hover {
  color: var(--red-500)
}

.contact-feature {
  border-radius: 16px;
  padding: 42px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: radial-gradient(circle at top left, rgba(58, 28, 203, .18), rgba(24, 24, 27, .62) 45%)
}

.contact-feature>span {
  font-size: 5rem;
  font-weight: 950;
  color:#81d85986;
  line-height: 1;
}

.contact-feature h3 {
  font-size: 2rem;
  font-weight: 950;
  margin: 10px 0 16px
}

.contact-feature p {
  color: #d4d4d8;
  line-height: 1.7;
  margin-bottom: 18px
}

.contact-feature ul {
  display: grid;
  gap: 12px;
  margin-bottom: 28px
}

.contact-feature li {
  display: flex;
  gap: 10px;
  color: #a1a1aa
}

.contact-feature li:before {
  content: "✓";
  color: var(--red-500);
  font-weight: 950
}


.payment-link-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100%;
}

.payment-card{
  width:100%;
  max-width:520px;
  text-align:center;
  padding:48px 12px;
}

.payment-icon{
  width:80px;
  height:80px;
  margin:0 auto 24px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:rgba(58, 28, 203, .16);
  color:var(--red-500);
 /* box-shadow:var(--shadow-red); */
}

.payment-icon svg{
  width:38px;
  height:38px;
}

.payment-card h3{
  font-size:1.75rem;
  font-weight:950;
  margin-bottom:14px;
}

.payment-card p{
  color:#a1a1aa;
  line-height:1.7;
  margin-bottom:28px;
}

.payment-btn{
  width:100%;
  max-width:360px;
  margin:0 auto 18px;
}


.footer {
  background: #000;
  border-top: 1px solid #18181b;
  padding-top: 64px
}


.footer-grid {
  display: grid !important;
}

.footer-grid > div {
  display: flex !important;
  flex-direction: column !important;
}


.footer-brand .logo-mark img {
  width: 210px !important;
  height: auto !important;
  object-fit: contain !important;
}


.footer p {
  font-size: .9rem;
  line-height: 1.7;
 }

.footer a {
  font-size: .9rem;
  line-height: 1.7
}

.footer a:hover {
  color: #fff
}

.footer h3 {
  font-size: 1.125rem;
  font-weight: 900;
  margin-bottom: 16px
}

.footer-grid>div {
  display: flex;
  flex-direction: column;
  gap: 10px
}



.footer-bottom {
  border-top: 1px solid #18181b;
  margin-top: 54px;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px
}

.footer-bottom div {
  display: flex;
  gap: 22px
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #09090b;
  border: 1px solid rgba(58, 28, 203, .42);
  box-shadow: var(--shadow-red);
  border-radius: 14px;
  padding: 14px 18px;
  color: #fff;
  transform: translateY(120%);
  opacity: 0;
  transition: .3s
}

.toast.active {
  transform: translateY(0);
  opacity: 1
}

.toast svg {
  width: 20px;
  color: var(--green)
}

/* Utility-style upgrades translated from final UI components */
[data-tooltip] {
  position: relative
}

.tooltip-bubble {
  position: fixed;
  z-index: 140;
  background: var(--red);
  color: #fff;
  border-radius: 8px;
  padding: 7px 11px;
  font-size: .75rem;
  line-height: 1.35;
  font-weight: 750;
  max-width: 240px;
  box-shadow: var(--shadow-red);
  opacity: 0;
  transform: scale(.95) translateY(3px);
  pointer-events: none;
  transition: .16s
}

.tooltip-bubble.active {
  opacity: 1;
  transform: scale(1) translateY(0)
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 12px 14px
}

.switch {
  width: 32px;
  height: 1.15rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: #52525b;
  display: inline-flex;
  align-items: center;
  padding: 1px;
  transition: .2s;
  flex: none
}

.switch-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: .2s
}

.switch.on {
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(58, 28, 203, .14)
}

.switch.on .switch-thumb {
  transform: translateX(calc(100% - 2px))
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .38
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: translate(-50%, 0)
  }

  50% {
    transform: translate(-50%, 10px)
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .18)
  }

  50% {
    box-shadow: 0 0 0 12px rgba(255, 255, 255, 0)
  }
}

@media (max-width:1100px) {

  .hero-grid,
  .class-grid,
  .reviews-layout,
  .contact-grid {
    grid-template-columns: 1fr
  }

  .hero-side {
    display: none
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .outcomes-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .stats-grid,
  .timeline-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .timeline-line {
    display: none
  }

  .packages-grid {
    grid-template-columns: 1fr;
    min-height: 620px;
  }

  .package-card.featured {
    transform: none
  }

  .package-card.featured:hover {
    transform: scale(1.04)
  }

  .tab-panel {
    grid-template-columns: 1fr
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .cta-inner {
    flex-direction: column;
    align-items: flex-start
  }

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

  .desktop-nav {
    gap: 18px
  }

  .phone-pill {
    padding: 11px 16px
  }
}

@media (max-width:767px) {
  .top-nav {
    position: fixed;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding: 14px 24px
  }

  .desktop-nav {
    display: none
  }

  .menu-button {
    display: flex
  }

  .page-container,
  .narrow-container {
    width: min(100% - 32px, var(--container))
  }

  .brand-text strong {
    font-size: 1.35rem
  }

  .brand-text small {
    font-size: .58rem;
    max-width: 180px
  }

  .hero-section {
    min-height: auto
  }

  .hero-content {
    padding: 124px 0 76px
  }


  .hero-actions,
  .tab-toggle {
    display: grid;
    width: 100%
  }

  .hero-actions .btn {
    width: 100%
  }

  .hero-stats {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .hero-stats div {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    padding: 18px
  }

  .section {
    padding: 76px 0
  }

  .section-head {
    text-align: left;
    margin-left: 0
  }

  .section-head p {
    font-size: 1rem
  }

  .services-grid,
  .outcomes-grid,
  .stats-grid,
  .timeline-grid,
  .format-grid,
  .review-metrics {
    grid-template-columns: 1fr
  }

  .two-fields {
    grid-template-columns: 1fr
  }

  .form-side,
  .contact-form {
    padding: 22px;
    min-width: 300px;
  }

  .cta-copy {
    flex-direction: column
  }

  .cta-icon {
    width: 64px;
    height: 64px
  }

  .cta-chips span {
    width: 100%
  }

  .footer-grid {
    grid-template-columns: 1fr
  }

  .footer-bottom {
    flex-direction: column
  }

  .footer-bottom div {
    flex-wrap: wrap
  }

  .scroll-indicator {
    display: none
  }
}

@media (max-width:560px) {

  .hero-copy h1 span,
  .hero-copy h1 b {
    font-size: clamp(2.45rem, 14vw, 4.2rem)
  }

  .hero-copy h1 small {
    font-size: clamp(1.8rem, 10vw, 3rem)
  }

  .service-card,
  .outcome-card,
  .about-card,
  .curriculum-card,
  .session-card,
  .stat-card,
  .step-card,
  .package-card {
    padding: 24px
  }

  .contact-card {
    flex-direction: column
  }

  .review-metrics {
    grid-template-columns: 1fr
  }

  .play-button {
    width: 64px;
    height: 64px;
    
  }

  .cta-phone b {
    font-size: 1.25rem
  }

  .sheet-panel {
    width: min(90vw, 360px)
  }

  .toast {
    left: 16px;
    right: 16px;
    bottom: 16px
  }

  .brand-text small {
    display: none
  }
}

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

  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important
  }

  .reveal {
    opacity: 1;
    transform: none
  }
}

.video-coming-soon {
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #09090b;
  padding: 32px
}

.video-coming-soon svg {
  width: 54px;
  height: 54px;
  color: var(--red-500);
  margin-bottom: 16px
}

.video-coming-soon h3 {
  font-size: 1.25rem;
  font-weight: 950;
  margin-bottom: 8px
}

.video-coming-soon p {
  max-width: 420px;
  color: #a1a1aa;
  line-height: 1.6;
  margin-bottom: 20px
}


/* PASS 1: Hero + Services reference matching */
.gradient-red {
  background: linear-gradient(135deg, #3a1ccb 0%, #3a1ccb 100%);
}

.hero-copy h1 b {
  background: linear-gradient(135deg, #3a1ccb 0%, #3a1ccb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-red,
.phone-pill,
.red-icon,
.red-square,
.stat-card>span,
.step-card>span,
.package-card>span,
.cta-section,
.red-side,
.price-badge.red {
  background: linear-gradient(135deg, #3a1ccb 0%, #3a1ccb 100%);
}

.btn-red,
.phone-pill,
.red-icon,
.red-square {
  box-shadow: 0 0 34px rgba(58, 28, 203, .42);
}

.btn-red:hover,
.phone-pill:hover {
  background: linear-gradient(135deg, #82d859 0%, #3a1ccb 100%);
}

/* Everything You Need to Take Control section icon behavior */
#services .service-card span {
  background: oklch(0.21 0.006 285.885);
  color: #82d859;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .06);
  transition: background .28s ease, color .28s ease, box-shadow .28s ease, transform .28s ease, border-color .28s ease;
}

#services .service-card span svg {
  color: #82d859;
  stroke: currentColor;
  transition: color .28s ease, stroke .28s ease;
}

#services .service-card h3 {
  transition: color .28s ease;
  color: #82d859;
}

#services .service-card:hover span {
  background: var(--red);
  color: #fff;
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 0 30px rgba(58, 28, 203, .45);
  transform: translateY(-2px);
}

#services .service-card:hover span svg {
  color: #fff;
  stroke: #fff;
}

#services .service-card:hover h3 {
  color: var(--red);;
}

#services .service-card:hover p,
#services .service-card:hover b {
  color: inherit;
}

#services .service-card:hover b {
  color: var(--red);
}


/* Services CTA */
.services-cta {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

.services-cta .btn {
  min-width: 320px;
  padding: 18px 34px;
  font-size: 1rem;
  border-radius: 14px;
}

@media (max-width:840px) {
  .services-cta {
    margin-top: 40px;
  }

  .services-cta .btn {
    width: 100%;
    min-width: unset;
  }
}


/* Auto Care Essentials Course refinements */

.session-card {
  display: grid;
  gap: 18px;
}

.session-card h3 {
  margin-bottom: 6px;
}

.session-type-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 22px;
  transition: all .28s ease;
}

.session-type-card:hover {
  border-color: rgba(58, 28, 203, .35);
  background: rgba(58, 28, 203, .08);
  transform: translateY(-2px);
}

.session-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: oklch(0.21 0.006 285.885);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  transition: all .28s ease;
}

.session-icon svg {
  width: 28px;
  height: 28px;
  color: #82d859;
  stroke: currentColor;
  transition: all .28s ease;
}

.session-type-card:hover .session-icon {
  background: #82d859;
  box-shadow: 0 0 30px rgba(58, 28, 203, .42);
}

.session-type-card:hover .session-icon svg {
  color: #fff;
}

.session-copy b {
  display: block;
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: 8px;
  transition: color .28s ease;
}

.session-copy p {
  color: #d4d4d9;
  line-height: 1.7;
  font-size: .92rem;
}

.session-type-card:hover .session-copy b {
  color: var(--red-500);
}

/* =========================================
   WHAT YOU'LL LEARN CHECKMARK FIX
========================================= */

.curriculum-list {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}

.curriculum-list li {
  position: relative;
  list-style: none;

  display: flex;
  align-items: flex-start;
  gap: 14px;

  padding: 12px 14px;

  border-radius: 14px;

  color: #f4f4f5 !important;
  line-height: 1.7;

  transition:
    background .25s ease,
    transform .25s ease;
}

.curriculum-list li:hover {
  background: rgba(255,255,255,.035);
  transform: translateX(4px);
}

.curriculum-list li::before {
  content: "✓" !important;

  width: 28px;
  height: 28px;
  min-width: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

 background: #3a1ccb !important;
    color: #ffffff !important;

  font-size: .9rem;
  font-weight: 950;

  margin-top: 2px;

  box-shadow:
    0 2px 12px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.08);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}



.curriculum-list li:hover::before {
  transform: scale(1.08);
}

/* Auto Care Essentials Course v2 pixel-match corrections */
.class-grid {
  align-items: stretch;
}

.class-column,
.curriculum-card {
  height: 100%;
}

.curriculum-card {
  min-height: 100%;
  justify-content: space-between;
  gap: 28px;
}

.session-card {
  display: block;
}

.session-card h3 {
  display: block;
  font-size: 1.125rem;
  font-weight: 850;
  margin-bottom: 16px;
  color: #fff;
}

.session-types-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.session-type-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 24px;
  transition: all .28s ease;
}

.session-type-card:hover {
  border-color: rgba(58, 28, 203, .35);
  background: rgba(58, 28, 203, .08);
  transform: translateY(-2px);
}

.session-icon {
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: block;
  margin: 0 0 12px;
}

.session-icon svg {
  width: 28px;
  height: 28px;
  color: #82d859;
  stroke: currentColor;
  transition: all .28s ease;
}

.session-type-card:hover .session-icon {
  background: transparent;
  box-shadow: none;
  transform: none;
}

.session-type-card:hover .session-icon svg {
  color: #82d859;
  stroke: #82d859;
}

.session-copy b {
  display: block;
  font-size: 1rem;
  font-weight: 900;
  margin-bottom: 8px;
  transition: color .28s ease;
}

.session-copy p {
  color: #a1a1aa;
  line-height: 1.65;
  font-size: .9rem;
  margin: 0;
}

.session-type-card:hover .session-copy b {
  color: var(--red-500);
}



.ready-card {
  position: relative;
  border-radius: 16px;
  padding: 32px;
  border: 2px solid #3a1ccb;
  box-shadow: 0 0 30px rgba(58, 28, 203, .45);
  background: linear-gradient(135deg, rgba(39, 39, 42, .58), rgba(9, 9, 11, .48));
  overflow: hidden;
  margin-top: 20px !important;
}

.ready-card-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #3a1ccb 0%, #3a1ccb 100%);
  opacity: .05;
  pointer-events: none;
}

.ready-card-inner {
  position: relative;
  z-index: 1;
}

.ready-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(58, 28, 203, .20);
  border: 1px solid rgba(58, 28, 203, .40);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.ready-badge span:last-child {
  color: #82d859;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ready-card h3 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 950;
  margin: 0 0 8px;
}

.ready-card p {
  color: #9ca3af;
  font-size: .9rem;
  line-height: 1.6;
  margin: 0 0 24px;
}

.ready-actions {
  display: flex;
  gap: 12px;
}

.ready-actions .btn {
  padding: 16px 24px;
  border-radius: 12px;
  font-size: .95rem;
}

.ready-actions .btn-red {
  flex: 1;
}

.ready-card small {
  display: block;
  color: #6b7280;
  font-size: .8rem;
  text-align: center;
  margin-top: 16px;
}

@media (max-width:767px) {

  .session-types-row,
  .ready-actions {
    grid-template-columns: 1fr;
    display: grid;
  }

  .ready-actions .btn {
    width: 100%;
  }
}


/* Reference pass: course, testimonial, and estimate CTA */
#class-info .class-grid {
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
  margin-bottom: 0;
}

#class-info .class-column {
  gap: 32px;
  height: 100%;
}

#class-info .curriculum-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 32px;
  border-radius: 16px;
}

#class-info .curriculum-card .card-heading {
  margin-bottom: 16px;
}

#class-info .curriculum-card .card-heading .red-square {
  display: none;
}

#class-info .curriculum-card .card-heading h3 {
  font-size: 1.5rem;
  font-weight: 950;
}

#class-info .curriculum-card .card-heading h3::after {
  content: " Learn";
    color: var(--red-500);
    font-size: 1.5rem;
}

#class-info .curriculum-card .card-heading h3 {
  font-size: 0;
  color: transparent;
}

#class-info .curriculum-card .card-heading h3::before {
  content: "What You'll";
  font-size: 1.5rem;
  color: #fff;
}

#class-info .curriculum-card .card-heading p {
  display: none;
}

#class-info .curriculum-list {
  display: grid;
  gap: 18px;
  margin: 0;
  flex: 1;
}

#class-info .curriculum-list li {
  font-size: .95rem;
  color: #d1d5db;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0;
  background: transparent;
}

#class-info .curriculum-list li:hover {
  background: transparent;
  padding-left: 0;
}


#class-info .curriculum-list li:hover:before {
  background-color: var(--red-700);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
}

.session-card-no-title {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.session-types-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.session-type-card {
  min-height: 170px;
  padding: 24px;
  border-radius: 16px;
  background: rgba(24, 24, 27, .56);
  border: 1px solid rgba(255, 255, 255, .10);
}

.session-icon {
  display: block;
  margin: 0 0 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
  width: auto;
  height: auto;
}

.session-icon svg {
  width: 28px;
  height: 28px;
  color: #82d859;
}

.session-copy b {
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
}

.session-copy p {
  font-size: .88rem;
  line-height: 1.55;
  color: #9ca3af;
  max-width: 250px;
}


.ready-actions {
  display: flex;
  gap: 12px;
}

.ready-actions .btn-red {
  flex: 1;
}

.ready-actions .btn {
  padding: 16px 24px;
  font-weight: 800;
}

.reference-reviews {
  padding-top: 96px;
  padding-bottom: 96px;
}

.reference-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 64px;
  align-items: stretch;
}

.reference-video-card,
.written-review-card {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  overflow: hidden;
  background: rgba(24, 24, 27, .56);
}

.reference-video-card:hover,
.written-review-card:hover {
  border-color: rgba(58, 28, 203, .42);
}

.reference-video-frame {
  aspect-ratio: 16/9;
}

.reference-video-frame img {
  filter: grayscale(1);
  opacity: .58;
}

.reference-video-copy {
  padding: 24px 28px 28px;
}

.reference-video-copy p {
  font-size: .95rem;
  line-height: 1.7;
  color: #d1d5db;
}

.reference-person-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 22px;
  margin-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}

.reference-person-row .savings-pill {
  margin-left: auto;
  background: rgba(34, 197, 94, .18);
  border: 1px solid rgba(34, 197, 94, .36);
  color: #4ade80;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: .8rem;
  font-weight: 900;
  font-style: normal;
  white-space: nowrap;
}

.written-review-card {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  transition: .3s;
}

.written-review-card:hover {
  background: rgba(58, 28, 203, .05);
}

.large-quote-icon {
  width: 64px;
  height: 64px;
  background: rgba(58, 28, 203, .20);
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  transition: .3s;
}

.large-quote-icon svg {
  width: 32px;
  height: 32px;
  color: var(--red-500);
}

.written-review-card:hover .large-quote-icon {
  background: #3a1ccb
}

.written-review-card:hover .large-quote-icon svg {
  color: #fff;
}

.written-stars {
  font-size: 1.35rem;
  margin-bottom: 24px;
}

.written-review-card blockquote {
  font-size: 1.1rem;
  line-height: 1.85;
  font-style: italic;
  color: #e5e7eb;
  margin: 0 0 36px;
}

.written-review-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}

.written-person {
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.written-person span {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #3a1ccb 0%, #3a1ccb 100%);
  border: 0;
  color: #fff;
  box-shadow: 0 0 30px rgba(58, 28, 203, .45);
  font-size: 1.25rem;
}

.written-person small {
  display: block;
}

.savings-big {
  background: rgba(34, 197, 94, .18);
  border: 1px solid rgba(34, 197, 94, .36);
  border-radius: 999px;
  padding: 5px 35px;
  text-align: center;
  font-style: normal;
  min-width: 108px;
}

.savings-big b {
  display: block;
  color: #4ade80;
  font-size: 1.1rem;
  font-weight: 950;
  line-height: 1
}

.savings-big small {
  color: #16a34a;
  font-size: .7rem;
  font-weight: 800;
}

.reference-trust-stats {
  grid-template-columns: repeat(4, 1fr);
}

.reference-trust-stats div {
  transition: .3s;
}

.reference-trust-stats div:hover {
  background: rgba(58, 28, 203, .10);
  transform: scale(1.045)
}

.reference-trust-stats svg {
  width: 48px;
  height: 48px;
  padding: 12px;
  background: #3a1ccb;
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 0 30px rgba(58, 28, 203, .45);
}

.reference-trust-stats b {
  font-size: 2.5rem;
  color: white;
  line-height: 1.1
}

.reference-trust-stats span {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--red-700);
}

.reference-estimate-cta {
  padding: 80px 0;
  background: linear-gradient(135deg, #3a1ccb 0%, #3a1ccb 100%);
}

.reference-estimate-cta .cta-inner {
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.reference-estimate-cta .cta-copy {
  display: flex;
  align-items: center;
  gap: 28px;
}

.reference-estimate-cta .cta-icon {
  width: 92px;
  height: 92px;
  background: rgba(255, 255, 255, .20);
  border-radius: 16px;
}

.reference-estimate-cta .cta-icon svg {
  width: 44px;
  height: 44px;
}

.reference-estimate-cta h2 {
  font-size: 2.5rem;
  font-weight: 950;
  line-height: 1.1;
  margin-bottom: 14px;
}

.reference-estimate-cta p {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 650px;
  color: #fff;
}

.reference-estimate-cta .white-badge {
  background: rgba(255, 255, 255, .18);
  padding: 6px 14px;
  margin-bottom: 16px;
}

.reference-estimate-cta .cta-chips {
  gap: 18px;
}

.reference-estimate-cta .cta-chips span {
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 12px 16px;
  color: #fff;
}

.reference-estimate-cta .cta-actions {
  /* min-width: 330px; */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reference-phone-card {
  background: #fff;
  color: #3a1ccb;
  border-radius: 14px;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, .25);
}

.reference-phone-card svg {
  width: 30px;
  height: 30px;
}

.reference-phone-card small {
  display: block;
  color: var(--red-700);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
    text-shadow: none;

}

.reference-phone-card b {
  display: block;
  color: #3a1ccb;
  font-size: 1.55rem;
  font-weight: 950;
  line-height: 1;
  text-shadow: none;
}

.email-aces-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .40);
  border: 2px solid rgba(255, 255, 255, .30);
  border-radius: 14px;
  padding: 18px 32px;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 850;
  transition: .25s;
}

.email-aces-button:hover {
  background: rgba(0, 0, 0, .60);
  border-color: rgba(255, 255, 255, .55);
}

@media(max-width:1100px) {

  #class-info .class-grid,
  .reference-review-grid {
    grid-template-columns: 1fr
  }

  .reference-estimate-cta .cta-inner {
    flex-direction: column;
    align-items: flex-start
  }

  .reference-estimate-cta .cta-actions {
    width: 100%;
    max-width: 360px
  }

  .reference-trust-stats {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:767px) {

  .session-types-row,
  .ready-actions {
    grid-template-columns: 1fr;
    display: grid
  }

  .reference-estimate-cta .cta-copy {
    flex-direction: column;
    align-items: flex-start
  }

  .reference-estimate-cta h2 {
    font-size: 2rem
  }

  .reference-estimate-cta .cta-actions {
    max-width: none
  }

  .written-review-card {
    padding: 28px
  }

  .written-review-footer {
    align-items: flex-start;
    flex-direction: column
  }

  .reference-trust-stats {
    grid-template-columns: 1fr
  }

  .reference-person-row {
    align-items: flex-start;
    flex-wrap: wrap
  }

  .reference-person-row .savings-pill {
    margin-left: 0
  }

}


/* Missing reference elements pass */

/* Outcomes CTA: Ready to gain these skills */
.skills-cta {
  margin-top: 72px;
  border-radius: 16px;
  border: 1px solid rgba(58, 28, 203, .28);
  background: linear-gradient(135deg, rgba(24, 24, 27, .72), rgba(9, 9, 11, .68));
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.skills-cta h3 {
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}

.skills-cta p {
  color: #a1a1aa;
  font-size: 1rem;
  line-height: 1.6;
}

.skills-cta-actions {
  display: flex;
  gap: 16px;
  flex: none;
}

.skills-cta-actions .btn {
  padding: 16px 28px;
  border-radius: 13px;
}

/* Stats feature cards */
.stats-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.stats-feature-card {
  background: rgba(24, 24, 27, .58);
  border: 1px solid rgba(58, 28, 203, .30);
  border-radius: 16px;
  padding: 28px;
  transition: all .28s ease;
}

.stats-feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(58, 28, 203, .52);
  box-shadow: 0 0 28px rgba(58, 28, 203, .22);
}

.stats-feature-card h3 {
  color: var(--red-500);
  font-size: 1.5rem;
  font-weight: 950;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}

.stats-feature-card p {
  color: #a1a1aa;
  line-height: 1.6;
  font-size: .95rem;
}

/* Real testimonial video */
.video-frame-real video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  opacity: .72;
  transition: filter .3s ease, opacity .3s ease;
}

.video-frame-real.is-playing video {
  filter: grayscale(0%);
  opacity: 1;
}

.video-frame-real.is-playing .play-button,
.video-frame-real.is-playing .video-label,
.video-frame-real.is-playing .video-gradient {
  opacity: 0;
  pointer-events: none;
}

.video-frame-real .play-button {
  z-index: 4;
}

.video-frame-real .video-label {
  z-index: 3;
}

.video-frame-real .video-gradient {
  z-index: 2;
}

/* Footer social fallback icons */
.social-links a {
  position: relative;
  overflow: hidden;
}


.social-links a span {
  display: none;
  font-weight: 950;
  font-size: 1rem;
  color: #fff;
  line-height: 1;
}

/* When lucide cannot render a brand icon, show text fallback */
.social-links a:empty span,
.social-links a span:only-child {
  display: block;
}

.social-links a:not(:has(svg)) span {
  display: block;
}

/* Force fallback text visible if icon library skips a brand icon */
.social-links a span {
  display: block;
}

.social-links a svg+span {
  display: none;
}


@media (max-width:900px) {
  .skills-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .skills-cta-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .stats-feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:767px) {
  .skills-cta {
    margin-top: 48px;
    padding: 24px;
  }

  .skills-cta h3 {
    font-size: 1.45rem;
  }
}


/* Polish pass 2 — section-specific corrections */

/* Course column: What You'll Learn should fit content; Ready card sits below */
.curriculum-card {
  height: 50% !important;
  min-height: 480px !important;
  justify-content: flex-start !important;
  align-self: start;
  gap: 28px;
}


#class-info .curriculum-panel{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:32px;
  align-self:start;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

#class-info .curriculum-learn-card{
  width:100%;
  height:auto !important;
  min-height:0 !important;
  display:block !important;
  overflow:visible !important;
}

#class-info .ready-card{
  width:100%;
  margin:0 !important;
  padding:32px;
}

#class-info .ready-card-bg{
  display:none !important;
}




/* Walk Away With outcome card number closer to icon */
.outcome-card span {
  display: inline-grid;
  vertical-align: middle;
}

.outcome-card .num {
  position: absolute;
  top: 34px;
  left: 104px;
  right: auto;
  font-size: 3.7rem;
  color: rgba(255, 255, 255, .10);
  line-height: .85;
  letter-spacing: -.05em;
}

.outcome-card:hover .num {
  color: rgba(58, 28, 203, .48);
}

/* Process CTA below process cards */
.process-cta {
  width: min(100%, 760px);
  margin: 72px auto 0;
  border-radius: 18px;
  padding: 42px 36px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(135deg, rgba(24, 24, 27, .68), rgba(9, 9, 11, .72));
}

.process-cta h3 {
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: -.025em;
  margin-bottom: 18px;
}

.process-cta p {
  color: #a1a1aa;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 26px;
}

.process-cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.process-cta-actions .btn {
  min-width: 210px;
}

/* Package cards: original circular checkmark style */
.package-card ul {
  gap: 18px;
}

.package-card li {
  align-items: center;
  gap: 14px;
  color: #e5e7eb;
}

.package-card li:before {
  content: "✓";
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #202124;
  color: #e5e7eb;
  font-size: .72rem;
  font-weight: 950;
  line-height: 1;
}

.package-card.featured li:before {
  background: var(--red-500);
  color: #fff;
  box-shadow: 0 0 14px rgba(239, 17, 26, .25);
}

.package-card:not(.featured) li:hover:before {
  background: var(--red);
  color: #fff;
}


.footer .brand-text strong {
  color: #fff;
  font-size: 1.8rem;
}

.social-links {
  gap: 14px;
}

.social-links a {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #18191d;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .04);
  transition: all .2s ease;
}


.social-links a span {
  display: block !important;
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

/* Testimonial video: make click work and visually match reference */
.video-frame-real {
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.video-frame-real video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-frame-real.is-playing {
  background: #000;
}

.video-frame-real.is-playing video {
  filter: none;
  opacity: 1;
}

.video-frame-real.is-playing .play-button,
.video-frame-real.is-playing .video-label,
.video-frame-real.is-playing .video-gradient {
  opacity: 0;
  visibility: hidden;
}

/* Keep reference section spacing */
#reviews .reviews-layout {
  align-items: stretch;
}

#reviews .video-card,
#reviews .quote-card {
  border-color: rgba(255, 255, 255, .11);
}

/* Mobile fixes */
@media (max-width:767px) {
  .outcome-card .num {
    top: 28px;
    left: 92px;
    font-size: 3.2rem;
  }

  .process-cta {
    margin-top: 48px;
    padding: 30px 22px;
  }

  .process-cta-actions {
    display: grid;
  }

  .process-cta-actions .btn {
    width: 100%;
    min-width: 0;
  }
}


/* Pixel polish pass from ACES reference screenshots */

/* Course section reference spacing */
#class-info .class-grid {
  gap: 56px;
}

#class-info .about-card,
#class-info .curriculum-card {
  border-radius: 16px;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(24, 24, 27, .66);
}

#class-info .format-card {
  min-height: 146px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#class-info .format-card span {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(58, 28, 203, .22);
}

#class-info .format-card h4 {
  font-size: 1rem;
}

#class-info .format-card p {
  color: #7d8391;
  font-weight: 650;
}

#class-info .session-type-card {
  min-height: 138px;
  padding: 24px;
}

#class-info .red-word {
  color: #ff3f46;
}

/* Business hours card: reference screenshot */
.business-hours-card {
  grid-column: 1 / -1;
  border: 1px solid rgba(58, 28, 203, .55) !important;
  border-radius: 22px !important;
  gap: 28px;
  align-items: flex-start;
  background: rgba(24, 24, 27, .64) !important;
}

.business-hours-card>span {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgb(44 44 44);
}

.business-hours-card>span svg {
  width: 24px;
  height: 24px;
  color: #82d859;
}

.business-hours-card h3 {
  font-size: 1.3rem;
  line-height: 1.1;
  margin-top: 10px;
  margin-bottom: 24px;
  font-weight: 900;
}

.business-hours-card .hours-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 140px;
  align-items: center;
  color: #aeb4c2;
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 14px;
}

.business-hours-card .hours-row em {
  font-style: normal;
  color: #aeb4c2;
}

.business-hours-card .hours-row strong {
  color: #fff;
  font-weight: 900;
  white-space: nowrap;
}

.business-hours-card hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
  margin: 24px 0;
}

.business-hours-card a {
  color: #82d859 !important;
font-size: 0.875rem;
    font-weight: 600;
}

/* Footer exact reference */
.footer {
  padding-top: 84px;
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer-grid {
  grid-template-columns: 1.35fr 1fr 1fr 1.05fr;
  gap: 76px;
  align-items: start;
}





.footer .brand-text strong {
  font-size: 2.65rem !important;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}

.footer-grid>div:first-child p {
  color: #a6adbb;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 360px;
}

.footer h3 {
  font-size: 1.3rem;
  font-weight: 950;
  margin-bottom: 16px;
  color: #fff;
}

.footer a,
.footer p {
  font-size: 1rem;
  /* color: #9ca3af; */
  line-height:1.55 !important;
}

.footer-grid>div {
  gap: 8px;
}

.social-links {
  display: flex;
  gap: 16px;
  margin-top: 28px;
}

.social-links a {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #18191f;
  display: grid;
  place-items: center;
  transition: .25s ease;
}

.social-links a:hover {
  background:#3a1ccb !important;
  transform: translateY(-2px);
}

.social-links img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.footer-hours {
  color: #83d95a !important;
  font-size: .9rem !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.footer-bottom {
  margin-top: 74px;
  padding: 28px 0 30px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.footer-bottom p,
.footer-bottom a {
  color: #6f7686;
  font-size: .95rem;
}

/* CTA width/spacing reference */
.process-cta {
  width: min(100%, 760px);
  padding: 44px 40px 38px;
  border-radius: 18px;
}

.process-cta h3 {
  font-size: 2rem;
}

.process-cta-actions .btn {
  min-width: 220px;
  height: 68px;
}

/* Testimonial video click: ensure overlay does not block playing */
.video-frame-real .testimonial-video {
  cursor: pointer;
}

.video-frame-real.is-playing .testimonial-video {
  pointer-events: auto;
  position: relative;
  z-index: 5;
}

/* Contact section card row fixes */
.contact-list {
  align-content: start;
}

@media (max-width:1100px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }

  .business-hours-card .hours-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width:767px) {
  #class-info .class-grid {
    gap: 36px;
  }

  .business-hours-card {
    padding: 28px !important;
  }


  .business-hours-card .hours-row {
    font-size: 1.05rem;
  }

  .footer {
    padding-top: 60px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .footer .brand-text strong {
    font-size: 2.1rem !important;
  }
}

/* =========================================================
   FINAL CLEANUP OVERRIDES
   Purpose:
   - Keeps current design intact
   - Fixes invalid/duplicate side effects
   - Ensures video, footer, cards, and responsive behavior work
========================================================= */

/* Reveal should never force element height */
.reveal.visible{
  opacity:1;
  transform:none;
}

/* Package cards: ensure clean height behavior */
.package-card{
  min-height:620px !important;
}

/* Video: final reference testimonial behavior */
.reference-video-frame{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  background:#000;
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
}

.reference-video-frame video,
.reference-video-frame .testimonial-video{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
  display:block;
}

.reference-video-frame video::-webkit-media-controls{
  z-index:20;
}

.reference-video-frame .video-gradient,
.video-gradient{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.72),
    rgba(0,0,0,.12),
    transparent
  );
  pointer-events:none;
  transition:opacity .25s ease;
}

.reference-video-frame .play-button,
.play-button{
  position:absolute;
  inset:0;
  margin:auto;
  width:80px;
  height:80px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--red);
  color:#fff;
  box-shadow:var(--shadow-red);
  transition:
    opacity .25s ease,
    transform .25s ease,
    background .25s ease;
  z-index:10;
}

.reference-video-frame .play-button:hover,
.play-button:hover{
  transform:scale(1.08);
}

.reference-video-frame .play-button svg,
.play-button svg{
  width:36px;
  height:36px;
  fill:currentColor;
  margin-left:4px;
}

.reference-video-frame .video-label,
.video-label{
  position:absolute;
  left:16px;
  bottom:16px;
  z-index:8;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.85);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.05em;
  transition:opacity .25s ease;
}

/* On play: native controls take over. Overlay returns only when JS removes .is-playing after ended. */
.reference-video-frame.is-playing .video-gradient,
.reference-video-frame.is-playing .video-label{
  opacity:0;
}

.reference-video-frame.is-playing .play-button{
  opacity:0;
  pointer-events:none;
  transform:scale(.9);
}

/* Course right column: keep What You'll Learn and Ready card independent */
#class-info .curriculum-panel{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:32px;
  align-self:start;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#class-info .curriculum-learn-card{
  width:100%;
  height:auto !important;
  min-height:0 !important;
  display:block !important;
  overflow:visible !important;
}

#class-info .curriculum-list{
  flex:initial !important;
  margin-bottom:0;
}

#class-info .ready-card{
  width:100%;
  margin:0 !important;
}

#class-info .ready-card-bg{
  display:none !important;
}

/* Footer final look */
.footer{
  background:#000 !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  padding-top:46px !important;
}

.footer-grid{
  width:min(100% - 48px,1280px) !important;
  grid-template-columns:1.25fr .9fr .9fr 1fr !important;
  gap:72px !important;
  align-items:start !important;
}

.footer-grid > div{
  gap:12px !important;
}

.footer .brand.footer-brand{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin-bottom:5px !important;
}


.footer .brand-text strong{
  font-size:2rem !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
  color:#fff !important;
}

.footer-grid > div:first-child p{
  color:#ebeef5 !important;
  font-size:1rem !important;
  line-height:1.65 !important;
  max-width:360px !important;
}

.footer h3{
  color:#84d95a !important;
  font-size:1.25rem !important;
  font-weight:950 !important;
  line-height:1.1 !important;
  margin-bottom:22px !important;
}


.footer a:hover{
  color:#fff !important;
}

.social-links{
  display:flex !important;
  gap:14px !important;
  margin-top:28px !important;
}

.social-links a{
  width:44px !important;
  height:44px !important;
  border-radius:10px !important;
  background:#18191f !important;
  color:#fff !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(255,255,255,.04) !important;
  box-shadow:none !important;
}


.footer-bottom{
  width:min(100% - 48px,1280px) !important;
  margin-top:60px !important;
  padding:26px 0 28px !important;
  border-top:1px solid rgba(255,255,255,.09) !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:20px !important;
}

.footer-bottom p,
.footer-bottom a{
  color:#7b8190 !important;
  font-size:.95rem !important;
}

.footer-bottom div{
  display:flex !important;
  gap:26px !important;
}

/* Mobile safeguards */
@media (max-width:1100px){
  .footer-grid{
    grid-template-columns:1fr 1fr !important;
    gap:48px !important;
  }
}

@media (max-width:767px){
  .footer{
    padding-top:56px !important;
  }

  .footer-grid{
    width:min(100% - 32px,1280px) !important;
    grid-template-columns:1fr !important;
    gap:40px !important;
  }

  .footer-bottom{
    width:min(100% - 32px,1280px) !important;
    flex-direction:column !important;
    align-items:flex-start !important;
  }


  .reference-video-frame .play-button,
  .play-button{
    width:64px;
    height:64px;
  }
}