.hero { position: relative; height: 88vh; min-height: 560px; overflow: hidden; display: block; padding: 0; }
#canvas3d { position: absolute; top: -30%; left: 0; width: 100%; height: calc(100% - 80px); z-index: 1; opacity: 0.35; filter: brightness(0.75) contrast(1.1); pointer-events: none; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14,11,9,0.0) 0%, rgba(14,11,9,0.3) 50%, rgba(14,11,9,1.0) 100%); z-index: 2; pointer-events: none; }

.hero-content { position: absolute; inset: 0;  top: 8em; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; pointer-events: none; }

.hero-content .eyebrow { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: #D4973A; margin-bottom: 20px; display: flex; align-items: center; gap: 16px; }
.hero-content .eyebrow::before, .hero-content .eyebrow::after { content: ''; display: block; width: 40px; height: 1px; background: #D4973A; opacity: 0.6; }

.logo-badge { display: inline-block; border: 1px solid rgba(212,151,58,0.5); padding: 10px 28px; margin-bottom: 28px; position: relative; background: rgba(26,17,10,0.5); }
.logo-badge::before, .logo-badge::after { content: ''; position: absolute; width: 6px; height: 6px; border: 1px solid #D4973A; }
.logo-badge::before { top: -4px; left: -4px; border-right: none; border-bottom: none; }
.logo-badge::after { bottom: -4px; right: -4px; border-left: none; border-top: none; }
.logo-badge-text { font-family: 'Prata', serif; font-size: 20px; color: #f0e8d8; letter-spacing: 0.12em; }
.logo-badge-sub { display: block; font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 0.3em; color: rgba(212,151,58,0.9); text-transform: uppercase; margin-top: 4px; }

.headline-line1 { font-family: 'Libre Baskerville', serif; font-size: clamp(52px, 8vw, 86px); font-weight: 700; color: #f0e8d8; line-height: 1; display: block; letter-spacing: -0.02em; text-shadow: 0 2px 30px rgba(0,0,0,0.8); }
.headline-line2 { font-family: 'Prata', serif; font-size: clamp(52px, 8vw, 86px); font-style: italic; color: #C8292A; line-height: 1.05; display: block; letter-spacing: -0.01em; margin-bottom: 20px; text-shadow: 0 2px 30px rgba(0,0,0,0.7); position: relative; }
.headline-line2::after { content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 60%; height: 2px; background: linear-gradient(90deg, transparent, #C8292A 30%, #C8292A 70%, transparent); }

.hero-content .subtext { font-family: 'Space Mono', monospace; font-size: 11px; line-height: 1.9; color: rgba(240,232,216,0.6); max-width: 400px; margin: 0 auto 44px; letter-spacing: 0.04em; }

.cta-group { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; pointer-events: all; }
.btn-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #15110e;
  border: 2px solid #3e3228;
  border-radius: 6px;
  padding: 16px 40px;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  color: #D4A96A;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: inset 0 0 0 2px #1c1713, 0 4px 15px rgba(0,0,0,0.6);
  font-weight: 700;
}
.btn-cta-primary::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(212, 169, 106, 0.35);
  border-radius: 3px;
  pointer-events: none;
  transition: border-color 0.2s ease;
}
.btn-cta-primary:hover {
  background: #1c1713;
  border-color: #D4A96A;
  color: #FAF3E4;
  box-shadow: inset 0 0 0 2px #261f1a, 0 6px 20px rgba(0,0,0,0.8);
}
.btn-cta-primary:hover::after {
  border-color: rgba(212, 169, 106, 0.75);
}
.btn-cta-primary:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 0 2px #15110e, 0 2px 8px rgba(0,0,0,0.4);
}

.btn-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #120e0b;
  border: 2px solid #2d241d;
  border-radius: 6px;
  padding: 16px 40px;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  color: rgba(212, 169, 106, 0.75);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: inset 0 0 0 2px #16120f, 0 4px 12px rgba(0,0,0,0.5);
  font-weight: 700;
}
.btn-cta-secondary::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(212, 169, 106, 0.18);
  border-radius: 3px;
  pointer-events: none;
  transition: border-color 0.2s ease;
}
.btn-cta-secondary:hover {
  background: #181310;
  border-color: rgba(212, 169, 106, 0.75);
  color: #FAF3E4;
  box-shadow: inset 0 0 0 2px #201a15, 0 6px 15px rgba(0,0,0,0.7);
}
.btn-cta-secondary:hover::after {
  border-color: rgba(212, 169, 106, 0.45);
}
.btn-cta-secondary:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 0 2px #120e0b, 0 2px 6px rgba(0,0,0,0.4);
}

.hero .scroll-hint { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hero .scroll-line { width: 1px; height: 32px; background: linear-gradient(to bottom, rgba(212,151,58,0.7), transparent); animation: scrollpulse 2s ease-in-out infinite; }
.hero .scroll-text { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(212,151,58,0.5); }
@keyframes scrollpulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

.hero-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #D4A96A;
  margin-bottom: 24px;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: all;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: #D4A96A;
  opacity: 0.5;
}