:root {
    --bg-base: #071115;
    --bg-panel: #101b20;
    --bg-panel-soft: #13242a;
    --border-line: #24404a;
    --accent-primary: #36f2b5;
    --accent-secondary: #66d9ff;
    --accent-warm: #f7c65f;
    --accent-alert: #FF5E5B;
    --text-primary: #f6fbfc;
    --text-secondary: #d4e4e8;
    --text-muted: #93aab1;
    --shadow-soft: 0 24px 80px -40px rgba(0, 0, 0, 0.75);
    --shadow-glow: 0 26px 70px -46px rgba(54, 242, 181, 0.72);
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 8%, rgba(54, 242, 181, 0.16), transparent 28rem),
        radial-gradient(circle at 88% 12%, rgba(102, 217, 255, 0.12), transparent 26rem),
        linear-gradient(180deg, #081317 0%, var(--bg-base) 42%, #05090b 100%) !important;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
.font-display {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.font-600 {
    font-weight: 600;
}

.font-700 {
    font-weight: 700;
}

.font-800 {
    font-weight: 800;
}

::selection {
    background: rgba(54, 242, 181, 0.25);
    color: var(--text-primary);
}

/* Tailwind CDN utilities in the markup use fixed hex values.
   These remaps keep every page aligned with the refreshed theme. */
.bg-\[\#060B0E\] {
    background-color: var(--bg-base) !important;
}

.bg-\[\#0E151A\],
.bg-\[\#0E151A\]\/40 {
    background-color: rgba(16, 27, 32, 0.72) !important;
}

.text-\[\#F3F7F9\] {
    color: var(--text-primary) !important;
}

.text-\[\#C9D6DB\] {
    color: var(--text-secondary) !important;
}

.text-\[\#95A8AF\] {
    color: var(--text-muted) !important;
}

.text-\[\#00F29B\] {
    color: var(--accent-primary) !important;
}

.border-\[\#1E2B33\] {
    border-color: rgba(147, 170, 177, 0.18) !important;
}

.bg-\[\#00F29B\] {
    background-color: var(--accent-primary) !important;
}

/* Focus visibility for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}

header {
    background: rgba(7, 17, 21, 0.82) !important;
    border-color: rgba(120, 166, 178, 0.16) !important;
    box-shadow: 0 18px 60px -36px rgba(0, 0, 0, 0.85);
}

header > div:first-child {
    background: linear-gradient(90deg, rgba(54, 242, 181, 0.08), rgba(102, 217, 255, 0.06), rgba(54, 242, 181, 0.08));
    border-color: rgba(120, 166, 178, 0.14) !important;
}

header nav a,
footer a {
    transition: color 0.2s ease, opacity 0.2s ease;
}

header nav a.text-\[\#00F29B\],
header nav a:hover,
#mobileMenu a.text-\[\#00F29B\] {
    color: var(--accent-primary) !important;
}

header nav a.text-\[\#00F29B\] {
    position: relative;
}

header nav a.text-\[\#00F29B\]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
}

header a[class*="bg-[#00F29B]"],
main a[class*="bg-[#00F29B]"],
#mobileMenu a[class*="bg-[#00F29B]"],
button[class*="bg-[#00F29B]"] {
    background: linear-gradient(135deg, var(--accent-primary), #8dffd9) !important;
    border: 1px solid rgba(255, 255, 255, 0.26);
    color: #051012 !important;
    border-radius: 999px !important;
    box-shadow: 0 18px 48px -30px rgba(54, 242, 181, 0.85);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

header a[class*="bg-[#00F29B]"]:hover,
main a[class*="bg-[#00F29B]"]:hover,
#mobileMenu a[class*="bg-[#00F29B]"]:hover,
button[class*="bg-[#00F29B]"]:hover {
    filter: saturate(1.1) brightness(1.02);
    transform: translateY(-1px);
    box-shadow: 0 22px 54px -30px rgba(54, 242, 181, 0.95);
}

main a[class*="border"][class*="text-[#F3F7F9]"],
button[class*="border"] {
    border-color: rgba(147, 170, 177, 0.28) !important;
    border-radius: 999px !important;
}

main a[class*="border"][class*="text-[#F3F7F9]"]:hover,
button[class*="border"]:hover {
    border-color: rgba(54, 242, 181, 0.72) !important;
    color: var(--text-primary) !important;
}

main section {
    position: relative;
}

main section::before {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 18rem);
    opacity: 0.8;
}

main section > * {
    position: relative;
    z-index: 1;
}

section[class*="border-b"],
footer {
    border-color: rgba(120, 166, 178, 0.16) !important;
}

h1 {
    letter-spacing: -0.055em;
}

h2 {
    letter-spacing: -0.04em;
}

h1,
h2,
h3 {
    text-wrap: balance;
}

p,
li {
    text-wrap: pretty;
}

/* Scroll reveal */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

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

/* Signature: hex-node network pattern used behind hero + section dividers.
     Represents the connected provider / facility network MedCareNexus tracks. */
.hex-node-field {
    background-image:
        radial-gradient(circle at 20px 20px, rgba(54, 242, 181, 0.26) 1px, transparent 1.5px),
        linear-gradient(90deg, rgba(120, 166, 178, 0.13) 1px, transparent 1px),
        linear-gradient(rgba(120, 166, 178, 0.13) 1px, transparent 1px);
    background-size: 42px 42px, 42px 42px, 42px 42px;
    -webkit-mask-image: radial-gradient(ellipse 82% 74% at 50% 30%, black 36%, transparent 86%);
    mask-image: radial-gradient(ellipse 82% 74% at 50% 30%, black 36%, transparent 86%);
}

.node-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--accent-primary);
    box-shadow: 0 0 0 6px rgba(54, 242, 181, 0.08), 0 0 18px 2px rgba(54, 242, 181, 0.7);
}

/* Live status pulse dot */
.pulse-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent-primary);
    box-shadow: 0 0 14px rgba(54, 242, 181, 0.85);
    flex-shrink: 0;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    border: 1px solid var(--accent-primary);
    animation: pulse-ring 2.2s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .pulse-dot::after {
        animation: none;
    }
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.6);
        opacity: 0.9;
    }

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

/* Panel glass effect used sparingly on hero overlay panels */
.glass-panel {
    background:
        linear-gradient(145deg, rgba(18, 36, 42, 0.9), rgba(9, 18, 22, 0.72)),
        radial-gradient(circle at 18% 0%, rgba(54, 242, 181, 0.14), transparent 18rem);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(147, 170, 177, 0.2);
    box-shadow: var(--shadow-soft), var(--shadow-glow);
}

.hero-illustration-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 440px;
}

.hero-illustration-wrap::before {
    content: '';
    position: absolute;
    width: min(78%, 430px);
    aspect-ratio: 1;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(54, 242, 181, 0.22), rgba(102, 217, 255, 0.08) 48%, transparent 70%);
    filter: blur(12px);
}

.hero-illustration {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 34px 55px rgba(0, 0, 0, 0.42));
    animation: hero-float 5.8s ease-in-out infinite;
}

@keyframes hero-float {
    0%,
    100% {
        transform: translateY(0);
    }

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

/* Card hover glow */
.ops-card {
    background:
        linear-gradient(145deg, rgba(19, 36, 42, 0.92), rgba(11, 21, 25, 0.94)) !important;
    border-color: rgba(147, 170, 177, 0.18) !important;
    box-shadow: 0 18px 50px -44px rgba(0, 0, 0, 0.9);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.ops-card:hover {
    border-color: rgba(54, 242, 181, 0.5) !important;
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow), 0 30px 76px -52px rgba(0, 0, 0, 0.95);
}

.ops-card svg,
div[class*="rounded-lg"][class*="bg-[#060B0E]"] svg {
    filter: drop-shadow(0 0 10px rgba(54, 242, 181, 0.42));
}

/* Status chip */
.status-chip {
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.12em;
    font-weight: 700;
}

span[class*="rounded-full"][class*="status-chip"],
p[class*="status-chip"],
article span[class*="status-chip"] {
    color: var(--accent-primary) !important;
}

section span[class*="rounded-full"][class*="status-chip"] {
    background: rgba(54, 242, 181, 0.08) !important;
    border-color: rgba(54, 242, 181, 0.24) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

img {
    filter: saturate(0.92) contrast(1.06);
}

div[class*="overflow-hidden"][class*="border"] {
    border-color: rgba(147, 170, 177, 0.2) !important;
    box-shadow: var(--shadow-soft);
}

div[class*="overflow-hidden"][class*="border"] img {
    transition: transform 0.45s ease, filter 0.45s ease;
}

div[class*="overflow-hidden"][class*="border"]:hover img {
    transform: scale(1.035);
    filter: saturate(1) contrast(1.08);
}

input,
select,
textarea {
    background: rgba(11, 21, 25, 0.92) !important;
    border-color: rgba(147, 170, 177, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(54, 242, 181, 0.78) !important;
    box-shadow: 0 0 0 4px rgba(54, 242, 181, 0.1);
}

footer {
    background:
        radial-gradient(circle at 12% 0%, rgba(54, 242, 181, 0.09), transparent 24rem),
        #091217 !important;
}

/* Data divider line with center label */
.data-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-line) 20%, var(--border-line) 80%, transparent);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
    background: var(--border-line);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

@media (min-width: 1024px) {
    .home-hero {
        min-height: 560px;
        display: flex;
        align-items: center;
    }
}

@media (max-width: 1023px) {
    #mobileMenu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 80;
        margin: 0;
        padding: 0.75rem 1.5rem 1rem;
        min-height: 24rem;
        background-color: #071115 !important;
        background-image: none !important;
        border-top: 1px solid rgba(147, 170, 177, 0.18) !important;
        border-bottom: 1px solid rgba(147, 170, 177, 0.18) !important;
        border-radius: 0;
        box-shadow: 0 18px 36px -28px rgba(0, 0, 0, 0.85);
    }

    #mobileMenu:not(.hidden) {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    #mobileMenu > * + * {
        margin-top: 0 !important;
    }

    #mobileMenu a {
        display: block;
        padding: 0.75rem 0;
        border: 0 !important;
        border-radius: 0;
        font-size: 0.95rem;
        background: transparent !important;
    }

    #mobileMenu a:not([class*="bg-[#00F29B]"]) {
        background: transparent !important;
    }

    #mobileMenu a:not([class*="bg-[#00F29B]"]):hover {
        color: var(--accent-primary) !important;
    }

    #mobileMenu a[class*="bg-[#00F29B]"] {
        margin-top: 0.85rem !important;
        padding: 0.85rem 1rem;
        width: 100%;
        background: linear-gradient(135deg, var(--accent-primary), #8dffd9) !important;
        border-radius: 0.5rem !important;
    }
}

@media (max-width: 767px) {
    header > div:nth-child(2) {
        height: 68px;
    }

    h1 {
        font-size: clamp(2.25rem, 13vw, 3rem) !important;
    }

    h2 {
        font-size: clamp(1.9rem, 9vw, 2.5rem) !important;
    }

    .glass-panel {
        border-radius: 1.25rem !important;
    }

    .hero-illustration-wrap {
        min-height: 320px;
    }
}