/* ================= HERO ================= */

.hero{
    position: relative;
    height: 650px;
    overflow: hidden;
}

/* .hero{
    height: 650px;
}

.slider-track img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
} */

.hero-slider{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.slider-track{
    display:flex;
    height:100%;
}

.slider-track img{
    width:100%;
    height:100%;
    flex:0 0 100%;
    object-fit:cover;
    object-position:center;
}

/* LEFT SIDE GRADIENT (Figma) */
.hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;

    background:linear-gradient(
        90deg,
        rgba(42,58,96,.88) 0%,
        rgba(42,58,96,.72) 35%,
        rgba(11,29,43,.30) 55%,
        rgba(11,29,43,0) 75%
    );
}

.hero-content{
    position:relative;
    z-index:3;
    height:100%;
    width:560px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    margin-left:70px;
}

/* Badges */
.hero-badges{
    display:flex;
    gap:12px;
    margin-bottom:22px;
}

.hero-badges span{
    padding:10px 18px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(10px);
    color:#fff;
    font:500 14px var(--font-heading);
}

/* Heading */
.hero h1{
    font-family:var(--font-heading);
    font-size:56px;
    line-height:84px;
    font-weight:700;
    letter-spacing:-1.44px;
    color:#fff;
    margin-bottom:8px;
}

.hero h1 span{
    color:var(--teal);
}

/* Paragraph */
.hero p{
    width:604px;
    color:#fff;
    font:400 16px/26px var(--font-body);
    margin-bottom:30px;
}

/* Buttons */
.hero-buttons{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:40px;
}

.btn-primary,
.btn-outline{
    width:210px;
    height:64px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-heading);
    font-size:16px;
    font-weight:600;
    text-align:center;
}

.btn-primary{
    background:var(--teal);
    color:#fff;
}

.btn-outline{
    background:transparent;
    border:1px solid rgba(255,255,255,.35);
    color:#fff;
    gap:10px;
}

.btn-outline img{
    width:22px;
    height:22px;
    object-fit:contain;
}

/* Patients */
/* ===== Patients ===== */

.patients{
    display:flex;
    align-items:center;
    gap:16px;
}

.avatar-group{
    display:flex;
    align-items:center;
}

.avatar-group img{
    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #FFFFFF;
    margin-left:-16px;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.avatar-group img:first-child{
    margin-left:0;
}

.patient-text h4{
    font-family:var(--font-heading);
    font-size:18px;
    font-weight:600;
    color:#FFFFFF;
    line-height:1.2;
}

.patient-text h4 span{
    color:var(--teal);
}

.patient-text p{
    margin-top:4px;
    font-family:var(--font-body);
    font-size:14px;
    color:#D9E4EF;
    line-height:1.2;
}

/* ================= FEATURES ================= */

.hero{
    overflow: visible;
}

.features{
    position: relative;
    margin-top: -72px;
    z-index: 20;
}

.features-card{
    width: 1280px;
    max-width: calc(100% - 80px);
    margin: 0 auto;
    padding: 38px 18px;

    background: rgba(255,255,255,.82);
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);

    border: 1px solid rgba(255,255,255,.35);
    border-radius: 34px;

    box-shadow:
      0 -18px 35px rgba(255,255,255,.35) inset,
      0 12px 30px rgba(20,35,70,.08);
}

/* =========================================================
   RESPONSIVE — TABLET & MOBILE
   (the hero used fixed px widths that overflowed narrow
   viewports; these queries let it scale down gracefully)
========================================================= */

@media (max-width:1200px){

    .hero-content{
        width:auto;
        max-width:600px;
        margin-left:40px;
        padding-right:24px;
    }

    .hero p{
        width:100%;
        max-width:520px;
    }
}

@media (max-width:992px){

    .hero{
        height:600px;
    }

    .hero-content{
        max-width:80%;
        margin-left:32px;
    }

    .hero p{
        max-width:480px;
    }

    .features{
        margin-top:-56px;
    }

    .features-card{
        padding:30px 16px;
    }
}

@media (max-width:768px){

    .hero{
        height:620px;
    }

    .hero-content{
        max-width:100%;
        margin-left:0;
        padding:0 24px;
    }

    .hero p{
        max-width:100%;
    }

    .hero-badges{
        flex-wrap:wrap;
        row-gap:10px;
    }

    .hero-buttons{
        flex-wrap:wrap;
        row-gap:14px;
    }

    .btn-primary,
    .btn-outline{
        width:auto;
        min-width:170px;
        padding:0 22px;
        height:56px;
    }
}

@media (max-width:576px){

    .hero{
        height:640px;
    }

    .hero-badges span{
        font-size:12px;
        padding:8px 14px;
    }

    .hero h1{
        margin-bottom:14px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:stretch;
        width:100%;
        row-gap:12px;
    }

    .btn-primary,
    .btn-outline{
        width:100%;
        min-width:0;
    }

    .patients{
        flex-wrap:wrap;
        row-gap:10px;
    }

    .features{
        margin-top:-40px;
    }

    .features-card{
        border-radius:24px;
        padding:26px 14px;
    }
}