/* Brand Selector Specific Styles - Enhanced Professional Design */
.brand-selector-section {
    padding: 160px 0 100px;
    background: var(--light-grey);
    min-height: 100vh;
    position: relative;
}

.brand-selector-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-grey), transparent);
}

.brand-selector-section .section-header h1 {
    font-size: 3rem;
    color: var(--isg-blue);
    margin-bottom: var(--space-lg);
    font-weight: 800;
    letter-spacing: -0.5px;
}

.brand-selector-section .section-header p {
    font-size: 1.3rem;
    color: var(--isg-grey);
    margin-bottom: var(--space-2xl);
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Enhanced Progress Bar */
.progress-container {
    margin-bottom: var(--space-2xl);
    text-align: center;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--border-grey);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: var(--space-md);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--isg-blue), var(--isg-red));
    width: 25%;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.progress-text {
    color: var(--isg-grey);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Enhanced Question Container */
.question-container {
    background: var(--white);
    padding: var(--space-3xl);
    border-radius: 24px;
    box-shadow: var(--shadow-xl);
    margin-bottom: var(--space-2xl);
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.question-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--isg-blue), var(--isg-red));
}

.question-title {
    font-size: 2rem;
    color: var(--isg-blue);
    margin-bottom: var(--space-lg);
    text-align: center;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.question-description {
    font-size: 1.2rem;
    color: var(--isg-grey);
    margin-bottom: var(--space-2xl);
    text-align: center;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.option-card {
    background: var(--light-grey);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: var(--space-xl);
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.option-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--isg-blue), var(--isg-red));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.option-card:hover::before {
    transform: scaleX(1);
}

.option-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    background: var(--white);
    border-color: var(--isg-blue);
}

.option-card.selected {
    border-color: var(--isg-blue);
    background: rgba(0, 102, 153, 0.05);
    box-shadow: var(--shadow-lg);
}

.option-card.selected::after {
    content: '';
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 32px;
    height: 32px;
    background: var(--isg-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    box-shadow: var(--shadow);
}

.option-card.selected::after {
    content: '✓';
    color: var(--white);
    font-weight: 800;
}

.option-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-lg);
    background: var(--white);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

.option-card:hover .option-icon {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

.option-icon::before {
    content: '';
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Industry Icons */
.option-card[data-value="aerospace"] .option-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

.option-card[data-value="automotive"] .option-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='15' rx='2' ry='2'/%3E%3Cpath d='M17 11h.01'/%3E%3Cpath d='M7 11h.01'/%3E%3Cpath d='M7 15h10'/%3E%3C/svg%3E");
}

.option-card[data-value="medical"] .option-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
}

.option-card[data-value="industrial"] .option-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

.option-card[data-value="telecom"] .option-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E");
}

.option-card[data-value="other"] .option-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

/* Environment Icons */
.option-card[data-value="harsh"] .option-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14,2 14,8 20,8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10,9 9,9 8,9'/%3E%3C/svg%3E");
}

.option-card[data-value="high-performance"] .option-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
}

.option-card[data-value="emi-protection"] .option-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

.option-card[data-value="standard"] .option-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3Cpath d='M21 12c-1 9-4 14-9 14s-8-5-9-14'/%3E%3C/svg%3E");
}

/* Requirement Icons */
.option-card[data-value="speed"] .option-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
}

.option-card[data-value="reliability"] .option-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

.option-card[data-value="custom"] .option-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

.option-card[data-value="cost"] .option-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
}

/* Location Icons */
.option-card[data-value="uk-europe"] .option-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

.option-card[data-value="north-america"] .option-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M3 18h18'/%3E%3C/svg%3E");
}

.option-card[data-value="asia-pacific"] .option-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.option-card[data-value="global"] .option-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

.option-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--isg-blue);
    margin-bottom: var(--space-sm);
    letter-spacing: -0.2px;
}

.option-description {
    color: var(--isg-grey);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Enhanced Navigation Buttons */
.navigation-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
}

.navigation-buttons button {
    padding: var(--space-md) var(--space-xl);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.navigation-buttons button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.navigation-buttons button:hover::before {
    left: 100%;
}

/* Enhanced Results Section */
.results-section {
    padding: var(--space-3xl) 0;
    background: var(--white);
    position: relative;
}

.results-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-grey), transparent);
}

.result-card {
    background: var(--light-grey);
    padding: var(--space-3xl);
    border-radius: 24px;
    text-align: center;
    margin-bottom: var(--space-2xl);
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
}

.result-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--isg-blue), var(--isg-red));
}

.brand-result {
    margin-bottom: var(--space-xl);
}

.brand-name {
    font-size: 3rem;
    color: var(--isg-blue);
    margin-bottom: var(--space-md);
    font-weight: 800;
    letter-spacing: -0.5px;
}

.brand-location {
    background: var(--isg-red);
    color: var(--white);
    padding: var(--space-xs) var(--space-lg);
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: var(--space-lg);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.brand-description {
    font-size: 1.3rem;
    color: var(--isg-grey);
    margin-bottom: var(--space-xl);
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.brand-specialties {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.specialty-tag {
    background: var(--isg-blue);
    color: var(--white);
    padding: var(--space-sm) var(--space-lg);
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow);
}

.why-this-brand {
    background: var(--white);
    padding: var(--space-xl);
    border-radius: 16px;
    margin-top: var(--space-xl);
    box-shadow: var(--shadow);
}

.why-this-brand h4 {
    color: var(--isg-blue);
    margin-bottom: var(--space-md);
    font-size: 1.4rem;
    font-weight: 700;
}

.why-this-brand p {
    color: var(--isg-grey);
    line-height: 1.6;
    font-size: 1.1rem;
}

.result-actions {
    display: flex;
    gap: var(--space-lg);
    justify-content: center;
    flex-wrap: wrap;
}

.result-actions .btn-primary,
.result-actions .btn-secondary {
    padding: var(--space-md) var(--space-xl);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 180px;
}

.result-actions .btn-secondary {
    background: var(--isg-grey);
    color: var(--white);
}

.result-actions .btn-secondary:hover {
    background: #666;
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

/* Enhanced Responsive Design */
@media (max-width: 768px) {
    .brand-selector-section {
        padding: 140px 0 80px;
    }
    
    .question-container {
        padding: var(--space-xl) var(--space-lg);
    }
    
    .question-title {
        font-size: 1.8rem;
    }
    
    .options-grid {
        grid-template-columns: 1fr;
    }
    
    .navigation-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .navigation-buttons button {
        width: 100%;
    }
    
    .result-card {
        padding: var(--space-xl) var(--space-lg);
    }
    
    .brand-name {
        font-size: 2.5rem;
    }
    
    .result-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .result-actions .btn-primary,
    .result-actions .btn-secondary {
        width: 100%;
        text-align: center;
    }
    
    .brand-selector-section .section-header h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-md);
    }
    
    .question-container {
        padding: var(--space-lg) var(--space-md);
    }
    
    .option-card {
        padding: var(--space-lg) var(--space-md);
    }
    
    .result-card {
        padding: var(--space-lg) var(--space-md);
    }
    
    .brand-selector-section .section-header h1 {
        font-size: 2rem;
    }
    
    .question-title {
        font-size: 1.6rem;
    }
}