/*
 * service-dark-overrides.css  –  OWS Dark Theme Overrides
 * Converts white/light-background sections in all service pages
 * to match the dark design system.
 * Design tokens: bg-base #0D1526 | bg-deep #0A1120 | card #162035
 *                text-body #C7D1E1 | text-muted #8A98B0
 *                coral #FF5733 | cyan #00D4D4
 */

/* ================================================================
   SECTION-LEVEL BACKGROUNDS
   ================================================================ */

/* "What Is..." explainer sections (agentic-ai, social, web design, branding) */
.what-is-agentic,
.what-is-smm,
.what-is-webdesign,
.what-is-branding {
    background: linear-gradient(135deg, #0A1120 0%, #0D1526 100%) !important;
}

/* Paragraph text inside What-Is sections */
.what-is-agentic p,
.what-is-smm p,
.what-is-webdesign p,
.what-is-branding p,
.what-is-content p,
.what-is-smm-content p,
.what-is-webdesign-content p,
.what-is-branding-content p {
    color: #C7D1E1 !important;
}

/* Agentic-AI secondary container */
.agentic2_container {
    background: #0D1526 !important;
}
.agentic2_container p {
    color: #C7D1E1 !important;
}

/* How We Build / Our Process / Branding Process sections */
.how-we-build,
.our-process,
.branding-process {
    background: #0D1526 !important;
}

.our-process > p,
.branding-process > p {
    color: #C7D1E1 !important;
}

/* Process step cards (within the dark section) */
.process-step {
    background: rgba(255,255,255,0.06) !important;
}
.process-step h4 {
    color: #FFFFFF !important;
}
.process-step p {
    color: #8A98B0 !important;
}
.process-step:hover {
    background: rgba(255,87,51,0.12) !important;
    color: #FFFFFF !important;
}
.process-step:hover h4,
.process-step:hover p {
    color: #FFFFFF !important;
}

/* Content hero section (the text+image block below the video banner) */
.hero-section {
    background: #0A1120 !important;
}
.hero-section .hero-text p {
    color: #C7D1E1 !important;
}
.hero-section .hero-image img {
    box-shadow: 0 8px 40px rgba(0,0,0,0.5) !important;
}

/* Page anchor navigation pills */
.page-nav a {
    background: rgba(255,255,255,0.06) !important;
    color: #C7D1E1 !important;
    border-color: rgba(255,255,255,0.12) !important;
}
.page-nav a:hover,
.page-nav a.active {
    background: rgba(255,87,51,0.12) !important;
    color: #FF5733 !important;
    border-color: rgba(255,87,51,0.3) !important;
}

/* FAQ container */
.faq-main-container {
    background: #0D1526 !important;
}

/* SEO page: AI Search Visibility section */
.ai-visibility-section {
    background: linear-gradient(180deg, #0A1120 0%, #0D1526 100%) !important;
}
.ai-visibility-section p {
    color: #C7D1E1 !important;
}

/* SEO page: Case Study section */
.case-study-section {
    background: #0D1526 !important;
}
.case-study-header p {
    color: #C7D1E1 !important;
}
.case-study-card {
    background: #162035 !important;
    border-color: rgba(255,255,255,0.08) !important;
}
.case-study-content p {
    color: #C7D1E1 !important;
}

/* Related services section */
.related-services {
    background: #0A1120 !important;
}
.related-services h2 {
    color: #FF5733 !important;
}

/* Section headers */
.section-header {
    background: #0D1526 !important;
}
.section-header .intro {
    color: #C7D1E1 !important;
}

/* Game changer / differentiator list items */
.game_changer-item {
    background-color: rgba(255,255,255,0.04) !important;
    border-left-color: #FF5733 !important;
}
.game_changer-item-title {
    color: #FFFFFF !important;
}
.game_changer-item-desc {
    color: #8A98B0 !important;
}

/* Marketing company list items (branding page) */
.marketing_company_main_container
  .marketing_company_container
  .left_container
  .text ul li {
    background: rgba(255,255,255,0.04) !important;
    color: #C7D1E1 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* ================================================================
   CARD & COMPONENT BACKGROUNDS
   ================================================================ */

/* Feature boxes (appear inside What-Is sections) */
.feature-box {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.10) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
}
.feature-box h4 {
    color: #FFFFFF !important;
}
.feature-box p {
    color: #8A98B0 !important;
}
.feature-box:hover {
    background: rgba(255,255,255,0.09) !important;
    border-color: rgba(0,212,212,0.30) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5) !important;
}

/* Service cards */
.service-card {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
    color: inherit !important;
}
.service-card h3 {
    color: #FFFFFF !important;
}
.service-card p {
    color: #8A98B0 !important;
}
.service-card:hover {
    background: rgba(255,255,255,0.08) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
}
.service-card .arrow {
    color: #FF5733 !important;
}

/* AI Pills (SEO page) */
.ai-pill {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.10) !important;
}
.ai-pill h3 {
    color: #FFFFFF !important;
}
.ai-pill p {
    color: #8A98B0 !important;
}

/* Tags (SEO page) */
.tag {
    background: rgba(0,212,212,0.10) !important;
    border-color: rgba(0,212,212,0.20) !important;
    color: #00D4D4 !important;
}

/* Result boxes (SEO case study) */
.result-box {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.10) !important;
}
.result-box h3 {
    color: #FF5733 !important;
}
.result-box p {
    color: #C7D1E1 !important;
}

/* Case study visuals panel */
.case-study-visuals {
    background: #162035 !important;
}

/* Client link */
.client-link {
    color: #00D4D4 !important;
    border-bottom-color: rgba(0,212,212,0.35) !important;
}
.client-link:hover {
    border-bottom-color: #00D4D4 !important;
}

/* Advisor / consultation card (social media page) */
.advisor-content {
    background: #162035 !important;
    color: #C7D1E1 !important;
}

/* ================================================================
   GENERAL BODY + SHARED OVERRIDES
   ================================================================ */

/* ================================================================
   FOOTER — remove broken ::before overlay (footer has no position
   context, so the pseudo-element positions against the page root
   and creates visible dark "cover boxes" over the columns)
   ================================================================ */
footer { position: relative !important; }
footer::before { content: none !important; }
.footer-section,
.footer-about { background: transparent !important; }

/* ================================================================
   GENERAL BODY + SHARED OVERRIDES
   ================================================================ */

/* Ensure links inside service content sections are readable */
.hero-section a,
.our-process a,
.how-we-build a,
.what-is-agentic a,
.what-is-smm a,
.what-is-webdesign a,
.what-is-branding a,
.ai-visibility-section a,
.case-study-section a {
    color: #00D4D4;
}
.hero-section a:hover,
.our-process a:hover,
.how-we-build a:hover {
    color: #FF5733;
}

/* ================================================================
   AGENTIC-AI PAGE — SECTION & CARD DARK OVERRIDES
   ================================================================ */

/* AI Sales / Lead Gen section — white bg → design system dark */
.aslga,
.aslga .content {
    background-color: #0D1526 !important;
    background: #0D1526 !important;
}
.aslga .content p,
.aslga .content ul,
.aslga .content ul li {
    color: #C7D1E1 !important;
}
/* Use-cases callout — old brand blue → coral-tinted dark card */
.aslga .use-cases {
    background: rgba(255,87,51,0.08) !important;
    border: 1px solid rgba(255,87,51,0.25) !important;
}
.aslga .use-cases h4 { color: #FF5733 !important; }
.aslga .use-cases ul li { color: #C7D1E1 !important; }

/* Data Science — AI solutions list (light blue → dark card) */
.ai-solutions {
    background-color: rgba(255,255,255,0.04) !important;
    border-left-color: #FF5733 !important;
}
.ai-solutions ul li {
    color: #C7D1E1 !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* Financial Advisor — agent item cards */
.advisor-item {
    background-color: rgba(255,255,255,0.04) !important;
    border-left-color: #FF5733 !important;
}
.advisor-item:hover { background-color: rgba(255,87,51,0.10) !important; }
.advisor-item-title { color: #FFFFFF !important; }
.advisor-item-desc { color: #8A98B0 !important; }

/* Customer Support / Zigzag section */
.cs-zigzag-section { background: #0A1120 !important; }
.cs-zigzag-section .cs-heading p { color: #C7D1E1 !important; }
.cs-zigzag-section .zigzag .text li {
    background: rgba(255,255,255,0.04) !important;
    border-left-color: #FF5733 !important;
    color: #C7D1E1 !important;
    box-shadow: none !important;
}
.cs-zigzag-section .usecase-banner {
    background: rgba(255,87,51,0.10) !important;
    border: 1px solid rgba(255,87,51,0.25) !important;
}
.cs-zigzag-section .usecase-banner h3 { color: #FF5733 !important; }
.cs-zigzag-section .usecase-box {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
}
.cs-zigzag-section .usecase-box:hover { background: rgba(255,87,51,0.12) !important; }
.cs-zigzag-section .usecase-box h4 { color: #FFFFFF !important; }
.cs-zigzag-section .usecase-box p { color: #C7D1E1 !important; }

/* Support Agents — feature-card (white → dark) */
.feature-card {
    background: rgba(255,255,255,0.04) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
.feature-card h4 { color: #FFFFFF !important; }
.feature-card p { color: #8A98B0 !important; }

/* How We Build — step cards (light gray → dark) */
.build-step {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
.build-step h4 { color: #FFFFFF !important; }
.build-step p { color: #8A98B0 !important; }
.build-step:hover {
    background: rgba(255,87,51,0.12) !important;
    border-color: rgba(255,87,51,0.3) !important;
}
.build-step:hover h4,
.build-step:hover p { color: #FFFFFF !important; }
/* Step number circles — coral instead of cyan */
.step-num {
    background: #FF5733 !important;
    color: #FFFFFF !important;
}
.build-step:hover .step-num {
    background: #FFFFFF !important;
    color: #FF5733 !important;
}

/* Industries grid — 3 columns to avoid orphaned single card */
.industries-grid { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 900px) {
    .industries-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 500px) {
    .industries-grid { grid-template-columns: 1fr !important; }
}
/* Industry card icons — coral, not old cyan */
.industry-card i { color: #FF5733 !important; }
.industry-card:hover { border-color: rgba(255,87,51,0.4) !important; }

/* FAQ accordion items */
.faq {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
.faq:hover { border-color: rgba(255,87,51,0.3) !important; }
.faq .question h3 { color: #FFFFFF !important; }
.faq .answer p { color: #C7D1E1 !important; }

/* Stats section CTA button — coral not teal */
.cta-btn {
    background-color: #FF5733 !important;
    color: #FFFFFF !important;
}
.cta-btn:hover { background-color: #FF6B4A !important; }

/* ================================================================
   GLOBAL SHARED FIXES (applies to all service pages)
   ================================================================ */

/* Prevent horizontal scrollbar */
body { overflow-x: hidden !important; }

/* Page nav container — dark background */
.page-nav {
    background: #0D1526 !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* Scroll-to-top button — coral */
#scrollTopBtn {
    background-color: #FF5733 !important;
    color: #FFFFFF !important;
}
#scrollTopBtn:hover { background-color: #FF6B4A !important; }

/* Footer contact icons — coral */
.contact-info li i { color: #FF5733 !important; }

/* Footer province section dividers — subtle coral line */
.province-name {
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(255,87,51,0.2) !important;
    margin-bottom: 10px !important;
}

/* Footer bottom bar — right-pad to avoid scroll-to-top button overlap */
.footer-bottom-right { padding-right: 64px !important; }

/* Footer email — prevent mid-domain word-break */
.contact-info a[href^="mailto"] {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    white-space: nowrap !important;
}

/* ================================================================
   AGENTIC-AI — SHOP + FOMC SECTIONS (second pass)
   ================================================================ */

/* Personalized Shopping section */
.shop-wrapper,
.shop-wrapper .shop-content {
    background: #0D1526 !important;
}
.shop-wrapper .shop-content p { color: #C7D1E1 !important; }
.shop-wrapper .feature-list .feature-item {
    background: rgba(255,255,255,0.04) !important;
    border-left-color: #FF5733 !important;
    box-shadow: none !important;
}
.shop-wrapper .feature-list .feature-item h4 { color: #FFFFFF !important; }
.shop-wrapper .feature-list .feature-item p { color: #8A98B0 !important; }
.shop-wrapper .usecase-section {
    background: rgba(255,87,51,0.08) !important;
    border: 1px solid rgba(255,87,51,0.25) !important;
    border-radius: 12px !important;
}
.shop-wrapper .usecase-section h3 { color: #FF5733 !important; }
.shop-wrapper .usecase-box {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
}
.shop-wrapper .usecase-box:hover { background: rgba(255,87,51,0.12) !important; }
.shop-wrapper .usecase-box h4 { color: #FFFFFF !important; }
.shop-wrapper .usecase-box p { color: #C7D1E1 !important; }

/* FOMC / AI Research section */
.fomc-diagonal {
    background: linear-gradient(120deg, #0A1120 0%, #0D1526 100%) !important;
}
.fomc-diagonal .fomc-text p { color: #C7D1E1 !important; }

/* ================================================================
   LAYOUT — FLUSH 2-COLUMN IMAGE+CONTENT SECTIONS
   Keep align-items:stretch so both columns share the same height,
   then absolutely-position each image inside its column so it
   fills that height perfectly — no dead dark space ever.
   ================================================================ */

/* Keep stretch so image column height matches the content column */
.ai-section,
.aslga,
.advisor-section,
.shop-wrapper,
.doc-section {
    align-items: stretch !important;
    display: flex !important;
    flex-wrap: wrap !important;
}
.doc-section .doc-image,
.doc-section .doc-content {
    flex: 1 1 45% !important;
    min-width: 300px !important;
}
.fomc-diagonal .fomc-container {
    align-items: stretch !important;
}

/* Image columns: position:relative so the img can fill them absolutely */
.aslga .image-container,
.advisor-section .advisor-image,
.shop-wrapper .shop-image,
.fomc-diagonal .fomc-img {
    position: relative !important;
    overflow: hidden !important;
    min-height: 420px !important;
}

/* Each image fills 100 % of its column height — perfectly flush */
.aslga .image-container img,
.advisor-section .advisor-image img,
.shop-wrapper .shop-image img,
.fomc-diagonal .fomc-img img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-height: none !important;
    border-radius: 0 !important;
}

/* Data-Science video column — same absolute-fill treatment */
.ai-section .video {
    position: relative !important;
    overflow: hidden !important;
    min-height: 420px !important;
}
.ai-section .video video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-height: none !important;
}

/* ================================================================
   HEADER NAV — fix clipped "Book Discovery Call" button
   "Start Your Project" already exists as a regular nav link;
   hide its duplicate CTA button so only "Book Discovery Call"
   remains — freeing ~160 px and eliminating the overflow.
   ================================================================ */
.menu-bar ul {
    gap: 16px !important;
}
.menu-bar ul li a,
.menu-bar ul > li > a {
    font-size: 14px !important;
    letter-spacing: 0 !important;
}
/* Remove the duplicate orange "Start Your Project" CTA button */
.nav-cta-wrapper .nav-btn-primary {
    display: none !important;
}
/* Give the sole "Book Discovery Call" pill a little breathing room */
.nav-cta-wrapper {
    margin-left: 8px !important;
}

/* ================================================================
   AGENTIC-AI — NEW SECTIONS (HR, Legal, Document Processing)
   ================================================================ */

/* HR section reuses .ai-section — background already covered.
   ai-solutions callout box is already dark. No extra needed. */

/* Legal section reuses .advisor-section — backgrounds + items already dark. */

/* Document Processing (.doc-section) — mirrors .shop-wrapper layout */
.doc-section,
.doc-section .doc-content {
    background: #0D1526 !important;
}
.doc-section .doc-content p { color: #C7D1E1 !important; }
/* Feature list base layout (no base CSS from services_style.css for this class) */
.doc-section .feature-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 20px !important;
}
.doc-section .feature-list .feature-item {
    background: rgba(255,255,255,0.04) !important;
    border-left: 4px solid #FF5733 !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 14px 18px !important;
    box-shadow: none !important;
    transition: background 0.25s ease !important;
}
.doc-section .feature-list .feature-item:hover {
    background: rgba(255,87,51,0.10) !important;
}
.doc-section .feature-list .feature-item h4 { color: #FFFFFF !important; margin-bottom: 4px !important; }
.doc-section .feature-list .feature-item p { color: #8A98B0 !important; margin: 0 !important; }
.doc-section .usecase-section {
    background: rgba(255,87,51,0.08) !important;
    border: 1px solid rgba(255,87,51,0.25) !important;
    border-radius: 12px !important;
}
.doc-section .usecase-section h3 { color: #FF5733 !important; }
.doc-section .usecase-box {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
}
.doc-section .usecase-box:hover { background: rgba(255,87,51,0.12) !important; }
.doc-section .usecase-box h4 { color: #FFFFFF !important; }
.doc-section .usecase-box p { color: #C7D1E1 !important; }

/* ================================================================
   CANADIAN COMPLIANCE & FUNDING TRUST SECTION (.trust-canada)
   ================================================================ */
.trust-canada {
    background: linear-gradient(135deg, #0A1120 0%, #0D1526 100%) !important;
    padding: 80px 5% !important;
}
.trust-canada__header {
    text-align: center !important;
    max-width: 780px !important;
    margin: 0 auto 56px !important;
}
.trust-canada__header h2 { color: #FFFFFF !important; }
.trust-canada__header p { color: #C7D1E1 !important; font-size: 1.1rem !important; }

.trust-canada__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}
@media (max-width: 768px) {
    .trust-canada__grid { grid-template-columns: 1fr !important; }
}

.trust-card {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    transition: all 0.3s ease !important;
}
.trust-card:hover {
    background: rgba(255,87,51,0.08) !important;
    border-color: rgba(255,87,51,0.35) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4) !important;
}
.trust-card__icon {
    width: 52px !important;
    height: 52px !important;
    background: rgba(255,87,51,0.15) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 18px !important;
    font-size: 22px !important;
    color: #FF5733 !important;
}
.trust-card h3 {
    color: #FFFFFF !important;
    font-size: 1.25rem !important;
    margin-bottom: 12px !important;
}
.trust-card > p { color: #C7D1E1 !important; line-height: 1.65 !important; }
.trust-card__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 16px 0 0 !important;
}
.trust-card__list li {
    color: #8A98B0 !important;
    font-size: 0.9rem !important;
    padding: 5px 0 5px 20px !important;
    position: relative !important;
    border: none !important;
    background: transparent !important;
}
.trust-card__list li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    color: #FF5733 !important;
    font-weight: 700 !important;
}
.trust-card__cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
    padding: 10px 20px !important;
    background: #FF5733 !important;
    color: #FFFFFF !important;
    border-radius: 999px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
}
.trust-card__cta:hover { background: #FF6B4A !important; color: #FFFFFF !important; }

/* ================================================================
   LEGAL SECTION — CSS VISUAL PANEL (.legal-viz)
   Replaces stock photo with an animated dark panel: dot-grid bg,
   pulsing coral glow, spinning orbit ring, icon core, badge chips,
   stat overlay, and "active" label. No image file required.
   ================================================================ */

/* Make the advisor-image column a positioned container */
.advisor-section .advisor-image {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    min-height: 420px !important;
    background: transparent !important;
    text-align: left !important;
}

/* Root panel — fills the full column */
.legal-viz {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, #0A1422 0%, #0D1A2E 60%, #0F1F38 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Dot-grid background texture */
.legal-viz__grid {
    position: absolute !important;
    inset: 0 !important;
    background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* Coral radial glow — pulsing behind the core icon */
.legal-viz::before {
    content: "" !important;
    position: absolute !important;
    width: 280px !important;
    height: 280px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(255,87,51,0.18) 0%, transparent 70%) !important;
    animation: lvGlow 3s ease-in-out infinite !important;
    pointer-events: none !important;
}
@keyframes lvGlow {
    0%, 100% { transform: scale(1);    opacity: 0.8; }
    50%       { transform: scale(1.15); opacity: 1;   }
}

/* Rotating orbit ring with two coral dots */
.legal-viz__orbit {
    position: absolute !important;
    width: 260px !important;
    height: 260px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,87,51,0.20) !important;
    animation: lvSpin 18s linear infinite !important;
    pointer-events: none !important;
}
.legal-viz__orbit::before,
.legal-viz__orbit::after {
    content: "" !important;
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #FF5733 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
.legal-viz__orbit::before { top: -4px !important; }
.legal-viz__orbit::after  { bottom: -4px !important; background: rgba(255,87,51,0.40) !important; }
@keyframes lvSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Central icon box */
.legal-viz__core {
    position: relative !important;
    z-index: 2 !important;
    width: 100px !important;
    height: 100px !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(255,87,51,0.25) 0%, rgba(255,87,51,0.10) 100%) !important;
    border: 1px solid rgba(255,87,51,0.40) !important;
    box-shadow: 0 0 40px rgba(255,87,51,0.25), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 44px !important;
    color: #FF5733 !important;
    margin-bottom: 16px !important;
}

/* Floating badge chips */
.legal-viz__badge {
    position: absolute !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    background: rgba(13,21,38,0.88) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    backdrop-filter: blur(8px) !important;
    white-space: nowrap !important;
}
.legal-viz__badge i { color: #FF5733 !important; font-size: 0.82rem !important; }

/* Badge positions — corners of the orbit area */
.lv-tl { top: 16% !important; left: 7% !important; }
.lv-tr { top: 16% !important; right: 7% !important; }
.lv-bl { bottom: 22% !important; left: 7% !important; }
.lv-br { bottom: 22% !important; right: 7% !important; }

/* Stat overlay — big coral number + muted label */
.legal-viz__stat {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: 4px !important;
}
.legal-viz__stat strong {
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    color: #FF5733 !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
}
.legal-viz__stat span {
    font-size: 0.78rem !important;
    color: #8A98B0 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    margin-top: 2px !important;
}

/* "AI Contract Agent Active" blinking label at bottom */
.legal-viz__label {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(255,87,51,0.75) !important;
    white-space: nowrap !important;
}
.legal-viz__label::before {
    content: "●" !important;
    color: #00D4D4 !important;
    margin-right: 6px !important;
    animation: lvBlink 1.5s ease-in-out infinite !important;
}
@keyframes lvBlink {
    0%, 100% { opacity: 1;   }
    50%       { opacity: 0.2; }
}

/* Responsive: on mobile the viz stacks below content, needs a fixed height */
@media (max-width: 768px) {
    .advisor-section .advisor-image { min-height: 300px !important; }
    .lv-tl, .lv-bl { left: 4% !important; }
    .lv-tr, .lv-br { right: 4% !important; }
}

/* ================================================================
   DOCUMENT PROCESSING — CSS VISUAL PANEL (.doc-viz)
   Pipeline: input doc chips (coral) → AI brain core (cyan) → output
   data badges (cyan). Distinct from legal-viz which uses coral theme.
   The .doc-image column is already position:relative; overflow:hidden;
   min-height:420px from the agentic-layout-fix block in the PHP file.
   ================================================================ */

/* Root panel — fills the full image column */
.doc-viz {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, #061420 0%, #0A1828 55%, #071220 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Dot-grid texture (cyan tint) */
.doc-viz__grid {
    position: absolute !important;
    inset: 0 !important;
    background-image: radial-gradient(circle, rgba(0,212,212,0.06) 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
    opacity: 0.65 !important;
    pointer-events: none !important;
}

/* Cyan radial glow pulsing behind core */
.doc-viz::before {
    content: "" !important;
    position: absolute !important;
    width: 240px !important;
    height: 240px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(0,212,212,0.16) 0%, transparent 68%) !important;
    animation: dvGlow 2.8s ease-in-out infinite !important;
    pointer-events: none !important;
}
@keyframes dvGlow {
    0%, 100% { transform: scale(1);    opacity: 0.7; }
    50%       { transform: scale(1.2); opacity: 1;   }
}

/* Diagonal gradient overlay to hint at flow direction */
.doc-viz::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(135deg, rgba(255,87,51,0.05) 0%, transparent 40%),
        linear-gradient(225deg, rgba(255,87,51,0.05) 0%, transparent 40%),
        linear-gradient(315deg, rgba(0,212,212,0.05) 0%, transparent 40%),
        linear-gradient(45deg,  rgba(0,212,212,0.05) 0%, transparent 40%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Input document type chips — top quadrant, coral accent */
.doc-viz__chip {
    position: absolute !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 13px !important;
    background: rgba(13,21,38,0.92) !important;
    border: 1px solid rgba(255,87,51,0.30) !important;
    border-radius: 8px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: #C7D1E1 !important;
    white-space: nowrap !important;
}
.doc-viz__chip i { color: #FF5733 !important; font-size: 0.85rem !important; }

/* Chip positions: 2 × 2 grid spread in top half */
.dvc-1 { top: 11% !important; left: 7% !important; }
.dvc-2 { top: 11% !important; right: 7% !important; }
.dvc-3 { top: 27% !important; left: 7% !important; }
.dvc-4 { top: 27% !important; right: 7% !important; }

/* Central AI brain icon */
.doc-viz__core {
    position: relative !important;
    z-index: 2 !important;
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(0,212,212,0.25) 0%, rgba(0,212,212,0.08) 100%) !important;
    border: 1px solid rgba(0,212,212,0.45) !important;
    box-shadow: 0 0 40px rgba(0,212,212,0.22), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 38px !important;
    color: #00D4D4 !important;
    margin-bottom: 10px !important;
    animation: dvPulse 2.8s ease-in-out infinite !important;
}
@keyframes dvPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(0,212,212,0.20), inset 0 1px 0 rgba(255,255,255,0.08); }
    50%       { box-shadow: 0 0 55px rgba(0,212,212,0.42), inset 0 1px 0 rgba(255,255,255,0.08); }
}

/* Stat — large cyan number + muted label below core */
.doc-viz__stat {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 6px !important;
}
.doc-viz__stat strong {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: #00D4D4 !important;
    line-height: 1 !important;
    letter-spacing: -0.5px !important;
}
.doc-viz__stat span {
    font-size: 0.74rem !important;
    color: #8A98B0 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    margin-top: 3px !important;
}

/* Output extracted-data badges — bottom quadrant, cyan accent */
.doc-viz__out {
    position: absolute !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 13px !important;
    background: rgba(0,212,212,0.08) !important;
    border: 1px solid rgba(0,212,212,0.28) !important;
    border-radius: 8px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: #00D4D4 !important;
    white-space: nowrap !important;
}
.doc-viz__out i { color: #00D4D4 !important; font-size: 0.82rem !important; }

/* Output positions: bottom half mirroring the input chips */
.dvo-1 { bottom: 27% !important; left: 7% !important; }
.dvo-2 { bottom: 27% !important; right: 7% !important; }
.dvo-3 { bottom: 14% !important; left: 50% !important; transform: translateX(-50%) !important; }

/* "IDP Agent Processing" blinking label at very bottom */
.doc-viz__label {
    position: absolute !important;
    bottom: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(0,212,212,0.70) !important;
    white-space: nowrap !important;
}
.doc-viz__label::before {
    content: "●" !important;
    color: #FF5733 !important;
    margin-right: 6px !important;
    animation: dvBlink 1.5s ease-in-out infinite !important;
}
@keyframes dvBlink {
    0%, 100% { opacity: 1;   }
    50%       { opacity: 0.2; }
}

/* Mobile: reduce panel height + shift chips inward */
@media (max-width: 768px) {
    .doc-section .doc-image { min-height: 300px !important; }
    .dvc-1, .dvc-3, .dvo-1 { left: 4% !important; }
    .dvc-2, .dvc-4, .dvo-2 { right: 4% !important; }
}

/* ================================================================
   SHARED DARK RULES — used by SMM, Web Design, Branding, Consultancy
   These classes appear across multiple service pages.
   ================================================================ */

/* ---- .hero-section (2-col content + image blocks) ---- */
.hero-section { background: #0D1526 !important; }
.hero-section .hero-text h2 { color: #FFFFFF !important; }
.hero-section .hero-text p,
.hero-section .hero-text ul li { color: #C7D1E1 !important; }

/* ---- .game_changer-item benefit cards ---- */
.game_changer-item {
    background: rgba(255,255,255,0.04) !important;
    border-left: 4px solid #FF5733 !important;
    border-radius: 8px !important;
}
.game_changer-item:hover {
    background: rgba(255,87,51,0.10) !important;
    transform: translateX(5px) !important;
}
.game_changer-item-title { color: #FFFFFF !important; font-weight: 600 !important; }
.game_changer-item-desc  { color: #C7D1E1 !important; }
/* FA icon inside .game_changer-item-icon */
.game_changer-item-icon i { color: #FF5733 !important; font-size: 22px !important; }

/* ---- .unleash_main_container (SMM benefits full-width block) ---- */
.unleash_main_container,
.unleash_content { background: #0D1526 !important; }

/* ---- .methodology_main_container (SMM services wrapper) ---- */
.methodology_main_container { background: #0A1120 !important; }
.methodology_container .title h2 { color: #FFFFFF !important; }
.methodology_container .heading p { color: #C7D1E1 !important; }

/* ---- .platforms-section (SMM channel cards) ---- */
.platforms-section {
    background: linear-gradient(135deg, #0A1120 0%, #0D1526 100%) !important;
    text-align: center !important;
    padding: 80px 5% !important;
}
.platforms-section h2 { color: #FFFFFF !important; }
.platforms-section > p { color: #C7D1E1 !important; font-size: 1.05rem !important; }
.platforms-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    max-width: 720px !important;
    margin: 32px auto 0 !important;
}
.platform-card {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 16px !important;
    padding: 32px 20px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    cursor: default !important;
}
.platform-card:hover {
    background: rgba(255,87,51,0.08) !important;
    border-color: rgba(255,87,51,0.35) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35) !important;
}
.platform-card i {
    font-size: 2.4rem !important;
    color: #FF5733 !important;
    display: block !important;
    margin-bottom: 12px !important;
}
.platform-card h4 { color: #FFFFFF !important; margin: 0 !important; font-size: 1rem !important; }
/* Brand-specific hover tints */
.platform-card.instagram:hover i { color: #E1306C !important; }
.platform-card.facebook:hover  i { color: #1877F2 !important; }
.platform-card.linkedin:hover  i { color: #0A66C2 !important; }
.platform-card.tiktok:hover    i { color: #69C9D0 !important; }
.platform-card.youtube:hover   i { color: #FF0000 !important; }
.platform-card.pinterest:hover i { color: #E60023 !important; }
@media (max-width: 600px) {
    .platforms-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- .process-step cards (SMM process, used elsewhere) ---- */
.process-step {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
}
.process-step:hover {
    background: rgba(255,87,51,0.10) !important;
    border-color: rgba(255,87,51,0.35) !important;
}
.process-step h4 { color: #FFFFFF !important; }
.process-step p  { color: #C7D1E1 !important; }
.step-num { background: #FF5733 !important; color: #FFFFFF !important; }
.process-step:hover h4,
.process-step:hover p { color: #FFFFFF !important; }
.process-step:hover .step-num { background: #FF6B4A !important; }

/* ---- .marketing_company_main_container (Web Design, Branding 2-col) ---- */
.marketing_company_main_container,
.marketing_company_container { background: #0D1526 !important; }
.left_container h2, .right_container h2 { color: #FFFFFF !important; }
.left_container p,  .right_container p  { color: #C7D1E1 !important; }
.left_container ul li, .right_container ul li { color: #C7D1E1 !important; }

/* ---- .services_main_container (Web Design, Branding, Consultancy) ---- */
.services_main_container,
.services_container { background: #0D1526 !important; }
.services_container > h2 { color: #FFFFFF !important; }
.services_container > p  { color: #C7D1E1 !important; }

/* ---- .empower_main_container CTA banners ---- */
/* These have image overlays — only text needs colour lock */
.empower_banner .banner_content h2 { color: #FF5733 !important; }
.empower_banner .banner_content p   { color: #FFFFFF !important; }

/* ---- Stats section (shared across all service pages) ---- */
.stats-section {
    background: linear-gradient(135deg, #0A1120 0%, #0D1526 100%) !important;
}
.stats-section .text-area h2 { color: #FFFFFF !important; }
.stats-section .text-area p   { color: #C7D1E1 !important; }
.stat-box.card {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
}
.stat-box .counter { color: #FF5733 !important; }

/* ---- SEO page (.seo-section) ---- */
.seo-section,
.seo-section.alt { background: #0D1526 !important; }
.seo-section h2 { color: #FFFFFF !important; }
.seo-section p,
.seo-section li { color: #C7D1E1 !important; }

/* ---- AI Visibility section (SEO page) ---- */
.ai-visibility-section { background: #0A1120 !important; }
.ai-visibility-section h2 { color: #FFFFFF !important; }
.ai-visibility-section p,
.ai-visibility-section li { color: #C7D1E1 !important; }

/* ---- Case Study section (SEO page) ---- */
.case-study-section { background: #0D1526 !important; }
.case-study-section h2,
.case-study-section h3 { color: #FFFFFF !important; }
.case-study-section p,
.case-study-section li { color: #C7D1E1 !important; }

/* ---- Branding services section ---- */
.branding-services-section { background: #0D1526 !important; }
.branding-services-section h2 { color: #FFFFFF !important; }
.branding-services-section p,
.branding-services-section li { color: #C7D1E1 !important; }

/* ---- Grid container (Consultancy problem cards) ---- */
.grid-container { background: #0D1526 !important; }

/* ---- Section headers / empower sub containers ---- */
.empower_main_container { background: #0A1120 !important; }
.empower_sub_container { background: transparent !important; }

/* ================================================================
   v8 ADDITIONS — fill remaining white/light sections across all
   service pages (SMM, SEO, Web Design, Branding, Consultancy)
   ================================================================ */

/* ---- SMM: "What Is Social Media Marketing" section ---- */
.what-is-smm { background: #0A1120 !important; }
.what-is-content h2 { color: #FF5733 !important; }
.what-is-content p  { color: #C7D1E1 !important; }

/* ---- SMM: feature-box cards (4 grid inside what-is-smm) ---- */
.feature-box {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.30) !important;
}
.feature-box:hover {
    background: rgba(255,87,51,0.10) !important;
    border-color: rgba(255,87,51,0.40) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.40) !important;
}
.feature-box i  { color: #FF5733 !important; }
.feature-box h4 { color: #FFFFFF  !important; }
.feature-box p  { color: #C7D1E1 !important; }

/* ---- SMM: our-process section wrapper ---- */
.our-process { background: #0D1526 !important; }
.our-process h2   { color: #FF5733 !important; }
.our-process > p  { color: #C7D1E1 !important; }

/* ---- SEO: seo-card service cards ---- */
.seo-card {
    background: rgba(255,255,255,0.04) !important;
    border: 2px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
}
.seo-card:hover {
    background: rgba(255,87,51,0.08) !important;
    border-color: rgba(255,87,51,0.40) !important;
    transform: translateY(-5px) !important;
}
.seo-card h3 { color: #FFFFFF !important; }
.seo-card p  { color: #C7D1E1 !important; }
.seo-card i  { color: #FF5733 !important; }

/* ---- SEO: seo-step numbered process cards ---- */
.seo-step {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
.seo-step:hover {
    background: rgba(255,87,51,0.10) !important;
    border-color: rgba(255,87,51,0.40) !important;
}
.seo-step h3       { color: #FFFFFF !important; }
.seo-step p        { color: #C7D1E1 !important; }
.seo-step:hover h3,
.seo-step:hover p  { color: #FFFFFF !important; }

/* ---- Related-services sections (SEO, SMM, others) ---- */
.related-services { background: #0D1526 !important; }
.related-services h2 { color: #FFFFFF !important; }

/* ---- service-card (SEO related services grid + other pages) ---- */
.service-card {
    background: rgba(255,255,255,0.04) !important;
    border: 2px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
    color: inherit !important;
}
.service-card:hover {
    background: rgba(255,87,51,0.08) !important;
    border-color: rgba(255,87,51,0.40) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35) !important;
}
.service-card h3 { color: #FFFFFF !important; }
.service-card p  { color: #C7D1E1 !important; }
.service-card .arrow { color: #FF5733 !important; }
.service-card:hover .arrow { transform: translateX(5px) !important; }

/* ---- FAQ sections (SEO, SMM, Web Design, Branding, Consultancy) ---- */
.faq-main-container { background: #0D1526 !important; }
.faq-main-container .sec-title { color: #FFFFFF !important; }
.faq {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
.faq:hover { border-color: rgba(255,87,51,0.40) !important; }
.faq .question h3 { color: #FFFFFF !important; }
.faq .question .arrow { color: #FF5733 !important; }
.faq .answer { background: transparent !important; }
.faq .answer p { color: #C7D1E1 !important; }

/* ================================================================
   TECH LOGOS SCROLLER — "Technologies & Tools We Use"
   (new section added to index.php homepage)
   ================================================================ */
.scroller-container.tech-tools { height: auto !important; overflow: visible !important; padding: 60px 0 !important; background: linear-gradient(135deg, #0A1120 0%, #0D1526 100%) !important; }
.scroller-container.tech-tools h2.sec-title { color: #FFFFFF !important; }
.scroller-container.tech-tools .scroller { height: 120px !important; overflow: hidden !important; padding: 12px 0 !important; mask-image: linear-gradient(90deg, transparent, white 5%, white 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, white 5%, white 95%, transparent); }
.scroller-container.tech-tools .scroller__inner,
.scroller-container.tech-tools .tech-list { display: flex; gap: 20px; animation: ows-scroll-tech 35s linear infinite; width: max-content; list-style: none; padding: 0; margin: 0; align-items: center; }
.scroller-container.tech-tools .scroller:hover .scroller__inner,
.scroller-container.tech-tools .scroller:hover .tech-list { animation-play-state: paused; }
.scroller-container.tech-tools .item { flex: 0 0 auto; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 130px !important; height: 90px !important; padding: 12px 14px !important; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 14px !important; position: static !important; left: auto !important; animation: none !important; transition: all 0.25s ease; cursor: default; }
.scroller-container.tech-tools .item:hover { background: rgba(255,87,51,0.10) !important; border-color: rgba(255,87,51,0.35) !important; transform: translateY(-3px); }
.scroller-container.tech-tools .item img { max-width: 42px !important; max-height: 42px !important; width: auto !important; height: auto !important; object-fit: contain !important; opacity: 0.75; transition: all 0.25s ease; filter: brightness(0) invert(1); }
.scroller-container.tech-tools .item:hover img { opacity: 1; filter: none; }
.scroller-container.tech-tools .item span { font-size: 11px !important; color: #8A98B0 !important; font-family: 'Inter', system-ui, sans-serif !important; text-align: center !important; font-weight: 500 !important; white-space: nowrap !important; transition: color 0.25s ease; }
.scroller-container.tech-tools .item:hover span { color: #FFFFFF !important; }
@keyframes ows-scroll-tech { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 10px)); } }