/* ===== ATLAS CodX — Custom Styles ===== */

/* Gradients */
.grad-text {
  background: linear-gradient(90deg, #FF2D78, #7029FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.grad-btn {
  background: linear-gradient(90deg, #FF2D78, #7029FF);
}

/* Hero Background */
.hero-section {
  background: radial-gradient(ellipse at 75% 30%, rgba(255, 45, 120, 0.06) 0%, transparent 55%),
              radial-gradient(ellipse at 20% 80%, rgba(112, 41, 255, 0.04) 0%, transparent 50%),
              #ffffff;
}

.hero-bg-pattern {
  background-image:
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q25 30 50 50 T100 50' fill='none' stroke='%23FF2D78' stroke-width='0.3' opacity='0.08'/%3E%3Cpath d='M0 70 Q25 50 50 70 T100 70' fill='none' stroke='%237029FF' stroke-width='0.3' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.7;
}

.hero-network-pattern {
  background-image:
    radial-gradient(circle at 70% 40%, rgba(255, 45, 120, 0.03) 0%, transparent 40%);
}

.hero-network-pattern::before {
  content: '';
  position: absolute;
  top: 10%;
  right: 5%;
  width: 60%;
  height: 80%;
  background-image:
    radial-gradient(circle, rgba(112, 41, 255, 0.15) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}

/* 3D AX Visual */
.hero-ax-container {
  perspective: 800px;
}

.hero-pedestal {
  position: absolute;
  bottom: 15%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 45, 120, 0.15) 0%, rgba(112, 41, 255, 0.08) 40%, transparent 70%);
  box-shadow:
    0 0 60px rgba(255, 45, 120, 0.12),
    0 0 120px rgba(112, 41, 255, 0.08),
    inset 0 0 40px rgba(255, 45, 120, 0.05);
  animation: pedestal-glow 4s ease-in-out infinite alternate;
}

.hero-pedestal::after {
  content: '';
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 1px solid rgba(255, 45, 120, 0.1);
}

.hero-ax-logo {
  width: 280px;
  height: 220px;
  filter: drop-shadow(0 20px 40px rgba(255, 45, 120, 0.25));
  animation: ax-float 6s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes ax-float {
  0%, 100% { transform: translateY(0) rotateY(-5deg); }
  50% { transform: translateY(-12px) rotateY(5deg); }
}

@keyframes pedestal-glow {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.05); }
}

.hero-cube {
  animation: cube-float 3s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes cube-float {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50% { transform: translateY(-8px); opacity: 1; }
}

/* Floating Cards */
.float-card {
  position: absolute;
  animation: card-float 5s ease-in-out infinite;
  z-index: 20;
}

.float-card-1 {
  top: 5%;
  left: 0;
  animation-delay: 0s;
}

.float-card-2 {
  top: 8%;
  right: 0;
  animation-delay: 1.2s;
}

.float-card-3 {
  bottom: 4%;
  left: -8%;
  animation-delay: 2.4s;
}

.float-card-4 {
  bottom: 2%;
  right: -6%;
  animation-delay: 3.6s;
}

@keyframes card-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Service Cards */
.service-card {
  min-height: 140px;
}

/* Stats animation */
.stat-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.stat-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 1023px) {
  .hero-visual {
    margin-top: 2rem;
  }

  .float-card-1 { top: 0; left: 5%; }
  .float-card-2 { top: 0; right: 5%; }
  .float-card-3 { bottom: 5%; left: 5%; }
  .float-card-4 { bottom: 5%; right: 5%; }

  .hero-ax-logo {
    width: 220px;
    height: 180px;
  }

  .hero-pedestal {
    width: 180px;
    height: 180px;
  }
}

@media (max-width: 639px) {
  .float-card {
    width: 170px !important;
    padding: 0.75rem;
  }

  .float-card h3 {
    font-size: 0.75rem;
  }

  .float-card p {
    font-size: 0.625rem;
  }

  .hero-ax-logo {
    width: 180px;
    height: 150px;
  }
}

.hero-ax-image-container {
  /* animation: ax-image-float 6s ease-in-out infinite; */
}

@keyframes ax-image-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.005); }
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Selection color */
::selection {
  background: rgba(255, 45, 120, 0.2);
  color: #1e293b;
}

/* Extra Aixom-inspired Custom Styles */
.font-clash {
  font-family: 'Clash Grotesk', 'Poppins', sans-serif;
}

.font-satoshi {
  font-family: 'Satoshi', 'Poppins', sans-serif;
}

.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 45, 120, 0.08);
}

.glass-panel-dark {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 45, 120, 0.15);
}

.grad-border-hover {
  position: relative;
  transition: all 0.3s ease;
}

.grad-border-hover::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, #FF2D78, #7029FF);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.grad-border-hover:hover::after {
  opacity: 1;
}

.tab-btn-active {
  color: #FF2D78;
  background: rgba(255, 45, 120, 0.06);
  border-color: rgba(255, 45, 120, 0.2);
}

.pricing-card-glow {
  box-shadow: 0 20px 40px rgba(112, 41, 255, 0.05), 0 1px 3px rgba(112, 41, 255, 0.02);
}

.pricing-card-glow-premium {
  box-shadow: 0 25px 50px rgba(255, 45, 120, 0.12), 0 0 15px rgba(112, 41, 255, 0.08);
}

/* ===== Cinematic Preloader Styles ===== */

#loader-canvas-particles,
#loader-canvas-globe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#loader-canvas-globe {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

#loader-canvas-globe.active {
  opacity: 1;
}

/* Code Symbols */
.code-symbol {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.code-symbol.symbol-1 { color: #FF2D78; }
.code-symbol.symbol-2 { color: #7029FF; }
.code-symbol.symbol-3 { color: #0f172a; } /* dark slate highlight */

/* Logo Glow drop-shadow */
#ax-logo.glow {
  animation: logoGlow 2.5s ease-in-out infinite;
}

@keyframes logoGlow {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(255, 45, 120, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 35px rgba(112, 41, 255, 0.7));
  }
}

/* Horizontal Energy Streaks */
.energy-streak {
  position: absolute;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, #FF2D78, #7029FF, transparent);
  opacity: 0;
  pointer-events: none;
  border-radius: 9999px;
}

/* Main Content Visibility Transition */
#main-content {
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#main-content.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ===== Global Solutions 3D Globe Section ===== */

.sticky-stage {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
}

.sol-card {
  opacity: 0;
  transform: translateY(24px) scale(0.95);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sol-card.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.sol-card.active {
  box-shadow: 0 22px 50px -12px rgba(255, 45, 120, 0.22);
  border-color: rgba(255, 45, 120, 0.25);
  transform: scale(1.02);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
}

.grad-bg {
  background: linear-gradient(90deg, #FF2D78, #7029FF);
}

@media (max-width: 1023px) {
  .sticky-stage {
    position: relative;
    top: 0;
    height: auto;
    overflow: visible;
  }
  .sol-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    opacity: 1;
    transform: none;
    margin: 20px auto;
    width: 100%;
    max-width: 380px;
  }
}

/* Floating Capsule Navbar styles */
header.sticky {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

header.sticky > * {
  pointer-events: auto;
}

/* Glass effect for navbar capsule */
.nav-capsule {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 45, 120, 0.08);
  box-shadow: 0 12px 34px -10px rgba(112, 41, 255, 0.07),
              0 1px 3px rgba(255, 45, 120, 0.02);
}

/* Hover glow for capsule links */
.nav-link-hover {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link-hover::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 14px;
  height: 3px;
  background: linear-gradient(90deg, #FF2D78, #7029FF);
  border-radius: 99px;
  transition: transform 0.3s ease;
}

.nav-link-hover:hover {
  color: #FF2D78;
}

.nav-link-hover:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.nav-link-active {
  color: #FF2D78 !important;
}

.nav-link-active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) scaleX(1);
  width: 14px;
  height: 3px;
  background: linear-gradient(90deg, #FF2D78, #7029FF);
  border-radius: 99px;
}

/* Top Utility Bar default and collapsed states */
.top-utility-bar {
  max-height: 48px; /* matches the top bar content height */
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, border-color 0.3s ease !important;
}

header.scrolled .top-utility-bar {
  max-height: 0 !important;
  opacity: 0 !important;
  border-bottom-color: transparent !important;
  pointer-events: none;
}

/* Brand logo default state and scrolled (white) transition */
.nav-logo {
  transition: opacity 0.3s ease !important;
}

.nav-logo-light {
  opacity: 0 !important;
  pointer-events: none;
}

/* Scrolled state (gradient black) for capsule navbar */
.nav-capsule.scrolled {
  background: linear-gradient(135deg, rgba(10, 10, 12, 0.94), rgba(24, 24, 28, 0.96)) !important;
  border-color: rgba(255, 45, 120, 0.15) !important;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5),
              0 1px 3px rgba(255, 45, 120, 0.05) !important;
}

.nav-capsule.scrolled .nav-logo-dark {
  opacity: 0 !important;
  pointer-events: none;
}

.nav-capsule.scrolled .nav-logo-light {
  opacity: 1 !important;
  pointer-events: auto;
}

.nav-capsule.scrolled a.nav-link-hover,
.nav-capsule.scrolled button.nav-dropdown-trigger {
  color: rgba(241, 245, 249, 0.82) !important; /* light grey/slate-100 */
}

.nav-capsule.scrolled a.nav-link-hover:hover,
.nav-capsule.scrolled button.nav-dropdown-trigger:hover {
  color: #FF2D78 !important; /* highlight pink on hover */
}

.nav-capsule.scrolled #mobile-menu-btn {
  border-color: rgba(255, 45, 120, 0.2) !important;
  color: rgba(241, 245, 249, 0.9) !important;
}

.nav-capsule.scrolled #mobile-menu-btn:hover {
  background: rgba(255, 45, 120, 0.1) !important;
}

/* Scrolled state for dropdown submenus */
.nav-capsule.scrolled .nav-dropdown {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(9, 9, 11, 0.99)) !important;
  border-color: rgba(255, 45, 120, 0.15) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
}

.nav-capsule.scrolled .nav-dropdown a {
  color: rgba(241, 245, 249, 0.8) !important;
}

.nav-capsule.scrolled .nav-dropdown a:hover {
  background: rgba(255, 45, 120, 0.1) !important;
  color: #FF2D78 !important;
}

.nav-capsule.scrolled .nav-dropdown .nav-icon-wrapper {
  border-color: rgba(255, 45, 120, 0.15) !important;
  background: rgba(15, 23, 42, 0.7) !important;
}

.nav-capsule.scrolled .nav-dropdown .nav-icon-wrapper img {
  filter: brightness(0) invert(1) !important;
}

.nav-capsule.scrolled .nav-dropdown span.text-slate-800 {
  color: rgba(241, 245, 249, 0.9) !important;
}

.nav-capsule.scrolled .nav-dropdown span.text-slate-400 {
  color: rgba(148, 163, 184, 0.8) !important;
}

/* Scrolled state for mobile drawer menu */
.nav-capsule.scrolled #mobile-menu {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(9, 9, 11, 0.99)) !important;
  border-color: rgba(255, 45, 120, 0.15) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
}

.nav-capsule.scrolled #mobile-menu a {
  color: rgba(241, 245, 249, 0.85) !important;
}

.nav-capsule.scrolled #mobile-menu a:hover {
  background: rgba(255, 45, 120, 0.08) !important;
  color: #FF2D78 !important;
}

.nav-capsule.scrolled #mobile-menu .nav-icon-wrapper {
  border-color: rgba(255, 45, 120, 0.15) !important;
  background: rgba(15, 23, 42, 0.7) !important;
}

.nav-capsule.scrolled #mobile-menu .nav-icon-wrapper img {
  filter: brightness(0) invert(1) !important;
}