:root {
  --bg-gradient: linear-gradient(135deg, oklch(20% 0.05 260), oklch(10% 0.02 280));
  --accent-color: oklch(70% 0.15 190); /* Cyan/Blue accent */
  --accent-secondary: oklch(65% 0.2 330); /* Pink/Purple accent */
  --card-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.1);
  --text-primary: oklch(98% 0.01 260);
  --text-secondary: oklch(85% 0.05 260);
  --success-color: oklch(80% 0.15 150);
}

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

body {
  font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
  background: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 4rem 1rem;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 1;
}

main {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 700px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 850;
  margin-block-end: 0.75rem;
  background: linear-gradient(to right, oklch(90% 0.1 190), oklch(75% 0.2 330));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.03em;
}

.hero p {
  color: var(--text-secondary);
  font-size: 1.15rem;
  margin-block-end: 3rem;
  opacity: 0.8;
}

/* Transitions */
.fade-in {
  animation: fadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}