/* ----- RESET & BASE ----- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #0a1e36;
  --primary-hover: #061428;
  --bg-main: #f3f7ff;
  --border-light: #e6e6e6;
  --text-dark: #0b1a2b;
  --text-muted: #455268;
}

body {
  font-family: "Inter", sans-serif;
  background: var(--bg-main);
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

/* ----- MAIN FULLSCREEN WRAPPER ----- */
.portal-wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
  background: var(--bg-main);
  overflow: hidden;
}

/* ----- LEFT: Minimalist Abstract Background ----- */
.left-hero {
    flex: 0 0 26%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1600" width="1200" height="1600"><rect width="1200" height="1600" fill="%230a111f"/><circle cx="300" cy="400" r="220" fill="%2300d4ff" opacity="0.10"/><circle cx="850" cy="900" r="280" fill="%2300ff88" opacity="0.08"/><circle cx="150" cy="1100" r="180" fill="%234d7aff" opacity="0.12"/><circle cx="950" cy="300" r="150" fill="%23b388ff" opacity="0.10"/><path d="M0 0 L1200 0 L1200 1600 L0 1600 Z" fill="url(%23grad)" opacity="0.12"/><defs><linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.06"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></linearGradient></defs></svg>') no-repeat center / cover;
    background-color: #0a111f;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 40px 30px;
}

.left-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.1) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}