.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 8vw, 6rem); }
.hero__grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(12, 1fr); align-items: stretch; }
.hero__main { grid-column: span 12; }
.hero__side { grid-column: span 12; position: relative; }
@media (min-width: 900px) {
    .hero__main { grid-column: span 7; }
    .hero__side { grid-column: span 5; }
    .hero__media { aspect-ratio: 3/4; }
}
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--radius-full); padding: .35rem 1rem; margin-block-end: 1.25rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85);
    backdrop-filter: blur(var(--blur-sm));
}
.hero__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-brand-400); animation: heroPulse 2s infinite; }
.hero__title { font-size: var(--display); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; color: #fff; margin: 0 0 1rem; text-wrap: balance; }
[dir="rtl"] .hero__title { letter-spacing: 0; }
.hero__desc { color: rgba(237,233,254,.85); font-size: 1.05rem; line-height: 1.7; max-width: 34rem; margin: 0 0 1.75rem; }
.hero__omni-hint { color: rgba(255,255,255,.55); font-size: .78rem; margin-block-start: .75rem; }
.hero__omni-hint kbd { background: rgba(255,255,255,.14); border-radius: 5px; padding: 1px 6px; font-size: .72rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1.5rem; }
.hero__media { position: relative; border-radius: var(--radius-xl); overflow: clip; aspect-ratio: 4/3; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__stats {
    display: grid; grid-template-columns: 1fr; gap: .6rem; padding: .85rem .95rem;
    position: absolute; left: 1rem; right: auto; top: 50%; transform: translateY(-50%);
    width: min(46%, 190px); z-index: 2;
    background: rgba(30, 12, 55, .5); backdrop-filter: blur(var(--blur-md, 16px));
    border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg, 14px);
}
@keyframes heroPulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }