/* ============================================================
   NEGUP GROUP — V2 layer
   Builds on style.css (same tokens). Adds: video hero, stats bar,
   capability grid, media/video blocks, milestones, footprint,
   contact form, footer columns, floating WhatsApp.
   ============================================================ */

/* ---------- shared bits ---------- */
.section-lead{
  font-size:clamp(1rem,1.35vw,1.12rem);color:var(--txt-2);
  line-height:1.75;max-width:64ch;margin:0 0 56px;
}
.center-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:56px}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:48px}

.btn--lg{padding:15px 30px;font-size:15px}
.btn--o{
  background:transparent;color:var(--txt);
  border:1px solid var(--line-strong);
}
.btn--o:hover{border-color:var(--acc);color:var(--acc);background:rgba(0,229,140,.06)}
.btn--t{
  background:transparent;color:var(--txt-2);
  border:1px solid transparent;text-decoration:underline;
  text-underline-offset:5px;text-decoration-color:var(--line-strong);
}
.btn--t:hover{color:var(--acc);text-decoration-color:var(--acc)}
.btn--full{width:100%;justify-content:center}

/* ============================================================
   HERO — VIDEO
   ============================================================ */
.hero--video{min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
  transform:scale(1.04);
}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(5,7,10,.72) 0%,rgba(5,7,10,.42) 34%,rgba(5,7,10,.86) 88%,var(--bg) 100%),
    linear-gradient(94deg,rgba(5,7,10,.88) 0%,rgba(5,7,10,.42) 52%,rgba(5,7,10,.16) 100%);
}
.hero--video .hero__grid{z-index:2}
.hero--video .hero__in{position:relative;z-index:3}
.hero__sound{
  position:absolute;z-index:5;right:34px;bottom:34px;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line-strong);background:rgba(5,7,10,.55);
  backdrop-filter:blur(8px);color:var(--txt);
  transition:.3s var(--ease);
}
.hero__sound:hover{border-color:var(--acc);color:var(--acc)}
.hero__sound svg{width:19px;height:19px}
.hero__sound .ic-on{display:none}
.hero__sound.is-on .ic-on{display:block}
.hero__sound.is-on .ic-off{display:none}
.hero__cta{flex-wrap:wrap}

/* ---------- NEGUP = Never Ever Give Up! (brand-name-as-pledge) ---------- */
.never{
  display:flex;align-items:baseline;flex-wrap:wrap;
  gap:0 12px;margin:0 0 30px;
  font-family:var(--f-display);font-weight:800;
  letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.5rem,3.6vw,2.9rem);
}
.never__k{
  background:linear-gradient(100deg,#fff 6%,#9FE9C8 52%,var(--acc) 96%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.never__eq{
  color:var(--acc);font-weight:500;opacity:.85;
  font-size:.82em;transform:translateY(-.04em);
}
.never__v{display:inline-flex;flex-wrap:wrap;gap:0 .34em;color:var(--txt)}
.never__w{
  display:inline-block;
  opacity:0;transform:translateY(.42em) rotate(1.5deg);
  animation:neverIn .72s var(--ease) forwards;
  animation-delay:calc(var(--d) + 220ms);
}
.never__w--hit{
  color:var(--acc);
  text-shadow:0 0 34px rgba(0,229,140,.5);
}
/* underline sweeping beneath "Give up!" */
.never__v::after{
  content:'';display:block;height:2px;width:100%;
  margin-top:6px;border-radius:2px;
  background:linear-gradient(90deg,var(--acc),var(--acc-2),transparent);
  transform:scaleX(0);transform-origin:left;
  animation:neverBar .9s var(--ease) forwards;
  animation-delay:calc(var(--d,0ms) + 900ms);
}
@keyframes neverIn{to{opacity:1;transform:none}}
@keyframes neverBar{to{transform:scaleX(1)}}

.never__zh{
  display:none;color:var(--acc);
  text-shadow:0 0 34px rgba(0,229,140,.5);
}

/* CN mode: swap the word-by-word English for the 4-char idiom, drop the "=".
   setLang() writes documentElement.lang = "zh-CN", so match the prefix. */
html[lang^="zh"] .never__zh{display:inline-block}
html[lang^="zh"] .never__v,
html[lang^="zh"] .never__eq{display:none}
html:not([lang^="zh"]) .never__zh{display:none}
@media (prefers-reduced-motion:reduce){
  .never__w{opacity:1;transform:none;animation:none}
  .never__v::after{transform:scaleX(1);animation:none}
}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats{
  position:relative;z-index:4;
  padding:0 0 104px;margin-top:-64px;
}
.stats__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:linear-gradient(180deg,rgba(11,15,22,.96),rgba(5,7,10,.985));
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 34px 80px -34px rgba(0,0,0,.92);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.stat{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:50px 24px 46px;text-align:center;
}
.stat + .stat{border-left:1px solid var(--line)}
.stat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,140,.6),transparent);
  opacity:0;transition:opacity .45s var(--ease);
}
.stat:hover::before{opacity:1}

/* — the number — */
.stat b{
  display:flex;align-items:baseline;justify-content:center;
  font-family:var(--f-display);
  font-size:clamp(2.9rem,5.2vw,4.2rem);font-weight:800;
  letter-spacing:-.045em;line-height:1;
  background:linear-gradient(100deg,#fff 8%,#9FE9C8 60%,var(--acc-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* reset — the count-up <span> must NOT inherit the label rules below */
.stat b span{
  display:inline;margin:0;padding:0;font:inherit;
  letter-spacing:inherit;text-transform:none;color:inherit;
}
.stat b i{
  font-style:normal;font-size:.46em;font-weight:700;
  color:var(--acc);opacity:1;margin-left:4px;
}

/* — the label — */
.stat > span{
  display:block;margin-top:22px;font-size:14.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;line-height:1.4;
  color:var(--txt-2);text-wrap:balance;
}
.stat > span::before{
  content:'';display:block;width:30px;height:2px;border-radius:2px;
  margin:0 auto 16px;
  background:linear-gradient(90deg,var(--acc),var(--acc-2));
}

/* ============================================================
   COMPANIES — extra bits on .m-card
   ============================================================ */
.m-card__img{position:relative}
.m-card__tag{
  position:absolute;left:16px;bottom:16px;z-index:2;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;
  background:rgba(5,7,10,.74);border:1px solid var(--line-strong);
  backdrop-filter:blur(6px);color:var(--txt);
}
.m-card__list{
  list-style:none;padding:0;margin:14px 0 0;
  font-size:12.5px;color:var(--txt-3);letter-spacing:.01em;
  line-height:1.6;
}

/* ============================================================
   CAPABILITY
   ============================================================ */
.capability{padding:120px 0;position:relative;background:var(--bg)}
.cap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.cap{
  padding:38px 34px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line);
  transition:.4s var(--ease);position:relative;overflow:hidden;
}
.cap::after{
  content:'';position:absolute;left:0;top:0;height:100%;width:2px;
  background:linear-gradient(180deg,var(--acc),transparent);
  opacity:0;transition:.4s var(--ease);
}
.cap:hover{background:var(--surface-2);border-color:var(--line-strong);transform:translateY(-4px)}
.cap:hover::after{opacity:1}
.cap__ico{
  width:50px;height:50px;border-radius:13px;display:grid;place-items:center;
  background:rgba(0,229,140,.09);border:1px solid rgba(0,229,140,.22);
  color:var(--acc);margin-bottom:22px;
}
.cap__ico svg{width:24px;height:24px}
.cap h3{font-size:clamp(1.1rem,1.6vw,1.32rem);margin-bottom:12px}
.cap p{color:var(--txt-2);font-size:14.5px;line-height:1.72;margin:0}

/* ---------- capability: shop-floor video strip ---------- */
.fac-strip{margin-top:64px;padding-top:52px;border-top:1px solid var(--line)}
.fac-strip__head{margin-bottom:26px}
.fac-strip__head h3{font-size:clamp(1.15rem,1.8vw,1.5rem);margin:0 0 8px}
.fac-strip__head p{color:var(--txt-3);font-size:13.5px;margin:0;line-height:1.65}
.fac-strip__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ============================================================
   MEDIA / VIDEO
   ============================================================ */
.media{padding:120px 0;background:var(--bg-2);position:relative}
.v-play{
  position:absolute;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%);
  width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,229,140,.94);color:#04140D;
  box-shadow:0 12px 44px -10px rgba(0,229,140,.6);
  transition:.35s var(--ease);
}
.v-play svg{width:28px;height:28px;margin-left:3px}
.v-play:hover{transform:translate(-50%,-50%) scale(1.09)}
.v-play--sm{width:54px;height:54px}
.v-play--sm svg{width:20px;height:20px}

/* ---------- three story chapters (food / machine / energy) ---------- */
.story-ch{
  margin-top:64px;padding-top:52px;
  border-top:1px solid var(--line);
}
.story-ch:first-of-type{margin-top:56px}
.story-ch__head{display:flex;align-items:flex-start;gap:20px;margin-bottom:34px}
.story-ch__num{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(2rem,4.4vw,3.2rem);line-height:1;
  letter-spacing:-.05em;
  background:linear-gradient(160deg,var(--acc),var(--acc-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  flex:0 0 auto;opacity:.92;
}
.story-ch__head h3{
  font-size:clamp(1.4rem,2.9vw,2.1rem);margin:0 0 8px;
  letter-spacing:-.03em;line-height:1.15;
}
.story-ch__sub{
  display:block;font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--acc);opacity:.88;
}
.story-ch__body{
  display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:start;
}
.story-ch__text{
  font-size:15px;line-height:1.78;color:var(--txt-2);margin:0 0 26px;
}
.story-ch__list{list-style:none;padding:0;margin:0 0 28px}
.story-ch__list li{
  position:relative;padding-left:24px;margin-bottom:11px;
  font-size:14px;color:var(--txt-2);line-height:1.6;
}
.story-ch__list li::before{
  content:'';position:absolute;left:0;top:8px;
  width:9px;height:2px;border-radius:2px;background:var(--acc);
}
.story-ch__two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px}
.v-box{
  position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);aspect-ratio:16/9;background:#080B11;
}
.story-ch__main .v-box{aspect-ratio:16/10}
.v-box--sm{aspect-ratio:16/10}
.v-box video{width:100%;height:100%;object-fit:cover;display:block}
.v-box__tag{
  position:absolute;left:16px;bottom:16px;z-index:3;
  padding:7px 13px;border-radius:99px;
  font-size:11px;font-weight:600;letter-spacing:.06em;
  background:rgba(5,7,10,.72);border:1px solid rgba(255,255,255,.14);
  color:#E8FBF1;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.v-box.is-playing .v-play{opacity:0;pointer-events:none}
.story-ch__aside .btn{margin-top:2px}

/* ============================================================
   MILESTONES
   ============================================================ */
.mile{padding:120px 0;background:var(--bg);position:relative}
.mile__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.mile__item{background:var(--bg);padding:36px 30px;transition:.35s var(--ease)}
.mile__item:hover{background:var(--surface-2)}
.mile__yr{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc);margin-bottom:16px;
}
.mile__item h4{font-size:16px;margin:0 0 10px;letter-spacing:-.01em}
.mile__item p{font-size:13.5px;color:var(--txt-3);line-height:1.7;margin:0}

/* ============================================================
   FOOTPRINT
   ============================================================ */
.foot{padding:120px 0;background:var(--bg-2)}
.region{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.region__card{
  padding:30px 28px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);
  transition:.35s var(--ease);
}
.region__card:hover{border-color:rgba(0,229,140,.34);background:var(--surface-2);transform:translateY(-3px)}
.region__dot{
  display:block;width:8px;height:8px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 0 4px rgba(0,229,140,.14);
  margin-bottom:18px;
}
.region__card h4{font-size:16px;margin:0 0 9px;letter-spacing:-.01em}
.region__card p{font-size:13.5px;color:var(--txt-3);line-height:1.7;margin:0}

/* ---------- footprint: project video strip ---------- */
.foot-strip{margin-top:64px;padding-top:52px;border-top:1px solid var(--line)}
.foot-strip__head{margin-bottom:26px}
.foot-strip__head h3{font-size:clamp(1.15rem,1.8vw,1.5rem);margin:0 0 8px}
.foot-strip__head p{color:var(--txt-3);font-size:13.5px;margin:0;line-height:1.65}
.foot-strip__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.v-box--wide{aspect-ratio:16/9}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{padding:120px 0;background:var(--bg);position:relative}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contact__ways{display:flex;flex-direction:column;gap:14px;margin-top:36px}
.cway{
  display:flex;align-items:center;gap:16px;
  padding:16px 20px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);
  transition:.32s var(--ease);
}
a.cway:hover{border-color:rgba(0,229,140,.36);background:var(--surface-2);transform:translateX(4px)}
.cway__ico{
  width:42px;height:42px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(0,229,140,.09);border:1px solid rgba(0,229,140,.2);color:var(--acc);
}
.cway__ico svg{width:20px;height:20px}
.cway b{display:block;font-size:13px;font-weight:600;letter-spacing:.02em}
.cway i{display:block;font-style:normal;font-size:13px;color:var(--txt-2);margin-top:2px}

.cform{
  padding:38px 34px;border-radius:20px;
  background:linear-gradient(180deg,rgba(8,11,17,.9),rgba(5,7,10,.96));
  border:1px solid var(--line);
}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform label{display:block;margin-bottom:18px}
.cform label>span{
  display:block;font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--txt-3);margin-bottom:9px;
}
.cform input,.cform select,.cform textarea{
  width:100%;padding:13px 15px;border-radius:11px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  color:var(--txt);font-family:inherit;font-size:14.5px;
  transition:.28s var(--ease);resize:vertical;
}
.cform textarea{min-height:104px}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:none;border-color:var(--acc);background:rgba(0,229,140,.05);
  box-shadow:0 0 0 3px rgba(0,229,140,.1);
}
.cform input::placeholder,.cform textarea::placeholder{color:var(--txt-3);opacity:.62}
.cform select option{background:#0A0E14;color:var(--txt)}
.cform input.err,.cform textarea.err{border-color:#FF6B6B;background:rgba(255,107,107,.06)}
.cform__note{margin:16px 0 0;font-size:12.5px;color:var(--txt-3);text-align:center}
.cform__ok{
  margin:16px 0 0;padding:13px 16px;border-radius:11px;text-align:center;
  font-size:13.5px;color:var(--acc);
  background:rgba(0,229,140,.09);border:1px solid rgba(0,229,140,.28);
}

/* ============================================================
   FOOTER extras
   ============================================================ */
.footer__social{display:flex;gap:10px;margin-top:18px}
.footer__social a{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);
  color:var(--txt-2);transition:.3s var(--ease);
}
.footer__social a:hover{border-color:var(--acc);color:var(--acc);background:rgba(0,229,140,.08)}
.footer__social svg{width:18px;height:18px}
.footer__bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer__bar-r{color:var(--txt-3)}

/* ---------- footer social buttons (icon + label) ---------- */
.footer__col .fsoc{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.footer__col .fsoc__t{
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt-3);opacity:.9;
}
.fsoc__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.footer__col .fsoc__b{
  display:flex;align-items:center;gap:7px;min-width:0;
  padding:9px 10px;border-radius:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);
  color:var(--txt-2);font-size:11.5px;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;white-space:nowrap;
  transition:border-color .28s var(--ease),background .28s var(--ease),
             color .28s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.footer__col .fsoc__b span{color:inherit;overflow:hidden;text-overflow:ellipsis}
.fsoc__b svg{width:15px;height:15px;flex:0 0 15px;opacity:.88;transition:opacity .28s}
.footer__col .fsoc__b:hover{
  transform:translateY(-2px);color:var(--acc);border-color:var(--acc);
  background:rgba(0,229,140,.09);box-shadow:0 8px 22px -12px rgba(0,229,140,.6);
}
.fsoc__b:hover svg{opacity:1}
/* brand-coloured hover accents */
.footer__col .fsoc__b[data-social="linkedin"]:hover{border-color:#0A66C2;background:rgba(10,102,194,.16);color:#6CB2F0;box-shadow:0 8px 22px -12px rgba(10,102,194,.75)}
.footer__col .fsoc__b[data-social="youtube"]:hover{border-color:#FF0033;background:rgba(255,0,51,.14);color:#FF6B85;box-shadow:0 8px 22px -12px rgba(255,0,51,.75)}
.footer__col .fsoc__b[data-social="facebook"]:hover{border-color:#1877F2;background:rgba(24,119,242,.16);color:#79AEF8;box-shadow:0 8px 22px -12px rgba(24,119,242,.75)}
.footer__col .fsoc__b[data-social="instagram"]:hover{border-color:#E1306C;background:rgba(225,48,108,.16);color:#F5779F;box-shadow:0 8px 22px -12px rgba(225,48,108,.75)}
.footer__col .fsoc__b[data-social="x"]:hover{border-color:#E8EAEE;background:rgba(255,255,255,.1);color:#FFFFFF;box-shadow:0 8px 22px -12px rgba(255,255,255,.45)}
.footer__col .fsoc__b[data-social="tiktok"]:hover{border-color:#25F4EE;background:rgba(37,244,238,.14);color:#7FF8F4;box-shadow:0 8px 22px -12px rgba(37,244,238,.75)}
.footer__col .fsoc__b[data-social="whatsapp"]:hover{border-color:#25D366;background:rgba(37,211,102,.16);color:#63E08C;box-shadow:0 8px 22px -12px rgba(37,211,102,.75)}
.footer__col .fsoc__b[data-social="wechat"]:hover{border-color:#07C160;background:rgba(7,193,96,.16);color:#4DDB96;box-shadow:0 8px 22px -12px rgba(7,193,96,.75)}

/* ---------- floating WhatsApp ---------- */
.fab-wa{
  position:fixed;z-index:90;right:24px;bottom:24px;
  display:flex;align-items:center;gap:9px;
  padding:12px 20px 12px 15px;border-radius:999px;
  background:#25D366;color:#04140D;
  font-size:14px;font-weight:700;letter-spacing:.01em;
  box-shadow:0 10px 34px -8px rgba(37,211,102,.55);
  transition:.32s var(--ease);
  opacity:0;transform:translateY(18px);pointer-events:none;
}
.fab-wa.is-in{opacity:1;transform:none;pointer-events:auto}
.fab-wa:hover{transform:translateY(-3px);box-shadow:0 16px 40px -8px rgba(37,211,102,.7)}
.fab-wa svg{width:20px;height:20px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .cap-grid{grid-template-columns:1fr}
  .mile__grid{grid-template-columns:repeat(2,1fr)}
  .contact__grid{grid-template-columns:1fr;gap:44px}
  .region{grid-template-columns:repeat(2,1fr)}
  .story-ch__body{grid-template-columns:1fr;gap:30px}
  .story-ch__main .v-box{aspect-ratio:16/9}
  .fac-strip__grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .foot-strip__grid{grid-template-columns:1fr 1fr;gap:12px}
}
@media (max-width:760px){
  /* --- mobile nav: keep brand + lang + CTA + burger on one row without clipping --- */
  .nav__in{gap:10px;width:min(100% - 28px,var(--maxw))}
  .nav__right{gap:8px}
  .nav__right .btn--lg{padding:10px 15px;font-size:12.5px;white-space:nowrap}
  .lang button{padding:6px 9px;font-size:11.5px}
  .brand{font-size:15px}
  .brand img{height:26px}

  .section-lead{margin-bottom:40px}
  .stats{padding-bottom:64px;margin-top:-36px}
  .stats__grid{border-radius:16px}
  .stat{padding:32px 14px 30px}
  .stat b{font-size:clamp(2.3rem,10vw,2.9rem)}
  .stat > span{margin-top:16px;font-size:12px;letter-spacing:.05em}
  .stat > span::before{width:24px;margin-bottom:12px}
  .stat{padding:26px 18px}
  .stat span{font-size:11px;letter-spacing:.07em}
  .capability,.media,.mile,.foot,.contact{padding:76px 0}
  .cap{padding:30px 24px}
  .cform{padding:28px 22px}
  .cform__row{grid-template-columns:1fr;gap:0}
  .mile__grid,.region{grid-template-columns:1fr}
  .v-play{width:62px;height:62px}
  .v-play svg{width:22px;height:22px}
  .story-ch{margin-top:48px;padding-top:38px}
  .story-ch__head{gap:14px;margin-bottom:24px}
  .story-ch__two{grid-template-columns:1fr;gap:12px}
  .fac-strip,.foot-strip{margin-top:44px;padding-top:36px}
  .fac-strip__grid{grid-template-columns:1fr;gap:12px}
  .foot-strip__grid{grid-template-columns:1fr;gap:12px}
  .v-box__tag{left:12px;bottom:12px;padding:6px 11px;font-size:10px}
  .hero__sound{right:18px;bottom:96px;width:42px;height:42px}
  .never{gap:0 9px;margin-bottom:22px;font-size:clamp(1.15rem,5.4vw,1.6rem)}
  .never__v{gap:0 .3em}
  .fab-wa{right:16px;bottom:16px;padding:11px 16px 11px 13px;font-size:13px}
  .fsoc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__col .fsoc__b{padding:10px 12px;font-size:12px}
  .fsoc__b svg{width:16px;height:16px;flex:0 0 16px}
  .center-cta .btn,.cta-row .btn,.hero__cta .btn{width:100%;justify-content:center}
}
@media (max-width:430px){
  /* very narrow phones: drop the nav CTA into the drawer only, keep brand+lang+burger */
  .nav__right .btn--lg{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero__video{transform:none}
  .fab-wa{transition:none}
  .never__w{opacity:1;transform:none;animation:none}
  .never__v::after{transform:scaleX(1);animation:none}
}

/* ============================================================
   WECHAT ADD-FRIEND DIALOG  (additive - v2.1)
   WeChat exposes no public "add friend by number" URL, so the
   footer WeChat button opens this dialog instead of navigating.
   Nothing above this block is modified.
   ============================================================ */
body.wx-open{overflow:hidden}
.wx{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:22px}
.wx[hidden]{display:none}
.wx__veil{
  position:absolute;inset:0;background:rgba(3,6,10,.74);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  animation:wxFade .28s var(--ease);
}
.wx__box{
  position:relative;width:min(432px,100%);border-radius:18px;padding:32px 30px 26px;
  background:linear-gradient(180deg,#0C1119,#080B11);
  border:1px solid var(--line-strong);
  box-shadow:0 44px 100px -34px rgba(0,0,0,.9);
  text-align:left;animation:wxRise .34s var(--ease);
}
@keyframes wxFade{from{opacity:0}to{opacity:1}}
@keyframes wxRise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.wx__x{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:9px;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--txt-3);
  font-family:var(--f-body);font-size:19px;line-height:1;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.wx__x:hover{color:var(--txt);border-color:#07C160;background:rgba(7,193,96,.14)}
.wx__lb{
  display:block;margin-bottom:10px;
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#07C160;
}
.wx__ttl{
  margin:0 0 18px;font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.25rem,2.4vw,1.55rem);line-height:1.18;letter-spacing:-.02em;color:var(--txt);
}
.wx__num{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 12px 12px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);
}
.wx__n{
  flex:1 1 auto;white-space:nowrap;
  font-family:var(--f-display);font-weight:700;letter-spacing:.06em;
  font-size:clamp(1.1rem,2.2vw,1.32rem);color:var(--txt);
}
.wx__cp{
  flex:0 0 auto;padding:8px 14px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(7,193,96,.4);background:rgba(7,193,96,.13);color:#6FE0A6;
  font-family:var(--f-body);font-size:12.5px;font-weight:700;letter-spacing:.02em;
  transition:background .26s var(--ease),border-color .26s var(--ease),color .26s var(--ease);
}
.wx__cp:hover{background:rgba(7,193,96,.24);border-color:#07C160;color:#fff}
.wx__hint{margin:14px 0 0;font-size:13px;line-height:1.62;color:var(--txt-3)}
.wx__wa{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding-bottom:2px;
  font-size:13.5px;font-weight:600;color:#25D366;text-decoration:none;
  border-bottom:1px solid rgba(37,211,102,.35);
  transition:color .26s var(--ease),border-bottom-color .26s var(--ease);
}
.wx__wa:hover{color:#63E08C;border-bottom-color:#63E08C}
@media (max-width:520px){
  .wx{padding:14px}
  .wx__box{padding:26px 20px 22px}
  .wx__n{font-size:1.06rem}
  .wx__cp{padding:7px 12px}
}

/* ============================================================
   Floating CTA steps aside while the footer is on screen
   (additive - v2.1)
   The FAB is bottom-right, so it landed on top of the footer
   columns / copyright line. Same behaviour as the EPC page.
   ============================================================ */
.fab-wa{
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear 0s;
}
.fab-wa.is-lifted{
  opacity:0;visibility:hidden;transform:translateY(18px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s;
}

/* --- social buttons whose account does not exist yet ------------------
   YouTube / Facebook / Instagram / X / TikTok have no account, so their
   anchors still carry href="#" and data-pending="1". Rather than ship a
   button that does nothing, they are hidden. Going live for a platform =
   write the real URL on the anchor and delete data-pending from it. When
   none of them carry the attribute any more, remove the --trim class from
   the HTML grid to return to four columns.                       */
.fsoc__b[data-pending]{display:none !important}
.fsoc__grid--trim{grid-template-columns:repeat(3,minmax(0,1fr))}
.fsoc__grid--trim .fsoc__b{justify-content:center}


/* ============================================================
   NEGUP Group — sub-page shell + shared page components
   (additive - v2.2)  Used by /culture/ /history/ /business/
   /footprint/ /quality/ and /news/. No rule above is modified.
   ============================================================ */
.nav--solid{
  background:rgba(5,7,10,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:100;
}
.menu a.on{color:#fff;background:var(--surface-2)}

.phero{position:relative;padding:96px 0 66px;border-bottom:1px solid var(--line);overflow:hidden}
.phero::before{
  content:'';position:absolute;width:720px;height:720px;left:-6%;top:-46%;border-radius:50%;
  background:radial-gradient(circle,rgba(0,229,140,.13),transparent 66%);pointer-events:none;
}
.phero__in{position:relative;width:min(100% - 40px,var(--maxw));margin-inline:auto}
.phero h1{font-size:clamp(2rem,4.2vw,3.3rem);max-width:23ch;margin-bottom:20px}
.phero .lead{max-width:64ch;margin-bottom:0}
.crumb{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--txt-3);margin-bottom:22px;letter-spacing:.02em}
.crumb a{color:var(--txt-3);text-decoration:none}
.crumb a:hover{color:var(--acc)}
.crumb i{opacity:.45;font-style:normal}

.psec{padding:92px 0;border-bottom:1px solid var(--line)}
.psec:last-of-type{border-bottom:0}
.psec--alt{background:var(--bg-2)}
.psec h2{font-size:clamp(1.5rem,2.9vw,2.35rem);margin-bottom:16px}
.psec h3{font-size:1.08rem;margin:0 0 14px;letter-spacing:-.01em}
/* style.css defines .section-lead as centred (homepage brochure style).
   Sub-pages are left-aligned top to bottom, so re-align the lead to match. */
.psec .section-lead{text-align:left;max-width:66ch;margin:16px 0 54px}

.base-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.base{padding:34px 32px;border:1px solid var(--line);border-radius:18px;background:var(--surface);transition:.35s var(--ease)}
.base:hover{border-color:rgba(0,229,140,.32);background:var(--surface-2);transform:translateY(-3px)}
.base__tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin-bottom:14px}
.base h3{font-size:1.22rem;margin:0 0 4px}
.base__sub{color:var(--txt-3);font-size:13px;margin-bottom:18px;display:block}
.base ul,.base-list{margin:0 0 20px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.base-list{margin-bottom:0;gap:16px}
.base li{display:flex;gap:11px;font-size:14px;color:var(--txt-2);line-height:1.6}
.base li svg{flex-shrink:0;width:15px;height:15px;margin-top:4px;color:var(--acc)}
.base-list li{display:flex;flex-direction:column;gap:5px}
.base-list li b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:700}
.base-list li span{font-size:14.5px;color:var(--txt-2);line-height:1.7}
.base__addr{font-size:13px;color:var(--txt-3);line-height:1.65;padding-top:16px;border-top:1px solid var(--line)}

.cert-grp{margin-top:34px}
.cert-grp:first-of-type{margin-top:10px}
.cert-grp h3{font-size:1.02rem;letter-spacing:-.01em;margin:0 0 6px;color:var(--txt)}
.cert-grp__src{font-size:12.5px;color:var(--txt-3);margin:0 0 16px}
.certs{display:flex;flex-wrap:wrap;gap:10px}
.certs span{
  display:inline-flex;align-items:center;gap:9px;padding:9px 15px;
  border:1px solid rgba(0,229,140,.28);border-radius:999px;background:rgba(0,229,140,.05);
  font-size:13px;font-weight:600;color:var(--txt);letter-spacing:.01em;
}
.certs span::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--acc);flex-shrink:0}

.gate{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:12px}
.gate__i{padding:28px 26px;border:1px solid var(--line);border-radius:16px;background:var(--surface);transition:.35s var(--ease)}
.gate__i:hover{border-color:rgba(0,229,140,.3);transform:translateY(-3px)}
.gate__n{font-family:var(--f-display);font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--acc);display:block;margin-bottom:12px}
.gate__i h4{margin:0 0 9px;font-size:15.5px}
.gate__i p{margin:0;font-size:13.5px;color:var(--txt-3);line-height:1.7}

.split{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:start}
.split>.rv{min-width:0}
.quote{border-left:3px solid var(--acc);padding:4px 0 4px 26px;margin:0}
.quote p{font-family:var(--f-display);font-size:clamp(1.05rem,1.8vw,1.42rem);line-height:1.44;color:var(--txt);margin:0 0 14px;letter-spacing:-.02em}
.quote cite{font-size:12.5px;color:var(--txt-3);font-style:normal;letter-spacing:.06em;text-transform:uppercase}

.pnote{margin-top:30px;font-size:12.7px;color:var(--txt-3);line-height:1.75;padding:16px 20px;border:1px dashed var(--line-strong);border-radius:12px}

/* Sub-pages have no full-height video hero, so the homepage's negative
   top margin on the stats strip (it is meant to overlap the hero) pulls the
   strip up over the page hero and clips its border. Reset it here. */
.phero + .stats{margin-top:0;padding-bottom:0}

.drow{display:flex;flex-wrap:wrap;gap:26px 34px;margin-top:24px;padding-top:26px;border-top:1px solid var(--line)}
.drow div{min-width:150px;max-width:280px}
.drow b{display:block;font-family:var(--f-display);font-size:19px;color:var(--acc);letter-spacing:-.02em;margin-bottom:4px}
.drow span{font-size:12.5px;color:var(--txt-3);line-height:1.6;display:block}

@media (max-width:900px){
  /* the shared drawer is 97% opaque + backdrop-blur; on these pages the
     blur can be unsupported, so make the drawer effectively solid. */
  .nav--solid .menu{background:#05070A}
}
@media (max-width:1080px){
  .base-grid,.split{grid-template-columns:1fr;gap:26px}
  .split>.rv[style*="order:2"]{order:0!important}
  .split>.rv[style*="order:1"]{order:0!important}
  .gate{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .phero{padding:64px 0 44px}
  .psec{padding:64px 0}
  .gate{grid-template-columns:1fr}
  .drow{gap:20px}
}