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

* {
  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(154,105,176,.2),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;
}

.code {
  width:min(370px,92%);
  height:250px;
  border-radius:14px;
  border:2px solid rgba(0,0,0,.35);
  background:#1f2330;
  padding:14px;
  color:#d7e1ff;
  font-family:monospace;
  font-size:.9rem;
  line-height:1.55;
}

.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;
  }

}