/* ============================================================
   ANDAR BAHAR LIVE — styles.css  v4
   Dark Slate + Emerald + Amber  |  Animated casino theme
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --slate-dark:    #0f1923;
  --slate-mid:     #1a2d3e;
  --slate-light:   #243d52;
  --emerald:       #00c896;
  --emerald-dark:  #009e76;
  --emerald-pale:  #e6faf5;
  --amber:         #ffc107;
  --amber-dark:    #e6a800;
  --cream:         #f4f6f8;
  --white:         #ffffff;
  --text-dark:     #0f1923;
  --text-mid:      #2c3e50;
  --text-muted:    #607d8b;
  --border:        #c8dce8;
  --border-dark:   rgba(255,255,255,0.1);
  --shadow-sm:     0 2px 8px rgba(15,25,35,0.1);
  --shadow-md:     0 6px 24px rgba(15,25,35,0.15);
  --shadow-lg:     0 16px 48px rgba(15,25,35,0.22);
  --radius-sm:     8px;
  --radius-md:     14px;
  --radius-lg:     22px;
  --radius-xl:     32px;
  --transition:    0.25s ease;
  --max-width:     1280px;
}

html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Mukta', 'Segoe UI', sans-serif; background: var(--cream); color: var(--text-dark); line-height: 1.65; -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4 { font-family: 'Sora', sans-serif; line-height: 1.2; color: var(--slate-dark); }
h1 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; }
p  { margin-bottom: 0.9rem; color: var(--text-mid); }
p:last-child { margin-bottom: 0; }
a  { color: var(--emerald-dark); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--emerald); }
ul { list-style: none; }
img { max-width: 100%; display: block; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

/* ---- ANIMATIONS ---- */
@keyframes float-up   { 0%,100%{transform:translateY(0) rotate(0deg);opacity:.12} 50%{transform:translateY(-28px) rotate(8deg);opacity:.22} }
@keyframes float-side { 0%,100%{transform:translateX(0) rotate(-4deg);opacity:.10} 50%{transform:translateX(18px) rotate(4deg);opacity:.20} }
@keyframes float-up-solid   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
@keyframes float-side-solid { 0%,100%{transform:translateX(0) rotate(-12deg)} 50%{transform:translateX(14px) rotate(-8deg)} }
@keyframes float-up-solid-b { 0%,100%{transform:translateY(0) rotate(10deg)} 50%{transform:translateY(-14px) rotate(14deg)} }
@keyframes pulse-btn  { 0%,100%{box-shadow:0 4px 14px rgba(255,193,7,.4)} 50%{box-shadow:0 4px 26px rgba(255,193,7,.7)} }
@keyframes shine      { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes fade-up    { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes badge-pop  { 0%{transform:scale(.9)} 60%{transform:scale(1.05)} 100%{transform:scale(1)} }

/* ---- BUTTONS ---- */
.btn { display:inline-flex;align-items:center;gap:6px;font-family:'Sora',sans-serif;font-weight:600;font-size:.95rem;padding:10px 22px;border-radius:var(--radius-sm);border:2px solid transparent;cursor:pointer;transition:all var(--transition);white-space:nowrap;text-decoration:none; }
.btn--primary { background:linear-gradient(135deg,var(--emerald),var(--emerald-dark));color:var(--white);border-color:var(--emerald);box-shadow:0 4px 14px rgba(0,200,150,.4); }
.btn--primary:hover { background:linear-gradient(135deg,var(--emerald-dark),#007a5a);color:var(--white);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,200,150,.5); }
.btn--amber { background:linear-gradient(135deg,var(--amber),var(--amber-dark));color:var(--slate-dark);border-color:var(--amber);box-shadow:0 4px 14px rgba(255,193,7,.4);font-weight:700;animation:pulse-btn 2.5s ease-in-out infinite; }
.btn--amber:hover { background:linear-gradient(135deg,#ffd54f,var(--amber));color:var(--slate-dark);transform:translateY(-2px);animation:none;box-shadow:0 8px 24px rgba(255,193,7,.55); }
.btn--outline { background:transparent;color:var(--slate-mid);border-color:var(--border); }
.btn--outline:hover { background:var(--emerald-pale);border-color:var(--emerald);color:var(--emerald-dark); }
.btn--outline-light { background:transparent;color:var(--white);border-color:rgba(255,255,255,.5); }
.btn--outline-light:hover { background:rgba(255,255,255,.1);color:var(--white); }
.btn--lg { padding:13px 30px;font-size:1.05rem; }
.btn--xl { padding:16px 40px;font-size:1.15rem; }
.btn--sm { padding:7px 16px;font-size:.85rem; }

/* ---- HEADER ---- */
.header { position:sticky;top:0;z-index:100;background:var(--slate-dark);border-bottom:1px solid var(--border-dark);transition:box-shadow var(--transition); }
.header--scrolled { box-shadow:0 4px 20px rgba(0,0,0,.4); }
.header__inner { display:flex;align-items:center;gap:20px;height:64px; }
.logo { display:flex;align-items:center;gap:8px;font-family:'Sora',sans-serif;font-weight:800;font-size:1.25rem;color:var(--white);text-decoration:none;flex-shrink:0; }
.logo__icon { font-size:1.5rem; }
.logo__accent { color:var(--emerald); }
.nav { display:flex;align-items:center;gap:4px;margin-left:auto; }
.nav__link { font-family:'Sora',sans-serif;font-size:.88rem;font-weight:500;padding:6px 12px;border-radius:var(--radius-sm);color:rgba(255,255,255,.75);transition:all var(--transition); }
.nav__link:hover { background:rgba(255,255,255,.08);color:var(--emerald); }
.burger { display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;margin-left:auto; }
.burger span { display:block;width:24px;height:2px;background:var(--white);border-radius:2px;transition:all var(--transition); }

/* ---- HERO ---- */
.hero { position:relative;background:linear-gradient(135deg,var(--slate-dark) 0%,#0d2035 100%);padding:80px 0 70px;overflow:hidden;min-height:580px;display:flex;align-items:center; }
.hero__suits { position:absolute;inset:0;pointer-events:none;overflow:hidden; }
.suit { position:absolute;font-size:4rem;line-height:1;user-select:none;opacity:.12;font-family:serif; }
.suit--1 { top:8%;left:4%;color:#ff6b6b;animation:float-up 7s ease-in-out infinite; }
.suit--2 { top:14%;left:88%;color:var(--white);animation:float-side 9s ease-in-out infinite;font-size:3rem; }
.suit--3 { top:60%;left:3%;color:var(--emerald);animation:float-up 11s ease-in-out infinite 2s;font-size:2.5rem; }
.suit--4 { top:75%;left:91%;color:#ff6b6b;animation:float-side 8s ease-in-out infinite 1s;font-size:3.5rem; }
.suit--5 { top:40%;left:92%;color:var(--amber);animation:float-up 10s ease-in-out infinite 3s;font-size:2rem; }
.suit--6 { top:85%;left:16%;color:var(--white);animation:float-side 12s ease-in-out infinite .5s;font-size:3rem; }
.suit--7 { top:28%;left:48%;color:var(--emerald);animation:float-up 8s ease-in-out infinite 4s;font-size:2rem;opacity:.06; }

.hero__inner { display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;position:relative;z-index:1;width:100%; }
.hero__badge { display:inline-flex;align-items:center;gap:6px;background:rgba(0,200,150,.15);border:1px solid rgba(0,200,150,.4);color:var(--emerald);font-size:.82rem;font-weight:600;font-family:'Sora',sans-serif;padding:5px 14px;border-radius:20px;margin-bottom:18px;letter-spacing:.02em;animation:badge-pop .6s ease both; }
.hero__title { color:var(--white);margin-bottom:18px; }
.hero__title .accent { background:linear-gradient(90deg,var(--emerald),var(--amber),var(--emerald));background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shine 3s linear infinite; }
.hero__desc { color:rgba(255,255,255,.78);font-size:1.05rem;margin-bottom:30px; }
.hero__btns { display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px; }
.hero__stats-bar { display:flex;background:rgba(255,255,255,.05);border:1px solid var(--border-dark);border-radius:var(--radius-md);overflow:hidden; }
.hero__stat { text-align:center;padding:16px 22px;border-right:1px solid var(--border-dark);flex:1; }
.hero__stat:last-child { border-right:none; }
.hero__stat strong { display:block;font-family:'Sora',sans-serif;font-size:1.7rem;font-weight:800;color:var(--emerald);line-height:1;white-space:nowrap; }
.hero__stat span { font-size:.72rem;color:rgba(255,255,255,.5);font-weight:500;text-transform:uppercase;letter-spacing:.06em; }

/* Hero card visual */
.hero__visual { position:relative;display:flex;align-items:center;justify-content:center; }
.hero__float-img { position:absolute;z-index:3;max-width:340px;height:auto;border-radius:var(--radius-lg);box-shadow:0 12px 40px rgba(0,0,0,.45);animation:float-up-solid 6s ease-in-out infinite; }
.hero__card-wrap { position:relative;width:340px;height:380px;z-index:1; }
.hcard { position:absolute;border-radius:14px;background:var(--white);border:2px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:900;box-shadow:var(--shadow-lg); }
.hcard--back { display:none; }
.hcard--a { width:120px;height:170px;top:-50px;left:-70px;color:#c0392b;transform:rotate(-12deg);animation:float-side-solid 8s ease-in-out infinite 1s;font-size:1.8rem;z-index:1; }
.hcard--b { width:120px;height:170px;bottom:-50px;right:-70px;top:auto;left:auto;color:var(--slate-dark);transform:rotate(10deg);animation:float-up-solid-b 10s ease-in-out infinite 2s;font-size:1.8rem;z-index:1; }
.hlabel { position:absolute;font-family:'Sora',sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.12em;padding:5px 14px;border-radius:20px;border:2px solid;z-index:4; }
.hlabel--a { background:rgba(0,200,150,.2);color:var(--emerald);border-color:var(--emerald);bottom:-30px;left:-60px;transform:rotate(-3deg); }
.hlabel--b { background:rgba(255,193,7,.2);color:var(--amber);border-color:var(--amber);top:-30px;right:-60px;transform:rotate(3deg); }

/* ---- TOC BAR ---- */
.toc-bar { background:var(--slate-mid);border-bottom:1px solid var(--border-dark); }
.toc-bar__toggle { display:flex;align-items:center;gap:8px;background:none;border:none;color:rgba(255,255,255,.7);font-family:'Sora',sans-serif;font-size:.9rem;font-weight:600;padding:11px 0;cursor:pointer;width:100%;transition:color var(--transition); }
.toc-bar__toggle:hover { color:var(--emerald); }
.toc-bar__toggle svg { transition:transform var(--transition);margin-left:auto; }
.toc-bar__toggle--open svg { transform:rotate(180deg); }
.toc-bar__list { display:none;flex-wrap:wrap;gap:6px;padding-bottom:12px; }
.toc-bar__list--open { display:flex; }
.toc-bar__list a { font-size:.82rem;font-weight:500;padding:4px 12px;border-radius:20px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.12);transition:all var(--transition); }
.toc-bar__list a:hover { background:var(--emerald);color:var(--slate-dark);border-color:var(--emerald); }

/* ---- SECTIONS ---- */
.section { padding:64px 0; }
.section--dark { background:var(--slate-dark); }
.section--mid  { background:var(--slate-mid); }
.section--alt  { background:var(--white); }
.section__title { text-align:center;margin-bottom:12px; }
.section--dark .section__title,.section--mid .section__title { color:var(--white); }
.section__desc { text-align:center;max-width:640px;margin:0 auto 40px;color:var(--text-muted); }
.section--dark .section__desc,.section--mid .section__desc { color:rgba(255,255,255,.6); }
.section__title::after { content:'';display:block;width:48px;height:3px;background:linear-gradient(90deg,var(--emerald),var(--amber));border-radius:2px;margin:10px auto 0; }

/* ---- CASINO LIST ---- */
.casino-list { display:flex;flex-direction:column;gap:20px; }
.casino-card { position:relative;background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:22px 26px;display:grid;grid-template-columns:200px minmax(0,1fr) 170px 160px;gap:16px;align-items:center;transition:all var(--transition);box-shadow:var(--shadow-sm); }
.casino-card:hover { border-color:var(--emerald);box-shadow:0 8px 30px rgba(0,200,150,.15);transform:translateY(-3px); }
.casino-card--featured { border-color:var(--emerald);background:linear-gradient(135deg,#f0fdf9,var(--white));box-shadow:0 4px 20px rgba(0,200,150,.12); }
.casino-card__badge { position:absolute;top:-12px;left:22px;background:linear-gradient(135deg,var(--emerald),var(--emerald-dark));color:var(--white);font-family:'Sora',sans-serif;font-size:.73rem;font-weight:700;padding:3px 12px;border-radius:20px;box-shadow:0 2px 8px rgba(0,200,150,.4);letter-spacing:.03em; }
.casino-card__badge--amber { background:linear-gradient(135deg,var(--amber),var(--amber-dark));color:var(--slate-dark);box-shadow:0 2px 8px rgba(255,193,7,.4); }
.casino-card__badge--slate { background:linear-gradient(135deg,var(--slate-mid),var(--slate-dark));color:var(--emerald); }
.casino-card__logo-wrap { position:relative;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border);padding-right:20px; }
.casino-card__logo { width:200px;height:80px;object-fit:contain;border-radius:var(--radius-sm); }
.casino-card__logo-label { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,25,35,.75);color:var(--emerald);font-size:.7rem;font-weight:600;text-align:center;border-radius:var(--radius-sm);opacity:0;transition:opacity var(--transition);pointer-events:none; }
.casino-card:hover .casino-card__logo-label { opacity:1; }
.casino-card__info { flex:1; }
.casino-card__name { font-size:1.2rem;font-weight:700;margin-bottom:0;color:var(--slate-dark); }
.casino-card__desc { font-size:.9rem;margin-bottom:10px;color:var(--text-muted);line-height:1.5; }
.casino-card__title-row { display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin-bottom:6px; }

/* Promo chip */
.promo-chip { display:inline-flex;align-items:center;gap:8px;padding:4px 6px 4px 10px;border:1px dashed rgba(0,200,150,.4);background:#f0fdf9;border-radius:10px;line-height:1; }
.promo-chip__label { font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted); }
.promo-chip__btn { display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;cursor:pointer;padding:0;font:inherit; }
.promo-chip__code { font-family:'Sora',sans-serif;font-size:.8rem;font-weight:700;color:var(--emerald-dark); }
.promo-chip__icon { display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--white);border:1px solid var(--border);font-size:.85rem;transition:all var(--transition); }
.promo-chip__btn:hover .promo-chip__icon { background:var(--emerald-pale);border-color:var(--emerald);transform:translateY(-1px); }
.promo-chip.is-copied { border-color:var(--emerald);background:#d0fff4; }
.promo-chip.is-copied .promo-chip__code { color:var(--emerald-dark); }
@media (max-width:640px) { .casino-card__title-row { flex-direction:column;align-items:flex-start; } }

.casino-card__features { display:flex;flex-wrap:wrap;gap:5px; }
.casino-card__features span { font-size:.76rem;font-weight:500;padding:3px 9px;border-radius:20px;background:var(--emerald-pale);color:var(--emerald-dark);border:1px solid rgba(0,200,150,.2); }

.casino-card__bonus-block { background:linear-gradient(135deg,var(--slate-dark),var(--slate-mid));border-radius:var(--radius-sm);padding:16px 18px;text-align:center;min-width:150px; }
.casino-card__bonus-label { font-size:.62rem;letter-spacing:.12em;color:rgba(255,255,255,.5);font-weight:600;text-transform:uppercase;margin-bottom:4px; }
.casino-card__bonus-amount { font-family:'Sora',sans-serif;font-size:1.45rem;font-weight:800;color:var(--emerald);line-height:1; }
.casino-card__bonus-amount span { font-size:.72rem;font-weight:500;color:rgba(255,255,255,.6); }
.casino-card__bonus-value { font-family:'Sora',sans-serif;font-size:.92rem;font-weight:700;color:var(--amber);margin-top:3px; }

.casino-card__actions { display:flex;flex-direction:column;align-items:center;gap:10px;min-width:150px; }
.casino-card__actions .btn { padding:13px 22px;font-size:1rem;width:100%;justify-content:center; }
.casino-card__rating { text-align:center; }
.stars { color:var(--amber);font-size:.9rem;letter-spacing:-1px; }
.casino-card__rating span { font-size:.78rem;color:var(--text-muted);font-weight:500; }

/* ---- CRITERIA ---- */
.criteria-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.criteria-card { background:rgba(255,255,255,.05);border:1px solid var(--border-dark);border-radius:var(--radius-md);padding:26px;transition:all var(--transition);position:relative;overflow:hidden; }
.criteria-card::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--emerald),var(--amber)); }
.criteria-card:hover { background:rgba(255,255,255,.09);border-color:rgba(0,200,150,.3);transform:translateY(-3px); }
.criteria-card__icon { font-size:2.2rem;margin-bottom:14px; }
.criteria-card h3 { margin-bottom:8px;font-size:1rem;color:var(--white); }
.criteria-card p { font-size:.9rem;margin:0;color:rgba(255,255,255,.6); }

/* ---- STEPS ---- */
.steps { display:flex;flex-direction:column;gap:0; }
.step { display:flex;gap:20px;align-items:flex-start;position:relative;padding-bottom:28px; }
.step:not(:last-child)::before { content:'';position:absolute;left:21px;top:46px;bottom:0;width:2px;background:linear-gradient(to bottom,var(--emerald),transparent); }
.step__num { flex-shrink:0;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--emerald),var(--emerald-dark));color:var(--slate-dark);font-family:'Sora',sans-serif;font-weight:800;font-size:1.1rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,200,150,.35);position:relative;z-index:1;flex-shrink:0; }
.step__content { padding-top:8px; }
.step__content h3 { margin-bottom:6px; }
.step__content p { margin:0;color:var(--text-mid);font-size:.95rem; }
.step__content h3.white { color:var(--white); }
.step__content p.light { color:rgba(255,255,255,.7); }
.steps--compact .step { padding-bottom:16px;gap:14px; }
.steps--compact .step__num { width:34px;height:34px;font-size:.9rem; }
.steps--compact .step__content { padding-top:6px; }
.steps--compact .step__content p { font-size:.88rem;color:var(--text-mid); }
.steps--compact .step:not(:last-child)::before { left:16px;top:38px; }

/* ---- OVERVIEW / KEY FEATURES ---- */
.features-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:36px; }
.feature-card { background:rgba(255,255,255,.04);border:1px solid var(--border-dark);border-radius:var(--radius-md);padding:24px;display:flex;gap:16px;align-items:flex-start;transition:all var(--transition); }
.feature-card:hover { background:rgba(255,255,255,.08);border-color:rgba(0,200,150,.3); }
.feature-card__icon { flex-shrink:0;width:50px;height:50px;border-radius:12px;background:linear-gradient(135deg,rgba(0,200,150,.2),rgba(0,200,150,.05));border:1px solid rgba(0,200,150,.25);display:flex;align-items:center;justify-content:center;font-size:1.5rem; }
.feature-card h3 { color:var(--white);margin-bottom:6px;font-size:1rem; }
.feature-card p { color:rgba(255,255,255,.65);font-size:.9rem;margin:0; }

/* ---- HOW TO PLAY ---- */
.play-grid { display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start; }
.play-list { display:flex;flex-direction:column;gap:0; }
.play-item { display:flex;gap:16px;padding-bottom:22px;position:relative; }
.play-item:not(:last-child)::before { content:'';position:absolute;left:17px;top:38px;bottom:0;width:2px;background:linear-gradient(to bottom,var(--emerald),rgba(0,200,150,.1)); }
.play-item__dot { flex-shrink:0;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--emerald),var(--emerald-dark));display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-size:.85rem;font-weight:800;color:var(--slate-dark);box-shadow:0 3px 10px rgba(0,200,150,.3);z-index:1; }
.play-item__content { padding-top:6px; }
.play-item__content strong { display:block;color:var(--slate-dark);font-family:'Sora',sans-serif;font-size:.98rem;font-weight:700;margin-bottom:4px; }
.play-item__content p { font-size:.9rem;color:var(--text-muted);margin:0; }

/* Payout table */
.payout-wrap { border-radius:var(--radius-md);overflow:hidden;border:1.5px solid var(--border);box-shadow:var(--shadow-sm); }
.payout-table { width:100%;border-collapse:collapse;font-size:.9rem;background:var(--white); }
.payout-table th,.payout-table td { padding:11px 16px;text-align:left;border-bottom:1px solid var(--border); }
.payout-table th { background:var(--slate-dark);color:var(--white);font-family:'Sora',sans-serif;font-weight:600;font-size:.8rem; }
.payout-table tr:nth-child(even) td { background:var(--emerald-pale); }
.payout-table tr:hover td { background:#c8f5e8; }
.payout-table td:first-child { font-weight:600;color:var(--slate-dark); }
.payout-emerald { color:var(--emerald-dark);font-weight:700; }
.payout-amber   { color:var(--amber-dark);font-weight:700; }

/* ---- MOBILE SECTION ---- */
.app-section { display:grid;grid-template-columns:1fr 1.4fr;gap:50px;align-items:center; }
.app-section--reverse { direction:rtl; }
.app-section--reverse > * { direction:ltr; }
.app-section__visual { position:relative;text-align:center; }
.app-section__img { border-radius:var(--radius-lg);border:3px solid var(--border);box-shadow:var(--shadow-md);width:100%;max-width:400px;margin:0 auto;object-fit:cover; }
.app-section__img-label { margin-top:10px;font-size:.78rem;color:var(--text-muted);text-align:center; }
.app-section__content h2 { margin-bottom:14px; }
.app-section__platform-badge { display:inline-flex;align-items:center;gap:6px;font-family:'Sora',sans-serif;font-size:.8rem;font-weight:700;padding:5px 14px;border-radius:20px;margin-bottom:14px;letter-spacing:.03em; }
.android-badge { background:#e8f5e8;color:#2e7d32;border:1px solid #a5d6a7; }
.ios-badge     { background:#f0f0f5;color:#3a3a6e;border:1px solid #b0b0d0; }
.app-section__content .steps { margin:20px 0; }
.app-section__content .btn { margin-top:10px; }

/* ---- DEMO BLOCK ---- */
.demo-block { display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;background:linear-gradient(135deg,var(--slate-dark),var(--slate-mid));border-radius:var(--radius-xl);padding:48px;color:var(--white); }
.demo-block__content h2 { color:var(--white);margin-bottom:14px; }
.demo-block__content p { color:rgba(255,255,255,.78);margin-bottom:14px; }
.demo-block__visual { text-align:center; }
.demo-block__img { border-radius:var(--radius-lg);border:2px solid rgba(0,200,150,.25);width:100%;max-width:480px;margin:0 auto; }
.demo-block__img-label { margin-top:10px;font-size:.78rem;color:rgba(255,255,255,.5); }

/* ---- VERSIONS TABLE ---- */
.versions-table-wrap { overflow-x:auto;border-radius:var(--radius-md);border:1.5px solid var(--border);box-shadow:var(--shadow-sm); }
.versions-table { width:100%;border-collapse:collapse;font-size:.88rem;background:var(--white); }
.versions-table th,.versions-table td { padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top; }
.versions-table th { background:var(--slate-dark);color:var(--white);font-family:'Sora',sans-serif;font-weight:600;font-size:.8rem;white-space:nowrap; }
.versions-table tr:nth-child(even) td { background:var(--emerald-pale); }
.versions-table tr:hover td { background:#c8f5e8; }
.versions-table td:first-child { font-weight:700;color:var(--slate-dark); }
.versions-table td:nth-child(2) { color:var(--emerald-dark);font-weight:600; }
.ver-yes { display:inline-block;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:12px;background:#e8f5e8;color:#2e7d32;border:1px solid #a5d6a7; }
.ver-no  { display:inline-block;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:12px;background:#fce8e8;color:#c62828;border:1px solid #ef9a9a; }

/* ---- PAYMENT GRID ---- */
.payment-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.payment-card { background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:26px;text-align:center;transition:all var(--transition); }
.payment-card:hover { border-color:var(--emerald);box-shadow:var(--shadow-sm);transform:translateY(-2px); }
.payment-card__icon { font-size:2.5rem;margin-bottom:14px; }
.payment-card h3 { margin-bottom:10px;font-size:1rem; }
.payment-card p { font-size:.88rem;margin:0;color:var(--text-muted); }
.payment-tags { display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;justify-content:center; }
.payment-tags span { font-size:.74rem;font-weight:600;padding:2px 8px;border-radius:12px;background:var(--emerald-pale);color:var(--emerald-dark);border:1px solid rgba(0,200,150,.2); }

/* ---- TIPS ---- */
.tips-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:28px; }
.tip-card { background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:26px;position:relative;transition:all var(--transition); }
.tip-card:hover { border-color:var(--emerald);box-shadow:var(--shadow-sm); }
.tip-card__num { font-family:'Sora',sans-serif;font-size:3rem;font-weight:900;color:rgba(0,200,150,.1);line-height:1;position:absolute;top:14px;right:20px; }
.tip-card h3 { margin-bottom:8px;font-size:1.05rem; }
.tip-card p { font-size:.92rem;color:var(--text-muted);margin:0; }
.tip-note { background:#f0fdf9;border:1px solid rgba(0,200,150,.3);border-left:4px solid var(--emerald);border-radius:var(--radius-sm);padding:16px 20px;font-size:.9rem;color:var(--text-mid); }

/* ---- LEGAL ---- */
.legal-block { display:flex;gap:30px;align-items:flex-start;background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:36px; }
.legal-block__icon { font-size:3rem;flex-shrink:0;margin-top:4px; }
.legal-block__content h2 { margin-bottom:14px; }

/* ---- RESPONSIBLE ---- */
.responsible-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:24px; }
.responsible-tip { background:var(--white);border:1.5px solid var(--border);border-left:4px solid var(--emerald);border-radius:var(--radius-sm);padding:14px 18px;font-size:.9rem;font-weight:500;color:var(--slate-dark);display:flex;align-items:flex-start;gap:10px; }
.responsible-tip span { flex-shrink:0;font-size:1.1rem; }
.responsible-note { text-align:center;font-size:.9rem;color:var(--text-muted);max-width:600px;margin:0 auto; }

/* ---- FAQ ---- */
.faq-list { display:flex;flex-direction:column;gap:12px;max-width:820px;margin:0 auto; }
.faq-item { background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:border-color var(--transition); }
.faq-item[open] { border-color:var(--emerald); }
.faq-item summary { padding:18px 22px;cursor:pointer;font-family:'Sora',sans-serif;font-weight:600;font-size:.98rem;color:var(--slate-dark);list-style:none;display:flex;justify-content:space-between;align-items:center;user-select:none;transition:background var(--transition); }
.faq-item summary:hover { background:var(--emerald-pale); }
.faq-item summary::after { content:'+';font-size:1.4rem;color:var(--emerald);line-height:1;flex-shrink:0; }
.faq-item[open] summary::after { content:'−'; }
.faq-item p { padding:14px 22px 18px;font-size:.93rem;color:var(--text-muted);border-top:1px solid var(--border);margin:0; }

/* ---- CTA ---- */
.cta-banner { background:linear-gradient(135deg,var(--slate-dark),#0d2035);padding:64px 0;text-align:center; }
.cta-banner h2 { color:var(--white);margin-bottom:14px; }
.cta-banner p { color:rgba(255,255,255,.75);max-width:500px;margin:0 auto 28px; }

/* ---- FOOTER ---- */
.footer { background:var(--slate-dark);padding:50px 0 0;border-top:1px solid var(--border-dark); }
.footer__inner { display:grid;grid-template-columns:1.5fr 1fr 2fr;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--border-dark); }
.footer__brand .logo { margin-bottom:14px; }
.footer__brand p { font-size:.88rem;color:rgba(255,255,255,.5);line-height:1.6; }
.footer__links { display:flex;flex-direction:column;gap:8px; }
.footer__links h4 { color:var(--emerald);margin-bottom:6px;font-size:.9rem;letter-spacing:.05em; }
.footer__links a { color:rgba(255,255,255,.55);font-size:.88rem;transition:color var(--transition); }
.footer__links a:hover { color:var(--white); }
.footer__compliance h4 { color:var(--emerald);margin-bottom:12px;font-size:.9rem;letter-spacing:.05em; }
.footer__badges { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px; }
.footer__badge { background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.75);font-size:.75rem;font-weight:600;padding:4px 12px;border-radius:6px;font-family:'Sora',sans-serif; }
.footer__disclaimer { font-size:.78rem;color:rgba(255,255,255,.38);line-height:1.6;margin:0; }
.footer__bottom { background:rgba(0,0,0,.25);padding:14px 0;text-align:center; }
.footer__bottom span { font-size:.8rem;color:rgba(255,255,255,.35); }

/* ============================================================ RESPONSIVE ============================================================ */
@media (max-width:1024px) {
  .casino-card { display:grid;grid-template-columns:140px 1fr;grid-template-rows:auto auto;grid-template-areas:"logo info" "bonus actions";gap:0 16px;align-items:center; }
  .casino-card__logo-wrap { grid-area:logo;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border);border-bottom:none;padding-right:16px;height:100%; }
  .casino-card__info { grid-area:info;align-self:center; }
  .casino-card__bonus-block { grid-area:bonus;align-self:center;justify-self:center;width:100%;text-align:center;margin-top:12px; }
  .casino-card__actions { grid-area:actions;flex-direction:row;justify-content:flex-start;align-self:center;margin-top:12px; }
  .criteria-grid { grid-template-columns:repeat(2,1fr); }
  .play-grid { grid-template-columns:1fr; }
  .payment-grid { grid-template-columns:repeat(2,1fr); }
  .footer__inner { grid-template-columns:1fr 1fr; }
  .footer__compliance { grid-column:1 / -1; }
}
@media (max-width:768px) {
  .nav { display:none;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:var(--slate-dark);border-bottom:1px solid var(--border-dark);padding:12px 20px;gap:2px;box-shadow:0 8px 20px rgba(0,0,0,.4); }
  .nav--open { display:flex; }
  .nav__link { padding:10px 14px; }
  .burger { display:flex; }
  .hero__inner { grid-template-columns:1fr;text-align:center;gap:30px; }
  .hero__btns { justify-content:center; }
  .hero__stats-bar { justify-content:center; }
  .hero__card-wrap { display:none; }
  .hero__float-img { position:static;max-width:280px;margin:0 auto; }
  .casino-card { display:flex;flex-wrap:wrap;gap:16px;align-items:stretch; }
  .casino-card__logo-wrap { display:flex;flex-direction:column;align-items:center;justify-content:center;width:140px;flex-shrink:0;border-right:1px solid var(--border);border-bottom:none;padding-right:16px;gap:16px; }
  .casino-card__bonus-block { width:100%;align-self:center;text-align:center; }
  .casino-card__info { flex:1;min-width:0; }
  .casino-card__actions { flex:1;min-width:0;flex-direction:row;justify-content:flex-start;align-self:flex-end; }
  .casino-card__actions .btn { flex:1; }
  .criteria-grid { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr; }
  .tips-grid { grid-template-columns:1fr; }
  .responsible-grid { grid-template-columns:1fr; }
  .app-section { grid-template-columns:1fr; }
  .app-section--reverse { direction:ltr; }
  .app-section__visual { display:none; }
  .demo-block { grid-template-columns:1fr;padding:32px 24px;text-align:center; }
  .demo-block__visual { display:none; }
  .legal-block { flex-direction:column;gap:16px; }
  .payment-grid { grid-template-columns:1fr; }
  .footer__inner { grid-template-columns:1fr; }
  .footer__compliance { grid-column:auto; }
}
@media (max-width:480px) {
  h1 { font-size:1.7rem; }
  h2 { font-size:1.35rem; }
  .section { padding:40px 0; }
  .hero { padding:48px 0 40px; }
  .hero__stat { padding:12px 10px; }
  .hero__stat strong { font-size:1.35rem; }
  .casino-card { padding:18px 16px; }
  .casino-card__actions { flex-direction:column; }
  .versions-table { font-size:.78rem; }
  .versions-table th,.versions-table td { padding:8px 10px; }
}