/* ════════════════════════════════════════════════════════════
   CINEMATIC DESIGN SYSTEM — Alpha Link Pro
   Premium Section Backgrounds · Button Animations · Visual Polish
   Each section has a unique visual identity and atmosphere.
════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   GET STARTED BUTTON — Premium animated CTA
────────────────────────────────────────────────────────── */
.nav-register {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #4f7cff 0%, #6248ff 100%) !important;
  box-shadow: 0 0 22px rgba(79,124,255,0.35), 0 4px 16px rgba(79,124,255,0.22) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease !important;
}
.nav-register::before {
  content: '';
  position: absolute;
  top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-18deg);
  animation: gs-shine 2.8s ease-in-out infinite;
  animation-delay: 0.8s;
  pointer-events: none;
}
@keyframes gs-shine {
  0%   { left: -120%; }
  100% { left: 160%; }
}
.nav-register:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 0 40px rgba(79,124,255,0.55), 0 10px 36px rgba(79,124,255,0.32) !important;
}

/* ──────────────────────────────────────────────────────────
   LOGIN BUTTON — Elegant glass hover
────────────────────────────────────────────────────────── */
.nav-login {
  position: relative;
  transition: color 0.25s ease !important;
}
.nav-login::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 50%;
  width: 0; height: 1px;
  background: var(--blue);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  transform: translateX(-50%);
}
.nav-login:hover { color: var(--blue) !important; }
.nav-login:hover::after { width: 80%; }

/* ──────────────────────────────────────────────────────────
   ALL BUTTONS — Ripple + premium hover
────────────────────────────────────────────────────────── */
.btn, .bot-cta-btn, .svc-cta, .footer-cta-btn, .btn-contact {
  position: relative;
  overflow: hidden;
  will-change: transform;
}
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  width: 6px; height: 6px;
  background: rgba(255,255,255,0.35);
  animation: ripple-burst 0.65s ease-out forwards;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 10;
}
@keyframes ripple-burst {
  0%   { width: 6px; height: 6px; opacity: 0.7; }
  100% { width: 220px; height: 220px; opacity: 0; }
}

/* btn-primary: glow border on hover */
.btn-primary {
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.btn-primary:hover {
  box-shadow: 0 0 30px rgba(79,124,255,0.4), 0 6px 24px rgba(79,124,255,0.2) !important;
  transform: translateY(-3px) !important;
}

/* btn-xl on CTA section */
.btn-xl {
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1) !important;
}
.btn-xl:hover { transform: translateY(-4px) scale(1.02) !important; }

/* ──────────────────────────────────────────────────────────
   HERO — Chip parallax (JS driven, override float animation)
────────────────────────────────────────────────────────── */
.hero-chip.parallax-active {
  animation: none !important;
  transition: transform 0.12s ease-out !important;
}

/* ──────────────────────────────────────────────────────────
   STATS BAND — Animated data stream atmosphere
────────────────────────────────────────────────────────── */
.stats-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface) 0%, rgba(9,11,22,0.98) 100%);
}
.stats-band > canvas.section-canvas { opacity: 0.8; }
.stats-band .container { position: relative; z-index: 2; }

.stat-col {
  transition: background 0.4s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.stat-col:hover {
  background: rgba(79,124,255,0.04);
  transform: translateY(-3px);
}
.stat-col:hover .stat-num {
  text-shadow: 0 0 24px rgba(79,124,255,0.35);
}

/* ──────────────────────────────────────────────────────────
   MARKET SECTION — Holographic moving grid
────────────────────────────────────────────────────────── */
.market-section {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.market-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(79,124,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,124,255,0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 75%);
  animation: holo-drift 24s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes holo-drift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 64px 64px, 64px 64px; }
}
.market-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 160px;
  background: linear-gradient(0deg, var(--bg) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.market-section .container { position: relative; z-index: 2; }

/* Market card: color-matched glow on hover */
.market-card {
  transition: all 0.38s cubic-bezier(0.4,0,0.2,1) !important;
}
.market-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  border-color: var(--mc-color, var(--blue)) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.4),
    0 0 0 1px var(--mc-color, var(--blue)),
    0 0 40px rgba(var(--mc-color, 79,124,255), 0.1) !important;
}

/* ──────────────────────────────────────────────────────────
   SERVICES — What We Offer — Geometric lattice atmosphere
────────────────────────────────────────────────────────── */
.services-section {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.services-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 15% 80%, rgba(79,124,255,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 85% 20%, rgba(232,25,44,0.03) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 50% 50%, rgba(212,175,55,0.02) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.services-section .container { position: relative; z-index: 2; }

/* Service icon spring bounce */
.svc-icon {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.svc-card:hover .svc-icon {
  transform: scale(1.14) rotate(-6deg);
}

/* Card lift + color glow per type */
.svc-card {
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1) !important;
}
.svc-card:hover { transform: translateY(-12px) !important; }
.svc-card.svc-free:hover {
  box-shadow: 0 40px 90px rgba(0,0,0,0.45), 0 0 50px rgba(79,124,255,0.09) !important;
}
.svc-card.svc-bots:hover {
  box-shadow: 0 40px 90px rgba(0,0,0,0.45), 0 0 50px rgba(232,25,44,0.09) !important;
}
.svc-card.svc-mgmt:hover {
  box-shadow: 0 40px 90px rgba(0,0,0,0.45), 0 0 50px rgba(212,175,55,0.09) !important;
}

/* ──────────────────────────────────────────────────────────
   BOTS SECTION — Chart / Strategy atmosphere (canvas-driven)
────────────────────────────────────────────────────────── */
.bots-section {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.bots-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(79,124,255,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 8%  50%, rgba(196,200,216,0.03) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 92% 50%, rgba(176,184,216,0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.bots-section .container { position: relative; z-index: 2; }

/* Bot accuracy ring — animated glow */
.acc-ring-fill {
  filter: drop-shadow(0 0 6px var(--bt));
}

/* Bot panel enhanced hover */
.bot-panel:hover {
  box-shadow:
    0 60px 130px rgba(0,0,0,0.55),
    0 0 70px var(--bt-dim) !important;
}

/* ──────────────────────────────────────────────────────────
   HOW IT WORKS — Pipeline / Process atmosphere
────────────────────────────────────────────────────────── */
.how-section {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.how-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(79,124,255,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(0,214,143,0.02) 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}
.how-section .container { position: relative; z-index: 2; }

/* Step circle pulse animation class (added by JS) */
.step-circle.activated {
  animation: step-ring-pulse 1.8s ease-out 3;
}
@keyframes step-ring-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(79,124,255,0.35); }
  60%  { box-shadow: 0 0 0 14px rgba(79,124,255,0); }
  100% { box-shadow: 0 0 0 0   rgba(79,124,255,0); }
}

/* Step icon spring on hover */
.step-icon {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.how-step:hover .step-icon { transform: scale(1.2) translateY(-3px); }

/* ──────────────────────────────────────────────────────────
   FREE BOT — Terminal / Code atmosphere
────────────────────────────────────────────────────────── */
.freebot-section {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.freebot-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 0% 50%, rgba(79,124,255,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 50% 55% at 100% 50%, rgba(0,214,143,0.04) 0%, transparent 55%);
  pointer-events: none; z-index: 0;
}
.freebot-section .container { position: relative; z-index: 2; }

/* Freebot panel hover lift */
.freebot-panel {
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1) !important;
}
.freebot-panel:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 32px 70px rgba(0,0,0,0.4), 0 0 50px rgba(79,124,255,0.1) !important;
}

/* Pill tags hover */
.pill {
  transition: all 0.25s ease;
}
.pill:hover {
  background: rgba(79,124,255,0.14);
  transform: translateY(-2px);
}

/* ──────────────────────────────────────────────────────────
   WHY CHOOSE US — Trust / Security atmosphere
────────────────────────────────────────────────────────── */
.why-section {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.why-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 45% at 50% 100%, rgba(79,124,255,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 45% 60% at 0% 0%, rgba(0,214,143,0.03) 0%, transparent 50%),
    radial-gradient(ellipse 40% 50% at 100% 40%, rgba(212,175,55,0.02) 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}
.why-section .container { position: relative; z-index: 2; }

.why-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1) !important;
}
/* Radial reveal on hover */
.why-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(ellipse 70% 70% at 50% -20%, rgba(79,124,255,0.07) 0%, transparent 70%);
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.why-card:hover { transform: translateY(-6px) !important; }
.why-card:hover::after { opacity: 1; }
.why-icon {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.why-card:hover .why-icon { transform: scale(1.12) rotate(6deg); }

/* ──────────────────────────────────────────────────────────
   TESTIMONIALS — Nebula / Community atmosphere (canvas)
────────────────────────────────────────────────────────── */
.testi-section {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.testi-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 85% 65% at 50% 50%, rgba(79,124,255,0.03) 0%, transparent 65%),
    radial-gradient(ellipse 45% 45% at 10% 10%, rgba(212,175,55,0.02) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 90% 90%, rgba(0,214,143,0.02) 0%, transparent 55%);
  pointer-events: none; z-index: 0;
}
.testi-section .container { position: relative; z-index: 2; }

.testi-card {
  position: relative;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1) !important;
}
/* Decorative quote mark */
.testi-card::before {
  content: '\201C';
  position: absolute;
  top: 4px; left: 18px;
  font-size: 78px;
  font-family: var(--f-head);
  color: rgba(79,124,255,0.07);
  line-height: 1;
  pointer-events: none;
  transition: color 0.3s;
}
.testi-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(79,124,255,0.14) !important;
}
.testi-card:hover::before { color: rgba(79,124,255,0.13); }

/* Star icons bounce on hover */
.testi-stars {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.testi-card:hover .testi-stars { transform: scale(1.08); }

/* ──────────────────────────────────────────────────────────
   FAQ — Architectural lines atmosphere
────────────────────────────────────────────────────────── */
.faq-section {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.faq-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(79,124,255,0.022) 1px, transparent 1px);
  background-size: 100% 84px;
  pointer-events: none; z-index: 0;
}
.faq-section::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 100% 50%, rgba(79,124,255,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 0% 50%, rgba(212,175,55,0.02) 0%, transparent 55%);
  pointer-events: none; z-index: 0;
}
.faq-section .container { position: relative; z-index: 2; }

.faq-item {
  transition: all 0.3s ease;
}
.faq-item:hover { border-color: rgba(79,124,255,0.18) !important; }
.faq-item.open {
  box-shadow: 0 8px 32px rgba(79,124,255,0.1);
}

/* ──────────────────────────────────────────────────────────
   CTA SECTION — Power ending (canvas + CSS pulse)
────────────────────────────────────────────────────────── */
.cta-section {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.cta-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 85% 85% at 50% 50%, rgba(79,124,255,0.08) 0%, transparent 58%),
    radial-gradient(ellipse 45% 45% at 82% 18%, rgba(232,25,44,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 35% 35% at 18% 82%, rgba(212,175,55,0.04) 0%, transparent 52%);
  pointer-events: none; z-index: 0;
}
.cta-section .container { position: relative; z-index: 2; }

/* ──────────────────────────────────────────────────────────
   FOOTER — Luxury constellation atmosphere (canvas)
────────────────────────────────────────────────────────── */
.apex-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface) 0%, #040408 100%);
}
.apex-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(79,124,255,0.35) 25%,
    rgba(232,25,44,0.25) 50%,
    rgba(79,124,255,0.35) 75%,
    transparent 100%);
  z-index: 2;
}
.apex-footer .container,
.apex-footer .footer-cta-strip .container { position: relative; z-index: 2; }
.apex-footer .footer-bottom { position: relative; z-index: 2; }

/* Footer social spring hover */
.footer-social {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), color 0.25s ease !important;
}
.footer-social:hover { transform: translateY(-5px) scale(1.18) !important; }

/* Footer links hover */
.footer-col a {
  transition: all 0.25s ease;
  position: relative;
}
.footer-col a:hover { color: var(--blue) !important; padding-left: 6px !important; }

/* ──────────────────────────────────────────────────────────
   ENHANCED SCROLL REVEAL — More cinematic
────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity  0.75s cubic-bezier(0.4,0,0.2,1),
    transform 0.75s cubic-bezier(0.4,0,0.2,1) !important;
}
.reveal.left  { transform: translateX(-44px) !important; }
.reveal.right { transform: translateX(44px)  !important; }
.reveal.scale { transform: scale(0.93)       !important; }
.reveal.up    { transform: translateY(44px)  !important; }
.reveal.visible {
  opacity: 1 !important;
  transform: none !important;
}
.reveal.delay-1 { transition-delay: 0.10s !important; }
.reveal.delay-2 { transition-delay: 0.20s !important; }
.reveal.delay-3 { transition-delay: 0.32s !important; }
.reveal.delay-4 { transition-delay: 0.44s !important; }
.reveal.delay-5 { transition-delay: 0.56s !important; }

/* ──────────────────────────────────────────────────────────
   SECTION CANVAS LAYER (JS-inserted)
────────────────────────────────────────────────────────── */
canvas.section-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ──────────────────────────────────────────────────────────
   NAVBAR LOGO — Subtle pulse on mark
────────────────────────────────────────────────────────── */
.nav-logo-mark {
  animation: logo-glow 3s ease-in-out infinite;
}
@keyframes logo-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(232,25,44,0.3); }
  50%      { box-shadow: 0 0 16px 4px rgba(232,25,44,0.15); }
}

/* ──────────────────────────────────────────────────────────
   SECTION HEADER TAGS — Enhanced
────────────────────────────────────────────────────────── */
.apex-tag {
  transition: all 0.3s ease;
}
.section-header:hover .apex-tag {
  transform: translateY(-2px);
}

/* ──────────────────────────────────────────────────────────
   WA FLOAT — Enhanced pulse
────────────────────────────────────────────────────────── */
.wa-float {
  animation: wa-cinematic-pulse 2.6s ease-in-out infinite !important;
}
@keyframes wa-cinematic-pulse {
  0%,100% { box-shadow: 0 4px 24px rgba(37,211,102,0.35), 0 0 0 0   rgba(37,211,102,0.2); }
  50%      { box-shadow: 0 8px 36px rgba(37,211,102,0.55), 0 0 0 10px rgba(37,211,102,0); }
}

/* ──────────────────────────────────────────────────────────
   ANNOUNCE BAR — Subtle shimmer
────────────────────────────────────────────────────────── */
.announce-bar {
  position: relative;
  overflow: hidden;
}
.announce-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  animation: announce-shine 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes announce-shine {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* ──────────────────────────────────────────────────────────
   MOBILE OPTIMIZATIONS — Reduce heavy effects
────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .market-section::before { opacity: 0.4; }
  .faq-section::before    { display: none; }
  canvas.section-canvas   { opacity: 0.4; }
  .nav-register::before   { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-register::before,
  .announce-bar::after,
  canvas.section-canvas { animation: none !important; }
  .reveal {
    transition: opacity 0.4s ease !important;
    transform: none !important;
  }
}