:root{--navy:#0d2a52;--green:#1b8a3a;--orange:#f07a1a;--text:#283445}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;color:var(--text);line-height:1.55;background:#fff}
img{max-width:100%;display:block}a{text-decoration:none;color:inherit}
.container{width:min(1240px,94%);margin:auto}
.btn{display:inline-flex;gap:10px;align-items:center;color:#fff;font-weight:600;padding:12px 24px;border-radius:5px;transition:.25s}
.btn-orange{background:var(--orange)}.btn-orange:hover{background:#d9660c;transform:translateY(-2px)}
.btn-outline{display:inline-flex;gap:8px;align-items:center;border:1.5px solid var(--green);color:var(--green);border-radius:30px;padding:5px 18px;font-size:13px;font-weight:600;transition:.25s}
.btn-outline:hover{background:var(--green);color:#fff}
a:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:90px}
.logo img{height:74px}
.nav{display:flex;gap:26px}.nav a{font-size:14px;font-weight:500;color:var(--navy);position:relative;padding:6px 0}
.nav a.active,.nav a:hover{color:var(--green)}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--green)}
.btn-call{background:var(--green);color:#fff;font-weight:600;padding:12px 22px;border-radius:6px;display:flex;gap:10px;align-items:center}
.menu-toggle{display:none;background:none;border:0;font-size:24px;color:var(--navy)}
.hero{background:linear-gradient(90deg,#fdf6ea 0%,rgba(253,246,234,.92) 34%,rgba(253,246,234,0) 52%),url(../images/hero.jpg) 75% center/60% 100% no-repeat,#fdf2e0;padding:40px 0 80px;position:relative}
.hero-inner{position:relative;min-height:330px}
.hero h1{font-family:'Montserrat';font-size:48px;font-weight:800;line-height:1.05;color:var(--navy)}
.hero h1 span{color:var(--green)}
.hero h2{font-family:'Montserrat';font-size:24px;color:var(--navy);margin:4px 0 10px}
.hero-text p{font-size:15px;margin-bottom:16px}
.script{position:absolute;left:36%;top:6px;font-family:'Caveat',cursive;font-size:36px;color:var(--green);line-height:1;transform:rotate(-8deg)}
.hero-badges{position:absolute;right:-3%;top:0;list-style:none;display:grid;gap:8px}
.hero-badges li{background:#fff;border-radius:40px 0 0 40px;display:flex;align-items:center;gap:12px;padding:6px 26px 6px 6px;font-size:12px;font-weight:500;box-shadow:0 4px 14px rgba(0,0,0,.12);line-height:1.3}
.hero-badges i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:20px;border:3px solid #fff;box-shadow:0 0 0 2px #ddd}
.o{background:var(--orange)}.g{background:#38a83c}.b{background:#1667d9}.p{background:#7b2fa8}
.service-bar{display:grid;grid-template-columns:repeat(6,1fr);background:#fff;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.1);margin-top:-60px;position:relative;padding:16px 0}
.service-bar div{text-align:center;font-size:13px;font-weight:500;color:var(--navy);border-left:1px solid #e6e9ee}
.service-bar div:first-child{border:0}.service-bar i{display:block;font-size:30px;margin-bottom:6px}
.section{padding:22px 0}
.sec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
h2{font-family:'Montserrat';font-size:28px;font-weight:700;color:var(--navy)}
h2 span{color:var(--green)}
.sec-head h2{position:relative}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:-4px;width:38px;height:3px;background:var(--green)}
.sol-grid,.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sol{background:#fff;border-radius:6px;box-shadow:0 3px 16px rgba(0,0,0,.08);padding-bottom:16px;text-align:center;position:relative;overflow:hidden}
.sol img{width:100%;aspect-ratio:212/95;object-fit:cover}
.badge{position:relative;margin:-24px 0 0 14px;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--green);display:grid;place-items:center;font-size:20px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.sol h4{font-family:'Montserrat';color:var(--navy);font-size:17px;text-align:left;margin:4px 16px 4px;line-height:1.2}
.sol p{text-align:left;font-size:13px;margin:0 16px 12px}
.prod{background:#fff;border-radius:6px;box-shadow:0 3px 16px rgba(0,0,0,.08);padding:12px 16px 16px}
.prod img{width:100%;aspect-ratio:190/92;object-fit:contain}
.prod h4{font-family:'Montserrat';color:var(--navy);font-size:17px}.prod p{font-size:13px}.prod p.g{color:var(--green);background:none}
.guidance{display:grid;grid-template-columns:24% 1fr 20%;background:linear-gradient(90deg,#0b2546,#0e3566);color:#fff;align-items:center;margin-top:10px}
.eng{height:100%;width:100%;object-fit:cover}
.g-mid{padding:20px 3%}
.guidance h2{color:#fff;font-size:26px}.guidance h2 span{color:#f6c02a}
.steps{list-style:none;display:flex;justify-content:space-between;margin-top:16px}
.steps li{text-align:center;font-size:13px;position:relative;flex:1}
.steps li:not(:last-child)::after{content:"→";position:absolute;right:-8px;top:18px;font-size:26px;color:#38c25a}
.steps i{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin:0 auto 6px;font-size:24px;border:3px solid #fff}
.survey{background:var(--green);padding:18px;margin:10px 10px 10px 0;border-radius:6px}
.survey h3{font-size:19px;line-height:1.2;margin-bottom:8px}
.survey ul{list-style:none;font-size:12px;margin-bottom:10px}
.survey li::before{content:"✔";margin-right:8px;background:#fff;color:var(--green);border-radius:50%;padding:0 3px;font-size:10px}
.survey .btn{width:100%;justify-content:center;padding:9px}
.proj-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.proj-grid div{background:#fff;text-align:center;box-shadow:0 3px 14px rgba(0,0,0,.08);border-radius:4px;overflow:hidden;padding-bottom:6px;font-size:12px}
.proj-grid img{width:100%;aspect-ratio:168/95;object-fit:cover;margin-bottom:6px}
.proj-grid b,.proj-grid small{display:block;font-weight:500}
.testi-wrap{display:grid;grid-template-columns:1fr 33%;gap:12px;align-items:center;padding:10px 0}
.testi-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.testi{display:flex;gap:14px;padding:16px;background:#fff;border-radius:6px;box-shadow:0 3px 14px rgba(0,0,0,.08)}
.testi img{width:68px;height:68px;border-radius:50%;object-fit:cover;flex-shrink:0}
.stars{color:#f2a614;font-size:18px;letter-spacing:3px}.testi p{font-size:12.5px}.testi b{font-size:12px}
.clean{border-radius:6px;width:100%}
.footer{background:#0b2546;color:#fff;padding:22px 0}
.footer-inner{display:grid;grid-template-columns:24% 26% 1fr;gap:24px;align-items:center}
.contact{border-left:1px solid rgba(255,255,255,.2);border-right:1px solid rgba(255,255,255,.2);padding:0 22px}
.contact h4{font-size:17px;margin-bottom:4px}
.contact a,.contact p{display:flex;gap:12px;font-size:13px;margin:5px 0}
.f-feats{display:grid;grid-template-columns:repeat(4,1fr)}
.f-feats div{text-align:center;font-size:13px;border-left:1px solid rgba(255,255,255,.2)}
.f-feats div:first-child{border:0}.f-feats i{display:block;font-size:30px;margin-bottom:8px}
.wa-float{position:fixed;right:20px;bottom:20px;width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;font-size:28px;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:60}
@media(max-width:1024px){
  .nav{position:absolute;top:90px;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:10px 5%;display:none}
  .nav.open{display:flex}.nav a{padding:12px 0;border-bottom:1px solid #eee}
  .menu-toggle{display:block}.btn-call{display:none}
  .hero{background:linear-gradient(rgba(253,246,234,.88),rgba(253,246,234,.92)),url(../images/hero.jpg) center/cover}
  .hero-badges,.script{display:none}
  .service-bar{grid-template-columns:repeat(3,1fr);row-gap:16px}.service-bar div:nth-child(4){border:0}
  .sol-grid,.prod-grid{grid-template-columns:1fr 1fr}.proj-grid{grid-template-columns:repeat(3,1fr)}
  .guidance{grid-template-columns:1fr 1fr}.g-mid{grid-column:span 2;order:-1}.survey{margin:10px}
  .testi-wrap,.footer-inner{grid-template-columns:1fr}.contact{border:0;padding:0}
}
@media(max-width:680px){
  .hero h1{font-size:38px}.sol-grid,.prod-grid,.testi-grid{grid-template-columns:1fr}
  .service-bar,.proj-grid{grid-template-columns:repeat(2,1fr)}.service-bar div{border:0}
  .guidance{grid-template-columns:1fr}.g-mid{grid-column:auto}.steps{flex-wrap:wrap;row-gap:14px}.steps li{flex:0 0 50%}.steps li::after{display:none}
  .sec-head{flex-direction:column;align-items:flex-start;gap:10px}.f-feats{grid-template-columns:1fr 1fr;row-gap:16px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
