:root{
  --bg:#111;
  --panel:#1d1d1d;
  --panel2:#282828;
  --text:#f4f4f4;
  --muted:#bdbdbd;
  --brand-green:#4da800;
  --brand-green-light:#8bd51d;
  --brand-green-dark:#1e6200;
  --brand-lime:#d4f85a;
  --red:#f4320b;
  --container:980px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Montserrat",Arial,sans-serif;background:#111;color:var(--text)}
button,input,select,textarea{font-family:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--container),calc(100% - 20px));margin:0 auto}
.site-header{background:linear-gradient(#202020,#161616);border-bottom:1px solid #2d2d2d}
.header-inner{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand img{height:auto}
.desktop-logo{width:250px;height:auto;display:block}
.header-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.header-links{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:9px;color:#d7d7d7;line-height:1}
.header-links a:hover{color:var(--brand-lime)}
.header-links span{color:#777}
.header-links span:nth-of-type(2){color:#d7d7d7}
.auth-actions{display:flex;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-width:92px;height:34px;padding:0 16px;border-radius:3px;font-size:12px;font-weight:800;text-transform:uppercase;border:0;cursor:pointer}
.btn-login{background:var(--red);color:#fff}
.btn-register{background:linear-gradient(180deg,#9be52f 0%,#5fbd0a 52%,#338600 100%);color:#fff;border:1px solid #72c91b;text-shadow:0 1px 1px rgba(0,0,0,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.35)}
.btn-register:hover{background:linear-gradient(180deg,#aff244 0%,#6dca12 52%,#3a9300 100%)}
.main-nav{height:38px;background:linear-gradient(180deg,#5fb70b 0%,#3c9200 52%,#276800 100%);border-top:1px solid #78cc25;border-bottom:1px solid #153c00;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);position:sticky;top:0;z-index:40}
.nav-inner{height:100%;display:flex;align-items:stretch}
.nav-list{margin:0;padding:0;list-style:none;display:flex;align-items:stretch;height:100%}
.nav-list a{height:100%;display:flex;align-items:center;padding:0 13px;font-size:12px;font-weight:800;color:#fff;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.65);transition:.18s;border-left:1px solid rgba(255,255,255,.04);border-right:1px solid rgba(0,0,0,.08)}
.nav-list a:hover,.nav-list a.active{background:linear-gradient(180deg,#e2ff76 0%,#b8e938 50%,#8cc711 100%);color:#173800;text-shadow:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.14)}
.mobile-toggle{display:none;margin-left:auto;background:transparent;border:0;color:#fff;font-size:24px;cursor:pointer}
.hero{padding:18px 0 10px;background:radial-gradient(circle at 50% 0,#252525 0,#121212 55%,#0d0d0d 100%)}
.hero-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.hero-main,.hero-side{border:1px solid #3a3a3a;background:linear-gradient(135deg,#202020,#0e0e0e);overflow:hidden;position:relative}
.hero-main{grid-column:1 / span 2;height:350px}.hero-side{height:170px}.side-stack{display:grid;grid-column:3;gap:5px}.hero-slider{position:relative;overflow:hidden;background:#0e0e0e}.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translate3d(100%,0,0);opacity:1;pointer-events:none;will-change:transform}.hero-slide.is-active{transform:translate3d(0,0,0);z-index:2;pointer-events:auto}.hero-slide.is-entering{transform:translate3d(0,0,0);z-index:3;transition:transform .7s cubic-bezier(.22,.61,.36,1)}.hero-slide.is-leaving{transform:translate3d(-100%,0,0);z-index:2;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.placeholder{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:#888;letter-spacing:.08em;font-weight:800;background-image:linear-gradient(135deg,rgba(255,255,255,.03) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.03) 50%,rgba(255,255,255,.03) 75%,transparent 75%,transparent);background-size:24px 24px}
.hero-bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:5px}
.hero-bottom .placeholder{height:112px;border:1px solid #3a3a3a;background-color:#151515}
.hero-bottom-card{height:112px;border:1px solid #3a3a3a;background:#151515;overflow:hidden;position:relative}
.hero-bottom-card img{width:100%;height:100%;display:block;object-fit:cover}
.quick-section{padding:9px 0;background:#151515;border-top:1px solid #242424;border-bottom:1px solid #242424}
.quick-inner{min-height:60px;display:grid;grid-template-columns:1.3fr repeat(3,1fr);align-items:center;gap:8px}
.quick-copy strong{display:block;font-size:14px}.quick-copy span{font-size:11px;color:var(--muted)}
.quick-btn{height:38px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.65);background:linear-gradient(to bottom,rgba(102,196,55,1) 0%,rgba(37,114,30,1) 48%,rgba(102,196,55,1) 99%)}
.quick-btn.primary{background:#f4320b;color:#fff}
.content-section{padding:26px 0 34px}
.section-title{text-align:center;margin:0 0 18px;font-size:20px;text-transform:uppercase;letter-spacing:.05em}
.section-subtitle{text-align:center;margin:-8px auto 20px;color:var(--muted);max-width:720px;font-size:13px;line-height:1.7}
.games-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.game-card{height:170px;border:1px solid transparent;border-radius:8px;background:linear-gradient(#1d1d1d,#101010) padding-box,linear-gradient(135deg,#d9ff9b 0%,#8bea49 24%,#45b92b 50%,#1f7f22 72%,#a9f264 100%) border-box;display:flex;align-items:flex-end;overflow:hidden;position:relative;box-shadow:0 0 0 1px rgba(105,210,55,.08),0 2px 8px rgba(0,0,0,.28)}
.game-card::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 70% 30%,rgba(130,200,40,.16),transparent 38%),linear-gradient(135deg,rgba(255,255,255,.03),transparent 45%)}
.game-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}
.game-card span{position:absolute;left:0;bottom:0;z-index:2;width:100%;height:52px;padding:26px 12px 8px;background:none;font-weight:800;font-size:13px;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.8);line-height:1.1;overflow:hidden;display:flex;align-items:flex-end}
.game-card span::before{content:"";position:absolute;inset:12px 0 0 0;z-index:-1;background:linear-gradient(90deg,rgba(94,188,50,.82) 0%,rgba(39,118,32,.88) 55%,rgba(94,188,50,.68) 100%);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 22H500C522 22 538 27 550 40C562 53 577 61 600 62H1000V100H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 22H500C522 22 538 27 550 40C562 53 577 61 600 62H1000V100H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;box-shadow:0 -1px 0 rgba(255,255,255,.08) inset}
.inner-page{min-height:500px;padding:28px 0 40px}
.page-box{padding:12px}
.page-box h1{margin-top:0;font-size:22px}.page-box p{color:#fff;line-height:1.7;font-size:13px}
.provider-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.provider-card{display:block;overflow:hidden;border:0;background:transparent;border-radius:5px;text-align:center;transition:transform .2s ease,filter .2s ease}
.provider-image{aspect-ratio:311/180;height:auto;display:flex;align-items:center;justify-content:center;border:1px solid #82dc35;border-bottom:1px solid #6bc326;border-radius:5px 5px 0 0;background:linear-gradient(135deg,#242424 0%,#151515 55%,#0d0d0d 100%);color:#777;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(172,238,91,.08),0 0 0 1px rgba(45,105,16,.18)}
.provider-image::before{content:"IMAGE";opacity:.5}.provider-image:has(img)::before{content:none}.provider-image img{display:block;width:100%;height:100%;object-fit:cover}
.provider-label{min-height:32px;display:flex;align-items:center;justify-content:center;padding:6px 9px;border:1px solid transparent;border-radius:0 0 5px 5px;background:linear-gradient(180deg,#e2ff76 0%,#b8e938 50%,#8cc711 100%) padding-box,linear-gradient(90deg,#dfff83 0%,#a8df30 50%,#6fa900 100%) border-box;color:#173800;font-size:12px;font-weight:800;line-height:1.2;text-transform:uppercase;text-shadow:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.28)}
.provider-card:hover{transform:translateY(-2px);filter:brightness(1.06)}

/* SEO content column below provider images/cards */
.seo-content{margin-top:28px;padding-top:24px;border-top:1px solid #333;color:#fff;line-height:1.75;font-size:13px}
.seo-content h2{margin:0 0 14px;color:#fff;font-size:20px;line-height:1.35}
.seo-content h3{margin:22px 0 8px;color:#fff;font-size:16px;line-height:1.4}
.seo-content p{margin:0 0 14px;color:#fff;line-height:1.8}
.seo-placeholder{margin-top:18px;padding:18px 20px;border:1px dashed #454545;border-radius:4px;background:#141414}
.seo-placeholder h3{margin-top:0}

.site-footer{border-top:1px solid #303030;background:#090909;color:#aaa;text-align:center;font-size:12px;padding:18px 0}
.site-footer a{color:#dcdcdc}
@media (max-width:760px){
  .header-inner{min-height:62px}
  .brand img{width:235px}
  .header-actions{display:none}
  .main-nav{height:44px;position:relative}
  .nav-inner{align-items:center}
  .mobile-toggle{display:block}
  .nav-list{position:absolute;top:44px;right:0;width:min(280px,86vw);height:auto;display:none;flex-direction:column;background:#383838;box-shadow:0 12px 30px rgba(0,0,0,.45)}
  .nav-list.open{display:flex}
  .nav-list li{border-bottom:1px solid #4b4b4b}
  .nav-list a{height:42px;padding:0 16px;border-left:0;border-right:0}
  .nav-list a:hover,.nav-list a.active{background:linear-gradient(180deg,#e2ff76 0%,#b8e938 50%,#8cc711 100%);color:#173800}

  /* Mobile hero/slider must touch both screen edges. */
  .hero{padding:0;background:#0d0d0d}
  .hero>.container{width:100%;max-width:none;margin:0}
  .hero-grid{display:block;width:100%}
  .hero-main{width:100%;height:auto;aspect-ratio:703/350;border-left:0;border-right:0}
  .side-stack,.hero-bottom{display:none}

  .quick-inner{grid-template-columns:repeat(3,1fr)}
  .quick-copy{grid-column:1/-1;text-align:center;margin-bottom:2px}
  .quick-btn{height:36px;font-size:11px}

  /* Our Games stays exactly 2 columns on mobile. */
  .games-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .games-grid .game-card{height:auto;aspect-ratio:317/170}
  .provider-grid{grid-template-columns:1fr 1fr}
  .provider-label{min-height:30px;font-size:11px}
}
@media (max-width:460px){
  .brand img{width:205px}
  .games-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .games-grid .game-card{height:auto;aspect-ratio:317/170;border-radius:6px}
  .game-card span{width:100%;height:44px;padding:22px 8px 6px;font-size:10px}
  .provider-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .provider-label{font-size:10px;padding:6px 5px}
}


/* ===== v7 mobile header + animated mobile navigation ===== */
.mobile-register-btn{display:none}
.menu-icon{display:none}
.mobile-toggle span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease;margin:5px 0}
.mobile-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-toggle.is-active span:nth-child(2){opacity:0}
.mobile-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@keyframes mobileMenuIn{
  from{transform:translateX(110%);opacity:.35}
  to{transform:translateX(0);opacity:1}
}
@keyframes mobileMenuOut{
  from{transform:translateX(0);opacity:1}
  to{transform:translateX(-110%);opacity:.2}
}

@media (max-width:760px){
  /* Hide desktop header links/actions entirely on mobile. */
  .header-actions{display:none!important}
  .header-inner{min-height:62px;gap:10px}
  .brand{min-width:0;flex:1}
  .brand img{width:225px;max-width:100%;height:auto}
  .mobile-register-btn{display:inline-flex;flex:0 0 auto;min-width:84px;height:32px;padding:0 13px;font-size:11px;margin-left:auto}

  .main-nav{overflow:visible}
  .nav-inner{position:relative}
  .mobile-toggle{display:flex;width:44px;height:44px;padding:0;align-items:center;justify-content:center;flex-direction:column;position:relative;z-index:52}

  .nav-list{
    display:flex;
    position:absolute;
    top:44px;
    right:0;
    width:min(280px,86vw);
    height:auto;
    max-height:calc(100vh - 106px);
    overflow-y:auto;
    flex-direction:column;
    background:#383838;
    box-shadow:0 12px 30px rgba(0,0,0,.45);
    visibility:hidden;
    pointer-events:none;
    opacity:0;
    transform:translateX(110%);
    z-index:51;
    will-change:transform,opacity;
  }
  .nav-list.open{
    visibility:visible;
    pointer-events:auto;
    animation:mobileMenuIn .32s cubic-bezier(.22,.61,.36,1) both;
  }
  .nav-list.closing{
    visibility:visible;
    pointer-events:none;
    animation:mobileMenuOut .28s cubic-bezier(.55,.06,.68,.19) both;
  }
  .nav-list li{width:100%;border-bottom:1px solid #4b4b4b}
  .nav-list a{height:44px;width:100%;padding:0 16px;gap:12px;justify-content:flex-start;border-left:0;border-right:0}
  .nav-list a:hover,.nav-list a.active{background:linear-gradient(180deg,#e2ff76 0%,#b8e938 50%,#8cc711 100%);color:#173800}
  .menu-icon{display:block;width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .menu-icon circle,.menu-icon rect{vector-effect:non-scaling-stroke}
  .menu-label{display:inline-block;line-height:1}
}

@media (max-width:460px){
  .brand img{width:190px}
  .mobile-register-btn{min-width:78px;height:31px;padding:0 10px;font-size:10px}
}
@media (max-width:360px){
  .brand img{width:176px}
  .mobile-register-btn{min-width:74px;padding:0 9px}
}
@media (prefers-reduced-motion:reduce){
  .nav-list.open,.nav-list.closing{animation-duration:.01ms!important}
  .mobile-toggle span{transition:none}
}


/* ===== v8 WINPALACE88-style mobile header + full-width slide menu ===== */
@keyframes mobileMenuInV8{
  from{transform:translate3d(100%,0,0)}
  to{transform:translate3d(0,0,0)}
}
@keyframes mobileMenuOutV8{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-100%,0,0)}
}

@media (max-width:760px){
  .site-header{position:relative;z-index:60}
  .header-inner{
    min-height:62px;
    height:62px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .brand{flex:1 1 auto;min-width:0}
  .brand img{width:225px;max-width:100%;height:auto}
  .mobile-register-btn{
    display:inline-flex;
    flex:0 0 auto;
    min-width:78px;
    height:31px;
    padding:0 10px;
    margin-left:auto;
    font-size:10px;
  }
  .mobile-toggle{
    display:flex;
    flex:0 0 38px;
    width:38px;
    height:38px;
    margin:0;
    padding:0;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    background:transparent;
    border:0;
    color:#fff;
    position:relative;
    z-index:63;
  }
  .mobile-toggle span{width:23px;height:2px;margin:3px 0}
  .mobile-toggle.is-active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .mobile-toggle.is-active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  /* Desktop nav bar disappears on mobile; the menu itself slides over the page. */
  .main-nav{
    height:0;
    min-height:0;
    border:0;
    background:transparent;
    box-shadow:none;
    position:static;
    overflow:visible;
    z-index:auto;
  }
  .nav-inner{
    width:100%;
    height:0;
    max-width:none;
    margin:0;
    position:static;
  }
  .nav-list{
    display:flex;
    position:fixed;
    top:62px;
    left:0;
    right:auto;
    width:100%;
    max-width:none;
    height:auto;
    max-height:calc(100dvh - 62px);
    margin:0;
    padding:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    flex-direction:column;
    background:#383838;
    box-shadow:0 10px 24px rgba(0,0,0,.42);
    visibility:hidden;
    pointer-events:none;
    opacity:1;
    transform:translate3d(100%,0,0);
    z-index:59;
    will-change:transform;
  }
  .nav-list.open{
    visibility:visible;
    pointer-events:auto;
    animation:mobileMenuInV8 .34s cubic-bezier(.25,.46,.45,.94) both;
  }
  .nav-list.closing{
    visibility:visible;
    pointer-events:none;
    animation:mobileMenuOutV8 .30s cubic-bezier(.55,.055,.675,.19) both;
  }
  .nav-list li{width:100%;border-bottom:1px solid #4a4a4a}
  .nav-list a{
    width:100%;
    height:45px;
    padding:0 18px;
    gap:13px;
    justify-content:flex-start;
    border:0;
    font-size:12px;
    color:#fff;
    background:#383838;
    text-shadow:none;
  }
  .nav-list a:hover,.nav-list a.active{
    background:#383838;
    color:#fff;
    box-shadow:none;
  }
  .nav-list a.active{font-weight:800}
  .menu-icon{width:19px;height:19px;flex-basis:19px;color:#ddd}
  body.mobile-menu-open{overflow:hidden}
}

@media (max-width:460px){
  .header-inner{gap:6px}
  .brand img{width:188px}
  .mobile-register-btn{min-width:72px;height:30px;padding:0 9px;font-size:10px}
  .mobile-toggle{flex-basis:36px;width:36px;height:36px}
}
@media (max-width:360px){
  .brand img{width:168px}
  .mobile-register-btn{min-width:68px;padding:0 7px;font-size:9px}
  .mobile-toggle{flex-basis:34px;width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  .nav-list.open,.nav-list.closing{animation-duration:.01ms!important}
}

/* ===== v9 mobile crown logo + header link styling + revised slide direction ===== */
.mobile-logo{display:none}
.header-links{color:#fff;font-weight:700}
.header-links a,.header-links span,.header-links span:nth-of-type(2){color:#fff;font-weight:700}

@keyframes mobileMenuOpenV9{
  from{transform:translate3d(-100%,0,0)}
  to{transform:translate3d(0,0,0)}
}
@keyframes mobileMenuCloseV9{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-100%,0,0)}
}

@media (max-width:760px){
  .desktop-logo{display:none!important}
  .mobile-logo{display:block!important;width:188px!important;height:auto!important;object-fit:contain}
  .brand{flex:0 0 auto;display:flex;align-items:center}
  .header-inner{gap:8px}
  .mobile-register-btn{margin-left:auto}

  /* Open animation moves to the right; close animation exits to the left. */
  .nav-list{transform:translate3d(-100%,0,0)}
  .nav-list.open{animation:mobileMenuOpenV9 .34s cubic-bezier(.25,.46,.45,.94) both}
  .nav-list.closing{animation:mobileMenuCloseV9 .30s cubic-bezier(.55,.055,.675,.19) both}
}

@media (max-width:460px){
  .mobile-logo{width:176px!important;height:auto!important}
}
@media (max-width:360px){
  .mobile-logo{width:160px!important;height:auto!important}
}
@media (prefers-reduced-motion:reduce){
  .nav-list.open,.nav-list.closing{animation-duration:.01ms!important}
}


/* ===== v11 promo page: WINPALACE88-style cards + popup ===== */
.promo-page{min-height:520px}
.promo-section{padding:24px 0 38px}
.promo-page-title{margin:0 0 8px;text-align:center;font-size:20px;line-height:1.3;font-weight:800;letter-spacing:.04em;color:#fff}.promo-page-intro{max-width:820px;margin:0 auto 18px;text-align:center;color:#fff;font-size:12px;line-height:1.7}
.promo-list{display:flex;flex-direction:column;gap:12px}
.promo-card{display:flex;width:100%;min-height:0;border-radius:10px;overflow:hidden;background:#171717;border:1px solid #353535;box-shadow:0 3px 10px rgba(0,0,0,.28)}
.promo-image-trigger{display:block;flex:1 1 auto;min-width:0;margin:0;padding:0;border:0;background:#111;cursor:pointer;overflow:hidden;text-align:initial}
.promo-image-trigger img{display:block;width:100%;height:auto;aspect-ratio:5/2;object-fit:contain;transition:filter .22s ease,transform .32s ease}
.promo-image-trigger:hover img{filter:brightness(1.04);transform:scale(1.003)}
.promo-image-trigger:focus-visible,.promo-more-info:focus-visible,.promo-modal-close:focus-visible{outline:2px solid #d4f85a;outline-offset:-2px}
.promo-more-info{flex:0 0 46px;width:46px;margin:0;padding:10px 0;border:0;border-left:1px solid rgba(255,255,255,.12);background:linear-gradient(to bottom,rgba(18,158,160,1) 0%,rgba(17,86,98,1) 48%,rgba(18,158,160,1) 99%);color:#fff;font-family:"Montserrat",Arial,sans-serif;font-size:11px;font-weight:800;letter-spacing:.05em;cursor:pointer;writing-mode:sideways-lr;text-orientation:mixed;text-shadow:0 1px 1px rgba(0,0,0,.65);transition:filter .2s ease}
.promo-more-info:hover{filter:brightness(1.12)}

/* Popup overlay + dialog */
.promo-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;visibility:hidden;pointer-events:none}
.promo-modal.is-opening,.promo-modal.is-open,.promo-modal.is-closing{visibility:visible}
.promo-modal.is-opening,.promo-modal.is-open{pointer-events:auto}
.promo-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.74);opacity:0;backdrop-filter:blur(2px)}
.promo-modal-dialog{position:relative;z-index:1;width:min(760px,100%);max-height:min(82vh,760px);display:flex;flex-direction:column;overflow:hidden;border-radius:8px;border:1px solid #3c3c3c;background:#121212;box-shadow:0 20px 70px rgba(0,0,0,.58);opacity:0;transform:translateY(18px) scale(.965)}
.promo-modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:11px 14px 11px 18px;background:linear-gradient(180deg,#5fb70b 0%,#3c9200 52%,#276800 100%);border-bottom:1px solid #173f00}
.promo-modal-header h2{margin:0;font-size:16px;line-height:1.35;font-weight:800;color:#fff;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.55)}
.promo-modal-close{flex:0 0 34px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;border-radius:3px;background:rgba(0,0,0,.22);color:#fff;font-size:27px;font-weight:400;line-height:1;cursor:pointer}
.promo-modal-close:hover{background:rgba(0,0,0,.35)}
.promo-modal-body{overflow-y:auto;padding:20px 22px 22px;background:linear-gradient(180deg,#171717,#111);color:#d5d5d5;font-size:13px;line-height:1.72}
.promo-modal-body p{margin:0 0 14px;color:#d5d5d5}
.promo-modal-body ol,.promo-modal-body ul{margin:8px 0 0;padding-left:21px}
.promo-modal-body li{margin:0 0 8px}
.promo-modal-lead{font-weight:500}
body.promo-modal-open{overflow:hidden}

@keyframes promoBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes promoBackdropOut{from{opacity:1}to{opacity:0}}
@keyframes promoDialogIn{from{opacity:0;transform:translateY(18px) scale(.965)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes promoDialogOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(14px) scale(.975)}}
.promo-modal.is-opening .promo-modal-backdrop,.promo-modal.is-open .promo-modal-backdrop{animation:promoBackdropIn .24s ease both}
.promo-modal.is-opening .promo-modal-dialog,.promo-modal.is-open .promo-modal-dialog{animation:promoDialogIn .30s cubic-bezier(.22,.61,.36,1) both}
.promo-modal.is-closing .promo-modal-backdrop{animation:promoBackdropOut .22s ease both}
.promo-modal.is-closing .promo-modal-dialog{animation:promoDialogOut .24s cubic-bezier(.55,.055,.675,.19) both}

@media (max-width:760px){
  .promo-section{padding:14px 0 26px}
  .promo-section>.container{width:min(100% - 20px,980px)}
  .promo-page-title{font-size:17px;margin-bottom:6px}.promo-page-intro{font-size:11px;margin-bottom:12px;padding:0 4px}
  .promo-list{gap:10px}
  .promo-card{display:block;border-radius:10px}
  .promo-image-trigger{width:100%;border-radius:10px}
  .promo-image-trigger img{width:100%;aspect-ratio:5/2;border-radius:10px;object-fit:contain}
  .promo-more-info{display:none!important}
  .promo-modal{padding:14px}
  .promo-modal-dialog{width:100%;max-height:84vh;border-radius:7px}
  .promo-modal-header{min-height:48px;padding:9px 10px 9px 14px}
  .promo-modal-header h2{font-size:14px}
  .promo-modal-body{padding:16px 16px 18px;font-size:12px;line-height:1.68}
}
@media (max-width:460px){
  .promo-card{border-radius:9px}
  .promo-image-trigger img{border-radius:9px}
  .promo-modal{padding:10px}
}
@media (prefers-reduced-motion:reduce){
  .promo-image-trigger img{transition:none}
  .promo-modal.is-opening .promo-modal-backdrop,.promo-modal.is-open .promo-modal-backdrop,.promo-modal.is-closing .promo-modal-backdrop,
  .promo-modal.is-opening .promo-modal-dialog,.promo-modal.is-open .promo-modal-dialog,.promo-modal.is-closing .promo-modal-dialog{animation-duration:.01ms!important}
}



/* ===== v15 homepage content + payment methods ===== */
.home-info-section{
  padding:0 0 34px;
}
.home-content-box{
  color:#fff;
  font-size:13px;
  line-height:1.8;
}
.home-content-box h1,
.home-content-box h2,
.home-content-box h3{
  color:#f1f1f1;
  line-height:1.4;
}
.home-content-box h1{
  margin:0 0 14px;
  font-size:22px;
}
.home-content-box h2{
  margin:22px 0 10px;
  font-size:18px;
}
.home-content-box p{
  margin:0 0 14px;
  color:#fff;
}
.home-content-box .marg0{margin:0 0 18px;padding-left:20px;color:#fff}
.home-content-box .marg0 li{margin:0 0 7px;line-height:1.7}
.home-content-box a{color:#9bdc4b;font-weight:600}
.home-content-box a:hover{text-decoration:underline}

.payment-section{
  padding:0 0 38px;
}
.payment-box{
  width:100%;
  max-width:840px;
  margin:0 auto;
  padding:22px;
}
.payment-title{
  margin:0 0 18px;
  text-align:center;
  font-size:18px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.payment-grid{display:grid;grid-template-columns:repeat(6,129px);justify-content:center;gap:5px}
.payment-item{min-height:auto;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;border-radius:0;color:inherit;font-size:0;font-weight:400;text-align:center;letter-spacing:0}
.payment-item img{display:block;width:100%;height:auto;max-width:129px;object-fit:contain}
.payment-grid .item-telkomsel{grid-column:2}
.payment-grid .item-xl-axiata{grid-column:3}
.payment-grid .item-dana{grid-column:4}
.payment-grid .item-linkaja{grid-column:5}
.payment-note{
  margin:12px 0 0;
  text-align:center;
  color:#8f8f8f;
  font-size:10px;
}

@media (max-width:760px){
  .home-info-section{padding-bottom:24px}
  .home-content-box h1{font-size:18px}
  .payment-section{padding-bottom:28px}
  .payment-box{max-width:none;padding:18px 12px}
  .payment-grid{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch;gap:8px}
  .payment-grid .payment-item{grid-column:auto!important}
  .payment-item img{max-width:129px}
}

@media (max-width:380px){
  .payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== v25 terms content ===== */
.terms-content>p>strong{display:block;margin-top:22px;color:#f1f1f1;font-size:16px;line-height:1.4}
.terms-content>p:first-of-type>strong{margin-top:0}
.terms-content ol{margin:10px 0 22px;padding-left:22px;color:#fff}
.terms-content li{margin:0 0 10px;padding-left:4px;line-height:1.75;font-size:13px}
@media (max-width:760px){.terms-content ol{padding-left:20px}.terms-content li{font-size:12px;line-height:1.7}.terms-content>p>strong{font-size:15px}}

main{
  background:linear-gradient(116deg,
    #181818 0%,
    #181818 29%,
    rgba(95,183,11,.16) 29%,
    rgba(95,183,11,.16) 31%,
    #111111 31%,
    #0B0B0B 100%
  );
}

.home-content-placeholder{color:#fff}
.home-content-placeholder p,.home-content-placeholder li{color:#fff}