/* ============================================================
   SINCORE NEW ENERGY — design system
   Palette drawn from the photovoltaic cell itself:
   deep module blue, busbar silver hairlines, sun amber.
   ============================================================ */

:root{
  --ink:      #0A2233;   /* deep brand navy     */
  --ink-2:    #0E2C42;
  --cell:     #11405F;   /* brand blue          */
  --cell-2:   #1A5C94;
  --sun:      #1CB29A;   /* brand teal (from logo) */
  --sun-soft: #43D6BC;
  --grad:     linear-gradient(120deg,#25B79C 0%,#1A5C94 100%);
  --paper:    #F4F7FA;
  --paper-2:  #FFFFFF;
  --text:     #1D2B3A;
  --muted:    #5B6B7C;
  --muted-inv:#9BB6C6;
  --line:     rgba(15,36,56,.12);
  --line-inv: rgba(255,255,255,.14);
  --radius:   14px;
  --disp:     "Archivo","Noto Sans SC",sans-serif;
  --body:     "Source Sans 3","Noto Sans SC",sans-serif;
  --mono:     "Archivo","Noto Sans SC",sans-serif; /* label face */
  --maxw:     1180px;
  --shadow:   0 18px 50px -18px rgba(10,24,38,.28);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  color:var(--text);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:4px}

/* ---------- language toggle mechanics ---------- */
html[data-lang="en"] .zh{display:none !important}
html[data-lang="zh"] .en{display:none !important}
html[data-lang="zh"] body{font-family:"Noto Sans SC",var(--body)}

/* ---------- layout primitives ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section.tight{padding:72px 0}
.section.on-ink{background:var(--ink);color:#EAF1F8}
.section.on-white{background:var(--paper-2)}

/* nameplate eyebrow — echoes the label on the back of a module */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cell-2);
  margin-bottom:20px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--sun)}
.on-ink .eyebrow{color:var(--sun-soft)}

h1,h2,h3{font-family:var(--disp);line-height:1.15;letter-spacing:-.015em;color:var(--ink)}
.on-ink h1,.on-ink h2,.on-ink h3{color:#fff}
h1{font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700;margin-bottom:18px}
h3{font-size:1.22rem;font-weight:600}
.lead{font-size:1.12rem;color:var(--muted);max-width:62ch}
.on-ink .lead{color:var(--muted-inv)}

/* ---------- busbar grid (signature) ---------- */
.busbar{position:relative;overflow:hidden}
.busbar::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,var(--line-inv) 0 1px,transparent 1px 120px),
    repeating-linear-gradient(0deg,var(--line-inv) 0 1px,transparent 1px 120px);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.15) 70%,transparent);
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:28px;height:72px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand img{height:46px;width:auto;flex:none}
.brand .word{font-family:var(--disp);font-weight:700;color:var(--ink);font-size:1.02rem;letter-spacing:.02em;line-height:1.1}
.brand .word small{display:block;font-family:var(--mono);font-weight:600;font-size:.6rem;letter-spacing:.2em;color:var(--sun)}
.nav-links{display:flex;gap:6px}
.nav-links a{
  color:#3A4E60;font-size:.92rem;font-weight:500;
  padding:9px 14px;border-radius:8px;transition:.2s;
}
.nav-links a:hover{color:var(--ink);background:rgba(26,92,148,.08)}
.nav-links a[aria-current="page"]{color:var(--cell-2);background:rgba(28,178,154,.12)}
.lang-btn{
  font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.06em;
  color:#fff;background:var(--grad);border:none;border-radius:8px;
  padding:9px 15px;cursor:pointer;transition:.2s;box-shadow:0 4px 14px -6px rgba(26,92,148,.5);
}
.lang-btn:hover{filter:brightness(1.12)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer}
.menu-btn span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;transition:.25s}

/* ---------- hero ---------- */
.hero{
  position:relative;color:#fff;background:var(--ink);
  min-height:82vh;display:flex;align-items:center;
}
.hero .bg{position:absolute;inset:0;overflow:hidden}
.hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.hero .bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,24,38,.94) 20%,rgba(10,24,38,.55) 60%,rgba(10,24,38,.35));
}
.hero .wrap{position:relative;padding-top:90px;padding-bottom:90px}
.hero h1{color:#fff;max-width:15ch}
.hero h1 .accent{color:var(--sun-soft)}
.hero .lead{color:#C9D8E5;margin:22px 0 34px;max-width:56ch}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--disp);font-weight:600;font-size:.98rem;
  padding:14px 26px;border-radius:10px;transition:.2s;border:1px solid transparent;
}
.btn.primary{background:var(--grad);color:#fff;box-shadow:0 8px 22px -10px rgba(26,92,148,.65)}
.btn.primary:hover{filter:brightness(1.12);transform:translateY(-2px)}
.btn.ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:var(--cell)}

/* nameplate stat strip under hero */
.plate{
  position:relative;background:var(--ink-2);
  border-top:1px solid var(--line-inv);
}
.plate .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.plate .cellbox{
  padding:26px 22px;border-left:1px solid var(--line-inv);
}
.plate .cellbox:first-child{border-left:none}
.plate b{font-family:var(--disp);font-size:1.35rem;color:#fff;display:block;letter-spacing:-.01em}
.plate span{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-inv)}

/* ---------- cards ---------- */
.grid{display:grid;gap:26px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:.25s;display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(28,74,121,.3)}
.card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:.5s}
.card:hover .thumb img{transform:scale(1.05)}
.card .body{padding:26px;flex:1;display:flex;flex-direction:column;gap:10px}
.card .body p{color:var(--muted);font-size:.95rem;flex:1}
.card .go{font-family:var(--mono);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cell-2)}
.card:hover .go{color:var(--sun)}

/* brand card (products hub) */
.brand-card .thumb{background:linear-gradient(160deg,#0F2438,#123253);display:flex;align-items:center;justify-content:center;padding:26px}
.brand-card .thumb img{object-fit:contain;height:100%;width:auto;max-width:80%}

/* ---------- module nameplate spec card (signature element) ---------- */
.spec-card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:10px;
  padding:22px 22px 18px;position:relative;transition:.2s;
}
.spec-card::before{
  content:"";position:absolute;top:0;left:22px;right:22px;height:3px;
  background:linear-gradient(90deg,#25B79C,#1A5C94 60%,transparent);border-radius:0 0 3px 3px;
}
.spec-card:hover{border-color:var(--cell-2);box-shadow:var(--shadow);transform:translateY(-3px)}
.spec-card .model{font-family:var(--disp);font-weight:600;font-size:1.02rem;color:var(--ink);letter-spacing:.01em;margin-bottom:14px}
.spec-card dl{display:grid;gap:0}
.spec-card .row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-top:1px dashed var(--line)}
.spec-card dt{font-size:.8rem;color:var(--muted)}
.spec-card dd{font-family:var(--body);font-weight:600;font-size:.92rem;color:var(--ink);text-align:right}
.spec-card .tag{
  display:inline-block;font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cell-2);background:rgba(28,74,121,.08);border-radius:4px;padding:3px 8px;margin-bottom:10px;
}

/* series header row on brand pages */
.series-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:56px 0 24px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.series-head:first-of-type{margin-top:0}
.series-head h3{font-size:1.4rem}
.series-head .note{font-family:var(--mono);font-weight:500;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* model table (LONGi) */
.model-table{width:100%;border-collapse:collapse;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.model-table th,.model-table td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line)}
.model-table th{font-family:var(--mono);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:#fff;border:none}
.model-table td{font-size:.92rem}
.model-table td:first-child{font-family:var(--disp);font-weight:600;color:var(--ink)}
.model-table tr:last-child td{border-bottom:none}
.model-table tr:hover td{background:rgba(245,168,31,.05)}
.table-scroll{overflow-x:auto;border-radius:10px}

/* brand page hero */
.page-hero{
  background:var(--ink);color:#fff;position:relative;overflow:hidden;
  padding:88px 0 72px;
}
.page-hero h1{color:#fff;font-size:clamp(2rem,4.4vw,3.2rem)}
.page-hero .lead{color:#C9D8E5;margin-top:16px}
.page-hero .crumb{font-family:var(--mono);font-weight:500;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-inv);margin-bottom:22px;display:flex;gap:10px;align-items:center}
.page-hero .crumb a:hover{color:var(--sun-soft)}
.page-hero .crumb .sep{color:var(--sun)}
.hero-split{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative}
.hero-split .art{display:flex;justify-content:center}
.hero-split .art img{max-height:380px;width:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}

/* split feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split .pic{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.split .pic img{width:100%;height:100%;object-fit:cover}
.checklist li{display:flex;gap:12px;padding:9px 0;color:var(--text)}
.checklist li::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:5px;
  background:var(--sun) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/12px no-repeat}
.on-ink .checklist li{color:#D9E5EF}

/* partner strip */
.partner-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.partner{
  border:1px solid var(--line);border-radius:10px;background:var(--paper-2);
  padding:26px 18px;text-align:center;transition:.2s;
}
.partner:hover{border-color:var(--cell-2);transform:translateY(-3px)}
.partner b{font-family:var(--disp);font-size:1.12rem;color:var(--ink);display:block}
.partner span{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.on-ink .partner{background:rgba(255,255,255,.04);border-color:var(--line-inv)}
.on-ink .partner b{color:#fff}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gallery figure{border-radius:12px;overflow:hidden;position:relative;aspect-ratio:4/3;background:var(--ink)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:.5s}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  background:linear-gradient(transparent,rgba(10,24,38,.9));color:#fff;
  font-size:.82rem;font-family:var(--mono);letter-spacing:.04em;
}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.contact-item{display:flex;gap:18px;padding:22px 0;border-bottom:1px dashed var(--line)}
.contact-item:last-child{border-bottom:none}
.contact-item .ic{
  flex:none;width:48px;height:48px;border-radius:12px;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.contact-item .ic svg{width:22px;height:22px;stroke:var(--sun);fill:none;stroke-width:1.8}
.contact-item b{display:block;font-family:var(--disp);color:var(--ink);margin-bottom:3px}
.contact-item a,.contact-item p{color:var(--muted);font-size:.96rem}
.contact-item a:hover{color:var(--cell-2)}

.form-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:36px;box-shadow:var(--shadow)}
.form-card label{display:block;font-family:var(--mono);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:18px 0 7px}
.form-card label:first-of-type{margin-top:0}
.form-card input,.form-card textarea,.form-card select{
  width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:9px;
  font-family:var(--body);font-size:.96rem;background:var(--paper);color:var(--text);
}
.form-card input:focus,.form-card textarea:focus,.form-card select:focus{outline:2px solid var(--sun);border-color:transparent}
.form-card textarea{min-height:120px;resize:vertical}
.form-card .btn{margin-top:24px;width:100%;justify-content:center;cursor:pointer;border:none;font-size:1rem}
.form-note{font-size:.8rem;color:var(--muted);margin-top:12px;text-align:center}

/* CTA band */
.cta-band{background:linear-gradient(120deg,#17967F 0%,#1A5C94 55%,var(--ink-2) 100%);color:#fff;position:relative;overflow:hidden}
.cta-band .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-top:64px;padding-bottom:64px}
.cta-band h2{color:#fff;margin:0;max-width:22ch}
.cta-band p{color:rgba(255,255,255,.85);margin-top:8px}

/* footer */
.site-footer{background:var(--ink);color:var(--muted-inv);border-top:1px solid var(--line-inv)}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:44px;padding:64px 0 48px}
.site-footer h4{font-family:var(--mono);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sun-soft);margin-bottom:18px}
.site-footer a{display:block;padding:5px 0;font-size:.92rem;transition:.15s}
.site-footer a:hover{color:#fff}
.site-footer p{font-size:.92rem}
.foot-bottom{border-top:1px solid var(--line-inv);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--body);font-size:.82rem}

/* reveal animation */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .card:hover,.spec-card:hover,.btn.primary:hover,.partner:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}
  .split,.contact-grid,.hero-split{grid-template-columns:1fr;gap:40px}
  .hero-split .art img{max-height:280px}
  .plate .wrap{grid-template-columns:repeat(2,1fr)}
  .plate .cellbox:nth-child(odd){border-left:none}
  .plate .cellbox{border-top:1px solid var(--line-inv)}
  .partner-strip{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .site-footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .section{padding:64px 0}
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}
  .menu-btn{display:block}
  .nav-links{
    display:none;position:absolute;top:72px;left:0;right:0;
    flex-direction:column;background:#fff;padding:14px 24px 22px;
    border-bottom:1px solid var(--line);box-shadow:0 20px 40px -20px rgba(10,34,51,.25);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 10px;font-size:1rem}
  .gallery{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr;gap:30px}
  .hero{min-height:70vh}
}

/* footer logo chip */
.foot-logo{background:#fff;border-radius:12px;padding:12px 18px;display:inline-block;margin-bottom:18px}
.foot-logo img{height:56px;width:auto}
