:root {
  --vl-primary: #009DC4;
  --vl-secondary: #006E89;
  --vl-accent: #57BED8;
  --vl-dark: #03222D;
  --vl-light: #E6F5F9;
  --vl-surface: #073444;
  --vl-muted: #84B7CA;
  --vl-border: #025D75;
  --vl-container: 1180px;
  --vl-radius: 10px;
  --vl-section-gap: 44px;
  --vl-card-pad: 20px;
  --vl-font-heading: Inter, ui-sans-serif, system-ui, sans-serif;
  --vl-font-body: Inter, ui-sans-serif, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--vl-light);
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--vl-primary) 16%, transparent), transparent 32%),
    var(--vl-dark);
  font-family: var(--vl-font-body);
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--vl-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.vl-container {
  width: min(calc(100% - 32px), var(--vl-container));
  margin-inline: auto;
}

.vl-site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid color-mix(in srgb, var(--vl-border) 72%, transparent);
  background: color-mix(in srgb, var(--vl-dark) 88%, transparent);
  backdrop-filter: blur(16px);
}

.vl-header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.vl-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--vl-light);
  font-weight: 800;
  letter-spacing: .01em;
}

.vl-brand-mark {
  width: 12px;
  height: 12px;
  border-radius: 99px;
  background: var(--vl-primary);
  box-shadow: 0 0 28px color-mix(in srgb, var(--vl-primary) 70%, transparent);
}

.vl-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vl-nav a {
  color: color-mix(in srgb, var(--vl-light) 86%, var(--vl-muted));
  font-size: .92rem;
  font-weight: 700;
}

.vl-page {
  overflow: clip;
}

.vl-hero {
  padding: clamp(54px, 8vw, 104px) 0 54px;
}

.vl-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(320px, .94fr);
  align-items: center;
  gap: clamp(28px, 6vw, 72px);
}

.vl-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--vl-primary) 60%, var(--vl-border));
  border-radius: 999px;
  color: var(--vl-accent);
  background: color-mix(in srgb, var(--vl-primary) 10%, transparent);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vl-title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--vl-font-heading);
  font-size: clamp(2.35rem, 6vw, 5.5rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.vl-description {
  max-width: 760px;
  margin: 24px 0 0;
  color: color-mix(in srgb, var(--vl-light) 76%, var(--vl-muted));
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
}

.vl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.vl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: calc(var(--vl-radius) * .75);
  border: 1px solid transparent;
  background: var(--vl-primary);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--vl-primary) 28%, transparent);
}

.vl-button:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.vl-button-secondary {
  background: transparent;
  border-color: var(--vl-border);
  color: var(--vl-light);
  box-shadow: none;
}

.vl-media {
  overflow: hidden;
  border-radius: calc(var(--vl-radius) * 1.2);
  border: 1px solid color-mix(in srgb, var(--vl-border) 84%, transparent);
  background: var(--vl-surface);
  box-shadow: 0 24px 80px color-mix(in srgb, #000 34%, transparent);
}

.vl-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.vl-section {
  padding: var(--vl-section-gap) 0;
}

.vl-section-head {
  margin-bottom: 20px;
}

.vl-section-index {
  display: block;
  margin-bottom: 8px;
  color: var(--vl-accent);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.vl-section h2,
.vl-faq h2,
.vl-cta h2 {
  margin: 0;
  font-family: var(--vl-font-heading);
  font-size: clamp(1.8rem, 3.2vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -.025em;
}

.vl-content {
  color: color-mix(in srgb, var(--vl-light) 83%, var(--vl-muted));
}

.vl-content p:first-child {
  margin-top: 0;
}

.vl-content p:last-child {
  margin-bottom: 0;
}

.vl-content ul,
.vl-content ol {
  padding-inline-start: 1.25rem;
}

.vl-content li + li {
  margin-top: .48rem;
}

.vl-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  overflow: hidden;
  border-radius: var(--vl-radius);
}

.vl-content th,
.vl-content td {
  padding: 12px 14px;
  border: 1px solid var(--vl-border);
  text-align: start;
  vertical-align: top;
}

.vl-content th {
  background: color-mix(in srgb, var(--vl-primary) 18%, var(--vl-surface));
  color: var(--vl-light);
}

.vl-card {
  padding: var(--vl-card-pad);
  border-radius: var(--vl-radius);
  border: 1px solid color-mix(in srgb, var(--vl-border) 82%, transparent);
  background: color-mix(in srgb, var(--vl-surface) 92%, transparent);
}

.vl-section-with-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr);
  gap: clamp(26px, 5vw, 58px);
  align-items: center;
}

.vl-section-with-media.is-image-left .vl-section-copy {
  order: 2;
}

.vl-section-with-media.is-image-left .vl-media {
  order: 1;
}

.vl-featured {
  padding: 18px 0 var(--vl-section-gap);
}

.vl-featured .vl-media img {
  aspect-ratio: 3 / 2;
}

.vl-toc {
  padding: 22px;
  border-radius: var(--vl-radius);
  border: 1px solid var(--vl-border);
  background: color-mix(in srgb, var(--vl-surface) 86%, transparent);
}

.vl-toc-title {
  margin: 0 0 12px;
  font-family: var(--vl-font-heading);
  font-size: 1.12rem;
}

.vl-toc ol {
  margin: 0;
  padding-inline-start: 1.25rem;
  columns: 2;
  column-gap: 42px;
}

.vl-toc li {
  break-inside: avoid;
  margin: 6px 0;
}

.vl-toc a {
  color: color-mix(in srgb, var(--vl-light) 82%, var(--vl-muted));
}

.vl-faq {
  padding: var(--vl-section-gap) 0;
}

.vl-faq-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.vl-faq details {
  border-radius: var(--vl-radius);
  border: 1px solid var(--vl-border);
  background: color-mix(in srgb, var(--vl-surface) 90%, transparent);
}

.vl-faq summary {
  cursor: pointer;
  padding: 18px 20px;
  color: var(--vl-light);
  font-weight: 850;
}

.vl-faq-answer {
  padding: 0 20px 20px;
  color: color-mix(in srgb, var(--vl-light) 82%, var(--vl-muted));
}

.vl-cta {
  padding: var(--vl-section-gap) 0;
}

.vl-cta-card {
  display: grid;
  grid-template-columns: 1fr minmax(300px, .8fr);
  align-items: center;
  gap: clamp(24px, 5vw, 58px);
  padding: clamp(26px, 5vw, 56px);
  border-radius: calc(var(--vl-radius) * 1.25);
  border: 1px solid var(--vl-border);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--vl-primary) 19%, var(--vl-surface)),
      color-mix(in srgb, var(--vl-secondary) 12%, var(--vl-surface))
    );
  overflow: hidden;
}

.vl-cta-text {
  color: color-mix(in srgb, var(--vl-light) 82%, var(--vl-muted));
}

.vl-site-footer {
  margin-top: 42px;
  border-top: 1px solid var(--vl-border);
  background: color-mix(in srgb, var(--vl-dark) 92%, #000);
}

.vl-footer-inner {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  color: color-mix(in srgb, var(--vl-light) 58%, var(--vl-muted));
  font-size: .9rem;
}

.vl-footer-inner p {
  margin: 0;
}

@media (max-width: 860px) {
  .vl-hero-grid,
  .vl-section-with-media,
  .vl-cta-card {
    grid-template-columns: 1fr;
  }

  .vl-section-with-media.is-image-left .vl-section-copy,
  .vl-section-with-media.is-image-left .vl-media {
    order: initial;
  }

  .vl-toc ol {
    columns: 1;
  }

  .vl-header-inner,
  .vl-footer-inner {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 18px;
  }
}


body.theme-minimal {
  background: var(--vl-light);
  color: var(--vl-dark);
}
body.theme-minimal .vl-site-header,
body.theme-minimal .vl-site-footer {
  background: color-mix(in srgb, var(--vl-light) 94%, transparent);
}
body.theme-minimal .vl-brand,
body.theme-minimal .vl-title,
body.theme-minimal .vl-section h2,
body.theme-minimal .vl-faq h2,
body.theme-minimal .vl-cta h2,
body.theme-minimal .vl-faq summary {
  color: var(--vl-dark);
}
body.theme-minimal .vl-description,
body.theme-minimal .vl-content,
body.theme-minimal .vl-faq-answer,
body.theme-minimal .vl-cta-text,
body.theme-minimal .vl-footer-inner,
body.theme-minimal .vl-nav a,
body.theme-minimal .vl-toc a {
  color: color-mix(in srgb, var(--vl-dark) 72%, var(--vl-secondary));
}
body.theme-minimal .vl-card,
body.theme-minimal .vl-toc,
body.theme-minimal .vl-faq details,
body.theme-minimal .vl-cta-card {
  background: #fff;
  border-color: color-mix(in srgb, var(--vl-secondary) 18%, transparent);
}


body .vl-hero-grid {
  grid-template-columns: 1fr;
  text-align: center;
}
body .vl-hero-copy {
  max-width: 920px;
  margin-inline: auto;
}
body .vl-title,
body .vl-description {
  margin-inline: auto;
}
body .vl-actions {
  justify-content: center;
}


body .vl-card {
  border-inline-width: 0;
  border-radius: 0;
  border-color: var(--vl-border);
}


.vl-site-header { position:sticky;top:0;z-index:100;transition:background .25s ease,box-shadow .25s ease,border-color .25s ease; }
.vl-site-header.is-scrolled { background:color-mix(in srgb,var(--vl-dark) 88%,transparent);backdrop-filter:blur(16px);box-shadow:0 12px 36px color-mix(in srgb,#000 28%,transparent); }
.vl-button,.vl-card,.vl-media,.vl-faq details { transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease,filter .24s ease; }
.vl-card:hover,.vl-faq details:hover { transform:translateY(-3px);border-color:color-mix(in srgb,var(--vl-primary) 52%,var(--vl-border));box-shadow:0 20px 54px color-mix(in srgb,#000 24%,transparent); }
.vl-media:hover { transform:translateY(-3px) scale(1.008); }
.vl-button:hover { transform:translateY(-2px);filter:brightness(1.08); }
.vl-reveal { opacity:0;transform:translateY(22px); }
.vl-reveal.is-visible { opacity:1;transform:translateY(0);transition:opacity .55s ease,transform .55s ease; }
.vl-site-footer { position:relative;overflow:hidden;margin-top:clamp(44px,8vw,96px);padding:clamp(34px,6vw,64px) 0;border-top:1px solid var(--vl-border);background:radial-gradient(circle at 10% 0%,color-mix(in srgb,var(--vl-primary) 18%,transparent),transparent 35%),linear-gradient(180deg,color-mix(in srgb,var(--vl-surface) 88%,var(--vl-dark)),var(--vl-dark)); }
.vl-footer-grid { display:grid;grid-template-columns:minmax(0,1.5fr) minmax(180px,.7fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start; }
.vl-footer-logo { width:fit-content; }
.vl-footer-copy { max-width:520px;margin:14px 0 0;color:var(--vl-muted);line-height:1.75; }
.vl-footer-nav { display:grid;gap:10px; }
.vl-footer-nav a { color:var(--vl-light);text-decoration:none;font-weight:700; }
.vl-footer-nav a:hover { color:var(--vl-accent); }
.vl-footer-oblinks { margin-top:26px; }
.vl-footer-oblinks .vin-obl-nav { margin-top:0;padding-inline:0;border-top-color:var(--vl-border); }
.vl-footer-meta { display:grid;gap:8px;color:var(--vl-muted);font-size:.9rem;word-break:break-word; }
.vl-backtop { position:fixed;right:18px;bottom:18px;z-index:90;width:44px;height:44px;border:1px solid var(--vl-border);border-radius:50%;background:var(--vl-primary);color:#fff;font:inherit;font-weight:900;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .2s ease,transform .2s ease,filter .2s ease;box-shadow:0 12px 34px color-mix(in srgb,var(--vl-primary) 30%,transparent); }
.vl-backtop.is-visible { opacity:1;pointer-events:auto;transform:translateY(0); }
.vl-backtop:hover { filter:brightness(1.1); }
@media(max-width:760px){ .vl-footer-grid{grid-template-columns:1fr;} }
@media(prefers-reduced-motion:reduce){ .vl-reveal,.vl-reveal.is-visible,.vl-button,.vl-card,.vl-media,.vl-faq details,.vl-backtop{transition:none;transform:none;} }


/* ==================================================================
   AURORA EDITORIAL — ORIGINAL WORDPRESS EXPERIENCE
   Rich color, asymmetric editorial rhythm, premium game radar.
   This layer is appended after family CSS and therefore acts as the
   shared visual upgrade while preserving deterministic family choices.
   ================================================================== */

:root{
  --vl-aurora-1:color-mix(in srgb,var(--vl-primary) 72%,#ffffff);
  --vl-aurora-2:color-mix(in srgb,var(--vl-secondary) 72%,#000000);
  --vl-aurora-3:color-mix(in srgb,var(--vl-accent) 78%,#ffffff);
  --vl-glass:color-mix(in srgb,var(--vl-surface) 72%,transparent);
  --vl-soft-line:color-mix(in srgb,var(--vl-primary) 30%,var(--vl-border));
}

body{
  position:relative;
  background:
    radial-gradient(circle at 8% 4%,color-mix(in srgb,var(--vl-primary) 30%,transparent),transparent 24%),
    radial-gradient(circle at 88% 10%,color-mix(in srgb,var(--vl-accent) 24%,transparent),transparent 20%),
    radial-gradient(circle at 78% 74%,color-mix(in srgb,var(--vl-secondary) 20%,transparent),transparent 24%),
    radial-gradient(circle at 18% 82%,color-mix(in srgb,var(--vl-primary) 14%,transparent),transparent 22%),
    linear-gradient(135deg,#050812 0%,color-mix(in srgb,var(--vl-dark) 80%,#0b1224) 30%,color-mix(in srgb,var(--vl-secondary) 12%,#090c16) 62%,#04060c 100%);
  background-attachment:fixed;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.24;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}

body:after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.95;
  background:
    radial-gradient(circle at 14% 18%,color-mix(in srgb,var(--vl-primary) 18%,transparent),transparent 18%),
    radial-gradient(circle at 84% 24%,color-mix(in srgb,var(--vl-accent) 20%,transparent),transparent 20%),
    radial-gradient(circle at 64% 68%,color-mix(in srgb,var(--vl-secondary) 16%,transparent),transparent 18%),
    radial-gradient(circle at 32% 58%,rgba(255,255,255,.06),transparent 16%);
  filter:blur(34px) saturate(1.1);
}

.vl-container{
  width:min(calc(100% - 28px),var(--vl-container));
}

/* Header becomes a floating command bar instead of a conventional strip. */
.vl-site-header{
  top:10px;
  width:min(calc(100% - 20px),calc(var(--vl-container) + 36px));
  margin:10px auto 0;
  border:1px solid color-mix(in srgb,var(--vl-primary) 28%,rgba(255,255,255,.12));
  border-radius:22px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--vl-dark) 76%,rgba(255,255,255,.02)),
      color-mix(in srgb,var(--vl-primary) 9%,rgba(255,255,255,.01)) 46%,
      color-mix(in srgb,var(--vl-secondary) 10%,rgba(255,255,255,.02)) 100%);
  box-shadow:0 20px 70px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07),0 0 34px color-mix(in srgb,var(--vl-primary) 10%,transparent);
  backdrop-filter:blur(20px) saturate(1.25);
}

.vl-site-header.is-scrolled{
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--vl-dark) 88%,rgba(255,255,255,.02)),
      color-mix(in srgb,var(--vl-primary) 10%,transparent) 50%,
      color-mix(in srgb,var(--vl-accent) 8%,transparent) 100%);
  border-color:color-mix(in srgb,var(--vl-primary) 46%,var(--vl-border));
  box-shadow:0 20px 62px rgba(0,0,0,.36),0 0 32px color-mix(in srgb,var(--vl-primary) 12%,transparent);
}

.vl-header-inner{min-height:64px;padding-inline:12px}
.vl-brand{gap:8px;align-items:center}
.vl-brand-logo{display:block;width:auto;height:clamp(24px,3.2vw,34px);max-width:min(148px,30vw);object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.20))}
.vl-footer-logo .vl-brand-logo{height:42px;max-width:180px}
.vl-brand-text{font-weight:900;font-size:.88rem;letter-spacing:.01em}
.vl-nav a{
  position:relative;
  padding:8px 11px;
  border-radius:999px;
  text-decoration:none;
}
.vl-nav a:hover{
  text-decoration:none;
  background:linear-gradient(135deg,color-mix(in srgb,var(--vl-primary) 18%,transparent),color-mix(in srgb,var(--vl-accent) 12%,transparent));
  color:var(--vl-light);
  box-shadow:0 8px 22px color-mix(in srgb,var(--vl-primary) 16%,transparent);
}

/* Hero = asymmetric campaign stage, deliberately different from reference. */
.vl-hero{
  position:relative;
  padding:clamp(38px,7vw,86px) 0 34px;
}
.vl-hero:before,
.vl-hero:after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:999px;
  filter:blur(30px);
}
.vl-hero:before{
  width:260px;height:260px;left:-120px;top:15%;
  background:color-mix(in srgb,var(--vl-primary) 22%,transparent);
}
.vl-hero:after{
  width:230px;height:230px;right:-80px;bottom:4%;
  background:color-mix(in srgb,var(--vl-accent) 16%,transparent);
}

.vl-hero-grid{
  position:relative;
  z-index:2;
  gap:clamp(24px,5vw,68px);
}

.vl-hero-copy{
  position:relative;
  padding:clamp(4px,2vw,22px);
}

.vl-hero-copy:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:72px;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--vl-primary),var(--vl-accent));
  box-shadow:0 0 20px color-mix(in srgb,var(--vl-primary) 45%,transparent);
}

.vl-kicker{
  margin-top:14px;
  padding:8px 13px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--vl-primary) 15%,transparent),color-mix(in srgb,var(--vl-accent) 8%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

.vl-title{
  max-width:16ch;
  font-size:clamp(2.45rem,6.2vw,5.7rem);
  line-height:.98;
  text-wrap:balance;
  background:linear-gradient(105deg,#ffffff 0%,var(--vl-light) 26%,var(--vl-aurora-1) 56%,var(--vl-accent) 88%,#ffffff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.18));
}

.vl-description{
  max-width:68ch;
  font-size:clamp(1rem,1.55vw,1.16rem);
}

.vl-actions{gap:10px}
.vl-button{
  min-height:52px;
  padding:13px 22px;
  border-radius:15px;
  border:1px solid color-mix(in srgb,var(--vl-primary) 52%,rgba(255,255,255,.18));
  background:linear-gradient(135deg,var(--vl-primary) 0%,var(--vl-accent) 48%,var(--vl-secondary) 100%);
  box-shadow:
    0 15px 36px color-mix(in srgb,var(--vl-primary) 26%,transparent),
    0 0 26px color-mix(in srgb,var(--vl-accent) 16%,transparent),
    inset 0 1px 0 rgba(255,255,255,.18);
  text-decoration:none;
}
.vl-button-secondary{
  background:color-mix(in srgb,var(--vl-surface) 64%,transparent);
  color:var(--vl-light);
  border-color:rgba(255,255,255,.16);
  backdrop-filter:blur(12px);
}

.vl-hero-media{
  position:relative;
  padding:5px;
  overflow:visible;
  border:0;
  border-radius:32px;
  background:linear-gradient(145deg,var(--vl-primary) 0%,var(--vl-accent) 34%,var(--vl-secondary) 68%,color-mix(in srgb,var(--vl-primary) 55%,#ffffff) 100%);
  box-shadow:
    0 28px 90px rgba(0,0,0,.38),
    0 0 64px color-mix(in srgb,var(--vl-primary) 18%,transparent),
    0 0 40px color-mix(in srgb,var(--vl-accent) 10%,transparent);
}
.vl-hero-media:before{
  content:"";
  position:absolute;
  inset:-14px;
  z-index:-1;
  border-radius:40px;
  border:1px solid color-mix(in srgb,var(--vl-primary) 24%,transparent);
  transform:rotate(2deg);
}
.vl-hero-media img{
  aspect-ratio:1/1;
  border-radius:27px;
}

/* Intro is an editorial deck rather than a plain white box. */
.vl-intro-shell{
  position:relative;
  overflow:hidden;
  padding:clamp(24px,4vw,44px);
  border:1px solid color-mix(in srgb,var(--vl-primary) 26%,var(--vl-border));
  border-radius:calc(var(--vl-radius) * 1.35);
  background:
    radial-gradient(circle at 90% 0%,color-mix(in srgb,var(--vl-accent) 18%,transparent),transparent 28%),
    radial-gradient(circle at 10% 100%,color-mix(in srgb,var(--vl-secondary) 16%,transparent),transparent 28%),
    linear-gradient(135deg,color-mix(in srgb,var(--vl-primary) 8%,var(--vl-surface)),color-mix(in srgb,var(--vl-secondary) 5%,var(--vl-surface)) 52%,color-mix(in srgb,var(--vl-accent) 5%,var(--vl-surface)) 100%);
  box-shadow:0 24px 80px rgba(0,0,0,.18),0 0 42px color-mix(in srgb,var(--vl-primary) 8%,transparent);
}
.vl-intro-shell:after{
  content:"INTRO";
  position:absolute;
  right:-4px;
  bottom:-18px;
  font-family:var(--vl-font-heading);
  font-size:clamp(3.8rem,11vw,8rem);
  font-weight:900;
  letter-spacing:-.08em;
  color:color-mix(in srgb,var(--vl-primary) 7%,transparent);
  pointer-events:none;
}

.vl-featured-showcase{
  position:relative;
  margin-top:8px;
}
.vl-featured-showcase .vl-media{
  border-radius:30px;
  box-shadow:0 30px 90px rgba(0,0,0,.34);
}
.vl-featured-showcase .vl-media img{
  aspect-ratio:16/8.5;
}

/* TOC becomes a navigation constellation. */
.vl-toc{
  position:relative;
  padding:clamp(20px,3vw,30px);
  overflow:hidden;
  border-radius:24px;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--vl-primary) 11%,var(--vl-surface)),color-mix(in srgb,var(--vl-surface) 86%,transparent));
  box-shadow:0 16px 52px rgba(0,0,0,.18);
}
.vl-toc-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  font-size:1rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.vl-toc-title:before{
  content:"";
  width:10px;height:10px;border-radius:50%;
  background:var(--vl-accent);
  box-shadow:0 0 18px var(--vl-accent);
}
.vl-toc ol{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  columns:auto;
  padding:0;
  list-style:none;
  counter-reset:vl-toc;
}
.vl-toc li{
  margin:0;
  counter-increment:vl-toc;
}
.vl-toc a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  text-decoration:none;
  font-size:.86rem;
}
.vl-toc a:before{
  content:counter(vl-toc,decimal-leading-zero);
  color:var(--vl-accent);
  font-size:.68rem;
  font-weight:900;
}
.vl-toc a:hover{
  background:color-mix(in srgb,var(--vl-primary) 13%,transparent);
  border-color:color-mix(in srgb,var(--vl-primary) 34%,var(--vl-border));
}

/* ================================================================
   GAME RADAR
   Visual-first cards, asymmetric grid, optional honest RTP meter.
   ================================================================ */
.vl-games{padding-top:clamp(36px,7vw,78px)}
.vl-game-stage{
  position:relative;
  overflow:hidden;
  padding:clamp(20px,4vw,42px);
  border:1px solid color-mix(in srgb,var(--vl-primary) 26%,var(--vl-border));
  border-radius:32px;
  background:
    radial-gradient(circle at 0 0,color-mix(in srgb,var(--vl-primary) 24%,transparent),transparent 32%),
    radial-gradient(circle at 100% 100%,color-mix(in srgb,var(--vl-accent) 16%,transparent),transparent 30%),
    radial-gradient(circle at 70% 14%,color-mix(in srgb,var(--vl-secondary) 12%,transparent),transparent 28%),
    linear-gradient(145deg,color-mix(in srgb,var(--vl-surface) 90%,var(--vl-dark)),color-mix(in srgb,var(--vl-dark) 88%,#000));
  box-shadow:0 28px 90px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.06),0 0 38px color-mix(in srgb,var(--vl-primary) 10%,transparent);
}
.vl-game-ambient{
  position:absolute;
  width:220px;height:220px;border-radius:50%;
  filter:blur(44px);opacity:.28;pointer-events:none;
}
.vl-game-ambient-a{left:-90px;top:-110px;background:var(--vl-primary)}
.vl-game-ambient-b{right:-110px;bottom:-130px;background:var(--vl-accent)}

.vl-games-head{position:relative;z-index:2;margin-bottom:24px}

.vl-games-brandbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--vl-primary) 15%,rgba(255,255,255,.03)),
      rgba(255,255,255,.025));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 34px rgba(0,0,0,.16);
}

.vl-games-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.vl-games-brand-icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  flex:0 0 52px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--vl-primary) 38%,rgba(255,255,255,.16));
  border-radius:15px;
  background:rgba(255,255,255,.94);
  box-shadow:
    0 8px 22px rgba(0,0,0,.18),
    0 0 22px color-mix(in srgb,var(--vl-primary) 12%,transparent);
}

.vl-games-brand-icon img{
  display:block;
  width:38px;
  height:38px;
  object-fit:contain;
}

.vl-games-brandcopy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.vl-games-brandcopy strong{
  color:var(--vl-light);
  font-family:var(--vl-font-heading);
  font-size:.98rem;
  line-height:1.25;
}

.vl-games-eyebrow{
  color:var(--vl-accent);
  font-size:.68rem;
  font-weight:950;
  letter-spacing:.16em;
}

.vl-games-count{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:13px;
  border:1px solid color-mix(in srgb,var(--vl-primary) 54%,rgba(255,255,255,.18));
  background:color-mix(in srgb,var(--vl-primary) 12%,transparent);
  font-size:.72rem;
  font-weight:950;
}

.vl-games-heading-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:end;
  margin-top:18px;
}

.vl-games-heading-grid h2{
  max-width:16ch;
  font-size:clamp(2rem,4vw,3.5rem);
}

.vl-games-intro{
  max-width:720px;
  margin:.55rem 0 0;
  color:var(--vl-muted);
  font-size:.9rem;
  line-height:1.7;
}

.vl-games-mode{
  align-self:start;
  padding:8px 11px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.045);
  color:var(--vl-light);
  font-size:.68rem;
  font-weight:950;
  letter-spacing:.12em;
  white-space:nowrap;
}

/* Horizontal game rail: cards never stack vertically as a long column. */
.vl-game-rail{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:nowrap;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 2px 14px;
  margin-inline:-2px;
  scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
  scrollbar-color:
    color-mix(in srgb,var(--vl-primary) 58%,transparent)
    rgba(255,255,255,.06);
}

.vl-game-rail::-webkit-scrollbar{
  height:7px;
}
.vl-game-rail::-webkit-scrollbar-track{
  background:rgba(255,255,255,.05);
  border-radius:99px;
}
.vl-game-rail::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,var(--vl-primary),var(--vl-accent));
  border-radius:99px;
}

.vl-game-card{
  --mx:50%;
  --my:50%;
  position:relative;
  flex:0 0 clamp(180px,21vw,230px);
  min-width:0;
  overflow:hidden;
  scroll-snap-align:start;
  border:1px solid color-mix(in srgb,var(--vl-primary) 30%,rgba(255,255,255,.14));
  border-radius:20px;
  background:
    radial-gradient(circle at var(--mx) var(--my),
      color-mix(in srgb,var(--vl-primary) 13%,transparent),
      transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  box-shadow:
    0 14px 34px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}

.vl-game-card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--vl-primary) 62%,rgba(255,255,255,.22));
  box-shadow:
    0 22px 52px rgba(0,0,0,.30),
    0 0 28px color-mix(in srgb,var(--vl-primary) 12%,transparent);
}

.vl-game-visual{
  position:relative;
  overflow:hidden;
  padding:10px 10px 0;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--vl-primary) 9%,#05070d),
      #060a12);
}

.vl-game-icon{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.13);
  border-radius:15px;
  background:#fff;
  box-shadow:
    0 10px 24px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.10);
  transform:scale(1.001);
  transition:transform .35s ease,filter .35s ease;
}

.vl-game-card:hover .vl-game-icon{
  transform:scale(1.035);
  filter:saturate(1.08);
}

@media(max-width:760px){
  .vl-brand-logo{height:26px;max-width:110px}
  .vl-brand-text{font-size:.78rem}
}

@media(max-width:560px){
  .vl-brand-text{display:none}
  .vl-header-inner{min-height:58px;padding-inline:10px}
  .vl-site-header{border-radius:18px}
}

.vl-game-rank{
  position:absolute;
  z-index:3;
  top:18px;
  left:18px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:10px;
  background:rgba(0,0,0,.64);
  color:#fff;
  font-size:.68rem;
  font-weight:950;
  backdrop-filter:blur(10px);
}

.vl-game-shine{
  position:absolute;
  inset:10px 10px 0;
  pointer-events:none;
  border-radius:15px;
  background:
    linear-gradient(120deg,transparent 22%,rgba(255,255,255,.15) 34%,transparent 46%),
    linear-gradient(180deg,transparent 57%,rgba(2,6,12,.62) 100%);
  transform:translateX(-28%);
  transition:transform .45s ease;
}

.vl-game-card:hover .vl-game-shine{
  transform:translateX(18%);
}

.vl-game-copy{
  position:relative;
  z-index:2;
  padding:14px 14px 16px;
  min-width:0;
}

.vl-game-copy h3{
  margin:5px 0 0;
  color:var(--vl-light);
  font-family:var(--vl-font-heading);
  font-size:.98rem;
  line-height:1.3;
  overflow-wrap:anywhere;
}

.vl-game-copy p{
  margin:.6rem 0 0;
  color:var(--vl-muted);
  font-size:.73rem;
  line-height:1.5;
}

.vl-game-badges{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.vl-game-label,.vl-game-provider{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:4px 7px;
  border-radius:999px;
  font-size:.62rem;
  font-weight:850;
  border:1px solid color-mix(in srgb,var(--vl-primary) 34%,rgba(255,255,255,.12));
  background:color-mix(in srgb,var(--vl-primary) 11%,transparent);
  color:var(--vl-light);
}

.vl-game-label{
  border-color:color-mix(in srgb,var(--vl-accent) 45%,rgba(255,255,255,.12));
  background:color-mix(in srgb,var(--vl-accent) 10%,transparent);
  color:var(--vl-accent);
}

.vl-rtp-panel{margin-top:10px}

.vl-rtp-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--vl-light);
}

.vl-rtp-caption{
  color:var(--vl-muted);
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.12em;
}

.vl-rtp-line strong{
  color:var(--vl-accent);
  font-size:.82rem;
}

.vl-rtp-track{
  height:6px;
  margin-top:6px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.09);
}

.vl-rtp-fill{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--vl-primary),var(--vl-accent));
  box-shadow:0 0 12px color-mix(in srgb,var(--vl-primary) 48%,transparent);
}

@media(max-width:760px){
  .vl-games-brandbar{
    padding:10px;
    border-radius:16px;
  }
  .vl-games-brand-icon{
    width:44px;
    height:44px;
    flex-basis:44px;
    border-radius:12px;
  }
  .vl-games-brand-icon img{
    width:32px;
    height:32px;
  }
  .vl-games-brandcopy strong{
    font-size:.86rem;
  }
  .vl-games-heading-grid{
    grid-template-columns:1fr;
  }
  .vl-games-mode{
    justify-self:start;
  }
  .vl-game-card{
    flex-basis:156px;
    border-radius:17px;
  }
  .vl-game-visual{
    padding:8px 8px 0;
  }
  .vl-game-icon{
    border-radius:13px;
  }
  .vl-game-shine{
    inset:8px 8px 0;
    border-radius:13px;
  }
  .vl-game-copy{
    padding:11px 10px 13px;
  }
  .vl-game-copy h3{
    font-size:.86rem;
  }
  .vl-game-copy p{
    font-size:.68rem;
  }
}

@media(max-width:480px){
  .vl-game-card{
    flex-basis:145px;
  }
  .vl-games-count{
    width:36px;
    height:36px;
    flex-basis:36px;
  }
}

/* ================================================================
   ARTICLE STORY SYSTEM
   Four repeating visual rhythms so long content does not look like
   a stack of identical cards.
   ================================================================ */
.vl-article-section{
  position:relative;
  padding:clamp(40px,7vw,82px) 0;
}
.vl-story-frame{
  position:relative;
}
.vl-article-section .vl-section-head{
  position:relative;
  margin-bottom:22px;
}
.vl-article-section .vl-section-index{
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  margin-bottom:14px;
  border-radius:14px;
  border:1px solid color-mix(in srgb,var(--vl-primary) 40%,rgba(255,255,255,.12));
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--vl-primary) 20%,transparent),rgba(255,255,255,.035));
  color:var(--vl-accent);
  font-size:.72rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.vl-article-section h2{text-wrap:balance}

.vl-story-focus .vl-story-frame{
  padding:clamp(22px,4vw,46px);
  overflow:hidden;
  border-radius:30px;
  border:1px solid color-mix(in srgb,var(--vl-primary) 22%,var(--vl-border));
  background:
    radial-gradient(circle at 100% 0,color-mix(in srgb,var(--vl-primary) 14%,transparent),transparent 31%),
    linear-gradient(145deg,color-mix(in srgb,var(--vl-surface) 95%,var(--vl-dark)),color-mix(in srgb,var(--vl-dark) 90%,#000));
  box-shadow:0 24px 80px rgba(0,0,0,.22);
}
.vl-story-focus .vl-card{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.vl-story-focus .vl-media{
  border-radius:24px;
}

.vl-story-split .vl-section-with-media{
  gap:clamp(28px,6vw,76px);
}
.vl-story-split .vl-section-copy{
  position:relative;
  padding:clamp(22px,3.5vw,38px);
  border-radius:26px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--vl-primary) 7%,var(--vl-surface)),var(--vl-surface));
  box-shadow:0 20px 64px rgba(0,0,0,.18);
}
.vl-story-split .vl-media{
  transform:rotate(.6deg);
}
.vl-story-split.is-visual-left .vl-media{
  transform:rotate(-.6deg);
}

.vl-story-band{
  background:
    linear-gradient(90deg,transparent,color-mix(in srgb,var(--vl-primary) 5%,transparent),transparent);
}
.vl-story-band .vl-story-frame{
  display:grid;
  grid-template-columns:minmax(170px,.28fr) minmax(0,1fr);
  gap:clamp(22px,5vw,60px);
  align-items:start;
}
.vl-story-band .vl-section-head{
  position:sticky;
  top:112px;
}
.vl-story-band .vl-card{
  background:transparent;
  border:0;
  padding:0;
  box-shadow:none;
}

.vl-story-quiet .vl-story-frame{
  width:min(100%,980px);
  margin-inline:auto;
}
.vl-story-quiet .vl-card{
  padding:clamp(24px,4vw,44px);
  border-radius:28px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
}

/* Content typography feels editorial instead of generic. */
.vl-content{
  font-size:clamp(.99rem,1.2vw,1.07rem);
}
.vl-content p{
  margin:0 0 1.15em;
}
.vl-content p + p{
  text-indent:0;
}
.vl-content strong{
  color:var(--vl-light);
}
.vl-content blockquote{
  margin:1.8em 0;
  padding:1.2em 1.35em;
  border-inline-start:4px solid var(--vl-primary);
  border-radius:0 16px 16px 0;
  background:color-mix(in srgb,var(--vl-primary) 8%,transparent);
}
.vl-content table{
  box-shadow:0 18px 54px rgba(0,0,0,.16);
}
.vl-content th{
  background:linear-gradient(135deg,color-mix(in srgb,var(--vl-primary) 22%,var(--vl-surface)),color-mix(in srgb,var(--vl-secondary) 10%,var(--vl-surface)));
}

/* FAQ gets its own luminous lane. */
.vl-faq{
  position:relative;
}
.vl-faq:before{
  content:"";
  position:absolute;
  left:50%;
  top:8%;
  width:min(620px,80vw);
  height:280px;
  transform:translateX(-50%);
  border-radius:50%;
  background:color-mix(in srgb,var(--vl-primary) 10%,transparent);
  filter:blur(60px);
  pointer-events:none;
}
.vl-faq .vl-container{position:relative}
.vl-faq-list{gap:10px}
.vl-faq details{
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
}
.vl-faq details[open]{
  border-color:color-mix(in srgb,var(--vl-primary) 44%,var(--vl-border));
  box-shadow:0 18px 50px rgba(0,0,0,.20);
}
.vl-faq summary{
  position:relative;
  padding-right:54px;
}
.vl-faq summary:after{
  content:"+";
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:28px;height:28px;
  border-radius:50%;
  background:color-mix(in srgb,var(--vl-primary) 14%,transparent);
  color:var(--vl-accent);
}
.vl-faq details[open] summary:after{content:"–"}

/* CTA = colorful closing scene. */
.vl-cta-card{
  position:relative;
  overflow:hidden;
  border-radius:34px;
  border-color:color-mix(in srgb,var(--vl-primary) 32%,var(--vl-border));
  background:
    radial-gradient(circle at 0 0,color-mix(in srgb,var(--vl-primary) 28%,transparent),transparent 32%),
    radial-gradient(circle at 100% 100%,color-mix(in srgb,var(--vl-accent) 17%,transparent),transparent 30%),
    linear-gradient(135deg,color-mix(in srgb,var(--vl-surface) 94%,var(--vl-dark)),var(--vl-dark));
  box-shadow:0 28px 90px rgba(0,0,0,.26);
}

/* Footer is richer but still leaves OBL in its dedicated hook. */
.vl-site-footer{
  border-top:1px solid color-mix(in srgb,var(--vl-primary) 24%,var(--vl-border));
  background:
    radial-gradient(circle at 8% 0,color-mix(in srgb,var(--vl-primary) 22%,transparent),transparent 32%),
    radial-gradient(circle at 92% 100%,color-mix(in srgb,var(--vl-accent) 12%,transparent),transparent 26%),
    linear-gradient(180deg,color-mix(in srgb,var(--vl-surface) 90%,var(--vl-dark)),#02040a);
}
.vl-footer-nav a{
  display:flex;
  align-items:center;
  gap:8px;
  width:fit-content;
}
.vl-footer-nav a:before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--vl-primary);
  box-shadow:0 0 10px var(--vl-primary);
}

/* Minimal family stays light while retaining new composition. */
body.theme-minimal{
  background:
    radial-gradient(circle at 5% 0,color-mix(in srgb,var(--vl-primary) 10%,transparent),transparent 28%),
    var(--vl-light);
}
body.theme-minimal:before{opacity:.08}
body.theme-minimal .vl-game-stage,
body.theme-minimal .vl-intro-shell,
body.theme-minimal .vl-story-focus .vl-story-frame,
body.theme-minimal .vl-story-split .vl-section-copy,
body.theme-minimal .vl-story-quiet .vl-card,
body.theme-minimal .vl-faq details{
  color:var(--vl-dark);
  background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--vl-primary) 4%,#fff));
  border-color:color-mix(in srgb,var(--vl-secondary) 15%,transparent);
}
body.theme-minimal .vl-game-copy h3,
body.theme-minimal .vl-rtp-line,
body.theme-minimal .vl-content strong{
  color:var(--vl-dark);
}
body.theme-minimal .vl-game-copy p,
body.theme-minimal .vl-games-intro,
body.theme-minimal .vl-rtp-caption{
  color:color-mix(in srgb,var(--vl-dark) 66%,var(--vl-secondary));
}

@media(max-width:980px){
  .vl-story-band .vl-story-frame{grid-template-columns:1fr}
  .vl-story-band .vl-section-head{position:relative;top:auto}
}

@media(max-width:760px){
  .vl-site-header{
    top:5px;
    width:calc(100% - 10px);
    margin-top:5px;
    border-radius:17px;
  }
  .vl-header-inner{gap:12px}
  .vl-nav{overflow-x:auto;max-width:100%}
  .vl-nav ul{flex-wrap:nowrap;gap:4px}
  .vl-nav a{white-space:nowrap;font-size:.78rem;padding:7px 9px}
  .vl-hero{padding-top:38px}
  .vl-title{font-size:clamp(2.25rem,12vw,4.1rem)}
  .vl-games-heading-grid{grid-template-columns:1fr}
  .vl-games-mode{justify-self:start}
  .vl-featured-showcase .vl-media img{aspect-ratio:3/2}
}

@media(max-width:480px){
  .vl-container{width:min(calc(100% - 18px),var(--vl-container))}
  .vl-game-stage{padding:14px;border-radius:24px}
}

/* Pointer spotlight and reveal remain optional enhancements. */
@media(prefers-reduced-motion:reduce){
  .vl-game-card,.vl-game-icon,.vl-game-shine{transition:none}
}