* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Arial, Helvetica, sans-serif;
  background: #090909;
  color: #fff;
}
.home {
  min-height: 100vh;
  background: radial-gradient(circle at 50% 35%, #2a220f 0%, #0b0b0b 55%, #050505 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-inner {
  width: min(100%, 900px);
  min-height: 100vh;
  padding: 34px 22px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}
.head-title { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.logo-box img { width: 150px; max-width: 45vw; height: auto; display: block; }
.white-box {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid #c9a44b;
  background: #fff;
  color: #111;
}
.white-box h2 { margin: 0; font-size: clamp(18px, 4vw, 34px); letter-spacing: 1px; }
.top-content-bx h1 {
  margin: 16px 0 8px;
  font-size: clamp(30px, 7vw, 62px);
  letter-spacing: .5px;
}
.line-text { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; color: #d7b65d; }
.line { width: 70px; height: 1px; background: #d7b65d; display: inline-block; }
.center-part { display: flex; justify-content: center; }
.middle-text-box {
  border: 1px solid #d7b65d;
  padding: 12px 22px;
  background: rgba(255,255,255,.04);
}
.middle-text-box h3 { margin: 0; font-size: clamp(18px, 4vw, 30px); }
.btm-part { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.btm-content-bx img { max-width: min(330px, 75vw); width: 100%; height: auto; display: block; }
.zoom-in { display: inline-block; transition: transform .2s ease; }
.zoom-in:hover { transform: scale(1.04); }
.boxes { display: flex; gap: 14px; width: min(700px, 100%); justify-content: center; }
.box {
  flex: 1;
  padding: 15px 10px;
  border-radius: 8px;
  color: #111;
  font-weight: 700;
  background: linear-gradient(135deg, #8f6a21, #f2d37c, #9b7527);
}
.btm-img img { width: min(800px, 100%); height: auto; display: block; }
@media (max-width: 600px) {
  .home-inner { padding: 24px 14px 0; }
  .boxes { flex-direction: column; }
  .box { width: 100%; }
}