/* ============================================================
   Zena Play — style.css
   Design: Option C "Arctic Flash"  |  prefix c7qm
   Sidebar SIDEBAR-A (left 220) | Hero HERO-C (diagonal) | Carousel CAROUSEL-E (numbered)
   Card CARD-D (glow on hover) | Hamburger HBG-A (lines->X, drawer from left)
   Fonts (system fallback, zero CDN): Exo 2 -> sans headings; Source Sans Pro -> sans body
   ============================================================ */

:root {
  --c7qm-bg: #0d1b2a;
  --c7qm-c1: #00C2FF;                 /* primary */
  --c7qm-c2: #FF4757;                 /* accent  */
  --c7qm-c3: #7BED9F;                 /* cta      */
  --c7qm-ct: #0a1a10;                 /* cta text */
  --c7qm-tx: #b8d4e8;                 /* text     */
  --c7qm-cd: #0f2235;                 /* card     */
  --c7qm-br: rgba(0,194,255,.2);      /* border   */
  --c7qm-r:  8px;                     /* radius   */
  --c7qm-fh: 'Exo 2', 'Segoe UI', system-ui, sans-serif;
  --c7qm-fb: 'Source Sans Pro', system-ui, -apple-system, Roboto, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--c7qm-bg); color:var(--c7qm-tx);
  font-family:var(--c7qm-fb); line-height:1.6;
  padding-top:64px; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
h1,h2,h3,h4 { font-family:var(--c7qm-fh); color:#eaf6ff; line-height:1.15; }
::selection { background:var(--c7qm-c1); color:#00121e; }

/* ---------- BUTTONS ---------- */
.c7qm-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--c7qm-fh); font-weight:700; font-size:.85rem; letter-spacing:.02em;
  padding:.6rem 1.1rem; border-radius:var(--c7qm-r); border:1px solid transparent;
  cursor:pointer; transition:transform .2s, box-shadow .2s, background .2s, color .2s;
  white-space:nowrap;
}
.c7qm-btn:hover { transform:translateY(-2px); }
.c7qm-btn-cta { background:var(--c7qm-c3); color:var(--c7qm-ct); }
.c7qm-btn-cta:hover { box-shadow:0 0 18px rgba(123,237,159,.5); }
.c7qm-btn-ol { background:transparent; color:var(--c7qm-tx); border-color:var(--c7qm-br); }
.c7qm-btn-ol:hover { color:var(--c7qm-c1); border-color:var(--c7qm-c1); box-shadow:0 0 14px rgba(0,194,255,.3); }

/* ---------- HEADER ---------- */
.c7qm-hdr { position:fixed; top:0; left:0; right:0; height:64px; z-index:100;
  background:rgba(13,27,42,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c7qm-br); }
.c7qm-hdr-in { display:flex; align-items:center; gap:1rem; padding:0 1.5rem; height:100%; max-width:1440px; margin:0 auto; }
.c7qm-lg { display:flex; align-items:center; gap:.55rem; font-family:var(--c7qm-fh); font-weight:800; font-size:1.15rem; color:#eaf6ff; }
.c7qm-lg svg { width:30px; height:30px; }
.c7qm-lg b { color:var(--c7qm-c1); }
.c7qm-nav { display:flex; gap:.15rem; margin-left:auto; }
.c7qm-nl { position:relative; padding:.5rem .8rem; font-weight:600; font-size:.88rem; border-radius:var(--c7qm-r); transition:color .2s, background .2s; }
.c7qm-nl:hover { color:var(--c7qm-c1); }
.c7qm-nl.active { color:var(--c7qm-c1); }
.c7qm-nl.active::after { content:''; position:absolute; left:.8rem; right:.8rem; bottom:2px; height:2px; background:var(--c7qm-c1); box-shadow:0 0 8px var(--c7qm-c1); }
.c7qm-act { display:flex; gap:.5rem; align-items:center; }

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

/* ---------- SIDEBAR (SIDEBAR-A: left 220) ---------- */
.c7qm-sb { position:fixed; top:64px; left:0; width:220px; height:calc(100vh - 64px);
  background:var(--c7qm-cd); border-right:1px solid var(--c7qm-br);
  overflow-y:auto; z-index:90; display:flex; flex-direction:column;
  transition:transform .3s ease; }
.c7qm-sb__nav { display:flex; flex-direction:column; padding:.75rem 0; }
.c7qm-sbl { display:flex; align-items:center; gap:.75rem; padding:.65rem 1.25rem;
  color:var(--c7qm-tx); font-weight:600; font-size:.88rem; text-decoration:none;
  border-left:3px solid transparent; transition:all .2s; }
.c7qm-sbl::before { content:''; width:7px; height:7px; border-radius:2px; background:var(--c7qm-br); transition:background .2s, box-shadow .2s; flex-shrink:0; }
.c7qm-sbl:hover, .c7qm-sbl.active { color:var(--c7qm-c1); background:rgba(0,194,255,.06); border-left-color:var(--c7qm-c1); }
.c7qm-sbl:hover::before, .c7qm-sbl.active::before { background:var(--c7qm-c1); box-shadow:0 0 8px var(--c7qm-c1); }
.c7qm-sb__auth { display:none; padding:.85rem 1rem; border-top:1px solid var(--c7qm-br); gap:.5rem; flex-direction:column; }
.c7qm-sb__auth #sidebar-auth-guest, .c7qm-sb__auth #sidebar-auth-user { display:flex; flex-direction:column; gap:.5rem; }
.c7qm-sb__auth .c7qm-btn { width:100%; justify-content:center; }
#sidebar-username { font-weight:700; color:var(--c7qm-c1); font-size:.85rem; text-align:center; }
.c7qm-sbf { margin-top:auto; padding:1rem; border-top:1px solid var(--c7qm-br); display:flex; flex-direction:column; gap:.4rem; }
.c7qm-sbf a { font-size:.75rem; color:var(--c7qm-tx); opacity:.6; }
.c7qm-sbf a:hover { opacity:1; color:var(--c7qm-c1); }
.c7qm-sbo { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:190; display:none; }
.c7qm-sbo.show { display:block; }

/* ---------- MAIN / SECTIONS ---------- */
.c7qm-main { margin-left:220px; min-height:calc(100vh - 64px); }
.c7qm-ftr { margin-left:220px; }
.c7qm-sec { padding:3.5rem 2rem; max-width:1200px; margin:0 auto; }
.c7qm-sec h2 { font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:.5rem; }
.c7qm-sec > p.lead { color:var(--c7qm-tx); opacity:.7; margin-bottom:2rem; max-width:640px; }
.c7qm-eyebrow { color:var(--c7qm-c1); font-family:var(--c7qm-fh); font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:.72rem; margin-bottom:.5rem; }

/* ---------- NOTICE BAR ---------- */
.c7qm-nb { background:rgba(0,194,255,.08); border-bottom:1px solid var(--c7qm-br);
  color:var(--c7qm-c1); font-size:.74rem; font-weight:700; letter-spacing:.02em;
  text-align:center; padding:.55rem 1rem; }

/* ---------- HERO (HERO-C: diagonal cut) ---------- */
.c7qm-hero { position:relative; min-height:78vh; display:flex; align-items:center;
  padding:4rem 2rem; overflow:hidden;
  background:
    radial-gradient(circle at 80% 20%, rgba(0,194,255,.12), transparent 45%),
    radial-gradient(circle at 15% 90%, rgba(123,237,159,.08), transparent 40%),
    linear-gradient(135deg, #0a1622, #10283d);
  clip-path:polygon(0 0, 100% 0, 100% 85%, 0 100%); }
.c7qm-hero__in { position:relative; z-index:2; max-width:1200px; margin:0 auto; width:100%; }
.c7qm-hero__badge { display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--c7qm-c3);
  border:1px solid var(--c7qm-br); border-radius:50px; padding:.35rem .9rem; margin-bottom:1.3rem; }
.c7qm-hero h1 { font-size:clamp(2.4rem,6vw,4.4rem); max-width:14ch; margin-bottom:1.1rem;
  background:linear-gradient(120deg,#eaf6ff,#00C2FF); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.c7qm-hero p.sub { font-size:1.1rem; max-width:48ch; opacity:.85; margin-bottom:2rem; }
.c7qm-hero__cta { display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.c7qm-hero__cta .c7qm-btn { padding:.85rem 1.6rem; font-size:.95rem; }
.c7qm-hero__disc { font-size:.75rem; opacity:.55; }
/* decor dots right */
.c7qm-hero__dots { position:absolute; top:50%; right:6%; transform:translateY(-50%);
  display:grid; grid-template-columns:repeat(5,14px); gap:18px; z-index:1; opacity:.5; }
.c7qm-hero__dots span { width:8px; height:8px; border-radius:50%; background:var(--c7qm-c1);
  box-shadow:0 0 10px var(--c7qm-c1); animation:c7qmPulse 3s ease-in-out infinite; }
.c7qm-hero__dots span:nth-child(3n) { background:var(--c7qm-c3); box-shadow:0 0 10px var(--c7qm-c3); animation-delay:.6s; }
.c7qm-hero__dots span:nth-child(4n) { animation-delay:1.2s; opacity:.6; }
@keyframes c7qmPulse { 0%,100%{ transform:scale(1); opacity:.4; } 50%{ transform:scale(1.5); opacity:1; } }

/* ---------- GAME CARD (CARD-D) ---------- */
.c7qm-gc { position:relative; background:var(--c7qm-cd); border:1px solid transparent;
  border-radius:var(--c7qm-r); overflow:hidden; cursor:pointer;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; outline:none; }
.c7qm-gc:hover, .c7qm-gc:focus-visible { transform:translateY(-5px); border-color:var(--c7qm-c1);
  box-shadow:0 0 0 1px var(--c7qm-c1), 0 8px 26px rgba(0,194,255,.28); }
.c7qm-gct { position:relative; aspect-ratio:3/4; overflow:hidden; background:#0a1622; }
.c7qm-gct img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.c7qm-gc:hover .c7qm-gct img { transform:scale(1.06); }
.c7qm-gco { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  background:linear-gradient(180deg, rgba(10,22,34,.2), rgba(10,22,34,.85));
  opacity:0; transition:opacity .3s ease; }
.c7qm-gc:hover .c7qm-gco, .c7qm-gc:focus-visible .c7qm-gco { opacity:1; }
.c7qm-gcp { background:var(--c7qm-c1); color:#00121e; font-family:var(--c7qm-fh); font-weight:800; font-size:.8rem;
  border:none; border-radius:50px; padding:.55rem 1.3rem; cursor:pointer; box-shadow:0 0 16px rgba(0,194,255,.5); }
.c7qm-gci { padding:.6rem .7rem .75rem; }

/* ---------- CAROUSEL (CAROUSEL-E: editorial numbered) ---------- */
.c7qm-cr-wrap { position:relative; }
.c7qm-cr-viewport { overflow:hidden; }
.c7qm-cr { display:flex; gap:18px; transition:transform .4s ease; counter-reset:c7qmslot; padding:1.4rem 0 .5rem; }
.c7qm-cr .c7qm-gc { flex:0 0 180px; width:180px; overflow:visible; }
.c7qm-cr .c7qm-gc::before { counter-increment:c7qmslot; content:counter(c7qmslot,decimal-leading-zero);
  position:absolute; top:-1.35rem; left:-.2rem; z-index:1; font-family:var(--c7qm-fh); font-weight:800;
  font-size:3rem; line-height:1; color:var(--c7qm-c1); opacity:.16; }
.c7qm-cr .c7qm-gct { border-radius:var(--c7qm-r); }
.c7qm-crb { position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:42px; height:42px; border-radius:50%; background:var(--c7qm-cd); border:1px solid var(--c7qm-br);
  color:var(--c7qm-c1); font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s; }
.c7qm-crb:hover { background:var(--c7qm-c1); color:#00121e; box-shadow:0 0 16px rgba(0,194,255,.5); }
.c7qm-crb.prev { left:-14px; }
.c7qm-crb.next { right:-14px; }

/* ---------- GAMES GRID + TABS (games.html) ---------- */
.c7qm-cts { display:flex; gap:.5rem; flex-wrap:wrap; margin:1.25rem 0 1.75rem; }
.c7qm-ct { background:var(--c7qm-cd); border:1px solid var(--c7qm-br); color:var(--c7qm-tx);
  font-family:var(--c7qm-fh); font-weight:600; font-size:.82rem; padding:.5rem 1.05rem; border-radius:50px; cursor:pointer; transition:all .2s; }
.c7qm-ct:hover { border-color:var(--c7qm-c1); color:var(--c7qm-c1); }
.c7qm-ct.active { background:var(--c7qm-c1); color:#00121e; border-color:var(--c7qm-c1); box-shadow:0 0 14px rgba(0,194,255,.4); }
.c7qm-search { width:100%; max-width:420px; background:var(--c7qm-cd); border:1px solid var(--c7qm-br);
  border-radius:var(--c7qm-r); padding:.7rem 1rem; color:var(--c7qm-tx); font-size:.9rem; }
.c7qm-search:focus { outline:none; border-color:var(--c7qm-c1); box-shadow:0 0 0 2px rgba(0,194,255,.2); }
.c7qm-gg { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1.1rem; }

/* ---------- WORKS (WORKS-B: horizontal line + numbered circles) ---------- */
.c7qm-works { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.c7qm-works::before { content:''; position:absolute; top:26px; left:14%; right:14%; height:2px;
  background:linear-gradient(90deg, var(--c7qm-c1), var(--c7qm-c3)); opacity:.35; }
.c7qm-work { position:relative; text-align:center; padding:0 .5rem; }
.c7qm-work__num { position:relative; z-index:2; width:54px; height:54px; margin:0 auto 1.1rem;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--c7qm-bg); border:2px solid var(--c7qm-c1); color:var(--c7qm-c1);
  font-family:var(--c7qm-fh); font-weight:800; font-size:1.2rem; box-shadow:0 0 16px rgba(0,194,255,.3); }
.c7qm-work h3 { font-size:1.05rem; margin-bottom:.5rem; }
.c7qm-work p { font-size:.88rem; opacity:.75; }

/* ---------- BANNER (BANNER-E: stats + CTA) ---------- */
.c7qm-banner { background:linear-gradient(120deg, #10283d, #0a1622);
  border:1px solid var(--c7qm-br); border-radius:calc(var(--c7qm-r) * 2); padding:2.5rem 2rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.c7qm-stats { display:flex; gap:2.5rem; flex-wrap:wrap; }
.c7qm-stat b { display:block; font-family:var(--c7qm-fh); font-size:2.2rem; color:var(--c7qm-c1); line-height:1; }
.c7qm-stat span { font-size:.8rem; opacity:.7; text-transform:uppercase; letter-spacing:.05em; }

/* ---------- REVIEWS (REVIEWS-C: single big quote + dots) ---------- */
.c7qm-reviews { position:relative; max-width:760px; margin:0 auto; text-align:center; }
.c7qm-reviews__quote { position:relative; padding:1.5rem 1rem 0; min-height:170px; }
.c7qm-reviews__quote::before { content:'\201C'; position:absolute; top:-2.2rem; left:50%; transform:translateX(-50%);
  font-family:Georgia,serif; font-size:8rem; line-height:1; color:var(--c7qm-c1); opacity:.18; }
.c7qm-rv-text { font-size:1.2rem; line-height:1.7; color:#eaf6ff; margin-bottom:1.2rem; }
.c7qm-rv-stars { color:var(--c7qm-c3); letter-spacing:.2em; margin-bottom:.4rem; font-size:1rem; }
.c7qm-rv-name { font-family:var(--c7qm-fh); font-weight:700; color:var(--c7qm-c1); }
.c7qm-rv-city { font-size:.8rem; opacity:.6; }
.c7qm-rv-dots { display:flex; gap:.55rem; justify-content:center; margin-top:1.6rem; }
.c7qm-rv-dot { width:10px; height:10px; border-radius:50%; background:var(--c7qm-br); border:none; cursor:pointer; transition:all .2s; }
.c7qm-rv-dot.active { background:var(--c7qm-c1); box-shadow:0 0 10px var(--c7qm-c1); width:26px; border-radius:6px; }

/* ---------- SEO block ---------- */
.c7qm-seo { background:var(--c7qm-cd); border:1px solid var(--c7qm-br); border-radius:var(--c7qm-r); padding:2rem; }
.c7qm-seo h2 { font-size:1.4rem; margin-bottom:1rem; }
.c7qm-seo p { font-size:.9rem; opacity:.8; margin-bottom:.9rem; }

/* ---------- Article / legal pages ---------- */
.c7qm-article { max-width:820px; }
.c7qm-article h1 { font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:.4rem; }
.c7qm-article h2 { font-size:1.3rem; margin:2rem 0 .75rem; color:var(--c7qm-c1); }
.c7qm-article p, .c7qm-article li { font-size:.95rem; opacity:.85; margin-bottom:.85rem; }
.c7qm-article ul, .c7qm-article ol { margin:0 0 1rem 1.25rem; }
.c7qm-article li { margin-bottom:.4rem; }
.c7qm-article a { color:var(--c7qm-c1); text-decoration:underline; }
.c7qm-updated { font-size:.78rem; opacity:.55; margin-bottom:1.5rem; }

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

/* ---------- Feature cards / generic grid ---------- */
.c7qm-grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; }
.c7qm-fcard { background:var(--c7qm-cd); border:1px solid var(--c7qm-br); border-radius:var(--c7qm-r); padding:1.5rem; transition:border-color .3s, transform .3s; }
.c7qm-fcard:hover { border-color:var(--c7qm-c1); transform:translateY(-4px); }
.c7qm-fcard h3 { font-size:1.05rem; margin-bottom:.5rem; color:var(--c7qm-c1); }
.c7qm-fcard p { font-size:.88rem; opacity:.8; }

/* ---------- Contact form ---------- */
.c7qm-form { max-width:640px; }
.c7qm-form .row2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.c7qm-form label { display:block; font-size:.8rem; font-weight:700; margin:.9rem 0 .35rem; color:var(--c7qm-tx); }
.c7qm-form input, .c7qm-form select, .c7qm-form textarea {
  width:100%; background:var(--c7qm-cd); border:1px solid var(--c7qm-br); border-radius:var(--c7qm-r);
  padding:.75rem 1rem; color:var(--c7qm-tx); font-size:.9rem; font-family:var(--c7qm-fb); }
.c7qm-form input:focus, .c7qm-form select:focus, .c7qm-form textarea:focus {
  outline:none; border-color:var(--c7qm-c1); box-shadow:0 0 0 2px rgba(0,194,255,.2); }
.c7qm-form textarea { resize:vertical; }
#formSuccess { display:none; margin-top:1rem; background:rgba(123,237,159,.12); border:1px solid var(--c7qm-c3);
  color:var(--c7qm-c3); border-radius:var(--c7qm-r); padding:.85rem 1rem; font-size:.88rem; font-weight:600; }

/* ---------- FOOTER (FOOTER-B: 3 columns) ---------- */
.c7qm-ftr { background:var(--c7qm-cd); border-top:1px solid var(--c7qm-br); }
.c7qm-ftr__in { max-width:1200px; margin:0 auto; padding:3rem 2rem 1.5rem;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
.c7qm-ftr__brand .c7qm-lg { margin-bottom:.8rem; }
.c7qm-ftr__brand p { font-size:.82rem; opacity:.65; max-width:34ch; }
.c7qm-ftr__col h4 { font-family:var(--c7qm-fh); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c7qm-c1); margin-bottom:.9rem; }
.c7qm-ftr__col a { display:block; font-size:.85rem; opacity:.75; margin-bottom:.55rem; }
.c7qm-ftr__col a:hover { opacity:1; color:var(--c7qm-c1); }
.c7qm-ftr__disc { max-width:1200px; margin:0 auto; padding:1.5rem 2rem; border-top:1px solid var(--c7qm-br);
  font-size:.75rem; opacity:.6; line-height:1.7; }
.c7qm-ftr__disc strong { color:var(--c7qm-c3); }
.c7qm-badges { display:flex; gap:.6rem; margin:.8rem 0; flex-wrap:wrap; }
.c7qm-badges span { border:1px solid var(--c7qm-br); border-radius:6px; padding:.25rem .55rem; font-size:.7rem; font-weight:800; color:var(--c7qm-c1); }

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1280px) {
  .c7qm-ftr__in { grid-template-columns:1fr 1fr 1fr; }
  .c7qm-ftr__brand { grid-column:1/-1; }
}

@media (max-width:1024px) {
  .c7qm-main, .c7qm-ftr { margin-left:0 !important; margin-right:0 !important; }
  .c7qm-sb { transform:translateX(-100%); top:64px; height:calc(100vh - 64px); z-index:200; }
  .c7qm-sb.open { transform:translateX(0); }
  .c7qm-sbo { top:64px; z-index:190; }
  .c7qm-sb__auth { display:flex; }
  .c7qm-mn { display:flex; align-items:center; justify-content:space-around; }
  body { padding-bottom:60px; }
}
@media (min-width:1025px) { body { padding-bottom:0; } }

@media (max-width:768px) {
  .c7qm-hdr-in { justify-content:space-between; }
  .c7qm-hbg { display:flex; }
  .c7qm-nav { display:none; }
  .c7qm-act { display:none; }
  .c7qm-hero { clip-path:polygon(0 0,100% 0,100% 94%,0 100%); min-height:auto; padding:3rem 1.25rem 4rem; }
  .c7qm-hero__dots { display:none; }
  .c7qm-sec { padding:2.5rem 1.25rem; }
  .c7qm-works { grid-template-columns:1fr; gap:2rem; }
  .c7qm-works::before { display:none; }
  .c7qm-banner { flex-direction:column; text-align:center; align-items:center; }
  .c7qm-stats { justify-content:center; }
}

@media (max-width:480px) {
  html { font-size:15px; }
  .c7qm-gg { grid-template-columns:repeat(2,1fr); gap:.6rem; }
  .c7qm-cr .c7qm-gc { flex:0 0 78vw; width:78vw; }
  .c7qm-form .row2 { grid-template-columns:1fr; }
  .c7qm-form input, .c7qm-form select, .c7qm-form textarea { min-height:48px; }
  .c7qm-stat b { font-size:1.7rem; }
}

@media (max-width:375px) {
  .c7qm-hdr-in { padding:0 .75rem; }
  .c7qm-gg { gap:.5rem; }
}