/* ==========================================================================
   CEO ICON SYSTEM v2 - The Architect's Blueprint
   Inline SVG Icons with Semantic Colors
   ========================================================================== */

/* ==========================================================================
   BASE ICON STYLING
   ========================================================================== */

.svg-icon {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    vertical-align: middle;
    position: relative;
    top: -0.1em;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* ==========================================================================
   ICON SIZES
   ========================================================================== */

/* Standard container sizes */
.benefit-icon .svg-icon,
.assistant-icon .svg-icon,
.lifestyle-icon .svg-icon,
.gamechanger-icon .svg-icon,
.highlight-icon .svg-icon,
.prop-icon .svg-icon {
    width: 1.5em;
    height: 1.5em;
}

/* Flip hint icon - smaller */
.flip-hint .svg-icon {
    width: 1em;
    height: 1em;
    animation: subtleBounce 2s ease-in-out infinite;
}

/* ==========================================================================
   SEMANTIC COLORS - ARCHITECT SYSTEM v2
   ========================================================================== */

/* Business / Strategy - Architect Blue */
.svg-icon.icon-business,
.icon-business .svg-icon {
    stroke: var(--accent-blue, #007acc);
}

/* AI / Technology - Exit Gold */
.svg-icon.icon-ai,
.icon-ai .svg-icon {
    stroke: var(--accent-gold, #f7931e);
}

/* Transformation / Growth - Exit Gold */
.svg-icon.icon-transform,
.icon-transform .svg-icon {
    stroke: var(--accent-gold, #f7931e);
}

/* Education / Learning - Green */
.svg-icon.icon-education,
.icon-education .svg-icon {
    stroke: #4ade80;
}

/* Video / Media - Amber */
.svg-icon.icon-video,
.icon-video .svg-icon {
    stroke: #f59e0b;
}

/* Energy / Biohack - Gold */
.svg-icon.icon-energy,
.icon-energy .svg-icon {
    stroke: var(--accent-gold, #f7931e);
}

/* Checkmark - Green */
.svg-icon.icon-check,
.icon-check .svg-icon {
    stroke: #4ade80;
}

/* Alert / Warning - Orange/Red */
.svg-icon.icon-alert,
.icon-alert .svg-icon {
    stroke: #f59e0b;
}

/* ==========================================================================
   LEGACY COLOR CLASSES (backward compatibility)
   ========================================================================== */

.svg-icon-brain {
    stroke: var(--accent-blue, #007acc);
    fill: none;
}

.svg-icon-robot {
    stroke: var(--accent-gold, #f7931e);
    fill: none;
}

.svg-icon-education {
    stroke: #4ade80;
    fill: none;
}

.svg-icon-video {
    stroke: #f59e0b;
    fill: none;
}

.svg-icon-lightning {
    stroke: var(--accent-gold, #f7931e);
    fill: none;
}

.svg-icon-pointer {
    stroke: rgba(0, 122, 204, 0.8);
    fill: none;
}

/* ==========================================================================
   HOVER EFFECTS
   ========================================================================== */

/* Scale on hover */
.benefit-item:hover .svg-icon,
.insight-item:hover .svg-icon,
.assistant-card:hover .svg-icon,
.lifestyle-card:hover .svg-icon,
.value-prop:hover .svg-icon {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Glow effects on hover */
.benefit-item:hover .icon-business,
.benefit-item:hover .svg-icon-brain {
    filter: drop-shadow(0 0 8px rgba(0, 122, 204, 0.5));
}

.benefit-item:hover .icon-ai,
.benefit-item:hover .svg-icon-robot {
    filter: drop-shadow(0 0 8px rgba(247, 147, 30, 0.5));
}

.benefit-item:hover .icon-education,
.benefit-item:hover .svg-icon-education {
    filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.5));
}

.benefit-item:hover .icon-energy,
.benefit-item:hover .svg-icon-lightning {
    filter: drop-shadow(0 0 8px rgba(247, 147, 30, 0.5));
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes subtleBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

@keyframes subtleFlash {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Energy icon pulsing */
.icon-energy,
.svg-icon-lightning {
    animation: subtleFlash 3s ease-in-out infinite;
}

/* ==========================================================================
   SPECIAL CONTAINERS
   ========================================================================== */

/* Assistant card icons (AI Circle) */
.assistant-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 122, 204, 0.1) 0%, rgba(247, 147, 30, 0.1) 100%);
    border-radius: 12px;
    font-size: 1.5rem;
}

.assistant-icon .svg-icon {
    width: 28px;
    height: 28px;
}

.assistant-card.active .assistant-icon {
    background: linear-gradient(135deg, rgba(0, 122, 204, 0.2) 0%, rgba(247, 147, 30, 0.2) 100%);
    box-shadow: 0 0 20px rgba(0, 122, 204, 0.3);
}

/* Lifestyle card icons */
.lifestyle-icon {
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lifestyle-icon .svg-icon {
    width: 40px;
    height: 40px;
    stroke: var(--accent-gold, #f7931e);
}

/* Prop/value icons (book section) */
.prop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
}

.prop-icon .svg-icon {
    width: 1.25em;
    height: 1.25em;
}

/* Media icons */
.media-icon {
    font-size: 1.3rem;
}

.media-icon .svg-icon {
    width: 1.3em;
    height: 1.3em;
    stroke: var(--accent-gold, #f7931e);
}

/* Button icons */
.btn-icon .svg-icon {
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
}

/* ==========================================================================
   GAMECHANGER SECTION ICONS
   ========================================================================== */

.gamechanger-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.gamechanger-icon .svg-icon {
    width: 2rem;
    height: 2rem;
    stroke: var(--accent-gold, #f7931e);
}

/* Different colors for variety */
.gamechanger-card:nth-child(1) .gamechanger-icon .svg-icon { stroke: var(--accent-gold, #f7931e); }
.gamechanger-card:nth-child(2) .gamechanger-icon .svg-icon { stroke: var(--accent-blue, #007acc); }
.gamechanger-card:nth-child(3) .gamechanger-icon .svg-icon { stroke: #4ade80; }
.gamechanger-card:nth-child(4) .gamechanger-icon .svg-icon { stroke: #f59e0b; }
.gamechanger-card:nth-child(5) .gamechanger-icon .svg-icon { stroke: #ec4899; }
.gamechanger-card:nth-child(6) .gamechanger-icon .svg-icon { stroke: #06b6d4; }