/* =========================================================
   Fitness Glory — visual enhancements & mobile layout
   Loaded after style.css
   ========================================================= */
:root { --s1: #b58a00; --s2: #3a8fd6; }
:root[data-theme="light"] { --s1: #c99a00; --s2: #2f7fc1; }

.brand img { object-fit: contain; background: #000; }
.brand { white-space: nowrap; }
.nav a { white-space: nowrap; }
@media (max-width: 1320px) { .nav a { padding: 8px 9px; font-size: 0.78rem; } .header .container { gap: 14px; } }

/* ---------- Hero slideshow ---------- */
.hero-bg .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease; }
.hero-bg .hero-slide.is-on { opacity: 1; }
.hero-bg img { animation: none; transform: scale(1.14); object-fit: cover; }
.hero-bg picture img { transition: transform 8s linear; }
.hero-bg img.hero-slide { transition: opacity 1.6s ease, transform 8s linear; }
.hero-bg .hero-slide.is-on img, .hero-bg img.hero-slide.is-on { transform: scale(1); }

.orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: 0.5; mix-blend-mode: screen; }
.orb.o1 { width: 420px; height: 420px; right: 8%; top: 12%; background: radial-gradient(circle, rgba(255,214,10,0.55), transparent 65%); animation: drift 14s ease-in-out infinite alternate; }
.orb.o2 { width: 320px; height: 320px; left: 30%; bottom: -80px; background: radial-gradient(circle, rgba(255,140,0,0.4), transparent 65%); animation: drift 18s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(-60px, 40px) scale(1.15); } }
.hero-grid-lines {
  position: absolute; inset: auto 0 0; height: 45%; z-index: -1; pointer-events: none; opacity: 0.35;
  background-image: linear-gradient(rgba(255,214,10,0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,214,10,0.18) 1px, transparent 1px);
  background-size: 60px 60px; transform: perspective(500px) rotateX(60deg); transform-origin: bottom;
  mask-image: linear-gradient(transparent, #000 70%); -webkit-mask-image: linear-gradient(transparent, #000 70%);
  animation: gridMove 6s linear infinite;
}
@keyframes gridMove { to { background-position: 0 60px; } }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 40px; align-items: center; }
.hero-aside { display: flex; flex-direction: column; gap: 16px; align-items: flex-end; }
.glass {
  background: rgba(16,16,16,0.55); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 22px; color: #fff; box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  transition: transform 0.25s ease-out; animation: fadeUp 0.9s 0.5s both;
}
.photo-card { width: 100%; max-width: 330px; aspect-ratio: 4/4.6; overflow: hidden; position: relative; padding: 0; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; }
.photo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.85)); }
.photo-card .live { position: absolute; top: 14px; left: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,0.6); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.photo-card .pc-text { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; }
.photo-card small { color: var(--accent); font-weight: 800; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; }
.photo-card b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1; }
.glass.mini { display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 14px; min-width: 240px; animation-delay: 0.7s; }
.glass.mini.alt { margin-right: 60px; animation-delay: 0.9s; }
.mini-ico { width: 46px; height: 46px; border-radius: 14px; background: var(--accent); display: grid; place-items: center; font-size: 1.3rem; flex: none; }
.glass.mini small { display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); font-weight: 700; }
.glass.mini b { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1; color: var(--accent); }

.hero-dots { position: absolute; right: max(16px, calc((100vw - var(--max)) / 2)); bottom: 34px; display: flex; gap: 8px; z-index: 2; }
.hero-dots span { width: 34px; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.22); overflow: hidden; }
.hero-dots i { display: block; height: 100%; width: 0; background: var(--accent); }
.hero-dots .done i { width: 100%; }
.hero-dots .on i { animation: dotFill 6s linear forwards; }
@keyframes dotFill { to { width: 100%; } }

/* ---------- Section head split ---------- */
.section-head.split { max-width: none; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; align-items: end; }
.section-head.split p { margin: 0; }

/* ---------- Training zones ---------- */
.zones {
  --gutter: max(16px, calc((100vw - var(--max)) / 2));
  position: relative; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px var(--gutter) 26px; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain;
}
.zones::-webkit-scrollbar { display: none; }
.zone { flex: 0 0 clamp(250px, 28vw, 360px); aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; position: relative; scroll-snap-align: start; background: var(--surface); isolation: isolate; }
.zone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); z-index: -2; }
.zone::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.9)); transition: background 0.4s; }
.zone:hover img { transform: scale(1.08); }
.zone-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; color: #fff; }
.zone-tag { display: inline-block; padding: 5px 11px; border-radius: 999px; background: var(--accent); color: #111; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; }
.zone h3 { font-size: 2.2rem; margin-bottom: 6px; }
.zone p { color: rgba(255,255,255,0.78); font-size: 0.9rem; margin: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s, opacity 0.4s; }
.zone:hover p, .zone:focus-within p { max-height: 80px; opacity: 1; }
@media (hover: none) { .zone p { max-height: 80px; opacity: 1; } }
.zone-num { position: absolute; top: 14px; right: 18px; font-family: var(--font-display); font-size: 3.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.55); }

/* ---------- Carousel controls ---------- */
.snap-ui { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.snap-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; transition: background 0.2s, opacity 0.2s, border-color 0.2s; }
.snap-btn:hover:not(:disabled) { background: var(--accent); color: #111; border-color: var(--accent); }
.snap-btn:disabled { opacity: 0.3; cursor: default; }
.snap-dots { display: flex; gap: 6px; }
.snap-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px; background: var(--line); transition: width 0.3s, background 0.3s; }
.snap-dots button.on { width: 26px; background: var(--accent); }
.snap-ui[data-for="servicesTrack"], .snap-ui[data-for="priceGrid"], .snap-ui[data-for="reelsGrid"] { display: none; }
.snap { position: relative; }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 16px; }
.tile { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s; }
.tile:hover { transform: translateY(-5px); border-color: rgba(255,214,10,0.45); box-shadow: var(--shadow); }
.tile h3 { font-size: 1.9rem; margin-bottom: 6px; }
.tile p { margin: 0; font-size: 0.9rem; }
.tile > .tile-ico { margin-bottom: auto; }
.tile-ico { font-size: 2rem; line-height: 1; display: block; }
.t-big { grid-column: span 2; grid-row: span 2; }
.t-photo { color: #fff; }
.t-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.t-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.88)); }
.t-photo:hover img { transform: scale(1.07); }
.t-photo p { color: rgba(255,255,255,0.8); }
.t-photo .tile-ico { margin-bottom: 12px; }
.t-big h3 { font-size: clamp(2.2rem, 3.4vw, 3rem); }
.t-stat b { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 5vw, 4.2rem); line-height: 1; display: flex; align-items: baseline; gap: 8px; }
.t-stat b em { font-style: normal; font-size: 0.4em; color: var(--accent); letter-spacing: 0.06em; }
.t-stat { justify-content: space-between; }
.tile-spark { position: absolute; right: 16px; top: 18px; width: 110px; height: 36px; }
.tile-spark path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.6s 0.3s ease; }
.tile.in .tile-spark path { stroke-dashoffset: 0; }
.tile-floors { position: absolute; right: 18px; top: 18px; display: grid; gap: 5px; }
.tile-floors i { display: block; width: 64px; height: 14px; border-radius: 4px; background: var(--accent); opacity: 0.9; transform: scaleX(0); transform-origin: left; transition: transform 0.7s 0.4s cubic-bezier(.2,.8,.2,1); }
.tile-floors i:last-child { transition-delay: 0.6s; opacity: 0.55; }
.tile.in .tile-floors i { transform: none; }
.t-accent { background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: #111; border-color: transparent; }
.t-accent p { color: rgba(0,0,0,0.7); }
.t-icon .tile-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,214,10,0.12); font-size: 1.6rem; }
.t-price { grid-column: span 3; background: linear-gradient(120deg, var(--surface), var(--surface-2)); justify-content: center; }
.t-price::before { content: "Rs."; position: absolute; right: -10px; bottom: -40px; font-family: var(--font-display); font-size: 12rem; line-height: 1; color: var(--line); z-index: -1; }
.t-price small { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.t-price b { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1; margin: 6px 0 10px; }
.t-price b em { font-style: normal; font-size: 0.4em; color: var(--muted); }
.t-price .more { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }

/* ---------- Cost chart ---------- */
.chart-card { position: relative; margin: 60px 0 0; padding: clamp(22px, 4vw, 40px); border-radius: calc(var(--radius) + 6px); background: var(--surface); border: 1px solid var(--line); }
.chart-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 34px; }
.chart-head .eyebrow { margin-bottom: 10px; }
.chart-head h3 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.legend { display: flex; gap: 18px; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.legend span { display: flex; align-items: center; gap: 8px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.sw.s1 { background: var(--s1); }
.sw.s2 { background: var(--s2); }
.plot-area { position: relative; height: 300px; margin: 0 0 44px 48px; }
.gl { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.gl span { position: absolute; left: -48px; top: -9px; width: 40px; text-align: right; font-size: 0.72rem; color: var(--muted); }
.groups { position: absolute; inset: 0; display: flex; }
.grp { flex: 1; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; cursor: pointer; outline: none; }
.grp::before { content: ""; position: absolute; inset: -8px 6% -36px; border-radius: 12px; background: var(--text); opacity: 0; transition: opacity 0.2s; }
.grp.hot::before, .grp:focus-visible::before { opacity: 0.05; }
.grp:focus-visible::before { outline: 2px solid var(--accent); }
.bars { position: relative; display: flex; gap: 2px; align-items: flex-end; height: 100%; width: min(64%, 96px); }
.bar { flex: 1; height: 0; position: relative; border-radius: 4px 4px 0 0; transition: height 1s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 0.12s); }
.bar.s1 { background: var(--s1); }
.bar.s2 { background: var(--s2); }
.grown .bar { height: var(--h); }
.bl { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px); font-size: 0.72rem; font-weight: 700; white-space: nowrap; color: var(--text); opacity: 0; transition: opacity 0.4s 1s; }
.grown .bl { opacity: 1; }
.xl { position: absolute; top: 100%; margin-top: 12px; font-size: 0.78rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.chart-tip { position: absolute; z-index: 5; transform: translate(-50%, -100%); min-width: 210px; padding: 12px 14px; border-radius: 12px; background: #0b0b0b; color: #fff; border: 1px solid rgba(255,255,255,0.12); box-shadow: var(--shadow); font-size: 0.82rem; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.chart-tip.show { opacity: 1; }
.chart-tip b { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 6px; }
.chart-tip div { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.chart-tip span { margin-left: auto; font-weight: 700; }
.chart-tip em { font-style: normal; color: var(--ok); margin-left: 4px; }
.chart-table summary { cursor: pointer; font-size: 0.82rem; font-weight: 700; color: var(--muted); display: inline-block; }
.chart-table summary:hover { color: var(--accent); }
.chart-table table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 0.85rem; }
.chart-table th, .chart-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.chart-table th:first-child, .chart-table td:first-child { text-align: left; }
.chart-table th { color: var(--muted); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Photo ribbon ---------- */
.ribbon { display: grid; gap: 14px; padding: 34px 0; overflow: hidden; background: var(--bg); }
.ribbon-row { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rib-track { display: flex; gap: 14px; padding-right: 14px; width: max-content; animation: ribbon 60s linear infinite; }
.reverse .rib-track { animation-direction: reverse; }
.ribbon-row:hover .rib-track { animation-play-state: paused; }
@keyframes ribbon { to { transform: translateX(-50%); } }
.rib { flex: none; width: 260px; height: 170px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--surface); cursor: zoom-in; }
.rib img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.5) brightness(0.85); transition: filter 0.4s, transform 0.6s; }
.rib:hover img, .rib:focus-visible img { filter: none; transform: scale(1.06); }

/* ---------- Join steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.steps-line { position: absolute; top: 27px; left: 12.5%; right: 12.5%; height: 3px; border-radius: 3px; background: var(--line); }
.steps-line i { display: block; width: 100%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: left; transform: scaleX(var(--p, 0)); }
.step { position: relative; text-align: center; }
.step-dot { position: relative; z-index: 1; width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); font-family: var(--font-display); font-size: 1.6rem; transition: background 0.4s, color 0.4s, border-color 0.4s, box-shadow 0.4s; }
.step.lit .step-dot { background: var(--accent); color: #111; border-color: var(--accent); box-shadow: 0 0 0 8px rgba(255,214,10,0.14); }
.step-ico { display: block; font-size: 2rem; margin-bottom: 10px; transition: transform 0.4s; }
.step.lit .step-ico { transform: scale(1.12); }
.step h3 { font-size: 1.8rem; margin-bottom: 8px; }
.step p { font-size: 0.92rem; max-width: 250px; margin: 0 auto; }

/* ---------- Bottom nav ---------- */
.bnav { display: none; }

/* ---------- Fitness Lab visuals ---------- */
.page-hero { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; }
.page-hero h1 { position: relative; }
.macro-viz { position: relative; display: grid; grid-template-columns: 130px 1fr; gap: 22px; align-items: center; margin-bottom: 24px; }
.macro-viz .macro-bars { margin-bottom: 0; }
.donut-wrap { position: relative; width: 130px; height: 130px; }
.donut { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 14; transition: stroke-dasharray 0.7s, stroke-dashoffset 0.7s; }
.donut .donut-track { stroke: rgba(255,255,255,0.08); }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-center b { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1; color: #fff; }
.donut-center small { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.water-viz { position: relative; display: flex; gap: 22px; align-items: flex-end; margin-bottom: 24px; }
.bottle { width: 86px; flex: none; }
.bottle-cap { width: 38px; height: 16px; margin: 0 auto; border-radius: 6px 6px 2px 2px; background: var(--accent); }
.bottle-body { position: relative; height: 180px; margin-top: -1px; overflow: hidden; border: 3px solid rgba(255,255,255,0.35); border-radius: 18px 18px 22px 22px; background: rgba(255,255,255,0.04); }
.water { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(180deg, #4ea8de, #1f6fb2); transition: height 1s cubic-bezier(.2,.8,.2,1); }
.water svg { position: absolute; bottom: calc(100% - 1px); left: 0; width: 200%; height: 12px; fill: #4ea8de; animation: wave 3s linear infinite; }
@keyframes wave { to { transform: translateX(-50%); } }
.bottle-marks { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-evenly; }
.bottle-marks i { display: block; width: 16px; height: 2px; margin: 0 6px 0 auto; background: rgba(255,255,255,0.35); }
.glasses { display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-end; }
.glasses i { width: 16px; height: 22px; border: 2px solid #4ea8de; border-top: 0; border-radius: 0 0 5px 5px; background: linear-gradient(transparent 30%, rgba(78,168,222,0.6) 30%); animation: fadeUp 0.4s both; }
.week-strip { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 14px; }
.ws { padding: 10px 2px; border-radius: 10px; text-align: center; background: rgba(255,255,255,0.06); animation: fadeUp 0.4s both; }
.ws small { display: block; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.ws b { font-size: 0.7rem; color: #fff; }
.ws-lift { background: var(--accent); }
.ws-cross { background: #3ddc84; }
.ws-lift small, .ws-lift b, .ws-cross small, .ws-cross b { color: #111; }
.ws-cardio { background: #3a8fd6; }
.ws-hiit { background: #e8692c; }
.ws-cardio small, .ws-hiit small { color: rgba(255,255,255,0.8); }
.calc-lines .rm-row { display: grid; grid-template-columns: 1.15fr 1fr auto; gap: 12px; align-items: center; font-size: 0.85rem; }
.rm-row small { display: block; font-size: 0.68rem; color: rgba(255,255,255,0.5); }
.rm-bar { height: 8px; border-radius: 8px; background: rgba(255,255,255,0.08); overflow: hidden; }
.rm-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width 0.6s; }
.rm-row b { min-width: 64px; text-align: right; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-aside { display: none; }
  .bento { grid-template-columns: repeat(3, 1fr); }
  .t-price { grid-column: span 2; }
}

@media (max-width: 900px) {
  .section-head.split { grid-template-columns: 1fr; gap: 14px; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .t-big, .t-price, .t-icon { grid-column: span 2; }
  .t-big { grid-row: span 2; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .steps-line { display: none; }
}

@media (max-width: 760px) {
  /* app-style bottom navigation */
  .bnav {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 950;
    height: 64px; border-radius: 22px; border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 12px 40px rgba(0,0,0,0.45); transition: transform 0.35s;
  }
  .bnav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; color: var(--muted); -webkit-tap-highlight-color: transparent; }
  .bnav a svg { width: 22px; height: 22px; }
  .bnav a.on { color: var(--accent); }
  .bnav a.on::before { content: ""; position: absolute; top: -1px; width: 18px; height: 3px; border-radius: 3px; background: var(--accent); }
  .bnav-fab { width: 54px; height: 54px; margin-top: -30px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; border: 4px solid var(--bg); box-shadow: 0 8px 24px rgba(37,211,102,0.5); }
  .bnav-fab svg { width: 26px !important; height: 26px !important; }
  .bnav-join span:last-child { color: var(--text); }
  body.has-bnav { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.has-bnav .fab-wa { display: none; }
  body.has-bnav .to-top { right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); }
  body.has-bnav .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
  body.no-scroll .bnav { transform: translateY(140%); }
  body.has-bnav .hero { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.has-bnav .hero-dots { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

@media (max-width: 640px) {
  .section { padding: 64px 0; }
  h2 { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .section-head { margin-bottom: 30px; }
  .section-head p { font-size: 1rem; }

  /* hero */
  .hero { min-height: 100svh; padding: calc(var(--header-h) + 24px) 0 64px; align-items: flex-end; }
  .hero::before { background: linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.7) 45%, rgba(5,5,5,0.95) 80%, var(--bg) 100%); }
  .hero h1 { font-size: clamp(4rem, 21vw, 5.6rem); margin: 16px 0 12px; }
  .hero .badge { font-size: 0.66rem; padding: 7px 12px; }
  .rotator { font-size: 1.6rem; }
  .hero p.lead { font-size: 0.98rem; }
  .hero-ctas { gap: 10px; margin: 22px 0 26px; }
  .hero-ctas .btn { flex: 1 1 0; padding: 14px 12px; font-size: 0.74rem; }
  .stats { border-radius: 16px; }
  .stat { padding: 14px 16px; }
  .stat b { font-size: 2rem; }
  .stat small { font-size: 0.62rem; }
  .scroll-cue { display: none; }
  .hero-dots { left: 16px; right: auto; bottom: 22px; }
  .hero-dots span { width: 22px; }
  .orb.o1 { width: 260px; height: 260px; }
  .hero-grid-lines { height: 30%; }

  .marquee { padding: 12px 0; }

  /* about */
  .about-media .ring { display: none; }
  .about-media .floating { padding: 14px 18px; bottom: 18px; }
  .about-media .floating b { font-size: 2.3rem; }
  .chips { gap: 8px; }
  .chip { padding: 7px 12px; font-size: 0.68rem; }

  /* zones */
  .zones { gap: 12px; padding-bottom: 14px; }
  .zone { flex-basis: 78%; aspect-ratio: 4/5; }
  .zone h3 { font-size: 2rem; }
  .zone-body { padding: 20px; }
  .snap-btn { width: 38px; height: 38px; }

  /* bento */
  .bento { gap: 10px; grid-auto-rows: 158px; }
  .tile { padding: 18px; border-radius: 16px; }
  .tile h3 { font-size: 1.5rem; }
  .tile p { font-size: 0.8rem; }
  .t-stat b { font-size: 2.6rem; }
  .tile-spark { width: 70px; right: 12px; top: 14px; }
  .tile-floors i { width: 40px; height: 10px; }
  .t-big h3 { font-size: 2.2rem; }

  /* tabs fill the width */
  .tabs { display: flex; width: 100%; }
  .tabs button { flex: 1; padding: 12px 8px; }

  /* branches */
  .slider { aspect-ratio: 4/3; border-radius: 16px; }
  .slider-nav button { width: 38px; height: 38px; }
  .branch-info h3 { font-size: 2.8rem; }
  .features { gap: 8px; }
  .features li { padding: 10px 14px; font-size: 0.86rem; }
  .btn-row .btn { flex: 1 1 auto; }
  .compare { border-radius: 14px; }
  .compare table { min-width: 0; }
  .compare th, .compare td { padding: 11px 10px; font-size: 0.8rem; }
  .compare thead th { font-size: 1.25rem; }
  .compare td:first-child { max-width: 150px; }

  /* swipe carousels */
  .services-grid.snap, .price-grid.snap, .reels.snap {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    gap: 12px; margin-inline: -16px; padding: 16px 16px 8px; scroll-padding-inline: 16px; max-width: none;
  }
  .services-grid.snap::-webkit-scrollbar, .price-grid.snap::-webkit-scrollbar, .reels.snap::-webkit-scrollbar { display: none; }
  .services-grid.snap > *, .price-grid.snap > * { flex: 0 0 84%; scroll-snap-align: start; }
  .reels.snap > * { flex: 0 0 62%; scroll-snap-align: start; }
  .snap-ui[data-for="servicesTrack"], .snap-ui[data-for="priceGrid"], .snap-ui[data-for="reelsGrid"] { display: flex; }
  .service { padding: 28px 22px; }
  .plan { padding: 28px 22px; }
  .plan:hover { transform: none; }

  /* quiz */
  .quiz-side { padding: 26px 22px; }
  .quiz-side h3 { font-size: 2.3rem; }
  .quiz-side .big { font-size: 9rem; }
  .quiz-main { padding: 24px 18px; }
  .opts { grid-template-columns: 1fr 1fr; gap: 10px; }
  .opt { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; font-size: 0.84rem; }
  .result h4 { font-size: 2rem; }
  .result .rec div { flex-direction: column; gap: 2px; }
  .result .rec b { text-align: left; }

  /* pricing + chart + calculator */
  .price-controls { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 18px; }
  .switch { justify-content: center; }
  .chart-card { margin-top: 44px; padding: 22px 16px; }
  .chart-head { margin-bottom: 26px; }
  .plot-area { height: 240px; margin-left: 38px; }
  .gl span { left: -40px; width: 34px; font-size: 0.66rem; }
  .bars { width: 76%; }
  .bl { font-size: 0.62rem; }
  .xl { font-size: 0.66rem; }
  .chart-tip { min-width: 190px; font-size: 0.78rem; }
  .chart-table { overflow-x: auto; }
  .chart-table table { font-size: 0.76rem; min-width: 420px; }
  .calc-form { padding: 24px 18px; gap: 18px; }
  .calc-out { padding: 26px 18px; }
  .seg button { min-width: 0; padding: 12px 8px; font-size: 0.8rem; }
  [data-calc="months"], [data-seg="act"], [data-seg="pgoal"] { display: grid; grid-template-columns: 1fr 1fr; }
  .check { font-size: 0.82rem; }

  /* shop */
  .shop-list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .shop-list div { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; font-size: 0.82rem; }

  /* gallery */
  .filters { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: none; }
  .gallery { columns: 2; column-gap: 10px; }
  .g-item { margin-bottom: 10px; border-radius: 10px; }
  .g-item::after { transform: none; padding: 24px 10px 8px; font-size: 0.64rem; }

  /* ribbon */
  .ribbon { padding: 22px 0; gap: 10px; }
  .rib-track { gap: 10px; padding-right: 10px; }
  .rib { width: 170px; height: 115px; border-radius: 10px; }

  /* slogans */
  .slogan-stage { min-height: 3.3em; font-size: 2.3rem; }

  /* steps */
  .steps { grid-template-columns: 1fr; row-gap: 0; }
  .steps-line { display: block; top: 28px; bottom: 28px; left: 27px; right: auto; width: 3px; height: auto; }
  .steps-line i { transform-origin: top; transform: scaleY(var(--p, 0)); }
  .step { text-align: left; padding: 0 0 30px 76px; min-height: 86px; }
  .step-dot { position: absolute; left: 0; top: 0; margin: 0; }
  .step-ico { display: inline-block; font-size: 1.4rem; margin: 0 8px 0 0; vertical-align: middle; }
  .step h3 { display: inline-block; font-size: 1.6rem; vertical-align: middle; margin: 0; }
  .step p { margin: 6px 0 0; max-width: none; }

  /* faq + contact + maps */
  .faq summary { padding: 16px 18px; font-size: 0.94rem; }
  .faq .ans { padding: 0 18px 16px; }
  .c-card { padding: 16px; gap: 14px; }
  .c-card .ci { width: 46px; height: 46px; }
  .form { padding: 22px 16px; }
  .map-card iframe { height: 220px; }
  .map-card .info { padding: 18px; }
  .map-card .info .btn { width: 100%; }
  .cta-band { text-align: center; padding: 36px 22px; }
  .cta-band .btn { width: 100%; }

  /* menu + footer */
  .mobile-menu a.m-link { font-size: 2.2rem; }
  .footer { padding: 50px 0 24px; }
  .footer-grid { gap: 28px; }
  .footer-bottom { justify-content: center; text-align: center; }

  /* Fitness Lab */
  .page-hero { padding: calc(var(--header-h) + 40px) 0 40px; }
  .page-hero h1 { font-size: clamp(3.6rem, 18vw, 5rem); }
  .lab { gap: 18px; }
  .lab-nav { display: flex; overflow-x: auto; gap: 8px; margin-inline: -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .lab-nav::-webkit-scrollbar { display: none; }
  .lab-nav button { flex: none; padding: 10px 14px; gap: 8px; border-radius: 999px; font-size: 0.84rem; }
  .lab-nav button small { display: none; }
  .lab-nav button span.e { font-size: 1.05rem; }
  .range-wrap { grid-template-columns: 1fr 78px; }
  .macro-viz { grid-template-columns: 104px 1fr; gap: 16px; }
  .donut-wrap { width: 104px; height: 104px; }
  .donut-center b { font-size: 1.6rem; }
  .ws { padding: 8px 1px; }
  .ws b { font-size: 0.58rem; }
  .calc-lines .rm-row { grid-template-columns: 1.3fr 0.8fr auto; gap: 8px; font-size: 0.78rem; }
  .bottle { width: 70px; }
  .bottle-body { height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .rib-track, .hero-grid-lines, .orb, .water svg { animation: none !important; }
  .grown .bar, .bar { transition: none; }
}