/* ==========================================================================
   Cloudstore Central — homepage hero + platform walk-through schematic
   The home hero pairs copy + capability labels + trust line with a realistic
   product image. The simplified walk-through schematic (.hd) now lives on the
   How Cloudstore Works page inside a dark (inverse) section; its static SVG,
   caption and small-screen vertical step list work with NO JavaScript, and
   motion is a single restrained walk-through added progressively that always
   respects prefers-reduced-motion. Hero styles are scoped to .hero--home so
   interior page heroes are unaffected.
   ========================================================================== */

/* ----- layout (desktop ~45 / 55 split) ----- */
.hero--home > .container {
  padding: 60px;
}
@media (min-width: 64rem) {
  .hero--home .hero-split {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
}

.hero--home .hero-copy { min-width: 0; }

/* ----- benefit checklist (outcome-led marketing copy, not navigation) ----- */
.hero-benefits {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}
.hero-benefits__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--text-on-inverse);
  font-weight: var(--fw-medium);
  line-height: 1.45;
}
.hero-benefits .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--colour-cyan);
  flex: 0 0 auto;
  margin-top: 0.2em;
}

/* ----- hero product image (right column) ----- */
.hero-product { margin: 0; }
.hero-product__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  box-shadow: 0 24px 60px rgb(2 10 22 / 0.45);
}
@media (max-width: 63.99rem) {
  .hero-product { max-width: 34rem; margin-inline: auto; }
}

/* ----- walk-through placement on How Cloudstore Works ----- */
.hcw-walkthrough { max-width: 66rem; margin-inline: auto; }
.hcw-walkthrough__note { max-width: var(--width-narrow); }

/* ----- trust line ----- */
.hero-trust {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid color-mix(in srgb, #fff 14%, transparent);
  max-width: 48ch;
  color: var(--text-on-inverse);
  font-weight: var(--fw-medium);
}

/* ==========================================================================
   Hero schematic (figure)
   ========================================================================== */
.hd { margin: 0; display: grid; gap: var(--space-md); }

.hd-stage {
  position: relative;
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, #fff 4%, transparent);
  padding: clamp(0.75rem, 0.4rem + 1.2vw, 1.25rem);
}
.hd-svg {
  display: block;
  width: 100%;
  height: auto;
  /* reserve space to avoid layout shift before paint */
  aspect-ratio: 1120 / 660;
}

/* ----- zone labels ----- */
.hd-zone {
  fill: color-mix(in srgb, #fff 62%, transparent);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ----- nodes ----- */
.hd-node rect {
  fill: color-mix(in srgb, var(--colour-navy) 6%, #fff);
  stroke: color-mix(in srgb, var(--colour-navy) 35%, #fff);
  stroke-width: 1.4;
}
.hd-node-label {
  fill: var(--colour-navy);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--fw-semibold);
}
.hd-node-sub {
  fill: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
}
.hd-node--source rect { fill: color-mix(in srgb, var(--colour-cyan) 12%, #fff); stroke: color-mix(in srgb, var(--colour-cyan) 55%, #fff); }
.hd-node--prod rect,
.hd-node--ship rect { fill: #fff; }

/* central platform panel (dominant) */
.hd-core rect {
  fill: color-mix(in srgb, #05101e 78%, transparent);
  stroke: color-mix(in srgb, var(--colour-cyan) 55%, transparent);
  stroke-width: 1.6;
}
.hd-core-title {
  fill: #fff;
  font-family: var(--font-sans);
  font-size: 27px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}
.hd-core-sub {
  fill: #fdb9e4;
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: 0.04em;
}
/* Order Management — prominent */
.hd-node--primary rect {
  fill: color-mix(in srgb, var(--colour-cyan) 24%, #fff);
  stroke: var(--colour-cyan);
  stroke-width: 2.4;
}
.hd-node--primary .hd-node-label { font-weight: var(--fw-bold); }

/* visibility band + consolidated-view pill */
.hd-band rect {
  fill: color-mix(in srgb, var(--colour-teal) 16%, #05101e);
  stroke: color-mix(in srgb, var(--colour-teal) 70%, transparent);
  stroke-width: 1.5;
}
.hd-band-label {
  fill: #d7f3ee;
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
}
.hd-pill rect { fill: var(--colour-cyan); stroke: none; }
.hd-pill-label {
  fill: var(--colour-navy);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--fw-bold);
}

/* ----- flows (distinct colour AND line pattern; never colour alone) ----- */
.hd-flow { stroke: #9fb4cf; stroke-width: 1.8; opacity: 0.9; }
.hd-arrowhead { fill: #9fb4cf; }
.hd-flow--content { stroke: #aebfd6; stroke-width: 2; }
.hd-flow--order { stroke: #6f9bf0; stroke-width: 2; stroke-dasharray: 10 5; }
.hd-flow--job { stroke: var(--colour-cyan); stroke-width: 3; }
.hd-flow--candidate { stroke: #7c8597; stroke-width: 1.6; stroke-dasharray: 4 6; opacity: 0.7; }
.hd-flow--fulfil { stroke: #aebfd6; stroke-width: 2.2; stroke-dasharray: 12 6; }
.hd-flow--ship { stroke: #3fc7dd; stroke-width: 2.2; stroke-dasharray: 8 5; }
.hd-flow--status { stroke: #a06bff; stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.hd-flow--report { stroke: #cfe0f2; stroke-width: 2.4; stroke-dasharray: 2 8; stroke-linecap: round; }

/* ----- active (lit) states: one-shot pulse, cumulative steady highlight ----- */
.hd-flow.is-lit { stroke: var(--colour-cyan); opacity: 1; animation: hd-flow-pulse 1.4s ease 1; }
.hd-flow--report.is-lit,
.hd-flow--status.is-lit { stroke: #c2a3ff; }
@keyframes hd-flow-pulse {
  0% { stroke-width: 1.6; }
  45% { stroke-width: 5; }
  100% { stroke-width: 3.4; }
}
.hd-flow.is-lit:not(.hd-flow--job) { stroke-width: 3; }

.hd-node.is-lit rect { stroke: var(--colour-cyan); stroke-width: 2.6; animation: hd-node-pulse 1.4s ease 1; }
.hd-node.is-candidate rect { stroke: var(--colour-teal); stroke-width: 2; stroke-dasharray: 6 4; }
@keyframes hd-node-pulse {
  0% { stroke-width: 1.4; }
  45% { stroke-width: 4; }
  100% { stroke-width: 2.6; }
}

/* ----- replay control ----- */
.hd-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-sm); }
.hd-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--text-on-inverse);
  background: color-mix(in srgb, #fff 6%, transparent);
  border: 1px solid color-mix(in srgb, #fff 26%, transparent);
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
}
.hd-btn:hover { border-color: var(--colour-cyan); }
.hd-btn__icon { font-size: 1.1em; line-height: 1; }

/* ----- live caption (sits inline, left of the replay control) ----- */
.hd-caption__live {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--colour-cyan);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   Small screens: hide the wide SVG stage, show a simplified vertical sequence
   ========================================================================== */
.hd-mobile { display: none; }

@media (max-width: 63.99rem) {
  .hd-stage { display: none; }
  .hd-mobile {
    display: grid;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  .hd-mobile__step {
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, #fff 6%, transparent);
    border: 1px solid color-mix(in srgb, #fff 16%, transparent);
    color: var(--text-on-inverse);
    font-weight: var(--fw-medium);
  }
  .hd-mobile__step:nth-child(3) {
    border-color: var(--colour-cyan);
    background: color-mix(in srgb, var(--colour-cyan) 16%, transparent);
  }
  .hd-mobile__arrow { color: var(--colour-cyan); line-height: 1; font-size: 1.1rem; }
  .hd-mobile__loop {
    margin-top: 0.4rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-md);
    border: 1px dashed color-mix(in srgb, var(--colour-teal) 70%, transparent);
    color: #d7f3ee;
    font-size: var(--fs-small);
  }
}

/* ==========================================================================
   Reduced motion: no sequencing pulses; the steady, fully-lit diagram remains
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hd-flow.is-lit,
  .hd-node.is-lit rect { animation: none; }
}

/* ==========================================================================
   Home hero video banner: full-width looping brand video with CTA overlay.
   The headline text is baked into the video; an equivalent visually-hidden
   h1 precedes it in the markup. Buttons overlay the video on wide screens
   and drop below it on narrow screens.
   ========================================================================== */
.hero-video-banner { padding: 0; background: var(--colour-ink, #05060c); }
.hero-video-banner__frame { position: relative; }
.hero-video-banner__media {
  display: block;
  width: 100%;
  height: auto;
  background: #05060c;
}
/* ----- scrim: subtle liquid/grunge wash so the video reads as a backdrop
   and the wording stands out. Two layers on one pseudo-element:
   1. an organic SVG turbulence texture (very faint, soft-light blend feel
      approximated with low opacity) for the liquid/grunge character;
   2. a diagonal ink gradient, strongest behind the bottom-left wording.
   Decorative only: no pointer events, sits under the overlay + toggle. */
.hero-video-banner__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.00714 0.011904' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.02 0 0 0 0 0.024 0 0 0 0 0.047 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      rgba(5, 6, 12, 0.28) 0%,
      rgba(5, 6, 12, 0.34) 45%,
      rgba(5, 6, 12, 0.48) 75%,
      rgba(5, 6, 12, 0.58) 100%
    );
  background-size: 840px 840px, cover;
  opacity: 0.82;
  /* soften the footage (and any seams in it) so it reads as a backdrop */
  backdrop-filter: blur(2.5px) saturate(0.85);
  -webkit-backdrop-filter: blur(2.5px) saturate(0.85);
}
.hero-video-banner__toggle { z-index: 2; }
/* keep the wording/CTAs above the scrim at every breakpoint */
.hero-video-banner__overlay { position: relative; z-index: 1; }

/* ----- overlay: wording bottom-left (10% in, 20% up), CTAs beneath ----- */
.hero-video-banner__overlay {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--colour-ink, #05060c);
}

.hero-video-banner__copy { min-width: 0; }
.hero-video-banner__eyebrow {
  margin: 0 0 0.35em;
  color: #ff2cb2;
  font-size: clamp(0.86rem, 0.66rem + 0.9vw, 1.38rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-video-banner h1.hero-video-banner__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.8rem, 0.66rem + 3.5vw, 4.1rem);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.hero-video-banner__sub {
  margin: 0.4em 0 0;
  color: var(--text-on-inverse, rgba(255, 255, 255, 0.88));
  font-size: clamp(1.15rem, 0.84rem + 1.3vw, 1.8rem);
  line-height: 1.35;
}

.hero-video-banner__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
.hero-video-banner__toggle {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(5, 6, 12, 0.6);
  color: #fff;
  cursor: pointer;
}
.hero-video-banner__toggle:hover,
.hero-video-banner__toggle:focus-visible { background: rgba(5, 6, 12, 0.85); }
.hero-video-banner__toggle .hero-video-banner__toggle-play { display: none; }
.hero-video-banner__toggle.is-paused .hero-video-banner__toggle-play { display: block; }
.hero-video-banner__toggle.is-paused .hero-video-banner__toggle-pause { display: none; }

/* Wide screens: cap the banner height to the viewport (minus the header) so
   the overlay is never pushed below the fold on short/wide screens; the video
   crops with object-fit. Overlay sits 10% in from the left and 20% up from
   the bottom of the *visible* banner, wording with the CTA row beneath it.
   Text gets a shadow so it stays legible over any video frame. */
@media (min-width: 48em) {
  .hero-video-banner__media {
    height: min(56.25vw, calc(100svh - 4.5rem));
    min-height: 22rem;
    object-fit: cover;
  }
  .hero-video-banner__overlay {
    position: absolute;
    left: 10%;
    right: clamp(1.5rem, 4.7vw, 5rem);
    bottom: 20%;
    padding: 0;
    background: none;
    gap: clamp(0.9rem, 0.4rem + 1.2vw, 1.6rem);
  }
  .hero-video-banner__title { white-space: nowrap; }
  .hero-video-banner__eyebrow,
  .hero-video-banner__title,
  .hero-video-banner__sub {
    text-shadow: 0 2px 14px rgba(5, 6, 12, 0.8), 0 1px 3px rgba(5, 6, 12, 0.9);
  }
}

/* Over the video, the ghost button needs a dark scrim so its white text
   keeps AA contrast regardless of how bright the frame behind it is. */
.hero-video-banner .button-ghost.button-on-dark {
  background: rgba(5, 6, 12, 0.65);
}
.hero-video-banner .button-ghost.button-on-dark:hover,
.hero-video-banner .button-ghost.button-on-dark:focus-visible {
  background: rgba(5, 6, 12, 0.85);
}

/* Uniform CTA sizing: both hero buttons share the same width at every
   breakpoint (two equal columns; centred text; full-width when stacked). */
.hero-video-banner__actions .button {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  /* button size tracks the wording so the pair stays in proportion */
  font-size: clamp(0.95rem, 0.72rem + 0.75vw, 1.3rem);
  padding: 0.7em 1.4em;
}
@media (max-width: 30em) {
  .hero-video-banner__actions { grid-template-columns: 1fr; width: 100%; }
}
@media (max-width: 47.99em) {
  .hero-video-banner__actions { width: 100%; }
}