:root {
  --wc-athletic-navy: #071D32;
  --wc-athletic-ink: #111827;
  --wc-athletic-panel: #162235;
  --wc-athletic-cyan: #0FBEE0;
  --wc-athletic-white: #FFFFFF;
  --wc-athletic-muted: #AAB7C4;
  --wc-athletic-line: rgba(15, 190, 224, .2);
}

html,
body {
  background: var(--wc-athletic-navy);
}

body {
  background-image: none;
}

#app-static-top {
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 67%, rgba(15, 190, 224, .035) 67%),
    var(--wc-athletic-navy);
  border-bottom: 1px solid var(--wc-athletic-line);
}

#hero-urgency {
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  background: #D92121;
}

#hero-content {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(25rem, .88fr);
  grid-template-areas:
    "eyebrow image"
    "headline image"
    "label image"
    "subhead image"
    "cta image"
    "delivery image"
    "proof image";
  align-items: center;
  column-gap: clamp(2rem, 5vw, 5rem);
  width: min(calc(100% - 2rem), 80rem);
  max-width: 80rem;
  min-height: calc(100vh - 42px);
  padding: clamp(3rem, 6vw, 6rem) 0;
  text-align: left;
}

#hero-content::before {
  content: "160";
  position: absolute;
  z-index: -2;
  top: 49%;
  right: -3.5rem;
  translate: 0 -50%;
  color: transparent;
  font-family: Montserrat, sans-serif;
  font-size: clamp(15rem, 30vw, 31rem);
  font-weight: 900;
  line-height: .7;
  letter-spacing: -.09em;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .055);
  pointer-events: none;
}

#hero-content::after {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0 -12vw 0 57%;
  opacity: .34;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 24px,
    rgba(15, 190, 224, .12) 24px 25px
  );
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000);
  pointer-events: none;
}

.athletic-energy-particles {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.athletic-energy-particles span {
  position: absolute;
  top: var(--particle-y);
  left: var(--particle-x);
  width: var(--particle-size);
  height: var(--particle-size);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  opacity: var(--particle-opacity);
  box-shadow: 0 0 7px rgba(255, 255, 255, .32);
  animation: athletic-particle-drift var(--particle-duration) linear infinite;
  animation-delay: var(--particle-delay);
  will-change: transform, opacity;
}

.athletic-energy-particles span.is-cyan {
  background: var(--wc-athletic-cyan);
  box-shadow: 0 0 9px rgba(15, 190, 224, .42);
}

@keyframes athletic-particle-drift {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.75);
  }

  18%,
  72% {
    opacity: var(--particle-opacity);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(var(--particle-drift-x), var(--particle-drift-y), 0)
      scale(1.12);
  }
}

.athletic-hero-eyebrow {
  grid-area: eyebrow;
  align-self: end;
  margin: 0 0 1rem;
  color: var(--wc-athletic-cyan);
  font-family: "Open Sans", sans-serif;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .18em;
}

#hero-headline {
  grid-area: headline;
  max-width: 47rem;
  margin: 0;
  color: var(--wc-athletic-white);
  font-size: clamp(3.35rem, 5.2vw, 5.1rem);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.055em;
  text-align: left;
  text-transform: uppercase;
  text-wrap: balance;
}

#hero-headline .hero-highlight {
  color: var(--wc-athletic-cyan);
}

#hero-product-label {
  grid-area: label;
  margin: 1.1rem 0 .4rem;
  color: var(--wc-athletic-white);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#hero-content > img {
  grid-area: image;
  z-index: 1;
  width: min(100%, 40rem);
  max-width: 100%;
  margin: 0;
  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .28));
}

#hero-subheadline {
  grid-area: subhead;
  max-width: 39rem;
  margin: .7rem 0 1.6rem;
  color: var(--wc-athletic-muted);
  font-size: 1rem;
  line-height: 1.65;
  text-align: left;
}

#hero-primary-cta {
  grid-area: cta;
  width: fit-content;
  min-width: 19rem;
  margin: 0;
  border: 2px solid var(--wc-athletic-cyan);
  border-radius: .35rem;
  background: var(--wc-athletic-cyan);
  color: var(--wc-athletic-navy);
  padding: 1rem 1.4rem;
  font-family: Montserrat, sans-serif;
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: none;
  animation: none;
}

#hero-primary-cta:hover {
  background: transparent;
  color: var(--wc-athletic-white);
}

#hero-delivery-note {
  grid-area: delivery;
  justify-content: flex-start;
  margin: .8rem 0 0;
  color: var(--wc-athletic-muted);
}

#hero-content > p:last-child {
  grid-area: proof;
  margin: 1.2rem 0 0 !important;
  color: #6F8294 !important;
  text-align: left;
}

.athletic-ticker {
  overflow: hidden;
  border-block: 1px solid var(--wc-athletic-navy);
  background: var(--wc-athletic-cyan);
  color: var(--wc-athletic-navy);
}

.athletic-ticker > div {
  display: flex;
  width: max-content;
  min-width: 100%;
  align-items: center;
  justify-content: space-around;
  gap: 1.4rem;
  min-height: 3.5rem;
  padding-inline: 1.5rem;
  font-family: Montserrat, sans-serif;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .045em;
  white-space: nowrap;
}

.athletic-ticker b {
  opacity: .48;
}

.athletic-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  background: var(--wc-athletic-navy);
  border-bottom: 1px solid var(--wc-athletic-line);
}

.athletic-stats > div {
  display: grid;
  min-height: 10rem;
  place-content: center;
  padding: 1.5rem;
  text-align: center;
}

.athletic-stats > div + div {
  border-left: 1px solid var(--wc-athletic-line);
}

.athletic-stats strong {
  color: var(--wc-athletic-white);
  font-family: Montserrat, sans-serif;
  font-size: clamp(3.6rem, 6vw, 5.8rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.07em;
}

.athletic-stats strong.is-accent {
  color: var(--wc-athletic-cyan);
}

.athletic-stats span {
  margin-top: .75rem;
  color: var(--wc-athletic-muted);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .13em;
}

#root > div {
  background: var(--wc-athletic-navy);
}

#root section:not(#planos) {
  border-color: var(--wc-athletic-line);
  background-color: var(--wc-athletic-navy);
  background-image: none;
}

#root section:not(#planos):nth-of-type(even) {
  background-color: var(--wc-athletic-ink);
}

#root section:not(#planos) h2 {
  max-width: 64rem;
  margin-inline: auto;
  color: var(--wc-athletic-white);
  font-size: clamp(2.45rem, 5vw, 4.8rem);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.055em;
  text-transform: uppercase;
  text-wrap: balance;
}

#root section:not(#planos) h2 .text-accent,
#root section:not(#planos) h2 span {
  color: var(--wc-athletic-cyan);
}

#root section:not(#planos) h2 span.athletic-word,
#root section:not(#planos) h2 span.athletic-letter {
  color: inherit !important;
}

#root section:not(#planos) h2.text-white,
#root section:not(#planos) h2.text-white .athletic-word,
#root section:not(#planos) h2.text-white .athletic-letter {
  color: var(--wc-athletic-white) !important;
}

#root section:not(#planos) h2.text-white {
  box-sizing: border-box;
  width: min(calc(100% - 2rem), 46rem);
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(1.35rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.6rem);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.athletic-section-kicker {
  margin: 0 auto 1rem;
  color: var(--wc-athletic-cyan);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-align: center;
}

#root section:not(#planos) .card-benefit,
#root section:not(#planos) .bg-card,
#root section:not(#planos) .bg-white {
  border: 1px solid var(--wc-athletic-line);
  border-radius: .65rem;
  background: var(--wc-athletic-panel);
  box-shadow: none;
}

#root section:not(#planos) .card-benefit:hover,
#root section:not(#planos) .bg-card:hover,
#root section:not(#planos) .bg-white:hover {
  border-color: rgba(15, 190, 224, .55);
  box-shadow: none;
  transform: translateY(-2px);
}

#root section:not(#planos) .cta-button {
  border: 2px solid var(--wc-athletic-cyan);
  border-radius: .35rem;
  background: var(--wc-athletic-cyan);
  color: var(--wc-athletic-navy);
  box-shadow: none;
  animation: none;
}

#root section:not(#planos) img {
  filter: saturate(.96) contrast(1.03);
}

#root section:not(#planos) details {
  border-radius: .35rem;
  background: var(--wc-athletic-panel);
}

#root footer {
  background: #061627;
  border-color: var(--wc-athletic-line);
}

@media (max-width: 900px) {
  #hero-content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "headline"
      "label"
      "image"
      "subhead"
      "cta"
      "delivery"
      "proof";
    width: min(calc(100% - 2rem), 42rem);
    min-height: 0;
    padding: 2.7rem 0 3rem;
    text-align: center;
  }

  #hero-content::before {
    top: 42%;
    right: -4rem;
    font-size: clamp(13rem, 60vw, 22rem);
  }

  #hero-content::after {
    inset: 28% -20vw 30% 35%;
  }

  .athletic-hero-eyebrow,
  #hero-headline,
  #hero-product-label,
  #hero-subheadline,
  #hero-content > p:last-child {
    text-align: center;
  }

  .athletic-hero-eyebrow {
    justify-self: center;
  }

  #hero-headline {
    font-size: clamp(2.65rem, 10vw, 4.4rem);
  }

  #hero-content > img {
    width: min(100%, 35rem);
    margin: .8rem auto 0;
  }

  #hero-subheadline {
    margin-inline: auto;
  }

  #hero-primary-cta {
    width: 100%;
    min-width: 0;
  }

  #hero-delivery-note {
    justify-content: center;
  }

  .athletic-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .athletic-stats > div {
    min-height: 8.5rem;
  }

  .athletic-stats > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--wc-athletic-line);
  }

  .athletic-stats > div:nth-child(4) {
    border-top: 1px solid var(--wc-athletic-line);
  }
}

@media (max-width: 520px) {
  #hero-content {
    width: min(calc(100% - 1.5rem), 25rem);
    padding: 2rem 0 2.2rem;
  }

  .athletic-hero-eyebrow {
    margin-bottom: .75rem;
    font-size: .6rem;
    letter-spacing: .14em;
  }

  #hero-headline {
    max-width: 22rem;
    margin-inline: auto;
    font-size: clamp(1.95rem, 8.2vw, 2.25rem);
    line-height: .98;
    letter-spacing: -.045em;
  }

  #hero-product-label {
    max-width: 20rem;
    margin: .8rem auto .2rem;
    font-size: .62rem;
    line-height: 1.45;
    letter-spacing: .1em;
  }

  #hero-content > img {
    width: min(100%, 22rem);
    margin-top: .25rem;
  }

  #hero-subheadline {
    margin: .25rem auto 1.1rem;
    font-size: .9rem;
    line-height: 1.5;
  }

  #hero-primary-cta {
    min-height: 3.35rem;
    padding: .8rem 1rem;
    font-size: .8rem;
  }

  #hero-primary-cta,
  #root section:not(#planos) a.cta-button,
  #root section:not(#planos) button.cta-button,
  #planos .wheychef-plan-cta {
    box-sizing: border-box;
    width: 100%;
    max-width: 22rem;
    min-width: 0;
    height: auto;
    min-height: 3.45rem;
    margin-inline: auto;
    padding: .78rem 1rem !important;
    font-size: .78rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
    text-wrap: balance;
  }

  #root section:not(#planos) a.cta-button,
  #root section:not(#planos) button.cta-button,
  #planos .wheychef-plan-cta {
    display: flex;
  }

  #hero-delivery-note {
    margin-top: .65rem;
    font-size: .7rem;
  }

  #hero-content > p:last-child {
    margin-top: .85rem !important;
    font-size: .58rem !important;
  }

  #hero-content::before {
    top: 38%;
    font-size: 13rem;
  }

  .athletic-ticker > div {
    justify-content: flex-start;
    min-height: 2.8rem;
    gap: 1rem;
    padding-inline: 1rem;
    font-size: .66rem;
  }

  .athletic-stats > div {
    min-height: 6.75rem;
    padding: 1rem .65rem;
  }

  .athletic-stats strong {
    font-size: 2.75rem;
    letter-spacing: -.06em;
  }

  .athletic-stats span {
    margin-top: .5rem;
    font-size: .54rem;
    line-height: 1.35;
    letter-spacing: .09em;
  }

  #root .section-padding {
    padding: 2.6rem 1rem;
  }

  #root section:not(#planos) h2 {
    max-width: 20.5rem;
    margin-bottom: 1.35rem;
    font-size: clamp(1.28rem, 5.8vw, 1.48rem);
    line-height: 1.02;
    letter-spacing: -.035em;
  }

  #root section:not(#planos) h2.text-white {
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
    padding: 1.15rem 1rem;
    font-size: 1.08rem;
    line-height: 1.1;
    letter-spacing: -.02em;
  }

  .athletic-section-kicker {
    margin-bottom: .7rem;
    font-size: .58rem;
    letter-spacing: .14em;
  }

  #planos .wheychef-plans-header {
    margin-bottom: 1.7rem;
  }

  #planos .wheychef-plans-header h2 {
    font-size: 1.55rem;
    line-height: 1.12;
    letter-spacing: -.03em;
  }

  #planos .wheychef-plans-header p {
    margin-top: .65rem;
    font-size: .92rem;
    line-height: 1.5;
  }

  #planos .wheychef-offer-body h3 {
    font-size: 1.4rem;
  }

  #planos .wheychef-plan-image {
    max-height: 14rem;
  }
}

/* Letter reveal: preserve words and existing highlighted spans. */
.athletic-letter-heading .athletic-word {
  display: inline-block;
  white-space: nowrap;
}

.athletic-mobile-break {
  display: none;
}

.athletic-letter-heading .athletic-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  filter: blur(8px);
  transition:
    opacity 0.55s ease,
    transform 0.7s cubic-bezier(0.2, 0.75, 0.25, 1),
    filter 0.65s ease;
  transition-delay: calc(var(--letter-index) * 18ms);
  will-change: opacity, transform, filter;
}

.athletic-letter-heading--section .athletic-letter {
  transform: translateY(0.4em);
  filter: blur(5px);
  transition-duration: 0.42s;
  transition-delay: calc(var(--letter-index) * 9ms);
}

.athletic-letter-heading.is-letter-visible .athletic-letter {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (max-width: 520px) {
  .athletic-mobile-break {
    display: block;
  }

  .athletic-energy-particles span:nth-child(n + 29) {
    display: none;
  }

  .athletic-letter-heading--hero .athletic-letter {
    filter: blur(5px);
    transition-duration: 0.4s;
    transition-delay: calc(var(--letter-index) * 8ms);
  }

  .athletic-letter-heading--section .athletic-letter {
    filter: blur(3px);
    transition-duration: 0.34s;
    transition-delay: calc(var(--letter-index) * 5ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .athletic-energy-particles span {
    animation: none !important;
    opacity: .08;
  }

  .athletic-letter-heading .athletic-letter {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #root section:not(#planos) .card-benefit:hover,
  #root section:not(#planos) .bg-card:hover,
  #root section:not(#planos) .bg-white:hover {
    transform: none;
  }
}