@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root{
 --navy:#061b38;--navy2:#0a315f;--blue:#0874bd;--cyan:#27a3df;
 --green:#74bd38;--lime:#a1dc58;--white:#fff;--ink:#10243e;--muted:#667991;
 --soft:#f3f8fb;--line:rgba(6,27,56,.10);--glass:rgba(255,255,255,.78);
 --shadow:0 30px 90px rgba(6,27,56,.15);--shadow2:0 16px 45px rgba(6,27,56,.10);
 --ease:cubic-bezier(.16,1,.3,1)
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"DM Sans",sans-serif;color:var(--ink);background:#fff;line-height:1.7;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9997;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9996;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18),transparent 65%);opacity:.35}
a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
.container{width:min(1200px,calc(100% - 42px));margin:auto}
.section{padding:130px 0;position:relative}.soft{background:var(--soft)}.dark{background:var(--navy);color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.2em;font-size:.69rem;font-weight:800;color:var(--blue);margin-bottom:18px}.eyebrow:before{content:"";width:34px;height:2px;background:var(--green);box-shadow:0 0 12px rgba(116,189,56,.45)}
.dark .eyebrow{color:#9edbff}
.title{font-family:Manrope,sans-serif;font-size:clamp(2.5rem,5.3vw,4.8rem);line-height:.98;letter-spacing:-.065em;max-width:850px}.title span{color:var(--green)}
.copy{max-width:700px;color:var(--muted);font-size:1.03rem;margin-top:22px}.dark .copy{color:#b9c8da}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:80px;align-items:center}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.actions{display:flex;gap:12px;flex-wrap:wrap}

/* premium buttons */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 25px;border-radius:16px;font-weight:800;border:1px solid transparent;overflow:hidden;transition:.45s var(--ease);cursor:pointer}
.btn:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.35),transparent 70%);transform:translateX(-130%);transition:.7s}.btn:hover:before{transform:translateX(130%)}
.btn:after{content:"";position:absolute;inset:2px;border-radius:14px;opacity:0;transition:.4s}.btn:hover:after{opacity:1}
.btn>*{position:relative;z-index:2}.btn-primary{background:linear-gradient(135deg,var(--navy),#104e82);color:#fff;box-shadow:0 16px 35px rgba(6,27,56,.2)}.btn-primary:hover{transform:translateY(-5px) scale(1.015);box-shadow:0 24px 50px rgba(8,116,189,.28)}
.btn-green{background:linear-gradient(135deg,var(--green),#9bda55);color:var(--navy);box-shadow:0 16px 35px rgba(116,189,56,.25)}.btn-green:hover{transform:translateY(-5px) scale(1.015);box-shadow:0 25px 55px rgba(116,189,56,.35)}
.btn-outline{border-color:rgba(6,27,56,.16);background:rgba(255,255,255,.65);color:var(--navy)}.btn-outline:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-5px)}
.btn-light{background:#fff;color:var(--navy);box-shadow:0 15px 35px rgba(0,0,0,.16)}.btn-light:hover{transform:translateY(-5px)}
.btn-white-outline{border-color:rgba(255,255,255,.28);color:#fff}.btn-white-outline:hover{background:#fff;color:var(--navy);transform:translateY(-4px)}

/* new loader */
.preloader{position:fixed;inset:0;z-index:10000;background:#04162e;display:grid;place-items:center;overflow:hidden;transition:1s var(--ease)}
.preloader:before{content:"";position:absolute;width:700px;height:700px;border-radius:50%;border:1px solid rgba(116,189,56,.16);animation:loaderOrbit 7s linear infinite}
.preloader:after{content:"";position:absolute;width:440px;height:440px;border-radius:50%;border:1px solid rgba(39,163,223,.16);animation:loaderOrbit 5s linear infinite reverse}
.preloader.done{opacity:0;visibility:hidden;transform:scale(1.04)}
.loader{position:relative;z-index:2;text-align:center;color:#fff}.loader img{width:145px;height:145px;object-fit:contain;filter:drop-shadow(0 20px 45px rgba(0,0,0,.35));animation:logoPulse 2s ease-in-out infinite}.loader h2{font-family:Manrope;font-size:1.35rem;letter-spacing:.02em;margin-top:17px}.loader p{color:#9db0c8;font-size:.68rem;letter-spacing:.27em;text-transform:uppercase;margin-top:6px}.loader-progress{width:220px;height:2px;background:rgba(255,255,255,.12);margin:25px auto 0;overflow:hidden;border-radius:20px}.loader-progress i{display:block;width:42%;height:100%;background:linear-gradient(90deg,var(--green),#fff,var(--blue));animation:loaderBar 1.2s infinite}
@keyframes loaderBar{from{transform:translateX(-150%)}to{transform:translateX(350%)}}@keyframes logoPulse{50%{transform:scale(1.04);filter:drop-shadow(0 25px 55px rgba(116,189,56,.25))}}@keyframes loaderOrbit{to{transform:rotate(360deg)}}

/* redesigned header */
.header{position:fixed;top:0;left:0;right:0;z-index:5000;padding:16px 0;transition:.5s var(--ease)}
.nav-shell{background:rgba(255,255,255,.70);backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.8);box-shadow:0 12px 45px rgba(6,27,56,.07);border-radius:22px;padding:7px 9px 7px 16px}
.header.scrolled .nav-shell{background:rgba(255,255,255,.92);box-shadow:0 16px 55px rgba(6,27,56,.12)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:9px;min-width:205px}.brand img{width:53px;height:53px;object-fit:contain}.brand b{font-family:Manrope;font-size:1rem;line-height:1}.brand small{display:block;color:var(--blue);font-size:.53rem;letter-spacing:.19em;margin-top:5px}
.navlinks{display:flex;align-items:center;gap:5px;padding:5px;background:rgba(243,248,251,.85);border:1px solid var(--line);border-radius:15px}.navlinks a{position:relative;padding:10px 15px;border-radius:11px;font-size:.82rem;font-weight:800;color:#40536b;transition:.3s}.navlinks a:hover,.navlinks a.active{background:#fff;color:var(--navy);box-shadow:0 6px 18px rgba(6,27,56,.08)}.navlinks a.active:before{content:"";position:absolute;bottom:4px;left:50%;width:5px;height:5px;background:var(--green);border-radius:50%;transform:translateX(-50%)}
.navbtns{display:flex;gap:8px}.navbtns .btn{min-height:46px;padding:0 18px;border-radius:13px;font-size:.78rem}.menu{display:none;border:0;background:none;font-size:1.55rem;color:var(--navy)}
.mobile-menu{display:none}

/* hero */
.hero{min-height:100vh;padding:165px 0 105px;display:flex;align-items:center;overflow:hidden;background:radial-gradient(circle at 85% 18%,rgba(116,189,56,.18),transparent 24%),radial-gradient(circle at 5% 80%,rgba(8,116,189,.13),transparent 28%),linear-gradient(135deg,#fff,#f1f7fa)}
.hero:before{content:"";position:absolute;width:760px;height:760px;border:1px solid rgba(8,116,189,.10);border-radius:50%;right:-330px;top:-190px}.hero:after{content:"";position:absolute;width:500px;height:500px;border:1px solid rgba(116,189,56,.12);border-radius:50%;left:-340px;bottom:-300px}
.hero h1{font-family:Manrope;font-size:clamp(3.5rem,7vw,7.1rem);line-height:.88;letter-spacing:-.075em;max-width:900px}.hero h1 em{font-style:normal;color:var(--blue)}.hero h1 strong{color:var(--green)}
.hero p{max-width:650px;color:var(--muted);font-size:1.08rem;margin:30px 0 35px}.proof{display:flex;align-items:center;gap:16px;margin-top:43px}.avatars{display:flex}.avatars i{width:37px;height:37px;border:3px solid #fff;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--blue));margin-left:-9px}.avatars i:first-child{margin-left:0}.proof small{color:var(--muted)}
.hero-visual{height:620px;position:relative}.hero-photo{position:absolute;inset:15px 0 0 60px;border-radius:42px;overflow:hidden;border:7px solid rgba(255,255,255,.78);box-shadow:0 50px 110px rgba(6,27,56,.22);transform:rotate(1.5deg);transition:.7s var(--ease)}.hero-photo:hover{transform:rotate(0) translateY(-8px) scale(1.015);box-shadow:0 60px 130px rgba(8,116,189,.23)}.hero-photo img{width:100%;height:100%;object-fit:cover}.hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(6,27,56,.78))}
.floating-stat{position:absolute;left:0;bottom:65px;background:rgba(255,255,255,.88);backdrop-filter:blur(15px);padding:20px 23px;border:1px solid rgba(255,255,255,.8);border-radius:20px;box-shadow:var(--shadow);z-index:2;animation:float 5s ease-in-out infinite}.floating-stat b{font-family:Manrope;font-size:1.75rem;display:block}.floating-stat span{font-size:.73rem;color:var(--muted)}
@keyframes float{50%{transform:translateY(-13px)}}

/* marquee */
.marquee{background:var(--navy);color:#fff;overflow:hidden;padding:18px 0;border-block:1px solid rgba(255,255,255,.08)}.track{display:flex;width:max-content;animation:marquee 26s linear infinite}.marquee span{padding:0 27px;font-size:.71rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}.marquee i{font-style:normal;color:var(--green);margin-left:22px}@keyframes marquee{to{transform:translateX(-50%)}}

/* advanced cards */
.card{background:linear-gradient(145deg,#fff,#f8fbfd);border:1px solid rgba(6,27,56,.09);border-radius:28px;padding:32px;box-shadow:var(--shadow2);transition:.55s var(--ease);position:relative;overflow:hidden;transform-style:preserve-3d}
.card:before{content:"";position:absolute;width:230px;height:230px;border-radius:50%;right:-115px;top:-115px;background:radial-gradient(circle,rgba(116,189,56,.22),transparent 67%);transition:.7s var(--ease)}
.card:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.7),transparent 60%);transform:translateX(-130%);transition:.8s var(--ease)}
.card:hover{transform:translateY(-12px) rotateX(2deg) rotateY(-2deg);box-shadow:0 35px 85px rgba(6,27,56,.17);border-color:rgba(8,116,189,.18)}.card:hover:before{transform:scale(1.55)}.card:hover:after{transform:translateX(130%)}
.icon{width:61px;height:61px;border-radius:18px;background:linear-gradient(145deg,#e8f5fb,#fff);display:grid;place-items:center;color:var(--blue);font-size:1.45rem;margin-bottom:24px;box-shadow:inset 0 0 0 1px rgba(8,116,189,.09),0 10px 25px rgba(8,116,189,.08);transition:.45s var(--ease)}.card:hover .icon{background:linear-gradient(145deg,var(--blue),var(--navy));color:#fff;transform:rotate(-8deg) scale(1.08)}
.card h3{font-family:Manrope;font-size:1.22rem;margin-bottom:10px}.card p{color:var(--muted);font-size:.92rem}.link{display:inline-flex;margin-top:19px;color:var(--blue);font-weight:800;font-size:.85rem;transition:.3s}.link:hover{color:var(--green);transform:translateX(5px)}

/* images */
.stack{position:relative;min-height:620px}.mainpic{position:absolute;right:0;top:0;width:77%;height:545px;border-radius:38px;overflow:hidden;box-shadow:var(--shadow);transition:.6s var(--ease)}.mainpic:hover{transform:translateY(-8px) rotate(1deg);box-shadow:0 45px 100px rgba(8,116,189,.2)}.mainpic img,.smallpic img{width:100%;height:100%;object-fit:cover}.mainpic:after,.smallpic:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,27,56,.32));pointer-events:none}.smallpic{position:absolute;left:0;bottom:0;width:53%;height:275px;border:9px solid #fff;border-radius:31px;overflow:hidden;box-shadow:var(--shadow);transition:.6s var(--ease)}.smallpic:hover{transform:translateY(-10px) rotate(-2deg)}.badge{position:absolute;right:0;bottom:66px;background:linear-gradient(135deg,var(--green),var(--lime));color:var(--navy);padding:18px 22px;border-radius:18px;font-weight:900;box-shadow:0 20px 45px rgba(116,189,56,.28);z-index:3}

/* process */
.process{position:relative;margin-top:55px}.process:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.13)}.step{display:grid;grid-template-columns:1fr 90px 1fr;min-height:190px;align-items:center}.step:nth-child(even) .steptext{grid-column:3}.step:nth-child(even) .num{grid-column:2;grid-row:1}.steptext{padding:25px}.steptext h3{font-family:Manrope;font-size:1.3rem}.steptext p{color:#aebed0;margin-top:7px}.num{width:66px;height:66px;border-radius:50%;background:linear-gradient(145deg,var(--blue),var(--navy));color:#fff;display:grid;place-items:center;font-family:Manrope;font-weight:800;justify-self:center;z-index:2;box-shadow:0 0 0 10px var(--navy),0 14px 35px rgba(8,116,189,.25);transition:.4s}.step:hover .num{transform:scale(1.12) rotate(8deg);background:linear-gradient(145deg,var(--green),var(--blue));color:var(--navy)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.13);border-radius:28px;overflow:hidden}.stat{padding:40px;border-right:1px solid rgba(255,255,255,.13);transition:.35s}.stat:hover{background:rgba(255,255,255,.045)}.stat:last-child{border:0}.stat b{font-family:Manrope;font-size:3.1rem;letter-spacing:-.06em}.stat span{display:block;color:#aebed0;font-size:.82rem}

/* gallery */
.gallery{display:grid;grid-template-columns:1.3fr .8fr .9fr;grid-auto-rows:245px;gap:17px}.gallery-item{position:relative;overflow:hidden;border-radius:26px;box-shadow:0 12px 30px rgba(6,27,56,.09)}.gallery-item:nth-child(1),.gallery-item:nth-child(4){grid-row:span 2}.gallery-item img{width:100%;height:100%;object-fit:cover;transition:1s var(--ease)}.gallery-item:hover img{transform:scale(1.11) rotate(1deg)}.gallery-item:before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(6,27,56,.82));opacity:.8}.caption{position:absolute;z-index:2;left:22px;bottom:18px;color:#fff;font-weight:800;transform:translateY(5px);transition:.4s}.gallery-item:hover .caption{transform:none}.caption small{display:block;color:#c9d7e4;font-weight:500}

/* testimonials */
.testi{padding:43px;border-radius:32px;background:linear-gradient(145deg,#fff,#f1f7fa);border:1px solid var(--line);box-shadow:var(--shadow2);transition:.5s var(--ease)}.testi:hover{transform:translateY(-10px) scale(1.01);box-shadow:var(--shadow)}.stars{color:#f1b62e;letter-spacing:3px}.quote{font-family:Manrope;font-size:1.4rem;line-height:1.4;margin:19px 0 25px}.person{display:flex;gap:12px;align-items:center}.personpic{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--green));box-shadow:0 8px 20px rgba(8,116,189,.2)}.person b{display:block}.person small{color:var(--muted)}

/* page hero */
.pagehero{padding:185px 0 105px;background:radial-gradient(circle at 82% 28%,rgba(116,189,56,.17),transparent 24%),radial-gradient(circle at 5% 75%,rgba(8,116,189,.1),transparent 25%),linear-gradient(135deg,#f5f9fb,#fff);position:relative;overflow:hidden}.pagehero:before{content:"";position:absolute;right:-180px;top:-200px;width:600px;height:600px;border:1px solid rgba(8,116,189,.12);border-radius:50%}.pagehero h1{font-family:Manrope;font-size:clamp(3.1rem,6.5vw,6.4rem);line-height:.92;letter-spacing:-.075em;max-width:950px}.pagehero h1 span{color:var(--green)}.crumb{display:flex;gap:9px;color:var(--muted);font-size:.8rem;margin-bottom:27px}.crumb a{color:var(--blue)}

/* CTA */
.cta{padding:75px;border-radius:42px;background:linear-gradient(135deg,var(--navy),#0c4b80);color:#fff;position:relative;overflow:hidden;box-shadow:0 30px 80px rgba(6,27,56,.18)}.cta:before,.cta:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.11);border-radius:50%}.cta:before{width:450px;height:450px;right:-190px;top:-230px}.cta:after{width:290px;height:290px;left:-180px;bottom:-190px}.cta-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:30px}.cta h2{font-family:Manrope;font-size:clamp(2.3rem,4.2vw,3.9rem);line-height:1.02;letter-spacing:-.055em;max-width:720px}.cta p{color:#c4d3e1;margin-top:16px;max-width:650px}

/* contact */
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:25px}.contact-card{padding:37px;border-radius:32px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow2);transition:.5s var(--ease)}.contact-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.contact-list{display:grid;gap:15px;margin-top:27px}.contact-item{display:flex;gap:14px;align-items:flex-start;padding:17px;border-radius:18px;background:var(--soft);transition:.3s}.contact-item:hover{background:#e9f5fa;transform:translateX(5px)}.contact-item .icon{margin:0;width:45px;height:45px;font-size:1rem}.contact-item b{display:block}.contact-item span{font-size:.84rem;color:var(--muted)}
form{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}label{font-size:.76rem;font-weight:800}input,textarea,select{width:100%;border:1px solid var(--line);border-radius:14px;padding:14px 15px;outline:0;background:#fafdfe;color:var(--ink);transition:.3s}input:focus,textarea:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 5px rgba(8,116,189,.08);transform:translateY(-1px)}textarea{min-height:150px;resize:vertical}

/* footer/floating */
footer{background:#04182f;color:#fff;padding:75px 0 25px}.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:42px}.footer-brand img{width:80px}.footer-brand p{color:#9fb1c7;max-width:370px;margin-top:16px}.footer h4{font-family:Manrope;margin-bottom:15px}.footer a{display:block;color:#a7b8cc;margin:8px 0;font-size:.86rem}.footer a:hover{color:#fff}.copyright{border-top:1px solid rgba(255,255,255,.1);margin-top:45px;padding-top:20px;color:#8094ac;font-size:.77rem;display:flex;justify-content:space-between}
.float-actions{position:fixed;right:20px;bottom:20px;z-index:4500;display:grid;gap:10px}.float-btn{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;color:#fff;font-size:1.28rem;box-shadow:0 18px 38px rgba(0,0,0,.2);transition:.4s var(--ease);position:relative}.float-btn:hover{transform:translateY(-5px) rotate(-4deg) scale(1.06)}.wa{background:#19c968}.call{background:var(--blue)}
.float-btn:after{content:"";position:absolute;inset:-4px;border-radius:21px;border:1px solid currentColor;opacity:.22;animation:ring 2.4s infinite}@keyframes ring{70%,100%{transform:scale(1.3);opacity:0}}
.reveal{opacity:0;transform:translateY(42px);transition:opacity .9s var(--ease),transform .9s var(--ease)}.reveal.show{opacity:1;transform:none}.delay1{transition-delay:.08s}.delay2{transition-delay:.16s}.delay3{transition-delay:.24s}
.cursor-glow{position:fixed;z-index:9990;width:280px;height:280px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(39,163,223,.08),transparent 67%);transform:translate(-50%,-50%);transition:left .15s ease,top .15s ease}

/* mobile */
@media(max-width:980px){
 .navlinks,.navbtns{display:none}.menu{display:block}.nav-shell{padding-right:15px}.mobile-menu{position:absolute;top:82px;left:21px;right:21px;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:22px;padding:12px;box-shadow:var(--shadow);display:none}.mobile-menu.open{display:block}.mobile-menu a{display:block;padding:13px 11px;font-weight:800;border-bottom:1px solid var(--line)}.mobile-menu a:last-child{border:0}
 .grid2,.contact-grid{grid-template-columns:1fr}.grid4{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:1fr 1fr}.hero{padding-top:140px}.hero-visual{margin-top:45px}.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:0}.stat{border-bottom:1px solid rgba(255,255,255,.13)}
}
@media(max-width:640px){
 .container{width:calc(100% - 28px)}.section{padding:88px 0}.hero{padding:125px 0 75px}.hero h1{font-size:3.45rem}.hero-visual{height:450px}.hero-photo{inset:5px 0 0 15px;border-width:5px}.floating-stat{left:0;bottom:25px}.grid3,.grid4{grid-template-columns:1fr}.gallery{grid-template-columns:1fr;grid-auto-rows:265px}.gallery-item:nth-child(1),.gallery-item:nth-child(4){grid-row:span 1}.stats{grid-template-columns:1fr}.stat{border-right:0!important}.cta{padding:42px 26px}.cta-inner{display:block}.cta .btn{margin-top:26px}.process:before{left:31px}.step{grid-template-columns:64px 1fr;min-height:160px}.step .num,.step:nth-child(even) .num{grid-column:1;grid-row:1}.step .steptext,.step:nth-child(even) .steptext{grid-column:2}.num{width:58px;height:58px;box-shadow:0 0 0 8px var(--navy)}form{grid-template-columns:1fr}.field.full{grid-column:auto}.footer-grid{grid-template-columns:1fr 1fr}.copyright{display:block}.copyright span{display:block;margin-top:8px}.brand img{width:47px;height:47px}.brand{min-width:0}.brand b{font-size:.9rem}.pagehero{padding:150px 0 85px}.pagehero h1{font-size:3.5rem}.float-actions{right:14px;bottom:14px}.float-btn{width:53px;height:53px}
}


/* ===== FINAL POLISH: CLEAN PRELOADER + MOBILE-FIRST OPTIMIZATION ===== */
.preloader{
  background:#f8fbfc;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .65s cubic-bezier(.16,1,.3,1),visibility .65s;
}
.preloader:before,.preloader:after{display:none}
.loader{
  width:min(290px,78vw);
  color:var(--navy);
  text-align:center;
}
.loader img{
  width:92px;height:92px;
  margin:0 auto 15px;
  object-fit:contain;
  filter:none;
  animation:none;
}
.loader h2{
  margin:0;
  font-family:Manrope,sans-serif;
  font-size:13px;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.loader p,.loader small{
  display:block;
  color:#74859a;
  font-size:9px;
  line-height:1.5;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-top:6px;
}
.loader-line,.loader-progress{
  width:170px;height:2px;
  margin:19px auto 0;
  border-radius:10px;
  background:#dce7ed;
  overflow:hidden;
}
.loader-line i,.loader-progress i{
  display:block;width:35%;height:100%;
  border-radius:10px;
  background:linear-gradient(90deg,var(--green),var(--blue));
  animation:preloadLine 1.1s ease-in-out infinite;
}
@keyframes preloadLine{
  0%{transform:translateX(-140%)}100%{transform:translateX(420%)}
}
.preloader.done{opacity:0;visibility:hidden;transform:none}

/* avoid hover/cursor-only effects on touch screens */
@media (hover:none), (pointer:coarse){
  .cursor-glow{display:none!important}
  .btn:hover,.card:hover,.testi:hover,.hero-photo:hover,.mainpic:hover,.smallpic:hover{
    transform:none;
  }
  .btn:before,.btn:after,.card:after{display:none}
  .float-btn:hover{transform:none}
}

/* tablet */
@media(max-width:980px){
  .header{padding:10px 0}
  .nav-shell{border-radius:18px;padding:6px 10px 6px 13px}
  .brand{min-width:0}
  .brand img{width:48px;height:48px}
  .brand b{font-size:.92rem}
  .brand small{font-size:.48rem}
  .menu{
    display:grid;place-items:center;
    width:46px;height:46px;
    border-radius:13px;
    background:#f1f7fa;
    border:1px solid rgba(6,27,56,.08);
    font-size:0;
  }
  .menu:after{content:"☰";font-size:20px}
  .mobile-menu{
    top:68px;left:14px;right:14px;
    border-radius:18px;
    padding:8px;
  }
  .mobile-menu a{
    min-height:48px;
    display:flex;align-items:center;
    padding:12px 14px;
  }
  .hero{min-height:auto;padding:132px 0 78px}
  .hero h1{font-size:clamp(3.2rem,8vw,5.6rem)}
  .hero-visual{height:500px}
  .section{padding:100px 0}
}

/* phones */
@media(max-width:640px){
  body{font-size:15px}
  .container{width:calc(100% - 28px)}
  .header{padding:8px 0}
  .nav-shell{border-radius:16px}
  .brand img{width:43px;height:43px}
  .brand b{font-size:.84rem}
  .brand small{font-size:.43rem;letter-spacing:.12em}
  .menu{width:43px;height:43px;border-radius:12px}
  .mobile-menu{top:63px;left:14px;right:14px}
  .mobile-menu a{font-size:.9rem}
  .mobile-menu a:last-child{
    margin-top:5px;
    background:linear-gradient(135deg,var(--green),var(--lime));
    color:var(--navy);
    border-radius:12px;
    justify-content:center;
  }

  .section{padding:76px 0}
  .pagehero{padding:125px 0 70px}
  .pagehero h1{font-size:clamp(2.8rem,14vw,4.2rem)}
  .hero{padding:116px 0 62px}
  .hero h1{font-size:clamp(3rem,15vw,4.15rem)}
  .hero p{font-size:.98rem;margin:22px 0 27px}
  .actions{width:100%;display:grid;grid-template-columns:1fr;gap:10px}
  .actions .btn{width:100%}
  .btn{min-height:52px;padding:0 19px;border-radius:14px}
  .hero-visual{height:390px;margin-top:35px}
  .hero-photo{inset:0 0 0 8px;border-radius:27px}
  .floating-stat{left:-2px;bottom:13px;padding:15px 17px;border-radius:15px}
  .floating-stat b{font-size:1.35rem}

  .title{font-size:clamp(2.25rem,11vw,3.5rem)}
  .copy{font-size:.94rem}
  .grid2,.grid3,.grid4,.contact-grid{grid-template-columns:1fr;gap:22px}
  .card{padding:25px;border-radius:23px}
  .icon{width:55px;height:55px;border-radius:16px;margin-bottom:18px}
  .stack{min-height:410px}
  .mainpic{width:82%;height:345px;border-radius:27px}
  .smallpic{width:59%;height:185px;border-width:6px;border-radius:22px}
  .badge{right:0;bottom:43px;padding:12px 14px;border-radius:13px;font-size:.76rem}

  .gallery{grid-template-columns:1fr;grid-auto-rows:235px;gap:12px}
  .gallery-item{border-radius:20px}
  .stats{grid-template-columns:1fr 1fr;border-radius:20px}
  .stat{padding:25px 18px;border-right:0!important}
  .stat b{font-size:2.15rem}
  .stat span{font-size:.72rem}

  .process{margin-top:30px}
  .process:before{left:28px}
  .step{grid-template-columns:56px 1fr;min-height:145px}
  .step .num,.step:nth-child(even) .num{width:54px;height:54px;grid-column:1}
  .step .steptext,.step:nth-child(even) .steptext{grid-column:2}
  .steptext{padding:12px 0 12px 8px}
  .steptext h3{font-size:1.05rem}

  .cta{padding:36px 22px;border-radius:27px}
  .cta h2{font-size:2.35rem}
  .cta p{font-size:.9rem}
  .cta .btn{width:100%}

  .contact-card{padding:25px;border-radius:24px}
  form{grid-template-columns:1fr;gap:12px}
  input,textarea,select{min-height:50px}
  textarea{min-height:125px}

  footer{padding:60px 0 20px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-brand img{width:72px}
  .copyright{font-size:.7rem}

  .float-actions{right:12px;bottom:12px;gap:8px}
  .float-btn{width:51px;height:51px;border-radius:15px}
}

/* accessibility/performance */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}


/* FINAL: mobile navigation containment + richer color, same design */
:root{
  --accent-sky:#1c9be8;
  --accent-mint:#79c842;
  --accent-soft:#eaf8ff;
  --accent-pale:#f3fbe9;
}
html,body{max-width:100%;overflow-x:hidden}
body{
  background:
    radial-gradient(circle at 8% 12%,rgba(28,155,232,.055),transparent 24rem),
    radial-gradient(circle at 92% 28%,rgba(121,200,66,.055),transparent 25rem),#fff;
}
.section:nth-of-type(even){
  background:
    radial-gradient(circle at 90% 10%,rgba(28,155,232,.055),transparent 22rem),
    radial-gradient(circle at 10% 90%,rgba(121,200,66,.045),transparent 22rem);
}
.card{
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,252,255,.96));
  border-color:rgba(28,155,232,.10);
}
.card:hover{
  border-color:rgba(121,200,66,.32);
  box-shadow:0 25px 60px rgba(6,27,56,.13),0 0 0 1px rgba(28,155,232,.06);
}
.icon{background:linear-gradient(135deg,rgba(28,155,232,.13),rgba(121,200,66,.14))}
.eyebrow{color:var(--blue)}
.eyebrow:before{background:linear-gradient(90deg,var(--blue),var(--green))}
.btn.primary{background:linear-gradient(135deg,var(--blue),#147dcc)}
.btn.primary:hover{background:linear-gradient(135deg,#147dcc,var(--green))}
.float-btn.whatsapp{background:linear-gradient(135deg,#25d366,#72c93f)}
.float-btn.call{background:linear-gradient(135deg,var(--blue),#159ce7)}
.stats{background:linear-gradient(135deg,#061b38,#0b3c69 55%,#126c91)}
.cta{
  background:
    radial-gradient(circle at 85% 15%,rgba(121,200,66,.28),transparent 22rem),
    radial-gradient(circle at 15% 85%,rgba(28,155,232,.24),transparent 20rem),
    linear-gradient(135deg,#061b38,#0a355c);
}
@media(max-width:980px){
  .header{width:100%;overflow:visible}
  .nav-shell{width:100%;max-width:100%;box-sizing:border-box;overflow:visible}
  .mobile-menu{
    box-sizing:border-box;
    width:auto;
    max-width:calc(100vw - 20px);
    overflow:hidden;
    left:0;
    right:0;
  }
}
@media(max-width:640px){
  .header .container{width:calc(100% - 20px);max-width:100%}
  .nav-shell{width:100%;min-width:0;padding:5px 7px 5px 10px}
  .brand{min-width:0;max-width:calc(100% - 58px);overflow:hidden}
  .brand b,.brand small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .menu{flex:0 0 43px}
  .mobile-menu{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    width:100%;
    max-width:none;
    max-height:calc(100vh - 90px);
    overflow-y:auto;
    overflow-x:hidden;
  }
  .mobile-menu a{width:100%;box-sizing:border-box}
}


/* =========================================================
   FINAL MOBILE HEADER FIX
   Prevents the header/nav from ever exceeding the viewport.
   Existing desktop design is unchanged.
   ========================================================= */

@media (max-width: 980px){
  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }

  .header{
    left:0;
    right:0;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow:visible;
  }

  .header > .container.nav-shell{
    width:calc(100% - 20px) !important;
    max-width:calc(100% - 20px) !important;
    margin-left:10px;
    margin-right:10px;
    box-sizing:border-box;
    min-width:0 !important;
  }

  .header .nav{
    width:100%;
    max-width:100%;
    min-width:0;
    gap:8px;
    box-sizing:border-box;
  }

  .header .brand{
    flex:1 1 auto;
    width:auto;
    min-width:0 !important;
    max-width:none !important;
    overflow:hidden;
  }

  .header .brand img{
    flex:0 0 auto;
  }

  .header .brand span{
    min-width:0;
    overflow:hidden;
  }

  .header .brand b,
  .header .brand small{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .header .menu{
    display:grid !important;
    flex:0 0 43px;
    width:43px;
    min-width:43px;
    max-width:43px;
    box-sizing:border-box;
    margin:0;
  }

  .mobile-menu{
    box-sizing:border-box;
    width:calc(100% - 20px) !important;
    max-width:calc(100% - 20px) !important;
    left:10px !important;
    right:auto !important;
    margin:0;
    overflow-x:hidden;
  }
}

@media (max-width:480px){
  .header > .container.nav-shell{
    width:calc(100% - 16px) !important;
    max-width:calc(100% - 16px) !important;
    margin-left:8px;
    margin-right:8px;
    padding-left:8px;
    padding-right:6px;
  }

  .header .nav{
    gap:5px;
  }

  .header .brand img{
    width:42px;
    height:42px;
  }

  .header .brand b{
    font-size:.78rem;
  }

  .header .brand small{
    font-size:.39rem;
    letter-spacing:.10em;
  }

  .header .menu{
    flex-basis:42px;
    width:42px;
    min-width:42px;
    max-width:42px;
    height:42px;
  }

  .mobile-menu{
    width:calc(100% - 16px) !important;
    max-width:calc(100% - 16px) !important;
    left:8px !important;
  }
}

/* Keep decorative/animated content from creating a horizontal page scroll. */
@media (max-width:980px){
  main, footer, section, .hero, .pagehero{
    max-width:100%;
    overflow-x:clip;
  }
}


/* ==========================================================
   HOME PAGE ONLY — FINAL MOBILE HEADER REPAIR
   Uses a strict two-column header so the logo and hamburger
   can never push the navigation outside the viewport.
   Desktop/tablet layout remains unchanged.
   ========================================================== */
@media (max-width: 980px){
  .home-page{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .home-page .header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    padding-left:0 !important;
    padding-right:0 !important;
    transform:none !important;
  }

  .home-page .header > .nav-shell{
    width:calc(100% - 20px) !important;
    max-width:calc(100% - 20px) !important;
    min-width:0 !important;
    margin:0 10px !important;
    padding:6px 7px 6px 10px !important;
    box-sizing:border-box !important;
  }

  .home-page .header .nav{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 43px !important;
    align-items:center !important;
    gap:7px !important;
  }

  .home-page .header .brand{
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    overflow:hidden !important;
  }

  .home-page .header .brand span{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  .home-page .header .brand b,
  .home-page .header .brand small{
    display:block !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .home-page .header .navlinks,
  .home-page .header .navbtns{
    display:none !important;
  }

  .home-page .header .menu{
    display:grid !important;
    place-items:center !important;
    width:43px !important;
    min-width:43px !important;
    max-width:43px !important;
    height:43px !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    justify-self:end !important;
  }

  .home-page .mobile-menu{
    position:absolute !important;
    top:calc(100% + 8px) !important;
    left:10px !important;
    right:auto !important;
    width:calc(100% - 20px) !important;
    max-width:calc(100% - 20px) !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
  }
}

@media (max-width:480px){
  .home-page .header > .nav-shell{
    width:calc(100% - 16px) !important;
    max-width:calc(100% - 16px) !important;
    margin-left:8px !important;
    margin-right:8px !important;
    padding-left:7px !important;
    padding-right:6px !important;
  }

  .home-page .header .nav{
    grid-template-columns:minmax(0,1fr) 42px !important;
    gap:5px !important;
  }

  .home-page .header .brand img{
    width:42px !important;
    height:42px !important;
  }

  .home-page .header .brand b{
    font-size:.78rem !important;
  }

  .home-page .header .brand small{
    font-size:.39rem !important;
    letter-spacing:.10em !important;
  }

  .home-page .header .menu{
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
  }

  .home-page .mobile-menu{
    left:8px !important;
    width:calc(100% - 16px) !important;
    max-width:calc(100% - 16px) !important;
  }
}


/* ============================================================
   DEFINITIVE HOME MOBILE HEADER FIX
   Uses viewport units rather than the Home hero/container width.
   This prevents any home-page content from shrinking/offsetting
   the fixed navigation.
   ============================================================ */

@media (max-width: 980px){

  html, body{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  /* Home header is tied directly to the viewport. */
  body.home-page .header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;
    width:100vw !important;
    max-width:100vw !important;
    min-width:0 !important;
    margin:0 !important;
    padding:8px 0 !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  /* Do NOT inherit the normal .container width on Home header. */
  body.home-page .header > .nav-shell{
    display:block !important;
    position:relative !important;
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    min-width:0 !important;
    margin:0 8px !important;
    padding:6px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  body.home-page .header > .nav-shell > .nav{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:43px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 43px !important;
    gap:6px !important;
    align-items:center !important;
    box-sizing:border-box !important;
  }

  body.home-page .header .brand{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
  }

  body.home-page .header .brand img{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    object-fit:contain !important;
  }

  body.home-page .header .brand span{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  body.home-page .header .brand b,
  body.home-page .header .brand small{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  body.home-page .header .navlinks,
  body.home-page .header .navbtns{
    display:none !important;
  }

  body.home-page .header .menu{
    display:grid !important;
    place-items:center !important;
    position:relative !important;
    width:43px !important;
    min-width:43px !important;
    max-width:43px !important;
    height:43px !important;
    margin:0 !important;
    padding:0 !important;
    justify-self:end !important;
    box-sizing:border-box !important;
    border-radius:13px !important;
  }

  body.home-page .mobile-menu{
    position:fixed !important;
    top:67px !important;
    left:8px !important;
    right:auto !important;
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    max-height:calc(100vh - 82px) !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    margin:0 !important;
  }
}

@media (max-width:480px){
  body.home-page .header > .nav-shell{
    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;
    margin-left:6px !important;
    margin-right:6px !important;
  }

  body.home-page .header > .nav-shell > .nav{
    grid-template-columns:minmax(0,1fr) 42px !important;
  }

  body.home-page .header .menu{
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
  }

  body.home-page .mobile-menu{
    left:6px !important;
    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;
  }
}


/* ==========================================================
   HOME PAGE — FINAL X-AXIS OVERFLOW CONTAINMENT
   Navigation stays fixed; only the page content is clipped
   to the real viewport so no horizontal scrollbar is created.
   ========================================================== */

@media (max-width:980px){
  html{
    width:100% !important;
    max-width:100% !important;
    overflow-x:clip !important;
  }

  body.home-page{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:clip !important;
  }

  body.home-page main{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:clip !important;
  }

  body.home-page .hero{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  body.home-page .hero > .container{
    width:calc(100% - 28px) !important;
    max-width:calc(100% - 28px) !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  body.home-page .hero .grid2{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    grid-template-columns:minmax(0,1fr) !important;
    box-sizing:border-box !important;
  }

  body.home-page .hero-content,
  body.home-page .hero-visual{
    min-width:0 !important;
    max-width:100% !important;
  }

  body.home-page .hero-visual{
    width:100% !important;
    overflow:hidden !important;
  }

  body.home-page .hero-photo{
    max-width:calc(100% - 8px) !important;
    box-sizing:border-box !important;
  }

  /* Keep intentional wide marquees visually clipped, not scrollable. */
  body.home-page .marquee{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  /* Decorative absolute elements can never establish page width. */
  body.home-page .hero:before,
  body.home-page .hero:after{
    pointer-events:none !important;
  }
}

@media (max-width:480px){
  body.home-page .hero > .container{
    width:calc(100% - 24px) !important;
    max-width:calc(100% - 24px) !important;
  }

  body.home-page .hero-visual{
    width:100% !important;
    max-width:100% !important;
  }

  body.home-page .hero-photo{
    inset-left:8px !important;
  }
}