/*
Theme Name: Nasa4d Info
Theme URI: https://nasa4d.games/
Author: Nasa4d Team
Description: Tema statis bergaya WordPress untuk portal informasi hiburan Nasa4d (18+). Slot, Live Casino, Poker, Sportsbook, Promosi, dan panduan bermain bertanggung jawab.
Version: 1.0.0
Text Domain: nasa4d
Tags: blog, news, two-columns, responsive, casino
*/

/* ===== 1. Reset & Base ===== */
:root{
  --nd-red:#d8232f;
  --nd-red-dark:#a5121f;
  --nd-red-deep:#7c0e18;
  --nd-gold:#f7b933;
  --nd-gold-light:#ffd873;
  --nd-green:#1fa35b;
  --nd-green-dark:#12703e;
  --nd-blue:#1d63e9;
  --nd-blue-dark:#123f9a;
  --nd-dark:#0d0f17;
  --nd-dark2:#12162a;
  --nd-card:#1a2038;
  --nd-card2:#212847;
  --nd-line:rgba(255,255,255,.09);
  --nd-line-d:rgba(13,15,23,.12);
  --nd-ink:#252b3d;
  --nd-ink-soft:#5b6377;
  --nd-light:#f6f7fb;
  --nd-light2:#eef1f8;
  --nd-white:#ffffff;
  --nd-text-d:#e9edf7;
  --nd-text-d-soft:#aab3c9;
  --nd-radius:16px;
  --nd-radius-sm:10px;
  --nd-shadow:0 10px 30px rgba(13,15,23,.12);
  --nd-shadow-lg:0 24px 60px rgba(13,15,23,.28);
  --nd-font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--nd-font);
  font-size:16px;
  line-height:1.7;
  color:var(--nd-ink);
  background:var(--nd-light);
  overflow-x:clip;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--nd-red);text-decoration:none}
a:hover{color:var(--nd-red-dark)}
p{margin:0 0 1em}
h1,h2,h3,h4,h5,h6{line-height:1.25;margin:0 0 .55em;font-weight:700;color:inherit;overflow-wrap:break-word}
ul,ol{margin:0 0 1em;padding-left:1.3em}
li{margin-bottom:.4em}
button{font-family:inherit}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--nd-gold);outline-offset:2px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;z-index:999;background:var(--nd-gold);color:#000;padding:8px 14px;border-radius:8px}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}
.narrow{max-width:860px;margin:0 auto;padding:0 22px}
section{position:relative}

/* ===== 2. Buttons / Badges / Titles ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:999px;border:0;cursor:pointer;
  font-weight:700;font-size:15px;line-height:1;letter-spacing:.2px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  text-align:center;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--red{background:linear-gradient(180deg,#e83540,var(--nd-red) 55%,var(--nd-red-dark));color:#fff;box-shadow:0 8px 22px rgba(216,35,47,.38)}
.btn--red:hover{color:#fff;box-shadow:0 12px 28px rgba(216,35,47,.5)}
.btn--gold{background:linear-gradient(180deg,var(--nd-gold-light),var(--nd-gold));color:#3d2a00;box-shadow:0 8px 22px rgba(247,185,51,.35)}
.btn--gold:hover{color:#1f1600}
.btn--green{background:linear-gradient(180deg,#27c26c,var(--nd-green));color:#fff;box-shadow:0 8px 22px rgba(31,163,91,.35)}
.btn--green:hover{color:#fff}
.btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.btn--ghost:hover{color:var(--nd-gold);border-color:var(--nd-gold)}
.btn--outline{background:#fff;color:var(--nd-red);border:1.5px solid var(--nd-red)}
.btn--outline:hover{background:#fff2f2}
.btn--sm{padding:9px 18px;font-size:13.5px}
.btn--block{width:100%}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;letter-spacing:.4px;
  padding:5px 12px;border-radius:999px;line-height:1.35;
}
.badge--18{background:#000;color:var(--nd-gold);border:1.5px solid var(--nd-gold)}
.badge--green{background:rgba(31,163,91,.14);color:var(--nd-green-dark)}
.badge--gold{background:rgba(247,185,51,.16);color:#8a5c00}
.badge--blue{background:rgba(29,99,233,.1);color:var(--nd-blue-dark)}
.badge--red{background:rgba(216,35,47,.1);color:var(--nd-red-dark)}
.on-dark .badge--green{background:rgba(31,163,91,.2);color:#5ee39a}
.on-dark .badge--gold{background:rgba(247,185,51,.18);color:var(--nd-gold-light)}
.on-dark .badge--blue{background:rgba(29,99,233,.25);color:#9dbdff}
.section{padding:72px 0}
.section--tight{padding:52px 0}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--nd-red);margin-bottom:10px;
}
.on-dark .kicker{color:var(--nd-gold)}
.sec-title{font-size:clamp(24px,3.4vw,36px);font-weight:800;margin-bottom:12px}
.sec-sub{max-width:720px;font-size:16.5px;color:var(--nd-ink-soft);margin:0 auto 8px}
.on-dark .sec-sub{color:var(--nd-text-d-soft)}
.sec-head{text-align:center;margin-bottom:42px}
.text-gold{color:var(--nd-gold)}
.text-red{color:var(--nd-red)}
.text-green{color:var(--nd-green)}

/* ===== 3. Top bar ===== */
.topbar{background:#0a0c12;color:#c8cfdf;font-size:12.5px;border-bottom:1px solid rgba(255,255,255,.06)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:34px;gap:12px}
.topbar__date{color:var(--nd-gold);font-weight:600;white-space:nowrap}
.topbar__note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.topbar__note{display:none}.topbar .wrap{justify-content:center}}

/* ===== 4. Header / Nav (WordPress style) ===== */
.site-header{
  position:sticky;top:0;z-index:900;
  background:rgba(13,15,23,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--nd-line);
}
.site-header .wrap{display:flex;align-items:center;gap:20px;min-height:72px}
.site-branding{display:flex;align-items:center;gap:11px;flex-shrink:0}
.site-branding .logo-mark{width:44px;height:44px;flex:0 0 44px}
.site-title{font-size:22px;font-weight:800;color:#fff;margin:0;line-height:1.05;letter-spacing:.3px}
.site-title em{font-style:normal;color:var(--nd-gold)}
.site-desc{font-size:10.5px;color:#7f8aa5;margin:0;letter-spacing:1.6px;text-transform:uppercase}
.main-navigation{margin-left:auto}
.main-navigation ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.main-navigation li{position:relative;margin:0}
.main-navigation a{
  display:block;padding:10px 13px;border-radius:9px;
  color:#dfe5f2;font-size:14px;font-weight:600;
}
.main-navigation a:hover,.main-navigation .current-menu-item>a,.main-navigation .current_page_item>a{
  color:var(--nd-gold);background:rgba(255,255,255,.06);
}
.main-navigation .menu-item-has-children>a::after{content:" ▾";font-size:10px;opacity:.7}
.main-navigation .sub-menu{
  display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:230px;
  background:var(--nd-dark2);border:1px solid var(--nd-line);border-radius:12px;
  padding:8px;box-shadow:var(--nd-shadow-lg);z-index:50;
}
.main-navigation li:hover>.sub-menu,.main-navigation li:focus-within>.sub-menu{display:block}
.main-navigation .sub-menu a{padding:9px 12px;font-size:13.5px}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.header-search-btn{
  width:42px;height:42px;border-radius:11px;border:1px solid var(--nd-line);
  background:transparent;color:#fff;font-size:17px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:.18s;
}
.header-search-btn:hover{border-color:var(--nd-gold);color:var(--nd-gold)}
.nav-toggle{
  display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--nd-line);
  background:transparent;color:#fff;font-size:19px;cursor:pointer;
}
@media(max-width:1260px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .main-navigation{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--nd-dark2);border-bottom:1px solid var(--nd-line);
    box-shadow:var(--nd-shadow-lg);margin:0;max-height:78vh;overflow:auto;
  }
  .main-navigation.is-open{display:block}
  .main-navigation ul{flex-direction:column;align-items:stretch;gap:0;padding:10px 14px 16px}
  .main-navigation a{padding:12px 10px;font-size:15px}
  .main-navigation .sub-menu{display:block;position:static;box-shadow:none;border:0;background:transparent;padding:0 0 0 16px}
  .header-actions .btn--ghost{display:none}
}
@media(max-width:560px){
  .site-title{font-size:19px}
  .site-desc{display:none}
  .header-actions .btn{padding:10px 16px;font-size:13px}
}
@media(max-width:420px){
  .site-header .wrap{padding:0 14px;gap:12px}
  .header-actions{gap:8px}
  .header-actions .btn{padding:9px 13px;font-size:12.5px}
  .header-search-btn,.nav-toggle{width:38px;height:38px}
  .site-branding{gap:9px}
  .site-branding .logo-mark{width:38px;height:38px;flex-basis:38px}
  .site-title{font-size:17.5px}
  .wrap{padding:0 16px}
  .topbar .wrap{padding:0 16px}
}

/* ===== 5. Hero ===== */
.hero{
  background:
    linear-gradient(180deg,rgba(10,12,20,.82) 0%,rgba(10,12,20,.62) 45%,rgba(10,12,20,.94) 100%),
    url('assets/img/hero.jpg') center/cover no-repeat,
    var(--nd-dark);
  color:#fff;padding:88px 0 66px;
}
.hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:46px;align-items:center}
.hero h1{font-size:clamp(30px,4.6vw,50px);font-weight:800;line-height:1.14;margin-bottom:16px}
.hero h1 .hl{
  background:linear-gradient(92deg,var(--nd-gold-light),var(--nd-gold) 55%,#ff9d2e);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lead{font-size:17px;color:#d6dcec;max-width:540px;margin-bottom:24px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.hero__badges{display:flex;flex-wrap:wrap;gap:10px}
.hero__badges .badge{background:rgba(13,15,23,.55);border:1px solid rgba(255,255,255,.16);color:#e7ebf5;backdrop-filter:blur(4px)}
.hero-card{
  background:linear-gradient(160deg,var(--nd-card2),var(--nd-card) 70%);
  border:1px solid var(--nd-line);border-radius:22px;padding:26px;
  box-shadow:var(--nd-shadow-lg);
}
.hero-card__title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:#fff;margin-bottom:16px}
.hero-card__title::before{content:"";width:10px;height:10px;border-radius:99px;background:var(--nd-green);box-shadow:0 0 12px var(--nd-green)}
.hero-feat{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:11px}
.hero-feat li{display:flex;gap:11px;align-items:flex-start;margin:0;font-size:14.5px;color:#d9dff0}
.hero-feat .fi{
  flex:0 0 34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(247,185,51,.14);font-size:16px;border:1px solid rgba(247,185,51,.25);
}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0}
.hero-stats div{background:rgba(255,255,255,.05);border:1px solid var(--nd-line);border-radius:12px;padding:10px 8px;text-align:center}
.hero-stats b{display:block;font-size:18px;color:var(--nd-gold);line-height:1.2}
.hero-stats span{font-size:11px;color:#a7b0c6;letter-spacing:.4px}
@media(max-width:920px){
  .hero{padding:60px 0 54px}
  .hero .wrap{grid-template-columns:1fr;gap:34px}
}

/* ===== 6. Steps ===== */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step-card{
  background:#fff;border:1px solid var(--nd-light2);border-radius:var(--nd-radius);
  padding:26px 22px;box-shadow:var(--nd-shadow);position:relative;overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.step-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(13,15,23,.16)}
.step-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--nd-gold),var(--nd-red))}
.step-num{
  width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:19px;color:#fff;margin-bottom:14px;
  background:linear-gradient(145deg,var(--nd-red),var(--nd-red-dark));
  box-shadow:0 6px 16px rgba(216,35,47,.32);
}
.step-card h3{font-size:17.5px}
.step-card p{font-size:14px;color:var(--nd-ink-soft);margin-bottom:0}
@media(max-width:980px){.steps-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps-grid{grid-template-columns:1fr}}

/* ===== 7. Advantage cards (dark) ===== */
.on-dark{background:var(--nd-dark);color:var(--nd-text-d)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}}
.adv-card{
  background:linear-gradient(165deg,var(--nd-card2),var(--nd-card));
  border:1px solid var(--nd-line);border-radius:var(--nd-radius);
  padding:26px 22px;transition:transform .2s ease, border-color .2s ease;
}
.adv-card:hover{transform:translateY(-4px);border-color:rgba(247,185,51,.45)}
.adv-card .ico{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:15px;background:rgba(247,185,51,.13);border:1px solid rgba(247,185,51,.28);
}
.adv-card h3{font-size:17px;margin-bottom:8px}
.adv-card p{font-size:14px;color:var(--nd-text-d-soft);margin:0}

/* ===== 8. Why us / split ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split__media{border-radius:20px;overflow:hidden;box-shadow:var(--nd-shadow);border:1px solid var(--nd-light2);position:relative}
.split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.split__media .float-chip{
  position:absolute;left:16px;bottom:16px;background:rgba(13,15,23,.82);color:#fff;
  padding:10px 16px;border-radius:12px;font-size:13px;font-weight:700;backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);
}
.check-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:13px}
.check-list li{display:flex;gap:12px;align-items:flex-start;margin:0;font-size:15px}
.check-list li::before{
  content:"✓";flex:0 0 24px;height:24px;border-radius:99px;margin-top:2px;
  background:rgba(31,163,91,.14);color:var(--nd-green);font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;
}
@media(max-width:920px){.split{grid-template-columns:1fr;gap:30px}}

/* ===== 9. Phone mockup (mobile section) ===== */
.phone-wrap{display:flex;justify-content:center}
.phone{
  width:290px;border-radius:38px;background:#0a0c12;padding:12px;
  border:1px solid rgba(255,255,255,.14);box-shadow:var(--nd-shadow-lg),0 0 0 8px rgba(255,255,255,.03);
}
.phone__screen{border-radius:28px;overflow:hidden;background:var(--nd-dark2)}
.phone__notch{width:110px;height:20px;background:#0a0c12;border-radius:0 0 14px 14px;margin:0 auto}
.phone__screen .app-head{background:linear-gradient(120deg,var(--nd-red-deep),var(--nd-red));padding:16px 16px 18px;color:#fff}
.phone__screen .app-head b{font-size:15px}
.phone__screen .app-head small{display:block;font-size:10.5px;opacity:.85;letter-spacing:.4px}
.app-balance{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:9px 12px;margin-top:10px;font-size:11px}
.app-balance b{font-size:14px;color:var(--nd-gold-light)}
.app-reels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px}
.app-reels span{
  height:64px;border-radius:12px;background:var(--nd-card);border:1px solid var(--nd-line);
  display:flex;align-items:center;justify-content:center;font-size:30px;
}
.app-reels .spin1{animation:reelSpin 2.4s steps(5) infinite}
.app-reels .spin2{animation:reelSpin 3.1s steps(5) infinite .4s}
.app-reels .spin3{animation:reelSpin 2.8s steps(5) infinite .8s}
@keyframes reelSpin{
  0%{filter:hue-rotate(0deg);transform:translateY(0)}
  50%{transform:translateY(-4px)}
  100%{filter:hue-rotate(28deg);transform:translateY(0)}
}
.app-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 8px}
.app-btns span{border-radius:10px;padding:10px 0;text-align:center;font-size:12px;font-weight:800}
.app-btns .b1{background:linear-gradient(180deg,var(--nd-gold-light),var(--nd-gold));color:#3d2a00}
.app-btns .b2{background:rgba(255,255,255,.08);color:#e7ebf5;border:1px solid var(--nd-line)}
.app-foot{display:flex;justify-content:space-around;padding:10px 8px 14px;font-size:9.5px;color:#8891a8}
.app-foot b{display:block;text-align:center;font-size:16px;margin-bottom:2px}
.mobile-feats{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px}
.mobile-feats li{display:flex;gap:12px;align-items:flex-start;margin:0}
.mobile-feats .mi{flex:0 0 40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:19px;background:rgba(29,99,233,.16);border:1px solid rgba(29,99,233,.3)}

/* ===== 10. Testimonials ===== */
.tsm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tsm-card{
  background:#fff;border:1px solid var(--nd-light2);border-radius:var(--nd-radius);
  padding:26px 22px;box-shadow:var(--nd-shadow);display:flex;flex-direction:column;gap:14px;
}
.tsm-stars{color:var(--nd-gold);letter-spacing:3px;font-size:15px}
.tsm-card p{font-size:14.5px;color:var(--nd-ink-soft);margin:0;flex:1}
.tsm-who{display:flex;align-items:center;gap:12px}
.tsm-ava{
  width:44px;height:44px;border-radius:99px;flex:0 0 44px;color:#fff;font-weight:800;font-size:16px;
  display:flex;align-items:center;justify-content:center;
}
.tsm-ava--r{background:linear-gradient(145deg,#e83540,var(--nd-red-dark))}
.tsm-ava--g{background:linear-gradient(145deg,#27c26c,var(--nd-green-dark))}
.tsm-ava--b{background:linear-gradient(145deg,#4f8bff,var(--nd-blue-dark))}
.tsm-ava--y{background:linear-gradient(145deg,var(--nd-gold-light),#c98a00);color:#3d2a00}
.tsm-who b{display:block;font-size:14.5px;line-height:1.3}
.tsm-who small{color:var(--nd-ink-soft);font-size:12px}
.tsm-note{text-align:center;font-size:12.5px;color:var(--nd-ink-soft);margin-top:18px}
@media(max-width:940px){.tsm-grid{grid-template-columns:1fr}}

/* ===== 11. Tag cloud & search box ===== */
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tag-cloud a,.tag-cloud button{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--nd-light2);border-radius:999px;
  padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--nd-ink);
  box-shadow:0 3px 10px rgba(13,15,23,.05);cursor:pointer;transition:.18s;text-decoration:none;
}
.tag-cloud a:hover,.tag-cloud button:hover{border-color:var(--nd-red);color:var(--nd-red);transform:translateY(-2px)}
.tag-cloud .tag-hot{border-color:rgba(216,35,47,.35);color:var(--nd-red-dark);background:#fff6f6}
.tag-cloud .tag-hot::before{content:"🔥";font-size:12px}
.search-inline{max-width:620px;margin:0 auto 26px;display:flex;gap:10px}
.search-inline input{
  flex:1;min-width:0;padding:14px 20px;border-radius:999px;border:1.5px solid var(--nd-light2);
  background:#fff;font-size:15px;font-family:inherit;color:var(--nd-ink);box-shadow:var(--nd-shadow);
}
.search-inline input:focus{outline:none;border-color:var(--nd-red)}

/* ===== 12. Calculator ===== */
.calc-panel{
  max-width:760px;margin:0 auto;background:linear-gradient(165deg,var(--nd-card2),var(--nd-card));
  border:1px solid var(--nd-line);border-radius:20px;padding:30px;box-shadow:var(--nd-shadow-lg);
}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.calc-grid label{display:block;font-size:13px;font-weight:700;color:#cfd6e8;margin-bottom:7px}
.calc-grid input,.calc-grid select{
  width:100%;padding:12px 14px;border-radius:11px;border:1px solid var(--nd-line);
  background:rgba(255,255,255,.06);color:#fff;font-size:15px;font-family:inherit;
}
.calc-grid input:focus,.calc-grid select:focus{outline:none;border-color:var(--nd-gold)}
.calc-grid select option{color:#111}
.calc-result{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.calc-result div{background:rgba(255,255,255,.05);border:1px solid var(--nd-line);border-radius:13px;padding:14px;text-align:center}
.calc-result b{display:block;font-size:20px;color:var(--nd-gold-light);margin-bottom:3px;overflow-wrap:anywhere}
.calc-result span{font-size:11.5px;color:#a7b0c6;letter-spacing:.3px}
.calc-note{font-size:12.5px;color:#98a1b8;border-top:1px dashed rgba(255,255,255,.14);padding-top:12px;margin-top:14px}
@media(max-width:640px){.calc-grid{grid-template-columns:1fr}.calc-result{grid-template-columns:1fr}}

/* ===== 13. Security section ===== */
.sec-tips{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sec-tips li{
  background:#fff;border:1px solid var(--nd-light2);border-left:4px solid var(--nd-blue);
  border-radius:12px;padding:16px 18px;margin:0;box-shadow:0 4px 14px rgba(13,15,23,.05);
}
.sec-tips b{display:block;margin-bottom:3px;font-size:15px}
.sec-tips p{margin:0;font-size:14px;color:var(--nd-ink-soft)}

/* ===== 14. Responsible ===== */
.section--resp{background:linear-gradient(180deg,#effaf4,#f6f7fb)}
.resp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.resp-card{background:#fff;border:1px solid #dcefe4;border-radius:var(--nd-radius);padding:22px;box-shadow:0 4px 14px rgba(18,112,62,.06)}
.resp-card .ico{font-size:26px;margin-bottom:10px}
.resp-card h3{font-size:15.5px}
.resp-card p{font-size:13.5px;color:var(--nd-ink-soft);margin:0}
@media(max-width:980px){.resp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.resp-grid{grid-template-columns:1fr}}

/* ===== 15. FAQ ===== */
.faq-list{max-width:820px;margin:0 auto;display:grid;gap:12px}
details.faq-item{
  background:#fff;border:1px solid var(--nd-light2);border-radius:13px;
  padding:0;box-shadow:0 4px 14px rgba(13,15,23,.05);overflow:hidden;
}
details.faq-item summary{
  list-style:none;cursor:pointer;padding:17px 52px 17px 20px;position:relative;
  font-weight:700;font-size:15.5px;color:var(--nd-ink);
}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{
  content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:99px;background:var(--nd-light2);color:var(--nd-red);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;
}
details.faq-item[open] summary::after{content:"–";background:var(--nd-red);color:#fff}
details.faq-item .faq-body{padding:0 20px 18px;font-size:14.5px;color:var(--nd-ink-soft)}
details.faq-item .faq-body p:last-child{margin-bottom:0}

/* ===== 16. CTA band ===== */
.cta-band{background:linear-gradient(115deg,var(--nd-red-deep),var(--nd-red) 55%,#e8452f);color:#fff;padding:56px 0}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(22px,3vw,30px);margin-bottom:6px}
.cta-band p{margin:0;color:#ffe3e0;font-size:15px}

/* ===== 17. Footer ===== */
.site-footer{background:#0a0c12;color:#b9c1d4;font-size:14px}
.footer-cols{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:34px;padding:56px 0 40px}
.site-footer h4{color:#fff;font-size:15px;margin-bottom:16px;letter-spacing:.3px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:9px}
.site-footer a{color:#b9c1d4}
.site-footer a:hover{color:var(--nd-gold)}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer-brand .logo-mark{width:40px;height:40px}
.footer-brand b{color:#fff;font-size:19px}
.footer-brand b em{font-style:normal;color:var(--nd-gold)}
.footer-desc{font-size:13.5px;color:#8f98ae;margin-bottom:14px}
.footer-badges{display:flex;flex-wrap:wrap;gap:8px}
.footer-badges .badge{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#dfe5f2}
.pay-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pay-row span{
  font-size:11.5px;font-weight:700;letter-spacing:.4px;padding:6px 12px;border-radius:8px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#cfd6e8;
}
.legal-bar{border-top:1px solid rgba(255,255,255,.08);padding:22px 0 90px;font-size:12.5px;color:#7f8aa5}
.legal-bar p{margin:0 0 8px}
.legal-bar .legal-18{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;color:#aab3c9}
.legal-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px}
@media(max-width:980px){.footer-cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-cols{grid-template-columns:1fr;gap:26px}}

/* ===== 18. Breadcrumbs ===== */
.breadcrumbs{background:var(--nd-dark2);border-bottom:1px solid var(--nd-line);padding:13px 0;font-size:13px}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.breadcrumbs li{display:flex;align-items:center;gap:7px;margin:0;color:#98a1b8}
.breadcrumbs li+li::before{content:"›";color:var(--nd-gold);font-weight:700}
.breadcrumbs a{color:#cfd6e8}
.breadcrumbs a:hover{color:var(--nd-gold)}
.breadcrumbs [aria-current]{color:var(--nd-gold)}

/* ===== 19. Page hero (inner pages) ===== */
.page-hero{
  background:
    linear-gradient(115deg,rgba(10,12,20,.93) 20%,rgba(10,12,20,.7)),
    var(--nd-dark2);
  color:#fff;padding:52px 0 46px;
}
.page-hero--img{background-size:cover;background-position:center}
.page-hero h1{font-size:clamp(26px,3.6vw,40px);font-weight:800;max-width:820px}
.page-hero .ph-sub{color:#c6cde0;font-size:16px;max-width:760px;margin-bottom:14px}
.page-hero .ph-meta{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:12.5px;color:#9aa3ba}
.page-hero .ph-meta .badge{font-size:11.5px}

/* ===== 20. Entry content (articles) ===== */
.content-area{padding:52px 0 64px}
.layout-single{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
.post-full{background:#fff;border:1px solid var(--nd-light2);border-radius:20px;box-shadow:var(--nd-shadow);overflow:hidden}
.post-thumb img{width:100%;object-fit:cover;aspect-ratio:16/8.5}
.entry-content{padding:34px 36px 38px}
@media(max-width:700px){.entry-content{padding:24px 18px 28px}}
.entry-content h2{font-size:23px;margin:34px 0 12px;padding-left:14px;border-left:4px solid var(--nd-red)}
.entry-content h3{font-size:18.5px;margin:26px 0 10px}
.entry-content p{font-size:15.5px;color:#39415a}
.entry-content ul,.entry-content ol{font-size:15.5px;color:#39415a}
.entry-content a{font-weight:600}
.entry-content img{border-radius:14px;margin:10px 0}
.entry-content figure{margin:22px 0}
.entry-content figcaption{font-size:12.5px;color:var(--nd-ink-soft);text-align:center;margin-top:8px}
.notice{
  border-radius:13px;padding:16px 18px;font-size:14px;margin:22px 0;
  border:1px solid;overflow-wrap:anywhere;
}
.notice--gold{background:#fff9ec;border-color:#f2dca3;color:#6b4e00}
.notice--green{background:#f0faf4;border-color:#bfe6cf;color:#14603a}
.notice--blue{background:#eef4fe;border-color:#c3d7f8;color:#1c3f86}
.notice--red{background:#fdf1f1;border-color:#f3c4c7;color:#7c1018}
.notice b{display:block;margin-bottom:4px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--nd-light2);border-radius:13px;margin:22px 0}
.entry-content table{margin:0;min-width:560px;font-size:14px}
.entry-content th{background:var(--nd-dark2);color:#fff;text-align:left;padding:12px 14px;font-size:13px;letter-spacing:.3px;white-space:nowrap}
.entry-content td{padding:11px 14px;border-top:1px solid var(--nd-light2);vertical-align:top;color:#39415a}
.entry-content tr:nth-child(even) td{background:#fafbfe}
.entry-footer{padding:0 36px 34px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media(max-width:700px){.entry-footer{padding:0 18px 24px}}

/* ===== 21. Sidebar widgets ===== */
.widget{background:#fff;border:1px solid var(--nd-light2);border-radius:16px;padding:24px;box-shadow:var(--nd-shadow);margin-bottom:22px}
.widget h2,.widget .widget-title{font-size:16.5px;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--nd-light2);position:relative}
.widget .widget-title::after{content:"";position:absolute;left:0;bottom:-2px;width:44px;height:2px;background:var(--nd-red)}
.widget ul{list-style:none;margin:0;padding:0;font-size:14.5px}
.widget li{margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed var(--nd-light2)}
.widget li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.widget a{color:var(--nd-ink);font-weight:600}
.widget a:hover{color:var(--nd-red)}
.widget--cta{background:linear-gradient(160deg,var(--nd-red-deep),var(--nd-red));border:0;color:#fff;text-align:center}
.widget--cta h2,.widget--cta .widget-title{color:#fff;border-color:rgba(255,255,255,.2)}
.widget--cta .widget-title::after{background:var(--nd-gold)}
.widget--cta p{font-size:13.5px;color:#ffe3e0}
@media(max-width:1020px){.layout-single{grid-template-columns:1fr}.widget-area{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.widget{margin-bottom:0}}
@media(max-width:640px){.widget-area{grid-template-columns:1fr}}

/* ===== 22. Cards grid (category hub) ===== */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.cat-card{
  background:#fff;border:1px solid var(--nd-light2);border-radius:18px;overflow:hidden;
  box-shadow:var(--nd-shadow);display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease;
}
.cat-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(13,15,23,.16)}
.cat-card .thumb{position:relative;overflow:hidden}
.cat-card .thumb img{aspect-ratio:16/9;object-fit:cover;width:100%;transition:transform .35s ease}
.cat-card:hover .thumb img{transform:scale(1.045)}
.cat-card .thumb .badge{position:absolute;top:14px;left:14px;background:rgba(13,15,23,.82);color:#fff;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px)}
.cat-card .body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.cat-card h2{font-size:19px;margin:0}
.cat-card h2 a{color:var(--nd-ink)}
.cat-card h2 a:hover{color:var(--nd-red)}
.cat-card p{font-size:14px;color:var(--nd-ink-soft);margin:0;flex:1}
.cat-card .meta{font-size:12px;color:var(--nd-ink-soft);display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:860px){.cat-grid{grid-template-columns:1fr}}

/* ===== 23. Auth pages ===== */
.auth-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 106px)}
.auth-side{position:relative;display:flex;align-items:center;padding:56px 52px;color:#fff}
.auth-side--reg{background:
  linear-gradient(115deg,rgba(124,14,24,.9),rgba(13,15,23,.86)),
  url('assets/img/promo-welcome.jpg') center/cover}
.auth-side--log{background:
  linear-gradient(115deg,rgba(13,15,23,.9),rgba(18,63,154,.7)),
  url('assets/img/live-casino.jpg') center/cover}
.auth-side h2{font-size:clamp(24px,3vw,34px);font-weight:800;margin-bottom:14px}
.auth-side p{color:#dbe1f0;font-size:15px;max-width:420px}
.auth-side ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:11px}
.auth-side li{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:14px;color:#e3e8f5}
.auth-side li::before{content:"✓";color:var(--nd-gold);font-weight:800}
.auth-form-col{display:flex;align-items:center;justify-content:center;padding:48px 24px;background:var(--nd-light)}
.auth-box{width:100%;max-width:440px}
.auth-box h1{font-size:26px;margin-bottom:6px}
.auth-box .sub{color:var(--nd-ink-soft);font-size:14px;margin-bottom:24px}
.auth-box form{background:#fff;border:1px solid var(--nd-light2);border-radius:18px;padding:28px;box-shadow:var(--nd-shadow)}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.field input{
  width:100%;padding:12px 14px;border-radius:11px;border:1.5px solid var(--nd-light2);
  font-size:15px;font-family:inherit;color:var(--nd-ink);background:#fbfcfe;
}
.field input:focus{outline:none;border-color:var(--nd-red);background:#fff}
.field .hint{font-size:11.5px;color:var(--nd-ink-soft);margin-top:5px}
.field-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--nd-ink-soft);margin:4px 0 18px}
.field-check input{margin-top:3px;accent-color:var(--nd-red)}
.form-msg{
  display:none;border-radius:11px;padding:11px 14px;font-size:13.5px;margin-bottom:14px;
}
.form-msg.err{display:block;background:#fdf1f1;border:1px solid #f3c4c7;color:#7c1018}
.form-msg.ok{display:block;background:#f0faf4;border:1px solid #bfe6cf;color:#14603a}
.auth-alt{margin-top:18px;text-align:center;font-size:13.5px;color:var(--nd-ink-soft)}
.auth-alt a{font-weight:700}
@media(max-width:900px){
  .auth-wrap{grid-template-columns:1fr}
  .auth-side{padding:40px 26px}
  .auth-side ul{display:none}
  .auth-side p{margin-bottom:0}
}

/* ===== 24. Search overlay ===== */
.search-overlay{
  position:fixed;inset:0;z-index:1200;background:rgba(8,10,16,.93);backdrop-filter:blur(8px);
  display:none;align-items:flex-start;justify-content:center;padding:90px 20px 40px;
}
.search-overlay.is-open{display:flex}
.search-panel{width:100%;max-width:680px}
.search-panel .sp-head{display:flex;gap:10px;margin-bottom:18px}
.search-panel input{
  flex:1;min-width:0;padding:16px 22px;border-radius:14px;border:1.5px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.07);color:#fff;font-size:16px;font-family:inherit;
}
.search-panel input:focus{outline:none;border-color:var(--nd-gold)}
.search-close{
  width:54px;border-radius:14px;border:1.5px solid rgba(255,255,255,.25);background:transparent;
  color:#fff;font-size:21px;cursor:pointer;
}
.search-close:hover{border-color:var(--nd-red);color:var(--nd-red)}
.sp-label{color:#98a1b8;font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:12px;font-weight:700}
.sp-results{display:grid;gap:10px;max-height:52vh;overflow:auto;padding-right:4px}
.sp-item{
  display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:13px;padding:15px 18px;color:#fff;transition:.16s;
}
.sp-item:hover{border-color:var(--nd-gold);background:rgba(247,185,51,.08);color:#fff}
.sp-item b{display:block;font-size:15.5px;margin-bottom:3px;color:var(--nd-gold-light)}
.sp-item small{color:#b9c1d4;font-size:13px;display:block;line-height:1.55}
.sp-empty{color:#b9c1d4;font-size:14.5px;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.2);border-radius:13px;padding:18px;text-align:center}
.sp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sp-tags button{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#dfe5f2;
  border-radius:999px;padding:7px 14px;font-size:12.5px;cursor:pointer;
}
.sp-tags button:hover{border-color:var(--nd-gold);color:var(--nd-gold)}

/* ===== 25. Floating slot CTA ===== */
.nd-float{
  position:fixed;left:0;right:0;bottom:0;z-index:1100;
  display:flex;justify-content:center;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  pointer-events:none;
}
.nd-float__btn{
  pointer-events:auto;position:relative;overflow:visible;
  display:inline-flex;align-items:center;gap:11px;
  max-width:min(94vw,470px);
  padding:10px 26px 10px 12px;border-radius:18px;
  background:linear-gradient(180deg,#f2444f,var(--nd-red) 45%,var(--nd-red-dark));
  border:2px solid var(--nd-gold);
  box-shadow:0 0 0 4px rgba(0,0,0,.35),0 14px 34px rgba(216,35,47,.55),inset 0 2px 0 rgba(255,255,255,.28);
  color:#fff;font-weight:800;font-size:16.5px;letter-spacing:.6px;
  animation:floatPulse 2.2s ease-in-out infinite;
  text-decoration:none;white-space:nowrap;
}
.nd-float__btn:hover{color:#fff;filter:brightness(1.07)}
@keyframes floatPulse{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-4px) scale(1.016)}
}
.nd-float__reels{display:flex;gap:5px}
.nd-float__reels .reel{
  width:30px;height:30px;border-radius:8px;overflow:hidden;position:relative;
  background:#fffdf3;border:1.5px solid var(--nd-gold);
  box-shadow:inset 0 -6px 10px rgba(0,0,0,.18),inset 0 5px 8px rgba(255,255,255,.9);
}
.nd-float__reels .reel i{
  position:absolute;left:0;right:0;top:0;font-style:normal;font-size:17px;line-height:30px;
  text-align:center;display:block;
  animation:reelRoll 1.6s linear infinite;
}
@keyframes reelRoll{
  0%{transform:translateY(-30px)}
  100%{transform:translateY(30px)}
}
.reel.r2 i{animation-duration:2.1s;animation-delay:.25s}
.reel.r3 i{animation-duration:1.3s;animation-delay:.5s}
.nd-float__btn .coins i{
  position:absolute;font-style:normal;font-size:15px;opacity:0;
  animation:coinFly 2.6s ease-in infinite;
}
@keyframes coinFly{
  0%{opacity:0;transform:translateY(6px) rotate(0deg) scale(.6)}
  12%{opacity:1}
  60%{opacity:1}
  100%{opacity:0;transform:translateY(-46px) rotate(220deg) scale(1.05)}
}
.nd-float__btn .coins i.c1{left:10px;top:-8px}
.nd-float__btn .coins i.c2{right:14px;top:-4px;animation-delay:.9s}
.nd-float__btn .coins i.c3{left:34%;top:-14px;animation-delay:1.7s}
.nd-float__btn .fl-txt{display:flex;flex-direction:column;line-height:1.12;gap:1px}
.nd-float__btn .fl-txt small{font-size:10px;font-weight:700;color:var(--nd-gold-light);letter-spacing:2px}
@media(max-width:480px){
  .nd-float__btn{font-size:15px;padding:9px 20px 9px 10px;gap:9px}
  .nd-float__btn .reel{width:26px;height:26px}
  .nd-float__btn .reel i{font-size:15px;line-height:26px}
}

/* ===== 26. Utility ===== */
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.list-tight li{margin-bottom:6px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
}