/* =====================================================
   Ezyl — Custom CSS
   (Tailwind CDN handles utilities; this file fills gaps)
   ===================================================== */

/* ── Custom Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0f1e; }
::-webkit-scrollbar-thumb { background: #1e2d4a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #00d4b4; }

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

/* ── Selection ── */
::selection { background: #00d4b433; color: #e2e8f0; }

/* ── Nav blur backdrop ── */
.nav-blur {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* ── Gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, #00d4b4 0%, #7c3aed 60%, #00d4b4 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 6s linear infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Hero background ── */
.hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(0,212,180,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 20% 70%, rgba(124,58,237,0.08) 0%, transparent 65%),
    #0a0f1e;
}

/* ── Ezyl screenshot decorative bg ── */
.hero-screenshot-bg {
  background-image: url('ezyl-screenshot.png');
  background-size: cover;
  background-position: center top;
  opacity: 0.22;
  filter: blur(0px) saturate(0.7);
  pointer-events: none;
  user-select: none;
}

/* ── Card glow on hover ── */
.feature-card {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,212,180,0.35);
  box-shadow: 0 0 28px rgba(0,212,180,0.1), 0 8px 32px rgba(0,0,0,0.4);
}

/* ── Teal accent border glow ── */
.accent-glow {
  box-shadow: 0 0 0 1px rgba(0,212,180,0.3), 0 0 24px rgba(0,212,180,0.12);
}

/* ── Comparison table ── */
.compare-check  { color: #00d4b4; }
.compare-cross  { color: #475569; }
.compare-highlight { background: rgba(0,212,180,0.06); }

/* ── Benefit alternating ── */
.benefit-row:nth-child(even) { flex-direction: row-reverse; }
@media (max-width: 768px) {
  .benefit-row { flex-direction: column !important; }
}

/* ── CTA button ── */
.btn-primary {
  background: linear-gradient(135deg, #00d4b4, #00b89a);
  color: #0a0f1e;
  font-weight: 700;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(0,212,180,0.3);
}
.btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(0,212,180,0.42);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  border: 1px solid rgba(0,212,180,0.35);
  color: #00d4b4;
  transition: background 0.2s, border-color 0.2s;
}
.btn-ghost:hover {
  background: rgba(0,212,180,0.08);
  border-color: rgba(0,212,180,0.6);
}

/* ── Section divider ── */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,180,0.2), transparent);
}

/* ── Lucide icon sizing ── */
.icon-sm  { width: 18px; height: 18px; }
.icon-md  { width: 24px; height: 24px; }
.icon-lg  { width: 32px; height: 32px; }

/* ── Beta badge pulse ── */
.badge-pulse {
  animation: pulse-ring 2.5s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,212,180,0.3); }
  50%       { box-shadow: 0 0 0 6px rgba(0,212,180,0); }
}

/* ── Fade-in on scroll (via IntersectionObserver) ── */
.fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Mobile nav ── */
#mobile-menu {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
#mobile-menu.open {
  max-height: 300px;
  opacity: 1;
}

/* ── Beta form (Lit shadow DOM exposed vars) ── */
beta-signup-form {
  display: block;
}

/* ── Spinning loader ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 0.8s linear infinite;
  border: 2px solid rgba(0,212,180,0.2);
  border-top-color: #00d4b4;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: inline-block;
}