/* ============================================================
   ODUMA CORP — Design System v2
   Premium Innovation + Investment Platform
   Palette: Logo Royal Blue (#1B5EC7) + Silver + White
   ============================================================ */

/* ----------------------------------------------------------
   1. CSS Variables / Design Tokens
   ---------------------------------------------------------- */
:root {
  /* ── Core palette — derived from logo ── */
  --oc-ink:          #0A1628;          /* deep navy (logo blue darkened) */
  --oc-navy:         #092147;          /* hero / footer dark sections */
  --oc-navy-mid:     #0E2D5E;
  --oc-blue:         #1B5EC7;          /* logo royal blue — primary */
  --oc-blue-dark:    #144FA8;
  --oc-blue-light:   #3D78D8;
  --oc-silver:       #B8C6D8;          /* logo silver */
  --oc-silver-light: #EBF0F8;
  --oc-gold:         #C9A44A;         /* premium accent */
  --oc-gold-light:   #F0D080;

  /* ── Legacy aliases (keep existing templates working) ── */
  --oc-primary:       #1B5EC7;
  --oc-primary-dark:  #144FA8;
  --oc-primary-light: #3D78D8;
  --oc-primary-xlight:#E8F0FB;
  --oc-navy-legacy:   #092147;

  /* ── Backgrounds ── */
  --oc-bg:            #F4F7FB;
  --oc-bg-dark:       #092147;
  --oc-surface:       #FFFFFF;
  --oc-surface-alt:   #F8FAFD;
  --oc-surface-raised:#FFFFFF;

  /* ── Borders ── */
  --oc-border:        rgba(0,0,0,0.08);
  --oc-border-strong: rgba(0,0,0,0.16);
  --oc-border-dark:   rgba(255,255,255,0.12);

  /* ── Text ── */
  --oc-text-primary:   #0A1628;
  --oc-text-secondary: #2D3F58;
  --oc-text-muted:     #6B80A0;
  --oc-text-on-primary:#FFFFFF;
  --oc-text-on-dark:   #EBF0F8;
  --oc-text-on-dark-muted: rgba(235,240,248,.55);

  /* ── Semantic ── */
  --oc-success:       #059669;
  --oc-success-light: #ECFDF5;
  --oc-danger:        #DC2626;
  --oc-danger-light:  #FEF2F2;
  --oc-warning:       #D97706;
  --oc-warning-light: #FFFBEB;
  --oc-info:          #1B5EC7;
  --oc-info-light:    #E8F0FB;

  /* ── Gradients ── */
  --oc-gradient-primary: linear-gradient(135deg, #1B5EC7 0%, #3D78D8 100%);
  --oc-gradient-dark:    linear-gradient(160deg, #092147 0%, #0E2D5E 100%);
  --oc-gradient-gold:    linear-gradient(135deg, #C9A44A 0%, #F0D080 100%);
  --oc-gradient-subtle:  linear-gradient(135deg, #EBF0F8 0%, #F4F7FB 100%);

  /* ── Shadows ── */
  --oc-shadow-xs: 0 1px 2px rgba(27,94,199,0.06);
  --oc-shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --oc-shadow-md: 0 4px 16px rgba(27,94,199,0.10);
  --oc-shadow-lg: 0 10px 36px rgba(27,94,199,0.13);
  --oc-shadow-xl: 0 20px 60px rgba(0,0,0,0.18);
  --oc-shadow-blue: 0 4px 20px rgba(27,94,199,0.28);

  /* ── Radii ── */
  --oc-radius-xs:   3px;
  --oc-radius-sm:   6px;
  --oc-radius-md:   10px;
  --oc-radius-lg:   16px;
  --oc-radius-xl:   20px;
  --oc-radius-full: 9999px;

  /* ── Spacing ── */
  --oc-space-1:  4px;
  --oc-space-2:  8px;
  --oc-space-3: 12px;
  --oc-space-4: 16px;
  --oc-space-5: 20px;
  --oc-space-6: 24px;
  --oc-space-8: 32px;
  --oc-space-10:40px;
  --oc-space-12:48px;
  --oc-space-16:64px;

  /* ── Typography ── */
  --oc-font-display: 'Space Grotesk', 'Inter', Arial, sans-serif;
  --oc-font-sans:    'Inter', Arial, sans-serif;
  --oc-font-serif:   'Space Grotesk', 'Inter', sans-serif;
  --oc-font-size-xs:   1.0rem;   /* small labels, badges, captions */
  --oc-font-size-sm:   1.1rem;   /* secondary / muted text */
  --oc-font-size-base: 1.2rem;   /* body text — the baseline */
  --oc-font-size-md:   1.35rem;  /* lead text, prominent labels */
  --oc-font-size-lg:   1.5rem;   /* small headings, card titles */
  --oc-font-size-xl:   1.75rem;  /* section headings */
  --oc-font-size-2xl:  2.0rem;   /* page headings */
  --oc-font-size-3xl:  2.5rem;   /* large headings */
  --oc-font-size-4xl:  3.0rem;   /* display headings */
  --oc-font-size-5xl:  3.75rem;  /* hero display */

  /* ── Motion ── */
  --oc-transition:      .16s ease;
  --oc-transition-slow: .32s ease;

  /* ── Navbar ── */
  --oc-navbar-h: 100px;
  --oc-navbar-bg: #1B5EC7;   /* logo royal blue */
}

/* ----------------------------------------------------------
   2. Global Reset & Base
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 17px;   /* bumped from 16px for readability */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  /* no overflow-x: hidden here — it clips position:absolute dropdowns */
}
@media (max-width: 900px)  { html { font-size: 16px; } }
@media (max-width: 480px)  { html { font-size: 15px; } }

body {
  font-family: var(--oc-font-sans);
  font-size: var(--oc-font-size-base);
  color: var(--oc-text-primary);
  background: var(--oc-bg);
  line-height: 1.7;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

main {
  flex: 1;
  padding-top: var(--oc-navbar-h);
  width: 100%;
  background: var(--oc-bg) !important;
}
.no-navbar main { padding-top: 0; }

a {
  color: var(--oc-blue);
  text-decoration: none;
  transition: color var(--oc-transition);
}
a:hover { color: var(--oc-blue-dark); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--oc-font-display);
  color: var(--oc-text-primary);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}
h1 { font-size: var(--oc-font-size-3xl); }
h2 { font-size: var(--oc-font-size-2xl); }
h3 { font-size: var(--oc-font-size-xl); }
h4 { font-size: var(--oc-font-size-lg); }
h5 { font-size: var(--oc-font-size-md); }
h6 { font-size: var(--oc-font-size-base); }

p { margin-bottom: 0; }

/* ----------------------------------------------------------
   3. Layout
   ---------------------------------------------------------- */
.oc-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--oc-space-6);
}

.oc-page-wrap {
  display: grid;
  grid-template-columns: 240px 1fr 260px;
  gap: var(--oc-space-5);
  width: 100%;
  padding: var(--oc-space-6) var(--oc-space-5);
  align-items: start;
}

@media (max-width: 1024px) {
  .oc-page-wrap { grid-template-columns: 220px 1fr; }
  .oc-sidebar-right { display: none; }
}
@media (max-width: 768px) {
  .oc-page-wrap { grid-template-columns: 1fr; }
  .oc-sidebar-left { display: none; }
}

/* ----------------------------------------------------------
   4. Breadcrumbs & Back Button
   ---------------------------------------------------------- */
.oc-breadcrumbs {
  padding: 10px 20px;
  background: var(--oc-surface, #fff);
  border-bottom: 1px solid var(--oc-border, #e4eaf2);
}
.oc-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 1180px;
  margin: 0 auto;
}
.oc-breadcrumbs__item {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
}
.oc-breadcrumbs__link {
  color: var(--oc-blue, #1B5EC7);
  text-decoration: none;
  font-weight: 600;
  transition: color .15s;
}
.oc-breadcrumbs__link:hover { color: var(--oc-blue-dark, #144FA8); text-decoration: underline; }
.oc-breadcrumbs__sep {
  margin: 0 6px;
  color: #9ca3af;
  font-size: 1.2rem;
}
.oc-breadcrumbs__current {
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  display: inline-block;
}

/* Back button (used on context-dependent pages) */
.oc-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  margin: 12px 20px;
  background: var(--oc-surface, #fff);
  border: 1.5px solid var(--oc-border, #e4eaf2);
  border-radius: 9px;
  color: var(--oc-ink, #0A1628);
  font-size:1.2rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.oc-back-btn:hover {
  border-color: var(--oc-blue, #1B5EC7);
  background: var(--oc-primary-xlight, #e8f0fb);
  color: var(--oc-blue, #1B5EC7);
}
.oc-back-btn svg { flex-shrink: 0; }

/* ----------------------------------------------------------
   5. Cards
   ---------------------------------------------------------- */
.oc-card {
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius-md);
  box-shadow: var(--oc-shadow-sm);
  padding: var(--oc-space-5);
  transition: box-shadow var(--oc-transition), transform var(--oc-transition);
}
.oc-card:hover {
  box-shadow: var(--oc-shadow-md);
}

.oc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--oc-space-4);
  border-bottom: 1px solid var(--oc-border);
  margin-bottom: var(--oc-space-4);
}

.oc-card-title {
  font-family: var(--oc-font-display);
  font-size: var(--oc-font-size-lg);
  font-weight: 700;
  color: var(--oc-text-primary);
  letter-spacing: -0.01em;
}

/* Elevated card variant */
.oc-card-elevated {
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius-lg);
  box-shadow: var(--oc-shadow-md);
  padding: var(--oc-space-6);
  transition: box-shadow var(--oc-transition), transform var(--oc-transition);
}
.oc-card-elevated:hover {
  box-shadow: var(--oc-shadow-lg);
  transform: translateY(-2px);
}

/* Dark card variant */
.oc-card-dark {
  background: var(--oc-navy);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--oc-radius-lg);
  padding: var(--oc-space-6);
  color: var(--oc-text-on-dark);
}

/* ----------------------------------------------------------
   5. Buttons
   ---------------------------------------------------------- */
.oc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--oc-space-2);
  font-family: var(--oc-font-display);
  font-size: var(--oc-font-size-sm);
  font-weight: 700;
  padding: 11px 24px;
  border-radius: var(--oc-radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--oc-transition);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  letter-spacing: 0.015em;
}

.oc-btn-primary {
  background: var(--oc-blue);
  color: #fff;
  border-color: var(--oc-blue);
}
.oc-btn-primary:hover {
  background: var(--oc-blue-dark);
  border-color: var(--oc-blue-dark);
  color: #fff;
  box-shadow: var(--oc-shadow-blue);
  transform: translateY(-1px);
}

.oc-btn-outline {
  background: transparent;
  color: var(--oc-blue);
  border-color: var(--oc-blue);
}
.oc-btn-outline:hover {
  background: var(--oc-primary-xlight);
  transform: translateY(-1px);
}

.oc-btn-ghost {
  background: transparent;
  color: var(--oc-text-secondary);
  border-color: var(--oc-border-strong);
}
.oc-btn-ghost:hover {
  background: var(--oc-surface-alt);
  color: var(--oc-text-primary);
  border-color: var(--oc-border-strong);
}

.oc-btn-dark {
  background: var(--oc-ink);
  color: #fff;
  border-color: var(--oc-ink);
}
.oc-btn-dark:hover {
  background: var(--oc-navy);
  color: #fff;
  transform: translateY(-1px);
}

.oc-btn-gold {
  background: var(--oc-gold);
  color: var(--oc-ink);
  border-color: var(--oc-gold);
  font-weight: 700;
}
.oc-btn-gold:hover {
  background: var(--oc-gold-light);
  color: var(--oc-ink);
  transform: translateY(-1px);
}

.oc-btn-sm { padding: 8px 18px; font-size:1.2rem; }
.oc-btn-lg { padding: 14px 36px; font-size: var(--oc-font-size-base); font-weight: 700; }
.oc-btn-xl { padding: 17px 44px; font-size:1.2rem; font-weight: 700; letter-spacing: 0.02em; }

/* ----------------------------------------------------------
   6. Forms
   ---------------------------------------------------------- */
.oc-form-group { margin-bottom: var(--oc-space-5); }

.oc-label {
  display: block;
  font-size: var(--oc-font-size-sm);
  font-weight: 600;
  color: var(--oc-text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.oc-input,
.oc-select,
.oc-textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--oc-font-sans);
  font-size: var(--oc-font-size-sm);
  color: var(--oc-text-primary);
  background: var(--oc-surface);
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: var(--oc-radius-sm);
  transition: border-color var(--oc-transition), box-shadow var(--oc-transition);
  outline: none;
  appearance: none;
}
.oc-input:focus,
.oc-select:focus,
.oc-textarea:focus {
  border-color: var(--oc-blue);
  box-shadow: 0 0 0 3px rgba(0,87,255,0.10);
}
.oc-input::placeholder,
.oc-textarea::placeholder { color: var(--oc-text-muted); }

.oc-textarea { resize: vertical; min-height: 90px; line-height: 1.6; }

/* Ghost-text example fields — must override .oc-input / .oc-textarea color */
.oc-input.cp-ghost-text,
.oc-textarea.cp-ghost-text,
input.cp-ghost-text,
textarea.cp-ghost-text { color: #9ca3af !important; }
.cp-example-hint {
  display: none;
  font-size: 1.05rem;
  color: #9ca3af;
  margin-top: 5px;
  padding: 5px 10px;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  border-radius: 7px;
  line-height: 1.5;
}
.cp-example-hint span { font-weight: 600; color: #6b7280; }

/* Searchable combobox */
.oc-combo {
  position: relative;
  width: 100%;
}
.oc-combo .oc-combo__input {
  width: 100%;
  box-sizing: border-box;
  cursor: text;
}
.oc-combo__list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid var(--oc-border);
  border-radius: var(--oc-radius-sm);
  box-shadow: 0 6px 24px rgba(0,0,0,0.10);
  max-height: 240px;
  overflow-y: auto;
  z-index: 1200;
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.oc-combo__item,
.oc-combo__add {
  padding: 9px 14px;
  font-size: var(--oc-font-size-sm);
  font-family: var(--oc-font-sans);
  color: var(--oc-text);
  cursor: pointer;
  transition: background .12s;
}
.oc-combo__item:hover  { background: #f0f4ff; color: var(--oc-blue); }
.oc-combo__add         { color: var(--oc-blue); font-weight: 600; border-top: 1px solid var(--oc-border); }
.oc-combo__add:hover   { background: #eef3ff; }

/* ----------------------------------------------------------
   7. Navbar
   ---------------------------------------------------------- */
.oc-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--oc-navbar-bg);
  height: var(--oc-navbar-h);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.oc-navbar__inner {
  display: flex;
  align-items: center;
  gap: var(--oc-space-4);
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-inline: var(--oc-space-6);
  justify-content: space-between;
}

.oc-navbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.oc-navbar__logo {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  object-fit: contain;
}
.oc-navbar__brand-name {
  font-family: var(--oc-font-display);
  font-size: 2.0rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.oc-navbar__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  margin-inline: var(--oc-space-5);
  flex-wrap: nowrap;
  overflow: visible;
}

.oc-navbar__link {
  font-family: var(--oc-font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  padding: 7px 12px;
  border-radius: var(--oc-radius-xs);
  white-space: nowrap;
  transition: color var(--oc-transition), background var(--oc-transition);
  text-decoration: none;
  position: relative;
  letter-spacing: 0.01em;
}
.oc-navbar__link:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}
.oc-navbar__link.active {
  color: #fff;
  background: rgba(255,255,255,0.13);
  font-weight: 600;
}

.oc-navbar__divider {
  display: block;
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.14);
  margin-inline: var(--oc-space-2);
  flex-shrink: 0;
}

.oc-navbar__link-badge {
  position: absolute;
  top: 2px;
  right: 1px;
  background: #e53e3e;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--oc-radius-full);
  line-height: 1.4;
  min-width: 15px;
  text-align: center;
}
/* .oc-navbar__right:hover{
  transform: unset;
  transition: unset;
  background-color: red;
} */
.oc-navbar__right {
  display: flex;
  align-items: center;
  gap: var(--oc-space-3);
  flex-shrink: 0;
  right: 0;
}

/* Search */
.oc-navbar__search {
  position: relative;
  display: flex;
  align-items: center;
  width: clamp(130px, 18vw, 230px);
  flex-shrink: 1;
  transition: width .25s ease;
}
.oc-navbar__search input {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--oc-radius-sm);
  padding: 7px 12px 7px 32px;
  font-size: 1.2rem;
  color: #fff;
  width: 100%;
  transition: background .2s, border-color .2s, box-shadow .2s;
  outline: none;
}
.oc-navbar__search input::placeholder { color: rgba(255,255,255,0.38); }
.oc-navbar__search input:focus {
  background: rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.07);
}
.oc-navbar__search-icon {
  position: absolute;
  left: 9px;
  pointer-events: none;
  opacity: .45;
  z-index: 1;
}
/* Close button — hidden by default, shown when expanded on small screen */
.oc-search__close {
  display: none;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  z-index: 2;
}

/* ─────────────────────────────────────────────────────────────
   PURE CSS: collapse to icon-only below 1280px.
   No JS needed for initial state — media query handles it.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  /* Collapsed: shrink form to icon-sized button */
  .oc-navbar__search:not(.oc-search--open) {
    width: 32px !important;
    min-width: 32px;
    flex-shrink: 0;
    cursor: pointer;
    overflow: visible;
  }
  /* Hide the text input completely */
  .oc-navbar__search:not(.oc-search--open) input {
    position: absolute;
    width: 0 !important;
    opacity: 0;
    padding: 0 !important;
    border: none !important;
    pointer-events: none;
  }
  /* Centre the icon in the 32px button */
  .oc-navbar__search:not(.oc-search--open) .oc-navbar__search-icon {
    left: 50%;
    transform: translateX(-50%);
    opacity: .8;
    pointer-events: none;
  }

  /* Expanded overlay: full-width bar over the navbar */
  .oc-navbar__search.oc-search--open {
    position: absolute;
    left: 12px;
    right: 12px;
    width: auto !important;
    z-index: 200;
  }
  .oc-navbar__search.oc-search--open input {
    position: static;
    width: 100% !important;
    opacity: 1;
    pointer-events: all;
    padding: 8px 36px 8px 32px !important;
    background: rgba(255,255,255,0.13) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
  }
  .oc-navbar__search.oc-search--open .oc-navbar__search-icon {
    left: 10px;
    transform: none;
    opacity: .55;
    pointer-events: none;
  }
  .oc-navbar__search.oc-search--open .oc-search__close {
    display: block;
  }
}

/* Auth buttons */
.oc-navbar__auth {
  display: flex;
  align-items: center;
  gap: var(--oc-space-2);
}
.oc-navbar__auth .oc-btn-outline {
  color: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.22);
  padding: 6px 16px;
}
.oc-navbar__auth .oc-btn-outline:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.oc-navbar__auth .oc-btn-primary {
  background: var(--oc-blue);
  color: #fff;
  border-color: var(--oc-blue);
  padding: 6px 16px;
}
.oc-navbar__auth .oc-btn-primary:hover {
  background: var(--oc-blue-dark);
  border-color: var(--oc-blue-dark);
  color: #fff;
}

/* Hamburger */
.oc-navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
  border-radius: var(--oc-radius-xs);
  transition: background var(--oc-transition);
  /* right: 0; */
}
.oc-navbar__hamburger:hover { 
  /* background: rgba(98, 23, 23, 0.1);  */
  /* transform: unset; */
  /* transition: unset; */
  box-shadow: unset;
}
.oc-navbar__hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: rgba(255,255,255,0.8);
  border-radius: 2px;
  transition: all var(--oc-transition);
}

/* Mobile drawer */
.oc-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
}
.oc-mobile-menu.is-open { display: block; }

.oc-mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.oc-mobile-menu__panel {
  position: absolute;
  top: var(--oc-navbar-h);
  left: 0;
  width: 272px;
  height: calc(100% - var(--oc-navbar-h));
  background: rgba(8,18,42,0.55);
  backdrop-filter: blur(32px) saturate(200%) brightness(1.1);
  -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.1);
  border-right: 1px solid rgba(255,255,255,0.15);
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 4px 0 40px rgba(0,0,0,0.3);
  padding: var(--oc-space-4) var(--oc-space-4);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.oc-mobile-menu__brand {
  display: flex;
  align-items: center;
  gap: var(--oc-space-2);
  margin-bottom: var(--oc-space-3);
  padding-bottom: var(--oc-space-3);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.oc-mobile-menu__brand img { width: 28px; height: 28px; border-radius: 6px; }
.oc-mobile-menu__brand span {
  color: #fff;
  font-size: 1.2rem;
  font-family: var(--oc-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.oc-mobile-menu__link {
  display: block;
  padding: 7px var(--oc-space-3);
  color: rgba(255,255,255,0.8);
  font-size: 1.2rem;
  border-radius: var(--oc-radius-xs);
  text-decoration: none;
  transition: background var(--oc-transition), color var(--oc-transition);
}
.oc-mobile-menu__link:hover { background: rgba(255,255,255,0.1); color: #fff; }

.oc-mobile-menu__divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: var(--oc-space-2) 0;
}
#oc-mobile-explore-toggle{
  color: rgb(214, 208, 208) !important;
  font-weight: bold;
  content: "Explore";

}
#oc-hamburger{
  /* background-color: red; */
  align-items: center;

}
#oc-mobile-explore-toggle:hover{
  box-shadow: unset;
}
/* Responsive navbar — flex compression then hamburger */
@media (max-width: 1400px) {
  .oc-navbar__link { padding: 6px 9px; font-size:1.2rem; }
  .oc-navbar__nav  { gap: 0; margin-inline: 8px; }
  .oc-navbar__brand-name { display: none; }
}
@media (max-width: 1200px) {
  .oc-navbar__link { padding: 5px 7px; font-size: 1.0rem; }
  .oc-navbar__divider { margin-inline: 2px; }
}
@media (max-width: 1050px) {
  .oc-navbar__nav  { display: none; }
  .oc-navbar__hamburger { display: flex; }
}

/* ----------------------------------------------------------
   8. Bottom Navigation Bar (mobile / small tablet)
   ---------------------------------------------------------- */
.oc-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 980;
  /* frosted glass */
  
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter:  blur(5px) saturate(180%);
  border-top: 1px solid rgba(200,215,240,0.55);
  box-shadow: 0 -2px 20px rgba(10,22,40,0.10);
  /* iOS safe area */
  padding-bottom: env(safe-area-inset-bottom);
}
.oc-bottom-nav__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: 58px;
  width: 100%;
  padding: 0 8px;
}
.oc-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  padding: 6px 2px 4px;
  color: #6b7280;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .01em;
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}
.oc-bottom-nav__item:hover,
.oc-bottom-nav__item--active { color: #1B5EC7; }
.oc-bottom-nav__icon {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: background .15s;
}
.oc-bottom-nav__item--active .oc-bottom-nav__icon {
  background: rgba(27,94,199,0.12);
}
.oc-bottom-nav__item--active svg {
  stroke: #1B5EC7;
}
.oc-bottom-nav__dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 8px;
  height: 8px;
  background: #dc2626;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.9);
}
.oc-bottom-nav__badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #dc2626;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.9);
  line-height: 1;
}
/* Bottom nav: matches hamburger breakpoint */
@media (max-width: 1050px) {
  .oc-bottom-nav { display: block; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .oc-footer { display: none; }
}

/* ----------------------------------------------------------
   9. Footer
   ---------------------------------------------------------- */
.oc-footer {
  background: var(--oc-navy);
  color: rgba(255,255,255,0.65);
  padding: var(--oc-space-8) var(--oc-space-5) var(--oc-space-5);
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.08);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.oc-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: var(--oc-space-5);
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-bottom: var(--oc-space-5);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  align-items: start;
}

.oc-footer__brand img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  margin-bottom: var(--oc-space-3);
}
.oc-footer__brand-name {
  font-family: var(--oc-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--oc-space-2);
  letter-spacing: -0.01em;
}
.oc-footer__brand-tagline {
  font-size: var(--oc-font-size-sm);
  color: rgba(255,255,255,0.6);
  line-height: 1.55;
  max-width: 200px;
}

.oc-footer__col-title {
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--oc-space-3);
}

.oc-footer__links {
  list-style: "~ ";
  /* background-color: #059669; */
  display: flex;
  flex-direction: column;
  gap: 6px;
  left: 0;
  padding-left: 0;
}
.oc-footer__links a {
  color: rgba(255,255,255,0.65);
  font-size: var(--oc-font-size-sm);
  text-decoration: none;
  transition: color var(--oc-transition);
  /* background-color: #059669; */

}
.oc-footer__links a:hover { color: #fff; }

.oc-footer__bottom {
  max-width: 1400px;
  width: 100%;
  margin-inline: auto;
  padding-top: var(--oc-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--oc-space-3);
  font-size: 1.1rem;
  color: rgba(255,255,255,0.45);
}

@media (max-width: 1100px) {
  .oc-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
@media (max-width: 800px) {
  .oc-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 540px) {
  .oc-footer__grid { grid-template-columns: 1fr 1fr; }
  .oc-footer__bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 360px) {
  .oc-footer__grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
   9. Toast / Flash Messages
   ---------------------------------------------------------- */
.oc-toast-zone {
  position: fixed;
  top: calc(var(--oc-navbar-h) + 12px);
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-2);
  max-width: 340px;
  width: calc(100vw - 40px);
}

.oc-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--oc-space-3);
  background: var(--oc-navy);
  border-radius: var(--oc-radius-sm);
  border: none;
  box-shadow: var(--oc-shadow-xl);
  padding: 12px var(--oc-space-4);
  font-size: var(--oc-font-size-sm);
  color: #fff;
  animation: oc-toast-in .22s ease;
}
.oc-toast.success         { background: #16a34a; color: #fff; }
.oc-toast.error,
.oc-toast.danger          { background: #dc2626; color: #fff; }
.oc-toast.warning         { background: #d97706; color: #fff; }
.oc-toast.info            { background: var(--oc-blue); color: #fff; }
.oc-toast.is-leaving { animation: oc-toast-out .28s ease forwards; }

@keyframes oc-toast-in  { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }
@keyframes oc-toast-out { to   { opacity:0; transform:translateX(16px); } }

/* ----------------------------------------------------------
   10. Avatars
   ---------------------------------------------------------- */
.oc-avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--oc-surface-alt);
  border: 1.5px solid var(--oc-border);
}
.oc-avatar-sm  { width: 32px;  height: 32px; }
.oc-avatar-md  { width: 48px;  height: 48px; }
.oc-avatar-lg  { width: 80px;  height: 80px; }
.oc-avatar-xl  { width:112px;  height:112px; }

/* ----------------------------------------------------------
   11. Badges / Chips
   ---------------------------------------------------------- */
.oc-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: var(--oc-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.6;
}
.oc-badge-primary { background: var(--oc-primary-xlight); color: var(--oc-blue); }
.oc-badge-success { background: var(--oc-success-light); color: var(--oc-success); }
.oc-badge-danger  { background: var(--oc-danger-light);  color: var(--oc-danger); }
.oc-badge-gold    { background: rgba(201,164,74,.12); color: var(--oc-gold); }

/* ----------------------------------------------------------
   12. Stat block
   ---------------------------------------------------------- */
.oc-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  font-size: var(--oc-font-size-sm);
  border-bottom: 1px solid var(--oc-border);
}
.oc-stat-row:last-child { border-bottom: none; }
.oc-stat-row span:last-child {
  font-weight: 700;
  color: var(--oc-blue);
}

/* ----------------------------------------------------------
   13. Section utilities
   ---------------------------------------------------------- */
/* Dark hero section */
.oc-section-dark {
  background: var(--oc-gradient-dark);
  color: var(--oc-text-on-dark);
  padding: var(--oc-space-16) var(--oc-space-6);
}

/* Light accent section */
.oc-section-light {
  background: var(--oc-bg);
  padding: var(--oc-space-16) var(--oc-space-6);
}

/* White section */
.oc-section-white {
  background: var(--oc-surface);
  padding: var(--oc-space-16) var(--oc-space-6);
}

.oc-section-inner {
  max-width: 1200px;
  margin-inline: auto;
}

/* Section heading */
.oc-section-eyebrow {
  display: inline-block;
  font-size: 1.0rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--oc-blue);
  margin-bottom: var(--oc-space-3);
}
.oc-section-eyebrow--gold { color: var(--oc-gold); }

.oc-section-title {
  font-family: var(--oc-font-display);
  font-size: clamp(2.4rem, 4.7vw, 3.4rem);
  font-weight: 700;
  color: var(--oc-text-primary);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: var(--oc-space-4);
}
.oc-section-title--light { color: #fff; }

.oc-section-sub {
  font-size: 1.2rem;
  color: var(--oc-text-muted);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: var(--oc-space-8);
}
.oc-section-sub--light { color: rgba(244,246,250,.6); }

/* ----------------------------------------------------------
   14. Pipeline / Feature cards
   ---------------------------------------------------------- */
.oc-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--oc-space-5);
}

.oc-feature-card {
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius-lg);
  padding: var(--oc-space-6);
  transition: box-shadow var(--oc-transition), transform var(--oc-transition), border-color var(--oc-transition);
}
.oc-feature-card:hover {
  box-shadow: var(--oc-shadow-lg);
  border-color: rgba(0,87,255,0.15);
  transform: translateY(-3px);
}

.oc-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--oc-radius-sm);
  background: var(--oc-primary-xlight);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  margin-bottom: var(--oc-space-4);
  flex-shrink: 0;
}
.oc-feature-icon--gold { background: rgba(201,164,74,.12); }
.oc-feature-icon--dark { background: rgba(10,12,18,.08); }

.oc-feature-title {
  font-family: var(--oc-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--oc-text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.oc-feature-desc {
  font-size:1.2rem;
  color: var(--oc-text-muted);
  line-height: 1.65;
}

/* ----------------------------------------------------------
   15. Data table
   ---------------------------------------------------------- */
.oc-table {
  width: 100%;
  border-collapse: collapse;
  font-size:1.2rem;
}
.oc-table th {
  padding: 10px 14px;
  text-align: left;
  font-size:  1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--oc-text-muted);
  border-bottom: 1px solid var(--oc-border);
  white-space: nowrap;
}
.oc-table td {
  padding: 12px 14px;
  color: var(--oc-text-primary);
  border-bottom: 1px solid var(--oc-border);
  vertical-align: middle;
}
.oc-table tr:last-child td { border-bottom: none; }
.oc-table tr:hover td { background: var(--oc-surface-alt); }

/* ----------------------------------------------------------
   16. Hero utilities
   ---------------------------------------------------------- */
.oc-hero {
  background: var(--oc-navy);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.oc-hero__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: 80px var(--oc-space-6) 72px;
  position: relative;
  z-index: 1;
}

.oc-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 5px 14px;
  font-size: 1.2rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--oc-space-5);
}

.oc-hero__title {
  font-family: var(--oc-font-display);
  font-size: clamp(3.0rem, 6.5vw, 5.1rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: var(--oc-space-5);
}

.oc-hero__sub {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.75;
  max-width: 540px;
  margin-bottom: var(--oc-space-8);
}

/* Gradient accent text */
.oc-gradient-text {
  background: linear-gradient(90deg, #3B7FFF 0%, #60CFFF 60%, var(--oc-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.oc-gradient-text--gold {
  background: var(--oc-gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ----------------------------------------------------------
   17. Dividers & utility
   ---------------------------------------------------------- */
.oc-divider {
  height: 1px;
  background: var(--oc-border);
  margin: var(--oc-space-5) 0;
}
.oc-divider--dark {
  background: rgba(255,255,255,0.07);
}

.oc-text-muted    { color: var(--oc-text-muted) !important; }
.oc-text-primary  { color: var(--oc-text-primary) !important; }
.oc-text-blue     { color: var(--oc-blue) !important; }
.oc-text-gold     { color: var(--oc-gold) !important; }
.oc-text-white    { color: #fff !important; }
.oc-text-success  { color: var(--oc-success) !important; }
.oc-text-danger   { color: var(--oc-danger) !important; }

.oc-fw-700 { font-weight: 700; }
.oc-fw-600 { font-weight: 600; }

/* ----------------------------------------------------------
   18. Post card (app feed)
   ---------------------------------------------------------- */
.oc-post-card {
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius-md);
  overflow: hidden;
  transition: box-shadow var(--oc-transition);
}
.oc-post-card:hover { box-shadow: var(--oc-shadow-md); }

.oc-post-card__image-wrap { display: block; overflow: hidden; }
.oc-post-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.oc-post-card__image-wrap:hover .oc-post-card__image { transform: scale(1.02); }

/* ----------------------------------------------------------
   19. Stat cards (dashboard)
   ---------------------------------------------------------- */
.oc-stat-card {
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius-md);
  padding: var(--oc-space-5);
  transition: box-shadow var(--oc-transition), transform var(--oc-transition);
}
.oc-stat-card:hover {
  box-shadow: var(--oc-shadow-md);
  transform: translateY(-2px);
}
.oc-stat-card__num {
  font-family: var(--oc-font-display);
  font-size: 2.7rem;
  font-weight: 800;
  color: var(--oc-text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
}
.oc-stat-card__label {
  font-size:  1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--oc-text-muted);
}
.oc-stat-card__accent {
  width: 3px;
  height: 36px;
  border-radius: 2px;
  background: var(--oc-blue);
  flex-shrink: 0;
}
.oc-stat-card__accent--gold { background: var(--oc-gold); }
.oc-stat-card__accent--green { background: var(--oc-success); }

/* ----------------------------------------------------------
   20. Empty states
   ---------------------------------------------------------- */
.oc-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--oc-surface);
  border: 1px dashed rgba(0,0,0,0.12);
  border-radius: var(--oc-radius-lg);
}
.oc-empty__icon {
  font-size: 3.0rem;
  margin-bottom: var(--oc-space-3);
  opacity: 0.35;
  display: block;
}
.oc-empty__title {
  font-family: var(--oc-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--oc-text-primary);
  margin-bottom: var(--oc-space-2);
}
.oc-empty__desc {
  font-size:1.2rem;
  color: var(--oc-text-muted);
  margin-bottom: var(--oc-space-5);
  line-height: 1.6;
}

/* ----------------------------------------------------------
   21. Responsive container breakpoints
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .oc-container { padding-inline: var(--oc-space-4); }
  .oc-hero__inner { padding: 56px var(--oc-space-4) 48px; }
  .oc-section-dark,
  .oc-section-light,
  .oc-section-white { padding: var(--oc-space-12) var(--oc-space-4); }
}

/* ----------------------------------------------------------
   22. Pipeline Progress Tracker
   ---------------------------------------------------------- */
.pd-pipeline {
  margin: 24px 0 8px;
  padding: 20px 24px;
  background: #f4f7fb;
  border: 1px solid #e0e8f4;
  border-radius: 12px;
}
.pd-pipeline__label {
  font-size:  1.2rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--oc-blue);
  margin: 0 0 16px;
}
.pd-pipeline__track {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}
.pd-pipeline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.pd-pipeline__dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #d1d9e6;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:  1.2rem;
  font-weight: 700;
  transition: background .2s, color .2s;
}
.pd-pipeline__step--active .pd-pipeline__dot {
  background: var(--oc-blue);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(27,94,199,.18);
}
.pd-pipeline__step--done .pd-pipeline__dot {
  background: #16a34a;
  color: #fff;
}
.pd-pipeline__name {
  font-size:  1.2rem;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
}
.pd-pipeline__step--active .pd-pipeline__name { color: var(--oc-blue); }
.pd-pipeline__step--done .pd-pipeline__name   { color: #16a34a; }
.pd-pipeline__connector {
  flex: 1;
  min-width: 24px;
  height: 3px;
  background: #d1d9e6;
  margin-bottom: 18px;
  border-radius: 2px;
  transition: background .2s;
}
.pd-pipeline__connector--done { background: #16a34a; }
.pd-pipeline__actions {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pd-pipeline__status {
  font-size:1.2rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
}
.pd-pipeline__status--pending  { background: #fef9c3; color: #854d0e; }
.pd-pipeline__status--rejected { background: #fee2e2; color: #991b1b; }
.pd-pipeline__status--done     { background: #dcfce7; color: #166534; }

/* Small button variant */
.oc-btn--sm {
  padding: 5px 14px;
  font-size: 1.2rem;
}
.oc-btn--primary {
  background: var(--oc-blue);
  color: #fff;
  border: none;
}
.oc-btn--primary:hover { background: var(--oc-blue-dark); color: #fff; }

/* ----------------------------------------------------------
   23. Admin Stage Approvals page
   ---------------------------------------------------------- */
.adm-stage-table { width: 100%; border-collapse: collapse; font-size:1.2rem; }
.adm-stage-table th {
  text-align: left; padding: 10px 14px; background: #f4f7fb;
  color: #374151; font-weight: 700; border-bottom: 2px solid #e0e8f4;
}
.adm-stage-table td {
  padding: 12px 14px; border-bottom: 1px solid #f0f0f0; vertical-align: middle;
}
.adm-stage-table tr:hover td { background: #f9fafb; }
.stage-badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 1.2rem; font-weight: 700; text-transform: capitalize;
}
.stage-badge--idea       { background: #e0e8ff; color: #3730a3; }
.stage-badge--validation { background: #fef9c3; color: #854d0e; }
.stage-badge--investment { background: #dcfce7; color: #166534; }
.stage-badge--growth     { background: #fce7f3; color: #9d174d; }
.adm-approve-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-approve-form input[type=text] {
  border: 1px solid #d1d5db; border-radius: 6px;
  padding: 5px 10px; font-size: 1.2rem; min-width: 140px;
}
.btn-approve {
  /* background: #16a34a; color: #fff; border: none; */
  padding: 5px 14px; border-radius: 6px; font-size: 1.2rem;
  font-weight: 700; cursor: pointer;
}
.btn-approve:hover { background: #15803d; }
.btn-reject {
  background: #dc2626; color: #fff; border: none;
  padding: 5px 14px; border-radius: 6px; font-size: 1.2rem;
  font-weight: 700; cursor: pointer;
}
.btn-reject:hover { background: #b91c1c; }

/* ----------------------------------------------------------
   24. Trust Badges — Verified, Review Status
   ---------------------------------------------------------- */
.oc-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e0f2fe;
  color: #0369a1;
  font-size:  1.2rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .02em;
  vertical-align: middle;
  white-space: nowrap;
}
.oc-verified-badge svg,
.oc-verified-badge .vb-icon { width: 12px; height: 12px; }

.oc-review-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size:  1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
}
.oc-review-badge--draft        { background: #f3f4f6; color: #6b7280; }
.oc-review-badge--under_review { background: #fef9c3; color: #854d0e; }
.oc-review-badge--approved     { background: #dcfce7; color: #166534; }
.oc-review-badge--featured     { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }
.oc-review-badge--rejected     { background: #fee2e2; color: #991b1b; }

/* Featured star accent */
.oc-featured-star {
  display: inline-block;
  color: #f59e0b;
  font-size: 1.2rem;
  vertical-align: middle;
  margin-right: 2px;
}

/* Verification status pill on profile */
.oc-verif-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 20px;
  font-size:  1.2rem;
  font-weight: 700;
}
.oc-verif-pill--verified   { background: #dcfce7; color: #166534; }
.oc-verif-pill--pending    { background: #fef9c3; color: #854d0e; }
.oc-verif-pill--rejected   { background: #fee2e2; color: #991b1b; }
.oc-verif-pill--unverified { background: #f3f4f6; color: #6b7280; }

/* Admin queue tables (reused for verification + project reviews) */
.adm-queue-table { width: 100%; border-collapse: collapse; font-size:1.2rem; }
.adm-queue-table th {
  text-align: left; padding: 10px 14px; background: #f4f7fb;
  color: #374151; font-weight: 700; border-bottom: 2px solid #e0e8f4;
}
.adm-queue-table td {
  padding: 12px 14px; border-bottom: 1px solid #f0f0f0; vertical-align: middle;
}
.adm-queue-table tr:hover td { background: #f9fafb; }

/* ----------------------------------------------------------
   25. UI Polish — Hover effects, Transitions, Skeletons
   ---------------------------------------------------------- */

/* Global smooth transitions on interactive elements */
a, button, .oc-card, .oc-btn, input, textarea, select {
  transition-property: box-shadow, border-color, background-color, color, transform, opacity;
  transition-duration: 0.18s;
  transition-timing-function: ease;
}

/* Card lift on hover */
.oc-card:hover {
  box-shadow: 0 8px 28px rgba(27, 94, 199, 0.12);
  transform: translateY(-2px);
}

/* Button depth effect */
.oc-btn:active { transform: translateY(1px); box-shadow: none; }

/* Input focus glow */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--oc-blue) !important;
  box-shadow: 0 0 0 3px rgba(27, 94, 199, 0.12);
}

/* Loading Skeleton */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 6px;
  display: block;
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text--sm { height: 10px; width: 60%; }
.skeleton-text--lg { height: 20px; }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }
.skeleton-card { height: 180px; border-radius: 14px; }
.skeleton-img { height: 160px; border-radius: 10px; }
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Page-level fade-in */
.oc-fade-in {
  animation: ocFadeIn 0.35s ease both;
}
@keyframes ocFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger children */
.oc-stagger > * { animation: ocFadeIn 0.35s ease both; }
.oc-stagger > *:nth-child(1)  { animation-delay: 0.04s; }
.oc-stagger > *:nth-child(2)  { animation-delay: 0.08s; }
.oc-stagger > *:nth-child(3)  { animation-delay: 0.12s; }
.oc-stagger > *:nth-child(4)  { animation-delay: 0.16s; }
.oc-stagger > *:nth-child(5)  { animation-delay: 0.20s; }
.oc-stagger > *:nth-child(6)  { animation-delay: 0.24s; }

/* Match score donut pulse on hover */
.match-score-pulse:hover {
  animation: scorePulse 0.6s ease;
}
@keyframes scorePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Service card hover lift */
.oc-service-card {
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.oc-service-card:hover {
  box-shadow: 0 8px 28px rgba(27, 94, 199, 0.14);
  transform: translateY(-4px);
  border-color: var(--oc-blue);
}

/* Animated counter number */
.oc-counter {
  display: inline-block;
  transition: all 0.3s;
}

/* Notification dot pulse */
.oc-notif-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--oc-danger);
  animation: notifPulse 2s ease infinite;
}
@keyframes notifPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* Progress bar animated fill */
.oc-progress-animated {
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Smooth panel reveal */
.oc-panel {
  animation: ocSlideIn 0.25s ease both;
}
@keyframes ocSlideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Feature highlight shimmer (for CTAs) */
.oc-shimmer-btn {
  position: relative;
  overflow: hidden;
}
.oc-shimmer-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: btnShimmer 2.5s ease infinite;
}
@keyframes btnShimmer {
  0%   { left: -100%; }
  50%, 100% { left: 140%; }
}

/* ----------------------------------------------------------
   Searchable Combobox (.oc-combo)
   ---------------------------------------------------------- */
.oc-combo {
  position: relative;
}
.oc-combo__input {
  width: 100%;
}
.oc-combo__list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid #c7d9ff;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,74,173,0.12);
  max-height: 220px;
  overflow-y: auto;
  z-index: 9999;
  padding: 4px 0;
  margin: 0;
  list-style: none;
}
.oc-combo__item {
  padding: 9px 14px;
  font-size:1.2rem;
  color: #1a1a2e;
  cursor: pointer;
  transition: background .12s;
}
.oc-combo__item:hover {
  background: #f0f5ff;
  color: #004AAD;
}
.oc-combo__add {
  padding: 9px 14px;
  font-size:1.2rem;
  color: #004AAD;
  font-weight: 600;
  cursor: pointer;
  border-top: 1px solid #e9f0ff;
}
.oc-combo__add:hover {
  background: #f0f5ff;
}

/* ----------------------------------------------------------
   Avatar / Photo Picker (.oc-picker-*)
   ---------------------------------------------------------- */
.oc-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid #c7d9ff;
  border-radius: 8px;
  padding: 7px 13px;
  font-size:  1.2rem;
  font-weight: 600;
  color: #004AAD;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  margin-top: 8px;
}
.oc-pick-btn:hover { background: #f0f5ff; border-color: #004AAD; }
.oc-pick-btn svg { flex-shrink: 0; }

.oc-picker-panel {
  display: none;
  margin-top: 10px;
  background: #fff;
  border: 1.5px solid #c7d9ff;
  border-radius: 12px;
  padding: 14px 14px 10px;
  box-shadow: 0 4px 18px rgba(0,74,173,.10);
}
.oc-picker-label {
  font-size:  1.2rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 10px;
}
.oc-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.oc-picker-item {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  border: 2.5px solid transparent;
  transition: border-color .15s, transform .12s;
  flex-shrink: 0;
}
.oc-picker-item:hover { border-color: #004AAD; transform: scale(1.06); }
.oc-picker-item--selected { border-color: #10b981 !important; }
.oc-picker-item canvas { display: block; }

/* ── Hashtag styles ──────────────────────────────────────────────────────── */
.oc-hashtag {
  color: #0057FF;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}
.oc-hashtag:hover { color: #003ecc; text-decoration: underline; }

/* Autocomplete dropdown */
.oc-ht-dropdown {
  position: absolute;
  z-index: 9999;
  background: #fff;
  border: 1px solid #e0e8f4;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,87,255,.13);
  min-width: 200px;
  max-height: 220px;
  overflow-y: auto;
  display: none;
}
.oc-ht-item {
  padding: 8px 14px;
  font-size:1.2rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background .1s;
}
.oc-ht-item:hover { background: #f4f8ff; }
.oc-ht-item__name { color: #0057FF; font-weight: 700; }
.oc-ht-item__count { font-size:  1.2rem; color: #9ca3af; }

/* ── Form validation — Oduma Corp note-label style ───────────────────────── */

/* Inline field error label */
.oc-field-err {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 5px 11px 5px 9px;
  /* Unique Oduma touch: square-left + rounded-right + 3px brand-colored left stripe */
  border-radius: 0 20px 20px 0;
  border-top:    1px solid rgba(220,38,38,0.22);
  border-right:  1px solid rgba(220,38,38,0.22);
  border-bottom: 1px solid rgba(220,38,38,0.22);
  border-left:   3px solid #DC2626;
  background: linear-gradient(to right, rgba(220,38,38,0.07) 0%, rgba(220,38,38,0.02) 100%);
  color: #7f1d1d;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.4;
  max-width: 100%;
}
.oc-field-err .oc-fe-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #DC2626;
  flex-shrink: 0;
}
.oc-field-err .oc-fe-txt { flex: 1; }

/* Invalid input highlight */
input.oc-invalid,
textarea.oc-invalid,
select.oc-invalid {
  border-color: rgba(220,38,38,0.55) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.08) !important;
}

/* Page-level form banner — same left-stripe concept, wider */
.oc-form-banner {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 16px 12px 14px;
  border-radius: 0 10px 10px 0;
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 18px;
}
.oc-form-banner svg { flex-shrink: 0; margin-top: 2px; }

.oc-form-banner--error {
  border-top:    1px solid rgba(220,38,38,0.20);
  border-right:  1px solid rgba(220,38,38,0.20);
  border-bottom: 1px solid rgba(220,38,38,0.20);
  border-left:   3px solid #DC2626;
  background: linear-gradient(to right, rgba(220,38,38,0.07), rgba(220,38,38,0.02));
  color: #7f1d1d;
}
.oc-form-banner--success {
  border-top:    1px solid rgba(5,150,105,0.22);
  border-right:  1px solid rgba(5,150,105,0.22);
  border-bottom: 1px solid rgba(5,150,105,0.22);
  border-left:   3px solid #059669;
  background: linear-gradient(to right, rgba(5,150,105,0.07), rgba(5,150,105,0.02));
  color: #065f46;
}
.oc-form-banner--warning {
  border-top:    1px solid rgba(217,119,6,0.22);
  border-right:  1px solid rgba(217,119,6,0.22);
  border-bottom: 1px solid rgba(217,119,6,0.22);
  border-left:   3px solid #D97706;
  background: linear-gradient(to right, rgba(217,119,6,0.07), rgba(217,119,6,0.02));
  color: #78350f;
}
.oc-form-banner--info {
  border-top:    1px solid rgba(27,94,199,0.22);
  border-right:  1px solid rgba(27,94,199,0.22);
  border-bottom: 1px solid rgba(27,94,199,0.22);
  border-left:   3px solid var(--oc-blue, #1B5EC7);
  background: linear-gradient(to right, rgba(27,94,199,0.07), rgba(27,94,199,0.02));
  color: var(--oc-navy, #092147);
}

/* Hashtag hint below inputs */
.oc-ht-hint {
  font-size:  1.2rem;
  color: #9ca3af;
  margin-top: 4px;
}


/* ── iOS zoom prevention: force 16px min on all inputs at mobile ── */
@media (max-width: 767px) {
  input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    font-size: max(16px, 1em) !important;
  }
}