:root {
  color-scheme: dark;
  font-family: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07111d;
  color: #f4f8fb;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

.access-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 72px);
  background:
    radial-gradient(circle at 18% 12%, rgba(66, 224, 199, 0.15), transparent 32%),
    radial-gradient(circle at 84% 85%, rgba(82, 135, 255, 0.14), transparent 34%),
    linear-gradient(145deg, #07111d 0%, #0a1726 52%, #07101a 100%);
}

.access-card {
  width: min(100%, 480px);
  padding: clamp(28px, 6vw, 48px);
  border: 1px solid rgba(141, 173, 195, 0.18);
  border-radius: 28px;
  background: rgba(11, 25, 40, 0.88);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(20px);
}

.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, #62ead3, #33c9b2);
  color: #04120f;
  font-size: 23px;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(51, 201, 178, 0.22);
}

.eyebrow {
  margin: 24px 0 10px;
  color: #72e7d3;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

h1 { margin: 0; max-width: 420px; font-size: clamp(2rem, 7vw, 3rem); line-height: 1.02; letter-spacing: -0.045em; }
.intro { margin: 18px 0 28px; color: #aebdca; font-size: 1rem; line-height: 1.6; }
.access-form { display: grid; gap: 18px; }
label { display: grid; gap: 8px; color: #d9e4ec; font-size: 0.88rem; font-weight: 650; }
input {
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  border: 1px solid rgba(154, 183, 203, 0.22);
  border-radius: 13px;
  background: rgba(3, 12, 21, 0.74);
  color: #fff;
  font: inherit;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
input:focus { border-color: #65e5d0; background: #071521; box-shadow: 0 0 0 4px rgba(101, 229, 208, 0.13); }
button {
  min-height: 52px;
  margin-top: 4px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #63ead4, #38cbb5);
  color: #04130f;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 16px 30px rgba(45, 199, 177, 0.18);
}
button:hover { filter: brightness(1.05); transform: translateY(-1px); }
button:focus-visible { outline: 3px solid rgba(132, 239, 220, 0.65); outline-offset: 3px; }
.error { margin: 0 0 20px; padding: 12px 14px; border: 1px solid rgba(255, 134, 134, 0.38); border-radius: 12px; background: rgba(125, 35, 45, 0.24); color: #ffd7d7; font-size: 0.9rem; line-height: 1.45; }
.privacy { margin: 22px 0 0; color: #748798; font-size: 0.78rem; text-align: center; }

@media (max-width: 520px) {
  .access-shell { place-items: stretch; padding: 0; }
  .access-card { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; border: 0; border-radius: 0; background: rgba(7, 17, 29, 0.78); box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }