@import url('../css pages/global.css');

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--surface-2);
    color: var(--text-1);
    transition: background-color 0.3s, color 0.3s;
}
body.dark-theme { background-color: #0f172a; }

/* FADE IN */

/* VIBES CARD */
.vibes-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 1.5rem;
    padding: 2rem;
    transition: transform 0.3s, box-shadow 0.3s;
}
.vibes-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(99,102,241,0.1); }

/* STAT PILL */
.stat-pill {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    text-align: center;
}

/* GLOW BADGE */
.glow-badge {
    background: linear-gradient(135deg,#4f46e5,#9333ea);
    color: white;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    box-shadow: 0 4px 16px rgba(79,70,229,0.35);
}

/* INFRA BLOCK */
.infra-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}
.infra-row:last-child { border-bottom: none; }
.infra-icon {
    width: 40px; height: 40px; min-width: 40px;
    border-radius: 0.75rem;
    background: rgba(79,70,229,0.08);
    display: flex; align-items: center; justify-content: center;
}

/* LINK BUTTON */
.btn-vibes {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg,#4f46e5,#9333ea);
    color: white;
    font-weight: 800;
    font-size: 13px;
    padding: 0.85rem 1.75rem;
    border-radius: 0.9rem;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(79,70,229,0.25);
}
.btn-vibes:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(79,70,229,0.4); }

/* HERO BG GLOW */
.hero-glow {
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(79,70,229,0.08) 0%, transparent 70%);
    top: -100px; left: 50%; transform: translateX(-50%);
    pointer-events: none;
}