/* 
    EASYBOOST SERVICE EXTRAS v2.0
    Focus: Mobile Friendly, Compact, No Hover Reliance
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Syne:wght@700;800&display=swap');

/* --- 1. COMPACT PROCESS (NEURAL CIRCUIT) --- */
.eb-proc-wrapper {
    background-color: #020205;
    padding: 80px 0;
    position: relative;
    font-family: 'Outfit', sans-serif;
}

.eb-proc-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.eb-proc-header { text-align: center; margin-bottom: 50px; }
.eb-proc-header h2 { font-family: 'Syne'; font-size: clamp(1.8rem, 4vw, 3rem); color: #fff; }
.eb-proc-header span { color: #00C2FF; }

.eb-proc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
}

/* Connecting Line (Desktop Only) */
.eb-proc-line {
    position: absolute; top: 45px; left: 10%; right: 10%;
    height: 1px; background: rgba(255,255,255,0.1); z-index: 0;
}

.eb-proc-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 25px 20px;
    border-radius: 20px;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: 0.3s;
}

/* Hover is just an extra effect now, not mandatory */
.eb-proc-card:hover { border-color: #00C2FF; transform: translateY(-5px); background: #000; }

.eb-proc-num {
    width: 45px; height: 45px; /* Compact Size */
    margin: 0 auto 20px auto;
    background: #020205; border: 1px solid #00C2FF;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-family: 'Syne'; font-weight: 800; font-size: 16px; color: #00C2FF;
    box-shadow: 0 0 15px rgba(0, 194, 255, 0.2);
}

.eb-proc-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.eb-proc-desc { font-size: 13px; color: #94a3b8; line-height: 1.5; }

/* --- 2. COMPACT FAQ VAULT --- */
.eb-faq-wrapper {
    background-color: #050508;
    padding: 80px 0;
    font-family: 'Outfit', sans-serif;
}

.eb-faq-container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

.eb-faq-header { text-align: center; margin-bottom: 50px; }
.eb-faq-header h2 { font-family: 'Syne'; font-size: clamp(1.8rem, 4vw, 3rem); color: #fff; }

.eb-faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-bottom: 15px;
    transition: 0.3s;
}

.eb-faq-item.active { border-color: #FF9933; background: rgba(255, 153, 51, 0.05); }

.eb-faq-question {
    padding: 20px 25px;
    cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
}

.eb-faq-question h4 { font-size: 16px; font-weight: 600; color: #fff; margin: 0; }
.eb-faq-icon { font-size: 18px; color: #FF9933; transition: 0.3s; }
.eb-faq-item.active .eb-faq-icon { transform: rotate(45deg); color: #FF2E63; }

.eb-faq-answer {
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 25px;
}

.eb-faq-answer p { padding-bottom: 20px; font-size: 14px; color: #94a3b8; line-height: 1.6; margin: 0; }

/* --- MOBILE RESPONSIVE (CRITICAL FIXES) --- */
@media (max-width: 992px) {
    .eb-proc-grid { grid-template-columns: 1fr; gap: 30px; }
    .eb-proc-line { display: none; }
    
    /* Mobile Vertical Timeline Effect */
    .eb-proc-grid::before {
        content: ''; position: absolute; top: 0; bottom: 0; left: 42px;
        width: 1px; background: rgba(0, 194, 255, 0.2); z-index: 0;
    }
    
    .eb-proc-card { 
        display: flex; text-align: left; align-items: flex-start; gap: 20px; 
        padding: 20px; background: transparent; border: none;
    }
    .eb-proc-num { flex-shrink: 0; margin: 0; z-index: 2; }
    .eb-proc-card:hover { transform: none; background: rgba(255,255,255,0.03); }
}

@media (max-width: 480px) {
    .eb-proc-card { padding: 15px 10px; }
    .eb-faq-question { padding: 15px; }
    .eb-faq-question h4 { font-size: 14px; }
}