/* ============================================================
   Gitli Goods — style.css
   Design: Option F "Cosmic Purple" | prefix f7qm | radius 16px
   Section order V4: Hero -> Games -> Banner -> How It Works -> Reviews -> SEO -> Footer
   Sidebar SIDEBAR-A (left 220px), Hamburger HBG-A (X close), Card CARD-D (glow on hover)
   ============================================================ */

:root {
  --f7qm-bg: #08001f;
  --f7qm-c1: #9B59B6;   /* primary  */
  --f7qm-c2: #E91E8C;   /* accent   */
  --f7qm-c3: #F39C12;   /* cta      */
  --f7qm-ct: #111111;   /* cta text */
  --f7qm-tx: #d0b8e8;   /* text     */
  --f7qm-cd: #120030;   /* card     */
  --f7qm-br: rgba(155,89,182,.25);
  --f7qm-r:  16px;
  --f7qm-head: "Space Grotesk", "Segoe UI", Tahoma, sans-serif;
  --f7qm-body: "Nunito", "Helvetica Neue", Arial, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--f7qm-bg);
  color:var(--f7qm-tx);
  font-family:var(--f7qm-body);
  line-height:1.6;
  /* space/nebula radial layered depth */
  background-image:
    radial-gradient(circle at 12% 18%, rgba(155,89,182,.18), transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(233,30,140,.14), transparent 40%),
    radial-gradient(circle at 70% 92%, rgba(243,156,18,.08), transparent 45%);
  background-attachment:fixed;
  min-height:100vh;
}
h1,h2,h3,h4 { font-family:var(--f7qm-head); line-height:1.15; color:#fff; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
ul { list-style:none; }

/* ===== BUTTONS ===== */
.f7qm-btn {
  font-family:var(--f7qm-head);
  font-weight:700; font-size:.85rem; letter-spacing:.02em;
  padding:.6rem 1.2rem; border-radius:var(--f7qm-r);
  border:1px solid transparent; cursor:pointer; transition:all .25s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  white-space:nowrap;
}
.f7qm-btn-cta { background:var(--f7qm-c3); color:var(--f7qm-ct); }
.f7qm-btn-cta:hover { box-shadow:0 0 18px rgba(243,156,18,.55); transform:translateY(-2px); }
.f7qm-btn-ol { background:transparent; color:var(--f7qm-tx); border-color:var(--f7qm-br); }
.f7qm-btn-ol:hover { border-color:var(--f7qm-c1); color:#fff; box-shadow:0 0 14px rgba(155,89,182,.4); }

/* ===== HEADER (fixed 64px, HBG-A: logo left / burger right) ===== */
.f7qm-hdr {
  position:fixed; top:0; left:0; right:0; height:64px; z-index:100;
  background:rgba(8,0,31,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--f7qm-br);
}
.f7qm-hdr-in { display:flex; align-items:center; gap:1rem; padding:0 1.5rem; height:100%; max-width:1400px; margin:0 auto; }
.f7qm-lg { display:flex; align-items:center; gap:.55rem; font-family:var(--f7qm-head); font-weight:700; font-size:1.15rem; color:#fff; }
.f7qm-lg svg { width:30px; height:30px; }
.f7qm-lg span b { color:var(--f7qm-c2); }
.f7qm-nav { display:flex; gap:.25rem; margin-left:auto; }
.f7qm-nl { padding:.45rem .8rem; border-radius:var(--f7qm-r); font-weight:700; font-size:.88rem; transition:all .2s; }
.f7qm-nl:hover { color:#fff; background:rgba(155,89,182,.12); }
.f7qm-nl.active { color:var(--f7qm-c2); }

/* HBG-A hamburger: 3 equal lines, gap 5px, .open -> X */
.f7qm-hbg {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:30px; height:30px; background:none; border:none; cursor:pointer; padding:0;
}
.f7qm-hbg span {
  display:block; width:26px; height:3px; border-radius:3px; background:var(--f7qm-tx);
  transition:transform .3s ease, opacity .2s ease;
}
.f7qm-hbg.open span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.f7qm-hbg.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.f7qm-hbg.open span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

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

/* ===== MAIN / FOOTER offset for left sidebar ===== */
.f7qm-main { margin-top:64px; padding:0; min-height:60vh; }
@media (min-width:1024px) { .f7qm-main, .f7qm-ftr { margin-left:220px; } }
.f7qm-sec { max-width:1200px; margin:0 auto; padding:3.5rem 1.5rem; }
.f7qm-sec h2 { font-size:2rem; margin-bottom:.5rem; }
.f7qm-sec > p.lead { opacity:.8; max-width:640px; margin-bottom:2rem; }

/* ===== HERO-D (card style with gradient mesh background) ===== */
.f7qm-hero {
  position:relative; padding:4.5rem 1.5rem; overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(233,30,140,.25), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(155,89,182,.3), transparent 50%),
    linear-gradient(160deg, #0c0030, #08001f);
}
.f7qm-hero::before, .f7qm-hero::after {
  content:""; position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; z-index:0;
}
.f7qm-hero::before { width:280px; height:280px; background:var(--f7qm-c1); top:-80px; left:-60px; }
.f7qm-hero::after  { width:240px; height:240px; background:var(--f7qm-c2); bottom:-90px; right:-40px; }
.f7qm-hero-card {
  position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center;
  background:rgba(18,0,48,.55); backdrop-filter:blur(14px);
  border:1px solid var(--f7qm-br); border-radius:calc(var(--f7qm-r) + 8px);
  padding:3rem 2.5rem; box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.f7qm-hero-tag { display:inline-block; font-family:var(--f7qm-head); font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--f7qm-c3); border:1px solid var(--f7qm-br); padding:.3rem .8rem; border-radius:50px; margin-bottom:1.25rem; }
.f7qm-hero-card h1 { font-size:clamp(2.2rem, 5vw, 3.4rem); margin-bottom:1rem; background:linear-gradient(90deg,#fff,var(--f7qm-c1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.f7qm-hero-card p.sub { font-size:1.05rem; opacity:.85; margin-bottom:2rem; }
.f7qm-hero-cta { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.5rem; }
.f7qm-hero-cta .f7qm-btn { padding:.85rem 1.8rem; font-size:.95rem; }
.f7qm-hero-disc { font-size:.72rem; opacity:.55; }

/* ===== GAME CARD (CARD-D: transparent border -> glow on hover) ===== */
.f7qm-gc {
  position:relative; background:var(--f7qm-cd); border-radius:var(--f7qm-r);
  border:1px solid transparent; overflow:hidden; cursor:pointer;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.f7qm-gc:hover, .f7qm-gc:focus-visible {
  border-color:var(--f7qm-c1); box-shadow:0 0 22px rgba(155,89,182,.5);
  transform:translateY(-4px); outline:none;
}
.f7qm-gct { position:relative; aspect-ratio:3/4; overflow:hidden; background:#0c0024; }
.f7qm-gct img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.f7qm-gc:hover .f7qm-gct img { transform:scale(1.06); }
.f7qm-gcn {
  position:absolute; top:.3rem; right:.55rem; z-index:2;
  font-family:var(--f7qm-head); font-size:3rem; font-weight:700; line-height:1;
  color:#fff; opacity:.15; pointer-events:none;
}
.f7qm-gco {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.6rem; background:rgba(8,0,31,.7);
  opacity:0; transition:opacity .3s ease;
}
.f7qm-gc:hover .f7qm-gco, .f7qm-gc:focus-within .f7qm-gco { opacity:1; }
.f7qm-gcp { background:var(--f7qm-c3); color:var(--f7qm-ct); font-family:var(--f7qm-head); font-weight:700; border:none; padding:.55rem 1.1rem; border-radius:50px; cursor:pointer; font-size:.8rem; }
.f7qm-gci { padding:.7rem .8rem; }
.f7qm-gci p:first-child { font-weight:800; font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--f7qm-tx); }
.f7qm-gci p:last-child { font-size:.7rem; opacity:.6; }

/* ===== CAROUSEL-E (editorial numbered, horizontal scroll) ===== */
.f7qm-cr-wrap { position:relative; max-width:1200px; margin:0 auto; padding:0 1.5rem; }
.f7qm-cr-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.f7qm-cr-head h2 { font-size:2rem; }
.f7qm-cr-nav { display:flex; gap:.5rem; }
.f7qm-crb {
  width:42px; height:42px; border-radius:50%; border:1px solid var(--f7qm-br);
  background:var(--f7qm-cd); color:var(--f7qm-tx); cursor:pointer; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.f7qm-crb:hover { border-color:var(--f7qm-c1); color:#fff; box-shadow:0 0 12px rgba(155,89,182,.4); }
.f7qm-cr-view { overflow:hidden; }
.f7qm-cr { display:flex; gap:16px; transition:transform .4s ease; }
.f7qm-cr .f7qm-gc { flex:0 0 200px; width:200px; }

/* ===== GAMES GRID + category tabs (games.html) ===== */
.f7qm-nb {
  background:rgba(243,156,18,.08); border:1px solid var(--f7qm-br); color:var(--f7qm-c3);
  text-align:center; font-size:.78rem; font-weight:700; letter-spacing:.02em;
  padding:.65rem 1rem; border-radius:var(--f7qm-r); margin:0 1.5rem;
}
.f7qm-search { max-width:1200px; margin:1.75rem auto 1rem; padding:0 1.5rem; }
.f7qm-search input {
  width:100%; background:var(--f7qm-cd); border:1px solid var(--f7qm-br); color:var(--f7qm-tx);
  border-radius:var(--f7qm-r); padding:.8rem 1.1rem; font-size:.95rem; font-family:var(--f7qm-body);
}
.f7qm-search input:focus { outline:none; border-color:var(--f7qm-c1); box-shadow:0 0 12px rgba(155,89,182,.35); }
.f7qm-cts { display:flex; gap:.5rem; flex-wrap:wrap; max-width:1200px; margin:0 auto 1.5rem; padding:0 1.5rem; }
.f7qm-ct {
  background:var(--f7qm-cd); border:1px solid var(--f7qm-br); color:var(--f7qm-tx);
  font-family:var(--f7qm-head); font-weight:700; font-size:.82rem; padding:.5rem 1rem;
  border-radius:50px; cursor:pointer; transition:all .2s;
}
.f7qm-ct:hover { border-color:var(--f7qm-c1); color:#fff; }
.f7qm-ct.active { background:var(--f7qm-c2); border-color:var(--f7qm-c2); color:#fff; }
.f7qm-gg {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:16px;
  max-width:1200px; margin:0 auto 3rem; padding:0 1.5rem;
}

/* ===== BANNER-E (stats + CTA) ===== */
.f7qm-banner {
  max-width:1200px; margin:1rem auto; padding:2.5rem 1.5rem;
  background:linear-gradient(120deg, rgba(155,89,182,.18), rgba(233,30,140,.12));
  border:1px solid var(--f7qm-br); border-radius:calc(var(--f7qm-r) + 6px);
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.f7qm-stats { display:flex; gap:2.5rem; flex-wrap:wrap; }
.f7qm-stat { text-align:center; }
.f7qm-stat b { display:block; font-family:var(--f7qm-head); font-size:2.4rem; color:var(--f7qm-c3); line-height:1; }
.f7qm-stat span { font-size:.78rem; opacity:.75; text-transform:uppercase; letter-spacing:.08em; }

/* ===== WORKS-C (zigzag) ===== */
.f7qm-zig { display:flex; flex-direction:column; gap:2rem; max-width:980px; margin:0 auto; }
.f7qm-zrow {
  display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center;
  background:var(--f7qm-cd); border:1px solid var(--f7qm-br); border-radius:var(--f7qm-r); padding:2rem;
}
.f7qm-zrow:nth-child(even) .f7qm-ztext { order:2; }
.f7qm-zrow:nth-child(even) .f7qm-zart { order:1; }
.f7qm-znum { font-family:var(--f7qm-head); font-size:3.5rem; font-weight:700; color:var(--f7qm-c1); opacity:.35; line-height:1; }
.f7qm-ztext h3 { font-size:1.35rem; margin:.4rem 0 .6rem; }
.f7qm-ztext p { opacity:.82; font-size:.95rem; }
.f7qm-zart {
  aspect-ratio:16/10; border-radius:var(--f7qm-r); display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 40% 30%, rgba(233,30,140,.3), transparent 60%), var(--f7qm-bg);
  border:1px solid var(--f7qm-br);
}
.f7qm-zart svg { width:54%; height:54%; opacity:.85; }

/* ===== REVIEWS-B (masonry CSS columns) ===== */
.f7qm-masonry { columns:3; column-gap:1.25rem; max-width:1100px; margin:0 auto; }
.f7qm-rev {
  break-inside:avoid; margin-bottom:1.25rem; background:var(--f7qm-cd);
  border:1px solid var(--f7qm-br); border-radius:var(--f7qm-r); padding:1.4rem;
}
.f7qm-rev .stars { display:flex; gap:2px; margin-bottom:.6rem; }
.f7qm-rev .stars .st { width:15px; height:15px; fill:var(--f7qm-c3); }
.f7qm-rev .stars .st-e { fill:rgba(243,156,18,.25); }
.f7qm-rev p { font-size:.92rem; opacity:.9; margin-bottom:.9rem; }
.f7qm-rev .who { display:flex; align-items:center; gap:.6rem; }
.f7qm-rev .ava { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--f7qm-c1),var(--f7qm-c2)); display:flex; align-items:center; justify-content:center; font-family:var(--f7qm-head); font-weight:700; color:#fff; font-size:.8rem; }
.f7qm-rev .who b { font-size:.85rem; color:#fff; display:block; }
.f7qm-rev .who span { font-size:.72rem; opacity:.6; }

/* ===== SEO block ===== */
.f7qm-seo { max-width:900px; margin:0 auto; padding:3rem 1.5rem; }
.f7qm-seo h2 { font-size:1.5rem; margin-bottom:1rem; }
.f7qm-seo p { opacity:.78; margin-bottom:1rem; font-size:.95rem; }

/* ===== CONTENT pages (terms/about/etc.) ===== */
.f7qm-doc { max-width:860px; margin:0 auto; padding:2.5rem 1.5rem; }
.f7qm-doc h1 { font-size:2.2rem; margin-bottom:.5rem; }
.f7qm-doc h2 { font-size:1.3rem; margin:2rem 0 .75rem; color:var(--f7qm-c1); }
.f7qm-doc p, .f7qm-doc li { opacity:.85; margin-bottom:.8rem; font-size:.95rem; }
.f7qm-doc ul { padding-left:1.2rem; list-style:disc; }
.f7qm-doc ul li { margin-bottom:.4rem; }
.f7qm-faq { max-width:820px; margin:0 auto; }
.f7qm-faq details { background:var(--f7qm-cd); border:1px solid var(--f7qm-br); border-radius:var(--f7qm-r); padding:1rem 1.25rem; margin-bottom:.8rem; }
.f7qm-faq summary { font-family:var(--f7qm-head); font-weight:700; cursor:pointer; color:#fff; }
.f7qm-faq p { margin-top:.7rem; opacity:.82; font-size:.92rem; }

/* ===== CONTACT form ===== */
.f7qm-form { max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:1rem; }
.f7qm-frow { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.f7qm-form label { font-size:.8rem; font-weight:700; opacity:.8; display:block; margin-bottom:.35rem; }
.f7qm-form input, .f7qm-form select, .f7qm-form textarea {
  width:100%; background:var(--f7qm-cd); border:1px solid var(--f7qm-br); color:var(--f7qm-tx);
  border-radius:var(--f7qm-r); padding:.75rem 1rem; font-family:var(--f7qm-body); font-size:.95rem;
}
.f7qm-form input:focus, .f7qm-form select:focus, .f7qm-form textarea:focus { outline:none; border-color:var(--f7qm-c1); }
#formSuccess { background:rgba(155,89,182,.12); border:1px solid var(--f7qm-c1); border-radius:var(--f7qm-r); padding:1rem; color:#fff; }

/* ===== FOOTER-B (3 columns) ===== */
.f7qm-ftr { background:var(--f7qm-cd); border-top:1px solid var(--f7qm-br); padding:3rem 1.5rem 2rem; }
.f7qm-ftr-in { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
.f7qm-ftr-brand { display:flex; flex-direction:column; gap:.75rem; }
.f7qm-ftr-brand .f7qm-lg { font-size:1.1rem; }
.f7qm-ftr-brand p { font-size:.82rem; opacity:.65; max-width:260px; }
.f7qm-ftr-col h4 { font-family:var(--f7qm-head); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--f7qm-c3); margin-bottom:.9rem; }
.f7qm-ftr-col a { display:block; font-size:.85rem; opacity:.75; margin-bottom:.5rem; }
.f7qm-ftr-col a:hover { opacity:1; color:var(--f7qm-c1); }
.f7qm-ftr-bottom { max-width:1100px; margin:2rem auto 0; padding-top:1.5rem; border-top:1px solid var(--f7qm-br); font-size:.75rem; opacity:.6; text-align:center; line-height:1.7; }

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1280px) {
  .f7qm-sec, .f7qm-cr-wrap, .f7qm-banner, .f7qm-gg, .f7qm-cts, .f7qm-search { max-width:1040px; }
}
@media (max-width:1024px) {
  /* sidebar -> drawer */
  .f7qm-sb { transform:translateX(-100%); top:64px; height:calc(100vh - 64px); z-index:200; }
  .f7qm-sb.open { transform:translateX(0); }
  .f7qm-sbo { z-index:190; top:64px; }
  .f7qm-main, .f7qm-ftr { margin-left:0 !important; }
  .f7qm-mn { display:flex; align-items:center; justify-content:space-around; }
  body { padding-bottom:60px; }
  .f7qm-masonry { columns:2; }
}
@media (min-width:1024px) { body { padding-bottom:0; } }
@media (max-width:768px) {
  .f7qm-hbg { display:flex; }
  .f7qm-nav { display:none; }
  .f7qm-hdr-in { justify-content:space-between; padding:0 1rem; }
  .f7qm-ftr-in { grid-template-columns:1fr 1fr; }
  .f7qm-zrow { grid-template-columns:1fr; }
  .f7qm-zrow:nth-child(even) .f7qm-ztext { order:0; }
  .f7qm-zrow:nth-child(even) .f7qm-zart { order:0; }
  .f7qm-banner { flex-direction:column; align-items:flex-start; }
}
@media (max-width:600px) {
  .f7qm-frow { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  body { font-size:15px; }
  .f7qm-masonry { columns:1; }
  .f7qm-ftr-in { grid-template-columns:1fr; }
  .f7qm-gg { grid-template-columns:repeat(2, 1fr); gap:10px; }
  .f7qm-cr .f7qm-gc { flex:0 0 80vw; width:80vw; }
  .f7qm-stats { gap:1.5rem; }
  .f7qm-form input, .f7qm-form select, .f7qm-form textarea { min-height:48px; }
  .f7qm-hero-card { padding:2rem 1.25rem; }
}
@media (max-width:375px) {
  .f7qm-hdr-in { padding:0 .75rem; }
  .f7qm-gg { gap:.5rem; }
}