/* ============================================================
   DappleFly — Cosmic Purple (Option F) — prefix f7qm
   Section order V3: Hero -> Reviews -> Games -> How It Works -> Banner -> SEO -> Footer
   Sidebar SIDEBAR-A (left 220px) | Hamburger HBG-A (lines -> X, drawer from left)
   ============================================================ */

:root {
  --f7qm-bg: #08001f;
  --f7qm-c1: #9B59B6;   /* primary */
  --f7qm-c2: #E91E8C;   /* accent  */
  --f7qm-c3: #F39C12;   /* cta     */
  --f7qm-ct: #111;      /* cta text*/
  --f7qm-tx: #d0b8e8;   /* body text */
  --f7qm-cd: #120030;   /* card    */
  --f7qm-br: rgba(155,89,182,.25);
  --f7qm-r:  16px;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  font-family: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--f7qm-bg);
  /* space/nebula radial gradients — layered depth */
  background-image:
    radial-gradient(circle at 15% 10%, rgba(155,89,182,.18), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(233,30,140,.14), transparent 42%),
    radial-gradient(circle at 50% 90%, rgba(243,156,18,.10), transparent 45%);
  background-attachment: fixed;
  color: var(--f7qm-tx);
  line-height: 1.6;
  min-height: 100vh;
}

h1,h2,h3,h4 { font-family:"Space Grotesk","Segoe UI",system-ui,sans-serif; color:#fff; line-height:1.15; letter-spacing:-.01em; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
ul { list-style:none; }

.f7qm-wrap { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
.f7qm-sec { padding:3.5rem 0; }
.f7qm-sec h2.f7qm-title { font-size:clamp(1.6rem,4vw,2.4rem); margin-bottom:.4rem; }
.f7qm-sub { opacity:.7; margin-bottom:2rem; max-width:60ch; }
.f7qm-eyebrow { color:var(--f7qm-c2); font-weight:800; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; }

/* ---------- Buttons ---------- */
.f7qm-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:.85rem;
  padding:.7rem 1.4rem; border-radius:var(--f7qm-r); cursor:pointer;
  border:1px solid transparent; transition:transform .2s, box-shadow .2s, background .2s;
  white-space:nowrap; text-align:center;
}
.f7qm-btn-cta { background:var(--f7qm-c3); color:var(--f7qm-ct); }
.f7qm-btn-cta:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(243,156,18,.35); }
.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 16px rgba(155,89,182,.3); }
.f7qm-btn-lg { padding:.95rem 2rem; font-size:.95rem; }

/* ---------- Header ---------- */
.f7qm-hdr { position:fixed; top:0; left:0; right:0; height:64px; z-index:100; background:rgba(8,0,31,.9); 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%; }
.f7qm-lg { display:flex; align-items:center; gap:.55rem; font-family:"Space Grotesk",sans-serif; font-weight:800; font-size:1.15rem; color:#fff; }
.f7qm-lg img { width:32px; height:32px; }
.f7qm-lg b { color:var(--f7qm-c2); }
.f7qm-nav { display:flex; gap:.15rem; margin-left:auto; }
.f7qm-nl { padding:.5rem .8rem; border-radius:10px; font-weight:600; font-size:.85rem; color:var(--f7qm-tx); transition:color .2s, background .2s; }
.f7qm-nl:hover { color:#fff; background:rgba(155,89,182,.12); }
.f7qm-nl.active { color:var(--f7qm-c2); }
.f7qm-act { display:flex; gap:.5rem; align-items:center; }
.f7qm-au { display:flex; }
.f7qm-au #auth-username { font-weight:700; color:#fff; font-size:.85rem; }

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

/* ---------- Sidebar SIDEBAR-A (left 220px) ---------- */
.f7qm-sb { position:fixed; top:64px; left:0; width:220px; height:calc(100vh - 64px); background:var(--f7qm-cd); overflow-y:auto; z-index:90; display:flex; flex-direction:column; border-right:1px solid var(--f7qm-br); transition:transform .3s; }
.f7qm-sb__nav { padding:.75rem 0; display:flex; flex-direction:column; }
.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, .f7qm-sbl.active { color:var(--f7qm-c1); background:rgba(155,89,182,.08); border-left-color:var(--f7qm-c1); }
.f7qm-sb__auth { display:none; padding:.75rem 1rem; border-top:1px solid var(--f7qm-br); gap:.5rem; flex-direction:column; }
.f7qm-sb__auth #sidebar-username { font-weight:800; color:#fff; text-align:center; padding:.3rem; }
.f7qm-sbf { margin-top:auto; padding:1rem 1.25rem; border-top:1px solid var(--f7qm-br); display:flex; flex-direction:column; gap:.45rem; }
.f7qm-sbf a { font-size:.75rem; color:var(--f7qm-tx); opacity:.55; }
.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 { padding-top:64px; min-height:60vh; }
@media (min-width:1024px) { .f7qm-main, .f7qm-ftr { margin-left:220px; } }

/* ---------- Notice bar ---------- */
.f7qm-nb { background:rgba(233,30,140,.1); border-bottom:1px solid var(--f7qm-br); text-align:center; font-size:.75rem; font-weight:700; letter-spacing:.03em; padding:.55rem 1rem; color:var(--f7qm-tx); }

/* ---------- HERO-C (diagonal cut) ---------- */
.f7qm-hero { position:relative; padding:5rem 0 7rem; clip-path:polygon(0 0,100% 0,100% 85%,0 100%); background:
  radial-gradient(circle at 80% 30%, rgba(233,30,140,.22), transparent 45%),
  radial-gradient(circle at 20% 80%, rgba(155,89,182,.25), transparent 50%),
  linear-gradient(160deg,#12002f,#08001f); overflow:hidden; }
.f7qm-hero-in { display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center; }
.f7qm-hero h1 { font-size:clamp(2.2rem,5.5vw,3.8rem); margin:.8rem 0 1rem; }
.f7qm-hero h1 em { font-style:normal; background:linear-gradient(90deg,var(--f7qm-c1),var(--f7qm-c2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.f7qm-hero p.f7qm-lead { font-size:1.05rem; max-width:46ch; opacity:.85; margin-bottom:1.6rem; }
.f7qm-hero-cta { display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:1.3rem; }
.f7qm-hero-dis { font-size:.75rem; opacity:.6; }
/* decor dots right */
.f7qm-hero-art { position:relative; height:320px; }
.f7qm-hero-art .dot { position:absolute; border-radius:50%; }
.f7qm-hero-art .ring { position:absolute; border-radius:50%; border:1px solid var(--f7qm-br); }
.f7qm-dotgrid { position:absolute; inset:0; background-image:radial-gradient(var(--f7qm-c1) 1.4px, transparent 1.4px); background-size:26px 26px; opacity:.25; mask-image:radial-gradient(circle at 60% 45%, #000 30%, transparent 72%); }
@keyframes f7qm-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
.f7qm-orb { position:absolute; width:150px; height:150px; border-radius:50%; top:50%; left:55%; transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%, #fff2, transparent 60%), linear-gradient(135deg,var(--f7qm-c1),var(--f7qm-c2)); box-shadow:0 0 60px rgba(233,30,140,.4); animation:f7qm-float 6s ease-in-out infinite; }

/* ---------- Carousel CAROUSEL-E (editorial numbered) ---------- */
.f7qm-cr-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.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 14px rgba(155,89,182,.35); }
.f7qm-cr-view { overflow:hidden; }
.f7qm-cr { display:flex; gap:1.5rem; transition:transform .4s ease; padding:1.5rem 0 .5rem; will-change:transform; }

/* ---------- Game card CARD-D (glow on hover) — shared carousel + grid ---------- */
.f7qm-gc { position:relative; flex:0 0 200px; width:200px; background:var(--f7qm-cd); border:1px solid transparent; border-radius:var(--f7qm-r); overflow:hidden; cursor:pointer; transition:transform .3s, border-color .3s, box-shadow .3s; outline:none; }
.f7qm-gc:hover, .f7qm-gc:focus-visible { transform:translateY(-6px); border-color:var(--f7qm-c1); box-shadow:0 12px 30px rgba(8,0,31,.6), 0 0 20px rgba(155,89,182,.4); }
.f7qm-gct { position:relative; aspect-ratio:3/4; overflow:hidden; background:#0d0022; }
.f7qm-gct img { width:100%; height:100%; object-fit:cover; }
.f7qm-cr-num { position:absolute; top:-1.2rem; left:.4rem; font-family:"Space Grotesk",sans-serif; font-size:3rem; font-weight:800; color:var(--f7qm-c2); opacity:.18; z-index:2; pointer-events:none; }
.f7qm-gco { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; background:linear-gradient(0deg,rgba(8,0,31,.85),rgba(8,0,31,.25)); opacity:0; transition:opacity .3s; }
.f7qm-gc:hover .f7qm-gco, .f7qm-gc:focus-visible .f7qm-gco { opacity:1; }
.f7qm-gcp { background:var(--f7qm-c3); color:var(--f7qm-ct); border:none; font-family:"Space Grotesk",sans-serif; font-weight:800; font-size:.78rem; padding:.55rem 1.1rem; border-radius:50px; cursor:pointer; }
.f7qm-gci { padding:.6rem .75rem .8rem; }
.f7qm-gci p:first-child { font-weight:800; font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; }
.f7qm-gci p:last-child { font-size:.7rem; opacity:.6; }

/* ---------- Games grid (games.html) ---------- */
.f7qm-tools { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin:1.5rem 0; }
.f7qm-search { flex:1; min-width:220px; }
.f7qm-search input { width:100%; background:var(--f7qm-cd); border:1px solid var(--f7qm-br); border-radius:var(--f7qm-r); padding:.7rem 1rem; color:var(--f7qm-tx); font-size:.9rem; }
.f7qm-search input:focus { outline:none; border-color:var(--f7qm-c1); }
.f7qm-cts { display:flex; gap:.5rem; flex-wrap:wrap; margin:1.25rem 0 2rem; }
.f7qm-ct { background:var(--f7qm-cd); border:1px solid var(--f7qm-br); color:var(--f7qm-tx); padding:.5rem 1rem; border-radius:50px; font-weight:700; font-size:.82rem; cursor:pointer; transition:all .2s; }
.f7qm-ct:hover { border-color:var(--f7qm-c1); }
.f7qm-ct.active { background:linear-gradient(90deg,var(--f7qm-c1),var(--f7qm-c2)); color:#fff; border-color:transparent; }
.f7qm-gg { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1.25rem; }
.f7qm-gg .f7qm-gc { flex:none; width:auto; }
.f7qm-empty { text-align:center; opacity:.6; padding:3rem 1rem; }

/* ---------- Reviews REVIEWS-C (one big review, quote, dots) ---------- */
.f7qm-rev { position:relative; background:var(--f7qm-cd); border:1px solid var(--f7qm-br); border-radius:var(--f7qm-r); padding:3rem 2.5rem 2.5rem; max-width:760px; margin:0 auto; text-align:center; overflow:hidden; }
.f7qm-rev-q { position:absolute; top:-1.2rem; left:1rem; font-family:"Space Grotesk",serif; font-size:8rem; line-height:1; color:var(--f7qm-c1); opacity:.14; }
.f7qm-rev-slide { display:none; }
.f7qm-rev-slide.active { display:block; }
.f7qm-rev-text { font-size:1.15rem; color:#fff; font-weight:500; margin-bottom:1.4rem; position:relative; z-index:1; }
.f7qm-rev-stars { color:var(--f7qm-c3); letter-spacing:.15em; margin-bottom:.5rem; }
.f7qm-rev-name { font-weight:800; color:var(--f7qm-c2); }
.f7qm-rev-city { font-size:.8rem; opacity:.6; }
.f7qm-rev-dots { display:flex; gap:.5rem; justify-content:center; margin-top:1.6rem; }
.f7qm-rev-dot { width:10px; height:10px; border-radius:50%; border:1px solid var(--f7qm-c1); background:transparent; cursor:pointer; transition:all .2s; }
.f7qm-rev-dot.active { background:var(--f7qm-c1); box-shadow:0 0 10px var(--f7qm-c1); }

/* ---------- How It Works WORKS-D (big translucent number bg) ---------- */
.f7qm-works { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.f7qm-work { position:relative; background:var(--f7qm-cd); border:1px solid var(--f7qm-br); border-radius:var(--f7qm-r); padding:2rem 1.5rem; overflow:hidden; }
.f7qm-work-num { position:absolute; top:-1.5rem; right:.5rem; font-family:"Space Grotesk",sans-serif; font-weight:800; font-size:8rem; line-height:1; color:var(--f7qm-c1); opacity:.08; pointer-events:none; }
.f7qm-work h3 { font-size:1.15rem; margin-bottom:.5rem; position:relative; }
.f7qm-work p { font-size:.9rem; opacity:.8; position:relative; }

/* ---------- Banner BANNER-E (stats + cta) ---------- */
.f7qm-banner { background:linear-gradient(120deg,rgba(155,89,182,.18),rgba(233,30,140,.14)); border:1px solid var(--f7qm-br); border-radius:var(--f7qm-r); padding:2.5rem 2rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; }
.f7qm-stats { display:flex; gap:2.5rem; flex-wrap:wrap; }
.f7qm-stat b { display:block; font-family:"Space Grotesk",sans-serif; font-size:2.4rem; color:#fff; background:linear-gradient(90deg,var(--f7qm-c1),var(--f7qm-c2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.f7qm-stat span { font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; opacity:.7; }

/* ---------- SEO block ---------- */
.f7qm-seo { max-width:820px; }
.f7qm-seo p { margin-bottom:1rem; opacity:.82; font-size:.95rem; }
.f7qm-seo h2 { margin-bottom:1rem; }

/* ---------- Content pages (article) ---------- */
.f7qm-article { max-width:820px; margin:0 auto; }
.f7qm-article h1 { font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:1rem; }
.f7qm-article h2 { font-size:1.4rem; margin:2rem 0 .8rem; }
.f7qm-article p, .f7qm-article li { opacity:.85; margin-bottom:.9rem; }
.f7qm-article ul.f7qm-list { list-style:disc; padding-left:1.4rem; }
.f7qm-article ul.f7qm-list li { margin-bottom:.5rem; }
.f7qm-card { background:var(--f7qm-cd); border:1px solid var(--f7qm-br); border-radius:var(--f7qm-r); padding:1.5rem; margin-bottom:1.25rem; }

/* ---------- FAQ ---------- */
.f7qm-faq details { background:var(--f7qm-cd); border:1px solid var(--f7qm-br); border-radius:var(--f7qm-r); padding:0 1.25rem; margin-bottom:.75rem; }
.f7qm-faq summary { cursor:pointer; font-weight:700; color:#fff; padding:1rem 0; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.f7qm-faq summary::-webkit-details-marker { display:none; }
.f7qm-faq summary::after { content:"+"; color:var(--f7qm-c2); font-size:1.3rem; }
.f7qm-faq details[open] summary::after { content:"\2212"; }
.f7qm-faq details p { padding-bottom:1rem; opacity:.82; }

/* ---------- Contact form ---------- */
.f7qm-form { display:grid; gap:1rem; max-width:640px; }
.f7qm-row2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.f7qm-form label { font-size:.8rem; font-weight:700; margin-bottom:.35rem; display:block; }
.f7qm-form input, .f7qm-form select, .f7qm-form textarea { width:100%; background:var(--f7qm-cd); border:1px solid var(--f7qm-br); border-radius:var(--f7qm-r); padding:.75rem 1rem; color:var(--f7qm-tx); font-family:inherit; font-size:.9rem; }
.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,.15); border:1px solid var(--f7qm-c1); border-radius:var(--f7qm-r); padding:1rem; color:#fff; }

/* ---------- Footer FOOTER-B (3 columns) ---------- */
.f7qm-ftr { background:var(--f7qm-cd); border-top:1px solid var(--f7qm-br); padding:3rem 0 1.5rem; margin-top:2rem; }
.f7qm-ftr-in { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
.f7qm-ftr-brand { max-width:260px; }
.f7qm-ftr-brand .f7qm-lg { margin-bottom:.8rem; }
.f7qm-ftr-brand p { font-size:.82rem; opacity:.65; }
.f7qm-ftr-col h4 { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--f7qm-c2); margin-bottom:.9rem; }
.f7qm-ftr-col a { display:block; font-size:.85rem; opacity:.75; margin-bottom:.55rem; }
.f7qm-ftr-col a:hover { opacity:1; color:var(--f7qm-c1); }
.f7qm-ftr-bottom { border-top:1px solid var(--f7qm-br); margin-top:2.5rem; padding-top:1.5rem; font-size:.75rem; opacity:.6; text-align:center; }
.f7qm-ftr-bottom p { margin-bottom:.5rem; }
.f7qm-badges { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-top:.8rem; }
.f7qm-badge { border:1px solid var(--f7qm-br); border-radius:50px; padding:.25rem .8rem; font-size:.68rem; font-weight:800; letter-spacing:.05em; }

/* ---------- 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:inherit; font-weight:700; font-size:.75rem; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.f7qm-mni:hover { color:var(--f7qm-c1); }

/* ---------- Auth modal ---------- */
.f7qm-authov { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9998; display:flex; align-items:center; justify-content:center; padding:1rem; }
.f7qm-authbox { background:var(--f7qm-cd); border:1px solid var(--f7qm-br); border-radius:var(--f7qm-r); width:100%; max-width:400px; padding:2rem; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.f7qm-authbox h3 { font-size:1.5rem; margin-bottom:.3rem; }
.f7qm-authbox .f7qm-authsub { font-size:.82rem; opacity:.65; margin-bottom:1.4rem; }
.f7qm-authbox form { display:grid; gap:.9rem; }
.f7qm-authbox input { background:var(--f7qm-bg); border:1px solid var(--f7qm-br); border-radius:var(--f7qm-r); padding:.75rem 1rem; color:var(--f7qm-tx); font-size:.9rem; }
.f7qm-authbox input:focus { outline:none; border-color:var(--f7qm-c1); }
.f7qm-authbox .f7qm-authswitch { text-align:center; font-size:.8rem; margin-top:1rem; opacity:.8; }
.f7qm-authbox .f7qm-authswitch a { color:var(--f7qm-c2); font-weight:700; cursor:pointer; }
.f7qm-authbox .f7qm-authnote { font-size:.7rem; opacity:.55; text-align:center; margin-top:.8rem; }
.f7qm-authclose { float:right; background:none; border:none; color:var(--f7qm-tx); font-size:1.3rem; cursor:pointer; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1280px) {
  .f7qm-wrap { padding:0 1.25rem; }
}
@media (max-width:1024px) {
  /* sidebar becomes drawer from left (HBG-A) */
  .f7qm-sb { transform:translateX(-100%); top:0; height:100vh; z-index:200; width:280px; box-shadow:6px 0 30px rgba(0,0,0,.5); }
  .f7qm-sb.open { transform:translateX(0); }
  .f7qm-main, .f7qm-ftr { margin-left:0 !important; }
  .f7qm-sb__auth { display:flex; }
  .f7qm-mn { display:flex; align-items:center; }
  body { padding-bottom:60px; }
  .f7qm-works { grid-template-columns:1fr; }
  .f7qm-ftr-in { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .f7qm-hdr-in { justify-content:space-between; }
  .f7qm-hbg { display:flex; }
  .f7qm-nav { display:none; }
  .f7qm-act { display:none; }
  .f7qm-hero-in { grid-template-columns:1fr; }
  .f7qm-hero-art { display:none; }
  .f7qm-hero { clip-path:polygon(0 0,100% 0,100% 94%,0 100%); padding:3.5rem 0 5rem; }
  .f7qm-banner { flex-direction:column; text-align:center; align-items:center; }
  .f7qm-stats { justify-content:center; }
  .f7qm-ftr-in { grid-template-columns:1fr; }
  .f7qm-ftr-brand { max-width:none; }
}
@media (max-width:480px) {
  html { font-size:15px; }
  .f7qm-gg { grid-template-columns:repeat(2,1fr); gap:.75rem; }
  .f7qm-gc { flex:0 0 78vw; width:78vw; }
  .f7qm-gg .f7qm-gc { flex:none; width:auto; }
  .f7qm-row2 { grid-template-columns:1fr; }
  .f7qm-form input, .f7qm-form select, .f7qm-form textarea { min-height:48px; }
  .f7qm-stats { gap:1.5rem; }
  .f7qm-rev { padding:2.5rem 1.25rem 2rem; }
}
@media (max-width:375px) {
  .f7qm-hdr-in { padding:0 .75rem; }
  .f7qm-wrap { padding:0 .9rem; }
  .f7qm-gg { gap:.5rem; }
}