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

/* ─── Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #0a0b0f;
  color: #f0f0f3;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Brand gradient ────────────────────────────────── */
.brand-gradient-text {
  background: linear-gradient(135deg, #a855f7 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-gradient-bg {
  background: linear-gradient(135deg, #a855f7 0%, #38bdf8 100%);
}

.countdown-bar {
  background: linear-gradient(90deg, #a855f7 0%, #38bdf8 100%);
}

/* ─── Tailwind CSS variable overrides ───────────────── */
/*  These make sure Tailwind colour classes work even if
    the config block is missing on a page.               */
:root {
  --color-background: #0a0b0f;
  --color-surface:    #0f1117;
  --color-surface-2:  #1a1d27;
  --color-border:     #23262f;
  --color-muted:      #8b8fa3;
  --color-foreground: #f0f0f3;
}

/* ─── Details / FAQ ─────────────────────────────────── */
details summary {
  list-style: none;
  cursor: pointer;
}
details summary::-webkit-details-marker { display: none; }

details summary::after {
  content: '+';
  float: right;
  font-size: 1.1rem;
  color: #8b8fa3;
  transition: transform 0.2s;
}
details[open] summary::after {
  transform: rotate(45deg);
}

/* ─── Form inputs ───────────────────────────────────── */
input::placeholder { color: #8b8fa3; }
input:focus { outline: none; }

/* ─── Selection ─────────────────────────────────────── */
::selection {
  background: rgba(168, 85, 247, 0.3);
  color: #f0f0f3;
}

/* ─── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0b0f; }
::-webkit-scrollbar-thumb { background: #23262f; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a855f7; }

/* ─── Animations & polish ───────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp .7s cubic-bezier(.16,1,.3,1) both; }
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }

@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
.animate-float { animation: floaty 5s ease-in-out infinite; }

@keyframes glowPulse {
  0%,100% { opacity: .5; }
  50%     { opacity: 1; }
}
.animate-glow { animation: glowPulse 4s ease-in-out infinite; }

/* Gradient shimmer for headline / badges */
@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.brand-gradient-text.shimmer,
.grad-shimmer {
  background: linear-gradient(90deg,#a855f7,#38bdf8,#a855f7);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* Marquee for logo / trust strip */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track { display: flex; width: max-content; animation: marquee 22s linear infinite; }
.marquee-mask:hover .marquee-track { animation-play-state: paused; }

/* Glassy card */
.glass {
  background: rgba(15,17,23,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Live pulse dot */
.pulse-dot { position: relative; }
.pulse-dot::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 9999px; background: inherit;
  animation: pulseRing 1.8s ease-out infinite;
}
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Button sheen on hover */
.btn-sheen { position: relative; overflow: hidden; }
.btn-sheen::after {
  content: ''; position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.btn-sheen:hover::after { left: 130%; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up, .animate-float, .animate-glow, .grad-shimmer, .marquee-track, .pulse-dot::before { animation: none; }
  .reveal { opacity: 1; transform: none; }
}