/* ==========================================================================
   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 #05C7C7, sky #4AA8FF / #1EA7FF, 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:#05C7C7; --brand-2:#4AA8FF; --brand-3:#1EA7FF; --brand-deep:#0B84D6;
  --brand-ink:#067A87;                       /* teal for text on white (AA) */
  --brand-soft:rgba(5,199,199,.12); --brand-edge:rgba(5,199,199,.32);
  --grad:linear-gradient(135deg,#05C7C7 0%,#1EA7FF 100%);
  --grad-text:linear-gradient(90deg,#06939F 0%,#0B84D6 100%);
  --on-grad:#032430;                         /* Phoenix: dark ink on the bright CTA */
  --glow:0 14px 30px -12px rgba(5,199,199,.70),0 6px 14px -8px rgba(30,167,255,.45);
  --ring:rgba(5,199,199,.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(5,199,199,.85),0 8px 16px -8px rgba(30,167,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(5,199,199,.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(5,199,199,.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(5,199,199,.16),rgba(5,199,199,0) 70%),
  radial-gradient(30% 50% at 96% 8%,rgba(74,168,255,.16),rgba(74,168,255,0) 70%),
  radial-gradient(40% 60% at 4% 100%,rgba(74,168,255,.08),rgba(74,168,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(5,199,199,.16),rgba(5,199,199,0) 70%),
  radial-gradient(30% 50% at 96% 8%,rgba(74,168,255,.16),rgba(74,168,255,0) 70%),
  radial-gradient(40% 60% at 4% 100%,rgba(74,168,255,.08),rgba(74,168,255,0) 70%),
  linear-gradient(180deg,#FFFFFF 0%,#F8FBFE 60%,var(--bg) 100%)} }
.hero-atmo{background:radial-gradient(1px 1px at 20% 30%,rgba(5,199,199,.5),transparent),radial-gradient(1px 1px at 70% 80%,rgba(30,167,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(5,199,199,.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(5,199,199,.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(5,199,199,.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(5,199,199,.5)}
.pick input:checked + .in{border-color:var(--brand);background:linear-gradient(180deg,rgba(5,199,199,.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(5,199,199,.26) 0%,rgba(30,167,255,.14) 46%,rgba(30,167,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(5,199,199,.38);transform:translate(-50%,-50%) rotate(-14deg)}
.px-orbit.o2{width:min(470px,90%);border-color:rgba(30,167,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:#7FF0F0;box-shadow:0 0 10px #05C7C7,0 0 18px rgba(5,199,199,.7)}
.px-orbit.o2 > span{left:80%;top:84%;width:7px;height:7px;background:#9FD2FF;box-shadow:0 0 10px #1EA7FF}
.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(5,199,199,.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(5,199,199,.10) 0%,#fff 58%);box-shadow:0 0 0 4px var(--ring),0 18px 36px -18px rgba(5,199,199,.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(5,199,199,.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,#05C7C7 0%,#1EA7FF 100%);
  box-shadow:0 40px 80px -46px rgba(5,140,170,.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,#05C7C7 0%,#1EA7FF 100%)}
.final h2{color:var(--on-grad);font-size:42px}
.final p{color:#063341;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:#7FF0F0}
.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(5,199,199,.6)}
.ft-market .ch{color:#5EE6E6}
.ft-legal a{color:#A9B6C8}
.ft-legal a:hover{color:#7FF0F0}
.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,#05C7C7 0%,#1EA7FF 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(5,199,199,.22),rgba(5,199,199,0) 70%),radial-gradient(50% 70% at 100% 0%,rgba(74,168,255,.18),rgba(74,168,255,0) 70%),linear-gradient(180deg,#FFFFFF 0%,#F2FAFC 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(5,199,199,.22),rgba(5,199,199,0) 70%),radial-gradient(50% 70% at 0% 0%,rgba(74,168,255,.18),rgba(74,168,255,0) 70%),linear-gradient(180deg,#FFFFFF 0%,#F2FAFC 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}
}