/* Nativita — Cosmic Purple (Option F) | prefix f7qa | radius 16px
   layout: fixed header 64px + left sidebar 220px (desktop) -> right drawer (mobile)
   hamburger HBG-B: logo centred, burger right, lines morph to back-arrow, drawer slides from right */

:root {
  --f7qa-bg: #08001f;
  --f7qa-c1: #9B59B6;
  --f7qa-c2: #E91E8C;
  --f7qa-c3: #F39C12;
  --f7qa-ct: #111;
  --f7qa-tx: #d0b8e8;
  --f7qa-cd: #120030;
  --f7qa-br: rgba(155,89,182,.25);
  --f7qa-r: 16px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--f7qa-bg);
  color: var(--f7qa-tx);
  line-height: 1.6;
  /* nebula: layered radial gradients on a deep space base */
  background-image:
    radial-gradient(circle at 12% 18%, rgba(155,89,182,.18), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(233,30,140,.14), transparent 40%),
    radial-gradient(circle at 70% 85%, rgba(243,156,18,.08), transparent 45%);
  background-attachment: fixed;
  min-height: 100vh;
}

h1, h2, h3, h4, .f7qa-lg b { font-family: 'Space Grotesk', system-ui, sans-serif; line-height: 1.15; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- buttons ---------- */
.f7qa-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .85rem;
  padding: .55rem 1.15rem; border-radius: var(--f7qa-r); cursor: pointer;
  border: 1px solid transparent; transition: all .25s ease; white-space: nowrap;
}
.f7qa-btn-cta { background: var(--f7qa-c3); color: var(--f7qa-ct); box-shadow: 0 6px 20px rgba(243,156,18,.3); }
.f7qa-btn-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(243,156,18,.45); }
.f7qa-btn-ol { background: transparent; color: var(--f7qa-tx); border-color: var(--f7qa-br); }
.f7qa-btn-ol:hover { border-color: var(--f7qa-c1); color: #fff; box-shadow: 0 0 14px rgba(155,89,182,.4); }

/* ---------- header ---------- */
.f7qa-hdr { position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 100;
  background: rgba(8,0,31,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--f7qa-br); }
.f7qa-hdr-in { display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; height: 100%; position: relative; }
.f7qa-lg { display: flex; align-items: center; gap: .55rem; font-family: 'Space Grotesk', sans-serif; }
.f7qa-lg img { width: 32px; height: 32px; }
.f7qa-lg b { font-size: 1.25rem; font-weight: 700; letter-spacing: .5px; color: #fff; }
.f7qa-lg b span { color: var(--f7qa-c3); }
.f7qa-nav { display: flex; gap: .25rem; margin-left: auto; }
.f7qa-nl { padding: .45rem .8rem; border-radius: var(--f7qa-r); font-weight: 700; font-size: .85rem; color: var(--f7qa-tx); transition: all .2s; }
.f7qa-nl:hover { color: #fff; background: rgba(155,89,182,.12); }
.f7qa-nl.active { color: var(--f7qa-c3); }
.f7qa-act { display: flex; gap: .5rem; align-items: center; }
.f7qa-au { align-items: center; gap: .5rem; }
.f7qa-au #auth-username { font-weight: 700; font-size: .85rem; color: #fff; }

/* ---------- hamburger HBG-B (logo centre / burger right / arrow morph) ---------- */
.f7qa-hbg { display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 30px; height: 30px; background: none; border: none; cursor: pointer; margin-left: auto; z-index: 210; }
.f7qa-hbg span { display: block; height: 2px; width: 22px; background: var(--f7qa-tx); border-radius: 2px;
  transition: transform .3s ease, width .3s ease, opacity .2s ease; align-self: flex-end; }
.f7qa-hbg span:nth-child(2) { width: 14px; }
.f7qa-hbg.open span:nth-child(1) { transform: rotate(-45deg) translateX(-4px) translateY(3px); width: 12px; }
.f7qa-hbg.open span:nth-child(2) { width: 22px; }
.f7qa-hbg.open span:nth-child(3) { transform: rotate(45deg) translateX(-4px) translateY(-3px); width: 12px; }

/* ---------- sidebar / mobile drawer ---------- */
.f7qa-sb { position: fixed; top: 64px; left: 0; width: 220px; height: calc(100vh - 64px);
  background: var(--f7qa-cd); border-right: 1px solid var(--f7qa-br); overflow-y: auto;
  z-index: 90; display: flex; flex-direction: column; }
.f7qa-sb__nav { display: flex; flex-direction: column; padding-top: .5rem; }
.f7qa-sb-head { display: none; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--f7qa-br); }
.f7qa-sb-mob { display: none; flex-direction: column; padding: .75rem 1.25rem; border-bottom: 1px solid var(--f7qa-br); gap: .4rem; }
.f7qa-sb-mob a { padding: .55rem 0; font-weight: 700; font-size: .9rem; color: var(--f7qa-tx); }
.f7qa-sb-mob a:hover { color: var(--f7qa-c3); }
.f7qa-sb-auth { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.f7qa-sbl { display: flex; align-items: center; gap: .75rem; padding: .65rem 1.25rem; color: var(--f7qa-tx);
  font-weight: 600; font-size: .88rem; border-left: 3px solid transparent; transition: all .2s; }
.f7qa-sbl:hover, .f7qa-sbl.active { color: var(--f7qa-c1); border-left-color: var(--f7qa-c1); background: rgba(155,89,182,.08); }
.f7qa-sbf { margin-top: auto; padding: 1rem 1.25rem; border-top: 1px solid var(--f7qa-br); display: flex; flex-direction: column; gap: .4rem; }
.f7qa-sbf a { font-size: .75rem; color: var(--f7qa-tx); opacity: .6; }
.f7qa-sbf a:hover { opacity: 1; color: var(--f7qa-c1); }
.f7qa-sbo { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 190; display: none; }
.f7qa-sbo.show { display: block; }

/* ---------- mobile bottom nav ---------- */
.f7qa-mn { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 60px;
  background: var(--f7qa-cd); border-top: 1px solid var(--f7qa-br); z-index: 150; }
.f7qa-mni { flex: 1; display: flex; align-items: center; justify-content: center; gap: .25rem;
  background: none; border: none; color: var(--f7qa-tx); font-family: 'Nunito', sans-serif;
  font-weight: 700; font-size: .78rem; cursor: pointer; }
.f7qa-mni:hover { color: var(--f7qa-c3); }

/* ---------- main / layout ---------- */
.f7qa-main { padding-top: 64px; min-height: 100vh; }
@media (min-width: 1024px) { .f7qa-main { margin-left: 220px; } .f7qa-ftr { margin-left: 220px; } }
.f7qa-sec { padding: 3.5rem 1.75rem; max-width: 1200px; margin: 0 auto; }
.f7qa-sec h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: #fff; margin-bottom: .4rem; }
.f7qa-sec .f7qa-sub { opacity: .7; margin-bottom: 2rem; max-width: 620px; }
.f7qa-eyebrow { color: var(--f7qa-c3); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: .72rem; }

/* ---------- notice bar ---------- */
.f7qa-nb { background: rgba(233,30,140,.1); border-bottom: 1px solid var(--f7qa-br); color: var(--f7qa-tx);
  text-align: center; font-size: .78rem; font-weight: 700; padding: .55rem 1rem; }

/* ---------- HERO-C: diagonal cut ---------- */
.f7qa-hero { position: relative; padding: 4.5rem 1.75rem 6rem; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  background: linear-gradient(120deg, rgba(155,89,182,.22), rgba(233,30,140,.12) 60%, transparent);
  border-bottom: 1px solid var(--f7qa-br); }
.f7qa-hero-in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: center; }
.f7qa-hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); color: #fff; margin: .6rem 0 1rem; }
.f7qa-hero h1 em { font-style: normal; color: var(--f7qa-c3); }
.f7qa-hero p.lead { font-size: 1.05rem; opacity: .85; max-width: 520px; margin-bottom: 1.6rem; }
.f7qa-hero-cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.f7qa-hero-disc { font-size: .75rem; opacity: .6; }
/* dot decor right column */
.f7qa-hero-dots { position: relative; height: 280px; }
.f7qa-hero-dots span { position: absolute; border-radius: 50%; background: var(--f7qa-c1); animation: f7qaFloat 6s ease-in-out infinite; }
.f7qa-hero-dots span:nth-child(1){ width:90px;height:90px;top:10%;left:20%;background:radial-gradient(circle,var(--f7qa-c2),transparent 70%);opacity:.6;}
.f7qa-hero-dots span:nth-child(2){ width:140px;height:140px;top:35%;left:55%;background:radial-gradient(circle,var(--f7qa-c1),transparent 70%);opacity:.5;animation-delay:1s;}
.f7qa-hero-dots span:nth-child(3){ width:14px;height:14px;top:18%;left:70%;background:var(--f7qa-c3);box-shadow:0 0 16px var(--f7qa-c3);animation-delay:.5s;}
.f7qa-hero-dots span:nth-child(4){ width:8px;height:8px;top:70%;left:30%;background:#fff;animation-delay:2s;}
.f7qa-hero-dots span:nth-child(5){ width:10px;height:10px;top:60%;left:78%;background:var(--f7qa-c2);box-shadow:0 0 12px var(--f7qa-c2);animation-delay:1.5s;}
@keyframes f7qaFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-18px);} }

/* ---------- game card CARD-D ---------- */
.f7qa-gc { background: var(--f7qa-cd); border: 1px solid transparent; border-radius: var(--f7qa-r);
  overflow: hidden; cursor: pointer; transition: all .3s ease; outline: none; }
.f7qa-gc:hover, .f7qa-gc:focus-visible { border-color: var(--f7qa-c1); transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--f7qa-c1), 0 10px 30px rgba(155,89,182,.45); }
.f7qa-gct { position: relative; aspect-ratio: 3/4; overflow: hidden; background: #0d0022; }
.f7qa-gct img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.f7qa-gc:hover .f7qa-gct img { transform: scale(1.06); }
.f7qa-gco { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; background: rgba(8,0,31,.6); opacity: 0; transition: opacity .3s; }
.f7qa-gc:hover .f7qa-gco, .f7qa-gc:focus-visible .f7qa-gco { opacity: 1; }
.f7qa-gcp { background: var(--f7qa-c3); color: var(--f7qa-ct); border: none; font-family: 'Space Grotesk', sans-serif;
  font-weight: 800; font-size: .8rem; padding: .5rem 1.1rem; border-radius: 50px; cursor: pointer; }
.f7qa-gci { padding: .6rem .7rem .75rem; }

/* ---------- carousel CAROUSEL-B (first card big, staggered) ---------- */
.f7qa-cr-wrap { position: relative; overflow: hidden; }
.f7qa-cr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; gap: 1rem; }
.f7qa-cr { display: flex; gap: 1rem; transition: transform .4s ease; align-items: flex-start; }
.f7qa-cr .f7qa-gc { flex: 0 0 160px; width: 160px; }
.f7qa-cr .f7qa-gc:first-child { flex: 0 0 300px; width: 300px; }
.f7qa-cr .f7qa-gc:nth-child(odd):not(:first-child) { margin-top: 24px; }
.f7qa-crb { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--f7qa-br);
  background: var(--f7qa-cd); color: var(--f7qa-tx); font-size: 1.1rem; cursor: pointer; transition: all .2s; }
.f7qa-crb:hover { border-color: var(--f7qa-c1); color: #fff; box-shadow: 0 0 14px rgba(155,89,182,.45); }
.f7qa-cr-nav { display: flex; gap: .5rem; }

/* ---------- games grid ---------- */
.f7qa-cts { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.25rem 0 1.5rem; }
.f7qa-ct { background: var(--f7qa-cd); border: 1px solid var(--f7qa-br); color: var(--f7qa-tx);
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .8rem; padding: .45rem 1rem;
  border-radius: 50px; cursor: pointer; transition: all .2s; }
.f7qa-ct:hover { border-color: var(--f7qa-c1); }
.f7qa-ct.active { background: var(--f7qa-c1); color: #fff; border-color: var(--f7qa-c1); }
.f7qa-gg { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.1rem; }
.f7qa-search { width: 100%; max-width: 420px; background: var(--f7qa-cd); border: 1px solid var(--f7qa-br);
  border-radius: var(--f7qa-r); padding: .7rem 1rem; color: var(--f7qa-tx); font-size: .95rem; }
.f7qa-search:focus { outline: none; border-color: var(--f7qa-c1); }

/* ---------- WORKS-D (giant translucent numbers) ---------- */
.f7qa-works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.f7qa-work { position: relative; background: var(--f7qa-cd); border: 1px solid var(--f7qa-br);
  border-radius: var(--f7qa-r); padding: 2rem 1.5rem; overflow: hidden; }
.f7qa-work-num { position: absolute; top: -1.5rem; right: .5rem; font-family: 'Space Grotesk', sans-serif;
  font-size: 8rem; font-weight: 700; line-height: 1; color: var(--f7qa-c1); opacity: .08; pointer-events: none; }
.f7qa-work h3 { font-size: 1.2rem; color: #fff; margin-bottom: .5rem; position: relative; }
.f7qa-work p { font-size: .92rem; opacity: .8; position: relative; }

/* ---------- BANNER-E (stats + CTA) ---------- */
.f7qa-banner { background: linear-gradient(120deg, rgba(155,89,182,.2), rgba(233,30,140,.12));
  border: 1px solid var(--f7qa-br); border-radius: var(--f7qa-r); padding: 2.5rem 2rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
.f7qa-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.f7qa-stat b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 2.4rem; color: var(--f7qa-c3); line-height: 1; }
.f7qa-stat span { font-size: .8rem; opacity: .8; text-transform: uppercase; letter-spacing: 1px; }

/* ---------- REVIEWS-C (single big review + dots) ---------- */
.f7qa-reviews { position: relative; max-width: 760px; margin: 0 auto; text-align: center; padding-top: 1rem; }
.f7qa-reviews::before { content: '\201C'; font-family: 'Space Grotesk', serif; font-size: 8rem; line-height: .5;
  color: var(--f7qa-c1); opacity: .25; position: absolute; top: 1.2rem; left: 50%; transform: translateX(-50%); }
.f7qa-rev-stage { min-height: 160px; position: relative; z-index: 1; padding-top: 2.5rem; }
.f7qa-rev-text { font-size: 1.15rem; color: #fff; font-style: italic; margin-bottom: 1.25rem; }
.f7qa-rev-meta { display: flex; flex-direction: column; gap: .25rem; }
.f7qa-rev-stars { display: inline-flex; gap: 3px; justify-content: center; }
.f7qa-star { width: 16px; height: 16px; display: inline-block; background: var(--f7qa-c3);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.f7qa-star.empty { background: var(--f7qa-br); }
.f7qa-rev-name { font-weight: 800; color: var(--f7qa-c1); font-size: .9rem; }
.f7qa-rev-dots { display: flex; gap: .5rem; justify-content: center; margin-top: 1.5rem; }
.f7qa-rev-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--f7qa-br); transition: all .2s; }
.f7qa-rev-dots button.active { background: var(--f7qa-c3); transform: scale(1.25); }

/* ---------- SEO block ---------- */
.f7qa-seo { background: var(--f7qa-cd); border: 1px solid var(--f7qa-br); border-radius: var(--f7qa-r); padding: 2rem; }
.f7qa-seo p { opacity: .82; margin-bottom: 1rem; font-size: .95rem; }
.f7qa-seo p:last-child { margin-bottom: 0; }

/* ---------- article / legal pages ---------- */
.f7qa-article { max-width: 820px; }
.f7qa-article h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); color: #fff; margin-bottom: .5rem; }
.f7qa-article .f7qa-lead { opacity: .8; margin-bottom: 2rem; }
.f7qa-article h2 { font-size: 1.4rem; color: #fff; margin: 2rem 0 .75rem; }
.f7qa-article h3 { font-size: 1.1rem; color: var(--f7qa-c1); margin: 1.5rem 0 .5rem; }
.f7qa-article p, .f7qa-article li { opacity: .85; margin-bottom: .85rem; }
.f7qa-article ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.f7qa-card-box { background: var(--f7qa-cd); border: 1px solid var(--f7qa-br); border-radius: var(--f7qa-r); padding: 1.5rem; margin-bottom: 1.25rem; }

/* ---------- FAQ ---------- */
.f7qa-faq { display: flex; flex-direction: column; gap: .75rem; }
.f7qa-faq details { background: var(--f7qa-cd); border: 1px solid var(--f7qa-br); border-radius: var(--f7qa-r); padding: 1rem 1.25rem; }
.f7qa-faq summary { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #fff; cursor: pointer; list-style: none; }
.f7qa-faq summary::-webkit-details-marker { display: none; }
.f7qa-faq summary::after { content: '+'; float: right; color: var(--f7qa-c3); font-size: 1.2rem; }
.f7qa-faq details[open] summary::after { content: '\2212'; }
.f7qa-faq p { margin-top: .65rem; opacity: .82; font-size: .92rem; }

/* ---------- contact form ---------- */
.f7qa-form { display: flex; flex-direction: column; gap: 1rem; max-width: 640px; }
.f7qa-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.f7qa-form label { font-size: .82rem; font-weight: 700; margin-bottom: .35rem; display: block; }
.f7qa-form input, .f7qa-form select, .f7qa-form textarea {
  width: 100%; background: var(--f7qa-cd); border: 1px solid var(--f7qa-br); border-radius: var(--f7qa-r);
  padding: .75rem 1rem; color: var(--f7qa-tx); font-family: 'Nunito', sans-serif; font-size: .95rem; }
.f7qa-form input:focus, .f7qa-form select:focus, .f7qa-form textarea:focus { outline: none; border-color: var(--f7qa-c1); }
.f7qa-form-ok { display: none; background: rgba(155,89,182,.15); border: 1px solid var(--f7qa-c1);
  border-radius: var(--f7qa-r); padding: 1rem; color: #fff; font-weight: 700; }

/* ---------- footer FOOTER-B (3 cols) ---------- */
.f7qa-ftr { background: var(--f7qa-cd); border-top: 1px solid var(--f7qa-br); padding: 3rem 1.75rem 2rem; }
.f7qa-ftr-in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.f7qa-ftr-brand b { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; color: #fff; }
.f7qa-ftr-brand b span { color: var(--f7qa-c3); }
.f7qa-ftr-brand p { font-size: .82rem; opacity: .7; margin-top: .6rem; max-width: 260px; }
.f7qa-ftr-col h4 { font-family: 'Space Grotesk', sans-serif; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--f7qa-c1); margin-bottom: .85rem; }
.f7qa-ftr-col a { display: block; font-size: .85rem; opacity: .75; margin-bottom: .5rem; }
.f7qa-ftr-col a:hover { opacity: 1; color: var(--f7qa-c3); }
.f7qa-ftr-bottom { max-width: 1200px; margin: 2rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--f7qa-br);
  font-size: .76rem; opacity: .65; text-align: center; }
.f7qa-ftr-badges { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.f7qa-badge { border: 1px solid var(--f7qa-br); border-radius: 50px; padding: .25rem .8rem; font-size: .72rem; font-weight: 800; color: var(--f7qa-c3); }

/* ---------- responsive ---------- */
@media (max-width: 1280px) { .f7qa-sec, .f7qa-hero-in { max-width: 1040px; } }

@media (max-width: 1024px) {
  .f7qa-sb { top: 0; left: auto; right: 0; height: 100vh; width: 300px; max-width: 86vw;
    transform: translateX(100%); transition: transform .3s ease; z-index: 200; border-right: none; border-left: 1px solid var(--f7qa-br); }
  .f7qa-sb.open { transform: translateX(0); }
  .f7qa-sb-head, .f7qa-sb-mob { display: flex; }
  .f7qa-main, .f7qa-ftr { margin-left: 0; }
  .f7qa-mn { display: flex; align-items: center; justify-content: space-around; }
  body { padding-bottom: 60px; }
}
@media (min-width: 1024px) { body { padding-bottom: 0; } }

@media (max-width: 768px) {
  .f7qa-hdr-in { justify-content: space-between; }
  .f7qa-hbg { display: flex; }
  .f7qa-nav, .f7qa-act { display: none; }
  .f7qa-lg { position: absolute; left: 50%; transform: translateX(-50%); }
  .f7qa-hero-in { grid-template-columns: 1fr; }
  .f7qa-hero-dots { display: none; }
  .f7qa-hero { clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); }
  .f7qa-works { grid-template-columns: 1fr; }
  .f7qa-ftr-in { grid-template-columns: 1fr 1fr; }
  .f7qa-cr .f7qa-gc:first-child { flex: 0 0 220px; width: 220px; }
}

@media (max-width: 600px) {
  .f7qa-form-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  body { font-size: 15px; }
  .f7qa-sec { padding: 2.5rem 1.1rem; }
  .f7qa-gg { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .f7qa-cr .f7qa-gc { flex: 0 0 70vw; width: 70vw; }
  .f7qa-cr .f7qa-gc:first-child { flex: 0 0 80vw; width: 80vw; }
  .f7qa-ftr-in { grid-template-columns: 1fr; }
  .f7qa-form input, .f7qa-form select, .f7qa-form textarea { min-height: 48px; }
  .f7qa-stats { gap: 1.5rem; }
}

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