/* ==========================================================================
   Healty 3D — Hyper-premium spatial design layer
   Design system: ui-ux-pro-max ("Spatial UI / VisionOS" + medical teal palette,
   motion dial 8). Components ported from Magic UI.
   60 FPS rules: animate transform/opacity only · no backdrop-filter over the
   animated canvas except the header (disabled in lite mode) · will-change only
   on long-lived animated layers.
   ========================================================================== */

:root {
    --h3-teal-50: #ECFEFF;
    --h3-teal-300: #67E8F9;
    --h3-teal-400: #22D3EE;
    --h3-teal-500: #0891B2;
    --h3-teal-600: #0E7490;
    --h3-teal-700: #155E75;
    --h3-teal-900: #0B3B4A;
    --h3-green: #10B981;
    --h3-green-600: #059669;
    --h3-ink: #0F2A37;
    --h3-ink-2: #3B5563;
    --h3-glass: rgba(255, 255, 255, .78);
    --h3-glass-strong: rgba(255, 255, 255, .92);
    --h3-line: rgba(14, 116, 144, .12);
    --h3-hi: inset 0 1px 0 rgba(255, 255, 255, .95);
    --h3-depth-1: 0 1px 2px rgba(15, 42, 55, .06), 0 2px 6px -2px rgba(15, 42, 55, .08);
    --h3-depth-2: 0 2px 4px rgba(15, 42, 55, .04), 0 12px 28px -10px rgba(15, 42, 55, .16), 0 28px 56px -28px rgba(8, 145, 178, .28);
    --h3-depth-3: 0 6px 12px rgba(15, 42, 55, .06), 0 24px 48px -16px rgba(15, 42, 55, .22), 0 48px 90px -40px rgba(8, 145, 178, .38);
    --h3-spring: cubic-bezier(.2, .9, .25, 1.15);
    --h3-out: cubic-bezier(.16, 1, .3, 1);
    --h3-r-lg: 22px;
    --h3-r: 16px;
    --h3-r-sm: 12px;
}

/* ---------- Canvas stage (persistent 3D background) ---------- */
html.hl3d {
    background:
        radial-gradient(1200px 700px at 8% -10%, #DDF6FB 0%, transparent 60%),
        radial-gradient(1000px 700px at 110% 10%, #E3F8F1 0%, transparent 55%),
        linear-gradient(180deg, #F4FBFD 0%, #EAF5F8 100%);
    background-color: #EEF7FA;
}
html.hl3d body { background: transparent !important; }
#hl3d-stage {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}
#hl3d-stage .hl-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }


/* ---------- Cursor (Magic UI: smooth-cursor) ----------
   The pointer itself is an OS-drawn custom cursor: zero latency even when the
   main thread is busy. The 3D ring is a spring-follower decoration on top. */
html.hl-has-cursor, html.hl-has-cursor body { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><defs><radialGradient id='g' cx='38%25' cy='32%25' r='70%25'><stop offset='0' stop-color='%23ffffff'/><stop offset='.35' stop-color='%2322D3EE'/><stop offset='1' stop-color='%230E7490'/></radialGradient></defs><circle cx='10' cy='10' r='5.5' fill='url(%23g)' stroke='white' stroke-width='1.5'/></svg>") 10 10, auto; }
html.hl-has-cursor a, html.hl-has-cursor button, html.hl-has-cursor .btn, html.hl-has-cursor [role=button],
html.hl-has-cursor label, html.hl-has-cursor select, html.hl-has-cursor .nav-link, html.hl-has-cursor .page-link,
html.hl-has-cursor .dropdown-item, html.hl-has-cursor [data-bs-toggle] { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><defs><radialGradient id='g' cx='38%25' cy='32%25' r='70%25'><stop offset='0' stop-color='%23ffffff'/><stop offset='.35' stop-color='%2334D399'/><stop offset='1' stop-color='%23047857'/></radialGradient></defs><circle cx='10' cy='10' r='5.5' fill='url(%23g)' stroke='white' stroke-width='1.5'/></svg>") 10 10, pointer; }
html.hl-has-cursor input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
html.hl-has-cursor textarea { cursor: text; }
.hl-cursor-ring {
    position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none;
    width: 40px; height: 40px; margin: -20px 0 0 -20px;
    opacity: 0; transition: opacity .25s ease;
    will-change: transform; contain: layout style;
}
html.hl-cursor-on .hl-cursor-ring { opacity: 1; }
.hl-cursor-ring span {
    position: absolute; inset: 0; border-radius: 50%;
    border: 1.5px solid rgba(8, 145, 178, .55);
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .5), rgba(34, 211, 238, .08) 55%, rgba(8, 145, 178, .04));
    box-shadow: 0 6px 16px -6px rgba(8, 145, 178, .45), inset 0 1px 0 rgba(255, 255, 255, .7);
    transition: border-color .2s ease, transform .18s var(--h3-spring);
}
html.hl-cursor-link .hl-cursor-ring span { border-color: rgba(16, 185, 129, .75); }
html.hl-cursor-down .hl-cursor-ring span { transform: scale(.78); }

/* ---------- Scroll progress (Magic UI: scroll-progress) ---------- */
.hl-progress {
    position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 1100;
    transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--h3-teal-400), var(--h3-teal-600) 60%, var(--h3-green));
    box-shadow: 0 0 12px rgba(34, 211, 238, .6);
    will-change: transform;
}

/* ---------- Glass surfaces + Magic Card spotlight ---------- */
html.hl3d .card,
html.hl3d .accordion-item {
    position: relative;
    background: linear-gradient(180deg, var(--h3-glass-strong) 0%, var(--h3-glass) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .85) !important;
    border-radius: var(--h3-r-lg) !important;
    box-shadow: var(--h3-hi), 0 0 0 1px var(--h3-line), var(--h3-depth-2) !important;
    transition: transform .45s var(--h3-out), box-shadow .45s var(--h3-out);
}
/* gradient border that follows the pointer */
html.hl3d .card::before,
html.hl3d .accordion-item::before,
html.hl3d .hl-spot::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
    background: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), rgba(34, 211, 238, .95), rgba(16, 185, 129, .55) 35%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: 2;
}
/* soft interior glow */
html.hl3d .card::after,
html.hl3d .accordion-item::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(520px circle at var(--mx, -999px) var(--my, -999px), rgba(34, 211, 238, .09), transparent 45%);
    opacity: 0; transition: opacity .35s ease;
}
html.hl3d .hl-spotlit::before, html.hl3d .hl-spotlit::after { opacity: 1; }
html.hl3d .card .card-header, html.hl3d .card .card-footer { background: transparent !important; border-color: var(--h3-line) !important; }

/* ---------- Tilt elements: Glare Hover + depth ---------- */
html.hl3d .widget > a > .rounded-10,
html.hl3d .hl-tilt {
    transform-style: preserve-3d;
    transition: transform .55s var(--h3-out), box-shadow .45s var(--h3-out);
}
html.hl3d .widget > a > .rounded-10 { position: relative; overflow: hidden; }
html.hl3d .widget > a > .rounded-10::after,
html.hl3d .hl-tilt::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%);
    opacity: 0; transition: opacity .35s ease;
}
html.hl3d .widget > a > .rounded-10.hl-hover::after, html.hl3d .hl-tilt.hl-hover::after { opacity: 1; }

/* Dashboard stat gems — equal heights */
html.hl3d .widget { display: flex; }
html.hl3d .widget > a { display: flex; flex: 1 1 auto; }
html.hl3d .widget > a > .rounded-10 { flex: 1 1 auto; }
/* Dashboard stat gems */
html.hl3d .widget > a > .rounded-10 {
    border-radius: var(--h3-r-lg) !important;
    border: 1px solid rgba(255, 255, 255, .28);
    min-height: 150px;
}
html.hl3d .widget > a > .bg-primary { background: linear-gradient(140deg, #22D3EE -10%, #0891B2 40%, #0B5D74 110%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 16px 34px -14px rgba(8, 145, 178, .75), 0 4px 0 #0A4F63 !important; }
html.hl3d .widget > a > .bg-success { background: linear-gradient(140deg, #34D399 -10%, #059669 45%, #046C4E 110%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 16px 34px -14px rgba(5, 150, 105, .75), 0 4px 0 #035C43 !important; }
html.hl3d .widget > a > .bg-warning { background: linear-gradient(140deg, #FCD34D -10%, #F59E0B 45%, #C2410C 115%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 16px 34px -14px rgba(217, 119, 6, .7), 0 4px 0 #9A3412 !important; }
html.hl3d .widget > a > .bg-info { background: linear-gradient(140deg, #7DD3FC -10%, #0EA5E9 45%, #1D4ED8 115%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 16px 34px -14px rgba(14, 165, 233, .7), 0 4px 0 #1E40AF !important; }
html.hl3d .widget > a > .rounded-10 .widget-icon {
    background: linear-gradient(145deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .12)) !important;
    border: 1px solid rgba(255, 255, 255, .45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 22px -8px rgba(0, 0, 0, .35);
    border-radius: 18px !important;
    transform: translateZ(40px);
}
html.hl3d .widget > a > .rounded-10 .text-end { transform: translateZ(28px); }
html.hl3d .widget > a > .rounded-10 h2 { font-size: 2.6rem; letter-spacing: -.02em; text-shadow: 0 2px 10px rgba(0, 0, 0, .18); font-variant-numeric: tabular-nums; }
html.hl3d .widget > a > .rounded-10 h3 { opacity: .95; }

/* ---------- 3D Buttons (Shimmer + Ripple, Magic UI) ---------- */
html.hl3d .btn:not(.btn-icon):not(.btn-link):not(.px-0):not(.dropdown-item) {
    position: relative; overflow: hidden; isolation: isolate;
    transition: transform .22s var(--h3-spring), box-shadow .22s var(--h3-out), background-color .2s ease, color .2s ease;
}
html.hl3d .btn-primary,
html.hl3d .btn-success,
html.hl3d .btn-danger {
    border: 0 !important;
    color: #fff !important;
}
html.hl3d .btn-primary {
    background: linear-gradient(180deg, #17A9CB 0%, #0E7490 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 4px 0 #0A5468, 0 12px 22px -8px rgba(14, 116, 144, .65) !important;
}
html.hl3d .btn-success {
    background: linear-gradient(180deg, #19C38D 0%, #047857 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 #035C43, 0 12px 22px -8px rgba(5, 150, 105, .6) !important;
}
html.hl3d .btn-danger {
    background: linear-gradient(180deg, #F05252 0%, #C81E1E 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 0 #8E1414, 0 12px 22px -8px rgba(200, 30, 30, .5) !important;
}
html.hl3d .btn-secondary, html.hl3d .btn-light, html.hl3d .btn-outline-primary {
    background: linear-gradient(180deg, #FFFFFF 0%, #EEF7FA 100%) !important;
    border: 1px solid rgba(14, 116, 144, .18) !important;
    box-shadow: inset 0 1px 0 #fff, 0 3px 0 #CFE3EA, 0 10px 18px -10px rgba(15, 42, 55, .25) !important;
}
html.hl3d .btn-outline-primary { color: var(--h3-teal-600) !important; }
html.hl3d .btn:not(.btn-icon):not(.btn-link):not(.px-0):not(.dropdown-item):hover { transform: translate3d(0, -2px, 0); }
html.hl3d .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 0 #0A5468, 0 18px 30px -10px rgba(14, 116, 144, .7) !important; }
html.hl3d .btn:not(.btn-icon):not(.btn-link):not(.px-0):not(.dropdown-item):active { transform: translate3d(0, 3px, 0); transition-duration: .08s; }
html.hl3d .btn-primary:active { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .2), 0 1px 0 #0A5468, 0 4px 10px -6px rgba(14, 116, 144, .6) !important; }
/* shimmer sweep */
html.hl3d .btn:not(.btn-icon):not(.btn-link):not(.px-0):not(.dropdown-item)::before {
    content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; z-index: -1;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
    transform: translate3d(-160%, 0, 0) skewX(-18deg);
    transition: transform .75s var(--h3-out);
    pointer-events: none;
}
html.hl3d .btn:not(.btn-icon):not(.btn-link):not(.px-0):not(.dropdown-item):hover::before { transform: translate3d(330%, 0, 0) skewX(-18deg); }
html.hl3d .hl-shimmer::before { animation: h3-shimmer 3.2s var(--h3-out) infinite; }
@keyframes h3-shimmer {
    0%, 55% { transform: translate3d(-160%, 0, 0) skewX(-18deg); }
    100% { transform: translate3d(330%, 0, 0) skewX(-18deg); }
}
.hl-ripple {
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 60%);
    transform: scale(0); opacity: 1;
    animation: h3-ripple .6s var(--h3-out) forwards;
}
.btn-light .hl-ripple, .btn-secondary .hl-ripple, .btn-outline-primary .hl-ripple { background: radial-gradient(circle, rgba(8, 145, 178, .25) 0%, rgba(8, 145, 178, 0) 60%); }
@keyframes h3-ripple { to { transform: scale(1); opacity: 0; } }
.hl-magnetic { transition: transform .35s var(--h3-spring) !important; }

/* ---------- Border Beam (Magic UI) — rotating conic, compositor only ---------- */
.hl-beam { position: relative; isolation: isolate; overflow: hidden; }
.hl-beam > .hl-beam-ray {
    position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; z-index: -2;
    margin-left: -80%; margin-top: -80%;
    background: conic-gradient(from 0deg, transparent 0 62%, rgba(34, 211, 238, 0) 64%, #22D3EE 76%, #10B981 84%, transparent 90%);
    will-change: transform;
    animation: h3-spin 7s linear infinite;
    pointer-events: none;
}
.hl-beam > .hl-beam-mask {
    position: absolute; inset: 1.5px; z-index: -1; border-radius: inherit; pointer-events: none;
    background: inherit;
}
@keyframes h3-spin { to { transform: rotate(360deg); } }

/* ---------- Meteors (Magic UI) ---------- */
.hl-meteors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hl-meteors span {
    position: absolute; top: -10%; width: 2px; height: 2px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 0 8px rgba(255, 255, 255, .6);
    transform: rotate(215deg) translate3d(0, 0, 0);
    animation: h3-meteor linear infinite;
    will-change: transform, opacity;
}
.hl-meteors span::after {
    content: ""; position: absolute; top: 50%; width: 90px; height: 1px; transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(255, 255, 255, .85), transparent);
}
@keyframes h3-meteor {
    0% { transform: rotate(215deg) translate3d(0, 0, 0); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: rotate(215deg) translate3d(-900px, 0, 0); opacity: 0; }
}

/* ---------- Blur Fade reveal (Magic UI) ---------- */
.hl-rv { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); transition: opacity .7s var(--h3-out), transform .8s var(--h3-out) !important; }
.hl-rv.hl-in { opacity: 1; transform: none; }
.hl-rv.hl-done { transition: transform .45s var(--h3-out), box-shadow .45s var(--h3-out), opacity .3s ease !important; }

/* ---------- Admin chrome ---------- */
html.hl3d .aside-menu-container {
    background: linear-gradient(180deg, rgba(255, 255, 255, .97) 0%, rgba(243, 251, 253, .95) 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, .9) !important;
    box-shadow: 1px 0 0 var(--h3-line), 18px 0 40px -24px rgba(15, 42, 55, .22) !important;
}
html.hl3d .aside-menu-container__aside-menu .nav-item .nav-link {
    position: relative;
    transition: transform .3s var(--h3-spring), background-color .2s ease, color .2s ease, box-shadow .3s ease !important;
}
html.hl3d .aside-menu-container__aside-menu .nav-item .nav-link:hover { transform: translate3d(4px, 0, 0); }
html.hl3d .aside-menu-container__aside-menu .nav-item.active > .nav-link {
    background: linear-gradient(135deg, #1BB4D6 0%, #0E7490 70%, #0B5D74 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 #0A5468, 0 12px 24px -10px rgba(14, 116, 144, .75) !important;
    transform: translate3d(0, -1px, 0);
}
html.hl3d .header, html.hl3d .top-navbar, html.hl3d #nav-header {
    background: rgba(255, 255, 255, .84) !important;
}
html.hl3d.hl-lite .header, html.hl3d.hl-lite .top-navbar, html.hl3d.hl-lite #nav-header { backdrop-filter: none !important; background: rgba(255, 255, 255, .96) !important; }
html.hl3d .header { box-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 10px 30px -18px rgba(15, 42, 55, .25) !important; }
html.hl3d .content .table { background: transparent; }
html.hl3d .form-select { background-color: #FBFEFF !important; box-shadow: inset 0 2px 4px rgba(15, 42, 55, .05), 0 1px 0 #fff !important; }
html.hl3d .form-control {
    background: linear-gradient(180deg, #F7FBFC 0%, #FFFFFF 100%) !important;
    box-shadow: inset 0 2px 4px rgba(15, 42, 55, .05), 0 1px 0 #fff !important;
}
html.hl3d .form-control:focus, html.hl3d .form-select:focus {
    background-color: #fff !important;
    box-shadow: 0 0 0 4px rgba(8, 145, 178, .18), 0 8px 18px -10px rgba(8, 145, 178, .5) !important;
}
html.hl3d .badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 6px -2px rgba(15, 42, 55, .15); }
html.hl3d .dropdown-menu {
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: var(--h3-hi), 0 0 0 1px var(--h3-line), var(--h3-depth-3) !important;
    border-radius: var(--h3-r) !important;
}
html.hl3d .dropdown-menu.show { animation: h3-fade .18s var(--h3-out); }
@keyframes h3-fade { from { opacity: 0; } to { opacity: 1; } }
/* 3D modal entrance */
html.hl3d .modal.fade .modal-dialog {
    transform: perspective(1200px) rotateX(-10deg) translate3d(0, 30px, -40px) scale(.96);
    transition: transform .45s var(--h3-out), opacity .3s ease;
    opacity: 0;
}
html.hl3d .modal.show .modal-dialog { transform: none; opacity: 1; }
html.hl3d .modal-content {
    background: rgba(255, 255, 255, .97) !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    border-radius: var(--h3-r-lg) !important;
    box-shadow: var(--h3-hi), 0 0 0 1px var(--h3-line), var(--h3-depth-3) !important;
}
html.hl3d .modal-backdrop.show { background: #0B2530; opacity: .42; }
html.hl3d .page-item .page-link { transition: transform .2s var(--h3-spring); }
html.hl3d .page-item .page-link:hover { transform: translate3d(0, -2px, 0); }
html.hl3d .page-item.active .page-link { box-shadow: 0 3px 0 #0A5468, 0 8px 14px -6px rgba(14, 116, 144, .6); }

/* ---------- Auth ---------- */
html.hl3d .authImage { background: transparent !important; position: relative; }
html.hl3d .authImage .bg-white.rounded-15 {
    background: transparent !important;
    border: 0 !important;
    border-radius: 26px !important;
    box-shadow: var(--h3-depth-3) !important;
    transition: transform .6s var(--h3-out);
    transform-style: preserve-3d;
}
html.hl3d .authImage .bg-white.rounded-15 > .hl-beam-mask { background: rgba(255, 255, 255, .94); }
html.hl3d .authImage .bg-white.rounded-15 h1 {
    background: linear-gradient(120deg, #0B3B4A, #0E7490 60%, #059669);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hl-helix { display: block; pointer-events: none; }
.hl-helix-auth {
    position: fixed; top: 0; bottom: 0; width: 34vw; height: 100vh; z-index: -1; opacity: .9;
}
.hl-helix-auth.left { left: -4vw; }
.hl-helix-auth.right { right: -4vw; }
@media (max-width: 991.98px) { .hl-helix-auth { opacity: .35; width: 60vw; } .hl-helix-auth.left { display: none; } }

/* ---------- Front website ---------- */
html.hl3d .home-page .how-work-section,
html.hl3d .home-page .services-section .slick-list,
html.hl3d .testimonial-section .slick-list { background: transparent !important; box-shadow: none !important; }
html.hl3d .hero-section { background: transparent !important; overflow: visible; }
html.hl3d .hero-section .hl-hero-visual { position: relative; transform-style: preserve-3d; }
html.hl3d .hero-section .hl-hero-visual .hl-helix {
    position: absolute; inset: -12% -10% -6% -10%; width: 120%; height: 118%; z-index: 0;
}
html.hl3d .hero-section .hl-hero-visual img {
    position: relative; z-index: 1;
    animation: h3-float 7s ease-in-out infinite;
    will-change: transform;
}
@keyframes h3-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -14px, 0); }
}
.hl-chip {
    position: absolute; z-index: 2;
    display: inline-flex; align-items: center; gap: .65rem;
    padding: .75rem 1rem .75rem .75rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .86));
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 18px;
    box-shadow: var(--h3-hi), 0 0 0 1px var(--h3-line), var(--h3-depth-3);
    color: var(--h3-ink); font-weight: 700; font-size: .95rem; white-space: nowrap; text-align: left;
    animation: h3-bob 6s ease-in-out infinite;
    will-change: transform;
}
.hl-chip small { display: block; font-weight: 500; color: var(--h3-ink-2); font-size: .78rem; }
.hl-chip .hl-chip-ico {
    width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-size: 1.05rem;
    background: linear-gradient(145deg, #22D3EE, #0E7490);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 0 #0A5468, 0 10px 18px -8px rgba(14, 116, 144, .7);
}
.hl-chip.green .hl-chip-ico { background: linear-gradient(145deg, #34D399, #047857); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 #035C43, 0 10px 18px -8px rgba(5,150,105,.7); }
.hl-chip.c1 { left: -4%; top: 18%; }
.hl-chip.c2 { right: -2%; top: 46%; animation-delay: -2s; }
.hl-chip.c3 { left: 6%; bottom: 8%; animation-delay: -4s; }
@keyframes h3-bob {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -10px, 0); }
}
html.hl3d .hl-chip.hl-hover { animation-play-state: paused; }
@media (max-width: 991.98px) {
    .hl-chip { font-size: .85rem; padding: .55rem .8rem .55rem .55rem; }
    .hl-chip .hl-chip-ico { width: 34px; height: 34px; }
    .hl-chip.c1 { left: 0; top: 6%; } .hl-chip.c2 { right: 0; } .hl-chip.c3 { display: none; }
}
html.hl3d .home-page section h2:not(.text-primary),
html.hl3d .hero-section h1 {
    background: linear-gradient(120deg, #0B3B4A 0%, #0E7490 55%, #047857 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
html.hl3d .appointmnet-section__inner-block h2,
html.hl3d .appointmnet-section__inner-block h1 { background: none; color: #fff !important; -webkit-text-fill-color: #fff; }
html.hl3d .appointmnet-section__inner-block {
    background: linear-gradient(130deg, #0B5D74 0%, #0E7490 35%, #0891B2 70%, #10B981 120%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 0 #084B5E, var(--h3-depth-3) !important;
    position: relative; overflow: hidden; isolation: isolate;
}
html.hl3d .appointmnet-section__inner-block > *:not(.hl-meteors) { position: relative; z-index: 1; }
html.hl3d .about-section .about-image-box, html.hl3d .about-section .about-content-box {
    box-shadow: var(--h3-hi), 0 0 0 1px var(--h3-line), var(--h3-depth-2);
    background: var(--h3-glass-strong) !important;
}
html.hl3d footer.bg-primary {
    background:
        radial-gradient(700px 300px at 15% 0%, rgba(34, 211, 238, .22), transparent 60%),
        radial-gradient(600px 280px at 95% 100%, rgba(16, 185, 129, .18), transparent 60%),
        linear-gradient(180deg, #0B2B37 0%, #071C24 100%) !important;
}

/* about: experience counter as 3D gradient numeral */
html.hl3d .about-section .number-big {
    background: linear-gradient(160deg, #22D3EE 0%, #0E7490 55%, #047857 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -.04em;
    filter: drop-shadow(0 6px 10px rgba(8, 145, 178, .25));
}
/* testimonials: glass stage instead of flat grey; recolour legacy coral quote art to teal */
html.hl3d .testimonial-section.bg-secondary { background: transparent !important; }
html.hl3d .testimonial-section .testimonial-section__testimonial-card {
    background: linear-gradient(180deg, var(--h3-glass-strong), var(--h3-glass));
    box-shadow: var(--h3-hi), 0 0 0 1px var(--h3-line), var(--h3-depth-2);
}
html.hl3d .testimonial-section .quotation-mark { filter: hue-rotate(172deg) saturate(1.15) brightness(.9); }
html.hl3d .testimonial-section .slick-arrow, html.hl3d .testimonial-section [class*="arrow"] { transition: transform .25s var(--h3-spring); }

/* ---------- Lite / static / reduced-motion ---------- */
html.hl-lite .hl-meteors span:nth-child(n+4), html.hl-lite .hl-chip { animation: none; }
html.hl-static .hl-meteors,
html.hl-static .hl-chip, html.hl-static .hero-section img { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    .hl-meteors, .hl-chip, .hl-beam > .hl-beam-ray,
    .hero-section .hl-hero-visual img, .hl-shimmer::before { animation: none !important; }
    .hl-rv { opacity: 1 !important; transform: none !important; }
    .hl-cursor-ring { display: none !important; }
}
@media (hover: none) { .hl-cursor-ring { display: none !important; } }

/* consistent row text colour (theme greyed out odd striped rows) */
html.hl3d .table.table-striped > tbody > tr > *,
html.hl3d .table > tbody > tr > td { color: var(--h3-ink) !important; --bs-table-striped-color: var(--h3-ink); }
html.hl3d .table > tbody > tr > td .text-muted, html.hl3d .table > tbody > tr > td small { color: var(--h3-ink-2) !important; }

/* 60 FPS: no live backdrop blur over the animated stage — opaque frosted fill instead */
html.hl3d .header, html.hl3d .top-navbar, html.hl3d #nav-header, html.hl3d header.header {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.hl3d header.header, html.hl3d .header.position-relative { background: rgba(255, 255, 255, .94) !important; }