:root { --accent: #c2c6ce; --accent-dim: #82868f; }

.gateway-header { background: transparent; position: absolute; top: 0; left: 0; right: 0; z-index: 20; border: none; backdrop-filter: none; }
.gateway-header .header-inner { padding-top: 24px; }

.gateway-main { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 140px 0 60px; }

.gateway-intro { margin-bottom: 48px; }
.gateway-intro h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); max-width: 820px; margin-left: auto; margin-right: auto; }

.split-hero {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 62vh;
}

.split-panel {
  position: relative;
  display: flex; align-items: flex-end;
  padding: 56px;
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  border-top: 1px solid var(--line);
  transition: flex-grow .5s cubic-bezier(.16,.84,.44,1), background .4s ease;
}

.panel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }

.panel-personal { background: radial-gradient(circle at 30% 20%, rgba(194,198,206,0.16), transparent 60%), var(--bg); border-right: 1px solid var(--line); }
.panel-enterprise { background: radial-gradient(circle at 70% 20%, rgba(216,196,138,0.18), transparent 60%), #0e0c11; }

.split-hero:hover .split-panel { flex-grow: 1; }
.split-panel:hover { background-color: rgba(255,255,255,0.02); }

.panel-content { position: relative; z-index: 2; max-width: 460px; }
.panel-tag {
  display: inline-block; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem;
  font-weight: 700; color: var(--accent); margin-bottom: 14px;
}
.panel-enterprise .panel-tag { color: #d8c48a; }
.panel-content h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.1; margin-bottom: .5em; }
.panel-content p { font-size: .98rem; max-width: 400px; }
.panel-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 1.2em;
  font-weight: 700; font-size: .92rem; color: var(--ink);
  transition: gap .2s ease;
}
.split-panel:hover .panel-cta { gap: 14px; }
.panel-enterprise .panel-cta svg { color: #d8c48a; }
.panel-personal .panel-cta svg { color: var(--accent); }

@media (max-width: 820px) {
  .split-hero { grid-template-columns: 1fr; }
  .split-panel { min-height: 46vh; border-right: none; border-bottom: 1px solid var(--line); padding: 40px; }
  .gateway-main { padding-top: 110px; }
}