.hero { position: relative; min-height: 100svh; max-height: 760px; display: flex; align-items: center; overflow: hidden; background: #0d0c0c; }
.hero__media { position: absolute; inset: -8% 0; will-change: transform; }
.hero__media img { position: absolute; right: 0; top: 56px; width: auto; height: calc(100% - 56px); max-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%); mask-image: linear-gradient(90deg, transparent, #000 28%); }
.hero__glow { position: absolute; inset: 0; background: radial-gradient(500px circle at 78% 40%, rgba(214,150,80,.22), transparent 70%), radial-gradient(300px circle at 65% 15%, rgba(255,190,110,.12), transparent 70%); animation: glow 7s ease-in-out infinite alternate; }
@keyframes glow { to { opacity: .55; transform: scale(1.06); } }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, #101113 8%, rgba(16,17,19,.82) 38%, rgba(16,17,19,.15) 75%), linear-gradient(0deg, #101113 0%, transparent 25%); }
.hero__content { position: relative; z-index: 2; padding-top: 70px; }
.hero__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.5rem, 6vw, 4.1rem); line-height: 1.07; letter-spacing: -.015em; margin-bottom: 22px; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero__title .line > span { display: block; transform: translateY(110%); animation: rise 1.2s var(--ease) forwards; }
.hero__title .line:nth-child(1) > span { animation-delay: .3s; }
.hero__title .line:nth-child(2) > span { animation-delay: .46s; }
@keyframes rise { to { transform: none; } }
.hero__text { font-size: 1.05rem; max-width: 460px; margin-bottom: 30px; color: rgba(240,233,220,.88); }
.hero__tags { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 0.78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.hero__tags li { display: flex; align-items: center; gap: 8px; }
.hero__tags .ico { color: var(--color-gold); }
.hero__tags .dot { width: 3px; height: 3px; background: var(--color-text-muted); border-radius: 50%; }
.scroll-hint { position: absolute; bottom: 22px; left: 50%; width: 1px; height: 46px; background: rgba(255,255,255,.15); z-index: 2; overflow: hidden; }
.scroll-hint span { display: block; width: 100%; height: 40%; background: var(--color-gold); animation: drip 2s var(--ease) infinite; }
@keyframes drip { from { transform: translateY(-100%); } to { transform: translateY(260%); } }