/* =============================================================================
   PEAKPHORM — style.css
   Bebas Neue (display) + DM Sans (body) | Black & White
   ============================================================================= */

/* ── Custom properties ──────────────────────────────────────────────────────── */
:root {
  --bg:       #080808;
  --bg-2:     #0f0f0f;
  --bg-3:     #111111;
  --text:     #ffffff;
  --muted:    #666666;
  --dimmed:   #444444;
  --border:   rgba(255,255,255,0.10);
  --border-lg:rgba(255,255,255,0.16);
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --nav-h:    64px;
  --max-w:    1400px;
  --px:       clamp(20px, 4vw, 52px);
  --section-py: clamp(72px, 9vw, 108px);
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body  { background: var(--bg); color: var(--text); font-family: var(--font-body);
        -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img   { display: block; max-width: 100%; }
a     { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; }
input, textarea { font-family: var(--font-body); }
svg   { display: block; }

/* ── Utility ────────────────────────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--px);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 92px);
  letter-spacing: 0.5px;
  line-height: 0.95;
  color: var(--text);
  margin-bottom: 18px;
}

.section-sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 520px;
}

/* ── Shared buttons ─────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--text);
  color: #000;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 13px 28px;
  border-radius: 980px;
  min-height: 44px;
  transition: opacity .2s, transform .2s;
  white-space: nowrap;
}
.btn-primary:hover { opacity: .85; transform: translateY(-2px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  padding: 13px 4px;
  min-height: 44px;
  transition: color .2s, gap .2s;
  white-space: nowrap;
}
.btn-ghost:hover { color: var(--text); gap: 10px; }
.btn-ghost svg   { flex: none; transition: transform .2s; }
.btn-ghost:hover svg { transform: translateX(3px); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.28);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: 0;
  min-height: 44px;
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.btn-outline:hover { background: var(--text); color: #000; border-color: var(--text); }

/* ============================================================================
   NAV
   ============================================================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(8,8,8,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: background .3s;
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--px);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 1.5px;
  color: var(--text);
  flex: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}

.nav-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s;
}
.nav-link:hover { color: var(--text); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  background: var(--text);
  color: #000;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 980px;
  flex: none;
  transition: opacity .2s;
}
.nav-cta:hover { opacity: .85; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  margin-left: auto;
  flex: none;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ============================================================================
   HERO
   ============================================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 640px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding-top: var(--nav-h);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: grayscale(12%) brightness(0.9) contrast(1.08) saturate(0.5);
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(8,8,8,0.97) 0%,
      rgba(8,8,8,0.88) 28%,
      rgba(8,8,8,0.40) 55%,
      rgba(8,8,8,0.00) 85%
    ),
    linear-gradient(to top,
      rgba(8,8,8,0.98) 0%,
      rgba(8,8,8,0.50) 22%,
      rgba(8,8,8,0.00) 45%
    );
}

.hero-fg {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: url('assets/images/hero-bg.png');
  background-size: cover;
  background-position: center center;
  filter: grayscale(10%) brightness(0.92) contrast(1.1) saturate(0.55);
  -webkit-mask-image: radial-gradient(ellipse 38% 65% at 62% 38%,
    rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 30%,
    rgba(0,0,0,0.4) 60%, transparent 80%);
  mask-image: radial-gradient(ellipse 38% 65% at 62% 38%,
    rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 30%,
    rgba(0,0,0,0.4) 60%, transparent 80%);
}

.hero-content {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 860px;
  padding-inline: var(--px);
  padding-bottom: clamp(40px, 6vw, 68px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.60);
  margin-bottom: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 7px 16px 7px 12px;
  border-radius: 980px;
  backdrop-filter: blur(4px);
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: rgba(255,255,255,0.40);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 10vw, 108px);
  line-height: 0.95;
  letter-spacing: 1px;
  color: var(--text);
  margin-bottom: 8px;
}

.hero-subtitle {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(20px, 3.2vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.88);
  margin-bottom: 18px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}

.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 400;
  color: rgba(255,255,255,0.72);
  max-width: 460px;
  line-height: 1.65;
  margin-bottom: 8px;
  text-shadow: 0 1px 16px rgba(0,0,0,0.6);
}

.hero-area {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.48);
  margin-bottom: 28px;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 32px;
}

.hero-stats {
  display: flex;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  background: rgba(8,8,8,0.45);
}
.stat {
  display: flex;
  flex-direction: column;
  padding: 14px 22px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.stat:last-child { border-right: none; }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 30px);
  letter-spacing: 0.5px;
  line-height: 1;
  color: var(--text);
}
.stat-lbl {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
}

/* ============================================================================
   PROOF / TRANSFORMATION CAROUSEL
   ============================================================================ */
.proof {
  background: var(--bg);
  padding-block: var(--section-py);
  overflow: hidden;
}
.proof .container {
  margin-bottom: 52px;
}
.proof-title {
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 92px);
  letter-spacing: 0.5px;
  line-height: 0.95;
  color: var(--text);
  margin-bottom: 16px;
}
.proof-sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 480px;
}

/* ── Carousel rows ─────────────────────────── */
.carousel-row {
  overflow: hidden;
  width: 100%;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  /* Vertical page scroll stays native; horizontal drag is claimed by JS only
     once it confirms horizontal intent (see site.js initCarousel). */
  touch-action: pan-y;
}
.carousel-row:active { cursor: grabbing; }
.carousel-row + .carousel-row { margin-top: 16px; }

.carousel-track {
  display: flex;
  will-change: transform;
  /* Cards use margin-right instead of gap for precise loop math */
}

.carousel-track--left {
  animation: scroll-left 36s linear infinite;
}
.carousel-track--right {
  animation: scroll-right 40s linear infinite;
}

/* Pause on hover */
.carousel-row:hover .carousel-track { animation-play-state: paused; }

/* ── Carousel cards ────────────────────────── */
.carousel-card {
  flex: none;
  width: 260px;
  margin-right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-images {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 5;
  overflow: hidden;
  background: #000;
}

.card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.img-after  { z-index: 1; }
.img-before {
  z-index: 2;
  animation: dissolve-before 9s ease-in-out infinite;
}

/* Stagger dissolve per person */
[data-person="brandon"] .img-before { animation-delay:  0.0s; }
[data-person="frank"]   .img-before { animation-delay:  1.8s; }
[data-person="gabriela"].img-before { animation-delay:  3.6s; }
[data-person="sara"]    .img-before { animation-delay:  5.4s; }
[data-person="tanki"]   .img-before { animation-delay:  7.2s; }

.card-name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ── Scroll keyframes ──────────────────────── */
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@keyframes dissolve-before {
  0%   { opacity: 1; }
  35%  { opacity: 1; }
  45%  { opacity: 0; }
  80%  { opacity: 0; }
  90%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ============================================================================
   SYSTEM — ANIMATED SVG SECTION
   ============================================================================ */
.system {
  background: var(--bg-2);
  padding-block: var(--section-py);
  text-align: center;
  overflow: hidden;
}

.system-inner {
  max-width: 880px;
  margin: 0 auto;
  padding-inline: var(--px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.system-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 82px);
  letter-spacing: 0.5px;
  line-height: 0.96;
  color: var(--text);
  margin-bottom: 18px;
}

.system-sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 600px;
  margin-bottom: 60px;
}

/* ── SVG canvas + nodes ────────────────────── */
.sys-canvas {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  margin: 0 auto 52px;
}

.sys-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ── SVG elements — initial hidden state ──────── */
.sys-hub {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.2);
  transition: opacity 0.45s ease-out, transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.sys-spoke {
  stroke-dasharray: 225 225;
  stroke-dashoffset: 225;
  opacity: 0;
  transition: stroke-dashoffset 1.1s ease-out, opacity 0.35s ease-out;
}
.sys-edge {
  stroke-dasharray: 265 265;
  stroke-dashoffset: 265;
  opacity: 0;
  transition: stroke-dashoffset 1.2s ease-out, opacity 0.35s ease-out;
}
.sys-ring {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
  transition: opacity 0.4s ease-out, transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}

/* Nodes — positioning + entrance */
.sys-node {
  position: absolute;
  left: var(--nx);
  top:  var(--ny);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.45s ease-out;
  cursor: default;
}
/* .node-inner handles flex layout + ambient float */
.node-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: scale(0.65) translateY(8px);
  transition: transform 0.55s cubic-bezier(0.34,1.2,0.64,1);
}

.node-icon-wrap {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.78);
  transition: color 0.3s ease, filter 0.3s ease;
}
.node-icon {
  width: 22px;
  height: 22px;
  transition: transform 0.3s ease;
}
.node-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52);
  text-align: center;
  max-width: 88px;
  line-height: 1.35;
  word-break: break-word;
  transition: color 0.3s ease;
}

/* ── ENTRANCE: JS adds .is-visible to .system ── */

/* Step 1 — center hub activates immediately */
.system.is-visible .sys-hub {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0s;
}

/* Step 2 — spokes draw (staggered, start 200ms after hub) */
.system.is-visible .sys-spoke { opacity: 1; }
.system.is-visible .sys-spoke[data-idx="0"] { stroke-dashoffset: 0; transition-delay: 0.20s; }
.system.is-visible .sys-spoke[data-idx="1"] { stroke-dashoffset: 0; transition-delay: 0.30s; }
.system.is-visible .sys-spoke[data-idx="2"] { stroke-dashoffset: 0; transition-delay: 0.40s; }
.system.is-visible .sys-spoke[data-idx="3"] { stroke-dashoffset: 0; transition-delay: 0.50s; }
.system.is-visible .sys-spoke[data-idx="4"] { stroke-dashoffset: 0; transition-delay: 0.60s; }

/* Edges draw after spokes finish */
.system.is-visible .sys-edge { opacity: 1; }
.system.is-visible .sys-edge[data-idx="0"] { stroke-dashoffset: 0; transition-delay: 0.80s; }
.system.is-visible .sys-edge[data-idx="1"] { stroke-dashoffset: 0; transition-delay: 0.95s; }
.system.is-visible .sys-edge[data-idx="2"] { stroke-dashoffset: 0; transition-delay: 1.10s; }
.system.is-visible .sys-edge[data-idx="3"] { stroke-dashoffset: 0; transition-delay: 1.25s; }
.system.is-visible .sys-edge[data-idx="4"] { stroke-dashoffset: 0; transition-delay: 1.40s; }

/* Step 3 — rings pop in (offset from spoke sequence) */
.system.is-visible .sys-ring[data-idx="0"] { opacity: 1; transform: scale(1); transition-delay: 0.55s; }
.system.is-visible .sys-ring[data-idx="1"] { opacity: 1; transform: scale(1); transition-delay: 0.70s; }
.system.is-visible .sys-ring[data-idx="2"] { opacity: 1; transform: scale(1); transition-delay: 0.85s; }
.system.is-visible .sys-ring[data-idx="3"] { opacity: 1; transform: scale(1); transition-delay: 1.00s; }
.system.is-visible .sys-ring[data-idx="4"] { opacity: 1; transform: scale(1); transition-delay: 1.15s; }

/* Step 4 — nodes reveal sequentially after rings */
.system.is-visible .sys-node { opacity: 1; }
.system.is-visible .sys-node[data-idx="0"] { transition-delay: 0.80s; }
.system.is-visible .sys-node[data-idx="1"] { transition-delay: 1.00s; }
.system.is-visible .sys-node[data-idx="2"] { transition-delay: 1.20s; }
.system.is-visible .sys-node[data-idx="3"] { transition-delay: 1.40s; }
.system.is-visible .sys-node[data-idx="4"] { transition-delay: 1.60s; }
.system.is-visible .node-inner { transform: scale(1) translateY(0); }
.system.is-visible .sys-node[data-idx="0"] .node-inner { transition-delay: 0.80s; }
.system.is-visible .sys-node[data-idx="1"] .node-inner { transition-delay: 1.00s; }
.system.is-visible .sys-node[data-idx="2"] .node-inner { transition-delay: 1.20s; }
.system.is-visible .sys-node[data-idx="3"] .node-inner { transition-delay: 1.40s; }
.system.is-visible .sys-node[data-idx="4"] .node-inner { transition-delay: 1.60s; }

/* ── CONTINUOUS ANIMATION KEYFRAMES ──────────── */

@keyframes sys-hub-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.22); }
}
@keyframes sys-ring-breathe {
  0%, 100% { opacity: 0.6;  }
  50%       { opacity: 1;    }
}
@keyframes sys-node-float {
  0%, 100% { transform: translateY(0)   scale(1); }
  50%       { transform: translateY(-4px) scale(1.035); }
}
@keyframes sys-node-float-alt {
  0%, 100% { transform: translateY(0)   scale(1); }
  50%       { transform: translateY(-3px) scale(1.03); }
}
@keyframes sys-line-breathe {
  0%, 100% { stroke: rgba(255,255,255,0.10); }
  50%       { stroke: rgba(255,255,255,0.28); }
}
@keyframes sys-edge-breathe {
  0%, 100% { stroke: rgba(255,255,255,0.07); }
  50%       { stroke: rgba(255,255,255,0.18); }
}
/* Icon keyframes */
@keyframes icon-recover {
  0%, 100% { transform: rotate(0deg); }
  40%, 60% { transform: rotate(18deg); }
}
@keyframes icon-target-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.78; }
  50%       { transform: scale(1.12); opacity: 1; }
}
@keyframes icon-clock-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50%       { transform: scale(1.08) translateY(-1px); }
}
@keyframes icon-barbell-lift {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-2.5px); }
}
@keyframes icon-rise {
  0%, 100% { transform: translateY(0); }
  35%, 65%  { transform: translateY(-3px); }
}

/* ── PULSING STATE (JS adds .is-pulsing after entrance) ── */
.system.is-pulsing .sys-hub {
  animation: sys-hub-pulse 3s ease-in-out infinite;
}

/* Staggered ring breathing */
.system.is-pulsing .sys-ring {
  animation: sys-ring-breathe 4.5s ease-in-out infinite;
}
.system.is-pulsing .sys-ring[data-idx="0"] { animation-delay: 0.0s; }
.system.is-pulsing .sys-ring[data-idx="1"] { animation-delay: 0.9s; }
.system.is-pulsing .sys-ring[data-idx="2"] { animation-delay: 1.8s; }
.system.is-pulsing .sys-ring[data-idx="3"] { animation-delay: 2.7s; }
.system.is-pulsing .sys-ring[data-idx="4"] { animation-delay: 3.6s; }

/* Staggered spoke breathing */
.system.is-pulsing .sys-spoke {
  animation: sys-line-breathe 5.5s ease-in-out infinite;
}
.system.is-pulsing .sys-spoke[data-idx="0"] { animation-delay: 0.0s; }
.system.is-pulsing .sys-spoke[data-idx="1"] { animation-delay: 1.1s; }
.system.is-pulsing .sys-spoke[data-idx="2"] { animation-delay: 2.2s; }
.system.is-pulsing .sys-spoke[data-idx="3"] { animation-delay: 3.3s; }
.system.is-pulsing .sys-spoke[data-idx="4"] { animation-delay: 4.4s; }

/* Edge breathing */
.system.is-pulsing .sys-edge {
  animation: sys-edge-breathe 6s ease-in-out infinite;
}
.system.is-pulsing .sys-edge[data-idx="0"] { animation-delay: 0.5s; }
.system.is-pulsing .sys-edge[data-idx="1"] { animation-delay: 1.7s; }
.system.is-pulsing .sys-edge[data-idx="2"] { animation-delay: 2.9s; }
.system.is-pulsing .sys-edge[data-idx="3"] { animation-delay: 4.1s; }
.system.is-pulsing .sys-edge[data-idx="4"] { animation-delay: 5.3s; }

/* Node float — different timing per node, never synchronised */
.system.is-pulsing .sys-node[data-idx="0"] .node-inner { animation: sys-node-float     4.2s ease-in-out 0.0s infinite; }
.system.is-pulsing .sys-node[data-idx="1"] .node-inner { animation: sys-node-float-alt 5.1s ease-in-out 0.8s infinite; }
.system.is-pulsing .sys-node[data-idx="2"] .node-inner { animation: sys-node-float     4.7s ease-in-out 1.6s infinite; }
.system.is-pulsing .sys-node[data-idx="3"] .node-inner { animation: sys-node-float-alt 5.5s ease-in-out 0.4s infinite; }
.system.is-pulsing .sys-node[data-idx="4"] .node-inner { animation: sys-node-float     3.9s ease-in-out 1.2s infinite; }

/* Icon-specific continuous animations */
.system.is-pulsing .sys-node[data-idx="0"] .node-icon { animation: icon-recover       7s ease-in-out 0s   infinite; transform-origin: center; }
.system.is-pulsing .sys-node[data-idx="1"] .node-icon { animation: icon-target-pulse  4.5s ease-in-out 0.5s infinite; }
.system.is-pulsing .sys-node[data-idx="2"] .node-icon { animation: icon-clock-breathe 5.5s ease-in-out 1.2s infinite; }
.system.is-pulsing .sys-node[data-idx="3"] .node-icon { animation: icon-barbell-lift  4.8s ease-in-out 2.0s infinite; }
.system.is-pulsing .sys-node[data-idx="4"] .node-icon { animation: icon-rise          3.8s ease-in-out 0.9s infinite; }

/* ── HOVER INTERACTION (desktop) ─────────────── */
/* JS sets data-hovered="N" on #sysCanvas on node mouseenter */

/* Hovered node: brighten icon + ring */
.sys-node:hover .node-icon-wrap { color: rgba(255,255,255,1); filter: drop-shadow(0 0 6px rgba(255,255,255,0.35)); }
.sys-node:hover .node-label     { color: rgba(255,255,255,0.85); }

/* Highlight ring for hovered node */
#sysCanvas[data-hovered="0"] .sys-ring[data-idx="0"],
#sysCanvas[data-hovered="1"] .sys-ring[data-idx="1"],
#sysCanvas[data-hovered="2"] .sys-ring[data-idx="2"],
#sysCanvas[data-hovered="3"] .sys-ring[data-idx="3"],
#sysCanvas[data-hovered="4"] .sys-ring[data-idx="4"] {
  stroke: rgba(255,255,255,0.75);
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.30));
  animation: none;
}

/* Highlight spoke for hovered node */
#sysCanvas[data-hovered="0"] .sys-spoke[data-idx="0"],
#sysCanvas[data-hovered="1"] .sys-spoke[data-idx="1"],
#sysCanvas[data-hovered="2"] .sys-spoke[data-idx="2"],
#sysCanvas[data-hovered="3"] .sys-spoke[data-idx="3"],
#sysCanvas[data-hovered="4"] .sys-spoke[data-idx="4"] {
  stroke: rgba(255,255,255,0.42);
  animation: none;
}

/* Highlight connecting edges: node→edges map 0:(0,4) 1:(0,1) 2:(1,2) 3:(2,3) 4:(3,4) */
#sysCanvas[data-hovered="0"] .sys-edge[data-idx="0"],
#sysCanvas[data-hovered="0"] .sys-edge[data-idx="4"] { stroke: rgba(255,255,255,0.30); animation: none; }
#sysCanvas[data-hovered="1"] .sys-edge[data-idx="0"],
#sysCanvas[data-hovered="1"] .sys-edge[data-idx="1"] { stroke: rgba(255,255,255,0.30); animation: none; }
#sysCanvas[data-hovered="2"] .sys-edge[data-idx="1"],
#sysCanvas[data-hovered="2"] .sys-edge[data-idx="2"] { stroke: rgba(255,255,255,0.30); animation: none; }
#sysCanvas[data-hovered="3"] .sys-edge[data-idx="2"],
#sysCanvas[data-hovered="3"] .sys-edge[data-idx="3"] { stroke: rgba(255,255,255,0.30); animation: none; }
#sysCanvas[data-hovered="4"] .sys-edge[data-idx="3"],
#sysCanvas[data-hovered="4"] .sys-edge[data-idx="4"] { stroke: rgba(255,255,255,0.30); animation: none; }

/* ── REDUCED MOTION — show fully static immediately ── */
@media (prefers-reduced-motion: reduce) {
  .sys-hub, .sys-ring, .sys-spoke, .sys-edge, .sys-node, .node-inner {
    transition: none !important;
    animation: none !important;
  }
  .sys-hub   { opacity: 1; transform: scale(1); }
  .sys-ring  { opacity: 1; transform: scale(1); }
  .sys-spoke { opacity: 1; stroke-dashoffset: 0; }
  .sys-edge  { opacity: 1; stroke-dashoffset: 0; }
  .sys-node  { opacity: 1; }
  .node-inner { transform: scale(1) translateY(0); }
  .hero-video { animation-play-state: paused !important; }
}

/* ============================================================================
   CHOOSE YOUR PROTOCOL — 5 TIERS
   ============================================================================ */
.protocol {
  background: var(--bg-3);
  padding-block: var(--section-py);
}
.protocol .container {
  margin-bottom: 52px;
}
.protocol .section-sub {
  margin: 0 auto;
  text-align: center;
}
.protocol .eyebrow,
.protocol .section-title {
  text-align: center;
}

.tiers-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--px);
  align-items: stretch;
}

/* ── Tier card base ──────────────────────── */
.tier-card {
  position: relative;
  background: var(--bg);
  border: 1px solid #222222;
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  overflow: hidden;
}

.tier-card--popular {
  border-color: #4a4a4a;
}

.tier-card--elite {
  background: #ffffff;
  border-color: #ffffff;
}

.tier-card--custom {
  border: 1px dashed #4a4a4a;
}

/* Badge */
.tier-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #ffffff;
  background: #383838;
  padding: 4px 9px;
  border-radius: 2px;
}
.tier-card--elite .tier-badge {
  background: #000000;
  color: #ffffff;
}
.tier-card--custom .tier-badge {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.30);
  color: rgba(255,255,255,0.70);
}

/* Header */
.tier-header {
  padding: 26px 20px 20px;
  border-bottom: 1px solid #222222;
}
.tier-card--elite .tier-header {
  border-bottom-color: rgba(0,0,0,0.12);
}

.tier-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.tier-card--elite .tier-label { color: rgba(0,0,0,0.42); }

.tier-name {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: 0.8px;
  color: var(--text);
  margin-bottom: 10px;
}
.tier-card--elite .tier-name { color: #000000; }

.tier-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.price-amount {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 38px);
  letter-spacing: 0.5px;
  color: var(--text);
}
.tier-card--elite .price-amount { color: #000000; }

.price-period {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.tier-card--elite .price-period { color: rgba(0,0,0,0.45); }

.price-contact {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: 0.5px;
  color: var(--text);
}

/* Body */
.tier-body {
  padding: 20px 20px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tier-section {
  margin-bottom: 16px;
}
.tier-section-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.tier-card--elite .tier-section-label { color: rgba(0,0,0,0.40); }

.tier-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tier-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: #808080;
}
.tier-card--elite .tier-features li { color: #333333; }

.tier-features li::before {
  content: '';
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='7' cy='7' r='5.5' stroke='%23555' stroke-width='1'/%3E%3Cpath d='M4.5 7.2l1.7 1.7L9.5 5' stroke='%23555' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
.tier-card--elite .tier-features li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='7' cy='7' r='5.5' stroke='%23000' stroke-width='1'/%3E%3Cpath d='M4.5 7.2l1.7 1.7L9.5 5' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tier-cta {
  margin-top: auto;
  display: block;
  text-align: center;
  background: #111111;
  color: #ffffff;
  border: 1px solid #333333;
  padding: 13px 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: background .2s, border-color .2s, color .2s;
  border-radius: 2px;
}
.tier-cta:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}
.tier-card--elite .tier-cta {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}
.tier-card--elite .tier-cta:hover {
  background: #222222;
  border-color: #222222;
}

.tier-note {
  max-width: 900px;
  margin: 36px auto 0;
  padding-inline: var(--px);
  text-align: center;
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--dimmed);
}

/* Real product cards: image, sale price, stock state, and the add-to-cart
   form/button that replaced the old static "#contact" anchors. */
.tier-image {
  margin: 0 0 14px;
  border-radius: 2px;
  overflow: hidden;
  background: #111111;
}
.tier-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.price-was {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: line-through;
  margin-left: 6px;
}
.tier-card--elite .price-was { color: rgba(0,0,0,0.45); }

.tier-stock {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.tier-add-form {
  margin-top: auto;
}
.tier-add-form .tier-cta {
  width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.tier-add-status {
  margin: 8px 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--muted);
}

.tier-cta--outline {
  background: transparent;
  color: var(--text);
}
.tier-card--elite .tier-cta--outline {
  color: #000000;
  border-color: rgba(0,0,0,0.30);
}

.protocol-empty {
  grid-column: 1 / -1;
  max-width: 560px;
  margin: 0 auto;
  padding-inline: var(--px);
  text-align: center;
}
.protocol-empty p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--dimmed);
  margin-bottom: 24px;
}

/* ============================================================================
   WHAT'S INCLUDED
   ============================================================================ */
.included {
  background: var(--bg-2);
  padding-block: var(--section-py);
}
.included .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.included .section-title { margin-bottom: 48px; }

.included-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  border: 1px solid var(--border-lg);
  margin-bottom: 40px;
}

.included-panel {
  padding: 40px 36px;
}
.included-panel:first-child {
  border-right: 1px solid var(--border-lg);
}

.panel-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.8px;
  color: var(--text);
  margin-bottom: 8px;
}
.panel-desc {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.6;
}

.included-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.included-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.78);
  line-height: 1.5;
}
.included-features li::before {
  content: '';
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='6.5' stroke='rgba(255,255,255,0.40)' stroke-width='1'/%3E%3Cpath d='M5 8.2l2 2L11 6' stroke='rgba(255,255,255,0.80)' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ============================================================================
   ABOUT
   ============================================================================ */
.about {
  background: var(--bg-3);
  padding-block: var(--section-py);
}
.about .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-head {
  text-align: center;
  margin-bottom: 52px;
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  max-width: 1100px;
  margin-bottom: 52px;
}

.about-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.45;
  color: var(--text);
}

.about-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.85;
  color: #999999;
}
.about-body p + p { margin-top: 16px; }

.about-pillars {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pillar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #cccccc;
}
.pillar-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffffff;
  flex: none;
}

/* ============================================================================
   CONTACT
   ============================================================================ */
.contact {
  background: var(--bg);
  padding-block: var(--section-py);
}

.contact-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.contact-left .eyebrow { margin-bottom: 12px; }

.contact-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 80px);
  letter-spacing: 0.5px;
  line-height: 0.96;
  color: var(--text);
  margin-bottom: 20px;
}

.contact-sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.85;
  color: #999999;
  max-width: 420px;
  margin-bottom: 36px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.info-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.info-value {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--text);
  transition: color .2s;
}
a.info-value:hover { color: rgba(255,255,255,0.7); }

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.form-field {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  padding-block: 18px;
}
.form-field label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.form-field input,
.form-field textarea {
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--text);
  width: 100%;
  resize: none;
  font-weight: 400;
  line-height: 1.5;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: #444444; }
.form-field textarea { min-height: 80px; }

.btn-submit {
  margin-top: 28px;
  align-self: flex-start;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #000000;
  background: #ffffff;
  border: none;
  padding: 15px 26px;
  cursor: pointer;
  transition: opacity .2s;
  border-radius: 0;
}
.btn-submit:hover { opacity: .80; }

/* ============================================================================
   FOOTER
   ============================================================================ */
.site-footer {
  background: var(--bg);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-block: 36px;
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1.2px;
  color: var(--text);
  flex: none;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-link {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s;
}
.footer-link:hover { color: var(--text); }

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.footer-copy,
.footer-area {
  font-family: var(--font-body);
  font-size: 10.5px;
  color: var(--dimmed);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

/* ── 1300px: 3-col flex so last 2 cards centre on row 2 ─────────────────────── */
@media (max-width: 1300px) and (min-width: 961px) {
  .tiers-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
  .tier-card {
    flex: 0 0 calc(33.333% - 11px);
    min-width: 0;
  }
}

/* ── 1100px ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .about-content {
    gap: 40px;
  }
}

/* ── 960px ──────────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  /* Nav */
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }

  /* Mobile nav open */
  .site-nav.nav-open {
    height: auto;
    background: rgba(8,8,8,0.97);
  }
  .site-nav.nav-open .nav-inner {
    flex-wrap: wrap;
    height: auto;
    padding-block: 16px;
    row-gap: 0;
  }
  .site-nav.nav-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 8px;
  }
  .site-nav.nav-open .nav-link {
    display: block;
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
  }
  .site-nav.nav-open .nav-cta {
    display: inline-flex;
    margin: 16px 0 8px;
  }

  /* Hero */
  .hero-fg { display: none; }
  .hero-stats { flex-wrap: wrap; }
  .stat { padding: 12px 16px; }

  /* Carousel: hide row 2 (unchanged). Row 1 switches from the desktop
     CSS-keyframe-animation + JS-pointer-drag architecture to NATIVE
     horizontal scrolling - real-device testing showed the transform-based
     approach never felt like genuine finger-tracking on an actual phone.
     site.js's initCarousel() switches modes at this same 960px breakpoint
     (isMobileWidth()) and fully tears down whichever mode isn't active, so
     nothing here fights inline transform/animation-delay left over from
     desktop mode.

     animation: none - the CSS keyframe animation MUST NOT run alongside
     native scrollLeft; site.js drives auto-advance itself via
     requestAnimationFrame at a fixed px/second speed instead of a
     full-loop duration (see MOBILE_AUTO_SCROLL_PX_PER_SECOND).

     overflow-x: auto / overflow-y: hidden - the row IS the scroll
     container now; the track's natural (unconstrained) flex width already
     overflows it, so no width changes are needed on the track/cards
     themselves for this to work.

     touch-action: auto - overrides the desktop-mode `pan-y` restriction
     (which deliberately reserves horizontal touch for JS's manual drag).
     `auto` lets the browser's native scroll handling decide per gesture,
     based on what this element can actually scroll - horizontal touches
     scroll the row; vertical ones fall through to the page, since the row
     itself has no vertical overflow to consume them.

     overscroll-behavior-x: contain - keeps a horizontal fling from
     chaining into the browser's own back/forward swipe-navigation gesture. */
  .carousel-row--reverse { display: none; }
  .carousel-row {
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    /* Hide the scrollbar without disabling scrolling. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .carousel-row::-webkit-scrollbar {
    display: none;
  }
  .carousel-track--left,
  .carousel-track--right {
    animation: none;
  }
  /* The finger gesture belongs to the native scroll viewport, not to an
     accidental image-drag or text-selection starting on a card. */
  .carousel-card {
    -webkit-user-drag: none;
    user-select: none;
  }
  .card-img {
    -webkit-user-drag: none;
  }

  /* System: shrink canvas */
  .sys-canvas { max-width: 420px; }
  .node-label { font-size: 8.5px; max-width: 70px; }

  /* Tiers */
  .tiers-grid { grid-template-columns: repeat(2, 1fr); }

  /* Included */
  .included-panels { grid-template-columns: 1fr; }
  .included-panel:first-child { border-right: none; border-bottom: 1px solid var(--border-lg); }

  /* About */
  .about-content { grid-template-columns: 1fr; gap: 28px; }

  /* Contact */
  .contact-inner { grid-template-columns: 1fr; gap: 48px; }

  /* Footer */
  .footer-right { align-items: flex-start; }
}

/* ── 700px ──────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* Footer */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-right { align-items: flex-start; }
}

/* ── 640px ──────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Hero */
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn-primary, .btn-ghost { width: 100%; justify-content: center; text-align: center; }
  .hero-stats { flex-direction: column; }
  .stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); flex-direction: row; align-items: baseline; justify-content: space-between; }
  .stat:last-child { border-bottom: none; }

  /* Carousel — mobile single row with wider cards */
  .carousel-card { width: min(260px, 80vw); }
  .carousel-row { cursor: default; }

  /* System */
  .sys-canvas { max-width: 320px; }
  .node-icon-wrap { width: 28px; height: 28px; }
  .node-icon { width: 18px; height: 18px; }
  .node-label { font-size: 7.5px; max-width: 60px; letter-spacing: 0.8px; }

  /* Protocol */
  .tiers-grid { grid-template-columns: 1fr; }

  /* Included */
  .included-panel { padding: 28px 24px; }

  /* About pillars */
  .about-pillars { gap: 8px; }
}

/* ── 640px, portrait only ──────────────────────────────────────────────────────
   Desktop's hero is a full-viewport overlay: .hero-bg/.hero-video/
   .hero-overlay are position:absolute, filling the whole 100dvh .hero box
   as a background layer, with .hero-content flexed to the bottom on top of
   it. A previous pass tried to keep that same overlay architecture on
   portrait phones and just letterbox the video inside it (object-fit:
   contain within the still-100dvh box) - but a tall, narrow viewport still
   left a very short, heavily letterboxed video with text stacked on top of
   it, which read as broken rather than intentional.

   The user now wants a genuinely different portrait-mobile arrangement:
   nav, then the full video at its own natural size, then the hero text
   below it - normal stacked document flow, not an overlay at all. That
   can't be reached by tweaking object-fit alone, so this block instead
   takes every absolutely-positioned hero layer out of position:absolute
   and lets them stack in the order the markup already puts them in
   (.hero-bg, then .hero-content - .hero-fg sits between the two in the
   markup but is already display:none at this width via the ≤960px rule
   above, so it contributes nothing here and did not need touching).

   NAV -> VIDEO, ZERO GAP: .hero keeps the SAME `padding-top: var(--nav-h)`
   the desktop rule already sets (nothing here overrides it) - with .hero
   now a normal block box starting at the top of the page (CartFly's own
   .cf-main/.cf-container are already neutralised to zero padding/margin
   for this homepage route - see "Homepage full-bleed content" further
   below in this file), that padding alone puts .hero-bg's top edge
   exactly `--nav-h` down from the page top, which is exactly where the
   fixed nav's own bottom edge sits. No separate margin/padding was added
   to close that gap because the existing padding-top already closes it
   precisely - adding another rule on top of it would have introduced the
   very gap this is trying to avoid. */
@media (max-width: 640px) and (orientation: portrait) {
  .hero {
    height: auto;
    min-height: 0;
    display: block;
  }

  .hero-bg {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .hero-video {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center center;
  }

  /* The dark cinematic gradient is what desktop uses to keep text readable
     OVER the video - with nothing rendered over the video here, it would
     only dim the video itself for no reason, so it is removed rather than
     adjusted. */
  .hero-overlay {
    display: none;
  }

  /* No longer a positioned overlay sitting on the video - a normal block
     that flows below it, with its own top spacing so the text reads as a
     deliberate section rather than crowding the video. */
  .hero-content {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    padding-inline: var(--px);
    padding-top: 28px;
  }
}

/* ── 480px ──────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .sys-canvas { max-width: 280px; }
  .node-label { font-size: 7px; max-width: 54px; letter-spacing: 0.6px; }
}

/* ============================================================================
   PREFERS-REDUCED-MOTION (carousel + dissolve + scroll)
   System SVG reduced-motion is handled in the System CSS block above.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Carousels: stop entirely */
  .carousel-track--left,
  .carousel-track--right {
    animation-play-state: paused;
  }
  /* Dissolve: show before static */
  .img-before {
    animation: none;
    opacity: 1;
  }
  /* Smooth scrolling off */
  html { scroll-behavior: auto; }
}

/* =============================================================================
   CARTFLY INTEGRATION — everything below this line is added by the CartFly
   theme conversion, not part of the original PeakPhorm static site. Kept in
   its own block so the boundary between "the client's design" and "CartFly
   plumbing" stays obvious to a future editor.
   ============================================================================= */

/* ── Real CartFly cart icon in the nav ────────────────────────────────────────
   Sits after .nav-cta as an ordinary flex item, so it takes the same
   right-aligned position without touching the existing nav-inner layout. */
.nav-cart {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  flex: none;
  margin-left: 4px;
}
.nav-cart .cf-cart-badge { padding: 0; }
.nav-cart svg { width: 20px; height: 20px; }
.nav-cart .cf-cart-badge__count {
  background: var(--text);
  color: #000;
}

@media (max-width: 960px) {
  /* The hamburger menu takes over nav-links/nav-cta at this width (see the
     site's own rule above); the cart stays visible next to the toggle so an
     authenticated customer can always reach it without opening the menu. */
  .nav-cart { margin-left: 12px; }
}

/* ── Homepage full-bleed content ──────────────────────────────────────────────
   CartFly's shared layout wraps @yield('content') in .cf-container (needed
   so inherited pages like /products and /cart keep the default theme's
   spacing) and .cf-main (which adds vertical padding around that content).
   The PeakPhorm homepage sections are full-viewport-width by design, so on
   the home route only, both are neutralised and the sections themselves
   break out of the max-width container. */
body.pp-home .cf-main { padding: 0; min-height: 0; }
body.pp-home .cf-container { max-width: none; padding: 0; margin: 0; }

/* ── Inherited CartFly pages (products, cart, checkout, account, auth) ───────
   These keep the default theme's Blade templates and layout mechanics
   (grid, spacing, form structure) but are reskinned here to belong to the
   same black/white PeakPhorm site rather than looking like a bolted-on
   admin panel. */

body:not(.pp-home) {
  background: var(--bg);
  padding-top: var(--nav-h);
}

body:not(.pp-home) .cf-main { color: var(--text); }

body:not(.pp-home) h1,
body:not(.pp-home) h2,
body:not(.pp-home) h3 {
  font-family: var(--font-display);
  letter-spacing: 0.5px;
  color: var(--text);
}

body:not(.pp-home) .cf-muted,
body:not(.pp-home) .cf-hint,
body:not(.pp-home) .cf-footer,
body:not(.pp-home) .cf-price--was {
  color: var(--muted);
}

body:not(.pp-home) .cf-panel,
body:not(.pp-home) .cf-checkout__summary,
body:not(.pp-home) .cf-cart-summary,
body:not(.pp-home) .cf-wall__panel {
  background: var(--bg-2);
  border-color: var(--border);
}

body:not(.pp-home) .cf-line,
body:not(.pp-home) .cf-cart-line,
body:not(.pp-home) .cf-checkout__line,
body:not(.pp-home) .cf-account-nav,
body:not(.pp-home) .cf-table th,
body:not(.pp-home) .cf-table td,
body:not(.pp-home) .cf-cart-table th,
body:not(.pp-home) .cf-cart-table td,
body:not(.pp-home) .cf-checkout__totals-row--grand,
body:not(.pp-home) .cf-order-row,
body:not(.pp-home) .cf-header,
body:not(.pp-home) .cf-footer {
  border-color: var(--border);
}

body:not(.pp-home) .cf-card__media,
body:not(.pp-home) .cf-cart-line__media {
  background: var(--bg-3);
}

body:not(.pp-home) .cf-button {
  background: #fff;
  color: #000;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 980px;
}
body:not(.pp-home) .cf-button:hover { opacity: .85; }

body:not(.pp-home) .cf-button--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-lg);
}
body:not(.pp-home) .cf-button--secondary:hover { background: var(--bg-2); }

body:not(.pp-home) input[type="text"],
body:not(.pp-home) input[type="email"],
body:not(.pp-home) input[type="password"],
body:not(.pp-home) input[type="tel"],
body:not(.pp-home) input[type="search"],
body:not(.pp-home) input[type="number"],
body:not(.pp-home) select,
body:not(.pp-home) textarea {
  background: var(--bg-2);
  border-color: var(--border-lg);
  color: var(--text);
}

body:not(.pp-home) .cf-tag {
  background: var(--bg-3);
  border-color: var(--border);
  color: var(--text);
}

body:not(.pp-home) .cf-alert--ok { background: rgba(255,255,255,0.06); color: var(--text); border-color: var(--border-lg); }
body:not(.pp-home) .cf-alert--warn { background: rgba(255,255,255,0.06); color: var(--text); border-color: var(--border-lg); }

/* Flash messages rendered on the full-bleed homepage (rare, but the include
   is unconditional) - keep them legible against the black background. */
body.pp-home .cf-alert {
  max-width: var(--max-w);
  margin: var(--nav-h) auto 0;
  background: var(--bg-2);
  color: var(--text);
  border-color: var(--border-lg);
}

/* --- Promo bar --------------------------------------------------------
   Merchant-configured announcement. Display only.

   The track holds the message twice when scrolling, and the animation
   translates it by exactly -50% so the second copy arrives where the first
   began - that is what makes the loop seamless rather than jumping. The
   duplicate is aria-hidden, so a screen reader hears the message once.

   Reduced motion pins it static instead of hiding it: the message is
   content, and someone who dislikes movement still wants to read it. */

.cf-promo {
    background: var(--cf-accent);
    color: var(--cf-accent-text);
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    /* Contains the moving track: without this the page scrolls sideways. */
    overflow: hidden;
}

.cf-promo__inner {
    display: block;
    padding: 0.55rem 1rem;
    color: inherit;
    text-align: center;
}

.cf-promo__cta {
    margin-left: 0.5rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.cf-promo--scrolling .cf-promo__inner {
    text-align: left;
    white-space: nowrap;
}

.cf-promo--scrolling .cf-promo__track {
    display: inline-flex;
    /* Two copies, so -50% lands the second exactly where the first started. */
    animation: cf-promo-scroll 24s linear infinite;
    will-change: transform;
}

.cf-promo--scrolling .cf-promo__item {
    padding-right: 3rem;
}

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

@media (prefers-reduced-motion: reduce) {
    .cf-promo--scrolling .cf-promo__track {
        animation: none;
    }

    .cf-promo--scrolling .cf-promo__inner {
        text-align: center;
        white-space: normal;
    }

    /* The duplicate exists only to make movement seamless; with no movement
       it would just read twice. */
    .cf-promo--scrolling .cf-promo__item[aria-hidden="true"] {
        display: none;
    }
}