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

body{
font-family:'Inter',sans-serif;
background:#0F172A;
color:#fff;
overflow-x:hidden;
}

.container{
width:min(92%,1400px);
margin:auto;
padding-left:12px;
padding-right:12px;
}

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

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

.loader{
position:fixed;
inset:0;
background:#0F172A;
display:flex;
align-items:center;
justify-content:center;
z-index:99999;
transition:.6s;
}

.loader.hide{
opacity:0;
pointer-events:none;
}

.loader-logo{
font-size:42px;
font-weight:900;
background:linear-gradient(90deg,#FACC15,#F97316);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.popup-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.7);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition:.4s;
z-index:9999;
padding:20px;
}

.popup-overlay.active{
opacity:1;
visibility:visible;
}

.popup-box{
width:100%;
max-width:420px;
background:#fff;
color:#111827;
padding:40px 28px;
border-radius:30px;
text-align:center;
position:relative;
box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.popup-box h3{
font-size:32px;
margin-bottom:12px;
font-weight:900;
}

.popup-box p{
line-height:1.8;
color:#475569;
}

.popup-close{
position:absolute;
right:16px;
top:10px;
background:none;
border:none;
font-size:34px;
cursor:pointer;
}

.popup-btn{
height:60px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
background:linear-gradient(135deg,#22C55E,#16A34A);
font-weight:800;
color:#fff;
margin-top:20px;
}

header{
position:absolute;
top:0;
left:0;
width:100%;
padding:24px 0;
z-index:100;
}

.header-wrap{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}

.logo-area h1{
font-size:56px;
font-weight:900;
background:linear-gradient(90deg,#FACC15,#F97316);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
line-height:1;
}

.logo-area h2{
font-size:13px;
font-weight:700;
letter-spacing:2px;
line-height:1.5;
max-width:260px;
color:#CBD5E1;
text-transform:uppercase;
margin-top:2px;
}

.line{
width:120px;
height:4px;
background:linear-gradient(90deg,#FACC15,#F97316);
margin:10px 0;
border-radius:20px;
}

.logo-area span{
margin-top:18px;
padding:14px 24px;
border-radius:18px;
background:linear-gradient(135deg,#FACC15,#F97316);
display:inline-flex;
align-items:center;
justify-content:center;
font-size:20px;
font-weight:900;
color:#0F172A;
box-shadow:0 10px 30px rgba(249,115,22,.35);
}

.top-cta{
padding:16px 24px;
border-radius:18px;
background:linear-gradient(135deg,#EF4444,#DC2626);
color:#fff;
font-weight:800;
box-shadow:0 10px 30px rgba(239,68,68,.28);
transition:.3s;
}

.top-cta:hover{
transform:translateY(-2px);
}

.hero{
padding:220px 0 70px;
position:relative;
overflow:hidden;
}

.hero-glow{
position:absolute;
top:-200px;
left:-150px;
width:500px;
height:500px;
background:#F97316;
opacity:.12;
filter:blur(120px);
pointer-events:none;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.hero-badge{
padding:16px 24px;
border-radius:100px;
background:rgba(255,255,255,.08);
display:inline-block;
margin-bottom:24px;
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.05);
}

.hero h1{
font-size:72px;
line-height:.92;
letter-spacing:-3px;
margin-bottom:24px;
font-weight:900;
}

.hero p{
font-size:18px;
line-height:1.9;
color:#CBD5E1;
margin-bottom:32px;
max-width:640px;
}

.hero-buttons{
display:flex;
gap:18px;
}

.btn{
padding:18px 26px;
border-radius:18px;
font-weight:800;
transition:.3s;
}

.btn:hover{
transform:translateY(-3px);
}

.btn-primary{
background:linear-gradient(135deg,#22C55E,#16A34A);
color:#fff;
box-shadow:0 10px 30px rgba(34,197,94,.25);
}

.btn-dark{
background:linear-gradient(135deg,#EF4444,#DC2626);
border:none;
color:#fff;

box-shadow:
0 10px 30px rgba(239,68,68,.28);

transition:.3s;
}

.btn-dark:hover{
transform:translateY(-3px) scale(1.01);

box-shadow:
0 18px 40px rgba(239,68,68,.38);
}

.hero-image-wrap{
overflow:hidden;
border-radius:36px;
position:relative;
}

.hero-image{
height:620px;
width:100%;
object-fit:cover;
transition:.6s;
}

.hero-image:hover{
transform:scale(1.04);
}

.services{
padding:90px 0 30px;
}

.section-head{
text-align:center;
margin-bottom:60px;
}

.section-head span{
color:#FACC15;
font-weight:800;
letter-spacing:3px;
}

.section-head h2{
font-size:62px;
line-height:1.1;
margin-top:18px;
font-weight:900;
}

.services-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}

.service-card{
position:relative;
height:340px;
overflow:hidden;
border-radius:30px;
transition:.4s ease;
}

.service-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 50px rgba(0,0,0,.45);
}

.service-card img{
width:100%;
height:100%;
object-fit:cover;
transition:.5s;
}

.service-card:hover img{
transform:scale(1.08);
}

.service-overlay{
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.2));
}

.service-content{
position:absolute;
left:24px;
right:24px;
bottom:24px;
z-index:2;
}

.service-content h3{
font-size:28px;
margin-bottom:8px;
font-weight:800;
}

.service-content p{
color:#CBD5E1;
}

.info-sections{
padding:10px 0 90px;
}

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

.info-card{
position:relative;
overflow:hidden;
background:linear-gradient(
145deg,
rgba(255,255,255,.06),
rgba(255,255,255,.03)
);

backdrop-filter:blur(14px);

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

border-radius:32px;

padding:42px;

box-shadow:0 10px 40px rgba(0,0,0,.35);
}

.info-card h3{
font-size:32px;
margin-bottom:30px;
font-weight:900;
}

.info-card ul{
list-style:none;
display:flex;
flex-direction:column;
gap:18px;
}

.info-card li{
position:relative;
padding-left:34px;
line-height:1.8;
color:#E2E8F0;
}

.info-card li::before{
content:'✓';
position:absolute;
left:0;
width:22px;
height:22px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#FACC15,#F97316);
color:#111827;
font-size:12px;
font-weight:900;
}

.faq-item{
padding-bottom:22px;
margin-bottom:22px;
border-bottom:1px solid rgba(255,255,255,.08);
}

.faq-item:last-child{
border:none;
margin:0;
padding:0;
}

.faq-item h4{
font-size:20px;
margin-bottom:10px;
font-weight:800;
}

.faq-item p{
line-height:1.8;
color:#CBD5E1;
}

.call-btn,
.whatsapp-btn{
position:fixed;
right:18px;
width:68px;
height:68px;
border-radius:22px;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
color:#fff;
z-index:999;
box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.call-btn{
bottom:100px;
background:linear-gradient(135deg,#F97316,#EA580C);
}

.whatsapp-btn{
bottom:18px;
background:linear-gradient(135deg,#25D366,#16A34A);
}

footer{
padding:40px 0;
text-align:center;
color:#94A3B8;
}

.reveal{
opacity:0;
transform:translateY(40px);
transition:.7s;
}

.reveal.active{
opacity:1;
transform:none;
}

@media(max-width:1100px){

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

}

@media(max-width:768px){

.container{
width:100%;
padding-left:18px;
padding-right:18px;
}

header{
padding:18px 0;
}

.header-wrap{
align-items:flex-start;
gap:14px;
}

.logo-area h1{
font-size:42px;
line-height:1;
}

.logo-area h2{
font-size:10px;
letter-spacing:1.5px;
max-width:190px;
}

.logo-area span{
padding:10px 16px;
font-size:15px;
border-radius:14px;
}

.top-cta{
padding:12px 14px;
font-size:12px;
border-radius:14px;
white-space:nowrap;
}

.hero{
padding-top:185px;
padding-bottom:20px;
}

.hero-grid{
display:flex;
flex-direction:column;
gap:14px;
}

.hero-badge{
display:flex;
align-items:center;
width:100%;
padding:16px 20px;
border-radius:20px;
font-size:12px;
font-weight:700;
line-height:1.7;
margin-bottom:28px;
margin-top:10px;

background:linear-gradient(
135deg,
rgba(250,204,21,.16),
rgba(249,115,22,.08)
);

border:1px solid rgba(250,204,21,.22);

color:#FFF7D6;

box-shadow:
0 10px 30px rgba(249,115,22,.12),
inset 0 1px 0 rgba(255,255,255,.05);

backdrop-filter:blur(10px);
}

.hero-content{
position:relative;
z-index:2;
}

.hero h1{
font-size:28px;
line-height:1.02;
letter-spacing:-1px;
margin-bottom:22px;
max-width:95%;
}

.hero p{
font-size:15px;
line-height:1.8;
margin-bottom:24px;
}

.hero-buttons{
flex-direction:column;
gap:12px;
}

.btn{
width:100%;
text-align:center;
padding:15px;
font-size:15px;
}

.hero-image{
height:300px;
}

.section-head{
margin-bottom:40px;
}

.section-head h2{
font-size:32px;
}

.services-grid,
.info-grid{
grid-template-columns:1fr;
gap:18px;
}

.service-card{
height:240px;
}

.service-content h3{
font-size:22px;
}

.info-card{
padding:30px 22px;
border-radius:26px;
}

.info-card h3{
font-size:24px;
}

.call-btn,
.whatsapp-btn{
width:56px;
height:56px;
font-size:22px;
right:14px;
}

.call-btn{
bottom:78px;
}

.whatsapp-btn{
bottom:14px;
}

}