/* ================= HOME PAGE ================= */

/* ---- Hero ---- */
.hero {
    position: relative;
    background: linear-gradient(100deg, rgba(10,31,68,0.92) 0%, rgba(10,31,68,0.55) 45%, rgba(10,31,68,0.05) 70%), var(--hero-fallback, #0a1f44);
    color: var(--white);
    min-height: 560px;
    display: flex;
    align-items: center;
}
.hero-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: -1;
}
.hero-inner { max-width: 620px; padding: 70px 0; }
.hero-badge { display: inline-block; background: var(--blue); color: var(--white); font-size: 13px; font-weight: 700; letter-spacing: 0.5px; padding: 7px 16px; border-radius: 4px; margin-bottom: 22px; }
.hero-title { font-size: 46px; font-weight: 900; line-height: 1.15; margin-bottom: 20px; }
.hero-title .accent { color: #4d8dff; }
.hero-text { font-size: 16px; color: #d8e1f2; margin-bottom: 30px; max-width: 480px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- Featured pools ---- */
.pools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pool-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.2s ease; }
.pool-card:hover { transform: translateY(-4px); }
.pool-card-img { height: 210px; overflow: hidden; }
.pool-card-img img { width: 100%; height: 100%; object-fit: cover; }
.pool-card-body { padding: 20px; }
.pool-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.pool-dims { font-weight: 700; font-size: 16px; color: var(--navy); }
.pool-price { color: var(--blue); font-weight: 800; font-size: 18px; white-space: nowrap; }
.pool-tagline { color: var(--text-gray); font-size: 14px; margin-bottom: 16px; }
.pool-card-body .btn { width: 100%; justify-content: center; background: var(--blue-light); color: var(--blue); border: 1px solid var(--blue-light); font-size: 14px; padding: 10px; }
.pool-card-body .btn:hover { background: var(--blue); color: var(--white); }

/* ---- Features strip ---- */
.features-strip { background: var(--bg-light); padding: 44px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.feature-item { display: flex; gap: 14px; align-items: flex-start; }
.feature-icon { width: 46px; height: 46px; border-radius: 10px; background: var(--blue-light); color: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feature-item h4 { font-size: 15.5px; color: var(--navy); margin-bottom: 4px; }
.feature-item p { font-size: 13.5px; color: var(--text-gray); }

/* ---- About ---- */
.about-section { padding: 70px 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-img { border-radius: var(--radius); overflow: hidden; height: 380px; box-shadow: var(--shadow); }
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.about-text p { color: var(--text-gray); margin: 16px 0 30px; font-size: 15.5px; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat-item { text-align: center; }
.stat-icon { color: var(--blue); margin-bottom: 8px; display: flex; justify-content: center; }
.stat-num { font-size: 24px; font-weight: 800; color: var(--navy); }
.stat-label { font-size: 12.5px; color: var(--text-gray); }

/* ---- CTA banner ---- */
.cta-banner { background: linear-gradient(120deg, var(--navy), var(--blue-dark)); color: var(--white); text-align: center; padding: 60px 0; }
.cta-banner h2 { font-size: 30px; font-weight: 800; margin-bottom: 14px; }
.cta-banner p { color: #cdd8ee; margin-bottom: 28px; }

@media (max-width: 960px) {
    .pools-grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .about-grid { grid-template-columns: 1fr; }
    .hero-title { font-size: 34px; }
}
@media (max-width: 600px) {
    .pools-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .about-stats { grid-template-columns: 1fr; }
    .hero-inner { padding: 44px 0; }
    .hero-title { font-size: 28px; }
}