:root {
  color-scheme: dark;
  --page: #151b18;
  --ink: #f6f8f2;
  --muted: #e0e6de;
  --accent: #d8f9a0;
  --gap: 10px;
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--page);
  font-family: "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.page-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 26px 24px 42px;
  isolation: isolate;
  overflow: hidden;
  position: relative;
  background: var(--page);
}

.photo-wall {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  height: 100%;
  min-height: 100%;
  padding: var(--gap);
}

.wall-row {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.photo-flow {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
  gap: var(--gap);
  animation: pool-slide 18s linear infinite;
}

.photo-wall.is-paused .photo-flow { animation-play-state: paused; }

.photo-set {
  display: flex;
  height: 100%;
  gap: var(--gap);
  padding-right: var(--gap);
}

.photo-card {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  position: relative;
  background: #303935;
}

.photo-card > .photo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
}

.brand-decal {
  position: absolute;
  z-index: 1;
  display: block;
  width: clamp(28px, 23%, 64px);
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 17%;
  box-shadow: 0 3px 9px rgb(12 32 24 / 0.24);
  opacity: 0.9;
  pointer-events: none;
}

.brand-decal--watermark {
  left: 8px;
  bottom: 8px;
}

@keyframes pool-slide {
  from {
    transform: translate3d(calc(-1 * var(--photo-step)), 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.hero-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgb(9 17 13 / .93) 5%, rgb(9 17 13 / .8) 34%, rgb(9 17 13 / .30) 78%),
    linear-gradient(0deg, rgb(9 17 13 / .38), rgb(9 17 13 / .08) 80%);
}

.hero {
  position: relative;
  z-index: 2;
  width: min(100%, 1240px);
  text-align: center;
  color: var(--ink);
  transform-origin: 50% 55%;
  animation: hero-pop-in 780ms cubic-bezier(.22, .7, .25, 1) both;
}

/* The type itself enters, without an opaque image panel or a modal trap. */
@keyframes hero-pop-in {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(.78);
  }
  72% {
    opacity: 1;
    transform: translateY(-3px) scale(1.025);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.brand-name {
  margin: 0;
  line-height: 0;
}

.brand-name img { display: block; width: min(720px, 94%); height: auto; margin: 0 auto; }

h1 {
  margin: 26px 0 0;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.045em;
  text-shadow: 0 4px 36px rgb(0 0 0 / .2);
}

h1 > span {
  display: block;
}

.headline-library {
  font-size: clamp(40px, 5.5vw, 78px);
}
.library-choice { font-size: .74em; }

.headline-library em {
  color: var(--accent);
  font-style: normal;
  margin-right: .12em;
}

.headline-generate {
  margin-top: 16px;
  font-size: clamp(46px, 6.15vw, 88px);
}

.hero-description {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.7;
  letter-spacing: .025em;
}

.hero-description strong {
  color: var(--ink);
  font-weight: 600;
  margin-right: .3em;
}

.trial-entry {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 30px auto 0;
}

.trial-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  min-height: 104px;
  padding: 14px 46px 15px;
  border: 1px solid rgb(255 255 255 / .24);
  border-radius: 12px;
  background: var(--accent);
  color: #182213;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 28px;
  line-height: 1.5;
  font-weight: 850;
  list-style: none;
  cursor: pointer;
  box-shadow: 0 8px 32px rgb(0 0 0 / .24);
  transition: background-color .18s ease, transform .18s ease;
}
.trial-label { letter-spacing: -.025em; }
.trial-label strong { font-size: 1.34em; font-weight: 900; font-style: italic; padding: 0 .12em; }
.trial-explainer { font-size: 13px; font-weight: 500; letter-spacing: .08em; opacity: .82; }
.mobile-break { display: none; }
.trial-open { overflow: hidden; }
#trial-dialog { width: min(660px, calc(100% - 28px)); max-height: calc(100svh - 32px); overflow: auto; padding: 36px 30px 26px; border: 1px solid #42513c; border-radius: 20px; color: var(--ink); background: #1c261e; box-shadow: 0 20px 80px rgb(0 0 0 / .45); }
#trial-dialog::backdrop { background: rgb(6 12 8 / .76); }
#trial-dialog h2 { margin: 0 36px 12px 0; font-size: 28px; line-height: 1.3; }
#trial-description { margin: 0; color: #d5dfd2; font-size: 15px; line-height: 1.8; }
.dialog-close { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #34402f; color: #f6f8f2; cursor: pointer; font-size: 28px; }
.dialog-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.qr-options { display: grid; grid-template-columns: minmax(0,260px); justify-content: center; gap: 20px; margin-top: 24px; }
.qr-options figure { margin: 0; padding: 12px; border-radius: 12px; background: #f9fbf6; color: #202b1c; text-align: center; }
.qr-options img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.qr-options figcaption { margin-top: 8px; font-weight: 700; }
.qr-hint { margin: 20px 0 0; font-size: 12px; line-height: 1.7; color: #cad6c5; text-align: center; }

.trial-button::-webkit-details-marker {
  display: none;
}

.trial-button:hover {
  background: #e7ffc0;
  transform: translateY(-2px);
}

.trial-button:active {
  transform: translateY(0);
}

.trial-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

.download-icon {
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}

.download-status {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(340px, calc(100vw - 40px));
  transform: translateX(-50%);
  margin: 16px 0 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
}

.wall-message {
  position: fixed;
  inset: auto 18px 10px;
  z-index: 3;
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  color: #f7f8f3;
  background: rgb(32 39 35 / 0.92);
  text-align: center;
}

@media (max-width: 640px) {
  :root {
    --gap: 7px;
    --radius: 10px;
  }

  .page-shell {
    padding: max(32px, env(safe-area-inset-top)) 16px max(42px, env(safe-area-inset-bottom));
  }

  .hero-shade {
    background: radial-gradient(ellipse at 50% 48%, rgb(9 17 13 / .94) 2%, rgb(9 17 13 / .77) 44%, rgb(9 17 13 / .33) 95%);
  }

  .brand-name {
    margin: 0 -5px;
  }
  .brand-name img { width: 100%; }

  h1 {
    margin-top: 30px;
    letter-spacing: -.05em;
  }

  .headline-library {
    font-size: clamp(24px, 6.6vw, 40px);
  }
  .library-choice { font-size: .80em; }

  .headline-generate {
    margin-top: 14px;
    font-size: clamp(27px, 8vw, 48px);
  }

  .hero-description {
    margin-top: 22px;
    font-size: 14px;
    line-height: 1.85;
  }

  .hero-description strong,
  .hero-description span {
    display: block;
    margin-right: 0;
  }

  .trial-entry {
    margin-top: 28px;
  }

  .trial-button {
    min-height: 92px;
    padding: 12px 22px;
    gap: 4px;
    font-size: clamp(22px, 5.8vw, 30px);
  }
  .mobile-break { display: block; }
  #trial-dialog { padding: 32px 18px 22px; }
  #trial-dialog h2 { font-size: 22px; }
  .qr-options { gap: 12px; }
  .qr-options figure { padding: 8px; }
  #trial-description { font-size: 13px; }
}

@media (max-height: 500px) and (min-width: 641px) {
  .page-shell { padding: 28px 24px 64px; }
  .brand-name img { width: 360px; }
  h1 { margin-top: 18px; }
  .headline-library { font-size: 36px; }
  .headline-generate { font-size: 42px; margin-top: 6px; }
  .hero-description { margin-top: 18px; font-size: 16px; }
  .trial-entry { margin-top: 22px; }
  .trial-button { min-height: 70px; padding-block: 8px; font-size: 22px; }
}

@media (max-width: 359px) {
  .page-shell { padding-inline: 14px; }
  .hero-description { font-size: 14px; }
  .brand-name { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .photo-flow {
    animation: none;
    transform: none;
  }
  .trial-button {
    transition: none;
  }
  .trial-button:hover {
    transform: none;
  }
}