/*
 * ============================================================================
 * ALKEMIST PRO — Premium High-End Visual Overhaul
 * Full-spectrum upgrade: compact spacing, cinematic animations,
 * glassmorphism, micro-interactions, and premium aesthetics.
 * ============================================================================
 */

/* ==========================================================================
   1. DESIGN SYSTEM — Tokens & Variables
   ========================================================================== */
:root {
    /* Brand Colors */
    --pro-primary:        #0b3d52;
    --pro-primary-deep:   #060f16;
    --pro-primary-mid:    #0e5470;
    --pro-secondary:      #08879a;
    --pro-secondary-soft: rgba(8, 135, 154, 0.12);
    --pro-accent:         #e09f2e;
    --pro-accent-dim:     rgba(224, 159, 46, 0.18);
    --pro-accent-glow:    rgba(224, 159, 46, 0.35);
    --pro-green:          #16a34a;
    --pro-teal:           #0d9488;

    /* Surfaces */
    --pro-surface:        #f7f9fb;
    --pro-surface-2:      #eef2f7;
    --pro-surface-3:      #e4eaf2;
    --pro-white:          #ffffff;
    --pro-dark:           #060f16;

    /* Text */
    --pro-text:           #0c1a24;
    --pro-text-secondary: #3d5a6b;
    --pro-text-muted:     #6b8899;
    --pro-text-light:     rgba(255,255,255,0.82);

    /* Borders */
    --pro-border:         rgba(180, 200, 214, 0.5);
    --pro-border-strong:  rgba(140, 170, 190, 0.65);
    --pro-border-glow:    rgba(8, 135, 154, 0.3);

    /* Shadows — Layered System */
    --pro-shadow-xs:  0 1px 3px rgba(6,15,22,0.05);
    --pro-shadow-sm:  0 2px 8px rgba(6,15,22,0.06), 0 1px 2px rgba(6,15,22,0.04);
    --pro-shadow-md:  0 4px 16px rgba(6,15,22,0.07), 0 2px 4px rgba(6,15,22,0.04);
    --pro-shadow-lg:  0 12px 28px rgba(6,15,22,0.09), 0 4px 8px rgba(6,15,22,0.05);
    --pro-shadow-xl:  0 24px 48px rgba(6,15,22,0.11), 0 8px 16px rgba(6,15,22,0.06);
    --pro-shadow-2xl: 0 40px 80px rgba(6,15,22,0.14), 0 16px 32px rgba(6,15,22,0.07);
    --pro-shadow-glow: 0 0 0 4px rgba(8,135,154,0.15), 0 8px 24px rgba(8,135,154,0.12);
    --pro-shadow-accent: 0 8px 32px rgba(224,159,46,0.28);

    /* Radii */
    --pro-r-xs:  6px;
    --pro-r-sm:  10px;
    --pro-r-md:  14px;
    --pro-r-lg:  20px;
    --pro-r-xl:  28px;
    --pro-r-full: 9999px;

    /* Timing Functions */
    --pro-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --pro-ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --pro-ease-in:     cubic-bezier(0.4, 0, 1, 1);
    --pro-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.2);
    --pro-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Transition Speeds */
    --pro-t-fast:   0.15s;
    --pro-t-base:   0.25s;
    --pro-t-slow:   0.4s;
    --pro-t-slower: 0.6s;

    /* Compact Spacing Scale */
    --pro-space-1:  4px;
    --pro-space-2:  8px;
    --pro-space-3:  12px;
    --pro-space-4:  16px;
    --pro-space-5:  20px;
    --pro-space-6:  24px;
    --pro-space-8:  32px;
    --pro-space-10: 40px;
    --pro-space-12: 48px;
}

/* ==========================================================================
   2. KEYFRAME ANIMATIONS
   ========================================================================== */
@keyframes pro-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pro-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pro-scale-in {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes pro-slide-right {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes pro-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}
@keyframes pro-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 var(--pro-accent-glow); }
    50%       { box-shadow: 0 0 0 8px transparent; }
}
@keyframes pro-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-4px); }
}
@keyframes pro-spin-slow {
    to { transform: rotate(360deg); }
}
@keyframes pro-marquee-bounce {
    0%, 100% { transform: translateX(0); }
    50%       { transform: translateX(-25%); }
}
@keyframes pro-border-flow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes pro-count-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   3. BASE OVERRIDES — Body, Typography, Global
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    background:
        radial-gradient(ellipse 80% 40% at 10% 0%, rgba(8,135,154,0.04) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 95% 10%, rgba(224,159,46,0.05) 0%, transparent 55%),
        var(--pro-surface) !important;
    color: var(--pro-text) !important;
    font-family: "Manrope", system-ui, -apple-system, sans-serif !important;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Override base variables with our premium system */
:root {
    --primary:       var(--pro-primary) !important;
    --primary-deep:  var(--pro-primary-deep) !important;
    --secondary:     var(--pro-secondary) !important;
    --accent:        var(--pro-accent) !important;
    --surface:       var(--pro-surface) !important;
    --surface-strong:var(--pro-surface-2) !important;
    --card:          var(--pro-white) !important;
    --text:          var(--pro-text) !important;
    --muted:         var(--pro-text-muted) !important;
    --border:        var(--pro-border) !important;
    --shadow:        var(--pro-shadow-lg) !important;
    --radius:        var(--pro-r-md) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Outfit", system-ui, sans-serif !important;
    letter-spacing: -0.02em;
    color: var(--pro-text);
    line-height: 1.15;
}

a { transition: color var(--pro-t-base) var(--pro-ease); }

img { max-width: 100%; height: auto; display: block; }

/* Scrollbar — Slim & branded */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--pro-surface-2); }
::-webkit-scrollbar-thumb {
    background: var(--pro-border-strong);
    border-radius: var(--pro-r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--pro-secondary); }

/* Selection color */
::selection {
    background: rgba(8, 135, 154, 0.18);
    color: var(--pro-primary-deep);
}

/* ==========================================================================
   4. COMPACT SPACING — Section & Home Sections
   ========================================================================== */

/* Reduce massive section padding to a compact, dense layout */
.home-section {
    padding: 44px 0 !important;
}

.home-section + .home-section {
    padding-top: 36px !important;
}

body.home .home-section {
    padding-block: clamp(28px, 3.5vw, 44px) !important;
}

body.home .home-section + .home-section {
    margin-top: 0 !important;
}

.section-heading {
    gap: 6px !important;
    margin-bottom: 18px !important;
}

.section-heading-row {
    margin-bottom: 18px !important;
    padding-bottom: 12px !important;
}

.section-heading h2,
.cta-panel h2 {
    font-size: clamp(1.4rem, 2.8vw, 2.2rem) !important;
    margin-bottom: 0 !important;
    line-height: 1.12 !important;
}

.section-heading p {
    font-size: 0.88rem !important;
    margin: 0 !important;
    line-height: 1.55 !important;
}

/* Gradient text for key headings */
.section-heading h2 {
    background: linear-gradient(120deg, var(--pro-primary-deep) 0%, var(--pro-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Override gradient for headings inside dark containers */
.home-band .section-heading h2,
.site-footer .section-heading h2,
.slide-content h1 {
    background: none !important;
    -webkit-text-fill-color: inherit !important;
    color: #ffffff !important;
}

/* ==========================================================================
   5. COMPACT CARD GRIDS
   ========================================================================== */

.division-grid {
    gap: 14px !important;
}

.card-grid {
    gap: 14px !important;
}

.product-card-grid {
    gap: 12px !important;
}

.home-mini-card-grid {
    gap: 12px !important;
}

/* Compact card internal padding */
.feature-card,
.brand-tile,
.entry-card,
.page-card,
.resource-card {
    padding: 16px !important;
}

.card-body {
    padding: 14px !important;
}

.resource-card .card-body {
    padding: 14px !important;
}

/* Card thumb tighter */
.card-thumb {
    aspect-ratio: 16 / 8 !important;
    max-height: 130px !important;
    border-radius: var(--pro-r-md) var(--pro-r-md) 0 0 !important;
    margin: -16px -16px 0 !important;
}

.resource-card h3,
.brand-tile h3 {
    margin: 8px 0 8px !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
}

/* ==========================================================================
   6. PREMIUM CARD SYSTEM — Shadows, Hover, Accents
   ========================================================================== */

.card,
.feature-card,
.brand-tile,
.entry-card,
.page-card,
.archive-summary-card,
.detail-summary-card,
.portal-card,
.resource-card,
.widget,
.sticky-card,
.alkemist-product-card {
    background: var(--pro-white) !important;
    border: 1px solid var(--pro-border) !important;
    border-radius: var(--pro-r-md) !important;
    box-shadow: var(--pro-shadow-sm) !important;
    transition:
        transform var(--pro-t-base) var(--pro-ease-spring),
        box-shadow var(--pro-t-base) var(--pro-ease),
        border-color var(--pro-t-base) var(--pro-ease) !important;
    overflow: hidden;
    position: relative;
}

/* Premium top-accent bar on every card */
.card::before,
.feature-card::before,
.brand-tile::before,
.resource-card::before,
.entry-card::before,
.page-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--pro-primary) 0%,
        var(--pro-secondary) 50%,
        var(--pro-accent) 100%);
    opacity: 0;
    transition: opacity var(--pro-t-base) var(--pro-ease);
}

.card:hover::before,
.feature-card:hover::before,
.brand-tile:hover::before,
.resource-card:hover::before,
.entry-card:hover::before,
.page-card:hover::before {
    opacity: 1;
}

.card:hover,
.feature-card:hover,
.brand-tile:hover,
.entry-card:hover,
.page-card:hover,
.resource-card:hover,
.directory-product-card:hover,
.alkemist-product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--pro-shadow-lg) !important;
    border-color: var(--pro-border-glow) !important;
}

/* Division card accent bar */
.division-card::after,
.resource-card::after {
    height: 3px !important;
    background: linear-gradient(90deg,
        var(--pro-primary),
        var(--pro-secondary),
        var(--pro-accent)) !important;
    opacity: 1;
}

/* Directory product card */
.directory-product-card {
    border-radius: var(--pro-r-md) !important;
    border-color: var(--pro-border) !important;
    transition:
        transform var(--pro-t-base) var(--pro-ease-spring),
        box-shadow var(--pro-t-base) var(--pro-ease),
        border-color var(--pro-t-base) var(--pro-ease) !important;
}

/* Term pills — compact */
.term-pill {
    padding: 3px 9px !important;
    font-size: 0.72rem !important;
    border-radius: var(--pro-r-full) !important;
    background: var(--pro-secondary-soft) !important;
    color: var(--pro-secondary) !important;
}

/* Resource card signals — compact */
.resource-card-signal {
    min-height: 30px !important;
    padding: 4px 8px !important;
    border-radius: var(--pro-r-sm) !important;
    font-size: 0.72rem;
    box-shadow: none !important;
    border-color: var(--pro-border) !important;
}

.resource-card-signal__icon {
    width: 22px !important;
    height: 22px !important;
}

.gig-card-meta span {
    min-height: 26px !important;
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
    background: var(--pro-secondary-soft) !important;
    color: var(--pro-secondary) !important;
    border-radius: var(--pro-r-full) !important;
}

/* ==========================================================================
   7. GLASSMORPHISM STICKY HEADER
   ========================================================================== */

.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    background: rgba(6, 15, 22, 0.86) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    transition:
        background var(--pro-t-base) var(--pro-ease),
        box-shadow var(--pro-t-base) var(--pro-ease) !important;
}

.site-header.is-scrolled {
    background: rgba(5, 12, 18, 0.96) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
    border-bottom-color: rgba(255,255,255,0.05) !important;
}

.header-shell {
    background: transparent !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
}

/* Compact topbar */
.topbar {
    padding: 10px 0 !important;
    gap: 16px !important;
}

/* Announcement ribbon — slim */
.header-announcement-inner {
    padding: 7px 0 !important;
    font-size: 0.8rem !important;
}

.header-announcement__chip {
    min-height: 26px !important;
    padding: 4px 10px !important;
    font-size: 0.74rem !important;
}

/* Navigation links */
.site-nav .menu,
.site-nav ul {
    gap: 2px !important;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    color: rgba(255,255,255,0.80) !important;
    font-weight: 500 !important;
    font-size: 0.84rem !important;
    padding: 6px 12px !important;
    border-radius: var(--pro-r-full) !important;
    transition:
        background var(--pro-t-fast) var(--pro-ease),
        color var(--pro-t-fast) var(--pro-ease) !important;
    position: relative;
    white-space: nowrap;
}

.site-nav a::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 50%;
    width: 0; height: 2px;
    background: var(--pro-accent);
    border-radius: var(--pro-r-full);
    transition: width var(--pro-t-base) var(--pro-ease-spring);
    transform: translateX(-50%);
}

.site-nav a:hover {
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
}

.site-nav a:hover::after { width: 14px; }

.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a {
    background: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
}

.site-nav .current-menu-item > a::after { width: 20px; }

/* Brand lockup — tight */
.brand-lockup {
    gap: 10px !important;
}

.brand-mark .custom-logo {
    max-height: 44px !important;
}

.brand-mark span {
    width: 42px !important; height: 42px !important;
    border-radius: var(--pro-r-sm) !important;
    background: linear-gradient(135deg, var(--pro-accent), #c98a10) !important;
    font-size: 0.8rem !important;
    box-shadow: 0 4px 14px var(--pro-accent-glow) !important;
}

.brand-kicker {
    display: none !important; /* Hide eyebrow on compact header */
}

.site-title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
    color: #ffffff !important;
}

.site-tagline {
    font-size: 0.75rem !important;
    color: rgba(255,255,255,0.55) !important;
    letter-spacing: 0;
}

/* Header chips (action buttons in header) */
.header-chip {
    min-height: 34px !important;
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    border-radius: var(--pro-r-full) !important;
    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
    transition: background var(--pro-t-fast) var(--pro-ease) !important;
    gap: 6px !important;
}

.header-chip:hover {
    background: rgba(255,255,255,0.16) !important;
}

/* Mobile header icons */
.mobile-header-icon-button {
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--pro-r-sm) !important;
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.10) !important;
}

.menu-toggle {
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--pro-r-sm) !important;
}

/* Desktop search bar — compact */
.header-search-desktop__inner {
    padding: 8px 0 10px !important;
}

.universal-search--desktop .universal-search input {
    height: 42px !important;
    font-size: 0.88rem !important;
    border-radius: var(--pro-r-full) !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(255,255,255,0.96) !important;
    box-shadow: none !important;
}

.universal-search--desktop .universal-search button {
    height: 42px !important;
    padding: 0 22px !important;
    border-radius: var(--pro-r-full) !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, var(--pro-accent), #c98a10) !important;
    color: var(--pro-primary-deep) !important;
}

/* ==========================================================================
   8. PREMIUM SEARCH — Full Overlay
   ========================================================================== */

.universal-search input {
    height: 50px !important;
    border-radius: var(--pro-r-full) !important;
    border: 1px solid var(--pro-border-strong) !important;
    padding: 0 20px !important;
    font-size: 0.92rem !important;
    background: var(--pro-white) !important;
    box-shadow: var(--pro-shadow-xs) !important;
    transition:
        border-color var(--pro-t-base) var(--pro-ease),
        box-shadow var(--pro-t-base) var(--pro-ease) !important;
}

.universal-search input:focus {
    border-color: var(--pro-secondary) !important;
    box-shadow: var(--pro-shadow-glow) !important;
    outline: none;
}

.universal-search button {
    height: 50px !important;
    padding: 0 24px !important;
    border-radius: var(--pro-r-full) !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    background: linear-gradient(135deg, var(--pro-accent), #c98a10) !important;
    color: var(--pro-primary-deep) !important;
    transition:
        transform var(--pro-t-fast) var(--pro-ease-spring),
        box-shadow var(--pro-t-fast) var(--pro-ease) !important;
}

.universal-search button:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--pro-shadow-accent) !important;
}

.search-suggestions {
    border-radius: var(--pro-r-lg) !important;
    border: 1px solid var(--pro-border) !important;
    box-shadow: var(--pro-shadow-2xl) !important;
    background: rgba(255,255,255,0.99) !important;
    backdrop-filter: blur(16px) !important;
    overflow: hidden !important;
    margin-top: 6px;
}

.search-item {
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--pro-surface-2) !important;
    transition:
        background var(--pro-t-fast) var(--pro-ease),
        padding-left var(--pro-t-fast) var(--pro-ease) !important;
}

.search-item:hover {
    background: var(--pro-surface) !important;
    padding-left: 20px !important;
}

.search-item-head span {
    font-size: 0.7rem !important;
    letter-spacing: 0.07em;
    color: var(--pro-secondary) !important;
}

/* ==========================================================================
   9. HERO SLIDER — Cinematic Upgrade
   ========================================================================== */

.slide {
    min-height: clamp(480px, 65vh, 700px) !important;
}

.slide picture,
.slide img {
    height: clamp(480px, 65vh, 700px) !important;
    object-fit: cover;
    object-position: center;
}

.slide-overlay {
    background:
        linear-gradient(90deg,
            rgba(6,15,22,0.90) 0%,
            rgba(6,15,22,0.55) 52%,
            rgba(6,15,22,0.18) 100%),
        linear-gradient(180deg,
            rgba(6,15,22,0.15) 0%,
            rgba(6,15,22,0.35) 100%) !important;
}

.slide-content {
    padding: 0 0 48px !important;
}

.slide-content h1 {
    max-width: 780px !important;
    font-size: clamp(2rem, 4.5vw, 4.2rem) !important;
    line-height: 0.97 !important;
    letter-spacing: -0.035em;
    margin: 12px 0 14px !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.slide-content p {
    font-size: clamp(0.88rem, 1.4vw, 1rem) !important;
    max-width: 580px !important;
    line-height: 1.6 !important;
    color: rgba(220, 235, 240, 0.9) !important;
    margin: 0 0 20px !important;
}

.eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 12px !important;
    border-radius: var(--pro-r-full) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    background: var(--pro-accent-dim) !important;
    color: var(--pro-accent) !important;
    border: 1px solid var(--pro-accent-glow);
}

/* Slide animation on active */
.slide.active .eyebrow {
    animation: pro-slide-right var(--pro-t-slow) var(--pro-ease-out) both;
}

.slide.active .slide-content h1 {
    animation: pro-fade-up var(--pro-t-slow) 0.1s var(--pro-ease-out) both;
}

.slide.active .slide-content p {
    animation: pro-fade-up var(--pro-t-slow) 0.2s var(--pro-ease-out) both;
}

.slide.active .hero-actions {
    animation: pro-fade-up var(--pro-t-slow) 0.3s var(--pro-ease-out) both;
}

.hero-actions {
    gap: 10px !important;
}

.hero-points {
    margin-top: 16px !important;
    gap: 8px !important;
}

.hero-points span {
    padding: 5px 12px !important;
    font-size: 0.78rem !important;
    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: var(--pro-r-full) !important;
    color: rgba(230,242,245,0.9) !important;
}

/* Slider controls */
.slider-controls {
    bottom: 20px !important;
    gap: 8px !important;
}

.slider-controls button {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.14) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    backdrop-filter: blur(10px) !important;
    transition:
        background var(--pro-t-fast) var(--pro-ease),
        transform var(--pro-t-fast) var(--pro-ease-spring) !important;
}

.slider-controls button:hover {
    background: rgba(255,255,255,0.24) !important;
    transform: scale(1.08);
}

/* ==========================================================================
   10. PREMIUM BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 9px 20px !important;
    min-height: 40px !important;
    border-radius: var(--pro-r-md) !important;
    font-weight: 700 !important;
    font-size: 0.84rem !important;
    letter-spacing: 0.01em;
    line-height: 1.2;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    transition:
        transform var(--pro-t-fast) var(--pro-ease-spring),
        box-shadow var(--pro-t-fast) var(--pro-ease),
        background var(--pro-t-base) var(--pro-ease),
        opacity var(--pro-t-fast) var(--pro-ease) !important;
}

.btn:hover {
    transform: translateY(-2px) !important;
}

.btn:active {
    transform: translateY(0) scale(0.98) !important;
    transition-duration: 0.08s !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--pro-accent) 0%, #c98a10 100%) !important;
    color: var(--pro-primary-deep) !important;
    box-shadow: 0 4px 14px var(--pro-accent-glow) !important;
}

.btn-primary:hover {
    box-shadow: 0 8px 24px var(--pro-accent-glow) !important;
}

.btn-secondary {
    background: linear-gradient(135deg, var(--pro-primary-mid) 0%, var(--pro-secondary) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(8,135,154,0.22) !important;
}

.btn-secondary:hover {
    box-shadow: 0 8px 24px rgba(8,135,154,0.35) !important;
}

.btn-outline {
    background: var(--pro-white) !important;
    border: 1px solid var(--pro-border-strong) !important;
    color: var(--pro-primary) !important;
}

.btn-outline:hover {
    background: var(--pro-surface-2) !important;
    border-color: var(--pro-secondary) !important;
    color: var(--pro-secondary) !important;
}

.btn-outline.light {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
}

.btn-outline.light:hover {
    background: rgba(255,255,255,0.18) !important;
}

/* Portal action buttons — even more compact */
.portal-actions .btn,
.frontend-submit-row .btn,
.alkemist-product-card__actions .btn,
.brand-tile__actions .btn,
.home-mini-card-grid .btn {
    min-height: 34px !important;
    padding: 6px 14px !important;
    font-size: 0.78rem !important;
    border-radius: var(--pro-r-sm) !important;
}

/* ==========================================================================
   11. HOME INTENT ADVISOR — Compact & Elegant
   ========================================================================== */

.home-intent-advisor {
    margin-top: clamp(14px, 2vw, 24px) !important;
    margin-bottom: clamp(14px, 2vw, 24px) !important;
}

.home-intent-advisor__shell {
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr) !important;
    gap: 12px !important;
    padding: 16px !important;
    border-radius: var(--pro-r-xl) !important;
    border: 1px solid var(--pro-border) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.97), rgba(238,245,250,0.95)),
        radial-gradient(circle at 0% 100%, var(--pro-accent-dim), transparent 40%),
        radial-gradient(circle at 100% 0%, rgba(8,135,154,0.06), transparent 40%) !important;
    box-shadow: var(--pro-shadow-xl) !important;
    backdrop-filter: blur(16px) !important;
}

.home-intent-advisor__copy {
    padding: 8px !important;
    gap: 8px !important;
}

.home-intent-advisor__copy h2 {
    font-size: clamp(1.2rem, 2vw, 1.75rem) !important;
    line-height: 1.1 !important;
    color: var(--pro-primary-deep) !important;
    background: linear-gradient(120deg, var(--pro-primary-deep), var(--pro-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.home-intent-advisor__copy p {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    color: var(--pro-text-secondary) !important;
}

.home-intent-advisor__actions .btn {
    min-height: 34px !important;
    padding: 6px 14px !important;
    font-size: 0.76rem !important;
}

.home-intent-advisor__signals {
    gap: 6px !important;
    margin-top: 0 !important;
}

.home-intent-advisor__signals span {
    padding: 7px !important;
    border-radius: var(--pro-r-sm) !important;
    border-color: var(--pro-border) !important;
    background: rgba(255,255,255,0.8) !important;
}

.home-intent-advisor__signals strong {
    font-size: 0.88rem !important;
    color: var(--pro-primary) !important;
}

.home-intent-advisor__signals span {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: var(--pro-text-muted) !important;
}

/* Intent Route Cards */
.home-intent-advisor__routes {
    gap: 7px !important;
}

.home-intent-route {
    min-height: 88px !important;
    padding: 10px !important;
    border-radius: var(--pro-r-md) !important;
    border: 1px solid var(--pro-border) !important;
    background: var(--pro-white) !important;
    box-shadow: var(--pro-shadow-xs) !important;
    transition:
        transform var(--pro-t-fast) var(--pro-ease-bounce),
        box-shadow var(--pro-t-fast) var(--pro-ease),
        border-color var(--pro-t-fast) var(--pro-ease) !important;
}

.home-intent-route:hover {
    transform: translateY(-3px) !important;
    border-color: var(--pro-secondary) !important;
    box-shadow: var(--pro-shadow-md) !important;
}

.home-intent-route.is-suggested {
    border-color: rgba(224,159,46,0.45) !important;
    background: linear-gradient(160deg, #fffbee, #ffffff) !important;
    box-shadow: 0 6px 20px rgba(224,159,46,0.12) !important;
}

.home-intent-route span {
    font-size: 0.62rem !important;
    padding: 2px 7px !important;
    border-radius: var(--pro-r-full) !important;
    background: var(--pro-secondary-soft) !important;
    color: var(--pro-secondary) !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
}

.home-intent-route strong {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    color: var(--pro-primary-deep) !important;
}

.home-intent-route small {
    font-size: 0.68rem !important;
    color: var(--pro-text-muted) !important;
    line-height: 1.35 !important;
}

/* Panel area */
.home-intent-advisor__panel {
    padding: 10px !important;
    border-radius: var(--pro-r-md) !important;
    border-color: var(--pro-border) !important;
    background: rgba(255,255,255,0.75) !important;
    gap: 8px !important;
}

.home-intent-advisor__state strong,
.home-intent-advisor__recent > span {
    font-size: 0.62rem !important;
    letter-spacing: 0.08em;
    color: var(--pro-primary) !important;
}

/* Recent search pills */
.home-intent-advisor__recent [data-home-intent-pill-list] span {
    padding: 4px 10px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    background: var(--pro-secondary-soft) !important;
    color: var(--pro-primary) !important;
    border-radius: var(--pro-r-full) !important;
    transition: background var(--pro-t-fast) var(--pro-ease) !important;
}

.home-intent-advisor__recent [data-home-intent-pill-list] span:hover {
    background: rgba(8,135,154,0.2) !important;
}

/* ==========================================================================
   12. HOME SECTIONS — Compact, Premium
   ========================================================================== */

/* Metrics / Stats band */
.home-band {
    background:
        linear-gradient(135deg, rgba(6,15,22,0.98) 0%, rgba(11,61,82,0.96) 100%) !important;
    padding: 32px 0 !important;
}

.metrics-grid {
    gap: 12px !important;
}

.metric {
    padding: 18px !important;
    border-radius: var(--pro-r-md) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    background: rgba(255,255,255,0.05) !important;
    transition:
        background var(--pro-t-base) var(--pro-ease),
        transform var(--pro-t-fast) var(--pro-ease-spring) !important;
}

.metric:hover {
    background: rgba(255,255,255,0.09) !important;
    transform: translateY(-2px);
}

.metric strong {
    display: block;
    font-size: 1rem !important;
    margin-bottom: 6px !important;
    color: var(--pro-accent) !important;
    font-family: "Outfit", sans-serif !important;
}

/* CTA Panel — compact */
.cta-panel {
    padding: 24px !important;
    gap: 18px !important;
    border-radius: var(--pro-r-lg) !important;
    background:
        linear-gradient(135deg, var(--pro-primary-deep) 0%, var(--pro-primary-mid) 100%) !important;
    position: relative;
    overflow: hidden;
}

.cta-panel::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224,159,46,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.cta-panel h2 {
    font-size: clamp(1.2rem, 2.5vw, 1.9rem) !important;
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ==========================================================================
   13. PAGE HEROES — Compact, Impactful
   ========================================================================== */

.page-hero {
    padding: 28px 0 16px !important;
}

.page-hero h1 {
    font-size: clamp(1.8rem, 3.5vw, 3rem) !important;
    margin: 8px 0 6px !important;
    line-height: 1.08 !important;
}

.archive-hero-grid,
.detail-hero-grid {
    gap: 16px !important;
    grid-template-columns: minmax(0, 1fr) 280px !important;
}

.archive-description {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
}

.archive-hero-actions,
.detail-hero-actions {
    margin-top: 12px !important;
    gap: 8px !important;
}

.directory-page-hero {
    padding: 8px 0 14px !important;
}

.directory-page-hero__heading h1 {
    font-size: clamp(1.8rem, 3.5vw, 3rem) !important;
    line-height: 1.06 !important;
}

.directory-page-hero__summary {
    font-size: 0.9rem !important;
    line-height: 1.62 !important;
}

.directory-page-layout {
    padding-bottom: 50px !important;
    gap: 18px !important;
    grid-template-columns: minmax(0, 1fr) 290px !important;
}

/* ==========================================================================
   14. MOBILE HOMEPAGE — Premium & Compact
   ========================================================================== */

/* Separate views clearly: hide mobile experience on desktop, show desktop experience */
.mobile-home-experience {
    display: none !important;
}
.home-desktop-experience {
    display: block !important;
}

/* Mobile-only styles (viewport <= 780px) */
@media (max-width: 780px) {
    /* Hide desktop experience, show mobile experience */
    .home-desktop-experience {
        display: none !important;
    }

    .mobile-home-experience {
        display: block !important;
    }

    .mobile-home-hero {
        padding: 28px 16px 24px !important;
        background:
            linear-gradient(175deg, var(--pro-primary-deep) 0%, var(--pro-primary-mid) 100%) !important;
        position: relative;
        overflow: hidden;
    }

    .mobile-home-hero::before {
        content: '';
        position: absolute;
        top: -30px; right: -30px;
        width: 200px; height: 200px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(224,159,46,0.15) 0%, transparent 70%);
        pointer-events: none;
    }

    .mobile-home-hero::after {
        content: '';
        position: absolute;
        bottom: -40px; left: -20px;
        width: 180px; height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(8,135,154,0.12) 0%, transparent 70%);
        pointer-events: none;
    }

    .mobile-home-hero__copy {
        position: relative; z-index: 1;
        margin-bottom: 14px;
    }

    .mobile-home-hero__copy .eyebrow {
        margin-bottom: 8px !important;
        font-size: 0.68rem !important;
        background: rgba(224,159,46,0.18) !important;
        color: var(--pro-accent) !important;
        border-color: rgba(224,159,46,0.3) !important;
    }

    .mobile-home-hero__copy h1 {
        font-size: 1.7rem !important;
        line-height: 1.12 !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        background: none !important;
        -webkit-text-fill-color: #ffffff !important;
        text-shadow: 0 2px 12px rgba(0,0,0,0.3);
        margin: 0 !important;
    }

    .mobile-home-hero__actions {
        position: relative; z-index: 1;
        display: grid;
        gap: 10px !important;
    }

    /* Mobile search card */
    .mobile-home-search-card {
        display: flex;
        flex-direction: column;
        gap: 3px !important;
        padding: 12px 14px !important;
        border-radius: var(--pro-r-md) !important;
        background: rgba(255,255,255,0.10) !important;
        border: 1px solid rgba(255,255,255,0.16) !important;
        backdrop-filter: blur(12px) !important;
        transition:
            background var(--pro-t-fast) var(--pro-ease),
            border-color var(--pro-t-fast) var(--pro-ease) !important;
    }

    .mobile-home-search-card:hover {
        background: rgba(255,255,255,0.15) !important;
    }

    .mobile-home-search-card span {
        font-size: 0.7rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        color: var(--pro-accent) !important;
    }

    .mobile-home-search-card strong {
        font-size: 0.82rem !important;
        font-weight: 500 !important;
        color: rgba(220,235,240,0.85) !important;
    }

    /* Mobile action grid buttons */
    .mobile-home-action-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
    }

    .mobile-home-action-grid .btn {
        min-height: 40px !important;
        font-size: 0.82rem !important;
        border-radius: var(--pro-r-md) !important;
    }

    /* Mobile jump nav — compact pill strip */
    .mobile-home-jump {
        display: flex;
        align-items: center;
        gap: 8px !important;
        padding: 8px 12px !important;
        overflow-x: auto;
        scrollbar-width: none !important;
        background: rgba(255,255,255,0.90) !important;
        backdrop-filter: blur(10px) !important;
        border-bottom: 1px solid var(--pro-border) !important;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .mobile-home-jump::-webkit-scrollbar { display: none; }

    .mobile-home-jump a {
        flex-shrink: 0;
        padding: 5px 13px !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        border-radius: var(--pro-r-full) !important;
        background: var(--pro-surface-2) !important;
        color: var(--pro-text) !important;
        white-space: nowrap;
        transition:
            background var(--pro-t-fast) var(--pro-ease),
            color var(--pro-t-fast) var(--pro-ease),
            transform var(--pro-t-fast) var(--pro-ease-spring) !important;
    }

    .mobile-home-jump a:hover {
        background: var(--pro-secondary) !important;
        color: #ffffff !important;
        transform: translateY(-1px);
    }

    /* Mobile section heads */
    .mobile-home-section {
        padding: 20px 14px !important;
    }

    .mobile-home-section__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid var(--pro-border) !important;
    }

    .mobile-home-section__head span {
        font-size: 0.68rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        color: var(--pro-secondary) !important;
        padding: 3px 9px !important;
        border-radius: var(--pro-r-full) !important;
        background: var(--pro-secondary-soft) !important;
    }

    .mobile-home-section__head h2 {
        font-size: 1.1rem !important;
        font-weight: 800 !important;
        margin: 0 !important;
        flex: 1;
        color: var(--pro-text) !important;
        background: none !important;
        -webkit-text-fill-color: var(--pro-text) !important;
        line-height: 1.2 !important;
    }

    .mobile-home-section__head a {
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        color: var(--pro-secondary) !important;
        white-space: nowrap;
        flex-shrink: 0;
        transition: color var(--pro-t-fast) var(--pro-ease) !important;
    }

    .mobile-home-section__head a:hover { color: var(--pro-primary) !important; }

    /* Mobile mini cards — compact, premium */
    .mobile-home-mini-card {
        width: 168px !important;
        flex-shrink: 0;
        border-radius: var(--pro-r-md) !important;
        border: 1px solid var(--pro-border) !important;
        background: var(--pro-white) !important;
        box-shadow: var(--pro-shadow-sm) !important;
        overflow: hidden;
        transition:
            transform var(--pro-t-fast) var(--pro-ease-spring),
            box-shadow var(--pro-t-fast) var(--pro-ease),
            border-color var(--pro-t-fast) var(--pro-ease) !important;
    }

    .mobile-home-mini-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: var(--pro-shadow-md) !important;
        border-color: var(--pro-border-glow) !important;
    }

    .mobile-home-mini-card__media {
        display: block;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: var(--pro-surface-2);
    }

    .mobile-home-mini-card__media img {
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform var(--pro-t-slow) var(--pro-ease) !important;
    }

    .mobile-home-mini-card:hover .mobile-home-mini-card__media img {
        transform: scale(1.04);
    }

    .mobile-home-mini-card__media span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%; height: 100%;
        font-family: "Outfit", sans-serif;
        font-size: 2rem;
        font-weight: 800;
        color: var(--pro-primary-mid);
        background: linear-gradient(135deg, var(--pro-surface-2), var(--pro-surface-3));
    }

    .mobile-home-mini-card__body {
        padding: 10px 10px 12px !important;
        display: grid;
        gap: 4px;
    }

    .mobile-home-mini-card__body span {
        font-size: 0.66rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
        color: var(--pro-secondary) !important;
        background: var(--pro-secondary-soft) !important;
        padding: 2px 7px !important;
        border-radius: var(--pro-r-full) !important;
        width: fit-content;
    }

    .mobile-home-mini-card__body h3 {
        margin: 0 !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        color: var(--pro-text) !important;
    }

    .mobile-home-mini-card__body h3 a {
        color: inherit !important;
    }

    .mobile-home-mini-card__body p {
        margin: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1.4 !important;
        color: var(--pro-text-muted) !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mobile-home-mini-card__action {
        display: inline-block;
        margin-top: 6px !important;
        padding: 4px 10px !important;
        border-radius: var(--pro-r-sm) !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        background: var(--pro-surface-2) !important;
        color: var(--pro-primary) !important;
        transition:
            background var(--pro-t-fast) var(--pro-ease),
            color var(--pro-t-fast) var(--pro-ease) !important;
        width: fit-content;
    }

    .mobile-home-mini-card__action:hover {
        background: var(--pro-secondary) !important;
        color: #ffffff !important;
    }

    /* Card Rail — horizontal scroll with snapping */
    .mobile-home-card-rail {
        display: flex !important;
        gap: 10px !important;
        overflow-x: auto !important;
        padding-bottom: 12px !important;
        padding-left: 2px !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        scrollbar-color: var(--pro-border-strong) var(--pro-surface-2) !important;
    }

    .mobile-home-card-rail::-webkit-scrollbar { height: 4px; }
    .mobile-home-card-rail::-webkit-scrollbar-track { background: var(--pro-surface-2); }
    .mobile-home-card-rail::-webkit-scrollbar-thumb {
        background: var(--pro-border-strong);
        border-radius: var(--pro-r-full);
    }

    .mobile-home-mini-card {
        scroll-snap-align: start !important;
    }

    /* Mobile tile grid */
    .mobile-home-tile-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .mobile-home-tile {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 12px 8px !important;
        border-radius: var(--pro-r-md) !important;
        border: 1px solid var(--pro-border) !important;
        background: var(--pro-white) !important;
        box-shadow: var(--pro-shadow-xs) !important;
        text-align: center;
        transition:
            transform var(--pro-t-fast) var(--pro-ease-spring),
            box-shadow var(--pro-t-fast) var(--pro-ease),
            border-color var(--pro-t-fast) var(--pro-ease) !important;
    }

    .mobile-home-tile:hover {
        transform: translateY(-2px) !important;
        box-shadow: var(--pro-shadow-sm) !important;
        border-color: var(--pro-secondary) !important;
    }

    .mobile-home-tile__icon {
        width: 44px !important; height: 44px !important;
        border-radius: var(--pro-r-md) !important;
        background: var(--pro-secondary-soft) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        font-family: "Outfit", sans-serif !important;
        font-size: 1.2rem !important;
        font-weight: 800 !important;
        color: var(--pro-secondary) !important;
    }

    .mobile-home-tile__icon img {
        width: 100%; height: 100%;
        object-fit: cover;
    }

    .mobile-home-tile strong {
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: var(--pro-text) !important;
    }

    .mobile-home-tile small {
        font-size: 0.64rem !important;
        color: var(--pro-text-muted) !important;
    }

    /* Mobile water treatment section */
    .mobile-home-water__lead strong {
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        color: var(--pro-text-secondary) !important;
        line-height: 1.5 !important;
    }

    .mobile-home-link-list {
        display: grid !important;
        gap: 7px !important;
    }

    .mobile-home-link-row {
        display: grid !important;
        gap: 2px !important;
        padding: 10px 12px !important;
        border-radius: var(--pro-r-md) !important;
        border: 1px solid var(--pro-border) !important;
        background: var(--pro-white) !important;
        color: var(--pro-text) !important;
        transition:
            border-color var(--pro-t-fast) var(--pro-ease),
            transform var(--pro-t-fast) var(--pro-ease-spring) !important;
    }

    .mobile-home-link-row:hover {
        border-color: var(--pro-secondary) !important;
        transform: translateX(3px) !important;
    }

    .mobile-home-link-row span {
        font-size: 0.66rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        color: var(--pro-secondary) !important;
    }

    .mobile-home-link-row strong {
        font-size: 0.84rem !important;
        font-weight: 700 !important;
        color: var(--pro-text) !important;
    }

    .mobile-home-link-row small {
        font-size: 0.72rem !important;
        color: var(--pro-text-muted) !important;
        line-height: 1.4 !important;
    }

    /* Chip row */
    .mobile-home-chip-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 7px !important;
        margin-top: 10px !important;
    }

    .mobile-home-chip-row a {
        padding: 5px 12px !important;
        border-radius: var(--pro-r-full) !important;
        border: 1px solid var(--pro-border) !important;
        background: var(--pro-white) !important;
        font-size: 0.74rem !important;
        font-weight: 700 !important;
        color: var(--pro-primary) !important;
        transition:
            background var(--pro-t-fast) var(--pro-ease),
            border-color var(--pro-t-fast) var(--pro-ease),
            color var(--pro-t-fast) var(--pro-ease) !important;
    }

    .mobile-home-chip-row a:hover {
        background: var(--pro-secondary) !important;
        border-color: var(--pro-secondary) !important;
        color: #ffffff !important;
    }

    /* Mobile final CTA */
    .mobile-home-final-cta {
        padding: 28px 16px !important;
        background:
            linear-gradient(165deg, var(--pro-primary-deep) 0%, var(--pro-primary-mid) 100%) !important;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .mobile-home-final-cta::before {
        content: '';
        position: absolute;
        top: -60px; left: 50%;
        transform: translateX(-50%);
        width: 280px; height: 280px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(224,159,46,0.10) 0%, transparent 70%);
        pointer-events: none;
    }

    .mobile-home-final-cta span {
        display: block;
        font-size: 0.7rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        color: var(--pro-accent) !important;
        margin-bottom: 8px !important;
    }

    .mobile-home-final-cta h2 {
        font-size: 1.35rem !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        background: none !important;
        -webkit-text-fill-color: #ffffff !important;
        line-height: 1.2 !important;
        margin: 0 0 18px !important;
        max-width: 320px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .mobile-home-final-cta .mobile-home-action-grid {
        max-width: 300px !important;
        margin: 0 auto !important;
    }

    /* Mobile mini card multi-actions */
    .mobile-home-mini-card__actions {
        display: flex !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        margin-top: 6px !important;
    }

    .mobile-home-mini-card__action--cart {
        background: var(--pro-primary) !important;
        color: #ffffff !important;
    }

    .mobile-home-mini-card__action--cart:hover {
        background: var(--pro-secondary) !important;
        color: #ffffff !important;
    }

    /* Mobile empty states */
    .mobile-home-empty {
        padding: 20px !important;
        text-align: center;
        color: var(--pro-text-muted) !important;
        font-size: 0.84rem !important;
        background: var(--pro-surface-2) !important;
        border-radius: var(--pro-r-md) !important;
        border: 1px dashed var(--pro-border-strong) !important;
    }
}

/* ==========================================================================
   15. FOOTER — Sleek & Premium Dark
   ========================================================================== */

.site-footer {
    background:
        linear-gradient(175deg, #060f16 0%, #0b2330 100%) !important;
    border-top: 1px solid rgba(255,255,255,0.04) !important;
    padding: 52px 0 28px !important;
    color: rgba(220,232,240,0.8) !important;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(8,135,154,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 32px 40px;
    align-items: start;
}

.footer-brand .eyebrow {
    margin-bottom: 10px !important;
    background: rgba(224,159,46,0.15) !important;
    color: var(--pro-accent) !important;
    border-color: rgba(224,159,46,0.25) !important;
    font-size: 0.68rem !important;
}

.site-footer h3 {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 8px !important;
}

.site-footer h4 {
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.5) !important;
    margin: 0 0 14px !important;
}

.site-footer p {
    font-size: 0.84rem !important;
    line-height: 1.6 !important;
    color: rgba(180,200,215,0.75) !important;
    margin: 0 0 14px !important;
}

.footer-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.footer-tags span {
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    border-radius: var(--pro-r-full) !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: rgba(210,228,240,0.8) !important;
}

.site-footer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    gap: 8px !important;
}

.site-footer li a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: rgba(180,200,215,0.75) !important;
    transition:
        color var(--pro-t-fast) var(--pro-ease),
        transform var(--pro-t-fast) var(--pro-ease) !important;
    text-decoration: none !important;
}

.site-footer li a::before {
    content: '';
    display: inline-block;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--pro-secondary);
    opacity: 0;
    transform: scale(0);
    transition:
        opacity var(--pro-t-fast) var(--pro-ease),
        transform var(--pro-t-fast) var(--pro-ease-spring) !important;
}

.site-footer li a:hover {
    color: var(--pro-accent) !important;
    transform: translateX(4px) !important;
}

.site-footer li a:hover::before {
    opacity: 1;
    transform: scale(1);
}

/* Footer nav menu */
.site-footer .menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    gap: 8px !important;
}

.site-footer .menu a {
    display: inline-flex !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: rgba(180,200,215,0.75) !important;
    transition:
        color var(--pro-t-fast) var(--pro-ease),
        transform var(--pro-t-fast) var(--pro-ease) !important;
}

.site-footer .menu a:hover {
    color: var(--pro-accent) !important;
    transform: translateX(4px) !important;
}

/* Footer bottom bar */
.footer-bottom {
    margin-top: 36px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    color: rgba(130,155,175,0.7) !important;
    font-size: 0.78rem !important;
}

/* Footer area selector */
.footer-area-selector {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: var(--pro-r-md) !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: rgba(200,220,230,0.9) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background var(--pro-t-fast) var(--pro-ease) !important;
}

.footer-area-selector:hover {
    background: rgba(255,255,255,0.10) !important;
}

.footer-area-selector__icon svg {
    width: 16px; height: 16px;
    fill: var(--pro-accent);
}

.footer-area-selector__text strong {
    display: block;
    font-size: 0.78rem;
    color: rgba(210,228,240,0.9) !important;
}

.footer-area-selector__text small {
    font-size: 0.68rem;
    color: rgba(140,170,190,0.7) !important;
}

/* ==========================================================================
   16. FLOATING PAGE SHORTCUT BUTTONS
   ========================================================================== */

.page-shortcuts {
    right: 16px !important;
    bottom: 90px !important;
    gap: 8px !important;
}

.page-shortcuts__button {
    width: 46px !important;
    height: 46px !important;
    border-radius: var(--pro-r-md) !important;
    background: linear-gradient(160deg, rgba(6,15,22,0.96), rgba(11,61,82,0.94)) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: var(--pro-shadow-lg) !important;
    backdrop-filter: blur(12px) !important;
    transition:
        transform var(--pro-t-fast) var(--pro-ease-spring),
        box-shadow var(--pro-t-fast) var(--pro-ease),
        background var(--pro-t-fast) var(--pro-ease) !important;
}

.page-shortcuts__button:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--pro-shadow-xl) !important;
    background: linear-gradient(160deg, rgba(11,61,82,0.98), rgba(8,135,154,0.94)) !important;
}

/* ==========================================================================
   17. MOBILE FOOTER NAV — Compact Glass
   ========================================================================== */

.mobile-header-lower {
    background: rgba(6,15,22,0.95) !important;
    backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
}

.mobile-header-lower-inner {
    padding: 8px 0 10px !important;
    gap: 6px !important;
}

.mobile-footer-nav__item {
    min-height: 52px !important;
    padding: 7px 4px !important;
    border-radius: var(--pro-r-md) !important;
    background: rgba(255,255,255,0.06) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    gap: 4px !important;
    transition:
        background var(--pro-t-fast) var(--pro-ease),
        transform var(--pro-t-fast) var(--pro-ease-spring) !important;
}

.mobile-footer-nav__item:hover {
    background: rgba(255,255,255,0.12) !important;
    transform: translateY(-1px);
}

.mobile-footer-nav__icon {
    width: 20px !important; height: 20px !important;
}

/* ==========================================================================
   18. SEARCH OVERLAY — Premium Dark
   ========================================================================== */

.header-search-overlay__backdrop {
    background: rgba(5,12,18,0.80) !important;
    backdrop-filter: blur(16px) !important;
}

.header-search-overlay__dialog {
    border-radius: var(--pro-r-xl) !important;
    background: linear-gradient(180deg, rgba(6,15,22,0.99), rgba(10,30,45,0.97)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: var(--pro-shadow-2xl) !important;
    padding: 20px !important;
    margin-top: 18px !important;
}

.header-search-overlay__top h2 {
    font-size: clamp(1.6rem, 4vw, 2.6rem) !important;
    margin: 8px 0 6px !important;
}

.header-search-overlay__close {
    width: 40px !important; height: 40px !important;
    border-radius: var(--pro-r-sm) !important;
    border-color: rgba(255,255,255,0.12) !important;
    background: rgba(255,255,255,0.08) !important;
    transition:
        background var(--pro-t-fast) var(--pro-ease),
        transform var(--pro-t-fast) var(--pro-ease-spring) !important;
}

.header-search-overlay__close:hover {
    background: rgba(255,255,255,0.16) !important;
    transform: scale(1.06);
}

.header-search-wrap {
    padding-top: 14px !important;
}

/* ==========================================================================
   19. COMPACT ARCHIVE & DETAIL PAGES
   ========================================================================== */

.category-directory-shell {
    padding-bottom: 50px !important;
}

.category-directory-section,
.category-directory-featured {
    gap: 12px !important;
}

.category-directory-chip-row {
    gap: 7px !important;
}

.category-directory-chip-row a {
    min-height: 34px !important;
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    border-radius: var(--pro-r-full) !important;
    border-color: var(--pro-border) !important;
    background: var(--pro-white) !important;
    box-shadow: none !important;
    transition:
        background var(--pro-t-fast) var(--pro-ease),
        border-color var(--pro-t-fast) var(--pro-ease),
        transform var(--pro-t-fast) var(--pro-ease-spring) !important;
}

.category-directory-chip-row a:hover {
    background: var(--pro-secondary-soft) !important;
    border-color: var(--pro-secondary) !important;
    transform: translateY(-1px);
}

.category-directory-card {
    padding: 13px !important;
    gap: 10px !important;
}

.category-directory-card__media {
    min-height: 110px !important;
    border-radius: var(--pro-r-sm) !important;
}

.directory-page-chip {
    min-height: 30px !important;
    padding: 5px 11px !important;
    font-size: 0.72rem !important;
    border-radius: var(--pro-r-full) !important;
}

/* Detail breadcrumb */
.detail-breadcrumb-wrap {
    padding-top: 12px !important;
}

.detail-breadcrumb {
    font-size: 0.8rem !important;
    gap: 6px !important;
}

/* ==========================================================================
   20. COMPACT FRONTEND SEARCH FILTERS
   ========================================================================== */

.frontend-section-search__filter {
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 0.76rem !important;
    border-radius: var(--pro-r-full) !important;
    border-color: var(--pro-border) !important;
    box-shadow: none !important;
    transition:
        background var(--pro-t-fast) var(--pro-ease),
        border-color var(--pro-t-fast) var(--pro-ease),
        color var(--pro-t-fast) var(--pro-ease),
        transform var(--pro-t-fast) var(--pro-ease-spring) !important;
}

.frontend-section-search__filter:hover {
    border-color: var(--pro-secondary) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--pro-shadow-xs) !important;
}

.frontend-section-search__filter.is-active {
    background: linear-gradient(135deg, var(--pro-primary), var(--pro-secondary)) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(8,135,154,0.25) !important;
}

.frontend-section-search__field input {
    min-height: 42px !important;
    border-radius: var(--pro-r-full) !important;
    border-color: var(--pro-border-strong) !important;
    padding: 0 16px !important;
    font-size: 0.88rem !important;
    box-shadow: none !important;
}

.frontend-section-search__field input:focus {
    border-color: var(--pro-secondary) !important;
    box-shadow: var(--pro-shadow-glow) !important;
}

/* ==========================================================================
   21. ALERTS, NOTICES & EMPTY STATES
   ========================================================================== */

.mobile-home-empty {
    padding: 18px !important;
    border-radius: var(--pro-r-md) !important;
    font-size: 0.82rem !important;
}

/* ==========================================================================
   22. FOCUS STATES — Accessibility & Aesthetics
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--pro-secondary) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* ==========================================================================
   23. SOCIAL SHARE PANEL
   ========================================================================== */

.social-share-panel__toggle {
    min-height: 46px !important;
    padding: 0 14px 0 10px !important;
    border-radius: var(--pro-r-full) !important;
    background: linear-gradient(135deg, var(--pro-primary-deep), var(--pro-primary-mid)) !important;
    box-shadow: var(--pro-shadow-lg) !important;
}

/* ==========================================================================
   24. RESPONSIVE — Mobile Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    .home-section {
        padding: 28px 0 !important;
    }

    .section-heading h2 {
        font-size: clamp(1.3rem, 5.5vw, 1.7rem) !important;
    }

    .topbar {
        padding: 8px 0 !important;
    }

    .site-title {
        font-size: 0.95rem !important;
    }

    .page-shortcuts {
        left: 12px !important;
        right: auto !important;
        bottom: 10px !important;
        gap: 6px !important;
    }

    .page-shortcuts__button {
        width: 42px !important;
        height: 42px !important;
        border-radius: var(--pro-r-sm) !important;
    }

    .header-search-overlay__dialog {
        margin-top: 10px !important;
        border-radius: var(--pro-r-lg) !important;
        padding: 14px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px 20px !important;
    }

    .footer-brand {
        grid-column: 1 / -1 !important;
    }

    .mobile-home-tile-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .mobile-home-section {
        padding: 16px 12px !important;
    }
}

@media (max-width: 480px) {
    .mobile-home-tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .mobile-home-mini-card {
        width: 148px !important;
    }

    .mobile-home-final-cta h2 {
        font-size: 1.2rem !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 769px) {
    .home-intent-advisor__shell {
        grid-template-columns: minmax(0, 0.85fr) minmax(340px, 1fr) !important;
    }

    .metrics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .division-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1280px) {
    .footer-grid {
        grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr !important;
    }
}