.skip-link {
    position: fixed;
    z-index: 10000;
    top: 10px;
    left: 10px;
    padding: 11px 16px;
    border-radius: 10px;
    color: #fff;
    background: #173d33;
    box-shadow: 0 8px 24px rgba(16, 35, 30, .2);
    font-weight: 700;
    transform: translateY(calc(-100% - 16px));
    transition: transform .18s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid #73951f !important;
    outline-offset: 3px;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    max-width: 100%;
    font: inherit;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus-visible {
    border-color: #73951f;
    box-shadow: 0 0 0 3px rgba(115, 149, 31, .16);
}

:where(input[type="checkbox"], input[type="radio"]) {
    accent-color: #31583d;
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
    font: inherit;
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"]):disabled {
    cursor: not-allowed;
    opacity: .62;
    transform: none;
}

:where([aria-invalid="true"], .is-invalid) {
    border-color: #bd5b4e !important;
}

:where([role="alert"], .form-error, .error-message) {
    overflow-wrap: anywhere;
}

.payment-proof-field {
    display: grid;
    gap: 7px;
    padding: 14px;
    border: 1px solid #e2e9e2;
    border-radius: 13px;
    background: #f8faf6;
}

.payment-proof-field label {
    color: #34483b;
    font-size: 13px;
    font-weight: 700;
}

.payment-proof-field input[type="file"] {
    width: 100%;
    min-height: 44px;
    padding: 7px;
    border: 1px solid #d9e1db;
    border-radius: 9px;
    background: #fff;
}

.payment-proof-field small {
    color: #65726c;
    font-size: 11px;
    line-height: 1.5;
}

form:not(.inline-form):not(.main-nav form) label:not(.inline-checkbox):not(.consent-check):not(.identity-consent):not(.wallet-consent) {
    color: #344b5d;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

form:not(.inline-form):not(.main-nav form) label:has(> input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), > select, > textarea) {
    display: grid;
    gap: 6px;
}

form:not(.inline-form):not(.main-nav form) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
form:not(.inline-form):not(.main-nav form) select,
form:not(.inline-form):not(.main-nav form) textarea {
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid #c5d9f4;
    border-radius: 9px;
    background: #bfd5f5;
    color: #243b53;
    box-shadow: none;
    font: 400 13px/1.45 'DM Sans', sans-serif;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

form:not(.inline-form):not(.main-nav form) textarea {
    min-height: 105px;
    resize: vertical;
}

form:not(.inline-form):not(.main-nav form) input[type="file"] {
    height: auto;
    padding: 8px;
}

form:not(.inline-form):not(.main-nav form) input::placeholder,
form:not(.inline-form):not(.main-nav form) textarea::placeholder {
    color: #7189a4;
    opacity: 1;
}

form:not(.inline-form):not(.main-nav form) :is(input, select, textarea):focus {
    border-color: #6d9edb !important;
    background: #d5e5fb;
    box-shadow: 0 0 0 3px rgba(109, 158, 219, .2) !important;
}

form:not(.inline-form):not(.main-nav form) :is(input, select, textarea):disabled {
    background: #e8eef5;
}

:root {
    --color-violet: #6546c7;
    --color-violet-soft: #f0ebff;
    --color-blue: #2878c7;
    --color-blue-soft: #eaf4ff;
    --color-teal: #138b83;
    --color-teal-soft: #e4f7f3;
    --color-coral: #d85e54;
    --color-coral-soft: #fff0ed;
    --color-amber: #b7791f;
    --color-amber-soft: #fff6df;
}

::selection {
    color: #fff;
    background: #6546c7;
}

body {
    background:
        radial-gradient(ellipse at 4% 2%, rgba(190, 213, 255, .28), transparent 29rem),
        radial-gradient(ellipse at 95% 18%, rgba(243, 210, 255, .2), transparent 32rem),
        #f7f8fc;
}

.site-header {
    background: rgba(250, 251, 255, .94);
    border-bottom-color: #e4e7f1;
}

.brand__mark {
    background: linear-gradient(145deg, #6044c5, #248b9b);
    color: #fff;
}

.main-nav a:not(.nav-cta):hover {
    color: var(--color-violet);
}

.nav-cta,
.button--primary {
    border-color: transparent;
    background: linear-gradient(115deg, #5740b8, #2878c7 62%, #168b91);
    color: #fff;
    box-shadow: 0 8px 19px rgba(83, 75, 177, .2);
}

.nav-cta:hover,
.button--primary:hover {
    background: linear-gradient(115deg, #4832a5, #2168ae 62%, #117b81);
    box-shadow: 0 12px 25px rgba(83, 75, 177, .27);
}

.button--quiet {
    color: #5542ad;
}

.button--quiet:hover {
    background: #eeeaff;
}

h1 em,
h2 em {
    color: #694bc5;
}

.eyebrow {
    color: #6371a1;
}

.hero {
    background:
        radial-gradient(ellipse at 78% 28%, rgba(255, 255, 255, .85), transparent 23rem),
        linear-gradient(128deg, #e8f4ff 0%, #f0eaff 53%, #fff0eb 100%);
}

.hero__glow--one {
    background: #c6dfff;
}

.hero__glow--two {
    background: #f5cfdf;
}

.hero-card__mark {
    background: linear-gradient(145deg, #d4f46e, #79ded1);
    color: #174c52;
}

.hero-sticker,
.hero-sticker strong {
    color: #6546c7;
}

.hero__scroll,
.scroll-line {
    color: #5c6f9b;
}

.scroll-line {
    background: linear-gradient(90deg, #6546c7, #36a7a3);
}

.section.services,
.section.how-it-works,
.section.faq,
.section.contact {
    background: linear-gradient(180deg, #f5f4ff 0%, #f4f8ff 100%);
}

.section.about,
.about.section {
    background: linear-gradient(125deg, #fff2ef 0%, #f5edff 52%, #e9f8f5 100%);
}

.about__circle {
    background: linear-gradient(145deg, #ffc8b9, #e3aaff 54%, #8fe2d0);
    border-color: #e5d6ff;
}

.about__circle span {
    color: #6042b5;
}

.about__badge {
    background: linear-gradient(135deg, #533cae, #157f89);
}

.about__line {
    border-left-color: #927cda;
}

.check-list span,
.journey-step__icon {
    background: #e9e3ff;
    color: #6045bd;
}

.service-card {
    border: 1px solid #e3e5f3;
    background: linear-gradient(145deg, #fff, #f4f0ff);
}

.service-card:nth-child(3n + 2) {
    background: linear-gradient(145deg, #fff, #eaf7ff);
}

.service-card:nth-child(3n) {
    background: linear-gradient(145deg, #fff, #fff0e9);
}

.service-card--featured,
.service-card--featured:nth-child(n) {
    background: linear-gradient(145deg, #5039a7, #315ba8 58%, #167b82);
    color: #fff;
}

.service-card--dark,
.service-card--dark:nth-child(n) {
    background: linear-gradient(135deg, #ffe5bc, #ffd5d1 52%, #f4ddff);
    color: #422d74;
}

.service-card__icon,
.service-card__link b {
    color: #694bc5;
}

.service-card--featured .service-card__icon,
.service-card--featured .service-card__link,
.service-card--featured .service-card__link b {
    color: #d2f58a;
}

.service-card--featured p {
    color: #e2eafa;
}

.journey-step {
    border-color: #e3e4f3;
    background: linear-gradient(155deg, #fff, #f7f3ff);
}

.journey-step:nth-child(4n + 2) {
    background: linear-gradient(155deg, #fff, #edf7ff);
}

.journey-step:nth-child(4n + 3) {
    background: linear-gradient(155deg, #fff, #fff4e7);
}

.journey-step:nth-child(4n) {
    background: linear-gradient(155deg, #fff, #eaf8f3);
}

.journey-step__number {
    color: #7966c4;
}

.dashboard-page,
.slip-page {
    background:
        radial-gradient(ellipse at 5% 0%, rgba(192, 214, 255, .35), transparent 30rem),
        linear-gradient(160deg, #f7f6ff 0%, #f0f7ff 48%, #f8f4ff 100%);
}

.dashboard-card,
.request-card,
.table-card,
.auth-panel--form {
    border-color: #e2e4f1;
    background: linear-gradient(145deg, #fff 0%, #fbfaff 70%, #f2f8ff 100%);
    box-shadow: 0 12px 32px rgba(63, 66, 132, .075);
}

.dashboard-card:hover,
.request-card:hover,
.table-card:hover {
    box-shadow: 0 17px 38px rgba(63, 66, 132, .13);
}

.admin-stats > div {
    border: 1px solid #e4e5f1;
    background: linear-gradient(145deg, #fff, #f0edff);
    box-shadow: 0 10px 26px rgba(74, 63, 145, .075);
}

.admin-stats > div:nth-child(4n + 2) {
    background: linear-gradient(145deg, #fff, #e8f4ff);
}

.admin-stats > div:nth-child(4n + 3) {
    background: linear-gradient(145deg, #fff, #e8f8f2);
}

.admin-stats > div:nth-child(4n) {
    background: linear-gradient(145deg, #fff, #fff1e6);
}

.admin-stats strong {
    color: #503ca9;
}

.admin-stats > div:nth-child(4n + 2) strong {
    color: #2475b9;
}

.admin-stats > div:nth-child(4n + 3) strong {
    color: #168276;
}

.admin-stats > div:nth-child(4n) strong {
    color: #bd6935;
}

.service-order-priority {
    border-color: #d8d5f3;
    background: linear-gradient(135deg, #fff, #f2efff 58%, #eef8ff);
}

.service-order-priority__heading h2 {
    color: #4f3ba5;
}

.service-option,
.catalog-card,
.customer-order-card,
.receipt-card {
    border-color: #e0e2f0;
    background: linear-gradient(145deg, #fff, #f4f1ff);
}

.service-option:nth-child(3n + 2),
.catalog-card:nth-child(3n + 2) {
    background: linear-gradient(145deg, #fff, #edf7ff);
}

.service-option:nth-child(3n),
.catalog-card:nth-child(3n) {
    background: linear-gradient(145deg, #fff, #fff2e9);
}

.service-option--active {
    border-color: #8064d5;
    background: linear-gradient(145deg, #efeaff, #e4eaff);
}

.service-option--active strong,
.catalog-card__bottom > strong {
    color: #563db5;
}

.service-filters a.is-active,
.service-filters a:hover {
    border-color: #5f46bd;
    background: linear-gradient(115deg, #5b43ba, #287dbb);
}

.service-state--available {
    color: #087d72;
}

.service-state--low_stock {
    color: #a86a0a;
}

.service-state--out_of_stock,
.service-state--inactive {
    color: #c04452;
}

.form-success {
    border: 1px solid #a8e1cd;
    background: linear-gradient(110deg, #e3f8ef, #edf9ff);
    color: #126b5e;
}

.form-success strong {
    color: #126b5e;
}

.form-error {
    border: 1px solid #f4bdb8;
    background: linear-gradient(110deg, #fff0ed, #fff5e8);
    color: #a83c43;
}

.status-pill--successful,
.status-pill--completed,
.status-pill--paid,
.service-state--available {
    background: #dcf6e9;
    color: #087653;
}

.status-pill--pending,
.status-pill--processing,
.service-state--low_stock {
    background: #fff0c9;
    color: #915d08;
}

.status-pill--failed,
.status-pill--cancelled,
.service-state--out_of_stock,
.service-state--inactive {
    background: #ffe4e2;
    color: #a73443;
}

.client-dashboard {
    background:
        radial-gradient(ellipse at 2% 0%, rgba(207, 195, 255, .28), transparent 28rem),
        linear-gradient(155deg, #f8f6ff 0%, #eef7ff 54%, #f4fbf6 100%);
}

.client-avatar {
    background: linear-gradient(140deg, #6247c5, #168b91);
}

.client-balance {
    background:
        radial-gradient(circle at 90% 12%, rgba(255, 185, 199, .24), transparent 29%),
        linear-gradient(125deg, #49359c, #285d9f 57%, #087d7d);
    box-shadow: 0 22px 48px rgba(66, 62, 151, .22);
}

.client-section-head a,
.client-profile {
    color: #5942b4;
}

.client-profile {
    border-color: #dcd6f4;
    background: linear-gradient(145deg, #fff, #f0edff);
}

.client-promo {
    background: linear-gradient(120deg, #5539a9 0%, #2875a2 58%, #078978 100%);
}

.portal-sidebar {
    background: linear-gradient(180deg, #392b80, #27538f 58%, #087a79);
}

.portal-bar {
    background: linear-gradient(100deg, #392b80, #27538f 66%, #087a79);
}

.portal-nav-link--active,
.portal-nav-link:hover,
.portal-logout:hover {
    background: rgba(255, 255, 255, .16);
}

.portal-card--dark {
    background: linear-gradient(135deg, #4f3ba1, #26738e);
}

.portal-card--wallet {
    background: linear-gradient(135deg, #fff0c7, #ffd9cb 52%, #f4defe);
}

.table-wrap th {
    background: #f0edff;
    color: #5b4ca2;
}

.table-wrap th,
.table-wrap td {
    border-bottom-color: #e7e5f1;
}

.site-footer {
    background: linear-gradient(115deg, #eeebff, #eaf5ff 55%, #e9f8f2);
    border-top: 1px solid #dedcf0;
}

@media (prefers-reduced-motion: no-preference) {
    .service-card,
    .catalog-card,
    .journey-step,
    .admin-stats > div,
    .client-actions a {
        transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .catalog-card:hover,
    .admin-stats > div:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 32px rgba(74, 63, 145, .13);
    }
}

main[id],
[tabindex="-1"] {
    scroll-margin-top: 24px;
}

@media (max-width: 760px) {
    .main-nav a,
    .main-nav button {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

@media print {
    .main-nav {
        max-width: none;
    }

    .main-nav .nav-cta {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .skip-link {
        transition: none;
    }
}