/* Not-found design layer — /not-found, and every URL the router cannot match.
 *
 * The presentation layer for Components/Pages/NotFound.razor. Global CSS,
 * linked from App.razor, so the two rules every sibling page sheet calls out
 * apply here as well:
 *
 * 1. Nothing confines these rules to this page, so every selector is qnf-
 *    prefixed or a descendant of one. No bare element selectors at the top
 *    level — an unlayered `h1` here would repaint every page on the site.
 * 2. @keyframes names are global too, hence the prefix on those: they must not
 *    collide with the compiled Tailwind bundle or with the qh-, qc-, qp-, qlg-
 *    animations the other page sheets declare.
 *
 * These rules are unlayered and Tailwind v4's utilities live inside @layer, so
 * they win regardless of specificity. That is what lets the page be styled
 * entirely from here rather than from utility classes: the bundle wwwroot
 * serves is a Next.js build artefact containing only the utilities that build
 * emitted, so a class this page invented would not exist at runtime.
 *
 * PALETTE. The logo ramp shared with the pricing, help-centre, answers and
 * legal sheets — #a22dea (magenta-violet) → #7b5ee5 → #5b5de2 (indigo-blue),
 * primary #4f46e5 → #7c3aed. Deliberately no red anywhere: a missing page is
 * not a mistake the visitor made, and an alarm colour on a marketing site reads
 * as "something is broken here" rather than "that address moved".
 *
 * READING ORDER the layout is built around, which is the whole argument of the
 * design: a dead end is only worth a screen if it puts the visitor back on a
 * road. So — (1) say plainly what happened and show the address that failed, so
 * a mistyped or stale link is self-diagnosing; (2) two ways out, home and a
 * human; (3) a signpost grid of the destinations people who land here were
 * actually looking for; (4) a last line for the two exits that catch everything
 * else, the sitemap and support. Nothing on the page scolds, and nothing dead-
 * ends.
 *
 * The address panel is a browser-chrome mock rather than a plain code chip
 * because the point being made is spatial — "this address, the one in your bar,
 * is the thing that does not exist". It carries the only copy of the path, so
 * it stays visible at every width rather than being hidden as decoration on
 * mobile.
 */

/* ── page field ─────────────────────────────────────────────────────── */
.qnf-page {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: linear-gradient(180deg, #fff 0%, #fbfaff 44%, #f4f2fe 100%);
    padding: 66px 0 0;
}

/* Ambient background only — no content, all pointer-events:none. */
.qnf-page__aurora,
.qnf-page__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.qnf-page__aurora i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .7;
    animation: qnf-drift 28s ease-in-out infinite;
}

.qnf-page__aurora i:nth-child(1) {
    width: 720px;
    height: 720px;
    top: -400px;
    right: -200px;
    background: radial-gradient(circle, rgba(129, 140, 248, .3), transparent 62%);
}

.qnf-page__aurora i:nth-child(2) {
    width: 560px;
    height: 560px;
    bottom: -320px;
    left: -210px;
    animation-delay: -10s;
    background: radial-gradient(circle, rgba(167, 139, 250, .26), transparent 62%);
}

.qnf-page__aurora i:nth-child(3) {
    width: 430px;
    height: 430px;
    top: 26%;
    left: 44%;
    animation-delay: -17s;
    background: radial-gradient(circle, rgba(162, 45, 234, .14), transparent 62%);
}

@keyframes qnf-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-46px, 34px) scale(1.08); }
    66%      { transform: translate(34px, -28px) scale(.94); }
}

.qnf-page__grid {
    opacity: .5;
    background-image: radial-gradient(circle at 1px 1px, rgba(79, 70, 229, .2) 1.1px, transparent 0);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 66% 54% at 32% 4%, #000, transparent 72%);
    mask-image: radial-gradient(ellipse 66% 54% at 32% 4%, #000, transparent 72%);
}

/* ── hero: copy column + address panel ──────────────────────────────── */
.qnf-hero {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr;
    gap: 46px;
    align-items: center;
    padding-bottom: 64px;
}

@media (min-width: 1024px) {
    .qnf-hero {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
        gap: 64px;
        padding-bottom: 84px;
    }
}

.qnf-hero__copy {
    max-width: 620px;
}

/* ── eyebrow ────────────────────────────────────────────────────────── */
.qnf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    padding: 7px 15px 7px 9px;
    border: 1px solid rgba(79, 70, 229, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 26px -18px rgba(79, 70, 229, .5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #4338ca;
}

.qnf-eyebrow__pip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
}

.qnf-eyebrow__pip svg {
    width: 13px;
    height: 13px;
}

/* ── the numeral ────────────────────────────────────────────────────── */
/* Set as two gradient glyphs around a live ring rather than as the string
   "404": the middle character is the only motion above the fold, and it reads
   as a dial still searching rather than as an error badge. The words are in the
   <h1> below for assistive tech, so the numeral itself is aria-hidden. */
.qnf-num {
    display: flex;
    align-items: center;
    gap: .05em;
    margin-bottom: 14px;
    font-size: clamp(74px, 12.5vw, 138px);
    font-weight: 800;
    line-height: .88;
    letter-spacing: -.045em;
}

.qnf-num b {
    font-weight: 800;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 52%, #a22dea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.qnf-num__zero {
    position: relative;
    display: inline-block;
    width: .78em;
    height: .78em;
    animation: qnf-spin 14s linear infinite;
}

/* The ring itself — a conic sweep of the logo ramp, masked to a donut so the
   stroke thickness stays proportional to the type size at every breakpoint. */
.qnf-num__zero::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 210deg, #a22dea, #7b5ee5 28%, #5b5de2 52%, #7c3aed 76%, #a22dea);
    -webkit-mask: radial-gradient(closest-side, transparent 0 68%, #000 68.5%);
    mask: radial-gradient(closest-side, transparent 0 68%, #000 68.5%);
}

/* The pip rides the ring — it is a child of the spinning box rather than a
   separately animated element, so the two can never drift apart. */
.qnf-num__zero::after {
    content: "";
    position: absolute;
    top: -.025em;
    left: 50%;
    width: .17em;
    height: .17em;
    margin-left: -.085em;
    border-radius: 50%;
    background: #a22dea;
    box-shadow: 0 0 0 .05em rgba(162, 45, 234, .16), 0 6px 18px rgba(124, 58, 237, .5);
}

@keyframes qnf-spin {
    to { transform: rotate(360deg); }
}

/* ── headline and lede ──────────────────────────────────────────────── */
.qnf-title {
    margin: 0 0 16px;
    font-size: clamp(30px, 4.4vw, 46px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.025em;
    color: #0f172a;
}

.qnf-lede {
    margin: 0 0 26px;
    font-size: clamp(16px, 1.5vw, 18.5px);
    line-height: 1.75;
    color: #475569;
}

/* ── the way out ────────────────────────────────────────────────────── */
/* The two CTAs use the bundle's own .startFreeTrial / .bookADemo pairing, the
   same as every other page's primary/secondary row, so this page inherits the
   site's button design instead of inventing a third one. Only the row is ours. */
.qnf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

@media (max-width: 479px) {
    .qnf-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .qnf-actions > a {
        text-align: center;
    }
}

/* ── address panel ──────────────────────────────────────────────────── */
.qnf-window {
    position: relative;
    border: 1px solid rgba(79, 70, 229, .14);
    border-radius: 18px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 34px 70px -34px rgba(79, 70, 229, .42),
        0 12px 28px -20px rgba(15, 23, 42, .18);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .qnf-window {
        transform: rotate(-.7deg);
    }
}

/* Traffic lights. Decorative, and the only place on the page where a warm hue
   appears — it is window chrome, not status. */
.qnf-window__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, .07);
    background: linear-gradient(180deg, #fbfaff, #f5f3fd);
}

.qnf-window__bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e2e8f0;
}

.qnf-window__bar i:nth-child(1) { background: #f0a8a0; }
.qnf-window__bar i:nth-child(2) { background: #f2d09a; }
.qnf-window__bar i:nth-child(3) { background: #b7dcb0; }

.qnf-window__url {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 16px 0;
    padding: 10px 12px;
    border: 1px solid rgba(79, 70, 229, .16);
    border-radius: 11px;
    background: #f8fafc;
}

.qnf-window__url > svg {
    flex: none;
    width: 15px;
    height: 15px;
    color: #94a3b8;
}

/* The path is the one string on this panel that is real data, so it gets the
   mono face and the room. Long URLs truncate rather than wrap: the visitor is
   checking the head of the address, not reading a query string. */
.qnf-window__path {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13.5px;
    color: #334155;
}

.qnf-window__path b {
    font-weight: 700;
    color: #0f172a;
}

.qnf-window__badge {
    flex: none;
    padding: 3px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #fff;
}

/* The body stands in for the page that is not there: a broken-link glyph over
   skeleton lines that never resolve. Purely decorative. */
.qnf-window__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    padding: 34px 26px 38px;
}

.qnf-window__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 6px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(79, 70, 229, .1), rgba(162, 45, 234, .12));
    color: #6d5ce0;
}

.qnf-window__glyph svg {
    width: 30px;
    height: 30px;
}

.qnf-window__line {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #eef2ff, #f1f5f9 40%, #eef2ff);
    background-size: 200% 100%;
    animation: qnf-shimmer 3.4s ease-in-out infinite;
}

.qnf-window__line:nth-child(2) { width: 74%; }
.qnf-window__line:nth-child(3) { width: 58%; animation-delay: -1.1s; }
.qnf-window__line:nth-child(4) { width: 40%; animation-delay: -2.2s; }

@keyframes qnf-shimmer {
    0%, 100% { background-position: 0 0; opacity: .95; }
    50%      { background-position: 100% 0; opacity: .6; }
}

/* ── signpost band ──────────────────────────────────────────────────── */
.qnf-picks {
    position: relative;
    z-index: 5;
    border-top: 1px solid rgba(79, 70, 229, .1);
    background: linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .94));
    padding: 56px 0 70px;
}

.qnf-picks__head {
    max-width: 620px;
    margin-bottom: 30px;
}

.qnf-picks__title {
    margin: 0 0 8px;
    font-size: clamp(21px, 2.4vw, 27px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #0f172a;
}

.qnf-picks__sub {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: #64748b;
}

.qnf-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px) {
    .qnf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .qnf-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── signpost card ──────────────────────────────────────────────────── */
.qnf-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 20px 20px 18px;
    border: 1px solid rgba(79, 70, 229, .12);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    text-decoration: none;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* The hover wash sits on a pseudo-element rather than on background, so the
   card keeps its flat white base and the tint can fade in and out without the
   text underneath having to be repainted with it. */
.qnf-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(135deg, rgba(79, 70, 229, .06), rgba(162, 45, 234, .07));
    transition: opacity .22s ease;
}

.qnf-card:hover,
.qnf-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(79, 70, 229, .3);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 44px -26px rgba(79, 70, 229, .5);
}

.qnf-card:hover::before,
.qnf-card:focus-visible::before {
    opacity: 1;
}

.qnf-card:focus-visible {
    outline: 3px solid rgba(79, 70, 229, .45);
    outline-offset: 3px;
}

.qnf-card__icon {
    position: relative;
    z-index: 1;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(79, 70, 229, .11), rgba(162, 45, 234, .13));
    color: #5b4fd6;
    transition: background .22s ease, color .22s ease;
}

.qnf-card:hover .qnf-card__icon,
.qnf-card:focus-visible .qnf-card__icon {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
}

.qnf-card__icon svg {
    width: 20px;
    height: 20px;
}

.qnf-card__text {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.qnf-card__name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15.5px;
    font-weight: 700;
    color: #0f172a;
    transition: color .22s ease;
}

.qnf-card:hover .qnf-card__name,
.qnf-card:focus-visible .qnf-card__name {
    color: #4338ca;
}

.qnf-card__name svg {
    width: 14px;
    height: 14px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .22s ease, transform .22s ease;
}

.qnf-card:hover .qnf-card__name svg,
.qnf-card:focus-visible .qnf-card__name svg {
    opacity: 1;
    transform: translateX(0);
}

.qnf-card__note {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #64748b;
}

/* ── tail: the two exits that catch everything else ─────────────────── */
.qnf-tail {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 28px;
    padding: 16px 20px;
    border: 1px dashed rgba(79, 70, 229, .24);
    border-radius: 14px;
    background: rgba(248, 250, 252, .8);
    font-size: 14.5px;
    line-height: 1.7;
    color: #64748b;
}

/* The icon holds the first line rather than wrapping above the sentence, which
   is what a plain `flex-wrap: wrap` row did once the text needed two lines. */
.qnf-tail svg {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 3px;
    color: #7c3aed;
}

.qnf-tail > span {
    min-width: 0;
}

.qnf-tail a {
    font-weight: 700;
    color: #4f46e5;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(79, 70, 229, .35);
    transition: color .2s ease, text-decoration-color .2s ease;
}

.qnf-tail a:hover {
    color: #a22dea;
    text-decoration-color: currentColor;
}

.qnf-tail a:focus-visible {
    outline: 3px solid rgba(79, 70, 229, .45);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── motion preferences ─────────────────────────────────────────────── */
/* Everything that moves here is ambient — the drifting aurora, the ring, the
   skeleton shimmer, the card lift. None of it carries meaning, so all of it is
   simply stopped rather than substituted. */
@media (prefers-reduced-motion: reduce) {
    .qnf-page__aurora i,
    .qnf-num__zero,
    .qnf-window__line {
        animation: none;
    }

    .qnf-card,
    .qnf-card::before,
    .qnf-card__icon,
    .qnf-card__name svg {
        transition: none;
    }

    .qnf-card:hover,
    .qnf-card:focus-visible {
        transform: none;
    }
}