<template>
  <!-- Custom Home Content: Full Page Mode -->
  <div v-if="homeContent" class="min-h-screen">
    <iframe
      v-if="isHomeContentUrl"
      :src="homeContent.trim()"
      class="h-screen w-full border-0"
      allowfullscreen
    ></iframe>
    <!-- HTML mode - SECURITY: homeContent is admin-only setting, XSS risk is acceptable -->
    <div v-else v-html="homeContent"></div>
  </div>

  <!-- Default Home Page — Aurora Bento Redesign -->
  <div v-else class="home-root relative flex min-h-screen flex-col overflow-hidden">

    <!-- ══════════════════════════════════════════
         AURORA BACKGROUND
    ══════════════════════════════════════════ -->
    <div class="pointer-events-none absolute inset-0 overflow-hidden">
      <div class="aurora aurora-violet"></div>
      <div class="aurora aurora-teal"></div>
      <div class="aurora aurora-indigo"></div>
      <!-- Subtle noise texture overlay -->
      <div class="noise-overlay"></div>
    </div>

    <!-- ══════════════════════════════════════════
         HEADER
    ══════════════════════════════════════════ -->
    <header class="home-header relative z-20">
      <nav class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
        <!-- Logo + Brand -->
        <div class="flex items-center gap-3">
          <div class="logo-badge">
            <img :src="siteLogo || '/logo.png'" alt="Logo" class="h-full w-full object-contain" />
          </div>
          <span class="hidden font-semibold text-white/80 sm:block">{{ siteName }}</span>
        </div>

        <!-- Actions -->
        <div class="flex items-center gap-2">
          <LocaleSwitcher />
          <a
            v-if="docUrl"
            :href="docUrl"
            target="_blank"
            rel="noopener noreferrer"
            class="nav-pill"
          >
            <Icon name="book" size="sm" class="mr-1.5" />
            <span class="hidden sm:inline">{{ t('home.docs') }}</span>
          </a>
          <button @click="toggleTheme" class="nav-icon-btn">
            <Icon v-if="isDark" name="sun" size="sm" />
            <Icon v-else name="moon" size="sm" />
          </button>
          <router-link v-if="isAuthenticated" :to="dashboardPath" class="cta-header-btn">
            <span class="avatar-dot">{{ userInitial }}</span>
            {{ t('home.dashboard') }}
          </router-link>
          <router-link v-else to="/login" class="cta-header-btn">
            {{ t('home.login') }}
          </router-link>
        </div>
      </nav>
    </header>

    <!-- ══════════════════════════════════════════
         MAIN
    ══════════════════════════════════════════ -->
    <main class="relative z-10 flex-1">

      <!-- ── HERO (Centered) ─────────────────── -->
      <section class="mx-auto max-w-5xl px-6 pb-8 pt-20 text-center lg:pt-28">

        <!-- Badge -->
        <div class="mb-8 inline-flex items-center gap-2 rounded-full border border-violet-500/20 bg-violet-500/8 px-4 py-1.5">
          <span class="h-1.5 w-1.5 animate-pulse rounded-full bg-violet-400 shadow-[0_0_6px_#a78bfa]"></span>
          <span class="font-mono text-[11px] font-medium uppercase tracking-widest text-violet-300">
            AI API Gateway · Next Generation
          </span>
        </div>

        <!-- Headline -->
        <h1 class="hero-headline mb-6">
          {{ t('home.heroSubtitle') }}
        </h1>

        <!-- Subline -->
        <p class="mx-auto mb-10 max-w-2xl text-lg leading-relaxed text-slate-400">
          {{ t('home.heroDescription') }}
        </p>

        <!-- CTA -->
        <div class="mb-16 flex flex-wrap items-center justify-center gap-4">
          <router-link
            :to="isAuthenticated ? dashboardPath : '/login'"
            class="cta-primary-btn"
          >
            {{ isAuthenticated ? t('home.goToDashboard') : t('home.getStarted') }}
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
            </svg>
          </router-link>
          <a
            v-if="docUrl"
            :href="docUrl"
            target="_blank"
            rel="noopener noreferrer"
            class="cta-ghost-btn"
          >
            <Icon name="book" size="sm" />
            {{ t('home.viewDocs') }}
          </a>
        </div>

        <!-- ── Pipeline Visualization ─────────── -->
        <div class="pipeline-wrapper">
          <div class="pipeline-glow"></div>
          <div class="pipeline-card">
            <div class="pipeline-inner">

              <!-- Step: Client -->
              <div class="pipe-node">
                <div class="pipe-icon pipe-icon-client">
                  <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0H3" />
                  </svg>
                </div>
                <span class="pipe-label">Client</span>
              </div>

              <div class="pipe-connector">
                <div class="pipe-line"></div>
                <div class="pipe-dot pipe-dot-1"></div>
              </div>

              <!-- Step: Gateway -->
              <div class="pipe-node">
                <div class="pipe-icon pipe-icon-gateway">
                  <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" />
                  </svg>
                </div>
                <span class="pipe-label">{{ t('home.pipeline.gateway') }}</span>
              </div>

              <div class="pipe-connector">
                <div class="pipe-line"></div>
                <div class="pipe-dot pipe-dot-2"></div>
              </div>

              <!-- Step: Balancer -->
              <div class="pipe-node">
                <div class="pipe-icon pipe-icon-balancer">
                  <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
                  </svg>
                </div>
                <span class="pipe-label">{{ t('home.pipeline.balancer') }}</span>
              </div>

              <div class="pipe-connector">
                <div class="pipe-line"></div>
                <div class="pipe-dot pipe-dot-3"></div>
              </div>

              <!-- Step: AI Pool -->
              <div class="pipe-node">
                <div class="pipe-icon pipe-icon-ai">
                  <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
                  </svg>
                </div>
                <span class="pipe-label">{{ t('home.pipeline.aiPool') }}</span>
              </div>

              <div class="pipe-connector">
                <div class="pipe-line"></div>
                <div class="pipe-dot pipe-dot-4"></div>
              </div>

              <!-- Step: Response -->
              <div class="pipe-node">
                <div class="pipe-icon pipe-icon-response">
                  <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <span class="pipe-label">{{ t('home.pipeline.response') }}</span>
              </div>
            </div>

            <!-- Pipeline metrics bar -->
            <div class="pipe-metrics">
              <div v-for="m in pipeMetrics" :key="m.label" class="pipe-metric-item">
                <span class="pipe-metric-val">{{ m.value }}</span>
                <span class="pipe-metric-label">{{ m.label }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- ── BENTO FEATURES ─────────────────── -->
      <section class="mx-auto max-w-7xl px-6 pb-20">
        <div class="mb-12 text-center">
          <h2 class="mb-3 text-3xl font-bold text-white">
            <span class="bento-title-gradient">{{ t('home.solutions.title') }}</span>
          </h2>
          <p class="text-sm font-mono uppercase tracking-widest text-slate-600">
            {{ t('home.solutions.subtitle') }}
          </p>
        </div>

        <div class="bento-grid">

          <!-- LARGE CARD: Unified Gateway -->
          <div class="bento-card bento-large group">
            <div class="bento-accent-bar" style="background: linear-gradient(180deg, #3b82f6, #6366f1)"></div>
            <div class="flex h-full flex-col">
              <div class="bento-icon-wrap mb-5" style="background: linear-gradient(135deg, #3b82f6, #6366f1); box-shadow: 0 8px 24px rgba(99,102,241,0.3)">
                <component :is="IconServer" />
              </div>
              <h3 class="mb-3 text-xl font-semibold text-white">{{ t(`home.features.unifiedGateway`) }}</h3>
              <p class="mb-6 text-sm leading-relaxed text-slate-500 group-hover:text-slate-400">
                {{ t(`home.features.unifiedGatewayDesc`) }}
              </p>
              <!-- Code snippet decoration -->
              <div class="mt-auto rounded-lg border border-white/5 bg-black/30 p-3 font-mono text-xs">
                <span class="text-slate-600">POST </span>
                <span class="text-blue-400">/v1/chat/completions</span>
                <br>
                <span class="text-slate-600">Authorization: </span>
                <span class="text-emerald-400">Bearer sk-****</span>
                <br>
                <span class="text-violet-400">→ </span>
                <span class="text-teal-400">auto-routed to best provider</span>
              </div>
            </div>
          </div>

          <!-- REGULAR CARD: Load Balancing -->
          <div class="bento-card bento-regular group">
            <div class="bento-accent-bar" style="background: linear-gradient(180deg, #14b8a6, #06b6d4)"></div>
            <div class="bento-icon-wrap mb-4" style="background: linear-gradient(135deg, #14b8a6, #0d9488); box-shadow: 0 8px 24px rgba(20,184,166,0.3)">
              <component :is="IconRoute" />
            </div>
            <h3 class="mb-2 text-lg font-semibold text-white">{{ t(`home.features.multiAccount`) }}</h3>
            <p class="text-sm leading-relaxed text-slate-500 group-hover:text-slate-400">
              {{ t(`home.features.multiAccountDesc`) }}
            </p>
            <!-- Mini balance visualization -->
            <div class="mt-4 space-y-2">
              <div v-for="(bar, i) in loadBars" :key="i" class="flex items-center gap-2">
                <span class="w-14 font-mono text-[10px] text-slate-600">{{ bar.label }}</span>
                <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-white/5">
                  <div class="h-full rounded-full transition-all" :style="{ width: bar.width, background: bar.color }"></div>
                </div>
                <span class="w-8 text-right font-mono text-[10px] text-teal-500">{{ bar.pct }}</span>
              </div>
            </div>
          </div>

          <!-- STATS CARD -->
          <div class="bento-card bento-stats">
            <div class="flex h-full flex-col justify-between">
              <div class="mb-2 font-mono text-[10px] uppercase tracking-wider text-slate-600">// Live Stats</div>
              <div class="space-y-4">
                <div v-for="s in stats" :key="s.label" class="stat-row">
                  <span class="stat-big-value">{{ s.value }}</span>
                  <span class="stat-big-label">{{ s.label }}</span>
                </div>
              </div>
              <div class="mt-4 flex items-center gap-1.5">
                <span class="h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-400 shadow-[0_0_6px_#34d399]"></span>
                <span class="font-mono text-[10px] text-emerald-500">99.9% SLA Uptime</span>
              </div>
            </div>
          </div>

          <!-- WIDE CARD: Analytics -->
          <div class="bento-card bento-wide group">
            <div class="bento-accent-bar" style="background: linear-gradient(180deg, #a855f7, #7c3aed)"></div>
            <div class="flex h-full flex-col">
              <div class="mb-4 flex items-start justify-between">
                <div>
                  <div class="bento-icon-wrap mb-3" style="background: linear-gradient(135deg, #a855f7, #7c3aed); box-shadow: 0 8px 24px rgba(168,85,247,0.3); width: 40px; height: 40px">
                    <component :is="IconChart" />
                  </div>
                  <h3 class="text-lg font-semibold text-white">{{ t(`home.features.balanceQuota`) }}</h3>
                </div>
                <div class="flex gap-1.5">
                  <div v-for="tag in featureTags" :key="tag.text" class="mini-tag">{{ tag.text }}</div>
                </div>
              </div>
              <p class="text-sm leading-relaxed text-slate-500 group-hover:text-slate-400">
                {{ t(`home.features.balanceQuotaDesc`) }}
              </p>
              <!-- Sparkline decoration -->
              <div class="mt-4 flex items-end gap-1">
                <div
                  v-for="(h, i) in sparkline"
                  :key="i"
                  class="sparkbar"
                  :style="{ height: h + 'px', animationDelay: (i * 0.08) + 's' }"
                ></div>
              </div>
            </div>
          </div>

        </div>
      </section>

      <!-- ── PROVIDERS MARQUEE ──────────────── -->
      <section class="mx-auto max-w-7xl px-6 pb-20">
        <div class="mb-8 text-center">
          <h2 class="mb-2 text-xl font-bold text-white">{{ t('home.providers.title') }}</h2>
          <p class="font-mono text-xs uppercase tracking-[0.2em] text-slate-600">
            // {{ t('home.providers.description') }}
          </p>
        </div>

        <div class="marquee-container">
          <div class="marquee-fade-left"></div>
          <div class="marquee-fade-right"></div>
          <div class="marquee-track">
            <div class="marquee-inner">
              <div
                v-for="p in [...providerList, ...providerList]"
                :key="p.name + Math.random()"
                class="provider-chip"
                :class="p.live ? 'provider-chip-live' : 'provider-chip-dim'"
              >
                <div class="provider-badge" :style="{ background: p.gradient }">
                  <span class="text-[10px] font-bold text-white">{{ p.letter }}</span>
                </div>
                <span class="text-sm font-medium">{{ p.name }}</span>
                <span v-if="p.live" class="provider-live-dot"></span>
              </div>
            </div>
          </div>
        </div>
      </section>

    </main>

    <!-- ══════════════════════════════════════════
         FOOTER
    ══════════════════════════════════════════ -->
    <footer class="home-footer relative z-10">
      <div class="mx-auto flex max-w-7xl flex-col items-center justify-between gap-3 px-6 py-6 text-center sm:flex-row sm:text-left">
        <p class="font-mono text-xs text-slate-700">
          &copy; {{ currentYear }} {{ siteName }} · {{ t('home.footer.allRightsReserved') }}
        </p>
        <div class="flex items-center gap-5">
          <a v-if="docUrl" :href="docUrl" target="_blank" rel="noopener noreferrer"
            class="font-mono text-xs text-slate-700 transition-colors hover:text-teal-400">/docs</a>
          <a :href="githubUrl" target="_blank" rel="noopener noreferrer"
            class="font-mono text-xs text-slate-700 transition-colors hover:text-teal-400">/github</a>
        </div>
      </div>
    </footer>

  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, defineComponent, h } from 'vue'
import { useI18n } from 'vue-i18n'
import { useAuthStore, useAppStore } from '@/stores'
import LocaleSwitcher from '@/components/common/LocaleSwitcher.vue'
import Icon from '@/components/icons/Icon.vue'

const { t } = useI18n()
const authStore = useAuthStore()
const appStore = useAppStore()

const siteName = computed(() => appStore.cachedPublicSettings?.site_name || appStore.siteName || 'TrafficAPI')
const siteLogo = computed(() => appStore.cachedPublicSettings?.site_logo || appStore.siteLogo || '')
const docUrl = computed(() => appStore.cachedPublicSettings?.doc_url || appStore.docUrl || '')
const homeContent = computed(() => appStore.cachedPublicSettings?.home_content || '')

const isHomeContentUrl = computed(() => {
  const content = homeContent.value.trim()
  return content.startsWith('http://') || content.startsWith('https://')
})

const isDark = ref(document.documentElement.classList.contains('dark'))
const githubUrl = 'https://github.com/Wei-Shaw/sub2api'
const isAuthenticated = computed(() => authStore.isAuthenticated)
const isAdmin = computed(() => authStore.isAdmin)
const dashboardPath = computed(() => isAdmin.value ? '/admin/dashboard' : '/dashboard')
const userInitial = computed(() => {
  const user = authStore.user
  if (!user?.email) return ''
  return user.email.charAt(0).toUpperCase()
})
const currentYear = computed(() => new Date().getFullYear())

const stats = [
  { value: '3+', label: 'AI Providers' },
  { value: '99.9%', label: 'SLA Uptime' },
  { value: '1', label: 'API Key' },
]

const pipeMetrics = [
  { value: '< 50ms', label: 'p99 Latency' },
  { value: '0%', label: 'Error Rate' },
  { value: '1.4k/m', label: 'Req/min' },
]

const loadBars = [
  { label: 'acct[0]', width: '72%', pct: '72%', color: '#14b8a6' },
  { label: 'acct[1]', width: '45%', pct: '45%', color: '#06b6d4' },
  { label: 'acct[2]', width: '61%', pct: '61%', color: '#0ea5e9' },
]

const sparkline = [12, 20, 16, 28, 22, 35, 30, 42, 38, 50, 45, 55, 48, 60, 55, 65, 58, 70, 62, 75]

const featureTags = computed(() => [
  { text: t('home.tags.subscriptionToApi') },
  { text: t('home.tags.stickySession') },
  { text: t('home.tags.realtimeBilling') },
])

// Inline SVG icon components
const IconServer = defineComponent({
  render: () => h('svg', { class: 'h-5 w-5 text-white', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z' })
  ])
})
const IconRoute = defineComponent({
  render: () => h('svg', { class: 'h-5 w-5 text-white', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5' })
  ])
})
const IconChart = defineComponent({
  render: () => h('svg', { class: 'h-4 w-4 text-white', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z' })
  ])
})

const providerList = computed(() => [
  { name: t('home.providers.claude'),      letter: 'C', gradient: 'linear-gradient(135deg,#f97316,#ea580c)', live: true },
  { name: 'GPT',                           letter: 'G', gradient: 'linear-gradient(135deg,#22c55e,#16a34a)', live: true },
  { name: t('home.providers.gemini'),      letter: 'G', gradient: 'linear-gradient(135deg,#3b82f6,#2563eb)', live: true },
  { name: t('home.providers.antigravity'), letter: 'A', gradient: 'linear-gradient(135deg,#f43f5e,#db2777)', live: true },
  { name: t('home.providers.more'),        letter: '+', gradient: 'linear-gradient(135deg,#475569,#334155)', live: false },
])

function toggleTheme() {
  isDark.value = !isDark.value
  document.documentElement.classList.toggle('dark', isDark.value)
  localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
}

function initTheme() {
  const savedTheme = localStorage.getItem('theme')
  if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    isDark.value = true
    document.documentElement.classList.add('dark')
  }
}

onMounted(() => {
  initTheme()
  authStore.checkAuth()
  if (!appStore.publicSettingsLoaded) {
    appStore.fetchPublicSettings()
  }
})
</script>

<style scoped>
/* ══════════════════════════════════════════════
   ROOT
══════════════════════════════════════════════ */
.home-root {
  background: #080e1a;
  color: white;
}

/* ══════════════════════════════════════════════
   AURORA BACKGROUND
══════════════════════════════════════════════ */
.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}
.aurora-violet {
  top: -20%;
  right: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(ellipse, rgba(139,92,246,0.18) 0%, transparent 65%);
  animation: aurora-drift-1 18s ease-in-out infinite alternate;
}
.aurora-teal {
  bottom: -15%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(20,184,166,0.15) 0%, transparent 65%);
  animation: aurora-drift-2 22s ease-in-out infinite alternate;
}
.aurora-indigo {
  top: 40%;
  left: 25%;
  width: 500px;
  height: 500px;
  background: radial-gradient(ellipse, rgba(99,102,241,0.10) 0%, transparent 65%);
  animation: aurora-drift-3 26s ease-in-out infinite alternate;
}
@keyframes aurora-drift-1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-40px, 30px) scale(1.08); }
}
@keyframes aurora-drift-2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(30px, -40px) scale(1.05); }
}
@keyframes aurora-drift-3 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-20px, -30px) scale(0.95); }
}
.noise-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
}

/* ══════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════ */
.home-header {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  backdrop-filter: blur(16px);
  background: rgba(8,14,26,0.7);
}
.logo-badge {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(139,92,246,0.25), 0 0 16px rgba(139,92,246,0.12);
}
.nav-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: #94a3b8;
  transition: all 0.2s;
}
.nav-pill:hover { background: rgba(255,255,255,0.06); color: #e2e8f0; }
.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  border-radius: 6px;
  color: #94a3b8;
  transition: all 0.2s;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-icon-btn:hover { background: rgba(255,255,255,0.06); color: #e2e8f0; }
.cta-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(139,92,246,0.3);
  background: rgba(139,92,246,0.1);
  font-size: 12px;
  font-weight: 500;
  color: #c4b5fd;
  transition: all 0.2s;
}
.cta-header-btn:hover {
  border-color: rgba(139,92,246,0.6);
  background: rgba(139,92,246,0.18);
  box-shadow: 0 0 16px rgba(139,92,246,0.2);
}
.avatar-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  font-size: 9px;
  font-weight: 700;
  color: white;
}

/* ══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
.hero-headline {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 35%, #5eead4 70%, #14b8a6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* CTA Buttons */
.cta-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6, #6366f1);
  background-size: 200% 200%;
  animation: btn-gradient 4s ease infinite;
  box-shadow: 0 0 0 1px rgba(139,92,246,0.4), 0 4px 24px rgba(139,92,246,0.3);
  transition: box-shadow 0.25s, transform 0.25s;
}
.cta-primary-btn:hover {
  box-shadow: 0 0 0 1px rgba(139,92,246,0.7), 0 8px 32px rgba(139,92,246,0.45);
  transform: translateY(-2px);
}
@keyframes btn-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.cta-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #94a3b8;
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.2s;
}
.cta-ghost-btn:hover {
  border-color: rgba(139,92,246,0.3);
  color: #c4b5fd;
}

/* ══════════════════════════════════════════════
   PIPELINE VISUALIZATION
══════════════════════════════════════════════ */
.pipeline-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}
.pipeline-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse at center, rgba(99,102,241,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.pipeline-card {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(15,20,40,0.7);
  backdrop-filter: blur(20px);
  padding: 28px 24px 20px;
  box-shadow: 0 0 0 1px rgba(99,102,241,0.06), 0 24px 60px rgba(0,0,0,0.6);
  overflow: hidden;
}
.pipeline-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,0.4), rgba(20,184,166,0.4), transparent);
}
.pipeline-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}
.pipe-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.pipe-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.08);
}
.pipe-icon-client  { background: rgba(15,23,42,0.8); color: #94a3b8; }
.pipe-icon-gateway { background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(99,102,241,0.2)); color: #93c5fd; border-color: rgba(99,102,241,0.2); }
.pipe-icon-balancer{ background: linear-gradient(135deg, rgba(20,184,166,0.2), rgba(6,182,212,0.2)); color: #5eead4; border-color: rgba(20,184,166,0.2); }
.pipe-icon-ai      { background: linear-gradient(135deg, rgba(168,85,247,0.2), rgba(139,92,246,0.2)); color: #d8b4fe; border-color: rgba(168,85,247,0.2); }
.pipe-icon-response{ background: linear-gradient(135deg, rgba(52,211,153,0.2), rgba(16,185,129,0.2)); color: #6ee7b7; border-color: rgba(52,211,153,0.2); }
.pipe-label {
  font-size: 10px;
  font-family: ui-monospace, monospace;
  color: #475569;
  white-space: nowrap;
}
.pipe-connector {
  position: relative;
  width: 60px;
  height: 2px;
  flex-shrink: 0;
  margin-bottom: 20px;
}
.pipe-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(99,102,241,0.15), rgba(20,184,166,0.3), rgba(99,102,241,0.15));
}
.pipe-dot {
  position: absolute;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #14b8a6;
  box-shadow: 0 0 8px rgba(20,184,166,0.8);
}
.pipe-dot-1 { animation: pipe-flow 2.0s linear infinite; }
.pipe-dot-2 { animation: pipe-flow 2.0s linear 0.4s infinite; }
.pipe-dot-3 { animation: pipe-flow 2.0s linear 0.8s infinite; }
.pipe-dot-4 { animation: pipe-flow 2.0s linear 1.2s infinite; }
@keyframes pipe-flow {
  from { left: -5%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  to   { left: 105%; opacity: 0; }
}
.pipe-metrics {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.pipe-metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.pipe-metric-val {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  color: #5eead4;
}
.pipe-metric-label {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ══════════════════════════════════════════════
   BENTO FEATURES
══════════════════════════════════════════════ */
.bento-title-gradient {
  background: linear-gradient(135deg, #ffffff, #c4b5fd 50%, #5eead4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 16px;
}

.bento-card {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(12,18,36,0.7);
  backdrop-filter: blur(16px);
  padding: 26px;
  overflow: hidden;
  transition: all 0.35s ease;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.bento-card:hover {
  border-color: rgba(255,255,255,0.12);
  background: rgba(15,22,45,0.88);
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}

/* Bento layout sizes */
.bento-large  { grid-column: span 2; min-height: 260px; }
.bento-regular{ grid-column: span 1; }
.bento-stats  { grid-column: span 1; }
.bento-wide   { grid-column: span 2; }

/* Left accent bar */
.bento-accent-bar {
  position: absolute;
  left: 0; top: 0;
  width: 3px;
  height: 100%;
  opacity: 0.6;
  border-radius: 0 0 0 16px;
  transition: opacity 0.3s;
}
.bento-card:hover .bento-accent-bar { opacity: 1; }

.bento-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stats card specific */
.stat-row { display: flex; flex-direction: column; gap: 2px; }
.stat-big-value {
  font-size: 1.8rem;
  font-weight: 900;
  font-family: ui-monospace, monospace;
  color: white;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-big-label {
  font-size: 10px;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Mini tag */
.mini-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid rgba(139,92,246,0.2);
  background: rgba(139,92,246,0.08);
  color: #c4b5fd;
  white-space: nowrap;
}

/* Sparkline bars */
.sparkbar {
  width: 6px;
  border-radius: 2px;
  background: linear-gradient(180deg, #a855f7, #7c3aed);
  opacity: 0.7;
  animation: spark-grow 0.4s ease forwards;
}
@keyframes spark-grow {
  from { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
  to   { transform: scaleY(1); transform-origin: bottom; opacity: 0.7; }
}

/* ══════════════════════════════════════════════
   PROVIDERS MARQUEE
══════════════════════════════════════════════ */
.marquee-container {
  position: relative;
  overflow: hidden;
}
.marquee-fade-left,
.marquee-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee-fade-left {
  left: 0;
  background: linear-gradient(90deg, #080e1a, transparent);
}
.marquee-fade-right {
  right: 0;
  background: linear-gradient(-90deg, #080e1a, transparent);
}
.marquee-track {
  overflow: hidden;
}
.marquee-inner {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marquee-scroll 24s linear infinite;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.provider-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,22,45,0.6);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  transition: all 0.25s;
}
.provider-chip-live {
  color: #cbd5e1;
}
.provider-chip-dim {
  opacity: 0.35;
  color: #475569;
}
.provider-chip-live:hover {
  border-color: rgba(139,92,246,0.2);
  background: rgba(139,92,246,0.06);
}
.provider-badge {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.provider-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 6px rgba(52,211,153,0.8);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.home-footer {
  border-top: 1px solid rgba(255,255,255,0.05);
  background: rgba(8,14,26,0.8);
}

/* Responsive */
@media (max-width: 768px) {
  .bento-large { grid-column: span 3; }
  .bento-regular { grid-column: span 3; }
  .bento-stats { grid-column: span 3; }
  .bento-wide { grid-column: span 3; }
  .pipeline-inner { justify-content: flex-start; }
  .pipe-connector { width: 32px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .bento-large { grid-column: span 2; }
  .bento-wide { grid-column: span 3; }
}
</style>
