:root{
  --primary:#1e5eff; --primary-dark:#154bb8; --primary-soft:#eaf1ff;
  --accent:#f5a623; --text:#1f2735; --muted:#5f6b7d; --line:#e3e8f0;
  --bg:#ffffff; --bg-soft:#f5f7fb;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Segoe UI',"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.7; overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:#eef2f7}
::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px}

#scrollbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--primary);z-index:1000}

/* ---------- Navbar ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 5%;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);transition:.3s;
}
nav.scrolled{box-shadow:0 4px 20px rgba(15,35,70,.08)}
.logo{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:800;color:var(--text);white-space:nowrap}
.logo .chip{width:30px;height:30px;border-radius:6px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  position:relative}
.logo .chip::before{content:'';position:absolute;inset:7px;background:#fff;border-radius:3px}
.logo .chip::after{content:'';position:absolute;left:-3px;top:9px;width:3px;height:3px;background:var(--accent);
  box-shadow:33px 3px 0 -1px var(--accent),6px -8px 0 -1px var(--accent),27px -5px 0 -1px var(--accent)}
.logo .page-title{font-size:12px;color:var(--primary);letter-spacing:1px;font-weight:700;
  border:1px solid var(--primary);padding:2px 8px;border-radius:5px;margin-left:2px}
.nav-links{display:flex;gap:2px}
.nav-links a{padding:8px 14px;font-size:15px;color:var(--muted);border-radius:6px;transition:.25s;font-weight:500}
.nav-links a:hover{color:var(--primary);background:var(--primary-soft)}
.nav-links a.active{color:var(--primary);background:var(--primary-soft);font-weight:600}
.nav-cta{background:var(--primary);color:#fff;padding:9px 20px;border-radius:6px;font-weight:600;transition:.25s;white-space:nowrap}
.nav-cta:hover{background:var(--primary-dark)}
.burger{display:none;cursor:pointer;flex-direction:column;gap:5px}
.burger span{width:24px;height:2px;background:var(--text);border-radius:1px;transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Page header ---------- */
.page-header{
  padding:120px 5% 80px;text-align:center;position:relative;overflow:hidden;
  background:
    linear-gradient(120deg,rgba(30,94,255,.06),transparent 45%),
    var(--bg-soft);
  border-bottom:1px solid var(--line);
}
.page-header h1{font-size:clamp(30px,5vw,46px);color:var(--text);margin:10px 0}
.page-header h1 span{color:var(--primary)}
.page-header .tag{letter-spacing:3px;color:var(--primary);font-size:13px;font-weight:600}
.page-header p{color:var(--muted);max-width:600px;margin:0 auto;font-size:16px}
.crumbs{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted)}
.crumbs a{color:var(--primary)}
.crumbs b{color:var(--text);font-weight:600}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:12px 28px;border-radius:6px;font-weight:600;
  transition:.25s;cursor:pointer;border:none;font-size:15px}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--primary);color:var(--primary);background:#fff}
.btn-ghost:hover{background:var(--primary-soft)}
.btn-gold{background:var(--accent);color:#fff}
.btn-gold:hover{background:#df8c0f;transform:translateY(-2px)}

/* ---------- Sections ---------- */
section{padding:84px 5%}
.sec-head{text-align:center;margin-bottom:48px}
.sec-head .tag{letter-spacing:3px;color:var(--primary);font-size:13px;font-weight:600}
.sec-head h2{font-size:clamp(26px,3.6vw,38px);color:var(--text);margin:10px 0}
.sec-head h2 span{color:var(--primary)}
.sec-head p{color:var(--muted);max-width:560px;margin:0 auto;font-size:15px}
hr.divider{width:56px;height:3px;border:none;margin:14px auto;background:var(--accent);border-radius:2px}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:.8s cubic-bezier(.2,.7,.3,1)}
.reveal.visible{opacity:1;transform:none}
.reveal.delay1{transition-delay:.12s}.reveal.delay2{transition-delay:.24s}
.reveal.delay3{transition-delay:.36s}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:10px;transition:.28s;overflow:hidden;position:relative}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(20,40,80,.10);border-color:#cdd8e8}
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- Icon badge (business style) ---------- */
.icon-badge{
  width:56px;height:56px;border-radius:10px;
  background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:24px;
  margin-bottom:16px;transition:.25s;
}
.card:hover .icon-badge{background:var(--primary);color:#fff}

/* ---------- Image helpers ---------- */
.img-cover{width:100%;height:200px;object-fit:cover}
.hero-left{padding:20px 0}

/* ---------- Footer ---------- */
footer{background:#12233f;color:#cdd8e8;padding:56px 5% 28px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px}
.foot-grid h5{font-size:15px;margin-bottom:16px;color:#fff}
.foot-grid a,.foot-grid p{font-size:14px;color:#9fb0c9}
.foot-grid ul{list-style:none}
.foot-grid li{padding:5px 0}
.foot-grid a:hover{color:#fff}
.copyright{text-align:center;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);color:#71839e;font-size:13px}

/* ---------- Back to top ---------- */
#topBtn{position:fixed;bottom:28px;right:28px;width:46px;height:46px;border-radius:8px;z-index:950;
  background:var(--primary);color:#fff;font-size:18px;border:none;cursor:pointer;
  opacity:0;visibility:hidden;transition:.3s;box-shadow:0 8px 24px rgba(30,94,255,.35)}
#topBtn.show{opacity:1;visibility:visible}

/* ---------- Contact ---------- */
.info-item{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.info-item .icon-badge{margin-bottom:0;width:46px;height:46px;border-radius:8px;font-size:19px;flex-shrink:0}
.info-item b{display:block;margin-bottom:3px}
.info-item p{color:var(--muted);font-size:14px}
.map{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:22px}
.map iframe{width:100%;height:240px;border:0}
form .field{margin-bottom:18px}
form label{display:block;font-size:14px;margin-bottom:6px;color:var(--text);font-weight:600}
form input,form textarea{
  width:100%;padding:13px 15px;border-radius:8px;font-size:15px;color:var(--text);
  background:#fff;border:1px solid var(--line);outline:none;transition:.25s;font-family:inherit;
}
form input:focus,form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(30,94,255,.12)}
form textarea{height:110px;resize:vertical}
.f-success{display:none;text-align:center;padding:24px;color:#16a34a;font-weight:700}

/* ---------- Filter ---------- */
.filter-btn{padding:8px 20px;border-radius:30px;cursor:pointer;font-size:14px;transition:.25s;
  border:1px solid var(--line);color:var(--muted);background:#fff}
.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.filter-btn:hover{border-color:var(--primary);color:var(--primary)}
.prod{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px;transition:.28s;opacity:1;transform:scale(1)}
.prod:hover{transform:translateY(-6px);border-color:#cdd8e8;box-shadow:0 14px 34px rgba(20,40,80,.10)}
.prod.hide{display:none}
.prod img.icon-lg{width:52px;height:52px;object-fit:cover;margin:0 auto 14px;border-radius:8px}
.prod h4{font-size:16px;margin-bottom:6px}
.prod .spec{font-size:12px;color:var(--muted);background:var(--bg-soft);padding:3px 10px;border-radius:5px;display:inline-block;margin:3px 5px 0 0}
.prod .price{color:var(--accent);font-weight:700;font-size:15px;margin-top:12px}
.prod .desc{color:var(--primary);font-size:13px;margin-top:6px}

/* ---------- Team ---------- */
.team-card{text-align:center;padding:30px 20px}
.avatar{width:96px;height:96px;margin:0 auto 14px;border-radius:50%;overflow:hidden;border:3px solid var(--primary-soft)}
.avatar img{width:100%;height:100%;object-fit:cover}
.team-card h4{font-size:17px}
.team-card .role{color:var(--primary);font-size:13px;margin:4px 0 10px}
.team-card p{color:var(--muted);font-size:13px}

/* ---------- News ---------- */
.news{padding:0;display:flex;flex-direction:column}
.news img{height:160px;object-fit:cover;border-bottom:1px solid var(--line)}
.news .body{padding:20px;display:flex;flex-direction:column;gap:8px;flex-grow:1}
.news .news-cat{font-size:11px;border:1px solid var(--primary);color:var(--primary);padding:2px 8px;border-radius:12px;align-self:flex-start}
.news .date{font-size:13px;color:var(--muted)}
.news h4{font-size:16px;transition:.25s}
.news:hover h4{color:var(--primary)}
.news p{font-size:13px;color:var(--muted)}
.news .more{color:var(--primary);font-size:13px;font-weight:600}

/* ---------- Media ---------- */
@media(max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{position:absolute;top:62px;left:5%;right:5%;flex-direction:column;
    background:#fff;padding:18px;border-radius:10px;gap:4px;border:1px solid var(--line);
    transform:scaleY(0);transform-origin:top;transition:.3s;opacity:0;box-shadow:0 16px 40px rgba(20,40,80,.12)}
  .nav-links.open{transform:scaleY(1);opacity:1;display:flex}
  .burger{display:flex}
  .nav-cta{display:none}
}
@media(max-width:560px){
  .grid-3,.grid-4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  section{padding:64px 5%}
  .logo .page-title{display:none}
}