/* ==========================================================================
   ERPZONE THEME — Professional Redesign
   Loaded AFTER styles.css — selectively overrides legacy styles
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
    /* Backgrounds */
    --t-bg-0:        #FFFFFF;
    --t-bg-1:        #F7F8FA;
    --t-bg-2:        #ECEEF2;
    --t-bg-dark:     #111318;
    --t-bg-elevated: #FFFFFF;

    /* Text */
    --t-text-0:  #111318;
    --t-text-1:  #3D4350;
    --t-text-2:  #6B7185;
    --t-text-3:  #9DA3B0;

    /* Accent — single blue, no orange */
    --t-accent:       #0063E0;
    --t-accent-hover: #004FBF;
    --t-accent-soft:  rgba(0, 99, 224, 0.07);
    --t-green:        #0A7B5A;
    --t-green-soft:   rgba(10, 123, 90, 0.08);

    /* Borders & Shadows */
    --t-border:        #E2E4E9;
    --t-border-subtle: #ECEEF2;
    --t-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --t-shadow-sm: 0 2px 8px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
    --t-shadow-md: 0 4px 20px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
    --t-shadow-lg: 0 12px 40px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.04);

    /* Radii */
    --t-r-sm: 8px;
    --t-r-md: 12px;
    --t-r-lg: 16px;

    /* Nav */
    --t-nav-bg:  rgba(255,255,255,0.92);
    --t-nav-border: rgba(0,0,0,0.07);
}

[data-theme="dark"] {
    --t-bg-0:        #0C0D11;
    --t-bg-1:        #13151B;
    --t-bg-2:        #1A1D25;
    --t-bg-dark:     #0C0D11;
    --t-bg-elevated: #1A1D25;

    --t-text-0: #F0F1F3;
    --t-text-1: #B8BCC6;
    --t-text-2: #7D8393;
    --t-text-3: #555B6A;

    --t-accent:       #4D94FF;
    --t-accent-hover: #6AA5FF;
    --t-accent-soft:  rgba(77, 148, 255, 0.1);
    --t-green:        #34D399;
    --t-green-soft:   rgba(52, 211, 153, 0.1);

    --t-border:        #2A2D37;
    --t-border-subtle: #1F222A;
    --t-shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
    --t-shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
    --t-shadow-md: 0 4px 20px rgba(0,0,0,0.28);
    --t-shadow-lg: 0 12px 40px rgba(0,0,0,0.4);

    --t-nav-bg: rgba(12,13,17,0.92);
    --t-nav-border: rgba(255,255,255,0.06);
}

/* -------------------------------------------------------------------------
   2. GLOBAL BASE OVERRIDES
   ------------------------------------------------------------------------- */
html {
    transition: background 0.3s ease, color 0.3s ease;
}

body {
    font-family: 'Inter', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--t-bg-0);
    color: var(--t-text-0);
    transition: background 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] body {
    background: var(--t-bg-0);
    color: var(--t-text-0);
}

h1, h2, h3, h4 {
    font-family: 'Inter', 'Sora', sans-serif;
    color: var(--t-text-0);
    transition: color 0.3s ease;
}

/* ---- Explicit per-theme heading colours (override inline styles + old vars) ---- */
/* Light mode: near-black for body headings */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 {
    color: #111318 !important;
}
/* Dark mode: bright near-white */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
    color: #F0F1F3 !important;
}

/* Section-title: use accent blue for strong visual impact (both modes) */
[data-theme="light"] .section-title,
[data-theme="light"] h2.section-title,
[data-theme="light"] h3.section-title {
    color: #0F172A !important;      /* deep slate — readable, professional */
}
[data-theme="dark"] .section-title,
[data-theme="dark"] h2.section-title,
[data-theme="dark"] h3.section-title {
    color: #F0F1F3 !important;
}

/* page-header-title (inner page hero banner) */
[data-theme="light"] .page-header-title {
    color: #FFFFFF !important;       /* stays white — it sits on a dark hero image */
}
[data-theme="dark"] .page-header-title {
    color: #FFFFFF !important;
}

/* Override old inline vars: --primary-navy / --deep-slate → correct per-theme colour */
[data-theme="light"] [style*="color: var(--primary-navy)"],
[data-theme="light"] [style*="color: var(--deep-slate)"],
[data-theme="light"] [style*="color: var(--navy-deep)"] {
    color: #0F172A !important;
}
[data-theme="dark"] [style*="color: var(--primary-navy)"],
[data-theme="dark"] [style*="color: var(--deep-slate)"],
[data-theme="dark"] [style*="color: var(--navy-deep)"] {
    color: #F0F1F3 !important;
}

/* Accent blue highlight headings (eyebrows, labels, service card titles) */
[data-theme="light"] .eyebrow,
[data-theme="light"] .section-eyebrow,
[data-theme="light"] .card-eyebrow {
    color: var(--t-accent) !important;
}
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .section-eyebrow,
[data-theme="dark"] .card-eyebrow {
    color: var(--t-accent) !important;
}

/* -------------------------------------------------------------------------
   3. NAVBAR
   ------------------------------------------------------------------------- */
.navbar.header, .header {
    background: var(--t-nav-bg) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    border-bottom: 1px solid var(--t-nav-border) !important;
    box-shadow: none !important;
    transition: background 0.3s ease, border-color 0.3s ease !important;
}

[data-theme="dark"] .navbar.header,
[data-theme="dark"] .header {
    background: var(--t-nav-bg) !important;
}

/* ---- Nav link base ---- */
.nav-link {
    color: var(--t-text-2) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}
.nav-link:hover,
.nav-link.active {
    color: var(--t-text-0) !important;
}

/* ---- CRITICAL: override styles.css forcing white text on .scrolled-desktop ---- */
/* styles.css: .header.scrolled-desktop .nav-link { color: var(--white) !important; } */
/* We need higher specificity: [data-theme] + .header.scrolled-desktop .nav-link    */
[data-theme="light"] .header.scrolled-desktop .nav-link,
[data-theme="light"] .header.scrolled-desktop .logo-text {
    color: var(--t-text-0) !important;
}
[data-theme="light"] .header.scrolled-desktop {
    background: rgba(255,255,255,0.97) !important;
    border-bottom: 1px solid var(--t-border) !important;
}

/* hero-overlap: transparent header at page top — keep text dark in light mode */
[data-theme="light"] body.hero-overlap .header:not(.scrolled-desktop) .nav-link,
[data-theme="light"] body.hero-overlap .header:not(.scrolled-desktop) .logo-text,
[data-theme="light"] .header:not(.scrolled-desktop) .nav-link {
    color: var(--t-text-2) !important;
}

/* Dark mode scrolled stays white/bright */
[data-theme="dark"] .header.scrolled-desktop .nav-link,
[data-theme="dark"] .header.scrolled-desktop .logo-text {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .header.scrolled-desktop {
    background: rgba(12,13,17,0.97) !important;
    border-bottom: 1px solid var(--t-border) !important;
}

/* Dropdown menus — ensure visible in both modes */
.dropdown-menu,
.mega-menu-grid {
    background: var(--t-bg-elevated) !important;
    border: 1px solid var(--t-border) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .mega-menu-grid {
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
.dropdown-link,
.mega-menu-link {
    color: var(--t-text-1) !important;
}
.dropdown-link:hover,
.mega-menu-link:hover {
    color: var(--t-accent) !important;
    background: var(--t-accent-soft) !important;
}
.mega-menu-title {
    color: var(--t-text-3) !important;
}
.mega-link-meta {
    color: var(--t-text-2) !important;
}
/* Preview card inside mega menu */
.mega-preview-card {
    background: var(--t-bg-1) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: 10px !important;
}
.mega-preview-eyebrow { color: var(--t-accent) !important; }
.mega-preview-title   { color: var(--t-text-0) !important; }
.mega-preview-copy    { color: var(--t-text-1) !important; }
.mega-preview-meta    { color: var(--t-text-2) !important; }

/* Theme toggle button in nav */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--t-r-sm);
    border: 1px solid var(--t-border);
    background: var(--t-bg-elevated);
    color: var(--t-text-2);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 8px;
    flex-shrink: 0;
}
.theme-toggle-btn:hover {
    color: var(--t-text-0);
    border-color: var(--t-text-3);
}
[data-theme="light"] .theme-toggle-btn .icon-sun { display: none; }
[data-theme="dark"]  .theme-toggle-btn .icon-moon { display: none; }

/* Primary button — nav CTA */
.btn.btn-primary {
    background: var(--t-accent) !important;
    border-color: var(--t-accent) !important;
    color: #FFFFFF !important;
    border-radius: var(--t-r-sm) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    box-shadow: none !important;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
.btn.btn-primary:hover {
    background: var(--t-accent-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--t-shadow-sm) !important;
}

.btn.btn-secondary {
    background: transparent !important;
    border: 1px solid var(--t-border) !important;
    color: var(--t-text-0) !important;
    border-radius: var(--t-r-sm) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}
.btn.btn-secondary:hover {
    border-color: var(--t-text-3) !important;
    background: var(--t-bg-1) !important;
}

/* Dropdown menus */
.dropdown-menu {
    background: var(--t-bg-elevated) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-r-md) !important;
    box-shadow: var(--t-shadow-lg) !important;
    transition: background 0.3s ease !important;
}

.dropdown-link {
    color: var(--t-text-1) !important;
    font-size: 14px !important;
    transition: color 0.15s ease, background 0.15s ease !important;
}
.dropdown-link:hover {
    color: var(--t-accent) !important;
    background: var(--t-accent-soft) !important;
}

.mega-menu-title {
    color: var(--t-text-3) !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
}

/* -------------------------------------------------------------------------
   4. HERO SECTION
   ------------------------------------------------------------------------- */
.home-hero,
.hero-unified.home-hero {
    background: var(--t-bg-0) !important;
    min-height: 0 !important;
    padding-top: 120px !important;
    padding-bottom: 100px !important;
    border-bottom: 1px solid var(--t-border-subtle) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: background 0.3s ease !important;
}

/* Remove old overlay */
.home-hero .hero-unified-overlay {
    display: none !important;
}

/* Subtle dot grid */
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

[data-theme="dark"] .home-hero::before {
    background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
}

[data-theme="dark"] .home-hero {
    background: var(--t-bg-0) !important;
}

/* Hero ambient glow */
.home-hero::after {
    content: "";
    position: absolute;
    top: -10%;
    right: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 99, 224, 0.06), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

[data-theme="dark"] .home-hero::after {
    background: radial-gradient(circle, rgba(77, 148, 255, 0.05), transparent 70%);
}

/* Grid layout */
.home-hero-grid {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: 1.05fr 0.95fr !important;
    gap: 56px !important;
    align-items: center !important;
}

/* Copy column */
.home-hero-copy {
    max-width: 540px !important;
    padding: 0 !important;
}

.home-hero-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--t-accent) !important;
    margin-bottom: 20px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.home-hero-eyebrow::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--t-accent);
    flex-shrink: 0;
}

.home-hero-title {
    font-size: clamp(2.4rem, 3.8vw, 3.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
    color: var(--t-text-0) !important;
    max-width: none !important;
    margin-bottom: 20px !important;
}

.home-hero-title span {
    background: linear-gradient(135deg, var(--t-accent), #0040A8) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

[data-theme="dark"] .home-hero-title span {
    background: linear-gradient(135deg, #4D94FF, #7DB8FF) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.home-hero-lead {
    font-size: 1.05rem !important;
    line-height: 1.72 !important;
    color: var(--t-text-1) !important;
    max-width: 460px !important;
    margin-bottom: 32px !important;
}

/* Remove bullet points from hero — too cluttered */
.home-hero-points {
    display: none !important;
}

/* CTA row */
.home-hero-cta-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 36px !important;
    flex-wrap: wrap !important;
}

.home-hero-cta-primary {
    background: var(--t-accent) !important;
    border-color: var(--t-accent) !important;
    color: #FFF !important;
    border-radius: var(--t-r-sm) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 13px 26px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}
.home-hero-cta-primary:hover {
    background: var(--t-accent-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--t-shadow-sm) !important;
}

.home-hero-cta-secondary {
    background: transparent !important;
    border: 1px solid var(--t-border) !important;
    color: var(--t-text-0) !important;
    border-radius: var(--t-r-sm) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 13px 26px !important;
    transition: all 0.2s ease !important;
}
.home-hero-cta-secondary:hover {
    border-color: var(--t-text-3) !important;
    background: var(--t-bg-1) !important;
}

/* Subrail — strip the typewriter, keep assurance */
.home-hero-subrail {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-width: none !important;
}

.home-hero-assurance {
    font-size: 13px !important;
    color: var(--t-text-2) !important;
    max-width: none !important;
}

.home-hero-rotator {
    display: none !important;
}

/* Trust badges — new element added via JS */
.hero-trust-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.hero-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--t-border);
    color: var(--t-text-1);
    background: var(--t-bg-1);
    transition: all 0.3s ease;
}

.hero-trust-badge i {
    color: var(--t-accent);
    font-size: 13px;
}

/* -------------------------------------------------------------------------
   5. HERO WORKBENCH → ARCHITECTURE DIAGRAM
   ------------------------------------------------------------------------- */
.home-hero-workbench {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Replace the old workbench shell */
.hero-workbench-shell {
    position: relative !important;
    background: var(--t-bg-1) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-r-lg) !important;
    box-shadow: var(--t-shadow-md) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 24px !important;
    width: 100% !important;
    overflow: visible !important;
    transition: background 0.3s ease, border-color 0.3s ease !important;
}

/* Hide old workbench pseudo-elements */
.hero-workbench-shell::before {
    display: none !important;
}

/* Workbench header */
.hero-workbench-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--t-border) !important;
    gap: 12px !important;
}

.hero-workbench-kicker {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: var(--t-text-0) !important;
    text-transform: uppercase !important;
}

.hero-workbench-head p {
    color: var(--t-text-2) !important;
    font-size: 13px !important;
    margin: 0 !important;
    max-width: none !important;
    text-align: right !important;
}

/* Live status tag */
.workbench-live-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 4px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    background: var(--t-green-soft);
    color: var(--t-green);
    white-space: nowrap;
    flex-shrink: 0;
}

.workbench-live-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--t-green);
    animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.85); }
}

/* Architecture layers */
.arch-layers-new {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.arch-layer-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--t-r-md);
    background: var(--t-bg-elevated);
    border: 1px solid var(--t-border-subtle);
    transition: all 0.25s ease;
    cursor: default;
}

.arch-layer-row:hover {
    border-color: var(--t-accent);
    box-shadow: var(--t-shadow-sm);
    transform: translateX(4px);
}

.arch-layer-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--t-text-0);
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.arch-layer-name i {
    color: var(--t-accent);
    font-size: 15px;
    flex-shrink: 0;
}

.arch-layer-pills {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.arch-pill {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 4px;
    background: var(--t-bg-1);
    color: var(--t-text-2);
    border: 1px solid var(--t-border-subtle);
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* Connector between layers */
.arch-conn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 21px;
    height: 12px;
}

.arch-conn-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--t-accent);
    opacity: 0.4;
    animation: connPulse 3s ease-in-out infinite;
    position: relative;
}

.arch-conn-dot::before,
.arch-conn-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1px;
    background: var(--t-border);
}
.arch-conn-dot::before { top: -5px; height: 5px; transform: translateX(-50%); }
.arch-conn-dot::after  { bottom: -5px; height: 5px; transform: translateX(-50%); }

@keyframes connPulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.8; }
}

/* Arch footer stats */
.arch-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--t-border);
}

.arch-stat {
    text-align: center;
}

.arch-stat-val {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--t-text-0);
    line-height: 1;
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.arch-stat-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t-text-3);
    transition: color 0.3s ease;
}

/* Hide old tower elements — replaced by new arch layers */
.hero-tower-signals,
.hero-workbench-stage,
.hero-workbench-foot,
.hero-tower-board,
.hero-tower-anchor {
    display: none !important;
}

/* -------------------------------------------------------------------------
   6. PROOF BAND — cleaner version
   ------------------------------------------------------------------------- */
.home-hero-proofband-wrap {
    position: relative;
    z-index: 1;
}

.home-hero-proofband {
    background: var(--t-bg-dark) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    transition: background 0.3s ease !important;
}

[data-theme="dark"] .home-hero-proofband {
    background: var(--t-bg-1) !important;
    border-top: 1px solid var(--t-border) !important;
    border-bottom: 1px solid var(--t-border) !important;
}

.home-hero-proofmetric {
    padding: 28px 24px !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    text-align: center !important;
}

.home-hero-proofmetric:last-child {
    border-right: none !important;
}

.home-hero-proofmetric-value {
    font-size: 2rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: #FFFFFF !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
}

.home-hero-proofmetric-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: rgba(255,255,255,0.45) !important;
    line-height: 1.4 !important;
}

[data-theme="light"] .home-hero-proofband {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    gap: 16px !important;
    padding: 0 6px !important;
}

[data-theme="light"] .home-hero-proofmetric {
    padding: 22px 18px !important;
    border-right: none !important;
    border-radius: 24px !important;
    border: 1px solid rgba(24, 63, 138, 0.1) !important;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, rgba(236, 245, 255, 0.96) 100%) !important;
    box-shadow:
        0 20px 40px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    position: relative !important;
    overflow: hidden !important;
}

[data-theme="light"] .home-hero-proofmetric::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: linear-gradient(90deg, #1c63dd 0%, #6fe5ff 100%) !important;
    opacity: 0.84 !important;
}

[data-theme="light"] .home-hero-proofmetric-value {
    color: #18233b !important;
}

[data-theme="light"] .home-hero-proofmetric-label {
    color: #4f5f78 !important;
}

/* -------------------------------------------------------------------------
   7. STATS BAND
   ------------------------------------------------------------------------- */
.stats-band {
    background: var(--t-bg-dark) !important;
    border-top: none !important;
    border-bottom: none !important;
    padding: 56px 0 !important;
    transition: background 0.3s ease !important;
}

[data-theme="dark"] .stats-band {
    background: var(--t-bg-1) !important;
    border-top: 1px solid var(--t-border) !important;
    border-bottom: 1px solid var(--t-border) !important;
}

.stats-band .stat-cell > div:first-child {
    font-size: 38px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: #FFFFFF !important;
    line-height: 1 !important;
}

.stats-band .stat-cell > div:last-child {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    color: rgba(255,255,255,0.45) !important;
    margin-top: 8px !important;
}

[data-theme="light"] .stats-band {
    margin-top: 24px !important;
    background: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
    padding-top: 0 !important;
    padding-bottom: 28px !important;
}

[data-theme="light"] .stats-band .container {
    padding: 28px 26px !important;
    border-radius: 30px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    border: 1px solid rgba(24, 63, 138, 0.08) !important;
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.07) !important;
}

[data-theme="light"] .stats-band .stat-divider {
    background: linear-gradient(180deg, transparent 0%, rgba(28, 99, 221, 0.16) 18%, rgba(28, 99, 221, 0.16) 82%, transparent 100%) !important;
    opacity: 1 !important;
}

[data-theme="light"] .stats-band .stat-cell {
    position: relative;
}

[data-theme="light"] .stats-band .stat-cell > div:first-child {
    color: #18233b !important;
}

[data-theme="light"] .stats-band .stat-cell > div:last-child {
    color: #1c63dd !important;
}

/* -------------------------------------------------------------------------
   8. SAP COMMAND CENTER
   ------------------------------------------------------------------------- */
.home-command-section {
    background: var(--t-bg-0) !important;
    transition: background 0.3s ease !important;
}

[data-theme="dark"] .home-command-section {
    background: var(--t-bg-0) !important;
}

.home-command-section .eyebrow {
    color: var(--t-accent) !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
}

.home-command-section .section-title,
.home-command-title {
    font-size: clamp(1.7rem, 2.8vw, 2.2rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: var(--t-text-0) !important;
}

.home-command-section .section-description,
.home-command-lead {
    color: var(--t-text-1) !important;
    font-size: 15px !important;
}

/* Command cards — replace dark glassy look */
.home-command-card {
    background: var(--t-bg-1) !important;
    border: 1px solid var(--t-border-subtle) !important;
    border-radius: var(--t-r-md) !important;
    color: var(--t-text-1) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
    box-shadow: none !important;
    padding: 20px 16px !important;
}

.home-command-card i {
    color: var(--t-accent) !important;
    font-size: 20px !important;
}

.home-command-card:hover,
.home-command-card.is-active {
    background: var(--t-bg-elevated) !important;
    border-color: var(--t-accent) !important;
    color: var(--t-text-0) !important;
    box-shadow: var(--t-shadow-sm) !important;
    transform: translateY(-2px) !important;
}

/* Detail panel */
.home-command-detail {
    background: var(--t-bg-elevated) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-r-lg) !important;
    padding: 32px !important;
    box-shadow: var(--t-shadow-sm) !important;
    transition: all 0.3s ease !important;
}

.home-command-kicker {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    color: var(--t-accent) !important;
    text-transform: uppercase !important;
}

#home-command-title {
    color: var(--t-text-0) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

#home-command-desc {
    color: var(--t-text-1) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

#home-command-points li {
    color: var(--t-text-1) !important;
    font-size: 14px !important;
}

#home-command-points li::before {
    color: var(--t-accent) !important;
}

/* -------------------------------------------------------------------------
   9. DELIVERY MODEL
   ------------------------------------------------------------------------- */
.home-delivery-section {
    background: var(--t-bg-1) !important;
    border-top: 1px solid var(--t-border-subtle) !important;
    border-bottom: 1px solid var(--t-border-subtle) !important;
    transition: all 0.3s ease !important;
}

[data-theme="dark"] .home-delivery-section {
    background: var(--t-bg-1) !important;
}

.home-delivery-section .eyebrow {
    color: var(--t-accent) !important;
}

.home-delivery-section .section-title,
.home-delivery-title {
    color: var(--t-text-0) !important;
    font-size: clamp(1.7rem, 2.8vw, 2.2rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}

.home-delivery-section .section-description,
.home-delivery-lead {
    color: var(--t-text-1) !important;
}

/* Delivery phase cards — remove dark styling */
.delivery-phase-card {
    background: var(--t-bg-elevated) !important;
    border: 1px solid var(--t-border-subtle) !important;
    border-radius: var(--t-r-md) !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.delivery-phase-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--t-accent), #0040A8) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
}

.delivery-phase-card:hover {
    border-color: var(--t-accent) !important;
    box-shadow: var(--t-shadow-sm) !important;
    transform: translateY(-3px) !important;
}

.delivery-phase-card:hover::before {
    opacity: 1 !important;
}

.delivery-phase-number {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--t-accent) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
}

.delivery-phase-icon {
    font-size: 20px !important;
    color: var(--t-text-3) !important;
}

.delivery-phase-card h4 {
    color: var(--t-text-0) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

.delivery-phase-card p {
    color: var(--t-text-2) !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
}

/* -------------------------------------------------------------------------
   10. HIGH-IMPACT OFFERINGS
   ------------------------------------------------------------------------- */
.pro-section-light {
    background: var(--t-bg-0) !important;
    transition: background 0.3s ease !important;
}

.pro-section-light .eyebrow {
    color: var(--t-accent) !important;
}

.pro-section-light .section-title {
    color: var(--t-text-0) !important;
    font-size: clamp(1.7rem, 2.8vw, 2.2rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}

.pro-section-light .content-lead {
    color: var(--t-text-1) !important;
}

.offer-card {
    background: var(--t-bg-elevated) !important;
    border: 1px solid var(--t-border-subtle) !important;
    border-radius: var(--t-r-md) !important;
    padding: 28px !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.offer-card::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    background: linear-gradient(180deg, var(--t-accent), #0040A8) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
}

.offer-card:hover {
    border-color: var(--t-accent) !important;
    box-shadow: var(--t-shadow-sm) !important;
    transform: translateY(-2px) !important;
}

.offer-card:hover::after {
    opacity: 1 !important;
}

.offer-card h3 {
    color: var(--t-text-0) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 10px !important;
}

.offer-card p {
    color: var(--t-text-2) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* Services CTA row */
.home-services-cta {
    background: #ffffff !important;
    border-top: none !important;
    border-bottom: none !important;
    transition: all 0.3s ease !important;
    display: block !important;
    padding-top: 88px !important;
    padding-bottom: 88px !important;
}

.home-services-cta .container {
    width: 100%;
    text-align: center;
}

.home-services-cta-inner {
    text-align: left !important;
}

.home-services-cta-inner h2 {
    color: #1a2338 !important;
    font-size: clamp(2rem, 3.2vw, 3rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}

.home-services-cta-inner p {
    color: #5f6679 !important;
}

[data-theme="dark"] .home-services-cta {
    background: #07111f !important;
}

[data-theme="dark"] .home-services-cta-inner {
    background: linear-gradient(180deg, #0d1a2c 0%, #142741 100%) !important;
    border-color: rgba(124, 163, 255, 0.36) !important;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.34) !important;
}

[data-theme="dark"] .home-services-cta-inner h2 {
    color: #f4f8ff !important;
}

[data-theme="dark"] .home-services-cta-inner p {
    color: rgba(218, 229, 248, 0.82) !important;
}

[data-theme="dark"] .home-services-cta-orb {
    background: rgba(94, 139, 255, 0.18) !important;
}

.home-services-cta-button,
.home-services-cta-button:visited {
    color: #1d5df0 !important;
    background: #ffffff !important;
    border-color: #2e69f6 !important;
}

.home-services-cta-button:hover,
.home-services-cta-button:focus-visible {
    color: #ffffff !important;
    background: #2e69f6 !important;
    border-color: #2e69f6 !important;
}

[data-theme="dark"] .home-services-cta-button,
[data-theme="dark"] .home-services-cta-button:visited {
    color: #f4f8ff !important;
    background: transparent !important;
    border-color: rgba(151, 184, 255, 0.78) !important;
}

[data-theme="dark"] .home-services-cta-button:hover,
[data-theme="dark"] .home-services-cta-button:focus-visible {
    color: #07111f !important;
    background: #97b8ff !important;
    border-color: #97b8ff !important;
}

.enterprise-cta {
    background: #ffffff !important;
    border-top: none !important;
    border-bottom: none !important;
    transition: all 0.3s ease !important;
    display: block !important;
    padding-top: 88px !important;
    padding-bottom: 88px !important;
}

.enterprise-cta .container {
    width: 100%;
    text-align: center;
}

[data-theme="dark"] .enterprise-cta {
    background: #07111f !important;
}

[data-theme="dark"] .enterprise-cta-inner {
    background: linear-gradient(180deg, #0d1a2c 0%, #142741 100%) !important;
    border-color: rgba(124, 163, 255, 0.36) !important;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.34) !important;
}

[data-theme="dark"] .enterprise-cta-orb {
    background: rgba(94, 139, 255, 0.18) !important;
}

[data-theme="dark"] .enterprise-cta-copy h2 {
    color: #f4f8ff !important;
}

[data-theme="dark"] .enterprise-cta-copy p {
    color: rgba(218, 229, 248, 0.82) !important;
}

[data-theme="dark"] .enterprise-cta-primary,
[data-theme="dark"] .enterprise-cta-primary:visited {
    background: transparent !important;
    border-color: rgba(151, 184, 255, 0.78) !important;
    color: #f4f8ff !important;
}

[data-theme="dark"] .enterprise-cta-primary:hover,
[data-theme="dark"] .enterprise-cta-primary:focus-visible {
    background: #97b8ff !important;
    border-color: #97b8ff !important;
    color: #07111f !important;
}

[data-theme="dark"] .enterprise-cta-secondary,
[data-theme="dark"] .enterprise-cta-secondary:visited {
    background: transparent !important;
    border-color: rgba(151, 184, 255, 0.78) !important;
    color: #f4f8ff !important;
}

[data-theme="dark"] .enterprise-cta-secondary:hover,
[data-theme="dark"] .enterprise-cta-secondary:focus-visible {
    background: #97b8ff !important;
    border-color: #97b8ff !important;
    color: #07111f !important;
}

/* -------------------------------------------------------------------------
   11. INDUSTRY VERTICALS
   ------------------------------------------------------------------------- */
/* Override inline styles on industry section */
section[style*="background: #FFFFFF"] {
    background: var(--t-bg-0) !important;
    transition: background 0.3s ease !important;
}

/* Industry cards via attribute selector (overrides inline) */
[style*="background: #F8FAFC"] {
    background: var(--t-bg-1) !important;
    border-top-color: var(--t-accent) !important;
    border-top-width: 2px !important;
    border-radius: var(--t-r-md) !important;
    transition: all 0.25s ease !important;
}

[style*="background: #F8FAFC"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--t-shadow-sm) !important;
    border-color: var(--t-accent) !important;
}

/* Overide brand teal on industry icons */
[style*="color: var(--brand-teal)"] {
    color: var(--t-accent) !important;
}

/* Industry headings — scoped per theme (moved to explicit block above) */

/* Industry desc text */
[style*="color: var(--text-muted)"] {
    color: var(--t-text-2) !important;
}

/* -------------------------------------------------------------------------
   12. TESTIMONIAL
   ------------------------------------------------------------------------- */
/* Override inline styles */
section[style*="background: #0A0F1E"],
section[style*="background:#0A0F1E"] {
    background: var(--t-bg-1) !important;
    border-top: 1px solid var(--t-border-subtle) !important;
    border-bottom: 1px solid var(--t-border-subtle) !important;
    position: relative !important;
}

section[style*="background: #0A0F1E"] > div[style*="position: absolute"],
section[style*="background: #0A0F1E"] > div[style*="linear-gradient"] {
    display: none !important;
}

section[style*="background: #0A0F1E"] p[style*="font-size: 28px"] {
    color: var(--t-text-0) !important;
    font-size: clamp(1.1rem, 1.8vw, 1.35rem) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
}

section[style*="background: #0A0F1E"] .ph-fill.ph-quotes {
    color: var(--t-accent) !important;
    opacity: 0.3 !important;
}

section[style*="background: #0A0F1E"] div[style*="color: var(--brand-teal)"],
section[style*="background: #0A0F1E"] div[style*="font-weight: 800"] {
    color: var(--t-text-2) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
}

/* -------------------------------------------------------------------------
   13. BOTTOM CTA — tighten padding
   ------------------------------------------------------------------------- */
.home-testimonial-section {
    padding: 72px 0 56px !important;
    background: #ffffff !important;
}

.home-testimonial-shell {
    position: relative;
    max-width: 980px !important;
    text-align: center;
    padding: 52px 56px !important;
    border-radius: 32px;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(28, 99, 221, 0.08), transparent 22%),
        linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%) !important;
    border: 1px solid rgba(24, 63, 138, 0.08);
    box-shadow:
        0 24px 54px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.home-testimonial-quote {
    display: inline-block;
    font-size: 58px !important;
    margin-bottom: 18px !important;
    color: rgba(28, 99, 221, 0.22) !important;
}

.home-testimonial-copy {
    margin: 0 auto 28px !important;
    max-width: 22ch;
    color: #1b2940 !important;
    font-size: clamp(1.7rem, 3vw, 2.5rem) !important;
    font-weight: 400 !important;
    font-style: italic !important;
    line-height: 1.42 !important;
    letter-spacing: -0.025em !important;
}

.home-testimonial-attribution {
    color: #1c63dd !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
}

[data-theme="dark"] .home-testimonial-section {
    background: #07111f !important;
}

[data-theme="dark"] .home-testimonial-shell {
    background:
        radial-gradient(circle at top right, rgba(74, 144, 255, 0.16), transparent 20%),
        linear-gradient(135deg, rgba(10, 15, 30, 0.97) 0%, rgba(0, 40, 40, 0.95) 100%) !important;
    border-color: rgba(124, 163, 255, 0.16) !important;
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .home-testimonial-quote {
    color: rgba(103, 217, 255, 0.22) !important;
}

[data-theme="dark"] .home-testimonial-copy {
    color: #f4f8ff !important;
}

[data-theme="dark"] .home-testimonial-attribution {
    color: #67d9ff !important;
}

.home-prime-cta {
    background: var(--t-bg-0) !important;
    text-align: center !important;
    transition: background 0.3s ease !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
}

.home-prime-cta .eyebrow {
    color: var(--t-accent) !important;
}

.home-prime-cta h2 {
    color: var(--t-text-0) !important;
    font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}

.home-prime-cta p:not(.home-prime-cta-note) {
    color: var(--t-text-1) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

.home-prime-cta-note {
    color: var(--t-text-3) !important;
    font-size: 13px !important;
}

/* -------------------------------------------------------------------------
   14. FOOTER
   ------------------------------------------------------------------------- */
footer[style*="background-color: var(--navy-deep)"] {
    background: #111318 !important;
    transition: background 0.3s ease !important;
}

[data-theme="dark"] footer[style*="background-color: var(--navy-deep)"] {
    background: #0C0D11 !important;
}

/* Footer link hover — replace inline onmouseover with CSS */
footer a:hover {
    color: var(--t-accent) !important;
}

/* -------------------------------------------------------------------------
   15. SCROLL ANIMATIONS
   ------------------------------------------------------------------------- */
[data-animate] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-animate="fade"] {
    transform: none;
}

[data-animate="slide-left"] {
    transform: translateX(-20px);
}

[data-animate="slide-right"] {
    transform: translateX(20px);
}

[data-animate="slide-left"].is-visible,
[data-animate="slide-right"].is-visible {
    transform: translateX(0);
}

/* Stagger children */
[data-stagger] > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-stagger].is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
[data-stagger].is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 80ms; }
[data-stagger].is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 160ms; }
[data-stagger].is-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 240ms; }
[data-stagger].is-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 320ms; }
[data-stagger].is-visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 400ms; }
[data-stagger].is-visible > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 480ms; }
[data-stagger].is-visible > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 560ms; }

/* Hero copy — always visible after load */
.home-hero-copy [data-animate] {
    animation: heroRise 0.6s ease forwards;
}

.home-hero-copy .home-hero-eyebrow    { animation-delay: 0.15s; }
.home-hero-copy .home-hero-heading-stack { animation-delay: 0.28s; }
.home-hero-copy .home-hero-lead       { animation-delay: 0.4s; }
.home-hero-copy .home-hero-cta-row    { animation-delay: 0.52s; }
.home-hero-copy .home-hero-subrail    { animation-delay: 0.64s; }

.home-hero-workbench {
    animation: heroRise 0.7s ease 0.45s both;
}

@keyframes heroRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    [data-animate], [data-stagger] > *, .home-hero-copy [data-animate], .home-hero-workbench {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* -------------------------------------------------------------------------
   16. MOBILE DRAWER (dark mode)
   ------------------------------------------------------------------------- */
[data-theme="dark"] .mobile-drawer {
    background: var(--t-bg-1) !important;
    border-right: 1px solid var(--t-border) !important;
}

[data-theme="dark"] .drawer-nav-link,
[data-theme="dark"] .drawer-toggle {
    color: var(--t-text-0) !important;
}

[data-theme="dark"] .drawer-submenu a {
    color: var(--t-text-1) !important;
}

[data-theme="dark"] .submenu-category {
    color: var(--t-text-3) !important;
}

/* -------------------------------------------------------------------------
   17. GLOBAL SECTION BACKGROUNDS (dark mode)
   ------------------------------------------------------------------------- */
[data-theme="dark"] .section,
[data-theme="dark"] main .section {
    background: var(--t-bg-0);
}

[data-theme="dark"] .home-delivery-section,
[data-theme="dark"] .stats-band {
    background: var(--t-bg-1) !important;
}

/* -------------------------------------------------------------------------
   18. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .home-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .home-hero-copy {
        max-width: 100% !important;
    }

    .arch-layer-row {
        grid-template-columns: 110px 1fr;
    }
}

@media (max-width: 768px) {
    .home-hero-proofband {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .home-hero-proofmetric {
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    }

    .arch-stats-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* -------------------------------------------------------------------------
   19. HERO IMAGE — Border Beam (adapted from shadcn/magicui)
   ------------------------------------------------------------------------- */

/* CSS @property for animatable conic-gradient angle */
@property --beam-rot {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Rotating beam — uses transform rotate (no @property needed) */
@keyframes beam-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Outer wrapper: clips the oversized rotating ::before to a 4px border ring */
.hero-beam-outer {
    position: relative;
    border-radius: 20px;
    padding: 4px;
    overflow: hidden;                  /* essential — clips the rotating ::before */
    background: #CBD5E1;              /* static fallback (slate-300) */
    box-shadow: 0 20px 56px rgba(0, 99, 224, 0.15);
    margin-bottom: 16px;
}

/* Rotating conic-gradient pseudo-element.
   Margin-based centering avoids translate/rotate transform conflict. */
.hero-beam-outer::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    left: 50%;
    top: 50%;
    margin-left: -100%;
    margin-top: -100%;
    transform-origin: center center;
    background: conic-gradient(
        from 0deg,
        #CBD5E1 0deg,
        #CBD5E1 200deg,
        #2563EB 230deg,
        #60A5FA 270deg,
        #2563EB 310deg,
        #CBD5E1 340deg,
        #CBD5E1 360deg
    );
    animation: beam-rotate 4s linear infinite;
    z-index: 0;
}

/* Dark mode */
[data-theme="dark"] .hero-beam-outer {
    background: #1E2130;
    box-shadow: 0 20px 56px rgba(77, 148, 255, 0.22);
}
[data-theme="dark"] .hero-beam-outer::before {
    background: conic-gradient(
        from 0deg,
        #1E2130 0deg,
        #1E2130 200deg,
        #4D94FF 230deg,
        #93C5FD 270deg,
        #4D94FF 310deg,
        #1E2130 340deg,
        #1E2130 360deg
    );
}

/* Inner: sits above the rotating ::before beam layer */
.hero-beam-inner {
    position: relative;
    z-index: 1;
    border-radius: 16px;
    overflow: hidden;
    background: var(--t-bg-1);
    line-height: 0;
}

.hero-beam-inner img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hero-beam-outer:hover .hero-beam-inner img {
    transform: scale(1.03);
}

/* Capability badges row */
.hero-img-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.hero-img-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--t-bg-elevated);
    border: 1px solid var(--t-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--t-text-1);
    box-shadow: var(--t-shadow-xs);
    transition: all 0.2s ease;
}

.hero-img-badge i {
    color: var(--t-accent);
    font-size: 14px;
}

.hero-img-badge:hover {
    border-color: var(--t-accent);
    color: var(--t-text-0);
}

/* Adjust workbench to flex column */
.home-hero-workbench {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
}

/* Remove old workbench shell wrapper styles (image replaces it) */
.home-hero-workbench .hero-workbench-shell {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* Stats row sits directly in workbench now */
.home-hero-workbench .arch-stats-row {
    margin-top: 0;
    background: var(--t-bg-1);
    border-radius: var(--t-r-md);
    padding: 16px 20px;
    border: 1px solid var(--t-border-subtle);
}

/* -------------------------------------------------------------------------
   20. DROPDOWN — JS hover-intent via .is-open class (scroll-proof)
   ------------------------------------------------------------------------- */

/* When JS adds .is-open, show immediately with no delay */
.dropdown-wrapper.is-open > .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s !important;
    pointer-events: auto !important;
}

/* Mega menu: needs the translateX(-50%) preserved */
.dropdown-wrapper.mega-menu-wrapper.is-open > .mega-menu-grid {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s !important;
    pointer-events: auto !important;
}

/* Ensure dropdown panels always receive pointer events when visible */
.dropdown-menu,
.mega-menu-grid {
    pointer-events: auto !important;
}

/* Bridge gaps — large transparent hover area above each menu */
.dropdown-menu::before,
.mega-menu-grid::before {
    top: -24px !important;
    height: 24px !important;
    left: -20px !important;
    right: -20px !important;
    width: auto !important;
}

/* =========================================================================
   21. DARK MODE — INLINE WHITE BACKGROUND OVERRIDES
   Fix elements with hardcoded inline style="background: white" or similar
   ========================================================================= */

/* Cards and panels with white/near-white inline backgrounds */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background: #FFF"],
[data-theme="dark"] [style*="background-color: #FFF"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background-color: #ffffff"],
[data-theme="dark"] [style*="background: #FFFFFF"],
[data-theme="dark"] [style*="background-color: #FFFFFF"],
[data-theme="dark"] [style*="background-color: var(--white)"],
[data-theme="dark"] [style*="background: var(--white)"] {
    background: var(--t-bg-2) !important;
    background-color: var(--t-bg-2) !important;
    color: var(--t-text-1) !important;
}

/* Light-bg form inputs in dark mode */
[data-theme="dark"] input[style*="background-color: white"],
[data-theme="dark"] select[style*="background-color: white"],
[data-theme="dark"] textarea[style*="background-color: white"],
[data-theme="dark"] input[style*="background: white"],
[data-theme="dark"] select[style*="background: white"],
[data-theme="dark"] textarea[style*="background: white"] {
    background: var(--t-bg-1) !important;
    background-color: var(--t-bg-1) !important;
    color: var(--t-text-0) !important;
    border-color: var(--t-border) !important;
}

/* Any section with F8FAFC / F4F7FA / f7fbff light backgrounds (including inside gradients) */
[data-theme="dark"] [style*="background: #F8FAFC"],
[data-theme="dark"] [style*="background-color: #F8FAFC"],
[data-theme="dark"] [style*="background: #f8fafc"],
[data-theme="dark"] [style*="background-color: #f8fafc"],
[data-theme="dark"] [style*="background: #F7F8FA"],
[data-theme="dark"] [style*="background-color: #F7F8FA"],
[data-theme="dark"] [style*="background: #F4F7FA"],
[data-theme="dark"] [style*="background-color: #F4F7FA"],
[data-theme="dark"] [style*="background: #f4f7fa"],
[data-theme="dark"] [style*="background-color: #f4f7fa"],
[data-theme="dark"] [style*="#F8FAFC"],
[data-theme="dark"] [style*="#f8fafc"],
[data-theme="dark"] [style*="#F4F7FA"],
[data-theme="dark"] [style*="#f4f7fa"],
[data-theme="dark"] [style*="#F7FBFF"],
[data-theme="dark"] [style*="#f7fbff"],
[data-theme="dark"] [style*="#F5F9FF"],
[data-theme="dark"] [style*="#f5f9ff"] {
    background: var(--t-bg-1) !important;
    background-color: var(--t-bg-1) !important;
}

/* Catch inline gradient backgrounds that contain "white" */
[data-theme="dark"] [style*="linear-gradient"][style*="white"],
[data-theme="dark"] [style*="radial-gradient"][style*="white"] {
    background: var(--t-bg-1) !important;
}

/* Light text colours on now-dark card backgrounds */
[data-theme="dark"] [style*="background: white"] h1,
[data-theme="dark"] [style*="background: white"] h2,
[data-theme="dark"] [style*="background: white"] h3,
[data-theme="dark"] [style*="background: white"] h4,
[data-theme="dark"] [style*="background-color: white"] h1,
[data-theme="dark"] [style*="background-color: white"] h2,
[data-theme="dark"] [style*="background-color: white"] h3,
[data-theme="dark"] [style*="background-color: white"] h4 {
    color: var(--t-text-0) !important;
}

/* Form labels, field text inside white cards */
[data-theme="dark"] [style*="background: white"] label,
[data-theme="dark"] [style*="background: white"] p,
[data-theme="dark"] [style*="background: white"] span,
[data-theme="dark"] [style*="background-color: white"] label,
[data-theme="dark"] [style*="background-color: white"] p,
[data-theme="dark"] [style*="background-color: white"] span {
    color: var(--t-text-1) !important;
}

/* =========================================================================
   22. LIGHT MODE — SECTION BACKGROUND OVERRIDES
   Ensure all page sections have proper light backgrounds
   ========================================================================= */

[data-theme="light"] [style*="background-color: var(--primary-navy)"],
[data-theme="light"] [style*="background: var(--primary-navy)"],
[data-theme="light"] [style*="background-color: var(--navy-deep)"],
[data-theme="light"] [style*="background: var(--navy-deep)"] {
    background: var(--t-bg-1) !important;
    background-color: var(--t-bg-1) !important;
}

/* =========================================================================
   23. DARK MODE — LEGACY VARIABLE RE-MAPPING
   Override legacy light-only CSS variables so all components adapt
   ========================================================================= */

[data-theme="dark"] {
    /* Only remap text/border variables — do NOT remap --white, --brand-navy,
       --brand-blue, --brand-teal as they are also used for dark section BGs
       and button/icon colors that must stay untouched. */
    --text-strong:   #F0F1F3;
    --text-body:     #C8D3E8;
    --text-muted:    #8A92A6;
    --card-border:   #2A2D37;
}

/* =========================================================================
   24. DARK MODE — CLASS-BASED COMPONENT OVERRIDES
   Cover all components using hardcoded #ffffff/#f*f*f* backgrounds
   ========================================================================= */

/* ----- Capabilities / Process sections ----- */
[data-theme="dark"] .capabilities-section {
    background: var(--t-bg-1) !important;
}
[data-theme="dark"] .capability-item {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .capability-title {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .capability-body {
    color: var(--t-text-2) !important;
}
[data-theme="dark"] .process-section {
    background: var(--t-bg-0) !important;
}

/* ----- Pro section light ----- */
[data-theme="dark"] .pro-section-light {
    background: var(--t-bg-1) !important;
    border-color: var(--t-border) !important;
}

/* ----- Offer / Deliverable cards ----- */
[data-theme="dark"] .offer-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .deliverables-list li,
[data-theme="dark"] .outcome-list li {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
    color: var(--t-text-1) !important;
}

/* ----- Dropdown menus ----- */
[data-theme="dark"] .mega-menu-grid {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .dropdown-panel {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .dropdown-link:hover {
    background: var(--t-bg-1) !important;
}

/* ----- Home Delivery section ----- */
[data-theme="dark"] .home-delivery-section {
    background: var(--t-bg-1) !important;
    border-color: var(--t-border) !important;
}

/* ----- Playbook section ----- */
[data-theme="dark"] .playbook-tab-rail,
[data-theme="dark"] .playbook-tabs {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .playbook-tab {
    color: var(--t-text-1) !important;
}
[data-theme="dark"] .playbook-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .playbook-card h4 {
    color: var(--t-text-0) !important;
}

/* ----- Service conversion cards ----- */
[data-theme="dark"] .service-conversion-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .service-conversion-card h3 {
    color: var(--t-text-0) !important;
}

/* ----- Challenge signals section ----- */
[data-theme="dark"] .challenge-signals-section {
    background: var(--t-bg-1) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .challenge-signal-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
    color: var(--t-text-1) !important;
}

/* ----- Service capability section / cards ----- */
[data-theme="dark"] .service-capability-section {
    background: var(--t-bg-1) !important;
}
[data-theme="dark"] .service-capability-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .service-capability-card h3 {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .service-capability-card p {
    color: var(--t-text-2) !important;
}

/* ----- Service playbook section ----- */
[data-theme="dark"] .service-playbook-section {
    background: var(--t-bg-0) !important;
}
[data-theme="dark"] .service-phase-tab {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
    color: var(--t-text-1) !important;
}
[data-theme="dark"] .service-playbook-shell {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .service-phase-card {
    background: var(--t-bg-1) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .service-phase-card h4 {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .service-phase-hero h3 {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .service-phase-hero p {
    color: var(--t-text-2) !important;
}

/* ----- Service delivery / deliverable / post cards ----- */
[data-theme="dark"] .service-delivery-section {
    background: var(--t-bg-1) !important;
}
[data-theme="dark"] .service-deliverable-card,
[data-theme="dark"] .service-post-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .service-deliverable-title,
[data-theme="dark"] .service-post-card h3 {
    color: var(--t-text-0) !important;
}

/* ----- Solution sections / cards ----- */
[data-theme="dark"] .solution-challenge-section {
    background: var(--t-bg-1) !important;
}
[data-theme="dark"] .solution-challenge-card,
[data-theme="dark"] .solution-scenario-card,
[data-theme="dark"] .solution-related-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
    color: var(--t-text-1) !important;
}
[data-theme="dark"] .solution-challenge-card h3,
[data-theme="dark"] .solution-scenario-card h3,
[data-theme="dark"] .solution-related-card h3 {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .solution-delivery-section {
    background: var(--t-bg-0) !important;
}
[data-theme="dark"] .solution-architecture-card,
[data-theme="dark"] .solution-journey-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .solution-architecture-card h3,
[data-theme="dark"] .solution-journey-card h3 {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .solution-scenario-section {
    background: var(--t-bg-1) !important;
}

/* ----- AI tool showcase panels (SAP-Native & External columns) ----- */
/* Give SAP-Native panel a matching dark navy — consistent with the External panel */
[data-theme="dark"] .ai-tool-showcase-panel {
    background: linear-gradient(160deg, #0B1F3B 0%, #0E2848 100%) !important;
    border-color: rgba(145, 184, 226, 0.14) !important;
}
/* Keep the external/dark panel as-is */
[data-theme="dark"] .ai-tool-showcase-panel--external {
    background: linear-gradient(160deg, #0a1628 0%, #123150 100%) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
/* SAP-native cards: transparent overlay on dark navy (same as external) */
[data-theme="dark"] .ai-tool-showcase-panel:not(.ai-tool-showcase-panel--external) .ai-tool-card {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(145, 184, 226, 0.14) !important;
}
/* Product name (strong) — make white in dark mode */
[data-theme="dark"] .ai-tool-card strong {
    color: #ffffff !important;
}
/* Description span — soft blue-white */
[data-theme="dark"] .ai-tool-card span:last-child {
    color: rgba(214, 232, 248, 0.76) !important;
}
/* SAP badge mark — bright teal on dark navy */
[data-theme="dark"] .ai-tool-card--sap .ai-tool-mark {
    background: rgba(0, 194, 203, 0.18) !important;
    color: #7EEAEA !important;
}
/* Other vendor marks — brighter versions for dark bg */
[data-theme="dark"] .ai-tool-card--openai .ai-tool-mark {
    background: rgba(16, 185, 129, 0.18) !important;
    color: #34D399 !important;
}
[data-theme="dark"] .ai-tool-card--anthropic .ai-tool-mark {
    background: rgba(249, 115, 22, 0.18) !important;
    color: #FB923C !important;
}
[data-theme="dark"] .ai-tool-card--google .ai-tool-mark {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #60A5FA !important;
}
[data-theme="dark"] .ai-tool-card--cursor .ai-tool-mark {
    background: rgba(99, 102, 241, 0.18) !important;
    color: #818CF8 !important;
}
/* Showcase kicker label */
[data-theme="dark"] .ai-tool-showcase-kicker {
    color: #2DD4BF !important;
}

/* ----- AI Principle callout card (semi-transparent white) ----- */
[data-theme="dark"] .ai-automation-principle-callout {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .ai-automation-principle-callout h4 {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .ai-automation-principle-callout p {
    color: var(--t-text-2) !important;
}

/* ----- AI Principles cards (rgba white overlays) ----- */
[data-theme="dark"] .ai-automation-principles-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .ai-automation-principles-card h3,
[data-theme="dark"] .ai-automation-principles-card h4 {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .ai-automation-principles-card p,
[data-theme="dark"] .ai-automation-principles-card li {
    color: var(--t-text-2) !important;
}

/* ----- AI Automation sections ----- */
[data-theme="dark"] .ai-automation-principles {
    background: var(--t-bg-1) !important;
}
[data-theme="dark"] .ai-automation-overview {
    background: var(--t-bg-0) !important;
}
[data-theme="dark"] .ai-automation-overview-signal {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .ai-tool-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .ai-capability-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .ai-capability-card h3,
[data-theme="dark"] .ai-capability-card h4 {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .ai-capability-card p {
    color: var(--t-text-2) !important;
}
[data-theme="dark"] .ai-method-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .ai-method-card h3,
[data-theme="dark"] .ai-method-card h4 {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .ai-automation-usecases {
    background: var(--t-bg-0) !important;
}
[data-theme="dark"] .ai-usecase-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .ai-usecase-card h3,
[data-theme="dark"] .ai-usecase-card h4 {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .ai-automation-cta-shell {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}

/* ----- Miscellaneous section backgrounds ----- */
[data-theme="dark"] .service-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .info-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .client-logo-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .contact-form-wrapper {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .mobile-drawer {
    background: var(--t-bg-0) !important;
}
[data-theme="dark"] .dropdown-menu-content {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}

/* ----- Body / page background final fallback ----- */
[data-theme="dark"] body,
[data-theme="dark"] main,
[data-theme="dark"] .page-wrapper {
    background: var(--t-bg-0) !important;
}

/* ----- Generic paragraph/text inside any remaining white sections ----- */
[data-theme="dark"] .offer-card p,
[data-theme="dark"] .playbook-card p,
[data-theme="dark"] .service-conversion-card p,
[data-theme="dark"] .challenge-signal-card p,
[data-theme="dark"] .service-capability-card p,
[data-theme="dark"] .service-phase-card p,
[data-theme="dark"] .service-deliverable-card p,
[data-theme="dark"] .service-post-card p,
[data-theme="dark"] .solution-challenge-card p,
[data-theme="dark"] .solution-scenario-card p,
[data-theme="dark"] .solution-related-card p,
[data-theme="dark"] .solution-architecture-card p,
[data-theme="dark"] .solution-journey-card p,
[data-theme="dark"] .ai-tool-card p,
[data-theme="dark"] .ai-usecase-card p,
[data-theme="dark"] .ai-method-card p,
[data-theme="dark"] .ai-automation-cta-shell p {
    color: var(--t-text-2) !important;
}

/* ----- Heading overrides inside cards (for var(--brand-navy) hardcoded colors) ----- */
[data-theme="dark"] .offer-card h3,
[data-theme="dark"] .deliverables-list li strong,
[data-theme="dark"] .outcome-list li strong,
[data-theme="dark"] .service-deliverable-card h3,
[data-theme="dark"] .service-deliverable-card h4,
[data-theme="dark"] .solution-architecture-card h3,
[data-theme="dark"] .solution-journey-card h3,
[data-theme="dark"] .ai-automation-cta-shell h2,
[data-theme="dark"] .ai-automation-cta-shell h3 {
    color: var(--t-text-0) !important;
}

/* ==========================================================================
   SECTION 25. COMPREHENSIVE DARK MODE FIXES
   Covers every remaining class with light backgrounds or dark hardcoded text.
   All rules are [data-theme="dark"] scoped — light mode is untouched.
   ========================================================================== */

/* ----- 25.1  ai-automation-principles-card: heading (strong) + kicker ----- */
/* The first card (.ai-automation-principles-card without --contrast) uses
   rgba(255,255,255,0.94) background in styles.css and `color: var(--primary-navy)`
   for the <strong> heading. Needs explicit override. */
[data-theme="dark"] .ai-automation-principles-card strong {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .ai-automation-principles-card .ai-automation-principles-card-kicker {
    color: #4DD9E0 !important;
}
[data-theme="dark"] .ai-automation-principles-list li {
    color: var(--t-text-2) !important;
}

/* ----- 25.2  ai-automation-principles section left-column text ----- */
[data-theme="dark"] .ai-automation-section-title {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .ai-automation-section-body {
    color: var(--t-text-2) !important;
}
[data-theme="dark"] .ai-automation-section-body--secondary {
    color: var(--t-text-2) !important;
}

/* ----- 25.3  ai-automation-overview section text & signal cards ----- */
[data-theme="dark"] .ai-automation-overview-body {
    color: var(--t-text-2) !important;
}
[data-theme="dark"] .ai-overview-list li {
    color: var(--t-text-2) !important;
}
[data-theme="dark"] .ai-automation-overview-signal strong {
    color: var(--t-text-0) !important;
}

/* ----- 25.4  ai-automation-capabilities section & card internals ----- */
[data-theme="dark"] .ai-automation-capabilities {
    background: var(--t-bg-1) !important;
}
[data-theme="dark"] .ai-capability-index {
    color: var(--t-border) !important;
}
[data-theme="dark"] .ai-capability-meta span {
    background: rgba(77, 148, 255, 0.12) !important;
    color: var(--t-accent) !important;
}

/* ----- 25.5  ai-automation-method section & card internals ----- */
[data-theme="dark"] .ai-automation-method {
    background: var(--t-bg-1) !important;
}
[data-theme="dark"] .ai-method-index {
    color: var(--t-border) !important;
}

/* ----- 25.6  ai-automation-cta outer section (not just the shell) ----- */
[data-theme="dark"] .ai-automation-cta {
    background: var(--t-bg-1) !important;
    border-top-color: var(--t-border) !important;
}

/* ----- 25.7  gradient-text (background-clip: text) fix in dark mode ----- */
/* .gradient-text uses background-clip gradient with dark blues — invisible on dark bg */
[data-theme="dark"] .gradient-text {
    background: linear-gradient(135deg, #4DD9E0, #4D94FF) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ----- 25.8  delivery-phase-icon gradient text (dark navy gradient) ----- */
/* styles.css uses background-clip: text with dark navy gradient — invisible in dark */
[data-theme="dark"] .delivery-phase-icon {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--t-accent) !important;
    color: var(--t-accent) !important;
}

/* ----- 25.9  topology board columns (light bg in homelight) ----- */
/* topology-board-column variants inside the non-dark hero section */
[data-theme="dark"] .topology-board-column {
    background: linear-gradient(180deg, rgba(26, 29, 37, 0.9), rgba(19, 21, 27, 0.7)) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .topology-stage-card {
    background: linear-gradient(180deg, rgba(26, 29, 37, 0.6), rgba(19, 21, 27, 0.4)) !important;
    border-color: var(--t-border) !important;
    color: var(--t-text-1) !important;
}
[data-theme="dark"] .topology-stage-title {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .topology-stage-copy {
    color: var(--t-text-2) !important;
}
[data-theme="dark"] .topology-stage-badge {
    color: var(--t-text-3) !important;
}
[data-theme="dark"] .topology-board-phase-index {
    background: rgba(12, 13, 17, 0.9) !important;
    border-color: rgba(77, 148, 255, 0.3) !important;
    color: var(--t-accent) !important;
}
[data-theme="dark"] .topology-board-phase-label {
    color: var(--t-text-1) !important;
}
[data-theme="dark"] .topology-board-signal {
    color: var(--t-text-3) !important;
    border-top-color: var(--t-border) !important;
}
[data-theme="dark"] .topology-stage-card:hover {
    background: linear-gradient(180deg, rgba(30, 34, 44, 0.9), rgba(22, 25, 32, 0.8)) !important;
    border-color: var(--t-accent) !important;
}
[data-theme="dark"] .topology-stage-card:hover .topology-stage-title {
    color: var(--t-text-0) !important;
}

/* ----- 25.10  home-hero white/light elements ----- */
/* home-hero brief box (rgba white) */
[data-theme="dark"] .home-hero-brief {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .home-hero-brief-label {
    color: var(--t-accent) !important;
}
[data-theme="dark"] .home-hero-brief p {
    color: var(--t-text-2) !important;
}

/* ----- 25.11  company alliance cards (rgba white) ----- */
[data-theme="dark"] .company-alliance-section {
    background: var(--t-bg-1) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .company-alliance-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .company-alliance-title {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .company-alliance-intro {
    color: var(--t-text-2) !important;
}
[data-theme="dark"] .company-alliance-group-label {
    color: var(--t-text-3) !important;
}

/* ----- 25.12  company profile section & cards (rgba/gradient white) ----- */
[data-theme="dark"] .company-profile-section {
    background: var(--t-bg-0) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .company-profile-callout {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
    color: var(--t-text-1) !important;
}
[data-theme="dark"] .company-profile-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .company-profile-card h3,
[data-theme="dark"] .company-profile-copy h2 {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .company-profile-card p,
[data-theme="dark"] .company-profile-copy > p {
    color: var(--t-text-2) !important;
}
[data-theme="dark"] .company-profile-points li {
    color: var(--t-text-1) !important;
}

/* ----- 25.13  alliance architecture section (white gradient bg) ----- */
[data-theme="dark"] .alliance-architecture-section {
    background: var(--t-bg-0) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .alliance-architecture-copy h2 {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .alliance-architecture-copy p {
    color: var(--t-text-2) !important;
}
[data-theme="dark"] .alliance-architecture-points li {
    color: var(--t-text-1) !important;
}

/* ----- 25.14  form input field (var(--white) bg) ----- */
[data-theme="dark"] .form-input {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .form-input::placeholder {
    color: var(--t-text-3) !important;
}

/* ----- 25.15  info-card title (var(--deep-slate) = #0B1F3B) ----- */
[data-theme="dark"] .info-title {
    color: var(--t-text-0) !important;
}

/* ----- 25.16  service pill / roadmap chip (dark text on translucent bg) ----- */
[data-theme="dark"] .service-pill,
[data-theme="dark"] .service-roadmap-chip {
    background: rgba(77, 148, 255, 0.1) !important;
    color: var(--t-accent) !important;
}

/* ----- 25.17  ai-usecase-tags chips (dark blue text on light bg) ----- */
[data-theme="dark"] .ai-usecase-tags span {
    background: rgba(77, 148, 255, 0.1) !important;
    color: var(--t-accent) !important;
}

/* ----- 25.18  ai-platform-pill — already dark-on-dark in hero;
   no change needed for dark mode. ai-automation-hero-note similar.
   Just ensure text visibility inside the light principles section. ----- */
[data-theme="dark"] .ai-platform-pill {
    border-color: rgba(77, 148, 255, 0.2) !important;
    background: rgba(77, 148, 255, 0.07) !important;
    color: var(--t-text-1) !important;
}

/* ----- 25.19  value-evidence-section (dark bg — already readable,
   but section heading / inner text override for safety) ----- */
[data-theme="dark"] .value-evidence-header .section-title,
[data-theme="dark"] .value-evidence-header p {
    color: var(--t-text-0) !important;
}

/* ----- 25.20  solution-architecture / journey card step numbers ----- */
[data-theme="dark"] .solution-architecture-step,
[data-theme="dark"] .solution-journey-number {
    color: var(--t-border) !important;
}

/* ----- 25.21  service-deliverable-window / solution-scenario-tag ----- */
[data-theme="dark"] .service-deliverable-window,
[data-theme="dark"] .solution-scenario-tag {
    color: var(--t-accent) !important;
}

/* ----- 25.22  service phase hero headings (if inside light bg section) ----- */
[data-theme="dark"] .service-phase-card p {
    color: var(--t-text-2) !important;
}

/* ----- 25.23  topology-board-phase-index (semi-transparent white in
   the alternative layout at styles.css L5520-5534) ----- */
[data-theme="dark"] .topology-board-phase-index {
    background: rgba(12, 13, 17, 0.9) !important;
    color: var(--t-accent) !important;
}
[data-theme="dark"] .topology-board-phase-label {
    color: var(--t-text-1) !important;
}

/* ----- 25.24  ai-automation-principles strip (bottom strip tags) ----- */
/* Already has semi-transparent white bg on dark shell — OK in dark mode.
   Add safety override for light mode where these appear. ----- */

/* ----- 25.25  general: any remaining var(--brand-navy) / var(--primary-navy)
   text inside card elements on dark pages not yet caught by attribute selectors ----- */
[data-theme="dark"] .playbook-card h4,
[data-theme="dark"] .service-phase-card h4,
[data-theme="dark"] .challenge-signal-card h3,
[data-theme="dark"] .challenge-signal-card h4 {
    color: var(--t-text-0) !important;
}

/* ----- 25.26  btp-capability-card inside solution pages
   (inherits default white bg from solution-delivery-section) ----- */
[data-theme="dark"] .btp-capability-card {
    background: var(--t-bg-2) !important;
    border-color: var(--t-border) !important;
}
[data-theme="dark"] .btp-capability-title {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .btp-capability-kicker {
    color: var(--t-accent) !important;
}

/* ----- 25.27  service-acceptance-strip inside white service-phase-card ----- */
[data-theme="dark"] .service-acceptance-strip {
    border-top-color: var(--t-border) !important;
}
[data-theme="dark"] .service-acceptance-strip > span {
    color: var(--t-accent) !important;
}

/* ----- 25.28  ai-related-card (already on dark bg — just guard headings) ----- */
[data-theme="dark"] .ai-automation-related {
    /* Already has dark gradient bg — preserve it */
}
[data-theme="dark"] .ai-related-card h3 {
    color: var(--t-text-0) !important;
}

/* ----- 25.29  solution-journey-card internals ----- */
[data-theme="dark"] .solution-journey-card p {
    color: var(--t-text-2) !important;
}

/* ----- 25.30  company-profile-card kicker ----- */
[data-theme="dark"] .company-profile-kicker {
    color: #4DD9E0 !important;
}

/* ----- 25.31  home topology shell guard (already dark by design) ----- */
/* topology-filter-chip and home-topology-timeline / mobile-card already
   have dark backgrounds in styles.css — safe in dark mode. No override needed. */

/* ----- 25.32  Process section (bg: #FFFFFF) ----- */
/* Already covered by [data-theme="dark"] .process-section at L1765 */

/* ----- 25.33  Global: dark hardcoded text #2D3748 / #1A202C inside
   any remaining content blocks ----- */
[data-theme="dark"] .home-delivery-section .home-delivery-eyebrow {
    color: var(--t-accent) !important;
}

/* -------------------------------------------------------------------------
   27. SHARED PAGE REDESIGN LAYER
   ------------------------------------------------------------------------- */
[data-theme="light"] body {
    background:
        radial-gradient(circle at top left, rgba(41, 118, 255, 0.05), transparent 26%),
        radial-gradient(circle at bottom right, rgba(39, 197, 255, 0.04), transparent 22%),
        #ffffff !important;
}

[data-theme="light"] .section,
[data-theme="light"] main .section {
    background: #ffffff !important;
}

[data-theme="light"] .t-bg-1,
[data-theme="light"] .home-delivery-section,
[data-theme="light"] .service-delivery-section,
[data-theme="light"] .solution-challenge-section,
[data-theme="light"] .solution-scenario-section,
[data-theme="light"] .challenge-signals-section,
[data-theme="light"] .service-capability-section,
[data-theme="light"] .ai-automation-principles {
    background:
        linear-gradient(180deg, rgba(243, 248, 255, 0.96) 0%, #ffffff 100%) !important;
}

[data-theme="light"] .service-metrics-section,
[data-theme="light"] .solution-kpi-section,
[data-theme="light"] .home-command-section {
    background:
        radial-gradient(circle at top right, rgba(52, 120, 246, 0.08), transparent 24%),
        linear-gradient(180deg, #f7fbff 0%, #ffffff 100%) !important;
    border-top: 1px solid rgba(15, 37, 74, 0.08) !important;
    border-bottom: 1px solid rgba(15, 37, 74, 0.08) !important;
}

[data-theme="light"] .service-metrics-section .section-title,
[data-theme="light"] .service-metrics-section .service-section-lead,
[data-theme="light"] .service-metrics-section .eyebrow,
[data-theme="light"] .solution-kpi-section .section-title,
[data-theme="light"] .solution-kpi-section .service-section-lead,
[data-theme="light"] .solution-kpi-section .eyebrow {
    color: #10213a !important;
}

[data-theme="light"] .service-metric-card,
[data-theme="light"] .solution-kpi-card,
[data-theme="light"] .home-command-card,
[data-theme="light"] .delivery-phase-card,
[data-theme="light"] .service-deliverable-card,
[data-theme="light"] .service-post-card,
[data-theme="light"] .solution-challenge-card,
[data-theme="light"] .solution-scenario-card,
[data-theme="light"] .solution-related-card,
[data-theme="light"] .solution-architecture-card,
[data-theme="light"] .solution-journey-card,
[data-theme="light"] .service-capability-card,
[data-theme="light"] .challenge-signal-card,
[data-theme="light"] .service-phase-card,
[data-theme="light"] .service-playbook-shell,
[data-theme="light"] .service-conversion-card,
[data-theme="light"] .ai-automation-principles-card,
[data-theme="light"] .ai-automation-principle-callout,
[data-theme="light"] .ai-automation-overview-signal,
[data-theme="light"] .t-content-box {
    background: linear-gradient(180deg, #ffffff 0%, #fdfefe 100%) !important;
    border: 1px solid rgba(15, 37, 74, 0.1) !important;
    box-shadow:
        0 12px 32px rgba(15, 23, 42, 0.06),
        0 2px 6px rgba(15, 23, 42, 0.03) !important;
}

[data-theme="light"] .service-metric-card:hover,
[data-theme="light"] .solution-kpi-card:hover,
[data-theme="light"] .home-command-card:hover,
[data-theme="light"] .delivery-phase-card:hover,
[data-theme="light"] .service-deliverable-card:hover,
[data-theme="light"] .service-post-card:hover,
[data-theme="light"] .solution-challenge-card:hover,
[data-theme="light"] .solution-scenario-card:hover,
[data-theme="light"] .solution-related-card:hover,
[data-theme="light"] .solution-architecture-card:hover,
[data-theme="light"] .solution-journey-card:hover,
[data-theme="light"] .service-capability-card:hover,
[data-theme="light"] .challenge-signal-card:hover,
[data-theme="light"] .t-content-box:hover {
    border-color: rgba(28, 99, 221, 0.34) !important;
    box-shadow:
        0 18px 44px rgba(15, 23, 42, 0.08),
        0 0 0 1px rgba(28, 99, 221, 0.04) !important;
}

[data-theme="light"] .service-metric-role,
[data-theme="light"] .solution-scenario-tag,
[data-theme="light"] .service-deliverable-window,
[data-theme="light"] .home-command-kicker,
[data-theme="light"] .eyebrow {
    color: #1f63dd !important;
}

[data-theme="light"] .service-metric-value,
[data-theme="light"] .solution-kpi-value,
[data-theme="light"] .solution-architecture-step,
[data-theme="light"] .solution-journey-number {
    color: #13294b !important;
}

[data-theme="light"] .service-metric-label,
[data-theme="light"] .solution-kpi-label,
[data-theme="light"] .service-metric-note,
[data-theme="light"] .solution-kpi-note,
[data-theme="light"] .solution-journey-copy,
[data-theme="light"] .solution-scenario-before,
[data-theme="light"] .solution-scenario-after,
[data-theme="light"] .solution-related-card p,
[data-theme="light"] .service-deliverable-card p,
[data-theme="light"] .service-post-card p,
[data-theme="light"] .service-capability-card p,
[data-theme="light"] .challenge-signal-card,
[data-theme="light"] .service-phase-hero p,
[data-theme="light"] .service-phase-card p {
    color: #5f6c82 !important;
}

[data-theme="dark"] body {
    background:
        radial-gradient(circle at top left, rgba(36, 107, 214, 0.12), transparent 25%),
        radial-gradient(circle at bottom right, rgba(0, 196, 255, 0.08), transparent 24%),
        #07111f !important;
}

[data-theme="dark"] .section,
[data-theme="dark"] main .section {
    background: #07111f !important;
}

[data-theme="dark"] .t-bg-1,
[data-theme="dark"] .home-delivery-section,
[data-theme="dark"] .service-delivery-section,
[data-theme="dark"] .solution-challenge-section,
[data-theme="dark"] .solution-scenario-section,
[data-theme="dark"] .challenge-signals-section,
[data-theme="dark"] .service-capability-section,
[data-theme="dark"] .ai-automation-principles {
    background:
        linear-gradient(180deg, rgba(10, 22, 39, 0.98) 0%, rgba(8, 17, 31, 1) 100%) !important;
}

[data-theme="dark"] .service-metrics-section,
[data-theme="dark"] .solution-kpi-section,
[data-theme="dark"] .home-command-section {
    background:
        radial-gradient(circle at top right, rgba(72, 137, 255, 0.18), transparent 22%),
        linear-gradient(180deg, #0a1628 0%, #07111f 100%) !important;
    border-top: 1px solid rgba(114, 149, 212, 0.12) !important;
    border-bottom: 1px solid rgba(114, 149, 212, 0.12) !important;
}

[data-theme="dark"] .service-metric-card,
[data-theme="dark"] .solution-kpi-card,
[data-theme="dark"] .home-command-card,
[data-theme="dark"] .delivery-phase-card,
[data-theme="dark"] .service-deliverable-card,
[data-theme="dark"] .service-post-card,
[data-theme="dark"] .solution-challenge-card,
[data-theme="dark"] .solution-scenario-card,
[data-theme="dark"] .solution-related-card,
[data-theme="dark"] .solution-architecture-card,
[data-theme="dark"] .solution-journey-card,
[data-theme="dark"] .service-capability-card,
[data-theme="dark"] .challenge-signal-card,
[data-theme="dark"] .service-phase-card,
[data-theme="dark"] .service-playbook-shell,
[data-theme="dark"] .service-conversion-card,
[data-theme="dark"] .ai-automation-principles-card,
[data-theme="dark"] .ai-automation-principle-callout,
[data-theme="dark"] .ai-automation-overview-signal,
[data-theme="dark"] .t-content-box {
    background: linear-gradient(180deg, rgba(13, 26, 44, 0.96) 0%, rgba(9, 18, 32, 0.98) 100%) !important;
    border: 1px solid rgba(124, 163, 255, 0.18) !important;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .service-metric-card:hover,
[data-theme="dark"] .solution-kpi-card:hover,
[data-theme="dark"] .home-command-card:hover,
[data-theme="dark"] .delivery-phase-card:hover,
[data-theme="dark"] .service-deliverable-card:hover,
[data-theme="dark"] .service-post-card:hover,
[data-theme="dark"] .solution-challenge-card:hover,
[data-theme="dark"] .solution-scenario-card:hover,
[data-theme="dark"] .solution-related-card:hover,
[data-theme="dark"] .solution-architecture-card:hover,
[data-theme="dark"] .solution-journey-card:hover,
[data-theme="dark"] .service-capability-card:hover,
[data-theme="dark"] .challenge-signal-card:hover,
[data-theme="dark"] .t-content-box:hover {
    border-color: rgba(98, 176, 255, 0.42) !important;
    box-shadow:
        0 24px 52px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(98, 176, 255, 0.08),
        0 0 24px rgba(46, 210, 255, 0.08) !important;
}

[data-theme="dark"] .service-metric-role,
[data-theme="dark"] .solution-scenario-tag,
[data-theme="dark"] .service-deliverable-window,
[data-theme="dark"] .home-command-kicker,
[data-theme="dark"] .eyebrow {
    color: #67d9ff !important;
}

.client-logo-wall {
    position: relative;
}

.client-logo-wall-grid {
    position: relative;
    padding: 30px 34px;
    border-radius: 22px;
    gap: 40px !important;
}

.client-logo-wall-item {
    filter: grayscale(100%) brightness(0.42);
    opacity: 0.72;
}

.client-logo-wall-item:hover {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    transform: translateY(-2px);
}

[data-theme="dark"] .client-logo-wall-grid {
    background:
        radial-gradient(circle at top right, rgba(72, 137, 255, 0.12), transparent 18%),
        linear-gradient(180deg, rgba(10, 22, 39, 0.88) 0%, rgba(7, 17, 31, 0.96) 100%) !important;
    border: 1px solid rgba(124, 163, 255, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 24px 56px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .client-logo-wall-item {
    filter: grayscale(100%) brightness(1.6) contrast(0.82);
    opacity: 0.78;
}

[data-theme="dark"] .client-logo-wall-item:hover {
    filter: grayscale(0%) brightness(1.04) contrast(1);
    opacity: 1;
}

[data-theme="light"] .ai-automation-principles-card--contrast {
    background: linear-gradient(165deg, rgba(10, 24, 42, 0.96), rgba(16, 50, 87, 0.94)) !important;
    border-color: rgba(145, 184, 226, 0.2) !important;
    box-shadow: 0 18px 38px rgba(8, 26, 48, 0.18) !important;
}

[data-theme="light"] .ai-automation-principles-card--contrast .ai-automation-principles-card-kicker {
    color: #8feaf0 !important;
}

[data-theme="light"] .ai-automation-principles-card--contrast strong {
    color: #ffffff !important;
}

[data-theme="light"] .ai-automation-principles-card--contrast .ai-automation-principles-list li {
    color: rgba(226, 236, 248, 0.9) !important;
}

[data-theme="light"] .ai-automation-principles-strip span {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(15, 37, 74, 0.12) !important;
    color: #18304f !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .ai-tool-showcase-panel--external {
    background: linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%) !important;
    border: 1px solid rgba(15, 37, 74, 0.1) !important;
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

[data-theme="light"] .ai-tool-showcase-panel--external .ai-tool-showcase-kicker {
    color: #16365a !important;
}

[data-theme="light"] .ai-tool-showcase-panel--external .ai-tool-disclaimer {
    color: #5f6c82 !important;
}
[data-theme="dark"] .home-hero-subrail {
    color: var(--t-text-3) !important;
}

/* ----- 25.34  ai-automation-overview: ensure heading h2 visibility ----- */
/* The h2 inside .ai-automation-overview-copy uses inline style
   color: var(--primary-navy) — already caught by attribute selector at L144,
   but add class-level safety: */
[data-theme="dark"] .ai-automation-overview-copy h2 {
    color: var(--t-text-0) !important;
}
[data-theme="dark"] .ai-automation-overview-copy .eyebrow {
    color: var(--t-accent) !important;
}

/* ==========================================================================
   26. NEW THEMED UTILITIES & COMPONENTS
   ========================================================================== */

/* Background Utilities */
.t-bg-0 { background-color: var(--t-bg-0) !important; }
.t-bg-1 { background-color: var(--t-bg-1) !important; }
.t-bg-2 { background-color: var(--t-bg-2) !important; }
.t-bg-elevated { background-color: var(--t-bg-elevated) !important; }

/* Text Color Utilities */
.t-text-0 { color: var(--t-text-0) !important; }
.t-text-1 { color: var(--t-text-1) !important; }
.t-text-2 { color: var(--t-text-2) !important; }
.t-text-3 { color: var(--t-text-3) !important; }

/* Content Box Component */
.t-content-box {
    background: var(--t-bg-elevated) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-r-md) !important;
    padding: 32px !important;
    box-shadow: var(--t-shadow-sm) !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

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

/* Optional top accent for boxes */
.t-content-box.t-accent-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--t-accent);
    opacity: 0.8;
}

/* Optional green top accent (as requested) */
.t-content-box.t-green-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--t-green);
    opacity: 0.8;
}

/* Box titles and text internals */
.t-content-box h3, 
.t-content-box h4 {
    margin-top: 0 !important;
    color: var(--t-text-0) !important;
}

.t-content-box p {
    color: var(--t-text-1) !important;
    margin-bottom: 0 !important;
}

/* Icon backgrounds inside boxes */
.t-box-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--t-accent-soft) !important;
    color: var(--t-accent) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 24px;
    transition: transform 0.3s ease !important;
}

.t-content-box:hover .t-box-icon {
    transform: scale(1.1) rotate(-5deg) !important;
}

/* Readability helpers for Privacy/Terms */
.t-legal-content {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
    color: var(--t-text-1) !important;
}

.t-legal-content h3 {
    color: var(--t-text-0) !important;
    margin-top: 40px !important;
    margin-bottom: 16px !important;
}

.t-legal-note {
    text-align: center;
    padding: 40px;
    background: var(--t-bg-1) !important;
    border-radius: var(--t-r-md) !important;
    border: 1px solid var(--t-border) !important;
}