:root {
  --navy: #052c5d;
  --navy-dark: #03234c;
  --teal: #007c89;
  --teal-light: #dff3f4;
  --blue: #075dad;
  --ink: #172033;
  --muted: #4b5565;
  --line: #d6e1e8;
  --surface: #ffffff;
  --surface-soft: #f1f7fa;
  --focus: #f5c400;
  --shadow: 0 16px 38px rgba(5, 44, 93, .13);
  --shell: 1440px;
}

* { box-sizing: border-box; }
html { scroll-behaviour: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
}
a { color: var(--blue); }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, .sso-button:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 4px;
}
.shell { width: min(var(--shell), calc(100% - 7rem)); margin-inline: auto; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 100; padding: .75rem 1rem; background: #fff; color: var(--navy); font-weight: 700; }
.skip-link:focus { top: 1rem; }

.site-header { min-height: 118px; display: flex; align-items: center; background: #fff; }
.brand { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.02; letter-spacing: -.03em; }
.brand-primary { color: var(--navy); font-size: clamp(1.75rem, 3vw, 2.45rem); font-weight: 800; }
.brand-secondary { color: var(--teal); font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 750; }

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(105deg, #edf5f8 0%, #f7fafc 70%, #eef7f8 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 30%;
  opacity: .35;
  background-image: radial-gradient(circle at 90% 20%, transparent 0 30%, rgba(0,124,137,.11) 31% 32%, transparent 33% 45%, rgba(0,124,137,.08) 46% 47%, transparent 48%);
  pointer-events: none;
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(360px, .9fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; padding-block: 4.35rem; }
.hero-copy h1 { margin: 0 0 .4rem; color: var(--navy); font-size: clamp(2.35rem, 4.5vw, 4rem); line-height: 1.08; letter-spacing: -.035em; }
.tagline { margin: 0 0 1.8rem; color: var(--teal); font-size: clamp(1.45rem, 2.7vw, 2rem); font-weight: 700; }
.hero-copy p:not(.tagline) { max-width: 53rem; margin: 0 0 1rem; font-size: clamp(1.05rem, 1.5vw, 1.3rem); }

.login-card { padding: clamp(2rem, 4vw, 3.2rem); text-align: center; background: rgba(255,255,255,.96); border: 1px solid #e5ecf1; border-radius: 17px; box-shadow: var(--shadow); }
.login-card h2 { margin: .9rem 0 .45rem; color: var(--navy); font-size: clamp(1.6rem, 2.5vw, 2.15rem); }
.login-card > p { margin: 0 auto 1.4rem; max-width: 25rem; }
.icon-circle, .section-icon { display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #e9f5f6, #3f8993); color: var(--teal); }
.icon-circle { width: 92px; height: 92px; margin: 0 auto; }
.icon-circle svg { width: 56px; }
svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sso-button { display: flex; justify-content: center; align-items: center; gap: .75rem; min-height: 64px; width: 100%; padding: .9rem 1.2rem; color: #fff; background: linear-gradient(90deg, var(--navy-dark), #063b78); border-radius: 7px; box-shadow: 0 5px 12px rgba(5,44,93,.2); font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 750; text-decoration: none; }
.sso-button:hover { background: #063b78; }
.sso-button svg { width: 26px; flex: 0 0 auto; }
.security-note { display: grid; grid-template-columns: 38px 1fr; gap: .85rem; align-items: center; margin-top: 1.35rem; padding-top: 1.25rem; border-top: 1px solid var(--line); text-align: left; }
.security-note svg { width: 38px; color: var(--teal); }
.security-note p { margin: 0; font-size: .95rem; }

.support-area { padding: 1.8rem 0; }
.card-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 1.5rem; }
.info-card { display: grid; grid-template-columns: 92px 1fr; gap: 1.5rem; min-height: 255px; padding: clamp(2rem, 3vw, 2.65rem); border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(110deg, #f6fbfc, #fff); }
.info-card h2 { margin: 0 0 1rem; color: var(--teal); font-size: 1.55rem; }
.info-card p { margin: 0 0 .75rem; }
.section-icon { width: 76px; height: 76px; }
.section-icon svg { width: 46px; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { position: relative; margin: .6rem 0; padding-left: 2rem; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: .05rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; color: var(--teal); background: var(--teal-light); border: 1px solid #9bcbd0; border-radius: 50%; font-size: .78rem; font-weight: 900; }
.email-link { overflow-wrap: anywhere; font-weight: 700; }

.site-footer { padding: 2.2rem 0; color: #fff; background: linear-gradient(100deg, #032b5b, #00234c); }
.footer-grid { display: grid; grid-template-columns: .75fr 1.15fr 1fr; gap: 2rem; align-items: center; }
.footer-brand { display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.35); font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.footer-brand strong { color: #44c7cd; }
.site-footer p { margin: .35rem 0 0; }
.footer-meta { text-align: right; }
.footer-meta a { color: #fff; margin-inline: .5rem; }

@media (max-width: 960px) {
  .shell { width: min(100% - 2.5rem, var(--shell)); }
  .hero-grid, .card-grid, .footer-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: 2rem; padding-block: 3rem; }
  .login-card { max-width: 640px; }
  .footer-brand { padding-bottom: 1rem; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.35); }
  .footer-meta { text-align: left; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .shell { width: min(100% - 1.5rem, var(--shell)); }
  .site-header { min-height: 92px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .login-card { padding: 1.5rem; }
  .info-card { grid-template-columns: 1fr; min-height: 0; padding: 1.5rem; }
  .section-icon { width: 64px; height: 64px; }
  .sso-button { min-height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behaviour: auto !important; transition: none !important; }
}
#sso-login span,svg { color: #fff; }