:root {
  --ink: #0e080d;
  --surface: #160b15;
  --rose: #fff0f6;
  --pink: #ff3f8c;
  --pink-hi: #ff76b1;
  --green: #6ce866;
  --max-width: 430px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; color: var(--rose); background: radial-gradient(ellipse at top, #2c1426 0, var(--ink) 48%); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
p, h1, h2, figure { margin: 0; }
a { color: inherit; }

.page { width: 100%; max-width: var(--max-width); min-height: 100svh; margin: 0 auto; overflow: hidden; background: var(--surface); }
.hero { position: relative; height: 466px; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 82% 28%, #754b36, #29121d 63%, #160b15); }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, #160b15 0%, rgba(20, 10, 18, 0) 38%), linear-gradient(90deg, #160b15 0%, rgba(22, 11, 21, .93) 24%, rgba(22, 11, 21, .22) 58%, transparent 86%); }
.hero-photo { position: absolute; z-index: -2; top: 0; right: 0; width: 84%; height: 370px; object-fit: cover; object-position: 50% 70%; filter: saturate(.94) contrast(1.03); }
.brand { display: inline-block; color: #ffd4e7; font: 900 36px/1 Arial, sans-serif; letter-spacing: -2px; text-decoration: none; text-shadow: 0 0 9px rgba(255, 62, 148, .82); }
.brand span { color: var(--pink); padding-left: 1px; font-size: .68em; vertical-align: .11em; }
.hero > .brand { position: absolute; top: 18px; left: 18px; }

.hero-copy { position: static; }
.hero-copy h1 { position: absolute; top: 91px; left: 18px; width: 59%; max-width: 255px; color: #fff5f9; font-size: clamp(28px, 7.6vw, 33px); font-weight: 800; letter-spacing: -.05em; line-height: 1.08; text-shadow: 0 2px 5px rgba(0, 0, 0, .58); }
h1 em { color: var(--pink-hi); font-style: normal; }
.sub { position: absolute; top: 212px; left: 18px; width: 54%; max-width: 220px; color: #f5d8e5; font-size: 14px; line-height: 1.5; }
.cta { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 48px; padding: 9px 16px; border: 1px solid #ff9ec4; border-radius: 99px; color: #160b15; background: linear-gradient(180deg, #ff62a0, #f50869); box-shadow: inset 0 1px 2px rgba(255, 222, 237, .62), 0 7px 21px rgba(247, 8, 103, .23); cursor: pointer; font-size: 15px; font-weight: 900; line-height: 1.2; text-align: center; transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; }
.cta svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; }
.cta .arrow { margin-left: auto; font: 400 28px/.7 Arial, sans-serif; }
.cta:hover { filter: brightness(1.08); box-shadow: inset 0 1px 2px rgba(255, 222, 237, .7), 0 9px 24px rgba(247, 8, 103, .38); }
.cta:active { transform: translateY(1px) scale(.995); }
.cta:disabled { cursor: wait; filter: saturate(.75); opacity: .82; }
.cta:focus-visible, .brand:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cta-primary { position: absolute; top: 328px; right: 18px; left: 18px; width: auto; }
.caption { color: #e0bbcd; font-size: 11px; line-height: 1.35; text-align: center; }
.hero-copy .caption { position: absolute; top: 386px; right: 18px; left: 18px; }
.hand { color: #ffe0ec; font-family: "Segoe Print", "Bradley Hand", cursive; font-weight: 400; text-align: center; text-shadow: 0 2px 5px #000; transform: rotate(-6deg); }
.hero > .hand { position: absolute; top: 100px; right: 10px; font-size: 12px; line-height: 1.55; }

.profiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 10px 10px 13px; border-top: 1px solid #68304b; background: linear-gradient(#1e101b, #140a12); }
.profile { position: relative; height: 130px; min-width: 0; overflow: hidden; border: 1px solid #83465f; border-radius: 9px; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
.profile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.profile::after { content: ""; position: absolute; inset: 43% 0 0; background: linear-gradient(transparent, rgba(23, 8, 17, .97)); }
.profile figcaption { position: absolute; z-index: 1; bottom: 7px; left: 6px; display: flex; align-items: flex-start; gap: 4px; color: #fff; font-size: 9px; font-weight: 800; line-height: 1.15; }
.profile small { color: #e2bdcf; font-size: 7px; font-weight: 500; }
.dot { width: 6px; height: 6px; margin-top: 3px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px #54e348; }

.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 10px 15px; overflow: hidden; border: 1px solid #4e263a; border-radius: 15px; background: radial-gradient(ellipse at top, #351725, #1b0f18); }
.feature { display: flex; min-height: 118px; flex-direction: column; align-items: center; justify-content: center; padding: 13px 5px; color: #f7dce8; text-align: center; }
.feature + .feature { border-left: 1px solid #573047; }
.feature svg { display: block; width: 25px; height: 25px; margin-bottom: 8px; fill: none; stroke: #f2629b; stroke-width: 1.8; filter: drop-shadow(0 0 2px rgba(236, 33, 99, .28)); }
.feature h2 { font-size: 10px; font-weight: 700; line-height: 1.32; }

.second { position: relative; height: 280px; overflow: hidden; border-top: 1px solid #754253; border-bottom: 1px solid #754253; background: #26151e; }
.second > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
.second::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 24%, rgba(42, 17, 31, .22) 59%, rgba(26, 12, 21, .9) 100%); }
.second-copy { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; display: flex; width: 45%; flex-direction: column; align-items: center; justify-content: center; padding: 16px 10px; }
.section-kicker { color: #ffc0d8; font-size: 9px; font-weight: 800; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }
.second-copy .hand { margin: 7px 0 17px; font-size: 17px; line-height: 1.45; transform: rotate(-3deg); }
.second-copy .cta { min-height: 44px; padding: 8px 10px; font-size: 12px; }
.second-copy .cta svg { width: 15px; height: 15px; }
.second-copy .cta .arrow { font-size: 25px; }
.second-copy .caption { margin-top: 9px; color: #f0cade; font-size: 10px; }
.second-copy .inline-status { position: absolute; right: 10px; bottom: 9px; left: 10px; margin: 0; }

.inline-status { padding: 8px 10px; border: 1px solid #98657a; border-radius: 10px; background: #321a27; color: #ffe1ed; font-size: 11px; line-height: 1.35; text-align: center; }
.inline-status[hidden] { display: none; }
.hero-status { position: absolute; z-index: 3; right: 14px; bottom: 8px; left: 14px; }
footer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 9px; padding: 15px 16px max(16px, env(safe-area-inset-bottom)); background: #100911; }
.footer-brand .brand { font-size: 28px; }
.footer-brand p { margin-top: 4px; color: #cbaebd; font-size: 9px; white-space: nowrap; }
.privacy { display: flex; align-items: center; justify-self: end; gap: 5px; color: #d4b4c3; font-size: 9px; line-height: 1.3; }
.privacy svg { width: 15px; height: 19px; flex: 0 0 auto; fill: #ed478a; }

@media (min-width: 431px) {
  body { padding: 28px 0; }
  .page { min-height: calc(100svh - 56px); border: 1px solid #3a2130; border-radius: 20px; box-shadow: 0 18px 100px rgba(0, 0, 0, .6); }
}
@media (max-width: 374px) {
  .hero { height: 450px; }
  .hero-copy h1 { top: 84px; font-size: 27px; }
  .sub { top: 196px; font-size: 13px; }
  .cta-primary { top: 314px; }
  .hero-copy .caption { top: 370px; }
  .hero > .hand { right: 7px; font-size: 11px; }
  .profile { height: 118px; }
  .feature { min-height: 108px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}