/* --- VIREXA EXACT HERO + HEADER MATCH --- */
/* Updated: mobile typography is forced here with stronger selectors.
   Next step in index.html: we will remove/neutralize the old inline hero styles + connect hero-gsap.js correctly. */

/* =========================
   DESKTOP: 1025px+
========================= */
@media (min-width: 1025px) {
  #virexa-header {
    position: fixed !important;
    top: 20px !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 1250px !important;
    height: 64px !important;
    z-index: 100000 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
  }

  #virexa-header.is-transparent {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  #virexa-header .header-container {
    width: 100% !important;
    height: 100% !important;
    padding: 0 24px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
  }

  #virexa-header .header-left .logo-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: none !important;
  }

  html body #virexa-header .header-logo-img,
  html body #virexa-header #header-logo,
  html body #virexa-header .logo-link img {
    content: url("../images/virexa-logo.jpg") !important;
    height: 46px !important;
    width: auto !important;
    max-height: 46px !important;
    max-width: 260px !important;
    min-width: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
    filter: none !important;
    box-shadow: none !important;
  }

  #virexa-header .header-brand {
    display: inline !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }

  #virexa-header .header-center {
    display: flex !important;
    height: 64px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
  }

  #virexa-header .nav-item > a {
    padding: 0 20px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  #virexa-header .header-right {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    justify-content: flex-end !important;
  }

  #virexa-header .btn-login {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  #virexa-header .btn-signup {
    padding: 10px 24px !important;
    border-radius: 8px !important;
    height: auto !important;
    min-width: 0 !important;
    background: #0B1320 !important;
    color: #000000 !important;
    box-shadow: none !important;
    font-weight: 600 !important;
  }

  #virexa-header .lang-btn {
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
  }

  .scroll-container {
    width: 100% !important;
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    background: #000000 !important;
    background-color: #000000 !important;
  }

  .hero-content {
    position: absolute !important;
    top: 15% !important;
    left: 0 !important;
    right: 0 !important;
    transform: none;
    translate: none;
    width: 100% !important;
    max-width: none !important;
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    z-index: 10 !important;
  }

  html body main .scroll-container .hero-content .hero-title {
    font-family: "Helvetica Now Display", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: clamp(2.5rem, 8vw, 5.5rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 20px 0 !important;
    color: #ffffff !important;
    max-width: none !important;
    text-shadow: none !important;
  }

  html body main .scroll-container .hero-content .hero-title .highlight {
    font-family: "Helvetica Now Display", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    opacity: 0.8 !important;
    display: block !important;
    margin-top: 10px !important;
    letter-spacing: -0.04em !important;
  }

  html body main .scroll-container .hero-content .hero-desc {
    max-width: 500px !important;
    color: #9CA3AF !important;
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
    margin: 0 auto !important;
    font-weight: 400 !important;
  }

  .hero-card-wrapper {
    position: absolute !important;
    top: 45% !important;
    left: 50% !important;
    transform: translateX(-50%);
    z-index: 20 !important;
    width: 552px !important;
    height: auto !important;
    aspect-ratio: 866 / 554 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    clip-path: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .hero-card-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
    display: block !important;
  }

  .reveal-content {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%);
    width: 100% !important;
    max-width: none !important;
    padding: 0 20px !important;
  }
}

/* =========================
   MOBILE / TABLET: <=1024px
========================= */
@media (max-width: 1024px) {
  #virexa-header {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    transform: none;
    width: calc(100% - 20px) !important;
    height: 60px !important;
    border-radius: 12px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 100001 !important;
    padding: 0 20px !important;
  }

  #virexa-header .header-container {
    width: 100% !important;
    height: 60px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
  }

  #virexa-header .header-left .logo-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: none !important;
  }

  html body #virexa-header .header-logo-img,
  html body #virexa-header #header-logo,
  html body #virexa-header .logo-link img {
    content: url("../images/virexa-logo.jpg") !important;
    width: auto !important;
    height: 44px !important;
    max-width: 230px !important;
    max-height: 44px !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    filter: none !important;
    box-shadow: none !important;
  }

  #virexa-header .header-brand {
    display: inline !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }

  #virexa-header .header-right .btn-login,
  #virexa-header .header-right .btn-signup,
  #virexa-header .header-right .lang-btn {
    display: none !important;
  }

  #virexa-header .header-center:not(.is-open) {
    display: none !important;
  }

  #virexa-header .mobile-menu-toggle {
    display: flex !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    border: none !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-end !important;
    gap: 7px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #virexa-header .mobile-menu-toggle span {
    display: block !important;
    height: 2px !important;
    background: #0B1320 !important;
    border-radius: 2px !important;
  }

  #virexa-header .mobile-menu-toggle span:first-child {
    width: 26px !important;
  }

  #virexa-header .mobile-menu-toggle span:last-child {
    width: 18px !important;
  }

  .scroll-container {
    width: 100% !important;
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #000000 !important;
    background-color: #000000 !important;
  }

  .virexa-reveal-native .hero-reveal-stage {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .hero-content {
    position: absolute !important;
    top: 15% !important;
    left: 0 !important;
    right: 0 !important;
    
    translate: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 20px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    z-index: 10 !important;
  }

  html body main .scroll-container .hero-content h1.hero-title,
  html body main section.scroll-container .hero-content h1.hero-title,
  html body .hero-content h1.hero-title,
  html body h1.hero-title {
    font-family: "Helvetica Now Display", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 45px !important;
    line-height: 45px !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    color: rgb(255,255,255) !important;
    text-shadow: none !important;
    max-width: none !important;
  }

  html body main .scroll-container .hero-content h1.hero-title span.highlight,
  html body main section.scroll-container .hero-content h1.hero-title span.highlight,
  html body .hero-content h1.hero-title span.highlight,
  html body h1.hero-title span.highlight {
    font-family: "Helvetica Now Display", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    display: block !important;
    font-size: 24px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    color: rgb(255,255,255) !important;
    opacity: 1 !important;
    margin-top: 8px !important;
    letter-spacing: -0.04em !important;
    text-shadow: none !important;
  }

  html body main .scroll-container .hero-content p.hero-desc,
  html body main section.scroll-container .hero-content p.hero-desc,
  html body .hero-content p.hero-desc,
  html body p.hero-desc {
    max-width: 295px !important;
    margin: 0 auto !important;
    color: #9CA3AF !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
  }

  .hero-card-wrapper {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: min(92vw, 420px) !important;
    height: auto !important;
    aspect-ratio: 866 / 554 !important;
    transform-origin: center center !important;
    z-index: 20 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    clip-path: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  .hero-card-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
    display: block !important;
  }

  .reveal-content {
    position: absolute !important;
    top: 56% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%);
    width: 100% !important;
    max-width: none !important;
    padding: 20px 20px 0 !important;
  }

  .cards-scene {
    height: 240px !important;
    margin-top: -6px !important;
  }

  .card.main {
    width: 135px !important;
    height: 250px !important;
    transform: translateY(-16px) !important;
  }

  .card.left,
  .card.right {
    width: 115px !important;
    height: 210px !important;
  }

  .card.left {
    transform: translateX(-55%) translateY(-16px) rotate(-8deg) !important;
  }

  .card.right {
    transform: translateX(55%) translateY(-16px) rotate(8deg) !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-card-wrapper {
    top: 35% !important;
    left: 50% !important;
    width: 552px !important;
    height: auto !important;
    aspect-ratio: 866 / 554 !important;
  }
}

/* =========================
   VIREXA scoped readability repairs
========================= */
.section.white,
.section.light,
#cards,
#crypto-purchase,
#faq {
  background-color: #0B1320 !important;
  color: #0B1320 !important;
}

.section.white .section-title,
.section.light .section-title,
#cards .section-title,
#cards .card-content-title,
#cards .card-tab,
#cards .card-feature-title,
#crypto-purchase .section-title,
#crypto-purchase .crypto-ramp-info h2,
#faq .section-title,
#faq .faq-question {
  color: #0B1320 !important;
}

.section.white .section-desc,
.section.light .section-desc,
#cards .section-desc,
#cards .card-content-description,
#cards .card-features,
#cards .card-features li,
#crypto-purchase .section-desc,
#crypto-purchase .crypto-ramp-info p,
#crypto-purchase .crypto-ramp-info li,
#faq .section-desc,
#faq .faq-answer,
#faq .faq-answer p {
  color: #5F6B66 !important;
}

#cards .card-content,
#cards .card-tabs,
#faq .faq-item {
  background-color: #0B1320 !important;
}

#faq .faq-toggle {
  color: #5F6B66 !important;
}

#crypto-purchase .swap-widget,
#crypto-purchase .swap-widget h3,
#crypto-purchase .swap-widget label,
#crypto-purchase .swap-widget span {
  color: inherit;
}

.section.dark,
.section.black,
#how-it-works,
#testimonials,
#mobile-payment {
  background-color: #02070D !important;
  color: #ffffff !important;
}

.section.dark .section-title,
.section.black .section-title,
#how-it-works .section-title,
#testimonials .section-title,
#mobile-payment .section-title,
#how-it-works h3,
#mobile-payment h3 {
  color: #ffffff !important;
}

.section.dark .section-desc,
.section.black .section-desc,
#how-it-works .section-desc,
#how-it-works p,
#testimonials .section-desc,
#testimonials .testi-text,
#testimonials .testi-info span,
#mobile-payment .section-desc,
#mobile-payment p {
  color: #A8B3C2 !important;
}

/* Keep payment card copy readable on white cards */
#mobile-payment .payment-card .payment-title {
  color: #0B1320 !important;
}

#mobile-payment .payment-card .payment-description {
  color: #5F6B66 !important;
}

#mobile-payment .payment-card .payment-btn {
  color: #FFFFFF !important;
}

/* =========================
   HOMEPAGE DESIGN STABILITY PASS
   Centralized final presentation layer for section color, spacing, and card readability.
========================= */
:root {
  --virexa-light-bg: #F8FAF9;
  --virexa-light-ink: #0B1320;
  --virexa-light-muted: #5F6B66;
  --virexa-dark-bg: #02070D;
  --virexa-dark-muted: #B5C2BD;
  --virexa-card-border: rgba(6, 17, 15, 0.10);
  --virexa-card-shadow: 0 26px 70px rgba(3, 17, 13, 0.10);
}

.section {
  padding-top: clamp(64px, 5vw, 96px) !important;
  padding-bottom: clamp(64px, 5vw, 96px) !important;
}

.section-header {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-desc {
  max-width: 660px !important;
}

.section.white,
.section.light,
#cards,
#payment-bridge,
#crypto-purchase,
#faq {
  background: linear-gradient(180deg, #ffffff 0%, var(--virexa-light-bg) 100%) !important;
  color: var(--virexa-light-ink) !important;
}

.section.white .section-title,
.section.light .section-title,
#cards .section-title,
#payment-bridge .section-title,
#crypto-purchase .section-title,
#faq .section-title,
#cards .card-content-title,
#crypto-purchase .crypto-ramp-info h2,
#faq .faq-question {
  color: var(--virexa-light-ink) !important;
}

.section.white .section-desc,
.section.light .section-desc,
#cards .section-desc,
#payment-bridge .section-desc,
#crypto-purchase .section-desc,
#faq .section-desc,
#cards .card-content-description,
#cards .card-features,
#cards .card-features li,
#crypto-purchase .crypto-ramp-info p,
#crypto-purchase .crypto-ramp-info li,
#faq .faq-answer,
#faq .faq-answer p {
  color: var(--virexa-light-muted) !important;
}

#cards .card-content,
#cards .card-tabs,
#crypto-purchase .swap-widget,
#faq .faq-item,
.audience-card,
#mobile-payment .payment-card {
  border-color: var(--virexa-card-border) !important;
  box-shadow: var(--virexa-card-shadow) !important;
}

#cards .card-content,
#faq .faq-item,
#mobile-payment .payment-card {
  background: #0B1320 !important;
}

#crypto-purchase .swap-widget {
  background: #0B1320 !important;
  color: var(--virexa-light-ink) !important;
}

#crypto-purchase .dark-received label {
  color: #B8C5C0 !important;
}

#crypto-purchase .swap-footer span:first-child {
  color: #6B7280 !important;
}

.section.dark,
.section.black,
#how-it-works,
#testimonials,
#mobile-payment {
  background: var(--virexa-dark-bg) !important;
  color: #ffffff !important;
}

.section.dark .section-desc,
.section.black .section-desc,
#how-it-works p,
#testimonials .rv-text,
#mobile-payment .section-desc,
#mobile-payment p {
  color: var(--virexa-dark-muted) !important;
}

.audience-card {
  border-radius: 28px !important;
}

.audience-card i {
  background: rgba(0, 242, 184, 0.10) !important;
  color: #00DFAF !important;
}

@media (max-width: 768px) {
  .section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .section-header {
    margin-bottom: 42px !important;
  }

  .section-desc {
    max-width: 360px !important;
  }
}

/* =========================
   SMALL MOBILE: <=480px
   Strongest final override
========================= */
@media (max-width: 480px) {
  html body main .scroll-container .hero-content h1.hero-title,
  html body main section.scroll-container .hero-content h1.hero-title,
  html body .hero-content h1.hero-title,
  html body h1.hero-title {
    font-family: "Helvetica Now Display", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 45px !important;
    line-height: 45px !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 10px 0 !important;
    color: #ffffff !important;
  }

  html body main .scroll-container .hero-content h1.hero-title span.highlight,
  html body main section.scroll-container .hero-content h1.hero-title span.highlight,
  html body .hero-content h1.hero-title span.highlight,
  html body h1.hero-title span.highlight {
    font-family: "Helvetica Now Display", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 24px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    margin-top: 8px !important;
  }
}

/* =========================
   HERO REVEAL STABILITY
   Keeps the pinned reveal, dots, and card flip while preventing scene overlap.
========================= */
html body main .scroll-container {
  isolation: isolate !important;
}

html body main .scroll-container .hero-content,
html body main .scroll-container .hero-card-wrapper,
html body main .scroll-container .reveal-content {
  will-change: transform, opacity !important;
}

html body main .scroll-container .hero-content {
  z-index: 30 !important;
}

html body main .scroll-container .hero-card-wrapper {
  z-index: 24 !important;
}

html body main .scroll-container .hero-card-wrapper img {
  animation: virexaHeroCardHorizontalSpin 6.5s ease-in-out infinite !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  transform-origin: center center !important;
  transform-style: preserve-3d !important;
}

html body main .scroll-container .reveal-content {
  top: 54% !important;
  z-index: 18 !important;
}

html body main .scroll-container .reveal-text-block {
  margin-bottom: 28px !important;
}

html body main .scroll-container .cards-scene {
  height: clamp(260px, 32vh, 360px) !important;
  margin-top: 54px !important;
}

html body main .brands-marquee,
html body main .virexa-about-pro,
html body main .section.dark {
  position: relative !important;
  z-index: 2 !important;
}

.pin-spacer {
  background: #000000 !important;
}

@media (min-width: 1025px) {
  html body main .scroll-container .hero-card-wrapper {
    top: 46% !important;
    width: min(46vw, 620px) !important;
  }

  html body main .scroll-container .reveal-title {
    font-size: clamp(3rem, 5vw, 5.15rem) !important;
  }
}

@media (max-width: 1024px) {
  html body main .scroll-container {
    min-height: 720px !important;
  }

  html body main .scroll-container .hero-content {
    top: 13% !important;
  }

  html body main .scroll-container .hero-card-wrapper {
    top: 50% !important;
    width: min(90vw, 520px) !important;
  }

  html body main .scroll-container .reveal-content {
    top: 55% !important;
  }

  html body main .scroll-container .reveal-text-block {
    margin-bottom: 18px !important;
  }

  html body main .scroll-container .cards-scene {
    height: min(34vh, 280px) !important;
    margin-top: 30px !important;
  }
}

@media (max-width: 480px) {
  html body main .scroll-container {
    min-height: 700px !important;
  }

  html body main .scroll-container .hero-card-wrapper {
    top: 53% !important;
    width: min(92vw, 420px) !important;
  }

  html body main .scroll-container .reveal-content {
    top: 56% !important;
  }

  html body main .scroll-container .reveal-title {
    font-size: 34px !important;
    line-height: 1.02 !important;
  }

  html body main .scroll-container .reveal-desc {
    max-width: 330px !important;
    font-size: 15px !important;
  }

  html body main .scroll-container .cta-btn-dark {
    width: auto !important;
    min-width: 230px !important;
    padding: 16px 26px !important;
  }
}