.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 110px 24px 72px; } .vignette { position: absolute; inset: 0; background: radial-gradient( ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 75%, rgba(0, 0, 0, 0.95) 100% ), linear-gradient( 180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.4) 100% ); } .content { position: relative; z-index: 2; text-align: center; max-width: 1200px; margin: 0 auto; width: 100%; } .chip { display: inline-block; padding: 7px 13px; font-size: 12px; letter-spacing: 0.96px; color: var(--gold-soft); border: 1px solid var(--gold-soft); text-transform: uppercase; margin-bottom: 22px; } .title { font-size: clamp(44px, 9vw, 124px); font-weight: 900; line-height: 0.94; letter-spacing: -0.02em; margin: 0; text-transform: uppercase; display: flex; justify-content: center; gap: 0.05em; flex-wrap: wrap; } .word { display: inline-block; opacity: 0; transform: translateY(40px); animation: slideIn 900ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } .word:nth-child(2) { animation-delay: 120ms; } .accent { color: var(--gold); } @keyframes slideIn { to { opacity: 1; transform: translateY(0); } } .lede { max-width: 720px; margin: 24px auto 32px; font-size: clamp(13px, 1.2vw, 16px); letter-spacing: 0.12px; color: var(--mist); text-transform: uppercase; line-height: 1.6; } .cta { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; } .ctaSecondary { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; } @media (max-width: 760px) { .hero { padding: 96px 18px 56px; min-height: 0; } .title { flex-direction: column; font-size: clamp(40px, 14vw, 72px); } .lede { margin: 20px auto 24px; } .chip { font-size: 10px; padding: 6px 10px; margin-bottom: 18px; } }