/* ==================================================
   HELP CENTER
================================================== */

.help-hero{

    max-width:1400px;

    margin:120px auto 40px;

    padding:0 20px;
}

.help-hero-inner{

    text-align:center;

    padding:80px 40px;

    border-radius:36px;

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.92),
        rgba(246,243,255,.96)
    );

    border:1px solid rgba(255,255,255,.9);

    box-shadow:
    0 25px 80px rgba(91,61,245,.08);
}

.help-hero-inner::before{

    content:'';

    position:absolute;

    top:-150px;
    right:-150px;

    width:320px;
    height:320px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(91,61,245,.12),
        transparent 70%
    );

    pointer-events:none;
}

.help-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    background:#f4f1ff;

    color:#5b3df5;

    font-size:13px;

    font-weight:700;

    margin-bottom:22px;
}

.help-hero h1{

    font-size:68px;

    line-height:1.05;

    font-weight:800;

    color:#111827;

    margin-bottom:15px;
}

.help-hero p{

    max-width:700px;

    margin:auto;

    color:#667085;

    font-size:18px;

    line-height:1.8;
}

/* ==================================================
   SEARCH
================================================== */

.help-search{

    max-width:650px;

    margin:35px auto 0;

    position:relative;
}

.help-search i{

    position:absolute;

    left:22px;
    top:50%;

    transform:translateY(-50%);

    color:#9ca3af;
}

.help-search input{

    width:100%;

    height:68px;

    border:none;

    outline:none;

    padding:0 25px 0 55px;

    border-radius:20px;

    background:#fff;

    border:1px solid #eef0ff;

    box-shadow:
    0 10px 30px rgba(91,61,245,.05);

    font-size:15px;
}

/* ==================================================
   QUICK CARDS
================================================== */

.help-categories{

    max-width:1400px;

    margin:30px auto 70px;

    padding:0 20px;

    display:grid;

    grid-template-columns:
    repeat(6,1fr);

    gap:18px;
}

.help-card{

    background:#fff;

    border-radius:24px;

    padding:28px 20px;

    text-align:center;

    border:1px solid #eef0ff;

    box-shadow:
    0 12px 35px rgba(91,61,245,.05);

    transition:.3s;
}

.help-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 18px 45px rgba(91,61,245,.10);
}

.help-card i{

    font-size:28px;

    color:#5b3df5;

    margin-bottom:15px;

    display:block;
}

.help-card span{

    font-size:14px;

    font-weight:700;

    color:#111827;
}

/* ==================================================
   FAQ
================================================== */

.help-accordion{

    max-width:1100px;

    margin:auto;

    padding:0 20px 80px;
}

.faq-item{

    background:#fff;

    border-radius:24px;

    margin-bottom:18px;

    border:1px solid #eef0ff;

    overflow:hidden;

    box-shadow:
    0 10px 30px rgba(91,61,245,.04);
}

.faq-header{

    width:100%;

    border:none;

    background:none;

    cursor:pointer;

    padding:26px 28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    text-align:left;
}

.faq-header span{

    display:flex;

    align-items:center;

    gap:14px;

    font-size:18px;

    font-weight:700;

    color:#111827;
}

.faq-header span i{

    color:#5b3df5;
}

.faq-header > i{

    color:#6b7280;

    transition:.3s;
}

.faq-content{

    max-height:0;

    overflow:hidden;

    transition:
    max-height .4s ease,
    padding .4s ease;

    padding:0 28px;
}

.faq-item.active .faq-content{

    max-height:2000px;

    padding:0 28px 28px;
}

.faq-item.active .faq-header > i{

    transform:rotate(45deg);
}

.faq-content p{

    color:#4b5563;

    line-height:1.9;

    margin-bottom:16px;
}

.faq-content h4{

    margin-bottom:15px;

    color:#111827;
}

.faq-content ol,
.faq-content ul{

    padding-left:22px;

    margin-bottom:18px;
}

.faq-content li{

    margin-bottom:10px;

    color:#374151;

    line-height:1.8;
}

/* ==================================================
   BUTTON
================================================== */

.help-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    position:relative;

    overflow:hidden;

    padding:14px 24px;

    border-radius:14px;

    text-decoration:none;

    color:#fff;

    font-weight:700;

    background:
    linear-gradient(
        135deg,
        #5b3df5,
        #9333ea
    );

    box-shadow:
    0 10px 25px rgba(91,61,245,.25);
}

.help-btn::before{

    content:'';

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform:skewX(-25deg);

    animation:helpShine 4s infinite;
}

@keyframes helpShine{

    0%{
        left:-120%;
    }

    30%{
        left:140%;
    }

    100%{
        left:140%;
    }
}

/* ==================================================
   SUPPORT
================================================== */

.support-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:15px;
}

.support-box{

    text-decoration:none;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.95),
        rgba(248,245,255,.95)
    );

    border:1px solid #eef0ff;

    border-radius:20px;

    padding:22px;

    text-align:center;

    transition:.3s;
}

.support-box:hover{

    transform:translateY(-5px);
}

.support-box i{

    font-size:28px;

    color:#5b3df5;

    margin-bottom:12px;

    display:block;
}

.support-box strong{

    display:block;

    color:#111827;

    margin-bottom:6px;
}

.support-box span{

    color:#667085;

    font-size:13px;
}

/* ==================================================
   YOUTUBE
================================================== */

.youtube-help{

    max-width:1400px;

    margin:0 auto 100px;

    padding:0 20px;
}

.youtube-card{

    text-align:center;

    padding:60px 40px;

    border-radius:32px;

    background:
    linear-gradient(
        135deg,
        #fff,
        #faf7ff
    );

    border:1px solid #eef0ff;

    box-shadow:
    0 20px 60px rgba(91,61,245,.06);
}

.youtube-icon{

    width:90px;
    height:90px;

    margin:auto auto 25px;

    border-radius:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ff0000;

    color:#fff;

    font-size:42px;

    box-shadow:
    0 15px 40px rgba(255,0,0,.25);
}

.youtube-card h2{

    font-size:42px;

    font-weight:800;

    color:#111827;

    margin-bottom:15px;
}

.youtube-card p{

    max-width:700px;

    margin:auto auto 25px;

    color:#667085;

    line-height:1.9;
}

.youtube-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 28px;

    border-radius:16px;

    text-decoration:none;

    background:#ff0000;

    color:#fff;

    font-weight:700;

    box-shadow:
    0 12px 30px rgba(255,0,0,.25);
}

/* ==================================================
   TABLET
================================================== */

@media(max-width:1200px){

    .help-categories{

        grid-template-columns:
        repeat(3,1fr);
    }

    .support-grid{

        grid-template-columns:
        repeat(2,1fr);
    }
}

/* ==================================================
   MOBILE
================================================== */

@media(max-width:768px){

    .help-hero{

        margin-top:95px;
    }

    .help-hero-inner{

        padding:50px 25px;
    }

    .help-hero h1{

        font-size:38px;
    }

    .help-hero p{

        font-size:15px;
    }

    .help-search input{

        height:58px;
    }

    .help-categories{

        grid-template-columns:
        repeat(2,1fr);

        gap:12px;
    }

    .help-card{

        padding:20px 15px;
    }

    .faq-header{

        padding:20px;
    }

    .faq-header span{

        font-size:15px;
    }

    .faq-item.active .faq-content{

        padding:0 20px 20px;
    }

    .support-grid{

        grid-template-columns:1fr;
    }

    .youtube-card{

        padding:40px 25px;
    }

    .youtube-card h2{

        font-size:28px;
    }

    .youtube-icon{

        width:72px;
        height:72px;

        font-size:32px;
    }
}

/* ==================================================
   SMALL MOBILE
================================================== */

@media(max-width:480px){

    .help-categories{

        grid-template-columns:1fr;
    }

    .help-hero h1{

        font-size:32px;
    }

    .help-badge{

        font-size:12px;
    }
}