/* ==========================================================
   AlterMind - Community
   ========================================================== */


/* ==========================================================
   HERO
   ========================================================== */

.community-hero{

    position:relative;

    overflow:hidden;

    padding:190px 0 120px;

    background:
    radial-gradient(circle at top right,
    rgba(124,92,255,.18),
    transparent 45%),

    radial-gradient(circle at bottom left,
    rgba(0,212,255,.12),
    transparent 40%);

}

.community-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(255,255,255,.02),
            rgba(255,255,255,.01)
        );

    pointer-events:none;

}
.community-hero .section-title{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

}

.community-hero span{

    display:inline-flex;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.05);

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

    color:var(--accent);

    font-weight:700;

    margin-bottom:24px;

}

.community-hero h1{

    font-size:clamp(46px,6vw,68px);

    color:#fff;

    margin-bottom:24px;

}

.community-hero p{

    max-width:760px;

    margin:auto;

    color:rgba(255,255,255,.74);

    line-height:1.9;

}

.community-hero .am-buttons{

    justify-content:center;

    margin-top:45px;

    gap:20px;

}


/* ==========================================================
   GLOBAL
   ========================================================== */

.community-benefits,
.community-login,
.community-guidelines,
.community-cta{

    padding:110px 0;

}

.community-benefits .section-title,
.community-login .section-title,
.community-guidelines .section-title,
.community-cta .section-title{

    max-width:760px;

    margin:0 auto 70px;

}

.community-benefits h2,
.community-login h2,
.community-guidelines h2,
.community-cta h2{

    color:#fff;

    font-size:clamp(34px,4vw,50px);

}

.community-benefits p,
.community-login p,
.community-guidelines p,
.community-cta p{

    color:rgba(255,255,255,.72);

    line-height:1.9;

}
/* ==========================================================
   BENEFITS
   ========================================================== */

.community-benefits .grid-2{

    display:grid;

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

    gap:32px;

}

.community-benefits .card{

    padding:40px;

    border-radius:24px;

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(18px);

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

    transition:.35s ease;

}

.community-benefits .card:hover{

    transform:translateY(-8px);

    border-color:rgba(124,92,255,.30);

}

.community-benefits h3{

    color:#fff;

    margin-bottom:18px;

}
/* ==========================================================
   LOGIN CARD
   ========================================================== */

.community-login-wrapper{

    max-width:1100px;

    margin:auto;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:60px;

    padding:60px;

    border-radius:28px;

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(20px);

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

}

.community-login-content span{

    color:var(--accent);

    font-weight:700;

}

.community-login-content h2{

    margin:20px 0;

}

.community-features{

    margin-top:35px;

    list-style:none;

    padding:0;

}

.community-features li{

    padding:14px 0;

    color:rgba(255,255,255,.82);

}

.community-login-actions{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:18px;

}

.community-login-actions .btn{

    width:100%;

}
/* ==========================================================
   GUIDELINES
   ========================================================== */

.community-guidelines .grid-2{

    display:grid;

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

    gap:32px;

}

.community-guidelines .card{

    padding:38px;

    border-radius:22px;

    background:rgba(255,255,255,.03);

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

    transition:.35s ease;

}

.community-guidelines .card:hover{

    transform:translateY(-8px);

    border-color:rgba(124,92,255,.30);

}

.community-guidelines h3{

    color:#fff;

    margin-bottom:18px;

}
/* ==========================================================
   CTA
   ========================================================== */

.community-cta .section-title{

    max-width:920px;

    margin:auto;

    padding:70px 60px;

    border-radius:28px;

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(20px);

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

}

.community-cta .am-buttons{

    justify-content:center;

    margin-top:40px;

}

.community-cta .btn{

    min-width:220px;

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:992px){

    .community-benefits .grid-2,
    .community-guidelines .grid-2{

        grid-template-columns:1fr;

    }

    .community-login-wrapper{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .community-hero{

        padding:130px 0 80px;

    }

    .community-benefits,
    .community-login,
    .community-guidelines,
    .community-cta{

        padding:75px 0;

    }

    .community-login-wrapper{

        padding:35px;

    }

    .community-cta .section-title{

        padding:40px 30px;

    }

    .community-hero .am-buttons{

        flex-direction:column;

    }

    .community-login-actions .btn,
    .community-hero .btn{

        width:100%;

    }

}