/* ==========================================================================
   How It Works Section — Plain Planning
   Mobile-first, with tablet (768px) and desktop (1024px) breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section Container
   -------------------------------------------------------------------------- */
.hiw {
  position: relative;
  background: transparent; /* Background provided by .bg-wrapper */
  padding: 80px 0;
  overflow: hidden;
}

/* Dark rounded panel — wraps header, loop, intelligence cards & dashboards */
.hiw__panel {
  position: relative;
  z-index: 2;
  background: #133b4e;
  border-radius: 24px;
  padding: 64px 0;
  max-width: 1280px;
  /* Center the panel horizontally at all breakpoints */
  width: calc(100% - 32px);
  margin: 0 auto;
}

/* Inner content zones inside the panel */
.hiw__header,
.hiw__loop,
.hiw__intelligence {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Content zones outside the panel — need their own centering */
.hiw__benefits {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}


/* --------------------------------------------------------------------------
   Zone A — Section Header
   -------------------------------------------------------------------------- */
.hiw__header {
  text-align: center;
  margin-bottom: 64px;
}

.hiw__eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 16px;
}

.hiw__title {
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 16px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.hiw__subtitle {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}


/* --------------------------------------------------------------------------
   Zone B — Closed Loop (Three Component Cards)
   -------------------------------------------------------------------------- */
.hiw__loop {
  position: relative;
  /* No bottom margin needed — this is the last element inside the panel.
     The panel's own padding-bottom provides spacing. */
  margin-bottom: 0;
}

/* SVG connections — hidden on mobile */
.hiw__loop-connections {
  display: none;
}

/* Mobile connectors — visible on mobile only */
.hiw__mobile-connector {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.hiw__mobile-loop-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  font-weight: 500;
}


/* --------------------------------------------------------------------------
   Component Cards (Zone B) — Simplified: icon, name, tagline, learn more
   -------------------------------------------------------------------------- */
.hiw__component {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  /* Circular shape — equal width & height with 50% radius */
  border-radius: 50%;
  width: 210px;
  height: 210px;
  padding: 24px 16px;
  box-shadow: 0 1px 3px rgba(19, 59, 78, 0.08), 0 8px 24px rgba(19, 59, 78, 0.06);
  transition: transform 300ms ease-out, box-shadow 300ms ease-out;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Center each circle horizontally on mobile */
  margin-left: auto;
  margin-right: auto;
  /* Prevent content from overflowing the circle */
  overflow: hidden;
}

.hiw__component:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(19, 59, 78, 0.1), 0 12px 32px rgba(19, 59, 78, 0.1);
}

.hiw__component:hover .hiw__component-icon svg {
  transform: scale(1.08);
}

.hiw__component-icon {
  margin-bottom: 8px;
}

.hiw__component-icon svg {
  width: 36px;
  height: 36px;
  transition: transform 300ms ease-out;
}

.hiw__component-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: #133b4e;
  margin-bottom: 4px;
  line-height: 1.2;
}

.hiw__component-tagline {
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(19, 59, 78, 0.65);
  line-height: 1.35;
  margin-bottom: 8px;
}

/* "Learn more" link with arrow icon */
.hiw__component-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0097b2;
  text-decoration: none;
  transition: color 200ms ease-out, gap 200ms ease-out;
  margin-top: auto;
}

.hiw__component-learn-more:hover {
  color: #007a94;
  gap: 10px;
}

.hiw__component-learn-more:focus-visible {
  outline: 2px solid #0097b2;
  outline-offset: 4px;
  border-radius: 4px;
}

.hiw__component-learn-more svg {
  width: 14px;
  height: 14px;
  transition: transform 200ms ease-out;
}

.hiw__component:hover .hiw__component-learn-more svg {
  transform: translateX(2px);
}


/* --------------------------------------------------------------------------
   Zone C — Intelligence Layer (inside dark panel)
   -------------------------------------------------------------------------- */
.hiw__intelligence {
  padding-top: 64px;
  padding-bottom: 0;
}

.hiw__intel-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 64px;
}

.hiw__intel-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  transition: box-shadow 300ms ease-out;
}

.hiw__intel-card:hover {
  box-shadow: 0 0 30px rgba(0, 151, 178, 0.15);
}

.hiw__intel-icon {
  margin-bottom: 16px;
}

.hiw__intel-icon svg {
  width: 48px;
  height: 48px;
}

.hiw__intel-heading {
  font-size: 1.375rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.2;
}

.hiw__intel-desc {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 16px;
}


/* Intel visual — Hybrid bar (Planning Engine card) */
.hiw__intel-visual {
  margin-top: 24px;
}

.hiw__hybrid-bar-track {
  display: flex;
  width: 100%;
  min-height: 36px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 151, 178, 0.3);
}

.hiw__hybrid-bar-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
}

.hiw__hybrid-bar-segment span {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.hiw__hybrid-bar-segment--rules {
  flex: 0 0 80%;
  background: rgba(0, 151, 178, 0.2);
  color: #0097b2;
}

.hiw__hybrid-bar-segment--ai {
  flex: 0 0 20%;
  background: #0097b2;
  color: #ffffff;
}

/* On narrow viewports the 20% segment is tight — allow text to
   shrink and wrap gracefully so it never overflows the bar. */
.hiw__hybrid-bar-segment--ai span {
  font-size: 0.625rem;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}


/* Intel visual — Learning flow (Learn & Advise card) */
.hiw__learning-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.hiw__learning-step {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  background: rgba(0, 151, 178, 0.15);
  border: 1px solid rgba(0, 151, 178, 0.3);
  border-radius: 20px;
}

.hiw__learning-step span {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #0097b2;
  white-space: nowrap;
}

.hiw__learning-flow > svg {
  flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   Dashboards Subsection (within Zone C)
   -------------------------------------------------------------------------- */
.hiw__dashboards {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 40px 24px;
  text-align: center;
}

.hiw__dashboards-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.2;
}

.hiw__dashboards-desc {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 32px auto;
}

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

.hiw__dash-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(19, 59, 78, 0.08), 0 8px 24px rgba(19, 59, 78, 0.06);
  transition: transform 300ms ease-out, box-shadow 300ms ease-out;
}

.hiw__dash-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(19, 59, 78, 0.1), 0 12px 32px rgba(19, 59, 78, 0.1);
}

.hiw__dash-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.hiw__dash-icon svg {
  width: 32px;
  height: 32px;
}

.hiw__dash-label {
  font-size: 1rem;
  font-weight: 600;
  color: #133b4e;
  margin-bottom: 8px;
}

.hiw__dash-detail {
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(19, 59, 78, 0.65);
  line-height: 1.5;
}


/* --------------------------------------------------------------------------
   Zone D — Key Benefits (outside dark panel)
   -------------------------------------------------------------------------- */
.hiw__benefits {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 64px;
}

.hiw__benefit-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  /* Dark card behind each benefit */
  background: #133b4e;
  border-radius: 16px;
  padding: 24px;
}

.hiw__benefit-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0097b2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms ease-out;
}

.hiw__benefit-item:hover .hiw__benefit-icon {
  background: #00a8c6;
}

.hiw__benefit-icon svg {
  width: 24px;
  height: 24px;
}

.hiw__benefit-label {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
  line-height: 1.3;
}

.hiw__benefit-text {
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.hiw__benefit-content {
  flex: 1;
}


/* ==========================================================================
   Scroll Reveal Animations
   ========================================================================== */

/* Initial state: hidden */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 600ms ease-out,
    transform 600ms ease-out;
}

/* Component cards get a slightly larger offset */
.hiw__component[data-animate] {
  transform: translateY(30px);
  transition-duration: 700ms;
}

/* Intel cards also get larger offset */
.hiw__intel-card[data-animate] {
  transform: translateY(30px);
  transition-duration: 700ms;
}

/* Visible state: revealed */
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays — Zone A */
.hiw__eyebrow[data-animate].is-visible {
  transition-delay: 0ms;
}

.hiw__title[data-animate].is-visible {
  transition-delay: 100ms;
}

.hiw__subtitle[data-animate].is-visible {
  transition-delay: 200ms;
}

/* Stagger delays — Zone B component cards */
.hiw__component--desktop[data-animate].is-visible {
  transition-delay: 0ms;
}

.hiw__component--field[data-animate].is-visible {
  transition-delay: 150ms;
}

.hiw__component--portal[data-animate].is-visible {
  transition-delay: 300ms;
}

/* Stagger delays — Zone C intel cards */
.hiw__intel-card--engine[data-animate].is-visible {
  transition-delay: 0ms;
}

.hiw__intel-card--learn[data-animate].is-visible {
  transition-delay: 150ms;
}

/* Intel visual elements: delayed from parent */
.hiw__intel-visual[data-animate] {
  transform: translateY(10px) scale(0.95);
  transition:
    opacity 500ms ease-out,
    transform 500ms ease-out;
  transition-delay: 300ms;
}

.hiw__intel-visual[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Dashboard cards stagger */
.hiw__dashboards-grid .hiw__dash-card:nth-child(1)[data-animate].is-visible {
  transition-delay: 0ms;
}

.hiw__dashboards-grid .hiw__dash-card:nth-child(2)[data-animate].is-visible {
  transition-delay: 100ms;
}

.hiw__dashboards-grid .hiw__dash-card:nth-child(3)[data-animate].is-visible {
  transition-delay: 200ms;
}

/* Benefit items stagger */
.hiw__benefit-item:nth-child(1)[data-animate].is-visible {
  transition-delay: 0ms;
}

.hiw__benefit-item:nth-child(2)[data-animate].is-visible {
  transition-delay: 80ms;
}

.hiw__benefit-item:nth-child(3)[data-animate].is-visible {
  transition-delay: 160ms;
}

.hiw__benefit-item:nth-child(4)[data-animate].is-visible {
  transition-delay: 240ms;
}

.hiw__benefit-item:nth-child(5)[data-animate].is-visible {
  transition-delay: 320ms;
}

/* Benefit items on mobile: slide-up 20px, 500ms */
.hiw__benefit-item[data-animate] {
  transform: translateY(20px);
  transition-duration: 500ms;
}


/* ==========================================================================
   SVG Connection Line Animations (Zone B — desktop/tablet only)
   ========================================================================== */

/* Paths start with full dash offset (invisible).
   stroke-dasharray and stroke-dashoffset are set dynamically by JS
   based on the actual computed path length. The CSS transition animates
   the draw-in when JS sets dashoffset to 0. */
.hiw__connection-path {
  transition: stroke-dashoffset 1200ms ease-in-out;
}

/* Animated dots: hidden by default */
.hiw__connection-dot {
  opacity: 0;
}

/* Dots become visible after lines are drawn */
.hiw__loop.is-flowing .hiw__connection-dot {
  opacity: 1;
}

/* Flow labels: hidden by default, fade-in on hover */
.hiw__flow-label {
  opacity: 0;
  transition: opacity 250ms ease-out;
  pointer-events: none;
}

.hiw__flow-label.is-visible {
  opacity: 1;
}

/* Hit areas: always transparent but interactable */
.hiw__connection-hit {
  cursor: pointer;
  pointer-events: stroke;
}


/* ==========================================================================
   Responsive — Tablet (768px+)
   ========================================================================== */
@media (min-width: 768px) {

  .hiw__panel {
    width: calc(100% - 64px);
    margin: 0 auto;
    padding: 80px 0;
  }

  .hiw__header,
  .hiw__loop,
  .hiw__intelligence {
    padding-left: 40px;
    padding-right: 40px;
  }

  .hiw__benefits {
    padding-left: 40px;
    padding-right: 40px;
  }

  .hiw__subtitle {
    font-size: 1.125rem;
  }

  /* Zone B: triangular-ish layout at tablet — keep stacked
     but show connections as simpler inline */
  .hiw__dashboards-grid {
    flex-direction: row;
    gap: 24px;
  }

  .hiw__dash-card {
    flex: 1;
  }

  .hiw__intel-grid {
    flex-direction: row;
    gap: 24px;
  }

  .hiw__intel-card {
    flex: 1;
  }

  /* At tablet width the intel cards sit side-by-side so the hybrid bar's
     20% segment has enough room for full-size, single-line text. */
  .hiw__hybrid-bar-segment--ai span {
    font-size: 0.75rem;
    white-space: nowrap;
  }

  /* Benefits: 3-2 grid on tablet */
  .hiw__benefits {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
  }

  .hiw__benefit-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 0 calc(33.333% - 16px);
    /* Equal card height across all items */
    min-height: 200px;
  }
}


/* ==========================================================================
   Responsive — Desktop (1024px+)
   ========================================================================== */
@media (min-width: 1024px) {

  .hiw {
    padding: 120px 0;
  }

  .hiw__panel {
    padding: 96px 0;
    max-width: 1280px;
    /* Auto-center with minimum gap from viewport edges */
    width: calc(100% - 96px);
    margin: 0 auto;
  }

  .hiw__header {
    margin-bottom: 96px;
  }

  .hiw__header,
  .hiw__loop,
  .hiw__intelligence {
    padding-left: 64px;
    padding-right: 64px;
  }

  .hiw__benefits {
    padding-left: 64px;
    padding-right: 64px;
  }

  .hiw__loop {
    margin-bottom: 0;
  }

  .hiw__intelligence {
    padding-top: 96px;
    padding-bottom: 0;
  }

  .hiw__intel-card {
    padding: 32px;
  }

  /* --- Zone B: Triangular layout with absolute positioning ---
     We use absolute positioning instead of CSS grid so that circle centers
     sit at precise triangle vertices and SVG lines can connect edge-to-edge. */
  .hiw__loop {
    display: block;
    position: relative;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    /* Height sized to create a well-proportioned triangle.
       Circle diameter is 210px. Top circle center ~105px from top,
       bottom circles center ~105px from bottom. Triangle height ~320px
       between centers, so total = 105 + 320 + 105 = 530px. */
    height: 530px;
  }

  /* All three circles are absolutely positioned within .hiw__loop */
  .hiw__component {
    position: absolute;
    z-index: 3;
    margin: 0; /* Override the mobile auto-margin centering */
  }

  /* Desktop App: top center — centered horizontally */
  .hiw__component--desktop {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Field App: bottom left */
  .hiw__component--field {
    bottom: 0;
    left: 10%;
    transform: translateX(-50%);
  }

  /* Customer Portal: bottom right */
  .hiw__component--portal {
    bottom: 0;
    right: 10%;
    transform: translateX(50%);
  }

  /* SVG connections: shown on desktop, absolutely covering the loop area */
  .hiw__loop-connections {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }

  /* Re-enable pointer events on hit areas only */
  .hiw__connection-hit {
    pointer-events: stroke;
  }

  /* Hover transforms must preserve the translateX positioning */
  .hiw__component--desktop:hover {
    transform: translateX(-50%) translateY(-4px);
  }

  .hiw__component--field:hover {
    transform: translateX(-50%) translateY(-4px);
  }

  .hiw__component--portal:hover {
    transform: translateX(50%) translateY(-4px);
  }

  /* Hide mobile connectors on desktop */
  .hiw__mobile-connector {
    display: none;
  }

  .hiw__mobile-loop-back {
    display: none;
  }

  /* --- Zone C Desktop --- */
  .hiw__intel-grid {
    gap: 24px;
    margin-bottom: 96px;
  }

  .hiw__dashboards {
    padding: 48px 40px;
  }

  .hiw__dashboards-grid {
    gap: 24px;
  }

  /* --- Zone D Desktop: 5 items in a row --- */
  .hiw__benefits {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    max-width: 1100px;
    gap: 24px;
  }

  .hiw__benefit-item {
    /* Equal width and height for all 5 cards */
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 220px;
  }

  /* --- Desktop animation overrides for absolutely positioned circles ---
     The base [data-animate] uses translateY(30px) -> translateY(0), but on
     desktop the circles use translateX() for positioning. We must compose
     both transforms so the reveal animation does not break positioning. */
  .hiw__component--desktop[data-animate] {
    transform: translateX(-50%) translateY(30px);
  }

  .hiw__component--desktop[data-animate].is-visible {
    transform: translateX(-50%) translateY(0);
  }

  .hiw__component--field[data-animate] {
    transform: translateX(-50%) translateY(30px);
  }

  .hiw__component--field[data-animate].is-visible {
    transform: translateX(-50%) translateY(0);
  }

  .hiw__component--portal[data-animate] {
    transform: translateX(50%) translateY(30px);
  }

  .hiw__component--portal[data-animate].is-visible {
    transform: translateX(50%) translateY(0);
  }
}


/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  /* Remove transform-based animations, keep simple fade */
  [data-animate] {
    transform: none !important;
    transition-duration: 300ms !important;
    transition-property: opacity !important;
  }

  /* Disable connection line dot animations */
  .hiw__connection-dot {
    display: none;
  }

  /* Connection paths visible immediately (no draw-in) */
  .hiw__connection-path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }

  /* Remove hover transform effects, keep color changes */
  .hiw__component:hover {
    transform: none;
  }

  .hiw__dash-card:hover {
    transform: none;
  }

  .hiw__component:hover .hiw__component-icon svg {
    transform: none;
  }
}

/* Reduced-motion + desktop: preserve positioning transforms on circles */
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .hiw__component--desktop[data-animate] {
    transform: translateX(-50%) !important;
  }

  .hiw__component--field[data-animate] {
    transform: translateX(-50%) !important;
  }

  .hiw__component--portal[data-animate] {
    transform: translateX(50%) !important;
  }

  .hiw__component--desktop:hover {
    transform: translateX(-50%) !important;
  }

  .hiw__component--field:hover {
    transform: translateX(-50%) !important;
  }

  .hiw__component--portal:hover {
    transform: translateX(50%) !important;
  }
}