/* =========================
   RESET & ROOT
========================= */

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --secondary:#06b6d4;

    --text:#0f172a;
    --muted:#64748b;

    --bg:#ffffff;
    --soft-bg:#f8fafc;

    --border:#e2e8f0;

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

}


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

    background:#fff;

    color:var(--text);

    overflow-x:hidden;

}


img{

    max-width:100%;

}


a{

    text-decoration:none;

}


.wd-container{

    width:min(1200px,90%);

    margin:auto;

}




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


.wd-wrapper{

    position:relative;

    padding:100px 0;

    background:

    radial-gradient(
        circle at top right,
        rgba(37,99,235,.15),
        transparent 35%
    ),

    radial-gradient(
        circle at bottom left,
        rgba(6,182,212,.12),
        transparent 35%
    ),

    #ffffff;

}





.wd-hero{

    display:grid;

    grid-template-columns:

    1fr 480px;

    gap:70px;

    align-items:center;

}




/* HERO CONTENT */


.wd-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 20px;

    border-radius:50px;

    background:#eff6ff;

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    margin-bottom:25px;

}



.wd-hero h1{

    font-size:clamp(42px,5vw,68px);

    line-height:1.08;

    letter-spacing:-2px;

    font-weight:800;

}



.wd-hero h1 span{

    display:block;

    background:

    linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );

    -webkit-background-clip:text;

    color:transparent;

}



.wd-hero p{

    margin-top:30px;

    max-width:650px;

    color:var(--muted);

    font-size:18px;

    line-height:1.8;

}





/* BUTTONS */


.wd-buttons{

    display:flex;

    gap:18px;

    margin-top:40px;

}


.primary-btn{

    padding:16px 34px;

    background:

    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );

    color:#fff;

    border-radius:50px;

    font-weight:700;

    display:inline-flex;

    transition:.3s;

}



.primary-btn:hover{

    transform:translateY(-4px);

    box-shadow:

    0 15px 35px rgba(37,99,235,.3);

}




.secondary-btn{

    padding:16px 34px;

    border-radius:50px;

    border:1px solid var(--border);

    color:var(--text);

    font-weight:600;

    background:#fff;

    transition:.3s;

}



.secondary-btn:hover{

    border-color:var(--primary);

    color:var(--primary);

}





/* TRUST BOX */


.wd-trust{

    display:flex;

    gap:45px;

    margin-top:55px;

}



.wd-trust div{

    display:flex;

    flex-direction:column;

}



.wd-trust strong{

    font-size:32px;

}



.wd-trust small{

    color:var(--muted);

    margin-top:5px;

}





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


.wd-visual{

    position:relative;

    min-height:520px;

    display:flex;

    justify-content:center;

    align-items:center;

}




.main-dashboard{

    width:360px;

    height:430px;

    background:#fff;

    border-radius:30px;

    box-shadow:

    0 40px 80px rgba(15,23,42,.15);

    border:1px solid #e5e7eb;

    overflow:hidden;

}




.dashboard-top{

    height:50px;

    background:#f8fafc;

    display:flex;

    align-items:center;

    gap:8px;

    padding-left:20px;

}



.dashboard-top span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#cbd5e1;

}



.dashboard-content{

    padding:50px 35px;

}


.dashboard-content h3{

    font-size:32px;

}


.dashboard-content p{

    color:var(--muted);

    line-height:1.7;

    margin-top:15px;

}



.dashboard-lines{

    margin-top:40px;

}


.dashboard-lines i{

    display:block;

    height:12px;

    background:#e0ecff;

    border-radius:20px;

    margin-bottom:15px;

}


.dashboard-lines i:nth-child(2){

    width:80%;

}


.dashboard-lines i:nth-child(3){

    width:55%;

}




/* FLOATING CARDS */


.floating-card{

    position:absolute;

    background:#fff;

    border-radius:20px;

    padding:20px;

    width:190px;

    box-shadow:

    0 20px 50px rgba(15,23,42,.12);

    border:1px solid #eef2f7;

}



.floating-card span{

    font-size:28px;

}


.floating-card h4{

    margin-top:10px;

}



.floating-card p{

    color:var(--muted);

    font-size:14px;

    margin-top:5px;

}



.card-one{

    top:80px;

    left:0;

}



.card-two{

    bottom:80px;

    right:0;

}
/* =========================
   SECTION COMMON
========================= */

section{
    position:relative;
}


.section-heading{

    text-align:center;

    max-width:850px;

    margin:0 auto 70px;

}


.section-heading span,
.small-title{

    display:inline-block;

    color:var(--primary);

    font-size:14px;

    font-weight:800;

    letter-spacing:2px;

    margin-bottom:18px;

}



.section-heading h2{

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

    line-height:1.15;

    letter-spacing:-1px;

}



.section-heading p{

    color:var(--muted);

    font-size:18px;

    line-height:1.8;

    margin-top:20px;

}





/* =========================
 SERVICES SECTION
========================= */


.wd-services{

    padding:100px 0;

    background:var(--soft-bg);

}



.service-grid{

    display:grid;

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

    gap:30px;

}



.service-card{

    background:#fff;

    border-radius:28px;

    padding:40px 35px;

    border:1px solid var(--border);

    transition:.4s;

    position:relative;

    overflow:hidden;

}




.service-card::before{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

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

    border-radius:50%;

    top:-50px;

    right:-50px;

    transition:.4s;

}




.service-card:hover{

    transform:translateY(-12px);

    box-shadow:

    0 30px 70px rgba(15,23,42,.12);

    border-color:#bfdbfe;

}



.service-card:hover::before{

    transform:scale(2);

}



.service-icon{

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eff6ff;

    border-radius:18px;

    font-size:30px;

    margin-bottom:25px;

}




.service-card h3{

    font-size:25px;

    margin-bottom:15px;

    position:relative;

}



.service-card p{

    color:var(--muted);

    line-height:1.8;

    position:relative;

}





/* =========================
 WHY SECTION
========================= */


.why-section{

    padding:120px 0;

}



.why-grid{

    display:grid;

    grid-template-columns:1fr 450px;

    gap:80px;

    align-items:center;

}




.why-content h2{

    font-size:clamp(35px,4vw,55px);

    line-height:1.15;

    letter-spacing:-1px;

}



.why-content>p{

    margin-top:25px;

    color:var(--muted);

    line-height:1.9;

    font-size:18px;

}




.check-list{

    list-style:none;

    margin-top:35px;

    display:grid;

    gap:18px;

}



.check-list li{

    font-weight:600;

    color:#334155;

    font-size:17px;

}





/* WHY CARDS */


.why-cards{

    display:grid;

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

    gap:25px;

}



.mini-card{

    padding:40px 25px;

    border-radius:25px;

    background:

    linear-gradient(
        145deg,
        #ffffff,
        #f8fafc
    );


    border:1px solid var(--border);

    text-align:center;

    transition:.35s;

}



.mini-card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 25px 60px rgba(15,23,42,.1);

}



.mini-card h3{

    font-size:42px;

    color:var(--primary);

    margin-bottom:10px;

}



.mini-card p{

    color:var(--muted);

    font-weight:600;

}

/* =========================
   PROCESS SECTION
========================= */

.process-section{

    padding:110px 0;

    background:#f8fafc;

}



.process-grid{

    display:grid;

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

    gap:25px;

}



.process-card{

    background:#fff;

    padding:35px;

    border-radius:25px;

    border:1px solid var(--border);

    transition:.35s;

    position:relative;

}



.process-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 25px 60px rgba(15,23,42,.1);

}



.process-number{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );

    color:#fff;

    font-size:20px;

    font-weight:800;

    margin-bottom:25px;

}



.process-card h3{

    font-size:24px;

    margin-bottom:15px;

}



.process-card p{

    color:var(--muted);

    line-height:1.8;

}





/* =========================
 SEO SECTION
========================= */


.seo-highlight{

    padding:120px 0;

}



.seo-box{

    display:grid;

    grid-template-columns:1fr 400px;

    align-items:center;

    gap:70px;

    padding:70px;

    border-radius:40px;

    background:

    linear-gradient(
        135deg,
        #eff6ff,
        #ecfeff
    );

    border:1px solid #dbeafe;

}



.seo-content>span{

    color:var(--primary);

    font-size:14px;

    font-weight:800;

    letter-spacing:2px;

}



.seo-content h2{

    margin-top:20px;

    font-size:clamp(35px,4vw,55px);

    line-height:1.15;

}



.seo-content p{

    margin-top:25px;

    color:var(--muted);

    font-size:18px;

    line-height:1.9;

}



.seo-points{

    display:grid;

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

    gap:18px;

    margin-top:35px;

}



.seo-points div{

    background:#fff;

    padding:15px 20px;

    border-radius:15px;

    font-weight:600;

    border:1px solid #e0e7ff;

}





/* SEO VISUAL */


.seo-visual{

    display:flex;

    justify-content:center;

}



.seo-circle{

    width:260px;

    height:260px;

    border-radius:50%;

    background:

    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:

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

}



.seo-circle strong{

    font-size:70px;

    line-height:1;

}



.seo-circle span{

    font-size:22px;

    margin-top:10px;

}





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


.final-section{

    padding:100px 0;

}



.final-card{

    text-align:center;

    padding:80px 50px;

    border-radius:40px;

    background:

    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );

    color:#fff;

    position:relative;

    overflow:hidden;

}



.final-card::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

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

    right:-120px;

    top:-120px;

}



.final-card h2{

    position:relative;

    font-size:clamp(35px,4vw,55px);

    line-height:1.2;

    z-index:2;

}



.final-card p{

    position:relative;

    max-width:700px;

    margin:25px auto 40px;

    line-height:1.8;

    font-size:18px;

    z-index:2;

}



.final-buttons{

    position:relative;

    z-index:3;

    display:flex;

    justify-content:center;

    gap:20px;

}



.final-buttons .primary-btn{

    background:#fff;

    color:#2563eb;

}



.final-buttons .secondary-btn{

    background:transparent;

    border-color:rgba(255,255,255,.5);

    color:#fff;

}


/* =========================
   PREMIUM ANIMATIONS
========================= */


@keyframes floatUp{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}


@keyframes pulseGlow{

    0%{
        box-shadow:
        0 0 0 0 rgba(37,99,235,.25);
    }

    70%{
        box-shadow:
        0 0 0 25px rgba(37,99,235,0);
    }

    100%{
        box-shadow:
        0 0 0 0 rgba(37,99,235,0);
    }

}



@keyframes shine{

    0%{
        left:-100%;
    }

    100%{
        left:120%;
    }

}



@keyframes rotateGradient{

    0%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(360deg);
    }

}





/* Floating Hero Cards */


.card-one,
.card-two{

    animation:

    floatUp 5s ease-in-out infinite;

}



.card-two{

    animation-delay:1.5s;

}




/* Button Shine */


.primary-btn{

    position:relative;

    overflow:hidden;

}



.primary-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:60%;

    height:100%;

    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.5),
        transparent
    );


    transition:.5s;

}



.primary-btn:hover::before{

    animation:shine .8s;

}





/* Cards Animation */


.service-card,
.process-card,
.mini-card{


    animation:

    fadeUp .8s ease both;

}



@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}





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



@media(max-width:1100px){


    .wd-hero{

        grid-template-columns:1fr;

        text-align:center;

    }


    .wd-hero p{

        margin-left:auto;

        margin-right:auto;

    }



    .wd-buttons{

        justify-content:center;

    }



    .wd-trust{

        justify-content:center;

    }



    .wd-visual{

        margin-top:40px;

    }



    .service-grid{

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

    }



    .why-grid{

        grid-template-columns:1fr;

    }



    .why-content{

        text-align:center;

    }



    .check-list{

        justify-content:center;

    }



    .process-grid{

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

    }



    .seo-box{

        grid-template-columns:1fr;

        text-align:center;

    }



    .seo-points{

        max-width:600px;

        margin-left:auto;

        margin-right:auto;

    }


}





@media(max-width:768px){



    .wd-wrapper{

        padding:70px 0;

    }



    .wd-hero h1{

        font-size:42px;

        letter-spacing:-1px;

    }



    .wd-buttons{

        flex-direction:column;

    }



    .wd-buttons a{

        justify-content:center;

    }



    .wd-trust{

        flex-direction:column;

        gap:25px;

    }



    .main-dashboard{

        width:300px;

        height:390px;

    }



    .floating-card{

        width:160px;

        padding:15px;

    }



    .card-one{

        left:-10px;

        top:50px;

    }



    .card-two{

        right:-10px;

        bottom:50px;

    }





    .service-grid{

        grid-template-columns:1fr;

    }



    .why-cards{

        grid-template-columns:1fr;

    }



    .process-grid{

        grid-template-columns:1fr;

    }



    .seo-box{

        padding:35px 20px;

    }



    .seo-points{

        grid-template-columns:1fr;

    }



    .seo-circle{

        width:210px;

        height:210px;

    }



    .final-card{

        padding:50px 20px;

    }



    .final-buttons{

        flex-direction:column;

    }


}





@media(max-width:480px){


    .wd-container{

        width:92%;

    }



    .service-card,
    .process-card{

        padding:25px;

    }



    .wd-tag{

        font-size:12px;

    }



    .seo-circle strong{

        font-size:55px;

    }


}

/* =========================
 EXTRA PREMIUM POLISH
========================= */


::selection{

    background:#2563eb;

    color:#fff;

}



::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:#f1f5f9;

}


::-webkit-scrollbar-thumb{

    background:
    linear-gradient(
        #2563eb,
        #06b6d4
    );

    border-radius:20px;

}





/* Smooth card glow */

.service-card:hover,
.process-card:hover,
.mini-card:hover{


    box-shadow:

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

    inset 0 0 0 1px
    rgba(37,99,235,.1);

}





/* Dashboard premium effect */


.main-dashboard{

    position:relative;

}



.main-dashboard::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:32px;

    background:

    linear-gradient(
        135deg,
        #2563eb,
        transparent,
        #06b6d4
    );

    z-index:-1;

}





/* SEO Circle Animation */


.seo-circle{

    animation:

    floatUp 5s infinite ease-in-out;

}




/* Better mobile tap */


a,
button{

    -webkit-tap-highlight-color:transparent;

}