/* ===========================================================
   jellybeans.fundrover.in — shared stylesheet
   Theme: navy/white, card-based, professional — matched to the
   fundrover.in look (primary #15388C), set in Google Sans.
   =========================================================== */

:root{
  --navy: #15388c;
  --navy-dark: #0e2760;
  --navy-tint: #eef1fa;
  --ink: #1b2130;
  --ink-soft: #5a6072;
  --line: #e3e6ef;
  --paper: #ffffff;
  --bg: #f7f8fc;
  --amazon: #e6820e;
  --amazon-dark: #b5650a;
  --youtube: #cc1f1f;
  --youtube-dark: #9e1717;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(20,30,70,.06), 0 8px 24px -12px rgba(20,30,70,.18);
  --maxw: 1120px;

  /* jellybean accent set — used sparingly as small dots / tags, never as body color */
  --bean-1: #e0533d; /* red */
  --bean-2: #f0a63a; /* orange */
  --bean-3: #3fae6a; /* green */
  --bean-4: #3a86c8; /* blue */
  --bean-5: #9b5fc0; /* purple */
  --bean-6: #e6c22c; /* yellow */
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body{
  margin:0;
  font-family: "Google Sans", "Product Sans", Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; }

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

h1,h2,h3,h4{
  font-family: inherit;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

p{ margin: 0 0 1em; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------- skip link (a11y) ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--navy); color:#fff; padding:10px 16px;
  border-radius: 0 0 8px 0; z-index: 200;
}
.skip-link:focus{ left:0; top:0; }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 72px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color: var(--ink);
  font-weight:700; font-size:1.28rem;
}
.brand .mark{ width:34px; height:34px; flex:none; }
.brand .sub{
  display:block; font-weight:500; font-size:.66rem;
  color: var(--ink-soft); letter-spacing:.02em; margin-top:1px;
}

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line); border-radius: 8px;
  width:42px; height:42px; cursor:pointer; position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:11px; right:11px; height:2px;
  background: var(--ink); transition:.2s;
}
.nav-toggle span{ top:20px; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }

.main-nav{ display:flex; align-items:center; gap:28px; }
.main-nav a{
  text-decoration:none; color: var(--ink); font-weight:600; font-size:.96rem;
  padding: 8px 2px; border-bottom:2px solid transparent;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{
  color: var(--navy); border-bottom-color: var(--navy);
}
.main-nav .cta{
  background: var(--navy); color:#fff !important; padding:9px 16px;
  border-radius: 999px; border-bottom:none !important; font-size:.9rem;
}
.main-nav .cta:hover{ background: var(--navy-dark); }

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(900px 320px at 85% -10%, rgba(21,56,140,.10), transparent 60%),
    linear-gradient(180deg, #fff, var(--navy-tint) 180%);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 44px;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--navy-tint); color: var(--navy);
  font-weight:700; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; margin-bottom:16px;
}
.eyebrow .dots{ display:inline-flex; gap:3px; }
.eyebrow .dots i{ width:6px; height:6px; border-radius:50%; display:inline-block; }
.eyebrow .dots i:nth-child(1){ background: var(--bean-1); }
.eyebrow .dots i:nth-child(2){ background: var(--bean-2); }
.eyebrow .dots i:nth-child(3){ background: var(--bean-4); }

.hero h1{
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  max-width: 20ch;
}
.hero .lede{
  font-size: 1.1rem; color: var(--ink-soft); max-width: 62ch;
}
.hero-stats{
  display:flex; flex-wrap:wrap; gap:28px; margin-top:22px;
}
.hero-stats .stat b{
  display:block; font-size:1.5rem; color: var(--navy);
}
.hero-stats .stat span{ font-size:.82rem; color: var(--ink-soft); }

/* ---------- why jellybeans ---------- */
.why{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
  margin: 36px 0 8px;
  display:grid; grid-template-columns: auto 1fr; gap:24px; align-items:flex-start;
}
.why .jar{ width:64px; height:64px; flex:none; }
.why h2{ font-size:1.3rem; margin-bottom:.4em; }
.why p{ color: var(--ink-soft); }
.why p:last-child{ margin-bottom:0; }
.why .about-link{
  display:inline-flex; align-items:center; gap:6px;
  color: var(--navy); font-weight:700; text-decoration:none;
  border-bottom:1px solid rgba(21,56,140,.35);
}
.why .about-link:hover{ border-bottom-color: var(--navy); }

/* ---------- section shell ---------- */
.section{ padding: 44px 0; }
.section-head{ margin-bottom: 26px; max-width: 72ch; }
.section-head h2{ font-size: 1.6rem; }
.section-head p{ color: var(--ink-soft); margin:0; }
.count-pill{
  display:inline-block; background: var(--navy); color:#fff;
  font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:999px;
  vertical-align: middle; margin-left:10px;
}

/* ---------- book grid ---------- */
.book-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
  gap:18px;
}
.book-card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow:hidden; display:flex; flex-direction:column;
}
.spine{
  height:86px; position:relative; display:flex; align-items:flex-end; padding:12px 16px;
  color:#fff; font-weight:700; font-size:.72rem; letter-spacing:.03em; text-transform:uppercase;
  background: linear-gradient(135deg, var(--c1), var(--c2));
}
.spine::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.25));
}
.spine span{ position:relative; z-index:1; }
.book-card .body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.book-card h3{ font-size:1.04rem; margin-bottom:.2em; }
.book-card .author{ font-size:.82rem; color: var(--ink-soft); margin-bottom:.7em; font-weight:600; }
.book-card .summary{ font-size:.89rem; color: var(--ink-soft); flex:1; margin-bottom:14px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 14px; border-radius: 999px; font-weight:700; font-size:.83rem;
  text-decoration:none; border:1px solid transparent; transition:.15s;
}
.btn-amazon{ background: var(--amazon); color:#fff; }
.btn-amazon:hover{ background: var(--amazon-dark); }
.btn-youtube{ background: var(--youtube); color:#fff; }
.btn-youtube:hover{ background: var(--youtube-dark); }
.btn-ghost{ background: var(--navy-tint); color: var(--navy); }
.btn-ghost:hover{ background:#e2e8f8; }

/* ---------- course list ---------- */
.course-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  gap:16px;
}
.course-card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding:18px 20px; display:flex; gap:14px; align-items:flex-start;
}
.course-card .avatar{
  width:44px; height:44px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:1rem;
  background: linear-gradient(135deg, var(--c1), var(--c2));
}
.course-card h3{ font-size:1rem; margin-bottom:.15em; }
.course-card .source{ font-size:.78rem; color: var(--navy); font-weight:700; margin-bottom:.4em; }
.course-card .desc{ font-size:.86rem; color: var(--ink-soft); margin-bottom:12px; }

/* ---------- documentaries ---------- */
.doc-cat{ margin-bottom: 34px; }
.doc-cat h3{
  font-size:1.05rem; color: var(--navy); display:flex; align-items:center; gap:10px;
  margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid var(--navy-tint);
}
.doc-cat h3 i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.doc-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:10px; }
.doc-item{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding:12px 14px; font-size:.88rem; font-weight:600;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.doc-item a.watch{
  flex:none; font-size:.72rem; font-weight:700; color: var(--youtube);
  text-decoration:none; white-space:nowrap;
}
.doc-item a.watch:hover{ text-decoration:underline; }

/* ---------- cross-links / promo ---------- */
.promo{
  background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  color:#fff; border-radius: var(--radius); padding: 34px 32px;
  margin: 46px 0 10px; display:flex; flex-wrap:wrap; gap:20px;
  align-items:center; justify-content:space-between;
}
.promo h2{ font-size:1.3rem; margin-bottom:.25em; }
.promo p{ color: rgba(255,255,255,.8); margin:0; max-width: 52ch; }
.promo .btn{ background:#fff; color: var(--navy); }
.promo .btn:hover{ background: var(--navy-tint); }

/* ---------- footer ---------- */
.site-footer{
  background: var(--navy-dark); color: rgba(255,255,255,.82);
  margin-top: 60px; padding: 40px 0 26px; font-size:.88rem;
}
.site-footer a{ color:#fff; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.footer-top{
  display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between;
  padding-bottom: 24px; border-bottom:1px solid rgba(255,255,255,.14); margin-bottom:18px;
}
.footer-brand{ max-width:340px; }
.footer-brand .brand{ color:#fff; margin-bottom:8px; }
.footer-brand p{ color: rgba(255,255,255,.65); font-size:.85rem; }
.footer-links{ display:flex; gap:56px; flex-wrap:wrap; }
.footer-links h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color: rgba(255,255,255,.55); margin-bottom:10px; }
.footer-links li{ list-style:none; margin-bottom:8px; }
.footer-links ul{ margin:0; padding:0; }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; color: rgba(255,255,255,.5); font-size:.78rem; }
.footer-bottom a{ color: rgba(255,255,255,.7); }

/* ---------- responsive ---------- */
@media (max-width: 820px){
  .why{ grid-template-columns: 1fr; }
  .why .jar{ width:46px; height:46px; }
}

@media (max-width: 720px){
  .nav-toggle{ display:block; }
  .main-nav{
    position:absolute; top:72px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0;
    max-height:0; overflow:hidden; transition:.25s ease;
  }
  .main-nav.open{ max-height:320px; box-shadow: var(--shadow); }
  .main-nav a{ padding:14px 20px; border-bottom:1px solid var(--line); border-radius:0; }
  .main-nav a[aria-current="page"]{ background: var(--navy-tint); }
  .main-nav .cta{ margin:14px 20px; text-align:center; border-radius:999px; }
  .hero{ padding:40px 0 32px; }
  .promo{ padding:26px 22px; }
}

@media (max-width: 480px){
  .brand{ font-size:1.1rem; }
  .brand .sub{ display:none; }
  .why{ padding:22px; }
}