/*
Theme Name: Flatsome Child
Template: flatsome
Version: 1.6.0
*/

@import url('../flatsome/style.css');

:root {
  --vg-bg: #08080a;
  --vg-panel: #121214;
  --vg-panel-2: #17171a;
  --vg-red: #e11d2e;
  --vg-red-2: #ff4b57;
  --vg-soft: #ffd9dc;
  --vg-text: #ececee;
  --vg-dim: #a2a2aa;
  --vg-line: rgba(225, 29, 46, .3);
  --vg-content-width: 1180px;
  --vg-header-height: 90px;
  --vg-radius: 4px;
  --vg-section-spacing: 74px;
  --vg-card-gap: 22px;
  --vg-body-size: 16px;
  --vg-ticker-speed: 28s;
  --vg-header-bg: #0a0a0a;
  --vg-footer-bg: #08080a;
}

body, #wrapper, #main { background: var(--vg-bg); font-family: Sarabun, sans-serif; font-size: var(--vg-body-size); }
#main { color: var(--vg-text); }
.vg-header { position: sticky; top: 0; z-index: 100; background: var(--vg-header-bg); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.vg-header-inner { display: flex; align-items: center; gap: 30px; max-width: 1410px; min-height: var(--vg-header-height); margin: auto; padding: 0 24px; }
.vg-logo, .vg-footer-brand { color: transparent !important; background: linear-gradient(100deg, #fff, var(--vg-red-2) 55%, var(--vg-red)); -webkit-background-clip: text; background-clip: text; font-size: 32px; font-weight: 900; letter-spacing: -.04em; }
.vg-logo img { display: block; width: 176px; height: 55px; object-fit: contain; }
.vg-nav { display: flex; align-items: center; gap: 25px; flex: 1; }
.vg-nav a, .vg-mobile-nav a { color: #e8e8eb !important; font-size: 14px; font-weight: 700; }
.vg-nav a:hover, .vg-mobile-nav a:hover { color: var(--vg-red-2) !important; }
.vg-header-cta { padding: 11px 23px; color: #fff !important; border-radius: 999px; background: linear-gradient(135deg, var(--vg-red-2), var(--vg-red)); font-weight: 800; white-space: nowrap; }
.vg-menu-toggle, .vg-mobile-nav { display: none; }
.vg-ticker { display: flex; align-items: center; gap: 10px; padding: 9px 12px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.08); background: #111114; }
.vg-ticker-label { flex: 0 0 auto; padding: 8px 14px; color: #fff; border-radius: 999px; background: linear-gradient(135deg, var(--vg-red-2), var(--vg-red)); font-size: 12px; font-weight: 800; }
.vg-ticker-window { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.vg-ticker-track { display: flex; width: max-content; gap: 34px; color: #d5d5da; font-size: 13px; font-weight: 700; animation: vg-ticker var(--vg-ticker-speed) linear infinite; }
.vg-ticker-track span { padding-right: 34px; }
@keyframes vg-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.vg-welcome-banner { padding: 0 !important; background: #08080a; }
.vg-welcome-banner .ux-text { margin: 0 !important; }
.vg-welcome-banner img { display: block; width: 100%; height: auto; }
.vg-page { overflow: hidden; background: var(--vg-bg); color: var(--vg-text); line-height: 1.75; }
.vg-page *, .vg-page *::before, .vg-page *::after { box-sizing: border-box; }
.vg-page a { text-decoration: none; }
.vg-wrap { max-width: var(--vg-content-width); margin: auto; padding: 0 20px; }
.vg-section { padding: var(--vg-section-spacing) 0; border-top: 1px solid rgba(255,255,255,.05); }
.vg-hero { position: relative; padding: 86px 0 70px; background: radial-gradient(900px 420px at 78% 8%, rgba(225,29,46,.16), transparent 62%), radial-gradient(620px 380px at 8% 96%, rgba(255,75,87,.07), transparent 60%); }
.vg-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55; background-image: linear-gradient(rgba(225,29,46,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(225,29,46,.06) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(80% 62% at 50% 30%, #000, transparent 78%); }
.vg-hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: center; }
.vg-page .vg-hero-grid { width: 100% !important; max-width: var(--vg-content-width) !important; margin-left: auto !important; margin-right: auto !important; }
.vg-page .vg-hero-grid > .col { width: auto !important; max-width: none !important; flex-basis: auto !important; padding: 0 !important; }
.vg-page .vg-hero-grid > .col > .col-inner { height: 100%; padding: 0 !important; }
.vg-page .vg-hero-grid .vg-panel { width: 100%; height: 100%; }
.vg-page .vg-hero-grid .col-inner { min-width: 0; }
.vg-tag { display: inline-block; padding: 6px 14px; margin-bottom: 20px; color: var(--vg-soft); border: 1px solid var(--vg-line); background: rgba(225,29,46,.06); border-radius: 999px; font-size: 13px; }
.vg-hero h1 { margin: 0 0 18px; color: #fff; font-size: clamp(30px, 5vw, 50px); line-height: 1.18; }
.vg-hero h1 strong { background: linear-gradient(100deg, #fff, #ff5a63 45%, var(--vg-red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vg-lead { max-width: 44em; color: #b9b9c4; font-size: 17px; }
.vg-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.vg-btn { display: inline-block; padding: 14px 30px; border-radius: var(--vg-radius); font-weight: 700; transition: .2s; }
.vg-btn-primary { color: #fff !important; background: linear-gradient(135deg, var(--vg-red-2), var(--vg-red)); box-shadow: 0 8px 26px rgba(225,29,46,.28); }
.vg-btn-primary:hover { color: #fff !important; transform: translateY(-2px); }
.vg-btn-secondary { color: var(--vg-soft) !important; border: 1px solid var(--vg-line); }
.vg-btn-secondary:hover { color: #fff !important; border-color: var(--vg-red); }
.vg-panel, .vg-card, .vg-step, .vg-promo, .vg-faq details { background: linear-gradient(160deg, var(--vg-panel-2), #0b0b0d); border: 1px solid rgba(255,255,255,.08); }
.vg-panel { padding: 26px; position: relative; }
.vg-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--vg-red), transparent); }
.vg-panel h2 { margin: 0 0 16px; color: var(--vg-soft); font-size: 15px; }
.vg-list { margin: 0; padding: 0; list-style: none; }
.vg-list li { padding: 13px 0; border-top: 1px solid rgba(255,255,255,.06); color: #cfcfd8; }
.vg-list li:first-child { border-top: 0; padding-top: 0; }
.vg-rule { width: 56px; height: 3px; margin-bottom: 18px; background: linear-gradient(90deg, var(--vg-red-2), var(--vg-red), transparent); }
.vg-head { max-width: 660px; margin-bottom: 42px; }
.vg-head h2 { margin: 0 0 8px; color: #fff; font-size: clamp(24px, 3.4vw, 36px); }
.vg-head p, .vg-card p, .vg-step p, .vg-promo p, .vg-faq p { color: var(--vg-dim); }
.vg-cards, .vg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vg-card-gap); }
.vg-card, .vg-step { padding: 28px 26px; transition: .2s; }
.vg-card:hover { border-color: var(--vg-line); transform: translateY(-3px); }
.vg-card h3, .vg-step h3, .vg-promo h3 { margin: 0 0 8px; color: #fff; font-size: 19px; }
.vg-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; color: var(--vg-red-2); border: 1px solid var(--vg-line); background: rgba(225,29,46,.07); font-size: 22px; }
.vg-link { color: var(--vg-red-2) !important; font-weight: 700; }
.vg-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--vg-line); }
.vg-stat { padding: 30px 22px; text-align: center; background: linear-gradient(180deg, #141416, #0a0a0c); }
.vg-num { display: block; color: var(--vg-red-2); font-size: clamp(28px, 4vw, 40px); font-weight: 800; }
.vg-stat strong { display: block; color: #fff; }
.vg-stat span { color: var(--vg-dim); font-size: 13px; }
.vg-step::before { display: block; margin-bottom: 12px; color: rgba(225,29,46,.55); content: counter(vg-step, decimal-leading-zero); counter-increment: vg-step; font-size: 26px; font-weight: 800; }
.vg-steps { counter-reset: vg-step; }
.vg-promos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--vg-card-gap); }
.vg-promo { padding: 30px; background: linear-gradient(135deg, rgba(225,29,46,.1), rgba(12,12,14,.9) 55%); }
.vg-kicker { display: inline-block; padding: 5px 12px; margin-bottom: 14px; color: #fff; background: linear-gradient(135deg, var(--vg-red-2), var(--vg-red)); font-size: 12px; font-weight: 700; }
.vg-faq { max-width: 860px; }
.vg-faq details { margin-bottom: 12px; }
.vg-faq summary { padding: 18px 22px; cursor: pointer; color: #fff; font-size: 16px; font-weight: 700; }
.vg-faq p { padding: 0 22px 20px; margin: 0; }
.vg-cta { padding: 70px 30px; text-align: center; border: 1px solid var(--vg-line); background: radial-gradient(700px 300px at 50% 0, rgba(225,29,46,.16), transparent 70%), var(--vg-panel-2); }
.vg-cta h2 { color: #fff; }
.vg-cta .vg-actions { justify-content: center; }
.vg-footer { padding: 58px 0 0; background: var(--vg-footer-bg); color: var(--vg-text); border-top: 1px solid rgba(255,255,255,.05); }
.vg-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; }
.vg-footer-brand { display: inline-block; margin-bottom: 14px; }
.vg-footer-about { max-width: 30em; color: #9a9aa2; font-size: 14px; }
.vg-footer-contact { display: inline-block; padding: 9px 16px; color: #fff !important; border: 1px solid rgba(225,29,46,.5); border-radius: var(--vg-radius); background: rgba(225,29,46,.1); font-size: 13px; font-weight: 700; }
.vg-footer-col { display: flex; flex-direction: column; gap: 10px; }
.vg-footer-col h3 { margin: 0; color: #fff; font-size: 15px; }
.vg-footer-col i { width: 34px; height: 2px; margin-bottom: 5px; background: linear-gradient(90deg, var(--vg-red-2), transparent); }
.vg-footer-col a, .vg-footer-col p { margin: 0; color: #9a9aa2 !important; font-size: 14px; }
.vg-footer-col a:hover { color: var(--vg-red-2) !important; }
.vg-footer-bar { display: flex; justify-content: space-between; gap: 15px; padding: 20px 20px 26px; border-top: 1px solid rgba(255,255,255,.08); color: #75757d; font-size: 13px; }
.vg-footer-bar span:last-child { display: flex; gap: 22px; }
.ai-site, body.page .ai-page { min-height: 60vh; background: var(--vg-bg); color: var(--vg-text); }
.ai-page-title { padding: 72px 20px 48px; text-align: center; background: linear-gradient(135deg, color-mix(in srgb, var(--vg-red) 15%, var(--vg-bg)), var(--vg-bg)); }
.ai-page-title h1 { margin: 0 0 10px; color: var(--vg-text); font-size: clamp(34px, 6vw, 64px); }
.ai-page-title p { max-width: 720px; margin: auto; color: var(--vg-dim); font-size: 18px; }
.ai-page > section, .ai-page > div { max-width: var(--vg-content-width); margin: 0 auto; padding: var(--vg-section-spacing) 20px; }
.ai-page > section:nth-child(even) { background: color-mix(in srgb, var(--vg-panel) 80%, transparent); }
.ai-page h2, .ai-page h3 { color: var(--vg-text); }
.ai-page p, .ai-page li { color: var(--vg-dim); }
.ai-page a { color: var(--vg-red); font-weight: 700; }
.ai-site-header .ai-site-logo { color: var(--vg-red) !important; background: none; -webkit-text-fill-color: initial; }
.ai-site-footer { grid-template-columns: 2fr 1fr; }
/* AI layout DNA: each generation chooses one class from every family. */
.vg-header.ai-header-floating { top: 14px; width: min(calc(100% - 28px), 1360px); margin: 0 auto 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: color-mix(in srgb, var(--vg-header-bg) 82%, transparent); box-shadow: 0 18px 60px rgba(0,0,0,.28); }
.ai-header-floating .vg-header-inner { min-height: calc(var(--vg-header-height) - 12px); }
.vg-header.ai-header-split .vg-header-inner { max-width: none; padding-left: 4vw; padding-right: 4vw; }
.ai-header-split .vg-nav { justify-content: center; padding-left: 6vw; }
.vg-header.ai-header-centered .vg-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; max-width: var(--vg-content-width); }
.ai-header-centered .ai-site-logo { grid-column: 2; grid-row: 1; }
.ai-header-centered .vg-nav { grid-column: 1; grid-row: 1; justify-content: flex-start; }
.ai-header-centered .vg-header-cta { grid-column: 3; grid-row: 1; justify-self: end; }
.vg-header.ai-header-compact .vg-header-inner { min-height: 62px; }
.ai-header-compact .ai-site-logo { font-size: 25px; letter-spacing: .02em; }
.vg-footer.ai-footer-centered { text-align: center; }
.ai-footer-centered .ai-site-footer { grid-template-columns: 1fr; justify-items: center; }
.ai-footer-centered .vg-footer-about { margin-left: auto; margin-right: auto; }
.ai-footer-centered .vg-footer-col { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.ai-footer-centered .vg-footer-col h3, .ai-footer-centered .vg-footer-col i { flex-basis: 100%; }
.ai-footer-centered .vg-footer-bar { justify-content: center; }
.ai-footer-split .ai-site-footer { grid-template-columns: 1fr 1fr; align-items: end; min-height: 280px; }
.ai-footer-cta { border-top: 0; background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--vg-red) 28%, transparent), transparent 58%), var(--vg-footer-bg); }
.ai-footer-cta .ai-site-footer { padding-top: 88px; padding-bottom: 70px; }
.ai-footer-mega .ai-site-footer { grid-template-columns: minmax(300px, 2fr) minmax(220px, 1fr); }
.ai-page .ai-hero { position: relative; max-width: none; min-height: clamp(600px, 72vh, 820px); display: grid; align-content: center; padding: 110px max(20px, calc((100vw - var(--vg-content-width)) / 2)); overflow: hidden; isolation: isolate; background-image: linear-gradient(90deg, rgba(3,3,7,.98) 0%, rgba(3,3,7,.85) 30%, rgba(3,3,7,.2) 66%, rgba(3,3,7,.05) 100%), url('assets/images/slot-hero-premium.webp') !important; background-size: cover !important; background-position: center right !important; }
.ai-page .ai-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(120deg, transparent 20%, var(--vg-red) 21%, transparent 22%, transparent 78%, var(--vg-red-2) 79%, transparent 80%); background-size: 150px 150px; }
.ai-page .ai-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 150px; z-index: -1; background: linear-gradient(transparent, var(--vg-bg)); }
.ai-page .ai-hero > * { position: relative; max-width: 680px; }
.ai-page .ai-hero h1, .ai-page .ai-hero h2 { margin: 0 0 20px; color: #fff; font-size: clamp(46px, 6.4vw, 86px); line-height: .98; letter-spacing: -.045em; text-shadow: 0 4px 34px rgba(0,0,0,.8), 0 0 42px color-mix(in srgb, var(--vg-red) 32%, transparent); }
.ai-page .ai-hero p { font-size: clamp(17px, 2vw, 21px); }
.ai-eyebrow { display: inline-flex; width: fit-content; padding: 7px 14px; margin-bottom: 20px; border: 1px solid color-mix(in srgb, var(--vg-red-2) 65%, transparent); border-radius: 99px; color: #ffe9aa !important; background: rgba(0,0,0,.38); font-size: 12px !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(8px); }
.ai-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.ai-page .ai-btn, .ai-page a.ai-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 160px; padding: 15px 30px; border: 1px solid var(--vg-red); border-radius: var(--vg-radius); color: #fff; background: rgba(0,0,0,.42); text-decoration: none; backdrop-filter: blur(9px); transition: transform .2s, box-shadow .2s, border-color .2s; }
.ai-page .ai-btn-primary, .ai-page a.ai-btn-primary { background: linear-gradient(135deg, var(--vg-red-2), var(--vg-red)); box-shadow: 0 10px 34px color-mix(in srgb, var(--vg-red) 35%, transparent); }
.ai-page .ai-btn:hover { transform: translateY(-3px) scale(1.02); border-color: var(--vg-red-2); }
.ai-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vg-card-gap); }
.ai-page .ai-card, .ai-page .ai-promo, .ai-page .ai-step { position: relative; overflow: hidden; padding: 30px; border: 1px solid color-mix(in srgb, var(--vg-red) 28%, #29262f); border-radius: max(14px, var(--vg-radius)); background: linear-gradient(145deg, color-mix(in srgb, var(--vg-panel) 92%, #fff), color-mix(in srgb, var(--vg-bg) 94%, #531020)); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 18px 50px rgba(0,0,0,.16); transition: transform .25s, border-color .25s, box-shadow .25s; }
.ai-page .ai-card::before { content: ''; position: absolute; width: 110px; height: 110px; top: -65px; right: -55px; border-radius: 50%; background: var(--vg-red); filter: blur(34px); opacity: .2; }
.ai-page .ai-card:hover { transform: translateY(-4px); border-color: var(--vg-red); box-shadow: 0 12px 34px rgba(0,0,0,.28); }
.ai-card-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border: 1px solid color-mix(in srgb, var(--vg-red-2) 60%, transparent); border-radius: 14px; color: #ffe59a; background: color-mix(in srgb, var(--vg-red) 18%, transparent); font-size: 25px; box-shadow: inset 0 0 18px color-mix(in srgb, var(--vg-red) 15%, transparent); }
/* A trust section may contain a heading plus a list, not only cards. */
.ai-site .ai-page .ai-trust-strip { display: block; max-width: none; margin: 0; position: relative; }
.ai-site .ai-trust-strip > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; margin: 24px 0 0; padding: 0; list-style: none; }
.ai-site .ai-trust-strip > ul > li, .ai-site .ai-trust-strip > div { padding: 24px; border: 1px solid color-mix(in srgb, var(--vg-text) 18%, transparent); border-radius: var(--vg-radius); background: var(--vg-panel); }
.ai-hero-split .ai-page .ai-hero { width: min(calc(100% - 40px), 1440px); max-width: 1440px; min-height: 650px; margin: 28px auto 0; border: 1px solid rgba(255,255,255,.1); border-radius: 28px; background-size: auto 100% !important; background-color: #07070a; }
.ai-hero-editorial .ai-page .ai-hero { align-content: end; min-height: 760px; padding-bottom: 130px; background-position: 65% center !important; }
.ai-hero-editorial .ai-page .ai-hero > * { max-width: 920px; }
.ai-hero-editorial .ai-page .ai-hero h1, .ai-hero-editorial .ai-page .ai-hero h2 { font-family: Georgia, serif; font-weight: 500; font-style: italic; }
.ai-hero-portal .ai-page .ai-hero { place-content: center; text-align: center; background-position: center !important; }
.ai-hero-portal .ai-page .ai-hero::before { opacity: .55; background: radial-gradient(circle at center, transparent 0 20%, rgba(0,0,0,.85) 66%); }
.ai-hero-portal .ai-page .ai-hero > * { margin-left: auto; margin-right: auto; }
.ai-hero-portal .ai-actions { justify-content: center; }
.ai-layout-bento .ai-grid > :first-child { grid-column: span 2; }
.ai-layout-bento .ai-grid > :first-child h3 { font-size: 27px; }
.ai-layout-showcase .ai-page > section { max-width: 1380px; }
.ai-layout-showcase .ai-card { min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; }
.ai-layout-layered .ai-page > section { position: relative; margin-top: -1px; }
.ai-layout-layered .ai-page > section:nth-child(even) { width: min(calc(100% - 32px), 1260px); border: 1px solid rgba(255,255,255,.07); border-radius: 28px; box-shadow: 0 28px 80px rgba(0,0,0,.22); }
.ai-page .ai-cta { max-width: var(--vg-content-width); margin: var(--vg-section-spacing) auto; padding: 70px 24px; text-align: center; border: 1px solid var(--vg-red); border-radius: var(--vg-radius); background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--vg-red) 28%, transparent), transparent 65%), var(--vg-panel); }
@media (max-width: 849px) { .vg-header.ai-header-floating { top: 6px; width: calc(100% - 12px); margin-bottom: 6px; } .ai-header-centered .vg-header-inner { display: flex; } .ai-grid, .ai-games { grid-template-columns: 1fr 1fr; } .ai-trust-strip { grid-template-columns: 1fr 1fr; } .ai-page .ai-hero, .ai-hero-split .ai-page .ai-hero { min-height: 600px; width: 100%; margin-top: 0; border-radius: 0; background-size: cover !important; background-position: 62% center !important; } }
@media (max-width: 640px) { .ai-grid, .ai-games { grid-template-columns: 1fr; } .ai-layout-bento .ai-grid > :first-child { grid-column: auto; } .ai-layout-asymmetric .ai-grid > :nth-child(3n + 1) { transform: none; } .ai-page .ai-hero { min-height: 570px; padding-top: 80px; padding-bottom: 90px; background-position: 68% center !important; } .ai-page .ai-hero::before { background: rgba(3,3,7,.42); opacity: 1; } .ai-trust-strip { margin-top: 0 !important; } .ai-footer-split .ai-site-footer, .ai-footer-mega .ai-site-footer { grid-template-columns: 1fr; } }

/* Production casino renderer — owns geometry; AI only selects layout tokens. */
body:has(.ai-site) { background: #07070d; }
.ai-site { --ai-gold: #f8c84b; --ai-violet: #a854f6; --ai-surface: #12101d; --ai-surface-2: #191426; --ai-border: rgba(248,200,75,.22); overflow: clip; background: radial-gradient(circle at 15% 12%, rgba(168,84,246,.08), transparent 28%), #07070d; }
.ai-site .ai-page { width: 100%; max-width: none; }
.ai-site .ai-page > section { width: 100%; max-width: none; margin: 0; padding: 100px max(24px, calc((100vw - 1180px)/2)); }
.ai-site .ai-page > .ai-hero { padding-top: 120px; padding-bottom: 130px; }
.ai-site .ai-hero-inner { width: min(100%, 1180px); margin: auto; }
.ai-site .ai-hero-inner > p { max-width: 650px; margin: 0 0 28px; color: #cbc5d8; }
.ai-site .ai-glow { color: transparent; background: linear-gradient(100deg, #fff1ad, var(--ai-gold) 40%, #d08cff 88%); -webkit-background-clip: text; background-clip: text; }
.ai-site .ai-section-head { max-width: 670px; margin: 0 0 46px; }
.ai-site .ai-section-head h2 { margin: 7px 0 12px; color: #fff; font-size: clamp(32px, 4vw, 52px); line-height: 1.08; letter-spacing: -.035em; }
.ai-site .ai-section-head > p:last-child { margin: 0; color: #aaa3b9; font-size: 17px; }
.ai-site .ai-kicker { margin: 0; color: #bd78ff; font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.ai-site .ai-grid { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; grid-auto-rows: minmax(230px, auto); gap: 20px; }
.ai-site .ai-card { min-width: 0; min-height: 230px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 28px; text-align: left; }
.ai-site .ai-card--wide { grid-column: span 2; }
.ai-site .ai-card--tall { grid-row: span 2; min-height: 480px; }
.ai-site .ai-card h3 { margin: 0 0 9px; color: #fff; font-size: 23px; }
.ai-site .ai-card p { margin: 0 0 16px; color: #aaa3b9; }
.ai-site .ai-card-link { margin-top: auto; padding-top: 16px; color: var(--ai-gold); }
.ai-site .ai-section--alt { background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); border-top: 1px solid rgba(255,255,255,.045); border-bottom: 1px solid rgba(255,255,255,.045); }
.ai-site .ai-promo { min-height: 430px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; padding: clamp(34px, 6vw, 74px); border-color: var(--ai-border); border-radius: 30px; background: radial-gradient(circle at 85% 30%, rgba(168,84,246,.3), transparent 34%), linear-gradient(125deg, #25111d, #120e20 62%, #25143c); }
.ai-site .ai-promo-body { max-width: 620px; }
.ai-site .ai-promo h2 { margin: 14px 0; color: #fff; font-size: clamp(34px, 4vw, 56px); line-height: 1.05; }
.ai-site .ai-promo-tag { color: var(--ai-gold); font-weight: 800; }
.ai-site .ai-promo-art { display: grid; place-items: center; }
.ai-site .ai-big { color: var(--ai-gold); font-size: clamp(140px, 18vw, 260px); font-weight: 900; line-height: .8; text-shadow: 0 0 70px rgba(248,200,75,.34); transform: rotate(8deg); }
.ai-site .ai-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ai-site .ai-step { min-width: 0; padding: 32px; }
.ai-site .ai-step-num { margin: 0 0 42px; background: linear-gradient(135deg, var(--ai-gold), #ff9051); box-shadow: 0 10px 28px rgba(248,200,75,.2); }
.ai-site .ai-step h3 { color: #fff; font-size: 22px; }
.ai-site .ai-step p { color: #aaa3b9; }
.ai-site section.ai-trust { display: block; }
.ai-site section.ai-trust > .ai-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ai-site .ai-tile { min-width: 0; display: flex; gap: 18px; padding: 28px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: var(--ai-surface); }
.ai-site .ai-tile-ic { flex: 0 0 auto; color: var(--ai-gold); font-size: 27px; }
.ai-site .ai-tile h3 { margin: 0 0 7px; color: #fff; font-size: 19px; }
.ai-site .ai-tile p { margin: 0; color: #aaa3b9; }
.ai-site .ai-faq { max-width: 880px; margin: auto; }
.ai-site .ai-faq details { margin: 0 0 12px; padding: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: var(--ai-surface); overflow: hidden; }
.ai-site .ai-faq summary { padding: 21px 24px; color: #fff; }
.ai-site .ai-faq details p { padding: 0 24px 22px; margin: 0; color: #aaa3b9; }
.ai-site .ai-cta-section { padding-top: 70px; padding-bottom: 120px; }
.ai-site .ai-cta { max-width: 1180px; min-height: 370px; display: grid; place-content: center; margin: auto; padding: 60px; border-radius: 30px; background: radial-gradient(circle at 50% 0, rgba(248,200,75,.22), transparent 55%), radial-gradient(circle at 90% 80%, rgba(168,84,246,.25), transparent 34%), #14101e; }
.ai-site .ai-cta h2 { margin: 0 0 12px; color: #fff; font-size: clamp(34px, 5vw, 58px); }
.ai-site .ai-cta p { color: #bcb5c9; font-size: 18px; }
.vg-header:has(+ .ai-site), .vg-header { border-color: rgba(248,200,75,.16); }
.ai-site-logo { color: var(--ai-gold, #f8c84b) !important; font-size: 30px !important; }
@media (max-width: 900px) { .ai-site .ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-site .ai-card--tall { grid-row: auto; min-height: 230px; } .ai-site .ai-promo { grid-template-columns: 1fr; } .ai-site .ai-promo-art { display: none; } }
@media (max-width: 640px) { .ai-site .ai-page > section { padding: 68px 20px; } .ai-site .ai-page > .ai-hero { padding-top: 90px; padding-bottom: 90px; } .ai-site .ai-grid, .ai-site .ai-steps, .ai-site section.ai-trust > .ai-trust { grid-template-columns: 1fr; } .ai-site .ai-card--wide { grid-column: auto; } .ai-site .ai-promo, .ai-site .ai-cta { min-height: 0; padding: 36px 24px; border-radius: 20px; } }
@media (max-width: 991px) { .vg-hero-grid { grid-template-columns: 1fr; } .vg-cards, .vg-steps { grid-template-columns: repeat(2, 1fr); } .vg-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 849px) { .vg-header-inner { min-height: 70px; justify-content: space-between; } .vg-nav, .vg-header-cta { display: none; } .vg-menu-toggle { display: block; padding: 8px 12px; color: #fff; border: 1px solid var(--vg-line); border-radius: 4px; background: transparent; } .vg-mobile-nav { flex-direction: column; gap: 0; padding: 8px 24px 16px; border-top: 1px solid rgba(255,255,255,.08); background: #0a0a0a; } .vg-mobile-nav.is-open { display: flex; } .vg-mobile-nav a { padding: 10px 0; } }
@media (max-width: 640px) { .vg-section { padding: 54px 0; } .vg-cards, .vg-steps, .vg-promos { grid-template-columns: 1fr; } .vg-btn { width: 100%; text-align: center; } .vg-footer-grid { grid-template-columns: 1fr; gap: 28px; } .vg-footer-bar { flex-direction: column; align-items: flex-start; } .vg-footer-bar span:last-child { gap: 16px; flex-wrap: wrap; } }

/* Shared generation contract: responsive geometry and theme-selected palette. */
.ai-site, .ai-site *, .ai-site *::before, .ai-site *::after { box-sizing: border-box; }
.ai-site { --ai-gold: var(--vg-red-2); --ai-violet: var(--vg-red); --ai-surface: var(--vg-panel); background: var(--vg-bg); color: var(--vg-text); overflow-wrap: anywhere; }
.ai-site .ai-page { margin: 0; padding: 0; }
.ai-site .ai-page > section { padding: clamp(48px, 7vw, 100px) max(20px, calc((100% - var(--vg-content-width, 1180px)) / 2)); }
.ai-site .ai-page :is(h1,h2,h3,summary) { color: var(--vg-text); line-height: 1.35; letter-spacing: normal; }
.ai-site .ai-page :is(p,li) { color: var(--vg-dim); line-height: 1.8; }
.ai-site .ai-page .ai-hero { background-image: radial-gradient(ellipse at 85% 30%, color-mix(in srgb, var(--vg-red) 24%, transparent), transparent 60%), linear-gradient(135deg, var(--vg-bg), var(--vg-panel)) !important; min-height: 520px; }
.ai-site .ai-page .ai-hero :is(h1,h2) { font-size: clamp(32px, 5.8vw, 76px); text-shadow: none; }
.ai-site .ai-page .ai-hero > * { min-width: 0; max-width: min(100%, 820px); }
.ai-site .ai-page :is(.ai-promo,.ai-cta) { background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--vg-red) 18%, transparent), transparent 65%), var(--vg-panel); }
.ai-site .ai-page .ai-promo { display: block; }
.ai-site .ai-page :is(.ai-grid,.ai-steps,.ai-actions) > * { min-width: 0; max-width: 100%; }
.ai-site .ai-page .ai-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.ai-site .ai-page :is(.ai-btn,a.ai-btn) { max-width: 100%; min-width: 0; min-height: 44px; white-space: normal; text-align: center; }
.ai-site a:focus-visible, .ai-site summary:focus-visible { outline: 3px solid var(--vg-red-2); outline-offset: 4px; }
.ai-site .ai-page summary { cursor: pointer; min-height: 44px; }
.ai-site .ai-page img { max-width: 100%; height: auto; }
@media (max-width: 849px) {
  .ai-site .ai-page .ai-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ai-site .ai-page .ai-card--tall { grid-row: auto; min-height: 230px; }
  .ai-site .ai-page .ai-hero { width: 100%; margin: 0; border-radius: 0; min-height: 440px; }
  .ai-site-footer, .ai-footer-mega .ai-site-footer, .ai-footer-split .ai-site-footer { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
  .ai-site .ai-page :is(.ai-grid,.ai-steps,.ai-trust) { grid-template-columns: minmax(0,1fr); }
  .ai-site .ai-page .ai-grid > * { grid-column: auto; grid-row: auto; }
  .ai-site .ai-page .ai-actions > a { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-site *, .ai-site *::before, .ai-site *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (min-width: 850px) {
  .ai-site.ai-layout-bento .ai-grid > :first-child { grid-column: span 2; }
  .ai-site.ai-layout-asymmetric .ai-grid { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); }
  .ai-site.ai-layout-showcase .ai-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ai-site.ai-layout-layered .ai-page > section:nth-child(even) { background-color: var(--vg-panel); border-radius: 24px; }
}

/* Section headings must never consume a card column. Support both direct cards
   and nested grids, including previously generated WordPress content. */
.ai-site .ai-page section.ai-games { display: block; }
.ai-site .ai-page :is(.ai-grid,.ai-steps) > :is(h2,h3,p,.ai-section-head,.ai-grid,.ai-steps) { grid-column: 1 / -1; }
.ai-site .ai-page > section > :is(h2,h3) { margin: 0 0 28px; font-size: clamp(26px, 3vw, 40px); }
.ai-site .ai-page .ai-grid { grid-auto-flow: row; grid-auto-rows: auto; }
.ai-site .ai-page .ai-card { justify-content: flex-start; }
.ai-site .ai-page .ai-step-num { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0 0 20px; border-radius: 12px; color: var(--vg-text); background: color-mix(in srgb, var(--vg-red) 18%, var(--vg-panel)); font-weight: 800; }
.ai-site .ai-page .ai-card-icon { color: var(--vg-text); }
.ai-site .ai-page :is(.ai-card,.ai-step) { background: var(--vg-panel); }
.ai-site .ai-page .ai-btn-secondary { color: var(--vg-text); background: var(--vg-panel); }
.vg-header:has(.ai-site-header) { background: var(--vg-header-bg); }
.ai-site-header .vg-nav a, .vg-header:has(.ai-site-header) .vg-mobile-nav a { color: var(--vg-header-text) !important; }
.ai-site-header { flex-wrap: wrap; gap: 20px; padding-top: 16px; padding-bottom: 16px; }
.ai-site-header .ai-site-logo { white-space: normal; overflow-wrap: anywhere; max-width: 100%; font-size: clamp(20px, 2vw, 28px) !important; }
.ai-site-header .vg-nav { justify-content: center; flex-wrap: wrap; gap: 12px 24px; }
.ai-site-header .vg-nav a { white-space: nowrap; }
.ai-site-header .vg-header-cta { white-space: normal; text-align: center; }
.vg-header:has(.ai-site-header) .vg-mobile-nav { background: var(--vg-header-bg); }
.ai-site-header .vg-menu-toggle { color: var(--vg-header-text); border-color: currentColor; }
@media (max-width: 1100px) {
  .vg-header .ai-site-header { display: flex; justify-content: space-between; }
  .ai-site-header .vg-nav, .ai-site-header .vg-header-cta { display: none; }
  .ai-site-header .vg-menu-toggle { display: block; flex-shrink: 0; }
  .vg-header:has(.ai-site-header) .vg-mobile-nav.is-open { display: flex; flex-direction: column; padding: 16px 24px; gap: 16px; }
}
@media (max-width: 640px) {
  .ai-site-header .ai-site-logo { flex: 1; min-width: 0; }
  .ai-site .ai-page .ai-grid > .ai-card { grid-column: auto; transform: none; }
}
.ai-site .ai-article > section { padding: 36px max(20px, calc((100% - 800px) / 2)); background: var(--vg-bg); }
.ai-site .ai-article > section:first-child { padding-top: 64px; }
.ai-site .ai-article :is(p,li) { font-size: 18px; line-height: 1.9; }
.ai-site .ai-article h2 { font-size: clamp(26px, 3vw, 36px); }
.ai-site .ai-article h3 { font-size: 23px; margin-top: 28px; }
.ai-site .ai-article a { text-decoration: underline; text-underline-offset: 3px; }
.ai-site .ai-articles .ai-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); }

/* Semantic palette: branding, readable ink and decorative accents have
   separate roles. All generated palettes share these same component rules. */
.ai-site .ai-page a { color: var(--vg-link); }
.ai-site .ai-page :is(.ai-card,.ai-step,.ai-tile,.ai-faq details,.ai-cta,.ai-promo) {
  border-color: var(--vg-border);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--vg-text) 7%, transparent);
}
.ai-site .ai-page :is(.ai-promo,.ai-cta) { background: var(--vg-soft); }
.ai-site .ai-page :is(.ai-promo,.ai-cta) :is(p,li,h2,h3) { color: var(--vg-text); }
.ai-site .ai-page :is(.ai-eyebrow,.ai-card-icon,.ai-step-num) { background: var(--vg-soft); color: var(--vg-soft-text) !important; border-color: var(--vg-border); box-shadow: none; }
.ai-site .ai-page :is(.ai-kicker,.ai-promo-tag,.ai-card-link) { color: var(--vg-link); }
.ai-site .ai-page .ai-glow { color: var(--vg-text); background: none; -webkit-text-fill-color: currentColor; }
.ai-site .ai-page .ai-card::before { opacity: .08; }
.ai-site .ai-page .ai-hero::before { opacity: .08; background: none; }
.ai-site .ai-page .ai-hero { background-image: linear-gradient(125deg, var(--vg-bg) 35%, var(--vg-soft)) !important; }
.ai-site .ai-page :is(.ai-btn-primary,a.ai-btn-primary), .ai-site-header .vg-header-cta {
  color: var(--vg-button-text) !important; background: var(--vg-red); border-color: var(--vg-red);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--vg-red) 16%, transparent);
}
.ai-site .ai-page :is(.ai-btn-primary,a.ai-btn-primary):hover, .ai-site-header .vg-header-cta:hover { background: var(--vg-button-hover); border-color: var(--vg-button-hover); }
.ai-site .ai-page :is(.ai-btn-secondary,a.ai-btn-secondary) { color: var(--vg-text); background: var(--vg-panel); border-color: var(--vg-border); box-shadow: none; }
.ai-site-header .ai-site-logo { color: var(--vg-header-brand) !important; }
.vg-header:has(.ai-site-header) { border-color: color-mix(in srgb, var(--vg-header-text) 12%, transparent); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.ai-site-header .vg-nav a:hover, .vg-header:has(.ai-site-header) .vg-mobile-nav a:hover { color: var(--vg-header-brand) !important; text-decoration: underline; text-underline-offset: 5px; }
.vg-footer:has(.ai-site-footer) { background: var(--vg-footer-bg); color: var(--vg-footer-text); }
.vg-footer:has(.ai-site-footer) :is(h3,.vg-footer-brand,.vg-logo) { color: var(--vg-footer-text) !important; background: none; -webkit-text-fill-color: currentColor; }
.vg-footer:has(.ai-site-footer) :is(p,a,.vg-footer-bar,.vg-footer-about) { color: var(--vg-footer-muted) !important; }
.vg-footer:has(.ai-site-footer) a:hover { color: var(--vg-footer-text) !important; }
.ai-site a:focus-visible, .ai-site summary:focus-visible { outline-color: var(--vg-link); }


/* Theme-owned variations: shared semantic colors, distinct silhouettes. */
.vg-header-actions { display: flex; align-items: center; gap: 10px; }
.vg-header-login { padding: 10px 20px; border: 1px solid currentColor; border-radius: var(--vg-radius); color: var(--vg-header-text); }
.ai-site .ai-page .ai-hero { min-height: 580px; color: var(--vg-text); }
.ai-site .ai-page .ai-hero :is(h1,h2,p) { color: var(--vg-text); text-shadow: none; }
.ai-site.ai-hero-cinematic .ai-page .ai-hero { background-image: radial-gradient(ellipse at 90% 20%,var(--vg-soft),transparent 65%),linear-gradient(120deg,var(--vg-bg),var(--vg-panel)) !important; }
.ai-site.ai-hero-split .ai-page .ai-hero { width: min(calc(100% - 40px),var(--vg-content-width)); padding-inline: 6%; border: 1px solid var(--vg-border); background-color: var(--vg-panel); }
.ai-site.ai-hero-split .ai-hero-inner { max-width: 60%; margin-left: 0; }
.ai-site.ai-hero-editorial .ai-page .ai-hero { min-height: 680px; align-content: end; padding-bottom: 70px; }
.ai-site.ai-hero-editorial .ai-page .ai-hero :is(h1,h2) { font-family: Georgia, 'Noto Serif Thai', serif; font-weight: 500; }
.ai-site.ai-hero-portal .ai-hero-inner { max-width: 850px; margin-inline: auto; text-align: center; }
.ai-site.ai-hero-portal .ai-hero-inner p { margin-inline: auto; }
.ai-site.ai-hero-portal .ai-actions { justify-content: center; }
@media (min-width: 850px) {
  .ai-site.ai-layout-bento .ai-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ai-site.ai-layout-bento .ai-grid > .ai-card:first-child { grid-column: span 2; }
  .ai-site.ai-layout-asymmetric .ai-grid { grid-template-columns: 1.5fr 1fr; align-items: start; }
  .ai-site.ai-layout-asymmetric .ai-grid > .ai-card:nth-child(even) { margin-top: 44px; }
  .ai-site.ai-layout-showcase .ai-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ai-site.ai-layout-showcase .ai-card { min-height: 300px; justify-content: flex-end; }
  .ai-site.ai-layout-layered .ai-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1100px) { .ai-site-header .vg-header-actions { display: none; } }
@media (max-width: 849px) {
  .ai-site.ai-hero-split .ai-page .ai-hero { width: 100%; }
  .ai-site.ai-hero-split .ai-hero-inner { max-width: 100%; }
  .ai-site .ai-page .ai-hero { min-height: 480px; padding-block: 70px; }
}