/* ============================================================
   NovaFlow — Custom Styles (Tailwind companion)
   CSS variables, keyframes, and component-level overrides
   ============================================================ */

/* ── CSS Variables ── */
:root {
  --color-primary:     #4f46e5; /* indigo-600  */
  --color-primary-dark:#4338ca; /* indigo-700  */
  --color-primary-light:#eef2ff;/* indigo-50   */
  --color-canvas:      #f8fafc; /* slate-50    */
  --color-text:        #0f172a; /* slate-900   */
  --color-muted:       #64748b; /* slate-500   */
  --color-border:      #e2e8f0; /* slate-200   */
  --font-display:      'Inter', system-ui, sans-serif;
  --font-body:         'Inter', system-ui, sans-serif;
  --radius-card:       1rem;
  --shadow-card:       0 4px 24px rgba(79,70,229,0.07);
  --shadow-card-hover: 0 16px 40px rgba(79,70,229,0.13);
}

/* ── Base ── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background-color: var(--color-canvas);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

/* ── Gradient text utility ── */
.gradient-text {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Nav blur ── */
.nav-blur {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ── Hero badge ── */
.hero-badge {
  background: linear-gradient(135deg, rgba(79,70,229,.08) 0%, rgba(124,58,237,.08) 100%);
  border: 1px solid rgba(79,70,229,.2);
}

/* ── Buttons ── */
.btn-primary {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(79,70,229,.38);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-outline {
  transition: color 0.18s ease, border-color 0.18s ease,
              background-color 0.18s ease, transform 0.18s ease;
}
.btn-outline:hover {
  transform: translateY(-2px);
}

/* ── Feature cards ── */
.feature-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  box-shadow: var(--shadow-card);
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

/* ── Testimonial cards ── */
.testimonial-card {
  transition: box-shadow 0.28s ease, transform 0.28s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,.08);
}

/* ── Integration logo items ── */
.logo-item {
  transition: opacity 0.22s ease;
}
.logo-item:hover {
  opacity: 1 !important;
}

/* Logo <img> — grayscale+dim by default, full brand color on hover */
.logo-img {
  filter: grayscale(1) opacity(0.45);
  transition: filter 0.25s ease;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.logo-item:hover .logo-img {
  filter: grayscale(0) opacity(1);
}

/* ── Marquee ── */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee-track:hover {
  animation-play-state: paused;
}

/* ── Float (hero mockup) ── */
@keyframes float {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-10px); }
}
.animate-float { animation: float 7s ease-in-out infinite; }

/* ── Pulse dot ── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.6; transform: scale(1.25); }
}
.pulse-dot { animation: pulse-dot 1.8s ease-in-out infinite; }

/* ── Fade-in-up (scroll reveal) ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.reveal {
  opacity: 0;
  transform: translateY(28px);
}
.reveal.visible {
  animation: fadeInUp 0.6s ease forwards;
}

/* staggered children */
.reveal-stagger > *:nth-child(1) { animation-delay: 0.0s; }
.reveal-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.reveal-stagger > *:nth-child(3) { animation-delay: 0.2s; }

/* ── Dashboard connector pulse ── */
@keyframes connectorPulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1;   }
}
.connector-dot {
  animation: connectorPulse 1.5s ease-in-out infinite;
}
.connector-dot:nth-child(2) { animation-delay: 0.5s; }
.connector-dot:nth-child(3) { animation-delay: 1s;   }

/* ── CTA banner grid overlay ── */
.cta-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ── Feature card app-grid icons ── */
.app-grid-icon {
  filter: grayscale(0.2) opacity(0.85);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.app-grid-icon:hover {
  filter: grayscale(0) opacity(1);
  transform: scale(1.1);
}

/* ── Focus visible ring ── */
:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .marquee-track  { animation: none; }
  .animate-float  { animation: none; }
  .pulse-dot      { animation: none; opacity: 1; }
  .connector-dot  { animation: none; opacity: 1; }
  .reveal         { opacity: 1; transform: none; }
  .reveal.visible { animation: none; }
}

/* ── FAQ accordion ── */
.faq-answer {
  transition: none;
}

/* ── Scrollbar (webkit) ── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }