:root{
  --bg:#0b0d13;
  --panel:#111522;
  --text:#e9ecf5;
  --muted:#b8bfd6;

  /* Reds */
  --brand:#ff0033;
  --brand2:#ff4d6d;

  --radius: 18px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);

  --container: 1100px;

  /* Reveal defaults */
  --reveal-distance: 16px;
  --reveal-duration: 700ms;
  --reveal-ease: cubic-bezier(.2,.8,.2,1);
  --float-ease: cubic-bezier(.38,0,.22,1);

  /* UI strokes */
  --stroke: rgba(255,255,255,.12);
  --stroke2: rgba(255,255,255,.08);
}

/* Prevent horizontal scroll WITHOUT breaking hover/click in Safari */
html{
  width: 100%;
  overflow-x: hidden;
}

body{
  width: 100%;
  overflow-x: hidden;
}
/* Clamp only the effect zones that can overflow */
.hero,
.section,
.mediaFrame,
.cardMedia{
  overflow-x: clip;
}

@supports not (overflow-x: clip){
  .hero,
  .section,
  .mediaFrame,
  .cardMedia{
    overflow-x: hidden;
  }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }


body{
  margin:0;
  font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height:1.5;
  position: relative;

  /* Page load / transitions */
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 600ms cubic-bezier(.2,.8,.2,1),
    transform 600ms cubic-bezier(.2,.8,.2,1);
}
body.is-loaded{ opacity: 1; transform: none; }
body.is-leaving{ opacity: 0; transform: translateY(10px); }

a{ color: inherit; text-decoration: none; }
a:hover{ opacity:.92; }
strong{ font-weight:700; }
.container{ width: min(var(--container), calc(100% - 2rem)); margin-inline:auto; }

.skip{
  position:absolute; left:-999px; top:0;
  background:#fff; color:#000;
  padding:.75rem 1rem; border-radius: 999px;
}
.skip:focus{ left: 1rem; top: 1rem; z-index: 9999; }

.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;
}

/* =========================
   Buttons
   ========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding: .9rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  cursor:pointer;
  user-select:none;

  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}
.btn--sm{ padding:.6rem .85rem; font-weight: 700; font-size:.95rem; }

.btn--primary{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  box-shadow:
    0 16px 44px rgba(255,0,51,.26),
    0 0 0 1px rgba(255,255,255,.10);
}
.btn--primary::before{
  content:"";
  position:absolute;
  inset: 12%;
  border-radius: inherit;
  pointer-events:none;
  opacity: 0;
  background:
    radial-gradient(circle at 18% 42%, rgba(255,255,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 18%, rgba(255,77,109,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 34%, rgba(255,255,255,.9) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 82% 70%, rgba(255,77,109,.82) 0 2px, transparent 3px),
    radial-gradient(circle at 28% 76%, rgba(255,255,255,.85) 0 1.5px, transparent 2.5px);
  transform: scale(.84);
}
.btn--ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}

.sitePopup{
  position: fixed;
  right: clamp(1rem, 3vw, 1.6rem);
  bottom: clamp(1rem, 3vw, 1.6rem);
  z-index: 70;
  width: min(420px, calc(100vw - 2rem));
  padding: 1.05rem 1.05rem 1rem 1.25rem;
  border-radius: 20px;
  border: 2px solid rgba(255,66,96,.72);
  background:
    radial-gradient(520px 190px at 0% 0%, rgba(255,59,93,.34), transparent 60%),
    linear-gradient(145deg, rgba(43,17,31,.98), rgba(12,18,31,.99) 58%, rgba(7,11,20,.99));
  box-shadow:
    0 24px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.1),
    0 0 42px rgba(255,47,86,.22);
  opacity: 0;
  overflow: hidden;
  transform: translateY(18px) scale(.98);
  transition: opacity 220ms ease, transform 220ms ease;
}
.sitePopup::before{
  content:"";
  position:absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, #ff2b52, #ffe3a5 52%, #ff2b52);
  box-shadow: 0 0 22px rgba(255,54,90,.55);
}
.sitePopup.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.sitePopup__close{
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.sitePopup__eyebrow{
  margin: 0 2.4rem .25rem 0;
  color: rgba(255,235,189,.98);
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sitePopup h2{
  margin: .35rem 2.2rem .35rem 0;
  font-size: 1.3rem;
  line-height: 1.12;
}
.sitePopup p{
  margin: 0;
  color: rgba(246,248,255,.9);
  line-height: 1.55;
}
.sitePopup__actions{
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  margin-top: .9rem;
}

@media (max-width: 620px){
  .sitePopup{
    right: 1rem;
    left: 1rem;
    bottom: 1rem;
    width: auto;
  }
  .sitePopup__close{
    top: .8rem;
    right: .8rem;
  }
  .sitePopup h2,
  .sitePopup p,
  .sitePopup__eyebrow{
    margin-right: 2.5rem;
  }
}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{
    transform: translateY(-2px) scale(1.02);
    box-shadow:
      0 22px 60px rgba(255,0,51,.32),
      0 0 0 1px rgba(255,255,255,.12),
      0 0 40px rgba(255,0,51,.22);
  }
  .btn--primary:hover::before{
    animation: ctaSparkle 680ms ease-out 1;
  }
  .btn--ghost:hover{
    transform: translateY(-2px);
    border-color: rgba(255,77,109,.35);
    box-shadow: 0 14px 40px rgba(0,0,0,.30);
  }
}
.btn:active{ transform: translateY(1px) scale(.985); }

/* Ripple */
.btn::after{
  content:"";
  position:absolute;
  left: var(--rx, 50%);
  top: var(--ry, 50%);
  width: 0;
  height: 0;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.35), rgba(255,0,51,.22), transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events:none;
}
.btn.is-pressed::after{
  animation: btnRipple 520ms cubic-bezier(.2,.8,.2,1) 1;
}
.btn--primary.is-pressed::before{
  animation: ctaSparkle 620ms ease-out 1;
}
@keyframes btnRipple{
  0%   { width: 0; height: 0; opacity: .55; }
  100% { width: 420px; height: 420px; opacity: 0; }
}
@keyframes ctaSparkle{
  0%{ opacity: 0; transform: scale(.78) rotate(0deg); filter: blur(.5px); }
  28%{ opacity: .95; }
  100%{ opacity: 0; transform: scale(1.28) rotate(10deg); filter: blur(0); }
}

/* =========================
   Header
   ========================= */
.header{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(11,13,19,.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: box-shadow .2s ease;
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: .95rem 0;
  gap: 1rem;
}
.brand{
  display:flex; align-items:center; gap:.75rem;
  min-width: 220px;
}
.brand__mark{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 48px;
  min-width: 140px;
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
}

.brand__logo{
  height: 48px;
  width: auto;
  display:block;
}
@media (min-width: 900px){
  .brand__logo{
    height: 58px;
  }
}

/* Glow pulse behind logo */
.brand__mark::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 50%, rgba(255,0,51,.45), transparent 60%);
  filter: blur(10px);
  opacity: 0;
  transform: scale(.85);
  pointer-events:none;
}
body.is-loaded .brand__mark::before{
  animation:
    logoPulse 900ms cubic-bezier(.2,.8,.2,1) 1 both,
    logoIdleGlow 16s ease-in-out 3.5s infinite;
}
@keyframes logoPulse{
  0%   { opacity: 0; transform: scale(.80); }
  35%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.25); }
}
@keyframes logoIdleGlow{
  0%, 76%, 100%{ opacity: 0; transform: scale(.92); }
  84%{ opacity: .28; transform: scale(1.02); }
  92%{ opacity: .10; transform: scale(1.12); }
}

.brand__name{ display:block; font-weight: 800; line-height:1.05; }
.brand__sub{ display:block; color: var(--muted); font-size: .95rem; margin-top: .15rem; }

.nav{
  display:flex;
  align-items:center;
  gap: 1.1rem;
}

.nav a{
  color: var(--muted);
  font-weight: 600;
  position: relative;
  transition:
    color 220ms cubic-bezier(.2,.8,.2,1),
    transform 220ms cubic-bezier(.2,.8,.2,1),
    opacity 220ms cubic-bezier(.2,.8,.2,1);
}

.nav a:hover{
  color: var(--text);
}

.nav a::after{
  content:"";
  position:absolute;
  left: 10%;
  right: 10%;
  bottom: -8px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  box-shadow:
    0 0 12px rgba(255,0,51,.28),
    0 0 20px rgba(255,77,109,.18);
  transform: scaleX(0);
  transform-origin: center;
  opacity: .95;
  transition:
    transform 260ms cubic-bezier(.2,.8,.2,1),
    opacity 220ms ease,
    box-shadow 220ms ease;
}



.nav a[aria-current="page"]{
  color: var(--text);
  font-weight: 800;
}

.nav a[aria-current="page"]::after,
.nav a.is-section-active::after{
  transform: scaleX(1);
}

.nav a.is-section-active{
  color: var(--text);
}

@media (hover:hover) and (pointer:fine){
  .nav a:hover{
    color: var(--text);
    transform: translateY(-1px);
  }

  .nav a:hover::after{
    transform: scaleX(1);
  }
}

@media (max-width: 980px){
  .nav a::after{
    bottom: 6px;
    left: 14px;
    right: 14px;
  }
}

.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav__cta{
  margin-left: .25rem;
  color: #fff !important;
}

.navToggle{
  display:none;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  align-items:center; justify-content:center;
  gap:5px;
}
.navToggle__bar{
  width: 18px; height: 2px; background: rgba(255,255,255,.85);
  display:block;
}

/* =========================
   Hero
   ========================= */
.hero{ padding: 4.2rem 0 1.6rem; }
.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 2rem;
  align-items:center;
}
.hero__grid--textOnly{
  grid-template-columns: minmax(0, 780px);
  justify-content: center;
  text-align: center;
}
.hero__grid--textOnly .hero__actions{
  justify-content: center;
}
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--muted);
  font-weight: 700;
  font-size: .95rem;
}
.hero h1{
  margin: .8rem 0 .65rem;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-shadow: 0 10px 35px rgba(0,0,0,.55);
}
.grad{
  background: linear-gradient(110deg, var(--brand) 0%, var(--brand2) 38%, rgba(255,255,255,.92) 50%, var(--brand2) 62%, var(--brand) 100%);
  background-size: 240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  animation: heroTextGlimmer 11s ease-in-out infinite;
}
.hero__lead{
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 1.05rem;
}
.hero__actions{ display:flex; gap:.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.hero__actions .btn{
  will-change: transform, box-shadow;
}
.hero__trust{
  display:grid;
  grid-template-columns: 1fr;
  gap:.5rem;
  color: var(--muted);
}
.trustItem{
  display:flex; align-items:center; gap:.6rem;
  padding: .55rem .65rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  transition: transform 420ms var(--float-ease), border-color 420ms ease, background 420ms ease;
}
.trustItem__icon{ font-size: 1.05rem; }

/* =========================
   Media frames / images
   ========================= */
.mediaFrame{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  position: relative;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.hero .mediaFrame{
  transform-style: preserve-3d;
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.hero .mediaFrame.is-depth-active{
  box-shadow:
    var(--shadow),
    0 18px 60px rgba(255,0,51,.10);
}
/* Neutral overlay only (no red tint) */
.mediaFrame::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 300px at 15% 20%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.45));
  pointer-events:none;
}
.mediaFrame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  border-radius: inherit;
  transform: translateZ(0) scale(1.01);
  filter: none;
}
.mediaBadge{
  position:absolute;
  left: 14px; bottom: 14px;
  padding:.45rem .7rem;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  z-index: 2;
  backdrop-filter: blur(8px);
  animation: badgeFloat 8s ease-in-out infinite alternate;
}
.mediaFrame .mediaBadge:nth-of-type(2n){
  animation-duration: 10.5s;
  animation-direction: alternate-reverse;
}
.partyPhotoGlow{
  position:absolute;
  inset:0;
  z-index: 1;
  pointer-events:none;
  opacity: .75;
  background:
    linear-gradient(112deg, transparent 0 28%, rgba(255,77,109,.18) 38%, rgba(255,255,255,.08) 44%, transparent 58% 100%),
    radial-gradient(220px 120px at 78% 24%, rgba(125,90,255,.22), transparent 62%);
  mix-blend-mode: screen;
  animation: partyGlowSweep 8.6s ease-in-out infinite;
}
/* Micro parallax target (JS sets --py) */
.hero .mediaFrame img{
  will-change: transform;
  transform: translate3d(var(--depth-x, 0px), calc(var(--py, 0px) + var(--depth-y, 0px)), 0) scale(1.055);
  transition: transform 120ms linear;
}

body.home .hero .mediaFrame img{
  animation: ambientHeroBreath 18s ease-in-out infinite alternate;
}

/* =========================
   Sections
   ========================= */
.section{ padding: 3.2rem 0; }
.section--tight{ padding: 1.2rem 0 2.2rem; }

.section--alt{
  background: rgba(11,13,19,.38);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.sectionHead{ max-width: 760px; }
.sectionHead h2{ margin:0 0 .5rem; font-size: 2rem; }
.sectionHead p{ margin:0; color: var(--muted); }

/* =========================
   ✅ ONE glow system (Hero + alternating sections)
   ========================= */
.hero,
.section{
  position: relative;
  isolation: isolate;
}

/* base glow layer */
.hero::before,
.section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;

  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(255,0,51,.22), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(255,77,109,.18), transparent 55%),
    radial-gradient(900px 600px at 50% 120%, rgba(255,0,51,.10), transparent 55%);

  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* Hero strong */
.hero::before{ opacity:1; }

/* Alternate sections: use .section only (NOT main>section) */
.section:nth-of-type(even)::before{ opacity:.68; }

/* Tight section softer */
.section--tight::before{ opacity:.40 !important; }

body.home .section--alt::after,
body.home .section:not(.section--tight)::after{
  content:"";
  position:absolute;
  left: max(1rem, calc((100% - var(--container)) / 2));
  right: max(1rem, calc((100% - var(--container)) / 2));
  top:0;
  height: 1px;
  z-index: 0;
  pointer-events:none;
  opacity: .42;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,77,109,.42) 16%, rgba(255,255,255,.28) 28%, rgba(255,77,109,.20) 42%, transparent 62%);
  background-size: 220% 100%;
  animation: sectionLightLine 14s ease-in-out infinite;
}

body.home .section:nth-of-type(odd)::after{
  animation-delay: -7s;
  opacity: .30;
}

/* =========================
   Highlights
   ========================= */
.highlights{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
}
.highlight{
  text-align:center;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(255,77,109,.18);
  background: rgba(255,255,255,.03);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 18px 50px rgba(0,0,0,.25);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  will-change: transform, box-shadow;
}
.highlight__num{ margin:0; font-weight: 900; font-size: 1.6rem; text-shadow: 0 12px 35px rgba(255,0,51,.12); }
.highlight__label{ margin:.15rem 0 0; color: var(--muted); font-weight: 600; }
@media (hover:hover) and (pointer:fine){
  .highlight:hover{
    transform: translateY(-4px);
    border-color: rgba(255,77,109,.28);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.05),
      0 22px 56px rgba(0,0,0,.32);
  }
}

/* =========================
   Cards
   ========================= */
.cards{
  margin-top: 1.5rem;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.card{
  border-radius: var(--radius);
  border: 1px solid var(--stroke2);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 100%;

  transition:
    transform 110ms cubic-bezier(.22,.9,.25,1),
    box-shadow 160ms ease-out,
    border-color 160ms ease-out,
    background 220ms ease-out;
}
.cardMedia{
  height: 150px;
  position:relative;
  overflow:hidden;
  background: rgba(255,255,255,.02);
  border-radius: calc(var(--radius) - 2px);
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.cardMedia img{
  position: relative;
  z-index: 0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius: inherit;
  transform: translateZ(0);
  filter: none;
  backface-visibility: hidden;
  image-rendering: auto;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1), filter 360ms ease;
}

body.home .section:not(.activityCardsSection) .mediaFrame img,
body.home .activityCardsSection .cardMedia img{
  animation: ambientImageBreath 20s ease-in-out infinite alternate;
  animation-delay: var(--breath-delay, 0s);
}

body.home .activityCardsSection .card:nth-child(2) .cardMedia img{ --breath-delay: -5s; }
body.home .activityCardsSection .card:nth-child(3) .cardMedia img{ --breath-delay: -10s; }
body.home .activityCardsSection .card:nth-child(4) .cardMedia img{ --breath-delay: -15s; }
.cardMedia::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.34));
  pointer-events:none;
  transition: opacity 260ms ease, background 260ms ease;
}
.cardBody{
  padding: 1.05rem 1.15rem 1.15rem;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  flex:1;
}
.cardTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
.card h3{ margin: .15rem 0 .15rem; }
.card p{ margin:0; color: var(--muted); }
.chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.3rem .6rem;
  border-radius:999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.9);
  font-weight:800;
  font-size:.9rem;
  white-space:nowrap;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.card__link{
  margin-top: .85rem;
  display:inline-block;
  color: rgba(255,77,109,.98);
  font-weight: 800;
  transition: transform 180ms ease;
}
@media (hover:hover) and (pointer:fine){
  .card:hover{
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(255,77,109,.42);
    box-shadow:
      0 18px 60px rgba(0,0,0,.50),
      0 0 0 1px rgba(255,0,51,.22),
      0 0 48px rgba(255,0,51,.18);
  }
}
@media (hover:none){ .card:hover{ transform:none; } }

.activityCardsSection .card{
  position: relative;
  isolation: isolate;
}
.activityCardsSection .card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity: 0;
  background: radial-gradient(280px 160px at 50% 0%, var(--activity-glow, rgba(255,77,109,.18)), transparent 68%);
  transition: opacity 240ms ease;
}
.activityCardsSection #bowling{ --activity-glow: rgba(255,77,109,.24); }
.activityCardsSection #minigolf{ --activity-glow: rgba(137,231,179,.20); }
.activityCardsSection #arcade{ --activity-glow: rgba(125,90,255,.24); }
.activityCardsSection #cafe{ --activity-glow: rgba(255,211,106,.20); }
.activityMotion{
  position:absolute;
  inset:0;
  z-index: 2;
  opacity: 0;
  pointer-events:none;
  transition: opacity 220ms ease;
}
.activityMotion span{
  animation-play-state: paused !important;
}

.activityMotion--bowling span{
  position:absolute;
  left: -34%;
  width: 38%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,77,109,.72), rgba(255,255,255,.48), transparent);
  box-shadow: 0 0 12px rgba(255,77,109,.26);
  transform: skewX(-18deg);
  animation: bowlingLaneTrace 1300ms ease-out infinite;
}
.activityMotion--bowling span:nth-child(1){ bottom: 32%; animation-delay: 0ms; }
.activityMotion--bowling span:nth-child(2){ bottom: 43%; animation-delay: 180ms; opacity: .72; }
.activityMotion--bowling span:nth-child(3){ bottom: 54%; animation-delay: 360ms; opacity: .54; }

.activityMotion--golf span:nth-child(1){
  position:absolute;
  left: 15%;
  bottom: 24%;
  width: 54%;
  border-top: 2px dotted rgba(137,231,179,.74);
  transform: rotate(-9deg);
  transform-origin: left center;
  filter: drop-shadow(0 0 8px rgba(137,231,179,.24));
}
.activityMotion--golf span:nth-child(2){
  position:absolute;
  left: 15%;
  bottom: 22%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(245,255,248,.88);
  box-shadow: 0 0 0 3px rgba(137,231,179,.14), 0 0 12px rgba(137,231,179,.30);
  animation: golfPutt 1450ms cubic-bezier(.2,.8,.2,1) infinite;
}
.activityMotion--golf span:nth-child(3){
  position:absolute;
  left: 67%;
  bottom: 29%;
  width: 18px;
  height: 10px;
  border: 2px solid rgba(137,231,179,.72);
  border-top-color: transparent;
  border-radius: 50%;
  transform: rotate(-9deg);
  animation: golfCupPulse 1450ms ease-in-out infinite;
}

.activityMotion--arcade span:nth-child(1){
  position:absolute;
  left:0;
  right:0;
  top:-22%;
  height: 24%;
  background: linear-gradient(180deg, transparent, rgba(125,90,255,.18), rgba(255,255,255,.065), transparent);
  animation: arcadeScan 1500ms linear infinite;
}
.activityMotion--arcade span:nth-child(2),
.activityMotion--arcade span:nth-child(3){
  position:absolute;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: rgba(255,255,255,.70);
  box-shadow:
    16px 11px 0 rgba(125,90,255,.68),
    32px -3px 0 rgba(255,77,109,.68),
    48px 15px 0 rgba(255,211,106,.62);
  animation: arcadePixels 980ms steps(2, end) infinite;
}
.activityMotion--arcade span:nth-child(2){ left: 18%; top: 28%; }
.activityMotion--arcade span:nth-child(3){ right: 26%; top: 45%; animation-delay: 210ms; }

.activityMotion--cafe span{
  position:absolute;
  bottom: 28%;
  width: 14px;
  height: 30px;
  border-left: 2px solid rgba(255,255,255,.46);
  border-radius: 50%;
  filter: drop-shadow(0 0 7px rgba(255,211,106,.22));
  opacity: 0;
  animation: cafeSteam 2100ms ease-in-out infinite;
}
.activityMotion--cafe span:nth-child(1){ right: 30%; animation-delay: 0ms; }
.activityMotion--cafe span:nth-child(2){ right: 24%; animation-delay: 390ms; }
.activityMotion--cafe span:nth-child(3){ right: 18%; animation-delay: 780ms; }

@media (hover:hover) and (pointer:fine){
  .activityCardsSection .card:hover::before{
    opacity: 1;
  }
  .activityCardsSection .card:hover .activityMotion,
  .activityCardsSection .card:focus-within .activityMotion{
    opacity: .86;
  }
  .activityCardsSection .card:hover .activityMotion span,
  .activityCardsSection .card:focus-within .activityMotion span{
    animation-play-state: running !important;
  }
  .activityCardsSection .card:hover .cardMedia img{
    transform: scale(1.045);
    filter: saturate(1.08) contrast(1.04);
  }
  .activityCardsSection .card:hover .cardMedia::after{
    opacity: .9;
    background:
      radial-gradient(220px 120px at 50% 20%, rgba(255,255,255,.10), transparent 60%),
      linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.30));
  }
  .activityCardsSection .card:hover .chip{
    border-color: rgba(255,255,255,.22);
    box-shadow: 0 14px 34px rgba(0,0,0,.32), 0 0 18px var(--activity-glow, rgba(255,77,109,.16));
  }
  .activityCardsSection .card:hover .card__link{
    transform: translateX(3px);
  }
}

@keyframes bowlingLaneTrace{
  0%{ opacity: 0; transform: translateX(0) skewX(-18deg); }
  22%{ opacity: .72; }
  100%{ opacity: 0; transform: translateX(360%) skewX(-18deg); }
}

@keyframes golfPutt{
  0%{ transform: translate3d(0,0,0) scale(.92); }
  68%, 100%{ transform: translate3d(126px, -20px, 0) scale(.72); }
}

@keyframes golfCupPulse{
  0%, 62%, 100%{ opacity: .48; transform: rotate(-9deg) scale(1); }
  72%{ opacity: .82; transform: rotate(-9deg) scale(1.12); }
}

@keyframes arcadeScan{
  0%{ transform: translateY(0); opacity: 0; }
  14%{ opacity: .78; }
  100%{ transform: translateY(510%); opacity: 0; }
}

@keyframes arcadePixels{
  0%, 100%{ opacity: .30; transform: translateY(0); }
  50%{ opacity: .82; transform: translateY(-2px); }
}

@keyframes cafeSteam{
  0%{ opacity: 0; transform: translate3d(0, 10px, 0) scale(.84) rotate(10deg); }
  30%{ opacity: .48; }
  100%{ opacity: 0; transform: translate3d(-7px, -26px, 0) scale(1.14) rotate(-8deg); }
}

.activityMotion::before,
.activityMotion::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.activityMotion--bowling::before{
  left: 8%;
  right: 8%;
  bottom: 12%;
  height: 42%;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255,77,109,.48) 9%, transparent 10% 30%, rgba(255,255,255,.32) 31%, transparent 32% 50%, rgba(255,77,109,.38) 51%, transparent 52% 72%, rgba(255,255,255,.24) 73%, transparent 74%),
    radial-gradient(120px 46px at 50% 100%, rgba(255,0,51,.32), transparent 68%);
  transform: perspective(360px) rotateX(58deg);
  transform-origin: 50% 100%;
  filter: blur(.2px);
  mix-blend-mode: screen;
  animation: bowlingNeonLane 1.8s ease-in-out infinite alternate;
}
.activityMotion--bowling::after{
  right: 16%;
  bottom: 19%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.65), transparent 0 16%),
    radial-gradient(circle at 48% 48%, #ff4d6d, #5a0014 78%);
  box-shadow: 0 0 18px rgba(255,0,51,.55), 0 10px 12px rgba(0,0,0,.34);
  animation: bowlingCardBall 1.45s cubic-bezier(.2,.8,.2,1) infinite;
}
.activityMotion--golf::before{
  left: 10%;
  right: 10%;
  bottom: 6%;
  height: 62%;
  border-radius: 50%;
  background:
    radial-gradient(130px 70px at 72% 34%, rgba(137,231,179,.24), transparent 65%),
    linear-gradient(115deg, transparent 0 42%, rgba(137,231,179,.20) 43%, rgba(255,255,255,.16) 47%, transparent 58% 100%);
  mix-blend-mode: screen;
  animation: golfGreenGlow 1.9s ease-in-out infinite alternate;
}
.activityMotion--golf::after{
  left: 69%;
  bottom: 31%;
  width: 28px;
  height: 34px;
  background:
    linear-gradient(90deg, rgba(245,255,248,.9) 0 2px, transparent 2px 100%),
    linear-gradient(135deg, rgba(255,255,255,.88) 0 46%, rgba(137,231,179,.80) 47% 100%);
  background-size: 100% 100%, 20px 16px;
  background-position: 0 0, 2px 2px;
  background-repeat: no-repeat;
  box-shadow: 0 0 10px rgba(137,231,179,.32);
  transform: rotate(-8deg);
  animation: golfFlagFlutter 1.45s ease-in-out infinite alternate;
}
.activityMotion--arcade::before{
  inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, rgba(125,90,255,.22), transparent 30% 70%, rgba(255,77,109,.18));
  opacity:.72;
  mix-blend-mode: screen;
  animation: arcadeScreenFlicker 1.2s steps(3, end) infinite;
}
.activityMotion--arcade::after{
  left: 9%;
  right: 9%;
  bottom: 13%;
  height: 20px;
  border-radius: 6px;
  background:
    linear-gradient(90deg, #ff3158 0 18%, transparent 18% 23%, #7d5aff 23% 43%, transparent 43% 49%, #ffd36a 49% 68%, transparent 68% 74%, #89e7b3 74% 100%);
  box-shadow: 0 0 20px rgba(125,90,255,.32);
  transform: skewX(-12deg);
  animation: arcadeMarquee 920ms steps(4, end) infinite;
}
.activityMotion--cafe::before{
  inset:0;
  background:
    radial-gradient(130px 80px at 76% 66%, rgba(255,211,106,.24), transparent 64%),
    linear-gradient(112deg, transparent 0 36%, rgba(255,255,255,.18) 44%, rgba(255,211,106,.18) 48%, transparent 58% 100%);
  mix-blend-mode: screen;
  animation: cafeCounterGlint 2.1s ease-in-out infinite;
}
.activityMotion--cafe::after{
  right: 18%;
  bottom: 18%;
  width: 58px;
  height: 24px;
  border-radius: 4px 4px 16px 16px;
  border: 2px solid rgba(255,255,255,.46);
  border-top: 0;
  box-shadow: 0 0 18px rgba(255,211,106,.24);
  transform: rotate(-4deg);
}

@keyframes bowlingNeonLane{
  0%{ opacity:.42; transform: perspective(360px) rotateX(58deg) scaleY(.92); }
  100%{ opacity:.9; transform: perspective(360px) rotateX(58deg) scaleY(1.05); }
}
@keyframes bowlingCardBall{
  0%{ opacity:0; transform: translate3d(-130px, -44px, 0) scale(.52) rotate(0deg); }
  15%{ opacity:1; }
  78%{ opacity:1; transform: translate3d(0, 0, 0) scale(1) rotate(540deg); }
  100%{ opacity:0; transform: translate3d(18px, 5px, 0) scale(1.05) rotate(680deg); }
}
@keyframes golfGreenGlow{
  0%{ opacity:.35; transform: translateX(-5px); }
  100%{ opacity:.86; transform: translateX(4px); }
}
@keyframes golfFlagFlutter{
  0%{ transform: rotate(-8deg) skewY(0deg); }
  100%{ transform: rotate(-8deg) skewY(-5deg); }
}
@keyframes arcadeScreenFlicker{
  0%, 100%{ opacity:.42; transform: translateY(0); }
  50%{ opacity:.78; transform: translateY(1px); }
}
@keyframes arcadeMarquee{
  0%{ filter: hue-rotate(0deg) brightness(1); }
  100%{ filter: hue-rotate(80deg) brightness(1.22); }
}
@keyframes cafeCounterGlint{
  0%, 42%{ opacity:.12; transform: translateX(-36%); }
  68%{ opacity:.74; }
  100%{ opacity:.16; transform: translateX(38%); }
}

/* =========================
   Split + info boxes
   ========================= */
.split{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 1.5rem;
  align-items:start;
}
.split__actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top: 1rem; }

.infoBox{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(17,21,34,.42);
  backdrop-filter: blur(10px);
  padding: 1.2rem;
  box-shadow: var(--shadow2);
}
.infoBox h3{ margin:0 0 .75rem; }

.infoList{ list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.55rem; }
.infoList li{ color: var(--muted); display:flex; align-items:flex-start; gap:.6rem; }
.infoList a{ color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.infoBox__mini{
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1rem;
}
.infoBox__mini h4{ margin:0 0 .6rem; }

.hours{
  list-style:none; padding:0; margin:0;
  display:grid; gap:.35rem;
}
.hours li{
  display:flex; justify-content:space-between; gap:1rem;
  color: var(--muted);
  border-bottom: 1px dashed rgba(255,255,255,.08);
  padding: .35rem 0;
}
.hours li:last-child{ border-bottom:0; }
.hours li.is-today span:first-child{
  color: var(--text);
  font-weight: 700;
}
.hoursToday{
  margin: 0;
  color: var(--text);
  font-weight: 700;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1);
}
.hoursToday.is-live{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   CTA
   ========================= */
.cta{ padding: 2.4rem 0; }
.cta__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1.5rem;
  padding: 1.6rem 1.5rem;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(255,77,109,.22);
  background:
    radial-gradient(900px 300px at 18% 50%, rgba(255,0,51,.14), transparent 60%),
    radial-gradient(700px 280px at 82% 40%, rgba(255,77,109,.12), transparent 60%),
    rgba(17,21,34,.84);
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,0,51,.14),
    0 18px 50px rgba(255,0,51,.10);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta__inner::after{
  content:"";
  position:absolute;
  top:-30%;
  bottom:-30%;
  width: 140px;
  right: -180px;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 45%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.08) 55%, transparent 100%);
  filter: blur(2px);
  opacity: .55;
  pointer-events:none;
  animation: ctaSweep 7.5s ease-in-out infinite;
}
.cta__inner h2{ margin:0 0 .25rem; }
.cta__inner p{ margin:0; color: rgba(255,255,255,.82); }
.cta__actions{ display:flex; gap:.75rem; flex-wrap: wrap; }

/* =========================
   Reviews
   ========================= */
.reviewsShowcase{
  display:grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 2rem;
  align-items: start;
}
.reviewsIntro{
  padding-right: 1rem;
}
.reviewsSummaryCard{
  margin-top: 1.25rem;
  padding: 1.15rem 1.2rem;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(145deg, rgba(255,77,109,.10), rgba(24,29,44,.92) 42%, rgba(17,21,34,.96));
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.reviewsSummaryCard::after{
  content:"";
  position:absolute;
  top:-25%;
  bottom:-25%;
  width: 92px;
  left: -120px;
  z-index: 0;
  pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(255,211,106,.13), rgba(255,255,255,.10), transparent);
  transform: skewX(-18deg);
  filter: blur(1px);
  animation: reviewStarSweep 7.2s ease-in-out infinite;
}
.reviewsSummaryCard > *{
  position: relative;
  z-index: 1;
}
.reviewsSummaryTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  margin-bottom: .7rem;
}
.reviewsSummaryEyebrow{
  display:inline-flex;
  align-items:center;
  padding: .45rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(233,236,245,.86);
}
.reviewsSummaryRating{
  font-size: 1.1rem;
  font-weight: 900;
  color: #ffd36a;
  position: relative;
  display: inline-flex;
  text-shadow: 0 0 14px rgba(255,211,106,.18);
}
.reviewsSummaryLine{
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(233,236,245,.94);
}
.reviewsSummaryMeta{
  margin: .65rem 0 0;
  color: var(--muted);
  font-size: .92rem;
}
.reviewsActions{
  margin-top: 1.2rem;
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}
.reviewsTrustGrid{
  margin-top: 1.2rem;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}
.reviewsTrustCard{
  padding: .95rem 1rem 1rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    rgba(17,21,34,.72);
}
.reviewsTrustLabel{
  display:inline-flex;
  margin-bottom: .55rem;
  color: rgba(233,236,245,.66);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.reviewsTrustCard strong{
  display:block;
  font-size: 1rem;
  line-height: 1.25;
}
.reviewsTrustCard p{
  margin: .55rem 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
}
.reviewsFeatureCard{
  margin-top: 1rem;
  padding: 1.15rem 1.15rem 1.2rem;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(700px 180px at 0% 0%, rgba(255,77,109,.08), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)),
    rgba(17,21,34,.84);
}
.reviewsFeatureCard h3{
  margin: 0 0 .55rem;
  font-size: 1.3rem;
  line-height: 1.2;
}
.reviewsFeatureCard p{
  margin: 0;
  color: rgba(233,236,245,.82);
  line-height: 1.65;
}
.reviewsFeatureStats{
  margin-top: 1rem;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}
.reviewsFeatureStat{
  padding: .9rem .95rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.reviewsFeatureStat strong{
  display:block;
  font-size: .96rem;
}
.reviewsFeatureStat span{
  display:block;
  margin-top: .3rem;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.45;
}
.reviewsLiveShell{
  padding: 1.1rem;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025)),
    rgba(17,21,34,.9);
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
}
.reviewsLiveHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 1rem;
  margin-bottom: .95rem;
}
.reviewsLiveHead h3{
  margin: .45rem 0 0;
  font-size: 1.25rem;
}
.reviewsLiveHead p{
  margin: 0;
  color: var(--muted);
  max-width: 22rem;
  text-align: right;
}
.reviewsEmbedFrame{
  min-height: 460px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  padding: 1rem;
}
.reviewsWidgetHost,
.reviewsEmbedFrame > div{
  min-height: 460px;
}
.reviewsEmbedFrame > div[id^="JFWebsiteWidget-"]{
  min-height: 460px;
}
.reviewsWidgetHost[hidden]{
  display: none;
}
.reviewsFallbackGrid{
  display: grid;
  gap: 1rem;
  min-height: 0;
  align-content: start;
}
.reviewsWidgetHost{
  margin-bottom: 1rem;
}
.reviewsWidgetHost img{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  object-fit: cover;
  color: transparent;
  font-size: 0;
}
.reviewsWidgetAvatarFallback{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,77,109,.9), rgba(142,88,255,.78));
  color: #fff;
  font-weight: 900;
  font-size: .92rem;
  letter-spacing: .04em;
  flex: 0 0 auto;
}
.reviewsFallbackGrid[hidden]{
  display: none;
}
.reviewsFallbackCta{
  justify-self: flex-start;
}
.reviewsGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.reviewCard{
  min-height: 220px;
  padding: 1.2rem;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
    rgba(20,24,36,.92);
  box-shadow: 0 18px 34px rgba(0,0,0,.16);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
  will-change: transform, box-shadow;
}
.reviewCard--feature{
  grid-column: 1 / -1;
  min-height: 240px;
}
.reviewStars{
  font-size: 1.2rem;
  letter-spacing: .16em;
  color: #ffd36a;
}
.reviewQuote{
  margin: .9rem 0 1.2rem;
  font-size: 1.04rem;
  line-height: 1.7;
  color: rgba(233,236,245,.94);
}
.reviewAuthor{
  display:flex;
  align-items:center;
  gap: .8rem;
}
.reviewAuthor strong{
  display:block;
  font-size: .98rem;
}
.reviewAuthor span{
  display:block;
  margin-top: .15rem;
  color: var(--muted);
  font-size: .88rem;
}
.reviewAvatar{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 1rem;
  font-weight: 900;
  color: rgba(255,255,255,.96);
  background: linear-gradient(145deg, rgba(255,77,109,.82), rgba(125,90,255,.65));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

/* =========================
   Footer
   ========================= */
.footer{
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 2.3rem 0 1.5rem;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr .8fr;
  gap: 1.25rem;
}
.footer__brand{ margin:0 0 .4rem; font-weight: 900; font-size: 1.1rem; }
.footer__title{ margin:0 0 .5rem; font-weight: 800; }
.footer__links{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem; color: var(--muted); }
.footer__links a{ color: var(--muted); }
.footer__links a:hover{ color: var(--text); }
.footer__bottom{ margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.06); }
.footer__bottom,
.footer__bottom.reveal,
.footer__bottom.reveal:not(.is-in){
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.muted{ color: var(--muted); }
.small{ font-size: .92rem; }
input, textarea, select{ font-family: inherit; font-size: 1rem; }

/* =========================
   Scroll reveal animations
   ========================= */
.reveal{
  opacity: 0;
  transform: translateY(var(--reveal-distance)) scale(.99);
  filter: blur(4px);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease),
    filter var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform, filter;
  transition-delay: var(--d, 0ms);
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.reveal-group > *{
  opacity: 0;
  transform: translateY(18px) scale(.985);
  filter: blur(4px);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease),
    filter var(--reveal-duration) var(--reveal-ease);
  transition-delay: var(--d, 0ms);
}
.reveal-group.is-in > *{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.hero__content.reveal-group.is-in .hero__actions .btn:nth-child(1){
  animation: ctaBreath 3.6s ease-in-out 1.1s infinite alternate;
}
.hero__content.reveal-group.is-in .hero__trust .trustItem:nth-child(1){
  transform: translateX(0);
}
.reveal--up{ transform: translateY(calc(var(--reveal-distance) * 1.2)); }
.reveal--down{ transform: translateY(calc(var(--reveal-distance) * -1.2)); }
.reveal--left{ transform: translateX(calc(var(--reveal-distance) * -1.6)); }
.reveal--right{ transform: translateX(calc(var(--reveal-distance) * 1.6)); }
.reveal--zoom{ transform: translateY(10px) scale(.96); }
.reveal--blur0{ filter: none; }

/* Cards: reveal transform only BEFORE they’re in */
.card.reveal:not(.is-in){
  transform: translateY(18px) scale(.985);
}
/* =========================
   Lane shimmer on hover (ALL images) — FIXED
   ========================= */
.mediaFrame,
.cardMedia{
  position: relative;
  overflow: hidden;
}

.mediaFrame::before,
.cardMedia::before{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  opacity: 0;
  z-index: 1;

  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,.10) 42%,
    rgba(255,255,255,.24) 50%,
    rgba(255,255,255,.10) 58%,
    transparent 100%
  );

  transform: translateX(-55%);
  filter: blur(1px);
  mix-blend-mode: screen;
}

@media (hover:hover) and (pointer:fine){
  .mediaFrame:hover::before,
  .cardMedia:hover::before{
    animation: laneShimmerHover 900ms cubic-bezier(.2,.8,.2,1) 1 both;
  }

  .card:hover,
  .reviewCard:hover,
  .reviewsTrustCard:hover,
  .reviewsFeatureCard:hover{
    transform: translateY(-4px);
    box-shadow: 0 22px 52px rgba(0,0,0,.26);
    border-color: rgba(255,255,255,.14);
  }

  .trustItem:hover{
    transform: translateX(3px);
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.045);
  }
}

@keyframes laneShimmerHover{
  0%   { opacity: 0; transform: translateX(-55%); }
  12%  { opacity: .55; }
  60%  { opacity: .35; }
  100% { opacity: 0; transform: translateX(55%); }
}

@keyframes ctaBreath{
  0%{
    transform: translateY(0) scale(1);
    box-shadow:
      0 16px 44px rgba(255,0,51,.26),
      0 0 0 1px rgba(255,255,255,.10);
  }
  100%{
    transform: translateY(-2px) scale(1.02);
    box-shadow:
      0 22px 60px rgba(255,0,51,.32),
      0 0 0 1px rgba(255,255,255,.12),
      0 0 34px rgba(255,0,51,.18);
  }
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 980px){
  .hero__grid, .split{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .highlights{ grid-template-columns: repeat(2, 1fr); }
  .reviewsShowcase{ grid-template-columns: 1fr; }
  .reviewsIntro{ padding-right: 0; }
  .reviewsLiveHead{ align-items:flex-start; flex-direction:column; }
  .reviewsLiveHead p{ text-align:left; max-width:none; }
  .reviewsTrustGrid{ grid-template-columns: 1fr; }
  .reviewsFeatureStats{ grid-template-columns: 1fr; }
}
@media (max-width: 980px){
  .navToggle{ display:inline-flex; }
  .nav{
    position: fixed;
    inset: 0 0 auto 0;
    top: 70px;
    padding: 1rem;
    display:none;
    flex-direction:column;
    align-items:stretch;
    background: rgba(11,13,19,.92);
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .nav[data-open="true"]{ display:flex; }
  .nav a{
    padding: .8rem .9rem;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
  }
  .nav__cta{ width: 100%; justify-content:center; }

  .cta__inner{ flex-direction: column; align-items: flex-start; }
  .cards{ grid-template-columns: 1fr; }
  .cardMedia{ height: 180px; }
  .reviewsGrid{ grid-template-columns: 1fr; }
  .reviewCard,
  .reviewCard--feature{ min-height: 0; }
  .reviewsEmbedFrame,
  .reviewsEmbedFrame > div{ min-height: 380px; }

  .footer{
    padding: 2rem 0 1.35rem;
  }

  .footer__grid{
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer__grid > div{
    min-width: 0;
  }

  .brand--footer{
    min-width: 0;
    align-items: flex-start;
    gap: .65rem;
  }

  .brand--footer .brand__mark{
    min-width: 0;
  }

  .brand--footer .brand__logo{
    height: 42px;
  }

  .footer__links li,
  .footer__bottom p{
    overflow-wrap: anywhere;
  }
}

/* =========================
   Reduced motion safety
   ========================= */
@media (prefers-reduced-motion: reduce){
  body, body.is-loaded{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .reveal, .reveal.is-in{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .brand__mark::before{ animation: none !important; opacity: 0 !important; }
  .mediaFrame::before, .cardMedia::before{ display:none !important; }
  body.home .hero .mediaFrame img,
  body.home .section:not(.activityCardsSection) .mediaFrame img,
  body.home .activityCardsSection .cardMedia img,
  body.home .highlight,
  body.home .reviewsTrustCard,
  body.home .reviewsFeatureStat,
  body.home .section::after,
  .grad,
  .dealCard::after,
  .reviewsSummaryCard::after,
  .reviewsFeatureCard::after,
  .infoBox::after{
    animation: none !important;
  }
  body.is-leaving{ opacity: 1 !important; transform: none !important; }
}


/* =========================
   Booking Page (matches site)
   Add this to the END of styles.css
   ========================= */

.bookingContainer{
  max-width: 900px;
}

.bookingCard{
  margin-top: 1.25rem;
  padding: 1.8rem;
  border-radius: 18px;
  background: rgba(17,21,34,.55);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.bookingGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem 1.25rem;
}

.field{
  display:flex;
  flex-direction:column;
}

.field.full{
  grid-column: span 2;
}

.field label{
  font-weight: 800;
  margin-bottom: .45rem;
  color: rgba(233,236,245,.95);
}

.field input,
.field select{
  padding: .95rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline: none;
}

#manageBookingForm input,
#manageBookingForm select{
  padding: .95rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline: none;
  width: 100%;
}

.field select,
#partyBookingForm select,
#manageBookingForm select{
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
    linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%),
    linear-gradient(to right, rgba(255,255,255,.10), rgba(255,255,255,0));
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px),
    calc(100% - 2.6rem) 50%;
  background-size:
    6px 6px,
    6px 6px,
    1px 60%;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}

.field input::placeholder{
  color: rgba(184,191,214,.75);
}

.field input:focus,
.field select:focus,
#manageBookingForm input:focus,
#manageBookingForm select:focus{
  border-color: rgba(229,72,100,.82);
  box-shadow: 0 0 0 4px rgba(229,72,100,.14);
}

.dynamicFields{
  display: contents; /* keeps grid flow perfect */
}

/* Summary Panel */
.bookingSummary{
  margin-top: 1.2rem;
  padding: 1.1rem;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(229,72,100,.24);
}

.bookingSummary h3{
  margin: 0 0 .65rem;
  font-size: 1.05rem;
}

.bookingSummaryRow{
  display:flex;
  justify-content:space-between;
  gap: 1rem;
  margin: .35rem 0;
  color: rgba(233,236,245,.92);
}

.bookingSuccess{
    padding:1.2rem;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
}

.bookingSuccess h3{
    margin:0 0 .5rem;
}

.bookingRef{
    margin:.6rem 0;
    padding:.5rem .75rem;
    border-radius:999px;
    display:inline-block;
    background:rgba(229,72,100,.12);
    border:1px solid rgba(229,72,100,.25);
}

.bookingConfirmDetails{
    margin:.8rem 0;
    display:grid;
    gap:.25rem;
}

.bookingNote{
    margin-top:.6rem;
    color:var(--muted);
}

.bookingSuccess{
  max-width: 860px;
  margin: 0 auto;
}

.bookingSuccess .bookingRef{
  font-weight: 800;
  color: rgba(255,235,189,.98);
}

.bookingSuccessLead{
  margin: 0 0 .85rem;
  color: rgba(233,236,245,.88);
  line-height: 1.7;
}

.bookingSuccessGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  margin-top: 1rem;
}

.bookingSuccessCard{
  padding: .95rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

.bookingSuccessCard span{
  display:block;
  margin-bottom: .35rem;
  color: rgba(233,236,245,.62);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bookingSuccessCard strong{
  display:block;
  color: var(--text);
  line-height: 1.5;
}

.bookingSuccessActions{
  display:flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1.15rem;
}

.bookingSuccessActions .btn{
  width: auto;
  min-width: 180px;
}

.bookingSuccessExtra{
  display: grid;
  gap: .85rem;
  margin-top: 1.1rem;
}

.bookingSuccessExtra + .bookingSuccessActions{
  margin-top: 1.45rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

.manageGrid{
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 1.2rem;
  align-items: start;
}

.manageShell,
.manageAside{
  padding: 1.8rem;
}

.manageBookingLoading{
  padding: 1.2rem;
  text-align: center;
}

.manageStatusRow{
  display:flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items:center;
  margin-bottom: 1rem;
}

.manageStatusTag{
  display:inline-flex;
  align-items:center;
  padding: .38rem .8rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,235,189,.98);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.manageStatusTag--muted{
  color: rgba(233,236,245,.78);
}

.manageMicrocopy{
  color: rgba(233,236,245,.7);
  font-size: .92rem;
}

.manageShell h2{
  margin: 0 0 .65rem;
}

.manageLead{
  margin: 0 0 1.45rem;
  color: rgba(233,236,245,.82);
  line-height: 1.7;
}

.manageFieldStack{
  display:flex;
  flex-direction:column;
  gap: .95rem;
}

.manageOptionFields{
  display:flex;
  flex-direction:column;
  gap: .95rem;
}

.manageOptionNote{
  margin: -.15rem 0 .1rem;
}

#manageBookingForm .field{
  gap: 0;
}

#manageBookingForm .field label{
  display:block;
  margin: 0 0 .45rem;
  font-weight: 800;
  color: rgba(233,236,245,.95);
}

.manageActions{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .95rem;
  margin-top: 1.45rem;
}

.manageActions .btn{
  width:100%;
  min-width: 0;
  min-height: 58px;
  font-size: 1rem;
  color: #fff;
}

.manageActions .btn--ghost{
  color: #fff;
}

.manageCancelDialog{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 85;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.manageCancelDialogOpen{
  overflow: hidden;
}

.manageCancelDialog__backdrop{
  position: fixed;
  inset: 0;
  background: rgba(5,8,16,.72);
  backdrop-filter: blur(4px);
}

.manageCancelDialog__panel{
  position: relative;
  width: min(520px, calc(100vw - 2rem));
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(520px 180px at 0% 0%, rgba(255,0,51,.14), transparent 58%),
    linear-gradient(180deg, rgba(17,21,34,.98), rgba(9,13,24,.98));
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
  padding: 1.15rem;
}

.manageCancelDialog__close{
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.manageCancelDialog__eyebrow{
  margin-right: 2.6rem;
  color: rgba(255,235,189,.92);
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.manageCancelDialog h2{
  margin: .35rem 2.5rem .45rem 0;
  font-size: 1.45rem;
  line-height: 1.12;
}

.manageCancelDialog p{
  margin: 0;
  color: rgba(233,236,245,.82);
  line-height: 1.6;
}

.manageCancelDialog__actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}

.manageCancelDialog__actions .btn{
  width: 100%;
  min-width: 0;
}

.manageHelp{
  margin: 1.15rem 0 0;
  color: rgba(233,236,245,.66);
  font-size: .92rem;
  line-height: 1.6;
}

.manageMessage{
  margin-top: .8rem;
  min-height: 1.3rem;
  font-size: .96rem;
}

.manageMessage--error{
  color: rgba(255,77,109,.98);
}

.manageMessage--success{
  color: rgba(137,231,179,.98);
}

.manageMessage--info{
  color: rgba(233,236,245,.92);
}

.manageAsideHeader{
  display:flex;
  justify-content:space-between;
  gap: .8rem;
  align-items:flex-start;
  margin-bottom: .8rem;
}

.manageAsideHeader h3{
  margin: 0;
}

.manageCallout,
.manageReadonlyCard,
.bookingSummaryCard{
  padding: 1rem;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

.manageCallout{
  margin-top: 1.2rem;
}

#manageBookingForm input,
#manageBookingForm select{
  min-height: 58px;
}

.manageCallout strong{
  display:block;
  margin-bottom: .35rem;
}

.manageReadonlyCard{
  margin-top: 1rem;
}

.bookingSummaryCard h3{
  margin: 0 0 .75rem;
}

.bookingSummaryRow span:last-child{
  font-weight: 800;
  color: rgba(233,236,245,.98);
}

.bookingTotal{
  margin-top: .8rem;
  font-weight: 900;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: .65rem;
}

.bookingWarn{
  margin-top: .65rem;
  color: rgba(255,122,143,.96);
  font-weight: 800;
}

/* Make the submit button feel like your other CTAs */
.bookingCard .btn{
  width: 100%;
}

.field textarea,
#partyBookingForm textarea{
  width: 100%;
  min-height: 140px;
  resize: vertical;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.field textarea::placeholder,
#partyBookingForm textarea::placeholder{
  color: rgba(184,191,214,.75);
}

.field textarea:focus,
#partyBookingForm textarea:focus{
  border-color: rgba(229,72,100,.82);
  box-shadow:
    0 0 0 4px rgba(229,72,100,.14),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Mobile */
@media (max-width:720px){
  .bookingGrid{
    grid-template-columns: 1fr;
  }
  .field.full{
    grid-column: span 1;
  }
  .bookingSuccessGrid{
    grid-template-columns: 1fr;
  }

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

  .manageActions{
    grid-template-columns: 1fr;
  }
}
/* Booking page layout override */
.bookingSplit{
  display:grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr);
  gap: 2rem;
  align-items:start;
}

@media (max-width:980px){
  .bookingSplit{
    grid-template-columns:1fr;
  }
}

/* =========================
   Booking form — custom controls (no default white)
   ========================= */
#bookingForm .field input,
#bookingForm .field select,
#bookingForm input,
#bookingForm select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: .95rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  outline: none;
}

#bookingForm .field input::placeholder{
  color: rgba(184,191,214,.75);
}

#bookingForm .field input:focus,
#bookingForm .field select:focus,
#bookingForm select:focus{
  border-color: rgba(229,72,100,.82);
  box-shadow:
    0 0 0 4px rgba(229,72,100,.14),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Custom select arrow */
#bookingForm .field select,
#bookingForm select{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
    linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%),
    linear-gradient(to right, rgba(255,255,255,.10), rgba(255,255,255,0));
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px),
    calc(100% - 2.6rem) 50%;
  background-size:
    6px 6px,
    6px 6px,
    1px 60%;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}

/* Number input — remove spin buttons */
#bookingForm input[type="number"]::-webkit-outer-spin-button,
#bookingForm input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
#bookingForm input[type="number"]{
  appearance: textfield;
}

/* Date/time calendar icon subtle */
#bookingForm input[type="date"],
#bookingForm input[type="time"]{
  color-scheme: dark; /* helps make the picker UI match */
}

/* Make the button look like your CTAs */
#bookingForm .btn{
  box-shadow: 0 16px 40px rgba(255,0,51,.22);
}
#bookingForm .btn:hover{
  box-shadow: 0 18px 46px rgba(255,0,51,.28);
  transform: translateY(-1px);
}

/* =========================
   Booking form spacing polish
   ========================= */
#bookingForm{
  display:flex;
  flex-direction:column;
  gap: .4rem;             /* overall spacing between controls */
}

#bookingForm h3{
  margin: 0 0 .25rem;
}

#bookingForm label{
  margin: 0;
  display:block;
}

/* Booking page spacing polish */
.bookingSplit .infoBox label{
  display:block;
  margin-top: .9rem;
}

.bookingSplit .infoBox select,
.bookingSplit .infoBox input{
  margin-top: .35rem;
}

.bookingSplit .infoBox button.btn{
  width: 100%;
}

#bookingMobileActionTarget,
#partyMobileActionTarget{
  margin-top: 1rem;
}

.siteNotice{
  width:min(var(--container), calc(100% - 2rem));
  margin: 1rem auto 0;
  padding: .95rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(137,231,179,.28);
  background: rgba(137,231,179,.10);
  color: #e9ecf5;
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
  font-weight: 700;
}

.siteNotice.is-visible{
  display:block;
}

.siteNotice.is-hiding{
  opacity:0;
  transform:translateY(-6px);
  transition: opacity .25s ease, transform .25s ease;
}



/* =========================
   Subtle drifting glow (always moving, very light)
   ========================= */
/* =========================
   Subtle drifting glow
========================= */

body{
  position: relative;
}

body::before{
  content:"";
  position: fixed;
  inset: -38%;
  z-index: 0;
  pointer-events:none;
  background:
    radial-gradient(900px 500px at 16% 18%, rgba(255,0,51,.13), transparent 60%),
    radial-gradient(760px 500px at 82% 38%, rgba(255,77,109,.10), transparent 65%),
    radial-gradient(620px 440px at 48% 84%, rgba(125,90,255,.055), transparent 70%);
  animation: drift 28s ease-in-out infinite alternate;
}

main, header, footer{
  position: relative;
  z-index: 1;
}

@keyframes drift{
  0% { transform: translate3d(-1.6%, -1%, 0) scale(1); filter: saturate(1); }
  50% { transform: translate3d(1.2%, .6%, 0) scale(1.035); filter: saturate(1.06); }
  100% { transform: translate3d(2%, 1.8%, 0) scale(1.055); filter: saturate(1.02); }
}

@keyframes badgeFloat{
  0% { transform: translateY(0px); }
  100% { transform: translateY(-5px); }
}

@keyframes ctaSweep{
  0%, 68% { transform: translateX(0) skewX(-22deg); opacity: 0; }
  78% { opacity: .5; }
  100% { transform: translateX(-920px) skewX(-22deg); opacity: 0; }
}

@keyframes ambientImageBreath{
  0% { transform: translateZ(0) scale(1.01); filter: saturate(1) contrast(1); }
  100% { transform: translateZ(0) scale(1.035); filter: saturate(1.045) contrast(1.015); }
}

@keyframes ambientHeroBreath{
  0% {
    transform: translate3d(var(--depth-x, 0px), calc(var(--py, 0px) + var(--depth-y, 0px)), 0) scale(1.055);
    filter: saturate(1) contrast(1);
  }
  100% {
    transform: translate3d(var(--depth-x, 0px), calc(var(--py, 0px) + var(--depth-y, 0px) - 2px), 0) scale(1.075);
    filter: saturate(1.045) contrast(1.012);
  }
}

@keyframes ambientCardFloat{
  0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(0,-2px,0); }
}

@keyframes ambientPanelShine{
  0%, 72% { transform: translateX(-115%) skewX(-20deg); opacity: 0; }
  82% { opacity: .36; }
  100% { transform: translateX(115%) skewX(-20deg); opacity: 0; }
}

@keyframes heroTextGlimmer{
  0%, 70%, 100%{ background-position: 0% 50%; }
  82%{ background-position: 100% 50%; }
}

@keyframes sectionLightLine{
  0%, 62%, 100%{ background-position: 0% 50%; opacity: .18; }
  78%{ background-position: 105% 50%; opacity: .46; }
}

@keyframes reviewStarSweep{
  0%, 66%{ opacity: 0; transform: translateX(0) skewX(-18deg); }
  74%{ opacity: 1; }
  100%{ opacity: 0; transform: translateX(520px) skewX(-18deg); }
}

@keyframes partyGlowSweep{
  0%, 58%{ opacity: .2; transform: translateX(-48%) skewX(-8deg); }
  72%{ opacity: .75; }
  100%{ opacity: .15; transform: translateX(46%) skewX(-8deg); }
}

@media (prefers-reduced-motion: reduce){
  body::before{ animation:none !important; }
  .mediaBadge,
  .cta__inner::after,
  .reviewsSummaryCard::after,
  .partyPhotoGlow,
  .activityMotion span{
    animation:none !important;
  }
  .activityMotion{
    display:none !important;
  }
  .hoursToday{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================
   HERO BALL — VISUALS ONLY (JS controls motion)
========================= */
.hero__content{
  position: relative;
}

.heroBall{
  position: absolute;
  left: -120px;
  bottom: -15px;
  width: 70px;
  height: 70px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}

.heroBall__ball{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff4d6d, #b00025 70%);
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.heroBall__shadow{
  position: absolute;
  bottom: -14px;
  left: 8%;
  width: 84%;
  height: 16px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
  border-radius: 50%;
  filter: blur(4px);
  transform: translate3d(var(--shx, 8px), var(--shy, 18px), 0) scale(var(--rs, .58));
  opacity: var(--sha, .55);
  will-change: transform, opacity;
}

.heroBall .hole{
  position: absolute;
  width: 8px;
  height: 8px;
  background: #111;
  border-radius: 50%;
}

.heroBall .h1{ top:22px; left:25px; }
.heroBall .h2{ top:32px; left:38px; }
.heroBall .h3{ top:42px; left:25px; }
/* =========================
   DEALS / SPECIALS (Unlimited + Anytime)
========================= */
.dealsGrid{
  margin-top: 1.4rem;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}

.dealCard{
  position: relative;
  overflow:hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 1.2rem 1.2rem 1.15rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.dealCard::after,
.reviewsSummaryCard::after,
.reviewsFeatureCard::after,
.infoBox::after{
  content:"";
  position:absolute;
  top:-32%;
  bottom:-32%;
  left:-45%;
  width: 34%;
  pointer-events:none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  filter: blur(2px);
  animation: ambientPanelShine 13s ease-in-out infinite;
}

.dealCard:nth-child(2)::after,
.reviewsFeatureCard::after{
  animation-delay: -5.5s;
}

.infoBox,
.reviewsSummaryCard,
.reviewsFeatureCard{
  position: relative;
  overflow: hidden;
}

body.home .highlight,
body.home .reviewsTrustCard,
body.home .reviewsFeatureStat{
  animation: ambientCardFloat 7s ease-in-out infinite alternate;
  animation-delay: var(--float-delay, 0s);
}

body.home .highlight:nth-child(2),
body.home .reviewsTrustCard:nth-child(2),
body.home .reviewsFeatureStat:nth-child(2){ --float-delay: -2s; }

body.home .highlight:nth-child(3),
body.home .reviewsTrustCard:nth-child(3),
body.home .reviewsFeatureStat:nth-child(3){ --float-delay: -4s; }

body.home .highlight:nth-child(4){ --float-delay: -6s; }

.dealCard:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 50px rgba(0,0,0,.32);
  border-color: rgba(255,77,109,.28);
}

.dealTop{
  display:flex;
  gap: .9rem;
  align-items:flex-start;
}

.dealTop h3{
  margin: .05rem 0 .25rem;
  font-size: 1.25rem;
}

.dealIcon{
  width: 46px;
  height: 46px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  flex: 0 0 auto;
  font-size: 1.2rem;
}

.dealList{
  list-style:none;
  padding:0;
  margin: 1rem 0 1.1rem;
  display:grid;
  gap: .55rem;
  color: var(--muted);
}

.dealList li{
  display:grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: .6rem;
  align-items:flex-start;
}

.dealList li > span:last-child{
  min-width: 0;
  line-height: 1.55;
}

.dealList .dot{
  width: 10px;
  height: 10px;
  margin-top: .35rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 0 0 4px rgba(255,0,51,.12);
  flex: 0 0 auto;
}

.dealActions{
  display:flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.dealsNote{
  margin-top: 1rem;
}

/* red glow accent like your hero vibe */
.dealGlow{
  position:absolute;
  inset: -40%;
  background:
    radial-gradient(520px 220px at 25% 35%, rgba(255,0,51,.18), transparent 60%),
    radial-gradient(520px 220px at 85% 70%, rgba(255,77,109,.14), transparent 62%);
  filter: blur(10px);
  opacity: .75;
  pointer-events:none;
}

/* responsive */
@media (max-width: 980px){
  .dealsGrid{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .dealTop h3{
    font-size: 1.15rem;
    line-height: 1.25;
  }

  .dealList{
    gap: .7rem;
  }
}


/* =========================
   PRICES PAGE (matches booking page format)
========================= */

.pricingContainer{
  max-width: 1100px;
}

.pricingGrid{
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.pricingCard{
  position: relative;
  padding: 1.6rem;
  border-radius: 18px;
  background: rgba(17,21,34,.50);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}

.pricingBadge{
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: .42rem .72rem;
  border-radius: 999px;
  border: 1px solid rgba(255,236,166,.72);
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,238,.72), transparent 34%),
    linear-gradient(135deg, #fff1a8 0%, #f6c94f 42%, #b87515 100%);
  color: #261606;
  font-size: .82rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow:
    0 14px 34px rgba(246,201,79,.22),
    inset 0 1px 0 rgba(255,255,255,.55);
  white-space: nowrap;
}

.pricingCard--lot .pricingCard__head{
  padding-right: 7.5rem;
}

.pricingCard__head h2{
  margin: 0 0 .25rem;
  font-size: 1.4rem;
}

.pricingCard__head p{
  margin: 0 0 1rem;
}

.priceItems{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:1rem;
}

.priceItem{
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: .9rem;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.priceItem:hover{
  transform: translateY(-4px);
  border-color: rgba(255,77,109,.35);
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

.priceIcon{
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.20));
}

.priceItem__body h3{
  margin: 0 0 .45rem;
  font-size: 1.05rem;
}

.priceItem__body{
  min-width: 0;
}

.priceList{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr;
  gap:.5rem;
}

.priceList li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.85rem;
  padding:.55rem .7rem;
  border-radius:12px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(233,236,245,.95);
}

.priceList li span,
.priceList li strong{
  white-space:nowrap;
}

.priceList li span{
  color: rgba(184,191,214,.95);
  font-weight: 600;
}

.priceList--twoCol{
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.5rem .8rem;
}

.priceList--arcade{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  max-width: 760px;
}

.priceList--amountFirst li{
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .9rem;
}

.priceList--amountFirst li strong{
  min-width: 0;
  text-align: left;
}

.priceList--amountFirst li span{
  text-align: center;
}

.priceList--amountFirst li em{
  font-style: normal;
  font-weight: 700;
  color: rgba(255,214,122,.96);
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 720px){
  .priceList--twoCol{
    grid-template-columns:1fr;
  }

  .priceList--arcade{
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  .pricingBadge{
    position: static;
    width: fit-content;
    margin: 0 0 .8rem;
  }

  .pricingCard--lot .pricingCard__head{
    padding-right: 0;
  }
}

.pricingCard{
  width:100%;
  max-width:100%;
}

.priceList li span{
  color: rgba(184,191,214,.95);
  font-weight: 600;
}

.pricingCard__cta{
  margin-top: 1.15rem;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

@media (max-width: 980px){
  .priceItems{ grid-template-columns: 1fr; }
}

/* =========================
   PARTIES & EVENTS PAGE
========================= */

.hero--subpage{
  padding-top: 3.2rem;
}

.packageBand{
  margin-top: 1.75rem;
  padding-top: .25rem;
}

.packageBand__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 1rem;
  margin: 1.25rem 0 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.packageBand__head h3{
  margin: 0;
  font-size: 1.4rem;
  font-weight: 900;
}

.packagePrice{
  display:flex;
  align-items:baseline;
  gap:.5rem;
  padding:.55rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,77,109,.35);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  font-weight: 900;
}

.packagePrice span{
  font-weight: 900;
  color: rgba(255,255,255,.85);
}

.packagePrice small{
  color: rgba(255,255,255,.68);
  font-weight: 700;
}

.packageCards{
  grid-template-columns: repeat(3, 1fr);
}

.packageList{
  list-style: none;
  padding: 0;
  margin: .65rem 0 .75rem;
  display:grid;
  gap:.45rem;
  color: var(--muted);
}

.packageList li{
  position: relative;
  padding-left: 1.05rem;
}

.packageList li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55rem;
  width: .45rem;
  height: .45rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 0 0 3px rgba(255,0,51,.12);
}

.packageAddOn{
  margin-top: .35rem;
  padding: .55rem .65rem;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
  font-weight: 650;
}

.packageActions{
  margin-top: .9rem;
}

.activityCardsSection .cardMedia{
  height: 170px;
}

.activityCardsSection .cardMedia img{
  transform: none;
  backface-visibility: hidden;
  image-rendering: auto;
}

.activityCardsSection .cardMedia::after{
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.28));
}

/* Smooth anchor scrolling with sticky header offset */
html{
  scroll-behavior: smooth;
}

section[id],
[id="top"],
[id="about"],
[id="activities"],
[id="specials"],
[id="parties"],
[id="leagues"],
[id="hours"],
[id="reviews"],
[id="contact"],
[id="priceCards"],
[id="activitySections"],
[id="tenpin-bowling"],
[id="mini-golf"],
[id="games-arcade"],
[id="licensed-cafe-bar"],
[id="cafe-bar"]{
  scroll-margin-top: 95px;
}


/* Responsive */
@media (max-width: 980px){
  .packageCards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .packageBand__head{ flex-direction: column; align-items:flex-start; }
  .packageCards{ grid-template-columns: 1fr; }
}