/* ============================================================
   VinScan24 — app.css
   Global styles: fonts, animations, utility classes
   ============================================================ */

/* ── Fonts ── */
body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: 'Sora', sans-serif;
}

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
  70%  { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.fade-up   { animation: fadeUp 0.5s ease forwards; }
.fade-up-2 { animation: fadeUp 0.5s 0.1s ease forwards; opacity: 0; }
.fade-up-3 { animation: fadeUp 0.5s 0.2s ease forwards; opacity: 0; }
.fade-in   { animation: fadeIn 0.4s ease forwards; }
.pulse-dot { animation: pulseRing 2s infinite; }
.float-anim { animation: float 4s ease-in-out infinite; }

/* ── Cards ── */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

.section-card {
  background: white;
  border-radius: 1rem;
  border: 1px solid #f1f5f9;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  padding: 1.5rem;
}

/* ── Feature list ── */
.check-item::before {
  content: '✓';
  color: #22c55e;
  font-weight: 700;
  margin-right: 8px;
}
.cross-item::before {
  content: '✕';
  color: #d1d5db;
  margin-right: 8px;
}

/* ── Hero ── */
.hero-gradient {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #1d4ed8 100%);
}

/* ── Glass ── */
.glass {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
}

/* ── VIN input ── */
.vin-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

/* ── Score ring ── */
.score-ring {
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 1.5s ease;
}

/* ── Stat box (hero counters) ── */
.stat-box {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 20px 24px;
}