:root {
  --blue: #0057b8;
  --orange: #ff7900;
  --ink: #163353;
  --muted: #45617e;
  --line: #dbe6f1;
  --light: #f1f7fd;
  --paper: #f8fbff;
  --shadow: 0 10px 28px #0057b80b;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}
body { background: var(--paper); }
main:focus { outline: none; }
header, footer { background: #fff; }
header { min-height: 76px; border-bottom-color: var(--line); }
header nav { gap: .25rem; }
header nav a { color: var(--blue); border-radius: .65rem; padding: .48rem .72rem; }
header nav a:hover, header nav a[aria-current="page"] { background: var(--light); text-decoration: none; }
header nav a[aria-current="page"] { box-shadow: inset 0 -2px var(--orange); }
.brand { color: var(--blue); font-size: 1.02rem; gap: .62rem; }
.brand:hover { text-decoration: none; }
.brand small { display: block; font-size: .62rem; line-height: 1.2; letter-spacing: .2em; color: var(--blue); }
.brand-art { display: block; position: relative; width: 128px; aspect-ratio: 331 / 201; overflow: hidden; border-radius: .35rem; }
.brand-art img { position: absolute; top: -16.9%; left: -18.7%; width: 136.9%; max-width: none; height: auto; }
footer .brand-art { width: 108px; }
.button { border-radius: .75rem; padding: .76rem 1rem; }
.button.accent, .dashboard .toolbar .button, form .actions .button:not(.outline) { background: var(--orange); color: #162c45; }
.button.outline, .button.home-secondary { background: #fff; color: var(--blue); border-color: #c8d9ec; }
.button.compact { padding: .45rem .65rem; }
.button:focus-visible, :focus-visible { outline-color: var(--blue); }
h1, h2 { color: var(--blue); }
h1 { letter-spacing: -.055em; }
.eyebrow { font-size: .72rem; }
.wrap { padding-inline: clamp(1.1rem, 4vw, 2.2rem); }

.home-hero, .catalog-hero {
  color: var(--ink);
  background: radial-gradient(ellipse at 88% 15%, #e0eeff 0%, transparent 58%), linear-gradient(115deg, #fff 10%, #f3f8fe 100%);
  border-bottom: 1px solid var(--line);
}
.home-hero .wrap { min-height: 0; gap: clamp(1.5rem, 5vw, 4.5rem); }
.home-hero .eyebrow, .catalog-hero .eyebrow { color: var(--blue); }
.home-hero p, .catalog-hero p:not(.eyebrow) { color: var(--muted); }
.home-hero h1 { max-width: 14ch; }
.home-console { border-color: #d6e5f6; border-radius: 1.2rem; box-shadow: 0 20px 50px #0057b817; }
.console-title { color: var(--blue); background: #f7fbff; }
.console-body .eyebrow { letter-spacing: .09em; }
.console-view { min-height: 175px; }
.home-strip { background: #fff; }
.home-section-head .eyebrow { margin-bottom: .65rem; }
.home-steps li, .card, .metric, .home-integration-card, .home-compat, .catalog-card, .table-wrap { border-radius: .95rem; box-shadow: var(--shadow); }
.home-steps li { background: #fff; border-top-color: var(--line); }
.home-steps span, .home-integration-card > span { background: #fff0e3; color: #783900; }
.home-integration { background: #edf5ff; color: var(--ink); border-block: 1px solid var(--line); }
.home-integration .eyebrow, .home-cta .eyebrow { color: var(--blue); }
.home-integration-card, .home-compat { background: #fff; border: 1px solid var(--line); }
.home-integration-card > span { display: grid; place-items: center; flex: 0 0 2.5rem; height: 2.5rem; border-radius: .7rem; }
.home-integration-card h3 { color: var(--blue); }
.home-integration-card p, .home-integration .home-section-head > p { color: var(--muted); }
.home-faq { background: #f3f8fe; border-block: 1px solid var(--line); }
.home-cta { background: linear-gradient(120deg, #fff, #e9f4ff); border: 1px solid var(--line); color: var(--ink); }
.home-faq details { border-radius: .75rem; }
.catalog-hero .wrap { padding-block: clamp(2.6rem, 5.5vw, 4.4rem); }
.catalog-hero .badge { background: #fff; border: 1px solid var(--line); }
.catalog-filters { padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: .95rem; box-shadow: var(--shadow); }
.catalog-grid { gap: 1.25rem; }
.catalog-card { transition: box-shadow .2s, border-color .2s; }
.catalog-card:hover, .catalog-card:focus-within { border-color: #a6c9ed; box-shadow: 0 14px 36px #0057b818; }
.catalog-card .catalog-image { border-bottom: 1px solid var(--line); }
.catalog-copy { padding: 1.12rem 1.25rem 1.35rem; }
.catalog-copy h2 a { color: var(--blue); }
.catalog-copy .eyebrow { color: #754109; }
.notice { border-radius: .55rem; background: #fff8ef; border-left-color: var(--orange); }
label { color: var(--ink); }
input, select, textarea { border-color: #a8bed6; border-radius: .65rem; }
.sidebar { background: #f1f7fe; }
.sidebar a[aria-current="page"] { box-shadow: inset 3px 0 var(--orange); }
.dashboard { background: var(--paper); }
.dashboard .metrics { margin-top: .75rem; }
.dashboard .toolbar:empty { display: none; }
.table-wrap th { color: var(--blue); }
dialog { border-radius: 1rem; box-shadow: 0 20px 70px #153e663b; }
.login-profiles .card { display: flex; flex-direction: column; align-items: start; gap: .35rem; }
.login-profiles .card .button { margin-top: auto; }
.login-profiles .icon { margin-bottom: .4rem; }
.login-profiles h3 { color: var(--blue); }
.login-profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }

@media (max-width: 850px) {
  header { row-gap: .55rem; }
  header nav { gap: .15rem; }
  header nav a { padding: .42rem .55rem; }
}
@media (max-width: 480px) {
  .brand-art { width: 102px; }
  header .button { padding: .55rem .65rem; }
  .home-hero h1 { font-size: clamp(2.5rem, 11vw, 3.5rem); }
  .console-view { min-height: 135px; }
  .catalog-filters, .catalog-copy { padding: .9rem; }
  .login-profiles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-card { transition: none; }
}
@media print {
  header, footer, .sidebar, .report-actions { display: none; }
  body, .dashboard { background: #fff; }
  .panel { display: block; min-height: 0; }
  .dashboard { padding: 0; }
  .metric { break-inside: avoid; box-shadow: none; }
}