/* Custom Styles & Animations */
:root {
  --surface: #f7fcf9;
  --surface-low: #ecfdf5;
  --surface-lowest: #ffffff;
  --surface-highest: #d1d9d5;
  --primary: #064e3b;
  --primary-deep: #003527;
  --text: #191c1e;
  --text-muted: #3f4944;
  --outline: rgba(177, 192, 184, 0.2);
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--surface);
  color: var(--text);
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.display-lg {
  font-size: clamp(3rem, 6vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 900;
}

.headline-md {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.body-md {
  font-size: 0.9375rem;
  line-height: 1.7;
}

.label-sm {
  font-size: 0.6875rem;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 800;
}

.technical-grid {
  background-size: 40px 40px;
  background-image: linear-gradient(to right, rgba(6, 78, 59, 0.04) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(6, 78, 59, 0.04) 1px, transparent 1px);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px);
}

.glass-effect {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px);
}

.signature-texture {
  background: linear-gradient(180deg, var(--primary-deep) 0%, var(--primary) 100%);
}

.ambient-shadow {
  box-shadow: 0 24px 48px -12px rgba(19, 27, 46, 0.08);
}

.ghost-border {
  outline: 1px solid var(--outline);
}

/* Animation Classes */
.animate-fadeInUp {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fadeIn {
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
}

.animate-slideInLeft {
  opacity: 0;
  animation: slideInLeft 0.6s ease-out forwards;
}

.animate-slideInRight {
  opacity: 0;
  animation: slideInRight 0.6s ease-out forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

.site-shell {
  width: min(1440px, calc(100% - 3rem));
  margin: 0 auto;
}

.mobile-nav-panel {
  display: none;
}

.mobile-nav[open] .mobile-nav-panel {
  display: block;
}

@media (max-width: 768px) {
  .site-shell {
    width: min(1440px, calc(100% - 1.5rem));
  }

  .technical-grid {
    background-size: 20px 20px;
  }

  .display-lg {
    line-height: 1.02;
  }
}