/* ========================================= */
/* HERO TRANSFORMATION MINI                  */
/* ULTRA COMPACT - STEVE JOBS APPROVED       */
/* Target Height: 400-500px MAX              */
/* Created: 2025-10-07                       */
/* ========================================= */

/* CORE PHILOSOPHY:
   - BRUTAL brevity
   - Typography HIERARCHY
   - Contrast > decoration
   - 500px MAX height
   - Zero fluff
*/

/* ========================================= */
/* FOUNDATION - ULTRA TIGHT                  */
/* ========================================= */

.hero-transformation-mini {
    margin: 3rem auto;
    max-width: 1200px;
    padding: 0 2rem;
}

.transform-mini-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
}

/* ========================================= */
/* MINI CARDS - COMPACT FOUNDATION           */
/* ========================================= */

.mini-card {
    padding: 2rem;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mini-card:hover {
    transform: translateY(-4px);
}

/* CAGE CARD - PROBLEM */
.cage-mini {
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
    border: 2px solid rgba(255, 51, 51, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.cage-mini:hover {
    box-shadow: 0 15px 40px rgba(255, 51, 51, 0.3);
}

/* FREEDOM CARD - SOLUTION */
.freedom-mini {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 2px solid rgba(100, 255, 218, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.freedom-mini:hover {
    box-shadow: 0 15px 40px rgba(100, 255, 218, 0.3);
}

/* ========================================= */
/* MINI TITLE - BRUTAL TYPOGRAPHY            */
/* ========================================= */

.mini-title {
    font-family: 'Inter', 'Montserrat', system-ui, -apple-system, sans-serif;
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1;
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.cage-mini .mini-title {
    color: #ff3333;
    text-shadow: 0 2px 15px rgba(255, 51, 51, 0.3);
}

.freedom-mini .mini-title {
    color: #0a192f;
}

/* ========================================= */
/* MINI ITEMS - ULTRA COMPACT LIST           */
/* ========================================= */

.mini-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mini-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.cage-mini .mini-item {
    background: rgba(255, 51, 51, 0.05);
}

.cage-mini .mini-item:hover {
    background: rgba(255, 51, 51, 0.1);
    transform: translateX(4px);
}

.freedom-mini .mini-item {
    background: rgba(100, 255, 218, 0.05);
}

.freedom-mini .mini-item:hover {
    background: rgba(100, 255, 218, 0.1);
    transform: translateX(4px);
}

/* ========================================= */
/* MINI ICONS - BIG & BOLD                   */
/* ========================================= */

.mini-icon {
    font-size: 1.75rem;
    font-weight: 900;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.problem-icon {
    color: #ff3333;
    background: rgba(255, 51, 51, 0.1);
}

.solution-icon {
    color: #64ffda;
    background: rgba(100, 255, 218, 0.1);
}

/* ========================================= */
/* MINI ITEM TEXT - CLEAN & DIRECT           */
/* ========================================= */

.mini-item h3 {
    font-family: 'Inter', 'Montserrat', system-ui, -apple-system, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.cage-mini .mini-item h3 {
    color: rgba(255, 255, 255, 0.95);
}

.freedom-mini .mini-item h3 {
    color: #0a192f;
}

/* ========================================= */
/* DIVIDER - TRANSFORMATION ARROW            */
/* ========================================= */

.mini-divider {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-arrow {
    font-size: 2.5rem;
    font-weight: 900;
    color: #64ffda;
    background: linear-gradient(135deg, #0a192f 0%, #1a365d 100%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(100, 255, 218, 0.3);
    border: 2px solid rgba(100, 255, 218, 0.5);
    animation: pulseArrow 3s ease-in-out infinite;
}

@keyframes pulseArrow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 30px rgba(100, 255, 218, 0.3);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 12px 40px rgba(100, 255, 218, 0.5);
    }
}

/* ========================================= */
/* RESPONSIVE - MOBILE COMPACT               */
/* ========================================= */

@media (max-width: 1024px) {
    .hero-transformation-mini {
        margin: 2rem auto;
    }

    .transform-mini-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .mini-divider {
        display: none;
    }

    .mini-title {
        font-size: 1.75rem;
        letter-spacing: 2px;
    }
}

@media (max-width: 768px) {
    .hero-transformation-mini {
        padding: 0 1.5rem;
        margin: 1.5rem auto;
    }

    .mini-card {
        padding: 1.5rem;
    }

    .mini-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .mini-items {
        gap: 0.75rem;
    }

    .mini-item {
        padding: 0.6rem;
        gap: 0.75rem;
    }

    .mini-icon {
        font-size: 1.5rem;
        width: 32px;
        height: 32px;
    }

    .mini-item h3 {
        font-size: 1rem;
    }
}

/* ========================================= */
/* ACCESSIBILITY & PERFORMANCE               */
/* ========================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus states */
.mini-item:focus-within {
    outline: 3px solid #64ffda;
    outline-offset: 2px;
}

/* Selection */
::selection {
    background: #64ffda;
    color: #0a192f;
}

::-moz-selection {
    background: #64ffda;
    color: #0a192f;
}

/* Print */
@media print {
    .hero-transformation-mini {
        page-break-inside: avoid;
    }

    .transform-mini-grid {
        grid-template-columns: 1fr 1fr;
    }

    .mini-divider {
        display: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .freedom-mini {
        background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
        border-color: rgba(100, 255, 218, 0.4);
    }

    .freedom-mini .mini-title,
    .freedom-mini .mini-item h3 {
        color: rgba(255, 255, 255, 0.95);
    }
}

/* ========================================= */
/* FINAL HEIGHT CHECK                        */
/* Desktop: ~350-400px                       */
/* Mobile: ~250-300px stacked                */
/* PERFECT FOR HERO SECTION                  */
/* ========================================= */