/* ══════════════════════════════════════════════════════════════
   Talk & Code — Gateway (index.html)
   ══════════════════════════════════════════════════════════════ */

html, body { height: 100%; }
body { overflow: hidden; }

/* ── Top bar ── */
.top-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 36px; pointer-events: none;
}
.top-bar > * { pointer-events: all; }

.logo {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px; font-weight: 400; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 10px;
}
.logo svg { display: block; }
.logo__text { color: var(--fg); }
.logo__amp  { color: var(--tac-teal); }

.top-bar__controls {
  display: flex; align-items: center; gap: 14px;
  background: rgba(10,18,18,0.42);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 24px; padding: 7px 16px;
}
.top-bar__controls .lang-select {
  color: rgba(242,239,232,0.8);
  font-size: 11px; letter-spacing: 0.08em;
}

/* ── Split layout ── */
.split { display: flex; height: 100vh; width: 100vw; }

.split__half {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 80px 48px 48px; cursor: pointer; text-decoration: none;
  position: relative; transition: flex 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.split__half:hover { flex: 1.12; }

.split__half--admin {
  background: var(--admin-bg);
  border-right: 1px solid var(--border);
}
.split__half--admin .split__number { color: var(--tac-teal); }
.split__half--admin .split__title  { color: var(--admin-fg); }
.split__half--admin .split__sub    { color: rgba(20,24,27,0.5); }
[data-theme="dark"] .split__half--admin .split__title { color: var(--owner-fg); }
[data-theme="dark"] .split__half--admin .split__sub   { color: rgba(242,239,232,0.4); }

.split__half--owner { background: var(--owner-bg); }
.split__half--owner .split__number { color: var(--tac-teal); opacity: 0.6; }
.split__half--owner .split__title  { color: var(--owner-fg); }
.split__half--owner .split__sub    { color: rgba(242,239,232,0.45); }
.split__half--owner .split__arrow  { color: var(--tac-teal); }

.split__inner { text-align: center; max-width: 360px; position: relative; z-index: 1; }

.split__number {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 28px; display: block;
}
.split__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(26px, 3.2vw, 44px); font-weight: 400;
  line-height: 1.08; letter-spacing: -0.02em;
  margin-bottom: 20px; text-wrap: balance;
}
.split__sub {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.8;
}
.split__arrow {
  display: block; margin-top: 40px; font-size: 28px;
  opacity: 0; transform: translateX(-8px);
  transition: opacity 0.25s, transform 0.25s;
  color: var(--tac-teal);
}
.split__half:hover .split__arrow { opacity: 1; transform: translateX(0); }

.split__amp {
  position: absolute; font-family: 'Instrument Serif', serif;
  font-style: italic; font-size: 480px; line-height: 1;
  opacity: 0.03; user-select: none; pointer-events: none;
  color: var(--tac-teal); bottom: -80px;
}
.split__half--admin .split__amp { right: -100px; }
.split__half--owner .split__amp { left: -100px; opacity: 0.06; }

.split__divider {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 5; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--tac-teal); pointer-events: none;
}
.split__divider svg { display: block; }

.tagline {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 5; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(242,239,232,0.72); white-space: nowrap;
  pointer-events: none; text-align: center;
  background: rgba(10,18,18,0.42);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px; padding: 7px 18px;
}

/* ── Responsive ── */
@media (max-width: 700px) {
  body { overflow: auto; }
  .split { flex-direction: column; height: auto; min-height: 100vh; }
  .split__half { flex: none; min-height: 50vh; padding: 80px 32px 40px; }
  .split__half:hover { flex: none; }
  .split__divider { display: none; }
  .split__amp { display: none; }
  .tagline { display: none; }
  .top-bar { padding: 16px 20px; }
}