:root {
  --site-ink: #152238;
  --site-muted: #667085;
  --site-line: #e7ebf2;
  --site-surface: #f7f9fc;
  --site-accent: #1f6feb;
  --site-accent-dark: #164fa8;
  --site-warm: #ffb454;
}

body.site-body {
  color: var(--site-ink);
  background: #fff;
  font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.site-nav {
  background: linear-gradient(180deg, #152238 0%, #1e3558 100%);
  box-shadow: 0 14px 30px rgba(21, 34, 56, .14);
}

.site-nav .navbar-brand,
.site-nav .nav-link { color: rgba(255, 255, 255, .85); }
.site-nav .nav-link:hover,
.site-nav .nav-link:focus { color: #fff; }
.site-nav .nav-link.active { color: var(--site-warm); }

.site-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 85% 15%, rgba(31,111,235,.12), transparent 34%),
              linear-gradient(135deg, #f7f9fc 0%, #fff 52%, #eef5ff 100%);
}

.site-kicker {
  color: var(--site-accent);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.site-hero h1 { color: var(--site-ink); letter-spacing: -.035em; }
.site-hero h1 .accent { color: var(--site-accent); }
.site-lead { max-width: 700px; color: var(--site-muted); font-size: 1.15rem; line-height: 1.85; }
.site-contact { color: var(--site-muted); font-size: .95rem; }
.site-contact a { color: var(--site-accent); font-weight: 700; }

.site-section { padding: 5.5rem 0; }
.site-section:nth-of-type(even) { background: var(--site-surface); }
.site-section-heading { margin-bottom: 2.4rem; }
.site-section-heading h2 { color: var(--site-ink); margin-bottom: .65rem; }
.site-section-heading p { color: var(--site-muted); max-width: 720px; }

.site-card {
  height: 100%;
  padding: 1.55rem;
  border: 1px solid var(--site-line);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 12px 30px rgba(21, 34, 56, .05);
}
.site-card h3, .site-card h4 { color: var(--site-ink); }
.site-card p, .site-card li { color: var(--site-muted); }
.site-card .eyebrow { color: var(--site-accent); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.site-card ul { padding-left: 1.15rem; }

.site-timeline { position: relative; }
.site-timeline::before { content: ""; position: absolute; left: .55rem; top: .4rem; bottom: .4rem; width: 2px; background: #d9e5f7; }
.site-timeline-item { position: relative; padding-left: 2.2rem; margin-bottom: 2rem; }
.site-timeline-item:last-child { margin-bottom: 0; }
.site-timeline-item::before { content: ""; position: absolute; left: 0; top: .5rem; width: 1.15rem; height: 1.15rem; border: 4px solid #fff; border-radius: 50%; background: var(--site-accent); box-shadow: 0 0 0 2px #b9d2f7; }
.site-timeline-item h3 { margin-bottom: .25rem; color: var(--site-ink); }
.site-timeline-meta { color: var(--site-accent); font-size: .88rem; font-weight: 800; }

.site-pill-list { display: flex; flex-wrap: wrap; gap: .65rem; padding: 0; list-style: none; }
.site-pill-list li { padding: .55rem .8rem; border: 1px solid #dbe7f7; border-radius: 999px; background: #f5f9ff; color: #315d91; font-size: .9rem; }

.site-brand { color: var(--site-accent); font-weight: 800; }
.site-footer { padding: 2rem 0; background: var(--site-ink); color: rgba(255,255,255,.7); font-size: .85rem; }
.site-footer a { color: #fff; }

.social-page { min-height: 100vh; background: linear-gradient(135deg, #f7f9fc, #eef5ff); }
.social-shell { max-width: 1120px; margin: 0 auto; padding: 4rem 1rem; }
.social-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; }
.social-header h1 { color: var(--site-ink); margin-bottom: .35rem; }
.social-header p { color: var(--site-muted); margin: 0; }
.back-link { color: var(--site-accent); font-weight: 800; text-decoration: none; }
.social-group { margin-top: 2.4rem; }
.social-group h2 { color: var(--site-ink); font-size: 1.7rem; }
.social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.social-card { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 1.25rem; border: 1px solid var(--site-line); border-radius: 1rem; background: #fff; box-shadow: 0 12px 30px rgba(21,34,56,.06); text-align: center; }
.social-card img { width: 180px; height: 180px; object-fit: contain; border-radius: .65rem; background: #fff; }
.social-card h3 { margin: 0; color: var(--site-ink); font-size: 1.05rem; }
.social-card p { margin: 0; color: var(--site-muted); font-size: .86rem; }

@media (max-width: 991.98px) {
  .site-hero { min-height: auto; padding: 7rem 0 5rem; }
  .site-section { padding: 4rem 0; }
}

@media (min-width: 992px) {
  body.site-body:not(.social-page) main,
  body.site-body:not(.social-page) .site-footer { margin-left: 17rem; }
}

@media (max-width: 575.98px) {
  .site-hero h1 { font-size: 3.5rem; }
  .site-section { padding: 3.2rem 0; }
  .social-header { align-items: flex-start; flex-direction: column; }
}
