/* Home page refinement — preserves the original Jokerslot Z visual identity. */
body[data-page="index.html"]{
  --home-panel:linear-gradient(180deg,rgba(28,12,44,.90),rgba(8,3,16,.96));
  --home-line:rgba(205,113,255,.24);
  --home-gold-line:rgba(255,211,90,.28);
}
body[data-page="index.html"] .section{
  padding:78px 0;
}
body[data-page="index.html"] .section + .section{
  border-top-color:rgba(186,55,255,.08);
}
body[data-page="index.html"] .section-head{
  max-width:820px;
  margin-bottom:30px;
}
body[data-page="index.html"] .section-head h2,
body[data-page="index.html"] .smart-panel h2{
  font-size:clamp(30px,3.35vw,44px);
  line-height:1.18;
  letter-spacing:-.035em;
}
body[data-page="index.html"] .section-head p,
body[data-page="index.html"] .smart-panel p{
  font-size:16px;
  line-height:1.75;
}

/* Header */
body[data-page="index.html"] .site-header{
  background:rgba(5,2,10,.90);
  border-bottom-color:rgba(205,113,255,.22);
}
body[data-page="index.html"] .nav-wrap{height:64px}
body[data-page="index.html"] .main-nav a{font-size:13px;padding:9px 12px}

/* Hero: keep the original artwork, improve text scale and visual balance. */
body[data-page="index.html"] .hero{
  min-height:650px;
  padding:88px 0 78px;
  background-position:center top;
}
body[data-page="index.html"] .hero-grid{
  min-height:475px;
  grid-template-columns:minmax(0,650px);
}
body[data-page="index.html"] .hero-copy{
  max-width:650px;
  padding:22px 0 26px;
}
body[data-page="index.html"] .hero h1{
  max-width:640px;
  margin-bottom:16px;
  font-size:clamp(42px,4.6vw,62px);
  line-height:1.04;
  letter-spacing:-.045em;
}
body[data-page="index.html"] .hero-text{
  max-width:620px;
  margin-bottom:20px;
  color:#efe6f6;
  font-size:15.5px;
  line-height:1.72;
}
body[data-page="index.html"] .hero-proof{
  max-width:640px;
  gap:9px;
}
body[data-page="index.html"] .hero-proof article{
  min-height:86px;
  padding:13px 14px;
  border-color:rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(28,11,45,.72),rgba(8,3,16,.58));
}
body[data-page="index.html"] .trust-row{gap:8px}
body[data-page="index.html"] .trust-row span{padding:7px 10px}

/* Compact feature strip */
body[data-page="index.html"] .quick-features{margin-top:-44px}
body[data-page="index.html"] .feature-strip{gap:14px}
body[data-page="index.html"] .feature-strip article{
  padding:12px 12px 16px;
  gap:9px;
  border-radius:20px;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
body[data-page="index.html"] .feature-strip article:hover{
  transform:translateY(-4px);
  border-color:rgba(255,211,90,.44);
  box-shadow:0 22px 54px rgba(0,0,0,.34),0 0 26px rgba(186,55,255,.12);
}
body[data-page="index.html"] .feature-thumb{
  aspect-ratio:16/7;
  border-radius:14px;
}
body[data-page="index.html"] .feature-strip h3{
  margin:2px 2px 0;
  font-size:16px;
}
body[data-page="index.html"] .feature-strip p{
  margin:0 2px;
  font-size:12.5px;
  line-height:1.55;
}

/* Games: one clean visual banner followed by a balanced four-card row. */
body[data-page="index.html"] #games-preview{
  background:radial-gradient(circle at 50% 8%,rgba(186,55,255,.08),transparent 34%);
}
body[data-page="index.html"] #games-preview .section-art-wide{
  max-width:none;
  margin-bottom:18px;
}
body[data-page="index.html"] #games-preview .section-art-wide img{
  aspect-ratio:21/7.6;
  object-position:center 48%;
}
body[data-page="index.html"] .seo-game-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:0;
}
body[data-page="index.html"] .game-card{
  padding:12px 12px 18px;
  border-radius:20px;
}
body[data-page="index.html"] .game-card::before{width:3px}
body[data-page="index.html"] .game-thumb{
  aspect-ratio:16/10;
  border-radius:15px;
}
body[data-page="index.html"] .game-card h3{
  margin:13px 2px 6px;
  font-size:19px;
}
body[data-page="index.html"] .game-card p{
  margin-inline:2px;
  font-size:13px;
  line-height:1.62;
}
body[data-page="index.html"] #games-preview .center-actions{margin-top:24px}

/* Promotion: heading and key artwork share one row, cards remain easy to scan. */
body[data-page="index.html"] .promo-section{padding-top:64px}
body[data-page="index.html"] .promo-panel{
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);
  gap:24px 28px;
  align-items:center;
  padding:30px;
}
body[data-page="index.html"] .promo-panel .section-head-compact{
  max-width:520px;
  margin:0;
  text-align:left;
}
body[data-page="index.html"] .promo-panel .section-art-promo{
  margin:0;
}
body[data-page="index.html"] .promo-panel .section-art-promo img{
  aspect-ratio:16/9;
  object-position:center;
}
body[data-page="index.html"] .promo-panel .promo-grid,
body[data-page="index.html"] .promo-panel .center-actions{
  grid-column:1/-1;
}
body[data-page="index.html"] .promo-grid{gap:14px}
body[data-page="index.html"] .promo-card{
  padding:12px 12px 18px;
  border-radius:20px;
}
body[data-page="index.html"] .promo-thumb{
  margin-bottom:0;
  aspect-ratio:16/8.6;
  border-radius:15px;
}
body[data-page="index.html"] .promo-card h3{
  margin:13px 2px 6px;
  font-size:19px;
}
body[data-page="index.html"] .promo-card p{
  margin-inline:2px;
  font-size:13px;
  line-height:1.62;
}
body[data-page="index.html"] .promo-panel .center-actions{margin-top:0}

/* Why: compact supporting cards let the key artwork breathe. */
body[data-page="index.html"] #why{
  background:linear-gradient(180deg,rgba(8,3,16,.18),rgba(186,55,255,.035),rgba(8,3,16,.18));
}
body[data-page="index.html"] .why-grid{
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:42px;
  align-items:center;
}
body[data-page="index.html"] .why-cards{gap:14px}
body[data-page="index.html"] .why-cards .section-art-stack{margin-bottom:2px}
body[data-page="index.html"] .why-cards .section-art-stack img{
  aspect-ratio:16/6.4;
  object-position:center 50%;
}
body[data-page="index.html"] .why-cards article{
  display:grid;
  grid-template-columns:104px 1fr;
  grid-template-rows:auto 1fr;
  gap:4px 14px;
  align-items:center;
  padding:12px;
  min-height:128px;
  border-radius:20px;
}
body[data-page="index.html"] .why-thumb{
  grid-row:1/3;
  width:104px;
  height:92px;
  margin:0;
  aspect-ratio:auto;
  border-radius:15px;
}
body[data-page="index.html"] .why-cards h3{
  align-self:end;
  margin:0;
  font-size:18px;
}
body[data-page="index.html"] .why-cards p{
  align-self:start;
  font-size:12.5px;
  line-height:1.55;
}

/* Registration steps */
body[data-page="index.html"] .steps-section{
  background:linear-gradient(180deg,rgba(186,55,255,.05),rgba(5,2,10,.08));
}
body[data-page="index.html"] .steps-section .section-art-wide{
  max-width:none;
  margin-bottom:18px;
}
body[data-page="index.html"] .steps-section .section-art-wide img{
  aspect-ratio:21/7.4;
  object-position:center;
}
body[data-page="index.html"] .steps{gap:14px;margin-top:0}
body[data-page="index.html"] .step-card{
  padding:12px 12px 20px;
  border-radius:20px;
}
body[data-page="index.html"] .step-thumb{
  margin-bottom:14px;
  aspect-ratio:16/9;
  border-radius:15px;
}
body[data-page="index.html"] .step-number{
  width:44px;
  height:44px;
  margin:0 0 12px;
  border-radius:14px;
  font-size:21px;
}
body[data-page="index.html"] .step-card h3{font-size:20px}
body[data-page="index.html"] .step-card p{font-size:13px;line-height:1.62}
body[data-page="index.html"] .note-box{
  max-width:980px;
  margin-top:18px;
  padding:16px 22px;
  font-size:14px;
}

/* Mobile-first section */
body[data-page="index.html"] .mobile-section{
  background:radial-gradient(circle at 75% 50%,rgba(186,55,255,.10),transparent 28%);
}
body[data-page="index.html"] .mobile-grid{
  grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);
  gap:48px;
}
body[data-page="index.html"] .section-art-mobile{
  max-height:470px;
}
body[data-page="index.html"] .section-art-mobile img{
  min-height:0;
  height:470px;
  aspect-ratio:auto;
  object-position:center 47%;
}
body[data-page="index.html"] .mobile-tags{gap:8px;margin-top:18px}
body[data-page="index.html"] .mobile-tags span{
  padding:8px 12px;
  font-size:13px;
}

/* Responsible play */
body[data-page="index.html"] .play-smart{padding-top:54px;padding-bottom:54px}
body[data-page="index.html"] .smart-panel{
  grid-template-columns:minmax(0,1fr) minmax(280px,390px);
  padding:26px 28px;
  border-radius:26px;
}
body[data-page="index.html"] .section-art-smart{
  width:100%;
}
body[data-page="index.html"] .section-art-smart img{
  min-height:190px;
  aspect-ratio:16/8.5;
  object-position:center;
}

/* Long-form guide and FAQ: improve reading width and hierarchy. */
body[data-page="index.html"] .seo-article-section{
  background:linear-gradient(180deg,rgba(8,3,16,.08),rgba(186,55,255,.04));
}
body[data-page="index.html"] .seo-article{
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:20px;
}
body[data-page="index.html"] .seo-article-main{
  padding:30px 32px;
}
body[data-page="index.html"] .seo-article-main h2{
  font-size:clamp(29px,3.2vw,42px);
  letter-spacing:-.035em;
}
body[data-page="index.html"] .seo-article-main h3{
  margin-top:24px;
  font-size:21px;
}
body[data-page="index.html"] .seo-article-main p{
  max-width:76ch;
  font-size:14.5px;
  line-height:1.78;
}
body[data-page="index.html"] .seo-article-aside{
  top:82px;
  padding:18px;
}
body[data-page="index.html"] .section-art-guide{margin-bottom:16px}
body[data-page="index.html"] .section-art-guide img{
  aspect-ratio:16/9;
  object-position:center;
}
body[data-page="index.html"] .seo-article-aside h3{font-size:20px}
body[data-page="index.html"] .seo-article-aside li{font-size:13.5px;line-height:1.55}

body[data-page="index.html"] .faq-grid{
  grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr);
  gap:28px;
}
body[data-page="index.html"] .section-art-faq{margin:16px 0}
body[data-page="index.html"] .section-art-faq img{
  aspect-ratio:16/8;
  object-position:center;
}
body[data-page="index.html"] .faq-intro-card{
  padding:20px;
  border-radius:20px;
}
body[data-page="index.html"] .faq-intro-card h3{font-size:21px}
body[data-page="index.html"] .faq-intro-card li{font-size:13.5px}
body[data-page="index.html"] .faq-list{gap:10px}
body[data-page="index.html"] .faq-list details{border-radius:18px}
body[data-page="index.html"] .faq-list summary{padding:17px 54px 17px 20px;font-size:15px}
body[data-page="index.html"] .faq-list details p{font-size:14px;line-height:1.7}

/* Tablet */
@media (max-width:1100px){
  body[data-page="index.html"] .seo-game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-page="index.html"] .promo-panel{grid-template-columns:1fr 1.1fr}
  body[data-page="index.html"] .why-grid{grid-template-columns:1fr}
  body[data-page="index.html"] .why-grid .section-head{max-width:820px;text-align:center;margin-inline:auto}
  body[data-page="index.html"] .mobile-grid{grid-template-columns:1fr 1fr}
  body[data-page="index.html"] .seo-article{grid-template-columns:1fr .55fr}
}

@media (max-width:980px){
  body[data-page="index.html"] .hero{
    min-height:auto;
    padding:350px 0 60px;
    background-size:auto 430px;
    background-position:68% top;
  }
  body[data-page="index.html"] .hero-grid{min-height:0}
  body[data-page="index.html"] .hero-copy{max-width:720px;margin-inline:auto;padding:0}
  body[data-page="index.html"] .hero-copy::before{display:none}
  body[data-page="index.html"] .hero h1,
  body[data-page="index.html"] .hero-text{margin-inline:auto}
  body[data-page="index.html"] .hero-proof{margin-inline:auto}
  body[data-page="index.html"] .promo-panel{grid-template-columns:1fr}
  body[data-page="index.html"] .promo-panel .section-head-compact{max-width:760px;text-align:center;margin-inline:auto}
  body[data-page="index.html"] .promo-panel .section-art-promo,
  body[data-page="index.html"] .promo-panel .promo-grid,
  body[data-page="index.html"] .promo-panel .center-actions{grid-column:1}
  body[data-page="index.html"] .mobile-grid,
  body[data-page="index.html"] .seo-article,
  body[data-page="index.html"] .faq-grid{grid-template-columns:1fr}
  body[data-page="index.html"] .mobile-grid .section-head,
  body[data-page="index.html"] .faq-grid .section-head{text-align:center;margin-inline:auto}
  body[data-page="index.html"] .section-art-mobile{max-width:760px;margin-inline:auto;width:100%}
  body[data-page="index.html"] .seo-article-aside{position:relative;top:auto}
  body[data-page="index.html"] .faq-side{max-width:760px;margin-inline:auto}
}

/* Mobile */
@media (max-width:700px){
  body[data-page="index.html"] .section{padding:56px 0}
  body[data-page="index.html"] .section-head{margin-bottom:22px}
  body[data-page="index.html"] .section-head h2,
  body[data-page="index.html"] .smart-panel h2{font-size:29px;letter-spacing:-.025em}
  body[data-page="index.html"] .section-head p,
  body[data-page="index.html"] .smart-panel p{font-size:14px;line-height:1.68}
  body[data-page="index.html"] .hero{
    padding:292px 0 46px;
    background-size:auto 350px;
    background-position:66% top;
  }
  body[data-page="index.html"] .hero::before{
    background:linear-gradient(180deg,rgba(5,2,10,.05) 0%,rgba(5,2,10,.14) 32%,rgba(5,2,10,.98) 54%,rgba(5,2,10,1) 100%);
  }
  body[data-page="index.html"] .hero h1{font-size:32px;line-height:1.08;letter-spacing:-.03em}
  body[data-page="index.html"] .hero-text{font-size:14px;line-height:1.68}
  body[data-page="index.html"] .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  body[data-page="index.html"] .hero-actions .btn{width:100%;min-height:44px;padding:9px 10px;font-size:13px}
  body[data-page="index.html"] .hero-proof{grid-template-columns:1fr;gap:8px}
  body[data-page="index.html"] .hero-proof article{min-height:0;padding:11px 13px;text-align:left}
  body[data-page="index.html"] .trust-row{display:grid;grid-template-columns:1fr 1fr;width:100%}
  body[data-page="index.html"] .trust-row span{width:auto;text-align:center;font-size:11px}
  body[data-page="index.html"] .quick-features{margin-top:-24px}
  body[data-page="index.html"] .feature-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body[data-page="index.html"] .feature-strip article{text-align:left;padding:9px 9px 13px;border-radius:16px}
  body[data-page="index.html"] .feature-strip h3{font-size:14px;line-height:1.3}
  body[data-page="index.html"] .feature-strip p{font-size:11.5px;line-height:1.5}
  body[data-page="index.html"] .feature-thumb{aspect-ratio:16/8;border-radius:11px}
  body[data-page="index.html"] #games-preview .section-art-wide img,
  body[data-page="index.html"] .steps-section .section-art-wide img{aspect-ratio:16/8.5}
  body[data-page="index.html"] .seo-game-grid{grid-template-columns:1fr;gap:10px}
  body[data-page="index.html"] .game-card{
    grid-template-columns:42% 1fr;
    gap:12px;
    align-items:center;
    padding:10px;
    text-align:left;
  }
  body[data-page="index.html"] .game-thumb{height:100%;min-height:128px;aspect-ratio:auto}
  body[data-page="index.html"] .game-card h3{margin:0 0 5px;font-size:17px}
  body[data-page="index.html"] .game-card p{margin:0;font-size:12px;line-height:1.5}
  body[data-page="index.html"] .promo-panel{padding:17px;border-radius:22px;gap:18px}
  body[data-page="index.html"] .promo-panel .section-art-promo img{aspect-ratio:16/9}
  body[data-page="index.html"] .promo-grid{grid-template-columns:1fr;gap:10px}
  body[data-page="index.html"] .promo-card{
    display:grid;
    grid-template-columns:40% 1fr;
    grid-template-rows:auto 1fr;
    gap:4px 12px;
    align-items:center;
    padding:10px;
  }
  body[data-page="index.html"] .promo-thumb{grid-row:1/3;height:100%;min-height:124px;aspect-ratio:auto;margin:0}
  body[data-page="index.html"] .promo-card h3{align-self:end;margin:0;font-size:17px}
  body[data-page="index.html"] .promo-card p{align-self:start;margin:0;font-size:12px;line-height:1.5}
  body[data-page="index.html"] .why-cards{grid-template-columns:1fr;gap:10px}
  body[data-page="index.html"] .why-cards .section-art-stack img{aspect-ratio:16/8.5}
  body[data-page="index.html"] .why-cards article{grid-template-columns:104px 1fr;min-height:116px;padding:10px}
  body[data-page="index.html"] .why-thumb{width:104px;height:92px}
  body[data-page="index.html"] .steps{grid-template-columns:1fr;gap:10px}
  body[data-page="index.html"] .step-card{
    display:grid;
    grid-template-columns:40% 44px 1fr;
    grid-template-rows:auto 1fr;
    gap:4px 10px;
    align-items:center;
    padding:10px;
  }
  body[data-page="index.html"] .step-thumb{grid-row:1/3;width:100%;height:132px;aspect-ratio:auto;margin:0}
  body[data-page="index.html"] .step-number{grid-column:2;width:38px;height:38px;margin:0;font-size:18px}
  body[data-page="index.html"] .step-card h3{grid-column:3;align-self:end;margin:0;font-size:17px}
  body[data-page="index.html"] .step-card p{grid-column:2/4;align-self:start;margin:0;font-size:12px;line-height:1.5}
  body[data-page="index.html"] .section-art-mobile img{height:auto;aspect-ratio:16/10}
  body[data-page="index.html"] .mobile-tags{justify-content:center}
  body[data-page="index.html"] .smart-panel{grid-template-columns:1fr;padding:18px;border-radius:22px;text-align:center}
  body[data-page="index.html"] .section-art-smart{max-width:none}
  body[data-page="index.html"] .section-art-smart img{aspect-ratio:16/8;min-height:0}
  body[data-page="index.html"] .seo-article-main,
  body[data-page="index.html"] .seo-article-aside,
  body[data-page="index.html"] .faq-intro-card{padding:18px;border-radius:19px}
  body[data-page="index.html"] .seo-article-main h2{font-size:28px}
  body[data-page="index.html"] .seo-article-main h3{font-size:19px}
  body[data-page="index.html"] .seo-article-main p{font-size:13.5px;line-height:1.72}
  body[data-page="index.html"] .section-art-faq img{aspect-ratio:16/9}
}

@media (max-width:430px){
  body[data-page="index.html"] .nav-wrap{height:60px}
  body[data-page="index.html"] .brand-mark{width:38px;height:38px}
  body[data-page="index.html"] .brand-text{font-size:18px}
  body[data-page="index.html"] .hero{padding-top:270px;background-size:auto 326px}
  body[data-page="index.html"] .feature-strip{gap:8px}
  body[data-page="index.html"] .feature-strip article{padding:8px 8px 12px}
  body[data-page="index.html"] .game-card{grid-template-columns:40% 1fr}
  body[data-page="index.html"] .promo-card{grid-template-columns:38% 1fr}
  body[data-page="index.html"] .step-card{grid-template-columns:38% 40px 1fr}
}

/* Fit artwork neatly inside the existing frames on the homepage. */
body[data-page="index.html"] .section-art,
body[data-page="index.html"] .game-card,
body[data-page="index.html"] .promo-card,
body[data-page="index.html"] .step-card,
body[data-page="index.html"] .why-cards article,
body[data-page="index.html"] .feature-strip article{
  overflow:hidden;
}

body[data-page="index.html"] .section-art img,
body[data-page="index.html"] .feature-thumb,
body[data-page="index.html"] .card-thumb{
  width:100%;
  max-width:100%;
  height:auto;
  max-height:100%;
}

body[data-page="index.html"] .section-art-mobile img,
body[data-page="index.html"] .section-art-smart img{
  min-height:0;
  height:auto;
}

/* Promotion artwork: keep the full generated image inside each rounded frame. */
body[data-page="index.html"] .promo-thumb{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:contain;
  object-position:center;
  background:#0c0318;
}

@media (max-width:700px){
  body[data-page="index.html"] .promo-card{
    align-items:start;
  }
  body[data-page="index.html"] .promo-thumb{
    grid-row:auto;
    min-height:0;
    height:auto;
    aspect-ratio:16/9;
    object-fit:contain;
  }
}

/* Why section: move all four feature cards into one row beneath the heading and main artwork. */
body[data-page="index.html"] .why-grid{
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:28px 42px;
  align-items:center;
}
body[data-page="index.html"] .why-main-art{
  grid-column:2;
  grid-row:1;
  width:100%;
  margin:0;
}
body[data-page="index.html"] .why-main-art img{
  width:100%;
  aspect-ratio:16/7.2;
  object-fit:cover;
  object-position:center;
}
body[data-page="index.html"] .why-cards{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
body[data-page="index.html"] .why-cards article{
  grid-template-columns:88px minmax(0,1fr);
  grid-template-rows:auto 1fr;
  min-height:116px;
  padding:11px;
  gap:4px 12px;
}
body[data-page="index.html"] .why-thumb{
  width:88px;
  height:82px;
}
body[data-page="index.html"] .why-cards h3{
  font-size:17px;
}
body[data-page="index.html"] .why-cards p{
  font-size:12px;
  line-height:1.5;
}

@media (max-width:1100px){
  body[data-page="index.html"] .why-grid{
    grid-template-columns:1fr;
    gap:22px;
  }
  body[data-page="index.html"] .why-grid .section-head{
    grid-column:1;
    grid-row:auto;
  }
  body[data-page="index.html"] .why-main-art{
    grid-column:1;
    grid-row:auto;
  }
  body[data-page="index.html"] .why-cards{
    grid-column:1;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:700px){
  body[data-page="index.html"] .why-cards{
    grid-template-columns:1fr;
  }
  body[data-page="index.html"] .why-cards article{
    grid-template-columns:104px minmax(0,1fr);
    min-height:116px;
    padding:10px;
  }
  body[data-page="index.html"] .why-thumb{
    width:104px;
    height:92px;
  }
  body[data-page="index.html"] .why-main-art img{
    aspect-ratio:16/8.5;
  }
}