:root{
  --navy:#0F1B33; --navy2:#132240; --blue:#4C9BE8; --blue-deep:#2E6FBE; --cyan:#32C9DF;
  --orange:#EF7A26; --purple:#6D4DE7; --graphite:#4F5054; --ink:#1A2233; --muted:#66707F;
  --line:#E4E9F1; --bg:#FFFFFF; --bg-soft:#F5F8FC;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{font-family:'Liberation Sans','Arial',sans-serif; color:var(--ink); background:var(--bg); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
section{position:relative;}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-family:'DejaVu Sans Mono',monospace;
  font-size:12.5px; font-weight:700; letter-spacing:2.4px; text-transform:uppercase; margin-bottom:16px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;}
h1,h2,h3{font-family:'Liberation Sans','Arial',sans-serif; font-weight:700; color:var(--navy); letter-spacing:-0.01em;}
h1{font-size:52px; line-height:1.05; margin-bottom:20px;}
h2{font-size:36px; line-height:1.12; margin-bottom:16px;}
h3{font-size:21px; line-height:1.25; margin-bottom:8px;}
p{color:var(--muted); font-size:17px; line-height:1.65;}
.lede{font-size:19px; color:var(--graphite); max-width:640px;}

:focus-visible{outline:2.5px solid var(--blue); outline-offset:3px; border-radius:4px;}

.btn{
  display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:15.5px;
  padding:14px 26px; border-radius:11px; border:none; cursor:pointer; white-space:nowrap; flex:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary{background:linear-gradient(95deg,var(--blue-deep),var(--blue)); color:#fff; box-shadow:0 14px 28px -10px rgba(46,111,190,0.5); background-size:140% 100%; background-position:0% 0;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 34px -10px rgba(46,111,190,0.62); background-position:100% 0;}
.btn-primary:active{transform:translateY(0); box-shadow:0 10px 20px -10px rgba(46,111,190,0.5);}
.btn-ghost{background:#fff; color:var(--navy); border:1.6px solid var(--line);}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue-deep); transform:translateY(-2px);}
.btn-outline-light{background:transparent; color:#fff; border:1.6px solid rgba(255,255,255,0.4);}
.btn-outline-light:hover{background:rgba(255,255,255,0.1); border-color:#fff; transform:translateY(-2px);}

/* scroll progress bar */
.scrollbar{position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,var(--blue),var(--cyan)); z-index:100; transition:width .08s linear;}

/* header */
header.site{position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.98); border-bottom:1px solid var(--line); transition:box-shadow .25s ease, padding .25s ease;}
header.site.scrolled{box-shadow:0 12px 30px -18px rgba(15,27,51,0.25);}
header.site .bar{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1180px; margin:0 auto; transition:padding .25s ease;}
header.site.scrolled .bar{padding:11px 32px;}
header.site .logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:21px; color:var(--navy);}
header.site .logo img{height:30px; transition:transform .3s ease;}
header.site .logo:hover img{transform:rotate(-8deg) scale(1.06);}
nav.mainnav{display:flex; align-items:center; gap:30px;}
nav.mainnav a{font-size:14.5px; font-weight:600; color:var(--graphite); position:relative;}
nav.mainnav a:not(.btn)::after{content:"";position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:var(--blue-deep); transition:right .2s ease;}
nav.mainnav a:not(.btn):hover::after{right:0;}
nav.mainnav a.active{color:var(--blue-deep);}
nav.mainnav a.active::after{right:0;}
nav.mainnav .dropdown{position:relative;}
nav.mainnav .dropdown::after{content:""; position:absolute; left:-16px; right:-16px; top:100%; height:20px;}
nav.mainnav .dropdown .menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(4px); background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 20px 40px -14px rgba(15,27,51,0.25); padding:10px; min-width:210px;
  opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease; z-index:60;
}
nav.mainnav .dropdown:hover .menu, nav.mainnav .dropdown:focus-within .menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
nav.mainnav .dropdown .menu a{display:block; padding:10px 12px; border-radius:8px; font-size:14px;}
nav.mainnav .dropdown .menu a::after{display:none;}
nav.mainnav .dropdown .menu a:hover{background:var(--bg-soft); padding-left:16px;}
header.site .cta{display:flex; align-items:center; gap:14px;}
.menu-toggle{display:none;}
.nav-backdrop{display:none;}
@media (max-width:920px){
  nav.mainnav{position:fixed; inset:64px 0 0 0; background:#fff; flex-direction:column; align-items:flex-start; padding:24px 28px; gap:4px; overflow:auto;
    transform:translateX(100%); transition:transform .25s ease;}
  nav.mainnav a{padding:12px 0; width:100%; border-bottom:1px solid var(--line);}
  nav.mainnav a:not(.btn)::after{display:none;}
  nav.mainnav .dropdown .menu{position:static; opacity:1; visibility:visible; box-shadow:none; border:none; padding:0 0 8px 14px; transform:none; display:block;}
  nav.mainnav .mobile-cta{display:flex !important; border-bottom:none;}
  #nav-toggle:checked ~ nav.mainnav{transform:translateX(0);}
  #nav-toggle:checked ~ .nav-backdrop{display:block; opacity:1;}
  .nav-backdrop{display:block; content:""; position:fixed; inset:64px 0 0 0; background:rgba(15,27,51,0.35); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:45;}
  .menu-toggle{display:flex; flex-direction:column; gap:5px; cursor:pointer; z-index:70; position:relative; width:24px; height:18px;}
  .menu-toggle span{width:24px; height:2px; background:var(--navy); transition:transform .25s ease, opacity .25s ease;}
  header.site .cta .btn-ghost{display:none;}
  header.site .cta .btn-primary{display:none;}
  header.site .bar{padding:14px 20px;}
}

/* hero */
.hero{background:linear-gradient(160deg,var(--navy) 0%, var(--navy2) 60%, #0c1730 100%); color:#fff; overflow:hidden; position:relative;}
.hero .wrap{padding:96px 32px 84px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; position:relative; z-index:1;}
.hero h1{color:#fff;}
.hero .lede{color:#C9D6EC;}
.hero-glow{position:absolute; width:640px; height:640px; border-radius:50%; background:radial-gradient(circle, rgba(76,155,232,0.35), transparent 70%); filter:blur(10px); top:-220px; right:-160px; animation:drift 12s ease-in-out infinite alternate;}
.hero::before{content:"";position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px); background-size:26px 26px; mask-image:radial-gradient(ellipse 70% 60% at 60% 20%, black, transparent); opacity:.5; pointer-events:none;}
@keyframes drift{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(-30px,26px) scale(1.06);} }
.hero-actions{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
.hero-media{position:relative; will-change:transform;}
.hero-media img{border-radius:16px; box-shadow:0 40px 80px -24px rgba(0,0,0,0.55); transition:transform .1s ease-out;}
@media (max-width:920px){ .hero .wrap{grid-template-columns:1fr; padding-top:48px;} }

/* sections */
.section{padding:88px 0;}
.section.soft{background:var(--bg-soft);}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* reveal-on-scroll */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1);}
.reveal.in-view{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .hero-glow{animation:none;}
}

/* pillars */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
.pillars .p{background:#fff; padding:28px 22px; display:flex; flex-direction:column; gap:10px; transition:background .2s ease;}
.pillars .p:hover{background:var(--bg-soft);}
.pillars .p .ic{width:40px;height:40px;border-radius:11px;background:rgba(76,155,232,0.12);display:flex;align-items:center;justify-content:center; transition:transform .25s ease;}
.pillars .p:hover .ic{transform:scale(1.12) rotate(-6deg);}
.pillars .p b{font-size:15.5px; color:var(--navy);}
.pillars .p span{font-size:13.5px; color:var(--muted);}
@media (max-width:820px){ .pillars{grid-template-columns:repeat(2,1fr);} }

/* product cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; position:relative; overflow:hidden;}
.card::before{content:"";position:absolute; inset:0; opacity:0; background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(76,155,232,0.14), transparent 70%); transition:opacity .3s ease; pointer-events:none;}
.card:hover{transform:translateY(-6px); box-shadow:0 24px 48px -20px rgba(15,27,51,0.18); border-color:transparent;}
.card:hover::before{opacity:1;}
.card .tag{display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; padding:5px 10px; border-radius:7px; margin-bottom:16px;}
.card p{font-size:15px;}
.card .go{margin-top:18px; font-size:14px; font-weight:700; display:inline-flex; align-items:center; gap:6px; transition:gap .2s ease;}
.card:hover .go{gap:10px;}
@media (max-width:920px){ .cards{grid-template-columns:1fr 1fr;} }
@media (max-width:620px){ .cards{grid-template-columns:1fr;} }

/* flow */
.flow{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; position:relative; margin:44px 0;}
.flow::before{content:"";position:absolute; left:40px; right:40px; top:29px; height:2px; background:linear-gradient(90deg,var(--blue),var(--cyan));}
.flow .step{position:relative; flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;}
.flow .step .ic{width:58px;height:58px;border-radius:16px;background:#fff;border:1.6px solid var(--blue); display:flex;align-items:center;justify-content:center; transition:transform .25s ease, box-shadow .25s ease;}
.flow .step:hover .ic{transform:translateY(-4px) scale(1.06); box-shadow:0 14px 26px -12px rgba(76,155,232,0.55);}
.flow .step b{font-size:14px; color:var(--navy);}
.flow .step span{font-size:12.5px; color:var(--muted); max-width:130px;}
@media (max-width:760px){ .flow{flex-direction:column; gap:26px;} .flow::before{display:none;} }

/* checklist */
.checklist{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 28px;}
.checklist .it{display:flex; align-items:flex-start; gap:12px;}
.checklist .it .chk{width:22px;height:22px;border-radius:50%;background:rgba(76,155,232,0.14);border:1px solid var(--blue);flex:none;display:flex;align-items:center;justify-content:center;margin-top:2px; transition:background .2s ease, transform .2s ease;}
.checklist .it:hover .chk{background:var(--blue); transform:scale(1.1);}
.checklist .it:hover .chk svg path{stroke:#fff;}
.checklist .it b{font-size:15px; color:var(--navy); display:block;}
.checklist .it span{font-size:13.5px; color:var(--muted);}
@media (max-width:700px){ .checklist{grid-template-columns:1fr;} }

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-radius:16px; overflow:hidden; border:1px solid var(--line);}
.stats .s{background:var(--navy); color:#fff; padding:30px 20px; text-align:center;}
.stats .s b{display:block; font-size:34px; font-weight:800;}
.stats .s span{font-size:12.5px; color:#AFC2E0; letter-spacing:0.5px; text-transform:uppercase;}
@media (max-width:760px){ .stats{grid-template-columns:1fr 1fr;} }

/* testimonial */
.testimonial{background:var(--bg-soft); border-radius:20px; padding:44px; display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:flex-start;}
.testimonial .mark{font-size:52px; color:var(--blue); font-family:Georgia,serif; line-height:1;}
.testimonial p.quote{font-size:18px; color:var(--ink); line-height:1.6; font-style:italic;}
.testimonial .who{margin-top:18px; font-size:14px; color:var(--muted);}
.testimonial .who b{color:var(--navy);}
@media (max-width:700px){ .testimonial{grid-template-columns:1fr; padding:28px;} }

/* logos strip */
.logostrip{display:flex; flex-wrap:wrap; gap:36px; align-items:center; justify-content:center; opacity:0.75;}
.logostrip img{height:34px; filter:grayscale(1); opacity:0.7; transition:filter .2s ease, opacity .2s ease;}
.logostrip img:hover{filter:grayscale(0); opacity:1;}

/* product image gallery */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.gallery.cols-4{grid-template-columns:repeat(4,1fr);}
.gallery .g-item{background:var(--bg-soft); border:1px solid var(--line); border-radius:16px; padding:22px; display:flex; align-items:center; justify-content:center; min-height:200px; transition:transform .25s ease, box-shadow .25s ease;}
.gallery .g-item:hover{transform:translateY(-5px); box-shadow:0 24px 44px -22px rgba(15,27,51,0.22);}
.gallery .g-item img{max-height:230px; width:auto; object-fit:contain;}
@media (max-width:920px){ .gallery, .gallery.cols-4{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .gallery, .gallery.cols-4{grid-template-columns:1fr;} }

/* cta band */
.ctaband{background:linear-gradient(95deg,var(--navy),var(--navy2)); border-radius:22px; padding:56px; display:flex; align-items:center; justify-content:space-between; gap:30px; color:#fff; position:relative; overflow:hidden;}
.ctaband::before{content:"";position:absolute; width:420px;height:420px;border-radius:50%; background:radial-gradient(circle, rgba(76,155,232,0.35), transparent 70%); right:-140px; top:-160px;}
.ctaband h2{color:#fff; margin-bottom:6px;}
.ctaband p{color:#C9D6EC;}
@media (max-width:760px){ .ctaband{flex-direction:column; text-align:center; padding:36px;} }

/* footer */
footer.site{background:var(--navy); color:#C9D6EC; padding:64px 0 28px;}
footer.site .cols{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:30px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.12);}
footer.site h4{color:#fff; font-size:13px; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:16px;}
footer.site li{margin-bottom:9px; font-size:14px;}
footer.site a{transition:color .2s ease, padding-left .2s ease;}
footer.site a:hover{color:#fff; padding-left:3px;}
footer.site .brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:#fff; margin-bottom:14px;}
footer.site .brand img{height:26px;}
footer.site .tagline{font-size:12.5px; color:var(--blue); letter-spacing:1px; text-transform:uppercase; margin-bottom:18px;}
footer.site .bottom{display:flex; justify-content:space-between; padding-top:22px; font-size:12.5px; color:#7C8AA8; flex-wrap:wrap; gap:10px;}

/* breadcrumb-ish page hero (inner pages) */
.pagehero{background:linear-gradient(160deg,var(--navy),var(--navy2)); color:#fff; padding:64px 0 70px; overflow:hidden;}
.pagehero h1{color:#fff; font-size:42px;}
.pagehero .lede{color:#C9D6EC;}
.pagehero .badge{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:18px;}

.split{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
@media (max-width:900px){ .split{grid-template-columns:1fr;} }
.shot{border-radius:14px; border:1px solid var(--line); box-shadow:0 30px 60px -24px rgba(15,27,51,0.25); overflow:hidden; transition:transform .3s ease, box-shadow .3s ease;}
.shot:hover{transform:translateY(-4px); box-shadow:0 36px 70px -22px rgba(15,27,51,0.32);}
.shot .bar{background:var(--navy); padding:8px 12px; display:flex; gap:6px;}
.shot .bar i{width:8px;height:8px;border-radius:50%;background:#3a4a6b;}

.module-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.module{border:1px solid var(--line); border-radius:14px; padding:22px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.module:hover{transform:translateY(-5px); box-shadow:0 20px 40px -20px rgba(15,27,51,0.2); border-color:transparent;}
.module svg{transition:transform .25s ease;}
.module:hover svg{transform:scale(1.14);}
.module b{display:block; color:var(--navy); font-size:15.5px; margin-bottom:6px;}
.module span{font-size:13.5px; color:var(--muted);}
.module .module-logo-img{height:34px; width:auto; margin-bottom:14px; display:block; transition:transform .25s ease;}
.module:hover .module-logo-img{transform:scale(1.06);}
@media (max-width:820px){ .module-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .module-grid{grid-template-columns:1fr;} }

/* floating action buttons */
.fab-group{position:fixed; right:22px; bottom:22px; z-index:80; display:flex; flex-direction:column; align-items:flex-end; gap:12px;}
.fab-whatsapp{display:flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:50%; background:#25D366; box-shadow:0 14px 28px -10px rgba(20,140,80,0.6); position:relative; transition:transform .2s ease, box-shadow .2s ease;}
.fab-whatsapp:hover{transform:scale(1.08); box-shadow:0 18px 34px -10px rgba(20,140,80,0.7);}
.fab-whatsapp::after{content:"";position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:pulse-ring 2.2s cubic-bezier(.4,0,.6,1) infinite;}
@keyframes pulse-ring{ 0%{transform:scale(1); opacity:.6;} 100%{transform:scale(1.55); opacity:0;} }
.fab-top{display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#fff; border:1.4px solid var(--line); color:var(--navy); box-shadow:0 10px 24px -12px rgba(15,27,51,0.3); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, visibility .25s;}
.fab-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.fab-top:hover{border-color:var(--blue); color:var(--blue-deep);}
@media (prefers-reduced-motion:reduce){ .fab-whatsapp::after{animation:none;} }

/* contact form */
.field{position:relative;}
.field input, .field textarea, .field select{width:100%; padding:13px 16px; border-radius:9px; border:1.4px solid var(--line); font-size:14.5px; font-family:inherit; transition:border-color .2s ease, box-shadow .2s ease; background:#fff; color:var(--ink);}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--blue); box-shadow:0 0 0 4px rgba(76,155,232,0.14); outline:none;}
.field .err{display:none; color:#D64545; font-size:12.5px; margin-top:6px;}
.field.invalid input, .field.invalid textarea, .field.invalid select{border-color:#D64545;}
.field.invalid .err{display:block;}
.form-success{display:none; align-items:center; gap:14px; background:rgba(76,155,232,0.1); border:1px solid rgba(76,155,232,0.35); border-radius:12px; padding:18px 20px; margin-top:16px;}
.form-success.show{display:flex; animation:pop-in .35s ease;}
@keyframes pop-in{ from{opacity:0; transform:scale(.94);} to{opacity:1; transform:scale(1);} }
.char-count{font-size:12px; color:var(--muted); text-align:right; margin-top:-6px;}

/* counting stat number wrapper for animation stability */
.stats .s b, .split .stats .s b{font-variant-numeric:tabular-nums;}