/* index.css — Homepage */

/* ── HERO ── */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; }
.hero-bg {
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(13,27,42,.88) 40%, rgba(0,191,165,.25) 100%),
    url('images/pool fog2.jpg') center/cover no-repeat;
}
.mist-layer {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 40% at 70% 60%, rgba(79,195,247,.12) 0%, transparent 70%);
  animation:mistDrift 8s ease-in-out infinite alternate;
}
@keyframes mistDrift {
  from { transform:translateX(-20px) scale(1); opacity:.6; }
  to   { transform:translateX(20px)  scale(1.05); opacity:1; }
}
.hero-content { position:relative; padding:0 5vw; max-width:700px; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(79,195,247,.15); border:1px solid rgba(79,195,247,.4);
  color:var(--mist); font-size:.75rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; padding:6px 14px; border-radius:100px; margin-bottom:1.5rem;
}
.hero-eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--mist); }
.hero h1 { font-family:'Playfair Display',serif; font-size:clamp(2.5rem,6vw,4.5rem); color:var(--white); line-height:1.1; margin-bottom:1.25rem; }
.hero h1 em { font-style:normal; color:var(--mist); }
.hero p { font-size:1.125rem; color:rgba(255,255,255,.75); max-width:520px; margin-bottom:2.25rem; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

.hero-stat-bar {
  position:absolute; bottom:0; left:0; right:0;
  background:rgba(13,27,42,.85); backdrop-filter:blur(10px);
  border-top:1px solid rgba(79,195,247,.15);
  display:flex; justify-content:center;
}
.hero-stat { flex:1; max-width:220px; padding:1.25rem 1.5rem; text-align:center; border-right:1px solid rgba(79,195,247,.1); }
.hero-stat:last-child { border-right:none; }
.hero-stat strong { display:block; font-family:'Playfair Display',serif; font-size:2rem; color:var(--mist); line-height:1; margin-bottom:4px; }
.hero-stat span { font-size:.75rem; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.08em; }

/* ── SECTIONS ── */
section { padding:6rem 5vw; }

/* ── WHY US ── */
.why { background:var(--light); }
.why-inner { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; max-width:1200px; margin:0 auto; }
.why-visual { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3; }
.why-visual img { width:100%; height:100%; object-fit:cover; display:block; }
.why-badge { position:absolute; bottom:20px; left:20px; background:var(--navy); color:var(--white); padding:.75rem 1.25rem; border-radius:10px; display:flex; align-items:center; gap:10px; }
.why-badge-icon { font-size:1.5rem; }
.why-badge-text strong { display:block; font-size:1.1rem; color:var(--mist); }
.why-badge-text span  { font-size:.75rem; opacity:.7; }
.why-points { display:flex; flex-direction:column; gap:1.5rem; margin-top:2rem; }
.why-point { display:flex; gap:1rem; align-items:flex-start; }
.why-point-icon { flex-shrink:0; width:44px; height:44px; border-radius:10px; background:rgba(0,191,165,.1); display:flex; align-items:center; justify-content:center; font-size:1.25rem; }
.why-point-body h4 { font-size:.9375rem; font-weight:600; margin-bottom:3px; }
.why-point-body p  { font-size:.875rem; color:var(--gray); }

/* ── SERVICES PREVIEW ── */
.services-preview { background:var(--white); }
.services-preview-inner { max-width:1200px; margin:0 auto; }
.services-preview-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:3rem; flex-wrap:wrap; gap:1rem; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.service-card { border:1px solid #e2e8f0; border-radius:14px; overflow:hidden; transition:box-shadow .2s,transform .2s; }
.service-card:hover { box-shadow:0 12px 40px rgba(13,27,42,.12); transform:translateY(-3px); }
.service-card-img { height:180px; overflow:hidden; }
.service-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.service-card:hover .service-card-img img { transform:scale(1.05); }
.service-card-body { padding:1.25rem 1.5rem; }
.service-card-icon { font-size:1.5rem; margin-bottom:.5rem; }
.service-card-body h3 { font-size:1rem; font-weight:700; margin-bottom:.375rem; }
.service-card-body p { font-size:.8125rem; color:var(--gray); line-height:1.55; }

/* ── COMMUNITIES STRIP ── */
.communities { background:var(--navy); color:var(--white); }
.communities-inner { max-width:1200px; margin:0 auto; }
.communities .section-title { color:var(--white); }
.communities .section-sub   { color:rgba(255,255,255,.6); }
.communities-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.community-card { border:1px solid rgba(79,195,247,.2); border-radius:12px; padding:1.75rem; background:rgba(79,195,247,.05); transition:background .2s,border-color .2s; }
.community-card:hover { background:rgba(79,195,247,.1); border-color:rgba(79,195,247,.4); }
.community-card-icon { font-size:2rem; margin-bottom:1rem; }
.community-card h3 { font-size:1.125rem; font-weight:700; margin-bottom:.375rem; color:var(--mist); }
.community-card p { font-size:.875rem; color:rgba(255,255,255,.6); }

/* ── TESTIMONIAL ── */
.trust { background:var(--smoke); }
.trust-inner { max-width:900px; margin:0 auto; text-align:center; }
blockquote { font-family:'Playfair Display',serif; font-size:clamp(1.25rem,3vw,1.75rem); color:var(--navy); line-height:1.5; margin:2rem 0 1rem; }
blockquote::before { content:'\201C'; color:var(--teal); }
blockquote::after  { content:'\201D'; color:var(--teal); }
.trust-author { font-size:.875rem; color:var(--gray); font-weight:600; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .why-inner        { grid-template-columns:1fr; }
  .why-visual       { aspect-ratio:16/9; }
  .services-grid    { grid-template-columns:1fr 1fr; }
  .communities-grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .services-grid { grid-template-columns:1fr; }
  .hero-stat-bar { display:none; }
}