/* =====================================================================
   Hexture — Hexmate module pages (Docs · Mail · Meet · Stock · Gate)
   Builds on home.css (tokens, header, buttons, CTA, footer).
   All new classes are prefixed mx- ; RTL via logical properties only.
   ===================================================================== */
body.mx{--acc:#F0870F;--acc-d:#C46E0C}
body.mx-docs{--acc:#F0870F;--acc-d:#C46E0C}
body.mx-mail{--acc:#C0663A;--acc-d:#9E5230}
body.mx-meet{--acc:#9B6B3C;--acc-d:#7E5630}
body.mx-stock{--acc:#E3A15A;--acc-d:#B97C38}
body.mx-gate{--acc:#7E5A46;--acc-d:#654737}
body.mx-docs{--acc-l:#F0870F}body.mx-mail{--acc-l:#E3875E}body.mx-meet{--acc-l:#CFA070}body.mx-stock{--acc-l:#E8AC68}body.mx-gate{--acc-l:#C9A38A}
/* on dark surfaces the accent is lifted for contrast */
.mx-hero,.mx-ai,.mx-app,.mx-cap.wide{--acc:var(--acc-l)}
/* accent tints. Static rgba first so Safari < 16.2 (no color-mix) still gets a tint —
   custom properties have no parse-time fallback, so the modern value goes behind @supports. */
body.mx,body.mx-docs{--acc-w:rgba(240,135,15,.12);--acc-w2:rgba(240,135,15,.26)}
body.mx-mail{--acc-w:rgba(192,102,58,.12);--acc-w2:rgba(192,102,58,.26)}
body.mx-meet{--acc-w:rgba(155,107,60,.12);--acc-w2:rgba(155,107,60,.26)}
body.mx-stock{--acc-w:rgba(227,161,90,.12);--acc-w2:rgba(227,161,90,.26)}
body.mx-gate{--acc-w:rgba(126,90,70,.12);--acc-w2:rgba(126,90,70,.26)}
@supports (color:color-mix(in srgb,red 50%,transparent)){
  body.mx{--acc-w:color-mix(in srgb,var(--acc) 12%,transparent);--acc-w2:color-mix(in srgb,var(--acc) 26%,transparent)}
}

/* ---------- HERO ---------- */
.mx-hero{position:relative;overflow:hidden;background:var(--ink);padding-block:150px 120px;min-height:min(92vh,880px);
  display:flex;align-items:center}
.mx-hero .hero-bg{position:absolute;inset:0}
.mx-hero-g{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;width:100%}
.mx-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--tlm);margin-bottom:22px}
.mx-crumb a{color:var(--tlm);transition:color .2s}
.mx-crumb a:hover{color:var(--or)}
.mx-crumb i{font-style:normal;opacity:.45}
.mx-crumb b{color:var(--tl);font-weight:600}
.mx-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 13px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--tl);font-size:13px;font-weight:600}
.mx-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px var(--acc-w2)}
.mx-badge em{font-style:normal;color:var(--tlm);font-weight:400}
.mx-hero h1{font:800 clamp(32px,4.3vw,56px)/1.28 var(--fs);color:var(--tl);letter-spacing:-.01em;margin-block:22px 20px}
.mx-hero h1 .k{color:var(--acc);display:block}
.mx-hero .lead{color:var(--tlm);max-width:560px}
.mx-hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.mx-in{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ez),transform .7s var(--ez)}
.mx-in.on{opacity:1;transform:none}

/* hero emblem */
.mx-emb{position:relative;height:460px;display:grid;place-items:center}
.mx-emb svg.rings{position:absolute;width:460px;height:460px;overflow:visible}
.mx-emb .rings path{fill:none;stroke-width:1.4}
.mx-emb .rings .r1{stroke:var(--acc);stroke-opacity:.5;stroke-dasharray:5 9;animation:mxSpin 60s linear infinite;transform-origin:230px 230px}
.mx-emb .rings .r2{stroke:rgba(255,255,255,.1);stroke-dasharray:2 10;animation:mxSpin 90s linear infinite reverse;transform-origin:230px 230px}
.mx-emb .rings .r3{stroke:var(--acc);stroke-opacity:.18}
@keyframes mxSpin{to{transform:rotate(360deg)}}
.mx-core{position:relative;width:196px;height:220px;filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
.mx-core svg{width:100%;height:100%;display:block}
.mx-core .ic{animation:mxBreath 4s ease-in-out infinite;transform-origin:98px 100px}
@keyframes mxBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.mx-glow{position:absolute;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 30%,transparent),transparent 65%);filter:blur(6px);animation:mxPulse 5s ease-in-out infinite}
@keyframes mxPulse{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}
.mx-chip{position:absolute;display:flex;align-items:center;gap:9px;white-space:nowrap;
  background:rgba(32,36,42,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 15px;color:var(--tl);font-size:13.5px;font-weight:600;
  box-shadow:0 18px 40px rgba(0,0,0,.35);opacity:0;transform:translateY(12px) scale(.96);
  transition:opacity .6s var(--ez),transform .6s var(--ez)}
.mx-chip.on{opacity:1;transform:none}
.mx-chip .ci{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--acc-w2);color:var(--acc);flex-shrink:0}
.mx-chip small{display:block;font-size:11.5px;color:var(--tlm);font-weight:400}
.mx-chip.ch1{top:22px;inset-inline-end:6px}
.mx-chip.ch2{top:86px;inset-inline-start:-18px}
.mx-chip.ch3{bottom:34px;inset-inline-end:34px}

/* ---------- rising page ---------- */
.mx-riser{position:relative;z-index:3;border-radius:44px 44px 0 0;margin-top:-44px;
  box-shadow:0 -30px 70px rgba(0,0,0,.22);background-color:var(--paper);
  background-image:
    radial-gradient(900px 700px at 10% 3%,rgba(240,135,15,.08),transparent 70%),
    radial-gradient(800px 640px at 92% 30%,rgba(155,107,60,.06),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16 56 48 28 64 0 48 0 16Z' fill='none' stroke='%23BFA98A' stroke-opacity='.24' stroke-width='1'/%3E%3Cpath d='M28 48 56 64 56 96 28 112 0 96 0 64Z' fill='none' stroke='%23BFA98A' stroke-opacity='.24' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat,repeat}
.mx-riser>.cta:last-of-type{border-radius:44px 44px 0 0}

/* module switcher */
.mx-sw{padding-top:34px}
.mx-sw-in{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.mx-sw-l{font-size:13px;color:var(--t3);margin-inline-end:6px}
.mx-sw a{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;background:var(--card);
  border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--t2);transition:.22s var(--ez)}
.mx-sw a i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.mx-sw a:hover{border-color:var(--c);color:var(--t1);transform:translateY(-2px)}
.mx-sw a.cur{background:var(--t1);border-color:var(--t1);color:#fff}

/* section heads */
.mx-h{max-width:720px}
.mx-h.ctr{margin-inline:auto;text-align:center}
.mx-h .eyebrow{color:var(--acc-d)}
.mx-h .rule{background:var(--acc)}
.mx-h .lead{margin-top:14px}

/* ---------- PROBLEM (before / after) ---------- */
/* grid children must be allowed to shrink below their min-content on narrow phones */
.mx-prob>*,.mx-ai-g>*,.mx-sim-w>*,.mx-int>*,.mx-faq-w>*,.mx-caps>*,.mx-cases>*{min-width:0}
.mx-prob{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.mx-prob .h2{margin-bottom:22px}
.mx-prob p.tx{font-size:17px;color:var(--t2);line-height:1.95;margin-bottom:16px}
.mx-prob p.tx:last-child{margin-bottom:0}
.mx-ba{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 22px 50px rgba(36,29,24,.08)}
.mx-ba-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.mx-ba-t{font-size:14px;font-weight:700;color:var(--t2)}
.mx-tog{position:relative;display:flex;background:var(--card-2);border-radius:999px;padding:4px;font-size:12.5px;font-weight:700}
.mx-tog button{position:relative;z-index:1;white-space:nowrap;padding:6px 14px;border-radius:999px;color:var(--t3);transition:color .3s}
.mx-tog button.on{color:#fff}
.mx-tog .kn{position:absolute;top:4px;bottom:4px;border-radius:999px;background:#B5564A;transition:all .45s var(--ez)}
.mx-ba.after .mx-tog .kn{background:var(--acc)}
.mx-ba-list{display:grid;gap:10px}
.mx-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:13px;border:1px solid var(--line-2);background:#FFFDF9;
  transition:background .4s,border-color .4s}
.mx-row .ri{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:#F6E9E6;color:#B5564A;transition:.4s}
.mx-row .rt{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--t1)}
.mx-row .rt small{display:block;font-size:12px;font-weight:400;color:var(--t3);margin-top:1px}
.mx-row .rs{font-size:11.5px;font-weight:700;padding:4px 10px 4px 8px;border-radius:999px;background:#F6E9E6;color:#B5564A;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;transition:.4s}
.mx-row .rs .mk{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#B5564A;color:#fff;flex-shrink:0}
.mx-ba.after .mx-row .rs .mk{background:var(--acc);color:#fff}
.mx-ba .b-b{background:#FDF6F3;border-color:#EFDCD5}
.mx-row .rtt{font-weight:inherit;font-size:inherit;color:inherit}
.mx-ba .b-b .rtt{text-decoration:line-through;text-decoration-color:rgba(181,86,74,.5);
  text-decoration-thickness:1.5px;text-underline-offset:2px}
.mx-ba .b-b .rt small{display:block}
.mx-ba .b-a{background:#FBFAF6;border-color:var(--acc-w2)}
.mx-row .mono{font-family:var(--fm);direction:ltr;unicode-bidi:isolate}
.mx-ba .b-a{display:none}
.mx-ba.after .b-b{display:none}
.mx-ba.after .b-a{display:flex}
.mx-ba.after .mx-row{border-color:var(--acc-w2)}
.mx-ba.after .mx-row .ri{background:var(--acc-w);color:var(--acc-d)}
.mx-ba.after .mx-row .rs{background:var(--acc-w);color:var(--acc-d)}
.mx-row.pop{animation:mxPop .5s var(--ez) both}
@keyframes mxPop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mx-ba-f{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:13px;color:var(--t3);display:flex;align-items:center;gap:8px}
.mx-ba-f b{color:#B5564A;transition:color .4s}
.mx-ba .mx-ba-f b.b-a,.mx-ba.after .mx-ba-f b.b-b{display:none}
.mx-ba.after .mx-ba-f b.b-a{display:inline}
.mx-ba.after .mx-ba-f b{color:var(--acc-d)}

/* ---------- CAPABILITIES ---------- */
.mx-caps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.mx-cap{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 22px;
  transition:transform .28s var(--ez),border-color .28s,box-shadow .28s}
.mx-cap::before{content:'';position:absolute;inset-inline:0;top:0;height:3px;background:var(--acc);transform:scaleX(0);
  transform-origin:right;transition:transform .35s var(--ez)}
.mx-cap:hover{transform:translateY(-6px);border-color:var(--acc-w2);box-shadow:0 20px 46px rgba(36,29,24,.11)}
.mx-cap:hover::before{transform:scaleX(1)}
.mx-cap .ci{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--acc-w);color:var(--acc-d);
  margin-bottom:18px;transition:background .28s,color .28s}
.mx-cap:hover .ci{background:var(--acc);color:#fff}
.mx-cap h3{font-size:17.5px;margin-bottom:8px}
.mx-cap p{font-size:14.5px;color:var(--t2);line-height:1.8}
.mx-cap.wide{grid-column:span 2;background:linear-gradient(150deg,#1C2026,#15181D);border-color:rgba(255,255,255,.06);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:230px}
.mx-cap.wide::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 260px at 88% 10%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%)}
.mx-cap.wide h3{color:var(--tl);font-size:21px}
.mx-cap.wide p{color:#BDB3A8;max-width:460px;font-size:15.5px}
.mx-cap.wide .ci{background:var(--acc);color:#fff}
.mx-cap.wide .tagk{position:absolute;top:22px;inset-inline-end:22px;font-size:12px;font-weight:700;color:var(--acc);
  background:color-mix(in srgb,var(--acc) 16%,transparent);padding:5px 12px;border-radius:999px}

/* ---------- AI ---------- */
.mx-ai{position:relative;overflow:hidden;border-radius:32px;padding:60px 56px;
  background:linear-gradient(160deg,#1C2026 0%,#14171C 60%,#1A1E24 100%);box-shadow:0 30px 70px rgba(20,23,28,.2)}
.mx-ai::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 400px at 90% 0%,color-mix(in srgb,var(--acc) 18%,transparent),transparent 70%),
             radial-gradient(600px 400px at 0% 100%,rgba(120,150,190,.08),transparent 70%)}
.mx-ai>*{position:relative}
.mx-ai .eyebrow{color:var(--acc)}
.mx-ai .h2{color:var(--tl)}
.mx-ai-g{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.mx-aic{position:relative;border-radius:20px;padding:26px 24px 30px;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);cursor:default;transition:background .4s,border-color .4s,transform .4s var(--ez)}
.mx-aic .spark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(255,255,255,.06);color:var(--tlm);transition:.4s}
.mx-aic h3{font-size:18px;color:var(--tl);margin-bottom:9px}
.mx-aic p{font-size:14.5px;color:#A99E92;line-height:1.85}
.mx-aic .pb{position:absolute;inset-inline:24px;bottom:14px;height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.mx-aic .pb i{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:var(--acc)}
.mx-aic.on{background:rgba(255,255,255,.07);border-color:color-mix(in srgb,var(--acc) 45%,transparent);transform:translateY(-4px)}
.mx-aic.on .spark{background:var(--acc);color:#fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 18%,transparent)}
.mx-aic.on p{color:#CFC6BB}

/* ---------- LIVE UI SIM ---------- */
.mx-sim-w{display:grid;grid-template-columns:34fr 66fr;gap:52px;align-items:center}
.mx-sim-note{font-size:16px;color:var(--t2);line-height:1.9;margin-top:16px}
.mx-sim-pts{margin-top:22px;display:grid;gap:12px}
.mx-sim-pts li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--t1);font-weight:600}
.mx-sim-pts li svg{flex-shrink:0;margin-top:5px;color:var(--acc)}
.mx-app{background:#20242A;border:1px solid rgba(255,255,255,.1);border-radius:24px;overflow:hidden;
  box-shadow:0 36px 80px rgba(16,19,23,.3),0 0 0 8px rgba(255,255,255,.35)}
.mx-app-bar{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.mx-app-bar .dt{display:flex;gap:6px}
.mx-app-bar .dt i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.mx-app-bar .ttl{font-size:13px;font-weight:600;color:var(--tl);display:flex;align-items:center;gap:8px}
.mx-app-bar .ttl i{width:8px;height:8px;border-radius:50%;background:var(--acc)}
.mx-app-bar .live{margin-inline-start:auto;font-size:11.5px;color:#7BC59A;display:flex;align-items:center;gap:6px}
.mx-app-bar .live i{width:7px;height:7px;border-radius:50%;background:#7BC59A;animation:mxBlink 1.6s infinite}
@keyframes mxBlink{50%{opacity:.25}}
.mx-app-b{display:grid;grid-template-columns:56px 1fr;min-height:400px}
.mx-app-side{border-inline-end:1px solid rgba(255,255,255,.07);padding:16px 0;display:flex;flex-direction:column;align-items:center;gap:14px}
.mx-app-side i{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.06)}
.mx-app-side i.on{background:var(--acc)}
.mx-app-m{padding:22px;position:relative}
.mx-cap-t{font-size:12.5px;color:var(--t3);margin-top:14px;text-align:center}
/* shared sim atoms */
.sx-h{font-size:12px;font-weight:700;color:var(--tlm);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.sx-in{display:flex;align-items:center;gap:10px;background:#171B20;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:13px 15px;
  color:var(--tl);font-size:14px;transition:border-color .3s}
.sx-in.on{border-color:color-mix(in srgb,var(--acc) 60%,transparent)}
.sx-in svg{color:var(--tlm);flex-shrink:0}
.sx-in .ph{color:#7D746B}
.sx-in .cur{display:inline-block;width:1.5px;height:17px;background:var(--acc);margin-inline-start:1px;vertical-align:middle;animation:mxBlink 1s infinite}
.sx-card{background:#171B20;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 16px;
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--ez),transform .5s var(--ez),border-color .4s}
.sx-card.on{opacity:1;transform:none}
.sx-card .t{font-size:14px;color:var(--tl);font-weight:600}
.sx-card .s{font-size:12.5px;color:#9A9086;margin-top:3px;line-height:1.7}
.sx-card mark{background:color-mix(in srgb,var(--acc) 28%,transparent);color:#fff;border-radius:4px;padding:0 3px}
.sx-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc);white-space:nowrap}
.sx-tag.g{background:rgba(123,197,154,.14);color:#7BC59A}
.sx-tag.r{background:rgba(214,110,94,.15);color:#E08A7A}
.sx-grid{display:grid;gap:10px}
.sx-row{display:flex;align-items:center;gap:12px}
.sx-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:rgba(255,255,255,.06);color:var(--tlm)}
.sx-mono{font-family:var(--fm);direction:ltr;unicode-bidi:isolate}

/* docs sim */
.sd-res .sx-card{display:flex;align-items:center;gap:12px}
.sd-res .sx-card .b{flex:1;min-width:0}
.sd-res .sx-card .t{unicode-bidi:plaintext;font-size:13.5px}
.sd-res .sx-card.hit{border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
/* mail sim */
.sm-route{position:relative;display:flex;justify-content:space-between;margin:6px 6px 26px;padding-top:4px}
.sm-route::before{content:'';position:absolute;inset-inline:35px;top:22px;height:2px;background:rgba(255,255,255,.1)}
.sm-route .fill{position:absolute;inset-inline-start:35px;top:22px;height:2px;background:var(--acc);width:0;transition:width .8s var(--ez)}
.sm-st{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;width:70px}
.sm-st b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#171B20;border:2px solid rgba(255,255,255,.14);
  color:var(--tlm);transition:.4s}
.sm-st span{font-size:12px;color:#8C8378;transition:color .4s;white-space:nowrap}
.sm-st.on b{background:var(--acc);border-color:var(--acc);color:#fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 20%,transparent)}
.sm-st.on span{color:var(--tl)}
.sm-feed .sx-card{display:flex;align-items:center;gap:12px}
.sm-feed .sx-card .b{flex:1}
/* meet sim */
.sv-q{font-size:17px;color:var(--tl);font-weight:700;margin-bottom:4px}
.sv-bar{margin-top:16px}
.sv-bar .l{display:flex;justify-content:space-between;font-size:13.5px;color:var(--tl);margin-bottom:8px}
.sv-bar .l b{font-family:var(--fm)}
.sv-bar .tr{height:12px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}
.sv-bar .tr i{display:block;height:100%;width:0;border-radius:6px;background:var(--acc);transition:width 1.6s var(--ez)}
.sv-bar.no .tr i{background:#8C6A5A}
.sv-mem{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.sv-mem span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);
  color:#8C8378;font-size:12px;font-weight:700;border:1.5px solid rgba(255,255,255,.1);transition:.35s}
.sv-mem span.y{background:color-mix(in srgb,var(--acc) 30%,transparent);border-color:var(--acc);color:#fff}
.sv-mem span.n{background:rgba(140,106,90,.3);border-color:#8C6A5A;color:#fff}
.sv-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;flex-wrap:wrap}
.sv-stamp{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;border:1.5px dashed var(--acc);color:var(--acc);
  font-size:12.5px;font-weight:700;opacity:0;transform:scale(1.3) rotate(-4deg);transition:opacity .4s,transform .5s cubic-bezier(.2,1.6,.4,1)}
.sv-stamp.on{opacity:1;transform:rotate(-4deg)}
/* stock sim */
.ss-row{display:grid;grid-template-columns:1fr 110px auto;align-items:center;gap:14px;padding:13px 15px;border-radius:13px;background:#171B20;
  border:1px solid rgba(255,255,255,.07);transition:border-color .4s}
.ss-row .n{font-size:14px;color:var(--tl);font-weight:600}
.ss-row .q{font-size:12.5px;color:#9A9086;margin-top:2px}
.ss-row .q b{font-family:var(--fm);color:var(--tl)}
.ss-meter{height:8px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.ss-meter i{display:block;height:100%;border-radius:4px;background:#7BC59A;transition:width 1.4s var(--ez),background .4s}
.ss-row.low{border-color:rgba(224,138,122,.45)}
.ss-row.low .ss-meter i{background:#E08A7A}
.ss-alert{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px 15px;border-radius:13px;
  background:color-mix(in srgb,var(--acc) 12%,transparent);border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);
  color:var(--tl);font-size:13.5px;opacity:0;transform:translateY(8px);transition:.5s var(--ez)}
.ss-alert.on{opacity:1;transform:none}
.ss-alert svg{color:var(--acc);flex-shrink:0}
.ss-truck{position:relative;margin-top:16px;height:52px;border-radius:13px;background:#171B20;border:1px solid rgba(255,255,255,.07);overflow:hidden}
.ss-truck .road{position:absolute;inset-inline:16px;top:50%;border-top:2px dashed rgba(255,255,255,.12)}
.ss-truck .tk{position:absolute;top:50%;inset-inline-end:14px;transform:translate(0,-50%);color:var(--acc);transition:inset-inline-end 3.2s var(--ez)}
.ss-truck .lb{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);font-size:12.5px;color:var(--tl);background:#171B20;padding-inline-end:10px}
.ss-truck .lb small{color:#9A9086}
/* gate sim */
.sg2{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start}
.sg2-id{position:relative;border-radius:14px;padding:16px;aspect-ratio:1.58/1;
  background:linear-gradient(135deg,#EDE3D4,#D9CBB6);overflow:hidden}
.sg2-id .ph{position:absolute;inset-inline-start:14px;top:16px;width:46px;height:56px;border-radius:7px;background:#B7A68F}
.sg2-id i{position:absolute;inset-inline-end:14px;height:6px;border-radius:3px;background:#A8987F}
.sg2-id .scan{position:absolute;inset-inline:0;height:3px;top:0;background:var(--acc);box-shadow:0 0 20px 5px color-mix(in srgb,var(--acc) 60%,transparent);opacity:0}
.sg2-f{display:grid;gap:9px}
.sg2-f .fr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:11px;background:#171B20;
  border:1px solid rgba(255,255,255,.07);font-size:13px;opacity:.35;transition:opacity .4s,border-color .4s}
.sg2-f .fr.on{opacity:1;border-color:rgba(255,255,255,.12)}
.sg2-f .k{color:#8C8378}
.sg2-f .v{color:var(--tl);font-weight:600}
.sg2-ok{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:13px 16px;border-radius:13px;
  background:rgba(123,197,154,.1);border:1px solid rgba(123,197,154,.35);color:#9ED8B4;font-size:13.5px;font-weight:700;
  opacity:0;transform:translateY(8px);transition:.5s var(--ez)}
.sg2-ok.on{opacity:1;transform:none}
.sg2-ok .sx-mono{color:var(--tl);font-weight:400}

/* ---------- KEY NUMBER / STATEMENT ---------- */
.mx-num{position:relative;text-align:center;padding:74px 28px;border-radius:32px;background:var(--card);border:1px solid var(--line);
  overflow:hidden;box-shadow:0 22px 50px rgba(36,29,24,.06)}
.mx-num::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 260px at 50% 0%,var(--acc-w),transparent 70%)}
.mx-num>*{position:relative}
.mx-num .big{font:700 clamp(64px,11vw,140px)/1 var(--fs);color:var(--acc);letter-spacing:-.03em;display:inline-flex;align-items:baseline;gap:14px}
.mx-num .big small{font-size:.32em;color:var(--t1);letter-spacing:0}
.mx-num .d{font-size:clamp(18px,2.2vw,24px);font-weight:700;margin-top:18px;max-width:640px;margin-inline:auto;line-height:1.6}
.mx-num .src{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:13.5px;color:var(--t3);
  padding:7px 15px;border-radius:999px;background:var(--paper);border:1px solid var(--line-2)}
.mx-num .mx-vs{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:26px;font-size:14px;color:var(--t2)}
.mx-num .mx-vs span{padding:6px 14px;border-radius:10px;background:#F6E9E6;color:#B5564A;text-decoration:line-through;text-decoration-thickness:1.5px}
.mx-num .mx-vs b{padding:6px 14px;border-radius:10px;background:var(--acc-w);color:var(--acc-d)}
.mx-stmt{font:700 clamp(26px,3.6vw,42px)/1.5 var(--fs);max-width:860px;margin-inline:auto}
.mx-stmt em{font-style:normal;color:var(--acc)}

/* ---------- INTEGRATION ---------- */
.mx-int{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.mx-int .tx{font-size:17px;color:var(--t2);line-height:2;margin-top:18px}
.mx-int .tx a{color:var(--t1);font-weight:700;white-space:nowrap;border-bottom:2px solid var(--acc-w2);transition:border-color .2s}
.mx-int .tx a:hover{border-color:var(--acc)}
.mx-hub{position:relative;aspect-ratio:1/1;max-width:500px;margin-inline:auto;width:100%}
.mx-hub svg{width:100%;height:100%;display:block;overflow:visible}
.mx-hub .ln{stroke:rgba(36,29,24,.12);stroke-width:2;fill:none;stroke-dasharray:4 6}
.mx-hub .ln.on{stroke:var(--acc);stroke-opacity:.55;stroke-dasharray:none}
.mx-hub .pl{fill:var(--acc)}
.mx-hub .nd rect{fill:#FFFDF9;stroke:var(--line);stroke-width:1.5}
.mx-hub .nd.on rect{stroke:var(--c);stroke-width:2}
.mx-hub .nd text{font:700 14px var(--fs);fill:var(--t1)}
.mx-hub .nd .en{font:600 11.5px var(--fs);fill:var(--t3)}
.mx-hub .nd.off{opacity:.45}
.mx-hub .db text{font:600 12px var(--fs);fill:var(--t2)}

/* ---------- CASES ---------- */
.mx-cases{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
.mx-cases.one{grid-template-columns:1fr;max-width:820px;margin-inline:auto}
.mx-case{position:relative;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:30px 30px 28px;
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;transition:transform .28s var(--ez),box-shadow .28s,border-color .28s}
.mx-case:hover{transform:translateY(-5px);border-color:var(--acc-w2);box-shadow:0 22px 48px rgba(36,29,24,.1)}
.mx-case .lw{width:86px;height:86px;border-radius:18px;background:#fff;border:1px solid var(--line-2);display:grid;place-items:center;padding:10px}
.mx-case .lw img{max-width:100%;max-height:100%;object-fit:contain}
.mx-case .yr{display:inline-block;font-size:12px;font-weight:700;color:var(--acc-d);background:var(--acc-w);padding:3px 11px;border-radius:999px;margin-bottom:9px}
.mx-case h3{font-size:18.5px;margin-bottom:8px;line-height:1.5}
.mx-case p{font-size:15px;color:var(--t2);line-height:1.9}
.mx-case .q{position:absolute;top:22px;inset-inline-end:26px;color:var(--acc);opacity:.18}

/* ---------- FAQ ---------- */
.mx-faq-w{display:grid;grid-template-columns:34fr 66fr;gap:56px;align-items:start}
.mx-faq-w .sticky{top:120px}
.mx-faq-help{margin-top:26px;padding:20px 22px;border-radius:18px;background:var(--card);border:1px solid var(--line);font-size:14.5px;color:var(--t2)}
.mx-faq-help b{display:block;color:var(--t1);margin-bottom:4px}
.mx-faq-help a{color:var(--acc-d);font-weight:700}
.mx-faq{display:grid;gap:12px}
.mx-q{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.mx-q[open]{border-color:var(--acc-w2);box-shadow:0 16px 40px rgba(36,29,24,.07)}
.mx-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;font-size:16.5px;font-weight:700;line-height:1.6}
.mx-q summary::-webkit-details-marker{display:none}
.mx-q summary .pm{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--paper);
  color:var(--t2);transition:transform .35s var(--ez),background .3s,color .3s}
.mx-q[open] summary .pm{transform:rotate(45deg);background:var(--acc);color:#fff}
.mx-q .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ez)}
.mx-q .a>div{overflow:hidden}
.mx-q .a p{padding:0 24px 22px;font-size:15.5px;color:var(--t2);line-height:1.95}
.mx-q.op .a{grid-template-rows:1fr}

/* ---------- misc ---------- */
.mx-sec{padding-block:100px}
.mx-sec.tight{padding-block:40px 100px}
.mx-alt{background:linear-gradient(180deg,rgba(234,224,209,.85),rgba(237,229,216,.45))}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .mx-hero-g{grid-template-columns:1fr;gap:10px}
  .mx-emb{height:380px;transform:scale(.86)}
  .mx-caps{grid-template-columns:repeat(2,1fr)}
  .mx-sim-w,.mx-int,.mx-faq-w{grid-template-columns:1fr;gap:40px}
  .mx-faq-w .sticky{position:static}
}
@media(max-width:900px){
  .mx-hero{padding-block:128px 90px;min-height:0}
  .mx-prob{grid-template-columns:1fr;gap:36px}
  .mx-ai{padding:40px 24px;border-radius:26px}
  .mx-ai-g{grid-template-columns:1fr}
  .mx-cases{grid-template-columns:1fr}
  .mx-riser{border-radius:30px 30px 0 0;margin-top:-30px}
  .mx-riser>.cta:last-of-type{border-radius:30px 30px 0 0}
  .mx-sec{padding-block:70px}
}
@media(max-width:600px){
  .mx-caps{grid-template-columns:1fr}
  .mx-cap.wide{grid-column:auto}
  .mx-emb{display:none}
  .mx-app-b{grid-template-columns:1fr}
  .mx-app-side{display:none}
  .mx-app-m{padding:16px}
  .sg2{grid-template-columns:1fr}
  .sg2-id{max-width:240px}
  .ss-row{grid-template-columns:1fr 80px;}
  .ss-row .sx-tag{grid-column:1/-1;justify-self:start}
  .mx-case{grid-template-columns:1fr;padding:24px}
  .mx-num{padding:54px 20px}
  .mx-num .mx-vs{flex-direction:column;gap:8px}
  .mx-sw-l{width:100%;text-align:center;margin:0 0 4px}
  .mx-crumb a,.mx-crumb b{display:inline-block;padding-block:7px}
  .mx-faq-help a{display:inline-block;padding-block:8px}
  .mx-faq-help{line-height:2.1}
  .mx-crumb{margin-bottom:14px}
  .mx-ba{padding:16px;border-radius:20px}
  .mx-row{display:grid;grid-template-columns:32px 1fr;align-items:start;gap:10px;padding:12px}
  .mx-row .ri{margin-top:1px}
  .mx-row .rt{overflow-wrap:anywhere}
  .mx-row .rs{grid-column:2;justify-self:start;white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  .mx-in{opacity:1!important;transform:none!important}
  .mx-chip{opacity:1!important;transform:none!important}
  .mx-emb .rings path,.mx-core .ic,.mx-glow{animation:none!important}
}