/* HK Alltech Solutions Limited — site styles */
:root{
  --gold:#B8912F; --gold-lt:#D4AF37; --gold-wash:#FBF7EC;
  --ink:#14161A; --slate:#5A6270; --mute:#868D99;
  --line:#E7E3DA; --bg:#FFFFFF; --alt:#FAF7F0; --dark:#14161A; --deep:#191C22;
  --max:1120px; --r:3px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC","PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:34px;height:92px}
.brand{display:flex;align-items:center;gap:15px;margin-right:auto}
.brand:hover{text-decoration:none}
.logowrap{position:relative;display:block;flex:none;width:118px;line-height:0}
.logo{width:100%;height:auto;display:block}
.sheenwin{position:absolute;top:0;left:0;width:34%;height:100%;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.65) 32%,#000 50%,rgba(0,0,0,.65) 68%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.65) 32%,#000 50%,rgba(0,0,0,.65) 68%,rgba(0,0,0,0) 100%);
  transform:translateX(-120%);animation:sheenwin 6s cubic-bezier(.33,0,.2,1) 1s infinite}
.sheenwin .ghost{position:absolute;top:0;left:0;width:294%;height:100%;
  filter:brightness(1.85) saturate(.45);opacity:.95;
  transform:translateX(40.8%);animation:sheenghost 6s cubic-bezier(.33,0,.2,1) 1s infinite}
@keyframes sheenwin{0%{transform:translateX(-120%)}14%{transform:translateX(320%)}100%{transform:translateX(320%)}}
@keyframes sheenghost{0%{transform:translateX(40.8%)}14%{transform:translateX(-108.8%)}100%{transform:translateX(-108.8%)}}
@media(prefers-reduced-motion:reduce){.sheenwin{display:none}}
.brand b{font-size:19px;letter-spacing:.13em;color:var(--ink);font-weight:700}
.brand .txt{display:block;line-height:1.25}
.brand .sub{display:block;font-size:11.5px;letter-spacing:.15em;color:var(--mute);font-weight:600;margin-top:3px}
.nav a.lnk{color:var(--slate);font-size:16px;font-weight:500}
.nav a.lnk:hover,.nav a.lnk[aria-current="page"]{color:var(--ink);text-decoration:none}
.nav a.lnk[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--gold)}
.langbtn{border:1px solid var(--line);background:#fff;color:var(--slate);border-radius:var(--r);
  padding:9px 14px;font:600 14px/1 inherit;letter-spacing:.05em;cursor:pointer}
.langbtn:hover{border-color:var(--gold);color:var(--gold)}
.navtoggle{display:none;border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:7px 10px;cursor:pointer;font-size:15px}

/* ---------- type ---------- */
h1,h2,h3{line-height:1.22;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(30px,4.4vw,46px);font-weight:700}
h2{font-size:clamp(22px,2.7vw,30px);font-weight:700}
h3{font-size:19.5px;font-weight:650}
.eyebrow{font-size:13.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.lead{font-size:19px;color:var(--slate);max-width:60ch}
p{margin:14px 0}
.sec{padding:76px 0;border-top:1px solid var(--line)}
.sec.alt{background:var(--alt)}
.sec > .wrap > .eyebrow:first-child{margin-top:0}

/* ---------- hero ---------- */
.hero{padding:88px 0 76px;background:
  radial-gradient(900px 380px at 82% -10%,var(--gold-wash),transparent 70%)}
.hero h1{max-width:19ch}
.hero .lead{margin-top:20px}
.rule{width:54px;height:3px;background:var(--gold);margin:0 0 26px}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--ink);color:#fff;padding:15px 28px;border-radius:var(--r);
  font-size:16px;font-weight:600}
.btn:hover{background:var(--gold);text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* ---------- grid + cards ---------- */
.grid{display:grid;gap:22px;margin-top:36px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.card h3{margin-bottom:9px}
.card p{margin:0;color:var(--slate);font-size:16.5px}
.num{font-size:13px;font-weight:700;letter-spacing:.13em;color:var(--gold);margin-bottom:12px}

/* spec list */
.spec{border-top:1px solid var(--line);margin-top:34px}
.spec div{display:grid;grid-template-columns:210px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.spec dt{font-weight:650;font-size:16px}
.spec dd{margin:0;color:var(--slate);font-size:16.5px}

/* steps */
.steps{counter-reset:s;margin-top:36px;display:grid;gap:2px}
.steps li{list-style:none;counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:18px;
  padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.steps li::before{content:counter(s,decimal-leading-zero);grid-column:1;grid-row:1;
  color:var(--gold);font-weight:700;font-size:13px;letter-spacing:.06em}
.steps b{grid-column:2;grid-row:1;display:block;font-size:17.5px}
.steps span{grid-column:2;grid-row:2;color:var(--slate);font-size:16.5px;max-width:70ch}

/* callout */
.callout{background:var(--dark);color:#fff;border-radius:var(--r);padding:44px;margin-top:8px}
.callout h2{color:#fff}
.callout p{color:#B6BBC4;max-width:58ch}
.callout .btn{background:var(--gold);color:var(--dark);margin-top:22px}
.callout .btn:hover{background:#fff}

/* contact */
.cbox{border:1px solid var(--line);border-radius:var(--r);padding:28px}
.cbox h3{margin-bottom:14px}
.cbox p{margin:9px 0;font-size:16.5px;color:var(--slate)}
.cbox strong{color:var(--ink);font-weight:600}
label{display:block;font-size:13px;font-weight:650;margin:16px 0 6px}
input,textarea,select{width:100%;border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;
  font:15px/1.5 inherit;color:var(--ink);background:#fff}
input:focus,textarea:focus,select:focus{outline:2px solid var(--gold-lt);outline-offset:-1px;border-color:var(--gold)}
textarea{min-height:120px;resize:vertical}
.hint{font-size:13px;color:var(--mute);margin-top:14px}

/* ---------- footer ---------- */
footer{background:var(--dark);color:#9AA1AC;padding:60px 0 34px;font-size:15.5px}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
footer h4{color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;font-weight:700}
footer a{color:#9AA1AC}
footer a:hover{color:var(--gold-lt)}
footer .fbrand b{color:#fff;letter-spacing:.14em;font-size:14px}
.legal{border-top:1px solid #262A31;margin-top:38px;padding-top:20px;font-size:12.5px;color:#6E757F;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

[data-zh]{display:none}
html[lang="zh"] [data-en]{display:none}
html[lang="zh"] [data-zh]{display:revert}
html[lang="zh"] body{line-height:1.8}

@media(max-width:860px){
  .g3,.g2,footer .cols{grid-template-columns:1fr}
  .spec div{grid-template-columns:1fr;gap:4px}
  .navtoggle{display:block}
  .nav .lnk{display:none}
  .nav.open{height:auto;flex-wrap:wrap;padding-bottom:14px}
  .nav.open .lnk{display:block;flex:0 0 100%;padding:9px 0;border-top:1px solid var(--line)}
  .sec{padding:56px 0}.hero{padding:60px 0 52px}.callout{padding:30px}
}

/* --- illustrations --- */
.icon{width:44px;height:44px;margin-bottom:16px;display:block}
.art{border:1px solid var(--line);border-radius:var(--r);background:var(--alt);overflow:hidden}
.art svg{width:100%;height:auto;display:block}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:40px}
.split.rev .art{order:-1}
.split h2{margin-bottom:10px}
.split p{color:var(--slate);margin:10px 0 0}
.hero .split{margin-top:0;gap:52px}
.mkt{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.mkt span{border:1px solid var(--line);background:#fff;border-radius:100px;padding:10px 20px;font-size:16px;font-weight:600}
.tag{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold);border-radius:100px;padding:5px 12px;margin-bottom:16px}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:26px}.split.rev .art{order:0}}

/* --- moving mosaic --- */
.mosaic{background:var(--dark);border-top:1px solid #22262D;border-bottom:1px solid #22262D;
  overflow:hidden;padding:14px 0}
.mtrack{display:flex;gap:12px;width:max-content;animation:drift 70s linear infinite}
.mtrack + .mtrack{margin-top:12px;animation-duration:88s;animation-direction:reverse}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.tile{position:relative;flex:none;width:236px;height:148px;border-radius:3px;overflow:hidden;
  background:#1D2027;border:1px solid #2A2E36}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile.ph{background-image:repeating-linear-gradient(135deg,rgba(184,145,47,.16) 0 2px,transparent 2px 11px)}
.tile .cap{position:absolute;left:11px;bottom:9px;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  color:#7E858F;text-transform:uppercase}
.tile .cap[data-zh]{letter-spacing:.06em}
.mosaic-note{color:#6E757F;font-size:12px;text-align:center;padding:10px 24px 0}
@media(prefers-reduced-motion:reduce){.mtrack{animation:none}}
@media(max-width:860px){.tile{width:172px;height:112px}}

/* photos in place of the line illustrations */
.art.photo{background:#111;border:none}
.art.photo img{width:100%;height:auto;display:block}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .cap{z-index:2;text-shadow:0 1px 3px rgba(0,0,0,.85);color:#F2F4F7}
.tile::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.62) 0,rgba(0,0,0,.12) 46%,transparent 70%)}
.cardimg{margin:-26px -26px 20px;aspect-ratio:16/9;overflow:hidden;background:#EDEFF2}
.cardimg img{width:100%;height:100%;object-fit:cover;display:block}

/* real-photo gallery (portrait) */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.gal figure{margin:0}
.gal .ph{aspect-ratio:3/4;overflow:hidden;border-radius:var(--r);background:#EDEFF2;border:1px solid var(--line)}
.gal .ph img{width:100%;height:100%;object-fit:cover;display:block}
.gal figcaption{font-size:13.5px;color:var(--slate);margin-top:11px;font-weight:600}
@media(max-width:860px){.gal{grid-template-columns:repeat(2,1fr)}}

/* hero: headline-led, product image beside */
.hero.big{padding:104px 0 92px}
.hero.big h1{font-size:clamp(34px,5.2vw,58px);max-width:15ch}
.hero.big .lead{font-size:19px;margin-top:22px}
.hero .art.photo{border-radius:var(--r);overflow:hidden}
.statline{display:flex;gap:34px;margin-top:38px;flex-wrap:wrap}
.statline div{border-left:2px solid var(--gold);padding-left:14px}
.statline b{display:block;font-size:22px;line-height:1.2}
.statline span{font-size:13.5px;color:var(--slate)}
@media(max-width:860px){.hero.big{padding:52px 0 46px}.nav{height:72px}.logowrap{width:86px}}

/* ---------- brand lockup with the Chinese entity name ---------- */
.brand .zh{display:block;font-size:13.5px;letter-spacing:.06em;color:var(--gold);font-weight:600;margin-top:4px}

/* ---------- dark hero ---------- */
.hero.dark{background:var(--dark);color:#fff;
  background-image:radial-gradient(760px 380px at 88% 8%,rgba(184,145,47,.22),transparent 66%),
                   linear-gradient(180deg,#191C22 0%,#14161A 100%)}
.hero.dark h1{color:#fff}
.hero.dark .lead{color:#B9BFC9}
.hero.dark .rule{background:var(--gold-lt)}
.hero.dark .eyebrow{color:var(--gold-lt)}
.hero.dark .btn{background:var(--gold);color:#14161A}
.hero.dark .btn:hover{background:#fff;color:#14161A}
.hero.dark .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.32)}
.hero.dark .btn.ghost:hover{border-color:var(--gold-lt);color:var(--gold-lt)}
.hero.dark .statline div{border-left-color:var(--gold-lt)}
.hero.dark .statline b{color:#fff}
.hero.dark .statline span{color:#9AA1AC}
.hero.dark .art.photo{border:1px solid rgba(255,255,255,.12)}
.statline b{font-size:26px}
.statline span{font-size:14.5px}

/* warm the alternating band and card edges */
.sec.alt{background:var(--alt)}
.card{border-color:var(--line)}