/* ===================================================
   HOME PAGE SPECIFIC STYLES
   =================================================== */

/* ── Hero ── */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(44,44,44,0.55) 0%, rgba(154,111,82,0.4) 60%, rgba(212,165,116,0.3) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23b5896a' stop-opacity='0.3'/%3E%3Cstop offset='100%25' stop-color='%232c2c2c' stop-opacity='0.8'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='400' height='400' fill='url(%23g)'/%3E%3C/svg%3E") center/cover;
  background-color: var(--primary-dk);
}
.hero__content {
  position: relative;
  z-index: 2;
  color: var(--white);
  padding-top: 80px;
  max-width: 700px;
}
.hero__sub {
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 14px;
}
.hero__title {
  font-family: var(--font-head);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 20px;
}
.hero__title em { color: var(--accent); font-style: italic; }
.hero__desc {
  font-size: clamp(1rem, 2vw, 1.2rem);
  opacity: 0.9;
  line-height: 1.7;
  margin-bottom: 36px;
}
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
.hero__badges { display: flex; gap: 16px; flex-wrap: wrap; }
.badge {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 0.85rem;
  color: var(--white);
}
.badge span { color: var(--accent); }
.hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 2;
}
.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
  animation: scrollLine 1.5s ease-in-out infinite;
}
@keyframes scrollLine {
  0%,100% { opacity: 1; transform: scaleY(1); }
  50% { opacity: 0.4; transform: scaleY(0.6); }
}