html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; background-color: #09090b; }

/* Grid pattern background */
.grid-pattern {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 60%, transparent 100%);
}

/* Premium glow effects */
.glow-emerald { box-shadow: 0 0 40px -10px rgba(16,185,129,0.5); }
.glow-violet  { box-shadow: 0 0 40px -10px rgba(139,92,246,0.5); }

/* Magnetic CTA button */
.btn-magnetic {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.btn-magnetic::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(16,185,129,0.6), rgba(139,92,246,0.6));
  opacity: 0;
  filter: blur(20px);
  transition: opacity 0.3s ease;
  z-index: -1;
}
.btn-magnetic:hover::before { opacity: 1; }
.btn-magnetic:hover { transform: translateY(-2px); }

/* Card border glow on hover */
.card-glow {
  position: relative;
  transition: all 0.4s ease;
}
.card-glow::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(16,185,129,0.6), rgba(139,92,246,0.6));
  -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.4s ease;
}
.card-glow:hover::after { opacity: 1; }
.card-glow:hover { transform: translateY(-6px); }

/* Framer Motion-like fade-in on scroll */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Typewriter cursor */
.cursor-blink {
  display: inline-block;
  width: 3px;
  background: #10B981;
  margin-left: 4px;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Timeline line fill */
.timeline-line {
  background: linear-gradient(to bottom, #10B981 var(--fill, 0%), rgba(255,255,255,0.1) var(--fill, 0%));
  transition: --fill 0.3s ease;
}

/* Gradient premium heading */
.heading-gradient {
  background: linear-gradient(120deg, #ffffff 30%, #a7f3d0 55%, #c4b5fd 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 3D floating perspective cards */
.float-perspective { perspective: 1000px; }
.float-card-left {
  transform: rotateY(12deg) rotateX(6deg) skewY(-2deg);
  animation: floatY 5s ease-in-out infinite;
}
.float-card-right {
  transform: rotateY(-12deg) rotateX(6deg) skewY(2deg);
  animation: floatY 4s ease-in-out infinite;
  animation-delay: -1.5s;
}
@keyframes floatY {
  0%, 100% { transform: var(--tf) translateY(0); }
  50%      { transform: var(--tf) translateY(-14px); }
}
.float-card-left  { --tf: rotateY(12deg) rotateX(6deg) skewY(-2deg); }
.float-card-right { --tf: rotateY(-12deg) rotateX(6deg) skewY(2deg); }

/* Animated glowing bars */
@keyframes barPulse {
  0%, 100% { transform: scaleY(0.5); opacity: 0.7; }
  50%      { transform: scaleY(1); opacity: 1; }
}
.glow-bar { transform-origin: bottom; animation: barPulse 1.8s ease-in-out infinite; }

/* Infinite marquee (logos ticker) */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 2rem)); }
}

/* Workflow laser moving dot */
@keyframes laserMove {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Bento card hover (scale-up + colored glow) */
.bento-card {
  position: relative;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease;
  overflow: hidden;
}
.bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, var(--bento-glow, rgba(16,185,129,0.18)), transparent 70%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.bento-card:hover { transform: scale(1.02); }
.bento-card:hover::before { opacity: 1; }

/* Neon total price (calculator) */
.neon-total {
  text-shadow: 0 0 8px rgba(16,185,129,0.7), 0 0 20px rgba(16,185,129,0.4);
  animation: neonFlicker 2.5s ease-in-out infinite;
}
@keyframes neonFlicker {
  0%, 100% { text-shadow: 0 0 8px rgba(16,185,129,0.7), 0 0 20px rgba(16,185,129,0.4); }
  50%      { text-shadow: 0 0 14px rgba(16,185,129,0.9), 0 0 32px rgba(16,185,129,0.6); }
}
@keyframes neonPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.neon-pop { animation: neonPop 0.4s ease-out, neonFlicker 2.5s ease-in-out infinite; display: inline-block; }