/* ================================================================
 * Meta Mint — homepage header + video hero
 *
 * 1. `.mm-header--hx`: the homepage variant of the site header
 *    (layouts/website.blade.php, header_style = hx). Same markup,
 *    dropdowns and v3 CTA button; restyled as a slim transparent bar
 *    that turns to glass once main.js adds `.header-six-scroll`.
 * 2. `.hx-hero`: pinned video slider (partials/home-video-hero).
 *
 * Loaded only by website/home.blade.php, after main.css / extra.css /
 * site.css. Hero classes are prefixed `hx-` because main.css is a
 * pre-built template that already owns generic names. Buttons are the
 * site's own x-v3-button and keep their site.css / main.css styling.
 *
 * Behaviour lives in assets/js/home-experience.js.
 * ================================================================ */

/* Sora is declared once, site-wide, in assets/site.css. */

/* The page scrollbar is styled site-wide in site.css. */

/* ----------------------------------------------------------------
 * 1. Header variant
 * ---------------------------------------------------------------- */
.mm-header--hx {
  --hx-bar-h: 76px;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color .5s, border-color .5s;
}
/* Scrolled: a solid dark tint, dark enough for the light sections below.
   No backdrop-filter here or anywhere over the hero — blurring on top of
   a playing <video> makes Chrome on Windows (GPU video overlays) paint the
   video over the whole page when a dropdown opens. */
.mm-header--hx.header-six-scroll {
  background: rgba(5, 16, 31, .92);
  border-color: rgba(234, 242, 255, .08);
  box-shadow: none;
}
.mm-header--hx .mm-bar,
.mm-header--hx.header-six-scroll .mm-bar { background: transparent; border-bottom: 0; }

/* Over the video the bar is transparent, so bright clips (the logistics
   warehouse, office windows) washed the white menu out. A soft shade fades
   down from the top edge behind the bar — no hard edge, the video still
   shows through — and goes once the header turns solid on scroll. */
.mm-header--hx::before {
  content: ''; position: absolute; inset: 0 0 -70px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 11, 23, .72) 0%, rgba(3, 11, 23, .48) 50%, rgba(3, 11, 23, .18) 78%, rgba(3, 11, 23, 0) 100%);
  transition: opacity .5s;
}
.mm-header--hx.header-six-scroll::before { opacity: 0; }
.mm-header--hx:not(.header-six-scroll) .mm-nav__link,
.mm-header--hx:not(.header-six-scroll) .mm-header__logo { text-shadow: 0 1px 12px rgba(3, 11, 23, .55); }
.mm-header--hx:not(.header-six-scroll) .mm-header__logo img { filter: drop-shadow(0 1px 8px rgba(3, 11, 23, .45)); }

/* Every panel hangs just below the bar. */
.mm-header--hx .mm-menu { margin-top: 20px; }

.mm-header--hx .mm-bar__inner,
.mm-header--hx.header-six-scroll .mm-bar__inner {
  width: 100%;
  max-width: 1480px;
  height: var(--hx-bar-h);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 56px);
  gap: 1.5rem;
}

/* ----------------------------------------------------------------
 * 2. Hero — tokens + scope
 * ---------------------------------------------------------------- */
/* Tokens are shared by the hero (.hx) and the homepage blocks that reuse its
   palette outside it (.hx-intro). Anything using var(--hx-*) must sit inside
   one of these, or its `font` / `background` shorthands are dropped whole. */
.hx, .hx-intro, .hx-why, .hx-softbg {
  --hx-navy-950: #030B17;
  --hx-navy-900: #071A2F;
  --hx-navy-800: #0B2340;
  --hx-blue-400: #2D8CFF;
  --hx-cyan: #36D1DC;
  --hx-violet: #7B61FF;
  --hx-ink: #EAF2FF;
  --hx-ink-2: rgba(234, 242, 255, .74);
  --hx-ink-3: rgba(234, 242, 255, .45);
  --hx-line: rgba(234, 242, 255, .14);

  --hx-font-display: 'Sora', system-ui, sans-serif;
  --hx-font-body: 'Inter', system-ui, sans-serif;
  --hx-ease-out: cubic-bezier(.16, 1, .3, 1);
  --hx-gutter: clamp(16px, 4vw, 56px);
  --hx-header-h: 76px;   /* matches .mm-header--hx */
}
.hx, .hx-intro {
  font-family: var(--hx-font-body);
  color: var(--hx-ink);
  -webkit-font-smoothing: antialiased;
}

/* Headings and copy take the hero's colour and type, not the template's
   base heading/paragraph styles. */
/* Zero specificity: still beats main.css (@layer base), but any class rule —
   ours or site.css's, e.g. the shared stat band — wins over it. */
:where(.hx) :where(h1, h2, h3, p) { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
.hx :where(img) { display: block; max-width: 100%; }
.hx :focus-visible { outline: 2px solid var(--hx-cyan); outline-offset: 3px; }
.hx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ----------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------- */
.hx-hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--hx-navy-950); display: flex; flex-direction: column; }

/* Background videos (one per slide, crossfaded) */
.hx-bg { position: absolute; inset: 0; z-index: 0; }
.hx-bg__slide {
  position: absolute; inset: 0; opacity: 0;
  background: var(--hx-navy-900) center / cover no-repeat;   /* poster shows instantly */
}
.hx-bg__slide.is-active { opacity: 1; }
.hx-bg__slide video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Light brand tint + shade only where the copy sits, so the footage stays visible */
.hx-bg__tint {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(7, 26, 47, .35), rgba(7, 26, 47, .08) 60%, rgba(11, 99, 206, .12));
}
.hx-bg__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 11, 23, .82) 0%, rgba(3, 11, 23, .55) 32%, rgba(3, 11, 23, .08) 58%, rgba(3, 11, 23, 0) 100%),
    linear-gradient(0deg, rgba(3, 11, 23, .75) 0%, rgba(3, 11, 23, 0) 26%),
    linear-gradient(180deg, rgba(3, 11, 23, .5) 0%, rgba(3, 11, 23, 0) 16%);
}

.hx-hero__inner {
  position: relative; z-index: 2; flex: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
  width: 100%; max-width: 1480px; margin: 0 auto;
  padding: calc(var(--hx-header-h) + 40px) var(--hx-gutter) 28px;
}

/* Copy — all slides stacked in one cell */
.hx-copy { display: grid; grid-template-rows: auto 1fr; }
/* The homepage H1 — fixed above the rotating slides. Small and quiet so the
   slide headline stays the visual lead; it is there for the reader who wants
   to know what the company is, and for search. */
/* A glass badge with a location pin, so it reads as the company's own label
   rather than a stray caption sitting on top of the slide's eyebrow. */
.hx-kicker {
  grid-row: 1; justify-self: start; display: inline-flex; align-items: center; gap: .55rem;
  max-width: 100%; margin: 0 0 1.6rem; padding: .45rem .95rem .45rem .6rem;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 .78rem/1.35 var(--hx-font-body); letter-spacing: .01em; color: rgba(255, 255, 255, .86);
}
.hx-kicker__pin {
  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--hx-cyan), #2d8cff); color: #fff;
}
.hx-kicker__pin svg { width: 12px; height: 12px; }
/* On a phone the line wraps; a full pill around two lines looks swollen. */
@media (max-width: 560px) { .hx-kicker { border-radius: 14px; margin-bottom: 1.1rem; font-size: .72rem; } }
.hx-slide { grid-area: 2 / 1; max-width: 36rem; visibility: hidden; }
.hx-slide.is-active { visibility: visible; }
.hx-eyebrow {
  display: inline-flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem;
  font: 600 .74rem/1.2 var(--hx-font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--hx-cyan);
}
.hx-eyebrow::before { content: ''; flex: none; width: 28px; height: 1px; background: linear-gradient(90deg, var(--hx-cyan), transparent); }

.hx-display {
  margin: 0; font-family: var(--hx-font-display); font-size: clamp(2.1rem, min(4.2vw, 8vh), 4.1rem); font-weight: 600; line-height: 1.05; letter-spacing: -.036em; color: var(--hx-ink);
  text-wrap: balance; text-shadow: 0 2px 30px rgba(3, 11, 23, .5); perspective: 800px;
}
.hx-display em { font-style: normal; }

/* Headline words (split into .hx-w spans by JS) */
.hx-w { display: inline-block; transform-origin: 50% 100% -.35em; backface-visibility: hidden; will-change: transform, opacity, filter; }
.hx-w--accent {
  text-shadow: none;
  /* rest state shows cyan → blue → violet; the white band is the light sweep */
  background: linear-gradient(100deg, var(--hx-cyan) 0%, var(--hx-blue-400) 18%, var(--hx-violet) 36%, var(--hx-violet) 48%, #fff 58%, var(--hx-cyan) 68%, var(--hx-cyan) 100%);
  background-size: 250% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hx-tags, .hx-actions { perspective: 700px; }
.hx-tag, .hx-actions > * { backface-visibility: hidden; }
.hx-lede { margin: 1.25rem 0 0; max-width: 31rem; font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.65; color: var(--hx-ink-2); }
.hx-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 0; padding: 0; }
.hx-tag {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .8rem;
  border: 1px solid var(--hx-line); border-radius: 999px; background: rgba(3, 11, 23, .62);
  font: 500 .78rem/1.1 var(--hx-font-body); color: var(--hx-ink);
}
.hx-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--hx-cyan); box-shadow: 0 0 10px var(--hx-cyan); }
.hx-tag:nth-child(2)::before { background: var(--hx-blue-400); box-shadow: 0 0 10px var(--hx-blue-400); }
.hx-tag:nth-child(3)::before { background: var(--hx-violet); box-shadow: 0 0 10px var(--hx-violet); }
/* Site v3 buttons, in the site's own font rather than the hero's */
.hx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 2rem; font-family: var(--font-inter-tight), system-ui, sans-serif; }

/* Service image card + product logo */
/* padding-top reserves the room the product badge overhangs into, so it
   always keeps a clear gap below the header. */
.hx-stage-wrap { position: relative; perspective: 1400px; padding-top: 34px; }
.hx-stage-tilt, .hx-stage-3d { position: relative; transform-style: preserve-3d; will-change: transform; }
.hx-stage-wrap::before {
  content: ''; position: absolute; inset: -14% -8%; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(45, 140, 255, .3), rgba(123, 97, 255, .1) 50%, transparent 72%);
}
.hx-stage {
  position: relative; aspect-ratio: 16 / 10; border-radius: 26px; overflow: hidden; background: var(--hx-navy-800);
  box-shadow: 0 40px 90px -30px rgba(3, 11, 23, .95), 0 0 0 1px rgba(234, 242, 255, .14);
}
.hx-stage__item { position: absolute; inset: 0; margin: 0; opacity: 0; will-change: clip-path, opacity; }
.hx-stage__item.is-active { opacity: 1; }
.hx-stage__item img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; will-change: transform; }
.hx-stage__item img.hx-pos-top { object-position: 50% 8%; }
.hx-stage__item img.hx-pos-bottom { object-position: 50% 92%; }
.hx-stage__sheen {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), transparent 30%), linear-gradient(0deg, rgba(3, 11, 23, .4), transparent 40%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.hx-stage__label {
  position: absolute; z-index: 3; left: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(3, 11, 23, .74);
  font: 600 .74rem/1 var(--hx-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--hx-ink);
}
.hx-stage__label b { font-family: var(--hx-font-display); color: var(--hx-cyan); font-weight: 600; }

.hx-product {
  /* Overhangs the card's top-right corner, as in the design; the space it
     reaches into is reserved by .hx-stage-wrap's padding-top. */
  position: absolute; z-index: 4; right: -18px; top: -22px;
  display: flex; flex-direction: column; gap: .35rem;
  padding: .75rem 1rem .85rem; border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 24px 50px -18px rgba(3, 11, 23, .8), 0 0 0 1px rgba(255, 255, 255, .6);
}
.hx-product[hidden] { display: none; }
.hx-product__kicker { display: flex; align-items: center; gap: .3rem; font: 600 .6rem/1 var(--hx-font-body); letter-spacing: .18em; text-transform: uppercase; color: #5B6B80; }
/* Linked badges only: the arrow, a lift and a brand ring say "click me".
   The lift is on the shadow, not transform, which GSAP owns for the flip. */
.hx-product__arrow { display: none; width: .75rem; height: .75rem; margin-left: auto; color: #2462B7; transition: transform .3s ease; }
.hx-product[href] { cursor: pointer; text-decoration: none; transition: box-shadow .3s ease; }
.hx-product[href] .hx-product__arrow { display: block; }
.hx-product[href]:hover,
.hx-product[href]:focus-visible { box-shadow: 0 30px 60px -18px rgba(3, 11, 23, .85), 0 0 0 2px #2D8CFF; outline: none; }
.hx-product[href]:hover .hx-product__arrow { transform: translate(2px, -2px); }
.hx-product img { height: 34px; width: auto; max-width: 190px; object-fit: contain; }

/* Controls */
.hx-hero__controls {
  /* In flow at the foot of the hero, directly above the stat band */
  position: relative; z-index: 4; width: 100%;
  display: flex; align-items: center; gap: 1.5rem; max-width: 1480px; margin: 0 auto; padding: 0 var(--hx-gutter) 26px;
}
/* Faded in by the intro timeline; the delayed animation is a failsafe so the
   controls still appear if the script never runs. */
@media (prefers-reduced-motion: no-preference) {
  .hx-hero__controls { opacity: 0; animation: hx-failsafe-show .01s 3s forwards; }
}
@keyframes hx-failsafe-show { to { opacity: 1; } }
.hx-ctl { display: flex; gap: .5rem; }
.hx-ctl__btn {
  width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0;
  border: 1px solid rgba(234, 242, 255, .22); border-radius: 50%; background: rgba(3, 11, 23, .5);
  color: var(--hx-ink); cursor: pointer; transition: border-color .3s, background-color .3s;
}
.hx-ctl__btn:hover { border-color: rgba(54, 209, 220, .7); background: rgba(54, 209, 220, .12); }
.hx-ctl__btn svg { width: 16px; height: 16px; }
.hx-ctl__btn .hx-icon-pause { display: none; }
.is-playing .hx-ctl__btn--play .hx-icon-play { display: none; }
.is-playing .hx-ctl__btn--play .hx-icon-pause { display: block; }

.hx-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; flex: 1; max-width: 760px; }
.hx-steps li { flex: 1; min-width: 0; }
.hx-step {
  display: block; width: 100%; padding: .6rem 0 0; border: 0; background: none; text-align: left; cursor: pointer;
  color: var(--hx-ink-3); font: 500 .66rem/1.2 var(--hx-font-body); letter-spacing: .16em; text-transform: uppercase; transition: color .4s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hx-step__bar { display: block; height: 1px; margin-bottom: .7rem; background: rgba(234, 242, 255, .2); }
.hx-step__fill { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--hx-cyan), var(--hx-violet)); }
.hx-step.is-active, .hx-step:hover { color: var(--hx-ink); }
.hx-step__num { font-family: var(--hx-font-display); font-weight: 600; margin-right: .45rem; }

/* A button: one click jumps past the slider to the next section. */
.hx-scroll-cue {
  margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; padding: 0 .4rem;
  border: 0; border-radius: 10px; background: none; cursor: pointer;
  font: 500 .66rem/1 var(--hx-font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--hx-ink-3);
  transition: color .3s;
}
.hx-scroll-cue:hover { color: var(--hx-ink); }
.hx-scroll-cue:hover .hx-scroll-cue__mouse { border-color: var(--hx-cyan); }
.hx-scroll-cue:focus-visible { outline: 2px solid var(--hx-cyan); outline-offset: 2px; }
.hx-scroll-cue__mouse { position: relative; width: 18px; height: 28px; border: 1.5px solid rgba(234, 242, 255, .4); border-radius: 10px; transition: border-color .3s; }
.hx-scroll-cue__mouse::after {
  content: ''; position: absolute; left: 50%; top: 5px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px;
  background: var(--hx-cyan); animation: hx-cue-wheel 1.6s var(--hx-ease-out) infinite;
}
@keyframes hx-cue-wheel { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(9px); opacity: 0; } }
.hx-hero__counter { margin: 0 0 0 1.5rem; font: 600 .74rem/1 var(--hx-font-display); letter-spacing: .1em; color: var(--hx-ink-3); font-variant-numeric: tabular-nums; }
.hx-hero__counter b { color: var(--hx-ink); font-weight: 600; }
@media (max-width: 1100px) { .hx-step__label { display: none; } }
@media (max-width: 960px) { .hx-scroll-cue { font-size: 0; gap: 0; } }
@media (prefers-reduced-motion: reduce) { .hx-scroll-cue__mouse::after { animation: none; } }

/* Tablet / phone: service card on top, copy below */
@media (max-width: 960px) {
  .hx-hero__inner { grid-template-columns: 1fr; gap: 1.75rem; padding: calc(var(--hx-header-h) + 24px) var(--hx-gutter) 20px; align-content: center; }
  .hx-stage-wrap { order: -1; margin-right: 10px; padding-top: 18px; }
  .hx-stage { border-radius: 18px; }
  .hx-stage__label { left: 12px; bottom: 12px; padding: .5rem .7rem; font-size: .66rem; }
  .hx-product { right: -10px; top: -14px; padding: .5rem .7rem .6rem; border-radius: 12px; }
  .hx-product img { height: 24px; max-width: 130px; }
  .hx-product__kicker { font-size: .52rem; }
  .hx-slide { max-width: none; }
  .hx-display { font-size: clamp(1.9rem, 7.6vw, 3rem); }
  .hx-lede { font-size: 1rem; line-height: 1.55; margin-top: 1rem; }
  .hx-tags { display: none; }   /* pinned hero must fit one phone screen */
  .hx-hero .hx-actions { margin-top: 1.4rem; gap: .6rem; }
  .hx-bg__shade {
    background: linear-gradient(0deg, rgba(3, 11, 23, .95) 0%, rgba(3, 11, 23, .7) 50%, rgba(3, 11, 23, .15) 80%, rgba(3, 11, 23, .35) 100%);
  }
  .hx-hero__controls { padding-bottom: 20px; gap: 1rem; }
  .hx-hero .mm-hero__stats { display: none; }   /* pinned hero must fit one phone/tablet screen */
  .hx-hero__counter { display: none; }
  .hx-steps { gap: .6rem; }
}
@media (max-width: 960px) and (max-height: 700px) { .hx-lede { display: none; } }
/* Six steps share ~200px on a phone: drop the spacing so "02" isn't clipped to "0…" */
@media (max-width: 560px) {
  .hx-steps { gap: .4rem; }
  .hx-step { letter-spacing: .04em; text-overflow: clip; }
  .hx-step__num { margin-right: 0; }
}

/* Stat band (shared partials.website-hero-stats, styled by site.css).
   In flow as the last row of the hero rather than absolute, and aligned to
   the hero's own width and gutter; the site font keeps it as it was. */
.hx-hero .mm-hero__stats {
  position: relative; inset: auto; z-index: 3; margin-top: 0;
  font-family: var(--font-inter-tight), system-ui, sans-serif;
}
.hx-hero .mm-hero__stats-grid { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 var(--hx-gutter); }

/* Short desktop windows (laptops, browser with bookmarks bar): the pinned
   hero — copy, controls and stat band — must still fit one screen. */
@media (min-width: 961px) and (max-height: 780px) {
  /* The card keeps the design's exact size (full column width, 16:10); the
     room it needs comes from tighter spacing, controls and stat band. */
  .hx-hero__inner { padding-top: calc(var(--hx-header-h) + 4px); padding-bottom: 10px; }
  .hx-eyebrow { margin-bottom: .8rem; }
  .hx-tags { display: none; }
  .hx-lede { margin-top: .9rem; }
  .hx-actions { margin-top: 1.25rem; }
  .hx-stage-wrap { padding-top: 40px; }
  .hx-hero__controls { padding-bottom: 6px; }
  .hx-ctl__btn { width: 38px; height: 38px; }
  .hx-hero .mm-hero__stat { padding-top: 5px; padding-bottom: 7px; }
  .hx-hero .mm-hero__stat-value { font-size: 1.5rem; }
  .hx-hero .mm-hero__stat-label { margin-top: 2px; }
}

/* Autoplay timer line along the very top (above the site header, z 60) */
.hx-scroll-line { position: fixed; z-index: 61; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; background: rgba(234, 242, 255, .05); transition: opacity .4s; }
.hx-scroll-line.is-hidden { opacity: 0; }
.hx-scroll-line span {
  display: block; height: 100%; transform: scaleX(0); transform-origin: left;
  /* gradient keeps flowing left → right on its own; the length follows the timer */
  background: linear-gradient(90deg, var(--hx-cyan), var(--hx-blue-400), var(--hx-violet), var(--hx-cyan), var(--hx-blue-400));
  background-size: 200% 100%;
  animation: hx-line-flow 2.2s linear infinite;
}
@keyframes hx-line-flow { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .hx-scroll-line span { animation: none; } }

/* ----------------------------------------------------------------
 * 3. Flagship product cards (home.blade.php "Some of Our Flagship
 *    Products"): white cards that flip in on scroll and tilt with the
 *    pointer, as in the video slider design.
 * ---------------------------------------------------------------- */
/* Flat at rest (no translateZ layers): depth offsets under the grid's
   perspective pushed each logo panel sideways, off the card's centre. */
.hx-prod-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.hx-prod {
  position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem;
  border-radius: 22px; background: #fff; transform-style: preserve-3d; will-change: transform;
  box-shadow: 0 30px 60px -35px rgba(7, 26, 47, .45), 0 0 0 1px rgba(7, 26, 47, .06);
  transition: box-shadow .5s var(--hx-ease-out);
}
.hx-prod:hover { box-shadow: 0 40px 80px -35px rgba(11, 99, 206, .5), 0 0 0 1px rgba(11, 99, 206, .18); }
.hx-prod__logo { display: grid; place-items: center; height: 120px; border-radius: 14px; background: linear-gradient(160deg, #F4F8FD, #EAF1FA); }
.hx-prod__logo img { max-height: 58px; max-width: 80%; width: auto; object-fit: contain; }
.hx-prod h3 { margin: .4rem 0 0; font: 600 1.25rem/1.2 var(--hx-font-display); letter-spacing: -.02em; color: #071A2F; }
.hx-prod p { margin: 0; flex: 1; font-size: .95rem; line-height: 1.6; color: #4A5D74; }
.hx-link-arrow { display: inline-flex; align-items: center; gap: .5rem; font: 600 .9rem/1 var(--hx-font-body); text-decoration: none; }
.hx-link-arrow svg { width: 16px; height: 16px; transition: transform .45s var(--hx-ease-out); }
.hx-link-arrow:hover svg { transform: translateX(4px); }
.hx-prod .hx-link-arrow { color: #0B63CE; }
.hx-prod__glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(400px circle at var(--gx, 50%) var(--gy, 50%), rgba(45, 140, 255, .14), transparent 45%); transition: opacity .4s; }
.hx-prod:hover .hx-prod__glare { opacity: 1; }
@media (max-width: 1100px) { .hx-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hx-prod-grid { grid-template-columns: 1fr; } }

/* Even line lengths for a wrapping heading (no single word left on its own line). */
.hx-balance { text-wrap: balance; }

/* ----------------------------------------------------------------
 * 4. Soft brand background behind every homepage body section: logo blue
 *    and cyan glows over a light wash. Two variants alternate down the
 *    page (A: grid, B: lighter with mirrored glows and a dot pattern) so
 *    neighbouring sections stay visibly separate.
 * ---------------------------------------------------------------- */
/* The backgrounds themselves (.hx-softbg / --alt) live in site.css, shared
   with the inner pages. */
/* Cards on a soft background get a white surface so they lift off it. */
.hx-softbg .hx-panel {
  background: #fff;
  box-shadow: 0 24px 50px -32px rgba(7, 26, 47, .35);
}
/* The Healthcare panel only has padding from md up; give it room on phones. */
@media (max-width: 767px) { .hx-softbg .hx-panel--pad { padding: 20px; border-radius: 20px; } }

/* Key phrase of every homepage section heading, in the logo gradient (blue → cyan). */
.hx-brand-text {
  background: linear-gradient(100deg, #2462b7 0%, #2d8cff 45%, #1cb8d6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;   /* keeps the gradient when a phrase wraps */
}

/* ----------------------------------------------------------------
 * 6. Client testimonials (home.blade.php; content from CMS →
 *    Testimonials): quote cards with rating, avatar or initials, and
 *    name / designation / organisation pinned to the bottom.
 * ---------------------------------------------------------------- */
.hx-quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hx-quote {
  position: relative; margin: 0; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 30px 28px 26px; border-radius: 20px; background: #fff;
  border: 1px solid rgba(36, 98, 183, .1);
  box-shadow: 0 22px 44px -32px rgba(7, 26, 47, .35);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s cubic-bezier(.16, 1, .3, 1), border-color .4s;
}
.hx-quote:hover { transform: translateY(-6px); border-color: rgba(36, 98, 183, .22); box-shadow: 0 32px 56px -30px rgba(36, 98, 183, .4); }
/* brand accent along the top edge */
.hx-quote::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--mm-brand-gradient, linear-gradient(90deg, #2462b7, #1c9fd6));
  transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.hx-quote:hover::before { transform: scaleX(1); }

.hx-quote__mark { position: absolute; right: 22px; top: 20px; width: 40px; height: 40px; color: rgba(36, 98, 183, .12); }
.hx-quote__stars { display: flex; gap: 3px; margin-bottom: 16px; }
.hx-quote__stars svg { width: 17px; height: 17px; color: #e4e8ef; }
.hx-quote__stars svg.is-on { color: #f5a524; }
.hx-quote__text { flex: 1; margin: 0; font-size: 1rem; line-height: 1.7; color: #3c4658; }
.hx-quote__text::before { content: '\201C'; }
.hx-quote__text::after { content: '\201D'; }

.hx-quote__who { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #eef1f6; }
.hx-quote__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.hx-quote__avatar--initials {
  display: grid; place-items: center;
  background: var(--color-background-9, #1f252f); color: #fff;
  font: 600 .95rem/1 var(--font-inter-tight), system-ui, sans-serif; letter-spacing: .02em;
}
.hx-quote__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hx-quote__name { font-weight: 600; font-size: 1rem; color: #131a26; }
.hx-quote__role { font-size: .84rem; line-height: 1.4; color: #6b7588; }

@media (max-width: 1100px) { .hx-quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .hx-quote-grid { grid-template-columns: 1fr; gap: 16px; }
  .hx-quote { padding: 26px 22px 22px; }
}
@media (prefers-reduced-motion: reduce) { .hx-quote, .hx-quote::before { transition: none; } }

/* Testimonial slider: one wide card at a time, dots left and square
   arrow buttons right beneath it (Swiper, js/home-experience.js). */
.hx-quotes { max-width: 920px; margin: 0 auto; }
/* room for the card shadow inside Swiper's overflow: hidden */
.hx-quote-swiper { padding: 6px 6px 34px; margin: -6px -6px -22px; }
.hx-quote-swiper .hx-quote { height: auto; padding: 38px 40px 32px; }
.hx-quote-swiper .hx-quote:hover { transform: none; }
.hx-quote-swiper .hx-quote__mark { right: 30px; top: 28px; width: 46px; height: 46px; }
.hx-quote-swiper .hx-quote__stars { margin-bottom: 20px; }
.hx-quote-swiper .hx-quote__stars svg { width: 19px; height: 19px; }
.hx-quote-swiper .hx-quote__text { font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.75; color: #1f2735; }
.hx-quote-swiper .hx-quote__who { margin-top: 26px; padding-top: 0; border-top: 0; }
.hx-quote-swiper .hx-quote__avatar { width: 54px; height: 54px; }

.hx-quotes__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.hx-quotes__dots { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hx-quotes__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
  background: #cfd6e2; transition: width .45s cubic-bezier(.16, 1, .3, 1), background-color .3s;
}
.hx-quotes__dot:hover { background: #a9b4c6; }
.hx-quotes__dot.is-active { width: 30px; background: var(--mm-brand-gradient, linear-gradient(90deg, #2462b7, #1c9fd6)); }
.hx-quotes__arrows { display: flex; gap: 10px; }
.hx-quotes__arrow {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; cursor: pointer;
  border-radius: 12px; border: 1px solid #dde3ec; background: #f1f4f9; color: #2a3446;
  transition: background-color .3s, color .3s, border-color .3s, transform .3s;
}
.hx-quotes__arrow svg { width: 18px; height: 18px; }
.hx-quotes__arrow:hover { background: var(--color-primary-500, #2462b7); border-color: transparent; color: #fff; }
.hx-quotes__arrow:active { transform: scale(.94); }
.hx-quotes__arrow:focus-visible, .hx-quotes__dot:focus-visible { outline: 2px solid #2462b7; outline-offset: 3px; }

@media (max-width: 680px) {
  .hx-quote-swiper .hx-quote { padding: 28px 22px 24px; }
  .hx-quote-swiper .hx-quote__mark { right: 18px; top: 18px; width: 36px; height: 36px; }
  .hx-quotes__arrow { width: 42px; height: 42px; }
}

/* ----------------------------------------------------------------
 * 7. "Who we are" statement panel (home.blade.php, first block after
 *    the hero): navy panel with a faint grid, a cyan/violet glow and an
 *    outlined "2007" behind; copy on the left, a facts ledger on the
 *    right. Count-up and reveal: js/home-experience.js initIntro.
 * ---------------------------------------------------------------- */
.hx-intro {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px);
  align-items: center; margin-bottom: clamp(56px, 7vw, 88px);
  padding: clamp(32px, 5vw, 64px);
  border-radius: 28px; color: var(--hx-ink);
  background:
    linear-gradient(rgba(234, 242, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(234, 242, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(135deg, var(--hx-navy-800) 0%, var(--hx-navy-900) 55%, var(--hx-navy-950) 100%);
  box-shadow: 0 50px 90px -50px rgba(7, 26, 47, .7), inset 0 0 0 1px rgba(234, 242, 255, .08);
}
.hx-intro__glow {
  position: absolute; z-index: -1; right: -12%; top: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(54, 209, 220, .22), rgba(123, 97, 255, .12) 40%, transparent 68%);
  pointer-events: none;
}
.hx-intro__year {
  position: absolute; z-index: -1; right: -.04em; bottom: -.22em;
  font: 800 clamp(7rem, 19vw, 16rem)/1 var(--hx-font-display); letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1px rgba(234, 242, 255, .09);
  pointer-events: none; user-select: none;
}

.hx-intro__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem;
  font: 600 .74rem/1 var(--hx-font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--hx-cyan);
}
.hx-intro__eyebrow i { width: 28px; height: 1px; background: linear-gradient(90deg, var(--hx-cyan), transparent); }
.hx-intro__title {
  margin: 0 0 1.25rem; max-width: 18ch; text-wrap: balance;
  font: 600 clamp(1.85rem, 3.4vw, 2.9rem)/1.12 var(--hx-font-display); letter-spacing: -.03em; color: #fff;
}
/* Key phrase of a heading on navy (intro, why band): lighter blue → cyan → violet. */
.hx-accent-lt {
  background: linear-gradient(100deg, #6FB4FF 0%, var(--hx-cyan) 60%, #A99BFF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hx-intro__lede { margin: 0; max-width: 60ch; font-size: clamp(.98rem, 1.15vw, 1.08rem); line-height: 1.75; color: var(--hx-ink-2); }

.hx-intro__caps { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.hx-intro__caps a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 99px;
  font-size: .84rem; font-weight: 500; color: var(--hx-ink); text-decoration: none;
  border: 1px solid var(--hx-line); background: rgba(234, 242, 255, .04);
  transition: border-color .35s, background-color .35s, color .35s;
}
.hx-intro__caps a:hover { border-color: rgba(54, 209, 220, .55); background: rgba(54, 209, 220, .1); color: #fff; }

.hx-intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 2rem; }
/* White pill button on navy (intro, why band); works as <a> or <button>. */
.hx-btn-white {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: 0 22px; border-radius: 99px; border: 0; cursor: pointer;
  font: 600 .92rem/1 var(--hx-font-body); color: var(--hx-navy-900); text-decoration: none; background: #fff;
  transition: transform .45s var(--hx-ease-out), box-shadow .45s var(--hx-ease-out);
}
.hx-btn-white svg { width: 16px; height: 16px; transition: transform .45s var(--hx-ease-out); }
.hx-btn-white:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(54, 209, 220, .55); }
.hx-btn-white:hover svg { transform: translateX(4px); }
.hx-intro__link {
  font: 600 .92rem/1 var(--hx-font-body); color: var(--hx-ink); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 4px;
  transition: background-size .45s var(--hx-ease-out);
}
.hx-intro__link:hover { background-size: 100% 1px; }
.hx-intro a:focus-visible { outline: 2px solid var(--hx-cyan); outline-offset: 3px; }

/* Facts ledger: 2 × 2, hairline dividers, big numerals */
.hx-intro__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0;
  border-radius: 20px; border: 1px solid var(--hx-line);
  background: rgba(3, 11, 23, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hx-intro__fact { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .55rem; padding: clamp(20px, 2.4vw, 30px); }
.hx-intro__fact:nth-child(odd) { border-right: 1px solid var(--hx-line); }
.hx-intro__fact:nth-child(-n+2) { border-bottom: 1px solid var(--hx-line); }
.hx-intro__fact dt { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--hx-ink-3); }
.hx-intro__fact dd {
  margin: 0; font: 600 clamp(2rem, 3.4vw, 2.85rem)/1 var(--hx-font-display); letter-spacing: -.04em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.hx-intro__fact dd sup { top: -.7em; margin-left: 2px; font-size: .5em; color: var(--hx-cyan); }
.hx-intro__fact--place dd { font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -.02em; }
.hx-intro__fact dd small {
  display: block; margin-top: .5rem; font: 400 .8rem/1.4 var(--hx-font-body); letter-spacing: 0; color: var(--hx-ink-2);
}

@media (max-width: 1023px) {
  .hx-intro { grid-template-columns: minmax(0, 1fr); }
  .hx-intro__title { max-width: 22ch; }
}
@media (max-width: 560px) {
  .hx-intro { margin-left: -4px; margin-right: -4px; border-radius: 22px; padding: 28px 20px; }
  .hx-intro__caps a { min-height: 40px; }
  .hx-intro__fact { padding: 18px 16px; }
  .hx-btn-white { flex: 1 1 100%; justify-content: center; }
  .hx-intro__link { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-btn-white, .hx-btn-white svg, .hx-intro__link, .hx-intro__caps a { transition: none; }
}

/* Cards on the lighter variant need a hairline to separate from it. */
.hx-softbg--alt .hx-panel { border: 1px solid rgba(36, 98, 183, .1); }

/* Client logo strip: its solid-colour edge overlays would show as patches on
   the new background, so fade the strip itself at the edges instead. */
.hx-softbg .hx-edge-fade { display: none; }
.hx-softbg .logos-marquee-container {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}


/* ================================================================
 * 8. One type system below the hero: every heading on the homepage's
 *    light sections uses the hero's display face (Sora), not the
 *    template's thin Inter Tight.
 * ================================================================ */
.hx-softbg :is(h2, h3) { font-family: var(--hx-font-display); letter-spacing: -.025em; }
.hx-softbg h2 { font-weight: 600; }

.hx-section { padding-block: clamp(64px, 8vw, 112px); }
.hx-section--last { padding-bottom: clamp(24px, 3vw, 40px); }

/* Section header styles (.mm-head) live in assets/site.css, shared site-wide. */

/* ================================================================
 * 9. Services index (home.blade.php "Core services"): ruled list on the
 *    left, sticky preview on the right that follows the active row.
 *    Behaviour: js/home-experience.js initServices.
 * ================================================================ */
.hx-svc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.hx-svc__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(7, 26, 47, .1); }
.hx-svc__item { position: relative; border-bottom: 1px solid rgba(7, 26, 47, .1); }
.hx-svc__item::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, #2462b7, #2d8cff 50%, #36D1DC);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--hx-ease-out);
}
.hx-svc__item.is-active::after { transform: scaleX(1); }
.hx-svc__link {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: start; column-gap: 18px;
  padding: 24px 4px; color: inherit; text-decoration: none;
}
.hx-svc__link:focus-visible { outline: 2px solid #0B63CE; outline-offset: 2px; border-radius: 10px; }
.hx-svc__num { padding-top: .45em; font: 600 .8rem/1 var(--hx-font-display); letter-spacing: .08em; color: #8A9AB0; transition: color .3s; }
.hx-svc__title {
  display: block; font: 600 clamp(1.12rem, 1.6vw, 1.4rem)/1.3 var(--hx-font-display); letter-spacing: -.02em; color: #071A2F;
  transition: color .3s, margin .5s var(--hx-ease-out);
}
.hx-svc__desc { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s var(--hx-ease-out), opacity .4s; }
.hx-svc__desc > span { overflow: hidden; font-size: .95rem; line-height: 1.65; color: #4A5D74; }
.hx-svc__thumb { display: none; }
.hx-svc__arrow {
  display: grid; place-items: center; width: 44px; height: 44px; margin-top: -6px; border-radius: 50%;
  color: #071A2F; border: 1px solid rgba(7, 26, 47, .14);
  transform: rotate(45deg); transition: transform .5s var(--hx-ease-out), background-color .3s, color .3s, border-color .3s;
}
.hx-svc__arrow svg { width: 18px; height: 18px; }
.hx-svc__item.is-active .hx-svc__num { color: #0B63CE; }
.hx-svc__item.is-active .hx-svc__title { margin-bottom: 8px; }
.hx-svc__item.is-active .hx-svc__desc { grid-template-rows: 1fr; opacity: 1; }
.hx-svc__item.is-active .hx-svc__arrow { transform: rotate(0); background: #0B63CE; border-color: transparent; color: #fff; }

.hx-svc__stage {
  position: sticky; top: 110px; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 24px;
  background: var(--hx-navy-900); box-shadow: 0 40px 80px -40px rgba(7, 26, 47, .55);
}
.hx-svc__frame { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s ease; }
.hx-svc__frame.is-active { opacity: 1; }
.hx-svc__frame img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--hx-ease-out); }
.hx-svc__frame.is-active img { transform: scale(1); }
.hx-svc__frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 11, 23, 0) 45%, rgba(3, 11, 23, .88)); }
.hx-svc__frame figcaption { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 26px; display: flex; flex-direction: column; gap: 10px; color: #fff; }
.hx-svc__frame-num { font: 600 .74rem/1 var(--hx-font-display); letter-spacing: .16em; color: var(--hx-cyan); }
.hx-svc__frame-title { font: 600 clamp(1.25rem, 2vw, 1.6rem)/1.2 var(--hx-font-display); letter-spacing: -.02em; }

@media (max-width: 900px) {
  .hx-svc { grid-template-columns: minmax(0, 1fr); }
  .hx-svc__stage { display: none; }
  .hx-svc__link { grid-template-columns: 30px minmax(0, 1fr) 76px; padding: 20px 0; }
  .hx-svc__arrow { display: none; }
  .hx-svc__thumb { display: block; width: 76px; height: 60px; object-fit: cover; border-radius: 12px; }
  .hx-svc__title { margin-bottom: 6px; font-size: 1.08rem; }
  .hx-svc__desc { grid-template-rows: 1fr; opacity: 1; }
  .hx-svc__desc > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .9rem; }
  .hx-svc__item::after { display: none; }
}

/* ================================================================
 * 10. Trust: client logos + certifications (home.blade.php)
 * ================================================================ */
.hx-trust-wrap { padding-top: clamp(56px, 7vw, 96px); }
.hx-trust {
  display: grid; grid-template-columns: minmax(0, auto) auto; align-items: center; justify-content: space-between; gap: 24px 48px;
  padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid rgba(7, 26, 47, .1);
}
.hx-trust__head .mm-head__eyebrow { margin-bottom: 12px; }
.hx-trust__title { margin: 0; max-width: 24ch; font: 600 clamp(1.4rem, 2.3vw, 1.9rem)/1.25 var(--hx-font-display); letter-spacing: -.025em; color: #071A2F; }
.hx-trust__certs { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 18px 30px; margin: 0; padding: 0; list-style: none; }
.hx-trust__certs img { display: block; width: auto; height: 38px; filter: grayscale(1); opacity: .72; transition: filter .4s, opacity .4s; }
.hx-trust__certs li:nth-child(3) img { height: 56px; }
.hx-trust__certs li:hover img { filter: none; opacity: 1; }
.hx-softbg .hx-trust__logo { padding: 14px 18px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(7, 26, 47, .06), 0 14px 30px -24px rgba(7, 26, 47, .4); }
@media (max-width: 640px) {
  .hx-trust { grid-template-columns: minmax(0, 1fr); }
  .hx-trust__certs { gap: 16px 22px; justify-content: flex-start; }
  .hx-trust__certs img { height: 30px; }
  .hx-trust__certs li:nth-child(3) img { height: 46px; }
}

/* ================================================================
 * 11. Why Meta Mint: full-width navy band mid-page. Five reasons in a
 *     hairline-ruled grid; reveal in js/home-experience.js initWhyCards.
 * ================================================================ */
.hx-why {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(72px, 9vw, 124px); color: var(--hx-ink);
  background:
    linear-gradient(rgba(234, 242, 255, .04) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(234, 242, 255, .04) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(160deg, var(--hx-navy-800) 0%, var(--hx-navy-900) 55%, var(--hx-navy-950) 100%);
}
.hx-why__glow {
  position: absolute; z-index: -1; left: -12%; top: -35%; width: 60%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(54, 209, 220, .16), rgba(123, 97, 255, .1) 40%, transparent 68%);
}
.hx-why__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.hx-why__intro .mm-head { margin-bottom: 30px; }
.hx-why__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--hx-line); border-left: 1px solid var(--hx-line);
}
.hx-why__item {
  position: relative; display: flex; flex-direction: column; gap: 22px; min-height: 196px; padding: 28px;
  border-right: 1px solid var(--hx-line); border-bottom: 1px solid var(--hx-line);
  transition: background-color .4s;
}
.hx-why__item:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 160px; }
.hx-why__item::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  background: linear-gradient(90deg, #2d8cff, var(--hx-cyan));
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--hx-ease-out);
}
.hx-why__item:hover { background: rgba(234, 242, 255, .035); }
.hx-why__item:hover::before { transform: scaleX(1); }
.hx-why__icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: var(--hx-cyan);
  background: rgba(54, 209, 220, .08); border: 1px solid rgba(54, 209, 220, .24);
  transition: transform .5s var(--hx-ease-out), background-color .4s;
}
.hx-why__icon svg { width: 26px; height: 26px; }
.hx-why__item:hover .hx-why__icon { transform: translateY(-3px); background: rgba(54, 209, 220, .15); }
.hx-why__num { position: absolute; right: 26px; top: 30px; font: 600 .74rem/1 var(--hx-font-display); letter-spacing: .14em; color: var(--hx-ink-3); }
.hx-why__title { margin: auto 0 0; max-width: 24ch; font: 600 1.12rem/1.4 var(--hx-font-display); letter-spacing: -.015em; color: #fff; }
.hx-why :focus-visible { outline: 2px solid var(--hx-cyan); outline-offset: 3px; }
@media (max-width: 1023px) { .hx-why__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .hx-why__list { grid-template-columns: minmax(0, 1fr); }
  .hx-why__item, .hx-why__item:last-child:nth-child(odd) { min-height: 0; padding: 22px 20px; flex-direction: row; align-items: center; gap: 16px; }
  .hx-why__icon { flex: none; width: 46px; height: 46px; }
  .hx-why__title { margin: 0; font-size: 1rem; padding-right: 26px; }
  .hx-why__num { top: 50%; translate: 0 -50%; right: 18px; }
  .hx-why .hx-btn-white { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-why__item, .hx-why__item::before, .hx-why__icon { transition: none; }
}

/* ================================================================
 * 12. Insights (home.blade.php): three latest posts
 * ================================================================ */
.hx-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 32px); }
.hx-post { display: flex; flex-direction: column; }
.hx-post__media { display: block; aspect-ratio: 16 / 9; margin-bottom: 20px; overflow: hidden; border-radius: 18px; background: #E6EDF6; }
.hx-post__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--hx-ease-out); }
.hx-post:hover .hx-post__media img { transform: scale(1.05); }
.hx-post__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: .8rem; color: #6B7A90; }
.hx-post__cat { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #0B63CE; }
.hx-post__title { margin: 0 0 8px; font: 600 1.18rem/1.35 var(--hx-font-display); letter-spacing: -.02em; }
.hx-post__title a {
  color: #071A2F; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--hx-ease-out);
}
.hx-post:hover .hx-post__title a { background-size: 100% 1px; }
.hx-post__excerpt {
  margin: 0 0 18px; font-size: .95rem; line-height: 1.65; color: #4A5D74;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hx-post__more { margin-top: auto; color: #0B63CE; }
.hx-post a:focus-visible { outline: 2px solid #0B63CE; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 1023px) { .hx-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hx-posts { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .hx-svc__item::after, .hx-svc__title, .hx-svc__desc, .hx-svc__arrow, .hx-svc__frame, .hx-svc__frame img,
  .hx-post__media img, .hx-post__title a, .hx-trust__certs img { transition: none; }
}


/* ================================================================
 * 13. Healthcare (home.blade.php): linked product list beside a
 *     stylised HMS window, all HTML/CSS — no stock illustration.
 * ================================================================ */
.hx-health { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.hx-health .mm-head { margin-bottom: 28px; }
.hx-health__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(7, 26, 47, .1); }
.hx-health__item {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 20px; align-items: center; gap: 16px;
  padding: 16px 4px; border-bottom: 1px solid rgba(7, 26, 47, .1); color: inherit; text-decoration: none;
}
.hx-health__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: #0B63CE; background: rgba(11, 99, 206, .07); border: 1px solid rgba(11, 99, 206, .14); transition: background-color .3s, color .3s; }
.hx-health__icon svg { width: 22px; height: 22px; }
.hx-health__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hx-health__text strong { font: 600 1rem/1.35 var(--hx-font-display); letter-spacing: -.01em; color: #071A2F; }
.hx-health__text span { font-size: .88rem; color: #6B7A90; }
.hx-health__go { width: 16px; height: 16px; color: #8A9AB0; transition: transform .45s var(--hx-ease-out), color .3s; }
.hx-health__item:hover .hx-health__icon { background: #0B63CE; color: #fff; }
.hx-health__item:hover .hx-health__go { transform: translateX(4px); color: #0B63CE; }
.hx-health__item:focus-visible { outline: 2px solid #0B63CE; outline-offset: 2px; border-radius: 10px; }
.hx-health__note { margin: 20px 0 0; font-size: .88rem; color: #6B7A90; }

/* The stylised app window */
.hx-health__visual { position: relative; padding: 28px 18px 34px; }
.hx-app {
  overflow: hidden; border-radius: 20px; background: #0B1B33; color: #EAF2FF;
  box-shadow: 0 50px 90px -45px rgba(7, 26, 47, .75), 0 0 0 1px rgba(234, 242, 255, .08);
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transform-origin: 60% 50%;
  transition: transform .9s var(--hx-ease-out);
}
.hx-health__visual:hover .hx-app { transform: perspective(1400px) rotateY(0) rotateX(0); }
.hx-app__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #071528; border-bottom: 1px solid rgba(234, 242, 255, .08); }
.hx-app__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(234, 242, 255, .2); }
.hx-app__bar i:first-child { background: #FF6B6B; } .hx-app__bar i:nth-child(2) { background: #F5C451; } .hx-app__bar i:nth-child(3) { background: #3DD68C; }
.hx-app__bar span { margin-left: 10px; font-size: .74rem; color: rgba(234, 242, 255, .55); }
.hx-app__body { display: grid; grid-template-columns: 128px minmax(0, 1fr); min-height: 320px; }
.hx-app__nav { margin: 0; padding: 16px 10px; list-style: none; border-right: 1px solid rgba(234, 242, 255, .07); background: rgba(3, 11, 23, .35); }
.hx-app__nav li { padding: 8px 10px; margin-bottom: 2px; border-radius: 8px; font-size: .76rem; color: rgba(234, 242, 255, .55); }
.hx-app__nav li.is-on { color: #fff; background: linear-gradient(90deg, rgba(45, 140, 255, .35), rgba(45, 140, 255, .08)); }
.hx-app__main { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.hx-app__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hx-app__tile { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; background: rgba(234, 242, 255, .05); border: 1px solid rgba(234, 242, 255, .08); }
.hx-app__tile b { font: 600 .86rem/1.2 var(--hx-font-display); color: #fff; }
.hx-app__tile span { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; color: rgba(234, 242, 255, .6); }
.hx-app__tile i, .hx-app__chip i { width: 7px; height: 7px; border-radius: 50%; background: #3DD68C; box-shadow: 0 0 0 3px rgba(61, 214, 140, .18); }
.hx-app__chart { flex: 1; display: flex; flex-direction: column; padding: 14px; border-radius: 12px; background: rgba(234, 242, 255, .04); border: 1px solid rgba(234, 242, 255, .07); }
.hx-app__chart p { margin: 0 0 12px; font-size: .72rem; color: rgba(234, 242, 255, .6); }
.hx-app__bars { flex: 1; display: flex; align-items: flex-end; gap: 8px; min-height: 90px; }
.hx-app__bars span { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #36D1DC, #2D8CFF); opacity: .85; transform-origin: bottom; }
.hx-app__chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px;
  font-size: .78rem; font-weight: 600; color: #071A2F; background: #fff;
  box-shadow: 0 20px 40px -18px rgba(7, 26, 47, .45), 0 0 0 1px rgba(7, 26, 47, .06);
}
.hx-app__chip--a { top: 0; right: 0; }
.hx-app__chip--b { bottom: 4px; left: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hx-app__chip--a { animation: hx-float 6s ease-in-out infinite; }
  .hx-app__chip--b { animation: hx-float 7s ease-in-out -2s infinite; }
}
@keyframes hx-float { 50% { transform: translateY(-8px); } }

@media (max-width: 1023px) {
  .hx-health { grid-template-columns: minmax(0, 1fr); }
  .hx-app { transform: none; }
}
@media (max-width: 560px) {
  .hx-app__body { grid-template-columns: minmax(0, 1fr); }
  .hx-app__nav { display: none; }
  .hx-health__visual { padding: 24px 0 30px; }
  .hx-health__item { grid-template-columns: 42px minmax(0, 1fr) 16px; gap: 12px; }
  .hx-health__icon { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-app, .hx-health__icon, .hx-health__go { transition: none; }
}

/* ================================================================
 * 14. Industries stack: the products serving each industry, as links.
 * ================================================================ */
.hx-ind__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.hx-ind__links a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 99px;
  font-size: .78rem; font-weight: 600; color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .3s, border-color .3s;
}
.hx-ind__links a:hover { background: rgba(54, 209, 220, .25); border-color: rgba(54, 209, 220, .7); }
.hx-ind__links a:focus-visible { outline: 2px solid #36D1DC; outline-offset: 2px; }

/* Trust row: heading and badges stack below desktop width. */
@media (max-width: 1023px) {
  .hx-trust { grid-template-columns: minmax(0, 1fr); }
  .hx-trust__certs { justify-content: flex-start; }
}

/* Selected work: three projects on phones (the link to all sits above). */
@media (max-width: 640px) { .hx-work .mm-work__item:nth-child(n+4) { display: none; } }


/* ================================================================
 * 15. Testimonials, featured layout: the quote large on the left, the
 *     person in a navy panel on the right. Same markup and Swiper
 *     wiring as §6 — this only re-lays the slide out.
 * ================================================================ */
.hx-quotes { max-width: 1080px; }
.hx-quote-swiper .hx-quote {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto 1fr; column-gap: 44px;
  padding: 44px 44px 44px 52px; border-radius: 28px;
}
.hx-quote-swiper .hx-quote__mark { left: auto; right: calc(280px + 44px + 44px); top: 36px; width: 54px; height: 54px; color: rgba(11, 99, 206, .12); }
.hx-quote-swiper .hx-quote__stars { grid-column: 1; margin: 14px 0 22px; }
.hx-quote-swiper .hx-quote__text {
  grid-column: 1; align-self: start;
  font: 500 clamp(1.08rem, 1.6vw, 1.32rem)/1.65 var(--hx-font-display); letter-spacing: -.012em; color: #071A2F;
}
.hx-quote-swiper .hx-quote__who {
  grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 28px 24px;
  flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 16px;
  border-radius: 20px; color: #EAF2FF;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(54, 209, 220, .22), transparent 60%),
    linear-gradient(155deg, #0B2340, #071A2F 65%, #030B17);
}
.hx-quote-swiper .hx-quote__avatar { width: 68px; height: 68px; box-shadow: 0 0 0 3px rgba(234, 242, 255, .15); }
.hx-quote-swiper .hx-quote__avatar--initials { background: linear-gradient(135deg, #2462b7, #1cb8d6); }
.hx-quote-swiper .hx-quote__name { font: 600 1.08rem/1.3 var(--hx-font-display); color: #fff; }
.hx-quote-swiper .hx-quote__role { font-size: .84rem; line-height: 1.5; color: rgba(234, 242, 255, .7); }
.hx-quote-swiper .hx-quote::before { display: none; }

@media (max-width: 860px) {
  .hx-quote-swiper .hx-quote { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 32px 26px 26px; }
  .hx-quote-swiper .hx-quote__who { grid-column: 1; grid-row: auto; margin-top: 24px; flex-direction: row; align-items: center; justify-content: flex-start; padding: 18px 20px; }
  .hx-quote-swiper .hx-quote__avatar { width: 52px; height: 52px; }
  .hx-quote-swiper .hx-quote__mark { left: auto; right: 22px; top: 22px; width: 40px; height: 40px; }
  .hx-quote-swiper .hx-quote__stars { margin-top: 0; }
}

/* ================================================================
 * 16. Services index, scroll-driven (js initServices): progress bar on
 *     the preview while the index is pinned; on phones the active row
 *     (the one crossing the middle of the screen) is marked in blue.
 * ================================================================ */
.hx-svc__progress {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, #2d8cff, var(--hx-cyan));
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}
@media (max-width: 900px) {
  .hx-svc__item { transition: background-color .4s; }
  .hx-svc__item.is-active { background: linear-gradient(90deg, rgba(11, 99, 206, .06), transparent 80%); }
  .hx-svc__item.is-active .hx-svc__title { color: #0B63CE; }
  .hx-svc__item.is-active .hx-svc__thumb { box-shadow: 0 0 0 2px #2d8cff; }
  .hx-svc__thumb { transition: box-shadow .4s; }
}