/* ============================================================
   GYAANSHALA — HOMEPAGE (home_gs.php) page-specific styles

   Ported from the HERO/MARQUEE/HOW-IT-WORKS/COURSES/PROOF/
   TESTIMONIALS/FAQ/FINAL-CTA/mobile-buy sections of
   docs/design/artifacts/gyaanshala-homepage.html. Chrome (topbar/hdr/nav/
   ftr) and the shared primitives (buttons, .gs-wrap, .eyebrow, .sec-head,
   .badge, the .course-card family) live in gs-brand.css, already linked on
   every page by includes_top.php — this file only carries what is unique
   to the homepage.

   SCOPED UNDER .gsx, same convention gs-brand.css uses and
   application/controllers/Gstest.php::test_dashboard_css_is_scoped_and_responsive
   already enforces for gs-brand.css / gs-page-dashboard.css: every
   top-level selector starts with `.gsx`, tokens stay on `.gsx` (defined in
   gs-brand.css, not redeclared here).
   ============================================================ */

/* ---------- HERO ---------- */
.gsx .hero{
  position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding:74px 0 96px;
}
.gsx .hero::before{
  content:"";position:absolute;inset:0;
  background-image:var(--booti);background-size:66px 66px;
  opacity:.16;
}
.gsx .hero::after{
  content:"";position:absolute;left:50%;top:-30%;width:900px;height:900px;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(38,64,126,.85) 0%,rgba(16,26,51,0) 62%);
  pointer-events:none;
}
.gsx .hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:980px){
  .gsx .hero{padding:52px 0 68px}
  .gsx .hero-in{grid-template-columns:1fr;gap:40px}
}

.gsx .hero h1{
  font-size:clamp(40px,5.6vw,70px);color:#fff;margin:20px 0 0;
  letter-spacing:-.042em;
}
.gsx .hero h1 .accent{
  color:var(--haldi);position:relative;white-space:nowrap;
}
.gsx .hero h1 .accent::after{
  content:"";position:absolute;left:0;right:0;bottom:.02em;height:.11em;
  background:var(--haldi);opacity:.28;border-radius:3px;
}
.gsx .hero-sub{
  margin-top:22px;font-size:clamp(16px,1.35vw,18.5px);color:rgba(255,255,255,.8);
  max-width:34ch;line-height:1.6;
}
.gsx .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.gsx .hero-note{margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.6)}
.gsx .hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}

/* ---------- SIGNATURE: THE BATCH CARD ---------- */
.gsx .batch{
  background:var(--white);color:var(--ink);border-radius:var(--r-l);
  box-shadow:var(--shadow-m);overflow:hidden;
  border:1px solid rgba(255,255,255,.5);
}
.gsx .batch-head{
  background:var(--paper-2);padding:16px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.gsx .batch-title{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em}
.gsx .batch-stamp{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--neem);border:1.2px solid var(--neem);border-radius:100px;padding:4px 10px;
}
.gsx .batch-tabs{display:flex;gap:6px;padding:14px 16px 0;flex-wrap:wrap}
.gsx .batch-tab{
  padding:8px 13px;border-radius:100px;font-size:13.5px;font-weight:650;
  border:1.4px solid var(--line);transition:.15s;white-space:nowrap;
}
.gsx .batch-tab:hover{border-color:var(--line-strong)}
.gsx .batch-tab[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

.gsx .batch-body{padding:20px 20px 8px}
.gsx .batch-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px dashed var(--line);
}
.gsx .batch-row dt{font-size:14.5px;color:var(--ink-2);font-weight:550}
.gsx .batch-row dd{
  margin:0;font-family:var(--display);font-weight:700;font-size:19px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.gsx .batch-row.is-profit dd{color:var(--neem)}

.gsx .batch-slider{padding:18px 20px 4px}
.gsx .batch-slider label{display:flex;justify-content:space-between;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:10px}
.gsx .batch-slider label b{font-family:var(--display);color:var(--ink)}
.gsx input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:100px;
  background:linear-gradient(90deg,var(--haldi) var(--fill,50%),var(--paper-2) var(--fill,50%));
  outline-offset:6px;
}
.gsx input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--ink);border:4px solid var(--haldi);cursor:grab;
}
.gsx input[type=range]::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:var(--ink);
  border:4px solid var(--haldi);cursor:grab;
}

.gsx .batch-total{
  margin:18px 0 0;padding:20px;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.gsx .batch-total .lbl{font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.62)}
.gsx .batch-total .amt{
  font-family:var(--display);font-weight:800;font-size:clamp(30px,4.6vw,40px);
  color:var(--haldi);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
}
.gsx .batch-foot{
  padding:12px 20px 18px;font-size:11.8px;color:rgba(16,26,51,.55);line-height:1.5;
  background:var(--paper-2);
}

/* ---------- TRUST MARQUEE ----------
   data-gsx-marquee (gs-brand.js) duplicates this file's single set of spans
   at runtime so the `slide` keyframe's translateX(-50%) loop is seamless —
   only one copy is authored here. */
.gsx .marquee{background:var(--haldi);color:var(--ink);overflow:hidden;border-block:2px solid var(--ink)}
.gsx .marquee-track{display:flex;gap:0;width:max-content;animation:gs-marquee-slide 34s linear infinite}
.gsx .marquee-track span{
  padding:13px 26px;font-weight:700;font-size:14px;letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
}
.gsx .marquee-track span::after{content:"✦";opacity:.45;margin-left:16px}
@keyframes gs-marquee-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- SECTION SHELL ---------- */
.gsx .sec{padding:88px 0}
@media(max-width:640px){.gsx .sec{padding:62px 0}}

/* ---------- HOW IT WORKS ---------- */
.gsx .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.gsx .steps{grid-template-columns:1fr}}
.gsx .step{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);
  padding:30px 26px 28px;position:relative;transition:.22s ease;
}
.gsx .step:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--line-strong)}
.gsx .step-n{
  font-family:var(--display);font-size:13px;font-weight:800;letter-spacing:.14em;
  color:var(--haldi);-webkit-text-stroke:.5px var(--ink);
  display:block;margin-bottom:16px;
}
.gsx .step h3{font-size:22px;margin-bottom:10px}
.gsx .step p{font-size:15.2px;color:var(--ink-2);opacity:.85}
.gsx .step-glyph{
  position:absolute;top:24px;right:24px;font-size:26px;opacity:.9;
}

/* ---------- COURSES ---------- */
.gsx .courses-sec{background:var(--paper-2)}
.gsx .cat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.gsx .cat-tab{
  padding:11px 20px;border-radius:100px;font-weight:650;font-size:14.5px;
  border:1.5px solid var(--line);background:var(--white);transition:.16s;
}
.gsx .cat-tab:hover{border-color:var(--line-strong)}
.gsx .cat-tab[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

.gsx .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:1000px){.gsx .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.gsx .grid{grid-template-columns:1fr;gap:18px}}

/* Real course thumbnails (get_course_thumbnail_url) fill the shared
   course-card-art box instead of the artifact's flat colour + emoji glyph —
   gs-brand.css only lays out the box, it has no img rule of its own. */
.gsx .course-card-art{background:var(--paper-2)}
.gsx .course-card-art img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
}

.gsx .courses-empty{
  grid-column:1/-1;padding:32px 24px;border:1px dashed var(--line-strong);
  border-radius:var(--r-l);background:var(--white);color:var(--ink-2);
  opacity:.8;font-size:15px;text-align:center;
}
.gsx .courses-more{margin-top:40px;text-align:center}

/* ---------- PROOF BAND ---------- */
.gsx .proof{background:var(--ink-2);color:#fff;position:relative;overflow:hidden}
.gsx .proof::before{
  content:"";position:absolute;inset:0;background-image:var(--booti);
  background-size:58px 58px;opacity:.13;
}
.gsx .proof-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
@media(max-width:900px){.gsx .proof-in{grid-template-columns:1fr;gap:36px}}
.gsx .proof h2{font-size:clamp(28px,3.4vw,42px);color:#fff;margin-top:14px}
.gsx .proof p{margin-top:16px;color:rgba(255,255,255,.75);font-size:16.5px;max-width:48ch}
.gsx .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--r-l);overflow:hidden}
.gsx .stat{background:var(--ink-2);padding:30px 26px}
.gsx .stat b{
  display:block;font-family:var(--display);font-size:clamp(34px,4.4vw,50px);
  font-weight:800;letter-spacing:-.05em;color:var(--haldi);line-height:1;
  font-variant-numeric:tabular-nums;
}
.gsx .stat span{display:block;margin-top:10px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.6)}

/* ---------- TESTIMONIALS ---------- */
.gsx .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:960px){.gsx .quotes{grid-template-columns:1fr}}
.gsx .quote{
  /* position:static neutralizes a legacy theme selector of the same name
     (a bare `.quote{position:absolute;...}`) -- that reset now lives in
     gs-brand.css, promoted alongside the .course-card / .faq resets so
     any `.gsx` page reusing these class names inherits it. */
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);
  padding:28px 26px;display:flex;flex-direction:column;
}
.gsx .quote .stars{color:var(--haldi);letter-spacing:2px;font-size:15px;margin-bottom:14px}
.gsx .quote blockquote{
  margin:0;font-family:var(--display);font-weight:600;font-size:19px;line-height:1.4;
  letter-spacing:-.02em;flex:1;
}
.gsx .quote figcaption{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:12px;
}
.gsx .quote .avatar{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink);
}
.gsx .quote .who{font-size:14.5px;font-weight:700;line-height:1.3}
.gsx .quote .where{font-size:13px;color:var(--ink-2);opacity:.7}

/* ---------- FAQ ----------
   The artifact used native <details>/<summary>; this view uses gs-brand.js's
   data-gsx-acc hook instead (button + panel), so the shape is a plain
   .faq-item / .faq-q / .faq-a triple with an `.open` class the shared JS
   toggles, rather than [open] attribute selectors. */
/* padding/background reset for the legacy theme's bare `.faq{padding:80px 0
   30px;background-color:...}` now lives in gs-brand.css, promoted alongside
   the .course-card / .quote resets; this rule only carries the layout that
   is specific to this page's FAQ block. */
.gsx .faq{max-width:840px;margin-inline:auto}
.gsx .faq-item{border-bottom:1px solid var(--line);padding:6px 0}
.gsx .faq-q{
  display:block;width:100%;text-align:left;cursor:pointer;position:relative;
  padding:20px 44px 20px 0;font-family:var(--display);font-weight:700;
  font-size:19.5px;letter-spacing:-.025em;line-height:1.32;
}
.gsx .faq-q:hover{color:var(--indigo)}
.gsx .faq-chev{
  position:absolute;right:8px;top:50%;width:13px;height:13px;
  border-right:2.2px solid var(--haldi);border-bottom:2.2px solid var(--haldi);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s ease;
}
.gsx .faq-item.open .faq-chev{transform:translateY(-30%) rotate(-135deg)}
.gsx .faq-a{display:none;padding:0 40px 22px 0;color:var(--ink-2);opacity:.86;font-size:16px}
.gsx .faq-item.open .faq-a{display:block}

/* ---------- FINAL CTA ---------- */
.gsx .finale{background:var(--haldi);color:var(--ink);position:relative;overflow:hidden}
.gsx .finale::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23101A33' stroke-width='1.1' opacity='.22'%3E%3Cpath d='M22 8c4 5 6 9 6 12s-2.7 6-6 6-6-3-6-6 2-7 6-12z'/%3E%3Cpath d='M22 26v9'/%3E%3Ccircle cx='22' cy='38' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size:60px 60px;
}
.gsx .finale-in{position:relative;z-index:2;text-align:center;max-width:760px;margin-inline:auto}
.gsx .finale h2{font-size:clamp(32px,4.6vw,56px);letter-spacing:-.045em}
.gsx .finale p{margin-top:18px;font-size:17.5px;color:rgba(16,26,51,.8)}
.gsx .finale .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.gsx .finale .fine{margin-top:20px;font-size:13.5px;color:rgba(16,26,51,.66)}

/* ---------- sticky mobile buy bar ---------- */
.gsx .mobile-buy{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  background:var(--white);border-top:1px solid var(--line-strong);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 26px rgba(16,26,51,.14);
  align-items:center;gap:12px;
}
.gsx .mobile-buy .mb-price{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.03em;flex:none}
.gsx .mobile-buy .mb-price small{display:block;font-family:var(--body);font-size:11px;font-weight:600;color:var(--ink-2);opacity:.7;letter-spacing:0}
@media(max-width:768px){
  .gsx .mobile-buy{display:flex}
}
/* Body padding for the fixed bar is added at runtime by home_gs.php's own
   script (measuring the bar's real height) rather than here: footer.php
   renders as a sibling of `.gsx.gsx-home`, outside this file's scope, and a
   fixed 76px guess either clips a taller bar or leaves a gap under a
   shorter one. */