/* ============================================================
   Liantuo Metal — site stylesheet
   graphite + spark orange, engineering-drawing language
   ============================================================ */
:root{
  --ink:#0C0F12; --panel:#13181D; --panel-2:#1A2128; --line:#252E36;
  --mist:#8B959E; --paper:#EEF2F4; --spark:#FF6A13; --spark-soft:rgba(255,106,19,.14);
  --display:'Saira',system-ui,sans-serif;
  --body:'IBM Plex Sans','Noto Sans SC',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --wrap:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--spark);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--spark);display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--spark)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.15;letter-spacing:-.01em}
h2{font-size:clamp(30px,4vw,46px)}
h3{font-size:20px}
.lede{color:var(--mist);max-width:62ch}
.section{padding:110px 0;position:relative}
.section + .section{border-top:1px solid var(--line)}
.dim{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;color:#4C5862;letter-spacing:.14em;margin-top:14px}
.dim .bar{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);background:transparent;color:var(--paper);cursor:pointer;transition:.22s}
.btn:hover{border-color:var(--spark);color:var(--spark)}
.btn-solid{background:var(--spark);border-color:var(--spark);color:#0C0F12;font-weight:500}
.btn-solid:hover{background:#ff7f34;border-color:#ff7f34;color:#0C0F12}
.btn svg{width:14px;height:14px}

/* header */
.topbar{border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--mist)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:20px}
.topbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header{position:sticky;top:0;z-index:50;background:rgba(12,15,18,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.logo{display:flex;align-items:center;gap:12px}
.logo-mark{width:34px;height:34px;flex:none;object-fit:contain}
img.logo-mark{width:auto;max-width:150px;max-height:38px}
.logo-txt{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.04em;line-height:1.05}
.logo-txt small{display:block;font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.22em;color:var(--mist)}
.menu{display:flex;gap:28px;font-size:14px;font-weight:500}
.menu a{position:relative;padding:6px 0;color:#C7CFD5;transition:.2s}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--spark);transition:.25s}
.menu a:hover,.menu a.on{color:#fff}
.menu a.on::after,.menu a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:14px}
.lang{display:flex;border:1px solid var(--line);font-family:var(--mono);font-size:11px}
.lang a{padding:8px 10px;color:var(--mist);letter-spacing:.06em}
.lang a.on{background:var(--spark);color:#0C0F12}
.burger{display:none;background:none;border:1px solid var(--line);width:42px;height:42px;color:var(--paper);cursor:pointer}

/* hero */
.hero{position:relative;padding:90px 0 100px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.35;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 20%,transparent 75%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(38px,5.2vw,64px);font-weight:700;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--spark)}
.hero p{margin:26px 0 34px;font-size:17px;color:var(--mist);max-width:52ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-specs{display:flex;gap:34px;margin-top:48px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap}
.hero-specs div{font-family:var(--mono)}
.hero-specs b{display:block;font-family:var(--display);font-size:28px;font-weight:600;color:#fff}
.hero-specs b span{font-size:15px}
.hero-specs em{display:block;font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}

/* laser stage */
.stage{position:relative;aspect-ratio:1/1;border:1px solid var(--line);background:radial-gradient(circle at 50% 50%,#182029,#0E1216 70%)}
.stage i{position:absolute;width:14px;height:14px;border:1px solid var(--spark);opacity:.6}
.stage .c1{top:-1px;left:-1px;border-right:0;border-bottom:0}
.stage .c2{top:-1px;right:-1px;border-left:0;border-bottom:0}
.stage .c3{bottom:-1px;left:-1px;border-right:0;border-top:0}
.stage .c4{bottom:-1px;right:-1px;border-left:0;border-top:0}
.stage figcaption{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#586470}
.cut-path{fill:none;stroke:var(--spark);stroke-width:1.6;stroke-dasharray:1600;stroke-dashoffset:1600;animation:cut 7s cubic-bezier(.6,0,.4,1) infinite;filter:drop-shadow(0 0 6px rgba(255,106,19,.55))}
.cut-fill{fill:rgba(255,106,19,.05);stroke:none;opacity:0;animation:reveal 7s linear infinite}
.ghost{fill:none;stroke:#2A343D;stroke-width:1;stroke-dasharray:4 4}
.spark{r:3.2;fill:#fff;filter:drop-shadow(0 0 8px var(--spark));offset-path:path("M60 60 H240 V120 H300 V180 H240 V240 H140 A40 40 0 0 1 140 160 H60 Z");offset-distance:0%;animation:travel 7s cubic-bezier(.6,0,.4,1) infinite}
@keyframes cut{0%{stroke-dashoffset:1600}55%{stroke-dashoffset:0}85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.25}}
@keyframes travel{0%{offset-distance:0%;opacity:0}4%{opacity:1}55%{offset-distance:100%;opacity:1}62%{opacity:0}100%{offset-distance:100%;opacity:0}}
@keyframes reveal{0%,50%{opacity:0}60%,90%{opacity:1}100%{opacity:0}}

/* page hero (inner pages) */
.phero{padding:70px 0 60px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;opacity:.25;-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%)}
.phero .wrap{position:relative}
.phero h1{font-size:clamp(32px,4.6vw,54px);font-weight:700;letter-spacing:-.02em;max-width:20ch}
.phero p{margin-top:18px;color:var(--mist);max-width:62ch}
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#5C6874;margin-bottom:22px}
.crumb a:hover{color:var(--spark)}
.crumb span{color:var(--spark)}

/* capabilities grid */
.grid-cap{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.cap{background:var(--panel);transition:.28s;position:relative}
.cap:hover{background:var(--panel-2)}
.cap-in{padding:34px 30px 30px}
.cap.has-img .cap-in{padding-top:24px}
.cap-img{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:var(--ink)}
.cap-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05);transition:.4s}
.cap:hover .cap-img img{filter:none;transform:scale(1.03)}
.cap .no{font-family:var(--mono);font-size:11px;color:#4C5862;letter-spacing:.14em}
.cap svg{width:34px;height:34px;stroke:var(--spark);fill:none;stroke-width:1.5;margin:18px 0 16px}
.cap.has-img svg{width:26px;height:26px;margin:12px 0 12px}
.cap h3{margin-bottom:8px}
.cap p{font-size:14.5px;color:var(--mist)}
.cap::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--spark);transition:.3s}
.cap:hover::after{width:100%}

/* workshop gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
.gal figure{border:1px solid var(--line);background:var(--panel);overflow:hidden;transition:.28s}
.gal figure:hover{border-color:#3A4750;transform:translateY(-4px)}
.gal img{aspect-ratio:4/3;width:100%;object-fit:cover;filter:grayscale(.3);transition:.4s}
.gal figure:hover img{filter:none}
.gal figcaption{padding:18px 20px 22px}
.gal figcaption b{display:block;font-family:var(--display);font-size:17px;font-weight:600;margin-bottom:5px}
.gal figcaption span{font-size:13.5px;color:var(--mist)}

/* products */
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.grid-prod{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.prod{border:1px solid var(--line);background:var(--panel);transition:.28s;overflow:hidden;display:block}
.prod:hover{border-color:#3A4750;transform:translateY(-4px)}
.prod-fig{aspect-ratio:4/3;background:linear-gradient(150deg,#1B222A,#11161B);display:grid;place-items:center;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.prod-fig svg{width:64%;stroke:#7C8B97;fill:none;stroke-width:1.4;transition:.3s;position:relative}
.prod:hover .prod-fig svg{stroke:var(--spark)}
.prod-fig img{width:100%;height:100%;object-fit:cover}
.prod-fig::before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:22px 22px}
.prod-body{padding:22px 24px 26px}
.prod-body h3{font-size:18px;margin-bottom:6px}
.prod-body p{font-size:14px;color:var(--mist)}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;padding:4px 8px;border:1px solid var(--line);color:#7C8B97}

/* filter bar */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px}
.filters a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--line);color:var(--mist);transition:.2s}
.filters a:hover{border-color:var(--spark);color:var(--spark)}
.filters a.on{background:var(--spark);border-color:var(--spark);color:#0C0F12}

/* product detail */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.pd-fig{border:1px solid var(--line);background:linear-gradient(150deg,#1B222A,#11161B);aspect-ratio:4/3;display:grid;place-items:center;position:relative}
.pd-fig svg{width:62%;stroke:var(--spark);fill:none;stroke-width:1.4}
.pd-fig img{width:100%;height:100%;object-fit:cover}
.pd-fig::before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:24px 24px}
.spec{width:100%;border-collapse:collapse;margin-top:18px;font-size:14.5px}
.spec th,.spec td{text-align:left;padding:13px 0;border-bottom:1px solid var(--line)}
.spec th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);font-weight:400;width:40%}
.spec td{color:#D3DAE0}
.rich{color:#C2CAD1;font-size:16px}
.rich p{margin-bottom:18px}
.h-sub{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--spark);margin:36px 0 6px}

/* process */
.process{display:grid;grid-template-columns:repeat(5,1fr);margin-top:60px;border-top:1px solid var(--line)}
.step{padding:30px 22px 0;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:0}
.step::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--spark)}
.step .n{font-family:var(--mono);font-size:11px;color:var(--spark);letter-spacing:.14em}
.step h3{font-size:17px;margin:12px 0 8px}
.step p{font-size:14px;color:var(--mist)}

/* why / stats */
.why{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--panel);padding:30px 26px}
.stat b{display:block;font-family:var(--display);font-size:38px;font-weight:700;color:#fff;line-height:1}
.stat b i{font-style:normal;color:var(--spark);font-size:22px;vertical-align:top;margin-left:2px}
.stat span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--spark);margin:12px 0 8px}
.stat p{font-size:13.5px;color:var(--mist)}
.checks{list-style:none;margin-top:32px}
.checks li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;color:#C7CFD5}
.checks li::before{content:"";width:6px;height:6px;background:var(--spark);flex:none;margin-top:9px;transform:rotate(45deg)}

/* industries */
.marq{margin-top:48px;display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line)}
.ind{background:var(--panel);flex:1 1 190px;padding:24px;text-align:center;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#9AA5AE;transition:.25s}
.ind:hover{background:var(--spark-soft);color:var(--spark)}

/* lists: equipment / certs / milestones */
.two{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:50px}
.rows{list-style:none;border-top:1px solid var(--line)}
.rows li{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line);font-size:15px;color:#C7CFD5}
.rows li b{font-family:var(--mono);font-size:12px;color:var(--spark);font-weight:400;white-space:nowrap}
.time{list-style:none;margin-top:44px;border-left:1px solid var(--line);padding-left:28px}
.time li{position:relative;padding-bottom:32px}
.time li::before{content:"";position:absolute;left:-32px;top:8px;width:7px;height:7px;background:var(--spark)}
.time .y{font-family:var(--display);font-size:22px;font-weight:600;color:#fff}
.time p{color:var(--mist);font-size:15px;max-width:60ch}

/* news */
.grid-news{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.card{border:1px solid var(--line);background:var(--panel);padding:28px 26px 30px;transition:.26s;display:flex;flex-direction:column;gap:12px}
.card:hover{border-color:#3A4750;transform:translateY(-4px)}
.card .meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--spark);display:flex;gap:14px}
.card .meta em{font-style:normal;color:#5C6874}
.card h3{font-size:19px;line-height:1.3}
.card p{font-size:14.5px;color:var(--mist);flex:1}
.card .more{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#C7CFD5}
.card:hover .more{color:var(--spark)}

/* article */
.article{max-width:760px;margin:0 auto}
.article .rich p{margin-bottom:22px;line-height:1.85}
.article .meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--spark);display:flex;gap:16px;margin-bottom:20px}
.article .meta em{font-style:normal;color:#5C6874}

/* forms */
.quote-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.contact-list{margin-top:34px;list-style:none}
.contact-list li{padding:18px 0;border-top:1px solid var(--line)}
.contact-list .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--spark)}
.contact-list .v{font-size:15px;color:#C7CFD5;margin-top:4px}
form.rfq{border:1px solid var(--line);background:var(--panel);padding:34px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin:0 0 8px}
input,select,textarea{width:100%;background:var(--ink);border:1px solid var(--line);color:var(--paper);padding:12px 14px;font-family:var(--body);font-size:15px;margin-bottom:18px;transition:.2s}
input:focus,select:focus,textarea:focus{border-color:var(--spark);outline:none}
textarea{min-height:120px;resize:vertical}
.hp{position:absolute;left:-9999px}
.form-note{font-family:var(--mono);font-size:11.5px;color:#5C6874;margin-top:14px}
.msg{display:none;margin-top:16px;padding:12px 14px;font-family:var(--mono);font-size:12.5px}
.msg.ok{border:1px solid var(--spark);color:var(--spark)}
.msg.err{border:1px solid #C0483B;color:#E27266}

/* cta band */
.band{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:70px 0}
.band .wrap{display:flex;justify-content:space-between;align-items:center;gap:34px;flex-wrap:wrap}
.band h2{font-size:clamp(26px,3.2vw,38px);max-width:20ch}

/* footer */
footer{padding:70px 0 30px;font-size:14px;color:var(--mist)}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.f-grid h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:18px;font-weight:500}
.f-grid ul{list-style:none}
.f-grid li{margin-bottom:10px}
.f-grid a:hover{color:var(--spark)}
.f-bot{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:#5C6874}

/* 404 */
.e404{padding:140px 0;text-align:center}
.e404 .code{font-family:var(--display);font-size:120px;font-weight:700;color:var(--panel-2);line-height:1}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

@media(max-width:1000px){
  .hero .wrap,.why,.quote-grid,.pd,.two{grid-template-columns:1fr}
  .grid-cap,.grid-prod,.grid-news,.gal{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:1fr 1fr}
  .step{border-bottom:1px solid var(--line);padding-bottom:26px}
  .f-grid{grid-template-columns:1fr 1fr}
  .menu{display:none;position:absolute;top:72px;left:0;right:0;background:var(--panel);flex-direction:column;gap:0;padding:10px 24px 20px;border-bottom:1px solid var(--line)}
  .menu.open{display:flex}
  .menu a{padding:14px 0;border-bottom:1px solid var(--line)}
  .burger{display:grid;place-items:center}
  .nav-cta .btn{display:none}
  .stage{order:-1}
}
@media(max-width:620px){
  .section{padding:76px 0}
  .grid-cap,.grid-prod,.grid-news,.gal,.process,.stats,.f-grid,.f-row{grid-template-columns:1fr}
  .topbar .wrap span:nth-child(2){display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .cut-path{stroke-dashoffset:0}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}