/*
 * VibeCMD — Studio 2026 Theme
 * "Indie Product Studio OS" — refined dark dev-tool aesthetic.
 * Keeps signature green (#00FF88), adds a warm-amber secondary (#FFC971).
 * Scoped under .studio-2026 so it only restyles pages that opt in.
 * Loaded globally; the homepage adds its own bespoke hero (.h-*) inline.
 */

.studio-2026 {
    --h-green: #00FF88;
    --h-green-2: #5BF2C0;
    --h-amber: #FFC971;
    --h-amber-2: #FFB347;
    --h-ink: #04080E;
    --h-panel: rgba(255, 255, 255, 0.025);
    --h-panel-2: rgba(255, 255, 255, 0.045);
    --h-line: rgba(255, 255, 255, 0.08);
    --h-line-2: rgba(0, 255, 136, 0.22);
    --h-text: #EAF1F4;
    --h-muted: #8A93A6;
    --h-mono: 'JetBrains Mono', monospace;
    --h-display: 'Space Grotesk', sans-serif;
    position: relative;
}

/* Hairline grid + glow backdrop */
.studio-2026::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 25%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 25%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}

.studio-2026 .container,
.studio-2026 .hero-inner,
.studio-2026 .section > * {
    position: relative;
    z-index: 1;
}

/* ============================================================
   EYEBROWS / BADGES
   ============================================================ */
.studio-2026 .hero-badge,
.studio-2026 .section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--h-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.studio-2026 .hero-badge {
    color: var(--h-green);
    padding: 7px 14px;
    border: 1px solid var(--h-line-2);
    border-radius: 999px;
    background: rgba(0, 255, 136, 0.05);
}

.studio-2026 .section-label {
    color: var(--h-amber);
    margin-bottom: 16px;
}

/* ============================================================
   HEADINGS
   ============================================================ */
.studio-2026 .hero h1,
.studio-2026 .hero-compact h1,
.studio-2026 .hero-title,
.studio-2026 .section-title {
    font-family: var(--h-display);
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: var(--h-text);
}

.studio-2026 .hero h1,
.studio-2026 .hero-compact h1,
.studio-2026 .hero-title {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    letter-spacing: -0.03em;
    line-height: 1.04;
}

.studio-2026 .section-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.studio-2026 .gradient-text,
.studio-2026 .hero-title .gradient-text,
.studio-2026 .section-title .gradient-text {
    background: linear-gradient(110deg, var(--h-green), var(--h-amber)) !important;
    background-size: 100% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: none !important;
    filter: none !important;
}

.studio-2026 .section-subtitle,
.studio-2026 .hero-sub {
    color: var(--h-muted);
    line-height: 1.7;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.studio-2026 .btn-primary {
    background: linear-gradient(135deg, var(--h-green), var(--h-green-2)) !important;
    color: #04241a !important;
    -webkit-text-fill-color: #04241a !important;
    border: 0 !important;
    box-shadow: 0 10px 30px rgba(0, 255, 136, 0.22);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s !important;
}

.studio-2026 .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 255, 136, 0.32);
}

.studio-2026 .btn-secondary,
.studio-2026 .btn-outline {
    background: var(--h-panel) !important;
    color: var(--h-text) !important;
    -webkit-text-fill-color: var(--h-text) !important;
    border: 1px solid var(--h-line) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s, background 0.25s !important;
}

.studio-2026 .btn-secondary:hover,
.studio-2026 .btn-outline:hover {
    transform: translateY(-3px);
    border-color: var(--h-line-2) !important;
    background: var(--h-panel-2) !important;
}

/* ============================================================
   CARDS — glass panels with hover lift + top accent bar
   ============================================================ */
.studio-2026 .service-card,
.studio-2026 .svc-hub-card,
.studio-2026 .price-card,
.studio-2026 .pkg-card,
.studio-2026 .retainer-card,
.studio-2026 .inc-item,
.studio-2026 .app-card,
.studio-2026 .review-card,
.studio-2026 .case-study-card,
.studio-2026 .feature-card,
.studio-2026 .value-card,
.studio-2026 .info-card {
    position: relative;
    background: var(--h-panel) !important;
    border: 1px solid var(--h-line) !important;
    border-radius: 18px !important;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s, background 0.3s !important;
}

.studio-2026 .service-card::after,
.studio-2026 .svc-hub-card::after,
.studio-2026 .price-card::after,
.studio-2026 .pkg-card::after,
.studio-2026 .feature-card::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--h-green), var(--h-amber));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.studio-2026 .service-card:hover,
.studio-2026 .svc-hub-card:hover,
.studio-2026 .price-card:hover,
.studio-2026 .pkg-card:hover,
.studio-2026 .retainer-card:hover,
.studio-2026 .inc-item:hover,
.studio-2026 .app-card:hover,
.studio-2026 .review-card:hover,
.studio-2026 .case-study-card:hover,
.studio-2026 .feature-card:hover,
.studio-2026 .value-card:hover,
.studio-2026 .info-card:hover {
    transform: translateY(-6px);
    border-color: var(--h-line-2) !important;
    background: var(--h-panel-2) !important;
}

.studio-2026 .service-card:hover::after,
.studio-2026 .svc-hub-card:hover::after,
.studio-2026 .price-card:hover::after,
.studio-2026 .pkg-card:hover::after,
.studio-2026 .feature-card:hover::after {
    transform: scaleX(1);
}

.studio-2026 .app-type {
    color: var(--h-amber);
}

/* Price accents */
.studio-2026 .service-price,
.studio-2026 .price-amount,
.studio-2026 .pkg-price {
    font-family: var(--h-display);
    color: var(--h-text);
}

/* ============================================================
   MISC SHARED ELEMENTS
   ============================================================ */
.studio-2026 .enterprise-badge {
    background: var(--h-panel);
    border: 1px solid var(--h-line);
    color: var(--h-text);
    font-family: var(--h-mono);
}

.studio-2026 .glow-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--h-line-2), transparent);
    border: 0;
    max-width: var(--max-w);
    margin: 8px auto;
}

.studio-2026 .cta-banner {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 255, 136, 0.08), transparent 70%),
        var(--h-panel) !important;
    border: 1px solid var(--h-line) !important;
    border-radius: 24px !important;
}

.studio-2026 .cta-banner h2 {
    font-family: var(--h-display);
}

/* Mono accents for any inline code-ish chips */
.studio-2026 .trust-item,
.studio-2026 .stat-label {
    color: var(--h-muted);
}