.hero { position: relative; padding: 78px 0 74px; background: var(--paper); border-bottom: 6px solid var(--wood); overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; width: 120px; height: 20px; background: var(--gold); border-block: 4px solid var(--wood); opacity: .35; }
.hero::before { left: -24px; top: 70px; }
.hero::after { right: -24px; bottom: 46px; }
.hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; max-width: none; }
  .hero-lead { margin-inline: auto; max-width: none; }
  .hero-actions { justify-content: center; }
  .scene-frame { display: none; }
}
.badge { display: inline-block; margin: 0 0 24px; padding: 10px 13px; color: var(--paper); background: var(--moss); border: 3px solid var(--dark); box-shadow: 4px 4px 0 var(--gold); font-family: var(--title); font-size: 9px; line-height: 1.5; }
.hero h1 { margin: 0; font-family: var(--title); font-size: clamp(30px, 4.2vw, 56px); line-height: 1.28; letter-spacing: -.025em; text-wrap: balance; }
.hero h1 span { color: var(--copper); text-shadow: 3px 3px 0 #e3bb79; }
.hero-lead { max-width: 660px; margin: 27px 0 30px; font-size: clamp(25px, 2.15vw, 31px); line-height: 1.25; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 18px; }
.microcopy { margin: 29px 0 0; font-family: var(--title); font-size: 10px; line-height: 1.9; color: var(--wood); }

.scene-frame { position: relative; border: 6px solid var(--dark); background: #8596a5; box-shadow: 10px 10px 0 var(--wood), 14px 14px 0 var(--gold); isolation: isolate; }
.scene-frame::before { content: ""; position: absolute; inset: 7px; z-index: 9; pointer-events: none; border: 3px solid rgba(255,243,212,.65); }
.scene { position: relative; overflow: hidden; aspect-ratio: 6 / 5; min-height: 420px; }
.scene-layer { position: absolute; inset: -2%; width: 104%; height: 104%; transition: transform 600ms ease-out; }
.scene-back { transform: translate(calc(var(--mx, 0) * -5px), calc(var(--my, 0) * -3px)); }
.scene-mid { transform: translate(calc(var(--mx, 0) * 9px), calc(var(--my, 0) * 5px)); }
.scene-front { transform: translate(calc(var(--mx, 0) * 15px), calc(var(--my, 0) * 8px)); }
.quest-ui { position: absolute; top: 24px; right: 22px; z-index: 12; width: 158px; color: var(--paper); background: var(--dark); border: 4px solid var(--gold); box-shadow: 5px 5px 0 rgba(30,18,12,.8); }
.quest-ui strong { display: block; padding: 9px; color: var(--dark); background: var(--gold); font-family: var(--title); font-size: 8px; }
.quest-ui ul { list-style: none; margin: 0; padding: 10px 11px; font-family: var(--title); font-size: 8px; line-height: 2; }
.quest-ui li::first-letter { color: #a8c66c; }
.lantern-glow { animation: flicker 1.1s steps(3) infinite; transform-origin: center; }
.flag { animation: flag 1.5s steps(3) infinite; transform-origin: 300px 91px; }
.smoke { animation: smoke 2.8s steps(5) infinite; }
.hero-idle { animation: idle 1.6s steps(2) infinite; transform-origin: 375px 345px; }
.spark { animation: sparkle 1.7s steps(4) infinite; }
.spark.s2 { animation-delay: -.7s; }

.tech-band { padding: 25px 18px 21px; color: var(--paper); background-color: var(--wood); background-image: linear-gradient(90deg, transparent 95%, rgba(35,19,12,.23) 95%); background-size: 42px 100%; border-block: 5px solid var(--dark); box-shadow: inset 0 4px 0 var(--gold), inset 0 -4px 0 var(--gold); text-align: center; }
.tech-band p { margin: 0; font-family: var(--title); font-size: clamp(9px, 1.35vw, 13px); line-height: 2; letter-spacing: .08em; }

@keyframes flicker { 0%, 100% { opacity: .75; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes flag { 0%, 100% { transform: skewY(0deg); } 50% { transform: skewY(5deg); } }
@keyframes smoke { 0% { transform: translateY(8px); opacity: 0; } 25%, 70% { opacity: .55; } 100% { transform: translate(6px, -22px); opacity: 0; } }
@keyframes idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes sparkle { 0%, 70%, 100% { opacity: 0; } 75%, 90% { opacity: 1; } }