:root{
  --bg:#030505;
  --surface:#0a0f0c;
  --surface-2:#0f1612;
  --text:#f4fff8;
  --muted:#a5b6ac;
  --line:rgba(214,255,232,.12);
  --green:#9fd425;
  --green-soft:#79a61a;
  --green-glow:rgba(159,212,37,.45);
  --white-glow:rgba(255,255,255,.18);
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:radial-gradient(circle at top, rgba(159,212,37,.08), transparent 28%), #020303;
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.site-noise{position:fixed;inset:0;pointer-events:none;opacity:.06;z-index:999;background-image:radial-gradient(circle at 20% 20%,rgba(255,255,255,.9) .6px, transparent .9px),radial-gradient(circle at 80% 60%,rgba(255,255,255,.8) .5px, transparent .85px);background-size:18px 18px,23px 23px;mix-blend-mode:soft-light}
.cursor-glow{position:fixed;left:0;top:0;width:360px;height:360px;border-radius:50%;pointer-events:none;z-index:1;translate:-50% -50%;background:radial-gradient(circle, rgba(159,212,37,.16), transparent 60%);filter:blur(28px)}
.topbar{
  position:fixed;
  top:18px; left:22px; right:22px;
  z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border:1px solid var(--line);
  background:rgba(5,8,7,.72);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand-logo{width:52px;height:52px;object-fit:cover;border-radius:50%;border:1px solid rgba(159,212,37,.35);box-shadow:0 0 22px rgba(159,212,37,.18)}
.brand-text{font-family:"Barlow Condensed",sans-serif;font-size:28px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.nav{display:flex;align-items:center;gap:22px;font-size:14px;text-transform:uppercase;letter-spacing:.12em}
.nav a{position:relative;color:#d7e6dd;transition:.25s}
.nav a::after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:2px;background:linear-gradient(90deg,var(--green),#fff);transition:.3s}
.nav a:hover{color:#fff}.nav a:hover::after{width:100%}
.nav-cta{padding:11px 16px;border:1px solid rgba(159,212,37,.5);background:rgba(159,212,37,.08);box-shadow:inset 0 0 18px rgba(159,212,37,.08)}
.menu-btn{display:none;background:none;border:0;padding:0;cursor:pointer}
.menu-btn span{display:block;width:26px;height:2px;background:#fff;margin:6px 0}
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:140px 24px 90px;
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0;background:url('../img/hero.jpg') center 24%/cover no-repeat;transform:scale(1.08);will-change:transform}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.58) 42%, rgba(0,0,0,.3) 100%), linear-gradient(180deg, rgba(0,0,0,.3), rgba(2,3,3,.78) 100%)}
.hero-watermark{position:absolute;right:-90px;top:50%;width:min(34vw,430px);transform:translateY(-50%);opacity:.12;filter:drop-shadow(0 0 40px rgba(159,212,37,.16));mix-blend-mode:screen;pointer-events:none}
.hero-content{position:relative;z-index:2;width:min(var(--max),100%);margin:0 auto}
.eyebrow,.section-kicker{display:inline-block;margin-bottom:16px;font-weight:800;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#cde6b4}
h1,h2,h3{font-family:"Barlow Condensed",sans-serif;line-height:.95;margin:0;text-transform:uppercase}
h1{font-size:clamp(64px,11vw,122px);max-width:680px;letter-spacing:.03em;text-shadow:0 0 34px rgba(0,0,0,.35)}
h2{font-size:clamp(36px,6vw,66px);margin-bottom:18px;letter-spacing:.03em}
h3{font-size:28px;letter-spacing:.02em}
.hero-lead{max-width:640px;font-size:18px;line-height:1.8;color:#d2dfd8;margin:18px 0 0}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 24px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12px;transition:.28s ease;border:1px solid transparent}
.btn-primary{background:linear-gradient(135deg, #bfdc62, var(--green));color:#071006;box-shadow:0 12px 30px rgba(159,212,37,.25)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(159,212,37,.34)}
.btn-ghost{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.05)}
.btn-ghost:hover{border-color:var(--green);box-shadow:0 0 30px rgba(159,212,37,.18)}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hero-meta span,.video-tags span{padding:9px 12px;border:1px solid rgba(159,212,37,.22);background:rgba(9,14,11,.6);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#d9eed0}
.social-strip{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.social-link{display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid rgba(255,255,255,.16);background:rgba(8,12,10,.62);transition:.28s ease;box-shadow:inset 0 0 18px rgba(159,212,37,.04)}
.social-link small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#f4fff8}
.icon-wrap{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(159,212,37,.35);background:rgba(159,212,37,.08);box-shadow:0 0 20px rgba(159,212,37,.12)}
.icon-wrap svg{width:20px;fill:#fff;transition:.28s}
.social-link:hover{transform:translateY(-6px) scale(1.02);border-color:rgba(159,212,37,.5);box-shadow:0 18px 40px rgba(0,0,0,.3), 0 0 30px rgba(159,212,37,.12)}
.social-link:hover .icon-wrap{box-shadow:0 0 28px rgba(159,212,37,.32)}
.social-link:hover svg{fill:var(--green)}
.scroll-cue{position:absolute;left:50%;bottom:26px;width:26px;height:44px;border:1px solid rgba(255,255,255,.4);border-radius:26px;z-index:3;transform:translateX(-50%)}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:4px;background:var(--green);transform:translateX(-50%);animation:wheel 1.4s infinite}
@keyframes wheel{to{top:24px;opacity:0}}
.section{position:relative;padding:110px 24px}
.section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%, rgba(159,212,37,.06), transparent 24%);pointer-events:none}
.section-head{width:min(var(--max),100%);margin:0 auto 42px}
.section-head p{max-width:760px;color:var(--muted);line-height:1.8;font-size:17px}
.video-feature{width:min(var(--max),100%);margin:0 auto;padding:16px;border:1px solid var(--line);background:linear-gradient(145deg, rgba(255,255,255,.03), rgba(5,8,7,.92));box-shadow:var(--shadow), inset 0 0 80px rgba(159,212,37,.04)}
.video-shell{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.video-shell iframe,.video-shell video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;background:#000}
.video-tags{display:flex;flex-wrap:wrap;gap:10px;padding-top:16px}
.member-grid,.video-grid{width:min(var(--max),100%);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.member-card,.gallery-item,.video-card,.history-image,.booking-panel,.video-feature{transform-style:preserve-3d;will-change:transform}
.member-card{position:relative;overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(9,13,11,.96));box-shadow:var(--shadow)}
.member-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 45%, rgba(159,212,37,.1) 100%);opacity:0;transition:.3s}
.member-card:hover::before{opacity:1}
.member-image{position:relative;aspect-ratio:4/5;overflow:hidden;background:#020303}
.member-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,.82) 92%)}
.member-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease, filter .35s ease;filter:contrast(1.05) saturate(.95)}
.member-card:hover .member-image img{transform:scale(1.12);filter:contrast(1.18) saturate(1.08)}
.member-copy{position:absolute;left:0;right:0;bottom:0;padding:22px;z-index:2}
.member-copy span{display:block;color:#dbeecb;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
.history{width:min(var(--max),100%);margin:0 auto;display:grid;grid-template-columns:1.04fr .96fr;gap:32px;align-items:center}
.history-image{border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow)}
.history-image img{width:100%;height:100%;min-height:410px;object-fit:cover;transition:transform .6s ease}
.history-image:hover img{transform:scale(1.06)}
.history-copy p{color:#b9c8c0;line-height:1.84}
.gallery-grid{width:min(var(--max),100%);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:260px;gap:18px}
.gallery-item{position:relative;margin:0;overflow:hidden;border:1px solid var(--line);background:#050807;box-shadow:var(--shadow)}
.gallery-item.wide{grid-column:span 2}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease, filter .35s ease;filter:contrast(1.02) saturate(.96)}
.gallery-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 38%, rgba(0,0,0,.82) 100%)}
.gallery-item:hover img{transform:scale(1.1) rotate(.5deg);filter:contrast(1.18) saturate(1.08)}
.gallery-item figcaption{position:absolute;left:16px;bottom:14px;z-index:2;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fafffd}
.video-grid{grid-template-columns:repeat(4,1fr)}
.video-card{position:relative;overflow:hidden;min-height:300px;padding:0 16px 18px;border:1px solid var(--line);background:#040705;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--shadow)}
.video-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.9));transition:.3s}
.thumb{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.2) contrast(1.04);transition:.55s ease}
.video-card:hover .thumb{transform:scale(1.12);filter:grayscale(0) contrast(1.15)}
.video-card:hover::after{background:linear-gradient(180deg, rgba(159,212,37,.12), rgba(0,0,0,.88))}
.play-badge{position:absolute;top:16px;right:16px;z-index:2;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:#111;box-shadow:0 0 26px rgba(159,212,37,.22);transition:.25s}
.video-card:hover .play-badge{transform:scale(1.1) rotate(8deg);background:var(--green)}
.video-card h3,.video-card p{position:relative;z-index:2}
.video-card h3{font-size:28px;margin-bottom:6px}
.video-card p{margin:0;color:#cde0d7;text-transform:uppercase;letter-spacing:.14em;font-size:11px}

.store-showcase{width:min(var(--max),100%);margin:0 auto 18px;display:grid;grid-template-columns:1.05fr 1.05fr .9fr;gap:18px;align-items:stretch}
.store-card,.store-item,.store-info{position:relative;overflow:hidden;border:1px solid var(--line);background:linear-gradient(145deg, rgba(255,255,255,.03), rgba(7,10,9,.96));box-shadow:var(--shadow);transform-style:preserve-3d;will-change:transform}
.store-feature{min-height:560px}
.store-card img,.store-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease, filter .35s ease;filter:contrast(1.02) saturate(.98)}
.store-card::after,.store-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.84) 100%)}
.store-card:hover img,.store-item:hover img{transform:scale(1.08);filter:contrast(1.15) saturate(1.08)}
.store-info{padding:34px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at top left, rgba(159,212,37,.12), transparent 34%), linear-gradient(145deg, rgba(255,255,255,.03), rgba(7,10,9,.98))}
.store-info h3{font-size:48px;margin-bottom:6px}
.store-info p{color:#c9d7d1;line-height:1.8}
.store-list{margin:0;padding:0 0 0 18px;color:#e5f3ec;line-height:1.8}
.store-list li::marker{color:var(--green)}
.store-grid{width:min(var(--max),100%);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.store-item{min-height:330px}
.store-item-wide{grid-column:span 2}
.store-meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px;background:linear-gradient(180deg, transparent, rgba(0,0,0,.8))}
.store-meta span{display:block;margin-bottom:8px;color:#d4e8d5;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.store-meta h3{font-size:28px;margin:0}

.booking-panel{width:min(var(--max),100%);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:1px solid var(--line);background:linear-gradient(145deg, rgba(159,212,37,.06), rgba(7,10,9,.96));box-shadow:var(--shadow)}
.booking-art{position:relative;min-height:360px}
.booking-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,.72))}
.booking-art img{width:100%;height:100%;object-fit:cover}
.booking-copy{padding:44px 38px;display:flex;flex-direction:column;justify-content:center}
.booking-logo{width:100px;height:100px;object-fit:cover;border-radius:50%;margin-bottom:18px;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 34px rgba(159,212,37,.18)}
.booking-copy p{color:#c4d2cc;line-height:1.8;max-width:520px}
.footer{padding:34px 24px 48px;border-top:1px solid var(--line);text-align:center;color:#93a79d;font-size:13px}
.footer-logo{width:74px;height:74px;object-fit:cover;border-radius:50%;margin:0 auto 10px;border:1px solid rgba(159,212,37,.25)}
[data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .7s ease, transform .7s ease}
[data-reveal].visible{opacity:1;transform:translateY(0)}
@media (max-width:1024px){
  .member-grid,.video-grid{grid-template-columns:repeat(2,1fr)}
  .history,.booking-panel,.store-showcase{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-item.wide,.store-item-wide{grid-column:span 2}
  .store-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .nav{position:fixed;top:84px;right:18px;display:none;flex-direction:column;align-items:flex-start;width:min(320px, calc(100vw - 36px));padding:22px;background:rgba(2,4,4,.96);border:1px solid var(--line)}
  .nav.open{display:flex}
  .menu-btn{display:block}
}
@media (max-width:640px){
  .topbar{left:12px;right:12px;top:12px}
  .brand-logo{width:44px;height:44px}
  .brand-text{font-size:22px}

  /* Mobile hero fix:
     The band photo is horizontal. On phones, cover crops the sides.
     This keeps the complete image visible and places the copy below it. */
  .hero{
    min-height:auto;
    padding:calc(56.25vw + 118px) 18px 78px;
    align-items:flex-start;
    background:#020303;
  }
  .hero-bg{
    position:absolute;
    top:92px;
    left:0;
    right:0;
    height:56.25vw;
    min-height:220px;
    max-height:390px;
    background-size:contain;
    background-position:center top;
    background-repeat:no-repeat;
    transform:none !important;
  }
  .hero-overlay{
    background:
      linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.05) 42%, rgba(2,3,3,.94) 100%),
      linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.06), rgba(0,0,0,.34));
  }
  .hero-content{margin-top:14px}
  .hero-watermark{width:240px;right:-70px;top:42%;opacity:.09}
  .hero-lead{font-size:16px}
  .section{padding:82px 18px}
  .member-grid,.video-grid,.gallery-grid,.store-grid{grid-template-columns:1fr}
  .gallery-item.wide,.store-item-wide{grid-column:auto}
  .gallery-grid{grid-auto-rows:250px}
  .store-showcase{grid-template-columns:1fr}
  .store-feature{min-height:420px}
  .store-info{padding:28px 22px}
  .social-link{width:100%;justify-content:flex-start}
  .booking-copy{padding:32px 22px}
}

@media (max-width:390px){
  .hero{
    padding-top:calc(56.25vw + 128px);
  }
  .hero-bg{
    top:96px;
    min-height:210px;
  }
}


.gallery-note{margin-top:10px;color:#c9d7d1;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.gallery-item{cursor:pointer}
.gallery-item-contain{background:#030505}
.gallery-item-contain img{object-fit:contain !important;background:#030505}
.store-whatsapp{margin:8px 0 12px;color:#d9eed0;font-weight:700}
.store-whatsapp a{color:#bdfb52}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;padding:24px;z-index:1000}
.lightbox.open{display:flex}
.lightbox-inner{max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center}
.lightbox-image{max-width:100%;max-height:78vh;object-fit:contain;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.lightbox-caption{margin:14px 0 0;color:#f4fff8;font-size:14px;letter-spacing:.1em;text-transform:uppercase;text-align:center}
.lightbox-close{position:absolute;top:18px;right:18px;width:46px;height:46px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.35);color:#fff;font-size:34px;line-height:1;cursor:pointer}
@media (max-width:640px){.lightbox{padding:16px}.lightbox-image{max-height:72vh}}



.teaser-youtube-link{display:block;cursor:pointer}
.teaser-thumb{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .55s ease, filter .35s ease;filter:contrast(1.08) saturate(1.02)}
.teaser-youtube-link::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center, rgba(159,212,37,.08), transparent 34%), linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.58));transition:.3s}
.teaser-youtube-link:hover .teaser-thumb,.teaser-youtube-link.is-touching .teaser-thumb{transform:scale(1.08);filter:contrast(1.18) saturate(1.1)}
.teaser-youtube-link:hover::after,.teaser-youtube-link.is-touching::after{background:radial-gradient(circle at center, rgba(159,212,37,.16), transparent 34%), linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.48))}
.teaser-play{position:absolute;left:50%;top:50%;z-index:3;display:grid;place-items:center;width:86px;height:86px;border-radius:50%;background:rgba(244,255,248,.94);color:#061006;font-size:34px;transform:translate(-50%,-50%);box-shadow:0 0 44px rgba(159,212,37,.38);transition:transform .28s ease, background .28s ease}
.teaser-youtube-link:hover .teaser-play,.teaser-youtube-link.is-touching .teaser-play{transform:translate(-50%,-50%) scale(1.12) rotate(8deg);background:var(--green)}
.video-tags a{padding:9px 12px;border:1px solid rgba(159,212,37,.22);background:rgba(9,14,11,.6);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#d9eed0;transition:.25s}
.video-tags a:hover{border-color:var(--green);color:#fff;box-shadow:0 0 22px rgba(159,212,37,.18)}
@media (max-width:640px){
  .teaser-youtube-link .teaser-thumb{animation:mobileTeaserPulse 4s ease-in-out infinite alternate}
  .teaser-play{width:72px;height:72px;font-size:28px}
}
@keyframes mobileTeaserPulse{
  from{transform:scale(1);filter:contrast(1.05) saturate(1)}
  to{transform:scale(1.045);filter:contrast(1.16) saturate(1.08)}
}

