/* Gongxiu / BEWINCH — site.css (v7) */
:root{
 --navy:#0a1f33;--navy2:#0d3550;--teal:#14507a;--teal2:#c9a24a;--aqua:#f6efdc;--gold:#c9a24a;
 --ink:#14222c;--text:#34434d;--mut:#6a7a86;--line:#e3e9ee;--bg:#f6f8fa;--wa:#1faa59;--wa2:#178a47;
 --r:12px;--sh:0 1px 2px rgba(10,31,51,.06),0 4px 14px rgba(10,31,51,.05);--shh:0 14px 34px rgba(10,31,51,.16);
 --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--text);background:#fff;line-height:1.65;font-size:16px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--navy2)}
button{font-family:inherit}
h1,h2,h3,h4{color:var(--ink);line-height:1.25;letter-spacing:-.012em}
ul{list-style:none}
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 20px}
/* language */
html[data-lang=en] .zh{display:none!important}
html[data-lang=zh] .en{display:none!important}
/* ---------- utility bar ---------- */
.util{background:var(--navy);color:#bcd3dc;font-size:.8rem}
.util .container{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:36px}
.util a{color:#fff}
.util a:hover{color:var(--gold)}
.util .r{display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.util b{font-weight:500;color:#8fb3c2;margin-right:6px}
.util .l{white-space:nowrap}
/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.hdr .container{display:flex;align-items:center;gap:22px;min-height:72px}
.logo{display:flex;align-items:center;gap:11px;color:var(--ink);flex:none}
.logo:hover{color:var(--ink)}
.logo .mk{width:42px;height:42px;border-radius:11px;background:linear-gradient(140deg,var(--navy2),var(--teal2));display:grid;place-items:center;box-shadow:0 4px 12px rgba(201,162,74,.35)}
.logo .mk svg{width:24px;height:24px}
.logo .nm{display:flex;flex-direction:column;line-height:1.15}
.logo .nm b{font-size:1.18rem;letter-spacing:-.01em;font-weight:750;color:var(--navy)}
.logo .nm small{font-size:.68rem;color:var(--mut);letter-spacing:.06em;text-transform:uppercase;margin-top:3px}
.srch{flex:1 1 auto;max-width:460px;margin-left:auto;position:relative}
.srch input{width:100%;height:42px;border:1.5px solid var(--line);border-radius:22px;padding:0 48px 0 18px;font-size:.93rem;background:var(--bg);color:var(--ink);font-family:inherit;transition:.15s}
.srch input:focus{outline:0;border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(201,162,74,.12)}
.srch button{position:absolute;right:4px;top:4px;width:34px;height:34px;border:0;border-radius:50%;background:var(--teal);color:#fff;cursor:pointer;display:grid;place-items:center}
.srch button:hover{background:var(--navy2)}
.srch button svg{width:17px;height:17px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{color:var(--ink);font-weight:550;font-size:.95rem;padding:8px 13px;border-radius:8px;position:relative}
.nav a:hover{background:var(--aqua);color:var(--navy2)}
.nav a.on{color:var(--teal)}
.nav a.on::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;background:var(--teal);border-radius:2px}
.langbtn{border:1.5px solid var(--line);background:#fff;color:var(--navy2);border-radius:20px;height:36px;padding:0 14px;font-size:.84rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s}
.langbtn:hover{border-color:var(--teal);color:var(--teal)}
.hwa{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:22px;background:var(--wa);color:#fff;font-weight:650;font-size:.9rem;white-space:nowrap;transition:.15s}
.hwa:hover{background:var(--wa2);color:#fff}
.hwa svg{width:18px;height:18px}
.burger{display:none;width:42px;height:42px;border:1.5px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;place-items:center;flex:none}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:var(--navy);border-radius:2px;position:relative;content:""}
.burger span::before{position:absolute;top:-6px}.burger span::after{position:absolute;top:6px}
.mpanel{display:none}
@media(max-width:1060px){
 .hdr .container{gap:12px;min-height:64px}
 .nav,.hdr .srch,.hdr .hwa{display:none}
 .burger{display:grid;margin-left:8px}
 .hdr .langbtn{margin-left:auto}
 .mpanel{display:block;background:#fff;border-top:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .25s ease}
 .mpanel.open{max-height:520px;box-shadow:0 18px 30px rgba(10,31,51,.12)}
 .mpanel .in{padding:14px 20px 20px;display:grid;gap:6px}
 .mpanel .srch{display:block;max-width:none;margin:0 0 8px}
 .mpanel a.l{display:block;padding:12px 8px;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink)}
 .mpanel a.hwa{display:inline-flex;justify-content:center;margin-top:10px;color:#fff;border-bottom:0}
}
@media(max-width:560px){.util .l{display:none}.util .container{justify-content:center}.util .r{justify-content:center;gap:16px}.util .em{display:none}.logo .nm small{display:none}.logo .nm b{font-size:1.08rem}.logo .mk{width:38px;height:38px}}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 26px;border-radius:10px;font-weight:650;font-size:.97rem;border:1.5px solid transparent;cursor:pointer;transition:.15s;font-family:inherit;white-space:nowrap}
.btn svg{width:20px;height:20px;flex:none}
.btn.wa{background:var(--wa);color:#fff}.btn.wa:hover{background:var(--wa2);color:#fff;transform:translateY(-1px);box-shadow:0 8px 20px rgba(31,170,89,.35)}
.btn.pri{background:var(--teal);color:#fff}.btn.pri:hover{background:var(--navy2);color:#fff}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}.btn.ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn.line{background:#fff;color:var(--navy2);border-color:#c5d3db}.btn.line:hover{border-color:var(--teal);color:var(--teal)}
.btn.sm{height:40px;padding:0 18px;font-size:.88rem}
.btns{display:flex;flex-wrap:wrap;gap:12px}
/* ---------- hero ---------- */
.hero{background:radial-gradient(1200px 520px at 85% -10%,rgba(201,162,74,.32),transparent 60%),linear-gradient(135deg,#071826 0%,#07404f 55%,#0a566a 100%);color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px);background-size:22px 22px;mask-image:linear-gradient(90deg,transparent,#000 70%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%)}
.hero .container{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:76px;padding-bottom:116px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:650;margin-bottom:18px}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--gold)}
.hero h1{color:#fff;font-size:3.05rem;line-height:1.1;font-weight:780;letter-spacing:-.025em}
.hero h1 em{font-style:normal;color:#e6c777}
.hero .lead{margin-top:22px;font-size:1.12rem;color:#c3d6e2;max-width:36em;line-height:1.7}
.hero .btns{margin-top:34px}
.hero .zhline{margin-top:20px;color:#8db3c1;font-size:.95rem}
.hshow{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative}
.hshow a{background:#fff;border-radius:16px;overflow:hidden;display:block;box-shadow:0 22px 50px rgba(0,0,0,.35);transition:.25s;color:var(--ink)}
.hshow a:hover{transform:translateY(-4px)}
.hshow a:nth-child(even){transform:translateY(26px)}.hshow a:nth-child(even):hover{transform:translateY(22px)}
.hshow .im{aspect-ratio:1/1;display:grid;place-items:center;padding:14px;background:#fff}
.hshow img{width:100%;height:100%;object-fit:contain}
.hshow .cap{padding:11px 16px 14px;border-top:1px solid var(--line);font-size:.84rem;font-weight:650;line-height:1.3;color:var(--ink)}
.hshow .cap small{display:block;font-weight:400;color:var(--mut);font-size:.74rem;margin-top:2px}
@media(max-width:1060px){.hero .container{grid-template-columns:1fr;gap:34px;padding-top:48px;padding-bottom:96px}.hero h1{font-size:2.35rem}.hshow{max-width:560px}}
@media(max-width:560px){.hero .container{padding-top:36px;padding-bottom:84px}.hero h1{font-size:1.95rem}.hero .lead{font-size:1rem}.hshow{gap:12px}.hshow a:nth-child(even){transform:translateY(14px)}.btn{width:100%}.hero .btns .btn{width:100%}}
/* trust bar */
.trust{position:relative;z-index:2;margin-top:-62px}
.trust .grid{background:#fff;border-radius:16px;box-shadow:0 16px 40px rgba(10,31,51,.16);display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}
.ti{display:flex;gap:14px;align-items:flex-start;padding:24px 24px;border-left:1px solid var(--line)}
.ti:first-child{border-left:0}
.ti .ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--aqua);color:var(--teal);display:grid;place-items:center}
.ti .ic svg{width:23px;height:23px}
.ti b{display:block;color:var(--ink);font-size:.98rem;line-height:1.3}
.ti small{display:block;color:var(--mut);font-size:.82rem;margin-top:3px;line-height:1.4}
@media(max-width:1060px){.trust .grid{grid-template-columns:1fr 1fr}.ti:nth-child(3){border-left:0}.ti:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:560px){.trust{margin-top:-52px}.ti{padding:16px 14px;gap:10px;flex-direction:column}.ti .ic{width:38px;height:38px}.ti b{font-size:.9rem}.ti small{font-size:.76rem}}
/* ---------- sections ---------- */
.sec{padding:84px 0}
.sec.alt{background:var(--bg)}
.sec.dark{background:linear-gradient(135deg,#071826,#0d3550);color:#c3d6e2}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:36px;flex-wrap:wrap}
.sh .k{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);font-weight:700;margin-bottom:8px}
.sh h2{font-size:2rem;font-weight:760;color:var(--navy)}
.sh p{color:var(--mut);margin-top:8px;max-width:38em}
.sh .more{font-weight:650;font-size:.95rem;white-space:nowrap}
.sh .more::after{content:" →"}
@media(max-width:700px){.sec{padding:52px 0}.sh h2{font-size:1.5rem}.sh{margin-bottom:24px}}
/* category cards */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;color:var(--ink);transition:.22s}
.cc:hover{box-shadow:var(--shh);transform:translateY(-4px);border-color:transparent;color:var(--ink)}
.cc .im{height:120px;background:linear-gradient(140deg,#0d3550,#c9a24a);display:grid;place-items:center;color:#fff;position:relative;overflow:hidden}
.cc .im::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.4px);background-size:16px 16px}
.cc .im svg{width:50px;height:50px;position:relative;stroke-width:1.5;transition:.25s}
.cc:hover .im svg{transform:scale(1.12)}
.cc .bd{padding:14px 18px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}
.cc b{display:block;font-size:1rem;line-height:1.3}
.cc small{display:block;color:var(--mut);font-size:.8rem;margin-top:2px}
.cc .n{flex:none;font-size:.78rem;font-weight:700;color:var(--teal);background:var(--aqua);border-radius:12px;padding:3px 10px}
@media(max-width:1060px){.cats{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(max-width:700px){.cats{grid-template-columns:repeat(2,1fr);gap:12px}.cc .bd{padding:10px 12px 12px;flex-direction:column;align-items:flex-start}.cc b{font-size:.9rem}}
/* product cards */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:.22s}
.pcard:hover{box-shadow:var(--shh);transform:translateY(-4px);border-color:transparent}
.pcard[hidden]{display:none}
.pcard .pic{display:block;aspect-ratio:1/1;background:#fff;position:relative;border-bottom:1px solid #eef2f5}
.pcard .pic img{width:100%;height:100%;object-fit:contain;padding:14px}
.noimg{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;background:repeating-linear-gradient(135deg,#f6f8fa 0 14px,#f1f4f7 14px 28px);color:#7a8e9a;padding:14px}
.noimg svg{width:42px;height:42px;stroke:#8aa3b0}
.noimg b{font-size:.84rem;color:#56707e;font-weight:650;letter-spacing:.01em}
.noimg small{font-size:.74rem;color:#8a9ca7;margin-top:-4px}
.pcard .bd{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.tag{align-self:flex-start;font-size:.7rem;font-weight:650;letter-spacing:.03em;color:var(--teal);background:var(--aqua);border-radius:6px;padding:2px 9px;line-height:1.6}
.pcard h3{font-size:1rem;font-weight:680;line-height:1.35;margin-top:9px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.pcard h3 a{color:inherit}
.pcard h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.pcard .zn{font-size:.8rem;color:var(--mut);margin-top:3px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pcard .sp{font-size:.8rem;color:var(--text);margin-top:9px;line-height:1.5;flex:1;min-height:3em}
.pcard .sp div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .sp b{font-weight:600;color:var(--mut)}
.pcard .act{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px;padding-top:12px;border-top:1px solid #eef2f5}
.pcard .more{font-size:.86rem;font-weight:650;color:var(--teal)}
.pcard:hover .more{color:var(--navy2)}
.pcard .wab{position:relative;z-index:2;flex:none;width:38px;height:38px;border-radius:50%;background:#e8f7ee;color:var(--wa);display:grid;place-items:center;transition:.15s}
.pcard .wab:hover{background:var(--wa);color:#fff}
.pcard .wab svg{width:19px;height:19px}
@media(max-width:1180px){.pgrid{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(max-width:780px){.pgrid{grid-template-columns:repeat(2,1fr);gap:12px}.pcard .bd{padding:11px 11px 12px}.pcard h3{font-size:.9rem}.pcard .pic img{padding:8px}.pcard .sp{font-size:.76rem}.pcard .more{font-size:.8rem}.pcard .wab{width:34px;height:34px}}
/* why */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.wy{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 24px;transition:.2s}
.wy:hover{box-shadow:var(--sh);border-color:#e3e9ee}
.wy .ic{width:50px;height:50px;border-radius:14px;background:linear-gradient(140deg,var(--aqua),#fff);border:1px solid #e3e9ee;color:var(--teal);display:grid;place-items:center;margin-bottom:18px}
.wy .ic svg{width:25px;height:25px}
.wy h3{font-size:1.06rem;margin-bottom:8px;color:var(--navy)}
.wy p{font-size:.9rem;color:var(--text);line-height:1.6}
.wy p.z{color:var(--mut);margin-top:4px;font-size:.84rem}
@media(max-width:1060px){.why{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.why{grid-template-columns:1fr;gap:14px}.wy{padding:22px 20px}}
/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:st}
.st{position:relative;padding:30px 28px 28px;background:#fff;border:1px solid var(--line);border-radius:14px}
.st .no{font-size:3rem;font-weight:800;line-height:1;color:var(--aqua);-webkit-text-stroke:1.5px #e6d8b0;margin-bottom:12px;letter-spacing:-.04em}
.st h3{font-size:1.15rem;color:var(--navy);margin-bottom:8px}
.st p{font-size:.93rem;color:var(--text)}
.st p.z{color:var(--mut);font-size:.86rem;margin-top:4px}
.st:not(:last-child)::after{content:"";position:absolute;right:-27px;top:50%;width:28px;height:2px;background:repeating-linear-gradient(90deg,#c9a24a 0 5px,transparent 5px 9px)}
@media(max-width:900px){.steps{grid-template-columns:1fr;gap:14px}.st:not(:last-child)::after{display:none}.st{padding:22px 22px 20px;display:grid;grid-template-columns:62px 1fr;column-gap:8px}.st .no{grid-row:1/3;font-size:2.4rem}}
/* inquiry */
.inq{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.inq h2{color:#fff;font-size:2.1rem;font-weight:760}
.inq .k{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:10px}
.inq p.l{margin-top:14px;color:#b9d3dc;font-size:1.03rem}
.inq ul.ct{margin-top:28px;display:grid;gap:16px}
.inq ul.ct li{display:flex;gap:14px;align-items:flex-start}
.inq ul.ct .ic{flex:none;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#e6c777}
.inq ul.ct svg{width:20px;height:20px}
.inq ul.ct small{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#8db3c1}
.inq ul.ct a,.inq ul.ct span.v{color:#fff;font-size:1rem;word-break:break-word}
.inq ul.ct a:hover{color:var(--gold)}
.form{background:#fff;border-radius:16px;padding:30px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.form h3{font-size:1.2rem;color:var(--navy);margin-bottom:4px}
.form .hint{font-size:.86rem;color:var(--mut);margin-bottom:18px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg .full{grid-column:1/-1}
.form label{display:block;font-size:.8rem;font-weight:650;color:var(--ink);margin-bottom:5px}
.form input,.form textarea{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:11px 13px;font-size:.95rem;font-family:inherit;color:var(--ink);background:#fff;transition:.15s}
.form textarea{min-height:104px;resize:vertical}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 4px rgba(201,162,74,.12)}
.form .btns{margin-top:18px}
.form .btn{flex:1 1 200px}
@media(max-width:1000px){.inq{grid-template-columns:1fr;gap:34px}.inq h2{font-size:1.6rem}}
@media(max-width:560px){.form{padding:22px 18px}.fg{grid-template-columns:1fr}}
/* page banner */
.pbn{background:linear-gradient(135deg,#071826,#0d3550);color:#fff;position:relative;overflow:hidden}
.pbn::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px);background-size:22px 22px}
.pbn .container{position:relative;padding-top:44px;padding-bottom:44px}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.84rem;color:#9fc0cd}
.crumb a{color:#e3e9ee}.crumb a:hover{color:#fff}
.crumb .sep{opacity:.5}
.pbn h1{color:#fff;font-size:2.3rem;font-weight:780;margin-top:12px}
.pbn p{color:#b9d3dc;margin-top:8px;max-width:44em}
@media(max-width:700px){.pbn .container{padding-top:28px;padding-bottom:28px}.pbn h1{font-size:1.6rem}}
/* products page */
.cat-layout{display:grid;grid-template-columns:264px 1fr;gap:34px;align-items:start;padding-top:34px;padding-bottom:70px}
.side{position:sticky;top:92px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
.side h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);padding:10px 12px 8px}
.cbtn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;border:0;background:transparent;border-radius:9px;padding:10px 12px;font-size:.9rem;color:var(--ink);cursor:pointer;font-weight:520;transition:.12s}
.cbtn i{font-style:normal;font-size:.75rem;font-weight:650;color:var(--mut);background:#f1f4f7;border-radius:10px;padding:1px 9px;flex:none}
.cbtn:hover{background:var(--aqua)}
.cbtn.on{background:var(--teal);color:#fff;font-weight:650}
.cbtn.on i{background:rgba(255,255,255,.22);color:#fff}
.tools{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.tools .srch{flex:1 1 320px;max-width:480px;margin:0}
.count{font-size:.9rem;color:var(--mut)}
.count b{color:var(--ink)}
.empty{text-align:center;padding:60px 20px;color:var(--mut);background:var(--bg);border-radius:14px}
.empty[hidden]{display:none}
.pcat .pgrid{grid-template-columns:repeat(3,1fr)}
@media(min-width:1400px){.pcat .pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1180px){.cat-layout{grid-template-columns:1fr;gap:18px;padding-top:20px}.side{position:static;padding:0;border:0;background:transparent}.side h4{display:none}.side .list{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.side .list::-webkit-scrollbar{display:none}.cbtn{width:auto;white-space:nowrap;border:1.5px solid var(--line);border-radius:20px;background:#fff;padding:7px 14px;flex:none}.cbtn.on{border-color:var(--teal)}.pcat .pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.pcat .pgrid{grid-template-columns:repeat(2,1fr)}}
/* detail */
.dwrap{padding-top:26px;padding-bottom:30px}
.dcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.84rem;color:var(--mut);margin-bottom:22px}
.dcrumb a{color:var(--mut)}.dcrumb a:hover{color:var(--teal)}
.dcrumb .cur{color:var(--ink);font-weight:550}
.dtop{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:48px;align-items:start}
.gal{min-width:0;position:sticky;top:92px}
.gmain{position:relative;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;display:grid;place-items:center;background:#fff}
.slide img{width:100%;height:100%;object-fit:contain;padding:22px}
.slide .noimg{border-radius:0}
.slide .noimg svg{width:64px;height:64px}.slide .noimg b{font-size:1.1rem}.slide .noimg small{font-size:.9rem}
.ar{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.95);color:var(--navy);font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:var(--sh);z-index:3;display:grid;place-items:center;padding-bottom:3px}
.ar:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.ar.l{left:12px}.ar.r{right:12px}
.cnt{position:absolute;right:12px;bottom:12px;background:rgba(10,31,51,.78);color:#fff;font-size:.76rem;border-radius:12px;padding:2px 11px;z-index:3}
.thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.th{flex:none;width:78px;height:78px;border:2px solid var(--line);border-radius:10px;background:#fff;padding:4px;cursor:pointer;transition:.12s}
.th img{width:100%;height:100%;object-fit:contain}
.th.on{border-color:var(--teal);box-shadow:0 0 0 3px rgba(201,162,74,.15)}
.gal.single .thumbs,.gal.single .ar,.gal.single .cnt{display:none}
.inote{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:.82rem;color:var(--mut);background:var(--bg);border-radius:10px;padding:10px 13px;line-height:1.5}
.inote svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--teal)}
.info .tag{font-size:.76rem;padding:3px 11px}
.info h1{font-size:2.15rem;font-weight:780;color:var(--navy);margin-top:14px;line-height:1.18;letter-spacing:-.02em}
.zhname{font-size:1.1rem;color:var(--mut);margin-top:6px}
.subl{margin-top:14px;font-size:1.02rem;color:var(--ink);font-weight:550}
.facts{margin-top:24px;border:1px solid var(--line);border-radius:14px;background:var(--bg);overflow:hidden}
.fact{display:flex;gap:14px;padding:14px 18px;align-items:flex-start}
.fact+.fact{border-top:1px solid var(--line)}
.fact .ic{flex:none;width:34px;height:34px;border-radius:9px;background:#fff;border:1px solid var(--line);color:var(--teal);display:grid;place-items:center}
.fact .ic svg{width:18px;height:18px}
.fact small{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.fact span.v{display:block;color:var(--ink);font-weight:560;font-size:.95rem;line-height:1.4}
.cta{display:grid;gap:12px;margin-top:22px}
.cta .btn{height:54px;font-size:1.04rem;width:100%}
.cta .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cta .two .btn{height:46px;font-size:.92rem}
.mini{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.82rem;color:var(--mut)}
.mini span{display:inline-flex;align-items:center;gap:6px}
.mini svg{width:15px;height:15px;color:var(--teal)}
@media(max-width:960px){.dtop{grid-template-columns:1fr;gap:26px}.gal{position:static}.info h1{font-size:1.65rem}}
@media(max-width:560px){.dwrap{padding-top:16px}.slide img{padding:12px}.th{width:62px;height:62px}.cta .two{grid-template-columns:1fr}.ar{width:36px;height:36px}.fact{padding:12px 14px}}
.dsec{padding:0 0 56px}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.cards2.one{grid-template-columns:1fr}
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 28px}
.panel h2{font-size:1.2rem;font-weight:720;color:var(--navy);padding-bottom:14px;margin-bottom:6px;border-bottom:2px solid var(--aqua);display:flex;align-items:center;gap:10px}
.panel h2::before{content:"";width:4px;height:20px;border-radius:2px;background:var(--teal)}
.specs{width:100%;border-collapse:collapse}
.specs th,.specs td{text-align:left;padding:12px 4px;font-size:.93rem;border-bottom:1px solid #edf1f4;vertical-align:top}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}
.specs th{width:42%;font-weight:560;color:var(--mut);padding-right:14px}
.specs td{color:var(--ink);font-weight:550}
.feat li{position:relative;padding:11px 0 11px 30px;border-bottom:1px solid #edf1f4;font-size:.95rem;color:var(--ink)}
.feat li:last-child{border-bottom:0}
.feat li::before{content:"";position:absolute;left:2px;top:15px;width:18px;height:18px;border-radius:50%;background:var(--aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.figs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
.figs figure{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.figs img{width:100%;height:auto;background:#fff}
.figs figcaption{padding:10px 14px;font-size:.88rem;color:var(--text);border-top:1px solid var(--line);background:var(--bg)}
@media(max-width:900px){.cards2{grid-template-columns:1fr}.panel{padding:20px 18px}.figs{grid-template-columns:1fr}}
.band{background:linear-gradient(135deg,#071826,#0d3550);border-radius:18px;padding:36px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;color:#c3d6e2;margin-bottom:56px}
.band h2{color:#fff;font-size:1.5rem}
.band p{margin-top:6px;max-width:34em}
@media(max-width:700px){.band{padding:26px 22px;margin-bottom:40px}.band .btns{width:100%}.band .btn{flex:1}}
.rel{padding-bottom:70px}
.rel h2{font-size:1.5rem;color:var(--navy);margin-bottom:22px}
.rel .pgrid{grid-template-columns:repeat(4,1fr)}
@media(max-width:780px){.rel .pgrid{grid-template-columns:repeat(2,1fr)}}
/* about / contact */
.two-col{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start}
.prose p{margin-bottom:14px;font-size:1.02rem}
.prose p.z{color:var(--mut);font-size:.95rem}
.prose h2{font-size:1.5rem;color:var(--navy);margin:0 0 14px}
.glance{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:26px 26px 12px}
.glance h3{font-size:1.05rem;color:var(--navy);margin-bottom:10px}
.glance dl{display:grid}
.glance dt{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-top:14px}
.glance dd{color:var(--ink);font-weight:550;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:.96rem}
.glance dd:last-child{border-bottom:0}
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:46px}
.ccard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px;box-shadow:var(--sh)}
.ccard .ic{width:48px;height:48px;border-radius:13px;background:var(--aqua);color:var(--teal);display:grid;place-items:center;margin-bottom:14px}
.ccard .ic svg{width:24px;height:24px}
.ccard small{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.ccard .v{font-size:1.08rem;font-weight:650;color:var(--ink);margin-top:3px;word-break:break-word;display:block}
.ccard p{font-size:.88rem;color:var(--mut);margin-top:6px}
.ccard a.v:hover{color:var(--teal)}
@media(max-width:900px){.two-col{grid-template-columns:1fr;gap:26px}.ccards{grid-template-columns:1fr;gap:14px}}
.form.flat{box-shadow:var(--sh);border:1px solid var(--line)}
/* footer */
.ft{background:#04222d;color:#9fbdc9;font-size:.9rem}
.ft .top{display:grid;grid-template-columns:1.4fr .8fr .7fr 1.3fr;gap:44px;padding:60px 0 44px}
.ft h4{color:#fff;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.ft a{color:#9fbdc9}.ft a:hover{color:#fff}
.ft li{margin-bottom:9px}
.ft .logo .nm b{color:#fff}.ft .logo .nm small{color:#8fb0c4}
.ft p.bl{margin-top:16px;line-height:1.7;max-width:26em}
.ft .ad{line-height:1.6}
.ft .ad span{display:block;margin-top:6px;color:#8fb0c4;font-size:.84rem}
.ft .bot{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.84rem;color:#8fb0c4}
@media(max-width:1000px){.ft .top{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:560px){.ft .top{grid-template-columns:1fr;padding:44px 0 26px;gap:28px}}
/* float WA */
.wafloat{position:fixed;right:18px;bottom:18px;z-index:45;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(31,170,89,.5);transition:.2s}
.wafloat:hover{background:var(--wa2);color:#fff;transform:scale(1.07)}
.wafloat svg{width:30px;height:30px}
.wafloat::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(31,170,89,.35);animation:pulse 2.4s infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.3);opacity:0}}
@media(max-width:560px){.wafloat{width:52px;height:52px;right:14px;bottom:14px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
:focus-visible{outline:3px solid rgba(201,162,74,.45);outline-offset:2px}

html[data-lang=zh] .zs{display:none}
.cat-layout>*,.dtop>*,.two-col>*,.inq>*{min-width:0}
@media(min-width:901px){.figs.c3{grid-template-columns:repeat(3,1fr)}}
#more,#inq{scroll-margin-top:96px}

/* ===== v7 palette lock: navy #0a1f33 + gold #c9a24a + white (matches approved v6 sample) ===== */
:root{--gold2:#b58d37;--goldt:#f6efdc}
.btn{border-radius:6px}
.btn.wa,.hwa{background:var(--gold);color:#13202c}
.btn.wa:hover,.hwa:hover{background:#d8b45c;color:#13202c;box-shadow:0 8px 20px rgba(201,162,74,.38)}
.hwa{border-radius:6px;height:40px}
.btn.pri{background:var(--navy)}.btn.pri:hover{background:var(--navy2)}
.btn.line:hover{border-color:var(--gold2);color:var(--navy)}
.cbtn.on{background:var(--navy)}
.cbtn:hover{background:var(--goldt)}
.langbtn:hover{border-color:var(--gold2);color:var(--navy)}
.pcard .wab{background:#e8f7ee}
.eyebrow,.kick{color:var(--gold)}
.tag{color:var(--gold2);background:var(--goldt)}
.aboutband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:48px;align-items:start;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:44px 0}
.aboutband .k{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);font-weight:700;margin-bottom:8px}
.aboutband h2{font-size:2rem;font-weight:760;color:var(--navy)}
.gline{display:block;width:44px;height:3px;background:var(--gold);margin-top:14px}
.aboutband .abt p{color:var(--text);font-size:1.04rem;line-height:1.8;margin-bottom:12px}
.aboutband .more{font-weight:650}.aboutband .more::after{content:" →"}
.sh h2::after{content:"";display:block;width:44px;height:3px;background:var(--gold);margin-top:12px}
@media(max-width:780px){.aboutband{grid-template-columns:1fr;gap:16px;padding:30px 0}.aboutband h2{font-size:1.55rem}}
.logo .mk{background:linear-gradient(140deg,#0a1f33,#0d3550);box-shadow:0 0 0 2px var(--gold) inset,0 4px 12px rgba(10,31,51,.25)}
.logo .mk svg{color:var(--gold)}
.srch button{background:var(--navy)}.srch button:hover{background:var(--gold);color:#13202c}
.srch input:focus,.form input:focus,.form textarea:focus{border-color:var(--gold2)}
.nav a.on{color:var(--navy)}.nav a.on::after{background:var(--gold)}
.ti .ic,.wy .ic,.ccard .ic{color:var(--gold2)}
.cc .n{color:var(--navy);background:var(--goldt)}
.pcard .more{color:var(--navy2)}.pcard .more:hover{color:var(--gold2)}
.panel h2::before{background:var(--gold)}
.th.on{border-color:var(--gold)}
.ar:hover{background:var(--navy);border-color:var(--navy)}
.inote svg,.mini svg,.fact .ic{color:var(--gold2)}
.dcrumb a:hover{color:var(--gold2)}
.cc .im{background:linear-gradient(140deg,#0a1f33,#13405f);color:#e6c777}
.cc .im::before{background-image:radial-gradient(rgba(201,162,74,.22) 1px,transparent 1.4px)}
.cc:hover{border-color:var(--gold)}
.ccards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.hot{display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);font-size:.92rem}
.hot svg{width:18px;height:18px;color:var(--gold2);flex:none}
.hot span{color:var(--mut)}.hot b{font-weight:700;letter-spacing:.02em;margin-left:auto;font-size:1.02rem}
.hot:hover{border-color:var(--gold);color:var(--navy)}
@media(max-width:560px){.util .container{flex-wrap:wrap;padding-top:6px;padding-bottom:6px}.util .r{gap:4px 14px}}
.band .btns{display:flex;gap:10px;flex-wrap:wrap}

/* product video */
.vsec{margin-top:8px}.vsec .panel{padding-bottom:18px}
.vbox{width:100%;max-width:520px;aspect-ratio:1/1;background:#0a1f33;border-radius:12px;overflow:hidden;margin:6px 0}
.vbox video{width:100%;height:100%;display:block;object-fit:contain;background:#0a1f33}
.vnote{font-size:.82rem;color:var(--mut);margin-top:6px}
/* company showcase */
.sec.dark2{background:linear-gradient(135deg,#071826,#0d3550);color:#c3d6e2}
.sec.dark2 .sh h2{color:#fff}.sec.dark2 .sh p{color:#9bb8c9}.sec.dark2 .sh .k{color:var(--gold)}
.cshow{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;align-items:start}
.cmain{position:relative;background:#000;border-radius:14px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 18px 44px rgba(0,0,0,.35)}
.cmain video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.cmute{position:absolute;right:12px;bottom:12px;z-index:2;border:0;border-radius:20px;background:rgba(10,31,51,.8);color:#fff;font-size:.8rem;padding:6px 13px;cursor:pointer;border:1px solid rgba(201,162,74,.6)}
.cmute .son{display:none}.cmute.on .son{display:inline}.cmute.on .soff{display:none}
.cthumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-height:420px;overflow:auto;padding:2px}
.cth{position:relative;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#000;cursor:pointer;aspect-ratio:16/10;padding:0;display:block}
.cth img{width:100%;height:100%;object-fit:cover;opacity:.75;transition:.2s}
.cth:hover img,.cth.on img{opacity:1}.cth.on{border-color:var(--gold)}
.cth i{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(10,31,51,.7);border:1px solid var(--gold)}
.cth i::after{content:"";position:absolute;left:11px;top:8px;border-left:9px solid var(--gold);border-top:6px solid transparent;border-bottom:6px solid transparent}
.cth span{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 5px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font-size:.75rem;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){.cshow{grid-template-columns:1fr}.cthumbs{display:flex;max-height:none;overflow-x:auto;gap:10px}.cth{flex:0 0 140px}}

.cshow.portrait{display:flex;justify-content:center;align-items:flex-start;gap:26px}
.cshow.portrait .cmain{flex:0 0 360px;width:360px;aspect-ratio:9/16;max-height:640px}
.cshow.portrait .cthumbs{display:grid;grid-template-columns:repeat(3,150px);gap:12px;max-height:none;overflow:visible;align-content:start}
.cshow.portrait .cth{aspect-ratio:9/16}
@media(max-width:900px){.cshow.portrait{flex-direction:column;align-items:center;gap:16px}.cshow.portrait .cmain{flex:none;width:min(100%,340px)}.cshow.portrait .cthumbs{display:flex;max-width:100%;overflow-x:auto;gap:10px;grid-template-columns:none}.cshow.portrait .cth{flex:0 0 96px;aspect-ratio:9/16}.cshow.portrait .cth span{font-size:.65rem}}

/* v7.2 FAQ */
.faqlist{display:flex;flex-direction:column;gap:12px}
.fq{background:#fff;border:1px solid #e3e8ee;border-radius:12px;overflow:hidden}
.fq summary{cursor:pointer;list-style:none;padding:16px 48px 16px 18px;font-weight:700;color:#0a1f33;position:relative;font-size:1.02rem}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.4rem;color:#c9a24a;line-height:1}
.fq[open] summary::after{content:"\2212"}
.fq .fa{padding:0 18px 18px;color:#3d4b5c;line-height:1.7}