/* ==========================================================================
   SECTION LAYOUTS — Standout Sports Editing Landing Page
   Each section's unique structural / positioning rules
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-black);
  padding-top: 80px;
  padding-bottom: 32px;
  overflow: hidden;
  isolation: isolate;
}

/* ---- Stadium photo background layer ----
   The image is already pre-darkened with the pitch at top fading
   to black at the bottom, so we position it at the top and let it
   fall away naturally behind the headline. Light filter treatment
   retains the green/red stadium colour while keeping it on-theme. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../Images/67ad5fddcfb2611fadbb2f16.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  filter: brightness(0.72) contrast(1.08) saturate(0.85);
  opacity: 0.9;
  pointer-events: none;
}

/* ---- CSS-generated stadium atmosphere (base layer) ----
   Works standalone. Evokes floodlights at top, darkened stands
   in the middle, and a subtle pitch glow at the bottom. Sits
   under the photo so the look holds even without an image. */
.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Floodlight warm glow — top left */
    radial-gradient(ellipse 50% 30% at 20% 0%, rgba(255, 200, 110, 0.18) 0%, transparent 60%),
    /* Floodlight warm glow — top right */
    radial-gradient(ellipse 45% 28% at 80% 0%, rgba(255, 190, 90, 0.15) 0%, transparent 60%),
    /* Central stadium haze */
    radial-gradient(ellipse 70% 40% at 50% 10%, rgba(255, 180, 51, 0.08) 0%, transparent 65%),
    /* Subtle pitch glow — bottom */
    radial-gradient(ellipse 90% 45% at 50% 100%, rgba(20, 45, 25, 0.25) 0%, transparent 70%),
    /* Base vertical gradient: sky → stands → pitch */
    linear-gradient(180deg,
      #050506 0%,
      #0a0a0e 30%,
      #0d0d10 55%,
      #080809 80%,
      #030305 100%
    );
}

/* ---- Heavy vignette overlay (keeps text legible + ties it all together) ---- */
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.85) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 25%, transparent 70%, rgba(0, 0, 0, 0.75) 100%);
}

.hero__particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 880px;
  margin: 0 auto;
}

/* Kill stacked margins inside hero so the flex gap controls all spacing */
.hero__content .eyebrow,
.hero__content .hero__headline {
  margin: 0;
}

/* ==========================================================================
   HERO COMPOSITE PLAYER IMAGE — holographic emergence effect
   The cutout players appear to materialise out of the darkness with a
   hue-shifting aura behind, chromatic drop-shadow bloom, and edge fade.
   ========================================================================== */
.hero__image-wrap {
  position: relative;
  margin-bottom: -8px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

/* ---- Behind-glow: hue-shifting holographic aura ---- */
.hero__image-wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 150%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse 55% 60% at 50% 45%, rgba(255, 180, 51, 0.30) 0%, rgba(255, 180, 51, 0.10) 40%, transparent 70%),
    radial-gradient(ellipse 40% 55% at 30% 55%, rgba(120, 180, 255, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 55% at 70% 55%, rgba(255, 120, 180, 0.10) 0%, transparent 60%);
  filter: blur(50px);
  z-index: -1;
  pointer-events: none;
  animation: holo-shift 8s ease-in-out infinite;
}

/* ---- Dark floor shadow grounding the cutout ---- */
.hero__image-wrap::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 70%;
  height: 20px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65) 0%, transparent 70%);
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}

.hero__image {
  width: clamp(440px, 54vh, 620px);
  max-width: 68vw;
  height: auto;
  display: block;

  /* ---- Stacked chromatic drop-shadows follow the natural PNG silhouette ----
     No mask — the drop-shadows trace every edge of the players so the glow
     wraps smoothly without any hard cut-offs. Layers build gold bloom first,
     then subtle cool + warm fringes for the holographic colour depth. */
  filter:
    drop-shadow(0 26px 36px rgba(0, 0, 0, 0.70))
    drop-shadow(0 0 28px rgba(255, 180, 51, 0.35))
    drop-shadow(0 0 60px rgba(255, 180, 51, 0.22))
    drop-shadow(-3px 0 14px rgba(120, 180, 255, 0.20))
    drop-shadow(3px 0 14px rgba(255, 140, 200, 0.16));

  animation: hero-image-float 6s ease-in-out infinite;
}

@keyframes hero-image-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Subtle hue-shift on the behind-aura creates the holographic colour drift */
@keyframes holo-shift {
  0%, 100% { filter: blur(50px) hue-rotate(0deg); }
  50%      { filter: blur(50px) hue-rotate(18deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__image           { animation: none; }
  .hero__image-wrap::before { animation: none; }
}

.hero__headline {
  margin-bottom: 2px;
}

.hero__subtext {
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 600px;
}

.hero__proof {
  margin-top: 4px;
  font-size: var(--fs-small);
  color: var(--text-dim);
  letter-spacing: var(--ls-eyebrow);
}

/* Ambient glow orbs — sit above vignette as warm floodlight accents */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  -webkit-filter: blur(120px);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

.hero__orb--1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 180, 51, 0.08) 0%, transparent 70%);
  top: 10%;
  left: -10%;
}

.hero__orb--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 217, 153, 0.05) 0%, transparent 70%);
  bottom: 5%;
  right: -5%;
}


/* ==========================================================================
   PROBLEM / AGITATION
   ========================================================================== */

.problem {
  background: var(--bg-near-black);
  padding: var(--section-pad) 0;
}

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

.problem__image-wrap {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.problem__image {
  display: block;
  width: 340px;
  height: auto;
}

.problem__text {
  text-align: center;
}

.problem__headline {
  margin-bottom: var(--gap-lg);
}

.problem__text .section-cta {
  justify-content: center;
}

.problem__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: var(--gap-lg);
}

.problem__body p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.problem__pivot {
  border-top: var(--border-subtle);
  padding-top: var(--gap-lg);
}

/* Reusable in-section CTA wrapper — spaces a button cleanly from the content above */
.section-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--gap-xl);
}

.problem__pivot p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-light);
}



/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */

.how-it-works {
  background: var(--bg-black);
  padding: var(--section-pad) 0;
}

.section-subtitle {
  font-size: var(--fs-body);
  color: var(--text-muted);
  max-width: 520px;
  margin: 12px auto 0;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grid);
  margin-top: var(--gap-xl);
}

.step-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 36px 28px;
}

.step-card__number {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  opacity: 0.9;
}

.step-card__title {
  font-size: var(--fs-h4);
}

.step-card__desc {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}



/* ==========================================================================
   BENEFITS (consulting.com 2x2 grid inside outer container)
   ========================================================================== */

.benefits {
  background: var(--bg-black);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}

.benefits__particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.benefits .container {
  position: relative;
  z-index: 2;
}

/* ---- Outer wrapper card (contains the 2x2 grid) ---- */
.benefits-wrapper {
  position: relative;
  margin-top: var(--gap-xl);
  padding: 48px;
  border-radius: 24px;
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(ellipse at top, rgba(255, 180, 51, 0.04) 0%, transparent 60%),
    rgba(10, 10, 10, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 40px 80px -20px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

/* Wrapper top accent line (like the small gold dashes in reference) */
.benefits-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
  filter: blur(1px);
  opacity: 0.8;
}

/* ---- Ambient glow orbs inside wrapper ---- */
.benefits-wrapper__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  -webkit-filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.benefits-wrapper__orb--1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 180, 51, 0.18) 0%, transparent 70%);
  top: -120px;
  right: -120px;
}

.benefits-wrapper__orb--2 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(255, 217, 153, 0.12) 0%, transparent 70%);
  bottom: -100px;
  left: -100px;
}

.benefits-wrapper__orb--3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 199, 102, 0.08) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ---- 2x2 Grid ---- */
.benefits-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* ---- Individual benefit card ---- */
.benefit-card {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 56px 40px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(ellipse at top, rgba(255, 255, 255, 0.06) 0%, transparent 55%),
    rgba(255, 255, 255, 0.03);
  overflow: hidden;
  transition: transform 0.5s var(--ease-smooth),
              border-color 0.5s var(--ease-smooth),
              background 0.5s var(--ease-smooth);
}

/* Individual card top accent (gold dash, wider + brighter like consulting.com) */
.benefit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
  opacity: 1;
  box-shadow: 0 0 12px rgba(255, 180, 51, 0.7), 0 0 30px rgba(255, 180, 51, 0.3);
}

/* Corner vignette glow (radial at bottom-right like reference) */
.benefit-card::after {
  content: '';
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(255, 180, 51, 0.06) 0%, transparent 65%);
  pointer-events: none;
}

.benefit-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(ellipse at top, rgba(255, 255, 255, 0.08) 0%, transparent 55%),
    rgba(255, 255, 255, 0.05);
}

.benefit-card__icon {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 24px rgba(255, 180, 51, 0.25));
}

.benefit-card__title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: var(--fw-regular);
  color: var(--text-white);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
}

.benefit-card__desc {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 340px;
}


/* ==========================================================================
   PACKAGES
   ========================================================================== */

.packages {
  background: var(--bg-black);
  padding: var(--section-pad) 0;
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-grid);
  max-width: 920px;
  margin: var(--gap-xl) auto 0;
}

.package-card {
  text-align: left;
  display: flex;
  flex-direction: column;
}

.package-card__desc {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  line-height: var(--lh-body);
  margin-top: 4px;
}


/* ==========================================================================
   SOCIAL PROOF
   ========================================================================== */

.social-proof {
  background: var(--bg-near-black);
  padding: var(--section-pad) 0;
}

.testimonials-section {
  padding-top: 0;
}

/* Masonry-style column layout — variable card heights flow naturally */
.testimonials-grid {
  column-count: 3;
  column-gap: var(--gap-grid);
  margin-top: var(--gap-lg);
  text-align: left;
}

.testimonials-grid .testimonial-card {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: var(--gap-grid);
}


/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  background: var(--bg-black);
  padding: var(--section-pad) 0;
}

.faq .section-subtitle {
  margin-bottom: var(--gap-xl);
}

.accordion {
  margin-top: var(--gap-lg);
}

.accordion__item:first-child {
  border-top: var(--border-subtle);
}


/* ==========================================================================
   THUMBNAIL SLIDER — infinite auto-scroll
   ========================================================================== */

.thumb-slider {
  background: var(--bg-near-black);
  padding: 16px 0;
  overflow: hidden;
  position: relative;
  /* Fade edges into the dark background */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.thumb-slider__track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: thumb-scroll 40s linear infinite;
}

.thumb-slider__track img {
  height: 90px;
  width: auto;
  border-radius: 8px;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes thumb-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ==========================================================================
   FINAL CTA
   ========================================================================== */

.final-cta {
  position: relative;
  background: var(--bg-near-black);
  padding: var(--section-pad) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.final-cta__particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.final-cta__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
}

/* ---- Embedded form wrapper (GHL / Optimo iframe) ---- */
.form-embed {
  width: 100%;
  max-width: 640px;
  margin-top: 16px;
  padding: 8px;
  border-radius: 20px;
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(ellipse at top, rgba(255, 180, 51, 0.04) 0%, transparent 60%),
    rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 40px 80px -20px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.form-embed iframe {
  width: 100%;
  min-height: 920px;
  border: none;
  border-radius: 14px;
  display: block;
  background: transparent;
}

.final-cta__headline {
  font-size: var(--fs-h2);
}

.final-cta__subtext {
  font-size: var(--fs-body);
  color: var(--text-muted);
  max-width: 540px;
}

/* Ambient glow orbs */
.final-cta__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  -webkit-filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

.final-cta__orb--1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 180, 51, 0.06) 0%, transparent 70%);
  top: 20%;
  right: -5%;
}

.final-cta__orb--2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(255, 217, 153, 0.04) 0%, transparent 70%);
  bottom: 10%;
  left: -5%;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  background: var(--bg-black);
  border-top: var(--border-subtle);
  padding: 32px 0;
}

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

.footer__copy {
  font-size: var(--fs-small);
  color: var(--text-dim);
}

.footer__links {
  display: flex;
  gap: 24px;
}

.footer__links a {
  font-size: var(--fs-small);
  color: var(--text-dim);
  transition: color var(--duration-fast);
}

.footer__links a:hover {
  color: var(--text-muted);
}