:root {
  --yamu-yellow: #f9c20d;
  --yamu-yellow-dark: #e0ac00;
  --yamu-black: #111111;
  --yamu-white: #ffffff;
  --yamu-gray: #f6f6f6;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--yamu-black);
  background-color: var(--yamu-white);
  padding-top: 76px;
}

.yamu-navbar .nav-link {
  font-weight: 500;
}

.yamu-navbar .nav-link:hover,
.yamu-navbar .nav-link:focus {
  color: var(--yamu-yellow-dark);
}

.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--yamu-yellow);
  display: inline-block;
}

.hero-section {
  min-height: 82vh;
  background:
    linear-gradient(rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.62)),
    radial-gradient(circle at 20% 20%, #2c2c2c 0%, #111111 60%);
}

.full-version-note {
  background: var(--yamu-yellow);
}

.section-padding {
  padding: 80px 0;
}

.section-title-wrap {
  max-width: 720px;
  margin-bottom: 2rem;
}

.section-title {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.section-subtitle {
  color: #555;
  margin-bottom: 0;
}

.service-card {
  border-top: 4px solid var(--yamu-yellow);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-4px);
}

.gallery-img {
  width: 100%;
  border-radius: 10px;
  border: 2px solid #efefef;
  background: white;
}

.about-box {
  background: #fff;
  border-left: 6px solid var(--yamu-yellow);
  border-radius: 10px;
  padding: 1.25rem;
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08);
}

.about-box ul {
  margin-top: 0.75rem;
}

.about-box li + li {
  margin-top: 0.5rem;
}

.site-footer {
  background: var(--yamu-black);
  color: var(--yamu-white);
}

.btn-warning {
  background-color: var(--yamu-yellow);
  border-color: var(--yamu-yellow);
  color: #1a1a1a;
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--yamu-yellow-dark);
  border-color: var(--yamu-yellow-dark);
  color: #111;
}

@media (max-width: 991px) {
  .hero-section {
    min-height: 70vh;
  }

  .section-padding {
    padding: 60px 0;
  }
}