.landing-hero { background: #f3f8f5; border-bottom: 1px solid #e0e9e4; color: #182b35; overflow: hidden; }
.hero-grid { max-width: 1280px; margin: 0 auto; padding: 86px 32px 62px; display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.hero-eyebrow { display: flex; align-items: center; gap: 8px; color: #087568; font-size: 13px; font-weight: 600; }
.hero-eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: #087f75; }
.hero-copy h1 { margin-top: 24px; font-size: clamp(32px, 3.4vw, 49px); line-height: 1.3; font-weight: 650; letter-spacing: -.055em; }
.hero-copy h1 em { color: #087f75; font-style: normal; }
.hero-description { margin-top: 26px; color: #526571; font-size: 16px; line-height: 1.95; letter-spacing: -.025em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 32px; }
.hero-primary { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 15px 22px; background: #087f75; color: white; border: 1px solid #087f75; border-radius: 9px; font-size: 14px; font-weight: 600; transition: background .15s; }
.hero-primary:hover { background: #09685f; }
.hero-secondary { display: inline-flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 14px; font-weight: 550; color: #365b52; }
.hero-secondary:hover { text-decoration: underline; text-underline-offset: 5px; }
.hero-trust { display: flex; align-items: center; gap: 7px; margin-top: 19px; font-size: 12px; color: #5c756d; }
.hero-trust svg { width: 16px; height: 16px; flex: none; }
.hero-integrations { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 42px; font-size: 11px; color: #667986; }
.hero-integrations b { color: #526571; font-size: 12px; font-weight: 600; }
.hero-product { min-width: 0; border-radius: 16px; background: white; border: 1px solid #dce7e1; box-shadow: 0 22px 70px #24513e0f, 0 3px 10px #24513e05; transform: rotate(-1deg); overflow: hidden; }
.product-top { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid #edf1f3; }
.product-brand { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; letter-spacing: -.04em; }
.product-example { font-size: 10px; color: #667986; border: 1px solid #e2e8eb; border-radius: 5px; padding: 3px 7px; }
.product-content { padding: 22px; }
.product-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.product-heading small { display: block; color: #087f75; letter-spacing: .1em; font-size: 9px; font-weight: 600; }
.product-heading h2 { font-size: 20px; font-weight: 650; letter-spacing: -.04em; margin-top: 4px; }
.product-heading > span { font-size: 10px; color: #667986; background: #f5f7f8; padding: 6px 9px; border-radius: 6px; }
.product-focus { display: flex; justify-content: space-between; gap: 10px; margin-top: 17px; padding: 12px; background: #edf6f1; border-radius: 8px; color: #316457; font-size: 11px; }
.product-focus b { font-weight: 600; }
.product-focus b span { margin-left: 8px; }
.product-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.product-kpis > div { border: 1px solid #e2e8eb; border-radius: 9px; padding: 13px 11px; min-width: 0; }
.product-kpis span { display: block; font-size: 10px; color: #667986; }
.product-kpis b { display: block; font-size: 21px; font-weight: 650; letter-spacing: -.04em; margin: 6px 0; font-variant-numeric: tabular-nums; }
.product-kpis b em { font-size: 11px; font-style: normal; font-weight: 400; margin-left: 3px; }
.product-kpis small { display: block; color: #667986; font-size: 9px; }
.product-kpis .positive { color: #087464; }
.product-chart { margin-top: 20px; }
.product-chart > div { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px; }
.product-chart b { font-size: 12px; font-weight: 600; }
.product-chart span { font-size: 10px; color: #667986; }
.product-chart i { display: inline-block; width: 7px; height: 7px; background: #087f75; border-radius: 50%; margin-right: 5px; }
.product-chart svg { display: block; width: 100%; }
.product-insight { display: flex; align-items: center; gap: 10px; margin-top: 17px; border: 1px solid #e8e3f3; border-radius: 9px; background: #fbfaff; padding: 12px; }
.insight-spark { color: #6c52a6; font-size: 24px; }
.product-insight b { display: block; font-size: 11px; font-weight: 600; color: #4e4272; }
.product-insight p { font-size: 10px; color: #746a89; margin-top: 3px; line-height: 1.6; }
.product-tag { font-size: 9px; color: #6c52a6; padding: 3px 6px; border-radius: 4px; background: #f0edfa; margin-left: auto; white-space: nowrap; }
.hero-product figcaption { padding: 13px 20px; text-align: center; border-top: 1px solid #edf1f3; font-size: 10px; color: #667986; background: #fcfdfc; }
.hero-bottom { max-width: 1216px; margin: 0 auto; display: flex; justify-content: center; gap: 70px; border-top: 1px solid #dce8e1; padding: 24px 24px 27px; color: #526571; font-size: 13px; }
.hero-bottom b { color: #087f75; font-size: 11px; font-weight: 600; margin-right: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #087f75; outline-offset: 5px; }
section[id] { scroll-margin-top: 84px; }
#cta { background: #123d35; }
@media (max-width: 1050px) {
  .hero-grid { gap: 28px; padding: 64px 28px 48px; }
  .hero-copy h1 { font-size: 37px; }
  .hero-description { font-size: 14px; }
  .hero-actions { gap: 14px; }
  .hero-primary { font-size: 13px; padding: 13px 16px; gap: 12px; }
  .hero-secondary { font-size: 13px; }
  .product-content { padding: 17px; }
  .product-kpis b { font-size: 17px; }
  .product-kpis > div { padding: 10px 8px; }
  .hero-bottom { gap: 32px; }
}
@media (max-width: 767px) {
  .hero-grid { grid-template-columns: 1fr; padding: 48px 22px 36px; gap: 36px; max-width: 620px; }
  .hero-copy h1 { font-size: clamp(29px, 7.2vw, 42px); margin-top: 20px; }
  .hero-eyebrow { font-size: 12px; }
  .hero-description { margin-top: 20px; line-height: 1.9; font-size: 14px; }
  .hero-actions { margin-top: 26px; }
  .hero-integrations { margin-top: 28px; gap: 10px; }
  .hero-integrations > span { flex-basis: 100%; }
  .hero-integrations b { font-size: 11px; }
  .hero-product { transform: none; }
  .product-top { padding: 14px 18px; }
  .product-heading h2 { font-size: 18px; }
  .product-kpis b { font-size: 19px; }
  .product-insight { gap: 8px; }
  .product-tag { display: none; }
  .hero-bottom { flex-wrap: wrap; gap: 12px 22px; font-size: 11px; padding: 20px 16px; }
  .hero-bottom b { margin-right: 5px; }
  body > nav > div { gap: 8px; }
  body > nav > div > span { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; transition: none; } }