/* ═══════════════════════════════════════════════════════════════════════════
   M Themes 2.0 — cinematic layer.
   Motion tokens, business sections (products, process, testimonials, FAQ),
   product pages, icon system, and the choreography styles driven by motion.js.
   All motion is transform/opacity only and honors prefers-reduced-motion.
   Design and Develop by Mambu Enterprise / Peter Mambu.
   ═══════════════════════════════════════════════════════════════════════════ */

.gateway-root {
  /* motion tokens — one rhythm for the whole site */
  --m-ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* expo-out: entrances  */
  --m-ease-in: cubic-bezier(0.7, 0, 0.84, 0);          /* expo-in: exits       */
  --m-dur-1: 180ms;  /* micro     */
  --m-dur-2: 320ms;  /* standard  */
  --m-dur-3: 700ms;  /* reveal    */
  --m-dur-4: 1100ms; /* hero      */
  /* z-scale: content(1) chrome(10) progress(50) toast(90) aura(95) */
}

/* ── Scroll progress hairline ───────────────────────────────────────────── */
.m-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  z-index: 50; pointer-events: none;
}

/* ── Cursor aura (pointer:fine only; motion.js drives the transform) ────── */
.m-aura {
  position: fixed; left: 0; top: 0; width: 340px; height: 340px;
  margin: -170px 0 0 -170px; border-radius: 50%;
  background: radial-gradient(circle, var(--g-spot) 0%, transparent 62%);
  pointer-events: none; z-index: 95; opacity: 0;
  transition: opacity 600ms var(--m-ease-out);
  will-change: transform;
}
body.m-aura-on .m-aura { opacity: 1; }
@media (pointer: coarse) { .m-aura { display: none; } }

/* ── Hero choreography: split words rise in sequence ────────────────────── */
[data-split] .m-word { display: inline-block; }
.m-split-ready [data-split] .m-word,
[data-split].m-split-ready .m-word {
  transform: translateY(0); opacity: 1;
  transition: transform var(--m-dur-4) var(--m-ease-out), opacity var(--m-dur-3) ease-out;
  transition-delay: var(--m-word-delay, 0ms);
}
.m-split-set [data-split] .m-word,
[data-split].m-split-set .m-word { transform: translateY(0.85em); opacity: 0; transition: none; }

/* magnetic buttons: JS moves them; CSS springs them home */
[data-magnetic], .hero-btn, .cta-btn, .header-cta .g-btn {
  will-change: transform;
  transition: transform 380ms var(--m-ease-out), background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

/* parallax layers (motion.js translates; CSS only promises smoothness) */
[data-parallax] { will-change: transform; }

/* ── Icon system: stroke-drawn on reveal ────────────────────────────────── */
.m-icon { display: inline-flex; color: var(--accent); }
.m-icon svg { width: 24px; height: 24px; }
.m-icon-feature svg { width: 30px; height: 30px; }
.m-icon-card svg { width: 34px; height: 34px; }
.m-icon-hero svg { width: 64px; height: 64px; }
.m-icon-quote svg { width: 26px; height: 26px; }
.m-icon .icon-stroke { stroke-dasharray: 200; stroke-dashoffset: 0; }
.g-reveal:not(.in) .m-icon .icon-stroke { stroke-dashoffset: 200; }
.g-reveal.in .m-icon .icon-stroke {
  animation: m-draw 1200ms var(--m-ease-out) forwards;
}
@keyframes m-draw { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }

/* ── Products showcase ──────────────────────────────────────────────────── */
.section-products { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 72px; }
.section-products .g-rule, .product-related .g-rule, .product-features .g-rule { margin-bottom: 40px; }
.products-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.product-card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 34px 30px 28px; border-radius: 6px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--g-line);
  box-shadow: 0 10px 32px var(--shadow);
  transition: transform var(--m-dur-2) var(--m-ease-out), box-shadow var(--m-dur-2) var(--m-ease-out);
  will-change: transform;
}
.product-card:hover { transform: translateY(-8px); box-shadow: 0 26px 60px var(--shadow), 0 0 0 1px var(--g-ring); }
.product-card-num {
  position: absolute; top: 18px; right: 22px; font-size: 52px; line-height: 1;
  color: var(--accent2); opacity: 0.35;
}
.product-card-title { margin: 6px 0 0; font-size: 27px; line-height: 1.15; color: var(--text); }
.product-card-tag { margin: 0; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--dim); }
.product-card-cat { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.product-card .svc-explore { margin-top: auto; padding-top: 12px; }

/* ── Product single ─────────────────────────────────────────────────────── */
.product-hero {
  position: relative; z-index: 1; display: flex; justify-content: center;
  padding: 96px 24px 80px; background: var(--g-hero-bg); overflow: hidden;
}
.product-hero-inner { display: grid; justify-items: center; text-align: center; gap: 16px; max-width: 820px; }
.product-eyebrow {
  margin: 0; display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);
}
.product-version {
  padding: 3px 10px; border-radius: 999px; font-size: 10px; letter-spacing: 0.08em;
  border: 1px solid var(--g-line); color: var(--dim);
}
.product-hero-mark { color: var(--accent2); opacity: 0.9; }
.product-title { margin: 0; font-size: clamp(38px, 5.4vw, 72px); line-height: 1.03; color: var(--text); }
.product-tagline { margin: 0; font-family: var(--g-serif); font-size: clamp(19px, 2.2vw, 26px); font-style: italic; color: var(--accent3); }
.product-lede { margin: 0; max-width: 62ch; font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--dim); text-wrap: pretty; }
.product-cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.product-price { font-size: 13px; font-weight: 500; color: var(--dim); }

.product-features { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 72px; }
.features-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.feature-card {
  display: grid; gap: 12px; align-content: start; padding: 28px 26px;
  border-radius: 6px; background: var(--surface); border: 1px solid var(--g-line);
  transition: transform var(--m-dur-2) var(--m-ease-out), box-shadow var(--m-dur-2) var(--m-ease-out);
}
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px var(--shadow); }
.feature-title { margin: 0; font-size: 21px; color: var(--text); }
.feature-desc { margin: 0; font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--dim); }

.product-stats { margin: 0; }
.product-related { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 80px; }

/* license verify widget */
.product-license { position: relative; z-index: 1; padding-top: 72px; }
.license-card { max-width: 720px; margin: 0 auto; padding: 36px; display: grid; gap: 22px; }
.license-head { display: flex; gap: 16px; align-items: flex-start; }
.license-title { margin: 0; font-size: 26px; color: var(--text); }
.license-sub { margin: 6px 0 0; font-size: 13px; font-weight: 300; color: var(--dim); }
.license-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.license-form .form-field { flex: 1; min-width: 240px; }
.license-result {
  padding: 14px 16px; border-radius: 4px; font-size: 13.5px;
  border: 1px solid var(--g-line); background: var(--g-input-bg); color: var(--text);
}
.license-result.ok { border-color: color-mix(in srgb, var(--ok, #2F855A) 50%, transparent); }
.license-result.bad { border-color: color-mix(in srgb, var(--danger, #C53030) 50%, transparent); }
.license-result .seats { display: block; margin-top: 6px; font-size: 12px; color: var(--dim); }

/* ── Process ────────────────────────────────────────────────────────────── */
.section-process { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 72px; }
.section-process .g-rule { margin-bottom: 44px; }
.process-track {
  list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  position: relative;
}
.process-step {
  position: relative; display: grid; gap: 12px; align-content: start;
  padding: 30px 26px 26px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--g-line);
  backdrop-filter: blur(10px);
}
.process-num {
  font-size: 46px; line-height: 1; color: var(--accent2); opacity: 0.5;
}
.process-title { margin: 0; font-size: 22px; color: var(--text); }
.process-desc { margin: 0; font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--dim); }

/* ── Testimonials (navy band, editorial quotes) ─────────────────────────── */
.section-testimonials { position: relative; z-index: 1; padding: 68px 0; background: var(--g-band-bg); color: var(--g-band-text); }
.section-testimonials .g-rule-dark { margin-bottom: 40px; }
.quotes-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.quote-card {
  margin: 0; display: grid; gap: 14px; align-content: start;
  padding: 30px 28px; border-radius: 4px;
  background: var(--g-band-card-bg); border: 1px solid var(--g-band-card-border);
}
.quote-card .m-icon { color: var(--g-band-accent); }
.quote-text { margin: 0; font-size: 19px; line-height: 1.45; font-weight: 500; color: var(--g-band-text); text-wrap: pretty; }
.quote-by { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-band-accent); }
.quote-by span { color: var(--g-band-dim); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.section-faq { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 84px; }
.section-faq .g-rule { margin-bottom: 40px; }
.faq-list { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item {
  border: 1px solid var(--g-line); border-radius: 4px;
  background: var(--surface); overflow: hidden;
}
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 500; color: var(--text);
  transition: color var(--m-dur-1) ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--accent3); }
.m-icon-chevron svg { width: 18px; height: 18px; transition: transform var(--m-dur-2) var(--m-ease-out); }
.faq-item[open] .m-icon-chevron svg { transform: rotate(180deg); }
.faq-a { margin: 0; padding: 0 22px 20px; font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--dim); max-width: 68ch; }

/* ── Aurora ribbons: two blurred brand-color fields drifting in the hero ── */
.hero, .product-hero { position: relative; }
.hero::before, .hero::after,
.product-hero::before, .product-hero::after {
  content: ""; position: absolute; width: 46vw; height: 46vw;
  min-width: 380px; min-height: 380px; border-radius: 50%;
  filter: blur(70px); pointer-events: none; z-index: 0;
  will-change: transform;
}
.hero::before, .product-hero::before {
  left: -12vw; top: -18vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent2) 26%, transparent), transparent 65%);
  animation: m-drift-a 24s ease-in-out infinite alternate;
}
.hero::after, .product-hero::after {
  right: -14vw; bottom: -22vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 65%);
  animation: m-drift-b 30s ease-in-out infinite alternate;
}
.hero-inner, .product-hero-inner { position: relative; z-index: 1; }
@keyframes m-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(9vw, 6vw, 0) scale(1.18); } }
@keyframes m-drift-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-8vw, -5vw, 0) scale(0.94); } }

/* ── Accent word: the headline's closing word lands in italic gold serif ── */
.m-word-accent { font-style: italic; color: var(--accent); }

/* ── Marquee ribbon ─────────────────────────────────────────────────────── */
.m-marquee {
  position: relative; z-index: 1; overflow: hidden; padding: 26px 0;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.m-marquee-track { display: flex; width: max-content; animation: m-marquee 46s linear infinite; will-change: transform; }
.m-marquee:hover .m-marquee-track { animation-play-state: paused; }
.m-marquee-run { display: flex; align-items: center; }
.m-marquee-word {
  font-size: clamp(22px, 2.6vw, 34px); font-weight: 600; white-space: nowrap;
  color: var(--dim); padding: 0 26px; transition: color var(--m-dur-1) ease;
}
.m-marquee-word:hover { color: var(--accent3); }
.m-marquee-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent2); flex: none; }
@keyframes m-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ── Sheen sweep on product cards ───────────────────────────────────────── */
.product-card::after {
  content: ""; position: absolute; inset: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--accent2) 20%, transparent), transparent);
  transform: translateX(-140%) skewX(-18deg);
}
.product-card:hover::after { animation: m-sheen 900ms var(--m-ease-out); }
@keyframes m-sheen { to { transform: translateX(340%) skewX(-18deg); } }

/* ── Buttons: the arrow leans forward on hover ──────────────────────────── */
.svc-explore, .entry-more { transition: color var(--m-dur-1) ease, letter-spacing var(--m-dur-2) var(--m-ease-out); }
.svc-explore:hover, .entry-more:hover { letter-spacing: 0.2em; }

/* ── Process: a gold thread connects the four stages (desktop) ──────────── */
@media (min-width: 1024px) {
  .process-track::before {
    content: ""; position: absolute; left: 4%; right: 4%; top: 54px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent2), var(--accent2), transparent);
    opacity: 0.5;
  }
  .process-step { z-index: 1; }
}

/* ── Testimonials: ghost quotation watermark ────────────────────────────── */
.quote-card { position: relative; overflow: hidden; }
.quote-card::before {
  content: "\201C"; position: absolute; top: -30px; right: 6px;
  font-family: var(--g-serif); font-size: 150px; line-height: 1;
  color: var(--g-band-accent); opacity: 0.08; pointer-events: none;
}

/* ── FAQ: answers breathe in ────────────────────────────────────────────── */
.faq-item[open] .faq-a { animation: m-faq-in var(--m-dur-2) var(--m-ease-out); }
@keyframes m-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Navigation: soft-3D embossed rail ──────────────────────────────────────
   The nav is a physical object: the menu sits on a raised rail, and every
   link is a key. Keys lift toward the viewer on hover and are pressed into
   the surface when they are the current page. Depth is modelled on a single
   light source above — a bright bevel on the top edge, a soft cast shadow
   below — and every colour is derived from the palette's own surface tokens,
   so the effect holds on all twelve palettes (light and dark alike).        */
.gateway-root {
  --m3d-hi: rgba(255, 255, 255, 0.92);
  --m3d-lo: color-mix(in srgb, var(--text, #16233D) 22%, transparent);
  --m3d-lo-soft: color-mix(in srgb, var(--text, #16233D) 9%, transparent);
  /* --surface sits one step lighter than --panel on every palette, so this
     gradient always runs light-at-the-top → dark-at-the-bottom (raised), and
     the reversed pair always reads as recessed. Both are palette-defined. */
  --m3d-face: linear-gradient(168deg, var(--surface), var(--panel));
  --m3d-face-in: linear-gradient(168deg, var(--panel), var(--surface));
}
/* Dark palettes invert the lighting maths: --text is light there, so a tint of
   it would cast a *glow* under the keys instead of a shadow. On a dark surface
   the shadow must be black and the top bevel only a whisper of white. */
body.m-palette-obsidian-gloss,
body.m-palette-smoke-glass,
body.m-palette-nebula-gradient,
body.m-palette-bordeaux-noir,
body.m-palette-midnight-cinema {
  --m3d-hi: rgba(255, 255, 255, 0.13);
  --m3d-lo: rgba(0, 0, 0, 0.58);
  --m3d-lo-soft: rgba(0, 0, 0, 0.32);
}
/* Terra Atelier is the odd one out: light cream panels on a terracotta ground.
   Its nav link colours are the light-on-dark set, and they only clear 4.5:1
   against the ground itself — so the rail is cut from the ground as a darker
   scrim rather than borrowed from --panel, which would leave cream on cream. */
body.m-palette-terra-atelier {
  --m3d-hi: rgba(255, 255, 255, 0.20);
  --m3d-lo: rgba(0, 0, 0, 0.45);
  --m3d-lo-soft: rgba(0, 0, 0, 0.24);
  --m3d-face: linear-gradient(168deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.20));
  --m3d-face-in: linear-gradient(168deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.10));
}

.site-header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.brand-wrap { justify-self: start; }
.site-header .site-nav { justify-self: center; }
.site-header .site-nav .menu { margin-left: 0; }
.header-cta { justify-self: end; margin-left: 0; }

@media (min-width: 901px) {
  /* the header is the 3D scene the keys move within */
  .site-header { perspective: 900px; }

  /* the rail: a raised capsule the keys are seated in */
  .site-header .site-nav {
    padding: 6px; border-radius: 999px;
    background: var(--m3d-face);
    border: 1px solid var(--hair);
    transform-style: preserve-3d;
    box-shadow:
      inset 0 1px 0 var(--m3d-hi),
      inset 0 2px 4px var(--m3d-lo-soft),
      inset 0 -1px 0 var(--m3d-hi),
      0 14px 30px var(--m3d-lo-soft),
      0 4px 10px var(--m3d-lo);
  }
  .site-header .site-nav .menu { gap: 2px; margin: 0; }
  .site-header .site-nav .menu > li { display: block; }
  .site-header .site-nav .menu a {
    display: block; padding: 10px 17px; border-radius: 999px;
    border: 1px solid transparent; transform: translateZ(0);
    transition:
      transform var(--m-dur-2) var(--m-ease-out),
      box-shadow var(--m-dur-2) var(--m-ease-out),
      background var(--m-dur-1) ease, border-color var(--m-dur-1) ease,
      color var(--m-dur-1) ease;
  }
  /* hover — the key rises out of the rail toward the viewer */
  .site-header .site-nav .menu a:hover {
    transform: translateY(-2px) translateZ(18px);
    background: var(--m3d-face); border-color: var(--hair);
    box-shadow:
      inset 0 1px 0 var(--m3d-hi),
      0 9px 18px var(--m3d-lo),
      0 2px 5px var(--m3d-lo-soft);
  }
  /* current page — the key is pressed into the rail */
  .site-header .site-nav .current-menu-item > a,
  .site-header .site-nav .current_page_item > a {
    background: var(--m3d-face-in);
    border-color: color-mix(in srgb, var(--text, #16233D) 12%, transparent);
    transform: translateZ(0);
    box-shadow:
      inset 0 3px 6px var(--m3d-lo),
      inset 0 1px 2px var(--m3d-lo),
      inset 0 -1px 0 var(--m3d-hi);
  }
  /* press — any key travels back down into the surface */
  .site-header .site-nav .menu a:active {
    transform: translateY(0) translateZ(0);
    box-shadow: inset 0 3px 7px var(--m3d-lo), inset 0 1px 2px var(--m3d-lo);
  }
  .site-header .site-nav .menu a:focus-visible {
    outline: 2px solid var(--accent2, #C9A45C); outline-offset: 2px;
  }
}

/* ── Mobile navigation ──────────────────────────────────────────────────── */
/* the toggle is a 3D key too: raised at rest, pressed in while the menu is open */
.m-nav-toggle {
  display: none; position: relative; z-index: 60;
  width: 48px; height: 48px; padding: 0; border-radius: 50%;
  background: var(--m3d-face); border: 1px solid var(--hair); cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow:
    inset 0 1px 0 var(--m3d-hi),
    0 6px 14px var(--m3d-lo),
    0 2px 4px var(--m3d-lo-soft);
  transition:
    transform var(--m-dur-2) var(--m-ease-out),
    box-shadow var(--m-dur-2) var(--m-ease-out),
    border-color var(--m-dur-1) ease;
}
.m-nav-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--accent2);
  box-shadow: inset 0 1px 0 var(--m3d-hi), 0 10px 20px var(--m3d-lo), 0 3px 6px var(--m3d-lo-soft);
}
.m-nav-toggle:active,
body.m-nav-open .m-nav-toggle {
  transform: translateY(0);
  background: var(--m3d-face-in);
  box-shadow: inset 0 2px 6px var(--m3d-lo), inset 0 -1px 0 var(--m3d-hi);
}
.m-nav-toggle:focus-visible { outline: 2px solid var(--accent2, #C9A45C); outline-offset: 3px; }
.m-burger, .m-burger::before, .m-burger::after {
  display: block; width: 19px; height: 2px; border-radius: 2px;
  background: var(--text); transition: transform 300ms var(--m-ease-out), opacity 200ms ease;
}
.m-burger { position: relative; }
.m-burger::before, .m-burger::after { content: ""; position: absolute; left: 0; }
.m-burger::before { top: -6px; }
.m-burger::after { top: 6px; }
body.m-nav-open .m-burger { background: transparent; }
body.m-nav-open .m-burger::before { transform: translateY(6px) rotate(45deg); }
body.m-nav-open .m-burger::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto auto; gap: 12px; }
  .m-nav-toggle { display: inline-flex; }
  .header-cta { display: none; }

  /* the menu becomes a full-height panel that slides in from the right */
  .site-header .site-nav {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px);
    z-index: 55; display: block; justify-self: auto;
    background: var(--m3d-face);
    border-left: 1px solid var(--g-line);
    box-shadow:
      inset 1px 0 0 var(--m3d-hi),
      -24px 0 60px rgba(11, 18, 32, 0.28);
    padding: 96px 24px 40px;
    perspective: 700px;
    transform: translateX(100%); visibility: hidden;
    /* animate the slide, but flip visibility instantly (delayed on close so the
       panel stays on screen while it slides out) — never transition visibility
       itself, which interpolates unreliably. */
    transition: transform 420ms var(--m-ease-out), visibility 0s linear 420ms;
    overflow-y: auto; overscroll-behavior: contain;
  }
  body.m-nav-open .site-header .site-nav {
    transform: translateX(0); visibility: visible;
    transition: transform 420ms var(--m-ease-out), visibility 0s linear 0s;
  }
  /* every row is a raised 3D tile that presses in under the thumb */
  .site-header .site-nav .menu {
    flex-direction: column; align-items: stretch; gap: 10px; margin: 0;
    transform-style: preserve-3d;
  }
  .site-header .site-nav .menu > li { display: block; border-bottom: 0; }
  .site-header .site-nav .menu a {
    display: block; padding: 15px 18px; font-size: 14px; letter-spacing: 0.1em;
    border-radius: 14px; border: 1px solid var(--hair);
    background: var(--m3d-face); transform: translateZ(0);
    box-shadow:
      inset 0 1px 0 var(--m3d-hi),
      0 6px 14px var(--m3d-lo-soft),
      0 2px 4px var(--m3d-lo-soft);
    transition:
      transform var(--m-dur-2) var(--m-ease-out),
      box-shadow var(--m-dur-2) var(--m-ease-out),
      background var(--m-dur-1) ease, color var(--m-dur-1) ease;
  }
  .site-header .site-nav .menu a::after { display: none; }
  .site-header .site-nav .menu a:active {
    transform: translateY(1px) translateZ(-8px);
    background: var(--m3d-face-in);
    box-shadow: inset 0 2px 6px var(--m3d-lo), inset 0 -1px 0 var(--m3d-hi);
  }
  /* the current page reads as already pressed in, with a gold edge */
  .site-header .site-nav .current-menu-item > a,
  .site-header .site-nav .current_page_item > a {
    background: var(--m3d-face-in);
    border-color: color-mix(in srgb, var(--accent2, #C9A45C) 55%, transparent);
    box-shadow: inset 0 2px 6px var(--m3d-lo), inset 0 -1px 0 var(--m3d-hi);
  }
  /* a CTA inside the panel replaces the hidden header button */
  .m-nav-panel-cta { display: block; margin-top: 26px; }
  .m-nav-panel-cta .cta-3d { display: flex; justify-content: center; }
  /* The header owns a stacking context (position:relative; z-index:10), so the
     panel's z-index is scoped to it. Lift the whole header above the scrim
     while the menu is open — otherwise the scrim paints over the panel and
     swallows every tap. */
  body.m-nav-open .site-header { z-index: 60; }

  /* backdrop */
  .m-nav-scrim {
    position: fixed; inset: 0; z-index: 50; background: rgba(8, 12, 20, 0.5);
    backdrop-filter: blur(3px); opacity: 0; pointer-events: none;
    transition: opacity 380ms ease;
  }
  body.m-nav-open .m-nav-scrim { opacity: 1; pointer-events: auto; }
  body.m-nav-open { overflow: hidden; }
}
@media (min-width: 901px) { .m-nav-panel-cta { display: none; } }

/* menu links: the pressed key of the current page carries a lit RGB thread
   along its floor — the indicator sits *inside* the recess, so it reads as a
   light source under the key rather than a text underline. */
.site-nav .menu a { position: relative; padding: 6px 2px; transition: color var(--m-dur-1) ease; }
.site-nav .menu a:hover { color: var(--accent3); }
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a { color: var(--accent3); }
.site-nav .current-menu-item > a::after,
.site-nav .current_page_item > a::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 6px; height: 2px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, #C9A45C, #7C5CD6, #2C5FBF, #1F8A5D, #C9A45C);
  background-size: 250% 100%;
  animation: m-rgb-slide 7s linear infinite, m-underline-breathe 4s ease-in-out infinite;
}
@media (max-width: 900px) {
  .site-nav .current-menu-item > a::after,
  .site-nav .current_page_item > a::after { left: 18px; right: auto; width: 26px; bottom: 10px; }
}
@keyframes m-rgb-slide { to { background-position: 250% 0; } }
@keyframes m-underline-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* reduced motion: keep every depth cue, drop the travel and the animation */
@media (prefers-reduced-motion: reduce) {
  .site-header .site-nav .menu a,
  .site-header .site-nav .menu a:hover,
  .site-header .site-nav .menu a:active,
  .m-nav-toggle, .m-nav-toggle:hover, .m-nav-toggle:active { transform: none !important; }
  .site-nav .current-menu-item > a::after,
  .site-nav .current_page_item > a::after {
    animation: none; background: var(--accent2, #C9A45C); opacity: 1;
  }
}

/* the CTA — an elegant, cinematic 3D pill: deep navy with a gold hairline,
   bevelled highlights, a soft glow and a light sheen that sweeps on hover. */
.cta-3d {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 14px 30px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: #F6F1E7 !important; text-decoration: none; white-space: nowrap;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 46%),
    linear-gradient(165deg, #26324c 0%, #151f33 55%, #0b1220 100%);
  border: 1px solid color-mix(in srgb, var(--accent2, #C9A45C) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -3px 8px rgba(0, 0, 0, 0.45),
    0 10px 22px rgba(11, 18, 32, 0.42),
    0 3px 8px rgba(11, 18, 32, 0.40);
  transition: transform 420ms var(--m-ease-out), box-shadow 420ms var(--m-ease-out), border-color 300ms ease;
  overflow: hidden;
}
/* cinematic light sheen that sweeps across on hover */
.cta-3d::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.24) 48%, transparent 64%);
  transform: translateX(-130%);
  transition: transform 800ms var(--m-ease-out);
}
.cta-3d:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent2, #C9A45C) 85%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -3px 8px rgba(0, 0, 0, 0.40),
    0 18px 38px rgba(11, 18, 32, 0.50),
    0 0 22px color-mix(in srgb, var(--accent2, #C9A45C) 32%, transparent);
}
.cta-3d:hover::after { transform: translateX(130%); }
.cta-3d:active { transform: translateY(0) scale(0.985); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(11, 18, 32, 0.42); }
.cta-3d:focus-visible { outline: 2px solid var(--accent2, #C9A45C); outline-offset: 3px; }
.cta-3d .cta-label { position: relative; z-index: 2; }
.cta-3d .cta-arrow {
  position: relative; z-index: 2; color: var(--accent2, #C9A45C);
  font-size: 15px; line-height: 1; transition: transform 380ms var(--m-ease-out);
}
.cta-3d:hover .cta-arrow { transform: translateX(4px); }

/* ── Hero slider: full-width 3D product carousel ────────────────────────── */
.hero-slider {
  position: relative; z-index: 1; overflow: hidden;
  min-height: clamp(560px, 82vh, 840px);
  perspective: 1600px;
  /* Single source of truth for the space the absolutely-positioned arrows and
     dots occupy at the foot of every slide (consumed by .hs-inner and
     .hs-inner-shot). The controls sit 30px up and are 44px tall, so anything
     below ~80px puts the CTA on top of them. Do not re-declare
     `.hs-inner { padding-bottom }` anywhere else — set this instead. */
  --hs-controls-clear: 88px;
}
/* NOTE: the small-screen overrides for this slider live further down, AFTER the
   `max-width: 980px` block — they share its specificity, so they only win if
   they come later in the file. Do not move them back up here. */
.hs-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; z-index: 1;
  transform: rotateY(30deg) translateZ(-520px) scale(0.9);
  transform-style: preserve-3d; will-change: transform, opacity;
  transition: transform 1000ms var(--m-ease-out), opacity 640ms ease;
}
.hero-slider.dir-prev .hs-slide { transform: rotateY(-30deg) translateZ(-520px) scale(0.9); }

/* the transition-effect wheel: every advance uses the next 3D treatment.
   fx-swing is the base state above; the rest re-stage the inactive slides. */
.hero-slider.fx-cube .hs-slide { transform-origin: 100% 50%; transform: rotateY(-84deg) translateZ(46px) scale(0.96); }
.hero-slider.fx-cube.dir-prev .hs-slide { transform-origin: 0% 50%; transform: rotateY(84deg) translateZ(46px) scale(0.96); }
.hero-slider.fx-zoom .hs-slide { transform: translateZ(-900px) scale(0.55); }
.hero-slider.fx-zoom.dir-prev .hs-slide { transform: translateZ(480px) scale(1.35); }
.hero-slider.fx-flip .hs-slide { transform-origin: 50% 100%; transform: rotateX(70deg) translateZ(-260px) scale(0.94); }
.hero-slider.fx-flip.dir-prev .hs-slide { transform-origin: 50% 0%; transform: rotateX(-70deg) translateZ(-260px) scale(0.94); }
.hero-slider.fx-door .hs-slide { transform-origin: 0% 50%; transform: rotateY(58deg) translateX(-6%) scale(0.97); }
.hero-slider.fx-door.dir-prev .hs-slide { transform-origin: 100% 50%; transform: rotateY(-58deg) translateX(6%) scale(0.97); }

/* active always wins, whatever the effect class (after the fx rules) */
.hero-slider .hs-slide.is-active {
  opacity: 1; pointer-events: auto; z-index: 2;
  transform: rotateY(0) rotateX(0) translateZ(0) translateX(0) scale(1);
}

/* per-slide accent particles */
.hs-particles { position: absolute; inset: 0; pointer-events: none; }
.hs-particle {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, var(--hs-accent), transparent 70%);
  opacity: 0.45; animation: goldFloat 8s ease-in-out infinite;
}
.hs-aura { position: absolute; inset: 0; pointer-events: none; }
.hs-aura::before, .hs-aura::after {
  content: ""; position: absolute; width: 44vw; height: 44vw;
  min-width: 340px; min-height: 340px; border-radius: 50%;
  filter: blur(72px);
}
.hs-aura::before {
  left: -10vw; top: -14vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--hs-accent) 24%, transparent), transparent 65%);
}
.hs-aura::after {
  right: -12vw; bottom: -18vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--hs-accent) 14%, transparent), transparent 65%);
}
.hs-mark {
  position: absolute; right: 4vw; top: 50%; transform: translateY(-50%);
  color: var(--hs-accent); opacity: 0.1; pointer-events: none;
}
.m-icon-hs svg { width: clamp(180px, 26vw, 380px); height: clamp(180px, 26vw, 380px); }

/* product mockup image — a static flex column beside the copy, tilted, floating */
.hs-shot {
  flex: 0 0 auto; z-index: 1; width: min(38vw, 420px); pointer-events: none;
  transform: perspective(1500px) rotateY(-11deg) rotateX(3deg);
}
.hs-shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 50px 100px rgba(0, 0, 0, 0.40),
    0 20px 44px rgba(0, 0, 0, 0.24),
    0 0 0 12px color-mix(in srgb, var(--hs-accent) 10%, transparent),
    0 0 0 1px color-mix(in srgb, var(--hs-accent) 42%, transparent);
  animation: m-float 6.5s ease-in-out infinite;
}
@keyframes m-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ── Circular product images (cards + product-page hero) ────────────────── */
.m-pshot { display: inline-block; line-height: 0; }
.m-pshot img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }

/* product-card avatar */
.m-pshot-card { width: 72px; }
.m-pshot-card img {
  border: 3px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 14px 30px var(--shadow), 0 6px 14px rgba(22, 35, 61, 0.14), 0 0 0 1px var(--g-line);
  transition: transform var(--m-dur-2) var(--m-ease-out), box-shadow var(--m-dur-2) var(--m-ease-out);
}
.product-card:hover .m-pshot-card img {
  transform: perspective(600px) rotateX(7deg) translateY(-4px) scale(1.06);
  box-shadow: 0 26px 50px var(--shadow), 0 10px 20px rgba(22, 35, 61, 0.2), 0 0 0 1px var(--g-ring);
}

/* product-page hero: circular avatar, centered above the title, floating */
.product-hero-mark.has-shot { position: static; transform: none; opacity: 1; margin: 0 auto 4px; }
.m-pshot-hero { width: clamp(150px, 20vw, 210px); }
.m-pshot-hero img {
  border: 6px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 44px 84px rgba(22, 35, 61, 0.28),
    0 16px 32px rgba(22, 35, 61, 0.18),
    0 0 0 10px color-mix(in srgb, var(--accent2) 10%, transparent),
    0 0 0 1px var(--g-line);
  animation: m-float 6s ease-in-out infinite;
}
/* copy + shot sit together as a tight, centered two-column pair */
.hs-slide.has-shot .hs-inner-shot {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: clamp(32px, 4vw, 72px);
  width: fit-content; max-width: min(1120px, 94vw); margin: 0 auto;
  text-align: left;
  /* must match .hs-inner — the controls are absolutely positioned over the
     slide, so every slide variant has to reserve the same clearance or the
     CTA row lands on top of the arrows and dots. */
  padding-bottom: var(--hs-controls-clear);
}
.hs-copy { flex: 0 1 520px; display: grid; gap: 16px; justify-items: start; }
.hs-copy .hs-text { max-width: 46ch; }
.hs-copy .hs-cta-row { justify-content: flex-start; }
/* the shot rises in with the slide's content choreography */
.hs-slide.is-active .hs-shot { animation: hsShot 1100ms var(--m-ease-out) both 260ms; }
@keyframes hsShot { from { opacity: 0; transform: perspective(1500px) rotateY(-20deg) rotateX(3deg) scale(0.9); } to { opacity: 1; transform: perspective(1500px) rotateY(-11deg) rotateX(3deg) scale(1); } }

@media (max-width: 980px) {
  /* stack the circular image above centered text */
  .hs-slide.has-shot .hs-inner-shot { flex-direction: column-reverse; gap: 26px; text-align: center; max-width: 640px; }
  .hs-copy { justify-items: center; max-width: 640px; }
  .hs-copy .hs-cta-row { justify-content: center; }
  .hs-shot { width: min(58vw, 230px); transform: perspective(1200px) rotateY(-6deg); }
  .hs-slide.is-active .hs-shot { animation: none; }
}
.hs-inner {
  position: relative; z-index: 2; display: grid; justify-items: center; text-align: center;
  gap: 16px; max-width: 900px; padding-top: 40px;
  padding-bottom: var(--hs-controls-clear);
}
.hs-kicker {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--hs-accent);
}
.hs-title { margin: 0; font-size: clamp(36px, 5.8vw, 74px); line-height: 1.03; color: var(--text); text-wrap: balance; }
.hs-tagline { margin: 0; font-size: clamp(19px, 2.3vw, 27px); font-style: italic; color: var(--hs-accent); }
.hs-text { margin: 0; max-width: 60ch; font-size: clamp(15px, 1.6vw, 18px); font-weight: 300; line-height: 1.65; color: var(--dim); text-wrap: pretty; }
.hs-cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.hs-price { font-size: 13px; font-weight: 500; color: var(--dim); }
.hs-slide .hero-btn { background: var(--hs-accent); }
.hs-slide .hero-btn:hover { filter: brightness(0.88); box-shadow: 0 8px 26px color-mix(in srgb, var(--hs-accent) 40%, transparent); }

/* content choreography: replays every time a slide becomes active */
@keyframes hsRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hsMark { from { opacity: 0; transform: translateY(-50%) scale(0.86) rotate(-4deg); } to { opacity: 0.1; transform: translateY(-50%) scale(1) rotate(0deg); } }
.hs-slide.is-active .hs-kicker  { animation: hsRise 700ms var(--m-ease-out) both 120ms; }
.hs-slide.is-active .hs-title   { animation: hsRise 900ms var(--m-ease-out) both 220ms; }
.hs-slide.is-active .hs-tagline { animation: hsRise 800ms var(--m-ease-out) both 340ms; }
.hs-slide.is-active .hs-text    { animation: hsRise 800ms var(--m-ease-out) both 430ms; }
.hs-slide.is-active .hs-cta-row { animation: hsRise 800ms var(--m-ease-out) both 540ms; }
.hs-slide.is-active .hs-mark    { animation: hsMark 1200ms var(--m-ease-out) both 200ms; }

.hs-controls {
  position: absolute; left: 0; right: 0; bottom: 30px; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 22px;
}
.hs-dots { display: flex; gap: 16px; }
.hs-dot {
  width: 9px; height: 9px; min-width: 9px; padding: 0;
  border: 1px solid var(--accent2); background: transparent; cursor: pointer;
  transform: rotate(45deg); transition: all var(--m-dur-1) ease; position: relative;
}
/* Invisible tap target. Keep `inset` ≤ half the gap: at -10px against a 12px
   gap each target was 29px wide on a 21px pitch, so neighbouring targets
   overlapped and a tap near the edge of one dot activated the next one. */
.hs-dot::after { content: ""; position: absolute; inset: -8px; }
.hs-dot.on { background: var(--accent); border-color: var(--accent); transform: rotate(45deg) scale(1.3); }
.hs-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3;
  background: color-mix(in srgb, var(--accent2) 18%, transparent);
}
.hs-progress span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  transform: scaleX(0); transform-origin: 0 50%;
}
.hs-progress span.run { animation: hsProgress var(--hs-interval, 7000ms) linear both; }
.hero-slider.paused .hs-progress span.run { animation-play-state: paused; }
@keyframes hsProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 860px) {
  .hs-mark { display: none; }

  /* Stacked layout: the copy sits under the product shot, so a slide is far
     taller than on desktop. Slides are absolutely positioned, so the slider
     cannot auto-size to them — and if the content ends up taller than the
     slider it overflows a *centred* flex box at BOTH ends, pushing the reserved
     bottom padding off-screen and dropping the CTA and price straight onto the
     arrows and dots. So: anchor the content to the top, and trim it to fit. */
  /* Reserve a band at the foot of the slider and stop the slide stack above
     it, so the copy and the controls occupy disjoint boxes. Overlap then
     becomes structurally impossible instead of a padding value that has to be
     re-tuned for every screen size and every length of product name.
     The slider grows to fit its tallest slide, and uses whatever height is
     left on screen when that is larger (svh = the stable small-viewport unit,
     so mobile browser chrome appearing mid-scroll doesn't resize the hero). */
  .hero-slider {
    --hs-bar: 76px;
    --hs-controls-clear: 10px;
    min-height: max(748px, calc(100svh - 108px));
  }
  .hs-slide { inset: 0 0 var(--hs-bar) 0; align-items: center; }
  .hs-controls { bottom: 20px; }
  .hs-inner, .hs-slide.has-shot .hs-inner-shot { padding-top: 16px; }
  .hs-inner { gap: 10px; }
  .hs-slide.has-shot .hs-inner-shot { gap: 12px; }
  .hs-shot { width: min(34vw, 132px); }
  /* price under the button instead of wrapped beside it — half the height */
  .hs-cta-row { flex-direction: column; gap: 10px; }
  .hs-text { font-size: 14.5px; line-height: 1.55; }
}
@media (max-width: 520px) {
  /* On a phone the kicker, title and tagline already carry the pitch; the
     supporting paragraph is what pushes the CTA and controls off-screen.
     Everything here is sized against the WORST slide (the longest title +
     two-line tagline), so no slide overruns the controls. */
  .hs-slide.has-shot .hs-text { display: none; }
  .hs-inner { gap: 8px; }
  .hs-slide.has-shot .hs-inner-shot { gap: 10px; }
  .hs-inner, .hs-slide.has-shot .hs-inner-shot { padding-top: 10px; }
  .hs-shot { width: min(28vw, 104px); }
  .hs-title { font-size: clamp(28px, 7.4vw, 40px); }
  .hs-tagline { font-size: clamp(16px, 4.2vw, 19px); }
}

/* ── Page-builder compatibility (Obsidian / Elementor / Divi / WPBakery) ── */
.builder-content { position: relative; z-index: 1; width: 100%; }
.builder-article { max-width: none; margin: 0; }
body.m-canvas { margin: 0; background: var(--bg, #EFF1F5); }
/* the builder's hydration root must never inherit editorial constraints */
#obsidian-frontend-root { max-width: none; font-family: inherit; }
/* ── Shortcode sections: behave inside builder columns & grid layouts ───── */
.m-shortcode { width: 100%; max-width: 100%; }
/* a section dropped into a builder column shouldn't add viewport gutters or
   huge vertical bands on top of the column's own padding */
.m-shortcode > section { padding-top: 34px; padding-bottom: 34px; }
.m-shortcode .gutter { padding-left: 0; padding-right: 0; }
/* full-bleed bands keep a little breathing room inside a column */
.m-shortcode .section-innovation .gutter,
.m-shortcode .section-testimonials .gutter { padding-left: 22px; padding-right: 22px; }
/* The hero slider is viewport-scale by nature, so it gets tamed inside a
   builder column — but ONLY on a page a builder actually owns. The theme's own
   front page renders its sections through these same shortcodes, and an
   unscoped rule here squashed the homepage hero until its content overflowed
   the slide and collided with the controls. */
body.m-builder .m-shortcode-hero-slider .hero-slider { min-height: clamp(460px, 60vh, 640px); }
/* grid-friendly: never force horizontal overflow inside a narrow column */
.m-shortcode .services-grid,
.m-shortcode .products-grid,
.m-shortcode .features-grid,
.m-shortcode .offer-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* any builder page renders edge-to-edge, with no theme prose clamp */
.m-builder .builder-content,
.m-builder .builder-article,
.m-builder .page-intro { max-width: none; width: 100%; margin-left: 0; margin-right: 0; }
.m-builder .section-page { padding-top: 0; }
.m-builder .elementor, .m-builder .et-l, .m-builder .et_builder_inner_content,
.m-builder .wpb_row, .m-builder .vc_row { width: 100%; max-width: none; }

/* ── 3D Showcase: eight slides on a rotating ring ───────────────────────── */
.section-showcase { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 80px; overflow: hidden; }
.section-showcase .g-rule { margin-bottom: 24px; }
.s3d {
  --s3d-r: 480px;            /* ring radius — motion.js scales it to viewport */
  --s3d-rot: 0deg;           /* current ring rotation */
  --s3d-step: 45deg;         /* 360 / 8 slides */
  position: relative; height: 420px;
  perspective: 1400px; perspective-origin: 50% 42%;
}
.s3d-stage {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--s3d-r) * -1)) rotateY(var(--s3d-rot));
  transition: transform 800ms var(--m-ease-out);
  will-change: transform;
}
.s3d.dragging .s3d-stage { transition: none; }
.s3d-slide {
  position: absolute; left: 50%; top: 50%;
  width: min(340px, 78vw); height: 330px;
  /* center: margin-left = -(width/2); max() picks the less-negative value */
  margin: -165px 0 0 max(-170px, -39vw);
  transform: rotateY(calc(var(--s3d-i) * var(--s3d-step))) translateZ(var(--s3d-r));
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 26px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--g-line);
  box-shadow: 0 18px 50px var(--shadow);
  backdrop-filter: blur(8px);
  transition: opacity var(--m-dur-3) ease;
  opacity: 0.6;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.s3d-slide.is-front { opacity: 1; box-shadow: 0 26px 64px var(--shadow), 0 0 0 1px var(--g-ring); }
.s3d-numeral { font-size: 40px; line-height: 1; color: var(--accent3); }
.s3d-tag { font-size: 9.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); }
.s3d-title { margin: 4px 0 0; font-size: 24px; line-height: 1.15; color: var(--text); }
.s3d-blurb { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--dim); }
.s3d-slide .svc-explore { margin-top: auto; align-self: flex-start; }
.s3d-controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 18px; }
.s3d-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--accent3); background: transparent;
  border: 1px solid var(--accent2); cursor: pointer;
  transition: all var(--m-dur-1) ease;
}
.s3d-btn:hover { background: var(--accent2); color: #fff; box-shadow: 0 6px 22px var(--glow); }
.s3d-dots { display: flex; gap: 10px; }
.s3d-dot {
  width: 8px; height: 8px; min-width: 8px; padding: 0; border-radius: 50%;
  border: 1px solid var(--accent2); background: transparent; cursor: pointer;
  transition: all var(--m-dur-1) ease; position: relative;
}
.s3d-dot::after { content: ""; position: absolute; inset: -10px; } /* 28px touch area */
.s3d-dot.on { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }
/* On phones the 3D ring is unusable — flatten it into a native, swipeable
   scroll-snap carousel (the JS switches to scroll mode at the same width). */
@media (max-width: 760px) {
  .s3d { height: auto; perspective: none; }
  .s3d-stage {
    position: static; transform: none !important; transform-style: flat;
    display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 6px 0 18px; scrollbar-width: none;
  }
  .s3d-stage::-webkit-scrollbar { display: none; }
  .s3d-slide {
    position: static; transform: none !important; opacity: 1 !important;
    margin: 0; width: auto; height: auto; min-height: 290px;
    flex: 0 0 min(82vw, 340px); scroll-snap-align: center;
    backface-visibility: visible; -webkit-backface-visibility: visible;
  }
  .s3d-slide:first-child { margin-left: max(0px, calc((100vw - min(82vw, 340px)) / 2 - 18px)); }
  .s3d-slide:last-child { margin-right: max(0px, calc((100vw - min(82vw, 340px)) / 2 - 18px)); }
  .s3d-slide.is-front { box-shadow: 0 20px 46px var(--shadow), 0 0 0 1px var(--g-ring); }
  .s3d-controls { margin-top: 6px; }
}

/* ═══ v2.5.0 — spacing, black footer, 3D elevation, offers, page extras ═══ */

/* Tighter vertical rhythm: trims the oversized blank bands between sections. */
.section-metrics-light { padding: 40px 0; }
.section-products, .section-process, .section-faq,
.product-features, .product-related, .product-license, .product-offer { padding-top: 56px; padding-bottom: 56px; }
.section-showcase { padding-top: 56px; padding-bottom: 56px; }
.section-innovation, .section-testimonials { padding: 52px 0; }
.section-reach { padding-top: 56px; padding-bottom: 56px; }
.section-cta { padding: 64px 24px; }
.section-page { padding-top: 28px; }
.blog-wrap, .page-wrap { padding-bottom: 56px; }
.m-marquee { padding: 20px 0; }

/* Elegant 3D elevation on info surfaces — a soft, layered lift. */
.product-card, .feature-card, .metric-card, .contact-card, .quote-card,
.faq-item, .license-card, .offer-card, .g-card, .process-step,
.reach-panel, .inno-pillar, .inno-timeline, .region-card, .commit-card {
  box-shadow:
    0 1px 1px rgba(22, 35, 61, 0.04),
    0 4px 8px rgba(22, 35, 61, 0.05),
    0 12px 24px rgba(22, 35, 61, 0.07),
    0 24px 48px rgba(22, 35, 61, 0.06);
}
.product-card:hover, .feature-card:hover, .contact-card:hover,
.reach-panel:hover, .inno-pillar:hover, .region-card:hover, .commit-card:hover {
  box-shadow:
    0 2px 3px rgba(22, 35, 61, 0.05),
    0 8px 16px rgba(22, 35, 61, 0.07),
    0 20px 40px rgba(22, 35, 61, 0.10),
    0 36px 64px rgba(22, 35, 61, 0.08);
}

/* Black footer, white text. */
.site-footer { background: #0A0C10; border-top-color: rgba(255, 255, 255, 0.1); }
.site-footer, .site-footer .footer-row { color: rgba(255, 255, 255, 0.66); }
.site-footer .footer-brand .brand-serif { color: #fff; }
.site-footer .footer-brand .brand-caps { color: var(--accent2); }
.site-footer .footer-line { color: rgba(255, 255, 255, 0.6); }
.site-footer .footer-meta span { color: rgba(255, 255, 255, 0.5); }
.site-footer a, .site-footer .footer-menu a { color: rgba(255, 255, 255, 0.7); }
.site-footer a:hover, .site-footer .footer-menu a:hover { color: var(--accent2); }

/* ── Pricing & limited-offer block ──────────────────────────────────────── */
.product-offer { position: relative; z-index: 1; }
.offer-head { max-width: 680px; margin: 0 auto 36px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.offer-badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent3); background: color-mix(in srgb, var(--accent2) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent2) 40%, transparent);
}
.offer-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--danger, #C53030); box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger, #C53030) 60%, transparent); animation: m-offer-pulse 2s ease-out infinite; }
@keyframes m-offer-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger, #C53030) 55%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.offer-title { margin: 0; font-size: clamp(28px, 3vw, 40px); color: var(--text); }
.offer-sub { margin: 0; font-size: 14px; font-weight: 300; color: var(--dim); max-width: 52ch; }
.offer-meter { width: 100%; max-width: 420px; display: grid; gap: 8px; margin-top: 6px; }
.offer-meter-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent2) 16%, transparent); overflow: hidden; }
.offer-meter-track span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent2), var(--accent)); transition: width 800ms var(--m-ease-out); }
.offer-meter-label { margin: 0; font-size: 12.5px; color: var(--dim); }
.offer-meter-label strong { color: var(--accent3); font-size: 15px; }
.offer-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 820px; margin: 0 auto; align-items: stretch; }
.offer-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 32px 28px;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--g-line); text-align: center;
  transition: transform var(--m-dur-2) var(--m-ease-out);
}
.offer-card:hover { transform: translateY(-6px); }
.offer-card.is-featured { border-color: color-mix(in srgb, var(--accent2) 60%, transparent); background: color-mix(in srgb, var(--accent2) 6%, var(--surface)); }
.offer-flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 4px 14px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff; background: var(--text);
}
.offer-plan { margin: 0; font-size: 22px; color: var(--text); }
.offer-price { display: flex; align-items: baseline; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0; }
.offer-was { font-size: 17px; color: var(--mute); text-decoration: line-through; }
.offer-now { font-family: var(--g-serif); font-weight: 600; font-size: 44px; line-height: 1; color: var(--accent3); }
.offer-suffix { font-size: 13px; color: var(--dim); }
.offer-seats { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.offer-note { margin: 2px 0 0; font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--dim); }
.offer-features { list-style: none; margin: 16px 0 0; padding: 16px 0 0; display: grid; gap: 10px; text-align: left; border-top: 1px solid var(--g-line); }
.offer-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 300; line-height: 1.45; color: var(--dim); }
.offer-features strong { color: var(--text); font-weight: 600; }
.offer-check { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--accent3); }
.offer-card.is-featured .offer-check { color: var(--accent); }
/* checklist rows draw in one after another as the card reveals */
.offer-card .offer-features li { opacity: 0; transform: translateX(-8px); }
.g-reveal.in .offer-features li { animation: m-offer-row 500ms var(--m-ease-out) forwards; }
.offer-features li:nth-child(1) { animation-delay: 120ms; }
.offer-features li:nth-child(2) { animation-delay: 190ms; }
.offer-features li:nth-child(3) { animation-delay: 260ms; }
.offer-features li:nth-child(4) { animation-delay: 330ms; }
.offer-features li:nth-child(5) { animation-delay: 400ms; }
.offer-features li:nth-child(6) { animation-delay: 470ms; }
.offer-features li:nth-child(n+7) { animation-delay: 540ms; }
@keyframes m-offer-row { to { opacity: 1; transform: translateX(0); } }

/* "Everything in <product>" full marketing feature grid */
.offer-includes { max-width: 940px; margin: 52px auto 0; text-align: center; }
.offer-includes-title { margin: 0 0 26px; font-size: clamp(24px, 2.6vw, 34px); color: var(--text); }
.offer-includes-grid {
  list-style: none; margin: 0; padding: 0; text-align: left;
  display: grid; gap: 13px 30px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.offer-includes-grid li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--dim); }
.offer-includes-grid .offer-check { color: var(--accent3); }
.offer-buy {
  margin-top: auto; padding-top: 16px;
}
.offer-buy:not(.is-soldout) {
  display: inline-flex; align-items: center; justify-content: center; margin-top: 18px; padding: 13px 22px;
  border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--text); color: #fff !important; transition: all var(--m-dur-1) ease;
}
.offer-card.is-featured .offer-buy:not(.is-soldout) { background: var(--accent3); }
.offer-buy:not(.is-soldout):hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 8px 22px var(--glow); }
.offer-buy.is-soldout { display: inline-flex; justify-content: center; margin-top: 18px; padding: 13px 22px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); border: 1px dashed var(--g-line); }

/* ── Innovation extras (pillars + R&D timeline) ─────────────────────────── */
.inno-extra { margin-top: 44px; }
.inno-pillars { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.inno-pillar { display: grid; gap: 10px; align-content: start; padding: 26px 24px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(201,164,92,0.2); }
.inno-pillar .m-icon { color: var(--g-band-accent); }
.inno-pillar h3 { margin: 0; font-size: 19px; color: var(--g-band-text); }
.inno-pillar p { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--g-band-dim); }
.inno-timeline { list-style: none; margin: 44px auto 0; padding: 0; max-width: 720px; display: grid; gap: 0; }
.inno-timeline li { position: relative; padding: 0 0 26px 34px; border-left: 1px solid rgba(201,164,92,0.3); }
.inno-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.inno-timeline li::before { content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--g-band-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--g-band-accent) 20%, transparent); }
.inno-year { font-family: var(--g-serif); font-size: 22px; color: var(--g-band-accent); line-height: 1; }
.inno-timeline p { margin: 6px 0 0; font-size: 13.5px; font-weight: 300; color: var(--g-band-dim); }

/* ── Reach extras (regions, engagement models, availability) ────────────── */
.reach-extra { margin-top: 48px; display: grid; gap: 20px; }
.region-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.region-card { display: grid; gap: 8px; align-content: start; padding: 24px 22px; border-radius: 8px; background: var(--surface); border: 1px solid var(--g-line); }
.region-card h3 { margin: 0; font-size: 18px; color: var(--text); }
.region-card .region-cities { font-size: 12.5px; font-weight: 300; color: var(--dim); line-height: 1.6; }
.region-card .region-tz { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.commit-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 8px; }
.commit-card { display: grid; gap: 8px; padding: 24px 22px; border-radius: 8px; background: var(--surface); border: 1px solid var(--g-line); }
.commit-card .commit-val { font-family: var(--g-serif); font-size: 34px; color: var(--accent3); line-height: 1; }
.commit-card h3 { margin: 0; font-size: 15px; color: var(--text); }
.commit-card p { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--dim); }

/* ── Balance + reduced motion ───────────────────────────────────────────── */
.hero-heading, .product-title, .reach-heading, .contact-heading, .cta-heading { text-wrap: balance; }

@media (prefers-reduced-motion: reduce) {
  .m-aura, .m-progress { display: none; }
  [data-split] .m-word { transform: none !important; opacity: 1 !important; transition: none !important; }
  [data-magnetic], .hero-btn, .cta-btn { transition: background 0.2s ease, color 0.2s ease; }
  .g-reveal.in .m-icon .icon-stroke { animation: none; }
  .m-icon .icon-stroke, .g-reveal:not(.in) .m-icon .icon-stroke { stroke-dashoffset: 0; }
  .m-icon-chevron svg { transition: none; }
  .hero::before, .hero::after, .product-hero::before, .product-hero::after { animation: none; }
  .hs-slide { transition: opacity 300ms ease; transform: none !important; }
  .hs-particle { animation: none; }
  .cta-3d::after { transition: none; }
  .cta-3d .cta-arrow { transition: none; }
  .offer-pulse { animation: none; }
  .offer-card .offer-features li { opacity: 1; transform: none; }
  .g-reveal.in .offer-features li { animation: none; }
  .site-nav .current-menu-item > a::after,
  .site-nav .current_page_item > a::after { animation: none; background: var(--accent); }
  .hs-slide.is-active .hs-kicker, .hs-slide.is-active .hs-title, .hs-slide.is-active .hs-tagline,
  .hs-slide.is-active .hs-text, .hs-slide.is-active .hs-cta-row, .hs-slide.is-active .hs-mark,
  .hs-slide.is-active .hs-shot { animation: none; }
  .hs-shot img, .m-pshot-hero img { animation: none; }
  .hs-progress { display: none; }
  .m-marquee-track { animation: none; }
  .product-card:hover::after { animation: none; }
  .faq-item[open] .faq-a { animation: none; }
  .s3d-stage { transition: none; }
}