/* Shell777 Malaysia, operator floor B. Deep indigo ground with bone sheets cut into it, a
   copper primary button and a mint second action. Rounded 14px cards, a two-up hero split
   that collapses to one column, a nine-tile room grid, rail cards, KYC tier cards and a
   payout timeline. Wide-ish single column at 1000px, NOT a handset column and NOT a
   1180px band.
   Section order: hero split, stat strip, rails chips, room grid, 4D draw board, rail
   cards, game grid, KYC tiers, payout timeline, article, studio wall, desk rows, app
   strip, FAQ, closing band, trust.
   Hand written, never regenerated by the build. Namespaced .hq- throughout. */
:root{
  --ind:#10132E; --ind-2:#171B3C; --ind-3:#1E2450; --ind-4:#272E64; --ind-0:#0A0C20;
  --cop:#E07A35; --cop-2:#C2601F; --cop-3:#F0974F; --cop-ink:#2A1306;
  --mint:#5DD6A8; --mint-2:#38B689; --mint-3:#8AE6C2; --mint-ink:#06251A;
  --bone:#EFE9DD; --bone-2:#DCD4C4; --sheet:#F7F4EE;
  --txt:#EFE9DD; --soft:#CFC9BE; --mut:#9A9BB0;
  --line:rgba(239,233,221,.13); --line-2:rgba(224,122,53,.32); --line-3:rgba(93,214,168,.3);
  --wrap:1000px; --bar:62px; --pad:18px; --gap:22px;
  --font:"Helvetica Neue",Helvetica,"Segoe UI",Roboto,"Noto Sans SC","PingFang SC",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;max-width:100%}
body{margin:0;color:var(--txt);font-family:var(--font);line-height:1.65;
  padding:0 0 calc(var(--bar) + 18px);
  background:
    radial-gradient(820px 460px at 8% -60px,rgba(224,122,53,.18),transparent 72%),
    radial-gradient(700px 420px at 94% 4%,rgba(93,214,168,.12),transparent 74%),
    var(--ind)}
a{color:var(--mint);text-decoration:none}
img,svg{max-width:100%;display:block}
img{height:auto;min-width:0}
h1,h2,h3,h4{margin:0;line-height:1.28}
table{border-collapse:collapse;width:100%}
.hq-shell{width:100%;margin:0 auto}
.hq-note{margin:12px 0 0;font-size:12px;color:var(--mut);line-height:1.6}

/* ---------- brand art slots ---------- */
.hq-art{width:100%;height:auto;object-fit:cover;border-radius:14px}
.hq-art.hr{aspect-ratio:4/3;border-radius:16px}
.hq-art.mh{aspect-ratio:16/9;border-radius:14px 14px 0 0}
.hq-art.ap{aspect-ratio:4/3;border-radius:14px}

/* ---------- buttons ---------- */
.hq-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  padding:0 21px;border-radius:10px;font-weight:800;font-size:14.5px;
  border:1.5px solid transparent;text-align:center;line-height:1.2;letter-spacing:.01em}
.hq-btn.c{background:linear-gradient(100deg,var(--cop-3),var(--cop-2));color:#fff;
  box-shadow:0 6px 18px rgba(224,122,53,.3)}
.hq-btn.m{background:linear-gradient(100deg,var(--mint-3),var(--mint-2));color:var(--mint-ink)}
.hq-btn.o{background:transparent;color:var(--mint);border-color:var(--line-3)}
.hq-btn.w{width:100%}

/* ---------- header ---------- */
.hq-head{position:sticky;top:0;z-index:40;background:var(--ind-0);
  border-bottom:1px solid var(--line-2)}
.hq-head .util{display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--mut);
  width:min(var(--wrap),100%);margin:0 auto;padding:4px var(--pad);
  border-bottom:1px solid var(--line)}
.hq-head .util .dom{font-weight:800;color:var(--cop-3);flex:none}
.hq-head .util .tag{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hq-head .lang{display:flex;gap:5px;flex:none}
.hq-head .lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;
  min-height:44px;border-radius:8px;border:1px solid var(--line);color:var(--mut);
  font-size:10.5px;font-weight:800;padding:0 8px;white-space:nowrap}
.hq-head .lang a.on{background:var(--cop);color:#fff;border-color:transparent}
.hq-head .bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:min(var(--wrap),100%);margin:0 auto;padding:11px var(--pad)}
.hq-logo{display:flex;align-items:center;gap:10px;min-width:0}
.hq-logo svg{width:36px;height:36px;flex:none;min-width:0}
.hq-logo b{font-size:21px;font-weight:900;letter-spacing:.02em;white-space:nowrap;color:var(--bone)}
.hq-logo b i{font-style:normal;color:var(--cop-3)}
.hq-head .acts{display:flex;gap:9px;flex:none}
.hq-head .acts .hq-btn{min-height:40px;padding:0 16px;font-size:13px}

/* ---------- shared section frame ---------- */
.hq-sec{width:min(var(--wrap),100%);margin:0 auto var(--gap);padding:0 var(--pad)}
.hq-sec .sh{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  margin-bottom:14px}
.hq-sec .sh h2{font-size:19px;font-weight:800;color:var(--bone);min-width:0}
.hq-sec .sh h2::after{content:"";display:block;width:46px;height:3px;border-radius:2px;
  margin-top:8px;background:linear-gradient(90deg,var(--cop),var(--mint))}
.hq-sec .sh a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  font-size:12.5px;font-weight:800;color:var(--mint);white-space:nowrap}

/* ---------- 1. hero split ---------- */
.hq-hero{width:min(var(--wrap),100%);margin:18px auto var(--gap);padding:0 var(--pad)}
.hq-hero .in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:22px;
  align-items:center;padding:22px;border-radius:18px;
  background:linear-gradient(150deg,var(--ind-3),var(--ind-2) 62%,var(--ind-0));
  border:1px solid var(--line-2);box-shadow:0 16px 44px rgba(0,0,0,.4)}
.hq-hero .bd{display:grid;gap:13px;min-width:0}
.hq-hero .eb{font-size:10.5px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mint)}
.hq-hero h1{font-size:30px;font-weight:900;letter-spacing:-.015em;color:#fff}
.hq-hero p.lead{margin:0;font-size:14.5px;color:var(--soft);line-height:1.68}
.hq-hero .act{display:flex;flex-wrap:wrap;gap:11px;margin-top:2px}
.hq-hero .act .hq-btn{flex:1 1 auto;min-width:0}
.hq-hero .hint{margin:0;font-size:12px;color:var(--mut)}
.hq-hero .pic{min-width:0}

/* ---------- 2. four-up stat strip ---------- */
.hq-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.hq-stats>div{display:grid;gap:4px;min-width:0;padding:14px;border-radius:14px;
  background:var(--sheet);border:1px solid var(--bone-2)}
.hq-stats b{font-size:22px;font-weight:900;color:var(--cop-2);line-height:1.1}
.hq-stats span{font-size:11.5px;color:#56525E;line-height:1.45}

/* ---------- 3. rails chips ---------- */
.hq-rails{display:grid;gap:10px;margin-top:14px;padding:14px;border-radius:14px;
  background:var(--ind-2);border:1px solid var(--line)}
.hq-rails .cap{font-size:10.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut)}
.hq-rails .ch{display:flex;flex-wrap:wrap;gap:9px;min-width:0}
.hq-rails .ch span{display:flex;align-items:center;justify-content:center;min-width:0;
  flex:0 1 auto;height:38px;padding:0 13px;border-radius:9px;background:var(--sheet);
  border:1px solid var(--bone-2)}
.hq-rails .ch img{max-height:20px;width:auto;min-width:0;object-fit:contain;flex:0 1 auto}

/* ---------- 4. room grid, nine tiles ---------- */
.hq-rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hq-rooms .rm{display:grid;gap:5px;min-width:0;padding:15px;border-radius:14px;
  background:linear-gradient(160deg,var(--ind-3),var(--ind-2));border:1px solid var(--line);
  color:var(--txt)}
.hq-rooms .rm .i{font-size:23px;line-height:1.1}
.hq-rooms .rm b{font-size:14.5px;font-weight:800;color:var(--bone)}
.hq-rooms .rm em{font-style:normal;font-size:11.5px;color:var(--mut)}
.hq-rooms .rm.on{border-color:var(--cop);background:linear-gradient(160deg,var(--ind-4),var(--ind-3))}

/* ---------- 5. 4D draw board ---------- */
.hq-draw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:18px;
  padding:18px;border-radius:16px;background:var(--ind-2);border:1px solid var(--line-3)}
.hq-draw .dys{display:grid;gap:10px;min-width:0}
.hq-draw .dy{display:grid;gap:2px;padding:12px 14px;border-radius:12px;background:var(--ind-0);
  border-left:3px solid var(--cop)}
.hq-draw .dy b{font-size:14.5px;font-weight:800;color:var(--bone)}
.hq-draw .dy span{font-size:11.5px;color:var(--mut)}
.hq-draw .bd{display:grid;gap:11px;align-content:start;min-width:0}
.hq-draw .bd>b{font-size:17px;font-weight:800;color:var(--mint-3);line-height:1.4}
.hq-draw .bd>p{margin:0;font-size:13.5px;color:var(--soft)}
.hq-draw .bd .hq-btn{max-width:320px}

/* ---------- 6. rail cards ---------- */
.hq-paycards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hq-paycards .pc{display:grid;gap:9px;align-content:start;min-width:0;padding:15px;
  border-radius:14px;background:var(--sheet);border:1px solid var(--bone-2)}
.hq-paycards .tp{display:grid;gap:7px;min-width:0}
.hq-paycards .tp b{font-size:14.5px;font-weight:800;color:#1C2140}
.hq-paycards .sp{justify-self:start;font-size:10.5px;font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--mint-3);
  color:var(--mint-ink)}
.hq-paycards p{margin:0;font-size:12.5px;color:#56525E;line-height:1.6}

/* ---------- 7. game grid ---------- */
.hq-games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hq-games .gc{position:relative;display:block;min-width:0;border-radius:14px;overflow:hidden;
  background:var(--ind-2);border:1px solid var(--line)}
.hq-games .gc img{width:100%;aspect-ratio:1/1;object-fit:cover;min-width:0}
.hq-games .gc b{display:block;padding:9px 11px 2px;font-size:12.5px;font-weight:800;
  color:var(--bone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hq-games .gc em{display:block;padding:0 11px 11px;font-style:normal;font-size:11px;
  color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hq-games .gc .fl{position:absolute;top:8px;left:8px;z-index:2;font-size:9px;font-weight:900;
  letter-spacing:.09em;padding:4px 8px;border-radius:999px;background:var(--cop);color:#fff}

/* ---------- 8. KYC tier cards ---------- */
.hq-kyc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hq-kyc .kt{display:grid;gap:10px;align-content:start;min-width:0;padding:16px;
  border-radius:14px;background:linear-gradient(160deg,var(--ind-3),var(--ind-2));
  border:1px solid var(--line-2)}
.hq-kyc .tp{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;min-width:0}
.hq-kyc .tp b{font-size:15px;font-weight:900;color:var(--bone);min-width:0}
.hq-kyc .lm{flex:none;font-size:12.5px;font-weight:900;padding:4px 11px;border-radius:999px;
  background:linear-gradient(100deg,var(--cop-3),var(--cop-2));color:#fff;white-space:nowrap}
.hq-kyc p{margin:0;font-size:12.5px;color:var(--soft);line-height:1.6}

/* ---------- 9. payout timeline ---------- */
.hq-time{list-style:none;margin:0;padding:0;display:grid;gap:0}
.hq-time li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:14px;
  padding:14px 0 14px 0;border-top:1px solid var(--line);position:relative}
.hq-time li:first-child{border-top:0}
.hq-time .tm{font-size:13px;font-weight:900;color:var(--cop-3);padding-top:1px;
  white-space:nowrap}
.hq-time li>div{min-width:0}
.hq-time li b{display:block;font-size:14.5px;font-weight:800;color:var(--bone);
  margin-bottom:4px}
.hq-time li p{margin:0;font-size:13px;color:var(--soft);line-height:1.6}

/* ---------- 10. studio wall ---------- */
.hq-studios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hq-studios .st{display:grid;gap:10px;align-content:start;min-width:0;padding:15px;
  border-radius:14px;background:var(--ind-2);border:1px solid var(--line)}
.hq-studios .st h3{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mint)}
.hq-studios .ch{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.hq-studios .ch span{display:inline-flex;align-items:center;min-height:32px;padding:0 11px;
  border-radius:8px;background:var(--ind-0);border:1px solid var(--line);font-size:12px;
  font-weight:700;color:var(--soft);min-width:0}

/* ---------- 11. desk rows ---------- */
.hq-desk{display:grid;gap:0;padding:4px 16px;border-radius:14px;background:var(--ind-2);
  border:1px solid var(--line)}
.hq-desk .dr{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;padding:15px 0;
  border-top:1px solid var(--line)}
.hq-desk .dr:first-child{border-top:0}
.hq-desk .nm{display:grid;gap:3px;min-width:0}
.hq-desk .nm b{font-size:14.5px;font-weight:800;color:var(--bone)}
.hq-desk .nm span{font-size:11.5px;font-weight:700;color:var(--cop-3)}
.hq-desk p{margin:0;font-size:13px;color:var(--soft);line-height:1.6}

/* ---------- 12. app strip ---------- */
.hq-app{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;
  align-items:center;padding:18px;border-radius:16px;
  background:linear-gradient(155deg,var(--ind-3),var(--ind-2));border:1px solid var(--line-2)}
.hq-app .bd{display:grid;gap:11px;min-width:0}
.hq-app .bd>b{font-size:18px;font-weight:800;color:var(--cop-3)}
.hq-app .bd>p{margin:0;font-size:13.5px;color:var(--soft);line-height:1.6}
.hq-app .sp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.hq-app .sp>div{display:grid;gap:3px;justify-items:center;min-width:0;padding:10px 6px;
  border-radius:11px;background:var(--ind-0);border:1px solid var(--line);text-align:center}
.hq-app .sp span{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.hq-app .sp b{font-size:13.5px;font-weight:900;color:var(--mint-3)}

/* ---------- 13. trust ---------- */
.hq-trust{display:grid;gap:13px;padding:17px;border-radius:16px;background:var(--ind-2);
  border:1px solid var(--line)}
.hq-trust .bg{display:flex;flex-wrap:wrap;gap:9px;min-width:0}
.hq-trust .bg span{display:flex;align-items:center;justify-content:center;min-width:0;
  flex:0 1 auto;height:40px;padding:0 14px;border-radius:9px;background:var(--sheet);
  border:1px solid var(--bone-2)}
.hq-trust .bg img{max-height:22px;width:auto;min-width:0;object-fit:contain;flex:0 1 auto}
.hq-trust p{margin:0;font-size:12px;color:var(--mut);line-height:1.68}

/* ---------- written content ---------- */
.hq-content{width:min(var(--wrap),100%);margin:0 auto var(--gap);padding:0 var(--pad)}
.hq-content.tail{margin-bottom:26px}
.hq-content h2{font-size:20px;font-weight:800;color:var(--cop-3);margin:26px 0 11px}
.hq-content h2:first-child{margin-top:0}
.hq-content p{margin:0 0 14px;font-size:14px;color:var(--soft)}
.hq-content ul{margin:0 0 16px;padding-left:22px;display:grid;gap:8px;color:var(--soft);
  font-size:14px}
.hq-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 22px}
.hq-kpis>div{display:grid;gap:4px;min-width:0;padding:15px;border-radius:14px;
  background:linear-gradient(160deg,var(--ind-3),var(--ind-2));border:1px solid var(--line)}
.hq-kpis b{font-size:21px;font-weight:900;color:var(--mint-3);line-height:1.15}
.hq-kpis span{font-size:11.5px;color:var(--mut);line-height:1.45}
.hq-steps{counter-reset:s;list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.hq-steps li{counter-increment:s;position:relative;padding:14px 16px 14px 52px;
  border-radius:12px;background:var(--ind-2);border:1px solid var(--line);font-size:13.5px;
  color:var(--soft)}
.hq-steps li::before{content:counter(s);position:absolute;left:14px;top:13px;width:28px;
  height:28px;display:flex;align-items:center;justify-content:center;border-radius:9px;
  font-weight:900;font-size:13px;background:linear-gradient(135deg,var(--cop-3),var(--cop-2));
  color:#fff}
.hq-tw{overflow-x:auto;border-radius:14px;border:1px solid var(--line);margin:0 0 22px}
.hq-tbl{font-size:13px;min-width:430px;background:var(--ind-2)}
.hq-tbl th{background:var(--ind-0);color:var(--cop-3);text-align:left;padding:11px 13px;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:900}
.hq-tbl td{padding:11px 13px;border-top:1px solid var(--line);color:var(--soft);
  vertical-align:top}
.hq-tbl td b{color:var(--bone)}
.hq-faq{display:grid;gap:10px;margin:0 0 22px}
.hq-faq details{border-radius:12px;border:1px solid var(--line);background:var(--ind-2)}
.hq-faq summary{cursor:pointer;padding:14px 16px;font-weight:800;font-size:14px;
  color:var(--mint-3)}
.hq-faq p{margin:0;padding:0 16px 15px;font-size:13.5px;color:var(--soft)}
.hq-band{display:grid;gap:13px;margin:0;padding:20px;border-radius:16px;
  background:linear-gradient(135deg,var(--cop-2),#7A3310);border:1px solid var(--line-2)}
.hq-band b{font-size:16.5px;font-weight:800;line-height:1.5;color:#fff}
.hq-band .hq-btn{max-width:330px}

/* ---------- footer ---------- */
.hq-foot{display:grid;gap:18px;width:min(var(--wrap),100%);margin:0 auto;
  padding:26px var(--pad) 30px;border-top:1px solid var(--line-2)}
.hq-foot .brand{display:grid;gap:11px}
.hq-foot p{margin:0;font-size:12.5px;color:var(--mut);line-height:1.7}
.hq-foot .links{display:flex;flex-wrap:wrap;gap:8px}
.hq-foot .links a{font-size:12.5px;color:var(--txt);padding:9px 14px;border-radius:9px;
  background:var(--ind-2);min-height:44px;min-width:44px;display:inline-flex;
  align-items:center;justify-content:center}
.hq-foot .pay{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.hq-foot .pay span{display:flex;align-items:center;justify-content:center;min-width:0;
  flex:0 1 auto;height:34px;padding:0 11px;border-radius:8px;background:var(--sheet)}
.hq-foot .pay img{max-height:18px;width:auto;min-width:0;object-fit:contain;flex:0 1 auto}
.hq-foot .legal{display:flex;align-items:flex-start;gap:13px;padding-top:16px;
  border-top:1px solid var(--line)}
.hq-foot .legal>div{display:grid;gap:8px;min-width:0}
.hq-foot .age{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border-radius:9px;border:2px solid var(--cop);color:var(--cop-3);
  font-weight:900;font-size:12px}
.hq-foot small{font-size:11.5px;color:var(--mut)}

/* ---------- fixed app bar: five flat tabs, the centre one is the register CTA ---------- */
.hq-tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;
  grid-template-columns:repeat(5,1fr);height:var(--bar);
  background:linear-gradient(180deg,#141839,#07091A);border-top:1px solid var(--line-2)}
.hq-tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--mut);font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  min-width:0;padding:0 3px;text-align:center}
.hq-tabs a .i{font-size:17px;line-height:1}
.hq-tabs a.mid{color:#fff;background:linear-gradient(170deg,var(--cop-3),var(--cop-2))}

/* ---------- paged entry modal: ONE offer and ONE button per screen ---------- */
.hq-pop{position:fixed;inset:0;z-index:95;background:rgba(6,8,22,.86);display:none;
  align-items:center;justify-content:center;padding:16px}
.hq-pop.on{display:flex}
.hq-pop .bx{position:relative;width:min(372px,100%);max-height:92vh;overflow:hidden;
  border-radius:16px;background:var(--ind-2);border:1px solid var(--line-2);
  box-shadow:0 24px 64px rgba(0,0,0,.7);display:flex;flex-direction:column}
/* The close control lives INSIDE the card: .bx clips its corners, so an overhanging button
   would lose its top half. */
.hq-pop .x{position:absolute;top:10px;right:10px;z-index:4;width:36px;height:36px;
  border-radius:9px;border:1px solid var(--line);background:rgba(8,10,26,.9);color:var(--txt);
  font-size:20px;line-height:1;cursor:pointer}
/* The card never grows past 92vh and never scrolls as a whole, so the close control and the
   pager stay put; only the offer panel scrolls if its text runs long. */
.hq-pop .pgs{display:block;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.hq-pop .pgs .pg{display:none}
.hq-pop .pgs .pg.on{display:block}
.hq-pop .pg .bd{display:grid;gap:10px;padding:14px 16px 4px}
.hq-pop .pg .bd em{justify-self:start;font-style:normal;font-size:15px;font-weight:900;
  letter-spacing:.02em;padding:4px 12px;border-radius:999px;
  background:linear-gradient(100deg,var(--mint-3),var(--mint-2));color:var(--mint-ink)}
.hq-pop .pg .bd b{font-size:16.5px;font-weight:800;color:var(--bone);line-height:1.4}
.hq-pop .pg .bd p{margin:0;font-size:13px;color:var(--soft);line-height:1.6}
.hq-pop .pager{display:flex;align-items:center;gap:10px;padding:13px 16px 4px}
.hq-pop .pager button{min-width:38px;min-height:38px;border-radius:9px;
  border:1px solid var(--line-3);background:var(--ind-0);color:var(--mint);font-size:19px;
  line-height:1;cursor:pointer;padding:0}
.hq-pop .pager .dots{display:flex;gap:7px;flex:1;min-width:0;justify-content:center}
.hq-pop .pager .dots button{width:9px;height:9px;min-width:9px;min-height:9px;border-radius:50%;
  border:0;background:var(--ind-4);padding:0}
.hq-pop .pager .dots button.on{background:var(--cop);width:22px;min-width:22px;border-radius:5px}
.hq-pop .pager .cnt{flex:none;font-size:11.5px;font-weight:800;color:var(--mut);
  white-space:nowrap}
.hq-pop .later{display:block;width:100%;min-height:46px;border:0;background:none;
  color:var(--mut);font:800 13px var(--font);cursor:pointer;padding:0 16px 13px}

/* ---------- breakpoints ---------- */
@media(max-width:900px){
  .hq-hero .in{grid-template-columns:minmax(0,1fr);gap:18px}
  /* Phone and small tablet: the CTA pair rides directly under the H1 and the lead, with the
     art panel after it, so the primary button lands inside the thumb zone on a 375x667. */
  .hq-hero .in .bd{order:1}
  .hq-hero .in .pic{order:2}
  .hq-hero h1{font-size:25px}
  .hq-art.hr{aspect-ratio:16/9}
  .hq-paycards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hq-draw{grid-template-columns:minmax(0,1fr)}
  .hq-app{grid-template-columns:minmax(0,1fr)}
  .hq-studios{grid-template-columns:minmax(0,1fr)}
  .hq-desk .dr{grid-template-columns:minmax(0,1fr);gap:7px}
}
@media(max-width:560px){
  :root{--pad:14px;--gap:18px}
  .hq-hero{margin-top:14px}
  .hq-hero h1{font-size:23px}
  .hq-hero p.lead{font-size:13.5px}
  .hq-hero .in{padding:16px}
  .hq-hero .act .hq-btn{flex:1 1 100%}
  /* Word cards collapse to one column on a phone; picture tiles stay two-up, because a
     half-width square still reads as a square. */
  .hq-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hq-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hq-paycards{grid-template-columns:minmax(0,1fr)}
  .hq-kyc{grid-template-columns:minmax(0,1fr)}
  .hq-rooms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hq-games{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hq-app .sp{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hq-time li{grid-template-columns:62px minmax(0,1fr);gap:11px}
  .hq-head .acts .hq-btn{padding:0 13px;font-size:12px}
  .hq-head .util .tag{display:none}
  .hq-logo b{font-size:19px}
  .hq-sec .sh h2{font-size:17px}
  .hq-content h2{font-size:18px}
}
@media(max-width:380px){
  .hq-rooms{grid-template-columns:minmax(0,1fr)}
  .hq-stats{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}