:root {
  color-scheme: light;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: #052747;
  color: #17212b;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { min-height: 100vh; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(420px, 0.75fr); }
.welcome-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(42px, 6vw, 90px); color: #ffffff; background: radial-gradient(circle at 12% 18%, rgba(25, 128, 190, 0.48), transparent 28%), radial-gradient(circle at 88% 78%, rgba(8, 122, 117, 0.38), transparent 32%), linear-gradient(145deg, #052747 0%, #073763 48%, #1266a8 100%); }
.welcome-panel::before, .welcome-panel::after { content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 50%; pointer-events: none; }
.welcome-panel::before { width: 540px; height: 540px; top: -230px; right: -170px; }
.welcome-panel::after { width: 380px; height: 380px; right: 8%; bottom: -260px; }
.welcome-content, .environment-label { position: relative; z-index: 1; }
.welcome-content { width: min(720px, 100%); margin: auto 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; color: #c8ddeb; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.eyebrow-dot { width: 9px; height: 9px; border-radius: 50%; background: #50d890; box-shadow: 0 0 0 6px rgba(80, 216, 144, 0.13); }
h1 { max-width: 700px; margin: 0; font-size: clamp(2.7rem, 5.2vw, 5.4rem); line-height: 0.98; letter-spacing: -0.055em; }
.welcome-copy { max-width: 650px; margin: 30px 0 42px; color: #d8e7f2; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { min-height: 170px; padding: 22px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 18px; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); }
.feature-number { display: block; margin-bottom: 28px; color: #69a1c8; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; }
.feature strong { font-size: 0.98rem; }
.feature p { margin: 8px 0 0; color: #c8ddeb; font-size: 0.83rem; line-height: 1.5; }
.environment-label { margin: 38px 0 0; color: #9fc3dc; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.signin-panel { display: grid; place-items: center; padding: clamp(28px, 5vw, 72px); background: radial-gradient(circle at 100% 0%, #e7f2fa 0%, transparent 33%), #f6fafc; }
.signin-card { width: min(430px, 100%); padding: clamp(30px, 4vw, 48px); border: 1px solid #dfe6ec; border-radius: 26px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 28px 70px rgba(5, 39, 71, 0.14); }
.brand-logo { display: block; width: min(285px, 100%); height: auto; margin-bottom: 32px; }
.product-label { margin-bottom: 18px; color: #17669e; font-size: 0.77rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
h2 { margin: 0; color: #052747; font-size: clamp(2rem, 4vw, 2.65rem); letter-spacing: -0.04em; }
.signin-copy { margin: 14px 0 28px; color: #617181; line-height: 1.65; }
.signin-button { display: flex; align-items: center; justify-content: center; gap: 13px; width: 100%; min-height: 54px; padding: 13px 20px; border-radius: 12px; color: #ffffff; background: #1266a8; box-shadow: 0 10px 24px rgba(18, 102, 168, 0.25); font-weight: 700; text-decoration: none; transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.signin-button:hover { transform: translateY(-1px); background: #073763; box-shadow: 0 14px 28px rgba(7, 55, 99, 0.28); }
.signin-button:focus-visible { outline: 3px solid #69a1c8; outline-offset: 3px; }
.microsoft-mark { display: grid; grid-template-columns: repeat(2, 8px); grid-template-rows: repeat(2, 8px); gap: 2px; }
.microsoft-mark span:nth-child(1) { background: #f25022; }
.microsoft-mark span:nth-child(2) { background: #7fba00; }
.microsoft-mark span:nth-child(3) { background: #00a4ef; }
.microsoft-mark span:nth-child(4) { background: #ffb900; }
.security-note { display: flex; align-items: center; gap: 13px; margin-top: 25px; padding: 16px; border-radius: 12px; color: #435668; background: #eaf4fb; font-size: 0.78rem; line-height: 1.5; }
.lock-icon { position: relative; flex: 0 0 auto; width: 17px; height: 14px; margin-top: 5px; border-radius: 3px; background: #17669e; }
.lock-icon::before { content: ""; position: absolute; width: 9px; height: 9px; left: 4px; top: -7px; border: 2px solid #17669e; border-bottom: 0; border-radius: 8px 8px 0 0; }
.access-notice { margin: 24px 0 0; color: #82909b; font-size: 0.75rem; line-height: 1.5; text-align: center; }
@media (max-width: 960px) {
  .login-shell { grid-template-columns: 1fr; }
  .welcome-panel { min-height: auto; padding: 48px 28px; }
  h1 { max-width: 700px; font-size: clamp(2.5rem, 9vw, 4.2rem); }
  .feature-grid { grid-template-columns: 1fr; }
  .feature { min-height: auto; display: flex; gap: 18px; }
  .feature-number { margin: 2px 0 0; }
  .environment-label { display: none; }
  .signin-panel { padding: 42px 20px 54px; }
}
@media (max-width: 520px) {
  .welcome-panel { padding: 38px 22px; }
  .welcome-copy { margin-bottom: 30px; }
  .feature-grid { display: none; }
  .signin-card { padding: 28px 22px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) { .signin-button { transition: none; } }