/* ==========================================================================
   Z-SOFT theme
   Ported from the z-soft-page-2027 mockup ("Modern luxury" direction), scoped
   under .zsoft, with dark mode under html[data-theme="dark"] and no client JS.
   The mockup's scroll-reveal (opacity:0 + IntersectionObserver) is intentionally
   dropped: this theme renders on the server and ships no JavaScript, so nothing
   here may start hidden.
   ========================================================================== */

/* Typography — the native system UI font stack (Apple's SF Pro, then
   Helvetica Neue / Helvetica / Arial). No web fonts are loaded: the platform
   CSP would block an external font stylesheet anyway, and system fonts render
   Latin, Vietnamese and Japanese with consistent metrics across locales.
   The stack is exposed as `--zsoft-font` on `.zsoft` below. */

/* ==========================================================================
   Icons — inline SVG (Phosphor Light geometry)
   The theme's small UI glyphs (language globe, nav caret, CTA/pagination arrows,
   the mega-menu and leaf-card arrows) are inlined as SVG by the `Ico` component
   in index.tsx — they are NOT drawn from a web font. An icon web font renders
   its glyphs only after the font file has loaded, so under `font-display: block`
   every glyph stayed invisible until then and popped in once it arrived. On this
   server-rendered, no-JS theme that meant a visible flicker on the header/CTA
   icons each time a page was opened from the menu (the sibling "market" theme,
   which inlines SVG, never flickered). Inline SVG paints with the HTML in the
   first frame — no font round-trip, no flicker. Each glyph is sized to `1em`, so
   the `font-size` placement tweaks below keep working, and it inherits the
   surrounding text colour via `currentColor`.
   ========================================================================== */
.zsoft .ph {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  flex: none;
}
/* A trailing arrow tucked onto a CTA label/button. Sized to the running text and
   nudged so it optically centres beside the words. */
.zsoft .zsoft-inline-icon {
  font-size: 1.05em;
  margin-left: 0.1em;
}
/* Placement tweaks where the glyph replaced a differently-sized character. */
.zsoft .zsoft-lang .ph-globe {
  font-size: 16px;
}
.zsoft .zsoft-dropbtn .ph-caret-down {
  font-size: 0.72em;
  margin-left: 3px;
  transition: transform 0.2s ease;
}
.zsoft .zsoft-float-btn .ph {
  font-size: 20px;
}
.zsoft .zsoft-mega-go {
  font-size: 16px;
}

/* ==========================================================================
   Z-SOFT — multi-page, leaf-shape design system
   Ported faithfully from the zsoft-wordpress-theme-mockup, scoped under `.zsoft`,
   with dark mode under `html[data-theme="dark"] .zsoft` and NO client JavaScript.
   The mockup's scroll-reveal (opacity:0 + IntersectionObserver) and the mobile
   burger toggle are dropped: this theme renders on the server and ships no JS, so
   nothing here may start hidden, and the mobile menu is an always-open stack.
   ========================================================================== */

.zsoft {
  /* Light palette. --zsoft-accent is set inline from the theme's Accent setting. */
  --zsoft-accent: #d4a75f;
  --zsoft-accent2: #9e783f;
  --zsoft-bg: #f4f5f6;
  --zsoft-surface: #ffffff;
  --zsoft-surface2: #eceef0;
  --zsoft-text: #15181c;
  --zsoft-muted: #656b73;
  --zsoft-line: rgba(21, 24, 28, 0.13);
  --zsoft-table-line: rgba(21, 24, 28, 0.24);
  --zsoft-table-stripe: rgba(21, 24, 28, 0.025);
  --zsoft-deep: #111417;
  --zsoft-shadow: 0 24px 65px rgba(20, 24, 28, 0.09);

  /* "Feature" chrome — the header, hero, page heads, footer, dark bands and
     dropdowns. These were hardcoded near-black; they are now variables so LIGHT
     mode is genuinely light (warm ivory panels, dark text, readable deep-gold)
     while DARK mode keeps the original cinematic near-black. Gold text on these
     panels uses --zsoft-accent2, which is the darker gold in light mode and the
     brighter gold in dark mode — readable against either. */
  --zsoft-feature-bg: #f3ece0;
  --zsoft-feature-bg2: #eadfce;
  --zsoft-feature-text: #15181c;
  --zsoft-feature-muted: #6f6656;
  --zsoft-feature-line: rgba(21, 24, 28, 0.12);
  --zsoft-feature-soft: rgba(21, 24, 28, 0.05);
  /* Veil laid over a hero/page-head background image so text stays legible. */
  --zsoft-veil: linear-gradient(90deg, rgba(244, 238, 228, 0.95), rgba(244, 238, 228, 0.7) 53%, rgba(244, 238, 228, 0.32));
  --zsoft-veil-head: linear-gradient(90deg, rgba(244, 238, 228, 0.96), rgba(244, 238, 228, 0.66));
  /* Floating header shell (dark text on a light, blurred pane in light mode). */
  --zsoft-header-shell: rgba(255, 255, 255, 0.72);
  --zsoft-header-text: #15181c;
  --zsoft-header-border: rgba(21, 24, 28, 0.1);
  --zsoft-header-ctl: rgba(21, 24, 28, 0.16);
  --zsoft-header-ctl-bg: rgba(21, 24, 28, 0.04);
  --zsoft-header-shadow: 0 18px 50px rgba(20, 24, 28, 0.12);

  --zsoft-leaf-xl: 92px 20px 92px 20px;
  --zsoft-leaf-lg: 68px 16px 68px 16px;
  --zsoft-leaf-md: 48px 14px 48px 14px;
  --zsoft-leaf-sm: 28px 10px 28px 10px;
  --zsoft-radius: 24px;

  /* Native system UI font stack (see Typography note above). */
  --zsoft-font: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

  background: var(--zsoft-bg);
  color: var(--zsoft-text);
  font-family: var(--zsoft-font);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

html[data-theme="dark"] .zsoft {
  --zsoft-accent2: #e3bf83;
  --zsoft-bg: #0f1215;
  --zsoft-surface: #171b1f;
  --zsoft-surface2: #20252a;
  --zsoft-text: #f4f5f6;
  --zsoft-muted: #a6adb4;
  --zsoft-line: rgba(255, 255, 255, 0.12);
  --zsoft-table-line: rgba(255, 255, 255, 0.22);
  --zsoft-table-stripe: rgba(255, 255, 255, 0.035);
  --zsoft-deep: #080a0c;
  --zsoft-shadow: 0 24px 65px rgba(0, 0, 0, 0.35);

  /* Restore the original cinematic near-black for the feature chrome in dark mode. */
  --zsoft-feature-bg: #080a0c;
  --zsoft-feature-bg2: #111417;
  --zsoft-feature-text: #f4f5f6;
  --zsoft-feature-muted: #a6adb4;
  --zsoft-feature-line: rgba(255, 255, 255, 0.12);
  --zsoft-feature-soft: rgba(255, 255, 255, 0.04);
  --zsoft-veil: linear-gradient(90deg, rgba(7, 9, 11, 0.96), rgba(7, 9, 11, 0.72) 53%, rgba(7, 9, 11, 0.28));
  --zsoft-veil-head: linear-gradient(90deg, rgba(7, 9, 11, 0.97), rgba(7, 9, 11, 0.66));
  --zsoft-header-shell: rgba(12, 15, 18, 0.74);
  --zsoft-header-text: #ffffff;
  --zsoft-header-border: rgba(255, 255, 255, 0.16);
  --zsoft-header-ctl: rgba(255, 255, 255, 0.25);
  --zsoft-header-ctl-bg: rgba(255, 255, 255, 0.06);
  --zsoft-header-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
  color-scheme: dark;
}

.zsoft *,
.zsoft *::before,
.zsoft *::after {
  box-sizing: border-box;
}

.zsoft a {
  text-decoration: none;
}
/* `color` is reset through :where() so it adds no specificity. A plain `.zsoft a`
   rule (0,1,1) out-ranks every single-class button colour like `.zsoft-btn--primary`
   or `.zsoft-float-btn` (0,1,0), and would repaint those <a> buttons with the
   surrounding text colour — that is what turned the hero button white-on-white and
   the back-to-top same-colour-on-same-colour. At (0,1,0) the button's own colour,
   declared later, wins; links with no colour of their own still inherit. */
.zsoft :where(a) {
  color: inherit;
}
.zsoft img {
  max-width: 100%;
  display: block;
}
.zsoft p {
  margin: 0;
}
.zsoft h1,
.zsoft h2,
.zsoft h3,
.zsoft h4 {
  font-family: var(--zsoft-font);
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.035em;
}
.zsoft h1 {
  font-size: clamp(36px, 4.2vw, 50px);
}
.zsoft h2 {
  font-size: clamp(28px, 3.4vw, 42px);
}
.zsoft h3 {
  font-size: 22px;
}

/* ---------------------------------------------------------------- Japanese
   CJK glyphs read visually larger and denser than Latin at the same px, and
   the tight tracking / line-height tuned for the Latin display face looks
   cramped on kanji. The system stack has no dedicated Japanese design face, so
   `ja` text falls to a system CJK face — here we name a good one, relax the
   tracking, and dial the
   large display sizes down so headings sit in proportion in Japanese. */
.zsoft:lang(ja) {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Noto Sans JP", Meiryo, var(--zsoft-font);
}
.zsoft:lang(ja) h1,
.zsoft:lang(ja) h2,
.zsoft:lang(ja) h3,
.zsoft:lang(ja) h4,
.zsoft:lang(ja) .zsoft-lead,
.zsoft:lang(ja) .zsoft-quote {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Noto Sans JP", Meiryo, var(--zsoft-font);
  letter-spacing: -0.01em;
  line-height: 1.28;
}
.zsoft:lang(ja) h1 {
  font-size: clamp(32px, 3.8vw, 46px);
}
.zsoft:lang(ja) h2 {
  font-size: clamp(26px, 3.1vw, 38px);
}
.zsoft:lang(ja) h3 {
  font-size: 21px;
}
.zsoft:lang(ja) .zsoft-pagehead h1 {
  font-size: clamp(32px, 3.8vw, 46px);
}
.zsoft:lang(ja) .zsoft-lead {
  font-size: clamp(23px, 3vw, 34px);
}
.zsoft:lang(ja) .zsoft-quote {
  font-size: clamp(23px, 3vw, 36px);
}
.zsoft:lang(ja) .zsoft-product-leaf h3 {
  font-size: clamp(23px, 2.4vw, 30px);
}
.zsoft:lang(ja) .zsoft-contact-card h2 {
  font-size: clamp(23px, 2.5vw, 32px);
}
.zsoft:lang(ja) .zsoft-prose h2 {
  font-size: clamp(23px, 2.6vw, 30px);
}
.zsoft:lang(ja) .zsoft-consult-section h2 {
  font-size: clamp(26px, 3vw, 36px);
}

.zsoft-container {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}
.zsoft-narrow {
  width: min(760px, calc(100% - 40px));
  margin-inline: auto;
}

.zsoft-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--zsoft-deep);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
}
.zsoft-skip:focus {
  left: 0;
}

/* ------------------------------------------------------------------ eyebrow */
.zsoft-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--zsoft-accent2);
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 11px;
  font-weight: 800;
}
.zsoft-eyebrow::before {
  content: "";
  width: 38px;
  height: 1px;
  background: var(--zsoft-accent);
}
.zsoft-hero .zsoft-eyebrow::before {
  width: 54px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--zsoft-accent2) 0%,
    var(--zsoft-accent) 28%,
    #fff1c7 50%,
    var(--zsoft-accent) 72%,
    var(--zsoft-accent2) 100%
  );
  background-size: 220% 100%;
  animation: zsoft-slogan-gradient-flow 2.8s linear infinite;
}
@keyframes zsoft-slogan-gradient-flow {
  from {
    background-position: 110% 0;
  }
  to {
    background-position: -110% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zsoft-hero .zsoft-eyebrow::before {
    animation: none;
    background-position: center;
  }
}
.zsoft-eyebrow--light {
  color: var(--zsoft-accent2);
}

/* -------------------------------------------------------------------- buttons */
.zsoft-btn {
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid var(--zsoft-line);
  border-radius: 18px 6px 18px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.zsoft-btn:hover {
  transform: translateY(-2px);
}
/* The "solid" hero button: reads as the inverse of whatever it sits on — a dark
   button on the light hero, a light button on the dark hero. */
.zsoft-btn--primary {
  background: var(--zsoft-feature-text);
  color: var(--zsoft-feature-bg);
  border-color: var(--zsoft-feature-text);
}
.zsoft-btn--dark {
  background: var(--zsoft-text);
  color: var(--zsoft-bg);
  border-color: var(--zsoft-text);
}
/* The hero's secondary/outline button, tinted to the feature panel it overlays. */
.zsoft-btn--outline-light {
  color: var(--zsoft-feature-text);
  border-color: var(--zsoft-feature-line);
  background: transparent;
}
/* --------------------------------------------------------------------- header */
.zsoft-header {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0 18px;
  color: var(--zsoft-header-text);
}
.zsoft-nav {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
  height: 72px;
  padding: 0 14px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--zsoft-header-border);
  border-radius: 30px 10px 30px 10px;
  background: var(--zsoft-header-shell);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--zsoft-header-shadow);
}
.zsoft-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--zsoft-font);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--zsoft-header-text);
}
.zsoft-brand-mark {
  width: 39px;
  height: 39px;
  border: 1px solid var(--zsoft-accent);
  display: grid;
  place-items: center;
  border-radius: 14px 5px 14px 5px;
  color: var(--zsoft-accent);
}
.zsoft-brand-logo {
  height: 34px;
  width: auto;
}
.zsoft-nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.zsoft-menu {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
}
.zsoft-menu > a,
.zsoft-dropbtn {
  position: relative;
  opacity: 0.82;
  color: var(--zsoft-header-text);
  transition: 0.2s;
}
.zsoft-menu > a:not(.zsoft-nav-cta)::after,
.zsoft-dropbtn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -6px;
  height: 1px;
  background: var(--zsoft-accent);
  transition: 0.25s;
}
.zsoft-menu > a:hover,
.zsoft-dropdown:hover .zsoft-dropbtn {
  opacity: 1;
  color: var(--zsoft-accent2);
}
.zsoft-menu > a:hover::after,
.zsoft-dropdown:hover .zsoft-dropbtn::after {
  right: 0;
}
.zsoft-nav-cta {
  border: 1px solid var(--zsoft-header-ctl);
  padding: 10px 16px;
  border-radius: 16px 5px 16px 5px;
  background: var(--zsoft-header-ctl-bg);
  opacity: 1;
}

/* Mobile menu toggle (CSS-only, no JS). Both the checkbox and the burger are
   hidden on desktop — the media query below reveals the burger and collapses the
   menu behind it on narrow screens. The checkbox stays in the tab order (visually
   hidden, not display:none) so the menu can be opened with the keyboard. */
.zsoft-nav-check {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.zsoft-burger {
  display: none;
}

/* Dropdown / mega menu (CSS-only, opens on hover + keyboard focus) */
.zsoft-dropdown {
  position: relative;
}
.zsoft-dropbtn {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: none;
  font: inherit;
  padding: 26px 0;
  cursor: pointer;
}
.zsoft-submenu-check,
.zsoft-dropbtn--toggle {
  display: none;
}
.zsoft-dropdown-menu {
  position: absolute;
  top: 60px;
  left: -22px;
  width: 270px;
  padding: 10px;
  background: var(--zsoft-feature-bg);
  border: 1px solid var(--zsoft-feature-line);
  border-radius: 18px 6px 18px 6px;
  box-shadow: var(--zsoft-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: 0.2s;
}
.zsoft-dropdown:hover .zsoft-dropdown-menu,
.zsoft-dropdown:focus-within .zsoft-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* The products panel. Positioned against the nav bar rather than the "Products"
   button so it can run the bar's full width: three columns — the platform as one
   featured card, then business solutions, then community apps — over an
   all-products / documentation strip. It overlaps the bar's bottom edge by a few
   pixels so the pointer never crosses a gap on its way down from the button
   (a gap would drop the hover and close the panel). */
.zsoft-nav {
  position: relative;
}
.zsoft-dropdown {
  position: static;
}
.zsoft-mega {
  top: calc(100% - 8px);
  left: 0;
  right: 0;
  width: auto;
  padding: 22px 26px 12px;
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-auto-rows: auto;
  gap: 0;
  border-radius: 32px 10px 32px 10px;
}
.zsoft-mega--cols-2 {
  grid-template-columns: 1.15fr 1fr;
}
.zsoft-mega--cols-1 {
  grid-template-columns: 1fr;
}
.zsoft-mega-col {
  min-width: 0;
  padding: 0 22px 14px;
}
.zsoft-mega-col:first-child {
  padding-left: 0;
}
.zsoft-mega-col:last-of-type {
  padding-right: 0;
}
.zsoft-mega-col + .zsoft-mega-col {
  border-left: 1px solid var(--zsoft-feature-line);
}
/* Column head: a leaf tile with the group's glyph, then the group name. */
/* Scoped under .zsoft to outrank the theme's `.zsoft h3` sizing. */
.zsoft .zsoft-mega-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  font: 700 17px/1.2 var(--zsoft-font);
  letter-spacing: -0.01em;
  color: var(--zsoft-feature-text);
}
.zsoft-mega-head-icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(212, 167, 95, 0.4);
  border-radius: 15px 5px 15px 5px;
  background: linear-gradient(145deg, rgba(212, 167, 95, 0.22), rgba(212, 167, 95, 0.06));
  color: var(--zsoft-accent2);
}
.zsoft-mega-head-icon .ph {
  width: 22px;
  height: 22px;
}
/* The featured card and one outline per list row are STACKED in a single grid
   cell, so swapping the card for an outline is an opacity crossfade, never a
   reflow: no flash of the card between rows, no jump in the panel's height.
   Backgrounds are opaque so two stacked panels never show through each other
   while one is on its way out. */
.zsoft-mega-stack {
  display: grid;
}
.zsoft-mega-feature,
.zsoft-mega-detail {
  grid-area: 1 / 1;
  padding: 24px 24px 22px;
  border: 1px solid var(--zsoft-feature-line);
  border-radius: 26px 8px 26px 8px;
  background: linear-gradient(145deg, rgba(212, 167, 95, 0.14), var(--zsoft-feature-soft)), var(--zsoft-feature-bg);
}
.zsoft-mega-feature {
  position: relative;
  z-index: 0;
  transition: opacity var(--zsoft-mega-fade, 0.2s) ease;
}
/* An outline, once shown, STAYS — until another row is hovered or the menu
   closes — so its "explore" link can be reached and clicked at leisure. The theme
   ships no client JS (the runtime's CSP would refuse it), so this is done with
   transitions alone:

   - the way OUT (opacity, visibility) is deferred by a million seconds — twelve
     days, which is to say never. An outline that has been shown does not hide.
   - z-index is the memory of recency. Hovering sets it to a million at once;
     leaving starts it counting down by one per second. Whichever outline was
     hovered most recently is therefore always the highest and paints on top of
     the earlier ones (their opaque backgrounds hide them completely).
   - the closed menu cancels all of it (`transition: none` below), so the next
     open starts on the featured card again.

   `visibility` does the pointer gating: a hidden element receives no hover and
   no clicks, a visible one does — and every browser has transitioned visibility
   for a decade. */
.zsoft-mega-detail {
  position: relative;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0s linear 1000000s,
    visibility 0s linear 1000000s,
    z-index 1000000s linear;
}
/* Hide the card the whole time a list row is engaged (hover or keyboard focus),
   gaps between rows included, and while an outline itself is hovered. Once an
   outline is up it covers the card anyway (higher z-index, opaque). */
.zsoft-mega:has(.zsoft-mega-products:not(.zsoft-mega-products--featured):is(:hover, :focus-within)) .zsoft-mega-feature,
.zsoft-mega:has(.zsoft-mega-detail:hover) .zsoft-mega-feature {
  opacity: 0;
}
/* Pairing the hovered row with its outline is the one thing :has() cannot express
   generically: they live in different columns, so the Nth-to-Nth mapping is written
   out per `data-mega-row`. The short delay on the way IN is hover intent: crossing
   another column's rows on the way to the outline does not switch it.

   THIS LIST IS A CEILING ON THE ROW COUNT (24). A row past it hovers to a BLANK
   panel — the card has faded out and nothing fades in — silently and only on hover.
   Add pairs before the menu grows past it; unused pairs cost nothing. */
.zsoft-mega:has([data-mega-row="1"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="1"],
.zsoft-mega:has([data-mega-row="2"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="2"],
.zsoft-mega:has([data-mega-row="3"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="3"],
.zsoft-mega:has([data-mega-row="4"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="4"],
.zsoft-mega:has([data-mega-row="5"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="5"],
.zsoft-mega:has([data-mega-row="6"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="6"],
.zsoft-mega:has([data-mega-row="7"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="7"],
.zsoft-mega:has([data-mega-row="8"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="8"],
.zsoft-mega:has([data-mega-row="9"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="9"],
.zsoft-mega:has([data-mega-row="10"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="10"],
.zsoft-mega:has([data-mega-row="11"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="11"],
.zsoft-mega:has([data-mega-row="12"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="12"],
.zsoft-mega:has([data-mega-row="13"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="13"],
.zsoft-mega:has([data-mega-row="14"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="14"],
.zsoft-mega:has([data-mega-row="15"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="15"],
.zsoft-mega:has([data-mega-row="16"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="16"],
.zsoft-mega:has([data-mega-row="17"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="17"],
.zsoft-mega:has([data-mega-row="18"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="18"],
.zsoft-mega:has([data-mega-row="19"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="19"],
.zsoft-mega:has([data-mega-row="20"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="20"],
.zsoft-mega:has([data-mega-row="21"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="21"],
.zsoft-mega:has([data-mega-row="22"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="22"],
.zsoft-mega:has([data-mega-row="23"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="23"],
.zsoft-mega:has([data-mega-row="24"]:is(:hover, :focus-visible)) .zsoft-mega-detail[data-mega-row="24"] {
  opacity: 1;
  visibility: visible;
  z-index: 1000000;
  transition:
    opacity var(--zsoft-mega-fade, 0.2s) ease 0.1s,
    visibility 0s linear 0.1s,
    z-index 0s linear 0.1s;
}
/* Menu closed: cancel the deferred transitions so every outline is dropped and
   the next open starts on the featured card. (A transition whose property is no
   longer listed is cancelled, per spec — this is what resets the memory.) */
.zsoft-dropdown:not(:hover):not(:focus-within) .zsoft-mega-detail {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .zsoft-mega {
    --zsoft-mega-fade: 0s;
  }
}
.zsoft-mega-detail-mark {
  float: right;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(212, 167, 95, 0.4);
  border-radius: 15px 5px 15px 5px;
  color: var(--zsoft-accent2);
  font: 700 12px var(--zsoft-font);
}
.zsoft-mega-detail strong {
  display: block;
  clear: none;
  font: 700 24px/1.15 var(--zsoft-font);
  color: var(--zsoft-feature-text);
}
.zsoft-mega-detail em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: var(--zsoft-accent2);
}
.zsoft-mega-detail p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--zsoft-feature-muted);
  margin: 12px 0 16px;
}
a.zsoft-mega-detail-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--zsoft-accent2);
}
a.zsoft-mega-detail-hint:hover,
a.zsoft-mega-detail-hint:focus-visible {
  text-decoration: underline;
}
.zsoft-mega-label {
  display: inline-block;
  color: var(--zsoft-accent2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  margin-bottom: 14px;
  padding: 5px 10px;
  border: 1px solid rgba(212, 167, 95, 0.4);
  border-radius: 10px 3px 10px 3px;
}
.zsoft-mega-feature strong {
  display: block;
  font: 700 24px/1.15 var(--zsoft-font);
  color: var(--zsoft-feature-text);
}
.zsoft-mega-feature p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--zsoft-feature-muted);
  margin: 10px 0 16px;
}
.zsoft-mega-feature ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.zsoft-mega-feature li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--zsoft-feature-text);
}
.zsoft-mega-feature li .ph {
  width: 18px;
  height: 18px;
  flex: none;
  padding: 3px;
  margin-top: 1px;
  border-radius: 6px 2px 6px 2px;
  background: var(--zsoft-accent);
  color: var(--zsoft-feature-bg);
  stroke-width: 2.6;
}
.zsoft-mega-feature-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 18px 6px 18px 6px;
  background: var(--zsoft-feature-text);
  color: var(--zsoft-feature-bg);
  font: 700 14px var(--zsoft-font);
  transition: transform 0.2s ease;
}
.zsoft-mega-feature-cta:hover,
.zsoft-mega-feature-cta:focus-visible {
  transform: translateY(-2px);
}
/* The product rows. In the featured column they exist for the stacked mobile
   menu only — the card stands in for them on desktop. */
.zsoft-mega-products {
  display: grid;
  gap: 2px;
}
.zsoft-mega-products--featured {
  display: none;
}
.zsoft-mega-products > a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 12px;
  border-radius: 18px 6px 18px 6px;
}
.zsoft-mega-products > a + a {
  position: relative;
}
.zsoft-mega-products > a + a::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: -1px;
  height: 1px;
  background: var(--zsoft-feature-line);
}
.zsoft-mega-products > a:hover,
.zsoft-mega-products > a:focus-visible {
  background: var(--zsoft-feature-soft);
}
/* The row is the link. A "go" arrow, pinned right, appears and slides in on hover or
   keyboard focus so it reads as clickable. */
.zsoft-mega-go {
  margin-left: auto;
  flex: none;
  color: var(--zsoft-accent);
  font-weight: 800;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.zsoft-mega-products > a:hover .zsoft-mega-go,
.zsoft-mega-products > a:focus-visible .zsoft-mega-go,
.zsoft-mega-foot > a:hover .zsoft-mega-go,
.zsoft-mega-foot > a:focus-visible .zsoft-mega-go {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .zsoft-mega-go,
  .zsoft-mega-feature-cta {
    transition: none;
    transform: none;
  }
}
/* The product mark: the two-letter leaf the whole theme uses, not a coloured tile. */
.zsoft-mega-icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(212, 167, 95, 0.4);
  border-radius: 13px 4px 13px 4px;
  color: var(--zsoft-accent2);
  font: 700 11px var(--zsoft-font);
}
.zsoft-mega-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.zsoft-mega-copy b {
  display: block;
  font-size: 14px;
  line-height: 1.25;
  color: var(--zsoft-feature-text);
}
.zsoft-mega-copy > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.4;
  color: var(--zsoft-feature-muted);
}
/* The strip under the columns: all products, and the documentation when a URL is set. */
.zsoft-mega-foot {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--zsoft-feature-line);
}
.zsoft-mega-foot > a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 18px 6px 18px 6px;
}
.zsoft-mega-foot > a + a {
  border-left: 1px solid var(--zsoft-feature-line);
  border-radius: 0 6px 18px 6px;
}
.zsoft-mega-foot > a:hover,
.zsoft-mega-foot > a:focus-visible {
  background: var(--zsoft-feature-soft);
}
.zsoft-mega-foot-icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(212, 167, 95, 0.4);
  border-radius: 13px 4px 13px 4px;
  color: var(--zsoft-accent2);
}
.zsoft-mega-foot-icon .ph {
  width: 20px;
  height: 20px;
}

/* Language switcher */
.zsoft-lang {
  position: relative;
}
.zsoft-lang > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--zsoft-header-ctl);
  border-radius: 15px 5px 15px 5px;
  background: var(--zsoft-header-ctl-bg);
  color: var(--zsoft-header-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.zsoft-lang > summary::-webkit-details-marker {
  display: none;
}
.zsoft-lang-menu {
  position: absolute;
  right: 0;
  top: 52px;
  min-width: 170px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--zsoft-feature-bg);
  border: 1px solid var(--zsoft-feature-line);
  border-radius: 16px 5px 16px 5px;
  box-shadow: var(--zsoft-shadow);
}
.zsoft-lang-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--zsoft-feature-muted);
  font-size: 13px;
}
.zsoft-lang-menu a:hover,
.zsoft-lang-menu a[aria-current="true"] {
  background: var(--zsoft-feature-soft);
  color: var(--zsoft-accent2);
}
.zsoft-lang-flag {
  width: 20px;
  height: 15px;
  flex: none;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* ----------------------------------------------------------------- home hero */
.zsoft-hero {
  min-height: 800px;
  color: var(--zsoft-feature-text);
  display: flex;
  align-items: end;
  padding: 180px 0 92px;
  background: var(--zsoft-veil), var(--zsoft-feature-bg);
}
.zsoft-hero--image {
  background: var(--zsoft-veil), var(--zsoft-hero-image) center / cover no-repeat;
}
.zsoft-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 65px;
  align-items: end;
  position: relative;
}
.zsoft-hero h1 span {
  display: block;
  color: var(--zsoft-accent2);
}
.zsoft-hero-copy > p {
  font-size: 19px;
  color: var(--zsoft-feature-muted);
  max-width: 700px;
  margin: 28px 0 36px;
}
.zsoft-actions {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
}
.zsoft-hero-note {
  padding: 25px 28px;
  border: 1px solid var(--zsoft-feature-line);
  border-radius: var(--zsoft-leaf-md);
  background: var(--zsoft-feature-soft);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--zsoft-feature-muted);
}
.zsoft-hero-note strong {
  display: block;
  color: var(--zsoft-feature-text);
  font: 700 26px var(--zsoft-font);
  margin-bottom: 7px;
}

/* --------------------------------------------------------------- page head */
.zsoft-pagehead {
  min-height: 520px;
  color: var(--zsoft-feature-text);
  display: flex;
  align-items: end;
  padding: 170px 0 76px;
  background: var(--zsoft-veil-head), var(--zsoft-feature-bg);
}
.zsoft-pagehead--image {
  background: var(--zsoft-veil-head), var(--zsoft-hero-image) center / cover no-repeat;
}
.zsoft-pagehead h1 {
  font-size: clamp(36px, 4.2vw, 50px);
}
.zsoft-pagehead-lede {
  max-width: 690px;
  font-size: 19px;
  color: var(--zsoft-feature-muted);
  margin-top: 25px;
}
.zsoft-pagehead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.zsoft-breadcrumbs {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--zsoft-feature-muted);
  margin-bottom: 30px;
}
.zsoft-breadcrumbs span {
  color: var(--zsoft-accent2);
}
.zsoft-pagehead .zsoft-eyebrow {
  margin-bottom: 18px;
}

/* ---------------------------------------------------------------- sections */
.zsoft-section {
  padding: 112px 0;
}
.zsoft-section--alt {
  background: var(--zsoft-surface2);
}
.zsoft-section--dark {
  background: var(--zsoft-feature-bg);
  color: var(--zsoft-feature-text);
}
.zsoft-section-head {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 55px;
}
.zsoft-section-head h2 {
  margin-top: 14px;
}
.zsoft-section-head p {
  color: var(--zsoft-muted);
  font-size: 18px;
}
.zsoft-section--dark .zsoft-section-head p {
  color: var(--zsoft-feature-muted);
}

/* intro band */
.zsoft-intro-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
  align-items: start;
}
.zsoft-lead {
  font: 650 clamp(25px, 3.4vw, 40px) / 1.24 var(--zsoft-font);
  letter-spacing: -0.035em;
}
.zsoft-lead em {
  color: var(--zsoft-accent);
  font-style: normal;
}
.zsoft-copy p {
  color: var(--zsoft-muted);
  font-size: 18px;
  margin-bottom: 20px;
}
.zsoft-card-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--zsoft-accent2);
  font-weight: 700;
}

/* grouped technology catalogue */
.zsoft-technology-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.zsoft-technology-category {
  overflow: hidden;
  padding: 30px;
  border: 1px solid var(--zsoft-line);
  border-radius: var(--zsoft-leaf-lg);
  background: var(--zsoft-surface);
}
.zsoft-technology-category:nth-child(even) {
  border-radius: 16px 68px 16px 68px;
}
.zsoft-technology-category-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  min-height: 112px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--zsoft-line);
}
.zsoft-technology-category-head > span {
  padding-top: 5px;
  color: var(--zsoft-accent2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.zsoft-technology-category-head h3 {
  font-size: 23px;
}
.zsoft-technology-category-head p {
  margin-top: 9px;
  color: var(--zsoft-muted);
  line-height: 1.65;
}
.zsoft-technology-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.zsoft-technology-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--zsoft-line);
  border-radius: var(--zsoft-leaf-sm);
  background: var(--zsoft-surface2);
  color: var(--zsoft-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.zsoft-technology-icon {
  width: 24px;
  height: 24px;
  color: var(--zsoft-accent2);
}
.zsoft-section--dark .zsoft-technology-category {
  border-color: var(--zsoft-feature-line);
  background: var(--zsoft-feature-soft);
}
.zsoft-section--dark .zsoft-technology-category-head {
  border-color: var(--zsoft-feature-line);
}
.zsoft-section--dark .zsoft-technology-category-head p {
  color: var(--zsoft-feature-muted);
}
.zsoft-section--dark .zsoft-technology-list li {
  border-color: var(--zsoft-feature-line);
  background: var(--zsoft-feature-soft);
  color: var(--zsoft-feature-text);
}

/* grids + cards */
.zsoft-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.zsoft-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.zsoft-card {
  position: relative;
  overflow: hidden;
  padding: 32px;
  background: var(--zsoft-surface);
  border: 1px solid var(--zsoft-line);
  border-radius: var(--zsoft-leaf-lg);
  transition: 0.3s ease;
}
.zsoft-card::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(212, 167, 95, 0.16);
  border-radius: 50%;
  transition: 0.4s;
}
.zsoft-card:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 167, 95, 0.38);
  box-shadow: var(--zsoft-shadow);
}
.zsoft-card:hover::after {
  transform: scale(1.12);
}
.zsoft-grid-2 .zsoft-card:nth-child(even),
.zsoft-grid-3 .zsoft-card:nth-child(even) {
  border-radius: 16px 68px 16px 68px;
}
.zsoft-card-number {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--zsoft-accent2);
  font-weight: 800;
}
.zsoft-card h3 {
  margin: 42px 0 14px;
}
.zsoft-card p {
  color: var(--zsoft-muted);
}
a.zsoft-card .zsoft-card-link {
  margin-top: 24px;
}
.zsoft-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 24px;
}
.zsoft-card-actions .zsoft-card-link,
.zsoft-card-actions .zsoft-product-site-link,
.zsoft-card-actions .zsoft-product-status {
  margin-top: 0;
}

/* A product's real website is shown as a separate external action. This keeps
   the internal detail page available without making a nested link or disguising
   a domain as ordinary body copy. */
.zsoft-product-site-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 9px;
  max-width: 100%;
  margin-top: 24px;
  color: var(--zsoft-accent2);
  font-size: 13px;
  line-height: 1.45;
}
.zsoft-product-site-link strong {
  overflow-wrap: anywhere;
  color: var(--zsoft-text);
  font-weight: 600;
}
.zsoft-product-site-link:hover strong {
  color: var(--zsoft-accent2);
}
.zsoft-product-status {
  display: inline-flex;
  width: fit-content;
  margin-top: 24px;
  padding: 7px 11px;
  border: 1px solid var(--zsoft-line);
  border-radius: var(--zsoft-leaf-sm);
  background: var(--zsoft-surface2);
  color: var(--zsoft-muted);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

/* company profile — a compact, factual table inspired by the presentation style
   commonly used on Japanese corporate sites. A definition list keeps the
   label/value relationship accessible while CSS provides the table layout. */
.zsoft-company-profile-head {
  margin-bottom: 55px;
}
.zsoft-company-profile-head h2 {
  margin-top: 14px;
}
.zsoft-company-profile-head p {
  max-width: 720px;
  margin-top: 12px;
  color: var(--zsoft-muted);
  font-size: 18px;
}
.zsoft-section--dark .zsoft-company-profile-head p {
  color: var(--zsoft-feature-muted);
}
.zsoft-company-profile {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--zsoft-line);
  border-radius: var(--zsoft-leaf-md);
  background: var(--zsoft-surface);
}
.zsoft-company-profile-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
}
.zsoft-company-profile-row + .zsoft-company-profile-row {
  border-top: 1px solid var(--zsoft-line);
}
.zsoft-company-profile dt,
.zsoft-company-profile dd {
  margin: 0;
  padding: 25px 28px;
}
.zsoft-company-profile dt {
  display: flex;
  align-items: flex-start;
  background: var(--zsoft-surface2);
  color: var(--zsoft-text);
  font-weight: 750;
}
.zsoft-company-profile dd {
  border-left: 1px solid var(--zsoft-line);
}
.zsoft-company-profile dd strong {
  display: block;
  color: var(--zsoft-text);
  font-size: 17px;
  line-height: 1.55;
}
/* A profile value that links to the record backing it (D-U-N-S®, registrations). */
.zsoft-company-profile-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--zsoft-line);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.zsoft-company-profile-link:hover {
  color: var(--zsoft-accent2);
  border-bottom-color: var(--zsoft-accent2);
}
.zsoft-company-profile dd p {
  max-width: 900px;
  margin-top: 10px;
  color: var(--zsoft-muted);
  line-height: 1.75;
}
.zsoft-company-profile-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: var(--zsoft-muted);
  list-style: none;
}
.zsoft-company-profile-list li {
  position: relative;
  padding-left: 20px;
  line-height: 1.65;
}
.zsoft-company-profile-list li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--zsoft-accent2);
}
.zsoft-company-profile-list + p {
  margin-top: 18px;
}

/* feature list */
.zsoft-feature-list {
  display: grid;
  gap: 14px;
}
.zsoft-feature-row {
  display: grid;
  grid-template-columns: 75px 1fr 1.4fr;
  gap: 30px;
  align-items: start;
  padding: 27px;
  border: 1px solid var(--zsoft-line);
  background: var(--zsoft-surface);
  border-radius: var(--zsoft-leaf-md);
}
.zsoft-feature-row:nth-child(even) {
  border-radius: 14px 48px 14px 48px;
}
.zsoft-feature-row b {
  color: var(--zsoft-accent2);
  letter-spacing: 0.12em;
  font-size: 15px;
}
.zsoft-feature-row h3 {
  font-size: 22px;
}
.zsoft-feature-row p {
  color: var(--zsoft-muted);
}

/* Process overview: pure HTML/CSS nodes and connectors. The detailed cards stay
   below it, so readers can understand the sequence before scanning each output. */
.zsoft-process-flow {
  --zsoft-flow-line: rgba(180, 126, 45, 0.42);
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--zsoft-process-count), minmax(0, 1fr));
  margin: 0 0 56px;
  padding: 30px 22px 26px;
  list-style: none;
  border: 1px solid var(--zsoft-line);
  border-radius: var(--zsoft-leaf-lg);
  background:
    radial-gradient(circle at 12% 10%, rgba(212, 167, 95, 0.12), transparent 30%),
    var(--zsoft-surface);
  box-shadow: 0 18px 50px rgba(20, 22, 25, 0.06);
}
.zsoft-process-flow li {
  position: relative;
  min-width: 0;
  text-align: center;
}
.zsoft-process-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 37px;
  left: calc(50% + 38px);
  width: calc(100% - 76px);
  height: 2px;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 10px,
      var(--zsoft-accent2) 10px 16px,
      transparent 16px 28px
    ),
    linear-gradient(var(--zsoft-flow-line), var(--zsoft-flow-line));
  background-size: 28px 2px, 100% 2px;
  animation: zsoft-process-flow-x 1.15s linear infinite;
}
.zsoft-process-flow li:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 33px;
  /* The connector ends at the left edge of the next node. Keep the arrowhead
     there instead of near the middle of the line. */
  left: calc(150% - 48px);
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--zsoft-accent2);
  border-right: 2px solid var(--zsoft-accent2);
  transform: rotate(45deg);
}
@keyframes zsoft-process-flow-x {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 28px 0, 0 0;
  }
}
@keyframes zsoft-process-flow-y {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 0 28px, 0 0;
  }
}
.zsoft-process-flow-node {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border: 6px solid var(--zsoft-surface);
  border-radius: 30px 9px 30px 9px;
  background: linear-gradient(135deg, var(--zsoft-accent), var(--zsoft-accent2));
  box-shadow: 0 0 0 1px var(--zsoft-flow-line), 0 12px 28px rgba(130, 88, 29, 0.2);
  color: #15181c;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.12em;
}
.zsoft-process-flow li:nth-child(even) .zsoft-process-flow-node {
  border-radius: 9px 30px 9px 30px;
}
.zsoft-process-flow strong {
  display: block;
  max-width: 150px;
  margin: 0 auto;
  color: var(--zsoft-text);
  font-size: 14px;
  line-height: 1.45;
}
.zsoft-section--dark .zsoft-process-flow {
  --zsoft-flow-line: rgba(212, 167, 95, 0.46);
  border-color: var(--zsoft-feature-line);
  background:
    radial-gradient(circle at 12% 10%, rgba(212, 167, 95, 0.14), transparent 30%),
    var(--zsoft-feature-soft);
}
.zsoft-section--dark .zsoft-process-flow-node {
  border-color: var(--zsoft-feature-soft);
}
.zsoft-section--dark .zsoft-process-flow strong {
  color: var(--zsoft-feature-text);
}

/* Detailed process cards */
.zsoft-process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.zsoft-process article {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  padding: 30px;
  border: 1px solid var(--zsoft-line);
  background: var(--zsoft-surface);
  border-radius: var(--zsoft-leaf-md);
  transition: 0.3s;
}
.zsoft-process article:nth-child(even) {
  border-radius: 14px 48px 14px 48px;
}
.zsoft-process article:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 167, 95, 0.4);
  box-shadow: var(--zsoft-shadow);
}
.zsoft-process span {
  color: var(--zsoft-accent);
  font-size: 12px;
  letter-spacing: 0.15em;
  font-weight: 800;
}
.zsoft-process h3 {
  margin: 48px 0 12px;
  font-size: 23px;
}
.zsoft-process p {
  color: var(--zsoft-muted);
}
.zsoft-process .zsoft-process-output {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--zsoft-line);
  color: var(--zsoft-text);
  font-size: 14px;
  font-weight: 650;
}
.zsoft-section--dark .zsoft-process article {
  background: var(--zsoft-feature-soft);
  border-color: var(--zsoft-feature-line);
}
.zsoft-section--dark .zsoft-process p {
  color: var(--zsoft-feature-muted);
}
.zsoft-section--dark .zsoft-process .zsoft-process-output {
  border-top-color: var(--zsoft-feature-line);
  color: var(--zsoft-feature-text);
}

/* metrics (dark) */
.zsoft-quote {
  font: 650 clamp(25px, 3.4vw, 42px) / 1.25 var(--zsoft-font);
  letter-spacing: -0.04em;
  max-width: 980px;
}
.zsoft-quote::before {
  content: "\201C";
  color: var(--zsoft-accent2);
}
.zsoft-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 65px;
}
.zsoft-metric {
  padding: 28px 22px;
  border: 1px solid var(--zsoft-feature-line);
  border-radius: var(--zsoft-leaf-sm);
}
.zsoft-metric:nth-child(even) {
  border-radius: 10px 28px 10px 28px;
}
.zsoft-metric strong {
  display: block;
  color: var(--zsoft-accent2);
  font: 700 38px var(--zsoft-font);
}
.zsoft-metric span {
  color: var(--zsoft-feature-muted);
  font-size: 14px;
}

/* product showcase (signature leaf grid) */
.zsoft-products-showcase {
  overflow: hidden;
}
.zsoft-product-leaf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.zsoft-product-leaf {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 330px;
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--zsoft-surface);
  border: 1px solid var(--zsoft-line);
  border-radius: var(--zsoft-leaf-lg);
  overflow: hidden;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.zsoft-product-leaf::before {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -95px;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(212, 167, 95, 0.3);
  border-radius: 50%;
  z-index: -1;
  transition: transform 0.45s ease;
}
.zsoft-product-leaf::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--zsoft-accent), transparent 72%);
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.zsoft-product-leaf:hover {
  transform: translateY(-7px);
  border-color: rgba(212, 167, 95, 0.55);
  box-shadow: var(--zsoft-shadow);
}
.zsoft-product-leaf:hover::before {
  transform: scale(1.14);
}
.zsoft-product-leaf:hover::after {
  transform: scaleX(1);
}
.zsoft-product-leaf--wide {
  grid-column: span 2;
  min-height: 390px;
  padding: 45px 48px;
  border-radius: var(--zsoft-leaf-xl);
  background: linear-gradient(135deg, var(--zsoft-surface), var(--zsoft-surface2));
}
.zsoft-product-leaf h3 {
  font-size: clamp(26px, 2.6vw, 34px);
  margin: 0 0 15px;
}
/* The product name is a link to its detail page. A gold underline that grows in
   from the left signals that clearly — on hovering the name itself, on keyboard
   focus, and on hovering anywhere in the card so the cue is easy to discover. */
.zsoft-product-leaf h3 a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--zsoft-accent), var(--zsoft-accent2));
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 0% 2px;
  padding-bottom: 3px;
  transition: background-size 0.35s ease, color 0.35s ease;
}
.zsoft-product-leaf h3 a:hover,
.zsoft-product-leaf h3 a:focus-visible,
.zsoft-product-leaf:hover h3 a {
  color: var(--zsoft-accent2);
  background-size: 100% 2px;
}
.zsoft-product-leaf p {
  max-width: 640px;
  color: var(--zsoft-muted);
  font-size: 17px;
}
.zsoft-leaf-arrow {
  position: absolute;
  right: 34px;
  top: 30px;
  width: 46px;
  height: 46px;
  border: 1px solid var(--zsoft-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--zsoft-accent2);
  font-size: 20px;
  transition: 0.3s;
}
.zsoft-product-leaf:hover .zsoft-leaf-arrow {
  background: var(--zsoft-text);
  color: var(--zsoft-bg);
  border-color: var(--zsoft-text);
  transform: rotate(45deg);
}
.zsoft-products-more {
  margin-top: 28px;
  text-align: right;
}

/* product detail */
.zsoft-product-layout {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 90px;
  align-items: start;
}
.zsoft-sticky {
  position: sticky;
  top: 120px;
  align-self: start;
}
.zsoft-kicker {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zsoft-accent2);
  font-weight: 800;
}
.zsoft-product-summary h2 {
  margin: 14px 0 24px;
}
.zsoft-product-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin: 14px 0 24px;
}
.zsoft-product-title-row h2 {
  margin: 0;
}
.zsoft-product-summary > p {
  font-size: 18px;
  color: var(--zsoft-muted);
}
.zsoft-check-list {
  display: grid;
  gap: 13px;
  margin-top: 30px;
}
.zsoft-check-list div {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--zsoft-text);
}
/* Inline SVG (not a CSS glyph) so it renders identically on every platform.
   A bare "↗" (U+2197) here defaulted to emoji presentation on iOS/mobile,
   painting a colour emoji box instead of an accent-coloured arrow. */
.zsoft-check-list .zsoft-check-icon {
  flex: 0 0 auto;
  color: var(--zsoft-accent);
  font-size: 1.15em;
  margin-top: 0.05em;
}
.zsoft-product-cta {
  margin-top: 30px;
}
.zsoft-product-site-link--detail {
  margin-top: 0;
  color: #0000ee;
  font-size: 15px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.zsoft-product-site-link--detail:hover {
  color: #0000bb;
}
.zsoft-product-status--detail {
  margin-top: 24px;
}
.zsoft-product-block {
  padding: 30px;
  border: 1px solid var(--zsoft-line);
  background: var(--zsoft-surface);
  border-radius: var(--zsoft-leaf-md);
  margin-bottom: 16px;
}
.zsoft-product-block:nth-child(even) {
  border-radius: 14px 48px 14px 48px;
}
.zsoft-product-block h3 {
  margin: 8px 0 13px;
}
.zsoft-product-block > p {
  color: var(--zsoft-muted);
}
.zsoft-product-block .zsoft-grid-2,
.zsoft-product-block .zsoft-check-list {
  margin-top: 22px;
}

/* CTA */
.zsoft-cta {
  padding: 100px 0;
}
.zsoft-cta-box {
  background: var(--zsoft-surface);
  border: 1px solid var(--zsoft-line);
  border-top: 3px solid var(--zsoft-accent);
  border-radius: var(--zsoft-leaf-xl);
  padding: 55px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 45px;
  align-items: center;
}
.zsoft-cta-box h2 {
  margin-top: 14px;
}
.zsoft-cta-box p {
  color: var(--zsoft-muted);
  max-width: 720px;
  margin-top: 17px;
}

/* contact */
.zsoft-contact-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
  align-items: start;
}
.zsoft-contact-card {
  padding: 38px;
  background: var(--zsoft-feature-bg);
  color: var(--zsoft-feature-text);
  border: 1px solid var(--zsoft-feature-line);
  border-radius: var(--zsoft-leaf-xl);
}
.zsoft-contact-card h2 {
  margin: 18px 0 24px;
  font-size: clamp(26px, 2.7vw, 36px);
}
.zsoft-contact-card p {
  color: var(--zsoft-feature-muted);
}
.zsoft-contact-lines {
  margin-top: 35px;
}
.zsoft-contact-lines div {
  padding: 18px 0;
  border-top: 1px solid var(--zsoft-feature-line);
}
.zsoft-contact-lines small {
  color: var(--zsoft-feature-muted);
}
/* Contact-form status banners. Hidden until the no-JS submit route redirects
   back to #contact-sent / #contact-error; revealed purely with :target, so the
   whole confirmation works without a line of client JavaScript. */
.zsoft-contact-alert {
  display: none;
  margin-top: 16px;
  scroll-margin-top: 120px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
/* `:target` covers direct fragment navigation; `[data-revealed]` is set by the
   platform's runtime helper so the reveal also fires after a POST redirect, which
   Blink does not apply `:target` to. */
.zsoft-contact-alert:target,
.zsoft-contact-alert[data-revealed] {
  display: block;
}
.zsoft-contact-alert--ok {
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.35);
  color: #15803d;
}
.zsoft-contact-alert--error {
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: #b91c1c;
}
html[data-theme="dark"] .zsoft .zsoft-contact-alert--ok {
  color: #4ade80;
}
html[data-theme="dark"] .zsoft .zsoft-contact-alert--error {
  color: #f87171;
}
.zsoft form {
  display: grid;
  gap: 16px;
}
.zsoft-field {
  display: grid;
  gap: 8px;
}
.zsoft-field label {
  font-size: 13px;
  font-weight: 700;
}
.zsoft-field input,
.zsoft-field textarea,
.zsoft-field select {
  width: 100%;
  padding: 15px 16px;
  border-radius: var(--zsoft-leaf-sm);
  border: 1px solid var(--zsoft-line);
  background: var(--zsoft-surface);
  color: var(--zsoft-text);
  font: inherit;
}
.zsoft-field textarea {
  min-height: 145px;
  resize: vertical;
}

/* prose (rich text + posts) */
.zsoft-prose {
  font-size: 17px;
  color: var(--zsoft-text);
}
.zsoft-prose > * + * {
  margin-top: 20px;
}
.zsoft-prose h2 {
  font-size: clamp(26px, 2.8vw, 34px);
  margin-top: 40px;
}
.zsoft-prose h3 {
  margin-top: 32px;
}
.zsoft-prose p,
.zsoft-prose li {
  color: var(--zsoft-muted);
  line-height: 1.75;
}
.zsoft-prose a {
  color: var(--zsoft-accent2);
  text-decoration: underline;
}
.zsoft-prose ul,
.zsoft-prose ol {
  padding-left: 22px;
}
.zsoft-prose img {
  border-radius: var(--zsoft-leaf-md);
}
.zsoft-prose figure {
  margin: 30px 0;
  padding: 26px;
  border: 1px solid var(--zsoft-line);
  border-radius: var(--zsoft-leaf-md);
  background: linear-gradient(135deg, var(--zsoft-surface), var(--zsoft-surface2));
}
.zsoft-prose figure > div {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.zsoft-prose figure > div > strong {
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  min-height: 88px;
  place-content: center;
  padding: 14px 12px;
  border: 1px solid var(--zsoft-line);
  border-radius: 22px 7px 22px 7px;
  background: var(--zsoft-surface);
  color: var(--zsoft-text);
  text-align: center;
  line-height: 1.35;
}
.zsoft-prose figure > div > strong > span {
  display: inline-block;
  margin-top: 6px;
  color: var(--zsoft-muted);
  font-size: 12px;
  font-weight: 500;
}
.zsoft-prose figure > div > span {
  align-self: center;
  flex: 0 0 auto;
  color: var(--zsoft-accent2);
  font-size: 20px;
  font-weight: 800;
}
.zsoft-prose figcaption {
  margin-top: 16px;
  color: var(--zsoft-muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.zsoft-prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--zsoft-surface2);
  color: var(--zsoft-text);
  font-size: 0.9em;
}
.zsoft-prose pre {
  overflow-x: auto;
  padding: 18px 20px;
  border: 1px solid var(--zsoft-line);
  border-left: 3px solid var(--zsoft-accent);
  border-radius: 8px 20px 8px 20px;
  background: var(--zsoft-deep);
  color: #f4f5f6;
  line-height: 1.6;
}
.zsoft-prose pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}
/* A wide table scrolls inside its own box instead of pushing the page sideways.
   Matched structurally as well as by class: cms-api sanitises rich-text HTML at
   write time and drops `class`, so a seeded article or policy page arrives with a
   bare wrapping <div> and would otherwise lose the scroll box entirely. */
.zsoft-tech-table-wrap,
.zsoft-prose div:has(> table) {
  overflow-x: auto;
  border-radius: 8px 24px 8px 24px;
  background: var(--zsoft-surface);
}
.zsoft-prose table {
  width: 100%;
  min-width: 620px;
  border: 1px solid var(--zsoft-table-line);
  border-collapse: collapse;
}
.zsoft-prose th,
.zsoft-prose td {
  padding: 16px 18px;
  border: 1px solid var(--zsoft-table-line);
  color: var(--zsoft-muted);
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
}
.zsoft-prose thead th {
  background: var(--zsoft-surface2);
  color: var(--zsoft-text);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.zsoft-prose tbody tr:nth-child(even) {
  background: var(--zsoft-table-stripe);
}
.zsoft-prose tbody th {
  width: 34%;
  color: var(--zsoft-text);
  font-weight: 700;
}
@media (max-width: 620px) {
  .zsoft-tech-table-wrap,
  .zsoft-prose div:has(> table) {
    overflow: visible;
    border-radius: 0;
    background: transparent;
  }
  .zsoft-prose table,
  .zsoft-prose tbody,
  .zsoft-prose tr,
  .zsoft-prose th,
  .zsoft-prose td {
    display: block;
    width: 100%;
  }
  .zsoft-prose table {
    min-width: 0;
    border: 0;
  }
  .zsoft-prose thead {
    display: none;
  }
  .zsoft-prose tbody tr {
    overflow: hidden;
    border: 1px solid var(--zsoft-table-line);
    border-radius: 8px 20px 8px 20px;
    background: var(--zsoft-surface);
  }
  .zsoft-prose tbody tr + tr {
    margin-top: 14px;
  }
  .zsoft-prose tbody th,
  .zsoft-prose tbody td {
    width: auto;
    padding: 14px 16px;
    border: 0;
  }
  .zsoft-prose tbody th {
    background: var(--zsoft-surface2);
  }
  .zsoft-prose tbody td {
    border-top: 1px solid var(--zsoft-table-line);
  }
  .zsoft-prose figure {
    padding: 20px;
  }
  .zsoft-prose figure > div {
    display: grid;
    grid-template-columns: 1fr;
  }
  .zsoft-prose figure > div > strong {
    min-height: 76px;
  }
  .zsoft-prose figure > div > span {
    justify-self: center;
    transform: rotate(90deg);
  }
}
.zsoft-figure {
  margin: 32px auto;
}
.zsoft-figure--full {
  width: 100%;
}
.zsoft-figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--zsoft-muted);
  text-align: center;
}

/* archive + meta */
.zsoft-meta {
  font-size: 13px;
  color: var(--zsoft-muted);
  letter-spacing: 0.02em;
}
.zsoft-post-detail > .zsoft-meta {
  margin-bottom: 40px;
}
.zsoft-post-content > .zsoft-section {
  padding: 0;
}
.zsoft-post-content .zsoft-container {
  width: 100%;
}
.zsoft-archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 34px;
}
.zsoft-archive-list h2 {
  font-size: 30px;
  margin: 8px 0 10px;
}
/* Each post title links to its detail page. A gold underline that grows in from
   the left signals that — on hovering the title, on keyboard focus, and on
   hovering anywhere in the row so the cue is easy to discover. */
.zsoft-archive-list h2 a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--zsoft-accent), var(--zsoft-accent2));
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 0% 2px;
  padding-bottom: 3px;
  transition: background-size 0.35s ease, color 0.35s ease;
}
.zsoft-archive-list h2 a:hover,
.zsoft-archive-list h2 a:focus-visible,
.zsoft-archive-list li:hover h2 a {
  color: var(--zsoft-accent2);
  background-size: 100% 2px;
}
.zsoft-archive-list p {
  color: var(--zsoft-muted);
}
.zsoft-post-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.zsoft-post-card {
  padding: 28px;
  border: 1px solid var(--zsoft-line);
  background: var(--zsoft-surface);
  border-radius: var(--zsoft-leaf-md);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.zsoft-post-card:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 167, 95, 0.55);
  box-shadow: var(--zsoft-shadow);
}
/* The card title links to the post — same growing gold underline cue used across
   the theme, triggered on the title, on keyboard focus, and on card hover. */
.zsoft-post-card h3 a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--zsoft-accent), var(--zsoft-accent2));
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 0% 2px;
  padding-bottom: 3px;
  transition: background-size 0.35s ease, color 0.35s ease;
}
.zsoft-post-card h3 a:hover,
.zsoft-post-card h3 a:focus-visible,
.zsoft-post-card:hover h3 a {
  color: var(--zsoft-accent2);
  background-size: 100% 2px;
}

/* "More from the blog" — a divider sets the teaser apart from the article body. */
.zsoft-more-posts {
  border-top: 1px solid var(--zsoft-line);
  padding-top: 56px;
}
.zsoft-pagination {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 45px;
  color: var(--zsoft-muted);
}
.zsoft-pagination__control {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--zsoft-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.zsoft-pagination__control:first-child {
  justify-self: end;
}
.zsoft-pagination__control:last-child {
  justify-self: start;
}
.zsoft-pagination__control:hover,
.zsoft-pagination__control:focus-visible {
  color: var(--zsoft-accent2);
}
.zsoft-pagination__control--disabled {
  visibility: hidden;
  pointer-events: none;
}
.zsoft-pagination__control .zsoft-inline-icon {
  margin: 0;
}
.zsoft-pagination__pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.zsoft-pagination__page {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--zsoft-line);
  border-radius: 50%;
  background: var(--zsoft-surface);
  color: var(--zsoft-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}
.zsoft-pagination__page:hover,
.zsoft-pagination__page:focus-visible {
  border-color: var(--zsoft-accent);
  color: var(--zsoft-accent2);
  transform: translateY(-1px);
}
.zsoft-pagination__page--active {
  border-color: var(--zsoft-accent);
  background: var(--zsoft-accent);
  color: var(--zsoft-deep);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--zsoft-accent) 28%, transparent);
}
.zsoft-pagination__ellipsis {
  width: 24px;
  display: inline-flex;
  justify-content: center;
  color: var(--zsoft-muted);
}

/* ---------------------------------------------------------- consultation CTA */
.zsoft-consult-section {
  position: relative;
  overflow: hidden;
  padding: 112px 0;
  background: linear-gradient(135deg, var(--zsoft-surface2), var(--zsoft-bg));
}
.zsoft-consult-section::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: max(-170px, calc((100vw - 1180px) / 2 - 230px));
  bottom: -280px;
  border: 1px solid var(--zsoft-line);
  border-radius: 50%;
  pointer-events: none;
}
.zsoft-consult-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 50px;
}
.zsoft-consult-grid .zsoft-btn {
  white-space: nowrap;
}
.zsoft-consult-section h2 {
  max-width: 820px;
  font-size: clamp(28px, 3.2vw, 40px);
  margin-top: 16px;
}
.zsoft-consult-section p {
  max-width: 680px;
  color: var(--zsoft-muted);
  margin-top: 14px;
}

/* --------------------------------------------------------------------- footer */
.zsoft-footer {
  padding: 66px 0 30px;
  background: var(--zsoft-feature-bg);
  color: var(--zsoft-feature-text);
}
.zsoft-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 1fr 1fr;
  gap: 60px;
}
.zsoft-footer-grid h4 {
  font-size: 13px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--zsoft-accent2);
  margin-bottom: 20px;
}
.zsoft-footer-links {
  display: grid;
  gap: 12px;
  color: var(--zsoft-feature-muted);
}
.zsoft-footer-links a {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  gap: 9px;
  white-space: nowrap;
}
.zsoft-footer-social-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}
.zsoft-footer-social-icon::before {
  display: block;
}
.zsoft-footer-social-icon--facebook::before {
  content: "f";
  font-size: 18px;
}
.zsoft-footer-social-icon--linkedin::before {
  content: "in";
  font-size: 12px;
  letter-spacing: -0.04em;
}
/* Envelope is an inline SVG (see the `email` case in FooterColumn) rather than a
   CSS "\2709" glyph, which mobile browsers rendered as a colour emoji. */
.zsoft-footer-social-icon--email .ph {
  font-size: 15px;
}
.zsoft-footer-links a:hover {
  color: var(--zsoft-accent2);
}
.zsoft-footer-links a:hover .zsoft-footer-social-icon {
  background: var(--zsoft-feature-soft);
}
.zsoft-footer-company p {
  max-width: 340px;
  color: var(--zsoft-feature-muted);
  margin-top: 16px;
}
.zsoft-footer-logo {
  display: inline-flex;
  color: var(--zsoft-feature-text);
}
/* The D-U-N-S® line under the footer subtitle: a quiet label with the number
   carried as the emphasis, so it reads as a credential rather than a link the
   eye has to step over on the way to the columns beside it. */
.zsoft-footer-duns {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-top: 14px;
  font-size: 14px;
}
.zsoft-footer-duns span {
  color: var(--zsoft-feature-muted);
}
.zsoft-footer-duns a,
.zsoft-footer-duns strong {
  color: var(--zsoft-feature-text);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.zsoft-footer-duns a {
  text-decoration: none;
  border-bottom: 1px solid var(--zsoft-feature-line);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.zsoft-footer-duns a:hover {
  color: var(--zsoft-accent2);
  border-bottom-color: var(--zsoft-accent2);
}
.zsoft-copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: 60px;
  padding-top: 23px;
  border-top: 1px solid var(--zsoft-feature-line);
  font-size: 12px;
  color: var(--zsoft-feature-muted);
}
/* Privacy, terms, cookies, security — a line, not a fifth footer column. */
.zsoft-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.zsoft-legal-links a {
  transition: color 0.2s ease;
}
.zsoft-legal-links a:hover {
  color: var(--zsoft-accent2);
}
.zsoft-builtwith {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}
.zsoft-builtwith .ph {
  font-size: 14px;
}
.zsoft-builtwith:hover {
  color: var(--zsoft-accent2);
}

/* floating corner stack: dark/light toggle above the back-to-top button */
.zsoft-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.zsoft-float-btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px 5px 16px 5px;
  background: var(--zsoft-text);
  color: var(--zsoft-bg);
  box-shadow: var(--zsoft-shadow);
  cursor: pointer;
}
/* The toggle is a surface pill (inverse of the solid back-to-top) so the two
   corner controls read as a set without either one disappearing in dark mode. */
.zsoft-float-toggle {
  background: var(--zsoft-surface);
  color: var(--zsoft-text);
  border: 1px solid var(--zsoft-line);
}
.zsoft-float-toggle svg {
  width: 20px;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .zsoft-header {
    top: 10px;
    padding: 0 10px;
  }
  .zsoft-nav {
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 14px;
  }
  /* Flatten the right cluster into the nav's own flex row so the brand, the
     language switcher and the burger share one line and the menu can occupy a
     full-width line of its own beneath them. Without this the menu is only as wide
     as the control cluster and the panel breaks out of the bar. */
  .zsoft-nav-right {
    display: contents;
  }
  .zsoft-brand {
    margin-right: auto;
  }
  .zsoft-lang {
    order: 2;
  }
  .zsoft-burger {
    order: 3;
  }
  /* The menu drops onto its own full-width line (last) and is hidden until the
     burger is checked. Keyboard/focus and click both flip it. It scrolls rather
     than growing tall enough to bury the page behind the overlay header. */
  .zsoft-menu {
    order: 5;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--zsoft-header-border);
    max-height: min(70vh, 560px);
    overflow-y: auto;
    display: none;
  }
  .zsoft-nav-check:checked ~ .zsoft-nav .zsoft-menu {
    display: flex;
  }
  .zsoft-menu > a,
  .zsoft-dropbtn {
    padding: 12px 6px;
  }
  .zsoft-dropbtn--link {
    display: none;
  }
  .zsoft-dropbtn--toggle {
    display: flex;
    justify-content: space-between;
    user-select: none;
  }
  .zsoft-submenu-check {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
  }
  .zsoft-submenu-check:focus-visible ~ .zsoft-dropbtn--toggle {
    outline: 2px solid var(--zsoft-accent2);
    outline-offset: 3px;
  }
  .zsoft-submenu-check:checked ~ .zsoft-dropbtn--toggle .ph-caret-down {
    transform: rotate(180deg);
  }
  .zsoft-nav-cta {
    margin-top: 8px;
    justify-content: center;
    text-align: center;
  }
  .zsoft-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0 12px;
    border: 1px solid var(--zsoft-header-ctl);
    border-radius: 14px 5px 14px 5px;
    background: var(--zsoft-header-ctl-bg);
    cursor: pointer;
  }
  .zsoft-burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--zsoft-header-text);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  /* Burger morphs into a close (×) when the menu is open. */
  .zsoft-nav-check:checked ~ .zsoft-nav .zsoft-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .zsoft-nav-check:checked ~ .zsoft-nav .zsoft-burger span:nth-child(2) {
    opacity: 0;
  }
  .zsoft-nav-check:checked ~ .zsoft-nav .zsoft-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .zsoft-nav-check:focus-visible ~ .zsoft-nav .zsoft-burger {
    outline: 2px solid var(--zsoft-accent2);
    outline-offset: 3px;
  }
  /* Submenus open inline and flat — no floating card, no border, no dark slab —
     so the products list reads as an indented part of the stacked menu. */
  .zsoft-dropdown-menu,
  .zsoft-mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    width: 100%;
    display: none;
    right: auto;
    left: auto;
    margin: 2px 0 6px;
    padding: 0 0 0 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    grid-template-columns: none;
  }
  .zsoft-submenu-check:checked ~ .zsoft-dropdown-menu {
    display: block;
  }
  /* Stacked: the featured card and the column chrome go, each group becomes a
     small heading over its rows (the platform re-appears as a plain row), and the
     footer strip becomes two rows under a rule. */
  .zsoft-mega--cols-1,
  .zsoft-mega--cols-2,
  .zsoft-mega--cols-3 {
    grid-template-columns: none;
  }
  .zsoft-mega-col {
    padding: 0 0 6px;
  }
  .zsoft-mega-col + .zsoft-mega-col {
    border-left: 0;
  }
  .zsoft .zsoft-mega-head {
    gap: 8px;
    margin: 8px 0 4px;
    padding: 0 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--zsoft-accent2);
  }
  .zsoft-mega-head-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px 3px 8px 3px;
  }
  .zsoft-mega-head-icon .ph {
    width: 14px;
    height: 14px;
  }
  .zsoft-mega-stack {
    display: none;
  }
  .zsoft-mega-products--featured {
    display: grid;
  }
  .zsoft-mega-products {
    gap: 2px;
  }
  .zsoft-mega-products > a {
    padding: 8px 8px;
  }
  .zsoft-mega-products > a + a::before {
    display: none;
  }
  .zsoft-mega-icon {
    width: 34px;
    height: 34px;
  }
  .zsoft-mega-copy > span {
    -webkit-line-clamp: 1;
  }
  .zsoft-mega-foot {
    grid-template-columns: none;
    gap: 2px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--zsoft-header-border);
  }
  .zsoft-mega-foot > a {
    padding: 8px 8px;
    gap: 13px;
  }
  .zsoft-mega-foot > a + a {
    border-left: 0;
    border-radius: 18px 6px 18px 6px;
  }
  .zsoft-mega-foot-icon {
    width: 34px;
    height: 34px;
  }
  .zsoft-mega-foot .zsoft-mega-go {
    opacity: 1;
    transform: none;
  }
  .zsoft-dropbtn {
    width: 100%;
    text-align: left;
  }
  .zsoft-hero-grid,
  .zsoft-section-head,
  .zsoft-intro-grid,
  .zsoft-product-layout,
  .zsoft-contact-grid,
  .zsoft-consult-grid,
  .zsoft-footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .zsoft-hero-note {
    display: none;
  }
  .zsoft-grid-3,
  .zsoft-process,
  .zsoft-metrics,
  .zsoft-post-grid,
  .zsoft-technology-grid {
    grid-template-columns: 1fr 1fr;
  }
  .zsoft-process-flow {
    --zsoft-flow-pad: 24px;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: var(--zsoft-flow-pad);
    border-radius: var(--zsoft-leaf-md);
  }
  .zsoft-process-flow::before {
    content: "";
    position: absolute;
    top: 60px;
    bottom: 60px;
    left: calc(var(--zsoft-flow-pad) + 31px);
    width: 2px;
    background-image:
      repeating-linear-gradient(
        180deg,
        transparent 0 10px,
        var(--zsoft-accent2) 10px 16px,
        transparent 16px 28px
      ),
      linear-gradient(var(--zsoft-flow-line), var(--zsoft-flow-line));
    background-size: 2px 28px, 2px 100%;
    animation: zsoft-process-flow-y 1.15s linear infinite;
  }
  .zsoft-process-flow li {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    gap: 20px;
    min-height: 76px;
    text-align: left;
  }
  .zsoft-process-flow li::before,
  .zsoft-process-flow li::after {
    display: none;
  }
  .zsoft-process-flow-node {
    width: 64px;
    height: 64px;
    margin: 0;
    border-width: 5px;
    border-radius: 24px 8px 24px 8px;
  }
  .zsoft-process-flow li:nth-child(even) .zsoft-process-flow-node {
    border-radius: 8px 24px 8px 24px;
  }
  .zsoft-process-flow strong {
    max-width: none;
    margin: 0;
    font-size: 16px;
  }
  .zsoft-cta-box {
    grid-template-columns: 1fr;
  }
  .zsoft-feature-row {
    grid-template-columns: 55px 1fr;
  }
  .zsoft-feature-row p {
    grid-column: 2;
  }
  .zsoft-sticky {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zsoft-process-flow li:not(:last-child)::after,
  .zsoft-process-flow::before {
    animation: none;
    background-position: 0 0, 0 0;
  }
}

@media (max-width: 620px) {
  .zsoft {
    --zsoft-leaf-xl: 52px 14px 52px 14px;
    --zsoft-leaf-lg: 44px 12px 44px 12px;
    --zsoft-leaf-md: 36px 10px 36px 10px;
    --zsoft-leaf-sm: 24px 8px 24px 8px;
  }
  .zsoft h1,
  .zsoft-pagehead h1 {
    font-size: clamp(32px, 9vw, 36px);
  }
  .zsoft:lang(ja) h1,
  .zsoft:lang(ja) .zsoft-pagehead h1 {
    font-size: clamp(30px, 8.5vw, 34px);
  }
  .zsoft-hero-copy > p,
  .zsoft-pagehead-lede {
    font-size: 17px;
  }
  .zsoft-hero {
    min-height: 700px;
    padding-top: 150px;
  }
  .zsoft-pagehead {
    min-height: 440px;
    padding-top: 150px;
  }
  .zsoft-section {
    padding: 78px 0;
  }
  .zsoft-consult-section {
    padding: 78px 0;
  }
  .zsoft-company-profile-row {
    grid-template-columns: 1fr;
  }
  .zsoft-company-profile dt,
  .zsoft-company-profile dd {
    padding: 18px 20px;
  }
  .zsoft-company-profile dt {
    border-bottom: 1px solid var(--zsoft-line);
  }
  .zsoft-company-profile dd {
    border-left: 0;
  }
  .zsoft-grid-3,
  .zsoft-grid-2,
  .zsoft-process,
  .zsoft-metrics,
  .zsoft-post-grid,
  .zsoft-product-leaf-grid,
  .zsoft-technology-grid {
    grid-template-columns: 1fr;
  }
  .zsoft-technology-category {
    padding: 24px;
  }
  .zsoft-technology-list {
    grid-template-columns: 1fr;
  }
  /* The signature product grid is two-up (with a wide first card) on desktop; on a
     phone every leaf is full width, or the wide card's `span 2` overflows a one-column
     track and drags the whole page wider than the viewport. */
  .zsoft-product-leaf--wide {
    grid-column: auto;
  }
  .zsoft-cta-box,
  .zsoft-contact-card {
    padding: 32px;
  }
  .zsoft-footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 24px;
  }
  .zsoft-footer-company,
  .zsoft-footer-column--connect {
    grid-column: 1 / -1;
  }
  .zsoft-footer-links a {
    white-space: normal;
  }
  .zsoft-copyright {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .zsoft-feature-row {
    grid-template-columns: 1fr;
  }
  .zsoft-feature-row p {
    grid-column: auto;
  }
  .zsoft-pagination {
    grid-template-columns: 32px auto 32px;
    gap: 6px;
  }
  .zsoft-pagination__control {
    width: 32px;
    min-height: 32px;
    justify-content: center;
  }
  .zsoft-pagination__control > span {
    display: none;
  }
  .zsoft-pagination__pages {
    gap: 3px;
  }
  .zsoft-pagination__page {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  .zsoft-pagination__ellipsis {
    width: 18px;
  }
}