@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ===== QRM Dark/Light Theme Global Overrides ===== */
/* 
  These overrides flip hardcoded dark Tailwind classes to light equivalents
  when html.light is active — covers ALL sub-pages automatically.
*/

/* Smooth body transitions */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ================================================================
   TEXT COLORS — Light Mode
   ================================================================ */
html.light .text-white:not(.force-white) {
  color: #111827 !important;
}
html.light .force-white {
  color: #ffffff !important;
}
html.light .text-gray-100 {
  color: #1f2937 !important;
}
html.light .text-gray-200 {
  color: #374151 !important;
}
html.light .text-gray-300 {
  color: #4b5563 !important;
}
html.light .text-gray-400 {
  color: #6b7280 !important;
}
html.light .text-gray-500 {
  color: #9ca3af !important;
}
html.light .text-gray-600 {
  color: #6b7280 !important;
}

/* ================================================================
   BACKGROUND COLORS — Light Mode
   ================================================================ */

/* Solid backgrounds */
html.light .bg-gray-950 {
  background-color: #f8fafc !important;
}
html.light .bg-gray-900 {
  background-color: #ffffff !important;
}
html.light .bg-gray-800 {
  background-color: #f3f4f6 !important;
}
html.light .bg-gray-700 {
  background-color: #e5e7eb !important;
}

/* Opacity variants — gray-950 */
html.light .bg-gray-950\/50,
html.light .bg-gray-950\/30,
html.light .bg-gray-950\/70 {
  background-color: rgba(248, 250, 252, 0.7) !important;
}

/* Opacity variants — gray-900 */
html.light .bg-gray-900\/50 {
  background-color: rgba(255, 255, 255, 0.8) !important;
}
html.light .bg-gray-900\/40 {
  background-color: rgba(255, 255, 255, 0.9) !important;
}
html.light .bg-gray-900\/30 {
  background-color: rgba(255, 255, 255, 0.8) !important;
}
html.light .bg-gray-900\/90 {
  background-color: rgba(249, 250, 251, 0.95) !important;
}
html.light .bg-gray-900\/80 {
  background-color: rgba(249, 250, 251, 0.9) !important;
}

/* Opacity variants — gray-800 */
html.light .bg-gray-800\/50,
html.light .bg-gray-800\/40,
html.light .bg-gray-800\/30 {
  background-color: rgba(243, 244, 246, 0.6) !important;
}
html.light .bg-gray-800\/80 {
  background-color: rgba(243, 244, 246, 0.9) !important;
}

/* Special dark backgrounds in sub-pages */
html.light .bg-\[#030712\] {
  background-color: #f8fafc !important;
}
html.light .bg-\[#0B1120\] {
  background-color: #f1f5f9 !important;
}
html.light .bg-\[#0F172A\] {
  background-color: #e2e8f0 !important;
}
html.light .bg-\[#0f172a\] {
  background-color: #e2e8f0 !important;
}
html.light .bg-\[#0A0A0A\]\/95 {
  background-color: rgba(255, 255, 255, 0.97) !important;
}

/* ================================================================
   BORDER COLORS — Light Mode
   ================================================================ */
html.light .border-gray-800 {
  border-color: #e5e7eb !important;
}
html.light .border-gray-800\/50 {
  border-color: rgba(229, 231, 235, 0.5) !important;
}
html.light .border-gray-700 {
  border-color: #d1d5db !important;
}
html.light .border-gray-700\/50 {
  border-color: rgba(209, 213, 219, 0.5) !important;
}
html.light .border-gray-700\/80 {
  border-color: rgba(209, 213, 219, 0.8) !important;
}
html.light .border-gray-600 {
  border-color: #9ca3af !important;
}
html.light .border-white\/10 {
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html.light .border-white\/5 {
  border-color: rgba(0, 0, 0, 0.05) !important;
}

/* ================================================================
   RING COLORS — Light Mode
   ================================================================ */
html.light .ring-white\/10 {
  --tw-ring-color: rgba(0, 0, 0, 0.08) !important;
}
html.light .ring-white\/5 {
  --tw-ring-color: rgba(0, 0, 0, 0.05) !important;
}
html.light .ring-gray-700 {
  --tw-ring-color: #d1d5db !important;
}
html.light .ring-gray-800 {
  --tw-ring-color: #e5e7eb !important;
}
html.light .ring-black\/50 {
  --tw-ring-color: rgba(0, 0, 0, 0.05) !important;
}

/* ================================================================
   DIVIDE COLORS — Light Mode
   ================================================================ */
html.light .divide-gray-800 > :not([hidden]) ~ :not([hidden]) {
  border-color: #e5e7eb !important;
}
html.light .divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
  border-color: #d1d5db !important;
}

/* ================================================================
   HOVER STATE OVERRIDES — Light Mode
   ================================================================ */
html.light .hover\:bg-gray-800:hover {
  background-color: #e5e7eb !important;
}
html.light .hover\:bg-gray-800\/50:hover {
  background-color: rgba(229, 231, 235, 0.5) !important;
}
html.light .hover\:bg-gray-700:hover {
  background-color: #d1d5db !important;
}
html.light .hover\:bg-gray-700\/80:hover {
  background-color: rgba(209, 213, 219, 0.8) !important;
}
html.light .hover\:bg-gray-600:hover {
  background-color: #d1d5db !important;
}
html.light .hover\:bg-white\/5:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
}
html.light .hover\:bg-gray-900\/40:hover {
  background-color: rgba(243, 244, 246, 0.6) !important;
}
html.light .hover\:text-white:hover {
  color: #111827 !important;
}
html.light .hover\:text-gray-300:hover {
  color: #374151 !important;
}
html.light .hover\:text-gray-200:hover {
  color: #1f2937 !important;
}
html.light .hover\:border-gray-700:hover {
  border-color: #9ca3af !important;
}
html.light .hover\:border-gray-600:hover {
  border-color: #9ca3af !important;
}
html.light .hover\:border-gray-500:hover {
  border-color: #9ca3af !important;
}
html.light .hover\:ring-gray-500:hover {
  --tw-ring-color: #9ca3af !important;
}

/* ================================================================
   GRADIENT OVERRIDES — Light Mode
   ================================================================ */
html.light .from-gray-950 {
  --tw-gradient-from: #f8fafc !important;
}
html.light .from-gray-900 {
  --tw-gradient-from: #ffffff !important;
}
html.light .to-gray-800 {
  --tw-gradient-to: #f3f4f6 !important;
}
html.light .via-gray-700 {
  --tw-gradient-via: #e5e7eb !important;
}

/* ================================================================
   SHADOW OVERRIDES — Light Mode
   ================================================================ */
html.light .shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1) !important;
}
html.light .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08) !important;
}
html.light .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06) !important;
}

/* ================================================================
   SPECIFIC COMPONENT FIXES — Light Mode
   ================================================================ */

/* Terminal/Code blocks should REMAIN dark - DO NOT make these light */
html.light .bg-\[#0f172a\].font-mono,
html.light div[class*="font-mono"].bg-\[#0f172a\],
html.light .font-mono .bg-\[#0f172a\] {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
}

/* Terminal block backgrounds should stay dark */
html.light .bg-\[#0f172a\]:has(.font-mono) {
  background-color: #0f172a !important;
}

/* Keep code blocks dark */
html.light pre {
  color: inherit;
}

/* Input fields in light mode */
html.light input.bg-gray-900,
html.light input.bg-gray-900\/50 {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
}
html.light input.bg-gray-900:focus,
html.light input.bg-gray-900\/50:focus {
  border-color: #22c55e !important;
}

html.light input.text-white {
  color: #111827 !important;
}

html.light .placeholder-gray-500::placeholder {
  color: #9ca3af !important;
}

/* Dashed borders */
html.light .border-dashed.border-gray-700 {
  border-color: #d1d5db !important;
}
html.light .border-dashed {
  border-color: #d1d5db !important;
}

/* Focus ring overrides */
html.light .focus\:ring-green-500:focus {
  --tw-ring-color: #22c55e !important;
}
html.light .focus\:border-green-500:focus {
  border-color: #22c55e !important;
}

/* Placeholder text */
html.light .placeholder-gray-400::placeholder {
  color: #9ca3af !important;
}

/* Border-b on items (timeline rows, FAQ items, etc) */
html.light .border-b.border-gray-800 {
  border-color: #e5e7eb !important;
}
html.light .border-t.border-gray-800 {
  border-color: #e5e7eb !important;
}
html.light .border-r.border-gray-800 {
  border-color: #e5e7eb !important;
}

/* group-hover overrides */
html.light .group-hover\:text-gray-200 {
  color: #374151 !important;
}
html.light .group-hover\:text-gray-100 {
  color: #1f2937 !important;
}
html.light .group:hover .group-hover\:text-white {
  color: #111827 !important;
}

/* bg-gradient-to-b/to-t overrides involving dark colors */
html.light .bg-gradient-to-b.from-gray-900\/80,
html.light .bg-gradient-to-b.from-gray-900 {
  --tw-gradient-from: rgba(249, 250, 251, 0.9) !important;
}
html.light .bg-gradient-to-b.to-black\/80,
html.light .bg-gradient-to-b.to-black {
  --tw-gradient-to: rgba(255, 255, 255, 0.9) !important;
}

/* Fix cards that use bg-gray-900/40 pattern */
html.light [class*="bg-gray-900/40"],
html.light [class*="bg-gray-900\/40"] {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-color: #e5e7eb !important;
}

/* Add subtle shadow to white cards in light mode */
html.light [class*="rounded-2xl"][class*="border"][class*="bg-gray-900"] {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}
html.light [class*="rounded-xl"][class*="border"][class*="bg-gray-900"] {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}
html.light [class*="rounded-lg"][class*="border"][class*="bg-gray-800"] {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* ================================================================
   SPECIFIC PAGE FIXES
   ================================================================ */

/* OurStory page timeline number styling */
html.light .text-5xl.font-black.text-gray-800,
html.light .text-6xl.font-black.text-gray-800 {
  color: #e5e7eb !important;
}
html.light .group:hover .group-hover\:text-gray-600 {
  color: #d1d5db !important;
}

/* Dashboard mockup — keep dark */
html.light .bg-\[#0B1120\]:has(.bg-\[#0F172A\]) {
  background-color: #0B1120 !important;
}

/* Profile card images - ensure ring visibility */
html.light .ring-2.ring-gray-800 {
  --tw-ring-color: #e5e7eb !important;
}

/* ================================================================
   GRADIENT BACKGROUNDS (multi-stop) — Light Mode
   ================================================================ */
html.light .bg-gradient-to-br.from-gray-900.to-gray-800 {
  background-image: linear-gradient(to bottom right, #ffffff, #f3f4f6) !important;
}
html.light .bg-gradient-to-tr.from-gray-900.to-gray-800 {
  background-image: linear-gradient(to top right, #ffffff, #f3f4f6) !important;
}
html.light .to-black {
  --tw-gradient-to: #f8fafc !important;
}
html.light .to-black\/80 {
  --tw-gradient-to: rgba(248, 250, 252, 0.9) !important;
}

/* ================================================================
   MORE HOVER AND INTERACTIVE FIXES
   ================================================================ */
html.light .hover\:bg-gray-800\/30:hover {
  background-color: rgba(243, 244, 246, 0.3) !important;
}
html.light .hover\:border-white:hover {
  border-color: #111827 !important;
}
html.light .hover\:text-green-300:hover {
  color: #10b981 !important;
}
html.light .hover\:text-blue-300:hover {
  color: #3b82f6 !important;
}
html.light .hover\:text-purple-300:hover {
  color: #a855f7 !important;
}
html.light a.text-white:hover {
  color: #111827 !important;
}

/* Ensure hover:text-gray-100 works */
html.light .group-hover\:text-gray-100 {
  color: #1f2937 !important;
}

/* ================================================================
   FIX: White text styled as CTA on bg-white in light mode
   We must NOT override white text on colored backgrounds (e.g. green/blue buttons)
   ================================================================ */
html.light .bg-green-600 .text-white,
html.light .bg-green-600.text-white,
html.light .bg-blue-600 .text-white,
html.light .bg-blue-600.text-white,
html.light .bg-white.text-white,
html.light button.bg-green-600,
html.light button.bg-blue-600,
html.light a.bg-white.text-gray-900 {
  color: inherit;
}

/* Fix: buttons on colored backgrounds should keep white text */
html.light .bg-green-600 *,
html.light .bg-green-700 *,
html.light .bg-blue-600 *,
html.light .bg-blue-700 *,
html.light .bg-\[#2563eb\] * {
  color: inherit;
}

/* ================================================================
   ENSURE SMOOTH TRANSITIONS ON THEME CHANGE
   ================================================================ */
footer, main, section, 
[class*="bg-gray-"], [class*="border-gray-"],
[class*="text-gray-"], [class*="text-white"] {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease, box-shadow 0.3s ease;
}

/* ================================================================
   OPENTOFU-STYLE HEADER — Full Rewrite
   ================================================================ */

/* --- Wrapper --- */
.ot-header {
  position: sticky;
  top: 0;
  z-index: 50;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}


/* --- Main Navbar --- */
.ot-navbar {
  background-color: #1b2533;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

html.light .ot-navbar {
  background-color: #ffffff;
  border-bottom-color: #e5e7eb;
}

.ot-navbar__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  height: 56px;
}

/* --- Left Section (Logo + Nav) --- */
.ot-navbar__left {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Logo */
.ot-navbar__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-right: 1.75rem;
  flex-shrink: 0;
  font-family: inherit;
}

.ot-navbar__logo-icon {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.3);
}

.ot-navbar__logo:hover .ot-navbar__logo-icon {
  transform: scale(1.06);
}

.ot-navbar__logo-img {
  width: 16px;
  height: 16px;
  user-select: none;
}

.ot-navbar__logo-text {
  font-size: 1.75rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  transition: color 0.2s ease;
}

html.light .ot-navbar__logo-text {
  color: #0f172a;
}

/* Nav links */
.ot-navbar__links {
  display: none;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .ot-navbar__links {
    display: flex;
  }
}

.ot-navbar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 4px;
  transition: opacity 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.5;
}

.ot-navbar__link:hover,
.ot-navbar__link--active {
  opacity: 0.8;
}

html.light .ot-navbar__link {
  color: #475569;
}

html.light .ot-navbar__link:hover,
html.light .ot-navbar__link--active {
  color: #0f172a;
}

.ot-navbar__chevron {
  width: 14px;
  height: 14px;
  opacity: 0.5;
  transition: transform 0.25s ease;
}

.ot-navbar__chevron--open {
  transform: rotate(180deg);
}

.ot-navbar__ext-icon {
  width: 11px;
  height: 11px;
  opacity: 0.35;
  margin-left: 1px;
}

/* --- Right Section --- */
.ot-navbar__right {
  display: none;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
}

@media (min-width: 768px) {
  .ot-navbar__right {
    display: flex;
  }
}

/* Power on Stack Button */
.ot-navbar__pos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.875rem;
  background-image: linear-gradient(90deg, #1d26e0, #7e0bc1, #ff6dfa);
  background-size: 200% auto;
  color: #ffffff !important;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: background-position 0.3s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(126, 11, 193, 0.25);
}

.ot-navbar__pos-btn:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 109, 250, 0.35);
}

/* GitHub Star Button */
.ot-navbar__star-btn {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  text-decoration: none;
  overflow: hidden;
  font-family: inherit;
  transition: border-color 0.2s ease;
  height: 30px;
}

.ot-navbar__star-btn:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

html.light .ot-navbar__star-btn {
  border-color: #d1d5db;
}

html.light .ot-navbar__star-btn:hover {
  border-color: #9ca3af;
}

.ot-navbar__star-left {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.5rem;
  background-color: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  font-size: 0.75rem;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.ot-navbar__star-btn:hover .ot-navbar__star-left {
  background-color: rgba(255, 255, 255, 0.12);
}

html.light .ot-navbar__star-left {
  background-color: #f3f4f6;
  color: #374151;
}

html.light .ot-navbar__star-btn:hover .ot-navbar__star-left {
  background-color: #e5e7eb;
}

.ot-navbar__star-gh-icon {
  width: 14px;
  height: 14px;
}

.ot-navbar__star-label {
  font-size: 0.75rem;
  line-height: 1;
}

.ot-navbar__star-count {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  background-color: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 600;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s ease;
}

.ot-navbar__star-btn:hover .ot-navbar__star-count {
  background-color: rgba(255, 255, 255, 0.07);
}

html.light .ot-navbar__star-count {
  background-color: #ffffff;
  color: #475569;
  border-left-color: #d1d5db;
}

html.light .ot-navbar__star-btn:hover .ot-navbar__star-count {
  background-color: #f9fafb;
}

/* Social Icons Row */
.ot-navbar__socials {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.ot-navbar__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #f8fafc;
  border-radius: 6px;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.ot-navbar__social:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

html.light .ot-navbar__social {
  color: #0f172a;
}

html.light .ot-navbar__social:hover {
  color: #000000;
  background-color: rgba(0, 0, 0, 0.08);
}

.ot-navbar__social-svg {
  width: 20px;
  height: 20px;
}

/* Theme Toggle */
.ot-navbar__theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #f8fafc;
  border-radius: 6px;
  border: none;
  background: none;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.ot-navbar__theme-btn:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

html.light .ot-navbar__theme-btn {
  color: #0f172a;
}

html.light .ot-navbar__theme-btn:hover {
  color: #000000;
  background-color: rgba(0, 0, 0, 0.08);
}

.ot-navbar__theme-wrap {
  position: relative;
  width: 18px;
  height: 18px;
}

.ot-navbar__theme-icon {
  width: 18px;
  height: 18px;
  position: absolute;
  inset: 0;
}

.ot-navbar__theme-icon--visible {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.ot-navbar__theme-icon--hidden {
  opacity: 0;
  transform: rotate(90deg) scale(0);
}

/* --- Mobile --- */
.ot-navbar__mobile {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

@media (min-width: 768px) {
  .ot-navbar__mobile {
    display: none;
  }
}

.ot-navbar__mobile-theme,
.ot-navbar__mobile-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #94a3b8;
  border-radius: 6px;
  border: none;
  background: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.ot-navbar__mobile-theme:hover,
.ot-navbar__mobile-burger:hover {
  color: #f1f5f9;
}

html.light .ot-navbar__mobile-theme,
html.light .ot-navbar__mobile-burger {
  color: #64748b;
}

html.light .ot-navbar__mobile-theme:hover,
html.light .ot-navbar__mobile-burger:hover {
  color: #0f172a;
}

/* Mobile Dropdown */
.ot-navbar__mobile-dropdown {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

html.light .ot-navbar__mobile-dropdown {
  border-top-color: #f1f5f9;
}

@media (min-width: 768px) {
  .ot-navbar__mobile-dropdown {
    display: none;
  }
}

.ot-navbar__mobile-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #94a3b8;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background-color 0.15s ease;
  text-align: left;
  width: 100%;
  font-family: inherit;
}

.ot-navbar__mobile-link:hover {
  color: #f1f5f9;
  background-color: rgba(255, 255, 255, 0.04);
}

html.light .ot-navbar__mobile-link {
  color: #475569;
}

html.light .ot-navbar__mobile-link:hover {
  color: #0f172a;
  background-color: rgba(0, 0, 0, 0.03);
}

.ot-navbar__mobile-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.75rem 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

html.light .ot-navbar__mobile-bottom {
  border-top-color: #e5e7eb;
}

.ot-navbar__mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff !important;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s ease;
  font-family: inherit;
}

.ot-navbar__mobile-cta:hover {
  opacity: 0.9;
}

.ot-navbar__mobile-gh {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #94a3b8;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
  font-family: inherit;
}

.ot-navbar__mobile-gh:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

html.light .ot-navbar__mobile-gh {
  color: #475569;
  background-color: #f3f4f6;
  border-color: #e2e8f0;
}

html.light .ot-navbar__mobile-gh:hover {
  background-color: #e5e7eb;
  color: #0f172a;
}