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


html{
scroll-behavior:smooth;
}


body{

font-family:
Inter,
Segoe UI,
Roboto,
Arial,
sans-serif;

background:#f7faff;
color:#071426;

line-height:1.6;

overflow-x:hidden;

}



a{
text-decoration:none;
color:inherit;
}



img{
max-width:100%;
display:block;
}



.container{

width:min(1180px,92%);
margin:auto;

}





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


.header{

position:sticky;
top:0;
z-index:999;

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

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(0,0,0,.06);

}



.nav{

height:82px;

display:flex;
align-items:center;
justify-content:space-between;
gap:25px;

}



.logo{

font-size:28px;
font-weight:900;

letter-spacing:-1px;

}


.logo span{

color:#157df7;

}



.nav-links{

display:flex;
gap:25px;

}



.nav-links a{

font-weight:600;

color:#26364d;

transition:.25s;

}


.nav-links a:hover{

color:#157df7;

}




.nav-actions{

display:flex;
gap:15px;
align-items:center;

}



.login{

font-weight:700;

}



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


.btn{

display:inline-flex;

align-items:center;
justify-content:center;

padding:14px 28px;

border-radius:999px;

background:#157df7;

color:white;

font-weight:800;

border:none;

transition:.3s;

box-shadow:
0 15px 35px rgba(21,125,247,.25);

}



.btn:hover{

transform:translateY(-3px);

box-shadow:
0 25px 50px rgba(21,125,247,.35);

}



.btn-outline{

display:inline-flex;

padding:13px 26px;

border-radius:999px;

border:2px solid #157df7;

color:#157df7;

font-weight:800;

transition:.3s;

}



.btn-outline:hover{

background:#157df7;
color:white;

}





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


.hero-premium{

position:relative;

padding:
100px 0 90px;

overflow:hidden;

}



.hero-bg{

position:absolute;

inset:0;

background:

radial-gradient(
circle at top right,
#cfe7ff,
transparent 40%
),

radial-gradient(
circle at bottom left,
#e9f3ff,
transparent 40%
);


animation:
gradientMove 12s infinite alternate;

}



@keyframes gradientMove{

from{
transform:scale(1);
}

to{
transform:scale(1.15);
}

}




.hero-content{

position:relative;

display:grid;

grid-template-columns:
1fr 1fr;

gap:60px;

align-items:center;

}



.badge{

display:inline-block;

background:#e7f1ff;

color:#157df7;

padding:8px 16px;

border-radius:999px;

font-weight:800;

margin-bottom:20px;

}



.hero h1{

font-size:

clamp(45px,7vw,80px);

line-height:.95;

letter-spacing:-4px;

margin-bottom:25px;

}



.hero p{

font-size:20px;

max-width:550px;

color:#52627a;

margin-bottom:35px;

}



.hero-buttons{

display:flex;
gap:18px;

}



.trust-mini{

margin-top:45px;

display:flex;

gap:30px;

}



.trust-mini strong{

display:block;

font-size:28px;

}



.hero-image img{

border-radius:35px;

box-shadow:
0 40px 80px rgba(0,0,0,.18);

animation:
float 5s infinite;

}



@keyframes float{

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

}





/* ================= SECTIONS ================= */



.section{

padding:90px 0;

}



h2{

font-size:

clamp(32px,5vw,55px);

letter-spacing:-2px;

margin-bottom:40px;

}




.grid-4{

display:grid;

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

gap:25px;

}



.grid-3{

display:grid;

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

gap:25px;

}





.premium-card,
.product-card,
.vip-card,
.image-card{


background:white;

padding:35px;

border-radius:28px;


border:1px solid rgba(0,0,0,.06);


box-shadow:

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


transition:.35s;

}



.premium-card:hover,
.product-card:hover{

transform:
translateY(-10px);

box-shadow:
0 35px 70px rgba(0,0,0,.12);

}



.premium-card h3,
.product-card h3{

font-size:25px;

margin-bottom:15px;

}



.premium-card a{

color:#157df7;

font-weight:800;

}





/* ================= TRUST ================= */


.trust-section{


background:white;

padding:80px 0;


}



.stats{

display:flex;

gap:40px;

margin-top:40px;

}


.stats h3{

font-size:45px;

color:#157df7;

}





/* ================= SPLIT ================= */


.split{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}



.image-card img{

border-radius:25px;

}





/* ================= DARK BUSINESS ================= */


.dark-section{

padding:100px 0;

background:

linear-gradient(
120deg,
#071426,
#102b55
);

color:white;

text-align:center;

}



.dark-section p{

max-width:600px;

margin:
0 auto 30px;

font-size:20px;

}





/* ================= VIP ================= */


.vip-card{

max-width:650px;

}



.vip-card li{

margin:12px 0;

}




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



footer{

background:#071426;

color:white;

padding-top:70px;

}



.footer-grid{

display:grid;

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

gap:40px;

padding-bottom:50px;

}



footer a{

display:block;

margin:10px 0;

color:#d7e5ff;

}



.copyright{

text-align:center;

padding:25px;

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

}





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



.whatsapp{

position:fixed;

right:25px;

bottom:100px;

width:64px;

height:64px;

border-radius:50%;

background:#25d366;

display:flex;

align-items:center;

justify-content:center;

z-index:999;

box-shadow:
0 20px 40px rgba(0,0,0,.2);

animation:pulse 2s infinite;

}



.whatsapp img{

width:38px;

}




@keyframes pulse{

50%{
transform:scale(1.08);
}

}



#topBtn{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border-radius:50%;

border:none;

background:#157df7;

color:white;

font-size:25px;

cursor:pointer;

display:none;

}





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



@media(max-width:900px){


.nav-links{

display:none;

}



.hero-content,
.split,
.grid-4,
.grid-3,
.footer-grid{

grid-template-columns:1fr;

}



.hero h1{

letter-spacing:-2px;

}



.trust-mini,
.stats{

flex-direction:column;

}



.nav-actions .login{

display:none;

}

}

.pricing-grid{

display:grid;

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

gap:30px;

}

.price-card{

background:white;

padding:40px;

border-radius:30px;

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

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

position:relative;

transition:.3s;

}

.price-card:hover{

transform:translateY(-8px);

}

.featured-price{

border:2px solid #157df7;

transform:scale(1.04);

}

.popular{

position:absolute;

top:-12px;

left:50%;

transform:translateX(-50%);

background:#157df7;

color:white;

padding:6px 14px;

border-radius:999px;

font-size:12px;

font-weight:700;

}

.price{

font-size:52px;

font-weight:900;

color:#157df7;

margin:20px 0;

}

.price-card ul{

list-style:none;

margin:25px 0;

}

.price-card li{

margin:12px 0;

}

.vip-join{

max-width:700px;

}

@media(max-width:900px){

.pricing-grid{

grid-template-columns:1fr;

}

.featured-price{

transform:none;

}

}

/* CONTACT PAGE */

.contact-hero{
padding:140px 0 100px;
background:
linear-gradient(
135deg,
#ffffff 0%,
#f5f9ff 50%,
#eef6ff 100%
);
position:relative;
overflow:hidden;
}

.contact-hero::before{
content:"";
position:absolute;
width:700px;
height:700px;
right:-250px;
top:-250px;
background:
radial-gradient(
circle,
rgba(21,125,247,.12),
transparent 70%
);
}

.contact-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));
gap:24px;
margin-top:40px;
}

.contact-card{
background:white;
padding:30px;
border-radius:24px;
box-shadow:
0 15px 40px rgba(0,0,0,.06);
transition:.3s;
}

.contact-card:hover{
transform:translateY(-6px);
}

.contact-form{
background:white;
padding:40px;
border-radius:30px;
box-shadow:
0 20px 60px rgba(0,0,0,.08);
}

.contact-form input,
.contact-form textarea,
.contact-form select{
width:100%;
padding:16px;
margin-bottom:16px;
border:1px solid #e5e7eb;
border-radius:12px;
}

.contact-form textarea{
height:140px;
resize:none;
}

.info-grid{
display:grid;
grid-template-columns:
1fr 1fr;
gap:30px;
}

.map-wrap{
overflow:hidden;
border-radius:24px;
height:400px;
box-shadow:
0 15px 40px rgba(0,0,0,.08);
}

.service-areas{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(140px,1fr));
gap:15px;
margin-top:30px;
}

.area{
padding:15px;
text-align:center;
background:white;
border-radius:14px;
box-shadow:
0 10px 25px rgba(0,0,0,.05);
}

@media(max-width:900px){

.info-grid{
grid-template-columns:1fr;
}

}
/* ==========================
    Counters
========================== */


.stats{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}


.stats div{

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

backdrop-filter:
blur(15px);

padding:35px;

border-radius:28px;

text-align:center;

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

transition:.3s;

}


.stats div:hover{

transform:
translateY(-8px);

}



.stats h3{

font-size:48px;

margin:0;

color:#157df7;

font-weight:900;

}

/* ==========================
    Forms
========================== */


.repair-form,
.contact-form{

max-width:650px;

margin:
40px auto;

background:white;

padding:45px;

border-radius:32px;

box-shadow:

0 25px 70px rgba(0,0,0,.08);

display:flex;

flex-direction:column;

gap:18px;

}



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


width:100%;

padding:17px;

border-radius:16px;

border:
1px solid #e5e7eb;

font-size:16px;

outline:none;

transition:.25s;

}



.repair-form textarea,
.contact-form textarea{

min-height:150px;

resize:none;

}



.repair-form input:focus,
.repair-form textarea:focus,
.repair-form select:focus{


border-color:#157df7;

box-shadow:
0 0 0 4px rgba(21,125,247,.12);

}



.repair-form button,
.contact-form button{

margin-top:10px;

}



/* center forms */

#quote,
#join{

display:flex;

justify-content:center;

flex-direction:column;

align-items:center;

}




@media(max-width:768px){

.stats h3{

font-size:38px;

}

.repair-form,
.contact-form{

padding:25px;

}

}
/* =================================
   CustomWebDev Developer Badge
================================= */


.developer-badge{

display:flex;

justify-content:center;

margin-top:35px;

padding-bottom:25px;

}



.developer-badge a{

text-decoration:none;

position:relative;

display:inline-flex;

align-items:center;

justify-content:center;

padding:12px 28px;

border-radius:999px;

background:

linear-gradient(
135deg,
rgba(255,255,255,.9),
rgba(245,245,245,.7)
);

border:

1px solid rgba(255,255,255,.6);

box-shadow:

0 15px 35px rgba(0,0,0,.15),
inset 0 0 20px rgba(255,255,255,.7);

transition:.35s ease;

overflow:hidden;

}



.developer-badge a::before{

content:"";

position:absolute;

inset:0;

background:

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

transform:
translateX(-120%);

transition:.6s;

}



.developer-badge a:hover::before{

transform:
translateX(120%);

}



.developer-badge span{

font-size:18px;

font-weight:900;

letter-spacing:1px;

color:#ff7a00;

text-shadow:

-1px -1px 0 #111,
1px -1px 0 #111,
-1px 1px 0 #111,
2px 2px 0 #111,
0 5px 15px rgba(255,122,0,.35);

}



.developer-badge a:hover{

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

box-shadow:

0 25px 50px rgba(255,122,0,.25);

}

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


.faq{

    display:flex;
    flex-direction:column;
    gap:16px;

    max-width:900px;
    margin:40px auto;

}


/* QUESTION */

.faq button{

    width:100%;

    text-align:left;

    padding:24px 65px 24px 28px;

    border:none;

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        #ffffff,
        #f4f8ff
    );


    color:#071426;

    font-size:18px;
    font-weight:800;


    cursor:pointer;

    position:relative;


    box-shadow:

    0 15px 35px rgba(21,125,247,.10);


    transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;

}



.faq button:hover{

    transform:translateY(-4px);

    box-shadow:

    0 22px 45px rgba(21,125,247,.18);

}



/* ICON */

.faq button::after{

    content:"+";

    position:absolute;

    right:24px;

    top:50%;

    transform:
    translateY(-50%);


    width:36px;

    height:36px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:#157df7;

    color:white;


    font-size:25px;

    font-weight:500;


    transition:.3s;

}




.faq button.active{

    background:

    linear-gradient(
    135deg,
    #157df7,
    #0b63d8
    );


    color:white;

}




.faq button.active::after{

    content:"−";

    background:white;

    color:#157df7;

    transform:
    translateY(-50%)
    rotate(180deg);

}




/* ANSWER */

.faq div{


    margin-top:-8px;


    max-height:0;

    overflow:hidden;


    opacity:0;


    padding:

    0 28px;


    background:

    linear-gradient(
    135deg,
    rgba(21,125,247,.12),
    rgba(255,255,255,.95)
    );


    border-left:

    5px solid #157df7;


    border-radius:

    0 0 22px 22px;



    color:#334155;


    font-size:16px;

    line-height:1.9;



    box-shadow:

    inset 0 0 30px rgba(21,125,247,.06);



    transition:

    max-height .45s ease,
    opacity .35s ease,
    padding .35s ease,
    margin .35s ease;

    box-sizing:border-box;


}




.faq div.open{


    opacity:1;


    padding:

    22px 28px 26px;


    margin-top:-10px;
    max-height:500px !important;


}



/* MOBILE */

@media(max-width:700px){


.faq button{

    font-size:16px;

    padding:

    20px 55px 20px 20px;

}



.faq div.open{

    padding:

    18px 20px;

}


}