:root{
  --ink:#111;
  --muted:#6c6c6c;
  --paper:#f2f0eb;
  --line:rgba(17,17,17,.12);
  --accent:#b7a17d;
  --orange:#ff6b18;
  --navy:#06101d;
  --navy2:#0a1c2f;
  --cyan:#5bd6ff;
  --green:#8ce6bf;
  --radius:0px;
  --max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,"Noto Sans TC","PingFang TC","Microsoft JhengHei",Arial,sans-serif;
  background:#101010;
  color:#fff;
  overflow-x:hidden;
}
button,a{font:inherit}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.switcher{
  position:sticky;top:0;z-index:9999;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px clamp(16px,3vw,36px);
  background:rgba(10,10,10,.92);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.12)
}
.switcher .brand{font-weight:800;letter-spacing:.02em}
.switcher .brand small{opacity:.55;font-weight:500;margin-left:8px}
.switcher .tabs{display:flex;gap:8px;flex-wrap:wrap}
.switcher button{
  border:1px solid rgba(255,255,255,.2);background:transparent;color:white;
  padding:9px 14px;cursor:pointer;transition:.25s
}
.switcher button.active,.switcher button:hover{background:white;color:#111}
.helper{font-size:12px;opacity:.6}
.concept{display:none}
.concept.active{display:block}
.frame{max-width:var(--max);margin:auto}
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.btn{
  display:inline-flex;align-items:center;gap:16px;
  padding:14px 18px;border:1px solid currentColor;font-weight:700;
  transition:.2s
}
.btn:hover{transform:translateY(-2px)}
.arrow::after{content:"↗";font-size:1.15em}
.visual{
  min-height:260px;position:relative;overflow:hidden;border:1px solid currentColor
}
.visual::before,.visual::after{content:"";position:absolute;inset:auto}
.visual::before{
  width:85%;height:85%;right:-12%;top:-20%;
  background:linear-gradient(135deg,transparent 15%,rgba(255,255,255,.35),transparent 48%),
             repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px 48px);
  transform:skewX(-12deg) rotate(4deg)
}
.visual::after{
  left:-8%;right:8%;bottom:-18%;height:55%;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.09) 0 1px,transparent 1px 30px);
  transform:skewY(-6deg)
}
.section-title{font-size:clamp(34px,5vw,78px);line-height:.92;margin:0}
.section-sub{max-width:700px;line-height:1.8;color:var(--muted)}
.num{font-size:clamp(40px,7vw,120px);font-weight:800;line-height:.8}
.grid4{display:grid;grid-template-columns:repeat(4,1fr)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr)}
.card{border:1px solid var(--line);padding:24px}
.tag{font-size:12px;opacity:.64;letter-spacing:.08em}
.fake-img{
  position:relative;min-height:180px;overflow:hidden;background:
  linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.01)),
  repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 54px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 38px);
}
.fake-img::before{
  content:"";position:absolute;left:-5%;right:-5%;bottom:0;height:38%;
  background:linear-gradient(175deg,transparent 0 22%,currentColor 23% 26%,transparent 27%),
             linear-gradient(10deg,transparent 0 58%,currentColor 59% 62%,transparent 63%);
  opacity:.25
}
.fake-img.round::after{
  content:"";position:absolute;width:50%;aspect-ratio:1;border-radius:50%;
  right:8%;top:10%;border:1px solid currentColor;box-shadow:0 0 60px currentColor;
  opacity:.18
}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:30px}

/* ---------- CONCEPT A ---------- */
.a{
  background:var(--paper);color:var(--ink);
  --line:rgba(17,17,17,.14)
}
.a .hero{
  min-height:calc(100vh - 61px);padding:22px clamp(20px,4vw,60px) 60px;
  display:grid;grid-template-rows:auto 1fr
}
.a .nav{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:16px}
.a .logo{font-weight:900;font-size:23px}
.a .navlinks{display:flex;gap:28px;font-size:13px}
.a .hero-main{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}
.a .hero h1{font-size:clamp(56px,8.5vw,138px);line-height:.82;letter-spacing:-.06em;margin:0}
.a .hero p{max-width:560px;line-height:1.8}
.a .collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.2fr .8fr;gap:10px;min-height:560px}
.a .collage .fake-img:first-child{grid-column:1/3;min-height:330px;background:
  linear-gradient(180deg,#42484d 0 30%,#8b9399 31% 65%,#2d3235 66%),
  repeating-linear-gradient(90deg,transparent 0 80px,rgba(255,255,255,.2) 81px 82px)}
.a .collage .fake-img:nth-child(2){background:
  radial-gradient(circle at 40% 35%,#dfd8cd 0 6%,#a89c8e 7% 14%,#665d55 15% 25%,#c4b9a8 26% 45%,#514a44 46% 100%)}
.a .collage .fake-img:nth-child(3){background:
  linear-gradient(150deg,#e1dfd7 0 28%,#60656a 29% 36%,#b7bcc0 37% 47%,#3b3f43 48% 56%,#d7d9d9 57%)}
.a .product-index{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.a .product-row{
  display:grid;grid-template-columns:120px 1fr 1.25fr;align-items:center;
  min-height:150px;border-bottom:1px solid var(--line)
}
.a .product-row:last-child{border-bottom:0}
.a .product-row .n{font-size:64px;font-weight:900;color:var(--accent);padding-left:32px}
.a .product-row h3{font-size:clamp(26px,3vw,46px);margin:0}
.a .product-row .texture{height:100%;min-height:150px;border-left:1px solid var(--line)}
.a .product-stage{display:grid;grid-template-columns:.72fr 1.28fr;min-height:520px;background:#141716;color:#f4f4f4;border-bottom:1px solid #3b3b3b}
.a .product-stage .copy{padding:56px clamp(22px,4vw,60px);display:flex;flex-direction:column;justify-content:center}
.a .product-stage h2{font-size:clamp(46px,6vw,90px);margin:.1em 0}
.a .product-stage .fake-img{min-height:520px;border:0;background:
  linear-gradient(135deg,#292e31,#8d9699 55%,#d1d4d4);
}
.a .product-stage:nth-child(even){grid-template-columns:1.28fr .72fr}
.a .product-stage:nth-child(even) .copy{order:2}
.a .selector{padding:80px clamp(20px,4vw,60px);display:grid;grid-template-columns:.6fr 1.4fr;gap:40px}
.a table{width:100%;border-collapse:collapse;font-size:14px}
.a th,.a td{padding:18px 10px;border-bottom:1px solid var(--line);text-align:center}
.a th:first-child,.a td:first-child{text-align:left}
.dot{display:inline-block;width:12px;height:12px;border:1px solid currentColor;border-radius:50%}
.dot.on{background:var(--accent);border-color:var(--accent)}
.a .cases{padding:70px clamp(20px,4vw,60px);border-top:1px solid var(--line)}
.a .cases .card{padding:0 0 20px;border:0;border-right:1px solid var(--line)}
.a .cases .fake-img{min-height:230px;color:#111;background:
  linear-gradient(150deg,#1e2528,#8d999d 45%,#d5d4ce)}
.a .about{padding:90px clamp(20px,4vw,60px);display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;border-top:1px solid var(--line)}
.a .about h2{font-size:clamp(48px,7vw,110px);line-height:.82;margin:0}
.a .cta{margin:0 clamp(20px,4vw,60px);padding:70px;background:#151817;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px}
.a footer{padding:60px clamp(20px,4vw,60px);border-top:1px solid var(--line)}
.a footer h4{margin:0 0 12px}

/* ---------- CONCEPT B ---------- */
.b{
  background:#fafafa;color:#111;
  --line:#dcdcdc
}
.b .page{max-width:1440px;margin:auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.b .nav{display:flex;align-items:center;justify-content:space-between;padding:20px 30px;border-bottom:1px solid var(--line);background:white}
.b .nav .logo{font-weight:900;font-size:22px}
.b .navlinks{display:flex;gap:30px;font-size:13px}
.b .section{display:grid;grid-template-columns:160px 1fr;border-bottom:1px solid var(--line)}
.b .side{padding:34px 26px;border-right:1px solid var(--line)}
.b .side .num{font-size:58px}
.b .body{padding:34px;background-image:
  linear-gradient(to right,transparent 0 99%,rgba(0,0,0,.035) 100%),
  linear-gradient(to bottom,transparent 0 99%,rgba(0,0,0,.03) 100%);
  background-size:90px 90px
}
.b .hero .body{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;min-height:580px}
.b .hero h1{font-size:clamp(48px,6vw,90px);line-height:.9;margin:60px 0 18px;letter-spacing:-.045em}
.b .orange-line{width:45px;height:4px;background:var(--orange);margin:16px 0}
.b .mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.2fr .8fr;gap:4px}
.b .mosaic .fake-img:first-child{grid-column:1/3;background:
  linear-gradient(90deg,#d9d9d9 0 40%,#a8adb0 40% 62%,#e9e9e9 62%),
  repeating-linear-gradient(90deg,transparent 0 70px,#8d8d8d 71px 72px)}
.b .mosaic .fake-img:nth-child(2){background:
  linear-gradient(150deg,#efefef 0 40%,#a5a5a5 41% 45%,#e7e7e7 46%)}
.b .mosaic .fake-img:nth-child(3){background:#272727;color:white}
.b .products{display:grid;grid-template-columns:repeat(4,1fr)}
.b .products .card{background:white}
.b .products h3{font-size:22px;margin:16px 0 8px}
.b .applications{display:grid;grid-template-columns:repeat(4,1fr)}
.b .applications .card{padding:0 0 24px;background:white}
.b .applications .card>*:not(.fake-img){margin-left:18px;margin-right:18px}
.b .projects{display:grid;grid-template-columns:repeat(4,1fr)}
.b .projects .card{padding:0;background:white}
.b .projects .fake-img{min-height:220px;background:
  linear-gradient(140deg,#777,#d2d2d2 55%,#9b9b9b)}
.b .projects h3,.b .projects p{padding:0 18px}
.b .process{display:grid;grid-template-columns:repeat(4,1fr)}
.b .process .card{min-height:250px;background:white}
.b .icon{width:50px;height:50px;border:1px solid #111;border-radius:50%;display:grid;place-items:center;margin:20px 0}
.b .stats{display:grid;grid-template-columns:1.2fr .8fr .8fr}
.b .stats .fake-img{min-height:330px;background:
  linear-gradient(90deg,#d1d1d1,#8d9498 35%,#ececec 36%,#b2b9bd)}
.b .statgrid{display:grid;grid-template-columns:1fr 1fr}
.b .stat{display:grid;place-items:center;border:1px solid var(--line);font-size:20px;background:white}
.b .stat b{font-size:40px}
.b .contactbar{background:#222;color:white;padding:50px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.b .contactbar .btn{background:var(--orange);border-color:var(--orange)}
.b footer{padding:50px 30px;background:white}
.b .footer-grid{grid-template-columns:1.5fr repeat(4,1fr)}

/* ---------- CONCEPT C ---------- */
.c{
  background:
   radial-gradient(circle at 80% 5%,rgba(45,129,190,.22),transparent 28%),
   linear-gradient(180deg,#040912,#07121e 45%,#040912);
  color:#f4fbff;
  --line:rgba(118,205,255,.2)
}
.c .nav{display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,4vw,56px);border-bottom:1px solid var(--line)}
.c .logo{font-weight:900;font-size:22px}
.c .navlinks{display:flex;gap:30px;font-size:13px;color:#cfeaff}
.c .hero{
  padding:80px clamp(20px,4vw,56px);min-height:720px;
  display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:30px
}
.c .hero h1{font-size:clamp(54px,7vw,110px);line-height:.9;margin:10px 0 24px;letter-spacing:-.05em}
.glow{color:#b8ecff;text-shadow:0 0 28px rgba(91,214,255,.5)}
.c .hero-visual{
  min-height:520px;position:relative;overflow:hidden;border:1px solid var(--line);
  background:
   radial-gradient(ellipse at 35% 20%,rgba(127,244,255,.26),transparent 25%),
   radial-gradient(ellipse at 75% 70%,rgba(0,132,255,.25),transparent 30%),
   linear-gradient(155deg,#0b1d30,#07101c 60%,#06101c)
}
.c .hero-visual::before,
.c .hero-visual::after{
  content:"";position:absolute;left:8%;right:8%;height:40%;border:1px solid rgba(92,215,255,.8);
  border-radius:50%;transform:skewY(-8deg) rotate(-6deg);box-shadow:0 0 30px rgba(92,215,255,.25)
}
.c .hero-visual::before{top:17%}
.c .hero-visual::after{top:35%;left:15%;right:3%}
.c .section{padding:80px clamp(20px,4vw,56px);border-top:1px solid var(--line)}
.c .headrow{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}
.c .productcards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.c .productcards .card{
  min-height:360px;border-color:var(--line);background:linear-gradient(180deg,rgba(12,44,65,.9),rgba(4,12,21,.95));
  position:relative;overflow:hidden
}
.c .productcards .card::after{
  content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-50px;top:70px;
  border:1px solid currentColor;box-shadow:0 0 50px currentColor;opacity:.18
}
.c .productcards .card:nth-child(1){color:#76f2e9}
.c .productcards .card:nth-child(2){color:#75bfff}
.c .productcards .card:nth-child(3){color:#a8ff95}
.c .productcards .card:nth-child(4){color:#f0ce94}
.c .productcards h3{font-size:24px;color:#fff}
.c .advantages{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.c .advantages .card{min-height:190px;background:rgba(7,20,33,.8);border-color:var(--line);text-align:center}
.c .advantages .icon{width:58px;height:58px;border:1px solid #8adfff;border-radius:18px;display:grid;place-items:center;margin:0 auto 20px}
.c .usecases{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.c .usecases .card{padding:0;background:#07111d;border-color:var(--line)}
.c .usecases .fake-img{min-height:250px;background:
  linear-gradient(155deg,#0e354c,#17314c 45%,#526a79);color:#8de6ff}
.c .usecases h3{padding:0 20px 20px}
.c .timeline{display:grid;grid-template-columns:repeat(6,1fr);position:relative}
.c .timeline::before{content:"";position:absolute;left:5%;right:5%;top:35px;height:1px;background:linear-gradient(90deg,transparent,#60dfff,transparent)}
.c .step{text-align:center;position:relative;padding:0 12px}
.c .step .hex{width:70px;height:70px;margin:auto;background:#07111d;border:1px solid #78dcff;clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%);display:grid;place-items:center}
.c .about{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:stretch}
.c .about-visual{
  background:
    radial-gradient(circle at 70% 35%,rgba(108,215,255,.26),transparent 22%),
    linear-gradient(140deg,#0c2236,#07111e 60%,#142e47);
  border:1px solid var(--line);min-height:390px;position:relative
}
.c .about-visual::after{content:"LIAN GUANG";position:absolute;right:30px;bottom:30px;font-size:54px;font-weight:900;opacity:.08}
.c .stats-c{display:grid;grid-template-columns:repeat(4,1fr);margin-top:24px}
.c .stat-c{padding:22px;border:1px solid var(--line);background:rgba(4,14,24,.55)}
.c .stat-c b{font-size:34px}
.c .cta{margin:0 clamp(20px,4vw,56px) 70px;padding:48px;border:1px solid #5acfff;background:
  linear-gradient(90deg,rgba(30,168,255,.12),rgba(0,255,208,.08),rgba(30,168,255,.12));
  text-align:center;box-shadow:0 0 45px rgba(36,171,255,.09) inset}
.c footer{padding:55px clamp(20px,4vw,56px);border-top:1px solid var(--line);background:#02060c}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .switcher{align-items:flex-start}
  .helper{display:none}
  .a .navlinks,.b .navlinks,.c .navlinks{display:none}
  .a .hero-main,.a .selector,.a .about,.c .hero,.c .about{grid-template-columns:1fr}
  .a .hero{min-height:auto}
  .a .collage{min-height:420px}
  .grid4,.b .products,.b .applications,.b .projects,.c .productcards,.c .usecases{grid-template-columns:repeat(2,1fr)}
  .a .product-stage,.a .product-stage:nth-child(even){grid-template-columns:1fr}
  .a .product-stage:nth-child(even) .copy{order:0}
  .a .product-stage .fake-img{min-height:300px}
  .footer-grid,.b .footer-grid{grid-template-columns:repeat(2,1fr)}
  .b .section{grid-template-columns:100px 1fr}
  .b .hero .body{grid-template-columns:1fr}
  .b .stats{grid-template-columns:1fr}
  .c .advantages{grid-template-columns:repeat(3,1fr)}
  .c .timeline{grid-template-columns:repeat(3,1fr);gap:30px}
  .c .timeline::before{display:none}
}
@media (max-width:640px){
  .switcher{position:relative;display:block}
  .switcher .tabs{margin-top:10px}
  .switcher button{padding:8px 10px;font-size:12px}
  .a .hero{padding:16px 16px 40px}
  .a .hero-main{gap:26px;padding-top:30px}
  .a .hero h1{font-size:54px}
  .a .collage{grid-template-rows:1fr .7fr;min-height:330px}
  .a .collage .fake-img:first-child{min-height:200px}
  .a .product-row{grid-template-columns:58px 1fr;min-height:110px}
  .a .product-row .n{font-size:34px;padding-left:14px}
  .a .product-row h3{font-size:20px}
  .a .product-row .texture{display:none}
  .a .product-stage .copy{padding:36px 18px}
  .a .selector,.a .cases,.a .about{padding:55px 16px}
  .grid4,.grid3,.grid2,.b .products,.b .applications,.b .projects,.b .process,.c .productcards,.c .advantages,.c .usecases,.c .stats-c{grid-template-columns:1fr}
  .a .cta{margin:0 16px;padding:36px 22px;display:block}
  .a footer{padding:45px 16px}
  .footer-grid,.b .footer-grid{grid-template-columns:1fr}
  .b .page{border:0}
  .b .nav{padding:16px}
  .b .section{display:block}
  .b .side{border-right:0;border-bottom:1px solid var(--line);padding:18px 16px}
  .b .side .num{font-size:38px}
  .b .body{padding:22px 16px;background-size:58px 58px}
  .b .hero h1{font-size:48px;margin-top:18px}
  .b .mosaic{min-height:330px}
  .b .contactbar{padding:35px 18px;display:block}
  .b footer{padding:40px 16px}
  .c .nav{padding:16px}
  .c .hero,.c .section{padding:55px 16px}
  .c .hero{min-height:auto}
  .c .hero h1{font-size:52px}
  .c .hero-visual{min-height:360px}
  .c .headrow{display:block}
  .c .timeline{grid-template-columns:1fr 1fr}
  .c .stats-c{grid-template-columns:1fr 1fr}
  .c .cta{margin:0 16px 45px;padding:35px 18px}
  .c footer{padding:45px 16px}
}


.preview-switcher .tabs a {
  border: 1px solid rgba(255,255,255,.2);
  padding: 9px 14px;
  color: #fff;
  transition: .25s;
}
.preview-switcher .tabs a.active,
.preview-switcher .tabs a:hover { background: #fff; color: #111; }
.wire-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.wire-carousel {
  --carousel-duration: 6s;
  width: 100%;
  min-width: 0;
  min-height: 560px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #222;
}
.a .hero-main > div:first-child,
.b .hero .body > div:first-child,
.c .hero > div:first-child { min-width: 0; }
.wire-carousel:focus-visible {
  outline: 3px solid #1769aa;
  outline-offset: 3px;
}
.wire-slides,
.wire-slide { position: absolute; inset: 0; }
.wire-slide {
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}
.wire-slide.is-active { opacity: 1; pointer-events: auto; z-index: 2; }
.wire-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.025);
  transition: transform 6s linear;
}
.wire-slide.is-active img { transform: scale(1); }
.wire-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 35%,rgba(0,0,0,.1) 52%,rgba(0,0,0,.88));
}
.wire-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 78px;
  z-index: 2;
  padding: clamp(20px,3vw,42px);
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.42);
}
.wire-copy span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15em;
}
.wire-copy h2 {
  margin: 7px 0 5px;
  color: inherit;
  font-size: clamp(34px,4.4vw,68px);
  line-height: .95;
  letter-spacing: -.04em;
}
.wire-copy p { margin: 0; color: inherit; font-size: 14px; letter-spacing: .04em; }
.wire-controlbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  min-height: 74px;
  display: grid;
  grid-template-columns: 1fr auto;
  background: rgba(245,243,237,.96);
  color: #111;
  border-top: 1px solid rgba(255,255,255,.32);
}
.wire-tabs { display: grid; grid-template-columns: repeat(4,1fr); }
.wire-tab {
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  border: 0;
  border-right: 1px solid rgba(17,17,17,.16);
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.wire-tab span { font-size: 11px; opacity: .68; }
.wire-tab b { overflow: hidden; font-size: 12px; letter-spacing: .07em; text-overflow: ellipsis; }
.wire-tab:hover,
.wire-tab.is-active { background: #111; color: #fff; }
.wire-transport { padding: 10px; display: flex; align-items: center; gap: 6px; }
.wire-counter { margin: 0 8px 0 3px; font-size: 11px; white-space: nowrap; }
.wire-counter b { font-size: 16px; }
.wire-control {
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.wire-control:hover { background: #111; color: #fff; }
.wire-tab:focus-visible,
.wire-control:focus-visible { outline: 3px solid #1769aa; outline-offset: -3px; }
.wire-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
  background: rgba(17,17,17,.12);
}
.wire-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: #b7a17d;
  transform-origin: left;
  animation: wire-progress var(--carousel-duration) linear infinite;
}
.wire-carousel.is-paused .wire-progress span,
.wire-carousel.is-held .wire-progress span { animation-play-state: paused; }
@keyframes wire-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Concept A: warm editorial material brand */
@media (min-width: 981px) {
  .a .hero-main { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); }
  .a .hero-main > div:first-child { min-width: 0; position: relative; z-index: 3; }
  .b .hero .body { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
  .b .hero .body > div:first-child { min-width: 0; position: relative; z-index: 3; }
  .c .hero { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
  .c .hero > div:first-child { min-width: 0; position: relative; z-index: 3; }
}
.a .wire-carousel { min-height: 560px; background: #2b302e; }
.a .wire-copy span { color: #e8d2a6; }
.a .wire-slide img { filter: saturate(.72) contrast(1.02); }

/* Concept B: strict catalogue grid */
.b .wire-carousel { min-height: 580px; border: 1px solid #111; background: #ddd; }
.b .wire-shade { background: linear-gradient(180deg,transparent 42%,rgba(0,0,0,.04) 54%,rgba(0,0,0,.84)); }
.b .wire-copy { padding-left: 26px; border-left: 5px solid #ff6b18; }
.b .wire-copy span { color: #ff9a61; }
.b .wire-controlbar { background: #fff; border-top-color: #111; }
.b .wire-tab.is-active { background: #ff6b18; color: #111; }
.b .wire-control:hover { background: #ff6b18; color: #111; }
.b .wire-progress span { background: #ff6b18; }

/* Concept C: controlled future chemistry */
.c .wire-carousel {
  min-height: 520px;
  border: 1px solid rgba(91,214,255,.42);
  background: #06101d;
  box-shadow: 0 0 42px rgba(36,171,255,.08);
}
.c .wire-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg,rgba(91,214,255,.08) 1px,transparent 1px),
              linear-gradient(rgba(91,214,255,.06) 1px,transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg,#000,transparent 68%);
}
.c .wire-slide img { filter: saturate(.76) contrast(1.08) hue-rotate(5deg); }
.c .wire-shade {
  background: radial-gradient(circle at 70% 25%,rgba(91,214,255,.12),transparent 35%),
              linear-gradient(180deg,rgba(3,10,18,.08) 25%,rgba(3,10,18,.93));
}
.c .wire-copy { z-index: 4; }
.c .wire-copy span { color: #79dcff; text-shadow: 0 0 16px rgba(91,214,255,.7); }
.c .wire-controlbar {
  z-index: 5;
  color: #dff7ff;
  background: rgba(3,10,18,.94);
  border-top-color: rgba(91,214,255,.38);
}
.c .wire-tab { border-right-color: rgba(91,214,255,.2); }
.c .wire-tab:hover,
.c .wire-tab.is-active { color: #041019; background: #5bd6ff; }
.c .wire-control:hover { color: #041019; background: #5bd6ff; }
.c .wire-progress { z-index: 6; background: rgba(91,214,255,.16); }
.c .wire-progress span { background: #5bd6ff; box-shadow: 0 0 12px #5bd6ff; }
.c .wire-tab:focus-visible,
.c .wire-control:focus-visible,
.c .wire-carousel:focus-visible { outline-color: #9aeeff; }

@media (max-width: 760px) {
  .preview-switcher .tabs a { padding: 8px 10px; font-size: 12px; }
  .wire-carousel,
  .a .wire-carousel,
  .b .wire-carousel,
  .c .wire-carousel { min-height: 465px; }
  .wire-copy { bottom: 124px; padding: 18px; }
  .wire-copy h2 { font-size: clamp(31px,9vw,42px); }
  .wire-copy p { font-size: 13px; }
  .wire-controlbar { min-height: 121px; grid-template-columns: 1fr; }
  .wire-tabs { grid-row: 2; }
  .wire-tab {
    min-height: 59px;
    padding: 7px 4px;
    display: block;
    text-align: center;
  }
  .wire-tab span,
  .wire-tab b { display: block; }
  .wire-transport {
    min-height: 61px;
    justify-content: flex-end;
    border-bottom: 1px solid rgba(17,17,17,.14);
  }
  .wire-counter { margin-right: auto; }
  .wire-control { width: 40px; height: 40px; }
  .c .wire-transport { border-bottom-color: rgba(91,214,255,.2); }
}
@media (max-width: 420px) {
  .a .hero h1 { font-size: clamp(40px,12vw,47px); }
  .c .hero h1 { font-size: clamp(40px,12vw,47px); }
  .wire-copy h2 { font-size: 30px; }
  .wire-tab b { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .wire-slide,
  .wire-slide img { transition-duration: .01ms !important; }
  .wire-progress { display: none; }
  .wire-slide img { transform: none; }
}


/* Production navigation and shared contact section */
.concept .nav { position: relative; }
.concept .navlinks a { color: inherit; }
.concept .navlinks a:hover { text-decoration: underline; text-underline-offset: 5px; }
.production-logo { display: inline-flex; align-items: center; color: inherit; }
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.nav-actions { display: flex; align-items: center; gap: 14px; }
.production-contact {
  padding: clamp(55px,7vw,92px) clamp(18px,4vw,60px);
  display: grid;
  grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
  gap: clamp(34px,6vw,84px);
  border-top: 1px solid var(--line);
}
.production-contact h2 {
  margin: 8px 0 22px;
  font-size: clamp(38px,5vw,72px);
  line-height: .95;
  letter-spacing: -.04em;
}
.production-contact .contact-lead { max-width: 620px; line-height: 1.8; }
.contact-details { margin: 30px 0 0; padding: 0; list-style: none; }
.contact-details li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.contact-details span { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .12em; opacity: .68; }
.contact-details a,
.contact-details strong { color: inherit; font-size: 15px; overflow-wrap: anywhere; }
.contact-form {
  padding: clamp(22px,3vw,38px);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.54);
}
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
}
.form-field textarea { min-height: 120px; resize: vertical; }
.contact-submit {
  width: 100%;
  min-height: 54px;
  border: 1px solid currentColor;
  border-radius: 0;
  background: #111;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.contact-submit:hover { opacity: .82; }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible,
.contact-submit:focus-visible,
.menu-toggle:focus-visible { outline: 3px solid #1769aa; outline-offset: 3px; }
.b .production-contact { border-bottom: 1px solid var(--line); background: #fff; }
.b .contact-form { background: #fafafa; }
.b .contact-submit { background: var(--orange); color: #111; }
.c .production-contact { background: rgba(3,10,18,.7); }
.c .contact-form { background: rgba(8,30,47,.72); }
.c .contact-submit { background: #5bd6ff; color: #041019; }
.c .form-field select option { color: #111; }
.c .form-field input:focus-visible,
.c .form-field select:focus-visible,
.c .form-field textarea:focus-visible,
.c .contact-submit:focus-visible,
.c .menu-toggle:focus-visible { outline-color: #9aeeff; }

@media (max-width: 980px) {
  .menu-toggle { display: inline-grid; }
  .concept .navlinks.is-open {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    z-index: 30;
    display: flex !important;
    padding: 18px;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--line);
    background: #f2f0eb;
    color: #111;
    box-shadow: 0 18px 35px rgba(0,0,0,.12);
  }
  .b .navlinks.is-open { background: #fff; }
  .c .navlinks.is-open { background: #07121e; color: #f4fbff; }
  .production-contact { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .production-contact { padding-left: 16px; padding-right: 16px; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .contact-form { padding: 20px 16px; }
}


/* 2026-09-04 approved integration: complete 3:1 banners, non-overlapping copy, and project imagery. */
:root {
  --banner-caption-height: 118px;
  --banner-controls-height: 74px;
}



/* Carousel: image, copy, and controls are three non-overlapping regions. */
.wire-carousel,
.a .wire-carousel,
.b .wire-carousel,
.c .wire-carousel {
  min-height: 620px;
}

.wire-slides {
  bottom: var(--banner-controls-height);
}

.wire-slide {
  bottom: 0;
}

.wire-slide {
  background: #151918;
}

.wire-slide img {
  position: absolute;
  inset: 0 0 var(--banner-caption-height);
  width: 100%;
  height: calc(100% - var(--banner-caption-height));
  object-fit: cover;
  object-position: center;
  transform: none !important;
  transition: none !important;
}

.wire-slide.is-active img {
  transform: none !important;
}

.wire-shade {
  display: none;
}

.wire-copy,
.b .wire-copy,
.c .wire-copy {
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--banner-caption-height);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px clamp(20px,3vw,34px);
  border-top: 1px solid rgba(255,255,255,.18);
  background: #202522;
  color: #fff;
  text-shadow: none;
}

.wire-copy span {
  color: #d8c49d;
}

.wire-copy h2 {
  margin: 5px 0 4px;
  font-size: clamp(30px,3.3vw,48px);
  line-height: 1;
}

.wire-copy p {
  font-size: 13px;
}

.b .wire-copy {
  padding-left: 25px;
  border-top-color: #111;
  border-left: 6px solid #ff6b18;
  background: #fff;
  color: #111;
}

.b .wire-copy span {
  color: #c84b00;
}

.c .wire-copy {
  border-top-color: rgba(91,214,255,.42);
  background: #071726;
  color: #effbff;
}

.c .wire-copy span {
  color: #79dcff;
  text-shadow: none;
}

.c .wire-carousel::after {
  bottom: calc(var(--banner-caption-height) + var(--banner-controls-height));
  mask-image: linear-gradient(180deg,#000,transparent 88%);
}

/* Replace decorative wireframe placeholders with existing project imagery. */
.fake-img,
.about-visual {
  overflow: hidden;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

.fake-img::before,
.fake-img::after,
.about-visual::before,
.about-visual::after {
  display: none !important;
}

.a .product-row:nth-child(1) .fake-img,
.b .products .card:nth-child(1) .fake-img,
.c .productcards .card:nth-child(1) .fake-img {
  background-image: url('/images/banners/pu-02-floor.png') !important;
}

.a .product-row:nth-child(2) .fake-img,
.b .products .card:nth-child(2) .fake-img,
.c .productcards .card:nth-child(2) .fake-img {
  background-image: url('/images/banners/epoxy-02-logistics.png') !important;
}

.a .product-row:nth-child(3) .fake-img,
.b .products .card:nth-child(3) .fake-img,
.c .productcards .card:nth-child(3) .fake-img {
  background-image: url('/images/banners/waterbased-02-steel.png') !important;
}

.a .product-row:nth-child(4) .fake-img,
.b .products .card:nth-child(4) .fake-img,
.c .productcards .card:nth-child(4) .fake-img {
  background-image: url('/images/banners/putty-02-precast.png') !important;
}

.a .product-stage:nth-of-type(2) .fake-img { background-image: url('/images/banners/pu-01-roof.png') !important; }
.a .product-stage:nth-of-type(3) .fake-img { background-image: url('/images/banners/epoxy-01-manufacturing.png') !important; }
.a .product-stage:nth-of-type(4) .fake-img { background-image: url('/images/banners/waterbased-01-facade.png') !important; }
.a .product-stage:nth-of-type(5) .fake-img { background-image: url('/images/banners/putty-01-civil.png') !important; }

.a .cases .card:nth-child(1) .fake-img,
.b .applications .card:nth-child(1) .fake-img,
.c .usecases .card:nth-child(1) .fake-img { background-image: url('/images/b01.jpg') !important; }
.a .cases .card:nth-child(2) .fake-img,
.b .applications .card:nth-child(2) .fake-img,
.c .usecases .card:nth-child(2) .fake-img { background-image: url('/images/b02.jpg') !important; }
.a .cases .card:nth-child(3) .fake-img,
.b .applications .card:nth-child(3) .fake-img,
.c .usecases .card:nth-child(3) .fake-img { background-image: url('/images/b03.jpg') !important; }
.a .cases .card:nth-child(4) .fake-img,
.b .applications .card:nth-child(4) .fake-img,
.c .usecases .card:nth-child(4) .fake-img { background-image: url('/images/b04.jpg') !important; }

.b .projects .card:nth-child(1) .fake-img { background-image: url('/images/w01.jpg') !important; }
.b .projects .card:nth-child(2) .fake-img { background-image: url('/images/w02.jpg') !important; }
.b .projects .card:nth-child(3) .fake-img { background-image: url('/images/w03.jpg') !important; }
.b .projects .card:nth-child(4) .fake-img { background-image: url('/images/w04.jpg') !important; }
.b .stats > .fake-img { background-image: url('/images/4.jpg') !important; }
.c .about-visual { background-image: url('/images/hero-building.png') !important; }

/* Small layout polish without changing the content hierarchy. */
.card .fake-img {
  min-height: 190px;
}

.a .product-row .fake-img {
  min-height: 124px;
}

.b .products .card,
.b .applications .card,
.b .projects .card,
.c .productcards .card,
.c .usecases .card {
  min-width: 0;
}

@media (min-width: 981px) {
  .a .hero h1 {
    font-size: clamp(56px,5.8vw,86px);
  }

  .b .hero h1 {
    font-size: clamp(46px,4.65vw,70px);
  }

  .c .hero h1 {
    font-size: clamp(52px,5vw,74px);
  }
}

@media (max-width: 760px) {
  :root {
    --banner-caption-height: 112px;
    --banner-controls-height: 121px;
  }

  .wire-carousel,
  .a .wire-carousel,
  .b .wire-carousel,
  .c .wire-carousel {
    min-height: 520px;
  }

  .wire-copy,
  .b .wire-copy,
  .c .wire-copy {
    bottom: 0;
    height: var(--banner-caption-height);
    padding: 14px 17px;
  }

  .wire-copy h2 {
    margin: 4px 0;
    font-size: clamp(28px,8.2vw,34px);
  }

  .wire-copy p {
    font-size: 12px;
  }

  .wire-slide img {
    object-position: center;
  }

  .a .hero h1,
  .b .hero h1,
  .c .hero h1 {
    overflow-wrap: anywhere;
  }

}

@media (max-width: 390px) {
  .a .hero h1,
  .b .hero h1,
  .c .hero h1 {
    font-size: clamp(38px,11.5vw,46px);
  }
}



:root {
  --banner-caption-height: 112px;
  --banner-controls-height: 74px;
}

.wire-carousel,
.a .wire-carousel,
.b .wire-carousel,
.c .wire-carousel {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
}

.wire-slides {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  width: 100%;
  height: clamp(300px,34vw,430px);
  height: calc(33.333cqi + var(--banner-caption-height));
}

.wire-slide {
  inset: 0;
  bottom: 0;
}

.wire-slide img {
  inset: 0 0 auto;
  width: 100%;
  height: calc(100% - var(--banner-caption-height));
  object-fit: contain;
  object-position: center;
  background: #151918;
}

.wire-copy,
.b .wire-copy,
.c .wire-copy {
  height: var(--banner-caption-height);
}

.wire-controlbar,
.b .wire-controlbar,
.c .wire-controlbar {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  width: 100%;
  min-height: var(--banner-controls-height);
}

.wire-progress {
  bottom: 0;
}

.b .wire-carousel {
  align-self: start;
}

.b .hero .body {
  min-height: 0;
}

.c .wire-carousel::after {
  bottom: calc(var(--banner-caption-height) + var(--banner-controls-height));
}

@media (min-width: 981px) {
  .a .hero-main {
    grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  }

  .a .hero h1,
  .b .hero h1,
  .c .hero h1 {
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: 1.02;
  }

  .a .hero h1 { font-size: clamp(58px,5.4vw,82px); }
  .b .hero h1 { font-size: clamp(56px,4.8vw,70px); }
  .c .hero h1 { font-size: clamp(56px,5vw,74px); }
}

@media (max-width: 760px) {
  :root {
    --banner-caption-height: 104px;
    --banner-controls-height: 121px;
  }

  .wire-carousel,
  .a .wire-carousel,
  .b .wire-carousel,
  .c .wire-carousel {
    min-height: 0;
  }

  .wire-slides {
    height: clamp(205px,62vw,235px);
    height: calc(33.333cqi + var(--banner-caption-height));
  }

  .wire-copy,
  .b .wire-copy,
  .c .wire-copy {
    height: var(--banner-caption-height);
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .wire-copy h2 {
    font-size: clamp(27px,7.7vw,32px);
  }

  .a .hero h1,
  .b .hero h1,
  .c .hero h1 {
    font-family: "Noto Sans TC", sans-serif;
    font-size: clamp(39px,11.5vw,47px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.045em;
    overflow-wrap: normal;
  }

  .wire-tab b {
    font-size: 11px;
    letter-spacing: 0;
  }
}