/* ============================================================
   FUNNELS THAT SELL — v5 layer (fts5.css)
   Offer bar · WhatsApp float · Social proof · Cookie consent
   Dark mode · Urdu mode · Tools/Quiz · Booking · Store · Course
   Webinar · Affiliate · Portal · 404 · misc widgets
   ============================================================ */

/* ---------- Offer / countdown bar ---------- */
.fts-offer { background: linear-gradient(90deg, #6a56e8, #4e9bfa); color: #fff; font-size: 13.5px; position: relative; z-index: 60; }
.fts-offer-in { display: flex; align-items: center; gap: 14px; padding: 9px 24px; flex-wrap: wrap; justify-content: center; }
.fo-txt { font-weight: 700; letter-spacing: .01em; }
.fo-cd { font-variant-numeric: tabular-nums; font-weight: 800; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); padding: 2px 10px; border-radius: 999px; min-width: 88px; text-align: center; }
.fo-btn { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.fo-x { margin-left: auto; background: rgba(255,255,255,.14); color: #fff; border: 0; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 1; }

/* ---------- WhatsApp floating button ---------- */
.wa-float { position: fixed; left: 20px; bottom: 96px; z-index: 9500; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 14px 30px -8px rgba(37, 211, 102, .55); transition: transform .2s ease; }
.wa-float:hover { transform: scale(1.08) rotate(-4deg); }
.wa-float svg { width: 27px; height: 27px; }
.wa-float::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(37,211,102,.45); animation: waPulse 2.2s ease-out infinite; }
@keyframes waPulse { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }

/* ---------- Social proof toasts ---------- */
.sp-toast { position: fixed; left: 20px; bottom: 24px; z-index: 9400; display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line, #e9e9ec); border-radius: 14px; padding: 11px 16px 11px 11px; box-shadow: var(--shadow, 0 18px 44px rgba(20,20,40,.10)); max-width: 330px; transform: translateY(18px); opacity: 0; pointer-events: none; transition: all .4s cubic-bezier(.2,.9,.3,1.1); }
.sp-toast.show { transform: none; opacity: 1; }
.sp-ava { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, var(--purple,#7b68ee), var(--blue,#4e9bfa)); color: #fff; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.sp-t b { display: block; font-size: 13.5px; color: var(--text,#17171c); }
.sp-t span { font-size: 12px; color: var(--muted,#64646a); }

/* ---------- Cookie consent ---------- */
.cc-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9600; background: #17171c; color: #e8e8ee; padding: 14px 0; }
.cc-in { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center; }
.cc-in span { font-size: 13.5px; opacity: .9; }
.cc-btn { background: linear-gradient(90deg,#6a56e8,#4e9bfa); color: #fff; border: 0; border-radius: 10px; padding: 9px 20px; font-weight: 700; cursor: pointer; font: inherit; font-size: 13.5px; }

/* ---------- Dark mode (html.dark) ---------- */
html.dark { color-scheme: dark; }
html.dark body { background: #101014; color: #e8e8ee; }
html.dark body::before { background:
  radial-gradient(1000px 520px at 82% -8%, rgba(123,104,238,.13), transparent 62%),
  radial-gradient(900px 520px at -12% 22%, rgba(253,113,175,.10), transparent 62%),
  radial-gradient(820px 520px at 112% 78%, rgba(78,155,250,.10), transparent 62%),
  #101014; }
html.dark h1, html.dark h2, html.dark h3, html.dark h4 { color: #f2f2f7; }
html.dark .card, html.dark .sec-card, html.dark .nav, html.dark footer, html.dark .mobile-menu { background-color: #17171d; }
html.dark .nav { background: rgba(16,16,20,.86); box-shadow: none; border-bottom: 1px solid #232329; }
html.dark .mobile-menu { background: #141419; }
html.dark footer { background: #121217; border-top: 1px solid #232329; }
html.dark .sp-toast { background: #1c1c22; border-color: #2b2b33; }
html.dark .ftq-card, html.dark .st-card, html.dark .cs-card, html.dark .pt-card { background: #1a1a21; border-color: #2a2a33; }
html.dark input, html.dark select, html.dark textarea { color-scheme: dark; }
html.dark .dm-grad-fix { filter: brightness(.92); }
.dark-toggle { position: fixed; right: 20px; bottom: 168px; z-index: 9500; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line, #e9e9ec); background: #fff; color: #555; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm, 0 2px 10px rgba(20,20,40,.05)); transition: transform .2s; }
.dark-toggle:hover { transform: scale(1.1); }
.dark-toggle svg { width: 20px; height: 20px; }
html.dark .dark-toggle { background: #23232b; border-color: #33333d; color: #ffd166; }
html.dark .logo span { color: #f2f2f7; }
html.dark .logo .lt { color: #fd71af; }
html.dark .nav-links a { color: #c9c9d4; }
html.dark .foot-brand p, html.dark .foot-col a { color: #b9b9c4; }
.lang-toggle { position: fixed; right: 20px; bottom: 222px; z-index: 9500; height: 44px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line, #e9e9ec); background: #fff; color: #555; font-weight: 800; font-size: 12.5px; cursor: pointer; box-shadow: var(--shadow-sm, 0 2px 10px rgba(20,20,40,.05)); font-family: inherit; }
html.dark .lang-toggle { background: #23232b; border-color: #33333d; color: #e8e8ee; }

/* ---------- Urdu mode ---------- */
html.urdu body { font-family: 'Noto Nastaliq Urdu', var(--font); }
html.urdu .nav-links a, html.urdu .btn, html.urdu h1, html.urdu h2, html.urdu h3, html.urdu h4 { font-family: 'Noto Nastaliq Urdu', var(--font); letter-spacing: 0; }
html.urdu { --line-height-fix: 2; }

/* ============================================================
   FREE TOOLS PAGE (quiz + ROI calculator)
   ============================================================ */
.ftq-hero { padding: 74px 0 40px; text-align: center; }
.ftq-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: start; }
.ftq-card { background: var(--card, #fff); border: 1px solid var(--line, #e9e9ec); border-radius: 20px; padding: 30px; box-shadow: var(--shadow-sm, 0 2px 10px rgba(20,20,40,.05)); }
.ftq-q { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.ftq-step { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; color: var(--purple, #7b68ee); text-transform: uppercase; }
.ftq-opts { display: grid; gap: 10px; margin-top: 18px; }
.ftq-opt { text-align: left; border: 1.6px solid var(--line, #e9e9ec); background: var(--bg-soft, #f9f9fa); border-radius: 13px; padding: 13px 16px; font: inherit; font-weight: 600; cursor: pointer; transition: all .18s; display: flex; gap: 10px; align-items: center; color: inherit; }
.ftq-opt:hover { border-color: var(--purple, #7b68ee); transform: translateY(-1px); }
.ftq-opt.sel { border-color: var(--purple, #7b68ee); background: rgba(123,104,238,.08); }
.ftq-opt i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2, #dcdce1); display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.ftq-opt.sel i { background: var(--purple, #7b68ee); border-color: var(--purple, #7b68ee); color: #fff; }
.ftq-bar { height: 8px; background: var(--bg-softer, #f4f4f6); border-radius: 99px; overflow: hidden; margin: 20px 0 8px; }
.ftq-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg,#6a56e8,#4e9bfa); border-radius: 99px; transition: width .35s ease; }
.ftq-res-num { font-size: 54px; font-weight: 800; letter-spacing: -.03em; background: linear-gradient(90deg,#6a56e8,#4e9bfa); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.ftq-res-grade { display: inline-block; padding: 5px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; margin: 10px 0 14px; }
.ftq-fields input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line, #e9e9ec); border-radius: 11px; font: inherit; font-size: 14px; margin-bottom: 10px; background: var(--bg-soft, #f9f9fa); color: inherit; }
.ftq-fields input:focus { border-color: var(--purple, #7b68ee); outline: none; }
.roi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.roi-row label { font-size: 12.5px; font-weight: 700; color: var(--muted, #64646a); display: block; margin-bottom: 5px; }
.roi-row input { width: 100%; padding: 11px 13px; border: 1.5px solid var(--line, #e9e9ec); border-radius: 11px; font: inherit; font-size: 14px; background: var(--bg-soft, #f9f9fa); color: inherit; }
.roi-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.roi-cell { background: var(--bg-soft, #f9f9fa); border: 1px solid var(--line, #e9e9ec); border-radius: 14px; padding: 14px; text-align: center; }
.roi-cell b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.roi-cell span { font-size: 11.5px; color: var(--muted, #64646a); font-weight: 600; }
.ftq-tabs { display: inline-flex; gap: 6px; background: var(--bg-softer, #f4f4f6); padding: 5px; border-radius: 12px; margin-bottom: 26px; }
.ftq-tabs button { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 14px; padding: 9px 20px; border-radius: 9px; cursor: pointer; color: var(--muted, #64646a); }
.ftq-tabs button.on { background: #fff; color: var(--text, #17171c); box-shadow: var(--shadow-sm, 0 2px 10px rgba(20,20,40,.06)); }

/* ---------- Booking page ---------- */
.bk-wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: start; }
.bk-frame { border: 1px solid var(--line, #e9e9ec); border-radius: 20px; overflow: hidden; background: #fff; min-height: 640px; }
.bk-frame iframe { width: 100%; height: 700px; border: 0; display: block; }
.bk-side { display: grid; gap: 16px; }
.bk-point { display: flex; gap: 13px; background: var(--card, #fff); border: 1px solid var(--line, #e9e9ec); border-radius: 15px; padding: 16px 18px; }
.bk-point i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; font-style: normal; }
.bk-point b { display: block; font-size: 14.5px; }
.bk-point span { font-size: 13px; color: var(--muted, #64646a); }

/* ---------- Store ---------- */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.st-card { background: var(--card, #fff); border: 1px solid var(--line, #e9e9ec); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform .22s ease, box-shadow .22s ease; }
.st-card:hover { transform: translateY(-5px); box-shadow: var(--shadow, 0 18px 44px rgba(20,20,40,.10)); }
.st-img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.st-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.st-body h3 { font-size: 17px; }
.st-body p { font-size: 13.5px; color: var(--muted, #64646a); flex: 1; }
.st-price { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.st-price small { font-size: 12px; color: var(--muted, #64646a); font-weight: 600; }
.st-check { position: fixed; inset: 0; background: rgba(20,18,35,.62); backdrop-filter: blur(5px); z-index: 9700; display: none; place-items: center; padding: 18px; }
.st-check.show { display: grid; }
.st-check-card { width: 100%; max-width: 430px; background: #fff; border-radius: 20px; padding: 28px; position: relative; }
.st-check-card h3 { margin-bottom: 4px; }
.st-check-card .st-sub { font-size: 13px; color: #64646a; margin-bottom: 18px; }
.st-check-card input, .st-check-card textarea { width: 100%; padding: 11px 13px; border: 1.5px solid #e8e7f4; border-radius: 11px; font: inherit; font-size: 14px; margin-bottom: 10px; background: #fcfbff; }
.pay-box { background: var(--bg-soft, #f9f9fa); border: 1px dashed var(--line-2, #dcdce1); border-radius: 16px; padding: 22px; white-space: pre-line; font-size: 14px; line-height: 1.9; }

/* ---------- Course (LMS) ---------- */
.co-lesson { background: var(--card, #fff); border: 1px solid var(--line, #e9e9ec); border-radius: 16px; padding: 18px 20px; display: flex; gap: 14px; align-items: center; margin-bottom: 12px; cursor: pointer; transition: border-color .2s; }
.co-lesson:hover { border-color: var(--purple, #7b68ee); }
.co-num { width: 38px; height: 38px; border-radius: 50%; background: rgba(123,104,238,.1); color: var(--purple, #7b68ee); display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.co-lesson.playing { border-color: var(--purple, #7b68ee); box-shadow: 0 0 0 3px rgba(123,104,238,.12); }
.co-lesson .co-lock { margin-left: auto; font-size: 12px; color: var(--orange, #ff9f43); font-weight: 700; }
.co-player { aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; background: #000; margin-bottom: 20px; }
.co-player iframe { width: 100%; height: 100%; border: 0; }
.co-done { color: var(--green, #18a957); margin-left: auto; font-weight: 800; font-size: 13px; }

/* ---------- Webinar ---------- */
.wb-hero { padding: 80px 0 46px; text-align: center; }
.wb-cd { display: flex; gap: 14px; justify-content: center; margin: 26px 0; }
.wb-cd div { background: var(--card, #fff); border: 1px solid var(--line, #e9e9ec); border-radius: 16px; min-width: 86px; padding: 14px 10px; }
.wb-cd b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.wb-cd span { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted, #64646a); font-weight: 700; }
.wb-form { max-width: 440px; margin: 0 auto; display: grid; gap: 10px; }
.wb-form input { width: 100%; padding: 13px 15px; border: 1.5px solid var(--line, #e9e9ec); border-radius: 12px; font: inherit; font-size: 14.5px; background: var(--bg-soft, #f9f9fa); color: inherit; }

/* ---------- Affiliate ---------- */
.af-hero { background: linear-gradient(135deg, rgba(123,104,238,.08), rgba(253,113,175,.08)); border-radius: 26px; padding: 44px; text-align: center; margin: 40px 0; }
.af-link-box { display: flex; gap: 10px; max-width: 520px; margin: 22px auto 0; }
.af-link-box input { flex: 1; padding: 13px 15px; border: 1.5px solid var(--line, #e9e9ec); border-radius: 12px; font: inherit; font-size: 13.5px; background: var(--bg-soft,#f9f9fa); color: inherit; }
.af-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 560px; margin: 26px auto 0; }
.af-stats div { background: var(--card,#fff); border: 1px solid var(--line,#e9e9ec); border-radius: 15px; padding: 16px; }
.af-stats b { font-size: 26px; font-weight: 800; display: block; }
.af-stats span { font-size: 12px; color: var(--muted,#64646a); font-weight: 700; }

/* ---------- Client portal ---------- */
.pt-login { max-width: 420px; margin: 70px auto; background: var(--card,#fff); border: 1px solid var(--line,#e9e9ec); border-radius: 20px; padding: 34px; }
.pt-login input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line,#e9e9ec); border-radius: 11px; font: inherit; margin-bottom: 12px; background: var(--bg-soft,#f9f9fa); color: inherit; }
.pt-prog { height: 10px; border-radius: 99px; background: var(--bg-softer,#f4f4f6); overflow: hidden; margin: 10px 0 18px; }
.pt-prog i { display: block; height: 100%; background: linear-gradient(90deg,#6a56e8,#4e9bfa); border-radius: 99px; transition: width .5s ease; }
.pt-files a { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line,#e9e9ec); border-radius: 12px; margin-bottom: 10px; font-weight: 600; font-size: 14px; }

/* ---------- 404 ---------- */
.nf-wrap { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: 60px 20px; }
.nf-code { font-size: 110px; font-weight: 800; letter-spacing: -.05em; background: linear-gradient(90deg,#6a56e8,#4e9bfa); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }

/* ---------- misc ---------- */
.ftq-opt .tag { margin-left: auto; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 99px; background: rgba(24,169,87,.12); color: #129457; }
html.dark .ftq-opt.sel, html.dark .roi-row input, html.dark .wb-form input, html.dark .pt-login input, html.dark .ftq-fields input, html.dark .af-link-box input, html.dark .st-check-card input, html.dark .st-check-card textarea { background: #20202a; }
html.dark .st-check-card { background: #1a1a21; }
html.dark .roi-cell, html.dark .wb-cd div, html.dark .af-stats div, html.dark .ftq-card, html.dark .bk-point, html.dark .co-lesson, html.dark .pay-box { background: #1a1a21; border-color: #2a2a33; }
html.dark .pay-box { background: #14141a; }
html.dark .ftq-tabs { background: #1c1c24; }
html.dark .ftq-tabs button.on { background: #2b2b36; color: #fff; }
@media (max-width: 900px) {
  .ftq-wrap, .bk-wrap { grid-template-columns: 1fr; }
  .af-hero { padding: 28px 20px; }
}
@media (max-width: 620px) {
  .roi-out { grid-template-columns: 1fr 1fr; }
  .roi-row { grid-template-columns: 1fr; }
  .wa-float { left: 14px; bottom: 88px; width: 48px; height: 48px; }
  .dark-toggle { right: 14px; bottom: 158px; width: 40px; height: 40px; }
  .lang-toggle { right: 14px; bottom: 206px; height: 40px; }
  .nf-code { font-size: 76px; }
}