/* Tailwind Configuration for CDN */
@layer components {
  /* Layout Components */
  .hero-container {
    @apply relative mx-auto max-w-7xl px-6 py-16 sm:py-24;
  }

  .hero-grid {
    @apply grid items-center gap-10 lg:grid-cols-2;
  }

  /* Background Decorations */
  .bg-decoration {
    @apply pointer-events-none fixed inset-0 -z-10;
  }

  .bg-gradient-main {
    @apply absolute inset-0 bg-gradient-to-b from-slate-950 via-slate-950 to-slate-900;
  }

  .bg-orb-primary {
    @apply absolute left-1/2 top-[-10%] h-[60vh] w-[80vw] -translate-x-1/2 rounded-full blur-3xl opacity-30;
  }

  .bg-orb-secondary {
    @apply absolute right-0 bottom-[-10%] h-[40vh] w-[50vw] rounded-full blur-3xl opacity-20;
  }

  /* Typography */
  .hero-title {
    @apply mt-4 text-4xl font-extrabold tracking-tight sm:text-5xl;
  }

  .hero-subtitle {
    @apply mt-4 text-lg text-slate-300 max-w-prose;
  }

  .section-title {
    @apply text-xl font-bold;
  }

  .section-text {
    @apply mt-2 text-sm;
  }

  /* Badges */
  .badge-early-access {
    @apply inline-flex items-center gap-2 rounded-full border border-slate-800 bg-slate-900/60 px-3 py-1 text-xs text-slate-300;
  }

  .badge-pulse {
    @apply h-2 w-2 rounded-full bg-sky-400 animate-pulse;
  }

  .badge-label {
    @apply opacity-70;
  }

  /* Buttons */
  .btn {
    @apply rounded-full px-5 py-3 font-semibold transition focus:outline-none;
  }

  .btn-primary {
    @apply bg-sky-400 text-slate-900 shadow hover:brightness-110 focus:ring-2 focus:ring-sky-300;
  }

  .btn-secondary {
    @apply border border-slate-700 bg-slate-900 text-slate-100/90 hover:bg-slate-800 focus:ring-2 focus:ring-slate-600;
  }

  .btn-link {
    @apply font-semibold text-sky-300 underline-offset-4 hover:underline;
  }

  .btn-inline {
    @apply inline-block;
  }

  /* Cards */
  .info-card {
    @apply mx-auto max-w-4xl rounded-2xl border border-slate-800 bg-slate-900/60 p-6 text-slate-300;
  }

  .screenshot-card {
    @apply rounded-2xl border border-slate-800 bg-slate-900/60 p-3 shadow-2xl backdrop-blur;
  }

  .screenshot-glow {
    @apply pointer-events-none absolute -inset-6 -z-10 rounded-3xl bg-gradient-to-br from-sky-400/10 via-indigo-400/10 to-transparent blur-xl;
  }

  /* Integration Chips */
  .integration-container {
    @apply mt-8 flex flex-wrap items-center gap-2 text-xs text-slate-300/80;
  }

  .integration-chip {
    @apply rounded-full border border-slate-700/80 bg-slate-900/70 px-2.5 py-1;
  }

  /* Images */
  .screenshot-img {
    @apply h-40 w-full rounded-xl object-cover;
  }

  .screenshot-grid {
    @apply grid grid-cols-2 gap-3;
  }

  .screenshot-caption {
    @apply mt-3 text-center text-xs text-slate-400;
  }

  /* CTA Groups */
  .cta-group {
    @apply mt-8 flex flex-wrap items-center gap-3;
  }

  .cta-meta {
    @apply mt-3 text-xs text-slate-400;
  }

  /* Sections */
  .section-padding {
    @apply px-6 pb-24;
  }

  /* Visual Container */
  .visual-container {
    @apply relative isolate;
  }
}

/* Custom styles for gradients that can't be done with Tailwind classes */
.bg-orb-primary-gradient {
  background: radial-gradient(closest-side, rgba(56,189,248,.25), transparent 70%),
              radial-gradient(closest-side, rgba(99,102,241,.25), transparent 70%);
}

.bg-orb-secondary-gradient {
  background: radial-gradient(closest-side, rgba(96,165,250,.25), transparent 70%);
}

/* Fallback styles for offline mode */
@layer base {
  /* These styles are used when Tailwind CDN fails to load */
  .fallback-mode {
    font-family: ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }

  .fallback-container {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(255,255,255,.05), transparent),
                linear-gradient(180deg, #0a0f1c, #0a0f1c 60%, #0e1730);
    color: #e5e7eb;
    padding: 24px;
  }

  .fallback-card {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
  }

  .fallback-title {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: .2px;
  }

  .fallback-sub {
    margin-top: 12px;
    font-size: clamp(16px, 2.5vw, 22px);
    opacity: .9;
  }
}