body {
  background-color: var(--bgDark);
  font-family: var(--fontBody);
  color: var(--textWhite);
  min-height: 100vh;
  overflow-x: hidden;
}

.heroSection {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  background: radial-gradient(circle at top, #1a1525 0%, var(--bgDark) 80%);
  gap: 40px;
  position: relative;
}

.heroTitle, .heroEyebrow {
  position: relative;
  z-index: 2;
}

.doubleO {
  position: relative;
  display: inline-block;
}

.glassesImage {
  position: absolute;
  top: 30%;
  left: 49%;
  width: 1.75em;
  transform: translate(-50%, -50%) rotate(-3.91deg);
  pointer-events: none;
}

.scrollIndicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.scrollText {
  font-family: var(--fontBody);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--textGray);
}

.scrollArrow {
  color: var(--textWhite);
  font-size: 1.25rem;
  animation: bounce 2s infinite cubic-bezier(0.76, 0, 0.24, 1);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}

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

@keyframes glassesPop {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-20deg) scale(0); }
  60% { opacity: 1; transform: translate(-50%, -50%) rotate(5deg) scale(1.2); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-3.91deg) scale(1); }
}

.heroEyebrow {
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.1s;
}

.heroTitle > div {
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.heroTitle > div:nth-child(1) { animation-delay: 0.2s; }
.heroTitle > div:nth-child(2) { animation-delay: 0.3s; }
.heroTitle > div:nth-child(3) { animation-delay: 0.4s; }
.heroTitle > div:nth-child(4) { animation-delay: 0.5s; }

.scrollIndicator {
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.7s;
}

.glassesImage {
  animation: glassesPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0.6s;
}