:root{
    --primary:#11C5D9;
    --primary-dark:#0EA5B7;
    --secondary:#0F172A;
    --accent:#7BE0EA;
    --bg:#F4FBFD;
    --card:rgba(255,255,255,.78);
    --text:#0F172A;
    --text-soft:#64748B;
    --success:#10B981;
    --danger:#EF4444;
    --warning:#F59E0B;

    --shadow:
        0 20px 40px rgba(15,23,42,.08);

    --radius-xl:34px;
    --radius-lg:26px;
    --radius-md:20px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Inter',sans-serif;

    background:
        radial-gradient(circle at top left,#DDFBFF 0%,transparent 30%),
        radial-gradient(circle at bottom right,#CCFBF1 0%,transparent 30%),
        #F4FBFD;

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:20px;

    overflow-x:hidden;
}

.mobile-container{
    width:100%;
    max-width:390px;
    min-height:844px;

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(24px);

    border:
        1px solid rgba(255,255,255,.65);

    border-radius:42px;

    overflow:hidden;

    box-shadow:
        0 40px 80px rgba(15,23,42,.15);

    position:relative;
}

/* SPLASH */

#splashScreen{
    position:fixed;
    inset:0;

    background:white;

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:99999;
}

#splashScreen img{
    width:180px;
    animation:floatLogo 2s infinite ease-in-out;
}

@keyframes floatLogo{
    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }
}

/* HEADER */

.header{
    position:sticky;
    top:0;

    z-index:100;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 22px;

    background:rgba(255,255,255,.55);

    backdrop-filter:blur(20px);
}

.logo{
    height:42px;
}

.ai-badge{
    background:rgba(17,197,217,.12);

    color:var(--primary);

    border:
        1px solid rgba(17,197,217,.18);

    padding:10px 16px;

    border-radius:40px;

    font-size:12px;
    font-weight:700;
}

/* HERO */

.welcome-card{
    margin:20px;

    padding:30px;

    border-radius:34px;

    background:
        linear-gradient(
            135deg,
            #11C5D9,
            #0EA5B7
        );

    position:relative;

    overflow:hidden;

    color:white;

    box-shadow:
        0 20px 40px rgba(17,197,217,.3);
}

.welcome-card::after{
    content:'';

    position:absolute;

    width:220px;
    height:220px;

    background:rgba(255,255,255,.12);

    border-radius:50%;

    top:-80px;
    right:-80px;
}

.welcome-card h2{
    font-size:28px;
    font-weight:800;

    line-height:1.2;

    margin-bottom:10px;

    position:relative;
    z-index:2;
}

.welcome-card p{
    font-size:14px;
    line-height:1.7;

    opacity:.95;

    position:relative;
    z-index:2;
}

.hero-buttons{
    display:flex;
    gap:12px;

    margin-top:24px;

    position:relative;
    z-index:2;
}

.btn-primary{
    background:white;
    color:var(--primary);

    border:none;

    padding:14px 18px;

    border-radius:18px;

    font-weight:700;

    cursor:pointer;

    flex:1;
}

.btn-secondary{
    background:rgba(255,255,255,.18);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.3);

    color:white;

    padding:14px 18px;

    border-radius:18px;

    font-weight:700;

    flex:1;
}

/* STATS */

.stats-row{
    display:flex;
    gap:14px;

    padding:0 20px;

    margin-bottom:20px;
}

.stat-card{
    flex:1;

    background:rgba(255,255,255,.7);

    backdrop-filter:blur(16px);

    border-radius:26px;

    padding:18px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.3s;
}

.stat-card:hover{
    transform:translateY(-5px);
}

.stat-card i{
    font-size:24px;
    color:var(--primary);

    margin-bottom:10px;
}

.stat-value{
    display:block;

    font-size:26px;
    font-weight:800;

    color:var(--secondary);
}

.stat-label{
    font-size:11px;
    color:var(--text-soft);
}

/* SECTION */

.section-title{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 20px;

    margin:28px 0 16px;
}

.section-title h3{
    font-size:18px;
    font-weight:800;
}

.section-title a{
    text-decoration:none;

    color:var(--primary);

    font-size:13px;
    font-weight:700;
}

/* QUICK ACTION */

.quick-actions{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:14px;

    padding:0 20px;
}

.action-item{
    background:rgba(255,255,255,.7);

    backdrop-filter:blur(14px);

    border-radius:24px;

    padding:18px 10px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.3s;

    cursor:pointer;
}

.action-item:hover{
    transform:
        translateY(-6px)
        scale(1.03);
}

.action-item i{
    font-size:26px;

    color:var(--primary);

    margin-bottom:10px;
}

.action-item span{
    display:block;

    font-size:11px;
    font-weight:700;

    color:var(--secondary);
}

/* BOOKING CARD */

.booking-card{
    margin:20px;

    padding:18px;

    border-radius:28px;

    background:
        linear-gradient(
            135deg,
            #FFFFFF,
            #F0FDFF
        );

    display:flex;
    justify-content:space-between;
    align-items:center;

    box-shadow:var(--shadow);
}

.booking-info{
    display:flex;
    gap:14px;
}

.service-icon{
    width:58px;
    height:58px;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            #11C5D9,
            #0EA5B7
        );

    display:flex;
    justify-content:center;
    align-items:center;

    color:white;

    font-size:24px;
}

.booking-card h4{
    font-size:16px;
    margin-bottom:4px;
}

.booking-card p{
    font-size:12px;
    color:var(--text-soft);
}

.status{
    display:inline-flex;

    margin-top:8px;

    padding:6px 12px;

    border-radius:30px;

    background:#ECFDF5;

    color:#059669;

    font-size:11px;
    font-weight:700;
}

/* AI CARD */

.ai-card{
    margin:20px;

    padding:20px;

    border-radius:30px;

    background:
        linear-gradient(
            135deg,
            #0F172A,
            #111827
        );

    color:white;

    display:flex;
    align-items:center;

    gap:14px;

    box-shadow:
        0 20px 40px rgba(15,23,42,.25);
}

.ai-icon{
    width:58px;
    height:58px;

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            #11C5D9,
            #7BE0EA
        );

    display:flex;
    justify-content:center;
    align-items:center;

    color:white;

    font-size:24px;
}

.ai-text h4{
    font-size:16px;
    margin-bottom:6px;
}

.ai-text p{
    font-size:12px;
    opacity:.8;
    line-height:1.5;
}

/* BOTTOM NAV */

.bottom-nav{
    position:sticky;
    bottom:0;

    display:flex;
    justify-content:space-around;

    padding:14px 12px 22px;

    background:rgba(255,255,255,.7);

    backdrop-filter:blur(24px);

    border-top:
        1px solid rgba(255,255,255,.3);

    margin-top:30px;
}

.nav-item{
    text-align:center;

    color:#94A3B8;

    transition:.3s;

    cursor:pointer;
}

.nav-item.active{
    color:var(--primary);

    transform:translateY(-5px);
}

.nav-item i{
    display:block;

    font-size:22px;

    margin-bottom:6px;
}

.nav-item span{
    font-size:11px;
    font-weight:700;
}

/* TOAST */

#globalToast{
    position:fixed;

    bottom:120px;
    left:50%;

    transform:translateX(-50%);

    background:#0F172A;

    color:white;

    padding:14px 22px;

    border-radius:40px;

    font-size:13px;

    z-index:9999;

    opacity:0;

    transition:.3s;
}

/* RESPONSIVE */

@media(max-width:420px){

    body{
        padding:0;
    }

    .mobile-container{
        border-radius:0;
        min-height:100vh;
        max-width:100%;
    }
}

/* BOOKING HERO */

.booking-hero{
    padding-bottom:26px;
}

.hero-tags{
    display:flex;
    gap:10px;

    margin-top:20px;

    flex-wrap:wrap;
}

.hero-tags span{
    background:rgba(255,255,255,.18);

    border:
        1px solid rgba(255,255,255,.25);

    padding:8px 14px;

    border-radius:30px;

    font-size:11px;
    font-weight:700;
}

/* SERVICE GRID */

.service-grid{
    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:16px;

    padding:0 20px;
}

.service-card{
    position:relative;

    background:
        rgba(255,255,255,.72);

    backdrop-filter:blur(18px);

    border-radius:30px;

    padding:20px;

    text-align:center;

    transition:.35s;

    cursor:pointer;

    box-shadow:
        0 15px 30px rgba(15,23,42,.06);
}

.service-card:hover{
    transform:
        translateY(-8px)
        scale(1.03);
}

.service-card img{
    width:74px;
    height:74px;

    border-radius:24px;

    object-fit:cover;

    margin-bottom:14px;
}

.service-card h4{
    font-size:15px;
    font-weight:800;

    margin-bottom:6px;
}

.service-card p{
    font-size:12px;

    color:var(--text-soft);

    line-height:1.5;
}

.selected-service{
    border:
        2px solid var(--primary);

    box-shadow:
        0 20px 40px rgba(17,197,217,.18);
}

/* BADGE */

.service-badge{
    position:absolute;

    top:14px;
    right:14px;

    background:var(--primary);

    color:white;

    font-size:10px;
    font-weight:800;

    padding:6px 10px;

    border-radius:30px;
}

.service-badge.premium{
    background:
        linear-gradient(
            135deg,
            #F59E0B,
            #FBBF24
        );
}

/* FORM */

.booking-form{
    margin:20px;

    padding:24px;

    border-radius:32px;

    background:
        rgba(255,255,255,.8);

    backdrop-filter:blur(20px);

    box-shadow:
        0 20px 40px rgba(15,23,42,.08);
}

.booking-form-header{
    margin-bottom:24px;
}

.booking-form-header h3{
    font-size:20px;
    margin-bottom:6px;
}

.booking-form-header span{
    color:var(--primary);

    font-size:13px;
    font-weight:700;
}

.form-group{
    margin-bottom:18px;
}

.form-group label{
    display:block;

    margin-bottom:10px;

    font-size:13px;
    font-weight:700;
}

.form-group input,
.form-group textarea{
    width:100%;

    padding:16px;

    border:none;

    background:#F8FAFC;

    border-radius:18px;

    font-family:inherit;

    outline:none;
}

.price-box{
    display:flex;
    justify-content:space-between;
    align-items:center;

    background:
        linear-gradient(
            135deg,
            #F0FDFF,
            #ECFEFF
        );

    padding:18px;

    border-radius:22px;

    margin-top:12px;
}

.price-box small{
    display:block;

    margin-bottom:6px;

    color:var(--text-soft);
}

.price-box strong{
    font-size:24px;

    color:var(--primary);
}

.price-ai{
    background:white;

    padding:10px 14px;

    border-radius:20px;

    font-size:11px;
    font-weight:800;

    color:var(--primary);
}

.booking-btn{
    width:100%;

    margin-top:20px;

    border:none;

    background:
        linear-gradient(
            135deg,
            #11C5D9,
            #0EA5B7
        );

    color:white;

    padding:18px;

    border-radius:22px;

    font-size:15px;
    font-weight:800;

    cursor:pointer;

    transition:.3s;
}

.booking-btn:hover{
    transform:
        translateY(-3px);
}

/* FAMILY HERO */

.family-health-score{
    margin-top:24px;

    background:
        rgba(255,255,255,.18);

    border:
        1px solid rgba(255,255,255,.22);

    backdrop-filter:blur(16px);

    padding:18px 20px;

    border-radius:24px;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.family-health-score small{
    display:block;

    margin-bottom:6px;

    opacity:.8;
}

.family-health-score strong{
    font-size:34px;
    font-weight:800;
}

.score-status{
    background:white;

    color:var(--primary);

    padding:10px 14px;

    border-radius:30px;

    font-size:12px;
    font-weight:800;
}

/* MEMBER */

.family-members{
    display:flex;

    gap:14px;

    overflow-x:auto;

    padding:0 20px 10px;
}

.member-card{
    min-width:110px;

    background:
        rgba(255,255,255,.72);

    backdrop-filter:blur(16px);

    border-radius:30px;

    padding:18px 14px;

    text-align:center;

    transition:.35s;

    cursor:pointer;

    box-shadow:
        0 15px 30px rgba(15,23,42,.06);
}

.member-card.active{
    transform:
        translateY(-6px);

    border:
        2px solid var(--primary);

    box-shadow:
        0 20px 40px rgba(17,197,217,.15);
}

.member-avatar{
    position:relative;

    width:74px;
    height:74px;

    margin:0 auto 12px;
}

.member-avatar img{
    width:100%;
    height:100%;

    border-radius:24px;

    object-fit:cover;
}

.member-status{
    position:absolute;

    width:16px;
    height:16px;

    border-radius:50%;

    right:0;
    bottom:0;

    border:
        3px solid white;
}

.member-status.good{
    background:#10B981;
}

.member-status.warning{
    background:#F59E0B;
}

.member-status.danger{
    background:#EF4444;
}

.member-card h4{
    font-size:15px;
    margin-bottom:4px;
}

.member-card p{
    font-size:11px;

    color:var(--text-soft);
}

/* VITAL */

.vital-signs{
    display:flex;

    gap:14px;

    padding:0 20px;
}

.vital-card{
    flex:1;

    background:
        rgba(255,255,255,.78);

    backdrop-filter:blur(18px);

    border-radius:28px;

    padding:22px 16px;

    text-align:center;

    box-shadow:
        0 15px 30px rgba(15,23,42,.06);
}

.vital-card i{
    font-size:24px;

    color:var(--primary);

    margin-bottom:12px;
}

.vital-value{
    display:block;

    font-size:24px;
    font-weight:800;

    margin-bottom:6px;
}

.vital-label{
    font-size:11px;

    color:var(--text-soft);
}

/* MED */

.med-schedule{
    padding:0 20px;
}

.med-item{
    background:
        rgba(255,255,255,.72);

    backdrop-filter:blur(16px);

    border-radius:24px;

    padding:16px 18px;

    display:flex;
    align-items:center;

    margin-bottom:14px;

    box-shadow:
        0 10px 25px rgba(15,23,42,.05);
}

.med-time{
    font-size:16px;
    font-weight:800;

    width:70px;

    color:var(--primary);
}

.med-info{
    flex:1;
}

.med-info h4{
    font-size:15px;

    margin-bottom:4px;
}

.med-info p{
    font-size:12px;

    color:var(--text-soft);
}

.med-status{
    padding:8px 14px;

    border-radius:30px;

    font-size:11px;
    font-weight:800;
}

.med-status.taken{
    background:#ECFDF5;
    color:#059669;
}

.med-status.pending{
    background:#FEF3C7;
    color:#D97706;
}

/* EMERGENCY */

.emergency-alert{
    margin:20px;

    padding:22px;

    border-radius:30px;

    background:
        linear-gradient(
            135deg,
            #EF4444,
            #DC2626
        );

    color:white;

    display:flex;
    align-items:center;

    gap:14px;

    box-shadow:
        0 20px 40px rgba(239,68,68,.22);

    cursor:pointer;
}

.emergency-icon{
    width:58px;
    height:58px;

    border-radius:22px;

    background:
        rgba(255,255,255,.18);

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:24px;
}

/* HISTORY */

.history-list{
    padding:0 20px 20px;
}

.history-item{
    background:
        rgba(255,255,255,.75);

    backdrop-filter:blur(16px);

    border-radius:24px;

    padding:18px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:14px;

    box-shadow:
        0 10px 25px rgba(15,23,42,.05);
}

.history-item strong{
    display:block;

    margin-bottom:4px;
}

.history-item p{
    font-size:12px;

    color:var(--text-soft);
}

.history-status{
    background:#ECFDF5;

    color:#059669;

    padding:8px 14px;

    border-radius:30px;

    font-size:11px;
    font-weight:800;
}

/* EMERGENCY PAGE */

.emergency-page{
    background:
        linear-gradient(
            180deg,
            #FFF5F5,
            #FFFFFF
        );
}

/* HERO */

.emergency-hero{
    position:relative;

    margin:20px;

    padding:50px 24px;

    border-radius:36px;

    background:
        linear-gradient(
            135deg,
            #EF4444,
            #DC2626
        );

    overflow:hidden;

    color:white;

    text-align:center;

    box-shadow:
        0 25px 50px rgba(239,68,68,.28);
}

.emergency-center{
    position:relative;
    z-index:5;
}

.emergency-center h2{
    font-size:34px;
    font-weight:900;

    margin-top:30px;
    margin-bottom:14px;
}

.emergency-center p{
    line-height:1.7;

    opacity:.92;

    font-size:14px;
}

/* PULSE */

.hero-pulse{
    position:absolute;

    width:260px;
    height:260px;

    border-radius:50%;

    background:
        rgba(255,255,255,.08);

    top:50%;
    left:50%;

    transform:
        translate(-50%,-50%);

    animation:
        pulseEmergency 3s infinite;
}

.pulse-2{
    animation-delay:1s;
}

.pulse-3{
    animation-delay:2s;
}

@keyframes pulseEmergency{

    0%{
        transform:
            translate(-50%,-50%)
            scale(.8);

        opacity:1;
    }

    100%{
        transform:
            translate(-50%,-50%)
            scale(1.5);

        opacity:0;
    }

}

/* SOS */

.sos-button{
    width:150px;
    height:150px;

    border-radius:50%;

    border:none;

    background:white;

    color:#EF4444;

    font-size:52px;

    cursor:pointer;

    box-shadow:
        0 0 40px rgba(255,255,255,.4);

    transition:.3s;
}

.sos-button:hover{
    transform:scale(1.06);
}

.active-sos{
    animation:
        shake .3s infinite;
}

@keyframes shake{

    0%{
        transform:translateX(0);
    }

    25%{
        transform:translateX(-4px);
    }

    50%{
        transform:translateX(4px);
    }

    75%{
        transform:translateX(-4px);
    }

    100%{
        transform:translateX(0);
    }

}

/* STATUS */

.dispatch-status-card{
    margin:20px;

    padding:24px;

    border-radius:32px;

    background:
        rgba(255,255,255,.82);

    backdrop-filter:blur(20px);

    box-shadow:
        0 20px 40px rgba(15,23,42,.08);
}

.dispatch-header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:20px;
}

.dispatch-live{
    background:#EF4444;

    color:white;

    padding:8px 14px;

    border-radius:30px;

    font-size:11px;
    font-weight:800;
}

.dispatch-item-modern{
    display:flex;

    gap:16px;

    margin-bottom:18px;
}

.dispatch-icon{
    width:56px;
    height:56px;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            #EF4444,
            #F87171
        );

    color:white;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:22px;
}

.dispatch-item-modern strong{
    display:block;

    margin-bottom:6px;
}

.dispatch-item-modern p{
    font-size:12px;

    color:var(--text-soft);

    line-height:1.6;
}

/* HOTLINE */

.hotline-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

    padding:0 20px;
}

.hotline-card{
    background:white;

    border-radius:28px;

    padding:24px 18px;

    text-align:center;

    cursor:pointer;

    box-shadow:
        0 15px 30px rgba(15,23,42,.06);

    transition:.3s;
}

.hotline-card:hover{
    transform:
        translateY(-6px);
}

.hotline-card i{
    font-size:28px;

    color:#EF4444;

    margin-bottom:14px;
}

.hotline-card strong{
    display:block;

    font-size:24px;

    margin-bottom:6px;
}

.hotline-card p{
    font-size:12px;

    color:var(--text-soft);
}

/* UNIT */

.unit-list{
    padding:0 20px;
}

.unit-card{
    background:white;

    border-radius:28px;

    padding:18px;

    display:flex;
    align-items:center;

    margin-bottom:16px;

    box-shadow:
        0 15px 30px rgba(15,23,42,.06);
}

.unit-icon{
    width:58px;
    height:58px;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            #EF4444,
            #F87171
        );

    color:white;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:22px;

    margin-right:16px;
}

.unit-info{
    flex:1;
}

.unit-info strong{
    display:block;

    margin-bottom:6px;
}

.unit-info p{
    font-size:12px;

    color:var(--text-soft);
}

.unit-status{
    padding:8px 12px;

    border-radius:30px;

    font-size:10px;
    font-weight:800;
}

.unit-status.active{
    background:#FEE2E2;
    color:#DC2626;
}

.unit-status.standby{
    background:#FEF3C7;
    color:#D97706;
}

/* CONTACT */

.family-contact-list{
    padding:0 20px;
}

.family-contact-card{
    background:white;

    border-radius:28px;

    padding:18px;

    display:flex;
    align-items:center;

    gap:16px;

    margin-bottom:16px;

    box-shadow:
        0 15px 30px rgba(15,23,42,.06);

    cursor:pointer;
}

.contact-avatar{
    width:52px;
    height:52px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #EF4444,
            #F87171
        );

    color:white;

    display:flex;
    justify-content:center;
    align-items:center;

    font-weight:800;
}

/* PROTOCOL */

.protocol-card-modern{
    margin:20px;

    padding:24px;

    border-radius:32px;

    background:
        linear-gradient(
            135deg,
            #0F172A,
            #111827
        );

    color:white;
}

.protocol-card-modern h4{
    margin-bottom:20px;

    font-size:20px;
}

.protocol-item{
    display:flex;
    align-items:center;

    gap:14px;

    margin-bottom:16px;
}

.protocol-item i{
    color:#10B981;
}

/* TRACKING */

.tracking-page{
    background:#F4FBFD;
}

/* MAP */

.tracking-map-container{
    position:relative;

    height:420px;

    overflow:hidden;

    border-radius:0 0 40px 40px;
}

.tracking-map{
    width:100%;
    height:100%;

    object-fit:cover;

    filter:
        saturate(1.2)
        contrast(1.05);
}

/* ROUTE */

.route-line{
    position:absolute;

    width:140px;
    height:4px;

    background:
        repeating-linear-gradient(
            to right,
            #11C5D9,
            #11C5D9 10px,
            transparent 10px,
            transparent 20px
        );

    top:48%;
    left:48%;

    transform:rotate(-20deg);

    opacity:.9;
}

/* MARKER */

.patient-marker,
.medical-marker{
    position:absolute;

    width:72px;
    height:72px;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    color:white;

    font-size:28px;

    z-index:10;
}

.patient-marker{
    background:
        linear-gradient(
            135deg,
            #0F172A,
            #111827
        );

    bottom:90px;
    right:40px;
}

.medical-marker{
    background:
        linear-gradient(
            135deg,
            #11C5D9,
            #0EA5B7
        );

    top:120px;
    left:60px;
}

/* GPS */

.gps-pulse{
    position:absolute;

    inset:0;

    border-radius:50%;

    background:
        rgba(17,197,217,.35);

    animation:
        gpsPulse 2s infinite;
}

@keyframes gpsPulse{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(1.8);
        opacity:0;
    }

}

/* FLOAT ETA */

.floating-eta{
    position:absolute;

    top:24px;
    right:20px;

    background:
        rgba(255,255,255,.88);

    backdrop-filter:blur(18px);

    border-radius:28px;

    padding:18px 20px;

    text-align:center;

    box-shadow:
        0 20px 40px rgba(15,23,42,.08);

    z-index:10;
}

.floating-eta small{
    display:block;

    margin-bottom:6px;

    color:var(--text-soft);
}

.floating-eta strong{
    display:block;

    font-size:34px;
    font-weight:900;

    color:var(--primary);
}

/* TRACK CARD */

.tracking-card{
    margin:-40px 20px 0;

    position:relative;

    z-index:20;

    background:
        rgba(255,255,255,.85);

    backdrop-filter:blur(20px);

    border-radius:34px;

    padding:24px;

    box-shadow:
        0 25px 50px rgba(15,23,42,.08);
}

.tracking-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:20px;
}

.tracking-card-top small{
    color:var(--text-soft);
}

.tracking-live{
    background:#10B981;

    color:white;

    padding:8px 14px;

    border-radius:30px;

    font-size:11px;
    font-weight:800;
}

/* STAFF */

.staff-profile{
    display:flex;
    align-items:center;

    gap:16px;

    margin-bottom:24px;
}

.staff-profile img{
    width:76px;
    height:76px;

    border-radius:24px;

    object-fit:cover;
}

.staff-rating{
    font-weight:700;

    margin-bottom:8px;
}

.staff-profile p{
    color:var(--text-soft);

    font-size:13px;
}

/* PROGRESS */

.progress-header{
    display:flex;
    justify-content:space-between;

    margin-bottom:12px;

    font-size:13px;
    font-weight:700;
}

.progress-bar-modern{
    height:14px;

    background:#E2E8F0;

    border-radius:30px;

    overflow:hidden;
}

.progress-fill-modern{
    height:100%;

    width:40%;

    background:
        linear-gradient(
            90deg,
            #11C5D9,
            #7BE0EA
        );

    border-radius:30px;

    transition:1s;
}

/* STATUS */

.tracking-status-modern{
    display:flex;
    justify-content:space-between;

    margin-top:30px;
}

.tracking-step{
    text-align:center;

    opacity:.45;

    transition:.3s;
}

.tracking-step.active{
    opacity:1;
}

.step-icon{
    width:54px;
    height:54px;

    border-radius:18px;

    background:#E2E8F0;

    display:flex;
    justify-content:center;
    align-items:center;

    margin:0 auto 10px;

    color:#64748B;
}

.tracking-step.active .step-icon{
    background:
        linear-gradient(
            135deg,
            #11C5D9,
            #0EA5B7
        );

    color:white;
}

.tracking-step span{
    font-size:11px;
    font-weight:700;
}

/* AI ROUTING */

.ai-routing-card{
    margin:20px;

    padding:22px;

    border-radius:32px;

    background:
        linear-gradient(
            135deg,
            #0F172A,
            #111827
        );

    color:white;

    display:flex;
    gap:16px;

    align-items:center;
}

.ai-routing-icon{
    width:58px;
    height:58px;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            #11C5D9,
            #7BE0EA
        );

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:24px;
}

/* METRIC */

.live-metrics{
    display:flex;

    gap:14px;

    padding:0 20px 20px;
}

.metric-card{
    flex:1;

    background:white;

    border-radius:28px;

    padding:20px 14px;

    text-align:center;

    box-shadow:
        0 15px 30px rgba(15,23,42,.06);
}

.metric-card i{
    font-size:22px;

    color:var(--primary);

    margin-bottom:12px;
}

.metric-card strong{
    display:block;

    font-size:24px;
    font-weight:900;

    margin-bottom:6px;
}

.metric-card span{
    font-size:11px;

    color:var(--text-soft);
}

/* EMR PAGE */

.emr-page{
    background:
        linear-gradient(
            180deg,
            #F4FBFD,
            #FFFFFF
        );
}

/* HERO */

.emr-hero{
    margin:20px;

    padding:28px;

    border-radius:34px;

    background:
        linear-gradient(
            135deg,
            #0F172A,
            #111827
        );

    color:white;

    display:flex;
    gap:20px;

    align-items:center;

    box-shadow:
        0 25px 50px rgba(15,23,42,.18);
}

.emr-shield{
    width:82px;
    height:82px;

    border-radius:26px;

    background:
        linear-gradient(
            135deg,
            #11C5D9,
            #7BE0EA
        );

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:34px;
}

.emr-hero h2{
    font-size:28px;
    line-height:1.2;

    margin-bottom:10px;
}

.emr-hero p{
    font-size:13px;

    line-height:1.7;

    opacity:.85;
}

/* PATIENT */

.patient-selector-modern{
    display:flex;

    gap:14px;

    overflow-x:auto;

    padding:0 20px 10px;
}

.patient-card{
    min-width:90px;

    background:white;

    border-radius:28px;

    padding:16px;

    text-align:center;

    box-shadow:
        0 15px 30px rgba(15,23,42,.06);

    transition:.3s;

    cursor:pointer;
}

.patient-card.active{
    transform:
        translateY(-5px);

    border:
        2px solid var(--primary);

    box-shadow:
        0 20px 40px rgba(17,197,217,.16);
}

.patient-card img{
    width:64px;
    height:64px;

    border-radius:22px;

    object-fit:cover;

    margin-bottom:10px;
}

.patient-card span{
    font-size:12px;
    font-weight:700;
}

/* SUMMARY */

.health-summary{
    display:flex;

    gap:14px;

    padding:20px;
}

.summary-card{
    flex:1;

    background:white;

    border-radius:28px;

    padding:22px 14px;

    text-align:center;

    box-shadow:
        0 15px 30px rgba(15,23,42,.06);
}

.summary-card i{
    font-size:24px;

    color:var(--primary);

    margin-bottom:12px;
}

.summary-card strong{
    display:block;

    font-size:24px;
    font-weight:900;

    margin-bottom:6px;
}

.summary-card span{
    font-size:11px;

    color:var(--text-soft);
}

/* SECTION */

.emr-section-modern{
    margin:20px;

    padding:24px;

    border-radius:32px;

    background:
        rgba(255,255,255,.82);

    backdrop-filter:blur(18px);

    box-shadow:
        0 20px 40px rgba(15,23,42,.06);
}

.emr-section-title{
    display:flex;

    gap:14px;

    align-items:center;

    margin-bottom:24px;
}

.emr-section-title i{
    width:52px;
    height:52px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #11C5D9,
            #0EA5B7
        );

    color:white;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:22px;
}

/* RECORD */

.emr-record{
    display:flex;

    gap:16px;

    margin-bottom:20px;
}

.record-date{
    width:70px;

    border-radius:18px;

    background:#F0FDFF;

    color:var(--primary);

    font-weight:800;

    font-size:13px;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:10px;
}

.record-content strong{
    display:block;

    margin-bottom:8px;
}

.record-content p{
    font-size:13px;

    color:var(--text-soft);

    line-height:1.7;
}

/* MEDICINE */

.medicine-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;
}

.medicine-card{
    background:#F8FAFC;

    border-radius:24px;

    padding:20px;
}

.medicine-card strong{
    display:block;

    margin-bottom:8px;
}

.medicine-card p{
    font-size:12px;

    color:var(--text-soft);

    margin-bottom:12px;
}

.medicine-card span{
    background:#ECFDF5;

    color:#059669;

    padding:8px 12px;

    border-radius:30px;

    font-size:10px;
    font-weight:800;
}

/* LAB */

.lab-row{
    display:flex;
    justify-content:space-between;
    align-items:center;

    background:#F8FAFC;

    border-radius:22px;

    padding:16px 18px;

    margin-bottom:14px;
}

.lab-row strong{
    font-size:13px;
}

.lab-badge{
    padding:8px 12px;

    border-radius:30px;

    font-size:10px;
    font-weight:800;
}

.lab-badge.normal{
    background:#ECFDF5;
    color:#059669;
}

.lab-badge.warning{
    background:#FEF3C7;
    color:#D97706;
}

/* SECURITY */

.security-card-modern{
    margin:20px;

    padding:26px;

    border-radius:34px;

    background:
        linear-gradient(
            135deg,
            #0F172A,
            #111827
        );

    color:white;
}

.security-header{
    display:flex;

    gap:14px;

    align-items:center;

    margin-bottom:24px;
}

.security-header i{
    font-size:26px;

    color:#11C5D9;
}

.security-grid-modern{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;
}

.security-item{
    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:18px;

    text-align:center;
}

.security-item i{
    display:block;

    margin-bottom:12px;

    font-size:22px;

    color:#11C5D9;
}

/* ACTION */

.emr-actions-modern{
    display:flex;

    gap:14px;

    padding:0 20px 20px;
}

.emr-btn{
    border:none;

    border-radius:22px;

    padding:18px;

    font-weight:800;

    cursor:pointer;
}

.emr-btn.primary{
    flex:1;

    background:
        linear-gradient(
            135deg,
            #11C5D9,
            #0EA5B7
        );

    color:white;
}

.emr-btn.secondary{
    width:70px;

    background:white;

    box-shadow:
        0 15px 30px rgba(15,23,42,.06);
}

/* PAYMENT PAGE */

.payment-page{
    background:
        linear-gradient(
            180deg,
            #F4FBFD,
            #FFFFFF
        );
}

/* HERO */

.payment-hero{
    position:relative;

    margin:20px;

    padding:34px 28px;

    border-radius:36px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #0F172A,
            #111827
        );

    color:white;

    box-shadow:
        0 25px 50px rgba(15,23,42,.18);
}

.payment-glow{
    position:absolute;

    width:260px;
    height:260px;

    background:
        radial-gradient(
            rgba(17,197,217,.28),
            transparent
        );

    top:-100px;
    right:-100px;
}

.payment-hero small{
    display:block;

    opacity:.8;

    margin-bottom:12px;
}

.payment-hero h2{
    font-size:42px;
    font-weight:900;

    margin-bottom:12px;
}

.payment-hero p{
    font-size:14px;

    opacity:.85;

    line-height:1.7;

    margin-bottom:22px;
}

.payment-meta{
    display:flex;

    justify-content:space-between;

    font-size:12px;

    opacity:.7;
}

/* PAYMENT METHOD */

.payment-methods-modern{
    padding:0 20px;
}

.payment-card{
    display:flex;
    align-items:center;

    gap:16px;

    background:white;

    border-radius:30px;

    padding:18px;

    margin-bottom:16px;

    box-shadow:
        0 15px 30px rgba(15,23,42,.06);

    transition:.3s;

    cursor:pointer;
}

.payment-card.active{
    border:
        2px solid var(--primary);

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 40px rgba(17,197,217,.16);
}

.payment-icon{
    width:58px;
    height:58px;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            #11C5D9,
            #0EA5B7
        );

    color:white;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:22px;
}

.payment-info{
    flex:1;
}

.payment-info strong{
    display:block;

    margin-bottom:6px;
}

.payment-info p{
    font-size:12px;

    color:var(--text-soft);
}

.payment-check{
    width:34px;
    height:34px;

    border-radius:50%;

    background:#ECFDF5;

    color:#059669;

    display:flex;
    justify-content:center;
    align-items:center;
}

/* INSURANCE */

.insurance-modern{
    padding:0 20px;
}

.insurance-item{
    display:flex;
    align-items:center;

    gap:16px;

    background:white;

    border-radius:30px;

    padding:18px;

    margin-bottom:16px;

    box-shadow:
        0 15px 30px rgba(15,23,42,.06);
}

.insurance-icon{
    width:58px;
    height:58px;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            #0F172A,
            #111827
        );

    color:white;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:22px;
}

.insurance-info{
    flex:1;
}

.insurance-info strong{
    display:block;

    margin-bottom:6px;
}

.insurance-info p{
    font-size:12px;

    color:var(--text-soft);
}

.insurance-status{
    background:#ECFDF5;

    color:#059669;

    padding:8px 12px;

    border-radius:30px;

    font-size:10px;
    font-weight:800;
}

/* AI BILLING */

.ai-billing-card{
    margin:20px;

    padding:24px;

    border-radius:34px;

    background:
        linear-gradient(
            135deg,
            #11C5D9,
            #0EA5B7
        );

    color:white;

    display:flex;

    gap:18px;

    align-items:center;

    box-shadow:
        0 25px 50px rgba(17,197,217,.22);
}

.ai-billing-icon{
    width:64px;
    height:64px;

    border-radius:22px;

    background:
        rgba(255,255,255,.18);

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:26px;
}

/* PROMO */

.promo-modern{
    margin:20px;

    padding:22px;

    border-radius:30px;

    background:white;

    display:flex;
    justify-content:space-between;
    align-items:center;

    box-shadow:
        0 15px 30px rgba(15,23,42,.06);
}

.promo-modern small{
    display:block;

    margin-bottom:8px;

    color:var(--text-soft);
}

.promo-modern strong{
    font-size:24px;
}

.promo-modern button{
    border:none;

    background:
        linear-gradient(
            135deg,
            #11C5D9,
            #0EA5B7
        );

    color:white;

    padding:12px 20px;

    border-radius:18px;

    font-weight:700;

    cursor:pointer;
}

/* SUBSCRIPTION */

.subscription-modern{
    margin:20px;

    padding:28px;

    border-radius:36px;

    background:
        linear-gradient(
            135deg,
            #0F172A,
            #111827
        );

    color:white;
}

.subscription-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:18px;
}

.subscription-top small{
    opacity:.7;
}

.subscription-top h3{
    font-size:30px;
    margin-top:6px;
}

.subscription-badge{
    background:
        linear-gradient(
            135deg,
            #F59E0B,
            #FBBF24
        );

    color:#111827;

    padding:10px 14px;

    border-radius:30px;

    font-size:11px;
    font-weight:900;
}

.subscription-modern p{
    line-height:1.8;

    opacity:.85;

    margin-bottom:24px;
}

.subscription-price{
    font-size:34px;
    font-weight:900;

    margin-bottom:22px;
}

.subscription-btn{
    width:100%;

    border:none;

    background:white;

    color:#0F172A;

    padding:18px;

    border-radius:22px;

    font-weight:800;

    cursor:pointer;
}

/* SUMMARY */

.payment-summary{
    margin:20px;

    padding:24px;

    border-radius:34px;

    background:white;

    box-shadow:
        0 15px 30px rgba(15,23,42,.06);
}

.summary-row{
    display:flex;
    justify-content:space-between;

    margin-bottom:16px;
}

.summary-row span{
    color:var(--text-soft);
}

.summary-divider{
    height:1px;

    background:#E2E8F0;

    margin:20px 0;
}

.summary-row.total strong{
    font-size:28px;

    color:var(--primary);
}

.discount strong{
    color:#10B981;
}

/* PAY */

.pay-button-wrapper{
    padding:0 20px 30px;
}

.pay-button{
    width:100%;

    border:none;

    background:
        linear-gradient(
            135deg,
            #11C5D9,
            #0EA5B7
        );

    color:white;

    padding:22px;

    border-radius:26px;

    font-size:18px;
    font-weight:900;

    cursor:pointer;

    box-shadow:
        0 25px 50px rgba(17,197,217,.25);

    transition:.3s;
}

.pay-button:hover{
    transform:
        translateY(-4px);
}

/* AI PAGE */

.ai-page{
    background:
        linear-gradient(
            180deg,
            #06131A,
            #0F172A
        );

    color:white;
}

/* AI HEADER FIX */

.ai-header-modern{
    background:
        rgba(255,255,255,.92) !important;

    backdrop-filter:
        blur(20px);

    border-bottom:
        1px solid rgba(15,23,42,.04);
}

.ai-header-modern .back-btn{
    color:#6D28D9;
}

.ai-header-modern .logo{
    filter:none;
}

.ai-header-modern .ai-badge{
    background:
        linear-gradient(
            135deg,
            #11C5D9,
            #7BE0EA
        );

    color:white;

    border:none;
}

/* HERO */

.ai-hero{
    position:relative;

    margin:20px;

    padding:40px 30px;

    border-radius:38px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #0B1120,
            #111827
        );

    border:
        1px solid rgba(17,197,217,.12);

    box-shadow:
        0 30px 60px rgba(0,0,0,.35);
}

.ai-grid-bg{
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(17,197,217,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(17,197,217,.04) 1px,
            transparent 1px
        );

    background-size:30px 30px;
}

.ai-orb{
    position:absolute;

    width:280px;
    height:280px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(17,197,217,.35),
            transparent 70%
        );

    top:-100px;
    right:-80px;

    animation:
        orbFloat 6s infinite ease-in-out;
}

@keyframes orbFloat{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(15px);
    }

}

.ai-hero-content{
    position:relative;
    z-index:10;
}

.ai-hero small{
    color:#7BE0EA;

    letter-spacing:1px;

    font-size:11px;

    font-weight:700;
}

.ai-hero h2{
    font-size:38px;
    line-height:1.1;

    margin:20px 0;

    font-weight:900;
}

.ai-hero p{
    color:#CBD5E1;

    line-height:1.8;

    font-size:14px;

    margin-bottom:24px;
}

/* STATUS */

.ai-status-row{
    display:flex;

    gap:12px;
}

.status-chip{
    padding:10px 16px;

    border-radius:30px;

    font-size:11px;
    font-weight:800;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.08);
}

.status-chip.active{
    background:
        linear-gradient(
            135deg,
            #11C5D9,
            #0EA5B7
        );

    color:white;
}

/* METRICS */

.ai-metrics-grid{
    display:flex;

    gap:14px;

    padding:0 20px;
}

.ai-metric-card{
    flex:1;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.06);

    border-radius:30px;

    padding:24px 14px;

    text-align:center;

    backdrop-filter:blur(18px);
}

.ai-metric-card i{
    font-size:24px;

    color:#11C5D9;

    margin-bottom:14px;
}

.ai-metric-card strong{
    display:block;

    font-size:28px;
    font-weight:900;

    margin-bottom:8px;
}

.ai-metric-card span{
    font-size:11px;

    color:#CBD5E1;
}

/* ENGINE */

.ai-engine-card{
    margin:20px;

    padding:28px;

    border-radius:36px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(20px);
}

.engine-header{
    display:flex;

    gap:18px;

    align-items:center;

    margin-bottom:24px;
}

.engine-icon{
    width:68px;
    height:68px;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            #11C5D9,
            #0EA5B7
        );

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:28px;
}

.engine-header p{
    color:#94A3B8;

    margin-top:6px;
}

/* DISPATCH */

.dispatch-stats{
    display:flex;

    gap:14px;

    margin-bottom:24px;
}

.dispatch-stat{
    flex:1;

    background:
        rgba(255,255,255,.05);

    border-radius:22px;

    padding:18px;

    text-align:center;
}

.dispatch-stat small{
    display:block;

    color:#94A3B8;

    margin-bottom:8px;
}

.dispatch-stat strong{
    font-size:24px;

    color:#11C5D9;
}

/* PROCESS */

.ai-process{
    display:flex;

    gap:14px;

    margin-bottom:16px;
}

.ai-process i{
    color:#10B981;

    margin-top:3px;
}

.ai-process span{
    color:#CBD5E1;

    line-height:1.7;
}

/* MATCH */

.doctor-match-card{
    display:flex;

    gap:18px;

    align-items:center;

    background:
        rgba(255,255,255,.04);

    border-radius:28px;

    padding:18px;
}

.doctor-match-card img{
    width:90px;
    height:90px;

    border-radius:26px;

    object-fit:cover;
}

.doctor-info{
    flex:1;
}

.doctor-info strong{
    display:block;

    margin-bottom:8px;

    font-size:18px;
}

.doctor-info p{
    color:#94A3B8;

    margin-bottom:14px;

    font-size:13px;
}

.match-bar{
    height:12px;

    background:#1E293B;

    border-radius:30px;

    overflow:hidden;

    margin-bottom:10px;
}

.match-fill{
    width:98%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            #11C5D9,
            #7BE0EA
        );

    border-radius:30px;
}

/* PREDICTIVE */

.predictive-item{
    display:flex;

    gap:18px;

    align-items:flex-start;

    background:
        rgba(255,255,255,.04);

    border-radius:26px;

    padding:18px;

    margin-bottom:16px;
}

.predictive-item i{
    font-size:24px;

    color:#11C5D9;
}

.predictive-item strong{
    display:block;

    margin-bottom:8px;
}

.predictive-item p{
    color:#94A3B8;

    font-size:13px;
}

/* FUTURE */

.future-ai-card{
    margin:20px;

    padding:30px;

    border-radius:36px;

    background:
        linear-gradient(
            135deg,
            #11C5D9,
            #0EA5B7
        );

    color:white;
}

.future-header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:26px;
}

.future-header span{
    background:
        rgba(255,255,255,.18);

    padding:10px 14px;

    border-radius:30px;

    font-size:11px;
    font-weight:800;
}

.future-grid-modern{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;
}

.future-box{
    background:
        rgba(255,255,255,.12);

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:24px;

    padding:22px 18px;

    text-align:center;
}

.future-box i{
    font-size:26px;

    margin-bottom:14px;
}

/* IMPACT */

.impact-modern{
    margin:20px;

    padding:28px;

    border-radius:36px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(18px);
}

.impact-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:24px;
}

.impact-top span{
    background:#10B981;

    color:white;

    padding:8px 14px;

    border-radius:30px;

    font-size:10px;
    font-weight:800;
}

.impact-grid{
    display:grid;

    gap:14px;
}

.impact-item{
    background:
        rgba(255,255,255,.05);

    border-radius:22px;

    padding:18px;

    color:#CBD5E1;
}

/* AI BOTTOM NAV FIX */

.ai-page .bottom-nav{
    background:
        rgba(255,255,255,.96) !important;

    backdrop-filter:
        blur(20px);

    border-top:
        1px solid rgba(15,23,42,.05);

    box-shadow:
        0 -10px 30px rgba(15,23,42,.06);
}

.ai-page .nav-item{
    color:#94A3B8;
}

.ai-page .nav-item.active{
    color:#11C5D9;
}

.ai-page .nav-item i{
    opacity:.9;
}

/* HERO IMAGE BACKGROUND */

.hero-health-bg{
    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            rgba(17, 197, 217, 0),
            rgba(14, 166, 183, 0)
        ),
        url('gambar/hero.png');

    background-size:cover;
    background-position:center;

    background-repeat:no-repeat;

    min-height:260px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

/* DARK OVERLAY */

.hero-health-bg::before{
    content:'';

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(15,23,42,.45),
            rgba(15,23,42,.08)
        );

    z-index:1;
}

/* CONTENT ABOVE */

.hero-health-bg h2,
.hero-health-bg p,
.hero-health-bg .hero-buttons{
    position:relative;
    z-index:2;
}

/* TEXT */

.hero-health-bg h2{
    color:white;

    font-size:34px;

    line-height:1.15;

    margin-bottom:16px;
}

.hero-health-bg p{
    color:
        rgba(255,255,255,.92);

    max-width:90%;

    line-height:1.7;
}

/* BUTTONS */

.hero-health-bg .btn-primary{
    background:white;

    color:#0EA5B7;
}

.hero-health-bg .btn-secondary{
    background:
        rgba(255,255,255,.16);

    border:
        1px solid rgba(255,255,255,.22);

    color:white;

    backdrop-filter:blur(10px);
}

/* =========================================================
   TABLET RESPONSIVE
========================================================= */

@media (min-width: 768px){

    body{
        display:flex;
        justify-content:center;

        background:
            linear-gradient(
                135deg,
                #E6F7FA,
                #F8FAFC
            );
    }

    .mobile-container{
        width:100%;
        max-width:720px;

        min-height:100vh;

        border-radius:40px;

        overflow:hidden;

        box-shadow:
            0 30px 80px rgba(15,23,42,.12);
    }

    /* HEADER */

    .header{
        padding:
            28px 32px;
    }

    .logo{
        height:46px;
    }

    /* HERO */

    .welcome-card,
    .booking-hero,
    .family-hero,
    .payment-hero,
    .ai-hero,
    .emergency-hero,
    .emr-hero{
        margin:28px;

        border-radius:40px;
    }

    .hero-health-bg{
        min-height:340px;
    }

    .hero-health-bg h2{
        font-size:46px;
    }

    .hero-health-bg p{
        font-size:16px;
    }

    /* GRID SYSTEM */

    .quick-actions,
    .stats-row,
    .vital-signs,
    .live-metrics,
    .health-summary,
    .ai-metrics-grid{
        gap:20px;

        padding-left:28px;
        padding-right:28px;
    }

    /* SERVICE GRID */

    .service-grid{
        grid-template-columns:
            repeat(3,1fr);

        padding:
            0 28px;
    }

    /* CARD */

    .service-card,
    .stat-card,
    .metric-card,
    .summary-card,
    .vital-card,
    .ai-metric-card{
        border-radius:32px;
    }

    /* SECTION */

    .section-title{
        padding:
            0 28px;
    }

    /* BOOKING */

    .booking-form{
        margin:28px;
    }

    /* TRACKING MAP */

    .tracking-map-container{
        height:520px;
    }

    /* AI PAGE */

    .future-grid-modern{
        grid-template-columns:
            repeat(3,1fr);
    }

    /* EMR */

    .medicine-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    /* PAYMENT */

    .payment-methods-modern,
    .insurance-modern{
        padding:
            0 28px;
    }

    /* BOTTOM NAV */

    .bottom-nav{
        left:50%;

        transform:
            translateX(-50%);

        width:100%;
        max-width:720px;
    }

}

/* =========================================================
   LARGE TABLET / SMALL LAPTOP
========================================================= */

@media (min-width: 1024px){

    .mobile-container{
        max-width:900px;
    }

    /* HERO */

    .hero-health-bg{
        min-height:400px;
    }

    .hero-health-bg h2{
        font-size:56px;

        max-width:70%;
    }

    .hero-health-bg p{
        max-width:60%;

        font-size:17px;
    }

    /* GRID */

    .service-grid{
        grid-template-columns:
            repeat(4,1fr);
    }

    .quick-actions{
        grid-template-columns:
            repeat(4,1fr);
    }

    /* AI */

    .future-grid-modern{
        grid-template-columns:
            repeat(3,1fr);
    }

    /* TRACKING */

    .tracking-map-container{
        height:620px;
    }

}