/* ═══════════════════════════════════════════════════════════════════════════
   HAXANTECH — ENTERPRISE BLACK & WHITE THEME
   Design language: Clean / Authoritative / Premium
   Inspired by: Apple · Stripe · McKinsey · Goldman Sachs
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ───────────────────────────────────────────────────── */
:root {
    --gold:          #0a0a0a;
    --accent:        #444444;
    --dark:          #ffffff;
    --dark-2:        #f7f7f7;
    --dark-3:        #f0f0f0;
    --dark-4:        #e8e8e8;
    --light:         #0a0a0a;
    --muted:         #555555;
    --muted-2:       #999999;
    --gradient:      linear-gradient(135deg, #0a0a0a 0%, #444444 100%);
    --gradient-soft: linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.02));

    /* Enterprise accent line */
    --rule:   rgba(0,0,0,.09);
    --shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
    --shadow-hover: 0 4px 12px rgba(0,0,0,.08), 0 16px 40px rgba(0,0,0,.07);
}

/* ── 2. BASE ─────────────────────────────────────────────────────────────── */
html { background: #ffffff !important; }

body {
    background: #ffffff !important;
    color: #0a0a0a !important;
    cursor: auto !important;
}
::selection { background: #0a0a0a !important; color: #ffffff !important; }

/* ── 3. CANVAS ANIMATIONS → GRAYSCALE ──────────────────────────────────── */
canvas { filter: grayscale(1) brightness(0.5) opacity(0.4) !important; }
#aurora-canvas { filter: grayscale(1) brightness(0.15) opacity(0.15) !important; }
#grid-floor { filter: grayscale(1) brightness(0.8) opacity(0.12) !important; }

/* Particles & trails */
.particle { background: rgba(0,0,0,.06) !important; }
.particles { opacity: 0.4 !important; }

/* ── 4. NOISE OVERLAY ────────────────────────────────────────────────────── */
.noise { opacity: .02 !important; }

/* ── 5. PRELOADER ────────────────────────────────────────────────────────── */
.preloader {
    background: #ffffff !important;
}
.preloader-logo {
    background: linear-gradient(135deg, #000, #555) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: none !important;
    opacity: 1 !important;
}
.preloader-bar {
    background: rgba(0,0,0,.08) !important;
}
.preloader-bar::after {
    background: #0a0a0a !important;
}

/* ── 6. CUSTOM CURSOR ────────────────────────────────────────────────────── */
.cursor { display: none !important; }
.cursor-follower { display: none !important; }
body { cursor: auto !important; }
button, a, [role="button"] { cursor: pointer !important; }

/* ── 7. SCROLL PROGRESS ──────────────────────────────────────────────────── */
.scroll-progress {
    background: #0a0a0a !important;
    box-shadow: none !important;
    height: 2px !important;
}

/* ── 8. SCROLLBAR ────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px !important; }
::-webkit-scrollbar-track { background: #f7f7f7 !important; }
::-webkit-scrollbar-thumb { background: #cccccc !important; border-radius: 2px !important; box-shadow: none !important; }

/* ── 9. NAVIGATION ───────────────────────────────────────────────────────── */
.nav {
    background: rgba(255,255,255,.94) !important;
    border-bottom: none !important;
    padding: .9rem 0 !important;
    backdrop-filter: blur(28px) saturate(220%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(220%) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 40px rgba(0,0,0,.06) !important;
}
/* Purple-to-cyan gradient accent line */
.nav::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    height: 1.5px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(124,58,237,.5) 20%, rgba(109,40,217,.8) 45%, rgba(6,182,212,.6) 72%, transparent 100%) !important;
    pointer-events: none !important;
}
.nav.scrolled {
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.07), 0 12px 48px rgba(0,0,0,.09) !important;
}

/* Logo icon + text */
.nav-logo-icon { color: #0a0a0a !important; transition: transform .4s cubic-bezier(.16,1,.3,1) !important; }
.nav-logo:hover .nav-logo-icon { transform: rotate(30deg) scale(1.08) !important; }
.nav-logo span,
a.nav-logo span {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 60%, #444 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    letter-spacing: -.045em !important;
    font-size: 1.35rem !important;
}

/* Nav links */
.nav-link {
    color: #606060 !important;
    font-size: .82rem !important;
    font-weight: 500 !important;
    letter-spacing: .005em !important;
    transition: color .3s !important;
}
.nav-link:hover, .nav-link.active { color: #0a0a0a !important; }
.nav-link::after {
    background: linear-gradient(90deg, #7C3AED, #06B6D4) !important;
    height: 1.5px !important;
}

/* Divider between links and CTA */
.nav-divider {
    width: 1px !important;
    height: 18px !important;
    background: rgba(0,0,0,.1) !important;
    margin: 0 .5rem !important;
}

/* CTA button */
.nav-cta {
    color: #ffffff !important;
    background: #0d0d0d !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    padding: .6rem 1.4rem !important;
    letter-spacing: .02em !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.15) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem !important;
    transition: all .3s cubic-bezier(.16,1,.3,1) !important;
}
.nav-cta-arrow {
    transition: transform .3s !important;
    display: inline-block !important;
}
.nav-cta:hover .nav-cta-arrow { transform: translateX(3px) !important; }
.nav-cta::before { background: linear-gradient(135deg, #3b0f8a, #7C3AED 50%, #06B6D4) !important; }
.nav-cta:hover {
    box-shadow: 0 6px 28px rgba(109,40,217,.4), 0 2px 8px rgba(0,0,0,.2) !important;
    transform: translateY(-2px) !important;
}

/* Admin button */
.nav-admin-btn {
    border-color: rgba(0,0,0,.1) !important;
    color: rgba(0,0,0,.3) !important;
    font-size: .75rem !important;
    padding: .5rem 1rem !important;
    border-radius: 6px !important;
}
.nav-admin-btn:hover {
    color: #0a0a0a !important;
    border-color: rgba(0,0,0,.25) !important;
    background: rgba(0,0,0,.03) !important;
}
.nav-mobile-toggle { color: #0a0a0a !important; cursor: pointer !important; }

/* Mobile nav */
.nav-mobile-overlay { background: rgba(255,255,255,.8) !important; backdrop-filter: blur(8px) !important; }
.nav-mobile-drawer {
    background: #ffffff !important;
    border-left: 1px solid var(--rule) !important;
}
.nav-mobile-drawer a { color: #0a0a0a !important; border-bottom-color: var(--rule) !important; font-size: 1.1rem !important; }
.nav-mobile-drawer a:hover { color: #444 !important; }
.nav-mobile-close { color: #0a0a0a !important; cursor: pointer !important; }

@media (pointer: coarse), (max-width: 768px) {
    .nav.scrolled { background: rgba(255,255,255,.98) !important; }
    .mobile-cta { background: rgba(255,255,255,.97) !important; border-top-color: var(--rule) !important; }
    .industry-tag { background: rgba(255,255,255,.12) !important; }
    .nav-divider { display: none !important; }
}

/* ── 10. HERO ────────────────────────────────────────────────────────────── */
.hero {
    background: #ffffff !important;
    padding-top: 10rem !important;
    padding-bottom: 6rem !important;
    min-height: 100vh !important;
    align-items: center !important;
}

/* ── HERO SPLIT LAYOUT ───────────────────────────────────────────────────── */
.hero-inner.hero-split {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    gap: 3rem !important;
    max-width: 1320px !important;
}
.hero-content {
    flex: 0 0 auto !important;
    max-width: 540px !important;
    width: 100% !important;
}
.hero-visual {
    flex: 0 0 480px !important;
    width: 480px !important;
    position: relative !important;
}

/* Smaller hero title for split layout */
.hero-split .hero-title {
    font-size: clamp(2.6rem, 4.5vw, 4.2rem) !important;
    letter-spacing: -.055em !important;
}
.hero-split .hero-desc {
    font-size: 1.05rem !important;
    margin-bottom: 2.25rem !important;
    max-width: 460px !important;
}
.hero-split .hero-actions { justify-content: flex-start !important; }

/* ── AGENT PANEL ──────────────────────────────────────────────────────────── */
.agent-panel {
    background: #080808 !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.04),
        0 24px 64px rgba(0,0,0,.35),
        0 4px 16px rgba(0,0,0,.25) !important;
    font-family: 'IBM Plex Mono', 'SFMono-Regular', 'Consolas', monospace !important;
    position: relative !important;
    animation: panelFloat 6s ease-in-out infinite !important;
}
@keyframes panelFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-8px); }
}

/* Window chrome */
.ap-chrome {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    padding: .9rem 1.25rem !important;
    background: #111111 !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.ap-dots { display: flex; gap: .45rem; }
.ap-dots span {
    display: block !important;
    width: 11px !important; height: 11px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.15) !important;
}
.ap-dots span:nth-child(1) { background: #ff5f57 !important; }
.ap-dots span:nth-child(2) { background: #febc2e !important; }
.ap-dots span:nth-child(3) { background: #28c840 !important; }
.ap-chrome-title {
    flex: 1 !important;
    font-size: .72rem !important;
    color: rgba(255,255,255,.35) !important;
    letter-spacing: .04em !important;
    text-align: center !important;
    font-family: inherit !important;
}
.ap-live-badge {
    display: flex !important;
    align-items: center !important;
    gap: .4rem !important;
    font-size: .65rem !important;
    color: rgba(255,255,255,.4) !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    font-family: inherit !important;
}
.ap-live-dot {
    display: inline-block !important;
    width: 6px !important; height: 6px !important;
    border-radius: 50% !important;
    background: #4ade80 !important;
    animation: livePulse 1.8s ease-in-out infinite !important;
    box-shadow: 0 0 8px rgba(74,222,128,.6) !important;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(1.4); }
}

/* Agent rows */
.ap-agents { padding: .75rem 1.25rem !important; display: flex !important; flex-direction: column !important; gap: .1rem !important; }

.ap-agent {
    padding: .7rem 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
.ap-agent:last-child { border-bottom: none !important; }

.ap-agent-top {
    display: flex !important;
    align-items: flex-start !important;
    gap: .75rem !important;
    margin-bottom: .5rem !important;
}
.ap-agent-num {
    font-size: .68rem !important;
    color: rgba(255,255,255,.2) !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    font-family: inherit !important;
}
.ap-agent-info {
    flex: 1 !important;
    min-width: 0 !important;
}
.ap-agent-name {
    display: block !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.8) !important;
    letter-spacing: .01em !important;
    margin-bottom: 2px !important;
    font-family: inherit !important;
}
.ap-agent-msg {
    display: block !important;
    font-size: .66rem !important;
    color: rgba(255,255,255,.35) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: inherit !important;
    transition: color .4s !important;
}

/* Status dot */
.ap-status-dot {
    flex-shrink: 0 !important;
    width: 8px !important; height: 8px !important;
    border-radius: 50% !important;
    margin-top: 4px !important;
    transition: background .4s, box-shadow .4s !important;
}
.ap-status-dot.running {
    background: #ffffff !important;
    animation: agentPulse 1.2s ease-in-out infinite !important;
    box-shadow: 0 0 8px rgba(255,255,255,.5) !important;
}
.ap-status-dot.done {
    background: #4ade80 !important;
    box-shadow: 0 0 6px rgba(74,222,128,.5) !important;
    animation: none !important;
}
@keyframes agentPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .4; transform: scale(1.3); }
}

/* Progress bar */
.ap-bar-row {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
}
.ap-bar-track {
    flex: 1 !important;
    height: 3px !important;
    background: rgba(255,255,255,.08) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}
.ap-bar-fill {
    height: 100% !important;
    width: 0% !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    transition: none !important;
}
.ap-pct {
    font-size: .62rem !important;
    color: rgba(255,255,255,.3) !important;
    min-width: 28px !important;
    text-align: right !important;
    font-family: inherit !important;
    font-variant-numeric: tabular-nums !important;
}

/* Log */
.ap-log {
    background: rgba(0,0,0,.4) !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    padding: .65rem 1.25rem !important;
    min-height: 72px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow: hidden !important;
}
.ap-log-line {
    font-size: .62rem !important;
    color: rgba(255,255,255,.28) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: inherit !important;
    transition: color .3s !important;
}
.ap-log-line.ap-log-dim { color: rgba(255,255,255,.18) !important; }
.ap-log-line.ap-log-new { color: rgba(255,255,255,.5) !important; }
.ap-log-cursor {
    color: rgba(255,255,255,.5) !important;
    animation: blink .9s step-end infinite !important;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Footer stats */
.ap-footer {
    display: flex !important;
    align-items: center !important;
    padding: .75rem 1.25rem !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    background: #111111 !important;
    gap: 0 !important;
}
.ap-footer-stat {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
}
.ap-footer-val {
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -.02em !important;
}
.ap-footer-lbl {
    font-size: .55rem !important;
    color: rgba(255,255,255,.25) !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    font-family: inherit !important;
}
.ap-footer-divider {
    width: 1px !important;
    height: 28px !important;
    background: rgba(255,255,255,.07) !important;
    flex-shrink: 0 !important;
}

/* Notification chips */
.ap-notif {
    position: absolute !important;
    right: -16px !important;
    background: #0a0a0a !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.8) !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    padding: .45rem .9rem !important;
    border-radius: 100px !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.3) !important;
    opacity: 0 !important;
    transform: translateX(8px) !important;
    transition: opacity .5s ease, transform .5s ease !important;
    z-index: 5 !important;
    pointer-events: none !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
}
.ap-notif.ap-notif-show {
    opacity: 1 !important;
    transform: translateX(0) !important;
}
.ap-notif-1 { top: 18% !important; }
.ap-notif-2 { top: 48% !important; right: -8px !important; }
.ap-notif-3 { top: 76% !important; }

/* ── RESPONSIVE — agent panel ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .hero-inner.hero-split {
        flex-direction: column !important;
        text-align: center !important;
        gap: 4rem !important;
        align-items: center !important;
    }
    .hero-content { max-width: 640px !important; }
    .hero-split .hero-actions { justify-content: center !important; }
    .hero-split .hero-desc { max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
    .hero-visual { flex: none !important; width: 100% !important; max-width: 480px !important; }
    .ap-notif { display: none !important; }
    @keyframes panelFloat { 0%, 100% { transform: none; } }
}
.hero-bg-img {
    opacity: .06 !important;
    background-color: #ffffff !important;
}
.hero-mesh .orb {
    filter: saturate(0) brightness(0.6) !important;
    opacity: .08 !important;
}
.hero-vignette {
    background: radial-gradient(ellipse at 50% 60%, transparent 0%, rgba(255,255,255,.85) 65%, #ffffff 100%) !important;
}

/* Hero tag */
.hero-tag {
    background: #f0f0f0 !important;
    border: 1px solid rgba(0,0,0,.1) !important;
    color: #0a0a0a !important;
    border-radius: 4px !important;
    font-size: .68rem !important;
    letter-spacing: .12em !important;
}
.hero-tag .dot { background: #0a0a0a !important; box-shadow: none !important; }

/* Hero title */
.hero-title { letter-spacing: -.05em !important; line-height: 1.0 !important; color: #0a0a0a !important; }
.hero-desc { color: #555555 !important; }

/* Gradient text */
.gradient,
.hero-title .gradient,
.section-title .gradient,
.cta-title .gradient {
    background: linear-gradient(135deg, #0a0a0a 0%, #555555 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Buttons */
.btn-primary {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
    padding: 1rem 2.25rem !important;
    font-size: .88rem !important;
    letter-spacing: .01em !important;
}
.btn-primary::before { background: #333333 !important; }
.btn-primary:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.2) !important;
    transform: translateY(-2px) !important;
}
.btn-primary::after { background: none !important; }
.btn-secondary {
    color: #0a0a0a !important;
    border-color: rgba(0,0,0,.18) !important;
    border-radius: 6px !important;
    padding: 1rem 2.25rem !important;
    font-size: .88rem !important;
}
.btn-secondary:hover {
    border-color: rgba(0,0,0,.45) !important;
    background: rgba(0,0,0,.03) !important;
    transform: translateY(-2px) !important;
}

/* Hero scroll indicator */
.hero-scroll span { color: #999 !important; }
.hero-scroll .line { background: linear-gradient(to bottom, #999, transparent) !important; }

/* ── 11. TRUSTED / MARQUEE STRIP ────────────────────────────────────────── */
.trusted-section {
    border-top: 1px solid var(--rule) !important;
    border-bottom: 1px solid var(--rule) !important;
    background: #f7f7f7 !important;
    padding: 3.5rem 0 !important;
}
.trusted-label { color: #aaaaaa !important; font-size: .65rem !important; letter-spacing: .2em !important; }
.marquee-track span { color: #0a0a0a !important; opacity: .12 !important; font-size: 1rem !important; letter-spacing: .12em !important; }
.marquee-track span:hover { opacity: .35 !important; }

/* ── 12. STATS SECTION ──────────────────────────────────────────────────── */
.stats-section {
    background: #0a0a0a !important;
    position: relative;
}
.stats-section::before { background: none !important; }
.stats-section::after { display: none !important; }

/* Make stat text white (dark bg) */
.stat-number {
    background: linear-gradient(135deg, #ffffff, #cccccc) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: none !important;
    font-size: 4.5rem !important;
    font-weight: 900 !important;
}
.stat-label { color: rgba(255,255,255,.4) !important; letter-spacing: .1em !important; font-size: .75rem !important; }
.stat-item { padding: 4rem 1.5rem !important; }

/* ── 13. SECTION DEFAULTS ───────────────────────────────────────────────── */
.section { background: #ffffff !important; }
.section::before { background: none !important; }

.section-tag {
    background: #f0f0f0 !important;
    border: 1px solid rgba(0,0,0,.09) !important;
    color: #555555 !important;
    border-radius: 4px !important;
    font-size: .65rem !important;
    letter-spacing: .15em !important;
    font-weight: 700 !important;
    padding: .4rem 1rem !important;
}
.section-tag .num { color: #aaaaaa !important; }

.section-title { letter-spacing: -.04em !important; line-height: 1.08 !important; color: #0a0a0a !important; }
.section-desc { color: #666666 !important; font-size: 1.05rem !important; }

/* ── 14. BENTO / SERVICE CARDS ──────────────────────────────────────────── */
.bento-card {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: var(--shadow) !important;
    border-radius: 16px !important;
}
.bento-card:hover {
    border-color: rgba(0,0,0,.14) !important;
    box-shadow: var(--shadow-hover) !important;
    transform: translateY(-4px) scale(1.005) !important;
}
.bento-card::before { display: none !important; }
.bento-card::after { display: none !important; }
.bento-card .bento-shimmer { display: none !important; }

.bento-card.bento-lg .bento-visual::after {
    background: linear-gradient(to right, #ffffff, transparent 50%) !important;
}
.bento-num { color: rgba(0,0,0,.05) !important; font-family: inherit !important; }
.bento-card:hover .bento-num { color: rgba(0,0,0,.1) !important; }

.bento-tag {
    background: #f0f0f0 !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    color: #333333 !important;
    border-radius: 4px !important;
    font-size: .65rem !important;
    letter-spacing: .1em !important;
}
.bento-tag .dot { background: #0a0a0a !important; box-shadow: none !important; animation: none !important; }

.bento-icon {
    background: #f7f7f7 !important;
    border: 1px solid rgba(0,0,0,.09) !important;
    border-radius: 10px !important;
}
.bento-card h3 { color: #0a0a0a !important; font-size: 1.05rem !important; }
.bento-card p { color: #666666 !important; }
.bento-link { color: #0a0a0a !important; font-weight: 600 !important; }
.bento-link::after { background: #0a0a0a !important; }

/* ── 15. INDUSTRIES SECTION ─────────────────────────────────────────────── */
.industry-card { border-radius: 16px !important; }
.industry-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.82) 100%) !important;
}
.industry-card:hover .industry-overlay { opacity: .85 !important; }
.industry-tag {
    background: rgba(255,255,255,.1) !important;
    border-color: rgba(255,255,255,.15) !important;
    color: rgba(255,255,255,.65) !important;
    backdrop-filter: blur(6px) !important;
    font-size: .6rem !important;
    letter-spacing: .12em !important;
}
.industry-icon {
    background: rgba(255,255,255,.1) !important;
    border-color: rgba(255,255,255,.15) !important;
}
.industry-num { color: rgba(255,255,255,.06) !important; }
.industry-card:hover .industry-num { color: rgba(255,255,255,.14) !important; }
.industry-card h3 { color: #ffffff !important; }
.industry-card p { color: rgba(255,255,255,.6) !important; }
.industry-card::before { display: none !important; }
.industry-card::after { display: none !important; }
.industry-shimmer { display: none !important; }
.float-shape { display: none !important; }

/* ── 16. PORTFOLIO SECTION ──────────────────────────────────────────────── */
.portfolio-section { background: #f7f7f7 !important; }

.portfolio-card {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: var(--shadow) !important;
    border-radius: 16px !important;
}
.portfolio-card:hover {
    border-color: rgba(0,0,0,.14) !important;
    box-shadow: var(--shadow-hover) !important;
    transform: translateY(-6px) !important;
}
.portfolio-card::before { display: none !important; }
.portfolio-card::after { display: none !important; }
.portfolio-card:hover .portfolio-visual { transform: none !important; }

.portfolio-visual {
    background: #f0f0f0;
    border-radius: 12px 12px 0 0 !important;
}
.portfolio-visual::before { display: none !important; }
.portfolio-visual::after { display: none !important; }
.portfolio-visual svg { opacity: .2 !important; }
.portfolio-card:hover .portfolio-visual svg { opacity: .35 !important; transform: none !important; }

.portfolio-tag {
    background: #f0f0f0 !important;
    color: #444444 !important;
    border-radius: 4px !important;
    font-size: .65rem !important;
    letter-spacing: .08em !important;
    padding: .25rem .75rem !important;
}
.portfolio-info h3 { color: #0a0a0a !important; }
.portfolio-info p { color: #666 !important; }

/* ── 17. PROCESS SECTION ─────────────────────────────────────────────────── */
.process-section { background: #f7f7f7 !important; }

.process-num {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.1) !important;
    color: #0a0a0a !important;
    box-shadow: var(--shadow) !important;
    font-size: .9rem !important;
    width: 56px !important;
    height: 56px !important;
}
.process-step:hover .process-num {
    border-color: rgba(0,0,0,.35) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.1) !important;
}
.process-step h3 { color: #0a0a0a !important; }
.process-step p { color: #666 !important; }
.process-timeline::before {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.1), transparent) !important;
    top: 28px !important;
}

/* ── 18. TESTIMONIALS ────────────────────────────────────────────────────── */
.testimonial-card {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: var(--shadow) !important;
    border-radius: 16px !important;
}
.testimonial-card:hover {
    border-color: rgba(0,0,0,.14) !important;
    box-shadow: var(--shadow-hover) !important;
}
.testimonial-card::before, .testimonial-card::after { display: none !important; }
.testimonial-card:hover::before, .testimonial-card:hover::after { display: none !important; }

.testimonial-quote { color: #cccccc !important; font-size: 3rem !important; }
.testimonial-text { color: #333333 !important; font-size: .95rem !important; line-height: 1.85 !important; }
.testimonial-author h4 { color: #0a0a0a !important; }
.testimonial-author span { color: #888888 !important; }
.testimonial-avatar {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    letter-spacing: .03em !important;
}
.testimonial-avatar::after { display: none !important; }

/* ── 19. FAQ SECTION ─────────────────────────────────────────────────────── */
.faq-list { max-width: 760px !important; }
.faq-item {
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
}
.faq-question {
    color: #0a0a0a !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 1.5rem 0 !important;
    cursor: pointer !important;
}
.faq-question:hover { color: #333 !important; }
.faq-icon::before, .faq-icon::after { background: #888 !important; }
.faq-item.active .faq-question { color: #0a0a0a !important; }
.faq-item.active .faq-icon::before { background: #0a0a0a !important; }
.faq-item.active .faq-icon::after { opacity: 0; }
.faq-answer p { color: #555555 !important; }

/* ── 20. CTA SECTION — DARK INVERSION ────────────────────────────────────── */
.cta-section {
    background: #0a0a0a !important;
    padding: 10rem 0 !important;
}
.cta-section::before { opacity: .04 !important; }
.cta-bg .orb { display: none !important; }
.cta-section .living-grid { opacity: .06 !important; }
.cta-section .living-grid::before {
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) !important;
}

.cta-section .section-tag {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.5) !important;
}
.cta-title { color: #ffffff !important; }
.cta-title .gradient {
    background: linear-gradient(135deg, #ffffff, #aaaaaa) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.cta-desc { color: rgba(255,255,255,.45) !important; }

.cta-section .btn-primary {
    background: #ffffff !important;
    color: #0a0a0a !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    box-shadow: 0 4px 24px rgba(255,255,255,.08) !important;
}
.cta-section .btn-primary::before { background: rgba(255,255,255,.9) !important; }
.cta-section .btn-primary:hover {
    box-shadow: 0 8px 40px rgba(255,255,255,.15) !important;
}

/* ── 21. FOOTER ──────────────────────────────────────────────────────────── */
.footer {
    background: #0a0a0a !important;
    border-top: none !important;
    padding-top: 6rem !important;
}
.footer::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent) !important;
}
/* Override hardcoded white logo text */
.footer-brand > span { color: #ffffff !important; }
.footer-brand p { color: rgba(255,255,255,.35) !important; font-size: .88rem !important; }

.footer-col h4 { color: rgba(255,255,255,.35) !important; font-size: .65rem !important; letter-spacing: .15em !important; }
.footer-col a { color: rgba(255,255,255,.5) !important; font-size: .88rem !important; }
.footer-col a:hover { color: rgba(255,255,255,.9) !important; }
.footer-col a::after { background: rgba(255,255,255,.5) !important; }

.footer-bottom { border-top-color: rgba(255,255,255,.07) !important; padding-top: 2rem !important; }
.footer-copy { color: rgba(255,255,255,.2) !important; font-size: .8rem !important; }

.footer-social a {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    color: rgba(255,255,255,.4) !important;
}
.footer-social a:hover {
    background: rgba(255,255,255,.12) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.2) !important;
    transform: translateY(-2px) !important;
}

/* ── 22. BACK TO TOP ─────────────────────────────────────────────────────── */
.back-to-top {
    background: #0a0a0a !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.2) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
}
.back-to-top:hover {
    background: #333 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.25) !important;
    transform: translateY(-3px) !important;
}

/* ── 23. MOBILE CTA BAR ──────────────────────────────────────────────────── */
.mobile-cta {
    background: rgba(255,255,255,.97) !important;
    border-top-color: var(--rule) !important;
    backdrop-filter: blur(16px) !important;
}

/* ── 24. WAVE DIVIDERS → HIDDEN ─────────────────────────────────────────── */
.wave-divider, .wave-top { display: none !important; }

/* ── 25. LIVING GRID ──────────────────────────────────────────────────────── */
.living-grid { opacity: .6 !important; }
.living-grid::before {
    background-image:
        linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px) !important;
    background-size: 50px 50px !important;
}

/* ── 26. SECTION HEADER RULE ──────────────────────────────────────────────── */
.section-header { margin-bottom: 5rem !important; }

/* ── 27. FORM ELEMENTS (contact page) ────────────────────────────────────── */
.form-input, .form-textarea, .form-select {
    background: #f7f7f7 !important;
    border-color: rgba(0,0,0,.1) !important;
    color: #0a0a0a !important;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    border-color: rgba(0,0,0,.35) !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,.06) !important;
    outline: none !important;
}

/* ── 28. CARD GLOW / SPOTLIGHT — CLEAN SHADOW ONLY ──────────────────────── */
.bento-card:hover::before, .portfolio-card:hover::before,
.testimonial-card:hover::before, .industry-card:hover::before { display: none !important; }
.bento-card:hover::after, .portfolio-card:hover::after,
.testimonial-card:hover::after, .industry-card:hover::after,
.value-card:hover::after, .award-card:hover::after,
.global-card:hover::after, .office-card:hover::after { display: none !important; }

/* ── 29. HERO TAG DOT ─────────────────────────────────────────────────────── */
.hero-tag .dot, .bento-tag .dot {
    background: #0a0a0a !important;
    box-shadow: none !important;
    width: 5px !important;
    height: 5px !important;
}

/* ── 30. SECTION BACKGROUNDS — ALTERNATE ─────────────────────────────────── */
#industries { background: #f7f7f7 !important; }
#faq        { background: #f7f7f7 !important; }

/* ── 31. TOOLTIP ──────────────────────────────────────────────────────────── */
[data-tooltip]::after {
    background: #0a0a0a !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    font-size: .72rem !important;
}

/* ── 32. FOCUS ACCESSIBILITY ──────────────────────────────────────────────── */
a:focus-visible, button:focus-visible {
    outline: 2px solid #0a0a0a !important;
    outline-offset: 3px !important;
    border-radius: 3px !important;
}

/* ── 33. PREMIUM TYPOGRAPHY UPGRADES ─────────────────────────────────────── */
h1, h2, h3 { letter-spacing: -.035em !important; color: #0a0a0a !important; }
h1 { letter-spacing: -.05em !important; }

.hero-title { letter-spacing: -.055em !important; }

/* Section title refinement */
.section-title { font-size: clamp(2rem, 3.8vw, 3.2rem) !important; }

/* Muted / body text */
p { color: #555555; }

/* ── 34. CARD 3D TILT — FLATTEN FOR ENTERPRISE ───────────────────────────── */
.portfolio-card, .testimonial-card, .industry-card,
.value-card, .team-card, .award-card, .process-card,
.global-card, .office-card, .faq-item, .info-block {
    transform-style: flat !important;
}

/* ── 35. SKELETON LOADING ─────────────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
}

/* ── 36. REVEAL ANIMATION — REFINED ─────────────────────────────────────── */
.reveal { filter: none !important; transform: translateY(32px) !important; transition: all .9s cubic-bezier(0.16,1,0.3,1) !important; }
.reveal.visible { transform: translateY(0) !important; }

/* ── 37. ABOUT PAGE — INFO BLOCKS / VALUE CARDS ──────────────────────────── */
.info-block, .value-card, .team-card, .award-card, .global-card, .office-card {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: var(--shadow) !important;
    border-radius: 16px !important;
}
.info-block:hover, .value-card:hover, .team-card:hover,
.award-card:hover, .global-card:hover, .office-card:hover {
    border-color: rgba(0,0,0,.14) !important;
    box-shadow: var(--shadow-hover) !important;
}

/* ── 38. INLINE HARDCODED COLORS — CATCH-ALL ─────────────────────────────── */
/* Footer brand logo (hardcoded color:#fff in HTML) */
.footer .footer-brand [style*="color:#fff"],
.footer [style*="color:#fff"] { color: #ffffff !important; }

/* Hero/section bg that use inline fill var(--dark-2) in wave SVGs */
svg path[style*="fill:var(--dark"] { fill: #ffffff !important; }

/* ── 39. SPINNER ─────────────────────────────────────────────────────────── */
.spinner { border-color: rgba(0,0,0,.1) !important; border-top-color: #0a0a0a !important; }

/* ── 40. GRADIENT BORDERS ON CARDS → REMOVED ─────────────────────────────── */
.portfolio-card::after, .testimonial-card::after, .industry-card::after,
.value-card::after, .award-card::after, .global-card::after, .office-card::after,
.bento-card::after { content: none !important; display: none !important; }

/* ── 41. SECTION BORDERS ─────────────────────────────────────────────────── */
.trusted-section,
.footer-bottom { border-color: var(--rule) !important; }
.footer { border-top: none !important; }

/* ── 42. HERO SECTION TOP BORDER — ENTERPRISE RULE ──────────────────────── */
.hero::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0; left: 0; right: 0 !important;
    height: 1px !important;
    background: var(--rule) !important;
}

/* ── 43. STATS SECTION DIVIDERS ──────────────────────────────────────────── */
.stat-item {
    border-right: 1px solid rgba(255,255,255,.07) !important;
}
.stat-item:last-child { border-right: none !important; }

/* ── 44. PROCESS STEP NUMBER — ENTERPRISE STYLE ─────────────────────────── */
.process-num::before {
    content: '' !important;
    position: absolute !important;
    inset: -8px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0,0,0,.06) !important;
}

/* ── 45. BENTO CARD LARGE — IMAGE FADE ───────────────────────────────────── */
@media (max-width: 1024px) {
    .bento-card.bento-lg .bento-visual::after {
        background: linear-gradient(to bottom, #ffffff, transparent 50%) !important;
    }
}

/* ── 46. JARVIS HUD — DARK HERO OVERRIDE ─────────────────────────────────── */
/* Force hero section to be pitch-dark so the cyan HUD glows properly */
.hero, #hero {
    background: #020408 !important;
}
.hero-bg-img {
    opacity: .025 !important;
    background-color: #020408 !important;
    filter: brightness(0.08) !important;
}
.hero-mesh .orb {
    opacity: .45 !important;
    filter: none !important;
}
.hero-vignette {
    background: radial-gradient(ellipse at 30% 50%, transparent 0%, rgba(2,4,8,.7) 65%) !important;
}
.jarvis-hud { color: #00E5FF !important; }