:root {
	--bg: #1b2540;
	--bg-card: #263553;
	--bg-card-hover: #2e3f60;
	--bg-elevated: #2a3856;
	--border: rgba(255,255,255,.08);
	--border-hover: rgba(255,255,255,.14);
	--text: #e8e6e3;
	--text-dim: #8a8780;
	--text-muted: #5c5955;
	--accent: #05B761;
	--accent-light: #BCEB01;
	--accent-glow: rgba(5,183,97,.12);
	--accent-gradient: linear-gradient(135deg, #05B761, #BCEB01);
	--blue: #2979e6;
	--blue-hover: #1d63c6;
	--radius: 16px;
	--radius-sm: 8px;
	--wrap: 1120px;
}
* { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; scroll-padding-top:80px }
body {
	font-family:'Be Vietnam Pro',system-ui,sans-serif;
	font-size:15px; line-height:1.65; color:var(--text);
	background:var(--bg); overflow-x:hidden; padding-top:70px;
	-webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-decoration:none; transition:color .2s }
a:hover { color:var(--accent-light) }
strong,b { font-weight:600 }
p { margin:0 0 16px }
ul,ol { margin:0 0 16px; padding-left:20px }
li { margin:4px 0 }
img { max-width:100%; height:auto }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px }

/* ====== HEADER ====== */
.site-header {
	position:fixed; top:0; left:0; right:0; z-index:100;
	height:70px; display:flex; align-items:center;
	background:rgba(22,30,52,.92); backdrop-filter:blur(20px) saturate(1.4);
	border-bottom:1px solid var(--border);
}
.site-header .wrap { display:flex; align-items:center; width:100% }

/* ====== HERO ====== */
.hero {
	padding:24px 0 24px;
	background:linear-gradient(180deg, #162038 0%, var(--bg) 100%);
	border-bottom:1px solid var(--border);
	position:relative; overflow:hidden;
}
.hero::before {
	content:''; position:absolute; top:-120px; right:-80px;
	width:500px; height:500px; border-radius:50%;
	background:radial-gradient(circle, rgba(5,183,97,.06) 0%, transparent 70%);
	pointer-events:none;
}
.hero-inner { max-width:760px; position:relative }
.hero h1 {
	font-weight:800; font-size:clamp(30px,5vw,48px);
	line-height:1.1; letter-spacing:-.5px; margin-bottom:18px;
}
.hero h1 .accent { color:var(--accent) }
.hero-lead {
	font-size:16px; color:#c5c2bc; max-width:620px;
	margin-bottom:16px; line-height:1.7;
}
.hero-more { margin:0 0 20px; max-width:620px }
.hero-more-btn {
	display:inline-flex; align-items:center; gap:6px;
	background:none; border:0; padding:6px 0;
	font:inherit; font-size:14px; font-weight:600;
	color:var(--accent); cursor:pointer;
}
.hero-more-btn:hover { color:var(--accent-light) }
.hero-more-btn .arr { font-size:12px; line-height:1 }
.hero-more-content { display:none; margin-top:10px }
.hero-more.open .hero-more-open { display:none }
.hero-more.open > .hero-more-content { display:block }
.hero-more-btn.hero-more-open { margin-left:4px }
.hero-more-content .hero-lead-2 { margin:0 0 8px }
.author-bar {
	display:inline-flex; align-items:center; gap:12px;
	padding:10px 16px; background:var(--bg-card);
	border-radius:var(--radius); border:1px solid var(--border);
}
.author-avatar {
	width:42px; height:42px; border-radius:50%;
	object-fit:cover; display:block;
	border:2px solid var(--accent);
}
.author-meta { display:flex; flex-direction:column; gap:1px }
.author-name { font-weight:600; font-size:14px; color:var(--text) }
.author-date { font-size:12px; color:#9b96a0 }

/* ====== SECTIONS ====== */
.sec { padding:28px 0 32px }
.sec + .sec { border-top:1px solid var(--border) }
.sec-label,
.sec > h2 {
	font-weight:700; font-size:26px; line-height:1.25;
	letter-spacing:-.3px; margin:0 0 16px;
	color:#fff;
}
.sec > h2 {
	padding-bottom:10px;
	border-bottom:2px solid var(--accent);
	display:inline-block; padding-right:4px;
}
.sec h3 {
	font-size:19px; line-height:1.35;
	margin:28px 0 10px; font-weight:700; color:#fff;
	letter-spacing:-.1px;
}
.sec p { margin:0 0 14px; color:#d5d1cb }
.sec ul, .sec ol { margin:0 0 14px; color:#d5d1cb }
.sec li { margin:6px 0 }
.sec p a, .sec li a { color:var(--accent); text-decoration:underline; text-underline-offset:2px }
.sec p a:hover, .sec li a:hover { color:var(--accent-light) }
/* Lead paragraphs (whole paragraph is bold) */
.sec p:has(> strong:only-child) {
	background:rgba(5,183,97,.05);
	border-left:3px solid var(--accent);
	padding:12px 16px; margin:16px 0 18px;
	border-radius:0 8px 8px 0;
	color:#eceae6;
}
.sec p:has(> strong:only-child) strong { font-weight:600 }
/* Tables inside sections: tighter spacing */
.sec .table-wrap { margin:18px 0 22px }

/* ====== CASINO CARDS (screenshot style) ====== */
.card-stack { display:flex; flex-direction:column; gap:16px; margin:24px 0 }

.cas-card {
	display:grid;
	grid-template-columns: 220px 250px 1fr auto;
	gap:0;
	align-items:stretch;
	padding:16px 20px;
	background:var(--bg-card);
	border-radius:var(--radius);
	border:1px solid rgba(255,255,255,.04);
	transition:all .25s ease;
}
.cas-card:hover {
	background:var(--bg-card-hover);
	border-color:var(--border-hover);
	box-shadow:0 8px 32px rgba(0,0,0,.3);
}

/* Large image/thumbnail */
.cas-thumb {
	width:200px; height:130px;
	border-radius:12px; overflow:hidden;
	display:block; position:relative;
	background:var(--bg-elevated);
	align-self:center;
}
.cas-thumb img {
	width:100%; height:100%; object-fit:cover; display:block;
	transition:transform .3s;
}
.cas-thumb:hover img { transform:scale(1.04) }

/* Large category name */
.cas-name-col {
	padding:0 20px;
	display:flex; align-items:center;
	min-width:0;
}
.cas-name {
	font-weight:700; font-size:22px; color:var(--text);
	line-height:1.2; word-wrap:break-word;
}

/* Advantages with green checkmarks */
.cas-pros-col {
	padding:20px;
	display:flex; flex-direction:column; justify-content:center;
	min-width:0;
}
.cas-pros { list-style:none; padding:0; margin:0 }
.cas-pros li {
	display:flex; align-items:flex-start; gap:10px;
	font-size:15px; color:var(--text); margin:7px 0;
	line-height:1.5;
}
.cas-pros li .check-icon { margin-top:1px; flex-shrink:0 }
.cas-pros li .check-icon {
	width:22px; height:22px; border-radius:50%;
	background:var(--accent); color:#fff;
	display:inline-flex; align-items:center; justify-content:center;
	font-size:12px; font-weight:700; flex-shrink:0;
}

/* Blue CTA button */
.cas-cta-col {
	padding-left:16px;
	display:flex; align-items:center;
	flex-shrink:0;
}
.cas-cta {
	display:inline-block; padding:14px 32px;
	border-radius:10px; font-weight:700; font-size:16px;
	color:#fff; background:var(--blue);
	text-decoration:none; text-transform:uppercase;
	letter-spacing:.5px; white-space:nowrap;
	transition:background .2s, box-shadow .2s;
}
.cas-cta:hover {
	background:var(--blue-hover); color:#fff;
	box-shadow:0 4px 20px rgba(41,121,230,.3);
}

/* Thumbnail gradient variations */
.grad-1 { background:linear-gradient(135deg, #cc4400, #e8a020, #cc6600) }
.grad-2 { background:linear-gradient(135deg, #1a6b9a, #2aa0d4, #0d8fbb) }
.grad-3 { background:linear-gradient(135deg, #7b2d8e, #b044cc, #9333bb) }
.grad-4 { background:linear-gradient(135deg, #1a8a4a, #2ecc71, #27ae60) }
.grad-5 { background:linear-gradient(135deg, #c0392b, #e74c3c, #d63031) }

/* ====== TOC ====== */
.toc {
	margin:12px 0 0; padding:16px 20px;
	background:var(--bg-card); border-radius:var(--radius);
	border:1px solid var(--border);
}
.toc-title {
	font-weight:500; font-size:15px; margin-bottom:0;
	display:flex; align-items:center; justify-content:space-between;
	cursor:pointer; user-select:none; color:#b0aca5;
}
.toc:not(.collapsed) .toc-title { margin-bottom:12px }
.toc-title .arr {
	width:26px; height:26px; border-radius:6px; background:var(--bg-elevated);
	display:flex; align-items:center; justify-content:center;
	font-size:11px; color:var(--text-dim); transition:transform .3s;
}
.toc.collapsed .toc-list { display:none }
.toc.collapsed .toc-title .arr { transform:rotate(-90deg) }
.toc.collapsed { padding:14px 20px }
.toc-list { list-style:none; padding:0; margin:0; columns:2; column-gap:24px }
.toc-list li { margin:5px 0; break-inside:avoid }
.toc-list li a {
	font-size:13px; color:#b0aca5; display:flex;
	align-items:center; gap:8px; transition:color .2s;
}
.toc-list li a::before {
	content:''; width:4px; height:4px; border-radius:50%;
	background:var(--accent); flex-shrink:0;
}
.toc-list li a:hover { color:var(--accent) }

/* ====== TABLES ====== */
.table-wrap {
	border-radius:var(--radius); position:relative;
	border:1px solid var(--border); background:var(--bg-card); margin:24px 0;
	overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.table-wrap table { margin:0; width:100% }
.data-table { width:100%; border-collapse:collapse; font-size:13px; table-layout:auto }
.data-table th {
	text-align:left; padding:10px 12px; font-weight:600; font-size:11px;
	text-transform:uppercase; letter-spacing:.4px; color:#9b96a0;
	border-bottom:1px solid var(--border); background:var(--bg-elevated);
	word-wrap:break-word; overflow-wrap:break-word;
}
.data-table td {
	padding:10px 12px; border-bottom:1px solid var(--border); color:#e0ddd7;
	word-wrap:break-word; overflow-wrap:break-word; vertical-align:top;
}
.data-table tr:last-child td { border-bottom:none }
.data-table tr:hover td { background:rgba(255,255,255,.02) }
.tag-green { color:var(--accent); font-weight:600 }
.tag-red { color:#ff5577; font-weight:600 }

/* Keep tables horizontal on all screens — scroll inside wrapper when needed */
.table-wrap { -webkit-overflow-scrolling:touch }
.data-table th, .data-table td { white-space:normal }
@media(max-width:767px){
	.data-table { font-size:12px }
	.data-table th { padding:8px 10px; font-size:10px; letter-spacing:.2px }
	.data-table td { padding:8px 10px; font-size:12px; line-height:1.45 }
}

/* ====== HIGHLIGHT BOX ====== */
.highlight {
	padding:18px 22px; margin:20px 0;
	background:var(--accent-glow); border-radius:var(--radius);
	border-left:3px solid var(--accent);
}
.highlight p { margin:0; font-size:14px; color:#c5c2bc }
.highlight strong { color:#e8e6e3 }

/* ====== FAQ ====== */
.faq-list { margin:20px 0 }
.faq-item {
	margin:8px 0; background:var(--bg-card);
	border-radius:var(--radius); border:1px solid var(--border);
	overflow:hidden; transition:border-color .3s;
}
.faq-item:hover { border-color:var(--border-hover) }
.faq-q {
	padding:16px 20px; font-weight:600; font-size:15px;
	display:flex; align-items:center; justify-content:space-between;
	gap:12px; cursor:pointer; user-select:none; color:var(--text);
}
.faq-q .chev {
	width:26px; height:26px; border-radius:6px; background:var(--bg-elevated);
	display:flex; align-items:center; justify-content:center;
	font-size:11px; color:var(--text-dim); transition:all .3s; flex-shrink:0;
}
.faq-item.open .faq-q .chev { transform:rotate(180deg); background:var(--accent-glow); color:var(--accent) }
.faq-a {
	max-height:0; overflow:hidden;
	transition:max-height .4s ease,padding .3s;
	padding:0 20px; color:#c5c2bc; font-size:14px; line-height:1.7;
}
.faq-item.open .faq-a { max-height:300px; padding:0 20px 18px }

/* ====== FOOTER ====== */
.site-footer {
	margin-top:48px; padding:36px 0 28px;
	border-top:1px solid var(--border); background:#162038;
}
.footer-top {
	display:flex; justify-content:space-between; align-items:flex-start;
	gap:40px; margin-bottom:28px;
}
.footer-tagline { font-size:13px; color:#9b96a0; margin-top:10px; max-width:320px; line-height:1.6 }
.footer-badges { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start }
.footer-badge {
	padding:7px 12px; border-radius:var(--radius-sm);
	background:var(--bg-card); border:1px solid var(--border);
	font-size:12px; color:#b0aca5; display:flex; align-items:center; gap:5px;
}
.footer-divider { height:1px; background:var(--border); margin-bottom:20px }
.footer-bottom {
	display:flex; justify-content:space-between; align-items:center;
	flex-wrap:wrap; gap:12px;
}
.footer-links { display:flex; gap:20px }
.footer-links a { color:#9b96a0; font-size:12px }
.footer-links a:hover { color:var(--text) }
.footer-copy { font-size:12px; color:#807b75 }

.scroll-top {
	position:fixed; bottom:24px; right:24px; z-index:20;
	width:42px; height:42px; border-radius:10px; border:1px solid var(--border);
	background:var(--bg-card); color:var(--text); font-size:16px;
	cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.3);
	transition:all .2s; display:flex; align-items:center; justify-content:center;
}
.scroll-top:hover { background:var(--bg-elevated); border-color:var(--border-hover); transform:translateY(-2px) }

/* ====== RESPONSIVE ====== */
@media(max-width:1000px){
	.cas-card {
		grid-template-columns:1fr;
		gap:16px; padding:20px; text-align:center;
	}
	.cas-pros-col { align-items:stretch !important }
	.cas-pros { display:inline-block; text-align:left; margin:0 auto }
	.cas-pros li { justify-content:flex-start }
	.cas-thumb { width:100%; height:160px; }
	.cas-name-col { padding:0; justify-content:center }
	.cas-name { font-size:22px; text-align:center }
	.cas-pros-col { padding:0; align-items:center }
	.cas-pros li { white-space:normal }
	.cas-cta-col { padding:0; justify-content:center }
	.cas-cta { width:100%; text-align:center; padding:16px 32px }
	.toc-list { columns:1 }
	.footer-top { flex-direction:column; gap:20px }
}
@media(max-width:600px){
	.hero h1 { font-size:28px }
	.sec-label { font-size:22px }
	.cas-thumb { height:140px }
	.cas-thumb-title { font-size:18px }
	.cas-name { font-size:20px }
	.wrap { padding:0 16px }
	.table-wrap { border-radius:12px }
}