/* XTEND AD - Design System Stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  --primary: #4CAF50;
  --secondary: #4CAF50;
  --bg-light: #0B1221;
  --bg-slate: #0F172A;
  --dark: #F8FAFC;
  --accent: #14B8A6;
  --glass-bg: rgba(15, 23, 42, 0.7);
  --glass-border: rgba(255, 255, 255, 0.08);
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-light);
  background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 0), radial-gradient(rgba(76, 175, 80, 0.03) 1px, transparent 0);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
  color: var(--dark);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Heading Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}
h1:hover, h2:hover {
  text-shadow: 0px 6px 16px rgba(0, 0, 0, 0.05);
}

/* Glassmorphism Styles - Clean Corporate */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
}

.glass-card {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.glass-card:hover {
  border-color: rgba(76, 175, 80, 0.4);
  box-shadow: 0 16px 48px -10px rgba(0, 0, 0, 0.4);
}

/* Custom Webkit Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-slate);
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Logo Placeholder Styling */
.logo-placeholder {
  width: 140px;
  height: 40px;
  border: 2px dashed rgba(0, 71, 171, 0.15);
  border-radius: 8px;
  position: relative;
  transition: all 0.3s ease;
}
.logo-placeholder::after {
  content: 'XTEND AD';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--primary);
  white-space: nowrap;
}

/* Gradient Background Effects - Softened */
.gradient-bg {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-light);
}
.gradient-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.15;
  mix-blend-mode: screen;
}

/* Cursor glow tracker - Disabled */
.cursor-glow {
  display: none !important;
}

/* Static hover indicators for buttons */
.hover-glow {
  position: relative;
  overflow: hidden;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.hover-glow:hover {
  transform: translateY(-1px);
}

/* Scrolling carousel styling */
.logo-scroll-container {
  display: flex;
  overflow: hidden;
  user-select: none;
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.logo-scroll-track {
  display: flex;
  width: max-content;
  animation: scroll 40s linear infinite;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Animated Statistics Progress rings */
.circle-progress {
  transition: stroke-dashoffset 0.8s ease;
}

/* Subtle Neumorphic Details */
.neumorph-inset {
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.03), inset -2px -2px 5px rgba(255,255,255,0.7);
}

/* Video Frame custom styling */
.video-frame-glow {
  box-shadow: 0 20px 50px -12px rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.2);
}

/* Mega menu styles */
.mega-menu-grid {
  transition: all 0.25s ease-out;
}

/* Flow Chart Animations */
.flow-node {
  animation: pulseNode 3s infinite ease-in-out;
}
.flow-path {
  stroke-dasharray: 8, 8;
  animation: dashPath 25s linear infinite;
}
@keyframes pulseNode {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.03); filter: brightness(1.05); }
}
@keyframes dashPath {
  to { stroke-dashoffset: -200; }
}

/* Particle Background for Hero */
#particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Subtle Floating Animations */
@keyframes bounceSubtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes pulseSubtle {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.95; }
}
.animate-bounce-subtle {
  animation: bounceSubtle 4s ease-in-out infinite;
}
.animate-pulse-subtle {
  animation: pulseSubtle 3s ease-in-out infinite;
}