/* Minimal custom CSS kept only for the subtle grid background + smooth scrolling */
:root{
  --grid: rgba(14,165,255,.12);
}

/* Respect Tailwind's font stack but keep Poppins */
html,body{scroll-behavior:smooth}

/* Light grid */
body.subtle-grid{
  min-height:100vh;
  background-color: #e6ebf2;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:100% 44px,44px 100%;
}

/* Dark grid */
html.dark body.subtle-grid{
  background-color:#070b14;
  --grid: rgba(56,189,248,.10);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
}

/* Logo inversion in dark mode */
.logo-invert {
  filter: none;
  transition: filter .3s ease;
}
html.dark .logo-invert {
  filter: brightness(0) invert(1);
}

/* Mouse scroll indicator */
.mouse {
  position: relative;
  width: 26px;
  height: 40px;
  border: 2px solid rgba(100,116,139,0.8);
  border-radius: 12px;
  margin: 0 auto 10px;
}
.mouse::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 8px;
  background: rgb(56 189 248);
  border-radius: 3px;
  animation: mouseScroll 2s infinite;
}
@keyframes mouseScroll {
  0%   { transform: translate(-50%, 0); opacity: 1; }
  40%  { transform: translate(-50%, 10px); opacity: 0; }
  60%  { transform: translate(-50%, -4px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 1; }
}