@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&display=swap');

:root {
  color-scheme: light;
  --ink: #111820;
  --pink: #fa2850;
  --muted: #707987;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "DM Sans", "Avenir Next", Avenir, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.landing {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
}

.glow { position: absolute; z-index: -1; pointer-events: none; }
.glow-top {
  width: 58vw; height: 78vh; top: -30vh; right: -8vw;
  background: radial-gradient(ellipse, rgba(255, 226, 234, .68), rgba(255, 244, 247, .32) 42%, transparent 72%);
}
.glow-bottom {
  width: 58vw; height: 64vh; bottom: -37vh; right: -12vw;
  background: radial-gradient(ellipse, rgba(255, 217, 228, .72), rgba(255, 240, 245, .34) 48%, transparent 74%);
}

.layout {
  width: min(100% - 12vw, 1500px);
  min-height: min(100svh, 940px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, .95fr);
  align-items: center;
  gap: 0;
  padding: 54px 0 72px;
}

.copy { position: relative; z-index: 1; padding: 0 0 12px; }
.wordmark {
  display: inline-block;
  margin-bottom: 74px;
  color: var(--pink);
  font-size: clamp(52px, 5.2vw, 78px);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.085em;
  text-decoration: none;
}
.eyebrow {
  margin: 0 0 35px;
  color: var(--pink);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .47em;
  text-transform: uppercase;
}
h1 {
  max-width: 890px;
  margin: 0;
  font-size: clamp(44px, 5.35vw, 82px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.065em;
}
h1 span { color: var(--pink); white-space: nowrap; }
.description {
  max-width: 840px;
  margin: 38px 0 0;
  color: var(--muted);
  font-size: clamp(19px, 1.8vw, 29px);
  line-height: 1.55;
  letter-spacing: -.025em;
}
.visual {
  position: relative;
  width: calc(100% + 8vw);
  margin-left: -5vw;
  transform: translate(1vw, 4px);
}
.visual img { display: block; width: 100%; height: auto; }

@media (min-width: 1600px) {
  .layout { width: min(100% - 12vw, 1500px); }
}

@media (max-width: 1050px) {
  .layout { width: min(100% - 10vw, 850px); grid-template-columns: 1fr; gap: 5px; padding: 54px 0 40px; }
  .copy { padding: 0; }
  .wordmark { margin-bottom: 56px; font-size: clamp(52px, 8vw, 72px); }
  h1 { font-size: clamp(44px, 8vw, 76px); }
  .description { max-width: 760px; font-size: clamp(19px, 3vw, 25px); }
  .visual { width: min(100%, 720px); margin: -5px auto 0; transform: none; }
}

@media (max-width: 560px) {
  .layout { width: calc(100% - 44px); padding: 36px 0 28px; }
  .wordmark { margin-bottom: 56px; font-size: 48px; }
  .eyebrow { margin-bottom: 22px; font-size: 12px; letter-spacing: .38em; }
  h1 { font-size: clamp(37px, 10vw, 52px); line-height: 1.08; letter-spacing: -.06em; }
  h1 span { white-space: normal; }
  .desktop-break { display: none; }
  .description { margin-top: 22px; font-size: 17px; line-height: 1.55; }
  .visual { width: calc(100% + 24px); margin: 5px -12px -8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}