/* Shikshak Sahyog — public landing page */

body.landing { background: var(--surface); }

.lnav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 248, 252, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--sp-6);
}
.lnav .brand { margin-bottom: 0; padding: 0; gap: 10px; }
.lnav .brand .logo { width: 36px; height: 36px; }
.lnav .brand-text b { font-size: var(--fs-sm); }
.lnav .brand-text .tagline { display: none; }
.lnav-links { display: flex; align-items: center; gap: var(--sp-4); }
.lnav-links a.plain { color: var(--ink); font-weight: 600; font-size: var(--fs-sm); }
.lnav-links a.plain:hover { color: var(--primary); text-decoration: none; }

.hero {
  max-width: 860px; margin: 0 auto; text-align: center;
  padding: var(--sp-10) var(--sp-6) var(--sp-8);
}
.hero-emblem { width: 100px; height: 100px; margin-bottom: var(--sp-5); filter: drop-shadow(0 6px 16px rgba(21, 26, 45, .25)); }
.hero h1 { font-size: clamp(2rem, 5vw, var(--fs-3xl)); font-weight: 700; line-height: 1.1; margin-bottom: var(--sp-5); }
.hero h1 .grad-text {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { font-size: var(--fs-lg); color: var(--muted); line-height: 1.6; margin-bottom: var(--sp-6); }
.hero .cta-row { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.hero .cta-row .btn { padding: 13px 26px; font-size: var(--fs-base); }
.hero .trust-line { font-size: var(--fs-xs); color: var(--muted); }

.section { max-width: 1080px; margin: 0 auto; padding: var(--sp-10) var(--sp-6); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto var(--sp-8); }
.section-head h2 { font-size: var(--fs-2xl); font-weight: 700; margin-bottom: var(--sp-3); }
.section-head p { color: var(--muted); font-size: var(--fs-base); line-height: 1.6; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.step-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: var(--sp-6); }
.step-num {
  width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4);
}
.step-card h3 { font-size: var(--fs-md); font-weight: 700; margin-bottom: var(--sp-2); }
.step-card p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; }
.showcase-copy h2 { font-size: var(--fs-2xl); font-weight: 700; margin-bottom: var(--sp-3); }
.showcase-copy p { color: var(--muted); font-size: var(--fs-base); line-height: 1.65; margin-bottom: var(--sp-4); }
.showcase-copy ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.showcase-copy li { font-size: var(--fs-sm); display: flex; gap: 10px; align-items: flex-start; }
.showcase-copy li .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-top: 6px; flex-shrink: 0; }

.subjects-band {
  background: var(--ink); color: #fff; border-radius: var(--radius-card);
  padding: var(--sp-8); text-align: center; max-width: 1080px; margin: 0 auto var(--sp-10);
}
.subjects-band h2 { font-size: var(--fs-2xl); font-weight: 700; margin-bottom: var(--sp-3); }
.subjects-band p { color: #b6bcce; max-width: 560px; margin: 0 auto var(--sp-5); line-height: 1.6; }
.subject-chips { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.subject-chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-pill); padding: 8px 16px; font-size: var(--fs-sm); font-weight: 600; }
.subject-chip.live { background: var(--grad); border: none; }

.final-cta { text-align: center; padding: var(--sp-10) var(--sp-6); }
.final-cta h2 { font-size: var(--fs-2xl); font-weight: 700; margin-bottom: var(--sp-3); }
.final-cta p { color: var(--muted); margin-bottom: var(--sp-5); }

@media (max-width: 800px) {
  .steps { grid-template-columns: 1fr; }
  .showcase { grid-template-columns: 1fr; }
  .showcase .showcase-visual { order: -1; }
}