/* ===== Power X – polish patch v1 ===== */

/* 0) Softer dark theme: charcoal instead of pure black */
html:not(.light){
  --color-neutral-950:#060607;
  --color-neutral-900:#161618;
  --color-neutral-800:#2c2c31;
  --color-black:#060607;
  --page:#060607;--surface:#161618;--surface-deep:#0b0b0c;--surface-raised:#222226;--line:#34343a;--line-strong:#4a4a52;
}
html:not(.light){background:#060607}
html:not(.light) body{background:transparent!important}

/* 1) Round theme + menu buttons */
button[aria-label*="theme"],
button[aria-label*="navigation menu"]{
  border-radius:10px!important;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .2s,color .2s,border-color .2s!important;
}
button[aria-label*="theme"] svg{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
button[aria-label*="theme"]:active svg{transform:rotate(90deg) scale(.8)}
@media (hover:hover){
  button[aria-label*="theme"]:hover{border-color:#d4a73c;transform:scale(1.08)}
  button[aria-label*="theme"]:hover svg{transform:rotate(25deg)}
}

/* 2) Light button animation (transform/opacity only = smooth on phones) */
button:not([aria-label*="theme"]):not([aria-label*="navigation menu"]),
a.brand-action,
a[class*="uppercase"][class*="px-"],
a[class*="tracking-wider"][class*="px-"]{
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,background-color .2s,color .2s,border-color .2s!important;
  -webkit-tap-highlight-color:transparent;
}
button:not([aria-label*="theme"]):not([aria-label*="navigation menu"]):active,
a.brand-action:active,
a[class*="uppercase"][class*="px-"]:active,
a[class*="tracking-wider"][class*="px-"]:active{transform:scale(.96)}
@media (hover:hover){
  a.brand-action:hover,
  a[class*="uppercase"][class*="px-"]:hover,
  a[class*="tracking-wider"][class*="px-"]:hover{transform:translateY(-2px);box-shadow:0 8px 20px -8px rgba(212,167,60,.45)}
  a[class*="uppercase"] svg,a.brand-action svg{transition:transform .22s}
  a[class*="uppercase"]:hover svg,a.brand-action:hover svg{transform:translateX(3px)}
}

/* 3) Phone performance: blur on a fixed header is the #1 cause of scroll lag */
header.fixed{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:#060607!important}
html.light header.fixed{background-color:#fff!important}

/* 4) Hero: picture sits BEHIND the headline (not above/below it) */
#top .gym-hero-dim{background:rgba(0,0,0,.42)!important}
#top .bg-gradient-to-t{background:linear-gradient(to top,#060607 0%,rgba(0,0,0,.6) 12%,rgba(0,0,0,0) 36%)!important}
#top>div:first-child>img{object-position:50% 12%!important}
#top h1,#top .hero-copy p{text-shadow:0 2px 22px rgba(0,0,0,.75)}
@media (max-width:640px){
  /* picture fills the whole hero, centred behind the headline */
  #top{min-height:auto!important;padding-top:6.5rem!important;padding-bottom:2.25rem!important;align-items:flex-start!important}
  #top>div:first-child{inset:0!important}
  #top .gym-hero-dim{background:rgba(0,0,0,.36)!important}
  #top .bg-gradient-to-t{background:linear-gradient(to top,#060607 0%,rgba(6,6,7,0) 38%)!important}
  #top>div:first-child>img{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;
    object-fit:cover!important;object-position:50% 6%!important;margin:0!important;
    -webkit-mask-image:none!important;mask-image:none!important;
  }
  #top .hero-copy>div.flex{margin-top:1.25rem!important}
}

/* 5) Images stay inside a limit */
main img{max-width:100%}
.px-cap{max-height:340px;overflow:hidden}
.px-cap img{max-height:340px;object-fit:cover}
@media (min-width:1024px){.px-cap,.px-cap img{max-height:380px}}

/* 6) Mobile / tablet section strip - swipe by hand (no auto-moving) */
:root{--px-strip:0px}
.px-strip{display:none}
@media (max-width:1279px){
  body{padding-top:var(--px-strip)}
  .px-strip{
    display:block;overflow-x:auto;overflow-y:hidden;padding:7px 8px 9px;
    border-top:1px solid rgba(128,128,128,.22);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;
  }
  .px-strip::-webkit-scrollbar{display:none}
  .px-track{display:flex;width:max-content;animation:none!important}
  .px-strip a{
    flex:0 0 auto;white-space:nowrap;text-decoration:none;margin-right:8px;
    font-size:13px;font-weight:600;line-height:1;padding:9px 15px;border-radius:9px;
    color:#a3a3a3;border:1px solid transparent;-webkit-tap-highlight-color:transparent;
    transition:transform .2s,background-color .25s,color .25s,border-color .25s;
  }
  .px-strip a:active{transform:scale(.94)}
  .px-strip a.on{color:#d4a73c;background:rgba(212,167,60,.12);border-color:rgba(212,167,60,.45)}
  html.light .px-strip a{color:#525252}
  html.light .px-strip a.on{color:#7a5200;background:rgba(212,167,60,.18);border-color:rgba(160,110,0,.5)}
}

/* 7) Phone: nothing too tiny, nothing too big */
@media (max-width:640px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-size:16px;line-height:1.6}
  main p{font-size:max(1rem,15.5px)}
  main .text-xs{font-size:.8125rem!important;line-height:1.25rem!important}
  main .text-sm{font-size:.9375rem!important;line-height:1.45rem!important}
  main h1{font-size:clamp(2rem,9vw,2.6rem)!important;line-height:1.1!important}
  main h2{font-size:clamp(1.6rem,7vw,2rem)!important;line-height:1.2!important}
  main section{padding-left:0;padding-right:0}
  main img{max-width:100%;height:auto}
  button,a.brand-action,main a[class*="uppercase"][class*="px-"]{min-height:44px}
}

/* 8) Phone: less empty space on the sides, bigger content */
@media (max-width:640px){
  main .px-4,main .sm\:px-6,main [class*="max-w-"].mx-auto{padding-left:.75rem!important;padding-right:.75rem!important}
  footer .px-4{padding-left:.75rem!important;padding-right:.75rem!important}
  main .p-6,main .p-8,main .p-7{padding:1.1rem!important}
  main .px-6,main .px-8{padding-left:1.1rem!important;padding-right:1.1rem!important}
  main .py-20{padding-top:3rem!important;padding-bottom:3rem!important}
  main .gap-8,main .gap-10,main .gap-12{gap:1.25rem!important}
  main p{font-size:1.0625rem!important;line-height:1.65!important}
  main .text-sm{font-size:1rem!important;line-height:1.55rem!important}
  main .text-xs{font-size:.875rem!important}
  main li{font-size:1.0625rem!important}
  main h3{font-size:1.35rem!important}
}

/* 9) Phone: hero label + buttons were still tiny */
@media (max-width:640px){
  #top .hero-copy p{font-size:.75rem!important;letter-spacing:.08em!important}
  #top .hero-copy a{font-size:.875rem!important;min-height:48px}
}

/* 10) SHINY BLACK look (dark mode): glossy black with a soft crimson glow */
html:not(.light)::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(85% 42% at 88% 0%,rgba(255,255,255,.17) 0%,rgba(255,255,255,0) 70%),
    radial-gradient(70% 38% at 0% 40%,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 70%),
    radial-gradient(60% 30% at 100% 82%,rgba(214,40,52,.20) 0%,rgba(214,40,52,0) 70%),
    linear-gradient(115deg,#040405 0%,#141417 30%,#09090a 48%,#1a1a1e 66%,#050506 100%);
}
html:not(.light) main [class*="bg-neutral-900"]{
  background:linear-gradient(155deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 30%),linear-gradient(145deg,#26262b 0%,#141416 50%,#0c0c0e 100%)!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.5),0 14px 30px -14px rgba(0,0,0,.8)!important;
}
html:not(.light) header.fixed{
  background-image:linear-gradient(180deg,#2b2b31 0%,#151518 55%,#0b0b0d 100%)!important;
  background-color:#0b0b0d!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 0 rgba(212,167,60,.55),0 8px 22px -10px rgba(0,0,0,.8);
}
html:not(.light) footer{background:linear-gradient(180deg,#1b1b1f 0%,#070708 100%)!important;border-top-color:rgba(212,167,60,.5)!important}
a.brand-action,button.brand-action{
  position:relative;overflow:hidden;color:#1b1300!important;border-radius:8px!important;
  background:linear-gradient(135deg,#fbe39a 0%,#e2b94c 38%,#b98a22 70%,#e8c565 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 8px 22px -8px rgba(226,185,76,.55)!important;
  border-color:transparent!important;
}
a.brand-action::after,button.brand-action::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(0) skewX(-20deg);animation:px-gleam 3.6s ease-in-out infinite;
}
@keyframes px-gleam{0%,55%{transform:translateX(0) skewX(-20deg)}100%{transform:translateX(480%) skewX(-20deg)}}
@media (prefers-reduced-motion:reduce){a.brand-action::after,button.brand-action::after{animation:none;display:none}}
html:not(.light) main h1,html:not(.light) main h2{text-shadow:0 2px 16px rgba(255,255,255,.12)}
html:not(.light) main a[class*="border-neutral-800"],html:not(.light) main a[class*="border-neutral-700"]{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02))!important;border-radius:8px!important;border-color:rgba(255,255,255,.28)!important;
}
/* small red touch: thin crimson line on cards' top edge */
html:not(.light) main [class*="bg-neutral-900"]{border-top-color:rgba(214,40,52,.55)!important}

/* 11) Info strip under hero: one line, keeps moving (no boxed "gaming" card) */
.px-info{
  overflow:hidden;border-top:1px solid rgba(212,167,60,.45);border-bottom:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 100%),#0b0b0d;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
}
html.light .px-info{background:#fff}
.px-info-track{display:flex;width:max-content;animation:px-info-run 28s linear infinite;will-change:transform}
.px-info:hover .px-info-track,.px-info:active .px-info-track{animation-play-state:paused}
.px-info-track>*{flex:0 0 auto;white-space:nowrap;padding:12px 26px;border-right:1px solid rgba(255,255,255,.12)}
.px-info-track>*>div{padding:0!important}
.px-info-track p{white-space:nowrap}
@keyframes px-info-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.px-info{overflow-x:auto}.px-info-track{animation:none}}