:root {
  --navy:    #0b0a1f;
  --navy-2:  #15122e;
  --violet:  #7c3aed;
  --violet-2:#a855f7;
  --coral:   #f97316;
  --cream:   #f5f0e8;
  --cream-2: #ece4d6;
  --ink:     #1a1730;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; }

.font-display { font-family: 'Sora', system-ui, sans-serif; }

.grad-text {
  background: linear-gradient(100deg, var(--violet-2) 0%, var(--coral) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.grad-text-anim {
  background: linear-gradient(100deg, var(--violet-2), var(--coral), var(--violet-2));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: grad-pan 6s linear infinite;
}
@keyframes grad-pan { to { background-position: 200% center; } }

.glow-violet { box-shadow: 0 0 40px -8px rgba(124, 58, 237, .55); }

.hero-photo {
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.55));
}
.hero-photo-wrap::after {
  content: "";
  position: absolute;
  inset: auto 0 -6% 0;
  height: 55%;
  background: radial-gradient(60% 70% at 50% 100%, rgba(124,58,237,.55), transparent 70%);
  filter: blur(40px);
  z-index: -1;
  animation: glow-breathe 5s ease-in-out infinite;
}
@keyframes glow-breathe {
  0%,100% { opacity: .55; transform: scale(1); }
  50%     { opacity: .9;  transform: scale(1.08); }
}

.float-soft { animation: float 6s ease-in-out infinite; }
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}

.card {
  border-radius: 1.25rem;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.card:hover { transform: translateY(-6px); }

.card-dark {
  background: linear-gradient(160deg, rgba(124,58,237,.12), rgba(21,18,46,.6));
  border: 1px solid rgba(168,85,247,.18);
}
.card-dark:hover {
  border-color: rgba(168,85,247,.5);
  box-shadow: 0 18px 50px -20px rgba(124,58,237,.6);
}
.card-cream {
  background: #fff;
  border: 1px solid var(--cream-2);
  box-shadow: 0 12px 30px -22px rgba(26,23,48,.4);
}
.card-cream:hover {
  border-color: rgba(124,58,237,.4);
  box-shadow: 0 22px 50px -24px rgba(124,58,237,.45);
}

.step-num {
  background: linear-gradient(135deg, var(--violet), var(--coral));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .40s; }

.wa-float {
  box-shadow: 0 14px 34px -8px rgba(37,211,102,.6);
  animation: wa-pulse 2.6s ease-in-out infinite;
}
@keyframes wa-pulse {
  0%,100% { box-shadow: 0 14px 34px -8px rgba(37,211,102,.55); }
  50%     { box-shadow: 0 14px 44px -4px rgba(37,211,102,.9); }
}

.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(80% 60% at 70% 20%, rgba(124,58,237,.35), transparent 60%),
    linear-gradient(180deg, rgba(11,10,31,.78) 0%, rgba(11,10,31,.92) 60%, var(--navy) 100%);
}
#circuit { position: absolute; inset: 0; z-index: 1; opacity: .5; }

.tech-grid {
  background-image:
    linear-gradient(rgba(168,85,247,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,.06) 1px, transparent 1px);
  background-size: 44px 44px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::after, *::before { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}