:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #101a25; color: #f4f1eb; }
.hero {
  isolation: isolate; position: relative; display: flex; flex-direction: column;
  justify-content: center; min-height: 100vh; min-height: 100svh;
  background: #101a25 url("hero.png") center center / cover no-repeat;
  overflow: hidden;
}
.hero__shade { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(5,12,19,.87) 0%, rgba(6,14,22,.77) 33%, rgba(7,15,23,.37) 72%, rgba(6,14,22,.25) 100%),
              linear-gradient(0deg, rgba(5,12,19,.55), transparent 40%);
}
.content { width: min(100% - 64px, 1180px); margin: auto; padding: 88px 0 110px; }
.content > * { max-width: 700px; }
.eyebrow { display: flex; align-items: center; gap: 13px; color: #e9c497; text-transform: uppercase;
  font-size: 12px; font-weight: 600; letter-spacing: .23em; margin-bottom: 28px; }
.eyebrow__line { width: 34px; height: 2px; background: #d7a45e; flex: none; }
h1 { font-size: clamp(42px, 5.8vw, 83px); line-height: 1.06; letter-spacing: -.035em;
  margin: 0 0 30px; font-weight: 780; text-wrap: balance; text-shadow: 0 3px 25px rgba(0,0,0,.22); }
p { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; color: #e3e6e7; margin: 0 0 34px;
  max-width: 640px; text-shadow: 0 2px 9px rgba(0,0,0,.25); }
p strong { color: #fff; font-weight: 650; }
.links { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; gap: 28px; align-items: center; justify-content: space-between;
  min-width: 172px; padding: 15px 20px; border: 1px solid rgba(255,255,255,.55);
  border-radius: 6px; font-size: 15px; font-weight: 650; text-decoration: none;
  transition: background .2s, transform .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible { outline: 3px solid #f2bc77; outline-offset: 4px; }
.button--primary { background: #eee9dd; color: #12202c; border-color: #eee9dd; }
.button--primary:hover { background: #fff; }
.button--secondary { background: rgba(18,30,43,.35); color: #fff; }
.button--secondary:hover { background: rgba(255,255,255,.16); }
.footer { position: absolute; inset: auto 32px 24px; display: flex; justify-content: space-between;
  gap: 20px; color: rgba(235,237,238,.75); font-size: 11px; letter-spacing: .13em; }
.footer span:first-child { font-weight: 700; letter-spacing: .24em; }
@media (max-width: 700px) {
  .hero { background-position: 60% center; }
  .hero__shade { background: linear-gradient(90deg, rgba(5,12,19,.88),rgba(5,12,19,.68)),linear-gradient(0deg,rgba(5,12,19,.6),transparent 60%); }
  .content { width: min(100% - 36px, 520px); padding: 86px 0 100px; }
  .eyebrow { font-size: 10px; letter-spacing: .15em; }
  h1 { font-size: clamp(35px, 10vw, 54px); margin-bottom: 24px; }
  p { font-size: 15px; line-height: 1.65; }
  .button { min-width: 0; flex: 1 1 140px; gap: 8px; }
  .footer { left: 18px; right: 18px; bottom: 14px; font-size: 9px; }
  .footer span:last-child { max-width: 190px; text-align: right; }
}
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }