:root {
  --navy: #061d65;
  --blue: #1c79ff;
  --electric: #315cff;
  --sky: #0aa8ff;
  --soft-blue: #dbeeff;
  --text: #163d7b;
  --muted: #6682b2;
  --line: rgba(125, 171, 230, 0.42);
  --white: #fff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--navy);
  background: #eef8ff;
}
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 57.7% 42.3%;
  overflow: hidden;
  background: #f6fbff;
}

/* LEFT SIDE */
.visual-panel {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background-image: url("../images/optical-hero.png");
  background-size: cover;
  background-position: 54% center;
}
.visual-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(247,252,255,.98) 0%, rgba(247,252,255,.92) 29%, rgba(247,252,255,.4) 52%, rgba(247,252,255,.04) 79%),
    linear-gradient(180deg, rgba(235,248,255,.45), rgba(255,255,255,.12));
  pointer-events: none;
}
.visual-panel::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 760px;
  height: 760px;
  left: -515px;
  top: -115px;
  background: rgba(255,255,255,.76);
  border-radius: 50%;
  filter: blur(.3px);
}
.visual-content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: 3.1vw 4.25vw 2.4vw;
  display: flex;
  flex-direction: column;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  width: max-content;
}

.brand-logo-img {
  display: block;
  height: auto;
  object-fit: contain;
}
.brand-logo-left { width: clamp(220px, 20vw, 345px); }
.brand-logo-card { width: clamp(160px, 14vw, 240px); }
.brand-icon { width: 98px; height: auto; }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong {
  font: 800 clamp(30px, 2.7vw, 54px)/.95 "Montserrat", sans-serif;
  letter-spacing: -2.2px;
}
.brand-copy small {
  margin-top: 10px;
  font: 600 clamp(9px, .72vw, 14px)/1 "Montserrat", sans-serif;
  letter-spacing: .37em;
  color: #35558d;
  text-align: center;
}
.navy { color: #06185c; }
.blue { color: #1779ff; }

.hero-copy { margin-top: clamp(70px, 8.6vh, 145px); width: 54%; min-width: 560px; }
.eyebrow {
  margin: 0 0 18px;
  font: 600 clamp(11px, .83vw, 16px)/1.2 "Montserrat", sans-serif;
  letter-spacing: .36em;
  color: #4165a6;
}
.hero-copy h1 {
  margin: 0;
  font: 800 clamp(48px, 4.05vw, 82px)/1.03 "Montserrat", sans-serif;
  letter-spacing: -3px;
  color: #071f69;
}
.hero-copy h1 span {
  color: #1978ff;
  text-shadow: 0 8px 20px rgba(28, 121, 255, .13);
}
.lead {
  margin: 24px 0 26px;
  font-size: clamp(16px, 1.08vw, 22px);
  line-height: 1.65;
  color: #4c6ea3;
}
.benefits { display: grid; gap: 18px; }
.benefit-item { display: flex; align-items: center; gap: 18px; }
.benefit-icon {
  width: 58px; height: 58px; flex: 0 0 58px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #163f98;
  background: rgba(196,224,255,.58);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.48);
}
.benefit-icon svg { width: 29px; height: 29px; }
.benefit-item div { display: flex; flex-direction: column; }
.benefit-item strong { font-size: clamp(14px, .97vw, 19px); font-weight: 600; color: #173f82; }
.benefit-item small { margin-top: 3px; font-size: clamp(11px, .77vw, 15px); color: #5373a7; }

.signature {
  margin-top: auto;
  margin-left: .2vw;
  transform: rotate(-8deg);
  width: max-content;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: clamp(31px, 2.15vw, 45px);
  line-height: .82;
  color: #0f46a8;
  border-bottom: 3px solid #1180ff;
  padding: 0 6px 10px;
}
.signature span { margin-left: 22px; }
.brand-row {
  margin-left: 18.2vw;
  margin-top: -6px;
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.6vw, 58px);
  color: #5871a2;
  font: 500 clamp(13px, 1.06vw, 21px)/1 "Times New Roman", serif;
  letter-spacing: .08em;
  white-space: nowrap;
}
.brand-row .rayban { font-family: "Brush Script MT", cursive; font-size: clamp(20px,1.45vw,29px); transform: rotate(-7deg); color: #41669f; }
.brand-row .oakley { font-size: clamp(10px,.75vw,15px); letter-spacing: .22em; font-weight: 700; }
.priority {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #5272a7;
  font-size: clamp(11px,.78vw,15px);
}
.priority i { width: 58px; height: 1px; background: #7aa7dc; display: block; margin-left: 2px; }
.mini-shield {
  display: grid; place-items: center;
  width: 18px; height: 18px;
  border: 2px solid #628bc3;
  border-radius: 5px 5px 8px 8px;
  font-size: 10px;
  font-weight: 800;
}

/* RIGHT SIDE */
.form-panel {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6.2vh 4.1vw 8vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 40% 15%, rgba(193, 227, 255,.78) 0 0, rgba(193,227,255,.44) 18%, transparent 42%),
    linear-gradient(180deg, #f7fbff 0%, #edf7ff 47%, #eaf6ff 100%);
}
.form-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(132,202,255,.12));
  pointer-events: none;
}
.decor-circle { position: absolute; border-radius: 50%; pointer-events: none; }
.decor-one {
  width: 420px; height: 420px;
  right: -250px; top: 32%;
  border: 56px solid rgba(96,176,255,.21);
  box-shadow: 0 0 70px rgba(68,156,255,.2) inset;
}
.decor-two {
  width: 260px; height: 260px;
  right: -155px; top: 50%;
  border: 43px solid rgba(255,255,255,.72);
}
.decor-three {
  width: 520px; height: 520px;
  left: 5%; top: -390px;
  background: rgba(255,255,255,.56);
}
.top-tag {
  position: absolute;
  top: 4.65vh;
  right: 3.4vw;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: clamp(11px,.82vw,16px);
  color: #406497;
}
.top-tag span { color: #6b88b5; }
.top-tag i { width: 38px; height: 2px; background: #2b78ff; display: block; }

.login-card {
  position: relative;
  z-index: 3;
  width: min(100%, 650px);
  min-height: 78vh;
  padding: 3.2vh 3.1vw 3.4vh;
  border-radius: 27px;
  border: 2px solid rgba(255,255,255,.88);
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(244,249,255,.6));
  box-shadow: 0 24px 70px rgba(68, 134, 198, .17), inset 0 0 26px rgba(255,255,255,.58);
  backdrop-filter: blur(18px);
}
.dots {
  position: absolute;
  top: 41px; right: 28px;
  width: 54px;
  display: grid;
  grid-template-columns: repeat(4, 5px);
  gap: 12px;
}
.dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(88,150,226,.33); }
.brand-card {
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-card .brand-icon { width: 96px; }
.brand-card .brand-copy strong { font-size: clamp(29px,2vw,41px); letter-spacing: -2px; }
.brand-card .brand-copy small { font-size: 10px; margin-top: 8px; }
.brand-copy.center { align-items: center; }
.form-heading { margin-top: 9px; }
.form-heading .eyebrow { margin-bottom: 12px; font-size: 12px; }
.form-heading h2 {
  margin: 0;
  font: 700 clamp(28px,2.05vw,42px)/1.2 "Montserrat", sans-serif;
  letter-spacing: -1.6px;
  color: #06185e;
}
.form-heading h2 span { color: #2c53ff; }
.form-heading > p:last-child { margin: 10px 0 27px; font-size: clamp(14px,1vw,18px); color: #5f7eaf; }

form { display: grid; gap: 16px; }
.input-wrap {
  position: relative;
  height: 60px;
  border: 1px solid rgba(161,196,235,.52);
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(221,239,255,.85), rgba(255,255,255,.52));
  display: flex;
  align-items: center;
  transition: .25s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.input-wrap:focus-within {
  border-color: rgba(54,107,255,.45);
  box-shadow: 0 0 0 4px rgba(40,107,255,.08), inset 0 1px 0 rgba(255,255,255,.8);
}
.field-icon { width: 55px; display: grid; place-items: center; color: #173b8d; flex: 0 0 55px; }
.field-icon svg { width: 26px; height: 26px; }
.input-wrap input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #143b83;
  font-size: 15px;
  padding: 0 48px 0 0;
}
.input-wrap input::placeholder { color: #6a86b5; opacity: 1; }
.eye-btn {
  position: absolute;
  right: 16px;
  width: 35px; height: 35px;
  border: 0;
  background: transparent;
  color: #416aa7;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.eye-btn:hover { background: rgba(67,130,222,.08); }
.eye-btn svg { width: 22px; }
.form-options {
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #496da6;
}
.form-options > a { color: #1359e9; font-weight: 500; }
.remember { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.remember input { position: absolute; opacity: 0; pointer-events: none; }
.checkmark {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  background: linear-gradient(145deg,#079cff,#2d62ff);
  box-shadow: 0 4px 11px rgba(31,105,255,.25);
}
.remember input:not(:checked) + .checkmark { background: #f3f8ff; color: transparent; border: 1px solid #9abde3; box-shadow: none; }
.login-btn {
  height: 58px;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(90deg, #0aa9f8 0%, #276fff 58%, #3356ff 100%);
  box-shadow: 0 15px 25px rgba(41,94,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  transition: transform .2s ease, box-shadow .2s ease;
}
.login-btn:hover { transform: translateY(-1px); box-shadow: 0 17px 28px rgba(41,94,255,.28); }
.login-btn svg { width: 24px; }
.divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; color: #5172a5; margin: 2px 0; }
.divider span { height: 1px; background: #9ec3ea; }
.divider b { font-size: 12px; font-weight: 600; }
.google-btn {
  height: 55px;
  border: 1px solid rgba(126,169,224,.55);
  border-radius: 18px;
  background: rgba(255,255,255,.26);
  color: #0f286b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  font-weight: 500;
}
.google-btn:hover { background: rgba(255,255,255,.56); }
.google-g {
  width: 25px; height: 25px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
  padding: 3px;
}
.google-g .c1 { width: 100%; height: 100%; border-radius: 50%; background: white; display: grid; place-items: center; font: 800 15px/1 Arial; color: #4285f4; font-style: normal; }
.signup { text-align: center; margin: 16px 0 0; color: #5d7aa9; font-size: 13px; }
.signup a { color: #0e58ef; margin-left: 4px; }
.error-message { margin: -5px 0 0; min-height: 18px; color: #d13b50; text-align: center; font-size: 12px; }
.pager { position: absolute; right: 4vw; bottom: 4.5vh; z-index: 2; display: flex; gap: 11px; }
.pager span { width: 40px; height: 8px; border-radius: 999px; background: #c5daf2; }
.pager .active { width: 48px; background: #1b6cff; }

@media (max-width: 1400px) {
  .login-card { width: min(100%, 560px); padding-left: 40px; padding-right: 40px; }
  .visual-content { padding-left: 55px; padding-right: 45px; }
  .hero-copy { min-width: 470px; }
  .brand-row { margin-left: 15vw; gap: 26px; }
}

@media (max-width: 1100px) {
  .login-shell { grid-template-columns: 1fr; }
  .visual-panel { display: none; }
  .form-panel { min-height: 100vh; padding: 90px 24px 70px; }
  .login-card { width: min(100%, 600px); min-height: auto; }
  .top-tag { top: 28px; right: 28px; }
  .pager { right: 28px; bottom: 25px; }
}

@media (max-width: 640px) {
  .form-panel { padding: 74px 16px 58px; }
  .login-card { padding: 26px 20px 26px; border-radius: 22px; }
  .dots { right: 20px; top: 27px; transform: scale(.82); transform-origin: top right; }
  .brand-card { margin-bottom: 22px; }
  .form-heading h2 { font-size: 27px; }
  .form-heading > p:last-child { font-size: 14px; margin-bottom: 22px; }
  .input-wrap { height: 56px; border-radius: 17px; }
  .login-btn { height: 56px; border-radius: 17px; }
  .google-btn { height: 53px; border-radius: 17px; }
  .top-tag { left: 18px; right: auto; gap: 10px; font-size: 11px; }
  .top-tag i { width: 24px; }
  .pager span { width: 28px; height: 6px; }
  .pager .active { width: 38px; }
}

/* Accessible local-only login controls. */
.form-options{gap:12px;flex-wrap:wrap}.form-options>span{font-size:12px;color:#54708e}.login-notice{padding:12px;border-radius:10px;background:#eef5ff;color:#24599c;font-size:13px}.error-message:empty{display:none}.error-message{white-space:normal;line-height:1.5}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #397cff;outline-offset:3px}.input-wrap:focus-within{border-color:#397cff}