:root{
  --bg:#0e0c13;
  --card:#16131d;
  --ink:#f7f5ff;
  --muted:#b6b0c7;
  --accent:#ff69b4;
  --gold:#f7c04a;
  --emerald:#28d09a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% 10%, #1a1430 0%, transparent 60%),
    radial-gradient(1000px 500px at 90% 10%, #0c2a37 0%, transparent 55%),
    radial-gradient(800px 400px at 50% 100%, #26113d 0%, transparent 60%),
    var(--bg);
  overflow-x:hidden;
}
a{color:inherit}
/* HERO */
.hero{
  position:relative;
  padding: clamp(48px,8vw,96px) 24px 24px;
  text-align:center;
  perspective:1200px;
}
.hero-inner{
  max-width:1100px;margin:0 auto;
}
.hero h1{
  margin:0;
  font-weight:900;
  font-size: clamp(36px,8vw,72px);
  letter-spacing:0.02em;
  text-transform:uppercase;
  line-height:1.05;
}
.hero .brand{background: linear-gradient(90deg, var(--gold), var(--emerald)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero .thin{font-weight:300;margin:0 8px;opacity:.9}
.tag{margin:8px auto 18px; color:var(--muted); font-weight:600; letter-spacing:.06em}
.badge{
  display:inline-block;margin-top:10px; padding:8px 12px;border:1px solid #ffffff22;border-radius:999px;
  background:linear-gradient(180deg,#ffffff12,#00000022);
  font-size:14px;color:#e7e1ff;
  box-shadow:0 0 30px #ffffff09 inset, 0 10px 40px #0000005a;
}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.btn{
  padding:12px 18px;border-radius:12px;border:1px solid #ffffff22;text-decoration:none;
  background:linear-gradient(180deg,#ffffff14,#00000026);
  font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:14px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:0 8px 24px #0000006a;
}
.btn:hover{transform:translateY(-2px);border-color:#ffffff55}
.btn.book{background:linear-gradient(90deg,var(--emerald),#6bf7c8); color:#02140d}
.btn.call{background:linear-gradient(90deg,#ff6fb1,#ffd1e6); color:#2a071d}

/* Decorative glow */
.glow, .sparkle{position:absolute; inset:0; pointer-events:none}
.glow{background: radial-gradient(600px 300px at 50% 0%, #ffffff0f, transparent 60%); filter: blur(30px)}
.sparkle{background-image: radial-gradient(#ffffff40 1px, transparent 1px);
  background-size: 70px 70px; opacity:.08; mix-blend-mode: screen;}

/* BOARD */
.board{padding: 24px 20px 12px;}
.board-inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap:22px;
  transform-style:preserve-3d; perspective:1400px;
}
.card{
  position:relative; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,#ffffff10,#00000030);
  border:1px solid #ffffff1a;
  transform: translateZ(0px) rotateX(0deg) rotateY(0deg);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  animation: float 8s ease-in-out infinite;
  box-shadow: 0 10px 40px #00000080;
}
.card:nth-child(odd){animation-duration: 9.5s}
.card:nth-child(3n){animation-duration: 7.8s}
@keyframes float{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-10px) }
}
.card img{width:100%;height:330px;object-fit:cover; display:block; filter:contrast(1.05) saturate(1.05)}
.card figcaption{
  position:absolute; left:12px; bottom:12px; padding:6px 10px; border-radius:999px;
  background:linear-gradient(180deg,#00000090,#00000040); border:1px solid #ffffff3a; color:#fff; font-weight:700; letter-spacing:.04em; font-size:12px;
  backdrop-filter: blur(6px);
}
.hint{color:var(--muted); text-align:center; margin:10px auto 6px; font-size:13px}

/* Social chips */
.social-proof{display:flex;justify-content:center;padding:4px 12px 24px}
.chips{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.chip{border:1px solid #ffffff22; border-radius:999px; padding:10px 14px; font-weight:700; text-decoration:none; background:#ffffff10}
.chip:hover{border-color:#ffffff66}

/* Contact */
.contact{max-width:900px;margin:10px auto 60px;padding:0 16px}
.contact h2{margin:8px 0 8px; font-size:28px}
.contact-list{list-style:none; padding:0; margin:0 0 12px; color:var(--muted)}
.contact-list a{color:#fff; text-decoration:underline; text-underline-offset:2px}
.quick-form{display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.quick-form label{display:flex; flex-direction:column; gap:6px; font-size:14px; color:#d9d3f2}
.quick-form input, .quick-form select{
  padding:12px 12px; background:#0f0d16; border:1px solid #ffffff22; color:#fff; border-radius:12px;
}
.quick-form button{grid-column: 1/-1}
.mini{font-size:12px; color:var(--emerald); min-height:1.2em}

.footer{padding:30px 16px; text-align:center; color:#9e97b4; border-top:1px solid #ffffff1a}

/* Small screens */
@media (max-width:480px){
  .card img{height:260px}
}