/* Home (new) page — page-scoped styles, prefix `hn-`. Builds on bundle.css tokens (:root vars) and
   the site's layout utilities (.section / .container / .padding-6 / .caption / .paragraph …).
   The hero, logo marquee, video carousel and CTA reuse the existing home page markup untouched. */

/* ---- shared ---- */
.hn-intro { max-width: 48rem; }
.hn-intro.hn-intro-wide { max-width: 54rem; }
.hn-caption { color: var(--brand-primary); }
.hn-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.hn-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.hn-hero-kicker { display: block; font-size: .8em; line-height: 1.15; letter-spacing: -2px; margin-bottom: .2em; }
.hn-hero-title { display: block; font-size: 1.1em; font-weight: 700; line-height: 1.1; }

/* ---- dark sections (site's dark surface tokens) ---- */
.hn-dark { background-color: #0a2a7a; background-image: url('../images/dark-blue-bg-2.jpg'); background-position: 50% 50%; background-size: cover; color: var(--contrast-primary); }
/* surfaces on the blue background: translucent dark glass rather than the flat dark-grey card token */
.hn-glass { background-color: rgba(6, 6, 6, .42); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hn-dark .paragraph { color: var(--contrast-secondary); }
/* brand blue vanishes on the blue background, and the lighter-blue substitute still washes out
   against the brighter cyan corner of the photo behind it — no flat color reads reliably across
   a gradient this wide. Match the paragraph below (also --contrast-secondary on this ground)
   instead of chasing another hue; the mono caps and letter-spacing already read as an eyebrow. */
.hn-dark .hn-caption { color: var(--contrast-secondary); }

/* ---- problem cards ---- */
.hn-card { background-color: var(--contrast-primary); border: 1px solid var(--contrast-divider-dark); border-radius: 2rem; padding: 2rem; display: flex; flex-direction: column; gap: .75rem; min-height: 100%; }
.hn-card .paragraph-secondary { font-size: 1rem; line-height: 1.5rem; }

/* ---- data stream panel ---- */
.hn-stream { position: relative; height: 32rem; border-radius: 2rem; overflow: hidden; }
.hn-stream canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hn-stream-focus { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -56%); width: 10rem; pointer-events: none; }
.hn-stream-focus img { position: relative; width: 100%; height: auto; display: block; filter: drop-shadow(0 0 28px rgba(0, 99, 242, .45)) drop-shadow(0 20px 40px rgba(0, 0, 0, .5)); }
.hn-stream-glow { position: absolute; inset: -.875rem; border-radius: 1.5rem; background-color: var(--background-opacity-80-brand); opacity: .4; filter: blur(16px); }
.hn-stream-ring { position: absolute; inset: 0; border-radius: .875rem; border: 1px solid var(--background-hover-brand); opacity: 0; animation: hn-pulse 3s ease-out infinite; }
.hn-stream-ring.is-second { animation-delay: 1.5s; }
.hn-stats { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; background-image: linear-gradient(180deg, transparent, rgba(4, 10, 30, .9) 45%); }
.hn-stat-n { color: var(--contrast-primary); font-size: 2.25rem; line-height: 1; letter-spacing: -1px; }
.hn-stat-l { color: var(--contrast-tertiary); font-size: .875rem; line-height: 1.25rem; margin-top: .375rem; }
.hn-stats-inline { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.hn-stats-inline .hn-stat-n { font-size: 1.875rem; }

/* ---- dark cards ---- */
.hn-card-dark { border-radius: 2rem; padding: 2.5rem; display: flex; flex-direction: column; }
.hn-list { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.hn-list li { display: flex; gap: .75rem; align-items: flex-start; color: var(--contrast-secondary); font-size: 1rem; line-height: 1.5rem; font-weight: 300; }
.hn-list li::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 2px; background-color: var(--brand-primary); margin-top: .5rem; }
.hn-list strong { color: var(--contrast-primary); font-weight: 500; }

/* "Deep intel per model": equipment image on the left, every data point wired to it.
   Layout: image | bus (horizontal line from the model to a vertical spine) | list.
   Each <li> draws its own segment of the spine (::before) and a branch to its node (::after),
   so the wiring follows the real item heights without any JS. */
.hn-model { display: grid; grid-template-columns: minmax(9rem, 12rem) 2.5rem minmax(0, 1fr); align-items: center; }
.hn-model-image { position: relative; }
.hn-model-image img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 24px rgba(0, 99, 242, .45)) drop-shadow(0 12px 24px rgba(0, 0, 0, .45)); }
.hn-model-image::after { content: ""; position: absolute; right: -.375rem; top: 50%; width: .75rem; height: .75rem; margin-top: -.375rem; border-radius: 50%; background-color: var(--brand-primary); box-shadow: 0 0 0 4px rgba(0, 99, 242, .3); }
.hn-model-bus { align-self: center; height: 1px; background-color: rgba(127, 180, 255, .6); }
.hn-model-list { grid-template-columns: 1fr; gap: .75rem; position: relative; }
.hn-model-list li { position: relative; padding-left: 2rem; }
.hn-model-list li::before { content: ""; position: absolute; left: 0; top: 0; bottom: -.75rem; width: 0; height: auto; margin: 0; border-radius: 0; border-left: 1px solid rgba(127, 180, 255, .6); background: none; }
.hn-model-list li:first-child::before { top: .75rem; }
.hn-model-list li:last-child::before { bottom: auto; height: .75rem; }
.hn-model-list li::after { content: ""; position: absolute; left: 0; top: .75rem; width: 1.25rem; border-top: 1px solid rgba(127, 180, 255, .6); }
.hn-model-list li > span::before { content: ""; position: absolute; left: 1.25rem; top: .5rem; width: .5rem; height: .5rem; border-radius: 2px; background-color: var(--brand-primary); }
.hn-vector { position: relative; flex: 1; min-height: 12.5rem; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, .1); background-color: rgba(0, 0, 0, .35); overflow: hidden; margin-top: 1.5rem; }
.hn-vector canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hn-vector-label { position: absolute; left: 1rem; top: .75rem; font-family: DM Mono, sans-serif; font-size: .75rem; letter-spacing: .5px; color: var(--contrast-tertiary); }

/* ---- business case: audience tabs (Webflow .w-tabs, behaviour from js/webflow.js) ---- */
.hn-tabs-menu { display: flex; flex-wrap: wrap; gap: .25rem; background-color: var(--background-secondary); border-radius: 2rem; padding: .5rem; }
.hn-tab-link { flex: 1 1 0; min-width: 8rem; display: flex; flex-direction: column; gap: .25rem; padding: .875rem .5rem; border-radius: 1.5rem; background-color: transparent; color: var(--background-opacity-80); text-align: left; text-decoration: none; transition: background-color .2s, color .2s; }
.hn-tab-link:hover { color: var(--background-default); }
.hn-tab-link.w--current { background-color: var(--contrast-primary); color: var(--background-default); box-shadow: 0 .25rem 1rem rgba(6, 6, 6, .08); }
.hn-tab-tag { font-family: DM Mono, sans-serif; font-size: .7rem; font-weight: 500; letter-spacing: .7px; text-transform: uppercase; color: var(--contrast-tertiary-dark); }
.hn-tab-link.w--current .hn-tab-tag { color: var(--brand-primary); }
/* sized so the widest label ("Parts Manufacturer") still fits one line once 6 tabs share a
   row at laptop widths (~992-1300px) — the 991px media query below only covers narrower still */
.hn-tab-name { font-size: .875rem; font-weight: 500; line-height: 1.125rem; }
.hn-tabs-content { margin-top: 1rem; }
.hn-tab-pane { background-color: var(--background-secondary); border-radius: 2rem; padding: 3rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2.5rem; align-items: start; }
.hn-tab-pane.w--tab-active { display: grid; } /* bundle.css hides .w-tab-pane; only the active pane lays out */
.hn-tab-pane .button { display: inline-block; color: var(--contrast-primary); text-decoration: none; }
.hn-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
.hn-checks li { display: flex; gap: .75rem; align-items: flex-start; color: var(--background-default); font-size: 1rem; line-height: 1.5rem; padding: .625rem 0; border-bottom: 1px solid var(--contrast-divider-dark); }
.hn-checks svg { flex: none; width: 1.375rem; height: 1.375rem; margin-top: .0625rem; color: var(--brand-primary); }

/* ---- Bluon vs AI comparison table ---- */
.hn-compare { border: 1px solid var(--contrast-divider-dark); border-radius: 2rem; overflow: hidden; background-color: var(--contrast-primary); }
.hn-compare-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(7rem, 1fr) minmax(7rem, 1fr); border-bottom: 1px solid var(--contrast-divider-dark); }
.hn-compare-row:last-child { border-bottom: 0; }
.hn-compare-head { background-color: var(--background-secondary); }
.hn-compare-cell { padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1rem; color: var(--background-default); }
.hn-compare-cell.is-center { justify-content: center; border-left: 1px solid var(--contrast-divider-dark); padding: 1rem; }
.hn-compare-cell.is-bluon { background-color: var(--additional-lightblue); }
.hn-compare-head .hn-compare-cell { font-weight: 500; }
.hn-compare-head .caption { color: var(--contrast-tertiary-dark); }
.hn-compare-icon { flex: none; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background-color: var(--background-secondary); color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; }
.hn-compare-area { display: flex; flex-direction: column; gap: .125rem; }
.hn-compare-area span:first-child { font-weight: 500; }
.hn-compare-area span:last-child { font-size: .875rem; line-height: 1.25rem; color: var(--contrast-tertiary-dark); }
.hn-mark { width: 1.875rem; height: 1.875rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.hn-mark svg { width: 1rem; height: 1rem; }
.hn-mark.is-yes { background-color: var(--brand-primary); color: var(--contrast-primary); }
.hn-mark.is-partial { background-color: var(--background-hover); color: var(--contrast-tertiary-dark); }
.hn-mark.is-no { background-color: #fdecec; color: #c62828; } /* no red-tint token in bundle.css; --red is pure red */
.hn-dot { width: .5625rem; height: .5625rem; border-radius: 50%; background-color: var(--brand-primary); display: inline-block; }

/* ---- CTA (existing .cta-wrapper design with copy + two visible buttons) ---- */
.hn-cta-grid { justify-content: space-between; }
.hn-cta-grid .paragraph { color: var(--contrast-secondary); }
.hn-cta-grid .cta-button-wrapper { display: flex; flex-wrap: wrap; gap: 1rem; flex: none; }
.hn-cta-grid .transparent-button.cta { text-decoration: none; }

@keyframes hn-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hn-stream-ring { animation: none; opacity: .35; } }

/* ---- responsive ---- */
@media screen and (max-width: 991px) {
  .hn-grid-4 { grid-template-columns: 1fr 1fr; }
  .hn-grid-2 { grid-template-columns: 1fr; }
  .hn-stream { height: 28rem; }
  .hn-stream-focus { top: 40%; } /* stats take two rows here; keep the device clear of them */
  .hn-stats { grid-template-columns: 1fr 1fr; padding: 1.25rem 1.5rem; }
  .hn-stat-n { font-size: 1.75rem; }
  .hn-tab-pane { grid-template-columns: 1fr; padding: 2rem; }
  .hn-list { grid-template-columns: 1fr; }
  .hn-model { grid-template-columns: minmax(8rem, 10rem) 2rem minmax(0, 1fr); }
  .hn-cta-grid { flex-direction: column; align-items: flex-start; }
  .hn-cta-grid .cta-button-wrapper { align-self: center; }
  /* below 992px, six single-line tabs no longer fit a shared row at any reasonable padding/font
     size (verified down to 768px) — rather than let the longer labels wrap to a second line and
     leave the row looking ragged, switch to the same scrollable-chip treatment used on phones:
     the desktop look (a white chip nested inside a gray pill, lifted with a shadow) is dropped
     rather than patched, since two close same-toned rounded corners plus a shadow is inherently
     fragile once the row scrolls. Each chip gets its own flat outline instead — the site's
     standard TabLink treatment (hairline border, border turns brand-primary when current) — no
     nesting, no shadow, nothing left for a scroll clip or a corner curve to catch on. */
  .hn-tabs-menu { flex-wrap: nowrap; gap: .5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; background-color: transparent; border-radius: 0; padding: 0; }
  .hn-tabs-menu::-webkit-scrollbar { display: none; }
  .hn-tab-link { flex: none; min-width: 8.5rem; padding: .75rem 1rem; border-radius: .75rem; border: 1px solid var(--contrast-divider-dark); scroll-snap-align: start; transition: background-color .2s, border-color .2s, color .2s; }
  .hn-tab-link.w--current { background-color: var(--background-secondary); border-color: var(--brand-primary); box-shadow: none; }
  .hn-tabs-content { margin-top: .75rem; }
}
@media screen and (max-width: 767px) {
  .hn-checks { grid-template-columns: 1fr; }
  /* model wiring stacks: image on top, an L-shaped bus down and across to the spine */
  .hn-model { grid-template-columns: 1fr; }
  .hn-model-image { width: 11rem; margin: 0 auto; }
  .hn-model-image::after { right: auto; left: 50%; top: auto; bottom: -.375rem; margin: 0 0 0 -.375rem; }
  .hn-model-bus { width: 50%; height: 1.75rem; justify-self: start; background: none; border-right: 1px solid rgba(127, 180, 255, .6); border-bottom: 1px solid rgba(127, 180, 255, .6); border-radius: 0 0 .75rem 0; }
  .hn-model-list li:first-child::before { top: 0; }
  .hn-compare-row { grid-template-columns: minmax(0, 1.6fr) minmax(4.5rem, .7fr) minmax(4.5rem, .7fr); }
  .hn-compare-cell { padding: .875rem 1rem; gap: .75rem; }
  .hn-compare-icon { display: none; }
  .hn-compare-head .hn-compare-cell.is-center { font-size: .875rem; text-align: center; }
}
@media screen and (max-width: 479px) {
  .hn-grid-4 { grid-template-columns: 1fr; }
  .hn-stream { height: 30rem; }
  .hn-stream-focus { width: 8rem; top: 36%; }
  .hn-stats { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .hn-stat-n { font-size: 1.5rem; }
  .hn-tab-link { min-width: 7.5rem; }
  .hn-tab-pane { padding: 1.5rem; }
  .hn-card { padding: 1.5rem; }
  .hn-card-dark { padding: 1.5rem; }
  .hn-hero-kicker { letter-spacing: -1px; }
}