:root{
  /* darker organic coffee tones for a richer, premium feel */
  --bg-1:#2f1b12; /* darker coffee base */
  --bg-2:#120a08; /* deep almost-black tone */
  --glass-bg: rgba(255,255,255,0.035);
  --glass-border: rgba(255,255,255,0.05);
  --led-color: 195; /* hue for dynamic LED (default: blue) */
  --led-blue: #00b3ff;
  --led-orange: #ff8a00;
  --led-glow: 0 0 18px rgba(0,179,255,0.18), 0 0 40px rgba(0,179,255,0.08);
  --text: rgba(255,255,255,0.94);
  --muted: rgba(255,255,255,0.72);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(160deg,var(--bg-1), var(--bg-2));
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* allow vertical scrolling so content can be navigated */
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* full-screen particles canvas stays fixed to viewport */
/* particles canvas sits above the slider but below modals/lightbox so particles appear over slides */
#bg{position:fixed;inset:0;z-index:50;pointer-events:none}
#particles{width:100%;height:100%;display:block;mix-blend-mode:screen}

/* central stage flows with document height so page can scroll */
.stage{
  position:relative;
  z-index:2;
  min-height:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:20px;
  padding:18px;
  padding-bottom:80px; /* ensure space at bottom for footer / cart bar */
}

/* Logo frame with LED blue border and pulsing */
.logo-wrap{display:flex;align-items:center;justify-content:center}
.led-frame{
  width:120px;
  height:120px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:2px solid rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--led-glow);
  transition:transform .18s ease, box-shadow .18s ease;
  padding:10px;
  outline:none;
  position:relative;
  cursor:pointer;
}
/* LED ring */
.led-frame::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:22px;
  pointer-events:none;
  background: conic-gradient(from 120deg, rgba(0,179,255,0.18), rgba(0,179,255,0.04), rgba(0,179,255,0.14));
  mix-blend-mode:screen;
  filter:blur(6px);
  opacity:0.9;
  transition:opacity .3s ease, transform .3s ease;
  transform:scale(1);
}

/* hover / focus pulso */
.led-frame:hover, .led-frame:focus{
  transform:translateY(-6px) scale(1.02);
  box-shadow: 0 0 28px rgba(0,179,255,0.22), 0 0 60px rgba(0,179,255,0.12);
}
.led-frame:active{transform:translateY(-2px) scale(.995)}

/* logo image */
.logo{width:78%;height:auto;display:block}

/* translucent glass card */
.glass-card{
  width:min(94vw,960px);
  max-width:960px;
  padding:18px 20px;
  border-radius:16px;
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 6px 30px rgba(0,0,0,0.45);
  text-align:center;
  transform:translateY(0);
}

/* LED major title - color follows led-color hue */
.led-title{
  margin:8px 0 6px;
  font-size:clamp(20px,7.6vw,40px);
  letter-spacing:2px;
  color:var(--text);
  position:relative;
  padding:6px 12px;
  border-radius:10px;
  background: linear-gradient(90deg, hsla(var(--led-color),80%,55%,0.06), hsla(var(--led-color),80%,55%,0.02));
  box-shadow: 0 0 18px hsla(var(--led-color),90%,60%,0.08), inset 0 0 6px hsla(var(--led-color),80%,55%,0.02);
  text-shadow: 0 0 10px hsla(var(--led-color),90%,60%,0.18);
  font-weight:700;
}

/* orange LED title for packages */
.section-title{
  margin:6px 0 12px;
  font-weight:700;
  font-size:clamp(16px,4.2vw,22px);
  color:var(--text);
}
.orange-led{
  color:var(--text);
  background: linear-gradient(90deg, rgba(255,138,0,0.08), rgba(255,138,0,0.02));
  padding:8px 12px;
  border-radius:10px;
  box-shadow: 0 0 14px rgba(255,138,0,0.06), inset 0 0 6px rgba(255,138,0,0.02);
  text-shadow: 0 0 6px rgba(255,138,0,0.08);
}

/* subtle LED shimmer animation on title */
@keyframes ledShimmer{
  0%{filter:brightness(1);}
  50%{filter:brightness(1.18) saturate(1.05);}
  100%{filter:brightness(1);}
}
.led-title{animation:ledShimmer 3.8s ease-in-out infinite}

/* welcome heading & paragraph */
.welcome{margin:6px 0 4px;font-size:clamp(14px,4.4vw,20px);color:var(--muted);font-weight:600}
.desc{margin:0 auto;font-size:clamp(12px,3.6vw,15px);color:rgba(255,255,255,0.72);max-width:72%;line-height:1.35}

/* Slider styles - full-bleed banners stretched side-to-side */
.slider-wrap{overflow:hidden; padding:12px 0; position:relative; z-index:20}
/* helper to make the slider span the full viewport width while staying visually inside the flow */
.slider-full{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); border-radius:0; padding-left:0; padding-right:0; box-shadow:none; }
.slider{
  display:flex;
  gap:0;
  width:100%;
  transition:transform 1s cubic-bezier(.2,.9,.3,1);
  will-change:transform;
}
.slide{
  min-width:100%;
  flex:0 0 100%;
  overflow:hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  border-radius:0;
}
.slide img{
  width:100vw;
  /* increased height to present images as full "slides" rather than thin banners */
  height:520px;
  /* contain so the image is shown almost complete while preserving aspect */
  object-fit:contain;
  /* theme-aware soft letterbox that follows the led color so banners don't appear harshly dark */
  background: linear-gradient(180deg, rgba(0,0,0,0.08), hsla(var(--led-color),60%,10%,0.18));
  display:block;
  transform-origin:center center;
}

/* responsive banner heights */
@media (max-width:760px){
  /* mobile: still taller than before so slide shows more content */
  .slide img{height:320px}
}

/* slider controls */
.slider-controls{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:8px}
.slider-controls button{
  background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--text);padding:8px 10px;border-radius:8px;cursor:pointer;
}
.dots{display:flex;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.12);opacity:0.9}
.dot.active{background:var(--led-blue);box-shadow:0 0 10px rgba(0,179,255,0.14)}

/* Packages grid */
.packages-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  align-items:stretch;
}
.pkg{
  padding:12px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.04);
  text-align:left;
  display:flex;flex-direction:column;gap:8px;
}
.pkg-title{font-weight:800;font-size:16px;letter-spacing:1px;color:var(--text)}
.pkg-desc{font-size:13px;color:rgba(255,255,255,0.78)}
.pkg-price{margin-top:auto;font-weight:700;color:var(--muted)}
.add-btn{
  margin-top:8px;padding:10px;border-radius:10px;border:none;background:linear-gradient(90deg,var(--led-orange),#ffb36b);color:#111;font-weight:700;cursor:pointer;
  box-shadow:0 6px 20px rgba(255,138,0,0.08);
}

/* cart bar */
.cart-bar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:12px;padding:8px;border-radius:10px;background:rgba(0,0,0,0.28)}
.cart-bar button{padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text);cursor:pointer}

/* modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:40;padding:18px}
.modal.show{display:flex}
.modal-panel{width:min(92vw,720px);position:relative;padding:18px}
.modal-close{position:absolute;right:12px;top:12px;background:transparent;border:none;color:var(--muted);font-size:18px;cursor:pointer}
.modal-title{margin-top:6px;margin-bottom:8px}
.cart-items{max-height:40vh;overflow:auto;text-align:left}
.cart-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,0.04)}
.cart-summary{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.checkout-btn{padding:10px 14px;border-radius:10px;background:var(--led-blue);border:none;color:#fff;font-weight:700;cursor:pointer}

/* extended menu */
.menu-extended{margin-top:6px;text-align:left;padding:14px}
.muted-block{color:rgba(255,255,255,0.64);font-size:13px;line-height:1.45}

/* responsiveness */
@media (min-width:760px){
  .packages-grid{grid-template-columns:repeat(4,1fr)}
  /* medium screens: slightly reduced from desktop but larger than original banners */
  .slide img{height:420px}
}

/* Gallery grid */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:8px;
}
/* gallery item with rounded corners and LED frame */
.gallery-item{
  display:block;
  border-radius:18px; /* more rounded corners for the outer card */
  overflow:visible; /* allow LED glow to be visible outside */
  position:relative;
  box-shadow:0 14px 40px rgba(0,0,0,0.55);
  padding:8px;
  background:linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.06));
  transition:transform .42s cubic-bezier(.2,.9,.3,1), box-shadow .42s ease;
  transform-origin: top center; /* grow downward and slightly sideways */
  will-change:transform;
}
/* LED frame ring with slow color-shifting pulse */
.gallery-item::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:14px;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(255,138,0,0.18), rgba(255,200,110,0.06));
  box-shadow: 0 0 18px rgba(255,138,0,0.10), 0 0 40px rgba(255,138,0,0.04);
  mix-blend-mode:screen;
  z-index:1;
  transition:transform .28s ease, opacity .28s ease, box-shadow .28s ease, filter .28s ease;
  /* gentle slow pulse and hue shift */
  animation: ledPulseHue 8s linear infinite, ledPulseScale 3.6s ease-in-out infinite;
}

/* image inside the rounded frame */
.gallery-item img{
  width:100%;
  height:140px;
  object-fit:cover;
  display:block;
  border-radius:12px; /* rounded corners for the image itself */
  position:relative;
  z-index:2;
  transition:transform .42s cubic-bezier(.2,.9,.3,1), filter .28s ease;
  transform-origin: top center;
}

/* hover: grow visually by ~20% (scale 1.2) with origin at top so growth extends downward */
.gallery-item:hover{
  transform: scale(1.20);
  box-shadow:0 40px 90px rgba(0,0,0,0.65);
  z-index:6;
}
.gallery-item:hover::before{
  transform: scale(1.04);
  opacity:1;
  box-shadow: 0 0 32px rgba(255,160,60,0.18), 0 0 64px rgba(255,160,60,0.08);
  filter: saturate(1.08);
}
.gallery-item:hover img{
  transform: scale(1.02); /* small extra pop for the image while the whole card scales */
  filter:contrast(1.06) saturate(1.06);
}

/* subtle animations for LED: hue rotation and gentle size pulse */
@keyframes ledPulseHue{
  0%{ filter: hue-rotate(-16deg) brightness(0.98); }
  50%{ filter: hue-rotate(18deg) brightness(1.06); }
  100%{ filter: hue-rotate(-16deg) brightness(0.98); }
}
@keyframes ledPulseScale{
  0%{ transform: scale(0.998); opacity:0.96; }
  50%{ transform: scale(1.01); opacity:1; }
  100%{ transform: scale(0.998); opacity:0.96; }
}

@media (max-width:760px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-item img{height:100px}
  /* reduce scale on small screens to avoid overflow */
  .gallery-item:hover{ transform: scale(1.08); }
}

/* Map card styles */
.map-card { text-align:left; padding-bottom:18px; }
.map-frame{
  width:100%;
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  border:1px solid rgba(255,255,255,0.04);
}
.map-iframe{
  width:100%;
  height:360px;
  border:0;
  display:block;
  background:#000;
}
/* smaller iframe on very small screens */
@media (max-width:520px){
  .map-iframe{ height:260px; }
}

/* Lightbox / viewer for premium images */
#lightbox{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:60;padding:20px;background:linear-gradient(180deg,rgba(0,0,0,0.6),rgba(0,0,0,0.85));
}
#lightbox.show{display:flex}
.lb-panel{
  max-width:92vw;max-height:92vh;width:min(1280px,96%);background:transparent;position:relative;display:flex;align-items:center;justify-content:center;
}
.lb-image{
  max-width:100%;max-height:88vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,0.8);transform-origin:center center;
  transition:transform .28s ease;
  display:block;
}
.lb-controls{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:80;
}
.lb-btn{
  background:linear-gradient(90deg,#ff8a00,#ffb36b);border:none;padding:10px 14px;border-radius:10px;color:#111;font-weight:800;cursor:pointer;box-shadow:0 8px 30px rgba(255,138,0,0.08);
}
.lb-close{position:absolute;right:12px;top:12px;background:rgba(0,0,0,0.36);border:none;color:#fff;padding:8px 10px;border-radius:8px;cursor:pointer}
.lb-nav{position:absolute;left:8px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px}
.lb-nav .nav-btn{background:rgba(0,0,0,0.36);border:none;color:#fff;padding:10px;border-radius:10px;cursor:pointer}

/* caption & index */
.lb-meta{position:absolute;left:18px;bottom:18px;color:rgba(255,255,255,0.9);font-weight:700;z-index:80}

/* zoom states */
.lb-image.zoomed{ transform:scale(1.18) }

/* ensure touch-friendly sizes */
@media (max-width:760px){
  .lb-btn{padding:12px 16px}
  .lb-nav .nav-btn{padding:12px}
}

/* Footer styles */
.site-footer{margin-top:14px;padding:14px;border-radius:14px;text-align:left}
.footer-grid{display:grid;grid-template-columns:120px 1fr 1fr;gap:14px;align-items:center}
.footer-logo{width:86px;height:86px;border-radius:14px}
.footer-brand{display:flex;gap:12px;align-items:center}
.brand-meta .brand-name{font-weight:800;color:var(--text);letter-spacing:0.6px}
.brand-meta .brand-tag{font-size:13px;color:rgba(255,255,255,0.72)}
.footer-contacts{font-size:13px;color:rgba(255,255,255,0.86)}
.footer-links{display:flex;flex-direction:column;gap:6px}
.f-link{color:hsla(var(--led-color),90%,60%,0.94);text-decoration:none;font-weight:700}
.footer-bottom{margin-top:12px;font-size:12px;color:rgba(255,255,255,0.6);text-align:center}

/* ensure logo scales on larger screens */
@media (min-width:900px){
  .led-frame{width:180px;height:180px}
  .footer-logo{width:110px;height:110px}
}

/* Theme selector buttons */
.theme-bar .theme-btn{
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  min-width:96px;
  font-size:13px;
}
.theme-bar .theme-btn[aria-pressed="true"]{
  box-shadow:0 6px 20px rgba(0,0,0,0.45);
  transform:translateY(-2px);
}

/* Theme presets: apply by setting data-theme on <body> or <html> */
body[data-theme="default"]{ --bg-1:#2f1b12; --bg-2:#120a08; --led-color:195; --led-blue:#00b3ff; --led-orange:#ff8a00; }
body[data-theme="capuccino"]{ --bg-1:#3b2a20; --bg-2:#24160f; --led-color:28; --led-blue:#ffb36b; --led-orange:#ff7b2d; }
body[data-theme="americano"]{ --bg-1:#221611; --bg-2:#0f0a08; --led-color:40; --led-blue:#ffd27a; --led-orange:#ff9b3b; }
body[data-theme="mocha"]{ --bg-1:#2a1f1a; --bg-2:#15100d; --led-color:12; --led-blue:#a86b2f; --led-orange:#ff944d; }
body[data-theme="latte"]{ --bg-1:#efe6dd; --bg-2:#e6dacd; --glass-bg:rgba(0,0,0,0.02); --led-color:28; --led-blue:#ffb36b; --text:#201712; --muted:rgba(32,23,18,0.78); }
body[data-theme="espresso"]{ --bg-1:#1a0f0c; --bg-2:#0b0605; --led-color:8; --led-blue:#ff6b18; --led-orange:#ff4b00; --text:#fff; }
body[data-theme="caramel"]{ --bg-1:#3a2416; --bg-2:#1b120c; --led-color:30; --led-blue:#ffd27a; --led-orange:#ffb347; }
body[data-theme="nitro"]{ --bg-1:#0e1114; --bg-2:#07080a; --led-color:200; --led-blue:#48e1ff; --led-orange:#77ffd8; --muted:rgba(255,255,255,0.82); }

/* ensure transitions are smooth when switching themes */
:root, body{
  transition: background 420ms ease, color 420ms ease;
}

/* Music player styles (modern, semi-transparent, theme-aware) */
.music-card{ padding:14px; }
.music-panel{ display:flex; gap:14px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.mp-left{ min-width:220px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.mp-art{ width:160px; height:160px; border-radius:14px; background:linear-gradient(180deg,hsla(var(--led-color),90%,60%,0.12),rgba(0,0,0,0.12)); box-shadow:0 12px 36px rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.04); position:relative; overflow:hidden; }

/* animated audio pulse that becomes visible only while a track is playing */
.mp-art .pulse {
  position: absolute;
  inset: 8px;
  border-radius: 10px;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255,255,255,0.06), transparent 40%);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 220ms ease, transform 420ms ease;
  box-shadow: 0 0 18px rgba(0,179,255,0.12);
}
.mp-art.playing .pulse {
  opacity: 1;
  transform: scale(1.04);
  animation: audioPulse 900ms ease-in-out infinite;
}
@keyframes audioPulse {
  0% { transform: scale(1); filter: blur(0px); opacity: 0.9; }
  50% { transform: scale(1.08); filter: blur(4px); opacity: 0.6; }
  100% { transform: scale(1); filter: blur(0px); opacity: 0.9; }
}
.mp-controls{ display:flex; gap:8px; flex-wrap:wrap; }
.mp-btn{ padding:8px 10px; border-radius:10px; border:none; cursor:pointer; font-weight:700; background:transparent; color:var(--text); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12); transition:transform .18s ease, box-shadow .18s ease; }
.mp-btn[aria-pressed="true"]{ background:linear-gradient(90deg, hsla(var(--led-color),90%,60%,0.12), rgba(255,255,255,0.02)); box-shadow:0 8px 26px rgba(0,0,0,0.35); }
.mp-btn:active{ transform:translateY(1px) scale(.99); }

.mp-track-info{ font-size:14px; color:var(--muted); font-weight:700; }

.mp-right{ flex:1 1 360px; min-width:220px; }
.track-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.track-list li{ padding:10px 12px; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); cursor:pointer; color:var(--text); display:flex; align-items:center; justify-content:space-between; border:1px solid rgba(255,255,255,0.03); }
.track-list li:focus, .track-list li:hover{ outline:none; transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,0.6); }
.track-list li.playing{ background:linear-gradient(90deg, hsla(var(--led-color),80%,55%,0.12), rgba(255,255,255,0.02)); box-shadow:var(--led-glow); color:var(--text); font-weight:800; }

/* responsive */
@media (max-width:720px){
  .music-panel{ flex-direction:column; align-items:center; }
  .mp-art{ width:120px; height:120px; }
  .mp-right{ width:100%; }
}