/* Base styling and Custom Properties */
:root {
  --onyx: #0a0a0a;
  --onyx-light: #171717;
  --slate-400: #94a3b8;
  --slate-200: #e2e8f0;
  --slate-500: #64748b;
  --white: #ffffff;
  /* Premium Slate Blue Accent */
  --accent: #93c5fd; 
  --accent-light: rgba(147, 197, 253, 0.1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--onyx);
  color: var(--slate-400);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  position: relative;
}

/* Tailwind-like utilities */
.bg-onyx { background-color: var(--onyx); }
.text-slate { color: var(--slate-400); }
.text-slate-200 { color: var(--slate-200); }
.text-slate-400 { color: var(--slate-400); }
.text-slate-500 { color: var(--slate-500); }
.text-white { color: var(--white); }
.text-accent { color: var(--accent); }
.bg-accent\/10 { background-color: var(--accent-light); }

.mx-auto { margin-left: auto; margin-right: auto; }
.min-h-screen { min-height: 100vh; }
.max-w-screen-xl { max-width: 1280px; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-16 { margin-top: 4rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 1rem; }
.mr-5 { margin-right: 1.25rem; }
.max-w-xs { max-width: 20rem; }
.w-max { width: max-content; }
.w-full { width: 100%; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.grid { display: grid; }
.block { display: block; }
.hidden { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.rounded-md { border-radius: 0.375rem; }
.rounded-full { border-radius: 9999px; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.pb-1 { padding-bottom: 0.25rem; }

.font-sans { font-family: 'Inter', sans-serif; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-widest { letter-spacing: 0.1em; }
.uppercase { text-transform: uppercase; }
.leading-normal { line-height: 1.5; }
.leading-snug { line-height: 1.375; }
.leading-tight { line-height: 1.25; }
.scroll-mt-16 { scroll-margin-top: 4rem; }

/* Responsive adjustments */
@media (min-width: 640px) {
  .sm\:text-5xl { font-size: 3rem; line-height: 1; }
  .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
  .sm\:col-span-6 { grid-column: span 6 / span 6; }
  .sm\:col-span-8 { grid-column: span 8 / span 8; }
  .sm\:gap-8 { gap: 2rem; }
}

@media (min-width: 768px) {
  .md\:px-12 { padding-left: 3rem; padding-right: 3rem; }
  .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .md\:gap-4 { gap: 1rem; }
}

@media (min-width: 1024px) {
  .lg\:px-24 { padding-left: 6rem; padding-right: 6rem; }
  .lg\:py-0 { padding-top: 0; padding-bottom: 0; }
  .lg\:flex { display: flex; }
  .lg\:block { display: block; }
  .lg\:justify-between { justify-content: space-between; }
  .lg\:w-1\/2 { width: 50%; }
  .lg\:w-full { width: 100%; }
  .lg\:flex-col { flex-direction: column; }
  .lg\:sticky { position: sticky; }
  .lg\:top-0 { top: 0; }
  .lg\:top-auto { top: auto; }
  .lg\:max-h-screen { max-height: 100vh; }
  .lg\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .lg\:opacity-0 { opacity: 0; }
  .lg\:sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
  .lg\:hover\:\!opacity-100:hover { opacity: 1 !important; }
  
  .group\/list:hover .lg\:group-hover\/list\:opacity-50 { opacity: 0.5; }
  
  .lg\:block.absolute.-inset-x-6.-inset-y-4 { 
    left: -1.5rem; right: -1.5rem; top: -1rem; bottom: -1rem;
  }
  
  .group:hover .lg\:group-hover\:bg-slate-800\/20 { background-color: rgba(30, 41, 59, 0.4); }
  .group:hover .lg\:group-hover\:shadow-\[inset_0_1px_0_0_rgba\(148\,163\,184\,0\.1\)\] { box-shadow: inset 0 1px 0 0 rgba(148,163,184,0.1); }
  .group:hover .lg\:group-hover\:drop-shadow-lg { filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)); }
}

/* Typography styles */
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; padding: 0; margin: 0; }

/* Custom Nav Indicator */
.nav-indicator {
  display: block;
  height: 1px;
  width: 2rem;
  background-color: var(--slate-500);
  transition: all 0.2s ease-in-out;
  margin-right: 1rem;
}

.nav-text {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-500);
  transition: all 0.2s ease-in-out;
}

.nav a:hover .nav-indicator, .nav a.active .nav-indicator {
  width: 4rem;
  background-color: var(--slate-200);
}

.nav a:hover .nav-text, .nav a.active .nav-text {
  color: var(--slate-200);
}

/* Interactive Glow Effect */
#cursor-glow {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 30;
  /* Deep, subtle slate-blue glow for premium feel (no cyber neon) */
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(29, 78, 216, 0.07), transparent 40%);
}

/* Language Toggle */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-500);
}

.lang-toggle button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}

.lang-toggle button:hover {
  color: var(--slate-200);
}

.lang-toggle button.active {
  color: var(--accent);
}