#hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: visible;
  background-color: var(--color-background);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 80px;
  box-sizing: border-box;
}

#dot-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.dot-grid__dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #e6e7ea;
  transform: translate(0, 0);
  transition: transform 600ms ease-out;
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px;
  margin-top: -100px;
}

/* Hero cards */
.hero-cards {
  position: relative;
  width: 530px;
  height: 200px;
  flex-shrink: 0;
}

.hero-card {
  position: absolute;
  width: 180px;
  height: 180px;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0px 4px 12px 1px rgba(0, 0, 0, 0.1);
  transform-origin: center center;
}

.hero-card__image {
  display: block;
  width: 164px;
  height: 164px;
  min-height: 164px;
  max-height: 164px;
  flex-shrink: 0;
  flex-grow: 0;
  border-radius: 8px;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-card {
  will-change: transform;
  transition: transform 200ms ease;
}

.hero-card.is-spreading {
  transition: transform 550ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-cards.is-entering {
  opacity: 0;
  transition: opacity 200ms ease;
}

.hero-cards.is-entering.is-visible {
  opacity: 1;
}

.hero-card__caption-wrap {
  flex-shrink: 0;
  overflow: hidden;
  visibility: visible;
}

.hero-card__caption {
  opacity: 0;
  visibility: visible;
  flex-shrink: 0;
  padding: 0 0px 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  line-height: 1.02;
  color: var(--color-secondary-1);
  width: 160px;
  max-width: calc(100% - 8px);
  word-break: break-word;
}

.hero-card.is-expanded {
  padding-bottom: 16px;
}

.hero-card.is-dragging {
  cursor: grabbing;
  transition: transform 200ms ease;
}

.hero-card--3 {
  z-index: 2;
  left: 0px;
  top: 0px;
  transform: rotate(-12deg);
}

.hero-card--2 {
  z-index: 3;
  left: 116.42px;
  top: 5.42px;
  transform: rotate(9deg);
}

.hero-card--1 {
  z-index: 4;
  left: 246.17px;
  top: 22.11px;
  transform: rotate(-4deg);
}

.hero-card--4 {
  z-index: 1;
  left: 350px;
  top: 8px;
  transform: rotate(12deg);
}

/* Hero text — Figma Main Hero Text: 455px wide */
.hero-text {
  width: 355px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero-text.is-everyday-maker {
  width: 365px;
}

.hero-text__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-text__headline,
.hero-text__body {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--font-regular);
  line-height: var(--leading-default);
  letter-spacing: var(--tracking-default);
  color: var(--color-primary);
}

.hero-text__body {
  width: 100%;
}

.hero-text__body.is-fade-out {
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.hero-text__body.is-fade-in-start {
  opacity: 0;
  transition: none;
}

.hero-text__body.is-fade-in {
  opacity: 1;
  transition: opacity 1000ms ease-in;
}

/* Dropdown — Figma 3040:17195: 201px fixed width */
.hero-dropdown {
  position: relative;
  flex-shrink: 0;
  width: 201px;
  background-color: var(--color-secondary-3);
  border-radius: 4px;
  cursor: pointer;
}

.hero-dropdown.is-open {
  background-color: #ffffff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.hero-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 8px;
  box-sizing: border-box;
}

.hero-dropdown__caret {
  width: 16px;
  height: 7px;
  flex-shrink: 0;
}

.hero-dropdown.is-open .hero-dropdown__caret {
  transform: scaleY(-1);
}

.hero-dropdown__label {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: var(--font-regular);
  line-height: var(--leading-default);
  letter-spacing: var(--tracking-default);
  color: var(--color-secondary-1);
  white-space: nowrap;
}

.hero-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 201px;
  height: 128px;
  box-sizing: border-box;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 4px 12px 1px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(-8x);
  transition: opacity 250ms cubic-bezier(0.16, 1, 0.3, 1), transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 10;
}

.hero-dropdown.is-open .hero-dropdown__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-dropdown__option {
  width: 100%;
  height: 32px;
  padding: 0px 8px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: none;
  background: none;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.02;
  color: var(--color-secondary-1);
  border-radius: 4px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.hero-dropdown__option:hover {
  background-color: #f0f1f3;
  border-radius: 4px;
}

/* Clock — Figma Live Clock Display */
#clock {
  position: absolute;
  right: 48px;
  bottom: 48px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.clock__date,
.clock__time {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: var(--font-light);
  line-height: var(--leading-default);
  letter-spacing: var(--tracking-default);
  color: var(--color-secondary-1);
}

#hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 2;
  pointer-events: none;
}

/* Mobile — breakpoint styles added in a later pass */