/* ===================================================================
   VALUES PAGE — values.php
   =================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────── */
.values-hero {
    overflow: hidden;
}

.values-hero .values-hero-overlay {
    z-index: 1;
    pointer-events: none;
}

/* ── Core Values Diagram ──────────────────────────────────────────── */
.values-diagram-section {
    background: var(--gradient-section);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.core-diagram {
    width: 500px;
    height: 500px;
    position: relative;
}

.lightbulb-icon {
    font-size: 18rem;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.6));
}

.bulb-shine {
    position: absolute;
    top: 40%; left: 50%;
    width: 300px; height: 300px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 223, 0, 0.4) 0%, rgba(255, 223, 0, 0) 70%);
    border-radius: 50%;
    animation: glow 3s infinite;
    z-index: 1;
}

.core-value-labels li {
    position: absolute;
    color: var(--color-primary-hex);
    font-weight: 600;
    font-size: 1.1rem;
    white-space: nowrap;
    opacity: 0.5;
    transition: all 0.5s ease;
}

.core-value-labels li.active {
    opacity: 1;
    transform: scale(1.3);
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.8);
}

@keyframes glow {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.5; }
    50%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.5; }
}

/* ── Typography & Colors ──────────────────────────────────────────── */
.text-brand-primary {
    color: #642027 !important;
}

.text-brand-muted {
    color: #8a3b45 !important;
}

/* ── VMG Cards ────────────────────────────────────────────────────── */
.vmg-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(184, 74, 90, 0.1);
    box-shadow: 0 15px 35px rgba(100, 32, 39, 0.05);
    border-radius: var(--card-radius);
}

.vmg-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 45px rgba(100, 32, 39, 0.12);
    z-index: 3;
}