/* ==========================================================================
   Woltix — site stylesheet
   Design system: dark navy backdrop, heavy display typography,
   brand blue / green / cyan accents.
   Every custom property is --wx-*.

   The design package this came from carried styles for two landing layouts;
   only one shipped. Every rule that could not match any element on any page,
   in any interactive state, has been removed — as have the design tool's
   accent/density/hero variant rules and the body attributes that drove them.
   If you add markup that needs a removed component, take it from the
   original export rather than reviving a selector from git.
   ========================================================================== */

/* ── Manrope, self-hosted (no third-party font request) ─────────────────
   Variable font: one file covers weights 400–800.                        */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
       Woltix landing — based on the Woltix deck visual language:
       dark navy backdrop, heavy display typography, vivid blue +
       green + cyan accents, color-block grids as ornament.
       ============================================================ */

    :root {
      /* ── Brand palette (sampled from the Woltix deck) ───────── */
      --wx-navy:        #2F324A;   /* primary dark — slate-navy w/ purple tint */
      --wx-navy-2:      #292C42;   /* deeper navy for alt sections */
      --wx-navy-3:      #232640;   /* deepest panel / footer */
      --wx-navy-line:   #3D405B;   /* hairline / divider on navy */

      --wx-blue:        #5F2BFF;   /* brand purple-blue — primary CTA (from logo) */
      --wx-blue-2:      #8259FF;   /* lighter purple-blue, secondary */
      --wx-blue-3:      #A38AFF;   /* hover lighten */
      --wx-green:       #33E284;   /* brand green (from logo) */
      --wx-cyan:        #2330FA;   /* deep brand blue (from logo) */

      --wx-ink:         #FFFFFF;
      --wx-ink-2:       rgba(255,255,255,0.78);
      --wx-ink-3:       rgba(255,255,255,0.58);
      --wx-ink-4:       rgba(255,255,255,0.56);  /* WCAG AA on every navy bg */
      --wx-ink-faint:   rgba(255,255,255,0.38);  /* decorative only, never text */


      --wx-grad-hero:   linear-gradient(115deg, #33E284 0%, #5258E8 32%, #5F2BFF 70%, #8259FF 100%);
      --wx-radius-sm:   6px;
      --wx-radius:      12px;
      --wx-radius-lg:   20px;
      --wx-radius-pill: 9999px;

      --wx-shadow-soft: 0 20px 40px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2);

      --wx-page-gutter: 64px;
      --wx-container:   1280px;
      --wx-font:        "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--wx-navy);
      color: var(--wx-ink);
      font-family: var(--wx-font);
      font-size: 16px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; }

    /* ── Layout primitives ──────────────────────────────────── */
    .wx-container { max-width: var(--wx-container); margin: 0 auto; padding: 0 var(--wx-page-gutter); }
    .wx-section { padding: 120px 0; position: relative; }
    .wx-section--deeper { background: var(--wx-navy-2); }

    /* Decorative section divider (a single tilted line — deck slide 9 motif) */

    /* ── Typography ─────────────────────────────────────────── */
    .wx-eyebrow {
      font-weight: 700;
      font-size: 12px;
      line-height: 16px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--wx-green);
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .wx-eyebrow::before {
      content: "";
      display: inline-block;
      width: 14px; height: 14px;
      background: var(--wx-green);
      border-radius: 3px;
    }
    .wx-h2 {
      font-family: var(--wx-font);
      font-weight: 800;
      font-size: clamp(36px, 4.6vw, 60px);
      line-height: 1.05;
      letter-spacing: -0.03em;
      margin: 0;
      color: var(--wx-ink);
    }
    .wx-lede {
      font-size: 19px;
      line-height: 1.5;
      color: var(--wx-ink-2);
      margin: 0;
      max-width: 56ch;
      font-weight: 400;
    }

    /* ── Color block motif ──────────────────────────────────── */

    /* ── Buttons ────────────────────────────────────────────── */
    .wx-btn {
      height: 48px;
      padding: 0 26px;
      border-radius: var(--wx-radius-pill);
      border: 0;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.04em;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: transform .15s cubic-bezier(.2,.8,.2,1), background .15s, border-color .15s, color .15s, box-shadow .15s;
      white-space: nowrap;
    }
    .wx-btn--primary { background: var(--wx-blue); color: #fff; box-shadow: 0 8px 24px rgba(63,79,224,0.4); }
    .wx-btn--primary:hover { background: var(--wx-blue-3); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(63,79,224,0.5); }
    .wx-btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.3); }
    .wx-btn--ghost:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); }
    .wx-btn--small { height: 38px; padding: 0 18px; font-size: 13px; }
    .wx-topbar__inner .wx-btn { align-self: flex-end; }
    .wx-btn svg { width: 14px; height: 14px; }

    /* ── Top bar ────────────────────────────────────────────── */
    .wx-topbar {
      position: sticky; top: 0; z-index: 50;
      padding: 18px 0;
      background: rgba(47,50,74,0.86);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .wx-topbar__inner { display: flex; align-items: baseline; gap: 36px; }
    .wx-topbar__logo { display: inline-block; line-height: 0; }
    .wx-topbar__logo-svg { height: 36px; width: auto; vertical-align: baseline; display: inline-block; }
    .wx-topbar__nav { display: flex; align-items: baseline; gap: 28px; }
    .wx-topbar__nav a {
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      color: var(--wx-ink-2);
      transition: color .12s;
    }
    .wx-topbar__nav a:hover { color: var(--wx-ink); }
    .wx-topbar__spacer { flex: 1; }

    /* ── Hero ───────────────────────────────────────────────── */
    .wx-hero__bg {
      position: absolute; inset: 0; z-index: 0;
      pointer-events: none;
    }
    .wx-hero__bg svg { width: 100%; height: 100%; }
    .wx-hero__title {
      font-family: var(--wx-font);
      font-weight: 800;
      font-size: clamp(52px, 7.5vw, 104px);
      line-height: 0.98;
      letter-spacing: -0.04em;
      color: #fff;
      margin: 28px 0 28px;
    }
    .wx-hero__title em {
      font-style: normal;
      background: linear-gradient(90deg, var(--wx-green) 0%, var(--wx-cyan) 50%, var(--wx-blue-2) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .wx-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

    /* Hero visual — stacked screenshot cards (deck slide 2 motif) */

    /* Donut placeholder */

    /* ── Section headers ────────────────────────────────────── */
    .wx-sec-head {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
      gap: 64px;
      align-items: end;
      margin-bottom: 72px;
    }

    /* ── Pillar grid ────────────────────────────────────────── */

    /* ── Feature block (two-col w/ visual) ──────────────────── */

    /* ── Two-color impact panels (deck slide 9 motif) ───────── */

    /* ── Big stat row (impact) ──────────────────────────────── */

    /* ── Pipeline 3-step ────────────────────────────────────── */

    /* ── Architecture grid w/ globe motif ───────────────────── */

    /* ── Audience cards ─────────────────────────────────────── */

    /* ── Demo form ──────────────────────────────────────────── */
    .wx-demo {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      gap: 64px;
      align-items: start;
    }
    .wx-demo__points {
      list-style: none; padding: 0; margin: 24px 0 0;
      display: flex; flex-direction: column; gap: 16px;
    }
    .wx-demo__points li {
      display: grid; grid-template-columns: 20px 1fr;
      gap: 14px;
      font-size: 15px; line-height: 1.45; color: var(--wx-ink-2);
    }
    .wx-demo__points li b { display: block; font-weight: 800; color: #fff; }
    .wx-demo__points li svg { width: 18px; height: 18px; margin-top: 2px; color: var(--wx-green); }

    .wx-form {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--wx-radius-lg);
      padding: 36px;
      display: flex; flex-direction: column; gap: 22px;
    }
    .wx-form__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .wx-field { display: flex; flex-direction: column; gap: 8px; }
    .wx-field__label {
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--wx-ink-3);
    }
    .wx-field__input, .wx-field__textarea {
      width: 100%;
      height: 46px;
      padding: 0 16px;
      background: rgba(0,0,0,0.22);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--wx-radius-sm);
      color: #fff;
      font: 500 15px/46px var(--wx-font);
      outline: none;
      transition: border-color .12s, background .12s, box-shadow .12s;
    }
    .wx-field__textarea {
      min-height: 110px; height: auto; padding: 12px 16px;
      line-height: 1.5; font-family: inherit; resize: vertical;
    }
    .wx-field__input::placeholder, .wx-field__textarea::placeholder { color: var(--wx-ink-3); }
    .wx-field__input:focus, .wx-field__textarea:focus {
      border-color: var(--wx-blue-2);
      background: rgba(0,0,0,0.32);
      box-shadow: 0 0 0 3px rgba(63,79,224,0.2);
    }
    .wx-form__foot {
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; flex-wrap: wrap;
    }
    .wx-form__foot small { font-size: 12px; line-height: 1.45; color: var(--wx-ink-4); max-width: 360px; }
    .wx-form__success {
      background: rgba(31,203,128,0.12);
      border: 1px solid rgba(31,203,128,0.4);
      border-radius: var(--wx-radius-sm);
      padding: 14px 16px;
      font-weight: 600; font-size: 14px; color: var(--wx-green);
      display: none;
    }
    .wx-form.is-sent .wx-form__success { display: block; }
    .wx-form.is-sent fieldset { opacity: 0.4; pointer-events: none; }

    /* ── Footer ─────────────────────────────────────────────── */
    .wx-footer {
      background: var(--wx-navy-3);
      padding: 64px 0 28px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .wx-footer__top {
      display: grid;
      grid-template-columns: minmax(0, 1.6fr) repeat(2, 1fr);
      gap: 48px;
      padding-bottom: 40px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .wx-footer__logo-svg { height: 32px; width: auto; display: block; }
    .wx-footer__about {
      margin-top: 18px;
      font-size: 13px; line-height: 1.55;
      color: var(--wx-ink-3); max-width: 36ch;
    }
    .wx-footer__addr {
      margin-top: 14px;
      font-size: 13px; line-height: 1.5;
      color: var(--wx-ink-3);
    }
    .wx-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
    .wx-footer ul a {
      font-size: 14px; color: var(--wx-ink-3);
      transition: color .12s;
    }
    .wx-footer ul a:hover { color: #fff; }
    .wx-footer__bottom {
      padding-top: 24px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px;
      font-size: 12px; color: var(--wx-ink-4);
    }


    /* ── Accent tweak ───────────────────────────────────────── */

    /* ── Density tweak ──────────────────────────────────────── */

    /* ── Hero treatment tweak ───────────────────────────────── */

    /* ── After-Woltix AI-ready callout ──────────────────────── */

    /* ── Headline variant tweak ─────────────────────────────── */

    /* ── Hero mock animations (CSS-driven "live demo") ──────── */
    @keyframes wx-draw   { to { stroke-dashoffset: 0; } }
    @keyframes wx-fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes wx-fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes wx-scaleX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes wx-pulse  { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.45); opacity: 0.45; } }
    @keyframes wx-stream { 0% { transform: translateX(-110%); } 100% { transform: translateX(440%); } }
    @keyframes wx-numblink { 0%, 90%, 100% { opacity: 1; } 92% { opacity: 0.25; } 94% { opacity: 1; } }

    /* Chart line drawing (path uses pathLength="1") */

    /* Donut fade up */

    /* Allocation bars roll out */

    /* Holdings rows rise in sequence */

    /* The "LIVE" indicator + streaming line on the main paper */

    /* KPI numbers blink subtly on update (gives ticker feel) */

    /* Respect reduced-motion */

    /* Hero text column inside 2-col grid */

    /* On very small phones, hide the big landscape screenshots — they become
       unreadable. Let text carry the page. */

    /* ── Screenshot wrapper (real product UI screenshots) ───── */

    /* Architecture cards laid out full-width (no synthetic visual side) */

    /* ── Rebalance row mini-bars (Asset Class mock) ─────────── */
    /* Bar widths driven by --c / --n / --m custom props (% of full bar) */

    /* ── Responsive ─────────────────────────────────────────── */
    @media (max-width: 1180px) {
      :root { --wx-page-gutter: 40px; }
    }
    @media (max-width: 980px) {
      :root { --wx-page-gutter: 24px; }
      .wx-topbar__nav { display: none; }
      .wx-demo { grid-template-columns: 1fr; gap: 32px; }
      .wx-form__grid { grid-template-columns: 1fr; }
      .wx-footer__top { grid-template-columns: 1fr 1fr; }
      .wx-sec-head { grid-template-columns: 1fr; gap: 24px; }
      .wx-section { padding: 80px 0; }
    }
    @media (max-width: 560px) {
      .wx-footer__top { grid-template-columns: 1fr; }
    }
/* ── Hub page: pipeline + module cards ─────────────────── */
a{color:var(--wx-blue-3)}a:hover{color:var(--wx-green)}
.wx-hubhero{position:relative;overflow:hidden;padding:132px 0 0}
.wx-hubhero__inner{position:relative;z-index:2;max-width:880px}
.wx-hubhero__sub{color:var(--wx-ink-2);font-size:19px;line-height:1.6;margin-top:24px;max-width:680px;text-wrap:pretty}
.wx-pipe{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:96px;border-top:1px solid var(--wx-navy-line)}
.wx-pipe__stage{position:relative;padding:32px 30px 40px;border-right:1px solid var(--wx-navy-line);display:flex;flex-direction:column;gap:10px;min-height:230px}
.wx-pipe__stage:last-child{border-right:0}
.wx-pipe__stage::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;background:var(--c,var(--wx-blue))}
.wx-pipe__n{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c,var(--wx-blue-3))}
.wx-pipe__name{font-size:21px;font-weight:700;line-height:1.2}
.wx-pipe__desc{font-size:14.5px;line-height:1.6;color:var(--wx-ink-3)}
.wx-mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:56px}
.wx-mod{display:flex;flex-direction:column;gap:14px;padding:36px 34px 30px;border:1px solid var(--wx-navy-line);border-radius:var(--wx-radius-lg);background:rgba(255,255,255,.02);color:inherit;text-decoration:none;transition:border-color .2s,background .2s,transform .2s}
.wx-mod:hover{border-color:var(--c,var(--wx-blue-3));background:rgba(255,255,255,.045);transform:translateY(-2px);color:inherit}
.wx-mod__k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c,var(--wx-blue-3))}
.wx-mod__h{font-size:26px;font-weight:700;line-height:1.15;margin:0}
.wx-mod__d{font-size:15px;line-height:1.6;color:var(--wx-ink-2);margin:0}
.wx-mod__list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.wx-mod__list li{font-size:14px;line-height:1.5;color:var(--wx-ink-3);padding-left:18px;position:relative}
.wx-mod__list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--c,var(--wx-blue-3));opacity:.75}
.wx-together{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.wx-together__item{padding:28px 26px;border-left:2px solid var(--wx-green);background:rgba(255,255,255,.02);border-radius:0 var(--wx-radius) var(--wx-radius) 0}
.wx-together__item h3{margin:0 0 10px;font-size:17px;font-weight:700}
.wx-together__item p{margin:0;font-size:14.5px;line-height:1.6;color:var(--wx-ink-3)}
@media(max-width:980px){.wx-pipe{grid-template-columns:1fr 1fr}.wx-pipe__stage:nth-child(2){border-right:0}.wx-pipe__stage:nth-child(-n+2){border-bottom:1px solid var(--wx-navy-line)}.wx-mods{grid-template-columns:1fr}.wx-together{grid-template-columns:1fr}.wx-hubhero{padding-top:104px}}
@media(max-width:560px){.wx-pipe{grid-template-columns:1fr}.wx-pipe__stage{border-right:0;border-bottom:1px solid var(--wx-navy-line);min-height:0}}

/* ── Pipeline on opaque ground + mobile nav ────────────── */
.wx-pipe{margin-top:88px;background:var(--wx-navy-3);border:1px solid var(--wx-navy-line);border-radius:var(--wx-radius-lg);overflow:hidden;box-shadow:var(--wx-shadow-soft)}
.wx-pipe__stage::before{top:0}
.wx-pipe__n{color:var(--wx-ink-2)}
.wx-pipe__name{color:var(--wx-ink)}
.wx-hubhero{padding-bottom:0}
.wx-navtoggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--wx-radius-sm);border:1px solid var(--wx-navy-line);background:rgba(255,255,255,.04);color:var(--wx-ink);cursor:pointer}
.wx-navtoggle svg{width:18px;height:18px}
.wx-mobnav{display:none;border-top:1px solid var(--wx-navy-line);background:var(--wx-navy-3)}
.wx-mobnav[data-open="true"]{display:block}
.wx-mobnav__inner{display:flex;flex-direction:column;padding:8px var(--wx-page-gutter) 14px}
.wx-mobnav a{padding:13px 0;font-size:15px;font-weight:600;color:var(--wx-ink);text-decoration:none;border-bottom:1px solid var(--wx-navy-line)}
.wx-mobnav a:last-child{border-bottom:0;color:var(--wx-green)}
@media(max-width:980px){.wx-navtoggle{display:inline-flex}.wx-pipe{margin-top:64px}}
@media(min-width:981px){.wx-mobnav{display:none!important}}

.wx-mod__k{color:var(--wx-ink-2)}

/* ── Agents section ────────────────────────────────────── */
.wx-agents{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:52px}
.wx-agent{padding:32px 30px;border:1px solid var(--wx-navy-line);border-radius:var(--wx-radius-lg);background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:12px}
.wx-agent__k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--wx-ink-2)}
.wx-agent h3,.wx-agent__h{margin:0;font-size:20px;font-weight:700;line-height:1.2}
.wx-agent p{margin:0;font-size:14.5px;line-height:1.6;color:var(--wx-ink-3)}
.wx-agent__rule{height:2px;width:44px;background:var(--c,var(--wx-green));border-radius:2px}
@media(max-width:980px){.wx-agents{grid-template-columns:1fr}}

/* ── Use case ──────────────────────────────────────────── */
.wx-case{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;margin-top:52px;align-items:start}
.wx-case__lede{font-size:16.5px;line-height:1.65;color:var(--wx-ink-2);margin:0 0 22px}
.wx-case__note{font-size:14.5px;line-height:1.65;color:var(--wx-ink-3);margin:0}
.wx-case__card{border:1px solid var(--wx-navy-line);border-radius:var(--wx-radius-lg);background:var(--wx-navy-3);padding:34px 34px 30px;box-shadow:var(--wx-shadow-soft)}
.wx-case__k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--wx-ink-2)}
.wx-case__h{margin:12px 0 0;font-size:22px;font-weight:700;line-height:1.25}
.wx-steps{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.wx-steps li{position:relative;padding:0 0 26px 34px;border-left:1px solid var(--wx-navy-line)}
.wx-steps li:last-child{padding-bottom:0;border-left-color:transparent}
.wx-steps li::before{content:"";position:absolute;left:-5px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--wx-green);box-shadow:0 0 0 4px var(--wx-navy-3)}
.wx-steps b{display:block;font-size:15px;font-weight:700;margin-bottom:6px}
.wx-steps span{display:block;font-size:14px;line-height:1.6;color:var(--wx-ink-3)}
.wx-steps .wx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.wx-steps .wx-chips span{display:inline-block;width:auto;font-size:12px;font-weight:600;letter-spacing:.02em;padding:5px 11px;border-radius:var(--wx-radius-pill);border:1px solid var(--wx-navy-line);color:var(--wx-ink-2)}
@media(max-width:980px){.wx-case{grid-template-columns:1fr;gap:34px}}

.wx-flows{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.wx-flows li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.6;color:var(--wx-ink-3)}
.wx-flows li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--wx-green);opacity:.85}
.wx-flows b{color:var(--wx-ink);font-weight:700}

.wx-hubhero__aud{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.wx-hubhero__aud span{font-size:12.5px;font-weight:600;letter-spacing:.02em;padding:6px 13px;border-radius:var(--wx-radius-pill);border:1px solid var(--wx-navy-line);background:rgba(255,255,255,.03);color:var(--wx-ink-2)}

/* ── Hub hero: smooth CSS gradient instead of blurred SVG ─ */
.wx-hubhero .wx-hero__bg-curve svg{display:none}
.wx-hubhero .wx-hero__bg-curve{background:
 linear-gradient(180deg, rgba(41,44,66,0) 55%, var(--wx-navy-2) 100%),
 radial-gradient(ellipse 70% 60% at 82% 14%, rgba(95,43,255,.62) 0%, rgba(95,43,255,0) 70%),
 radial-gradient(ellipse 50% 40% at 62% 56%, rgba(82,88,232,.38) 0%, rgba(82,88,232,0) 70%),
 radial-gradient(ellipse 55% 36% at 6% 62%, rgba(51,226,132,.48) 0%, rgba(51,226,132,0) 65%),
 var(--wx-navy-2)}

.wx-mod{cursor:default}.wx-mod:hover{transform:none}

.wx-hubhero .wx-hero__title{text-wrap:balance;max-width:14ch}

/* ── Mobile top bar alignment ─────────────────────────── */
@media(max-width:980px){
.wx-topbar{padding:12px 0}
.wx-topbar__inner{align-items:center;gap:12px}
.wx-topbar__inner .wx-btn{align-self:center;height:38px;padding:0 16px;font-size:13px}
.wx-topbar__inner .wx-btn svg{display:none}
.wx-topbar__logo-svg{height:28px}
.wx-topbar__spacer{flex:1}
.wx-navtoggle{order:3;margin-left:2px}
.wx-mobnav{position:absolute;left:0;right:0;top:100%;box-shadow:0 18px 40px rgba(0,0,0,.35)}
}
@media(max-width:400px){.wx-topbar__inner .wx-btn{padding:0 12px}}

@media(max-width:560px){.wx-hubhero .wx-hero__title{font-size:clamp(34px,10.5vw,44px);line-height:1.05}.wx-hubhero__sub{font-size:16.5px}}


/* ==========================================================================
   Production additions
   ========================================================================== */

/* ── Anchor targets clear the sticky top bar ─────────────────────────────
   Without this, #modules / #demo land underneath the header.            */
html { scroll-padding-top: 92px; }
@media (max-width: 980px) { html { scroll-padding-top: 74px; } }

/* ── Visible keyboard focus everywhere ──────────────────────────────────
   The design only styled :focus on form fields, leaving links and
   buttons with no keyboard affordance at all.                           */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--wx-green);
  outline-offset: 3px;
  border-radius: 4px;
}
.wx-field__input:focus-visible,
.wx-field__textarea:focus-visible {
  outline: 2px solid var(--wx-green);
  outline-offset: 1px;
}

/* ── Skip link ──────────────────────────────────────────────────────── */
.wx-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--wx-blue); color: #fff;
  padding: 12px 20px; border-radius: 0 0 var(--wx-radius-sm) 0;
  font-weight: 700; font-size: 14px; text-decoration: none;
}
.wx-skip:focus { left: 0; }

/* ── Form states ────────────────────────────────────────────────────────
   The design shipped .is-success in JS but .is-sent in CSS; both are
   supported here so neither spelling silently does nothing.             */
.wx-form.is-sent .wx-form__success,
.wx-form.is-success .wx-form__success { display: block; }
.wx-form.is-sent fieldset,
.wx-form.is-success fieldset { opacity: 0.4; pointer-events: none; }

.wx-form__error {
  display: none;
  background: rgba(255, 96, 96, 0.1);
  border: 1px solid rgba(255, 96, 96, 0.4);
  border-radius: var(--wx-radius-sm);
  padding: 14px 16px;
  font-weight: 600; font-size: 14px; color: #FF8A8A;
}
.wx-form.is-error .wx-form__error { display: block; }
.wx-form.is-busy fieldset { opacity: 0.55; pointer-events: none; }

/* Honeypot: hidden from people, visible to naive bots. Not display:none,
   so that bots that skip hidden fields still fill it in.                 */
.wx-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.wx-field__input[aria-invalid="true"],
.wx-field__textarea[aria-invalid="true"] { border-color: #FF6060; }

/* ── Cookie consent banner ──────────────────────────────────────────── */
.wx-cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 120;
  max-width: 560px;
  background: var(--wx-navy-3);
  border: 1px solid var(--wx-navy-line);
  border-radius: var(--wx-radius);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  padding: 22px 24px;
  display: none;
  flex-direction: column;
  gap: 16px;
  color: var(--wx-ink-2);
  font-size: 13.5px; line-height: 1.6;
}
.wx-cookie[data-open="true"] { display: flex; }
.wx-cookie__title {
  margin: 0; font-size: 15px; font-weight: 800; color: var(--wx-ink);
  letter-spacing: 0.01em;
}
.wx-cookie p { margin: 0; }
.wx-cookie a { color: var(--wx-green); }
.wx-cookie__btns { display: flex; flex-wrap: wrap; gap: 10px; }
/* Reject is given the same visual weight as Accept — GDPR requires that
   refusing be no harder than consenting.                                */
.wx-cookie__btns .wx-btn { height: 40px; font-size: 13px; padding: 0 20px; }
@media (max-width: 560px) {
  .wx-cookie { left: 10px; right: 10px; bottom: 10px; padding: 18px; }
  .wx-cookie__btns .wx-btn { flex: 1 1 140px; justify-content: center; }
}

/* ── Prose pages (privacy, cookies, terms, 404) ─────────────────────── */
.wx-prose { padding: 72px 0 104px; background: var(--wx-navy-2); }
.wx-prose__inner { max-width: 760px; }
.wx-prose h1 {
  font-size: clamp(34px, 5vw, 52px); font-weight: 800;
  line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--wx-ink);
}
.wx-prose__meta { font-size: 13px; color: var(--wx-ink-4); margin: 0 0 44px; }
.wx-prose h2 {
  font-size: 22px; font-weight: 700; line-height: 1.25;
  margin: 48px 0 14px; color: var(--wx-ink); letter-spacing: -0.01em;
}
.wx-prose h3 {
  font-size: 16.5px; font-weight: 700; margin: 30px 0 10px; color: var(--wx-ink);
}
.wx-prose p, .wx-prose li {
  font-size: 15px; line-height: 1.72; color: var(--wx-ink-2); margin: 0 0 14px;
}
.wx-prose ul, .wx-prose ol { margin: 0 0 18px; padding-left: 22px; }
.wx-prose li { margin-bottom: 8px; }
.wx-prose li::marker { color: var(--wx-green); }
.wx-prose a { color: var(--wx-green); text-decoration: underline; text-underline-offset: 3px; }
.wx-prose strong { color: var(--wx-ink); font-weight: 700; }
.wx-prose hr { border: 0; border-top: 1px solid var(--wx-navy-line); margin: 44px 0; }
.wx-prose__note {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--wx-navy-line);
  border-left: 3px solid var(--wx-green);
  border-radius: var(--wx-radius-sm);
  padding: 18px 20px; margin: 26px 0;
}
.wx-prose__note p:last-child { margin-bottom: 0; }

/* Tables in legal pages (cookie inventory) scroll rather than
   forcing the page to scroll sideways.                                  */
.wx-tablewrap { overflow-x: auto; margin: 22px 0 28px; -webkit-overflow-scrolling: touch; }
.wx-prose table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 13.5px; }
.wx-prose th, .wx-prose td {
  text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--wx-navy-line); vertical-align: top;
  color: var(--wx-ink-2);
}
.wx-prose th {
  color: var(--wx-ink); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom-color: var(--wx-ink-faint);
}

/* ── 404 ────────────────────────────────────────────────────────────── */
.wx-404 { padding: 120px 0 140px; background: var(--wx-navy-2); text-align: center; }
.wx-404__code {
  font-size: clamp(72px, 16vw, 150px); font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; margin: 0;
  background: var(--wx-grad-hero); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.wx-404__title { font-size: clamp(22px, 4vw, 30px); font-weight: 700; margin: 18px 0 12px; color: var(--wx-ink); }
.wx-404__sub { font-size: 16px; color: var(--wx-ink-3); margin: 0 auto 34px; max-width: 44ch; }

/* ── Print ──────────────────────────────────────────────────────────── */
@media print {
  .wx-topbar, .wx-mobnav, .wx-cookie, .wx-hero__bg, .wx-footer__top { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .wx-prose p, .wx-prose li, .wx-prose h1, .wx-prose h2, .wx-prose h3 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* ── Footer bottom bar ──────────────────────────────────────────────────── */
.wx-footer__legal { display: flex; flex-direction: column; gap: 6px; }
.wx-footer__links { display: inline-flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.wx-footer__links a { color: var(--wx-ink-3); }

/* Row-header cells in legal tables read as labels, not column headings. */
.wx-prose tbody th { font-size: 13.5px; letter-spacing: 0; text-transform: none; }

/* 404 actions */
.wx-404__ctas { justify-content: center; }

/* ── Accessibility corrections ──────────────────────────────────────────── */

/* Footer headings are h2 for correct document outline; keep the small look. */
.wx-footer h2.wx-footer__h {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--wx-ink); margin: 0 0 18px;
}

/* Links inside the consent banner must not rely on colour alone. */
.wx-cookie a { text-decoration: underline; text-underline-offset: 2px; }

/* A horizontally scrollable table is keyboard-reachable, and shows a focus
   ring when it is. */
.wx-tablewrap:focus-visible { outline: 2px solid var(--wx-green); outline-offset: 2px; }

/* The "(optional)" hint next to the Name field. */
.wx-field__opt { color: var(--wx-ink-3); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* A right-edge fade tells the reader the table scrolls sideways on a phone.
   The fade is painted on the wrapper and pinned while the content scrolls. */
.wx-tablewrap {
  background:
    linear-gradient(to right, var(--wx-navy-2) 30%, rgba(41,44,66,0)) left center / 28px 100% no-repeat local,
    linear-gradient(to left,  var(--wx-navy-2) 30%, rgba(41,44,66,0)) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,   rgba(0,0,0,.45), rgba(0,0,0,0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) right center / 14px 100% no-repeat scroll;
}