.elementor-21 .elementor-element.elementor-element-6baf634{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}:root{--page-title-display:none;}@media(min-width:768px){.elementor-21 .elementor-element.elementor-element-6baf634{--content-width:1200px;}}/* Start custom CSS for container, class: .elementor-element-6baf634 *//* ============================================
   CLEAN CSS (FULL) 2026 (LCP-FRIENDLY)
   FIXED + “cards darker” + split (2 columns) blocks
   PAGE BG: 90deg #2F485C,#FF4C29
   TEXT: white by default
   TABLES: dark text on light surface
   MOBILE: headings + text centered (lists readable)
   ============================================ */

/* ===== CSS VARIABLES ===== */
:root{
  /* Accent palette */
  --primary-color:#ffd700;      /* FIX */
  --secondary-color:#ff8c00;
  --accent-color:#ff4500;

  /* Backgrounds */
--gradient-page:linear-gradient(90deg,#2F485C,#283d47); /* FIX per your note */
  --gradient-cta:linear-gradient(90deg,#3D4052,#282A36,#09090C);

  /* Cards / surfaces (DARKER as you asked) */
  --card-bg:rgba(0,0,0,.22);
  --card-bg-2:rgba(0,0,0,.28);
  --card-border:rgba(255,255,255,.14);

  /* Light surfaces for tables */
  --surface-1:rgba(255,255,255,.66);
  --surface-2:rgba(255,255,255,.56);
  --surface-3:rgba(255,255,255,.72);

  /* Text */
  --text-on-dark:rgba(255,255,255,.88);
 --text-on-dark-2: rgba(255,215,0,.88);
  --text-dark:#0b0b0f;

  /* Borders */
  --border-color:rgba(0,0,0,.28);
  --border-color-2:rgba(0,0,0,.38);

  --success:#10b981;
  --danger:#ef4444;

  --shadow-sm:0 2px 8px rgba(0,0,0,.18);
  --shadow-md:0 12px 26px rgba(0,0,0,.22);
  --shadow-lg:0 18px 46px rgba(0,0,0,.28);

  --radius:14px;
}

/* ===== RESET ===== */
*{margin:0;padding:0;box-sizing:border-box;}
img{max-width:100%;height:auto;display:block;}
table{border-collapse:collapse;border-spacing:0;}
.wp-block-table, .elementor-widget-container table{width:auto;}

/* ===== BASE ===== */
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--gradient-page);
  color:var(--text-on-dark);
  line-height:1.65;
  font-size:16px;
}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  overflow-x:hidden;
}

/* Headings white */
h1,h2,h3,h4,h5,h6{color:#fff;}
h1{font-size:2.55rem;font-weight:900;line-height:1.12;margin:18px 0 14px;}
h2{font-size:2.05rem;font-weight:900;margin:0 0 18px;}
h3{font-size:1.45rem;font-weight:800;margin:18px 0 10px;}
h4{font-size:1.15rem;font-weight:800;margin:16px 0 10px;}

p{margin:0 0 14px;color:var(--text-on-dark-2);}
li{color:var(--text-on-dark-2);margin:0 0 8px;}
strong{color:#fff;font-weight:800;}

a{
  color:#fff;
  text-decoration:none;
  transition:opacity .2s ease,transform .2s ease;
}
a:hover{opacity:.9;}

/* Lists */
ul,ol{margin:12px 0 14px 20px;}
ul{padding-left:18px;}
ol{padding-left:20px;}

/* ===== SECTIONS ===== */
section{padding:20px 0;background:transparent;}

/* ===== CARDS (for your “wrap only”) ===== */
.content-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow-sm);
}
.content-card + .content-card{margin-top:16px;}
.content-card.is-strong{background:var(--card-bg-2);box-shadow:var(--shadow-md);}

.split{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
  align-items:center;
}

.split.is-50{grid-template-columns:1fr 1fr;}

.split-media{display:flex;justify-content:center;}
.split-media .image-placeholder{width:100%;max-width:520px;}

/* MOBILE: split всегда в колонку (текст сверху, картинка снизу) */
@media (max-width:768px){
  .split{
    display:flex;
    flex-direction:column;
    gap:14px;
    width:100%;
  }
  .split .split-body{order:1;}
  .split .split-media{order:2;}
  .split-media .image-placeholder{max-width:560px;}
}

.note-row{margin-top:10px;}

/* ===== HERO ===== */
.hero{padding:68px 0 46px;}
.hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  margin-bottom:14px;
}
.hero-text{flex:1 1 54%;text-align:left;}
.hero .lead{color:rgba(255,255,255,.92);font-size:1.05rem;margin-bottom:18px;}
.hero-image{flex:0 0 42%;display:flex;justify-content:flex-end;}

/* Images */
.image-placeholder{border-radius:12px;overflow:hidden;background:transparent;border:none;box-shadow:none;}
.image-placeholder img{border-radius:12px;outline:none;}

/* Hero image frame */
.hero-image .image-placeholder{
  border-radius:var(--radius);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--shadow-lg);
  max-width:520px;
  width:100%;
}
.hero-image .image-placeholder img{border-radius:var(--radius);}

/* Other image blocks */
.mobile-image,.game-screenshots,.payments-image,.security-image,.support-image,.bonus-image,.intro-image{
  display:flex;justify-content:center;margin:18px 0 10px;
}
.mobile-image .image-placeholder{max-width:720px;width:100%;}
.game-screenshots .image-placeholder{max-width:980px;width:100%;}
.payments-image .image-placeholder,
.security-image .image-placeholder,
.support-image .image-placeholder,
.bonus-image .image-placeholder,
.intro-image .image-placeholder{max-width:760px;width:100%;}

/* ===== CTA ===== */
.cta-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--gradient-cta);
  color:var(--primary-color);
  font-weight:900;
  font-size:1rem;
  line-height:1;
  padding:14px 34px;
  border-radius:12px;
  border:1px solid rgba(255,215,0,.30);
  box-shadow:0 10px 26px rgba(0,0,0,.30);
  transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease,border-color .15s ease;
}
.cta-button:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(0,0,0,.38);
  opacity:.98;
  border-color:rgba(255,215,0,.48);
  color:#fff;
}
.cta-button:active{transform:translateY(0);box-shadow:0 8px 18px rgba(0,0,0,.22);}
.cta-button.large{font-size:1.05sin5rem;padding:16px 40px;} /* keep visual; not critical */

/* ===== TABLE WRAPPER (always scroll safely) ===== */
.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--radius);
  border:1px solid var(--border-color-2);
  background:var(--surface-2);
  box-shadow:var(--shadow-sm);
  margin:16px 0 18px;
}
.table-wrap.is-wide{background:var(--surface-1);}
.table-wrap.is-scroll{padding:8px;background:var(--surface-1);}

/* Make sure the table never “pushes” viewport */
.table-wrap table{min-width:620px;}              /* forces scroll on mobile */
.table-wrap.is-wide table{min-width:100%;}       /* hero facts can fit */
.facts-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.facts-table thead th{
  background:var(--gradient-cta);
  color:var(--primary-color);
  text-align:left;
  font-weight:900;
  padding:12px 14px;
  white-space:nowrap;
  border-bottom:1px solid rgba(255,215,0,.26);
}
.facts-table td{
  padding:12px 14px;
  font-size:.95rem;
  color:rgba(0,0,0,.92);       /* dark text ON light surface */
  border-top:1px solid rgba(0,0,0,.14);
  vertical-align:top;
  word-break:break-word;
}
.facts-table td:first-child{
  font-weight:900;
  width:40%;
  color:rgba(0,0,0,.78);
  background:rgba(0,0,0,.10);
  border-right:1px solid rgba(0,0,0,.14);
}

/* ===== BONUS ===== */
.bonus-highlight{
  background:var(--card-bg-2);
  border:1px solid var(--card-border);
  padding:22px;
  border-radius:var(--radius);
  text-align:left;
  margin:18px 0 12px;
  box-shadow:var(--shadow-md);
}
.bonus-highlight h3{margin:0 0 8px;color:#fff;}
.bonus-highlight p,
.bonus-highlight,
.bonus-highlight li{color:var(--text-on-dark-2);}

/* ===== GAMES GRID ===== */
.games-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  margin:18px 0 10px;
}
@media (max-width:1024px){.games-grid{grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (max-width:768px){.games-grid{grid-template-columns:1fr;}}

.game-category{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  padding:22px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.game-category:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:rgba(255,215,0,.28);
}
.category-icon{font-size:2.6rem;margin:0 0 10px;text-align:center;}
.game-category h3{text-align:center;margin:0 0 8px;color:#fff;}
.game-category ul{list-style:none;margin:14px 0 0;padding:0;}
.game-category ul li{position:relative;padding-left:18px;margin:0 0 8px;color:var(--text-on-dark-2);}
.game-category ul li::before{content:"→";position:absolute;left:0;color:rgba(255,255,255,.55);font-weight:900;}
.provider-list{display:block;margin-top:12px;text-align:center;color:rgba(255,255,255,.70);}

/* ===== FAQ ===== */
.faq-item{
  margin:0 0 14px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--card-border);
  background:var(--card-bg);
  box-shadow:var(--shadow-sm);
}
.faq-question{
  padding:16px 48px 16px 18px;
  font-weight:900;
  cursor:pointer;
  position:relative;
  color:#fff;
}
.faq-question::after{
  content:"+";
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  font-size:22px;
  color:var(--primary-color);
  font-weight:900;
}
.faq-item.is-open .faq-question::after{content:"−";}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .32s ease,padding .32s ease;
  padding:0 18px;
  color:var(--text-on-dark-2);
  background:rgba(0,0,0,.14);
}
.faq-item.is-open .faq-answer{
  max-height:1200px;
  padding:16px 18px 18px;
  border-top:1px solid rgba(255,255,255,.10);
}

/* ===== PROS & CONS ===== */
.pros-cons-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0 0;}
@media (max-width:1024px){.pros-cons-grid{grid-template-columns:1fr;}}
.pros-box,.cons-box{
  background:var(--card-bg);
  border:2px solid;
  padding:22px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.pros-box{border-color:rgba(16,185,129,.75);}
.cons-box{border-color:rgba(239,68,68,.75);}
.pros-box h3,.cons-box h3{color:#fff;margin-top:0;}
.pros-box ul,.cons-box ul{list-style:none;margin:12px 0 0;padding:0;}
.pros-box li,.cons-box li{position:relative;padding-left:26px;margin:0 0 10px;color:var(--text-on-dark-2);}
.pros-box li::before{content:"✓";position:absolute;left:0;top:0;color:var(--success);font-weight:900;}
.cons-box li::before{content:"✗";position:absolute;left:0;top:0;color:var(--danger);font-weight:900;}

/* ===== MOBILE: center headings + text ===== */
@media (max-width:768px){
  body{font-size:15px;}
  .container{padding:0 16px;}
  section{padding:12px 0;}
  .hero{padding:32px 0 36px;}

  .hero-top{flex-direction:column;align-items:stretch;gap:14px;}
  .hero-text{text-align:center;}
  .hero-image{justify-content:center;}

  /* Center all headings + paragraphs */
  .container h1,.container h2,.container h3,.container h4,
  .container p{ text-align:center; }

  /* Lists: keep readable width, centered block */
  ul,ol{
    margin:12px auto 14px;
    max-width:520px;
    padding-left:0;
    text-align:left;
  }

  /* CTA full width */
  .cta-button{width:100%;max-width:520px;margin-left:auto;margin-right:auto;}

  /* Split cards -> stack */
  .split{grid-template-columns:1fr;}
}

/* Optional: sticky first col inside scroll tables on mobile */
@media (max-width:768px){
  .table-wrap.is-scroll .facts-table thead th:first-child,
  .table-wrap.is-scroll .facts-table tbody td:first-child{
    position:sticky;
    left:0;
    z-index:3;
  }
}
/* CTA в конце — отдельной строкой, по центру */
.cta-row{
  margin:18px 0 0;
  display:flex;
  justify-content:center;
}

.cta-row .cta-button{
  width:100%;
  max-width:520px;
}

/* на десктопе можно не растягивать на всю ширину */
@media (min-width:769px){
  .cta-row .cta-button{width:auto;}
}/* End custom CSS */