/* ============================================================
   OKOBI.CSS
   ============================================================ */

/* ── WHAT IS OKOBI ── */
.okobi-what {
  background: var(--color-cobalt-dark);
  position: relative; overflow: hidden;
}
.okobi-what::before {
  content: '';
  position: absolute; top: -20%; right: -10%;
  width: 650px; height: 650px;
  background: radial-gradient(circle, rgba(0,71,171,0.4) 0%, transparent 70%);
  pointer-events: none;
}
.okobi-what__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  align-items: center;
  position: relative; z-index: 2;
}
.okobi-what__grid p {
  color: rgba(255,255,255,0.72);
  line-height: 1.9;
  margin-bottom: var(--space-5);
  font-size: var(--text-base);
}
.okobi-what__visual img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

/* ── STATS ── */
.okobi-stats-section { background: var(--color-off-white); }
.okobi-stats-section__sub {
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}
.okobi-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-12);
}
.okobi-stat-box {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  transition: transform var(--transition-base) var(--ease-out), box-shadow var(--transition-base);
}
.okobi-stat-box:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.okobi-stat-box__icon { font-size: 2.2rem; margin-bottom: var(--space-4); }
.okobi-stat-box__num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-cobalt-dark);
  line-height: 1;
}
.okobi-stat-box__lbl { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); line-height: 1.4; }
.okobi-stat-box__date { font-size: var(--text-xs); color: var(--color-primary); font-weight: 600; margin-top: var(--space-2); }

/* ── WHY ── */
.okobi-why { background: var(--color-white); }
.okobi-why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  align-items: center;
}
.okobi-why__grid p { color: var(--color-text-muted); line-height: 1.9; margin-bottom: var(--space-5); }
.okobi-why__callout {
  background: var(--color-cobalt-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-10);
  text-align: center;
  color: rgba(255,255,255,0.75);
}
.okobi-why__callout-num {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 900;
  color: var(--color-gold-light);
  line-height: 1;
  margin-bottom: var(--space-4);
}
.okobi-why__callout p { color: rgba(255,255,255,0.72); font-size: var(--text-md); line-height: 1.75; margin-bottom: var(--space-6); }
.okobi-why__callout .arrow-link { color: var(--color-gold-light); justify-content: center; }

/* ── TWO MODELS ── */
.okobi-models { background: var(--color-off-white); }
.okobi-models__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.okobi-model-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-base) var(--ease-out), box-shadow var(--transition-base);
}
.okobi-model-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.okobi-model-card__num {
  position: absolute;
  top: var(--space-5); right: var(--space-6);
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  color: var(--color-primary-pale);
  line-height: 1;
}
.okobi-model-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-cobalt-dark);
  margin-bottom: var(--space-5);
}
.okobi-model-card__desc { color: var(--color-text-muted); line-height: 1.85; margin-bottom: var(--space-6); }
.okobi-model-card__examples {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-off-white);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary);
}
.okobi-model-card__examples strong { color: var(--color-primary); }

/* ── CRITERIA ── */
.okobi-criteria {
  background: var(--color-cobalt-dark);
  position: relative; overflow: hidden;
}
.okobi-criteria::before {
  content: '';
  position: absolute; bottom: -30%; left: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(200,151,42,0.1) 0%, transparent 70%);
}
.okobi-criteria__intro {
  color: rgba(255,255,255,0.65);
  margin-top: var(--space-4);
  font-size: var(--text-md);
}
.okobi-criteria__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-12);
  position: relative; z-index: 2;
}
.okobi-criterion {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  transition: background var(--transition-fast);
}
.okobi-criterion:hover { background: rgba(255,255,255,0.1); }
.okobi-criterion__num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-gold);
  display: block;
  margin-bottom: var(--space-3);
}
.okobi-criterion h3 {
  font-size: var(--text-md);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}
.okobi-criterion p { font-size: var(--text-sm); color: rgba(255,255,255,0.55); line-height: 1.65; }

/* ── HOW IT WORKS ── */
.okobi-how { background: var(--color-white); }
.okobi-how__steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: var(--space-12);
}
.okobi-step {
  flex: 1;
  text-align: center;
  padding: var(--space-8) var(--space-4);
}
.okobi-step__num {
  width: 44px; height: 44px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  margin: 0 auto var(--space-4);
}
.okobi-step__icon { font-size: 2rem; margin-bottom: var(--space-4); }
.okobi-step__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-cobalt-dark);
  margin-bottom: var(--space-3);
}
.okobi-step__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.75; }
.okobi-step__connector {
  flex-shrink: 0;
  width: 40px;
  height: 2px;
  background: var(--color-border);
  margin-top: 80px;
  position: relative;
}
.okobi-step__connector::after {
  content: '→';
  position: absolute;
  right: -8px; top: -10px;
  color: var(--color-border);
  font-size: 1rem;
}

/* ── THREE ACTORS ── */
.okobi-actors { background: var(--color-off-white); }
.okobi-actors__intro {
  color: var(--color-text-muted);
  max-width: 580px;
  margin: var(--space-4) auto 0;
  text-align: center;
  line-height: 1.75;
}
.okobi-actors__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-12);
}
.actor-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  transition: transform var(--transition-base) var(--ease-out), box-shadow var(--transition-base);
}
.actor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.actor-card--center {
  border-color: var(--color-primary);
  border-width: 2px;
  transform: translateY(-8px);
}
.actor-card--center:hover { transform: translateY(-12px); }
.actor-card__icon { font-size: 2.5rem; margin-bottom: var(--space-4); }
.actor-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-cobalt-dark);
  margin-bottom: var(--space-4);
}
.actor-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.78; }
.actor-card__desc strong { color: var(--color-cobalt-dark); }

/* ── INTERNATIONAL IMPACT ── */
.okobi-impact {
  background: var(--color-cobalt-dark);
  position: relative; overflow: hidden;
}
.okobi-impact::before {
  content: '';
  position: absolute; top: -30%; right: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,71,171,0.35) 0%, transparent 70%);
}
.okobi-impact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  align-items: center;
  position: relative; z-index: 2;
}
.okobi-impact__grid p { color: rgba(255,255,255,0.72); line-height: 1.9; margin-bottom: var(--space-5); }
.okobi-impact__visual img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: center; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }

/* ── SUCCESS STORY ── */
.okobi-story { background: var(--color-white); }
.okobi-story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  align-items: center;
}
.okobi-story__image img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.okobi-story__intro { color: var(--color-text-muted); line-height: 1.9; margin-bottom: var(--space-5); }
.okobi-story__grid > div > p { color: var(--color-text-muted); line-height: 1.9; margin-bottom: var(--space-5); }
.okobi-story__quote {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--space-6);
  margin-bottom: var(--space-5);
}
.okobi-story__quote p {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-cobalt-dark);
  line-height: 1.65;
}
.okobi-story__attr { margin-top: var(--space-6); }
.okobi-story__attr strong { display: block; font-size: var(--text-md); color: var(--color-cobalt-dark); margin-bottom: var(--space-1); }
.okobi-story__attr span { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── PROVERB ── */
.okobi-proverb {
  background: var(--color-cobalt-deeper);
  background-image: linear-gradient(135deg, var(--color-cobalt-deeper) 0%, #001a3a 100%);
  position: relative; overflow: hidden;
}
.okobi-proverb::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.okobi-proverb__inner {
  position: relative; z-index: 2;
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
.okobi-proverb__mark {
  font-family: var(--font-display);
  font-size: 8rem;
  color: var(--color-gold);
  opacity: 0.3;
  line-height: 0.5;
  margin-bottom: var(--space-4);
}
.okobi-proverb__text {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-style: italic;
  color: var(--color-white);
  line-height: 1.4;
  margin-bottom: var(--space-6);
}
.okobi-proverb__cite {
  font-size: var(--text-sm);
  color: var(--color-gold-light);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ── STUDENTS CLUB TEASER ── */
.students-club-teaser { background: var(--color-off-white); }
.students-club-teaser__card {
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  overflow: hidden;
  position: relative;
}
.students-club-teaser__card::before {
  content: '';
  position: absolute; top: -40%; right: -5%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
}
.students-club-teaser__text { position: relative; z-index: 2; }
.students-club-teaser__text .label { color: rgba(255,255,255,0.65); }
.students-club-teaser__text .label::before { background: rgba(255,255,255,0.4); }
.students-club-teaser__text h2 { font-size: var(--text-2xl); color: var(--color-white); margin-bottom: var(--space-4); }
.students-club-teaser__text p { color: rgba(255,255,255,0.8); line-height: 1.8; max-width: 520px; }
.students-club-teaser__icon { font-size: 6rem; opacity: 0.3; flex-shrink: 0; position: relative; z-index: 2; }

/* ── GRANT ── */
.okobi-grant {
  background: linear-gradient(138deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  position: relative; overflow: hidden;
}
.okobi-grant::before {
  content: '';
  position: absolute; top: -50%; right: -8%;
  width: 550px; height: 550px;
  background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%);
}
.okobi-grant__inner {
  position: relative; z-index: 2;
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
}
.okobi-grant__inner p { color: rgba(255,255,255,0.8); line-height: 1.85; margin-block: var(--space-4) var(--space-6); }
.okobi-grant__closed {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
}
.okobi-grant__closed strong { color: rgba(255,255,255,0.95); }

/* ── FINAL CTA ── */
.okobi-final-cta { background: var(--color-off-white); }
.okobi-final-cta__body {
  color: var(--color-text-muted);
  max-width: 480px;
  margin: var(--space-4) auto var(--space-8);
  line-height: 1.85;
}
.okobi-final-cta__actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .okobi-what__grid, .okobi-why__grid, .okobi-impact__grid, .okobi-story__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .okobi-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .okobi-criteria__grid { grid-template-columns: repeat(2, 1fr); }
  .okobi-actors__grid { grid-template-columns: 1fr; }
  .actor-card--center { transform: none; }
  .actor-card--center:hover { transform: translateY(-4px); }
  .okobi-how__steps { flex-direction: column; align-items: center; }
  .okobi-step__connector { width: 2px; height: 30px; margin-top: 0; }
  .okobi-step__connector::after { content: '↓'; right: -10px; top: 6px; }
}
@media (max-width: 768px) {
  .okobi-stats-grid { grid-template-columns: 1fr 1fr; }
  .okobi-models__grid { grid-template-columns: 1fr; }
  .okobi-criteria__grid { grid-template-columns: 1fr; }
  .students-club-teaser__card { flex-direction: column; }
  .students-club-teaser__icon { display: none; }
}