/* sc-home-v1.css | Version v1 | 29 Oct 2026, 20:58 IST | Changes: the homepage's design styles, moved out of the home template
   (<style id="sc-home-react-styles">) into this file unchanged, so the page HTML is about 245 KB lighter and the CDN can cache
   this file. Edit the homepage styles here. The template adds ?ver=<file time>, so a changed file reaches visitors at once.
   The 8 rules that point at SVG gradients on the page (url(#...)) are also kept inline in the template (sc-home-svgrefs). */

/* ===== app/scholarscolab-design.css ===== */

/* ═══════════════════════════════════════════
   THEME TOKENS
═══════════════════════════════════════════ */
:root {
  --green:       #2AA737;
  --green-light: #45C652;
  --green-glow:  rgba(42,167,55,0.15);
  --green-btn:   #2AA737;
  --green-btn-h: #1f8a2b;
  --sc-accent:   #59DA65;
  --sc-lightbg:  #F4FFF5;
  --sc-border:   #D9F2DD;
  --tab-active-bg: #fff;
  --tab-active-text: #0d2b1a;
  --tab-inactive-text: #4a6456;
  --tab-border: #d0e4d8;
}
[data-theme="light"] {
  --bg:          #ffffff;
  --bg2:         #ffffff;
  --bg3:         rgba(255,255,255,0.55);
  --surface:     #ffffff;
  --surface2:    #f0f5f2;
  --border:      #d8e8de;
  --border2:     #c5dccb;
  --text:        #0d2b1a;
  --text2:       #2a4a38;
  --muted:       #5a7468;
  --muted2:      #8aa898;
  --nav-bg:      rgba(255,255,255,0.55);
  --nav-border:  rgba(26,122,74,0.12);
  --hero-overlay: linear-gradient(to bottom,rgba(255,255,255,0.30) 0%,rgba(255,255,255,0.18) 30%,rgba(255,255,255,0.45) 68%,rgba(255,255,255,1.00) 100%);
  --ticker-bg:   #ffffff;
  --ticker-border: #cce4d4;
  --shadow-card: 0 2px 20px rgba(26,122,74,0.08);
}
[data-theme="dark"] {
  --bg:          #080f0b;
  --bg2:         #0d1610;
  --bg3:         #111a14;
  --surface:     #111a14;
  --surface2:    #182318;
  --border:      rgba(255,255,255,0.07);
  --border2:     rgba(34,160,90,0.2);
  --text:        #e8f2eb;
  --text2:       #b8d4c0;
  --muted:       #6a9478;
  --muted2:      #4a6858;
  --nav-bg:      rgba(8,15,11,0.82);
  --nav-border:  rgba(34,160,90,0.12);
  --hero-overlay: linear-gradient(to bottom,rgba(8,15,11,0.55) 0%,rgba(8,15,11,0.38) 35%,rgba(8,15,11,0.70) 72%,rgba(8,15,11,1.00) 100%);
  --ticker-bg:   #0d1610;
  --ticker-border: rgba(34,160,90,0.15);
  --shadow-card: 0 2px 20px rgba(0,0,0,0.4);
  --tab-active-bg: #1a3024;
  --tab-active-text: #e8f2eb;
  --tab-inactive-text: #6a9478;
  --tab-border: rgba(34,160,90,0.2);
}

.sc-home-react, .sc-home-react *, .sc-home-react *::before, .sc-home-react *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
.sc-home-react {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
  transition: background 0.4s, color 0.4s;
}

/* ── THEME SWITCHER ── */
.sc-home-react .theme-switch {
  position: fixed; top: 14px; right: 180px; z-index: 200;
  display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 100px; padding: 3px; gap: 2px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  transition: background 0.3s, border-color 0.3s;
}
.theme-switch--nav {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  flex-shrink: 0;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.theme-btn {
  background: none; border: none; cursor: pointer;
  padding: 5px 14px; border-radius: 100px;
  font-size: 12px; font-weight: 600; font-family: 'DM Sans', sans-serif;
  color: var(--muted); transition: all 0.25s; white-space: nowrap; letter-spacing: 0.02em;
}
.theme-btn.active { background: var(--green); color: #fff; box-shadow: 0 2px 8px rgba(26,122,74,0.35); }

/* ── NAV ── */
.sc-home-react nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; height: 66px;
  background: var(--nav-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--nav-border);
  transition: background 0.35s, border-color 0.35s;
}
.sc-home-react nav.scrolled { background: var(--bg2); box-shadow: 0 1px 24px rgba(0,0,0,0.08); }
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--green) 0%, #28b864 100%);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; box-shadow: 0 3px 12px rgba(26,122,74,0.3);
}
.logo-text { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.1; }
.logo-text span { display: block; color: var(--green); font-weight: 800; letter-spacing: 0.06em; font-size: 14px; }
.nav-links { display: flex; gap: 6px; list-style: none; }
.nav-links a { color: var(--text2); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 8px; transition: background 0.2s, color 0.2s; }
.nav-links a:hover { background: var(--green-glow); color: var(--green); }
.btn-login {
  background: var(--green-btn); color: #fff; padding: 10px 24px; border-radius: 100px;
  font-size: 14px; font-weight: 600; text-decoration: none; font-family: 'DM Sans', sans-serif;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 3px 14px rgba(26,122,74,0.3);
}
.btn-login:hover { background: var(--green-btn-h); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,122,74,0.4); }

/* ── HERO ── */
.hero-section {
  position: relative; padding: 140px 40px 0 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: visible;
}
.video-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-overlay { position: absolute; inset: 0; z-index: 1; background: var(--hero-overlay); transition: background 0.4s; }
.video-vignette { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse at 50% 40%, transparent 25%, rgba(0,0,0,0.22) 100%); }
[data-theme="light"] .video-vignette { background: radial-gradient(ellipse at 50% 40%, transparent 25%, rgba(10,40,20,0.18) 100%); }
[data-theme="light"] .video-wrap video { filter: saturate(1.15) brightness(0.86) contrast(1.06); }
.hero-content { position: relative; z-index: 3; text-align: center; padding: 0 24px; max-width: 820px; width: 100%; }
.tab-toggle {
  display: inline-flex; align-items: center;
  background: var(--bg3); border: 1.5px solid var(--tab-border);
  border-radius: 100px; padding: 5px; margin-bottom: 40px;
  box-shadow: 0 2px 16px rgba(26,122,74,0.08), inset 0 1px 2px rgba(0,0,0,0.04);
  animation: fadeDown 0.6s 0.1s both; gap: 2px; transition: background 0.3s, border-color 0.3s;
}
[data-theme="light"] .tab-toggle {
  background: rgba(255,255,255,0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255,255,255,0.7);
  box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08);
}
.tab-btn {
  background: none; border: none; cursor: pointer; padding: 11px 28px; border-radius: 100px;
  font-size: 14px; font-weight: 600; font-family: 'DM Sans', sans-serif;
  color: var(--tab-inactive-text); transition: all 0.28s cubic-bezier(0.34,1.56,0.64,1);
  white-space: nowrap; position: relative; z-index: 1;
}
.tab-btn.active { background: var(--tab-active-bg); color: var(--tab-active-text); box-shadow: 0 2px 12px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.06); }
[data-theme="dark"] .tab-btn.active { background: var(--green); color: #fff; box-shadow: 0 3px 14px rgba(26,122,74,0.4); }
.hero-title {
  font-family: 'Playfair Display', Georgia, serif; font-size: clamp(42px, 6vw, 76px);
  font-weight: 800; line-height: 1.08; letter-spacing: -1.5px; color: var(--text);
  margin-bottom: 20px; animation: fadeDown 0.65s 0.22s both; transition: color 0.3s;
}
[data-theme="light"] .hero-title { color: #0a2416; text-shadow: 0 2px 24px rgba(255,255,255,0.55), 0 1px 4px rgba(255,255,255,0.4); }
.hero-title .italic-green { font-style: italic; color: var(--green-light); display: block; }
[data-theme="light"] .hero-title .italic-green { color: #1a8050; text-shadow: 0 2px 20px rgba(255,255,255,0.5); }
[data-theme="dark"] .hero-title { color: #e8f2eb; }
[data-theme="dark"] .hero-title .italic-green { color: #3ed97a; }
.hero-sub {
  font-size: 17px; line-height: 1.72; color: var(--muted); max-width: 560px;
  margin: 0 auto 36px; font-weight: 400; animation: fadeDown 0.65s 0.34s both; transition: color 0.3s;
}
[data-theme="light"] .hero-sub { color: #1a3a28; font-weight: 500; text-shadow: 0 1px 12px rgba(255,255,255,0.6); }
[data-theme="dark"] .hero-sub { color: rgba(200,220,210,0.7); }
.search-bar {
  display: flex; align-items: center; background: var(--bg2); border: 1.5px solid var(--border2);
  border-radius: 100px; padding: 6px 6px 6px 20px; max-width: 560px; margin: 0 auto;
  box-shadow: 0 8px 40px rgba(26,122,74,0.10), 0 2px 8px rgba(0,0,0,0.06);
  animation: fadeDown 0.65s 0.46s both; transition: border-color 0.25s, box-shadow 0.25s, background 0.3s;
}
[data-theme="light"] .search-bar {
  background: rgba(255,255,255,0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255,255,255,0.85);
  box-shadow: 0 10px 50px rgba(0,0,0,0.14), 0 2px 10px rgba(0,0,0,0.08);
}
.search-bar:focus-within { border-color: var(--green); box-shadow: 0 8px 40px rgba(26,122,74,0.18), 0 0 0 3px rgba(26,122,74,0.1); }
.search-bar svg { color: var(--muted2); flex-shrink: 0; }
.search-bar input { flex: 1; border: none; outline: none; background: transparent; font-size: 15px; font-family: 'DM Sans', sans-serif; color: var(--text); padding: 0 14px; font-weight: 400; }
.search-bar input::placeholder { color: var(--muted2); }
.btn-search {
  background: var(--green-btn); color: #fff; border: none; padding: 13px 32px;
  border-radius: 100px; font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: 'DM Sans', sans-serif; transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 3px 12px rgba(26,122,74,0.3);
}
.btn-search:hover { background: var(--green-btn-h); transform: scale(1.03); box-shadow: 0 6px 20px rgba(26,122,74,0.45); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.scholar-hint, .expert-hint {
  display: inline-flex; align-items: center; gap: 8px; background: var(--green-glow);
  border: 1px solid rgba(26,122,74,0.2); border-radius: 100px; padding: 6px 16px;
  font-size: 12px; font-weight: 600; color: var(--green-light); letter-spacing: 0.05em;
  text-transform: uppercase; margin-bottom: 18px;
}
.hero-stats { position: relative; bottom: auto; z-index: 6; display: flex; justify-content: center; gap: 56px; padding: 40px 0 0 0; animation: fadeDown 0.65s 0.58s both; }
.stat-item { text-align: center; }
.stat-num { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 800; color: var(--text); transition: color 0.3s; }
[data-theme="light"] .stat-num { color: #0a2416; text-shadow: 0 1px 10px rgba(255,255,255,0.6); }
[data-theme="dark"] .stat-num { color: #e8f2eb; }
.stat-num em { color: var(--green-light); font-style: normal; }
.stat-label { font-size: 11px; color: var(--muted); margin-top: 3px; font-weight: 500; letter-spacing: 0.04em; }
[data-theme="light"] .stat-label { color: rgba(20,50,30,0.8); text-shadow: 0 1px 8px rgba(255,255,255,0.6); }
.stat-div { width: 1px; height: 44px; background: var(--border); align-self: center; }
[data-theme="light"] .stat-div { background: rgba(0,0,0,0.18); }
[data-theme="light"] .scholar-hint, [data-theme="light"] .expert-hint {
  background: rgba(255,255,255,0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.7); color: #0d5530; box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

/* ── TICKER / TRUSTED BY ── */
.ticker-section {
  position: relative;
  z-index: 4;
  background: var(--ticker-bg);
  border-top: 1px solid var(--ticker-border);
  border-bottom: 1px solid var(--ticker-border);
  padding: 18px 0;
  overflow: hidden;
  transition: background 0.3s;
}
.trusted-by-section {
  background: #eef3f7;
  border-top: 0;
  border-bottom: 2px solid rgba(26, 90, 120, 0.22);
}
[data-theme="dark"] .trusted-by-section {
  background: #0d1610;
  border-bottom-color: rgba(34, 160, 90, 0.22);
}
.ticker-inner { display: flex; align-items: center; }
.ticker-label {
  display: flex;
  align-items: center;
  padding: 0 32px;
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 600;
  color: #1a5a78;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
[data-theme="dark"] .ticker-label { color: #7dd3b0; }
.trusted-by-section .ticker-label {
  border-right: 1px solid rgba(26, 90, 120, 0.14);
}
.live-dot { width: 6px; height: 6px; background: var(--green-light); border-radius: 50%; animation: pulse 2s infinite; }
.ticker-mask {
  flex: 1;
  overflow: hidden;
  mask: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
}
.ticker-track-ltr {
  animation: ticker-ltr 32s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 42px;
}
.ticker-logo-item img {
  display: block;
  height: 44px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: grayscale(0.05);
  opacity: 0.92;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.ticker-logo-item:hover img {
  opacity: 1;
  filter: none;
}
.tick { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px; border-radius: 100px; margin: 0 5px; background: var(--surface2); border: 1px solid var(--border); font-size: 13px; font-weight: 500; color: var(--text2); cursor: pointer; white-space: nowrap; transition: border-color 0.2s, background 0.2s; }
.tick:hover { border-color: var(--green); background: var(--green-glow); color: var(--green); }
.tick .pct { font-size: 11px; font-weight: 700; color: var(--green-light); }
.tick .pct.neg { color: #dc2626; }

/* ── GREEN SECTION BG ── */
[data-theme="dark"] .green-section {
  background: radial-gradient(ellipse at 10% 50%, rgba(22,100,56,0.45) 0%, transparent 55%), radial-gradient(ellipse at 90% 30%, rgba(15,80,40,0.35) 0%, transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(10,50,25,0.5) 0%, transparent 60%), linear-gradient(160deg, #0d2216 0%, #091a10 45%, #0f2318 100%);
}
[data-theme="light"] .green-section {
  background: #ffffff;
}

/* ── STATS BAND ── */
.stats-band { padding: 80px 40px 72px; position: relative; overflow: hidden; }
.stats-band::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(34,160,90,0.35), transparent); }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 1080px; margin: 0 auto; }
.sband-item { padding: 0 40px; border-right: 1px solid rgba(34,160,90,0.12); position: relative; }
.sband-item:first-child { padding-left: 0; }
.sband-item:last-child { border-right: none; }
.sband-num { font-family: 'Playfair Display', serif; font-size: clamp(44px, 5vw, 68px); font-weight: 800; letter-spacing: -2px; line-height: 1; margin-bottom: 14px; transition: color 0.3s; }
[data-theme="dark"] .sband-num { color: #e8f2eb; }
[data-theme="light"] .sband-num { color: #0d2b1a; }
.sband-desc { font-size: 14px; line-height: 1.65; font-weight: 400; max-width: 160px; transition: color 0.3s; }
[data-theme="dark"] .sband-desc { color: rgba(180,220,196,0.65); }
[data-theme="light"] .sband-desc { color: #4a7060; }

/* ── VALUE PROPS ── */
.value-section { padding: 52px 0 56px; position: relative; }
.value-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(34,160,90,0.28), transparent); }
.value-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.value-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 28px; margin-bottom: 32px; border-bottom: 1px solid; transition: border-color 0.3s; }
[data-theme="dark"]  .value-top { border-color: rgba(34,160,90,0.15); }
[data-theme="light"] .value-top { border-color: rgba(26,122,74,0.14); }
.value-headline { font-family: 'DM Sans', sans-serif; font-size: clamp(22px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.5px; line-height: 1.18; transition: color 0.3s; }
[data-theme="dark"]  .value-headline { color: #dff0e6; }
[data-theme="light"] .value-headline { color: #0d2b1a; }
.value-headline em { font-family: inherit; font-style: normal; font-weight: 800; color: var(--green-light); }
.value-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--green-btn); color: #fff; padding: 12px 28px; border-radius: 100px; font-size: 14px; font-weight: 700; text-decoration: none; font-family: 'DM Sans', sans-serif; white-space: nowrap; flex-shrink: 0; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; box-shadow: 0 4px 16px rgba(26,122,74,0.3); }
.value-cta-btn:hover { background: var(--green-btn-h); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,122,74,0.42); }
.value-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.value-col { padding: 0 32px 0 0; border-right: 1px solid; transition: border-color 0.3s; position: relative; }
[data-theme="dark"]  .value-col { border-color: rgba(34,160,90,0.12); }
[data-theme="light"] .value-col { border-color: rgba(26,122,74,0.1); }
.value-col:last-child { border-right: none; padding-right: 0; }
.value-col:not(:first-child) { padding-left: 32px; }
.value-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; border: 1.5px solid transparent; transition: background 0.3s, border-color 0.3s, transform 0.25s, box-shadow 0.25s; }
[data-theme="dark"] .value-icon { background: rgba(34,160,90,0.1); border-color: rgba(34,160,90,0.25); }
[data-theme="light"] .value-icon { background: rgba(26,122,74,0.07); border-color: rgba(26,122,74,0.22); }
.value-col:hover .value-icon { transform: translateY(-3px); }
[data-theme="dark"]  .value-col:hover .value-icon { background: rgba(34,160,90,0.17); border-color: rgba(34,160,90,0.45); }
[data-theme="light"] .value-col:hover .value-icon { background: rgba(26,122,74,0.12); border-color: rgba(26,122,74,0.38); }
.value-col-text { font-size: 14px; line-height: 1.65; font-weight: 400; max-width: 200px; transition: color 0.3s; }
[data-theme="dark"]  .value-col-text { color: rgba(170,210,185,0.7); }
[data-theme="light"] .value-col-text { color: #4a7060; }

/* ── SEC SHARED ── */
.sec-header { text-align: center; margin-bottom: 56px; padding: 0 40px; }
.sec-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; }
.sec-title { font-family: 'DM Sans', sans-serif; font-size: clamp(32px, 4vw, 52px); font-weight: 800; letter-spacing: -1px; line-height: 1.12; transition: color 0.3s; }
[data-theme="dark"] .sec-title { color: #dff0e6; }
[data-theme="light"] .sec-title { color: #0d2b1a; }
.sec-title em { font-family: inherit; font-style: normal; font-weight: 800; color: var(--green-light); }
.sec-sub { font-size: 16px; max-width: 480px; margin: 14px auto 0; line-height: 1.7; transition: color 0.3s; }
[data-theme="dark"] .sec-sub { color: rgba(160,200,175,0.65); }
[data-theme="light"] .sec-sub { color: #5a7468; }

/* ── WORKFLOW ── */
.workflow-section { padding: 0; position: relative; overflow: hidden; }
.workflow-inner { display: grid; grid-template-columns: 38fr 62fr; min-height: 680px; max-width: 100%; position: relative; }
.wf-content { padding: 80px 56px 80px 80px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
[data-theme="dark"] .wf-content { background: radial-gradient(ellipse at 0% 50%, rgba(22,100,56,0.3) 0%, transparent 65%), linear-gradient(160deg, #0d2216 0%, #091a10 100%); }
[data-theme="light"] .wf-content { background: #ffffff; }
.wf-title { font-family: 'DM Sans', sans-serif; font-size: clamp(30px, 3.2vw, 48px); font-weight: 800; line-height: 1.12; letter-spacing: -1px; margin: 16px 0 14px; transition: color 0.3s; }
[data-theme="dark"] .wf-title { color: #e0f0e6; }
[data-theme="light"] .wf-title { color: #0a2416; }
.wf-title em { font-family: inherit; font-style: normal; font-weight: 800; color: var(--green-light); }
.wf-sub { font-size: 15px; line-height: 1.72; margin-bottom: 36px; max-width: 340px; transition: color 0.3s; }
[data-theme="dark"] .wf-sub { color: rgba(160,200,175,0.65); }
[data-theme="light"] .wf-sub { color: #5a7468; }
.wf-steps { display: flex; flex-direction: column; gap: 0; }
.wf-step { border-radius: 14px; overflow: hidden; cursor: pointer; transition: background 0.3s; margin-bottom: 4px; }
[data-theme="dark"]  .wf-step:hover { background: rgba(34,160,90,0.06); }
[data-theme="light"] .wf-step:hover { background: rgba(26,122,74,0.04); }
[data-theme="dark"]  .wf-step.active { background: rgba(34,160,90,0.10); }
[data-theme="light"] .wf-step.active { background: rgba(26,122,74,0.07); }
.wf-step-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; user-select: none; }
.wf-step-num { font-family: 'Playfair Display', serif; font-size: 13px; font-weight: 800; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.3s, color 0.3s, border-color 0.3s; }
[data-theme="dark"] .wf-step-num { background: rgba(34,160,90,0.12); border: 1.5px solid rgba(34,160,90,0.25); color: #59DA65; }
[data-theme="light"] .wf-step-num { background: rgba(26,122,74,0.1); border: 1.5px solid rgba(26,122,74,0.22); color: #2AA737; }
.wf-step.active .wf-step-num { background: var(--green-light); border-color: var(--green-light); color: #fff; }
.wf-step-label { flex: 1; font-size: 15px; font-weight: 700; transition: color 0.3s; }
[data-theme="dark"]  .wf-step-label { color: rgba(200,225,210,0.75); }
[data-theme="light"] .wf-step-label { color: #2a4a38; }
[data-theme="dark"]  .wf-step.active .wf-step-label { color: #dff0e6; }
[data-theme="light"] .wf-step.active .wf-step-label { color: #0a2416; }
.wf-step-arrow { font-size: 18px; font-weight: 300; transition: transform 0.3s, color 0.3s; line-height: 1; }
[data-theme="dark"]  .wf-step-arrow { color: rgba(100,160,130,0.4); }
[data-theme="light"] .wf-step-arrow { color: rgba(26,122,74,0.35); }
.wf-step.active .wf-step-arrow { transform: rotate(90deg); color: var(--green-light); }
.wf-step-body { max-height: 0; overflow: hidden; padding: 0 16px 0 62px; transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1), padding 0.3s; }
.wf-step.active .wf-step-body { max-height: 160px; padding: 0 16px 16px 62px; }
.wf-step-body p { font-size: 13.5px; line-height: 1.7; margin-bottom: 10px; transition: color 0.3s; }
[data-theme="dark"] .wf-step-body p { color: rgba(150,190,168,0.65); }
[data-theme="light"] .wf-step-body p { color: #5a7468; }
.wf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-tags span { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 100px; transition: background 0.3s, color 0.3s; }
[data-theme="dark"] .wf-tags span { background: rgba(34,160,90,0.12); color: #59DA65; border: 1px solid rgba(34,160,90,0.2); }
[data-theme="light"] .wf-tags span { background: rgba(26,122,74,0.08); color: #2AA737; border: 1px solid rgba(26,122,74,0.18); }
.wf-video-wrap { position: relative; overflow: hidden; min-height: 680px; }
.wf-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
[data-theme="dark"] .wf-glow { background: radial-gradient(ellipse at 30% 20%, rgba(34,160,90,0.18) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(20,80,40,0.14) 0%, transparent 50%); }
[data-theme="light"] .wf-glow { background: radial-gradient(ellipse at 30% 20%, rgba(26,122,74,0.12) 0%, transparent 50%); }
.wf-video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.4s; }
[data-theme="light"] .wf-video { filter: saturate(1.12) brightness(0.82) contrast(1.05); }
[data-theme="dark"] .wf-video { filter: saturate(0.9) brightness(0.65) contrast(1.1); }
.wf-video-wrap::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 180px; z-index: 3; pointer-events: none; }
[data-theme="dark"] .wf-video-wrap::before { background: linear-gradient(to right, #091a10 0%, transparent 100%); }
[data-theme="light"] .wf-video-wrap::before { background: linear-gradient(to right, #e8f4ed 0%, transparent 100%); }
.wf-bottom-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 180px; z-index: 3; pointer-events: none; }
[data-theme="dark"] .wf-bottom-fade { background: linear-gradient(to top, #091a10 0%, transparent 100%); }
[data-theme="light"] .wf-bottom-fade { background: linear-gradient(to top, rgba(240,248,243,0.9) 0%, transparent 100%); }
.wf-grain { position: absolute; inset: 0; z-index: 2; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-size: 128px 128px; pointer-events: none; }
.wf-chip { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 100px; font-size: 12px; font-weight: 600; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); animation: chipFloat 4s ease-in-out infinite; transition: background 0.3s, border-color 0.3s; }
[data-theme="dark"] .wf-chip { background: rgba(8,20,12,0.75); border: 1px solid rgba(52,211,110,0.3); color: #c0ecd0; box-shadow: 0 8px 28px rgba(0,0,0,0.4), 0 0 0 1px rgba(52,211,110,0.08); }
[data-theme="light"] .wf-chip { background: rgba(255,255,255,0.82); border: 1px solid rgba(26,122,74,0.25); color: #0d2b1a; box-shadow: 0 8px 28px rgba(26,122,74,0.12), 0 2px 8px rgba(0,0,0,0.08); }
.wf-chip-tl { top: 28px; left: 28px; animation-delay: 0s; }
.wf-chip-tr { top: 28px; right: 28px; animation-delay: 1.2s; }
.wf-chip-br { bottom: 60px; right: 28px; animation-delay: 0.6s; }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: chipDotPulse 2s infinite; flex-shrink: 0; }
@keyframes chipDotPulse { 0%  { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.chip-live { color: #f87171; font-weight: 800; font-size: 10px; letter-spacing: 0.08em; animation: liveBlink 1.4s ease-in-out infinite; }
@keyframes liveBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.chip-stars { font-size: 11px; color: #f59e0b; letter-spacing: 1px; }
@keyframes chipFloat { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } }
.wf-progress-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 6; background: rgba(255,255,255,0.08); }
.wf-progress-fill { height: 100%; background: linear-gradient(to right, var(--green-light), #59DA65); transition: width 0.6s cubic-bezier(0.16,1,0.3,1); box-shadow: 0 0 8px rgba(52,211,110,0.6); width: 25%; }
.wf-video-label { position: absolute; bottom: 28px; left: 28px; display: flex; align-items: center; gap: 12px; z-index: 5; transition: opacity 0.3s; }
.wfvl-num { font-family: 'Playfair Display', serif; font-size: 13px; font-weight: 800; width: 36px; height: 36px; border-radius: 50%; background: var(--green-light); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(34,160,90,0.5); }
.wfvl-text { font-size: 14px; font-weight: 700; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.5); letter-spacing: -0.2px; }
@media (max-width: 900px) { .workflow-inner { grid-template-columns: 1fr; } .wf-video-wrap { min-height: 340px; } .wf-content { padding: 56px 24px; } .wf-video-wrap::before { display: none; } }

/* ════════════════════════════════════════════════
   AI DIRECTORS SLIDER SECTION  (Design 1 merged)
   — themed to match ScholarsColab green palette
════════════════════════════════════════════════ */
.ai-director-section {
  position: relative;
  padding: 80px 0 0;
  overflow: hidden;
}
.ai-director-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(34,160,90,0.28), transparent);
}

/* Dark-panel hero band */
.adir-hero {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 56px 72px 56px 72px;
  gap: 0;
  overflow: hidden;
  min-height: 320px;
  transition: background 0.4s;
}
[data-theme="dark"] .adir-hero {
  background: radial-gradient(ellipse at 0% 60%, rgba(26,122,74,0.35) 0%, transparent 55%),
              radial-gradient(ellipse at 85% 20%, rgba(15,80,40,0.25) 0%, transparent 50%),
              linear-gradient(135deg, #050e08 0%, #091508 50%, #060f08 100%);
}
[data-theme="light"] .adir-hero {
  background: radial-gradient(ellipse at 0% 60%, rgba(26,122,74,0.12) 0%, transparent 55%),
              radial-gradient(ellipse at 85% 20%, rgba(26,122,74,0.08) 0%, transparent 50%),
              linear-gradient(135deg, #0d2b1a 0%, #112e1c 50%, #0a2016 100%);
}

/* Noise overlay */
.adir-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.35; pointer-events: none; z-index: 0;
}

/* Glowing accent line top */
.adir-hero::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, transparent 0%, rgba(34,197,94,0.6) 30%, rgba(52,211,110,0.9) 50%, rgba(34,197,94,0.6) 70%, transparent 100%);
  box-shadow: 0 0 20px rgba(34,197,94,0.4);
  z-index: 1;
}

.adir-left {
  flex: 0 0 360px;
  z-index: 2;
  padding-right: 48px;
}

.adir-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #59DA65;
  margin-bottom: 14px;
}

.adir-left h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 16px;
}
.adir-left h2 em {
  font-family: inherit;
  font-style: normal;
  font-weight: 800;
  color: #59DA65;
}

.adir-left p {
  font-size: 14px;
  font-weight: 300;
  color: rgba(200,230,212,0.65);
  line-height: 1.72;
  margin-bottom: 32px;
  max-width: 280px;
  font-family: 'DM Sans', sans-serif;
}

.adir-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--green-light), #2dd97a);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 13px 28px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.01em;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(34,160,90,0.4);
}
.adir-cta-btn:hover {
  transform: scale(1.03) translateY(-2px);
  box-shadow: 0 8px 32px rgba(34,160,90,0.55);
}

/* SLIDER */
.adir-slider-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 300px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 88%, transparent 100%);
  z-index: 2;
}

.adir-slider-track {
  display: flex;
  gap: 14px;
  align-items: center;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  will-change: transform;
}

/* CARD SHELL */
.adir-profile-card {
  flex-shrink: 0;
  width: 168px;
  height: 244px;
  border-radius: 18px;
  overflow: visible;
  position: relative;
  cursor: pointer;
  transform-origin: center center;
}

.adir-profile-card.featured {
  width: 188px;
  height: 268px;
}

/* CARD INNER */
.adir-card-inner {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(34,160,90,0.2);
  background: #111;
  position: relative;
  transition:
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.adir-profile-card.featured .adir-card-inner {
  border-color: rgba(34,160,90,0.35);
}

.adir-profile-card.center-active .adir-card-inner {
  transform: scale(1.12) translateY(-8px);
  border-color: rgba(52,211,110,0.7);
  box-shadow: 0 30px 70px rgba(0,0,0,0.85), 0 0 30px rgba(34,160,90,0.2);
}

.adir-profile-card:hover .adir-card-inner {
  transform: scale(1.12) translateY(-8px) !important;
  border-color: rgba(52,211,110,0.7) !important;
  box-shadow: 0 30px 70px rgba(0,0,0,0.85), 0 0 30px rgba(34,160,90,0.2) !important;
}

.adir-card-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
  filter: saturate(0.85) brightness(0.9);
}

.adir-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2AA737 0%, #0d4a2c 100%);
  color: #ffffff;
  font-family: 'DM Sans', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.adir-profile-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.adir-slider-viewport--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.adir-slider-loading {
  color: rgba(255, 255, 255, 0.72);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.adir-profile-card.center-active .adir-card-inner img,
.adir-profile-card:hover .adir-card-inner img {
  transform: scale(1.08);
  filter: saturate(1) brightness(0.95);
}

.adir-card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 48px 14px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.22) 65%, transparent 100%);
  border-radius: 0 0 17px 17px;
}

.adir-card-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.adir-card-tag {
  font-size: 10.5px;
  color: #59DA65;
  margin-top: 3px;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-family: 'DM Sans', sans-serif;
}

/* Mentor info card — photo removed; show profile data. Same card shell/slider/hover. */
.adir-card-info {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 15px 14px 13px;
  background: linear-gradient(165deg, #143a24 0%, #0c2016 55%, #0a1a11 100%);
}
.adir-card-info .adir-card-name { font-size: 13px; }
.adir-card-affil {
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  margin-top: 3px;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-family: 'DM Sans', sans-serif;
}
.adir-card-info .adir-card-tag { margin-top: 7px; font-weight: 500; }
.adir-card-mentorship {
  font-size: 10px;
  color: rgba(255,255,255,0.8);
  margin-top: 9px;
  line-height: 1.35;
  font-family: 'DM Sans', sans-serif;
}
.adir-card-mentorship strong { color: #fff; font-weight: 600; }
.adir-card-avail {
  font-size: 9.5px;
  font-weight: 600;
  color: #59DA65;
  margin-top: 8px;
  letter-spacing: 0.01em;
  font-family: 'DM Sans', sans-serif;
}
.adir-card-topics {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 11px;
}
.adir-topic {
  font-size: 8.5px;
  color: rgba(255,255,255,0.85);
  background: rgba(52,211,110,0.13);
  border: 1px solid rgba(52,211,110,0.26);
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1.5;
  white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
}

/* Stats bar below slider */
.adir-stats-row {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 22px 72px 28px;
  background: inherit;
  position: relative;
  z-index: 2;
}
[data-theme="dark"] .adir-stats-row {
  background: linear-gradient(to bottom, rgba(5,14,8,0) 0%, rgba(5,14,8,0.6) 100%);
}
[data-theme="light"] .adir-stats-row {
  background: linear-gradient(to bottom, rgba(10,32,20,0) 0%, rgba(10,32,20,0.4) 100%);
}

.adir-stat {
  display: flex;
  align-items: center;
  gap: 10px;
}
.adir-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 800;
  color: #59DA65;
}
.adir-stat-label {
  font-size: 12px;
  color: rgba(180,220,196,0.55);
  font-family: 'DM Sans', sans-serif;
}
.adir-stat-divider {
  width: 1px; height: 28px;
  background: rgba(34,160,90,0.2);
}

/* Bottom arc transition */
.adir-arc {
  position: relative;
  z-index: 3;
  line-height: 0;
  margin-top: -1px;
  pointer-events: none;
}
.adir-arc svg {
  width: 100%;
  display: block;
}
.adir-arc-fill { transition: fill 0.4s; }
[data-theme="light"] .adir-arc-fill { fill: #e8f4ed; }
[data-theme="dark"]  .adir-arc-fill { fill: #091a10; }
.adir-arc-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  animation: arcPulse 3.5s ease-in-out infinite;
}
[data-theme="dark"] .adir-arc-line { stroke: rgba(52,211,110,0.6); filter: drop-shadow(0 0 8px rgba(52,211,110,0.5)); }
[data-theme="light"] .adir-arc-line { stroke: rgba(26,122,74,0.5); filter: drop-shadow(0 0 6px rgba(26,122,74,0.4)); }

/* ── SIMS ── */
.sims-section { padding: 0 0 72px; }
.sims-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.sim-card { border-radius: 16px; overflow: hidden; cursor: pointer; transition: transform 0.28s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.28s; }
[data-theme="dark"] .sim-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 2px 16px rgba(0,0,0,0.35); }
[data-theme="light"] .sim-card { background: #fff; border: 1px solid rgba(26,122,74,0.1); box-shadow: 0 2px 16px rgba(26,122,74,0.07); }
[data-theme="dark"]  .sim-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
[data-theme="light"] .sim-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(26,122,74,0.14); }
.sim-thumb { height: 160px; background: linear-gradient(135deg, var(--tc1), var(--tc2), var(--tc3)); position: relative; overflow: hidden; }
.sim-thumb-art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sim-circuit { position: absolute; inset: 0; }
.sc-dot { position: absolute; width: 8px; height: 8px; background: rgba(52,211,110,0.7); border-radius: 50%; box-shadow: 0 0 10px rgba(52,211,110,0.6); animation: dotPulse 2.5s infinite; }
@keyframes dotPulse { 0%,100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } }
.sc-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.sim-thumb-label { position: absolute; bottom: 12px; left: 14px; font-size: 11px; font-weight: 800; color: rgba(52,211,110,0.9); letter-spacing: 0.12em; text-transform: uppercase; }
.sim-badge { position: absolute; top: 10px; left: 10px; background: rgba(34,160,90,0.85); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px; backdrop-filter: blur(6px); }
.sim-badge-blue { background: rgba(18,137,122,0.88); }
.sim-badge-orange { background: rgba(34,160,90,0.9); }
.sim-badge-purple { background: rgba(20,100,64,0.9); }
.sim-save { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background: rgba(0,0,0,0.3); backdrop-filter: blur(8px); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; color: rgba(255,255,255,0.6); transition: color 0.2s, background 0.2s, transform 0.2s; }
.sim-save:hover, .sim-save.saved { color: #ff6b8a; background: rgba(255,50,80,0.2); transform: scale(1.15); }
.sim-body { padding: 16px; }
.sim-domain { font-size: 11px; font-weight: 700; color: var(--green-light); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.sim-title { font-size: 14px; font-weight: 600; line-height: 1.45; margin-bottom: 12px; transition: color 0.3s; }
[data-theme="dark"] .sim-title { color: #d8eee0; }
[data-theme="light"] .sim-title { color: #0d2b1a; }
.sim-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sim-author { display: flex; align-items: center; gap: 8px; font-size: 12px; transition: color 0.3s; }
[data-theme="dark"] .sim-author { color: rgba(160,200,175,0.7); }
[data-theme="light"] .sim-author { color: #5a7468; }
.sim-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #fff; flex-shrink: 0; }
.sim-rating { font-size: 12px; font-weight: 600; color: #f59e0b; }
.sim-rating span { color: var(--muted2); font-weight: 400; }
.sim-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(34,160,90,0.1); }
.sim-price { font-size: 12px; transition: color 0.3s; }
[data-theme="dark"] .sim-price { color: rgba(160,200,175,0.6); }
[data-theme="light"] .sim-price { color: #5a7468; }
.sim-price strong { color: var(--green-light); font-size: 15px; }
.sim-btn { background: transparent; border: 1px solid rgba(34,160,90,0.4); color: var(--green-light); padding: 6px 16px; border-radius: 100px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.15s; font-family: 'DM Sans', sans-serif; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.sim-btn:hover { background: rgba(34,160,90,0.1); border-color: var(--green-light); transform: scale(1.04); }

.sim-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sim-card--skeleton {
  pointer-events: none;
}

.sim-thumb--skeleton {
  background: linear-gradient(
    90deg,
    rgba(26, 122, 74, 0.08) 0%,
    rgba(26, 122, 74, 0.16) 50%,
    rgba(26, 122, 74, 0.08) 100%
  );
  background-size: 200% 100%;
  animation: simSkeletonPulse 1.4s ease-in-out infinite;
}

.sim-skeleton-line {
  height: 12px;
  border-radius: 999px;
  margin-bottom: 10px;
  background: linear-gradient(
    90deg,
    rgba(26, 122, 74, 0.08) 0%,
    rgba(26, 122, 74, 0.16) 50%,
    rgba(26, 122, 74, 0.08) 100%
  );
  background-size: 200% 100%;
  animation: simSkeletonPulse 1.4s ease-in-out infinite;
}

.sim-skeleton-line--short { width: 42%; }
.sim-skeleton-line--title { width: 92%; height: 16px; }
.sim-skeleton-line--meta { width: 72%; }
.sim-skeleton-line--footer { width: 56%; margin-bottom: 0; }

@keyframes simSkeletonPulse {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.btn-outline-green { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid rgba(34,160,90,0.4); color: var(--green-light); padding: 13px 32px; border-radius: 100px; font-size: 14px; font-weight: 600; text-decoration: none; font-family: 'DM Sans', sans-serif; transition: background 0.2s, border-color 0.2s, transform 0.15s; }
.btn-outline-green:hover { background: rgba(34,160,90,0.1); border-color: var(--green-light); transform: translateY(-2px); }

/* ── MENTORS ── */
.mentors-section { padding: 90px 0; }
.mentors-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.mentor-card { border-radius: 20px; padding: 32px 28px; position: relative; overflow: hidden; transition: transform 0.28s, box-shadow 0.28s; text-align: center; }
[data-theme="dark"] .mentor-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(34,160,90,0.15); box-shadow: 0 2px 24px rgba(0,0,0,0.3); }
[data-theme="light"] .mentor-card { background: #fff; border: 1px solid rgba(26,122,74,0.1); box-shadow: 0 2px 24px rgba(26,122,74,0.07); }
.mentor-card-featured { transform: scale(1.03); }
[data-theme="dark"] .mentor-card-featured { background: rgba(34,160,90,0.07); border-color: rgba(34,160,90,0.35); box-shadow: 0 4px 40px rgba(34,160,90,0.15); }
[data-theme="light"] .mentor-card-featured { background: linear-gradient(135deg, rgba(26,122,74,0.04), #fff); border-color: rgba(26,122,74,0.3); box-shadow: 0 4px 40px rgba(26,122,74,0.12); }
.mentor-card:hover { transform: translateY(-6px) scale(1.01); }
.mentor-card-featured:hover { transform: translateY(-6px) scale(1.04); }
[data-theme="dark"]  .mentor-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.45), 0 0 30px rgba(34,160,90,0.1); }
[data-theme="light"] .mentor-card:hover { box-shadow: 0 20px 50px rgba(26,122,74,0.14); }
.mentor-top-badge { position: absolute; top: 16px; left: 16px; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 100px; background: rgba(34,160,90,0.15); color: var(--green-light); border: 1px solid rgba(34,160,90,0.25); }
.mentor-top-badge-gold { background: rgba(245,158,11,0.15); color: #f59e0b; border-color: rgba(245,158,11,0.3); }
.mentor-avatar-ring { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, rgba(34,160,90,0.4), rgba(0,0,0,0)); padding: 3px; margin: 16px auto 16px; }
.mentor-avatar-ring-gold { background: linear-gradient(135deg, rgba(245,158,11,0.6), rgba(0,0,0,0)); }
.mentor-avatar { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #fff; position: relative; font-family: 'DM Sans', sans-serif; }
.mentor-online { position: absolute; bottom: 3px; right: 3px; width: 12px; height: 12px; background: #22c55e; border: 2px solid var(--bg); border-radius: 50%; animation: pulse 2s infinite; }
.mentor-name { font-size: 17px; font-weight: 700; margin-bottom: 4px; transition: color 0.3s; }
[data-theme="dark"] .mentor-name { color: #dff0e6; }
[data-theme="light"] .mentor-name { color: #0d2b1a; }
.mentor-title { font-size: 13px; margin-bottom: 4px; transition: color 0.3s; }
[data-theme="dark"] .mentor-title { color: var(--green-light); }
[data-theme="light"] .mentor-title { color: #2AA737; }
.mentor-org { font-size: 12px; margin-bottom: 16px; transition: color 0.3s; }
[data-theme="dark"] .mentor-org { color: rgba(140,180,156,0.6); }
[data-theme="light"] .mentor-org { color: #8aa898; }
.mentor-skills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 18px; }
.mentor-skills span { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 100px; transition: background 0.3s; }
[data-theme="dark"]  .mentor-skills span { background: rgba(34,160,90,0.1); color: #59DA65; border: 1px solid rgba(34,160,90,0.2); }
[data-theme="light"] .mentor-skills span { background: rgba(26,122,74,0.07); color: #2AA737; border: 1px solid rgba(26,122,74,0.15); }
.mentor-stats { display: flex; justify-content: center; gap: 24px; padding: 16px 0; margin-bottom: 16px; border-top: 1px solid rgba(34,160,90,0.1); border-bottom: 1px solid rgba(34,160,90,0.1); }
.mentor-stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mentor-stats strong { font-size: 16px; font-weight: 800; color: var(--green-light); }
.mentor-stats span { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.3s; }
[data-theme="dark"] .mentor-stats span { color: rgba(140,180,156,0.55); }
[data-theme="light"] .mentor-stats span { color: #8aa898; }
.mentor-quote { font-size: 13px; font-style: italic; line-height: 1.65; margin-bottom: 20px; transition: color 0.3s; }
[data-theme="dark"] .mentor-quote { color: rgba(160,200,175,0.6); }
[data-theme="light"] .mentor-quote { color: #5a7468; }
.mentor-btn { width: 100%; background: var(--green-btn); color: #fff; border: none; padding: 12px 0; border-radius: 100px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; box-shadow: 0 3px 12px rgba(26,122,74,0.3); }
.mentor-btn:hover { background: var(--green-btn-h); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,122,74,0.4); }

/* ── TESTIMONIALS ── */
.testi-section { padding: 90px 0; }
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.testi-card { border-radius: 20px; padding: 32px 28px; position: relative; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; }
[data-theme="dark"] .testi-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(34,160,90,0.14); box-shadow: 0 2px 20px rgba(0,0,0,0.3); }
[data-theme="light"] .testi-card { background: #fff; border: 1px solid rgba(26,122,74,0.1); box-shadow: 0 2px 20px rgba(26,122,74,0.07); }
.testi-card-featured { position: relative; }
[data-theme="dark"] .testi-card-featured { background: linear-gradient(145deg, rgba(34,160,90,0.08), rgba(10,40,20,0.6)); border-color: rgba(34,160,90,0.3); box-shadow: 0 4px 40px rgba(34,160,90,0.14); }
[data-theme="light"] .testi-card-featured { background: linear-gradient(145deg, rgba(26,122,74,0.04), #fff); border-color: rgba(26,122,74,0.28); }
.testi-card:hover { transform: translateY(-4px); }
[data-theme="dark"]  .testi-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
[data-theme="light"] .testi-card:hover { box-shadow: 0 16px 40px rgba(26,122,74,0.12); }
.testi-platform-logo { font-size: 12px; font-weight: 800; color: var(--green-light); letter-spacing: 0.06em; margin-bottom: 10px; text-transform: uppercase; }
.testi-stars { font-size: 16px; color: #f59e0b; margin-bottom: 16px; letter-spacing: 2px; }
.testi-quote { font-size: 14.5px; line-height: 1.75; margin-bottom: 24px; font-style: italic; transition: color 0.3s; }
[data-theme="dark"] .testi-quote { color: rgba(200,225,210,0.8); }
[data-theme="light"] .testi-quote { color: #2a4a38; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; }
.testi-name { font-size: 14px; font-weight: 700; transition: color 0.3s; }
[data-theme="dark"] .testi-name { color: #dff0e6; }
[data-theme="light"] .testi-name { color: #0d2b1a; }
.testi-info { font-size: 12px; margin-top: 2px; transition: color 0.3s; }
[data-theme="dark"] .testi-info { color: rgba(140,180,156,0.6); }
[data-theme="light"] .testi-info { color: #8aa898; }
.testi-badge { margin-left: auto; flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--green-light); background: rgba(34,160,90,0.1); border: 1px solid rgba(34,160,90,0.2); padding: 3px 10px; border-radius: 100px; }

/* ── CTA ── */
.cta-section { padding: 100px 40px; position: relative; overflow: hidden; }
[data-theme="dark"] .cta-section { background: radial-gradient(ellipse at 30% 50%, rgba(26,122,74,0.2) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(20,90,50,0.15) 0%, transparent 50%), linear-gradient(160deg, #091808 0%, #0d2216 60%, #071008 100%); }
[data-theme="light"] .cta-section { background: #ffffff; }
.cta-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(34,160,90,0.3), transparent); }
.cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1080px; margin: 0 auto; align-items: center; }
.cta-title { font-family: 'DM Sans', sans-serif; font-size: clamp(32px, 4vw, 52px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.08; margin-bottom: 16px; transition: color 0.3s; }
[data-theme="dark"] .cta-title { color: #e8f2eb; }
[data-theme="light"] .cta-title { color: #0d2b1a; }
.cta-title em { font-family: inherit; font-style: normal; font-weight: 800; color: var(--green-light); }
.cta-sub { font-size: 16px; line-height: 1.7; margin-bottom: 32px; transition: color 0.3s; }
[data-theme="dark"] .cta-sub { color: rgba(160,200,175,0.65); }
[data-theme="light"] .cta-sub { color: #4a7060; }
.cta-email-row { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; }
.cta-email-fields { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cta-email-fields .cta-email-wrap { flex: none; }
.cta-email-row .cta-primary-btn { align-self: center; height: 54px; flex: 0 0 auto; white-space: nowrap; }
.cta-email-wrap { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-radius: 100px; transition: border-color 0.25s, box-shadow 0.25s, background 0.3s; }
[data-theme="dark"] .cta-email-wrap { background: rgba(255,255,255,0.06); border: 1.5px solid rgba(34,160,90,0.25); }
[data-theme="light"] .cta-email-wrap { background: rgba(255,255,255,0.8); border: 1.5px solid rgba(26,122,74,0.25); }
.cta-email-wrap:focus-within { border-color: var(--green-light); box-shadow: 0 0 0 3px rgba(34,160,90,0.12); }
.cta-email-wrap svg { flex-shrink: 0; opacity: 0.5; }
[data-theme="dark"] .cta-email-wrap svg { color: #59DA65; }
[data-theme="light"] .cta-email-wrap svg { color: #2AA737; }
.cta-email-wrap input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; font-family: 'DM Sans', sans-serif; padding: 14px 0; transition: color 0.3s; }
[data-theme="dark"] .cta-email-wrap input { color: #e0f0e6; }
[data-theme="dark"] .cta-email-wrap input::placeholder { color: rgba(140,180,156,0.5); }
[data-theme="light"] .cta-email-wrap input { color: #0d2b1a; }
[data-theme="light"] .cta-email-wrap input::placeholder { color: #8aa898; }
.cta-primary-btn { background: var(--green-btn); color: #fff; border: none; padding: 0 28px; border-radius: 100px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif; white-space: nowrap; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; box-shadow: 0 3px 14px rgba(26,122,74,0.35); }
.cta-primary-btn:hover { background: var(--green-btn-h); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,122,74,0.45); }
.cta-primary-btn span { margin-left: 4px; }
.cta-newsletter-msg { font-size: 13px; font-weight: 600; margin: 4px 0 2px; }
.cta-newsletter-msg.is-ok { color: #2AA737; }
.cta-newsletter-msg.is-err { color: #d64545; }
.cta-email-row .cta-primary-btn[disabled] { opacity: 0.6; cursor: default; pointer-events: none; }
.cta-footnote { font-size: 12px; transition: color 0.3s; }
[data-theme="dark"] .cta-footnote { color: rgba(130,170,148,0.5); }
[data-theme="light"] .cta-footnote { color: #8aa898; }
.cta-card-stack { position: relative; display: flex; flex-direction: column; gap: 14px; }
.cta-glow-orb { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 280px; height: 280px; background: radial-gradient(ellipse, rgba(34,160,90,0.15) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.cta-floating-card { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; position: relative; z-index: 1; animation: floatCard 3s ease-in-out infinite; transition: background 0.3s, border-color 0.3s; }
[data-theme="dark"] .cta-floating-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(34,160,90,0.18); backdrop-filter: blur(8px); }
[data-theme="light"] .cta-floating-card { background: rgba(255,255,255,0.85); border: 1px solid rgba(26,122,74,0.15); box-shadow: 0 4px 20px rgba(26,122,74,0.08); backdrop-filter: blur(8px); }
.cta-fc1 { animation-delay: 0s; }
.cta-fc2 { animation-delay: 0.8s; }
.cta-fc3 { animation-delay: 1.6s; }
@keyframes floatCard { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.cfc-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cfc-icon img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(26,122,74,0.18); }
.cfc-icon-thumb img { border-radius: 10px; object-fit: cover; }
.sim-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.sim-rating { display: inline-flex; align-items: center; gap: 5px; }
.sim-rating span { display: inline-flex; align-items: center; gap: 4px; }
.sim-save { display: inline-flex; align-items: center; justify-content: center; color: inherit; }
.cfc-text { flex: 1; font-size: 13px; line-height: 1.4; transition: color 0.3s; }
[data-theme="dark"] .cfc-text { color: rgba(200,225,210,0.8); }
[data-theme="light"] .cfc-text { color: #2a4a38; }
.cfc-text strong { transition: color 0.3s; }
[data-theme="dark"] .cfc-text strong { color: #dff0e6; }
[data-theme="light"] .cfc-text strong { color: #0d2b1a; }
.cfc-time { font-size: 11px; flex-shrink: 0; transition: color 0.3s; }
[data-theme="dark"] .cfc-time { color: rgba(120,170,140,0.5); }
[data-theme="light"] .cfc-time { color: #8aa898; }

/* ── FOOTER ── */
.site-footer {
  padding: 0;
  background: #ffffff;
  border-top: 1px solid rgba(26, 122, 74, 0.12);
}

.footer-top {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 40px 56px;
  background: #ffffff;
}

.foot-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 16px;
}

.foot-text {
  font-size: 16px;
  font-weight: 700;
  color: #0d2b1a;
}

.foot-text span {
  color: var(--green-light);
}

.foot-tagline {
  font-size: 13.5px;
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 260px;
  color: #5a7468;
}

.foot-socials {
  display: flex;
  gap: 10px;
}

.foot-social {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  background: #eef2f0;
  border: 1px solid #dde8e2;
  color: #6b7f74;
}

.foot-social:hover {
  background: #e2efe8;
  color: #2AA737;
  transform: translateY(-2px);
}

.footer-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.flink-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.flink-head {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: #2AA737;
}

.flink-col a {
  text-decoration: none;
  font-size: 13.5px;
  color: #5a7468;
  transition: color 0.2s;
}

.flink-col a:hover {
  color: #2AA737;
}

.footer-trusted {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(78, 218, 140, 0.14) 0%, transparent 55%),
    linear-gradient(180deg, #0f2f1d 0%, #0a2215 100%);
  border-radius: 28px 28px 0 0;
  margin-top: 8px;
  padding: 54px 24px 64px;
}

.footer-trusted-inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.footer-trusted-badge {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #59DA65;
  background: rgba(78, 218, 140, 0.12);
  border: 1px solid rgba(78, 218, 140, 0.28);
}

.footer-trusted-title {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.footer-trusted-title span {
  color: #59DA65;
}

.footer-trusted-subtitle {
  margin: 0 auto 34px;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

.gallery_dp {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gallery-dp-main {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.gallery-dp-main--center {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: calc((100% - 70px) * 5 / 6 + 56px);
  margin: 0 auto;
}

.img_dp {
  background: #ffffff;
  border-radius: 14px;
  min-height: 92px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(78, 218, 140, 0.12),
    0 10px 28px rgba(0, 0, 0, 0.18);
}

.img_dp img,
.img_dp .img-fluid {
  width: 100%;
  max-height: 54px;
  object-fit: contain;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 40px 28px;
  border-top: 1px solid rgba(26, 122, 74, 0.1);
  background: #ffffff;
}

.foot-copy {
  font-size: 12px;
  color: #8aa898;
}

.foot-legal {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.foot-legal-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.foot-legal-sep {
  color: #c5d5cc;
  font-size: 12px;
  user-select: none;
}

.foot-legal a {
  font-size: 12px;
  text-decoration: none;
  color: #8aa898;
  transition: color 0.2s;
}

.foot-legal a:hover {
  color: #2AA737;
}

/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ── ANIMATIONS ── */
@keyframes fadeDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ticker-ltr { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.75); } }
@keyframes arcPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ── ARC ── */
.hero-arc { position: relative; z-index: 5; pointer-events: none; line-height: 0; margin-top: 60px; overflow: visible; width: 100%; }
.hero-arc svg { width: 100%; display: block; overflow: visible; }
.arc-fill { transition: fill 0.4s; }
[data-theme="light"] .arc-fill { fill: #f7f9f7; }
[data-theme="dark"]  .arc-fill { fill: #080f0b; }
.arc-glow-line { fill: none; stroke-width: 2.5; stroke-linecap: round; }
[data-theme="dark"] .arc-glow-line { stroke: url(#arcGradDark); filter: url(#glowDark); }
[data-theme="light"] .arc-glow-line { stroke: url(#arcGradLight); filter: url(#glowLight); }
.arc-shimmer { fill: none; stroke-width: 60; stroke-linecap: round; opacity: 0.06; }
[data-theme="dark"]  .arc-shimmer { stroke: url(#shimGradDark); }
[data-theme="light"] .arc-shimmer { stroke: url(#shimGradLight); opacity: 0.08; }
.arc-glow-line { animation: arcPulse 3.5s ease-in-out infinite; }
.arc-fade-band { position: absolute; bottom: 0; left: 0; right: 0; height: 260px; pointer-events: none; z-index: 4; }
[data-theme="dark"] .arc-fade-band { background: linear-gradient(to bottom, transparent 0%, rgba(8,15,11,0.6) 55%, rgba(8,15,11,0.96) 100%); }
[data-theme="light"] .arc-fade-band { background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.65) 55%, rgba(255,255,255,0.98) 100%); }
.video-wrap { will-change: clip-path, transform; }


/* ===== app/nav-mega.css ===== */
/* ── Site header + Upwork-style dropdown (single panel) ── */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.site-header nav#navbar {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 66px;
  background: var(--nav-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--nav-border);
  transition: background 0.35s, border-color 0.35s;
}

.site-header nav#navbar.scrolled {
  background: var(--bg2);
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.08);
}

.site-header--open nav#navbar {
  border-bottom-color: transparent;
}

.site-header .nav-logo {
  flex-shrink: 0;
}

.site-header .nav-logo img.logo-img {
  height: 40px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

.site-header .nav-shell {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.site-header .nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header .nav-menu-item {
  list-style: none;
}

.site-header .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text2);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.site-header .nav-trigger:hover,
.site-header .nav-trigger--active {
  background: var(--green-glow);
  color: var(--green);
}

.site-header .nav-chevron {
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform 0.2s ease, opacity 0.2s;
}

.site-header .nav-chevron--open {
  transform: rotate(180deg);
  opacity: 1;
}

/* Override legacy .nav-links a rules for dropdown links */
.site-header .nav-dropdown-link {
  color: inherit;
  padding: 0;
  border-radius: 0;
  background: none;
}

.site-header .nav-dropdown-link:hover {
  background: none;
  color: inherit;
}

/* Dropdown panel — one at a time, full width below bar */
.site-header .nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1);
  animation: navDropIn 0.2s ease;
}

@keyframes navDropIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-header .nav-dropdown-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 40px 24px;
}

.site-header .nav-dropdown-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted2);
  margin: 0 0 14px;
}

.site-header .nav-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-header .nav-dropdown-list li {
  list-style: none;
}

.site-header .nav-dropdown-link {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s;
}

.site-header .nav-dropdown-link:hover {
  background: var(--green-glow);
}

.site-header .nav-dropdown-link-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 2px;
}

.site-header .nav-dropdown-link-desc {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.45;
}

.site-header .nav-dropdown-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.site-header .nav-dropdown-viewall {
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.site-header .nav-dropdown-viewall:hover {
  text-decoration: underline;
}

/* Footer social (unchanged) */
.foot-contact-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.foot-contact-block p,
.foot-contact-block a {
  font-size: 13.5px;
  line-height: 1.65;
  text-decoration: none;
  transition: color 0.2s;
}

[data-theme="dark"] .foot-contact-block p,
[data-theme="dark"] .foot-contact-block a {
  color: rgba(160, 200, 175, 0.65);
}

[data-theme="light"] .foot-contact-block p,
[data-theme="light"] .foot-contact-block a {
  color: #5a7468;
}

.foot-contact-block a:hover {
  color: var(--green-light);
}

.foot-social svg {
  display: block;
}

.foot-social--linkedin:hover {
  color: #0a66c2;
  border-color: rgba(10, 102, 194, 0.35);
  background: rgba(10, 102, 194, 0.1);
}

.foot-social--instagram:hover {
  color: #e4405f;
  border-color: rgba(228, 64, 95, 0.35);
  background: rgba(228, 64, 95, 0.1);
}

.foot-social--facebook:hover {
  color: #1877f2;
  border-color: rgba(24, 119, 242, 0.35);
  background: rgba(24, 119, 242, 0.1);
}

.foot-social--youtube:hover {
  color: #ff0000;
  border-color: rgba(255, 0, 0, 0.35);
  background: rgba(255, 0, 0, 0.08);
}

/* Nav actions: login + mobile toggle */
.site-header .nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.site-header .nav-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.site-header .nav-mobile-toggle:hover {
  background: var(--green-glow);
  border-color: var(--green);
  color: var(--green);
}

/* Mobile drawer */
.site-header .nav-mobile-panel {
  display: none;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  max-height: min(78vh, 640px);
  overflow-y: auto;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.site-header--mobile-open .nav-mobile-panel {
  display: block;
}

.site-header .nav-mobile-list {
  list-style: none;
  margin: 0;
  padding: 8px 16px 0;
}

.site-header .nav-mobile-item {
  border-bottom: 1px solid var(--border);
}

.site-header .nav-mobile-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px;
  border: none;
  background: none;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.site-header .nav-mobile-sublinks {
  list-style: none;
  margin: 0;
  padding: 0 0 12px 8px;
}

.site-header .nav-mobile-sublinks a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}

.site-header .nav-mobile-sublinks a:hover {
  background: var(--green-glow);
}

.site-header .nav-mobile-link-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

.site-header .nav-mobile-link-desc {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}

.site-header .nav-mobile-viewall {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--green) !important;
}

.site-header .nav-mobile-login {
  display: block;
  margin: 16px;
  text-align: center;
}

body.nav-mobile-open {
  overflow: hidden;
}

@media (max-width: 1024px) {
  .site-header nav#navbar {
    padding: 0 16px;
  }

  .site-header .nav-shell--desktop,
  .site-header .nav-dropdown-wrap--desktop {
    display: none !important;
  }

  .site-header .nav-login-desktop {
    display: none;
  }

  .site-header .nav-mobile-toggle {
    display: inline-flex;
  }

  .site-header .nav-logo img.logo-img {
    height: 34px;
    max-width: 160px;
  }
}

@media (max-width: 480px) {
  .site-header nav#navbar {
    padding: 0 12px;
    height: 58px;
  }

  .site-header .nav-mobile-toggle {
    width: 38px;
    height: 38px;
  }
}


/* ===== app/sc-hero-persona.css ===== */
/* ===== HERO SECTION CSS ===== */

.sc-hero {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  min-height: 650px;
  padding: 100px 20px 44px;
  font-family: 'DM Sans', sans-serif;
  color: #10251a;
}

.sc-hero:has(.sc-search-wrap.is-open) {
  overflow: visible;
}

.sc-hero-inner {
  /* Shared skeleton tokens — BOTH persona tabs render into one grid defined
     here once, so switching tabs never moves the toggle, headline or bottom row.
     Change spacing in one place instead of per-tab inline overrides. */
  --sc-col-diagram: 58%;                 /* fixed diagram column, same both tabs */
  --sc-col-gap: clamp(12px, 1.8vw, 20px);
  --sc-row1-h: 52px;                     /* eyebrow / toggle row — fixed height */
  --sc-row-gap-1: 22px;                  /* row 1 → main row */
  --sc-diagram-h: 470px;                 /* fixed diagram box, identical both tabs */
  --sc-row-gap-2: 30px;                  /* main row → bottom row */

  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--sc-col-diagram) 1fr;
  column-gap: var(--sc-col-gap);
  grid-template-areas:
    "label   toggle"
    "diagram content"
    "bottom  bottom";
  row-gap: 0;
  align-items: start;
}

.sc-hero-inner:has(.sc-search-wrap.is-open) {
  overflow: visible;
}

/* ROW 1 — eyebrow (left) + toggle (right); identical height for both tabs so
   the toggle buttons stay pinned when the persona changes. */
.sc-hero-eyebrow {
  grid-area: label;
  height: var(--sc-row1-h);
  display: flex;
  align-items: center;
}

.sc-hero-eyebrow-text {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #111b16;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sc-hero-eyebrow-accent {
  display: block;
  width: 42px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2AA737, #59DA65);
}

.sc-hero-toggle-slot {
  grid-area: toggle;
  height: var(--sc-row1-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Toggle owns its position through the slot; drop the legacy stacking margins. */
.sc-hero .sc-hero-toggle-slot .sc-persona-toggle {
  margin: 0 !important;
}

/* ROW 3 — bottom, full width, same top margin for both tabs even though one
   shows a stats grid and the other a single trust line. */
.sc-hero-bottom {
  grid-area: bottom;
  margin-top: -100px;
  
}

.sc-hero .sc-hero-bottom .sc-stats-bar {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  margin: 0 !important;
}

.sc-hero .sc-hero-bottom .sc-expert-trust {
  margin-top: 50px;
  padding-top: 0;
  /* indent to sit under the content column, matching the reference */
  margin-left: calc(var(--sc-col-diagram) + var(--sc-col-gap));
}

/* dotted background */
.sc-hero-bg-dots {
  position: absolute;
  width: 120px;
  height: 120px;
  opacity: 0.45;
  background-image: radial-gradient(#2AA737 1.2px, transparent 1.2px);
  background-size: 13px 13px;
  pointer-events: none;
}

.sc-dot-left {
  left: 80px;
  top: 250px;
}

.sc-dot-right {
  right: 130px;
  top: 245px;
}

/* LEFT VISUAL — one fixed-size box (row 2, left). Both diagram variants render
   into this same box (only one mounted at a time); the box never resizes, so the
   center hub lands in the same spot regardless of which tab is active. */
.sc-hero-visual {
  grid-area: diagram;
  position: relative;
  margin-top: var(--sc-row-gap-1);
  height: var(--sc-diagram-h);
  /* as a grid item, min-width/height default to auto (content size); a wide/tall
     diagram would then inflate the track. Pin both to 0 so the box tracks the
     grid column and the fixed height, and the diagram scales to fit inside it. */
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  margin-top: -50px;
  margin-left: -10px;
}

.sc-main-person {
  position: relative;
  z-index: 5;
  width: min(92%, 520px);
  max-height: 430px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 24px 28px rgba(13,43,26,0.10));
}

/* orbit circles */
.sc-orbit {
  position: absolute;
  border: 1.5px dashed rgba(26,122,74,0.25);
  border-radius: 50%;
  pointer-events: none;
}

.sc-orbit-1 {
  width: 455px;
  height: 455px;
  left: 70px;
  top: 5px;
}

.sc-orbit-2 {
  width: 340px;
  height: 340px;
  left: 130px;
  top: 60px;
  opacity: 0.55;
}

/* avatars */
.sc-avatar {
  position: absolute;
  z-index: 8;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  padding: 4px;
  background: #ffffff;
  border: 1px solid rgba(26,122,74,0.12);
  box-shadow: 0 10px 28px rgba(13,43,26,0.12);
}

.sc-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}

.sc-avatar-top-left {
  left: 115px;
  top: 22px;
}

.sc-avatar-top-right {
  right: 155px;
  top: 36px;
}

.sc-avatar-bottom-left {
  left: 98px;
  bottom: 88px;
}

/* floating cards */
.sc-float-card {
  position: absolute;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 158px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(13,43,26,0.08);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(13,43,26,0.10);
  color: #193324;
  font-size: 14px;
  font-weight: 700;
  backdrop-filter: blur(12px);
}

.sc-card-icon {
  color: #137742;
  font-size: 24px;
  line-height: 1;
}

.sc-card-left {
  left: 26px;
  top: 150px;
}

.sc-card-right-top {
  right: 66px;
  top: 122px;
}

.sc-card-right-bottom {
  right: 28px;
  top: 228px;
}

/* RIGHT CONTENT */
 
.sc-hero-content {
  grid-area: content;
  position: relative;
  z-index: 10;
  margin-top: var(--sc-row-gap-1);
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Fixed-height slot for the CTA (search bar vs. expert action buttons) so the
   bottom row sits at a consistent offset regardless of which one is shown. */
.sc-hero-cta {
  min-height: 132px;
}

.sc-hero-content:has(.sc-search-wrap.is-open) {
  z-index: 30;
}

 
.sc-persona-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(13,43,26,0.10);
  border-radius: 16px;
  padding: 4px;
  /* symmetric vertical margins */
  margin-top: 34px;
  margin-bottom: 34px;
  box-shadow: 0 8px 28px rgba(13,43,26,0.08);
}

.sc-toggle-btn {
  border: 0;
  outline: none;
  cursor: pointer;
  min-width: 190px;
  padding: 14px 20px;
  border-radius: 13px;
  background: transparent;
  color: #607369;
  font-size: 14px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  transition: 0.25s ease;
}

.sc-toggle-btn span {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}
.sc-toggle-btn span svg { width: 16px; height: 16px; }

.sc-toggle-btn.active {
  color: #ffffff;
  background: linear-gradient(180deg, #2AA737 0%, #1f8a2b 100%);
  box-shadow: 0 10px 22px rgba(26,122,74,0.25);
}

.sc-hero-content h1 {
  margin: 0;
  max-width: 590px;
  color: #111b16;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(42px, 4.6vw, 66px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -1.6px;
}

.sc-hero-content h1 em {
  display: block;
  color: #177940;
  font-family: inherit;
  font-style: normal;
  font-weight: 800;
}

.sc-hero-content p {
  margin: 22px 0 28px;
  max-width: 540px;
  color: #1d3328;
  font-size: 17px;
  line-height: 1.68;
  font-weight: 500;
}

/* search box */
.sc-search-wrap {
  position: relative;
  width: min(100%, 560px);
  z-index: 21;
}

.sc-search-wrap.is-open .sc-search-box {
  border-radius: 14px 14px 0 0;
  border-bottom-color: transparent;
  box-shadow: none;
}

.sc-search-box {
  display: flex;
  align-items: center;
  width: 150%;
  height: 66px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(13,43,26,0.09);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(13,43,26,0.11);
  padding: 8px 8px 8px 22px;
}

.sc-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  background: #ffffff;
  border: 1px solid rgba(13,43,26,0.09);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 18px 36px rgba(13,43,26,0.14);
  overflow: hidden;
  max-height: min(420px, 58vh);
  overflow-y: auto;
}

.sc-search-result {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 58px;
  padding: 10px 18px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.14s ease, border-color 0.14s ease;
}

/* Redirect action buttons (Mentor List / Simulation Code) */
.sc-search-actions-label {
  padding: 12px 18px 6px;
  color: #6d7b73;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sc-search-action {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 12px 18px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.sc-search-action + .sc-search-action {
  border-top: 1px solid rgba(13,43,26,0.08);
}

.sc-search-action:hover,
.sc-search-action:focus-visible {
  background: #f3f6f4;
  outline: none;
}

.sc-search-action--mentor:hover,
.sc-search-action--mentor:focus-visible {
  border-left-color: #2AA737;
}

.sc-search-action--code:hover,
.sc-search-action--code:focus-visible {
  border-left-color: #2563eb;
}

.sc-search-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  color: #ffffff;
}

.sc-search-action--mentor .sc-search-action-icon {
  background: linear-gradient(135deg, #2AA737 0%, #0d4a2c 100%);
}

.sc-search-action--code .sc-search-action-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.sc-search-action-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.sc-search-action-title {
  color: #13231a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.sc-search-action-sub {
  color: #6d7b73;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-search-action-arrow {
  flex-shrink: 0;
  color: #9aa8a0;
  transition: transform 0.14s ease, color 0.14s ease;
}

.sc-search-action:hover .sc-search-action-arrow {
  color: #4b5d53;
  transform: translateX(3px);
}

.sc-search-group + .sc-search-group {
  border-top: 1px solid rgba(13,43,26,0.08);
}

.sc-search-group-label {
  padding: 10px 18px 4px;
  color: #6d7b73;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sc-search-result-type {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sc-search-result-type--mentor {
  color: #2AA737;
  background: rgba(26,122,74,0.1);
}

.sc-search-result-type--code {
  color: #2563eb;
  background: rgba(59,130,246,0.1);
}

.sc-search-result-avatar--mentor {
  background: linear-gradient(135deg, #2AA737 0%, #0d4a2c 100%);
}

.sc-search-result-avatar--code {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.sc-search-result:hover,
.sc-search-result.is-active {
  background: #f3f6f4;
  border-left-color: #2AA737;
}

.sc-search-result--query .sc-search-result-name {
  color: #4b5d53;
  font-weight: 600;
}

.sc-search-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #5f6f66;
  flex-shrink: 0;
}

.sc-search-result-icon svg {
  width: 18px;
  height: 18px;
}

.sc-search-result-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #e8ece9;
}

.sc-search-result-avatar--placeholder {
  display: block;
  background: #d7ddd9;
}

.sc-search-result-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sc-search-result-name {
  color: #13231a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-search-result-sub {
  color: #6d7b73;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-search-status {
  padding: 12px 18px 14px;
  color: #6d7b73;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
}

.sc-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #174c32;
  margin-right: 12px;
}
.sc-search-icon svg { width: 22px; height: 22px; }

.sc-search-box input {
  flex: 1;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #13231a;
  font-size: 15px;
  font-family: 'DM Sans', sans-serif;
}

.sc-search-box input::placeholder {
  color: #9aa8a0;
}

.sc-search-box button {
  height: 50px;
  min-width: 104px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(180deg, #2AA737 0%, #1f8a2b 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(26,122,74,0.24);
}


/* expert action buttons - replaces search bar in Research Expert mode */
.sc-expert-actions {
  display: none;
  align-items: center;
  gap: 16px;
  width: min(100%, 560px);
}

.sc-expert-actions.is-visible {
  display: flex;
}

.sc-expert-action-btn {
  min-height: 64px;
  border-radius: 10px;
  padding: 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

.sc-expert-action-primary {
  min-width: 224px;
  background: linear-gradient(180deg, #2AA737 0%, #1f8a2b 100%);
  color: #ffffff;
  border: 2px solid #2AA737;
  box-shadow: 0 10px 22px rgba(26,122,74,0.24);
}

.sc-expert-action-outline {
  min-width: 284px;
  background: #ffffff;
  color: #1f8a2b;
  border: 2px solid #2AA737;
  box-shadow: 0 10px 22px rgba(26,122,74,0.08);
}

.sc-expert-action-btn:hover {
  transform: translateY(-2px);
}

.sc-expert-action-primary:hover {
  background: linear-gradient(180deg, #2AA737 0%, #0a5f32 100%);
  box-shadow: 0 14px 30px rgba(26,122,74,0.32);
}

.sc-expert-action-outline:hover {
  background: rgba(26,122,74,0.06);
  color: #0a5f32;
  border-color: #1f8a2b;
  box-shadow: 0 14px 30px rgba(26,122,74,0.14);
}

.sc-hero.is-expert-mode .sc-search-box {
  display: none;
}

.sc-hero.is-expert-mode .sc-expert-actions {
  display: flex;
}

.sc-hero.is-expert-mode .sc-expert-action-outline {
  background: rgba(255,255,255,0.96);
}

@media (max-width: 1024px) {
  .sc-expert-actions {
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .sc-expert-actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .sc-expert-action-btn,
  .sc-expert-action-primary,
  .sc-expert-action-outline {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    font-size: 16px;
    padding: 0 18px;
  }
}

/* stats bar */
.sc-stats-bar {
  position: absolute;
  z-index: 5;
  left: 40px;
  right: 40px;
  bottom: 0;
  min-height: 105px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(13,43,26,0.10);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(13,43,26,0.11);
  padding: 0 46px;
  backdrop-filter: blur(16px);
}

.sc-stat-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.sc-stat-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #147843;
  background: #eef8ef;
  border: 1.5px solid transparent;
}
.sc-stat-icon svg { width: 24px; height: 24px; }

.sc-stat-item h3 {
  margin: 0 0 4px;
  color: #0f7a43;
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
}

.sc-stat-item p {
  margin: 0;
  color: #1e3327;
  font-size: 13px;
  font-weight: 600;
}

.sc-stat-divider {
  width: 1px;
  height: 56px;
  background: rgba(13,43,26,0.12);
}



/* ── HERO PERSONA IMAGE SWITCH UPDATE ── */
.sc-hero.is-expert-mode {
  background: #ffffff;
  color: #10251a;
  min-height: 680px;
  overflow: hidden;
}

.sc-hero.is-expert-mode .sc-hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 80% 60% at 15% 100%, rgba(26,122,74,0.10), transparent 58%),
    radial-gradient(ellipse 70% 55% at 85% 100%, rgba(148,163,184,0.14), transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(232,244,237,0.35) 100%);
}

.sc-hero.is-expert-mode .sc-hero-inner {
  /* columns / alignment come from the shared skeleton */
  z-index: 2;
  margin-top: 65px;
}

@media (max-width: 1024px) {
  .sc-hero.is-expert-mode .sc-hero-inner {
    grid-template-columns: 1fr;
     margin-top: 65px;
  }

  .sc-hero.is-expert-mode .sc-hero-content {
    padding-bottom: 48px;
  }
}

.sc-hero.is-expert-mode .sc-hero-content {
  /* !important + align-self override the legacy blanket ".sc-hero-content"
     spacing-fix rule so the headline top-aligns identically to the scholar tab */
  padding: 0 0 0 12px !important;
  align-self: start;
}

.sc-hero.is-expert-mode .sc-hero-content h1 {
  max-width: 100%;
  font-size: clamp(34px, 3.2vw, 48px) !important;
  letter-spacing: -1.2px;
  line-height: 1.08;
}

.sc-hero.is-expert-mode .sc-hero-content h1 em {
  color: #2AA737;
  display: block;
  margin-top: 2px;
}

.sc-hero.is-expert-mode .sc-hero-content h1 em::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2AA737 0%, #59DA65 100%);
}

.sc-hero.is-expert-mode .sc-hero-content p {
  max-width: 100%;
  margin: 16px 0 22px;
  font-size: 15px;
  line-height: 1.62;
  color: #4b5d53;
}

.sc-hero.is-expert-mode .sc-persona-toggle {
  margin-bottom: 24px;
}

.sc-hero.is-expert-mode .sc-toggle-btn {
  min-width: 152px;
  padding: 12px 14px;
  font-size: 13px;
}

.sc-hero.is-expert-mode .sc-expert-actions {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  gap: 12px;
}

.sc-hero.is-expert-mode .sc-expert-action-btn {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 0 22px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  gap: 10px;
  justify-content: center;
}

.sc-hero.is-expert-mode .sc-expert-action-primary {
  box-shadow: 0 12px 28px rgba(22,135,72,0.22);
}

.sc-hero.is-expert-mode .sc-expert-action-outline {
  background: #ffffff;
  border-width: 2px;
}

.sc-expert-trust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 4px;
}

.sc-expert-trust-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #2AA737;
  background: radial-gradient(circle at 30% 30%, #f3faf6, #e8f4ed 70%);
  box-shadow:
    0 0 0 1px rgba(26,122,74,0.12),
    0 10px 24px rgba(26,122,74,0.10);
}

.sc-expert-trust p {
  margin: 0;
  color: #1d3328;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.sc-expert-trust p::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin-top: 8px;
  border-radius: 999px;
  background: #2AA737;
}

.sc-main-person.sc-expert-image {
  width: min(96%, 560px);
  height: 405px;
  object-fit: cover;
  object-position: right center;
  border-radius: 26px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.28);
  filter: saturate(1.02) contrast(1.04) brightness(0.92);
}
.sc-hero.is-expert-mode .sc-hero-visual::after {
  content: '';
  position: absolute;
  inset: 24px 24px 10px 24px;
  border-radius: 28px;
  background: linear-gradient(90deg, rgba(7,18,13,0.45), transparent 38%);
  pointer-events: none;
  z-index: 6;
}
@media (max-width: 1024px) {
  .sc-main-person.sc-expert-image { height: 360px; object-position: center; }
  .sc-hero.is-expert-mode .sc-hero-visual::after { inset: 30px 40px 10px; }
}
@media (max-width: 640px) {
  .sc-main-person.sc-expert-image { height: 280px; border-radius: 20px; }
  .sc-hero.is-expert-mode .sc-hero-visual::after { inset: 40px 20px 10px; }
}

/* responsive */
@media (max-width: 1024px) {
  .sc-hero-inner {
    /* collapse to a single column; the fixed boxes degrade to auto height */
    --sc-diagram-h: auto;
    grid-template-columns: 1fr;
    grid-template-areas:
      "toggle"
      "label"
      "diagram"
      "content"
      "bottom";
    column-gap: 0;
    row-gap: 20px;
  }

  .sc-hero-eyebrow,
  .sc-hero-toggle-slot {
    height: auto;
    justify-content: center;
  }

  .sc-hero-visual {
    margin-top: 0;
    min-height: 320px;
  }

  .sc-hero-content {
    margin-top: 0;
    text-align: center;
  }

  .sc-hero-cta {
    min-height: 0;
  }

  .sc-hero-bottom {
    margin-top: 8px;
  }

  .sc-hero .sc-hero-bottom .sc-expert-trust {
    margin-left: 0;
    justify-content: center;
  }

  .sc-hero-content h1,
  .sc-hero-content p,
  .sc-search-wrap {
    margin-left: auto;
    margin-right: auto;
  }

  .sc-stats-bar {
    grid-template-columns: repeat(2, 1fr);
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 28px;
    gap: 24px;
    padding: 28px;
  }

  .sc-stat-divider {
    display: none;
  }
}

@media (max-width: 640px) {
  .sc-hero {
    padding: 36px 14px;
  }

  .sc-hero-visual {
    min-height: 340px;
  }

  .sc-main-person {
    width: 92%;
  }

  .sc-orbit-1,
  .sc-orbit-2,
  .sc-avatar,
  .sc-float-card {
    transform: scale(0.78);
  }

  .sc-card-left {
    left: -18px;
  }

  .sc-card-right-top {
    right: -18px;
  }

  .sc-card-right-bottom {
    right: -30px;
  }

  .sc-persona-toggle {
    width: 100%;
  }

  .sc-toggle-btn {
    min-width: auto;
    flex: 1;
    padding: 12px 10px;
    font-size: 12px;
  }

  .sc-hero-content h1 {
    font-size: 40px;
  }

  .sc-search-box {
    height: auto;
    flex-wrap: wrap;
    border-radius: 18px;
    padding: 14px;
    gap: 12px;
  }

  .sc-search-box input {
    min-width: 0;
    width: calc(100% - 46px);
    height: 42px;
  }

  .sc-search-box button {
    width: 100%;
  }

  .sc-stats-bar {
    grid-template-columns: 1fr;
  }
}


/* Added for integration inside the full ScholarsColab page */
.sc-hero {
  margin-top: 0;
}
.sc-main-person {
  border-radius: 28px;
}
@media (min-width: 1025px) {
  .sc-hero-content { padding-top: 10px; }
}



/* ======================================================================
   ADDED: Dynamic Scholar / Research Expert sections below the hero
   These sections are controlled by the hero persona buttons.
====================================================================== */
.persona-dynamic-wrap {
  background: #fff;
  position: relative;
  z-index: 4;
}
.persona-panel { display: block; }
.persona-panel.is-hidden { display: none !important; }

.persona-process {
  position: relative;
  padding: 78px 24px 86px;
  overflow: hidden;
}
.persona-container {
  max-width: 1120px;
  margin: 0 auto;
}
.persona-section-head {
  text-align: center;
  margin-bottom: 46px;
}
.persona-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 5px 17px;
  border-radius: 999px;
  border: 1px solid rgba(26,122,74,.36);
  background: rgba(26,122,74,.08);
  color: #2AA737;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.persona-section-head h2 {
  margin: 14px 0 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -1px;
}
.persona-section-head p {
  max-width: 475px;
  margin: 0 auto;
  color: #5a7468;
  font-size: 14px;
  line-height: 1.6;
}

/* Scholar dark workflow */
.scholar-process {
  background: #061a10;
  color: #e8f4ed;
}
.scholar-process::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(26,122,74,.10), transparent 28%),
    radial-gradient(circle at 78% 58%, rgba(26,122,74,.08), transparent 32%);
  pointer-events: none;
}
.scholar-process .persona-section-head { position: relative; z-index: 3; }
.scholar-process .persona-section-head h2 { color: #e8f4ed; }
.scholar-flow-board {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
}
.scholar-flow-stage {
  position: relative;
  min-height: 640px;
}
.scholar-flow-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.scholar-flow-path-bg {
  fill: none;
  stroke: rgba(26,122,74,0.12);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.scholar-flow-path {
  fill: none;
  stroke: url(#scholarFlowStroke);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  opacity: 0.9;
}
.scholar-flow-path.is-running {
  animation: scholarFlowMarch 1.8s linear infinite;
}
.scholar-flow-particle {
  fill: #59DA65;
  opacity: 0.95;
}
.scholar-flow-particle--trail {
  fill: rgba(78,218,140,0.45);
  opacity: 0.65;
}
.scholar-flow-node {
  fill: #ffffff;
  stroke: rgba(26,122,74,0.75);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(26,122,74,0.25));
  animation: scholarNodePulse 2.4s ease-in-out infinite;
}
@keyframes scholarFlowMarch {
  to { stroke-dashoffset: -36; }
}
@keyframes scholarNodePulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.scholar-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "step1 step2 step3"
    ".     step4 ."
    "step6 .     step5";
  gap: 40px 28px;
  position: relative;
  z-index: 2;
}
.scholar-card {
  position: relative;
  min-height: 168px;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 16px;
  background: #0d2216;
  padding: 22px 22px 20px;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
.scholar-card:hover,
.scholar-card.is-flow-active {
  transform: translateY(-4px);
  border-color: rgba(26,122,74,.55);
  box-shadow:
    0 18px 48px rgba(0,0,0,.22),
    0 0 0 1px rgba(26,122,74,.14),
    0 0 28px rgba(26,122,74,.12);
}
.scholar-card.is-flow-active::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(78,218,140,0.55), rgba(26,122,74,0.15));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: scholarCardGlow 2.6s ease-in-out infinite;
}
@keyframes scholarCardGlow {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.scholar-card.secure-card {
  background: linear-gradient(135deg, #062d20 0%, #082317 100%);
  border: 1.5px solid #2AA737;
  box-shadow: 0 0 42px rgba(26,122,74,.12);
}
.scholar-card.secure-card.is-flow-active {
  box-shadow:
    0 22px 58px rgba(26,122,74,.22),
    0 0 36px rgba(26,122,74,.18);
}
.scholar-card .step-no {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(26,122,74,0.5);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.scholar-card .step-no::after {
  content: '';
  height: 1px;
  flex: 1;
  background: rgba(255,255,255,.06);
}
.scholar-card.secure-card .step-no { color: #2AA737; }
.scholar-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #2AA737;
  background: rgba(26,122,74,.10);
  border: 1px solid rgba(26,122,74,.20);
  margin-bottom: 18px;
}
.scholar-icon svg { width: 20px; height: 20px; }
.scholar-card h3 {
  color: #e8f4ed;
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 8px;
}
.scholar-card p {
  color: #6a8878;
  font-size: 12.5px;
  line-height: 1.65;
  margin: 0;
}
.secure-card p { color: #59DA65; }
.secure-badge {
  position: absolute;
  top: -12px;
  right: 16px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #2AA737;
  color: #042016;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.scholar-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 38px auto 0;
  padding: 13px 22px;
  border: 1px solid rgba(26,122,74,.24);
  border-radius: 12px;
  background: rgba(26,122,74,.08);
  color: #6a8878;
  font-size: 13px;
  font-weight: 600;
}
.scholar-note strong { color: #c5dccb; }
.note-center { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .scholar-flow-path.is-running,
  .scholar-flow-node,
  .scholar-card.is-flow-active::before,
  .mentor-flow-path.is-running,
  .mentor-flow-node,
  .mentor-node.is-flow-active::before,
  .mentor-hub.is-hub-active .mentor-hub-ring,
  .mentor-hub-ring::before {
    animation: none !important;
  }
}

/* Choice card sections */
.persona-choices {
  padding: 80px 24px 88px;
  background: #fff;
  border-bottom: 1px solid rgba(26,122,74,.14);
}
.choice-head {
  text-align: center;
  margin-bottom: 58px;
}
.choice-head h2 {
  margin: 0 0 15px;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.06;
  color: #061b12;
  font-weight: 800;
  letter-spacing: -1.8px;
}
.choice-head p {
  max-width: 560px;
  margin: 0 auto;
  color: #5a7468;
  font-size: 15px;
  line-height: 1.65;
}
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: 1080px;
  margin: 0 auto;
}
.choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  padding: 48px 50px 44px;
  border-radius: 22px;
  border: 1px solid rgba(26,122,74,.13);
  background: #fff;
  box-shadow: 0 18px 50px rgba(13,43,26,.05);
}
.choice-card.featured {
  background: #0f172a;
   
   color: #fff !important;
  border: 1.5px solid #2AA737;
  box-shadow: 0 22px 60px rgba(15,23,42,.24);
}
.choice-card:hover { transform: translateY(-3px); transition: .25s ease; }
.choice-card .tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 12px;
  margin-bottom: 24px;
  border-radius: 999px;
  background: #e8f4ed;
  color: #2AA737;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.choice-card.featured .tag {
  background: rgba(26,122,74,.16);
  color: #34d399;
}
.recommended-ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg,#2AA737,#14b8a6);
  color: #fff;
  padding: 6px 22px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.choice-card h3 {
  margin: 0 0 16px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
  color: #020617;
}
.choice-card.featured h3 { color: #fff !important; }
.choice-card .desc {
  margin: 0 0 30px;
  color: #52645c;
  font-size: 15px;
  line-height: 1.7;
}
.choice-card.featured .desc { color: #c5dccb; }
.choice-list {
  display: grid;
  gap: 15px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}
.choice-list li {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #334155;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
}
.choice-card.featured .choice-list li { color: #c5dccb; }
.choice-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: 1px;
}
.choice-list-icon-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2AA737;
  color: #fff;
}
.choice-list-icon-star {
  width: 20px;
  height: 20px;
  color: #34d399;
}
.choice-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: 10px;
  border: 1.5px solid #2AA737;
  background: #fff;
  color: #047857;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
  transition: .22s ease;
}
.choice-btn:hover {
  background: #2AA737;
  color: #fff;
}
.choice-card.featured .choice-btn {
  background: #2AA737;
  color: #fff;
  border-color: #2AA737;
}
.choice-card.featured .choice-btn:hover { background: #2AA737; }

/* Expert projects section (expert persona dynamic panel) */
.expert-process {
  background: #ffffff;
  color: #0f172a;
  padding: 72px 24px 80px;
}

.expert-process .persona-section-head h2 { color: #0f172a; }

.expert-projects {
  position: relative;
  overflow: hidden;
}

.expert-projects-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.expert-projects-bg-dots {
  position: absolute;
  width: 120px;
  height: 120px;
  opacity: 0.35;
  background-image: radial-gradient(#94a3b8 1.2px, transparent 1.2px);
  background-size: 13px 13px;
}

.expert-projects-bg-dots--left {
  left: 24px;
  top: 48px;
}

.expert-projects-bg-dots--right {
  right: 24px;
  top: 48px;
}

.expert-projects-bg-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background:
    radial-gradient(ellipse 70% 80% at 12% 100%, rgba(26,122,74,0.08), transparent 58%),
    radial-gradient(ellipse 60% 70% at 88% 100%, rgba(148,163,184,0.10), transparent 60%);
}

.expert-projects-container {
  position: relative;
  z-index: 1;
  max-width: 1180px;
}

.expert-projects-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 34px;
}

.expert-projects-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(26,122,74,0.28);
  background: rgba(232,244,237,0.65);
  color: #2AA737;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.expert-projects-head h2 {
  margin: 16px 0 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -1px;
  color: #111827;
}

.expert-projects-head h2 em {
  font-style: normal;
  color: #2AA737;
}

.expert-projects-head p {
  margin: 0 auto;
  max-width: 680px;
  color: #64748b;
  font-size: 15px;
  line-height: 1.65;
}

.expert-projects-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
}

/* Category filter pills */
.expert-projects-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
}

.expert-projects-filters-placeholder {
  flex: 1;
}

.expert-projects-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(13, 43, 26, 0.12);
  background: #ffffff;
  color: #33463d;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease,
    background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.expert-projects-filter:hover {
  border-color: rgba(22, 135, 72, 0.45);
  color: #2AA737;
  box-shadow: 0 4px 14px rgba(22, 135, 72, 0.1);
  transform: translateY(-1px);
}

.expert-projects-filter:focus-visible {
  outline: none;
  border-color: #2AA737;
  box-shadow: 0 0 0 3px rgba(22, 135, 72, 0.18);
}

.expert-projects-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #eef2f0;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  transition: background 0.18s ease, color 0.18s ease;
}

.expert-projects-filter.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, #2AA737 0%, #12613a 100%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(22, 135, 72, 0.28);
}

.expert-projects-filter.is-active .expert-projects-filter-count {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.expert-projects-see-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2AA737;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.expert-projects-see-all:hover {
  text-decoration: underline;
}

.expert-projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.expert-project-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid rgba(13,43,26,0.08);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(13,43,26,0.06);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.expert-project-card.is-featured {
  border-color: rgba(22,135,72,0.45);
  box-shadow: 0 14px 36px rgba(22,135,72,0.10);
}

.expert-project-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(13,43,26,0.10);
}

.expert-project-card__media {
  position: relative;
  height: 148px;
  background-size: cover;
  background-position: center;
  background-color: #e8f4ed;
}

.expert-project-card__featured {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(22,135,72,0.92);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.expert-project-card__status {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: #2AA737;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.expert-project-card--skeleton {
  pointer-events: none;
}

.expert-project-card--skeleton .expert-project-card__media {
  background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
  background-size: 200% 100%;
  animation: expertProjectShimmer 1.4s ease-in-out infinite;
}

.expert-project-card__skeleton-line {
  height: 10px;
  border-radius: 999px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
  background-size: 200% 100%;
  animation: expertProjectShimmer 1.4s ease-in-out infinite;
}

.expert-project-card__skeleton-line--title {
  width: 88%;
  height: 14px;
}

.expert-project-card__skeleton-line--short {
  width: 62%;
}

.expert-project-card__skeleton-btn,
.expert-project-card__skeleton-save {
  border-radius: 10px;
  background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
  background-size: 200% 100%;
  animation: expertProjectShimmer 1.4s ease-in-out infinite;
}

.expert-project-card__skeleton-btn {
  height: 40px;
}

.expert-project-card__skeleton-save {
  width: 42px;
  height: 40px;
}

@keyframes expertProjectShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.expert-projects-state {
  grid-column: 1 / -1;
  padding: 28px 16px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
}

.expert-projects-state--error p {
  margin: 0 0 12px;
}

.expert-projects-state button {
  padding: 10px 16px;
  border: 1px solid rgba(22,135,72,0.28);
  border-radius: 999px;
  background: #ffffff;
  color: #2AA737;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}


.expert-project-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 16px 14px;
}

.expert-project-card__body h3 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
}

.expert-project-card__body p {
  margin: 0 0 14px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
  flex: 1;
}

.expert-project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.expert-project-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #f3f6f4;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
}

.expert-project-card__actions {
  display: grid;
  grid-template-columns: 1fr 42px;
  gap: 8px;
  align-items: center;
}

.expert-project-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid rgba(22,135,72,0.35);
  border-radius: 10px;
  background: #ffffff;
  color: #2AA737;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.expert-project-card__cta:hover {
  background: #f3faf6;
  border-color: #2AA737;
}

.expert-project-card__save {
  width: 42px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(13,43,26,0.10);
  border-radius: 10px;
  background: #ffffff;
  color: #2AA737;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.expert-project-card__save:hover,
.expert-project-card__save.is-saved {
  background: #f3faf6;
  border-color: rgba(22,135,72,0.28);
}

.expert-projects-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
  text-align: left;
}

.expert-projects-trust-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #2AA737;
  background: radial-gradient(circle at 30% 30%, #f3faf6, #e8f4ed 70%);
  box-shadow: 0 0 0 1px rgba(26,122,74,0.10);
}

.expert-projects-trust p {
  margin: 0;
  max-width: 520px;
  color: #334155;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.expert-projects-trust p::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 8px;
  border-radius: 999px;
  background: #2AA737;
}

/* ---- Projects carousel ---- */
.expert-projects-carousel {
  position: relative;
}

.expert-projects-track {
  display: flex;
  grid-template-columns: none;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 6px 4px 18px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.expert-projects-track::-webkit-scrollbar { display: none; }

.expert-projects-carousel .expert-project-card {
  flex: 0 0 clamp(240px, 25%, 282px);
  scroll-snap-align: start;
}

/* ---- API-driven job cards (no image) ---- */
.expert-project-card.ep-job {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 18px;
}

.ep-job__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ep-job__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: #2AA737;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.ep-job__badge--muted {
  background: #eef5f1;
  color: #2AA737;
}

.ep-job__posted {
  color: #94a3b8;
  font-size: 12.5px;
  font-weight: 600;
}

.ep-job__title {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.32;
  font-weight: 800;
  color: #111827;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ep-job__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.ep-job__fact {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ep-job__fact-ic {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #f3f6f4;
  color: #2AA737;
}

.ep-job__fact-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.ep-job__fact-txt strong {
  font-size: 14px;
  font-weight: 800;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-job__fact-txt small {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

.ep-job__desc {
  margin: 0 0 14px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ep-job__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}

.ep-job__tag {
  padding: 5px 12px;
  border-radius: 999px;
  background: #f1f5f3;
  color: #5b6b63;
  font-size: 11px;
  font-weight: 700;
}

.ep-job__cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 10px;
  background: #2AA737;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.ep-job__cta:hover {
  background: #12703c;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(22, 135, 72, 0.28);
}

.ep-job-status {
  flex: 1 0 100%;
  padding: 44px 16px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
}

.epc-nav {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(13, 43, 26, 0.10);
  border-radius: 50%;
  background: #ffffff;
  color: #2AA737;
  box-shadow: 0 10px 26px rgba(13, 43, 26, 0.14);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.epc-nav:hover {
  background: #2AA737;
  color: #ffffff;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 14px 32px rgba(22, 135, 72, 0.30);
}

.epc-nav:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 135, 72, 0.30);
}

.epc-nav--prev { left: -6px; }
.epc-nav--next { right: -6px; }

.epc-nav[disabled] {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

.epc-nav[disabled]:hover {
  background: #ffffff;
  color: #2AA737;
  transform: translateY(-50%);
}

/* ---- Stats band ---- */
.expert-stats-band {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 44px;
  padding: 8px 10px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 60% 130% at 28% 50%, rgba(34, 120, 72, 0.55), transparent 70%),
    linear-gradient(120deg, #0c2419 0%, #12341f 45%, #0a1f14 100%);
  box-shadow: 0 24px 60px rgba(10, 31, 20, 0.35);
  overflow: hidden;
}

.expert-stats-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 40%, rgba(46, 160, 90, 0.26), transparent 55%);
  pointer-events: none;
}

.expert-stats-band__inner {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.expert-stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 18px;
  text-align: center;
}

.expert-stats-item + .expert-stats-item {
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.expert-stats-item__num {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  color: #ffffff;
}

.expert-stats-item__label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(226, 240, 231, 0.72);
}

.expert-stats-band__arrow {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: rgba(226, 240, 231, 0.45);
}

@media (max-width: 1100px) {
  .expert-projects-carousel .expert-project-card {
    flex-basis: clamp(230px, 42%, 300px);
  }
}

@media (max-width: 760px) {
  .expert-process {
    padding: 56px 16px 64px;
  }

  .expert-projects-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .expert-projects-filters {
    justify-content: center;
  }

  .expert-projects-see-all {
    justify-content: center;
  }

  .expert-projects-carousel .expert-project-card {
    flex-basis: 80%;
  }

  .epc-nav--prev { left: 2px; }
  .epc-nav--next { right: 2px; }

  .expert-projects-trust {
    flex-direction: column;
    text-align: center;
  }

  .expert-projects-trust p::after {
    margin-left: auto;
    margin-right: auto;
  }

  .expert-stats-band__inner {
    grid-template-columns: 1fr;
  }

  .expert-stats-item + .expert-stats-item {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  .expert-stats-band__arrow {
    display: none;
  }
}

.expert-mini-copy {
  text-align: center;
  margin: -20px auto 36px;
  color: #6a8878;
  font-size: 13px;
}
.mentor-flow-board {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
}
.mentor-flow-stage {
  position: relative;
  min-height: 500px;
}
.mentor-flow-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.mentor-flow-path-bg {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.mentor-flow-path-bg--input {
  stroke: rgba(26,122,74,0.12);
}
.mentor-flow-path-bg--output {
  stroke: rgba(59,130,246,0.12);
}
.mentor-flow-path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
}
.mentor-flow-path--input {
  stroke: url(#mentorInputStroke);
}
.mentor-flow-path--output {
  stroke: url(#mentorOutputStroke);
}
.mentor-flow-path.is-running {
  animation: mentorFlowMarch 1.8s linear infinite;
}
.mentor-flow-particle--input {
  fill: #45C652;
}
.mentor-flow-particle--output {
  fill: #3b82f6;
}
.mentor-flow-particle--trail {
  opacity: 0.55;
}
.mentor-flow-node {
  stroke-width: 2;
  animation: mentorNodePulse 2.4s ease-in-out infinite;
}
.mentor-flow-node--input {
  fill: #ffffff;
  stroke: rgba(26,122,74,0.75);
}
.mentor-flow-node--output {
  fill: #ffffff;
  stroke: rgba(59,130,246,0.75);
}
@keyframes mentorFlowMarch {
  to { stroke-dashoffset: -36; }
}
@keyframes mentorNodePulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.mentor-flow-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  min-height: 500px;
}
.mentor-flow {
  position: relative;
  max-width: 1120px;
  min-height: 360px;
  margin: 0 auto;
}
.mentor-col {
  display: grid;
  gap: 14px;
  position: relative;
  z-index: 2;
}
.mentor-col--inputs {
  align-content: center;
}
.mentor-col--outputs {
  align-content: center;
}
.mentor-node {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 13px;
  align-items: center;
  min-height: 58px;
  padding: 12px 16px;
  border: 1px solid rgba(26,122,74,0.14);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15,23,42,.035);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
.mentor-node--output {
  border-color: rgba(59,130,246,0.14);
}
.mentor-node:hover,
.mentor-node.is-flow-active {
  transform: translateX(4px);
  border-color: rgba(26,122,74,0.38);
  box-shadow:
    0 16px 36px rgba(15,23,42,.08),
    0 0 0 1px rgba(26,122,74,.08);
}
.mentor-node--output:hover,
.mentor-node--output.is-flow-active {
  transform: translateX(-4px);
  border-color: rgba(59,130,246,0.38);
  box-shadow:
    0 16px 36px rgba(59,130,246,.08),
    0 0 0 1px rgba(59,130,246,.08);
}
.mentor-node.is-flow-active::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(34,160,90,0.45), rgba(59,130,246,0.25));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: scholarCardGlow 2.6s ease-in-out infinite;
}
.mentor-node-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #2AA737;
  background: #e8f4ed;
  border: 1px solid #c5dccb;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mentor-node-icon svg { width: 18px; height: 18px; }
.mentor-node.is-flow-active .mentor-node-icon {
  transform: scale(1.08);
  box-shadow: 0 8px 18px rgba(26,122,74,0.16);
}
.mentor-node-copy strong {
  display: block;
  color: #172033;
  font-size: 12.5px;
  line-height: 1.25;
  margin-bottom: 3px;
}
.mentor-node-copy span {
  color: #6a8878;
  font-size: 10.5px;
  line-height: 1.35;
}
.mentor-hub {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  align-self: center;
}
.mentor-hub-ring {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #0e8b5d 0%, #0f6d49 58%, #064c32 100%);
  box-shadow: 0 0 0 10px rgba(26,122,74,.06), 0 0 0 20px rgba(26,122,74,.035), 0 22px 44px rgba(26,122,74,.24);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.mentor-hub.is-hub-active .mentor-hub-ring {
  animation: mentorHubPulse 3s ease-in-out infinite;
}
@keyframes mentorHubPulse {
  0%, 100% {
    box-shadow:
      0 0 0 10px rgba(26,122,74,.06),
      0 0 0 20px rgba(26,122,74,.035),
      0 22px 44px rgba(26,122,74,.24);
  }
  50% {
    box-shadow:
      0 0 0 12px rgba(26,122,74,.1),
      0 0 0 24px rgba(26,122,74,.05),
      0 28px 56px rgba(26,122,74,.28),
      0 0 36px rgba(78,218,140,.18);
  }
}
.mentor-hub-ring::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px dashed rgba(26,122,74,.38);
  animation: mentorHubSpin 18s linear infinite;
}
@keyframes mentorHubSpin {
  to { transform: rotate(360deg); }
}
.mentor-hub-inner {
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.mentor-hub-logo {
  width: 72px;
  height: auto;
  object-fit: contain;
  display: block;
}
.mentor-hub-inner small {
  display: block;
  color: rgba(255,255,255,.62);
  font-size: 9px;
  letter-spacing: .5px;
  text-transform: none;
}
.mentor-stat-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mentor-stat-star {
  display: inline-flex;
  color: #2AA737;
}
.scholar-note svg {
  flex-shrink: 0;
  color: #2AA737;
}
.mentor-stats {
  max-width: 600px;
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(26,122,74,0.14);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.mentor-stat {
  padding: 17px 14px;
  text-align: center;
  border-right: 1px solid rgba(26,122,74,0.14);
}
.mentor-stat:last-child { border-right: 0; }
.mentor-stat strong {
  display: block;
  color: #2AA737;
  font-size: 19px;
  line-height: 1;
  margin-bottom: 5px;
}
.mentor-stat span { color: #6a8878; font-size: 10.5px; }

@media (max-width: 900px) {
  .scholar-flow-stage { min-height: auto; }
  .scholar-flow-svg { display: none; }
  .scholar-flow-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "step1"
      "step2"
      "step3"
      "step4"
      "step5"
      "step6";
    gap: 18px;
  }
  .scholar-card.is-flow-active::before { display: none; }
  .mentor-flow-stage { min-height: auto; }
  .mentor-flow-svg { display: none; }
  .mentor-flow-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .mentor-hub { order: -1; margin-bottom: 8px; }
  .mentor-node.is-flow-active::before { display: none; }
  .mentor-node:hover,
  .mentor-node.is-flow-active,
  .mentor-node--output:hover,
  .mentor-node--output.is-flow-active {
    transform: translateY(-3px);
  }
  .choice-grid { grid-template-columns: 1fr; }
  .choice-card { padding: 34px 26px; }
  .mentor-stats { grid-template-columns: repeat(2, 1fr); }
  .mentor-stat:nth-child(2) { border-right: 0; }
}
@media (max-width: 520px) {
  .persona-process, .persona-choices { padding-left: 16px; padding-right: 16px; }
  .choice-head h2 { font-size: 34px; }
  .mentor-stats { grid-template-columns: 1fr; }
  .mentor-stat { border-right: 0; border-bottom: 1px solid rgba(26,122,74,0.14); }
  .mentor-stat:last-child { border-bottom: 0; }
}



/* ======================================================================
   FINAL FIXES: color consistency, hero overlap fix, section order, real simulation imagery
====================================================================== */
:root {
  --theme-dark: #0d2b1a;
  --theme-green: #2AA737;
  --theme-green-2: #45C652;
  --theme-mint: #59DA65;
  --theme-soft: #e8f4ed;
}

/* Hero spacing fix: keep search and stats separated on all desktop widths */
.sc-hero {
  min-height: auto !important;
  padding: 1px 20px 54px !important;
}
.sc-hero-inner {
  min-height: auto !important;
  align-items: center !important;
  row-gap: 18px !important;
}
.sc-hero-content {
  padding: 18px 10px 22px 10px !important;
}
.sc-search-wrap {
  margin-bottom: 0;
}
.sc-stats-bar {
  position: relative !important;
  z-index: 1 !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  grid-column: 1 / -1;
  width: calc(100% - 80px);
  margin: 16px auto 0 !important;
  min-height: 112px;
}

.sc-hero-content:has(.sc-search-wrap.is-open) ~ .sc-stats-bar {
  z-index: 1 !important;
}
@media (min-width: 1025px) {
  .sc-hero:not(.is-workflow-hero) .sc-hero-content h1 { font-size: clamp(44px, 4vw, 58px) !important; }
  .sc-hero-content p { margin: 18px 0 24px !important; }
  .sc-main-person { max-height: 390px !important; }
  .sc-hero-visual { min-height: 405px !important; }
  .sc-hero.is-expert-mode .sc-hero-visual { min-height: auto !important; }
  .sc-hero.is-workflow-hero .sc-hero-visual { min-height: 0 !important; }
}
@media (max-width: 1024px) {
  .sc-hero-content { padding-bottom: 28px !important; }
  .sc-stats-bar { width: 100%; }
}

/* Keep the dynamic area after the benefit/value section with a clean separator */
.persona-dynamic-wrap {
  border-top: 1px solid rgba(26,122,74,.14);
}

/* Remove blue theme from expert flow and make it fully green */
.choice-card .tag[style], .choice-btn[style] {
  border-color: #2AA737 !important;
  color: #2AA737 !important;
}
.choice-card .tag[style] {
  background: #e8f4ed !important;
}
.choice-btn[style]:hover {
  background: #2AA737 !important;
  color: #fff !important;
}

/* Real image based simulation thumbnails: no AI/vector line icons */
.sim-thumb {
  background-size: cover !important;
  background-position: center !important;
  min-height: 166px;
}
.sim-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,43,26,.12), rgba(13,43,26,.72));
  z-index: 1;
}
.sim-thumb-art { display: none !important; }
.sim-badge, .sim-save { z-index: 3; }
.sim-card:nth-child(1) .sim-thumb {
  background-image: url('https://images.unsplash.com/photo-1518779578993-ec3579fee39f?auto=format&fit=crop&w=900&q=80') !important;
}
.sim-card:nth-child(2) .sim-thumb {
  background-image: url('https://images.unsplash.com/photo-1555255707-c07966088b7b?auto=format&fit=crop&w=900&q=80') !important;
}
.sim-card:nth-child(3) .sim-thumb {
  background-image: url('https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?auto=format&fit=crop&w=900&q=80') !important;
}
.sim-card:nth-child(4) .sim-thumb {
  background-image: url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=900&q=80') !important;
}
.sim-badge-blue,
.sim-badge-orange,
.sim-badge-purple,
.sim-badge {
  background: rgba(26,122,74,.92) !important;
  color: #fff !important;
}
.sim-card:nth-child(2) .sim-avatar,
.sim-card:nth-child(3) .sim-avatar,
.sim-card:nth-child(4) .sim-avatar {
  background: linear-gradient(135deg,#2AA737,#59DA65) !important;
}
.sim-domain,
.sim-price strong,
.sim-btn,
.sec-tag,
.sec-title em {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 800 !important;
  color: var(--theme-green) !important;
}
.sim-btn {
  border-color: rgba(26,122,74,.35) !important;
}
.sim-btn:hover {
  background: var(--theme-green) !important;
  color: #fff !important;
}

/* Make older blue accents green globally inside this page */
.sim-badge-blue { background: rgba(26,122,74,.92) !important; }
[data-theme="dark"] .mentor-col--outputs .mentor-node-icon,
[data-theme="light"] .mentor-col--outputs .mentor-node-icon {
  color: #2563eb !important;
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}



/* =========================================================
   UPDATED REQUEST: White background for
   1) How it works for Scholars
   2) Mentor Spotlight slider
   with matching green/white brand colors
========================================================= */
.scholar-process {
  background: #ffffff !important;
  color: #0d2b1a !important;
}
.scholar-process::before {
  background:
    radial-gradient(circle at 18% 18%, rgba(26,122,74,.075), transparent 30%),
    radial-gradient(circle at 82% 62%, rgba(78,218,140,.11), transparent 34%) !important;
}
.scholar-process .persona-section-head h2 {
  color: #0d2b1a !important;
}
.scholar-process .persona-section-head p {
  color: #5a7468 !important;
}
.scholar-process .persona-pill {
  background: #f2fbf6 !important;
  border-color: rgba(26,122,74,.22) !important;
  color: #2AA737 !important;
}
.scholar-flow-path-bg {
  stroke: rgba(26,122,74,0.14) !important;
}
.scholar-flow-path {
  stroke: url(#scholarFlowStroke) !important;
}
.scholar-flow-particle {
  fill: #45C652 !important;
}
.scholar-flow-particle--trail {
  fill: rgba(26,122,74,0.35) !important;
}
.scholar-flow-node {
  fill: #ffffff !important;
  stroke: rgba(26,122,74,0.7) !important;
}
.scholar-card {
  background: #ffffff !important;
  border-color: rgba(26,122,74,.16) !important;
  box-shadow: 0 16px 42px rgba(13,43,26,.075) !important;
}
.scholar-card:hover,
.scholar-card.is-flow-active {
  border-color: rgba(26,122,74,.38) !important;
  box-shadow: 0 24px 60px rgba(13,43,26,.12), 0 0 0 1px rgba(26,122,74,.08) !important;
}
.scholar-card.secure-card {
  background: linear-gradient(135deg, #f3fbf7 0%, #ffffff 100%) !important;
  border-color: rgba(26,122,74,.42) !important;
  box-shadow: 0 22px 58px rgba(26,122,74,.13) !important;
}
.scholar-card .step-no {
  color: rgba(26,122,74,.72) !important;
}
.scholar-card .step-no::after {
  background: rgba(26,122,74,.13) !important;
}
.scholar-icon {
  color: #2AA737 !important;
  background: rgba(26,122,74,.08) !important;
  border-color: rgba(26,122,74,.18) !important;
}
.secure-card .scholar-icon {
  color: #ffffff !important;
  background: #2AA737 !important;
  border-color: #2AA737 !important;
  box-shadow: 0 10px 24px rgba(26,122,74,.24) !important;
}
.scholar-card h3 {
  color: #0d2b1a !important;
}
.scholar-card p,
.secure-card p {
  color: #5a7468 !important;
}
.secure-badge {
  background: #2AA737 !important;
  color: #ffffff !important;
}
.scholar-note {
  background: #f2fbf6 !important;
  border-color: rgba(26,122,74,.20) !important;
  color: #5a7468 !important;
}
.scholar-note strong {
  color: #0d2b1a !important;
}

.ai-director-section.green-section,
.ai-director-section {
  background: #ffffff !important;
}
.ai-director-section::before {
  background: linear-gradient(to right, transparent, rgba(26,122,74,.18), transparent) !important;
}
.adir-hero,
[data-theme="light"] .adir-hero,
[data-theme="dark"] .adir-hero {
  background:
    radial-gradient(ellipse at 10% 50%, rgba(26,122,74,.10) 0%, transparent 56%),
    radial-gradient(ellipse at 86% 20%, rgba(78,218,140,.13) 0%, transparent 48%),
    linear-gradient(135deg, #ffffff 0%, #f7fcf9 48%, #ffffff 100%) !important;
  border-top: 1px solid rgba(26,122,74,.10) !important;
  border-bottom: 1px solid rgba(26,122,74,.10) !important;
}
.adir-hero::after {
  background: linear-gradient(to right, transparent 0%, rgba(26,122,74,.20) 32%, rgba(34,160,90,.45) 50%, rgba(26,122,74,.20) 68%, transparent 100%) !important;
  box-shadow: 0 0 18px rgba(26,122,74,.14) !important;
}
.adir-tag {
  color: #2AA737 !important;
}
.adir-left h2 {
  color: #0d2b1a !important;
}
.adir-left h2 em {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 800 !important;
  color: #45C652 !important;
}
.adir-left p {
  color: #4a7060 !important;
}
.adir-cta-btn {
  background: linear-gradient(135deg, #2AA737, #2fd374) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 26px rgba(26,122,74,.22) !important;
}
.adir-profile-card.center-active .adir-card-inner,
.adir-profile-card:hover .adir-card-inner {
  border-color: rgba(26,122,74,.58) !important;
  box-shadow: 0 24px 60px rgba(13,43,26,.18), 0 0 24px rgba(26,122,74,.12) !important;
}
.adir-card-inner {
  border-color: rgba(26,122,74,.18) !important;
  box-shadow: 0 12px 34px rgba(13,43,26,.12) !important;
}
.adir-slider-viewport {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 90%, transparent 100%) !important;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 90%, transparent 100%) !important;
}
.adir-arc-fill,
[data-theme="light"] .adir-arc-fill,
[data-theme="dark"] .adir-arc-fill {
  fill: #ffffff !important;
}
.adir-arc-line,
[data-theme="light"] .adir-arc-line,
[data-theme="dark"] .adir-arc-line {
  stroke: rgba(26,122,74,.28) !important;
  filter: drop-shadow(0 0 6px rgba(26,122,74,.18)) !important;
}



/* ── VALUE PROPS persona swap fade ── */
#vpScholar, #vpExpert {
  animation: fadeDown 0.42s both;
}
.persona-choices {
  background: var(--bg2) !important;
}
[data-theme="dark"] .persona-choices {
  border-bottom-color: rgba(26,122,74,.14);
}
[data-theme="dark"] .choice-head h2 { color: var(--text) !important; }
[data-theme="dark"] .choice-head p  { color: var(--muted) !important; }
[data-theme="dark"] .choice-card {
  background: var(--surface) !important;
  border-color: rgba(26,122,74,.22) !important;
}
[data-theme="dark"] .choice-card h3 { color: var(--text) !important; }
[data-theme="dark"] .choice-card .desc,
[data-theme="dark"] .choice-card .choice-list li { color: var(--muted) !important; }
[data-theme="dark"] .choice-card.featured {
  background: #0f172a !important;
  border-color: #2AA737 !important;
}
[data-theme="dark"] .choice-card.featured h3 { color: #fff !important; }
[data-theme="dark"] .choice-card.featured .desc,
[data-theme="dark"] .choice-card.featured .choice-list li {
  color: #c5dccb !important;
}

.logo-text .logo-icon {
  height: 36px;
  width: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

/* ======================================================================
   Expert hero interactive flow (replaces static expert image)
====================================================================== */
.sc-hero.is-expert-mode .sc-hero-visual {
  align-items: center;
  justify-content: stretch;
  min-height: auto;
  padding: 0 8px 0 0;
}
.sc-hero.is-expert-mode .sc-hero-visual::after {
  display: none;
}

.expert-hero-flow {
  position: relative;
  z-index: 5;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ehf-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 18px;
}

.ehf-heading span {
  color: #111b16;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ehf-heading-accent {
  display: block;
  width: 42px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2AA737, #59DA65);
}

.ehf-stage {
  position: relative;
  min-height: 0;
}
.ehf-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.ehf-path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke 0.25s ease, stroke-width 0.25s ease, opacity 0.25s ease;
}
.ehf-path--input.is-idle {
  stroke: rgba(26,122,74,0.22);
}
.ehf-path--input.is-active {
  stroke: #2AA737;
  stroke-width: 2.5;
}
.ehf-path--output-green.is-idle {
  stroke: rgba(26,122,74,0.20);
}
.ehf-path--output-green.is-active {
  stroke: #2AA737;
  stroke-width: 2.5;
}
.ehf-path--output-blue.is-idle {
  stroke: rgba(37,99,235,0.18);
}
.ehf-path--output-blue.is-active {
  stroke: #2563eb;
  stroke-width: 2.5;
}

.ehf-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px minmax(0, 1.08fr);
  gap: 12px;
  align-items: center;
}
.ehf-col {
  display: grid;
  gap: 10px;
  align-content: center;
}
.ehf-col-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.ehf-col-label--input {
  color: #2AA737;
}
.ehf-col-label--output {
  color: #2563eb;
}

.ehf-node {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 0;
  padding: 11px 14px;
  border: 1px solid rgba(13,43,26,0.08);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(13,43,26,0.06);
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.ehf-node--input::after,
.ehf-node--output::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 50%;
  z-index: 2;
}
.ehf-node--input::after {
  right: -4px;
  background: #2AA737;
  box-shadow: 0 0 0 3px rgba(26,122,74,0.12);
}
.ehf-node--output::after {
  left: -4px;
  background: #2AA737;
  box-shadow: 0 0 0 3px rgba(26,122,74,0.10);
}
.ehf-node--output.ehf-node--blue::after {
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
}
.ehf-node--compact .ehf-node-copy strong {
  font-size: 11.5px;
  line-height: 1.28;
  font-weight: 700;
}
.ehf-node--compact .ehf-node-copy span {
  display: none;
  margin-top: 3px;
  color: #6a8878;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 500;
}
.ehf-node--compact.is-active .ehf-node-copy span {
  display: block;
}
.ehf-node--input.is-active {
  border-color: #2AA737;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(26,122,74,0.12);
}
.ehf-node--output.is-active {
  border-color: rgba(37,99,235,0.35);
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(37,99,235,0.08);
}
.ehf-node--output.ehf-node--blue.is-active {
  border-color: #2563eb;
}
.ehf-node:hover {
  transform: translateY(-1px);
}
.ehf-node-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #2AA737;
  background: #eef8ef;
  border: 1px solid #d5e8dc;
}
.ehf-node--blue .ehf-node-icon {
  color: #2563eb;
  background: #eff6ff;
  border-color: #dbeafe;
}
.ehf-node-icon svg { width: 16px; height: 16px; }
.ehf-node-copy strong {
  display: block;
  color: #172033;
  font-size: 12px;
  line-height: 1.28;
  font-weight: 700;
}

.ehf-hub-wrap {
  display: grid;
  place-items: center;
  align-self: center;
}
.ehf-hub {
  position: relative;
  width: 96px;
  height: 96px;
}
.ehf-hub-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px dashed rgba(26,122,74,0.34);
  pointer-events: none;
}
.ehf-hub-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 8px 6px;
  text-align: center;
  background: #ffffff;
  border: 1px solid rgba(26,122,74,0.14);
  box-shadow: 0 10px 28px rgba(13,43,26,0.08);
}
.ehf-hub-core img {
  width: 28px;
  height: auto;
  object-fit: contain;
}
.ehf-hub-core strong {
  display: block;
  color: #2AA737;
  font-size: 7.5px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.02em;
}
.ehf-hub-core small {
  display: block;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2AA737;
}

@media (max-width: 900px) {
  .ehf-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ehf-hub-wrap {
    order: -1;
  }
  .ehf-node--input::after,
  .ehf-node--output::after {
    display: none;
  }
  .ehf-svg { display: none; }
}

@media (max-width: 640px) {
  .sc-expert-trust {
    justify-content: center;
    text-align: center;
  }
  .sc-expert-trust p::after {
    margin-left: auto;
    margin-right: auto;
  }
}


/* =====================================================
   MENTOR DASHBOARD PROMO SECTION  (.mdp-*)
===================================================== */

.mdp-section {
  position: relative;
  padding: 72px 20px 100px;
  /* Clean light background with very soft purple tint */
  background:
    radial-gradient(ellipse 80% 60% at 65% 50%, rgba(109,69,224,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 20%, rgba(88,52,200,0.04) 0%, transparent 50%),
    #f8f7ff;
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
}

/* Background layers */
.mdp-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.mdp-bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(109, 58, 237, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 70% at 60% 50%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 50%, black 20%, transparent 100%);
}

.mdp-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.mdp-bg-glow--top {
  top: -60px;
  right: 15%;
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse, rgba(124, 58, 237, 0.07) 0%, transparent 65%);
}

.mdp-bg-glow--right {
  bottom: -80px;
  right: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(99, 40, 220, 0.05) 0%, transparent 68%);
}

/* ── Full-width centered layout (new) ── */
.mdp-fw-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Header above dashboard */
.mdp-fw-header {
  margin-bottom: 36px;
}

.mdp-fw-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(109, 40, 217, 0.09);
  border: 1px solid rgba(109, 40, 217, 0.20);
  color: #6d28d9;
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.mdp-fw-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7c3aed;
  animation: mdpFwDot 2s ease-in-out infinite;
}
@keyframes mdpFwDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.65); }
}

.mdp-fw-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: #0f1117;
  margin: 0 0 12px;
}
.mdp-fw-title em {
  font-style: normal;
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 55%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mdp-fw-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: #6b7280;
  line-height: 1.65;
  max-width: 480px;
  margin: 0 auto;
}

/* Stage: relative container that holds dashboard + floating badges */
.mdp-fw-stage {
  position: relative;
  padding: 0 40px;
}

/* Floating stat badges */
.mdp-float-badge {
  position: absolute;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(109, 40, 217, 0.14);
  border-radius: 999px;
  box-shadow:
    0 4px 14px rgba(0,0,0,0.08),
    0 10px 30px rgba(109, 40, 217, 0.08);
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: default;
}
.mdp-float-badge--accent {
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(109,40,217,0.35), 0 10px 28px rgba(109,40,217,0.18);
}
.mdp-float-badge--accent .mdp-float-label { color: #fff; }

.mdp-float-icon { font-size: 15px; flex-shrink: 0; }
.mdp-float-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: -0.1px;
}

/* Tilt card (framer-motion manages transform) */
.mdp-tilt-card { perspective: 1200px; display: block; }

/* Dashboard outer wrapper — clean, light shadows so content reads clearly */
.mdp-fw-outer {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  /* Layered shadow: soft ambient + floating depth, no heavy black block */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.10),
    0 16px 40px rgba(0, 0, 0, 0.13),
    0 40px 72px rgba(0, 0, 0, 0.10),
    0 0 0 1px rgba(109, 40, 217, 0.18),
    0 0 48px rgba(109, 40, 217, 0.08);
  background: #f4f4f2; /* match the dashboard's paper background — no dark bleed */
  transform: translateZ(0);
}

/* Glass-shimmer on top edge — very subtle, just catches ambient light */
.mdp-fw-glare {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 100%);
  border-radius: 16px 16px 0 0;
  pointer-events: none;
  z-index: 10;
}

/* CTA row below dashboard */
.mdp-fw-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}

.mdp-fw-cta-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #9ca3af;
  font-weight: 500;
}

/* trust card removed from full-width layout */

/* CTA button — centered */
.mdp-cta {
  align-self: center !important;
}

/* ─── Keep old .mdp-container for fallback (unused but safe) ─── */
/* Two-column grid — left fixed 380px, right fills rest.
 * At 1280px viewport: right = 1240 - 380 - 40 = 820px → scale = 820/820 = 1.00 */
.mdp-container {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 40px;
  align-items: center;
}

/* ── LEFT COLUMN ── */
.mdp-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mdp-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.mdp-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  background: #7c3aed;
  color: #ffffff;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.mdp-badge-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #1f2937;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.1px;
}

.mdp-heading {
  margin: 0 0 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(34px, 3.6vw, 50px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -1.8px;
  color: #0f1117;
}

.mdp-heading em {
  display: block;
  font-style: normal;
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mdp-desc {
  margin: 0 0 28px;
  max-width: 420px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.68;
  color: #6b7280;
  font-weight: 400;
}

/* Feature checklist card */
.mdp-features {
  background: #ffffff;
  border-radius: 18px;
  padding: 26px 30px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.04),
    0 12px 36px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 32px;
  transition: box-shadow 0.28s ease;
}

.mdp-features:hover {
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.04),
    0 18px 48px rgba(124, 58, 237, 0.12);
}

.mdp-feature-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mdp-feature-check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mdp-feature-check svg {
  display: block;
  flex-shrink: 0;
}

.mdp-feature-text {
  color: #1f2937;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

/* CTA Button */
.mdp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 32px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 50%, #6d28d9 100%);
  color: #ffffff;
  font-family: 'DM Sans', sans-serif;
  font-size: 15.5px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -0.1px;
  box-shadow:
    0 1px 2px rgba(109, 40, 217, 0.20),
    0 6px 16px rgba(109, 40, 217, 0.38),
    0 14px 32px rgba(109, 40, 217, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  border: 0;
  cursor: pointer;
}

.mdp-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(109, 40, 217, 0.22),
    0 10px 24px rgba(109, 40, 217, 0.48),
    0 20px 48px rgba(109, 40, 217, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

/* ── RIGHT COLUMN ── */
.mdp-right {
  position: relative;
}

.mdp-dashboard-stage {
  position: relative;
  padding-bottom: 76px; /* headroom for floating trust card */
}

/* 3-D presentation wrapper — very subtle tilt (2°/1°) preserves pixel sharpness.
 * The premium feel comes from the layered shadow + ambient glow, not the tilt. */
.mdp-dashboard-outer {
  position: relative;
   
  animation: mdpDashboardFloat 5s ease-in-out infinite;
  border-radius: 18px;
}

/* Ambient purple glow under the dashboard — "floating above page" depth cue */
.mdp-dashboard-outer::before {
  content: '';
  position: absolute;
  inset: 10% 5%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(109, 58, 237, 0.22) 0%, transparent 70%);
  filter: blur(40px);
  z-index: -1;
  transform: translateY(16px);
}

/* Screen-glass highlight — top edge catches "ambient light" */
.mdp-dashboard-outer::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.22) 40%, rgba(255,255,255,0.22) 60%, transparent 90%);
  border-radius: 18px 18px 0 0;
  z-index: 10;
  pointer-events: none;
}

/* Dashboard container — drop real dashboard inside later */
.mentor-dashboard-preview {
  width: 100%;
  min-height: 420px;
  background: linear-gradient(135deg, #0b1914 0%, #0d1e16 45%, #0a1410 100%);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 48px 96px rgba(0, 0, 0, 0.42),
    0 24px 48px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 0 80px rgba(124, 58, 237, 0.10);
}

.mentor-dashboard-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(26, 122, 74, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Trust card */
.mdp-trust-card {
  position: absolute;
  bottom: 4px;
  right: 0;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 22px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.12),
    0 24px 48px rgba(0, 0, 0, 0.10),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10;
  animation: mdpTrustFloat 5.5s ease-in-out infinite;
  white-space: nowrap;
}

.mdp-avatars {
  display: flex;
  align-items: center;
}

.mdp-avatar {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid #ffffff;
  margin-left: -10px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.mdp-avatar:first-child {
  margin-left: 0;
}

.mdp-trust-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mdp-trust-count {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.mdp-trust-sub {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  line-height: 1.3;
}

.mdp-trust-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 12px rgba(22, 163, 74, 0.40),
    0 0 0 3px rgba(22, 163, 74, 0.12);
}

@keyframes mdpDashboardFloat {
  
}

@keyframes mdpTrustFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1100px) {
  .mdp-container {
    grid-template-columns: 340px 1fr;
    gap: 32px;
  }
}

@media (max-width: 920px) {
  .mdp-container {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .mdp-dashboard-outer {
    transform: none;
    animation: mdpSimpleFloat 5s ease-in-out infinite;
  }
  .mdp-dashboard-outer::before { display: none; }
  .mdp-desc { max-width: 100%; }
}

@media (max-width: 640px) {
  .mdp-section { padding: 60px 14px 72px; }
  .mdp-heading { font-size: clamp(28px, 7.5vw, 38px); letter-spacing: -1.1px; }
  .mdp-cta { width: 100%; align-self: stretch; }
  .mdp-trust-card { position: relative; bottom: auto; right: auto; margin-top: 20px; }
  .mdp-dashboard-stage { padding-bottom: 0; }
}

@keyframes mdpSimpleFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .mdp-dashboard-outer,
  .mdp-trust-card { animation: none !important; }
  .mdp-cta { transition: none; }
}

/* ── iframe wrapper — clean, no dark background bleed ── */
.mdp-iframe-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: #f4f4f2; /* paper — matches dashboard background */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Clean bezel border — purple-tinted, not dark */
.mdp-iframe-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(109, 40, 217, 0.14);
  pointer-events: none;
  z-index: 10;
}

.mdp-iframe {
  display: block;
  border: none;
  pointer-events: auto;
  background: #0c0f13;
  transform-origin: top left;
  backface-visibility: hidden;
}
/* Keep the inactive portal iframe fully hidden (class rule above would
   otherwise override the [hidden] attribute used by the toggle). */
.mdp-iframe[hidden] { display: none !important; }

/* Pause float when user interacts with the dashboard */
.mdp-dashboard-outer:has(.mdp-iframe:hover) {
  animation-play-state: paused;
}

/* Hover: amplify glow + lift shadow */
.mdp-dashboard-outer:hover::before {
  background: radial-gradient(ellipse at center, rgba(109, 58, 237, 0.30) 0%, transparent 70%);
}
.mdp-dashboard-outer:hover .mdp-iframe-wrap {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.14),
    0 8px 24px rgba(0, 0, 0, 0.20),
    0 24px 56px rgba(0, 0, 0, 0.26),
    0 56px 96px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 0 80px rgba(109, 58, 237, 0.14);
}

/* ══════════════════════════════════════════════════════════════════
   DUAL DASHBOARD PREVIEW — native React cards rebuilding the real
   "My Assignments" (user) and "Overview" (admin) screens, with the
   same chrome bar / sidebar nav / content classes, copy, and color
   tokens as public/user-dashboard.html and public/admin-dashboard.html.
   ══════════════════════════════════════════════════════════════════ */
.ddp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  width: 100%;
  align-items: start;
}
@media (max-width: 860px) {
  .ddp-grid { grid-template-columns: 1fr; gap: 20px; }
}

.ddp-card {
  background: #f4f4f2;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0,0,0,.06),
    0 4px 12px rgba(0,0,0,.10),
    0 16px 40px rgba(0,0,0,.13),
    0 0 0 1px rgba(109,40,217,.12);
  cursor: default;
  font-family: "Inter", Arial, Helvetica, sans-serif;
}

/* ── Chrome bar ── */
.ddp-chrome {
  height: 46px;
  background: #14171a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #232a30;
}
.ddp-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: 13.5px;
  color: #fff;
  letter-spacing: .2px;
}
.ddp-brand-leaf { color: #3fae62; font-size: 15px; }
.ddp-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.ddp-body { display: flex !important; min-height: 280px; }

/* ── Sidebar nav (matches .sidebar / .nav-item) ── */
.ddp-sidebar {
  width: 132px;
  flex-shrink: 0;
  background: #14171a;
  display: flex !important;
  flex-direction: column;
  padding: 12px 8px;
  gap: 2px;
  text-align: left;
}
.ddp-nav-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  color: #b9bdc2;
  text-align: left;
}
.ddp-nav-item--active {
  color: #fff;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.ddp-nav-icon { width: 14px; text-align: center; font-size: 12px; flex-shrink: 0; }
.ddp-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Content ── */
.ddp-content {
  flex: 1;
  background: #f4f4f2;
  padding: 16px 18px;
  min-width: 0;
  text-align: left;
}
.ddp-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-bottom: 2px;
  text-align: left;
}
.ddp-title {
  font-size: 15.5px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 14px;
  text-align: left;
}

/* User: notif banner + assigned-detail-card */
.ddp-notif {
  background: linear-gradient(135deg, #e7f4ea, #f4fbf6);
  border: 1.5px solid #bfe6cb;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  text-align: left;
}
.ddp-notif-icon {
  width: 24px; height: 24px; border-radius: 50%;
  background: #1f7a3d; color: #fff; flex-shrink: 0;
  display: flex !important; align-items: center; justify-content: center;
  font-size: 11px;
}
.ddp-notif-title { font-size: 11.5px; font-weight: 700; color: #176030; margin-bottom: 2px; text-align: left; }
.ddp-notif-text { font-size: 10.5px; color: #3c5c46; line-height: 1.5; text-align: left; }

.ddp-assign-card {
  background: #fff;
  border: 1.5px solid #1f7a3d;
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  text-align: left;
}
.ddp-assign-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #1f7a3d;
}
.ddp-assign-title { font-size: 12px; font-weight: 700; margin-bottom: 8px; text-align: left; }
.ddp-dd-row {
  display: flex !important; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid #f1f1ef;
  font-size: 11px; text-align: left;
}
.ddp-dd-row:last-child { border-bottom: none; }
.ddp-dd-row span { color: #6b6b6b; font-weight: 600; }
.ddp-dd-row strong { color: #1a1a1a; font-weight: 700; }
.ddp-danger { color: #c0392b !important; }

/* Admin: ops stats + open projects card */
.ddp-ops-stats {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.ddp-ops-stat {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 8px 10px;
  text-align: left;
}
.ddp-ops-label {
  font-size: 8.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  color: #6b6b6b; text-align: left;
}
.ddp-ops-num { font-size: 18px; font-weight: 800; margin-top: 2px; text-align: left; }

.ddp-open-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 12px 14px;
  text-align: left;
}
.ddp-section-label {
  font-size: 9px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: #6b6b6b; margin-bottom: 8px; text-align: left;
}
.ddp-open-row {
  display: flex !important; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid #f1f1ef;
  font-size: 10.5px; color: #1a1a1a; text-align: left;
}
.ddp-open-row:last-child { border-bottom: none; }
.ddp-status-badge {
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 5px;
  background: #eef2fc; color: #2454c7; letter-spacing: .2px;
}

@media (max-width: 520px) {
  .ddp-sidebar { width: 96px; }
  .ddp-nav-label { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   ADMIN DASHBOARD PREVIEW — full-width iframe embed of
   public/admin-dashboard.html (source of truth for tour + layout)
   ══════════════════════════════════════════════════════════════════ */
.mdp-fw-container--admin {
  max-width: min(1400px, 96vw);
}

.mdp-fw-stage--admin {
  padding: 0;
  width: 100%;
}

.mdp-admin-preview {
  width: 100%;
  text-align: left;
  /* Breathing room on both sides so the dashboard doesn't touch the section edges */
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 56px);
}

/* ── User / Admin portal toggle ── */
.mdp-portal-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 auto 20px;
  background: #14171a;
  border: 1px solid #232a30;
  border-radius: 26px;
}
.mdp-fw-stage--admin { text-align: center; }
.mdp-portal-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 22px;
  border: none;
  border-radius: 22px;
  background: transparent;
  color: #b9bdc2;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.mdp-portal-toggle-btn:hover { color: #fff; background: #232a30; }
.mdp-portal-toggle-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.mdp-portal-toggle-btn--user.is-active {
  background: rgba(63, 174, 98, .22);
  color: #3fae62;
}
.mdp-portal-toggle-btn--admin.is-active {
  background: rgba(109, 91, 208, .24);
  color: #8b76ff;
}

.mdp-dashboard-outer--admin {
  transform: none;
  animation: none;
  border-radius: 16px;
}

.mdp-dashboard-outer--admin::before,
.mdp-dashboard-outer--admin::after {
  display: none;
}

.mdp-iframe-wrap--admin {
  width: 100%;
  height: clamp(440px, 46vw, 560px);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.10),
    0 16px 40px rgba(0, 0, 0, 0.13),
    0 0 0 1px rgba(109, 40, 217, 0.12);
}

.mdp-iframe--admin {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.mdp-dashboard-outer--admin:hover .mdp-iframe-wrap--admin {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.14),
    0 8px 24px rgba(0, 0, 0, 0.20),
    0 24px 56px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 0 80px rgba(109, 58, 237, 0.14);
}

@media (max-width: 860px) {
  .mdp-admin-preview { padding-inline: clamp(12px, 3vw, 28px); }
  .mdp-iframe-wrap--admin {
    height: clamp(420px, 62vw, 520px);
  }
}

@media (max-width: 640px) {
  .mdp-fw-container--admin {
    max-width: 100%;
  }
  .mdp-admin-preview { padding-inline: 10px; }
  .mdp-iframe-wrap--admin {
    height: clamp(400px, 92vw, 500px);
    border-radius: 12px;
  }
}



/* ===== app/sc-hero-workflow.css ===== */
/* ===== Scholar Hero Workflow (animated flow diagram) ===== */

.sc-hero.is-workflow-hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 19% 9%, rgba(0, 122, 61, 0.035) 0 18%, transparent 31%),
    radial-gradient(circle at 58% 98%, rgba(0, 122, 61, 0.03) 0 20%, transparent 36%),
    #fff;
  padding: 1px 20px 44px !important;
  height: 550px;
}

.sc-hero.is-workflow-hero::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0) 18%,
    rgba(255, 255, 255, 0) 82%,
    rgba(255, 255, 255, 0.45)
  );
  pointer-events: none;
  z-index: 10;
}

.sc-hero.is-workflow-hero .sc-dot-left {
  left: 3%;
  top: 17%;
  width: 80px;
  height: 80px;
  opacity: 0.75;
  background-image: none;
}

.sc-hero.is-workflow-hero .sc-dot-left::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #46b982 2px, transparent 2px);
  background-size: 18px 18px;
}

.sc-hero.is-workflow-hero .sc-dot-right {
  right: 3%;
  top: 37%;
  width: 96px;
  height: 96px;
  opacity: 0.55;
  background-image: none;
}

.sc-hero.is-workflow-hero .sc-dot-right::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #46b982 2px, transparent 2px);
  background-size: 20px 20px;
}

.sc-hero.is-workflow-hero .sc-hero-inner {
  /* columns / row gaps / alignment come from the shared skeleton */
  max-width: 1240px;
   padding: 10px 20px 54px !important;
     margin-top: 35px;
  
}

.sc-hero.is-workflow-hero .sc-hero-visual {
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: visible;
}

.sc-hero.is-workflow-hero .sc-hero-content {
  padding: 0 10px !important;
  text-align: left;
  min-width: 0;
  overflow: visible;
  align-self: start;
}

/* Persona switcher */
.sc-hero.is-workflow-hero .sc-persona-toggle {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 0;
  padding: 4px;
  margin-bottom: 24px;
  border-radius: 16px;
  border: 1px solid rgba(13, 43, 26, 0.1);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 28px rgba(13, 43, 26, 0.08);
  overflow: visible;
}

.sc-hero.is-workflow-hero .sc-toggle-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 152px !important;
  height: auto;
  padding: 12px 14px;
  border-radius: 13px;
  font-family: "DM Sans", sans-serif;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.2;
  gap: 8px;
  white-space: nowrap;
}

.sc-hero.is-workflow-hero .sc-toggle-btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0;
  flex-shrink: 0;
}

.sc-hero.is-workflow-hero .sc-toggle-btn span svg {
  width: 16px !important;
  height: 16px !important;
}

.sc-hero.is-workflow-hero .sc-toggle-btn:not(.active) {
  color: #52605f !important;
  background: transparent;
  box-shadow: none;
}

.sc-hero.is-workflow-hero .sc-toggle-btn:not(.active) span svg {
  color: #00a656;
}

.sc-hero.is-workflow-hero .sc-toggle-btn.active {
  color: #fff !important;
  background: linear-gradient(145deg, #009049, #00612f);
  box-shadow: 0 10px 22px rgba(0, 98, 48, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.sc-hero.is-workflow-hero .sc-toggle-btn.active span svg {
  color: #ff8a00;
}

.sc-hero.is-workflow-hero .sc-hero-content h1 {
  max-width: 100%;
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(34px, 3.2vw, 48px) !important;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -1.2px;
  color: #111b16;
  text-shadow: none;
  text-wrap: balance;
}

.sc-hero.is-workflow-hero .sc-hero-content h1 em {
  display: block;
  margin-top: 2px;
  font-family: inherit;
  font-style: normal;
  font-weight: 800;
  color: #2AA737;
  text-shadow: none;
}

.sc-hero.is-workflow-hero .sc-hero-content h1 em::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2AA737 0%, #59DA65 100%);
}

.sc-hero.is-workflow-hero .sc-hero-content p {
  max-width: 100%;
  margin: 16px 0 22px !important;
  font-family: "DM Sans", sans-serif;
  font-size: 15px !important;
  line-height: 1.62;
  font-weight: 500;
  letter-spacing: 0;
  color: #4b5d53;
}

.sc-hero.is-workflow-hero .sc-search-wrap {
  width: min(100%, 520px);
}

.sc-hero.is-workflow-hero .sc-search-box {
  height: 56px;
  padding-left: 18px;
  padding-right: 8px;
  border-radius: 14px;
  border-color: rgba(13, 43, 26, 0.1);
  box-shadow: 0 12px 32px rgba(13, 43, 26, 0.08);
}

.sc-hero.is-workflow-hero .sc-search-icon svg {
  width: 20px;
  height: 20px;
}

.sc-hero.is-workflow-hero .sc-search-box input {
  font-family: "DM Sans", sans-serif;
  font-size: 15px !important;
  letter-spacing: -0.15px;
}

.sc-hero.is-workflow-hero .sc-search-box input::placeholder {
  color: #8a9a92;
  font-weight: 500;
}

.sc-hero.is-workflow-hero .sc-search-box button {
  min-width: 96px;
  height: 44px;
  border-radius: 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px !important;
  font-weight: 700;
  background: linear-gradient(180deg, #2AA737 0%, #1f8a2b 100%);
  box-shadow: 0 10px 22px rgba(26, 122, 74, 0.22);
}

.sc-hero.is-workflow-hero .sc-stats-bar {
  margin-top: 0 !important;
  width: 100%;
  min-height: 96px !important;
  padding: 0 32px !important;
}

/* ===== Fixed design canvas (1030 × 821) scaled to fit ===== */
.schw-viewport {
  position: relative;
  width: 100%;
  overflow: visible;
}

.schw-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  overflow: visible;
}

.schw-workflow-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 1030px;
  height: 821px;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}

.schw-big-orbit {
  fill: none;
  stroke: #dbeee5;
  stroke-width: 1.3;
  stroke-dasharray: 5 7;
}

.schw-connect-line {
  fill: none;
  stroke: #52b77d;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.schw-connect-line.schw-soft {
  stroke: #89d0a8;
}

.schw-flow-pulse {
  fill: none;
  stroke: #008744;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 20 520;
  filter: drop-shadow(0 0 7px rgba(0, 143, 73, 0.36));
  animation: schwFlowPulse 4.7s linear infinite;
}

.schw-joint {
  fill: #fff;
  stroke: #77c99a;
  stroke-width: 2.2;
  filter: drop-shadow(0 3px 5px rgba(0, 88, 42, 0.15));
}

.schw-joint-dot {
  fill: #007a3d;
}

.schw-step-card {
  position: absolute;
  z-index: 4;
  height: 132px;
  background: rgba(255, 255, 255, 0.92);
  border: 1.35px solid #cde3d8;
  border-radius: 19px;
  box-shadow:
    0 17px 28px rgba(0, 45, 22, 0.09),
    inset 0 0 0 1px rgba(255, 255, 255, 0.86);
  display: flex;
  align-items: center;
  backdrop-filter: blur(10px);
  animation: schwCardFloat 5.5s ease-in-out infinite;
}

.schw-card-1 {
  left: 127px;
  top: 163px;
  width: 343px;
}

.schw-card-2 {
  left: 72px;
  top: 344px;
  width: 325px;
  height: 130px;
}

.schw-card-3 {
  left: 133px;
  top: 522px;
  width: 327px;
  height: 150px;
}

.schw-card-4 {
  left: 648px;
  top: 163px;
   
  width: 380px;
  height: 158px;
}

.schw-card-5 {
  left: 729px;
  top: 344px;
  width: 380px;
  height: 158px;
}

.schw-card-6 {
  left: 665px;
  top: 522px;
  width: 380px;
  height: 158px;
}

.schw-card-2,
.schw-card-5 {
  animation-delay: 0.35s;
}

.schw-card-3,
.schw-card-4 {
  animation-delay: 0.7s;
}

.schw-card-6 {
  animation-delay: 1.05s;
}

.schw-step-no {
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #008a46, #005f30);
  color: #fff;
  font-size: 21px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0, 100, 48, 0.24);
  z-index: 3;
}

.schw-card-1 .schw-step-no,
.schw-card-2 .schw-step-no,
.schw-card-3 .schw-step-no {
  left: auto;
  right: -24px;
}

.schw-card-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-left: 30px;
  margin-right: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #008344;
  background: radial-gradient(circle at 35% 28%, #fff 0 26%, #f1fbf6 27% 100%);
  border: 1px solid #d2eadf;
  box-shadow:
    0 12px 20px rgba(0, 64, 31, 0.11),
    inset 0 0 0 7px rgba(216, 244, 228, 0.72);
  flex: 0 0 80px;
}

.schw-card-4 .schw-card-icon,
.schw-card-6 .schw-card-icon {
  margin-left: 31px;
  margin-right: 22px;
}

.schw-card-5 .schw-card-icon {
  margin-left: 31px;
  margin-right: 20px;
}

.schw-card-icon svg {
  width: 43px;
  height: 43px;
  display: block;
  flex-shrink: 0;
}

.schw-card-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.35px;
  line-height: 1.14;
  color: #141b1a;
  margin: 0 0 11px;
}

.schw-card-text {
  font-size: 15px;
  line-height: 1.55;
  color: #52605f;
  font-weight: 500;
  margin: 0;
  max-width: 210px;
}

.schw-card-5 .schw-card-text {
  max-width: 180px;
}

.schw-card-4 .schw-card-text {
  max-width: 180px;
}

.schw-card-6 .schw-card-text {
  max-width: 190px;
}

.schw-central-wrap {
  position: absolute;
  left: 433px;
  top: 291px;
  width: 254px;
  height: 254px;
  border-radius: 50%;
  z-index: 5;
  border: 1.4px dashed rgba(57, 180, 113, 0.44);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: schwSoftFloat 4.5s ease-in-out infinite;
}

.schw-central-wrap::before {
  content: "";
  position: absolute;
  inset: 32px;
  border-radius: 50%;
  border: 1.4px solid rgba(0, 111, 55, 0.18);
  box-shadow: 0 13px 32px rgba(0, 88, 42, 0.09);
}

.schw-central-badge {
  position: relative;
  width: 183px;
  height: 183px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(26, 122, 74, 0.14);
  box-shadow:
    0 10px 28px rgba(13, 43, 26, 0.08),
    0 23px 42px rgba(0, 73, 35, 0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 16px;
  animation: schwCenterBreath 3s ease-in-out infinite;
}

.schw-hub-logo {
  width: 52px;
  height: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.schw-hub-name {
  display: block;
  color: #2AA737;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.schw-hub-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2AA737;
}

/* Animations */
.schw-v1 .schw-big-orbit {
  animation: schwOrbitDash 14s linear infinite;
}

.schw-v1 .schw-joint-dot {
  animation: schwDotPulse 2s ease-in-out infinite;
}

.schw-v1 .schw-joint-dot:nth-of-type(8) {
  animation-delay: 0.25s;
}

.schw-v1 .schw-flow-pulse.schw-p2 {
  animation-delay: 0.75s;
}

.schw-v1 .schw-flow-pulse.schw-p3 {
  animation-delay: 1.5s;
}

.schw-v1 .schw-flow-pulse.schw-p4 {
  animation-delay: 2.25s;
}

.schw-v1 .schw-flow-pulse.schw-p5 {
  animation-delay: 3s;
}

.schw-v1 .schw-flow-pulse.schw-p6 {
  animation-delay: 3.75s;
}

@keyframes schwOrbitDash {
  to {
    stroke-dashoffset: -140;
  }
}

@keyframes schwFlowPulse {
  from {
    stroke-dashoffset: 560;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes schwSoftFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes schwCenterBreath {
  0%,
  100% {
    box-shadow:
      0 10px 28px rgba(13, 43, 26, 0.08),
      0 0 0 0 rgba(26, 122, 74, 0.10);
  }
  50% {
    box-shadow:
      0 14px 36px rgba(13, 43, 26, 0.12),
      0 0 0 10px rgba(26, 122, 74, 0.06);
  }
}

@keyframes schwCardFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes schwDotPulse {
  0%,
  100% {
    r: 4;
    opacity: 1;
  }
  50% {
    r: 6;
    opacity: 0.72;
  }
}

/* ===== Responsive ===== */
@media (min-width: 1100px) {
  .sc-hero.is-workflow-hero .sc-hero-inner {
    grid-template-columns: 58% 42%;
  }
}

@media (max-width: 1024px) {
  .sc-hero.is-workflow-hero .sc-hero-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sc-hero.is-workflow-hero .sc-hero-content {
    order: -1;
    text-align: center;
    padding: 8px 0 24px !important;
  }

  .sc-hero.is-workflow-hero .sc-persona-toggle,
  .sc-hero.is-workflow-hero .sc-search-wrap,
  .sc-hero.is-workflow-hero .sc-hero-content h1,
  .sc-hero.is-workflow-hero .sc-hero-content p {
    margin-left: auto;
    margin-right: auto;
  }

  .sc-hero.is-workflow-hero .sc-hero-content h1 em::after {
    margin-left: auto;
    margin-right: auto;
  }

  .schw-viewport {
    max-width: 720px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .sc-hero.is-workflow-hero {
    padding: 88px 14px 40px !important;
  }

  .sc-hero.is-workflow-hero .sc-persona-toggle {
    flex-direction: column;
    width: 100%;
    padding: 4px;
  }

  .sc-hero.is-workflow-hero .sc-toggle-btn {
    width: 100%;
    min-width: 0 !important;
    padding: 12px 14px;
    font-size: 13px !important;
    white-space: normal;
    text-align: center;
  }

  .sc-hero.is-workflow-hero .sc-hero-content h1 {
    font-size: clamp(30px, 8vw, 36px) !important;
    letter-spacing: -1px;
  }

  .sc-hero.is-workflow-hero .sc-search-box {
    flex-wrap: wrap;
    height: auto;
    padding: 12px;
    gap: 10px;
  }

  .sc-hero.is-workflow-hero .sc-search-box input {
    width: calc(100% - 36px);
    height: 42px;
  }

  .sc-hero.is-workflow-hero .sc-search-box button {
    width: 100%;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .schw-v1 .schw-big-orbit,
  .schw-v1 .schw-central-wrap,
  .schw-v1 .schw-central-badge,
  .schw-v1 .schw-step-card,
  .schw-v1 .schw-joint-dot,
  .schw-v1 .schw-flow-pulse {
    animation: none !important;
  }
}

/* Keep workflow hero typography aligned with expert mode on desktop */
@media (min-width: 1025px) {
  .sc-hero.is-workflow-hero .sc-hero-content h1 {
    font-size: clamp(34px, 3.2vw, 48px) !important;
  }

  .sc-hero.is-workflow-hero .sc-hero-content p {
    font-size: 15px !important;
    margin: 16px 0 22px !important;
  }

  .sc-hero.is-workflow-hero .sc-hero-visual {
    min-height: 0 !important;
  }

  .sc-hero.is-workflow-hero .sc-hero-inner {
    align-items: center !important;
    margin-top: 65px;
  }
}


/* ===== app/mentor-dashboard-promo.css ===== */
/* =====================================================
   MENTOR DASHBOARD PROMO SECTION
   Pixel-perfect match to the uploaded reference image.
===================================================== */

/* ── Section shell ── */
.mdp-section {
  position: relative;
  padding: 88px 20px 96px;
  background: #f8f7ff;
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
}

/* ── Background layers ── */
.mdp-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Fine purple dot grid */
.mdp-bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(124, 58, 237, 0.11) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}

/* Soft blur glows */
.mdp-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.mdp-bg-glow--top {
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse, rgba(139, 92, 246, 0.10) 0%, transparent 70%);
}

.mdp-bg-glow--right {
  top: 10%;
  right: -8%;
  width: 480px;
  height: 480px;
  background: radial-gradient(ellipse, rgba(109, 40, 217, 0.07) 0%, transparent 70%);
}

/* ── Two-column grid ── */
.mdp-container {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.28fr;
  gap: 72px;
  align-items: center;
}

/* ══════════════════════════════════════
   LEFT COLUMN
══════════════════════════════════════ */
.mdp-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Badge row: "NEW" + "Mentor Dashboard ✨" */
.mdp-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.mdp-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 999px;
  background: #7c3aed;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.mdp-badge-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1f2937;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.1px;
}

/* Heading */
.mdp-heading {
  margin: 0 0 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(36px, 3.8vw, 52px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -1.6px;
  color: #111827;
}

.mdp-heading em {
  display: block;
  font-style: normal;
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Description */
.mdp-desc {
  margin: 0 0 28px;
  max-width: 420px;
  font-size: 16px;
  line-height: 1.68;
  color: #6b7280;
  font-weight: 400;
}

/* Feature checklist card */
.mdp-features {
  background: #ffffff;
  border-radius: 18px;
  padding: 26px 30px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.04),
    0 12px 36px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 32px;
  transition: box-shadow 0.3s ease;
}

.mdp-features:hover {
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.04),
    0 18px 48px rgba(124, 58, 237, 0.10);
}

.mdp-feature-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mdp-feature-check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #7c3aed;
  display: grid;
  place-items: center;
}

.mdp-feature-text {
  color: #1f2937;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

/* CTA button */
.mdp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 58px;
  padding: 0 36px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  color: #ffffff;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -0.2px;
  box-shadow:
    0 10px 28px rgba(124, 58, 237, 0.38),
    0 4px 8px rgba(124, 58, 237, 0.18);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  align-self: flex-start;
}

.mdp-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px rgba(124, 58, 237, 0.48),
    0 6px 12px rgba(124, 58, 237, 0.22);
}

/* ══════════════════════════════════════
   RIGHT COLUMN — DASHBOARD STAGE
══════════════════════════════════════ */
.mdp-right {
  position: relative;
}

.mdp-dashboard-stage {
  position: relative;
}

/* 3-D perspective outer wrapper */
.mdp-dashboard-outer {
  transform: perspective(1100px) rotateY(-7deg) rotateX(4deg);
  transform-style: preserve-3d;
  will-change: transform;
  animation: mdpDashboardFloat 4.5s ease-in-out infinite;
  border-radius: 20px;
}

/* The actual preview container — real dashboard replaces children later */
.mentor-dashboard-preview {
  width: 100%;
  min-height: 420px;
  background:
    linear-gradient(135deg, #0b1914 0%, #0d1e16 40%, #0a1410 100%);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 48px 96px rgba(0, 0, 0, 0.40),
    0 24px 48px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 0 80px rgba(124, 58, 237, 0.08);

  /* Placeholder shimmer when empty */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Empty-state gradient when no children */
.mentor-dashboard-preview:empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(26, 122, 74, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(124, 58, 237, 0.06) 0%, transparent 50%);
}

/* ── Floating trust card ── */
.mdp-trust-card {
  position: absolute;
  bottom: -28px;
  right: -8px;
  background: #ffffff;
  border-radius: 22px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.07),
    0 24px 56px rgba(0, 0, 0, 0.12);
  z-index: 10;
  animation: mdpTrustFloat 5.5s ease-in-out infinite;
  white-space: nowrap;
}

/* Avatar stack */
.mdp-avatars {
  display: flex;
  align-items: center;
}

.mdp-avatar {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid #ffffff;
  margin-left: -10px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.mdp-avatar:first-child {
  margin-left: 0;
}

/* Trust info text */
.mdp-trust-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mdp-trust-count {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.mdp-trust-sub {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  line-height: 1.3;
}

/* Growth icon */
.mdp-trust-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #16a34a;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.32);
}

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
@keyframes mdpDashboardFloat {
  0%,
  100% {
    transform: perspective(1100px) rotateY(-7deg) rotateX(4deg) translateY(0);
  }
  50% {
    transform: perspective(1100px) rotateY(-7deg) rotateX(4deg) translateY(-8px);
  }
}

@keyframes mdpTrustFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1100px) {
  .mdp-container {
    grid-template-columns: 1fr 1.1fr;
    gap: 48px;
  }
}

@media (max-width: 900px) {
  .mdp-container {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .mdp-dashboard-outer {
    transform: perspective(1100px) rotateY(-4deg) rotateX(2deg);
    animation: mdpDashboardFloatMobile 4.5s ease-in-out infinite;
  }

  .mdp-desc {
    max-width: 100%;
  }

  .mdp-trust-card {
    bottom: -20px;
    right: 12px;
  }
}

@keyframes mdpDashboardFloatMobile {
  0%,
  100% {
    transform: perspective(1100px) rotateY(-4deg) rotateX(2deg) translateY(0);
  }
  50% {
    transform: perspective(1100px) rotateY(-4deg) rotateX(2deg) translateY(-6px);
  }
}

@media (max-width: 640px) {
  .mdp-section {
    padding: 64px 16px 80px;
  }

  .mdp-heading {
    font-size: clamp(32px, 9vw, 42px);
    letter-spacing: -1.2px;
  }

  .mdp-dashboard-outer {
    transform: none;
    animation: mdpSimpleFloat 4.5s ease-in-out infinite;
  }

  .mentor-dashboard-preview {
    min-height: 300px;
  }

  .mdp-cta {
    width: 100%;
    align-self: stretch;
  }

  .mdp-trust-card {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 20px;
    display: inline-flex;
    animation: mdpTrustFloat 5.5s ease-in-out infinite;
  }
}

@keyframes mdpSimpleFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mdp-dashboard-outer,
  .mdp-trust-card {
    animation: none !important;
  }
  .mdp-cta {
    transition: none;
  }
}


/* ===== app/video-fixes.css ===== */
/* ── Hero background video: clearer, less washed out ── */

[data-theme="light"] {
  --hero-overlay: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.06) 35%,
    rgba(255, 255, 255, 0.22) 70%,
    rgba(255, 255, 255, 0.98) 100%
  );
}

[data-theme="dark"] {
  --hero-overlay: linear-gradient(
    to bottom,
    rgba(8, 15, 11, 0.22) 0%,
    rgba(8, 15, 11, 0.12) 38%,
    rgba(8, 15, 11, 0.42) 72%,
    rgba(8, 15, 11, 1) 100%
  );
}

.video-vignette {
  background: radial-gradient(
    ellipse at 50% 42%,
    transparent 45%,
    rgba(0, 0, 0, 0.1) 100%
  ) !important;
}

[data-theme="light"] .video-vignette {
  background: radial-gradient(
    ellipse at 50% 42%,
    transparent 50%,
    rgba(10, 40, 20, 0.08) 100%
  ) !important;
}

[data-theme="light"] .video-wrap video {
  filter: saturate(1.22) brightness(1.02) contrast(1.1) !important;
}

[data-theme="dark"] .video-wrap video {
  filter: saturate(1.08) brightness(0.95) contrast(1.08) !important;
}

[data-theme="light"] .arc-fade-band {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 60%,
    rgba(255, 255, 255, 0.92) 100%
  ) !important;
}

[data-theme="dark"] .arc-fade-band {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(8, 15, 11, 0.35) 55%,
    rgba(8, 15, 11, 0.9) 100%
  ) !important;
}

/* ── How It Works: framed video, fully visible ── */

.workflow-inner {
  align-items: stretch;
}

.wf-video-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 56px 48px 32px;
  min-height: 680px;
  overflow: visible;
}

.wf-video-col .wf-progress-bar {
  position: absolute;
  top: 0;
  left: 32px;
  right: 56px;
  z-index: 6;
}

.wf-video-frame {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  background: #0c1812;
  border: 1px solid rgba(34, 160, 90, 0.28);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.18),
    0 8px 28px rgba(26, 122, 74, 0.12);
  z-index: 2;
}

[data-theme="light"] .wf-video-frame {
  background: #0a1610;
  border-color: rgba(26, 122, 74, 0.22);
  box-shadow:
    0 28px 70px rgba(26, 122, 74, 0.14),
    0 4px 20px rgba(0, 0, 0, 0.08);
}

.wf-video-col .wf-video {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
  z-index: 1;
}

[data-theme="light"] .wf-video-col .wf-video {
  filter: saturate(1.15) brightness(1.05) contrast(1.08) !important;
}

[data-theme="dark"] .wf-video-col .wf-video {
  filter: saturate(1.1) brightness(1) contrast(1.06) !important;
}

/* Remove heavy washes over the process video */
.wf-video-col::before,
.wf-video-col .wf-glow,
.wf-video-col .wf-grain,
.wf-video-col .wf-bottom-fade {
  display: none !important;
}

.wf-video-col .wf-chip {
  z-index: 8;
}

.wf-video-col .wf-chip-tl {
  top: 56px;
  left: 40px;
}

.wf-video-col .wf-chip-tr {
  top: 56px;
  right: 64px;
}

.wf-video-col .wf-chip-br {
  bottom: auto;
  top: calc(50% + 140px);
  right: 64px;
}

.wf-video-col .wf-video-label {
  position: relative;
  bottom: auto;
  left: auto;
  margin-top: 20px;
  align-self: flex-start;
  z-index: 5;
}

[data-theme="light"] .wf-video-col .wfvl-text {
  color: #0d2b1a;
  text-shadow: none;
}

@media (max-width: 900px) {
  .wf-video-col {
    min-height: auto;
    padding: 32px 24px 48px;
  }

  .wf-video-col .wf-progress-bar {
    left: 24px;
    right: 24px;
  }

  .wf-video-frame {
    max-width: 100%;
    aspect-ratio: 16 / 11;
  }

  .wf-video-col .wf-chip-tl,
  .wf-video-col .wf-chip-tr {
    top: 40px;
  }

  .wf-video-col .wf-chip-br {
    top: auto;
    bottom: 120px;
    right: 24px;
  }
}


/* ===== app/responsive.css ===== */
/* ═══════════════════════════════════════════════════════
   ScholarsColab — global responsive overrides
   Breakpoints: 1200 | 1024 | 768 | 480
═══════════════════════════════════════════════════════ */

html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

/* ── Theme switcher ── */
@media (max-width: 1024px) {
  .nav-actions {
    gap: 8px;
  }

  .theme-switch--nav {
    padding: 2px;
  }
}

@media (max-width: 640px) {
  .theme-switch--nav {
    padding: 2px;
  }

  .theme-switch--nav .theme-btn {
    padding: 4px 10px;
    font-size: 11px;
  }

  .nav-actions .btn-login {
    padding: 8px 14px;
    font-size: 12px;
  }
}

/* ── Hero ── */
@media (max-width: 1024px) {
  .hero-section {
    padding: 120px 24px 0 !important;
  }

  .hero-stats {
    gap: 32px 40px;
    flex-wrap: wrap;
    padding-top: 32px !important;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 108px 16px 0 !important;
  }

  .tab-toggle {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    margin-bottom: 28px !important;
  }

  .tab-btn {
    padding: 10px 18px !important;
    font-size: 13px !important;
  }

  .hero-sub {
    font-size: 15px !important;
    padding: 0 4px;
  }

  .search-bar {
    flex-direction: column;
    align-items: stretch;
    border-radius: 20px !important;
    padding: 12px !important;
    max-width: 100% !important;
  }

  .search-bar input {
    padding: 8px 4px !important;
    text-align: center;
  }

  .search-bar .btn-search {
    width: 100%;
    margin-top: 4px;
  }

  .hero-stats {
    gap: 20px 28px;
    justify-content: center;
  }

  .stat-num {
    font-size: 22px !important;
  }

  .stat-label {
    font-size: 10px !important;
  }

  .stat-div {
    display: none;
  }

  .stat-item {
    min-width: calc(50% - 20px);
  }

  .hero-arc {
    margin-top: 40px !important;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding-top: 100px !important;
  }

  .stat-item {
    min-width: 45%;
  }

  .scholar-hint,
  .expert-hint {
    font-size: 11px !important;
    padding: 5px 12px !important;
  }
}

/* ── Ticker / Trusted by ── */
@media (max-width: 768px) {
  .ticker-section {
    padding: 14px 0 !important;
  }

  .ticker-label {
    padding: 0 16px !important;
    font-size: 14px !important;
  }

  .ticker-logo-item {
    padding: 0 24px !important;
  }

  .ticker-logo-item img {
    height: 34px !important;
    max-width: 140px !important;
  }

  .tick {
    padding: 5px 12px !important;
    font-size: 12px !important;
    margin: 0 3px !important;
  }
}

/* ── Stats band ── */
@media (max-width: 1024px) {
  .stats-band {
    padding: 56px 24px 48px !important;
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 24px;
  }

  .sband-item {
    padding: 0 16px !important;
    border-right: none !important;
  }

  .sband-desc {
    max-width: none !important;
  }
}

@media (max-width: 560px) {
  .stats-row {
    grid-template-columns: 1fr !important;
  }

  .sband-item {
    padding: 0 !important;
  }
}

/* ── Value props ── */
@media (max-width: 1024px) {
  .value-section {
    padding: 40px 0 44px !important;
  }

  .value-inner {
    padding: 0 24px !important;
  }

  .value-top {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 20px;
  }

  .value-cols {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 20px !important;
  }

  .value-col {
    padding: 0 !important;
    border-right: none !important;
  }

  .value-col:not(:first-child) {
    padding-left: 0 !important;
  }
}

@media (max-width: 640px) {
  .value-cols {
    grid-template-columns: 1fr !important;
  }

  .value-col-text {
    max-width: none !important;
  }
}

/* ── How it works ── */
@media (max-width: 1024px) {
  .workflow-inner {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .wf-content {
    padding: 56px 24px 32px !important;
  }

  .wf-video-col {
    min-height: auto !important;
    padding: 24px 24px 48px !important;
  }

  .wf-video-col .wf-progress-bar {
    left: 24px;
    right: 24px;
  }

  .wf-video-frame {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .wf-content {
    padding: 48px 16px 24px !important;
  }

  .wf-video-col {
    padding: 16px 16px 40px !important;
  }

  .wf-video-col .wf-chip {
    display: none;
  }

  .wf-video-col .wf-progress-bar {
    left: 16px;
    right: 16px;
  }

  .wf-sub {
    max-width: none !important;
  }
}

/* ── Mentor spotlight ── */
@media (max-width: 1024px) {
  .ai-director-section {
    padding-top: 56px !important;
  }

  .adir-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 40px 24px 32px !important;
    min-height: auto !important;
  }

  .adir-left {
    flex: none !important;
    width: 100%;
    padding-right: 0 !important;
    margin-bottom: 24px;
  }

  .adir-left p {
    max-width: none !important;
  }

  .adir-slider-viewport {
    width: 100%;
    height: 260px !important;
  }
}

@media (max-width: 640px) {
  .adir-hero {
    padding: 32px 16px 24px !important;
  }

  .adir-slider-viewport {
    height: 220px !important;
  }

  .adir-profile-card {
    width: 140px !important;
    height: 200px !important;
  }

  .adir-profile-card.featured {
    width: 156px !important;
    height: 216px !important;
  }
}

/* ── Featured simulations ── */
@media (max-width: 1200px) {
  .sims-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 24px !important;
  }
}

@media (max-width: 640px) {
  .sims-section {
    padding: 56px 0 !important;
  }

  .sims-grid {
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
    gap: 16px !important;
  }

  .sec-header {
    padding: 0 16px !important;
    margin-bottom: 36px !important;
  }

  .sim-footer {
    flex-wrap: wrap;
    gap: 10px;
  }

  .sim-btn {
    width: 100%;
    text-align: center;
  }
}

/* ── CTA ── */
@media (max-width: 1024px) {
  .cta-section {
    padding: 72px 24px !important;
  }

  .cta-inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .cta-card-stack {
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .cta-section {
    padding: 56px 16px !important;
  }

  .cta-email-row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .cta-primary-btn {
    width: 100%;
    padding: 14px 20px !important;
  }

  .cta-floating-card {
    padding: 12px 14px !important;
  }

  .cfc-text {
    font-size: 12px !important;
  }
}

/* ── Footer ── */
@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 56px 24px 40px !important;
  }

  .footer-links-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px 20px !important;
  }

  .gallery-dp-main {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .gallery-dp-main--center {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: none !important;
  }
}

@media (max-width: 640px) {
  .footer-top {
    padding: 48px 16px 32px !important;
  }

  .footer-links-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-trusted {
    border-radius: 20px 20px 0 0;
    padding: 42px 16px 48px;
  }

  .footer-trusted-title {
    font-size: 28px;
  }

  .gallery-dp-main,
  .gallery-dp-main--center {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .img_dp {
    min-height: 78px;
    padding: 10px 12px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 16px;
    padding: 20px 16px !important;
  }

  .foot-legal {
    flex-wrap: wrap;
    gap: 12px 16px;
  }
}

/* ── Section headers (shared) ── */
@media (max-width: 768px) {
  .sec-header {
    padding: 0 16px !important;
    margin-bottom: 40px !important;
  }
}

/* ── Misc grids (mentors / testimonials if enabled) ── */
@media (max-width: 1024px) {
  .mentors-grid,
  .testi-grid {
    grid-template-columns: 1fr !important;
    padding: 0 24px !important;
  }
}

@media (max-width: 900px) {
  .mentors-grid {
    max-width: 420px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ===== app/globals.css (own rules) ===== */







/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.footer-links-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
  .footer-links-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.foot-logo .logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
}

.nav-links a.nav-link-active {
  background: var(--green-glow);
  color: var(--green);
  font-weight: 600;
}

.app-icon,
.brand-icon {
  display: inline-flex;
  vertical-align: middle;
  flex-shrink: 0;
  transition: transform 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.brand-icon--mentors { color: #14b8a6; }
.brand-icon--code { color: #3b82f6; }
.brand-icon--scholar { color: #f97316; }
.brand-icon--video { color: #ef4444; }
.brand-icon--success { color: #22c55e; }
.brand-icon--brand { color: #2AA737; }
.brand-icon--neutral { color: #64748b; }
.brand-icon--rating { color: #f59e0b; }

.value-icon,
.sc-stat-icon,
.scholar-icon,
.trust-icon,
.mentor-node-icon {
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.value-icon--mentors,
.sc-stat-icon--mentors,
.scholar-icon--mentors,
.trust-icon--mentors,
.mentor-node-icon--mentors {
  color: #14b8a6;
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.22);
}

.value-icon--code,
.sc-stat-icon--code,
.scholar-icon--code,
.trust-icon--code,
.mentor-node-icon--code {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.22);
}

.value-icon--scholar,
.sc-stat-icon--scholar,
.scholar-icon--scholar,
.trust-icon--scholar,
.mentor-node-icon--scholar {
  color: #f97316;
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.22);
}

.value-icon--video,
.sc-stat-icon--video,
.scholar-icon--video,
.trust-icon--video,
.mentor-node-icon--video {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.22);
}

.value-icon--success,
.sc-stat-icon--success,
.scholar-icon--success,
.trust-icon--success,
.mentor-node-icon--success {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.22);
}

.value-icon--brand,
.sc-stat-icon--brand,
.scholar-icon--brand,
.trust-icon--brand,
.mentor-node-icon--brand {
  color: #2AA737;
  background: rgba(26, 122, 74, 0.1);
  border-color: rgba(26, 122, 74, 0.2);
}

.value-icon--rating,
.sc-stat-icon--rating,
.trust-icon--rating {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.22);
}

.value-col:hover .value-icon,
.sc-stat-item:hover .sc-stat-icon,
.scholar-card:hover .scholar-icon,
.trust-item:hover .trust-icon,
.mentor-node:hover .mentor-node-icon {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 24px rgba(13, 43, 26, 0.1);
}

.scholar-card.is-flow-active .scholar-icon {
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(26, 122, 74, 0.18);
}

.secure-card .scholar-icon {
  color: #ffffff !important;
  background: #2AA737 !important;
  border-color: #2AA737 !important;
}

@media (prefers-reduced-motion: reduce) {
  .app-icon,
  .brand-icon,
  .value-icon,
  .sc-stat-icon,
  .scholar-icon,
  .trust-icon,
  .mentor-node-icon {
    transition: none;
  }
}

.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.star-rating__filled {
  color: #f5a623;
}

.star-rating__empty {
  color: currentColor;
  opacity: 0.35;
}

.rating-with-star {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.inline-icon-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chip-icon-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chip-close-icon {
  margin-left: 4px;
  opacity: 0.75;
}

.vid-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vs-trend-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vs-num-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}



/* ---- conversion helpers (added by the WP template, not in the React CSS) ---- */
.sc-home-react .sc-is-hidden { display: none !important; }

/* sc-home-react full-bleed — let the full-width sections span edge-to-edge even
   if the theme wraps page content in a narrower centered container. If your
   theme's page area is already full width and this causes a horizontal scroll,
   delete this rule. */
.sc-home-react {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: hidden;
}
/* No fixed React navbar now — the theme header sits above, so drop the hero's
   old nav-clearance padding. Tune this if you want more/less gap under the header. */
.sc-home-react .sc-hero { padding-top: 40px; }

/* ======================================================================
   ROUND 3 — FLATTEN ALL "SLOPES": remove the 3D perspective tilt on the
   dashboard and the curved SVG / wave dividers so every section reads as a
   flat, straight, linear block. Last in the stylesheet, so these win.
   ====================================================================== */

/* 1) Dashboard was tilted (perspective + rotateY -7deg + float animation).
      Force it perfectly flat and still. */
.sc-home-react .mdp-dashboard-outer,
.sc-home-react .mdp-dashboard-outer--admin,
.sc-home-react .mdp-tilt-card,
.sc-home-react .mdp-fw-stage,
.sc-home-react .mdp-admin-preview {
  transform: none !important;
  -webkit-transform: none !important;
  animation: none !important;
  perspective: none !important;
}
/* kill the tilt glow / highlight pseudo-layers that assumed a 3D card */
.sc-home-react .mdp-dashboard-outer::before,
.sc-home-react .mdp-dashboard-outer::after,
.sc-home-react .mdp-fw-glare { display: none !important; }

/* 2) Curved / wave section dividers → gone, so section ends are straight lines. */
.sc-home-react .adir-arc { display: none !important; }
.sc-home-react .sc-hero-wave,
.sc-home-react .expert-projects-bg-wave { display: none !important; }

/* 3) Belt-and-suspenders: neutralise any leftover 3D transform on section
      wrappers / iframe frames so content sits on a true horizontal baseline. */
.sc-home-react section,
.sc-home-react .persona-panel,
.sc-home-react .mdp-iframe-wrap,
.sc-home-react .mdp-iframe-wrap--admin {
  transform: none !important;
}

/* ======================================================================
   ROUND 4 — EXPERT HERO: swap the two halves so the text/content sits on
   the LEFT and the workflow diagram on the RIGHT (mirror of the original).
   Desktop only (>=1025px); mobile keeps the single-column stack.
   ====================================================================== */
@media (min-width: 1025px) {
  .sc-home-react .sc-hero.is-expert-mode .sc-hero-inner {
    /* content column first (left), diagram column second (right) */
    grid-template-columns: 1fr var(--sc-col-diagram);
    grid-template-areas:
      "toggle  label"
      "content diagram"
      "bottom  bottom";
  }
  /* toggle now sits above the content on the left → left-align it */
  .sc-home-react .sc-hero.is-expert-mode .sc-hero-toggle-slot {
    justify-content: flex-start;
  }
  /* eyebrow now sits above the diagram on the right → right-align it */
  .sc-home-react .sc-hero.is-expert-mode .sc-hero-eyebrow {
    justify-content: flex-end;
  }
  /* content moved left: give it right padding (was left) and top-align */
  .sc-home-react .sc-hero.is-expert-mode .sc-hero-content {
    padding: 0 12px 0 0 !important;
  }
  /* diagram moved right: mirror its small horizontal nudge */
  .sc-home-react .sc-hero.is-expert-mode .sc-hero-visual {
    margin-left: 0;
    margin-right: -10px;
  }
  /* trust line (full-width bottom row) now sits under the LEFT content,
     so drop the indent that used to push it under the right column */
  .sc-home-react .sc-hero.is-expert-mode .sc-hero-bottom .sc-expert-trust {
    margin-left: 0;
  }
}

/* ======================================================================
   ROUND 11 — SCHOLAR HERO ("I need a Researcher") now shares the EXACT
   same grid skeleton as the expert hero: content on the LEFT, workflow
   diagram on the RIGHT, toggle pinned top-LEFT. Because both persona
   heroes place the toggle (and every row) in the identical cell, switching
   tabs no longer shifts the toggle or reflows the columns — the layout is
   frozen and only the inner content swaps. Desktop only (>=1025px); mobile
   keeps the single-column stack. Higher specificity (.sc-home-react …) wins
   over the earlier "58% 42%" workflow rule.
   ====================================================================== */
@media (min-width: 1025px) {
  .sc-home-react .sc-hero.is-workflow-hero .sc-hero-inner {
    /* content column first (left), diagram column second (right) — matches expert */
    grid-template-columns: 1fr var(--sc-col-diagram) !important;
    grid-template-areas:
      "toggle  label"
      "content diagram"
      "bottom  bottom" !important;
  }
  /* toggle pinned top-left, exactly where the expert tab shows it → no jump on switch */
  .sc-home-react .sc-hero.is-workflow-hero .sc-hero-toggle-slot {
    justify-content: flex-start;
  }
  /* eyebrow (empty on scholar) sits above the diagram on the right */
  .sc-home-react .sc-hero.is-workflow-hero .sc-hero-eyebrow {
    justify-content: flex-end;
  }
  /* content moved left: right padding (was left), top-aligned like expert */
  .sc-home-react .sc-hero.is-workflow-hero .sc-hero-content {
    padding: 0 12px 0 0 !important;
    text-align: left;
    align-self: start;
  }
  /* diagram moved right: mirror the small horizontal nudge */
  .sc-home-react .sc-hero.is-workflow-hero .sc-hero-visual {
    margin-left: 0;
    margin-right: -10px;
  }
}

/* ======================================================================
   ROUND 6 — Expert projects rebuilt as a CSS ticker marquee + topic
   filter shelf + clean stats grid (uploaded "Circuit Grid" layout &
   animation, restyled into the ScholarsColab green / light theme).
   ====================================================================== */

/* Rail — clean auto-scrolling ticker with faded edges (no nav buttons) */
.sc-home-react .expert-projects-carousel {
  position: relative;
  overflow: hidden;
  padding: 18px 0 24px;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.sc-home-react .expert-projects-carousel .epc-nav { display: none !important; }

/* Track — flex row, duplicated in JS, driven by a translateX(-50%) marquee */
.sc-home-react .expert-projects-track {
  display: flex;
  gap: 20px;
  width: max-content;
  overflow: visible;
  padding: 6px 4px;
  scroll-snap-type: none;
  -webkit-mask-image: none;
  mask-image: none;
  animation: epTicker 46s linear infinite;
}
.sc-home-react .expert-projects-carousel:hover .expert-projects-track { animation-play-state: paused; }
@keyframes epTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Cards — premium, elegant tiles (matches Mentor-card polish) */
.sc-home-react .expert-projects-carousel .expert-project-card.ep-job {
  flex: 0 0 316px;
  width: 316px;
  scroll-snap-align: none;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  border: 1px solid rgba(13,43,26,.08);
  border-radius: 20px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfefc 100%);
  box-shadow:
    0 1px 2px rgba(13,43,26,.05),
    0 10px 30px rgba(13,43,26,.06);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
/* Full-height brand accent rail on the left (always visible, grows on hover) */
.sc-home-react .expert-project-card.ep-job::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #2AA737, #59DA65);
  opacity: .35;
  transition: opacity .3s ease, width .3s ease;
}
/* Soft radial glow that blooms from the top-right on hover */
.sc-home-react .expert-project-card.ep-job::after {
  content: ""; position: absolute; top: -50%; right: -40%;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(89,218,101,.18) 0%, transparent 65%);
  opacity: 0; transform: scale(.6);
  transition: opacity .4s ease, transform .55s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.sc-home-react .expert-project-card.ep-job:hover {
  transform: translateY(-6px);
  border-color: rgba(22,135,72,.34);
  box-shadow:
    0 2px 4px rgba(13,43,26,.05),
    0 24px 48px rgba(13,43,26,.14),
    0 0 0 1px rgba(22,135,72,.08);
}
.sc-home-react .expert-project-card.ep-job:hover::before { opacity: 1; width: 5px; }
.sc-home-react .expert-project-card.ep-job:hover::after { opacity: 1; transform: scale(1); }
@keyframes epCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sc-home-react .ep-job.ep-in { animation: epCardIn .5s cubic-bezier(.16,1,.3,1) both; }

/* Top row — badge + posted time */
.sc-home-react .ep-job__badge {
  padding: 5px 13px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(135deg, #2AA737, #1f8a2b); color: #fff;
  box-shadow: 0 3px 10px rgba(22,135,72,.28);
}
.sc-home-react .ep-job__badge--muted {
  background: #eef7f0; color: #1f8a5a;
  box-shadow: none; border: 1px solid rgba(22,135,72,.18);
}
.sc-home-react .ep-job__posted { color: #94a3b8; font-size: 12px; font-weight: 600; }

/* Title */
.sc-home-react .ep-job.ep-job .ep-job__title {
  margin: 2px 0 14px; font-size: 16.5px; line-height: 1.34; font-weight: 800;
  letter-spacing: -.2px; color: #0f2e1e;
}

/* "N Interested Mentors" — soft chip */
.sc-home-react .ep-job__mentors {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  margin: 0 0 14px; padding: 5px 12px 5px 9px; border-radius: 999px;
  background: rgba(42,167,55,.08); border: 1px solid rgba(42,167,55,.16);
  font-size: 12px; font-weight: 700; color: #33604a;
}
.sc-home-react .ep-job__mentors-ic { display: inline-flex; color: #2AA737; }
.sc-home-react .ep-job__mentors-ic svg { width: 15px; height: 15px; }
.sc-home-react .ep-job__mentors b { color: #1f8a2b; font-weight: 800; }

/* Tag chips */
.sc-home-react .ep-job__tags { gap: 7px; margin-bottom: 18px; }
.sc-home-react .ep-job__tag {
  padding: 5px 11px; border-radius: 8px;
  background: #f4f8f5; color: #5b6b63; border: 1px solid rgba(13,43,26,.06);
  font-size: 11px; font-weight: 700;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.sc-home-react .expert-project-card.ep-job:hover .ep-job__tag {
  background: #eef7f0; color: #2AA737; border-color: rgba(42,167,55,.2);
}

/* CTA — full-width, fills green on hover, arrow slides */
.sc-home-react .ep-job__cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; margin-top: auto; align-self: stretch;
  padding: 12px 16px; gap: 8px;
  background: transparent; color: #1f8a2b;
  border: 1.6px solid rgba(42,167,55,.5); border-radius: 12px;
  font-size: 13.5px; font-weight: 800;
  box-shadow: none;
  transition: background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.sc-home-react .ep-job__cta:hover {
  background: linear-gradient(135deg, #2AA737, #1f8a2b); color: #ffffff; transform: none;
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(22,135,72,.32);
}
.sc-home-react .ep-job__cta svg { transition: transform .2s ease; }
.sc-home-react .ep-job__cta:hover svg { transform: translateX(4px); }

/* Filter shelf — topic tabs with live counts, "See all" pushed right */
.sc-home-react .expert-projects-toolbar .ep-filter {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  flex: 1 1 auto; min-width: 0;
}
.sc-home-react .ep-filter-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 9px 9px 16px; border-radius: 999px;
  border: 1px solid rgba(13,43,26,.12); background: #ffffff;
  color: #33463d; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: transform .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.sc-home-react .ep-filter-btn:hover {
  transform: translateY(-2px); color: #2AA737;
  border-color: rgba(22,135,72,.42); box-shadow: 0 8px 18px rgba(22,135,72,.12);
}
.sc-home-react .ep-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: #eef2f0; color: #64748b; font-size: 11px; font-weight: 800;
  transition: background .18s ease, color .18s ease;
}
.sc-home-react .ep-filter-btn.is-active {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, #2AA737 0%, #12613a 100%);
  box-shadow: 0 8px 20px rgba(22,135,72,.3);
}
.sc-home-react .ep-filter-btn.is-active .ep-filter-count { background: rgba(255,255,255,.22); color: #fff; }

/* Stats — clean bordered 3-up grid, count-up numbers in brand green */
.sc-home-react .expert-stats-band {
  margin-top: 42px; display: flex; gap: 0; padding: 0;
  border: 1px solid rgba(13,43,26,.1); border-radius: 16px;
  background: #ffffff; box-shadow: 0 14px 36px rgba(13,43,26,.06);
  overflow: hidden;
}
.sc-home-react .expert-stats-band::before,
.sc-home-react .expert-stats-band::after { content: none; display: none; }
.sc-home-react .expert-stats-band__arrow { display: none; }
.sc-home-react .expert-stats-band__inner {
  flex: 1; display: grid; grid-template-columns: repeat(3, 1fr);
}
.sc-home-react .expert-stats-item {
  padding: 30px 22px; text-align: center;
  border-right: 1px solid rgba(13,43,26,.08);
  transition: background .25s ease;
}
.sc-home-react .expert-stats-item:last-child { border-right: 0; }
.sc-home-react .expert-stats-item:hover { background: #f6faf7; transform: none; }
.sc-home-react .expert-stats-item__num {
  font-family: 'DM Sans', sans-serif; font-weight: 800;
  font-size: clamp(30px, 4vw, 46px); letter-spacing: -1px;
  color: #2AA737; background: none; -webkit-text-fill-color: #2AA737; filter: none;
}
.sc-home-react .expert-stats-item__label {
  margin-top: 8px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #64748b;
}

@media (max-width: 760px) {
  .sc-home-react .expert-projects-carousel {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
  .sc-home-react .expert-stats-band__inner { grid-template-columns: 1fr; }
  .sc-home-react .expert-stats-item { border-right: 0; border-bottom: 1px solid rgba(13,43,26,.08); }
  .sc-home-react .expert-stats-item:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-home-react .expert-projects-track { animation: none; }
  .sc-home-react .ep-job.ep-in { animation: none; }
}

/* ======================================================================
   ROUND 7 — Mentor Spotlight: cinematic 3-up slider (like the uploaded
   "AI Director" reference). 3 cards visible, center card enlarged + glowing,
   side cards smaller and dimmed. Same content, same auto-scroll animation.
   ====================================================================== */

/* Taller stage, centred, softer edge fade so it reads as 3 cards */
.sc-home-react .adir-slider-viewport {
  height: 360px;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%) !important;
  mask-image: linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%) !important;
}
.sc-home-react .adir-slider-track { gap: 24px; align-items: center; }

/* One consistent card size (the highlight comes from the moving centre,
   not a fixed "featured" card) */
.sc-home-react .adir-profile-card,
.sc-home-react .adir-profile-card.featured {
  width: 226px;
  height: 300px;
}

/* Resting state — slightly shrunk + dimmed so the centre card stands out */
.sc-home-react .adir-card-inner {
  border-radius: 22px !important;
  border: 1px solid rgba(52,211,110,.22) !important;
  background: linear-gradient(165deg, #10371f 0%, #0b2416 55%, #08190f 100%) !important;
  box-shadow: 0 16px 36px rgba(6,20,12,.32) !important;
  transform: scale(.9);
  opacity: .7;
  transition: transform .55s cubic-bezier(.34,1.4,.64,1), opacity .45s ease,
              border-color .4s ease, box-shadow .4s ease !important;
}

/* Centre (or hovered) card — enlarged, bright, green glow ring */
.sc-home-react .adir-profile-card.center-active .adir-card-inner,
.sc-home-react .adir-profile-card:hover .adir-card-inner {
  transform: scale(1.07) translateY(-6px) !important;
  opacity: 1 !important;
  border-color: rgba(78,218,140,.8) !important;
  box-shadow: 0 34px 66px rgba(0,0,0,.42),
              0 0 0 1px rgba(78,218,140,.28),
              0 0 44px rgba(34,160,90,.3) !important;
}

/* Content — cleaner hierarchy */
.sc-home-react .adir-card-info {
  padding: 22px 20px 20px !important;
  background: none !important;
}
.sc-home-react .adir-card-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.sc-home-react .adir-card-affil {
  font-size: 11.5px !important;
  color: rgba(226,240,231,.6) !important;
  margin-top: 5px !important;
  line-height: 1.45;
}
.sc-home-react .adir-card-info .adir-card-tag {
  margin-top: 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #59DA65 !important;
  line-height: 1.4;
}
.sc-home-react .adir-card-topics { gap: 6px !important; padding-top: 14px !important; }
.sc-home-react .adir-topic {
  font-size: 9.5px !important;
  padding: 3px 9px !important;
  color: #d7f5e4 !important;
  background: rgba(52,211,110,.14) !important;
  border: 1px solid rgba(52,211,110,.3) !important;
}

/* Responsive sizing (kept in proportion so ~3 stay visible) */
@media (max-width: 1024px) {
  .sc-home-react .adir-slider-viewport { height: 328px !important; }
  .sc-home-react .adir-profile-card,
  .sc-home-react .adir-profile-card.featured { width: 204px; height: 274px; }
}
@media (max-width: 640px) {
  .sc-home-react .adir-slider-viewport { height: 300px !important; }
  .sc-home-react .adir-profile-card,
  .sc-home-react .adir-profile-card.featured { width: 190px !important; height: 258px !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   PHONE VIEW — the mentor rail scrolls right→left as a pure CSS marquee,
   exactly like the Open-research-projects ticker (@keyframes epTicker).
   On desktop the rail is an absolutely-positioned track moved by JS every
   frame; on small screens that measurement can collapse to 0 and the rail
   renders empty. Here the track goes back to normal flow with width:max-
   content and animates itself, so it CANNOT depend on JS at all. The JS
   still runs and still writes inline transforms, but CSS animations beat
   inline styles in the cascade, so this wins on phones.
   Colours, card design and card content are untouched.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Safety net: if the scroll-reveal observer never fires on a phone the whole
     band would stay at opacity:0. The mentor rail must always be visible. */
  .sc-home-react .ai-director-section.reveal { opacity: 1 !important; transform: none !important; }
  .sc-home-react .adir-hero { display: block !important; }
  .sc-home-react .adir-left { width: 100% !important; margin-bottom: 22px !important; }

  .sc-home-react .adir-slider-viewport {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%) !important;
  }

  /* Track back in normal flow — no absolute positioning, no JS measurement */
  .sc-home-react .adir-slider-track {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    width: max-content !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 6px 2px 10px !important;
    animation: adirTickerMobile 34s linear infinite;
  }
  /* JS clones the card set 3× → one full set = 33.3333% of the track */
  .sc-home-react .adir-slider-viewport:hover .adir-slider-track,
  .sc-home-react .adir-slider-track:active { animation-play-state: paused; }

  /* Phones get every card at full brightness — the desktop "centre card"
     zoom/dim needs a wide stage and just makes cards hard to read here.
     Same card shell, same colours, only the scale/opacity trick is off. */
  /* The flex item is the <a> wrapper — it must never shrink */
  .sc-home-react .adir-slider-track > .adir-profile-link { flex: 0 0 auto !important; display: block; }
  .sc-home-react .adir-profile-card,
  .sc-home-react .adir-profile-card.featured { width: 184px !important; height: auto !important; min-height: 244px; }
  .sc-home-react .adir-card-inner,
  .sc-home-react .adir-profile-card.center-active .adir-card-inner {
    height: 100%;
    transform: none !important;
    opacity: 1 !important;
  }
}
@keyframes adirTickerMobile { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }

/* ──────────────────────────────────────────────────────────────────────
   VALUE-PROPS CTA ("Hire" / "Apply as Mentor") — bigger, and the icon is
   now readable. sc_home_icon() writes an inline style="color:#15a06a" on
   the SVG, i.e. green on the green button, so it was invisible: we force
   currentColor and seat the mark in a translucent white pill.
   ────────────────────────────────────────────────────────────────────── */
.value-cta-btn {
  gap: 12px !important;
  padding: 15px 26px 15px 16px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  line-height: 1;
}
.value-cta-btn .value-cta-ic {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  transition: background .2s, transform .2s;
}
/* Kills the inline green colour on the icon — white on green, always visible */
.value-cta-btn .value-cta-ic svg,
.value-cta-btn .value-cta-ic svg path { color: #fff !important; fill: currentColor !important; }
.value-cta-btn .value-cta-arrow { color: #fff; opacity: .9; transition: transform .2s; }
.value-cta-btn:hover .value-cta-ic { background: rgba(255,255,255,.30); transform: scale(1.06); }
.value-cta-btn:hover .value-cta-arrow { transform: translateX(3px); }
[data-theme="light"] .value-cta-btn { box-shadow: 0 6px 20px rgba(26,122,74,.34); }
@media (max-width: 860px) {
  /* Full-width, thumb-sized on phones and centred under the headline */
  .value-top { flex-direction: column; align-items: flex-start; }
  .value-cta-btn { width: 100%; justify-content: center; padding: 15px 22px !important; font-size: 15.5px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-home-react .adir-slider-track { animation: none !important; }
  /* Still reachable without motion — swipe the rail by hand */
  @media (max-width: 860px) {
    .sc-home-react .adir-slider-viewport { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  }
}

/* ======================================================================
   ROUND 8 — Simulations rebuilt as a green auto-scrolling ticker carousel
   (reuses the Open-research-projects @keyframes epTicker marquee) + mentor
   card publication/citation stats replacing the duplicated tag line.
   ====================================================================== */

/* Rail — faded edges, hover to pause, no scrollbars (matches projects) */
.sc-home-react .sims-carousel {
  position: relative;
  overflow: hidden;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 0 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
/* Track — flex row, rendered twice in PHP, driven by the translateX(-50%) marquee */
.sc-home-react .sims-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 6px 4px;
  align-items: stretch;
  animation: epTicker 46s linear infinite;
}
.sc-home-react .sims-carousel:hover .sims-track { animation-play-state: paused; }
/* Fixed-width tiles so the marquee measures cleanly */
.sc-home-react .sims-carousel .sim-card { flex: 0 0 300px; width: 300px; }

@media (max-width: 760px) {
  .sc-home-react .sims-carousel {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sc-home-react .sims-track { animation: none; }
}

/* Mentor card — Publications / Citations stat row (replaces the duplicate tag) */
.sc-home-react .adir-card-stats {
  display: flex;
  gap: 16px;
  margin-top: 13px;
}
.sc-home-react .adir-card-stat {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(226,240,231,0.6);
}
.sc-home-react .adir-card-stat strong {
  margin-bottom: 2px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #59DA65;
}

/* ======================================================================
   ROUND 9 — Value-props icons rebuilt as clean, Fiverr-style category tiles:
   thin line marks on white rounded squares that reveal a soft green radial
   glow + lift on hover (mirrors the highlighted "Digital Marketing" tile).
   ====================================================================== */
.sc-home-react .value-section .value-icon {
  position: relative;
  color: #33413b !important;
  background: #ffffff !important;
  border: 1.5px solid #e4ece6 !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 4px 14px -8px rgba(15,42,26,.20);
  transition:
    transform .38s cubic-bezier(.22,1,.36,1),
    border-color .38s ease,
    box-shadow .38s ease,
    color .38s ease;
}
/* Soft green radial glow — hidden at rest, blooms in from the top-right on hover */
.sc-home-react .value-section .value-icon::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -60%;
  width: 160%;
  height: 160%;
  background: radial-gradient(circle at 70% 30%,
              rgba(89,218,101,.55) 0%,
              rgba(42,167,55,.30) 32%,
              transparent 66%);
  opacity: 0;
  transform: scale(.55);
  transition: opacity .42s ease, transform .55s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.sc-home-react .value-icon .sc-value-icon {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  display: block;
  transition: transform .42s cubic-bezier(.34,1.56,.64,1);
}
.sc-home-react .value-col:hover .value-icon {
  color: #1f8a2b !important;
  border-color: #b7e2bd !important;
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(42,167,55,.5);
}
.sc-home-react .value-col:hover .value-icon::before {
  opacity: 1;
  transform: scale(1);
}
.sc-home-react .value-col:hover .value-icon .sc-value-icon {
  transform: scale(1.1) rotate(-3deg);
}
[data-theme="dark"] .sc-home-react .value-section .value-icon,
[data-theme="dark"] .value-section .value-icon {
  color: #c8e6d0 !important;
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(42,167,55,.28) !important;
}
[data-theme="dark"] .sc-home-react .value-col:hover .value-icon {
  color: #59DA65 !important;
  border-color: rgba(89,218,101,.5) !important;
}

/* ======================================================================
   ROUND 10 — Newsletter inputs: kill the theme's default input border /
   box-shadow that shows as an inner rectangle inside the rounded pill.
   ====================================================================== */
.sc-home-react .cta-email-wrap input[type="text"],
.sc-home-react .cta-email-wrap input[type="email"] {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 14px 0 !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  -webkit-appearance: none;
  appearance: none;
}
.sc-home-react .cta-email-wrap input:focus,
.sc-home-react .cta-email-wrap input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* ======================================================================
   ROUND 11 — Mentor Spotlight card: star RATING row + a premium
   "Top Mentor" (gold, animated shine) / "Verified" (green check) badge.
   The Citations/h-index stat row now only renders when real data exists,
   so cards never show an empty "0 / 0".
   ====================================================================== */
.sc-home-react .adir-card-inner { position: relative; }

/* ── Badge (top-right corner) ── */
.sc-home-react .adir-card-badge {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
.sc-home-react .adir-card-badge svg { flex-shrink: 0; }

/* Verified — green glass pill */
.sc-home-react .adir-card-badge--verified {
  color: #eafff0;
  background: rgba(42,167,55,.24);
  border: 1px solid rgba(89,218,101,.55);
  box-shadow: 0 2px 10px rgba(20,80,40,.4), inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(4px);
}
.sc-home-react .adir-card-badge--verified svg { color: #59DA65; }

/* Top Mentor — gold gradient with a sweeping shine */
.sc-home-react .adir-card-badge--top {
  color: #3a2905;
  background: linear-gradient(135deg, #ffe79a 0%, #f6b73c 46%, #ffd76a 100%);
  border: 1px solid rgba(255,214,120,.95);
  box-shadow: 0 4px 14px rgba(214,158,46,.5), 0 0 0 3px rgba(246,183,60,.16);
}
.sc-home-react .adir-card-badge--top svg { color: #7a5405; }
.sc-home-react .adir-card-badge--top::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.9), transparent);
  transform: skewX(-18deg);
  animation: adirBadgeShine 3.4s ease-in-out infinite;
}
@keyframes adirBadgeShine {
  0%, 55% { left: -70%; }
  100% { left: 140%; }
}

/* Featured (Top Mentor) card gets a golden ring so it pops at first glance */
.sc-home-react .adir-profile-card.featured .adir-card-inner {
  border-color: rgba(246,183,60,.5) !important;
  box-shadow: 0 16px 40px rgba(6,20,12,.4), 0 0 0 1px rgba(246,183,60,.3), 0 0 24px rgba(246,183,60,.2) !important;
}
.sc-home-react .adir-profile-card.featured.center-active .adir-card-inner,
.sc-home-react .adir-profile-card.featured:hover .adir-card-inner {
  border-color: rgba(255,214,106,.9) !important;
  box-shadow: 0 34px 66px rgba(0,0,0,.45), 0 0 0 1px rgba(255,214,106,.5), 0 0 46px rgba(246,183,60,.4) !important;
}

/* ── Star rating row ── */
.sc-home-react .adir-card-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
}
.sc-home-react .adir-stars { display: inline-flex; gap: 1px; }
.sc-home-react .adir-star { color: rgba(255,255,255,.20); }
.sc-home-react .adir-star.is-on {
  color: #ffc531;
  filter: drop-shadow(0 0 3px rgba(255,197,49,.5));
}
.sc-home-react .adir-rating-num {
  font-size: 12.5px;
  font-weight: 800;
  color: #ffd76a;
  letter-spacing: -.01em;
}
.sc-home-react .adir-rating-ct {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(226,240,231,.55);
}

/* ======================================================================
   ROUND 12 — Hero search bar: (a) kill the theme's default input border /
   box-shadow that renders as a square box *inside* the rounded pill, and
   (b) polish the live-suggestion dropdown (mentors + simulation codes).
   ====================================================================== */
.sc-home-react .sc-search-box input[type="search"],
.sc-home-react .sc-search-box input[type="text"] {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  -webkit-appearance: none;
  appearance: none;
}
.sc-home-react .sc-search-box input:focus,
.sc-home-react .sc-search-box input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
/* drop the native search "clear"/decoration that also reads as a little box */
.sc-home-react .sc-search-box input[type="search"]::-webkit-search-decoration,
.sc-home-react .sc-search-box input[type="search"]::-webkit-search-cancel-button,
.sc-home-react .sc-search-box input[type="search"]::-webkit-search-results-button,
.sc-home-react .sc-search-box input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* live-results container */
.sc-home-react .sc-search-results:empty { display: none; }
.sc-home-react .sc-search-results {
  max-height: min(360px, 52vh);
  overflow-y: auto;
}
/* when results are present, the action shelf gets a divider above it */
.sc-home-react .sc-search-results:not(:empty) + .sc-search-actions {
  border-top: 1px solid rgba(13, 43, 26, 0.08);
}
/* thumbnail sizing inside a result row */
.sc-home-react .sc-search-result-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.sc-home-react .sc-search-result-avatar--mentor { border-radius: 50%; }

/* ======================================================================
   ROUND 13 — "I need a Researcher" (scholar / workflow) hero now renders
   IDENTICALLY to the "I am a Research Expert" hero: same white background,
   same fonts, same toggle colours, same headline / paragraph / eyebrow
   styling, and the SAME right-side workflow GIF. Combined with the frozen
   grid skeleton (ROUND 11 — content left, diagram right, toggle pinned
   top-left in BOTH tabs), switching the persona toggle now produces NO
   visible shift, colour change, or flicker — only the headline / sub-copy /
   CTA content swaps. Placed last + high specificity to win over the earlier
   .is-workflow-hero rules.
   ====================================================================== */

/* Shell — same background & sizing as expert; drop the workflow-only green
   radial background, fixed 550px height and the edge-fade ::before. */
.sc-home-react .sc-hero.is-workflow-hero {
  background: #ffffff !important;
  height: 600px;
  min-height: auto !important;
  padding: 1px 20px 54px !important;
  overflow: hidden;
}
.sc-home-react .sc-hero.is-workflow-hero::before { display: none !important; }
.sc-home-react .sc-hero.is-workflow-hero .sc-dot-left,
.sc-home-react .sc-hero.is-workflow-hero .sc-dot-right { display: none; }

/* When the search dropdown is open, let it escape the hero (our overflow:hidden
   above was clipping the "Mentor List / Simulation Code" buttons) and lift the
   whole hero above the following section so the buttons are never hidden under
   the next block. */
.sc-home-react .sc-hero.is-workflow-hero:has(.sc-search-wrap.is-open) {
  overflow: visible !important;
  z-index: 60;
}
.sc-home-react .sc-hero.is-workflow-hero:has(.sc-search-wrap.is-open) .sc-hero-inner {
  overflow: visible !important;
}
.sc-home-react .sc-hero.is-workflow-hero .sc-search-wrap.is-open .sc-search-dropdown {
  z-index: 70;
}

/* Toggle — the persona toggle is common to both tabs, so force the EXACT
   same colours the expert tab uses (shared brand green, no orange icon)
   so it never changes appearance when the tab switches. */
.sc-home-react .sc-hero.is-workflow-hero .sc-toggle-btn:not(.active) {
  color: #607369 !important;
}
.sc-home-react .sc-hero.is-workflow-hero .sc-toggle-btn:not(.active) span svg {
  color: currentColor;
}
.sc-home-react .sc-hero.is-workflow-hero .sc-toggle-btn.active {
  color: #ffffff !important;
  background: linear-gradient(180deg, #2AA737 0%, #1f8a2b 100%) !important;
  box-shadow: 0 10px 22px rgba(26,122,74,0.25) !important;
}
.sc-home-react .sc-hero.is-workflow-hero .sc-toggle-btn.active span svg {
  color: #ffffff;
}

/* Right-side visual — match the expert GIF box (same padding / alignment). */
.sc-home-react .sc-hero.is-workflow-hero .sc-hero-visual {
  align-items: center;
  justify-content: stretch;
  min-height: auto !important;
  padding: 0 8px 0 0;
  margin: 0;
  overflow: visible;
}
.sc-home-react .sc-hero.is-workflow-hero .ehf-workflow-gif {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 16px;
  margin-top: -250px;
}

/* Headline / paragraph / eyebrow — identical tokens to the expert tab. */
.sc-home-react .sc-hero.is-workflow-hero .sc-hero-content h1 {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(34px, 3.2vw, 48px) !important;
  line-height: 1.08;
  letter-spacing: -1.2px;
  color: #111b16;
}
.sc-home-react .sc-hero.is-workflow-hero .sc-hero-content h1 em {
  color: #2AA737;
}
.sc-home-react .sc-hero.is-workflow-hero .sc-hero-content p {
  font-size: 15px !important;
  line-height: 1.62;
  color: #4b5d53;
  margin: 16px 0 22px !important;
}