.hero { position: relative; min-height: calc(100svh - var(--header-height)); display: flex; align-items: center; overflow: hidden; background: var(--color-background); }
.hero::before { position: absolute; inset: 0 0 auto auto; width: min(46vw,44rem); aspect-ratio: 1; border-radius: 50%; background: var(--color-primary-050); content: ""; transform: translate(28%,-42%); }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(20rem,.85fr); gap: clamp(2rem,5vw,5rem); align-items: center; padding-block: clamp(2.5rem,6vh,5rem); }
.hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); color: var(--color-primary-700); font-size: var(--font-size-sm); font-weight: 800; }
.hero__title { max-width: 13ch; margin-bottom: var(--space-6); }
.hero__title span { color: var(--color-accent-700); }
.hero__description { max-width: 41rem; margin-bottom: var(--space-8); color: var(--color-muted); font-size: clamp(1rem,1.5vw,1.2rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__microcopy { display: flex; align-items: flex-start; gap: var(--space-2); max-width: 39rem; margin-top: var(--space-4); color: var(--color-muted); font-size: var(--font-size-sm); }
.hero__visual { position: relative; padding: clamp(1.25rem,3vw,2rem); border: 1px solid var(--color-primary-100); background: white; box-shadow: var(--shadow-float); }
.hero__visual::after { position: absolute; z-index: -1; right: -1rem; bottom: -1rem; width: 55%; height: 42%; background: var(--color-accent-500); content: ""; }
.hero__board-head { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.hero__board-title { margin: 0; font-size: var(--font-size-sm); letter-spacing: 0; }
.hero__progress { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.hero__progress-item { display: grid; grid-template-columns: 2.6rem 1fr; gap: var(--space-3); align-items: center; }
.hero__progress-number { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 1px solid var(--color-primary-100); border-radius: 50%; background: var(--color-primary-050); color: var(--color-primary-800); font-weight: 850; }
.hero__progress-item strong { display: block; color: var(--color-primary-900); }
.hero__progress-item small { color: var(--color-muted); }
.hero__bar { height: .42rem; margin-top: .45rem; overflow: hidden; border-radius: 999px; background: #e7ebf0; }
.hero__bar span { display: block; height: 100%; background: var(--color-success-700); }
.hero__bar--complete span { width: 100%; }
.hero__bar--medium span { width: 70%; }
.hero__bar--start span { width: 42%; }
@media (min-width: 1500px) { .hero__grid { gap: 7rem; } }
@media (max-width: 900px) { .hero { min-height: calc(100svh - var(--header-height)); } .hero__grid { grid-template-columns: 1fr; gap: var(--space-8); } .hero__title { max-width: 15ch; } .hero__visual { max-width: 39rem; } }
@media (max-width: 520px) { .hero__grid { padding-block: var(--space-8); } .hero__actions { display: grid; } .hero__actions .button { width: 100%; } .hero__visual { padding: var(--space-5); } .hero__progress { gap: var(--space-4); } }