/* ==========================================================================
   1. LANDING PAGE UTILITIES & HERO
   ========================================================================== */
.hero-overlay {
    background-color: rgba(0, 0, 0, 0.6);
}

.trajectory-connector {
    background: linear-gradient(90deg, transparent, #3dd5f3 20%, #4dd4ac 50%, #fd9843 80%, transparent);
    height: 3px;
    top: 45px;
}

.hover-lift {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.hover-lift:hover {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-5px);
}

/* ==========================================================================
   2. LAB DESIGN SYSTEM (Timeline & Frames)
   ========================================================================== */
.list-lab {
    border-left: 2px solid rgba(179, 139, 77, 0.2); /* Updated to Brand Gold */
    padding-left: 1.5rem;
}

.list-lab-item {
    margin-bottom: 1.5rem;
    position: relative;
}

.list-lab-item::before {
    background: #B38B4D; /* Updated to Brand Gold */
    border-radius: 50%;
    content: '';
    height: 10px;
    left: -1.65rem;
    opacity: 0.6;
    position: absolute;
    top: 6px;
    width: 10px;
}

.img-lab-frame {
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.img-lab-frame img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* Glass Lab Badges */
.lab-badge {
    border: 1px solid transparent;
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    padding: 0.4rem 1.2rem;
    text-transform: uppercase;
}

.lab-badge-indigo {
    background: rgba(142, 134, 213, 0.1);
    border-color: rgba(142, 134, 213, 0.3);
    color: #8E86D5;
}

.lab-badge-teal {
    background: rgba(72, 198, 179, 0.1);
    border-color: rgba(72, 198, 179, 0.3);
    color: #48C6B3;
}

.lab-badge-gold {
    background: rgba(241, 211, 130, 0.1);
    border-color: rgba(241, 211, 130, 0.3);
    color: #B38B4D;
}

.lab-badge-popular {
    background: #B38B4D;
    color: white;
    font-size: 0.6rem;
    left: 50%;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.75rem;
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* Updated Accent Colors to match Brand Palette */
.text-lab-indigo {
    color: #8E86D5;
}

.text-lab-teal {
    color: #48C6B3;
}

.text-lab-gold {
    color: #B38B4D;
}

.card-lab-active {
    border: 1px solid rgba(179, 139, 77, 0.3) !important;
}

/* ==========================================================================
   3. BRAND IDENTITY SYSTEM (Gradients & Icons)
   ========================================================================== */
.icon-capsule {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 64px;
    justify-content: center;
    width: 64px;

    /* RESTORES THE CIRCLE VISIBILITY */
    background-color: #f8f9fa;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Shared properties for clipping gradients to icons */
.icon-dual-recognition, .icon-dual-construction, .icon-dual-production, .icon-dual-mastery,
.grad-recognition, .grad-construction, .grad-production, .grad-mastery {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    display: inline-block;
}

/* 1. Recognition (Gold) */
.grad-recognition {
    background: linear-gradient(135deg, #F1D382 0%, #B38B4D 100%);
}

.icon-dual-recognition {
    background: linear-gradient(to right, #F1D382 50%, #B38B4D 50%);
}

/* 2. Construction (Teal) */
.grad-construction {
    background: linear-gradient(135deg, #48C6B3 0%, #1D6B63 100%);
}

.icon-dual-construction {
    background: linear-gradient(to right, #48C6B3 50%, #1D6B63 50%);
}

/* 3. Production (Indigo) */
.grad-production {
    background: linear-gradient(135deg, #8E86D5 0%, #3B337F 100%);
}

.icon-dual-production {
    background: linear-gradient(to right, #8E86D5 50%, #3B337F 50%);
}

/* 4. Mastery (Red/Crimson) */
.grad-mastery {
    background: linear-gradient(135deg, #D1495B 0%, #8E323E 100%);
}

.icon-dual-mastery {
    background: linear-gradient(to right, #D1495B 50%, #8E323E 50%);
}