/* ============================================================
   THE ADDRESS JB — Agent Landing Page
   styles.css — Production v1.0
   ============================================================ */

/* --- Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: #f8fafc; color: #1e293b; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6 { font-family: 'Playfair Display', serif; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }

/* --- CSS Variables --- */
:root {
  --primary: #0f172a;
  --accent: #c2a66b;
  --accent-dark: #a8895a;
  --secondary: #475569;
  --light: #f8fafc;
  --border: #e2e8f0;
  --white: #ffffff;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 4px 24px rgba(15,23,42,0.08);
  --shadow-lg: 0 12px 48px rgba(15,23,42,0.14);
  --transition: all 0.3s ease;
}

/* --- Gold Stat Bar --- */
.stat-bar { background: linear-gradient(90deg, #c2a66b 0%, #d9be88 50%, #c2a66b 100%); }

/* --- Gold Divider --- */
.gold-divider { width: 56px; height: 3px; background: var(--accent); border-radius: 2px; margin: 0 auto; }

/* --- Nav --- */
#main-nav { transition: box-shadow 0.3s ease; }
#main-nav.nav-scrolled { box-shadow: 0 4px 24px rgba(15,23,42,0.10); }

/* --- Hero trust badges --- */
.trust-badge { border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(6px); }

/* --- Cards --- */
.card-hover { transition: var(--transition); }
.card-hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

/* --- Facility cards --- */
.facility-card { transition: var(--transition); }
.facility-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(194,166,107,0.2); }

/* --- Dev cards --- */
.dev-card { transition: var(--transition); }
.dev-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* --- FAQ Accordion --- */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-answer.open { max-height: 500px; }
.faq-icon { transition: transform 0.3s ease; display: inline-block; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* --- Project interest cards --- */
.project-card { transition: var(--transition); cursor: pointer; }
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.project-card.selected { border-color: var(--accent) !important; background: #fffbf5; }

/* --- Sticky mobile CTA --- */
#sticky-cta { transform: translateY(100%); transition: transform 0.4s ease; }
#sticky-cta.visible { transform: translateY(0); }

/* --- Form inputs --- */
.form-input {
  display: block; width: 100%;
  border: none; border-bottom: 1px solid #cbd5e1;
  padding: 8px 0; background: transparent;
  font-size: 0.95rem; color: #1e293b;
  transition: border-color 0.2s ease;
  outline: none;
}
.form-input:focus { border-color: var(--accent); }
.form-select {
  display: block; width: 100%;
  border: none; border-bottom: 1px solid #cbd5e1;
  padding: 8px 0; background: transparent;
  font-size: 0.95rem; color: #1e293b;
  cursor: pointer; outline: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease;
}
.form-select:focus { border-color: var(--accent); }

/* --- Buttons --- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 32px; font-size: 1rem; font-weight: 600;
  border-radius: 8px; border: none; cursor: pointer;
  background: var(--accent); color: var(--primary);
  transition: var(--transition);
}
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(194,166,107,0.35); }

.btn-outline-white {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 32px; font-size: 1rem; font-weight: 600;
  border-radius: 8px; border: 1.5px solid rgba(255,255,255,0.4);
  cursor: pointer; background: transparent; color: white;
  transition: var(--transition);
}
.btn-outline-white:hover { border-color: var(--accent); color: var(--accent); }

.btn-dark {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 28px; font-size: 0.95rem; font-weight: 600;
  border-radius: 8px; border: none; cursor: pointer;
  background: var(--primary); color: white;
  transition: var(--transition);
}
.btn-dark:hover { background: #1e293b; }

/* --- Section label --- */
.section-label {
  display: block; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 8px;
}

/* --- WhatsApp float --- */
#whatsapp-btn { transition: transform 0.3s ease; }
#whatsapp-btn:hover { transform: scale(1.1); }
.wa-tooltip {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: white; color: var(--primary); font-size: 0.8rem; font-weight: 600;
  padding: 6px 14px; border-radius: 8px; box-shadow: var(--shadow);
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
#whatsapp-btn:hover .wa-tooltip { opacity: 1; }

/* --- Utility --- */
.text-accent { color: var(--accent); }
.bg-primary-dark { background: var(--primary); }

/* --- Amenity list items --- */
.amenity-item::before { content: "✓"; color: var(--accent); font-weight: 700; margin-right: 8px; }

/* --- Animations --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in      { animation: fadeInUp 0.7s ease both; }
.fade-delay-1 { animation: fadeInUp 0.7s ease 0.15s both; }
.fade-delay-2 { animation: fadeInUp 0.7s ease 0.30s both; }
.fade-delay-3 { animation: fadeInUp 0.7s ease 0.45s both; }

/* --- Responsive helpers --- */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .stat-bar .grid { gap: 12px; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}