/* ─────────────────────────────────────────
   Vantaze — Custom CSS
   ───────────────────────────────────────── */

/* Offset fixed header for anchor links */
html {
  scroll-padding-top: 72px;
}

/* ── Gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, #818cf8 0%, #a78bfa 45%, #67e8f9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hero layered background ── */
.hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 70%, rgba(139, 92, 246, 0.10) 0%, transparent 60%);
}

/* ── Subtle dot-grid overlay ── */
.hero-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ── HTMX loading indicator ── */
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-flex;
  align-items: center;
}
/* Hide send icon while request is in flight */
.htmx-request .send-icon {
  display: none;
}

/* ── Scroll-driven fade-in ── */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Custom scrollbar ── */
::-webkit-scrollbar        { width: 5px; }
::-webkit-scrollbar-track  { background: #0f172a; }
::-webkit-scrollbar-thumb  { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ── Remove default focus outline (handled by Tailwind focus:ring) ── */
input:focus,
textarea:focus {
  outline: none;
}

span.text-xl {
  margin-top: 10px;
  margin-left: 10px;
}