:root{
  --navy:#12233F; --navy2:#1B3A5C; --navy3:#0B1A2E;
  --orange:#F5A623; --orange-deep:#E0921A;
  --blue:#4A90D9; --green:#4CAF50; --gray:#8592A6;
  --text:#2B2F36; --muted:#5B6470; --lightbg:#F7F8FA; --border:#E3E7ED;
  --maxw:1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Poppins',Arial,Helvetica,sans-serif; color:var(--text); line-height:1.6; background:#fff; overflow-x:hidden;}
img,svg{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
section{position:relative;}
.section-pad{padding:100px 0;}
@media (max-width:768px){ .section-pad{padding:64px 0;} }

.kicker{font-size:12px; font-weight:700; letter-spacing:2.4px; color:var(--orange); text-transform:uppercase; margin-bottom:12px;}
h1,h2,h3{font-weight:700; color:var(--navy); line-height:1.2;}
h2{font-size:32px; margin-bottom:14px;}
h3{font-size:19px; margin-bottom:8px;}
p{color:var(--muted); font-size:15.5px;}
.lead{font-size:18px; color:var(--muted); max-width:640px;}
.center{text-align:center; margin-left:auto; margin-right:auto;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:8px; font-weight:600; font-size:14.5px; letter-spacing:0.3px; transition:transform .15s ease, box-shadow .15s ease; cursor:pointer; border:none;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--orange); color:var(--navy); box-shadow:0 8px 24px rgba(245,166,35,.35);}
.btn-primary:hover{background:var(--orange-deep);}
.btn-outline{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5);}
.btn-outline:hover{border-color:#fff; background:rgba(255,255,255,.08);}
.btn-dark{background:var(--navy); color:#fff;}
.btn-dark:hover{background:var(--navy2);}

/* ---------- Header ---------- */
header{position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(18,35,63,0); transition:background .25s ease, box-shadow .25s ease, padding .25s ease;}
header.scrolled{background:rgba(18,35,63,.97); box-shadow:0 6px 24px rgba(0,0,0,.15); backdrop-filter:blur(6px);}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:22px 0;}
header.scrolled .navbar{padding:14px 0;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{width:150px;}
.navlinks{display:flex; align-items:center; gap:34px;}
.navlinks a{color:#fff; font-size:14px; font-weight:500; opacity:.88; transition:opacity .15s;}
.navlinks a:hover{opacity:1;}
.nav-cta{display:flex; align-items:center; gap:16px;}
.nav-phone{color:#fff; font-size:13.5px; font-weight:600; opacity:.9; display:flex; align-items:center; gap:6px;}
.navtoggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; position:relative; z-index:1100;}
.navtoggle span{width:24px; height:2.4px; background:#fff; border-radius:2px; transition:transform .2s ease, opacity .2s ease;}
.navtoggle.open span:nth-child(1){transform:translateY(7.4px) rotate(45deg);}
.navtoggle.open span:nth-child(2){opacity:0;}
.navtoggle.open span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg);}
@media (max-width:900px){
  .navlinks{position:fixed; z-index:1050; top:0; right:-100%; height:100vh; width:78%; max-width:320px; background:var(--navy); flex-direction:column; justify-content:center; align-items:flex-start; gap:26px; padding:40px; transition:right .3s ease; box-shadow:-10px 0 40px rgba(0,0,0,.3);}
  .navlinks.open{right:0;}
  .navlinks a{font-size:17px;}
  .nav-phone{display:none;}
  .navtoggle{display:flex;}
}

/* ---------- Hero ---------- */
.hero{min-height:100vh; display:flex; align-items:center; background:var(--navy); position:relative; overflow:hidden; padding-top:90px;}
.hero-bg{position:absolute; inset:0;}
.hero-content{position:relative; z-index:2; padding:60px 0 80px;}
.hero-tag{color:#C9D2DE; font-size:13px; font-weight:700; letter-spacing:3px; margin-bottom:22px;}
.hero h1{color:#fff; font-size:52px; line-height:1.14; max-width:760px; margin-bottom:22px;}
.hero h1 span{color:var(--orange);}
.hero p{color:#B9C4D2; font-size:17px; max-width:560px; margin-bottom:38px;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px;}
.hero-strip{display:flex; flex-wrap:wrap; gap:10px;}
.hero-chip{font-size:12px; color:#AEBBCC; border:1px solid rgba(255,255,255,.18); border-radius:20px; padding:7px 14px;}
@media (max-width:768px){ .hero h1{font-size:34px;} .hero p{font-size:15.5px;} }

/* ---------- Overview ---------- */
.ov-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:start; margin-top:36px;}
.ov-list{display:flex; flex-direction:column; gap:22px;}
.ov-item{display:flex; gap:16px;}
.ov-num{font-size:13px; font-weight:700; color:var(--orange); border:1.4px solid var(--orange); border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.ov-panel{background:var(--lightbg); border:1px solid var(--border); border-radius:16px; padding:36px;}
.ov-panel h3{margin-bottom:14px;}
.ov-panel p + p{margin-top:12px;}
@media (max-width:900px){ .ov-grid{grid-template-columns:1fr;} }

/* ---------- Services ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:44px;}
.svc-card{background:#fff; border:1px solid var(--border); border-radius:14px; padding:30px 24px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.svc-card:hover{transform:translateY(-5px); box-shadow:0 16px 40px rgba(18,35,63,.1); border-color:transparent;}
.svc-icon{width:52px; height:52px; border-radius:12px; background:var(--navy); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.svc-icon svg{width:28px; height:28px;}
.svc-card h3{font-size:16px;}
.svc-card p{font-size:13.8px;}
@media (max-width:1000px){ .svc-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .svc-grid{grid-template-columns:1fr;} }

/* ---------- Deep-dive tabs ---------- */
.tabs-bar{display:flex; flex-wrap:wrap; gap:10px; margin:40px 0 36px; border-bottom:1px solid var(--border); padding-bottom:0;}
.tab-btn{background:none; border:none; cursor:pointer; font-family:inherit; font-size:14px; font-weight:600; color:var(--muted); padding:12px 6px; border-bottom:2.5px solid transparent; transition:color .15s, border-color .15s;}
.tab-btn.active{color:var(--navy); border-color:var(--orange);}
.tab-panel{display:none;}
.tab-panel.active{display:block; animation:fadein .3s ease;}
@keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.tab-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start;}
.tab-icon{width:60px; height:60px; border-radius:14px; background:var(--navy); display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
.tab-icon svg{width:32px; height:32px;}
.check-list{display:flex; flex-direction:column; gap:11px; margin-top:6px;}
.check-list li{display:flex; gap:10px; font-size:14.5px; color:var(--text); align-items:flex-start;}
.check-list li svg{flex:0 0 auto; margin-top:3px;}
.pillbox{display:flex; flex-wrap:wrap; gap:9px; margin-top:14px;}
.pill{border:1.3px solid var(--navy); color:var(--navy); font-weight:600; font-size:12.6px; padding:7px 15px; border-radius:20px;}
.brandlabel{font-size:11.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--gray); margin:16px 0 4px;}
@media (max-width:800px){ .tab-grid{grid-template-columns:1fr; gap:26px;} }

/* ---------- MV/LV callout ---------- */
.mvlv{background:linear-gradient(135deg, var(--navy), var(--navy2)); border-radius:20px; padding:48px; color:#fff; display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center;}
.mvlv .tab-icon{background:var(--orange);}
.mvlv .tab-icon svg path, .mvlv .tab-icon svg circle{fill:#12233F !important; stroke:#12233F !important;}
.mvlv h3{color:#fff; font-size:22px;}
.mvlv p{color:#C3CDDA;}
@media (max-width:700px){ .mvlv{grid-template-columns:1fr;} }

/* ---------- Integration flow ---------- */
.flow-wrap{margin-top:50px; display:flex; flex-wrap:wrap; justify-content:center; gap:14px 10px;}
.flow-chip{background:var(--navy); color:#fff; font-size:13.5px; font-weight:600; padding:14px 20px; border-radius:10px; display:flex; align-items:center; gap:8px;}
.flow-dot{width:7px; height:7px; border-radius:50%; background:var(--orange);}
.flow-sep{align-self:center; color:var(--orange); font-size:16px; font-weight:700;}

/* ---------- Approach steps ---------- */
.steps-row{display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:44px; counter-reset:step;}
.step{background:var(--lightbg); border:1px solid var(--border); border-radius:14px; padding:26px 18px; position:relative;}
.step-num{font-size:26px; font-weight:700; color:var(--orange); margin-bottom:14px;}
.step h3{font-size:14.5px; margin-bottom:6px;}
.step p{font-size:12.6px;}
@media (max-width:1000px){ .steps-row{grid-template-columns:repeat(3,1fr);} }
@media (max-width:600px){ .steps-row{grid-template-columns:repeat(2,1fr);} }

/* ---------- Why us ---------- */
.why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px 40px; margin-top:44px;}
.why-item{display:flex; gap:16px;}
.why-tick{flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--navy); display:flex; align-items:center; justify-content:center;}
.why-item h3{font-size:15.5px;}
.why-item p{font-size:13.6px;}
@media (max-width:800px){ .why-grid{grid-template-columns:1fr;} }

/* ---------- Industries ---------- */
.ind-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px;}
.ind-card{border:1px solid var(--border); border-radius:12px; overflow:hidden; text-align:center; padding:26px 10px; background:#fff; transition:box-shadow .2s;}
.ind-card:hover{box-shadow:0 12px 30px rgba(18,35,63,.08);}
.ind-bar{height:4px; background:var(--orange); margin:-26px -10px 18px;}
.ind-card span{font-weight:600; font-size:14px; color:var(--navy);}
@media (max-width:800px){ .ind-grid{grid-template-columns:repeat(2,1fr);} }

/* ---------- Brands ---------- */
.brand-section{background:var(--lightbg);}
.brand-cats{display:grid; grid-template-columns:1fr 1fr; gap:34px 60px; margin-top:40px;}
.brand-cat-title{font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--navy); margin-bottom:12px;}
@media (max-width:800px){ .brand-cats{grid-template-columns:1fr;} }

/* ---------- Contact ---------- */
.contact-section{background:var(--navy); color:#fff; position:relative; overflow:hidden;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:44px;}
@media (max-width:800px){ .contact-grid{grid-template-columns:1fr; gap:30px;} }
.contact-info-row{display:flex; gap:16px; align-items:flex-start; margin-bottom:26px;}
.contact-info-icon{width:42px; height:42px; border-radius:10px; background:rgba(245,166,35,.15); display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.contact-info-icon svg{width:20px; height:20px;}
.contact-label{font-size:11px; color:#8FA0B8; text-transform:uppercase; letter-spacing:1px; font-weight:700; margin-bottom:3px;}
.contact-val{font-size:16px; font-weight:600;}
.contact-val a{color:#fff;}
.contact-val a:hover{color:var(--orange);}
.form{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:34px;}
.form-row{margin-bottom:18px;}
.form-row label{display:block; font-size:12.5px; font-weight:600; color:#C3CDDA; margin-bottom:7px; letter-spacing:.3px;}
.form-row input, .form-row textarea{width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:8px; padding:12px 14px; color:#fff; font-family:inherit; font-size:14px;}
.form-row input::placeholder, .form-row textarea::placeholder{color:#7E8FA6;}
.form-row input:focus, .form-row textarea:focus{outline:none; border-color:var(--orange);}
.form-note{font-size:12px; color:#7E8FA6; margin-top:12px;}

/* ---------- Footer ---------- */
footer{background:var(--navy3); color:#8697AD; padding:50px 0 26px;}
.foot-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.08);}
.foot-brand img{width:150px; margin-bottom:14px;}
.foot-brand p{max-width:320px; font-size:13.5px; color:#7E8FA6;}
.foot-links{display:flex; gap:70px; flex-wrap:wrap;}
.foot-col h4{color:#fff; font-size:13px; margin-bottom:14px; letter-spacing:.5px;}
.foot-col a{display:block; font-size:13.5px; color:#8697AD; margin-bottom:10px;}
.foot-col a:hover{color:var(--orange);}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:22px; font-size:12.5px; color:#63728A;}
@media (max-width:700px){ .foot-top{flex-direction:column;} }

/* ---------- Back to top ---------- */
.totop{position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%; background:var(--orange); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:999; cursor:pointer; border:none;}
.totop.show{opacity:1; pointer-events:auto;}
.totop:hover{transform:translateY(-3px);}

/* Section title alignment helper */
.stitle{max-width:640px;}
.stitle.center{margin-left:auto; margin-right:auto; text-align:center;}