:root {
    --web-bg: linear-gradient(180deg, #eef4ff 0%, #f8fbff 36%, #f4f7fb 100%);
    --web-surface: rgba(255, 255, 255, 0.92);
    --web-surface-soft: linear-gradient(135deg, rgba(219, 234, 254, 0.42), rgba(237, 233, 254, 0.4));
    --web-text: #0f172a;
    --web-text-soft: #64748b;
    --web-border: rgba(37, 99, 235, 0.1);
    --web-shadow: 0 22px 60px rgba(37, 99, 235, 0.08);
    --web-accent: #2563eb;
    --web-accent-soft: rgba(37, 99, 235, 0.12);
}

body {
    background: var(--web-bg);
    background-attachment: fixed;
}

.web-header {
    border-bottom-color: rgba(148, 163, 184, 0.16);
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
}

.web-hero__content {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 28%),
        radial-gradient(circle at left bottom, rgba(124, 58, 237, 0.12), transparent 34%),
        rgba(255, 255, 255, 0.92);
}

.web-hero__panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.94));
}

.web-hero__content,
.web-content-card,
.web-doctor-card,
.web-hospital-card,
.web-footer__inner {
    backdrop-filter: blur(12px);
}

.web-content-card--video .web-content-card__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.18));
}

.web-content-card:hover,
.web-doctor-card:hover,
.web-hospital-card:hover,
.web-hero__content:hover {
    box-shadow: 0 26px 72px rgba(37, 99, 235, 0.14);
}

.web-section__head h2 {
    position: relative;
    padding-left: 18px;
}

.web-section__head h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 28px;
    border-radius: 999px;
    transform: translateY(-50%);
    background: linear-gradient(180deg, #2563eb, #7c3aed);
}