:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  background: #061326;
  color: #f4f8ff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #061326; }
body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(16, 95, 143, .28), transparent 58%),
    #061326;
}
a { color: inherit; }
.topbar { border-bottom: 1px solid rgba(72, 141, 181, .2); background: rgba(6, 19, 38, .94); }
.topbar-inner, .page-shell, .footer-inner { width: min(100% - 48px, 1120px); margin: 0 auto; }
.topbar-inner { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; width: 205px; height: 44px; object-fit: contain; }
.topbar-label { color: #a9bfd3; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.page-shell { padding: 62px 0 48px; }
.welcome { max-width: 780px; margin: 0 auto 40px; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 17px; color: #8bb6cb; font-size: 13px; font-weight: 700; letter-spacing: .16em; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #31c9e1; box-shadow: 0 0 14px rgba(49, 201, 225, .6); }
h1 { margin: 0; font-size: clamp(38px, 5vw, 58px); line-height: 1.08; letter-spacing: -.035em; }
.welcome-copy { margin: 15px 0 0; color: #afc1d2; font-size: clamp(18px, 2vw, 22px); line-height: 1.5; }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 980px; margin: 0 auto; }
.service-card {
  display: flex;
  align-items: center;
  min-height: 132px;
  gap: 19px;
  padding: 23px 24px;
  border: 1px solid #1c4261;
  border-radius: 16px;
  background: linear-gradient(130deg, rgba(17, 39, 65, .98), rgba(11, 29, 51, .98));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.service-card:hover, .service-card:focus-visible {
  border-color: #37c7e3;
  background: linear-gradient(130deg, #153b5a, #102b49);
  transform: translateY(-2px);
  outline: 2px solid #37c7e3;
  outline-offset: 2px;
}
.service-card-primary { border-color: #187da0; background: linear-gradient(130deg, #124664, #102a47); }
.card-icon { display: grid; flex: 0 0 50px; width: 50px; height: 50px; place-items: center; border: 1px solid rgba(61, 191, 218, .35); border-radius: 14px; background: rgba(20, 134, 163, .13); color: #49d2e5; }
.card-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card-text { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 7px; }
.card-text strong { color: #f3f7ff; font-size: 20px; line-height: 1.25; }
.card-text span { color: #a8bbcf; font-size: 15px; line-height: 1.45; }
.card-arrow { flex: 0 0 auto; color: #56d2e5; font-size: 28px; line-height: 1; }
.help-note { display: flex; align-items: center; gap: 13px; max-width: 980px; margin: 22px auto 0; padding: 15px 18px; border: 1px solid rgba(41, 79, 107, .75); border-radius: 12px; background: rgba(9, 27, 48, .7); }
.help-mark { display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #174561; color: #8de7f0; font-size: 14px; font-weight: 700; }
.help-note p { flex: 1 1 auto; margin: 0; color: #b1c3d3; font-size: 14px; line-height: 1.5; }
.help-note a { flex: 0 0 auto; color: #66dbea; font-size: 14px; font-weight: 700; text-decoration: none; }
.help-note a:hover, .help-note a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.site-footer { border-top: 1px solid rgba(72, 141, 181, .2); background: rgba(4, 14, 28, .72); }
.footer-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px 26px; min-height: 92px; padding: 18px 0; }
.footer-brand img { display: block; width: 132px; height: 29px; object-fit: contain; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 21px; }
.footer-links a, .admin-link { color: #9db4c8; font-size: 13px; text-decoration: none; }
.footer-links a:hover, .admin-link:hover, .footer-links a:focus-visible, .admin-link:focus-visible { color: #65d8e8; text-decoration: underline; text-underline-offset: 4px; }
.admin-link { justify-self: end; color: #7991a8; }
.copyright { grid-column: 1 / -1; margin: -8px 0 0; color: #6f879e; font-size: 12px; text-align: center; }

@media (max-width: 680px) {
  .topbar-inner, .page-shell, .footer-inner { width: min(100% - 32px, 520px); }
  .topbar-inner { min-height: 72px; }
  .brand img { width: 158px; height: 35px; }
  .topbar-label { font-size: 11px; letter-spacing: .06em; }
  .page-shell { padding: 42px 0 30px; }
  .welcome { margin-bottom: 28px; }
  .eyebrow { margin-bottom: 13px; font-size: 11px; }
  .service-grid { grid-template-columns: 1fr; gap: 11px; }
  .service-card { min-height: 104px; gap: 15px; padding: 17px; border-radius: 13px; }
  .card-icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 12px; }
  .card-text strong { font-size: 18px; }
  .card-text span { font-size: 14px; }
  .help-note { flex-wrap: wrap; margin-top: 16px; }
  .help-note p { flex-basis: calc(100% - 42px); }
  .help-note a { margin-left: 37px; }
  .footer-inner { grid-template-columns: 1fr; justify-items: center; gap: 14px; padding: 24px 0; }
  .admin-link { justify-self: center; }
  .copyright { grid-column: auto; margin-top: 0; }
}

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