:root {
  --viva-green-50: #49c09d;
  --viva-green-60: #3ba284;
  --viva-green-85: #074a36;
  --viva-green-95: #04251d;
  --viva-deep-green: #13392e;
  --viva-lime: #cae780;
  --viva-pink: #fcddff;
  --viva-ground: #f4f6f2;
  --viva-white: #ffffff;
  --viva-border: rgba(19, 57, 46, 0.14);
}

body.is-locked { overflow: hidden; }
body.is-locked .site-header,
body.is-locked main { visibility: hidden; }

.view-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px;
  overflow: auto;
  background: linear-gradient(135deg, var(--viva-ground) 0%, #e3f3ed 55%, #d7edbd 100%);
}

.view-gate[hidden] { display: none; }

.view-gate::before,
.view-gate::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
}

.view-gate::before {
  width: 420px;
  height: 420px;
  right: -110px;
  top: -90px;
  background: radial-gradient(circle at 35% 35%, var(--viva-lime), rgba(202, 231, 128, 0));
}

.view-gate::after {
  width: 330px;
  height: 330px;
  left: -90px;
  bottom: -130px;
  background: radial-gradient(circle at 45% 40%, var(--viva-pink), rgba(252, 221, 255, 0));
}

.view-gate-card {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  padding: 42px;
  border: 1px solid rgba(19, 57, 46, 0.16);
  border-radius: 26px;
  color: var(--viva-green-95);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 30px 100px rgba(7, 74, 54, 0.16);
  backdrop-filter: blur(16px);
}

.view-logo {
  margin-bottom: 64px;
  color: var(--viva-green-95);
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -0.12em;
}

.view-eyebrow {
  margin: 0 0 13px;
  color: var(--viva-green-60);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 12px;
  font-weight: 800;
}

.view-gate h1 { margin: 0 0 16px; color: var(--viva-green-85); font-size: clamp(44px, 8vw, 68px); line-height: 0.95; }
.view-gate-card > p:not(.view-eyebrow) { max-width: 440px; color: #49625a; font-size: 17px; line-height: 1.55; }
.view-gate form { margin-top: 30px; }
.view-gate label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 800; }
.view-form-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.view-form-row input { min-width: 0; border: 1px solid var(--viva-border); border-radius: 10px; padding: 12px 13px; color: var(--viva-green-95); background: var(--viva-white); }
.view-form-row input:focus { outline: 2px solid var(--viva-green-50); border-color: transparent; }
.view-button { border: 0; border-radius: 10px; padding: 11px 17px; color: var(--viva-green-95); background: var(--viva-green-50); cursor: pointer; font: inherit; font-weight: 750; }
.view-button:hover { color: var(--viva-white); background: var(--viva-green-60); }
.view-error { min-height: 20px; margin: 8px 0 0; color: #b13a22; font-size: 13px; }

@media (max-width: 560px) {
  .view-gate { padding: 14px; }
  .view-gate-card { padding: 30px 22px; }
  .view-logo { margin-bottom: 46px; }
  .view-form-row { grid-template-columns: 1fr; }
}