/* ============================================================
   QANTOM — Landing page (broker-style marketing layout)
   ============================================================ */

/* ---------- HERO ---------- */
.qhero{position:relative;padding:56px 20px 0;overflow:hidden;text-align:center}
.qhero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(1100px 620px at 50% -18%,rgba(15,175,89,.16),transparent 62%),
    linear-gradient(180deg,#171b28 0%,var(--bg) 78%);
}
[data-theme="light"] .qhero::before{background:linear-gradient(180deg,#1c1f2d 0%,#1c1f2d 100%)}
.qhero__in{max-width:820px;margin:0 auto 40px}
.qhero h1{font-size:clamp(30px,4.6vw,52px);line-height:1.14;letter-spacing:-.02em;color:#fff;font-weight:700}
.qhero__sub{color:#c4cbd8;font-size:16px;margin:18px auto 26px;max-width:540px;line-height:1.55}
.qhero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.qhero__note{font-size:12px;color:#8e97a8;margin-top:16px}

/* ---------- platform preview ---------- */
.qshot{max-width:1180px;margin:0 auto;background:#171a26;border:1px solid #2b3040;border-radius:10px 10px 0 0;
  overflow:hidden;box-shadow:0 -10px 60px -20px rgba(0,0,0,.9);text-align:left}
.qshot__bar{display:flex;align-items:center;gap:12px;padding:9px 14px;background:#1c2029;border-bottom:1px solid #2b3040}
.qshot__logo{font-weight:900;font-size:14px;letter-spacing:-.02em;color:#fff}
.qshot__logo em{font-style:normal;font-size:8px;letter-spacing:.14em;color:var(--up);vertical-align:super;margin-left:3px}
.qshot__tag{font-size:8.5px;letter-spacing:.14em;color:var(--muted2);font-weight:700}
.qshot__bal{margin-left:auto;text-align:right;line-height:1.25}
.qshot__bal span{display:block;font-size:8px;letter-spacing:.1em;color:var(--muted2);font-weight:700}
.qshot__bal b{font-family:var(--fm);font-size:14px;color:#fff}
.qshot__body{display:grid;grid-template-columns:46px minmax(0,1fr) 210px;min-height:236px}
.qshot__rail{display:flex;flex-direction:column;gap:4px;padding:8px 5px;background:#1c2029;border-right:1px solid #2b3040}
.qshot__rail span{height:34px;display:grid;place-items:center;border-radius:7px;color:var(--muted2)}
.qshot__rail span.on{background:rgba(15,175,89,.16);color:var(--up)}
.qshot__rail svg{width:16px;height:16px}
.qshot__main{min-width:0;display:flex;flex-direction:column}
.qshot__tabs{display:flex;gap:5px;padding:8px 10px;border-bottom:1px solid #2b3040;overflow:hidden}
.qshot__tabs span{display:flex;gap:6px;align-items:center;padding:5px 10px;border-radius:6px;background:#212634;
  font-size:10.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.qshot__tabs span.on{background:#2b3040;color:#fff}
.qshot__tabs b{font-family:var(--fm);font-size:10px;color:var(--up)}
.qshot__panel{border-left:1px solid #2b3040;padding:10px;background:#1c2029;display:flex;flex-direction:column;gap:8px}
.qshot__field span{display:block;font-size:8.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted2);font-weight:700;margin-bottom:4px}
.qshot__field>div{display:flex;align-items:center;background:#212634;border:1px solid #2e3444;border-radius:7px;height:34px}
.qshot__field i{width:30px;display:grid;place-items:center;font-style:normal;color:var(--muted);font-size:15px;font-weight:700}
.qshot__field b{flex:1;text-align:center;font-family:var(--fm);font-size:13px;color:#fff}
.qshot__pay{background:#212634;border:1px solid #2e3444;border-radius:7px;padding:7px 10px;font-size:10px;color:var(--muted2);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.qshot__pay b{display:block;font-family:var(--fm);font-size:16px;color:var(--up);margin-top:2px;letter-spacing:0;text-transform:none}
.qshot__up,.qshot__down{display:flex;align-items:center;justify-content:center;gap:8px;height:38px;border-radius:7px;
  font-weight:700;font-size:14px;color:#fff;transition:filter var(--fast)}
.qshot__up{background:var(--up)} .qshot__down{background:var(--down)}
.qshot__up:hover,.qshot__down:hover{filter:brightness(1.1)}
.qshot__up svg,.qshot__down svg{width:15px;height:15px;stroke-width:2.6}
.qshot__live{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:8px;border-top:1px solid #2b3040;font-size:10px;color:var(--muted2)}
.qshot__live b{font-family:var(--fm);font-size:12px;color:#fff;margin-left:auto}

/* ---------- generic section ---------- */
.qsec{max-width:1400px;margin:0 auto;padding:64px 20px 20px;text-align:center}
.qsec h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;margin-bottom:10px}
.qsec__sub{color:var(--muted);font-size:14.5px;max-width:640px;margin:0 auto 34px;line-height:1.55}
.qsec--faq{padding-bottom:70px}

/* ---------- feature cards ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1400px;margin:0 auto;padding:0;text-align:left}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:26px;transition:all var(--med);display:flex;flex-direction:column}
.feat:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--line2)}
.feat__ic{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;margin-bottom:18px;color:#fff}
.feat__ic svg{width:19px;height:19px}
.feat h4{font-size:16px;margin-bottom:9px;font-weight:700}
.feat p{color:var(--muted);font-size:13.5px;line-height:1.6;margin-bottom:16px}
.feat__link{margin-top:auto;color:var(--acc);font-size:13px;font-weight:700}
.feat__link:hover{text-decoration:underline}
[data-theme="dark"] .feat__link{color:#4a9ce8}

/* ---------- light "how it works" band ---------- */
/* Deliberately light in BOTH themes — this band is a fixed light surface,
   so its colours are literal, never theme tokens. */
.qlight{background:#ebebed;color:#1c1f2d;text-align:center;padding:64px 20px 70px;margin-top:56px}
.qlight h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;margin-bottom:10px;color:#1c1f2d}
.qlight .qsec__sub{color:#5d6577}
.qlight__note{font-size:12.5px;color:#6f7891;margin-top:14px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1120px;margin:0 auto 34px}
.step{background:#fff;border-radius:12px;padding:26px 20px;text-align:center;box-shadow:0 6px 22px -12px rgba(28,31,45,.25);transition:transform var(--med)}
.step:hover{transform:translateY(-5px)}
.step__n{width:52px;height:52px;margin:0 auto 15px;border-radius:50%;background:rgba(15,175,89,.12);color:var(--up);
  display:grid;place-items:center;font-family:var(--fm);font-size:21px;font-weight:700}
.step h4{font-size:15px;margin-bottom:8px;color:#1c1f2d}
.step p{color:#5d6577;font-size:13px;line-height:1.55}

/* ---------- reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1400px;margin:0 auto;text-align:left}
.review{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:22px}
.review__h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.review__av{width:40px;height:40px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:700;color:#fff;font-size:16px}
.review__h b{display:block;font-size:14px}
.review__h span{font-size:11.5px}
.review__stars{margin-left:auto;color:var(--warn);font-size:13px;letter-spacing:1px}
.review p{color:var(--muted);font-size:13.2px;line-height:1.65}

/* ---------- FAQ ---------- */
.faqs{max-width:840px;margin:0 auto;text-align:left}
.faq{background:var(--panel);border:1px solid var(--line);border-radius:9px;margin-bottom:10px;overflow:hidden}
.faq summary{padding:16px 20px;cursor:pointer;font-weight:700;font-size:14.5px;list-style:none;display:flex;align-items:center;gap:12px;transition:background var(--fast)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:20px;color:var(--muted2);font-weight:400;line-height:1}
.faq[open] summary::after{content:"−"}
.faq summary:hover{background:var(--panel2)}
.faq p{padding:0 20px 18px;color:var(--muted);font-size:13.5px;line-height:1.65}

@media(max-width:1100px){
  .features,.reviews{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .qshot__body{grid-template-columns:46px minmax(0,1fr) 190px}
}
@media(max-width:760px){
  .features,.reviews,.steps{grid-template-columns:1fr}
  .qshot__body{grid-template-columns:minmax(0,1fr)}
  .qshot__rail,.qshot__panel{display:none}
  .qhero{padding-top:34px}
  .qsec{padding-top:44px}
}