:root {
     --primary: #0891B2;
     --primary-dark: #0E7490;
     --primary-deeper: #164E63;
     --primary-light: #ECFEFF;
     --primary-mid: #CFFAFE;
     --teal: #0D9488;
     --teal-light: #F0FDFA;
     --blue: #1E40AF;
     --blue-light: #EFF6FF;
     --red: #DC2626;
     --red-light: #FEF2F2;
     --amber: #D97706;
     --amber-light: #FFFBEB;
     --green: #059669;
     --green-light: #ECFDF5;
     --bg: #F8FAFC;
     --bg-white: #ffffff;
     --text: #0F172A;
     --text-muted: #64748B;
     --text-light: #94A3B8;
     --border: #E2E8F0;
     --shadow: 0 4px 24px rgba(8, 145, 178, .10);
     --shadow-lg: 0 10px 40px rgba(8, 145, 178, .15);
     --radius: 14px;
     --radius-sm: 8px;
 }

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

 html {
     scroll-behavior: smooth
 }

 body {
     font-family: 'Tajawal', sans-serif;
     background: var(--bg-white);
     color: var(--text);
     direction: rtl;
     overflow-x: hidden
 }

 .en {
     font-family: 'Roboto', sans-serif;
     font-weight: 600
 }

 .hero {
     background: linear-gradient(150deg, #0C4A6E 0%, #0891B2 55%, #0D9488 100%);
     padding: 65px clamp(16px, 4vw, 60px) 130px;
     position: relative;
     overflow: hidden
 }

 .hero-wave {
     position: absolute;
     bottom: -1px;
     left: 0;
     width: 100%;
     line-height: 0;
     z-index: 2;
     pointer-events: none
 }

 .hero-wave svg {
     display: block;
     width: 100%
 }

 .hero-particles {
     position: absolute;
     inset: 0;
     pointer-events: none;
     overflow: hidden
 }

 .hp {
     position: absolute;
     border-radius: 50%;
     background: rgba(255, 255, 255, .05)
 }

 .hp1 {
     width: 440px;
     height: 440px;
     top: -160px;
     left: -100px
 }

 .hp2 {
     width: 300px;
     height: 300px;
     top: 20%;
     right: -60px
 }

 .hp3 {
     width: 160px;
     height: 160px;
     bottom: 100px;
     left: 25%
 }

 .hp4 {
     width: 100px;
     height: 100px;
     top: 15%;
     right: 30%
 }

 .hp5 {
     width: 70px;
     height: 70px;
     top: 50%;
     left: 15%
 }

 .hero-grid {
     max-width: 1240px;
     margin: 0 auto;
     width: 100%;
     display: grid;
     grid-template-columns: 1fr 420px;
     gap: 56px;
     align-items: center;
     position: relative;
     z-index: 3
 }

 .hero-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(255, 255, 255, .15);
     border: 1px solid rgba(255, 255, 255, .25);
     backdrop-filter: blur(8px);
     color: #fff;
     padding: 7px 16px;
     border-radius: 50px;
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 22px
 }

 .hero-eyebrow svg {
     width: 14px;
     height: 14px;
     fill: rgba(255, 255, 255, .8)
 }

 .hero-h1 {
     font-size: clamp(30px, 3.8vw, 50px);
     font-weight: 900;
     color: #fff;
     line-height: 1.15;
     margin-bottom: 18px
 }

 .hero-h1 .hl {
     color: #ecfeff !important;
 }

 .hero-p {
     font-size: 15px;
     color: rgba(255, 255, 255, .88);
     line-height: 1.85;
     margin-bottom: 28px;
     max-width: 500px
 }

 .sectors-row {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 30px
 }

 .s-pill {
     display: flex;
     align-items: center;
     gap: 6px;
     background: rgba(255, 255, 255, .1);
     border: 1px solid rgba(255, 255, 255, .2);
     color: rgba(255, 255, 255, .92);
     padding: 6px 14px;
     border-radius: 50px;
     font-size: 13px;
     font-weight: 600
 }

 .s-pill svg {
     width: 13px;
     height: 13px;
     fill: none;
     stroke: #67E8F9;
     stroke-width: 2;
     flex-shrink: 0
 }

 .hero-actions {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     margin-bottom: 36px
 }

 .btn-hero-w {
     background: #fff;
     color: var(--primary-deeper);
     border: none;
     padding: 14px 28px;
     border-radius: 10px;
     font-size: 15px;
     font-weight: 700;
     cursor: pointer;
     font-family: 'Tajawal', sans-serif;
     display: flex;
     align-items: center;
     gap: 8px;
     transition: .2s;
     box-shadow: 0 4px 16px rgba(0, 0, 0, .15)
 }

 .btn-hero-w svg {
     width: 15px;
     height: 15px;
     stroke: currentColor;
     fill: none
 }

 .btn-hero-w:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, .2)
 }

 .btn-hero-ghost {
     background: rgba(255, 255, 255, .12);
     color: #fff;
     border: 1.5px solid rgba(255, 255, 255, .35);
     padding: 13px 26px;
     border-radius: 10px;
     font-size: 15px;
     font-weight: 700;
     cursor: pointer;
     font-family: 'Tajawal', sans-serif;
     transition: .2s
 }

 .btn-hero-ghost:hover {
     background: rgba(255, 255, 255, .22);
     border-color: rgba(255, 255, 255, .6)
 }

 .hero-nums {
     display: flex;
     gap: 28px;
     padding-top: 8px
 }

 .hn-val {
     font-size: 28px;
     font-weight: 900;
     color: #fff
 }

 .hn-lbl {
     font-size: 12px;
     color: rgba(255, 255, 255, .65);
     margin-top: 3px
 }

 .hn-sep {
     width: 1px;
     background: rgba(255, 255, 255, .18)
 }

 .hero-card-wrap {
     position: relative;
     z-index: 10;
     transform: translateY(50px)
 }

 .hero-card {
     background: #fff;
     border-radius: 20px;
     padding: 22px;
     box-shadow: 0 32px 80px rgba(0, 0, 0, .28), 0 8px 24px rgba(0, 0, 0, .14);
     overflow: hidden
 }

 .hc-mac {
     display: flex;
     gap: 5px;
     margin-bottom: 12px
 }

 .hc-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%
 }

 .hc-dot.r {
     background: #FF5F57
 }

 .hc-dot.y {
     background: #FEBC2E
 }

 .hc-dot.g {
     background: #28C840
 }

 .hc-label {
     font-size: 13px;
     font-weight: 700;
     color: var(--text);
     margin-bottom: 2px
 }

 .hc-sub {
     font-size: 11px;
     color: var(--text-muted);
     margin-bottom: 14px
 }

 .hc-duo {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 9px;
     margin-bottom: 11px
 }

 .hc-box {
     padding: 12px 10px;
     border-radius: 11px;
     text-align: center
 }

 .hc-box.b {
     background: var(--primary-light)
 }

 .hc-box.t {
     background: var(--teal-light)
 }

 .hc-box-icon svg {
     width: 20px;
     height: 20px;
     margin: 0 auto 4px;
     fill: none;
     stroke-width: 2
 }

 .hc-box.b .hc-box-icon svg {
     stroke: var(--primary)
 }

 .hc-box.t .hc-box-icon svg {
     stroke: var(--teal)
 }

 .hc-box-lbl {
     font-size: 11px;
     color: var(--text-muted)
 }

 .hc-box-val {
     font-size: 22px;
     font-weight: 800;
     color: var(--text)
 }

 .hc-revenue {
     background: linear-gradient(135deg, var(--primary-deeper), var(--primary));
     border-radius: 11px;
     padding: 14px 14px;
     color: #fff;
     margin-bottom: 11px
 }

 .hc-rev-lbl {
     font-size: 11px;
     opacity: .8;
     margin-bottom: 2px
 }

 .hc-rev-val {
     font-size: 24px;
     font-weight: 800
 }

 .hc-rev-chg {
     font-size: 11px;
     color: #A5F3FC;
     margin-top: 2px
 }

 .hc-div {
     height: 1px;
     background: var(--border);
     margin: 10px 0
 }

 .hc-sec-lbl {
     font-size: 11px;
     font-weight: 700;
     color: var(--text-muted);
     margin-bottom: 8px
 }

 .hc-rows {
     display: flex;
     flex-direction: column;
     gap: 6px
 }

 .hc-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 8px 10px;
     background: var(--bg);
     border-radius: 8px
 }

 .hc-rname {
     font-size: 11px;
     font-weight: 700
 }

 .hc-rmeta {
     font-size: 10px;
     color: var(--text-muted);
     margin-top: 2px
 }

 .hc-rright {
     display: flex;
     align-items: center;
     gap: 6px
 }

 .hc-rprice {
     font-size: 12px;
     font-weight: 700;
     color: var(--primary)
 }

 .pill {
     font-size: 10px;
     padding: 3px 8px;
     border-radius: 50px;
     font-weight: 600
 }

 .p-c {
     background: #ECFEFF;
     color: #0E7490
 }

 .p-w {
     background: #FFFBEB;
     color: #92400E
 }

 .p-d {
     background: #F0FDFA;
     color: #0F766E
 }

 .stats-strip {
     padding: 80px clamp(16px, 4vw, 60px) 36px;
     background: #fff;
     border-bottom: 1px solid var(--border)
 }

 .stats-strip-inner {
     max-width: 1240px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 0
 }

 .ss-item {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 0 24px;
     border-left: 1px solid var(--border)
 }

 .ss-item:last-child {
     border-left: none
 }

 .ss-icon {
     width: 48px;
     height: 48px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0
 }

 .ss-icon svg {
     width: 22px;
     height: 22px;
     fill: none;
     stroke-width: 2
 }

 .ss-val {
     font-size: 28px;
     font-weight: 900
 }

 .ss-lbl {
     font-size: 13px;
     color: var(--text-muted);
     margin-top: 2px
 }

 .sec-wrap {
     max-width: 1240px;
     margin: 0 auto;
     padding: 80px clamp(16px, 4vw, 60px)
 }

 .sec-center {
     text-align: center
 }

 .sec-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: 6px 16px;
     border-radius: 50px;
     font-size: 13px;
     font-weight: 700;
     margin-bottom: 14px
 }

 .sec-eyebrow svg {
     width: 14px;
     height: 14px;
     fill: none;
     stroke-width: 2
 }

 .sec-eyebrow.cy {
     background: var(--primary-light);
     color: var(--primary)
 }

 .sec-eyebrow.cy svg {
     stroke: var(--primary)
 }

 .sec-eyebrow.ct {
     background: var(--teal-light);
     color: var(--teal)
 }

 .sec-eyebrow.ct svg {
     stroke: var(--teal)
 }

 .sec-eyebrow.cg {
     background: var(--green-light);
     color: var(--green)
 }

 .sec-eyebrow.cg svg {
     stroke: var(--green)
 }

 .sec-eyebrow.ca {
     background: var(--amber-light);
     color: var(--amber)
 }

 .sec-eyebrow.ca svg {
     stroke: var(--amber)
 }

 .sec-h2 {
     font-size: clamp(24px, 3vw, 36px);
     font-weight: 900;
     line-height: 1.2;
     margin-bottom: 14px
 }

 .sec-h2 .c1 {
     color: var(--primary)
 }

 .sec-h2 .c2 {
     color: var(--teal)
 }

 .sec-h2 .c3 {
     color: var(--green)
 }

 .sec-p {
     font-size: 15px;
     color: var(--text-muted);
     line-height: 1.8;
     max-width: 640px
 }

 .sec-p.mx {
     margin: 0 auto
 }

 .services-bg {
     background: var(--bg);
     padding: 80px 0
 }

 .services-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px
 }

 .srv-card {
     background: #fff;
     border-radius: 16px;
     padding: 28px 24px;
     border: 1px solid var(--border);
     transition: .3s;
     position: relative;
     overflow: hidden
 }

 .srv-card::before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 3px;
     height: 0;
     background: linear-gradient(var(--primary), var(--teal));
     transition: .3s;
     border-radius: 0 16px 16px 0
 }

 .srv-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
     border-color: transparent
 }

 .srv-card:hover::before {
     height: 100%
 }

 .srv-icon {
     width: 56px;
     height: 56px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 16px
 }

 .srv-icon svg {
     width: 26px;
     height: 26px;
     fill: none;
     stroke-width: 2
 }

 .srv-title {
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 8px
 }

 .srv-desc {
     font-size: 13px;
     color: var(--text-muted);
     line-height: 1.7
 }

 .srv-link {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     font-size: 13px;
     font-weight: 700;
     color: var(--primary);
     margin-top: 14px;
     text-decoration: none;
     transition: .2s
 }

 .srv-link svg {
     width: 14px;
     height: 14px;
     fill: none;
     stroke: currentColor;
     stroke-width: 2.5;
     transition: .2s
 }

 .wave-div {
     width: 100%;
     overflow: hidden;
     line-height: 0
 }

 .wave-div svg {
     display: block;
     width: 100%
 }

 .detail-section {
     padding: 80px clamp(16px, 4vw, 60px)
 }

 .detail-grid {
     max-width: 1240px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 480px;
     gap: 70px;
     align-items: center
 }

 .detail-grid.rev {
     grid-template-columns: 480px 1fr
 }

 .detail-badge {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: 5px 14px;
     border-radius: 50px;
     font-size: 12px;
     font-weight: 700;
     margin-bottom: 16px
 }

 .detail-h2 {
     font-size: clamp(22px, 2.8vw, 32px);
     font-weight: 900;
     line-height: 1.25;
     margin-bottom: 14px
 }

 .detail-p {
     font-size: 14px;
     color: var(--text-muted);
     line-height: 1.9;
     margin-bottom: 24px
 }

 .feat-list {
     display: flex;
     flex-direction: column;
     gap: 14px;
     margin-bottom: 28px
 }

 .feat-item {
     display: flex;
     align-items: flex-start;
     gap: 12px
 }

 .feat-ic {
     width: 36px;
     height: 36px;
     border-radius: 9px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0
 }

 .feat-ic svg {
     width: 16px;
     height: 16px;
     fill: none;
     stroke-width: 2
 }

 .feat-txt h4 {
     font-size: 14px;
     font-weight: 700;
     margin-bottom: 3px
 }

 .feat-txt p {
     font-size: 13px;
     color: var(--text-muted);
     line-height: 1.6
 }

 .detail-btns {
     display: flex;
     gap: 10px;
     flex-wrap: wrap
 }

 .btn-solid {
     background: linear-gradient(135deg, var(--primary), var(--primary-dark));
     color: #fff;
     border: none;
     padding: 12px 24px;
     border-radius: 9px;
     font-size: 14px;
     font-weight: 700;
     cursor: pointer;
     font-family: 'Tajawal', sans-serif;
     transition: .2s;
     box-shadow: 0 4px 12px rgba(8, 145, 178, .25)
 }

 .btn-solid:hover {
     transform: translateY(-1px);
     box-shadow: 0 6px 18px rgba(8, 145, 178, .35)
 }

 .btn-line {
     background: transparent;
     color: var(--primary);
     border: 1.5px solid var(--primary);
     padding: 11px 22px;
     border-radius: 9px;
     font-size: 14px;
     font-weight: 700;
     cursor: pointer;
     font-family: 'Tajawal', sans-serif;
     transition: .2s
 }

 .btn-line:hover {
     background: var(--primary-light)
 }

 .mock-wrap {
     position: relative
 }

 .mock-card {
     background: #fff;
     border-radius: 18px;
     padding: 20px;
     box-shadow: var(--shadow-lg);
     border: 1px solid var(--border)
 }

 .mock-hdr {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 16px
 }

 .mock-title {
     font-size: 13px;
     font-weight: 700
 }

 .mock-badge-live {
     display: flex;
     align-items: center;
     gap: 5px;
     font-size: 11px;
     color: var(--green);
     font-weight: 600
 }

 .mock-live-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--green);
     animation: blink 1.5s infinite
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 1
     }

     50% {
         opacity: .3
     }
 }

 .appt-list {
     display: flex;
     flex-direction: column;
     gap: 7px
 }

 .appt-item {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px 12px;
     background: var(--bg);
     border-radius: 9px;
     border: 1px solid var(--border)
 }

 .appt-avatar {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     font-weight: 800;
     flex-shrink: 0
 }

 .appt-name {
     font-size: 12px;
     font-weight: 700
 }

 .appt-info {
     font-size: 10px;
     color: var(--text-muted);
     margin-top: 2px
 }

 .appt-right {
     margin-right: auto;
     text-align: left;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 4px
 }

 .appt-time {
     font-size: 11px;
     font-weight: 700;
     color: var(--primary)
 }

 .appt-sms {
     display: flex;
     align-items: center;
     gap: 4px;
     font-size: 10px;
     color: var(--green);
     font-weight: 600
 }

 .appt-sms svg {
     width: 10px;
     height: 10px;
     fill: none;
     stroke: var(--green);
     stroke-width: 2
 }

 .mock-stats-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
     margin-bottom: 12px
 }

 .msr-item {
     background: var(--bg);
     border-radius: 9px;
     padding: 10px;
     text-align: center
 }

 .msr-val {
     font-size: 18px;
     font-weight: 800
 }

 .msr-lbl {
     font-size: 10px;
     color: var(--text-muted);
     margin-top: 2px
 }

 .emr-card {
     background: #fff;
     border-radius: 18px;
     padding: 20px;
     box-shadow: var(--shadow-lg);
     border: 1px solid var(--border)
 }

 .emr-patient-row {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 14px;
     padding-bottom: 14px;
     border-bottom: 1px solid var(--border)
 }

 .emr-avatar {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     background: var(--primary-light);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     font-weight: 800;
     color: var(--primary)
 }

 .emr-name {
     font-size: 14px;
     font-weight: 700
 }

 .emr-meta {
     font-size: 11px;
     color: var(--text-muted);
     margin-top: 2px
 }

 .emr-id {
     font-size: 11px;
     font-weight: 600;
     background: var(--bg);
     padding: 4px 10px;
     border-radius: 50px;
     color: var(--text-muted);
     margin-right: auto
 }

 .vitals-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
     margin-bottom: 12px
 }

 .vital {
     background: var(--bg);
     border-radius: 8px;
     padding: 10px;
     text-align: center
 }

 .vital-v {
     font-size: 16px;
     font-weight: 800;
     color: var(--text)
 }

 .vital-l {
     font-size: 10px;
     color: var(--text-muted);
     margin-top: 2px
 }

 .hist-list {
     display: flex;
     flex-direction: column;
     gap: 6px
 }

 .hist-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 8px 10px;
     background: var(--bg);
     border-radius: 7px
 }

 .hist-diag {
     font-size: 11px;
     font-weight: 700
 }

 .hist-date {
     font-size: 10px;
     color: var(--text-muted);
     margin-top: 1px
 }

 .hist-st {
     font-size: 10px;
     padding: 3px 8px;
     border-radius: 50px;
     font-weight: 600
 }

 .st-done {
     background: var(--green-light);
     color: var(--green)
 }

 .st-ongoing {
     background: var(--amber-light);
     color: var(--amber)
 }

 .pharmacy-bg {
     background: var(--bg)
 }

 .pharma-grid {
     display: grid;
     grid-template-columns: 1fr 460px;
     gap: 70px;
     align-items: center;
     max-width: 1240px;
     margin: 0 auto;
     padding: 80px clamp(16px, 4vw, 60px)
 }

 .pharma-grid.rev {
     grid-template-columns: 460px 1fr
 }

 .inv-mock {
     background: #fff;
     border-radius: 18px;
     padding: 20px;
     box-shadow: var(--shadow-lg);
     border: 1px solid var(--border)
 }

 .inv-mock-hdr {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 14px
 }

 .inv-mock-title {
     font-size: 13px;
     font-weight: 700
 }

 .inv-status-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
     margin-bottom: 14px
 }

 .inv-s {
     border-radius: 9px;
     padding: 10px;
     text-align: center
 }

 .inv-s.r {
     background: var(--red-light)
 }

 .inv-s.a {
     background: var(--amber-light)
 }

 .inv-s.g {
     background: var(--green-light)
 }

 .inv-s-num {
     font-size: 20px;
     font-weight: 800
 }

 .inv-s.r .inv-s-num {
     color: var(--red)
 }

 .inv-s.a .inv-s-num {
     color: var(--amber)
 }

 .inv-s.g .inv-s-num {
     color: var(--green)
 }

 .inv-s-lbl {
     font-size: 10px;
     margin-top: 2px
 }

 .inv-s.r .inv-s-lbl {
     color: var(--red)
 }

 .inv-s.a .inv-s-lbl {
     color: var(--amber)
 }

 .inv-s.g .inv-s-lbl {
     color: var(--green)
 }

 .inv-item {
     background: var(--bg);
     border-radius: 9px;
     padding: 12px 14px;
     margin-bottom: 8px
 }

 .inv-item-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 5px
 }

 .inv-item-name {
     font-size: 12px;
     font-weight: 700
 }

 .inv-item-cat {
     font-size: 10px;
     color: var(--text-muted);
     background: #fff;
     border: 1px solid var(--border);
     padding: 2px 7px;
     border-radius: 50px
 }

 .inv-badges {
     display: flex;
     align-items: center;
     gap: 6px
 }

 .inv-units {
     font-size: 10px;
     color: var(--text-muted)
 }

 .inv-badge {
     font-size: 10px;
     padding: 2px 8px;
     border-radius: 50px;
     font-weight: 600
 }

 .ib-ok {
     background: var(--green-light);
     color: var(--green)
 }

 .ib-warn {
     background: var(--amber-light);
     color: var(--amber)
 }

 .ib-low {
     background: var(--red-light);
     color: var(--red)
 }

 .inv-bar-wrap {
     height: 4px;
     background: var(--border);
     border-radius: 4px;
     margin: 5px 0
 }

 .inv-bar {
     height: 4px;
     border-radius: 4px
 }

 .inv-meta {
     display: flex;
     justify-content: space-between;
     font-size: 10px;
     color: var(--text-muted);
     margin-top: 3px
 }

 .pos-mini {
     background: linear-gradient(135deg, var(--primary-deeper), var(--primary));
     border-radius: 12px;
     padding: 14px;
     margin-top: 12px
 }

 .pos-mini-title {
     font-size: 11px;
     font-weight: 700;
     color: #fff;
     opacity: .8;
     margin-bottom: 8px
 }

 .pos-mini-row {
     display: flex;
     justify-content: space-between;
     font-size: 12px;
     color: #fff;
     margin-bottom: 5px
 }

 .pos-mini-total {
     display: flex;
     justify-content: space-between;
     font-size: 14px;
     font-weight: 700;
     color: #67E8F9;
     border-top: 1px solid rgba(255, 255, 255, .2);
     padding-top: 8px;
     margin-top: 5px
 }

 .hr-mock {
     background: #fff;
     border-radius: 18px;
     padding: 20px;
     box-shadow: var(--shadow-lg);
     border: 1px solid var(--border)
 }

 .hr-top-stats {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
     margin-bottom: 14px
 }

 .hr-ts {
     border-radius: 9px;
     padding: 10px;
     text-align: center
 }

 .hr-ts.r {
     background: var(--primary-light)
 }

 .hr-ts.y {
     background: var(--amber-light)
 }

 .hr-ts.g {
     background: var(--green-light)
 }

 .hr-ts-num {
     font-size: 20px;
     font-weight: 800
 }

 .hr-ts.r .hr-ts-num {
     color: var(--primary)
 }

 .hr-ts.y .hr-ts-num {
     color: var(--amber)
 }

 .hr-ts.g .hr-ts-num {
     color: var(--green)
 }

 .hr-ts-lbl {
     font-size: 10px;
     color: var(--text-muted);
     margin-top: 2px
 }

 .hr-rec {
     display: flex;
     flex-direction: column;
     gap: 7px
 }

 .hr-rec-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 9px 12px;
     background: var(--bg);
     border-radius: 8px;
     border: 1px solid var(--border)
 }

 .hr-av {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     font-weight: 800;
     flex-shrink: 0;
     position: relative
 }

 .hr-online {
     position: absolute;
     bottom: -1px;
     right: -1px;
     width: 9px;
     height: 9px;
     border-radius: 50%;
     border: 2px solid #fff
 }

 .hr-on {
     background: var(--green)
 }

 .hr-brk {
     background: var(--amber)
 }

 .hr-rname {
     font-size: 12px;
     font-weight: 600
 }

 .hr-rrole {
     font-size: 10px;
     color: var(--text-muted);
     margin-top: 1px
 }

 .hr-rtime {
     font-size: 12px;
     font-weight: 700
 }

 .hr-rstatus {
     font-size: 10px;
     margin-top: 1px;
     font-weight: 600
 }

 .nfc-pulse {
     background: var(--blue-light);
     border: 1px solid #BFDBFE;
     border-radius: 10px;
     padding: 12px;
     text-align: center;
     margin-top: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px
 }

 .nfc-pulse svg {
     width: 28px;
     height: 28px;
     stroke: #1E40AF;
     fill: none;
     stroke-width: 1.5
 }

 .nfc-pulse-txt h5 {
     font-size: 12px;
     font-weight: 700;
     color: #1E40AF
 }

 .nfc-pulse-txt p {
     font-size: 11px;
     color: #3B82F6
 }

 .lab-mock {
     background: #fff;
     border-radius: 18px;
     padding: 20px;
     box-shadow: var(--shadow-lg);
     border: 1px solid var(--border)
 }

 .lab-list {
     display: flex;
     flex-direction: column;
     gap: 7px
 }

 .lab-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 12px;
     background: var(--bg);
     border-radius: 9px;
     border: 1px solid var(--border)
 }

 .lab-name {
     font-size: 12px;
     font-weight: 700
 }

 .lab-patient {
     font-size: 10px;
     color: var(--text-muted);
     margin-top: 1px
 }

 .lab-right {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 4px
 }

 .prio {
     font-size: 10px;
     padding: 2px 7px;
     border-radius: 50px;
     font-weight: 600
 }

 .prio.hi {
     background: var(--red-light);
     color: var(--red)
 }

 .prio.med {
     background: var(--amber-light);
     color: var(--amber)
 }

 .prio.lo {
     background: var(--green-light);
     color: var(--green)
 }

 .acc-mock {
     background: #fff;
     border-radius: 18px;
     padding: 20px;
     box-shadow: var(--shadow-lg);
     border: 1px solid var(--border)
 }

 .acc-kpis {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
     margin-bottom: 14px
 }

 .acc-kpi {
     background: var(--bg);
     border-radius: 9px;
     padding: 12px
 }

 .acc-kpi-val {
     font-size: 20px;
     font-weight: 800;
     color: var(--text)
 }

 .acc-kpi-chg {
     font-size: 11px;
     font-weight: 600;
     color: var(--green)
 }

 .acc-kpi-lbl {
     font-size: 10px;
     color: var(--text-muted);
     margin-top: 2px
 }

 .acc-bars {
     display: flex;
     align-items: flex-end;
     gap: 6px;
     height: 70px;
     margin: 12px 0
 }

 .acc-bar {
     flex: 1;
     border-radius: 3px 3px 0 0;
     background: var(--primary);
     opacity: .7;
     transition: height 1s;
     min-height: 4px
 }

 .acc-bar.active {
     opacity: 1;
     background: var(--primary)
 }

 .acc-days {
     display: flex;
     justify-content: space-between;
     font-size: 9px;
     color: var(--text-muted);
     margin-bottom: 10px
 }

 .tabs-section {
     background: var(--bg);
     padding: 56px clamp(16px, 4vw, 60px)
 }

 .tabs-inner {
     max-width: 960px;
     margin: 0 auto
 }

 .tabs-row {
     display: flex;
     gap: 0;
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 10px;
     padding: 3px;
     width: fit-content;
     margin: 0 auto 18px
 }

 .tab-btn {
     display: flex;
     align-items: center;
     gap: 7px;
     padding: 8px 18px;
     border-radius: 8px;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     background: transparent;
     border: none;
     color: var(--text-muted);
     font-family: 'Tajawal', sans-serif;
     transition: .2s
 }

 .tab-btn svg {
     width: 15px;
     height: 15px;
     fill: none;
     stroke: currentColor;
     stroke-width: 2
 }

 .tab-btn.active {
     background: linear-gradient(135deg, var(--primary), var(--primary-dark));
     color: #fff;
     box-shadow: 0 4px 12px rgba(8, 145, 178, .25)
 }

 .tab-panel {
     display: none
 }

 .tab-panel.active {
     display: block
 }

 .live-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: var(--primary-light);
     color: var(--primary);
     padding: 5px 12px;
     border-radius: 50px;
     font-size: 12px;
     font-weight: 600;
     margin-bottom: 12px
 }

 .live-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--primary);
     animation: blink 1.5s infinite
 }

 .panel-h {
     font-size: 15px;
     font-weight: 800;
     margin-bottom: 10px
 }

 .t-list {
     display: flex;
     flex-direction: column;
     gap: 6px
 }

 .t-row {
     background: #fff;
     border-radius: 8px;
     padding: 9px 12px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border: 1px solid var(--border);
     opacity: 0;
     transform: translateX(16px);
     transition: .4s
 }

 .t-row.vis {
     opacity: 1;
     transform: none
 }

 .t-rname {
     font-size: 12px;
     font-weight: 700
 }

 .t-rmeta {
     font-size: 10px;
     color: var(--text-muted);
     margin-top: 2px
 }

 .t-rright {
     display: flex;
     align-items: center;
     gap: 9px
 }

 .t-price {
     font-size: 12px;
     font-weight: 700;
     color: var(--primary)
 }

 .kgrid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px
 }

 .k-item {
     background: #fff;
     border-radius: 9px;
     padding: 11px 13px;
     border: 1px solid var(--border);
     display: flex;
     justify-content: space-between;
     align-items: center;
     opacity: 0;
     transform: translateY(10px);
     transition: .4s
 }

 .k-item.vis {
     opacity: 1;
     transform: none
 }

 .k-name {
     font-size: 12px;
     font-weight: 700
 }

 .k-info {
     font-size: 10px;
     color: var(--text-muted);
     margin-top: 2px
 }

 .k-right {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 5px
 }

 .a-stats {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 8px;
     margin-bottom: 14px
 }

 .a-item {
     background: #fff;
     border-radius: 9px;
     padding: 12px;
     text-align: center;
     border: 1px solid var(--border);
     opacity: 0;
     transform: translateY(10px);
     transition: .4s
 }

 .a-item.vis {
     opacity: 1;
     transform: none
 }

 .a-val {
     font-size: 17px;
     font-weight: 800;
     color: var(--primary)
 }

 .a-chg {
     font-size: 11px;
     font-weight: 600;
     margin: 3px 0
 }

 .a-chg.up {
     color: var(--green)
 }

 .a-chg.dn {
     color: var(--red)
 }

 .a-lbl {
     font-size: 10px;
     color: var(--text-muted)
 }

 .chart-box {
     background: #fff;
     border-radius: 9px;
     padding: 14px;
     border: 1px solid var(--border)
 }

 .chart-title {
     font-size: 11px;
     font-weight: 700;
     color: var(--text-muted);
     margin-bottom: 10px;
     text-align: right
 }

 .chart-bars {
     display: flex;
     align-items: flex-end;
     gap: 5px;
     height: 36px
 }

 .c-bar {
     flex: 1;
     border-radius: 3px 3px 0 0;
     background: var(--primary);
     opacity: .5;
     transition: height 1s cubic-bezier(.22, 1, .36, 1)
 }

 .c-bar.active {
     opacity: 1
 }

 .chart-days {
     display: flex;
     justify-content: space-between;
     font-size: 10px;
     color: var(--text-muted);
     margin-top: 5px
 }

 .sol-banner {
     background: linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary) 55%, var(--teal) 100%);
     padding: 70px clamp(16px, 4vw, 60px);
     position: relative;
     overflow: hidden
 }

 .sol-banner::before {
     content: '';
     position: absolute;
     inset: 0;
     background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
 }

 .sol-inner {
     max-width: 960px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 320px 1fr;
     gap: 56px;
     align-items: center;
     position: relative;
     z-index: 1
 }

 .sol-r {
     background: #fff;
     border-radius: 20px;
     padding: 32px 28px;
     box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
     order: -1
 }

 .sol-logo {
     width: 64px;
     height: 64px;
     background: linear-gradient(135deg, var(--primary-deeper), var(--primary));
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 14px
 }

 .sol-logo svg {
     width: 30px;
     height: 30px;
     stroke: #fff;
     fill: none;
     stroke-width: 1.8
 }

 .Medicalsol-name {
     font-size: 17px;
     font-weight: 900;
     color: var(--text);
     margin-bottom: 3px;
     text-align: center
 }

 .sol-tag {
     font-size: 12px;
     color: var(--primary);
     font-weight: 600;
     margin-bottom: 10px;
     text-align: center
 }

 .sol-desc {
     font-size: 13px;
     color: var(--text-muted);
     line-height: 1.75;
     margin-bottom: 18px;
     text-align: center
 }

 .sol-nums {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px
 }

 .sol-num-item {
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: 10px;
     padding: 10px 6px;
     text-align: center
 }

 .sol-num-val {
     font-size: 17px;
     font-weight: 900;
     color: var(--primary)
 }

 .sol-num-lbl {
     font-size: 10px;
     color: var(--text-muted);
     margin-top: 2px
 }

 .sol-l {
     padding: 0
 }

 .sol-l h2 {
     font-size: clamp(22px, 2.5vw, 30px);
     font-weight: 900;
     color: #fff;
     margin-bottom: 14px;
     line-height: 1.3
 }

 .sol-l p {
     font-size: 14px;
     color: rgba(255, 255, 255, .85);
     line-height: 1.85;
     margin-bottom: 22px
 }

 .chips {
     display: flex;
     flex-wrap: wrap;
     gap: 8px
 }

 .chip {
     display: flex;
     align-items: center;
     gap: 6px;
     background: rgba(255, 255, 255, .12);
     border: 1px solid rgba(255, 255, 255, .22);
     color: #fff;
     padding: 6px 13px;
     border-radius: 50px;
     font-size: 12px;
     font-weight: 600
 }

 .chip svg {
     width: 12px;
     height: 12px;
     stroke: #67E8F9;
     fill: none
 }

 .why-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
     margin-top: 40px
 }

 .why-card {
     background: #fff;
     border-radius: 16px;
     padding: 24px 20px;
     border: 1px solid var(--border);
     text-align: center;
     transition: .3s
 }

 .why-card:hover {
     box-shadow: var(--shadow-lg);
     transform: translateY(-4px)
 }

 .why-ic {
     width: 52px;
     height: 52px;
     border-radius: 13px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 14px
 }

 .why-ic svg {
     width: 24px;
     height: 24px;
     fill: none;
     stroke-width: 2
 }

 .why-h {
     font-size: 15px;
     font-weight: 700;
     margin-bottom: 8px
 }

 .why-p {
     font-size: 13px;
     color: var(--text-muted);
     line-height: 1.65
 }

 .testi-bg {
     background: var(--bg);
     padding: 80px clamp(16px, 4vw, 60px)
 }

 .testi-inner {
     max-width: 1240px;
     margin: 0 auto
 }

 .testi-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
     margin-top: 36px
 }

 .tcard {
     background: #fff;
     border-radius: 14px;
     padding: 20px;
     border: 1px solid var(--border);
     transition: .3s;
     opacity: 0;
     transform: translateY(14px)
 }

 .tcard.in {
     opacity: 1;
     transform: none
 }

 .tcard:hover {
     box-shadow: var(--shadow);
     border-color: var(--primary)
 }

 .tcard-top {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 12px
 }

 .tav {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 15px;
     font-weight: 800;
     flex-shrink: 0
 }

 .tname {
     font-size: 13px;
     font-weight: 700
 }

 .tstars {
     font-size: 12px;
     color: #F59E0B;
     margin-top: 2px
 }

 .tquote {
     font-size: 13px;
     color: var(--text-muted);
     line-height: 1.75;
     font-style: italic
 }

 .tquote::before {
     content: '"';
     color: var(--primary);
     font-size: 22px;
     font-style: normal;
     line-height: .5;
     display: block;
     margin-bottom: 6px
 }

 .compliance-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
     margin-top: 32px
 }

 .comp-card {
     background: #fff;
     border-radius: 14px;
     padding: 20px;
     border: 1px solid var(--border);
     transition: .3s;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 10px
 }

 .comp-card:hover {
     box-shadow: var(--shadow);
     border-color: var(--teal)
 }

 .comp-ic {
     width: 44px;
     height: 44px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0
 }

 .comp-ic svg {
     width: 20px;
     height: 20px;
     fill: none;
     stroke-width: 2
 }

 .comp-h {
     font-size: 14px;
     font-weight: 700
 }

 .comp-p {
     font-size: 12px;
     color: var(--text-muted);
     line-height: 1.65
 }

 .cta-section {
     padding: 60px clamp(16px, 4vw, 60px) 80px;
     background: var(--bg)
 }

 .cta-box {
     background: linear-gradient(135deg, #0C4A6E 0%, #0891B2 60%, #0D9488 100%);
     border-radius: 20px;
     padding: 56px 48px;
     text-align: center;
     position: relative;
     overflow: hidden;
     max-width: 1240px;
     margin: 0 auto
 }

 .cta-orb {
     position: absolute;
     border-radius: 50%;
     background: rgba(255, 255, 255, .05);
     pointer-events: none
 }

 .co1 {
     width: 400px;
     height: 400px;
     top: -160px;
     right: -100px
 }

 .co2 {
     width: 300px;
     height: 300px;
     bottom: -100px;
     left: -80px
 }

 .co3 {
     width: 180px;
     height: 180px;
     top: 50%;
     left: 32%;
     transform: translateY(-50%)
 }

 .cta-inner {
     position: relative;
     z-index: 1
 }

 .cta-eye {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     background: rgba(255, 255, 255, .12);
     border: 1px solid rgba(255, 255, 255, .25);
     color: #fff;
     padding: 6px 15px;
     border-radius: 50px;
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 18px
 }

 .cta-eye svg {
     width: 13px;
     height: 13px;
     fill: rgba(255, 255, 255, .7)
 }

 .cta-h2 {
     font-size: clamp(26px, 3vw, 40px);
     font-weight: 900;
     color: #fff;
     margin-bottom: 12px
 }

 .cta-h2 u {
     text-decoration-color: rgba(255, 255, 255, .45)
 }

 .cta-p {
     font-size: 15px;
     color: rgba(255, 255, 255, .85);
     margin-bottom: 24px
 }

 .cta-perks {
     display: flex;
     justify-content: center;
     gap: 22px;
     flex-wrap: wrap;
     margin-bottom: 26px
 }

 .cta-perk {
     display: flex;
     align-items: center;
     gap: 6px;
     color: rgba(255, 255, 255, .88);
     font-size: 14px;
     font-weight: 600
 }

 .cta-perk svg {
     width: 15px;
     height: 15px;
     stroke: #67E8F9;
     fill: none
 }

 .cta-btns {
     display: flex;
     justify-content: center;
     gap: 12px;
     flex-wrap: wrap;
     margin-bottom: 32px
 }

 .cta-btn-w {
     background: #fff;
     color: var(--primary-deeper);
     border: none;
     padding: 14px 28px;
     border-radius: 10px;
     font-size: 15px;
     font-weight: 700;
     cursor: pointer;
     font-family: 'Tajawal', sans-serif;
     display: flex;
     align-items: center;
     gap: 8px;
     transition: .2s;
     box-shadow: 0 4px 14px rgba(0, 0, 0, .15)
 }

 .cta-btn-w svg {
     width: 14px;
     height: 14px;
     stroke: currentColor;
     fill: none
 }

 .cta-btn-w:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 22px rgba(0, 0, 0, .2)
 }

 .cta-btn-g {
     background: rgba(255, 255, 255, .12);
     color: #fff;
     border: 1.5px solid rgba(255, 255, 255, .4);
     padding: 14px 26px;
     border-radius: 10px;
     font-size: 15px;
     font-weight: 700;
     cursor: pointer;
     font-family: 'Tajawal', sans-serif;
     display: flex;
     align-items: center;
     gap: 8px;
     transition: .2s
 }

 .cta-btn-g svg {
     width: 16px;
     height: 16px;
     stroke: #67E8F9;
     fill: none;
     stroke-width: 2;
     flex-shrink: 0
 }

 .cta-btn-g:hover {
     background: rgba(255, 255, 255, .22);
     border-color: rgba(255, 255, 255, .65)
 }

 .cta-stats {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap
 }

 .cta-divider {
     width: 1px;
     height: 36px;
     background: rgba(255, 255, 255, .2);
     flex-shrink: 0
 }

 .cta-sn {
     font-size: 26px;
     font-weight: 900;
     color: #fff;
     line-height: 1
 }

 .cta-sl {
     font-size: 12px;
     color: rgba(255, 255, 255, .6);
     margin-top: 3px
 }

 #goTop {
     position: fixed;
     bottom: 28px;
     left: 28px;
     width: 44px;
     height: 44px;
     background: var(--primary);
     border: none;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 16px rgba(8, 145, 178, .4);
     opacity: 0;
     pointer-events: none;
     transition: .3s;
     z-index: 99
 }

 #goTop.show {
     opacity: 1;
     pointer-events: auto
 }

 #goTop svg {
     width: 18px;
     height: 18px;
     stroke: #fff;
     fill: none
 }


 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(40px)
     }

     to {
         opacity: 1;
         transform: translateY(0)
     }
 }

 @keyframes fadeDown {
     from {
         opacity: 0;
         transform: translateY(-36px)
     }

     to {
         opacity: 1;
         transform: translateY(0)
     }
 }

 @keyframes fadeLeft {
     from {
         opacity: 0;
         transform: translateX(60px)
     }

     to {
         opacity: 1;
         transform: translateX(0)
     }
 }

 @keyframes fadeRight {
     from {
         opacity: 0;
         transform: translateX(-60px)
     }

     to {
         opacity: 1;
         transform: translateX(0)
     }
 }

 @keyframes zoomIn {
     from {
         opacity: 0;
         transform: scale(.8)
     }

     to {
         opacity: 1;
         transform: scale(1)
     }
 }

 @keyframes bounceIn {
     0% {
         opacity: 0;
         transform: scale(.5)
     }

     60% {
         opacity: 1;
         transform: scale(1.08)
     }

     80% {
         transform: scale(.96)
     }

     100% {
         transform: scale(1)
     }
 }

 @keyframes slideUp {
     from {
         opacity: 0;
         transform: translateY(60px)
     }

     to {
         opacity: 1;
         transform: translateY(0)
     }
 }

 @keyframes flipIn {
     from {
         opacity: 0;
         transform: perspective(400px) rotateX(30deg) translateY(30px)
     }

     to {
         opacity: 1;
         transform: perspective(400px) rotateX(0) translateY(0)
     }
 }

 @keyframes popIn {
     0% {
         opacity: 0;
         transform: scale(.7) rotate(-4deg)
     }

     70% {
         transform: scale(1.05) rotate(1deg)
     }

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

 @keyframes shimmer {

     0%,
     100% {
         box-shadow: 0 0 0 0 rgba(8, 145, 178, 0)
     }

     50% {
         box-shadow: 0 0 0 8px rgba(8, 145, 178, .12)
     }
 }

 @keyframes float {

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

     50% {
         transform: translateY(-8px)
     }
 }

 @keyframes pulseRing {
     0% {
         transform: scale(1);
         opacity: .7
     }

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

 @keyframes countPop {
     0% {
         transform: scale(1)
     }

     40% {
         transform: scale(1.18)
     }

     100% {
         transform: scale(1)
     }
 }

 @keyframes borderDraw {
     from {
         clip-path: inset(0 100% 0 0)
     }

     to {
         clip-path: inset(0 0% 0 0)
     }
 }

 @keyframes spinOnce {
     from {
         transform: rotate(-180deg) scale(0);
         opacity: 0
     }

     to {
         transform: rotate(0) scale(1);
         opacity: 1
     }
 }

 [data-r].in {
     animation-fill-mode: forwards !important
 }

 [data-r="up"].in {
     animation: fadeUp .7s cubic-bezier(.22, 1, .36, 1) forwards
 }

 [data-r="down"].in {
     animation: fadeDown .6s cubic-bezier(.22, 1, .36, 1) forwards
 }

 [data-r="left"].in {
     animation: fadeLeft .7s cubic-bezier(.22, 1, .36, 1) forwards
 }

 [data-r="right"].in {
     animation: fadeRight .7s cubic-bezier(.22, 1, .36, 1) forwards
 }

 [data-r="fade"].in {
     animation: fadeUp .8s ease forwards
 }

 [data-r="zoom"].in {
     animation: zoomIn .6s cubic-bezier(.22, 1, .36, 1) forwards
 }

 [data-r="bounce"].in {
     animation: bounceIn .8s ease forwards
 }

 [data-r="flip"].in {
     animation: flipIn .7s ease forwards
 }

 [data-r="pop"].in {
     animation: popIn .6s ease forwards
 }

 [data-r="spin"].in {
     animation: spinOnce .7s cubic-bezier(.22, 1, .36, 1) forwards
 }

 [data-d="1"].in {
     animation-delay: .08s
 }

 [data-d="2"].in {
     animation-delay: .16s
 }

 [data-d="3"].in {
     animation-delay: .24s
 }

 [data-d="4"].in {
     animation-delay: .32s
 }

 [data-d="5"].in {
     animation-delay: .40s
 }

 [data-d="6"].in {
     animation-delay: .48s
 }

 [data-d="7"].in {
     animation-delay: .56s
 }

 .hero-card-wrap.in {
     animation: slideUp .9s cubic-bezier(.22, 1, .36, 1) forwards
 }

 .hero-card {
     animation: float 4s ease-in-out infinite
 }

 .hero-card:hover {
     animation: none;
     transform: translateY(-4px)
 }

 .hero-eyebrow {
     animation: bounceIn .9s forwards .2s
 }

 .hero-h1 {
     animation: fadeRight .8s forwards .35s
 }

 .hero-p {
     animation: fadeRight .7s forwards .5s
 }

 .s-pill {
     animation: popIn .5s forwards
 }

 .s-pill:nth-child(1) {
     animation-delay: .55s
 }

 .s-pill:nth-child(2) {
     animation-delay: .65s
 }

 .s-pill:nth-child(3) {
     animation-delay: .75s
 }

 .s-pill:nth-child(4) {
     animation-delay: .85s
 }

 .btn-hero-w {
     animation: fadeUp .6s forwards .9s
 }

 .btn-hero-ghost {
     animation: fadeUp .6s forwards 1s
 }

 .hn-val {
     animation: bounceIn .7s forwards
 }


 .ss-item.in {
     animation: flipIn .6s cubic-bezier(.22, 1, .36, 1) forwards
 }

 .srv-card {
     transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, border-color .3s
 }

 .srv-card:hover {
     transform: translateY(-8px) scale(1.02)
 }

 .why-card:hover {
     transform: translateY(-6px) scale(1.02)
 }

 .comp-card:hover {
     transform: translateY(-4px) scale(1.01)
 }

 .sol-r {
     animation: float 5s ease-in-out infinite 1s
 }

 .sol-r:hover {
     animation: none;
     transform: translateY(-4px)
 }

 .live-dot::after,
 .mock-live-dot::after {
     content: '';
     position: absolute;
     inset: -4px;
     border-radius: 50%;
     background: currentColor;
     animation: pulseRing 1.5s ease-out infinite
 }

 .live-dot,
 .mock-live-dot {
     position: relative
 }

 .tcard {
     transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, border-color .3s
 }

 .tcard:hover {
     transform: translateY(-6px) scale(1.02)
 }

 .ss-val.popped {
     animation: countPop .4s
 }

 .hn-val.popped {
     animation: countPop .4s
 }

 .pill,
 .chip,
 .s-pill {
     transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s
 }

 .pill:hover,
 .chip:hover,
 .s-pill:hover {
     transform: scale(1.08);
     box-shadow: 0 4px 12px rgba(8, 145, 178, .2)
 }

 .ani-l {
     animation: fadeRight .85s cubic-bezier(.22, 1, .36, 1) forwards
 }

 .ani-r {
     animation: fadeLeft .85s cubic-bezier(.22, 1, .36, 1) forwards
 }

 .ani-l.in,
 .ani-r.in {
     animation-play-state: running
 }

 .sol-l.in {
     animation: fadeLeft .8s cubic-bezier(.22, 1, .36, 1) forwards
 }

 .mock-card,
 .emr-card,
 .inv-mock,
 .hr-mock,
 .lab-mock {
     transition: transform .3s, box-shadow .3s
 }

 .mock-card:hover,
 .emr-card:hover,
 .inv-mock:hover,
 .hr-mock:hover,
 .lab-mock:hover {
     transform: translateY(-4px) scale(1.01);
     box-shadow: 0 20px 50px rgba(8, 145, 178, .18)
 }

 .nfc-pulse {
     animation: shimmer 2.5s ease-in-out infinite
 }

 .inv-bar {
     animation: borderDraw 1.2s cubic-bezier(.22, 1, .36, 1) forwards
 }

 .hp1 {
     animation: float 7s ease-in-out infinite
 }

 .hp2 {
     animation: float 9s ease-in-out infinite 1s
 }

 .hp3 {
     animation: float 6s ease-in-out infinite 2s
 }

 .hp4 {
     animation: float 8s ease-in-out infinite .5s
 }

 .hp5 {
     animation: float 5s ease-in-out infinite 1.5s
 }

 .appt-item {
     transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s
 }

 .appt-item:hover {
     transform: translateX(-4px);
     box-shadow: 0 4px 14px rgba(8, 145, 178, .12)
 }

 .hc-row {
     transition: background .2s, transform .2s
 }

 .hc-row:hover {
     background: var(--primary-light);
     transform: translateX(-3px)
 }

 .feat-item {
     transform: translateY(16px);
     transition: .5s cubic-bezier(.22, 1, .36, 1)
 }

 .feat-item.in {
     opacity: 1 !important;
     transform: none
 }

 .btn-solid,
 .btn-line,
 .btn-hero-w,
 .cta-btn-w,
 .cta-btn-g {
     transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s, background .2s
 }

 .btn-solid:hover,
 .btn-hero-w:hover,
 .cta-btn-w:hover {
     transform: translateY(-3px) scale(1.03)
 }

 .btn-line:hover,
 .cta-btn-g:hover {
     transform: translateY(-2px) scale(1.02)
 }

 .tab-btn {
     transition: all .2s cubic-bezier(.22, 1, .36, 1)
 }

 .tab-btn.active {
     transform: scale(1.05)
 }

 @media(max-width:1024px) {

     .hero-grid,
     .detail-grid,
     .detail-grid.rev,
     .pharma-grid,
     .pharma-grid.rev {
         grid-template-columns: 1fr;
         gap: 40px
     }

     .sol-inner {
         grid-template-columns: 1fr;
         gap: 0
     }

     .sol-r {
         border-radius: 0 0 20px 20px;
         box-shadow: none
     }

     .hero-card,
     .detail-grid .detail-grid-visual {
         display: none
     }

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

     .why-grid,
     .testi-grid,
     .compliance-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .a-stats,
     .kgrid {
         grid-template-columns: repeat(2, 1fr)
     }



     .stats-strip-inner {
         grid-template-columns: repeat(2, 1fr)
     }

     .ss-item:nth-child(2) {
         border-left: none
     }

     .ss-item:nth-child(3) {
         border-top: 1px solid var(--border)
     }

     .ss-item:nth-child(4) {
         border-top: 1px solid var(--border);
         border-left: none
     }
 }

 @media(max-width:640px) {

     .services-grid,
     .why-grid,
     .testi-grid,
     .compliance-grid {
         grid-template-columns: 1fr
     }

     .a-stats,
     .kgrid {
         grid-template-columns: 1fr
     }



     .cta-box {
         padding: 40px 20px
     }

     .sol-inner {
         grid-template-columns: 1fr
     }

     .sol-l,
     .sol-r {
         padding: 28px 24px
     }

     .hero-nums {
         flex-wrap: wrap;
         gap: 16px
     }
 }