:root {
  color-scheme: light;
  --pink: #E91E63;
  --pink-dark: #c2185b;
  --pink-soft: #fff0f5;
  --ink: #252128;
  --muted: #77717a;
  --line: #eee8ec;
  --paper: #fffafd;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--paper); }

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 82% 45%, rgba(233, 30, 99, .055), transparent 34%),
    linear-gradient(135deg, #fffafd 0%, #fff 48%, #fff7fa 100%);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ambient {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(233, 30, 99, .09);
  border-radius: 50%;
}
.ambient-one { width: 440px; height: 440px; top: -290px; right: -120px; }
.ambient-two { width: 310px; height: 310px; bottom: -220px; left: -150px; }

.page {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 64px));
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(238, 232, 236, .85);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px 13px 13px 4px;
  color: #fff;
  background: var(--pink);
  box-shadow: 0 7px 18px rgba(233, 30, 99, .2);
  transform: rotate(-3deg);
}
.brand-mark span {
  font-family: Manrope, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -1.2px;
  transform: rotate(3deg);
}
.brand-name {
  font-family: Manrope, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.6px;
}
.brand-name strong { font-weight: 800; }

.top-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #827780;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 4px rgba(233, 30, 99, .1);
}

.hero {
  flex: 1;
  min-height: 590px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 36px;
  padding: 58px 0 48px;
}
.hero-copy { max-width: 550px; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 24px;
  color: var(--pink-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .19em;
}
.eyebrow-line { width: 27px; height: 1px; background: var(--pink); }

h1 {
  margin: 0;
  font-family: Manrope, sans-serif;
  font-size: clamp(48px, 6.3vw, 76px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.075em;
}
h1 span { color: var(--pink); }

.intro {
  max-width: 470px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.85;
}

.trust-note {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 37px;
}
.trust-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex: 0 0 43px;
  border: 1px solid #f8c5d7;
  border-radius: 13px;
  color: var(--pink);
  background: #fff5f8;
}
.trust-icon svg { width: 22px; height: 22px; }
.trust-note strong, .trust-note small { display: block; }
.trust-note strong { font-size: 12px; font-weight: 700; }
.trust-note small { margin-top: 4px; color: #938a92; font-size: 11px; }

.visual {
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
}
.visual-glow {
  position: absolute;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 30, 99, .13), rgba(233, 30, 99, .025) 65%, transparent 70%);
}
.orbit {
  position: absolute;
  border: 1px solid rgba(233, 30, 99, .14);
  border-radius: 50%;
  transform: rotate(-18deg);
}
.orbit-outer { width: 390px; height: 245px; }
.orbit-inner { width: 320px; height: 200px; transform: rotate(36deg); border-style: dashed; border-color: rgba(233, 30, 99, .19); }

.mail-card {
  position: relative;
  width: 250px;
  height: 220px;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 19px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 25px 70px rgba(125, 58, 85, .13), 0 4px 15px rgba(125, 58, 85, .05);
  transform: rotate(-7deg);
  backdrop-filter: blur(12px);
}
.mail-card-top { display: flex; gap: 5px; }
.mail-card-top span { width: 5px; height: 5px; border-radius: 50%; background: #f1c5d5; }
.mail-symbol {
  width: 100px;
  height: 76px;
  margin: 22px auto 15px;
  color: var(--pink);
}
.mail-lines { width: 112px; margin: 0 auto; }
.mail-lines i { display: block; height: 5px; margin-top: 7px; border-radius: 10px; background: #f4e8ed; }
.mail-lines i:nth-child(2) { width: 76%; }
.mail-lines i:nth-child(3) { width: 53%; }
.mail-stamp {
  position: absolute;
  right: 17px;
  bottom: 16px;
  color: #f3a0bd;
  font-family: Manrope, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -1px;
}
.floating-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 11px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 32px rgba(90, 45, 64, .1);
  color: #625963;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.chip-one { top: 91px; right: 0; }
.chip-two { bottom: 91px; left: 0; }
.chip-check {
  width: 17px; height: 17px; display: grid; place-items: center;
  border-radius: 50%; color: #fff; background: var(--pink); font-size: 10px;
}
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.spark { position: absolute; color: #ef78a1; }
.spark-one { top: 55px; left: 20%; font-size: 22px; }
.spark-two { right: 17%; bottom: 55px; font-size: 17px; }

.bottom-note {
  display: flex;
  align-items: center;
  gap: 17px;
  max-width: 760px;
  margin: 0 0 30px;
}
.bottom-rule { width: 3px; height: 35px; flex: 0 0 3px; border-radius: 4px; background: var(--pink); }
.bottom-note p { margin: 0; color: #8b828a; font-size: 11px; line-height: 1.7; }

.footer {
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--line);
  color: #a39aa1;
  font-size: 10px;
}
.footer-right b { color: var(--pink); font-size: 12px; }

@media (max-width: 760px) {
  .page { width: min(100% - 40px, 560px); }
  .topbar { min-height: 78px; }
  .hero {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 70px 0 35px;
  }
  .hero-copy { max-width: 100%; }
  h1 { font-size: clamp(49px, 12vw, 68px); }
  .visual { min-height: 330px; margin-top: 10px; }
  .orbit-outer { width: min(390px, 90vw); }
  .orbit-inner { width: min(320px, 75vw); }
  .chip-one { right: 2%; top: 55px; }
  .chip-two { left: 1%; bottom: 54px; }
  .bottom-note { margin-top: 10px; }
}
@media (max-width: 430px) {
  .top-label { font-size: 8px; letter-spacing: .1em; }
  .brand-name { font-size: 13px; }
  .brand-mark { width: 38px; height: 38px; }
  .visual { min-height: 290px; }
  .mail-card { transform: scale(.88) rotate(-7deg); }
  .floating-chip { padding: 9px 10px; font-size: 9px; }
  .footer { align-items: flex-start; flex-direction: column; justify-content: center; padding: 16px 0; gap: 7px; }
  .footer-right { align-self: flex-end; }
}
@media (prefers-reduced-motion: no-preference) {
  .mail-card { animation: float 5s ease-in-out infinite; }
  .spark-one { animation: twinkle 3s ease-in-out infinite; }
  .spark-two { animation: twinkle 3s ease-in-out 1.2s infinite; }
  @keyframes float { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
  @keyframes twinkle { 0%,100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }
}