/*=====================================
CUSTOM WEBSITE HERO
======================================*/

.custom-web-hero{

    padding:150px 0 100px;

}

.custom-web-hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

.custom-web-hero-content{

    max-width:650px;

}

.custom-web-hero-content h1{

    font-size:64px;

    line-height:1.1;

    margin:24px 0;

}

.custom-web-hero-content p{

    font-size:18px;

    line-height:1.8;

    color:var(--gray);

    margin-bottom:36px;

}

.hero-buttons{

    display:flex;

    align-items:center;

    gap:16px;

    flex-wrap:wrap;

}

.custom-web-trust{

    display:flex;

    flex-wrap:wrap;

    gap:22px;

    margin-top:34px;

}

.custom-web-trust span{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:13px;

    color:var(--gray);

}

.custom-web-trust i{

    color:var(--success);

}
.custom-web-hero-visual{

    position:relative;

    min-height:500px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.website-window{

    width:100%;

    max-width:600px;

    border-radius:22px;

    overflow:hidden;

    background:#101b2e;

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

    box-shadow:

        0 40px 100px rgba(0,0,0,.45),

        0 0 80px rgba(91,95,255,.15);

    transform:perspective(1200px)
              rotateY(-8deg)
              rotateX(3deg);

}

.window-header{

    height:42px;

    display:flex;

    align-items:center;

    gap:8px;

    padding:0 18px;

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

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

}

.window-header span{

    width:10px;

    height:10px;

    border-radius:50%;

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

}

.website-preview{

    display:grid;

    grid-template-columns:130px 1fr;

    min-height:390px;

}

.preview-sidebar{

    display:flex;

    flex-direction:column;

    gap:20px;

    padding:24px 18px;

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

    border-right:1px solid rgba(255,255,255,.07);

}

.preview-logo{

    width:70px;

    height:18px;

    margin-bottom:22px;

    border-radius:5px;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

}

.preview-sidebar span{

    width:80px;

    height:9px;

    border-radius:10px;

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

}

.preview-content{

    padding:24px;

}

.preview-topbar{

    width:100%;

    height:16px;

    margin-bottom:34px;

    border-radius:10px;

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

}

.preview-hero-block{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    align-items:center;

}

.preview-text{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.preview-text div{

    height:12px;

    border-radius:10px;

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

}

.preview-text div:first-child{

    width:90%;

    height:28px;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

}

.preview-text div:nth-child(2){

    width:80%;

}

.preview-text div:nth-child(3){

    width:60%;

}

.preview-image{

    aspect-ratio:1;

    border-radius:18px;

    background:

        linear-gradient(

            135deg,

            rgba(91,95,255,.8),

            rgba(0,212,255,.25)

        );

}

.preview-cards{

    display:grid;

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

    gap:12px;

    margin-top:28px;

}

.preview-cards div{

    height:80px;

    border-radius:12px;

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

}
.floating-tech{

    position:absolute;

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

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

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

    backdrop-filter:blur(20px);

    font-size:24px;

    box-shadow:0 20px 50px rgba(0,0,0,.3);

}

.tech-html{

    top:8%;

    right:2%;

}

.tech-code{

    left:0;

    bottom:15%;

}

.tech-mobile{

    right:8%;

    bottom:4%;

}
.custom-benefits-grid{

    display:grid;

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

    gap:24px;

}

.custom-benefit-card{

    padding:32px;

    min-height:280px;

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

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

    border-radius:24px;

    transition:var(--transition);

}

.custom-benefit-card:hover{

    transform:translateY(-10px);

    border-color:rgba(91,95,255,.45);

    box-shadow:0 30px 70px rgba(91,95,255,.15);

}

.benefit-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:26px;

    border-radius:16px;

    background:rgba(91,95,255,.12);

    font-size:22px;

}

.custom-benefit-card h3{

    margin-bottom:14px;

}

.custom-benefit-card p{

    color:var(--gray);

    line-height:1.7;

}
.custom-services-grid{

    display:grid;

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

    gap:20px;

    max-width:1000px;

    margin:0 auto;

}

.custom-service-item{

    display:flex;

    align-items:flex-start;

    gap:22px;

    padding:28px;

    border-radius:20px;

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

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

}

.custom-service-item > i{

    flex-shrink:0;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:rgba(91,95,255,.12);

    font-size:20px;

}

.custom-service-item h3{

    margin-bottom:8px;

}

.custom-service-item p{

    margin:0;

    color:var(--gray);

    line-height:1.7;

}
.custom-process-grid{

    display:grid;

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

    gap:24px;

}

.custom-process-step{

    position:relative;

    padding:32px;

    min-height:260px;

    border-radius:24px;

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

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

}

.process-number{

    display:block;

    margin-bottom:35px;

    font-size:14px;

    font-weight:700;

    color:var(--accent);

}

.custom-process-step h3{

    margin-bottom:14px;

}

.custom-process-step p{

    color:var(--gray);

    line-height:1.7;

}
.custom-web-cta-box{

    padding:90px 40px;

    text-align:center;

    border-radius:32px;

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

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

}

.custom-web-cta-box h2{

    max-width:850px;

    margin:24px auto;

}

.custom-web-cta-box p{

    max-width:650px;

    margin:0 auto 34px;

    color:var(--gray);

    font-size:18px;

    line-height:1.8;

}