:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #1a1a1a;
  --scroll-image: url("assets/images/changtu.jpg");
}

* { box-sizing: border-box; }

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

body {
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow-x: hidden;
  background: #1a1a1a;
}

.landing {
  position: relative;
  isolation: isolate;
  width: min(100%, 400px);
  min-height: max(640px, 100svh);
  overflow: hidden;
  background: #3e252a;
  box-shadow: 0 0 34px rgba(255, 69, 108, .13);
}

.collage {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  background: #24171b;
}

.background-scroll {
  position: absolute;
  inset: 0;
  height: 200%;
  animation: background-scroll-up 13s linear infinite;
}

.background-scroll__image {
  width: 100%;
  height: 50%;
  background: var(--scroll-image) center / cover no-repeat;
}

@keyframes background-scroll-up {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.collage-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 13, 17, .04) 0 32%, rgba(25, 18, 21, .12) 48%, rgba(18, 15, 18, .74) 75%, #251e20 100%);
}

.intro {
  position: relative;
  z-index: 2;
  padding: 25px 20px 0;
  color: #fff;
  text-align: left;
}

.brand-row {
  position: relative;
  width: min(100%, 300px);
  margin: 0 auto 23px;
}

.brand {
  margin: 0;
  color: #ff3c68;
  font-family: "Trebuchet MS", ui-rounded, sans-serif;
  font-size: clamp(2.05rem, 9vw, 2.45rem);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .9;
  text-align: center;
  text-shadow: 0 3px 14px rgba(255, 40, 89, .4);
}

.age-pill {
  position: absolute;
  top: -3px;
  right: 1px;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 99px;
  background: rgba(17, 15, 18, .7);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.intro-message {
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 350px;
  margin: 0 auto;
}

.heart-mark {
  display: block;
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(42, 6, 18, .3);
}

.intro-message p {
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.18;
  text-shadow: 0 2px 5px rgba(0,0,0,.42);
}

.phone-rail {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 80px;
  left: 0;
  height: 200px;
  overflow: hidden;
  pointer-events: none;
}

.phone-rail::before,
.phone-rail::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 31px;
  content: "";
}

.phone-rail::before { left: 0; background: linear-gradient(90deg, rgba(42,26,31,.7), transparent); }
.phone-rail::after { right: 0; background: linear-gradient(270deg, rgba(42,26,31,.82), transparent); }

.phone-rail__track {
  display: flex;
  width: max-content;
  gap: 7px;
  padding-left: 24px;
  animation: glide 9s ease-in-out infinite alternate;
}

.phone-card {
  position: relative;
  display: flex;
  width: 120px;
  height: 200px;
  flex: 0 0 120px;
  overflow: hidden;
  align-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px 13px 0 0;
  box-shadow: 0 8px 18px rgba(0,0,0,.34);
  color: #fff;
}

.phone-card::after {
  position: absolute;
  top: 7px;
  right: 7px;
  bottom: 7px;
  left: 7px;
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 9px;
  content: "";
}

.phone-card--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phone-card--rose { flex-direction: column; justify-content: flex-end; gap: 6px; padding-bottom: 22px; background: linear-gradient(155deg, #f46879, #b52559); }
.phone-card--coral { justify-content: center; background: radial-gradient(circle at 53% 72%, #f68f61 0 24%, transparent 25%), linear-gradient(#ff5a42, #e94936); }
.phone-card--dark { flex-direction: column; justify-content: space-between; padding: 21px 10px; background: linear-gradient(165deg, #0e1017, #3d1830); }
.phone-card--cream { flex-direction: column; justify-content: center; gap: 14px; background: linear-gradient(160deg, #f5f0e8, #ece3da); }
.phone-card--berry { flex-direction: column; justify-content: flex-end; gap: 6px; padding-bottom: 22px; background: linear-gradient(155deg, #541a40, #c93b6d); }
.phone-card--lavender { justify-content: center; background: linear-gradient(160deg, #bd8fc5, #4d315c); }

.phone-card strong { position: relative; z-index: 1; font-size: 13px; }
.phone-card small { position: relative; z-index: 1; font-size: 10px; opacity: .85; }
.mini-avatar { position: relative; z-index: 1; display: block; width: 62px; aspect-ratio: 1; border: 3px solid rgba(255,255,255,.72); border-radius: 50%; background: radial-gradient(circle at 50% 32%, #f1bc9e 0 14%, transparent 15%), radial-gradient(ellipse at 50% 70%, #742a45 0 37%, transparent 38%), #fb8a7c; }
.mini-avatar--two { width: 74px; background: radial-gradient(circle at 50% 31%, #ebb89b 0 14%, transparent 15%), radial-gradient(ellipse at 50% 70%, #2e3447 0 37%, transparent 38%), #d47781; }
.mini-avatar--three { background: radial-gradient(circle at 50% 31%, #efc2a1 0 14%, transparent 15%), radial-gradient(ellipse at 50% 70%, #e1c270 0 37%, transparent 38%), #733555; }
.tiny-label { position: relative; z-index: 1; display: block; width: 100%; padding: 10px; color: #fff; font-size: 20px; font-weight: 900; letter-spacing: -.06em; line-height: .86; text-align: center; }
.chat-pill { position: absolute; z-index: 1; right: 9px; bottom: 34px; left: 9px; padding: 4px; border-radius: 999px; background: #fff; color: #933139; font-size: 7px; font-weight: 700; text-align: center; }
.ai-copy { position: relative; z-index: 1; align-self: stretch; font-size: 15px; font-weight: 900; letter-spacing: -.055em; line-height: .9; text-align: center; }
.chat-bubble { position: relative; z-index: 1; display: inline-block; max-width: 80px; padding: 7px 10px; border-radius: 13px; font-size: 10px; font-weight: 700; }
.chat-bubble--yellow { align-self: flex-start; margin-left: 17px; background: #ffe459; color: #675400; }
.chat-bubble--violet { align-self: flex-end; margin-right: 17px; background: #7861dd; color: #fff; }

.download-button {
  position: absolute;
  z-index: 3;
  right: 25px;
  bottom: 40px;
  left: 25px;
  display: grid;
  height: 80px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50px;
  background: linear-gradient(180deg, #ff5d7b, #ff2e57);
  box-shadow: 0 10px 26px rgba(255, 35, 82, .55), inset 0 1px 0 rgba(255,255,255,.42);
  color: #fff;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 3px 3px rgba(99, 11, 32, .34);
  transition: transform .18s ease, filter .18s ease;
  animation: glow-pulse 2.2s infinite ease-in-out;
}

.download-button::before {
  position: absolute;
  top: -10px;
  right: 13%;
  left: 13%;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.17);
  content: "";
}

.download-button span { position: relative; }
.download-button:hover { filter: brightness(1.08); transform: translateY(-2px); }
.download-button:active { transform: translateY(1px) scale(.985); }
.download-button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.age-gate {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 8, 10, .86);
  backdrop-filter: blur(9px);
}

.age-gate[hidden] { display: none; }

.age-gate__card {
  width: min(100%, 338px);
  padding: 29px 25px 24px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 22px;
  background: linear-gradient(145deg, #33222d, #21191f);
  box-shadow: 0 22px 50px rgba(0,0,0,.5);
  color: #fff;
  text-align: center;
}

.age-gate__badge {
  display: grid;
  width: 61px;
  height: 61px;
  margin: 0 auto 15px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff5d7a, #fb3159);
  font-size: 20px;
  font-weight: 900;
}

.age-gate h2 { margin: 0; font-size: 28px; letter-spacing: -.035em; }
.age-gate__card > p:not(.age-gate__badge) { margin: 10px 0 22px; color: #e8dce2; font-size: 14px; line-height: 1.48; }

.age-gate__confirm {
  display: block;
  width: 100%;
  min-height: 51px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(145deg, #ff5c79, #ff2e56);
  box-shadow: 0 8px 18px rgba(255, 35, 82, .3);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
}

.age-gate__confirm:focus-visible,
.age-gate__leave:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.age-gate__leave {
  display: inline-block;
  margin-top: 16px;
  color: #fff;
  font-size: 13px;
  text-underline-offset: 3px;
}


@keyframes glide {
  from { transform: translateX(0); }
  to { transform: translateX(-230px); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(255, 35, 82, .55), 0 0 40px rgba(255, 60, 80, .5), inset 0 1px 0 rgba(255,255,255,.42); }
  50% { box-shadow: 0 12px 32px rgba(255, 35, 82, .75), 0 0 52px rgba(255, 60, 80, .7), inset 0 1px 0 rgba(255,255,255,.42); }
}

@media (max-height: 680px) {
  .intro { padding-top: 19px; }
  .brand { margin-bottom: 16px; }
  .phone-rail { bottom: 66px; height: 175px; }
  .phone-card { height: 175px; }
  .download-button { bottom: 18px; height: 64px; font-size: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}