body{margin:0;font-family:Inter,sans-serif;background:#f7f9fc;color:#111}
.container{max-width:1200px;margin:auto;padding:0 20px}
.narrow{max-width:800px}
section{padding:90px 0}
.light{background:#eef2ff}
h2{text-align:center;margin-bottom:40px}

/* NAV */
.navbar{background:white;position:sticky;top:0;z-index:10;
box-shadow:0 2px 10px rgba(0,0,0,.05)}
.nav-wrap{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
.brand{color:#2563eb;font-weight:800;font-size:22px}
.tag{margin-left:8px;color:#666}

nav a{
margin-left:25px;text-decoration:none;color:#333;
position:relative;
}

nav a::after{
content:'';
position:absolute;
width:0;height:2px;
background:#2563eb;
left:0;bottom:-5px;
transition:.3s;
}

nav a:hover::after{width:100%}

.cta{
background:#2563eb;color:white;padding:10px 18px;border-radius:25px
}

/* HERO */
.hero{background:linear-gradient(#f9fbff,#eef3ff)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero h1{font-size:50px}
.hero span{color:#2563eb}
.hero-img img{width:100%;border-radius:20px}

button{
border:none;padding:14px 24px;border-radius:30px;
cursor:pointer;transition:.3s;
}

button:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(0,0,0,.1);
}

.primary{background:#2563eb;color:white}
.secondary{background:white;border:1px solid #ccc}

.stats{display:flex;gap:20px;margin-top:30px}
.stats div{
background:white;padding:20px;border-radius:12px;
transition:.3s;
}
.stats div:hover{transform:translateY(-5px)}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.process{grid-template-columns:repeat(4,1fr)}

.industry,.card{
background:white;padding:25px;border-radius:18px;
transition:.3s;
}
.industry:hover,.card:hover{
transform:translateY(-8px);
box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.industry img{
width:100%;height:200px;
object-fit:cover;border-radius:12px;
}

.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.price{
background:white;padding:40px;border-radius:18px;
position:relative;transition:.3s;
}
.price:hover{transform:translateY(-8px)}

.highlight{border:2px solid #2563eb}

.badge{
position:absolute;top:-12px;right:20px;
background:#2563eb;color:white;
padding:6px 12px;border-radius:6px
}

.contact{display:flex;flex-direction:column;gap:12px}
.contact input,.contact textarea{
padding:14px;border-radius:10px;border:1px solid #ccc
}

footer{background:#0f172a;color:#ccc;padding:60px 0}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
footer h3,footer h4{color:white}
.copyright{text-align:center;margin-top:40px}

/* MOBILE */
@media(max-width:900px){
.hero-grid,.process,.pricing,.grid{
grid-template-columns:1fr;
}
.stats{flex-direction:column}
.footer-grid{grid-template-columns:1fr 1fr}
}

.popup{
display:none;
position:fixed;
top:0;left:0;
width:100%;height:100%;
background:rgba(0,0,0,.6);
justify-content:center;
align-items:center;
z-index:999;
}

.popup-box{
background:white;
width:90%;
max-width:800px;
height:90%;
border-radius:12px;
position:relative;
overflow:hidden;
}

.popup iframe{
width:100%;
height:100%;
border:none;
}

.close{
position:absolute;
right:15px;
top:10px;
font-size:28px;
cursor:pointer;
z-index:10;
}
@media(max-width:600px){

.nav-wrap{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

nav{
display:flex;
flex-wrap:wrap;
gap:10px;
}

nav a{
margin-left:0;
}

.cta{
align-self:flex-start;
}

}