/* Symbiosis Engine — Custom Styles */
:root {
  --void: #070709;
  --surface: #0f1117;
  --panel: #151820;
  --border: #1e2535;
  --emerald: #10b981;
  --amber: #f59e0b;
}
.grid-bg {
  background-image:
    linear-gradient(rgba(16, 185, 129, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.gradient-text {
  background: linear-gradient(135deg, #10b981 0%, #34d399 40%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
html { scroll-behavior: smooth; }
a:focus-visible, button:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; }
@supports not (backdrop-filter: blur(12px)) { nav { background-color: rgba(7,7,9,0.97) !important; } }
.divide-y > div { transition: background-color 0.2s ease; }
.divide-y > div:hover { background-color: rgba(16, 185, 129, 0.03); }
@media (max-width: 380px) { h1 { font-size: 2.4rem !important; line-height: 1.05 !important; } }