:root {
  --bg: #ffffff;
  --card: #ffffff;
  --card-border: rgba(17, 24, 39, 0.08);
  --text: #111827;
  --muted: #6b7280;
  --primary: #3b82f6;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  scroll-behavior: smooth;
  background-image:
    radial-gradient(600px 600px at 12% 10%, rgba(59,130,246,0.08), transparent 60%),
    radial-gradient(520px 520px at 88% 28%, rgba(168,85,247,0.07), transparent 60%),
    radial-gradient(680px 680px at 70% 85%, rgba(34,197,94,0.06), transparent 60%);
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat;
}

.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

.navbar .brand-text { font-weight: 700; letter-spacing: .5px; color: var(--text); }
.navbar .separator { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.06), transparent); position: absolute; left: 0; right: 0; bottom: 0; }

/* Glassy fixed header */
.glass-nav {
  background: rgba(255,255,255,.12) !important; /* near transparent at top */
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(17,24,39,.06);
  box-shadow: none;
  transition: background-color .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.glass-nav.scrolled {
  background: rgba(255,255,255,.56) !important;
  border-bottom-color: var(--card-border);
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
}
body { padding-top: 76px; background-color: var(--bg); }

.bg-radial { position: absolute; inset: -10%; background: radial-gradient(1000px 400px at 10% 10%, rgba(91,140,255,0), transparent), radial-gradient(800px 300px at 90% 40%, rgba(0,214,170,0), transparent); filter: blur(0px); z-index: -1; }

.hero-logo { width: 200px; height: auto; max-width: 90%; }
@media (min-width: 576px) { .hero-logo { width: 240px; } }
@media (min-width: 992px) { .hero-logo { width: 320px; } }

/* gradient text */
.gtext {
  background: linear-gradient(90deg, #3b82f6, #22c55e, #a855f7, #f59e0b, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 300% 100%;
  animation: gradientShift 8s ease-in-out infinite;
}
.gtext-2 {
  background: linear-gradient(90deg, #0ea5e9, #6366f1, #22d3ee, #818cf8, #0ea5e9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 300% 100%;
  animation: gradientShift 10s ease-in-out infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gtext, .gtext-2 { animation: none; }
}

.glass { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7)); border: 1px solid var(--card-border); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,.06); }

.card.feature-card { 
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.38)); 
  border: 1px solid var(--card-border); 
  box-shadow: 0 8px 22px rgba(0,0,0,.06); 
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.feature-card .icon-wrap { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; }

.grid-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.badge-tile { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35)); border: 1px solid var(--card-border); padding: 12px 14px; border-radius: 12px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.cta { border: 1px solid var(--card-border); }

.member-card { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.38)); border: 1px solid var(--card-border); box-shadow: 0 8px 22px rgba(0,0,0,.06); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); }
.member-card .card-body { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; }
.member-card .card-body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-top-left-radius: 12px; border-top-right-radius: 12px; background: linear-gradient(90deg, rgba(59,130,246,.6), rgba(168,85,247,.45), rgba(34,197,94,.45)); opacity: .6; }
.member-card .card-body h3 { font-weight: 700; letter-spacing: .2px; }
.member-card .role { min-height: 20px; }
.member-card .role { background: rgba(59,130,246,.08); color: #1f3b8a; padding: 4px 10px; border-radius: 999px; display: inline-block; border: 1px solid var(--card-border); }
.member-card .bio { color: #475569; line-height: 1.65; text-align: left; position: relative; width: 100%; }
.member-card .bio:not(.expanded)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--card)); }
@media (min-width: 992px) {
  .member-card .bio { 
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.8em; /* ~4 lines */
  }
}
@media (max-width: 991.98px) {
  .member-card .bio { 
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 6em;
  }
}

.member-card .bio.expanded {
  -webkit-line-clamp: initial !important;
  overflow: visible;
  min-height: 0;
}

.expand-bio-btn { margin-top: 6px; }
.expand-bio-btn { border-radius: 999px; padding: 4px 10px; background: #f8fafc; border: 1px solid var(--card-border); }
.expand-bio-btn i { transition: transform .2s ease; }
.expand-bio-btn[data-expanded="true"] i { transform: rotate(180deg); }
.avatar-xl { width: 120px; height: 120px; border-radius: 24px; }
.avatar-lg { width: 88px; height: 88px; border-radius: 20px; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.avatar-circle { width: 112px; height: 112px; border-radius: 999px; object-fit: cover; border: 1px solid var(--card-border); box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.avatar-rect { width: 140px; height: 180px; border-radius: 16px; object-fit: cover; border: 1px solid var(--card-border); box-shadow: 0 8px 18px rgba(0,0,0,.06); }
.avatar-rect-sm { width: 112px; height: 144px; border-radius: 12px; object-fit: cover; border: 1px solid var(--card-border); box-shadow: 0 6px 14px rgba(0,0,0,.05); }
.bg-gradient { background: linear-gradient(135deg, rgba(91,140,255,.35), rgba(0,214,170,.35)); border: 1px solid var(--card-border); }

.text-secondary { color: var(--muted) !important; }

/* RTL support for Uyghur */
[dir="rtl"] .navbar .navbar-brand { margin-right: 0; }
[dir="rtl"] .navbar .ms-auto { margin-left: 0 !important; margin-right: auto !important; }

/* Buttons */
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-outline-dark { color: var(--text) !important; border-color: var(--card-border) !important; background-color: transparent !important; }
.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active,
.show > .btn-outline-dark.dropdown-toggle {
  color: var(--text) !important;
  background-color: rgba(17,24,39,.06) !important;
  border-color: var(--card-border) !important;
  box-shadow: none !important;
}
.btn-outline-dark:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.25) !important;
}

/* Links */
.nav-link { color: #374151; }
.nav-link:hover { color: #111827; }
.nav-link.active { color: #111827 !important; font-weight: 600; }

/* Utility spacing for sections */
.section-head .h3 { letter-spacing: .3px; }

/* Dropdown */
.dropdown-menu { background: #ffffff; border-color: var(--card-border); }
.dropdown-item { color: var(--text); white-space: nowrap; overflow-wrap: normal; word-break: normal; text-align: right; }
.dropdown-item:hover { background: rgba(17,24,39,.04); }

/* Prevent overflow on small screens for language dropdown */
@media (max-width: 576px) {
  .navbar .dropdown-menu { right: 12px; left: auto; transform: none !important; width: auto; min-width: 180px; max-width: calc(100% - 24px); text-align: right; }
  .navbar .dropdown-item { white-space: nowrap; text-align: right; }
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .hero { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .hero .d-flex.gap-3 { flex-direction: column; align-items: stretch; gap: .75rem !important; }
  .hero .d-flex.gap-3 .btn { width: 100%; }
  .hero h1.h3 { line-height: 1.25; }
  .hero .lead { font-size: 1rem; }

  .grid-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .avatar-xl { width: 88px; height: 88px; }
  .avatar-lg { width: 72px; height: 72px; }

  .section-head { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .cta { padding: 1rem !important; }

  .navbar .brand-text { font-size: 1rem; }
}

/* Badges & note */
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge-soft { background: #f9fafb; border: 1px solid var(--card-border); color: #334155; padding: 6px 10px; border-radius: 999px; font-size: 12px; }
.note { background: #f9fafb; border: 1px solid var(--card-border); border-radius: 10px; padding: 8px 10px; color: #475569; }

/* Page transition */
main.fade-out { opacity: .0; transform: translateY(8px); transition: opacity .18s cubic-bezier(0.2,0.8,0.2,1), transform .18s cubic-bezier(0.2,0.8,0.2,1); }
main.fade-in { opacity: 1; transform: translateY(0); transition: opacity .22s cubic-bezier(0.2,0.8,0.2,1), transform .22s cubic-bezier(0.2,0.8,0.2,1); }

/* Language/page transition overlay with micro-scale + radial glow */
#page-overlay {
  position: fixed; inset: 0; background: #ffffff; opacity: 0; pointer-events: none;
  transition: opacity .28s ease; z-index: 2147483000;
}
#page-overlay::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 600px at 50% 50%, rgba(59,130,246,.22), transparent 60%);
  transform: scale(.95); opacity: 0; transition: transform .32s ease, opacity .32s ease;
}
#page-overlay.show { opacity: 1; pointer-events: auto; }
#page-overlay.show::after { transform: scale(1.06); opacity: 1; }

/* Slight content shrink when overlay is active */
body.overlay-active main { transform: scale(.988); transition: transform .28s cubic-bezier(0.2,0.8,0.2,1); }