/* ============================================================
   landing.css — Vercel-blue overlay on top of theme.css
   Applied to public pages only. Keeps structure/markup intact,
   re-skins: flat blue accent, crisp radii, hairline borders,
   restrained motion. Inter only — no monospace fonts.
   ============================================================ */

:root {
    /* Tighten existing palette */
    --bg-page:      #05080f;
    --bg-surface:   #0a1120;
    --bg-elevated:  #0f182b;
    --bg-code:      #070b15;

    --border:       rgba(255,255,255,0.06);
    --border-hover: rgba(255,255,255,0.12);
    --border-accent:rgba(59,130,246,0.32);

    --text-heading: #eaf1fb;
    --text-body:    #96a7c4;
    --text-muted:   #5c7093;
    --text-faint:   #3d4f72;

    --accent:       #3b82f6;
    --accent-hover: #60a5fa;
    --accent-soft:  rgba(59,130,246,0.10);
    --accent-edge:  rgba(59,130,246,0.28);

    --r-1: 4px;
    --r-2: 6px;
    --r-3: 8px;
    --r-4: 10px;
    --r-5: 14px;
}

/* ---- Kill heavy decoration ---- */
.ambient-orb,
.hero-glow { display: none !important; }

/* Tone down animated gradient text — tight blue lineage */
.gradient-text {
    background: linear-gradient(90deg, #60a5fa 0%, #93c5fd 50%, #60a5fa 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: lc-shimmer 5s ease-in-out infinite !important;
    font-weight: 600 !important;
}
@keyframes lc-shimmer {
    0%,100% { background-position: 0% center; }
    50%     { background-position: 100% center; }
}

/* Replace crosshatch grid with dotted grid, masked */
.bg-grid-pattern {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(147,197,253,0.06) 1px, transparent 0) !important;
    background-size: 24px 24px !important;
    opacity: 1 !important;
    mask-image: radial-gradient(ellipse 85% 60% at 50% 15%, #000 30%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 85% 60% at 50% 15%, #000 30%, transparent 85%);
}

body {
    background: var(--bg-page) !important;
    color: var(--text-body);
    font-feature-settings: 'ss01','cv11','tnum';
    -webkit-font-smoothing: antialiased;
}

/* Tabular numerals on Inter — no mono fallback */
[class*="text-3xl"], [class*="text-4xl"], [class*="text-5xl"],
[class*="text-6xl"], [class*="text-7xl"] {
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

/* ---- Glass header: flatter, tighter ---- */
.glass-panel {
    background: rgba(5,8,15,0.78) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
}

/* ---- Primary button: flat solid blue, crisp ---- */
.btn-primary {
    background: var(--accent) !important;
    background-image: none !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    border: 1px solid var(--accent) !important;
    border-radius: var(--r-3) !important;
    padding: 10px 18px !important;
    letter-spacing: -0.005em;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 1px 0 rgba(0,0,0,0.4),
        0 6px 16px -8px rgba(59,130,246,0.5) !important;
}
.btn-primary:hover {
    background: var(--accent-hover) !important;
    background-image: none !important;
    transform: translateY(-1px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 10px 24px -10px rgba(59,130,246,0.6) !important;
}
.btn-primary:active { transform: translateY(0) !important; }

/* ---- Secondary button: ghost with hairline ---- */
.btn-secondary {
    background: transparent !important;
    color: var(--text-heading) !important;
    border: 1px solid var(--border-hover) !important;
    border-radius: var(--r-3) !important;
    padding: 10px 18px !important;
    font-weight: 500 !important;
    transition: background .18s ease, border-color .18s ease !important;
    box-shadow: none !important;
}
.btn-secondary:hover {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(147,197,253,0.35) !important;
}

/* ---- Cards: hairline borders, subtle elevation ---- */
.card, .plugin-card, .feature-card, .info-card, .plan-card, .skeleton-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-5) !important;
    box-shadow: none !important;
    transition: background .2s ease, border-color .2s ease, transform .2s ease !important;
}
.card:hover, .feature-card:hover {
    background: var(--bg-elevated) !important;
    border-color: var(--border-hover) !important;
    transform: none !important;
}

/* Plugin card — lift stays tiny, gets a blue top-edge glow */
.plugin-card { position: relative; overflow: hidden; }
.plugin-card::before { display: none !important; }
.plugin-card::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--accent-edge) 0%, transparent 40%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 0;
}
.plugin-card > * { position: relative; z-index: 1; }
.plugin-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--border-accent) !important;
    box-shadow: 0 12px 28px -14px rgba(59,130,246,0.3) !important;
    background: var(--bg-elevated) !important;
}
.plugin-card:hover::after { opacity: 0.6; }

.plan-card.popular {
    border-color: var(--border-accent) !important;
    background: linear-gradient(180deg, var(--accent-soft), transparent 55%), var(--bg-surface) !important;
    box-shadow: 0 10px 30px -12px rgba(59,130,246,0.25) !important;
}

/* ---- Unify icon chip backgrounds — all blue, no rainbow ---- */
.bg-blue-50, .bg-indigo-50,
.bg-green-50, .bg-purple-50,
.bg-orange-50, .bg-pink-50,
.bg-amber-50 {
    background-color: var(--accent-soft) !important;
}

/* Icon color inside chips — coerce to blue */
.text-primary-400,
.text-emerald-400,
.text-purple-400,
.text-orange-400,
.text-pink-400,
.text-amber-400 {
    color: var(--accent-hover) !important;
}

/* ---- CTA banner: flatten, single tint ---- */
.cta-banner-wrap {
    background: transparent !important;
    padding: 0 !important;
}
.cta-banner-inner {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-5) !important;
    position: relative;
    overflow: hidden;
}
.cta-banner-inner::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(55% 80% at 20% 0%, rgba(59,130,246,0.12), transparent 60%),
        radial-gradient(40% 60% at 90% 100%, rgba(59,130,246,0.06), transparent 60%);
    pointer-events: none;
    border-radius: inherit;
}
.cta-banner-inner > * { position: relative; }

/* ---- Filter chips / pills ---- */
.filter-chip {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-body) !important;
    border-radius: 999px !important;
    padding: 5px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
.filter-chip:hover,
.filter-chip.active {
    background: var(--accent-soft) !important;
    border-color: var(--border-accent) !important;
    color: #bfdbfe !important;
}

/* ---- Status badges: desaturate, round ---- */
.status-active, .status-info, .status-pending, .status-error {
    border-radius: var(--r-2) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ---- Install command block: tighten ---- */
.install-command {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-accent) !important;
    border-radius: var(--r-4) !important;
}
.install-command__label {
    color: var(--accent-hover) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.08em;
    font-weight: 600 !important;
}
/* install-command__text keeps its code typeface from theme.css — it's literal shell output */

/* ---- Code viewer: tighter chrome (code blocks legitimately need fixed-width) ---- */
.code-viewer {
    border-radius: var(--r-4) !important;
    border: 1px solid var(--border) !important;
}
.code-viewer__header {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border) !important;
}

/* ---- Scrollbar tint ---- */
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: #1b2744; border-radius: var(--r-1); }
::-webkit-scrollbar-thumb:hover { background: #2a3d66; }

/* ---- Footer link underline on hover ---- */
.footer-link {
    color: var(--text-muted) !important;
    transition: color .15s ease !important;
}
.footer-link:hover {
    color: var(--text-heading) !important;
}

/* ---- Skeleton: subtler shimmer ---- */
.skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.03) 25%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.03) 75%) !important;
    background-size: 200% 100% !important;
}

/* ---- Funpay banner (if shown) ---- */
.funpay-banner {
    background: linear-gradient(180deg, var(--accent-soft), transparent 80%), var(--bg-surface) !important;
    border: 1px solid var(--border-accent) !important;
    border-radius: var(--r-5) !important;
    backdrop-filter: none !important;
}

/* ---- Reveal: softer lift ---- */
.reveal {
    transform: translateY(14px);
    transition-duration: .55s !important;
}

/* ---- Button-icon pair: flatten ---- */
.btn-icon {
    border-radius: var(--r-2) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.btn-icon--primary {
    border-color: var(--border-accent) !important;
    background: var(--accent-soft) !important;
    color: #bfdbfe !important;
}
.btn-icon--primary:hover {
    border-color: var(--accent) !important;
    background: rgba(59,130,246,0.18) !important;
}

/* ---- Subtle pulsing status dot (exists in home stat strip) ---- */
.animate-ping {
    animation-duration: 2.4s !important;
}

/* ---- Large headings: Vercel-tight ---- */
h1, h2, h3 { letter-spacing: -0.02em; }
h1 { letter-spacing: -0.03em; }