/* ============================================================
   ZORIYA — AI UGC Marketing (scoped under .zoriya-ugc)
   All classes prefixed zu-* / IDs prefixed zu* so nothing leaks
   and nothing collides with the other animated sections.
   ============================================================ */

.zoriya-ugc {
  --zu-panel: #FBFAF6;
  --zu-cobalt: #2B2BF0;
  --zu-cobalt-lt: #6E76FF;
  --zu-peri: #8E8EFF;
  --zu-amber: #FFB454;
  --zu-done: #3DDC97;
  --zu-line: rgba(16,16,19,.10);
  --zu-t2: #6B6B73;

  background: var(--paper);
  padding-block: clamp(90px, 14vh, 180px);
}

.zoriya-ugc .zu-wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding-inline: var(--pad-x); }

.zoriya-ugc .zu-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--zu-cobalt); margin-bottom: 12px; }
.zoriya-ugc .zu-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(32px, 5.6vw, 56px); letter-spacing: -.02em; line-height: 1.03; color: var(--ink); }
.zoriya-ugc .zu-it { font-style: italic; color: var(--zu-cobalt); }
.zoriya-ugc .zu-sub { font-size: clamp(15px, 1.6vw, 18px); color: var(--zu-t2); max-width: 640px; margin-top: 18px; line-height: 1.5; }

.zoriya-ugc .zu-frame {
  position: relative; width: 100%; border-radius: 20px; overflow: hidden; background: var(--zu-panel);
  border: 1px solid var(--zu-line); box-shadow: 0 30px 70px rgba(16,16,19,.08); margin-top: 36px;
}
.zoriya-ugc .zu-stage { position: absolute; top: 0; left: 0; width: 1080px; height: 582px; transform-origin: top left; }

.zoriya-ugc .zu-counter {
  position: absolute; z-index: 6; left: 36px; top: 26px; display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--zu-line); border-radius: 999px; padding: 8px 15px; box-shadow: 0 6px 18px rgba(16,16,19,.06);
}
.zoriya-ugc .zu-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--zu-done); box-shadow: 0 0 9px var(--zu-done); }
.zoriya-ugc .zu-counter b { font-weight: 700; color: var(--zu-cobalt); }
.zoriya-ugc .zu-counter span { font-size: 13px; color: var(--ink); }

.zoriya-ugc .zu-vtile { position: absolute; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 26px rgba(16,16,19,.14); z-index: 2; }
.zoriya-ugc .zu-vtile .zu-bar { position: absolute; top: 7px; left: 7px; right: 7px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); }
.zoriya-ugc .zu-vtile .zu-bar i { position: absolute; inset: 0; width: 40%; border-radius: 3px; background: #fff; }
.zoriya-ugc .zu-vtile .zu-tag { position: absolute; left: 8px; bottom: 8px; font-size: 9.5px; font-weight: 600; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.zoriya-ugc .zu-vtile .zu-ico { position: absolute; right: 8px; bottom: 8px; width: 15px; height: 15px; color: rgba(255,255,255,.85); }

.zoriya-ugc .zu-phone {
  position: absolute; z-index: 4; left: 421px; top: 55px; width: 238px; height: 472px; border-radius: 36px;
  background: #0c0c10; border: 4px solid #15151b; box-shadow: 0 26px 60px rgba(16,16,19,.28); overflow: hidden;
}
.zoriya-ugc .zu-pscreen { position: absolute; inset: 5px; border-radius: 24px; overflow: hidden; background: #000; }
.zoriya-ugc .zu-scene { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.zoriya-ugc .zu-scene .zu-wm { width: 96px; height: 96px; color: rgba(255,255,255,.16); }
.zoriya-ugc .zu-scene .zu-name {
  position: absolute; top: 50%; left: 0; right: 0; text-align: center; transform: translateY(-50%);
  font-family: 'Fraunces', serif; font-size: 23px; font-weight: 500; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.zoriya-ugc .zu-pUI { position: absolute; inset: 5px; border-radius: 24px; z-index: 3; pointer-events: none; }
.zoriya-ugc .zu-pbar { position: absolute; top: 10px; left: 12px; right: 12px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); }
.zoriya-ugc .zu-pbar i { position: absolute; inset: 0; width: 0; border-radius: 3px; background: #fff; }
.zoriya-ugc .zu-handle { position: absolute; top: 22px; left: 12px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.zoriya-ugc .zu-hook { position: absolute; left: 12px; right: 46px; bottom: 18px; font-size: 13px; font-weight: 600; color: #fff; line-height: 1.25; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.zoriya-ugc .zu-side { position: absolute; right: 10px; bottom: 20px; display: flex; flex-direction: column; gap: 13px; }
.zoriya-ugc .zu-side .zu-b { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; color: #fff; }
.zoriya-ugc .zu-side .zu-b svg { width: 15px; height: 15px; }

.zoriya-ugc .zu-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.zoriya-ugc .zu-pk { background: var(--zu-panel); border: 1px solid var(--zu-line); border-radius: 16px; padding: 22px; }
.zoriya-ugc .zu-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(43,43,240,.10); color: var(--zu-cobalt); font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.zoriya-ugc .zu-pk-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 19px; letter-spacing: -.01em; color: var(--ink); }
.zoriya-ugc .zu-pk p { font-size: 13.5px; color: var(--zu-t2); margin-top: 8px; line-height: 1.5; }

.zoriya-ugc .zu-cta {
  margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--ink); color: #F4F3EE; border-radius: 18px; padding: 30px 34px;
}
.zoriya-ugc .zu-big { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.zoriya-ugc .zu-small { font-size: 13.5px; color: #A7A7AE; margin-top: 8px; line-height: 1.5; max-width: 620px; }
.zoriya-ugc .zu-cta-btn { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink); background: #F4F3EE; border: 0; border-radius: 999px; padding: 13px 24px; cursor: pointer; white-space: nowrap; transition: .2s; }
.zoriya-ugc .zu-cta-btn:hover { background: #fff; transform: translateY(-1px); }

.zoriya-ugc .zu-replay {
  position: absolute; top: 14px; right: 16px; z-index: 7; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--zu-t2);
  background: #fff; border: 1px solid var(--zu-line); border-radius: 999px; padding: 6px 13px; cursor: pointer;
}
.zoriya-ugc .zu-replay:hover { color: var(--zu-cobalt); border-color: var(--zu-cobalt); }
@media (prefers-reduced-motion: reduce) { .zoriya-ugc .zu-replay { display: none; } }
@media (max-width: 760px) { .zoriya-ugc .zu-packages { grid-template-columns: 1fr; } }