/* ================================================================
   WELLELE — Extended CSS for factory-first industrial redesign
   Adds: video-section, factory-gallery, enhanced KPI,
         problem/efficiency grid, audit-ready structure
================================================================ */
*:after,*:before{box-sizing:border-box}
:root{--steel:#0b1e33;--steel2:#123a63;--electric:#22c7ff;--electric2:#0e8fd4;
--accent:#ff4d3d;--ink:#14233a;--mut:#5c6f85;--line:#dce7f2;--bg:#f3f8fd;
--card:#fff;--radius:12px;--maxw:1200px;--glow:0 6px 20px rgba(34,199,255,.35);
--dark-bg:#06101f}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Segoe UI',Roboto,Helvetica,Arial,'Microsoft YaHei',sans-serif;
color:var(--ink);background:#fbfdff;line-height:1.65;font-size:16px}
a{color:var(--electric2);text-decoration:none;transition:color .15s}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto;display:block}
/* ===== Product image auto-fit (source photos vary in size/aspect) ===== */
.pimg-wrap{
  display:flex;align-items:center;justify-content:center;
  height:360px;margin:0 0 28px;padding:18px;
  background:#f6f8fb;border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.pimg{
  display:block;width:auto;height:auto;
  max-width:100%;max-height:100%;
  object-fit:contain;margin:auto;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
/* ===== Header ===== */
header.site{position:sticky;top:0;z-index:50;background:rgba(8,22,40,.92);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(34,199,255,.28)}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;font-size:22px;letter-spacing:.5px;color:#fff;transition:opacity .15s}
.logo:hover{opacity:.9}
.logo b{color:var(--electric)}
nav.main{display:flex;align-items:center;gap:4px}
nav.main>a,nav.main .dd>span{padding:10px 14px;color:#d7e6f5;font-weight:600;font-size:14.5px;
cursor:pointer;white-space:nowrap;border-radius:8px;transition:.15s}
nav.main>a:hover,.dd:hover>span{color:var(--electric);background:rgba(34,199,255,.10)}
.dd{position:relative}
.dd .panel{position:absolute;top:100%;left:0;background:#0c233f;border:1px solid rgba(34,199,255,.22);
border-radius:0 0 12px 12px;box-shadow:0 14px 34px rgba(2,10,22,.45);min-width:560px;
display:none;grid-template-columns:1fr 1fr;padding:14px;gap:4px}
.dd:hover .panel{display:grid}
.dd .panel a{display:block;padding:8px 12px;border-radius:8px;font-weight:500;color:#d7e6f5;transition:.15s}
.dd .panel a:hover{background:rgba(34,199,255,.10);color:var(--electric)}
.dd .panel a small{display:block;color:#8fa9c4;font-weight:400;font-size:12.5px}
.btn{display:inline-block;background:linear-gradient(135deg,var(--electric),var(--electric2));
color:#04101f!important;padding:11px 20px;border-radius:8px;font-weight:800;font-size:14.5px;
border:none;cursor:pointer;box-shadow:var(--glow);transition:.18s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(34,199,255,.5)}
.btn.ghost{background:transparent;color:var(--electric)!important;border:1px solid rgba(34,199,255,.65);
box-shadow:none}
.btn.ghost:hover{background:rgba(34,199,255,.12);border-color:var(--electric);transform:translateY(-1px)}
.menu-tog{display:none;background:rgba(255,255,255,.06);border:1px solid rgba(34,199,255,.3);border-radius:8px;
padding:8px 12px;font-size:18px;cursor:pointer;color:#d7e6f5}

/* ===== Reusable section headings ===== */
section{padding:54px 0}
.sec-h{font-size:28px;margin:0 0 6px;position:relative;
background:linear-gradient(90deg,var(--steel2),var(--electric2));
-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.sec-h::after{content:"";display:block;width:64px;height:3px;margin-top:10px;border-radius:2px;
background:linear-gradient(90deg,var(--electric),var(--electric2))}
.sec-s{color:var(--mut);margin:0 0 28px;max-width:760px}

/* ===== Grid + cards ===== */
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;
transition:.18s}
.card:hover{box-shadow:0 10px 30px rgba(11,30,51,.12),0 0 0 1px rgba(34,199,255,.45);
border-color:#9bd9f5;transform:translateY(-3px)}
.card h3{margin:0 0 8px;font-size:18px}
.card h3 a{color:var(--ink)}
.card p{color:var(--mut);margin:0;font-size:14.5px}

/* ===== Breadcrumb ===== */
.crumbs{font-size:13px;color:var(--mut);padding:14px 0 0}
.crumbs a{color:var(--mut)}
.crumbs a:hover{color:var(--electric2)}
.bread{background:var(--bg);border-bottom:1px solid var(--line)}

/* ===== Tables / specs ===== */
table.spec{width:100%;border-collapse:collapse;margin:8px 0;font-size:14.5px}
table.spec td{border:1px solid var(--line);padding:9px 12px;vertical-align:top}
table.spec td:first-child{background:#eaf4fd;font-weight:600;width:38%;color:var(--ink)}

/* ===== Section blocks ===== */
h2.blk{font-size:23px;margin:34px 0 12px;padding-left:12px;border-left:4px solid var(--electric)}
h3.sub{font-size:18px;margin:22px 0 8px}
ul.ticks{list-style:none;padding:0;margin:8px 0}
ul.ticks li{padding:6px 0 6px 26px;position:relative}
ul.ticks li:before{content:"\2713";position:absolute;left:0;color:var(--accent);font-weight:800}
.faq details{border:1px solid var(--line);border-radius:8px;padding:0 16px;margin:10px 0;background:#fff}
.faq summary{padding:14px 0;cursor:pointer;font-weight:700;color:var(--ink)}
.faq details p{margin:0 0 14px;color:var(--mut)}
.cta{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:26px;
margin:30px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.cta h3{margin:0 0 4px;font-size:20px}
.rfq{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.rfq label{display:block;font-size:13.5px;font-weight:600;margin:12px 0 4px}
.rfq input,.rfq textarea,.rfq select{width:100%;padding:10px 12px;border:1px solid var(--line);
border-radius:8px;font:inherit;background:#fff}
.rfq .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.pill{background:#eaf4fd;border:1px solid #cde7f8;border-radius:20px;padding:5px 13px;font-size:13px;color:#0b2a4e;transition:.15s}
.pill:hover{border-color:var(--electric);color:var(--electric2)}
.metabar{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0}
.metabar .pill{font-size:12px}
footer.site{background:linear-gradient(160deg,#06101f,#0b1e33 60%,#0e2a4a);color:#cdd9e6;padding:46px 0 26px;margin-top:30px}
footer.site h4{color:#fff;font-size:15px;margin:0 0 12px}
footer.site a{color:#bcd0e3}
footer.site a:hover{color:var(--electric)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.foot-bottom{border-top:1px solid rgba(34,199,255,.18);margin-top:30px;padding-top:18px;font-size:13px;color:#8fa6bd}
.note{font-size:13px;color:var(--mut);background:#fff8f6;border:1px solid #f3d9d2;border-radius:8px;padding:12px 14px;margin:14px 0}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.badge{background:#fff;border:1px solid #cde7f8;border-radius:6px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--steel2)}

/* ===== Factory hero (first screen) ===== */
.factory-hero{position:relative;height:520px;overflow:hidden;border-radius:0 0 16px 16px}
.factory-hero .hero-bg{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:0}
.factory-hero .hero-overlay{position:absolute;inset:0;z-index:1;
background:linear-gradient(135deg,rgba(7,24,46,.82) 0%,rgba(11,42,78,.68) 50%,rgba(14,58,107,.55) 100%)}
.factory-hero .wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
justify-content:center;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.factory-hero h1{font-size:38px;line-height:1.15;margin:0 0 14px;max-width:800px;color:#fff}
.factory-hero h1 .hl{color:var(--electric)}
.factory-hero p{font-size:18px;max-width:680px;color:#cfe3f5;margin:0 0 26px}
.factory-hero .acts a{margin-right:12px}
.trust-bar{display:flex;flex-wrap:wrap;gap:20px;margin-top:30px}
.trust-item{display:flex;align-items:center;gap:8px;font-size:14px;color:#aed4ee;font-weight:600}

/* ===== Certifications ===== */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:20px 0}
.cert-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 16px;
display:flex;align-items:center;gap:12px;transition:.18s}
.cert-card:hover{border-color:#9bd9f5;box-shadow:0 6px 20px rgba(11,30,51,.10);transform:translateY(-2px)}
.cert-card .ci{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--electric),var(--electric2));
display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;flex-shrink:0;font-weight:800}
.cert-card .cn{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.cert-card .cimg{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#f0f6ff;border-radius:8px;border:1px solid var(--line)}
.cert-card .cimg img{max-width:36px;max-height:36px;filter:grayscale(20%)}

/* ===== Product category cards ===== */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:20px 0}
.cat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;
text-align:center;transition:.18s}
.cat-card:hover{border-color:#9bd9f5;transform:translateY(-3px)}
.cat-card .cat-icon{width:64px;height:64px;margin:0 auto 14px;border-radius:12px;
background:linear-gradient(135deg,#e8f2fb,#cfe4f5);display:flex;align-items:center;justify-content:center}
.cat-card h3{margin:0 0 8px;font-size:17px}
.cat-card p{color:var(--mut);margin:0;font-size:13.5px;line-height:1.5}

/* ===== Industry grid ===== */
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}
.industry-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px;text-align:center;transition:.18s}
.industry-card:hover{border-color:var(--electric);box-shadow:0 8px 24px rgba(11,30,51,.12);transform:translateY(-3px)}
.industry-card .ii{font-size:32px;margin-bottom:8px;line-height:1}
.industry-card .it{font-size:14px;font-weight:600;color:var(--steel2)}

/* ===== Case studies ===== */
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:20px 0}
.case-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
display:flex;flex-direction:column;transition:.18s}
.case-card:hover{border-color:#9bd9f5;box-shadow:0 12px 30px rgba(11,30,51,.14);transform:translateY(-4px)}
.case-card .case-img{width:100%;height:200px;object-fit:cover;display:block;flex-shrink:0}
.case-card .case-body{padding:20px}
.case-card .case-body h3{margin:0 0 8px;font-size:18px}
.case-card .case-body p{color:var(--mut);margin:0 0 10px;font-size:14.5px;line-height:1.6}
.case-card .case-impact{background:#eaf4fd;border-radius:6px;padding:8px 12px;margin:10px 0;font-size:13.5px;
font-weight:600;color:var(--steel2)}
.case-card .case-quote{font-style:italic;border-left:3px solid var(--electric);padding-left:12px;
color:var(--steel2);font-size:14px;margin:10px 0 6px}
.case-card .case-meta{font-size:13px;color:var(--mut)}

/* ===== Factory showcase ===== */
.factory-showcase{display:grid;grid-template-columns:1fr 1.5fr;gap:24px;align-items:center;margin:20px 0}
.factory-showcase > div:nth-child(even){order:2}
.factory-showcase .fs-img{width:100%;height:280px;object-fit:cover;border-radius:12px;border:1px solid var(--line);display:block}
.factory-showcase .fs-body h3{margin:0 0 8px;font-size:20px}
.factory-showcase .fs-body p{color:var(--mut);margin:0 0 8px;font-size:14.5px}
.factory-showcase .fs-body ul{margin:8px 0 0;padding-left:18px}
.factory-showcase .fs-body li{margin-bottom:6px;font-size:14.5px;color:var(--ink)}

/* ===== Factory gallery with video thumbnails ===== */
.factory-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}
.factory-gallery .fg-card{position:relative;border-radius:10px;border:1px solid var(--line);
overflow:hidden;background:#fff;transition:.18s}
.factory-gallery .fg-card:hover{border-color:#9bd9f5;transform:translateY(-3px)}
.factory-gallery img{width:100%;height:160px;object-fit:cover;display:block}
.factory-gallery .fg-video{position:relative;height:160px;background:#000;border-radius:10px;
overflow:hidden}
.factory-gallery .fg-video iframe{width:100%;height:100%;border:0}
.factory-gallery .fg-video .play{position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);
opacity:0;transition:opacity .18s}
.factory-gallery .fg-video:hover .play{opacity:1}
.factory-gallery .fg-video .play-icon{width:48px;height:48px;border-radius:50%;
background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center}
.factory-gallery .fg-text{padding:12px;background:var(--bg);border-radius:0 0 10px 10px}
.factory-gallery .fg-text h4{margin:0 0 6px;font-size:15px}
.factory-gallery .fg-text p{margin:0;font-size:13.5px;color:var(--mut)}

/* ===== KPI / stats grid ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi-card{background:linear-gradient(165deg,#fff,#eff7fd);border:1px solid var(--line);
border-radius:12px;padding:22px;text-align:center;border-top:3px solid var(--electric);
transition:.18s}
.kpi-card:hover{box-shadow:0 8px 22px rgba(11,30,51,.10);transform:translateY(-2px)}
.kpi-card .kn{font-size:28px;font-weight:800;
background:linear-gradient(90deg,var(--electric2),var(--electric));
-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:4px}
.kpi-card .kl{font-size:13.5px;color:var(--mut)}
.kpi-card .kpi-unit{font-size:13px;color:var(--mut);margin-top:2px}

/* ===== Problem / efficiency / cost grid ===== */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}
.value-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px;
text-align:center;transition:.18s}
.value-card:hover{border-color:#9bd9f5;transform:translateY(-3px)}
.value-card .vc{font-size:36px;font-weight:800;margin-bottom:6px;
background:linear-gradient(90deg,var(--electric2),var(--electric));
-webkit-background-clip:text;background-clip:text;color:transparent}
.value-card .vl{font-size:13px;color:var(--mut);line-height:1.5}

/* ===== Video section ===== */
.video-section{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
padding:0;margin:30px 0;overflow:hidden}
.video-wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;background:#000}
.video-wrapper iframe,.video-wrapper img{width:100%;height:100%;position:absolute;top:0;left:0;object-fit:cover}
.video-placeholder{position:relative;background:linear-gradient(135deg,#0b1e33 0%,#123a63 100%);
display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff;
min-height:320px;border-radius:var(--radius);margin:20px 0}
.video-placeholder .vp-icon{width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.1);
display:flex;align-items:center;justify-content:center;border:2px dashed rgba(34,199,255,.4)}
.video-placeholder .vp-icon svg{width:32px;height:32px}
.video-placeholder p{margin-top:12px;font-size:15px;color:#a3c8e8;max-width:480px;text-align:center}

/* ===== Timeline ===== */
.timeline{position:relative;margin:30px 0;padding:0}
.timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--line)}
.timeline-item{position:relative;margin-bottom:30px;width:50%;padding:0 20px}
.timeline-item:nth-child(odd){left:0;text-align:right}
.timeline-item:nth-child(even){left:50%}
.timeline-item::after{content:"";position:absolute;top:8px;width:14px;height:14px;
border-radius:50%;background:linear-gradient(135deg,var(--electric),var(--electric2));
border:3px solid #fff;box-shadow:0 0 0 2px var(--line)}
.timeline-item:nth-child(odd)::after{right:-7px}
.timeline-item:nth-child(even)::after{left:-7px}
.tl-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px}
.tl-card h4{margin:0 0 6px;font-size:16px;color:var(--steel2)}
.tl-card p{margin:0;font-size:14px;color:var(--mut)}

/* ===== WhatsApp floating button ===== */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:1000;width:56px;height:56px}
.wa-float>a{display:block;width:56px;height:56px;border-radius:50%;background:#25D366;
display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(37,211,102,.45);
transition:.18s}
.wa-float>a:hover{transform:scale(1.08);box-shadow:0 8px 30px rgba(34,199,255,.5)}
.wa-float>a svg{width:26px;height:26px;fill:#fff}
.wa-float .wa-popup{position:absolute;bottom:66px;right:0;background:#fff;border:1px solid var(--line);
border-radius:10px;padding:12px 14px;box-shadow:0 8px 26px rgba(0,0,0,.15);display:none;min-width:200px}
.wa-float .wa-title{font-size:14px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.wa-float:hover .wa-popup{display:block}
.wa-float .wa-popup a{color:var(--electric2);font-size:13px}

/* ===== Quick RFQ bar — fixed bottom, no redirect ===== */
.quick-rfq-bar{position:fixed;bottom:0;left:0;right:0;background:var(--dark-bg);
border-top:2px solid var(--electric);padding:14px 20px;display:flex;
align-items:center;justify-content:space-between;gap:16px;z-index:900;
box-shadow:0 -4px 20px rgba(0,0,0,.25);transform:translateY(100%);transition:transform .3s ease}
.quick-rfq-bar.show{display:flex;transform:translateY(0)}
.quick-rfq-bar .qrb-name{font-weight:700;color:#e8eef5;font-size:15px;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;flex:1}
.quick-rfq-bar .qrb-btn{background:linear-gradient(135deg,var(--electric2),var(--electric));color:#fff;border:none;
padding:10px 24px;border-radius:8px;font-weight:800;font-size:14px;cursor:pointer;transition:.18s}
.quick-rfq-bar .qrb-btn:hover{transform:translateY(-1px);box-shadow:0 0 0 3px rgba(34,199,255,.3)}
.quick-rfq-bar .qrb-close{background:none;border:none;color:#9fb6cc;cursor:pointer;
font-size:20px;line-height:1;padding:4px 8px;margin-left:8px}
.quick-rfq-bar .qrb-close:hover{color:#fff}

/* ===== Responsive ===== */
@media(max-width:920px){
  .g3,.g4,.g2,.cta .row,.rfq .row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .dd .panel{min-width:320px;grid-template-columns:1fr}
  nav.main{display:none;position:absolute;top:64px;left:0;right:0;background:#0c233f;
  flex-direction:column;border-bottom:1px solid rgba(34,199,255,.3);padding:8px}
  .nav-open nav.main{display:flex}
  nav.main .dd .panel{position:static;display:grid;box-shadow:none;border:none;min-width:0}
  .menu-tog{display:block}
  .hero h1{font-size:28px}
  .industry-grid{grid-template-columns:repeat(2,1fr)}
  .case-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .factory-showcase{grid-template-columns:1fr}
  .factory-showcase > div:nth-child(even){order:0}
  .cert-grid{grid-template-columns:repeat(2,1fr)}
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .timeline::before{left:10px}
  .timeline-item{width:100%;left:0!important;text-align:left}
  .timeline-item:nth-child(odd)::after{left:-27px}
  .timeline-item:nth-child(even)::after{left:-27px}
}
@media(max-width:600px){
  .industry-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr}
  .factory-hero{height:auto;min-height:380px;padding:40px 0}
  .factory-hero h1{font-size:26px}
  .factory-hero p{font-size:15px}
  .trust-bar{gap:12px}
  .factory-gallery{grid-template-columns:1fr}
  .value-grid{grid-template-columns:1fr}
  .wa-float{bottom:18px;right:18px;width:50px;height:50px}
  .wa-float>a{width:50px;height:50px}
  .pimg-wrap{height:260px;padding:12px}
  .quick-rfq-bar{flex-direction:column;align-items:stretch;gap:8px;padding:14px}
  .quick-rfq-bar .qrb-name{text-align:center}
  .quick-rfq-bar .qrb-btn{width:100%}
}