/* ===== PAL HOTELS – Base ===== */
:root{
  --bg:#f7f8fb; --card:#ffffff; --ink:#111827; --muted:#6b7280; --brand:#1f6feb;
  --brand-2:#0ea5e9; --ghost:#e5e7eb; --line:#eef1f6; --ok:#16a34a; --wa:#25D366;
  --shadow:0 12px 28px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--ink); background:var(--bg);
}

.logo-img {
  height: 40px;   
  width: auto;
  margin-right: 10px;
}

/* ===== Utilities ===== */
.container{ width:min(1160px, 92%); margin-inline:auto; }
.muted{ color:var(--muted); }
.center{ text-align:center; }
.ghost-btn{ display:inline-block; padding:.7rem 1rem; border:1px solid var(--ghost); border-radius:12px; text-decoration:none; color:var(--ink); }
.reveal{ opacity:0; transform:translateY(14px); transition: all .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(180%) blur(8px);
  background-color:rgba(255,255,255,.8); border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; padding:14px 0;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.5px; }
.logo-circle{ width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; display:grid; place-items:center; font-weight:800; }
.logo-text{ font-size:1.05rem; }
.header-right{ display:flex; align-items:center; gap:12px; }
.header-right .phone{ color:var(--ink); text-decoration:none; padding:8px 10px; border-radius:10px; border:1px solid var(--line); display:flex; align-items:center; gap:8px; }
.header-right .phone i{ color:var(--ok); }
.header-right .cta{
  text-decoration:none; padding:10px 14px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border-radius:12px; font-weight:600; box-shadow:var(--shadow);
}

/* ===== Hero ===== */
.hero{ padding:54px 0 22px; background:
  radial-gradient(1200px 1200px at 100% -30%, rgba(31,111,235,.08), transparent 70%),
  radial-gradient(1000px 1000px at -10% -40%, rgba(14,165,233,.10), transparent 60%);
}
.hero h1{ margin:0 0 6px; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.hero .subtitle{ margin:0 0 14px; color:var(--muted); font-size:1.05rem; }
.address{
  display:inline-flex; align-items:center; gap:8px; padding:10px 12px; background:#fff;
  border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink);
}
.address i{ color:var(--brand); }

/* ===== Gallery ===== */
.gallery-section{ padding:30px 0 10px; }
.section-head h2{ margin:0 0 6px; }
.gallery-grid{
  display:grid; gap:10px;
  grid-template-columns: repeat(12, 1fr);
}
.gallery-grid figure{
  margin:0; position:relative; overflow:hidden; border-radius:14px; background:#fff;
  border:1px solid var(--line); box-shadow:0 6px 16px rgba(0,0,0,.05);
}
.gallery-grid img{
  width:100%; height:100%; object-fit:cover; display:block; transition:.5s transform ease, .35s filter ease;
}

/* Masonry-ish layout (like your screenshots) */
.gallery-grid figure:nth-child(1){ grid-column: span 7; height: 360px; }
.gallery-grid figure:nth-child(2){ grid-column: span 5; height: 175px; }
.gallery-grid figure:nth-child(3){ grid-column: span 5; height: 175px; }
.gallery-grid figure:nth-child(4){ grid-column: span 7; height: 180px; }
.gallery-grid figure:nth-child(5){ grid-column: span 5; height: 180px; }
.gallery-grid figure:nth-child(6){ grid-column: span 4; height: 220px; }
.gallery-grid figure:nth-child(7){ grid-column: span 4; height: 220px; }
.gallery-grid figure:nth-child(8){ grid-column: span 4; height: 220px; }

.gallery-grid figure:hover img{ transform:scale(1.04); filter:brightness(.98); }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(10,12,16,.85);
  display:none; align-items:center; justify-content:center; z-index:50;
}
.lightbox.open{ display:flex; }
.lightbox-inner{ position:relative; width:min(96vw,1100px); }
.lightbox img{ width:100%; height:auto; border-radius:14px; box-shadow:0 24px 64px rgba(0,0,0,.35); }
.lb-close, .lb-prev, .lb-next{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25); color:#fff; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; cursor:pointer; backdrop-filter: blur(6px);
}
.lb-close{ top:-20px; right:-20px; transform:none; }
.lb-prev{ left:-56px; }
.lb-next{ right:-56px; }
@media (max-width: 900px){
  .lb-prev{ left:6px; } .lb-next{ right:6px; }
  .lb-close{ right:6px; top:6px; }
}

/* ===== Features ===== */
.features{ padding:34px 0; }
.features-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:16px;
}
.features .card{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px;
  box-shadow:var(--shadow);
}
.features .card i{ font-size:28px; color:var(--brand); }
.features .card h3{ margin:10px 0 6px; font-size:1.1rem; }

.popular{ margin-top:18px; }
.popular h4{ margin:0 0 12px; }
.chip-list{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--line);
  border-radius:999px; background:#fff; font-size:.95rem;
}

/* ===== Coming Soon ===== */
.coming-soon{ padding:40px 0 60px; }
.soon-card{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:stretch;
  background:linear-gradient(135deg,#ffffff, #f4f8ff); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--shadow);
}
.soon-left h2{ margin:0 0 8px; }
.soon-left p{ margin:0 0 12px; color:var(--muted); }
.tick-list{ list-style:none; padding:0; margin:10px 0 0; }
.tick-list li{ display:flex; align-items:center; gap:10px; margin:6px 0; }
.tick-list i{ color:var(--ok); }

.soon-right{ display:flex; align-items:center; justify-content:center; }
.cta-box{
  border:1px dashed var(--ghost); background:#fff; border-radius:16px; padding:18px; text-align:center; width:100%; max-width:360px;
}
.cta-box .mini{ color:var(--muted); font-size:.9rem; }
.wa-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; margin:10px 0 6px;
  text-decoration:none; padding:12px 16px; background:var(--wa); color:#fff; border-radius:12px; font-weight:700; box-shadow:var(--shadow);
}
.cta-box .hint{ color:var(--muted); font-size:.9rem; }

/* Floating WhatsApp */
.floating-wa{
  position:fixed; right:18px; bottom:18px; width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; text-decoration:none; background:var(--wa); color:#fff;
  box-shadow:0 12px 24px rgba(0,0,0,.25); z-index:30;
}
.floating-wa i{ font-size:28px; }

/* ===== Footer ===== */
.site-footer{
  border-top:1px solid var(--line); background:#fff; padding:16px 0; color:var(--muted);
}
.site-footer .container{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.foot-links{ display:flex; align-items:center; gap:10px; }
.foot-links a{ color:inherit; text-decoration:none; }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .features-grid{ grid-template-columns:1fr 1fr; }
  .soon-card{ grid-template-columns:1fr; }
  .gallery-grid figure:nth-child(1){ grid-column: span 12; height: 280px; }
  .gallery-grid figure:nth-child(2),
  .gallery-grid figure:nth-child(3){ grid-column: span 6; height: 180px; }
  .gallery-grid figure:nth-child(4),
  .gallery-grid figure:nth-child(5){ grid-column: span 6; height: 180px; }
  .gallery-grid figure:nth-child(6),
  .gallery-grid figure:nth-child(7),
  .gallery-grid figure:nth-child(8){ grid-column: span 4; height: 180px; }
}
@media (max-width: 640px){
  .header-right .phone{ display:none; }
  .features-grid{ grid-template-columns:1fr; }
}