:root {
    --brand-indigo: #303c91;
    --brand-blue: #2d68b2;
    --brand-cyan: #08a8d1;
    --brand-navy: #17274a;
    --brand-pale: #f4f8fc;
    --brand-line: #d6e1ed;
    --brand-white: #ffffff;
    --ink: var(--brand-navy);
    --muted: #5a6b84;
    --line: var(--brand-line);
    --paper: var(--brand-white);
    --panel: rgba(255, 255, 255, 0.96);
    --soft: #edf5fb;
    --teal: var(--brand-blue);
    --teal-deep: var(--brand-indigo);
    --gold: var(--brand-cyan);
    --sand: var(--brand-pale);
}

html { background: #eef4fa; }
body {
    display: flex;
    flex-direction: column;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background:
        radial-gradient(circle at 88% 0%, rgba(8, 168, 209, 0.10), transparent 28rem),
        linear-gradient(180deg, #f8fbfe 0%, #eef4fa 100%);
    color: var(--brand-navy);
}
body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: 4px;
    z-index: 20;
    background: linear-gradient(90deg, var(--brand-indigo), var(--brand-blue) 58%, var(--brand-cyan));
}

header { padding-top: 22px; }
header, main, .site-footer { width: 100%; }
main { flex: 1; }

nav {
    background: #fff;
    border-color: var(--brand-line);
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(23, 39, 74, 0.07);
    backdrop-filter: none;
}
.brand { min-width: 0; text-decoration: none; }
.brand-mark {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    padding: 3px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #dce7f1;
    box-shadow: 0 5px 14px rgba(48, 60, 145, 0.11);
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-copy { min-width: 0; }
.brand-copy strong {
    color: var(--brand-indigo);
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -0.015em;
}
.brand-copy span { color: var(--muted); font-size: 12px; }

.nav-links a, .button-link, button, .mini-button, .table-filter-button {
    min-height: 42px;
    border-radius: 11px;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.nav-links a, .button-link, .mini-button {
    border-color: var(--brand-line);
    color: var(--brand-navy);
    background: #fff;
}
.nav-links a:hover, .button-link:hover, .mini-button:hover {
    color: var(--brand-indigo);
    border-color: #aebfe0;
    background: #f4f8fe;
}
.button-link.is-primary, button, .table-filter-button.is-active {
    color: #fff;
    border-color: var(--brand-blue);
    background: linear-gradient(110deg, var(--brand-indigo), var(--brand-blue) 65%, #168fc3);
    box-shadow: 0 7px 18px rgba(45, 104, 178, 0.18);
}
.button-link.is-primary:hover, button:hover {
    border-color: var(--brand-indigo);
    box-shadow: 0 9px 22px rgba(45, 104, 178, 0.25);
    transform: translateY(-1px);
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(8, 168, 209, 0.34);
    outline-offset: 2px;
}

.hero, .card {
    border-color: var(--brand-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 14px 38px rgba(23, 39, 74, 0.07);
}
.hero { position: relative; overflow: hidden; }
.hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-indigo), var(--brand-cyan));
}
.hero h1, .card h2 { color: var(--brand-navy); letter-spacing: -0.025em; }
.hero h1 { font-size: clamp(1.85rem, 3vw, 2.65rem); line-height: 1.08; }
.eyebrow { color: var(--brand-blue); font-weight: 750; }
.stat, .workflow-step { border-radius: 14px; border-color: var(--brand-line); }
.stat { background: linear-gradient(150deg, #fff, #f5f9fd); }
.value { color: var(--brand-indigo); }

.form-shell input, .form-shell select, .form-shell textarea,
input, select, textarea {
    border-color: #c9d7e6;
    color: var(--brand-navy);
}
.form-shell input:focus, .form-shell select:focus, .form-shell textarea:focus,
input:focus, select:focus, textarea:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(8, 168, 209, 0.12);
}
th { color: #4b5e7b; background: #f5f8fc; }
tbody tr:hover { background: rgba(8, 168, 209, 0.035); }
.pill { color: var(--brand-indigo); background: #eaf3fc; }
.workflow-step.done { background: #edf8f6; border-color: #acd7ca; }
.workflow-step.done .step-no { background: #17785d; border-color: #17785d; }
.workflow-step.current { background: #eaf4fc; border-color: #8db8dc; }
.workflow-step.current .step-no { background: var(--brand-blue); border-color: var(--brand-blue); }
.codebox { border-color: var(--brand-line); background: #f8fbfe; }

.site-footer {
    max-width: 1180px;
    margin: 10px auto 0;
    padding: 0 24px 24px;
}
.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 2px 0;
    border-top: 1px solid var(--brand-line);
    color: var(--muted);
    font-size: 12px;
}
.site-footer strong { color: var(--brand-indigo); font-weight: 700; }
.site-footer a { color: var(--brand-blue); text-decoration: none; font-weight: 650; }

.landing-grid { align-items: stretch; grid-template-columns: minmax(0, 1.45fr) minmax(290px, .75fr); }
.landing-hero { min-height: 480px; padding: clamp(30px, 5vw, 58px); justify-content: center; }
.landing-logo { width: min(310px, 72%); height: auto; margin-bottom: 18px; }
.login-hero .landing-logo { width: min(190px, 48%); margin: 0 auto 10px; }
.landing-hero h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.02; }
.landing-hero p { max-width: 680px; font-size: 17px; line-height: 1.65; }
.landing-aside { background: linear-gradient(150deg, var(--brand-indigo), #275ca8 68%, #168fbf); color: #fff; }
.landing-aside h2, .landing-aside .eyebrow { color: #fff; }
.landing-aside .eyebrow { opacity: .72; }
.landing-aside .muted { color: #e8f1fb; }
.product-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.product-list span {
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.23);
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    font-size: 12px;
    font-weight: 650;
}
.brand-note { display: flex; gap: 10px; align-items: flex-start; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.22); }
.brand-note::before { content: ""; width: 28px; height: 3px; margin-top: 8px; flex: 0 0 auto; background: var(--brand-cyan); }

@media (prefers-reduced-motion: no-preference) {
    main > * { animation: europ-reveal 360ms ease both; }
    @keyframes europ-reveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 800px) {
    .landing-grid { grid-template-columns: 1fr; }
    .landing-hero { min-height: auto; }
    .site-footer { padding: 0 16px 20px; }
}
@media (max-width: 520px) {
    header, main { padding-left: 12px; padding-right: 12px; }
    nav { align-items: stretch; padding: 13px; }
    .brand { width: 100%; gap: 10px; }
    .brand-mark { width: 44px; height: 44px; }
    .brand-copy strong { font-size: 14px; line-height: 1.25; }
    .nav-links { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nav-links a, .nav-links button { display: grid; place-items: center; width: 100%; padding: 9px 10px; text-align: center; font-size: 12px; }
    .nav-inline-form { width: 100%; }
    .hero, .card { padding: 21px; }
    .hero h1 { font-size: 2rem; }
    .site-footer__inner { align-items: flex-start; flex-direction: column; gap: 7px; line-height: 1.55; }
    .site-footer__inner span { display: block; width: 100%; }
    .site-footer strong, .site-footer a { display: inline-block; }
    .login-hero { text-align: center; }
    .login-hero .landing-logo { width: min(150px, 46%); }
}

@media print {
    body { display: block; background: #fff; }
    body::before, header, .site-footer { display: none !important; }
    main { max-width: none; padding: 0; }
    .hero, .card { box-shadow: none; break-inside: avoid; }
}