/* =========================================================
   FFS — FAST FITNESS STUDIO
   Modern red / black / white single-page theme
   ========================================================= */

:root {
  --red: #ef1118;
  --red-dark: #790006;
  --red-deep: #260003;
  --black: #050505;
  --black-2: #0b0b0c;
  --panel: #111214;
  --panel-2: #17181b;
  --white: #f7f7f7;
  --muted: #a9a9ad;
  --line: rgba(255,255,255,.12);
  --font-display: "Barlow Condensed", sans-serif;
  --font-body: "Inter", sans-serif;
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
::selection { background: var(--red); color: #fff; }

.ffs-nav {
  background: rgba(3,3,3,.78);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 12px 0;
}
.nav-logo { width: 145px; height: 48px; object-fit: contain; }
.navbar .nav-link {
  color: #ddd;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .65rem .9rem !important;
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: #fff; }
.navbar .nav-link.active::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto 0;
  background: var(--red);
}

.btn-ffs {
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
  background: linear-gradient(135deg, #ff2026, #b80006);
  box-shadow: 0 10px 30px rgba(239,17,24,.22);
  transition: .25s ease;
}
.btn-ffs:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(239,17,24,.35);
}

.hero-section {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 45%, rgba(239,17,24,.16), transparent 28%),
    linear-gradient(180deg, #000 0%, #0d0000 55%, #260003 100%);
}
.hero-grid {
  position: absolute; inset: 0;
  opacity: .14;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(to bottom, #000, transparent 90%);
}
.hero-glow {
  position: absolute;
  width: 550px; height: 550px;
  right: -150px; top: 18%;
  background: radial-gradient(circle, rgba(239,17,24,.28), transparent 68%);
  filter: blur(30px);
}
.eyebrow, .section-kicker {
  color: var(--red);
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.section-kicker.light { color: #ff4449; }
.hero-title, .section-title, .offer-title, .contact-title {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: .88;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.hero-title {
  font-size: clamp(4rem, 9vw, 8.7rem);
  margin: 18px 0 25px;
}
.hero-title span, .section-title span, .offer-title span, .contact-title span {
  color: var(--red);
}
.hero-copy, .section-copy {
  color: #bcbcc1;
  line-height: 1.8;
  max-width: 620px;
  font-size: .98rem;
}
.hero-stats {
  max-width: 560px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.hero-stats strong {
  display: block;
  color: var(--red);
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
}
.hero-stats span {
  display: block;
  color: #aaa;
  font-size: .62rem;
  letter-spacing: .12em;
  font-weight: 700;
  margin-top: 7px;
}
.hero-visual-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-cue {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  color: #888;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: .62rem;
  letter-spacing: .2em;
}

/* HTML/CSS hero offer card — no banner image */
.hero-offer-card {
  position: relative;
  width: min(470px, 100%);
  min-height: 590px;
  padding: 34px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 85% 20%, rgba(239,17,24,.32), transparent 30%),
    linear-gradient(145deg, #1b0002 0%, #0a0a0b 52%, #190001 100%);
  box-shadow: 0 35px 90px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
  transform: rotate(1.5deg);
}
.hero-offer-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(239,17,24,.25);
  border-radius: 11px;
  pointer-events: none;
}
.offer-mini-logo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ddd;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .18em;
}
.mini-ffs {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -.08em;
}
.mini-ffs b { color: var(--red); }
.mini-ffs em { color: #eee; font-style: normal; }
.hero-offer-kicker {
  position: relative;
  z-index: 2;
  margin-top: 48px;
  color: #ff3a40;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .3em;
}
.hero-offer-title {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 7vw, 5.7rem);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.025em;
}
.hero-offer-title span { color: var(--red); }
.hero-offer-price {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  margin-top: 35px;
  padding: 17px 0;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.hero-offer-price small {
  display: block;
  color: #9a9a9e;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .13em;
  margin-bottom: 5px;
}
.hero-offer-price del {
  color: #888;
  font-family: var(--font-display);
  font-size: 1.8rem;
}
.hero-offer-price strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(3.7rem, 7vw, 5.5rem);
  line-height: .8;
  font-weight: 900;
}
.hero-save {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-top: 14px;
  padding: 6px 12px;
  color: #111;
  background: #ffd21c;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  transform: skew(-8deg);
}
.hero-benefits {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.hero-benefits span {
  color: #d5d5d7;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.hero-benefits i { color: var(--red); margin-right: 7px; }
.hero-offer-card .btn { position: relative; z-index: 3; }
.hero-offer-glow {
  position: absolute;
  width: 320px;
  height: 320px;
  right: -150px;
  bottom: -150px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239,17,24,.45), transparent 68%);
  filter: blur(15px);
}
.hero-offer-shape {
  position: absolute;
  z-index: -1;
  border: 2px solid rgba(239,17,24,.2);
  transform: rotate(45deg);
}
.shape-one { width: 150px; height: 150px; right: -70px; top: 80px; }
.shape-two { width: 90px; height: 90px; left: -45px; bottom: 120px; border-color: rgba(255,255,255,.08); }

.scroll-cue i { color: var(--red); }

.ticker {
  overflow: hidden;
  background: var(--red);
  color: #fff;
  padding: 9px 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: .1em;
}
.ticker-track {
  width: max-content;
  display: flex;
  gap: 24px;
  align-items: center;
  animation: ticker 25s linear infinite;
}
.ticker b { color: #111; }
@keyframes ticker { to { transform: translateX(-50%); } }

.section-pad { padding: 110px 0; }
.about-section { background: #070707; }
.section-title {
  font-size: clamp(3rem, 6vw, 5.8rem);
  margin: 14px 0 22px;
}
.feature-item {
  display: flex;
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.feature-icon {
  flex: 0 0 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--red);
  border-radius: 5px;
  font-size: 1.25rem;
}
.feature-item h5 {
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 5px;
}
.feature-item p {
  color: #8f8f93;
  margin: 0;
  font-size: .82rem;
}
.about-panel {
  position: relative;
  background: #101011;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  padding: 14px;
  overflow: hidden;
}
.about-panel img {
  width: 100%;
  display: block;
  border-radius: 5px;
}
.panel-corner {
  position: absolute;
  width: 55px; height: 55px;
  border-color: var(--red);
  z-index: 2;
}
.panel-corner-tl { left: 0; top: 0; border-left: 2px solid; border-top: 2px solid; }
.panel-corner-br { right: 0; bottom: 0; border-right: 2px solid; border-bottom: 2px solid; }
.about-overlay {
  position: absolute;
  left: 30px; bottom: 28px;
  padding: 12px 18px;
  background: rgba(0,0,0,.8);
  border-left: 3px solid var(--red);
}
.about-overlay small { display: block; color: var(--red); font-size: .65rem; letter-spacing: .2em; }
.about-overlay strong { font-family: var(--font-display); font-size: 1.15rem; }


/* About / Build Your Stronger Self — HTML/CSS content panel */
.about-highlight {
  position: relative;
  min-height: 540px;
  padding: 42px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(239,17,24,.42);
  border-radius: 12px;
  background:
    radial-gradient(circle at 90% 15%, rgba(239,17,24,.25), transparent 28%),
    radial-gradient(circle at 10% 90%, rgba(239,17,24,.08), transparent 30%),
    linear-gradient(145deg, #160002 0%, #090909 58%, #120001 100%);
  box-shadow: 0 25px 70px rgba(0,0,0,.45);
}
.about-highlight::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  pointer-events: none;
}
.highlight-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #ddd;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .22em;
}
.highlight-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -.1em;
  line-height: .8;
}
.highlight-mark b { color: var(--red); }
.highlight-mark em { color: #eee; font-style: normal; }

.highlight-kicker {
  position: relative;
  z-index: 2;
  margin-top: 55px;
  color: #ff3037;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .28em;
}
.about-highlight h3 {
  position: relative;
  z-index: 2;
  margin: 10px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 6vw, 5.5rem);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.02em;
}
.about-highlight h3 span { color: var(--red); }

.about-highlight > p {
  position: relative;
  z-index: 2;
  max-width: 580px;
  color: #aaa;
  font-size: .82rem;
  line-height: 1.75;
  margin-bottom: 26px;
}

.highlight-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.highlight-stats > div {
  padding: 18px 13px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.highlight-stats > div:last-child { border-right: 0; }
.highlight-stats strong {
  display: block;
  color: var(--red);
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: .9;
  font-weight: 900;
}
.highlight-stats span {
  display: block;
  margin-top: 7px;
  color: #aaa;
  font-size: .53rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .1em;
}

.highlight-points {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}
.highlight-points span {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px;
  color: #c8c8ca;
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .07em;
}
.highlight-points i { color: var(--red); margin-right: 4px; }

.highlight-number {
  position: absolute;
  z-index: -1;
  right: -12px;
  bottom: -52px;
  font-family: var(--font-display);
  font-size: 15rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  color: rgba(255,255,255,.025);
}
.highlight-line {
  position: absolute;
  z-index: -1;
  height: 2px;
  background: var(--red);
  transform: rotate(-35deg);
}
.line-a { width: 220px; right: -35px; top: 150px; opacity: .5; }
.line-b { width: 150px; right: 30px; top: 185px; opacity: .25; }

@media (max-width: 575px) {
  .about-highlight { min-height: 500px; padding: 30px 25px; }
  .about-highlight h3 { font-size: 3.6rem; }
  .highlight-stats strong { font-size: 2rem; }
  .highlight-stats span { font-size: .47rem; }
  .highlight-points { display: grid; }
}

.offer-section {
  background: #070707;
  padding-top: 0;
}
.offer-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(239,17,24,.55);
  border-radius: 12px;
  padding: 55px;
  background:
    radial-gradient(circle at 90% 30%, rgba(239,17,24,.24), transparent 30%),
    linear-gradient(135deg, #180000, #090909 65%);
}
.offer-shell::before {
  content: "";
  position: absolute;
  width: 220px; height: 220px;
  right: -80px; bottom: -90px;
  border: 45px solid rgba(239,17,24,.12);
  transform: rotate(45deg);
}
.offer-title { font-size: clamp(3rem, 6vw, 5.8rem); margin: 12px 0; }
.offer-copy { color: #ccc; font-size: 1rem; }
.offer-copy strong { color: #fff; font-size: 1.25rem; }
.price-highlight {
  background: linear-gradient(145deg, #e9131a, #7e0005);
  border-radius: 8px;
  padding: 28px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
}
.price-highlight span, .price-highlight small, .price-highlight em {
  display: block;
  font-style: normal;
  letter-spacing: .18em;
  font-weight: 800;
}
.price-highlight span { font-size: .7rem; opacity: .75; }
.price-highlight del { font-size: 1.5rem; opacity: .65; }
.price-highlight small { margin-top: 10px; font-size: .7rem; }
.price-highlight strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4rem, 7vw, 6.5rem);
  line-height: .9;
}
.price-highlight em { color: #ffd52e; margin-top: 10px; }

.plans-section { background: linear-gradient(180deg, #090909, #111 100%); }
.section-heading { max-width: 800px; margin: auto; }
.plan-card {
  position: relative;
  min-height: 330px;
  padding: 28px;
  background: linear-gradient(145deg, #171719, #0d0d0e);
  border: 1px solid var(--line);
  border-radius: 9px;
  transition: .3s ease;
  overflow: hidden;
}
.plan-card:hover { transform: translateY(-7px); border-color: rgba(239,17,24,.55); }
.plan-card.featured {
  border-color: rgba(239,17,24,.8);
  background: linear-gradient(145deg, #1e0a0b, #0d0d0e);
}
.popular {
  position: absolute;
  right: 0; top: 0;
  padding: 7px 14px;
  background: var(--red);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.plan-number { color: #3b3b3f; font-family: var(--font-display); font-size: 3rem; font-weight: 900; }
.plan-duration { color: #aaa; font-size: .7rem; font-weight: 800; letter-spacing: .2em; }
.plan-price { font-family: var(--font-display); font-size: 3.7rem; font-weight: 900; margin-top: 8px; }
.plan-old { color: #888; font-size: .68rem; margin-top: -5px; }
.plan-line { width: 45px; height: 3px; background: var(--red); margin: 24px 0 15px; }
.plan-card p { color: #888; font-size: .8rem; }
.plan-card a {
  position: absolute;
  bottom: 25px;
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.plan-card a i { color: var(--red); }
.lucky-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px 30px;
  border: 1px dashed #c9a100;
  background: linear-gradient(90deg, #15110a, #1b1300, #15110a);
  border-radius: 9px;
}
.lucky-icon { font-size: 2.5rem; color: #f0bd00; }
.lucky-banner small { display: block; color: #f0bd00; font-weight: 800; font-size: .65rem; letter-spacing: .18em; }
.lucky-banner strong { display: block; font-family: var(--font-display); font-size: 1.55rem; line-height: 1; }
.lucky-stars { margin-left: auto; color: #f0bd00; font-size: 2rem; }

.facilities-section { background: #070707; }
.facility-card {
  min-height: 245px;
  padding: 30px;
  background: #111214;
  border: 1px solid var(--line);
  border-radius: 9px;
  position: relative;
  overflow: hidden;
}
.facility-card::after {
  content: "";
  position: absolute;
  width: 180px; height: 180px;
  right: -70px; bottom: -80px;
  border-radius: 50%;
  border: 30px solid rgba(255,255,255,.025);
}
.facility-card i { font-size: 2rem; color: var(--red); }
.facility-card h4 { font-family: var(--font-display); font-size: 2.1rem; font-weight: 900; line-height: .95; margin: 20px 0 12px; }
.facility-card p { color: #999; font-size: .8rem; line-height: 1.6; }
.facility-card.blue-accent i { color: #20a8e8; }
.facility-card.pink-accent i { color: #ef4eae; }
.facility-card.yellow-accent i { color: #f1b900; }

.gallery-section { background: #0b0b0c; }
.gallery-main, .gallery-side {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #111;
}
.gallery-main { height: 600px; }
.gallery-main img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center;
  transition: .5s ease;
}
.gallery-main:hover img, .gallery-side:hover img { transform: scale(1.03); }
.gallery-caption {
  position: absolute;
  left: 20px; bottom: 20px;
  padding: 9px 13px;
  background: var(--red);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .14em;
}
.gallery-side { min-height: 600px; }
.gallery-side img { width: 100%; height: 100%; object-fit: cover; transition: .5s ease; }
.gallery-side-copy {
  position: absolute;
  left: 20px; right: 20px; bottom: 20px;
  padding: 18px;
  background: rgba(0,0,0,.8);
  border-left: 3px solid var(--red);
}
.gallery-side-copy small { color: var(--red); font-size: .65rem; font-weight: 800; letter-spacing: .15em; }
.gallery-side-copy h4 { font-family: var(--font-display); font-size: 1.8rem; line-height: .9; margin: 5px 0 0; }


/* =========================================================
   BRAND / APPAREL — rebuilt from supplied reference using
   HTML + CSS. No reference banner image is used.
   ========================================================= */
.brand-section {
  background:
    radial-gradient(circle at 10% 15%, rgba(239,17,24,.07), transparent 25%),
    #050505;
}
.brand-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 28px;
}
.brand-lockup { display: flex; align-items: center; gap: 18px; }
.brand-mark-css {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: .7;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -.12em;
}
.brand-mark-css b { color: var(--red); }
.brand-mark-css em { color: #eee; font-style: normal; }
.brand-lockup h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: .85;
  font-style: italic;
  letter-spacing: .02em;
}
.brand-lockup p {
  color: #aaa;
  margin: 8px 0 0;
  font-size: .65rem;
  letter-spacing: .32em;
  font-weight: 700;
}
.brand-showcase {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 12px;
}
.apparel-stage {
  min-height: 520px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 35%, rgba(239,17,24,.13), transparent 34%),
    linear-gradient(145deg, #151619, #080809);
}
.apparel-stage::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 6px;
}
.stage-label {
  position: absolute;
  left: 20px; bottom: 18px;
  padding: 7px 12px;
  background: var(--red);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .15em;
}
.brand-details {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 9px;
  padding: 24px;
  background: #09090a;
}
.detail-title {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}
.detail-title::before,
.detail-title::after {
  content: "";
  height: 1px;
  width: 28%;
  position: absolute;
  top: 50%;
  background: var(--red);
}
.detail-title::before { left: 0; }
.detail-title::after { right: 0; }
.detail-title span {
  display: inline-block;
  padding: 0 12px;
  background: #09090a;
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .05em;
}
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.detail-card {
  min-height: 210px;
  padding: 18px;
  border: 1px solid #303033;
  border-radius: 6px;
  background: linear-gradient(145deg, #171719, #0d0d0e);
}
.detail-icon {
  height: 112px;
  display: grid;
  place-items: center;
  color: var(--red);
  font-size: 3rem;
  border-radius: 5px;
  background: #080808;
  border: 1px solid rgba(255,255,255,.05);
}
.detail-icon i { color: var(--red); }
.stripes-icon { display: flex; justify-content: center; gap: 6px; }
.stripes-icon i { display: block; width: 8px; height: 72px; transform: skewX(-12deg); background: var(--red); }
.stripes-icon i:nth-child(2) { background: #eee; }
.detail-card h4 {
  margin: 12px 0 5px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-align: center;
}
.detail-card p {
  margin: 0;
  color: #777;
  font-size: .68rem;
  text-align: center;
  line-height: 1.5;
}
.brand-info-grid {
  display: grid;
  grid-template-columns: .95fr .35fr 1.4fr;
  gap: 12px;
  margin-top: 12px;
}
.quality-card, .color-card, .pricing-card, .dealers-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 7px;
  background: #0d0d0e;
}
.card-ribbon {
  background: var(--red);
  padding: 9px 15px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 1rem;
}
.card-ribbon small { font-size: .65rem; opacity: .8; }
.quality-list { list-style: none; padding: 15px 18px; margin: 0; }
.quality-list li {
  display: flex; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .68rem;
  color: #ccc;
}
.quality-list li:last-child { border-bottom: 0; }
.quality-list i { color: #fff; font-size: 1rem; width: 20px; }
.quality-list b { color: #fff; margin-right: 12px; }
.color-card { text-align: center; }
.color-swatch {
  width: 72px; height: 72px;
  margin: 26px auto 10px;
  border-radius: 50%;
  background: #050505;
  border: 1px solid #444;
  box-shadow: inset 0 0 0 4px #111;
}
.color-card strong, .color-card span { display: block; }
.color-card strong { font-family: var(--font-display); font-size: 1rem; }
.color-card span { color: #aaa; font-size: .62rem; line-height: 1.4; margin-top: 6px; }
.pricing-card { padding-bottom: 12px; }
.pricing-head, .price-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
}
.pricing-head {
  color: #777;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .07em;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.price-row {
  color: #ccc;
  font-size: .7rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.price-row strong { color: #fff; text-align: right; }
.price-row span:nth-child(2) { text-align: center; }
.price-row.recommended strong { color: #ff3037; }
.price-row.recommended span:first-child { color: #fff; font-weight: 800; }
.price-row small { color: var(--red); font-size: .5rem; }
.bulk-note {
  margin: 12px 14px 0;
  color: #aaa;
  font-size: .64rem;
}
.bulk-note i { color: var(--red); margin-right: 6px; }
.dealers-card { margin-top: 12px; }
.dealer-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.dealer {
  min-height: 170px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.dealer:last-child { border-right: 0; }
.dealer-logo {
  min-height: 95px;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  border: 1px solid #333;
  background: #0a0a0a;
}
.dealer-logo.sw { color: #ff6b00; }
.dealer h4 { font-size: .86rem; margin: 0 0 5px; }
.dealer p { color: #777; font-size: .65rem; line-height: 1.4; margin-bottom: 8px; }
.dealer span {
  display: inline-block;
  color: #aaa;
  font-size: .58rem;
  margin-right: 10px;
}
.dealer span i { color: var(--red); margin-right: 3px; }
.brand-features {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: #101011;
}
.brand-features > div {
  min-height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.brand-features > div:last-child { border-right: 0; }
.brand-features i { color: #fff; font-size: 1.8rem; }
.brand-features span {
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
  line-height: .95;
}

@media (max-width: 991px) {
  .brand-showcase { grid-template-columns: 1fr; }
  .brand-info-grid { grid-template-columns: 1fr 1fr; }
  .pricing-card { grid-column: span 2; }
  .dealer-grid { grid-template-columns: 1fr; }
  .dealer { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .dealer:last-child { border-bottom: 0; }
  .brand-features { grid-template-columns: 1fr 1fr; }
  .brand-features > div:nth-child(2n) { border-right: 0; }
}
@media (max-width: 575px) {
  .brand-header { display: block; }
  .brand-lockup { align-items: flex-start; }
  .brand-mark-css { font-size: 3rem; }
  .brand-lockup h2 { font-size: 2rem; }
  .detail-grid { grid-template-columns: 1fr; }
  .brand-info-grid { grid-template-columns: 1fr; }
  .pricing-card { grid-column: auto; }
  .pricing-head, .price-row { font-size: .58rem; padding-left: 8px; padding-right: 8px; }
  .brand-features { grid-template-columns: 1fr; }
  .brand-features > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .brand-features > div:last-child { border-bottom: 0; }
}


/* AI model visual for WHY FFS */
.about-ai-card {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(239,17,24,.45);
  border-radius: 12px;
  background: #080808;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.about-ai-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 35%, rgba(0,0,0,.15) 50%, rgba(0,0,0,.9) 100%),
    linear-gradient(90deg, rgba(0,0,0,.15), transparent 55%);
  pointer-events: none;
}
.about-ai-card img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.ai-card-overlay {
  position: absolute;
  z-index: 2;
  left: 25px;
  right: 25px;
  bottom: 24px;
}
.ai-kicker {
  color: #ff353c;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .2em;
}
.ai-card-overlay h3 {
  margin: 5px 0 8px;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: .78;
  font-weight: 900;
}
.ai-card-overlay h3 span { color: var(--red); }
.ai-card-overlay p {
  max-width: 420px;
  color: #c1c1c4;
  font-size: .72rem;
  line-height: 1.55;
  margin-bottom: 12px;
}
.ai-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}
.ai-mini-stats span {
  padding: 6px 8px;
  color: #ccc;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.48);
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .05em;
}
.ai-mini-stats b { color: var(--red); margin-right: 3px; }

/* Supplied front/back apparel image */
.image-stage {
  padding: 0;
  background: #080808;
}
.image-stage img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center;
}
.image-stage .stage-label {
  z-index: 4;
  box-shadow: 0 8px 25px rgba(0,0,0,.45);
}

.contact-section { background: #070707; }
.contact-shell {
  position: relative;
  overflow: hidden;
  padding: 65px;
  border-radius: 12px;
  background: linear-gradient(135deg, #140000, #080808 65%);
  border: 1px solid rgba(239,17,24,.5);
}
.contact-bg {
  position: absolute;
  width: 600px; height: 600px;
  right: -280px; top: -250px;
  background: radial-gradient(circle, rgba(239,17,24,.25), transparent 65%);
}
.contact-title { font-size: clamp(4rem, 7vw, 7rem); margin: 10px 0; }
.contact-shell p { color: #aaa; }
.contact-box {
  padding: 25px;
  background: rgba(0,0,0,.48);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.contact-row {
  display: flex; align-items: center; gap: 15px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.contact-row > i { color: var(--red); font-size: 1.15rem; width: 25px; text-align: center; }
.contact-row small { display: block; color: #777; font-size: .58rem; font-weight: 800; letter-spacing: .14em; }
.contact-row a, .contact-row span { display: block; font-weight: 700; margin-top: 2px; }
.contact-row a:hover { color: var(--red); }

.footer {
  padding: 28px 0;
  background: #030303;
  border-top: 1px solid var(--line);
  color: #666;
  font-size: .7rem;
}
.footer-logo { width: 130px; height: 42px; object-fit: contain; }
.back-top {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 45px; height: 45px;
  border: 1px solid rgba(255,255,255,.15);
  background: #151515;
  color: #fff;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: .25s;
  z-index: 20;
}
.back-top.show { opacity: 1; visibility: visible; }
.back-top:hover { background: var(--red); }


/* Hero male / female slider */
.hero-people-slider {
  width: min(500px, 100%);
  position: relative;
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.7));
}
.hero-person-card {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: #090909;
  box-shadow: inset 0 0 0 1px rgba(239,17,24,.12);
}
.hero-person-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.02) 25%, rgba(0,0,0,.82) 100%),
    linear-gradient(90deg, rgba(239,17,24,.16), transparent 45%);
  pointer-events: none;
}
.hero-person-card img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 5s ease;
}
.carousel-item.active .hero-person-card img {
  transform: scale(1.035);
}
.person-overlay {
  position: absolute;
  left: 30px;
  bottom: 34px;
  z-index: 2;
}
.person-overlay span {
  display: block;
  color: #ff3137;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .22em;
  margin-bottom: 7px;
}
.person-overlay strong {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.5rem);
  line-height: .85;
  text-transform: uppercase;
}
.person-tag {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 3;
  padding: 8px 12px;
  border-radius: 4px;
  color: #fff;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.15);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
}
.person-tag i { color: var(--red); margin-right: 5px; }
.hero-people-slider .carousel-indicators {
  z-index: 5;
  margin-bottom: 16px;
}
.hero-people-slider .carousel-indicators button {
  width: 28px;
  height: 3px;
  margin: 0 4px;
  border: 0;
  opacity: .45;
}
.hero-people-slider .carousel-indicators .active {
  opacity: 1;
  background: var(--red);
}
.hero-people-slider .carousel-control-prev,
.hero-people-slider .carousel-control-next {
  width: 42px;
  height: 42px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  margin: 0 12px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.16);
  opacity: .9;
}
.hero-people-slider .carousel-control-prev-icon,
.hero-people-slider .carousel-control-next-icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 991px) {
  .navbar-collapse {
    margin-top: 10px;
    padding: 15px;
    background: rgba(8,8,8,.96);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .hero-section { min-height: auto; }
  .hero-visual-wrap { padding-bottom: 100px; }
  .hero-offer-card { width: min(470px, 92%); min-height: 540px; }
  .hero-people-slider { width: min(430px, 88%); }
  .hero-person-card, .hero-person-card img { min-height: 500px; }
  .section-pad { padding: 80px 0; }
  .offer-shell, .contact-shell { padding: 35px 25px; }
}

@media (max-width: 575px) {
  .nav-logo { width: 115px; }
  .hero-title { font-size: 4rem; }
  .hero-people-slider { width: 100%; }
  .hero-person-card, .hero-person-card img { min-height: 430px; }
  .person-overlay { left: 20px; bottom: 28px; }
  .hero-stats strong { font-size: 1.7rem; }
  .hero-stats span { font-size: .53rem; }
  .section-title { font-size: 3.4rem; }
  .offer-title { font-size: 3.5rem; }
  .price-highlight strong { font-size: 4.5rem; }
  .lucky-banner { align-items: flex-start; padding: 20px; }
  .lucky-banner strong { font-size: 1.25rem; }
  .lucky-stars { display: none; }
  .gallery-main, .gallery-side { height: 480px; min-height: 480px; }
  .contact-title { font-size: 4rem; }
  .hero-offer-card { min-height: 510px; padding: 27px; }
  .hero-offer-title { font-size: 3.65rem; }
  .hero-offer-price strong { font-size: 4rem; }
}

@media (max-width: 575px) {
  .about-ai-card, .about-ai-card img { min-height: 500px; }
  .ai-card-overlay h3 { font-size: 3rem; }
  .ai-mini-stats span { font-size: .47rem; }
  .image-stage img { min-height: 360px; }
}