/* ==========================================================================
   Warembo Design System
   - Theme tokens (light / dark)
   - Dark-mode overrides for existing Tailwind utility markup
   - Modern polish: glass nav, smooth transitions, focus rings, animations
   ========================================================================== */

:root {
    --brand-500: #ec4899;
    --brand-600: #db2777;
    --brand-700: #be185d;

    --bg-page: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-2: #f1f5f9;
    --text-strong: #0f172a;
    --text-body: #334155;
    --text-muted: #64748b;
    --border-soft: #e2e8f0;

    --nav-bg: rgba(255, 255, 255, 0.82);
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
    --shadow-card-hover: 0 4px 8px rgba(15, 23, 42, 0.06), 0 24px 48px -16px rgba(219, 39, 119, 0.22);
    --radius-card: 1rem;

    color-scheme: light;
}

html.dark {
    --bg-page: #0b1120;
    --bg-surface: #111a2e;
    --bg-surface-2: #1a2540;
    --text-strong: #f1f5f9;
    --text-body: #cbd5e1;
    --text-muted: #94a3b8;
    --border-soft: #24314f;

    --nav-bg: rgba(11, 17, 32, 0.82);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -12px rgba(0, 0, 0, 0.55);
    --shadow-card-hover: 0 4px 10px rgba(0, 0, 0, 0.45), 0 24px 48px -16px rgba(219, 39, 119, 0.35);

    color-scheme: dark;
}

/* Smooth theme transitions (after initial paint, to avoid flash) */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease, box-shadow 0.25s ease !important;
}

body {
    background-color: var(--bg-page);
    color: var(--text-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(236, 72, 153, 0.25);
}

/* --------------------------------------------------------------------------
   Brand / gradient helpers
   -------------------------------------------------------------------------- */
.hero-gradient,
.bg-pink-gradient,
.btn-primary {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 55%, #be185d 100%);
}
.btn-primary {
    transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease;
}
.btn-primary:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 12px 28px -8px rgba(219, 39, 119, 0.5);
}
.btn-primary:active { transform: translateY(0) scale(0.99); }

.hover-pink-gradient:hover {
    background: linear-gradient(135deg, #db2777 0%, #be185d 100%);
}
.text-pink-gradient {
    background: linear-gradient(135deg, #f472b6 0%, #db2777 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.package-vip     { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.package-prime   { background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%); }
.package-regular { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.site-nav {
    background: var(--nav-bg);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid var(--border-soft);
    transition: transform 0.32s ease;
}
/* Floating nav on phones: hides scrolling down, slides back scrolling up */
@media (max-width: 767px) {
    .site-nav.nav-hidden { transform: translateY(-105%); }
}
.nav-link {
    position: relative;
    transition: color 0.2s ease;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-500);
    transition: width 0.25s ease;
}
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: var(--brand-500); }
.nav-link.active::after { width: 100%; }

.mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.mobile-menu.open { max-height: 560px; }

/* --------------------------------------------------------------------------
   Mobile bottom tab bar (phones only): slides up while scrolling down,
   slides away scrolling up — mirrors the top nav so one is always visible
   -------------------------------------------------------------------------- */
.mobile-tabbar {
    position: fixed;
    left: 0.875rem;
    right: 0.875rem;
    bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    background: var(--nav-bg);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    border: 1px solid var(--border-soft);
    border-radius: 1.5rem;
    box-shadow: 0 10px 32px -10px rgba(15, 23, 42, 0.35), 0 2px 8px rgba(15, 23, 42, 0.08);
    transform: translateY(0);
    transition: transform 0.32s ease;
}
html.dark .mobile-tabbar {
    box-shadow: 0 10px 32px -10px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.35);
}
.mobile-tabbar.tabbar-hidden { transform: translateY(150%); }
.tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0.55rem 0.25rem 0.6rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: color 0.2s ease, transform 0.15s ease;
}
.tabbar-item i { font-size: 1.05rem; }
.tabbar-item:active { transform: scale(0.94); }
.tabbar-item.active { color: var(--brand-500); }
.tabbar-fab {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    margin: 0 0.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--brand-500), #f43f5e);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 6px 16px -4px rgba(236, 72, 153, 0.55);
    transform: translateY(-0.55rem);
    transition: transform 0.2s ease;
}
.tabbar-fab:active { transform: translateY(-0.55rem) scale(0.92); }

/* tiny captions under floating action buttons (listing view) */
.fab-label {
    font-size: 0.5rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    padding: 0 5px;
    border-radius: 9999px;
    background: var(--nav-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--text-muted);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}

/* tab bar drop-up menu card */
.tabbar-dropup {
    position: fixed;
    right: 1rem;
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 45;
    min-width: 11.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: 1rem;
    box-shadow: var(--shadow-card-hover);
    padding: 0.375rem;
    transform-origin: bottom right;
    animation: dropupIn 0.18s ease;
}
@keyframes dropupIn {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tabbar-dropup a, .tabbar-dropup button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-body);
    border-radius: 0.625rem;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
}
.tabbar-dropup a:hover, .tabbar-dropup button:hover { background: var(--bg-surface-2); color: var(--brand-500); }
.tabbar-dropup i { width: 1rem; text-align: center; color: var(--text-muted); }
.tabbar-dropup a:hover i, .tabbar-dropup button:hover i { color: var(--brand-500); }
.tabbar-dropup .dropup-danger, .tabbar-dropup .dropup-danger i { color: #dc2626; }
@media (min-width: 768px) { .tabbar-dropup { display: none; } }

/* floating filter shortcut — appears once the search card scrolls out of view */
.filter-fab {
    position: fixed;
    top: 4.75rem;
    right: 1rem;
    z-index: 45;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.filter-fab-circle {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--brand-500), #f43f5e);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 8px 20px -6px rgba(236, 72, 153, 0.55);
    transition: transform 0.2s ease;
}
.filter-fab:active .filter-fab-circle { transform: scale(0.92); }
@media (min-width: 768px) {
    .mobile-tabbar { display: none; }
}
@media (max-width: 767px) {
    body { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
    .pwa-install-banner { bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------------------------------
   Cards & surfaces
   -------------------------------------------------------------------------- */
.card-hover { transition: transform 0.28s ease, box-shadow 0.28s ease; }
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

/* --------------------------------------------------------------------------
   Theme toggle
   -------------------------------------------------------------------------- */
.theme-toggle {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: var(--text-muted);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.theme-toggle:hover { background: rgba(236, 72, 153, 0.1); color: var(--brand-500); }
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle .icon-sun, .theme-toggle .icon-moon {
    position: absolute;
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html:not(.dark) .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.4); }
html.dark .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.4); }

/* --------------------------------------------------------------------------
   PWA install prompt
   -------------------------------------------------------------------------- */
.pwa-install-banner {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translate(-50%, 140%);
    z-index: 90;
    width: min(26rem, calc(100vw - 2rem));
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-card-hover);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
    opacity: 0;
}
.pwa-install-banner.show { transform: translate(-50%, 0); opacity: 1; }

/* --------------------------------------------------------------------------
   Toast notifications
   -------------------------------------------------------------------------- */
.toast { animation: slideDown 0.4s ease forwards; }
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.toast-out { animation: slideUp 0.4s ease forwards; }
@keyframes slideUp {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-16px); }
}

/* --------------------------------------------------------------------------
   Scrollbar
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ec4899, #be185d);
    border-radius: 8px;
    border: 2px solid var(--bg-page);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-600); }

/* --------------------------------------------------------------------------
   Focus visibility
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   User dropdown
   -------------------------------------------------------------------------- */
.user-dropdown-container { position: relative; }
.user-dropdown-container .dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 224px;
    background: var(--bg-surface);
    border-radius: 14px;
    box-shadow: var(--shadow-card-hover);
    border: 1px solid var(--border-soft);
    padding: 8px 0;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    transform-origin: top right;
}
.user-dropdown-container:hover .dropdown-menu,
.user-dropdown-container .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.user-dropdown-container .dropdown-bridge {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
    z-index: 99;
}
.dropdown-menu a {
    padding: 10px 16px;
    display: block;
    font-size: 14px;
    color: var(--text-body);
    transition: background 0.15s ease, color 0.15s ease;
    text-decoration: none;
}
.dropdown-menu a:hover { background: rgba(236, 72, 153, 0.08); color: var(--brand-500); }
.dropdown-menu .dropdown-divider { border-top: 1px solid var(--border-soft); margin: 6px 12px; }
.dropdown-menu .dropdown-danger { color: #ef4444; }
.dropdown-menu .dropdown-danger:hover { background: rgba(239, 68, 68, 0.08); color: #ef4444; }

@media (max-width: 768px) {
    .user-dropdown-container .dropdown-menu {
        top: 100%;
        right: 0;
        margin-top: 4px;
        width: 280px;
        max-width: calc(100vw - 32px);
        border-radius: 16px;
        max-height: 70vh;
        overflow-y: auto;
    }
    .user-dropdown-container .dropdown-bridge { display: none; }
}
@media (max-width: 480px) {
    .user-dropdown-container .dropdown-menu {
        width: 260px;
        right: 8px;
        max-width: calc(100vw - 16px);
    }
}

/* ==========================================================================
   DARK MODE — remaps the Tailwind utilities used across the site.
   Everything below only applies under `html.dark`, so all existing pages
   get a coherent dark theme without per-element edits.
   ========================================================================== */

html.dark body,
html.dark .bg-gray-50,
html.dark .bg-gray-100 { background-color: var(--bg-page) !important; }

html.dark .bg-white { background-color: var(--bg-surface) !important; }
html.dark .bg-gray-200 { background-color: var(--bg-surface-2) !important; }

/* Text */
html.dark .text-gray-900,
html.dark .text-gray-800 { color: var(--text-strong) !important; }
html.dark .text-gray-700 { color: #cbd5e1 !important; }
html.dark .text-gray-600 { color: #b0bdd3 !important; }
html.dark .text-gray-500 { color: var(--text-muted) !important; }
html.dark .text-gray-400 { color: #7d8aa5 !important; }
html.dark .text-gray-300 { color: #5b6a88 !important; }

/* Borders */
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 { border-color: var(--border-soft) !important; }
html.dark .border { border-color: var(--border-soft); }

/* Soft tinted backgrounds -> muted dark tints */
html.dark .bg-pink-50,
html.dark .bg-rose-50,
html.dark .bg-pink-100,
html.dark .hover\:bg-pink-50:hover,
html.dark .hover\:bg-rose-50:hover { background-color: rgba(236, 72, 153, 0.12) !important; }
html.dark .text-pink-700,
html.dark .text-pink-600 { color: #f9a8d4 !important; }
html.dark .bg-green-50 { background-color: rgba(16, 185, 129, 0.12) !important; }
html.dark .bg-red-50,
html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.12) !important; }
html.dark .bg-yellow-50,
html.dark .bg-yellow-100 { background-color: rgba(245, 158, 11, 0.14) !important; }
html.dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.14) !important; }
html.dark .bg-blue-50,
html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.12) !important; }
html.dark .bg-indigo-50,
html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.14) !important; }
html.dark .bg-purple-50,
html.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.14) !important; }
html.dark .bg-green-100 { background-color: rgba(16, 185, 129, 0.16) !important; }

/* Tinted text stays readable on dark */
html.dark .text-green-700,
html.dark .text-green-800 { color: #6ee7b7 !important; }
html.dark .text-red-700,
html.dark .text-red-800 { color: #fca5a5 !important; }
html.dark .text-yellow-700,
html.dark .text-yellow-800 { color: #fcd34d !important; }
html.dark .text-orange-700 { color: #fdba74 !important; }
html.dark .text-blue-700,
html.dark .text-blue-800 { color: #93c5fd !important; }
html.dark .text-indigo-600,
html.dark .text-indigo-700,
html.dark .text-indigo-800 { color: #a5b4fc !important; }
html.dark .text-purple-700,
html.dark .text-purple-800 { color: #d8b4fe !important; }
html.dark .text-pink-800 { color: #f9a8d4 !important; }

/* Tinted borders soften in dark */
html.dark .border-green-200,
html.dark .border-green-400 { border-color: rgba(16, 185, 129, 0.35) !important; }
html.dark .border-red-200,
html.dark .border-red-400,
html.dark .border-red-500 { border-color: rgba(239, 68, 68, 0.4) !important; }
html.dark .border-yellow-200,
html.dark .border-yellow-300,
html.dark .border-yellow-400 { border-color: rgba(245, 158, 11, 0.35) !important; }
html.dark .border-orange-300 { border-color: rgba(249, 115, 22, 0.35) !important; }
html.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.35) !important; }
html.dark .border-pink-400 { border-color: rgba(236, 72, 153, 0.45) !important; }
html.dark .border-pink-soft { border-color: rgba(236, 72, 153, 0.25) !important; }

/* Form controls */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark select,
html.dark textarea {
    background-color: var(--bg-surface-2);
    color: var(--text-strong);
    border-color: var(--border-soft);
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #6b7a99; }
html.dark select option { background-color: var(--bg-surface); color: var(--text-strong); }

/* Tables */
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover { background-color: rgba(255, 255, 255, 0.04) !important; }
html.dark .divide-gray-200 > * + *,
html.dark .divide-gray-100 > * + * { border-color: var(--border-soft) !important; }

/* Shadows get deeper in dark mode */
html.dark .shadow-sm,
html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl,
html.dark .shadow-2xl {
    box-shadow: var(--shadow-card) !important;
}

/* Images dim very slightly for comfort */
html.dark img { filter: brightness(0.92); }

/* Gradient sections (login/register headers etc.) stay vivid */
html.dark .bg-gradient-to-r,
html.dark .bg-gradient-to-b { filter: none; }

/* SweetAlert2 in dark mode */
html.dark .swal2-popup {
    background: var(--bg-surface) !important;
    color: var(--text-body) !important;
    border: 1px solid var(--border-soft);
}
html.dark .swal2-title,
html.dark .swal2-html-container { color: var(--text-strong) !important; }
html.dark .swal2-input,
html.dark .swal2-textarea,
html.dark .swal2-select {
    background: var(--bg-surface-2) !important;
    color: var(--text-strong) !important;
    border-color: var(--border-soft) !important;
}
html.dark .swal2-validation-message { background: rgba(239, 68, 68, 0.15) !important; color: #fca5a5 !important; }

/* ==========================================================================
   Admin custom components (settings, categories, packages) — these pages use
   raw CSS classes that the utility remap above can't reach.
   ========================================================================== */

/* admin/settings.php */
html.dark .settings-section {
    background: var(--bg-surface-2);
    border-color: var(--border-soft);
}
html.dark .settings-section h4 { color: var(--text-strong); }
html.dark .setting-group-label { color: var(--text-muted); }
html.dark .setting-description { color: #7d8aa5; }
html.dark .encrypted-badge {
    background: rgba(245, 158, 11, 0.16);
    color: #fcd34d;
}
html.dark .status-badge.success { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }
html.dark .status-badge.warning { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
html.dark .status-badge.error { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
html.dark .set-badge { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }
html.dark .toggle-visibility { color: var(--text-muted); }
html.dark .toggle-visibility:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-strong);
}
html.dark .value-preview { color: var(--text-muted); }
html.dark .value-preview .font-mono {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-body);
}

/* admin/categories.php + admin/packages.php pickers & sortables */
html.dark .icon-picker-grid .icon-option {
    background: var(--bg-surface-2);
    color: var(--text-body);
}
html.dark .icon-picker-grid .icon-option:hover,
html.dark .icon-picker-grid .icon-option.selected {
    background: rgba(249, 115, 22, 0.15);
}
html.dark .color-picker-grid,
html.dark .border-color-picker-grid {
    background: var(--bg-surface-2);
    border-color: var(--border-soft);
}
html.dark .color-picker-grid .color-option.custom-color,
html.dark .border-color-picker-grid .color-option {
    background: var(--bg-surface);
    color: var(--text-body);
    border-color: var(--border-soft);
}
html.dark .sortable-row.sortable-chosen { background: rgba(249, 115, 22, 0.15) !important; }
html.dark .sortable-row.sortable-ghost { background: var(--bg-surface-2) !important; }
html.dark .sort-handle:hover { color: #cbd5e1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Hero card — "Discover Local Escorts": soft gradient card, deep shadow,
   and light blobs that drift on independent paths so it feels alive
   -------------------------------------------------------------------------- */
.hero-card {
    position: relative;
    background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 55%, #fff1f2 100%);
    border: 1px solid var(--border-soft);
    border-radius: 1.75rem;
    box-shadow: 0 24px 64px -24px rgba(219, 39, 119, 0.35), var(--shadow-card);
    overflow: hidden;
}
html.dark .hero-card {
    background: linear-gradient(135deg, #231227 0%, var(--bg-surface) 55%, #26101f 100%);
    box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.65), var(--shadow-card);
}

.hero-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(48px);
    pointer-events: none;
    will-change: transform, opacity;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
html.dark .hero-blob { opacity: 0.35; }

@keyframes heroDriftA {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(46px, -28px) scale(1.14); }
    66%  { transform: translate(-30px, 24px) scale(0.92); }
    100% { transform: translate(22px, 38px) scale(1.08); }
}
@keyframes heroDriftB {
    0%   { transform: translate(0, 0) scale(1); }
    40%  { transform: translate(-54px, 26px) scale(1.12); }
    75%  { transform: translate(32px, -36px) scale(0.9); }
    100% { transform: translate(-18px, -12px) scale(1.06); }
}
@keyframes heroDriftC {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.55; }
    50%  { transform: translate(38px, 30px) scale(1.18); opacity: 0.8; }
    100% { transform: translate(-42px, -18px) scale(0.95); opacity: 0.6; }
}
.hero-blob-1 { animation-name: heroDriftA; animation-duration: 13s; }
.hero-blob-2 { animation-name: heroDriftB; animation-duration: 17s; }
.hero-blob-3 { animation-name: heroDriftC; animation-duration: 11s; }
.hero-blob-4 { animation-name: heroDriftA; animation-duration: 21s; animation-delay: -9s; }
.hero-blob-5 { animation-name: heroDriftB; animation-duration: 15s; animation-delay: -5s; }