/* NRG Play — Arctic Flash (Option C) | prefix c7vq | radius 8px
   Fonts referenced (Exo 2 / Source Sans Pro) with system fallbacks — zero CDN, zero external load
   Section order V4: Hero -> Games -> Banner -> How It Works -> Reviews -> SEO -> Footer */

:root {
  --c7vq-bg: #0d1b2a;
  --c7vq-c1: #00C2FF;   /* primary electric blue */
  --c7vq-c2: #FF4757;   /* accent red */
  --c7vq-c3: #7BED9F;   /* cta mint */
  --c7vq-ct: #111111;   /* cta text */
  --c7vq-tx: #b8d4e8;   /* body text */
  --c7vq-cd: #0f2235;   /* card / surface */
  --c7vq-br: rgba(0,194,255,.2);
  --c7vq-r:  8px;
  --c7vq-head: 'Exo 2', 'Segoe UI', system-ui, sans-serif;
  --c7vq-body: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--c7vq-bg);
  color:var(--c7vq-tx);
  font-family:var(--c7vq-body);
  line-height:1.6;
  padding-top:64px;
  overflow-x:hidden;
}
h1,h2,h3,h4 { font-family:var(--c7vq-head); color:#eaf6ff; line-height:1.15; }
a { color:inherit; }
img { max-width:100%; display:block; }
::selection { background:var(--c7vq-c1); color:var(--c7vq-bg); }

/* ===== HEADER ===== */
.c7vq-hdr { position:fixed; top:0; left:0; right:0; height:64px; z-index:100; background:rgba(13,27,42,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--c7vq-br); }
.c7vq-hdr-in { display:flex; align-items:center; gap:1rem; padding:0 1.5rem; height:100%; }
.c7vq-lg { display:flex; align-items:center; gap:.5rem; text-decoration:none; font-family:var(--c7vq-head); font-weight:800; font-size:1.15rem; color:#eaf6ff; }
.c7vq-lg svg { width:30px; height:30px; flex-shrink:0; }
.c7vq-lg span b { color:var(--c7vq-c1); }
.c7vq-nav { display:flex; gap:.25rem; margin-left:auto; }
.c7vq-nl { padding:.45rem .8rem; text-decoration:none; color:var(--c7vq-tx); font-weight:600; font-size:.88rem; border-radius:var(--c7vq-r); transition:color .2s, background .2s; }
.c7vq-nl:hover { color:var(--c7vq-c1); }
.c7vq-nl.active { color:var(--c7vq-c1); background:rgba(0,194,255,.1); }
.c7vq-act { display:flex; gap:.5rem; align-items:center; }

/* Buttons */
.c7vq-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1.1rem; border-radius:var(--c7vq-r); font-weight:700; font-size:.85rem; cursor:pointer; border:1px solid transparent; text-decoration:none; transition:all .25s; font-family:var(--c7vq-head); }
.c7vq-btn-ol { background:transparent; border-color:var(--c7vq-br); color:var(--c7vq-tx); }
.c7vq-btn-ol:hover { border-color:var(--c7vq-c1); color:var(--c7vq-c1); box-shadow:0 0 12px rgba(0,194,255,.35); }
.c7vq-btn-cta { background:var(--c7vq-c3); color:var(--c7vq-ct); }
.c7vq-btn-cta:hover { box-shadow:0 0 18px rgba(123,237,159,.5); transform:translateY(-1px); }

/* ===== HAMBURGER (HBG-D: bordered button, rotate 90deg -> X) ===== */
.c7vq-hbg { display:none; position:relative; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:8px; border:1px solid var(--c7vq-br); border-radius:var(--c7vq-r); background:transparent; cursor:pointer; transition:transform .3s ease, border-color .3s ease; }
.c7vq-hbg span { display:block; width:22px; height:2px; background:var(--c7vq-tx); border-radius:2px; transition:transform .3s ease, opacity .2s ease; margin:0 auto; }
.c7vq-hbg.open { transform:rotate(90deg); border-color:var(--c7vq-c1); }
.c7vq-hbg.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); background:var(--c7vq-c1); }
.c7vq-hbg.open span:nth-child(2) { opacity:0; }
.c7vq-hbg.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); background:var(--c7vq-c1); }

/* ===== SIDEBAR / DRAWER ===== */
.c7vq-sb { position:fixed; top:64px; left:0; width:220px; height:calc(100vh - 64px); background:var(--c7vq-cd); border-right:1px solid var(--c7vq-br); overflow-y:auto; z-index:90; display:flex; flex-direction:column; }
.c7vq-sb__nav { display:flex; flex-direction:column; padding-top:.5rem; }
.c7vq-sbl { display:flex; align-items:center; gap:.75rem; padding:.65rem 1.25rem; color:var(--c7vq-tx); font-weight:600; font-size:.88rem; border-left:3px solid transparent; transition:all .2s; text-decoration:none; }
.c7vq-sbl:hover, .c7vq-sbl.active { color:var(--c7vq-c1); border-left-color:var(--c7vq-c1); background:rgba(0,194,255,.06); }
.c7vq-sb__auth { display:none; padding:1rem 1.25rem; border-top:1px solid var(--c7vq-br); flex-direction:column; gap:.5rem; }
.c7vq-sbf { margin-top:auto; padding:1rem 1.25rem; border-top:1px solid var(--c7vq-br); display:flex; flex-direction:column; gap:.4rem; }
.c7vq-sbf a { font-size:.75rem; color:var(--c7vq-tx); opacity:.6; text-decoration:none; }
.c7vq-sbf a:hover { opacity:1; color:var(--c7vq-c1); }
.c7vq-sbo { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:190; display:none; }
.c7vq-sbo.show { display:block; }

/* ===== MOBILE BOTTOM NAV ===== */
.c7vq-mn { display:none; position:fixed; bottom:0; left:0; right:0; height:60px; background:var(--c7vq-cd); border-top:1px solid var(--c7vq-br); z-index:150; }
.c7vq-mni { flex:1; background:none; border:none; color:var(--c7vq-tx); font-weight:600; font-size:.78rem; cursor:pointer; text-decoration:none; display:flex; align-items:center; justify-content:center; font-family:var(--c7vq-body); }
.c7vq-mni:hover { color:var(--c7vq-c1); }

/* ===== MAIN / SECTIONS ===== */
.c7vq-main { min-height:60vh; }
.c7vq-sec { padding:3.5rem 1.5rem; max-width:1180px; margin:0 auto; }
.c7vq-sec h2 { font-size:1.9rem; margin-bottom:.4rem; }
.c7vq-sec .lead { opacity:.7; margin-bottom:1.75rem; max-width:640px; }
.c7vq-eyebrow { color:var(--c7vq-c1); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.72rem; font-family:var(--c7vq-head); }

/* ===== HERO-C (diagonal cut) ===== */
.c7vq-hero { position:relative; padding:5rem 1.5rem 7rem; background:linear-gradient(135deg,#0d1b2a 0%,#10263b 60%,#0d1b2a 100%); clip-path:polygon(0 0,100% 0,100% 85%,0 100%); overflow:hidden; }
.c7vq-hero-in { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr; gap:2rem; align-items:center; }
.c7vq-hero h1 { font-size:clamp(2.2rem,5vw,3.6rem); margin:.6rem 0 1rem; }
.c7vq-hero h1 em { color:var(--c7vq-c1); font-style:normal; text-shadow:0 0 22px rgba(0,194,255,.4); }
.c7vq-hero p.sub { font-size:1.05rem; opacity:.8; max-width:520px; margin-bottom:1.6rem; }
.c7vq-hero-cta { display:flex; gap:.8rem; flex-wrap:wrap; }
.c7vq-hero-cta .c7vq-btn { padding:.75rem 1.5rem; font-size:.95rem; }
.c7vq-hero-disc { margin-top:1.4rem; font-size:.74rem; opacity:.55; }
.c7vq-hero-art { position:relative; height:280px; }
.c7vq-hero-art .dot { position:absolute; border-radius:50%; background:var(--c7vq-c1); box-shadow:0 0 14px var(--c7vq-c1); animation:c7vqFloat 4s ease-in-out infinite; }
.c7vq-hero-art .ring { position:absolute; border:2px solid var(--c7vq-br); border-radius:50%; }
@keyframes c7vqFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }

/* ===== CAROUSEL-B (lead card large, rest staggered) ===== */
.c7vq-cr-wrap { position:relative; }
.c7vq-cr-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:1.25rem; gap:1rem; }
.c7vq-cr-nav { display:flex; gap:.5rem; }
.c7vq-crb { width:40px; height:40px; border-radius:50%; border:1px solid var(--c7vq-br); background:var(--c7vq-cd); color:var(--c7vq-c1); font-size:1.1rem; cursor:pointer; transition:all .2s; }
.c7vq-crb:hover { background:var(--c7vq-c1); color:var(--c7vq-bg); box-shadow:0 0 14px rgba(0,194,255,.5); }
.c7vq-cr-view { overflow:hidden; }
.c7vq-cr { display:flex; gap:1rem; transition:transform .4s ease; align-items:flex-start; }
.c7vq-cr .c7vq-gc { width:160px; flex-shrink:0; }
.c7vq-cr .c7vq-gc--lead { width:300px; }
.c7vq-cr .c7vq-gc--lead .c7vq-gct { padding-top:120%; }
.c7vq-cr .c7vq-gc:nth-child(even) { margin-top:20px; }

/* ===== GAME CARD (CARD-D: transparent border -> glow on hover) ===== */
.c7vq-gc { background:var(--c7vq-cd); border:1px solid transparent; border-radius:var(--c7vq-r); overflow:hidden; cursor:pointer; transition:border-color .3s, box-shadow .3s, transform .3s; }
.c7vq-gc:hover, .c7vq-gc:focus-visible { border-color:var(--c7vq-c1); box-shadow:0 0 18px rgba(0,194,255,.35); transform:translateY(-4px); outline:none; }
.c7vq-gct { position:relative; padding-top:133%; overflow:hidden; background:#0a1622; }
.c7vq-gct img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.c7vq-gco { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; background:rgba(13,27,42,.78); opacity:0; transition:opacity .3s; }
.c7vq-gc:hover .c7vq-gco, .c7vq-gc:focus-visible .c7vq-gco { opacity:1; }
.c7vq-gcp { background:var(--c7vq-c3); color:var(--c7vq-ct); border:none; padding:.5rem 1rem; border-radius:50px; font-weight:900; font-size:.78rem; cursor:pointer; font-family:var(--c7vq-head); }
.c7vq-gci { padding:.6rem .7rem .75rem; }

/* ===== GAMES GRID ===== */
.c7vq-nb { background:rgba(0,194,255,.08); border:1px solid var(--c7vq-br); border-radius:var(--c7vq-r); text-align:center; font-size:.8rem; font-weight:600; padding:.6rem 1rem; margin:1.5rem auto 0; max-width:1180px; }
.c7vq-cts { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.25rem 0 1.75rem; }
.c7vq-ct { background:var(--c7vq-cd); border:1px solid var(--c7vq-br); color:var(--c7vq-tx); padding:.5rem 1.1rem; border-radius:50px; font-weight:700; font-size:.82rem; cursor:pointer; transition:all .2s; font-family:var(--c7vq-head); }
.c7vq-ct:hover { border-color:var(--c7vq-c1); color:var(--c7vq-c1); }
.c7vq-ct.active { background:var(--c7vq-c1); border-color:var(--c7vq-c1); color:var(--c7vq-bg); }
.c7vq-search { width:100%; max-width:420px; background:var(--c7vq-cd); border:1px solid var(--c7vq-br); border-radius:var(--c7vq-r); padding:.7rem 1rem; color:var(--c7vq-tx); font-size:.9rem; }
.c7vq-search:focus { outline:none; border-color:var(--c7vq-c1); box-shadow:0 0 12px rgba(0,194,255,.3); }
.c7vq-gg { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1.1rem; }

/* ===== BANNER-E (stats) ===== */
.c7vq-banner { background:linear-gradient(120deg,#10263b,#0f2235); border:1px solid var(--c7vq-br); border-radius:var(--c7vq-r); padding:2.5rem 2rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; }
.c7vq-stats { display:flex; gap:2.5rem; flex-wrap:wrap; }
.c7vq-stat b { display:block; font-family:var(--c7vq-head); font-size:2.4rem; color:var(--c7vq-c1); text-shadow:0 0 18px rgba(0,194,255,.35); line-height:1; }
.c7vq-stat span { font-size:.82rem; opacity:.7; }

/* ===== WORKS-B (horizontal line, numbered circles) ===== */
.c7vq-works { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; position:relative; }
.c7vq-works::before { content:''; position:absolute; top:28px; left:10%; right:10%; height:2px; background:linear-gradient(90deg,transparent,var(--c7vq-br),transparent); z-index:0; }
.c7vq-step { position:relative; text-align:center; z-index:1; }
.c7vq-step-num { width:56px; height:56px; margin:0 auto 1rem; border-radius:50%; background:var(--c7vq-cd); border:2px solid var(--c7vq-c1); display:flex; align-items:center; justify-content:center; font-family:var(--c7vq-head); font-weight:800; font-size:1.3rem; color:var(--c7vq-c1); box-shadow:0 0 16px rgba(0,194,255,.3); }
.c7vq-step h3 { font-size:1.05rem; margin-bottom:.4rem; }
.c7vq-step p { font-size:.88rem; opacity:.75; }

/* ===== REVIEWS-C (single big review + quote + dots) ===== */
.c7vq-rev { position:relative; max-width:760px; margin:0 auto; text-align:center; }
.c7vq-rev-quote { font-family:var(--c7vq-head); font-size:8rem; line-height:.6; color:var(--c7vq-c1); opacity:.18; height:3rem; }
.c7vq-rev-item { display:none; }
.c7vq-rev-item.active { display:block; animation:c7vqFade .4s ease; }
@keyframes c7vqFade { from{ opacity:0; } to{ opacity:1; } }
.c7vq-rev-text { font-size:1.25rem; line-height:1.55; margin-bottom:1.2rem; color:#dceefb; }
.c7vq-rev-stars { color:var(--c7vq-c3); letter-spacing:2px; margin-bottom:.5rem; }
.c7vq-rev-name { font-weight:700; color:var(--c7vq-c1); font-family:var(--c7vq-head); }
.c7vq-rev-loc { font-size:.8rem; opacity:.6; }
.c7vq-rev-dots { display:flex; gap:.5rem; justify-content:center; margin-top:1.5rem; }
.c7vq-rev-dot { width:10px; height:10px; border-radius:50%; border:1px solid var(--c7vq-c1); background:transparent; cursor:pointer; transition:all .2s; }
.c7vq-rev-dot.active { background:var(--c7vq-c1); box-shadow:0 0 10px var(--c7vq-c1); }

/* ===== SEO / prose ===== */
.c7vq-prose { max-width:820px; }
.c7vq-prose p { margin-bottom:1rem; opacity:.82; }
.c7vq-prose h2 { margin-top:1.5rem; }
.c7vq-prose h3 { margin:1.4rem 0 .5rem; color:var(--c7vq-c1); font-size:1.15rem; }
.c7vq-prose ul { margin:0 0 1rem 1.25rem; }
.c7vq-prose li { margin-bottom:.4rem; opacity:.82; }

/* ===== FAQ ===== */
.c7vq-faq { max-width:820px; }
.c7vq-faq details { border:1px solid var(--c7vq-br); border-radius:var(--c7vq-r); padding:1rem 1.25rem; margin-bottom:.75rem; background:var(--c7vq-cd); }
.c7vq-faq summary { cursor:pointer; font-weight:700; font-family:var(--c7vq-head); color:#eaf6ff; list-style:none; }
.c7vq-faq summary::-webkit-details-marker { display:none; }
.c7vq-faq summary::after { content:'+'; float:right; color:var(--c7vq-c1); font-size:1.2rem; }
.c7vq-faq details[open] summary::after { content:'\2212'; }
.c7vq-faq p { margin-top:.7rem; opacity:.8; font-size:.92rem; }

/* ===== CONTACT FORM ===== */
.c7vq-form { max-width:640px; display:flex; flex-direction:column; gap:1rem; }
.c7vq-form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.c7vq-form input, .c7vq-form select, .c7vq-form textarea { width:100%; background:var(--c7vq-cd); border:1px solid var(--c7vq-br); border-radius:var(--c7vq-r); padding:.75rem 1rem; color:var(--c7vq-tx); font-size:.92rem; font-family:var(--c7vq-body); }
.c7vq-form input:focus, .c7vq-form select:focus, .c7vq-form textarea:focus { outline:none; border-color:var(--c7vq-c1); box-shadow:0 0 12px rgba(0,194,255,.25); }
.c7vq-form label { font-size:.82rem; font-weight:700; color:var(--c7vq-c1); margin-bottom:.3rem; display:block; font-family:var(--c7vq-head); }

/* ===== FOOTER-B (3 columns) ===== */
.c7vq-ftr { border-top:1px solid var(--c7vq-br); background:var(--c7vq-cd); padding:2.5rem 1.5rem 1.5rem; }
.c7vq-ftr-in { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
.c7vq-ftr-brand .c7vq-lg { margin-bottom:.8rem; }
.c7vq-ftr-brand p { font-size:.82rem; opacity:.65; max-width:280px; }
.c7vq-ftr h4 { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--c7vq-c1); margin-bottom:.8rem; }
.c7vq-ftr ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.c7vq-ftr a { text-decoration:none; font-size:.85rem; opacity:.75; transition:.2s; }
.c7vq-ftr a:hover { opacity:1; color:var(--c7vq-c1); }
.c7vq-ftr-bottom { max-width:1180px; margin:2rem auto 0; padding-top:1.5rem; border-top:1px solid var(--c7vq-br); font-size:.75rem; opacity:.6; text-align:center; }
.c7vq-ftr-bottom p { margin-bottom:.4rem; }
.c7vq-badges { display:flex; gap:.5rem; justify-content:center; margin-bottom:.8rem; flex-wrap:wrap; }
.c7vq-badge { border:1px solid var(--c7vq-br); border-radius:50px; padding:.2rem .7rem; font-size:.7rem; font-weight:700; color:var(--c7vq-c1); }

/* ===== RESPONSIVE ===== */
@media (min-width:1024px) { .c7vq-main { margin-left:220px; } .c7vq-ftr { margin-left:220px; } }

@media (max-width:1280px) {
  .c7vq-ftr-in { grid-template-columns:1fr 1fr 1fr; }
  .c7vq-ftr-brand { grid-column:1/-1; }
}
@media (max-width:1024px) {
  .c7vq-sb { transform:translateX(-100%); transition:transform .3s; top:0; height:100vh; z-index:200; }
  .c7vq-sb.open { transform:translateX(0); }
  .c7vq-sb__auth { display:flex; }
  .c7vq-main { margin-left:0; }
  .c7vq-mn { display:flex; align-items:center; justify-content:space-around; }
  body { padding-bottom:60px; }
  .c7vq-hero-in { grid-template-columns:1fr; }
  .c7vq-hero-art { display:none; }
}
@media (min-width:1024px) { body { padding-bottom:0; } }

@media (max-width:768px) {
  .c7vq-hdr-in { justify-content:space-between; }
  .c7vq-hbg { display:flex; }
  .c7vq-nav { display:none; }
  .c7vq-act { display:none; }
  .c7vq-works { grid-template-columns:1fr; }
  .c7vq-works::before { display:none; }
  .c7vq-cr .c7vq-gc--lead { width:240px; }
  .c7vq-ftr-in { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  body { font-size:15px; }
  .c7vq-gg { grid-template-columns:repeat(2,1fr); gap:.75rem; }
  .c7vq-cr .c7vq-gc { width:80vw; max-width:260px; }
  .c7vq-cr .c7vq-gc--lead { width:80vw; max-width:260px; }
  .c7vq-cr .c7vq-gc:nth-child(even) { margin-top:0; }
  .c7vq-form-row { grid-template-columns:1fr; }
  .c7vq-form input, .c7vq-form select, .c7vq-form textarea { min-height:48px; }
  .c7vq-stats { gap:1.5rem; }
  .c7vq-rev-text { font-size:1.05rem; }
}
@media (max-width:375px) {
  .c7vq-hdr-in { padding:0 .75rem; }
  .c7vq-gg { gap:.5rem; }
  .c7vq-sec { padding:2.5rem 1rem; }
}
