/* Christmas Lights — Warm, cozy, professional styling */
:root{
  --brand:#e63946;
  --gold:#f1c40f;
  --green:#2ecc71;
  --deep:#0b132b;
  --cream:#fff8f0;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;scroll-behavior:smooth;background:#0b132b;color:#fff}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(1200px,92%);margin:auto}

header.hero{
  position:relative; min-height: 82vh; display:flex; align-items:center; overflow:hidden;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.08), transparent),
              url('../images/1.jpg') center/cover no-repeat;
}
.hero::after{/* warm gradient overlay */
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.72) 60%, rgba(11,19,43,1) 100%);
}
.hero-inner{position:relative; z-index:2; padding: 4rem 0}
.brand{
  display:inline-flex; align-items:center; gap:.75rem; padding:.6rem 1rem; border:1px solid rgba(255,255,255,.2);
  border-radius:999px; background:rgba(255,255,255,.08); backdrop-filter: blur(6px);
  box-shadow: 0 0 20px rgba(255,255,255,.05), inset 0 0 24px rgba(255,255,255,.06);
}
.brand .dot{width:10px;height:10px;border-radius:999px;background:var(--gold);box-shadow:0 0 14px var(--gold),0 0 30px var(--gold)}
h1.title{font-size: clamp(2.4rem, 6vw, 4.5rem); margin:.5rem 0 .25rem 0; line-height:1.02}
.subtitle{font-size: clamp(1.05rem, 2.3vw, 1.35rem); opacity:.92; max-width: 800px}

.btns{margin-top:1.7rem; display:flex; gap:1rem; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.1rem; border-radius:16px; font-weight:700;
  background: linear-gradient(135deg, #ff5f6d, #ffc371); color:#101010; border:none; cursor:pointer;
  box-shadow: 0 12px 30px rgba(255, 195, 113, .35);
}
.btn.secondary{
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.2);
  box-shadow:none
}
section{padding: 72px 0}
.section-title{font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin: 0 0 1rem 0}
.section-sub{opacity:.9; margin-top:.25rem}

.grid{
  display:grid; gap:20px;
}
.grid.cols-3{grid-template-columns: repeat(3, minmax(0,1fr));}
@media (max-width: 980px){
  .grid.cols-3{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 640px){
  .grid.cols-3{grid-template-columns: repeat(1, minmax(0,1fr));}
}

.card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .35s ease, box-shadow .35s ease;
}
.card:hover{ transform: translateY(-6px); box-shadow:0 18px 44px rgba(0,0,0,.35) }

.gallery{
  columns: 1;
  column-gap: 16px;
}
@media (min-width: 700px){ .gallery{ columns:2 } }
@media (min-width: 1000px){ .gallery{ columns:3 } }
.gallery a{ display:block; margin:0 0 16px 0; border-radius:16px; overflow:hidden; position:relative }
.gallery img{ width:100%; display:block; transition: transform .6s ease, filter .6s ease }
.gallery a:hover img{ transform: scale(1.05); filter: brightness(1.05) }

/* Lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:1000 }
.lightbox img{ max-width:90vw; max-height:85vh; border-radius:12px }
.lightbox.show{ display:flex }
.lightbox .close{ position:absolute; top:24px; right:28px; font-size:28px; cursor:pointer }

/* Twinkle lights at top */
.twinkles{ position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(3px 3px at 15% 10%, var(--gold), transparent),
 radial-gradient(2px 2px at 40% 22%, #fff, transparent),
 radial-gradient(3px 3px at 70% 5%, var(--gold), transparent),
 radial-gradient(2px 2px at 86% 18%, #fff, transparent);
 background-repeat:no-repeat; opacity:.7; animation: twinkle 3.5s infinite ease-in-out }
@keyframes twinkle{ 0%,100%{opacity:.4} 50%{opacity:1} }

/* Snowfall */
.snow{ position: fixed; top: -10vh; left: 0; width: 100%; height: 110vh; pointer-events:none; background-image:
 radial-gradient(2px 2px at 10% 20%, #fff, transparent),
 radial-gradient(3px 3px at 30% 10%, #fff, transparent),
 radial-gradient(2px 2px at 50% 30%, #fff, transparent),
 radial-gradient(3px 3px at 70% 40%, #fff, transparent),
 radial-gradient(2px 2px at 90% 15%, #fff, transparent);
 background-size: 100% 100%;
 animation: snow 12s linear infinite }
@keyframes snow{ 0%{ transform: translateY(0) } 100%{ transform: translateY(100vh) } }

/* Footer */
footer{ padding:36px 0; border-top:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04) }

/* Reveal animation */
.reveal{ opacity:0; transform: translateY(14px); transition: all .7s ease }
.reveal.visible{ opacity:1; transform: translateY(0) }

.badge{ display:inline-block; padding:.35rem .7rem; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); font-size:.9rem }
.phone{ font-weight:800; color:#fff; letter-spacing:.3px }
.map-wrap{ border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.12) }


/* Light mode (auto) */
@media (prefers-color-scheme: light){
  html,body{ background:#fff8f0; color:#101010 }
  header.hero::after{ background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.65) 55%, rgba(255,248,240,1) 100%) }
  .brand{ background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1) }
  .card{ background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); color:#101010 }
  a{ color:#b8860b }
  .section-sub{ opacity:.8 }
  .lightbox{ background: rgba(0,0,0,.9) }
  .badge{ background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12) }
}

/* WhatsApp Floating Button */
.whatsapp-fab{
  position: fixed; right: 18px; bottom: 18px; z-index: 1200;
  width: 58px; height: 58px; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background: #25D366; box-shadow: 0 10px 25px rgba(37,211,102,.45);
  border: 2px solid rgba(255,255,255,.7); animation: fabglow 2.6s ease-in-out infinite;
}
.whatsapp-fab img{ width:28px; height:28px }
@keyframes fabglow{ 0%,100%{ box-shadow: 0 10px 25px rgba(37,211,102,.45)} 50%{ box-shadow: 0 10px 45px rgba(37,211,102,.75)} }

/* Language Switcher */
.lang-toggle{
  position: fixed; top: 14px; right: 14px; z-index: 1200;
  display:flex; gap:8px; background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.18);
  padding:6px; border-radius: 12px; backdrop-filter: blur(8px);
}
@media (prefers-color-scheme: light){
  .lang-toggle{ background: rgba(255,255,255,.6); border-color: rgba(0,0,0,.12) }
}
.lang-toggle button{
  border:none; background:transparent; color:#fff; font-weight:700; padding:.35rem .6rem; border-radius:10px; cursor:pointer
}
@media (prefers-color-scheme: light){ .lang-toggle button{ color:#333 } }
.lang-toggle button.active{ background: rgba(255,255,255,.16) }