:root {
  --color-primary: #C2185B;
  --color-secondary: #FFFFFF;
  --color-accent: #FDF8FA;
  --color-text: #1A1A1A;
  --color-border: rgba(26, 26, 26, 0.08);
  --header-height: 68px;
  --container-max: 1200px;
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-blur: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Tahoma, sans-serif;
  color: var(--color-text);
  background: var(--color-secondary);
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
}
.header {
  --header-scroll: 0;
  --header-float-margin: 1rem;
  background: transparent;
}
.header__float {
  position: relative;
  height: var(--header-height);
  margin-top: calc((1 - var(--header-scroll)) * 1rem);
  margin-inline: calc((1 - var(--header-scroll)) * var(--header-float-margin));
  border-radius: calc((1 - var(--header-scroll)) * 9999px);
  background: transparent;
}
.container { width: min(100% - 2rem, var(--container-max)); margin-inline: auto; }
.hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--header-height) + 1.5rem);
  background: linear-gradient(180deg, #FFFBFC 0%, #FFFFFF 60%, #FAFAFA 100%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
}
.hero .reveal { opacity: 1; transform: none; }