/* ==========================================================================
   Digital AIML — Centralized Stylesheet (main.css)
   Consolidates inline style="" attributes and embedded <style> blocks that
   were previously scattered across individual view files.
   Brand colors match the existing :root in style.css (kept unchanged).
   ========================================================================== */

:root {
    /* Brand (mirrors public/css/style.css :root — do not diverge) */
    --primary: #1363C6;
    --secondary: #15ACE1;
    --light: #F4F7FE;
    --dark: #14183E;

    /* Extended semantic palette used by newer sections */
    --ai-dark: #0f172a;
    --ai-dark-2: #1e293b;
    --ai-navy: #0b1f4d;
    --ai-navy-deep: #031534;
    --success: #10b981;
    --danger: #ef4444;
    --muted: #64748b;
    --border-light: #f1f5f9;

    --radius: 12px;
    --radius-lg: 20px;
    --transition: 0.3s ease;

    /* Chatbot widget palette (from include/footer.php :root — merged here,
       no name collisions with the variables above) */
    --ai-primary: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    --ai-primary-dark: #1e3a8a;
    --ai-bg: rgba(255, 255, 255, 0.97);
    --ai-glass: rgba(255, 255, 255, 0.1);
    --ai-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --ai-glow: 0 0 0 1px rgba(59, 130, 246, 0.5);
    --ai-text: #1e293b;
    --ai-text-muted: #64748b;
    --ai-success: #10b981;
}

/* ==========================================================================
   Utility Classes — Spacing
   ========================================================================== */
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.pt-100 { padding-top: 100px; }

/* ==========================================================================
   Utility Classes — Layout
   ========================================================================== */
.text-center { text-align: center; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.no-pointer-events { pointer-events: none; }
.position-rel-inline { position: relative; display: inline-block; }
.svg-defs-hidden { width: 0; height: 0; position: absolute; }
.timeline-number-badge { width: 32px; height: 32px; left: -10px; border: 4px solid #fff; }
.search-modal-inner { width: 100%; max-width: 800px; background: white; padding: 20px; border-radius: 10px; }
.ai-prechat-panel { flex: 1; padding: 30px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 50%); overflow-y: auto; }
.ai-prechat-label { color: var(--ai-text); font-weight: 600; }
.ai-prechat-input { width: 100%; border-radius: 12px; padding: 14px 20px; }
.ai-prechat-submit { border-radius: 12px; padding: 14px; background: var(--ai-primary); color: white; justify-content: center; width: 100%; }

/* ==========================================================================
   Utility Classes — Max-width constraints (replaces repeated inline
   style="max-width: NNpx;" across hero/section intro blocks)
   ========================================================================== */
.max-w-100 { max-width: 100px; }
.max-w-150 { max-width: 150px; }
.max-w-500 { max-width: 500px; }
.max-w-600 { max-width: 600px; }
.max-w-600-regular { max-width: 600px; font-weight: 400; }
.max-w-650 { max-width: 650px; }
.max-w-700 { max-width: 700px; }
.max-w-800 { max-width: 800px; }
.max-w-800-regular { max-width: 800px; font-weight: 400; }
.max-w-800-lead { max-width: 800px; font-size: 1.15rem; line-height: 1.7; }
.max-w-900 { max-width: 900px; }
.max-w-100-100 { max-width: 100px; max-height: 100px; }
.min-w-300 { min-width: 300px; }

/* ==========================================================================
   Utility Classes — Fixed square dimensions (icon circles, avatars, badges)
   ========================================================================== */
.box-12 { width: 12px; height: 12px; }
.box-30 { width: 30px; height: 30px; }
.box-32 { width: 32px; height: 32px; }
.box-32-radius { width: 32px; height: 32px; border-radius: 8px; }
.box-50 { width: 50px; height: 50px; }
.box-50-min { width: 50px; height: 50px; min-width: 50px; }
.box-50-minw { min-width: 50px; height: 50px; }
.box-60 { width: 60px; height: 60px; }
.box-72-radius { width: 72px; height: 72px; border-radius: 8px; }
.box-75-glow { width: 75px; height: 75px; box-shadow: 0 0 30px rgba(19, 99, 198, 0.5); }
.box-80 { width: 80px; height: 80px; }
.box-80-shrink { width: 80px; height: 80px; flex-shrink: 0; }
.box-100-radius { width: 100px; height: 100px; border-radius: 6px; }
.box-120-radius { width: 120px; border-radius: 20px; }
.box-150 { width: 150px; height: 150px; }
.box-300-contain { width: 300px; height: 300px; object-fit: contain; filter: drop-shadow(0 0 30px rgba(21, 172, 225, 0.4)); }
.box-350 { width: 350px; height: 350px; }
.box-3rem { width: 3rem; height: 3rem; }
.w-100-h-auto { width: 100%; height: auto; }
.w-100pct { width: 100%; }

/* ==========================================================================
   Utility Classes — Image / media fit
   ========================================================================== */
.img-cover { object-fit: cover; }
.img-cover-200 { height: 200px; object-fit: cover; }
.img-cover-220 { height: 220px; object-fit: cover; }
.img-cover-rounded-60 { object-fit: cover; border-radius: 60px; }
.img-contain-padded { object-fit: contain; padding: 30px; background: rgba(255,255,255,0.05); border-radius: 60px; }

/* ==========================================================================
   Utility Classes — Heights / max-heights
   ========================================================================== */
.max-h-300 { max-height: 300px; }
.max-h-320 { max-height: 320px; }
.h-150 { height: 150px; }
.h-220 { height: 220px; }
.h-450-min { min-height: 450px; }
.h-450 { height: 450px; }
.h-52-white { height: 52px; background: #fff; }

/* ==========================================================================
   Utility Classes — Typography
   ========================================================================== */
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-16-lh17 { font-size: 16px; line-height: 1.7; }
.fs-16-lh16 { font-size: 16px; line-height: 1.6; }
.fs-18-fade { font-size: 18px; opacity: 0.8; transition: opacity 0.3s; }
.fs-22-lh14 { font-size: 22px; line-height: 1.4; }
.fs-24 { font-size: 24px; }
.fs-50-lh1 { font-size: 50px; line-height: 1; }
.fs-56-lh1 { font-size: 56px; line-height: 1; }
.fs-rem-07 { font-size: 0.7rem; }
.fs-rem-105 { font-size: 1.05rem; line-height: 1.85; color: #444; }
.fs-rem-11 { font-size: 1.1rem; }
.lh-11 { line-height: 1.1; }
.lh-14-bold { line-height: 1.4; font-weight: 700; }
.fw-700 { font-weight: 700; }
.fw-black { font-weight: 900; }
.tracking-tight { letter-spacing: -0.02em; }
.lh-relaxed { line-height: 1.8; }
.text-body-prose { font-size: 1.05rem; line-height: 1.85; color: #444; }
.text-shadow-soft { text-shadow: 0 1px 5px rgba(0,0,0,0.3); }
.text-shadow-strong { text-shadow: 0 2px 15px rgba(0,0,0,0.6); }
.text-shadow-onlight { opacity: 0.95; text-shadow: 0 1px 8px rgba(0,0,0,0.4); line-height: 1.6; }

/* ==========================================================================
   Utility Classes — Opacity / visibility
   ========================================================================== */
.opacity-07 { opacity: 0.7; }
.opacity-09 { opacity: 0.9; }
.is-hidden { display: none; }
.is-hidden-visibility { display: none; visibility: hidden; }
.show-block { display: block !important; }
.z-index-1 { z-index: 1; }
.z-index-5 { z-index: 5; }
.z-index-10-top100 { top: 100px; z-index: 10; }

/* ==========================================================================
   Utility Classes — Borders / accents
   ========================================================================== */
.border-left-success { border-left: 5px solid #28A745; }
.border-left-primary { border-left: 5px solid #1363C6; }
.border-none-h450 { border: 0; min-height: 450px; }

/* ==========================================================================
   Utility Classes — Backgrounds (flat tints, frequently reused)
   ========================================================================== */
.bg-white-soft { background: #ffffff; }
.bg-fdfdff { background: #fdfdff; }
.bg-f8f9fa { background: #f8f9fa; }
.bg-f8faff { background: #f8faff; }
.bg-f8fafc { background-color: #f8fafc; }
.bg-modal-overlay { background: rgba(20, 24, 62, 0.7); }
.bg-overlay-light-10 { background: rgba(255,255,255,0.1); }
.bg-overlay-light-08 { background: rgba(255,255,255,0.08); }
.bg-overlay-light-03-bordered { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(20px); border-radius: 80px; }
.bg-overlay-light-10-bordered { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); }
.bg-overlay-light-10-bordered-30 { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.3) !important; }
.bg-overlay-256 { background: rgba(256, 256, 256, 0.1); }
.bg-primary-tint-10 { background: rgba(19, 99, 198, 0.1); }
.bg-primary-tint-20-bordered { background: rgba(19, 99, 198, 0.2); border-color: rgba(255,255,255,0.2) !important; }
.bg-navy { background: #0d1b5e; }
.bg-pill-light { background: #fff; color: #475569; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.bg-cyan-pill { background: #15ACE1; color: #050b1a; }
.bg-success-solid { background: #28A745; color: #fff; }
.bg-primary-solid { background: #1363C6; color: #fff; }

/* Gradient panels (dark, used for stat/CTA blocks) */
.bg-gradient-dark { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important; }
.bg-gradient-dark-2 { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important; }
.bg-gradient-navy { background: linear-gradient(135deg, #0b1f4d 0%, #031534 100%); position: relative; overflow: hidden; }
.bg-gradient-navy-flat { background: linear-gradient(135deg, #0b1f4d 0%, #031534 100%); }
.bg-gradient-brand { background: linear-gradient(135deg, #1363C6 0%, #15ACE1 100%) !important; }
.bg-gradient-brand-bordered { background: linear-gradient(135deg, #1363C6 0%, #15ACE1 100%); border: 1px solid rgba(255, 255, 255, 0.2); }
.bg-gradient-brand-text { background: linear-gradient(135deg, #1363C6, #15ACE1); color: #fff; }
.bg-gradient-brand-cliptext {
    background: linear-gradient(135deg, #1363C6, #15ACE1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bg-gradient-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); }
.bg-gradient-whatsapp-text { background: linear-gradient(135deg, #25d366, #128c7e); color: white; }
.bg-gradient-soft { background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); }
.bg-banner-gradient {
    background: linear-gradient(90deg, #1a1f6b, #2c35b5);
    color: #fff;
    text-align: center;
    padding: 8px 16px;
    font-size: 14px;
    z-index: 9999;
    position: relative;
}
.bg-footer-divider { background: #fdfdfe; border-top: 1px solid #f1f5f9; scroll-margin-top: 60px; }

/* Tinted icon/badge backgrounds with matching text color */
.tint-indigo { background: #eef2ff; color: #4f46e5; }
.tint-cyan { background: #ecfeff; color: #0891b2; }
.tint-fuchsia { background: #fdf4ff; color: #c026d3; }

/* One-off text/color overrides kept as named utilities for !important parity
   with their original inline styles */
.text-white-strong-80 { color: rgba(255,255,255,0.8) !important; }
.text-primary-force { color: #1363C6 !important; }
.text-slate-475 { color: #475569; }
.text-indigo-4f46e5 { color: #4f46e5; }
.text-fuchsia-c026d3 { color: #c026d3; }
.text-cyan-0891b2 { color: #0891b2; }
.text-navy-hoverable { color: #0b1f4d; transition: all 0.3s ease; }

/* Hero / section background images (computed base_url() kept inline by
   necessity — see "Justified Exceptions" in the audit report. The
   decorative gradient overlay classes below are reusable.) */
.hero-overlay-gradient {
    background: linear-gradient(165deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
}

/* ==========================================================================
   Component — Decorative blurred orbs (used on hero/stat sections)
   ========================================================================== */
.blur-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.blur-orb-green-400 { width: 400px; height: 400px; background: rgba(40, 167, 69, 0.1); filter: blur(80px); top: -200px; left: -100px; }
.blur-orb-primary-400-strong { width: 400px; height: 400px; background: rgba(19, 99, 198, 0.4); filter: blur(60px); top: -200px; left: -100px; }
.blur-orb-primary-400 { width: 400px; height: 400px; background: rgba(19, 99, 198, 0.2); filter: blur(80px); top: -200px; left: -100px; }
.blur-orb-cyan-350 { width: 350px; height: 350px; background: rgba(21, 172, 225, 0.2); filter: blur(50px); bottom: -150px; right: -50px; }
.blur-orb-cyan-300 { width: 300px; height: 300px; background: rgba(21, 172, 225, 0.1); filter: blur(60px); bottom: -150px; right: -50px; }

/* Rotating dashed ring decoration */
.spin-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    height: 420px;
    border: 1px dashed rgba(21, 172, 225, 0.2);
    border-radius: 50%;
    animation: spin 20s linear infinite;
    pointer-events: none;
}
@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* fadeIn entrance animation helper (mirrors the wow.js "visible" state) */
.fade-in-visible {
    visibility: visible;
    animation-name: fadeIn;
}
.fade-in-delay-1 { animation-delay: 0.1s; }
.fade-in-delay-3 { animation-delay: 0.3s; }
.fade-in-delay-5 { animation-delay: 0.5s; }

/* ==========================================================================
   Component — Modal close button (admin / lightbox usage)
   ========================================================================== */
.modal-close-btn {
    background: none;
    border: none;
    color: #fff;
    float: right;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    margin-top: -2px;
}

/* ==========================================================================
   Component — Cards & process steps
   ========================================================================== */
.card { border-radius: var(--radius); }
.card-body { padding: 24px; }

.fancy-service-card {
    background: #ffffff !important;
    border: 1px solid rgba(19, 99, 198, 0.1) !important;
    border-radius: var(--radius-lg) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    padding: 40px 30px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02) !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none !important;
    color: inherit !important;
}
.fancy-service-card:hover {
    transform: translateY(-8px);
    border-color: #1363C6 !important;
    box-shadow: 0 20px 40px rgba(19, 99, 198, 0.08) !important;
}
.bg-fancy-light { background-color: #f8fbff !important; }

.api-endpoint-badge {
    font-family: 'Courier New', Courier, monospace;
    background: #f1f5f9;
    color: #475569;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
    letter-spacing: 0.5px;
}
.method-get { color: #059669; }
.method-post { color: #2563eb; }

.fancy-icon-box {
    width: 64px;
    height: 64px;
    background: #f0f7ff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 1.6rem;
    color: #1363C6;
    border: 1px solid rgba(19, 99, 198, 0.1);
    transition: all 0.3s ease;
}
.fancy-service-card:hover .fancy-icon-box {
    background: #1363C6;
    color: #ffffff;
    transform: rotate(-5deg) scale(1.05);
}

.service-btn-fancy {
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border: none !important;
    background: #1363C6 !important;
}
.service-btn-fancy:hover {
    background: #0d4a96 !important;
    box-shadow: 0 5px 15px rgba(19, 99, 198, 0.3) !important;
}

.hover-elevate { transition: all 0.3s ease; }
.hover-elevate:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    border-color: #1363C6 !important;
    color: #1363C6 !important;
}

.fancy-badge {
    background: rgba(19, 99, 198, 0.1) !important;
    color: #1363C6 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.7rem !important;
    border: none !important;
}

.code-editor {
    font-family: 'Fira Code', 'Courier New', Courier, monospace;
    background: #0b0f19 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.op-8 { opacity: 0.8; }

/* Process step cards */
.step-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 30px;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.step-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}
.step-card-link:focus-visible .step-card {
    outline: 2px solid #1363C6;
    outline-offset: 2px;
}
.step-card:hover {
    border-color: #1363C6;
    box-shadow: 0 15px 35px rgba(19, 99, 198, 0.1);
    transform: translateY(-10px);
}
.step-number-bg {
    position: absolute;
    top: -15px;
    right: -10px;
    font-size: 6rem;
    font-weight: 900;
    color: rgba(19, 99, 198, 0.04);
    z-index: 0;
    line-height: 1;
    user-select: none;
}
.step-icon {
    width: 54px;
    height: 54px;
    background: rgba(19, 99, 198, 0.08);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #1363C6;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}
.step-card:hover .step-icon {
    background: #1363C6;
    color: #fff;
    transform: rotate(-10deg);
}
.step-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    color: #0f172a;
}
.step-desc {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    line-height: 1.6;
}
.process-line { position: relative; }
@media (min-width: 992px) {
    .process-line::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 5%;
        right: 5%;
        height: 2px;
        background: linear-gradient(90deg, rgba(19, 99, 198, 0) 0%, rgba(19, 99, 198, 0.1) 50%, rgba(19, 99, 198, 0) 100%);
        z-index: 0;
        display: none;
    }
}

/* Vision / feature panels */
.vision-card {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(19, 99, 198, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}
.vision-header {
    background: linear-gradient(135deg, #1363C6 0%, #0b3d82 100%);
    padding: 30px;
    color: #fff;
}
.vision-feature-card {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease;
    text-align: center;
    height: 100%;
}
.vision-feature-card:hover {
    background: #f8fbff;
    border-color: #1363C6;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(19, 99, 198, 0.08);
}
.vision-icon {
    width: 50px;
    height: 50px;
    background: rgba(19, 99, 198, 0.05);
    color: #1363C6;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.4rem;
    transition: all 0.3s ease;
}
.vision-feature-card:hover .vision-icon {
    background: #1363C6;
    color: #fff;
}
.scan-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #1363C6;
    box-shadow: 0 0 15px 2px #1363C6;
    animation: scan 3s linear infinite;
    z-index: 2;
}
@keyframes scan {
    0% { top: 0; }
    100% { top: 100%; }
}
.vision-list li {
    margin-bottom: 12px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}
.vision-list i {
    color: #1363C6;
    background: rgba(19, 99, 198, 0.1);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    margin-right: 12px;
}

/* Industry "galaxy" pill cloud */
.industry-cloud-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 20px 0;
}
.industry-node {
    background: #fff;
    border: 1px solid rgba(19, 99, 198, 0.1);
    padding: 14px 28px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: default;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
}
.industry-node::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: 0.5s;
}
.industry-node:hover::before { left: 100%; }
.industry-node:hover {
    transform: translateY(-8px) scale(1.05);
    background: #1363C6;
    color: #fff;
    border-color: #1363C6;
    box-shadow: 0 15px 30px rgba(19, 99, 198, 0.2);
}
.industry-node i {
    font-size: 1.2rem;
    margin-right: 15px;
    color: #1363C6;
    transition: all 0.3s ease;
    width: 35px;
    height: 35px;
    background: rgba(19, 99, 198, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.industry-node:hover i {
    color: #fff;
    background: rgba(255,255,255,0.2);
    transform: rotate(360deg);
}
.industry-node span {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}
.industry-node.custom-ai-node {
    background: linear-gradient(135deg, #1363C6 0%, #0d4a96 100%);
    border-color: #0d4a96;
    box-shadow: 0 10px 24px rgba(19, 99, 198, 0.25);
}
.industry-node.custom-ai-node i,
.industry-node.custom-ai-node span { color: #fff !important; }
.industry-node.custom-ai-node i { background: rgba(255, 255, 255, 0.2); }

.premium-mesh-bg {
    background-color: #ffffff;
    background-image: radial-gradient(at 0% 0%, hsla(214,100%,96%,1) 0, transparent 50%),
                      radial-gradient(at 50% 0%, hsla(214,100%,94%,1) 0, transparent 50%),
                      radial-gradient(at 100% 0%, hsla(214,100%,96%,1) 0, transparent 50%);
    border-radius: 30px;
}

/* ==========================================================================
   Component — About page hero / blog teaser (from about.php <style> blocks)
   ========================================================================== */
.main-hero { position: relative; overflow: hidden; }
.hero-glow-1 { position: absolute; top: -10%; left: -5%; width: 40%; height: 60%; background: radial-gradient(circle, rgba(19, 99, 198, 0.15) 0%, transparent 70%); z-index: 1; pointer-events: none; }
.hero-glow-2 { position: absolute; bottom: -10%; right: -5%; width: 50%; height: 70%; background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, transparent 70%); z-index: 1; pointer-events: none; }

.premium-breadcrumb {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    display: inline-flex;
    padding: 8px 20px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.1);
}
.premium-breadcrumb .breadcrumb-item a { color: rgba(255,255,255,0.6); text-decoration: none; transition: 0.3s; }
.premium-breadcrumb .breadcrumb-item.active { color: #fff; }

.hero-badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(90deg, #1363C6, #06b6d4);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(19, 99, 198, 0.3);
}

.btn-fancy {
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: 0 10px 30px rgba(19, 99, 198, 0.4);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-anim-card {
    width: 360px;
    height: 360px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(20px);
    border-radius: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 50px rgba(255,255,255,0.05), 0 40px 80px rgba(0,0,0,0.4);
    margin: 0 auto;
}

.about-blog-section { background: #f8fafc; padding: 100px 0; }
.about-blog-card { background: #fff; border: none; border-radius: 30px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); height: 100%; }
.about-blog-card:hover { transform: translateY(-15px); box-shadow: 0 30px 60px rgba(19, 99, 198, 0.15); }
.about-blog-img-wrap { position: relative; overflow: hidden; height: 240px; }
.about-blog-img-wrap img { transition: 0.6s; width: 100%; height: 100%; object-fit: cover; }
.about-blog-card:hover .about-blog-img-wrap img { transform: scale(1.1); }
.about-blog-date { position: absolute; bottom: 20px; left: 20px; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(10px); color: #fff; padding: 8px 16px; border-radius: 12px; font-size: 12px; font-weight: 600; }

/* Generic small text-size/line-height combos repeated across many sections
   (reuses .fs-22-lh14 / .fs-16-lh17 / .fs-16-lh16 defined above) */
.fs-11-bold { font-size: 11px; font-weight: 700; }

/* ==========================================================================
   Component — Service page hero glows + collage grid + API marketplace
   (from service.php <style> blocks)
   ========================================================================== */
.service-hero-glow-1 { position: absolute; top: -10%; left: -5%; width: 40%; height: 60%; background: radial-gradient(circle, rgba(19, 99, 198, 0.18) 0%, transparent 70%); z-index: 1; pointer-events: none; }
.service-hero-glow-2 { position: absolute; bottom: -10%; right: -5%; width: 50%; height: 70%; background: radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, transparent 70%); z-index: 1; pointer-events: none; }
.service-hero-video { width: 100%; max-width: 600px; border-radius: 20px; }

.service-collage-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}
.collage-card {
    background: #fff;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02), 0 2px 4px -1px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.8);
}
.collage-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px -5px rgba(11, 31, 77, 0.08), 0 8px 10px -5px rgba(11, 31, 77, 0.04);
    border-color: #1363C6;
}
.collage-card .icon-btn {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #f0f6ff;
    color: #1363C6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}
.collage-card:hover .icon-btn {
    background: #1363C6;
    color: #fff;
    transform: scale(1.05);
}
.collage-card h5 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0b1f4d;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}
.collage-card p {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    line-height: 1.6;
}
.collage-card .read-more {
    margin-top: auto;
    color: #1363C6;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s ease;
}
.collage-card:hover .read-more i { transform: translateX(4px); }
.portfolio-svg-icon { width: 24px; height: 24px; transition: transform 0.3s ease; }
.collage-card:hover .portfolio-svg-icon { transform: scale(1.1) rotate(5deg); }

.collage-hero {
    grid-column: span 8;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 242, 254, 0.94)) !important;
    border: 1.5px solid rgba(37, 99, 235, 0.3) !important;
    border-radius: 1.5rem !important;
    padding: 2.5rem;
    justify-content: center;
    box-shadow: 0 16px 45px rgba(37, 99, 235, 0.12) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.collage-hero h5 {
    color: #0A0F26 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.75rem;
    margin-bottom: 1rem;
    font-weight: 700 !important;
}
.collage-hero p {
    color: #3D486B !important;
    font-size: 1.05rem;
    opacity: 1 !important;
    max-width: 90%;
}
.collage-hero .icon-btn {
    background: linear-gradient(135deg, #2563EB, #8B5CF6) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3) !important;
}
.collage-hero .read-more {
    color: #2563EB !important;
    font-weight: 700 !important;
    margin-top: 1.5rem;
}
.collage-hero:hover {
    border-color: rgba(37, 99, 235, 0.6) !important;
    box-shadow: 0 25px 60px rgba(37, 99, 235, 0.22) !important;
    transform: translateY(-4px) !important;
}

.collage-card:not(.collage-hero) {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 244, 255, 0.92)) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    box-shadow: 0 12px 35px rgba(79, 70, 229, 0.08) !important;
    border-radius: 1.25rem !important;
}
.collage-card:not(.collage-hero) h5 {
    color: #0A0F26 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
}
.collage-card:not(.collage-hero) p {
    color: #3D486B !important;
}
.collage-card:not(.collage-hero) .read-more {
    color: #2563EB !important;
    font-weight: 600 !important;
}

.collage-span-4 { grid-column: span 4; }
.collage-span-5 { grid-column: span 5; }
.collage-span-6 { grid-column: span 6; }
.collage-span-7 { grid-column: span 7; }
.collage-span-8 { grid-column: span 8; }
.variant-card { background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 244, 255, 0.92)) !important; }

@media (max-width: 1199px) {
    .collage-hero p { max-width: 100%; }
}
@media (max-width: 991px) {
    .collage-hero, .collage-span-8, .collage-span-7, .collage-span-6, .collage-span-5 { grid-column: span 12; padding: 2rem; }
    .collage-span-4 { grid-column: span 6; }
}
@media (max-width: 767px) {
    .collage-span-4 { grid-column: span 12; }
}

/* API Developer Marketplace */
.hover-bg-light:hover { background: #f1f5f9; color: #1363C6 !important; }
.marketplace-card {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 20px;
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-decoration: none !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
}
.marketplace-card:hover {
    transform: translateY(-8px);
    border-color: #1363C6;
    box-shadow: 0 20px 25px -5px rgba(11, 31, 77, 0.08);
}
.icon-box-premium {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}
.icon-box-premium svg { width: 26px; height: 26px; }
.marketplace-card:hover .icon-box-premium { transform: scale(1.1) rotate(5deg); }
.api-title { font-size: 1.15rem; font-weight: 700; color: #0b1f4d; margin-bottom: 12px; }
.api-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 25px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.api-tag {
    font-size: 0.7rem;
    font-weight: 800;
    color: #1363C6;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.api-tag::before { content: ''; width: 6px; height: 6px; background: #1363C6; border-radius: 50%; }

/* ==========================================================================
   Component — AI Real Estate product page (hero, tabs, tour, blog, newsletter)
   ========================================================================== */
.btn-glass {
    background: rgba(255,255,255,0.05);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    transition: 0.3s;
}
.btn-glass:hover { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; transform: translateY(-3px); }

.hero-visual-wrapper { position: relative; padding: 40px; }
.service-icon-hero {
    width: 350px;
    height: 350px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(20px);
    border-radius: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 50px rgba(255,255,255,0.05), 0 40px 80px rgba(0,0,0,0.3);
}

@keyframes floating {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}
.floating-anim { animation: floating 6s ease-in-out infinite; }

.tour-section {
    background: linear-gradient(135deg, #0d1b5e 0%, #1a3a8f 100%);
    position: relative;
    overflow: hidden;
    padding: 100px 0;
}
.tour-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(21, 172, 225, 0.15) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.tour-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 40px;
    padding: 60px;
    transition: 0.4s;
}
.tour-card:hover {
    border-color: rgba(21, 172, 225, 0.4);
    transform: translateY(-10px);
    box-shadow: 0 40px 80px rgba(0,0,0,0.3);
}
.tour-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 30px 0;
}
.stat-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 20px;
    text-align: center;
}
.stat-box h3 { color: #15ACE1; font-weight: 800; margin-bottom: 5px; }
.stat-box p { font-size: 12px; color: #cbd5e1; margin: 0; }

.blog-section { background: #f8fafc; padding: 100px 0; }
.blog-card {
    background: #fff;
    border: none;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}
.blog-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 30px 60px rgba(19, 99, 198, 0.15);
}
.blog-img-wrap { position: relative; overflow: hidden; height: 240px; }
.blog-img-wrap img { transition: 0.6s; }
.blog-card:hover .blog-img-wrap img { transform: scale(1.1); }
.blog-date {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.newsletter-box {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 60px 40px;
    border-radius: 40px;
}
.newsletter-form-wrap {
    position: relative;
    margin-top: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.newsletter-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    padding: 20px 30px !important;
    border-radius: 100px !important;
    height: 70px !important;
    font-size: 16px !important;
}
.newsletter-input:focus { border-color: #15ACE1 !important; box-shadow: 0 0 0 5px rgba(21, 172, 225, 0.2) !important; }
.newsletter-submit {
    position: absolute;
    right: 10px;
    top: 10px;
    bottom: 10px;
    padding: 0 40px;
    border-radius: 100px;
    background: #15ACE1;
    border: none;
    color: #050b1a;
    font-weight: 700;
    transition: 0.3s;
}
.newsletter-submit:hover { background: #fff; transform: scale(1.05); }

/* ==========================================================================
   Component — Service Detail page (from service_details.php <style> blocks)
   Note: these rules use var(--primary)/var(--secondary)/var(--dark)/etc.,
   which on the service-details page resolve to that page's own :root
   override (retained inline there). On other pages these variables fall
   back to the global :root values defined at the top of this file.
   ========================================================================== */
.hero-svg-wrapper { width: 120px; height: 120px; z-index: 5; }
.hero-icon-blur { background: var(--primary); filter: blur(80px); width: 180px; height: 180px; opacity: 0.4; pointer-events: none; }

.detail-card {
    background: #fff;
    border-radius: 40px;
    border: 1px solid rgba(0,0,0,0.03);
    padding: 50px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.02);
    position: relative;
    margin-bottom: 40px;
}
.section-accent-title {
    font-weight: 800;
    font-size: 2.25rem;
    color: var(--dark);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.section-accent-title::before {
    content: '';
    width: 8px;
    height: 40px;
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    border-radius: 10px;
}
.feature-grid-item {
    background: var(--bg-soft);
    padding: 35px;
    border-radius: 30px;
    border: 1px solid #f1f5f9;
    transition: all 0.4s ease;
    height: 100%;
}
.feature-grid-item:hover {
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 25px 50px rgba(19, 99, 198, 0.08);
    transform: translateY(-8px);
}
.use-case-timeline { position: relative; padding-left: 20px; }
.use-case-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--primary), transparent);
}
.sidebar-card {
    background: #fff;
    border-radius: 35px;
    border: 1px solid #f1f5f9;
    padding: 40px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.03);
    position: sticky;
    top: 100px;
}
.tech-pill {
    background: #f1f5f9;
    color: #334155;
    padding: 10px 18px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid #e2e8f0;
    transition: 0.3s;
}
.tech-pill:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.benefit-fancy-item {
    background: #fff;
    padding: 15px 20px;
    border-radius: 16px;
    border: 1px solid #f1f5f9;
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
    transition: 0.3s;
}
.benefit-fancy-item:hover { border-color: var(--secondary); background: #f0fdff; transform: scale(1.02); }
.benefit-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: rgba(6, 182, 212, 0.1);
    color: var(--secondary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}
html:not([data-theme="dark"]) .cta-banner {
    background: linear-gradient(135deg, rgba(238, 242, 254, 0.96), rgba(240, 244, 255, 0.92)) !important;
    border: 1.5px solid rgba(37, 99, 235, 0.28) !important;
    border-radius: 2rem !important;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 16px 45px rgba(37, 99, 235, 0.12) !important;
    position: relative;
    overflow: hidden;
    margin-top: 40px;
}
html:not([data-theme="dark"]) .cta-banner h1,
html:not([data-theme="dark"]) .cta-banner h2,
html:not([data-theme="dark"]) .cta-banner h3,
html:not([data-theme="dark"]) .cta-banner h4,
html:not([data-theme="dark"]) .cta-banner h5,
html:not([data-theme="dark"]) .cta-banner h6 {
    color: #0A0F26 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
}
html:not([data-theme="dark"]) .cta-banner p,
html:not([data-theme="dark"]) .cta-banner .text-white-50 {
    color: #3D486B !important;
}
.cta-glow { position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(37, 99, 235, 0.08) 0%, transparent 70%); }

/* Related services "bento" grid (uses per-card --accent-color/--card-gradient
   custom properties set inline per card — see service_details.php) */
.bg-primary-soft {
    background: rgba(19, 99, 198, 0.08);
    letter-spacing: 0.1em;
    font-size: 0.75rem;
}
.fw-extrabold { font-weight: 800; }
.related-ai-section {
    background: radial-gradient(circle at top right, rgba(19, 99, 198, 0.03), transparent),
                radial-gradient(circle at bottom left, rgba(6, 182, 212, 0.03), transparent),
                #ffffff;
    position: relative;
    overflow: hidden;
}
.bento-card {
    text-decoration: none !important;
    display: block;
    height: 100%;
    background: #fff;
    border-radius: 32px;
    padding: 40px;
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0,0,0,0.05);
}
.bento-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 32px;
    padding: 2px;
    background: linear-gradient(135deg, var(--accent-color), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.bento-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 30px 60px rgba(var(--accent-color), 0.12);
    border-color: transparent;
}
.bento-card:hover::after { opacity: 1; }
.card-content { position: relative; z-index: 2; }
.icon-box {
    width: 70px;
    height: 70px;
    background: #f8fafc;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    position: relative;
    transition: all 0.5s ease;
}
.icon-box i { font-size: 1.8rem; color: var(--accent-color); z-index: 2; transition: all 0.5s ease; }
.svg-icon-wrapper { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; z-index: 2; transition: all 0.5s ease; }
.svg-icon-wrapper svg { width: 100%; height: 100%; }
.icon-blob {
    position: absolute;
    inset: 0;
    background: var(--card-gradient);
    border-radius: inherit;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}
.bento-card:hover .icon-blob { opacity: 1; transform: scale(1); }
.bento-card:hover .icon-box i { color: #fff; transform: rotate(10deg); }
.card-title { color: #1a202c; font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; transition: color 0.3s ease; }
.card-text { color: #64748b; font-size: 1rem; line-height: 1.7; margin-bottom: 30px; }
.card-footer-action { display: flex; align-items: center; gap: 15px; }
.action-text { font-weight: 700; color: var(--accent-color); font-size: 0.95rem; transition: all 0.3s ease; }
.arrow-circle {
    width: 36px;
    height: 36px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-card:hover .arrow-circle { background: var(--card-gradient); color: #fff; transform: translateX(5px); }
.bento-card:hover .action-text { letter-spacing: 0.5px; }

/* Final CTA Section — Luminous Light White Glass Card */
.final-cta-section { background: transparent !important; }
html:not([data-theme="dark"]) .premium-cta-card {
    background: linear-gradient(135deg, rgba(238, 242, 254, 0.96), rgba(240, 244, 255, 0.92)) !important;
    border-radius: 2rem !important;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 50px rgba(37, 99, 235, 0.12) !important;
    border: 1.5px solid rgba(37, 99, 235, 0.28) !important;
    backdrop-filter: blur(20px) !important;
}
.cta-content-wrapper {
    background: transparent !important;
    border: none !important;
}
html:not([data-theme="dark"]) .premium-cta-card h1,
html:not([data-theme="dark"]) .premium-cta-card h2,
html:not([data-theme="dark"]) .premium-cta-card h3,
html:not([data-theme="dark"]) .premium-cta-card h4,
html:not([data-theme="dark"]) .premium-cta-card .text-white {
    color: #0A0F26 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
}
html:not([data-theme="dark"]) .premium-cta-card p,
html:not([data-theme="dark"]) .premium-cta-card .text-white-50 {
    color: #3D486B !important;
    font-size: 1.1rem !important;
}
.cta-icon-wrapper {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(139, 92, 246, 0.18)) !important;
    border: 1px solid rgba(37, 99, 235, 0.25) !important;
    color: #2563EB !important;
    border-radius: 22px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12) !important;
}
    justify-content: center;
    font-size: 2rem;
    transform: rotate(-10deg);
}
.cta-blob {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    z-index: 1;
}
.cta-blob-1 { background: var(--primary); top: -200px; left: -100px; }
.cta-blob-2 { background: var(--secondary); bottom: -200px; right: -100px; }
.btn-outline-custom {
    border: 2px solid rgba(255,255,255,0.2);
    color: #fff;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
}
.btn-outline-custom:hover {
    background: #fff;
    color: var(--dark);
    border-color: #fff;
    transform: translateY(-5px);
}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-control { border-radius: 8px; }
.form-group { margin-bottom: 1rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .blur-orb-green-400,
    .blur-orb-primary-400-strong,
    .blur-orb-primary-400,
    .blur-orb-cyan-350,
    .blur-orb-cyan-300 { display: none; }
}

/* ===== Component — Homepage (index.php) ===== */
#hero-video-section {
    background:
        radial-gradient(circle at top left, rgba(32, 92, 255, 0.14), transparent 28%),
        radial-gradient(circle at 82% 22%, rgba(41, 150, 255, 0.18), transparent 22%),
        linear-gradient(135deg, #030814 0%, #081120 48%, #050b17 100%);
    color: #fff;
}

.hero-banner-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-banner-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(89, 142, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(89, 142, 255, 0.08) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 92%);
    opacity: 0.24;
}

.hero-banner-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
}

.hero-banner-glow-one {
    width: 360px;
    height: 360px;
    top: 6%;
    right: 18%;
    background: rgba(37, 117, 255, 0.22);
}

.hero-banner-glow-two {
    width: 280px;
    height: 280px;
    bottom: 10%;
    left: 5%;
    background: rgba(0, 183, 255, 0.12);
}

.hero-banner-shell {
    position: relative;
    z-index: 1;
   /* padding-top: 2.5rem;*/
    padding-bottom: 1.25rem;
}

.hero-banner-main {
    min-height: 630px;
}

.hero-banner-copy {
    max-width: 620px;
}

.hero-banner-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(102, 164, 255, 0.24);
    border-radius: 999px;
    background: rgba(8, 18, 40, 0.82);
    color: #dce8ff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-banner-pill-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4ba3ff, #91f2ff);
    box-shadow: 0 0 18px rgba(96, 190, 255, 0.7);
}

.hero-banner-title {
    margin: 0 0 1.5rem;
    font-size: clamp(3rem, 5.1vw, 4.75rem);
    line-height: 1.07;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: #f8fbff;
}

.hero-banner-title span {
    display: block;
    background: linear-gradient(90deg, #2f7dff 0%, #8a56ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-banner-title em {
    font-style: normal;
    background: linear-gradient(90deg, #3e8bff 0%, #8a56ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-banner-text {
    margin-bottom: 1.75rem;
    color: rgba(230, 238, 252, 0.74);
    font-size: 1rem;
    line-height: 1.9;
    max-width: 540px;
}

.hero-banner-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.hero-banner-tags span {
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(119, 167, 255, 0.16);
    color: #d7e6ff;
    font-size: 0.88rem;
    font-weight: 600;
}

.hero-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.hero-banner-btn {
    min-width: 215px;
    padding: 0.95rem 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid transparent;
}

.hero-banner-btn-primary {
    background: linear-gradient(90deg, #2a73ff 0%, #7b4dff 100%);
    color: #fff;
    box-shadow: 0 18px 38px rgba(73, 76, 255, 0.34);
}

.hero-banner-btn-secondary {
    background: rgba(8, 15, 31, 0.42);
    color: #fff;
    border-color: rgba(142, 109, 255, 0.45);
}

.hero-banner-proof p {
    margin-bottom: 0.85rem;
    color: rgba(226, 235, 248, 0.68);
    font-size: 0.95rem;
}

.hero-banner-proof-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hero-banner-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 640px;
    isolation: isolate;
    overflow: hidden;
}

.hero-banner-visual::before {
    content: "";
    position: absolute;
    inset: 10% 4% 12%;
    border-radius: 44px;
    background:
        radial-gradient(circle at 50% 48%, rgba(44, 119, 255, 0.3), transparent 34%),
        radial-gradient(circle at 84% 22%, rgba(66, 176, 255, 0.16), transparent 20%),
        radial-gradient(circle at 16% 28%, rgba(66, 176, 255, 0.16), transparent 20%);
    filter: blur(32px);
    z-index: -1;
}

.hero-banner-visual-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, #07101f 0%, transparent 14%, transparent 86%, #07101f 100%),
        linear-gradient(180deg, #07101f 0%, transparent 12%, transparent 88%, #07101f 100%);
    pointer-events: none;
}

.hero-banner-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: 0.5rem;
    border: 1px solid rgba(102, 152, 235, 0.12);
    border-radius: 20px;
    overflow: hidden;
    background: rgba(81, 126, 204, 0.14);
    box-shadow: 0 20px 48px rgba(2, 8, 28, 0.24);
}

.hero-banner-stat {
    padding: 1.7rem 1.25rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(13, 20, 39, 0.96), rgba(9, 15, 31, 0.96));
}

.hero-banner-stat strong {
    display: block;
    margin-bottom: 0.35rem;
    color: #5a8dff;
    font-size: 2rem;
    line-height: 1;
}

.hero-banner-stat span {
    color: rgba(225, 233, 248, 0.72);
    font-size: 0.95rem;
}

@media (max-width: 991px) {
    .hero-banner-shell {
        padding-top: 2rem;
        padding-bottom: 2.5rem;
    }

    .hero-banner-main {
        min-height: auto;
    }

    .hero-banner-visual {
        min-height: auto;
        margin-top: 0.25rem;
    }

    .hero-banner-visual-image {
        width: 100%;
        max-width: 100%;
        transform: none;
    }

    .hero-banner-copy {
        margin: 0 auto;
    }

    .hero-banner-title {
        font-size: clamp(2.3rem, 9vw, 3.5rem);
    }

    .hero-banner-text {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-banner-tags,
    .hero-banner-actions,
    .hero-banner-proof-logos {
        justify-content: center;
    }

    .hero-banner-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .hero-banner-pill {
        font-size: 0.7rem;
        letter-spacing: 0.05em;
    }

    .hero-banner-actions {
        flex-direction: column;
    }

    .hero-banner-btn {
        width: 100%;
        min-width: 0;
    }

    .hero-banner-stats {
        grid-template-columns: 1fr;
    }
}

.ai-dev-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
}

.ai-dev-card .img-wrapper {
    height: 160px;
    overflow: hidden;
    border-radius: 15px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(19, 99, 198, 0.05) 0%, rgba(21, 172, 225, 0.05) 100%);
    position: relative;
}

.ai-service-icon {
    width: 100px;
    height: 100px;
    transition: all 0.5s ease;
    filter: drop-shadow(0 10px 15px rgba(19, 99, 198, 0.1));
}

.ai-dev-card:hover .ai-service-icon {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 15px 25px rgba(19, 99, 198, 0.2));
}

.industry-card {
    border: 1px solid #eef2f6 !important;
    background: #ffffff;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-radius: 20px !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.industry-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(19, 99, 198, 0.03) 0%, rgba(21, 172, 225, 0.03) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.industry-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(11, 31, 77, 0.08) !important;
    border-color: rgba(19, 99, 198, 0.2) !important;
}

.industry-card:hover::before {
    opacity: 1;
}

.industry-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
    transition: transform 0.4s ease;
    display: inline-block;
}

.industry-card:hover .industry-icon {
    transform: scale(1.1) rotate(2deg);
}

.transition-all {
    transition: all 0.3s ease;
}

.product-item {
    background: #ffffff;
    border: 1px solid #eee !important;
}

.product-item:hover {
    border-color: #1363C6 !important;
    transform: translateY(-5px);
    background: #f8faff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15) !important;
}

.about-newsletter-box {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 60px 40px;
    border-radius: 40px;
}
.about-newsletter-wrap { position: relative; margin-top: 40px; max-width: 600px; margin-left: auto; margin-right: auto; }
.about-newsletter-input { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.2) !important; color: #fff !important; padding: 20px 30px !important; border-radius: 100px !important; height: 70px !important; font-size: 16px !important; }
.about-newsletter-input:focus { border-color: #15ACE1 !important; box-shadow: 0 0 0 5px rgba(21,172,225,0.2) !important; }
.about-newsletter-submit { position: absolute; right: 10px; top: 10px; bottom: 10px; padding: 0 40px; border-radius: 100px; background: #15ACE1; border: none; color: #050b1a; font-weight: 700; transition: 0.3s; cursor: pointer; }
.about-newsletter-submit:hover { background: #fff; transform: scale(1.05); }
.about-newsletter-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.newsletter-msg {
    margin-top: 20px;
    padding: 16px 24px;
    border-radius: 16px;
    font-weight: 600;
    font-size: 15px;
    display: none;
    animation: fadeSlideUp 0.5s ease;
}
.newsletter-msg.success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #10b981;
    display: block;
}
.newsletter-msg.error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    display: block;
}
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Static rules from index.php inline style="" attributes */
.box-60-process { width: 60px; height: 60px; font-weight: 700; font-size: 1.25rem; }
.mt-10pct { margin-top: 10%; }

/* ==========================================================================
   Component — Site Footer (include/footer.php): WhatsApp button,
   AI chatbot widget, notification badge, reCAPTCHA badge override.
   Note: this CSS contains an internal duplicate rule set in the original
   inline <style> block (the .message ... .ai-send-btn:disabled family was
   declared twice, byte-for-byte identical). It is reproduced as-is below
   to guarantee zero rendering change; de-duplicating it is a safe follow-up
   cleanup flagged in the audit report, not done here to avoid risk on this
   shared, sitewide component.
   ========================================================================== */
    /* Hide reCAPTCHA */
    .grecaptcha-badge {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* WHATSAPP - LEFT BOTTOM (Professional Design) */
    .whatsapp-container {
        position: fixed;
        bottom: 25px;
        left: 25px;
        z-index: 1002;
    }

    .whatsapp-btn {
        position: relative;
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white !important;
        font-size: 28px;
        box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
        text-decoration: none !important;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: 4px solid rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(20px);
        overflow: hidden;
    }

    .whatsapp-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.6s ease;
    }

    .whatsapp-btn:hover::before {
        width: 120%;
        height: 120%;
    }

    .whatsapp-btn:hover {
        transform: translateY(-12px) scale(1.1);
        box-shadow: 0 20px 40px rgba(37, 211, 102, 0.6);
    }

    .whatsapp-tooltip {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        margin-bottom: 10px;
    }

    .whatsapp-tooltip::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #333;
    }

    .whatsapp-btn:hover .whatsapp-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(-5px);
    }

    /* PROFESSIONAL AI CHATBOT - RIGHT BOTTOM */

    #ai-agent-container {
        position: fixed !important;
        bottom: 25px !important;
        right: 25px !important;
        z-index: 2147483647 !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .ai-agent-toggle {
        width: 72px;
        height: 72px;
        border-radius: 24px;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1e40af !important;
        font-size: 22px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: 2px solid #f1f5f9;
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(20px);
    }

    .ai-agent-toggle:hover {
        transform: translateY(-10px) scale(1.08);
        box-shadow: 0 35px 60px rgba(30, 64, 175, 0.4), 0 0 0 1px rgba(59, 130, 246, 0.8);
    }

    .ai-icon {
        transition: transform 0.3s ease;
    }

    .ai-agent-toggle:hover .ai-icon {
        transform: scale(1.2) rotate(10deg);
    }

    /* CERTIFICATION BADGES - FIXED, STACKED ABOVE AI CHAT BUTTON */
    .certification-badges {
        position: fixed;
        bottom: 112px;
        right: 25px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-end;
        z-index: 2147483000;
    }

    .cert-badge {
        max-height: 40px;
        width: auto;
        object-fit: contain;
    }

    .cert-badge-mccia {
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        padding: 4px 8px;
    }

    .cert-badge-dpiit {
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        background: #fff;
        padding: 2px;
    }

    .cert-badge-msme {
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        background: #fff;
        padding: 4px 8px;
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    .cert-badge-msme:hover {
        transform: scale(1.05);
    }

    .notification-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 12px;
        height: 12px;
        background: var(--ai-success);
        border-radius: 50%;
        border: 2px solid white;
        animation: pulse-glow 2s infinite;
    }

    @keyframes pulse-glow {
        0% {
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8);
        }

        70% {
            box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
        }
    }

    /* Chat Panel */
    .ai-chat-panel {
        position: absolute;
        bottom: 90px;
        right: 0;
        width: 380px;
        height: 520px;
        background: var(--ai-bg);
        border-radius: 28px;
        box-shadow: var(--ai-shadow);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        opacity: 0;
        transform: scale(0.9) translateY(25px);
        pointer-events: none;
        transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
        backdrop-filter: blur(25px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .ai-chat-panel.active {
        opacity: 1;
        transform: scale(1) translateY(0);
        pointer-events: all;
    }

    /* Header */
    .ai-header {
        background: var(--ai-primary);
        padding: 24px 24px 20px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }

    .ai-header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    }

    .ai-header-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .ai-avatar {
        width: 52px;
        height: 52px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        flex-shrink: 0;
    }

    .ai-info h3 {
        margin: 0 0 4px 0;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.5px;
    }

    .ai-status {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        opacity: 0.95;
        font-weight: 500;
    }

    .status-dot {
        width: 10px;
        height: 10px;
        background: var(--ai-success);
        border-radius: 50%;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
        animation: status-pulse 2s infinite;
    }

    @keyframes status-pulse {

        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: 0.6;
            transform: scale(1.1);
        }
    }

    .ai-header-right {
        display: flex;
        gap: 8px;
    }

    .ai-action-btn {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: none;
        background: rgba(255, 255, 255, 0.15);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1);
        backdrop-filter: blur(10px);
        font-size: 14px;
    }

    .ai-action-btn:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: scale(1.1) translateY(-2px);
    }

    /* Messages */
    .ai-messages {
        flex: 1;
        padding: 28px 24px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    }

    .ai-messages::-webkit-scrollbar {
        width: 4px;
    }

    .ai-messages::-webkit-scrollbar-track {
        background: transparent;
    }

    .ai-messages::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 2px;
    }

    .message {
        display: flex;
        gap: 12px;
        max-width: 85%;
        animation: messageSlide 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    @keyframes messageSlide {
        from {
            opacity: 0;
            transform: translateY(20px) scale(0.95);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .message-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        flex-shrink: 0;
    }

    .message.ai .message-avatar {
        background: rgba(59, 130, 246, 0.2);
        color: #3b82f6;
    }

    .message.user .message-avatar {
        background: rgba(6, 182, 212, 0.3);
        color: #06b6d4;
        margin-left: auto;
    }

    .message-content {
        padding: 16px 20px;
        border-radius: 20px;
        font-size: 13px;
        line-height: 1.6;
        font-weight: 500;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .message.ai .message-content {
        background: rgba(59, 130, 246, 0.12);
        color: var(--ai-text);
        border-bottom-left-radius: 8px;
    }

    .message.user .message-content {
        background: linear-gradient(135deg, #06b6d4, #0891b2);
        color: white;
        border-bottom-right-radius: 8px;
        margin-left: auto;
    }

    /* Typing Indicator */
    .typing-container {
        display: flex;
        gap: 12px;
    }

    .typing-dots {
        display: flex;
        gap: 4px;
        padding: 12px 16px;
        background: rgba(59, 130, 246, 0.12);
        border-radius: 20px;
        border-bottom-left-radius: 8px;
    }

    .typing-dot {
        width: 8px;
        height: 8px;
        background: #64748b;
        border-radius: 50%;
        animation: typingBounce 1.4s infinite both;
    }

    .typing-dot:nth-child(1) {
        animation-delay: -0.32s;
    }

    .typing-dot:nth-child(2) {
        animation-delay: -0.16s;
    }

    @keyframes typingBounce {

        0%,
        80%,
        100% {
            transform: scale(0);
        }

        40% {
            transform: scale(1);
        }
    }

    /* Input Area */
    .ai-input-container {
        padding: 24px;
        display: flex;
        gap: 12px;
        background: white;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .ai-input {
        flex: 1;
        border: 2px solid rgba(0, 0, 0, 0.08);
        padding: 16px 20px;
        border-radius: 20px;
        outline: none;
        font-size: 13px;
        font-weight: 500;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1);
        background: white;
    }

    .ai-input:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
        transform: translateY(-2px);
    }

    .ai-send-btn {
        width: 52px;
        height: 52px;
        border-radius: 20px;
        background: var(--ai-primary);
        color: white;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1);
        font-size: 16px;
        flex-shrink: 0;
    }

    .ai-send-btn:hover:not(:disabled) {
        background: var(--ai-primary-dark);
        transform: scale(1.08) rotate(10deg);
    }

    .ai-send-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .whatsapp-container {
            bottom: 25px !important;
            left: 20px !important;
        }

        #ai-agent-container {
            bottom: 15px !important;
            right: 15px !important;
        }

        .certification-badges {
            bottom: 95px !important;
            right: 15px !important;
            gap: 8px !important;
        }

        .cert-badge {
            max-height: 30px !important;
        }

        .ai-chat-panel.active {
            width: calc(100vw - 30px) !important;
            height: 75vh !important;
            right: 15px !important;
            bottom: 85px !important;
        }

        .ai-chat-panel {
            right: 0 !important;
        }
    }

    /* Hide old WhatsApp */
    .frWhatsappBtnn {
        background: transparent;
    }

    .ai-messages::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 2px;
    }

    .message {
        display: flex;
        gap: 12px;
        max-width: 85%;
        animation: messageSlide 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    @keyframes messageSlide {
        from {
            opacity: 0;
            transform: translateY(20px) scale(0.95);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .message-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        flex-shrink: 0;
    }

    .message.ai .message-avatar {
        background: rgba(59, 130, 246, 0.2);
        color: #3b82f6;
    }

    .message.user .message-avatar {
        background: rgba(6, 182, 212, 0.3);
        color: #06b6d4;
        margin-left: auto;
    }

    .message-content {
        padding: 16px 20px;
        border-radius: 20px;
        font-size: 13px;
        line-height: 1.6;
        font-weight: 500;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .message.ai .message-content {
        background: rgba(59, 130, 246, 0.12);
        color: var(--ai-text);
        border-bottom-left-radius: 8px;
    }

    .message.user .message-content {
        background: linear-gradient(135deg, #06b6d4, #0891b2);
        color: white;
        border-bottom-right-radius: 8px;
        margin-left: auto;
    }

    /* Typing Indicator */
    .typing-container {
        display: flex;
        gap: 12px;
    }

    .typing-dots {
        display: flex;
        gap: 4px;
        padding: 12px 16px;
        background: rgba(59, 130, 246, 0.12);
        border-radius: 20px;
        border-bottom-left-radius: 8px;
    }

    .typing-dot {
        width: 8px;
        height: 8px;
        background: #64748b;
        border-radius: 50%;
        animation: typingBounce 1.4s infinite both;
    }

    .typing-dot:nth-child(1) {
        animation-delay: -0.32s;
    }

    .typing-dot:nth-child(2) {
        animation-delay: -0.16s;
    }

    @keyframes typingBounce {

        0%,
        80%,
        100% {
            transform: scale(0);
        }

        40% {
            transform: scale(1);
        }
    }

    /* Input Area */
    .ai-input-container {
        padding: 24px;
        display: flex;
        gap: 12px;
        background: white;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .ai-input {
        flex: 1;
        border: 2px solid rgba(0, 0, 0, 0.08);
        padding: 16px 20px;
        border-radius: 20px;
        outline: none;
        font-size: 13px;
        font-weight: 500;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1);
        background: white;
    }

    .ai-input:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
        transform: translateY(-2px);
    }

    .ai-send-btn {
        width: 52px;
        height: 52px;
        border-radius: 20px;
        background: var(--ai-primary);
        color: white;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1);
        font-size: 16px;
        flex-shrink: 0;
    }

    .ai-send-btn:hover:not(:disabled) {
        background: var(--ai-primary-dark);
        transform: scale(1.08) rotate(10deg);
    }

    .ai-send-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .whatsapp-container {
            bottom: 25px !important;
            left: 20px !important;
        }

        #ai-agent-container {
            bottom: 15px !important;
            right: 15px !important;
        }

        .certification-badges {
            bottom: 95px !important;
            right: 15px !important;
            gap: 8px !important;
        }

        .cert-badge {
            max-height: 30px !important;
        }

        .ai-chat-panel.active {
            width: calc(100vw - 30px) !important;
            height: 75vh !important;
            right: 15px !important;
            bottom: 85px !important;
        }

        .ai-chat-panel {
            right: 0 !important;
        }
    }

    /* Hide old WhatsApp */
    .frWhatsappBtnn {
        display: none !important;
    }

/* ===== Component — AI Automation for Businesses India (blog article) ===== */
.hover-shadow:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.custom-list li { margin-bottom: 0.8rem; }
.post-content p { margin-bottom: 1.5rem; }
.hover-primary:hover { color: #1363c6 !important; }
.sticky-sidebar { position: sticky; top: 100px; }
.cta-banner-blog { background: #0f172a; border-radius: 30px; }
.featured-img-wrapper img { transition: transform 0.5s ease; }
.featured-img-wrapper:hover img { transform: scale(1.05); }
.custom-accordion .accordion-button:not(.collapsed) { background-color: rgba(19, 99, 198, 0.05); color: #1363c6; }

/* ===== Component — Product Development Services page ===== */
.pd-offer-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.pd-offer-link .team-item {
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    border: 1px solid transparent;
}
.pd-offer-link:hover .team-item {
    transform: translateY(-6px);
    border-color: #1363C6;
    box-shadow: 0 14px 30px rgba(19, 99, 198, 0.15);
}

/* ===== Component — FAQ page ===== */
.faq-section {
    background-color: #f8fafc;
    position: relative;
}
.faq-card {
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}
.faq-card:hover {
    box-shadow: 0 10px 25px rgba(11, 31, 77, 0.08);
    transform: translateY(-2px);
    border-color: rgba(19, 99, 198, 0.2);
}
.faq-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #1363C6, #15ACE1);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.accordion-button:not(.collapsed) {
    background: transparent !important;
    box-shadow: none !important;
    color: #1363C6 !important;
}
.accordion-button:not(.collapsed) .faq-icon {
    transform: rotate(45deg);
    background: #1363C6;
    color: #fff;
}
.accordion-button:focus {
    box-shadow: none !important;
}
.faq-card .accordion-button {
    padding: 24px 30px;
    font-weight: 600;
    font-size: 1.1rem;
    color: #0b1f4d;
    background: transparent;
    border: none;
}
.faq-card .accordion-button::after {
    display: none;
}
.faq-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
    font-size: 14px;
    transition: all 0.4s ease;
    margin-left: auto;
    flex-shrink: 0;
}
.faq-card .accordion-body {
    padding: 0 30px 24px 30px;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.7;
    background: transparent;
}
.faq-card:has(.accordion-button:not(.collapsed))::before {
    opacity: 1;
}

/* ===== Component — Software Development / AI Integration pages ===== */
.ai-dev-link, .ai-int-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.ai-dev-link .team-item, .ai-int-link .team-item {
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    border: 1px solid transparent;
}
.ai-dev-link:hover .team-item, .ai-int-link:hover .team-item {
    transform: translateY(-6px);
    border-color: #1363C6;
    box-shadow: 0 14px 30px rgba(19, 99, 198, 0.15);
}

/* ===== Component — Terms & Conditions page ===== */
.terms-sidebar .nav-link {
    color: #64748b;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 10px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    font-size: 0.95rem;
}
.terms-sidebar .nav-link:hover {
    background: #f1f5f9;
    color: #1363C6;
}
.terms-sidebar .nav-link.active {
    background: #eff6ff;
    color: #1363C6;
    border-left-color: #1363C6;
    font-weight: 700;
}
.term-card {
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
    margin-bottom: 2rem;
    transition: all 0.3s ease;
    position: relative;
}
.term-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.04);
    border-color: #e2e8f0;
}
.term-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0b1f4d;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.term-card p, .term-card li {
    color: #64748b;
    line-height: 1.7;
    font-size: 1.05rem;
}
.term-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #eff6ff;
    color: #1363C6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.term-card ul {
    padding-left: 1.25rem;
    margin-bottom: 0;
}
.term-card ul li {
    margin-bottom: 0.75rem;
}
.sidebar-sticky {
    position: sticky;
    top: 100px;
    z-index: 10;
}
/* term-icon highlighted variant (Contact section) */
.term-icon-primary {
    background: #1363C6;
    color: #fff;
}
/* term-card highlighted border variant (Contact section) */
.term-card-bordered-primary {
    border-left: 5px solid #1363C6;
}

/* ===== Component — Privacy Policy page ===== */
.privacy-sidebar .nav-link {
    color: #64748b;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 10px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    font-size: 0.95rem;
}
.privacy-sidebar .nav-link:hover {
    background: #f1f5f9;
    color: #1363C6;
}
.privacy-sidebar .nav-link.active {
    background: #f0fdf4;
    color: #15803d;
    border-left-color: #28A745;
    font-weight: 700;
}
.policy-card {
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}
.policy-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.04);
    border-color: #e2e8f0;
}
.policy-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0b1f4d;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.policy-card h5 {
    color: #334155;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}
.policy-card p, .policy-card li {
    color: #64748b;
    line-height: 1.7;
    font-size: 1.05rem;
}
.policy-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f0fdf4;
    color: #28A745;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.policy-card ul {
    padding-left: 1.25rem;
    margin-bottom: 0;
}
.policy-card ul li {
    margin-bottom: 0.75rem;
}
/* policy-icon/card highlighted green variant (Contact section) */
.policy-icon-success {
    background: #28A745;
    color: #fff;
}
.policy-card-bordered-success {
    border-left: 5px solid #28A745;
}
/* orb variant: green primary (privacy hero) */
.blur-orb-green-400 {
    width: 400px;
    height: 400px;
    background: rgba(40, 167, 69, 0.1);
    filter: blur(80px);
    top: -200px;
    left: -100px;
}

/* ===== Component — Certificate section (homepage) ===== */
.cert-section {
    background: linear-gradient(135deg, #0b1f4d 0%, #031534 100%);
    padding: 48px 0;
}
.cert-section-label {
    text-align: center;
    color: rgba(255,255,255,0.5);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 28px;
}
.cert-card {
    background: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    overflow: hidden;
}
.cert-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    transform: translateY(-4px);
}
.cert-card img {
    max-height: 90px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.cert-card:hover img {
    transform: scale(1.05);
}

/* ===== Component — Testimonial client logo box ===== */
.testimonial-logo-box {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6px;
}
.testimonial-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   GLOBAL PRISM DESIGN SYSTEM — SUBPAGE THEME HARMONIZATION
   Applies the homepage "Prism" design language (luminous ambient mesh canvas,
   Space Grotesk typography, glass cards, gradient buttons) to all subpages.
   ========================================================================== */

/* 1. Global Page Background Canvas */
html:not([data-theme="dark"]) body {
    background: linear-gradient(180deg, #F0F4FE, #EAEFFF 50%, #F3EDFF) !important;
    color: #3D486B !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* 2. Subpage Hero Headers (.header-ai, .hero-header, .bg-primary.hero-header) */
html:not([data-theme="dark"]) .header-ai,
html:not([data-theme="dark"]) .hero-header,
html:not([data-theme="dark"]) .bg-primary.hero-header,
html:not([data-theme="dark"]) .service-header,
html:not([data-theme="dark"]) .page-header {
    background:
        radial-gradient(45rem 30rem at 20% 20%, rgba(37, 99, 235, 0.18), transparent 60%),
        radial-gradient(40rem 30rem at 80% 80%, rgba(139, 92, 246, 0.18), transparent 60%),
        linear-gradient(180deg, #EEF2FE, #EAEFFF 50%, #F3EDFF) !important;
    color: #0A0F26 !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.18) !important;
}
.header-ai::before,
.hero-header::before {
    display: none !important;
}

/* Hero Titles & Typography */
.header-ai h1,
.hero-header h1,
.service-header h1,
.page-header h1,
.header-ai .display-4,
.hero-header .display-4 {
    color: #0A0F26 !important;
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
}
.header-ai p,
.hero-header p,
.service-header p,
.page-header p,
.header-ai .fs-5,
.hero-header .fs-5 {
    color: #3D486B !important;
}

/* Breadcrumb Navigation on Subpages */
.breadcrumb-item,
.breadcrumb-item a {
    color: #4F46E5 !important;
    font-weight: 600 !important;
}
.breadcrumb-item.active {
    color: #0A0F26 !important;
    font-weight: 700 !important;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: #8B5CF6 !important;
}

/* 3. Subpage Glass Cards & Content Sections */
.card,
.bg-light,
.service-item,
.feature-item,
.testimonial-item,
.tech-stack-card,
.process-step-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 244, 255, 0.92)) !important;
    border: 1px solid rgba(139, 92, 246, 0.18) !important;
    box-shadow: 0 16px 40px rgba(79, 70, 229, 0.08) !important;
    border-radius: 1.25rem !important;
}

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.service-item h4, .feature-item h5, .process-step-card h5 {
    color: #0A0F26 !important;
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-weight: 700 !important;
}

/* 4. Buttons Across All Subpages */
.btn-primary,
.btn-dark {
    background: linear-gradient(110deg, #2563EB, #8B5CF6 55%, #06B6D4 125%) !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 28px rgba(79, 70, 229, 0.35) !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.8rem !important;
    transition: all 0.25s ease !important;
}
.btn-primary:hover,
.btn-dark:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 40px rgba(139, 92, 246, 0.48) !important;
}

.btn-outline-light:not(.btn-social),
.btn-outline-primary,
.btn-light {
    background: #FFFFFF !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    color: #0A0F26 !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(23, 37, 84, 0.08) !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.8rem !important;
    transition: all 0.25s ease !important;
}
.btn-outline-light:not(.btn-social):hover,
.btn-outline-primary:hover,
.btn-light:hover {
    transform: translateY(-2px) !important;
    border-color: #2563EB !important;
    color: #2563EB !important;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.18) !important;
}

/* 5. Subpage Pills & Badges */
.badge,
.bg-info,
.rounded-pill:not(.nav-cta) {
    background: rgba(37, 99, 235, 0.08) !important;
    color: #2563EB !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    font-weight: 600 !important;
}

/* 6. Footer Dark Cinema Theme & Glass Social Buttons */
.footer {
    background: linear-gradient(180deg, #070B1E 0%, #050818 60%, #030511 100%) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-top: 1px solid rgba(139, 92, 246, 0.35) !important;
}
.footer h5 {
    color: #FFFFFF !important;
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}
.footer p, .footer span {
    color: #94A3B8 !important;
}
.footer a.btn-link {
    color: #CBD5E1 !important;
    transition: all 0.25s ease !important;
}
.footer a.btn-link:hover {
    color: #38BDF8 !important;
    padding-left: 6px !important;
}

/* Footer Glass Social Icon Buttons */
.footer a.btn-social,
.footer .btn-social,
a.btn.btn-social {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    margin-right: 0.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s ease !important;
}
.footer a.btn-social i,
.footer .btn-social i,
a.btn.btn-social i {
    font-size: 1.1rem !important;
    color: #FFFFFF !important;
    margin: 0 !important;
}
.footer a.btn-social:hover,
.footer .btn-social:hover,
a.btn.btn-social:hover {
    background: linear-gradient(135deg, #2563EB, #8B5CF6) !important;
    border-color: rgba(139, 92, 246, 0.8) !important;
    color: #FFFFFF !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.6) !important;
}

/* ==========================================================================
   STRICT AMBIENT CANVAS — NO FLAT WHITE BACKGROUNDS ON ANY PAGE (LIGHT MODE)
   ========================================================================== */
html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) main,
html:not([data-theme="dark"]) #main-content,
html:not([data-theme="dark"]) section,
html:not([data-theme="dark"]) .container-fluid:not(.footer):not(#sticky-cta-bar):not(.da-nav):not(.da-header-sticky),
html:not([data-theme="dark"]) .bg-white:not(.footer *):not(.footer),
html:not([data-theme="dark"]) .bg-light:not(.footer *):not(.footer),
html:not([data-theme="dark"]) .bg-light-subtle:not(.footer *):not(.footer),
html:not([data-theme="dark"]) .bg-soft:not(.footer *):not(.footer),
html:not([data-theme="dark"]) .py-5.container-fluid:not(.footer),
html:not([data-theme="dark"]) .pt-5.container-fluid:not(.footer),
html:not([data-theme="dark"]) .pb-5.container-fluid:not(.footer),
html:not([data-theme="dark"]) #details,
html:not([data-theme="dark"]) #da-demo-section,
html:not([data-theme="dark"]) .da-band:not(.da-band--dark),
html:not([data-theme="dark"]) .da-page {
    background:
        radial-gradient(45rem 30rem at 20% 20%, rgba(37, 99, 235, 0.18), transparent 60%),
        radial-gradient(40rem 30rem at 80% 80%, rgba(139, 92, 246, 0.18), transparent 60%),
        linear-gradient(180deg, #EEF2FE, #EAEFFF 50%, #F3EDFF) !important;
}

/* ==========================================================================
   OWL CAROUSEL & TESTIMONIAL LOGO OVERRIDE — PREVENT 100% IMAGE STRETCHING
   ========================================================================== */
.owl-carousel .owl-item .testimonial-item img,
.owl-carousel .owl-item .testimonialLogoss img,
.owl-carousel .owl-item .d-flex img,
.owl-carousel .owl-item img.img-fluid,
.testimonial-carousel img,
.testimonial-item img,
.testimonialLogoss img,
.da-ava {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    object-fit: contain !important;
    display: inline-block !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    padding: 3px !important;
    box-shadow: 0 4px 12px rgba(23, 37, 84, 0.12) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   GLOBAL HIGH-CONTRAST TYPOGRAPHY — ENSURE 100% LEGIBILITY EVERYWHERE
   Fixes white/washed-out text on ambient canvas sections site-wide while
   strictly preserving white text on blue/primary/dark background containers.
   ========================================================================== */
html:not([data-theme="dark"]) h1:not(.footer *):not(#sticky-cta-bar *):not(.da-band--dark *):not(.bg-primary *):not([class*="bg-primary"] *):not(.bg-dark *):not(.cta-banner *):not(.premium-cta-card *):not(.cs-cta-box *):not(.btn *):not(.badge *):not([class*="hero-header"] *):not(.cs-hero *),
html:not([data-theme="dark"]) h2:not(.footer *):not(#sticky-cta-bar *):not(.da-band--dark *):not(.bg-primary *):not([class*="bg-primary"] *):not(.bg-dark *):not(.cta-banner *):not(.premium-cta-card *):not(.cs-cta-box *):not(.btn *):not(.badge *):not([class*="hero-header"] *):not(.cs-hero *),
html:not([data-theme="dark"]) h3:not(.footer *):not(#sticky-cta-bar *):not(.da-band--dark *):not(.bg-primary *):not([class*="bg-primary"] *):not(.bg-dark *):not(.cta-banner *):not(.premium-cta-card *):not(.cs-cta-box *):not(.btn *):not(.badge *):not([class*="hero-header"] *):not(.cs-hero *),
html:not([data-theme="dark"]) h4:not(.footer *):not(#sticky-cta-bar *):not(.da-band--dark *):not(.bg-primary *):not([class*="bg-primary"] *):not(.bg-dark *):not(.cta-banner *):not(.premium-cta-card *):not(.cs-cta-box *):not(.btn *):not(.badge *):not([class*="hero-header"] *):not(.cs-hero *),
html:not([data-theme="dark"]) h5:not(.footer *):not(#sticky-cta-bar *):not(.da-band--dark *):not(.bg-primary *):not([class*="bg-primary"] *):not(.bg-dark *):not(.cta-banner *):not(.premium-cta-card *):not(.cs-cta-box *):not(.btn *):not(.badge *):not([class*="hero-header"] *):not(.cs-hero *),
html:not([data-theme="dark"]) h6:not(.footer *):not(#sticky-cta-bar *):not(.da-band--dark *):not(.bg-primary *):not([class*="bg-primary"] *):not(.bg-dark *):not(.cta-banner *):not(.premium-cta-card *):not(.cs-cta-box *):not(.btn *):not(.badge *):not([class*="hero-header"] *):not(.cs-hero *),
html:not([data-theme="dark"]) .display-1:not(.footer *):not(#sticky-cta-bar *):not(.bg-primary *):not([class*="bg-primary"] *):not(.bg-dark *),
html:not([data-theme="dark"]) .display-2:not(.footer *):not(#sticky-cta-bar *):not(.bg-primary *):not([class*="bg-primary"] *):not(.bg-dark *),
html:not([data-theme="dark"]) .display-3:not(.footer *):not(#sticky-cta-bar *):not(.bg-primary *):not([class*="bg-primary"] *):not(.bg-dark *),
html:not([data-theme="dark"]) .display-4:not(.footer *):not(#sticky-cta-bar *):not(.bg-primary *):not([class*="bg-primary"] *):not(.bg-dark *),
html:not([data-theme="dark"]) .display-5:not(.footer *):not(#sticky-cta-bar *):not(.bg-primary *):not([class*="bg-primary"] *):not(.bg-dark *) {
    color: #0A0F26 !important;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    font-weight: 700 !important;
}

html:not([data-theme="dark"]) p:not(.footer *):not(#sticky-cta-bar *):not(.btn *):not(.badge *):not(.da-band--dark *):not(.bg-primary *):not([class*="bg-primary"] *):not(.bg-dark *):not(.cta-banner *):not(.premium-cta-card *):not(.cs-cta-box *):not([class*="hero-header"] *):not(.cs-hero *),
html:not([data-theme="dark"]) .fs-5:not(.footer *):not(#sticky-cta-bar *):not(.btn *):not(.badge *):not(.bg-primary *):not([class*="bg-primary"] *):not(.bg-dark *),
html:not([data-theme="dark"]) .lead:not(.footer *):not(#sticky-cta-bar *):not(.btn *):not(.badge *):not(.bg-primary *):not([class*="bg-primary"] *):not(.bg-dark *) {
    color: #3D486B !important;
}

/* Ensure Pure White Text on Blue / Primary / Dark Containers */
.bg-primary,
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary h6,
.bg-primary .h1,
.bg-primary .h2,
.bg-primary .h3,
.bg-primary .h4,
.bg-primary .h5,
.bg-primary .h6,
.bg-primary .text-white,
.bg-primary strong,
.bg-primary b,
[class*="bg-primary"] h1,
[class*="bg-primary"] h2,
[class*="bg-primary"] h3,
[class*="bg-primary"] h4,
[class*="bg-primary"] h5,
[class*="bg-primary"] h6,
[class*="bg-primary"] .text-white,
[class*="bg-primary"] strong,
[class*="bg-primary"] b,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,
.bg-dark .text-white,
.bg-dark strong,
.bg-dark b {
    color: #FFFFFF !important;
}

.bg-primary p,
.bg-primary .text-white-50,
.bg-primary span:not(.badge):not(.btn),
[class*="bg-primary"] p,
[class*="bg-primary"] .text-white-50,
.bg-dark p,
.bg-dark .text-white-50 {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* High-contrast vibrant CTA buttons inside primary and impact cards */
.bg-primary .btn-warning,
[class*="bg-primary"] .btn-warning,
.btn-warning,
a.btn-warning {
    background-color: #F59E0B !important;
    background: #F59E0B !important;
    color: #0A0F26 !important;
    border-color: #F59E0B !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4) !important;
}
.bg-primary .btn-warning:hover,
[class*="bg-primary"] .btn-warning:hover,
.btn-warning:hover,
a.btn-warning:hover {
    background-color: #D97706 !important;
    background: #D97706 !important;
    color: #FFFFFF !important;
    border-color: #D97706 !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5) !important;
}

.bg-primary .btn-light,
[class*="bg-primary"] .btn-light,
.btn-light,
a.btn-light {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #0A0F26 !important;
    border-color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}
.bg-primary .btn-light:hover,
[class*="bg-primary"] .btn-light:hover,
.btn-light:hover,
a.btn-light:hover {
    background-color: #F1F5F9 !important;
    background: #F1F5F9 !important;
    color: #0A0F26 !important;
    border-color: #F1F5F9 !important;
}
/* Dedicated Case Study & Impact Sidebar CTA Card */
.cs-impact-cta {
    background: linear-gradient(135deg, #1363DF 0%, #0B63E5 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 15px 35px rgba(11, 99, 229, 0.25) !important;
}
.cs-impact-cta h1, .cs-impact-cta h2, .cs-impact-cta h3, .cs-impact-cta h4, .cs-impact-cta h5, .cs-impact-cta h6, .cs-impact-cta .text-white, .cs-impact-cta strong {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}
.cs-impact-cta p, .cs-impact-cta .text-white-50 {
    color: rgba(255, 255, 255, 0.92) !important;
}
[data-theme="dark"] .cs-impact-cta {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.95), rgba(29, 78, 216, 0.95)) !important;
    border: 1.5px solid rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(37, 99, 235, 0.25) !important;
}

.btn-light i.text-success,
a.btn-light i.text-success {
    color: #16A34A !important;
}

p a:not(.btn):not(.footer a),
.text-decoration-underline {
    color: #2563EB !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}
p a:not(.btn):not(.footer a):hover {
    color: #1D4ED8 !important;
}

/* ==========================================================================
   EXECUTIVE AI STUDIO SIDEBAR CONSOLE & NAVIGATION
   Redesigns the left sidebar into a fancy, high-end Prism glass console.
   ========================================================================== */

/* Outer Glass Console Wrapper */
.ai-sidebar-console {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 244, 255, 0.92)) !important;
    border: 1px solid rgba(139, 92, 246, 0.22) !important;
    box-shadow: 0 20px 50px rgba(79, 70, 229, 0.1) !important;
    border-radius: 1.5rem !important;
    padding: 1.6rem !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* Sidebar Title Header */
.ai-sidebar-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    color: #0A0F26 !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
}
.ai-sidebar-title i {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(37, 99, 235, 0.1) !important;
    color: #2563EB !important;
    border-radius: 0.65rem !important;
    font-size: 0.9rem !important;
    border: 1px solid rgba(37, 99, 235, 0.2) !important;
}

/* Category Filter Links (Inactive) */
.category-filter {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.72rem 1.1rem !important;
    border-radius: 0.85rem !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    color: #3D486B !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(23, 37, 84, 0.04) !important;
}

.category-filter:hover {
    background: #FFFFFF !important;
    border-color: rgba(37, 99, 235, 0.4) !important;
    color: #2563EB !important;
    transform: translateX(5px) !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15) !important;
}

/* Category Filter Link (Active) */
.category-filter.active,
.category-filter.active.bg-primary {
    background: linear-gradient(110deg, #2563EB, #8B5CF6 55%, #06B6D4 125%) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 700 !important;
    transform: translateX(5px) !important;
    box-shadow: 0 10px 28px rgba(79, 70, 229, 0.38) !important;
}
.category-filter.active i,
.category-filter.active.bg-primary i {
    color: #FFFFFF !important;
}

/* Bottom Callout Promo Card — Luminous Light Glass */
.sidebar-promo-card {
    background: linear-gradient(135deg, rgba(238, 242, 254, 0.95), rgba(240, 244, 255, 0.92)) !important;
    border: 1.5px solid rgba(37, 99, 235, 0.25) !important;
    border-radius: 1.25rem !important;
    padding: 1.5rem !important;
    box-shadow: 0 12px 35px rgba(37, 99, 235, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
}
.sidebar-promo-card h6 {
    color: #0A0F26 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.6rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
.sidebar-promo-card h6 i {
    color: #2563EB !important;
}
.sidebar-promo-card p {
    color: #3D486B !important;
    font-size: 0.83rem !important;
    line-height: 1.55 !important;
}
.sidebar-promo-card a:not(.btn) {
    color: #2563EB !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}
.sidebar-promo-card .btn {
    background: linear-gradient(110deg, #2563EB, #8B5CF6 55%, #06B6D4) !important;
    color: #FFFFFF !important;
    border: 0 !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 0.68rem 1.2rem !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 22px rgba(79, 70, 229, 0.35) !important;
    transition: all 0.25s ease !important;
}
.sidebar-promo-card .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(79, 70, 229, 0.5) !important;
}

/* ==========================================================================
   TRUSTED BY ENTERPRISE LEADERS — EXECUTIVE TESTIMONIAL SHOWCASE
   ========================================================================== */

/* Outer Section Frame */
.trusted-leaders-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 244, 255, 0.92)) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    box-shadow: 0 25px 65px rgba(79, 70, 229, 0.12) !important;
    border-radius: 2rem !important;
    backdrop-filter: blur(20px) !important;
}

/* Inner Stage Card */
.testimonial-stage-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 16px 45px rgba(23, 37, 84, 0.08) !important;
    position: relative !important;
}

/* Quote Icon Badge */
.quote-badge-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(139, 92, 246, 0.15));
    color: #2563EB;
    border-radius: 1rem;
    font-size: 1.25rem;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

/* Quote Copy */
.testimonial-quote-text {
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    color: #0A0F26 !important;
    font-style: italic !important;
    font-weight: 500 !important;
    margin-bottom: 0 !important;
}

/* Avatar Frame */
.testimonial-avatar-frame {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 2px solid rgba(139, 92, 246, 0.25) !important;
    box-shadow: 0 6px 18px rgba(23, 37, 84, 0.1) !important;
    padding: 3px !important;
    overflow: hidden !important;
}
.testimonial-avatar-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 50% !important;
}

/* Carousel Control Clean-up — Position arrows at top right header, never overlapping logos */
.testimonial-stage-card .owl-nav {
    position: absolute !important;
    top: -55px !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
    z-index: 25 !important;
}
.testimonial-stage-card .owl-nav button.owl-prev,
.testimonial-stage-card .owl-nav button.owl-next {
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    color: #2563EB !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(23, 37, 84, 0.08) !important;
    transition: all 0.25s ease !important;
}
.testimonial-stage-card .owl-nav button.owl-prev:hover,
.testimonial-stage-card .owl-nav button.owl-next:hover {
    background: #2563EB !important;
    color: #FFFFFF !important;
    border-color: #2563EB !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3) !important;
}

.testimonial-stage-card .owl-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin-top: 1.5rem !important;
}
.testimonial-stage-card .owl-dots .owl-dot span {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: rgba(37, 99, 235, 0.25) !important;
    transition: all 0.3s ease !important;
}
.testimonial-stage-card .owl-dots .owl-dot.active span {
    width: 28px !important;
    border-radius: 999px !important;
    background: linear-gradient(110deg, #2563EB, #8B5CF6) !important;
}

/* ==========================================================================
   EXECUTIVE FAQ & KNOWLEDGE PORTAL STYLING
   ========================================================================== */

/* FAQ Hero Box */
.faq-hero-box {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 244, 255, 0.92)) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    box-shadow: 0 20px 50px rgba(79, 70, 229, 0.1) !important;
    border-radius: 2rem !important;
    padding: 3.5rem 2.5rem !important;
    backdrop-filter: blur(20px) !important;
}

/* FAQ Search Input Box */
.faq-search-box {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
}
.faq-search-box input {
    background: #FFFFFF !important;
    border: 1.5px solid rgba(37, 99, 235, 0.3) !important;
    border-radius: 999px !important;
    padding: 1.1rem 1.6rem 1.1rem 3.4rem !important;
    font-size: 1.05rem !important;
    color: #0A0F26 !important;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.1) !important;
    transition: all 0.3s ease !important;
}
.faq-search-box input:focus {
    border-color: #2563EB !important;
    box-shadow: 0 12px 35px rgba(37, 99, 235, 0.2) !important;
    outline: none !important;
}
.faq-search-box i.search-icon {
    position: absolute;
    left: 1.3rem;
    top: 50%;
    transform: translateY(-50%);
    color: #2563EB;
    font-size: 1.2rem;
}

/* FAQ Accordion Glass Card */
.faq-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 244, 255, 0.92)) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.06) !important;
    border-radius: 1.25rem !important;
    margin-bottom: 1.25rem !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.faq-card:hover {
    border-color: rgba(37, 99, 235, 0.4) !important;
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.14) !important;
    transform: translateY(-3px) !important;
}
.faq-card .accordion-button {
    background: transparent !important;
    box-shadow: none !important;
    padding: 1.35rem 1.6rem !important;
    color: #0A0F26 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
}
.faq-card .accordion-button:not(.collapsed) {
    color: #2563EB !important;
}
.faq-card .faq-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.1);
    color: #2563EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.faq-card .accordion-button:not(.collapsed) .faq-icon {
    background: linear-gradient(110deg, #2563EB, #8B5CF6);
    color: #FFFFFF;
    transform: rotate(45deg);
}
.faq-card .accordion-body {
    padding: 0 1.6rem 1.5rem 1.6rem !important;
    color: #3D486B !important;
    font-size: 0.98rem !important;
    line-height: 1.75 !important;
    border-top: 1px dashed rgba(139, 92, 246, 0.18) !important;
    margin-top: 0.2rem !important;
    padding-top: 1.2rem !important;
}

/* FAQ Bottom Callout CTA Card — Luminous Light Glass */
.faq-bottom-cta {
    background: linear-gradient(135deg, rgba(238, 242, 254, 0.96), rgba(240, 244, 255, 0.92)) !important;
    border: 1.5px solid rgba(37, 99, 235, 0.25) !important;
    border-radius: 2rem !important;
    padding: 3.5rem 2.5rem !important;
    box-shadow: 0 16px 45px rgba(37, 99, 235, 0.12) !important;
    backdrop-filter: blur(20px) !important;
}
.faq-bottom-cta h2 {
    color: #0A0F26 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
}
.faq-bottom-cta p {
    color: #3D486B !important;
    font-size: 1.1rem !important;
}
.faq-bottom-cta .btn-outline-custom {
    background: #FFFFFF !important;
    border: 1.5px solid rgba(37, 99, 235, 0.3) !important;
    color: #2563EB !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08) !important;
    transition: all 0.25s ease !important;
}
.faq-bottom-cta .btn-outline-custom:hover {
    background: #2563EB !important;
    color: #FFFFFF !important;
    border-color: #2563EB !important;
    transform: translateY(-2px) !important;
}

/* Global Primary Button Text High-Contrast Override */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
a.btn-primary,
a.btn-primary:hover,
.faq-bottom-cta .btn-primary,
.faq-bottom-cta a.btn-primary,
.faq-bottom-cta a.btn-primary:hover {
    color: #FFFFFF !important;
}

/* ==========================================================================
   EXECUTIVE NEWSROOM PORTAL STYLING
   ========================================================================== */

/* Newsroom Hero Box */
.newsroom-hero-box {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 244, 255, 0.92)) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    box-shadow: 0 20px 50px rgba(79, 70, 229, 0.1) !important;
    border-radius: 2rem !important;
    padding: 3.5rem 2.5rem !important;
    backdrop-filter: blur(20px) !important;
}

/* Featured News Card */
.news-featured-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(139, 92, 246, 0.22) !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 16px 45px rgba(23, 37, 84, 0.08) !important;
    padding: 2.5rem !important;
}

/* News Grid Glass Card */
.news-grid-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 244, 255, 0.92)) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.06) !important;
    border-radius: 1.25rem !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
.news-grid-card:hover {
    border-color: rgba(37, 99, 235, 0.4) !important;
    box-shadow: 0 18px 45px rgba(37, 99, 235, 0.16) !important;
    transform: translateY(-4px) !important;
}
.news-grid-img-wrapper {
    height: 200px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
}
.news-grid-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}
.news-grid-card:hover .news-grid-img-wrapper img {
    transform: scale(1.06) !important;
}
.news-grid-card h4 {
    color: #0A0F26 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
}
.news-grid-card p {
    color: #3D486B !important;
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
}