/* reveal on scroll (only when the script runs) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js .rv.seen{opacity:1;transform:none}
/* hero */
.h-hero{position:relative;padding:72px 0 56px;overflow:hidden;background:linear-gradient(180deg,#f7f9fc,#fff 75%);border-bottom:1px solid var(--line)}
.h-grid-bg{position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,#d5ddea 1px,transparent 0);background-size:26px 26px;mask-image:radial-gradient(70% 60% at 70% 40%,#000,transparent 75%);-webkit-mask-image:radial-gradient(70% 60% at 70% 40%,#000,transparent 75%);opacity:.7}
.h-hgrid{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.h-copy h1{font-size:clamp(38px,4.9vw,62px)}
.h-rot{font-size:clamp(20px,2.4vw,28px);font-weight:700;letter-spacing:-.02em;margin:-6px 0 18px;color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.h-rot-box{display:inline-flex;overflow:hidden;height:1.5em;align-items:center}
.h-rot-item{display:inline-flex;align-items:center;gap:10px;color:var(--text);transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s}
.h-rot-item img{width:34px;height:24px;border-radius:5px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.h-rot-item.out{transform:translateY(-110%);opacity:0}.h-rot-item.pre{transform:translateY(110%);opacity:0;transition:none}
.h-globe-col{display:grid;gap:16px;justify-items:center}
.h-globe{position:relative;width:min(100%,560px);aspect-ratio:1;touch-action:pan-y;cursor:grab}.h-globe:active{cursor:grabbing}
.h-globe canvas{width:100%;height:100%;display:block}
.h-card{position:absolute;inset-inline-start:50%;bottom:6%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:10px 10px 10px 14px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh2);min-width:290px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
[dir=rtl] .h-card{transform:translateX(50%)}
.h-card.pop{animation:hpop .5s cubic-bezier(.2,.7,.2,1)}@keyframes hpop{0%{transform:translateX(-50%) scale(.94);opacity:.4}100%{transform:translateX(-50%) scale(1);opacity:1}}
[dir=rtl] .h-card.pop{animation:none}
.h-card>div{min-width:0;flex:1}.h-card img{width:34px;height:24px;border-radius:5px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.08)}.h-card b{display:block;font-size:15.5px}.h-card span{display:block;color:var(--muted);font-size:13px;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.h-card .btn{margin-inline-start:auto;white-space:nowrap}
.h-drag{position:absolute;top:4%;inset-inline-end:2%;font-size:12px;color:var(--dim);background:rgba(255,255,255,.8);padding:4px 10px;border-radius:999px;border:1px solid var(--line)}
.h-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:560px}
.h-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:#fff;font:inherit;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.h-chip:hover{transform:translateY(-1px);border-color:var(--brand)}.h-chip[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff}
.h-all{color:var(--brand);border-color:var(--brand)}.h-all svg{width:15px;height:15px}
.h-chip img{width:22px;height:16px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.h-shine{position:relative;overflow:hidden}.h-shine::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:hshine 3.6s ease-in-out infinite}
@keyframes hshine{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
@media(max-width:980px){.h-hgrid{grid-template-columns:1fr}.h-card{min-width:0;width:94%;bottom:2%}.h-card span{max-width:none}.h-drag{display:none}}
@media(max-width:420px){.h-card .btn{padding:0 12px;font-size:13px}}
/* stats */
.h-stats{margin-top:-28px;position:relative;z-index:2;grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){.h-stats{grid-template-columns:1fr 1fr}.h-stats div{border:0!important;border-bottom:1px solid var(--line)!important}.h-stats div:nth-child(odd):not(:last-child){border-inline-end:1px solid var(--line)!important}.h-stats div:last-child{grid-column:span 2;border-bottom:0!important}}
/* tilt */
.h-tilt{transform-style:preserve-3d;will-change:transform;transition:transform .25s ease,box-shadow .25s,border-color .2s}
.js .h-tilt.rv.seen{transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .25s ease,box-shadow .25s,border-color .2s}
/* 3D section */
.h-3d{background:linear-gradient(180deg,#fff,#f4f7fc);border-block:1px solid var(--line);overflow:hidden}
.h-3d-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.h-list{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:12px}.h-list li{display:flex;gap:10px;font-size:16px}.h-list svg{width:20px;height:20px;color:var(--ok);flex:none;margin-top:3px}
.h-stage{perspective:1200px;display:grid;place-items:center;min-height:620px}
.h-scene{position:relative;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(10deg);transition:transform .1s linear}
.h-phone{transform:translateZ(0)}
.h-float{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px -16px rgba(16,24,40,.28);font-size:14px;white-space:nowrap;transform:translateZ(var(--z))}
.h-float svg{width:18px;height:18px;color:var(--brand)}.h-float b{color:var(--brand)}
.h-f1{top:80px;inset-inline-start:-120px}.h-f2{top:250px;inset-inline-end:-150px}.h-f3{bottom:-18px;inset-inline-start:-70px}
@media(max-width:980px){.h-3d-grid{grid-template-columns:1fr}.h-stage{min-height:600px}.h-f1{inset-inline-start:-30px}.h-f2{inset-inline-end:-30px}.h-f3{inset-inline-start:-20px}}
@media(max-width:520px){.h-float{font-size:12.5px;padding:9px 12px}.h-f1{inset-inline-start:-6px}.h-f2{inset-inline-end:-6px}.h-f3{inset-inline-start:-4px}}
/* cities */
.h-cities{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.h-city{display:flex;align-items:center;gap:12px;padding:16px;border-radius:14px;border:1px solid var(--line);background:#fff;box-shadow:var(--sh)}
.h-city img{width:34px;height:24px;border-radius:5px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.08)}.h-city b{display:block}.h-city span{display:block;color:var(--muted);font-size:13.5px}
.h-city em{margin-inline-start:auto;font-style:normal;font-weight:700;color:var(--brand);background:var(--soft);border-radius:999px;padding:2px 10px;font-size:13px}
@media(max-width:1000px){.h-cities{grid-template-columns:1fr 1fr}}@media(max-width:560px){.h-cities{grid-template-columns:1fr}}
/* final */
.h-final{position:relative;overflow:hidden;isolation:isolate;background:#0b0c10;border-color:#0b0c10;color:#fff;padding-block:96px}.h-final>*{position:relative}
.h-final::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,8,11,.35),rgba(7,8,11,.78))}
.h-final-img{position:absolute!important;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.h-final h2{color:#fff}.h-final p{color:rgba(255,255,255,.82)}.h-final .btn.ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.4)}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}.h-shine::after{animation:none}.h-scene{transform:none}}

/* ---------- shared: refined headings for the added sections (white site, black ink, one blue accent) ---------- */
.hx-uses .head h2,.hx-why h2,.cx .head h2,.hx-risk h2{font-size:clamp(34px,4.4vw,54px);line-height:1.04;letter-spacing:-.045em;font-weight:780}
.hx-uses .head p,.cx .head p{font-size:18px}
.hx-uses .kicker,.hx-why .kicker,.cx .kicker{display:inline-flex;align-items:center;gap:8px;color:#0b0c10;letter-spacing:.16em}
.hx-uses .kicker::before,.hx-why .kicker::before,.cx .kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}
/* ---------- devices: one segmented bar ---------- */
.hx-dev{padding:56px 0 0}.hx-dev-t{text-align:center;color:var(--dim);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 16px}
.hx-dev-row{display:flex;max-width:860px;margin:0 auto;padding:6px;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04),0 24px 48px -32px rgba(16,24,40,.35)}
.hx-dev-i{flex:1;display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:999px;transition:background .2s,transform .2s;min-width:0}
.hx-dev-i:hover{background:#0b0c10;color:#fff}.hx-dev-i:hover small{color:#9ca3af}.hx-dev-i:hover svg{color:#fff}
.hx-dev-i svg{width:26px;height:26px;color:#0b0c10;flex:none}.hx-dev-i b{display:block;font-size:15px;line-height:1.2;white-space:nowrap}
.hx-dev-i small{display:block;font-size:12px;color:var(--ok);font-weight:650;white-space:nowrap}.hx-dev-i.soon small,.hx-dev-i.soon svg{color:var(--dim)}
.hx-dev-i>span{min-width:0}
@media(max-width:760px){.hx-dev-row{display:grid;grid-template-columns:1fr 1fr;border-radius:24px;gap:4px}.hx-dev-i{border-radius:18px}}
/* ---------- use cases: real photos with a piece of the app on each ---------- */
.hx-uses{padding-top:96px}
.hx-pc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.hx-pc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:520px;border-radius:30px;overflow:hidden;background:#0b0c10;color:#fff;isolation:isolate}
.hx-pc.a,.hx-pc.d{grid-column:span 7}.hx-pc.b,.hx-pc.c{grid-column:span 5}
.hx-pc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.01);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.hx-pc:hover .hx-pc-img{transform:scale(1.06)}
.hx-pc.c .hx-pc-img{object-position:70% 30%}
.hx-pc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,8,11,0) 30%,rgba(7,8,11,.55) 62%,rgba(7,8,11,.9))}
.hx-pc-ui{position:absolute;top:26px;inset-inline-start:26px;inset-inline-end:26px;display:flex}
.hx-pc-body{padding:30px;max-width:560px}
.hx-pc-ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#fff;color:#0b0c10;margin-bottom:16px}
.hx-pc-ic svg{width:21px;height:21px}
.hx-pc h3{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.035em;line-height:1.1;margin:0 0 10px;color:#fff}
.hx-pc p{margin:0;color:rgba(255,255,255,.78);font-size:15.5px;line-height:1.55}
.hx-credit{margin:14px 0 0;text-align:end;font-size:12px;color:var(--dim)}
/* the floating app pieces */
.hx-ui-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(290px,100%)}.hx-ui-stats span{white-space:nowrap}.hx-ui-stats div{border-radius:18px;padding:14px 16px;background:rgba(11,12,16,.55);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hx-ui-stats b{display:block;font-size:32px;letter-spacing:-.04em;line-height:1.1;color:#fff}.hx-ui-stats span{font-size:12.5px;color:#cbd0d8}
.hx-ui-wifi{display:grid;gap:8px;justify-items:start}.hx-ui-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:#fff;color:#0b0c10;border:1px solid rgba(255,255,255,.6);font-size:14px;font-weight:650;box-shadow:0 18px 34px -18px rgba(0,0,0,.55)}
.hx-ui-chip svg{width:17px;height:17px;color:var(--dim)}.hx-ui-chip.ok{color:#fff;border-color:#0b0c10;background:#0b0c10}.hx-ui-chip.ok svg{color:#4ade80}
.hx-ui-line{width:2px;height:22px;margin-inline-start:24px;background:repeating-linear-gradient(rgba(255,255,255,.85) 0 4px,transparent 4px 8px)}
.hx-ui-travel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:min(400px,100%)}.hx-ui-travel>div{flex:1;min-width:120px;padding:12px 14px;border-radius:16px;background:#fff;color:#0b0c10;box-shadow:0 18px 34px -18px rgba(0,0,0,.55)}
.hx-ui-travel>div:last-child{background:#0b0c10;color:#fff;border:1px solid rgba(255,255,255,.14)}.hx-ui-travel>div:last-child small{color:#9ca3af}
.hx-ui-travel small{display:block;color:var(--dim);font-size:12px}.hx-ui-travel b{display:flex;align-items:center;gap:8px;font-size:14.5px}
.hx-ui-travel img{width:24px;height:17px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.08)}.hx-ui-arrow{color:#fff}.hx-ui-arrow svg{width:20px;height:20px}
[dir=rtl] .hx-ui-arrow svg{transform:scaleX(-1)}
.hx-ui-devs{display:flex;gap:8px;flex-wrap:wrap}.hx-ui-devs svg{color:var(--ok)}
@media(max-width:1020px){.hx-pc.a,.hx-pc.b,.hx-pc.c,.hx-pc.d{grid-column:span 12}.hx-pc{min-height:460px}}
@media(max-width:560px){.hx-pc{min-height:430px;border-radius:24px}.hx-pc-body{padding:22px}.hx-pc-ui{top:18px;inset-inline-start:18px;inset-inline-end:18px}}
/* ---------- why choose us: copy on white, a black 3D panel ---------- */
.hx-why{background:#fff}
.hx-why-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.hx-why h2{margin:14px 0 26px}
.hx-acc details{border-bottom:1px solid var(--line);padding:20px 2px}.hx-acc details:first-child{border-top:1px solid var(--line)}
.hx-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;font-size:19px;font-weight:700;letter-spacing:-.015em}
.hx-acc summary::-webkit-details-marker{display:none}.hx-acc summary::after{content:"+";margin-inline-start:auto;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line2);font-size:18px;color:#0b0c10;transition:transform .2s,background .2s}
.hx-acc details[open] summary::after{transform:rotate(45deg);background:#0b0c10;color:#fff;border-color:#0b0c10}
.hx-acc-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#0b0c10;color:#fff;flex:none}.hx-acc-ic svg{width:18px;height:18px}
.hx-acc p{color:var(--muted);margin:12px 0 0;padding-inline-start:52px;font-size:15.5px}.hx-link{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;padding-inline-start:52px;color:#0b0c10;font-weight:650;font-size:15px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line2)}.hx-link svg{width:16px;height:16px}
.hx-why-vis{position:relative;border-radius:32px;background:#0b0c10;min-height:470px;display:grid;place-items:center;perspective:1300px;overflow:hidden}
.hx-why-vis::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,#23262e 1px,transparent 0);background-size:20px 20px;mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
.hx-stack{position:relative;width:min(84%,380px);height:330px;transform:rotateX(16deg) rotateY(-20deg) rotateZ(2deg);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hx-why-vis:hover .hx-stack{transform:rotateX(8deg) rotateY(-8deg)}
.hx-st{position:absolute;inset-inline:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:12px;padding:16px 18px;border-radius:18px;background:rgba(22,24,30,.92);border:1px solid #2a2d36;color:#fff;box-shadow:0 30px 50px -24px rgba(0,0,0,.8)}
.hx-st b{font-size:15.5px}.hx-st small{grid-column:2;color:#9ca3af;font-size:13px}.hx-st svg{width:22px;height:22px;color:#fff;grid-row:span 2}.hx-st img{width:28px;height:20px;border-radius:4px;object-fit:cover;grid-row:1/span 2;grid-column:3}
.hx-st .dot{width:12px;height:12px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.18);grid-row:span 2}
.hx-st.s1{top:0;transform:translateZ(80px);background:#fff;color:#0b0c10;border-color:#fff}.hx-st.s1 small{color:var(--muted)}
.hx-st.s2{top:84px;transform:translateZ(40px)}.hx-st.s3{top:168px;transform:translateZ(0)}.hx-st.s4{top:252px;transform:translateZ(-40px)}
@media(max-width:1020px){.hx-why-grid{grid-template-columns:1fr;gap:32px}.hx-why-vis{min-height:400px}}
@media(prefers-reduced-motion:reduce){.hx-stack,.hx-why-vis:hover .hx-stack{transform:none}}
/* ---------- comparison: our column raised in black ---------- */
.cx{padding-top:104px}
.cx-scroll{overflow-x:auto;padding:18px 2px 8px;-webkit-overflow-scrolling:touch}
.cx-tbl{width:100%;min-width:980px;border-collapse:separate;border-spacing:0}
.cx-tbl th,.cx-tbl td{padding:18px 14px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--line);font-size:15px}
.cx-tbl thead th{border-bottom:1px solid var(--line2);padding-bottom:20px}
.cx-tbl tbody th{text-align:start;font-weight:650;color:#0b0c10;min-width:200px;position:sticky;inset-inline-start:0;background:#fff;z-index:1}
.cx-corner{position:sticky;inset-inline-start:0;background:#fff;z-index:2}
.cx-name{display:block;font-weight:750;font-size:15px;letter-spacing:-.01em;color:#0b0c10;line-height:1.25}
.cx-logo{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 10px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 18px -12px rgba(16,24,40,.35)}.cx-logo img{width:28px;height:28px;border-radius:7px;object-fit:contain;display:block}
.cx-val{display:block;font-weight:650;color:#0b0c10;font-variant-numeric:tabular-nums}.cx-val i{font-style:normal;font-weight:500;color:var(--dim);font-size:13px;margin-inline-start:2px}
.cx-tbl small{display:block;color:var(--dim);font-size:12.5px;margin-top:3px;line-height:1.35}
.cx-yes,.cx-no{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%}
.cx-yes{background:var(--oksoft);color:#15803d}.cx-no{background:#fdecec;color:#c0392b}.cx-yes svg,.cx-no svg{width:16px;height:16px}
.cx-tbl .cx-us{background:#0b0c10;color:#fff;border-bottom-color:#1f2229;min-width:200px}
.cx-us .cx-val{color:#fff}.cx-us .cx-val i,.cx-us small{color:#9ca3af}.cx-us .cx-yes{background:rgba(34,197,94,.16);color:#4ade80}.cx-us .cx-no{background:rgba(239,68,68,.16);color:#f87171}
.cx-top{border-radius:22px 22px 0 0;padding-top:26px!important;position:relative}
.cx-bottom{border-radius:0 0 22px 22px;border-bottom:0!important;padding:18px 14px 26px!important}
.cx-you{position:absolute;top:-13px;inset-inline-start:50%;transform:translateX(-50%);white-space:nowrap;background:var(--brand);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
[dir=rtl] .cx-you{transform:translateX(50%)}
.cx-brand{display:inline-flex;flex-direction:column;align-items:center;gap:10px;font-weight:780;font-size:16px}.cx-brand .mark{width:44px;height:44px;border-radius:12px}.cx-brand .mark svg{width:24px;height:24px}
.cx-cta td,.cx-cta th{border-bottom:0}.cx-btn{background:#fff;color:#0b0c10;border-color:#fff;width:100%;white-space:nowrap;padding:0 12px}.cx-btn:hover{background:#e9eaee;border-color:#e9eaee}
.cx-tbl small bdi,.cx-val bdi{unicode-bidi:isolate}
@media(max-width:700px){.cx-tbl tbody th{min-width:150px;font-size:14px}.cx-tbl{min-width:900px}}
.cx-foot{color:var(--dim);font-size:13px;max-width:880px;margin:16px auto 0;text-align:center;line-height:1.6}
/* ---------- risk-free: black card with a 3D seal ---------- */
.hx-risk-s{padding-top:24px}
/* flags of every country */
.hx-flags{padding-top:96px}.hx-flags .head h2{font-size:clamp(34px,4.4vw,54px);line-height:1.04;letter-spacing:-.045em;font-weight:780}
.hx-flag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:10px}
.hx-flag{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:14.5px;font-weight:600;color:#0b0c10;min-width:0;transition:border-color .15s,box-shadow .15s,transform .15s}
.hx-flag:hover{border-color:#0b0c10;box-shadow:0 12px 24px -18px rgba(16,24,40,.45);transform:translateY(-1px)}
.hx-flag img{width:28px;height:20px;border-radius:4px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
@media(max-width:520px){.hx-flag-grid{grid-template-columns:1fr 1fr}.hx-flag{font-size:13.5px;padding:9px 10px}}
.hx-risk{position:relative;display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;padding:56px 60px;border-radius:34px;background:#0b0c10;color:#fff;overflow:hidden}
.hx-risk::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,#23262e 1px,transparent 0);background-size:20px 20px;mask-image:linear-gradient(90deg,#000,transparent 60%);-webkit-mask-image:linear-gradient(90deg,#000,transparent 60%)}
.hx-risk>*{position:relative}.hx-risk .kicker{color:#9ca3af}.hx-risk h2{color:#fff;margin:10px 0 12px}.hx-risk p{color:#a7acb6;margin:0 0 26px;max-width:560px;font-size:16.5px}
.hx-risk .btn.ghost{background:transparent;color:#fff;border-color:#3a3d46}.hx-risk .btn.ghost:hover{border-color:#fff}
.hx-risk .btn:not(.ghost){background:#fff;color:#0b0c10;border-color:#fff}.hx-risk .btn:not(.ghost):hover{background:#e9eaee}
.hx-badge{width:190px;height:190px;perspective:800px;display:grid;place-items:center}
.hx-badge>div{width:100%;height:100%;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at 30% 25%,#fff,#d9dce3 60%,#a9aebb);color:#0b0c10;box-shadow:inset 0 0 0 10px rgba(255,255,255,.35),inset 0 0 0 11px rgba(11,12,16,.12),0 30px 60px -20px rgba(0,0,0,.8);transform:rotateY(-18deg) rotateX(8deg);animation:hxseal 7s ease-in-out infinite}
@keyframes hxseal{0%,100%{transform:rotateY(-18deg) rotateX(8deg)}50%{transform:rotateY(18deg) rotateX(-4deg)}}
.hx-badge b{display:block;font-size:66px;line-height:1;letter-spacing:-.05em}.hx-badge span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;max-width:120px;margin:6px auto 0}
@media(max-width:780px){.hx-risk{grid-template-columns:1fr;justify-items:center;text-align:center;padding:40px 22px;gap:28px}.hx-risk .cta{justify-content:center}.hx-badge{width:150px;height:150px}.hx-badge b{font-size:52px}.hx-risk::before{mask-image:none;-webkit-mask-image:none;opacity:.5}}
@media(prefers-reduced-motion:reduce){.hx-badge>div{animation:none}}

/* ---------- 3D scenes ---------- */
.x3 .head h2,.x3-s h2{font-size:clamp(34px,4.4vw,54px);line-height:1.04;letter-spacing:-.045em;font-weight:780}
.x3 .head p{font-size:18px}
.x3 .kicker{display:inline-flex;align-items:center;gap:8px;color:#0b0c10;letter-spacing:.16em}
.x3 .kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}
.x3-stage{position:relative;border-radius:28px;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.x3-stage:active{cursor:grabbing}
.x3-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.x3-light{height:clamp(380px,46vw,560px);background:linear-gradient(180deg,#f7f9fc,#fff 70%);border:1px solid var(--line)}
.x3-light::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,#dbe3ef 1px,transparent 0);background-size:26px 26px;mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 80%);-webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 80%)}
.x3-dark{background:#07080b;min-height:560px;border:1px solid #16181f}
.x3-dark::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,#1d212b 1px,transparent 0);background-size:22px 22px}
.x3-hint{position:absolute;top:14px;inset-inline-end:14px;font-size:12px;color:var(--dim);background:rgba(255,255,255,.85);padding:4px 10px;border-radius:999px;border:1px solid var(--line);z-index:2}
.x3-dark .x3-hint{background:rgba(255,255,255,.06);border-color:#23262f;color:#8b90a0}
/* labels that follow the scene (placed by the script; hidden until then) */
.x3-lbl{position:absolute;left:0;top:0;z-index:1;display:none;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px -16px rgba(16,24,40,.35);font-size:13.5px;white-space:nowrap;pointer-events:none;will-change:transform;transition:opacity .25s,box-shadow .25s,border-color .25s}
.js .x3-lbl.x3-on{display:inline-flex}
.x3-lbl svg{width:17px;height:17px;color:var(--brand);flex:none}.x3-lbl b{font-weight:700}
.x3-lbl span{display:grid;line-height:1.2}.x3-lbl small{color:var(--muted);font-size:11.5px}
.x3-lbl img{width:26px;height:18px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.x3-lbl.x3-dk{background:#0b0c10;color:#fff;border-color:#0b0c10}.x3-lbl.x3-dk svg{color:#8fb3ff}
.x3-lbl.x3-warn svg{color:#b45309}
.x3-lbl.x3-tag{padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--brand);color:#fff;border-color:var(--brand)}.x3-lbl.x3-tag svg{color:#fff;width:13px;height:13px}
.x3-lbl.x3-tag.x3-ok{background:#15803d;border-color:#15803d}
.x3-lbl.x3-hot{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.18),0 14px 30px -16px rgba(16,24,40,.35)}
.x3-lbl.x3-ring{background:#fff;color:#0b0c10;border:0;font-weight:700;font-size:12.5px;padding:6px 11px}
/* callouts that follow the packet */
.x3-lbl.x3-ev{background:#0b0c10;color:#fff;border-color:#0b0c10;padding:9px 13px;font-size:13px;box-shadow:0 18px 36px -18px rgba(16,24,40,.55)}
.x3-lbl.x3-ev svg{color:#93b4ff}.x3-lbl.x3-ev-ok svg{color:#4ade80}.x3-lbl.x3-ev-bad svg{color:#fbbf24}
.x3-lbl.x3-ev img{width:22px;height:16px}
.x3-scr{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;color:#fca5a5;background:rgba(248,113,113,.12);padding:2px 7px;border-radius:6px;letter-spacing:.04em}
/* steps under the journey */
.x3-steps{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:s}
.x3-steps .x3-bar{position:absolute;inset-inline-start:0;bottom:0;height:3px;width:0;background:var(--brand)}
.x3-steps li.on .x3-bar{animation:x3bar var(--x3t,3.8s) linear forwards}.x3-steps li.pin .x3-bar{animation:none;width:100%}
.x3-steps button{all:unset;box-sizing:border-box;display:block;position:relative;overflow:hidden;height:100%;width:100%;padding:18px 18px 20px;border-radius:18px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.x3-steps button:hover{transform:translateY(-2px)}
.x3-steps button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.x3-steps li.on button{border-color:#0b0c10;box-shadow:0 18px 36px -22px rgba(16,24,40,.5)}
.x3-n{float:inline-end;font-size:12px;font-weight:700;color:var(--dim)}
.x3-si{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#f1f4f9;color:#0b0c10;margin-bottom:12px;transition:background .2s,color .2s}
.x3-steps li.on .x3-si{background:var(--brand);color:#fff}
.x3-steps b{display:block;font-size:15.5px;margin-bottom:6px}.x3-steps p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
/* security: a dark band */
.x3-s{background:#07080b;color:#fff;padding:112px 0;overflow:hidden}
.x3-s .kicker{color:#fff}.x3-s h2{color:#fff;margin:14px 0 0}.x3-s .lead{color:#9aa1ae;margin:0;max-width:440px;font-size:17px}
.x3-s-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:44px}
.x3-s-grid{display:grid;grid-template-columns:minmax(300px,.72fr) 1.28fr;gap:28px;align-items:stretch}
.x3-layers{list-style:none;padding:0;margin:0;display:grid;gap:8px;align-content:center}
.x3-layers li{position:relative;display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:16px;border:1px solid #171a21;background:#0b0d12;cursor:pointer;outline:none;overflow:hidden;transition:background .25s,border-color .25s,transform .25s}
.x3-layers li:hover,.x3-layers li:focus-visible{border-color:#2a2f3b;background:#0f1218}
.x3-layers li.on{border-color:#2b3a5e;background:linear-gradient(180deg,#101626,#0c111d)}
.x3-li{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#151922;color:#c9cfdb;flex:none;transition:background .25s,color .25s}
.x3-li svg{width:18px;height:18px}
.x3-layers li.on .x3-li{background:var(--brand);color:#fff}
.x3-lt{min-width:0;flex:1}.x3-layers b{display:block;font-size:15px;color:#fff}.x3-layers small{display:block;color:#8a91a0;font-size:13px;margin-top:2px;line-height:1.45}
.x3-num{font-size:12px;font-weight:700;color:#4a5060;font-variant-numeric:tabular-nums;align-self:flex-start}
.x3-layers li.on .x3-num{color:#93b4ff}
.x3-bar{position:absolute;inset-inline-start:0;bottom:0;height:2px;width:0;background:var(--brand)}
.x3-layers li.on .x3-bar{animation:x3bar var(--x3t,4s) linear forwards}
.x3-layers li.pin .x3-bar{animation:none;width:100%}
@keyframes x3bar{from{width:0}to{width:100%}}
.x3-dark{background:radial-gradient(120% 90% at 50% 70%,#0e121c,#07080b 65%);min-height:620px;border:1px solid #161922}
.x3-dark::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,#171b24 1px,transparent 0);background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}
.x3-lbl.x3-ring{background:#fff;color:#0b0c10;border:0;font-weight:700;font-size:12.5px;padding:7px 12px;border-radius:999px;gap:7px}
.x3-lbl.x3-ring svg{width:14px;height:14px}
.x3-status{position:absolute;top:16px;inset-inline-start:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid #232733;font-size:12.5px;font-weight:650;color:#d6dbe5}
.x3-status i{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.15)}
.x3-feed{position:absolute;inset-inline-start:16px;top:58px;z-index:2;list-style:none;margin:0;padding:0;display:grid;gap:6px;max-width:calc(100% - 32px)}
.x3-feed li{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;border-radius:12px;background:rgba(13,16,23,.86);border:1px solid #1f2430;font-size:12.5px;color:#9aa1ae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:x3in .45s cubic-bezier(.2,.7,.2,1)}
.x3-feed li:nth-child(2){opacity:.6}.x3-feed li:nth-child(3){opacity:.3}
.x3-feed b{color:#fff;font-weight:650}.x3-feed b.l{color:#93b4ff}
.x3-feed i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#15803d;flex:none}
.x3-feed i::after{content:"";width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
@keyframes x3in{from{opacity:0;transform:translateY(8px)}}
.x3-legend{position:absolute;inset-inline-start:16px;bottom:14px;z-index:2;font-size:11.5px;color:#4d5361}.x3-legend em{font-style:normal}
@media(max-width:1080px){.x3-steps{grid-template-columns:repeat(3,1fr)}.x3-s-grid{grid-template-columns:1fr}.x3-s-head{flex-direction:column;align-items:flex-start;gap:16px}.x3-layers{grid-template-columns:1fr 1fr;order:2}}
@media(max-width:640px){.x3-steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:2px 2px 8px;scrollbar-width:none}.x3-steps::-webkit-scrollbar{display:none}.x3-steps li{flex:0 0 76%;scroll-snap-align:start}.x3-light{height:430px;border-radius:22px}.x3-dark{min-height:460px;border-radius:22px}.x3-s{padding:80px 0}.x3-layers{grid-template-columns:1fr}.x3-feed li:nth-child(n+3){display:none}.x3-lbl{font-size:12px;padding:6px 9px}.x3-lbl small{display:none}.x3-lbl img{width:20px;height:14px}.x3-hint{display:none}}