:root { color-scheme: dark; --navy: #06283f; --cream: #fffaf0; --gold: #f3c46f; --coral: #ff735a; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--navy); color: white; font-family: "DM Sans", sans-serif; }
.hero { position: relative; display: grid; min-height: 100svh; overflow: hidden; isolation: isolate; background: url("../images/ECLIPSEDAY.jpg") center / cover no-repeat; }
.hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(2,26,43,.9) 0%, rgba(2,28,47,.63) 45%, rgba(2,24,38,.18) 78%), linear-gradient(0deg, rgba(2,20,33,.58) 0%, transparent 48%); }
.hero__content { width: min(1180px, calc(100% - 48px)); margin: auto; padding: 64px 0 86px; }
.hero__eyebrow { margin: 0 0 20px; color: var(--gold); font-size: .78rem; font-weight: 600; letter-spacing: .42em; }
h1 { max-width: 700px; margin: 0; font-family: "Playfair Display", serif; font-size: clamp(3rem, 7vw, 6.8rem); font-weight: 600; line-height: .9; letter-spacing: -.05em; text-wrap: balance; }
.hero__intro { max-width: 560px; margin: 28px 0 38px; color: rgba(255,255,255,.82); font-size: clamp(1rem,1.4vw,1.2rem); line-height: 1.55; }
.qr-list { display: flex; flex-wrap: wrap; gap: 16px; }
.qr-card { display: grid; grid-template-columns: 126px minmax(130px,1fr); align-items: center; width: min(340px,100%); padding: 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 22px; background: rgba(255,255,255,.13); box-shadow: 0 22px 55px rgba(0,15,27,.28); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.qr-card__image { padding: 9px; border-radius: 15px; background: var(--cream); line-height: 0; }
.qr-card__image img { width: 100%; height: auto; border-radius: 5px; }
.qr-card__copy { padding: 4px 15px; }
.qr-card__number { color: var(--coral); font-size: .72rem; font-weight: 600; letter-spacing: .18em; }
.qr-card h2 { margin: 8px 0 4px; font-family: "Playfair Display", serif; font-size: 1.4rem; font-weight: 600; }
.qr-card p { margin: 0; color: rgba(255,255,255,.68); font-size: .78rem; }
.hero__note { position: absolute; right: 28px; bottom: 24px; margin: 0; color: rgba(255,255,255,.72); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 700px) {
  .hero { background-position: 62% center; }
  .hero__shade { background: linear-gradient(0deg, rgba(2,22,37,.94) 0%, rgba(2,22,37,.54) 75%, rgba(2,22,37,.34) 100%); }
  .hero__content { width: min(100% - 28px,460px); margin: auto auto 44px; padding: 52px 0 48px; }
  h1 { font-size: clamp(3.1rem,16vw,5rem); }
  .hero__intro { margin: 22px 0 28px; }
  .qr-card { grid-template-columns: 104px 1fr; width: 100%; border-radius: 18px; }
  .hero__note { display: none; }
}
@media (max-width: 390px) { .qr-card { grid-template-columns: 92px 1fr; } .qr-card__copy { padding-right: 6px; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__content { animation: reveal .7s ease-out both; }
  .qr-card:nth-child(1) { animation: rise .65s .2s ease-out both; }
  .qr-card:nth-child(2) { animation: rise .65s .32s ease-out both; }
}
@keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }