/* ═══════════════════════════════════════════════════════════════
   SUITETECH — ENTERPRISE INTEGRATION HUD THEME
   Cinematic B2B Theme Customized to Company ERP & Zoho Services
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts: Inter + Outfit ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  --j-accent:       #1d4ed8; /* Premium Cobalt Blue */
  --j-accent-glow:  rgba(29,78,216,0.14);
  --j-accent-dim:   rgba(29,78,216,0.03);
  --j-grid:         rgba(15,23,42,0.03);
  --j-border:       rgba(15,23,42,0.08);
  --j-panel:        rgba(255,255,255,0.72);
  --j-font-title:   'Outfit', sans-serif;
  --j-font-body:    'Inter', sans-serif;
  --j-shadow-sm:    0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --j-shadow-md:    0 10px 25px -5px rgba(0,0,0,0.04), 0 8px 10px -6px rgba(0,0,0,0.02);
  --j-shadow-lg:    0 20px 50px -12px rgba(0,0,0,0.06);
  --j-hero-bg:      radial-gradient(circle at 50% 0%, #f1f5f9 0%, #f8fafc 100%);
  --j-radius:       12px;

  /* Service Specific Cinematic Colors */
  --j-netsuite:     #e26d11; /* NetSuite Orange */
  --j-netsuite-glow:rgba(226,109,17,0.18);
  --j-zoho:         #00aa55; /* Zoho Green */
  --j-zoho-glow:    rgba(0,170,85,0.18);
  --j-dynamics:     #a020f0; /* Dynamics Violet */
  --j-dynamics-glow:rgba(160,32,240,0.18);
}

body.dark-mode {
  --j-accent:       #3b82f6; /* Modern Blue Accent */
  --j-accent-glow:  rgba(59,130,246,0.18);
  --j-accent-dim:   rgba(59,130,246,0.04);
  --j-grid:         rgba(255,255,255,0.02);
  --j-border:       rgba(255,255,255,0.08);
  --j-panel:        rgba(15,23,42,0.45);
  --j-hero-bg:      radial-gradient(circle at 50% 0%, #0b1329 0%, #030712 100%);
  --j-shadow-sm:    0 1px 3px rgba(0,0,0,0.3);
  --j-shadow-md:    0 10px 30px -10px rgba(0,0,0,0.55);
  --j-shadow-lg:    0 20px 50px -12px rgba(0,0,0,0.7);

  /* Dark mode service glow colors */
  --j-netsuite:     #f48024;
  --j-netsuite-glow:rgba(244,128,36,0.25);
  --j-zoho:         #10b981;
  --j-zoho-glow:    rgba(16,185,129,0.25);
  --j-dynamics:     #a78bfa;
  --j-dynamics-glow:rgba(167,139,250,0.25);
}

/* ══════════════════════════════════════════════
   GLOBAL BODY & MATRIX FONTS
   ══════════════════════════════════════════════ */
body {
  font-family: var(--j-font-body);
  -webkit-font-smoothing: antialiased;
}

/* Faint grid overlay representing data networks */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--j-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--j-grid) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.8;
  animation: dataDrift 60s linear infinite;
}
@keyframes dataDrift {
  0% { background-position: 0 0; }
  100% { background-position: 50px 50px; }
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 30%, var(--j-accent-dim) 0%, transparent 60%);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--j-font-title) !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════
   HERO LAYER
   ══════════════════════════════════════════════ */
.cin-hero {
  background: var(--j-hero-bg) !important;
  border-bottom: 1px solid var(--j-border);
}

.cin-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;
  line-height: 1.15 !important;
  color: var(--text) !important;
  text-shadow: none !important;
}

.cin-hero h1 em {
  color: var(--j-accent) !important;
  text-shadow: none !important;
}

.cin-badge {
  background: var(--j-accent-glow) !important;
  border: 1px solid rgba(59,130,246,0.15) !important;
  color: var(--j-accent) !important;
  border-radius: 20px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  padding: 6px 14px !important;
  clip-path: none !important;
  box-shadow: none !important;
}
.cin-badge::after { display: none !important; }

.cin-badge .pulse-dot {
  background: var(--j-accent) !important;
  box-shadow: 0 0 6px var(--j-accent) !important;
  animation: pulseBeacon 2s infinite !important;
}
@keyframes pulseBeacon {
  0% { transform: scale(0.95); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.5; }
}

/* Buttons */
.demo-button, .mag-btn, .nav-button {
  border-radius: var(--j-radius) !important;
  clip-path: none !important;
  font-family: var(--j-font-body) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0px !important;
  padding: 12px 24px !important;
  box-shadow: var(--j-shadow-sm) !important;
  background: var(--j-accent) !important;
  border: 1px solid var(--j-accent) !important;
  color: #fff !important;
}
.demo-button:hover, .mag-btn:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  transform: translateY(-1.5px) !important;
  box-shadow: var(--j-shadow-md) !important;
}

/* ══════════════════════════════════════════════
   SERVICE-SPECIFIC GLOW CARDS
   ══════════════════════════════════════════════ */
.cin-service-card,
.cin-feat-item,
.blog-card,
.jarvis-card {
  background: radial-gradient(350px circle at var(--mouse-x, 100px) var(--mouse-y, 80px), var(--j-accent-glow), transparent 60%), var(--j-panel) !important;
  border: 1px solid var(--j-border) !important;
  border-radius: var(--j-radius) !important;
  clip-path: none !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--j-shadow-sm) !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s !important;
  padding: 30px !important;
  transform-style: preserve-3d;
}

.cin-service-card::before,
.cin-feat-item::before,
.blog-card::before,
.cin-service-card::after,
.cin-feat-item::after,
.blog-card::after {
  display: none !important; /* Remove legacy brackets and scanlines */
}

/* Default hover card behavior */
.cin-service-card:hover,
.cin-feat-item:hover,
.blog-card:hover,
.jarvis-card:hover {
  border-color: var(--j-accent) !important;
  box-shadow: 0 12px 40px -10px var(--j-accent-glow) !important;
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px) !important;
}

/* NetSuite Service Cards → Orange Glow */
.card-netsuite {
  background: radial-gradient(350px circle at var(--mouse-x, 100px) var(--mouse-y, 80px), var(--j-netsuite-glow), transparent 60%), var(--j-panel) !important;
}
.card-netsuite:hover {
  border-color: var(--j-netsuite) !important;
  box-shadow: 0 12px 40px -10px var(--j-netsuite-glow) !important;
}
.card-netsuite h3, .card-netsuite h2 {
  color: var(--text) !important;
  transition: color 0.3s;
}
.card-netsuite:hover h3, .card-netsuite:hover h2 {
  color: var(--j-netsuite) !important;
}

/* Zoho Service Cards → Green Glow */
.card-zoho {
  background: radial-gradient(350px circle at var(--mouse-x, 100px) var(--mouse-y, 80px), var(--j-zoho-glow), transparent 60%), var(--j-panel) !important;
}
.card-zoho:hover {
  border-color: var(--j-zoho) !important;
  box-shadow: 0 12px 40px -10px var(--j-zoho-glow) !important;
}
.card-zoho:hover h3, .card-zoho:hover h2 {
  color: var(--j-zoho) !important;
}

/* Microsoft Dynamics Cards → Purple Glow */
.card-dynamics {
  background: radial-gradient(350px circle at var(--mouse-x, 100px) var(--mouse-y, 80px), var(--j-dynamics-glow), transparent 60%), var(--j-panel) !important;
}
.card-dynamics:hover {
  border-color: var(--j-dynamics) !important;
  box-shadow: 0 12px 40px -10px var(--j-dynamics-glow) !important;
}
.card-dynamics:hover h3, .card-dynamics:hover h2 {
  color: var(--j-dynamics) !important;
}

/* Category badge tags */
.blog-cat {
  font-family: var(--j-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: var(--j-accent-glow) !important;
  color: var(--j-accent) !important;
  border: 1px solid rgba(59,130,246,0.1) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  clip-path: none !important;
}

/* ══════════════════════════════════════════════
   STATS BAND
   ══════════════════════════════════════════════ */
.stats-band {
  background: var(--j-panel) !important;
  border-top: 1px solid var(--j-border) !important;
  border-bottom: 1px solid var(--j-border) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.stats-band::before { display: none !important; }

.stat-num {
  font-family: var(--j-font-title) !important;
  font-size: 3.2rem !important;
  font-weight: 800 !important;
  color: var(--j-accent) !important;
  text-shadow: none !important;
}

/* ══════════════════════════════════════════════
   CTA BAND
   ══════════════════════════════════════════════ */
.cin-cta-band {
  background: var(--j-panel) !important;
  border: 1px solid var(--j-border) !important;
  border-radius: var(--j-radius) !important;
  clip-path: none !important;
  box-shadow: var(--j-shadow-md) !important;
  padding: 48px !important;
}
.cin-cta-band::before, .cin-cta-band::after { display: none !important; }
.cin-cta-band h2 { font-family: var(--j-font-title) !important; text-shadow: none !important; }

/* ══════════════════════════════════════════════
   NAVBAR & THEME TOGGLE
   ══════════════════════════════════════════════ */
.navbar::after { background: var(--j-border) !important; }
.navbar .nav-list a, .navbar .nav-list > li > a { font-family: var(--j-font-body) !important; font-weight: 500 !important; }
.navbar .nav-list a::after { display: none !important; }
.footer::before { background: var(--j-border) !important; }

.theme-toggle {
  border-radius: 50% !important;
  clip-path: none !important;
  border: 1px solid var(--j-border) !important;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
}

/* ══════════════════════════════════════════════
   CUSTOM CURSOR (Webcam Sync Reticle)
   ══════════════════════════════════════════════ */
.cin-cursor {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 2px solid var(--j-accent) !important;
  clip-path: none !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none;
  z-index: 9999999 !important;
  transition: width 0.2s, height 0.2s, background 0.2s, border-color 0.2s !important;
}
/* outer spinning segmented bracket ring */
.cin-cursor::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px dashed var(--j-accent);
  border-radius: 50%;
  opacity: 0.6;
  animation: cursorSpin 5s linear infinite;
  pointer-events: none;
}
@keyframes cursorSpin {
  to { transform: rotate(360deg); }
}
.cin-cursor.hovering {
  width: 32px !important;
  height: 32px !important;
  background: var(--j-accent-glow) !important;
  border-color: var(--j-accent) !important;
  box-shadow: 0 0 15px var(--j-accent-glow) !important;
}

/* ══════════════════════════════════════════════
   ENTERPRISE PRELOADER preloader SCREEN
   ══════════════════════════════════════════════ */
#jarvis-boot {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--j-font-body);
  color: #0f172a;
  gap: 16px;
  transition: opacity 0.4s ease;
}
body.dark-mode #jarvis-boot {
  background: #030712;
  color: #f8fafc;
}
#jarvis-boot.hidden {
  opacity: 0;
  pointer-events: none;
}
.boot-ring {
  width: 36px; height: 36px;
  border: 2px solid var(--j-border);
  border-top: 2px solid var(--j-accent);
  border-radius: 50%;
  animation: bootSpin 0.7s linear infinite;
  box-shadow: none !important;
}
.boot-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--j-accent);
  text-transform: uppercase;
  font-family: var(--j-font-title);
  animation: pulseBeacon 1.5s infinite !important;
}

/* ══════════════════════════════════════════════
   LIVE CHAT & GESTURE PANELS
   ══════════════════════════════════════════════ */
#liveChatWidget {
  border-radius: var(--j-radius) !important;
  clip-path: none !important;
  border: 1px solid var(--j-border) !important;
  box-shadow: var(--j-shadow-lg) !important;
}
#liveChatFab {
  clip-path: none !important;
  background: var(--j-accent) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: var(--j-shadow-md) !important;
  animation: none !important;
}

.gesture-hud {
  display: none !important;
}

/* Make carousel image containers and items transparent for floating illustrations */
.carousel-item,
body.dark-mode .carousel-item,
.hero-image-box, 
.image-content, 
.carousel-item .image-content,
.carousel-item .hero-image-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── HUD Scan Line Sweeps on Hover ── */
.cin-service-card::after,
.cin-feat-item::after,
.blog-card::after,
.service-card::after,
.feature-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, var(--j-accent) 50%, transparent 100%);
  height: 2px;
  width: 100%;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  transform: translateY(-100%);
}
.cin-service-card:hover::after,
.cin-feat-item:hover::after,
.blog-card:hover::after,
.service-card:hover::after,
.feature-item:hover::after {
  animation: scanSweep 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  opacity: 0.38;
}
.card-netsuite:hover::after {
  background: linear-gradient(to bottom, transparent 0%, var(--j-netsuite) 50%, transparent 100%) !important;
}
.card-zoho:hover::after {
  background: linear-gradient(to bottom, transparent 0%, var(--j-zoho) 50%, transparent 100%) !important;
}
.card-dynamics:hover::after {
  background: linear-gradient(to bottom, transparent 0%, var(--j-dynamics) 50%, transparent 100%) !important;
}
@keyframes scanSweep {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(600%); }
}

/* ── Hero Highlight Glitch Loop ── */
.cin-hero h1 em {
  display: inline-block;
  animation: cinGlitch 8s infinite;
}
@keyframes cinGlitch {
  0% { text-shadow: 0.5px 0 0 rgba(255,0,0,0.4), -0.5px 0 0 rgba(0,0,255,0.4); }
  22% { text-shadow: 0.5px 0 0 rgba(255,0,0,0.4), -0.5px 0 0 rgba(0,0,255,0.4); }
  23% { text-shadow: -1px 0.5px 0 rgba(255,0,0,0.5), 1px -0.5px 0 rgba(0,255,255,0.5); transform: skew(0.5deg); }
  25% { text-shadow: none; transform: none; }
  72% { text-shadow: none; transform: none; }
  73% { text-shadow: 1px -0.5px 0 rgba(0,255,0,0.5), -1px 0.5px 0 rgba(255,0,255,0.5); transform: skew(-0.5deg); }
  75% { text-shadow: none; transform: none; }
  100% { text-shadow: none; transform: none; }
}

/* ── Cursor Clicking Feedback ── */
.cin-cursor.clicking {
  transform: translate(-50%, -50%) scale(1.7) !important;
  background: var(--j-accent-glow) !important;
  border-color: var(--j-accent) !important;
  box-shadow: 0 0 20px var(--j-accent-glow) !important;
  transition: transform 0.08s ease !important;
}
/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .cin-hero h1 { font-size: clamp(1.8rem, 6vw, 2.6rem) !important; }
  .cin-cta-band { padding: 24px !important; }
}

/* ── Cinematic Page Hero Orbs (Inner Service Pages) ── */
.page-hero .orb-1,
.page-hero .orb-2 {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.page-hero .orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.1) 0%, transparent 68%);
  top: -150px;
  right: -100px;
  animation: heroOrb 14s ease-in-out infinite;
}
.page-hero .orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 68%);
  bottom: -80px;
  left: -80px;
  animation: heroOrb 18s ease-in-out infinite reverse;
}
.page-hero-inner {
  position: relative;
  z-index: 1;
}

/* ── Chat Widget Retro Terminal CLI Mode ── */
#liveChatWidget.terminal-mode {
  background: #030712 !important;
  border-color: #10b981 !important;
}
#liveChatWidget.terminal-mode > div:first-child {
  background: #030712 !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.25) !important;
}
#liveChatWidget.terminal-mode #chatMessages {
  background: #030712 !important;
  font-family: 'Courier New', Courier, monospace !important;
  color: #10b981 !important;
}
#liveChatWidget.terminal-mode #chatMessages > div {
  background: transparent !important;
  border: none !important;
  color: #10b981 !important;
  font-family: 'Courier New', Courier, monospace !important;
  padding: 4px 0 !important;
  max-width: 100% !important;
  align-self: flex-start !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
#liveChatWidget.terminal-mode #chatForm {
  background: #030712 !important;
  border-top: 1px solid rgba(16, 185, 129, 0.25) !important;
}
#liveChatWidget.terminal-mode #chatInput {
  background: #030712 !important;
  border-color: #10b981 !important;
  color: #10b981 !important;
  font-family: 'Courier New', Courier, monospace !important;
  border-radius: 4px !important;
}
#liveChatWidget.terminal-mode button[type="submit"] {
  background: #10b981 !important;
  color: #030712 !important;
}
#liveChatWidget.terminal-mode #chatMessages b {
  color: #4ade80 !important;
}