/* ---------- v2: explorer, guides, countries, integrations, animations ---------- */
.foot{grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr}
@media(max-width:1000px){.foot{grid-template-columns:1fr 1fr}}
.dd{position:relative}
.ddm{position:absolute;top:100%;inset-inline-start:0;min-width:290px;padding:8px;border-radius:16px;background:rgba(5,14,32,.98);border:1px solid var(--line2);
  box-shadow:0 30px 70px -20px #000;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;z-index:60}
.dd:hover .ddm,.dd:focus-within .ddm{opacity:1;visibility:visible;transform:none}
.ddm a{display:flex!important;align-items:center;gap:12px;padding:10px 12px!important;border-radius:10px;color:#cfe0fa!important;box-shadow:none!important}
.ddm a i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(34,211,238,.1);color:var(--cyan)}
.ddm a:hover{background:rgba(120,180,255,.08)!important}
@media(max-width:960px){.ddm{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;padding:0 0 0 12px;min-width:0}}
/* typing */
.typer-line{margin-top:14px;font:600 clamp(16px,2vw,22px) var(--fm);color:var(--mute)}
#typer{color:var(--lime)}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--cyan);margin-inline-start:3px;vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* tilt */
.tilt{transition:transform .2s ease-out;transform-style:preserve-3d;will-change:transform}
/* explorer */
.explorer{display:grid;grid-template-columns:280px 1fr;gap:20px;margin-top:40px;align-items:start}
.xlist{display:flex;flex-direction:column;gap:6px;max-height:620px;overflow:auto;padding-inline-end:4px}
.xbtn{display:flex;align-items:center;gap:12px;text-align:start;padding:11px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02);
  color:var(--mute);font:700 14px var(--ff);cursor:pointer;transition:.25s;position:relative;overflow:hidden}
.xbtn i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(120,180,255,.08);color:var(--cyan);transition:.25s;flex:none}
.xbtn:hover{color:#fff;border-color:var(--line2);transform:translateX(3px)}
html[dir=rtl] .xbtn:hover{transform:translateX(-3px)}
.xbtn.on{color:#fff;border-color:rgba(34,211,238,.5);background:linear-gradient(90deg,rgba(34,211,238,.16),rgba(30,139,255,.05));box-shadow:0 10px 30px -15px rgba(34,211,238,.8)}
.xbtn.on i{background:var(--grad);color:#02101f}
.xstage{position:relative;min-height:560px;border-radius:24px;padding:28px;background:var(--card);border:1px solid var(--line2);overflow:hidden}
.xstage::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(34,211,238,.12),transparent 30%);animation:spin 9s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(1turn)}}
.xpanel{position:absolute;inset:28px;display:grid;grid-template-columns:1fr 1.25fr;gap:28px;align-items:center;opacity:0;visibility:hidden;transform:translateX(40px) scale(.97);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1),visibility .5s}
html[dir=rtl] .xpanel{transform:translateX(-40px) scale(.97)}
.xpanel.on{opacity:1;visibility:visible;transform:none;position:relative;inset:auto}
.xpanel h3{font-size:28px;margin-top:4px}.xpanel p{color:var(--mute);margin-top:10px}
.xpanel ul{list-style:none;margin-top:16px;display:grid;gap:8px}
.xpanel li{display:flex;gap:10px;font-size:14.5px;color:#d3e1f7;opacity:0;transform:translateY(10px)}
.xpanel.on li{animation:liIn .5s forwards;animation-delay:calc(var(--d) * 80ms + 150ms)}
@keyframes liIn{to{opacity:1;transform:none}}
.xpanel li i{color:var(--green);margin-top:4px}
.xshot img{border-radius:16px;border:1px solid var(--line2);box-shadow:0 30px 70px -30px rgba(30,139,255,.8)}
.xpanel.on .xshot img{animation:shotIn .8s cubic-bezier(.2,.8,.2,1)}
@keyframes shotIn{from{opacity:0;transform:perspective(900px) rotateY(-12deg) scale(.94)}to{opacity:1;transform:none}}
.xshot .noph{aspect-ratio:16/10;border-radius:16px;border:1px solid var(--line2);display:grid;place-items:center;font-size:80px;color:var(--cyan);background:radial-gradient(circle at 50% 40%,rgba(34,211,238,.2),rgba(6,18,42,.6) 60%)}
.xprog{position:absolute;left:28px;right:28px;bottom:14px;height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.xprog span{display:block;height:100%;width:0;background:var(--grad)}
.xprog span.run{animation:prog 6s linear forwards}
@keyframes prog{to{width:100%}}
@media(max-width:960px){.explorer{grid-template-columns:1fr}.xlist{flex-direction:row;overflow-x:auto;max-height:none;padding-bottom:6px}.xbtn{flex:none}.xbtn span{white-space:nowrap}
  .xpanel{grid-template-columns:1fr}.xstage{min-height:0;padding:20px}.xpanel{inset:20px}}
/* guide cards */
.gcard .ic{transition:transform .4s}.gcard:hover .ic{transform:rotate(-8deg) scale(1.08)}
.grad-ic{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ic.sm{width:42px;height:42px;font-size:18px;margin:0}
/* countries */
.cstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.cmini{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 14px;border-radius:18px;background:var(--card);border:1px solid var(--line);text-align:center;transition:.3s}
.cmini:hover{transform:translateY(-6px);border-color:rgba(34,211,238,.5);box-shadow:0 20px 40px -20px rgba(34,211,238,.6)}
.cflag{font-size:44px;line-height:1;width:1.33em;border-radius:6px;box-shadow:0 6px 20px -6px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.15)}
.cmini:hover .cflag{animation:wave .9s ease}
@keyframes wave{25%{transform:rotate(-6deg) scale(1.05)}75%{transform:rotate(6deg) scale(1.05)}}
.cmtax{font:700 12px var(--fm);color:var(--cyan)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px}
@media(max-width:420px){.cgrid{grid-template-columns:1fr}}
.ccard{padding:24px;border-radius:22px;background:var(--card);border:1px solid var(--line);scroll-margin-top:90px}
.ccard .chd{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.cmeta{color:var(--dim);font-size:13px}
.csec{font:700 11px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:16px 0 8px}
.tax{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);margin-bottom:8px;font-size:14px}
.tax .tn{color:var(--mute)}.tax .tw{color:#c7d6ef;font-size:13px;margin-top:3px}
.st{display:inline-block;font:700 10.5px var(--ff);padding:2px 8px;border-radius:999px;margin-inline-end:6px;vertical-align:1px}
.st-live{background:rgba(90,209,106,.15);color:var(--lime);border:1px solid rgba(90,209,106,.35)}
.st-ready{background:rgba(34,211,238,.12);color:var(--cyan);border:1px solid rgba(34,211,238,.3)}
.st-soon{background:rgba(212,162,58,.12);color:#f3cf7a;border:1px solid rgba(212,162,58,.35)}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pills span{padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:12.5px;color:#d3e1f7}
.legend{margin-top:22px;color:var(--mute);font-size:13.5px;text-align:center;line-height:2}
/* integrations */
.integ .ihd{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.integ.soon{opacity:.85;border-style:dashed}
.marquee{overflow:hidden;margin-top:30px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mtrack{display:flex;gap:14px;width:max-content;animation:marq 40s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
html[dir=rtl] .mtrack{animation-name:marqR}
@keyframes marqR{to{transform:translateX(50%)}}
.mitem{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-weight:700;white-space:nowrap}
.mitem i{color:var(--cyan);font-size:18px}.mitem.soon{border-style:dashed;color:var(--mute)}.mitem small{color:#f3cf7a;font-size:11px}
/* timeline */
.timeline{position:relative;display:grid;gap:18px}
.timeline::before{content:"";position:absolute;inset-inline-start:23px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--cyan),var(--green));opacity:.5}
.tl{display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:start}
.tl .tn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:800 18px var(--fh);color:#02101f;background:var(--grad);box-shadow:0 0 0 6px rgba(34,211,238,.1),0 10px 30px -8px rgba(34,211,238,.8);position:relative;z-index:1}
.tl .card{margin:0}
/* animated gradient on primary buttons */
.btn-p{background-size:200% 100%;animation:gshift 6s ease infinite}
@keyframes gshift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* nav fit */
.brand{flex:none}.links{min-width:0}
@media(max-width:1440px){.links a{padding:9px 9px;font-size:13.5px}.nav .in{gap:14px}}
@media(max-width:1260px){.cta-top .lbl-t{display:none}.cta-top{padding:10px 12px!important}}
@media(max-width:1120px){.links{display:none;position:absolute;top:72px;inset-inline:0;flex-direction:column;background:rgba(3,10,24,.97);padding:14px 22px;border-bottom:1px solid var(--line)}
  .nav.open .links{display:flex}.burger{display:block;margin-inline-start:auto}
  .ddm{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;padding:0 0 0 12px;min-width:0}}

.btns.center{justify-content:center}

/* ---------- fit any screen and any browser zoom ---------- */
/* wide screens at 100%: the whole page scales up so it fills the screen instead of a narrow column */
@media (min-width:1500px){header.nav,main,footer{zoom:1.12}}
@media (min-width:1750px){header.nav,main,footer{zoom:1.25}}
@media (min-width:2200px){header.nav,main,footer{zoom:1.45}}
@media (min-width:2900px){header.nav,main,footer{zoom:1.9}}
/* short windows (laptops, or zoomed in to 125-200%): headings and spacing follow the height too */
h1{font-size:clamp(30px,min(6vw,8.5vh),68px)}
h2{font-size:clamp(24px,min(4vw,6.5vh),44px)}
section{padding:clamp(44px,9vh,90px) 0}
.hero{padding:clamp(30px,6vh,70px) 0 clamp(20px,4vh,40px)}
.phead{padding:clamp(36px,7vh,70px) 0 clamp(16px,3vh,30px)}
.xstage{min-height:min(560px,78vh)}
.lead{font-size:clamp(15px,min(1.6vw,2.4vh),19px)}
@media (max-height:620px){.float{display:none}.chips{margin-top:16px}.btns{margin-top:20px}}
.lang i.fa-globe{inset-inline-end:auto!important}

.links{flex-shrink:0}
@media (min-width:1500px){.links a{padding:9px 10px;font-size:14px}.nav .in{gap:14px}}
@media (min-width:1500px) and (max-width:1749px){.links a{padding:9px 8px;font-size:13.5px}}

@media(max-width:560px){.btn{white-space:normal;text-align:center;justify-content:center;max-width:100%}}