/* Keep the first screen focused on the platform and its audience. */
.hero { position: relative; display: flex; min-height: clamp(540px, 72vh, 740px); flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; margin-block: 24px 0; padding: clamp(30px, 7vw, 88px); overflow: hidden; isolation: isolate; border: 1px solid rgba(255, 255, 255, .18); border-radius: clamp(20px, 3vw, 34px); background-color: #071426; box-shadow: 0 25px 65px rgba(1, 8, 12, .18); }
.hero::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(3, 9, 18, .94) 0%, rgba(4, 14, 27, .83) 43%, rgba(4, 14, 27, .22) 100%), linear-gradient(0deg, rgba(3, 9, 18, .58), transparent 55%); content: ""; pointer-events: none; }
.hero-background { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero-copy { position: relative; z-index: 1; width: min(100%, 720px); padding-top: 0; }
.hero .eyebrow { color: rgba(255, 255, 255, .84); }
.hero-title { max-width: 800px; margin-bottom: 16px; color: #fff; font-size: clamp(3.3rem, 8vw, 6.5rem); line-height: .98; letter-spacing: -.06em; text-wrap: balance; }
.hero-title span { color: #78e4d0; }
.hero-promise { margin-bottom: 18px; color: #f3cf74; font-size: clamp(.85rem, 1.6vw, 1rem); font-weight: 700; letter-spacing: .12em; }
.hero-intro { max-width: 58ch; margin-bottom: 26px; color: rgba(255, 255, 255, .86); font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.hero .button-outline { border-color: rgba(255, 255, 255, .36); background: rgba(255, 255, 255, .1); color: #fff; }
.hero .button-outline:hover { background: rgba(255, 255, 255, .2); }
.hero-search { display: flex; max-width: 620px; min-height: 60px; align-items: center; gap: 12px; padding: 7px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 14px; background: rgba(255, 255, 255, .92); box-shadow: 0 12px 35px rgba(0, 0, 0, .18); }
.hero-search input { width: 100%; min-width: 0; border: 0; background: transparent; color: #15212b; font: inherit; font-size: 14px; }
.hero-search input::placeholder { color: #55636b; }
.hero-search:focus-within { border-color: #73e2d0; outline: 2px solid #73e2d0; outline-offset: 2px; }
.hero-search .button { min-width: 104px; }
.hero-links { display: flex; align-items: center; gap: 16px; margin-top: 16px; color: rgba(255, 255, 255, .82); font-size: 13px; }
.hero-links a { color: #8de8da; font-weight: 700; }
.hero-links > span::before { padding-right: 8px; color: #8de8da; content: "•"; }
.hero-badge { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; background: rgba(6, 20, 35, .62); color: rgba(255, 255, 255, .9); font-size: 12px; font-weight: 700; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hero-badge span { color: #f3cf74; }

.next-steps-section { border-top: 1px solid var(--line); background: var(--bg-deep); }
.next-steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.next-step-card { position: relative; display: flex; min-height: 290px; flex-direction: column; align-items: flex-start; padding: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: transform .2s ease, border-color .2s ease; }
.next-step-card:hover { transform: translateY(-3px); border-color: var(--teal); }
.next-step-number { color: var(--faint); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.next-step-icon { display: grid; width: 42px; height: 42px; margin-top: 24px; place-items: center; border: 1px solid var(--line); border-radius: 13px; background: var(--teal-wash); color: var(--teal); font-size: 20px; }
.next-step-card h3 { margin-top: 18px; }
.next-step-card p { max-width: 38ch; margin-bottom: 22px; font-size: 13px; }
.next-step-card .text-link { margin-top: auto; color: var(--teal); font-size: 12px; font-weight: 700; }
.next-step-highlight { border-color: color-mix(in srgb, var(--gold) 42%, var(--line)); background: linear-gradient(145deg, var(--gold-wash), var(--surface) 58%); }
.next-step-highlight .next-step-icon { background: var(--gold-wash); color: var(--gold); }

@media (max-width: 760px) {
  .hero { min-height: 590px; gap: 12px; margin-top: 15px; padding: clamp(23px, 6vw, 42px); }
  .hero::before { background: linear-gradient(90deg, rgba(3, 9, 18, .91), rgba(4, 14, 27, .62)), linear-gradient(0deg, rgba(3, 9, 18, .62), transparent 65%); }
  .hero-background { object-position: 57% center; }
  .hero-title { font-size: clamp(3rem, 12vw, 4.6rem); }
  .hero-intro { font-size: 15px; }
  .next-steps-grid { grid-template-columns: 1fr; }
  .next-step-card { min-height: 250px; }
}

@media (max-width: 480px) {
  .hero { min-height: 560px; margin-top: 12px; padding: 22px; }
  .hero-background { object-position: 55% center; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .button { width: 100%; }
  .hero-search { min-height: 54px; gap: 7px; }
  .hero-search .button { min-width: 82px; padding-inline: 12px; }
  .hero-search input { font-size: 12px; }
  .hero-links { flex-wrap: wrap; gap: 8px 14px; }
}