/* Cate-like hero blocks: dark mode polish */
html.dark :where(section, div):has(.animate-blob),
html[data-theme='dark'] :where(section, div):has(.animate-blob) {
    isolation: isolate;
}

/* Handle light gradient heroes (e.g. from-blue-50 to-white) */
html.dark section.bg-gradient-to-b.from-blue-50.to-white,
html.dark section.bg-gradient-to-b.from-indigo-50.to-white,
html.dark section.bg-gradient-to-b.from-purple-50.to-white,
html.dark section.bg-gradient-to-b.from-pink-50.to-white,
html[data-theme='dark'] section.bg-gradient-to-b.from-blue-50.to-white,
html[data-theme='dark'] section.bg-gradient-to-b.from-indigo-50.to-white,
html[data-theme='dark'] section.bg-gradient-to-b.from-purple-50.to-white,
html[data-theme='dark'] section.bg-gradient-to-b.from-pink-50.to-white {
    --tw-gradient-from: var(--arv-bg-deep) var(--tw-gradient-from-position) !important;
    --tw-gradient-via: var(--arv-bg-section) var(--tw-gradient-via-position) !important;
    --tw-gradient-to: rgb(11 12 11 / 0) var(--tw-gradient-to-position) !important;
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops)) !important;
}

html.dark :where(section, div):has(.animate-blob).bg-gradient-to-b,
html[data-theme='dark'] :where(section, div):has(.animate-blob).bg-gradient-to-b {
    --tw-gradient-from: var(--arv-bg-deep) var(--tw-gradient-from-position) !important;
    --tw-gradient-via: var(--arv-bg-section) var(--tw-gradient-via-position) !important;
    --tw-gradient-to: rgb(11 12 11 / 0) var(--tw-gradient-to-position) !important;
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops)) !important;
}

html.dark :where(section, div):has(.animate-blob).from-blue-50,
html.dark :where(section, div):has(.animate-blob).from-indigo-50,
html.dark :where(section, div):has(.animate-blob).from-purple-50,
html.dark :where(section, div):has(.animate-blob).from-pink-50,
html[data-theme='dark'] :where(section, div):has(.animate-blob).from-blue-50,
html[data-theme='dark'] :where(section, div):has(.animate-blob).from-indigo-50,
html[data-theme='dark'] :where(section, div):has(.animate-blob).from-purple-50,
html[data-theme='dark'] :where(section, div):has(.animate-blob).from-pink-50 {
    --tw-gradient-from: var(--arv-bg-deep) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(11 12 11 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html.dark :where(section, div):has(.animate-blob).via-white,
html.dark :where(section, div):has(.animate-blob).to-white,
html.dark :where(section, div):has(.animate-blob).to-gray-50,
html[data-theme='dark'] :where(section, div):has(.animate-blob).via-white,
html[data-theme='dark'] :where(section, div):has(.animate-blob).to-white,
html[data-theme='dark'] :where(section, div):has(.animate-blob).to-gray-50 {
    --tw-gradient-via: var(--arv-bg-section) var(--tw-gradient-via-position) !important;
    --tw-gradient-to: rgb(17 19 17 / 0) var(--tw-gradient-to-position) !important;
}

html.dark :where(section, div):has(.animate-blob) :where(h1, h2, h3),
html[data-theme='dark'] :where(section, div):has(.animate-blob) :where(h1, h2, h3) {
    color: var(--arv-text) !important;
}

html.dark :where(section, div):has(.animate-blob) :where(.text-gray-700, .text-gray-600, .text-gray-500),
html[data-theme='dark'] :where(section, div):has(.animate-blob) :where(.text-gray-700, .text-gray-600, .text-gray-500) {
    color: var(--arv-text-muted) !important;
}

/* Tone down bright blobs in hero */
html.dark :where(section, div):has(.animate-blob) :where([class*='rounded-full'][class*='blur']),
html[data-theme='dark'] :where(section, div):has(.animate-blob) :where([class*='rounded-full'][class*='blur']) {
    opacity: 0.2 !important;
    mix-blend-mode: normal !important;
    filter: blur(80px) !important;
}

html.dark .animate-blob[class*='rounded-full'][class*='blur'],
html[data-theme='dark'] .animate-blob[class*='rounded-full'][class*='blur'] {
    opacity: 0.2 !important;
    mix-blend-mode: normal !important;
    filter: blur(80px) !important;
}

/* Hero cards/chips */
html.dark :where(section, div):has(.animate-blob) :where([class*='bg-white/80'], [class*='bg-white/90'], [class*='backdrop-blur-sm']),
html[data-theme='dark'] :where(section, div):has(.animate-blob) :where([class*='bg-white/80'], [class*='bg-white/90'], [class*='backdrop-blur-sm']) {
    background: rgba(29, 32, 30, .72) !important;
    border-color: var(--arv-border) !important;
    color: var(--arv-text-strong) !important;
}

/* Hero secondary white buttons */
html.dark :where(section, div):has(.animate-blob) :where(a[class*='bg-white'], button[class*='bg-white']),
html[data-theme='dark'] :where(section, div):has(.animate-blob) :where(a[class*='bg-white'], button[class*='bg-white']) {
    background: var(--arv-overlay-panel) !important;
    border-color: var(--arv-border-strong) !important;
    color: var(--arv-text) !important;
}

html.dark :where(section, div):has(.animate-blob) :where(a[class*='bg-white']:hover, button[class*='bg-white']:hover),
html[data-theme='dark'] :where(section, div):has(.animate-blob) :where(a[class*='bg-white']:hover, button[class*='bg-white']:hover) {
    background: var(--arv-active) !important;
}

/* Aipic landing performance band (included by many cate pages) */
html.dark #nb-performance .nb-performance-decor,
html[data-theme='dark'] #nb-performance .nb-performance-decor {
    display: none !important;
}