/* ==========================================================================
   VELOCITY ZONE — Design Tokens & Base (Dark / Red, Jeton-inspired)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,340;0,9..144,440;0,9..144,560;1,9..144,440;1,9..144,560&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --bg: #08090A;
  --bg-alt: #0D0F11;
  --surface: #131518;
  --surface-2: #1A1D21;
  --surface-light: #F3EFEC;

  --text: #FBFAF9;
  --text-muted: #A7A6A8;
  --text-dark: #14100F;
  --text-dark-muted: #5A5654;

  --border: rgba(251,250,249,0.08);
  --border-strong: rgba(251,250,249,0.16);

  --red-900: #2E0707;
  --red-700: #6E0F10;
  --red-600: #9C1418;
  --red-500: #C81E1E;
  --red-400: #E8342B;
  --red-300: #FF5C4D;
  --red-glow: rgba(200,20,20,.45);

  --danger: #FF5C4D;
  --success: #3FA66B;

  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-serif: 'Fraunces', serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --container: 1200px;
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --radius-full: 999px;

  --ease-premium: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 800ms;

  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 12px 32px rgba(0,0,0,.45);
  --shadow-lg: 0 30px 70px rgba(0,0,0,.55);
  --shadow-red: 0 10px 32px rgba(200,20,20,.35);
  --shadow-red-lg: 0 24px 64px rgba(200,20,20,.4);

  color-scheme: dark;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg{ display:block; max-width: 100%; }
img{ height:auto; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
button{ font-family: inherit; }
input, textarea, select{ font-family: inherit; font-size: 1rem; }

h1,h2,h3,h4{
  font-weight: 700;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
h1,h2{
  font-family: var(--font-serif);
  font-weight: 480;
  letter-spacing: -0.006em;
  line-height: 1.06;
}
h3,h4{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.eyebrow{
  display:inline-flex; align-items:center; gap: var(--space-2);
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-300);
  font-weight: 700;
}
.eyebrow::before{
  content:"";
  width: 24px; height: 2px;
  border-radius: 2px;
  background: var(--red-500);
  display:inline-block;
}

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (min-width: 768px){ .container{ padding-inline: var(--space-7); } }

section{ position: relative; }
.section-pad{ padding-block: var(--space-9); }
@media (max-width: 640px){ .section-pad{ padding-block: var(--space-8); } }

.section-head{
  max-width: 640px;
  margin-bottom: var(--space-8);
}
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  margin-top: var(--space-3);
}
.section-head p{
  color: var(--text-muted);
  font-size: 1.1rem;
  margin-top: var(--space-4);
}

.text-red{ color: var(--red-400); }

:focus-visible{
  outline: 2px solid var(--red-400);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link{
  position:absolute; left: var(--space-4); top: -60px;
  background: var(--red-500); color: #fff;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm);
  font-weight: 700; z-index: 999; transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top: var(--space-4); }

/* ==========================================================================
   Cursor-reactive ambient glow (desktop, fine pointers only)
   ========================================================================== */
.glow-surface{ position:relative; overflow:hidden; }
.glow-surface::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(620px circle at var(--gx,50%) var(--gy,50%), rgba(200,20,20,.22), transparent 62%);
  opacity:0;
  transition: opacity 600ms ease;
  pointer-events:none;
  z-index:0;
}
.glow-surface.glow-active::before{ opacity:1; }
.glow-surface > .container{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){ .glow-surface::before{ display:none; } }

/* ==========================================================================
   Buttons — pill shaped, Jeton style
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 16px 32px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn svg{ width: 18px; height: 18px; flex-shrink:0; }
.btn:active{ transform: scale(.96); }
.btn-primary{
  background: linear-gradient(135deg, var(--red-400), var(--red-600));
  color: #fff;
  box-shadow: var(--shadow-red);
  position:relative;
  overflow:hidden;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-red-lg); }
.btn-primary::before{
  content:"";
  position:absolute; top:0; left:-65%; width:35%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg);
  transition: left 700ms var(--ease-out);
}
.btn-primary:hover::before{ left:130%; }
@media (prefers-reduced-motion: reduce){ .btn-primary::before{ transition:none; left:-65%; } }
.btn-ghost{
  background: rgba(251,250,249,0.04);
  color: var(--text);
  border-color: var(--border-strong);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover{ border-color: var(--red-400); color: var(--red-300); transform: translateY(-2px); }
.btn-light{
  background: var(--surface-light);
  color: var(--text-dark);
}
.btn-light:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none !important; }

a, button, input[type="submit"], .accordion-trigger, .dot{ cursor:pointer; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position: fixed; inset-inline:0; top:0; z-index: 100;
  padding-block: var(--space-5);
  transition: padding var(--dur-med) var(--ease-premium), background-color var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium), backdrop-filter var(--dur-med) var(--ease-premium);
}
.site-header.is-scrolled{
  padding-block: var(--space-3);
  background: rgba(8,9,10,.8);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--border), var(--shadow-sm);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-5); }

.logo{
  display:flex; align-items:center; gap: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em;
}
.logo img{ height: 34px; width:auto; transition: transform 400ms var(--ease-premium); }
.logo:hover img{ transform: rotate(-8deg) scale(1.08); }
.logo .word-2{ color: var(--red-400); }

.nav-desktop{ display:none; }
@media (min-width: 1180px){
  .nav-desktop{ display:flex; align-items:center; gap: var(--space-6); }
  .nav-desktop a{
    font-size: .95rem; font-weight:600; color: var(--text-muted);
    position:relative; padding-block: 4px;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .nav-desktop a::after{
    content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px;
    border-radius: 2px;
    background: var(--red-400);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 320ms cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }
  .nav-desktop a:hover{ color: var(--text); }
  .nav-desktop a:hover::after, .nav-desktop a.active::after{ transform: scaleX(1); }
  .nav-desktop a.active{ color: var(--text); }
}

.header-cta{ display:none; }
@media (min-width: 1180px){ .header-cta{ display:inline-flex; } }

.nav-toggle{
  display:flex; align-items:center; justify-content:center;
  width: 46px; height:46px; border-radius: 50%;
  background: var(--surface); border:1px solid var(--border-strong);
  color: var(--text);
}
@media (min-width: 1180px){ .nav-toggle{ display:none; } }
.nav-toggle svg{ width:20px; height:20px; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

.nav-mobile{
  position: fixed; inset: 0; top:0; z-index: 90;
  background: #08090A;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--space-6);
  opacity:0; visibility:hidden; transform: translateY(-12px);
  transition: opacity var(--dur-med) var(--ease-premium), transform var(--dur-med) var(--ease-premium), visibility var(--dur-med);
}
.nav-mobile.is-open{ opacity:1; visibility:visible; transform:none; }
.nav-mobile a{ font-family: var(--font-display); font-size: 2rem; font-weight:700; }
.nav-mobile a:hover{ color: var(--red-400); }
@media (min-width: 1180px){ .nav-mobile{ display:none; } }

/* ==========================================================================
   Hero — dark canvas + floating kit visual (Jeton "floating card" analogue)
   ========================================================================== */
.hero{
  min-height: 100svh;
  display:flex; align-items:center;
  padding-top: 120px;
  padding-bottom: var(--space-8);
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 82% 18%, rgba(200,20,20,.28), transparent 65%),
    radial-gradient(45% 50% at 12% 85%, rgba(200,20,20,.14), transparent 70%),
    var(--bg);
}
.hero-grid{
  display:grid; grid-template-columns: minmax(0,1fr); gap: var(--space-8);
  align-items:center;
}
@media (min-width: 1024px){
  .hero-grid{ grid-template-columns: 1.05fr .95fr; gap: var(--space-6); }
}

.hero-inner{ max-width: 640px; }
.hero-inner .eyebrow{ margin-bottom: var(--space-4); }
.hero h1{
  font-size: clamp(2.6rem, 6.6vw, 4.6rem);
  color: var(--text);
}
.hero h1 .accent{
  font-style: italic;
  font-weight: 560;
  color: var(--red-400);
}
.hero p.lede{
  margin-top: var(--space-5);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--text-muted);
  max-width: 50ch;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap: var(--space-4); margin-top: var(--space-7); }

.hero-stats{
  display:grid; grid-template-columns: repeat(3, auto);
  gap: var(--space-7);
  margin-top: var(--space-9);
  border-top: 1px solid var(--border);
  padding-top: var(--space-6);
  max-width: 560px;
}
@media (max-width: 560px){
  .hero-stats{ grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-4); }
}
.hero-stats .num{
  font-family: var(--font-display); font-size: clamp(1.7rem,3.2vw,2.4rem);
  color: var(--text); font-weight:800; display:flex; align-items:baseline; gap:2px;
}
.hero-stats .num .plus{ color: var(--red-400); font-size: 1.3rem; }
.hero-stats .label{ font-size: .82rem; color: var(--text-muted); margin-top:4px; }

.hero-visual{
  position: relative;
  display:flex; align-items:center; justify-content:center;
  min-height: 420px;
  margin-top: -56px;
}
@media (max-width: 1023px){ .hero-visual{ margin-top: -24px; } }
.hero-visual .glow{
  position:absolute; width: 70%; aspect-ratio:1/1; border-radius:50%;
  background: radial-gradient(circle, rgba(200,20,20,.45), rgba(200,20,20,0) 70%);
  filter: blur(10px);
  animation: pulse-glow 5s ease-in-out infinite;
}
@keyframes pulse-glow{
  0%, 100%{ transform: scale(1); opacity:.85; }
  50%{ transform: scale(1.12); opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .hero-visual .glow{ animation:none; } }

.hero-visual .kit-tilt{
  position: relative;
  max-width: 360px;
  width: 78%;
  transition: transform 400ms var(--ease-out);
  will-change: transform;
}
.hero-visual .kit-float{
  width: 100%;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.6));
  animation: kit-float 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes kit-float{
  0%, 100%{ transform: translateY(0) rotate(-2deg); }
  50%{ transform: translateY(-22px) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce){ .hero-visual .kit-float{ animation:none; } }

.hero-visual .streak{
  position:absolute; background: linear-gradient(180deg, transparent, var(--red-500), transparent);
  width: 2px; opacity:.5;
}
.hero-visual .streak.s1{ height: 260px; top: -40px; left: 18%; transform: rotate(18deg); }
.hero-visual .streak.s2{ height: 200px; bottom: -20px; right: 14%; transform: rotate(-16deg); }

.scroll-cue{
  position:absolute; bottom: var(--space-6); left: 50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color: var(--text-muted); font-size: .76rem; letter-spacing: .12em; text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:34px; background: linear-gradient(var(--red-400), transparent); animation: scroll-cue 1.8s ease-in-out infinite; }
@keyframes scroll-cue{ 0%{ transform: scaleY(0); transform-origin: top;} 50%{ transform: scaleY(1); transform-origin: top;} 50.01%{ transform-origin: bottom;} 100%{ transform: scaleY(0); transform-origin: bottom;} }
@media (prefers-reduced-motion: reduce){ .scroll-cue .line{ animation:none; } }
@media (max-width: 900px){ .scroll-cue{ display:none; } }

/* ==========================================================================
   Marquee strip
   ========================================================================== */
.marquee{
  border-block: 1px solid var(--border);
  background: var(--bg-alt);
  padding-block: var(--space-4);
  overflow:hidden;
}
.marquee-track{
  display:flex; gap: var(--space-8); width:max-content;
  animation: marquee 26s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; flex-wrap:wrap; } }
.marquee span{
  font-family: var(--font-display); font-size: .95rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--text-muted); display:flex; align-items:center; gap: var(--space-8);
  white-space:nowrap; font-weight:700; line-height:1;
}
.marquee span::after{
  content:"";
  display:block;
  flex-shrink:0;
  width: 7px; height: 7px;
  margin-left: var(--space-8);
  background: linear-gradient(135deg, var(--red-300), var(--red-600));
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(200,20,20,.55);
}
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ==========================================================================
   Full-bleed red statement sections (Jeton color-block panels)
   ========================================================================== */
.statement{
  background: linear-gradient(155deg, var(--red-600), var(--red-700) 60%, #4a0b0c);
  color: #fff;
  padding-block: var(--space-10);
  text-align:center;
  overflow:hidden;
  position:relative;
}
.statement::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.12), transparent 70%);
  pointer-events:none;
}
.statement h2{
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  color:#fff;
  max-width: 16ch;
  margin-inline:auto;
  line-height:1.05;
}
.statement p{
  color: rgba(255,255,255,.82);
  font-size: 1.1rem;
  max-width: 46ch;
  margin: var(--space-5) auto 0;
}
.statement .btn-light{ margin-top: var(--space-7); }

/* ==========================================================================
   Reveal utility (JS controlled)
   ========================================================================== */
.reveal{
  opacity:0; transform: translateY(28px);
  transition: opacity 900ms var(--ease-premium), transform 900ms var(--ease-premium);
  will-change: transform, opacity;
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay: calc(var(--i,0) * 90ms); }

/* Editorial "curtain wipe" reveal for headlines — distinct from the default fade+rise.
   The clip-path lives on an INNER span, never on the observed .reveal element itself —
   IntersectionObserver treats a fully clip-path-hidden target as having zero intersection
   area, so it would never fire if the mask sat on the observed element directly. */
.reveal.reveal-mask{ opacity:1; transform:none; }
.reveal-mask .mask-inner{
  display:block;
  clip-path: inset(0 100% -0.2em 0);
  transition: clip-path 900ms var(--ease-premium);
}
.reveal-mask.is-visible .mask-inner{ clip-path: inset(0 0 -0.2em 0); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .mask-inner{ clip-path: none !important; }
}

/* Per-context entrance variety — same on/off switch (.is-visible), different motion signature */
.feature-card.reveal{ transform: translateY(22px) scale(.94); }
.feature-card.reveal.is-visible{ transform:none; }

.step.reveal{ transform: translateX(-28px); }
.step.reveal.is-visible{ transform:none; }

.pricing-grid{ perspective: 1400px; }
.price-card.reveal{ transform: translateY(26px) rotateX(8deg); transform-origin: top center; }
.price-card.reveal.is-visible{ transform:none; }

.player-card.reveal{ transform: translateY(30px) rotate(-2.5deg) scale(.95); }
.player-card.reveal.is-visible{ transform:none; }

/* ==========================================================================
   About
   ========================================================================== */
.about{ background: var(--bg); }
.about-grid{
  display:grid; gap: var(--space-8); align-items:center;
  grid-template-columns: minmax(0,1fr);
}
@media (min-width: 900px){ .about-grid{ grid-template-columns: .85fr 1fr; gap: var(--space-9); } }

.about-media{ position:relative; display:flex; justify-content:center; }
.about-media .cutout-stage{
  position:relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4/5;
  display:flex; align-items:flex-end; justify-content:center;
}
.about-media .cutout-stage::before{
  content:"";
  position:absolute; width: 90%; height: 60%; bottom: 6%;
  background: radial-gradient(ellipse, rgba(200,20,20,.4), transparent 70%);
  filter: blur(6px);
  z-index:0;
}
.about-media img{
  position:relative; z-index:1;
  max-height: 100%; width:auto; margin-inline:auto;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.55));
}
.about-media .badge-card{
  position:absolute; left:-10px; bottom: 4%;
  background: linear-gradient(165deg, rgba(28,32,37,.85), rgba(8,9,10,.92));
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-lg), 0 0 32px rgba(200,20,20,.18);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  display:flex; align-items:center; gap: var(--space-4);
  max-width: 260px;
  z-index:2;
  overflow:hidden;
  transition: transform 400ms var(--ease-premium), box-shadow 400ms var(--ease-premium);
}
.about-media .badge-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg), 0 0 40px rgba(200,20,20,.3); }
.about-media .badge-card::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:2px;
  background: linear-gradient(90deg, transparent, var(--red-400), transparent);
}
@media (max-width: 480px){ .about-media .badge-card{ left:4px; padding: var(--space-4); } }

/* Mobile-only: Safari/WebKit can fail to resolve max-height:100% on a flex
   child whose container's height comes only from aspect-ratio, leaving the
   image at 0 height. Switch to absolute+object-fit sizing (no percentage-
   height-in-flex dependency) below the desktop breakpoint only. */
@media (max-width: 899px){
  .about-media .cutout-stage{ display:block; }
  .about-media img{
    position:absolute; inset:0;
    max-height:none; width:100%; height:100%;
    object-fit:contain; object-position:bottom center;
  }
}
.about-media .badge-card .ico{
  width:46px; height:46px; border-radius:50%;
  background: linear-gradient(135deg, var(--red-400), var(--red-600));
  color: #fff;
  box-shadow: 0 8px 22px rgba(200,20,20,.45);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: transform 400ms var(--ease-premium);
}
.about-media .badge-card:hover .ico{ transform: scale(1.12) rotate(10deg); }
.about-media .badge-card strong{ display:block; font-family: var(--font-display); font-size:1.1rem; font-weight:800; color: var(--text); }
.about-media .badge-card span{ font-size:.85rem; color: var(--text-muted); }

.credentials{ display:flex; flex-wrap:wrap; gap: var(--space-3); margin-top: var(--space-6); }
.credential-pill{
  display:inline-flex; align-items:center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-full); font-size: .88rem; color: var(--text-muted);
  transition: transform var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium);
}
.credential-pill:hover{ transform: translateY(-2px); border-color: var(--red-400); color: var(--text); }
.credential-pill svg{ width:16px; height:16px; color: var(--red-400); transition: transform var(--dur-fast) var(--ease-premium); }
.credential-pill:hover svg{ transform: scale(1.15); }

/* ==========================================================================
   Approach / Features
   ========================================================================== */
.approach{ background: var(--bg-alt); }
.feature-grid{
  display:grid; gap: var(--space-5);
  grid-template-columns: minmax(0,1fr);
}
@media (min-width: 640px){ .feature-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1080px){ .feature-grid{ grid-template-columns: repeat(4,1fr); } }

.feature-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--dur-med) var(--ease-premium), border-color var(--dur-med) var(--ease-premium), background-color var(--dur-med) var(--ease-premium);
}
.feature-card:hover{ transform: translateY(-6px); border-color: var(--red-600); background: var(--surface-2); }
.feature-card .ico{
  width:52px; height:52px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(200,20,20,.24), rgba(200,20,20,.04));
  color: var(--red-400);
  display:flex; align-items:center; justify-content:center; margin-bottom: var(--space-5);
  transition: transform 400ms var(--ease-premium);
}
.feature-card:hover .ico{ transform: scale(1.1) rotate(-6deg); }
.feature-card .ico svg{ width:26px; height:26px; }
.feature-card h3{ font-size:1.3rem; margin-bottom: var(--space-2); font-weight:700; }
.feature-card p{ color: var(--text-muted); font-size:.98rem; }

/* ==========================================================================
   Process / Steps
   ========================================================================== */
.process{ background: var(--bg); }
.step-list{
  display:grid; gap: var(--space-6);
  grid-template-columns: minmax(0,1fr);
  counter-reset: step;
}
@media (min-width: 860px){ .step-list{ grid-template-columns: repeat(4,1fr); } }
.step{
  position:relative; padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  transition: border-color 400ms var(--ease-premium);
}
.step:hover{ border-top-color: var(--red-500); }
.step::before{
  counter-increment: step; content: counter(step,decimal-leading-zero);
  font-family: var(--font-display); font-size: 2.6rem; color: transparent;
  -webkit-text-stroke: 1.5px var(--red-400);
  display:block; margin-bottom: var(--space-4); font-weight: 800;
  transition: color 400ms var(--ease-premium);
}
.step:hover::before{ color: var(--red-400); }
.step h3{ font-size: 1.2rem; margin-bottom: var(--space-2); font-weight:700; }
.step p{ color: var(--text-muted); font-size: .95rem; }

/* ==========================================================================
   Nasi Zawodnicy — player showcase (character-card style)
   ========================================================================== */
.roster{ background: var(--bg-alt); overflow: hidden; }
.roster-grid{
  display:grid; gap: var(--space-6);
  grid-template-columns: minmax(0,1fr);
}
@media (min-width: 720px){ .roster-grid{ grid-template-columns: repeat(3,1fr); } }

.player-card{
  position:relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border: 1px solid var(--border);
  overflow: hidden;
  padding-top: var(--space-6);
  display:flex; flex-direction:column; align-items:center;
  transition: transform var(--dur-med) var(--ease-premium), border-color var(--dur-med) var(--ease-premium);
}
.player-card:hover{ transform: translateY(-8px); border-color: var(--red-600); }
.player-card .glow-behind{
  position:absolute; top: 10%; left:50%; transform:translateX(-50%);
  width: 70%; aspect-ratio: 1/1; border-radius:50%;
  background: radial-gradient(circle, rgba(200,20,20,.38), transparent 72%);
  filter: blur(4px);
  z-index:0;
}
.player-card img{
  position:relative; z-index:1;
  width: 82%; max-width: 260px;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  object-position: top center;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.6));
  transition: transform var(--dur-med) var(--ease-premium);
}
.player-card:hover img{ transform: translateY(-6px) scale(1.02); }
.player-card .player-info{
  position:relative; z-index:1;
  width:100%; text-align:center;
  padding: var(--space-5) var(--space-5) var(--space-6);
  margin-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.player-card .player-info strong{ display:block; font-family: var(--font-display); font-size:1.15rem; font-weight:700; }
.player-card .player-info span{ font-size:.85rem; color: var(--text-muted); }
.player-card .num-badge{
  position:absolute; top: var(--space-4); right: var(--space-4); z-index:2;
  font-family: var(--font-display); font-weight:800; font-size:.85rem;
  color: var(--red-300); border: 1px solid var(--red-700); border-radius: var(--radius-full);
  padding: 4px 12px; background: rgba(200,20,20,.08);
}

/* ==========================================================================
   Offer / Pricing
   ========================================================================== */
.offer{ background: var(--bg); }
.pricing-group{ margin-bottom: var(--space-9); }
.pricing-group:last-of-type{ margin-bottom: var(--space-7); }
.pricing-group-title{
  font-size: 1.3rem; font-weight: 700;
  color: var(--text); margin-bottom: var(--space-6);
  display:flex; align-items:center; gap: var(--space-4);
}
.pricing-group-title::after{
  content:""; flex:1; height:1px; background: var(--border);
}
.pricing-grid{
  display:grid; gap: var(--space-6);
  grid-template-columns: minmax(0,1fr);
}
@media (min-width: 860px){ .pricing-grid{ grid-template-columns: repeat(3,1fr); align-items:stretch; } }
@media (min-width: 860px) and (max-width: 1119px){ .pricing-grid.pricing-grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1120px){ .pricing-grid.pricing-grid-4{ grid-template-columns: repeat(4,1fr); } }

.price-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  display:flex; flex-direction:column;
  transition: transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium), border-color var(--dur-med) var(--ease-premium);
}
.price-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-md); }
.price-card.is-featured{
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border-color: var(--red-600);
  box-shadow: var(--shadow-red);
  position:relative;
}
@media (min-width: 860px){ .price-card.is-featured{ transform: scale(1.04); } .price-card.is-featured:hover{ transform: scale(1.04) translateY(-8px); } }
.price-card.is-featured::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(120deg, transparent 15%, var(--red-300) 50%, transparent 85%);
  background-size: 260% 260%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: shimmer-sweep 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shimmer-sweep{
  0%, 100%{ background-position: 0% 0%; }
  50%{ background-position: 100% 100%; }
}
@media (prefers-reduced-motion: reduce){ .price-card.is-featured::after{ animation:none; } }
.price-card .ribbon{
  position:absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--red-400), var(--red-600)); color: #fff;
  font-family: var(--font-display); font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding: 6px 18px; border-radius: var(--radius-full); box-shadow: var(--shadow-sm);
}
.price-card h3{ font-size: 1.4rem; font-weight:700; }
.price-card .desc{ color: var(--text-muted); font-size: .92rem; margin-top: var(--space-2); min-height: 42px; }
.price-card .price{
  display:flex; align-items:baseline; flex-wrap:wrap; gap: var(--space-2);
  margin-top: var(--space-6); margin-bottom: var(--space-4);
  font-family: var(--font-display);
}
.price-card .price .amount{ font-size: 2.7rem; font-weight:800; color: var(--text); white-space:nowrap; }
.price-card .price .unit{ color: var(--text-muted); font-size: .95rem; }
.price-card .price-per-unit{
  font-size: .82rem; color: var(--text-muted);
  margin: -8px 0 var(--space-5);
}
.price-card .price-per-unit strong{ color: var(--red-300); font-weight:700; }
.price-card .features{ display:flex; flex-direction:column; gap: var(--space-3); margin-bottom: var(--space-7); flex-grow:1; }
.price-card .features li{ display:flex; align-items:flex-start; gap: var(--space-3); font-size: .95rem; color: var(--text); }
.price-card .features svg{ width:18px; height:18px; color: var(--red-400); flex-shrink:0; margin-top:2px; }
.price-note{ text-align:center; color: var(--text-muted); font-size:.9rem; margin-top: var(--space-6); }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials{ background: var(--bg-alt); }
.testi-single{ max-width: 640px; margin-inline:auto; }
.testi-single .testi-card{ flex-basis:auto; }
.testi-viewport{ overflow:hidden; }
.testi-track{
  display:flex; gap: var(--space-6);
  transition: transform var(--dur-slow) var(--ease-premium);
}
.testi-card{
  flex: 0 0 100%;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  transition: transform 400ms var(--ease-premium), border-color 400ms var(--ease-premium), box-shadow 400ms var(--ease-premium);
}
.testi-card:hover{ transform: translateY(-6px); border-color: var(--red-600); box-shadow: var(--shadow-md); }
@media (min-width: 760px){ .testi-card{ flex-basis: calc(50% - 16px); } }
.testi-stars{ display:flex; gap:4px; color: var(--red-400); margin-bottom: var(--space-4); }
.testi-stars svg{ width:18px; height:18px; transition: transform 300ms var(--ease-premium); }
.testi-card:hover .testi-stars svg{ transform: scale(1.15); }
.testi-stars svg:nth-child(1){ transition-delay: 0ms; }
.testi-stars svg:nth-child(2){ transition-delay: 40ms; }
.testi-stars svg:nth-child(3){ transition-delay: 80ms; }
.testi-stars svg:nth-child(4){ transition-delay: 120ms; }
.testi-stars svg:nth-child(5){ transition-delay: 160ms; }
.testi-card p.quote{ font-size: 1.1rem; color: var(--text); margin-bottom: var(--space-6); }
.testi-person{ display:flex; align-items:center; gap: var(--space-4); }
.testi-person .avatar{
  width:52px; height:52px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:800; font-size:1.05rem; color: var(--red-400);
}
.testi-person .avatar img{ width:100%; height:100%; object-fit:cover; }
.testi-person strong{ display:block; font-family: var(--font-display); font-size:1.05rem; font-weight:700; }
.testi-person span{ font-size:.85rem; color: var(--text-muted); }

.testi-controls{ display:flex; align-items:center; justify-content:center; gap: var(--space-5); margin-top: var(--space-7); }
.testi-arrow{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; color: var(--text);
  transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
  background:transparent;
}
.testi-arrow:hover{ border-color: var(--red-400); color: var(--red-300); transform: translateY(-2px); }
.testi-arrow svg{ width:18px; height:18px; }
.testi-dots{ display:flex; gap: var(--space-2); }
.testi-dots .dot{ width:8px; height:8px; border-radius:50%; background: var(--border-strong); border:none; padding:0; transition: background var(--dur-fast), width var(--dur-fast); }
.testi-dots .dot.is-active{ background: var(--red-400); width:22px; border-radius: var(--radius-full); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ background: var(--bg-alt); }
.faq-list{ max-width: 820px; margin-inline:auto; display:flex; flex-direction:column; gap: var(--space-3); }
.accordion-item{ border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow:hidden; }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--space-4);
  background:none; border:none; color: var(--text); text-align:left;
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display); font-size: 1.1rem; font-weight:700;
}
.accordion-trigger .chev{ flex-shrink:0; width:22px; height:22px; color: var(--red-400); transition: transform var(--dur-med) var(--ease-premium); }
.accordion-trigger[aria-expanded="true"] .chev{ transform: rotate(180deg); }
.accordion-panel{
  display:grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-med) var(--ease-premium);
}
.accordion-panel > div{ overflow:hidden; }
.accordion-item.is-open .accordion-panel{ grid-template-rows: 1fr; }
.accordion-panel p{ padding: 0 var(--space-6) var(--space-5); color: var(--text-muted); }

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta-banner{
  background: linear-gradient(120deg, var(--surface-2), var(--bg-alt));
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding-block: var(--space-9);
  position:relative; overflow:hidden;
}
.cta-banner::before{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  background: radial-gradient(circle, rgba(200,20,20,.2), transparent 70%);
  top:-220px; right:-160px; pointer-events:none;
}
.cta-banner-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: var(--space-7); }
.cta-banner h2{ font-size: clamp(2rem,4vw,2.8rem); max-width: 560px; }
.cta-banner-actions{ display:flex; gap: var(--space-4); flex-wrap:wrap; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{ background: var(--bg); }
.contact-grid{ display:grid; gap: var(--space-8); grid-template-columns: minmax(0,1fr); }
@media (min-width: 960px){ .contact-grid{ grid-template-columns: .9fr 1.1fr; } }

.contact-info-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-7);
}
.contact-info-card h3{ font-size: 1.5rem; margin-bottom: var(--space-2); font-weight:700; }
.contact-info-card > p{ color: var(--text-muted); margin-bottom: var(--space-6); }
.contact-line{ display:flex; align-items:flex-start; gap: var(--space-4); padding-block: var(--space-4); border-top:1px solid var(--border); }
.contact-line:first-of-type{ border-top:none; }
.contact-line .ico{
  width:44px; height:44px; border-radius:50%; background: rgba(200,20,20,.14); color: var(--red-400);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-line .ico svg{ width:20px; height:20px; }
.contact-line strong{ display:block; font-size:.95rem; margin-bottom: 4px; }
.contact-line span, .contact-line a{ color: var(--text-muted); font-size:.92rem; }
.contact-line a:hover{ color: var(--red-400); }
.social-row{ display:flex; gap: var(--space-3); margin-top: var(--space-6); }
.social-row a{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.social-row a svg{ width:18px; height:18px; }
.social-row a:hover{ border-color: var(--red-400); color: var(--red-300); transform: translateY(-2px); }

.contact-form{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-7);
}
.form-row{ display:grid; gap: var(--space-5); grid-template-columns: minmax(0,1fr); margin-bottom: var(--space-5); }
@media (min-width: 560px){ .form-row.two{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.field{ display:flex; flex-direction:column; gap: var(--space-2); }
.field label{ font-size:.88rem; font-weight:700; color: var(--text); }
.field .req{ color: var(--red-400); }
.field input, .field select, .field textarea{
  background: var(--bg-alt); border:1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text); padding: 13px 16px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field input::placeholder, .field textarea::placeholder{ color: var(--text-muted); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--red-400); box-shadow: 0 0 0 3px rgba(200,20,20,.2);
}
.field textarea{ resize: vertical; min-height: 120px; }
.field .hint{ font-size:.8rem; color: var(--text-muted); }
.field.has-error input, .field.has-error textarea, .field.has-error select{ border-color: var(--danger); }
.field .error-msg{ font-size:.82rem; color: var(--danger); display:none; }
.field.has-error .error-msg{ display:block; }
.consent{ display:flex; align-items:flex-start; gap: var(--space-3); font-size:.85rem; color: var(--text-muted); margin-bottom: var(--space-6); }
.consent input{ margin-top:4px; accent-color: var(--red-500); width:16px; height:16px; flex-shrink:0; }
.form-status{ margin-top: var(--space-4); font-size:.92rem; display:none; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); }
.form-status.is-success{ display:block; background: rgba(63,166,107,.12); color: var(--success); }
.form-status.is-error{ display:block; background: rgba(255,92,77,.12); color: var(--danger); }

.map-embed{ border-radius: var(--radius-lg); overflow:hidden; margin-top: var(--space-6); border:1px solid var(--border); filter: grayscale(.5) invert(.92) contrast(.9) sepia(.15) hue-rotate(300deg); }
.map-embed iframe{ width:100%; height:280px; border:0; display:block; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--bg); border-top:1px solid var(--border); padding-block: var(--space-8) calc(var(--space-8) + 64px); }
.footer-grid{ display:grid; gap: var(--space-8); grid-template-columns: 1.3fr repeat(3,1fr); margin-bottom: var(--space-8); }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: minmax(0,1fr); } }
.footer-col h4{ font-family: var(--font-display); font-size:1.05rem; margin-bottom: var(--space-4); color: var(--text); font-weight:700; }
.footer-col p{ color: var(--text-muted); font-size:.92rem; max-width: 32ch; }
.footer-col ul{ display:flex; flex-direction:column; gap: var(--space-3); }
.footer-col a{ color: var(--text-muted); font-size:.92rem; transition: color var(--dur-fast); }
.footer-col a:hover{ color: var(--red-400); }
.footer-bottom{ display:flex; flex-wrap:wrap; gap: var(--space-4); align-items:center; justify-content:space-between; padding-top: var(--space-6); border-top:1px solid var(--border); color: var(--text-muted); font-size:.85rem; }

/* Floating bottom pill CTA (Jeton-style persistent nav pill) */
.pill-nav{
  position:fixed; left:50%; bottom: var(--space-5); transform: translateX(-50%); z-index:80;
  display:flex; align-items:center; gap: var(--space-3);
  background: rgba(19,21,24,.85);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-full);
  padding: 8px 8px 8px 20px;
  box-shadow: var(--shadow-lg);
  opacity:0; visibility:hidden; translate: 0 16px;
  transition: opacity var(--dur-med) var(--ease-out), translate var(--dur-med) var(--ease-out), visibility var(--dur-med);
}
.pill-nav.is-visible{ opacity:1; visibility:visible; translate: 0 0; }
.pill-nav span{ font-family: var(--font-display); font-weight:700; font-size:.92rem; white-space:nowrap; }
.pill-nav .btn{ padding: 10px 20px; font-size:.9rem; }
@media (max-width: 480px){ .pill-nav span{ display:none; } .pill-nav{ padding: 6px; } }

.whatsapp-fab{
  position:fixed; left: var(--space-5); bottom: var(--space-5); z-index:80;
  width:56px; height:56px; border-radius:50%; background:#25D366; color:#0B0D10;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 28px rgba(37,211,102,.35);
  transition: transform var(--dur-fast) var(--ease-out);
}
.whatsapp-fab:hover{ transform: scale(1.08); }
@media (max-width: 640px){
  .whatsapp-fab{
    width:50px; height:50px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med), transform var(--dur-fast) var(--ease-out);
  }
  .whatsapp-fab.is-visible{ opacity:1; visibility:visible; pointer-events:auto; }
}
.whatsapp-fab svg{ width:28px; height:28px; }

/* Scroll progress indicator */
.scroll-progress{
  position:fixed; top:0; left:0; height:2.5px; width:0%;
  background: linear-gradient(90deg, var(--red-600), var(--red-300));
  z-index: 200;
  transition: width 80ms linear;
}
@media (prefers-reduced-motion: reduce){ .scroll-progress{ transition:none; } }

/* Hero load-in stagger — pure CSS animation (no JS/rAF timing dependency,
   so it can never get stuck hidden if a class-toggle race condition occurs) */
@keyframes hero-in{
  from{ opacity:0; transform: translateY(20px); }
  to{ opacity:1; transform:none; }
}
.hero-inner > *{
  opacity:0;
  animation: hero-in 900ms var(--ease-premium) forwards;
}
.hero-inner > *:nth-child(1){ animation-delay: 60ms; }
.hero-inner > *:nth-child(2){ animation-delay: 160ms; }
.hero-inner > *:nth-child(3){ animation-delay: 260ms; }
.hero-inner > *:nth-child(4){ animation-delay: 360ms; }
.hero-inner > *:nth-child(5){ animation-delay: 460ms; }
@media (prefers-reduced-motion: reduce){
  .hero-inner > *{ animation:none; opacity:1; }
}

/* Utility */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }