:root{
  --hiw-ink-soft: #5f6f8d;
  --hiw-line: rgba(15,23,42,.08);
  --hiw-shell: rgba(255,255,255,.92);
  --hiw-alt: #eef2ff;
}

body{
  font-family: "Manrope", Arial, sans-serif;
  background:
    radial-gradient(1200px 620px at 18% 0%, rgba(109,40,255,.12), transparent 60%),
    radial-gradient(900px 500px at 100% 18%, rgba(59,130,246,.10), transparent 58%),
    linear-gradient(180deg, #ffffff, #f7f8fc 30%, #f4f6fb 100%);
}

.hiwPage{
  overflow: clip;
}

.hiwHeroWrap{
  padding: 34px 0 28px;
}

.hiwHeroBg{
  position: absolute;
  inset: 0 0 auto;
  height: 580px;
  background:
    radial-gradient(900px 460px at 18% 10%, rgba(109,40,255,.16), transparent 62%),
    radial-gradient(760px 420px at 84% 16%, rgba(59,130,246,.14), transparent 58%),
    linear-gradient(180deg, #fdfdff 0%, #f5f7ff 72%, rgba(245,247,255,0) 100%);
  pointer-events: none;
}

.hiwHero{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(380px, .86fr);
  gap: 38px;
  align-items: center;
  min-height: calc(100svh - var(--topbar-h) - 56px);
}

.hiwHero__copy{
  max-width: 640px;
}

.hiwEyebrow,
.hiwShell__eyebrow,
.hiwStoryCard__eyebrow,
.hiwSupportBand__eyebrow,
.hiwFinalCta__eyebrow{
  margin: 0 0 16px;
  color: #5b21b6;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hiwHero h1{
  margin: 0;
  max-width: 11ch;
  font-size: clamp(50px, 8vw, 92px);
  line-height: .94;
  letter-spacing: -.065em;
  color: #0f172a;
}

.hiwLead{
  margin: 20px 0 0;
  max-width: 44ch;
  color: var(--hiw-ink-soft);
  font-size: 20px;
  line-height: 1.65;
}

.hiwHero__actions,
.hiwFinalCta__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.hiwHero__visual{
  justify-self: end;
  width: min(100%, 560px);
}

.hiwSnapshot{
  padding: 22px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,255,.94));
  box-shadow: 0 24px 70px rgba(76,29,149,.10);
}

.hiwSnapshot__topbar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hiwSnapshot__pill{
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15,23,42,.05);
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.hiwSnapshot__pill--active{
  background: rgba(109,40,255,.12);
  color: #5b21b6;
}

.hiwSnapshot__board{
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  margin-top: 18px;
}

.hiwSnapshot__rail{
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 12px;
}

.hiwSnapshot__rail span{
  border-radius: 18px;
  background: linear-gradient(180deg, #edf2ff, #dde7ff);
}

.hiwSnapshot__content{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hiwSnapshot__headline{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hiwMetric{
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(248,250,252,.92);
  border: 1px solid rgba(148,163,184,.18);
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.hiwMetric--strong{
  background: rgba(34,197,94,.10);
  color: #15803d;
}

.hiwSnapshot__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hiwMiniCard{
  min-height: 152px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(248,250,255,.96);
  border: 1px solid rgba(148,163,184,.16);
}

.hiwMiniCard p,
.hiwReportBar p,
.hiwChecklist__head p,
.hiwWorkflowMock__header p,
.hiwReportMock__header p{
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hiwMiniCard strong,
.hiwWorkflowMock__header strong,
.hiwReportMock__header strong{
  display: block;
  margin-top: 10px;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.3;
}

.hiwMiniCard span{
  display: block;
  margin-top: 10px;
  color: var(--hiw-ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

.hiwReportBar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 18px 20px;
  border-radius: 22px;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
}

.hiwReportBar strong{
  display: block;
  margin-top: 8px;
  font-size: 18px;
}

.hiwReportBar__status{
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hiwShell{
  padding: 34px;
  border-radius: 34px;
  background: var(--hiw-shell);
  border: 1px solid var(--hiw-line);
  box-shadow: 0 18px 50px rgba(15,23,42,.05);
}

.hiwShell__head{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 26px;
}

.hiwShell__head h2,
.hiwStoryCard__copy h2,
.hiwFinalCta h2{
  margin: 0;
  color: #0f172a;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1;
  letter-spacing: -.05em;
}

.hiwShell__head p:last-child{
  margin: 0;
  max-width: 56ch;
  color: var(--hiw-ink-soft);
  font-size: 17px;
  line-height: 1.7;
}

.hiwShell__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
  gap: 26px;
  align-items: start;
}

.hiwSteps{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.hiwStepCard{
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  min-height: 190px;
  padding: 22px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: 0 10px 26px rgba(15,23,42,.04);
}

.hiwStepCard__num,
.hiwStoryPoint span{
  color: #6d28ff;
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
}

.hiwStepCard h3{
  margin: 2px 0 0;
  color: #111827;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -.04em;
}

.hiwStepCard p{
  margin: 12px 0 0;
  color: var(--hiw-ink-soft);
  font-size: 16px;
  line-height: 1.7;
}

.hiwChecklist{
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff, #f7f9ff);
}

.hiwChecklist__head,
.hiwReportMock__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hiwChecklist__head span{
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(109,40,255,.12);
  color: #5b21b6;
  font-size: 12px;
  font-weight: 800;
}

.hiwChecklist__items{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.hiwChecklist__item{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 16px;
  border-radius: 18px;
  background: rgba(248,250,252,.94);
  border: 1px solid rgba(148,163,184,.16);
  color: #334155;
  font-size: 15px;
  font-weight: 700;
}

.hiwChecklist__item i{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(148,163,184,.32);
}

.hiwChecklist__item.is-complete i{
  border-color: #16a34a;
  box-shadow: inset 0 0 0 4px rgba(34,197,94,.18);
}

.hiwChecklist__item.is-active{
  border-color: rgba(109,40,255,.24);
  background: rgba(109,40,255,.06);
}

.hiwChecklist__item.is-active i{
  border-color: #6d28ff;
  box-shadow: inset 0 0 0 4px rgba(109,40,255,.18);
}

.hiwChecklist__callout{
  margin-top: 18px;
  padding: 18px;
  border-radius: 18px;
  background: #101828;
  color: rgba(255,255,255,.92);
  font-size: 15px;
  line-height: 1.7;
}

.hiwStoryList{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hiwStoryCard{
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, .98fr);
  gap: 28px;
  align-items: center;
  padding: 34px;
  border-radius: 34px;
}

.hiwStoryCard--reverse{
  grid-template-columns: minmax(320px, .98fr) minmax(0, 1.02fr);
}

.hiwStoryCard--reverse .hiwStoryCard__copy{
  order: 2;
}

.hiwStoryCard--reverse .hiwStoryCard__visual{
  order: 1;
}

.hiwStoryGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px;
  margin-top: 24px;
}

.hiwStoryPoint{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hiwStoryPoint p{
  margin: 0;
  color: var(--hiw-ink-soft);
  font-size: 16px;
  line-height: 1.7;
}

.hiwStoryPoint strong{
  color: #0f172a;
}

.hiwStoryCard__visual{
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.hiwBrowserMock,
.hiwReportMock{
  width: min(100%, 480px);
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 18px 45px rgba(15,23,42,.08);
}

.hiwBrowserMock__bar{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(148,163,184,.14);
}

.hiwBrowserMock__bar i{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #93c5fd;
}

.hiwBrowserMock__bar i:last-child{
  margin-left: auto;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #6d28ff, #38bdf8);
}

.hiwBrowserMock__body{
  padding: 22px;
}

.hiwWorkflowMock__header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.hiwWorkflowMock__badge{
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(34,197,94,.12);
  color: #15803d;
  font-size: 12px;
  font-weight: 800;
}

.hiwWorkflowMock__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.hiwWorkflowMock__meta span,
.hiwWorkflowMock__timeline span{
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(241,245,249,.95);
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.hiwWorkflowMock__timeline{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.hiwWorkflowMock__timeline .is-complete{
  background: rgba(34,197,94,.10);
  color: #15803d;
}

.hiwWorkflowMock__timeline .is-active{
  background: rgba(109,40,255,.12);
  color: #5b21b6;
}

.hiwWorkflowMock__rows{
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.hiwWorkflowMock__rows span{
  display: block;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(90deg, #eef4ff, #e2e8f0);
}

.hiwReportMock{
  padding: 22px;
}

.hiwReportMock__header{
  gap: 14px;
  justify-content: flex-start;
}

.hiwReportMock__header img{
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(109,40,255,.12);
}

.hiwReportMock__stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.hiwReportMock__stats span{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 92px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(248,250,255,.96);
  border: 1px solid rgba(148,163,184,.16);
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
}

.hiwReportMock__stats strong{
  color: #0f172a;
  font-size: 28px;
  line-height: 1;
}

.hiwReportMock__chart{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  height: 200px;
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(248,250,255,.96);
}

.hiwReportMock__chart i{
  display: block;
  border-radius: 18px 18px 10px 10px;
  background: linear-gradient(180deg, rgba(109,40,255,.92), rgba(59,130,246,.72));
}

.hiwReportMock__chart i:nth-child(1){ height: 44%; }
.hiwReportMock__chart i:nth-child(2){ height: 68%; }
.hiwReportMock__chart i:nth-child(3){ height: 84%; }
.hiwReportMock__chart i:nth-child(4){ height: 58%; }

.hiwReportMock__footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #0f172a;
  color: #fff;
}

.hiwReportMock__footer span{
  color: rgba(255,255,255,.68);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hiwReportMock__footer strong{
  font-size: 18px;
}

.hiwSupportBand{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 32px;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255,247,237,.96), rgba(241,245,249,.96));
  border: 1px solid rgba(148,163,184,.18);
}

.hiwSupportBand h2{
  margin: 6px 0 0;
  color: #0f172a;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.04;
  letter-spacing: -.05em;
}

.hiwFinalCta{
  padding: 34px;
  border-radius: 34px;
  background:
    radial-gradient(580px 280px at 0% 0%, rgba(109,40,255,.14), transparent 64%),
    linear-gradient(180deg, #fdfdff, #f5f7ff);
  border: 1px solid rgba(148,163,184,.16);
  text-align: center;
}

.hiwFinalCta h2{
  max-width: 14ch;
  margin: 0 auto;
}

.hiwFinalCta__actions{
  justify-content: center;
}

@media (max-width: 1100px){
  .hiwHero{
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 26px;
    padding-top: 10px;
  }

  .hiwHero__visual{
    justify-self: stretch;
    width: 100%;
  }

  .hiwShell__grid,
  .hiwStoryCard,
  .hiwStoryCard--reverse{
    grid-template-columns: 1fr;
  }

  .hiwStoryCard--reverse .hiwStoryCard__copy,
  .hiwStoryCard--reverse .hiwStoryCard__visual{
    order: initial;
  }

  .hiwSupportBand{
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 820px){
  .hiwHeroWrap{
    padding: 28px 0 18px;
  }

  .hiwHero h1{
    max-width: none;
    font-size: clamp(42px, 13vw, 68px);
  }

  .hiwLead{
    font-size: 17px;
  }

  .hiwSnapshot{
    padding: 18px;
    border-radius: 26px;
  }

  .hiwSnapshot__board{
    grid-template-columns: 1fr;
  }

  .hiwSnapshot__rail{
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: none;
  }

  .hiwSnapshot__grid,
  .hiwSteps,
  .hiwStoryGrid,
  .hiwReportMock__stats{
    grid-template-columns: 1fr;
  }

  .hiwShell,
  .hiwStoryCard,
  .hiwFinalCta{
    padding: 24px 18px;
    border-radius: 26px;
  }

  .hiwShell__head h2,
  .hiwStoryCard__copy h2,
  .hiwFinalCta h2,
  .hiwSupportBand h2{
    font-size: clamp(30px, 10vw, 42px);
  }

  .hiwStepCard{
    grid-template-columns: 46px 1fr;
    min-height: 0;
    padding: 18px;
  }

  .hiwStepCard__num,
  .hiwStoryPoint span{
    font-size: 42px;
  }

  .hiwStepCard h3{
    font-size: 22px;
  }

  .hiwStoryCard__visual{
    min-height: 0;
    padding: 0;
  }

  .hiwSupportBand{
    padding: 24px 18px;
    border-radius: 26px;
  }
}

@media (prefers-reduced-motion: reduce){
  .hiwPage *{
    scroll-behavior: auto;
  }
}