/**
 * South Sudan Wholesale — Master Navigation, Layout & Interaction Architecture
 * Enforces true sticky header, zero top gaps, zero dead space, 100% interactive responsiveness,
 * restored WhatsApp floating button, powered link styling, and universal Light/Dark contrast.
 */

/* ==========================================================================
   1. GLOBAL RESET & ZERO-GAP VIEWPORT ALIGNMENT
   ========================================================================== */
html {
    margin: 0 !important;
    padding: 0 !important;
    scroll-behavior: smooth;
}

body,
body.ag-corporate-body {
    margin: 0 !important;
    padding-top: 72px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    background: var(--tollo-bg, #FAF8F5);
    color: var(--tollo-text, #17211D);
}

#page,
#primary,
.site-main {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   2. FIXED STICKY HEADER — Always Anchored At Viewport Top
   ========================================================================== */
.ag-site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 72px !important;
    z-index: 10000 !important;
    margin: 0 !important;
    background: var(--tollo-header-bg, #FFFFFF) !important;
    border-bottom: 1px solid var(--tollo-border, #E1DBCF) !important;
    box-shadow: 0 2px 14px rgba(12, 27, 42, 0.05) !important;
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.ag-site-header.ag-scrolled {
    box-shadow: 0 4px 24px rgba(12, 27, 42, 0.12) !important;
}

/* ==========================================================================
   3. HERO & PAGE HEADER SEAMLESS FLOW (ZERO DEAD SPACE)
   ========================================================================== */
.ag-split-hero.tolo-cpg-hero {
    margin-top: 0 !important;
    padding-top: 24px !important;
    padding-bottom: clamp(36px, 4vw, 56px) !important;
}

.ag-page-header {
    margin-top: 0 !important;
    padding: clamp(36px, 4.5vw, 52px) 0 !important;
}

/* ==========================================================================
   4. DROPDOWN MENUS (ABOUT & PRODUCTS) & HOVER BRIDGES
   ========================================================================== */
.ag-has-dropdown {
    position: relative;
}

.ag-has-dropdown .ag-mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: min(680px, 92vw);
    background: var(--tollo-surface, #FFFFFF);
    border: 1px solid var(--tollo-border, #E1DBCF);
    border-radius: var(--ag-radius-lg, 16px);
    box-shadow: 0 20px 50px rgba(12, 27, 42, 0.16);
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 10005;
}

/* Invisible bridge so cursor never drops hover between nav item and menu */
.ag-has-dropdown .ag-mega-menu::before,
.ag-has-dropdown::after {
    content: '';
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 24px;
    background: transparent;
    pointer-events: auto;
}

.ag-has-dropdown:hover .ag-mega-menu,
.ag-has-dropdown:focus-within .ag-mega-menu,
.ag-has-dropdown.is-open .ag-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Products Mega Menu */
.ag-has-products-mega {
    position: relative;
}

.ag-products-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: min(94vw, 920px);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    background: var(--tollo-surface, #FFFFFF);
    color: var(--tollo-text, #334155);
    border-radius: var(--ag-radius-lg, 16px);
    box-shadow: 0 24px 64px rgba(12, 27, 42, 0.22);
    border: 1px solid var(--tollo-border, #E1DBCF);
    z-index: 10006;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    padding: 24px 28px;
}

.ag-products-mega::before,
.ag-has-products-mega::after {
    content: '';
    position: absolute;
    top: -28px;
    left: 0;
    right: 0;
    height: 28px;
    background: transparent;
    pointer-events: auto;
}

.ag-products-mega.is-open,
.ag-has-products-mega:hover .ag-products-mega,
.ag-has-products-mega:focus-within .ag-products-mega,
.ag-products-mega:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* ==========================================================================
   5. OVERLAYS & MODALS — 100% NON-BLOCKING WHEN INACTIVE
   ========================================================================== */
.ag-rfq-drawer-overlay,
.ag-portal-modal-overlay,
.ag-mobile-overlay {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.ag-rfq-drawer-overlay.active,
.ag-rfq-drawer-overlay.open,
.ag-rfq-drawer-overlay.is-open,
.ag-portal-modal-overlay.active,
.ag-portal-modal-overlay.open,
.ag-portal-modal-overlay.is-open,
.ag-mobile-overlay.active,
.ag-mobile-overlay.open,
.ag-mobile-overlay.is-open {
    display: flex !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================================
   6. RESTORED WHATSAPP FLOATING BUTTON
   ========================================================================== */
.ag-whatsapp-fab {
    position: fixed !important;
    bottom: 28px !important;
    right: 28px !important;
    z-index: 9995 !important;
    width: 58px !important;
    height: 58px !important;
    background: #25D366 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background-color 0.25s ease !important;
}

.ag-whatsapp-fab:hover {
    background: #1EBE5B !important;
    transform: scale(1.08) !important;
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.6) !important;
}

.ag-whatsapp-fab svg {
    width: 32px !important;
    height: 32px !important;
    fill: #FFFFFF !important;
}

@media (max-width: 768px) {
    .ag-whatsapp-fab {
        bottom: 20px !important;
        right: 20px !important;
        width: 52px !important;
        height: 52px !important;
    }
    .ag-whatsapp-fab svg {
        width: 28px !important;
        height: 28px !important;
    }
}

/* ==========================================================================
   7. FOOTER POWERED LINK STYLING
   ========================================================================== */
.ag-footer-powered {
    margin-left: auto;
}

.ag-powered-link {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: none !important;
    color: var(--tollo-lime, #C8EF50) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
}

.ag-powered-link:hover,
.ag-powered-link:focus-visible {
    color: #FFFFFF !important;
    background: rgba(200, 239, 80, 0.15) !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   8. UNIVERSAL CONTRAST & THEME SYSTEM (LIGHT & DARK MODE)
   ========================================================================== */
:root {
    --tollo-badge-green-bg: #D4F2E2;
    --tollo-badge-green-text: #073B2C;
    --tollo-badge-amber-bg: #FEF3C7;
    --tollo-badge-amber-text: #78350F;
    --tollo-badge-teal-bg: #CCFBF1;
    --tollo-badge-teal-text: #115E59;
    --tollo-badge-brand-bg: #E0E7FF;
    --tollo-badge-brand-text: #1E1B4B;
    --tollo-badge-navy-bg: #E2E8F0;
    --tollo-badge-navy-text: #0F172A;
}

[data-theme="dark"] {
    --tollo-badge-green-bg: rgba(34, 197, 94, 0.2);
    --tollo-badge-green-text: #86EFAC;
    --tollo-badge-amber-bg: rgba(245, 158, 11, 0.2);
    --tollo-badge-amber-text: #FDE68A;
    --tollo-badge-teal-bg: rgba(20, 184, 166, 0.2);
    --tollo-badge-teal-text: #5EEAD4;
    --tollo-badge-brand-bg: rgba(99, 102, 241, 0.2);
    --tollo-badge-brand-text: #C7D2FE;
    --tollo-badge-navy-bg: rgba(148, 163, 184, 0.2);
    --tollo-badge-navy-text: #F1F5F9;
}

.ag-badge-green { background: var(--tollo-badge-green-bg) !important; color: var(--tollo-badge-green-text) !important; }
.ag-badge-amber { background: var(--tollo-badge-amber-bg) !important; color: var(--tollo-badge-amber-text) !important; }
.ag-badge-teal { background: var(--tollo-badge-teal-bg) !important; color: var(--tollo-badge-teal-text) !important; }
.ag-badge-brand { background: var(--tollo-badge-brand-bg) !important; color: var(--tollo-badge-brand-text) !important; }
.ag-badge-navy { background: var(--tollo-badge-navy-bg) !important; color: var(--tollo-badge-navy-text) !important; }

/* Contact Terminal Info Column Clickable & Contrast Fixes */
.ag-terminal-info-col {
    position: relative;
    z-index: 10;
}

.ag-terminal-info-col .ag-contact-card {
    background: var(--tollo-surface, #FFFFFF) !important;
    border: 1px solid var(--tollo-border, #E1DBCF) !important;
    color: var(--tollo-text, #17211D) !important;
    margin-bottom: 20px !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(12, 27, 42, 0.06) !important;
}

.ag-terminal-info-col h3 {
    color: var(--tollo-heading, #0C1B2A) !important;
}

.ag-terminal-info-col a {
    color: var(--tollo-focus, #18705C) !important;
    text-decoration: none !important;
}

[data-theme="dark"] .ag-terminal-info-col .ag-contact-card {
    background: var(--tollo-surface, #121F1A) !important;
    border-color: var(--tollo-border, #2A3D34) !important;
}

[data-theme="dark"] .ag-terminal-info-col a {
    color: var(--tollo-lime, #C8EF50) !important;
}

/* Clickability guarantees */
a,
button,
input[type="submit"],
input[type="button"],
.ag-btn,
.ag-switch-pill,
.ag-bento-tab,
.ag-agency-tab,
.ag-category-pill,
.tolo-quick-chip,
.ag-theme-toggle,
.tollo-theme-toggle,
.ag-faq-item,
.ag-hub-node,
.ag-rfq-open-btn,
.ag-portal-open-btn {
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation;
}

/* ==========================================================================
   9. 3D INTERACTIVE ALL REPRESENTED PRINCIPALS CARDS
   ========================================================================== */
.ag-agency-grid-showcase {
    margin-top: 48px;
    padding-top: 36px;
    border-top: 1px solid var(--tollo-border);
}

.ag-agrid-header-row {
    margin-bottom: 24px;
}

.ag-agrid-title {
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    color: var(--tollo-heading) !important;
    margin: 0 0 6px 0 !important;
}

.ag-agrid-subtitle {
    font-size: 0.88rem !important;
    color: var(--tollo-text-muted) !important;
}

.ag-agency-cards-grid[data-3d-grid] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 18px !important;
    perspective: 1200px !important;
}

.ag-agrid-card {
    position: relative !important;
    background: linear-gradient(135deg, #102B23 0%, #17211D 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--ag-radius-md, 12px) !important;
    padding: 22px 18px !important;
    transform-style: preserve-3d !important;
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    color: #FFFFFF !important;
}

.ag-agrid-card:hover,
.ag-agrid-card:focus-visible {
    border-color: var(--tollo-lime, #C8EF50) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 20px rgba(200, 239, 80, 0.15) !important;
}

[data-theme="dark"] .ag-agrid-card:hover,
[data-theme="dark"] .ag-agrid-card:focus-visible {
    border-color: var(--tollo-lime) !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(200, 239, 80, 0.15) !important;
}

.ag-agrid-card-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.ag-agrid-card-inner {
    position: relative;
    z-index: 2;
    transform-style: preserve-3d;
    transition: transform 0.28s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ag-agrid-badge {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.ag-agrid-flag {
    font-size: 1.3rem !important;
    line-height: 1 !important;
}

.ag-agrid-country {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
}

.ag-agrid-exclusive-tag {
    margin-left: auto !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.05em !important;
    background: rgba(200, 239, 80, 0.15) !important;
    color: var(--tollo-lime, #C8EF50) !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
}

.ag-agrid-name {
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
}

.ag-agrid-desc {
    font-size: 0.84rem !important;
    color: rgba(255, 255, 255, 0.92) !important;
    line-height: 1.5 !important;
    margin: 0 0 14px 0 !important;
    flex: 1 1 auto !important;
}

.ag-agrid-secondary-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 8px 10px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border-radius: var(--ag-radius-sm, 6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    font-size: 0.74rem !important;
    margin-bottom: 12px !important;
}

.ag-ameta-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.ag-ameta-label {
    color: rgba(255, 255, 255, 0.75) !important;
}

.ag-ameta-val {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.ag-agrid-card-foot {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    margin-top: auto !important;
}

.ag-agrid-tag {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: var(--tollo-lime, #C8EF50) !important;
}

.ag-agrid-cta-arrow {
    font-size: 1rem !important;
    color: var(--tollo-focus) !important;
    transition: transform 0.2s ease !important;
}

.ag-agrid-card:hover .ag-agrid-cta-arrow {
    transform: translateX(4px) !important;
    color: var(--tollo-lime) !important;
}

/* ==========================================================================
   10. INTEGRATED PRODUCT DISCOVERY INTERFACE
   ========================================================================== */
.ag-discovery-interface {
    background: var(--tollo-surface) !important;
    border: 1px solid var(--tollo-border) !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
    padding: clamp(20px, 3vw, 28px) !important;
    margin-bottom: 36px !important;
    box-shadow: 0 4px 20px rgba(12, 27, 42, 0.05) !important;
}

.ag-discovery-search-row {
    margin-bottom: 20px !important;
}

.ag-discovery-search-box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.ag-search-icon {
    position: absolute !important;
    left: 18px !important;
    color: var(--tollo-text-muted) !important;
    pointer-events: none !important;
    display: flex !important;
    align-items: center !important;
}

.ag-discovery-input {
    width: 100% !important;
    height: 52px !important;
    padding: 0 46px 0 50px !important;
    background: var(--tollo-surface-alt) !important;
    border: 1px solid var(--tollo-border) !important;
    border-radius: 100px !important;
    font-size: 0.98rem !important;
    color: var(--tollo-text) !important;
    transition: all 0.22s ease !important;
    outline: none !important;
    font-family: inherit !important;
}

.ag-discovery-input:focus {
    border-color: var(--tollo-focus) !important;
    background: var(--tollo-surface) !important;
    box-shadow: 0 0 0 3px rgba(24, 112, 92, 0.16) !important;
}

[data-theme="dark"] .ag-discovery-input:focus {
    border-color: var(--tollo-lime) !important;
    box-shadow: 0 0 0 3px rgba(200, 239, 80, 0.2) !important;
}

.ag-search-clear-btn {
    position: absolute !important;
    right: 14px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: var(--tollo-border) !important;
    color: var(--tollo-text) !important;
    border: none !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.18s ease !important;
}

.ag-search-clear-btn:hover {
    background: var(--tollo-text-muted) !important;
    color: #FFFFFF !important;
}

/* Category Filter Bar */
.ag-category-filter-bar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-bottom: 20px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid var(--tollo-border) !important;
}

.ag-category-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    border-radius: 100px !important;
    background: var(--tollo-surface-alt) !important;
    border: 1px solid var(--tollo-border) !important;
    color: var(--tollo-heading) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
    text-decoration: none !important;
    outline: none !important;
}

.ag-category-pill:hover {
    background: var(--tollo-border) !important;
    border-color: var(--tollo-text-muted) !important;
    transform: translateY(-2px) !important;
}

.ag-category-pill.is-active {
    background: var(--tollo-focus, #18705C) !important;
    color: #FFFFFF !important;
    border-color: var(--tollo-focus, #18705C) !important;
    box-shadow: 0 4px 14px rgba(24, 112, 92, 0.25) !important;
    transform: translateY(-2px) !important;
}

[data-theme="dark"] .ag-category-pill.is-active {
    background: var(--tollo-lime, #C8EF50) !important;
    color: var(--tollo-forest, #123C31) !important;
    border-color: var(--tollo-lime, #C8EF50) !important;
    box-shadow: 0 4px 14px rgba(200, 239, 80, 0.3) !important;
    font-weight: 700 !important;
}

.ag-category-pill:focus-visible {
    box-shadow: 0 0 0 3px rgba(24, 112, 92, 0.25) !important;
}

.ag-cat-icon {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
}

.ag-cat-name {
    line-height: 1.2 !important;
}

/* Discovery Status & Telemetry */
.ag-discovery-status-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.ag-status-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    font-size: 0.92rem !important;
    color: var(--tollo-text-muted) !important;
}

.ag-active-filter-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 10px !important;
    border-radius: 100px !important;
    background: rgba(24, 112, 92, 0.1) !important;
    color: var(--tollo-focus) !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
}

[data-theme="dark"] .ag-active-filter-badge {
    background: rgba(200, 239, 80, 0.15) !important;
    color: var(--tollo-lime) !important;
}

.ag-active-keyword-tag {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 10px !important;
    border-radius: 100px !important;
    background: var(--tollo-border) !important;
    color: var(--tollo-heading) !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
}

.ag-reset-filters-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: none !important;
    border: 1px solid var(--tollo-border) !important;
    padding: 5px 12px !important;
    border-radius: 100px !important;
    color: var(--tollo-text-muted) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.ag-reset-filters-btn:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #EF4444 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* ==========================================================================
   11. POLISHED PRODUCT CARDS ARCHITECTURE
   ========================================================================== */
.ag-products-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)) !important;
    gap: 28px !important;
    align-items: stretch !important;
    margin-bottom: 40px !important;
}

.ag-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--tollo-surface) !important;
    border: 1px solid var(--tollo-border) !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
    overflow: hidden !important;
    box-shadow: 0 4px 18px rgba(12, 27, 42, 0.05) !important;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
}

.ag-product-card.is-filtered-out {
    display: none !important;
}

.ag-product-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 36px rgba(12, 27, 42, 0.12) !important;
    border-color: var(--tollo-focus) !important;
}

[data-theme="dark"] .ag-product-card:hover {
    border-color: var(--tollo-lime) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important;
}

.ag-pcard-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--tollo-border) !important;
    background: var(--tollo-surface) !important;
}

.ag-pcard-origin-tag {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--tollo-text-muted) !important;
    background: var(--tollo-surface-alt) !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
}

.ag-pcard-img-box {
    width: 100% !important;
    height: 210px !important;
    background: var(--tollo-surface-alt) !important;
    overflow: hidden !important;
    position: relative !important;
}

.ag-pcard-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}

.ag-product-card:hover .ag-pcard-photo {
    transform: scale(1.06) !important;
}

.ag-pcard-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    padding: 20px 20px 14px 20px !important;
}

.ag-pcard-brand {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.06em !important;
    color: var(--tollo-focus) !important;
    margin-bottom: 6px !important;
}

[data-theme="dark"] .ag-pcard-brand {
    color: var(--tollo-lime) !important;
}

.ag-pcard-title,
.ag-pcard-body h3 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--tollo-heading) !important;
    line-height: 1.35 !important;
    margin: 0 0 10px 0 !important;
    min-height: 2.7em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.ag-pcard-desc {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    color: var(--tollo-text-muted) !important;
    margin-bottom: 16px !important;
    flex: 1 1 auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.ag-pcard-specs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    background: var(--tollo-surface-alt) !important;
    border-radius: var(--ag-radius-sm, 8px) !important;
    font-size: 0.78rem !important;
    color: var(--tollo-text) !important;
    margin-bottom: 16px !important;
    border: 1px solid var(--tollo-border) !important;
}

.ag-pspec-item strong {
    color: var(--tollo-heading) !important;
}

.ag-pcard-footer {
    margin-top: auto !important;
    padding: 0 20px 20px 20px !important;
    display: grid !important;
    grid-template-columns: 1fr 1.3fr !important;
    gap: 10px !important;
    align-items: center !important;
}

.ag-pcard-footer .ag-btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 14px !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    border-radius: 100px !important;
}

/* Empty State */
.ag-catalog-empty-state {
    text-align: center !important;
    padding: 60px 20px !important;
    background: var(--tollo-surface) !important;
    border: 1px dashed var(--tollo-border) !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
    margin-bottom: 40px !important;
}

.ag-catalog-empty-state svg {
    stroke: var(--tollo-text-muted) !important;
    margin-bottom: 16px !important;
}

.ag-catalog-empty-state h3 {
    font-size: 1.3rem !important;
    color: var(--tollo-heading) !important;
    margin: 0 0 8px 0 !important;
}

.ag-catalog-empty-state p {
    color: var(--tollo-text-muted) !important;
    font-size: 0.95rem !important;
    max-width: 480px !important;
    margin: 0 auto 20px auto !important;
}

/* ==========================================================================
   12. UNIVERSAL APPEARANCE MODE & HARDCODED COLOR FIX
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    color: var(--tollo-heading);
}

p, .ag-lead, .ag-subheading {
    color: var(--tollo-text-muted);
}

.ag-card h3,
.ag-card h4,
.ag-bento-card h3,
.ag-bento-card h4,
.ag-sector-card h3,
.ag-division-card h3 {
    color: var(--tollo-heading) !important;
}

.ag-card p,
.ag-bento-card p,
.ag-sector-card p,
.ag-division-card p {
    color: var(--tollo-text-muted) !important;
}

[data-theme="dark"] .ag-btn-outline {
    border-color: var(--tollo-border) !important;
    color: #FFFFFF !important;
    background: transparent !important;
}

[data-theme="dark"] .ag-btn-outline:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--tollo-lime) !important;
    color: var(--tollo-lime) !important;
}

/* ==========================================================================
   13. REDESIGNED AG-FOOTER-CTA-STRIP (B2B PRE-FOOTER BANNER)
   ========================================================================== */
.ag-footer-cta-strip {
    background: linear-gradient(135deg, #102B23 0%, #17211D 100%) !important;
    border-top: 1px solid rgba(200, 239, 80, 0.2) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: clamp(48px, 6vw, 72px) 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.ag-footer-cta-strip::before {
    content: "" !important;
    position: absolute !important;
    top: -50% !important;
    right: -20% !important;
    width: 600px !important;
    height: 600px !important;
    background: radial-gradient(circle, rgba(200, 239, 80, 0.12) 0%, transparent 70%) !important;
    pointer-events: none !important;
}

.ag-footer-cta-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 36px !important;
    position: relative !important;
    z-index: 2 !important;
}

.ag-footer-cta-text {
    max-width: 680px !important;
}

.ag-footer-cta-kicker {
    display: inline-block !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: none !important;
    color: var(--tollo-lime, #C8EF50) !important;
    margin-bottom: 10px !important;
}

.ag-footer-cta-text h3 {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem) !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.2 !important;
}

.ag-footer-cta-text p {
    font-size: clamp(0.95rem, 1.4vw, 1.05rem) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

.ag-footer-cta-btns {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    flex-shrink: 0 !important;
}

.ag-footer-cta-primary {
    background: var(--tollo-lime, #C8EF50) !important;
    color: #123C31 !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    padding: 14px 28px !important;
    border-radius: 100px !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(200, 239, 80, 0.35) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
}

.ag-footer-cta-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(200, 239, 80, 0.5) !important;
    background: #D8F768 !important;
    color: #0A241E !important;
}

.ag-footer-cta-secondary {
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.05) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 14px 24px !important;
    border-radius: 100px !important;
    transition: all 0.22s ease !important;
    text-decoration: none !important;
}

.ag-footer-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

@media (max-width: 900px) {
    .ag-footer-cta-inner {
        flex-direction: column !important;
        text-align: left !important;
        align-items: flex-start !important;
    }
}

/* ==========================================================================
   14. COMMERCIAL INQUIRY QUICK CHIPS (LIGHT & DARK MODE VISIBILITY)
   ========================================================================== */
.tolo-quick-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 18px 0 12px 0 !important;
}

.tolo-quick-chip {
    appearance: none !important;
    background: var(--tollo-surface-alt, #F5F5EE) !important;
    border: 1px solid var(--tollo-border, #DCE1D8) !important;
    color: var(--tollo-heading, #17211D) !important;
    padding: 9px 18px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: 100px !important;
    cursor: pointer !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    user-select: none !important;
}

.tolo-quick-chip:hover {
    background: var(--tollo-border, #DCE1D8) !important;
    color: var(--tollo-heading, #17211D) !important;
    border-color: var(--tollo-focus, #18705C) !important;
    transform: translateY(-2px) !important;
}

.tolo-quick-chip.is-active,
.tolo-quick-chip[aria-pressed="true"] {
    background: var(--tollo-focus, #18705C) !important;
    color: #FFFFFF !important;
    border-color: var(--tollo-focus, #18705C) !important;
    box-shadow: 0 4px 14px rgba(24, 112, 92, 0.28) !important;
}

.tolo-quick-chip:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(24, 112, 92, 0.3) !important;
}

[data-theme="dark"] .tolo-quick-chip {
    background: #1B2B24 !important;
    border-color: #2A3D34 !important;
    color: #E2E8F0 !important;
}

[data-theme="dark"] .tolo-quick-chip:hover {
    background: #253930 !important;
    border-color: var(--tollo-lime) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .tolo-quick-chip.is-active,
[data-theme="dark"] .tolo-quick-chip[aria-pressed="true"] {
    background: var(--tollo-lime, #C8EF50) !important;
    color: #123C31 !important;
    border-color: var(--tollo-lime, #C8EF50) !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(200, 239, 80, 0.35) !important;
}

/* ==========================================================================
   15. BENTO TITLES & "TELL US WHAT YOU NEED" VISIBILITY
   ========================================================================== */
/* Specific high-contrast styling for all Bento cards (split and vertical) */
.ag-bento-card .ag-bento-title,
.ag-bento-card h3,
.ag-bento-card h4,
.ag-bento-vert .ag-bento-title,
.ag-bento-vert h4 {
    color: #FFFFFF !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    font-weight: 800 !important;
}

.ag-bento-card .ag-bento-desc,
.ag-bento-card p,
.ag-bento-vert .ag-bento-desc,
.ag-bento-vert p {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Specific high-contrast styling for the large dark Split Bento cards */
.ag-bento-card--large.ag-bento-split {
    background: linear-gradient(135deg, #102B23 0%, #0C1B2A 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.ag-bento-split .ag-bento-title,
.ag-bento-split h3,
.ag-bento-split h4 {
    color: #FFFFFF !important;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 8px 0 12px 0 !important;
}

.ag-bento-split .ag-bento-desc,
.ag-bento-split p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
}

.ag-bento-split .ag-bento-highlights {
    list-style: none !important;
    padding: 0 !important;
    margin: 16px 0 24px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.ag-bento-split .ag-bento-highlights li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 0.88rem !important;
}

.ag-bento-split .ag-bento-highlights li span {
    color: var(--tollo-lime, #C8EF50) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ag-bento-split .ag-bento-pill {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 0.74rem !important;
    padding: 4px 10px !important;
    border-radius: 100px !important;
}

.ag-bento-split .ag-btn-accent {
    background: var(--tollo-lime, #C8EF50) !important;
    color: #123C31 !important;
    font-weight: 800 !important;
    border: none !important;
}

.ag-bento-split .ag-btn-accent:hover {
    background: #D8F768 !important;
    color: #0A241E !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(200, 239, 80, 0.4) !important;
}

.ag-bento-split .ag-btn-outline-white {
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    color: #FFFFFF !important;
    background: transparent !important;
    font-weight: 700 !important;
}

.ag-bento-split .ag-btn-outline-white:hover {
    border-color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
}

/* Needs Matcher Shell */
.tolo-matcher-shell {
    background: linear-gradient(135deg, #102B23 0%, #17211D 100%) !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
    padding: clamp(32px, 5vw, 56px) !important;
    border: 1px solid rgba(200, 239, 80, 0.2) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
}

.tolo-matcher-intro h2,
.tolo-matcher-shell h2,
.tolo-matcher-shell h3 {
    color: #FFFFFF !important;
    font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.tolo-matcher-intro p,
.tolo-matcher-shell p {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

/* ==========================================================================
   16. DIVISIONS ENGINE & CONCIERGE SUPPORT BOX
   ========================================================================== */
.ag-knowledge-concierge {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    background: var(--tollo-surface-alt, #F5F5EE) !important;
    border: 1px solid var(--tollo-border, #DCE1D8) !important;
    border-radius: var(--ag-radius-md, 12px) !important;
    padding: 20px 24px !important;
    margin-top: 28px !important;
}

.ag-concierge-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(24, 112, 92, 0.12) !important;
    color: var(--tollo-focus, #18705C) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.ag-concierge-copy {
    flex: 1 1 auto !important;
}

.ag-concierge-copy strong {
    display: block !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    color: var(--tollo-heading, #17211D) !important;
    margin-bottom: 2px !important;
}

.ag-concierge-copy span {
    font-size: 0.88rem !important;
    color: var(--tollo-text-muted, #647067) !important;
}

[data-theme="dark"] .ag-knowledge-concierge {
    background: #1B2B24 !important;
    border-color: #2A3D34 !important;
}

[data-theme="dark"] .ag-concierge-icon {
    background: rgba(200, 239, 80, 0.15) !important;
    color: var(--tollo-lime) !important;
}

[data-theme="dark"] .ag-concierge-copy strong {
    color: #FFFFFF !important;
}

[data-theme="dark"] .ag-concierge-copy span {
    color: #CBD5E1 !important;
}

@media (max-width: 768px) {
    .ag-knowledge-concierge {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

/* ==========================================================================
   17. BALANCED 6-ITEM "ALL REPRESENTED WHOLESALE SUPPLY LINES" GRID & TABS
   ========================================================================== */
.ag-agency-tabs-bar {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
}

.ag-agency-tab {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 12px 10px !important;
    border-radius: 12px !important;
    border: 1px solid var(--tollo-border, rgba(255,255,255,0.1)) !important;
    background: var(--tollo-surface, rgba(255,255,255,0.03)) !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}

.ag-agency-tab .ag-atab-flag {
    margin-bottom: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--tollo-brand, #22c55e) !important;
}

.ag-agency-tab .ag-atab-name {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
}

.ag-agency-tab .ag-atab-cat {
    font-size: 0.72rem !important;
    color: var(--tollo-text-muted, #94a3b8) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

.ag-agency-cards-grid[data-3d-grid] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    perspective: 1200px !important;
    align-items: stretch !important;
}

.ag-agrid-card {
    padding: 20px 18px !important;
    min-height: 240px !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 14px !important;
}

.ag-agrid-card-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: space-between !important;
}

.ag-agrid-badge {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.ag-agrid-flag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--tollo-brand, #22c55e) !important;
}

.ag-agrid-country {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--tollo-text-muted, #94a3b8) !important;
}

.ag-agrid-exclusive-tag {
    margin-left: auto !important;
    font-size: 0.68rem !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    background: rgba(34, 197, 94, 0.12) !important;
    color: #22c55e !important;
    font-weight: 700 !important;
}

.ag-agrid-name {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
}

.ag-agrid-desc {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    color: var(--tollo-text-muted, #94a3b8) !important;
    flex-grow: 1 !important;
}

.ag-agrid-secondary-meta {
    padding: 10px 12px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 8px !important;
    margin-bottom: 14px !important;
}

.ag-ameta-row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.75rem !important;
    margin-bottom: 4px !important;
}

.ag-ameta-row:last-child {
    margin-bottom: 0 !important;
}

.ag-ameta-label {
    color: var(--tollo-text-muted, #94a3b8) !important;
}

.ag-ameta-val {
    font-weight: 700 !important;
    color: var(--tollo-text-main, #f8fafc) !important;
}

.ag-agrid-card-foot {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--tollo-border, rgba(255,255,255,0.08)) !important;
}

.ag-agrid-tag {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.05em !important;
    color: var(--tollo-brand, #22c55e) !important;
}

@media (max-width: 1024px) {
    .ag-agency-tabs-bar {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .ag-agency-cards-grid[data-3d-grid] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .ag-agency-tabs-bar {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .ag-agency-cards-grid[data-3d-grid] {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   18. 4-COLUMN BALANCED REGULATORY INTEGRITY GRID
   ========================================================================== */
.ag-regulatory-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    align-items: stretch !important;
}

.ag-regulatory-card {
    background: var(--tollo-surface-alt, #F5F5EE) !important;
    padding: 28px 22px !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
    border: 1px solid var(--tollo-border, #DCE1D8) !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: transform 0.28s ease, box-shadow 0.28s ease !important;
}

.ag-regulatory-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 36px rgba(18, 60, 49, 0.1) !important;
    border-color: var(--tollo-focus) !important;
}

.ag-reg-icon-box {
    width: 52px !important;
    height: 52px !important;
    background: rgba(24, 112, 92, 0.12) !important;
    color: var(--tollo-focus, #18705C) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 14px !important;
}

.ag-reg-badge-tag {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.08em !important;
    color: var(--tollo-focus, #18705C) !important;
    background: rgba(24, 112, 92, 0.08) !important;
    padding: 3px 10px !important;
    border-radius: 100px !important;
    margin-bottom: 12px !important;
}

.ag-regulatory-card h3 {
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    color: var(--tollo-heading, #17211D) !important;
    margin: 0 0 8px 0 !important;
}

.ag-regulatory-card p {
    font-size: 0.88rem !important;
    color: var(--tollo-text-muted, #647067) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

[data-theme="dark"] .ag-regulatory-card {
    background: #1B2B24 !important;
    border-color: #2A3D34 !important;
}

[data-theme="dark"] .ag-reg-icon-box {
    background: rgba(200, 239, 80, 0.15) !important;
    color: var(--tollo-lime) !important;
}

[data-theme="dark"] .ag-reg-badge-tag {
    background: rgba(200, 239, 80, 0.15) !important;
    color: var(--tollo-lime) !important;
}

[data-theme="dark"] .ag-regulatory-card h3 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .ag-regulatory-card p {
    color: #CBD5E1 !important;
}

@media (max-width: 992px) {
    .ag-regulatory-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 580px) {
    .ag-regulatory-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   19. SEARCH ICON POSITIONING & ZERO-OVERLAP GUARANTEE
   ========================================================================== */
.ag-discovery-search-box input.ag-discovery-input,
input#ag-catalog-search.ag-discovery-input {
    padding-left: 56px !important;
    padding-right: 50px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    height: 52px !important;
    border-radius: 100px !important;
    background: var(--tollo-surface-alt) !important;
    border: 1px solid var(--tollo-border) !important;
    color: var(--tollo-text) !important;
    font-size: 0.98rem !important;
    box-sizing: border-box !important;
}

.ag-discovery-search-box .ag-search-icon {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 5 !important;
    color: var(--tollo-text-muted) !important;
}

/* ==========================================================================
   20. ASYMMETRIC SOURCING MATRIX SECTION (PRODUCTS PAGE 2-COL UPGRADE)
   ========================================================================== */
.ag-sourcing-matrix-layout {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: clamp(32px, 5vw, 60px) !important;
    align-items: center !important;
}

.ag-smatrix-kicker {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.ag-smatrix-loc-tag {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--tollo-focus) !important;
}

.ag-smatrix-title {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important;
    font-weight: 800 !important;
    color: var(--tollo-heading) !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.25 !important;
}

.ag-smatrix-desc {
    font-size: 1rem !important;
    color: var(--tollo-text-muted) !important;
    line-height: 1.7 !important;
    margin-bottom: 26px !important;
}

.ag-smatrix-capabilities {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
}

.ag-scap-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
}

.ag-scap-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(24, 112, 92, 0.12) !important;
    color: var(--tollo-focus) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.ag-scap-text strong {
    display: block !important;
    font-size: 0.95rem !important;
    color: var(--tollo-heading) !important;
    margin-bottom: 2px !important;
}

.ag-scap-text span {
    font-size: 0.88rem !important;
    color: var(--tollo-text-muted) !important;
    line-height: 1.5 !important;
}

.ag-smatrix-actions {
    display: flex !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.ag-sourcing-matrix-panel {
    background: var(--tollo-surface) !important;
    border: 1px solid var(--tollo-border) !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
    padding: clamp(28px, 4vw, 38px) !important;
    box-shadow: 0 16px 40px rgba(12, 27, 42, 0.08) !important;
}

.ag-spanel-head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 6px !important;
}

.ag-spanel-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: var(--tollo-focus) !important;
}

.ag-spanel-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--tollo-heading) !important;
    margin: 0 !important;
}

.ag-spanel-sub {
    font-size: 0.86rem !important;
    color: var(--tollo-text-muted) !important;
    margin: 0 0 22px 0 !important;
}

.ag-spanel-rows {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
}

.ag-spanel-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--tollo-border) !important;
    font-size: 0.92rem !important;
}

.ag-srow-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.ag-srow-label {
    color: var(--tollo-text-muted) !important;
}

.ag-srow-val {
    color: var(--tollo-heading) !important;
    font-weight: 700 !important;
}

.ag-spanel-foot {
    background: var(--tollo-surface-alt) !important;
    border-radius: var(--ag-radius-sm, 8px) !important;
    padding: 12px 14px !important;
}

.ag-sfoot-notice {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 0.82rem !important;
    color: var(--tollo-text-muted) !important;
}

.ag-sfoot-notice svg {
    color: var(--tollo-focus) !important;
    flex-shrink: 0 !important;
}

@media (max-width: 900px) {
    .ag-sourcing-matrix-layout {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   21. SINGLE PRODUCT SPEC SHEET & EDITORIAL DOSSIER
   ========================================================================== */
.ag-breadcrumb-bar {
    background: var(--tollo-surface-alt) !important;
    border-bottom: 1px solid var(--tollo-border) !important;
    padding: 14px 0 !important;
    font-size: 0.86rem !important;
}

.ag-breadcrumbs {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.ag-breadcrumbs a {
    color: var(--tollo-text-muted) !important;
    text-decoration: none !important;
    transition: color 0.18s ease !important;
}

.ag-breadcrumbs a:hover {
    color: var(--tollo-focus) !important;
}

.ag-bc-sep {
    color: var(--tollo-border) !important;
}

.ag-bc-cat {
    color: var(--tollo-heading) !important;
    font-weight: 600 !important;
}

.ag-bc-current {
    color: var(--tollo-focus) !important;
    font-weight: 700 !important;
}

.ag-sp-container {
    padding-top: clamp(36px, 5vw, 60px) !important;
    padding-bottom: clamp(60px, 8vw, 100px) !important;
}

.ag-single-product-stage {
    display: grid !important;
    grid-template-columns: 0.95fr 1.05fr !important;
    gap: clamp(36px, 5vw, 64px) !important;
    margin-bottom: 60px !important;
}

.ag-sp-main-image-wrap {
    position: relative !important;
    height: clamp(320px, 40vw, 440px) !important;
    background: var(--tollo-surface-alt) !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
    border: 1px solid var(--tollo-border) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
}

.ag-sp-main-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ag-sp-main-image-wrap:hover .ag-sp-main-img {
    transform: scale(1.04) !important;
}

.ag-sp-zoom-hint {
    position: absolute !important;
    bottom: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.45) !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(4px) !important;
}

.ag-sp-thumbs-row {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

.ag-sp-thumb-btn {
    width: 76px !important;
    height: 76px !important;
    border-radius: var(--ag-radius-sm, 8px) !important;
    border: 2px solid var(--tollo-border) !important;
    background: var(--tollo-surface-alt) !important;
    padding: 0 !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

.ag-sp-thumb-btn.is-active,
.ag-sp-thumb-btn:hover {
    border-color: var(--tollo-focus) !important;
    box-shadow: 0 4px 12px rgba(24, 112, 92, 0.2) !important;
}

.ag-sp-thumb-btn img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.ag-sp-compliance-card {
    background: var(--tollo-surface-alt) !important;
    border: 1px solid var(--tollo-border) !important;
    border-radius: var(--ag-radius-md, 12px) !important;
    padding: 20px !important;
    display: flex !important;
    gap: 16px !important;
    align-items: flex-start !important;
}

.ag-sp-comp-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(24, 112, 92, 0.12) !important;
    color: var(--tollo-focus) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.ag-sp-comp-body h4 {
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    color: var(--tollo-heading) !important;
    margin: 0 0 4px 0 !important;
}

.ag-sp-comp-body p {
    font-size: 0.88rem !important;
    color: var(--tollo-text-muted) !important;
    line-height: 1.5 !important;
    margin: 0 0 6px 0 !important;
}

.ag-sp-comp-sub {
    font-size: 0.78rem !important;
    color: var(--tollo-focus) !important;
    font-weight: 600 !important;
}

.ag-sp-kicker-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-bottom: 14px !important;
}

.ag-sp-origin-pill,
.ag-sp-cat-pill {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 100px !important;
    background: var(--tollo-surface-alt) !important;
    border: 1px solid var(--tollo-border) !important;
    color: var(--tollo-text) !important;
}

.ag-sp-brand-name {
    font-size: 0.95rem !important;
    color: var(--tollo-text-muted) !important;
    margin-bottom: 8px !important;
}

.ag-sp-brand-name strong {
    color: var(--tollo-heading) !important;
}

.ag-sp-title {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important;
    font-weight: 800 !important;
    color: var(--tollo-heading) !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.18 !important;
}

.ag-sp-lead-desc {
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    color: var(--tollo-text) !important;
    margin-bottom: 26px !important;
}

.ag-sp-quick-specs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 28px !important;
}

.ag-qspec-card {
    background: var(--tollo-surface-alt) !important;
    border: 1px solid var(--tollo-border) !important;
    border-radius: var(--ag-radius-sm, 8px) !important;
    padding: 12px 14px !important;
}

.ag-qspec-lbl {
    display: block !important;
    font-size: 0.76rem !important;
    color: var(--tollo-text-muted) !important;
    text-transform: none !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 4px !important;
}

.ag-qspec-val {
    display: block !important;
    font-size: 0.92rem !important;
    color: var(--tollo-heading) !important;
    font-weight: 700 !important;
}

.ag-sp-actions-bar {
    display: flex !important;
    gap: 14px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-bottom: 24px !important;
}

.ag-sp-notice-box {
    background: var(--tollo-surface-alt) !important;
    border: 1px solid var(--tollo-border) !important;
    border-radius: var(--ag-radius-sm, 8px) !important;
    padding: 16px !important;
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
}

.ag-sp-notice-icon {
    font-size: 1.2rem !important;
    line-height: 1 !important;
}

.ag-sp-notice-text {
    font-size: 0.88rem !important;
    color: var(--tollo-text-muted) !important;
    line-height: 1.5 !important;
}

.ag-sp-notice-text strong {
    color: var(--tollo-heading) !important;
}

.ag-sp-notice-text a {
    color: var(--tollo-focus) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

/* Strategic Pillars Grid */
.ag-sp-pillars-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 60px !important;
}

.ag-sp-pillar-card {
    background: var(--tollo-surface) !important;
    border: 1px solid var(--tollo-border) !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
    padding: 26px !important;
    box-shadow: 0 4px 16px rgba(12, 27, 42, 0.04) !important;
}

.ag-pillar-head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--tollo-border) !important;
}

.ag-pillar-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(24, 112, 92, 0.12) !important;
    color: var(--tollo-focus) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.ag-pillar-head h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--tollo-heading) !important;
    margin: 0 !important;
}

.ag-pillar-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.ag-pillar-list li {
    font-size: 0.9rem !important;
    color: var(--tollo-text) !important;
    line-height: 1.55 !important;
    position: relative !important;
    padding-left: 18px !important;
}

.ag-pillar-list li::before {
    content: "\2022" !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--tollo-focus) !important;
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
}

/* Specifications Table */
.ag-sp-spec-section {
    background: var(--tollo-surface-alt) !important;
    border: 1px solid var(--tollo-border) !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
    padding: clamp(32px, 5vw, 48px) !important;
    margin-bottom: 60px !important;
}

.ag-sp-spec-head {
    margin-bottom: 28px !important;
}

.ag-sp-spec-head h2 {
    font-size: clamp(1.4rem, 2.4vw, 1.8rem) !important;
    color: var(--tollo-heading) !important;
    margin: 6px 0 0 0 !important;
}

.ag-sp-spec-table-wrap {
    overflow-x: auto !important;
}

.ag-sp-spec-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.94rem !important;
}

.ag-sp-spec-table th {
    text-align: left !important;
    padding: 14px 18px !important;
    background: var(--tollo-surface) !important;
    color: var(--tollo-heading) !important;
    font-weight: 700 !important;
    width: 38% !important;
    border-bottom: 1px solid var(--tollo-border) !important;
}

.ag-sp-spec-table td {
    padding: 14px 18px !important;
    background: var(--tollo-surface) !important;
    color: var(--tollo-text) !important;
    border-bottom: 1px solid var(--tollo-border) !important;
}

.ag-sp-spec-table tr:nth-child(even) th,
.ag-sp-spec-table tr:nth-child(even) td {
    background: var(--tollo-surface-alt) !important;
}

.ag-sp-related-section {
    padding-top: 40px !important;
    border-top: 1px solid var(--tollo-border) !important;
}

@media (max-width: 900px) {
    .ag-single-product-stage {
        grid-template-columns: 1fr !important;
    }
    .ag-sp-pillars-grid {
        grid-template-columns: 1fr !important;
    }
    .ag-sp-spec-table th,
    .ag-sp-spec-table td {
        width: auto !important;
        display: block !important;
    }
    .ag-sp-spec-table th {
        background: var(--tollo-surface-alt) !important;
        border-bottom: none !important;
        padding-bottom: 4px !important;
    }
    .ag-sp-spec-table td {
        padding-top: 4px !important;
        margin-bottom: 8px !important;
    }
}

/* ==========================================================================
   22. MASTERCLASS REMADE AG-ABOUT-OVERVIEW-SECTION
   ========================================================================== */
.ag-about-overview-section {
    background: var(--tollo-surface) !important;
    padding: clamp(60px, 8vw, 110px) 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.ag-aoverview-hero-grid {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: clamp(40px, 6vw, 80px) !important;
    align-items: center !important;
    margin-bottom: clamp(64px, 8vw, 100px) !important;
}

.ag-aoverview-kicker-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.ag-aov-tag {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--tollo-focus, #18705C) !important;
    text-transform: none !important;
    letter-spacing: 0.08em !important;
}

.ag-aoverview-hero-title {
    font-size: clamp(2rem, 3.4vw, 2.8rem) !important;
    font-weight: 800 !important;
    color: var(--tollo-heading, #17211D) !important;
    line-height: 1.18 !important;
    margin: 0 0 20px 0 !important;
}

.ag-aoverview-hero-lead {
    font-size: 1.12rem !important;
    line-height: 1.7 !important;
    color: var(--tollo-heading, #17211D) !important;
    font-weight: 500 !important;
    margin-bottom: 16px !important;
}

.ag-aoverview-hero-body {
    font-size: 1rem !important;
    line-height: 1.75 !important;
    color: var(--tollo-text-muted, #647067) !important;
    margin-bottom: 32px !important;
}

.ag-aoverview-stats-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    padding: 20px 0 !important;
    border-top: 1px solid var(--tollo-border) !important;
    border-bottom: 1px solid var(--tollo-border) !important;
}

.ag-aov-stat-num {
    display: block !important;
    font-size: clamp(1.8rem, 2.6vw, 2.4rem) !important;
    font-weight: 800 !important;
    color: var(--tollo-focus, #18705C) !important;
    line-height: 1.1 !important;
    margin-bottom: 4px !important;
}

.ag-aov-stat-lbl {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--tollo-text-muted, #647067) !important;
    line-height: 1.35 !important;
}

[data-theme="dark"] .ag-aov-stat-num {
    color: var(--tollo-lime, #C8EF50) !important;
}

/* Layered Image Stack */
.ag-aoverview-visual-stack {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
}

.ag-aov-glow-orb {
    position: absolute !important;
    width: 320px !important;
    height: 320px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(24, 112, 92, 0.2) 0%, transparent 70%) !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    filter: blur(40px) !important;
}

[data-theme="dark"] .ag-aov-glow-orb {
    background: radial-gradient(circle, rgba(200, 239, 80, 0.18) 0%, transparent 70%) !important;
}

.ag-aov-main-frame {
    position: relative !important;
    width: 100% !important;
    height: clamp(380px, 46vw, 500px) !important;
    border-radius: var(--ag-radius-lg, 20px) !important;
    overflow: hidden !important;
    border: 1px solid var(--tollo-border) !important;
    box-shadow: 0 24px 60px rgba(12, 27, 42, 0.12) !important;
}

.ag-aov-hero-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ag-aov-main-frame:hover .ag-aov-hero-img {
    transform: scale(1.05) !important;
}

.ag-aov-frame-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, transparent 50%, rgba(12, 27, 42, 0.4) 100%) !important;
    pointer-events: none !important;
}

.ag-aov-float-badge {
    position: absolute !important;
    background: var(--tollo-surface) !important;
    border: 1px solid var(--tollo-border) !important;
    border-radius: var(--ag-radius-md, 14px) !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 12px 32px rgba(12, 27, 42, 0.14) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 3 !important;
    transition: transform 0.3s ease !important;
}

.ag-aov-float-badge:hover {
    transform: translateY(-4px) !important;
}

.ag-aov-float-top {
    top: 24px !important;
    left: -20px !important;
}

.ag-aov-float-bottom {
    bottom: 28px !important;
    right: -20px !important;
}

.ag-afloat-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(24, 112, 92, 0.12) !important;
    color: var(--tollo-focus) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

[data-theme="dark"] .ag-afloat-icon {
    background: rgba(200, 239, 80, 0.15) !important;
    color: var(--tollo-lime) !important;
}

.ag-afloat-copy strong {
    display: block !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: var(--tollo-heading) !important;
    margin-bottom: 2px !important;
}

.ag-afloat-copy span {
    font-size: 0.78rem !important;
    color: var(--tollo-text-muted) !important;
    white-space: nowrap !important;
}

/* Content Groups & Headers */
.ag-aoverview-group {
    margin-bottom: clamp(64px, 8vw, 100px) !important;
}

.ag-aov-group-header {
    text-align: center !important;
    max-width: 760px !important;
    margin: 0 auto clamp(36px, 5vw, 54px) auto !important;
}

.ag-aov-group-header h2 {
    font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important;
    font-weight: 800 !important;
    color: var(--tollo-heading) !important;
    margin: 8px 0 12px 0 !important;
}

.ag-aov-group-header p {
    font-size: 1.02rem !important;
    color: var(--tollo-text-muted) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Featured Principals 5-Card Grid */
.ag-aov-principals-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
}


.ag-aov-pcard {
    background: linear-gradient(135deg, #102B23 0%, #17211D 100%) !important;
    border: 1px solid rgba(200, 239, 80, 0.22) !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
    padding: 24px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
}

.ag-aov-pcard:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35) !important;
    border-color: var(--tollo-lime, #C8EF50) !important;
}

.ag-aov-pcard-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 14px !important;
}

.ag-aov-pflag {
    font-size: 1.1rem !important;
    line-height: 1 !important;
}

.ag-aov-pcountry {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
}

.ag-aov-pname {
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.25 !important;
}

.ag-aov-pdesc {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin: 0 0 16px 0 !important;
    flex: 1 1 auto !important;
}

.ag-aov-pmeta {
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.ag-aov-pmeta-tag {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: var(--tollo-lime, #C8EF50) !important;
    display: block !important;
}

/* 6 Core Capabilities Grid */
.ag-aov-capabilities-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}

.ag-aov-cap-card {
    background: linear-gradient(135deg, #102B23 0%, #17211D 100%) !important;
    border: 1px solid rgba(200, 239, 80, 0.2) !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
    padding: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.ag-aov-cap-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35) !important;
    border-color: var(--tollo-lime, #C8EF50) !important;
}

.ag-acap-icon-wrap {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: rgba(200, 239, 80, 0.15) !important;
    color: var(--tollo-lime, #C8EF50) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
}

.ag-acap-kicker {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.08em !important;
    color: var(--tollo-lime, #C8EF50) !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.ag-acap-title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.3 !important;
}

.ag-acap-desc {
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin: 0 !important;
}

/* Customer Segments & Commercial Router */
.ag-aov-router-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(32px, 5vw, 60px) !important;
    align-items: center !important;
}

.ag-aseg-title {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 8px 0 12px 0 !important;
    line-height: 1.2 !important;
}

.ag-aseg-desc {
    font-size: 0.98rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
}

.ag-aseg-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.ag-aseg-card {
    background: linear-gradient(135deg, #102B23 0%, #17211D 100%) !important;
    border: 1px solid rgba(200, 239, 80, 0.2) !important;
    border-radius: var(--ag-radius-md, 14px) !important;
    padding: 20px 22px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.ag-aseg-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: rgba(200, 239, 80, 0.16) !important;
    border: 1px solid rgba(200, 239, 80, 0.35) !important;
    color: #C8EF50 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

.ag-aseg-icon svg,
.ag-aseg-icon .ag-seg-svg,
.ag-seg-svg {
    width: 24px !important;
    height: 24px !important;
    stroke: #C8EF50 !important;
    color: #C8EF50 !important;
    fill: none !important;
    display: block !important;
}

.ag-aseg-card:hover .ag-aseg-icon {
    background: #C8EF50 !important;
    border-color: #C8EF50 !important;
}

.ag-aseg-card:hover .ag-aseg-icon svg,
.ag-aseg-card:hover .ag-aseg-icon .ag-seg-svg {
    stroke: #0A1C16 !important;
}

.ag-aseg-name {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 6px 0 !important;
}

.ag-aseg-body {
    font-size: 0.88rem !important;
    color: rgba(255, 255, 255, 0.92) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

/* Commercial Inquiry Panel */
.ag-aov-inquiry-panel {
    background: linear-gradient(135deg, #102B23 0%, #17211D 100%) !important;
    border: 1px solid rgba(200, 239, 80, 0.2) !important;
    border-radius: var(--ag-radius-lg, 20px) !important;
    padding: clamp(32px, 5vw, 48px) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22) !important;
}

.ag-ainquiry-head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.ag-ainquiry-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: var(--tollo-lime, #C8EF50) !important;
}

.ag-ainquiry-kicker {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.1em !important;
    color: var(--tollo-lime, #C8EF50) !important;
}

.ag-ainquiry-title {
    font-size: clamp(1.4rem, 2.4vw, 1.85rem) !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.25 !important;
}

.ag-ainquiry-desc {
    font-size: 0.94rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.6 !important;
    margin-bottom: 22px !important;
}

.ag-ainquiry-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 28px !important;
}

.ag-afeat-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 0.88rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.ag-afeat-check {
    color: var(--tollo-lime, #C8EF50) !important;
    font-weight: 800 !important;
}

.ag-ainquiry-actions {
    display: flex !important;
    gap: 14px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.ag-btn-b2b-primary {
    background: var(--tollo-lime, #C8EF50) !important;
    color: #123C31 !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    padding: 14px 26px !important;
    border-radius: 100px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 8px 24px rgba(200, 239, 80, 0.35) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
}

.ag-btn-b2b-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(200, 239, 80, 0.5) !important;
    background: #D8F768 !important;
    color: #0A241E !important;
}

/* ==========================================================================
   23. UNIFIED HIGH-CONTRAST "CHAT ON WHATSAPP" ACTION SYSTEM
   ========================================================================== */
.ag-btn-whatsapp,
.ag-footer-wa-btn,
.ag-whatsapp-fab,
.ag-btn-wa-action {
    background: #25D366 !important;
    color: #082C1B !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
    border: 1px solid rgba(8, 44, 27, 0.2) !important;
    border-radius: 100px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.28) !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ag-btn-whatsapp svg,
.ag-footer-wa-btn svg,
.ag-whatsapp-fab svg,
.ag-btn-wa-action svg {
    color: #082C1B !important;
    fill: currentColor !important;
    flex-shrink: 0 !important;
}

.ag-btn-whatsapp span,
.ag-footer-wa-btn span,
.ag-btn-wa-action span {
    color: #082C1B !important;
    font-weight: 800 !important;
}

.ag-btn-whatsapp:hover,
.ag-footer-wa-btn:hover,
.ag-whatsapp-fab:hover,
.ag-btn-wa-action:hover {
    background: #1EBE5B !important;
    color: #041A10 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45) !important;
}

.ag-btn-whatsapp:focus-visible,
.ag-footer-wa-btn:focus-visible,
.ag-whatsapp-fab:focus-visible,
.ag-btn-wa-action:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.5) !important;
}

/* Floating FAB specific override */
#ag-whatsapp-fab.ag-whatsapp-fab {
    position: fixed !important;
    right: 28px !important;
    bottom: 28px !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9990 !important;
}

#ag-rfq-trigger.ag-rfq-float-btn {
    position: fixed !important;
    right: 28px !important;
    bottom: 102px !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9989 !important;
}

/* Responsive adjustments for overview section */
@media (max-width: 1100px) {
    .ag-aov-principals-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .ag-aov-capabilities-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


@media (max-width: 900px) {
    .ag-aoverview-hero-grid {
        grid-template-columns: 1fr !important;
    }
    .ag-aov-float-top {
        left: 10px !important;
        top: 10px !important;
    }
    .ag-aov-float-bottom {
        right: 10px !important;
        bottom: 10px !important;
    }
    .ag-aov-router-layout {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .ag-aov-principals-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .ag-aov-principals-grid {
        grid-template-columns: 1fr !important;
    }
    .ag-aov-capabilities-grid {
        grid-template-columns: 1fr !important;
    }
    .ag-aoverview-stats-row {
        grid-template-columns: 1fr !important;
    }
}



/* ==========================================================================
   24. LIGHT MODE ULTRA-HIGH VISIBILITY & CONTRAST REFINEMENT
   ========================================================================== */

/* 1. Primary "Apply for B2B Account" Buttons in Light Mode */
.ag-btn,
.ag-btn-accent,
.ag-btn-primary,
.ag-btn-b2b-primary,
.ag-footer-cta-primary,
.ag-btn-outline,
.ag-btn-outline-white {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    border-radius: 100px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    line-height: 1.3 !important;
}

/* Universal Button Internal Hygiene: Child elements must ALWAYS be transparent and inherit text color */
.ag-btn *,
.ag-btn span,
.ag-btn svg,
.ag-btn path,
.ag-btn-accent *,
.ag-btn-accent span,
.ag-btn-accent svg,
.ag-btn-accent path,
.ag-btn-outline *,
.ag-btn-outline span,
.ag-btn-outline svg,
.ag-btn-outline path,
.ag-btn-outline-white *,
.ag-btn-outline-white span,
.ag-btn-outline-white svg,
.ag-btn-outline-white path,
.ag-btn-primary *,
.ag-btn-primary span,
.ag-btn-primary svg,
.ag-btn-primary path,
.ag-btn-b2b-primary *,
.ag-btn-b2b-primary span,
.ag-btn-b2b-primary svg,
.ag-footer-cta-primary *,
.ag-footer-cta-primary span,
.ag-footer-cta-primary svg {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Light mode standard header / navbar buttons: deep forest green button with crisp white text */
body:not([data-theme="dark"]) .ag-header-btn {
    background: #18705C !important;
    color: #FFFFFF !important;
    border: 1.5px solid #18705C !important;
    box-shadow: 0 4px 14px rgba(24, 112, 92, 0.28) !important;
}

body:not([data-theme="dark"]) .ag-header-btn:hover {
    background: #104F41 !important;
    color: #FFFFFF !important;
    border-color: #104F41 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(24, 112, 92, 0.4) !important;
}

/* ALL ACCENT / PRIMARY / LIME BUTTONS: Luminous Lime Pill with Bold Jet/Forest Dark Text */
.ag-btn-accent,
.ag-btn-b2b-primary,
.ag-footer-cta-primary,
.ag-division-hero .ag-btn-accent,
.ag-cta-box .ag-btn-accent,
.ag-division-cta .ag-btn-accent,
.ag-lead-section .ag-btn-accent,
.ag-lead-shell .ag-btn-accent,
.ag-footer-cta-strip .ag-btn-accent,
.ag-bento-split .ag-btn-accent,
.tolo-matcher-shell .ag-btn-accent,
.ag-viewport-actions .ag-btn-accent,
.ag-apanel-actions .ag-btn-accent,
[data-theme="dark"] .ag-btn-accent {
    background: var(--tollo-lime, #C8EF50) !important;
    color: #0A241E !important;
    font-weight: 800 !important;
    border: 1.5px solid var(--tollo-lime, #C8EF50) !important;
    box-shadow: 0 6px 20px rgba(200, 239, 80, 0.35) !important;
}

/* ALL ACCENT / PRIMARY / LIME BUTTON HOVERS: NEVER turn white; always stay sharp jet dark (#0A241E) */
.ag-btn-accent:hover,
.ag-btn-accent:focus,
.ag-btn-accent:active,
.ag-btn-b2b-primary:hover,
.ag-btn-b2b-primary:focus,
.ag-btn-b2b-primary:active,
.ag-footer-cta-primary:hover,
.ag-footer-cta-primary:focus,
.ag-footer-cta-primary:active,
.ag-division-hero .ag-btn-accent:hover,
.ag-cta-box .ag-btn-accent:hover,
.ag-division-cta .ag-btn-accent:hover,
.ag-lead-section .ag-btn-accent:hover,
.ag-lead-shell .ag-btn-accent:hover,
.ag-footer-cta-strip .ag-btn-accent:hover,
.ag-bento-split .ag-btn-accent:hover,
.tolo-matcher-shell .ag-btn-accent:hover,
.ag-viewport-actions .ag-btn-accent:hover,
.ag-apanel-actions .ag-btn-accent:hover,
[data-theme="dark"] .ag-btn-accent:hover {
    background: #D8F768 !important;
    color: #0A241E !important;
    font-weight: 800 !important;
    border-color: #D8F768 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(200, 239, 80, 0.5) !important;
}

.ag-btn-accent:hover *,
.ag-btn-accent:focus *,
.ag-btn-b2b-primary:hover *,
.ag-footer-cta-primary:hover * {
    color: #0A241E !important;
}

/* Secondary Outline Buttons */
.ag-btn-outline {
    background: transparent !important;
    color: #17211D !important;
    border: 1.5px solid #CBD5E1 !important;
}

.ag-btn-outline:hover {
    background: #18705C !important;
    color: #FFFFFF !important;
    border-color: #18705C !important;
    transform: translateY(-2px) !important;
}

.ag-btn-outline-white,
.ag-division-hero .ag-btn-outline,
.ag-division-hero .ag-btn-outline-white,
.ag-cta-box .ag-btn-outline,
.ag-cta-box .ag-btn-outline-white,
.ag-division-cta .ag-btn-outline-white,
.ag-lead-section .ag-btn-outline-white,
[data-theme="dark"] .ag-btn-outline {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
}

.ag-btn-outline-white:hover,
.ag-division-hero .ag-btn-outline:hover,
.ag-division-hero .ag-btn-outline-white:hover,
.ag-cta-box .ag-btn-outline:hover,
.ag-cta-box .ag-btn-outline-white:hover,
.ag-division-cta .ag-btn-outline-white:hover,
.ag-lead-section .ag-btn-outline-white:hover,
[data-theme="dark"] .ag-btn-outline:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

/* 2. Divisions Stage & Capabilities in Light Mode */
.ag-divisions-engine-section {
    background: var(--tollo-surface-alt, #F5F5EE) !important;
}

/* Divisions left navigation buttons */
.ag-dtab-btn {
    background: #FFFFFF !important;
    border: 1px solid #DCE1D8 !important;
    border-radius: var(--ag-radius-md, 14px) !important;
    box-shadow: 0 2px 8px rgba(12, 27, 42, 0.04) !important;
    transition: all 0.25s ease !important;
}

.ag-dtab-btn .ag-dtab-num {
    color: #18705C !important;
    font-weight: 800 !important;
}

.ag-dtab-btn .ag-dtab-title {
    color: #FFFFFF !important;
    font-weight: 800 !important;
}

.ag-dtab-btn .ag-dtab-desc {
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

.ag-dtab-btn.is-active,
.ag-dtab-btn:hover {
    background: #18705C !important;
    border-color: var(--tollo-lime, #C8EF50) !important;
    box-shadow: 0 8px 24px rgba(24, 112, 92, 0.4) !important;
}

.ag-dtab-btn.is-active .ag-dtab-num,
.ag-dtab-btn:hover .ag-dtab-num {
    color: var(--tollo-lime, #C8EF50) !important;
}

.ag-dtab-btn.is-active .ag-dtab-title,
.ag-dtab-btn:hover .ag-dtab-title {
    color: #FFFFFF !important;
}

.ag-dtab-btn.is-active .ag-dtab-desc,
.ag-dtab-btn:hover .ag-dtab-desc {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Divisions main viewport panel */
.ag-viewport-panel {
    background: #0C1B2A !important;
}

.ag-viewport-overlay {
    background: linear-gradient(180deg, rgba(12, 27, 42, 0.3) 0%, rgba(12, 27, 42, 0.88) 55%, rgba(12, 27, 42, 0.98) 100%) !important;
}

.ag-viewport-label {
    color: var(--tollo-lime, #C8EF50) !important;
    font-weight: 800 !important;
}

.ag-viewport-copy h3,
.ag-vcopy-title {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.ag-viewport-copy p,
.ag-vcopy-desc {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 0.98rem !important;
    line-height: 1.68 !important;
}

.ag-viewport-telemetry-grid {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.ag-vtel-lbl {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.74rem !important;
}

.ag-vtel-item strong {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
}

/* 3. Brand Universe & Featured Principals in Light Mode */
.ag-brand-universe-section {
    background: var(--tollo-surface, #FFFFFF) !important;
}

/* Brand tabs */
.ag-atab-btn {
    background: #1B2B24 !important;
    border: 1px solid #2A3D34 !important;
    border-radius: 100px !important;
    padding: 10px 18px !important;
    transition: all 0.25s ease !important;
}

.ag-atab-btn .ag-atab-name {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.ag-atab-btn .ag-atab-country {
    color: rgba(255, 255, 255, 0.8) !important;
}

.ag-atab-btn.is-active,
.ag-atab-btn:hover {
    background: #18705C !important;
    border-color: var(--tollo-lime, #C8EF50) !important;
}

.ag-atab-btn.is-active .ag-atab-name,
.ag-atab-btn:hover .ag-atab-name {
    color: #FFFFFF !important;
}

.ag-atab-btn.is-active .ag-atab-country,
.ag-atab-btn:hover .ag-atab-country {
    color: var(--tollo-lime, #C8EF50) !important;
}

/* Brand agency main panel */
.ag-agency-panel {
    background: #0C1B2A !important;
}

.ag-apanel-overlay {
    background: linear-gradient(180deg, rgba(12, 27, 42, 0.3) 0%, rgba(12, 27, 42, 0.88) 65%, rgba(12, 27, 42, 0.96) 100%) !important;
}

.ag-apanel-kicker {
    color: var(--tollo-lime, #C8EF50) !important;
    font-weight: 800 !important;
}

.ag-apanel-title {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
}

.ag-apanel-desc {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
}

.ag-apanel-telemetry-grid {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.ag-atel-lbl {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.74rem !important;
}

.ag-atelemetry-item strong {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
}

/* Brand 3D Grid Cards (Bottom 5 cards) */
.ag-agrid-card {
    background: linear-gradient(135deg, #102B23 0%, #17211D 100%) !important;
    border: 1px solid rgba(200, 239, 80, 0.22) !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25) !important;
}

.ag-agrid-card:hover {
    border-color: var(--tollo-lime, #C8EF50) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35) !important;
}

.ag-agrid-country {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.ag-agrid-exclusive-tag {
    color: var(--tollo-lime, #C8EF50) !important;
    font-weight: 700 !important;
}

.ag-agrid-name {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
    margin: 8px 0 6px 0 !important;
}

.ag-agrid-desc {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
}

.ag-ameta-row span {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.78rem !important;
}

.ag-ameta-row strong {
    color: #FFFFFF !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
}

.ag-agrid-tag {
    background: rgba(200, 239, 80, 0.15) !important;
    color: var(--tollo-lime, #C8EF50) !important;
    font-weight: 700 !important;
}

.ag-agrid-cta-arrow {
    color: var(--tollo-lime, #C8EF50) !important;
    font-weight: 800 !important;
}

/* Dark mode overrides for 3D grid cards */
[data-theme="dark"] .ag-agrid-card {
    background: #1B2B24 !important;
    border-color: #2A3D34 !important;
}

[data-theme="dark"] .ag-agrid-country,
[data-theme="dark"] .ag-agrid-name,
[data-theme="dark"] .ag-ameta-row strong {
    color: #FFFFFF !important;
}

[data-theme="dark"] .ag-agrid-desc {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .ag-agrid-exclusive-tag,
[data-theme="dark"] .ag-agrid-tag,
[data-theme="dark"] .ag-agrid-cta-arrow {
    color: var(--tollo-lime, #C8EF50) !important;
}

[data-theme="dark"] .ag-agrid-tag {
    background: rgba(200, 239, 80, 0.12) !important;
}

[data-theme="dark"] .ag-ameta-row span {
    color: #94A3B8 !important;
}

/* ==========================================================================
   25. DEFINITIVE WHITE-ISH TEXT SYSTEM FOR ALL GREEN CARDS & SECTIONS
   ========================================================================== */

/* ==========================================================================
   25. PRECISION CONTRAST & VISIBILITY ENGINE (ALL 5 AUDIT ZONES)
   ========================================================================== */

/* --------------------------------------------------------------------------
   ZONE 1 (Image 1): Interactive Sourcing Desk / Needs Matcher
   -------------------------------------------------------------------------- */
.tolo-matcher,
.tolo-matcher-shell,
.ag-matcher-section {
    background: linear-gradient(135deg, #0d3329 0%, #134a3c 55%, #0d3329 100%) !important;
    color: #FFFFFF !important;
}

.tolo-matcher h2,
.tolo-matcher-shell h2,
.tolo-matcher-intro h2,
.tolo-matcher-title,
.tolo-matcher h3,
.tolo-matcher-shell h3,
.tolo-matcher-intro h3,
.tolo-matcher-step h3,
.tolo-matcher-step-title,
.tolo-matcher-panel h3,
.tolo-matcher-panel h2 {
    color: #FFFFFF !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
    font-weight: 800 !important;
}

.tolo-matcher p,
.tolo-matcher-shell p,
.tolo-matcher-intro p,
.tolo-matcher-step p,
.tolo-matcher-result p {
    color: rgba(255, 255, 255, 0.92) !important;
}

.tolo-matcher-step-label,
.tolo-matcher-step-counter {
    color: var(--tollo-lime, #C8EF50) !important;
    font-weight: 800 !important;
}

.tolo-match-opt {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
}

.tolo-match-opt strong {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.tolo-match-opt span {
    color: rgba(255, 255, 255, 0.85) !important;
}

.tolo-match-opt:hover,
.tolo-match-opt.is-selected {
    background: rgba(200, 239, 80, 0.18) !important;
    border-color: var(--tollo-lime, #C8EF50) !important;
    box-shadow: inset 4px 0 0 var(--tollo-lime, #C8EF50) !important;
}

/* --------------------------------------------------------------------------
   ZONE 2 (Image 2): Enterprise Trading Divisions Navigation & Viewport
   -------------------------------------------------------------------------- */
/* Left navigation triggers (01-06) */
body:not([data-theme="dark"]) .ag-div-trigger:not(.is-active) {
    background: #FFFFFF !important;
    border: 1px solid #DCE1D8 !important;
    box-shadow: 0 2px 8px rgba(12, 27, 42, 0.04) !important;
}

body:not([data-theme="dark"]) .ag-div-trigger:not(.is-active) .ag-div-num {
    color: #18705C !important;
    font-weight: 800 !important;
}

body:not([data-theme="dark"]) .ag-div-trigger:not(.is-active) .ag-div-name {
    color: #17211D !important;
    font-weight: 800 !important;
}

body:not([data-theme="dark"]) .ag-div-trigger:not(.is-active) .ag-div-summary {
    color: #4A5568 !important;
    font-weight: 500 !important;
}

.ag-div-trigger.is-active,
[data-theme="dark"] .ag-div-trigger {
    background: #18705C !important;
    border-color: var(--tollo-lime, #C8EF50) !important;
    box-shadow: 0 8px 24px rgba(24, 112, 92, 0.4) !important;
}

.ag-div-trigger.is-active .ag-div-num,
[data-theme="dark"] .ag-div-trigger .ag-div-num {
    color: var(--tollo-lime, #C8EF50) !important;
}

.ag-div-trigger.is-active .ag-div-name,
[data-theme="dark"] .ag-div-trigger .ag-div-name {
    color: #FFFFFF !important;
    font-weight: 800 !important;
}

.ag-div-trigger.is-active .ag-div-summary,
[data-theme="dark"] .ag-div-trigger .ag-div-summary {
    color: rgba(255, 255, 255, 0.95) !important;
}

.ag-div-trigger.is-active .ag-div-indicator {
    background: var(--tollo-lime, #C8EF50) !important;
}

/* Right master hero viewport */
.ag-viewport-copy h3,
.ag-viewport-panel h3,
.ag-vcopy-title,
.ag-division-master-viewport h3 {
    color: #FFFFFF !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7) !important;
    font-weight: 800 !important;
}

.ag-viewport-copy p,
.ag-viewport-panel p,
.ag-vcopy-desc,
.ag-division-master-viewport p {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5) !important;
}

/* --------------------------------------------------------------------------
   ZONE 3 (Image 3): Brand Universe Central Viewport Stage
   -------------------------------------------------------------------------- */
.ag-agency-viewport-stage h3,
.ag-agency-panel h3,
.ag-apanel-title,
.ag-agency-panel .ag-apanel-title {
    color: #FFFFFF !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7) !important;
    font-weight: 800 !important;
}

.ag-agency-viewport-stage p,
.ag-agency-panel p,
.ag-apanel-desc,
.ag-agency-panel .ag-apanel-desc {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Top brand tabs */
body:not([data-theme="dark"]) .ag-agency-tab:not(.is-active) {
    background: #FFFFFF !important;
    border: 1px solid #DCE1D8 !important;
}

body:not([data-theme="dark"]) .ag-agency-tab:not(.is-active) .ag-atab-name {
    color: #17211D !important;
    font-weight: 700 !important;
}

body:not([data-theme="dark"]) .ag-agency-tab:not(.is-active) .ag-atab-cat {
    color: #647067 !important;
}

.ag-agency-tab.is-active,
[data-theme="dark"] .ag-agency-tab {
    background: #18705C !important;
    border-color: var(--tollo-lime, #C8EF50) !important;
    box-shadow: 0 8px 24px rgba(24, 112, 92, 0.35) !important;
}

.ag-agency-tab.is-active .ag-atab-name,
[data-theme="dark"] .ag-agency-tab .ag-atab-name {
    color: #FFFFFF !important;
}

.ag-agency-tab.is-active .ag-atab-cat,
[data-theme="dark"] .ag-agency-tab .ag-atab-cat {
    color: var(--tollo-lime, #C8EF50) !important;
}

/* --------------------------------------------------------------------------
   ZONE 4 (Image 4): 5 Bottom Principal 3D Cards & Secondary Meta Box
   -------------------------------------------------------------------------- */
.ag-agrid-card {
    background: linear-gradient(135deg, #102B23 0%, #17211D 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
}

.ag-agrid-name {
    color: #FFFFFF !important;
    font-weight: 800 !important;
}

.ag-agrid-desc {
    color: rgba(255, 255, 255, 0.92) !important;
}

.ag-agrid-country {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.ag-agrid-exclusive-tag {
    color: var(--tollo-lime, #C8EF50) !important;
    font-weight: 700 !important;
}

.ag-agrid-secondary-meta {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--ag-radius-sm, 8px) !important;
    padding: 10px 12px !important;
}

.ag-ameta-label,
.ag-ameta-row span {
    color: rgba(255, 255, 255, 0.78) !important;
}

.ag-ameta-val,
.ag-ameta-row strong {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.ag-agrid-tag {
    background: rgba(200, 239, 80, 0.15) !important;
    color: var(--tollo-lime, #C8EF50) !important;
    font-weight: 700 !important;
}

.ag-agrid-cta-arrow {
    color: var(--tollo-lime, #C8EF50) !important;
    font-weight: 800 !important;
}

/* --------------------------------------------------------------------------
   ZONE 5 (Image 5): Who We Serve Bento Cards (Supermarkets & HoReCa)
   -------------------------------------------------------------------------- */
.ag-bento-card,
.ag-bento-split {
    background: linear-gradient(135deg, #102B23 0%, #0C1B2A 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.ag-bento-card h3,
.ag-bento-card h4,
.ag-bento-card .ag-bento-title,
.ag-bento-split h3,
.ag-bento-split h4,
.ag-bento-split .ag-bento-title,
.ag-bento-title {
    color: #FFFFFF !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    font-weight: 800 !important;
}

.ag-bento-card p,
.ag-bento-split p,
.ag-bento-desc {
    color: rgba(255, 255, 255, 0.92) !important;
}

.ag-bento-highlights li {
    color: rgba(255, 255, 255, 0.95) !important;
}

.ag-bento-highlights li span {
    color: var(--tollo-lime, #C8EF50) !important;
}

/* --------------------------------------------------------------------------
   CTA Box Contrast & Division Page Typography Enforcement
   -------------------------------------------------------------------------- */
.ag-cta-box,
.ag-division-cta .ag-cta-box {
    background: linear-gradient(135deg, #102B23 0%, #0C1B2A 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
}

.ag-cta-box h2,
.ag-division-cta h2,
.ag-cta-box h3,
.ag-division-cta h3 {
    color: #FFFFFF !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6) !important;
    font-weight: 800 !important;
}

.ag-cta-box p,
.ag-division-cta p {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4) !important;
}

.ag-cta-box .ag-eyebrow,
.ag-division-cta .ag-eyebrow {
    color: var(--tollo-lime, #C8EF50) !important;
    font-weight: 800 !important;
}

/* --------------------------------------------------------------------------
   Creative Division Visual Enhancements & Micro-Interactions
   -------------------------------------------------------------------------- */
@keyframes agFloatSubtle {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

@keyframes agPulseGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(200, 239, 80, 0.2); }
    50% { box-shadow: 0 0 30px rgba(200, 239, 80, 0.5); }
}

.ag-division-hero-badge {
    animation: agFloatSubtle 4s ease-in-out infinite !important;
}

.ag-cap-card {
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: 1px solid var(--tollo-border, #E1DBCF) !important;
    background: var(--tollo-surface, #FFFFFF) !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
}

.ag-cap-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(16, 43, 35, 0.12) !important;
    border-color: var(--tollo-focus, #18705C) !important;
}

.ag-cap-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    background: rgba(24, 112, 92, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--tollo-focus, #18705C) !important;
    margin-bottom: 18px !important;
    transition: all 0.3s ease !important;
}

.ag-cap-card:hover .ag-cap-icon {
    transform: scale(1.1) rotate(4deg) !important;
    background: var(--tollo-focus, #18705C) !important;
    color: #FFFFFF !important;
}

.ag-workflow-step {
    position: relative !important;
    transition: all 0.3s ease !important;
    border-radius: var(--ag-radius-md, 12px) !important;
}

.ag-workflow-step:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.09) !important;
    border-color: var(--tollo-focus, #18705C) !important;
}

.ag-dmetric-item {
    transition: transform 0.3s ease !important;
}

.ag-dmetric-item:hover {
    transform: translateY(-3px) !important;
}

/* ==========================================================================
   26. COMPREHENSIVE CARD TYPOGRAPHY & CONTRAST ENGINE (100% POLISH PASS)
   ========================================================================== */

/* A. All Vertical Bento Cards (Who We Serve - 4 Column Cards) */
.ag-bento-vert,
.ag-bento-card.ag-bento-vert {
    background: linear-gradient(135deg, #102B23 0%, #0C1B2A 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
}

.ag-bento-vert .ag-bento-title,
.ag-bento-vert h4,
.ag-bento-card.ag-bento-vert h4,
.ag-bento-card.ag-bento-vert .ag-bento-title {
    color: #FFFFFF !important;
    font-size: 1.22rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 12px 0 8px 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.ag-bento-vert .ag-bento-desc,
.ag-bento-vert p,
.ag-bento-card.ag-bento-vert p {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
}

/* B. All Represented Principal 3D Dossier Cards (5 Cards Grid) */
.ag-agrid-card,
.ag-agency-cards-grid .ag-agrid-card {
    background: linear-gradient(135deg, #102B23 0%, #17211D 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
}

.ag-agrid-card .ag-agrid-name,
.ag-agrid-card h4,
.ag-agrid-name,
h4.ag-agrid-name {
    color: #FFFFFF !important;
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin: 0 0 8px 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.ag-agrid-card .ag-agrid-desc,
.ag-agrid-card p,
.ag-agrid-desc {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
}

.ag-agrid-secondary-meta {
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--ag-radius-sm, 8px) !important;
    padding: 10px 12px !important;
    margin: 12px 0 !important;
}

.ag-agrid-secondary-meta .ag-ameta-label,
.ag-agrid-secondary-meta span {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 0.72rem !important;
}

.ag-agrid-secondary-meta .ag-ameta-val,
.ag-agrid-secondary-meta strong {
    color: #FFFFFF !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
}

/* C. Product Catalog Explorer Cards */
.ag-featured-cat-card {
    border-radius: var(--ag-radius-lg, 16px) !important;
}

body:not([data-theme="dark"]) .ag-featured-cat-card {
    background: #FFFFFF !important;
    border: 1px solid #DCE1D8 !important;
}

body:not([data-theme="dark"]) .ag-featured-cat-card h3,
body:not([data-theme="dark"]) .ag-featured-cat-card .ag-fcat-title {
    color: #17211D !important;
    font-weight: 800 !important;
}

body:not([data-theme="dark"]) .ag-featured-cat-card p {
    color: #4A5568 !important;
}

[data-theme="dark"] .ag-featured-cat-card {
    background: #17211D !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .ag-featured-cat-card h3,
[data-theme="dark"] .ag-featured-cat-card .ag-fcat-title {
    color: #FFFFFF !important;
    font-weight: 800 !important;
}

[data-theme="dark"] .ag-featured-cat-card p {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* D. Mission & Vision Cards on About Page */
.ag-about-mission-card {
    background: linear-gradient(135deg, #102B23 0%, #0C1B2A 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
    padding: 32px 28px !important;
    color: #FFFFFF !important;
}

.ag-about-mission-card h3,
.ag-about-mission-card h4 {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
}

.ag-about-mission-card p {
    color: rgba(255, 255, 255, 0.92) !important;
    line-height: 1.65 !important;
}

/* ==========================================================================
   27. LUXURY ENTERPRISE ANIMATIONS & CREATIVE MICRO-INTERACTIONS
   ========================================================================== */

/* A. Ambient Shimmer & Glow Effects */
@keyframes agShimmerGlow {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes agStepPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(24, 112, 92, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(24, 112, 92, 0); }
}

/* B. Division Page Hero Layout & Floating Telemetry Badge */
.ag-division-hero {
    background: linear-gradient(135deg, #0E2922 0%, #071813 100%) !important;
    padding: clamp(54px, 7vw, 90px) 0 !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
}

.ag-division-hero::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(200, 239, 80, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.ag-division-hero-grid {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: clamp(32px, 5vw, 64px) !important;
    align-items: center !important;
    position: relative !important;
    z-index: 1 !important;
}

@media (max-width: 991px) {
    .ag-division-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
}

.ag-division-hero-title {
    font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin: 14px 0 18px 0 !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5) !important;
}

.ag-division-hero-desc {
    font-size: clamp(0.95rem, 1.2vw, 1.12rem) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.65 !important;
    margin: 0 0 28px 0 !important;
    max-width: 620px !important;
}

.ag-division-hero-visual {
    position: relative !important;
    width: 100% !important;
    display: block !important;
}

.ag-division-hero-photo {
    width: 100% !important;
    height: clamp(300px, 36vw, 420px) !important;
    object-fit: cover !important;
    border-radius: var(--ag-radius-xl, 24px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    display: block !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease !important;
}

.ag-division-hero-visual:hover .ag-division-hero-photo {
    transform: scale(1.025) !important;
    filter: brightness(1.05) !important;
}

.ag-division-hero-badge {
    position: absolute !important;
    bottom: -16px !important;
    left: -16px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    background: rgba(10, 36, 30, 0.94) !important;
    border: 1px solid rgba(200, 239, 80, 0.45) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
    padding: 14px 18px !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    max-width: 280px !important;
    animation: agFloatSubtle 4s ease-in-out infinite !important;
}

.ag-division-hero-badge strong {
    color: var(--tollo-lime, #C8EF50) !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    display: block !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

.ag-division-hero-badge span {
    color: #FFFFFF !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    display: block !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

@media (max-width: 767px) {
    .ag-division-hero-badge {
        bottom: 12px !important;
        left: 12px !important;
        right: 12px !important;
        max-width: none !important;
    }
}

/* C. Telemetry Strip High-Impact Styling */
.ag-div-metrics-strip {
    position: relative;
    backdrop-filter: blur(10px);
}

.ag-dmetric-item strong {
    background: linear-gradient(135deg, #FFFFFF 0%, var(--tollo-lime, #C8EF50) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform 0.3s ease;
}

.ag-dmetric-item:hover strong {
    transform: scale(1.08);
}

/* D. Capability Matrix Cards Interactive Polish */
.ag-cap-card {
    border: 1px solid var(--tollo-border, #E1DBCF) !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
    padding: 32px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
}

.ag-cap-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--tollo-focus, #18705C), transparent);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.ag-cap-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 45px rgba(16, 43, 35, 0.12) !important;
    border-color: rgba(24, 112, 92, 0.4) !important;
}

.ag-cap-card:hover::after {
    opacity: 1;
}

.ag-cap-card h3 {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    margin: 0 0 10px 0 !important;
    color: var(--tollo-heading, #17211D) !important;
    line-height: 1.35 !important;
}

.ag-cap-card p {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    color: var(--tollo-text-muted, #647067) !important;
    margin: 0 !important;
    flex: 1 !important;
}

.ag-cap-bullets li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    line-height: 1.4 !important;
}

/* E. Workflow Step Numbers & Cards */
.ag-workflow-step {
    border-radius: var(--ag-radius-md, 14px) !important;
    border: 1px solid var(--tollo-border, #E1DBCF) !important;
    background: var(--tollo-surface, #FFFFFF) !important;
    padding: 28px 24px !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ag-workflow-step:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--tollo-focus, #18705C) !important;
}

.ag-workflow-step h3 {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
    color: var(--tollo-heading, #17211D) !important;
}

.ag-workflow-step p {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    color: var(--tollo-text-muted, #647067) !important;
}

/* F. Hub Page Article Card Elevation */
.ag-divisions-grid-section article {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ag-divisions-grid-section article:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.12) !important;
    border-color: var(--tollo-focus, #18705C) !important;
}

/* ==========================================================================
   26. SEAMLESS UNIFIED PALETTE: FAQ & DIRECT WHOLESALE INQUIRY HARMONY
   ========================================================================== */
.ag-knowledge-desk-section {
    background: var(--tollo-bg, #F8FAFC) !important;
    padding: clamp(56px, 7vw, 90px) 0 !important;
    border-top: 1px solid var(--tollo-border, rgba(0, 0, 0, 0.06)) !important;
    margin-bottom: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    contain: paint !important;
    isolation: isolate !important;
}

.ag-lead-section {
    background: var(--tollo-bg, #F8FAFC) !important;
    padding: 0 0 clamp(64px, 8vw, 100px) 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
    position: relative !important;
    overflow: hidden !important;
    contain: paint !important;
    isolation: isolate !important;
}

.ag-lead-shell {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    contain: paint !important;
    background: linear-gradient(145deg, #0d3329 0%, #061c16 100%) !important;
    border: 1px solid rgba(200, 239, 80, 0.22) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 60px rgba(6, 28, 22, 0.16) !important;
    padding: clamp(36px, 5vw, 60px) !important;
}

.ag-lead-shell::before,
.ag-lead-shell::after {
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.ag-lead-shell .ag-lead-copy .ag-eyebrow {
    background: rgba(200, 239, 80, 0.14) !important;
    color: #C8EF50 !important;
    border: 1px solid rgba(200, 239, 80, 0.3) !important;
}

.ag-lead-shell .ag-lead-copy h2 {
    color: #FFFFFF !important;
}

.ag-lead-shell .ag-lead-copy p {
    color: rgba(255, 255, 255, 0.82) !important;
}

.ag-lead-shell .ag-lead-points span {
    color: #E2F899 !important;
}

[data-theme="dark"] .ag-knowledge-desk-section,
[data-theme="dark"] .ag-lead-section {
    background: var(--tollo-bg, #0B1914) !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .ag-lead-shell {
    background: linear-gradient(145deg, #091e17 0%, #040e0b 100%) !important;
    border-color: rgba(200, 239, 80, 0.18) !important;
}