/* Homepage hero — split layout, brand-forward, no photography */
.hero { position: relative; overflow: hidden; background:
    radial-gradient(1200px 500px at 85% -10%, rgba(247,201,72,0.16), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--color-gray-50) 100%); }
.hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(3rem, 7vw, 6rem); }
.hero__eyebrow { margin-bottom: 1rem; }
.hero__title { font-size: var(--fs-h1); margin-bottom: 1.1rem; }
.hero__title-accent { color: var(--color-primary-hover); position: relative; }
.hero__subtitle { font-size: var(--fs-body-lg); color: var(--color-text-body); max-width: 40rem; margin-bottom: 1.75rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 1.75rem; }
.hero__benefits { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.25rem; max-width: 34rem; }
.hero__benefits li { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-body-sm); font-weight: 500; color: var(--color-black); }
.hero__benefit-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-black); flex: none; }
.hero__benefit-check svg { width: 14px; height: 14px; }

.hero__visual { display: flex; justify-content: center; }
.hero__panel { position: relative; width: min(100%, 560px); aspect-ratio: 4/3; overflow: hidden; border-radius: clamp(18px,3vw,30px); background: var(--color-charcoal); box-shadow: 0 28px 70px rgba(20,20,20,.2); }
.hero__panel::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,transparent 55%,rgba(17,17,17,.28)); }
.hero__panel picture { display: block; width: 100%; height: 100%; }
.hero__photo { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.hero__panel:hover .hero__photo { transform: scale(1.025); }
.hero__panel-badge { z-index: 1; position: absolute; left: 4%; bottom: 6%; display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: .7rem 1rem; box-shadow: var(--shadow-lg); }
.hero__panel-badge-num { font-family: var(--font-heading); font-weight: 700; font-size: 1.9rem; color: var(--color-black); line-height: 1; }
.hero__panel-badge-label { font-size: var(--fs-body-sm); color: var(--color-text-body); max-width: 9rem; line-height: 1.25; }

@media (max-width: 900px) {
    .hero__inner { grid-template-columns: 1fr; text-align: center; }
    .hero__eyebrow::before { display: none; }
    .hero__subtitle { margin-inline: auto; }
    .hero__actions { justify-content: center; }
    .hero__benefits { margin-inline: auto; justify-items: center; }
    .hero__visual { order: -1; }
    .hero__panel { width: min(100%, 620px); }
}
@media (max-width: 520px) {
    .hero__benefits { grid-template-columns: 1fr; }
    .hero__actions .btn { width: 100%; }
}