@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Playfair+Display:wght@700;800;900&display=swap');

/* ─── Base ─────────────────────────────────────────────────── */
body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #f8fafc;
  color: #0f172a;
}

::selection {
  background-color: #eee5ff;
  color: #2d135c;
}

/* ─── Background mesh ───────────────────────────────────────── */
.bg-mesh {
  position: relative;
  background:
    radial-gradient(1200px 700px at 15% 20%, rgba(125,59,236,.18) 0%, transparent 55%),
    radial-gradient(900px  600px at 85% 15%, rgba(147,81,255,.14) 0%, transparent 55%),
    radial-gradient(1000px 700px at 35% 75%, rgba(125,59,236,.10) 0%, transparent 60%),
    radial-gradient(900px  650px at 92% 88%, rgba(147,81,255,.08) 0%, transparent 55%),
    linear-gradient(180deg, #fbfbff 0%, #f8fafc 40%, #f6f7ff 100%);
  background-attachment: fixed;
}
.bg-mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(  0deg, rgba(15,23,42,.03) 0px, rgba(15,23,42,.03) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient( 90deg, rgba(15,23,42,.02) 0px, rgba(15,23,42,.02) 1px, transparent 1px, transparent 4px);
  opacity: .25;
  mix-blend-mode: soft-light;
}

/* ─── Glass ─────────────────────────────────────────────────── */
.glass-panel {
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(226,232,240,.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.glass-card {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(15,23,42,.06), 0 1px 0 rgba(255,255,255,.6) inset;
}

/* ─── Flip card ──────────────────────────────────────────────── */
.flip-card { perspective: 1000px; }
.flip-card-inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform .5s;
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front,
.flip-card-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-card-back { transform: rotateY(180deg); }

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

/* ─── Scroll-triggered fade / slide animations ───────────────── */
.anim {
  opacity: 0;
  transition: opacity .65s ease, transform .65s ease;
}
.anim-up    { transform: translateY(20px); }
.anim-left  { transform: translateX(-30px); }
.anim-right { transform: translateX(30px); }
.anim-scale { transform: scale(.9); }
.anim.visible { opacity: 1 !important; transform: none !important; }

/* stagger helpers */
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; }

/* ─── Progress bar ───────────────────────────────────────────── */
@keyframes fill-progress { from { width: 0; } to { width: 85%; } }
.progress-fill { width: 0; }
.progress-fill.animated { animation: fill-progress 1.5s ease-out forwards; }

/* ─── Ping (live dot) ────────────────────────────────────────── */
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.animate-ping { animation: ping 1s cubic-bezier(0,0,.2,1) infinite; }

/* ─── Pulse (blinking dot) ───────────────────────────────────── */
@keyframes pulse-anim { 0%,100% { opacity:1; } 50% { opacity:.5; } }
.animate-pulse-dot { animation: pulse-anim 2s cubic-bezier(.4,0,.6,1) infinite; }

/* ─── Mobile menu ────────────────────────────────────────────── */
#mobile-menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}
#mobile-menu.open { max-height: 500px; }

/* ─── Lucide icon default sizing ─────────────────────────────── */
[data-lucide] { display: inline-block; vertical-align: middle; }