/* ==========================================================================
   BIGO Diamond TEST design (test.bigodiamond.com, 2026-10-10)
   Features: the staging product (unchanged behaviour, loaded by styles.css + app.js).
   Style:    phoenixbigo.com's layout language: Cairo display headings over Tajawal text, centred section heads with a
             pill eyebrow, alternating section bands, bordered cards with icon tiles, numbered steps, a gradient CTA
             with a soft glow, outline selector pills and a dark footer.
   Colours:  bigodiamond.com: brand teal #FF2E93, sky #9B4DFF / #B64DFF, ink #0F172A, slate #5B6B82,
             page #F6F9FC, hairline #E6EDF5; the yellow diamond stays the product accent.
   Loaded after styles.css, so it only restyles; no rule here changes what a control does.
   ========================================================================== */

@font-face{font-family:"Cairo Display";font-weight:800;font-style:normal;font-display:swap;src:url(/assets/fonts/cairo800-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E}
@font-face{font-family:"Cairo Display";font-weight:800;font-style:normal;font-display:swap;src:url(/assets/fonts/cairo800-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Tajawal Text";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/tajawal400-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E}
@font-face{font-family:"Tajawal Text";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/tajawal400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Tajawal Text";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/tajawal700-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E}
@font-face{font-family:"Tajawal Text";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/tajawal700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}

:root{
  /* bigodiamond.com surfaces and inks */
  --bg:#F6F9FC; --bg-2:#EEF3F9; --surface:#FFFFFF;
  --ink:#0F172A; --ink-2:#1E293B; --muted:#5B6B82; --faint:#6B7A90;
  --line:#E6EDF5; --line-2:#D5E0EC;
  /* bigodiamond.com brand */
  --brand:#FF2E93; --brand-2:#9B4DFF; --brand-3:#FF7A1F; --brand-deep:#8A1FD6;
  --brand-ink:#B01271;                       /* teal for text on white (AA) */
  --brand-soft:rgba(255,46,147,.12); --brand-edge:rgba(255,46,147,.32);
  --grad:linear-gradient(120deg,#9B4DFF 0%,#FF2E93 50%,#FF7A1F 100%);
  --grad-text:linear-gradient(90deg,#C01A7E 0%,#8A1FD6 100%);
  --on-grad:#FFFFFF;                         /* Phoenix: dark ink on the bright CTA */
  --glow:0 14px 30px -12px rgba(255,46,147,.70),0 6px 14px -8px rgba(155,77,255,.45);
  --ring:rgba(255,46,147,.28);
  --navy:#0F172A; --navy-2:#162036; --navy-line:rgba(255,255,255,.09);
  --e1:0 1px 2px rgba(15,23,42,.04);
  --e2:0 1px 2px rgba(15,23,42,.04),0 16px 36px -22px rgba(15,23,42,.22);
  --e3:0 2px 4px rgba(15,23,42,.04),0 24px 60px -26px rgba(15,23,42,.28);
  --font:"Tajawal Text","Readex Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-d:"Cairo Display","Tajawal Text","Readex Pro",system-ui,sans-serif;
  --t-h2:40px; --t-body:16px; --r:18px; --r-l:20px;
}
body{font-size:var(--t-body);line-height:1.6}
::selection{background:#BDF1F1}
h1,h2,h3,.final h2{font-family:var(--font-d);font-weight:800}
h4{font-weight:700}
.tnum{font-variant-numeric:tabular-nums lining-nums}

/* ---------- buttons: the gradient CTA with its glow; outline secondary ---------- */
.btn{font-weight:700;border-radius:12px}
.btn-cta{background:var(--grad);color:var(--on-grad);box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-cta:hover{background:linear-gradient(135deg,#0AD3D3 0%,#3BB1FF 100%);box-shadow:0 18px 36px -12px rgba(255,46,147,.85),0 8px 16px -8px rgba(155,77,255,.5)}
.btn-cta:active{background:linear-gradient(135deg,#04B3B3 0%,#1396EA 100%);box-shadow:inset 0 2px 4px rgba(3,36,48,.25)}
.btn-cta.is-loading,.btn-cta.is-loading[disabled]{background:var(--grad);color:var(--on-grad);box-shadow:var(--glow)}
.btn-cta[disabled],.btn-cta[aria-disabled=true]{background:#E7EDF4;color:#6B7A90;box-shadow:none}
.btn-line{background:#fff;border:1.5px solid var(--line-2);color:var(--ink)}
.btn-line:hover{border-color:var(--brand);color:var(--brand-ink);background:#fff}
.btn-soft{background:var(--brand-soft);border-color:var(--brand-edge);color:var(--brand-ink)}
.btn-soft:hover{background:rgba(255,46,147,.18)}
.btn-lg{height:56px;border-radius:14px}
.link,.svc-cta{color:var(--brand-ink)}
a{color:var(--brand-ink)}
:focus-visible{outline-color:var(--brand-ink)}

/* ---------- header (Phoenix): logo · underlined nav · outline pills · gradient CTA ---------- */
.site-header{background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.hdr-row{height:78px;gap:26px}
.logo img{height:40px}
.nav{gap:6px}
.nav a{padding:8px 12px;font-size:15.5px;font-weight:400;color:var(--muted);border-radius:10px}
.nav a:hover{background:transparent;color:var(--ink)}
.nav a[aria-current]{color:var(--ink);font-weight:700}
.nav a[aria-current]::after{inset-inline:12px;bottom:-20px;height:3px;border-radius:3px;background:var(--grad)}
.hdr-end{gap:10px}
.locale,.icon-btn,.acct-btn{height:44px;border-radius:12px;border:1px solid var(--line-2);background:#fff;box-shadow:var(--e1)}
.locale:hover,.icon-btn:hover,.acct-btn:hover{border-color:var(--brand)}
.locale[aria-expanded=true],.icon-btn[aria-expanded=true],.acct-btn[aria-expanded=true]{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.locale .lc{font-weight:700}
.hdr-end .signin{height:44px;padding:0 18px;border-radius:12px;font-weight:700}
.hdr-cta{height:44px;padding:0 18px;border-radius:12px}
.hdr-cta .i{width:17px;height:17px}
.av{background:var(--grad);color:var(--on-grad)}
.pop{border-radius:18px;border-color:var(--line);box-shadow:0 2px 6px rgba(15,23,42,.05),0 30px 60px -26px rgba(15,23,42,.38)}
.mk-auto:hover,.mk-item:hover,.lp-lang:hover{background:rgba(255,46,147,.08)}

/* ---------- hero (Phoenix): badge pill, display headline with a gradient phrase, the recharge card, big art ---------- */
.hero{--t-hero:58px;background:
  radial-gradient(46% 70% at 82% 40%,rgba(255,46,147,.16),rgba(255,46,147,0) 70%),
  radial-gradient(30% 50% at 96% 8%,rgba(155,77,255,.16),rgba(155,77,255,0) 70%),
  radial-gradient(40% 60% at 4% 100%,rgba(155,77,255,.08),rgba(155,77,255,0) 70%),
  linear-gradient(180deg,#FFFFFF 0%,#F8FBFE 60%,var(--bg) 100%)}
@media (min-width:961px){ .hero{background:
  radial-gradient(46% 70% at 82% 40%,rgba(255,46,147,.16),rgba(255,46,147,0) 70%),
  radial-gradient(30% 50% at 96% 8%,rgba(155,77,255,.16),rgba(155,77,255,0) 70%),
  radial-gradient(40% 60% at 4% 100%,rgba(155,77,255,.08),rgba(155,77,255,0) 70%),
  linear-gradient(180deg,#FFFFFF 0%,#F8FBFE 60%,var(--bg) 100%)} }
.hero-atmo{background:radial-gradient(1px 1px at 20% 30%,rgba(255,46,147,.5),transparent),radial-gradient(1px 1px at 70% 80%,rgba(155,77,255,.5),transparent);opacity:.6}
.hero-grid{grid-template-columns:minmax(0,560px) minmax(0,1fr);padding-top:56px;padding-bottom:28px}
.hero-badge{display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;height:36px;padding:0 16px 0 12px;border-radius:999px;border:1px solid var(--brand-edge);background:rgba(255,46,147,.09);color:var(--brand-ink);font-size:13.5px;font-weight:700;letter-spacing:.01em;text-transform:none}
html[dir=rtl] .hero-badge{padding:0 12px 0 16px;letter-spacing:0;font-size:14px}
.hb-dot{position:relative;width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(255,46,147,.18)}
.hb-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--brand);animation:hb-ping 2.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes hb-ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.6);opacity:0}}
.hero h1{font-family:var(--font-d);font-weight:800;line-height:1.08;letter-spacing:-.022em;color:var(--ink)}
html[dir=rtl] .hero h1{line-height:1.3;letter-spacing:0}
.hero h1 em{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero-lead{font-size:18px;line-height:1.7;color:var(--muted);margin-top:18px}
.rx{margin-top:34px}
.rx::before{border-radius:24px;border-color:var(--line);box-shadow:var(--e3)}
.rx-label{font-weight:700;font-size:14px;color:var(--ink)}
.rx-input{height:62px;border-radius:14px;border:1.5px solid var(--line-2);font-family:var(--font);font-weight:700;font-size:19px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 18px 34px -26px rgba(15,23,42,.35)}
.rx-input:hover{border-color:rgba(255,46,147,.55)}
.rx-input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--ring),0 18px 34px -26px rgba(15,23,42,.35)}
.rx-state .spin{color:var(--brand-ink)}
.rx-acct{border-radius:14px;background:var(--bg)}
.seg{border-radius:14px}
.pick .in{border-radius:14px;border-color:var(--line)}
.pick .amt{font-family:var(--font-d);font-weight:800;font-size:18px}
.pick:hover .in{border-color:rgba(255,46,147,.5)}
.pick input:checked + .in{border-color:var(--brand);background:linear-gradient(180deg,rgba(255,46,147,.10),#fff 80%);box-shadow:0 0 0 3px var(--ring)}
.pick input:checked + .in .pr{color:var(--brand-ink)}
.pay-line .v{font-family:var(--font-d);font-weight:800;font-size:32px;letter-spacing:-.01em}
.side-pay .rx-pay-in{border-radius:20px;border-color:var(--line);box-shadow:var(--e3)}

/* the stage: the brand Dino on a lit orbit (decorative) */
.px-stage{min-height:calc(var(--dino-h) + 120px)}
.px-art{position:absolute;inset:0;pointer-events:none;--px:0;--py:0}
.px-glow{position:absolute;left:50%;top:50%;width:min(620px,118%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,46,147,.26) 0%,rgba(155,77,255,.14) 46%,rgba(155,77,255,0) 100%)}
.px-orbit{position:absolute;left:50%;top:52%;width:min(560px,106%);aspect-ratio:2.4;border-radius:50%;border:1.5px solid rgba(255,46,147,.38);transform:translate(-50%,-50%) rotate(-14deg)}
.px-orbit.o2{width:min(470px,90%);border-color:rgba(155,77,255,.30);transform:translate(-50%,-50%) rotate(18deg)}
.px-orbit > span{position:absolute;left:12%;top:8%;width:9px;height:9px;border-radius:50%;background:#FFC2E0;box-shadow:0 0 10px #FF2E93,0 0 18px rgba(255,46,147,.7)}
.px-orbit.o2 > span{left:80%;top:84%;width:7px;height:7px;background:#9FD2FF;box-shadow:0 0 10px #B64DFF}
.px-floor{position:absolute;left:50%;bottom:6%;width:min(360px,64%);height:34px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(15,23,42,.16),rgba(15,23,42,0))}
.px-fig{position:absolute;left:50%;top:50%;width:min(540px,104%);transform:translate(-50%,-50%) translate3d(calc(var(--px) * -8px),calc(var(--py) * -6px),0);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.px-stage .px-fig{transform:translate(-50%,-50%) translate3d(calc(var(--px,0) * -8px),calc(var(--py,0) * -6px),0)}
.px-dino{display:block;width:100%;height:auto;filter:drop-shadow(0 26px 30px rgba(15,23,42,.14));user-select:none;-webkit-user-drag:none}
.px-gem{position:absolute;display:block;height:auto;filter:drop-shadow(0 6px 8px rgba(208,157,21,.28));animation:px-bob 6.5s ease-in-out infinite}
.px-gem.g1{width:34px;left:4%;top:20%;--r:-14deg}
.px-gem.g2{width:24px;right:3%;top:70%;--r:14deg;animation-delay:-3s;opacity:.85}
html[dir=rtl] .px-gem.g1{left:auto;right:4%}
html[dir=rtl] .px-gem.g2{right:auto;left:3%}
.px-spark{position:absolute;font-size:18px;line-height:1;color:var(--brand);animation:px-spark 3.6s ease-in-out infinite}
.px-spark.s1{left:14%;top:62%}.px-spark.s2{right:12%;top:16%;font-size:14px;animation-delay:1.4s;color:var(--brand-3)}.px-spark.s3{left:46%;top:4%;font-size:12px;animation-delay:.7s}
@keyframes px-bob{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-8px) rotate(calc(var(--r) * -.5))}}
@keyframes px-spark{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:.9;transform:scale(1.1)}}
@keyframes px-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes px-in{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
@keyframes px-spin{to{rotate:360deg}}
.px-dino{animation:px-in .9s cubic-bezier(.16,1,.3,1) .2s both,px-float 6s ease-in-out 1.2s infinite}
.px-orbit{animation:px-in 1s ease .4s both}
.px-orbit > span{animation:px-spark 3s ease-in-out infinite}
[data-hero-off] .px-dino,.hero:focus-within .px-dino{animation-play-state:running,paused}
[data-hero-off] .px-gem,[data-hero-off] .px-spark{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ .px-art *{animation:none!important;transition:none!important} .hb-dot::after{display:none} }

/* proof strip → Phoenix feature row: icon tile + label */
.proof{border-top:1px solid var(--line);padding:26px 0 34px;gap:14px 24px}
.proof li,.proof a{gap:12px;font-size:14.5px;font-weight:700;color:var(--ink-2)}
.proof .ic{width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--brand-ink);display:grid;place-items:center;box-shadow:var(--e1)}
.proof .ic .i{width:19px;height:19px}

/* ---------- sections: centred head with a pill eyebrow; alternating bands ---------- */
.sec{padding:88px 0}
.px-head{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:760px;margin:0 auto 44px}
.eyebrow{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;background:rgba(255,46,147,.12);color:var(--brand-ink);font-size:13px;font-weight:700;margin-bottom:16px}
.px-head h2{font-size:var(--t-h2);line-height:1.15;letter-spacing:-.015em;margin:0 0 12px;color:var(--ink);text-wrap:balance}
html[dir=rtl] .px-head h2{letter-spacing:0;line-height:1.35}
.px-head > p{margin:0;font-size:17px;line-height:1.7;color:var(--muted);max-width:62ch}
.px-head .market{margin-top:18px;border-radius:999px;background:#fff;border-color:var(--line-2);font-weight:700;color:var(--ink-2)}
.px-head .market .i{width:16px;height:16px;color:var(--brand-ink)}
#packages{padding-top:88px}
.sec-steps{background:#fff;border-block:1px solid var(--line)}
.sec-pay{padding-top:88px}
.sec-why{background:#fff;border-block:1px solid var(--line)}
.sec.sec-learn{background:var(--bg-2);padding-block:88px}
.sec-biz{background:var(--bg)}

/* packages (Phoenix): icon tile with the yellow diamond, display amount, teal price, glow when chosen */
.pkg-grid{gap:16px}
.pkg .card{padding:22px 10px 18px;border:1px solid var(--line);border-radius:20px;box-shadow:var(--e1);background:#fff}
.pkg .gw{width:54px;height:54px;margin-bottom:14px;border-radius:15px;background:linear-gradient(180deg,#FFF9E3,#FFF2C4);border:1px solid #F4DE96;box-shadow:inset 0 1px 0 #fff}
.pkg .gw .gm{width:32px;height:auto}
.pkg .amt{font-family:var(--font-d);font-weight:800;font-size:25px;letter-spacing:-.01em}
.pkg .unit{font-size:13px}
.pkg .rule{margin:14px 0 12px;background:var(--line)}
.pkg .price{font-family:var(--font-d);font-weight:800;font-size:20px;color:var(--brand-ink)}
.pkg .est{font-weight:700}
.pkg:hover .card{border-color:var(--brand-edge);transform:translateY(-3px);box-shadow:var(--e2)}
.pkg input:focus-visible + .card{outline-color:var(--brand-ink)}
.pkg input:checked + .card{border:2px solid var(--brand);padding:21px 9px 17px;background:linear-gradient(180deg,rgba(255,46,147,.10) 0%,#fff 58%);box-shadow:0 0 0 4px var(--ring),0 18px 36px -18px rgba(255,46,147,.6)}
.pkg input:checked + .card .gw{background:linear-gradient(180deg,#FFF6D2,#FFE89A);border-color:#EFCB5C;box-shadow:0 8px 18px -10px rgba(208,157,21,.6)}
.pkg input:checked + .card .rule{background:var(--brand-edge)}
.pkg input:checked + .card .price{color:var(--brand-ink)}
.pk-custom{margin-top:26px;text-align:center}
.pk-custom .btn{height:50px;border-radius:12px;padding:0 22px}
.note{text-align:center}

/* steps (Phoenix "simple steps"): numbered gradient tiles */
.px-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:none}
.px-steps li{position:relative;padding:26px 24px 26px;border:1px solid var(--line);border-radius:20px;background:var(--bg);transition:border-color .2s,transform .2s,box-shadow .2s}
.px-steps li:hover{border-color:var(--brand-edge);transform:translateY(-3px);box-shadow:var(--e2);background:#fff}
.px-steps .n{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--grad);color:var(--on-grad);font-family:var(--font-d);font-weight:800;font-size:19px;box-shadow:var(--glow);margin-bottom:20px}
.px-steps h3{margin:0 0 8px;font-size:18px;line-height:1.35;color:var(--ink)}
.px-steps p{margin:0;font-size:15px;line-height:1.7;color:var(--muted)}

/* payment methods (Phoenix): cards with a logo tile and a status */
.pay-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:28px}
.pay-market{border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:var(--e1)}
.pay-row{padding:16px 18px;border-radius:18px;border-color:var(--line);box-shadow:var(--e1);transition:border-color .2s,box-shadow .2s}
.pay-row:hover{border-color:var(--brand-edge);box-shadow:var(--e2)}
.pay-row .logo{width:62px;height:50px;border-radius:14px}
.pay-row .name{font-weight:700;font-size:16px}
.pay-g{font-weight:700;color:var(--ink-2)}
.pay-g .i{color:var(--brand-ink)}
.tag{background:rgba(255,46,147,.12);color:var(--brand-ink);font-weight:700}
.pay-off{border-radius:18px;background:#fff}
.more{border-top-color:var(--line)}

/* why (Phoenix feature cards): icon tile, title, text */
.why-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.why-list li{padding:28px 24px;border:1px solid var(--line);border-top:1px solid var(--line);border-radius:20px;background:var(--bg);transition:border-color .2s,transform .2s,box-shadow .2s,background-color .2s}
.why-list li:hover{border-color:var(--brand-edge);transform:translateY(-3px);box-shadow:var(--e2);background:#fff}
.why-list .ic{width:48px;height:48px;border-radius:14px;background:#fff;border:1px solid var(--line-2);color:var(--brand-ink);margin-bottom:18px;box-shadow:var(--e1)}
.why-list h3{font-size:18px;margin:0 0 8px}
.why-list p{font-size:15px;line-height:1.7}

/* learn → Phoenix FAQ: stacked accordion cards */
.learn-grid{grid-template-columns:minmax(0,1fr);max-width:880px;gap:14px;row-gap:14px}
.learn-q{border:1px solid var(--line);border-radius:18px;background:#fff;padding:6px 22px;box-shadow:var(--e1);transition:border-color .2s,box-shadow .2s}
.learn-q[open]{border-color:var(--brand-edge);box-shadow:var(--e2);padding-bottom:20px}
.learn-q>summary{min-height:64px}
.learn-grid .learn-q>summary h3{margin:0;font-size:18px;line-height:1.35}
.learn-q>summary .learn-art{width:46px;height:46px;border-radius:13px;box-shadow:none;background:linear-gradient(180deg,#FFF9E3,#FFF2C4);border:1px solid #F4DE96}
.learn-q>summary .learn-art svg{max-width:30px;max-height:30px}
.learn-art.live{background:var(--grad);border:0;color:var(--on-grad);box-shadow:var(--glow)}
.learn-q>summary .learn-art.live{background:var(--grad);border:0}
.learn-art.live .i{width:24px;height:24px}
.more-chev{color:var(--brand-ink)}
.uses li{border-color:var(--line-2)}
.uses .i{color:var(--brand-ink)}

/* business & API: service cards */
.biz-grid{gap:18px}
.svc{padding:30px;border-radius:22px;border-color:var(--line);box-shadow:var(--e2);transition:border-color .2s,transform .2s}
.svc:hover{border-color:var(--brand-edge);transform:translateY(-3px)}
.svc .ic{width:54px;height:54px;border-radius:15px;background:var(--grad);color:var(--on-grad);box-shadow:var(--glow)}
.svc h3{font-size:21px}
.ticks .i{color:var(--brand-ink)}
.soon{border-radius:20px;border-color:var(--line-2);background:#fff}
.soon-h{border-color:var(--brand-edge);color:var(--brand-ink)}
.soon-list .ic{color:var(--brand-ink);border-color:var(--line-2)}

/* final call to action: bigodiamond gradient band with the brand Dino */
.final{padding:24px 0 96px;background:var(--bg)}
.final-band,html[dir=rtl] .final-band{color:var(--on-grad);border-radius:28px;padding:52px 56px;overflow:visible;
  background:radial-gradient(60% 120% at 88% 0%,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),linear-gradient(120deg,#FF2E93 0%,#B64DFF 100%);
  box-shadow:0 40px 80px -46px rgba(200,20,120,.9)}
html[dir=rtl] .final-band{background:radial-gradient(60% 120% at 12% 0%,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),linear-gradient(240deg,#FF2E93 0%,#B64DFF 100%)}
.final h2{color:var(--on-grad);font-size:42px}
.final p{color:#3A0A28;font-size:17.5px}
.btn-white{background:var(--navy);color:#fff;box-shadow:0 14px 28px -14px rgba(15,23,42,.7)}
.btn-white:hover{background:#1B2640}
.btn-onblue{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.7);color:var(--on-grad)}
.btn-onblue:hover{background:rgba(255,255,255,.42)}
.final-dino{width:330px;aspect-ratio:900/845;margin:-120px -18px -26px 0;filter:drop-shadow(0 22px 26px rgba(3,36,48,.28))}
html[dir=rtl] .final-dino{margin:-120px 0 -26px -18px}

/* ---------- footer (Phoenix): dark, on bigodiamond's navy ---------- */
.site-footer{background:var(--navy);border-top:0;color:#CBD5E1}
.site-footer .logo img{filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.ft-brand p,.wa-num,.ft-rights{color:#94A3B8}
.ft-col h2{font-family:var(--font);font-weight:700;color:#fff;font-size:15px}
.ft-col a,.ft-lang{color:#A9B6C8}
.ft-col a:hover,.ft-lang:hover{color:#FFC2E0}
.ft-lang[aria-current]{color:#fff}
.ft-bottom{border-top-color:var(--navy-line)}
.ft-market{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#E2E8F0}
.ft-market:hover{border-color:rgba(255,46,147,.6)}
.ft-market .ch{color:#5EE6E6}
.ft-legal a{color:#A9B6C8}
.ft-legal a:hover{color:#FFC2E0}
.wa-btn.btn-soft{background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.35);color:#7CF0A8}
.wa-btn.btn-soft:hover{background:rgba(37,211,102,.2)}
.site-footer .wa-num bdi{color:#fff;font-weight:700}

/* ---------- other pages: same heads, cards and accents ---------- */
.page-head h1,.acc-head h1,.api-hero h1,.legal-doc h1{font-family:var(--font-d);font-weight:800;letter-spacing:-.01em}
.acc-tabs a[aria-current]{color:var(--ink)}
.summary,.co-card,.st-card,.acc-card{border-radius:20px}

/* ---------- responsive ---------- */
@media (min-width:1600px){ .hero{--t-hero:62px} }
@media (max-width:1279px){ .hero{--t-hero:52px} }
@media (max-width:1099px){ .hero{--t-hero:46px} .px-steps,.why-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:960px){
  .hero{--t-hero:42px}
  .hero-grid{padding-top:30px}
  .hh-art{width:min(42vw,250px);height:220px}
  .hh-art .px-art{position:absolute;inset:0}
  .hh-art .px-fig{width:100%}
  .hh-art .px-orbit{width:110%}
  .hh-art .px-gem.g1{width:22px}.hh-art .px-gem.g2{width:16px}
  .hh-art .px-spark{font-size:11px!important}
  .pay-grid{grid-template-columns:minmax(0,1fr)}
  .final-dino{width:260px;margin:-90px -10px -20px 0}
  :root{--t-h2:34px}
}
@media (max-width:720px){
  .final-band,html[dir=rtl] .final-band{padding:36px 26px 0;overflow:hidden;background:linear-gradient(180deg,#FF2E93 0%,#B64DFF 100%)}
  .final-dino,html[dir=rtl] .final-dino{width:240px;margin:8px auto -12px}
  .final h2{font-size:32px}
}
@media (max-width:640px){
  :root{--t-h2:28px}
  .hero{--t-hero:31px}
  .hero-badge{height:30px;font-size:12px;padding:0 12px 0 10px;margin-bottom:12px}
  .hh-art{width:46vw;height:188px}
  .hero-lead{font-size:15.5px}
  .sec,#packages,.sec-pay,.sec.sec-learn{padding-block:60px}
  .px-head{margin-bottom:30px}
  .px-head > p{font-size:15.5px}
  .px-steps,.why-list{grid-template-columns:minmax(0,1fr);gap:12px}
  .px-steps li,.why-list li{padding:20px 18px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start}
  .px-steps .n,.why-list .ic{grid-row:span 2;margin:0}
  .px-steps h3,.why-list h3{font-size:17px;margin-bottom:4px}
  .pkg .amt{font-size:24px}
  .proof .ic{width:34px;height:34px;border-radius:10px}
  .learn-q{padding:4px 16px}
  .learn-q[open]{padding-bottom:16px}
  .svc{padding:22px}
  .hdr-row{height:66px;gap:12px}
  .locale,.icon-btn,.acct-btn{height:40px}
}
@media (max-width:374px){ .hero{--t-hero:28px} .hh-art{height:170px} }

/* sign-in: the brand Dino */
.si-art{width:150px;margin:-10px auto 6px;filter:drop-shadow(0 16px 18px rgba(15,23,42,.14))}
.si-card.has-sum .si-art{width:120px}

/* phones and tablets: the headline + Dino are the hero on their own (a full-width band); the lead, the BIGO ID form
   and the trust strip start below it on the page background */
@media (max-width:960px){
  .hero,.hero-atmo{background:var(--bg)}
  .hero-grid{padding-top:0;grid-template-columns:minmax(0,1fr)}
  .hero-main{padding-top:0;max-width:none}
  .hero-main > :not(.hero-head){max-width:560px}
  .hero-head{box-sizing:border-box;width:100vw;max-width:none;margin-inline:-24px 0;padding:30px 24px 26px;grid-template-areas:"text art";align-items:center;
    background:radial-gradient(70% 90% at 82% 45%,rgba(255,46,147,.22),rgba(255,46,147,0) 70%),radial-gradient(50% 70% at 100% 0%,rgba(155,77,255,.18),rgba(155,77,255,0) 70%),linear-gradient(180deg,#FFFFFF 0%,#FFF2F8 100%);
    border-bottom:1px solid var(--line);border-radius:0 0 28px 28px;box-shadow:0 18px 36px -30px rgba(15,23,42,.35)}
  html[dir=rtl] .hero-head{background:radial-gradient(70% 90% at 18% 45%,rgba(255,46,147,.22),rgba(255,46,147,0) 70%),radial-gradient(50% 70% at 0% 0%,rgba(155,77,255,.18),rgba(155,77,255,0) 70%),linear-gradient(180deg,#FFFFFF 0%,#FFF2F8 100%)}
  .hero-lead{margin-top:24px}
}
@media (max-width:640px){
  .hero-head{margin-inline:-16px 0;padding:22px 16px 20px;grid-template-areas:"h1 art";border-radius:0 0 24px 24px}
  .hh-art{height:200px}
  .hero-lead{margin-top:20px}
}
@media (max-width:374px){ .hh-art{height:176px} }

/* ---------- card payment (Stripe Embedded Checkout): order summary beside Stripe's form ---------- */
.sp-page{padding-top:26px;padding-bottom:64px}
.sp-page .crumbs a{font-size:14px;font-weight:700;color:var(--brand-ink);text-decoration:none}
.sp-page .crumbs a::before{content:"←";margin-inline-end:6px}
html[dir=rtl] .sp-page .crumbs a::before{content:"→"}
.sp-h{font-size:34px;line-height:1.2;margin:10px 0 22px;letter-spacing:-.01em}
.sp-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:24px;align-items:start}
.sp-sum{position:sticky;top:96px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--e2)}
.sp-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.sp-row .k,.sp-total .k{color:var(--muted)}
.sp-row .v{text-align:end;min-width:0}
.sp-who .v b{display:block;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-who .v small{color:var(--muted);font-size:13px}
.sp-dia{display:inline-flex;align-items:center;gap:6px}
.sp-dia b{font-family:var(--font-d);font-size:18px}
.sp-total{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:16px 0 6px}
.sp-total .v{text-align:end}
.sp-total b{display:block;font-family:var(--font-d);font-weight:800;font-size:30px;line-height:1.1;color:var(--ink)}
.sp-total small{color:var(--muted);font-size:13px}
.sp-note{display:flex;gap:9px;align-items:flex-start;margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
.sp-note .i{width:16px;height:16px;flex:none;margin-top:2px;color:var(--brand-ink)}
.sp-pay{position:relative;min-height:420px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--e2)}
.sp-frame{min-height:400px}
.sp-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:14.5px}
.sp-loading .spin{display:block;width:20px;height:20px;border-width:2.5px;color:var(--brand-ink)}
.sp-err{display:flex;gap:12px;align-items:flex-start;margin:18px;padding:16px 18px;border:1px solid var(--danger-edge);background:var(--danger-soft);border-radius:16px;color:var(--ink)}
.sp-err > .i{width:20px;height:20px;color:var(--danger);flex:none;margin-top:2px}
.sp-err p{margin:4px 0 12px;color:var(--ink-2);font-size:14px}
.sp-acts{display:flex;flex-wrap:wrap;gap:8px}
.sp-mock{margin:18px;padding:22px;border:1.5px dashed var(--line-2);border-radius:18px;text-align:center}
.sp-mock p{margin:6px 0 16px;color:var(--muted)}
.sp-err:not([hidden]) ~ .sp-frame,.sp-mock:not([hidden]) ~ .sp-frame{display:none}
@media (max-width:860px){
  .sp-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .sp-sum{position:static;padding:18px}
  .sp-h{font-size:28px;margin-bottom:16px}
  .sp-pay{padding:4px;border-radius:18px}
}

/* sign-in error line */
.si-note.si-err{color:var(--danger);font-weight:700}

/* ---------- add funds (wallet top-up) + header currency ---------- */
.tp-box .tp-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:4px 0 16px}
.tp-box .pick .in{padding:14px 6px}
.tp-box .pick .amt{font-size:19px}
.tp-custom{display:block;margin-bottom:6px}
.tp-custom .k{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px;color:var(--ink-2)}
.tp-custom .cur{font-weight:800;color:var(--muted)}
.cu-help.is-err{color:var(--danger);font-weight:700}
.tp-h{font-size:16px;margin:22px 0 10px}
.tp-methods{display:grid;gap:10px}
.tp-m{position:relative;display:block;cursor:pointer}
.tp-m input{position:absolute;opacity:0;pointer-events:none}
.tp-m .card{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--line);border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s}
.tp-m .logo{width:54px;height:42px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;flex:none}
.tp-m .logo img{max-width:44px;max-height:30px}
.tp-m .body{display:grid;gap:2px;min-width:0}
.tp-m .body small{color:var(--muted)}
.tp-m input:checked + .card{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring);background:linear-gradient(180deg,rgba(255,46,147,.07),#fff 70%)}
.tp-m input:focus-visible + .card{outline:2.5px solid var(--brand-ink);outline-offset:2px}
.tp-sum{margin:18px 0 14px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.tp-sum .s-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14.5px}
.tp-sum .s-row .k{color:var(--muted)}
.tp-sum .s-total{display:flex;justify-content:space-between;align-items:flex-end;padding-top:10px;margin-top:6px;border-top:1px solid var(--line)}
.tp-sum .s-total .v{font-family:var(--font-d);font-weight:800;font-size:26px;text-align:end}
.tp-sum .s-total .x{display:block;color:var(--muted);font-size:12.5px;text-align:end}
.tp-none{color:var(--muted)}
.locale .hdr-ccy{color:var(--brand-ink)}
@media (max-width:640px){ .tp-box .tp-presets{grid-template-columns:repeat(2,minmax(0,1fr))} .locale .hdr-ccy{display:none} }

/* ---------- payment page: card form / Apple Pay / Google Pay (Stripe Elements) ---------- */
.sp-body{padding:18px 18px 16px}
.sp-brands{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-weight:700;color:var(--ink-2)}
.sp-brands img{width:40px;height:40px;object-fit:contain}
.sp-pe{min-height:150px}
.sp-paybtn{margin-top:18px}
.sp-hint{margin:2px 0 16px;color:var(--muted);font-size:15px;text-align:center}
.sp-ece{min-height:52px;max-width:420px;margin:0 auto}
.sp-na{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line-2);border-radius:14px;background:var(--bg)}
.sp-na > .i{width:20px;height:20px;color:var(--brand-ink);flex:none;margin-top:2px}
.sp-na p{margin:10px 0 0}
.sp-stripe-total{margin:14px 0 0;font-size:13px;color:var(--muted);text-align:center}
.sp-stripe-total b{color:var(--ink)}
.sp-body .pay-err{margin-top:12px}

/* ---------- final call to action (2026-10-10): navy band, no character; the worldwide ways to pay beside it ---------- */
.final{padding:24px 0 96px;background:var(--bg)}
.final-band,html[dir=rtl] .final-band{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:40px;
  padding:52px 56px;border-radius:28px;overflow:hidden;color:#fff;position:relative;
  background:radial-gradient(60% 90% at 100% 0%,rgba(255,46,147,.28),rgba(255,46,147,0) 60%),radial-gradient(50% 80% at 0% 100%,rgba(155,77,255,.22),rgba(155,77,255,0) 60%),var(--navy);
  box-shadow:0 40px 80px -46px rgba(15,23,42,.75)}
html[dir=rtl] .final-band{background:radial-gradient(60% 90% at 0% 0%,rgba(255,46,147,.28),rgba(255,46,147,0) 60%),radial-gradient(50% 80% at 100% 100%,rgba(155,77,255,.22),rgba(155,77,255,0) 60%),var(--navy)}
.final-band::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.08);pointer-events:none}
.final h2{color:#fff;font-size:42px;margin:0 0 12px}
.final p{color:#B8C4D6;font-size:17.5px;margin:0 0 26px;max-width:46ch}
.final-acts{display:flex;flex-wrap:wrap;gap:12px}
.final .btn-white{background:var(--grad);color:var(--on-grad);box-shadow:var(--glow)}
.final .btn-white:hover{background:linear-gradient(135deg,#0AD3D3 0%,#3BB1FF 100%)}
.final .btn-onblue{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff}
.final .btn-onblue:hover{background:rgba(255,255,255,.12)}
.final-pay{position:relative;padding:24px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px)}
.fp-h{display:flex;align-items:center;gap:8px;margin:0 0 16px !important;font-size:14px !important;font-weight:700;color:#E2E8F0 !important}
.fp-h .i{width:17px;height:17px;color:#5EE6E6}
.fp-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fp-logos li{height:54px;border-radius:12px;background:#fff;display:grid;place-items:center;box-shadow:0 8px 18px -12px rgba(0,0,0,.6)}
.fp-logos img{max-width:78%;max-height:34px;width:auto;height:auto}
.fp-note{margin:14px 0 0 !important;font-size:13px !important;color:#94A3B8 !important}
@media (max-width:960px){ .final-band,html[dir=rtl] .final-band{grid-template-columns:minmax(0,1fr);gap:28px;padding:40px 32px} }
@media (max-width:640px){
  .final-band,html[dir=rtl] .final-band{padding:32px 20px;border-radius:24px}
  .final h2{font-size:30px}
  .final p{font-size:16px}
  .final-acts .btn{flex:1 1 100%}
  .fp-logos li{height:48px}
}

/* ---------- footer: ways to pay, in three groups ---------- */
.ft-pays{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:22px 32px;margin-top:40px;padding-top:28px;border-top:1px solid var(--navy-line)}
.ft-pg-h{margin:0 0 12px;font-size:13px;font-weight:700;color:#fff;letter-spacing:.01em}
.ft-pg-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ft-pg-l li{height:36px;min-width:58px;padding:0 10px;border-radius:9px;background:#fff;display:grid;place-items:center}
.ft-pg-l img{max-height:20px;max-width:78px;width:auto;height:auto}
.site-footer .ft-bottom{margin-top:26px}
@media (max-width:960px){ .ft-pays{grid-template-columns:minmax(0,1fr)} }
/* five logos: one row where it fits, centred rows on phones (no empty slot) */
.fp-logos{display:flex;flex-wrap:wrap;justify-content:center}
.fp-logos li{flex:1 1 0;min-width:76px}
@media (max-width:1100px){ .fp-logos li{flex:0 0 calc((100% - 20px) / 3)} }
@media (min-width:1101px){ .fp-logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} .fp-logos li{min-width:0;height:50px} .fp-logos img{max-width:86%} }

/* ---------- header (2026-10-10): the account is a user icon; the menu is two lines that turn into an X ---------- */
.av.av-ic{background:rgba(255,46,147,.12);color:var(--brand-ink);box-shadow:inset 0 0 0 1px rgba(255,46,147,.25)}
.av.av-ic .i{width:19px;height:19px;stroke-width:2}
.av.av-ic.lg .i{width:23px;height:23px}
.acct-btn{padding:0 10px 0 5px}
html[dir=rtl] .acct-btn{padding:0 5px 0 10px}
.acct-btn .av.av-ic{width:32px;height:32px;border-radius:9px}
.acct-btn[aria-expanded=true] .av.av-ic{background:var(--grad);color:var(--on-grad);box-shadow:none}
.burger{position:relative;display:block;width:20px;height:14px}
.burger i{position:absolute;inset-inline-start:0;height:2.2px;border-radius:2px;background:currentColor;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),width .32s cubic-bezier(.2,.8,.2,1),top .32s cubic-bezier(.2,.8,.2,1)}
.burger i:first-child{top:2px;width:20px}
.burger i:last-child{top:10px;width:13px}
.menu-btn:hover .burger i:last-child{width:20px}
.menu-btn[aria-expanded=true]{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 10px 22px -12px rgba(15,23,42,.6)}
.menu-btn[aria-expanded=true] .burger i{top:6px;width:20px}
.menu-btn[aria-expanded=true] .burger i:first-child{transform:rotate(45deg)}
.menu-btn[aria-expanded=true] .burger i:last-child{transform:rotate(-45deg)}

/* ---------- side drawer (up to 1100px): slides in under the header from the side the button is on ---------- */
.m-scrim{position:fixed;inset:var(--hdr-b,66px) 0 0 0;z-index:38;background:rgba(15,23,42,.42);opacity:0;transition:opacity .3s ease;-webkit-tap-highlight-color:transparent}
[data-nav-open] .m-scrim{opacity:1}
.m-nav{position:fixed;top:var(--hdr-b,66px);bottom:0;inset-inline-end:0;z-index:39;width:min(380px,88vw);max-height:none;
  background:#fff;border-top:0;border-inline-start:1px solid var(--line);box-shadow:-30px 0 60px -30px rgba(15,23,42,.45);
  overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);animation:none!important}
html[dir=rtl] .m-nav{transform:translateX(-100%);box-shadow:30px 0 60px -30px rgba(15,23,42,.45)}
[data-nav-open] .m-nav,html[dir=rtl][data-nav-open] .m-nav{transform:none}
[data-nav-open],[data-nav-open] body{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .m-nav,.m-scrim,.burger i{transition:none} }
.m-in{display:flex;flex-direction:column;gap:16px;padding:18px 18px calc(24px + env(safe-area-inset-bottom))}
.m-sec{margin:0}
.m-top{padding:16px;border-radius:18px;background:linear-gradient(150deg,rgba(255,46,147,.10),rgba(155,77,255,.08));border:1px solid rgba(255,46,147,.18)}
.m-acct{display:flex;align-items:center;gap:12px;padding:0;background:none;border-radius:0}
.m-acct .av.av-ic{background:#fff;width:46px;height:46px;border-radius:14px}
.m-who{min-width:0}
.m-who b{display:block;font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-who small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-bal{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--navy);color:#fff;text-decoration:none}
.m-bal .k{font-size:13px;color:#B8C4D6}
.m-bal b{font-size:18px;font-weight:800}
.m-acct-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.m-acct-links a{display:flex;align-items:center;gap:8px;height:46px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600}
.m-acct-links a .i{width:18px;height:18px;color:var(--brand-ink);flex:none}
.m-acct-links a[aria-current]{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.m-guest .btn{height:50px}
.m-links{display:grid;gap:2px}
.m-links a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 10px;border:0;border-radius:12px;font-size:16px;font-weight:700;color:var(--ink);text-decoration:none;transition:background-color .15s}
.m-links a:hover,.m-links a:focus-visible{background:var(--bg)}
.m-links a[aria-current]{background:rgba(255,46,147,.10);color:var(--brand-ink)}
.m-links .mi{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--bg);color:var(--brand-ink)}
.m-links a[aria-current] .mi{background:var(--grad);color:var(--on-grad)}
.m-links .mi .i{width:18px;height:18px}
.m-links .mt{flex:1}
.m-links .mc{display:inline-flex;color:var(--faint)}
.m-links .mc .i{width:16px;height:16px}
html[dir=rtl] .m-links .mc .i{transform:scaleX(-1)}
.m-market{border:1px solid var(--line);border-radius:14px;padding:4px 12px}
.m-out{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:12px;color:var(--danger);font-weight:700;text-decoration:none}
.m-out:hover{background:var(--danger-soft)}
.m-out .i{width:18px;height:18px}

/* ---------- saved BIGO accounts (2026-10-10): a small card of tappable account chips ---------- */
.sv{margin:0 0 18px;padding:14px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,#fff,rgba(255,46,147,.05));box-shadow:0 1px 2px rgba(15,23,42,.04),0 18px 34px -30px rgba(15,23,42,.35)}
.sv-head{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.sv-ic{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:11px;background:rgba(255,46,147,.12);color:var(--brand-ink)}
.sv-ic .i{width:18px;height:18px}
.sv-ht{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.sv-t{font-size:14.5px;font-weight:800;color:var(--ink)}
.sv-where{font-size:12.5px;color:var(--muted)}
.sv-edit{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;height:36px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.sv-edit .i{width:15px;height:15px}
.sv-edit:hover{border-color:var(--brand);color:var(--brand-ink)}
.sv-edit[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.sv-edit:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px}
.sv-list{gap:10px;padding:3px 3px 4px;scroll-snap-type:x proximity;scrollbar-width:none}
.sv-list::-webkit-scrollbar{display:none}
.sv-list li{scroll-snap-align:start}
.sv-chip{gap:12px;min-height:62px;max-width:260px;padding:8px 12px 8px 8px;border:1.5px solid var(--line);border-radius:16px;background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 24px -20px rgba(15,23,42,.4);transition:border-color .18s,box-shadow .18s,transform .18s,background-color .18s}
html[dir=rtl] .sv-chip{padding:8px 8px 8px 12px}
.sv-chip:hover{border-color:rgba(255,46,147,.6);transform:translateY(-1px);box-shadow:0 1px 2px rgba(15,23,42,.04),0 16px 28px -20px rgba(15,23,42,.45)}
.sv-chip:active{transform:none}
.sv-chip:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px}
.sv-chip[aria-pressed=true]{border-color:var(--brand);background:linear-gradient(180deg,rgba(255,46,147,.08),#fff);box-shadow:0 0 0 3px var(--ring)}
.sv-av{position:relative;flex:none;padding:2px;border-radius:50%;background:var(--grad);line-height:0}
.sv-av > .av-pic,.sv-av > .av-svg{box-shadow:0 0 0 2px #fff;border-radius:50%}
.sv-tick{position:absolute;bottom:-3px;inset-inline-end:-3px;width:19px;height:19px;border-radius:50%;display:none;place-items:center;background:var(--good);color:#fff;border:2px solid #fff}
.sv-tick .i{width:11px;height:11px;stroke-width:3}
.sv-chip[aria-pressed=true] .sv-tick{display:grid}
.sv-tx{gap:2px}
.sv-tx b{font-size:15px;font-weight:800}
.sv-tx small{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.sv-go{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--bg);color:var(--brand-ink);margin-inline-start:4px;transition:background-color .18s,color .18s}
.sv-go .i{width:15px;height:15px}
html[dir=rtl] .sv-go .i{transform:scaleX(-1)}
.sv-chip:hover .sv-go,.sv-chip[aria-pressed=true] .sv-go{background:var(--grad);color:var(--on-grad)}
.sv.is-edit .sv-chip{padding-inline-end:50px}
.sv.is-edit .sv-chip:hover{transform:none}

/* the BIGO ID field: a leading icon so it reads as the "who" field at a glance */
.rx-lead{position:absolute;top:50%;inset-inline-start:14px;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(255,46,147,.12);color:var(--brand-ink);pointer-events:none;z-index:1;transition:background-color .2s,color .2s}
.rx-lead .i{width:18px;height:18px}
/* the input itself is always ltr (IDs), so its sides are set physically */
.rx-input{padding-left:60px}
html[dir=rtl] .rx-input{padding-left:54px;padding-right:60px}
.rx-field:focus-within .rx-lead,.rx[data-state=ok] .rx-lead{background:var(--grad);color:var(--on-grad)}
@media (max-width:640px){
  .sv{padding:12px;border-radius:16px}
  .sv-chip{min-height:58px}
  .rx-lead{inset-inline-start:11px;width:32px;height:32px}
  .rx-input{padding-left:52px}
  html[dir=rtl] .rx-input{padding-left:54px;padding-right:52px}
}
.m-acct-links a{line-height:1.2}
.m-market summary .m-h{line-height:1.25}

/* ---------- 2026-10-10 (2): plain account button, hero steps, ID hint ---------- */
.acct-btn .av.av-ic,.acct-btn[aria-expanded=true] .av.av-ic{background:none;box-shadow:none;color:var(--ink);width:24px;height:24px;border-radius:0}
.acct-btn .av.av-ic .i{width:20px;height:20px;stroke-width:1.8}
.acct-btn{padding:0 10px 0 12px;gap:4px;color:var(--ink)}
html[dir=rtl] .acct-btn{padding:0 12px 0 10px}
@media (max-width:640px){ .acct-btn,html[dir=rtl] .acct-btn{width:40px;padding:0;justify-content:center} }
.hero-steps{list-style:none;margin:18px 0 0;padding:0;display:flex;align-items:center;gap:8px;max-width:500px}
.hero-steps li{display:flex;align-items:center;gap:8px;flex:none;font-size:14px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.hero-steps li + li::before{content:"";flex:none;width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,46,147,.55),rgba(155,77,255,.35))}
html[dir=rtl] .hero-steps li + li::before{background:linear-gradient(270deg,rgba(255,46,147,.55),rgba(155,77,255,.35))}
.hero-steps .n{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:50%;background:#fff;border:1.5px solid rgba(255,46,147,.5);color:var(--brand-ink);font-size:12.5px;font-weight:800;line-height:1}
.hero-steps li:first-child .n{background:var(--grad);border-color:transparent;color:var(--on-grad)}
.rx-msg{font-size:13px;color:var(--muted);margin-top:10px;gap:4px 6px}
.rx-mi .i{width:15px;height:15px;margin-top:2px}
.rx[data-state=none] .rx-mi,.rx:not([data-state]) .rx-mi{color:var(--brand-ink)}
@media (max-width:960px){ .hero-steps{margin-top:22px} }
@media (max-width:374px){ .hero-steps{gap:6px} .hero-steps li{font-size:12.5px;gap:6px} .hero-steps li + li::before{width:12px} }

/* ==========================================================================
   2026-10-10 (3): worldwide + design refresh
   Livelier colours and a real shadow on surfaces; the new logo; the worldwide country list; payment tiles and cards;
   "add a method from another country"; the country hero (14 themed countries); the first-visit guide.
   ========================================================================== */
:root{
  --bg:#F2F6FB; --bg-2:#E9F0F8; --line:#E0E8F2; --line-2:#CBD8E7;
  --ink:#0B1324; --ink-2:#18243A; --muted:#4E5F78; --faint:#64748B;
  --brand:#FF2E93; --brand-2:#9B4DFF; --brand-3:#FF7A1F; --brand-deep:#8A1FD6; --brand-ink:#B01271;
  --brand-soft:rgba(255,46,147,.14); --brand-edge:rgba(255,46,147,.42);
  --grad:linear-gradient(120deg,#9B4DFF 0%,#FF2E93 50%,#FF7A1F 100%);
  --grad-text:linear-gradient(90deg,#C01A7E 0%,#8A1FD6 100%);
  --glow:0 16px 34px -12px rgba(255,46,147,.75),0 8px 16px -8px rgba(138,31,214,.55);
  --ring:rgba(255,46,147,.32);
  --navy:#0B1324; --navy-2:#131D33;
  --e1:0 1px 2px rgba(11,19,36,.06),0 6px 16px -10px rgba(11,19,36,.16);
  --e2:0 2px 4px rgba(11,19,36,.05),0 18px 40px -20px rgba(11,19,36,.30);
  --e3:0 4px 8px rgba(11,19,36,.06),0 30px 70px -28px rgba(11,19,36,.38);
}
body{background:var(--bg)}
.btn-cta{background:var(--grad);color:#022A33}
.btn-cta:hover{background:linear-gradient(135deg,#0BDADA 0%,#3399FF 100%)}
/* surfaces carry a shadow now (they read as raised, not printed) */
.box,.pkg .card,.px-steps > *,.why-list > *,.svc,.side-card,.sum-card,.summary,.sp-card,.st-card,.acc-grid .box,.biz-card,.faq-item,.learn details{box-shadow:var(--e1)}
.box:hover,.pkg .card:hover{box-shadow:var(--e2)}
.site-header{box-shadow:0 1px 0 var(--line),0 10px 30px -24px rgba(11,19,36,.35)}

/* ---------- logo ---------- */
.bd-logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;flex:none;direction:ltr}
.bd-mark{width:34px;height:32px;flex:none;filter:drop-shadow(0 5px 8px rgba(224,134,0,.38))}
.bd-word{display:inline-flex;align-items:baseline;gap:5px;font-family:"Cairo Display",var(--font-d);font-weight:800;font-size:21px;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.bd-word b{color:var(--ink);font-weight:800;letter-spacing:.02em}
.bd-word span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.site-footer .bd-word b{color:#fff}
.site-footer .bd-word span{background:linear-gradient(90deg,#3BE3E3,#5CB2FF);-webkit-background-clip:text;background-clip:text}
@media (max-width:640px){ .bd-mark{width:30px;height:28px} .bd-word{font-size:18px;gap:4px} }
@media (max-width:374px){ .bd-word span{display:none} }

/* ---------- country list: nearby first, all on demand ---------- */
.mk-item .mk-n{display:flex;flex-direction:column;min-width:0;flex:1}
.mk-item .mk-n > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-loc{font-size:11.5px;font-weight:700;color:var(--brand-ink);line-height:1.3}
.mk-cur{flex:none;font-size:11.5px;font-weight:700;color:var(--ink-2);background:#fff;border:1px solid var(--line-2);border-radius:7px;padding:2px 6px;font-variant-numeric:tabular-nums}
.mk-cur i{font-style:normal;font-weight:500;color:var(--faint)}
.mk-item .ck{flex:none}
.mk-item:not([aria-current]) .ck{display:none}
.mk-more{display:flex;align-items:center;gap:9px;width:100%;margin:8px 0 2px;padding:11px 12px;border:1.5px dashed var(--line-2);border-radius:12px;background:#fff;color:var(--brand-ink);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;transition:border-color .15s,background-color .15s}
.mk-more:hover{border-color:var(--brand);background:var(--brand-soft)}
.mk-more .i{width:18px;height:18px}
.mk-more .n{margin-inline-start:auto;font-size:12px;color:var(--muted);background:var(--bg);border-radius:99px;padding:2px 9px}
.mk-more.is-loading{opacity:.6;pointer-events:none}
.mk-all{display:grid;gap:1px}
.mk-saved{display:flex;gap:7px;align-items:flex-start;margin:6px 4px 2px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.mk-saved .i{width:14px;height:14px;flex:none;margin-top:2px;color:var(--brand-ink)}
.lp-lang[data-local],.m-lang[data-local]{border-color:var(--brand-edge)}
.m-help{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.m-help .btn{height:46px;padding:0 10px}

/* ---------- payment methods on the home page: tiles ---------- */
.pay-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:12px}
.pay-list > .pay-g,.pay-list > .pay-none,.pay-list > .pay-off{grid-column:1/-1}
.pay-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:16px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,#fff 0%,#FAFCFF 100%);box-shadow:var(--e1);transition:transform .18s,box-shadow .18s,border-color .18s}
.pay-row:hover{transform:translateY(-2px);box-shadow:var(--e2);border-color:var(--brand-edge)}
.pay-row .logo{width:56px;height:56px;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:0 8px 16px -12px rgba(11,19,36,.45)}
.pay-row .logo img{max-width:44px;max-height:30px}
.pay-row .logo.wallet{border:0;background:none;box-shadow:0 10px 18px -10px rgba(138,31,214,.6)}
.pay-row .logo.wallet img{max-width:100%;max-height:100%;width:56px;height:56px}
.pay-row .name{font-size:16px;font-weight:800;color:var(--ink)}
.pay-row .stat{font-size:13.5px;color:var(--muted);margin-top:2px}
.pay-row .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.pay-row .meta .ccys{margin:0}
.pay-row .tag{gap:5px;background:var(--brand-soft);color:var(--brand-ink);font-weight:700}
.pay-row .tag .i{width:13px;height:13px}
.pay-row .link{font-size:13.5px;font-weight:700}
@media (max-width:640px){ .pay-row .tag,.pay-row .link{grid-column:auto;justify-self:auto} }

/* ---------- payment methods at checkout: selectable cards ---------- */
.pm .card{padding:14px 16px;border-radius:16px;border:1.5px solid var(--line);background:#fff;box-shadow:var(--e1);transition:border-color .15s,box-shadow .18s,transform .18s,background-color .15s}
.pm .card:hover{border-color:var(--brand-edge);box-shadow:var(--e2);transform:translateY(-1px)}
.pm .logo{width:52px;height:52px;border-radius:14px;box-shadow:0 8px 16px -12px rgba(11,19,36,.45)}
.pm .logo.wallet{border:0;background:none}
.pm .logo.wallet img{width:52px;height:52px;max-width:none;max-height:none}
.pm .name{font-weight:800}
.pm .rd{width:24px;height:24px;border-width:2px;align-self:center}
.pm input:checked + .card{border:2px solid var(--brand);border-bottom-width:0;transform:none;box-shadow:none;background:linear-gradient(180deg,rgba(255,46,147,.10),#fff 70%)}
.pm input:checked ~ .more{border-color:var(--brand);box-shadow:0 18px 30px -24px rgba(11,19,36,.4)}
.pm input:checked + .card .rd{background:var(--grad);border-color:transparent;box-shadow:0 6px 12px -6px rgba(255,46,147,.8)}
.m-title{font-size:13.5px;font-weight:800;color:var(--ink-2)}
.m-title .ic{color:var(--brand-ink)}
.am-open{display:flex;align-items:center;gap:10px;width:100%;margin-top:14px;padding:14px 16px;border:1.5px dashed var(--line-2);border-radius:16px;background:#fff;color:var(--brand-ink);font:inherit;font-size:15px;font-weight:800;cursor:pointer;text-align:start;transition:border-color .15s,background-color .15s,box-shadow .15s}
.am-open:hover{border-color:var(--brand);background:rgba(255,46,147,.06);box-shadow:var(--e1)}
.am-open > .i{width:20px;height:20px;flex:none}
.am-lg{display:flex;gap:6px;margin-inline-start:auto}
.am-lg img{height:22px;width:auto;max-width:56px;object-fit:contain}
.am-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0 0;padding-top:10px;border-top:1px dashed var(--line);font-size:13px;color:var(--muted)}
.am-note .i{width:14px;height:14px;color:var(--brand-ink)}
.am-rm{margin-inline-start:auto;color:var(--danger);font-size:13px;font-weight:700}

/* the "add a method" sheet: a centred dialog on wide screens, a bottom sheet on phones */
.am-on,.am-on body{overflow:hidden}
.am-wrap{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px}
.am-scrim{position:absolute;inset:0;background:rgba(11,19,36,.5);opacity:0;transition:opacity .25s}
.am-sheet{position:relative;width:min(480px,100%);max-height:min(640px,calc(100vh - 32px));overflow:auto;padding:20px;border-radius:22px;background:#fff;box-shadow:var(--e3);transform:translateY(14px) scale(.98);opacity:0;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s}
.am-wrap.is-in .am-scrim{opacity:1}
.am-wrap.is-in .am-sheet{transform:none;opacity:1}
.am-head{display:flex;align-items:center;gap:12px}
.am-ic{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:13px;background:var(--grad);color:#022A33}
.am-ic .i{width:22px;height:22px}
.am-head h2{flex:1;margin:0;font-size:19px;line-height:1.3}
.am-x{width:40px;height:40px;flex:none;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:12px;background:#fff;color:var(--ink);cursor:pointer}
.am-x .i{width:18px;height:18px}
.am-lead{margin:12px 0 16px;color:var(--muted);font-size:14.5px}
.am-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.am-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:16px;box-shadow:var(--e1)}
.am-item .logo{width:50px;height:50px;flex:none;display:grid;place-items:center;border-radius:14px;border:1px solid var(--line);background:#fff}
.am-item .logo img{max-width:40px;max-height:28px;object-fit:contain}
.am-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.am-b b{font-size:15.5px}
.am-b small{display:flex;flex-wrap:wrap;align-items:center;gap:5px;color:var(--muted);font-size:12.5px}
.am-b .flag{width:18px;height:11px;border-radius:2px}
.am-item .btn{flex:none}
.am-item .btn .i{width:16px;height:16px}
.am-none{color:var(--muted)}
.am-err{margin:12px 0 0;color:var(--danger);font-weight:600}
@media (max-width:640px){
  .am-wrap{place-items:end stretch;padding:0}
  .am-sheet{width:100%;border-radius:22px 22px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom));transform:translateY(100%)}
}
@media (prefers-reduced-motion:reduce){ .am-sheet,.am-scrim{transition:none} }

/* ---------- the hero follows the country ---------- */
.hero-cc{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;padding:7px 12px 7px 9px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--e1);font-size:14px;font-weight:700;color:var(--ink-2)}
html[dir=rtl] .hero-cc{padding:7px 9px 7px 12px}
.hero-cc .flag{width:24px;height:15px;border-radius:3px;box-shadow:0 0 0 1px rgba(11,19,36,.08)}
.hc-cur{font-size:12px;font-weight:800;color:var(--brand-ink);background:var(--brand-soft);border-radius:99px;padding:2px 8px}
.hc-pay{display:inline-flex;gap:6px;padding-inline-start:8px;border-inline-start:1px solid var(--line)}
.hc-pay img{height:18px;width:auto;max-width:54px;object-fit:contain}
/* the fourteen themed countries: flag ribbon, regional pattern in the flag's colours, a tinted glow behind the Dino */
.hero-themed{position:relative}
.hero-themed::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;z-index:2;background:linear-gradient(90deg,var(--fc1) 0 33%,#fff 33% 34%,var(--fc2) 34% 67%,#fff 67% 68%,var(--fc1) 68%)}
.hero-themed .hero-atmo{opacity:1;background:radial-gradient(60% 70% at 85% 30%,color-mix(in srgb,var(--fc1) 16%,transparent),transparent 70%),radial-gradient(50% 60% at 10% 90%,color-mix(in srgb,var(--fc2) 12%,transparent),transparent 70%)}
.hero-themed .hero-atmo::after{content:"";position:absolute;inset:0;opacity:.16;background:linear-gradient(135deg,var(--fc1),var(--fc2));
  -webkit-mask:var(--pat) 0 0/var(--pat-s,56px) repeat,linear-gradient(#000,#000);mask:var(--pat) 0 0/var(--pat-s,56px) repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect}
.hero-themed .hero-atmo::after{-webkit-mask-image:var(--pat),radial-gradient(70% 90% at 80% 40%,#000 25%,transparent 75%);mask-image:var(--pat),radial-gradient(70% 90% at 80% 40%,#000 25%,transparent 75%);
  -webkit-mask-size:var(--pat-s,56px),100% 100%;mask-size:var(--pat-s,56px),100% 100%;-webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat}
.hero-atmo{position:absolute}
.hero[data-pattern=gulf]{--pat:url(/assets/dp/pat-gulf.svg);--pat-s:56px}
.hero[data-pattern=levant]{--pat:url(/assets/dp/pat-levant.svg);--pat-s:44px}
.hero[data-pattern=maghreb]{--pat:url(/assets/dp/pat-maghreb.svg);--pat-s:60px}
.hero[data-pattern=persia]{--pat:url(/assets/dp/pat-persia.svg);--pat-s:52px}
.hero-themed .hero-cc{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,var(--fc1),var(--fc2)) border-box;border:1.5px solid transparent}
.hero-themed .hc-t{color:var(--ink)}
.hero-themed .hc-cur{background:color-mix(in srgb,var(--fc1) 12%,#fff);color:color-mix(in srgb,var(--fc1) 70%,#0B1324)}
@media (max-width:960px){ .hero-cc{margin-bottom:12px;font-size:13px} }

/* ---------- first-visit guide ---------- */
.tour{position:fixed;inset:0;z-index:95;pointer-events:none}
.tour-hole{position:fixed;border-radius:16px;box-shadow:0 0 0 9999px rgba(11,19,36,.58),0 0 0 3px rgba(255,64,160,.9) inset;transition:all .35s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.tour-card{position:fixed;pointer-events:auto;padding:16px 16px 14px;border-radius:18px;background:#fff;box-shadow:var(--e3);transition:top .35s cubic-bezier(.2,.8,.2,1),left .35s cubic-bezier(.2,.8,.2,1)}
.tour-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tour-n{font-size:12px;font-weight:800;color:var(--brand-ink);background:var(--brand-soft);border-radius:99px;padding:3px 9px}
.tour-skip{font-size:13px;color:var(--muted)}
.tour-card h3{margin:10px 0 6px;font-size:18px;line-height:1.3}
.tour-card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.tour-dots{display:flex;gap:5px;margin:14px 0 0}
.tour-dots i{width:7px;height:7px;border-radius:99px;background:var(--line-2);transition:width .2s,background-color .2s}
.tour-dots i.on{width:20px;background:var(--grad)}
.tour-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.tour-acts .btn{min-width:88px;height:40px}
.tour-inv{position:fixed;z-index:85;inset-inline-start:16px;bottom:16px;width:min(380px,calc(100vw - 32px));display:flex;gap:12px;padding:16px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--e3);transform:translateY(20px);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s}
.tour-inv.is-in{transform:none;opacity:1}
.ti-ic{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--grad);color:#022A33}
.ti-ic .i{width:22px;height:22px}
.ti-b{flex:1;min-width:0}
.ti-b b{display:block;font-size:16px;margin-top:2px}
.ti-b p{margin:4px 0 10px;font-size:14px;color:var(--muted)}
.ti-acts{display:flex;align-items:center;gap:12px}
.ti-x{position:absolute;top:10px;inset-inline-end:10px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--faint);cursor:pointer}
.ti-x .i{width:16px;height:16px}
[data-nav-open] .tour-inv{display:none}
@media (prefers-reduced-motion:reduce){ .tour-hole,.tour-card,.tour-inv{transition:none} }

/* fixes: [hidden] beats the display rules above; "See all" stays in view at the bottom of the list; the phone hero chip */
.mk-more[hidden],.mk-all[hidden],.mk-g[hidden],.mk-item[hidden]{display:none!important}
.loc-pop .mk-more,.m-mk .mk-more{position:sticky;bottom:0;z-index:1;box-shadow:0 -10px 16px -8px #fff}
.hero-cc-m{display:none}
@media (max-width:960px){
  .hh-text .hero-cc{display:none}
  .hero-cc-m{display:flex;width:max-content;max-width:100%;margin:16px auto 0;flex-wrap:nowrap;font-size:13px;padding:6px 12px 6px 8px}
  html[dir=rtl] .hero-cc-m{padding:6px 8px 6px 12px}
  .hero-cc-m .hc-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}
@media (max-width:420px){ .hero-cc-m .hc-pay{display:none} .bd-word{font-size:16.5px} }
.hero-themed .hero-atmo{background:radial-gradient(60% 70% at 85% 30%,color-mix(in srgb,var(--fc1) 14%,transparent),transparent 70%)}

/* phones: the wordmark stacks (BIGO over Diamond) so a signed-in header (bell + account + menu) fits at 360px */
@media (max-width:640px){
  .bd-logo{gap:7px}
  .bd-mark{width:28px;height:26px}
  .bd-word,.bd-word span{display:inline-flex}
  .bd-word{flex-direction:column;align-items:flex-start;gap:1px;font-size:14.5px;line-height:.95}
  .bd-word b{letter-spacing:.09em}
}
@media (max-width:420px){ .bd-word{font-size:14px} }
@media (max-width:374px){ .bd-word{font-size:13px} .bd-word span{display:inline-flex} }

/* signed-in header (bell + account) on screens under 1440px: the nav already links to Recharge, so the header button steps aside and the row fits */
@media (min-width:1101px) and (max-width:1439px){ .hdr-end:has(.bell) .hdr-cta{display:none} }

/* side menu / sheet open: only the root stops scrolling. (Also hiding the body's overflow made <body> the scroll box, so
   the sticky header left the screen and the menu opened under an empty strip.) */
[data-nav-open] body,.am-on body{overflow:visible}
html[data-nav-open],html.am-on{overflow:hidden}

/* ---------- section pages (2026-10-10): Packages, Payment methods, Business & API, Support ---------- */
.page-sec{padding-top:56px}
.page-sec .px-head h1{font-family:var(--font-d);font-weight:800;font-size:var(--t-h2);line-height:1.15;margin:12px 0 10px;color:var(--ink)}
@media (max-width:640px){ .page-sec{padding-top:32px} .page-sec .px-head h1{font-size:30px} }
.pkg-links .pkg{display:block;text-decoration:none;color:inherit}
.pkg-links .pkg .card{transition:transform .18s,box-shadow .18s,border-color .18s}
.pkg-links .pkg:hover .card,.pkg-links .pkg:focus-visible .card{transform:translateY(-3px);box-shadow:var(--e2);border-color:var(--brand-edge)}
.pkg-links .pkg:focus-visible{outline:none}
.pkg-links .pkg:focus-visible .card{outline:2.5px solid var(--brand);outline-offset:2px}
.pk-go{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:7px 12px;border-radius:99px;background:var(--brand-soft);color:var(--brand-ink);font-size:13px;font-weight:800}
.pk-go .i{width:14px;height:14px}
html[dir=rtl] .pk-go .i{transform:scaleX(-1)}
.pkg-links .pkg:hover .pk-go{background:var(--grad);color:#022A33}
.pay-how{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--e1)}
.pay-how-h{margin:0 0 8px;font-weight:800;color:var(--ink)}
.am-hint{display:flex;gap:8px;align-items:flex-start;margin:16px 2px 0;font-size:14px;color:var(--muted)}
.am-hint .i{width:16px;height:16px;flex:none;margin-top:3px;color:var(--brand-ink)}
.am-hint a{font-weight:800}
.pay-intro .am-open{margin-top:16px}
.pay-row .am-rm{margin-inline-start:auto}
.soon-open{margin-top:24px;padding:18px;border:1px dashed var(--line-2);border-radius:18px;background:#fff}
.soon-open .soon-h{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-weight:800;color:var(--ink-2)}
.soon-open .soon-h .i{width:18px;height:18px;color:var(--brand-ink)}
.svc .btn{margin-top:14px;align-self:flex-start}
.svc h2{font-size:20px;margin:12px 0 6px}
.sup-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:14px;margin-top:8px}
.sup-card{display:flex;align-items:flex-start;gap:14px;padding:20px;border-radius:20px;border:1px solid var(--line);background:#fff;box-shadow:var(--e1);color:var(--ink);text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s}
.sup-card:hover{transform:translateY(-2px);box-shadow:var(--e2);border-color:var(--brand-edge)}
.sup-card .ic{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--brand-soft);color:var(--brand-ink)}
.sup-card .ic .i{width:22px;height:22px}
.sup-card .sc-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.sup-card .sc-b b{font-size:17px}
.sup-card .sc-b > span{font-size:14px;color:var(--muted);line-height:1.5}
.sup-card bdi{margin-top:6px;font-weight:800;color:var(--brand-ink)}
.sup-card .go{flex:none;color:var(--faint);margin-top:12px}
.sup-card .go .i{width:18px;height:18px}
html[dir=rtl] .sup-card .go .i{transform:scaleX(-1)}
.sup-main{background:linear-gradient(140deg,var(--navy),#14304A);border-color:transparent;color:#fff}
.sup-main .ic{background:var(--grad);color:#022A33}
.sup-main .sc-b > span{color:#B8C4D6}
.sup-main bdi{color:#5EE6E6}
.sup-main .go{color:#5EE6E6}
.faq-list{display:grid;gap:12px;max-width:860px}
.faq-list .learn-q{background:#fff;border:1px solid var(--line);border-radius:18px;padding:6px 18px;box-shadow:var(--e1)}
.sup-pol-h{font-size:22px;margin:0 0 14px}
.sup-pol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sup-pol a{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;box-shadow:var(--e1);color:var(--ink);font-weight:700;text-decoration:none}
.sup-pol a:hover{border-color:var(--brand-edge)}
.sup-pol .i{width:18px;height:18px;color:var(--brand-ink)}
@media (max-width:960px){ .sup-grid{grid-template-columns:minmax(0,1fr)} .sup-pol{grid-template-columns:repeat(2,minmax(0,1fr))} }
.m-help{align-items:stretch}
.m-help .btn,.m-help .m-wa{margin:0;width:100%;height:auto;min-height:48px;white-space:normal;line-height:1.2;text-align:center}

/* ---------- country hero pictures (AE SA QA JO SY LB), 2026-10-10: the WHOLE picture (16:9, never cropped), with no
   words on it. Desktop: in the Dino's place beside the form, at the hero's usual size. Phones: small, at the top of the
   form. The heading stays for screen readers and search (visually hidden); the chip and the Dino step aside. ---------- */
.hero-has-banner .hero-head{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-has-banner .hero-cc,.hero-has-banner .px-stage{display:none!important}
.hero-pic{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:24px;background:#D7EEF7;
  box-shadow:0 26px 50px -28px rgba(11,19,36,.55),0 0 0 1px rgba(255,255,255,.7) inset}
.hero-pic-col{align-self:center}
@media (min-width:961px){ .hero-pic-col{max-width:600px;justify-self:end;width:100%} html[dir=rtl] .hero-pic-col{justify-self:start} }
@media (max-width:960px){
  .hero-pic-col{display:none}
  .hero-pic-m{margin:14px 0 4px}
  .hero-pic-m .hero-pic{border-radius:18px}
  .hero-has-banner .hero-steps{margin-top:14px}
}
@media (min-width:961px){ .hero-has-banner .hero-grid{align-items:center} .hero-has-banner .hero-main{align-self:center} }

/* ---------- the hero's three steps (2026-10-10): a centred stepper card that follows the customer's progress ---------- */
.hero-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%;max-width:460px;margin:20px auto 0;padding:6px 6px 10px;
  list-style:none;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--e1)}
.hero-steps li{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;padding:9px 6px;border-radius:13px;font-size:13.5px;font-weight:700;color:var(--muted);white-space:nowrap;transition:background-color .25s,color .25s}
.hero-steps li + li::before{content:none;display:none}
.hero-steps .n{position:relative;width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--bg);border:1.5px solid var(--line-2);color:var(--muted);font-size:12.5px;font-weight:800;line-height:1;transition:all .25s}
.hero-steps li:first-child .n{background:var(--bg);border-color:var(--line-2);color:var(--muted)}
.hero-steps .n .ck{display:none}
.hero-steps .n .ck .i{width:14px;height:14px;stroke-width:3}
.hero-steps .l{overflow:hidden;text-overflow:ellipsis}
.hero-steps li.is-on{background:var(--brand-soft);color:var(--ink)}
.hero-steps li.is-on .n,.hero-steps li:first-child.is-on .n{background:var(--grad);border-color:transparent;color:#022A33;box-shadow:0 6px 12px -6px rgba(255,46,147,.8)}
.hero-steps li.is-done{color:var(--ink-2)}
.hero-steps li.is-done .n{background:var(--good);border-color:transparent;color:#fff}
.hero-steps li.is-done .n b{display:none}
.hero-steps li.is-done .n .ck{display:grid}
/* progress line along the bottom of the card */
.hero-steps::after{content:"";position:absolute;inset-inline-start:14px;bottom:5px;height:3px;border-radius:3px;background:var(--grad);width:calc((100% - 28px) * var(--hs-p,.17));transition:width .4s cubic-bezier(.2,.8,.2,1)}
.hero-steps::before{content:"";position:absolute;inset-inline:14px;bottom:5px;height:3px;border-radius:3px;background:var(--bg-2)}
.hero-steps[data-step="1"]{--hs-p:.17}
.hero-steps[data-step="2"]{--hs-p:.5}
.hero-steps[data-step="3"]{--hs-p:.83}
@media (max-width:480px){
  .hero-steps li{flex-direction:column;gap:5px;padding:8px 4px;font-size:12px;white-space:normal;text-align:center;line-height:1.2}
  .hero-steps .n{width:28px;height:28px}
}
@media (prefers-reduced-motion:reduce){ .hero-steps::after,.hero-steps li,.hero-steps .n{transition:none} }
.hero-steps li.is-done .n .ck{visibility:visible;color:#fff}
@media (min-width:481px){ .hero-steps{max-width:540px} .hero-steps li{font-size:13px;padding:9px 8px} }

/* ---------- header (2026-10-10, 4): light/dark switch; the user button only where there is no side menu ---------- */
.theme-btn{display:grid}
.theme-btn .th-sun,html[data-theme=dark] .theme-btn .th-moon{display:none}
html[data-theme=dark] .theme-btn .th-sun{display:inline-flex;color:#FFC21A}
.theme-btn .th-moon,.theme-btn .th-sun{display:inline-flex}
.theme-btn .th-sun{display:none}
@media (max-width:1100px){ .hdr-end .acct-btn,.hdr-end .acct,.hdr-end .acct-guest,.hdr-end .signin{display:none!important} }

/* the strip under the header: country · language · currency on one side, the country's time on the other */
.hdr-sub{border-top:1px solid var(--line);background:linear-gradient(90deg,rgba(255,46,147,.06),rgba(138,31,214,.05))}
.hdr-sub-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px}
.hdr-sub .locale{height:34px;border-radius:10px;box-shadow:none;background:transparent;border-color:transparent;padding:0 8px}
.hdr-sub .locale:hover{background:var(--surface);border-color:var(--line-2)}
.hdr-sub .locale .cn{display:inline;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.hdr-sub .locale .div{display:inline-block}
.hdr-clock{display:flex;align-items:center;gap:9px;color:var(--ink);text-align:end}
.hdr-clock .hc-ic{display:inline-flex;color:var(--brand-ink)}
.hdr-clock .hc-ic .i{width:17px;height:17px}
.hc-tx{display:flex;flex-direction:column;line-height:1.15}
.hc-tx b{font-size:15px;font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.hc-tx small{font-size:11.5px;color:var(--muted)}
@media (max-width:640px){
  .hdr-sub-row{min-height:42px}
  .hdr-sub .locale{padding:0 4px;gap:6px}
  .hdr-sub .locale .cn{display:inline;max-width:34vw}
  .hc-tx b{font-size:14px}
  .hdr-clock .hc-ic{display:none}
}

/* ---------- recharge form (2026-10-10, 5): two labelled parts, either order; Continue + the recipient once both are chosen ---------- */
.rx-part{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:14.5px;font-weight:800;color:var(--ink)}
.rx-part .n{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);font-size:12px}
.rx-dia > .rx-part{margin-top:22px}
.rx .rx-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rx-next{display:flex;align-items:center;gap:9px;margin:16px 0 0;padding:12px 14px;border-radius:14px;border:1px dashed var(--line-2);background:var(--surface,#fff);color:var(--ink-2);font-size:14px;font-weight:700}
.rx-next[hidden]{display:none}
.rx-next .ic{display:inline-flex;color:var(--brand-ink)}
.rx-next .ic .i{width:18px;height:18px}
.pay-who{display:flex;align-items:center;gap:12px;margin-top:18px;padding:12px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(255,46,147,.08),rgba(138,31,214,.04));border:1px solid var(--brand-edge)}
.pw-av{flex:none;line-height:0}
.pw-av .av-pic,.pw-av svg{border-radius:50%;box-shadow:0 0 0 2px #fff,0 6px 14px -8px rgba(11,19,36,.5)}
.pw-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pw-t small{font-size:12px;color:var(--muted)}
.pw-t b{font-size:16px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw-t .ltr{font-size:12.5px;color:var(--muted)}
.pw-dia{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:12px;background:var(--gem-soft,#FFF7DD);color:var(--ink);font-size:16px}
.pw-dia b{font-weight:800}
.rx-pay-in > .pay-line{padding-top:14px}
.rx-auto{display:flex;align-items:center;gap:7px;margin:8px 2px 0;font-size:12.5px;color:var(--brand-ink);font-weight:600}
.rx-auto[hidden]{display:none}
.rx-auto .i{width:14px;height:14px}
/* switches (saved-accounts card in edit mode, account preferences) */
.sv-auto,.sw-row{display:flex;align-items:center;gap:10px;cursor:pointer}
.sv-auto{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:13.5px;font-weight:700;color:var(--ink-2)}
.sv-auto[hidden]{display:none}
.sv-auto input,.sw-row input{position:absolute;opacity:0;pointer-events:none}
.sw{position:relative;width:42px;height:24px;flex:none;border-radius:99px;background:var(--line-2);transition:background-color .2s}
.sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(11,19,36,.3);transition:transform .2s}
input:checked + .sw{background:var(--grad)}
input:checked + .sw::after{transform:translateX(18px)}
html[dir=rtl] input:checked + .sw::after{transform:translateX(-18px)}
input:focus-visible + .sw{outline:2.5px solid var(--brand);outline-offset:2px}
.sv-auto .sw{order:2;margin-inline-start:auto}
.pref-row{padding:14px 16px}
.sw-row{justify-content:space-between}
.sw-row .pk{display:flex;flex-direction:column;gap:3px}
.sw-row .pk small{font-size:12.5px;color:var(--muted);font-weight:400;line-height:1.45}
@media (prefers-reduced-motion:reduce){ .sw,.sw::after{transition:none} }

/* ---------- one package list (2026-10-10, 6): the Packages section is the amount step, in the identity card's style ---------- */
.pk-box{max-width:980px;margin:0 auto;padding:22px;border-radius:24px;background:var(--surface,#fff);border:1px solid var(--line);box-shadow:var(--e2)}
.pk-box .rx-dia-w,.pk-box .rx-dia-w .rx-dia{display:block;opacity:1;transform:none}
.pk-box .rx-dia-in{overflow:visible;margin:0;padding:0}
.pk-box .rx-dia > .rx-part{margin-top:0}
.pk-box .rx-tabs{max-width:420px}
.pk-box .picks{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;margin-top:14px}
.pk-box .pick .in{min-height:74px;justify-content:center;border:1.5px solid var(--line-2);border-radius:14px;background:var(--surface,#fff);box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 26px -22px rgba(15,23,42,.35)}
.pk-box .pick:hover .in{border-color:var(--brand-edge)}
.pk-box .pick .amt{font-size:19px}
.pk-box .pick .pr{font-size:13.5px}
.pk-box .cu-field{margin-top:14px}
.pk-box .rx-pay-in{margin:0;padding:0 0 2px}
.pk-box .rx-next{width:100%;cursor:pointer;font:inherit;font-size:14px;font-weight:700;text-align:start}
.pk-box .rx-next:hover{border-color:var(--brand)}
.rx-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--brand-edge);background:var(--brand-soft);color:var(--brand-ink);font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.rx-go[hidden]{display:none}
.rx-go:hover{background:rgba(255,46,147,.2)}
.rx-go .arr .i{width:18px;height:18px}
@media (min-width:961px){ .pk-box{padding:26px 28px} .pk-box .rx-pay{max-width:560px;margin:0 auto} }
@media (max-width:640px){ .pk-box{padding:16px;border-radius:20px} .pk-box .picks{grid-template-columns:repeat(2,minmax(0,1fr))} }

@media (min-width:961px){ .pk-box .picks{grid-template-columns:repeat(7,minmax(0,1fr))} }
@media (min-width:641px) and (max-width:960px){ .pk-box .picks{grid-template-columns:repeat(4,minmax(0,1fr))} }
.pk-box .rx-pay-in{margin:0 -8px;padding:0 8px 14px}
.pk-box .rx-pay.is-open .rx-pay-in{overflow:visible}

/* the amount step shows the full package cards, all of them (2026-10-10, 7) */
.pk-box .picks{gap:12px}
.pk-box .pick.pkg{display:block}
.pk-box .pick.pkg .card{height:100%}
.pk-box .picks-more{display:none!important}
@media (max-width:640px){ .pk-box .picks{gap:10px} }

/* ---------- my packages: add / edit (×) / reset (2026-10-10) ---------- */
.pk-box .pick.pkg{position:relative}
.pk-x{position:absolute;top:-8px;inset-inline-end:-8px;z-index:2;width:30px;height:30px;display:none;place-items:center;border-radius:50%;border:2px solid var(--surface,#fff);background:var(--danger);color:#fff;cursor:pointer;box-shadow:0 6px 12px -6px rgba(194,45,24,.7)}
.pk-x .i{width:15px;height:15px;stroke-width:2.6}
.picks.is-edit .pk-x{display:grid}
.picks.is-edit .pick.pkg .card{animation:pk-wig .35s ease-in-out;border-style:dashed}
@keyframes pk-wig{0%,100%{transform:none}30%{transform:rotate(-1.2deg)}70%{transform:rotate(1.2deg)}}
@media (prefers-reduced-motion:reduce){ .picks.is-edit .pick.pkg .card{animation:none} }
.pk-mine{position:absolute;top:8px;inset-inline-start:8px;padding:2px 8px;border-radius:99px;background:var(--grad);color:#022A33;font-size:10.5px;font-weight:800}
.pick.is-mine .card{border-color:var(--brand-edge)}
.pk-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.pk-add-open{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1.5px dashed var(--brand-edge);border-radius:12px;background:var(--brand-soft);color:var(--brand-ink);font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.pk-add-open:hover,.pk-add-open[aria-expanded=true]{border-style:solid;border-color:var(--brand)}
.pk-add-open .i{width:18px;height:18px}
.pk-tools-end{display:inline-flex;gap:6px;margin-inline-start:auto}
.pk-tool{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface,#fff);color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.pk-tool[hidden]{display:none}
.pk-tool:hover{border-color:var(--brand)}
.pk-tool[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.pk-tool .i{width:15px;height:15px}
.pk-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:12px;padding:14px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}
.pk-add[hidden]{display:none}
.pk-add .btn{height:52px;padding:0 20px}
.pk-add .btn .i{width:18px;height:18px}
.pk-add-help{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--muted)}
.pk-add-help.is-err{color:var(--danger);font-weight:700}
.pk-empty{grid-column:1/-1;margin:6px 0;padding:18px;text-align:center;border:1px dashed var(--line-2);border-radius:14px;color:var(--muted)}
@media (max-width:480px){ .pk-tools-end{margin-inline-start:0;width:100%;justify-content:flex-end} .pk-add-open{width:100%;justify-content:center} }
.pk-x{top:-7px;inset-inline-end:-5px}

/* ---------- my packages (2): header tools, the Add card, drag to reorder, the add window ---------- */
.rx-part-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.rx-part-row .rx-part{margin:0}
.pk-box .rx-dia > .rx-part-row{margin-top:0}
.pk-tool-add{background:var(--grad);border-color:transparent;color:#022A33;box-shadow:0 8px 16px -10px rgba(255,46,147,.8)}
.pk-tool-add:hover{border-color:transparent;filter:brightness(1.05)}
.pk-tool-add .i{width:16px;height:16px;stroke-width:2.6}
.pk-edit-hint{display:flex;align-items:center;gap:7px;margin:-4px 0 10px;font-size:13px;font-weight:600;color:var(--brand-ink)}
.pk-edit-hint[hidden]{display:none}
.pk-edit-hint .i{width:15px;height:15px}
.pk-add-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:100%;padding:18px 10px;border:2px dashed var(--brand-edge);border-radius:var(--r,16px);
  background:linear-gradient(180deg,rgba(255,46,147,.06),rgba(138,31,214,.04));color:var(--brand-ink);font:inherit;text-align:center;cursor:pointer;transition:border-color .15s,background-color .15s,transform .15s}
.pk-add-tile:hover{border-color:var(--brand);transform:translateY(-2px)}
.pk-add-tile .pa-ic{width:50px;height:50px;display:grid;place-items:center;border-radius:14px;background:var(--grad);color:#022A33;box-shadow:0 10px 18px -10px rgba(255,46,147,.8)}
.pk-add-tile .pa-ic .i{width:24px;height:24px;stroke-width:2.6}
.pk-add-tile b{font-size:15px;font-weight:800;color:var(--ink)}
.pk-add-tile small{font-size:12px;color:var(--muted);line-height:1.35}
.picks.is-edit .pick.pkg{cursor:grab}
.picks.is-edit .pick.pkg:active{cursor:grabbing}
.pk-ghost .card{opacity:.35;border-style:dashed}
.pk-chosen .card{box-shadow:var(--e3)}
.picks.is-edit .pk-add-tile{opacity:.6}
/* the add window */
.pa-sheet{width:min(520px,100%)}
.pa-body{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;align-items:center}
.pa-prev .pa-preview{display:block;pointer-events:none}
.pa-prev .pa-preview .card{min-height:200px}
.pa-l{display:block;margin:0 0 8px;font-size:13.5px;font-weight:800;color:var(--ink)}
.pa-form .cu-input{width:100%}
.pa-help{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.pa-help.is-err{color:var(--danger);font-weight:700}
.pa-acts{display:flex;gap:8px;margin-top:16px}
.pa-acts .btn{flex:1;height:48px}
.pa-acts .btn .i{width:18px;height:18px}
.pa-acts .btn[disabled]{opacity:.5;cursor:not-allowed}
@media (max-width:480px){ .pa-body{grid-template-columns:1fr} .pa-prev{max-width:180px;margin:0 auto} }
.pk-drag{opacity:.95!important;transform:rotate(2deg);box-shadow:var(--e3)}
.picks.is-edit .pick.pkg{touch-action:none;user-select:none;-webkit-user-select:none}

/* ---------- packages section (2026-10-10, 8): icon tools on the part row; the hero's background; a tighter head ---------- */
.rx-part-row{flex-wrap:nowrap}
.rx-part-row .rx-part{min-width:0}
.pk-tools-end{flex:none;gap:8px}
.pk-tool{width:42px;height:42px;min-height:0;padding:0;justify-content:center;border-radius:12px}
.pk-tool .i{width:18px;height:18px}
.pk-tool-add .i{width:20px;height:20px}
@media (max-width:380px){ .pk-tool{width:38px;height:38px} .rx-part{font-size:13.5px} }
.sec-pk{position:relative;overflow:hidden;padding-top:64px;background:
  radial-gradient(46% 60% at 82% 20%,rgba(255,46,147,.14),rgba(255,46,147,0) 70%),
  radial-gradient(30% 40% at 6% 10%,rgba(155,77,255,.12),rgba(155,77,255,0) 70%),
  linear-gradient(180deg,var(--bg) 0%,#FFFFFF 30%,#F8FBFE 70%,var(--bg) 100%)}
.sec-pk > .wrap{position:relative;z-index:1}
.sec-pk.pk-themed::before{content:"";position:absolute;inset:0;opacity:.13;background:linear-gradient(135deg,var(--fc1),var(--fc2));
  -webkit-mask-image:var(--pat),radial-gradient(70% 80% at 50% 30%,#000 20%,transparent 75%);mask-image:var(--pat),radial-gradient(70% 80% at 50% 30%,#000 20%,transparent 75%);
  -webkit-mask-size:var(--pat-s,56px),100% 100%;mask-size:var(--pat-s,56px),100% 100%;-webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat}
.sec-pk[data-pattern=gulf]{--pat:url(/assets/dp/pat-gulf.svg);--pat-s:56px}
.sec-pk[data-pattern=levant]{--pat:url(/assets/dp/pat-levant.svg);--pat-s:44px}
.sec-pk[data-pattern=maghreb]{--pat:url(/assets/dp/pat-maghreb.svg);--pat-s:60px}
.sec-pk[data-pattern=persia]{--pat:url(/assets/dp/pat-persia.svg);--pat-s:52px}
.sec-pk .px-head{margin-bottom:22px}
.sec-pk .px-head h2{margin-bottom:8px}
.sec-pk .px-head > p{font-size:15.5px}
.sec-pk .px-head .market{margin-top:12px}
@media (max-width:640px){ .sec-pk{padding-top:44px} .sec-pk .px-head{margin-bottom:16px} }
html[data-theme=dark] .sec-pk{background:radial-gradient(46% 60% at 82% 20%,rgba(255,46,147,.12),rgba(255,46,147,0) 70%),linear-gradient(180deg,var(--bg) 0%,#0F1829 40%,var(--bg) 100%)}
/* the add window: the preview card takes the list cards' width */
.pa-prev{margin:0 auto;max-width:100%}
.pa-prev .pa-preview{width:100%}
.pa-body{grid-template-columns:auto minmax(0,1fr)}
@media (max-width:480px){ .pa-body{grid-template-columns:1fr} .pa-prev{max-width:none} }
.rx-part-row .rx-part{flex:1 1 auto}
.rx-part-row .pk-tools-end{width:auto!important;margin-inline-start:auto!important}

/* ---------- step 3 = payments (2026-10-10, 9): selectable methods in the step card; checkout completes the payment ---------- */
.sec-step3{padding-top:24px;background:var(--bg)}
.sec-step3 .px-head{margin-bottom:22px}
.pay-box .pay-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));margin-top:4px}
.pay-mk{display:inline-flex;align-items:center;gap:7px;flex:none;max-width:52%;height:38px;padding:0 10px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface,#fff);color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.pay-mk span[data-country]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pay-mk .flag{width:20px;height:13px;border-radius:2px}
.pay-mk .chev .i{width:14px;height:14px}
.pay-pick{position:relative;cursor:pointer;grid-template-columns:auto minmax(0,1fr) auto}
.pay-pick input{position:absolute;opacity:0;pointer-events:none}
.pay-pick .rd{width:24px;height:24px;flex:none;align-self:center;display:grid;place-items:center;border-radius:50%;border:2px solid var(--line-2);color:#fff;background:var(--surface,#fff)}
.pay-pick .rd .i{width:13px;height:13px;stroke-width:3;opacity:0}
.pay-pick.is-sel,.pay-pick:has(input:checked){border:2px solid var(--brand);background:linear-gradient(180deg,rgba(255,46,147,.08),var(--surface,#fff) 70%);box-shadow:0 0 0 3px var(--ring)}
.pay-pick.is-sel .rd,.pay-pick:has(input:checked) .rd{background:var(--grad);border-color:transparent}
.pay-pick.is-sel .rd .i,.pay-pick:has(input:checked) .rd .i{opacity:1}
.pay-pick:has(input:focus-visible){outline:2.5px solid var(--brand);outline-offset:2px}
.pay-how-d{margin-top:14px;border-top:1px dashed var(--line);padding-top:6px}

/* ---------- the checkout bar, fixed at the bottom ---------- */
.co-bar{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));z-index:45;width:min(760px,calc(100% - 20px));transform:translate(-50%,150%);opacity:0;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s;padding:10px;border-radius:22px;background:var(--surface,#fff);border:1px solid var(--line);box-shadow:var(--e3)}
.co-bar.is-open{transform:translate(-50%,0);opacity:1}
.co-in{display:flex;align-items:center;gap:10px}
.co-bar .pw-av{line-height:0}
.co-bar .pw-av svg,.co-bar .pw-av .av-pic,.co-bar .pw-av img{width:40px!important;height:40px!important}
.co-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.2}
.co-t > b{font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-sum{display:flex;align-items:center;gap:8px;min-width:0}
.co-bar .pw-dia{padding:2px 8px;border-radius:8px;font-size:13px;gap:4px}
.co-bar .pw-dia svg{width:13px;height:13px}
.co-m{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-m img{height:14px;width:auto;max-width:36px;object-fit:contain}
.co-price{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;text-align:end}
.co-price b{font-size:18px;font-weight:800}
.co-price small{font-size:11px;color:var(--muted)}
.co-btn{flex:none;height:48px;padding:0 18px;border-radius:14px;white-space:nowrap}
.co-btn .arr .i{width:18px;height:18px}
html[dir=rtl] .co-btn .arr .i{transform:scaleX(-1)}
.co-bar .cta-hint{margin:6px 0 0}
html[data-cobar] body{padding-bottom:110px}
html[data-cobar] .wa-fab{bottom:calc(110px + env(safe-area-inset-bottom))}
[data-nav-open] .co-bar{visibility:hidden}
@media (max-width:640px){
  .co-bar{width:calc(100% - 16px);bottom:calc(8px + env(safe-area-inset-bottom));padding:10px;border-radius:20px}
  .co-in{flex-wrap:wrap;gap:8px 10px}
  .co-t{flex:1 1 0}
  .co-btn{flex:1 1 100%;order:3;height:50px;justify-content:center}
  html[data-cobar] body{padding-bottom:150px}
  html[data-cobar] .wa-fab{bottom:calc(150px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){ .co-bar{transition:none} }

/* phones (2026-10-10): every card is exactly as wide as the identity card (the recharge form, which reaches 12px past the
   page gutter), so the column of cards lines up from the hero to the footer */
@media (max-width:640px){
  .hero-steps,.hero-pic-m,.pk-box,.px-steps,.why-list,.biz-grid,.soon,.final-band,.learn-grid > article{width:auto;max-width:none;margin-inline:-12px}
  .hero-steps{width:calc(100% + 24px)}
}

/* ---------- packages: a lone last card is always centred (flex rows) ---------- */
.pk-box .picks{display:flex;flex-wrap:wrap;justify-content:center}
.pk-box .picks > *{flex:0 0 calc((100% - 6 * 12px) / 7);min-width:0}
@media (max-width:960px){ .pk-box .picks > *{flex-basis:calc((100% - 3 * 12px) / 4)} }
@media (max-width:640px){ .pk-box .picks > *{flex-basis:calc((100% - 10px) / 2)} }

/* ---------- step 3, payments (2026-10-10, 10): grouped rows, logo tile, chips, a clear selected state ---------- */
.pay-box .pay-list{display:block;margin-top:2px}
.pm-group + .pm-group{margin-top:18px}
.pm-gh{display:flex;align-items:center;gap:8px;margin:0 2px 10px;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
html[dir=rtl] .pm-gh{letter-spacing:0}
.pm-gh .i{width:15px;height:15px;color:var(--brand-ink)}
.pm-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.pm-row{position:relative;display:flex;align-items:center;gap:14px;min-height:76px;padding:12px 14px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface,#fff);cursor:pointer;
  box-shadow:0 1px 2px rgba(11,19,36,.04);transition:border-color .15s,box-shadow .15s,background-color .15s,transform .15s}
.pm-row:hover{border-color:var(--brand-edge);box-shadow:var(--e2);transform:translateY(-1px)}
.pm-row input{position:absolute;opacity:0;pointer-events:none}
.pm-logo{width:58px;height:44px;flex:none;display:grid;place-items:center;border-radius:11px;background:#fff;border:1px solid var(--line);overflow:hidden}
.pm-logo img{max-width:46px;max-height:30px;object-fit:contain}
.pm-logo.is-wallet{border:0;background:none}
.pm-logo.is-wallet img{max-width:44px;max-height:44px;width:44px;height:44px}
.pm-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.3}
.pm-b b{font-size:15.5px;font-weight:800;color:var(--ink)}
.pm-b small{font-size:12.5px;color:var(--muted)}
.pm-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:5px}
.pm-meta .cc{font-size:11px;font-weight:800;padding:2px 7px;border-radius:6px;background:var(--bg);border:1px solid var(--line);color:var(--ink-2);letter-spacing:.02em}
.pm-bal{font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:99px;background:var(--brand-soft);color:var(--brand-ink)}
.pm-link{font-size:12.5px;font-weight:800}
.pm-soon{font-size:11px;font-weight:800;padding:2px 8px;border-radius:99px;background:var(--gem-soft,#FFF7DD);color:#8A5A00;border:1px solid var(--gem-edge,#F2C85A)}
.pm-rd{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:50%;border:2px solid var(--line-2);background:var(--surface,#fff);color:#fff;transition:all .15s}
.pm-rd .i{width:13px;height:13px;stroke-width:3;opacity:0}
.pm-row.is-sel,.pm-row:has(input:checked){border-color:var(--brand);background:linear-gradient(180deg,rgba(255,46,147,.07),var(--surface,#fff) 75%);box-shadow:0 0 0 3px var(--ring)}
.pm-row.is-sel .pm-rd,.pm-row:has(input:checked) .pm-rd{background:var(--grad);border-color:transparent}
.pm-row.is-sel .pm-rd .i,.pm-row:has(input:checked) .pm-rd .i{opacity:1}
.pm-row:has(input:focus-visible){outline:2.5px solid var(--brand);outline-offset:2px}
.pm-row.is-soon{cursor:not-allowed;background:var(--bg);box-shadow:none}
.pm-row.is-soon:hover{transform:none;border-color:var(--line)}
.pm-row.is-soon .pm-logo img{filter:grayscale(.3);opacity:.85}
.pm-row.is-soon .pm-rd{opacity:.35}
.pay-box .pk-tools-end{display:inline-flex;align-items:center;gap:8px}
.pay-box .pay-mk{max-width:none}
@media (max-width:480px){ .pay-box .pay-mk span[data-country]{max-width:96px} .pm-row{gap:12px;padding:12px} .pm-logo{width:52px;height:40px} }
.am-item.is-soon .logo img{opacity:.9}
.am-soon{display:inline-block;margin-inline-start:6px;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:99px;background:var(--gem-soft,#FFF7DD);color:#8A5A00;vertical-align:middle}
.pm.is-soon .bal.short{color:#8A5A00}

/* checkout networks: a tidy grid, coin over network */
.nets{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.net span{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:58px;justify-content:center;font-size:16px;font-weight:800;line-height:1.15;white-space:normal}
.net span small{font-size:12px;font-weight:600;color:var(--muted)}
/* phones: the step-3 country button is just the flag (the country is in the strip above) */
@media (max-width:480px){ .pay-box .pay-mk span[data-country]{display:none} .pay-box .pay-mk{padding:0 8px} }

/* ---------- payment rows (2026-10-10, 11): the logo is the left 30% of the card (its brand panel), name · currencies · choice on the rest ---------- */
.pm-row{display:grid;grid-template-columns:30% minmax(0,1fr) auto;align-items:stretch;gap:0;min-height:96px;padding:0;overflow:hidden}
.pm-logo{width:auto;height:auto;border:0;border-radius:0;display:grid;place-items:center;padding:12px;border-inline-end:1px solid var(--line);
  background:linear-gradient(140deg,#FFFFFF,#F1F5FB)}
.pm-logo img{width:100%;height:100%;max-width:120px;max-height:56px;object-fit:contain}
.pm-b{padding:14px 14px;justify-content:center}
.pm-rd{margin:0 14px 0 4px;align-self:center}
html[dir=rtl] .pm-rd{margin:0 4px 0 14px}
/* brand panels */
.pm-logo[data-brand=card]{background:linear-gradient(140deg,#FFFFFF 0%,#EEF2FF 100%)}
.pm-logo[data-brand=apple_pay]{background:#000}
.pm-logo[data-brand=apple_pay] img{filter:invert(1)}
.pm-logo[data-brand=google_pay]{background:linear-gradient(140deg,#FFFFFF,#F3F6FB)}
.pm-logo[data-brand=usdt]{background:linear-gradient(140deg,#E8FBF4,#D2F5E8)}
.pm-logo[data-brand=wallet]{background:linear-gradient(140deg,#FF2E93,#B64DFF);padding:10px}
.pm-logo[data-brand=wallet] img{max-width:64px;max-height:64px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.pm-logo[data-brand=whish]{background:linear-gradient(140deg,#FFFFFF,#FFECEF)}
.pm-logo[data-brand=neo]{background:#000}
.pm-row.is-sel .pm-logo,.pm-row:has(input:checked) .pm-logo{border-inline-end-color:var(--brand-edge)}
.pm-row.is-soon .pm-logo{filter:grayscale(.35)}
@media (max-width:480px){ .pm-row{min-height:92px} .pm-b{padding:12px} .pm-b b{font-size:15px} .pm-logo{padding:10px} }
html[data-theme=dark] .pm-logo:not([data-brand=apple_pay]):not([data-brand=neo]):not([data-brand=wallet]){background:#F4F7FB}
@media (min-width:641px){ .pm-rows{grid-template-columns:repeat(2,minmax(0,1fr))} .pm-row{min-height:104px} .pm-logo img{max-height:60px} }

/* coin logos only (USDT, USDC) on their brand tint; the wallet on a deep navy panel */
.pm-logo[data-brand=usdt]{background:radial-gradient(70% 90% at 30% 20%,#E9FBF4,#CFF3E5)}
.pm-logo[data-brand=usdc]{background:radial-gradient(70% 90% at 30% 20%,#EEF5FF,#D5E6FB)}
.pm-logo[data-brand=usdt] img,.pm-logo[data-brand=usdc] img{width:52px;height:52px;max-width:52px;max-height:52px;filter:drop-shadow(0 8px 14px rgba(11,19,36,.22))}
.pm-logo[data-brand=wallet]{background:radial-gradient(80% 90% at 25% 15%,#1E3A5F 0%,#0B1324 70%)}
.pm-logo[data-brand=wallet] img{width:70px;height:56px;max-width:70px;max-height:56px;filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))}

/* ---------- slim section titles (packages, payments) ---------- */
.sec-pk .px-head{display:none}
.sec-slim{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:980px;margin:0 auto 14px;padding:10px 14px;border-radius:16px;background:var(--surface,#fff);border:1px solid var(--line);box-shadow:var(--e1)}
.sec-slim .ss-n{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--grad);color:#022A33;font-size:12px;font-weight:800}
.sec-slim .ss-ic{display:inline-flex;color:var(--brand-ink)}
.sec-slim .ss-ic .i{width:18px;height:18px}
.sec-slim h2{margin:0;font-size:17px;line-height:1.3;color:var(--ink)}
.sec-slim .ss-sub{margin-inline-start:auto;font-size:12.5px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:3px 10px}
.sec-pk{padding-top:28px}
@media (max-width:640px){ .sec-slim{margin-inline:-12px;padding:10px 12px} .sec-slim .ss-sub{margin-inline-start:0;flex-basis:100%;text-align:center} .sec-pk{padding-top:20px} }

/* ---------- simple steps: a connected network with a current running down it ---------- */
.net-steps{position:relative;list-style:none;max-width:720px;margin:0 auto;padding:0;display:grid;gap:18px}
.net-steps::before{content:"";position:absolute;inset-inline-start:31px;top:32px;bottom:32px;width:4px;border-radius:4px;background:var(--line-2)}
.net-steps::after{content:"";position:absolute;inset-inline-start:30px;top:32px;width:6px;height:90px;border-radius:6px;
  background:linear-gradient(180deg,rgba(255,64,160,0),#FF2E93 40%,#7CF7FF 55%,#B64DFF 70%,rgba(138,31,214,0));
  box-shadow:0 0 14px 3px rgba(255,64,160,.55);animation:ns-current 2.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes ns-current{0%{transform:translateY(-40px);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(calc(var(--ns-h,420px) - 50px));opacity:0}}
.net-steps li{position:relative;z-index:1;display:flex;align-items:flex-start;gap:16px}
.ns-node{position:relative;width:66px;height:66px;flex:none;display:grid;place-items:center;border-radius:20px;background:var(--surface,#fff);border:2px solid var(--line-2);color:var(--brand-ink);box-shadow:var(--e1);
  animation:ns-glow 2.6s ease-in-out infinite}
.net-steps li:nth-child(2) .ns-node{animation-delay:.6s}
.net-steps li:nth-child(3) .ns-node{animation-delay:1.2s}
.net-steps li:nth-child(4) .ns-node{animation-delay:1.8s}
@keyframes ns-glow{0%,100%{border-color:var(--line-2);box-shadow:var(--e1)}35%{border-color:#FF2E93;box-shadow:0 0 0 4px rgba(255,64,160,.18),0 0 22px 2px rgba(255,64,160,.45)}}
.ns-node .i{width:26px;height:26px}
.ns-node b{position:absolute;top:-8px;inset-inline-end:-8px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--grad);color:#022A33;font-size:12px;font-weight:800;box-shadow:0 4px 10px -4px rgba(255,46,147,.8)}
.ns-body{flex:1;min-width:0;padding:14px 16px;border-radius:18px;background:var(--surface,#fff);border:1px solid var(--line);box-shadow:var(--e1)}
.ns-body h3{margin:0 0 4px;font-size:16.5px}
.ns-body p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.55}
.ns-teach{text-align:center;margin:26px 0 0}
.ns-teach .btn{min-width:220px}
@media (max-width:640px){ .net-steps{margin-inline:-12px} .ns-node{width:56px;height:56px;border-radius:18px} .net-steps::before{inset-inline-start:26px} .net-steps::after{inset-inline-start:25px} }
@media (prefers-reduced-motion:reduce){ .net-steps::after,.ns-node{animation:none} }

/* ---------- side menu: account & legal ---------- */
.m-more{display:grid;gap:2px;padding:10px 4px 0;border-top:1px dashed var(--line)}
.m-more .m-h{margin:0 6px 4px}
.m-more a{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 10px;border-radius:10px;color:var(--ink-2);font-size:14.5px;font-weight:600;text-decoration:none}
.m-more a:hover,.m-more a[aria-current]{background:var(--bg);color:var(--brand-ink)}
.m-more a .i{width:17px;height:17px;color:var(--brand-ink)}
.ft-operator{margin:14px 0 0;font-size:12px;line-height:1.6;color:#94A3B8;text-align:center}
.ft-operator a{color:#CBD5E1;text-decoration:none;font-weight:700}

/* ---------- security & legal hub ---------- */
.sec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sec-wide{grid-column:1/-1}
.sec-card{padding:18px}
.sec-row,.sec-list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.sec-list{list-style:none;margin:0 0 12px;padding:0}
.sec-list li:last-child{border-bottom:0}
.sec-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--brand-soft);color:var(--brand-ink)}
.sec-ic .i{width:18px;height:18px}
.sec-row > div,.sec-list li > div{flex:1;min-width:0;display:flex;flex-direction:column}
.sec-row small,.sec-list small{font-size:12.5px;color:var(--muted)}
.sec-ok{font-size:12px;font-weight:800;color:var(--good);background:var(--good-soft);border-radius:99px;padding:3px 10px}
.sec-note{margin:10px 0 0;font-size:13px;color:var(--muted)}
.sec-empty{color:var(--muted)}
@media (max-width:760px){ .sec-grid{grid-template-columns:minmax(0,1fr)} }
.legal-hub{max-width:900px;padding-top:32px;padding-bottom:48px}
.lh-head h1{margin:0 0 6px}
.lh-head p{margin:0 0 18px;color:var(--muted)}
.lh-co{padding:20px}
.lh-co-h{display:flex;align-items:center;gap:14px}
.lh-badge{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--grad);color:#022A33}
.lh-badge .i{width:24px;height:24px}
.lh-co-h h2{margin:0;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.lh-name{margin:2px 0 0;font-weight:800;font-size:16px;color:var(--ink);line-height:1.35}
.lh-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin:16px 0 0}
.lh-dl > div{padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.lh-dl .lh-wide{grid-column:1/-1}
.lh-dl dt{font-size:12px;font-weight:700;color:var(--muted)}
.lh-dl dd{margin:3px 0 0;font-weight:700;color:var(--ink)}
.lh-note{margin:14px 0 0;font-size:13px;color:var(--muted)}
.lh-h2{font-size:18px;margin:26px 0 12px}
.lh-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lh-docs a{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface,#fff);box-shadow:var(--e1);color:var(--ink);text-decoration:none}
.lh-docs a:hover{border-color:var(--brand-edge)}
.lh-docs .ic{display:inline-flex;color:var(--brand-ink)}
.lh-docs b{flex:1}
.lh-docs .go{color:var(--faint)}
html[dir=rtl] .lh-docs .go .i{transform:scaleX(-1)}
@media (max-width:640px){ .lh-dl,.lh-docs{grid-template-columns:minmax(0,1fr)} }

/* the slim title already names the step: the card keeps only its tools row (no second "2 / 3" label) */
.pk-box > .rx-dia-w .rx-part-row > .rx-part,.pay-box > .rx-part-row > .rx-part{visibility:hidden;width:0;overflow:hidden}
.pk-box .rx-part-row,.pay-box .rx-part-row{justify-content:flex-end}
.pk-box .rx-part-row{margin-bottom:12px}

/* ---------- section bars v2 (2026-10-10): icon tile + title over a short line; no numbers ---------- */
.sec-slim{gap:12px;flex-wrap:nowrap;padding:12px 16px;margin-bottom:16px}
.sec-slim .ss-n{display:none}
.sec-slim .ss-ic{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:13px;background:var(--grad);color:#022A33;box-shadow:0 8px 16px -10px rgba(255,46,147,.8)}
.sec-slim .ss-ic .i{width:21px;height:21px}
.ss-tx{display:flex;flex-direction:column;min-width:0;gap:2px}
.ss-tx h2{margin:0;font-size:18px;line-height:1.25}
.ss-tx small{font-size:13px;color:var(--muted);line-height:1.4}
.sec-slim .ss-sub{display:none}
.sec-pk > .wrap > .sec-slim,.sec-slim{max-width:980px;margin-inline:auto}
.sec-steps.sec-pk,.sec-why.sec-pk,.sec-learn.sec-pk,.sec-biz.sec-pk{padding-top:36px;padding-bottom:36px}
.sec-learn.sec-pk .px-head,.sec-biz.sec-pk .px-head,.sec-steps.sec-pk .px-head{display:none}
@media (max-width:640px){ .sec-slim{padding:10px 12px} .ss-tx h2{font-size:16.5px} .sec-steps.sec-pk,.sec-why.sec-pk,.sec-learn.sec-pk,.sec-biz.sec-pk{padding-top:24px;padding-bottom:24px} }

/* ---------- Why BIGO Diamond: the agency card and the facts ---------- */
.ag-card{max-width:980px;margin:0 auto 16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px 16px;padding:18px;border-radius:22px;
  background:radial-gradient(70% 120% at 0% 0%,rgba(255,64,160,.18),transparent 60%),linear-gradient(140deg,#0B1324,#14304A);color:#fff;box-shadow:var(--e3)}
.ag-av{position:relative;width:68px;height:68px;flex:none;border-radius:50%;padding:3px;background:var(--grad)}
.ag-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#0B1324}
.ag-tick{position:absolute;bottom:-2px;inset-inline-end:-2px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#1DA1F2;color:#fff;border:2px solid #0B1324}
.ag-tick .i{width:13px;height:13px;stroke-width:3}
.ag-tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.ag-badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:3px 10px;border-radius:99px;background:rgba(255,64,160,.18);color:#5EE6E6;font-size:12px;font-weight:800}
.ag-badge .i{width:14px;height:14px}
.ag-tx b{font-size:19px;font-weight:800}
.ag-tx small{color:#B8C4D6;font-size:13px}
.ag-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ag-acts .btn{height:44px}
.ag-acts .btn-line{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25);color:#fff}
.ag-note{grid-column:1/-1;margin:0;font-size:12.5px;color:#94A3B8}
.why-grid2{list-style:none;max-width:980px;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.why-grid2 li{display:flex;align-items:flex-start;gap:14px;padding:16px;border-radius:18px;background:var(--surface,#fff);border:1px solid var(--line);box-shadow:var(--e1)}
.why-grid2 .ic{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:13px;background:var(--brand-soft);color:var(--brand-ink)}
.why-grid2 .ic .i{width:21px;height:21px}
.why-grid2 h3{margin:0 0 4px;font-size:16px}
.why-grid2 p{margin:0;font-size:14px;color:var(--muted);line-height:1.55}
.y-link{display:inline-block;margin-top:6px;font-size:13.5px;font-weight:800}
@media (max-width:760px){
  .ag-card{grid-template-columns:auto minmax(0,1fr);margin-inline:-12px}
  .ag-acts{grid-column:1/-1;justify-content:stretch}
  .ag-acts .btn{flex:1 1 0}
  .why-grid2{grid-template-columns:minmax(0,1fr);margin-inline:-12px}
}

/* =====================================================================================================
   Retouch (2026-10-10): the owner's logo, the chosen country's three flag colours (--fc1/2/3, set in <head>)
   behind every section, the WhatsApp Dino, a footer per country, the side menu's account card, "BIGO explained"
   ===================================================================================================== */
html{--fc1:#FF2E93;--fc2:#B64DFF;--fc3:#FFC21A}   /* defaults; the country's own set comes in <head> on :root */

/* logo: the artwork itself; a white-lettered copy on dark backgrounds */
.bd-logo{gap:0;line-height:0}
.bd-logo-img{display:block;height:42px;width:auto}
.bd-logo-dark{display:none}
.site-footer .bd-logo-light,[data-theme=dark] .bd-logo-light{display:none}
.site-footer .bd-logo-dark,[data-theme=dark] .bd-logo-dark{display:block}
.site-footer .bd-logo-img{height:52px}
.site-footer .logo img{filter:none}
@media (max-width:640px){ .bd-logo-img{height:34px} }
@media (max-width:374px){ .bd-logo-img{height:30px} }

/* the country's colours: a flag hairline under the header strip, tinted glows and the pattern behind each section */
.hdr-sub{position:relative;background:linear-gradient(90deg,color-mix(in srgb,var(--fc1) 7%,transparent),color-mix(in srgb,var(--fc2) 6%,transparent))}
.hdr-sub::after{content:"";position:absolute;inset:auto 0 -1px 0;height:2px;opacity:.85;background:linear-gradient(90deg,var(--fc1),var(--fc3) 50%,var(--fc2))}
.hero[data-pattern=facet],.sec-pk[data-pattern=facet]{--pat:url(/assets/dp/pat-facet.svg);--pat-s:64px}
.sec-pk{background:
  radial-gradient(46% 60% at 86% 14%,color-mix(in srgb,var(--fc1) 13%,transparent),transparent 70%),
  radial-gradient(34% 44% at 4% 8%,color-mix(in srgb,var(--fc2) 11%,transparent),transparent 70%),
  radial-gradient(40% 40% at 50% 100%,color-mix(in srgb,var(--fc3) 9%,transparent),transparent 70%),
  linear-gradient(180deg,var(--bg) 0%,#FFFFFF 30%,#F8FBFE 70%,var(--bg) 100%)}
.sec-pk:nth-of-type(even){background:
  radial-gradient(44% 56% at 10% 18%,color-mix(in srgb,var(--fc2) 12%,transparent),transparent 70%),
  radial-gradient(36% 46% at 96% 70%,color-mix(in srgb,var(--fc1) 11%,transparent),transparent 70%),
  linear-gradient(180deg,var(--bg) 0%,#FFFFFF 35%,#F8FBFE 75%,var(--bg) 100%)}
.sec-pk.pk-themed::before{opacity:.11}
.sec-slim{position:relative}
.sec-pk .sec-slim::after{content:"";position:absolute;inset:auto 18px -1px 18px;height:2px;border-radius:2px;opacity:.75;background:linear-gradient(90deg,var(--fc1),var(--fc2))}
.site-footer{position:relative}
.site-footer::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--fc1) 0 33.4%,var(--fc3) 33.4% 66.6%,var(--fc2) 66.6%)}

/* WhatsApp Dino: always in its corner; steps aside only while the page scrolls, the keyboard is up or the menu is open */
.wa-fab{transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.2,1)}
.wa-fab-b{width:68px;height:68px;background:none;box-shadow:none;border-radius:0}
.wa-fab-b img{width:68px;height:68px;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(11,19,36,.28));transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.wa-fab:hover .wa-fab-b,.wa-fab:focus-visible .wa-fab-b{transform:none;box-shadow:none}
.wa-fab:hover .wa-fab-b img,.wa-fab:focus-visible .wa-fab-b img{transform:translateY(-3px) rotate(-4deg)}
.wa-fab:focus-visible .wa-fab-b{outline-offset:0;border-radius:18px}
html:not([data-nav-open])[data-qrv=yes] .wa-fab.is-in,html:not([data-nav-open]) .wa-fab.is-in.is-away,html:not([data-nav-open]) .wa-fab.is-in.is-clear{opacity:1;transform:none;pointer-events:auto}
html:not([data-nav-open]) .wa-fab.is-in.is-scroll,html:not([data-nav-open]) .wa-fab.is-in.is-typing{opacity:0;transform:translateY(18px) scale(.9);pointer-events:none}
@media (max-width:720px){ .wa-fab-b,.wa-fab-b img{width:58px;height:58px} }

/* footer: brand + facts, four link columns, this country's ways to pay, then the market and language */
.ft-tag{margin:16px 0 14px;max-width:36ch;font-size:14.5px;line-height:1.55;color:#B4C0D2}
.ft-facts{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.ft-facts li{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:#E2E8F0}
.ft-facts .i{width:16px;height:16px;flex:none;color:#5EE6E6}
.ft-pays{grid-template-columns:repeat(auto-fit,minmax(240px,max-content));gap:22px 44px}
.ft-pg-l li{height:38px;min-width:62px;border-radius:10px;box-shadow:0 6px 14px -10px rgba(0,0,0,.6)}
.ft-pg-l li.is-black{background:#000}
.ft-pg-l li.is-navy{background:#16213A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ft-pg-l img{max-height:22px;max-width:80px}
.ft-loc{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px}
.ft-loc .ft-langs{display:flex;flex-wrap:wrap;gap:4px 12px}
.ft-operator{margin:18px 0 0;font-size:12.5px;line-height:1.6;color:#7C8BA3}
.ft-operator a{color:#A9B6C8}
@media (max-width:1100px) and (min-width:721px){ .ft-brand .ft-facts{grid-column:1/-1;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 22px;margin:4px 0 0} }
@media (max-width:720px){ .ft-loc{flex-direction:column;align-items:flex-start} .ft-pays{grid-template-columns:minmax(0,1fr)} }

/* side menu: the account card (wallet, pages, then settings & security), preferences, then legal */
.m-top{padding:14px;border-radius:20px;border:1px solid var(--line);background:
  radial-gradient(80% 90% at 100% 0%,color-mix(in srgb,var(--fc1) 14%,transparent),transparent 70%),
  radial-gradient(70% 80% at 0% 100%,color-mix(in srgb,var(--fc2) 12%,transparent),transparent 70%),#fff;box-shadow:var(--e1)}
.m-acct .av.av-ic{width:48px;height:48px;border-radius:15px;background:var(--grad);color:var(--on-grad);box-shadow:0 10px 18px -12px rgba(0,150,200,.9)}
.m-acct .av.av-ic .i{width:22px;height:22px}
.m-acct .m-who{min-width:0}
.m-acct .m-who b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-acct .m-who small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-bal{margin-top:12px;border-radius:14px;background:linear-gradient(135deg,var(--navy),#1B2B4B);box-shadow:0 12px 22px -16px rgba(11,19,36,.9)}
.m-acct-links{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
.m-acct-links a{flex-direction:column;justify-content:center;gap:5px;height:auto;min-height:64px;padding:8px 4px;border-radius:13px;font-size:12px;font-weight:700;text-align:center;line-height:1.15;background:rgba(255,255,255,.86)}
.m-acct-links a .i{width:20px;height:20px}
.m-acct-set{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-2,#D5DEEA)}
.m-acct-set a{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:700}
.m-acct-set a .i{width:17px;height:17px;color:var(--brand-ink)}
.m-acct-set a[aria-current]{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.m-h{margin:0 4px 8px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint,#8A97AB)}
html[lang=ar] .m-h,html[lang=fa] .m-h{letter-spacing:0;font-size:12.5px}
.m-prefs{padding:12px;border-radius:18px;background:var(--bg);border:1px solid var(--line)}
.m-prefs .m-market{border:0;padding:0;background:#fff;border-radius:13px;box-shadow:0 0 0 1px var(--line)}
.m-prefs .m-market summary{padding:10px 12px;gap:10px;justify-content:flex-start}
.m-prefs .m-market .m-cur{margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--ink);min-width:0}
.m-prefs .m-market .m-cur [data-country]{max-width:140px;line-height:1.25;text-align:end}
.m-prefs .m-market .mp-k{white-space:nowrap}
.m-prefs .m-mk{padding:0 8px 8px}
.mp-ic{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--brand-soft);color:var(--brand-ink)}
.mp-ic .i{width:17px;height:17px}
.mp-k{font-size:14px;font-weight:700;color:var(--ink)}
.mp-lang{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 10px;margin-top:8px;padding:10px 12px;background:#fff;border-radius:13px;box-shadow:0 0 0 1px var(--line)}
.mp-lang .m-langs{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.m-more{padding:4px 0 0;border-top:0}

/* "BIGO explained": BIGO LIVE, the BIGO ID, the diamonds, and how a recharge works (drawn screens, no screenshots) */
.lx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1120px}
.lx-card{position:relative;display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:22px;align-items:center;padding:22px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--e2);overflow:hidden}
.lx-intro{grid-column:1/-1;grid-template-columns:minmax(0,260px) minmax(0,1fr);padding:26px 30px;background:
  radial-gradient(60% 90% at 0% 0%,color-mix(in srgb,var(--fc1) 10%,transparent),transparent 70%),
  radial-gradient(50% 80% at 100% 100%,color-mix(in srgb,var(--fc2) 9%,transparent),transparent 70%),#fff}
.lx-how{grid-column:1/-1;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:stretch}
.lx-art{position:relative;display:grid;place-items:center;align-self:stretch;min-height:250px;border-radius:18px;
  background:linear-gradient(155deg,color-mix(in srgb,var(--fc1) 16%,#fff),color-mix(in srgb,var(--fc2) 14%,#fff));overflow:hidden}
.lx-art::before{content:"";position:absolute;inset:0;opacity:.18;background:linear-gradient(135deg,var(--fc1),var(--fc2));-webkit-mask:url(/assets/dp/pat-facet.svg) 0 0/48px repeat;mask:url(/assets/dp/pat-facet.svg) 0 0/48px repeat}
.lx-phone{position:relative;width:138px;height:232px;padding:7px;border-radius:26px;background:#0B1324;box-shadow:0 26px 40px -22px rgba(11,19,36,.75),inset 0 0 0 1.5px rgba(255,255,255,.12)}
.lx-phone::before{content:"";position:absolute;top:11px;left:50%;width:40px;height:9px;margin-left:-20px;border-radius:9px;background:#0B1324;z-index:3}
.lx-scr{position:relative;height:100%;border-radius:20px;overflow:hidden;background:#fff;display:flex;flex-direction:column;align-items:center}
/* live room */
.lx-live{background:radial-gradient(70% 50% at 50% 42%,rgba(255,255,255,.35),transparent 70%),linear-gradient(170deg,var(--fc1),var(--fc2))}
.lx-livetag{position:absolute;top:24px;inset-inline-start:9px;padding:2px 7px;border-radius:6px;background:#FF2D55;color:#fff;font-size:9px;font-weight:800;letter-spacing:.06em}
.lx-viewers{position:absolute;top:24px;inset-inline-end:9px;display:flex;align-items:center;gap:3px;padding:2px 6px;border-radius:9px;background:rgba(0,0,0,.35);color:#fff;font-size:9px;font-weight:700}
.lx-viewers .i{width:10px;height:10px}
.lx-host{position:absolute;top:62px;left:50%;width:62px;height:62px;margin-left:-31px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#FFE1C7 0 26%,transparent 27%),radial-gradient(circle at 50% 100%,#fff 0 45%,transparent 46%),rgba(255,255,255,.25);box-shadow:0 0 0 3px rgba(255,255,255,.7)}
.lx-chat{position:absolute;inset-inline-start:9px;bottom:14px;display:grid;gap:4px}
.lx-chat b{display:block;height:8px;border-radius:5px;background:rgba(0,0,0,.28)}
.lx-chat b:nth-child(1){width:58px}.lx-chat b:nth-child(2){width:74px}.lx-chat b:nth-child(3){width:44px}
.lx-hearts{position:absolute;inset-inline-end:14px;bottom:16px;width:20px;height:110px}
.lx-hearts i{position:absolute;bottom:0;left:0;width:14px;height:14px;background:#FF4D7E;transform:rotate(45deg);border-radius:3px 0 0 0;opacity:0;animation:lxHeart 3.2s ease-in infinite}
.lx-hearts i::before,.lx-hearts i::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:inherit}
.lx-hearts i::before{left:-7px;top:0}.lx-hearts i::after{left:0;top:-7px}
.lx-hearts i:nth-child(2){animation-delay:1.1s;background:#FFC21A}.lx-hearts i:nth-child(3){animation-delay:2.1s;background:#fff}
@keyframes lxHeart{0%{opacity:0;transform:translate(0,0) rotate(45deg) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(-8px,-100px) rotate(45deg) scale(1)}}
.lx-giftfly{position:absolute;bottom:60px;left:50%;margin-left:-14px;animation:lxGift 3.6s cubic-bezier(.3,.7,.3,1) infinite}
.lx-giftfly img{display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
@keyframes lxGift{0%,10%{opacity:0;transform:translateY(30px) scale(.6)}30%{opacity:1;transform:translateY(0) scale(1.15)}60%{opacity:1;transform:translateY(-18px) scale(1)}80%,100%{opacity:0;transform:translateY(-60px) scale(.8)}}
/* profile with the ID */
.lx-profile{padding-top:34px;gap:7px;background:linear-gradient(180deg,color-mix(in srgb,var(--fc1) 22%,#fff) 0 70px,#fff 70px)}
.lx-pav{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#FFE1C7 0 24%,transparent 25%),radial-gradient(circle at 50% 100%,#94A3B8 0 44%,transparent 45%),#E2E8F0;box-shadow:0 0 0 3px #fff}
.lx-pname{display:block;width:62px;height:9px;border-radius:5px;background:#CBD5E1}
.lx-pid{position:relative;display:inline-flex;align-items:center;gap:3px;margin-top:4px;padding:5px 8px;border-radius:9px;background:#fff;color:#334155;font-size:11px;line-height:1;white-space:nowrap;direction:ltr;
  box-shadow:0 0 0 2px var(--fc1),0 0 0 6px color-mix(in srgb,var(--fc1) 25%,transparent);animation:lxRing 2.2s ease-in-out infinite}
.lx-pid b{font-weight:800;color:#0B1324}
.lx-copy{display:inline-flex;color:#64748B}.lx-copy .i{width:10px;height:10px}
.lx-ring{display:none}
@keyframes lxRing{50%{box-shadow:0 0 0 2px var(--fc1),0 0 0 10px color-mix(in srgb,var(--fc1) 6%,transparent)}}
.lx-pstats{display:flex;gap:6px;margin-top:6px}
.lx-pstats i{width:30px;height:24px;border-radius:7px;background:#F1F5F9}
.lx-callout{position:absolute;bottom:14px;inset-inline-end:12px;padding:6px 10px;border-radius:10px;background:#0B1324;color:#fff;font-size:12px;font-weight:800;box-shadow:0 10px 18px -10px rgba(11,19,36,.8)}
/* gift panel */
.lx-gifts{padding:30px 8px 10px;gap:8px;background:linear-gradient(180deg,#1B2440,#0B1324)}
.lx-bal{display:inline-flex;align-items:center;gap:4px;align-self:flex-end;padding:3px 8px;border-radius:9px;background:rgba(255,194,26,.16);color:#FFD75E;font-size:10px}
.lx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:100%}
.lx-grid i{position:relative;display:grid;place-items:center;height:46px;border-radius:9px;background:rgba(255,255,255,.07);font-style:normal}
.lx-grid i::before{content:"";width:20px;height:20px;margin-top:-10px;background:url(/assets/dp/gem-96.webp) center/contain no-repeat}
.lx-grid i::after{content:attr(data-g);position:absolute;bottom:4px;font-size:8.5px;font-weight:800;color:#FFD75E}
.lx-grid i:nth-child(5){background:rgba(255,194,26,.18);box-shadow:inset 0 0 0 1.5px #FFC21A}
.lx-send{margin-top:auto;width:100%;padding:6px 0;border-radius:9px;background:linear-gradient(135deg,#FFD24A,#FFAA00);color:#3A2600;font-size:11px;font-weight:800;text-align:center}
/* text */
.lx-tx{min-width:0}
.lx-k{display:inline-block;margin-bottom:8px;padding:3px 10px;border-radius:99px;background:color-mix(in srgb,var(--fc1) 12%,#fff);color:color-mix(in srgb,var(--fc1) 70%,#0B1324);font-size:12px;font-weight:800;letter-spacing:.02em}
.lx-tx h3{margin:0 0 8px;font-size:21px;line-height:1.3;color:var(--ink)}
.lx-tx p{margin:0 0 10px;font-size:15px;line-height:1.65;color:var(--ink-2)}
.lx-ticks{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.lx-ticks li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.lx-ticks li .i{width:18px;height:18px;flex:none;margin-top:2px;color:var(--brand-ink)}
.lx-steps{list-style:none;counter-reset:lx;margin:12px 0 0;padding:0;display:grid;gap:9px}
.lx-steps li{counter-increment:lx;position:relative;padding-inline-start:36px;min-height:26px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.lx-steps li::before{content:counter(lx);position:absolute;inset-inline-start:0;top:0;width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:var(--grad);color:#022A33;font-size:12.5px;font-weight:800}
.lx-tip{display:flex;gap:8px;margin:14px 0 0;padding:10px 12px;border-radius:12px;background:#FFF8E1;border:1px solid #F4DE96;font-size:13.5px;line-height:1.5;color:#5C4400}
.lx-tip .i{width:17px;height:17px;flex:none;margin-top:1px;color:#B07A00}
.lx-we{padding:18px 20px;border-radius:18px;background:linear-gradient(150deg,var(--navy),#1B2B4B);color:#fff;display:flex;flex-direction:column;align-items:flex-start}
.lx-we .lx-k{background:rgba(255,255,255,.12);color:#FFC2E0}
.lx-we h3{color:#fff}
.lx-we p{color:#C5D0E0}
.lx-we .btn{margin-top:auto}
@media (max-width:960px){
  .lx{grid-template-columns:minmax(0,1fr)}
  .lx-card,.lx-intro,.lx-how{grid-template-columns:minmax(0,1fr);padding:16px}
  .lx-art{min-height:220px}
  .lx-intro .lx-art{min-height:240px}
}
@media (max-width:640px){ .lx{margin-inline:-12px} .lx-tx h3{font-size:19px} }
@media (prefers-reduced-motion:reduce){ .lx-hearts i,.lx-giftfly,.lx-pid{animation:none} .lx-hearts i{opacity:1} }

/* step subtitles back on the packages and payments cards (2026-10-10): "2 Choose diamonds" / "3 Pay" on their own line
   above the tools; the buttons stay as they were, on the end side */
.pk-box > .rx-dia-w .rx-part-row > .rx-part,.pay-box > .rx-part-row > .rx-part{visibility:visible;width:auto;overflow:visible}
.pk-box .rx-part-row,.pay-box .rx-part-row{flex-wrap:wrap!important;justify-content:flex-end}
.pk-box .rx-part-row > .rx-part,.pay-box .rx-part-row > .rx-part{flex:1 0 100%!important;margin:0 0 2px}

/* saved accounts: the primary badge; edit mode = a list to drag, move up, pin (star) or remove */
.sv-prim{display:inline-flex;align-items:center;gap:4px;margin-top:3px;padding:1px 7px 1px 5px;border-radius:99px;background:#FFF4CC;color:#7A5600;font-size:11px;font-weight:800;line-height:1.5;width:max-content}
.sv-prim .i{width:11px;height:11px;fill:#F5B400;stroke:#C98F00}
.sv-chip.is-primary{border-color:#F4D46A}
.sv-hint{display:flex;gap:8px;margin:0 0 10px;padding:9px 11px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--ink-2)}
.sv-hint .i{width:16px;height:16px;flex:none;margin-top:2px;color:var(--brand-ink)}
.sv-list.is-list{display:grid;gap:8px;overflow:visible;padding:0;scroll-snap-type:none}
.sv-row{display:grid!important;grid-template-columns:auto auto minmax(0,1fr) auto auto auto;align-items:center;gap:8px;padding:8px;border:1.5px solid var(--line);border-radius:14px;background:#fff}
.sv-row.is-primary{border-color:#F4D46A;background:linear-gradient(90deg,#FFFBEA,#fff 60%)}
.sv-row .sv-tx{min-width:0}
.sv-row .sv-tx b,.sv-row .sv-tx small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-row .sv-tx b{font-size:14.5px}
.sv-row .sv-tx small{font-size:12px;color:var(--muted)}
.sv-grip{display:grid;place-items:center;width:28px;height:40px;color:var(--faint,#94A3B8);cursor:grab;touch-action:none}
.sv-grip .i{width:18px;height:18px}
.sv-ghost{opacity:.4}
.sv-row.sortable-chosen{box-shadow:var(--e2)}
.sv-star{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.sv-star .i{width:15px;height:15px}
.sv-row.is-primary .sv-star{border-color:#F4D46A;color:#7A5600;background:#FFF4CC}
.sv-row.is-primary .sv-star .i,.sv-star.is-pinned .i{fill:#F5B400;stroke:#C98F00}
.sv-star.is-pinned{box-shadow:0 0 0 2px #F5B400 inset}
.sv-up{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink-2);cursor:pointer}
span.sv-up{border:0;background:none;cursor:default}
.sv-up .i{width:16px;height:16px;transform:rotate(180deg)}
.sv-row .sv-x{position:static;transform:none;width:34px;height:34px}
@media (max-width:420px){ .sv-star span{display:none} .sv-star{width:34px;padding:0;justify-content:center} .sv-row{gap:6px;padding:6px} }

/* =====================================================================================================
   Inner pages in the site's style (2026-10-10): the country's colours behind every page, a title card like the
   home sections, tabs as pills; Settings, Wallet, Transactions, quick Recharge; side menu app card + language
   dropdown; the install guide
   ===================================================================================================== */
body:not([data-page=home]){background:
  radial-gradient(60% 40% at 92% 0%,color-mix(in srgb,var(--fc1) 11%,transparent),transparent 70%),
  radial-gradient(50% 36% at 0% 10%,color-mix(in srgb,var(--fc2) 9%,transparent),transparent 70%),var(--bg);background-repeat:no-repeat}
body:not([data-page=home]) main.wrap{position:relative}
body:not([data-page=home]) main.wrap::before{content:"";position:absolute;inset:0 0 auto;height:320px;z-index:-1;opacity:.09;pointer-events:none;
  background:linear-gradient(135deg,var(--fc1),var(--fc2));-webkit-mask:url(/assets/dp/pat-facet.svg) 0 0/64px repeat,linear-gradient(#000,transparent);mask:url(/assets/dp/pat-facet.svg) 0 0/64px repeat;
  -webkit-mask-image:url(/assets/dp/pat-facet.svg),linear-gradient(180deg,#000,transparent);mask-image:url(/assets/dp/pat-facet.svg),linear-gradient(180deg,#000,transparent);
  -webkit-mask-size:64px,100% 100%;mask-size:64px,100% 100%;-webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;-webkit-mask-composite:source-in;mask-composite:intersect}
.acc-head{position:relative;align-items:center;padding:16px 18px;border-radius:18px;background:var(--surface,#fff);border:1px solid var(--line);box-shadow:var(--e1)}
.acc-head::after{content:"";position:absolute;inset:auto 18px -1px 18px;height:2px;border-radius:2px;opacity:.8;background:linear-gradient(90deg,var(--fc1),var(--fc2))}
.acc-head h1{font-size:26px}
.acc-head p{font-size:14.5px}
.acc-tabs{border-bottom:0;margin-bottom:18px}
.acc-tabs-in{gap:6px;padding:2px}
.acc-tabs a{padding:9px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface,#fff);font-size:14px;font-weight:600}
.acc-tabs a::after{display:none}
.acc-tabs a[aria-current]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);box-shadow:0 0 0 3px var(--ring)}
@media (max-width:640px){ .acc-head{padding:14px} .acc-head h1{font-size:22px} .acc-tabs{margin-inline:-16px} .acc-tabs-in{padding:2px 16px} }

/* transactions: the method next to the kind; the USD value under a local-currency amount */
.tx-m{font-weight:500;color:var(--muted);font-size:.92em}
.rows .e small{display:block}

/* settings */
.set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.set-grid > .set-box:first-child{grid-row:span 3}
.set-theme{display:flex;width:100%}
.set-theme label{flex:1}
.set-theme label > span{display:flex;align-items:center;justify-content:center;gap:8px}
.set-theme .i{width:17px;height:17px}
.set-box .btn{margin-top:10px}
@media (max-width:860px){ .set-grid{grid-template-columns:minmax(0,1fr)} .set-grid > .set-box:first-child{grid-row:auto} }

/* quick recharge */
.rq-page{max-width:640px}
.rq{padding:20px}
.rq .rx-part{margin:0 0 10px}
.rq .rq-p2{margin-top:22px}
.rq-one{display:flex;align-items:center;gap:10px}
.rq-one .rq-acct{flex:1;min-width:0}
.rq-acct{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border:1.5px solid var(--line);border-radius:16px;background:#fff;cursor:pointer}
.rq-acct input{position:absolute;opacity:0;pointer-events:none}
.rq-acct.is-on,.rq-acct:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.rq-acct:has(input:focus-visible){outline:2.5px solid var(--blue);outline-offset:2px}
.rq-tx{min-width:0;flex:1;display:flex;flex-direction:column}
.rq-tx b,.rq-tx small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rq-tx small{color:var(--muted);font-size:12.5px}
.rq-tick{display:none;width:24px;height:24px;border-radius:50%;background:var(--grad);color:#022A33;place-items:center}
.rq-tick .i{width:14px;height:14px}
.rq-acct:has(input:checked) .rq-tick{display:grid}
.rq-list{display:grid;gap:8px}
.rq-addbtn{margin-top:8px}
.rq-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;font-weight:700}
html:not([dir=rtl]) .rq-back .i{transform:scaleX(-1)}
.rq-add-row{display:flex;gap:8px}
.rq-add-row .rx-input{flex:1;min-width:0;height:52px;padding:0 14px;border:1.5px solid var(--line);border-radius:14px;font-size:17px;background:#fff}
.rq-hint{display:flex;gap:6px;margin:8px 0 0;font-size:13px;color:var(--muted)}
.rq-hint .i{width:15px;height:15px;flex:none;margin-top:2px}
.rq-mode{display:flex;width:100%;margin-bottom:10px}
.rq-mode label{flex:1;text-align:center}
.rq-sel{position:relative;display:flex;align-items:center}
.rq-gem{position:absolute;inset-inline-start:14px;display:grid;place-items:center;pointer-events:none}
.rq-select{appearance:none;-webkit-appearance:none;width:100%;height:56px;padding:0 44px 0 48px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:inherit;font-size:16.5px;font-weight:700;cursor:pointer}
html[dir=rtl] .rq-select{padding:0 48px 0 44px}
.rq-select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.rq-sel .chev{position:absolute;inset-inline-end:14px;pointer-events:none;color:var(--muted)}
.rq-cu{position:relative;display:flex;align-items:center}
.rq-cu .rx-input{width:100%;height:56px;padding:0 90px 0 16px;border:1.5px solid var(--line);border-radius:14px;font-size:18px;font-weight:700;background:#fff}
html[dir=rtl] .rq-cu .rx-input{padding:0 16px 0 90px}
.rq-cu-u{position:absolute;inset-inline-end:16px;color:var(--muted);font-weight:600}
.rq-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-height:28px;margin:12px 2px 16px;font-size:14px;color:var(--muted)}
.rq-price b{font-size:22px;color:var(--ink)}
.rq-price .bad{color:var(--danger,#D92D20);font-weight:600}
.rq-go{height:56px;font-size:17px}
.rq-note{display:flex;gap:8px;justify-content:center;margin:12px 0 0;font-size:13px;color:var(--muted);text-align:center}
.rq-note .i{width:15px;height:15px;flex:none;margin-top:2px;color:var(--good,#0F8A4B)}

/* side menu: 5 account tiles, the app card, the language dropdown */
.m-acct-links{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.m-acct-links a{min-height:62px;padding:8px 2px;font-size:11px}
.m-acct-links a .i{width:19px;height:19px}
.m-app{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:linear-gradient(135deg,var(--navy),#1B2B4B);color:#fff;box-shadow:0 12px 22px -16px rgba(11,19,36,.9)}
.m-app[hidden]{display:none}
.m-app-ic img{display:block;width:40px;height:40px;border-radius:11px;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.m-app-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.m-app-t b{font-size:14px}
.m-app-t small{font-size:12px;color:#B8C4D6}
.m-app .btn{flex:none;height:36px;padding:0 12px;font-size:13px}
.m-app .btn .i{width:16px;height:16px}
.m-prefs .m-langd{margin-top:8px}
.m-langd .m-langs{display:grid;gap:4px;padding:0 8px 8px}
.m-langd .m-lang{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 12px;border:0;border-radius:11px;background:transparent;color:var(--ink);font-size:15px;font-weight:600;text-decoration:none}
.m-langd .m-lang:hover{background:var(--bg)}
.m-langd .m-lang .ck{display:none;color:var(--brand-ink)}
.m-langd .m-lang[aria-current]{background:var(--brand-soft);color:var(--brand-ink)}
.m-langd .m-lang[aria-current] .ck{display:inline-flex}
.m-langd .m-lang .ck .i{width:16px;height:16px}

/* the install guide */
.app-sheet{width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:22px;background:var(--surface,#fff);color:var(--ink);box-shadow:var(--e3)}
.app-sheet::backdrop{background:rgba(11,19,36,.55);backdrop-filter:blur(2px)}
.as-in{position:relative;padding:24px 20px 20px;text-align:center}
.as-x{position:absolute;top:10px;inset-inline-end:10px;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:11px;background:transparent;color:var(--muted);cursor:pointer}
.as-x .i{width:18px;height:18px}
.as-ic{display:block;margin:0 auto 10px;border-radius:16px;box-shadow:var(--e2)}
.as-in h2{margin:0 0 6px;font-size:20px}
.as-why{margin:0 0 16px;font-size:14px;color:var(--muted)}
.as-steps{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px;text-align:start}
.as-steps li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--bg);border:1px solid var(--line);font-size:14.5px;line-height:1.45}
.as-n{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--grad);color:#022A33;font-size:12px;font-weight:800}
.as-si{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--blue,#B64DFF)}
.as-si .i{width:18px;height:18px}

/* =====================================================================================================
   Round 3 (2026-10-10): Apple Pay white on black, Google photo, footer ways to pay, desktop hero, bigger WhatsApp,
   country popover inside the screen, no zoom
   ===================================================================================================== */
.pm-logo[data-brand=apple_pay] img{filter:none}

/* the customer's Google photo over the user icon */
.av.has-photo{position:relative;overflow:hidden;background:#fff}
.av.has-photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.av.has-photo > [data-ic],.av.has-photo > .i{visibility:hidden}

/* footer: beans strip, groups with icons, manual transfer chips */
.ft-beans{display:flex;align-items:center;gap:14px;margin-top:40px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(255,194,26,.14),rgba(242,140,0,.08));border:1px solid rgba(255,194,26,.35)}
.fb-ic{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:13px;background:rgba(255,194,26,.16)}
.fb-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fb-t b{color:#FFE08A;font-size:15px}
.fb-t small{color:#B4C0D2;font-size:13px}
.ft-beans .btn{flex:none}
.ft-pays{margin-top:22px;grid-template-columns:repeat(auto-fit,minmax(220px,max-content))}
.ft-pg-h{display:flex;align-items:center;gap:7px}
.ft-pg-h .i{width:16px;height:16px;color:#5EE6E6}
.ft-pg-manual{grid-column:1/-1}
.ft-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ft-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 8px;border-radius:10px;background:#fff;color:#0B1324;font-size:13px;font-weight:700;box-shadow:0 6px 14px -10px rgba(0,0,0,.6)}
html[dir=rtl] .ft-chip{padding:0 8px 0 12px}
.ft-chip img{width:22px;height:22px;object-fit:contain}
.ft-chip .fc-ic .i{width:18px;height:18px;color:#0B1324}
.fc-dot{width:22px;height:22px;display:grid;place-items:center;border-radius:6px;color:#fff;font-size:12px;font-weight:800}
.ft-pg-note{margin:10px 0 0;font-size:12.5px;color:#94A3B8;max-width:70ch}
@media (max-width:720px){ .ft-beans{flex-wrap:wrap} .ft-beans .btn{width:100%;justify-content:center} }

/* desktop hero: the picture on its own row with short links beside it; the stepper and form below, centred */
.hero-links{display:none}
@media (min-width:961px){
  .hero-has-banner .hero-grid{grid-template-columns:minmax(0,1fr);row-gap:26px;padding-top:28px}
  .hero-has-banner .hero-side{order:-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,300px);gap:20px;align-items:stretch}
  .hero-has-banner .hero-pic-col{max-width:none;justify-self:stretch;align-self:stretch}
  .hero-has-banner .hero-pic{height:100%;max-height:520px}
  .hero-has-banner .hero-main{width:100%;max-width:860px;justify-self:center}
  .hero-has-banner .hero-steps{margin-top:0}
  .hero-has-banner .hero-links{display:flex;flex-direction:column;gap:10px}
}
.hl{flex:1;display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface,#fff);box-shadow:var(--e1);color:var(--ink);text-decoration:none;font:inherit;text-align:start;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.hl:hover{border-color:var(--brand-edge);transform:translateY(-1px);box-shadow:var(--e2)}
.hl-ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--fc1) 12%,#fff);color:color-mix(in srgb,var(--fc1) 75%,#0B1324)}
.hl-ic .i{width:20px;height:20px}
.hl-deal .hl-ic{background:var(--grad);color:#022A33}
.hl-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.hl-t b{font-size:15px}
.hl-t small{font-size:12.5px;color:var(--muted)}
.hl-go{color:var(--faint,#94A3B8);display:inline-flex}
.hl-go .i{width:16px;height:16px}
html[dir=rtl] .hl-go .i{transform:scaleX(-1)}

/* WhatsApp Dino, larger */
.wa-fab-b,.wa-fab-b img{width:84px;height:84px}
@media (max-width:720px){ .wa-fab-b,.wa-fab-b img{width:72px;height:72px} }

/* the country popover opens from the start of the strip and stays on screen */
.hdr-sub .loc-pop{inset-inline-end:auto;inset-inline-start:0;max-width:calc(100vw - 24px)}

/* no zoom: no double-tap zoom, and 16px text in fields so iOS never zooms on focus */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@supports (-webkit-touch-callout:none){ input,select,textarea{font-size:max(16px,1em)!important} }
@media (min-width:961px){ .hero-has-banner .hero-main > .rx,.hero-has-banner .hero-steps{width:100%;max-width:720px;margin-inline:auto} }
.ft-beans .btn{border-color:rgba(255,224,138,.45);color:#FFE08A;background:rgba(255,194,26,.10)}

/* ===== Round 4 (2026-10-10) ===== */
/* final band: Apple Pay on its black tile */
.fp-logos li.is-black{background:#000}
/* side menu: Overview beside the name; four equal buttons; help and sign-out set apart */
.m-acct{flex-wrap:nowrap}
.m-acct .m-who{flex:1}
.m-ov{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:13px;font-weight:700;text-decoration:none}
.m-ov .i{width:16px;height:16px;color:var(--brand-ink)}
.m-ov[aria-current]{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.m-acct-links{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.m-acct-links a{min-height:64px;padding:8px 4px;font-size:11.5px}
.m-help{margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
.m-help .m-wa{background:#E8F8EF;border-color:#BFE9D0;color:#0F7A43}
.m-help .m-wa .i{color:#16A34A}
.m-out{margin-top:6px;padding-top:0;border:1.5px solid color-mix(in srgb,var(--danger,#D92D20) 35%,transparent);background:color-mix(in srgb,var(--danger,#D92D20) 6%,transparent)}
.m-out:hover{background:color-mix(in srgb,var(--danger,#D92D20) 12%,transparent)}
/* the checkout bar before the ID is checked */
.co-noid{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--bg);border:1.5px dashed var(--line-2,#CBD5E1);color:var(--muted)}
.co-noid .i{width:20px;height:20px}
.co-bar.no-id .co-t b{color:var(--brand-ink)}
/* footer: tidy columns; on phones each folds under its heading */
.site-footer .ft-grid{gap:28px 32px;align-items:start}
.ft-col > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:default}
.ft-col > summary::-webkit-details-marker{display:none}
.ft-col > summary h2{margin:4px 0 14px}
.ft-col > summary .chev{display:none;color:#94A3B8}
.ft-col ul{gap:9px}
.ft-col a{font-size:14px}
.ft-brand .ft-tag{margin-top:14px}
@media (max-width:720px){
  .site-footer .ft-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .ft-brand{padding-bottom:20px;margin-bottom:6px;border-bottom:1px solid var(--navy-line)}
  .ft-col{border-bottom:1px solid var(--navy-line)}
  .ft-col > summary{cursor:pointer;min-height:52px}
  .ft-col > summary h2{margin:0;font-size:15px}
  .ft-col > summary .chev{display:inline-flex;transition:transform .2s}
  .ft-col[open] > summary .chev{transform:rotate(180deg)}
  .ft-col ul{padding:0 0 16px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
  .ft-beans{margin-top:22px}
  .ft-bottom{gap:14px}
}
.co-bar.no-id .cta-hint{display:none}

/* ===== Round 5 (2026-10-10): official logos, footer tiles, transfer box, sign-in ===== */
.pm-logo[data-brand=neo]{background:#fff}
.ft-pg-l li{position:relative;height:44px;min-width:76px;padding:0 12px}
.ft-pg-l img{max-height:26px;max-width:96px}
.ft-pg-wide li{min-width:96px}
.ft-pg-l li.is-soon img{opacity:.55;filter:grayscale(.3)}
.ft-soon{position:absolute;top:-7px;inset-inline-end:-6px;padding:1px 6px;border-radius:99px;background:#FFC21A;color:#3A2600;font-size:10px;font-weight:800;line-height:1.5}
.ft-bank{display:flex!important;align-items:center;gap:7px;color:#0B1324;font-size:13px;font-weight:700}
.ft-bank .i{width:18px;height:18px}
.ft-pg-manual .ft-pg-l{gap:8px}
/* transfer to our office: room above it, the logos in a tidy row */
.pay-list > .pay-off{margin-top:18px}
.pay-off .lg span{height:40px;min-width:72px;padding:0 10px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:#fff}
.pay-off .lg img{max-height:24px;max-width:88px;width:auto}
/* sign-in */
.si-page{padding-top:28px;padding-bottom:64px}
.si-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;max-width:980px;margin:0 auto;align-items:center}
.si-side{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 18px 6px;border-radius:24px;
  background:radial-gradient(70% 60% at 50% 30%,color-mix(in srgb,var(--fc1) 12%,#fff),transparent 70%),linear-gradient(160deg,#EFF9FF,#F7FBFF)}
.si-dino{width:min(240px,62vw);height:auto;filter:drop-shadow(0 18px 24px rgba(11,19,36,.18))}
.si-welcome{margin:6px 0 10px;font-size:20px;font-weight:800;color:var(--ink)}
.si-bens{display:none;list-style:none;margin:0;padding:0;gap:10px;text-align:start}
.si-bens li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-2)}
.si-bens .i{width:32px;height:32px;flex:none;padding:7px;border-radius:10px;background:#fff;color:var(--brand-ink);box-shadow:var(--e1)}
.si-card{max-width:none;width:100%;margin:0}
.si-card .si-art{display:none}
.si-lead{color:var(--muted)}
.si-priv{display:flex;gap:8px;margin:16px 0 6px;padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--ink-2);text-align:start}
.si-priv .i{width:16px;height:16px;flex:none;margin-top:2px;color:var(--good,#0F8A4B)}
.si-agree{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
@media (min-width:900px){
  .si-wrap{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:28px}
  .si-side{padding:28px 28px 30px;align-self:stretch;justify-content:center}
  .si-dino{width:360px}
  .si-welcome{font-size:24px}
  .si-bens{display:grid}
}
.si-card .si-priv,.si-card .si-agree{max-width:none;width:100%;margin-inline:0;box-sizing:border-box}
.si-card .si-priv{justify-content:flex-start}
.si-opts{gap:10px}

/* ===== Round 6 (2026-10-10): crypto payment page, networks, Western Union tile ===== */
.ft-pg-l li.is-black{background:#000;padding:0 6px}
.ft-pg-l li.is-black img{max-height:34px;max-width:120px}
.pay-off .lg span:has(img[src*="wu.webp"]){background:#000;border-color:#000}
.net > span{flex-direction:row!important;align-items:center!important;gap:10px!important;position:relative}
.net-ic{width:26px;height:26px;flex:none}
.net-t{display:flex;flex-direction:column;gap:2px;line-height:1.15}
.net-rec{position:absolute;top:-8px;inset-inline-end:8px;padding:1px 7px;border-radius:99px;background:var(--grad);color:#022A33;font-size:10.5px;font-weight:800;font-style:normal}
.nets{padding-top:6px}
.up-page{max-width:640px;padding-top:24px;padding-bottom:64px}
.up{padding:22px}
.up-pill{display:inline-flex;align-items:center;gap:7px;margin:0 0 12px;padding:4px 12px;border-radius:99px;background:#FFF1E6;color:#B4540A;font-size:13px;font-weight:800}
.up-pill .dot{width:8px;height:8px;border-radius:50%;background:#F28C00;animation:upDot 1.4s ease-in-out infinite}
@keyframes upDot{50%{opacity:.3}}
.up h1{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:24px}
.up-coin{width:34px;height:34px}
.up-lead{margin:0 0 18px;color:var(--muted);font-size:14.5px;line-height:1.6}
.up-row{margin:0 0 14px}
.up-k{display:block;margin:0 0 6px;font-size:13px;font-weight:700;color:var(--muted)}
.up-net,.up-val{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px;border-radius:14px;background:var(--bg);border:1.5px solid var(--line)}
.up-net img{width:28px;height:28px}
.up-net b{font-size:16px}
.up-std{margin-inline-start:auto;padding:2px 8px;border-radius:7px;background:#FFF4CC;color:#7A5600;font-size:12px;font-weight:800}
.up-amt{font-size:24px;font-weight:800;letter-spacing:.01em}
.up-cc{font-weight:800;color:var(--muted)}
.up-copy{margin-inline-start:auto;flex:none}
.up-copy.is-done{border-color:var(--good,#0F8A4B);color:var(--good,#0F8A4B)}
.up-addr-w{align-items:center}
.up-addr{flex:1;min-width:0;font-size:14px;font-weight:600;word-break:break-all;line-height:1.5;background:none}
.up-qr-w{margin:4px 0 14px}
.up-qr{display:grid;place-items:center;margin-top:10px;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.up-qr svg{width:220px;height:220px}
.up-time{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--brand-soft);color:var(--brand-ink);font-weight:700;font-size:14px}
.up-time.is-late{background:#FFF1E6;color:#B4540A}
.up-time .i{width:17px;height:17px}
.up-warn{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.up-warn li{display:flex;gap:8px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.up-warn li:first-child{color:#B42318;font-weight:600}
.up-warn .i{width:16px;height:16px;flex:none;margin-top:2px}
.up-order{display:flex;flex-direction:column;gap:3px;margin:0 0 16px;padding:12px 14px;border-radius:14px;border:1px dashed var(--line-2,#CBD5E1)}
.up-order .k{font-size:12.5px;color:var(--muted);font-weight:700}
.up-order small{color:var(--muted)}
.up-live{min-height:22px;margin:10px 0 4px;font-size:13.5px;color:var(--ink-2);text-align:center}
.up-help{display:block;text-align:center;font-weight:700}
@media (max-width:480px){ .up{padding:16px} .up-amt{font-size:21px} .up-addr-w{flex-wrap:wrap} .up-addr-w .up-copy{margin-inline-start:0;width:100%;justify-content:center} }
.net .net-t{display:flex;flex-direction:column;gap:2px;min-height:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;font-size:15px;font-weight:800}

/* ===== Account overview: profile + wallet cards (2026-10-10) ===== */
.pf2{padding:18px 18px 16px}
.pf2-top{display:flex;align-items:center;gap:14px}
.pf2-av{position:relative;flex:none;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--grad);color:#fff;font-size:24px;font-weight:800;box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(255,46,147,.28),0 12px 22px -12px rgba(200,20,120,.6)}
.pf2-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf2-av.has-photo>span{visibility:hidden}
.pf2 .who{flex:1;min-width:0}
.pf2 h2{margin:0;font-size:19px;font-weight:800;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf2 .em{margin:2px 0 0;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf2 .since{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.pf2 .since:empty{display:none}
.pf2-out{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--ink);font-size:13.5px;font-weight:600;text-decoration:none;transition:border-color .15s,color .15s}
.pf2-out:hover{border-color:#E5484D;color:#C62828}
.pf2-out .i{width:18px;height:18px}
.pf2-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pf2-foot .idchip{margin:0}
.pf2-foot .dealer-line{margin:0}

.acc-page .box.wcard{position:relative;overflow:hidden;border:0;padding:22px;border-radius:22px;color:#fff;isolation:isolate;
  background:radial-gradient(90% 80% at 100% 0%,rgba(255,46,147,.42) 0%,rgba(255,46,147,0) 60%),radial-gradient(70% 70% at 0% 100%,rgba(155,77,255,.28) 0%,rgba(155,77,255,0) 65%),linear-gradient(155deg,#0B1530 0%,#0E2440 52%,#0B4A5C 100%);
  box-shadow:0 26px 50px -30px rgba(8,30,60,.85)}
.wcard::after{content:"";position:absolute;z-index:-1;inset:auto -60px -90px auto;width:260px;height:260px;border-radius:50%;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 34px rgba(255,255,255,.025),0 0 0 70px rgba(255,255,255,.02)}
html[dir=rtl] .wcard::after{inset:auto auto -90px -60px}
.wcard-art{position:absolute;top:10px;inset-inline-end:12px;width:110px;height:auto;aspect-ratio:480/600;filter:drop-shadow(0 12px 16px rgba(0,0,0,.35));pointer-events:none}
.wcard-lbl{display:inline-flex;align-items:center;gap:9px;margin:0;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.8)}
.wcard-lbl .ic{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.12)}
.wcard-lbl .ic .i{width:16px;height:16px}
.wcard-bal{margin:16px 0 8px;padding-inline-end:96px;font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;text-align:start}
html[dir=rtl] .wcard-bal{text-align:right}
.wcard-bal .c{font-size:.52em;font-weight:700;letter-spacing:0;opacity:.7}
.wcard-est{display:inline-flex;margin:0;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);font-size:12.5px;color:rgba(255,255,255,.88)}
.wcard-d{margin:16px 0 0;max-width:36ch;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.68)}
.wcard-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.wcard-acts .btn{min-height:48px;height:auto;border-radius:14px;font-weight:700;gap:8px;white-space:normal;line-height:1.25;padding:8px 12px}
.wcard-add{background:#fff;color:#0B1530;border:0;box-shadow:0 10px 22px -12px rgba(0,0,0,.6)}
.wcard-add:hover{background:#E8FBFB;color:#0B1530}
.wcard-add .i{color:#058C95}
.wcard-tx{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22)}
.wcard-tx:hover{background:rgba(255,255,255,.16);color:#fff}
@media (max-width:560px){
  .pf2{padding:16px}
  .pf2-av{width:54px;height:54px;font-size:21px}
  .pf2 h2{font-size:17.5px}
  .pf2-out{width:40px;padding:0}
  .pf2-out .t{display:none}
  .wcard{padding:18px;border-radius:20px}
  .wcard-art{width:82px;top:10px;inset-inline-end:8px}
  .wcard-bal{font-size:38px;padding-inline-end:70px}
  .wcard-d{display:none}
  .wcard-acts{margin-top:18px}
}
@media (max-width:340px){.wcard-bal{font-size:32px}.wcard-acts{grid-template-columns:1fr}}
/* rewards: a package's bonus diamonds (per-customer, 2026-10-13) */
.pkg .pk-bonus{display:inline-flex;align-items:center;margin-top:6px;padding:2px 9px;border-radius:999px;background:linear-gradient(135deg,#FFE27A,#FFC21A);color:#5A3B00;font-size:12px;font-weight:800;line-height:1.5;white-space:nowrap;box-shadow:0 4px 10px -6px rgba(255,170,0,.8)}
.summary .s-row.bonus .v{color:#B7791F;font-weight:800}
/* package tag (top) + type (under it), 2026-10-13 */
.pkg .pk-head{display:flex;flex-direction:column;align-items:center;gap:5px;margin:-10px 0 10px;max-width:100%}
.pkg .pk-tag{display:inline-flex;align-items:center;justify-content:center;max-width:100%;height:22px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:800;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkg .pk-tag.is-empty,.pkg .pk-type.is-empty{visibility:hidden}
.pkg .pk-tag.t-popular{background:linear-gradient(135deg,#FF8A3D,#F04E3E);color:#fff;box-shadow:0 6px 14px -8px rgba(240,78,62,.8)}
.pkg .pk-tag.t-recommended{background:var(--grad);color:#fff;box-shadow:0 6px 14px -8px rgba(200,20,120,.8)}
.pkg .pk-tag.t-value{background:#E7F8EE;color:#11804A;border:1px solid #BFEBD2}
.pkg .pk-tag.t-last{background:#E8F2FF;color:#1D5FD1;border:1px solid #C7DCFB}
.pkg .pk-tag.t-most{background:#0F172A;color:#FFD54A}
.pkg .pk-type{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;line-height:1.2;color:var(--muted)}
.pkg .pk-type.ty-vip{color:#B7791F}
.pkg .pk-type.ty-svip{background:linear-gradient(90deg,#C77D12,#F5B81C);-webkit-background-clip:text;background-clip:text;color:transparent}
.pkg .pk-type.ty-ssvip{background:linear-gradient(90deg,#D9480F,#F5B81C,#C2255C);-webkit-background-clip:text;background-clip:text;color:transparent}
.pkg .pk-type.ty-economy{color:#0E7C5A}
.pkg .pk-type.ty-sssvip{background:linear-gradient(90deg,#B21E63,#F5B81C,#D9480F);-webkit-background-clip:text;background-clip:text;color:transparent}
.pkg .pk-type.ty-ssssvip{background:linear-gradient(90deg,#6D28D9,#C2255C,#F5B81C);-webkit-background-clip:text;background-clip:text;color:transparent}
.pkg .pk-type.ty-sssssvip{background:linear-gradient(90deg,#1E3A8A,#6D28D9,#C2255C,#F5B81C);-webkit-background-clip:text;background-clip:text;color:transparent}
.pkg .pk-bonus.is-empty{visibility:hidden}

/* ===== Desktop hero: one centred, form-first column — no image, no mascot, no side links (owner, 2026-10-23) =====
   The whole right-side column (country picture, Dino stage, quick links, unused side-pay slot) is removed on desktop so
   the first section reads like the clean card sections below it. Mobile is unchanged. "Continue to checkout" is the
   fixed bottom bar and is not affected. */
@media (min-width:961px){
  .hero-grid,
  .hero-has-banner .hero-grid{grid-template-columns:minmax(0,680px);justify-content:center;row-gap:22px;padding-top:40px;padding-bottom:52px}
  .hero-main,
  .hero-has-banner .hero-main{max-width:680px;width:100%;margin-inline:auto;justify-self:center}
  .hero-side,
  .hero-has-banner .hero-side{display:none!important}
}

/* ===== Smart header: on desktop it slides away when scrolling down and returns when scrolling up (owner, 2026-10-23) ===== */
.site-header{transition:transform .3s ease}
@media (min-width:961px){ .site-header.hdr-up{transform:translateY(-100%)} }

/* ===== Likee ↔ BIGO Diamond cross-promo (sister site) ===== */
.ft-cross{display:flex;align-items:center;gap:14px;margin:6px 0 24px;padding:16px 18px;border:1px solid var(--line-2);border-radius:16px;background:linear-gradient(135deg,rgba(255,46,147,.06),rgba(155,77,255,.06));text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s,box-shadow .2s}
.ft-cross:hover{border-color:var(--brand-edge);transform:translateY(-2px);box-shadow:var(--e2)}
.ftx-ic{flex:none;width:48px;height:48px;border-radius:12px;background:#fff;border:1px solid var(--line-2);display:grid;place-items:center;box-shadow:var(--e1)}
.ftx-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ftx-tx b{font-size:15px;font-weight:800;color:var(--ink)}
.ftx-tx small{font-size:13px;color:var(--muted);line-height:1.4}
.ftx-cta{flex:none;display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--brand-ink);font-size:14px;white-space:nowrap}
.ftx-cta i{width:16px;height:16px;display:inline-block}
html[dir=rtl] .ftx-cta i{transform:scaleX(-1)}
@media (max-width:640px){.ft-cross{flex-wrap:wrap;gap:10px}.ftx-cta{width:100%;justify-content:flex-end}}

.bd-logo-mascot{height:42px;width:auto;display:block}
@media (max-width:640px){.bd-logo-mascot{height:34px}}

/* ========== Likee comprehensive style: ambient background, vivid hero, mascot fit ========== */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 560px at 90% -6%, rgba(155,77,255,.12), transparent 60%),
    radial-gradient(880px 480px at -6% 2%, rgba(255,46,147,.10), transparent 56%),
    radial-gradient(760px 620px at 104% 104%, rgba(255,122,31,.09), transparent 60%);}

/* the Likee mascot never distorts inside a fixed box */
img[src*="likee-mascot"]{object-fit:contain}

/* a warmer, more vivid Likee hero (purple → pink → orange, matching the mascot) */
.hero{background:
  radial-gradient(44% 68% at 84% 38%, rgba(255,46,147,.20), transparent 70%),
  radial-gradient(34% 54% at 97% 6%, rgba(155,77,255,.20), transparent 70%),
  radial-gradient(42% 62% at 2% 102%, rgba(255,122,31,.14), transparent 70%),
  linear-gradient(180deg,#FFFFFF 0%,#FFF8FC 55%,var(--bg) 100%) !important}

.bd-logo-full{height:50px;width:auto;display:block}
@media (max-width:640px){.bd-logo-full{height:40px}}