/*=========================================
    HERO V4 - WETECHFORU
==========================================*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root{

    --primary:#2563EB;
    --primary-light:#4F8CFF;

    --dark:#0F172A;

    --text:#334155;

    --border:#E5E7EB;

    --white:#ffffff;

    --glass:rgba(255,255,255,.55);

    --shadow:
    0 25px 80px rgba(15,23,42,.08);

}

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

.hero-v4{

    position:relative;

    overflow:hidden;

    background:#ffffff;

    min-height:100vh;

    padding-top:120px;

    padding-bottom:120px;

}

/*=========================
 CONTAINER
==========================*/

.hero-container{

    width:min(1380px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:70px;

    align-items:center;

    position:relative;

    z-index:20;

}

/*=========================
 LEFT
==========================*/

.hero-left{

    position:relative;

    z-index:20;

}

/*=========================
 RIGHT
==========================*/

.hero-right{

    position:relative;

    height:760px;

}

.hero-right::before{

    content:'';

    position:absolute;

    width:650px;

    height:650px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    background:radial-gradient(circle,
    rgba(37,99,235,.18),
    transparent 70%);

    filter:blur(80px);

    z-index:0;

}

.hero-right{

    perspective:1200px;
}

.hero-laptop{

    transform-style:preserve-3d;
}

/*=========================
 BACKGROUND
==========================*/

.hero-gradient{

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at 20% 20%,
    rgba(37,99,235,.10),
    transparent 35%),

    radial-gradient(circle at 80% 10%,
    rgba(37,99,235,.12),
    transparent 30%),

    radial-gradient(circle at 70% 80%,
    rgba(37,99,235,.08),
    transparent 40%);

    z-index:1;

}

/*=========================
 GRID
==========================*/

.hero-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(37,99,235,.05) 1px,transparent 1px),

    linear-gradient(90deg,rgba(37,99,235,.05) 1px,transparent 1px);

    background-size:70px 70px;

    opacity:.4;

    z-index:2;

}

/*=========================
 NOISE
==========================*/

.hero-noise{

    position:absolute;

    inset:0;

    opacity:.03;

    background-image:

    radial-gradient(#000 1px,transparent 1px);

    background-size:8px 8px;

    pointer-events:none;

    z-index:3;

}

/*=========================
 BLOBS
==========================*/

.hero-blob{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    animation:blobMove 14s ease-in-out infinite;

}

.hero-blob-1{

    width:420px;

    height:420px;

    background:rgba(37,99,235,.18);

    top:-150px;

    right:-120px;

}

.hero-blob-2{

    width:340px;

    height:340px;

    background:rgba(37,99,235,.12);

    bottom:-80px;

    left:-120px;

    animation-delay:4s;

}

@keyframes blobMove{

    0%{

        transform:
        translateY(0)
        scale(1);

    }

    50%{

        transform:
        translateY(-40px)
        scale(1.08);

    }

    100%{

        transform:
        translateY(0)
        scale(1);

    }

}

/*=========================
 LAPTOP
==========================*/

.hero-laptop-wrap{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:5;
}

.hero-laptop{
    width:860px;
    position:relative;
	opacity:1 !important;
}

.hero-laptop img{

    display:block;

    width:100%;

}

/*=========================
 DASHBOARD
==========================*/

.dashboard-screen{

    position:absolute;

    width:77%;

    top:4.4%;

    left:11.4%;

    border-radius:10px;

    overflow:hidden;

}

/*=========================
 PHONE
==========================*/

.hero-phone-wrap{
    position:absolute;
    right:25px;
    bottom:25px;
    z-index:20;
}

.hero-phone{
    width:175px;
    position:relative;
	opacity:1 !important;
}

.hero-phone img{

    width:100%;

    display:block;

}

.mobile-screen{

    position:absolute;

    width:86%;

    left:7%;

    top:2.8%;

    border-radius:34px;

    z-index:1;

}

.iphone{

    position:relative;

    z-index:5;
}

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

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:999px;

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

    border:1px solid rgba(37,99,235,.12);

    backdrop-filter:blur(20px);

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    color:var(--primary);

    text-transform:uppercase;

    margin-bottom:35px;

    box-shadow:0 15px 40px rgba(37,99,235,.08);

}

.hero-badge .dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22C55E;

    position:relative;

}

.hero-badge .dot::after{

    content:'';

    position:absolute;

    inset:-4px;

    border-radius:50%;

    border:2px solid rgba(34,197,94,.3);

    animation:pulseDot 2s infinite;

}

@keyframes pulseDot{

    0%{

        transform:scale(.8);

        opacity:1;

    }

    100%{

        transform:scale(1.8);

        opacity:0;

    }

}

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

.hero-title{

    font-family:'Outfit',sans-serif;

    font-size:clamp(58px,5vw,82px);

    font-weight:800;

    line-height:1.02;

    letter-spacing:-3px;

    color:#0F172A;

    margin-bottom:30px;

}

.hero-title .line{

    display:block;

}

.gradient-text{

    background:linear-gradient(
        135deg,
        #2563EB,
        #60A5FA
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/*=========================================
    DESCRIPTION
==========================================*/

.hero-description{

    max-width:620px;

    font-size:19px;

    line-height:1.9;

    color:#64748B;

    margin-bottom:45px;

}

/*=========================================
    BUTTONS
==========================================*/

.hero-buttons{

    display:flex;

    gap:18px;

    align-items:center;

    margin-bottom:45px;

}

.btn-primary{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 34px;

    border-radius:999px;

    text-decoration:none;

    color:#fff;

    background:linear-gradient(
        135deg,
        #2563EB,
        #3B82F6
    );

    font-weight:700;

    transition:.4s;

    box-shadow:

    0 20px 50px rgba(37,99,235,.28);

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:

    0 30px 70px rgba(37,99,235,.35);

}

.btn-primary svg{

    transition:.35s;

}

.btn-primary:hover svg{

    transform:translate(5px,-5px);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 34px;

    border-radius:999px;

    border:1px solid #E5E7EB;

    background:#fff;

    text-decoration:none;

    color:#0F172A;

    font-weight:700;

    transition:.35s;

}

.btn-secondary:hover{

    transform:translateY(-5px);

    border-color:#2563EB;

    color:#2563EB;

}

/*=========================================
    TECH STACK
==========================================*/

.hero-stack{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:32px;
    flex-wrap:wrap;
}

.stack-item{
    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 20px;

    background:rgba(255,255,255,.75);
    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.7);
    border-radius:999px;

    box-shadow:
        0 10px 30px rgba(37,99,235,.08);

    transition:.35s;
}

.stack-item:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 40px rgba(37,99,235,.18);
}

.stack-item i{
    font-size:22px;
    color:#2563EB;
}

.stack-item span{
    font-size:15px;
    font-weight:600;
    color:#0F172A;
}

/*=========================================
    ACHIEVEMENTS
==========================================*/

.hero-achievements{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

}

.achievement{

    min-width:150px;

}

.achievement h3{

    font-size:40px;

    font-weight:800;

    color:#0F172A;

    margin-bottom:6px;

}

.achievement span{

    color:#64748B;

    font-size:15px;

}

/*=========================================
    FLOATING CARDS
==========================================*/

.floating-card{

    position:absolute;

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

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(30px);

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

    border-radius:28px;

    box-shadow:
        0 30px 80px rgba(15,23,42,.10),
        inset 0 1px 1px rgba(255,255,255,.8);

    overflow:hidden;
}

.floating-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.8s;

}

.floating-card:hover::before{

    left:150%;

}

.floating-card:hover{

    transform:translateY(-10px) scale(1.04);

    box-shadow:

        0 35px 90px rgba(37,99,235,.18);

}

/*=========================================
    ANALYTICS CARD
==========================================*/

.analytics-card{
	
	display:flex;

    flex-direction:column;

    justify-content:flex-start;

    padding:22px 24px;

    top:40px;

    left:-70px;
	
	z-index:40;

    min-width:190px;

}

.analytics-card span{

    display:block;

    font-size:13px;

    color:#64748B;

    margin-bottom:10px;

    font-weight:600;
	
	line-height:1.3;

}

.analytics-card h3{

    font-size:42px;

    color:#2563EB;

    font-weight:800;

    line-height:1;
	
	margin:0;

}

/*=========================================
    AI CARD
==========================================*/

.ai-card{

    top:170px;

    right:-70px;

    display:flex;

    align-items:center;

    gap:18px;

    min-width:240px;
	
	z-index:40;

}

.ai-card i{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#EFF6FF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    color:#2563EB;

}

.ai-card strong{

    display:block;

    font-size:17px;

    color:#0F172A;

    margin-bottom:5px;

}

.ai-card small{

    color:#64748B;

    font-size:13px;

}

/*=========================================
    PROJECT CARD
==========================================*/

.project-card{

    bottom:100px;

    left:-50px;
	
	z-index:40;

    width:180px;

    text-align:center;

}

.project-card h4{

    font-size:48px;

    color:#2563EB;

    font-weight:800;

    margin-bottom:10px;

}

.project-card span{

    color:#64748B;

    font-size:14px;

}

/*=========================================
    FLOATING TECH ICONS
==========================================*/

.tech-icon{

    position:absolute;

    width:72px;

    height:72px;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:

        0 20px 60px rgba(15,23,42,.08);

    border:1px solid rgba(37,99,235,.08);

    z-index:5;

    transition:.35s;

}

.tech-icon:hover{

    transform:scale(1.15);

    box-shadow:

        0 25px 70px rgba(37,99,235,.20);

}

.tech-icon i{

    font-size:32px;

    color:#2563EB;

}

/*=========================================
    ICON POSITIONS
==========================================*/

.tech-icon.react{

    top:-35px;

    right:140px;

}

.tech-icon.laravel{

    top:220px;

    left:-70px;

}

.tech-icon.flutter{

    bottom:120px;

    right:-60px;

}

.tech-icon.aws{

    bottom:20px;

    right:220px;

}

.tech-icon.ai{

    top:420px;

    left:-60px;

}

/*=========================================
    IMAGE SHADOWS
==========================================*/

.hero-laptop{

    filter:

        drop-shadow(0 40px 80px rgba(15,23,42,.18));

}

.hero-phone{

    filter:

        drop-shadow(0 30px 60px rgba(15,23,42,.18));

}

/*=========================================
    IMAGE HOVER
==========================================*/

.hero-laptop,

.hero-phone{

    transition:.6s ease;

}

.hero-laptop:hover{
    transform:scale(1.02);
}

.hero-phone:hover{

    transform:

        translateY(-12px)

        rotate(-2deg);

}

/*=========================================
    TRUSTED SECTION
==========================================*/

.hero-trusted{

    position:relative;

    width:min(1380px,92%);

    margin:80px auto 0;

    z-index:10;

}

.trusted-label{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin-bottom:35px;

    color:#64748B;

    font-size:15px;

    font-weight:600;

}

.trusted-label span{

    width:80px;

    height:1px;

    background:#CBD5E1;

}

.trusted-slider{

    overflow:hidden;

    position:relative;

    mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);

    -webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);

}

.trusted-track{

    display:flex;

    align-items:center;

    gap:70px;

    width:max-content;

    animation:marqueeMove 28s linear infinite;

}

.trusted-slider:hover .trusted-track{

    animation-play-state:paused;

}

.trusted-item{

    font-size:20px;

    font-weight:700;

    color:#94A3B8;

    transition:.35s;

    cursor:pointer;

}

.trusted-item:hover{

    color:#2563EB;

    transform:translateY(-3px);

}

@keyframes marqueeMove{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/*=========================================
    SCROLL INDICATOR
==========================================*/

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    z-index:20;

}

.hero-scroll span{

    font-size:12px;

    font-weight:600;

    letter-spacing:2px;

    color:#64748B;

    text-transform:uppercase;

}

.scroll-mouse{

    width:28px;

    height:48px;

    border-radius:20px;

    border:2px solid #CBD5E1;

    display:flex;

    justify-content:center;

    padding-top:8px;

}

.scroll-wheel{

    width:4px;

    height:10px;

    border-radius:20px;

    background:#2563EB;

    animation:scrollWheel 2s infinite;

}

@keyframes scrollWheel{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    100%{

        transform:translateY(16px);

        opacity:0;

    }

}

/*=========================================
    BACKGROUND MARQUEE
==========================================*/

.hero-marquee{

    position:absolute;

    bottom:120px;

    left:0;

    width:100%;

    overflow:hidden;

    z-index:1;

    pointer-events:none;

}

.hero-marquee-track{

    width:max-content;

    font-size:120px;

    font-weight:900;

    letter-spacing:-4px;

    color:#2563EB;

    opacity:.035;

    white-space:nowrap;

    animation:heroTextMove 40s linear infinite;

}

@keyframes heroTextMove{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/*=========================================
    DECORATIVE LIGHTS
==========================================*/

.hero-light{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    pointer-events:none;

    z-index:0;

}

.hero-light-1{

    width:350px;

    height:350px;

    background:rgba(37,99,235,.12);

    top:-80px;

    left:-120px;

}

.hero-light-2{

    width:500px;

    height:500px;

    background:rgba(37,99,235,.08);

    right:-150px;

    top:220px;

}

.hero-light-3{

    width:280px;

    height:280px;

    background:rgba(37,99,235,.10);

    bottom:-120px;

    left:45%;

}

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

@media(max-width:1200px){

    .hero-container{

        grid-template-columns:1fr;

        gap:70px;

    }

    .hero-left{

        text-align:center;

    }

    .hero-description{

        margin-left:auto;

        margin-right:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stack{

        justify-content:center;

    }

    .hero-achievements{

        justify-content:center;

    }

    .hero-right{

        height:680px;

    }

}

@media(max-width:768px){

    .hero-v4{

        padding-top:90px;

    }

    .hero-title{

        font-size:46px;

        line-height:1.1;

        letter-spacing:-2px;

    }

    .hero-description{

        font-size:17px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .btn-primary,

    .btn-secondary{

        width:100%;

        justify-content:center;

    }

    .hero-laptop{

        width:100%;

    }

    .hero-phone{

        width:150px;

        right:0;

        bottom:10px;

    }

    .analytics-card{

        left:0;

    }

    .ai-card{

        right:0;

        top:180px;

    }

    .project-card{

        left:20px;

        bottom:20px;

    }

    .tech-icon{

        width:54px;

        height:54px;

    }

    .tech-icon i{

        font-size:22px;

    }

    .hero-marquee-track{

        font-size:70px;

    }

}

/*=========================================
    SMOOTH TRANSITIONS
==========================================*/

.hero-v4 *{

    box-sizing:border-box;

}

.hero-v4 img{

    user-select:none;

    -webkit-user-drag:none;

}