@import url("school-management.css");

:root {
    --hms-blue: #137cf5;
    --hms-navy: #071f3b;
    --hms-green: #0bbb82;
    --hms-purple: #7b59f6;
    --hms-orange: #ff8a34;
    --hms-coral: #ff5d7c;
    --hms-teal: #0db2bd;
    --hms-line: #dce9f6;
    --hms-soft: #f3f9ff;
    --hms-shadow: 0 24px 60px rgba(11, 59, 106, .12);
}

.hospital-page main {
    overflow: hidden;
}

.hospital-page .infotattwa-navbar {
    background: #fff !important;
    box-shadow: 0 3px 18px rgba(7, 31, 59, .08);
}

.hospital-heading {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-width: 960px;
}

.hospital-heading h2 {
    margin-bottom: 15px;
}

.hospital-reveal {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .7s ease, transform .7s ease;
}

.hospital-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Hero */
.hospital-hero {
    background:
        radial-gradient(circle at 90% 12%, rgba(19, 124, 245, .16), transparent 31%),
        linear-gradient(118deg, #fff 6%, #f1f8ff 62%, #e9f5ff 100%);
    min-height: 810px;
    padding: 165px 0 65px;
    position: relative;
}

.hospital-hero::before {
    background-image: linear-gradient(rgba(19, 124, 245, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(19, 124, 245, .04) 1px, transparent 1px);
    background-size: 32px 32px;
    content: "";
    inset: 0;
    mask-image: linear-gradient(90deg, transparent, #000 50%, transparent 90%);
    position: absolute;
}

.hospital-orb {
    border: 1px solid rgba(19, 124, 245, .13);
    border-radius: 50%;
    position: absolute;
}

.orb-one { height: 540px; right: -210px; top: 100px; width: 540px; }
.orb-two { bottom: 10px; height: 240px; left: -125px; width: 240px; }

.hospital-hero-grid {
    align-items: center;
    display: grid;
    gap: 55px;
    grid-template-columns: .78fr 1.22fr;
    position: relative;
    z-index: 2;
}

.hospital-hero-copy h1 {
    color: var(--hms-navy);
    font-size: clamp(48px, 5.4vw, 74px);
    font-weight: 850;
    letter-spacing: -3.1px;
    line-height: 1;
    margin: 0 0 20px;
}

.hospital-hero-copy h1 span {
    background: linear-gradient(125deg, var(--hms-blue), #05a8df);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: block;
}

.hospital-hero-copy h2 {
    color: #183954;
    font-size: 23px;
    font-weight: 750;
    line-height: 1.35;
    margin: 0 0 18px;
}

.hospital-hero-copy > p {
    color: #4d627c;
    font-size: 16px;
    line-height: 1.75;
    margin: 0 0 28px;
}

.hospital-demo-note {
    align-items: center;
    display: flex;
    font-size: 11px !important;
    gap: 7px;
    margin-top: 17px !important;
}

.hospital-hero-visual {
    max-width: 100%;
    min-height: 525px;
    min-width: 0;
    perspective: 1300px;
    position: relative;
}

.hospital-laptop {
    background: #0a2745;
    border: 9px solid #0a2745;
    border-radius: 22px;
    box-shadow: 0 38px 82px rgba(5, 36, 68, .28);
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 42px;
    transform: rotateY(-5deg) rotateX(2deg);
    width: 94%;
}

.hospital-laptop-bar {
    align-items: center;
    background: #fff;
    display: flex;
    gap: 5px;
    height: 28px;
    padding: 0 12px;
}

.hospital-laptop-bar span {
    background: #dfe8f1;
    border-radius: 50%;
    height: 7px;
    width: 7px;
}

.hospital-laptop-bar small {
    color: #8192a5;
    font-size: 8px;
    font-weight: 800;
    margin-left: auto;
}

.hospital-dashboard {
    background: #f4f8fd;
    display: grid;
    grid-template-columns: 120px 1fr;
    min-height: 415px;
}

.hospital-sidebar {
    background: #082642;
    padding: 20px 10px;
}

.hospital-sidebar b {
    color: #fff;
    display: block;
    font-size: 13px;
    margin: 0 7px 20px;
}

.hospital-sidebar b i {
    color: #48b4ff;
    margin-right: 4px;
}

.hospital-sidebar a {
    align-items: center;
    border-radius: 7px;
    color: #abc0d3;
    display: flex;
    font-size: 8px;
    gap: 7px;
    margin-bottom: 4px;
    padding: 7px;
}

.hospital-sidebar a.active {
    background: var(--hms-blue);
    color: #fff;
}

.hospital-dashboard-main {
    min-width: 0;
    padding: 22px 18px;
}

.hospital-dashboard-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.hospital-dashboard-head > div {
    display: flex;
    flex-direction: column;
}

.hospital-dashboard-head small {
    color: #899bad;
    font-size: 8px;
}

.hospital-dashboard-head strong {
    font-size: 14px;
}

.hospital-dashboard-head > span {
    align-items: center;
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 6px 14px rgba(10, 49, 85, .08);
    display: flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.hospital-stat-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, 1fr);
}

.hospital-stat-grid article {
    background: #fff;
    border: 1px solid #e4edf7;
    border-radius: 10px;
    display: grid;
    grid-template-columns: auto 1fr;
    padding: 10px;
}

.hospital-stat-grid i {
    grid-row: 1 / 3;
    margin-right: 7px;
}

.hospital-stat-grid small {
    color: #8193a6;
    font-size: 7px;
}

.hospital-stat-grid strong {
    font-size: 15px;
}

.hospital-dashboard-lower {
    display: grid;
    gap: 11px;
    grid-template-columns: 1.45fr .75fr;
    margin-top: 12px;
}

.hospital-dashboard-lower article {
    background: #fff;
    border: 1px solid #e4edf7;
    border-radius: 11px;
    padding: 13px;
}

.hospital-bars-card > div:first-child {
    display: flex;
    font-size: 9px;
    justify-content: space-between;
}

.hospital-bars-card small {
    color: #8c9cad;
    font-size: 7px;
}

.hospital-mini-bars {
    align-items: flex-end;
    border-bottom: 1px solid #dce6ef;
    display: flex;
    gap: 10px;
    height: 130px;
    justify-content: space-around;
    padding: 15px 12px 0;
}

.hospital-mini-bars span {
    animation: hospital-grow 1.1s ease both;
    background: linear-gradient(#42adff, var(--hms-blue));
    border-radius: 4px 4px 0 0;
    height: var(--bar);
    width: 17px;
}

.hospital-activity-card > b {
    display: block;
    font-size: 9px;
    margin-bottom: 11px;
}

.hospital-activity-card p {
    align-items: center;
    display: flex;
    font-size: 7px;
    gap: 7px;
    line-height: 1.2;
    margin: 0 0 11px;
}

.hospital-activity-card p i {
    align-items: center;
    background: #eaf4ff;
    border-radius: 7px;
    color: var(--hms-blue);
    display: flex;
    height: 25px;
    justify-content: center;
    width: 25px;
}

.hospital-activity-card p span {
    display: flex;
    flex-direction: column;
}

.hospital-activity-card p small {
    color: #8ca0b4;
    font-size: 6px;
}

.hospital-phone {
    background: #fff;
    border: 7px solid #09233f;
    border-radius: 25px;
    bottom: 20px;
    box-shadow: 0 24px 55px rgba(3, 28, 55, .3);
    color: #17344e;
    min-height: 305px;
    padding: 30px 12px 13px;
    position: absolute;
    right: -8px;
    width: 155px;
    z-index: 3;
}

.hospital-phone-notch {
    background: #09233f;
    border-radius: 0 0 10px 10px;
    height: 17px;
    left: 50%;
    position: absolute;
    top: -1px;
    transform: translateX(-50%);
    width: 55px;
}

.hospital-phone > small {
    color: #8396aa;
    display: block;
    font-size: 7px;
}

.hospital-phone > strong {
    display: block;
    font-size: 12px;
    margin-bottom: 15px;
}

.hospital-phone > div:nth-of-type(2) {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(2, 1fr);
}

.hospital-phone > div span {
    align-items: center;
    background: #f1f7fd;
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    font-size: 6px;
    gap: 5px;
    padding: 10px 3px;
}

.hospital-phone > div i {
    color: var(--hms-blue);
    font-size: 16px;
}

.hospital-phone > b {
    display: block;
    font-size: 8px;
    margin: 15px 0 7px;
}

.hospital-phone > p {
    background: #f6f9fc;
    border-radius: 6px;
    color: #516a82;
    font-size: 6px;
    margin: 0 0 5px;
    padding: 6px;
}

.hospital-phone > p i {
    color: var(--hms-blue);
    font-style: normal;
    font-weight: 800;
    margin-right: 4px;
}

.hospital-float {
    align-items: center;
    animation: hospital-float 5s ease-in-out infinite;
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(19, 124, 245, .13);
    border-radius: 13px;
    box-shadow: 0 18px 45px rgba(17, 65, 111, .16);
    display: flex;
    font-size: 9px;
    gap: 8px;
    padding: 9px 12px;
    position: absolute;
    z-index: 4;
}

.hospital-float .hr-icon {
    border-radius: 9px;
    font-size: 14px;
    height: 30px;
    width: 30px;
}

.float-care { right: 10px; top: 0; }
.float-connected { animation-delay: -2s; bottom: 0; left: -20px; }

.hospital-hero-benefits {
    border-top: 1px solid rgba(19, 124, 245, .16);
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 40px;
    padding-top: 25px;
    position: relative;
    z-index: 2;
}

.hospital-hero-benefits span {
    align-items: center;
    color: #23425e;
    display: flex;
    font-size: 12px;
    font-weight: 800;
    gap: 9px;
}

.hospital-hero-benefits i {
    color: var(--hms-blue);
    font-size: 20px;
}

/* Cards and explorer */
.hospital-feature-grid {
    display: grid;
    gap: 17px;
    grid-template-columns: repeat(4, 1fr);
}

.hospital-feature-grid .hr-card {
    min-height: 210px;
}

.hospital-explorer {
    background: linear-gradient(180deg, #fff, #f4f9ff);
}

.hospital-explorer-shell {
    background: #fff;
    border: 1px solid var(--hms-line);
    border-radius: 24px;
    box-shadow: var(--hms-shadow);
    overflow: hidden;
}

.hospital-tabs {
    background: #f4f8fd;
    border-bottom: 1px solid var(--hms-line);
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 14px;
    scrollbar-width: none;
}

.hospital-tabs button {
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: #526a83;
    flex: 1 0 auto;
    font-size: 10px;
    font-weight: 800;
    padding: 13px 14px;
    text-transform: uppercase;
}

.hospital-tabs button.active {
    background: var(--hms-blue);
    box-shadow: 0 8px 18px rgba(19, 124, 245, .22);
    color: #fff;
}

.hospital-tab-panel {
    align-items: center;
    display: grid;
    gap: 50px;
    grid-template-columns: .75fr 1.25fr;
    min-height: 430px;
    padding: 45px;
    transition: opacity .18s ease, transform .18s ease;
}

.hospital-tab-panel.is-switching {
    opacity: .25;
    transform: translateY(7px);
}

.hospital-tab-copy > small {
    color: var(--hms-blue);
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-top: 18px;
    text-transform: uppercase;
}

.hospital-tab-copy h3 {
    font-size: 29px;
    font-weight: 800;
    line-height: 1.15;
    margin: 8px 0 13px;
}

.hospital-tab-copy p {
    color: #4d627b;
    font-size: 14px;
    line-height: 1.65;
}

.hospital-tab-copy ul {
    margin-top: 18px;
}

.hospital-tab-copy li {
    color: #35516d;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 9px;
}

.hospital-tab-copy li i {
    color: var(--hms-green);
    margin-right: 7px;
}

.hospital-data-table {
    background: #f5f8fc;
    border: 1px solid #dce7f3;
    border-radius: 17px;
    box-shadow: 0 18px 40px rgba(15, 58, 100, .11);
    padding: 22px;
}

.hospital-table-toolbar {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr auto;
    margin-bottom: 18px;
}

.hospital-table-toolbar span {
    background: #fff;
    border: 1px solid #dce7f3;
    border-radius: 7px;
    color: #7c8fa2;
    font-size: 9px;
    padding: 9px;
}

.hospital-table-toolbar button {
    background: var(--hms-blue);
    border: 0;
    border-radius: 7px;
    color: #fff;
    font-size: 9px;
    padding: 10px;
}

.hospital-table-head,
.hospital-table-row {
    align-items: center;
    display: grid;
    grid-template-columns: 1.3fr 1fr .55fr;
    padding: 10px;
}

.hospital-table-head {
    color: #8294a7;
    font-size: 9px;
    font-weight: 700;
}

.hospital-table-row {
    background: #fff;
    border-radius: 9px;
    font-size: 10px;
    margin-bottom: 8px;
}

.hospital-table-row b {
    align-items: center;
    display: flex;
    gap: 8px;
}

.hospital-table-row b i {
    align-items: center;
    background: #e8f3ff;
    border-radius: 50%;
    color: var(--hms-blue);
    display: flex;
    font-size: 8px;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.hospital-table-row em {
    background: #e4f8ef;
    border-radius: 20px;
    color: #079764;
    font-size: 8px;
    font-style: normal;
    padding: 4px 8px;
    text-align: center;
}

.hospital-sample-label {
    color: #8495a7;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Patient, appointments and team */
.hospital-patient-grid,
.hospital-appointment-grid,
.hospital-team-grid,
.hospital-billing-grid {
    align-items: center;
    display: grid;
    gap: 75px;
    grid-template-columns: 1fr 1fr;
}

.hospital-patient-ui,
.hospital-calendar,
.hospital-doctor-ui,
.hospital-finance-ui {
    background: #fff;
    border: 1px solid var(--hms-line);
    border-radius: 23px;
    box-shadow: var(--hms-shadow);
    padding: 29px;
}

.hospital-patient-head {
    align-items: center;
    display: flex;
    gap: 13px;
}

.hospital-patient-head > span {
    align-items: center;
    background: linear-gradient(135deg, var(--hms-blue), var(--hms-purple));
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-size: 16px;
    font-weight: 800;
    height: 55px;
    justify-content: center;
    width: 55px;
}

.hospital-patient-head > div {
    display: flex;
    flex-direction: column;
}

.hospital-patient-head small {
    color: #8193a5;
    font-size: 10px;
}

.hospital-patient-head em {
    background: #e3f8ee;
    border-radius: 30px;
    color: #079764;
    font-size: 9px;
    font-style: normal;
    margin-left: auto;
    padding: 6px 10px;
}

.hospital-patient-kpis {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    margin: 24px 0;
}

.hospital-patient-kpis article {
    background: #f3f8fd;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    padding: 15px;
}

.hospital-patient-kpis small {
    color: #75899d;
    font-size: 9px;
}

.hospital-patient-kpis strong {
    font-size: 12px;
    margin-top: 3px;
}

.hospital-record-list,
.hospital-schedule {
    display: grid;
    gap: 8px;
}

.hospital-record-list > b,
.hospital-schedule > b {
    font-size: 12px;
    margin-bottom: 4px;
}

.hospital-record-list span,
.hospital-schedule span {
    align-items: center;
    background: #f8fbff;
    border: 1px solid #e4edf6;
    border-radius: 9px;
    color: #405a73;
    display: flex;
    font-size: 10px;
    padding: 10px;
}

.hospital-record-list span > i {
    color: var(--hms-blue);
    font-size: 18px;
    margin-right: 10px;
}

.hospital-record-list span small {
    color: #8799ab;
    font-size: 8px;
    margin-left: auto;
}

.hospital-check-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
}

.hospital-check-grid span {
    color: #294963;
    font-size: 13px;
    font-weight: 700;
}

.hospital-check-grid i {
    align-items: center;
    background: #e1f8ef;
    border-radius: 50%;
    color: var(--hms-green);
    display: inline-flex;
    height: 22px;
    justify-content: center;
    margin-right: 7px;
    width: 22px;
}

.hospital-booking-flow {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.hospital-booking-flow span {
    align-items: center;
    background: #fff;
    border: 1px solid var(--hms-line);
    border-radius: 11px;
    display: flex;
    flex-direction: column;
    font-size: 9px;
    font-weight: 800;
    gap: 6px;
    min-width: 82px;
    padding: 12px 8px;
}

.hospital-booking-flow span i {
    color: var(--hms-blue);
    font-size: 20px;
}

.hospital-booking-flow > i {
    color: var(--hms-blue);
}

.hospital-calendar-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.hospital-calendar-head span {
    color: #75899d;
    font-size: 10px;
}

.hospital-calendar-days,
.hospital-calendar-grid {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(7, 1fr);
    margin-top: 18px;
}

.hospital-calendar-days span {
    color: #8092a5;
    font-size: 8px;
    text-align: center;
}

.hospital-calendar-grid span {
    align-items: center;
    background: #f4f8fc;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    font-size: 9px;
    height: 50px;
    justify-content: center;
}

.hospital-calendar-grid span.has-appointment {
    background: #e8f3ff;
    color: var(--hms-blue);
    font-weight: 800;
}

.hospital-calendar-grid small {
    font-size: 6px;
    margin-top: 3px;
}

.hospital-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 20px 0;
}

.hospital-status-row span {
    border-radius: 20px;
    font-size: 8px;
    padding: 5px 8px;
}

.confirmed { background: #e4f8ef; color: #078c60; }
.pending { background: #fff0e1; color: #c76618; }
.completed { background: #e8f3ff; color: #146dcc; }
.cancelled { background: #ffebef; color: #d64964; }

.hospital-doctor-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.hospital-doctor-head > div {
    display: flex;
    flex-direction: column;
}

.hospital-doctor-head small {
    color: #8497aa;
    font-size: 9px;
}

.hospital-doctor-head b {
    font-size: 18px;
}

.hospital-doctor-head > span {
    align-items: center;
    background: #edf6ff;
    border-radius: 50%;
    color: var(--hms-blue);
    display: flex;
    height: 35px;
    justify-content: center;
    width: 35px;
}

.hospital-doctor-stats {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    margin: 24px 0;
}

.hospital-doctor-stats article {
    background: #f3f8fd;
    border-radius: 12px;
    display: grid;
    grid-template-columns: auto 1fr;
    padding: 14px;
}

.hospital-doctor-stats i {
    color: var(--hms-blue);
    font-size: 20px;
    grid-row: 1 / 3;
    margin-right: 8px;
}

.hospital-doctor-stats b {
    font-size: 17px;
}

.hospital-doctor-stats small {
    color: #8396a9;
    font-size: 7px;
}

.hospital-schedule span i {
    color: var(--hms-blue);
    font-style: normal;
    font-weight: 800;
    margin-right: 10px;
}

.hospital-schedule span em {
    color: var(--hms-green);
    font-size: 8px;
    font-style: normal;
    margin-left: auto;
}

.hospital-mini-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
}

.hospital-mini-grid article {
    align-items: center;
    background: #fff;
    border: 1px solid var(--hms-line);
    border-radius: 14px;
    display: flex;
    font-size: 11px;
    gap: 12px;
    padding: 14px;
}

.hospital-mini-grid .hr-icon {
    border-radius: 10px;
    font-size: 18px;
    height: 42px;
    width: 42px;
}

/* Journey and ecosystem */
.hospital-journey {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    position: relative;
}

.hospital-journey::before {
    background: linear-gradient(90deg, var(--hms-blue), var(--hms-green));
    content: "";
    height: 3px;
    left: 5%;
    position: absolute;
    right: 5%;
    top: 33px;
}

.hospital-journey article {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: center;
}

.hospital-journey article > span {
    align-items: center;
    background: #fff;
    border: 2px solid #9dccff;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(19, 124, 245, .13);
    color: var(--hms-blue);
    display: flex;
    font-size: 19px;
    height: 65px;
    justify-content: center;
    margin-bottom: 15px;
    transition: .3s ease;
    width: 65px;
    z-index: 2;
}

.hospital-journey article:hover > span {
    background: var(--hms-blue);
    color: #fff;
    transform: translateY(-5px);
}

.hospital-journey b {
    font-size: 10px;
}

.hospital-journey small {
    color: #75879a;
    font-size: 7px;
    margin-top: 3px;
}

.hospital-ecosystem-section,
.hospital-analytics,
.hospital-security,
.hospital-workflow,
.hospital-transform {
    background: var(--hms-navy);
    color: #fff;
}

.hospital-ecosystem-section h2,
.hospital-ecosystem-section p,
.hospital-analytics h2,
.hospital-analytics p,
.hospital-security h2,
.hospital-security p,
.hospital-workflow h2,
.hospital-transform h2 {
    color: #fff;
}

.hospital-ecosystem {
    height: 670px;
    margin: 0 auto;
    max-width: 1050px;
    position: relative;
}

.hospital-eco-ring {
    animation: hospital-spin 28s linear infinite;
    border: 1px dashed rgba(90, 184, 255, .55);
    border-radius: 50%;
    height: 490px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 490px;
}

.hospital-eco-ring::before,
.hospital-eco-ring::after {
    background: #40b5ff;
    border-radius: 50%;
    box-shadow: 0 0 18px #40b5ff;
    content: "";
    height: 8px;
    left: 50%;
    position: absolute;
    top: -4px;
    transform: translateX(-50%);
    width: 8px;
}

.hospital-eco-ring::after {
    bottom: -4px;
    left: 50%;
    right: auto;
    top: auto;
}

.hospital-eco-center {
    align-items: center;
    background: linear-gradient(145deg, #168cff, #125cd9);
    border: 15px solid rgba(76, 172, 255, .17);
    border-radius: 50%;
    box-shadow: 0 0 60px rgba(37, 150, 255, .35);
    display: flex;
    flex-direction: column;
    height: 215px;
    justify-content: center;
    left: 50%;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 215px;
    z-index: 2;
}

.hospital-eco-center i {
    font-size: 36px;
    margin-bottom: 10px;
}

.hospital-eco-center strong {
    color: #fff;
    font-size: 16px;
    line-height: 1.25;
}

.hospital-eco-item {
    align-items: center;
    background: #112f4e;
    border: 1px solid #2b4c6c;
    border-radius: 50px;
    color: #fff;
    display: flex;
    gap: 12px;
    min-width: 205px;
    padding: 11px 15px;
    position: absolute;
    text-align: left;
    transition: .3s ease;
}

.hospital-eco-item:hover,
.hospital-eco-item:focus {
    background: #124e80;
    border-color: #42aaff;
    color: #fff;
    transform: translateY(-4px) scale(1.03);
}

.hospital-eco-item > i {
    align-items: center;
    background: #174976;
    border-radius: 50%;
    color: #4eb3ff;
    display: flex;
    font-size: 18px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.hospital-eco-item span {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 800;
}

.hospital-eco-item small {
    color: #aac5dd;
    font-size: 8px;
    font-weight: 500;
    margin-top: 2px;
}

.he-1 { left: 50%; top: 0; transform: translateX(-50%); }
.he-1:hover { transform: translateX(-50%) translateY(-4px) scale(1.03); }
.he-2 { left: 105px; top: 90px; }
.he-3 { right: 105px; top: 90px; }
.he-4 { left: 0; top: 270px; }
.he-5 { right: 0; top: 270px; }
.he-6 { bottom: 100px; left: 70px; }
.he-7 { bottom: 100px; right: 70px; }
.he-8 { bottom: 0; left: 230px; }
.he-9 { bottom: 0; right: 230px; }

/* Operations and billing */
.hospital-operations-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, 1fr);
}

.hospital-operation-card {
    background: #fff;
    border: 1px solid var(--hms-line);
    border-radius: 20px;
    box-shadow: 0 16px 38px rgba(13, 56, 98, .07);
    min-height: 410px;
    padding: 28px;
}

.hospital-operation-card h3 {
    font-size: 21px;
    margin: 20px 0 9px;
}

.hospital-operation-card > p {
    color: #526981;
    font-size: 13px;
    line-height: 1.6;
}

.hospital-queue,
.hospital-stock-list {
    display: grid;
    gap: 9px;
    margin-top: 22px;
}

.hospital-queue span,
.hospital-stock-list span {
    align-items: center;
    background: #f4f8fc;
    border: 1px solid #e1ebf5;
    border-radius: 10px;
    display: grid;
    grid-template-columns: auto 1fr;
    padding: 12px;
}

.hospital-queue b {
    color: var(--hms-blue);
    font-size: 12px;
    margin-right: 12px;
}

.hospital-queue small,
.hospital-stock-list small {
    color: #71869b;
    font-size: 9px;
}

.hospital-stock-list span {
    grid-template-columns: 1fr 1fr auto;
}

.hospital-stock-list b {
    font-size: 11px;
}

.hospital-stock-list em {
    background: #e2f8ef;
    border-radius: 20px;
    color: #078d60;
    font-size: 8px;
    font-style: normal;
    padding: 5px 8px;
}

.hospital-bed-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 22px;
}

.hospital-bed-grid span {
    align-items: center;
    border: 1px solid #dfebf5;
    border-radius: 11px;
    display: grid;
    font-size: 11px;
    grid-template-columns: auto 1fr;
    padding: 14px;
}

.hospital-bed-grid i {
    font-size: 20px;
    grid-row: 1 / 3;
    margin-right: 9px;
}

.hospital-bed-grid small {
    font-size: 8px;
}

.hospital-bed-grid .available { background: #e7f9f1; color: #07875d; }
.hospital-bed-grid .occupied { background: #ffebef; color: #ce4963; }
.hospital-bed-grid .reserved { background: #f1ecff; color: #6247c6; }
.hospital-bed-grid .cleaning { background: #fff1e3; color: #c76617; }

.hospital-lab-flow {
    display: grid;
    gap: 7px;
    margin-top: 22px;
}

.hospital-lab-flow span {
    background: #eaf8fa;
    border: 1px solid #cdecef;
    border-radius: 9px;
    color: #07838b;
    font-size: 10px;
    font-weight: 800;
    padding: 11px;
    text-align: center;
}

.hospital-lab-flow i {
    color: var(--hms-teal);
    text-align: center;
}

.hospital-billing-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hospital-billing-features span {
    background: #fff;
    border: 1px solid var(--hms-line);
    border-radius: 30px;
    color: #3d5873;
    font-size: 10px;
    font-weight: 700;
    padding: 8px 12px;
}

.hospital-finance-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.hospital-finance-head span {
    color: #7a8ea2;
    font-size: 9px;
}

.hospital-finance-kpis {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(4, 1fr);
    margin: 22px 0;
}

.hospital-finance-kpis article {
    background: #f3f8fd;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 12px;
}

.hospital-finance-kpis small {
    color: #7a8ea2;
    font-size: 7px;
}

.hospital-finance-kpis strong {
    font-size: 14px;
}

.hospital-finance-bars {
    align-items: flex-end;
    border-bottom: 1px solid #dce6ef;
    display: flex;
    gap: 15px;
    height: 185px;
    justify-content: center;
    padding: 15px;
}

.hospital-finance-bars span {
    background: linear-gradient(#9b7bff, var(--hms-purple));
    border-radius: 5px 5px 0 0;
    height: var(--amount);
    width: 30px;
}

/* Analytics, departments, experience */
.hospital-analytics .hospital-heading {
    align-items: flex-end;
    flex-direction: row;
    justify-content: space-between;
    max-width: none;
    width: 100%;
}

.hospital-analytics .hospital-heading > div {
    max-width: 760px;
}

.hospital-period {
    background: #fff;
    border-radius: 9px;
    color: #526b84;
    font-size: 11px;
    font-weight: 700;
    padding: 10px 14px;
}

.hospital-data-note {
    color: #b2cadf !important;
    font-size: 10px !important;
    margin: -25px 0 28px;
}

.hospital-kpi-grid {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(4, 1fr);
}

.hospital-kpi-grid article {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    display: grid;
    grid-template-columns: auto 1fr;
    padding: 22px;
}

.hospital-kpi-grid .hr-icon {
    grid-row: 1 / 4;
    margin-right: 14px;
}

.hospital-kpi-grid small { color: #b1c7db; font-size: 10px; }
.hospital-kpi-grid strong { color: #fff; font-size: 27px; line-height: 1.2; }
.hospital-kpi-grid em { color: #7e9bb5; font-size: 8px; font-style: normal; }

.hospital-chart-grid {
    display: grid;
    gap: 17px;
    grid-template-columns: 1.4fr .6fr;
    margin-top: 17px;
}

.hospital-chart-grid article {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    min-height: 330px;
    padding: 24px;
}

.hospital-chart-grid article > div:first-child {
    display: flex;
    justify-content: space-between;
}

.hospital-chart-grid article > div:first-child b { color: #fff; }
.hospital-chart-grid article > div:first-child small { color: #87a3bd; }
.hospital-chart-grid svg { height: 240px; margin-top: 22px; width: 100%; }
.hospital-chart-area { fill: url(#hospitalFill); }
.hospital-chart-line { fill: none; stroke: #38a8ff; stroke-dasharray: 800; stroke-dashoffset: 800; stroke-linecap: round; stroke-width: 5; }
.is-visible .hospital-chart-line { animation: hospital-draw 1.8s ease forwards; }

.hospital-donut {
    align-items: center;
    background: conic-gradient(#258df5 0 34%, #12bd88 34% 62%, #805cf7 62% 84%, #ff8a34 84%);
    border-radius: 50%;
    display: flex;
    height: 165px;
    justify-content: center;
    margin: 30px auto 20px;
    position: relative;
    width: 165px;
}

.hospital-donut::after {
    background: #102b47;
    border-radius: 50%;
    content: "";
    height: 105px;
    position: absolute;
    width: 105px;
}

.hospital-donut strong {
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 20px;
    position: relative;
    text-align: center;
    z-index: 2;
}

.hospital-donut small { color: #96b1c8; font-size: 8px; }
.hospital-chart-grid ul { display: grid; gap: 8px; }
.hospital-chart-grid li { color: #b5cadc; display: flex; font-size: 9px; }
.hospital-chart-grid li i { background: var(--hms-blue); border-radius: 50%; height: 7px; margin: 3px 7px 0 0; width: 7px; }
.hospital-chart-grid li:nth-child(2) i { background: var(--hms-green); }
.hospital-chart-grid li:nth-child(3) i { background: var(--hms-purple); }
.hospital-chart-grid li:nth-child(4) i { background: var(--hms-orange); }
.hospital-chart-grid li b { margin-left: auto; }

.hospital-department-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(6, 1fr);
}

.hospital-department-grid article {
    border: 1px solid var(--hms-line);
    border-radius: 16px;
    min-height: 180px;
    padding: 21px;
    transition: .3s ease;
}

.hospital-department-grid article:hover {
    box-shadow: var(--hms-shadow);
    transform: translateY(-6px);
}

.hospital-department-grid h3 {
    font-size: 14px;
    margin: 17px 0 6px;
}

.hospital-department-grid p {
    font-size: 10px;
    margin: 0;
}

.hospital-dual {
    align-items: stretch;
    display: grid;
    gap: 34px;
    grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr);
}

.hospital-dual > article {
    align-items: center;
    background: #fff;
    border: 1px solid var(--hms-line);
    border-radius: 21px;
    box-shadow: 0 18px 45px rgba(12, 55, 98, .08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 280px;
    padding: 30px;
    text-align: center;
}

.hospital-dual h3 {
    font-size: 22px;
    margin: 15px 0;
}

.hospital-dual article > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.hospital-dual article > div span {
    background: #eff6fd;
    border-radius: 30px;
    color: #48627c;
    font-size: 10px;
    font-weight: 700;
    padding: 8px 11px;
}

.hospital-dual-center {
    align-items: center;
    align-self: center;
    background: linear-gradient(135deg, var(--hms-blue), #10a7da);
    border-radius: 50%;
    box-shadow: 0 0 0 17px rgba(19, 124, 245, .09), 0 20px 45px rgba(19, 124, 245, .25);
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 210px;
    justify-content: center;
    text-align: center;
    width: 210px;
}

.hospital-dual-center i { font-size: 34px; }
.hospital-dual-center b { color: #fff; font-size: 16px; margin-top: 9px; }
.hospital-dual-center small { color: rgba(255,255,255,.8); font-size: 8px; margin-top: 5px; }

/* Devices, security and lower sections */
.hospital-anywhere {
    background: linear-gradient(105deg, #f9fcff, #e9f6ff);
}

.hospital-anywhere-grid {
    align-items: center;
    display: grid;
    gap: 65px;
    grid-template-columns: .82fr 1.18fr;
}

.hospital-anywhere-grid > * {
    min-width: 0;
}

.hospital-device-stage {
    height: 420px;
    min-width: 0;
    position: relative;
}

.hospital-device-desktop {
    background: #092540;
    border: 8px solid #092540;
    border-radius: 15px;
    height: 275px;
    left: 30px;
    position: absolute;
    top: 35px;
    width: 455px;
}

.hospital-device-desktop::after {
    background: #173c61;
    bottom: -55px;
    content: "";
    height: 55px;
    left: 48%;
    position: absolute;
    width: 18px;
}

.hospital-device-desktop::before {
    background: #173c61;
    border-radius: 20px;
    bottom: -65px;
    content: "";
    height: 12px;
    left: 37%;
    position: absolute;
    width: 130px;
}

.hospital-device-tablet {
    background: #102d4c;
    border: 6px solid #102d4c;
    border-radius: 17px;
    bottom: 13px;
    height: 238px;
    position: absolute;
    right: 16px;
    width: 168px;
    z-index: 2;
}

.hospital-device-mobile {
    background: #061b31;
    border: 6px solid #061b31;
    border-radius: 21px;
    bottom: 3px;
    height: 215px;
    left: 0;
    position: absolute;
    width: 110px;
    z-index: 3;
}

.hospital-mini-ui {
    background: #fff;
    border-radius: 7px;
    height: 100%;
    overflow: hidden;
    padding: 18px;
}

.hospital-mini-ui b { display: block; font-size: 12px; }
.hospital-mini-ui span { background: #edf4fb; border-radius: 5px; display: block; height: 32px; margin-top: 9px; }
.hospital-device-desktop .hospital-mini-ui > div { align-items: flex-end; display: flex; gap: 15px; height: 180px; justify-content: center; }
.hospital-device-desktop .hospital-mini-ui > div span { background: linear-gradient(#42abff, var(--hms-blue)); height: 42%; width: 45px; }
.hospital-device-desktop .hospital-mini-ui > div span:nth-child(2) { height: 70%; }
.hospital-device-desktop .hospital-mini-ui > div span:nth-child(3) { height: 55%; }
.hospital-device-desktop .hospital-mini-ui > div span:nth-child(4) { height: 85%; }
.hospital-device-mobile .hospital-mini-ui { padding: 12px 7px; text-align: center; }
.hospital-device-mobile .hospital-mini-ui b { font-size: 8px; }
.hospital-device-mobile .hospital-mini-ui i { color: var(--hms-blue); display: block; font-size: 25px; margin: 12px; }
.hospital-device-mobile .hospital-mini-ui span { align-items: center; display: flex; font-size: 6px; height: 22px; justify-content: center; }
.hospital-device-stage > div > small { bottom: -28px; color: #64798e; font-size: 9px; font-weight: 800; left: 50%; position: absolute; transform: translateX(-50%); }

.hospital-security-grid {
    align-items: center;
    display: grid;
    gap: 75px;
    grid-template-columns: .8fr 1.2fr;
}

.hospital-role-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hospital-role-pills span {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 30px;
    color: #c2d7e9;
    font-size: 9px;
    font-weight: 700;
    padding: 8px 11px;
}

.hospital-security-list {
    display: grid;
    gap: 13px;
    grid-template-columns: repeat(2, 1fr);
}

.hospital-security-list article {
    align-items: flex-start;
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 15px;
    display: flex;
    gap: 13px;
    padding: 19px;
}

.hospital-security-list article:last-child { grid-column: 1 / 3; }
.hospital-security-list article > i { align-items: center; background: rgba(48,164,255,.14); border-radius: 10px; color: #4db5ff; display: flex; font-size: 20px; height: 44px; justify-content: center; width: 44px; }
.hospital-security-list h3 { color: #fff; font-size: 13px; margin: 0 0 5px; }
.hospital-security-list p { color: #abc3d8; font-size: 10px; line-height: 1.5; margin: 0; }

.hospital-flow {
    align-items: center;
    display: flex;
    justify-content: center;
}

.hospital-flow span {
    align-items: center;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-size: 10px;
    font-weight: 800;
    height: 82px;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    width: 82px;
}

.hospital-flow i {
    background: rgba(107,194,255,.25);
    height: 2px;
    overflow: hidden;
    position: relative;
    width: 42px;
}

.hospital-flow i::after {
    animation: hospital-flow 2s linear infinite;
    background: #52c5ff;
    border-radius: 50%;
    box-shadow: 0 0 10px #52c5ff;
    content: "";
    height: 6px;
    left: -6px;
    position: absolute;
    top: -2px;
    width: 6px;
}

.hospital-custom-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
}

.hospital-custom-grid span {
    align-items: center;
    background: #fff;
    border: 1px solid var(--hms-line);
    border-radius: 13px;
    color: #31506d;
    display: flex;
    font-size: 12px;
    font-weight: 800;
    gap: 11px;
    padding: 15px;
}

.hospital-custom-grid i {
    align-items: center;
    background: #eaf4ff;
    border-radius: 9px;
    color: var(--hms-blue);
    display: flex;
    font-size: 17px;
    height: 37px;
    justify-content: center;
    width: 37px;
}

.hospital-before-after {
    align-items: stretch;
    display: grid;
    gap: 25px;
    grid-template-columns: 1fr auto 1fr;
    margin: 0 auto;
    max-width: 1000px;
}

.hospital-before-after article { border-radius: 21px; padding: 34px; }
.hospital-before { background: #152d45; border: 1px solid #314961; }
.hospital-after { background: linear-gradient(145deg, #0b4371, #0c6bb1); border: 1px solid #218cd2; }
.hospital-before-after small { color: #70baff; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.hospital-before-after h3 { color: #fff; font-size: 22px; margin: 8px 0 21px; }
.hospital-before-after li { color: #c4d6e6; font-size: 12px; margin-bottom: 12px; }
.hospital-before li i { color: #ff718a; margin-right: 8px; }
.hospital-after li i { color: #54e1ae; margin-right: 8px; }

.hospital-transform-arrow {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}

.hospital-transform-arrow i { align-items: center; background: var(--hms-blue); border-radius: 50%; display: flex; font-size: 24px; height: 56px; justify-content: center; width: 56px; }
.hospital-transform-arrow span { color: #aac4da; font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }

.hospital-faq-list {
    display: grid;
    gap: 11px;
    margin: 0 auto;
    max-width: 950px;
}

.hospital-faq-list details { border: 1px solid var(--hms-line); border-radius: 13px; overflow: hidden; }
.hospital-faq-list details[open] { border-color: #8fc5ff; box-shadow: 0 12px 30px rgba(19,124,245,.08); }
.hospital-faq-list summary { align-items: center; cursor: pointer; display: flex; font-size: 14px; font-weight: 800; justify-content: space-between; padding: 18px 21px; }
.hospital-faq-list summary::marker { content: ""; }
.hospital-faq-list summary i { color: var(--hms-blue); transition: .3s ease; }
.hospital-faq-list details[open] summary i { transform: rotate(45deg); }
.hospital-faq-list p { border-top: 1px solid #e8eff7; font-size: 12px; line-height: 1.7; margin: 0; padding: 16px 21px; }

.hospital-final-wrap {
    background: #edf6ff;
    padding: 0 0 90px;
}

.hospital-final-cta {
    align-items: center;
    background: linear-gradient(120deg, #071f3b, #0b4779);
    border-radius: 28px;
    color: #fff;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    min-height: 430px;
    overflow: hidden;
    padding: 62px;
    position: relative;
}

.hospital-final-cta::before {
    background: radial-gradient(circle, rgba(70,171,255,.24), transparent 65%);
    content: "";
    height: 600px;
    position: absolute;
    right: -180px;
    top: -220px;
    width: 600px;
}

.hospital-final-cta h2,
.hospital-final-cta p { color: #fff; }
.hospital-final-cta > div { position: relative; z-index: 2; }
.hospital-btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.hospital-btn-ghost:hover, .hospital-btn-ghost:focus { background: var(--hms-blue); border-color: var(--hms-blue); color: #fff; transform: translateY(-3px); }

.hospital-final-points {
    align-items: center;
    color: #c2d6e9;
    display: flex;
    font-size: 10px;
    font-weight: 700;
    gap: 11px;
    margin-top: 23px;
}

.hospital-final-points i { background: #57b8ff; border-radius: 50%; height: 4px; width: 4px; }

.hospital-final-visual {
    align-items: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 275px;
    text-align: center;
}

.hospital-final-visual > i { color: #fff; font-size: 82px; }
.hospital-final-visual > div { display: grid; gap: 7px; grid-template-columns: repeat(3,18px); margin: -43px 0 28px; position: relative; }
.hospital-final-visual > div span { background: #52b7ff; border-radius: 3px; height: 18px; }
.hospital-final-visual b { color: #fff; font-size: 13px; }

@keyframes hospital-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes hospital-grow { from{height:0} to{height:var(--bar)} }
@keyframes hospital-draw { to{stroke-dashoffset:0} }
@keyframes hospital-spin { to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes hospital-flow { to{left:100%} }

@media (max-width: 1199px) {
    .hospital-hero-grid { grid-template-columns: .85fr 1.15fr; }
    .hospital-dashboard { grid-template-columns: 100px 1fr; }
    .hospital-feature-grid { grid-template-columns: repeat(3,1fr); }
    .hospital-journey { gap: 12px; grid-template-columns: repeat(5,1fr); row-gap: 35px; }
    .hospital-journey::before { display: none; }
    .hospital-department-grid { grid-template-columns: repeat(4,1fr); }
    .hospital-flow span { height: 72px; width: 72px; }
    .hospital-flow i { width: 24px; }
}

@media (max-width: 991px) {
    .hospital-hero { padding-top: 145px; }
    .hospital-hero-grid,
    .hospital-patient-grid,
    .hospital-appointment-grid,
    .hospital-team-grid,
    .hospital-billing-grid,
    .hospital-anywhere-grid,
    .hospital-security-grid { grid-template-columns: 1fr; }
    .hospital-hero-copy { max-width: 680px; }
    .hospital-hero-visual { margin-top: 20px; }
    .hospital-feature-grid { grid-template-columns: repeat(2,1fr); }
    .hospital-tab-panel { gap: 30px; grid-template-columns: 1fr; padding: 34px; }
    .hospital-ecosystem { transform: scale(.9); }
    .hospital-kpi-grid { grid-template-columns: repeat(2,1fr); }
    .hospital-chart-grid { grid-template-columns: 1fr; }
    .hospital-department-grid { grid-template-columns: repeat(3,1fr); }
    .hospital-dual { gap: 28px; grid-template-areas:"patient staff" "hub hub"; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .hospital-dual > article:first-child { grid-area: patient; }
    .hospital-dual > article:last-child { grid-area: staff; }
    .hospital-dual-center { grid-area: hub; justify-self: center; }
    .hospital-device-stage { margin: 0 auto; max-width: 620px; width: 100%; }
    .hospital-security-grid { gap: 45px; }
    .hospital-flow { display: grid; gap: 12px; grid-template-columns: repeat(4,1fr); }
    .hospital-flow span { border-radius: 14px; height: 65px; width: 100%; }
    .hospital-flow i { display: none; }
    .hospital-final-cta { grid-template-columns: 1fr; }
    .hospital-final-visual { display: none; }
}

@media (max-width: 767px) {
    .hospital-page .hr-section { padding: 65px 0; }
    .hospital-heading { margin-bottom: 34px; }
    .hospital-hero { min-height: 0; padding: 125px 0 55px; }
    .hospital-hero-copy h1 { font-size: 45px; letter-spacing: -2px; }
    .hospital-hero-copy h2 { font-size: 20px; }
    .hospital-hero-visual { height: 410px; margin-inline: auto; min-height: 410px; width: 100%; }
    .hospital-laptop { border-width: 5px; box-sizing: border-box; left: 0; max-width: 100%; top: 14px; transform: none; width: 100%; }
    .hospital-laptop-bar { height: 25px; padding-inline: 9px; }
    .hospital-dashboard { grid-template-columns: 1fr; min-height: 320px; }
    .hospital-sidebar { display: none; }
    .hospital-dashboard-main { min-width: 0; padding: 13px 12px 16px; }
    .hospital-dashboard-head { margin-bottom: 12px; }
    .hospital-dashboard-head strong { font-size: 13px; }
    .hospital-stat-grid { gap: 7px; grid-template-columns: repeat(2,1fr); }
    .hospital-stat-grid article { min-width: 0; padding: 9px; }
    .hospital-stat-grid small { font-size: 6.5px; }
    .hospital-stat-grid strong { font-size: 13px; }
    .hospital-dashboard-lower { grid-template-columns: 1fr; }
    .hospital-mini-bars { height: 95px; padding-right: 58px; }
    .hospital-activity-card { display: none; }
    .hospital-phone { border-width: 5px; bottom: 3px; min-height: 190px; padding: 27px 8px 10px; right: 7px; width: 92px; }
    .hospital-phone > strong { font-size: 10px; line-height: 1.2; margin-bottom: 11px; }
    .hospital-phone > div span { font-size: 5px; gap: 4px; padding: 7px 2px; }
    .hospital-phone > div i { font-size: 14px; }
    .hospital-phone > b, .hospital-phone > p { display: none; }
    .hospital-float { display: none; }
    .hospital-hero-benefits { grid-template-columns: repeat(2,1fr); margin-top: 12px; }
    .hospital-hero-benefits span { font-size: 10px; }
    .hospital-feature-grid,
    .hospital-security-list,
    .hospital-department-grid { grid-template-columns: 1fr; }
    .hospital-feature-grid .hr-card { min-height: 0; }
    .hospital-tab-panel { padding: 22px; }
    .hospital-tab-copy h3 { font-size: 25px; }
    .hospital-table-toolbar { grid-template-columns: 1fr auto; }
    .hospital-table-toolbar span { display: none; }
    .hospital-table-head, .hospital-table-row { grid-template-columns: 1.4fr .8fr; }
    .hospital-table-head span:last-child, .hospital-table-row em { display: none; }
    .hospital-patient-ui, .hospital-calendar, .hospital-doctor-ui, .hospital-finance-ui { padding: 20px; }
    .hospital-patient-kpis, .hospital-doctor-stats, .hospital-finance-kpis { grid-template-columns: 1fr; }
    .hospital-check-grid, .hospital-mini-grid { grid-template-columns: 1fr; }
    .hospital-booking-flow { display: grid; grid-template-columns: 1fr; }
    .hospital-booking-flow > i { transform: rotate(90deg); text-align: center; }
    .hospital-calendar-grid span { height: 43px; }
    .hospital-journey { grid-template-columns: repeat(2,1fr); }
    .hospital-ecosystem { display:grid; gap:10px; grid-template-columns:1fr; height:auto; margin-top:30px; transform:none; }
    .hospital-eco-ring { display:none; }
    .hospital-eco-center { height:165px; margin:0 auto 10px; position:static; transform:none; width:165px; }
    .hospital-eco-item,
    .he-1,.he-2,.he-3,.he-4,.he-5,.he-6,.he-7,.he-8,.he-9 { left:auto; min-width:0; position:static; right:auto; top:auto; transform:none; width:100%; }
    .he-1:hover { transform: translateY(-4px); }
    .hospital-operations-grid { grid-template-columns:1fr; }
    .hospital-operation-card { min-height:0; padding:22px; }
    .hospital-bed-grid { grid-template-columns:1fr; }
    .hospital-stock-list span { grid-template-columns:1fr auto; }
    .hospital-stock-list small { display:none; }
    .hospital-analytics .hospital-heading { align-items:flex-start; flex-direction:column; }
    .hospital-period { margin-top:12px; }
    .hospital-data-note { margin-top:-14px; }
    .hospital-kpi-grid { grid-template-columns:1fr; }
    .hospital-chart-grid article { min-height:290px; }
    .hospital-dual { gap:22px; grid-template-areas:"patient" "hub" "staff"; grid-template-columns:1fr; }
    .hospital-dual > article { min-height:240px; padding:25px 18px; }
    .hospital-dual-center { height:165px; width:165px; }
    .hospital-device-stage { height:330px; margin:0 auto; min-width:0; width:100%; }
    .hospital-device-desktop { border-width:6px; height:220px; left:50%; top:24px; transform:translateX(-50%); width:calc(100% - 34px); }
    .hospital-device-desktop::after { bottom:-42px; height:42px; width:14px; }
    .hospital-device-desktop::before { bottom:-51px; left:34%; width:32%; }
    .hospital-device-desktop .hospital-mini-ui > div { gap:8px; height:140px; }
    .hospital-device-desktop .hospital-mini-ui > div span { width:13%; }
    .hospital-device-tablet { bottom:18px; height:185px; right:3px; width:118px; }
    .hospital-device-mobile { bottom:15px; height:175px; left:3px; width:88px; }
    .hospital-security-list article:last-child { grid-column:auto; }
    .hospital-flow { grid-template-columns:repeat(2,1fr); }
    .hospital-custom-grid { grid-template-columns:1fr; }
    .hospital-before-after { grid-template-columns:1fr; }
    .hospital-transform-arrow { min-height:85px; }
    .hospital-transform-arrow i { transform:rotate(90deg); }
    .hospital-final-wrap { padding-bottom:60px; }
    .hospital-final-cta { border-radius:20px; padding:36px 22px; }
    .hospital-final-points { flex-wrap:wrap; }
}

@media (max-width: 420px) {
    .hospital-hero-copy h1 { font-size:40px; }
    .hospital-hero-benefits { grid-template-columns:1fr; }
    .hospital-hero-visual { height:395px; min-height:395px; }
    .hospital-dashboard { min-height:307px; }
    .hospital-phone { bottom:6px; min-height:180px; right:5px; width:84px; }
    .hospital-device-stage { height:300px; }
    .hospital-device-desktop { height:200px; width:calc(100% - 20px); }
    .hospital-device-tablet { height:160px; width:100px; }
    .hospital-device-mobile { height:155px; width:80px; }
}

@media (prefers-reduced-motion: reduce) {
    .hospital-reveal { opacity:1; transform:none; }
}