:root{
    --red:#c31f2c;
    --red-dark:#7c0f19;
    --red-darker:#3d0508;
    --gold:#e3ac33;
    --ink:#0a0a0a;
  }
  html{ scroll-behavior:smooth; }
  body{font-family:'Oswald',sans-serif;background:var(--ink);}
  .font-display{font-family:'Anton',sans-serif;}
  .star i{color:var(--gold);}
  .card-shadow{box-shadow:0 10px 25px -8px rgba(0,0,0,.6);}
  .glow-shadow{box-shadow:0 0 0 1px rgba(195,31,44,.5), 0 12px 28px -10px rgba(195,31,44,.45);}

  /* ===== textured brush-stroke red background (banners) ===== */
  .brush-bg{
    position:relative;
    background-color:#6b1015;
    background-image:
      linear-gradient(114deg, transparent 0%, transparent 13%, rgba(214,60,55,.55) 17%, transparent 27%),
      linear-gradient(108deg, transparent 28%, rgba(120,15,20,.75) 33%, transparent 43%),
      linear-gradient(122deg, rgba(25,3,4,.65) 0%, transparent 18%),
      linear-gradient(100deg, transparent 58%, rgba(190,35,35,.5) 65%, transparent 76%),
      linear-gradient(96deg, transparent 78%, rgba(20,3,4,.7) 86%, transparent 94%),
      linear-gradient(135deg, var(--red-darker) 0%, var(--red-dark) 38%, #a8232a 54%, var(--red-dark) 74%, var(--red-darker) 100%);
    background-repeat:no-repeat;
    background-size:cover;
  }
  /* jagged torn top/bottom edges for brush banners */
  .torn-top::before, .torn-bottom::after{
    content:"";
    position:absolute; left:0; right:0; height:14px;
    background:
      linear-gradient(115deg, transparent 45%, var(--ink) 46%, transparent 47%),
      linear-gradient(100deg, transparent 20%, var(--ink) 21%, transparent 23%),
      linear-gradient(105deg, transparent 65%, var(--ink) 67%, transparent 69%);
    background-color:transparent;
  }
  .torn-top::before{ top:-1px; }
  .torn-bottom::after{ bottom:-1px; }

  /* section glow: subtle red bleed fading to black, used behind the clips/testimonial grid */
  .glow-fade{
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(195,31,44,.30) 0%, rgba(195,31,44,.12) 30%, rgba(10,10,10,0) 62%),
      var(--ink);
  }

  ::selection{ background:var(--red); color:#fff; }

  /* =========================================================
     ANIMATION LAYER — premium, subtle, performance-friendly
     (transform/opacity only; respects reduced-motion)
  ========================================================== */

  /* ---- scroll reveal ---- */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
  }
  .reveal.in-view{ opacity:1; transform:translateY(0); }
  .reveal-zoom{
    opacity:0;
    transform:scale(.94);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .reveal-zoom.in-view{ opacity:1; transform:scale(1); }

  /* ---- hero entrance (page-load, not scroll) ---- */
  @keyframes heroUp{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }
  .hero-in{ animation:heroUp .85s cubic-bezier(.22,.61,.36,1) both; }

  /* ---- header shrink/shadow on scroll ---- */
  header{ transition:box-shadow .35s ease, background-color .35s ease; }
  header.scrolled{ box-shadow:0 8px 24px -8px rgba(0,0,0,.55); }

  /* ---- nav underline sweep ---- */
  .nav-link{ position:relative; }
  .nav-link::after{
    content:"";
    position:absolute; left:0; bottom:-4px; height:2px; width:0%;
    background:var(--red);
    transition:width .3s ease;
  }
  .nav-link:hover::after{ width:100%; }

  /* ---- buttons: lift + shine sweep + press feedback ---- */
  .btn-anim{
    position:relative;
    overflow:hidden;
    transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, background-color .25s ease;
  }
  .btn-anim::before{
    content:"";
    position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
    pointer-events:none;
  }
  .btn-anim:hover::before{ left:130%; }
  .btn-anim:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -8px rgba(195,31,44,.55); }
  .btn-anim:active{ transform:translateY(0) scale(.97); }

  /* ---- cards: lift on hover ---- */
  .card-lift{ transition:transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease; }
  .card-lift:hover{ transform:translateY(-7px); box-shadow:0 20px 34px -12px rgba(0,0,0,.65); }

  /* ---- image zoom inside overflow-hidden frames ---- */
  .img-zoom{ transition:transform .6s cubic-bezier(.22,.61,.36,1), filter .6s ease; }
  .group:hover .img-zoom{ transform:scale(1.08); filter:brightness(1.03); }

  /* ---- play button breathing pulse ---- */
  @keyframes playPulse{
    0%{ box-shadow:0 0 0 0 rgba(255,255,255,.45); }
    70%{ box-shadow:0 0 0 14px rgba(255,255,255,0); }
    100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
  }
  .play-pulse{ animation:playPulse 2.6s ease-out infinite; }
  .play-pulse:hover{ animation-play-state:paused; transform:scale(1.12); }

  /* ---- badge icons: gentle hover pop ---- */
  .badge-hover{ transition:transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s ease, background-color .35s ease; }
  .badge-hover:hover{ transform:translateY(-4px) scale(1.06); border-color:var(--gold); background:rgba(227,172,51,.12); }

  /* ---- belt dots: premium hover + scroll sequence ---- */
  .belt-dot{ transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
  .belt-dot:hover{ transform:scale(1.12) rotate(3deg); box-shadow:0 10px 24px -5px rgba(0,0,0,.65); }

  /* Belt progression: each tyre enters from the left, then settles into its exact slot. */
  .belt-sequence-item{
    opacity:0;
    transform:translate3d(-72px, 8px, 0);
    transition:opacity .55s ease, transform .85s cubic-bezier(.16,1,.3,1);
    will-change:opacity, transform;
  }
  .belt-sequence-item.is-belt-visible{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  .belt-sequence-tyre{
    opacity:0;
    transform:translate3d(-55px,0,0) scale(.78) rotate(-18deg);
    transition:opacity .35s ease, transform .8s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
    transition-delay:.05s;
  }
  .belt-sequence-item.is-belt-visible .belt-sequence-tyre{
    opacity:1;
    transform:translate3d(0,0,0) scale(1) rotate(0deg);
  }
  .belt-sequence-label{
    opacity:0;
    transform:translateY(10px);
    transition:opacity .45s ease, transform .55s cubic-bezier(.22,.61,.36,1);
    transition-delay:.38s;
  }
  .belt-sequence-item.is-belt-visible .belt-sequence-label{
    opacity:1;
    transform:translateY(0);
  }
  @media (max-width:767px){
    .belt-sequence-item{ transform:translate3d(-42px,6px,0); }
    .belt-sequence-tyre{ transform:translate3d(-34px,0,0) scale(.82) rotate(-14deg); }
  }

  /* ---- pricing card: soft breathing glow on the border ---- */
  @keyframes goldPulse{
    0%,100%{ box-shadow:0 10px 25px -8px rgba(0,0,0,.6), 0 0 0 0 rgba(227,172,51,0); }
    50%{ box-shadow:0 10px 25px -8px rgba(0,0,0,.6), 0 0 18px 2px rgba(227,172,51,.25); }
  }
  .price-glow{ animation:goldPulse 3.6s ease-in-out infinite; }

  /* ---- social icons ---- */
  .social-anim{ transition:transform .3s cubic-bezier(.34,1.56,.64,1), background-color .3s ease; }
  .social-anim:hover{ transform:translateY(-3px) rotate(-6deg); background-color:var(--red) !important; }
  .social-anim:hover i{ color:#fff !important; }

  /* ---- fighter silhouette: slow idle drift ---- */
  @keyframes silhouetteDrift{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
  }
  .silhouette-drift{ animation:silhouetteDrift 6s ease-in-out infinite; }

  /* ---- watch-video ribbon badges: subtle shimmer on hover ---- */
  .tag-anim{ transition:transform .25s ease, letter-spacing .25s ease; }
  .tag-anim:hover{ transform:translateY(-1px); letter-spacing:.06em; }

  /* ---- mobile navigation animation ---- */
  .mobile-nav{
    display:block;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transform:translateY(-8px);
    visibility:hidden;
    transition:max-height .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease, transform .4s ease, visibility .4s ease;
  }
  .mobile-nav.is-open{
    max-height:520px;
    opacity:1;
    transform:translateY(0);
    visibility:visible;
  }
  .mobile-nav .mobile-link{
    opacity:0;
    transform:translateY(-10px);
    transition:opacity .35s ease, transform .35s cubic-bezier(.22,.61,.36,1), background-color .25s ease, color .25s ease;
  }
  .mobile-nav.is-open .mobile-link{ opacity:1; transform:translateY(0); }
  .mobile-nav.is-open .mobile-link:nth-child(1){transition-delay:.04s}
  .mobile-nav.is-open .mobile-link:nth-child(2){transition-delay:.08s}
  .mobile-nav.is-open .mobile-link:nth-child(3){transition-delay:.12s}
  .mobile-nav.is-open .mobile-link:nth-child(4){transition-delay:.16s}
  .mobile-nav.is-open .mobile-link:nth-child(5){transition-delay:.20s}
  .mobile-nav.is-open .mobile-link:nth-child(6){transition-delay:.24s}
  .mobile-nav.is-open .mobile-link:nth-child(7){transition-delay:.28s}

  /* ---- premium video player + next-video motion ---- */
  .video-modal{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .42s cubic-bezier(.22,.61,.36,1),visibility 0s linear .42s;}
  .video-modal.is-open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;}
  .video-modal-panel{opacity:0;transform:translate3d(0,24px,0) scale(.965);filter:blur(5px);transition:opacity .48s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.16,1,.3,1),filter .48s ease;}
  .video-modal.is-open .video-modal-panel{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);}

  /* The recommendation is viewport-fixed, so it remains visible after the modal closes. */
  .next-video-popup{
    position:fixed;z-index:120;right:clamp(16px,2.5vw,40px);bottom:clamp(16px,3vw,40px);
    width:min(350px,calc(100vw - 32px));
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translate3d(44px,20px,0) scale(.92);
    transform-origin:bottom right;filter:blur(7px);
    transition:opacity .48s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.16,1,.3,1),filter .48s ease,visibility 0s linear .48s;
    will-change:opacity,transform,filter;
  }
  .next-video-popup.is-visible{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translate3d(0,0,0) scale(1);filter:blur(0);transition-delay:0s;
  }
  .next-video-popup::before{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:4;
    background:linear-gradient(135deg,rgba(227,172,51,.8),rgba(195,31,44,.85),rgba(255,255,255,.08));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
  }
  .next-video-thumb{transition:transform .7s cubic-bezier(.16,1,.3,1),filter .5s ease;}
  .next-video-popup:hover .next-video-thumb{transform:scale(1.07);filter:brightness(1.08) saturate(1.06);}
  .next-video-play-ring{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;}
  .next-video-popup:hover .next-video-play-ring{transform:scale(1.1);box-shadow:0 0 0 10px rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.4);}
  .next-video-close{transition:transform .3s cubic-bezier(.16,1,.3,1),background-color .3s ease;}
  .next-video-close:hover{transform:rotate(90deg) scale(1.08);background-color:rgba(195,31,44,.9);}
  @media(max-width:767px){
    .next-video-popup{left:12px;right:12px;bottom:12px;width:auto;transform:translate3d(0,34px,0) scale(.96);transform-origin:bottom center;}
    .next-video-popup.is-visible{transform:translate3d(0,0,0) scale(1);}
  }
  @media(prefers-reduced-motion:reduce){
    .video-modal,.video-modal-panel,.next-video-popup,.next-video-thumb,.next-video-play-ring,.next-video-close{transition-duration:.001ms!important;filter:none!important;}
  }

  /* ---- respect reduced motion ---- */
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
    .reveal, .reveal-zoom, .belt-sequence-item, .belt-sequence-tyre, .belt-sequence-label{ opacity:1 !important; transform:none !important; }
  }

  /* ---- inner page hero banner ---- */
  .page-hero{
    position:relative;
    background-color:#000;
  }
  .page-hero .overlay{
    background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.85) 100%);
  }
  .breadcrumb a{ color:rgba(255,255,255,.6); transition:color .25s ease; }
  .breadcrumb a:hover{ color:var(--gold); }

  /* ---- form fields ---- */
  .field-label{ display:block; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:6px; }
  .field-input{
    width:100%;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.15);
    border-radius:8px;
    padding:12px 14px;
    color:#fff;
    font-family:'Oswald',sans-serif;
    font-size:14px;
    transition:border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
  }
  .field-input::placeholder{ color:rgba(255,255,255,.35); }
  .field-input:focus{
    outline:none;
    border-color:var(--gold);
    background:rgba(255,255,255,.08);
    box-shadow:0 0 0 3px rgba(227,172,51,.15);
  }
  select.field-input{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23e3ac33' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
  select.field-input option{ background:#111; color:#fff; }

  /* ---- program/package radio cards ---- */
  .pkg-radio{ display:none; }
  .pkg-card{
    cursor:pointer;
    transition:transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s ease, background-color .3s ease;
  }
  .pkg-radio:checked + .pkg-card{
    border-color:var(--gold);
    background:rgba(227,172,51,.08);
    transform:translateY(-3px);
  }

  /* ---- timeline (Our Journey) ---- */
  .timeline-line{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.18) 10%, rgba(255,255,255,.18) 90%, transparent); }
  .timeline-dot{ box-shadow:0 0 0 5px rgba(195,31,44,.18); }

  /* ---- stat card ---- */
  .stat-card{ transition:transform .4s cubic-bezier(.22,.61,.36,1); }
  .stat-card:hover{ transform:translateY(-6px); }

  /* ---- success toast/panel ---- */
  @keyframes popIn{ from{opacity:0; transform:scale(.9);} to{opacity:1; transform:scale(1);} }
  .pop-in{ animation:popIn .5s cubic-bezier(.22,.61,.36,1) both; }

  .clip-1 { clip-path: polygon(0 18%, 82% 0, 100% 24%, 75% 58%, 100% 80%, 12% 100%, 0 72%); }
  .clip-2 { clip-path: polygon(0 25%, 78% 0, 100% 32%, 72% 65%, 100% 84%, 8% 100%); }
  .card-tilt-l { transform: rotate(-3deg); }
  .card-tilt-r { transform: rotate(2deg); }
  @media (max-width: 767px) {
    .card-tilt-l, .card-tilt-r { transform: none; }
  }
  .scrollbar-none::-webkit-scrollbar { display: none; }
  .scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

  /* =========================================================
     GLOBAL RESPONSIVE CONTAINER / ALIGNMENT SYSTEM
     Keeps the same visual content width from desktop to desktop,
     while allowing fluid shrinking on tablets and mobile.
  ========================================================== */
  *, *::before, *::after { box-sizing:border-box; }

  html, body {
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body {
    margin:0;
    min-width:320px;
  }

  img, svg, video, canvas {
    max-width:100%;
  }

  .site-container,
  .max-w-\[1280px\] {
    width:100%;
    max-width:1280px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Keep every active content wrapper on the same desktop grid. */
  section > .mx-auto,
  section .site-container,
  header .site-container {
    width:100%;
  }

  /* Prevent nested wrappers from becoming wider than the master grid. */
  .site-container > * {
    max-width:100%;
  }

  /* Stable horizontal gutters at every breakpoint. */
  @media (min-width:1280px) {
    section[id="programs"],
    section[id="reviews"],
    section[id="trainers"],
    section.glow-fade,
    section.relative.bg-black,
    section.brush-bg {
      padding-left:24px;
      padding-right:24px;
    }
  }

  @media (min-width:1536px) {
    section[id="programs"],
    section[id="reviews"],
    section[id="trainers"],
    section.glow-fade,
    section.relative.bg-black,
    section.brush-bg {
      padding-left:32px;
      padding-right:32px;
    }
  }

  /* Hero image stays full-bleed, while hero content follows the master grid. */
  #home {
    padding-left:0 !important;
    padding-right:0 !important;
    overflow:hidden;
  }

  #home > .site-container {
    padding-left:24px;
    padding-right:24px;
  }

  /* Consistent typography scaling — no sudden oversized jumps on 1400px+ screens. */
  .font-display {
    letter-spacing:0.01em;
  }

  h1, h2, h3, h4, p {
    max-width:100%;
  }

  /* Grid children may shrink instead of forcing horizontal overflow. */
  .grid > *,
  .flex > * {
    min-width:0;
  }

  /* Long text/buttons remain usable on small screens. */
  button, a {
    -webkit-tap-highlight-color:transparent;
  }

  /* Header uses the same left/right content edge as the page. */
  #site-header > .site-container {
    padding-left:24px;
    padding-right:24px;
  }

  /* Training-fee cards remain equal-height and aligned. */
  section.brush-bg .grid > * {
    min-width:0;
  }

  @media (max-width:1023px) {
    .site-container,
    .max-w-\[1280px\] {
      max-width:100% !important;
    }

    #home > .site-container,
    #site-header > .site-container {
      padding-left:20px;
      padding-right:20px;
    }
  }

  @media (max-width:639px) {
    #home > .site-container,
    #site-header > .site-container {
      padding-left:16px;
      padding-right:16px;
    }

    section[id="programs"],
    section[id="reviews"],
    section[id="trainers"],
    section.glow-fade,
    section.relative.bg-black,
    section.brush-bg {
      padding-left:16px;
      padding-right:16px;
    }

    /* Avoid oversized tracking on narrow screens. */
    .tracking-\[0\.35em\] {
      letter-spacing:.22em;
    }

    .tracking-\[0\.3em\] {
      letter-spacing:.18em;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
  }