:root {
  --wood-178:#dfc295;
  --panel:rgba(236,210,168,.9);
  --line:rgba(122,87,51,.3);
  --text:#000;
  --accent:#5faab0;
  --accent-soft:#9fd2d6;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  font-family:"Noto Sans TC",sans-serif;
  color:var(--text);
  background:radial-gradient(circle at 15% 16%,rgba(255,246,231,.45),transparent 35%),radial-gradient(circle at 82% 76%,rgba(95,170,176,.22),transparent 42%),linear-gradient(135deg,#e4c99f,var(--wood-178) 50%,#c9a06f 100%);
  min-height:100vh;
}

.wrap {
  width:min(1120px,92vw);
  margin:0 auto;
  padding:28px 0 44px;
}

.topbar {
  margin-bottom:24px;
}

.logo {
  margin:0;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(1.5rem,3vw,2.2rem);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.panel {
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
}

.hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:16px;
}

.copy {
  padding:24px;
}

.eyebrow {
  font-family:"Barlow Condensed",sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}

h1 {
  margin:0;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(2.2rem,5vw,4rem);
  line-height:.95;
}

.sub {
  margin-top:14px;
  line-height:1.7;
}

.cta {
  margin-top:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn {
  text-decoration:none;
  color:#000;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 16px;
  font-weight:700;
  background:rgba(248,230,198,.72);
}

.btn.main {
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
}

.machine {
  min-height:320px;
  display:grid;
  place-items:center;
  padding:16px;
}

.net {
  width:min(370px,92%);
  height:250px;
  border-radius:14px;
  border:2px solid rgba(0,0,0,.35);
  background:#26353a;
  position:relative;
}

.node {
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#d8f5f7;
}

.line {
  position:absolute;
  height:2px;
  background:#9fd2d6;
  transform-origin:left center;
}

.n1 {
  left:16%;
  top:24%;
}

.n2 {
  left:68%;
  top:18%;
}

.n3 {
  left:56%;
  top:62%;
}

.n4 {
  left:24%;
  top:70%;
}

.l1 {
  left:18%;
  top:27%;
  width:50%;
  transform:rotate(-8deg);
}

.l2 {
  left:30%;
  top:70%;
  width:30%;
  transform:rotate(-20deg);
}

.l3 {
  left:26%;
  top:30%;
  width:36%;
  transform:rotate(39deg);
}

.l4 {
  left:58%;
  top:25%;
  width:10%;
  transform:rotate(90deg);
}

.sections {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:14px;
}

.card {
  padding:16px;
}

.card h2 {
  margin:0 0 8px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:1.08rem;
  text-transform:uppercase;
}

.card p {
  margin:0;
  line-height:1.65;
}

.portfolio {
  margin-top:14px;
  padding:16px;
}

.portfolio h2 {
  margin:0 0 10px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:1.2rem;
  text-transform:uppercase;
}

.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.portfolio-item {
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:rgba(248,230,198,.42);
}

.portfolio-item h3 {
  margin:0 0 6px;
  font-family:"Barlow Condensed",sans-serif;
}

.portfolio-item p {
  margin:0;
  line-height:1.55;
  font-size:.9rem;
}

@media (max-width:960px) {
  .hero {
    grid-template-columns:1fr;
  }

  .sections,.portfolio-grid {
    grid-template-columns:1fr 1fr;
  }

}

@media (max-width:640px) {
  .wrap {
    width:min(94vw,1120px);
  }

  .sections,.portfolio-grid {
    grid-template-columns:1fr;
  }

  .cta .btn {
    width:100%;
    text-align:center;
  }

}