/* Custom hyperlink styles */
a {
  color: #4c6ef5;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s, background-color 0.2s;
  background-color: #f0f4ff;
}
a:hover {
  color: #4263eb;
  background-color: #e6fcf5;
  text-decoration-thickness: 2px;
}
/* Markdown prose styles */
.prose h1  { font-size: 4rem; font-weight: 700; margin: 1.5rem 0 0.5rem; letter-spacing: -0.01em; color: #1a1a2e; }
.prose h2  { font-size: 1.1rem; font-weight: 600; margin: 1.25rem 0 0.4rem; padding-bottom: 0.35rem; border-bottom: 1px solid rgba(0,0,0,0.06); color: #1a1a2e; }
.prose h3  { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.35rem; color: #1a1a2e; }
.prose p   { margin-bottom: 0.75rem; line-height: 1.75; }
.prose ul  { list-style: none; padding-left: 0; margin-bottom: 0.75rem; }
.prose ul li { position: relative; padding-left: 1.25rem; margin-bottom: 0.35rem; }
.prose ul li::before { content: '→'; position: absolute; left: 0; color: #748ffc; font-weight: 600; }
.prose ul li ul li::before { content: none; }
.prose ul li ul li { padding-left: 0; }
.prose ol  { list-style: decimal; padding-left: 1.25rem; margin-bottom: 0.75rem; }
.prose li  { margin-bottom: 0.3rem; line-height: 1.65; }
.prose strong { font-weight: 600; color: #1a1a2e; }
.prose a { color: #4c6ef5; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s; }
.prose a:hover { color: #4263eb; }
.prose blockquote {
  border-left: 3px solid #748ffc;
  padding: 0.75rem 1rem;
  color: #6b7280;
  font-style: italic;
  margin: 0.75rem 0;
  background: rgba(116,143,252,0.04);
  border-radius: 0 8px 8px 0;
}
/* Custom header title style to override Tailwind */
.header-title {
  margin: 0;
  line-height: 0.2;
  font-size: 4rem!important;
  color: #1a1a2e;
}
@media (prefers-color-scheme: dark) {
  .header-title {
    color: #e5e7eb;
  }
}
.prose hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.25rem 0; }
@media (prefers-color-scheme: dark) {
  .prose h1, .prose h2, .prose h3 { color: #e5e7eb; }
  .prose h2 { border-bottom-color: rgba(255,255,255,0.06); }
  .prose strong { color: #e5e7eb; }
  .prose a { color: #748ffc; }
  .prose a:hover { color: #bac8ff; }
  .prose blockquote { border-left-color: #4c6ef5; color: #9ca3af; background: rgba(76,110,245,0.06); }
  .prose hr { border-top-color: #374151; }
}

.dotgrid-bg {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D'19'%20height%3D'19'%20viewBox%3D'0%200%2019%2019'%20xmlns%3D'http://www.w3.org/2000/svg'%3E%3Ccircle%20cx%3D'9.5'%20cy%3D'9.5'%20r%3D'1.1'%20fill%3D'%23ddd'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-attachment: fixed;
  /* background-color: #F5F5F5 !important; */
}
/* Optionally, ensure .bg-mesh and .bg-glass remain visible above the dotgrid */
.bg-mesh, .bg-glass, .bg-morph {
  position: relative;
  z-index: 1;
}

/* Subtle gradient background */
.bg-mesh {
  background: linear-gradient(135deg, rgba(116,143,252,0.03) 0%, transparent 50%, rgba(56,217,169,0.03) 100%);
}
.bg-glass {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-radius: 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 8px 32px rgba(76, 110, 245, 0.08),
    0 1.5px 0 0 rgba(255,255,255,0.9) inset,
    0 -1px 0 0 rgba(120, 140, 200, 0.12) inset;
}
@media (prefers-color-scheme: dark) {
  .bg-glass {
    background: rgba(30, 36, 54, 0.45);
    border-color: rgba(120, 150, 220, 0.18);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.25),
      0 1.5px 0 0 rgba(120, 150, 220, 0.10) inset;
  }
}
.bg-morph {
  /* glassmorphism with a hint of mesh */
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background-image: linear-gradient(135deg, rgba(116,143,252,0.02) 0%, transparent 50%, rgba(56,217,169,0.02) 100%);
}
@media (prefers-color-scheme: dark) {
  .bg-mesh {
    background: linear-gradient(135deg, rgba(116,143,252,0.05) 0%, transparent 50%, rgba(56,217,169,0.04) 100%);
  }
}

/* Tab icons */
.tab-icon { display: inline-block; margin-right: 0.35rem; font-size: 0.85em; }
.tab-icon.profile { color: #4c6ef5; } /* blue */
.tab-icon.partners { color: #f59f00; } /* orange */
.tab-icon.funding { color: #20c997; } /* green */

/* Card hover lift */
.card-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-lift:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,0,0,0.06); }

/* Animated gradient border on textarea focus */
.textarea-glow:focus {
  border-color: #748ffc;
  box-shadow: 0 0 0 3px rgba(116,143,252,0.12);
}

/* Loading bar shimmer */
.shimmer-bar {
  background: linear-gradient(90deg, transparent 0%, rgba(116,143,252,0.15) 50%, transparent 100%);
  background-size: 200% 100%;
}
.leadmagnet-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.reflect-logo {
  display: inline-block;
  font-family: 'Just Another Hand', cursive;
  font-weight: 500;
  font-size: 2.5rem;
  pointer-events: none;
  z-index: 2;
}
.reflect-text { 
  position: relative;
}
.reflect-text::after { 
  content: ''; 
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.5em;
  color: #000000;
  background: linear-gradient(to bottom, rgba(116,143,252,0.25) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%); 
}
.reflect-logo-icons {
  position: absolute;
  left: 0;/* adjust as needed to align with R */
  margin-right: 0.5rem;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  justify-content: center;
  font-size: 0.85rem;
  line-height: 1.1;
  z-index: 3;
}
.reflect-logo-icons .icon-profile { color: #4c6ef5; }
.reflect-logo-icons .icon-partners { color: #f59f00; }
.reflect-logo-icons .icon-funding { color: #20c997; }

/* How-to title style */
.section-title {
  font-size: 2.2rem;
  font-weight: 500;
  color: #1a1a2e;
  line-height: 1.1;
}
@media (max-width: 600px) {
  .section-title {
    font-size: 1.8rem;
  }
}
@media (prefers-color-scheme: dark) {
  .section-title {
    color: #e5e7eb;
  }
}