*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --tertiary-container: #545353;
  --error: #ba1a1a;
  --tertiary: #3d3c3c;
  --surface-variant: #e1e3e4;
  --secondary-container: #5dfd8a;
  --primary-fixed: #e8ddff;
  --on-primary-fixed-variant: #5300cd;
  --inverse-on-surface: #f0f1f2;
  --surface-container-high: #e7e8e9;
  --primary: #6D23F9;
  --background: #f8f9fa;
  --secondary-fixed-dim: #3de273;
  --on-secondary: #ffffff;
  --surface-container-highest: #e1e3e4;
  --on-primary-container: #d0beff;
  --surface-bright: #f8f9fa;
  --inverse-primary: #cfbdff;
  --outline: #7a7488;
  --surface-tint: #6d23f9;
  --primary-container: #6D23F9;
  --surface-container-lowest: #ffffff;
  --on-secondary-fixed-variant: #005322;
  --on-error-container: #93000a;
  --on-primary: #ffffff;
  --error-container: #ffdad6;
  --tertiary-fixed-dim: #c8c6c5;
  --surface-container-low: #f3f4f5;
  --secondary-fixed: #66ff8e;
  --secondary: #006d2f;
  --on-error: #ffffff;
  --on-background: #191c1d;
  --on-tertiary-fixed-variant: #474646;
  --on-surface-variant: #494456;
  --surface-container: #edeeef;
  --tertiary-fixed: #e5e2e1;
  --on-tertiary-fixed: #1c1b1b;
  --on-secondary-container: #007232;
  --inverse-surface: #2e3132;
  --surface: #f8f9fa;
  --primary-fixed-dim: #cfbdff;
  --outline-variant: #cbc3d9;
  --on-surface: #191c1d;
  --on-tertiary-container: #c9c7c6;
  --on-secondary-fixed: #002109;
  --on-primary-fixed: #22005d;
  --on-tertiary: #ffffff;
  --surface-dim: #d9dadb;
}

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

h1, h2, h3, .font-headline {
  font-family: 'Manrope', sans-serif;
}

::selection {
  background-color: rgba(109, 35, 249, 0.2);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: 200px;
  gap: 24px;
}

.masonry-item:nth-child(2n) { grid-row: span 2; }
.masonry-item:nth-child(3n) { grid-row: span 1.5; }

html {
  scroll-behavior: smooth;
}

.reveal {
  transition: all 0.7s ease;
  opacity: 0;
  transform: translateY(40px);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav.open {
  display: flex !important;
}

.mobile-nav a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--on-surface-variant);
  transition: color 0.3s;
  padding: 8px 0;
}

.mobile-nav a:hover {
  color: var(--primary);
}

.btn-primary {
  transition: all 0.3s ease;
}

.btn-primary:hover {
  opacity: 0.9;
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }
}

.faq-answer {
  transition: max-height 0.3s ease;
}