﻿.page-skn {
    background: linear-gradient(180deg,rgba(108,92,231,.08) 0%,transparent 100%);
}

.help-hero {
    text-align: center;
    padding: var(--spacing-1) var(--spacing-6) var(--spacing-10);
}

    .help-hero h1 {
        font-size: clamp(2rem,5vw,2.5rem);
        font-weight: 800;
        color: var(--gray-900);
        margin-bottom: var(--spacing-2);
    }

    .help-hero p {
        color: var(--gray-400);
        font-size: 1.1rem;
    }

.help-category {
}

.cat-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--spacing-5);
}

.cat-icon {
    font-size: 1.5rem;
}

.qa-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.qa-item {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition);
}

    .qa-item:hover {
        border-color: var(--gray-300);
    }

    .qa-item[open] {
        border-color: var(--primary-900);
    }

    .qa-item summary {
        list-style: none;
        padding: var(--spacing-4) var(--spacing-5);
        font-size: .95rem;
        font-weight: 600;
        color: var(--gray-800);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .qa-item summary::-webkit-details-marker {
            display: none;
        }

        .qa-item summary::after {
            content: '▼';
            font-size: .7rem;
            color: var(--gray-400);
            transition: transform .2s;
            flex-shrink: 0;
            margin-left: var(--spacing-3);
        }

    .qa-item[open] summary::after {
        transform: rotate(180deg);
    }

    .qa-item p {
        padding: 0 var(--spacing-5) var(--spacing-4);
        font-size: .9rem;
        color: var(--gray-600);
        line-height: 1.7;
        margin: 0;
    }

.contact-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-8);
    text-align: center;
}

    .contact-card h3 {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: var(--spacing-3);
    }

    .contact-card p {
        color: var(--gray-500);
        margin-bottom: var(--spacing-5);
    }

.contact-links {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    flex-wrap: wrap;
}

.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--radius-lg);
    background: var(--primary-900);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition);
}

    .contact-btn:hover {
        background: var(--primary-800);
        transform: translateY(-1px);
        color: #fff;
    }
