/* 分流頁：左 UIUX（Charcoal 專業風）｜右 painteeme（Ivory 童趣風） */
html, body { height: 100%; }
body { background: var(--pt-charcoal); }

.split { position: relative; display: flex; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }

.side {
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center;
  text-decoration: none; overflow: hidden;
  transition: flex .6s cubic-bezier(.2,.8,.2,1);
}
@media (hover: hover) and (min-width: 768px) {
  .split:hover .side { flex: .85; }
  .split .side:hover, .split .side:focus-visible { flex: 1.35; }
  .go span { display: inline-block; transition: transform .3s; }
  .side:hover .go span { transform: translateX(6px); }
}
.side:focus-visible { outline-offset: -8px !important; }

.side-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; max-width: 400px; padding: 0 2.5rem; }
.eyebrow { font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; font-weight: 500; }
.side-title { display: block; font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.25; margin-bottom: 1rem; }
.side-text { font-size: 1rem; line-height: 1.85; margin-bottom: 1.75rem; }
.go { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: 1rem; font-weight: 500; padding: .5rem 1.5rem; border-radius: 50rem; }

/* ---------- 左：UIUX ---------- */
.side-ux { background: var(--pt-charcoal); color: var(--pt-ivory); }
.ux-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,248,240,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,248,240,.07) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 40% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 40% 50%, #000 30%, transparent 75%);
}
.side-ux .eyebrow { color: var(--pt-sage-soft); }           /* 6.0:1 */
.side-ux .side-title { color: var(--pt-ivory); }
.side-ux .side-text { color: var(--pt-ivory); }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; margin: -.5rem 0 1.75rem; }
.chips span { font-size: .8125rem; border: 1px solid var(--pt-sage); color: var(--pt-sage-soft); padding: .125rem .625rem; border-radius: .375rem; }
.side-ux .go { border: 2px solid var(--pt-ivory); color: var(--pt-ivory); border-radius: .5rem; }
.side-ux:hover .go { background: var(--pt-ivory); color: var(--pt-charcoal); }

/* ---------- 右：painteeme ---------- */
.side-pt { background: var(--pt-ivory); color: var(--pt-charcoal); }
.blob { position: absolute; z-index: 1; transition: transform 1.2s ease; }
.b1 { width: 46vmin; height: 42vmin; background: var(--pt-blush); top: -10vmin; right: -10vmin; border-radius: 58% 42% 52% 48% / 46% 54% 46% 54%; }
.b2 { width: 30vmin; height: 28vmin; background: var(--pt-butter); bottom: -6vmin; left: -6vmin; border-radius: 44% 56% 40% 60% / 58% 42% 58% 42%; }
.b3 { width: 14vmin; height: 13vmin; background: var(--pt-sage); bottom: 14vmin; right: 12%; border-radius: 52% 48% 60% 40% / 40% 60% 44% 56%; }
.side-pt:hover .b1 { transform: translate(-2vmin, 2vmin) rotate(8deg); }
.side-pt:hover .b2 { transform: translate(2vmin, -2vmin) rotate(-6deg); }
.side-pt:hover .b3 { transform: translateY(-2vmin); }
.side-pt .eyebrow { color: var(--pt-cocoa); }
.side-pt .side-title { color: var(--pt-cocoa); }
.side-pt .side-title { white-space: nowrap; margin-bottom: 1.5rem; }
.side-pt .side-title .script { font-size: .9em; color: var(--pt-charcoal); }
.side-pt .go { background: var(--pt-blush); color: var(--pt-charcoal); }
.side-pt:hover .go { background: #F3C1B1; }

/* ---------- 名牌 ---------- */
.name-tag {
  position: absolute; z-index: 5; top: 1.75rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
  background: var(--pt-ivory); color: var(--pt-charcoal);
  padding: .5rem 1.75rem .625rem; border-radius: 50rem; box-shadow: 0 6px 24px rgba(63,66,64,.25); white-space: nowrap;
}
.name-tag .name { font-size: 1.0625rem; font-weight: 700; letter-spacing: .04em; }
.name-tag .role { font-size: .9375rem; color: var(--pt-cocoa); }

/* ---------- 手機：上下兩半 ---------- */
@media (max-width: 767.98px) {
  .split { flex-direction: column; }
  .side-inner { padding: 0 1.5rem; max-width: 440px; width: 100%; }
  .side-ux { align-items: flex-end; padding-bottom: 3.75rem; }
  .side-pt { align-items: flex-start; padding-top: 4rem; }
  .eyebrow { margin-bottom: .375rem; font-size: .75rem; }
  .side-title { font-size: 1.75rem; margin-bottom: .375rem; }
  .side-text { font-size: .9375rem; margin-bottom: 1rem; }
  .side-text br { display: none; }
  .chips { display: none; }
  .name-tag { top: 50%; transform: translate(-50%, -50%); padding: .375rem 1.25rem .5rem; }
  .b1 { width: 56vmin; height: 50vmin; top: auto; bottom: -18vmin; right: -14vmin; }
  .b2 { display: none; }
  .b3 { bottom: auto; top: 14vmin; right: 8%; }
}