/* ===========================================================================
   Home hero: "wireframe lens" (cursor reveals the finished design over a sketch).
   Everything is namespaced `hl-` so it cannot clash with style.css.

   NO NAVBAR HERE: the site's fixed header (layout/header.html) floats over the hero,
   so the content is pushed down by --hdr-full (measured by header-glass.js).

   BACKGROUND IMAGES: set per slide in templates/partials/hero_lens.html ("img").
   Until a file exists, the gradient in --hl-fb (set per slide as "fb") is shown instead.
   =========================================================================== */

.hl {
  --hl-navy: #0a0b2e;
  --hl-purple: #7b2ff7;
  --hl-magenta: #b51bb5;
  --hl-cyan: #43d2e0;
  --hl-gold: #f0a400;
  /* default fallback, overridden per slide by JS */
  --hl-fb: linear-gradient(135deg, #0a0b2e 0%, #4a128c 55%, #7b2ff7 100%);

  position: relative;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  touch-action: pan-y;            /* let phones scroll the page over the hero */
  background: var(--hl-navy);
  color: #fff;
  font-family: "Afacad", system-ui, sans-serif;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.hl *, .hl *::before, .hl *::after { box-sizing: inherit; }
.hl a { color: inherit; text-decoration: none; }

.hl-layer {
  position: absolute;
  inset: 0;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr;
  /* top clears the fixed site header, bottom clears the slide controls */
  padding: calc(var(--hdr-full, 108px) + clamp(8px, 2vw, 28px)) clamp(18px, 4vw, 52px) clamp(64px, 7vw, 76px);
}

/* Background = the per-slide fallback gradient (--hl-fb) only.
   The photo layer (--hl-img) has been removed — colours, gradients, wireframe
   and every other style stay exactly as they were. */
.hl-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--hl-navy);
  background-image: var(--hl-fb);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scaleX(var(--hl-fx, 1));
}

.hl-body {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(16px, 4vw, 56px);
  align-items: center;
  min-height: 0;
}
.hl-h1 {
  font: 700 clamp(38px, 6vw, 86px)/1 "Afacad", sans-serif;
  margin: 0 0 20px;
  letter-spacing: -.02em;
  color: inherit;
}
.hl-body p {
  font-size: clamp(17px, 1.7vw, 23px);
  max-width: 32ch;
  margin: 0 0 28px;
  line-height: 1.3;
  color: inherit;
}
.hl-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.hl-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 99px;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
}

/* right-hand mock: browser + phone + chip */
.hl-mock { position: relative; aspect-ratio: 1.15; max-height: 62vh; justify-self: center; width: 100%; }
.hl-win {
  position: absolute; left: 0; top: 6%; width: 84%; height: 70%;
  border-radius: 18px; padding: 16px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 12px;
}
.hl-win-dots { display: flex; gap: 6px; }
.hl-win-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; }
.hl-hb { border-radius: 12px; }
.hl-rw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; height: 34px; }
.hl-rw b { border-radius: 9px; }
.hl-ph {
  position: absolute; right: 2%; bottom: 0; width: 27%; height: 66%;
  border-radius: 22px; padding: 10px; display: grid; gap: 8px; grid-template-rows: 1fr auto auto;
  animation: hl-fl 5s ease-in-out infinite alternate;
}
.hl-ph b { border-radius: 9px; height: 16px; }
.hl-chip {
  position: absolute; left: 46%; top: 0; padding: 10px 18px; border-radius: 99px;
  font-weight: 700; font-size: clamp(14px, 1.4vw, 19px);
  animation: hl-fl 4s ease-in-out infinite alternate-reverse;
}
.hl-cht { position: absolute; left: 6%; bottom: 2%; width: 46%; }
@keyframes hl-fl { to { transform: translateY(-12px); } }

/* wireframe layer: brand-tinted (purple base, cyan lines, magenta accents), never grey */
/* small text stays SOLID so it is crisp; only the big headline is drawn as an outline */
.hl-wf { color: rgba(228, 218, 255, .92); }
.hl-wf .hl-h1 { color: transparent; -webkit-text-stroke: 1.5px rgba(214, 196, 255, .95); }
.hl-wf .hl-btn { color: #c9f4f8; }
.hl-wf .hl-chip { color: #ffd98a; }
.hl-wf::before { filter: saturate(.75) brightness(.8); opacity: .85; }
.hl-wf::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-color: rgba(30, 10, 80, .5);
  background-image:
    linear-gradient(135deg, rgba(74, 18, 140, .62), rgba(10, 11, 46, .7)),
    linear-gradient(rgba(123, 47, 247, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 47, 247, .22) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
}
.hl-wf .hl-btn, .hl-wf .hl-win, .hl-wf .hl-ph, .hl-wf .hl-chip, .hl-wf .hl-hb, .hl-wf .hl-rw b, .hl-wf .hl-ph b {
  border: 1.5px dashed rgba(67, 210, 224, .8);
  background: rgba(123, 47, 247, .14);
}
.hl-wf .hl-hb { background: rgba(181, 27, 181, .2); border-color: rgba(255, 120, 230, .8); }
.hl-wf .hl-chip { border-color: rgba(240, 164, 0, .9); background: rgba(240, 164, 0, .12); }
.hl-wf svg * { stroke: rgba(67, 210, 224, .9) !important; fill: none !important; }

/* finished layer, revealed through a circle that follows the cursor */
.hl-fin {
  color: #fff;
  /* The lens is a MASK, not clip-path: clip-path on a layer that contains animated (floating) children
     leaves square, unclipped patches around the circle in some browsers. */
  -webkit-mask-image: radial-gradient(circle var(--r, 130px) at var(--x, 50%) var(--y, 50%), #000 calc(100% - 1.5px), transparent 100%);
  mask-image: radial-gradient(circle var(--r, 130px) at var(--x, 50%) var(--y, 50%), #000 calc(100% - 1.5px), transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.hl-fin::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10, 11, 46, .68), rgba(10, 11, 46, .22) 55%, rgba(10, 11, 46, 0));
}
.hl-fin .hl-btn.p { background: linear-gradient(90deg, var(--hl-purple), var(--hl-magenta)); box-shadow: 0 10px 30px -10px var(--hl-magenta); }
.hl-fin .hl-btn.s { border: 2px solid #fff; }
.hl-fin .hl-win { background: rgba(40, 20, 110, .55); border: 1px solid rgba(255, 255, 255, .3); color: #fff; }
.hl-fin .hl-hb { background: linear-gradient(120deg, var(--hl-purple), var(--hl-magenta)); }
.hl-fin .hl-rw b:nth-child(1) { background: var(--hl-cyan); }
.hl-fin .hl-rw b:nth-child(2) { background: var(--hl-gold); }
.hl-fin .hl-rw b:nth-child(3) { background: #ff2fd6; }
.hl-fin .hl-ph { background: linear-gradient(160deg, #1b0b4a, var(--hl-purple)); border: 2px solid var(--hl-cyan); }
.hl-fin .hl-ph b { background: var(--hl-cyan); }
.hl-fin .hl-ph b + b { background: #fff5; width: 60%; }
.hl-fin .hl-chip { background: var(--hl-gold); color: var(--hl-navy); -webkit-text-stroke: 0; }

.hl-ring {
  position: absolute;
  width: calc(var(--r, 130px) * 2); height: calc(var(--r, 130px) * 2);
  border: 2px solid var(--hl-cyan); border-radius: 50%;
  left: var(--x, 50%); top: var(--y, 50%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 24px var(--hl-cyan), inset 0 0 24px #43d2e055;
  z-index: 3;
}
.hl-note {
  position: absolute; left: 14px; bottom: 14px; z-index: 5;
  font: 500 14px "Afacad", sans-serif; padding: 6px 12px; border-radius: 99px;
  background: rgba(0, 0, 0, .6); pointer-events: none;
}
.hl-ctl {
  position: absolute; right: 14px; bottom: 12px; z-index: 6;
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 99px;
  background: rgba(0, 0, 0, .6); cursor: pointer;
}
.hl-ctl button { all: unset; cursor: pointer; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 18px; color: #fff; }
.hl-ctl button:hover, .hl-ctl button:focus-visible { background: #fff3; }
.hl-ctl .hl-d { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: #fff5; transition: .25s; }
.hl-ctl .hl-d.on { background: #fff; width: 24px; border-radius: 5px; }
.hl-pg { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 6; background: #fff2; }
.hl-pg i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--hl-cyan), var(--hl-magenta)); }
.hl-pg i.run { animation: hl-pg var(--hl-ms, 9000ms) linear forwards; }
@keyframes hl-pg { to { width: 100%; } }

@media (hover: none) { .hl-note { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hl-ph, .hl-chip, .hl-card, .hl-aa, .hl-cell, .hl-pg i.run { animation: none; }
}

/* ===== scenes (right-hand visual) ===== */
.hl-code { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.hl-code i { display: block; height: 9px; border-radius: 6px; }
.hl-bars { display: flex; align-items: flex-end; gap: 8px; }
.hl-bars b { flex: 1; border-radius: 8px 8px 4px 4px; }
.hl-logo { position: relative; }
.hl-logo i { position: absolute; top: 50%; left: 50%; height: 68%; aspect-ratio: 1; }
.hl-logo i:nth-child(1) { border-radius: 50%; transform: translate(-80%, -50%); }
.hl-logo i:nth-child(2) { border-radius: 16%; transform: translate(-20%, -50%) rotate(10deg); }
.hl-aa {
  position: absolute; right: 0; bottom: 4%; width: 34%; aspect-ratio: 1; border-radius: 18px;
  display: grid; place-items: center; font: 700 clamp(28px, 4.5vw, 64px)/1 "Afacad", sans-serif;
  animation: hl-fl 4.5s ease-in-out infinite alternate;
}
.hl-ph.big { left: 22%; right: auto; width: 34%; height: 92%; bottom: 0; }
.hl-card {
  position: absolute; border-radius: 14px; padding: 10px 12px; display: flex; align-items: center; gap: 10px;
  animation: hl-fl 4.5s ease-in-out infinite alternate;
}
.hl-card span { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.hl-card i { height: 8px; flex: 1; border-radius: 6px; }
.hl-card.c1 { right: 2%; top: 24%; width: 36%; }
.hl-card.c2 { right: 8%; top: 54%; width: 34%; animation-direction: alternate-reverse; }
.hl-card.c3 { right: 0; bottom: 10%; width: 38%; }
.hl-grid {
  position: absolute; inset: 10% 3% 6% 3%; display: grid; gap: 10px;
  grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr);
}
.hl-cell { display: block; border-radius: 12px; }
.hl-cell.wide { grid-column: span 2; }
.hl-cell.on-a, .hl-cell.on-b, .hl-cell.on-c { animation: hl-pulse 3s ease-in-out infinite alternate; }
.hl-cell.on-b { animation-delay: -1s; }
.hl-cell.on-c { animation-delay: -2s; }
@keyframes hl-pulse { to { transform: scale(.93); } }

/* sketch (wireframe) look */
.hl-wf .hl-code i { background: rgba(67, 210, 224, .55); }
.hl-wf .hl-bars b, .hl-wf .hl-card, .hl-wf .hl-card span, .hl-wf .hl-aa, .hl-wf .hl-logo i, .hl-wf .hl-cell {
  border: 1.5px dashed rgba(67, 210, 224, .8); background: rgba(123, 47, 247, .14);
}
.hl-wf .hl-card i { background: rgba(67, 210, 224, .45); }
.hl-wf .hl-cell.on-b { border-color: rgba(255, 120, 230, .8); }
.hl-wf .hl-cell.on-c { border-color: rgba(240, 164, 0, .9); }

/* finished look */
.hl-fin .hl-code i { background: var(--hl-cyan); }
.hl-fin .hl-code i:nth-child(even) { background: rgba(255, 255, 255, .55); }
.hl-fin .hl-code i:nth-child(3) { background: #ff2fd6; }
.hl-fin .hl-bars b { background: linear-gradient(180deg, var(--hl-magenta), var(--hl-purple)); }
.hl-fin .hl-bars b:last-child { background: linear-gradient(180deg, var(--hl-gold), #ff7a2f); }
.hl-fin .hl-card { background: rgba(52, 28, 128, .78); border: 1px solid rgba(255, 255, 255, .3); }
.hl-fin .hl-card span { background: var(--hl-cyan); }
.hl-fin .hl-card.c2 span { background: var(--hl-gold); }
.hl-fin .hl-card i { background: rgba(255, 255, 255, .6); }
.hl-fin .hl-logo i:nth-child(1) { background: var(--hl-cyan); }
.hl-fin .hl-logo i:nth-child(2) { background: linear-gradient(120deg, var(--hl-purple), var(--hl-magenta)); opacity: .92; }
.hl-fin .hl-aa { background: linear-gradient(160deg, #1b0b4a, var(--hl-purple)); border: 2px solid var(--hl-cyan); color: #fff; }
.hl-fin .hl-cell { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); }
.hl-fin .hl-cell.on-a { background: var(--hl-cyan); border-color: var(--hl-cyan); }
.hl-fin .hl-cell.on-b { background: linear-gradient(120deg, var(--hl-purple), var(--hl-magenta)); border-color: transparent; }
.hl-fin .hl-cell.on-c { background: var(--hl-gold); border-color: var(--hl-gold); }

/* ===== tablet / mobile: smaller version of the same scene, below the text ===== */
@media (max-width: 820px) {
  .hl-layer { padding-top: calc(var(--hdr-full, 90px) + 8px); }
  .hl-body { grid-template-columns: 1fr; align-content: center; gap: 18px; }
  .hl-h1 { font-size: clamp(30px, 8.5vw, 46px); margin-bottom: 12px; }
  .hl-body p { font-size: 16px; margin-bottom: 18px; max-width: 36ch; }
  .hl-btn { padding: 12px 22px; font-size: 16px; }
  .hl-mock { aspect-ratio: auto; width: min(100%, 320px); height: clamp(130px, 24vh, 210px); max-height: none; justify-self: start; }
  .hl-win { padding: 10px; gap: 8px; border-radius: 14px; }
  .hl-chip { padding: 6px 12px; }
  .hl-note { display: none; }
}
/* very short screens: drop the visual so the text never gets clipped */
@media (max-width: 820px) and (max-height: 700px) { .hl-mock { display: none; } }

/* ===========================================================================
   Scene content v2: every slide shows real content from what MADDS builds.
   Sizes use em, and the base font-size scales with the width of the visual (cqw),
   so the same markup works on desktop, tablet and phone.
   =========================================================================== */
.hl-mock { container-type: inline-size; }
.hl-sc { position: absolute; inset: 0; font: 500 12px/1.35 "Afacad", system-ui, sans-serif; font-size: clamp(8px, 2.15cqw, 14px); }
.hl-sc em, .hl-sc i { font-style: normal; }

/* floating info cards (all slides) */
.hl-sc .hl-card { padding: .65em .8em; gap: .7em; border-radius: 1em; }
.hl-sc .hl-card span { width: 2.3em; height: 2.3em; display: grid; place-items: center; font-weight: 800; font-size: 1em; }
.hl-ct { min-width: 0; line-height: 1.15; }
.hl-ct b { display: block; font-size: 1em; font-weight: 700; white-space: nowrap; }
.hl-ct small { display: block; font-size: .8em; opacity: .8; white-space: nowrap; }
.hl-fin .hl-card span { color: var(--hl-navy); }

/* ---------- 1. development: monitor with code ---------- */
.hl-mon { position: absolute; left: 2%; top: 4%; width: 88%; height: 86%; display: flex; flex-direction: column; align-items: center; }
.hl-scr { width: 100%; flex: 1; min-height: 0; border-radius: 1.2em; padding: .55em; display: flex; }
.hl-ed {
  flex: 1; min-width: 0; border-radius: .75em; overflow: hidden; display: flex; flex-direction: column;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
.hl-tabs { display: flex; align-items: flex-end; gap: .25em; padding: .55em .7em 0; font-size: .82em; }
.hl-tabs span { padding: .35em .8em; border-radius: .5em .5em 0 0; opacity: .6; }
.hl-tabs span.on { opacity: 1; }
.hl-src { flex: 1; min-height: 0; overflow: hidden; padding: .7em .8em; font-size: .95em; line-height: 1.55; }
.hl-ln { display: flex; white-space: pre; opacity: 0; transform: translateX(-6px); animation: hl-in .45s ease forwards; animation-delay: calc(var(--i) * .17s + .25s); }
.hl-ln em { width: 2em; flex: none; text-align: right; margin-right: 1em; opacity: .4; }
@keyframes hl-in { to { opacity: 1; transform: none; } }
.hl-caret { display: inline-block; width: .5em; height: 1.1em; margin-left: .2em; vertical-align: -.2em; background: currentColor; animation: hl-blink 1s steps(1) infinite; }
@keyframes hl-blink { 50% { opacity: 0; } }
.hl-stb { display: flex; justify-content: space-between; gap: .6em; padding: .4em .8em; font-size: .78em; white-space: nowrap; overflow: hidden; }
.hl-neck { flex: none; width: 9%; height: 6%; }
.hl-base { flex: none; width: 30%; height: 2.4%; border-radius: 99px; }

/* sketch look: one tint, dashed outlines */
.hl-wf .hl-scr, .hl-wf .hl-ps, .hl-wf .ps-k, .hl-wf .ps-r, .hl-wf .ps-b, .hl-wf .ps-r em,
.hl-wf .st-btn, .hl-wf .st-pal b, .hl-wf .gr-kpis div, .hl-wf .gr-ch span { border: 1.5px dashed rgba(67, 210, 224, .8); background: rgba(123, 47, 247, .14); }
.hl-wf .hl-ed { border: 1.5px dashed rgba(67, 210, 224, .5); color: #c9f4f8; }
.hl-wf .hl-neck, .hl-wf .hl-base { background: rgba(67, 210, 224, .4); }
.hl-wf .hl-tabs span.on { border: 1.5px dashed rgba(67, 210, 224, .6); border-bottom: 0; }

/* finished look: syntax colours, glass monitor */
.hl-fin .hl-scr { background: linear-gradient(160deg, #3a3f66, #15173f); border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .75); }
.hl-fin .hl-ed { background: #0c0e2b; color: #d9ddff; }
.hl-fin .hl-tabs { background: #14163a; }
.hl-fin .hl-tabs span.on { background: #0c0e2b; color: #fff; box-shadow: inset 0 2px 0 var(--hl-cyan); }
.hl-fin .hl-stb { background: linear-gradient(90deg, var(--hl-purple), var(--hl-magenta)); color: #fff; }
.hl-fin .hl-k { color: #ff7ae5; }
.hl-fin .hl-f { color: #6ee7f2; }
.hl-fin .hl-s { color: #ffd277; }
.hl-fin .hl-n { color: #ff9d57; }
.hl-fin .hl-c { color: #7f86b8; font-style: italic; }
.hl-fin .hl-neck { background: linear-gradient(90deg, #232650, #4a4f86, #232650); }
.hl-fin .hl-base { background: linear-gradient(90deg, #232650, #5a5fa0, #232650); }

/* keep the build-status card clear of the monitor's status bar */
.hl-scene-dev .hl-card.c3 { bottom: 0; }

/* ---------- 2. products: real app screen ---------- */
.hl-scene-product .hl-ph.big { display: block; padding: .5em; border-radius: 2.1em; }
.hl-ps { position: relative; height: 100%; border-radius: 1.65em; padding: 1.5em .7em .6em; display: flex; flex-direction: column; gap: .5em; overflow: hidden; }
.hl-ps::before { content: ""; position: absolute; top: .5em; left: 50%; width: 32%; height: .55em; border-radius: 99px; transform: translateX(-50%); background: currentColor; opacity: .35; }
.ps-h { display: flex; flex-direction: column; line-height: 1.1; }
.ps-h small { font-size: .8em; opacity: .75; }
.ps-h strong { font-size: 1.35em; }
.ps-k { border-radius: .9em; padding: .6em .7em; display: grid; grid-template-columns: 1fr auto; align-items: end; }
.ps-k strong { font-size: 2em; line-height: 1; }
.ps-k em { font-size: .85em; font-weight: 700; }
.ps-k small { grid-column: 1 / -1; font-size: .8em; opacity: .85; }
.ps-r { display: flex; align-items: center; gap: .5em; padding: .45em .55em; border-radius: .7em; }
.ps-r > div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.ps-r strong { font-size: .9em; white-space: nowrap; }
.ps-r small { font-size: .72em; opacity: .7; }
.ps-r em { font-size: .72em; font-weight: 700; padding: .2em .55em; border-radius: 99px; }
.ps-b { margin-top: auto; text-align: center; font-weight: 700; padding: .55em; border-radius: 99px; }
.hl-fin .hl-ps { background: rgba(255, 255, 255, .07); }
.hl-fin .ps-k { background: linear-gradient(120deg, var(--hl-purple), var(--hl-magenta)); }
.hl-fin .ps-r { background: rgba(255, 255, 255, .1); }
.hl-fin .ps-r em { background: var(--hl-cyan); color: var(--hl-navy); }
.hl-fin .ps-b { background: var(--hl-gold); color: var(--hl-navy); }
.hl-scene-product .hl-card.c1 { width: 42%; }
.hl-scene-product .hl-card.c2 { width: 42%; right: 4%; }

/* ---------- 3. design: branded website, palette and typeface ---------- */
.hl-site { grid-template-rows: auto 1fr auto; }
.st-body { display: grid; grid-template-rows: auto 1fr; gap: .9em; min-height: 0; }
.st-nav { display: flex; align-items: center; gap: 1.1em; font-size: .85em; }
.st-nav em { opacity: .8; }
.st-logo { display: flex; align-items: center; gap: .45em; margin-right: auto; }
.st-logo strong { font-size: 1.15em; }
.st-mk { width: 1.4em; height: 1.4em; border-radius: 50%; display: block; }
.st-hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1em; align-items: center; min-height: 0; }
.st-hero > div:first-child { display: flex; flex-direction: column; gap: .6em; align-items: flex-start; }
.st-hero strong { font-size: 1.9em; line-height: 1.05; letter-spacing: -.01em; }
.st-hero span:not(.st-btn) { font-size: .9em; opacity: .85; }
.st-btn { padding: .45em 1.1em; border-radius: 99px; font-weight: 700; font-size: .9em; }
.st-hero .hl-logo { align-self: stretch; min-height: 5em; }
.st-pal { display: flex; gap: .5em; width: 58%; }
.st-pal b { flex: 1; height: 1.6em; border-radius: .5em; }
.hl-sc .hl-aa { font-size: 4.4em; gap: 0; align-content: center; }
.hl-aa small { font: 600 .26em "Afacad", sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.hl-fin .st-mk { background: linear-gradient(120deg, var(--hl-purple), var(--hl-magenta)); }
.hl-fin .st-btn { background: linear-gradient(90deg, var(--hl-purple), var(--hl-magenta)); color: #fff; }
.hl-fin .st-pal b:nth-child(1) { background: var(--hl-purple); }
.hl-fin .st-pal b:nth-child(2) { background: var(--hl-magenta); }
.hl-fin .st-pal b:nth-child(3) { background: var(--hl-cyan); }
.hl-fin .st-pal b:nth-child(4) { background: var(--hl-gold); }

/* ---------- 4. growth: marketing dashboard ---------- */
.hl-dash { grid-template-rows: auto 1fr auto; }
.gr-body { display: grid; grid-template-rows: auto 1fr; gap: .8em; min-height: 0; }
.gr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.gr-kpis div { border-radius: .8em; padding: .5em .7em; display: flex; flex-direction: column; line-height: 1.1; }
.gr-kpis small { font-size: .78em; opacity: .8; }
.gr-kpis strong { font-size: 1.6em; }
.gr-ch { display: flex; gap: .5em; font-size: .85em; font-weight: 600; }
.gr-ch span { padding: .25em .9em; border-radius: 99px; }
.hl-fin .gr-kpis div { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); }
.hl-fin .gr-kpis div:first-child strong { color: var(--hl-cyan); }
.hl-fin .gr-ch span { background: rgba(255, 255, 255, .14); }
.hl-fin .gr-ch span:nth-child(1) { background: var(--hl-cyan); color: var(--hl-navy); }

/* ---------- 5. matrix: services as tiles ---------- */
.hl-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 600; font-size: 1.1em; line-height: 1.1; padding: .3em; }
.hl-cell strong { font-size: 1.15em; }
.hl-cell small { font-weight: 500; font-size: .75em; opacity: .85; margin-top: .3em; }
.hl-fin .hl-cell.on-a, .hl-fin .hl-cell.on-c { color: var(--hl-navy); }

@media (prefers-reduced-motion: reduce) {
  .hl-ln { animation: none; opacity: 1; transform: none; }
  .hl-caret { animation: none; }
}
@media (max-width: 820px) {
  .hl-tabs, .hl-stb { display: none; }
  .hl-src { line-height: 1.35; padding: .5em .6em; }
  .st-hero span:not(.st-btn), .st-nav em { display: none; }
  .hl-sc .hl-win { padding: .8em; }
  .ps-r.x { display: none; }
}


/* ===== smooth slide change: old slide fades out, new one fades in (timing is set in hero-lens.js) ===== */
.hl-layer::before { transition: opacity .6s ease; }
.hl-layer .hl-body { transition: opacity .6s ease, transform .6s ease; }
.hl.is-out .hl-layer::before { opacity: 0; }
.hl.is-out .hl-layer .hl-body { opacity: 0; transform: translateY(-14px); }
.hl-body > div:first-child { animation: hl-up .9s cubic-bezier(.22, .61, .36, 1) both; }
.hl-body .hl-mock { animation: hl-up 1s cubic-bezier(.22, .61, .36, 1) .15s both; }
@keyframes hl-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hl-layer::before, .hl-layer .hl-body { transition: none; }
  .hl-body > div:first-child, .hl-body .hl-mock { animation: none; }
}