/* Gracia Service Pages 1.0.7 – branded 404. Gracia Pro tokens with fallbacks. */
.g404 { --i: var(--gd-ink, #0a1630); --b: var(--gd-blue, #004aad); --head: var(--gd-font-head, "Plus Jakarta Sans", system-ui, sans-serif); --body: var(--gd-font-body, Inter, system-ui, sans-serif); font-family: var(--body); color: var(--i); }
.g404 *, .g404 *::before, .g404 *::after { box-sizing: border-box; }
.g404 p, .g404 h1, .g404 h2, .g404 ul { margin: 0; }
.g404 ul { list-style: none; padding: 0; }
.g404-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.g404-wrap { max-width: var(--gd-container, 1200px); margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .g404-wrap { padding: 0 24px; } }
.g404-hero {
	position: relative; overflow: hidden; isolation: isolate; padding: 56px 0 64px; color: #cfd8e8;
	background: radial-gradient(900px 500px at 85% -10%, rgba(31, 99, 198, .55), transparent 60%), radial-gradient(700px 420px at -10% 110%, rgba(72, 175, 84, .22), transparent 60%), radial-gradient(500px 300px at 60% 120%, rgba(230, 43, 74, .16), transparent 60%), var(--i);
}
@media (min-width: 900px) { .g404-hero { padding: 96px 0 104px; } }
.g404-hero__grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .g404-hero__grid { grid-template-columns: 1.25fr 1fr; gap: 56px; } }
.g404-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font: 700 .8rem/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #cfe0ff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.g404-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gd-red, #e62b4a); box-shadow: 0 0 0 4px rgba(230, 43, 74, .22); }
.gd-theme .g404-title, .g404-title { margin: 18px 0 0; color: #fff; font: 800 var(--gd-fs-h1, clamp(2.1rem, 1.45rem + 2.7vw, 3.5rem))/1.08 var(--head); letter-spacing: -.03em; text-wrap: balance; }
.g404-lead { margin-top: 16px !important; max-width: 600px; font-size: var(--gd-fs-lg, 1.1875rem); line-height: 1.6; }
.g404-search { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 28px; max-width: 560px; padding: 6px 6px 6px 46px; border-radius: 999px; background: #fff; box-shadow: 0 20px 44px -24px rgba(0, 0, 0, .6); }
.g404-search:focus-within { outline: 3px solid var(--gd-yellow, #fec105); outline-offset: 3px; }
.g404-search__ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #59627a; }
.gd-theme .g404-search__input, .g404-search__input { flex: 1 1 auto; min-width: 0; height: 46px; margin: 0; padding: 0 6px; border: 0 !important; outline: none; background: transparent; box-shadow: none !important; font: 500 1rem/1 var(--body); color: var(--i); }
.g404-search__input::placeholder { color: #6b7487; }
.g404-search__input::-webkit-search-cancel-button { cursor: pointer; }
.gd-theme .g404-search__btn, .g404-search__btn, .g404-search__btn:hover, .g404-search__btn:focus { flex: 0 0 auto; height: 46px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer; font: 650 1rem/1 var(--body); color: var(--i); background: var(--gd-yellow, #fec105); white-space: nowrap; }
.g404-search__btn:hover { background: #ffd23f; }
@media (max-width: 400px) { .g404-search__btn, .gd-theme .g404-search__btn { padding: 0 16px; } }
.g404-art { display: flex; justify-content: center; }
.g404-art__num { display: inline-flex; align-items: center; gap: .04em; font: 800 clamp(6rem, 4rem + 9vw, 11rem)/1 var(--head); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .55); }
.g404-art__o { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 6px; width: .78em; height: .78em; margin: 0 .04em; padding: .07em; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); transform: rotate(45deg); }
.g404-art__o i { border-radius: 50%; animation: g404-pulse 2.8s ease-in-out infinite; }
.g404-art__o i:nth-child(1) { background: var(--gd-blue-500, #1f63c6); }
.g404-art__o i:nth-child(2) { background: var(--gd-green, #48af54); animation-delay: .35s; }
.g404-art__o i:nth-child(3) { background: var(--gd-yellow, #fec105); animation-delay: 1.05s; }
.g404-art__o i:nth-child(4) { background: var(--gd-red, #e62b4a); animation-delay: .7s; }
@keyframes g404-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.78); opacity: .7; } }
@media (max-width: 899px) { .g404-art { order: -1; justify-content: flex-start; } .g404-art__num { font-size: clamp(4.5rem, 3rem + 10vw, 6rem); } }
.g404-links { padding: 56px 0 72px; background: var(--gd-surface, #f5f8fd); }
@media (min-width: 900px) { .g404-links { padding: 72px 0 96px; } }
.gd-theme .g404-links__title, .g404-links__title { margin: 0 0 24px; font: 700 var(--gd-fs-h3, 1.5rem)/1.2 var(--head); letter-spacing: -.02em; color: var(--i); }
.g404-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .g404-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1024px) { .g404-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.g404-grid > li { display: flex; }
.g404-c-blue { --c: var(--gd-blue, #004aad); } .g404-c-green { --c: var(--gd-green, #48af54); } .g404-c-yellow { --c: var(--gd-yellow, #fec105); } .g404-c-red { --c: var(--gd-red, #e62b4a); }
.g404-card { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 22px 22px 52px; overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--gd-border, #e2e8f2); text-decoration: none !important; color: var(--i) !important; box-shadow: 0 12px 32px -24px rgba(10, 22, 48, .25); transition: transform .3s var(--gd-ease, ease), box-shadow .3s, border-color .3s; }
.g404-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); }
.g404-card:hover, .g404-card:focus-visible { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, #e2e8f2); box-shadow: 0 24px 48px -28px rgba(10, 22, 48, .4); }
.g404-card:focus-visible { outline: 3px solid var(--b); outline-offset: 3px; }
.g404-card__t { font: 700 1.1rem/1.3 var(--head); }
.g404-card__d { font-size: .9rem; line-height: 1.5; color: #4b5567; }
.g404-card__a { position: absolute; left: 22px; bottom: 18px; color: var(--b); transition: transform .3s; }
.g404-card:hover .g404-card__a { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .g404-art__o i { animation: none; } .g404-card, .g404-card__a { transition: none; } .g404-card:hover { transform: none; } }