/*
 * VibeCMD Color Overhaul v7.1
 * Stronger gradients, vibrant accents, premium glass effects
 */

/* ═══════════════════════════════════════
   INLINE SVG ICON SYSTEM
   ═══════════════════════════════════════ */
.vibe-icon {
    display: inline-block;
    vertical-align: -0.15em;
    flex-shrink: 0;
}
.hero-badge .vibe-icon,
.section-label .vibe-icon,
.btn .vibe-icon,
.trust-item .vibe-icon {
    margin-right: 6px;
    vertical-align: -0.18em;
}
.icon-badge .vibe-icon,
.svc-icon .vibe-icon,
.hi-icon .vibe-icon,
.info-icon .vibe-icon,
.v-icon .vibe-icon,
.ic-icon .vibe-icon,
.inc-icon .vibe-icon,
.guarantee-icon .vibe-icon {
    width: 50%;
    height: 50%;
    stroke-width: 1.6;
    vertical-align: middle;
}
.overhaul-grid .ico .vibe-icon,
.value-grid .ico .vibe-icon {
    width: 26px;
    height: 26px;
}
.footer-app-chip .vibe-icon {
    vertical-align: -0.22em;
    margin-right: 4px;
}
.vibe-drawer-link .vibe-icon,
.vibe-drawer-cta .vibe-icon {
    margin-right: 8px;
    vertical-align: -0.2em;
    opacity: 0.85;
}

/* ═══════════════════════════════════════
   STRONGER BRAND GRADIENTS
   ═══════════════════════════════════════ */
:root {
    --gradient: linear-gradient(135deg, #00FF88 0%, #2AC4F5 45%, #5B8DEF 100%) !important;
    --gradient-vivid: linear-gradient(135deg, #00FF88 0%, #00E5FF 50%, #5B8DEF 100%);
    --gradient-fire: linear-gradient(135deg, #00FF88, #FFD600);
    --gradient-aurora: linear-gradient(135deg, #00FF88 0%, #5B8DEF 50%, #8B6FD0 100%);
    --glow-primary: 0 0 24px rgba(0,255,136,0.45);
    --glow-secondary: 0 0 24px rgba(91,141,239,0.4);
}


/* ═══════════════════════════════════════
   PREMIUM HERO TITLE GRADIENT (animated)
   ═══════════════════════════════════════ */
.hero h1,
.hero-title,
.hero-compact h1,
.section-title.gradient,
h1.gradient,
.gradient-text,
.hero-headline {
    background: linear-gradient(
        90deg,
        #00FF88 0%,
        #2AC4F5 25%,
        #5B8DEF 50%,
        #8B6FD0 75%,
        #00FF88 100%
    ) !important;
    background-size: 200% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: gradientFlow 12s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(0,255,136,0.18));
}
@keyframes gradientFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}


/* ═══════════════════════════════════════
   PREMIUM CARDS — Glass + colored border
   ═══════════════════════════════════════ */
.service-card,
.app-card,
.price-card,
.svc-hub-card,
.retainer-card,
.pkg-card,
.review-card,
.inc-item,
.case-study-card {
    background: linear-gradient(135deg,
        rgba(255,255,255,0.04),
        rgba(0,255,136,0.015) 50%,
        rgba(91,141,239,0.02)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), border-color 0.3s, box-shadow 0.4s !important;
}
.service-card:hover,
.app-card:hover,
.price-card:hover,
.svc-hub-card:hover,
.retainer-card:hover,
.pkg-card:hover {
    border-color: rgba(0,255,136,0.45) !important;
    box-shadow:
        0 20px 50px rgba(0,0,0,0.4),
        0 0 0 1px rgba(0,255,136,0.1),
        0 0 60px rgba(0,255,136,0.15) !important;
    transform: translateY(-6px) !important;
}


/* ═══════════════════════════════════════
   PREMIUM PRIMARY BUTTON
   ═══════════════════════════════════════ */
.btn-primary,
.vibe-nav-cta,
.vibe-drawer-cta {
    background: linear-gradient(135deg, #00FF88 0%, #2AC4F5 50%, #5B8DEF 100%) !important;
    background-size: 200% 200% !important;
    color: #060B16 !important;
    font-weight: 700 !important;
    box-shadow:
        0 4px 20px rgba(0,255,136,0.35),
        0 0 0 1px rgba(0,255,136,0.4) inset !important;
    animation: btnGradientShift 6s ease-in-out infinite;
    border: none !important;
}
@keyframes btnGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.btn-primary:hover,
.vibe-nav-cta:hover,
.vibe-drawer-cta:hover {
    box-shadow:
        0 8px 30px rgba(0,255,136,0.55),
        0 0 0 1px rgba(0,255,136,0.6) inset,
        0 0 40px rgba(91,141,239,0.3) !important;
    transform: translateY(-2px) !important;
}


/* ═══════════════════════════════════════
   PREMIUM BADGES — vivid pill
   ═══════════════════════════════════════ */
.hero-badge,
.badge {
    background: linear-gradient(90deg,
        rgba(0,255,136,0.18),
        rgba(42,196,245,0.18),
        rgba(91,141,239,0.18)) !important;
    border: 1px solid rgba(0,255,136,0.35) !important;
    box-shadow:
        0 0 0 1px rgba(0,255,136,0.08),
        0 4px 20px rgba(0,255,136,0.12) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff !important;
}


/* ═══════════════════════════════════════
   PREMIUM SECTION LABELS
   ═══════════════════════════════════════ */
.section-label,
.section-badge {
    background: linear-gradient(90deg,
        rgba(0,255,136,0.18),
        rgba(91,141,239,0.18)) !important;
    border: 1px solid rgba(0,255,136,0.3) !important;
    color: #4DFFA8 !important;
    box-shadow: 0 0 20px rgba(0,255,136,0.1);
    text-shadow: 0 0 8px rgba(0,255,136,0.4);
}


/* ═══════════════════════════════════════
   PREMIUM NAV BACKGROUND
   ═══════════════════════════════════════ */
.vibe-nav {
    background: rgba(6,11,22,0.72) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(0,255,136,0.08) !important;
}
.vibe-nav.scrolled {
    background: rgba(6,11,22,0.92) !important;
    border-bottom-color: rgba(0,255,136,0.18) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 60px rgba(0,255,136,0.05) !important;
}


/* ═══════════════════════════════════════
   PREMIUM PRICING NUMBERS
   ═══════════════════════════════════════ */
.price-amount,
.pkg-price,
.retainer-price,
.stat-val,
.hero-stat-num,
.roi-stat .val,
[data-count] {
    background: linear-gradient(135deg, #00FF88 0%, #2AC4F5 50%, #5B8DEF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 16px rgba(0,255,136,0.25));
    font-weight: 800 !important;
}


/* ═══════════════════════════════════════
   PREMIUM CTA BANNER
   ═══════════════════════════════════════ */
.cta-banner {
    background: linear-gradient(135deg,
        rgba(0,255,136,0.12) 0%,
        rgba(91,141,239,0.08) 50%,
        rgba(139,111,208,0.1) 100%) !important;
    border: 1px solid rgba(0,255,136,0.25) !important;
    box-shadow:
        0 30px 80px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 80px rgba(0,255,136,0.08) !important;
}


/* ═══════════════════════════════════════
   PREMIUM FOOTER
   ═══════════════════════════════════════ */
.vibe-footer {
    background: linear-gradient(180deg,
        #050912 0%,
        #030710 100%) !important;
    border-top: 1px solid rgba(0,255,136,0.12) !important;
}


/* ═══════════════════════════════════════
   ICON COLORS — colored circle icons
   ═══════════════════════════════════════ */
.service-icon,
.svc-hub-icon,
.app-icon,
.feature-icon {
    background: linear-gradient(135deg,
        rgba(0,255,136,0.18),
        rgba(91,141,239,0.15)) !important;
    border: 1px solid rgba(0,255,136,0.25) !important;
    color: #00FF88 !important;
    box-shadow:
        0 8px 24px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 24px rgba(0,255,136,0.15) !important;
}


/* ═══════════════════════════════════════
   PREMIUM LINKS in body text
   ═══════════════════════════════════════ */
.prose a,
p a:not(.btn):not(.vibe-nav-link):not(.vibe-drawer-link):not(.vibe-drawer-cta):not(.vibe-nav-cta) {
    color: #4DFFA8;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,255,136,0.4);
    transition: border-color 0.3s, color 0.3s;
}
.prose a:hover,
p a:not(.btn):hover {
    color: #00FF88;
    border-bottom-color: #00FF88;
}


/* ═══════════════════════════════════════
   PREMIUM CHECK MARKS / BULLETS
   ═══════════════════════════════════════ */
.feature-list li::before,
.pkg-features li::before,
.retainer-features li::before {
    color: #00FF88 !important;
    text-shadow: 0 0 8px rgba(0,255,136,0.5);
}


/* ═══════════════════════════════════════
   BODY TEXT — slightly warmer
   ═══════════════════════════════════════ */
body {
    color: #E8EDF5;
}
.text-muted,
.muted {
    color: #8B96AC !important;
}


/* ═══════════════════════════════════════
   PHONE / DEVICE GLOW
   ═══════════════════════════════════════ */
.app-phone,
.hero-phone,
.cs-phones img {
    box-shadow:
        0 30px 60px rgba(0,0,0,0.5),
        0 0 0 1px rgba(0,255,136,0.12),
        0 0 80px rgba(0,255,136,0.15),
        0 0 120px rgba(91,141,239,0.1) !important;
}