/* Voyage Studio — Login page */
:root {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  background: #04101e;
  color: #d8eeff;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

body { min-height: 100dvh; }

.shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
}

/* ── Story side ─────────────────────── */
.story {
  background: #04101e;
  padding: 52px clamp(32px, 7vw, 88px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  overflow: hidden;
}

/* Decorative ring */
.story::before {
  content: '';
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  border: 1px solid rgba(0,203,168,.09);
  right: -260px; top: 8%;
  box-shadow:
    0 0 0 90px  rgba(0,203,168,.03),
    0 0 0 180px rgba(0,203,168,.015);
  pointer-events: none;
}
.story::after {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(64,149,255,.07);
  left: -120px; bottom: 8%;
  pointer-events: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.brand > span {
  width: 52px; height: 52px;
  border-radius: 15px;
  background: linear-gradient(135deg, #00cba8, #4095ff);
  display: grid; place-items: center;
  font-size: 20px; font-weight: 900;
  color: #021a28;
  box-shadow: 0 4px 18px rgba(0,203,168,.3);
  flex-shrink: 0;
}
.brand div { display: grid; gap: 1px; }
.brand small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  color: #2c5270;
  text-transform: uppercase;
}
.brand strong {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.story .eyebrow { color: #00cba8; }

.copy h1 {
  font-size: clamp(36px, 4.6vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.04em;
  margin-bottom: 22px;
  color: #d8eeff;
}

.copy > p {
  font-size: 16px;
  color: #5e8fab;
  line-height: 1.65;
  max-width: 520px;
}

/* Route strip */
.route {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  color: #2c5270;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.route i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #1c4565, transparent);
}
.route b {
  color: #00cba8;
  display: flex;
  align-items: center;
  gap: 7px;
}
.route b::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00cba8;
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.65); }
}

/* ── Access side ────────────────────── */
.access {
  background: #f2f6f4;
  color: #0a1f30;
  display: grid;
  place-items: center;
  padding: 40px clamp(24px, 5vw, 60px);
  position: relative;
  z-index: 2;
  box-shadow: -28px 0 80px rgba(0,0,0,.22);
}

.access form { width: min(400px, 100%); }

/* Lock icon */
.lock-icon {
  width: 52px; height: 52px;
  border-radius: 15px;
  background: #d4f0e7;
  color: #0a7a6a;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}
.lock-icon svg { width: 23px; height: 23px; }

.access .eyebrow { color: #0a7a6a; }

.access h2 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.04em;
  margin: 10px 0 8px;
  color: #071a28;
}

.help {
  font-size: 14px;
  color: #527a8a;
  line-height: 1.6;
  margin-bottom: 28px;
}

.access label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  color: #4a7080;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.access input[type="password"] {
  width: 100%;
  padding: 15px 16px;
  border: 1.5px solid #bdd0da;
  border-radius: 11px;
  background: white;
  font: inherit;
  font-size: 16px;
  color: #071a28;
  outline: none;
  letter-spacing: .12em;
  transition: border-color .15s, box-shadow .15s;
}
.access input[type="password"]:focus {
  border-color: #0a8a7a;
  box-shadow: 0 0 0 4px rgba(10,138,122,.11);
}
.access input[type="password"]::placeholder {
  letter-spacing: 0;
  color: #9ab4c0;
}

.access button[type="submit"] {
  width: 100%;
  margin-top: 14px;
  padding: 16px;
  border: none;
  border-radius: 11px;
  background: #0a8070;
  color: white;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background .15s, transform .1s;
}
.access button[type="submit"]:hover  { background: #087060; }
.access button[type="submit"]:active { transform: scale(.98); }
.access button[type="submit"] span   { font-size: 18px; opacity: .85; }

.error {
  padding: 12px 14px;
  background: #ffecee;
  color: #9a1a25;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  border: 1px solid #f5c2c6;
}

.privacy {
  text-align: center;
  font-size: 11px;
  color: #7a9aaa;
  margin-top: 18px;
  letter-spacing: .02em;
}

/* ── Mobile ─────────────────────────── */
@media (max-width: 800px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .story {
    padding: 32px 24px;
    gap: 20px;
    min-height: auto;
  }

  .copy h1  { font-size: 36px; }
  .copy > p { display: none; }
  .route    { display: none; }

  .access {
    padding: 36px 24px 48px;
    box-shadow: none;
    place-items: start;
    border-top: 1px solid #cdd8e0;
  }

  .access form { width: 100%; }

  .access h2 { font-size: 28px; }
}