/* ============================================================
   Educure Technologies — shared design system
   Palette (exact, client-supplied):
     forest  #0E381A  deep forest green — dark sections, headings
     tech    #1C883E  tech green — primary accent / CTA
     sage    #7AA284  sage/mint — secondary accent
     mist    #B8C2B8  pale sage-gray — borders, muted fills
     cream   #F6F3F1  warm off-white — page background
     charcoal #1C2019 — body text
   Brand accents (used only inside "Our Brands" panels + brand chips):
     Key Skills Hub — charcoal #4A5456 / orange #EF902D
     Wajha Talent   — maroon #5C1A2B / navy #1B2A4A
   Type: Fraunces (display/serif) + IBM Plex Sans (body/UI)
   ============================================================ */

:root {
  --forest: #0E381A;
  --tech: #1C883E;
  --sage: #7AA284;
  --mist: #B8C2B8;
  --cream: #F6F3F1;
  --charcoal: #1C2019;
}

* { -webkit-font-smoothing: antialiased; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: 'IBM Plex Sans', sans-serif;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
}

/* Visible keyboard focus, everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--tech);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--tech); color: #fff; }

/* Line length discipline for long-form copy */
.prose-measure { max-width: 62ch; }

/* ---- Eyebrow / kicker labels + footer headers: uppercase, letter-spaced ----
   Applied consistently everywhere a label/kicker appears (hero eyebrows,
   footer column headers) rather than only in some places. */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  font-size: 0.8rem;
}

/* ---- Nav underline (functional hover feedback, not decorative sprawl) ---- */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 2px;
  background: var(--tech);
  transition: right 0.2s ease;
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { right: 0; }

/* ---- Node / circuit motif, echoing the Educure mark ----
   Used once, deliberately, behind the hero — not repeated as filler. */
.node-motif {
  background-image:
    radial-gradient(circle, rgba(246,243,241,0.55) 1.6px, transparent 1.6px),
    radial-gradient(circle, rgba(246,243,241,0.35) 1.6px, transparent 1.6px);
  background-size: 46px 46px, 46px 46px;
  background-position: 0 0, 23px 23px;
}

.node-line {
  stroke: rgba(246,243,241,0.5);
  stroke-width: 1;
}

/* ---- Hero entrance: one orchestrated moment, not scattered fades ---- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise-in > * {
  opacity: 0;
  animation: rise-in 0.7s cubic-bezier(.22,.61,.36,1) forwards;
}
.rise-in > *:nth-child(1) { animation-delay: 0.05s; }
.rise-in > *:nth-child(2) { animation-delay: 0.16s; }
.rise-in > *:nth-child(3) { animation-delay: 0.27s; }
.rise-in > *:nth-child(4) { animation-delay: 0.38s; }
@media (prefers-reduced-motion: reduce) {
  .rise-in > * { opacity: 1; animation: none; transform: none; }
}

/* ---- Stat band divider ---- */
.stat-item + .stat-item { border-left: 1px solid rgba(184,194,184,0.35); }

/* ---- Brand panel diagonal seam (KSH / Wajha showcase) ---- */
.brand-panel-ksh {
  background-color: #4A5456;
  color: #F4F4F4;
}
.brand-panel-wajha {
  background-color: #5C1A2B;
  color: #F7EAEC;
}
.brand-chip-ksh { background: #4A5456; }
.brand-chip-wajha { background: #5C1A2B; }

/* ---- Buttons ---- */
.btn-primary {
  background: var(--tech);
  color: #fff;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn-primary:hover { background: #176e32; transform: translateY(-1px); }

.btn-outline {
  border: 1.5px solid var(--forest);
  color: var(--forest);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-outline:hover { background: var(--forest); color: #fff; }

.btn-outline-light {
  border: 1.5px solid rgba(246,243,241,0.6);
  color: var(--cream);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-outline-light:hover { background: var(--cream); color: var(--forest); }

/* ---- Marquee-free trusted-by strip: simple wrap, no fake logo art ---- */
.wordmark-chip {
  border: 1px solid rgba(28,32,25,0.15);
  color: var(--charcoal);
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--forest);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }