.promo-hero .container { min-height: 440px; padding-top: 74px; padding-bottom: 74px; }
.hero-copy { position: relative; padding-left: 28px; }
.hero-copy:before { content: ""; position: absolute; left: 0; top: 58px; width: 4px; height: 132px; border-radius: 999px; background: linear-gradient(180deg, var(--red), var(--gold)); }
.promo-tags { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.promo-tags span { padding: 10px 14px; border: 1px solid rgba(224,211,189,.78); border-radius: 999px; color: #6d766f; background: rgba(255,253,248,.74); font-weight: 800; transition: transform .22s ease, color .22s ease, background .22s ease; }
.promo-tags span:hover { color: #fff; background: var(--green); transform: translateY(-3px); }
.video-preview { min-height: 300px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: linear-gradient(180deg, rgba(31,63,55,.1), rgba(25,39,34,.86)), url("../images/ancestral-hall.png") center/cover; }
.video-preview:before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 34px 34px; opacity: .35; }
.video-preview h3, .video-preview p, .play-button { position: relative; z-index: 2; }
.video-preview p { color: rgba(255,255,255,.8); }
.play-button { width: 64px; height: 64px; margin-bottom: 46px; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 14px 34px rgba(0,0,0,.2); transition: transform .24s ease; }
.play-button:after { content: ""; position: absolute; left: 26px; top: 19px; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 20px solid var(--red); }
.video-preview:hover .play-button { transform: scale(1.08); }
.video-card { min-height: 180px; position: relative; overflow: hidden; }
.video-card:after { content: ""; position: absolute; left: -42%; top: 0; width: 36%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.54), transparent); transform: skewX(-18deg); transition: left .56s ease; }
.video-card:hover:after { left: 112%; }
.tilt-card { transform: perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--lift,0)); transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease; }
.tilt-card:hover { --lift: -6px; }
@media (max-width: 720px) { .hero-copy { padding-left: 0; } .hero-copy:before { display:none; } }