/* ============================================================
   Sunwin Modules — sunwinmodules.com
   Design tokens
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  /* base palette — light, airy, logo-aligned */
  --bg:        #F4F8F5;
  --surface:   #FFFFFF;
  --ink:       #1A2E24;
  --ink-soft:  #4A6356;
  --line:      #D8E5DC;
  --line-soft: #E8F0EB;

  /* brand — sampled from the Sunwin logo (deep green + orange accent) */
  --brand:        #006B45;   /* primary logo green */
  --brand-dark:   #004F32;   /* hover / deeper green */
  --brand-light:  #E6F4EC;   /* soft green wash */
  --brand-orange: #E86A00;   /* logo W accent orange */

  /* deep green used where dark surfaces are needed (never pure black) */
  --brand-ink:    #0D3D28;

  /* three product lines */
  --cat1:      #1B6B4A;  /* Optical — green family */
  --cat1-bg:   #E8F5EE;
  --cat2:      #0E7A8A;  /* Wireless — teal */
  --cat2-bg:   #E6F5F7;
  --cat3:      #C96B12;  /* Other — warm orange family */
  --cat3-bg:   #FDF3E8;

  --radius: 6px;
  --maxw: 1160px;

  /* headings: bold geometric sans, matched to the weight/shape of the SUNWIN wordmark */
  --font-display: 'Poppins', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  /* body: neutral, high-legibility sans for long technical copy */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;

  --shadow-sm: 0 2px 8px rgba(0, 80, 50, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 80, 50, 0.10);
  --shadow-lg: 0 16px 40px rgba(0, 80, 50, 0.14);
  --shadow-hover: 0 12px 32px rgba(0, 107, 69, 0.16);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  font-size:16px;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--brand-ink);
  line-height:1.25;
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:-0.005em;
}
h3,h4{font-weight:600;}
p{margin:0 0 1em; color:var(--ink-soft); font-weight:400;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.eng{font-family:var(--font-display); letter-spacing:.01em;}

/* ---------- top bar ---------- */
.topbar{
  background:var(--brand);
  color:#E8F5EE;
  font-size:12.5px;
}
.topbar .wrap{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px;
}
.topbar a{color:#E8F5EE;}
.topbar a:hover{color:#fff;}
.topbar span+span{margin-left:18px;}

/* ---------- header / nav ---------- */
header.site{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
header.site .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.logo{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  flex:0 0 auto;
}
.logo img{
  height:40px; width:auto; flex:0 0 auto; max-width:200px;
}
.logo .logo-text{
  font-family:var(--font-body); font-weight:500; font-size:10.5px; color:var(--ink-soft);
  white-space:nowrap; letter-spacing:0.02em;
}

nav.main{display:flex; align-items:center; gap:2px;}
nav.main > ul{display:flex; align-items:stretch;}
nav.main > ul > li{position:relative;}
nav.main > ul > li > a{
  display:flex; align-items:center; height:78px; padding:0 12px;
  font-size:14px; font-weight:500; color:var(--brand-ink);
  border-bottom:2px solid transparent; white-space:nowrap;
}
nav.main > ul > li:hover > a,
nav.main > ul > li.active > a{
  border-bottom-color:var(--brand);
  color:var(--brand);
}

.megamenu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:820px; background:var(--surface);
  border:1px solid var(--line); border-top:3px solid var(--brand);
  box-shadow:0 18px 40px rgba(16,25,42,.12);
  padding:22px 24px; display:none;
  grid-template-columns:repeat(3,1fr); gap:22px;
}
nav.main > ul > li:hover .megamenu{display:grid;}
.megamenu .col h4{
  font-size:11.5px; text-transform:none; letter-spacing:.02em;
  color:var(--ink); margin-bottom:10px; padding-bottom:8px;
  border-bottom:1px solid var(--line-soft);
}
.megamenu .col.c1 h4{color:var(--cat1);}
.megamenu .col.c2 h4{color:var(--cat2);}
.megamenu .col.c3 h4{color:var(--cat3);}
.megamenu .col li a{
  display:block; font-size:13.5px; color:var(--ink-soft); padding:5px 0;
}
.megamenu .col li a:hover{color:var(--brand-ink);}
.megamenu .col li a .zh{color:inherit;}
.megamenu .col li a .en{display:block; font-size:11.5px; color:#9AA4AF;}


/* simple dropdown (Manufacturing / Quality System) */
nav.main > ul > li .dropdown{
  position:absolute; top:100%; left:0;
  min-width:180px; background:var(--surface);
  border:1px solid var(--line); border-top:3px solid var(--brand);
  box-shadow:0 12px 28px rgba(16,25,42,.10);
  padding:8px 0; display:none; z-index:50;
}
nav.main > ul > li:hover .dropdown{display:block;}
nav.main > ul > li .dropdown a{
  display:block; padding:9px 18px; font-size:13.5px; color:var(--ink-soft);
  height:auto; border:none;
}
nav.main > ul > li .dropdown a:hover{color:var(--brand); background:#f7faf8;}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:var(--radius);
  font-size:14px; font-weight:600; border:1px solid transparent;
}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:hover{background:var(--brand-dark);}
.btn-ghost{border-color:var(--line); color:var(--brand-ink); background:#fff;}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand);}

/* ---------- hero ---------- */
.hero{
  background: linear-gradient(135deg, #E8F5EE 0%, #F4F8F5 55%, #FFF8F0 100%);
  color:var(--ink);
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero .wrap{
  padding:20px 28px 18px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center;
  position:relative; z-index:2;
}
.hero .eyebrow{
  font-size:12.5px; color:var(--brand); margin-bottom:10px; font-weight:600;
  letter-spacing:0.02em;
}
.hero h1{
  color:var(--brand-ink); font-size:28px; max-width:18ch;
}
.hero p.lead{
  color:var(--ink-soft); font-size:15px; max-width:46ch;
}
.hero-actions{display:flex; gap:14px; margin-top:26px;}
.hero-figure{position:relative;}
.hero-figure svg{width:100%; height:auto;}

/* subtle circuit-trace backdrop */
.circuit-bg{
  position:absolute; inset:0; opacity:.16; z-index:1;
}

/* ---------- stats strip ---------- */
.stats{
  background:var(--surface); border-bottom:1px solid var(--line);
}
.stats .wrap{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:30px 28px;
}
.stats .stat{ text-align:left; padding:0 20px; border-left:1px solid var(--line-soft);}
.stats .stat:first-child{border-left:none; padding-left:0;}
.stats .stat b{
  display:block; font-family:var(--font-display); font-size:28px; color:var(--brand-ink);
}
.stats .stat span{font-size:13px; color:var(--ink-soft);}

/* ---------- sections ---------- */
section{padding:76px 0;}
.section-head{max-width:640px; margin-bottom:44px;}
.section-head .kicker{
  font-size:13px; font-weight:600; color:var(--brand); margin-bottom:10px;
}
.section-head h2{font-size:30px;}

/* three category cards on home */
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.cat-card{
  background:var(--surface); border:1px solid var(--line);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  box-shadow: var(--shadow-sm);

  border-top:4px solid var(--cat1);
  padding:28px 26px; border-radius:var(--radius);
}
.cat-card.c2{border-top-color:var(--cat2);}
.cat-card.c3{border-top-color:var(--cat3);}
.cat-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--brand);
}
.cat-card .num{
  font-family:var(--font-display); font-size:13px; color:var(--ink-soft); margin-bottom:14px; display:block;
}
.cat-card h3{font-size:19px; margin-bottom:4px;}
.cat-card h3 .en{display:block; font-size:12.5px; font-weight:500; color:var(--ink-soft); margin-top:2px;}
.cat-card ul{margin-top:16px; border-top:1px solid var(--line-soft); padding-top:14px;}
.cat-card ul li{
  font-size:13.5px; color:var(--ink-soft); padding:6px 0;
  display:flex; justify-content:space-between; gap:10px;
}
.cat-card ul li .tag{
  font-size:11px; color:#9AA4AF; white-space:nowrap; flex:0 0 auto;
}
.cat-card .more{
  display:inline-block; margin-top:18px; font-size:13.5px; font-weight:600; color:var(--cat1);
}
.cat-card.c2 .more{color:var(--cat2);}
.cat-card.c3 .more{color:var(--cat3);}

/* capability grid */
.cap-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.cap-card{
  background:var(--surface); border:1px solid var(--line); padding:26px 22px; border-radius:var(--radius);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  box-shadow: var(--shadow-sm);
}
.cap-card:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: var(--brand);
}
.cap-card .ico{
  width:38px; height:38px; margin-bottom:16px; color:var(--brand);
}
.cap-card h4{font-size:15.5px; margin-bottom:6px;}
.cap-card p{font-size:13.5px; margin:0;}

/* process strip */
.process{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); overflow:hidden;
}
.process .step{
  padding:24px 20px; border-right:1px solid var(--line-soft); position:relative;
  transition: background .2s ease;
}
.process .step:hover{background:var(--brand-light);}
.process .step:last-child{border-right:none;}
.process .step .n{font-family:var(--font-display); color:var(--cat1); font-size:13px; margin-bottom:10px; display:block;}
.process .step h4{font-size:14.5px; margin-bottom:6px;}
.process .step p{font-size:12.5px; margin:0;}

/* CTA band */
.cta-band{
  background:var(--brand); color:#fff;
}
.cta-band .wrap{
  display:flex; align-items:center; justify-content:space-between; padding:44px 28px;
}
.cta-band h3{color:#fff; font-size:23px; margin:0;}
.cta-band p{color:#D4EDE0; margin:6px 0 0;}

/* ---------- footer ---------- */
footer.site{
  background:var(--brand-ink); color:#A8C9B6; padding:56px 0 26px; font-size:13.5px;
}
footer.site .cols{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.08);
}
footer.site h5{color:#DCEAE1; font-size:13px; margin-bottom:14px; font-weight:600;}
footer.site li{padding:5px 0;}
footer.site a:hover{color:#fff;}
footer.site .bottom{display:flex; justify-content:space-between; padding-top:22px; color:#71897C; font-size:13px; font-weight:400;}

/* ---------- page header (inner pages) ---------- */
.page-head{
  background: linear-gradient(135deg, #E8F5EE 0%, #F4F8F5 100%);
  color:var(--ink); padding:36px 0 28px;
  border-bottom:1px solid var(--line);
}
.page-head .crumbs{font-size:12.5px; color:var(--brand); margin-bottom:10px;}
.page-head h1{color:var(--brand-ink); font-size:28px; margin-bottom:6px;}
.page-head p{color:var(--ink-soft); max-width:60ch; margin:0;}

/* product category anchor sections */
.pcat{padding:60px 0; border-bottom:1px solid var(--line);}
.pcat:last-child{border-bottom:none;}
.pcat-head{display:flex; align-items:baseline; gap:16px; margin-bottom:8px;}
.pcat-head .dot{width:11px; height:11px; border-radius:2px; background:var(--cat1); flex:0 0 auto;}
.pcat.c2 .dot{background:var(--cat2);}
.pcat.c3 .dot{background:var(--cat3);}
.pcat-head h2{font-size:24px; margin:0;}
.pcat-head .en{font-size:14px; color:var(--ink-soft); font-weight:500;}
.pcat > p.desc{max-width:70ch; margin-bottom:30px;}

.sub-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.sub-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  box-shadow: var(--shadow-sm);
}
.sub-card:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: var(--brand);
}
.sub-card .idx{font-family:var(--font-display); font-size:12.5px; color:var(--cat1); display:block; margin-bottom:8px;}
.pcat.c2 .sub-card .idx{color:var(--cat2);}
.pcat.c3 .sub-card .idx{color:var(--cat3);}
.sub-card h3{font-size:15.5px; margin-bottom:2px;}
.sub-card h3 .en{display:block; font-size:12px; font-weight:500; color:var(--ink-soft); margin-top:2px;}
.sub-card ul{margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft);}
.sub-card ul li{font-size:13px; color:var(--ink-soft); padding:4px 0;}
.sub-card ul li .en{display:block; font-size:11.5px; color:#9AA4AF;}
.sub-card .thumb{
  height:96px; border-radius:2px; background:var(--cat1-bg); margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
}
.pcat.c2 .sub-card .thumb{background:var(--cat2-bg);}
.pcat.c3 .sub-card .thumb{background:var(--cat3-bg);}
.sub-card .thumb svg{width:44px; height:44px; color:var(--cat1);}
.pcat.c2 .sub-card .thumb svg{color:var(--cat2);}
.pcat.c3 .sub-card .thumb svg{color:var(--cat3);}

/* contact page */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px;}
.info-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  box-shadow: var(--shadow-sm);
}
.info-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--brand);
}
.info-card + .info-card{margin-top:18px;}
.info-card h4{font-size:14px; margin-bottom:4px;}
.info-card p{margin:0; font-size:14px;}
form.contact-form{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px;}
form.contact-form label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px;}
form.contact-form .row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
form.contact-form input, form.contact-form select, form.contact-form textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--radius); padding:11px 12px; font-size:14px; font-family:inherit; color:var(--ink); background:#fff;
}
form.contact-form textarea{min-height:120px; resize:vertical;}
form.contact-form .field{margin-bottom:16px;}

/* about page */
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center;}
.timeline{border-left:2px solid var(--line); padding-left:22px;}
.timeline li{position:relative; padding-bottom:26px;}
.timeline li::before{content:''; position:absolute; left:-27px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--brand);}
.timeline li b{display:block; font-family:var(--font-display); color:var(--brand-ink); font-size:14px;}

/* responsive */
@media (max-width: 960px){
  .hero .wrap{grid-template-columns:1fr;}
  .cat-grid, .cap-grid, .sub-grid{grid-template-columns:1fr 1fr;}
  .stats .wrap{grid-template-columns:1fr 1fr;}
  footer.site .cols{grid-template-columns:1fr 1fr;}
  .process{grid-template-columns:1fr 1fr;}
  .about-grid, .contact-grid{grid-template-columns:1fr;}
  .megamenu{position:fixed; left:0; right:0; width:auto; transform:none;}
}
@media (max-width: 640px){
  .cat-grid, .cap-grid, .sub-grid, .process{grid-template-columns:1fr;}
  nav.main{display:none;}
  .hero h1{font-size:30px;}
  header.site .wrap{height:64px;}
  .logo img{height:32px; max-width:150px;}
  .logo .logo-text{display:none;}
}