/* ============================================================
   CLAY.COM-INSPIRED DESIGN SYSTEM OVERRIDE
   LeadzenAI Landing Page Redesign
   ============================================================
   All styles override main.css without modifying it.
   To revert: simply empty this file.
   ============================================================ */

/* ========================= Font Import ========================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

/* ========================= CSS Variables Override ========================= */
:root {
    /* Clay-inspired Color Palette */
    --clay-bg: #FAF9F7;
    --clay-bg-alt: #F3F1EE;
    --clay-bg-warm: #EDE9E3;
    --clay-text: #1D2026;
    --clay-text-secondary: #6B6F76;
    --clay-text-muted: #9B9EA4;
    --clay-accent: #C8B89C;
    --clay-accent-warm: #D4C5AA;
    --clay-border: #E5E2DD;
    --clay-border-light: #EDEBE7;
    --clay-white: #FFFFFF;
    --clay-black: #1D2026;
    --clay-cta: #1D2026;
    --clay-cta-hover: #2D3038;
    --clay-cta-text: #FFFFFF;
    --clay-success: #2DA771;
    --clay-danger: #E5534B;
    --clay-gradient-start: rgba(200, 184, 156, 0.15);
    --clay-gradient-end: rgba(250, 249, 247, 0);
    --clay-shadow-sm: 0 1px 3px rgba(29, 32, 38, 0.04);
    --clay-shadow-md: 0 4px 16px rgba(29, 32, 38, 0.06);
    --clay-shadow-lg: 0 8px 32px rgba(29, 32, 38, 0.08);
    --clay-shadow-hover: 0 12px 40px rgba(29, 32, 38, 0.12);
    --clay-radius-sm: 8px;
    --clay-radius-md: 12px;
    --clay-radius-lg: 16px;
    --clay-radius-xl: 24px;
    --clay-radius-pill: 999px;
    --clay-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --clay-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* Override existing CSS variables */
    --body-bg: 40 20% 97%;
    --body-color: 220 10% 15%;
    --heading-color: 220 10% 13%;
    --white: 0 0% 100%;
    --border-color: 35 15% 88%;
    --section-bg: 35 20% 95%;
    --heading-font: 'Inter', sans-serif;
    --body-font: 'Inter', sans-serif;
}

/* ========================= Global Reset & Base ========================= */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--clay-bg) !important;
    color: var(--clay-text) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-feature-settings: 'ss03' 1, 'cv01' 1;
    line-height: 1.6 !important;
    overflow-x: hidden;
}

::selection {
    background-color: var(--clay-black);
    color: var(--clay-white);
}

::-moz-selection {
    background-color: var(--clay-black);
    color: var(--clay-white);
}

html {
    scroll-behavior: smooth;
}

/* Page Frame Lines Disabled */

/* ========================= Typography ========================= */
h1, h2, h3, h4, h5, h6,
.section__title {
    font-family: 'Inter', sans-serif !important;
    color: var(--clay-text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
}

h1 {
    font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}

h2, .section__title {
    font-size: clamp(1.75rem, 2.8vw, 2.35rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
}

h4 {
    font-size: clamp(1.1rem, 1.5vw, 1.25rem) !important;
}

p {
    color: var(--clay-text-secondary) !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
}

a {
    color: var(--clay-text) !important;
    text-decoration: none !important;
    transition: var(--clay-transition-fast) !important;
}

/* Eyebrow / Sub-heading (Clay monospace style) */
.sub__heading,
.section__heading > span:first-child,
.banner__content > span {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--clay-text-muted) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline-block !important;
    margin-bottom: 16px !important;
    position: relative !important;
}

.sub__heading::after,
.section__heading > span:first-child::after,
.banner__content > span::after {
    display: none !important;
}

.section__heading {
    margin-bottom: 0 !important;
}

.section__heading p,
.section__heading .char-animation {
    max-width: 600px !important;
    margin-top: 16px !important;
    font-size: 1.05rem !important;
    color: var(--clay-text-secondary) !important;
    line-height: 1.7 !important;
}

.section__heading.text-center p,
.section__heading.text-center .char-animation {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ========================= Buttons ========================= */
.btn {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    border-radius: var(--clay-radius-pill) !important;
    padding: 12px 28px !important;
    transition: var(--clay-transition) !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn--base,
.btn.btn--base {
    background-color: var(--clay-cta) !important;
    color: var(--clay-cta-text) !important;
    box-shadow: var(--clay-shadow-sm) !important;
}

.btn--base:hover,
.btn.btn--base:hover {
    background-color: var(--clay-cta-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--clay-shadow-md) !important;
}

.btn--base-two,
.btn.btn--base-two {
    background-color: var(--clay-bg-alt) !important;
    color: var(--clay-text) !important;
    border: 1px solid var(--clay-border) !important;
}

.btn--base-two:hover,
.btn.btn--base-two:hover {
    background-color: var(--clay-bg-warm) !important;
    border-color: var(--clay-text-muted) !important;
    transform: translateY(-1px) !important;
}

.btn--sm {
    padding: 8px 20px !important;
    font-size: 0.8125rem !important;
}

.btn-outline--info {
    background: transparent !important;
    border: 1px solid var(--clay-border) !important;
    color: var(--clay-text) !important;
    border-radius: var(--clay-radius-pill) !important;
}

.btn-outline--info:hover {
    background: var(--clay-bg-alt) !important;
    border-color: var(--clay-text-muted) !important;
}

/* ========================= Header / Navbar ========================= */
.header__area {
    position: fixed !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 80px) !important;
    max-width: 1320px !important;
    z-index: 1000 !important;
    background: rgba(250, 249, 247, 0.82) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(229, 226, 221, 0.6) !important;
    border-radius: var(--clay-radius-pill) !important;
    padding: 0 8px !important;
    transition: var(--clay-transition) !important;
    box-shadow: 0 2px 20px rgba(29, 32, 38, 0.04) !important;
}

.header__area .container {
    max-width: 100% !important;
    padding: 0 16px !important;
}

.header__main {
    padding: 8px 0 !important;
    border-bottom: none !important;
    min-height: auto !important;
}

.header__logo img,
.offcanvas__topbar img {
    max-height: 38px !important;
    width: auto !important;
    filter: none !important;
    object-fit: contain !important;
}

/* ========================= Clay Brand Text Logo ========================= */
.clay-brand-logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    text-decoration: none !important;
    padding: 4px 8px !important;
    border-radius: var(--clay-radius-pill) !important;
    transition: var(--clay-transition-fast) !important;
}

.clay-brand-logo .clay-logo-dot {
    width: 9px !important;
    height: 9px !important;
    background: var(--clay-accent) !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 8px rgba(200, 184, 156, 0.4) !important;
}

.clay-brand-logo .clay-logo-text {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: var(--clay-text) !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}

.clay-brand-logo .clay-logo-text .accent {
    color: var(--clay-text-muted) !important;
    font-weight: 400 !important;
}

.clay-brand-logo.footer-logo .clay-logo-text {
    font-size: 1.1rem !important;
}

/* ==========================================================================
   PROFESSIONAL CLAY LIGHT DASHBOARD DESIGN SYSTEM (STRICT BLACK & WHITE)
   Completely removes sidebar grey shadow boxes, frame lines, and low-contrast white text.
   ========================================================================== */

/* 1. Disable Landing Page Frame Lines on Dashboard Pages */
body.dashboard-body::before,
body.dashboard-body::after,
.dashboard__area::before,
.dashboard__area::after,
.dashboard__wrap::before,
.dashboard__wrap::after {
    display: none !important;
}

/* 2. Pure Clean Sidebar (Flat Off-White, Zero Grey Shadows) */
.dashboard__sidebar {
    background-color: #FAFAFA !important;
    border-right: 1px solid #E5E7EB !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

.dashboard__logo {
    padding: 20px 24px !important;
    border-bottom: 1px solid #E5E7EB !important;
    flex-shrink: 0 !important;
}

.dashboard__menu {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    padding-bottom: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dashboard__menu::-webkit-scrollbar {
    width: 4px !important;
}

.dashboard__menu::-webkit-scrollbar-thumb {
    background: #E5E7EB !important;
    border-radius: 4px !important;
}

.dashboard__menu ul,
.dashboard__menu ul li {
    background: transparent !important;
    box-shadow: none !important;
}

/* Sidebar Footer & AI Credit / Profile Cards */
.sidebar__footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding: 14px 16px !important;
    border-top: 1px solid #E5E7EB !important;
    background-color: #FAFAFA !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.sidebar__credit-box {
    background-color: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.sidebar__credit-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-bottom: 8px !important;
}

.sidebar__credit-header i {
    color: #111827 !important;
    margin-right: 4px !important;
}

.sidebar__credit-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 8px 12px !important;
    background-color: #111827 !important;
    color: #FFFFFF !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    text-align: center !important;
    transition: all 0.15s ease !important;
}

.sidebar__credit-btn:hover {
    background-color: #1F2937 !important;
    color: #FFFFFF !important;
}

.sidebar__user-box {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 4px 2px 2px 2px !important;
}

.sidebar__user-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid #E5E7EB !important;
}

.sidebar__user-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.sidebar__user-name {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.sidebar__user-email {
    font-size: 0.75rem !important;
    color: #6B7280 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.sidebar__user-gear {
    color: #6B7280 !important;
    font-size: 0.875rem !important;
    padding: 6px !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
}

.sidebar__user-gear:hover {
    color: #111827 !important;
    background-color: #E5E7EB !important;
}


.dashboard__menu {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    padding-top: 12px !important;
    padding-bottom: 24px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dashboard__menu ul li a {
    color: #111827 !important; /* Bold Crisp Black */
    font-size: 0.9375rem !important; /* 15px High-readability */
    font-weight: 600 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    padding: 12px 18px !important;
    margin: 4px 12px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: all 0.15s ease !important;
}

.dashboard__menu ul li a i {
    color: #4B5563 !important;
    font-size: 1.125rem !important;
    width: 22px !important;
    text-align: center !important;
}

.dashboard__menu ul li a:hover,
.dashboard__menu ul li a.active,
.dashboard__menu ul li a[aria-expanded=true] {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #E5E7EB !important;
    font-weight: 700 !important;
}

.dashboard__menu ul li a:hover i,
.dashboard__menu ul li a.active i {
    color: #000000 !important;
}

/* Sidebar Dropdown Container — Pure Flat & Transparent (Zero Murky Grey Box) */
.sidebar__dropdown,
.dashboard__menu .sidebar__dropdown {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 4px 0 8px 16px !important;
    margin: 0 !important;
}

.sidebar__dropdown ul {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.sidebar__dropdown ul li a {
    color: #374151 !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    padding: 10px 16px !important;
    margin: 3px 8px !important;
    border-radius: 8px !important;
}

.sidebar__dropdown ul li a:hover,
.sidebar__dropdown ul li a.active {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #E5E7EB !important;
}


/* 3. High-Contrast Dashboard Header & Controls */
.dashboard__header {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
    box-shadow: none !important;
    padding: 14px 24px !important;
}

.user-header-search-field,
.search__box input {
    background-color: #F9FAFB !important;
    border: 1px solid #D1D5DB !important;
    color: #111827 !important;
    font-weight: 600 !important;
}

.user-header-search-field::placeholder {
    color: #6B7280 !important;
    font-weight: 500 !important;
}

.search__box button,
.user-header-search button,
form.search__box button[type="submit"],
form.user-header-search button[type="submit"] {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    color: #6B7280 !important;
}

.search__box button i,
.user-header-search button i,
form.search__box button[type="submit"] i,
form.user-header-search button[type="submit"] i {
    color: #6B7280 !important;
    font-size: 0.875rem !important;
}


/* AI Credit, Notifications & Profile Header Widgets */
.ai__credit {
    background: #F3F4F6 !important;
    border: 1px solid #D1D5DB !important;
    color: #111827 !important;
    font-family: 'Space Mono', monospace !important;
    font-weight: 700 !important;
    font-size: 0.8125rem !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.ai__credit i {
    color: #111827 !important;
}

.notification__btn {
    background: #F3F4F6 !important;
    border: 1px solid #D1D5DB !important;
    color: #111827 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.notification__btn i {
    color: #111827 !important;
}

.profile__dropdown,
.dashboard__header .profile__dropdown span,
.dashboard__header .dropdown-toggle span {
    color: #111827 !important;
    font-weight: 700 !important;
}

.dashboard__header .dropdown-toggle i,
.dashboard__header .dropdown-toggle::after {
    color: #111827 !important;
}

/* 4. Dropdown Popups & Search Results (Pure White Cards) */
.user-header-search-list,
.dropdown-menu {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    padding: 6px !important;
}

.user-header-search-list a,
.user-header-search-list .empty-search,
.dropdown-item {
    color: #111827 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}

.user-header-search-list a:hover,
.dropdown-item:hover {
    background-color: #F3F4F6 !important;
    color: #000000 !important;
}

/* 5. Dashboard Main Content & Cards */
.dashboard__body,
.dashboard__content,
.dashboard-overview {
    background-color: #FAFAFA !important;
}

.card,
.dashboard__card,
.custom--card {
    background-color: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.dashboard__card > span {
    background-color: #F3F4F6 !important;
    color: #111827 !important;
    border: 1px solid #E5E7EB !important;
}

.dashboard__card > span i {
    color: #111827 !important;
}

/* Stat Cards on Lead Search & Scraper Pages */
.scraper-stat-card__label {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #6B7280 !important;
    background: transparent !important;
    margin-bottom: 0.45rem !important;
}

.scraper-stat-card__value {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: #111827 !important;
    background: transparent !important;
    line-height: 1 !important;
}

.scraper-empty-state,
.scraper-empty-state * {
    color: #6B7280 !important;
    background: transparent !important;
}

/* 6. Form Controls & High-Contrast Typography */
.form-label,
label,
.dashboard__body label {
    color: #111827 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    margin-bottom: 6px !important;
}

select,
.form-control,
.form-select,
.select2-container--default .select2-selection--single {
    background-color: #FFFFFF !important;
    border: 1px solid #D1D5DB !important;
    color: #111827 !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

select:focus,
.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--open .select2-selection--single {
    color: #111827 !important;
    border-color: #111827 !important;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08) !important;
    outline: none !important;
}

select option,
.form-select option {
    background-color: #FFFFFF !important;
    color: #111827 !important;
    font-weight: 500 !important;
}

/* Browser Autofill Overrides (Chrome, Safari, Edge) — Fixes white/faded text on autofill background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    -webkit-text-fill-color: #111827 !important;
    color: #111827 !important;
    -webkit-box-shadow: 0 0 0px 1000px #F3F4F6 inset !important;
    box-shadow: 0 0 0px 1000px #F3F4F6 inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
    font-weight: 600 !important;
}



h1, h2, h3, h4, h5, h6,
.card-title {
    color: #111827 !important;
    font-weight: 700 !important;
}

p, small, span, .text-muted {
    color: #4B5563 !important;
}

.dashboard-kicker,
.sub__heading {
    font-family: 'Space Mono', monospace !important;
    color: #111827 !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

/* 7. Action Buttons (Solid Black & Clean White) */
.btn--base,
.btn-base,
.btn.btn--base,
button.btn--base,
form:not(.search__box):not(.user-header-search) button[type="submit"] {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 10px 24px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

.btn--base:hover,
.btn-base:hover,
.btn.btn--base:hover,
form:not(.search__box):not(.user-header-search) button[type="submit"]:hover {
    background-color: #1F2937 !important;
    color: #FFFFFF !important;
}

.btn--secondary,
.btn.btn--secondary,
.btn--base-two,
.btn.btn--base-two {
    background-color: #F3F4F6 !important;
    color: #111827 !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 999px !important;
}

.btn--secondary:hover,
.btn.btn--secondary:hover,
.btn--base-two:hover,
.btn.btn--base-two:hover {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border-color: #111827 !important;
}

/* ==========================================================================
   HIGH VISIBILITY & CONTRAST OVERRIDES — USER DASHBOARD
   Fixes low contrast text, dark green dropdown popups, and yellow accents.
   ========================================================================== */

/* 1. Fix User Header Search Popup ("No search result found") */
.user-header-search-list {
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border) !important;
    box-shadow: var(--clay-shadow-md) !important;
    border-radius: 12px !important;
}

.user-header-search-list a,
.user-header-search-list .empty-search {
    color: var(--clay-text) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}

.user-header-search-list .empty-search {
    color: var(--clay-text-secondary) !important;
    font-weight: 500 !important;
}

.user-header-search-list a:hover {
    background-color: var(--clay-bg-alt) !important;
    color: var(--clay-text) !important;
}

/* 2. Fix Profile Dropdown Menu ("Profile Setting", "Logout", etc.) */
.dropdown-menu,
.header-dropdown-menu,
.user-dropdown {
    background-color: var(--clay-white) !important;
    border: 1px solid var(--clay-border) !important;
    box-shadow: var(--clay-shadow-md) !important;
    border-radius: 12px !important;
    padding: 6px !important;
}

.dropdown-item,
.dropdown-menu a,
.dropdown-menu li a {
    color: var(--clay-text) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    border-bottom: 1px solid var(--clay-border-light) !important;
    padding: 10px 16px !important;
    border-radius: 6px !important;
    transition: var(--clay-transition-fast) !important;
}

.dropdown-item:hover,
.dropdown-menu a:hover,
.dropdown-menu li a:hover {
    background-color: var(--clay-bg-alt) !important;
    color: var(--clay-text) !important;
}

/* 3. High Contrast Dashboard Sidebar Links */
.dashboard__menu ul li a {
    color: var(--clay-text) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    opacity: 0.9 !important;
}

.dashboard__menu ul li a:hover,
.dashboard__menu ul li a.active {
    color: var(--clay-text) !important;
    opacity: 1 !important;
    background-color: var(--clay-white) !important;
    border-color: var(--clay-border) !important;
    font-weight: 700 !important;
}

/* 4. High Contrast Dashboard Typography & Headings */
.dashboard__body,
.dashboard__content,
.dashboard__header {
    color: var(--clay-text) !important;
}

.dashboard__body h1,
.dashboard__body h2,
.dashboard__body h3,
.dashboard__body h4,
.dashboard__body h5,
.dashboard__body h6,
.card-title,
.widget-card__title {
    color: var(--clay-text) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

.dashboard__body p,
.dashboard__body span,
.dashboard__body small,
.dashboard__body label,
.card-subtitle,
.text-muted,
.empty-state {
    color: var(--clay-text-secondary) !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

/* Eyebrows / Workspace Overview Tag */
.workspace-tag,
.dashboard__header span,
.dashboard__body .sub__heading {
    font-family: 'Space Mono', monospace !important;
    color: var(--clay-text-muted) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

/* 5. Icons & Buttons in Header */
.dashboard__header i,
.user-header-search i,
.search__box i {
    color: var(--clay-text) !important;
}

/* 6. Dashboard Cards Contrast */
.card,
.dashboard__card,
.custom--card {
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

/* 7. Table Cell Text High Contrast */
.table td,
.table th {
    color: var(--clay-text) !important;
    font-weight: 500 !important;
}

.table th {
    color: var(--clay-text-muted) !important;
    font-weight: 700 !important;
}

.header__menu ul {
    gap: 4px !important;
}

.header__menu ul li a {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--clay-text) !important;
    padding: 8px 14px !important;
    border-radius: var(--clay-radius-pill) !important;
    transition: var(--clay-transition-fast) !important;
}

.header__menu ul li a:hover,
.header__menu ul li a.active {
    background: var(--clay-bg-alt) !important;
    color: var(--clay-text) !important;
}

.header__widgets {
    gap: 8px !important;
}

.header__widgets .language__item {
    background: transparent !important;
    border: none !important;
    padding: 6px 10px !important;
    border-radius: var(--clay-radius-pill) !important;
}

.header__widgets .language__item:hover {
    background: var(--clay-bg-alt) !important;
}

.header__widgets .language__item p {
    color: var(--clay-text) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
}

.header__widgets .language__item img {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
}

.header__widgets .dropdown-menu {
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border) !important;
    border-radius: var(--clay-radius-md) !important;
    box-shadow: var(--clay-shadow-lg) !important;
    padding: 8px !important;
    margin-top: 8px !important;
}

.header__widgets .dropdown-menu .dropdown-item {
    border-radius: var(--clay-radius-sm) !important;
    padding: 8px 12px !important;
}

.header__widgets .dropdown-menu .dropdown-item:hover {
    background: var(--clay-bg-alt) !important;
}

.header__login .btn {
    background-color: var(--clay-cta) !important;
    color: var(--clay-cta-text) !important;
    padding: 8px 20px !important;
    font-size: 0.8125rem !important;
}

@media (max-width: 991px) {
    .header__area {
        width: calc(100% - 32px) !important;
        top: 10px !important;
        border-radius: var(--clay-radius-lg) !important;
    }
}

/* ========================= Offcanvas Mobile Menu ========================= */
.offcanvas__area {
    background: var(--clay-white) !important;
    border-right: 1px solid var(--clay-border) !important;
}

.offcanvas__area .offcanvas__topbar {
    border-bottom: 1px solid var(--clay-border) !important;
}

.offcanvas__area .offcanvas__topbar img {
    filter: brightness(0) !important;
}

.offcanvas__menu ul li a {
    color: var(--clay-text) !important;
    font-weight: 500 !important;
}

.menu__close {
    color: var(--clay-text) !important;
    background: var(--clay-bg-alt) !important;
    border-radius: 50% !important;
}

.menu__open {
    color: var(--clay-text) !important;
}

/* ========================= Banner / Hero Section ========================= */
.banner__area {
    background: var(--clay-bg) !important;
    padding-top: 190px !important;
    padding-bottom: 120px !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: 780px !important;
    display: flex !important;
    align-items: center !important;
}

.banner__area::after {
    display: none !important;
}

.banner__area .container {
    position: relative;
    z-index: 2;
    width: 100% !important;
}

.banner__content {
    text-align: left !important;
    max-width: 580px !important;
    margin: 0 !important;
}

.banner__content > span {
    background: var(--clay-bg-alt) !important;
    border: 1px solid var(--clay-border) !important;
    padding: 6px 14px !important;
    padding-left: 26px !important;
    border-radius: var(--clay-radius-pill) !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: var(--clay-text-secondary) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.4 !important;
}

.banner__content > span::after {
    width: 6px !important;
    height: 6px !important;
    background-color: var(--clay-success) !important;
    left: 12px !important;
    animation: clay-pulse 2s infinite !important;
}

@keyframes clay-pulse {
    0% { box-shadow: 0 0 0 0 rgba(45, 167, 113, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(45, 167, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(45, 167, 113, 0); }
}

.banner__content h1 {
    font-size: clamp(1.85rem, 2.5vw, 2.45rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.18 !important;
    color: var(--clay-text) !important;
    margin-bottom: 16px !important;
}

.banner__content h1 .highlight {
    background: linear-gradient(135deg, #C8B89C 0%, #A89070 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.banner__content p {
    font-size: 1.05rem !important;
    color: var(--clay-text-secondary) !important;
    max-width: 500px !important;
    margin: 0 0 28px 0 !important;
    line-height: 1.65 !important;
}

.banner__btn {
    justify-content: flex-start !important;
    display: flex !important;
    gap: 14px !important;
    margin-bottom: 32px !important;
}

.banner__btn .btn--base {
    padding: 12px 28px !important;
    font-size: 0.9375rem !important;
}

.banner__btn .btn--base-two {
    padding: 12px 28px !important;
    font-size: 0.9375rem !important;
}

.banner__content ul {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.banner__content ul li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.84rem !important;
    color: var(--clay-text-muted) !important;
    font-weight: 500 !important;
}

.banner__content ul li i {
    color: var(--clay-accent) !important;
    font-size: 0.85rem !important;
}

/* Dashboard Component - Clay Light Theme Mockup */
.banner__dashboard {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    max-width: calc(100% + 90px) !important;
    width: calc(100% + 90px) !important;
    margin-right: -90px !important;
    z-index: 1 !important;
    user-select: none !important;
    margin-top: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.clay-mock-dashboard {
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border) !important;
    border-radius: var(--clay-radius-lg) !important;
    box-shadow: 0 24px 60px rgba(29, 32, 38, 0.08), 0 4px 16px rgba(29, 32, 38, 0.03) !important;
    overflow: hidden !important;
    font-family: 'Inter', sans-serif !important;
    text-align: left !important;
    width: 100% !important;
}

/* Header */
.mock-header {
    background: var(--clay-bg-alt) !important;
    border-bottom: 1px solid var(--clay-border-light) !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.mock-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 120px !important;
}

.mock-logo-dot {
    width: 9px !important;
    height: 9px !important;
    background: var(--clay-accent) !important;
    border-radius: 50% !important;
}

.mock-brand-name {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    color: var(--clay-text) !important;
}

.mock-search {
    position: relative !important;
    flex: 1 !important;
    max-width: 240px !important;
}

.mock-search i {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 11px !important;
    color: var(--clay-text-muted) !important;
}

.mock-search input {
    width: 100% !important;
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border-light) !important;
    border-radius: var(--clay-radius-pill) !important;
    padding: 5px 12px 5px 30px !important;
    font-size: 11.5px !important;
    color: var(--clay-text) !important;
}

.mock-user-area {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.mock-badge {
    background: var(--clay-bg-warm) !important;
    border: 1px solid var(--clay-border) !important;
    padding: 3px 10px !important;
    border-radius: var(--clay-radius-pill) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--clay-text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.mock-badge i {
    color: #F5A623 !important;
}

.mock-icon-btn {
    color: var(--clay-text-muted) !important;
    font-size: 13px !important;
}

.mock-profile {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.mock-avatar {
    width: 24px !important;
    height: 24px !important;
    background: var(--clay-black) !important;
    color: var(--clay-white) !important;
    border-radius: 50% !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mock-name {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--clay-text) !important;
}

.mock-profile i {
    font-size: 10px !important;
    color: var(--clay-text-muted) !important;
}

/* Body Layout */
.mock-body {
    display: flex !important;
}

.mock-sidebar {
    width: 155px !important;
    min-width: 155px !important;
    background: var(--clay-bg-alt) !important;
    border-right: 1px solid var(--clay-border-light) !important;
    padding: 12px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.mock-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 12px !important;
    border-radius: var(--clay-radius-sm) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--clay-text-secondary) !important;
    white-space: nowrap !important;
}

.mock-menu-item i {
    font-size: 12px !important;
    width: 16px !important;
}

.mock-menu-item.active {
    background: var(--clay-white) !important;
    color: var(--clay-text) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.mock-main {
    flex: 1 !important;
    padding: 14px !important;
    background: var(--clay-bg) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow: hidden !important;
}

/* Overview Banner */
.mock-overview {
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border-light) !important;
    border-radius: var(--clay-radius-md) !important;
    padding: 12px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.mock-eyebrow {
    font-family: 'Space Mono', monospace !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: var(--clay-text-muted) !important;
    letter-spacing: 0.08em !important;
}

.mock-overview h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 2px 0 !important;
    color: var(--clay-text) !important;
}

.mock-overview p {
    font-size: 10.5px !important;
    color: var(--clay-text-secondary) !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

.mock-actions {
    display: flex !important;
    gap: 8px !important;
}

.mock-btn {
    padding: 5px 12px !important;
    border-radius: var(--clay-radius-pill) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
}

.mock-btn.primary {
    background: var(--clay-black) !important;
    color: var(--clay-white) !important;
}

.mock-btn.secondary {
    background: var(--clay-bg-alt) !important;
    color: var(--clay-text) !important;
    border: 1px solid var(--clay-border) !important;
}

/* 4 Stats Grid */
.mock-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
}

.mock-stat-card {
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border-light) !important;
    border-radius: var(--clay-radius-md) !important;
    padding: 10px 12px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.mock-stat-label {
    font-size: 10px !important;
    color: var(--clay-text-muted) !important;
    display: block !important;
}

.mock-stat-info h3 {
    font-size: 15px !important;
    font-weight: 800 !important;
    margin: 2px 0 !important;
    color: var(--clay-text) !important;
}

.mock-stat-sub {
    font-size: 9.5px !important;
    color: var(--clay-text-secondary) !important;
}

.mock-stat-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
}

.mock-stat-icon.blue { background: rgba(59, 130, 246, 0.1) !important; color: #3B82F6 !important; }
.mock-stat-icon.green { background: rgba(45, 167, 113, 0.1) !important; color: #2DA771 !important; }
.mock-stat-icon.amber { background: rgba(245, 166, 35, 0.1) !important; color: #F5A623 !important; }
.mock-stat-icon.dark { background: var(--clay-bg-alt) !important; color: var(--clay-text) !important; }

/* Charts Row */
.mock-charts-row {
    display: grid !important;
    grid-template-columns: 1.6fr 1fr !important;
    gap: 10px !important;
}

.mock-card {
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border-light) !important;
    border-radius: var(--clay-radius-md) !important;
    padding: 12px !important;
}

.mock-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 8px !important;
}

.mock-card-header h5,
.mock-card h5 {
    font-size: 12px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: var(--clay-text) !important;
}

.mock-card-sub {
    font-size: 9.5px !important;
    color: var(--clay-text-muted) !important;
    display: block !important;
}

.mock-pill-btn {
    font-size: 9.5px !important;
    font-weight: 600 !important;
    background: var(--clay-bg-alt) !important;
    border: 1px solid var(--clay-border-light) !important;
    padding: 3px 10px !important;
    border-radius: var(--clay-radius-pill) !important;
    color: var(--clay-text) !important;
}

.mock-line-svg {
    width: 100% !important;
    height: 70px !important;
}

.mock-chart-dates {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 9px !important;
    color: var(--clay-text-muted) !important;
    margin-top: 4px !important;
}

.mock-donut-body {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 6px !important;
}

.mock-donut-svg {
    width: 65px !important;
    height: 65px !important;
    transform: rotate(-90deg) !important;
}

.mock-donut-legend {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    font-size: 9.5px !important;
    color: var(--clay-text-secondary) !important;
}

.mock-donut-legend .dot {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    margin-right: 5px !important;
}

.mock-donut-legend .dot.black { background: #1D2026 !important; }
.mock-donut-legend .dot.gold { background: #C8B89C !important; }
.mock-donut-legend .dot.green { background: #2DA771 !important; }
.mock-donut-legend .dot.red { background: #E5534B !important; }

/* Bottom Row */
.mock-bottom-row {
    display: grid !important;
    grid-template-columns: 1fr 1.4fr !important;
    gap: 10px !important;
}

.mock-bars-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

.mock-bar-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 10px !important;
    color: var(--clay-text-secondary) !important;
}

.mock-bar-item span:first-child {
    width: 55px !important;
}

.mock-bar-track {
    flex: 1 !important;
    height: 6px !important;
    background: var(--clay-bg-alt) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

.mock-bar-fill {
    height: 100% !important;
    border-radius: 3px !important;
}

.mock-bar-fill.green { background: #2DA771 !important; }
.mock-bar-fill.gold { background: #C8B89C !important; }
.mock-bar-fill.dark { background: #1D2026 !important; }

/* Table */
.mock-table-wrap {
    margin-top: 6px !important;
}

.mock-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 10px !important;
}

.mock-table th {
    text-align: left !important;
    color: var(--clay-text-muted) !important;
    font-weight: 600 !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--clay-border-light) !important;
}

.mock-table td {
    padding: 5px 0 !important;
    color: var(--clay-text) !important;
    border-bottom: 1px dashed var(--clay-border-light) !important;
}

.status-badge {
    padding: 2px 8px !important;
    border-radius: var(--clay-radius-pill) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
}

.status-badge.success { background: rgba(45, 167, 113, 0.1) !important; color: #2DA771 !important; }
.status-badge.active { background: rgba(245, 166, 35, 0.1) !important; color: #F5A623 !important; }

@media (max-width: 991px) {
    .banner__dashboard {
        margin-top: 40px !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 991px) {
    .banner__area {
        padding-top: 130px !important;
        padding-bottom: 50px !important;
        min-height: auto !important;
        display: block !important;
    }

    .banner__content {
        text-align: center !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .banner__content p {
        margin: 0 auto 24px !important;
    }

    .banner__btn {
        justify-content: center !important;
    }

    .banner__content ul {
        justify-content: center !important;
    }

    .banner__dashboard {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        max-width: 100% !important;
        text-align: center !important;
        margin-top: 40px !important;
        padding-inline: 16px !important;
    }

    .banner__dashboard img {
        max-width: 600px !important;
        margin: 0 auto !important;
        border-radius: var(--clay-radius-lg) !important;
        border: 1px solid var(--clay-border) !important;
        box-shadow: var(--clay-shadow-md) !important;
    }

    .corner-border {
        display: none !important;
    }
}

/* ========================= Section Spacing ========================= */
.my-120 {
    margin-top: 140px !important;
    margin-bottom: 140px !important;
}

.py-120 {
    padding-top: 140px !important;
    padding-bottom: 140px !important;
}

.mb-60 {
    margin-bottom: 64px !important;
}

/* ========================= Feature Section ========================= */
.feature__area {
    background: var(--clay-bg) !important;
}

.feature__wrap {
    position: relative !important;
    top: auto !important;
    margin-bottom: 140px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.feature__wrap:last-child {
    margin-bottom: 0 !important;
}

.feature__wrap:nth-child(even) .row {
    flex-direction: row-reverse !important;
}

.feature__content .section__heading span {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--clay-text-muted) !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.feature__content .section__heading h2 {
    margin-top: 12px !important;
    margin-bottom: 24px !important;
}

.feature__content ul {
    list-style: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.feature__content ul li {
    display: flex !important;
    gap: 16px !important;
    align-items: flex-start !important;
    padding: 20px !important;
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border-light) !important;
    border-radius: var(--clay-radius-md) !important;
    transition: var(--clay-transition) !important;
    position: relative !important;
}

.feature__content ul li::before,
.feature__content ul li::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
}

.feature__content ul li:hover {
    border-color: var(--clay-border) !important;
    box-shadow: var(--clay-shadow-sm) !important;
    transform: translateY(-2px) !important;
}

.feature__content ul li i {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--clay-bg-alt) !important;
    border-radius: 50% !important;
    font-size: 0.7rem !important;
    color: var(--clay-success) !important;
    margin-top: 2px !important;
}

.feature__content ul li h3 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    color: var(--clay-text) !important;
}

.feature__content ul li p {
    font-size: 0.875rem !important;
    color: var(--clay-text-secondary) !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

.feature__thumb {
    border-radius: var(--clay-radius-lg) !important;
    overflow: hidden !important;
    border: 1px solid var(--clay-border-light) !important;
    box-shadow: var(--clay-shadow-md) !important;
    background: var(--clay-white) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.feature__thumb img {
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
}

/* ========================= About Section ========================= */
.about__area {
    background: var(--clay-bg) !important;
}

.about__thumb {
    position: relative !important;
    border-radius: var(--clay-radius-lg) !important;
    overflow: visible !important;
    max-width: 100% !important;
}

.about__thumb > img {
    border-radius: var(--clay-radius-lg) !important;
    border: 1px solid var(--clay-border-light) !important;
    width: 100% !important;
    display: block !important;
    box-shadow: var(--clay-shadow-md) !important;
}

.about__sp {
    display: none !important;
}

.about__info {
    position: absolute !important;
    top: auto !important;
    bottom: 24px !important;
    left: 24px !important;
    right: auto !important;
    height: auto !important;
    width: fit-content !important;
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border) !important;
    border-radius: var(--clay-radius-md) !important;
    padding: 14px 20px !important;
    box-shadow: 0 10px 30px rgba(29, 32, 38, 0.08) !important;
    z-index: 5 !important;
    animation: top-image-bounce 3s infinite ease-in-out !important;
}

.about__info h5 {
    font-size: 0.75rem !important;
    font-family: 'Space Mono', monospace !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--clay-text-muted) !important;
    margin-bottom: 4px !important;
}

.about__info p,
.about__info p .odometer,
.about__info p .odometer-inside,
.about__info p .odometer-digit,
.about__info p .odometer-digit-inner {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--clay-text) !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.about__content .section__heading .sub__heading {
    color: var(--clay-text-muted) !important;
}

.about__metrics {
    display: flex !important;
    gap: 20px !important;
    margin-top: 32px !important;
    flex-wrap: wrap !important;
}

.about__metric {
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border-light) !important;
    border-radius: var(--clay-radius-md) !important;
    padding: 20px 24px !important;
    flex: 1 !important;
    min-width: 140px !important;
    transition: var(--clay-transition) !important;
}

.about__metric:hover {
    border-color: var(--clay-border) !important;
    box-shadow: var(--clay-shadow-sm) !important;
}

.about__metric h3 {
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    color: var(--clay-text) !important;
    margin-bottom: 8px !important;
    display: inline-flex !important;
    align-items: baseline !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.about__metric h3 .odometer,
.about__metric h3 .odometer-inside,
.about__metric h3 .odometer-digit,
.about__metric h3 .odometer-digit-inner,
.about__metric h3 .odometer-ribbon,
.about__metric h3 .odometer-ribbon-inner,
.about__metric h3 .odometer-value,
.about__metric h3 span {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    color: var(--clay-text) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

.about__metric span {
    font-size: 0.8125rem !important;
    color: var(--clay-text-muted) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    display: block !important;
}

.about__action {
    margin-top: 36px !important;
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
}

.about__link {
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: var(--clay-text) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: var(--clay-transition-fast) !important;
}

.about__link:hover {
    gap: 12px !important;
}

.about__link i {
    font-size: 0.75rem !important;
    transition: var(--clay-transition-fast) !important;
}

/* ========================= Work Process / Tutorial Section ========================= */
.tutorial__area {
    background: var(--clay-bg-alt) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

.tutorial__wrap {
    display: flex !important;
    gap: 0 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.tutorial__single {
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border-light) !important;
    border-radius: var(--clay-radius-lg) !important;
    padding: 40px 32px !important;
    flex: 1 !important;
    min-width: 250px !important;
    max-width: 350px !important;
    transition: var(--clay-transition) !important;
    position: relative !important;
}

.tutorial__single:hover {
    border-color: var(--clay-border) !important;
    box-shadow: var(--clay-shadow-md) !important;
    transform: translateY(-4px) !important;
}

.tutorial__topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
}

.tutorial__topbar span {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--clay-bg-alt) !important;
    border-radius: var(--clay-radius-md) !important;
    border: 1px solid var(--clay-border-light) !important;
}

.tutorial__topbar span img {
    width: 24px !important;
    height: 24px !important;
}

.tutorial__topbar h3 {
    font-family: 'Space Mono', monospace !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--clay-border) !important;
    line-height: 1 !important;
}

.tutorial__single h4 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: var(--clay-text) !important;
    margin-bottom: 12px !important;
}

.tutorial__single p {
    font-size: 0.875rem !important;
    color: var(--clay-text-secondary) !important;
    line-height: 1.6 !important;
}

.tutorial__arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    opacity: 0.3 !important;
}

.tutorial__arrow img {
    width: 32px !important;
    filter: grayscale(1) brightness(0.7) !important;
}

/* ========================= CRM Pipeline Section ========================= */
.crm-pipeline__area {
    background: var(--clay-bg) !important;
}

.crm-pipeline__image-wrap {
    border-radius: var(--clay-radius-lg) !important;
    overflow: hidden !important;
    border: 1px solid var(--clay-border-light) !important;
    box-shadow: var(--clay-shadow-md) !important;
}

.crm-pipeline__image-wrap img {
    width: 100% !important;
    border-radius: var(--clay-radius-lg) !important;
}

.pipeline__right .section__heading .sub__heading {
    color: var(--clay-text-muted) !important;
}

.crm-pipeline__timeline {
    margin-top: 32px !important;
    position: relative !important;
    padding-left: 32px !important;
    border-left: 2px solid var(--clay-border) !important;
}

.crm-pipeline__step {
    display: flex !important;
    gap: 16px !important;
    align-items: flex-start !important;
    padding: 20px 0 !important;
    position: relative !important;
}

.crm-pipeline__step::before {
    content: '' !important;
    position: absolute !important;
    left: -39px !important;
    top: 24px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: var(--clay-white) !important;
    border: 2px solid var(--clay-border) !important;
    transition: var(--clay-transition) !important;
}

.crm-pipeline__step:hover::before {
    background: var(--clay-accent) !important;
    border-color: var(--clay-accent) !important;
}

.crm-pipeline__icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--clay-bg-alt) !important;
    border-radius: var(--clay-radius-sm) !important;
    border: 1px solid var(--clay-border-light) !important;
    color: var(--clay-text-secondary) !important;
    font-size: 1rem !important;
}

.crm-pipeline__content h3 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--clay-text) !important;
    margin-bottom: 4px !important;
}

.crm-pipeline__content p {
    font-size: 0.875rem !important;
    color: var(--clay-text-secondary) !important;
    margin: 0 !important;
}

.crm-pipeline__actions {
    margin-top: 32px !important;
    padding-left: 32px !important;
    display: flex !important;
    gap: 12px !important;
}

/* ========================= Testimonials Section ========================= */
.testimonial__area {
    background: var(--clay-bg-alt) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 140px 0 !important;
}

.testimonial__sp {
    opacity: 0.04 !important;
    filter: grayscale(1) !important;
}

.testimonial__blob {
    display: none !important;
}

.testimonial__wrap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.testimonial__slide {
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border-light) !important;
    border-radius: var(--clay-radius-lg) !important;
    padding: 48px !important;
    transition: var(--clay-transition) !important;
}

.testimonial__visual {
    position: relative !important;
}

.testimonial__visual > img {
    border-radius: var(--clay-radius-lg) !important;
    border: 1px solid var(--clay-border-light) !important;
}

.testimonial__halo {
    display: none !important;
}

.testimonial__floating {
    background: var(--clay-white) !important;
    color: var(--clay-text) !important;
    border: 1px solid var(--clay-border) !important;
    border-radius: var(--clay-radius-pill) !important;
    padding: 8px 16px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    box-shadow: var(--clay-shadow-sm) !important;
}

.star__rating li {
    color: #F5A623 !important;
}

.testimonial__content p {
    font-size: 1.125rem !important;
    line-height: 1.7 !important;
    color: var(--clay-text) !important;
    font-weight: 400 !important;
    margin: 24px 0 !important;
    position: relative !important;
}

.testimonial__meta h4 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--clay-text) !important;
}

.testimonial__meta h6 {
    font-size: 0.8125rem !important;
    color: var(--clay-text-muted) !important;
    font-weight: 400 !important;
}

.testimonial__button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border) !important;
    color: var(--clay-text) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--clay-transition-fast) !important;
    cursor: pointer !important;
}

.testimonial__button:hover {
    background: var(--clay-text) !important;
    color: var(--clay-white) !important;
    border-color: var(--clay-text) !important;
}

.testimonial__footer {
    margin-top: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.testimonial__nav {
    display: flex !important;
    gap: 8px !important;
}

.testimonial__pagination .swiper-pagination-bullet {
    background: var(--clay-border) !important;
    opacity: 1 !important;
    width: 8px !important;
    height: 8px !important;
    transition: var(--clay-transition-fast) !important;
}

.testimonial__pagination .swiper-pagination-bullet-active {
    background: var(--clay-text) !important;
    width: 24px !important;
    border-radius: var(--clay-radius-pill) !important;
}

/* ========================= Pricing Section ========================= */
.pricing__area {
    background: var(--clay-bg) !important;
}

.pricing__single {
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border-light) !important;
    border-radius: var(--clay-radius-lg) !important;
    padding: 36px !important;
    transition: var(--clay-transition) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.pricing__single:hover {
    border-color: var(--clay-border) !important;
    box-shadow: var(--clay-shadow-md) !important;
    transform: translateY(-4px) !important;
}

.pricing__single--active {
    border-color: var(--clay-text) !important;
    box-shadow: var(--clay-shadow-md) !important;
    position: relative !important;
}

.pricing__single--active::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 24px !important;
    right: 24px !important;
    height: 3px !important;
    background: var(--clay-text) !important;
    border-radius: 0 0 3px 3px !important;
}

.pricing__topbar {
    padding-bottom: 24px !important;
    margin-bottom: 24px !important;
    border-bottom: 1px solid var(--clay-border-light) !important;
}

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

.pricing__pill {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--clay-text-muted) !important;
    background: var(--clay-bg-alt) !important;
    padding: 4px 12px !important;
    border-radius: var(--clay-radius-pill) !important;
    font-weight: 700 !important;
}

.pricing__label {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: var(--clay-cta-text) !important;
    background: var(--clay-cta) !important;
    padding: 4px 12px !important;
    border-radius: var(--clay-radius-pill) !important;
}

.pricing__topbar h3 {
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    color: var(--clay-text) !important;
    margin-bottom: 8px !important;
}

.pricing__topbar p {
    font-size: 0.875rem !important;
    color: var(--clay-text-secondary) !important;
}

.pricing__info h4 {
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--clay-text) !important;
    margin-bottom: 8px !important;
}

.pricing__info h4 span {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    color: var(--clay-text) !important;
    letter-spacing: -0.02em !important;
}

.pricing__note {
    font-size: 0.8125rem !important;
    color: var(--clay-text-muted) !important;
    margin-bottom: 20px !important;
}

.pricing__info ul {
    list-style: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 20px !important;
}

.pricing__info ul li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 0.875rem !important;
    color: var(--clay-text) !important;
    font-weight: 400 !important;
}

.pricing__info ul li i.fa-circle-check {
    color: var(--clay-success) !important;
    font-size: 0.875rem !important;
}

.pricing__info ul li i.fa-circle-xmark {
    color: var(--clay-danger) !important;
    font-size: 0.875rem !important;
}

.pricing__btn {
    margin-top: auto !important;
    padding-top: 24px !important;
}

.pricing__btn .btn {
    border-radius: var(--clay-radius-pill) !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
}

.pricing__single--active .pricing__btn .btn {
    background: var(--clay-cta) !important;
    color: var(--clay-cta-text) !important;
    border: none !important;
}

/* ========================= FAQ Section ========================= */
.faq__area {
    background: var(--clay-bg-alt) !important;
    border-radius: 0 !important;
}

.faq__left .section__heading .sub__heading {
    color: var(--clay-text-muted) !important;
}

.faq__thumb {
    border-radius: var(--clay-radius-lg) !important;
    overflow: hidden !important;
    margin-top: 32px !important;
}

.faq__content .accordion {
    border: none !important;
}

.faq__content .accordion-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--clay-border) !important;
    border-radius: 0 !important;
}

.faq__content .accordion-item:last-child {
    border-bottom: none !important;
}

.faq__content .accordion-button {
    background: transparent !important;
    color: var(--clay-text) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 24px 0 !important;
    box-shadow: none !important;
    border: none !important;
    font-family: 'Inter', sans-serif !important;
    gap: 16px !important;
}

.faq__content .accordion-button:focus {
    box-shadow: none !important;
}

.faq__content .accordion-button::after {
    background-image: none !important;
    content: '+' !important;
    font-size: 1.5rem !important;
    font-weight: 300 !important;
    color: var(--clay-text-muted) !important;
    width: auto !important;
    height: auto !important;
    transition: var(--clay-transition-fast) !important;
}

.faq__content .accordion-button:not(.collapsed)::after {
    content: '−' !important;
    transform: none !important;
}

.faq__serial {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.8125rem !important;
    color: var(--clay-text-muted) !important;
    font-weight: 400 !important;
    min-width: 28px !important;
}

.faq__content .accordion-body {
    padding: 0 0 24px 44px !important;
    color: var(--clay-text-secondary) !important;
    font-size: 0.9375rem !important;
    line-height: 1.7 !important;
}

/* ========================= Blog Section ========================= */
.blog__area {
    background: var(--clay-bg) !important;
}

.blog__single {
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border-light) !important;
    border-radius: var(--clay-radius-lg) !important;
    overflow: hidden !important;
    transition: var(--clay-transition) !important;
    height: 100% !important;
}

.blog__single:hover {
    border-color: var(--clay-border) !important;
    box-shadow: var(--clay-shadow-md) !important;
    transform: translateY(-4px) !important;
}

.blog__img {
    display: block !important;
    overflow: hidden !important;
}

.blog__img img {
    width: 100% !important;
    aspect-ratio: 16/10 !important;
    object-fit: cover !important;
    transition: var(--clay-transition) !important;
}

.blog__single:hover .blog__img img {
    transform: scale(1.03) !important;
}

.blog__content {
    padding: 24px !important;
}

.blog__content > span {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.75rem !important;
    color: var(--clay-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: var(--clay-bg-alt) !important;
    padding: 4px 12px !important;
    border-radius: var(--clay-radius-pill) !important;
    margin-bottom: 16px !important;
    font-weight: 700 !important;
}

.blog__content > span span {
    text-transform: uppercase !important;
}

.blog__content h3 {
    margin-bottom: 16px !important;
}

.blog__content h3 a {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: var(--clay-text) !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.blog__btn {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--clay-text) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: var(--clay-transition-fast) !important;
}

.blog__btn:hover {
    gap: 12px !important;
}

.blog__btn i {
    font-size: 0.75rem !important;
    transition: var(--clay-transition-fast) !important;
}

/* ========================= Footer Section ========================= */
.footer__area {
    background: var(--clay-bg-alt) !important;
    border-top: 1px solid var(--clay-border) !important;
    padding-top: 0 !important;
}

.newsletter__wrap {
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border-light) !important;
    border-radius: var(--clay-radius-lg) !important;
    padding: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 40px !important;
    margin-top: -70px !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: var(--clay-shadow-md) !important;
}

.newsletter__content h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--clay-text) !important;
    margin-bottom: 8px !important;
}

.newsletter__content p {
    color: var(--clay-text-secondary) !important;
    font-size: 0.875rem !important;
    margin: 0 !important;
}

.newsletter__main {
    flex: 1 !important;
    max-width: 500px !important;
}

.newsletter__form label {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--clay-text-muted) !important;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
}

.newsletter__input {
    display: flex !important;
    gap: 8px !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.newsletter__input .form-control {
    background: var(--clay-bg-alt) !important;
    border: 1px solid var(--clay-border) !important;
    border-radius: var(--clay-radius-pill) !important;
    padding: 12px 20px !important;
    font-size: 0.875rem !important;
    color: var(--clay-text) !important;
    font-family: 'Inter', sans-serif !important;
    transition: var(--clay-transition-fast) !important;
}

.newsletter__input .form-control:focus {
    outline: none !important;
    border-color: var(--clay-text-muted) !important;
    box-shadow: none !important;
    background: var(--clay-white) !important;
}

.newsletter__input .form-control::placeholder {
    color: var(--clay-text-muted) !important;
}

.newsletter__input .btn {
    white-space: nowrap !important;
}

.newsletter__main > p {
    font-size: 0.75rem !important;
    color: var(--clay-text-muted) !important;
    margin-top: 8px !important;
}

.footer__topbar {
    padding: 40px 0 !important;
    border-bottom: 1px solid var(--clay-border) !important;
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
}

.footer__topbar img {
    max-height: 28px !important;
    filter: brightness(0) !important;
}

.footer__topbar p {
    font-size: 0.875rem !important;
    color: var(--clay-text-secondary) !important;
    max-width: 400px !important;
    margin: 0 !important;
}

.footer__wrap {
    padding: 40px 0 !important;
    display: flex !important;
    gap: 40px !important;
    flex-wrap: wrap !important;
    border-bottom: 1px solid var(--clay-border) !important;
}

.footer__single {
    flex: 1 !important;
    min-width: 160px !important;
}

.footer__topbar img {
    max-height: 48px !important;
    width: auto !important;
    filter: none !important;
    object-fit: contain !important;
}

.footer__single h4 {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--clay-text-muted) !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

.footer__single ul {
    list-style: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.footer__single ul li a {
    font-size: 0.875rem !important;
    color: var(--clay-text-secondary) !important;
    font-weight: 400 !important;
    transition: var(--clay-transition-fast) !important;
}

.footer__single ul li a:hover {
    color: var(--clay-text) !important;
}

.footer__copyright {
    padding: 24px 0 !important;
    text-align: center !important;
}

.footer__copyright p,
.footer__copyright a {
    font-size: 0.8125rem !important;
    color: var(--clay-text-muted) !important;
}

/* ========================= Modal Styles ========================= */
.modal-content {
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border) !important;
    border-radius: var(--clay-radius-lg) !important;
    box-shadow: var(--clay-shadow-lg) !important;
}

.modal-header {
    border-bottom: 1px solid var(--clay-border-light) !important;
    padding: 24px !important;
}

.modal-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    color: var(--clay-text) !important;
}

.modal-header .close,
.modal-header .btn-close {
    color: var(--clay-text-muted) !important;
    opacity: 1 !important;
}

.modal-body {
    padding: 24px !important;
}

.modal-body .plan-title {
    color: var(--clay-text) !important;
    font-weight: 700 !important;
}

.modal-body .plan-description {
    color: var(--clay-text-secondary) !important;
}

/* ========================= Breadcrumb ========================= */
.breadcrumb__area {
    background: var(--clay-bg-alt) !important;
    padding: 160px 0 60px !important;
}

.breadcrumb__area h1,
.breadcrumb__area h2 {
    color: var(--clay-text) !important;
}

.breadcrumb-item a {
    color: var(--clay-text-secondary) !important;
}

.breadcrumb-item.active {
    color: var(--clay-text) !important;
}

/* ========================= Cookie Banner ========================= */
.cookies-card {
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border) !important;
    border-radius: var(--clay-radius-lg) !important;
    box-shadow: var(--clay-shadow-lg) !important;
    color: var(--clay-text) !important;
}

/* ========================= Loader ========================= */
.preloader {
    background: var(--clay-bg) !important;
}

/* ========================= Scroll Animations ========================= */
@keyframes clay-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes clay-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Apply subtle entrance animations */
.section__heading,
.feature__wrap,
.tutorial__single,
.pricing__single,
.blog__single,
.testimonial__slide,
.crm-pipeline__step {
    animation: clay-fadeInUp 0.6s ease-out both;
}

/* ========================= Form Inputs ========================= */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border) !important;
    border-radius: var(--clay-radius-sm) !important;
    color: var(--clay-text) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    padding: 12px 16px !important;
    transition: var(--clay-transition-fast) !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--clay-text-muted) !important;
    box-shadow: 0 0 0 3px rgba(29, 32, 38, 0.06) !important;
    outline: none !important;
}

/* ========================= Pagination ========================= */
.pagination .page-link {
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border) !important;
    color: var(--clay-text) !important;
    border-radius: var(--clay-radius-sm) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.pagination .page-item.active .page-link {
    background: var(--clay-cta) !important;
    border-color: var(--clay-cta) !important;
    color: var(--clay-cta-text) !important;
}

/* ========================= Misc Utility Overrides ========================= */
.text--danger {
    color: var(--clay-danger) !important;
}

.text--success {
    color: var(--clay-success) !important;
}

.bg--img {
    border-radius: var(--clay-radius-lg) !important;
}

/* Odometer styling */
.odometer {
    font-family: 'Inter', sans-serif !important;
}

/* Smooth scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--clay-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--clay-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--clay-text-muted);
}

/* ========================= Responsive Overrides ========================= */
@media (max-width: 991px) {
    .newsletter__wrap {
        flex-direction: column !important;
        text-align: center !important;
        margin-top: -50px !important;
        padding: 32px 24px !important;
    }

    .newsletter__main {
        max-width: 100% !important;
    }

    .newsletter__input {
        flex-direction: column !important;
    }

    .footer__wrap {
        gap: 32px !important;
    }

    .footer__topbar {
        flex-direction: column !important;
        text-align: center !important;
    }

    .about__metrics {
        gap: 16px !important;
    }

    .about__action {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .crm-pipeline__actions {
        padding-left: 0 !important;
    }

    .crm-pipeline__timeline {
        padding-left: 24px !important;
    }

    .crm-pipeline__step::before {
        left: -31px !important;
    }

    .tutorial__wrap {
        flex-direction: column !important;
        align-items: center !important;
    }

    .tutorial__arrow {
        transform: rotate(90deg) !important;
        width: auto !important;
        margin: 16px 0 !important;
    }

    .banner__btn {
        flex-direction: column !important;
        align-items: center !important;
    }

    .banner__content ul {
        flex-direction: column !important;
        gap: 12px !important;
    }
}

@media (max-width: 575px) {
    h1 {
        font-size: 2.25rem !important;
    }

    h2, .section__title {
        font-size: 1.75rem !important;
    }

    .testimonial__slide {
        padding: 24px !important;
    }

    .pricing__single {
        padding: 24px !important;
    }

    .my-120 {
        margin-top: 80px !important;
        margin-bottom: 80px !important;
    }

    .py-120 {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }
}

/* ========================= Clay Auth Modals ========================= */
.clay-auth-modal .modal-backdrop {
    background-color: rgba(29, 32, 38, 0.4) !important;
    backdrop-filter: blur(8px) !important;
}

.clay-auth-modal .modal-dialog {
    max-width: 440px !important;
}

.clay-auth-modal .modal-dialog.modal-lg {
    max-width: 580px !important;
}

.clay-modal-card {
    background: var(--clay-white) !important;
    border: 1px solid var(--clay-border) !important;
    border-radius: var(--clay-radius-lg) !important;
    box-shadow: 0 24px 60px rgba(29, 32, 38, 0.12), 0 4px 16px rgba(29, 32, 38, 0.04) !important;
    padding: 24px 28px !important;
    overflow: hidden !important;
}

.clay-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--clay-border-light) !important;
    margin-bottom: 20px !important;
}

.clay-modal-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.clay-brand-title {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    color: var(--clay-text) !important;
}

.clay-modal-close {
    background: var(--clay-bg-alt) !important;
    border: 1px solid var(--clay-border-light) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--clay-text-muted) !important;
    font-size: 14px !important;
    transition: var(--clay-transition) !important;
    cursor: pointer !important;
}

.clay-modal-close:hover {
    background: var(--clay-border-light) !important;
    color: var(--clay-text) !important;
}

.clay-auth-top h3 {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: var(--clay-text) !important;
    margin-bottom: 4px !important;
}

.clay-auth-top p {
    font-size: 0.875rem !important;
    color: var(--clay-text-secondary) !important;
    margin-bottom: 20px !important;
}

.clay-label {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--clay-text) !important;
    margin-bottom: 6px !important;
}

.clay-input {
    background: var(--clay-bg-alt) !important;
    border: 1px solid var(--clay-border) !important;
    border-radius: var(--clay-radius-pill) !important;
    padding: 10px 16px !important;
    font-size: 0.875rem !important;
    color: var(--clay-text) !important;
    transition: var(--clay-transition) !important;
}

.clay-input:focus {
    background: var(--clay-white) !important;
    border-color: var(--clay-text) !important;
    box-shadow: 0 0 0 3px rgba(29, 32, 38, 0.08) !important;
}

.clay-forgot-link {
    font-size: 0.775rem !important;
    font-weight: 600 !important;
    color: var(--clay-text-secondary) !important;
    text-decoration: underline !important;
}

.clay-forgot-link:hover {
    color: var(--clay-text) !important;
}

.clay-check .form-check-input {
    border-radius: 4px !important;
    border-color: var(--clay-border) !important;
}

.clay-check .form-check-input:checked {
    background-color: var(--clay-black) !important;
    border-color: var(--clay-black) !important;
}

.clay-check .form-check-label {
    font-size: 0.8125rem !important;
    color: var(--clay-text-secondary) !important;
}

.clay-submit-btn {
    background: var(--clay-black) !important;
    color: var(--clay-white) !important;
    border-radius: var(--clay-radius-pill) !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    border: none !important;
    transition: var(--clay-transition) !important;
}

.clay-submit-btn:hover {
    background: #000000 !important;
    color: var(--clay-white) !important;
    transform: translateY(-1px) !important;
}

.clay-auth-switch p {
    font-size: 0.875rem !important;
    color: var(--clay-text-secondary) !important;
    margin: 0 !important;
}

.clay-auth-switch a {
    font-weight: 700 !important;
    color: var(--clay-text) !important;
    text-decoration: underline !important;
}

/* Social Login Buttons & Divider */
.social__auth {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 16px !important;
}

.social__auth a {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: var(--clay-bg-alt) !important;
    border: 1px solid var(--clay-border) !important;
    border-radius: var(--clay-radius-pill) !important;
    padding: 10px 16px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--clay-text) !important;
    text-decoration: none !important;
    transition: var(--clay-transition) !important;
}

.social__auth a:hover {
    background: var(--clay-white) !important;
    border-color: var(--clay-text) !important;
    color: var(--clay-text) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.social__auth a i {
    font-size: 1rem !important;
}

.social__auth a i.fa-google {
    color: #EA4335 !important;
}

.social__auth a i.fa-facebook-f {
    color: #1877F2 !important;
}

.auth__others {
    position: relative !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 4px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.auth__others::before,
.auth__others::after {
    content: "" !important;
    flex: 1 !important;
    height: 1px !important;
    background-color: var(--clay-border-light) !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
}

.auth__others p {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--clay-text-muted) !important;
    margin: 0 !important;
    padding: 0 8px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   STRICT 2-COLOR MONOCHROME PALETTE OVERRIDE (ZERO GREEN ELEMENTS)
   Enforces a clean Black & White / Dark Gray & Light Gray color palette.
   ========================================================================== */

/* 1. All Table Headers & Inner Elements (Phone, Email, Social Profiles) -> Clean Premium SaaS Header */
.table thead tr th,
.table thead th,
table thead th,
.table-light thead th,
.table.table--light thead th,
.table-responsive thead th,
.dashboard__body .table thead tr th {
    background-color: #F9FAFB !important;
    color: #111827 !important;
    border-top: none !important;
    border-bottom: 1px solid #E5E7EB !important;
    font-weight: 700 !important;
    font-size: 0.8125rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 12px 16px !important;
    vertical-align: middle !important;
}

.table thead th *,
.table thead tr th *,
table thead th *,
.table-light thead th * {
    color: #111827 !important;
    font-weight: 700 !important;
}

.table thead th button,
.table thead th .btn-link,
.table thead th i {
    color: #4B5563 !important;
    opacity: 0.9 !important;
    transition: all 0.15s ease !important;
}

.table thead th button:hover,
.table thead th .btn-link:hover,
.table thead th i:hover {
    color: #111827 !important;
    opacity: 1 !important;
}



/* 2. Scroll-to-Top Button -> Monochrome Dark Gray / Black */
.scroll-top,
.scroll-to-top,
a.scroll-to-top {
    background-color: #111827 !important;
    color: #FFFFFF !important;
    border: 1px solid #374151 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
}

.scroll-top:hover,
.scroll-to-top:hover,
a.scroll-to-top:hover {
    background-color: #1F2937 !important;
    color: #FFFFFF !important;
}

/* 3. Convert all green badges, icons, and indicators to clean monochrome 2-color theme */
:root {
    --clay-success: #111827 !important;
}

.badge--success,
.badge-success,
.bg--success,
.bg--green,
.btn--success,
.status-badge.success {
    background-color: #F3F4F6 !important;
    color: #111827 !important;
    border: 1px solid #E5E7EB !important;
}

.mock-stat-icon.green {
    background: #F3F4F6 !important;
    color: #111827 !important;
}

.mock-donut-legend .dot.green,
.dot.green {
    background: #111827 !important;
}

.mock-bar-fill.green {
    background: #111827 !important;
}

/* 4. Reset base color variables to monochrome dark */
.bg--base,
.bg--base-two,
.btn--base-two {
    background-color: #111827 !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   SELECT2 DROPDOWN HIGH CONTRAST & MONOCHROME OVERRIDES
   Fixes black rectangle bug when dropdown options are focused/highlighted.
   ========================================================================== */
.select2-dropdown {
    background-color: #FFFFFF !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    z-index: 9999 !important;
}

.select2-results__option {
    padding: 10px 14px !important;
    background-color: #FFFFFF !important;
    color: #111827 !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    border-bottom: 1px solid #F3F4F6 !important;
    transition: all 0.15s ease !important;
}

.select2-results__option:last-child {
    border-bottom: none !important;
}

/* Hover & Highlighted (keyboard navigation or mouse hover) option styling */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-results__option--highlighted {
    background-color: #111827 !important;
    color: #FFFFFF !important;
}

/* Selected option styling */
.select2-container--default .select2-results__option--selected,
.select2-results__option[aria-selected="true"] {
    background-color: #F3F4F6 !important;
    color: #111827 !important;
    font-weight: 700 !important;
}

/* Selected + Highlighted combined styling */
.select2-container--default .select2-results__option--selected.select2-results__option--highlighted {
    background-color: #111827 !important;
    color: #FFFFFF !important;
}

/* Search input inside Select2 dropdown (if present) */
.select2-search--dropdown .select2-search__field {
    background-color: #F9FAFB !important;
    border: 1px solid #D1D5DB !important;
    color: #111827 !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
}

/* Select2 Rendered Text inside closed input box */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #111827 !important;
    font-weight: 600 !important;
    line-height: 2.5rem !important;
    padding-left: 12px !important;
}

.select2-container--default .select2-selection--single {
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    background-color: #FFFFFF !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    right: 8px !important;
}

/* ==========================================================================
   PRELOADER MODERN REDESIGN
   Fixes giant black dot and white-on-white text bug.
   ========================================================================== */
.preloader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    background-color: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
}

.preloader .loader__text {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: -0.02em !important;
    color: #111827 !important;
    background: none !important;
    animation: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.preloader .loader__text::before {
    content: attr(data-text) !important;
    color: #111827 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

/* Modern Minimalist Spinner beneath text */
.preloader::after {
    content: "" !important;
    width: 28px !important;
    height: 28px !important;
    border: 3px solid #E5E7EB !important;
    border-top-color: #111827 !important;
    border-radius: 50% !important;
    animation: preloader-spin 0.7s infinite linear !important;
}

@keyframes preloader-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   FILE INPUT ("CHOOSE FILE") BUTTON STYLING OVERRIDES
   Fixes solid black button with invisible text on file upload controls.
   ========================================================================== */
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button,
.form-control[type=file]::file-selector-button,
.form-control[type=file]::-webkit-file-upload-button {
    background-color: #111827 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    cursor: pointer !important;
    margin-right: 10px !important;
    transition: all 0.15s ease !important;
}

input[type=file]::file-selector-button:hover,
input[type=file]::-webkit-file-upload-button:hover,
.form-control[type=file]::file-selector-button:hover,
.form-control[type=file]::-webkit-file-upload-button:hover {
    background-color: #1F2937 !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   FORM CHECKBOX STYLING OVERRIDES
   Fixes invisible unchecked checkbox and invisible checked checkmark icon.
   ========================================================================== */
.form-check-input,
.form-check .form-check-input,
input[type="checkbox"].form-check-input {
    background-color: #FFFFFF !important;
    border: 2px solid #9CA3AF !important;
    border-radius: 4px !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    transition: all 0.15s ease-in-out !important;
}

.form-check-input:hover,
.form-check .form-check-input:hover {
    border-color: #111827 !important;
}

.form-check-input:checked,
.form-check .form-check-input:checked,
input[type="checkbox"].form-check-input:checked {
    background-color: #111827 !important;
    border-color: #111827 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

.form-check-input:checked::before,
.form-check .form-check-input:checked::before {
    display: none !important;
}

.form-check-input:focus,
.form-check .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.15) !important;
    border-color: #111827 !important;
}

/* ==========================================================================
   BULK ACTION BAR & SELECTION COUNT HIGH-CONTRAST FIX
   Fixes white-on-white text bug on selected leads count ("All matching").
   ========================================================================== */
.bulk-action-bar {
    background-color: #F9FAFB !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
    color: #111827 !important;
}

.bulk-selected,
.bulk-selected *,
.selected-leads-count,
strong.selected-leads-count {
    color: #111827 !important;
}

.bulk-selected strong,
.selected-leads-count,
strong.selected-leads-count {
    font-weight: 800 !important;
    font-size: 1rem !important;
}

.bulk-actions label,
.bulk-actions .form-check-label {
    color: #111827 !important;
    font-weight: 600 !important;
}