.split-screen {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
}

.panel {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 6rem 2rem;
  overflow: hidden;
  isolation: isolate;
}

.panel--web { --accent: oklch(0.78 0.13 199); --accent-ink: oklch(0.15 0.02 199); background: oklch(0.29 0.016 265); }
.panel--dj  { --accent: oklch(0.80 0.16 82);  --accent-ink: oklch(0.16 0.02 82);  background: oklch(0.265 0.015 265); }

.panel-bg {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 50% at 50% 20%, var(--accent-soft, color-mix(in oklch, var(--accent) 16%, transparent)) 0%, transparent 70%);
}
.panel--web .panel-bg { background: radial-gradient(60% 55% at 80% 15%, color-mix(in oklch, var(--accent) 18%, transparent) 0%, transparent 70%); }
.panel--dj .panel-bg { background: radial-gradient(60% 55% at 20% 85%, color-mix(in oklch, var(--accent) 20%, transparent) 0%, transparent 70%); }

.panel-content { position: relative; z-index: 2; max-width: 30rem; text-align: center; margin-inline: auto; }
.panel .eyebrow { justify-content: center; }
.panel-title { font-size: clamp(2.2rem, 4vw + 1rem, 3.4rem); margin-top: .3rem; }
.panel-desc { margin-top: 1.1rem; color: var(--ink-soft); font-size: 1.05rem; }
.panel-cta {
  margin-top: 2.2rem; display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: var(--accent-ink); background: var(--accent); padding: .9rem 1.7rem; border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.panel-cta svg { width: 16px; height: 16px; transition: transform .2s ease; }
.panel:hover .panel-cta { transform: translateY(-2px); box-shadow: 0 14px 34px -12px color-mix(in oklch, var(--accent) 55%, transparent); }
.panel:hover .panel-cta svg { transform: translateX(3px); }

.mark-graphic { position: absolute; z-index: -1; opacity: .5; pointer-events: none; }
.mark-graphic--web { right: -4%; bottom: -6%; width: min(30rem, 46vw); color: var(--accent); opacity: .22; }
.mark-graphic--dj { left: -4%; top: -8%; width: min(26rem, 40vw); color: var(--accent); opacity: .2; }

.seam {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line);
  z-index: 5; transform: translateX(-0.5px);
}
.brand-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 10; width: 56px; height: 56px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line-strong);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .85rem;
  letter-spacing: .02em; color: var(--ink);
}
.scroll-hint {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  z-index: 10; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
}

@media (max-width: 860px) {
  .split-screen { flex-direction: column; min-height: 100vh; min-height: 100dvh; }
  .panel {
    min-height: 50vh; min-height: 50dvh;
    padding: 2.4rem 1.4rem;
  }
  .panel-content { max-width: 24rem; }
  .panel-title { font-size: clamp(1.5rem, 5.5vw + .5rem, 2.15rem); margin-top: .25rem; }
  .panel-desc { margin-top: .6rem; font-size: .88rem; }
  .panel .eyebrow { font-size: .76rem; }
  .panel-cta { margin-top: 1.1rem; padding: .7rem 1.3rem; font-size: .85rem; }
  .seam { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; transform: translateY(-0.5px); }
  .brand-badge { top: 50%; left: 50%; width: 44px; height: 44px; font-size: .72rem; }
  .mark-graphic--web, .mark-graphic--dj { width: 58vw; opacity: .14; }
  .scroll-hint { display: none; }
}

@media (max-width: 860px) and (max-height: 640px) {
  .panel { padding: 1.6rem 1.2rem; }
  .panel-title { font-size: clamp(1.3rem, 5vw + .4rem, 1.8rem); }
  .panel-desc { display: none; }
  .panel-cta { margin-top: .8rem; }
}