/* UGC Studio — a bright creator workspace: lavender paper, white cards,
   violet actions, and the warm coral detail from the app icon. */
:root {
  --bg: #f7f4ff;
  --bg-2: #eee9fb;
  --surface: #eae4fa;
  --surface-2: #ffffff;
  --border: rgba(43, 29, 68, 0.09);
  --border-2: rgba(78, 49, 126, 0.18);
  --text: #211c27;
  --text-dim: #51495c;
  --muted: #746c80;
  --app: #7137ff;
  --app-ink: #ffffff;
  --page-light: #ffffff;
  --grain: 0.018;
  --shadow-icon: 0 14px 34px rgba(93, 49, 158, 0.24);
  --shadow-card: 0 1px 2px rgba(49, 31, 79, 0.04), 0 18px 50px rgba(73, 44, 116, 0.09);
  --shadow-shot: 0 20px 54px rgba(68, 43, 112, 0.18);
}

body::before {
  background:
    radial-gradient(55% 48% at 88% 2%, rgba(255, 118, 143, 0.19), transparent 72%),
    radial-gradient(70% 54% at 8% 10%, rgba(113, 55, 255, 0.15), transparent 70%),
    linear-gradient(180deg, #fbf9ff 0%, var(--bg) 40%, #f4f0fc 100%);
}

.brand-dot {
  background: radial-gradient(circle at 32% 30%, #fff 0%, #ff8097 31%, #813be8 74%, #2a193f 100%);
  box-shadow: 0 0 15px rgba(113, 55, 255, 0.38);
}

.appstore-badge { border-color: #211c27; }
.ugc-hero { position: relative; isolation: isolate; }
.ugc-hero::after {
  content: ""; position: absolute; z-index: -1; right: -7vw; top: 7%;
  width: min(44vw, 560px); aspect-ratio: 1; border-radius: 38% 62% 54% 46%;
  background: linear-gradient(135deg, rgba(255, 128, 151, .22), rgba(113, 55, 255, .16));
  filter: blur(1px); transform: rotate(9deg);
}
.ugc-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  color: var(--app); font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 650;
}
.ugc-kicker::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: #ff718d; }
.hero-phone-wrap { position: relative; max-width: 360px; margin: 0 auto; }
.hero-phone-wrap::before,
.hero-phone-wrap::after {
  content: ""; position: absolute; border-radius: 999px; z-index: -1;
}
.hero-phone-wrap::before { inset: 12% -12% 5% 13%; background: rgba(113,55,255,.14); transform: rotate(7deg); }
.hero-phone-wrap::after { width: 150px; height: 150px; right: -50px; top: 14%; background: rgba(255,113,141,.18); }
.hero-phone-wrap .hero-phone { max-width: 100%; }

.studio-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.studio-stat {
  background: rgba(255,255,255,.72); border: 1px solid var(--border);
  border-radius: 20px; padding: 20px; box-shadow: var(--shadow-card);
}
.studio-stat strong { display: block; font-family: var(--font-display); font-size: 25px; line-height: 1.1; }
.studio-stat span { display: block; color: var(--muted); font-size: 13px; margin-top: 6px; }
.creator-card .card-icon { color: var(--app); font-family: var(--font-mono); font-weight: 700; }
.creator-card:nth-child(2n) .card-icon { color: #e35075; background: rgba(255,113,141,.1); border-color: rgba(227,80,117,.2); }
.workflow-line { counter-reset: flow; }
.workflow-line .card { overflow: hidden; }
.workflow-line .card::after {
  counter-increment: flow; content: "0" counter(flow); position: absolute; right: 18px; top: 9px;
  font: 700 44px/1 var(--font-display); color: rgba(113,55,255,.09);
}
.ugc-note {
  padding: clamp(28px, 5vw, 48px); border-radius: 30px;
  background: #211c27; color: #fff; position: relative; overflow: hidden;
}
.ugc-note::after { content: "UGC"; position: absolute; right: -12px; bottom: -38px; font: 800 150px/1 var(--font-display); color: rgba(255,255,255,.045); }
.ugc-note p { color: #dcd5e7; max-width: 54ch; }
.ugc-note .chip { color: #ddd6e8; border-color: rgba(255,255,255,.18); }
.ugc-note .chip::before { background: #ff718d; }

@media (max-width: 760px) {
  .studio-strip { grid-template-columns: repeat(2, 1fr); }
  .ugc-hero::after { width: 85vw; right: -38vw; }
}
@media (max-width: 430px) {
  .studio-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
  .studio-stat { padding: 16px; }
}