/* ==========================================
   DEVELOPER-FIRST SAAS MARKETING STYLES
   Uptime Monitoring & Workflow Automation
========================================== */

:root {
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-light: #eef2ff;
    --secondary: #0ea5e9;
    --success: #10b981;
    --success-light: #ecfdf5;
    --danger: #ef4444;
    --danger-light: #fef2f2;
    --warning: #f59e0b;
    --warning-light: #fffbeb;
    --dark: #0f172a;
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-100: #f1f5f9;
    --slate-50: #f8fafc;
    --border-color: #e2e8f0;
    --card-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.03);
    --card-shadow-hover: 0 20px 35px -5px rgba(15, 23, 42, 0.1), 0 10px 15px -5px rgba(79, 70, 229, 0.08);
}

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--slate-700);
    background-color: #ffffff;
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative;
    margin: 0;
    padding: 0;
}

/* ==========================================
   NAVBAR & BUTTONS
========================================== */
.navbar-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
    color: #ffffff;
    border-radius: 10px;
    font-size: 1.15rem;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.btn-primary-custom {
    background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
    font-weight: 600;
    padding: 0.65rem 1.4rem;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.28);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-primary-custom:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.38);
    color: #ffffff !important;
}

.btn-outline-custom {
    background: #ffffff;
    border: 1px solid var(--border-color);
    color: var(--slate-700);
    font-weight: 600;
    padding: 0.65rem 1.3rem;
    border-radius: 10px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-outline-custom:hover {
    background: var(--slate-50);
    border-color: #cbd5e1;
    color: var(--dark);
}

/* ==========================================
   PREMIUM NAVBAR & HOVER DROPDOWNS
========================================== */
.navbar-brand img,
.brand-logo-img {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    border-radius: 9px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    object-fit: contain !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transition: transform 0.2s ease;
}

.navbar-brand:hover img,
.navbar-brand:hover .brand-logo-img {
    transform: scale(1.06);
}

.brand-title-text {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #0f172a;
    transition: color 0.2s ease;
}

.brand-dot {
    color: #ef4444 !important;
    -webkit-text-fill-color: #ef4444 !important;
    font-weight: 900;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -0.16em;
    line-height: 0;
    margin: 0 0.5px;
}

.brand-accent {
    background: linear-gradient(135deg, #4f46e5 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .brand-title-text {
    color: #f8fafc;
}

#mainNavbar {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid #e2e8f0;
    transition: all 0.25s ease;
    z-index: 1050;
}

.navbar-nav .nav-link {
    font-weight: 600;
    font-size: 0.94rem;
    color: #475569 !important;
    padding: 0.55rem 0.95rem !important;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.navbar-nav .nav-link::after {
    display: none !important;
}

.navbar-nav .nav-link:hover {
    color: #4f46e5 !important;
    background: #f1f5f9;
}

.navbar-nav .nav-link.active {
    color: #4f46e5 !important;
    background: #eef2ff;
}

/* Dropdown Caret Styling */
.navbar-nav .dropdown-toggle::after {
    display: inline-block !important;
    margin-left: 0.35em !important;
    vertical-align: 0.15em !important;
    content: "" !important;
    border-top: 0.35em solid currentColor !important;
    border-right: 0.35em solid transparent !important;
    border-bottom: 0 !important;
    border-left: 0.35em solid transparent !important;
    transition: transform 0.25s ease !important;
}

/* Desktop Hover Support */
@media (min-width: 992px) {
    .navbar-nav .dropdown {
        position: relative;
        padding-bottom: 8px; /* Extends hover zone */
    }

    .navbar-nav .dropdown:hover > .dropdown-toggle::after {
        transform: rotate(180deg);
    }

    .navbar-nav .dropdown:hover > .dropdown-menu {
        display: block !important;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        transition-delay: 0s;
    }

    .navbar-nav .dropdown-menu {
        display: block !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
        transition-delay: 0.08s; /* Prevents disappearing during mouse movement */
        pointer-events: none;
        margin-top: 0 !important;
        top: 100%;
    }

    /* Invisible hover bridge connecting nav-link and dropdown */
    .navbar-nav .dropdown-menu::before {
        content: '';
        position: absolute;
        top: -12px;
        left: 0;
        right: 0;
        height: 14px;
        background: transparent;
        z-index: 1;
    }
}

/* Dropdown Menu Container */
.navbar-nav .dropdown-menu {
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
    padding: 0.65rem !important;
    min-width: 320px;
    z-index: 1060;
}

/* Dropdown Items */
.navbar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    color: #1e293b;
}

.navbar-dropdown-item:hover {
    background: #f8fafc;
    transform: translateX(4px);
    text-decoration: none;
}

.navbar-dropdown-item.active {
    background: rgba(79, 70, 229, 0.08) !important;
    border: 1px solid rgba(79, 70, 229, 0.18);
}

.navbar-dropdown-item.active .dropdown-item-title {
    color: #4f46e5 !important;
    font-weight: 700;
}

.navbar-dropdown-item.active .dropdown-icon-box {
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
    transform: scale(1.05);
}

.dropdown-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.dropdown-icon-box.blue { background: #eff6ff; color: #2563eb; }
.dropdown-icon-box.purple { background: #f5f3ff; color: #7c3aed; }
.dropdown-icon-box.amber { background: #fffbeb; color: #d97706; }
.dropdown-icon-box.emerald { background: #ecfdf5; color: #059669; }
.dropdown-icon-box.rose { background: #fff1f2; color: #e11d48; }
.dropdown-icon-box.indigo { background: #eef2ff; color: #4f46e5; }
.dropdown-icon-box.slate { background: #f1f5f9; color: #475569; }

.navbar-dropdown-item:hover .dropdown-icon-box {
    transform: scale(1.08);
}

.dropdown-item-title {
    font-weight: 600;
    font-size: 0.92rem;
    color: #0f172a;
    line-height: 1.25;
}

.dropdown-item-desc {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.35;
}

/* ==========================================
   BADGES & HEADINGS
========================================== */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: 30px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 1rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.2;
    letter-spacing: -0.8px;
}

.section-subtitle {
    font-size: 1.15rem;
    color: var(--slate-500);
    max-width: 700px;
    margin: 0.5rem auto 0;
    line-height: 1.6;
}

/* ==========================================
   HERO SECTION
========================================== */
.hero-section {
    position: relative;
    padding: 100px 0 80px;
    background: radial-gradient(circle at 50% 0%, rgba(238, 242, 255, 0.85) 0%, rgba(255, 255, 255, 1) 70%);
    overflow: hidden;
}

.hero-headline {
    font-size: 3.4rem;
    font-weight: 900;
    color: var(--dark);
    letter-spacing: -1.5px;
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.hero-headline .highlight {
    background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subheadline {
    font-size: 1.25rem;
    color: var(--slate-600);
    line-height: 1.6;
    max-width: 580px;
    margin-bottom: 2rem;
}

.hero-trust-note {
    font-size: 0.9rem;
    color: var(--slate-500);
    margin-top: 1rem;
}

/* ==========================================
   VISUAL WORKFLOW BUILDER (HERO & DIFFERENTIATOR)
========================================== */
.workflow-canvas {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.45);
    position: relative;
    color: #f8fafc;
}

.workflow-canvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #1e293b;
}

.code-dots {
    display: flex;
    gap: 6px;
}

.code-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green { background: #10b981; }

.workflow-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    position: relative;
}

.workflow-node {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 0.7rem 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    z-index: 2;
}

.workflow-node:hover {
    border-color: #6366f1;
    transform: translateY(-2px);
}

.workflow-node.trigger-down {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.workflow-node.condition {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.12);
    color: #fde68a;
}

.workflow-node.action {
    border-color: rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.18);
    color: #c7d2fe;
}

.workflow-node.recovery {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
}

.workflow-connector {
    width: 2px;
    height: 18px;
    background: #334155;
    position: relative;
}

.workflow-connector::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -3px;
    width: 0; 
    height: 0; 
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #64748b;
}

.workflow-branch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    width: 100%;
    position: relative;
    padding-top: 1rem;
}

.workflow-branch-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16%;
    right: 16%;
    height: 2px;
    background: #334155;
}

.action-chip {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s ease;
}

.action-chip i { font-size: 1.25rem; }
.action-chip.slack i { color: #e01e5a; }
.action-chip.github i { color: #f8fafc; }
.action-chip.webhook i { color: #38bdf8; }
.action-chip.discord i { color: #5865f2; }
.action-chip.email i { color: #fbbf24; }

.action-chip:hover {
    border-color: #818cf8;
    background: #25334d;
}

/* ==========================================
   MONITORING FEATURE CARDS
========================================== */
.feature-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: var(--card-shadow);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
    border-color: #cbd5e1;
}

.feature-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 1.25rem;
}

.icon-blue { background: #eff6ff; color: #2563eb; }
.icon-purple { background: #f5f3ff; color: #7c3aed; }
.icon-green { background: #ecfdf5; color: #059669; }
.icon-amber { background: #fffbeb; color: #d97706; }
.icon-rose { background: #fff1f2; color: #e11d48; }

.feature-metric-preview {
    background: var(--slate-50);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    font-size: 0.85rem;
}

/* ==========================================
   API MONITORING TERMINAL MOCKUP
========================================== */
.terminal-window {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    color: #f8fafc;
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

.terminal-header {
    background: #1e293b;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #94a3b8;
}

.terminal-body {
    padding: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.7;
}

.terminal-endpoint {
    background: #1e293b;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
    border: 1px solid #334155;
}

.method-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.75rem;
}
.method-post { background: #2563eb; color: #fff; }
.method-get { background: #059669; color: #fff; }
.method-put { background: #d97706; color: #fff; }
.method-delete { background: #dc2626; color: #fff; }

.assertion-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #6ee7b7;
    margin-bottom: 0.4rem;
}

.assertion-item i {
    color: #10b981;
    font-size: 1.1rem;
}

/* ==========================================
   INCIDENT TIMELINE
========================================== */
.timeline-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: var(--card-shadow);
}

.timeline-list {
    position: relative;
    padding-left: 1.5rem;
}

.timeline-list::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: #e2e8f0;
}

.timeline-step {
    position: relative;
    margin-bottom: 1.2rem;
}

.timeline-step:last-child {
    margin-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -1.5rem;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #64748b;
    box-shadow: 0 0 0 2px #fff;
}

.timeline-step.fail .timeline-dot { border-color: #ef4444; background: #ef4444; }
.timeline-step.action .timeline-dot { border-color: #6366f1; background: #6366f1; }
.timeline-step.resolve .timeline-dot { border-color: #10b981; background: #10b981; }

.timeline-time {
    font-family: monospace;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--slate-500);
    margin-right: 0.6rem;
}

.timeline-msg {
    font-weight: 600;
    color: var(--dark);
    font-size: 0.92rem;
}

/* ==========================================
   STATUS PAGES & AGENCY DASHBOARDS
========================================== */
.status-page-mockup,
.agency-dashboard-mockup {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    padding: 1.75rem;
}

.status-header-pill {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.status-component-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.status-component-row:last-child {
    border-bottom: none;
}

.uptime-bar {
    display: flex;
    gap: 2px;
    align-items: center;
}

.uptime-segment {
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: #10b981;
}

.client-monitor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.92rem;
}

.client-monitor-row:last-child {
    border-bottom: none;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
}
.dot-operational { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
.dot-down { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }

/* ==========================================
   INTEGRATIONS
========================================== */
.integration-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.integration-card:hover {
    border-color: #6366f1;
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover);
}

.integration-workflow-pill {
    background: var(--slate-50);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--slate-600);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

/* ==========================================
   PRICING
========================================== */
.pricing-section {
    padding: 90px 0;
    background: linear-gradient(180deg, #ffffff 0%, var(--slate-50) 100%);
}

.pricing-card-modern {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2.25rem;
    box-shadow: var(--card-shadow);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s ease;
}

.pricing-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow-hover);
}

.pricing-card-modern.featured {
    border: 2px solid var(--primary);
    box-shadow: 0 20px 40px -5px rgba(79, 70, 229, 0.18);
}

.pricing-card-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}

.pricing-amount {
    font-size: 2.75rem;
    font-weight: 900;
    color: var(--dark);
    line-height: 1;
    margin: 1rem 0 0.3rem;
}

.pricing-amount small {
    font-size: 1rem;
    font-weight: 500;
    color: var(--slate-500);
}

.pricing-features-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 2rem;
    flex-grow: 1;
}

.pricing-features-list li {
    font-size: 0.95rem;
    color: var(--slate-600);
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.pricing-features-list li i {
    color: var(--primary);
    font-size: 1.1rem;
}

/* ==========================================
   FOOTER
========================================== */
.footer-modern {
    background: #0b1120;
    color: #cbd5e1;
    padding: 80px 0 30px;
    border-top: 1px solid #1e293b;
}

.footer-title {
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #ffffff;
    margin-bottom: 1.25rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.94rem;
    transition: all 0.2s ease;
    position: relative;
    z-index: 5;
    display: inline-block;
    padding: 3px 0;
}

.footer-links a:hover {
    color: #ffffff;
    padding-left: 4px;
}

.footer-social-link {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #1e293b;
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    text-decoration: none;
}

.footer-social-link:hover {
    background: var(--primary);
    color: #ffffff;
    transform: translateY(-2px);
}

.footer-divider {
    border-color: #1e293b;
    margin: 3rem 0 1.5rem;
}

/* ==========================================
   RESPONSIVE BREAKPOINTS (ALL SCREEN SIZES)
========================================== */

/* Tablets & Small Laptops (<= 991px) */
@media (max-width: 991px) {
    .hero-headline { 
        font-size: 2.75rem; 
    }
    .hero-section { 
        padding: 70px 0 50px; 
        text-align: center; 
    }
    .hero-subheadline { 
        margin: 0 auto 2rem; 
    }
    .workflow-canvas { 
        margin-top: 2rem; 
    }
    .workflow-branch-grid { 
        grid-template-columns: 1fr; 
        gap: 0.75rem; 
    }
    .workflow-branch-grid::before { 
        display: none; 
    }
    .navbar-collapse {
        background: #ffffff;
        padding: 1.25rem;
        border-radius: 16px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.08);
        margin-top: 0.75rem;
        border: 1px solid #e2e8f0;
    }
    .navbar-nav .nav-link {
        color: #334155 !important;
        padding: 0.65rem 0.85rem;
        border-radius: 8px;
    }
    .navbar-nav .dropdown-menu {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none !important;
        border: 1px solid #f1f5f9 !important;
        background: #f8fafc !important;
        margin: 0.5rem 0 !important;
        min-width: 100% !important;
    }

    [data-theme="dark"] .navbar-collapse {
        background: #0f172a !important;
        border: 1px solid #1e293b !important;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7) !important;
    }

    [data-theme="dark"] .navbar-nav .nav-link {
        color: #cbd5e1 !important;
    }

    [data-theme="dark"] .navbar-nav .nav-link:hover {
        color: #ffffff !important;
        background: #1e293b !important;
    }

    [data-theme="dark"] .navbar-nav .dropdown-menu {
        background: #1e293b !important;
        border: 1px solid #334155 !important;
    }
}

/* Mobile Devices (<= 768px) */
@media (max-width: 768px) {
    .hero-headline { 
        font-size: 2.35rem; 
        letter-spacing: -1px;
    }
    .section-title { 
        font-size: 2rem; 
    }
    .section-subtitle { 
        font-size: 1rem; 
    }
    .hero-section { 
        padding: 50px 0 40px; 
    }
    .pricing-card-modern { 
        padding: 2rem 1.5rem; 
    }
    .terminal-body {
        padding: 1rem;
        font-size: 0.8rem;
    }
    .terminal-endpoint {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
    .terminal-endpoint .ms-auto {
        margin-left: 0 !important;
    }
}

/* Small & Compact Phones (<= 576px) */
@media (max-width: 576px) {
    .hero-headline { 
        font-size: 1.95rem; 
    }
    .section-title { 
        font-size: 1.65rem; 
    }
    .pricing-amount {
        font-size: 2.25rem;
    }
    .workflow-canvas {
        padding: 1rem;
    }
    .workflow-node {
        padding: 0.6rem 0.85rem;
        font-size: 0.82rem;
    }
    .btn-primary-custom, 
    .btn-outline-custom {
        width: 100%;
    }
    .timeline-card {
        padding: 1.25rem 1rem;
    }
    .timeline-msg {
        font-size: 0.85rem;
    }
    .status-page-mockup, 
    .agency-dashboard-mockup {
        padding: 1.25rem 1rem;
    }
}

/* Ultra Compact (<= 380px) */
@media (max-width: 380px) {
    .hero-headline { 
        font-size: 1.75rem; 
    }
    .section-badge {
        font-size: 0.75rem;
        padding: 0.3rem 0.75rem;
    }
}

.glass-stat h3{
    color:#4f46e5;
    font-weight:800;
}

.dashboard-preview{
    position:relative;
}

.dashboard-card{
    background:white;
    padding:25px;
    border-radius:20px;
    margin-bottom:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    animation:floatCard 4s infinite;
}

.dashboard-card:nth-child(2){
    animation-delay:1s;
}

.dashboard-card:nth-child(3){
    animation-delay:2s;
}

@keyframes floatCard{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
}

.online{
    color:#10b981;
    font-weight:700;
}

.offline{
    color:#ef4444;
    font-weight:700;
}

/* =========================================
   TRUSTED COMPANIES
========================================= */

.trusted-section{
    padding:120px 0;
    background:linear-gradient(
        180deg,
        #ffffff,
        #f8fafc
    );
    overflow:hidden;
}

.trusted-badge{
    display:inline-block;
    padding:10px 20px;
    background:rgba(79,70,229,.08);
    color:#4f46e5;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
}

.trusted-title{
    font-size:3rem;
    font-weight:800;
    color:#0f172a;
}

.trusted-subtitle{
    color:#64748b;
    font-size:18px;
}

/* ==========================================
   INFINITE LOGO MARQUEE / TRUST STRIP
========================================== */
.trust-marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 1.25rem 0;
    mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

.trust-marquee-track {
    display: flex;
    width: max-content;
    gap: 3.5rem;
    align-items: center;
    animation: trustMarqueeScroll 28s linear infinite;
}

.trust-marquee-wrapper:hover .trust-marquee-track {
    animation-play-state: paused;
}

.trust-logo-item {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 800;
    font-size: 1.05rem;
    color: #64748b;
    letter-spacing: 0.5px;
    white-space: nowrap;
    opacity: 0.85;
    transition: all 0.25s ease;
    user-select: none;
    cursor: default;
}

.trust-logo-item:hover {
    opacity: 1;
    color: #0f172a;
    transform: translateY(-2px);
}

.trust-logo-item i {
    font-size: 1.35rem;
    transition: transform 0.25s ease;
}

.trust-logo-item:hover i {
    transform: scale(1.2);
}

@keyframes trustMarqueeScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

.logo-slider{
    position:relative;
    overflow:hidden;
    margin-top:60px;
}

.logo-slider::before,
.logo-slider::after{
    content:"";
    position:absolute;
    top:0;
    width:150px;
    height:100%;
    z-index:2;
}

.logo-slider::before{
    left:0;
    background:linear-gradient(
        to right,
        #f8fafc,
        transparent
    );
}

.logo-slider::after{
    right:0;
    background:linear-gradient(
        to left,
        #f8fafc,
        transparent
    );
}

.logo-track{
    display:flex;
    gap:30px;
    width:max-content;
    animation:scrollLogos 30s linear infinite;
}

.logo-track:hover{
    animation-play-state:paused;
}

.logo-card{
    min-width:220px;
    height:120px;
    background:rgba(255,255,255,.75);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.5);
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.4s;
    box-shadow:
        0 10px 30px rgba(15,23,42,.05);
}

.logo-card:hover{
    transform:translateY(-10px);
    box-shadow:
        0 25px 50px rgba(79,70,229,.15);
}

.logo-card img{

    width:120px;

    height:50px;

    object-fit:contain;

    opacity:1;

    transition:.4s;
}

.logo-card:hover img{
    opacity:1;
    transform:scale(1.08);
}

@keyframes scrollLogos{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-50%);
    }
}
.billing-switch{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    background:#fff;
    padding:8px;
    border-radius:50px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    width:auto;
    margin:40px auto 0;
}

.billing-switch button{
    border:none;
    background:transparent;
    padding:12px 24px;
    border-radius:30px;
    font-weight:600;
    cursor:pointer;
}

.billing-switch button.active{
    background:#4f46e5;
    color:#fff;
}

.save-badge{
    background:#dcfce7;
    color:#16a34a;
    padding:10px 15px;
    border-radius:30px;
    font-size:13px;
    font-weight:700;
}

/* =====================================
   PRICING PAGE FIX
===================================== */

.pricing-hero{
    padding:140px 0 100px;
    background:linear-gradient(
        180deg,
        #f8fafc,
        #eef2ff
    );
    text-align:center;
}

.pricing-title{
    font-size:4rem;
    font-weight:800;
    line-height:1.1;
    max-width:900px;
    margin:auto;
}

.pricing-subtitle{
    font-size:1.25rem;
    color:#64748b;
    max-width:700px;
    margin:20px auto 0;
}

.pricing-section{
    padding:100px 0;
}

.pricing-card{
    background:#fff;
    border-radius:24px;
    padding:40px;
    height:100%;
    box-shadow:
        0 15px 40px rgba(0,0,0,.08);
    transition:.3s;
}

.pricing-card:hover{
    transform:translateY(-10px);
}

.pricing-popular{
    border:2px solid #4f46e5;
    transform:scale(1.05);
}

.pricing-price{
    font-size:64px;
    font-weight:800;
    margin:20px 0;
}

.pricing-price small{
    font-size:16px;
    color:#64748b;
}

.pricing-feature{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 0;
}

.billing-switch button{
    border:none;
    background:#fff;
    padding:12px 24px;
    border-radius:50px;
    font-weight:600;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.billing-switch button.active{
    background:#4f46e5;
    color:#fff;
}

.save-badge{
    background:#dcfce7;
    color:#16a34a;
    padding:10px 15px;
    border-radius:50px;
    font-weight:700;
}

@media(max-width:992px){

    .pricing-popular{
        transform:none;
    }

    .pricing-title{
        font-size:3rem;
    }
}

@media(max-width:768px){

    .pricing-title{
        font-size:2.3rem;
    }

    .pricing-card{
        margin-bottom:20px;
    }
}

/* ===================================
   FAQ PAGE
=================================== */

.faq-hero{
    padding:140px 0 80px;
    background:linear-gradient(
        180deg,
        #f8fafc,
        #eef2ff
    );
    text-align:center;
}

.faq-title{
    font-size:4rem;
    font-weight:800;
    color:#0f172a;
}

.faq-subtitle{
    font-size:1.2rem;
    color:#64748b;
    max-width:700px;
    margin:auto;
}

.faq-page-section{
    padding:100px 0;
    background:#fff;
}

.faq-accordion{
    max-width:900px;
    margin:auto;
}

.faq-accordion .accordion-item{
    border:none;
    border-radius:20px;
    overflow:hidden;
    margin-bottom:20px;
    box-shadow:
        0 10px 30px rgba(15,23,42,.08);
}

.faq-accordion .accordion-button{
    padding:22px 25px;
    font-size:18px;
    font-weight:600;
    box-shadow:none;
}

.faq-accordion .accordion-button:not(.collapsed){
    background:#4f46e5;
    color:#fff;
}

.faq-accordion .accordion-body{
    padding:25px;
    color:#64748b;
    line-height:1.8;
}

@media(max-width:768px){

    .faq-title{
        font-size:2.5rem;
    }

}

/* ==================================
   FEATURES PAGE
================================== */

.features-hero{
    padding:140px 0 100px;
    background:linear-gradient(
        180deg,
        #f8fafc,
        #eef2ff
    );
}

.features-title{
    font-size:4rem;
    font-weight:800;
    color:#0f172a;
}

.features-subtitle{
    max-width:700px;
    margin:auto;
    color:#64748b;
    font-size:1.2rem;
}

.features-section{
    padding:100px 0;
}

.feature-box{
    background:#fff;
    padding:40px;
    border-radius:24px;
    text-align:center;
    height:100%;
    transition:.3s;
    box-shadow:
        0 10px 30px rgba(0,0,0,.06);
}

.feature-box:hover{
    transform:translateY(-10px);
    box-shadow:
        0 20px 50px rgba(79,70,229,.15);
}

.feature-box i{
    font-size:50px;
    color:#4f46e5;
    margin-bottom:20px;
}

.feature-box h4{
    margin-bottom:15px;
    font-weight:700;
}

.feature-box p{
    color:#64748b;
}

.feature-highlight{
    padding:100px 0;
    background:#f8fafc;
}

.feature-list{
    list-style:none;
    padding:0;
}

.feature-list li{
    padding:12px 0;
    font-weight:600;
}

.feature-list li::before{
    content:"✓";
    color:#10b981;
    margin-right:10px;
}

.feature-demo-card{
    background:#fff;
    padding:40px;
    border-radius:24px;
    box-shadow:
        0 15px 40px rgba(0,0,0,.08);
}

@media(max-width:768px){

    .features-title{
        font-size:2.5rem;
    }

}

/* ==================================
   ABOUT PAGE
================================== */

.about-hero{
    padding:140px 0 100px;
    background:linear-gradient(
        180deg,
        #f8fafc,
        #eef2ff
    );
}

.about-title{
    font-size:4rem;
    font-weight:800;
}

.about-subtitle{
    max-width:700px;
    margin:auto;
    color:#64748b;
}

.about-section{
    padding:100px 0;
}

.about-card{
    background:#fff;
    padding:50px;
    border-radius:24px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.about-values{
    padding:100px 0;
    background:#f8fafc;
}

.value-card{
    background:#fff;
    padding:40px;
    border-radius:24px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.value-card i{
    font-size:50px;
    color:#4f46e5;
    margin-bottom:20px;
}

/* ==================================
   CONTACT PAGE
================================== */

.contact-hero{
    padding:140px 0 100px;
    background:linear-gradient(
        180deg,
        #f8fafc,
        #eef2ff
    );
}

.contact-title{
    font-size:4rem;
    font-weight:800;
}

.contact-subtitle{
    color:#64748b;
}

.contact-section{
    padding:100px 0;
}

.contact-card,
.contact-info{
    background:#fff;
    padding:40px;
    border-radius:24px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.contact-info p{
    margin-bottom:20px;
    font-size:18px;
}

.contact-info i{
    color:#4f46e5;
    margin-right:10px;
}

/* ==========================================
   FOOTER CTA SECTION
========================================== */
.footer-cta-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%) !important;
    color: #ffffff !important;
    position: relative;
    overflow: hidden;
}

.footer-cta-section h2,
.footer-cta-section .display-5 {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px;
}

.footer-cta-section .lead {
    color: #cbd5e1 !important;
}

.footer-cta-section .badge {
    color: #ffffff !important;
}

.footer-cta-section p {
    color: #cbd5e1;
}

.footer-cta-section .small {
    color: #94a3b8 !important;
}

/* ==========================================
   THEME TOGGLE BUTTON
========================================== */
.btn-theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: 1px solid var(--border-color);
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.btn-theme-toggle:hover {
    background: #e2e8f0;
    color: #0f172a;
    transform: scale(1.05);
}

.theme-icon-light { display: none; }
.theme-icon-dark { display: inline-block; font-size: 1.05rem; }

[data-theme="dark"] .theme-icon-light { display: inline-block; color: #fbbf24; font-size: 1.15rem; }
[data-theme="dark"] .theme-icon-dark { display: none; }

[data-theme="dark"] .btn-theme-toggle {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .btn-theme-toggle:hover {
    background: #334155;
    color: #ffffff;
}

/* ==========================================
   DARK THEME SYSTEM (DEVELOPER SAAS)
========================================== */
[data-theme="dark"] {
    color-scheme: dark;
    --dark: #f8fafc;
    --slate-700: #cbd5e1;
    --slate-600: #94a3b8;
    --slate-500: #64748b;
    --slate-50: #1e293b;
    --border-color: #334155;
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    --card-shadow-hover: 0 20px 35px -5px rgba(0, 0, 0, 0.5), 0 10px 15px -5px rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] body {
    background-color: #090e1a !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .bg-white {
    background-color: #090e1a !important;
}

[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-slate-50 {
    background-color: #0f172a !important;
}

[data-theme="dark"] .card {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .about-hero,
[data-theme="dark"] .pricing-hero,
[data-theme="dark"] .faq-hero,
[data-theme="dark"] .features-hero,
[data-theme="dark"] .contact-hero,
[data-theme="dark"] .blog-hero {
    background: linear-gradient(180deg, #090e1a 0%, #0f172a 100%) !important;
    border-color: #1e293b !important;
}

[data-theme="dark"] .about-title,
[data-theme="dark"] .pricing-title,
[data-theme="dark"] .faq-title,
[data-theme="dark"] .features-title,
[data-theme="dark"] .contact-title {
    color: #f8fafc !important;
}

[data-theme="dark"] .about-subtitle,
[data-theme="dark"] .pricing-subtitle,
[data-theme="dark"] .faq-subtitle,
[data-theme="dark"] .features-subtitle,
[data-theme="dark"] .contact-subtitle {
    color: #94a3b8 !important;
}

[data-theme="dark"] .about-card,
[data-theme="dark"] .value-card,
[data-theme="dark"] .feature-box,
[data-theme="dark"] .feature-demo-card,
[data-theme="dark"] .contact-card {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .about-values,
[data-theme="dark"] .feature-highlight,
[data-theme="dark"] .features-section,
[data-theme="dark"] .contact-section,
[data-theme="dark"] .faq-page-section {
    background-color: #090e1a !important;
}

[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border {
    border-color: #1e293b !important;
}

[data-theme="dark"] .text-dark {
    color: #f8fafc !important;
}

[data-theme="dark"] .text-muted {
    color: #94a3b8 !important;
}

[data-theme="dark"] #mainNavbar {
    background: rgba(9, 14, 26, 0.94) !important;
    border-bottom: 1px solid #1e293b !important;
}

.navbar-toggler {
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    border-radius: 10px;
    padding: 0.45rem 0.65rem;
    transition: all 0.2s ease;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    outline: none;
}

[data-theme="dark"] .navbar-toggler {
    border: 1px solid #334155 !important;
    background-color: #1e293b !important;
    border-radius: 10px !important;
    padding: 0.45rem 0.65rem !important;
}

[data-theme="dark"] .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35) !important;
    outline: none !important;
}

[data-theme="dark"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    filter: none !important;
}

/* ==========================================
   CONSISTENT NAVBAR STYLING (ALL PAGES)
========================================== */
/* Light Mode */
.navbar,
[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid #e2e8f0 !important;
}

.navbar .navbar-brand,
.navbar .navbar-brand span,
[data-theme="light"] .navbar .navbar-brand,
[data-theme="light"] .navbar .navbar-brand span {
    color: #0f172a !important;
}

.navbar .navbar-brand .text-primary,
[data-theme="light"] .navbar .navbar-brand .text-primary {
    color: #4f46e5 !important;
}

.navbar .navbar-nav .nav-link,
[data-theme="light"] .navbar .navbar-nav .nav-link {
    color: #334155 !important;
    font-weight: 500;
}

.navbar .navbar-nav .nav-link:hover,
[data-theme="light"] .navbar .navbar-nav .nav-link:hover {
    color: #0f172a !important;
    background: rgba(15, 23, 42, 0.05) !important;
}

.navbar .navbar-nav .nav-link.active,
[data-theme="light"] .navbar .navbar-nav .nav-link.active {
    color: #4f46e5 !important;
    background: rgba(79, 70, 229, 0.08) !important;
}

/* Dark Mode */
[data-theme="dark"] .navbar {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid #334155 !important;
}

[data-theme="dark"] .navbar .navbar-brand,
[data-theme="dark"] .navbar .navbar-brand span {
    color: #f8fafc !important;
}

[data-theme="dark"] .navbar .navbar-brand .text-primary {
    color: #818cf8 !important;
}

[data-theme="dark"] .navbar .navbar-nav .nav-link {
    color: #cbd5e1 !important;
    font-weight: 500;
}

[data-theme="dark"] .navbar .navbar-nav .nav-link:hover {
    color: #ffffff !important;
    background: #1e293b !important;
}

[data-theme="dark"] .navbar .navbar-nav .nav-link.active {
    color: #818cf8 !important;
    background: rgba(99, 102, 241, 0.18) !important;
}

[data-theme="dark"] .navbar-nav .dropdown-menu {
    background: #0f172a !important;
    border-color: #334155 !important;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .navbar-dropdown-item {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .navbar-dropdown-item:hover {
    background: #1e293b !important;
}

[data-theme="dark"] .navbar-dropdown-item.active {
    background: rgba(99, 102, 241, 0.22) !important;
    border: 1px solid rgba(99, 102, 241, 0.4) !important;
}

[data-theme="dark"] .navbar-dropdown-item.active .dropdown-item-title {
    color: #818cf8 !important;
    font-weight: 700;
}

[data-theme="dark"] .dropdown-item-title {
    color: #f8fafc !important;
}

[data-theme="dark"] .dropdown-item-desc {
    color: #94a3b8 !important;
}

[data-theme="dark"] .btn-outline-custom {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .btn-outline-custom:hover {
    background: #334155 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .feature-card {
    background: #0f172a !important;
    border-color: #1e293b !important;
}

[data-theme="dark"] .feature-metric-preview {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .pricing-section {
    background: #090e1a !important;
    background: radial-gradient(circle at 50% 10%, rgba(99, 102, 241, 0.12) 0%, transparent 60%), linear-gradient(180deg, #090e1a 0%, #0f172a 100%) !important;
}

[data-theme="dark"] .pricing-card-modern {
    background: #0f172a !important;
    border-color: #1e293b !important;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .pricing-card-modern.featured,
[data-theme="dark"] .pricing-card-featured {
    background: #131c35 !important;
    border-color: #6366f1 !important;
    box-shadow: 0 20px 50px -10px rgba(99, 102, 241, 0.28) !important;
}

[data-theme="dark"] .pricing-card-modern h4 {
    color: #f8fafc !important;
}

[data-theme="dark"] .pricing-card-modern .pricing-amount {
    color: #f8fafc !important;
}

[data-theme="dark"] .pricing-card-modern .pricing-features-list li {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .pricing-card-modern .pricing-features-list li strong {
    color: #f8fafc !important;
}

[data-theme="dark"] .pricing-card-modern hr {
    border-color: #1e293b !important;
    opacity: 0.6;
}

[data-theme="dark"] .pricing-card-modern .btn-outline-custom {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .pricing-card-modern .btn-outline-custom:hover {
    background: #334155 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .timeline-card,
[data-theme="dark"] .status-page-mockup,
[data-theme="dark"] .agency-dashboard-mockup,
[data-theme="dark"] .integration-card,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .contact-info {
    background: #0f172a !important;
    border-color: #1e293b !important;
}

[data-theme="dark"] .accordion-item {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
}

[data-theme="dark"] .accordion-button {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: #1e293b !important;
    color: #818cf8 !important;
}

[data-theme="dark"] .accordion-body {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .form-control {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .form-control:focus {
    background-color: #0f172a !important;
    border-color: #6366f1 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .trust-logo-item {
    color: #94a3b8;
}

[data-theme="dark"] .trust-logo-item:hover {
    color: #ffffff;
}

/* ==========================================
   FOOTER (High Contrast in BOTH Light & Dark Modes)
========================================== */
.footer-modern,
[data-theme="light"] .footer-modern,
[data-theme="dark"] .footer-modern {
    background: #0b1120 !important;
    border-top: 1px solid #1e293b !important;
    color: #cbd5e1 !important;
}

.footer-modern .footer-brand h4,
.footer-modern h4,
.footer-modern h4.text-white,
[data-theme="light"] .footer-modern h4,
[data-theme="dark"] .footer-modern h4 {
    color: #ffffff !important;
}

.footer-modern .footer-brand h4 span.text-primary,
[data-theme="light"] .footer-modern h4 span.text-primary,
[data-theme="dark"] .footer-modern h4 span.text-primary {
    color: #818cf8 !important;
}

.footer-modern .footer-title,
[data-theme="light"] .footer-modern .footer-title,
[data-theme="dark"] .footer-modern .footer-title {
    color: #ffffff !important;
}

/* ==========================================
   PERMANENTLY DARK COMPONENTS (TERMINAL & WORKFLOW)
   Always High Contrast in BOTH Light & Dark Modes
========================================== */
.terminal-window,
[data-theme="light"] .terminal-window,
[data-theme="dark"] .terminal-window {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    color: #f8fafc !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4) !important;
}

.terminal-window .terminal-header {
    background: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
    color: #cbd5e1 !important;
}

.terminal-window .terminal-endpoint {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

.terminal-window .terminal-endpoint .text-light {
    color: #f8fafc !important;
}

.terminal-window .terminal-endpoint .text-muted,
.terminal-window .terminal-endpoint small {
    color: #94a3b8 !important;
}

.terminal-window .text-muted,
.terminal-window small,
.terminal-window .small {
    color: #94a3b8 !important;
}

.terminal-window .assertion-item {
    color: #f8fafc !important;
}

.terminal-window .assertion-item span {
    color: #f8fafc !important;
}

.terminal-window .assertion-item i {
    color: #10b981 !important;
}

.terminal-window code {
    color: #f472b6 !important;
    background: rgba(244, 114, 182, 0.15) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.85em !important;
}

.terminal-window strong {
    color: #ffffff !important;
}

.terminal-window .text-success,
.terminal-window strong.text-success {
    color: #34d399 !important;
}

/* Workflow Canvas permanently dark */
.workflow-canvas,
[data-theme="light"] .workflow-canvas,
[data-theme="dark"] .workflow-canvas {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    color: #f8fafc !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.5) !important;
}

.workflow-canvas .bg-slate-900 {
    background: #1e293b !important;
    border-color: #334155 !important;
}

.workflow-canvas .text-white {
    color: #ffffff !important;
}

.workflow-canvas .text-muted,
.workflow-canvas small,
.workflow-canvas .small {
    color: #94a3b8 !important;
}

.workflow-canvas .action-chip {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

.workflow-canvas .action-chip span {
    color: #ffffff !important;
}

.workflow-canvas .action-chip small,
.workflow-canvas .action-chip .text-muted {
    color: #94a3b8 !important;
}

.workflow-node {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

.workflow-node .text-white {
    color: #ffffff !important;
}

.workflow-node small {
    color: #cbd5e1 !important;
}

.workflow-node.trigger-down {
    border-color: rgba(239, 68, 68, 0.6) !important;
    background: rgba(239, 68, 68, 0.15) !important;
}
.workflow-node.trigger-down small {
    color: #fca5a5 !important;
}

.workflow-node.condition {
    border-color: rgba(245, 158, 11, 0.6) !important;
    background: rgba(245, 158, 11, 0.15) !important;
}
.workflow-node.condition small {
    color: #fde68a !important;
}

.workflow-node.action {
    border-color: rgba(99, 102, 241, 0.6) !important;
    background: rgba(99, 102, 241, 0.2) !important;
}
.workflow-node.action small {
    color: #c7d2fe !important;
}

.workflow-node.recovery {
    border-color: rgba(16, 185, 129, 0.6) !important;
    background: rgba(16, 185, 129, 0.15) !important;
}
.workflow-node.recovery small {
    color: #6ee7b7 !important;
}

/* ==========================================
   EXPLICIT LIGHT THEME CONTRAST RULES
========================================== */
html:not([data-theme="dark"]) body,
[data-theme="light"] body {
    background-color: #ffffff !important;
    color: #334155 !important;
}

html:not([data-theme="dark"]) .hero-section,
[data-theme="light"] .hero-section {
    background: radial-gradient(circle at 50% 0%, rgba(238, 242, 255, 0.85) 0%, rgba(255, 255, 255, 1) 70%) !important;
}

html:not([data-theme="dark"]) .hero-headline,
[data-theme="light"] .hero-headline,
html:not([data-theme="dark"]) .section-title,
[data-theme="light"] .section-title,
html:not([data-theme="dark"]) .trusted-title,
[data-theme="light"] .trusted-title,
html:not([data-theme="dark"]) .pricing-title,
[data-theme="light"] .pricing-title,
html:not([data-theme="dark"]) .pricing-amount,
[data-theme="light"] .pricing-amount,
html:not([data-theme="dark"]) .faq-title,
[data-theme="light"] .faq-title,
html:not([data-theme="dark"]) h1,
[data-theme="light"] h1,
html:not([data-theme="dark"]) h2,
[data-theme="light"] h2,
html:not([data-theme="dark"]) h3,
[data-theme="light"] h3,
html:not([data-theme="dark"]) h4,
[data-theme="light"] h4,
html:not([data-theme="dark"]) h5,
[data-theme="light"] h5,
html:not([data-theme="dark"]) h6,
[data-theme="light"] h6 {
    color: #0f172a !important;
}

html:not([data-theme="dark"]) .hero-subheadline,
[data-theme="light"] .hero-subheadline,
html:not([data-theme="dark"]) .section-subtitle,
[data-theme="light"] .section-subtitle,
html:not([data-theme="dark"]) .trusted-subtitle,
[data-theme="light"] .trusted-subtitle,
html:not([data-theme="dark"]) .contact-subtitle,
[data-theme="light"] .contact-subtitle {
    color: #475569 !important;
}

html:not([data-theme="dark"]) .hero-trust-note,
[data-theme="light"] .hero-trust-note,
html:not([data-theme="dark"]) .pricing-amount small,
[data-theme="light"] .pricing-amount small {
    color: #64748b !important;
}

html:not([data-theme="dark"]) .text-dark,
[data-theme="light"] .text-dark {
    color: #0f172a !important;
}

html:not([data-theme="dark"]) .text-muted,
[data-theme="light"] .text-muted {
    color: #64748b !important;
}

/* ==========================================
   EXPLICIT DARK THEME CONTRAST RULES
========================================== */
[data-theme="dark"] body {
    background-color: #090e1a !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .hero-section {
    background: radial-gradient(circle at 50% 0%, rgba(79, 70, 229, 0.22) 0%, rgba(9, 14, 26, 1) 75%) !important;
}

[data-theme="dark"] .hero-headline,
[data-theme="dark"] .section-title,
[data-theme="dark"] .trusted-title,
[data-theme="dark"] .pricing-title,
[data-theme="dark"] .pricing-amount,
[data-theme="dark"] .faq-title,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #ffffff !important;
}

[data-theme="dark"] .hero-subheadline,
[data-theme="dark"] .section-subtitle,
[data-theme="dark"] .trusted-subtitle,
[data-theme="dark"] .contact-subtitle {
    color: #94a3b8 !important;
}

[data-theme="dark"] .hero-trust-note,
[data-theme="dark"] .pricing-amount small {
    color: #64748b !important;
}

[data-theme="dark"] .section-badge {
    background: rgba(99, 102, 241, 0.18) !important;
    color: #a5b4fc !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
}

[data-theme="dark"] .trusted-section {
    background: #090e1a !important;
}

[data-theme="dark"] .pricing-features-list li {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .table {
    --bs-table-bg: #0f172a !important;
    --bs-table-color: #cbd5e1 !important;
    --bs-table-border-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #1e293b !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.02) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(99, 102, 241, 0.08) !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: #0f172a !important;
    border-color: #1e293b #1e293b #0f172a !important;
    color: #818cf8 !important;
}

/* ==========================================
   AUTH PAGES: LEFT PANEL CONTRAST FIX
   Always Crisp White in BOTH Light & Dark Modes
========================================== */
.auth-hero-section h1,
.auth-hero-section .auth-headline,
.auth-hero-section .auth-hero-title,
html:not([data-theme="dark"]) .auth-hero-section h1,
html:not([data-theme="dark"]) .auth-hero-section .auth-headline,
html:not([data-theme="dark"]) .auth-hero-section .auth-hero-title,
[data-theme="dark"] .auth-hero-section h1,
[data-theme="dark"] .auth-hero-section .auth-headline,
[data-theme="dark"] .auth-hero-section .auth-hero-title {
    color: #ffffff !important;
}

.auth-hero-section .auth-subheadline,
.auth-hero-section .auth-hero-desc,
.auth-hero-section p,
html:not([data-theme="dark"]) .auth-hero-section .auth-subheadline,
html:not([data-theme="dark"]) .auth-hero-section .auth-hero-desc,
html:not([data-theme="dark"]) .auth-hero-section p {
    color: rgba(255, 255, 255, 0.85) !important;
}

.auth-hero-section .auth-feature-title,
.auth-hero-section .auth-value-title {
    color: #ffffff !important;
}

.auth-hero-section .auth-feature-desc,
.auth-hero-section .auth-value-desc {
    color: #cbd5e1 !important;
}

/* ==========================================
   LEGAL & COMPLIANCE PAGES (LIGHT & DARK)
========================================== */
.legal-hero {
    padding: 130px 0 60px;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
}

.legal-title {
    font-size: 3rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.legal-subtitle {
    font-size: 1.05rem;
    color: #64748b;
    margin: 0 auto;
}

.legal-page-section {
    padding: 60px 0 100px;
    background: #ffffff;
}

.legal-container {
    max-width: 880px;
    margin: 0 auto;
}

.legal-notice-alert {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6 !important;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    color: #1e40af;
    margin-bottom: 2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.legal-notice-alert.warning {
    background: #fffbeb;
    border-color: #fde68a;
    border-left: 4px solid #f59e0b !important;
    color: #92400e;
}

.legal-content {
    color: #334155;
    line-height: 1.8;
    font-size: 1rem;
}

.legal-content h3,
.legal-content h4 {
    color: #0f172a;
    font-weight: 700;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.legal-content p {
    margin-bottom: 1rem;
    color: inherit;
}

.legal-content ul,
.legal-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.legal-content li {
    margin-bottom: 0.5rem;
    color: inherit;
}

.legal-content a {
    color: #4f46e5;
    text-decoration: underline;
    font-weight: 600;
}

.legal-content a:hover {
    color: #4338ca;
}

.legal-content strong {
    color: #0f172a;
    font-weight: 600;
}

.legal-info-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.75rem;
    margin-top: 2.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.legal-info-card h5 {
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 1rem;
}

.legal-info-card p {
    color: #475569;
    margin-bottom: 0.5rem;
}

.legal-info-card strong {
    color: #0f172a;
}

/* Dark Mode Overrides for Legal Pages */
[data-theme="dark"] .legal-hero {
    background: linear-gradient(180deg, #090e1a 0%, #0f172a 100%) !important;
    border-color: #1e293b !important;
}

[data-theme="dark"] .legal-title {
    color: #ffffff !important;
}

[data-theme="dark"] .legal-subtitle {
    color: #94a3b8 !important;
}

[data-theme="dark"] .legal-page-section {
    background-color: #090e1a !important;
}

[data-theme="dark"] .legal-notice-alert {
    background: rgba(30, 58, 138, 0.22) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    border-left: 4px solid #60a5fa !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .legal-notice-alert strong,
[data-theme="dark"] .legal-notice-alert i {
    color: #93c5fd !important;
}

[data-theme="dark"] .legal-notice-alert.warning {
    background: rgba(146, 64, 14, 0.22) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    border-left: 4px solid #fbbf24 !important;
    color: #fde68a !important;
}

[data-theme="dark"] .legal-notice-alert.warning strong,
[data-theme="dark"] .legal-notice-alert.warning i {
    color: #fef3c7 !important;
}

[data-theme="dark"] .legal-content {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .legal-content h3,
[data-theme="dark"] .legal-content h4 {
    color: #ffffff !important;
}

[data-theme="dark"] .legal-content p,
[data-theme="dark"] .legal-content li {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .legal-content strong {
    color: #f8fafc !important;
}

[data-theme="dark"] .legal-content a {
    color: #818cf8 !important;
}

[data-theme="dark"] .legal-content a:hover {
    color: #a5b4fc !important;
}

[data-theme="dark"] .legal-info-card {
    background: #0f172a !important;
    border-color: #1e293b !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .legal-info-card h5 {
    color: #ffffff !important;
}

[data-theme="dark"] .legal-info-card p {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .legal-info-card strong {
    color: #f8fafc !important;
}