:root {
        --contact-center-fab-bottom:26px;--contact-center-panel-bottom:98px;--contact-center-footer-clearance:96px;
           --bg: #080a0c;
        --bg-2: #0d1114;
        --surface: #141a1f;
        --surface-2: #1a2026;
        --text: #f4f5f2;
        --muted: #a7a198;
        --faint: #7f7970;
        --line: rgba(255, 255, 255, 0.1);
        --line-soft: rgba(255, 255, 255, 0.06);
        --line-strong: rgba(255, 255, 255, 0.2);
        --mineral: #e6e0d2;
        --mineral-hi: #f1ece0;
        --sage: #82959a;
        --brass: #c2a26a;
        --glass: rgba(28, 34, 40, 0.48);
        --shadow: 0 28px 90px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        --wrap: 1180px;
        --ease: 220ms cubic-bezier(0.16, 1, 0.3, 1);
        --sans: 'Inter', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
        --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
      }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font-family: var(--sans);
        font-size: 16px;
        line-height: 1.55;
        letter-spacing: -0.005em;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      button {
        font: inherit;
        color: inherit;
        background: none;
        border: 0;
        cursor: pointer;
      }
      svg {
        display: block;
      }
      h1,
      h2,
      h3,
      h4 {
        margin: 0;
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 1.08;
      }
      p {
        margin: 0;
      }
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      :focus-visible {
        outline: 2px solid var(--mineral);
        outline-offset: 3px;
        border-radius: 4px;
      }
      .wrap {
        max-width: var(--wrap);
        margin: 0 auto;
        padding: 0 28px;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 13px 22px;
        border-radius: 9px;
        font-size: 14.5px;
        font-weight: 500;
        transition: var(--ease);
        border: 1px solid transparent;
      }
      .btn svg {
        width: 16px;
        height: 16px;
        transition: transform var(--ease);
      }
      .btn:hover svg {
        transform: translateX(3px);
      }
      .btn-primary {
        background: var(--mineral);
        color: #0b0e11;
        font-weight: 600;
      }
      .btn-primary:hover {
        background: var(--mineral-hi);
      }
      .btn-ghost {
        border-color: var(--line-strong);
        color: var(--text);
        background: rgba(255, 255, 255, 0.02);
      }
      .btn-ghost:hover {
        background: rgba(255, 255, 255, 0.06);
      }
      .btn-sm {
        padding: 10px 16px;
        font-size: 13.5px;
        border-radius: 8px;
      }
      .btn-block {
        width: 100%;
      }

      /* ---- about page ---- */
      .hero {
        position: relative;
        padding: 72px 0 70px;
        overflow: hidden;
      }
      .hero::before {
        content: '';
        position: absolute;
        inset: -30% -10% auto -10%;
        height: 130%;
        pointer-events: none;
        background:
          radial-gradient(54% 48% at 18% 4%, rgba(230, 224, 210, 0.075), transparent 62%),
          radial-gradient(46% 44% at 92% 34%, rgba(130, 149, 154, 0.09), transparent 66%);
      }
      .hero .wrap {
        position: relative;
        z-index: 1;
      }
      .hero h1 {
        font-size: clamp(34px, 4.1vw, 52px);
        letter-spacing: -0.035em;
        line-height: 1.05;
        max-width: 17em;
      }
      .hero h1 em {
        font-style: normal;
        color: var(--mineral);
      }

      .strip {
        border-top: 1px solid var(--line-soft);
        border-bottom: 1px solid var(--line-soft);
        background: var(--bg-2);
        padding: 34px 0;
      }

      .two {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
      }
      .card {
        padding: 28px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
      }
      .card h3 {
        font-size: 17px;
        margin-bottom: 10px;
      }
      .card p {
        font-size: 14.5px;
        color: var(--muted);
        line-height: 1.6;
      }
      .why {
        display: grid;
        gap: 2px;
      }
      .why li {
        display: flex;
        gap: 18px;
        padding: 20px 0;
        border-top: 1px solid var(--line-soft);
      }
      .why li:last-child {
        border-bottom: 1px solid var(--line-soft);
      }
      .why .n {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--faint);
        padding-top: 4px;
        flex: none;
      }
      .why h3 {
        font-size: 16.5px;
        font-weight: 500;
        margin-bottom: 6px;
      }
      .why p {
        font-size: 14.5px;
        color: var(--muted);
        line-height: 1.6;
      }
      .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 18px;
      }
      .chip {
        font-size: 13px;
        padding: 7px 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--muted);
      }
      @media (max-width: 1000px) {
        .two,
        .cover {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 640px) {
        .wrap {
          padding: 0 20px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        * {
          transition: none !important;
        }
      }

      /* ===== SHARED SITE CHROME (header + drawer + action bar + footer) ===== */
      /* ============================ HEADER ============================ */
      .nav {
        position: sticky;
        top: 0;
        z-index: 60;
        background: rgba(8, 10, 12, 0.78);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--line-soft);
      }
      .nav-inner {
        display: flex;
        align-items: center;
        gap: 36px;
        height: 70px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 11px;
        flex: none;
      }
      .brand svg {
        width: 27px;
        height: 27px;
        color: var(--mineral);
      }
      .brand .name {
        font-size: 17.5px;
        font-weight: 600;
        letter-spacing: -0.02em;
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 36px;
        margin-inline-start: auto;
      }
      .nav-actions { align-items: center; display: flex; flex: none; gap: 14px; margin-inline-start: auto; }
      /* Right-side utility cluster: country switcher · Sign in · primary CTA.
   Utilities stay quieter than the buyer nav — outline/text, never filled. */
      .nav-util {
        display: flex;
        align-items: center;
        gap: 6px;
        padding-inline-end: 8px;
        margin-inline-end: 2px;
        border-inline-end: 1px solid var(--line-soft);
      }
      .ctry {
        position: relative;
        display: flex;
        align-items: center;
      }
      .ctry-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 11px;
        border-radius: 8px;
        font-size: 13.5px;
        color: var(--muted);
        transition: var(--ease);
      }
      .ctry-btn:hover,
      .ctry[data-open] .ctry-btn {
        color: var(--text);
        background: rgba(255, 255, 255, 0.05);
      }
      .ctry-btn .globe {
        width: 15px;
        height: 15px;
      }
      .ctry-btn .caret {
        width: 11px;
        height: 11px;
        opacity: 0.7;
        transition: transform var(--ease);
      }
      .ctry[data-open] .ctry-btn .caret {
        transform: rotate(180deg);
      }
      .signin {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 13.5px;
        color: var(--muted);
        transition: var(--ease);
      }
      .signin:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.05);
      }
      .signin svg {
        width: 15px;
        height: 15px;
      }

      /* icon-only utility: quiet by design — never a filled pill */
      .uic {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        border: 1px solid var(--line-soft);
        color: var(--muted);
        background: rgba(255, 255, 255, 0.02);
        transition: var(--ease);
      }
      .uic:hover {
        color: var(--text);
        border-color: var(--line-strong);
        background: rgba(255, 255, 255, 0.06);
      }
      .uic svg {
        width: 16px;
        height: 16px;
      }
      @media (max-width: 860px) {
        .uic {
          display: none;
        }
      }

      .nav-toggle {
        display: none;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 8px;
      }
      .nav-toggle svg {
        width: 18px;
        height: 18px;
      }

      /* ---------- nav items + panels ---------- */
      .navitem {
        position: static;
        display: flex;
        align-items: center;
        height: 70px;
      }
      .navitem.anchored {
        position: relative;
      }
      .navlabel,
      .navlink {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        font-size: 14.5px;
        color: var(--muted);
        transition: color var(--ease);
      }
      .navlabel:hover,
      .navlink:hover,
      .navitem[data-open] .navlabel {
        color: var(--text);
      }
      .navlabel .caret {
        width: 12px;
        height: 12px;
        transition: transform var(--ease);
        opacity: 0.75;
      }
      .navitem[data-open] .navlabel .caret {
        transform: rotate(180deg);
      }

      .panel {
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        z-index: 70;
        background: var(--bg-2);
        border-top: 1px solid var(--line-soft);
        border-bottom: 1px solid var(--line-soft);
        box-shadow: 0 34px 80px rgba(0, 0, 0, 0.55);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition:
          opacity var(--ease),
          transform var(--ease),
          visibility var(--ease);
      }
      .navitem[data-open] .panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
      .panel-inner {
        max-width: var(--wrap);
        margin: 0 auto;
        padding: 34px 28px 36px;
        display: grid;
        grid-template-columns: 1.15fr 1.1fr 1fr 0.8fr;
        gap: 40px;
      }


      .pcol h5 { color: var(--text); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; margin-bottom: 20px; text-transform: uppercase; }
      .pcol ul {
        display: grid;
        gap: 4px;
      }
      .pcol li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 11px;
        margin: 0 -11px;
        border-radius: 8px;
        font-size: 14.5px;
        color: var(--muted);
        transition: var(--ease);
      }
      .pcol li > a:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.05);
      }
      .pcol li > a .go {
        width: 14px;
        height: 14px;
        opacity: 0;
        transform: translateX(-4px);
        transition: var(--ease);
        color: var(--mineral);
        flex: none;
      }
      .pcol li > a:hover .go {
        opacity: 1;
        transform: translateX(0);
      }
      .pcol li > a .mk {
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: 0.06em;
        color: var(--mineral);
        border: 1px solid rgba(230, 224, 210, 0.28);
        border-radius: 5px;
        padding: 2px 5px;
        flex: none;
        margin-inline-end: 2px;
      }
      .pcol li > a.soft {
        color: var(--faint);
        font-size: 13.5px;
      }
      .pcol li > a .rw {
        display: block;
      }
      .pcol li > a .rw em {
        display: block;
        font-style: normal;
        font-size: 12.5px;
        color: var(--faint);
        margin-top: 2px;
        letter-spacing: 0;
        transition: color var(--ease);
      }
      .pcol li > a:hover .rw em {
        color: var(--muted);
      }
      /* helper row: an action, not a thin footnote */
      .pcol li > a.soft:hover {
        color: var(--text);
      }

      .pdivide {
        border-top: 1px solid var(--line-soft);
        margin-top: 14px;
        padding-top: 14px;
      }
      /* Markets menu is a switcher: the market you are in is state, not a destination. */
      .pcol li.mkt-current .mkt-row { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;margin:0 -11px;border-radius:8px;font-size:14.5px;color:var(--muted);background:rgba(230,224,210,.05) }
      .pcol li.mkt-current .rw { display:block }
      .pcol li.mkt-current .rw em { display:block;font-style:normal;font-size:12.5px;color:var(--faint);margin-top:2px;letter-spacing:0 }
      .mkt-badge { font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:3px 6px;flex:none;white-space:nowrap }
      .dmkt-current { display:flex;align-items:center;gap:8px;color:var(--muted) }
      .dmkt-current .mkt-badge { margin-inline-start:auto }

      .panel-sm {
        z-index: 90;
        left: auto;
        right: auto;
        width: 290px;
        top: 70px;
        border-radius: 14px;
        border: 1px solid var(--line);
        border-top: 1px solid var(--line);
      }
      .panel-sm .panel-inner {
        display: block;
        padding: 14px;
      }

      /* ---------- mobile drawer ---------- */
      .drawer {
        display: none;
        position: fixed;
        inset: 70px 0 0;
        z-index: 80;
        background: var(--bg);
        overflow-y: auto;
        padding: 14px 0 40px;
        border-top: 1px solid var(--line-soft);
      }
      .drawer.open {
        display: block;
      }
      .dgroup {
        border-bottom: 1px solid var(--line-soft);
      }
      .dhead {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 17px 0;
        font-size: 16px;
        color: var(--text);
        text-align: start;
      }
      .dhead svg {
        width: 15px;
        height: 15px;
        color: var(--faint);
        transition: transform var(--ease);
      }
      .dgroup[data-open] .dhead svg {
        transform: rotate(180deg);
      }
      .dbody {
        display: none;
        padding: 0 0 16px;
      }
      .dgroup[data-open] .dbody {
        display: grid;
        gap: 2px;
      }
      .dbody a {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 11px 12px;
        margin: 0 -12px;
        border-radius: 8px;
        font-size: 15px;
        color: var(--muted);
      }
      .dbody a:hover {
        background: rgba(255, 255, 255, 0.05);
        color: var(--text);
      }
      .dbody a .mk, .dbody .dmkt-current .mk {
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: 0.06em;
        color: var(--mineral);
        border: 1px solid rgba(230, 224, 210, 0.28);
        border-radius: 5px;
        padding: 2px 5px;
      }
      .dbody a.soft {
        color: var(--faint);
        font-size: 14px;
      }
      .dflat {
        display: block;
        padding: 17px 0;
        font-size: 16px;
        color: var(--text);
        border-bottom: 1px solid var(--line-soft);
      }
      .drawer .btn {
        margin-top: 24px;
      }

      /* ============================ MOBILE ACTION BAR ============================
   Persistent access without floating pills. Desktop keeps the header CTA and
   the utility icons; below 860px this bar carries the same actions and the Vy
   launcher folds into it, so nothing floats loose over the page. */
      .mbar {
        display: none;
      }
      @media (max-width: 860px) {
        .mbar {
          display: flex;
          align-items: center;
          gap: 10px;
          position: fixed;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 88;
          padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
          background: rgba(8, 10, 12, 0.94);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          border-top: 1px solid var(--line-soft);
        }
        .mbar .mb-ic {
          width: 46px;
          height: 46px;
          flex: none;
          display: grid;
          place-items: center;
          border-radius: 10px;
          border: 1px solid var(--line);
          color: var(--muted);
          background: rgba(255, 255, 255, 0.03);
        }
        .mbar .mb-ic svg {
          width: 19px;
          height: 19px;
        }
        .mbar .btn {
          flex: 1;
          padding: 14px 18px;
        }
        .chat-fab {
          display: none;
        } /* one persistent surface on mobile, not two */
        body {
          padding-bottom: 78px;
        }
        .drawer {
          bottom: 70px;
        }
      }

      @media (max-width: 1400px) {
        .nav-links {
          gap: 20px;
        }
        .navlabel,
        .navlink,
        .signin {
          font-size: 13.5px;
        }
        .nav-inner {
          gap: 22px;
        }
      }
      @media (max-width: 1160px) {
        .nav-links {
          gap: 16px;
        }
        .panel-inner {
          grid-template-columns: 1fr 1fr 1fr;
          gap: 32px;
        }
        .pcol-connect {
          grid-column: 1/-1;
          display: flex;
          gap: 10px;
        }
        .pcol-connect ul {
          grid-auto-flow: column;
          gap: 10px;
        }
      }
      @media (max-width: 860px) {
        .nav-links {
          display: none;
        }
        .nav-toggle {
          display: block;
          margin-inline-start: auto;
        }
        .nav-util {
          display: none;
        }
        .nav-inner {
          gap: 16px;
        }
      }
      /* ============================ FOOTER (production structure) ============================ */
      .foot { background: var(--bg-2); border-top: 1px solid var(--line-soft); display: flex; padding: 64px 0 34px; }
      .foot-grid {
        display: grid;
        grid-template-columns: 1.7fr repeat(5, 1fr);
        gap: 38px 26px;
      }
      .foot-brand {
        grid-column: 1/-1;
        padding-bottom: 10px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--line-soft);
      }
      .foot-brand .fb-name {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        margin-bottom: 16px;
      }
      .foot-brand p {
        font-size: 14.5px;
        color: var(--muted);
        line-height: 1.6;
        max-width: 22em;
      }
      .fcol h4 {
        font-family: var(--sans);
        font-size: 12px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text);
        margin-bottom: 18px;
        min-height: 2.9em;
        line-height: 1.35;
        font-weight: 600;
      }
      .fcol ul {
        display: grid;
        gap: 11px;
      }
      .fcol a {
        font-size: 14.5px;
        color: var(--muted);
        transition: color var(--ease);
      }
      .fcol a:hover {
        color: var(--text);
      }
         .fcol h4 a{color:var(--text);transition:color var(--ease)}
         .fcol h4 a:hover{color:var(--mineral)}

      .foot-bar {
        margin-top: 46px;
        padding-top: 26px;
        border-top: 1px solid var(--line-soft);
      }
      .foot-bar-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
      }
      .foot-legal {
        font-size: 14px;
        color: var(--faint);
      }

      .foot-legal a {
        color: var(--muted);
        text-decoration: none;
        transition: var(--ease);
      }
      .foot-legal a:hover {
        color: var(--text);
      }
      .foot-bar-right {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-inline-end: 72px;
      }

      .store {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 44px;
        padding: 0 16px;
        border-radius: 8px;
        background: #000;
        border: 1px solid rgba(255, 255, 255, 0.16);
        transition: var(--ease);
      }
      .store:hover {
        border-color: rgba(255, 255, 255, 0.34);
      }
      .store .glyph {
        width: 22px;
        height: 22px;
        flex: none;
      }
      .store .lbl {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: -0.015em;
        color: #fff;
      }
      .store .lbl small {
        display: block;
        font-size: 9.5px;
        font-weight: 400;
        color: #fff;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        margin-bottom: 2px;
        line-height: 1.1;
      }

      .pill {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 15px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.03);
        font-size: 14.5px;
        color: var(--text);
        transition: var(--ease);
      }
      .pill:hover {
        border-color: var(--line-strong);
      }
      .pill .globe {
        width: 17px;
        height: 17px;
        color: var(--muted);
      }
      .pill .chev {
        width: 13px;
        height: 13px;
        color: var(--muted);
      }

      .themebox {
        display: flex;
        align-items: center;
        gap: 4px;
        height: 44px;
        padding: 0 8px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.03);
      }
      .themebox button {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        color: var(--muted);
        transition: var(--ease);
      }
      .themebox button:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.06);
      }
      .themebox svg {
        width: 16px;
        height: 16px;
      }

      .foot-brand .foot-social {
        margin-top: 22px;
      }
      .foot-social {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .foot-social a {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        border: 1px solid var(--line-soft);
        color: var(--text);
        background: rgba(255, 255, 255, 0.02);
        transition: var(--ease);
      }
      .foot-social a:hover {
        border-color: var(--line-strong);
        background: rgba(255, 255, 255, 0.07);
      }
      .foot-social svg {
        width: 17px;
        height: 17px;
      }

      @media (max-width: 1160px) {
        .foot-grid {
          grid-template-columns: repeat(3, 1fr);
          gap: 34px 28px;
        }
      }
      @media (max-width: 560px) {
        .foot-grid {
          grid-template-columns: 1fr 1fr;
          gap: 30px 24px;
        }
        .foot {
          padding: 48px 0 30px;
        }
        .foot-bar {
          flex-direction: column;
          align-items: flex-start;
          gap: 20px;
        }
        .foot-bar-right {
          gap: 10px;
          margin-inline-end: 0;
        }
      }

      /* footer matched to the live sonsoto.com layout: brand + 4 columns */
      .foot-grid {
        grid-template-columns: 1.55fr repeat(4, 1fr) !important;
        gap: 40px 32px !important;
      }
      .foot-brand {
        grid-column: auto !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        border-bottom: 0 !important;
      }
      .store {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 44px;
        padding: 0 16px;
        border-radius: 8px;
        background: #000;
        border: 1px solid rgba(255, 255, 255, 0.16);
        transition: var(--ease);
      }
      .store:hover {
        border-color: rgba(255, 255, 255, 0.34);
      }
      .store .glyph {
        width: 22px;
        height: 22px;
        flex: none;
      }
      .store .lbl {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: -0.015em;
        color: #fff;
      }
      .store .lbl small {
        display: block;
        font-size: 9.5px;
        font-weight: 400;
        color: #fff;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        margin-bottom: 2px;
        line-height: 1.1;
      }
      .themebox {
        display: flex;
        align-items: center;
        gap: 4px;
        height: 44px;
        padding: 0 8px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.03);
      }
      .themebox button {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        color: var(--muted);
        transition: var(--ease);
      }
      .themebox button:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.06);
      }
      .themebox svg {
        width: 16px;
        height: 16px;
      }
      @media (max-width: 1160px) {
        .foot-grid {
          grid-template-columns: 1fr 1fr 1fr !important;
        }
      }
      @media (max-width: 640px) {
        .foot-grid {
          grid-template-columns: 1fr 1fr !important;
        }
      }

      /* bottom bar wraps rather than compressing — see shared footer bottom-bar block */
      .foot-legal {
        white-space: normal;
      }
      .store {
        height: 42px;
        padding: 0 13px;
      }
      .store .lbl {
        font-size: 14px;
      }
      .pill {
        height: 42px;
        padding: 0 13px;
        font-size: 14px;
      }
      .themebox {
        height: 42px;
      }
      @media (max-width: 1100px) {
        .foot-bar-main {
          flex-wrap: wrap !important;
        }
        .foot-legal {
          white-space: normal;
        }
      }

      /* seven-cell footer: brand + Business Setup + Corporate Secretary + Markets + Support + Company + Trust */
      .foot-grid {
        grid-template-columns: 1.1fr repeat(6, 1fr) !important;
        gap: 34px 20px !important;
      }
      @media (max-width: 1160px) {
        .foot-grid {
          grid-template-columns: 1fr 1fr 1fr !important;
        }
      }
      @media (max-width: 640px) {
        .foot-grid {
          grid-template-columns: 1fr 1fr !important;
        }
      }

      /* 860–1080px: full nav still shows, so the utility cluster must stand down or it overflows */
      @media (max-width: 1080px) {
        .nav-util {
          display: none;
        }
      }

      /* anchored dropdowns must not push the page wider than the viewport */
      html {
        overflow-x: hidden;
      }
      .panel-sm {
        max-width: calc(100vw - 28px);
      }

      /* ============================ VY (ported from index) ============================ */
      .vy-panel {
        position: fixed;
        right: 26px;
        bottom: var(--contact-center-panel-bottom);
        z-index: 95;
        width: 352px;
        max-width: calc(100vw - 32px);
        border-radius: 16px;
        border: 1px solid var(--line);
        background: var(--bg-2);
        box-shadow:
          0 30px 80px rgba(0, 0, 0, 0.62),
          inset 0 1px 0 rgba(255, 255, 255, 0.07);
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px) scale(0.985);
        transform-origin: 100% 100%;
        transition: var(--ease);
        overflow: hidden;
      }
      .vy-panel[data-open] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
      }
      .vy-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 16px 14px;
        border-bottom: 1px solid var(--line-soft);
      }
      .vy-mark {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        flex: none;
        border: 1px solid rgba(230, 224, 210, 0.3);
        background: rgba(230, 224, 210, 0.08);
        color: var(--mineral);
      }
      .vy-mark svg {
        width: 19px;
        height: 19px;
      }
      .vy-id {
        flex: 1;
        min-width: 0;
      }
      .vy-id b {
        display: block;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.015em;
      }
      .vy-id span {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--faint);
        margin-top: 2px;
      }
      .vy-id i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--sage);
        box-shadow: 0 0 0 3px rgba(130, 149, 154, 0.18);
      }

      .vy-id .desk-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        border: 0;
        border-radius: 0;
        font-size: 12px;
        color: var(--faint);
        margin-top: 2px;
        background: transparent;
      }
      .vy-id .desk-status .desk-dot {
        width: 6px;
        height: 6px;
      }
      .vy-id .desk-status[data-status="open"] .desk-dot {
        box-shadow: 0 0 0 3px rgba(111, 206, 142, 0.18);
      }
      .vy-x {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        color: var(--faint);
        transition: var(--ease);
        flex: none;
      }
      .vy-x:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.06);
      }
      .vy-x svg {
        width: 15px;
        height: 15px;
      }

      .vy-body {
        padding: 16px;
      }
      .vy-acts {
        display: grid;
        gap: 7px;
      }
      .vy-act {
        display: flex;
        align-items: center;
        gap: 11px;
        width: 100%;
        text-align: start;
        padding: 12px 13px;
        border: 1px solid var(--line-soft);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.02);
        font-size: 14px;
        transition: var(--ease);
      }
      .vy-act:hover {
        border-color: rgba(230, 224, 210, 0.38);
        background: rgba(230, 224, 210, 0.06);
      }
      .vy-act .ic {
        width: 17px;
        height: 17px;
        color: var(--mineral);
        flex: none;
        opacity: 0.85;
      }
      .vy-act .go {
        width: 14px;
        height: 14px;
        color: var(--faint);
        margin-inline-start: auto;
        flex: none;
        transition: transform var(--ease);
      }
      .vy-act:hover .go {
        transform: translateX(3px);
      }


      /* WhatsApp = handoff, visually subordinate: no fill, sits under a divider */
      .vy-hand {
        border-top: 1px solid var(--line-soft);
        padding: 12px 16px 15px;
        background: rgba(255, 255, 255, 0.015);
      }
      .vy-hand-lab {
        font-size: 11px;
        color: var(--faint);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin: 0 0 6px;
      }
      .vy-wa {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 9px 10px;
        margin: 0 -10px;
        border-radius: 9px;
        transition: var(--ease);
      }
      .vy-wa:hover {
        background: rgba(255, 255, 255, 0.05);
      }
      .vy-wa .wa {
        width: 19px;
        height: 19px;
        color: var(--muted);
        flex: none;
      }
      .vy-wa b {
        display: block;
        font-size: 13.5px;
        font-weight: 500;
      }
      .vy-wa span {
        display: block;
        font-size: 12px;
        color: var(--faint);
        margin-top: 1px;
      }
      .vy-wa .go {
        width: 14px;
        height: 14px;
        color: var(--faint);
        margin-inline-start: auto;
        flex: none;
      }

      @media (max-width: 560px) {
        .vy-panel {
          right: 16px;
          left: 16px;
          bottom: 82px;
          width: auto;
        }
      }

      /* ============================ VY LAUNCHER ============================ */
      .chat-fab {
        position: fixed;
        right: 26px;
        bottom: var(--contact-center-fab-bottom);
        z-index: 90;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        border: 1px solid rgba(230, 224, 210, 0.3);
        background: rgba(20, 26, 31, 0.82);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow:
          0 14px 40px rgba(0, 0, 0, 0.55),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
        color: var(--mineral);
        transition: var(--ease);
      }
      .chat-fab:hover {
        transform: translateY(-2px);
        border-color: var(--mineral);
        box-shadow:
          0 18px 50px rgba(0, 0, 0, 0.6),
          0 0 0 6px rgba(230, 224, 210, 0.06);
      }
      .chat-fab svg {
        width: 24px;
        height: 24px;
      }
      .chat-fab{background:#25D366;border:none;color:#fff}.chat-fab:hover{background:#1fc25f;border:none}.chat-fab svg{width:36px;height:36px}
      @media (max-width: 560px) {
        .chat-fab {
          right: 16px;
          bottom: 16px;
          width: 52px;
          height: 52px;
        }
      }
      @media print {
        .chat-fab {
          display: none;
        }
      }

      /* ============================ CONTACT CARD (shared) ============================
   One component. The global Get-in-touch panel and the contact page rail render
   different sets of it; only the primitive styles are shared. */
      .contact-card {
        display: flex;
        gap: 13px;
        align-items: flex-start;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        transition: var(--ease);
      }
      .contact-card + .contact-card {
        margin-top: 10px;
      }
      .contact-card:hover {
        border-color: var(--line-strong);
        background: rgba(255, 255, 255, 0.04);
      }
      .contact-card:focus-visible {
        outline: 2px solid var(--mineral, #e6e0d2);
        outline-offset: 2px;
      }
      .cc-ic {
        flex: none;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        border: 1px solid var(--line-soft);
        color: var(--text);
      }
      .cc-ic svg {
        width: 17px;
        height: 17px;
      }
      .cc-tx {
        display: block;
      }
      .cc-h {
        display: block;
        font-size: 14.5px;
        color: var(--text);
        margin-bottom: 3px;
      }
      .cc-b {
        display: block;
        font-size: 13px;
        color: var(--muted);
        line-height: 1.5;
      }
      .cc-stack {
        display: block;
      }
    
      /* PORTED FROM INDEX — DO NOT EDIT MANUALLY */
      /* ---------- Mega-menu sub-grid (Business Setup → Set Up column) ---------- */
      .pcol-wide { }

      /* ---------- Mega-menu footer row: market switch strip ---------- */
      .panel-footer {
        max-width: var(--wrap);
        margin: 0 auto;
        padding: 14px 28px 20px;
        border-top: 1px solid var(--line-soft);
        display: flex;
        align-items: center;
        gap: 22px;
        font-size: 13px;
      }
      .panel-footer-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--muted);
        transition: var(--ease);
      }
      /* Setup paths is a flat list now, not a 3-up sub-grid, so the middle track no
         longer needs double width — even thirds remove the dead zone before Connect. */
      .panel-footer-link.is-current { opacity: .45; text-decoration: none; color: var(--muted); }
      .panel-footer-link.is-current:hover { opacity: 1; color: var(--text); }
      .panel-footer-link:hover { color: var(--text); }
      .panel-footer-link .mk {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.06em;
        color: var(--mineral);
        border: 1px solid rgba(230, 224, 210, 0.28);
        border-radius: 5px;
        padding: 2px 5px;
      }
      .panel-footer-link .go {
        width: 12px; height: 12px; opacity: 0.6;
        color: var(--mineral);
      }
      .panel-footer-link:hover .go { opacity: 1; }

      /* Grid override: 4 equal-ish content columns when there is no plead/lead column. */
      .panel-inner.panel-inner-4 {
        grid-template-columns: 1fr 1fr 1fr 1.2fr;
      }
      /* Business Setup panel: Discover + Set Up (wide, 2 grid slots) + Connect */
      .panel-inner.panel-inner-bs {
        grid-template-columns: 1fr 1fr 1fr;
      }
      @media (max-width: 1160px) {
        .panel-inner.panel-inner-4,
        .panel-inner.panel-inner-bs {
          grid-template-columns: 1fr 1fr 1fr;
        }
        .panel-footer { padding: 14px 20px 20px; }
      }

/* ============================ REFERRAL ROLLOUT ============================ */
.referral-bar { position: relative; z-index: 90; background: var(--bg-2); border-bottom: 1px solid var(--line-soft); font-size: 13.5px; line-height: 1.4; color: var(--text); }
.referral-bar[hidden] { display: none; }
.referral-bar-inner { max-width: var(--wrap, 1280px); margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 18px; }
.referral-bar-msg { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); flex: 1 1 auto; min-width: 0; }
.referral-bar-msg b { color: var(--mineral); font-weight: 500; }
.referral-bar-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mineral); flex: none; box-shadow: 0 0 0 3px rgba(230, 224, 210, 0.14); }
.referral-bar-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; font-weight: 500; padding: 5px 0; border-bottom: 1px solid rgba(230, 224, 210, 0.28); transition: border-color var(--ease, 0.18s ease), color var(--ease, 0.18s ease); flex: none; }
.referral-bar-cta:hover { border-color: var(--mineral); }
.referral-bar-cta svg { width: 13px; height: 13px; }
.referral-bar-close { background: none; border: 0; color: var(--faint); cursor: pointer; padding: 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; transition: color var(--ease, 0.18s ease), background var(--ease, 0.18s ease); flex: none; }
.referral-bar-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.referral-bar-close svg { width: 14px; height: 14px; }
@media (max-width: 720px) {
  .referral-bar-inner { padding: 8px 16px; gap: 12px; font-size: 13px; }
  .referral-bar-msg { font-size: 12.5px; }
  .referral-bar-cta { font-size: 12.5px; }
}
@media (max-width: 520px) {
  .referral-bar-cta span { display: none; }
}
.foot-ref-card { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 4px 12px; margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(230, 224, 210, 0.03); color: var(--text); text-decoration: none; transition: border-color var(--ease, 0.18s ease), background var(--ease, 0.18s ease); width: 100%; min-width: 0; max-width: 28em; }
.foot-ref-card:hover { border-color: rgba(230, 224, 210, 0.28); background: rgba(230, 224, 210, 0.055); }
.foot-ref-card-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.foot-ref-card-eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.foot-ref-card-amt { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 12px; letter-spacing: 0.04em; color: var(--mineral); }
.foot-ref-card-body { grid-column: 1; display: flex; flex-direction: column; gap: 2px; }
.foot-ref-card-body b { font-size: 14.5px; font-weight: 500; color: var(--text); letter-spacing: -0.005em; }
.foot-ref-card-body span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.foot-ref-card-arrow { grid-column: 2; grid-row: 2; align-self: center; color: var(--faint); transition: color var(--ease, 0.18s ease), transform var(--ease, 0.18s ease); }
.foot-ref-card-arrow svg { width: 15px; height: 15px; display: block; }
.foot-ref-card:hover .foot-ref-card-arrow { color: var(--mineral); transform: translateX(2px); }
/* ============================ JOB DETAIL PAGE ============================ */

/* Apply form */


/* ============================ SHARED PAGE BLOCKS ============================ */

/* End-of-page CTA — mirrors Alethic pattern */

/* Mission & Vision — Syngen pattern */

/* CAREERS PAGE */


/* Roles list */

/* Editorial split (why/how sections) */

/* Hire steps */


/* BRAND PAGE */


/* Asset grid */


/* Color chips */

/* Type samples */



/* off-hours strip (rolled out) */
.offhours-strip { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: rgba(230,224,210,.025); }
.offhours-inner { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 14px 0; flex-wrap: wrap; }
.offhours-dot { width: 8px; height: 8px; border-radius: 50%; background: #d4a24c; box-shadow: 0 0 0 4px rgba(212,162,76,.15); flex-shrink: 0; }
.offhours-text { margin: 0; font-size: 14px; color: var(--text); }
.offhours-cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(230,224,210,.25); border-radius: 999px; background: transparent; color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer; transition: border-color var(--ease,.18s ease), color var(--ease,.18s ease); }
.offhours-cta:hover { border-color: var(--mineral); color: var(--mineral); }
.offhours-cta svg { width: 14px; height: 14px; }
@media (max-width: 640px) { .offhours-text { font-size: 13px; text-align: center; } }

.offhours-strip[data-status="open"] .offhours-dot { background: #6fce8e; box-shadow: 0 0 0 4px rgba(111,206,142,.15); }
.offhours-strip[data-status="closed"] .offhours-dot { background: #d4a24c; box-shadow: 0 0 0 4px rgba(212,162,76,.15); }
.desk-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.35; }
.vy-id .desk-status { align-items: flex-start; }
.vy-id .desk-status .desk-dot { margin-top: 5px; }
.vy-id .desk-text { align-items: flex-start; }
.rbar-rotator { position: relative; flex: 1 1 auto; min-width: 0; display: grid; }
.rbar-slide { grid-area: 1 / 1; display: flex; align-items: center; gap: 18px; min-width: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 420ms ease; }
.rbar-slide[data-active] { opacity: 1; visibility: visible; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .rbar-slide { transition: none; } }
/* ================= shared footer refinements ================= */
/* 1 · heading system: wrapped labels ("Business Setup", "Corporate Secretary")
      reserved less space than single-word ones, so they read heavier and pushed
      their link lists out of alignment. One reserved height for every heading. */
.fcol h4 { min-height: 40px; }
/* 2 · social cluster: loosen density, and let it breathe above and below */
.foot-social { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.foot-brand .foot-social { margin-top: 26px; }
/* 3 · referral card: roomier footprint and internal spacing */
.foot-ref-card { margin-top: 28px; padding: 18px 20px; gap: 8px 14px; }
.foot-ref-card-head { margin-bottom: 10px; }
/* BEGIN GENERATED footer-referral-card — tools/build-footer-referral-card.py — do not edit */
/* FooterReferralCard — SINGLE SOURCE (2026-09-07; restyled 2026-09-19, owner brief). tools/build-footer-referral-card.py
   writes this into every page's footer <style> directly after the page's own .foot-ref-card rules, so these win by
   source order. The card is one link with three lines: title · supporting line with the reward amount as its focal
   point · a separated "Become a referral partner →" line. Surface: --surface-card-footer (a lighter charcoal than the
   footer in dark; in light the footer's own ground — owner 2026-09-22: no white card at rest, the hover keeps its
   fill) with a restrained --line border; hover shifts surface and border only; focus
   is the site's --focus-ring. No glow, no scaling. Tokens only. */
.foot-ref-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 28px; padding: 20px 22px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-card-footer); color: var(--text); text-decoration: none; transition: background-color .18s ease, border-color .18s ease; }
.foot-ref-card:hover { background: var(--surface-2); border-color: var(--line-strong); }
.foot-ref-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.foot-ref-card-title { font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: -.005em; color: var(--text); }
.foot-ref-card-line { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.foot-ref-card-amount { font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--text); white-space: nowrap; }
.foot-ref-card-cta { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--text); }
.foot-ref-card-cta svg { flex: none; width: 14px; height: 14px; color: var(--faint); transition: color .18s ease, transform .18s ease; }
.foot-ref-card:hover .foot-ref-card-cta svg, .foot-ref-card:focus-visible .foot-ref-card-cta svg { color: var(--text); transform: translateX(2px); }
[dir="rtl"] .foot-ref-card-cta svg { transform: scaleX(-1); }
[dir="rtl"] .foot-ref-card:hover .foot-ref-card-cta svg, [dir="rtl"] .foot-ref-card:focus-visible .foot-ref-card-cta svg { transform: scaleX(-1) translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .foot-ref-card, .foot-ref-card-cta svg { transition: none; }
  .foot-ref-card:hover .foot-ref-card-cta svg, .foot-ref-card:focus-visible .foot-ref-card-cta svg { transform: none; }
  [dir="rtl"] .foot-ref-card:hover .foot-ref-card-cta svg, [dir="rtl"] .foot-ref-card:focus-visible .foot-ref-card-cta svg { transform: scaleX(-1); }
}
/* END GENERATED footer-referral-card */
/* 4 · widen the brand column so the card is not squeezed (desktop 7-cell grid only) */
@media (min-width: 1161px) {
  /* 6 tracks for 6 columns — the old 7-track grid left an empty trailing track,
     which shrank the brand column and made the footer stop short of the bar. */
  .foot-grid { grid-template-columns: 1.6fr repeat(6, 1fr) !important; }
}
/* ============ shared footer bottom bar + floating Vy clearance ============ */
.foot-bar-main { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-bar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-inline-end: 0; }
@media (min-width: 1101px) { .foot-bar-right { margin-inline-start: auto; } }
@media (max-width: 1100px) {
  .foot-bar-main { align-items: flex-start; }
  .foot-bar-right { width: 100%; justify-content: flex-start; margin-inline-start: 0; }
}
@media (max-width: 640px) {
  .foot-bar-main { flex-direction: column; align-items: flex-start; gap: 20px; }
  .foot-bar-right { gap: 10px; }
}
/* ---- Sonsoto Contact Center · footer clearance ----------------------------
   Desktop (>860px): the entry button stays visible over the footer and rises to clear
   the footer's bottom strip, so the Contact Center is reachable at the bottom of the
   page. It is never hidden and never loses pointer events.
   Mobile (<=860px): untouched — .chat-fab remains display:none there and the Contact
   Center is reached from the fixed mobile action bar. */
.chat-fab, .vy-panel {
  transition:
    bottom .22s cubic-bezier(.16, 1, .3, 1),
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease;
}
@media (min-width: 861px) {
  body.footer-in-view .chat-fab {
    bottom: calc(var(--contact-center-fab-bottom) + var(--contact-center-footer-clearance));
  }
  body.footer-in-view .vy-panel {
    bottom: calc(var(--contact-center-panel-bottom) + var(--contact-center-footer-clearance));
  }
}
/* ============ language selector (native names, no ISO codes in the UI) ============ */
.langsel { position: relative; }
.langsel-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 60; min-width: 180px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #141a1f); box-shadow: 0 18px 44px rgba(0,0,0,.55); }
.langsel-menu[hidden] { display: none; }
.langsel-menu li { margin: 0; }
.langsel-opt { display: block; width: 100%; text-align: start; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-family: inherit; font-size: 14.5px; cursor: pointer; transition: background var(--ease,.18s ease), color var(--ease,.18s ease); }
.langsel-opt:hover { background: rgba(230,224,210,.06); }
.langsel-opt[aria-selected="true"] { color: var(--mineral); }
.langsel-menu li[dir="rtl"] .langsel-opt, .langsel-opt[dir="rtl"] { text-align: end; }
@media (max-width: 1100px) { .langsel-menu { right: auto; left: 0; } }   /* the bar is left-aligned here: anchor the menu to the pill's left edge so it never leaves the viewport (2026-09-09) */
/* ============ footer bottom strip: three fixed zones ============ */
/* left = copyright · centre = app badges · right = language + theme. Nothing else. */
.foot-bar-main { display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap }
.foot-bar-center { display:flex;align-items:center;gap:12px;flex-wrap:wrap }
.foot-bar-right { display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-inline-end:0 }
.foot-bar-main > * { min-height:42px;display:flex;align-items:center }
.foot-bar .store, .foot-bar .pill, .foot-bar .themebox { height:42px }
@media (min-width:1101px){ .foot-bar-right { margin-inline-start:0 } }
@media (max-width:1100px){
  .foot-bar-main { align-items:flex-start }
  .foot-bar-center, .foot-bar-right { width:100%;justify-content:flex-start }
}
@media (max-width:640px){
  .foot-bar-main { flex-direction:column;align-items:flex-start;gap:20px }
  .foot-bar-center, .foot-bar-right { gap:10px }
}
      /* ---- Footer bottom strip -------------------------------------------------
         Two zones: copyright left, everything else (badges, language, theme) in one
         cluster flush right. .foot-bar is a flex child of .wrap, so without an explicit
         width it shrinks to its content and the divider stops short of the grid above. */
      .foot-bar { width: 100%; }
      @media (min-width: 1101px) {
        .foot-bar-main { justify-content: flex-start; }
        .foot-bar-center { margin-inline-start: auto; }
        .foot-bar-right { margin-inline-start: 0; }
      }
          /* ---- Mega-panel sizing ------------------------------------------------------
         Capped in width and denser than the old full-bleed panel. Company formation is
         anchored under its own trigger; Ongoing services sits further right, so anchoring
         it to its trigger would push it past the viewport — it hangs off the header's
         right edge instead. Ordered last so it wins over the base .panel geometry. */
      .navitem.has-panel > .panel {
        width: var(--panel-w, 820px);
        max-width: calc(100vw - 32px);
        border-radius: 14px;
        border: 1px solid var(--line);
        top: 66px;
      }
      /* Company formation — left edge locked to the trigger label */
      .navitem.has-panel:has(.panel-inner-bs) { position: relative; }
      .navitem.has-panel:has(.panel-inner-bs) > .panel { left: 0; right: auto; }
      /* Ongoing services — wide 4-column mega-panel, centered in the viewport */
      .navitem.has-panel:has(.panel-inner-4) { position: relative; }
      .navitem.has-panel:has(.panel-inner-4) > .panel {
        --panel-w: 1000px;
        /* Center in viewport via viewport-relative left + translate. Anchored trigger stays
           functional; we override position to escape the trigger's box for centering. */
        position: fixed;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: var(--nav-h, 66px);
        max-width: calc(100vw - 32px);
      }
      .navitem.has-panel:has(.panel-inner-4) > .panel .panel-inner-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 26px;
      }
      .navitem.has-panel:has(.panel-inner-4) > .panel .panel-inner .pcol { min-width: 0; }
      /* Narrower viewport: gracefully collapse to 3, then 2 columns */
      @media (max-width: 1080px) {
        .navitem.has-panel:has(.panel-inner-4) > .panel { --panel-w: 780px; }
        .navitem.has-panel:has(.panel-inner-4) > .panel .panel-inner-4 {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (max-width: 820px) {
        .navitem.has-panel:has(.panel-inner-4) > .panel { --panel-w: 600px; }
        .navitem.has-panel:has(.panel-inner-4) > .panel .panel-inner-4 {
          grid-template-columns: repeat(2, 1fr);
        }
      }


      .navitem.has-panel > .panel > .panel-inner {
        max-width: none;
        margin: 0;
        padding: 20px 22px 18px;
        gap: 26px;
      }
      /* denser lists in every mega column */
      .navitem.has-panel .pcol h5 { margin-bottom: 10px; }
      .navitem.has-panel .pcol ul { gap: 1px; }
      .navitem.has-panel .pcol li > a { padding: 6px 10px; font-size: 14px; }
      /* market switch strip: quiet, not a footer row */
      .navitem.has-panel .panel-footer { padding: 8px 22px 12px; gap: 10px; }
      .navitem.has-panel .panel-footer-link { font-size: 12.5px; }
      @media (max-width: 1160px) {
        .navitem.has-panel > .panel { --panel-w: 700px; }
        .navitem.has-panel:has(.panel-inner-4) > .panel { --panel-w: 900px; }
      }
          /* ---- Footer variants ---------------------------------------------------------
         UAE/Vietnam: brand · Company formation (2 sub-groups) · Ongoing services ·
         Company · Trust.   Global: brand · Markets · Company · Trust.
         The specified var(--space-6) / var(--text-xs) do not exist in this project;
         mapped to the real scale and to .fcol h4's own type. */
      @media (min-width: 1161px) {
        /* 5 items on market pages, 4 on global — sized so no label wraps */
        body[data-desk-market='uae'] .foot-grid,
        body[data-desk-market='vietnam'] .foot-grid {
          grid-template-columns: 1.45fr 1fr 1.12fr 0.82fr 0.86fr 1.12fr !important;
        }
        body[data-desk-market='global'] .foot-grid {
          grid-template-columns: 1.45fr 1fr 1.12fr 0.82fr 0.86fr 1.12fr !important;
        }
      }