/* ---------- RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#0a0a0a;color-scheme:dark}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:transparent;
  color:#f5f5f5;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

:root{
  --gold:#d4a857;
  --gold-dim:#a8843f;
  --bg:#0a0a0a;
  --bg-2:#141414;
  --bg-3:#1c1c1c;
  --line:rgba(255,255,255,0.08);
  --text:#f5f5f5;
  --muted:#8a8a8a;
  --radius:14px;
}

.container{max-width:1200px;margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.02em;line-height:1.05}
h2{font-size:clamp(2.2rem,5vw,4rem)}
h3{font-size:1.4rem;letter-spacing:.04em}
.kicker{
  text-transform:uppercase;letter-spacing:.3em;font-size:.75rem;
  color:var(--gold);font-weight:600;margin-bottom:14px;
}
.kicker.center,.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.accent{color:var(--gold)}

/* ---------- HEADER ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;
  background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);
  transition:background .3s ease,backdrop-filter .3s ease;
}
.site-header.scrolled,.site-header.solid{
  background:rgba(10,10,10,.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:6px;font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:.05em}
.brand-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;
  background:var(--gold);color:#000;font-weight:700;
}
.brand-name{color:#fff}

.nav{display:flex;align-items:center;gap:28px;font-size:.95rem}
.nav a{position:relative;color:#e8e8e8;transition:color .2s}
.nav a:hover{color:var(--gold)}
.nav-cta{
  background:var(--gold);color:#000 !important;
  padding:10px 18px;border-radius:999px;font-weight:600;
}
.nav-cta:hover{background:#e6b96a;color:#000 !important}
.burger{display:none;flex-direction:column;gap:5px}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px}

@media (max-width:720px){
  .nav{display:none}
  .burger{display:flex}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;height:100vh;min-height:640px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;text-align:center;
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;
  filter:saturate(1.05) contrast(1.05);
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse at center,rgba(0,0,0,.35) 0%,rgba(0,0,0,.75) 70%,#000 100%),
    linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.6) 100%);
}
.hero-content{position:relative;z-index:2;padding:0 24px;max-width:900px;animation:fadeUp 1s ease}
.eyebrow{
  display:inline-block;
  text-transform:uppercase;letter-spacing:.35em;font-size:.75rem;
  color:var(--gold);margin-bottom:24px;
  padding:8px 18px;border:1px solid rgba(212,168,87,.4);border-radius:999px;
  backdrop-filter:blur(6px);background:rgba(0,0,0,.25);
}
.hero-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3.5rem,11vw,9rem);
  line-height:.95;letter-spacing:.01em;
  text-shadow:0 4px 40px rgba(0,0,0,.6);
  margin-bottom:20px;
}
.hero-title span{color:var(--gold);font-style:italic}
.hero-sub{
  font-size:clamp(1rem,1.6vw,1.25rem);
  color:#dcdcdc;max-width:600px;margin:0 auto 36px;
}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

.scroll-indicator{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  z-index:2;color:#bbb;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.scroll-indicator span{
  width:1px;height:40px;background:linear-gradient(to bottom,transparent,var(--gold));
  animation:scrollPulse 2s infinite;
}
@keyframes scrollPulse{0%{opacity:0;transform:scaleY(.3)}50%{opacity:1}100%{opacity:0;transform:scaleY(1)}}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:999px;font-weight:600;font-size:.95rem;
  transition:transform .15s ease,background .2s ease,box-shadow .2s ease;
  cursor:pointer;
}
.btn-primary{
  background:var(--gold);color:#000;
  box-shadow:0 8px 30px rgba(212,168,87,.25);
}
.btn-primary:hover{background:#e6b96a;transform:translateY(-2px);box-shadow:0 12px 40px rgba(212,168,87,.4)}
.btn-ghost{
  background:rgba(255,255,255,.06);color:#fff;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn-large{padding:18px 36px;font-size:1.05rem}
.btn-block{display:flex;width:100%}

/* ---------- SECTIONS ---------- */
.section{padding:120px 0;position:relative}
.section h2{margin-bottom:16px}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.two-col h2{margin-bottom:24px}
.two-col p{color:#cfcfcf;margin-bottom:24px}

.stats{display:flex;gap:40px;margin-top:32px}
.stats div{display:flex;flex-direction:column}
.stats strong{font-family:'Bebas Neue',sans-serif;font-size:2.5rem;color:var(--gold)}
.stats span{color:var(--muted);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}

.media-frame{
  position:relative;aspect-ratio:4/5;border-radius:var(--radius);
  background:linear-gradient(135deg,#1a1a1a,#2a2a2a);
  border:1px solid var(--line);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.media-frame img{width:100%;height:100%;object-fit:cover}
.media-frame::after{
  content:'IMG';position:absolute;color:#333;font-size:1.5rem;letter-spacing:.3em;
}
.media-frame img[src]{position:relative;z-index:1}
.media-tag{
  position:absolute;bottom:16px;left:16px;z-index:2;
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
  padding:6px 14px;border-radius:999px;font-size:.8rem;color:var(--gold);
  border:1px solid rgba(212,168,87,.3);
}

@media(max-width:860px){
  .two-col{grid-template-columns:1fr;gap:40px}
  .stats{gap:24px}
}

/* GALLERY */
.cuts h2{margin-bottom:56px}
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:240px;
  gap:16px;
}
.gallery-item{
  background:linear-gradient(135deg,#1a1a1a,#262626);
  border:1px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:flex-end;justify-content:flex-start;
  padding:20px;position:relative;overflow:hidden;
  transition:transform .3s ease,border-color .3s ease;
  cursor:pointer;
}
.gallery-item::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(212,168,87,.08),transparent 60%);
  opacity:0;transition:opacity .3s;
}
.gallery-item:hover{transform:translateY(-4px);border-color:rgba(212,168,87,.4)}
.gallery-item:hover::before{opacity:1}
.gallery-item span{
  position:relative;z-index:1;
  font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.06em;
  color:#fff;
}
.gi-1{grid-row:span 2;background:linear-gradient(135deg,#202020,#0e0e0e)}
.gi-3{grid-column:span 2;background:linear-gradient(135deg,#1a1410,#2a1f12)}
.gi-5{grid-row:span 1}
@media(max-width:860px){
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
  .gi-1,.gi-3{grid-column:auto;grid-row:auto}
}

/* WHY */
.why{background:linear-gradient(180deg,#0a0a0a,#0f0f0f)}
.cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px;
}
.card{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:32px 24px;
  transition:transform .25s,border-color .25s,background .25s;
}
.card:hover{transform:translateY(-6px);border-color:rgba(212,168,87,.4);background:var(--bg-3)}
.card-icon{font-size:2rem;margin-bottom:16px}
.card h3{margin-bottom:10px;color:#fff}
.card p{color:#bababa;font-size:.95rem}
@media(max-width:860px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.cards{grid-template-columns:1fr}}

/* CTA STRIP */
.cta-strip{
  padding:80px 0;
  background:
    radial-gradient(circle at 20% 50%,rgba(212,168,87,.15),transparent 50%),
    radial-gradient(circle at 80% 50%,rgba(212,168,87,.1),transparent 50%),
    #0a0a0a;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.cta-inner{
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.cta-inner h2{margin:0}

/* FOOTER */
.footer{padding:60px 0 32px;background:#070707;border-top:1px solid var(--line)}
.footer.mini{padding:24px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.footer-links{display:flex;gap:24px}
.footer-links a{color:#bbb;font-size:.9rem}
.footer-links a:hover{color:var(--gold)}

/* ---------- BOOKING PAGE ---------- */
.page-payment{background:#0a0a0a}  /* booking stays transparent so the beams bg shows */
.booking-hero{padding:140px 0 40px;text-align:center}
.booking-hero h1{font-size:clamp(2.5rem,6vw,4.5rem);margin-bottom:14px}
.booking-hero .lead{color:#bbb;max-width:540px;margin:0 auto;font-size:1.05rem}

.booking-main{padding:40px 0 120px}
.booking-grid{
  display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start;
}
@media(max-width:980px){.booking-grid{grid-template-columns:1fr}}

.booking-left{display:flex;flex-direction:column;gap:20px}

.panel{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px;
}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.panel-head h3{color:#fff;letter-spacing:.08em}

/* calendar */
.month-nav{display:flex;align-items:center;gap:10px;font-size:.95rem}
.month-nav button{
  width:28px;height:28px;border-radius:6px;
  background:rgba(255,255,255,.05);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  transition:background .2s;
}
.month-nav button:hover{background:var(--gold);color:#000}

.cal-weekdays,.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-weekdays{margin-bottom:8px}
.cal-weekdays span{
  text-align:center;color:var(--muted);font-size:.7rem;
  letter-spacing:.15em;text-transform:uppercase;padding:6px 0;
}
.cal-day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:8px;font-size:.9rem;color:#ddd;
  background:rgba(255,255,255,.02);
  border:1px solid transparent;
  cursor:pointer;transition:all .15s;
}
.cal-day:hover{background:rgba(212,168,87,.15);color:#fff}
.cal-day.disabled{color:#3a3a3a;cursor:not-allowed;background:transparent}
.cal-day.disabled:hover{background:transparent}
.cal-day.today{border-color:rgba(212,168,87,.5)}
.cal-day.selected{background:var(--gold);color:#000;font-weight:600}
.cal-day.empty{background:transparent;cursor:default}

/* locations */
.locations{display:grid;grid-template-columns:1fr;gap:10px}
.loc-pill{
  display:flex;align-items:center;gap:12px;
  padding:14px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  text-align:left;transition:all .2s;
}
.loc-pill:hover{border-color:rgba(212,168,87,.4)}
.loc-pill.active{border-color:var(--gold);background:rgba(212,168,87,.08)}
.loc-pill strong{display:block;font-size:.98rem;font-weight:700;letter-spacing:.01em;color:#fff}
.loc-pill em{display:block;font-size:.76rem;color:#9a9a9a;font-style:normal;margin-top:3px;font-weight:500}
.loc-icon{font-size:1.4rem}
@media(max-width:680px){.locations{grid-template-columns:1fr}}

/* slots */
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.slot{
  padding:14px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:#fff;font-weight:500;transition:all .15s;
}
.slot:hover:not(.booked){border-color:var(--gold);background:rgba(212,168,87,.1)}
.slot.selected{background:var(--gold);color:#000;border-color:var(--gold)}
.slot.booked{opacity:.35;cursor:not-allowed;text-decoration:line-through}
@media(max-width:480px){.slots{grid-template-columns:repeat(3,1fr)}}

/* summary */
.summary{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;
  position:sticky;top:100px;
}
.summary h3{color:#fff;margin-bottom:20px;letter-spacing:.08em}
.sum-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;color:#cfcfcf;font-size:.95rem;
}
.sum-row strong{color:#fff}
.sum-row select{
  background:rgba(255,255,255,.06);color:#fff;
  border:1px solid var(--line);border-radius:8px;padding:6px 10px;
  font-family:inherit;
}
.sum-row.total{font-size:1.1rem;padding:16px 0}
.sum-row.total strong{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;color:var(--gold)}
.summary hr{border:none;border-top:1px solid var(--line);margin:8px 0}
.summary .btn{margin-top:18px;margin-bottom:10px}

/* ---------- PAYMENT PAGE ---------- */
.pay-wrap{padding:140px 0 80px;min-height:100vh;min-height:100svh}
.pay-grid{display:grid;grid-template-columns:1fr 460px;gap:60px;align-items:start}
@media(max-width:980px){.pay-grid{grid-template-columns:1fr;gap:32px}}

.pay-left h1{font-size:clamp(2.2rem,5vw,3.5rem);margin-bottom:18px;line-height:1}
.pay-left .lead{color:#bbb;font-size:1.05rem;margin-bottom:40px;max-width:520px}

.steps{list-style:none;display:flex;flex-direction:column;gap:24px;margin-bottom:32px}
.steps li{display:flex;gap:18px}
.step-num{
  flex:0 0 40px;height:40px;border-radius:50%;
  background:rgba(212,168,87,.12);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',sans-serif;font-size:1.2rem;
  border:1px solid rgba(212,168,87,.4);
}
.steps h4{font-family:'Inter',sans-serif;font-weight:600;font-size:1rem;color:#fff;margin-bottom:4px}
.steps p{color:#aaa;font-size:.92rem}

.warning{
  padding:14px 18px;border-radius:10px;
  background:rgba(255,170,0,.08);border:1px solid rgba(255,170,0,.3);
  color:#ffd084;font-size:.9rem;
}

/* pay card */
.pay-card{
  background:linear-gradient(180deg,#161616,#101010);
  border:1px solid var(--line);border-radius:18px;
  padding:32px;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.pay-amount{margin-bottom:20px}
.pay-amount span{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}
.pay-amount h2{
  font-family:'Bebas Neue',sans-serif;font-size:3.5rem;
  color:var(--gold);margin-top:6px;
}
.pay-divider{height:1px;background:var(--line);margin:20px 0}
.pay-detail{margin-bottom:18px}
.pay-detail span{display:block;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px}

.copyable{
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;
}
.copyable code{
  font-family:'JetBrains Mono','Courier New',monospace;
  color:#fff;font-size:1rem;
}
.copyable.big code{font-size:1.3rem;letter-spacing:.05em;color:var(--gold)}
.copy-btn{
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 12px;border-radius:6px;
  background:rgba(212,168,87,.15);color:var(--gold);
  transition:background .2s;
}
.copy-btn:hover{background:var(--gold);color:#000}
.copy-btn.copied{background:#2a8a4f;color:#fff}

.pay-summary{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;font-size:.9rem}
.pay-summary div{display:flex;justify-content:space-between;color:#bbb}
.pay-summary strong{color:#fff}

.pay-card .btn{margin-top:10px}

/* modal */
.modal{
  position:fixed;inset:0;z-index:100;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
  padding:24px;
}
.modal.open{display:flex;animation:fadeUp .3s ease}
.modal-card{
  background:linear-gradient(180deg,#181818,#0f0f0f);
  border:1px solid rgba(212,168,87,.3);
  border-radius:18px;padding:40px 32px;text-align:center;
  max-width:420px;width:100%;
}
.modal-icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--gold);color:#000;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:700;margin:0 auto 20px;
}
.modal-card h3{font-size:1.8rem;color:#fff;margin-bottom:10px}
.modal-card p{color:#bbb;margin-bottom:24px}

/* ============================================================
   COMPONENT 1 — LIQUID GLASS NAVBAR
   ============================================================ */
.glass-svg{position:absolute;width:0;height:0;overflow:hidden}

.site-header.glass-nav{
  position:fixed;top:14px;left:50%;right:auto;
  transform:translateX(-50%);
  width:calc(100% - 32px);max-width:1180px;
  display:flex;align-items:center;
  padding:10px 20px;border-radius:22px;
  z-index:50;overflow:hidden;isolation:isolate;
  background:transparent;border:none;
  box-shadow:0 6px 16px rgba(0,0,0,.28),0 0 24px rgba(0,0,0,.12);
  transition:padding .4s cubic-bezier(.175,.885,.32,2.2),border-radius .4s ease;
}
.glass-nav .glass-layer{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.glass-nav .glass-distort{
  z-index:0;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  /* SVG displacement filter removed — it rendered as black/garbled boxes on
     mobile browsers. The blur + tint + shine layers keep the glass look. */
}
.glass-nav .glass-tint{z-index:1;background:rgba(16,16,16,.42)}
.glass-nav .glass-shine{
  z-index:2;
  box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.20),
             inset -1px -1px 1px 1px rgba(255,255,255,.12);
}
.glass-nav .glass-content{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  width:100%;gap:24px;
}
.nav-mobile-cta{padding:7px 13px;font-size:.82rem}
.nav-mobile-actions{display:none}
/* mobile dropdown menu */
@media(max-width:720px){
  .nav.open{
    display:flex;flex-direction:column;gap:14px;
    position:absolute;top:60px;right:12px;
    padding:18px 22px;border-radius:14px;
    background:rgba(14,14,14,.92);backdrop-filter:blur(14px);
    border:1px solid var(--line);
    box-shadow:0 20px 50px rgba(0,0,0,.5);
  }
}

/* ============================================================
   COMPONENT 2 — ROTATING HERO WORDS (animated-hero)
   ============================================================ */
.rotating-line{
  position:relative;
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(1.8rem,4.6vw,3rem);
  letter-spacing:.05em;line-height:1.1;
  color:#dcdcdc;
  margin:12px 0 32px;
  display:flex;gap:.35em;align-items:center;justify-content:center;
  flex-wrap:nowrap;text-align:center;
}
.rotating-prefix{color:#cfcfcf}
.rotating-words{
  position:relative;display:inline-block;
  width:5.5em;height:1.25em;overflow:hidden;
  text-align:left;vertical-align:middle;
  transition:width .5s cubic-bezier(.2,.8,.2,1);
}
.rotating-words > span{
  position:absolute;left:0;top:0;
  white-space:nowrap;
  color:var(--gold);font-weight:600;
  opacity:0;transform:translateY(150%);
  transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .45s ease;
  will-change:transform,opacity;
}

/* ============================================================
   COMPONENT 3 — SCROLL-TILT HERO (container-scroll-animation)
   ============================================================ */
.scroll-hero{
  position:relative;
  min-height:160vh;          /* gives scroll room for the tilt reveal */
  padding:0 16px;
}
.scroll-hero-inner{
  position:sticky;top:0;
  height:100vh;height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  perspective:1000px;
  padding:90px 0 0;
}
.scroll-hero-header{
  max-width:900px;text-align:center;
  margin-bottom:14px;will-change:transform;
}
.scroll-hero-header .eyebrow{margin-bottom:16px}
.scroll-hero-header .hero-title{
  font-size:clamp(3.4rem,9vw,7rem);
  margin-bottom:4px;
}
.scroll-hero-card{
  width:min(1000px,100%);
  height:clamp(260px,50vh,580px);
  border:4px solid #2b2b2b;border-radius:30px;
  background:#161616;padding:8px;
  transform:rotateX(20deg) scale(1.05);
  will-change:transform;
  box-shadow:0 0 #0000004d,0 9px 20px #0000004a,0 37px 37px #00000042,
             0 84px 50px #00000026,0 149px 60px #0000000a,0 233px 65px #00000003;
}
.scroll-hero-card-inner{
  position:relative;width:100%;height:100%;
  border-radius:20px;overflow:hidden;
  background:linear-gradient(135deg,#1a1a1a,#0c0c0c);
}
.scroll-hero-card-inner .hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;background:transparent;
}
.card-placeholder{
  position:absolute;inset:0;z-index:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:
    radial-gradient(circle at 50% 38%,rgba(212,168,87,.10),transparent 60%),
    linear-gradient(135deg,#1a1a1a,#0c0c0c);
}
.cp-brand{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,6vw,3.4rem);
  letter-spacing:.12em;color:#2f2f2f;
}
.cp-sub{
  color:#4a4a4a;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
}
.scroll-hero .scroll-indicator{bottom:24px}

@media(max-width:768px){
  .scroll-hero{min-height:150vh}
  .scroll-hero-inner{padding-top:100px;justify-content:flex-start;perspective:700px}
  .scroll-hero-card{height:clamp(300px,48vh,460px);border-radius:24px;border-width:3px}
}

/* ============================================================
   COMPONENT 5 — DYNAMIC ISLAND MOBILE NAV (dynamic-island-toc)
   ============================================================ */
.island-root,.island-backdrop{display:none}
.island-backdrop{
  position:fixed;inset:0;z-index:9998;
  background:rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .4s ease;
}
.island-backdrop.show{opacity:1;pointer-events:auto}
.island-root{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:9999;
}
.island{
  position:relative;overflow:hidden;
  width:280px;height:52px;border-radius:26px;
  background:rgba(18,18,18,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 44px rgba(0,0,0,.55);
  color:#fff;max-width:calc(100vw - 28px);
  transition:width .5s cubic-bezier(.22,1,.36,1),
             height .5s cubic-bezier(.22,1,.36,1),
             border-radius .5s cubic-bezier(.22,1,.36,1);
  animation:islandIn .6s cubic-bezier(.22,1,.36,1) both;
}
.island.open{width:330px;height:min(62vh,420px);border-radius:24px}
@keyframes islandIn{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}

.island-closed{
  position:absolute;inset:0;display:flex;align-items:center;gap:13px;
  padding:0 18px;cursor:pointer;transition:opacity .3s ease,filter .3s ease;
}
.island.open .island-closed{opacity:0;filter:blur(4px);pointer-events:none}
.island-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:0 0 auto}
.island-label{flex:1;font-size:.9rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.island-ring{flex:0 0 auto;transform:rotate(-90deg)}
.island-ring .bg{stroke:rgba(255,255,255,.18)}
.island-ring .fg{stroke:var(--gold);transition:stroke-dashoffset .15s ease}

.island-open{
  position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transition:opacity .35s ease;
}
.island.open .island-open{opacity:1;pointer-events:auto;transition-delay:.1s}
.island-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px}
.island-head span{font-size:.68rem;letter-spacing:.14em;color:#8a8a8a;font-weight:600}
.island-close{color:#8a8a8a;font-size:1.5rem;line-height:1;padding:0 4px;transition:color .2s}
.island-close:hover{color:#fff}
.island-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 10px 14px;display:flex;flex-direction:column;gap:2px}
.island-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-radius:12px;text-align:left;
  font-size:.98rem;color:rgba(255,255,255,.5);
  transition:background .25s,color .25s;
}
.island-item:hover{color:#fff;background:rgba(255,255,255,.05)}
.island-item.active{background:rgba(212,168,87,.15);color:#fff;font-weight:500}
.island-item span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.island-item .tick{width:6px;height:6px;border-radius:50%;background:var(--gold);transform:scale(0);transition:transform .25s;flex:0 0 auto}
.island-item.active .tick{transform:scale(1)}

@media(max-width:720px){
  .island-root,.island-backdrop{display:block}
  .site-header.glass-nav .burger{display:none}   /* retire the clipped burger */
  .nav-mobile-actions{display:flex;align-items:center;gap:8px}  /* Anmelden + Jetzt buchen in the top bar */
  .scroll-hero .scroll-indicator{display:none}    /* avoid clash with the island */
  body{padding-bottom:86px}                       /* clearance so the island never hides content */
}

/* ============================================================
   COMPONENT 6 — SKEW GRADIENT CARDS (gradient-card-showcase)
   Gold / silver / black palette
   ============================================================ */
.skew-cards-wrap{
  display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;
  max-width:860px;margin:48px auto 0;padding:10px 0;
}
.skew-card{
  position:relative;width:320px;height:400px;margin:34px 28px;
  transition:all .5s;
}
.skew-panel{
  position:absolute;top:0;left:50px;width:50%;height:100%;
  border-radius:10px;background:var(--grad);
  transform:skewX(15deg);transition:all .5s;
}
.skew-card:hover .skew-panel{transform:skewX(0);left:20px;width:calc(100% - 90px)}
.skew-panel.blur{filter:blur(30px);opacity:.7}

.skew-blobs{position:absolute;inset:0;z-index:10;pointer-events:none}
.skew-blobs .blob{
  position:absolute;width:0;height:0;border-radius:10px;opacity:0;
  background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 5px 15px rgba(0,0,0,.08);
  transition:all .5s;animation:skewBlob 2s ease-in-out infinite;
}
.skew-blobs .b1{top:0;left:0}
.skew-blobs .b2{bottom:0;right:0;animation-delay:-1s}
.skew-card:hover .b1{top:-50px;left:50px;width:100px;height:100px;opacity:1}
.skew-card:hover .b2{bottom:-50px;right:50px;width:100px;height:100px;opacity:1}
@keyframes skewBlob{0%,100%{transform:translateY(10px)}50%{transform:translateX(-10px)}}

.skew-content{
  position:relative;z-index:20;left:0;
  padding:30px 38px;border-radius:10px;color:#fff;
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.08);
  transition:all .5s;
}
.skew-card:hover .skew-content{left:-25px;padding:46px 38px}
.skew-icon{font-size:1.8rem;margin-bottom:12px}
.skew-content h3{font-size:1.5rem;margin-bottom:8px;color:#fff;letter-spacing:.04em}
.skew-content p{font-size:.96rem;line-height:1.55;color:#dcdcdc;margin-bottom:20px}

/* --- Liquid-glass CTA button (liquid-glass-button) --- */
.liquid-btn{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  height:46px;padding:0 26px;border-radius:10px;
  font-weight:600;font-size:.92rem;color:#fff;letter-spacing:.02em;
  cursor:pointer;transition:transform .3s ease;
}
.liquid-btn:hover{transform:scale(1.05)}
.liquid-btn-shadow{
  position:absolute;inset:0;z-index:0;border-radius:9999px;transition:all .2s;
  box-shadow:
    0 0 8px rgba(0,0,0,.03),
    0 2px 6px rgba(0,0,0,.08),
    inset 3px 3px .5px -3.5px rgba(255,255,255,.09),
    inset -3px -3px .5px -3.5px rgba(255,255,255,.85),
    inset 1px 1px 1px -.5px rgba(255,255,255,.6),
    inset -1px -1px 1px -.5px rgba(255,255,255,.6),
    inset 0 0 6px 6px rgba(255,255,255,.12),
    inset 0 0 2px 2px rgba(255,255,255,.06),
    0 0 12px rgba(0,0,0,.15);
}
.liquid-btn-glass{
  position:absolute;inset:0;z-index:-1;border-radius:10px;overflow:hidden;
  /* was backdrop-filter:url(#container-glass) — unsupported on mobile, rendered
     the button black. Plain translucent blur glass renders the same everywhere. */
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);
}
.liquid-btn-text{position:relative;z-index:10}

@media(max-width:720px){
  .skew-cards-wrap{max-width:100%}
  .skew-card{width:300px;height:380px;margin:22px auto}
}

/* ============================================================
   COMPONENT 7 — BEFORE / AFTER COMPARISON SLIDER (image-comparison-slider)
   ============================================================ */
.compare{
  position:relative;width:100%;aspect-ratio:4/5;
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  user-select:none;touch-action:none;cursor:ew-resize;
}
.compare-img{position:absolute;inset:0;width:100%;height:100%}
.compare-img img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:left center;display:block;
}
.compare-ph{position:absolute;inset:0}
.ph-before{background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.05),transparent 60%),linear-gradient(135deg,#2b2b2b,#0c0c0c)}
.ph-after{background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.20),transparent 60%),linear-gradient(135deg,#e6c87a,#9b7b25)}
.compare-after{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:hidden;clip-path:inset(0 50% 0 0);
}
.compare-badge{
  position:absolute;top:12px;z-index:25;
  padding:5px 12px;border-radius:999px;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.badge-after{left:12px;background:rgba(212,168,87,.9);color:#000}
.badge-before{right:12px;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.2)}
.compare-handle{
  position:absolute;top:0;bottom:0;left:calc(50% - 1px);width:2px;z-index:30;
  background:rgba(255,255,255,.85);pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.compare-knob{
  width:46px;height:46px;border-radius:50%;background:#fff;color:#333;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.4);transition:transform .2s ease;
}
.compare.dragging .compare-knob{transform:scale(1.12)}

/* ============================================================
   COMPONENT 8 — ANIMATED SHADER BACKGROUND (silver/gold/black)
   ============================================================ */
#bg-shader{
  position:fixed;inset:0;width:100vw;height:100vh;
  z-index:-2;display:block;pointer-events:none;
}
.bg-veil{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,8,.42),rgba(8,8,8,.64));
}
/* lighter veil on mobile so the (re-enabled) shader is actually visible */
@media(max-width:768px){.bg-veil{background:linear-gradient(180deg,rgba(8,8,8,.20),rgba(8,8,8,.44))}}
/* let the shader show through the "why" section */
.why{background:transparent}

/* Static brand backdrop — used on mobile/low-power devices where the WebGL
   shader (and beams) are skipped. Keeps the gold/silver/black ambiance with
   zero GPU cost. main.js / beams.js add the .bg-static class. A fixed ::after
   layer (composited, no scroll jank) sits behind all content at z-index:-3. */
body.bg-static::after{
  content:'';
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(78% 56% at 80% -8%, rgba(212,168,87,.40), rgba(212,168,87,.10) 38%, transparent 64%),
    radial-gradient(60% 44% at 10% 6%, rgba(228,200,140,.16), transparent 56%),
    radial-gradient(86% 60% at 50% 116%, rgba(196,200,214,.16), transparent 62%),
    radial-gradient(125% 100% at 50% 50%, transparent 52%, rgba(0,0,0,.55)),
    linear-gradient(165deg,#17130c,#0f0d0b 55%,#080808);
}

/* ============================================================
   COMPONENT 9 — SHIMMER + GLITTER LIQUID CTA ("Get blessed")
   ============================================================ */
.bless-cta{display:flex;justify-content:center;margin-top:54px}
.bless-btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:60px;padding:0 44px;border-radius:9999px;
  font-weight:700;font-size:1.05rem;letter-spacing:.03em;color:#fff;
  text-decoration:none;cursor:pointer;
  background:linear-gradient(120deg,rgba(212,168,87,.20),rgba(232,232,232,.10),rgba(212,168,87,.20));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;
  box-shadow:
    inset 3px 3px .5px -3.5px rgba(255,255,255,.6),
    inset -3px -3px .5px -3.5px rgba(255,255,255,.85),
    inset 1px 1px 1px -.5px rgba(255,255,255,.6),
    inset -1px -1px 1px -.5px rgba(255,255,255,.6),
    inset 0 0 6px 6px rgba(255,255,255,.10),
    0 8px 24px rgba(0,0,0,.4),
    0 0 22px rgba(212,168,87,.28);
}
.bless-btn:hover{
  transform:scale(1.05);
  box-shadow:
    inset 3px 3px .5px -3.5px rgba(255,255,255,.7),
    inset -3px -3px .5px -3.5px rgba(255,255,255,.95),
    inset 0 0 8px 6px rgba(255,255,255,.14),
    0 10px 30px rgba(0,0,0,.45),
    0 0 34px rgba(212,168,87,.45);
}
.bless-text{position:relative;z-index:3;white-space:nowrap}

/* shimmer sweep */
.bless-shine{position:absolute;inset:0;z-index:2;border-radius:inherit;overflow:hidden;pointer-events:none}
.bless-shine::before{
  content:"";position:absolute;top:-60%;left:-40%;width:35%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg);
  animation:blessShine 3.6s ease-in-out infinite;
}
@keyframes blessShine{0%{left:-40%}60%{left:130%}100%{left:130%}}

/* glitter sparkles (positions filled by JS) */
.bless-glitter{position:absolute;inset:0;z-index:2;border-radius:inherit;overflow:hidden;pointer-events:none}
.bless-glitter .spark{
  position:absolute;width:var(--sz,3px);height:var(--sz,3px);border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#ffe6a8 45%,rgba(255,230,168,0) 70%);
  opacity:0;transform:scale(.3);
  animation:twinkle 2.4s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1)}}

@media(prefers-reduced-motion:reduce){
  .bless-shine::before,.bless-glitter .spark{animation:none}
  .bless-glitter .spark{opacity:.5}
}

/* ============================================================
   COMPONENT 10 — AUTH / SIGN-IN PAGE (modern-animated-sign-in)
   ============================================================ */
.page-auth{min-height:100vh;min-height:100svh}
.auth-back{
  position:fixed;top:20px;left:24px;z-index:40;font-size:.85rem;color:#cfcfcf;
  padding:8px 14px;border-radius:999px;
  background:rgba(20,20,20,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.1);transition:color .2s,border-color .2s;
}
.auth-back:hover{color:var(--gold);border-color:rgba(212,168,87,.4)}

.auth-split{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;min-height:100svh}
@media(max-width:900px){.auth-split{grid-template-columns:1fr}}

/* LEFT — shader + brand */
.auth-left{position:relative;display:flex;align-items:center;justify-content:center;padding:40px;text-align:center}
@media(max-width:900px){.auth-left{display:none}}
.auth-brand{text-align:center}
.auth-brand .hero-title{font-size:clamp(2.6rem,5.5vw,5rem);line-height:.95;padding:0 .22em}
.auth-sub{
  margin-top:16px;font-family:'Bebas Neue',sans-serif;letter-spacing:.35em;
  text-transform:uppercase;font-size:1.4rem;color:var(--gold);
}

/* RIGHT — glass form */
.auth-right{display:flex;align-items:center;justify-content:center;padding:40px 24px;min-height:100vh;min-height:100svh}
.auth-card{
  width:100%;max-width:420px;
  background:rgba(255,255,255,.045);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(212,168,87,.22);border-radius:20px;padding:36px 32px;
  box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);
}
.auth-h2{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;letter-spacing:.04em;color:#fff}
.auth-csub{color:#aaa;font-size:.92rem;margin-top:2px;margin-bottom:22px}

.auth-google{
  width:100%;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#eee;font-weight:500;font-size:.92rem;transition:background .2s,border-color .2s;
}
.auth-google:hover{background:rgba(255,255,255,.1);border-color:rgba(212,168,87,.4)}
.auth-google svg{width:18px;height:18px}

.auth-or{display:flex;align-items:center;gap:14px;margin:18px 0;color:#888;font-size:.8rem}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.12)}

.auth-field{margin-bottom:12px}
.auth-field label{display:block;font-size:.82rem;color:#cfcfcf;margin-bottom:7px;font-weight:500}
.auth-field label span{color:var(--gold)}
.auth-input{position:relative;border-radius:10px;padding:1px;background:rgba(255,255,255,.09);transition:background .3s}
.auth-field[data-glow]:hover .auth-input{
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(212,168,87,.65),transparent 80%);
}
.auth-input input{
  width:100%;height:44px;border:none;border-radius:9px;background:#161616;color:#fff;
  padding:0 14px;font-family:inherit;font-size:.95rem;outline:none;transition:box-shadow .2s;
}
.auth-input input::placeholder{color:#6a6a6a}
.auth-input input:focus{box-shadow:0 0 0 2px rgba(212,168,87,.5)}
.auth-input.pw input{padding-right:46px}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#999;border-radius:8px;
}
.pw-toggle:hover{color:#fff}
.pw-toggle svg{width:18px;height:18px}
.auth-err{min-height:15px;color:#ff6b6b;font-size:.74rem;margin-top:5px}

.auth-submit{
  width:100%;height:48px;margin-top:8px;border-radius:10px;
  background:linear-gradient(135deg,#e6c87a,#d4a857);color:#1a1a1a;
  font-weight:700;font-size:1rem;letter-spacing:.02em;
  box-shadow:0 8px 24px rgba(212,168,87,.3);
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.auth-submit:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(212,168,87,.45);filter:brightness(1.05)}
.auth-submit:active{transform:translateY(0)}

.auth-toggle{margin-top:18px;text-align:center;font-size:.85rem;color:#aaa}
.auth-toggle button{color:var(--gold);font-weight:600;margin-left:6px}
.auth-toggle button:hover{text-decoration:underline}
.auth-note{margin-top:12px;text-align:center;font-size:.8rem;color:#8a8a8a;min-height:18px}

/* BoxReveal animation (gold bar wipes away to reveal) */
.reveal{--d:0s;position:relative;display:inline-block;overflow:hidden}
.reveal > *{animation:revealUp .55s cubic-bezier(.22,1,.36,1) calc(var(--d) + .2s) both}
.reveal::after{
  content:'';position:absolute;top:3px;bottom:3px;left:0;right:0;
  background:var(--gold);border-radius:4px;z-index:5;
  animation:revealBar .55s cubic-bezier(.6,0,.4,1) var(--d) both;
}
.reveal.d1{--d:.15s}
.reveal.d2{--d:.3s}
@keyframes revealUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes revealBar{0%{left:0;right:0}100%{left:100%;right:0}}

@media(prefers-reduced-motion:reduce){
  .reveal > *{animation:none}
  .reveal::after{display:none}
}
@media(max-width:900px){
  .auth-right{min-height:100vh;min-height:100svh;padding:88px 18px 48px}
  .auth-card{padding:28px 22px}
}
@media(max-width:720px){
  body.page-auth{padding-bottom:0}
}

/* ============================================================
   BOOKING PANELS — glass + gold/silver/black (match "Warum Msp")
   ============================================================ */
.page-booking .panel,
.page-booking .summary{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(150% 130% at 85% 115%, rgba(212,168,87,.12), transparent 55%),
    radial-gradient(120% 120% at 0% -10%, rgba(225,225,225,.06), transparent 50%),
    rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(212,168,87,.20);
  box-shadow:0 22px 55px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s ease,box-shadow .35s ease;
}
/* skewed gold/silver/black gradient peeking under the glass (like the why cards) */
.page-booking .panel::before,
.page-booking .summary::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  right:-30px;bottom:-50px;width:60%;height:70%;
  background:linear-gradient(315deg,#e6c87a,#9a9a9a,#0a0a0a);
  transform:skewX(-12deg);filter:blur(16px);opacity:.4;
  transition:opacity .45s ease,transform .45s ease;
}
.page-booking .panel:hover,
.page-booking .summary:hover{
  transform:translateY(-3px);
  border-color:rgba(212,168,87,.42);
  box-shadow:0 28px 65px rgba(0,0,0,.55),0 0 34px rgba(212,168,87,.12),inset 0 1px 0 rgba(255,255,255,.1);
}
.page-booking .panel:hover::before,
.page-booking .summary:hover::before{opacity:.6;transform:skewX(-6deg) translate(-14px,-8px)}
/* kill the corner-glow on all booking panels so it doesn't shine through the cells/controls */
.page-booking .panel::before,
.page-booking .summary::before{display:none}

/* inner controls get a touch more glass to sit nicely on the panels */
.page-booking .loc-pill,
.page-booking .slot,
.page-booking .cal-day{background:rgba(255,255,255,.035)}

/* ============================================================
   CUSTOM DROPDOWN (dropdown-menu) — replaces the native <select>
   ============================================================ */
.dd{position:relative;width:220px;max-width:100%;flex:none}
.dd-trigger{
  display:inline-flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;height:38px;padding:0 12px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;
  font-family:inherit;font-size:.9rem;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.dd-trigger:hover{border-color:rgba(212,168,87,.4);background:rgba(255,255,255,.09)}
.dd.open .dd-trigger{border-color:var(--gold)}
.dd-trigger svg{width:16px;height:16px;opacity:.65;transition:transform .25s}
.dd.open .dd-trigger svg{transform:rotate(180deg)}

.dd-menu{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:rgba(20,20,20,.97);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(212,168,87,.22);border-radius:12px;padding:5px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  opacity:0;transform:translateY(-6px) scale(.97);pointer-events:none;transform-origin:top center;
  transition:opacity .18s ease,transform .18s ease;
}
.dd.open .dd-menu{opacity:1;transform:none;pointer-events:auto}
.dd-item{
  display:flex;align-items:center;width:100%;gap:8px;
  padding:9px 12px;border-radius:8px;text-align:left;white-space:nowrap;
  font-family:inherit;font-size:.9rem;color:#cfcfcf;cursor:pointer;
  transition:background .15s,color .15s;
}
.dd-item:hover{background:rgba(255,255,255,.07);color:#fff}
.dd-item.is-active{background:rgba(212,168,87,.15);color:#fff;font-weight:500}
.dd-check{width:15px;height:15px;margin-left:auto;color:var(--gold);opacity:0;transition:opacity .15s}
.dd-item.is-active .dd-check{opacity:1}

/* ============================================================
   BEAMS BACKGROUND (beams-background) — gold / silver / black, booking page
   ============================================================ */
#bg-beams{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;pointer-events:none;display:block}
body.page-booking::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,7,.12),rgba(7,7,7,.42));
}

/* ============================================================
   CUSTOMER DASHBOARD — glass cards on the landing-page shader
   ============================================================ */
.auth-demo{margin-top:14px;text-align:center;color:#6f6f6f;font-size:.78rem;letter-spacing:.03em}
.auth-demo b{color:var(--gold);font-weight:700}

.dash-hero{padding:140px 0 26px}
.dash-hero h1{font-size:clamp(2.4rem,6vw,4rem);margin-bottom:12px}
.dash-hero h1 span{color:var(--gold)}
.dash-hero .lead{color:#bbb;max-width:560px;font-size:1.05rem}
.dash-main{padding:18px 0 120px}

/* shared glass surface (matches the booking panels, minus the corner-glow) */
.dash-stat,.dash-panel{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:
    radial-gradient(150% 130% at 85% 115%, rgba(212,168,87,.10), transparent 55%),
    radial-gradient(120% 120% at 0% -10%, rgba(225,225,225,.05), transparent 50%),
    rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(212,168,87,.18);
  box-shadow:0 22px 55px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
}

/* stat cards */
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:22px}
@media(max-width:820px){.dash-stats{grid-template-columns:1fr}}
.dash-stat{padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.stat-top{display:flex;align-items:center;gap:11px;color:var(--muted);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.stat-icon{
  width:36px;height:36px;border-radius:10px;flex:none;
  display:grid;place-items:center;color:var(--gold);
  background:rgba(212,168,87,.14);border:1px solid rgba(212,168,87,.3);
}
.stat-icon svg{width:18px;height:18px}
.dash-stat strong{font-family:'Bebas Neue',sans-serif;font-size:2.9rem;color:#fff;
  letter-spacing:.02em;line-height:1}
.stat-sub{color:var(--muted);font-size:.82rem}

/* charts */
.dash-charts{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}
@media(max-width:900px){.dash-charts{grid-template-columns:1fr}}
.dash-panel{padding:24px;margin-bottom:22px}
.dash-charts .dash-panel{margin-bottom:0}
.dash-panel .panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.dash-panel .panel-head h3{color:#fff;letter-spacing:.06em}
.chart{width:100%}
.chart svg{width:100%;height:auto;display:block;overflow:visible}

.chart .bar{transform-box:fill-box;transform-origin:center bottom;
  transform:scaleY(0);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.chart.in .bar{transform:scaleY(1)}
.bar-val{fill:#fff;font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:.04em;
  opacity:0;transition:opacity .4s ease .5s}
.chart.in .bar-val{opacity:1}
.axis-x{fill:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.axis-y{fill:var(--muted);font-size:10px}
.axis-base{stroke:rgba(255,255,255,.12)}
.grid{stroke:rgba(255,255,255,.07)}
.dot{fill:#e6c87a;stroke:#0a0a0a;stroke-width:2;opacity:0;transition:opacity .4s ease .7s}
.chart.in .dot{opacity:1}
.spend-area{opacity:0;transition:opacity .8s ease .25s}
.chart.in .spend-area{opacity:1}
.spend-line{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.1s ease}
.chart.in .spend-line{stroke-dashoffset:0}

/* tabs */
.dash-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.dash-tab{padding:8px 15px;border-radius:999px;font-size:.85rem;color:#cfcfcf;
  background:rgba(255,255,255,.04);border:1px solid var(--line);transition:all .2s}
.dash-tab:hover{border-color:rgba(212,168,87,.4);color:#fff}
.dash-tab.active{background:var(--gold);color:#000;border-color:var(--gold);font-weight:600}
.dash-tab .cnt{opacity:.65;margin-left:5px;font-weight:600}
.dash-tab.active .cnt{opacity:.8}

/* orders */
.orders{display:flex;flex-direction:column;gap:10px}
.order-row{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:15px 18px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  transition:border-color .2s,background .2s,transform .2s}
.order-row:hover{border-color:rgba(212,168,87,.35);background:rgba(255,255,255,.05);transform:translateY(-1px)}
.order-left{display:flex;flex-direction:column;gap:5px;min-width:0}
.order-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.order-id{color:var(--gold);font-size:.76rem;letter-spacing:.05em;font-weight:600}
.order-service{color:#fff;font-weight:600}
.order-meta{color:var(--muted);font-size:.84rem;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.order-meta .dot{opacity:.5}
.order-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.order-price{color:#fff;font-weight:700;font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.02em}
.order-row.is-cancelled .order-price{text-decoration:line-through;color:var(--muted)}
.badge{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.badge-done{color:#86d6a2;background:rgba(80,200,120,.12);border-color:rgba(80,200,120,.35)}
.badge-pending{color:#e7c06a;background:rgba(212,168,87,.12);border-color:rgba(212,168,87,.42)}
.badge-cancelled{color:#e29393;background:rgba(210,90,90,.12);border-color:rgba(210,90,90,.35)}
.orders-empty{padding:18px 2px}
@media(max-width:520px){
  .order-row{flex-direction:column;align-items:flex-start;gap:12px}
  .order-right{flex-direction:row;align-items:center;width:100%;justify-content:space-between}
}

/* ============================================================
   COMPONENT 4 — SCROLL-TILT VIDEO GRID (scroll-tilted-grid)
   ============================================================ */
.tilt-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:2.4rem;
  width:100%;max-width:560px;
  margin:0 auto;
  padding:5vh 12px 8vh;
}
.tilt-tile{
  position:relative;z-index:10;margin:0;
  perspective:900px;
}
.tilt-inner{
  position:relative;width:100%;
  aspect-ratio:3/4;
  border-radius:12px;overflow:hidden;
  background:#0d0d0d;
  will-change:transform,filter;
  transform-style:preserve-3d;
}
.tilt-scale{
  position:absolute;inset:0;
  will-change:transform;transform-origin:center;
}
.tile-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;background:transparent;
}
.tile-ph{
  position:absolute;inset:0;z-index:0;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 50% 42%,rgba(212,168,87,.10),transparent 62%),
    linear-gradient(150deg,#1d1d1d,#0b0b0b);
}
.tile-ph .play{
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:#d4a857;
  border:1px solid rgba(212,168,87,.4);
  background:rgba(0,0,0,.25);padding-left:3px;
}
.tile-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:16px 16px 14px;
  font-family:'Bebas Neue',sans-serif;
  font-size:1.15rem;letter-spacing:.06em;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.65),transparent);
}
@media(max-width:768px){
  .tilt-grid{gap:1.4rem;padding:3vh 12px 6vh}
  .tile-cap{font-size:1rem;padding:12px}
  .tile-ph .play{width:44px;height:44px}
  /* Flat gallery on mobile — the scroll-tilt 3D dims tiles to brightness 0 until
     "focused", which left a huge black void on phones. !important overrides the
     JS inline transform/filter. */
  .tilt-inner{transform:none!important;filter:none!important}
  .tilt-scale{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  .tilt-inner{transform:none!important;filter:none!important}
  .tilt-scale{transform:none!important}
}