:root {
  --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.12);
}

/* Mesh background for body */
.bg-sand-mesh {
  background:
    radial-gradient(circle at 10% 0%, rgba(59, 130, 246, 0.18), transparent 55%),
    radial-gradient(circle at 90% 10%, rgba(249, 115, 22, 0.18), transparent 55%),
    radial-gradient(circle at 0% 80%, rgba(244, 224, 190, 0.9), transparent 60%),
    radial-gradient(circle at 100% 80%, rgba(187, 247, 208, 0.5), transparent 60%),
    #fdf9f2;
}

/* Hero background mesh - enhanced */
.bg-hero-mesh {
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.35), transparent 60%),
    radial-gradient(circle at 100% 0%, rgba(251, 146, 60, 0.38), transparent 60%),
    radial-gradient(circle at 20% 100%, rgba(52, 211, 153, 0.4), transparent 60%),
    radial-gradient(circle at 80% 100%, rgba(168, 85, 247, 0.15), transparent 50%),
    linear-gradient(135deg, #fdf9f2 0%, #e0f2f1 50%, #fef3c7 100%);
}

/* Navigation pills */
.nav-pill {
  @apply px-3 py-1 rounded-full border border-transparent text-slate-600 bg-transparent transition-colors duration-150;
  font-weight: 500;
}

.nav-pill:hover {
  @apply bg-slate-900/5 text-slate-900;
}

.nav-pill.active {
  @apply bg-coastal-600 text-white border-coastal-600 shadow-sm;
}

/* Hamburger */
.hamb-line {
  width: 16px;
  height: 1.8px;
  border-radius: 999px;
  background-color: #1f2933;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Mobile nav open state (toggled via JS) */
#mobile-nav.open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* Glass card - enhanced */
.glass-card {
  border-radius: 1.5rem;
  background: radial-gradient(circle at 0% 0%, rgba(248, 250, 252, 0.25), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(16, 185, 129, 0.15), transparent 50%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(226, 232, 240, 0.35);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  padding: 1.25rem;
  backdrop-filter: blur(12px);
}

/* Buttons */
.btn-primary {
  @apply inline-flex items-center gap-2 rounded-full bg-coastal-600 text-white px-4 py-2 text-xs sm:text-sm font-medium shadow-md shadow-emerald-900/30 border border-coastal-700 transition-transform duration-150;
}

.btn-primary:hover {
  transform: translateY(-1px);
}

.btn-ghost {
  @apply inline-flex items-center gap-2 rounded-full bg-white/80 text-slate-800 px-3 py-2 text-xs sm:text-sm font-medium border border-sand-200 shadow-sm transition-colors;
}

.btn-ghost:hover {
  @apply bg-white text-slate-900;
}

/* Section text helpers */
.section-title {
  @apply text-lg sm:text-xl font-semibold tracking-[0.18em] uppercase text-slate-800;
}

.section-subtitle {
  @apply text-sm text-slate-600 max-w-xl;
}

.section-body {
  @apply text-sm text-slate-700 leading-relaxed;
}

/* Cards & specs */
.shadow-soft {
  box-shadow: var(--shadow-soft);
}

.spec-card {
  @apply rounded-3xl bg-white/90 border border-sand-200 shadow-soft p-4;
}

.spec-icon {
  @apply inline-flex items-center justify-center w-10 h-10 rounded-2xl bg-emerald-50 text-coastal-600 mb-2;
}

.spec-title {
  @apply text-sm font-semibold text-slate-800;
}

.spec-body {
  @apply text-xs text-slate-600 mt-1;
}

.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  font-size: 1.1rem;
}

/* Homes */
.home-card {
  @apply rounded-3xl bg-white/95 border border-sand-200 shadow-soft overflow-hidden cursor-pointer transition-transform duration-200;
}

.home-card:hover {
  transform: translateY(-2px) scale(1.01);
}

.home-image {
  @apply h-40 bg-slate-200 overflow-hidden;
}

.home-image img {
  transition: transform 0.4s ease;
}

.home-card:hover .home-image img {
  transform: scale(1.05);
}

.home-title {
  @apply text-sm font-semibold text-slate-800;
}

.home-body {
  @apply text-xs text-slate-600 mt-1;
}

.home-list {
  @apply mt-3 text-xs text-slate-600 list-disc pl-4 space-y-1;
}

.home-meta {
  @apply mt-3 text-[0.7rem] text-slate-500;
}

/* Tag */
.tag-pill {
  @apply inline-flex items-center rounded-full border border-sand-200 bg-white/80 px-3 py-1;
}

/* Amenities masonry */
.amenity-item {
  break-inside: avoid;
  border-radius: 1.2rem;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  font-size: 0.72rem;
  color: #4b5563;
}

.amenity-item img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.amenity-item:hover img {
  transform: scale(1.05);
}

.amenity-item figcaption {
  padding: 0.5rem 0.65rem 0.6rem;
}

/* Reveal animations */
.reveal-section {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease-out, transform 0.6s ease-out;
}

.reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Parallax */
[data-parallax-layer] {
  will-change: transform;
}

/* Utility */
#mobile-nav {
  transform: scale(0.95);
}

/* Footer year */
#year {
  font-variant-numeric: tabular-nums;
}

/* Image lightbox */
.image-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(6px);
}

.image-lightbox-inner {
  max-width: 100%;
  max-height: 100%;
}

.image-lightbox-inner img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 1rem;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.65);
}