/**
 * ABOUT US PAGE - PROFESSIONAL DESIGN
 * Created: August 18, 2025
 * Purpose: Качественный дизайн для контента страницы "О нас"
 */

/* ===== ABOUT CONTENT - PROFESSIONAL GRID LAYOUT ===== */
.about-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-8); /* 2rem */
    max-width: var(--container-xl); /* 1280px */
    margin: var(--space-12) auto; /* 3rem auto */
    padding: 0 var(--space-6); /* 0 1.5rem */
}

/* ===== ABOUT SECTION - GLASSMORPHISM CARDS ===== */
.about-section {
    background: var(--bg-glass);
    backdrop-filter: var(--glass-backdrop);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-2xl); /* 1.5rem */
    padding: var(--space-8); /* 2rem */
    box-shadow: var(--shadow-xl);
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.about-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.about-section:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2xl);
    border-color: var(--torg-orange);
}

.about-section:hover::before {
    background: var(--gradient-secondary);
    box-shadow: var(--shadow-orange-glow);
}

/* ===== TYPOGRAPHY - PROFESSIONAL HIERARCHY ===== */
.about-section h2 {
    font-family: var(--font-display);
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    color: var(--torg-orange);
    margin: 0 0 var(--space-4) 0; /* 0 0 1rem 0 */
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(255, 140, 0, 0.3);
}

.about-section p {
    font-family: var(--font-primary);
    font-size: 1rem; /* 16px */
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* ===== ADVANTAGES LIST - PROFESSIONAL DESIGN ===== */
.about-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4); /* 1rem */
}

.about-section li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3); /* 0.75rem */
    padding: var(--space-3); /* 0.75rem */
    background: rgba(255, 140, 0, 0.05);
    border-radius: var(--radius-lg); /* 0.75rem */
    border-left: 3px solid var(--torg-orange);
    transition: var(--transition-normal);
}

.about-section li:hover {
    background: rgba(255, 140, 0, 0.1);
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

/* Professional Icons instead of emojis */
.about-section li::before {
    content: '';
    width: 24px;
    height: 24px;
    background: var(--gradient-primary);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    box-shadow: var(--shadow-sm);
    position: relative;
}

/* Target icon for targeting */
.about-section li:nth-child(1)::before {
    background: var(--gradient-primary);
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3e%3cpath d='M8 13A5 5 0 1 1 8 3a5 5 0 0 1 0 10zm0 1A6 6 0 1 0 8 2a6 6 0 0 0 0 12z'/%3e%3cpath d='M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/%3e%3cpath d='M9.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3e%3c/svg%3e") center/contain;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3e%3cpath d='M8 13A5 5 0 1 1 8 3a5 5 0 0 1 0 10zm0 1A6 6 0 1 0 8 2a6 6 0 0 0 0 12z'/%3e%3cpath d='M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/%3e%3cpath d='M9.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3e%3c/svg%3e") center/contain;
}

/* Graph icon for analytics */
.about-section li:nth-child(2)::before {
    background: var(--gradient-primary);
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z'/%3e%3c/svg%3e") center/contain;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z'/%3e%3c/svg%3e") center/contain;
}

/* Money icon for profits */
.about-section li:nth-child(3)::before {
    background: var(--gradient-primary);
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M4 10.781c.148 1.667 1.513 2.85 3.591 3.003V15h1.043v-1.216c2.27-.179 3.678-1.438 3.678-3.3 0-1.59-.947-2.51-2.956-3.028l-.722-.187V3.467c1.122.11 1.879.714 2.07 1.616h1.47c-.166-1.6-1.54-2.748-3.54-2.875V1H7.591v1.233c-1.939.23-3.27 1.472-3.27 3.156 0 1.454.966 2.483 2.661 2.917l.61.162v4.031c-1.149-.17-1.94-.8-2.131-1.718H4zm3.391-3.836c-1.043-.263-1.6-.825-1.6-1.616 0-.944.704-1.641 1.8-1.828v3.495l-.2-.05zm1.591 1.872c1.287.323 1.852.859 1.852 1.769 0 1.097-.826 1.828-2.2 1.939V8.73l.348.086z'/%3e%3c/svg%3e") center/contain;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M4 10.781c.148 1.667 1.513 2.85 3.591 3.003V15h1.043v-1.216c2.27-.179 3.678-1.438 3.678-3.3 0-1.59-.947-2.51-2.956-3.028l-.722-.187V3.467c1.122.11 1.879.714 2.07 1.616h1.47c-.166-1.6-1.54-2.748-3.54-2.875V1H7.591v1.233c-1.939.23-3.27 1.472-3.27 3.156 0 1.454.966 2.483 2.661 2.917l.61.162v4.031c-1.149-.17-1.94-.8-2.131-1.718H4zm3.391-3.836c-1.043-.263-1.6-.825-1.6-1.616 0-.944.704-1.641 1.8-1.828v3.495l-.2-.05zm1.591 1.872c1.287.323 1.852.859 1.852 1.769 0 1.097-.826 1.828-2.2 1.939V8.73l.348.086z'/%3e%3c/svg%3e") center/contain;
}

/* Lightning icon for speed */
.about-section li:nth-child(4)::before {
    background: var(--gradient-primary);
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641l2.5-8.5z'/%3e%3c/svg%3e") center/contain;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641l2.5-8.5z'/%3e%3c/svg%3e") center/contain;
}

.about-section li span {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.5;
}

/* ===== ENHANCED CARD EFFECTS ===== */
.about-section:nth-child(1) {
    border-left: 4px solid var(--torg-orange);
}

.about-section:nth-child(2) {
    border-left: 4px solid var(--torg-orange-light);
}

.about-section:nth-child(3) {
    border-left: 4px solid var(--torg-orange-dark);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
    .about-content {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--space-6);
        margin: var(--space-10) auto;
    }
    
    .about-section {
        padding: var(--space-6);
    }
    
    .about-section h2 {
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    .about-content {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        margin: var(--space-8) auto;
        padding: 0 var(--space-4);
    }
    
    .about-section {
        padding: var(--space-5);
    }
    
    .about-section h2 {
        font-size: 1.125rem;
    }
    
    .about-section p {
        font-size: 0.9rem;
    }
    
    .about-section li {
        padding: var(--space-2);
        gap: var(--space-2);
    }
    
    .about-section li::before {
        width: 20px;
        height: 20px;
    }
    
    .about-section li span {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .about-content {
        margin: var(--space-6) auto;
        padding: 0 var(--space-3);
    }
    
    .about-section {
        padding: var(--space-4);
    }
    
    .about-section h2 {
        font-size: 1rem;
    }
    
    .about-section p {
        font-size: 0.85rem;
    }
}

/* ===== SPECIAL EFFECTS - SUBTLE ANIMATIONS ===== */
.about-section li::before {
    animation: iconPulse 3s ease-in-out infinite;
}

.about-section:nth-child(1) li::before {
    animation-delay: 0s;
}

.about-section:nth-child(2) li::before {
    animation-delay: 0.5s;
}

.about-section:nth-child(3) li::before {
    animation-delay: 1s;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: var(--shadow-sm);
    }
    50% {
        transform: scale(1.05);
        box-shadow: var(--shadow-md);
    }
}

/* ===== PROFESSIONAL LOADING STATES ===== */
.about-section.loading {
    background: linear-gradient(90deg, 
        var(--bg-glass) 25%, 
        rgba(255, 140, 0, 0.1) 50%, 
        var(--bg-glass) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 2s ease-in-out infinite;
}

@keyframes skeletonShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
.about-section:focus-within {
    outline: 3px solid var(--torg-orange);
    outline-offset: 2px;
}

.about-section li:focus-within {
    outline: 2px solid rgba(255, 140, 0, 0.5);
    outline-offset: 1px;
}

/* ===== PRINT STYLES ===== */
@media print {
    .about-content {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .about-section {
        background: white;
        color: black;
        border: 1px solid #ccc;
        box-shadow: none;
        break-inside: avoid;
    }
    
    .about-section h2 {
        color: #333;
    }
    
    .about-section p,
    .about-section li span {
        color: #555;
    }
}