/* ============================================
   RJJ BOXING + FITNESS — Cinematic Immersive CSS
   Color Palette from Logo: Black, Red, Silver, White
   Zero blank pixels — every section has image/video bg
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --black-deep: #0d0d0d;
  --black: #1a1a1a;
  --black-light: #2a2a2a;
  --red: #c41e2a;
  --red-bright: #e63946;
  --red-dark: #9b1520;
  --silver: #a8a9ad;
  --silver-light: #c0c0c0;
  --silver-lighter: #d4d4d4;
  --white: #ffffff;
  --off-white: #f5f5f5;
  --cream: #faf8f5;
  --text-light: #f5f5f5;
  --accent: #c41e2a;
  --accent-hover: #e63946;
  --overlay-dark: rgba(13,13,13,0.75);
  --overlay-medium: rgba(13,13,13,0.55);
  --overlay-light: rgba(13,13,13,0.35);
  --glass-bg: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.15);
  --glass-bg-dark: rgba(13,13,13,0.5);
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --transition-fast: 0.3s cubic-bezier(0.4,0,0.2,1);
  --transition-medium: 0.6s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 1s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden;}
body{font-family:var(--font-body);color:var(--white);background:#000;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;transition:var(--transition-fast);}
ul,ol{list-style:none;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.15;color:var(--white);}
h1{font-size:clamp(2.4rem,5.5vw,5rem);}
h2{font-size:clamp(1.8rem,4vw,3.2rem);}
h3{font-size:clamp(1.3rem,2.5vw,2rem);}
p{color:rgba(255,255,255,0.85);line-height:1.8;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
.container-wide{max-width:1400px;margin:0 auto;padding:0 24px;}

/* ============================================
   CINEMATIC NAVIGATION — Transparent Floating
   ============================================ */
.cinema-nav{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  padding:18px 40px;
  transition:all 0.4s ease;
  background:transparent;
}
.cinema-nav.scrolled{
  background:rgba(10,10,10,0.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  padding:10px 40px;
  box-shadow:0 2px 40px rgba(0,0,0,0.5);
}
.cinema-nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1600px;margin:0 auto;
}
.cinema-nav-logo img{
  height:55px;width:auto;
  transition:var(--transition-fast);
}
.cinema-nav.scrolled .cinema-nav-logo img{height:42px;}

.cinema-nav-links{
  display:flex;align-items:center;gap:0;
  list-style:none;margin:0;padding:0;
}
.cinema-nav-links > li{position:relative;}
.cinema-nav-links > li > a{
  display:block;padding:10px 16px;
  font-family:var(--font-body);font-size:11.5px;font-weight:600;
  letter-spacing:2.5px;text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  transition:var(--transition-fast);
}
.cinema-nav-links > li > a:hover{color:var(--red);}

/* Dropdown */
.cinema-dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  min-width:260px;padding:12px 0;
  background:rgba(15,15,15,0.95);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:4px;
  opacity:0;visibility:hidden;
  transition:all 0.3s ease;
  transform:translateX(-50%) translateY(10px);
}
.has-dropdown:hover .cinema-dropdown{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.cinema-dropdown li a{
  display:block;padding:10px 24px;
  font-size:13px;font-weight:400;letter-spacing:0.5px;
  color:rgba(255,255,255,0.7);
  transition:var(--transition-fast);
}
.cinema-dropdown li a:hover{
  color:var(--white);background:rgba(196,30,42,0.15);
  padding-left:30px;
}

/* Nav Right */
.cinema-nav-right{
  display:flex;align-items:center;gap:18px;
}
.cinema-join-btn{
  display:inline-block;padding:10px 28px;
  font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--white);background:var(--red);
  border:none;border-radius:2px;
  transition:var(--transition-fast);
}
.cinema-join-btn:hover{background:var(--red-bright);transform:translateY(-1px);}
.cinema-lang{
  font-size:11px;font-weight:600;letter-spacing:1.5px;
  color:rgba(255,255,255,0.6);cursor:pointer;
  transition:var(--transition-fast);
}
.cinema-lang:hover{color:var(--white);}
.cinema-social-icon{
  color:rgba(255,255,255,0.6);
  transition:var(--transition-fast);
}
.cinema-social-icon:hover{color:var(--white);}

/* Burger */
.cinema-burger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:8px;z-index:10001;
}
.cinema-burger span{
  display:block;width:26px;height:2px;
  background:var(--white);
  transition:all 0.3s ease;
}
.cinema-burger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.cinema-burger.active span:nth-child(2){opacity:0;}
.cinema-burger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

/* Mobile Overlay */
.mobile-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(10,10,10,0.97);
  backdrop-filter:blur(30px);
  z-index:10000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:all 0.4s ease;
}
.mobile-overlay.open{opacity:1;visibility:visible;}
.mobile-overlay-content{text-align:center;padding:20px;}
.mobile-nav-list{list-style:none;padding:0;margin:0 0 30px 0;}
.mobile-nav-list > li{margin:6px 0;}
.mobile-nav-list > li > a{
  display:inline-block;padding:10px 20px;
  font-size:18px;font-weight:600;letter-spacing:3px;text-transform:uppercase;
  color:rgba(255,255,255,0.8);
  transition:var(--transition-fast);
}
.mobile-nav-list > li > a:hover{color:var(--red);}
.mobile-sub{
  max-height:0;overflow:hidden;
  transition:max-height 0.4s ease;
  padding:0;
}
.mobile-has-dropdown.open .mobile-sub{max-height:400px;}
.mobile-sub li a{
  display:block;padding:8px 20px;
  font-size:14px;font-weight:400;letter-spacing:1px;
  color:rgba(255,255,255,0.5);
}
.mobile-sub li a:hover{color:var(--red);}
.mobile-join-btn{
  display:inline-block;padding:14px 50px;margin:10px 0 25px;
  font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:var(--white);background:var(--red);border-radius:2px;
  transition:var(--transition-fast);
}
.mobile-join-btn:hover{background:var(--red-bright);}
.mobile-bottom-row{
  display:flex;flex-direction:column;align-items:center;gap:15px;
}
.mobile-social-row{display:flex;gap:20px;}
.mobile-social-row a{color:rgba(255,255,255,0.5);transition:var(--transition-fast);}
.mobile-social-row a:hover{color:var(--white);}

@media(max-width:1100px){
  .cinema-nav-links{display:none;}
  .cinema-nav-right{display:none;}
  .cinema-burger{display:flex;}
  .cinema-nav{padding:14px 20px;}
  .cinema-nav.scrolled{padding:10px 20px;}
}

/* ============================================
   CINEMATIC SECTIONS — Full-Bleed Backgrounds
   ============================================ */
.cinema-section{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.cinema-section-half{
  position:relative;
  min-height:60vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.cinema-section-auto{
  position:relative;
  padding:100px 0;
  overflow:hidden;
}
.cinema-bg{
  position:absolute;top:0;left:0;width:100%;height:100%;
  background-size:cover;background-position:center;background-attachment:fixed;
  z-index:0;
}
.cinema-bg-scroll{
  position:absolute;top:0;left:0;width:100%;height:100%;
  background-size:cover;background-position:center;
  z-index:0;
}
.cinema-bg video{
  position:absolute;top:50%;left:50%;
  min-width:100%;min-height:100%;
  transform:translate(-50%,-50%);
  object-fit:cover;
}
.cinema-overlay{
  position:absolute;top:0;left:0;width:100%;height:100%;
  z-index:1;
}
.cinema-overlay-dark{background:rgba(10,10,10,0.65);}
.cinema-overlay-darker{background:rgba(10,10,10,0.78);}
.cinema-overlay-gradient{
  background:linear-gradient(180deg,rgba(10,10,10,0.8) 0%,rgba(10,10,10,0.4) 40%,rgba(10,10,10,0.7) 100%);
}
.cinema-overlay-red{
  background:linear-gradient(135deg,rgba(196,30,42,0.15) 0%,rgba(10,10,10,0.7) 100%);
}
.cinema-content{
  position:relative;z-index:2;
  width:100%;max-width:1200px;
  margin:0 auto;padding:0 24px;
}
.cinema-content-wide{
  position:relative;z-index:2;
  width:100%;max-width:1400px;
  margin:0 auto;padding:0 24px;
}

/* Section Label */
.cinema-label{
  display:inline-block;
  font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;
  color:var(--red);margin-bottom:16px;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.hero-section .cinema-bg{background-attachment:scroll;}
.hero-text{
  text-align:center;position:relative;z-index:2;
  padding:0 24px;
}
.hero-text .cinema-label{
  font-size:12px;letter-spacing:5px;
  animation:fadeInDown 1s ease 0.3s both;
}
.hero-text h1{
  font-size:clamp(2.8rem,6vw,5.5rem);
  font-weight:800;color:var(--white);
  margin-bottom:20px;
  animation:fadeInUp 1s ease 0.5s both;
}
.hero-text h1 span{color:var(--red);}
.hero-text p{
  font-size:clamp(1rem,1.5vw,1.25rem);
  color:rgba(255,255,255,0.75);
  max-width:600px;margin:0 auto 35px;
  animation:fadeInUp 1s ease 0.7s both;
}
.hero-cta-row{
  display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
  animation:fadeInUp 1s ease 0.9s both;
}

/* Buttons */
.btn-primary{
  display:inline-block;padding:16px 42px;
  font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--white);background:var(--red);
  border:none;border-radius:2px;cursor:pointer;
  transition:var(--transition-fast);
}
.btn-primary:hover{background:var(--red-bright);transform:translateY(-2px);box-shadow:0 10px 30px rgba(196,30,42,0.3);}
.btn-outline{
  display:inline-block;padding:16px 42px;
  font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--white);background:transparent;
  border:1px solid rgba(255,255,255,0.4);
  border-radius:2px;cursor:pointer;
  transition:var(--transition-fast);
}
.btn-outline:hover{border-color:var(--white);background:rgba(255,255,255,0.08);transform:translateY(-2px);}
.btn-glass{
  display:inline-block;padding:16px 42px;
  font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--white);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);
  border-radius:2px;cursor:pointer;
  transition:var(--transition-fast);
}
.btn-glass:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);transform:translateY(-2px);}

/* ============================================
   GLASS CARDS
   ============================================ */
.glass-card{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  border-radius:8px;padding:40px 30px;
  transition:all 0.4s ease;
}
.glass-card:hover{
  background:rgba(255,255,255,0.1);
  border-color:rgba(196,30,42,0.3);
  transform:translateY(-5px);
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.glass-card-red{
  background:rgba(196,30,42,0.08);
  border:1px solid rgba(196,30,42,0.2);
  backdrop-filter:blur(15px);
  border-radius:8px;padding:40px 30px;
  transition:all 0.4s ease;
}
.glass-card-red:hover{
  background:rgba(196,30,42,0.15);
  border-color:rgba(196,30,42,0.4);
  transform:translateY(-5px);
}

/* ============================================
   GRID LAYOUTS
   ============================================ */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media(max-width:992px){
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
}

/* ============================================
   TRAINER CARDS
   ============================================ */
.trainer-card{
  position:relative;overflow:hidden;border-radius:8px;
  aspect-ratio:3/4;cursor:pointer;
  transition:all 0.5s ease;
}
.trainer-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.6s ease;
}
.trainer-card:hover img{transform:scale(1.08);}
.trainer-card-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:30px 20px;
  background:linear-gradient(transparent,rgba(10,10,10,0.9));
  transition:all 0.4s ease;
}
.trainer-card:hover .trainer-card-overlay{
  background:linear-gradient(transparent 10%,rgba(196,30,42,0.8));
}
.trainer-card-overlay h3{
  font-size:1.2rem;font-weight:700;color:var(--white);
  margin-bottom:4px;
}
.trainer-card-overlay p{
  font-size:0.85rem;color:rgba(255,255,255,0.7);
  letter-spacing:1px;text-transform:uppercase;font-weight:500;
}

/* ============================================
   MEMBERSHIP / PRICING CARDS
   ============================================ */
.pricing-card{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  backdrop-filter:blur(15px);
  border-radius:8px;padding:45px 30px;
  text-align:center;
  transition:all 0.4s ease;
  position:relative;overflow:hidden;
}
.pricing-card:hover{
  transform:translateY(-8px);
  border-color:rgba(196,30,42,0.4);
  box-shadow:0 25px 60px rgba(0,0,0,0.4);
}
.pricing-card.featured{
  border-color:var(--red);
  background:rgba(196,30,42,0.08);
}
.pricing-card.featured::before
.pricing-card h3{font-size:1.4rem;margin-bottom:10px;}
.pricing-card .price{
  font-size:3rem;font-weight:800;color:var(--white);
  font-family:var(--font-heading);
}
.pricing-card .price span{font-size:1rem;color:rgba(255,255,255,0.5);font-weight:400;}
.pricing-card ul{
  margin:25px 0;
  padding:0;
  text-align:left;
}
.pricing-card ul li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
  font-size:0.95rem;
  color:rgba(255,255,255,0.78);
  line-height:1.6;
}
.pricing-card ul li:last-child{
  border-bottom:none;
}
.pricing-card ul li::before{
  content:"✓";
  flex:0 0 auto;
  margin-top:3px;
  font-size:12px;
  font-weight:700;
  color:var(--red);
  opacity:.95;
}

/* ============================================
   VIDEO SECTIONS
   ============================================ */
.video-section{
  position:relative;min-height:70vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.video-bg{
  position:absolute;top:0;left:0;width:100%;height:100%;
  z-index:0;
}
.video-bg video{
  width:100%;height:100%;object-fit:cover;
}
.video-bg iframe{
  position:absolute;top:50%;left:50%;
  width:100vw;height:56.25vw;
  min-height:100vh;min-width:177.77vh;
  transform:translate(-50%,-50%);
  border:none;
}
.video-embed{
  position:relative;width:100%;max-width:900px;
  aspect-ratio:16/9;margin:0 auto;
  border-radius:8px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
}
.video-embed iframe{
  width:100%;height:100%;border:none;
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.reveal{opacity:0;transform:translateY(40px);transition:all 0.8s ease;}
.reveal.revealed{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateX(-50px);transition:all 0.8s ease;}
.reveal-left.revealed{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(50px);transition:all 0.8s ease;}
.reveal-right.revealed{opacity:1;transform:translateX(0);}
.stagger-children > *{opacity:0;transform:translateY(30px);transition:all 0.6s ease;}
.stagger-children.revealed > *:nth-child(1){opacity:1;transform:translateY(0);transition-delay:0.1s;}
.stagger-children.revealed > *:nth-child(2){opacity:1;transform:translateY(0);transition-delay:0.2s;}
.stagger-children.revealed > *:nth-child(3){opacity:1;transform:translateY(0);transition-delay:0.3s;}
.stagger-children.revealed > *:nth-child(4){opacity:1;transform:translateY(0);transition-delay:0.4s;}
.stagger-children.revealed > *:nth-child(5){opacity:1;transform:translateY(0);transition-delay:0.5s;}
.stagger-children.revealed > *:nth-child(6){opacity:1;transform:translateY(0);transition-delay:0.6s;}

@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 20px rgba(196,30,42,0.3);}50%{box-shadow:0 0 40px rgba(196,30,42,0.6);}}

/* ============================================
   PRELOADER
   ============================================ */
.preloader{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:#0a0a0a;z-index:99999;
  display:flex;align-items:center;justify-content:center;
  transition:opacity 0.6s ease,visibility 0.6s ease;
}
.preloader.loaded{opacity:0;visibility:hidden;pointer-events:none;}
.preloader-logo{
  width:80px;height:80px;
  animation:pulse 1.5s infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.1);opacity:0.7;}}

/* ============================================
   CINEMATIC FOOTER
   ============================================ */
.cinema-footer-bg{
  position:relative;
  background-size:cover;background-position:center;
}
.cinema-footer-overlay{
  background:rgba(10,10,10,0.92);
  backdrop-filter:blur(10px);
  padding:80px 0 30px;
}
.cinema-footer-inner{
  max-width:1200px;margin:0 auto;padding:0 24px;
}
.cinema-footer-top{
  display:grid;grid-template-columns:1fr 2fr;gap:60px;
  padding-bottom:50px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.cinema-footer-logo{height:60px;width:auto;margin-bottom:20px;}
.cinema-footer-tagline{
  font-size:0.9rem;color:rgba(255,255,255,0.5);line-height:1.8;
}
.cinema-footer-links{
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
}
.cinema-footer-col h4{
  font-family:var(--font-body);font-size:12px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--red);margin-bottom:18px;
}
.cinema-footer-col a{
  display:block;padding:4px 0;
  font-size:0.85rem;color:rgba(255,255,255,0.45);
  transition:var(--transition-fast);
}
.cinema-footer-col a:hover{color:var(--white);padding-left:5px;}
.cinema-footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:25px;
}
.cinema-footer-bottom p{
  font-size:0.8rem;color:rgba(255,255,255,0.3);
}
.cinema-footer-social{display:flex;gap:18px;}
.cinema-footer-social a{
  color:rgba(255,255,255,0.3);transition:var(--transition-fast);
}
.cinema-footer-social a:hover{color:var(--red);}

@media(max-width:768px){
  .cinema-footer-top{grid-template-columns:1fr;gap:40px;}
  .cinema-footer-links{grid-template-columns:1fr 1fr;gap:20px;}
  .cinema-footer-bottom{flex-direction:column;gap:15px;text-align:center;}
}

/* ============================================
   BACK TO TOP
   ============================================ */
.back-to-top{
  position:fixed;bottom:30px;right:30px;
  width:48px;height:48px;
  background:var(--red);color:var(--white);
  border:none;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:all 0.3s ease;z-index:999;
  box-shadow:0 5px 20px rgba(196,30,42,0.4);
}
.back-to-top.visible{opacity:1;visibility:visible;}
.back-to-top:hover{transform:translateY(-3px);background:var(--red-bright);}

/* ============================================
   EVENT CALENDAR
   ============================================ */
.calendar-container{
  max-width:900px;margin:0 auto;
}
.calendar-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:30px;
}
.calendar-header h3{
  font-size:1.8rem;font-weight:700;
}
.calendar-nav-btn{
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);
  color:var(--white);padding:10px 20px;border-radius:4px;
  cursor:pointer;font-size:14px;font-weight:600;
  transition:var(--transition-fast);
}
.calendar-nav-btn:hover{background:var(--red);border-color:var(--red);}
.calendar-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
}
.calendar-day-header{
  text-align:center;padding:12px 0;
  font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,0.4);
}
.calendar-day{
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:4px;
  font-size:14px;color:rgba(255,255,255,0.5);
  cursor:default;
  transition:all 0.3s ease;
  position:relative;
}
.calendar-day.empty{background:transparent;border-color:transparent;}
.calendar-day.today{
  border-color:var(--red);color:var(--white);font-weight:700;
}
.calendar-day.has-event{
  background:rgba(196,30,42,0.12);
  border-color:rgba(196,30,42,0.3);
  color:var(--white);font-weight:600;
  cursor:pointer;
}
.calendar-day.has-event:hover{
  background:rgba(196,30,42,0.3);
  transform:scale(1.08);
  box-shadow:0 5px 20px rgba(196,30,42,0.3);
}
.calendar-day.has-event::after{
  content:'';position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;
  background:var(--red);
}

/* Event Modal */
.event-modal-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(10,10,10,0.85);backdrop-filter:blur(10px);
  z-index:10001;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:all 0.3s ease;
}
.event-modal-overlay.active{opacity:1;visibility:visible;}
.event-modal{
  background:rgba(25,25,25,0.95);
  border:1px solid rgba(255,255,255,0.1);
  backdrop-filter:blur(20px);
  border-radius:12px;padding:45px;
  max-width:550px;width:90%;
  position:relative;
  transform:translateY(20px);
  transition:transform 0.3s ease;
}
.event-modal-overlay.active .event-modal{transform:translateY(0);}
.event-modal-close{
  position:absolute;top:15px;right:20px;
  background:none;border:none;color:rgba(255,255,255,0.5);
  font-size:28px;cursor:pointer;
  transition:var(--transition-fast);
}
.event-modal-close:hover{color:var(--white);}
.event-modal .cinema-label{margin-bottom:12px;}
.event-modal h3{font-size:1.6rem;margin-bottom:15px;}
.event-modal p{font-size:0.95rem;color:rgba(255,255,255,0.7);line-height:1.8;margin-bottom:12px;}
.event-modal .event-meta{
  display:flex;gap:20px;margin:20px 0;flex-wrap:wrap;
}
.event-modal .event-meta span{
  font-size:0.85rem;color:rgba(255,255,255,0.5);
  display:flex;align-items:center;gap:6px;
}

/* ============================================
   QUIZ STYLES
   ============================================ */
.quiz-container{
  max-width:700px;margin:0 auto;
}
.quiz-question{
  text-align:center;margin-bottom:30px;
}
.quiz-question h3{font-size:1.5rem;margin-bottom:10px;}
.quiz-options{display:flex;flex-direction:column;gap:12px;}
.quiz-option{
  padding:18px 24px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:6px;cursor:pointer;
  font-size:1rem;color:rgba(255,255,255,0.8);
  transition:all 0.3s ease;text-align:left;
}
.quiz-option:hover{
  background:rgba(196,30,42,0.12);
  border-color:rgba(196,30,42,0.3);
  padding-left:30px;
}
.quiz-option.selected{
  background:rgba(196,30,42,0.2);
  border-color:var(--red);
  color:var(--white);
}
.quiz-progress{
  height:3px;background:rgba(255,255,255,0.1);
  border-radius:2px;margin-bottom:40px;overflow:hidden;
}
.quiz-progress-bar{
  height:100%;background:var(--red);
  transition:width 0.5s ease;
}

/* ============================================
   SCHEDULE TABLE
   ============================================ */
.schedule-table{
  width:100%;border-collapse:collapse;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;overflow:hidden;
}
.schedule-table th{
  padding:16px 12px;
  font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--red);
  background:rgba(196,30,42,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.schedule-table td{
  padding:14px 12px;
  font-size:0.85rem;color:rgba(255,255,255,0.6);
  border-bottom:1px solid rgba(255,255,255,0.04);
  text-align:center;
}
.schedule-table tr:hover td{
  background:rgba(255,255,255,0.03);
  color:var(--white);
}

/* ============================================
   PRODUCT GALLERY (Louvre Style)
   ============================================ */
.product-gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;
}
.product-item{
  position:relative;overflow:hidden;border-radius:8px;
  aspect-ratio:1;cursor:pointer;
  transition:all 0.5s ease;
}
.product-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.6s ease;
}
.product-item:hover img{transform:scale(1.08);}
.product-item-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:25px 20px;
  background:linear-gradient(transparent,rgba(10,10,10,0.9));
  transform:translateY(100%);
  transition:transform 0.4s ease;
}
.product-item:hover .product-item-overlay{transform:translateY(0);}

/* Lightbox */
.lightbox{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(5,5,5,0.95);z-index:10002;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:all 0.3s ease;
}
.lightbox.active{opacity:1;visibility:visible;}
.lightbox img{max-width:90%;max-height:85vh;object-fit:contain;border-radius:4px;}
.lightbox-close{
  position:absolute;top:20px;right:30px;
  background:none;border:none;color:var(--white);
  font-size:36px;cursor:pointer;
}

/* ============================================
   FIGHTVERSE DASHBOARD
   ============================================ */
.fightverse-stat{
  text-align:center;padding:30px;
}
.fightverse-stat .stat-number{
  font-size:3rem;font-weight:800;color:var(--red);
  font-family:var(--font-heading);
}
.fightverse-stat .stat-label{
  font-size:0.85rem;color:rgba(255,255,255,0.5);
  letter-spacing:2px;text-transform:uppercase;margin-top:8px;
}

/* ============================================
   FORM STYLES
   ============================================ */
.cinema-input{
  width:100%;padding:16px 20px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:4px;
  color:var(--white);font-family:var(--font-body);font-size:0.95rem;
  transition:var(--transition-fast);
}
.cinema-input:focus{
  outline:none;border-color:var(--red);
  background:rgba(255,255,255,0.08);
}
.cinema-input::placeholder{color:rgba(255,255,255,0.3);}
textarea.cinema-input{min-height:140px;resize:vertical;}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center{text-align:center;}
.text-red{color:var(--red);}
.text-silver{color:var(--silver);}
.text-muted{color:rgba(255,255,255,0.5);}
.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-60{margin-bottom:60px;}
.mt-20{margin-top:20px;}
.mt-40{margin-top:40px;}
.pt-nav{padding-top:100px;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.gap-20{gap:20px;}
.gap-30{gap:30px;}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:768px){
  h1{font-size:clamp(2rem,8vw,3rem);}
  h2{font-size:clamp(1.5rem,6vw,2.2rem);}
  .cinema-section{min-height:80vh;}
  .cinema-section-half{min-height:50vh;}
  .cinema-section-auto{padding:60px 0;}
  .cinema-bg{background-attachment:scroll;}
  .hero-cta-row{flex-direction:column;align-items:center;}
  .btn-primary,.btn-outline,.btn-glass{width:100%;max-width:300px;text-align:center;}
  .pricing-card{padding:30px 20px;}
  .video-embed{border-radius:4px;}
  .calendar-grid{gap:2px;}
  .calendar-day{font-size:12px;}
  .event-modal{padding:30px 20px;}
}

@media(max-width:480px){
  .cinema-nav{padding:12px 16px;}
  .cinema-nav-logo img{height:40px;}
  h1{font-size:2rem;}
  .glass-card{padding:25px 18px;}
}

.cinema-overlay-gradient{
background: linear-gradient(
to bottom,
rgba(0,0,0,0.65),
rgba(0,0,0,0.35),
rgba(0,0,0,0.75)
);
}

.hero-section--membership{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.hero-section--membership .cinema-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-section--membership .cinema-bg video{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(1);
  animation: heroSlowZoom 18s ease-in-out infinite alternate;
}

.hero-section--membership .cinema-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-section--membership .hero-text{
  position: relative;
  z-index: 2;
  max-width: 950px;
  padding: 120px 20px;
}

@keyframes heroSlowZoom{
  0%{
    transform: translate(-50%, -50%) scale(1);
  }
  100%{
    transform: translate(-50%, -50%) scale(1.12);
  }
}

/* =========================
   PRICING CARDS — LUXURY UPGRADE
   ========================= */

.pricing-card{
  position: relative;
  background: linear-gradient(180deg, rgba(18,18,18,0.96) 0%, rgba(10,10,10,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 42px 30px 34px;
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
}

.pricing-card:hover{
  transform: translateY(-8px);
  border-color: rgba(200,16,46,0.45);
  box-shadow: 0 24px 70px rgba(0,0,0,0.42);
}

.pricing-card.popular{
  background: linear-gradient(180deg, rgba(32,4,8,0.98) 0%, rgba(18,4,6,0.98) 100%);
  border: 1px solid rgba(200,16,46,0.7);
  box-shadow: 0 24px 80px rgba(80,0,10,0.32);
}

/* subtle top glow */
.pricing-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  width: 76%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  opacity: .45;
}

/* title */
.pricing-card h3{
  font-size: 2.1rem;
  line-height: 1.1;
  margin: 0 0 18px;
  color: #f5f1ea;
  text-align: center;
}

/* price */
.pricing-price{
  text-align: center;
  margin-bottom: 30px;
  color: #fff;
}

.pricing-price .currency{
  font-size: 1.5rem;
  vertical-align: top;
  opacity: .9;
  margin-right: 2px;
}

.pricing-price .amount{
  font-size: 4.2rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-family: "Cormorant Garamond", serif;
}

.pricing-price .term{
  font-size: 1.2rem;
  opacity: .7;
  margin-left: 3px;
}

/* button */
.pricing-card .btn-primary,
.pricing-card .btn-outline{
  width: 100%;
  margin-top: 28px;
  justify-content: center;
  text-align: center;
}

/* popular tag */
.popular-badge{
  position: absolute;
  top: 18px;
  right: 18px;
  background: #c8102e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(200,16,46,0.3);
}

/* spacing on smaller screens */
@media (max-width: 768px){
  .pricing-card{
    padding: 34px 22px 28px;
    border-radius: 18px;
  }

  .pricing-card h3{
    font-size: 1.8rem;
  }

  .pricing-price .amount{
    font-size: 3.5rem;
  }

  .pricing-features li{
    font-size: 1rem;
    padding: 16px 0;
  }
}
/* ============================================
   PRODUCT CARDS — LUXURY UPGRADE
   ============================================ */

.product-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:24px;
}

.product-card{
  background:linear-gradient(180deg,#ffffff 0%,#f7f7f7 100%);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 35px rgba(0,0,0,0.12);
  transition:all .45s cubic-bezier(.25,.46,.45,.94);
  cursor:pointer;
  position:relative;
  border:1px solid rgba(0,0,0,0.05);
}

.product-card:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 30px 70px rgba(0,0,0,0.22);
  border-color:rgba(196,30,42,.25);
}

/* subtle glow effect */
.product-card::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:120px;
  background:linear-gradient(to top,rgba(196,30,42,0.06),transparent);
  opacity:0;
  transition:opacity .35s ease;
}

.product-card:hover::after{
  opacity:1;
}

/* product image */
.product-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:linear-gradient(135deg,#fafafa,#f1f1f1);
  padding:18px;
  transition:transform .5s ease;
}

.product-card:hover img{
  transform:scale(1.06);
}

/* text area */
.product-card-body{
  padding:18px 20px 22px;
  background:#fff;
  border-top:1px solid rgba(0,0,0,0.05);
}

/* PRODUCT NAME */
.product-card-body h3{
  font-size:.85rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:8px;
  color:var(--red);
  font-weight:800;
}

/* PRODUCT DESCRIPTION */
.product-card-body p{
  font-size:.78rem;
  color:#4a4a4a;
  line-height:1.7;
  font-weight:500;
}

/* badge */
.product-badge{
  position:absolute;
  top:12px;
  right:12px;
  background:var(--red);
  color:#fff;
  padding:5px 11px;
  font-size:.6rem;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  border-radius:999px;
  z-index:2;
  box-shadow:0 10px 20px rgba(196,30,42,.25);
}

/* ============================================
   PRODUCT CARD TEXT COLOR FIX + LUXURY UPGRADE
   ============================================ */

.product-card{
  background:linear-gradient(180deg,#ffffff 0%,#f7f7f7 100%) !important;
  border-radius:18px !important;
  overflow:hidden !important;
  border:1px solid rgba(0,0,0,0.05) !important;
  box-shadow:0 12px 34px rgba(0,0,0,0.10) !important;
  transition:transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.45s ease, border-color 0.45s ease !important;
  position:relative;
}

.product-card:hover{
  transform:translateY(-10px) scale(1.02) !important;
  box-shadow:0 24px 60px rgba(0,0,0,0.18) !important;
  border-color:rgba(196,30,42,0.22) !important;
}

.product-card::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:120px;
  background:linear-gradient(to top, rgba(196,30,42,0.05), transparent);
  opacity:0;
  transition:opacity 0.35s ease;
  pointer-events:none;
}

.product-card:hover::after{
  opacity:1;
}

.product-card img{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  object-fit:contain !important;
  background:linear-gradient(135deg,#fafafa,#f1f1f1) !important;
  padding:18px !important;
  transition:transform 0.5s ease !important;
}

.product-card:hover img{
  transform:scale(1.06) !important;
}

.product-card-body{
  padding:18px 20px 22px !important;
  background:#ffffff !important;
  border-top:1px solid rgba(0,0,0,0.04) !important;
}

/* force title red */
.product-card-body h3,
.product-card-body h4,
.product-card-body h5{
  color:#c41e2a !important;
  font-size:0.85rem !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
  margin-bottom:8px !important;
  font-weight:800 !important;
  line-height:1.35 !important;
}

/* force description dark */
.product-card-body p,
.product-card-body span,
.product-card-body div{
  color:#444444 !important;
}

.product-card-body p{
  font-size:0.78rem !important;
  line-height:1.7 !important;
  font-weight:500 !important;
}

/* premium badge */
.product-badge{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  background:var(--red) !important;
  color:#ffffff !important;
  padding:5px 11px !important;
  font-size:0.6rem !important;
  font-weight:800 !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
  border-radius:999px !important;
  z-index:2 !important;
  box-shadow:0 10px 20px rgba(196,30,42,0.20) !important;
}

@media (max-width: 768px){
  .corp-intro-grid{
    grid-template-columns:1fr !important;
  }

  .corp-benefits{
    grid-template-columns:1fr !important;
  }

  .corp-benefit{
    grid-template-columns:1fr !important;
  }

  .corp-benefit img{
    height:220px !important;
  }
}

/* =====================================
   CORPORATE BENEFIT CARD HOVER EFFECT
===================================== */

.corp-benefit{
  transition:all .35s ease;
  position:relative;
}

.corp-benefit:hover{
  transform:translateY(-6px);
  border-color:#c41e2a;
  box-shadow:
    0 0 0 1px rgba(196,30,42,.6),
    0 12px 40px rgba(196,30,42,.35),
    0 0 30px rgba(196,30,42,.35);
}

/* subtle glow animation */
.corp-benefit:hover::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  box-shadow:0 0 25px rgba(196,30,42,.55);
  pointer-events:none;
}

.corp-benefit{
  position:relative;
  overflow:hidden;
  transition:all .35s ease;
  border:1px solid rgba(255,255,255,0.07);
}

.corp-benefit img{
  transition:transform .45s ease, filter .45s ease;
  transform:scale(1);
}

.corp-benefit:hover{
  transform:translateY(-6px) scale(1.02);
  border-color:#c41e2a;
  box-shadow:
    0 0 0 1px rgba(196,30,42,.7),
    0 12px 40px rgba(196,30,42,.35),
    0 0 30px rgba(196,30,42,.35);
}

.corp-benefit:hover img{
  transform:scale(1.05);
  filter:brightness(1.03);
}

.corp-benefit::before{
  content:"";
  position:absolute;
  top:-120%;
  left:-120%;
  width:200%;
  height:200%;
  background:linear-gradient(
    120deg,
    transparent 30%,
    rgba(196,30,42,.25) 50%,
    transparent 70%
  );
  transform:rotate(25deg);
  transition:all .75s ease;
}

.corp-benefit:hover::before{
  top:120%;
  left:120%;
}

.corp-benefit::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  opacity:0;
  transition:opacity .35s ease;
  box-shadow:0 0 35px rgba(196,30,42,.45);
}

.corp-benefit:hover::after{
  opacity:1;
}

/* ==============================
   CORPORATE FEATURE CARD
============================== */

.corp-feature-card{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  padding:32px 28px 60px 28px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 50px rgba(0,0,0,0.28);
  position:relative;
  overflow:visible;
}

.corp-feature-text{
  color:rgba(255,255,255,0.78);
  font-size:1rem;
  line-height:1.7;
}

/* IMAGE CONTAINER */

.corp-feature-image{
  position:relative;
  margin-top:30px;
  transform:translateY(40px);
}

.corp-feature-image img{
  width:100%;
  height:340px;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,0.45);
  transition:all .45s ease;
}

/* HOVER EFFECT */

.corp-feature-card:hover .corp-feature-image img{
  transform:scale(1.04);
  box-shadow:
    0 35px 100px rgba(0,0,0,0.6),
    0 0 40px rgba(196,30,42,.45);
}

/* ==============================
   CTA PUNCH RIPPLE EFFECT
============================== */

.btn-primary,
.btn-outline,
.btn-glass,
.cinema-join-btn,
.mobile-join-btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.btn-primary::after,
.btn-outline::after,
.btn-glass::after,
.cinema-join-btn::after,
.mobile-join-btn::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(255,255,255,0.22);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  pointer-events:none;
  z-index:0;
}

.btn-primary:hover::after,
.btn-outline:hover::after,
.btn-glass:hover::after,
.cinema-join-btn:hover::after,
.mobile-join-btn:hover::after{
  animation:ctaPunchRipple .7s ease-out;
}

.btn-primary:active,
.btn-outline:active,
.btn-glass:active,
.cinema-join-btn:active,
.mobile-join-btn:active{
  transform:translateY(0) scale(.985);
}

.btn-primary span,
.btn-outline span,
.btn-glass span,
.cinema-join-btn span,
.mobile-join-btn span{
  position:relative;
  z-index:1;
}

@keyframes ctaPunchRipple{
  0%{
    transform:translate(-50%,-50%) scale(0);
    opacity:.45;
  }
  70%{
    transform:translate(-50%,-50%) scale(10);
    opacity:.16;
  }
  100%{
    transform:translate(-50%,-50%) scale(14);
    opacity:0;
  }
}

video{
  background:#000;
}

video[poster]{
  object-fit:cover;
}

/* ===========================
   CINEMATIC VIDEO FRAME
=========================== */

.video-frame{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  max-width:1100px;
  margin:0 auto;
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
  transition:all .4s ease;
}

/* glow frame */

.video-frame::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  pointer-events:none;
  opacity:0;
  box-shadow:
    0 0 0 1px rgba(196,30,42,.6),
    0 0 45px rgba(196,30,42,.55),
    0 0 80px rgba(196,30,42,.35);
  transition:opacity .35s ease;
}

/* activated glow */

.video-frame.playing::after{
  opacity:1;
}

/* ===========================
   AMBIENT RED GLOW BEHIND VIDEO
=========================== */

.video-frame{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  max-width:1100px;
  margin:0 auto;
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
}

/* ambient glow layer */

.video-frame::before{
  content:"";
  position:absolute;
  inset:-60px;
  z-index:-1;
  background:radial-gradient(circle at center,
      rgba(196,30,42,0.25),
      transparent 65%);
  filter:blur(60px);
  animation:rjjAmbientGlow 12s ease-in-out infinite alternate;
}

/* drifting movement */

@keyframes rjjAmbientGlow{

  0%{
    transform:translate(-10px,-10px) scale(1);
    opacity:.6;
  }

  50%{
    transform:translate(10px,5px) scale(1.05);
    opacity:.9;
  }

  100%{
    transform:translate(-5px,12px) scale(1.1);
    opacity:.7;
  }

}

/* ===========================
   RJJ ENERGY PARTICLES
=========================== */

.video-frame{
  position:relative;
}

/* particle layer */

.video-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px),
    radial-gradient(rgba(196,30,42,0.25) 1px, transparent 1px);
  background-size:120px 120px, 160px 160px;
  opacity:.25;
  animation:rjjParticles 40s linear infinite;
}

/* drifting particles */

@keyframes rjjParticles{

  0%{
    background-position:0 0, 0 0;
  }

  100%{
    background-position:300px -200px, -250px 300px;
  }

}

.video-frame video{
  position:relative;
  z-index:2;
}

.video-frame::before{
  z-index:0;
}

.video-frame::after{
  z-index:1;
}

.video-frame video{
  position:relative;
  z-index:2;
}

.video-frame::before{
  z-index:0;
}

.video-frame::after{
  z-index:1;
}

/* Premium Glass Card Upgrade (only for this section) */

.cinema-section-half .glass-card{
  background: rgba(20,20,20,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;

  padding: 30px 26px;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.06);

  transition: all .35s ease;
}
.cinema-section-half .glass-card:hover{
  transform: translateY(-6px);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.45),
    0 0 30px rgba(196,30,42,0.35);
}



/* MEMBERSHIP CHECKMARK ALIGNMENT FIX */
.pricing-card ul li{
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  padding:14px 0 !important;
  line-height:1.6 !important;
}

.pricing-card ul li::before{
  content:"✓" !important;
  position:static !important;
  flex:0 0 auto !important;
  margin-top:3px !important;
  font-size:12px !important;
  font-weight:700 !important;
  color:var(--red) !important;
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:30px;
}

/* TOP ROW - 3 trainers */
.team-grid .trainer-card:nth-child(1),
.team-grid .trainer-card:nth-child(2),
.team-grid .trainer-card:nth-child(3){
  grid-column:span 4;
}

/* BOTTOM ROW - 4 trainers */
.team-grid .trainer-card:nth-child(4),
.team-grid .trainer-card:nth-child(5),
.team-grid .trainer-card:nth-child(6),
.team-grid .trainer-card:nth-child(7){
  grid-column:span 3;
}

/* Tablet */
@media (max-width:992px){

  .team-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .team-grid .trainer-card{
    grid-column:span 1 !important;
  }

}

/* Mobile */
@media (max-width:640px){

  .team-grid{
    grid-template-columns:1fr;
  }

}

/* ===========================
   PREMIUM TRAINER CARD EFFECT
=========================== */

.trainer-card{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  aspect-ratio:3/4;
  cursor:pointer;
  transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 18px 45px rgba(0,0,0,0.28);
}

.trainer-card:hover{
  transform:translateY(-8px);
  border-color:rgba(196,30,42,0.35);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.45),
    0 0 30px rgba(196,30,42,0.18);
}

.trainer-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s ease, filter .55s ease;
}

.trainer-card:hover img{
  transform:scale(1.08);
  filter:brightness(1.05);
}

.trainer-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.45) 38%,
    rgba(0,0,0,0.05) 72%,
    rgba(0,0,0,0) 100%
  );
  z-index:1;
  transition:opacity .35s ease;
}

.trainer-card:hover::before{
  opacity:.95;
}

.trainer-card::after{
  content:"";
  position:absolute;
  inset:auto 8% -18px 8%;
  height:32px;
  background:radial-gradient(ellipse at center, rgba(196,30,42,0.28) 0%, rgba(196,30,42,0.06) 45%, rgba(196,30,42,0) 76%);
  filter:blur(10px);
  opacity:0;
  z-index:0;
  transition:opacity .35s ease, transform .35s ease;
}

.trainer-card:hover::after{
  opacity:1;
  transform:scale(1.04);
}

.trainer-card-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  padding:26px 22px 22px;
  background:linear-gradient(to top, rgba(8,8,8,0.92), rgba(8,8,8,0.28), transparent);
  transition:transform .35s ease, background .35s ease;
}

.trainer-card:hover .trainer-card-overlay{
  background:linear-gradient(to top, rgba(30,6,10,0.92), rgba(8,8,8,0.28), transparent);
}

.trainer-card-overlay h3{
  font-size:1.22rem;
  line-height:1.15;
  margin-bottom:6px;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,0.35);
}

.trainer-card-overlay p{
  font-size:.86rem;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.78);
  font-weight:600;
}

.stagger-children.revealed > *:nth-child(7){
  opacity:1;
  transform:translateY(0);
  transition-delay:0.7s;
}

/* ===========================
   TRAINER BIO POPUP EFFECT
=========================== */

.trainer-card{
  position:relative;
  overflow:hidden;
}

.trainer-bio-popup{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  pointer-events:none;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .35s ease, transform .35s ease;
}

.trainer-bio-popup::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(8,8,8,0.94) 0%,
    rgba(8,8,8,0.76) 45%,
    rgba(8,8,8,0.18) 100%
  );
  opacity:0;
  transition:opacity .35s ease;
}

.trainer-bio-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:100%;
  background:rgba(12,12,12,0.78);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:14px;
  padding:18px 18px 16px;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.38),
    0 0 26px rgba(196,30,42,0.14);
}

.trainer-bio-inner h4{
  font-size:1rem;
  margin-bottom:4px;
  color:#fff;
}

.trainer-bio-inner span{
  display:block;
  font-size:.72rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--red-bright);
  font-weight:700;
  margin-bottom:10px;
}

.trainer-bio-inner p{
  font-size:.84rem;
  line-height:1.7;
  color:rgba(255,255,255,0.84);
  margin:0;
}

/* DESKTOP HOVER */
@media (min-width: 993px){
  .trainer-card:hover .trainer-bio-popup{
    opacity:1;
    transform:translateY(0);
  }

  .trainer-card:hover .trainer-bio-popup::before{
    opacity:1;
  }

  .trainer-card:hover .trainer-card-overlay{
    opacity:0;
    transform:translateY(12px);
  }

  .trainer-card .trainer-card-overlay{
    transition:opacity .3s ease, transform .3s ease;
  }
}

/* MOBILE / TABLET SCROLL-IN VIEW */
@media (max-width: 992px){
  .trainer-card.in-view .trainer-bio-popup{
    opacity:1;
    transform:translateY(0);
  }

  .trainer-card.in-view .trainer-bio-popup::before{
    opacity:1;
  }

  .trainer-card.in-view .trainer-card-overlay{
    opacity:0;
    transform:translateY(12px);
  }

  .trainer-card .trainer-card-overlay{
    transition:opacity .3s ease, transform .3s ease;
  }
}

.stagger-children.revealed > *:nth-child(7){
  opacity:1;
  transform:translateY(0);
  transition-delay:0.7s;
}

.stagger-children.revealed > *:nth-child(8){
  opacity:1;
  transform:translateY(0);
  transition-delay:0.8s;
}

.stagger-children.revealed > *:nth-child(9){
  opacity:1;
  transform:translateY(0);
  transition-delay:0.9s;
}

.hero-subline {
  margin: 18px 0 0;
  overflow: hidden;
}

.hero-subline span {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.96);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.78) 0%,
    rgba(255,255,255,0.98) 18%,
    rgba(255,255,255,0.82) 38%,
    rgba(255,255,255,0.98) 52%,
    rgba(255,255,255,0.82) 68%,
    rgba(255,255,255,0.96) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 10px rgba(255,255,255,0.10),
    0 0 22px rgba(255,255,255,0.08),
    0 2px 18px rgba(0,0,0,0.30);
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  filter: blur(6px);
  animation:
    cinemaLineReveal 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards,
    cinemaLineShimmer 4.8s ease-in-out 1.9s infinite;
  will-change: transform, opacity, filter, background-position;
}

@keyframes cinemaLineReveal {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
    filter: blur(6px);
    letter-spacing: 0.08em;
  }
  60% {
    opacity: 0.92;
    transform: translateY(0) scale(1);
    filter: blur(0);
    letter-spacing: 0.02em;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    letter-spacing: 0.01em;
  }
}

@keyframes cinemaLineShimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (max-width: 768px) {
  .hero-subline span {
    white-space: normal;
    font-size: 1rem;
    line-height: 1.55;
  }
}

<style>
  .event-teaser {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 340px;
    max-width: calc(100vw - 24px);
    background: rgba(10,10,10,0.96);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.45);
    z-index: 9998;
    overflow: hidden;
    transform: translateY(18px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
  }

  .event-teaser.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .event-teaser-inner {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: stretch;
  }

  .event-teaser-image-wrap {
    background: #000;
    overflow: hidden;
  }

  .event-teaser-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .event-teaser-content {
    padding: 18px 18px 16px;
    color: #fff;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
      linear-gradient(135deg, rgba(196,30,42,0.14), transparent 45%);
  }

  .event-teaser-tag {
    display: inline-block;
    margin-bottom: 8px;
    color: #f1d04b;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-size: 0.68rem;
    font-weight: 700;
  }

  .event-teaser-content h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.1;
  }

  .event-teaser-content p {
    margin: 0 0 14px;
    color: rgba(255,255,255,0.78);
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .event-teaser-btn {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 2px solid var(--red, #c41e2a);
    background: var(--red, #c41e2a);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .event-teaser-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(196,30,42,0.32);
  }

  .event-teaser-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 3;
  }

  .event-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }

  .event-popup-overlay.show {
    opacity: 1;
    visibility: visible;
  }

  .event-popup-modal {
    position: relative;
    width: 100%;
    max-width: 1100px;
    max-height: 92vh;
    overflow: hidden;
    border-radius: 24px;
    background: #0b0b0b;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 30px 100px rgba(0,0,0,0.55);
    transform: translateY(18px) scale(0.98);
    transition: transform 0.35s ease;
  }

  .event-popup-overlay.show .event-popup-modal {
    transform: translateY(0) scale(1);
  }

  .event-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
  }

  .event-popup-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 620px;
  }

  .event-popup-image-wrap {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
  }

  .event-popup-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
  }

  .event-popup-content {
    padding: 56px 42px 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
      linear-gradient(135deg, rgba(196,30,42,0.16), transparent 45%);
    color: #fff;
  }

  .event-popup-tag {
    display: inline-block;
    margin-bottom: 14px;
    color: #f1d04b;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.78rem;
    font-weight: 700;
  }

  .event-popup-content h2 {
    margin: 0 0 10px;
    font-size: 2.7rem;
    line-height: 1.05;
    color: #fff;
  }

  .event-popup-subtitle {
    margin: 0 0 18px;
    color: #f1d04b;
    font-size: 1.15rem;
    line-height: 1.5;
    font-weight: 600;
  }

  .event-popup-text {
    margin: 0 0 16px;
    color: rgba(255,255,255,0.84);
    font-size: 1rem;
    line-height: 1.8;
  }

  .event-popup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
  }

  .event-popup-btn,
  .event-popup-btn-outline {
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.25s ease;
    cursor: pointer;
  }

  .event-popup-btn {
    background: var(--red, #c41e2a);
    color: #fff;
    border: 2px solid var(--red, #c41e2a);
    box-shadow: 0 14px 30px rgba(196,30,42,0.30);
  }

  .event-popup-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(196,30,42,0.38);
  }

  .event-popup-btn-outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.18);
  }

  .event-popup-btn-outline:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-2px);
  }

  @media (max-width: 900px) {
    .event-popup-modal {
      max-height: 94vh;
      overflow-y: auto;
    }

    .event-popup-inner {
      grid-template-columns: 1fr;
      min-height: auto;
    }

    .event-popup-image-wrap {
      max-height: 55vh;
    }

    .event-popup-content {
      padding: 34px 22px 28px;
    }

    .event-popup-content h2 {
      font-size: 2rem;
    }
  }

  @media (max-width: 640px) {
    .event-teaser {
      right: 12px;
      bottom: 12px;
      left: 12px;
      width: auto;
      max-width: none;
    }

    .event-teaser-inner {
      grid-template-columns: 90px 1fr;
    }

    .event-teaser-content {
      padding: 16px 14px 14px;
    }

    .event-teaser-content h3 {
      font-size: 1rem;
    }

    .event-teaser-content p {
      font-size: 0.82rem;
    }
  }
</style>

.policy-card a {
  color: var(--red-bright, #ff3b30);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.policy-card a:hover {
  color: #ffffff;
}

.policy-link-red {
  color: var(--red-bright, #ff3b30);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.policy-link-red:hover {
  color: #ffffff;
}