/* =========================
 RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    font-family:Inter,Arial,sans-serif;

    background:#f7f9ff;

    color:#111827;

    overflow-x:hidden;

}


a{

    text-decoration:none;

}



/* =========================
 HEADER
========================= */


.header{

    padding:25px 20px;

}



.header-box{


    max-width:1250px;

    height:100px;

    margin:auto;


    background:#ffffff;


    border-radius:30px;


    padding:0 40px;


    display:flex;

    align-items:center;

    justify-content:space-between;



    border:1px solid #e7eaff;


    box-shadow:

    0 20px 60px rgba(99,102,241,.15);



    animation:headerAnim .8s ease;


}





.logo img{


    width:180px;


    height:75px;


    object-fit:contain;


    transition:.4s;


}


.logo img:hover{


    transform:scale(1.08);


}







nav{


    display:flex;


    gap:12px;


}




nav a{


    padding:13px 25px;


    border-radius:50px;


    font-size:16px;


    font-weight:700;


    color:#475569;


    transition:.3s;


}




nav a:hover{


    background:#eef2ff;


    color:#6366f1;


}





nav .active{


    background:

    linear-gradient(
    135deg,
    #2563eb,
    #7c3aed
    );


    color:white;


}









/* =========================
 TOOL SECTION
========================= */


.tool-section{


    padding:35px 20px 20px;


}



.tool-card{


    max-width:1250px;


    margin:auto;


    background:white;


    border-radius:45px;


    padding:55px;


    border:1px solid #e5e7ff;



    box-shadow:

    0 35px 100px rgba(99,102,241,.20);



    animation:toolShow 1s ease;


}





.tool-heading{


    display:flex;


    align-items:center;


    justify-content:space-between;


    margin-bottom:35px;


}





.tool-title{


    display:flex;


    align-items:center;


    gap:25px;


}




.tool-title span{


    font-size:65px;


}





.tool-title h2{


    font-size:40px;


    font-weight:900;


}





.tool-title p{


    margin-top:8px;


    color:#64748b;


    font-size:18px;


}





.ready{


    background:#dcfce7;


    color:#16a34a;


    padding:12px 25px;


    border-radius:50px;


    font-weight:800;


}






textarea{


    width:100%;


    height:380px;


    resize:none;


    border-radius:30px;


    border:2px solid #dbe3ff;


    outline:none;


    padding:35px;


    font-size:18px;


    background:#fbfcff;


    transition:.3s;


}





textarea:focus{


    border-color:#6366f1;


    box-shadow:

    0 0 25px rgba(99,102,241,.15);


}







.tool-buttons{


    display:flex;


    gap:20px;


    margin-top:30px;


}





.tool-buttons button{


    border:none;


    padding:18px 45px;


    border-radius:50px;


    font-size:17px;


    font-weight:800;


    cursor:pointer;


    color:white;


    transition:.3s;


}





#openAllBtn{


    background:

    linear-gradient(
    135deg,
    #2563eb,
    #8b5cf6
    );


}





#clearBtn{


    background:#ef4444;


}





.tool-buttons button:hover{


    transform:translateY(-5px);


}







.stats{


    margin-top:45px;


    display:grid;


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


    gap:30px;


}




.stats div{


    background:#f7f9ff;


    padding:35px;


    text-align:center;


    border-radius:30px;


}





.stats strong{


    display:block;


    font-size:50px;


    color:#6366f1;


}




.stats span{


    color:#64748b;


    font-weight:700;


}










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


.hero{


    position:relative;


    padding:45px 20px;


    overflow:hidden;


}



.hero-content{


    max-width:850px;


    text-align:center;


    margin:auto;


    animation:fadeUp .8s ease;


}



.badge{


    display:inline-block;


    padding:10px 25px;


    border-radius:50px;


    background:#ede9fe;


    color:#7c3aed;


    font-weight:800;


}




.hero h1{


    margin-top:25px;


    font-size:70px;


    line-height:1.1;


    letter-spacing:-3px;


}



.hero h1 span{


    color:#6366f1;


}




.hero p{


    margin:25px auto;


    max-width:700px;


    font-size:19px;


    color:#64748b;


    line-height:1.7;


}





.hero-buttons a{


    display:inline-block;


    margin-top:15px;


    padding:16px 35px;


    background:#6366f1;


    color:white;


    border-radius:50px;


    font-weight:800;


}





.trust{


    margin-top:35px;


    display:flex;


    justify-content:center;


    flex-wrap:wrap;


    gap:15px;


}



.trust span{


    background:white;


    border:1px solid #e5e7eb;


    padding:12px 22px;


    border-radius:50px;


}







.circle{


    position:absolute;


    border-radius:50%;


    animation:float 5s infinite alternate;


}



.circle.one{


    width:350px;


    height:350px;


    background:#ddd6fe;


    left:-180px;


    top:-150px;


}




.circle.two{


    width:300px;


    height:300px;


    background:#dbeafe;


    right:-150px;


    bottom:-120px;


}










/* =========================
 FEATURES
========================= */


.features,
.steps{


    padding:70px 20px;


    text-align:center;


}



.features h2,
.steps h2{


    font-size:42px;


}





.features>p{


    margin-top:15px;


    color:#64748b;


}




.feature-grid,
.step-grid{


    max-width:1150px;


    margin:45px auto;


    display:grid;


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


    gap:30px;


}





.feature-grid div,
.step-grid div{


    background:white;


    padding:40px 30px;


    border-radius:30px;


    box-shadow:

    0 20px 50px rgba(0,0,0,.06);


    transition:.4s;


}




.feature-grid div:hover,
.step-grid div:hover{


    transform:translateY(-10px);


}







.feature-grid h3,
.step-grid h3{


    margin:15px 0;


    font-size:22px;


}






.feature-grid p,
.step-grid p{


    color:#64748b;


}








/* =========================
 FOOTER
========================= */


footer{


    background:#111827;


    color:white;


    text-align:center;


    padding:50px 20px;


}



footer a{


    color:#c7d2fe;


    margin:15px;


}









/* =========================
 ANIMATION
========================= */


@keyframes headerAnim{


from{

opacity:0;

transform:translateY(-40px);

}


to{

opacity:1;

transform:translateY(0);

}

}



@keyframes toolShow{


from{

opacity:0;

transform:translateY(60px);

}


to{

opacity:1;

transform:translateY(0);

}

}



@keyframes fadeUp{


from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}

}



@keyframes float{


from{

transform:translateY(0);

}


to{

transform:translateY(40px);

}

}








/* =========================
 MOBILE
========================= */


@media(max-width:768px){



.header-box{


height:auto;


flex-direction:column;


gap:20px;


padding:25px;


}



.logo img{

width:150px;

}



nav{

flex-wrap:wrap;

justify-content:center;

}



.tool-card{


padding:25px;


}



.tool-heading{


flex-direction:column;


gap:20px;


}



.tool-title h2{


font-size:28px;


}



textarea{


height:250px;


}



.stats,
.feature-grid,
.step-grid{


grid-template-columns:1fr;


}



.hero h1{


font-size:42px;


}


}

/* =========================
 CONTACT PAGE
========================= */


.contact-hero{


text-align:center;


padding:60px 20px 30px;


}



.contact-hero h1{


font-size:60px;


margin:25px 0;


}



.contact-hero h1 span{


color:#6366f1;


}



.contact-hero p{


font-size:18px;


color:#64748b;


max-width:650px;


margin:auto;


line-height:1.7;


}







.contact-section{


padding:40px 20px 80px;


}




.contact-container{


max-width:1000px;


margin:auto;


background:white;


border-radius:40px;


padding:45px;


display:grid;


grid-template-columns:1fr 1fr;


gap:35px;


box-shadow:

0 35px 90px rgba(99,102,241,.18);


border:1px solid #eef2ff;


animation:toolShow .8s ease;


}








.contact-card{


display:flex;


gap:20px;


align-items:flex-start;


padding:25px;


border-radius:25px;


border:1px solid #e5e7eb;


margin-bottom:18px;


transition:.3s;


}




.contact-card:hover{


transform:translateY(-5px);


box-shadow:

0 15px 35px rgba(99,102,241,.12);


}



.contact-icon{


font-size:28px;


}





.contact-card h3{


font-size:20px;


margin-bottom:8px;


}




.contact-card p{


color:#64748b;


line-height:1.6;


}



.contact-card a{


color:#7c3aed;


font-weight:800;


font-size:17px;


}









.contact-form{


display:flex;


flex-direction:column;


}





.contact-form label{


font-weight:700;


margin-bottom:8px;


color:#475569;


}





.contact-form input,
.contact-form textarea{


width:100%;


padding:18px;


border-radius:20px;


border:1px solid #dbe3ff;


background:#fbfcff;


font-size:16px;


margin-bottom:20px;


outline:none;


}



.contact-form textarea{


height:160px;


resize:none;


}




.contact-form input:focus,
.contact-form textarea:focus{


border-color:#6366f1;


box-shadow:

0 0 20px rgba(99,102,241,.15);


}





.contact-form button{


padding:18px;


border:none;


border-radius:50px;


background:

linear-gradient(
135deg,
#6366f1,
#8b5cf6
);


color:white;


font-size:18px;


font-weight:800;


cursor:pointer;


box-shadow:

0 15px 35px rgba(99,102,241,.35);


transition:.3s;


}



.contact-form button:hover{


transform:translateY(-5px);


}

/* =========================
 BLOG PAGE
========================= */


.blog-hero{

text-align:center;

padding:70px 20px 40px;

}


.blog-hero h1{


font-size:60px;


margin:25px 0;


}



.blog-hero h1 span{


color:#6366f1;


}



.blog-hero p{


max-width:650px;


margin:auto;


font-size:18px;


color:#64748b;


line-height:1.7;


}





.blog-section{


padding:30px 20px 70px;


}




.blog-container{


max-width:1100px;


margin:auto;


background:white;


border-radius:40px;


padding:70px 40px;


box-shadow:

0 30px 80px rgba(99,102,241,.15);


border:1px solid #eef2ff;


}



.empty-blog{


text-align:center;


}



.blog-icon{


font-size:70px;


margin-bottom:25px;


}



.empty-blog h2{


font-size:38px;


margin-bottom:15px;


}



.empty-blog p{


max-width:500px;


margin:auto;


color:#64748b;


line-height:1.7;


}





.categories{


display:flex;


justify-content:center;


gap:15px;


flex-wrap:wrap;


margin-top:30px;


}



.categories span{


background:#f0ebff;


color:#7c3aed;


padding:12px 25px;


border-radius:50px;


font-weight:700;


}







.future-blog{


padding:40px 20px 80px;


text-align:center;


}



.future-blog h2{


font-size:42px;


}




.blog-grid{


max-width:1100px;


margin:40px auto;


display:grid;


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


gap:25px;


}





@media(max-width:768px){


.blog-hero h1{


font-size:42px;


}



.blog-grid{


grid-template-columns:1fr;


}


}





@media(max-width:768px){


.contact-container{


grid-template-columns:1fr;


padding:25px;


}



.contact-hero h1{


font-size:42px;


}


}

/* =========================
 PRIVACY PAGE DESIGN
========================= */


body{

margin:0;

font-family:
"Inter",
Arial,
sans-serif;

background:#f8faff;

color:#111827;

}




.legal-hero{

text-align:center;

padding:80px 20px 50px;

}




.badge{

display:inline-block;

background:#ede9fe;

color:#7c3aed;

padding:10px 22px;

border-radius:50px;

font-weight:700;

}



.legal-hero h1{


font-size:60px;

margin:25px 0;

font-weight:800;


}



.legal-hero h1 span{

color:#6366f1;

}



.legal-hero p{

max-width:700px;

margin:auto;

font-size:18px;

line-height:1.7;

color:#64748b;

}







.legal-section{


padding:20px;

}



.legal-box{


max-width:1000px;

margin:auto;


background:white;


padding:55px;


border-radius:35px;


box-shadow:

0 25px 70px rgba(99,102,241,.15);


border:1px solid #eef2ff;


}



.legal-box h2{


font-size:28px;


margin-top:35px;


margin-bottom:12px;


color:#111827;


}



.legal-box p{


font-size:17px;


line-height:1.8;


color:#475569;


}



.legal-box ul{


padding-left:25px;


color:#475569;


line-height:1.8;


}



.legal-box a{


color:#6366f1;

font-weight:700;

}




@media(max-width:768px){


.legal-hero h1{

font-size:40px;

}



.legal-box{

padding:25px;

}


}   

/* =========================
 CUSTOM 404 PAGE
========================= */


.error-section{


min-height:65vh;


display:flex;


justify-content:center;


align-items:center;


padding:50px 20px;


}



.error-box{


background:white;


max-width:650px;


width:100%;


padding:60px 40px;


text-align:center;


border-radius:40px;


box-shadow:

0 35px 90px rgba(99,102,241,.18);


border:1px solid #eef2ff;


animation:errorShow .8s ease;


}





.error-number{


font-size:130px;


font-weight:900;


background:

linear-gradient(
135deg,
#2563eb,
#8b5cf6
);


-webkit-background-clip:text;


color:transparent;


animation:

float404 3s infinite;


}





.error-box h1{


font-size:38px;


margin-bottom:15px;


}





.error-box p{


font-size:18px;


color:#64748b;


line-height:1.7;


margin-bottom:35px;


}





.error-buttons{


display:flex;


justify-content:center;


gap:20px;


flex-wrap:wrap;


}



.error-buttons a{


text-decoration:none;


padding:16px 30px;


border-radius:50px;


font-weight:800;


background:

linear-gradient(
135deg,
#6366f1,
#8b5cf6
);


color:white;


box-shadow:

0 15px 35px rgba(99,102,241,.3);


transition:.3s;


}





.error-buttons a:hover{


transform:translateY(-5px);


}





@keyframes float404{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-15px);

}


}





@keyframes errorShow{


from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}


}






@media(max-width:768px){


.error-number{

font-size:90px;

}



.error-box h1{

font-size:30px;

}



}

/* =========================
 PREMIUM ABOUT PAGE
========================= */


/* HERO */

.about-hero{


position:relative;


text-align:center;


padding:90px 20px 70px;


overflow:hidden;


}



.about-hero h1{


font-size:65px;


line-height:1.15;


margin:25px auto;


max-width:900px;


font-weight:900;


letter-spacing:-2px;


}



.about-hero h1 span{


background:

linear-gradient(
135deg,
#2563eb,
#8b5cf6
);


-webkit-background-clip:text;


color:transparent;


}



.about-hero p{


max-width:700px;


margin:25px auto 35px;


font-size:19px;


color:#64748b;


line-height:1.7;


}





.primary-btn{


display:inline-block;


padding:16px 35px;


border-radius:50px;


background:

linear-gradient(
135deg,
#2563eb,
#8b5cf6
);


color:white;


font-weight:800;


box-shadow:

0 15px 35px rgba(99,102,241,.35);


transition:.3s;


}



.primary-btn:hover{


transform:translateY(-5px);


}






.about-shape{


position:absolute;


border-radius:50%;


animation:aboutFloat 6s infinite alternate;


}



.about-shape.one{


width:350px;


height:350px;


background:#ddd6fe;


left:-150px;


top:-120px;


}




.about-shape.two{


width:300px;


height:300px;


background:#dbeafe;


right:-120px;


bottom:-100px;


}









/* STORY SECTION */


.about-section{


padding:70px 20px;


}





.about-container{


max-width:1150px;


margin:auto;


display:grid;


grid-template-columns:1fr 1fr;


gap:50px;


align-items:center;


}





.small-title{


color:#6366f1;


font-weight:800;


}





.about-text h2{


font-size:42px;


margin:20px 0;


}



.about-text p{


color:#64748b;


font-size:17px;


line-height:1.8;


margin-bottom:18px;


}





.about-image{


height:350px;


display:flex;


align-items:center;


justify-content:center;


background:

linear-gradient(
135deg,
#eef2ff,
#f5f3ff
);


border-radius:40px;


}





.floating-card{


background:white;


padding:45px;


border-radius:30px;


text-align:center;


font-size:25px;


font-weight:800;


box-shadow:

0 25px 60px rgba(99,102,241,.18);


animation:floatingCard 4s infinite;


}








/* PROBLEM SOLUTION */


.problem-section{


padding:40px 20px 80px;


}





.problem-grid{


max-width:1000px;


margin:auto;


display:grid;


grid-template-columns:1fr 1fr;


gap:30px;


}





.problem-card,
.solution-card{


background:white;


padding:40px;


border-radius:30px;


box-shadow:

0 20px 50px rgba(0,0,0,.06);


transition:.3s;


}





.problem-card:hover,
.solution-card:hover{


transform:translateY(-8px);


}





.problem-card h3,
.solution-card h3{


font-size:25px;


margin-bottom:15px;


}





.problem-card p,
.solution-card p{


color:#64748b;


line-height:1.7;


}









/* WHY SECTION */


.why-section{


padding:70px 20px;


text-align:center;


}





.why-section h2,
.users-section h2{


font-size:42px;


margin-bottom:45px;


}







.feature-card{


background:white;


padding:40px 30px;


border-radius:30px;


border:1px solid #eef2ff;


box-shadow:

0 20px 50px rgba(99,102,241,.10);


transition:.35s;


}



.feature-card:hover{


transform:translateY(-10px);


}



.feature-card div{


font-size:45px;


margin-bottom:15px;


}







/* USERS */


.users-section{


padding:70px 20px;


text-align:center;


}





.user-grid{


max-width:1100px;


margin:auto;


display:grid;


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


gap:25px;


}





.user-grid div{


background:white;


padding:35px;


border-radius:30px;


box-shadow:

0 20px 45px rgba(0,0,0,.06);


transition:.3s;


}




.user-grid div:hover{


transform:translateY(-8px);


}




.user-grid h3{


margin:15px 0;


}




.user-grid p{


color:#64748b;


}









/* TRUST BOX */


.trust-box{


max-width:1000px;


margin:40px auto;


padding:50px;


background:

linear-gradient(
135deg,
#eef2ff,
#f5f3ff
);


border-radius:35px;


text-align:center;


}



.trust-box h2{


font-size:36px;


margin-bottom:15px;


}



.trust-box p{


font-size:18px;


color:#475569;


line-height:1.7;


}








/* CTA */


.cta-section{


margin:80px 20px;


padding:60px 30px;


background:

linear-gradient(
135deg,
#2563eb,
#8b5cf6
);


border-radius:40px;


text-align:center;


color:white;


}





.cta-section h2{


font-size:42px;


margin-bottom:15px;


}




.cta-section p{


font-size:18px;


margin-bottom:30px;


}





.cta-section a{


display:inline-block;


background:white;


color:#6366f1;


padding:16px 35px;


border-radius:50px;


font-weight:800;


}









/* ANIMATION */


@keyframes aboutFloat{


from{

transform:translateY(0);

}


to{

transform:translateY(40px);

}


}



@keyframes floatingCard{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-15px);

}


}







/* MOBILE */


@media(max-width:768px){


.about-hero h1{

font-size:42px;

}



.about-container,
.problem-grid,
.user-grid{


grid-template-columns:1fr;


}



.about-image{


height:280px;


}



.why-section h2,
.users-section h2,
.cta-section h2{


font-size:32px;


}



}

/* =========================
 PREMIUM CONTACT PAGE
========================= */


.contact-hero{

position:relative;

text-align:center;

padding:90px 20px 60px;

overflow:hidden;

}



.contact-hero h1{

font-size:65px;

margin:25px 0;

font-weight:900;

}



.contact-hero h1 span{

background:linear-gradient(
135deg,
#2563eb,
#8b5cf6
);

-webkit-background-clip:text;

color:transparent;

}



.contact-hero p{

max-width:700px;

margin:auto;

font-size:19px;

color:#64748b;

line-height:1.7;

}






.contact-main{

padding:50px 20px 80px;

}




.contact-wrapper{

max-width:1150px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

background:white;

padding:50px;

border-radius:40px;

box-shadow:

0 30px 90px rgba(99,102,241,.15);

border:1px solid #eef2ff;

}





.small-title{

color:#6366f1;

font-weight:800;

}



.contact-content h2{

font-size:42px;

margin:20px 0;

}



.contact-content>p{

color:#64748b;

line-height:1.8;

margin-bottom:30px;

}






.contact-card{

display:flex;

gap:20px;

padding:22px;

border-radius:25px;

background:#f8faff;

margin-bottom:18px;

transition:.3s;

}



.contact-card:hover{

transform:translateY(-5px);

}





.contact-icon{

font-size:35px;

}





.contact-card p{

color:#64748b;

margin-top:5px;

}








.contact-form-box{

background:#f8faff;

padding:35px;

border-radius:30px;

}




.contact-form-box h2{

font-size:30px;

}




.contact-form-box p{

color:#64748b;

margin:10px 0 25px;

}




.contact-form-box label{

display:block;

font-weight:700;

margin-bottom:8px;

}



.contact-form-box input,
.contact-form-box textarea{


width:100%;

padding:16px;

border-radius:18px;

border:1px solid #dbe3ff;

margin-bottom:18px;

font-size:16px;

outline:none;

}




.contact-form-box textarea{

height:150px;

resize:none;

}



.contact-form-box button{


width:100%;

padding:17px;

border:none;

border-radius:50px;

background:

linear-gradient(
135deg,
#2563eb,
#8b5cf6
);

color:white;

font-weight:800;

font-size:17px;

cursor:pointer;

}





.contact-benefits{

padding:70px 20px;

text-align:center;

}




.benefit-grid{

max-width:1100px;

margin:40px auto;

display:grid;

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

gap:25px;

}



.benefit-grid div{

background:white;

padding:35px;

border-radius:30px;

box-shadow:

0 20px 50px rgba(0,0,0,.06);

transition:.3s;

}



.benefit-grid div:hover{

transform:translateY(-10px);

}





@media(max-width:768px){


.contact-wrapper{

grid-template-columns:1fr;

padding:25px;

}


.contact-hero h1{

font-size:42px;

}



.benefit-grid{

grid-template-columns:1fr;

}


}

/* =========================
   PREMIUM BLOG PAGE
========================= */


/* BLOG HERO */

.blog-hero{

position:relative;

padding:90px 20px 70px;

text-align:center;

overflow:hidden;

}




.blog-hero h1{


font-size:65px;


font-weight:900;


letter-spacing:-2px;


margin:25px auto;


max-width:900px;


}



.blog-hero h1 span{


background:

linear-gradient(
135deg,
#2563eb,
#8b5cf6
);


-webkit-background-clip:text;


color:transparent;


}




.blog-hero p{


max-width:700px;


margin:auto;


font-size:19px;


line-height:1.8;


color:#64748b;


}






/* SEARCH BOX */


.blog-search{


max-width:650px;


margin:40px auto 0;


display:flex;


background:white;


padding:8px;


border-radius:50px;


box-shadow:

0 20px 50px rgba(99,102,241,.15);


border:1px solid #eef2ff;


}



.blog-search input{


flex:1;


border:none;


outline:none;


padding:18px 25px;


font-size:16px;


border-radius:50px;


}



.blog-search button{


border:none;


padding:15px 30px;


border-radius:50px;


background:

linear-gradient(
135deg,
#2563eb,
#8b5cf6
);


color:white;


font-weight:800;


cursor:pointer;


}









/* FEATURED ARTICLE */


.featured-blog{


padding:50px 20px;


}



.featured-box{


max-width:1200px;


margin:auto;


display:grid;


grid-template-columns:1fr 350px;


gap:40px;


align-items:center;


padding:55px;


background:white;


border-radius:40px;


box-shadow:

0 30px 80px rgba(99,102,241,.15);


border:1px solid #eef2ff;


}




.featured-content span{


background:#ede9fe;


color:#7c3aed;


padding:10px 20px;


border-radius:50px;


font-weight:800;


}




.featured-content h2{


font-size:42px;


margin:25px 0;


line-height:1.3;


}





.featured-content p{


font-size:18px;


color:#64748b;


line-height:1.8;


}





.featured-content a{


display:inline-block;


margin-top:25px;


padding:15px 30px;


border-radius:50px;


background:

linear-gradient(
135deg,
#2563eb,
#8b5cf6
);


color:white;


font-weight:800;


}




.featured-image{


height:300px;


border-radius:35px;


display:flex;


justify-content:center;


align-items:center;


font-size:100px;


background:

linear-gradient(
135deg,
#eef2ff,
#f5f3ff
);


animation:blogFloat 4s infinite;


}









/* ARTICLES */


.latest-blog{


padding:80px 20px;


text-align:center;


}



.latest-blog h2,
.blog-category h2{


font-size:45px;


margin-bottom:50px;


}




.article-grid{


max-width:1150px;


margin:auto;


display:grid;


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


gap:30px;


}





.article-card{


background:white;


padding:40px 30px;


border-radius:35px;


text-align:left;


border:1px solid #eef2ff;


box-shadow:

0 20px 50px rgba(0,0,0,.06);


transition:.35s;


}





.article-card:hover{


transform:translateY(-12px);


box-shadow:

0 30px 70px rgba(99,102,241,.18);


}





.article-icon{


font-size:45px;


margin-bottom:20px;


}




.article-card h3{


font-size:25px;


margin-bottom:15px;


}



.article-card p{


color:#64748b;


line-height:1.7;


}





.article-card a{


color:#6366f1;


font-weight:800;


display:inline-block;


margin-top:15px;


}









/* CATEGORY */


.blog-category{


padding:60px 20px;


text-align:center;


}



.category-grid{


max-width:1000px;


margin:auto;


display:grid;


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


gap:30px;


}





.category-grid div{


background:white;


padding:40px;


border-radius:30px;


font-size:45px;


box-shadow:

0 20px 50px rgba(0,0,0,.06);


transition:.3s;


}



.category-grid div:hover{


transform:translateY(-10px);


}



.category-grid h3{


font-size:22px;


margin-top:15px;


}









/* ANIMATION */


@keyframes blogFloat{


0%,100%{


transform:translateY(0);


}


50%{


transform:translateY(-15px);


}


}









/* MOBILE */


@media(max-width:768px){



.blog-hero h1{


font-size:42px;


}




.blog-search{


flex-direction:column;


background:transparent;


box-shadow:none;


border:none;


gap:15px;


}



.blog-search input{


background:white;


}




.featured-box{


grid-template-columns:1fr;


padding:30px;


}




.featured-content h2{


font-size:32px;


}



.article-grid,
.category-grid{


grid-template-columns:1fr;


}



.latest-blog h2,
.blog-category h2{


font-size:32px;


}



}

/* =========================
 TERMS & LEGAL PAGE
========================= */


.legal-hero{

padding:90px 20px 60px;

text-align:center;

}



.legal-hero h1{

font-size:60px;

font-weight:900;

margin:25px 0;

}



.legal-hero h1 span{

background:

linear-gradient(
135deg,
#2563eb,
#8b5cf6
);

-webkit-background-clip:text;

color:transparent;

}



.legal-hero p{

max-width:700px;

margin:auto;

font-size:18px;

color:#64748b;

line-height:1.7;

}





.legal-content{

padding:40px 20px 80px;

}





.legal-box{

max-width:950px;

margin:auto;


background:white;


padding:55px;


border-radius:40px;


box-shadow:

0 30px 80px rgba(99,102,241,.15);


border:1px solid #eef2ff;


}



.update{

color:#6366f1;

font-weight:800;

}





.legal-box h2{


font-size:28px;


margin-top:35px;


margin-bottom:12px;


}



.legal-box p{


font-size:17px;


line-height:1.8;


color:#64748b;


}




.legal-box ul{


color:#64748b;


line-height:2;


padding-left:25px;


}



.legal-btn{


display:inline-block;


margin-top:30px;


padding:15px 35px;


border-radius:50px;


background:

linear-gradient(
135deg,
#2563eb,
#8b5cf6
);


color:white;


font-weight:800;


}




@media(max-width:768px){


.legal-hero h1{

font-size:40px;

}



.legal-box{

padding:30px;

}



.legal-box h2{

font-size:23px;

}



}

/* =========================
 PREMIUM PRIVACY PAGE
========================= */


.privacy-hero{

padding:90px 20px 60px;

text-align:center;

}



.privacy-hero h1{

font-size:60px;

font-weight:900;

margin:25px 0;

}



.privacy-hero h1 span{

background:

linear-gradient(
135deg,
#2563eb,
#8b5cf6
);

-webkit-background-clip:text;

color:transparent;

}



.privacy-hero p{

max-width:700px;

margin:auto;

font-size:18px;

color:#64748b;

line-height:1.8;

}







.privacy-section{

padding:40px 20px 80px;

}



.privacy-container{

max-width:1000px;

margin:auto;

}





.privacy-card{


display:flex;

gap:25px;

align-items:center;


background:

linear-gradient(
135deg,
#eef2ff,
#f5f3ff
);


padding:35px;


border-radius:35px;


margin-bottom:35px;


}



.privacy-icon{


font-size:55px;


}





.privacy-card h2{


font-size:30px;


}



.privacy-card p{


color:#64748b;

line-height:1.7;


}







.privacy-box{


background:white;


padding:55px;


border-radius:40px;


border:1px solid #eef2ff;


box-shadow:

0 30px 80px rgba(99,102,241,.15);


}



.updated{


color:#6366f1;

font-weight:800;

}



.privacy-box h2{


font-size:28px;

margin-top:35px;

margin-bottom:12px;


}



.privacy-box p{


font-size:17px;

line-height:1.8;

color:#64748b;


}



.privacy-box ul{


color:#64748b;

line-height:2;


}




.privacy-btn{


display:inline-block;


margin-top:25px;


padding:15px 35px;


border-radius:50px;


background:

linear-gradient(
135deg,
#2563eb,
#8b5cf6
);


color:white;


font-weight:800;


}




@media(max-width:768px){


.privacy-hero h1{

font-size:42px;

}


.privacy-box{

padding:30px;

}


.privacy-card{

flex-direction:column;

text-align:center;

}



}

/* =========================
 PREMIUM FOUNDER CARD
========================= */


.founder-card{


position:relative;


max-width:560px;


margin:60px auto;


padding:55px 40px;


background:

rgba(255,255,255,.85);


backdrop-filter:blur(15px);


border-radius:45px;


text-align:center;


overflow:hidden;


border:1px solid rgba(99,102,241,.18);


box-shadow:

0 30px 90px rgba(99,102,241,.20);


animation:

cardEntrance 1s ease;


transition:.5s;


}




.founder-card:hover{


transform:

translateY(-15px);


box-shadow:

0 45px 120px rgba(99,102,241,.35);


}






/* BACKGROUND GLOW */


.card-glow{


position:absolute;


width:280px;


height:280px;


background:

linear-gradient(
135deg,
#6366f1,
#60a5fa
);


border-radius:50%;


filter:blur(80px);


opacity:.25;


top:-120px;


right:-120px;


animation:

glowMove 5s infinite alternate;


}





/* IMAGE */


.founder-image{


position:relative;


z-index:2;


}





.founder-image img{


width:240px;


height:240px;


object-fit:cover;


border-radius:50%;


padding:6px;


background:

linear-gradient(
135deg,
#2563eb,
#8b5cf6
);


box-shadow:


0 20px 60px rgba(99,102,241,.45);


transition:.5s;


animation:

imageFloat 4s infinite;


}




.founder-image img:hover{


transform:

scale(1.08) rotate(3deg);


}







/* BADGE */


.founder-badge{


display:inline-flex;


margin-top:30px;


padding:12px 30px;


border-radius:50px;


background:

linear-gradient(
135deg,
#ede9fe,
#dbeafe
);


color:#6366f1;


font-weight:900;


font-size:15px;


box-shadow:

0 10px 30px rgba(99,102,241,.15);


animation:

badgePulse 2s infinite;


}







/* TEXT */


.founder-card h2{


font-size:42px;


margin:22px 0 8px;


font-weight:900;


color:#111827;


position:relative;


}





.founder-card h3{


font-size:20px;


color:#6366f1;


margin-bottom:20px;


font-weight:700;


}





.founder-card p{


font-size:17px;


line-height:1.8;


color:#64748b;


}





/* TAGS */


.founder-tags{


display:flex;


justify-content:center;


gap:10px;


flex-wrap:wrap;


margin-top:30px;


}



.founder-tags span{


padding:10px 18px;


background:#f8fafc;


border-radius:50px;


font-size:14px;


font-weight:700;


color:#475569;


border:1px solid #e2e8f0;


transition:.3s;


}



.founder-tags span:hover{


background:#eef2ff;


color:#6366f1;


transform:translateY(-5px);


}








/* ANIMATIONS */


@keyframes cardEntrance{


from{


opacity:0;


transform:translateY(60px);


}


to{


opacity:1;


transform:translateY(0);


}


}





@keyframes imageFloat{


0%,100%{


transform:translateY(0);


}


50%{


transform:translateY(-12px);


}


}





@keyframes glowMove{


from{


transform:translate(0,0);


}


to{


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


}


}





@keyframes badgePulse{


0%,100%{


box-shadow:

0 10px 30px rgba(99,102,241,.15);


}


50%{


box-shadow:

0 10px 45px rgba(99,102,241,.35);


}


}








@media(max-width:600px){


.founder-card{


padding:40px 20px;


}



.founder-image img{


width:180px;


height:180px;


}



.founder-card h2{


font-size:32px;


}


}

.buttons{

display:flex;

gap:0;

margin-top:20px;

}


.buttons button{

flex:1;

height:55px;

border:none;

background:#2563eb;

color:white;

font-size:18px;

font-weight:600;

cursor:pointer;

}


.buttons button:first-child{

border-radius:6px 0 0 6px;

}


.buttons button:last-child{

border-radius:0 6px 6px 0;

background:#ffffff;

color:#111;

border:1px solid #111;

}



.buttons small{

font-size:13px;

margin-left:10px;

opacity:.8;

}

/* ===================================
   PROFESSIONAL FAQ SECTION
=================================== */


.professional-faq{

max-width:1100px;

margin:90px auto;

padding:40px 20px;

}



/* FAQ HEADER */

.faq-header{

text-align:center;

margin-bottom:50px;

}



.faq-header span{

display:inline-block;

padding:8px 22px;

background:#eff6ff;

color:#2563eb;

border-radius:50px;

font-size:15px;

font-weight:700;

margin-bottom:20px;

}



.faq-header h1{

font-size:48px;

font-weight:900;

color:#0f172a;

margin-bottom:18px;

line-height:1.2;

}



.faq-header p{

max-width:750px;

margin:auto;

font-size:18px;

color:#64748b;

line-height:1.7;

}






/* FAQ CONTAINER */


.faq-container{

max-width:900px;

margin:auto;

}






/* FAQ CARD */


.faq-card{

background:white;

border-radius:22px;

margin-bottom:18px;

border:1px solid #e2e8f0;

overflow:hidden;

transition:.35s ease;


box-shadow:

0 10px 30px rgba(15,23,42,.06);

}



.faq-card:hover{

transform:translateY(-5px);

border-color:#2563eb;


box-shadow:

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

}







/* QUESTION BUTTON */


.faq-btn{

width:100%;

padding:25px 30px;

background:white;

border:none;

display:flex;

justify-content:space-between;

align-items:center;

cursor:pointer;

font-size:19px;

font-weight:800;

color:#0f172a;

text-align:left;

}



.faq-btn span{

display:flex;

align-items:center;

gap:12px;

}




/* PLUS ICON */


.faq-btn b{


width:38px;

height:38px;

min-width:38px;


display:flex;

align-items:center;

justify-content:center;


background:

linear-gradient(
135deg,
#2563eb,
#7c3aed
);


color:white;

border-radius:50%;


font-size:26px;

font-weight:400;


transition:.35s ease;

}






/* ANSWER */


.faq-content{


max-height:0;

overflow:hidden;


transition:

max-height .45s ease,
padding .45s ease;


background:#f8fafc;


}



.faq-content p{


padding:0 30px;

font-size:16px;

color:#64748b;

line-height:1.8;


}






/* ACTIVE STATE */


.faq-card.active .faq-content{


max-height:200px;


padding:0 0 25px;


}



.faq-card.active .faq-btn b{


transform:rotate(45deg);


background:

linear-gradient(
135deg,
#7c3aed,
#2563eb
);


}






/* OPEN CARD EFFECT */


.faq-card.active{


border-color:#2563eb;


box-shadow:

0 25px 60px rgba(37,99,235,.18);


}








/* ANIMATION */


.faq-card{


animation:faqAnimation .7s ease both;

}



.faq-card:nth-child(2){

animation-delay:.1s;

}


.faq-card:nth-child(3){

animation-delay:.2s;

}


.faq-card:nth-child(4){

animation-delay:.3s;

}


.faq-card:nth-child(5){

animation-delay:.4s;

}



@keyframes faqAnimation{


from{

opacity:0;

transform:translateY(30px);

}


to{

opacity:1;

transform:translateY(0);

}


}








/* MOBILE RESPONSIVE */


@media(max-width:768px){


.professional-faq{

padding:30px 15px;

margin:50px auto;

}



.faq-header h1{

font-size:32px;

}



.faq-header p{

font-size:16px;

}



.faq-btn{

padding:20px;

font-size:16px;

}



.faq-content p{

padding-left:20px;

padding-right:20px;

}


}

/* ==========================
 PREMIUM FAQ DESIGN
========================== */


.faq{

max-width:1200px;

margin:80px auto;

padding:40px 20px;

position:relative;

}



/* Background glow */


.faq::before{

content:"";

position:absolute;

width:300px;

height:300px;

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

filter:blur(100px);

top:0;

left:10%;

z-index:-1;

}




.faq h1{

text-align:center;

font-size:52px;

font-weight:900;

margin-bottom:20px;


background:linear-gradient(
135deg,
#2563eb,
#9333ea
);


-webkit-background-clip:text;

color:transparent;


animation:titleMove 1s ease;

}



.faq > p{

text-align:center;

max-width:700px;

margin:auto;

color:#64748b;

font-size:18px;

margin-bottom:50px;

}







/* FAQ GRID */


.faq-box{

background:

rgba(255,255,255,.75);


backdrop-filter:blur(15px);


border-radius:30px;


padding:30px;


margin-bottom:25px;


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


box-shadow:

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


position:relative;


overflow:hidden;


transition:.45s ease;


animation:cardUp .8s ease both;

}






.faq-box::after{

content:"";


position:absolute;


width:120px;

height:120px;


background:

linear-gradient(
135deg,
#2563eb,
#9333ea
);


border-radius:50%;


right:-50px;


top:-50px;


opacity:.08;


}





.faq-box:hover{


transform:

translateY(-10px);


box-shadow:

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


}







.faq-box h2{


font-size:24px;


font-weight:800;


color:#0f172a;


display:flex;


align-items:center;


gap:12px;


margin-bottom:15px;


}




.faq-box h2::before{


content:"Q";


display:flex;


align-items:center;


justify-content:center;


width:38px;


height:38px;


border-radius:50%;


background:

linear-gradient(
135deg,
#2563eb,
#9333ea
);


color:white;


font-size:18px;


}



.faq-box p{


font-size:16px;


line-height:1.8;


color:#64748b;


padding-left:50px;


}







/* Animation */


@keyframes cardUp{


from{

opacity:0;

transform:translateY(50px);

}


to{

opacity:1;

transform:translateY(0);

}


}





@keyframes titleMove{


from{

opacity:0;

transform:translateY(-30px);

}


to{

opacity:1;

transform:translateY(0);

}


}






/* Different delays */


.faq-box:nth-child(2){

animation-delay:.15s;

}


.faq-box:nth-child(3){

animation-delay:.3s;

}


.faq-box:nth-child(4){

animation-delay:.45s;

}


.faq-box:nth-child(5){

animation-delay:.6s;

}







@media(max-width:768px){


.faq h1{

font-size:34px;

}


.faq-box{

padding:22px;

}


.faq-box h2{

font-size:19px;

}


.faq-box p{

padding-left:0;

}


}

/* SEO CONTENT */

.seo-content{

max-width:1000px;

margin:70px auto;

padding:40px;

background:white;

border-radius:25px;

box-shadow:0 15px 40px rgba(0,0,0,.06);

}


.seo-content h2{

font-size:32px;

margin-bottom:20px;

color:#0f172a;

}


.seo-content p{

font-size:17px;

line-height:1.8;

color:#64748b;

margin-bottom:25px;

}


.seo-content ul{

padding-left:25px;

color:#475569;

line-height:2;

}

/* HOW IT WORKS IMAGE SECTION */


.how-work{

max-width:1200px;

margin:80px auto;

padding:40px 20px;

}



.work-title{

text-align:center;

margin-bottom:50px;

}



.work-title span{

background:#dbeafe;

color:#2563eb;

padding:8px 20px;

border-radius:30px;

font-weight:700;

}



.work-title h2{

font-size:42px;

margin:20px 0;

color:#0f172a;

}



.work-title p{

color:#64748b;

font-size:18px;

}



.work-grid{

display:grid;

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

gap:30px;

}



.work-card{

background:white;

border-radius:25px;

padding:25px;

text-align:center;

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

transition:.3s;

}



.work-card:hover{

transform:translateY(-10px);

}



.work-card img{

width:100%;

height:220px;

object-fit:contain;

border-radius:20px;

}



.work-card h3{

margin-top:25px;

font-size:22px;

color:#0f172a;

}



.work-card p{

color:#64748b;

line-height:1.6;

margin-top:10px;

}



@media(max-width:768px){

.work-grid{

grid-template-columns:1fr;

}

}

/* =====================================
   ONLY TOOL BOX SIZE FIX
===================================== */


/* Main Tool Box */

.tool-card{

    max-width:1100px;

    margin:0 auto;

    padding:35px;

}



/* URL Input Box */

#urlTextarea{

    width:100%;

    min-height:220px;

    max-height:350px;

    font-size:16px;

    padding:20px;

}





/* Tool Heading Spacing */

.tool-heading{

    margin-bottom:20px;

}





/* Buttons Size */

.buttons button{

    height:52px;

}





/* Stats Box */

.stats{

    margin-top:25px;

}





/* Keep rest of website normal */

.hero,
.seo-content,
.features,
.steps,
footer{

    max-width:none;

}

/* =====================================
   SEO CONTENT SECTION DESIGN
===================================== */


.seo-content{

    max-width:1100px;

    margin:80px auto;

    padding:50px 60px;

    background:#ffffff;

    border-radius:28px;

    box-shadow:

    0 20px 60px rgba(0,102,255,0.10);

    border:1px solid #e5edff;

}





.seo-content h2{

    font-size:34px;

    line-height:1.3;

    color:#071426;

    margin-top:35px;

    margin-bottom:18px;

    position:relative;

}





/* First heading spacing */

.seo-content h2:first-child{

    margin-top:0;

}





.seo-content h2::before{

    content:"";

    display:inline-block;

    width:8px;

    height:35px;

    background:

    linear-gradient(
    180deg,
    #0066ff,
    #00a3ff
    );

    border-radius:10px;

    margin-right:15px;

    vertical-align:middle;

}





.seo-content p{

    font-size:17px;

    line-height:1.8;

    color:#475569;

    margin-bottom:20px;

}





.seo-content ul{

    margin-top:20px;

    padding-left:0;

    list-style:none;

}





.seo-content li{

    background:#f5f9ff;

    margin-bottom:12px;

    padding:15px 20px;

    border-radius:14px;

    color:#334155;

    font-size:16px;

    border-left:4px solid #0066ff;

    transition:.3s;

}





.seo-content li:hover{

    transform:translateX(8px);

    background:#eaf3ff;

}






/* Mobile */

@media(max-width:768px){


.seo-content{

    padding:30px 25px;

    margin:40px 15px;

}



.seo-content h2{

    font-size:26px;

}



.seo-content p{

    font-size:15px;

}


}

/* =====================================
   BULK URL OPENER COMPACT TOOL FIX
===================================== */


/* Main Tool Card Size */

.tool-card{

    max-width:900px !important;

    margin:40px auto !important;

    padding:30px !important;

}



/* Tool Header */

.tool-title h2{

    font-size:28px !important;

}


.tool-title p{

    font-size:15px !important;

}



/* Rocket Icon */

.tool-title span{

    font-size:35px !important;

}




/* URL TEXT AREA */

#urlTextarea{

    height:220px !important;

    min-height:220px !important;

    max-height:220px !important;

    padding:18px !important;

    font-size:15px !important;

}





/* Buttons */

.buttons{

    margin-top:20px !important;

    gap:12px !important;

}



.buttons button{

    height:48px !important;

    font-size:15px !important;

}





/* Stats */

.stats{

    margin-top:20px !important;

}



.stats div{

    padding:15px !important;

}



.stats strong{

    font-size:25px !important;

}





/* Header Size Keep Normal */

.header-box{

    max-width:1200px !important;

}



/* Desktop */

@media(min-width:1200px){


.tool-card{

    max-width:950px !important;

}


}

/* =====================================
   PREMIUM UI IMPROVEMENTS
===================================== */


/* Smooth Page Feel */

body{
    scroll-behavior:smooth;
}



/* Tool Card Premium Shadow */

.tool-card{

    transition:all .3s ease;

}


.tool-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 25px 60px rgba(0,102,255,.15);

}





/* Input Focus Better */

#urlTextarea{

    transition:.3s ease;

}



#urlTextarea:focus{

    background:#ffffff;

    border-color:#0066ff;

    box-shadow:
    0 0 0 4px rgba(0,102,255,.12);

}







/* Button Animation */

#openBtn,
#clearBtn{

    transition:.3s ease;

}



#openBtn:hover,
#clearBtn:hover{

    transform:translateY(-3px);

}






/* Stats Cards Upgrade */

.stats div{

    transition:.3s ease;

    border:1px solid #e5edff;

}



.stats div:hover{

    background:#eef6ff;

    transform:translateY(-5px);

}






/* Feature Cards */

.feature-grid div,
.work-card{

    transition:.3s ease;

}



.feature-grid div:hover,
.work-card:hover{

    border-color:#0066ff;

    box-shadow:
    0 15px 40px rgba(0,102,255,.12);

}






/* Hero Background Effect */

.hero{

    position:relative;

    overflow:hidden;

}



.hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:

    radial-gradient(
    circle,
    rgba(0,102,255,.15),
    transparent 70%
    );

    top:-150px;

    right:-150px;

    z-index:-1;

}





/* Heading Highlight */

.hero h1 span{

    background:

    linear-gradient(
    90deg,
    #0066ff,
    #00a3ff
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}







/* Better Links */

a{

    transition:.3s ease;

}







/* Toast Message Better */

.toast{

    background:#071426 !important;

    color:white !important;

    padding:15px 25px !important;

    border-radius:50px !important;

    box-shadow:

    0 10px 30px rgba(0,0,0,.2);

}







/* Mobile Improvement */

@media(max-width:768px){


.tool-card:hover{

    transform:none;

}


}