/* ============================================================
   VOID SUPPLY ♱ — Orden Gymshark, alma Breathe Divinity
   ============================================================ */

:root {
  --bg: #050505;
  --bg-soft: #0c0c0c;
  --bg-card: #101010;
  --line: #1d1d1d;
  --txt: #f2f2f2;
  --txt-dim: #9a9a9a;
  --txt-mute: #5e5e5e;
  --accent: #b3001b;          /* rojo sangre sutil */
  --gothic: 'Pirata One', cursive;
  --serif: 'Cinzel', serif;
  --sans: 'Inter', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main { overflow-x: clip; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Barra anuncios ---------- */
.announce {
  background: #000;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  height: 34px;
  display: flex;
  align-items: center;
}
.announce-track {
  display: flex;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
}
.announce-track span {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--txt-dim);
  padding-right: 2rem;
  font-weight: 600;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(5,5,5,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 64px;
}
.nav-links {
  display: flex;
  gap: 1.8rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.nav-left { justify-content: flex-start; }
.nav-right { justify-content: flex-end; }
.nav-links a { color: var(--txt-dim); transition: color .2s; }
.nav-links a:hover { color: var(--txt); }
.nav-wa { color: var(--txt) !important; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }

.brand {
  font-family: var(--gothic);
  font-size: 1.7rem;
  letter-spacing: 0.06em;
  color: var(--txt);
  display: flex;
  align-items: center;
  gap: .35rem;
}
.brand-cross { color: var(--accent); font-size: 1.2rem; }

.nav-burger { display: none; background: none; border: none; flex-direction: column; gap: 5px; }
.nav-burger span { width: 22px; height: 2px; background: var(--txt); display: block; }

.nav-mobile {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--line);
  background: #000;
}
.nav-mobile a {
  padding: 1rem 2rem;
  font-size: 13px;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--txt-dim);
  border-bottom: 1px solid var(--line);
}
.nav-mobile.open { display: flex; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: url('https://d8j0ntlcm91z4.cloudfront.net/user_3EnApVe5EkC31tBNWXG2ZGtiPnk/hf_20260715_051701_309c32f0-0898-4986-a113-2468e9310425_min.webp') center / cover no-repeat, var(--bg);
  /* revela la catedral sin perder el mood dark */
  filter: brightness(1.65) contrast(1.04);
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(179,0,27,0.09), transparent 65%),
    linear-gradient(rgba(5,5,5,0.10), rgba(5,5,5,0.22) 60%, rgba(5,5,5,0.88));
}
.hero-bg::after {
  content: "♱";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -52%);
  font-size: 46vh;
  color: rgba(255,255,255,0.028);
  font-family: serif;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; padding: 6rem 1.5rem; }
.hero-kicker {
  font-size: 11px;
  letter-spacing: 0.38em;
  color: var(--txt-dim);
  font-weight: 700;
  margin-bottom: 1.6rem;
}
.hero-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
}
.hero-title span {
  font-family: var(--gothic);
  font-weight: 400;
  display: inline-block;
  background: linear-gradient(180deg, #fff 30%, #555);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  margin: 1.8rem auto 2.6rem;
  color: var(--txt-dim);
  font-size: 15px;
  line-height: 1.8;
  max-width: 560px;
}
.hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(transparent, var(--bg));
}

/* ---------- Franja de stats (confianza) ---------- */
.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(179,0,27,0.05), transparent 70%),
    #070707;
}
.stats-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  text-align: center;
  padding: 1.7rem 1rem;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: none; }
.stat-cross { color: var(--accent); font-size: 14px; display: block; margin-bottom: 6px; }
.stat p { font-size: 11.5px; font-weight: 800; letter-spacing: 0.18em; }
.stat small { display: block; margin-top: 4px; color: var(--txt-mute); font-size: 10.5px; letter-spacing: 0.04em; }

/* ---------- Cinta de marcas ---------- */
.brands-marquee {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #060606;
  padding: 0.85rem 0;
}
.brands-marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marquee 55s linear infinite;
}
.brands-marquee-track span {
  font-family: var(--gothic);
  font-size: 1.35rem;
  color: #303030;
  letter-spacing: 0.08em;
}

/* ---------- Divisor gótico ---------- */
.divider {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  max-width: 1440px;
  margin: 3.5rem auto 0;
  padding: 0 2rem;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.divider span { color: var(--accent); font-size: 15px; opacity: 0.85; }

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  padding: 0.95rem 2.2rem;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  border: 1px solid var(--txt);
  transition: all .25s;
  text-align: center;
}
.btn-light { background: var(--txt); color: #000; }
.btn-light:hover { background: transparent; color: var(--txt); }
.btn-ghost { background: transparent; color: var(--txt); border-color: #3a3a3a; }
.btn-ghost:hover { border-color: var(--txt); }
.btn-block { width: 100%; border: none; margin-top: 1.4rem; padding: 1.1rem; }
.btn-block:hover { background: var(--accent); color: #fff; }

/* ---------- Secciones ---------- */
.section { max-width: 1440px; margin: 0 auto; padding: 4.5rem 2rem 1rem; position: relative; }

/* Al saltar con anclas (#compression, etc.) el header sticky no tapa el título */
section[id] { scroll-margin-top: 76px; }

/* Arte ambiental por sección (solo CSS, sin imágenes) */
#destacados {
  background: radial-gradient(ellipse 55% 45% at 50% 0%, rgba(179,0,27,0.07), transparent 70%);
}
#compression {
  background: radial-gradient(ellipse 40% 35% at 88% 8%, rgba(179,0,27,0.06), transparent 70%);
}
#street {
  background: radial-gradient(ellipse 40% 35% at 10% 12%, rgba(179,0,27,0.06), transparent 70%);
}
#essentials {
  background: radial-gradient(ellipse 45% 40% at 50% 10%, rgba(179,0,27,0.05), transparent 70%);
}
#compression::after,
#street::after,
.faq-section::after {
  content: "♱";
  position: absolute;
  z-index: -1;
  font-family: serif;
  color: rgba(255,255,255,0.025);
  pointer-events: none;
}
#compression::after { font-size: 30rem; top: -2rem; right: -1rem; }
#street::after { font-size: 26rem; bottom: -4rem; left: -1rem; }
.faq-section::after { font-size: 22rem; top: 0; right: 4%; }

/* Sección con fondo full-bleed (Marcas) */
.section-bleed {
  max-width: none;
  padding-left: max(2rem, calc((100vw - 1440px) / 2));
  padding-right: max(2rem, calc((100vw - 1440px) / 2));
  padding-bottom: 4rem;
  margin-top: 3.5rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(rgba(5,5,5,0.72), rgba(5,5,5,0.88)),
    url('https://d8j0ntlcm91z4.cloudfront.net/user_3EnApVe5EkC31tBNWXG2ZGtiPnk/hf_20260715_051707_58988869-b314-46cd-955b-36ff83b83a8f_min.webp') center / cover no-repeat,
    var(--bg-soft);
}
.section-bleed + .divider { margin-top: 0; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}
.section-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.section-head .cross { color: var(--accent); }
.section-note {
  font-size: 10.5px;
  letter-spacing: 0.26em;
  color: var(--txt-mute);
  font-weight: 700;
}

/* ---------- Destacados (3 piezas insignia, grandes) ---------- */
.featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-bottom: 1.4rem;
}
.featured .card {
  border-color: #2c2c2c;
  background: linear-gradient(180deg, #131313, var(--bg-card));
}
.featured .card:hover { border-color: var(--accent); }
.featured .card-media { aspect-ratio: 4 / 5; }
.featured .card-body { padding: 18px 18px 22px; }
.featured .card-name { font-size: 16px; font-family: var(--serif); letter-spacing: 0.04em; }
.featured .card-price { font-size: 17px; }
.featured .card-badge {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

@media (max-width: 860px) {
  .featured { grid-template-columns: 1fr; }
  .featured .card-media { aspect-ratio: 4 / 4.2; }
}

/* ---------- Rail (carrusel horizontal estilo Gymshark) ---------- */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 23vw, 330px);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 1.4rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #2a2a2a transparent;
}
.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-thumb { background: #2a2a2a; }
.rail .card { scroll-snap-align: start; }

/* ---------- Grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding-bottom: 1.4rem;
}

/* ---------- Card de producto (orden Gymshark, piel BD) ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .25s, transform .25s;
  position: relative;
}
.card:hover { border-color: #3d3d3d; transform: translateY(-3px); }
.card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #161616;
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .35s, transform .6s;
}
.card-media img.img-hover {
  position: absolute; inset: 0;
  opacity: 0;
}
.card:hover .img-hover { opacity: 1; }
.card:hover .card-media img { transform: scale(1.04); }
.card-badge {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  background: #000;
  border: 1px solid #2c2c2c;
  color: var(--txt);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  padding: 5px 9px;
}
.card-badge.badge-red { border-color: var(--accent); color: #ff5c72; }
.card-body { padding: 14px 14px 16px; }
.card-brand {
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--txt-mute);
  font-weight: 800;
  margin-bottom: 5px;
}
.card-name {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
}
.card-meta {
  font-size: 11px;
  color: var(--txt-dim);
  margin-top: 4px;
}
.card-price {
  margin-top: 9px;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.card-price .usd {
  font-size: 10.5px;
  color: var(--txt-mute);
  font-weight: 600;
  text-decoration: line-through;
}

/* ---------- Banner intermedio ---------- */
.banner {
  margin: 5rem 0 1rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 50% 90% at 50% 50%, rgba(179,0,27,0.08), transparent 70%),
    linear-gradient(rgba(8,8,8,0.78), rgba(5,5,5,0.86)),
    url('https://d8j0ntlcm91z4.cloudfront.net/user_3EnApVe5EkC31tBNWXG2ZGtiPnk/hf_20260715_051704_94605e75-4847-4497-ae5d-accc00ae7a4f_min.webp') center / cover no-repeat,
    var(--bg-soft);
  text-align: center;
}
.banner-inner { max-width: 760px; margin: 0 auto; padding: 5rem 1.5rem; }
.banner-gothic {
  font-family: var(--gothic);
  font-size: 2rem;
  color: var(--txt);
  margin-bottom: 0.8rem;
}
.banner h3 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  letter-spacing: 0.08em;
  margin-bottom: 1.1rem;
}
.banner p { color: var(--txt-dim); font-size: 14px; line-height: 1.9; margin-bottom: 2rem; }

/* ---------- Marcas ---------- */
.brands {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 860px;
  margin: 0 auto;
  gap: 14px;
  padding-bottom: 1rem;
}
.brand-card {
  border: 1px solid #262626;
  background: rgba(10,10,10,0.68);
  backdrop-filter: blur(5px);
  padding: 2.2rem 1.8rem;
  transition: border-color .25s;
}
.brand-card:hover { border-color: #3d3d3d; }
.brand-card h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: 0.1em;
}
.brand-tag {
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--accent);
  font-weight: 800;
  margin: 6px 0 14px;
}
.brand-card p:last-child { color: var(--txt-dim); font-size: 13px; line-height: 1.8; }

/* ---------- Pasos ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-bottom: 1rem;
}
.step {
  border: 1px solid var(--line);
  padding: 2.2rem 1.8rem;
  background:
    linear-gradient(rgba(13,13,13,0.93), rgba(9,9,9,0.96)),
    url('https://d8j0ntlcm91z4.cloudfront.net/user_3EnApVe5EkC31tBNWXG2ZGtiPnk/hf_20260715_051704_94605e75-4847-4497-ae5d-accc00ae7a4f_min.webp') center / cover no-repeat,
    var(--bg-card);
  text-align: center;
}
.step-num {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--accent);
  display: block;
  margin-bottom: 0.8rem;
}
.step h4 { font-size: 13px; letter-spacing: 0.18em; margin-bottom: 0.6rem; }
.step p { color: var(--txt-dim); font-size: 13px; line-height: 1.7; }

/* ---------- FAQ ---------- */
.faq-section {
  padding-bottom: 4rem;
  background: radial-gradient(ellipse 45% 60% at 50% 35%, rgba(179,0,27,0.05), transparent 70%);
}
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.3rem 0.2rem;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { color: var(--txt-mute); transition: transform .3s, color .3s; }
.faq details[open] summary span { transform: rotate(45deg); color: var(--accent); }
.faq details p {
  padding: 0 0.2rem 1.3rem;
  color: var(--txt-dim);
  font-size: 13.5px;
  line-height: 1.8;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  background:
    linear-gradient(rgba(0,0,0,0.93), rgba(0,0,0,0.97)),
    url('https://d8j0ntlcm91z4.cloudfront.net/user_3EnApVe5EkC31tBNWXG2ZGtiPnk/hf_20260715_051704_94605e75-4847-4497-ae5d-accc00ae7a4f_min.webp') center / cover no-repeat,
    #000;
  padding: 4rem 2rem 2rem;
}
.footer-grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-logo {
  font-family: var(--gothic);
  font-size: 1.8rem;
}
.footer-logo span { color: var(--accent); }
.footer-tagline { color: var(--txt-mute); font-size: 12.5px; line-height: 1.8; margin-top: 0.8rem; }
.footer-col h5 {
  font-size: 10.5px;
  letter-spacing: 0.26em;
  color: var(--txt-dim);
  margin-bottom: 1.1rem;
}
.footer-col a {
  display: block;
  color: var(--txt-dim);
  font-size: 13px;
  padding: 0.35rem 0;
  transition: color .2s;
}
.footer-col a:hover { color: var(--txt); }
.footer-seo {
  max-width: 1440px;
  margin: 3rem auto 0;
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
}
.footer-seo p { color: var(--txt-mute); font-size: 11.5px; line-height: 1.8; }
.footer-copy { margin-top: 1rem; letter-spacing: 0.14em; }

/* ---------- WhatsApp flotante ---------- */
.wa-float {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 80;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #0e0e0e;
  border: 1px solid #2c2c2c;
  color: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s, border-color .2s;
}
.wa-float:hover { transform: scale(1.08); border-color: #25D366; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal.open { display: block; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(6px);
}
.modal-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(960px, calc(100vw - 24px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--bg-soft);
  border: 1px solid #262626;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
.modal-close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  background: #000;
  border: 1px solid #333;
  color: var(--txt);
  width: 36px; height: 36px;
  font-size: 14px;
}
.modal-close:hover { border-color: var(--txt); }
.modal-media { background: #141414; }
.modal-media > img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.modal-thumbs {
  display: flex;
  gap: 6px;
  padding: 10px;
  overflow-x: auto;
}
.modal-thumbs img {
  width: 56px; height: 70px;
  object-fit: cover;
  border: 1px solid var(--line);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity .2s, border-color .2s;
}
.modal-thumbs img.active,
.modal-thumbs img:hover { opacity: 1; border-color: #555; }
.modal-info { padding: 2.4rem 2.2rem; }
.modal-brand {
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--txt-mute);
  font-weight: 800;
  margin-bottom: 8px;
}
.modal-title {
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.25;
  letter-spacing: 0.03em;
}
.modal-price {
  margin: 14px 0 4px;
  font-size: 1.35rem;
  font-weight: 800;
}
.modal-price-usd {
  font-size: 12px;
  color: var(--txt-mute);
  font-weight: 600;
  margin-left: 8px;
}
.modal-fit { font-size: 12px; color: var(--txt-dim); margin-bottom: 18px; }
.modal-opt { margin-top: 16px; }
.opt-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--txt-dim);
  font-weight: 800;
  margin-bottom: 9px;
}
.opt-label span { color: var(--txt); }
.opt-row { display: flex; flex-wrap: wrap; gap: 7px; }
.opt-btn {
  background: transparent;
  border: 1px solid #333;
  color: var(--txt-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 9px 13px;
  transition: all .2s;
}
.opt-btn:hover { border-color: #666; color: var(--txt); }
.opt-btn.sel { background: var(--txt); color: #000; border-color: var(--txt); }
.modal-desc {
  margin-top: 20px;
  color: var(--txt-dim);
  font-size: 13px;
  line-height: 1.8;
}
.modal-note {
  margin-top: 12px;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--txt-mute);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .brand { justify-self: center; }
  .nav::after { content: ""; width: 22px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .brands, .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .modal-panel { grid-template-columns: 1fr; }
  .modal-media > img { aspect-ratio: 4 / 4.4; }
  .section { padding: 3rem 1rem 0.5rem; }
  .hero { min-height: 72vh; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: none; }
  .stat { border-top: 1px solid var(--line); }
  .stat:nth-child(-n+2) { border-top: none; }
  .brands-marquee-track span { font-size: 1.05rem; }
  #compression::after { font-size: 16rem; }
  #street::after { font-size: 14rem; }
  .faq-section::after { font-size: 12rem; }
  .section-bleed { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 480px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .card-body { padding: 10px; }
  .card-name { font-size: 12px; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
}