/* scholars gate - main stylesheet */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

:root {
  --blue: #1a5276;
  --blue-l: #2980b9;
  --blue-d: #0e3a53;
  --teal: #148f77;
  --ink: #1a1a2e;
  --mid: #4a4a5a;
  --dim: #6b7688;
  --g50: #f8f9fa;
  --g100: #f0f2f5;
  --g200: #e2e6ea;
  --g300: #cdd3da;
  --hd: 'Merriweather', Georgia, serif;
  --bd: 'Inter', 'Segoe UI', Roboto, sans-serif;
}

html { scroll-behavior: smooth }
body { font: 400 1rem/1.7 var(--bd); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased }
img { max-width: 100%; display: block }
a { color: var(--blue-l); text-decoration: none }
a:hover { text-decoration: underline }
h1, h2, h3, h4 { font-family: var(--hd); color: var(--ink); line-height: 1.3 }

.w { max-width: 1100px; margin: 0 auto; padding: 0 24px }

/* ----- header ----- */
header { background: #fff; border-bottom: 1px solid var(--g200); padding: 16px 0; position: sticky; top: 0; z-index: 90 }
header .w { display: flex; align-items: center; justify-content: space-between; gap: 16px }
.logo { font: 900 1.35rem var(--hd); color: var(--blue-d); display: flex; align-items: center; gap: 10px; white-space: nowrap }
.logo span { font-size: 1.5rem }
nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap }
nav a { font-size: .88rem; font-weight: 500; color: var(--mid); padding: 6px 13px; border-radius: 6px; transition: .2s }
nav a:hover { background: var(--g100); color: var(--blue); text-decoration: none }

/* ----- hero ----- */
.hero { background: linear-gradient(135deg, var(--blue) 0%, var(--teal) 100%); color: #fff; padding: 80px 0 72px; text-align: center }
.hero h1 { font-size: 2.8rem; font-weight: 900; margin-bottom: 16px; letter-spacing: -.02em }
.hero p { font-size: 1.15rem; opacity: .92; max-width: 640px; margin: 0 auto 32px; line-height: 1.7 }
.btn { display: inline-block; padding: 14px 36px; border-radius: 10px; font-weight: 700; font-size: 1rem; transition: .2s; cursor: pointer; border: 0 }
.btn-w { background: #fff; color: var(--blue-d) }
.btn-w:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.18); text-decoration: none }

/* ----- subject cards ----- */
.subjects { padding: 72px 0; background: var(--g50) }
.subjects h2, .cur h2, .res h2, .faq h2, .feat h2, .voices h2 { text-align: center; font-size: 2rem; margin-bottom: 12px }
.sub-intro { text-align: center; color: var(--mid); margin-bottom: 40px; max-width: 580px; margin-left: auto; margin-right: auto }
.sgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px }
.scard { background: #fff; border-radius: 14px; padding: 28px; box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: .25s; border: 1px solid var(--g200) }
.scard:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1) }
.scard .ic { font-size: 2.2rem; margin-bottom: 14px }
.scard h3 { font-size: 1.1rem; margin-bottom: 8px; font-family: var(--hd) }
.scard p { font-size: .9rem; color: var(--mid); line-height: 1.6 }
.badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: var(--g100); color: var(--mid); margin-top: 10px }

/* ----- stats strip ----- */
.nums { background: linear-gradient(135deg, var(--blue-d) 0%, var(--blue) 100%); color: #fff; padding: 56px 0 }
.ngrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center }
.ngrid .v { font: 900 2.4rem var(--hd) }
.ngrid .l { font-size: .88rem; opacity: .82; margin-top: 4px }

/* ----- features ----- */
.feat { padding: 72px 0 }
.feat h2 { margin-bottom: 40px }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px }
.fcard { text-align: center; padding: 24px }
.fcard .ic { font-size: 2.4rem; margin-bottom: 14px }
.fcard h3 { font-size: 1.05rem; margin-bottom: 8px }
.fcard p { font-size: .88rem; color: var(--mid); line-height: 1.6 }

/* ----- curriculum catalog ----- */
.cur { padding: 72px 0; background: var(--g50) }
.cur h2 { margin-bottom: 12px }
.cur-intro { text-align: center; color: var(--mid); margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto }
.cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px }
.ccard { background: #fff; border-radius: 12px; padding: 24px; border: 1px solid var(--g200) }
.ccard h3 { font-size: 1.05rem; margin-bottom: 8px; color: var(--blue-d) }
.ccard p { font-size: .88rem; color: var(--mid); line-height: 1.6; margin-bottom: 10px }
.ccard .std { font-size: .78rem; color: var(--dim); font-style: italic }

/* ----- testimonials ----- */
.voices { padding: 72px 0 }
.voices h2 { margin-bottom: 40px }
.tgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px }
.tcard { background: var(--g50); border-radius: 14px; padding: 28px; border: 1px solid var(--g200) }
.tcard blockquote { font-size: .95rem; line-height: 1.7; color: var(--ink); margin-bottom: 14px; font-style: italic }
.tcard cite { font-size: .85rem; color: var(--mid); font-style: normal; font-weight: 600 }

/* ----- standards ribbon ----- */
.ribbon { padding: 40px 0; background: #fff; border-top: 1px solid var(--g200); border-bottom: 1px solid var(--g200) }
.ribbon .w { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; text-align: center }
.ribbon span { font-size: .82rem; font-weight: 600; color: var(--mid); letter-spacing: .02em }

/* ----- resources ----- */
.res { padding: 72px 0; background: var(--g50) }
.res h2 { margin-bottom: 12px }
.res-intro { text-align: center; color: var(--mid); margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto }
.rlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px }
.ritem { background: #fff; padding: 22px; border-radius: 10px; border: 1px solid var(--g200); display: flex; gap: 14px; align-items: flex-start }
.ritem .ri { font-size: 1.6rem; flex-shrink: 0; margin-top: 2px }
.ritem h4 { font-size: .95rem; margin-bottom: 4px }
.ritem p { font-size: .83rem; color: var(--mid); line-height: 1.5 }

/* ----- faq ----- */
.faq { padding: 72px 0 }
.faq h2 { margin-bottom: 40px }
.faq-ls { max-width: 720px; margin: 0 auto }
.faq-i { border-bottom: 1px solid var(--g200); padding: 18px 0 }
.faq-i summary { font-weight: 600; font-size: .95rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center }
.faq-i summary::after { content: '+'; font-size: 1.2rem; color: var(--dim); transition: .2s }
.faq-i[open] summary::after { transform: rotate(45deg) }
.faq-i p { font-size: .88rem; color: var(--mid); line-height: 1.7; margin-top: 10px }

/* ----- footer ----- */
footer { background: var(--g50); border-top: 1px solid var(--g200); padding: 32px 0; text-align: center; font-size: .85rem; color: var(--dim) }
footer a { color: var(--mid) }

@media (max-width: 768px) {
  header .w { flex-direction: column; gap: 10px }
  nav { justify-content: center }
  .hero { padding: 52px 0 44px }
  .hero h1 { font-size: 1.8rem }
  .ngrid { grid-template-columns: repeat(2, 1fr); gap: 16px }
  .ngrid .v { font-size: 1.8rem }
}