/* ============================================================
   HOME PAGE ENHANCEMENTS
   Palette: #00a5e3 / #00aae4 (accent), #006ea1 (mid), #0c4768 (deep)
   ============================================================ */

:root {
    --wr-accent: #00a5e3;
    --wr-accent-2: #00aae4;
    --wr-mid: #006ea1;
    --wr-deep: #0c4768;
    --wr-ink: #22323d;
    --wr-muted: #5f7180;
    --wr-soft: #f4f9fc;
}

/* ---------- HERO ---------- */
.homeHero {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: center;
    background: linear-gradient(120deg, rgba(12, 71, 104, 0.86) 0%, rgba(0, 110, 161, 0.62) 55%, rgba(0, 165, 227, 0.35) 100%),
                url("../img/banner/banner-home.png") center/cover no-repeat;
    color: #fff;
    overflow: hidden;
}

.homeHero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 20%, rgba(0, 170, 228, 0.25), transparent 60%);
    pointer-events: none;
}

.homeHero .heroInner {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding: 60px 15px;
}

.homeHero .heroBadge {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    color: #cdeefc;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 7px 16px;
    border-radius: 40px;
    margin-bottom: 22px;
}

.homeHero h1 {
    font-size: 46px;
    line-height: 1.12;
    font-weight: 700;
    margin: 0 0 20px;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.3);
}

.homeHero h1 span {
    color: #7fd7f7;
}

.homeHero p.heroLead {
    font-size: 18px;
    line-height: 1.7;
    color: #eaf6fd;
    max-width: 600px;
    margin: 0 0 30px;
}

.heroActions .btn {
    margin: 6px 12px 6px 0;
}

.btn-wr {
    background: var(--wr-accent);
    border: 2px solid var(--wr-accent);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 12px 30px;
    border-radius: 40px;
    transition: all 0.25s ease;
    box-shadow: 0 8px 22px rgba(0, 165, 227, 0.35);
}

.btn-wr:hover,
.btn-wr:focus {
    background: #fff;
    color: var(--wr-deep);
    border-color: #fff;
    text-decoration: none;
}

.btn-wr-ghost {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 12px 30px;
    border-radius: 40px;
    transition: all 0.25s ease;
}

.btn-wr-ghost:hover,
.btn-wr-ghost:focus {
    background: #fff;
    color: var(--wr-deep);
    border-color: #fff;
    text-decoration: none;
}

/* ---------- SECTION HELPERS ---------- */
.wrSection {
    padding: 70px 0;
}

.wrSection.soft {
    background: var(--wr-soft);
}

.wrHeading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}

.wrHeading .eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 12px;
    font-weight: 700;
    color: var(--wr-accent);
    margin-bottom: 12px;
}

.wrHeading h2 {
    font-size: 34px;
    font-weight: 700;
    color: var(--wr-deep);
    margin: 0 0 16px;
}

.wrHeading p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--wr-muted);
    margin: 0;
}

/* ---------- INTRO / WELCOME ---------- */
.welcomeGrid h3 {
    color: var(--wr-deep);
    font-weight: 600;
    line-height: 1.5;
    font-size: 24px;
}

.welcomeGrid p {
    color: var(--wr-muted);
    line-height: 1.8;
    font-size: 15.5px;
}

.welcomeGrid .accentBar {
    width: 64px;
    height: 5px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--wr-accent), var(--wr-mid));
    margin-bottom: 22px;
}

/* ---------- FEATURE CARDS (3 images) ---------- */
.featureCard {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(12, 71, 104, 0.08);
    margin-bottom: 30px;
    height: calc(100% - 30px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featureCard:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 44px rgba(12, 71, 104, 0.16);
}

.featureCard .featureImg {
    height: 210px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.featureCard .featureImg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(12, 71, 104, 0.45));
}

.featureCard .featureBody {
    padding: 26px 24px 30px;
}

.featureCard .featureBody h4 {
    color: var(--wr-deep);
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 12px;
}

.featureCard .featureBody p {
    color: var(--wr-muted);
    line-height: 1.7;
    font-size: 15px;
    margin: 0;
}

.featureCard .featureBody .cardTag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--wr-accent);
    margin-bottom: 10px;
}

/* ---------- VALUE / STATS BAND ---------- */
.valueBand {
    background: linear-gradient(120deg, var(--wr-deep), var(--wr-mid));
    color: #fff;
    padding: 56px 0;
}

.valueBand .valueItem {
    text-align: center;
    padding: 16px 10px;
}

.valueBand .valueItem .vIcon {
    font-size: 34px;
    color: #7fd7f7;
    margin-bottom: 14px;
}

.valueBand .valueItem h5 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
}

.valueBand .valueItem p {
    color: #d3ecf7;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* ---------- PROGRAMS / WHAT WE TREAT ---------- */
.programChip {
    background: #fff;
    border: 1px solid #e3eef4;
    border-left: 4px solid var(--wr-accent);
    border-radius: 10px;
    padding: 20px 22px;
    margin-bottom: 24px;
    transition: all 0.25s ease;
    height: calc(100% - 24px);
}

.programChip:hover {
    border-left-color: var(--wr-deep);
    box-shadow: 0 12px 26px rgba(12, 71, 104, 0.1);
    transform: translateY(-4px);
}

.programChip i {
    color: var(--wr-accent);
    font-size: 22px;
    margin-bottom: 12px;
    display: block;
}

.programChip h5 {
    color: var(--wr-deep);
    font-weight: 700;
    font-size: 17px;
    margin: 0 0 8px;
}

.programChip p {
    color: var(--wr-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* ---------- CTA BANNER ---------- */
.ctaBanner {
    position: relative;
    padding: 90px 0;
    text-align: center;
    color: #fff;
    background: linear-gradient(120deg, rgba(12, 71, 104, 0.9), rgba(0, 110, 161, 0.78)),
                url("../img/banner/banner.png") center/cover no-repeat fixed;
}

.ctaBanner h2 {
    font-size: 34px;
    font-weight: 700;
    margin: 0 0 16px;
}

.ctaBanner p {
    font-size: 18px;
    color: #eaf6fd;
    max-width: 640px;
    margin: 0 auto 30px;
    line-height: 1.7;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 767px) {
    .homeHero {
        min-height: 70vh;
        text-align: center;
    }
    .homeHero h1 {
        font-size: 32px;
    }
    .homeHero p.heroLead {
        font-size: 16px;
    }
    .heroActions .btn {
        display: block;
        margin: 10px auto;
        max-width: 260px;
    }
    .wrSection {
        padding: 48px 0;
    }
    .wrHeading h2,
    .ctaBanner h2 {
        font-size: 26px;
    }
    .ctaBanner {
        background-attachment: scroll;
        padding: 60px 0;
    }
}