html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, .font-display { font-family: 'Space Grotesk', sans-serif; }
.font-tech { font-family: 'JetBrains Mono', monospace; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-chevron { transform: rotate(180deg); }

/* ===== Tech grid background ===== */
.tech-grid {
  background-image:
    linear-gradient(rgba(52, 211, 153, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 211, 153, 0.16) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: gridMove 18s linear infinite;
}
.tech-grid-light {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 42px 42px;
}
@keyframes gridMove {
  0% { background-position: 0 0; }
  100% { background-position: 42px 42px; }
}
.grid-fade {
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 85%);
}

/* ===== Particle canvas ===== */
.particles-host { position: absolute; inset: 0; pointer-events: none; }

/* ===== Scroll reveal ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(.2, .7, .3, 1), transform 0.7s cubic-bezier(.2, .7, .3, 1);
}
[data-reveal].reveal-in { opacity: 1; transform: translateY(0); }

/* ===== Floating ===== */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.floaty { animation: floaty 4.5s ease-in-out infinite; }

/* ===== Gradient text ===== */
.gradient-text {
  background: linear-gradient(90deg, #34d399, #22d3ee, #a78bfa, #34d399);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 6s linear infinite;
}
@keyframes gradientShift { to { background-position: 300% center; } }

/* ===== CTA pulse ===== */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 10px 30px -8px rgba(249, 115, 22, 0.55); }
  50% { box-shadow: 0 10px 46px -6px rgba(249, 115, 22, 0.9); }
}
.cta-pulse { animation: ctaPulse 2.4s ease-in-out infinite; }

/* ===== Scan line for mockups ===== */
.scan-box { position: relative; overflow: hidden; }
.scan-box::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.9), transparent);
  animation: scan 3.2s linear infinite;
  opacity: 0;
}
@keyframes scan {
  0% { top: 0; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ===== Blink cursor ===== */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.blink-cursor { animation: blink 1s step-end infinite; }

/* ===== Pulsing dot ===== */
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.pulse-dot { animation: pulseDot 2s infinite; }

/* ===== Border glow hover ===== */
.glow-card { transition: border-color .3s, box-shadow .3s, transform .3s; }
.glow-card:hover {
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.15), 0 20px 40px -20px rgba(52, 211, 153, 0.35);
  transform: translateY(-4px);
}

/* ===== Placeholder frame ===== */
.ph-frame { border: 1.5px dashed rgba(148, 163, 184, 0.35); }

/* ===== Marquee ===== */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 22s linear infinite; }

/* ===== Pillars connecting tech line ===== */
.pillar-card {
  position: relative;
  z-index: 1;
  transition: border-color .4s ease, box-shadow .4s ease, transform .4s ease;
}
.pillar-card.is-active {
  border-color: rgba(52, 211, 153, 0.65);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.3), 0 0 34px -4px rgba(52, 211, 153, 0.55), 0 20px 40px -20px rgba(52, 211, 153, 0.4);
  transform: translateY(-4px);
}
.pillar-card.is-active .pillar-dot {
  background-color: #34d399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.25);
}
#pillars-path {
  filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.65));
}

/* ===== Mobile sticky CTA bar ===== */
#mobile-cta-bar { transition: transform .35s ease; }
#mobile-cta-bar.translate-y-full { transform: translateY(100%); }
#mobile-cta-bar.translate-y-0 { transform: translateY(0); }