/* Rotating Border Gradient Engagement Cards */
.engagement-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
}
@media(min-width: 768px) { .engagement-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

.tier-card {
    position: relative;
    background: #ffffff;
    border-radius: 1.5rem;
    padding: 3rem 2.5rem;
    z-index: 1;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease;
}

.tier-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
}

.tier-card::before {
    content: '';
    position: absolute;
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    background: linear-gradient(135deg, rgba(10, 124, 73, 1), transparent 60%, rgba(10, 124, 73, 1));
    z-index: -2;
    border-radius: 1.6rem;
    animation: rotateGradient 6s linear infinite;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.tier-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ffffff;
    z-index: -1;
    border-radius: 1.5rem;
    transition: background 0.4s ease;
}

.tier-card:hover::before { opacity: 1; }

@keyframes rotateGradient {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.tier-tag {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    background: rgba(10, 124, 73, 0.1);
    color: var(--accent);
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

.tier-title {
    font-size: 2rem;
    font-family: 'Outfit', sans-serif;
    color: #0d1a12;
    font-weight: 800;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.tier-desc {
    margin-bottom: 2rem; 
    font-size: 1rem; 
    color: #475569; 
    line-height: 1.7;
    transition: color 0.3s ease;
}

.tier-features { list-style: none; margin-bottom: 2.5rem; padding: 0; }
.tier-features li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: #475569;
    font-weight: 500;
    transition: all 0.3s ease;
}
.tier-features li:hover {
    transform: translateX(8px);
    color: var(--accent);
}
.tier-features li::before {
    content: '✓';
    position: absolute;
    left: 0; top: 0;
    color: var(--accent);
    font-weight: bold;
    font-size: 1.1rem;
}

/* POPULAR TIER (The Executive Search focus) */
.tier-card.popular {
    transform: scale(1.05); /* slightly larger by default */
    box-shadow: 0 20px 60px rgba(10, 124, 73, 0.15);
}

/* Floating "Most Popular" Badge */
.tier-card.popular::before {
    content: '★ Most Popular';
    position: absolute;
    top: 0; left: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, var(--accent), #00cc99);
    color: white;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    z-index: 10;
    box-shadow: 0 5px 15px rgba(14,169,89,0.4);
    opacity: 1;
    animation: floatBadge 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes floatBadge {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, -65%); }
}

/* Subtle glowing pulse border around popular */
.tier-card.popular::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ffffff; /* Keep white! */
    z-index: -1;
    border-radius: 1.5rem;
    box-shadow: inset 0 0 0 2px var(--accent); /* Inner accent border */
    transition: background 0.4s ease;
}

.tier-card.popular:hover {
    transform: scale(1.08) translateY(-15px);
    box-shadow: 0 40px 80px rgba(10, 124, 73, 0.3);
}

/* Make popular text elements stand out beautifully on white */
.tier-card.popular .tier-tag { 
    background: var(--gradient-primary); 
    color: #ffffff; 
    box-shadow: 0 4px 15px rgba(10, 124, 73, 0.3);
}

/* Base tier card styling */
.tier-card {
    position: relative;
    background: #ffffff;
    border-radius: 1.5rem;
    padding: 3rem 2.5rem;
    z-index: 1;
    overflow: visible; /* Required to keep the floating badge visible */
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Very clean hover state without glowing pseudo-elements */
.tier-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(10, 124, 73, 0.1);
}

/* Base card border */
.tier-card.base-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: transparent;
    z-index: -1; 
    border-radius: 1.5rem;
    border: 1px solid rgba(0,0,0,0.05);
    pointer-events: none;
}\n