/* ==========================================================================
   QMAKER — MARKETING LANDING PAGE STYLES
   ==========================================================================
   এই ফাইলটা design-system.css এর পরে লোড হবে এবং সেখানকার --qm-* টোকেনগুলোই
   ব্যবহার করে (নতুন কোনো কালার এখানে বানানো হয়নি)। তাই অ্যাডমিন/টিচার প্যানেলের
   সাথে ব্র্যান্ড সবসময় মিলে থাকবে — কোথাও রঙ বদলাতে চাইলে শুধু design-system.css
   এর টোকেন বদলালেই এই পেজও বদলে যাবে।
   ========================================================================== */

.qm-lp{ background:var(--qm-bg); }
.qm-lp *{ box-sizing:border-box; }
.qm-lp img, .qm-lp svg{ display:block; max-width:100%; }
.qm-lp a{ color:inherit; }
.qm-lp :focus-visible{ outline:3px solid var(--qm-primary); outline-offset:3px; border-radius:4px; }

.qm-lp-wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }

/* ---------- header / nav ---------- */
.qm-lp-header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,245,240,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--qm-border);
}
.qm-lp-nav{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.qm-lp-wordmark{
  font-family:var(--qm-font-heading); font-weight:800; font-size:22px; color:var(--qm-ink);
  display:flex; align-items:baseline; gap:2px;
}
.qm-lp-wordmark .dot{ color:var(--qm-accent); }
.qm-lp-nav-links{ display:flex; align-items:center; gap:26px; font-size:15px; color:var(--qm-text-muted); }
.qm-lp-nav-links a{ text-decoration:none; transition:color .15s ease; }
.qm-lp-nav-links a:hover{ color:var(--qm-primary); }
.qm-lp-nav-hide{ display:flex; }
@media (max-width:820px){ .qm-lp-nav-hide{ display:none; } }

/* ---------- buttons ---------- */
.qm-lp-btn{
  display:inline-block; text-decoration:none; font-weight:700; font-size:15.5px;
  padding:14px 26px; border-radius:var(--qm-radius-md);
  transition:transform .12s ease, box-shadow .12s ease;
}
.qm-lp-btn-sm{ padding:10px 20px; font-size:14.5px; }
.qm-lp-btn-primary{
  background:var(--qm-primary); color:#fff;
  box-shadow:0 3px 0 var(--qm-primary-darker);
}
.qm-lp-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 5px 0 var(--qm-primary-darker); }
.qm-lp-btn-secondary{
  background:transparent; color:var(--qm-ink);
  border:1.5px solid var(--qm-border-strong);
}
.qm-lp-btn-secondary:hover{ border-color:var(--qm-primary); background:var(--qm-primary-50); }

/* ---------- eyebrow / heading ---------- */
.qm-lp-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--qm-primary-dark);
  background:var(--qm-primary-light); border:1px solid var(--qm-primary-100);
  padding:6px 12px; border-radius:999px; margin-bottom:22px;
}
.qm-lp-eyebrow .sq{ width:6px; height:6px; background:var(--qm-accent); border-radius:1px; transform:rotate(45deg); }
.qm-lp-h1{
  font-family:var(--qm-font-heading); font-weight:800; color:var(--qm-ink);
  font-size:clamp(34px,4.6vw,54px); line-height:1.2; margin:0 0 22px;
}
.qm-lp-h1 .accent{ color:var(--qm-primary); }
.qm-lp-h2{
  font-family:var(--qm-font-heading); font-weight:800; color:var(--qm-ink);
  font-size:clamp(26px,3.4vw,38px); margin:0 0 14px; line-height:1.25;
}

/* ---------- hero ---------- */
.qm-lp-hero{ padding:76px 0 60px; }
.qm-lp-hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
@media (max-width:900px){ .qm-lp-hero-grid{ grid-template-columns:1fr; gap:44px; } }
.qm-lp-hero-sub{ font-size:17.5px; color:var(--qm-text-muted); max-width:520px; margin:0 0 32px; }
.qm-lp-hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px; }
.qm-lp-microcopy{ font-size:13.5px; color:var(--qm-text-muted); }
.qm-lp-microcopy b{ color:var(--qm-ink); }

/* ---------- signature: exam paper + wax-seal badge ---------- */
.qm-lp-paper-stage{ position:relative; perspective:1200px; }
.qm-lp-seal{
  position:absolute; top:-22px; right:22px; width:64px; height:64px; z-index:3;
  color:var(--qm-accent); background:var(--qm-accent-light);
  border-radius:50%; padding:8px;
  box-shadow:0 8px 18px -6px rgba(184,134,46,.45);
  transform:rotate(-8deg);
}
@media (max-width:520px){ .qm-lp-seal{ width:50px; height:50px; top:-16px; right:14px; } }

.qm-lp-exam-card{
  background:var(--qm-surface);
  border-radius:6px;
  box-shadow:0 30px 60px -20px rgba(var(--qm-primary-rgb),0.18), 0 2px 8px rgba(27,36,48,0.08);
  padding:26px 24px 30px;
  transform:rotate(2.2deg);
  position:relative;
  border:1px solid var(--qm-border);
}
.qm-lp-exam-card::before{
  content:''; position:absolute; inset:0; border-radius:6px;
  background-image:repeating-linear-gradient(to bottom, transparent, transparent 27px, var(--qm-bg) 28px);
  opacity:.5; pointer-events:none;
}
.qm-lp-exam-head{ text-align:center; position:relative; margin-bottom:14px; }
.qm-lp-exam-head .title{ font-family:var(--qm-font-heading); font-weight:700; font-size:15px; color:var(--qm-ink); }
.qm-lp-exam-head .meta{ font-size:10.5px; color:var(--qm-text-muted); margin-top:4px; }
.qm-lp-exam-hr{ border:none; border-top:1.5px solid var(--qm-ink); margin:10px 0 14px; position:relative; }

.qm-lp-cut-line{ position:absolute; top:-14px; bottom:-16px; left:50%; border-left:2px dashed var(--qm-border-strong); }
.qm-lp-scissors{
  position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  font-size:15px; background:var(--qm-bg); padding:2px 6px; border-radius:20px;
  border:1px solid var(--qm-border);
}
.qm-lp-cut-caption{
  position:absolute; bottom:-30px; left:50%; transform:translateX(-50%);
  font-size:10px; color:var(--qm-text-muted); white-space:nowrap; background:var(--qm-bg);
  padding:2px 8px; border-radius:20px; border:1px solid var(--qm-border);
}

.qm-lp-mcq-row{ display:flex; gap:10px; font-size:11px; color:var(--qm-ink); margin-bottom:9px; position:relative; z-index:1; }
.qm-lp-mcq-row .num{ font-weight:700; flex-shrink:0; width:14px; }
.qm-lp-mcq-row .opts{ display:flex; flex-direction:column; gap:2px; color:var(--qm-text-muted); }

.qm-lp-cq-block{ background:var(--qm-surface-hover); border-radius:5px; padding:10px 12px; margin-top:12px; position:relative; z-index:1; font-size:11px; }
.qm-lp-cq-block .cq-line{ display:flex; justify-content:space-between; gap:10px; font-weight:600; color:var(--qm-ink); }
.qm-lp-cq-block .badge{ font-size:10px; color:var(--qm-text-muted); white-space:nowrap; font-weight:500; }
.qm-lp-cq-block .cq-sub{ display:flex; justify-content:space-between; gap:8px; margin-top:7px; color:var(--qm-text-muted); padding-left:10px; }

.qm-lp-float-tag{ position:absolute; color:#fff; font-size:11px; font-weight:700; padding:7px 12px; border-radius:8px; z-index:2; }
.qm-lp-float-tag.tag-fit{ top:34px; right:-14px; transform:rotate(4deg); background:var(--qm-success); box-shadow:0 8px 18px -6px rgba(29,122,76,.5); }
.qm-lp-float-tag.tag-book{ bottom:26px; left:-22px; transform:rotate(-4deg); background:var(--qm-accent-dark); box-shadow:0 8px 18px -6px rgba(150,105,31,.5); }
@media (max-width:900px){ .qm-lp-float-tag, .qm-lp-seal{ display:none; } }
@media (max-width:520px){ .qm-lp-exam-card{ transform:rotate(1deg); } }

/* ---------- section shell ---------- */
.qm-lp-section{ padding:84px 0; }
.qm-lp-section.qm-lp-alt{ background:var(--qm-surface-hover); }
.qm-lp-section-head{ max-width:640px; margin:0 0 48px; }
.qm-lp-section-head p{ font-size:16px; color:var(--qm-text-muted); margin:0; }

/* ---------- pain strip ---------- */
.qm-lp-pain{ background:var(--qm-surface-hover); border-top:1px solid var(--qm-border); border-bottom:1px solid var(--qm-border); padding:56px 0; }
.qm-lp-pain-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:760px){ .qm-lp-pain-grid{ grid-template-columns:1fr; } }
.qm-lp-pain-item{ display:flex; gap:14px; align-items:flex-start; }
.qm-lp-pain-item .mark{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  border:1.5px solid var(--qm-danger); color:var(--qm-danger);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
}
.qm-lp-pain-item p{ margin:0; font-size:15.5px; color:var(--qm-text); padding-top:3px; }

/* ---------- how it works ---------- */
.qm-lp-steps-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; position:relative; }
@media (max-width:820px){ .qm-lp-steps-track{ grid-template-columns:1fr; gap:28px; } }
.qm-lp-steps-track::before{
  content:''; position:absolute; top:24px; left:8%; right:8%;
  border-top:2px dashed var(--qm-border-strong); z-index:0;
}
@media (max-width:820px){ .qm-lp-steps-track::before{ display:none; } }
.qm-lp-step{ position:relative; z-index:1; }
.qm-lp-step-num{
  width:48px; height:48px; border-radius:50%; background:var(--qm-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--qm-font-heading); font-weight:700; font-size:19px; margin-bottom:18px;
  box-shadow:0 4px 0 var(--qm-primary-darker);
}
.qm-lp-step h3{ font-size:18px; margin:0 0 8px; font-weight:700; color:var(--qm-ink); }
.qm-lp-step p{ margin:0; color:var(--qm-text-muted); font-size:14.5px; }

/* ---------- features ---------- */
.qm-lp-feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .qm-lp-feat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .qm-lp-feat-grid{ grid-template-columns:1fr; } }
.qm-lp-feat-card{
  background:var(--qm-surface); border:1px solid var(--qm-border); border-radius:var(--qm-radius-lg);
  padding:26px 22px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.qm-lp-feat-card:hover{ transform:translateY(-4px); box-shadow:var(--qm-shadow-lg); border-color:var(--qm-border-strong); }
.qm-lp-feat-card .icon{
  width:42px; height:42px; border-radius:10px; background:var(--qm-primary-light);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  font-size:19px; color:var(--qm-primary-dark);
}
.qm-lp-feat-card h3{ font-size:16.5px; margin:0 0 8px; font-weight:700; color:var(--qm-ink); }
.qm-lp-feat-card p{ margin:0; font-size:14px; color:var(--qm-text-muted); }

/* ---------- comparison table ---------- */
.qm-lp-compare-wrap{ overflow-x:auto; border-radius:var(--qm-radius-lg); border:1px solid var(--qm-border); }
.qm-lp-compare-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; min-width:560px; background:var(--qm-surface); }
.qm-lp-compare-grid > div{ padding:16px 18px; font-size:14.5px; border-bottom:1px solid var(--qm-border); }
.qm-lp-compare-grid .head{ font-family:var(--qm-font-heading); font-weight:700; font-size:14px; color:var(--qm-ink); background:var(--qm-surface-hover); }
.qm-lp-compare-grid .label{ color:var(--qm-text-muted); }
.qm-lp-compare-grid .bad{ color:var(--qm-danger); }
.qm-lp-compare-grid .good{ color:var(--qm-success); background:var(--qm-success-bg); font-weight:600; }
.qm-lp-compare-grid > div:nth-last-child(-n+3){ border-bottom:none; }

/* ---------- pricing ---------- */
.qm-lp-price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .qm-lp-price-grid{ grid-template-columns:1fr; } }
.qm-lp-price-card{
  background:var(--qm-surface); border:1px solid var(--qm-border); border-radius:var(--qm-radius-lg);
  padding:30px 26px; position:relative;
}
.qm-lp-price-card.popular{ border-color:var(--qm-primary); box-shadow:var(--qm-shadow-lg); }
.qm-lp-price-card .badge{
  position:absolute; top:-13px; right:24px; background:var(--qm-primary); color:#fff;
  font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px;
}
.qm-lp-price-card h3{ font-size:17px; margin:0 0 6px; color:var(--qm-ink); font-weight:700; font-family:var(--qm-font-heading); }
.qm-lp-price-card .amount{ font-weight:700; font-size:32px; color:var(--qm-ink); margin:6px 0 4px; }
.qm-lp-price-card .amount span{ font-weight:500; font-size:14px; color:var(--qm-text-muted); }
.qm-lp-price-card .note{ font-size:13px; color:var(--qm-text-muted); margin:0 0 20px; }
.qm-lp-price-card .list{ list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:10px; }
.qm-lp-price-card .list li{ font-size:14px; color:var(--qm-text-muted); display:flex; gap:9px; align-items:flex-start; }
.qm-lp-price-card .list li::before{ content:'✓'; color:var(--qm-success); font-weight:700; flex-shrink:0; }
.qm-lp-price-card .qm-lp-btn{ width:100%; text-align:center; }

/* ---------- testimonials ---------- */
.qm-lp-test-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .qm-lp-test-grid{ grid-template-columns:1fr; } }
.qm-lp-test-card{ background:var(--qm-surface); border:1px solid var(--qm-border); border-radius:var(--qm-radius-lg); padding:26px 24px; }
.qm-lp-test-card .quote{ font-size:14.5px; color:var(--qm-text); margin:0 0 20px; line-height:1.75; }
.qm-lp-test-card .who{ display:flex; align-items:center; gap:12px; }
.qm-lp-test-card .avatar{
  width:38px; height:38px; border-radius:50%; background:var(--qm-primary-light); color:var(--qm-primary-dark);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0;
}
.qm-lp-test-card .name{ font-size:14px; font-weight:700; color:var(--qm-ink); }
.qm-lp-test-card .role{ font-size:12.5px; color:var(--qm-text-muted); }

/* ---------- trust strip ---------- */
.qm-lp-trust{ border-top:1px solid var(--qm-border); border-bottom:1px solid var(--qm-border); background:var(--qm-surface-hover); }
.qm-lp-trust-row{ display:flex; flex-wrap:wrap; gap:14px 34px; align-items:center; justify-content:center; padding:30px 0; font-size:14px; color:var(--qm-text-muted); font-weight:600; }
.qm-lp-trust-row span{ display:flex; align-items:center; gap:8px; }
.qm-lp-trust-row .sep{ width:4px; height:4px; background:var(--qm-border-strong); border-radius:50%; }

/* ---------- faq ---------- */
.qm-lp-faq-list{ display:flex; flex-direction:column; gap:12px; max-width:760px; }
.qm-lp-faq-item{ background:var(--qm-surface); border:1px solid var(--qm-border); border-radius:12px; padding:4px 22px; }
.qm-lp-faq-item summary{
  cursor:pointer; list-style:none; padding:18px 0; font-weight:700; font-size:15.5px; color:var(--qm-ink);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.qm-lp-faq-item summary::-webkit-details-marker{ display:none; }
.qm-lp-faq-item summary::after{ content:'+'; font-size:20px; color:var(--qm-primary); flex-shrink:0; transition:transform .2s ease; }
.qm-lp-faq-item[open] summary::after{ transform:rotate(45deg); }
.qm-lp-faq-item p{ margin:0 0 20px; color:var(--qm-text-muted); font-size:14.5px; line-height:1.75; }

/* ---------- cta band ---------- */
.qm-lp-cta-band{
  background:linear-gradient(135deg, var(--qm-primary), var(--qm-primary-darker)); border-radius:var(--qm-radius-lg);
  padding:56px 40px; text-align:center; position:relative; overflow:hidden;
}
.qm-lp-cta-band::after{
  content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 16px);
}
.qm-lp-cta-band h2{ color:#fff; position:relative; }
.qm-lp-cta-band p{ color:var(--qm-primary-light); max-width:480px; margin:0 auto 28px; position:relative; font-size:16px; }
.qm-lp-cta-band .qm-lp-btn-primary{ background:#fff; color:var(--qm-primary-darker); box-shadow:0 3px 0 var(--qm-primary-100); position:relative; }
.qm-lp-cta-band .qm-lp-btn-primary:hover{ box-shadow:0 5px 0 var(--qm-primary-100); }

/* ---------- footer ---------- */
.qm-lp-footer{ padding:48px 0 36px; }
.qm-lp-foot-grid{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px; border-top:1px solid var(--qm-border); padding-top:32px; }
.qm-lp-foot-links{ display:flex; gap:26px; font-size:14px; color:var(--qm-text-muted); flex-wrap:wrap; }
.qm-lp-foot-links a{ text-decoration:none; }
.qm-lp-foot-links a:hover{ color:var(--qm-primary); }
.qm-lp-footer .copy{ font-size:13px; color:var(--qm-text-muted); margin-top:14px; }

/* ---------- reveal-on-scroll ---------- */
.qm-lp-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.qm-lp-reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .qm-lp-reveal{ opacity:1; transform:none; transition:none; }
}