/* ============ bet88 — front-end styles ============ */
:root{
  --gold:#e8952e; --gold-2:#f7b93a; --gold-soft:#f0a94a;
  --bg:#0b0b0e; --bg-2:#101015; --bg-3:#15151c;
  --cream:#f2ede3; --card:#191921;
  --text:#f4f4f6; --dim:#9a9aa6; --line:rgba(255,255,255,.08);
  --radius:14px; --maxw:1200px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  font-size:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;border-radius:8px;padding:11px 26px;cursor:pointer;border:none;transition:.25s}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1a1205}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 10px 26px rgba(232,149,46,.35)}
.btn-lg{padding:14px 40px;font-size:1.05rem}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(9,9,12,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800}
.brand-logo{height:36px;width:auto}
.brand-latin{color:var(--gold);font-size:1.7rem;font-style:italic;font-weight:900;letter-spacing:.5px}
.brand-cn{color:#fff;font-size:1.25rem;font-weight:800}
.main-nav{display:flex;gap:26px;margin-left:8px;flex:1}
.main-nav a{color:#dcdce2;font-size:.95rem;position:relative;padding:6px 0;transition:.2s}
.main-nav a:hover{color:var(--gold)}
.main-nav a.on{color:var(--gold)}
.main-nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-2));border-radius:2px}
.header-cta{white-space:nowrap}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer}
.nav-toggle span{width:24px;height:2px;background:#fff;border-radius:2px}

/* top promo bar — refined gold-accented card, placed directly under each page's H1.
   Sits inside the page content container and fills that width (aligns with the H1 & body). */
.promobar{
  position:relative;
  display:flex;align-items:center;gap:18px;
  max-width:var(--maxw);margin:18px auto;padding:20px 24px;box-sizing:border-box;
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(240,160,32,.14), transparent 55%),
    linear-gradient(135deg,#1c1c26 0%,#14141a 60%,#191410 100%);
  border:1px solid rgba(240,160,32,.35);
  border-radius:16px;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.promobar::before{
  content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.06), transparent);
  transform:skewX(-20deg);pointer-events:none}
.promobar:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,0,0,.55);border-color:rgba(240,160,32,.6)}
.promobar-img{width:76px;height:76px;object-fit:contain;flex:0 0 auto;
  border-radius:12px;padding:0;
  background:radial-gradient(circle at 50% 40%, rgba(240,160,32,.16), transparent 72%)}
.promobar-text{flex:1;margin:0;color:#f3eee2;font-size:1.06rem;line-height:1.55;font-weight:600;letter-spacing:.2px}
.promobar-btn{flex:0 0 auto;white-space:nowrap;text-decoration:none;
  background:linear-gradient(135deg,#ffc659,#f0a020);color:#1a1206;
  font-weight:700;font-size:1rem;padding:13px 26px;border-radius:12px;
  box-shadow:0 6px 16px rgba(240,160,32,.35);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.promobar-btn:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 8px 22px rgba(240,160,32,.5)}
.promobar-btn:active{transform:translateY(0)}
@media(max-width:640px){
  .promobar{flex-wrap:wrap;align-items:center;text-align:left;gap:12px;padding:16px}
  .promobar-img{width:56px;height:56px;margin:0}
  .promobar-text{flex:1;min-width:0}
  .promobar-btn{order:3;flex:0 0 100%;text-align:center}
}

/* hero — full-bleed banner with editable text overlaid on the left */
.hero{position:relative;overflow:hidden;background:#08080b;min-height:620px;display:flex;align-items:center}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,11,.94) 0%,rgba(8,8,11,.82) 34%,rgba(8,8,11,.45) 60%,rgba(8,8,11,.12) 100%);}
.hero-inner{position:relative;z-index:1;width:100%;padding:70px 24px}
.hero-copy{max-width:560px}
.hero-tag{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.ht-latin{color:var(--gold);font-style:italic;font-weight:900;font-size:3.4rem;line-height:1;text-shadow:0 6px 22px rgba(232,149,46,.4)}
.ht-cn{color:#fff;font-weight:800;font-size:2.4rem}
.hero-title{font-size:2.6rem;font-weight:800;line-height:1.25;margin-bottom:20px;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.hero-desc{color:#c9c9d2;font-size:1.05rem;max-width:520px;margin-bottom:30px;text-shadow:0 1px 10px rgba(0,0,0,.5)}

/* inner-page banner + contact */
.page-hero{position:relative;overflow:hidden;min-height:280px;display:flex;align-items:center}
.page-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.page-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,11,.78),rgba(8,8,11,.9)),radial-gradient(60% 100% at 20% 50%,rgba(232,149,46,.18),transparent)}
.page-hero-inner{position:relative;z-index:1;padding:40px 24px}
.page-hero-inner h1{font-size:2.2rem;font-weight:800;color:#fff}
.page-hero-inner p{color:var(--dim);margin-top:8px;max-width:640px}
.crumb{display:flex;gap:10px;align-items:center;margin-top:14px;color:var(--dim);font-size:.86rem}
.crumb a{color:var(--dim)}.crumb a:hover{color:var(--gold)}.crumb em{color:var(--gold);font-style:normal}
.contact-section{background:var(--bg-2)}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.contact-card{text-align:center;padding:32px 20px;border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);border:1px solid var(--line)}
.contact-ic{width:52px;height:52px;margin:0 auto 14px;color:var(--gold)}
.contact-ic svg{width:100%;height:100%}
.contact-card h4{font-size:1.05rem;margin-bottom:8px}
.contact-card p{color:var(--dim)}
.contact-note{text-align:center;color:var(--dim);max-width:760px;margin:36px auto 0;line-height:1.9}

/* sections shared */
.section{padding:76px 0}
.sec-title{text-align:center;font-size:1.9rem;font-weight:800;color:#fff}
.sec-title.left{text-align:left}
.sec-divider{width:54px;height:3px;border-radius:3px;margin:14px auto 34px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2))}
.sec-sub{text-align:center;color:var(--dim);margin:12px 0 42px}

/* advantages */
.adv-section{background:var(--bg-2)}
.adv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.adv-card{text-align:center;padding:26px 16px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border:1px solid var(--line);transition:.28s}
.adv-card:hover{transform:translateY(-6px);border-color:rgba(232,149,46,.4);
  box-shadow:0 16px 40px rgba(0,0,0,.4)}
.adv-icon{width:58px;height:58px;margin:0 auto 16px;color:var(--gold)}
.adv-icon svg{width:100%;height:100%}
.adv-card h3{font-size:1.1rem;margin-bottom:8px}
.adv-card p{color:var(--dim);font-size:.88rem}

/* products */
.prod-section{background:var(--cream)}
.prod-section .sec-title{color:#1c1c22}
.prod-section .sec-sub{color:#6b6b73}
.prod-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.prod-card{background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 10px 26px rgba(30,20,5,.10);transition:.28s;display:flex;flex-direction:column}
.prod-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(30,20,5,.18)}
.prod-img{aspect-ratio:4/3;overflow:hidden}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.prod-card:hover .prod-img img{transform:scale(1.06)}
.prod-body{padding:16px 16px 18px}
.prod-body h3{color:#1c1c22;font-size:1.08rem;margin-bottom:6px}
.prod-body p{color:#6b6b73;font-size:.85rem;min-height:44px}
.prod-more{display:inline-flex;align-items:center;gap:6px;color:var(--gold);
  font-size:.85rem;font-weight:600;margin-top:6px}
.prod-more .ar{width:15px;height:15px;display:inline-block;transition:.25s}
.prod-card:hover .prod-more .ar{transform:translateX(4px)}

/* popular carousel */
.pop-section{background:linear-gradient(180deg,#0a0a0e,#050507);padding-bottom:60px}
.sec-title.light{color:#fff}
.hg-viewport{overflow:hidden;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.hg-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px;scrollbar-width:none;-ms-overflow-style:none}
.hg-track::-webkit-scrollbar{display:none}
.hg-card{position:relative;flex:0 0 calc((100% - 48px) / 4);aspect-ratio:640 / 440;border-radius:14px;
  overflow:hidden;scroll-snap-align:start;background:#0f1420;text-decoration:none;display:block;
  border:1px solid rgba(255,255,255,.06);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.hg-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:.5s}
.hg-card:hover img{transform:scale(1.05)}
.hg-badge{position:absolute;top:12px;left:12px;z-index:2;background:rgba(0,0,0,.55);color:#fff;
  font-weight:700;font-size:.75rem;padding:4px 10px;border-radius:6px;letter-spacing:.5px;backdrop-filter:blur(4px)}
.hg-name{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;color:#fff;font-weight:700;font-size:1rem;
  text-shadow:0 1px 6px rgba(0,0,0,.85)}
.hg-dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.hg-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.25);cursor:pointer;padding:0;transition:.25s}
.hg-dots button.on{background:var(--gold);width:22px;border-radius:6px}
@media(max-width:1024px){.hg-card{flex-basis:calc((100% - 32px)/3)}}
@media(max-width:768px){.hg-card{flex-basis:calc((100% - 16px)/2)}}
@media(max-width:480px){.hg-card{flex-basis:82%}}

/* tech */
.tech-section{background:radial-gradient(60% 70% at 50% 40%,rgba(232,149,46,.10),transparent),var(--bg)}
.tech-layout{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center;margin-top:20px}
.tech-item{display:flex;gap:16px;padding:18px;border-radius:12px;transition:.25s}
.tech-item:hover{background:rgba(255,255,255,.03)}
.tech-col:last-child .tech-item{flex-direction:row-reverse;text-align:right}
.tech-icon{flex:0 0 46px;width:46px;height:46px;color:var(--gold);
  border:1px solid rgba(232,149,46,.4);border-radius:10px;padding:9px}
.tech-icon svg{width:100%;height:100%}
.tech-item h4{font-size:1.02rem;margin-bottom:4px}
.tech-item p{color:var(--dim);font-size:.85rem}
.tech-center{display:flex;justify-content:center}
.tech-shield{width:150px;height:170px;display:grid;place-items:center;
  color:#fff;font-style:italic;font-weight:900;font-size:2.4rem;
  background:linear-gradient(160deg,rgba(232,149,46,.9),rgba(180,110,20,.85));
  clip-path:polygon(50% 0,100% 18%,100% 66%,50% 100%,0 66%,0 18%);
  box-shadow:0 20px 60px rgba(232,149,46,.4)}

/* partners */
.partner-section{background:var(--bg-2)}
.partner-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:8px}
.partner-logo{border:1px solid #262633;border-radius:12px;overflow:hidden;display:block;line-height:0;padding:0;transition:.25s}
.partner-logo:hover{border-color:rgba(232,149,46,.4)}
.partner-logo img{width:100%;height:auto;display:block}
.partner-lead{text-align:center;color:var(--dim);line-height:1.95;max-width:840px;margin:0 auto 32px}
.partner-desc{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:34px;text-align:left}
.partner-desc>div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.partner-desc h3{color:var(--gold);font-size:1.1rem;font-weight:700;margin-bottom:8px}
.partner-desc p{color:var(--dim);line-height:1.85;margin:0}

/* news */
.news-section{background:var(--bg)}
.news-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.news-all{color:var(--dim);font-size:.9rem}
.news-all:hover{color:var(--gold)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.news-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;transition:.28s}
.news-card:hover{transform:translateY(-5px);border-color:rgba(232,149,46,.35)}
.news-img{flex:0 0 140px;overflow:hidden}
.news-img img{width:100%;height:100%;object-fit:cover}
.news-body{padding:16px}
.news-body h4{font-size:.98rem;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.news-date{color:var(--dim);font-size:.82rem}

/* news article page */
.article-section{background:var(--bg)}
.article-body{max-width:var(--maxw);margin:0 auto}
.article-body .news-date{display:inline-block;color:var(--gold);font-size:.85rem;margin-bottom:16px}
.article-body p{color:var(--dim);line-height:1.95;font-size:1.02rem}
/* full static news articles (prose) */
.news-article{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.news-article .breadcrumb{color:var(--dim);font-size:.9rem;margin-bottom:18px}
.news-article .breadcrumb a{color:var(--dim)}
.news-article .breadcrumb a:hover{color:var(--gold)}
.news-article h1{color:#fff;line-height:1.4;margin:0 0 10px;font-size:1.9rem}
.news-article .news-date{display:block;color:var(--gold);font-size:.9rem;margin:6px 0 18px}
.news-article h2{color:#fff;margin:26px 0 10px;font-size:1.2rem}
.news-article p{color:#c9c9d2;line-height:1.75;margin:0 0 1.1em;font-size:1rem}
.news-article .news-cta{margin-top:22px}

/* trust / legal doc pages (responsible-gaming / privacy / terms / contact) */
.doc-section{background:var(--bg)}
.doc-page{max-width:var(--maxw);margin:0 auto;padding:8px 24px}
.doc-page .breadcrumb{color:var(--dim);font-size:.9rem;margin-bottom:18px}
.doc-page .breadcrumb a{color:var(--dim)}
.doc-page .breadcrumb a:hover{color:var(--gold)}
.doc-page h1{color:#fff;margin:0 0 6px;font-size:1.9rem;line-height:1.4}
.doc-page h2{color:#fff;margin:26px 0 10px;font-size:1.2rem}
.doc-page p,.doc-page li{color:#c9c9d2;line-height:1.75;font-size:1rem}
.doc-page p{margin:0 0 1.1em}
.doc-page ul{margin:0 0 1.1em;padding-left:1.3em}
.doc-page li{margin:0 0 .5em}
.doc-page a{color:var(--gold)}
.doc-page a:hover{text-decoration:underline}
.doc-page .updated{color:#8a8a98;font-size:.9rem;margin-bottom:18px}

/* /promotions page */
.promo-page{max-width:var(--maxw);margin:0 auto;padding:8px 24px}
.promo-page .breadcrumb{color:var(--dim);font-size:.9rem;margin-bottom:18px}
.promo-page .breadcrumb a{color:var(--dim)}
.promo-page .breadcrumb a:hover{color:var(--gold)}
.promo-page h1{color:#fff;margin:0 0 8px;font-size:1.9rem;line-height:1.4}
.promo-page>p{color:#c9c9d2;line-height:1.75}
.promo-page h2{color:#fff;margin:26px 0 12px;font-size:1.25rem}
.promo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:6px 0 8px}
.promo-card{background:var(--bg-3);border:1px solid var(--line);border-radius:12px;padding:20px}
.promo-card h2{color:var(--gold);font-size:1.1rem;margin:0 0 8px}
.promo-card p{color:var(--dim);line-height:1.75;margin:0}
.promo-terms{color:#c9c9d2;line-height:1.75;padding-left:1.3em}
.promo-terms li{margin:0 0 .5em}
.promo-notice{color:#8a8a98;font-size:.9rem}
.promo-cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.promo-faq h3{color:#fff;margin:18px 0 6px;font-size:1.02rem}
.promo-faq p{color:var(--dim);line-height:1.75;margin:0 0 1.1em}

/* SEO content sections (intro / about / product-detail / why-us / faq / cta) */
.content-section{padding:60px 0}
.content-section .container{max-width:var(--maxw)}
.content-section h1{font-size:2rem;font-weight:800;color:#fff;margin-bottom:16px;line-height:1.3}
.content-section h2{font-size:1.7rem;font-weight:800;color:#fff;margin-bottom:16px}
.content-section h3{font-size:1.1rem;font-weight:700;color:var(--gold);margin:22px 0 8px}
.content-section p{color:var(--dim);line-height:1.95;margin-bottom:14px}
.content-section strong{color:#e9e9ef;font-weight:700}
.content-section .inline-link{color:var(--gold);font-weight:600}
.content-section .inline-link:hover{text-decoration:underline}
.content-section.alt{background:var(--bg-2)}
.content-section .notice{margin-top:14px;color:#6f6f79;font-size:.85rem}
.content-section ul{list-style:none;margin:6px 0 16px;padding:0}
.content-section li{position:relative;padding-left:22px;color:var(--dim);line-height:1.9;margin-bottom:10px}
.content-section li::before{content:"◆";position:absolute;left:0;top:.35em;color:var(--gold);font-size:.72rem}
.intro{padding-top:56px;padding-bottom:40px;background:var(--bg)}
.about-brand{background:var(--bg-2)}
.product-detail{background:var(--bg)}
.why-us{background:var(--bg-2)}
.faq{background:var(--bg)}
.faq h3{color:#fff}
.faq p{margin-bottom:22px}
.cta{background:radial-gradient(70% 100% at 50% 0,rgba(232,149,46,.12),transparent),var(--bg-2);text-align:center}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:8px 0 4px}
.cta .btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;border-radius:8px;padding:14px 34px;border:1px solid rgba(232,149,46,.6);color:var(--gold);background:transparent;transition:.25s}
.cta .btn-ghost:hover{background:rgba(232,149,46,.1)}
.cta .notice{margin-top:22px;color:#6f6f79;font-size:.85rem}

/* /advantages page (cards / stats / VS table) */
.adv-wrap{max-width:var(--maxw);margin:0 auto;padding:44px 24px;color:var(--text)}
.adv-wrap .breadcrumb{color:var(--dim);font-size:.86rem;margin-bottom:20px}
.adv-wrap .breadcrumb a{color:var(--dim)}
.adv-wrap .breadcrumb a:hover{color:var(--gold)}
.adv-hero h1{font-size:2rem;font-weight:800;color:#fff;margin-bottom:14px;line-height:1.3}
.adv-hero p{color:var(--dim);line-height:1.95}
.adv-core h2,.adv-vs h2,.adv-responsible h2,.adv-faq h2,.adv-cta h2{font-size:1.6rem;font-weight:800;color:#fff;margin:34px 0 18px}
.adv-core .adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.adv-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;transition:.25s}
.adv-card:hover{border-color:rgba(232,149,46,.4);transform:translateY(-4px)}
.adv-card h3{margin:14px 0 8px;font-size:1.15rem;color:#fff}
.adv-card p{color:var(--dim);line-height:1.75;font-size:.95rem}
.adv-ico{width:44px;height:44px;color:var(--gold)}
.adv-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.adv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:10px 0 6px}
.adv-stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;text-align:center}
.adv-stat b{display:block;font-size:2rem;color:var(--gold);line-height:1.2}
.adv-stat span{color:var(--dim);font-size:.9rem}
.vs-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:.95rem}
.vs-table caption{caption-side:top;text-align:left;color:var(--dim);margin-bottom:10px}
.vs-table th,.vs-table td{border:1px solid var(--line);padding:14px 16px;text-align:left;vertical-align:top}
.vs-table thead th{background:#1d1d27;color:#fff}
.vs-table th[scope=row]{color:#fff;background:#14141a;width:22%}
.vs-yes{color:var(--gold);font-weight:600}
.vs-no{color:#9a9aa6}
.adv-notice{color:#9a9aa6;font-size:.85rem;margin-top:8px}
.adv-responsible p{color:var(--dim);line-height:1.9}
.adv-faq h3{color:#fff;font-size:1.05rem;margin:20px 0 6px}
.adv-faq p{color:var(--dim);line-height:1.9}
.adv-cta{text-align:center;margin-top:24px;padding:34px 0}
.adv-cta .btn,.adv-cta .btn-ghost{margin:6px 8px 0}
.adv-cta .btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;border-radius:8px;padding:14px 34px;border:1px solid rgba(232,149,46,.6);color:var(--gold);background:transparent;transition:.25s}
.adv-cta .btn-ghost:hover{background:rgba(232,149,46,.1)}
@media(max-width:768px){.vs-table th,.vs-table td{padding:10px 10px;font-size:.85rem}}

/* products hub + product subpages (content-page) */
.content-page{padding:44px 0}
.content-page .container{max-width:var(--maxw)}
.content-page .breadcrumb{color:var(--dim);font-size:.86rem;margin-bottom:18px}
.content-page .breadcrumb a{color:var(--dim)}
.content-page .breadcrumb a:hover{color:var(--gold)}
.content-page h1{font-size:2rem;font-weight:800;color:#fff;margin-bottom:14px;line-height:1.3}
.content-page h2{font-size:1.5rem;font-weight:800;color:#fff;margin:30px 0 12px}
.content-page h3{font-size:1.08rem;font-weight:700;color:var(--gold);margin:18px 0 6px}
.content-page p{color:var(--dim);line-height:1.8;margin-bottom:12px;text-align:left}
.content-page img{max-width:100%;height:auto;border-radius:14px;border:1px solid var(--line);margin:16px 0}
.content-page .related{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.content-page .related a{color:var(--gold);font-weight:600}
.content-page .related a:hover{text-decoration:underline}
.product-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin:24px 0 8px}
.hub-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.25s}
.hub-card:hover{transform:translateY(-5px);border-color:rgba(232,149,46,.4);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.hub-card a{display:block;color:inherit}
.hub-card img{width:100%;height:190px;object-fit:cover;display:block;border:0;border-radius:0;margin:0}
.hub-card h2{font-size:1.2rem;color:#fff;margin:16px 18px 6px}
.hub-card p{color:var(--dim);font-size:.92rem;line-height:1.7;margin:0 18px 12px}
.hub-card .more{display:block;color:var(--gold);font-weight:600;font-size:.9rem;margin:0 18px 18px}
/* /products hub-level enrich: compare table / choose / assure / faq */
.hub-compare>p,.hub-choose p,.hub-assure p{color:#c9c9d2;line-height:1.75}
.hub-compare h2,.hub-choose h2,.hub-assure h2{color:#fff;margin:26px 0 12px}
.hub-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:.94rem}
.hub-table caption{caption-side:top;text-align:left;color:var(--dim);margin-bottom:8px}
.hub-table th,.hub-table td{border:1px solid var(--line);padding:12px 14px;text-align:left;color:#d7d7de;line-height:1.7}
.hub-table thead th{background:#1d1d27;color:#fff}
.hub-table th[scope=row]{background:#14141a;color:#fff;white-space:nowrap}
.hub-choose a,.hub-assure a{color:var(--gold)}
.hub-choose a:hover,.hub-assure a:hover{text-decoration:underline}
.hub-faq h2{color:#fff;margin:26px 0 12px}
.hub-faq h3{color:#fff;margin:18px 0 6px;font-size:1.02rem}
.hub-faq p{color:var(--dim);line-height:1.75;margin:0 0 1.1em}
@media(max-width:560px){.hub-table th,.hub-table td{padding:9px 10px;font-size:.85rem}}

/* product game gallery (small-image grid) */
.game-gallery{margin:20px 0}
.game-gallery h2{color:#fff;margin:8px 0 16px}
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.game-card{margin:0;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;text-align:center;transition:transform .15s ease,border-color .15s ease}
.game-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.game-card a{display:block;color:inherit}
.game-card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;background:#0f0f14;border:0;border-radius:0;margin:0}
.game-card figcaption{padding:10px 8px;display:flex;flex-direction:column;gap:2px}
.game-card .gc-title{color:#e9e9ee;font-size:.9rem;font-weight:600}
.game-card .gc-label{color:var(--gold);font-size:.74rem}
@media(max-width:480px){.game-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}}

/* /products deep content (sports .sp-*, lottery .lo-*, slots .sl-*): tables, tip, glossary */
.content-page .sp-table,.content-page .lo-table,.content-page .sl-table{width:100%;border-collapse:collapse;margin:10px 0 6px;font-size:.94rem}
.content-page .sp-table caption,.content-page .lo-table caption,.content-page .sl-table caption{caption-side:top;text-align:left;color:var(--dim);margin-bottom:8px}
.content-page .sp-table th,.content-page .sp-table td,.content-page .lo-table th,.content-page .lo-table td,.content-page .sl-table th,.content-page .sl-table td{border:1px solid var(--line);padding:12px 14px;text-align:left;color:#d7d7de;line-height:1.7}
.content-page .sp-table thead th,.content-page .lo-table thead th,.content-page .sl-table thead th{background:#1d1d27;color:#fff}
.content-page .sp-table th[scope=row],.content-page .lo-table th[scope=row],.content-page .sl-table th[scope=row]{background:#14141a;color:#fff;white-space:nowrap}
.content-page .sp-tip,.content-page .lo-tip,.content-page .sl-tip{color:#d8c48a;background:#1a1710;border-left:3px solid var(--gold);padding:10px 14px;border-radius:0 8px 8px 0;line-height:1.8}
.content-page .sp-notice,.content-page .lo-notice,.content-page .sl-notice{color:var(--gold);font-size:.85rem;margin-top:6px}
.content-page .sp-glossary dl,.content-page .lo-glossary dl,.content-page .sl-glossary dl{display:grid;grid-template-columns:170px 1fr;gap:10px 18px;margin:8px 0}
.content-page .sp-glossary dt,.content-page .lo-glossary dt,.content-page .sl-glossary dt{color:var(--gold);font-weight:600}
.content-page .sp-glossary dd,.content-page .lo-glossary dd,.content-page .sl-glossary dd{color:var(--dim);margin:0;line-height:1.8}
.content-page .sl-types h3{color:#fff;margin:18px 0 6px}
@media(max-width:560px){.content-page .sp-glossary dl,.content-page .lo-glossary dl,.content-page .sl-glossary dl{grid-template-columns:1fr;gap:2px 0}.content-page .sp-glossary dd,.content-page .lo-glossary dd,.content-page .sl-glossary dd{margin:0 0 10px}.content-page .sp-table th,.content-page .sp-table td,.content-page .lo-table th,.content-page .lo-table td,.content-page .sl-table th,.content-page .sl-table td{padding:9px 10px;font-size:.85rem}}

/* live-casino two-layer (halls banner + vertical game cards) */
.lc-wrap{max-width:var(--maxw);margin:0 auto;padding:44px 24px;color:var(--text)}
.lc-wrap .breadcrumb{color:var(--dim);font-size:.86rem;margin-bottom:18px}
.lc-wrap .breadcrumb a{color:var(--dim)}
.lc-wrap .breadcrumb a:hover{color:var(--gold)}
.lc-wrap h1{font-size:2rem;font-weight:800;color:#fff;margin-bottom:14px;line-height:1.3}
.lc-wrap h2{color:#fff;margin:30px 0 16px;font-size:1.5rem}
.lc-wrap>section>p,.lc-why p,.lc-faq p{color:var(--dim);line-height:1.8;margin-bottom:12px}
.lc-faq h3{color:var(--gold);font-size:1.05rem;margin:16px 0 6px}
.lc-note{color:#6f6f79;font-size:.85rem;margin-top:18px}
.lc-lead{color:var(--dim);line-height:1.8;margin:0 0 16px}
.lc-halls h3,.lc-howto-play h3{color:#fff;font-size:1.08rem;margin:20px 0 6px}
.lc-howto-play p,.lc-start p{color:var(--dim);line-height:1.85;margin-bottom:10px}
.lc-notice{color:#6f6f79;font-size:.85rem;margin-top:16px}
.lc-what p,.lc-limits p,.lc-beginner p,.lc-guide p{color:var(--dim);line-height:1.9;margin:0 0 12px}
.lc-what h2,.lc-guide h2,.lc-glossary h2,.lc-limits h2,.lc-beginner h2{color:#fff}
.lc-guide h3{color:#fff;margin:22px 0 8px}
.lc-limits strong{color:#e9e9ef}
.lc-tip{color:#d8c48a;background:#1a1710;border-left:3px solid var(--gold);padding:10px 14px;border-radius:0 8px 8px 0;line-height:1.8;margin:8px 0}
.lc-odds,.lc-compare{width:100%;border-collapse:collapse;margin:10px 0 6px;font-size:.94rem}
.lc-odds caption,.lc-compare caption{caption-side:top;text-align:left;color:var(--dim);margin-bottom:8px}
.lc-odds th,.lc-odds td,.lc-compare th,.lc-compare td{border:1px solid var(--line);padding:12px 14px;text-align:left;color:#d7d7de;vertical-align:top}
.lc-odds thead th,.lc-compare thead th{background:#1d1d27;color:#fff}
.lc-odds th[scope=row],.lc-compare th[scope=row]{background:#14141a;color:#fff}
.lc-glossary dl{display:grid;grid-template-columns:160px 1fr;gap:10px 18px;margin:8px 0}
.lc-glossary dt{color:var(--gold);font-weight:600}
.lc-glossary dd{color:var(--dim);margin:0;line-height:1.8}
@media(max-width:560px){.lc-glossary dl{grid-template-columns:1fr;gap:2px 0}.lc-glossary dd{margin:0 0 10px}.lc-odds th,.lc-odds td,.lc-compare th,.lc-compare td{padding:9px 10px;font-size:.85rem}}
.lc-wrap .related{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.lc-wrap .related a{color:var(--gold);font-weight:600}
/* layer 1: hall banner cards */
.hall-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.hall-card{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:5/3;border:1px solid var(--line);text-decoration:none}
.hall-card .hall-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hall-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,0) 75%)}
.hall-card .hall-text{position:absolute;left:22px;top:50%;transform:translateY(-50%);z-index:2}
.hall-card .hall-text h3{color:#fff;font-size:1.5rem;margin:0 0 10px}
.hall-card .hall-text .hall-sub{display:block;color:var(--gold);font-size:.78rem;letter-spacing:2px;text-transform:uppercase;margin:-6px 0 10px}
.hall-card .hall-text p{color:#e9e9ee;margin:2px 0;font-size:.95rem}
/* layer 2: vertical game cards */
.rg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.rg-card{position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:3/4;border:1px solid var(--line);text-decoration:none;transition:transform .15s ease,border-color .15s ease;background:#0f0f14}
.rg-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rg-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.82) 100%)}
.rg-card .rg-meta{position:absolute;left:0;right:0;bottom:0;padding:12px;z-index:2;display:flex;flex-direction:column;gap:3px}
.rg-card .rg-title{color:#fff;font-size:1rem;font-weight:600}
.rg-card .rg-hall{color:var(--gold);font-size:.78rem;letter-spacing:.5px}
@media(max-width:480px){.rg-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.hall-card .hall-text h3{font-size:1.2rem}}

/* footer */
.site-footer{background:#08080b;border-top:1px solid var(--line);padding-top:56px}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:30px;padding-bottom:40px}
.foot-brand p{color:var(--dim);font-size:.9rem;margin:16px 0 18px;max-width:320px}
.socials{display:flex;gap:12px}
.soc{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.06);color:#fff;transition:.25s}
.soc svg{width:18px;height:18px}
.soc:hover{background:var(--gold);color:#1a1205}
.foot-col h5{font-size:1rem;margin-bottom:16px;color:#fff}
.foot-col a,.foot-contact span{display:block;color:var(--dim);font-size:.86rem;margin-bottom:10px;transition:.2s}
.foot-col a:hover{color:var(--gold)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;
  padding:20px 24px;border-top:1px solid var(--line);color:var(--dim);font-size:.82rem}
.foot-badges{display:flex;gap:16px}
.foot-badges span{color:var(--gold)}

/* responsive */
@media(max-width:1024px){
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .adv-section .adv-grid{grid-template-columns:repeat(3,1fr)}
  .news-grid{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .hero-title{font-size:2rem}
}
@media(max-width:768px){
  .main-nav,.header-cta{display:none}
  .nav-toggle{display:flex}
  .main-nav.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;
    background:#0c0c11;padding:18px 24px;border-bottom:1px solid var(--line)}
  .hero{min-height:520px}
  .hero-inner{padding:54px 24px}
  .hero-scrim{background:linear-gradient(90deg,rgba(8,8,11,.9),rgba(8,8,11,.72))}
  .hero-title{font-size:2rem}
  .contact-grid{grid-template-columns:1fr}
  .tech-layout{grid-template-columns:1fr}
  .tech-center{order:-1;margin-bottom:10px}
  .tech-col:last-child .tech-item{flex-direction:row;text-align:left}
  .prod-grid,.news-grid,.foot-top{grid-template-columns:1fr}
  .adv-section .adv-grid{grid-template-columns:repeat(2,1fr)}
  .partner-logos{grid-template-columns:repeat(2,1fr)}
  .ht-latin{font-size:2.6rem}.ht-cn{font-size:1.8rem}
  .foot-bottom{flex-direction:column;gap:12px}
}

/* ===== Readability: WCAG 2.2 SC 1.4.12 text spacing + Lighthouse legible font sizes ===== */
/* Base body text: line-height >=1.5 (using 1.75 for CJK comfort), paragraph spacing ~1.1em */
p,li,dd,td{line-height:1.75}
p{margin:0 0 1.1em}
/* Body-text minimum 14px (0.875rem) — raise the few sub-14px paragraph rules */
.prod-body p,.tech-item p,.article-body p,.content-section p,.content-page p,
.lc-wrap>section>p,.lc-why p,.lc-faq p,.lc-howto-play p,.lc-start p,
.lc-what p,.lc-limits p,.lc-beginner p,.lc-guide p,
.adv-hero p,.adv-responsible p,.adv-faq p,.hub-card p,.hall-card .hall-text p{font-size:1rem}
.adv-card p{font-size:.95rem}
/* Body/intro prose fills the standard content width (aligned with each page's
   titles & cards). Line-height kept for readability; no narrower width cap. */
/* Card/inline body text also relaxed line-height */
.adv-card p,.card p,.partner-desc p,.hg-sub,.prod-body p,.tech-item p,.hub-card p{line-height:1.75}