@charset "UTF-8";

/* ==========================================================
   Influence+
   home.css
   Hero
========================================================== */

/* ==========================================
   Hero
========================================== */

.hero{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:
    linear-gradient(
        135deg,
        #f8fbff 0%,
        #eef6ff 45%,
        #ffffff 100%
    );
}

.hero::before{
    content:"";
    position:absolute;
    top:-180px;
    right:-180px;
    width:520px;
    height:520px;
    border-radius:50%;
    background:
    radial-gradient(
        rgba(37,99,235,.10),
        transparent 70%
    );
}

.hero::after{
    content:"";
    position:absolute;
    left:-180px;
    bottom:-180px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:
    radial-gradient(
        rgba(56,189,248,.10),
        transparent 70%
    );
}

.hero .container{
    position:relative;
    z-index:2;
}

/* ==========================================
   Layout
========================================== */

.hero__content{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:80px;
}

/* ==========================================
   Left
========================================== */

.hero__badge{
    display:inline-flex;
    align-items:center;
    padding:10px 20px;
    border-radius:999px;
    background:#dbeafe;
    color:var(--primary);
    font-size:.9rem;
    font-weight:700;
    margin-bottom:28px;
}

.hero__title{
    margin-bottom:30px;
    font-size:clamp(2.8rem,5vw,4.5rem);
    line-height:1.2;
    font-weight:700;
    color:var(--text);
}

.hero__text{
    max-width:580px;
    margin-bottom:40px;
    font-size:1.1rem;
    line-height:2;
    color:var(--text-light);
}

/* ==========================================
   Buttons
========================================== */

.hero__buttons{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-bottom:45px;
}

/* ==========================================
   Search
========================================== */

.hero__search{
    max-width:640px;
}

.hero__search form{
    display:flex;
    align-items:center;
    background:#fff;
    border-radius:999px;
    padding:10px;
    box-shadow:0 20px 45px rgba(15,23,42,.08);
}

.hero__search input{
    flex:1;
    height:56px;
    padding:0 24px;
    font-size:1rem;
}

.hero__search button{
    min-width:150px;
    height:56px;
    border-radius:999px;
    background:var(--primary);
    color:#fff;
    font-weight:700;
    transition:.3s;
}

.hero__search button:hover{
    background:var(--primary-dark);
}

/* ==========================================
   Right
========================================== */

.hero__right{
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero__right img{
    width:100%;
    max-width:560px;
    animation:heroFloat 5s ease-in-out infinite;
    filter:drop-shadow(0 30px 50px rgba(37,99,235,.18));
}

/* ==========================================
   Animation
========================================== */

@keyframes heroFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-16px);
    }

    100%{
        transform:translateY(0);
    }

}

/* ==========================================
   Responsive
========================================== */

@media (max-width:1024px){

    .hero{
        padding:90px 0;
    }

    .hero__content{
        grid-template-columns:1fr;
        gap:60px;
        text-align:center;
    }

    .hero__text{
        margin-left:auto;
        margin-right:auto;
    }

    .hero__buttons{
        justify-content:center;
    }

    .hero__search{
        margin:auto;
    }

}

@media (max-width:768px){

    .hero{
        padding:70px 0;
    }

    .hero__title{
        font-size:2.5rem;
    }

    .hero__search form{
        flex-direction:column;
        gap:12px;
        border-radius:24px;
        padding:18px;
    }

    .hero__search input{
        width:100%;
    }

    .hero__search button{
        width:100%;
    }

}

@media (max-width:480px){

    .hero__buttons{
        flex-direction:column;

    }

    .hero__buttons .btn{
        width:100%;
    }

}

/* ==========================================================
   HOME
   Popular Influencers
========================================================== */

.member-card{
    background:#ffffff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(15,23,42,.08);
    transition:.35s;
}

.member-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 60px rgba(15,23,42,.15);
}

.member-card img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
}

.member-card h3{
    margin:24px 24px 8px;
    font-size:1.35rem;
    color:var(--text);
}

.member-card p{
    margin:0 24px;
    color:var(--text-light);
}

.member-card__stats{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:24px;
    padding:14px 18px;
    background:#f8fafc;
    border-radius:14px;
}

.member-card__stats span{
    color:var(--text-light);
    font-size:.9rem;
}

.member-card__stats strong{
    font-size:1.15rem;
    color:var(--primary);
}

.member-card .btn{
    margin:0 24px 24px;
    width:calc(100% - 48px);
}

/* ==========================================================
   Job Card
========================================================== */

.job-card{
    display:flex;
    flex-direction:column;
    background:#ffffff;
    border-radius:24px;
    padding:30px;
    box-shadow:0 15px 40px rgba(15,23,42,.08);
    transition:.35s;
}

.job-card:hover{
    transform:translateY(-8px);
    box-shadow:0 28px 55px rgba(15,23,42,.14);
}

.job-card__category{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    padding:8px 18px;
    margin-bottom:22px;
    border-radius:999px;
    background:#dbeafe;
    color:var(--primary);
    font-size:.85rem;
    font-weight:700;
}

.job-card h3{
    margin-bottom:14px;
    line-height:1.5;
    color:var(--text);
}

.job-card p{
    margin-bottom:20px;
}

.job-card ul{
    margin-bottom:28px;
}

.job-card li{
    position:relative;
    padding-left:18px;
    margin-bottom:12px;
    color:var(--text-light);
}

.job-card li::before{
    content:"";
    position:absolute;
    left:0;
    top:11px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--primary);
}

.job-card .btn{
    margin-top:auto;
    width:100%;
}

/* ==========================================================
   Card Hover Animation
========================================================== */

.member-card,
.job-card{
    will-change:transform;
}

.member-card img{
    transition:transform .4s ease;
}

.member-card:hover img{
    transform:scale(1.05);
}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:768px){

    .member-card h3{
        margin:20px 20px 6px;
    }

    .member-card p{
        margin:0 20px;
    }

    .member-card__stats{
        margin:20px;
    }

    .member-card .btn{
        margin:0 20px 20px;
        width:calc(100% - 40px);
    }

    .job-card{
        padding:24px;
    }

}

@media (max-width:480px){

    .job-card{
        padding:20px;
    }

}

/* ==========================================================
   HOME
   Company Section
========================================================== */

.company-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.company-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:40px 30px;
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:24px;
    text-align:center;
    box-shadow:0 15px 40px rgba(15,23,42,.06);
    transition:all .35s ease;
}

.company-card:hover{
    transform:translateY(-10px);
    border-color:var(--primary);
    box-shadow:0 25px 55px rgba(37,99,235,.15);
}

.company-card img{
    width:90px;
    height:90px;
    object-fit:contain;
    margin-bottom:24px;
}

.company-card h3{
    margin-bottom:10px;
    font-size:1.35rem;
    font-weight:700;
    color:var(--text);
}

.company-card p{
    margin-bottom:18px;
    color:var(--text-light);
}

.company-card span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:28px;
    padding:8px 16px;
    border-radius:999px;
    background:#eff6ff;
    color:var(--primary);
    font-size:.85rem;
    font-weight:700;
}

.company-card .btn{
    width:100%;
}

/* ==========================================================
   Company Hover
========================================================== */

.company-card img{
    transition:transform .35s ease;
}

.company-card:hover img{
    transform:scale(1.08);
}

/* ==========================================================
   Section Button
========================================================== */

.section__button{
    margin-top:50px;
    text-align:center;
}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:768px){

    .company-grid{
        gap:20px;
    }

    .company-card{
        padding:30px 20px;
    }

    .company-card img{
        width:72px;
        height:72px;
        margin-bottom:20px;
    }

}

@media (max-width:480px){

    .company-card{
        border-radius:18px;
    }

}

/* ==========================================================
   HOME
   Features
========================================================== */

.feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:32px;
}

.feature-card{
    padding:40px 32px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    border-radius:24px;
    backdrop-filter:blur(14px);
    text-align:center;
    transition:all .35s ease;
}

.feature-card:hover{
    transform:translateY(-10px);
    background:rgba(255,255,255,.18);
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.feature-card__icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:84px;
    height:84px;
    margin:0 auto 28px;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    font-size:2rem;
}

.feature-card h3{
    margin-bottom:18px;
    color:#fff;
    font-size:1.4rem;
}

.feature-card p{
    color:rgba(255,255,255,.85);
    line-height:1.9;
}

/* ==========================================================
   Flow
========================================================== */

.flow{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    align-items:center;
    gap:20px;
    margin-top:20px;
}

.flow__item{
    position:relative;
    padding:40px 30px;
    background:#fff;
    border-radius:24px;
    text-align:center;
    box-shadow:0 15px 40px rgba(15,23,42,.08);
    transition:all .35s ease;
}

.flow__item:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 55px rgba(15,23,42,.14);
}

.flow__number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:72px;
    height:72px;
    margin:0 auto 24px;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color:#fff;
    font-size:1.35rem;
    font-weight:700;
}

.flow__item h3{
    margin-bottom:16px;
    color:var(--text);
}

.flow__item p{
    color:var(--text-light);
}

.flow__arrow{
    font-size:2.5rem;
    color:var(--primary);
    font-weight:700;
    user-select:none;
}

/* ==========================================================
   Animation
========================================================== */

.feature-card,
.flow__item{
    will-change:transform;
}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:1024px){

    .flow{
        grid-template-columns:1fr;
        gap:24px;
    }

    .flow__arrow{
        transform:rotate(90deg);
        margin:auto;
    }

}

@media (max-width:768px){

    .feature-grid{
        gap:24px;
    }

    .feature-card{
        padding:32px 24px;
    }

    .feature-card__icon{
        width:72px;
        height:72px;
        margin-bottom:20px;
        font-size:1.7rem;
    }

    .flow__item{
        padding:32px 24px;
    }

}

@media (max-width:480px){

    .feature-card{
        border-radius:18px;
    }

    .flow__item{
        border-radius:18px;
    }

    .flow__number{
        width:60px;
        height:60px;
        font-size:1.1rem;
    }

}

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

.faq{
    max-width:900px;
    margin:0 auto;
}

.faq__item{
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:18px;
    margin-bottom:20px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(15,23,42,.05);
    transition:all .3s ease;
}

.faq__item:hover{
    box-shadow:0 16px 35px rgba(15,23,42,.08);
    border-color:var(--primary);
}

.faq__question{
    position:relative;
    padding:24px 70px 24px 28px;
    font-size:1.1rem;
    font-weight:700;
    cursor:pointer;
    color:var(--text);
}

.faq__question::after{
    content:"+";
    position:absolute;
    right:28px;
    top:50%;
    transform:translateY(-50%);
    font-size:1.8rem;
    color:var(--primary);
    transition:.3s;
}

.faq__item.is-open .faq__question::after{
    transform:translateY(-50%) rotate(45deg);
}

.faq__answer{
    display:none;
    padding:0 28px 24px;
}

.faq__item.is-open .faq__answer{
    display:block;
}

.faq__answer p{
    color:var(--text-light);
    line-height:1.9;
}

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

.cta{
    padding:120px 0;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color:#ffffff;
    text-align:center;
}

.cta__content{
    max-width:760px;
    margin:0 auto;
}

.cta__badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
    padding:10px 22px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(12px);
    font-size:.9rem;
    font-weight:700;
}

.cta h2{
    margin-bottom:24px;
    color:#ffffff;
}

.cta p{
    margin-bottom:40px;
    color:rgba(255,255,255,.9);
    font-size:1.05rem;
    line-height:2;
}

.cta__buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.cta .btn-primary{
    background:#ffffff;
    color:var(--primary);
    border-color:#ffffff;
}

.cta .btn-primary:hover{
    background:#f8fafc;
}

.cta .btn-outline{
    border-color:#ffffff;
    color:#ffffff;
    background:transparent;
}

.cta .btn-outline:hover{
    background:#ffffff;
    color:var(--primary);
}

/* ==========================================================
   Section Animation
========================================================== */

.member-card,
.job-card,
.company-card,
.feature-card,
.flow__item,
.faq__item{
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:768px){

    .faq__question{
        padding:20px 56px 20px 20px;
        font-size:1rem;
    }

    .faq__question::after{
        right:20px;
    }

    .faq__answer{
        padding:0 20px 20px;
    }

    .cta{
        padding:80px 0;
    }

}

@media (max-width:480px){

    .cta__buttons{
        flex-direction:column;
    }

    .cta__buttons .btn{
        width:100%;
    }

}