* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  background-color: #f9f9fe;
  color: #1a1c1f;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

img,
svg {
  display: block;
}

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

.glass-panel,
.glass-nav {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.sidebar-blur {
  background: rgba(249, 249, 254, 0.8);
  backdrop-filter: blur(40px);
}

.macos-card {
  background: #ffffff;
  border: 1px solid rgba(26, 28, 31, 0.05);
  box-shadow: 0 4px 6px -1px rgba(26, 28, 31, 0.05),
    0 2px 4px -1px rgba(26, 28, 31, 0.03);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.macos-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(26, 28, 31, 0.08);
}

.card-shadow {
  box-shadow: 0 4px 12px rgba(26, 28, 31, 0.05), 0 1px 2px rgba(26, 28, 31, 0.1);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}