/* =====================================================================
   NOTFIT — Homepage redesign (V2), built from Figma "Design V2".
   Scoped under .nfx- to coexist with notfit.css. Champagne gold (#d1bb9a)
   primary on near-black, Space Grotesk type (the site's brand font, already
   loaded by notfit.css). Amber (#ff9803) only where Figma uses it (streak
   medal). Loads ON TOP of notfit.css. Pixel-faithful to Figma "Design V2".
   ===================================================================== */

.nfx-page {
  --nfx-amber: #ff9803;
  --nfx-gold: #d1bb9a;
  --nfx-gold-bright: #e7d2ad;
  /* Red is a RARE editorial accent only (the "not" in notfit, required marks,
     errors) - never a button fill. Gold is the action/CTA colour. */
  --nfx-red: #e23b2e;
  --nfx-red-soft: rgba(226, 59, 46, 0.14);
  /* Logo-extracted brand tokens (new wordmark, 2026-07). Registered for the
     future rebrand swap - NOT yet wired into components. Red stays accent-only. */
  --nfx-brand-red: #ce201a;
  --nfx-brand-red-deep: #a31410;
  --nfx-brand-gold: #e9c78d;
  --nfx-brand-gold-deep: #ddb578;
  /* Canonical champagne-gold CTA surface (premium, legible dark ink). */
  --nfx-gold-grad: linear-gradient(180deg, #e7d2ad 0%, #d1bb9a 100%);
  --nfx-gold-ink: #231a09;
  --nfx-gold-glow: rgba(209, 187, 154, 0.55);
  --nfx-ink: #060606;
  --nfx-card: #131515;
  --nfx-card-2: #1b1d1d;
  --nfx-text: #ffffff;
  --nfx-muted: rgba(255, 255, 255, 0.64);
  --nfx-line: rgba(255, 255, 255, 0.10);
  --nfx-line-2: rgba(255, 255, 255, 0.20);
  --nfx-radius: 22px;
  --nfx-ease: cubic-bezier(0.16, 1, 0.3, 1);

  background: var(--nfx-ink);
  font-family: "Space Grotesk", system-ui, sans-serif;
}

.nfx-page .nfx-container {
  width: min(1280px, 92vw);
  margin-inline: auto;
}

/* ---------- Shared primitives ---------- */
.nfx-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  background: rgba(209, 187, 154, 0.10);
  border: 1px solid rgba(226, 211, 188, 0.30);
  color: var(--nfx-gold);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.nfx-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.1rem;
  border-radius: 999px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--nfx-ease) 240ms, box-shadow var(--nfx-ease) 240ms,
    background 200ms, border-color 200ms;
  will-change: transform;
}
.nfx-btn--solid {
  background: #fff;
  color: var(--nfx-card);
  box-shadow: 0 18px 40px -20px rgba(255, 255, 255, 0.45);
}
.nfx-btn--solid:hover { transform: translateY(-2px); box-shadow: 0 26px 60px -22px rgba(255, 255, 255, 0.6); }
.nfx-btn--glass {
  color: #fff;
  border: 1px solid var(--nfx-line-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22) 100%);
  backdrop-filter: blur(20px);
}
.nfx-btn--glass:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.45); }
.nfx-btn--glass i { font-size: 1.2em; }

/* =====================================================================
   HERO — faithful to Figma "Design V2": subtext-led (no big H1),
   cinematic athlete background weighted right, Workouts phone centered
   low with two glass cards flanking it.
   ===================================================================== */
.nfx-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(660px, 96vh, 1040px);
  background: var(--nfx-ink);
  display: flex;
  flex-direction: column;
  padding-top: clamp(5.5rem, 4.5rem + 5vw, 8.5rem);
}

/* Athlete fills the frame, weighted to the upper-right; the source photo
   already blacks out toward the left, the scrim finishes the blend. */
.nfx-hero__athlete {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 16%;
}
.nfx-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(6, 6, 6, 0.94) 0%, rgba(6, 6, 6, 0.62) 36%, rgba(6, 6, 6, 0.12) 66%, rgba(6, 6, 6, 0.42) 100%),
    linear-gradient(180deg, rgba(6, 6, 6, 0.55) 0%, transparent 26%, transparent 52%, var(--nfx-ink) 96%);
}
.nfx-hero__glow {
  position: absolute;
  z-index: -1;
  top: -8%;
  right: 4%;
  width: 54vw;
  height: 54vw;
  max-width: 820px;
  max-height: 820px;
  background: radial-gradient(circle, rgba(255, 152, 3, 0.16) 0%, rgba(209, 187, 154, 0.08) 34%, transparent 62%);
  filter: blur(10px);
  pointer-events: none;
}

.nfx-hero__inner {
  position: relative;
  z-index: 1;
  width: min(1280px, 92vw);
  margin-inline: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Upper text block — kicker, lead paragraph, buttons (centered) */
.nfx-hero__head {
  max-width: 880px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  animation: nfx-rise 900ms var(--nfx-ease) both;
}
.nfx-hero__sub {
  max-width: 640px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.04rem, 0.98rem + 0.4vw, 1.26rem);
  line-height: 1.55;
}
.nfx-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 0.3rem;
}

/* Phone stage, lower-center, with flanking glass cards */
.nfx-hero__stage {
  position: relative;
  width: min(330px, 72vw);
  margin: clamp(2.2rem, 1rem + 5vw, 4.5rem) auto 0;
  animation: nfx-rise 1100ms var(--nfx-ease) 120ms both;
}
.nfx-phone {
  position: relative;
  margin: 0;
  border-radius: 46px;
  padding: 9px;
  background: linear-gradient(160deg, #2c2e2e, #0b0c0c);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 70px 130px -44px rgba(0, 0, 0, 0.92);
}
.nfx-phone::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 22px;
  border-radius: 0 0 16px 16px;
  background: #0b0c0c;
  z-index: 2;
}
.nfx-phone img {
  display: block;
  width: 100%;
  border-radius: 38px;
}

.nfx-fcard {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.95rem 1.05rem;
  border-radius: 18px;
  background: rgba(18, 20, 20, 0.5);
  border: 1px solid var(--nfx-line);
  box-shadow: 0 26px 54px -30px rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(16px) saturate(140%);
  animation: nfx-float 6s ease-in-out infinite;
}
.nfx-fcard--streak {
  left: -38%;
  top: 30%;
  align-items: center;
  text-align: center;
  width: 152px;
}
.nfx-fcard--goal {
  right: -52%;
  top: 44%;
  width: 212px;
  animation-delay: 1.5s;
}
.nfx-fcard__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffd27a, var(--nfx-amber));
  color: #3a2400;
  font-size: 1.7rem;
  box-shadow: 0 10px 26px -8px rgba(255, 152, 3, 0.7);
}
.nfx-fcard__label {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 0.84rem;
  color: #fff;
  line-height: 1.25;
}
.nfx-fcard--goal .nfx-fcard__label { text-align: center; }
.nfx-rings {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
}
.nfx-ring {
  --p: 0;
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(var(--nfx-gold) calc(var(--p) * 1%), rgba(255, 255, 255, 0.12) 0);
}
.nfx-ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--nfx-card);
}
.nfx-ring b {
  position: relative;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}

@keyframes nfx-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes nfx-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .nfx-hero__athlete { object-position: 64% 12%; opacity: 0.7; }
  .nfx-fcard--streak { left: -8%; top: 6%; }
  .nfx-fcard--goal { right: -8%; bottom: -4%; top: auto; width: 188px; }
}
@media (max-width: 560px) {
  .nfx-fcard--streak { left: -4%; top: 2%; transform: scale(0.85); }
  .nfx-fcard--goal { right: -4%; bottom: -2%; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .nfx-hero__head, .nfx-hero__stage, .nfx-fcard { animation: none; }
}

/* =====================================================================
   INTRO BAND — "From smart tracking to live sessions…" headline,
   two-row auto-scrolling category marquee, app CTA.
   ===================================================================== */
.nfx-intro {
  position: relative;
  padding: clamp(4rem, 3rem + 5vw, 7rem) 0 clamp(3rem, 2rem + 4vw, 5rem);
  background: var(--nfx-ink);
  text-align: center;
  overflow: hidden;
}
.nfx-intro__title {
  width: min(900px, 90vw);
  margin: 0 auto;
  font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.7rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: #fff;
}
.nfx-intro__title .nfx-gold { color: var(--nfx-gold); }
.nfx-ibadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  margin: 0 0.12em;
  vertical-align: -0.32em;
  border-radius: 0.5em;
  background: var(--nfx-gold-12, rgba(209, 187, 154, 0.14));
  border: 1px solid rgba(226, 211, 188, 0.3);
  color: var(--nfx-gold);
  font-size: 0.82em;
}

/* Marquee */
.nfx-marquee2 {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.nfx-mrow { overflow: hidden; }
.nfx-mtrack {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: nfx-scroll 46s linear infinite;
}
.nfx-mrow--rev .nfx-mtrack { animation-direction: reverse; animation-duration: 54s; }
.nfx-marquee2:hover .nfx-mtrack { animation-play-state: paused; }

.nfx-ccard {
  position: relative;
  flex: 0 0 auto;
  width: 286px;
  height: 150px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
}
.nfx-ccard--icon {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  background: #0c0b0a;
  border: 1px solid #222120;
  text-align: center;
  padding: 1rem;
}
.nfx-ccard__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(226, 211, 188, 0.32);
  background: rgba(209, 187, 154, 0.08);
  color: var(--nfx-gold);
  font-size: 1.35rem;
}
.nfx-ccard__title {
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.nfx-ccard__sub {
  font-size: 0.74rem;
  color: var(--nfx-muted);
}
.nfx-ccard--img { align-items: flex-end; }
.nfx-ccard--img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nfx-ccard--img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 6, 0.1) 30%, rgba(6, 6, 6, 0.85) 100%);
}
.nfx-ccard--img .nfx-ccard__label {
  position: relative;
  z-index: 1;
  padding: 0.9rem 1rem;
  text-align: left;
}
.nfx-ccard--img .nfx-ccard__title { display: block; }
.nfx-ccard--img .nfx-ccard__sub { display: block; margin-top: 0.15rem; }

@keyframes nfx-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* App CTA */
.nfx-appcta {
  width: min(640px, 90vw);
  margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) auto 0;
}
.nfx-appcta__text {
  color: var(--nfx-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}
.nfx-appcta__badges {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.nfx-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.3rem;
  border-radius: 14px;
  background: #0e0e0e;
  border: 1px solid var(--nfx-line);
  color: #fff;
  text-decoration: none;
  transition: border-color 200ms, transform 200ms var(--nfx-ease);
}
.nfx-badge:hover { border-color: var(--nfx-line-2); transform: translateY(-2px); }
.nfx-badge i { font-size: 1.8rem; color: #fff; }
.nfx-badge__txt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.nfx-badge__top { font-size: 0.66rem; color: var(--nfx-muted); }
.nfx-badge__main { font-size: 1.05rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .nfx-mtrack { animation: none; }
}

/* Placeholder marker for sections still to come. */
.nfx-todo {
  text-align: center;
  color: var(--nfx-muted);
  padding: 5rem 0;
  font-family: "Space Grotesk", sans-serif;
}

/* Hero headline (PUSH LIMITS. = solid white / TRACK WINS. STAY AHEAD. = soft gradient) */
.nfx-hero__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 1rem + 6.1vw, 5.7rem);
  line-height: 1.03;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
/* second line: white fading to a soft off-white (subtle, not heavy) */
.nfx-hero__title-grad {
  background: linear-gradient(96deg, #ffffff 0%, #ffffff 34%, rgba(255, 255, 255, 0.60) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nfx-hero__title-dim { color: rgba(255, 255, 255, 0.34); }

/* Inline emoji in the intro headline (real emoji, not gold icons) */
.nfx-iemoji {
  display: inline-block;
  font-size: 0.92em;
  line-height: 1;
  vertical-align: -0.06em;
  margin: 0 0.06em;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* Intro trust chips (Cancel anytime / Secure checkout / 10,000+ members) */
.nfx-intro__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  margin-top: 1.5rem;
}
.nfx-intro__chip {
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  background: #0e0e0e;
  border: 1px solid var(--nfx-line);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.86rem;
  font-weight: 500;
}