:root {
  --ink: #f7eefb;
  --violet: #6d28d9;
  --rose: #e63872;
  --amber: #f2a928;
  --paper: #0b0711;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-geist-sans), "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.poster-page {
  min-height: 100svh;
  height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.background-art {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 232, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 232, 255, .035) 1px, transparent 1px),
    radial-gradient(circle at 50% 38%, rgba(86, 24, 112, .42), transparent 34%),
    linear-gradient(145deg, #09060f 0%, #15091d 48%, #0c0812 100%);
  background-size: 64px 64px, 64px 64px, auto, auto;
}
.background-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,5,13,.68), transparent 28% 72%, rgba(8,5,13,.72));
}
.sheet { position: absolute; display: block; filter: blur(34px); opacity: .52; }
.sheet-violet {
  width: 62vw;
  height: 62vh;
  left: -8vw;
  top: -22vh;
  clip-path: polygon(0 0, 100% 0, 72% 100%, 0 72%);
  background: linear-gradient(145deg, rgba(109,40,217,.45), rgba(190,132,255,.08) 70%, transparent);
}
.sheet-rose {
  width: 68vw;
  height: 62vh;
  right: -24vw;
  top: 14vh;
  transform: rotate(4deg);
  clip-path: polygon(16% 0, 100% 8%, 89% 100%, 0 76%);
  background: linear-gradient(120deg, transparent 2%, rgba(230,56,114,.05) 30%, rgba(226,48,105,.33) 66%, transparent 90%);
}
.sheet-amber {
  width: 58vw;
  height: 54vh;
  right: -3vw;
  bottom: -30vh;
  transform: rotate(8deg);
  clip-path: polygon(15% 0, 100% 22%, 84% 100%, 0 80%);
  background: linear-gradient(125deg, transparent, rgba(242,169,40,.3), rgba(255,203,89,.05));
}
.light-beam {
  position: absolute;
  width: 24vw;
  top: -30%;
  bottom: -30%;
  left: 42%;
  transform: rotate(24deg);
  background: linear-gradient(90deg, transparent, rgba(255,225,190,.12), transparent);
  filter: blur(18px);
}

.poster-content {
  width: min(1160px, calc(100% - 56px));
  place-self: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(18px, 4vh, 48px) 0 clamp(12px, 2.5vh, 30px);
  position: relative;
  z-index: 1;
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(7px, 1vh, 11px);
  margin-bottom: clamp(48px, 7vh, 82px);
}
.brand img {
  height: auto;
  display: block;
}
.brand .company-logo {
  width: clamp(52px, 4.8vw, 76px);
  filter: drop-shadow(0 9px 22px rgba(0,0,0,.32));
}
.brand .brand-wordmark {
  width: clamp(132px, 12vw, 185px);
  filter: drop-shadow(0 8px 18px rgba(255,255,255,.08));
}
.headline-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(26px, 6vw, 94px);
  align-items: center;
}
.side-line {
  display: block;
  width: 42px;
  height: 3px;
}
.violet-line { justify-self: end; background: linear-gradient(90deg, var(--violet), var(--rose)); }
.amber-line { justify-self: start; background: linear-gradient(90deg, var(--rose), var(--amber)); }
.headline-art {
  width: min(850px, 72vw);
  margin: 0;
  line-height: 0;
}
.headline-art img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 15px 24px rgba(99,39,130,.14));
}
.service-art {
  width: min(920px, 75vw);
  margin: clamp(24px, 4vh, 44px) 0 0;
  line-height: 0;
}
.service-art img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 9px 14px rgba(99,39,130,.12));
}
.footer {
  min-height: 48px;
  border-top: 1px solid rgba(255,235,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.6vw, 40px);
  padding: 10px 24px;
  color: #a89eae;
  font-size: 11px;
  position: relative;
  z-index: 1;
}
.footer p { margin: 0; }
.footer a:hover { color: #ffffff; }

@media (max-width: 720px) {
  .poster-page { height: auto; min-height: 100svh; }
  .poster-content { width: calc(100% - 28px); padding-top: 28px; }
  .brand { margin-bottom: 44px; gap: 7px; }
  .brand .company-logo { width: 60px; }
  .brand .brand-wordmark { width: 150px; }
  .headline-row { grid-template-columns: 20px 1fr 20px; gap: 10px; }
  .side-line { width: 20px; height: 2px; }
  .headline-art { width: min(92vw, 620px); }
  .service-art { width: min(92vw, 620px); margin-top: 26px; }
  .footer { flex-wrap: wrap; gap: 6px 20px; padding: 12px 16px; line-height: 1.3; }
}

@media (max-height: 730px) and (min-width: 721px) {
  .brand { margin-bottom: 28px; gap: 5px; }
  .brand .company-logo { width: 45px; }
  .brand .brand-wordmark { width: 124px; }
  .headline-art { width: min(710px, 64vw); }
  .service-art { width: min(740px, 68vw); margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}