.elementor-10 .elementor-element.elementor-element-6c49d293{padding:80px 0px 80px 0px;}.elementor-10 .elementor-element.elementor-element-1f3f16b.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-10 .elementor-element.elementor-element-5b1452d5.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-10 .elementor-element.elementor-element-6ecd3281{padding:60px 0px 60px 0px;}.elementor-10 .elementor-element.elementor-element-6a2b1ffb.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-10 .elementor-element.elementor-element-1d9ee131{padding:20px 0px 20px 0px;}.elementor-10 .elementor-element.elementor-element-2700cf9.elementor-column > .elementor-widget-wrap{justify-content:center;}/* Start custom CSS for section, class: .elementor-element-1d9ee131 *//* === Motion Grid Futuristic Background - StrideAI.store (Diperbaiki v2.0) === */
/* Base styling - Dark theme dengan smooth scrolling */
body, html {
  background-color: #0A0E1A;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
  font-family: 'Poppins', sans-serif;
  color: #C8D6E5;
}

/* Global futuristic accents */
:root {
  --primary-bg: #0A0E1A;
  --secondary-bg: #0F1220;
  --cyan-accent: #00FFFF;
  --lime-accent: #BFFF00;
  --text-light: #C8D6E5;
  --glow-intensity: rgba(0, 255, 255, 0.15);
}

/* Hero Section Background - Radial gradient dengan depth */
#hero-section {
  position: relative;
  overflow: hidden;
  background: 
    radial-gradient(ellipse at center, var(--glow-intensity) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(191, 255, 0, 0.08) 0%, transparent 70%),
    linear-gradient(135deg, #0A0E1A 0%, #0F1220 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Motion Grid Canvas Layer - Enhanced dengan particles */
#hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background-image: 
    /* Grid lines */
    linear-gradient(0deg, var(--glow-intensity) 1px, transparent 1px),
    linear-gradient(90deg, var(--glow-intensity) 1px, transparent 1px),
    /* Subtle diagonal lines for depth */
    linear-gradient(45deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(191, 255, 0, 0.05) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 60px 60px, 60px 60px;
  animation: gridMove 20s linear infinite;
  transform: translate(-25%, -25%) scale(1.2) rotate(0deg);
  z-index: 0;
  filter: blur(0.2px) brightness(1.1);
  will-change: transform;
  opacity: 0.9;
}

/* Floating particles untuk efek starry cyber */
#hero-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, var(--cyan-accent), transparent),
    radial-gradient(2px 2px at 80px 70px, var(--lime-accent), transparent),
    radial-gradient(1px 1px at 120px 20px, var(--cyan-accent), transparent),
    radial-gradient(1px 1px at 200px 90px, var(--lime-accent), transparent),
    radial-gradient(1.5px 1.5px at 300px 40px, var(--cyan-accent), transparent);
  background-repeat: repeat;
  background-size: 400px 400px;
  animation: particlesFloat 25s linear infinite, glowPulse 8s ease-in-out infinite;
  mix-blend-mode: screen;
  z-index: 1;
  opacity: 0.6;
}

/* Cyan glow overlay - Lebih dinamis */
.hero-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 50% 20%, rgba(0, 255, 255, 0.2) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(191, 255, 0, 0.1) 0%, transparent 70%);
  animation: glowShift 12s ease-in-out infinite;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}

/* Enhanced Motion animation for the grid - Smooth dan variatif */
@keyframes gridMove {
  0% { 
    background-position: 0 0, 0 0, 0 0, 0 0; 
    transform: translate(-25%, -25%) scale(1.2) rotate(0deg);
  }
  25% { 
    background-position: 80px 0, 0 80px, 60px 0, 0 60px; 
    transform: translate(-25%, -25%) scale(1.25) rotate(0.5deg);
  }
  50% { 
    background-position: 80px 80px, 80px 80px, 120px 60px, 60px 120px; 
    transform: translate(-25%, -25%) scale(1.2) rotate(1deg);
  }
  75% { 
    background-position: 0 80px, 80px 0, 0 60px, 60px 0; 
    transform: translate(-25%, -25%) scale(1.25) rotate(0.5deg);
  }
  100% { 
    background-position: 0 0, 0 0, 0 0, 0 0; 
    transform: translate(-25%, -25%) scale(1.2) rotate(0deg);
  }
}

/* Floating particles animation */
@keyframes particlesFloat {
  0% { 
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0; 
    transform: translateY(0px) rotate(0deg);
  }
  100% { 
    background-position: 400px 400px, 400px 400px, 400px 400px, 400px 400px, 400px 400px; 
    transform: translateY(-400px) rotate(360deg);
  }
}

/* Improved glowing pulse effect - Lebih halus */
@keyframes glowPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1) translateY(0);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.08) translateY(-5px);
  }
}

/* Dynamic glow shift untuk variasi warna */
@keyframes glowShift {
  0%, 100% { 
    opacity: 0.6; 
    filter: hue-rotate(0deg) brightness(1);
  }
  33% { 
    opacity: 0.8; 
    filter: hue-rotate(90deg) brightness(1.1);
  }
  66% { 
    opacity: 0.7; 
    filter: hue-rotate(180deg) brightness(1.05);
  }
}

/* Ensure hero content stays above animations - Z-index hierarchy */
#hero-container,
#hero-heading,
#hero-subtext,
#hero-button {
  position: relative;
  z-index: 10;
  backdrop-filter: blur(10px); /* Subtle glassmorphism */
}

/* Enhanced button hover - Multi-layer glow dan smooth transition */
#hero-button {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid transparent;
  background-clip: padding-box;
}

#hero-button:hover {
  box-shadow: 
    0 0 20px var(--glow-intensity),
    0 0 40px rgba(191, 255, 0, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  transform: translateY(-3px) scale(1.02);
  border-color: var(--cyan-accent);
  background: linear-gradient(45deg, #BFFF00, #00FFFF);
  color: #0A0E1A;
}

#hero-button:active {
  transform: translateY(-1px) scale(0.98);
}

/* Responsivitas - Mobile-first adjustments */
@media (max-width: 768px) {
  #hero-section {
    min-height: 80vh;
    padding: 50px 20px;
  }
  
  #hero-section::before {
    background-size: 60px 60px, 60px 60px, 40px 40px, 40px 40px;
    animation-duration: 15s; /* Lebih cepat di mobile */
    filter: blur(0.1px);
  }
  
  #hero-section::after {
    background-size: 200px 200px;
    opacity: 0.5;
  }
  
  #hero-heading {
    font-size: 32px !important; /* Override Elementor jika perlu */
    line-height: 1.2;
  }
  
  #hero-subtext {
    font-size: 16px !important;
  }
  
  #hero-button {
    padding: 12px 30px;
    font-size: 16px;
  }
}

@media (min-width: 1200px) {
  #hero-section::before {
    animation-duration: 25s; /* Lebih lambat di desktop */
    scale: 1.3;
  }
  
  /* High-performance GPU acceleration */
  #hero-section,
  #hero-section::before,
  #hero-section::after {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

/* Accessibility improvements - Reduced motion for users */
@media (prefers-reduced-motion: reduce) {
  #hero-section::before,
  #hero-section::after,
  .hero-glow {
    animation: none;
    background-position: fixed;
  }
  
  #hero-button:hover {
    transform: none;
    box-shadow: 0 0 15px var(--glow-intensity);
  }
}

/* Global section enhancements - Apply to other sections jika diperlukan */
#products-section,
#resources-section,
#contact-section,
#footer-section {
  background-color: var(--primary-bg);
  position: relative;
}

#products-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 255, 255, 0.03) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Card hover effects - Konsisten dengan tema */
#card-1, #card-2, #card-3 {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

#card-1:hover, #card-2:hover, #card-3:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
  border-color: var(--lime-accent);
}

#card-1:hover::after, #card-2:hover::after, #card-3:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%) skewX(-25deg);
  animation: shine 0.5s linear;
}

@keyframes shine {
  0% { left: -100%; }
  100% { left: 100%; }
}/* End custom CSS */