@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

/* =========================================================
   HeroPAK V2 — multi-page rebuild
   Navy-dominant, cream + amber accents, brand blue.
   Display + body type: Archivo (industrial). Mono: JetBrains.
   ========================================================= */

/* ----- Tokens ----- */
:root {
  --bg:        #0b1f3b;
  --bg-alt:    #0f2a50;
  --bg-deep:   #021935;
  --bg-deep-2: #07172e;
  --bg-light:  #FAFAF7;

  --ink:       #FAFAF7;
  --ink-2:     #d4dae6;
  --ink-3:     rgba(250,250,247,0.6);
  --ink-4:     rgba(250,250,247,0.35);
  --ink-inv:   #0b1f3b;

  --blue:        #698abc;
  --blue-2:      #8ca6cc;
  --blue-mid:    #3b5884;
  --blue-deep:   #021935;
  --blue-soft:   rgba(105,138,188,0.18);
  --brand:       #2596BE;   /* official heropak brand hex */
  --amber:       #FFCA00;
  --amber-deep:  #C99800;

  --line:    rgba(255,255,255,0.14);
  --line-2:  rgba(255,255,255,0.08);

  --f-disp: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --pad-x:   clamp(20px, 5vw, 88px);
  --pad-sec: clamp(72px, 7vw, 128px);
  --maxw:    1380px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- Archivo type weights (industrial) ----- */
.hero__title,
.sec-head__title,
.cta-block__title,
.fit-card__title,
.step__title,
.feature__title,
.stat-strip__num,
.ppwr__year {
  font-weight: 800;
  letter-spacing: -0.025em;
}
/* em accents stay medium for italic contrast */
.hero__title em,
.sec-head__title em,
.cta-block__title em,
.fit-card__title em {
  font-weight: 500;
}
/* Keep "Never Meant" together so the amber underline spans both words */
.hero__title em { white-space: nowrap; }
body { font-weight: 400; }
strong { font-weight: 700; }

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 500; }
p { margin: 0; }
::selection { background: var(--amber); color: var(--ink-inv); }

/* ----- Typography helpers ----- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow__bar {
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--ink);
}
.eyebrow--alt { color: rgba(250,250,247,.65); }
.eyebrow--alt .eyebrow__bar { background: var(--amber); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.kicker__pulse {
  width: 8px; height: 8px;
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,202,0,0.18);
  animation: pulse 1.8s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,202,0,0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(255,202,0,0.06); }
}

/* ----- Section heads ----- */
.sec-head {
  max-width: 880px;
}
.sec-head__title {
  font-family: var(--f-disp);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: 16px;
}
.sec-head__title em {
  font-style: italic;
  color: var(--blue);
}
.sec-head__sub {
  margin-top: 18px;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--ink-2);
  max-width: 640px;
}

.section {
  padding: var(--pad-sec) var(--pad-x);
  position: relative;
}
.section--alt { background: var(--bg-alt); }
.section--deep { background: var(--bg-deep); }
.section--tight { padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(56px, 6vw, 96px); }
.section__inner { max-width: var(--maxw); margin: 0 auto; }

/* =========================================================
   NAV — multi-page with dropdowns. Larger, bolder logo.
   ========================================================= */
.nav {
  position: sticky; top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  padding: 14px var(--pad-x);
  background: rgba(11,31,59,0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), padding .3s var(--ease);
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  padding-top: 10px; padding-bottom: 10px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
}
.nav__logo {
  height: 64px;          /* feedback: bigger + bolder */
  width: auto;
  display: block;
}
.nav.is-stuck .nav__logo { height: 52px; transition: height .3s var(--ease); }

.nav__links {
  display: flex;
  gap: 4px;
  justify-self: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.nav__item { position: relative; }
.nav__item > a,
.nav__item > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink-2);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav__item > a:hover,
.nav__item > button:hover,
.nav__item.is-active > a {
  background: var(--ink);
  color: var(--bg);
}
.nav__item > a[aria-current="page"] {
  background: var(--ink);
  color: var(--bg);
}
.nav__caret {
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s var(--ease);
}
.nav__item:hover .nav__caret { transform: rotate(225deg) translateY(0); }

.nav__menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 720px;
  padding: 24px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .25s var(--ease);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 32px;
}
/* invisible bridge so the cursor can cross the 12px gap without dropping :hover */
.nav__menu::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__menu--single { grid-template-columns: 1fr; min-width: 280px; }
.nav__menu-col h4 {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 6px 14px;
  margin-bottom: 4px;
}
.nav__menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-2);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav__menu a:hover { background: rgba(255,255,255,0.06); color: var(--ink); }
.nav__menu a .nav__menu-desc {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}

.nav__actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}

.nav__toggle { display: none; }

@media (max-width: 1080px) {
  .nav__links { display: none; }
  /* With the links removed from the grid flow, .nav__actions would auto-place
     into the middle `auto` column and float mid-bar. Pin it to the last
     column so it sits hard-right (still inset by --pad-x). */
  .nav__actions { grid-column: 3; }
  .nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.04);
  }
  .nav__toggle span,
  .nav__toggle span::before,
  .nav__toggle span::after {
    display: block;
    width: 20px; height: 1.5px;
    background: var(--ink);
    position: relative;
  }
  .nav__toggle span::before,
  .nav__toggle span::after {
    content: "";
    position: absolute; left: 0;
  }
  .nav__toggle span::before { top: -6px; }
  .nav__toggle span::after  { top:  6px; }
}

@media (max-width: 600px) {
  /* Phone: keep the bar uncluttered — logo on the left, hamburger on the
     right, nothing between. "Schedule a Demo" is removed from the bar here;
     it still lives in the mobile sheet as a full-width button. */
  .nav__actions .btn--accent { display: none; }
  .nav { gap: 16px; }
  .nav__logo { height: 48px; }
  .nav.is-stuck .nav__logo { height: 42px; }
}

/* mobile menu sheet (toggled via JS) */
.nav-sheet {
  position: fixed;
  inset: 0;
  background: var(--bg-deep);
  z-index: 60;
  padding: 24px var(--pad-x);
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform .35s var(--ease);
}
.nav-sheet.is-open { transform: translateY(0); }
.nav-sheet__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.nav-sheet__close { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.nav-sheet__close::before,
.nav-sheet__close::after {
  content: "";
  position: absolute;
  width: 18px; height: 1.5px;
  background: var(--ink);
}
.nav-sheet__close::before { transform: rotate(45deg); }
.nav-sheet__close::after  { transform: rotate(-45deg); }
.nav-sheet details {
  border-bottom: 1px solid var(--line-2);
  padding: 18px 0;
}
.nav-sheet details summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-disp);
  font-size: 22px;
  list-style: none;
  cursor: pointer;
}
.nav-sheet details summary::-webkit-details-marker { display: none; }
.nav-sheet details[open] summary::after { transform: rotate(45deg); }
.nav-sheet details summary::after {
  content: "+";
  font-family: var(--f-mono);
  font-size: 22px;
  color: var(--ink-3);
  transition: transform .25s var(--ease);
}
.nav-sheet a {
  display: block;
  padding: 10px 0 10px 14px;
  font-size: 15px;
  color: var(--ink-2);
}
.nav-sheet a:hover { color: var(--ink); }
/* The generic `.nav-sheet a` color (0,1,1) outweighs `.btn--accent` (0,1,0),
   leaving the Schedule a Demo button light-gray on amber. Re-assert the
   button's dark text with a more specific selector, hover included. */
.nav-sheet a.btn--accent,
.nav-sheet a.btn--accent:hover { color: var(--ink-inv); }
.nav-sheet .nav-sheet__group-top {
  display: block;
  padding: 18px 0;
  font-family: var(--f-disp);
  font-size: 22px;
  border-bottom: 1px solid var(--line-2);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: transform .25s var(--ease),
              background .25s var(--ease),
              color .25s var(--ease),
              border-color .25s var(--ease),
              box-shadow .25s var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn--lg { padding: 16px 24px; font-size: 15px; }
.btn--xl { padding: 20px 32px; font-size: 16px; }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--ink);
  color: var(--bg);
}
.btn--primary:hover {
  background: var(--blue-2);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -12px rgba(11,31,59,0.7);
}

.btn--accent {
  background: var(--amber);
  color: var(--ink-inv);
}
.btn--accent:hover {
  background: var(--amber-deep);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -12px rgba(201,152,0,0.5);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.btn--link {
  padding: 0;
  background: none;
  color: var(--blue-2);
  border-radius: 0;
  position: relative;
}
.btn--link::after {
  content: " →";
  transition: transform .25s var(--ease);
  display: inline-block;
}
.btn--link:hover::after { transform: translateX(4px); }

/* =========================================================
   HERO (homepage)
   ========================================================= */
.hero {
  position: relative;
  padding: clamp(36px, 4.5vw, 64px) var(--pad-x) clamp(56px, 7vw, 96px);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 30% 30%, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, black 30%, transparent 70%);
}
.hero__glow {
  position: absolute;
  top: -10%; right: -10%;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(105,138,188,0.32), transparent 60%);
  filter: blur(40px);
}
.hero__glow--brand {
  top: auto; right: auto;
  bottom: -20%; left: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(37,150,190,0.25), transparent 60%);
}

.hero__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.hero__title {
  font-family: var(--f-disp);
  font-weight: 500;
  font-size: clamp(46px, 8vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 28px 0;
  color: var(--ink);
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--blue);
  position: relative;
}
.hero__title em::after {
  content: "";
  position: absolute;
  bottom: 0.04em; left: 0; right: 0;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  animation: underline 1.2s 1.2s var(--ease) forwards;
}
@keyframes underline { to { transform: scaleX(1); } }

.hero__sub {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink-2);
  max-width: 560px;
}
.hero__sub strong { color: var(--ink); font-weight: 600; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 620px;
  width: 100%;
  margin-left: auto;
}
.hero__product {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,0.45));
  animation: float 6s var(--ease) infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.hero__product-tag {
  position: absolute;
  top: 24px; left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(11,31,59,0.7);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero__product-tag::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,202,0,0.2);
}

/* ----- technical-frame product showcase (ported from supermarket-demo) ----- */
.sm-showcase__visual {
  margin: 0;
  position: relative;
  margin-left: auto;
  /* nudge down ~half the stat-strip height so the frame reads as centered
     against the kicker → CTA block rather than the full copy column */
  margin-top: clamp(32px, 6vw, 96px);
  width: 100%;
  max-width: 580px;
  perspective: 1200px;
}
.sm-showcase__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  background:
    radial-gradient(circle at 50% 60%, rgba(37,150,190,0.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(24px, 4vw, 56px);
  isolation: isolate;
  /* (1) cursor tilt — vars driven by JS, eased so it settles smoothly */
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .22s var(--ease);
  will-change: transform;
}
.sm-showcase__frame::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(250,250,247,0.06);
  pointer-events: none;
}
/* (3) corners "focus in" once on load — start offset outward + invisible,
   then snap into place, staggered like a camera locking focus. */
.sm-showcase__corner {
  position: absolute;
  width: 18px; height: 18px;
  border-color: var(--amber);
  opacity: 0;
  transform: translate(var(--cdx, 0), var(--cdy, 0));
  animation: sm-corner-in .55s var(--ease) forwards;
}
.sm-showcase__corner--tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; --cdx: -20px; --cdy: -20px; animation-delay: .35s; }
.sm-showcase__corner--tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; --cdx: 20px; --cdy: -20px; animation-delay: .45s; }
.sm-showcase__corner--bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; --cdx: -20px; --cdy: 20px; animation-delay: .55s; }
.sm-showcase__corner--br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; --cdx: 20px; --cdy: 20px; animation-delay: .65s; }
@keyframes sm-corner-in {
  to { opacity: 1; transform: translate(0, 0); }
}

.sm-showcase__crosshair {
  position: absolute;
  background: rgba(250,250,247,0.10);
  pointer-events: none;
}
/* (2) crosshair tracks the cursor — vars driven by JS, default centred */
.sm-showcase__crosshair--h { left: 8%; right: 8%; top: var(--cross-y, 50%); height: 1px; transition: top .2s var(--ease); }
.sm-showcase__crosshair--v { top: 8%; bottom: 8%; left: var(--cross-x, 50%); width: 1px; transition: left .2s var(--ease); }

.sm-showcase__glow {
  position: absolute;
  inset: 10% 10%;
  background: radial-gradient(circle, rgba(37,150,190,0.25), transparent 70%);
  filter: blur(40px);
  z-index: 0;
}

.sm-showcase__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.5));
  animation: sm-float 7s var(--ease) infinite;
}
@keyframes sm-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(-0.3deg); }
}

.sm-showcase__tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(2,25,53,0.75);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-radius: 2px;
  z-index: 2;
}
.sm-showcase__tag span {
  width: 6px; height: 6px;
  background: var(--amber);
  border-radius: 50%;
}
.sm-showcase__tag--tl { top: 18px; left: 18px; }
.sm-showcase__tag--br { bottom: 18px; right: 18px; }

@media (max-width: 880px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { margin: 0 auto; max-width: 420px; }
  .sm-showcase__visual { margin: 0 auto; max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  /* the global reduced-motion rule kills `animation`, which would leave the
     focus-in corners stuck invisible/offset — restore them to final state,
     and neutralise the tilt transform so the frame sits flat. */
  .sm-showcase__img { animation: none; }
  .sm-showcase__corner { opacity: 1; transform: none; }
  .sm-showcase__frame { transform: none; }
  .sm-showcase__crosshair--h { top: 50%; }
  .sm-showcase__crosshair--v { left: 50%; }
}

/* =========================================================
   SUPPORT STRIP — "Supported by" institutional logos
   (replaces V1 "trust" strip; framing softer since these
   are funders / accelerators / research partners, not customers)
   ========================================================= */
.support {
  padding: 48px var(--pad-x);
  background: var(--bg-deep);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.support__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.support__label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 28px;
}
/* Institutional-supporter convention: original-colour logos on individual
   soft cards. Cards keep the navy section calm; logos stay fully legible. */
/* exactly 9 supporters → balanced 3×3 grid (no orphan row) */
.support__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.support__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 28px;
  min-height: 132px;
  background: #fafafa;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), filter .28s var(--ease);
  filter: grayscale(0.35);
}
.support__card img {
  max-height: 60px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform .3s var(--ease);
}
.support__name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 10px 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: #5a6473;
  background: linear-gradient(180deg, transparent, rgba(250,250,250,0.96) 45%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  pointer-events: none;
}
.support__card:hover {
  transform: translateY(-4px);
  filter: grayscale(0);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.55);
}
.support__card:hover img { transform: scale(1.12) translateY(-6px); }
.support__card:hover .support__name { opacity: 1; transform: none; }
@media (max-width: 720px) {
  .support__grid { grid-template-columns: repeat(2, 1fr); }
  .support__card { min-height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .support__card:hover img { transform: none; }
}

/* ----- SUPPORT V2: ghost wall → bloom on hover (comparison variant) ----- */
.support--ghost { border-top: none; }
.support__grid--ghost {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.support__card--ghost {
  position: relative;
  display: grid;
  place-items: center;
  padding: 26px 28px;
  min-height: 150px;
  /* rest: no card — logos float ghosted on the navy */
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background .3s var(--ease), border-color .3s var(--ease);
}
.support__card--ghost .support__logo {
  grid-area: 1 / 1;            /* stack both logos in the same cell, centred */
  max-height: 58px;
  max-width: calc(100% - 56px);
  width: auto;
  object-fit: contain;
  transition: opacity .32s var(--ease), transform .32s var(--ease),
              max-height .32s var(--ease), max-width .32s var(--ease);
}
.support__logo--mono {
  opacity: 0.85;         /* brighter ghost at rest */
}
.support__logo--full {
  opacity: 0;            /* hidden until bloom */
}
.support__card--ghost:hover {
  transform: translateY(-4px);
  background: #fafafa;
  border-color: var(--line-2);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.55);
}
.support__card--ghost:hover .support__logo--mono {
  opacity: 0;
  transform: scale(1.06);
}
/* grow via max-height/width (re-renders sharp) instead of transform:scale
   (which would just upscale + soften the bitmap) — bigger AND crisper */
.support__card--ghost:hover .support__logo--full {
  opacity: 1;
  max-height: 92px;
  max-width: calc(100% - 36px);
  transform: translateY(-4px);
}
.support__card--ghost .support__name { color: #5a6473; }
.support__card--ghost:hover .support__name { opacity: 1; transform: none; }
@media (max-width: 720px) {
  .support__grid--ghost { grid-template-columns: repeat(2, 1fr); }
  .support__card--ghost { min-height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .support__card--ghost:hover .support__logo--mono { transform: none; }
  .support__card--ghost:hover .support__logo--full { transform: none; }
}

/* =========================================================
   FEATURE GRID — generic 3-up cards
   ========================================================= */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
@media (max-width: 920px) { .feature-grid { grid-template-columns: 1fr; } }
.feature {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,0.02);
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.feature:hover {
  transform: translateY(-4px);
  border-color: var(--blue-2);
  background: rgba(105,138,188,0.06);
}
.feature__icon {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue-2);
  margin-bottom: 20px;
}
.feature__icon svg { width: 22px; height: 22px; }
.feature__title {
  font-family: var(--f-disp);
  font-size: 22px;
  margin-bottom: 8px;
}
.feature__body { color: var(--ink-2); font-size: 15px; }

/* =========================================================
   STEPS — "The Solution" process strip
   (icons: Audit / Design / Prototype / Pilot / ...)
   ========================================================= */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 64px;
  position: relative;
  list-style: none;
  padding: 0;
}
@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr; gap: 32px; }
}
.step {
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  position: relative;
  background: rgba(255,255,255,0.015);
  transition: border-color .3s var(--ease),
              transform .3s var(--ease),
              background .3s var(--ease);
}
.step:hover {
  border-color: var(--amber);
  transform: translateY(-4px);
  background: linear-gradient(135deg, rgba(255,202,0,0.055), rgba(255,255,255,0.012));
}
/* directional connector — chevron in the gap pointing to the next step */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -25px;
  width: 9px; height: 9px;
  border-top: 2px solid var(--line);
  border-right: 2px solid var(--line);
  transform: translateY(-50%) rotate(45deg);
  transition: border-color .3s var(--ease);
  pointer-events: none;
}
.step:hover::after { border-color: var(--amber); }
@media (max-width: 880px) {
  .step:not(:last-child)::after {
    top: auto; bottom: -21px;
    right: 50%;
    transform: translateX(50%) rotate(135deg);
  }
}
.step__num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink-inv);
  font-family: var(--f-mono);
  font-weight: 600;
  transition: box-shadow .3s var(--ease);
  font-size: 14px;
  margin-bottom: 16px;
}
.step__title {
  font-family: var(--f-disp);
  font-size: 20px;
  margin-bottom: 6px;
}
.step__body { color: var(--ink-2); font-size: 14px; }
.step:hover .step__num { box-shadow: 0 0 0 6px rgba(255,202,0,0.16); }
.step--pending { opacity: 0.55; border-style: dashed; }
.step--pending .step__num { background: transparent; border: 1.5px dashed var(--line); color: var(--ink-3); }

/* =========================================================
   PRODUCT SHOWCASE (ClickLOK feature on home, product listings)
   ========================================================= */
.showcase {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  margin-top: 80px;
}
@media (max-width: 920px) { .showcase { grid-template-columns: 1fr; } }
.showcase--reverse { direction: rtl; }
.showcase--reverse > * { direction: ltr; }
.showcase__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  background:
    radial-gradient(circle at 30% 30%, rgba(105,138,188,0.22), transparent 60%),
    var(--bg-alt);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  padding: 8%;
}
.showcase__img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.4));
}
.showcase__title {
  font-family: var(--f-disp);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 14px 0 18px;
}
.showcase__sub {
  font-size: 17px;
  color: var(--ink-2);
  margin-bottom: 24px;
}
.showcase__bullets {
  display: grid;
  gap: 12px;
  margin-bottom: 32px;
}
.showcase__bullets li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--ink-2);
}
.showcase__bullets li::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--amber) 40%, transparent 41%);
  margin-top: 6px;
}

/* =========================================================
   HUB CARDS — Industry / Solutions / Resources / Company landing
   ========================================================= */
.hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 56px;
}
.hub__card {
  display: block;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,0.02);
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
  position: relative;
  overflow: hidden;
}
.hub__card::after {
  content: " →";
  position: absolute;
  top: 28px; right: 28px;
  font-size: 16px;
  color: var(--ink-3);
  transition: transform .3s var(--ease), color .3s var(--ease);
}
.hub__card:hover {
  transform: translateY(-6px);
  border-color: var(--blue-2);
  background: rgba(105,138,188,0.08);
}
.hub__card:hover::after { color: var(--amber); transform: translateX(6px); }
.hub__card-eyebrow {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.hub__card-title {
  font-family: var(--f-disp);
  font-size: 26px;
  line-height: 1.05;
  margin-bottom: 8px;
}
.hub__card-body { color: var(--ink-2); font-size: 14px; }
.hub__card-thumb {
  height: 140px;
  margin: -8px -8px 16px;
  border-radius: 14px;
  background: var(--bg-alt);
  display: grid; place-items: center;
  overflow: hidden;
}
.hub__card-thumb img {
  max-height: 110px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,0.45));
}

/* =========================================================
   PPWR SECTION
   ========================================================= */
.ppwr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 920px) { .ppwr { grid-template-columns: 1fr; } }
.ppwr__pts {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}
.ppwr__pts li {
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 28px;
  align-items: center;
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.ppwr__pts li:hover {
  border-color: rgba(255,202,0,0.4);
  transform: translateY(-3px);
  background: linear-gradient(135deg, rgba(255,202,0,0.06), rgba(255,255,255,0.012));
}
.ppwr__lead {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ppwr__year {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ppwr__fig {
  font-family: var(--f-disp);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 78px);
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--amber);
}
.ppwr__fig em {
  font-style: normal;
  font-size: 0.42em;
  color: var(--amber-deep);
  vertical-align: baseline;
  margin-left: 1px;
}
.ppwr__fig--word {
  font-size: clamp(34px, 4vw, 52px);
  font-style: italic;
  color: var(--blue-2);
}
.ppwr__desc {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}
.ppwr__desc strong { color: var(--ink); }
.ppwr__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: var(--blue-2);
}
.ppwr__link:hover { color: var(--amber); }
.ppwr__link::after { content: "↗"; font-family: var(--f-mono); }

/* =========================================================
   CALCULATOR V2
   ========================================================= */
.calc {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  margin-top: 48px;
}
@media (max-width: 980px) { .calc { grid-template-columns: 1fr; } }
.calc__form {
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,0.02);
}
.calc__row {
  display: grid;
  gap: 8px;
  margin-bottom: 24px;
}
.calc__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.calc__hint { font-family: var(--f-body); font-size: 12px; color: var(--ink-4); text-transform: none; letter-spacing: 0; }
.calc__input,
.calc__select {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  /* render native parts (spinner, dropdown list) on a dark scheme so they
     don't fall back to the browser's white system widgets */
  color-scheme: dark;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.calc__select {
  /* custom caret — replaces the native one removed by appearance:none */
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d4dae6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.calc__select option {
  /* the popup option list ignores the control's bg in most browsers */
  background: var(--bg-deep);
  color: var(--ink);
}
/* hide the native number spinners — typing only, consistent with the dark form */
.calc__input[type="number"]::-webkit-outer-spin-button,
.calc__input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.calc__input[type="number"] { -moz-appearance: textfield; }
.calc__input:focus,
.calc__select:focus {
  outline: none;
  border-color: var(--blue-2);
  background-color: rgba(105,138,188,0.06);
}
/* visible keyboard-focus ring (mouse focus stays on the subtler border change) */
.calc__input:focus-visible,
.calc__select:focus-visible,
.calc__slider:focus-visible {
  outline: none;
  border-color: var(--blue-2);
  box-shadow: 0 0 0 3px rgba(105,138,188,0.35);
}
.calc__slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  margin: 16px 0 4px;
  /* --fill is set per-slider in JS (HeroPakCalc); track filled up to the thumb */
  background: linear-gradient(
    to right,
    var(--amber) 0%,
    var(--amber) var(--fill, 50%),
    var(--line) var(--fill, 50%),
    var(--line) 100%
  );
}
.calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--amber);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255,202,0,0.4);
}
.calc__slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--amber);
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 12px rgba(255,202,0,0.4);
}
.calc__slider-ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
}

.calc__result {
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at top right, rgba(105,138,188,0.18), transparent 60%),
    var(--bg-deep);
  position: sticky;
  top: 100px;
  height: max-content;
  /* if the panel (with assumptions open) is taller than the viewport,
     keep it scrollable instead of clipping the bottom off-screen */
  max-height: calc(100vh - 124px);
  overflow-y: auto;
}
@media (max-width: 980px) {
  .calc__result { position: static; max-height: none; overflow: visible; }
}
.calc__result-eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.calc__result-num {
  display: block;
  font-family: var(--f-disp);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--amber);
  margin: 12px 0 4px;
}
.calc__result-sub { color: var(--ink-2); font-size: 14px; }
.calc__result-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0;
  padding: 24px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.calc__result-split dt {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.calc__result-split dd {
  margin: 4px 0 0;
  font-family: var(--f-disp);
  font-size: 22px;
}
.calc__assumptions {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
}
.calc__assumptions summary {
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  list-style: none;
}
.calc__assumptions summary::-webkit-details-marker { display: none; }
.calc__assumptions summary::after { content: " +"; }
.calc__assumptions[open] summary::after { content: " −"; }
.calc__assumptions ul { margin-top: 14px; display: grid; gap: 8px; font-size: 13px; color: var(--ink-2); }
.calc__assumptions ul li::before {
  content: "—";
  margin-right: 8px;
  color: var(--ink-4);
}

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.faq { display: grid; gap: 12px; margin-top: 48px; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--blue-2); }
.faq__q {
  padding: 22px 26px;
  font-family: var(--f-disp);
  font-size: 19px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  font-family: var(--f-mono);
  font-size: 22px;
  color: var(--ink-3);
  transition: transform .25s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); color: var(--amber); }
.faq__a {
  padding: 0 26px 24px;
  color: var(--ink-2);
  font-size: 15px;
  max-width: 760px;
}

/* =========================================================
   FORMS — contact, demo
   ========================================================= */
.form {
  display: grid;
  gap: 20px;
  max-width: 640px;
}
.form__row {
  display: grid;
  gap: 8px;
}
.form__row--split {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) { .form__row--split { grid-template-columns: 1fr; } }
.form__label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.form__input,
.form__textarea,
.form__select {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  transition: border-color .2s var(--ease);
}
.form__textarea { min-height: 140px; resize: vertical; }
.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--blue-2);
  background: rgba(105,138,188,0.06);
}

/* =========================================================
   PAGE HEADER (interior pages)
   ========================================================= */
.page-head {
  position: relative;
  padding: clamp(80px, 9vw, 140px) var(--pad-x) clamp(48px, 6vw, 80px);
  background:
    radial-gradient(ellipse at 10% 20%, rgba(37,150,190,0.15), transparent 60%),
    radial-gradient(ellipse at 90% 80%, rgba(105,138,188,0.2), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--line-2);
  overflow: hidden;
}
.page-head__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}
.page-head__crumbs {
  display: flex;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 24px;
}
.page-head__crumbs a:hover { color: var(--ink); }
.page-head__crumbs span { color: var(--ink-4); }
.page-head__title {
  font-family: var(--f-disp);
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  max-width: 16ch;
}
.page-head__sub {
  margin-top: 22px;
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--ink-2);
  max-width: 640px;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line-2);
  padding: 80px var(--pad-x) 48px;
}
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 980px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer__inner { grid-template-columns: 1fr; }
}
.footer__brand img { height: 44px; width: auto; margin-bottom: 16px; }
.footer__brand p { color: var(--ink-3); font-size: 14px; max-width: 280px; }
.footer__col h5 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.footer__col a {
  display: block;
  padding: 6px 0;
  color: var(--ink-2);
  font-size: 14px;
}
.footer__col a:hover { color: var(--ink); }
.footer__base {
  max-width: var(--maxw);
  margin: 60px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.footer__base a:hover { color: var(--ink); }

/* =========================================================
   COOKIE BANNER (placeholder)
   ========================================================= */
.cookie {
  position: fixed;
  bottom: 24px; left: 24px; right: 24px;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 24px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.6);
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-2);
  transform: translateY(140%);
  transition: transform .4s var(--ease);
}
.cookie.is-visible { transform: translateY(0); }
.cookie a { color: var(--blue-2); text-decoration: underline; }
.cookie__actions { display: flex; gap: 8px; }
.cookie__btn {
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.cookie__btn--primary { background: var(--ink); color: var(--bg); }
.cookie__btn--ghost { border: 1px solid var(--line); color: var(--ink-2); }

/* =========================================================
   BACK-TO-TOP BUTTON (feedback request)
   ========================================================= */
.to-top {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink-inv);
  display: inline-flex;
  align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  z-index: 70;
}
.to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.to-top:hover { background: var(--amber-deep); }
.to-top::before {
  content: "";
  width: 10px; height: 10px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg) translate(2px, 2px);
}

/* =========================================================
   FINAL CTA BLOCK
   ========================================================= */
.cta-block {
  /* width keeps a --pad-x gutter on both sides at every viewport
     (the wrapping section has no horizontal padding), while staying
     centered and capped at --maxw. Replaces a broken double margin
     that collapsed the side spacing to 0 on phones/tablets. */
  width: min(var(--maxw), 100% - (var(--pad-x) * 2));
  margin: 0 auto var(--pad-sec);
  padding: clamp(48px, 6vw, 88px);
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255,202,0,0.15), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(105,138,188,0.25), transparent 50%),
    var(--bg-deep);
  border: 1px solid var(--line);
  text-align: center;
}
.cta-block__title {
  font-family: var(--f-disp);
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin: 0 auto 18px;
}
.cta-block__sub {
  color: var(--ink-2);
  margin-bottom: 32px;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
.cta-block__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* =========================================================
   STAT STRIP — homepage hero footer stats
   ========================================================= */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
@media (max-width: 880px) { .stat-strip { grid-template-columns: repeat(2, 1fr); row-gap: 24px; } }
.stat-strip__cell {
  padding: 0 16px;
  position: relative;
  text-align: center;
}
.stat-strip__cell:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--line);
}
@media (max-width: 880px) {
  .stat-strip__cell:nth-child(2)::after { display: none; }
}
.stat-strip__num {
  display: block;
  font-family: var(--f-disp);
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stat-strip__lbl {
  display: block;
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* =========================================================
   LEGAL PAGES (imprint, privacy)
   ========================================================= */
.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px var(--pad-x) 80px;
}
.legal h2 {
  font-family: var(--f-disp);
  font-size: 28px;
  margin: 40px 0 16px;
  letter-spacing: -0.015em;
}
.legal h3 { font-family: var(--f-disp); font-size: 20px; margin: 24px 0 10px; }
.legal p, .legal li {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 12px;
}
.legal ul { padding-left: 20px; }
.legal ul li { list-style: disc; }
.legal a { color: var(--blue-2); text-decoration: underline; }

/* =========================================================
   PLACEHOLDER NOTICE (for pages awaiting content)
   ========================================================= */
/* Lead paragraph — bigger / lighter than body, used to emphasise a single Copy doc paragraph in a section. */
.lead-para {
  font-family: var(--f-disp);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.42;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-top: 18px;
}

.placeholder-notice {
  margin: 24px 0;
  padding: 18px 22px;
  border: 1px dashed rgba(255,202,0,0.4);
  border-radius: 12px;
  background: rgba(255,202,0,0.05);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--amber);
}
.placeholder-notice strong { color: var(--ink); }

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   FIT — editorial trio of cards
   Numbered 01/02/03 cards with hover lift, animated rule
   draw, amber accent. Used on Home → "Where HeroPAK fits"
   and reusable on industry/solutions index pages.
   ========================================================= */
.fit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.14);
  margin-top: clamp(40px, 5vw, 64px);
  border-radius: 2px;
  overflow: hidden;
}

.fit-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 22px;
  padding: clamp(26px, 2.6vw, 40px);
  background: var(--bg-deep);
  transition: background .3s var(--ease);
  isolation: isolate;
  min-height: 440px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.fit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(37,150,190,0.12), transparent 60%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.fit-card:hover { background: var(--bg-deep-2); }
.fit-card:hover::before { opacity: 1; }

.fit-card__num {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: rgba(250,250,247,0.35);
  transition: color .3s var(--ease);
  display: flex;
  align-items: center;
  gap: 10px;
}
.fit-card__num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}
.fit-card:hover .fit-card__num { color: var(--amber); }

.fit-card__thumb {
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fit-card__thumb img {
  max-width: 78%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.35));
  transition: transform .5s var(--ease);
}
.fit-card:hover .fit-card__thumb img {
  transform: translateY(-6px) scale(1.04);
}

.fit-card__thumb--mark { color: var(--brand); }
.fit-card__thumb--mark svg {
  width: 130px; height: 130px;
  transition: transform .6s var(--ease), color .3s var(--ease);
}
.fit-card:hover .fit-card__thumb--mark { color: var(--amber); }
.fit-card:hover .fit-card__thumb--mark svg { transform: rotate(45deg); }

.fit-card__copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fit-card__title {
  font-family: var(--f-disp);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 30px);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.fit-card__body {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

.fit-card__cta {
  color: rgba(250,250,247,0.6);
  display: inline-flex;
  align-items: center;
  transition: color .3s var(--ease);
}
.fit-card__cta > span {
  width: 28px; height: 1px;
  background: currentColor;
  position: relative;
  display: inline-block;
  transition: width .3s var(--ease);
}
.fit-card__cta > span::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.2px solid currentColor;
  border-top: 1.2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.fit-card:hover .fit-card__cta { color: var(--amber); }
.fit-card:hover .fit-card__cta > span { width: 44px; }

.fit-card__rule {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--amber);
  transition: width .45s var(--ease);
}
.fit-card:hover .fit-card__rule { width: 100%; }

.fit-more {
  margin-top: clamp(32px, 4vw, 48px);
  display: flex;
  justify-content: flex-end;
}
.fit-more .btn--link {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.fit-more .btn--link:hover { color: var(--amber); }

@media (max-width: 1080px) {
  .fit-grid { grid-template-columns: 1fr; }
  .fit-card { min-height: auto; }
  .fit-more { justify-content: flex-start; }
}

/* =========================================================
   PRODUCT DATASHEET  (Solutions → product pages)
   Industrial spec-sheet treatment. Replaces the old
   showcase + bare <table> layout on every product page.
   Product PNGs are transparent — framed directly on navy.
   ========================================================= */

/* staggered reveal delays (works with the shared .reveal system) */
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }

/* studio plate — turns the white-bg product photos into a
   deliberate technical object instead of a floating cutout */
/* The product PNGs are fully transparent. They sit directly on a navy
   "specimen" frame that matches the site — a faint center backlight so
   the translucent product reads on dark, a subtle blueprint grid, and
   technical corner brackets. No white, no mat. */
.plate{
  position:relative;
  padding:clamp(26px,4vw,52px);
  background:
    radial-gradient(120% 85% at 50% 38%, rgba(105,138,188,.20), rgba(11,31,59,0) 62%),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.035) 31px 32px),
    repeating-linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.035) 31px 32px),
    linear-gradient(180deg,#0e2547,#0a1b35);
  border:1px solid var(--line); border-radius:10px;
  display:grid; place-items:center; overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 30px 60px -30px rgba(0,0,0,.7);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease),
             border-color .45s var(--ease);
}
/* technical corner brackets — top-left + bottom-right */
.plate::before,.plate::after{
  content:""; position:absolute; width:22px; height:22px; pointer-events:none;
  border-color:rgba(255,255,255,.55); opacity:.55;
  transition:width .4s var(--ease), height .4s var(--ease),
             border-color .4s var(--ease), opacity .4s var(--ease);
}
.plate::before{ top:14px; left:14px; border-left:1.5px solid; border-top:1.5px solid; }
.plate::after{ bottom:14px; right:14px; border-right:1.5px solid; border-bottom:1.5px solid; }
.plate__cap{
  position:absolute; bottom:13px; left:16px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--ink-4);
}
.plate img{
  max-width:100%; max-height:100%; width:auto;
  min-width:0; min-height:0;          /* let the image shrink inside the
                                         framed box — without this, grid's
                                         min-height:auto keeps it at its
                                         intrinsic size and it gets clipped */
  object-fit:contain;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.55));
  transition:transform .5s var(--ease);
}

/* hover — the frame becomes a precision instrument */
.dsx-plate:hover, .dsx-plate--solo:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.28);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 46px 84px -26px rgba(0,0,0,.85);
}
.dsx-plate:hover::before, .dsx-plate:hover::after,
.dsx-plate--solo:hover::before, .dsx-plate--solo:hover::after{
  width:36px; height:36px; border-color:var(--amber); opacity:1;
}
.dsx-plate:hover img, .dsx-plate--solo:hover img{ transform:scale(1.045); }

.dsx{ padding:clamp(56px,7vw,104px) var(--pad-x); }
.dsx-wrap{ max-width:1200px; margin:0 auto; }

.dsx-crumbs{
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink-4); margin-bottom:38px;
}
.dsx-crumbs a{ color:var(--ink-3); }
.dsx-crumbs a:hover{ color:var(--ink); }
.dsx-crumbs span{ margin:0 8px; color:var(--ink-4); }

.dsx-head{
  display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(32px,5vw,72px);
  align-items:start;
}
.dsx-code{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--amber);
  border:1px solid var(--line); border-radius:999px; padding:6px 14px;
}
.dsx-code::before{ content:""; width:6px; height:6px; background:var(--amber); border-radius:50%; }
.dsx-title{
  font-family:var(--f-disp); font-weight:800; letter-spacing:-0.03em;
  font-size:clamp(40px,6vw,76px); line-height:1.02; margin:22px 0 0;
}
.dsx-sub{
  color:var(--ink-2); font-size:clamp(15px,1.4vw,18px);
  letter-spacing:0.01em; margin-top:16px; max-width:42ch;
}
.dsx-lede{ color:var(--ink-3); font-size:15px; line-height:1.75; margin-top:22px; max-width:58ch; }
.dsx-lede + .dsx-lede{ margin-top:14px; }
.dsx-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }

.dsx-rail{
  border:1px solid var(--line); border-radius:6px;
  background:linear-gradient(180deg,rgba(140,166,204,0.06),rgba(140,166,204,0));
}
.dsx-rail__hd{
  padding:14px 18px; border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--ink-3);
}
.dsx-stat{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:16px 18px; border-bottom:1px solid var(--line-2);
}
.dsx-stat:last-child{ border-bottom:0; }
.dsx-stat__k{
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink-4); flex:none;
}
.dsx-stat__v{
  font-family:var(--f-disp); font-weight:800; letter-spacing:-0.02em;
  font-size:clamp(16px,1.9vw,22px); color:var(--ink); text-align:right;
}
.dsx-stat__v small{ font-size:12px; font-weight:500; color:var(--ink-3); letter-spacing:0; }

.dsx-plates{
  display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(16px,2.5vw,32px);
  align-items:center; margin-top:clamp(48px,6vw,84px);
}
.dsx-plate{ aspect-ratio:4/5; }
.dsx-plate img{ max-height:100%; }
.dsx-plate--packed img{ max-height:64%; }
.dsx-plate--solo{
  aspect-ratio:16/10; max-width:880px;
  margin:clamp(48px,6vw,84px) auto 0;
}
.dsx-plate--solo img{ max-height:100%; }
.dsx-plate__tag{
  position:absolute; top:14px; right:14px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--ink-inv);
  background:rgba(255,202,0,.9); padding:5px 9px; border-radius:3px; font-weight:600;
}
.dsx-ratio{ text-align:center; min-width:96px; }
.dsx-ratio__l{
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--ink-3);
}
.dsx-ratio__bar{
  height:1px; background:var(--line); position:relative; margin:0 0 14px;
}
.dsx-ratio__bar::after{
  content:""; position:absolute; right:0; top:-3px;
  border:4px solid transparent; border-left-color:var(--ink-3);
}

.dsx-sheet{ margin-top:clamp(56px,7vw,104px); }
.dsx-sheet__hd{
  display:flex; justify-content:space-between; align-items:flex-end;
  border-bottom:2px solid var(--ink); padding-bottom:16px; flex-wrap:wrap; gap:12px;
}
.dsx-sheet__hd h2{
  font-family:var(--f-disp); font-weight:800; letter-spacing:-0.025em;
  font-size:clamp(24px,3vw,40px);
}
.dsx-sheet__doc{
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.dsx-row{
  display:grid; grid-template-columns:54px 1fr 1.4fr;
  gap:24px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--line-2);
  transition:background .2s var(--ease), padding-left .25s var(--ease);
}
.dsx-row:hover{ background:rgba(140,166,204,0.05); padding-left:10px; }
.dsx-row__no{ font-family:var(--f-mono); font-size:12px; color:var(--ink-4); }
.dsx-row__k{
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.dsx-row__v{ font-size:clamp(15px,1.5vw,19px); color:var(--ink); letter-spacing:-0.01em; }
.dsx-mats{ display:flex; gap:8px; flex-wrap:wrap; }
.dsx-mat{
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.06em;
  color:var(--ink-2); border:1px solid var(--line);
  border-radius:4px; padding:5px 10px;
}

.dsx-tags{ margin-top:clamp(56px,7vw,104px); }
.dsx-tags__row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.dsx-tag{
  font-family:var(--f-mono); font-size:12px; letter-spacing:0.06em;
  color:var(--ink-2); border:1px solid var(--line); border-radius:999px;
  padding:9px 16px; transition:border-color .25s var(--ease), color .25s var(--ease);
}
.dsx-tag:hover{ border-color:var(--amber); color:var(--amber); }

.dsx-eye{
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:10px;
}
.dsx-eye::before{ content:""; width:22px; border-top:2px solid var(--amber); }

@media (max-width:880px){
  .dsx-head{ grid-template-columns:1fr; }
  .dsx-plates{ grid-template-columns:1fr; }
  .dsx-ratio{ padding:8px 0; }
  .dsx-ratio__bar{ display:none; }
  .dsx-row{ grid-template-columns:32px 1fr; gap:6px 16px; }
  .dsx-row__v{ grid-column:2; }

  /* On phone, let each frame hug its product instead of forcing a tall
     portrait box (which left a huge empty navy panel + clipped image).
     Height is driven by the image, capped to the viewport. */
  .dsx-plate, .dsx-plate--solo{ aspect-ratio:auto; }
  .plate{ padding:clamp(20px,5vw,34px); }
  .dsx-plate img, .dsx-plate--solo img{ max-height:56vh; }
  .dsx-plate--packed img{ max-height:34vh; }
}