/* Lemon-style stage redesign: black field, neon cyan focus, high whitespace rhythm. */
:root {
  --stage-black: #020403;
  --stage-panel: rgba(6, 13, 16, 0.86);
  --stage-panel-2: rgba(10, 20, 24, 0.78);
  --stage-cyan: #00e5ff;
  --stage-cyan-soft: rgba(0, 229, 255, 0.18);
  --stage-gold: #ffd66b;
  --stage-line: rgba(0, 229, 255, 0.18);
  --stage-text: #f5fbff;
  --stage-muted: rgba(232, 244, 248, 0.82);
  --stage-shadow: 0 0 24px rgba(0, 229, 255, 0.16), 0 34px 90px rgba(0, 0, 0, 0.42);
}

html {
  background: var(--stage-black);
}

body {
  color: var(--stage-text);
  background:
    radial-gradient(circle at 50% -20%, rgba(0, 229, 255, 0.08), transparent 36%),
    linear-gradient(180deg, #020403 0%, #050807 54%, #020403 100%) !important;
}

body::before {
  opacity: 0.38;
  background:
    radial-gradient(circle at 18% 18%, rgba(0, 229, 255, 0.1), transparent 32%),
    radial-gradient(circle at 82% 12%, rgba(255, 214, 107, 0.08), transparent 28%),
    linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.03), transparent);
}

.tech-canvas {
  opacity: 0.72;
  mix-blend-mode: screen;
}

.site-header {
  height: 86px !important;
  padding-inline: clamp(34px, 5vw, 70px) !important;
  color: rgba(245, 251, 255, 0.86) !important;
  background: rgba(2, 4, 3, 0.92) !important;
  border-bottom: 1px solid rgba(0, 229, 255, 0.12) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 58px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
}

.brand {
  min-width: clamp(150px, 15vw, 205px) !important;
  position: relative;
  isolation: isolate;
}

.brand::before {
  content: "";
  position: absolute;
  inset: -14px -18px;
  z-index: -1;
  border-radius: 6px;
  background: radial-gradient(ellipse at 32% 50%, rgba(0, 229, 255, 0.2), transparent 62%);
  filter: blur(10px);
}

.brand-logo-full {
  content: url("../images/brand/banma-logo-white.png");
  opacity: 1 !important;
  width: clamp(170px, 13vw, 218px) !important;
  height: auto !important;
  max-height: 62px !important;
  filter: drop-shadow(0 0 22px rgba(0, 229, 255, 0.28));
}

.footer-logo-full {
  content: url("../images/brand/banma-logo-white.png");
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.16));
}

.phone-pill {
  color: #061011 !important;
  background: linear-gradient(135deg, var(--stage-gold), #fff0b6) !important;
  box-shadow: 0 0 24px rgba(255, 214, 107, 0.22) !important;
}

.page-shell {
  background:
    linear-gradient(90deg, rgba(0, 229, 255, 0.025) 1px, transparent 1px),
    linear-gradient(rgba(0, 229, 255, 0.022) 1px, transparent 1px),
    var(--stage-black);
  background-size: 96px 96px;
}

.home-hero,
.subhero {
  min-height: clamp(500px, 60vh, 720px);
  color: var(--stage-text);
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 229, 255, 0.12), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(255, 214, 107, 0.07), transparent 24%),
    linear-gradient(180deg, #020403 0%, #050807 100%) !important;
  border-bottom: 1px solid rgba(0, 229, 255, 0.12);
  overflow: hidden;
}

.home-hero::before,
.subhero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0 30%, rgba(0, 0, 0, 0.18) 52%, rgba(0, 0, 0, 0.54) 100%),
    radial-gradient(ellipse at 50% 68%, rgba(0, 229, 255, 0.1), transparent 45%);
  opacity: 0.72;
}

.hero-media video {
  opacity: 0.46 !important;
  filter: saturate(1.08) contrast(1.08) brightness(0.9) !important;
}

.home-hero__copy h1,
.subhero h1 {
  color: #fff;
  text-shadow: 0 0 32px rgba(0, 229, 255, 0.18);
}

.hero-lead,
.subhero p,
.section-head > p,
.course-main p,
.support-card p,
.story-step p,
.about-card p,
.faq-item p {
  color: var(--stage-muted);
}

.hero-panel li,
.course-side li,
.course-check-list li,
.course-module-grid li,
.timeline-list li,
.outcome-list li,
.faq-item,
.course-note,
.course-meta strong,
.support-card,
.story-step,
.about-card {
  color: rgba(244, 250, 252, 0.9) !important;
}

.eyebrow {
  color: rgba(0, 229, 255, 0.88) !important;
  letter-spacing: 0.18em;
}

.eyebrow::before,
.eyebrow::after {
  background: linear-gradient(90deg, var(--stage-gold), var(--stage-cyan)) !important;
}

.section,
.package-support,
.result-preview,
.home-video-section,
.home-teacher-section {
  position: relative;
  background:
    radial-gradient(circle at 14% 0%, rgba(0, 229, 255, 0.08), transparent 28%),
    linear-gradient(180deg, #020403, #050807) !important;
  border-top: 1px solid rgba(0, 229, 255, 0.08);
}

.section {
  padding-block: clamp(64px, 7vw, 108px);
}

.section-head {
  align-items: end;
  gap: clamp(22px, 4vw, 54px);
  margin-bottom: clamp(26px, 4vw, 46px);
}

.section-head h2 {
  color: #fff;
  text-shadow: 0 0 22px rgba(0, 229, 255, 0.12);
}

.hero-panel,
.course-detail,
.course-side,
.course-meta div,
.course-expansion-grid article,
.course-module-grid article,
.course-guarantee,
.support-card,
.package-option,
.metric-card,
.story-step,
.home-video-copy,
.home-video-frame,
.about-card,
.faq-item,
.footer-cta {
  color: var(--stage-text);
  border: 1px solid var(--stage-line) !important;
  background:
    linear-gradient(145deg, rgba(8, 16, 19, 0.86), rgba(8, 16, 19, 0.58)),
    radial-gradient(circle at 100% 0%, rgba(0, 229, 255, 0.1), transparent 32%) !important;
  box-shadow: var(--stage-shadow) !important;
  backdrop-filter: blur(18px);
}

.course-detail,
.home-video-copy,
.about-card,
.faq-item {
  border-radius: 6px !important;
}

.course-side,
.support-card,
.metric-card,
.story-step,
.course-meta div,
.course-expansion-grid article,
.course-module-grid article {
  border-radius: 4px !important;
}

.package-option {
  border-radius: 3px !important;
}

.hero-panel::after,
.course-detail::after,
.support-card::after,
.metric-card::after,
.about-card::after,
.faq-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 42%, rgba(0, 229, 255, 0.16) 50%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-42%);
  transition: opacity 240ms ease, transform 620ms ease;
}

.hero-panel:hover::after,
.course-detail:hover::after,
.support-card:hover::after,
.metric-card:hover::after,
.about-card:hover::after,
.faq-item:hover::after {
  opacity: 1;
  transform: translateX(42%);
}

.package-option:hover,
.package-option.is-active,
.support-card:hover,
.metric-card:hover,
.story-step:hover,
.course-module-grid article:hover,
.course-expansion-grid article:hover,
.faq-item:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 229, 255, 0.42) !important;
  box-shadow: 0 0 28px rgba(0, 229, 255, 0.18), 0 32px 84px rgba(0, 0, 0, 0.42) !important;
}

.primary-button,
.secondary-button,
.ghost-button,
.footer-cta-actions a {
  border-radius: 3px !important;
  text-transform: none;
}

.primary-button {
  color: #031010 !important;
  background: linear-gradient(135deg, var(--stage-cyan), #bdf8ff) !important;
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.28) !important;
}

.secondary-button,
.ghost-button {
  color: var(--stage-text) !important;
  border-color: rgba(0, 229, 255, 0.34) !important;
  background: rgba(0, 229, 255, 0.06) !important;
}

.course-map {
  border-radius: 4px !important;
  background:
    linear-gradient(145deg, rgba(2, 4, 3, 0.98), rgba(6, 14, 17, 0.96)),
    radial-gradient(circle at 50% 0%, rgba(0, 229, 255, 0.14), transparent 34%) !important;
}

.course-map__row,
.course-map__name,
.course-map__cell,
.course-map__fit {
  border-radius: 3px !important;
}

.site-footer {
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 229, 255, 0.1), transparent 34%),
    linear-gradient(180deg, #050807, #020403 76%) !important;
  border-top: 1px solid rgba(0, 229, 255, 0.16);
}

.fixed-contact a {
  color: #031010 !important;
  background: linear-gradient(135deg, var(--stage-gold), #fff0b6) !important;
  box-shadow: 0 0 22px rgba(255, 214, 107, 0.2) !important;
}

@media (max-width: 760px) {
  .section {
    padding-block: 72px;
  }

  .site-header {
    padding-inline: 18px !important;
  }
}

/* Final client review pass: stronger readability, clearer media, tighter rhythm. */
.site-header .desktop-nav .nav-link,
.site-header .desktop-nav .nav-link:hover,
.site-header .desktop-nav .nav-link.is-active {
  font-size: 18px !important;
  font-weight: 850 !important;
}

.brand-logo-full,
.site-header.is-scrolled .brand-logo-full,
.site-header.is-light .brand-logo-full {
  content: url("../images/brand/banma-logo-white.png") !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 24px rgba(0, 229, 255, 0.34)) !important;
}

.home-hero {
  min-height: min(780px, 82vh) !important;
  padding: calc(var(--header-h) + 50px) 0 72px !important;
}

.hero-media video {
  opacity: 0.56 !important;
  filter: saturate(1.12) contrast(1.08) brightness(0.96) !important;
}

.home-hero::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0 31%, rgba(0, 0, 0, 0.22) 52%, rgba(0, 0, 0, 0.5) 100%),
    radial-gradient(ellipse at 48% 70%, rgba(0, 229, 255, 0.12), transparent 44%) !important;
  opacity: 0.68 !important;
}

.home-hero__copy {
  padding: clamp(20px, 2.4vw, 34px);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1), transparent);
  border-left: 1px solid rgba(0, 229, 255, 0.2);
}

.home-hero__copy h1 {
  text-shadow: 0 0 28px rgba(0, 0, 0, 0.72), 0 0 18px rgba(0, 229, 255, 0.12) !important;
}

.hero-lead,
.subhero p,
.section-head > p,
.home-video-copy p,
.home-video-body p,
.course-main p,
.course-side p,
.support-card p,
.story-step p,
.about-card p,
.faq-item p,
.consult-grid p,
.consult-notes span,
.consult-flow p {
  color: rgba(242, 250, 252, 0.86) !important;
}

.course-detail,
.support-card,
.metric-card,
.story-step,
.home-video-copy,
.about-card,
.faq-item,
.consult-panel,
.consult-flow article,
.consult-notes li {
  background:
    linear-gradient(145deg, rgba(8, 18, 22, 0.94), rgba(8, 18, 22, 0.76)),
    radial-gradient(circle at 100% 0%, rgba(0, 229, 255, 0.14), transparent 34%) !important;
}

.section {
  padding-block: clamp(58px, 6vw, 92px) !important;
}

.section-head {
  margin-bottom: clamp(22px, 3vw, 36px) !important;
}

.home-visual-strip {
  margin-top: clamp(26px, 3vw, 42px);
}

.home-visual-strip figure {
  border: 1px solid rgba(0, 229, 255, 0.22) !important;
  border-radius: 4px !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.38), 0 0 30px rgba(0, 229, 255, 0.12);
}

.home-visual-strip img {
  opacity: 0.9 !important;
  filter: saturate(1.04) contrast(1.08) brightness(0.88);
}

.home-visual-strip figcaption {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(6, 18, 22, 0.66)) !important;
  border: 1px solid rgba(0, 229, 255, 0.16);
}

.home-teacher-card,
.result-row figure {
  background: rgba(7, 16, 20, 0.9) !important;
  border: 1px solid rgba(0, 229, 255, 0.18) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34), 0 0 24px rgba(0, 229, 255, 0.1) !important;
}

.home-teacher-card h3,
.home-teacher-card p,
.home-teacher-card small,
.result-row strong,
.result-row figcaption {
  color: rgba(246, 252, 255, 0.92) !important;
}

@media (max-width: 1280px) {
  .site-header .desktop-nav .nav-link,
  .site-header .desktop-nav .nav-link:hover,
  .site-header .desktop-nav .nav-link.is-active {
    font-size: 17px !important;
  }
}

/* Final visibility pass: clearer media, unified nav scale, tighter first screens. */
.site-header .desktop-nav .nav-link,
.site-header .desktop-nav .nav-link:link,
.site-header .desktop-nav .nav-link:visited,
.site-header .desktop-nav .nav-link:hover,
.site-header .desktop-nav .nav-link:focus,
.site-header .desktop-nav .nav-link:focus-visible,
.site-header .desktop-nav .nav-link.is-active {
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
}

.home-hero {
  min-height: min(720px, 78vh) !important;
  padding: calc(var(--header-h) + 44px) 0 58px !important;
}

.subhero {
  min-height: clamp(330px, 40vh, 450px) !important;
  padding: calc(var(--header-h) + 46px) 0 46px !important;
}

.home-hero::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0 30%, rgba(0, 18, 20, 0.18) 54%, rgba(0, 0, 0, 0.36) 100%),
    radial-gradient(ellipse at 46% 72%, rgba(0, 229, 255, 0.16), transparent 45%) !important;
  opacity: 0.5 !important;
}

.home-hero::after {
  opacity: 0.34 !important;
}

.hero-media video {
  opacity: 0.72 !important;
  filter: saturate(1.12) contrast(1.04) brightness(1.04) !important;
}

.home-hero__copy {
  max-width: 900px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.54), rgba(0, 14, 18, 0.28), rgba(0, 0, 0, 0)) !important;
  border-left: 1px solid rgba(0, 229, 255, 0.28);
  backdrop-filter: blur(1.5px);
}

.hero-lead,
.hero-panel li,
.section-head > p,
.course-main p,
.course-side li,
.course-check-list li,
.course-module-grid li,
.timeline-list li,
.outcome-list li,
.about-copy p,
.video-copy p,
.teacher-card p,
.faq-item p,
.support-card p,
.story-step p {
  color: rgba(246, 251, 253, 0.9) !important;
}

.course-card,
.support-card,
.story-step,
.faq-item,
.about-card,
.home-teacher-card,
.consult-flow,
.result-row,
.timeline-wave-card {
  background-color: rgba(5, 18, 28, 0.82) !important;
}

.home-visual-strip,
.home-course-strip,
.course-grid,
.support-grid,
.faq-list {
  gap: clamp(16px, 2vw, 26px) !important;
}

@media (max-width: 1280px) {
  .site-header .desktop-nav .nav-link,
  .site-header .desktop-nav .nav-link:link,
  .site-header .desktop-nav .nav-link:visited,
  .site-header .desktop-nav .nav-link:hover,
  .site-header .desktop-nav .nav-link:focus,
  .site-header .desktop-nav .nav-link:focus-visible,
  .site-header .desktop-nav .nav-link.is-active {
    font-size: 17px !important;
  }
}

@media (max-width: 760px) {
  .home-hero {
    min-height: auto !important;
    padding: calc(var(--header-h) + 36px) 0 44px !important;
  }

  .subhero {
    min-height: auto !important;
    padding: calc(var(--header-h) + 34px) 0 38px !important;
  }

  .hero-media video {
    opacity: 0.62 !important;
  }
}