:root {
    --qlik-ink: #10211c;
    --qlik-muted: #52635d;
    --qlik-green: #138a4b;
    --qlik-green-dark: #086335;
    --qlik-lime: #a9e338;
    --qlik-mint: #eaf7ef;
    --qlik-line: #d9e4de;
    --qlik-soft: #f5f8f6;
    --qlik-dark: #0b1b16;
    --qlik-white: #ffffff;
    --qlik-radius: 18px;
    --qlik-shadow: 0 22px 60px rgba(16, 33, 28, .09);
}

.qlik-microsite {
    color: var(--qlik-ink);
    background: var(--qlik-white);
}

.qlik-microsite h1,
.qlik-microsite h2,
.qlik-microsite h3,
.qlik-microsite p {
    text-wrap: pretty;
}

.qlik-skip-link {
    position: fixed;
    z-index: 10002;
    left: 16px;
    top: -80px;
    padding: 12px 18px;
    color: #fff;
    background: var(--qlik-green-dark);
    border-radius: 0 0 8px 8px;
}

.qlik-skip-link:focus { top: 0; }

.qlik-header-offset { height: var(--nav-height, 80px); }

.qlik-subnav {
    position: sticky;
    z-index: 900;
    top: var(--nav-height, 80px);
    border-block: 1px solid var(--qlik-line);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(18px);
}

.qlik-subnav__inner,
.qlik-subnav__brand,
.qlik-subnav__menu {
    display: flex;
    align-items: center;
}

.qlik-subnav__inner { min-height: 62px; gap: 24px; }

.qlik-subnav__brand {
    flex: 0 0 auto;
    gap: 10px;
    color: var(--qlik-ink);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .02em;
    text-decoration: none;
}

.qlik-subnav__brand img { object-fit: contain; }

.qlik-subnav__menu {
    flex: 1;
    justify-content: flex-end;
    gap: 4px;
}

.qlik-subnav__menu > a,
.qlik-subnav__dropdown > summary {
    padding: 10px 9px;
    color: #334840;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}

.qlik-subnav__menu > a:hover,
.qlik-subnav__menu > a:focus-visible,
.qlik-subnav__menu > a[aria-current="page"],
.qlik-subnav__dropdown > summary:hover,
.qlik-subnav__dropdown > summary.is-active {
    color: var(--qlik-green-dark);
    background: var(--qlik-mint);
}

.qlik-subnav__dropdown { position: relative; }
.qlik-subnav__dropdown > summary::-webkit-details-marker { display: none; }
.qlik-subnav__panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 240px;
    padding: 10px;
    border: 1px solid var(--qlik-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--qlik-shadow);
}

.qlik-subnav__panel a {
    display: block;
    padding: 10px 12px;
    color: var(--qlik-ink);
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
}

.qlik-subnav__panel a:hover,
.qlik-subnav__panel a:focus-visible { background: var(--qlik-soft); color: var(--qlik-green-dark); }

.qlik-subnav__cta,
.qlik-subnav__toggle {
    border: 0;
    font: inherit;
    cursor: pointer;
}

.qlik-subnav__cta {
    margin-left: 6px;
    padding: 11px 14px;
    color: #fff;
    background: var(--qlik-green-dark);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 750;
}

.qlik-subnav__toggle {
    display: none;
    margin-left: auto;
    padding: 10px 12px;
    color: var(--qlik-ink);
    background: var(--qlik-soft);
    border-radius: 8px;
}

.qlik-hero {
    position: relative;
    overflow: hidden;
    padding: 42px 0 88px;
    color: #fff;
    background:
        radial-gradient(circle at 86% 16%, rgba(169, 227, 56, .18), transparent 28%),
        linear-gradient(135deg, #071711 0%, #0c2d1e 60%, #0d3f26 100%);
}

.qlik-hero__mesh {
    position: absolute;
    inset: 0;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.qlik-breadcrumb { position: relative; margin-bottom: 48px; }
.qlik-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qlik-breadcrumb li {
    max-width: 48ch;
    color: rgba(255,255,255,.66);
    font-size: 12px;
}
.qlik-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: rgba(255,255,255,.3); }
.qlik-breadcrumb a { color: rgba(255,255,255,.76); text-decoration: none; }
.qlik-breadcrumb a:hover { color: #fff; }

.qlik-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
    gap: clamp(54px, 8vw, 110px);
    align-items: center;
}

.qlik-eyebrow {
    margin: 0 0 16px;
    color: var(--qlik-green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.qlik-hero .qlik-eyebrow,
.qlik-section--dark .qlik-eyebrow,
.qlik-final-cta .qlik-eyebrow { color: var(--qlik-lime); }

.qlik-hero h1 {
    max-width: 780px;
    margin: 0 0 24px;
    color: #fff;
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.02;
}

.qlik-hero__copy {
    max-width: 720px;
    margin: 0 0 12px;
    color: rgba(255,255,255,.78);
    font-size: clamp(16px, 1.7vw, 19px);
    line-height: 1.7;
}

.qlik-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.qlik-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 13px 19px;
    border: 1px solid transparent;
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.qlik-button:hover { transform: translateY(-2px); }
.qlik-button--primary { color: #fff; background: var(--qlik-green-dark); }
.qlik-hero .qlik-button--primary { color: var(--qlik-dark); background: var(--qlik-lime); }
.qlik-button--secondary { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
.qlik-button--light { color: var(--qlik-dark); background: #fff; }
.qlik-button--ghost { color: #fff; border-color: rgba(255,255,255,.36); background: transparent; }

.qlik-proof-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 30px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid rgba(255,255,255,.14);
    list-style: none;
}
.qlik-proof-list li { display: flex; gap: 7px; color: rgba(255,255,255,.72); font-size: 12px; }
.qlik-proof-list i { color: var(--qlik-lime); }

.qlik-flow { position: relative; display: grid; gap: 13px; padding-left: 42px; }
.qlik-flow__rail {
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 18px;
    width: 1px;
    background: linear-gradient(var(--qlik-lime), rgba(169,227,56,.14));
}
.qlik-flow__rail::before {
    content: "";
    position: absolute;
    left: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--qlik-lime);
    box-shadow: 0 0 22px var(--qlik-lime);
    animation: qlik-flow-pulse 5s linear infinite;
}
@keyframes qlik-flow-pulse { from { top: 0; } to { top: calc(100% - 9px); } }

.qlik-flow__node {
    position: relative;
    padding: 20px 22px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.055);
    backdrop-filter: blur(10px);
}
.qlik-flow__node::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 28px;
    width: 18px;
    height: 1px;
    background: rgba(169,227,56,.55);
}
.qlik-flow__node span { float: right; color: rgba(255,255,255,.25); font: 700 11px/1 monospace; }
.qlik-flow__node strong,
.qlik-flow__node small { display: block; }
.qlik-flow__node strong { margin-bottom: 6px; color: #fff; font-size: 15px; }
.qlik-flow__node strong i {
    display: inline-block;
    margin-right: 9px;
    color: var(--qlik-lime);
    font-size: 13px;
    /* Fixed width so the titles align down the column regardless of glyph. */
    width: 16px;
    text-align: center;
}
.qlik-flow__node small { color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.5; }
.qlik-flow__node--platform { border-color: rgba(169,227,56,.35); background: rgba(169,227,56,.09); }

.qlik-ai-overview { padding: 34px 0; border-bottom: 1px solid var(--qlik-line); background: var(--qlik-soft); }
.qlik-ai-overview__inner {
    display: grid;
    grid-template-columns: 160px minmax(220px, .65fr) minmax(320px, 1.35fr);
    gap: 24px 34px;
    align-items: start;
}
.qlik-ai-overview .qlik-eyebrow { margin-top: 6px; }
.qlik-ai-overview h2 { margin: 0; font-size: 20px; line-height: 1.3; }
.qlik-ai-overview p:not(.qlik-eyebrow) { margin: 0; color: var(--qlik-muted); font-size: 14px; line-height: 1.7; }
.qlik-entities { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 7px; }
.qlik-entities span { padding: 5px 9px; border: 1px solid var(--qlik-line); border-radius: 999px; color: #486159; background: #fff; font-size: 11px; }

.qlik-section { padding: clamp(72px, 9vw, 112px) 0; scroll-margin-top: 150px; }
.qlik-section--tint { background: var(--qlik-soft); }
.qlik-section--dark { color: #fff; background: var(--qlik-dark); }
.qlik-section__header { max-width: 820px; margin-bottom: 44px; }
.qlik-section__header h2 {
    margin: 0;
    color: var(--qlik-ink);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 720;
    letter-spacing: -.035em;
    line-height: 1.1;
}
.qlik-section--dark .qlik-section__header h2 { color: #fff; }
.qlik-section__lead { margin: 20px 0 0; color: var(--qlik-muted); font-size: 18px; line-height: 1.7; }
.qlik-section--dark .qlik-section__lead { color: rgba(255,255,255,.68); }
.qlik-section__closing {
    max-width: 920px;
    margin: 36px 0 0;
    padding: 24px 28px;
    border-left: 3px solid var(--qlik-green);
    color: #385249;
    background: var(--qlik-mint);
    font-size: 16px;
    line-height: 1.7;
}

.qlik-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
    max-width: 980px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.qlik-check-grid li { display: flex; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--qlik-line); color: #304940; line-height: 1.5; }
.qlik-check-grid i { margin-top: 4px; color: var(--qlik-green); }

.qlik-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.qlik-card {
    position: relative;
    min-height: 230px;
    padding: 30px;
    border: 1px solid var(--qlik-line);
    border-radius: var(--qlik-radius);
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.qlik-card:hover { transform: translateY(-4px); border-color: #b8d9c5; box-shadow: var(--qlik-shadow); }
.qlik-card__index { display: inline-block; margin-bottom: 32px; color: var(--qlik-green); font: 700 11px/1 monospace; }
/* Replaces the decorative index where cards describe parallel concepts rather
   than ordered steps, so the marker carries meaning instead of a false sequence. */
.qlik-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 20px;
    border: 1px solid var(--qlik-line);
    border-radius: 12px;
    background: var(--qlik-mint);
    color: var(--qlik-green);
    font-size: 17px;
    transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.qlik-card:hover .qlik-card__icon,
.qlik-industry:hover .qlik-card__icon {
    transform: translateY(-2px);
    border-color: var(--qlik-green);
    background: var(--qlik-green);
    color: #fff;
}
.qlik-card h3 { margin: 0 0 12px; color: var(--qlik-ink); font-size: 21px; line-height: 1.25; }
.qlik-card p { margin: 0; color: var(--qlik-muted); font-size: 14px; line-height: 1.7; }
.qlik-card ul { margin: 18px 0 0; padding: 0 0 0 18px; color: var(--qlik-muted); font-size: 13px; line-height: 1.75; }
.qlik-card a,
.qlik-industry a,
.qlik-story a,
.qlik-resource a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: var(--qlik-green-dark);
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
}

.qlik-journey {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--qlik-line);
    list-style: none;
}
.qlik-journey li { position: relative; min-height: 210px; padding: 26px 24px 20px 0; border-bottom: 1px solid var(--qlik-line); }
.qlik-journey li:not(:last-child)::after { content: ""; position: absolute; right: 18px; top: 42px; width: 28px; height: 1px; background: var(--qlik-green); }
.qlik-journey span { color: var(--qlik-green); font: 700 11px/1 monospace; }
/* Journey and architecture keep their ordinal because the sequence is real, and
   gain an icon beside it. Sized to preserve the existing vertical rhythm so the
   h3 top margins below do not need retuning. */
.qlik-journey__marker,
.qlik-architecture__marker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--qlik-green);
    font: 700 11px/1 monospace;
}
.qlik-journey__marker i,
.qlik-architecture__marker i { font-size: 14px; }
.qlik-journey h3 { margin: 40px 0 10px; color: var(--qlik-ink); font-size: 18px; }
.qlik-journey p { margin: 0; color: var(--qlik-muted); font-size: 13px; line-height: 1.65; }

.qlik-architecture {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2px;
    overflow: hidden;
    padding: 2px;
    border-radius: var(--qlik-radius);
    background: var(--qlik-line);
}
.qlik-architecture article { position: relative; min-height: 220px; padding: 28px; background: #fff; }
.qlik-architecture article:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; top: 34px; right: -10px; color: var(--qlik-green); font-weight: 800; }
.qlik-architecture span { color: var(--qlik-green); font: 700 11px/1 monospace; }
.qlik-architecture h3 { margin: 46px 0 12px; font-size: 18px; }
.qlik-architecture p { margin: 0; color: var(--qlik-muted); font-size: 13px; line-height: 1.7; }
.qlik-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; padding: 18px; border: 1px solid var(--qlik-line); border-radius: 12px; background: var(--qlik-mint); font-size: 12px; }
.qlik-controls strong { margin-right: 10px; }
.qlik-controls span { padding: 5px 9px; border-radius: 999px; background: #fff; }

.qlik-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    align-items: center;
    padding: 38px;
    border-radius: var(--qlik-radius);
    color: #fff;
    background: var(--qlik-dark);
}
.qlik-feature p { max-width: 800px; margin: 0; color: rgba(255,255,255,.76); font-size: 17px; line-height: 1.7; }

.qlik-platforms { border-top: 1px solid var(--qlik-line); }
.qlik-platforms details,
.qlik-faq details { border-bottom: 1px solid var(--qlik-line); }
.qlik-platforms summary,
.qlik-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 4px;
    color: var(--qlik-ink);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.qlik-platforms summary::-webkit-details-marker,
.qlik-faq summary::-webkit-details-marker { display: none; }
.qlik-platforms details[open] summary i,
.qlik-faq details[open] summary i { transform: rotate(45deg); }
.qlik-platforms summary i,
.qlik-faq summary i { color: var(--qlik-green); transition: transform .2s ease; }
.qlik-platforms__content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 0 4px 30px;
}
.qlik-platforms__content div { padding: 20px; border-radius: 12px; background: var(--qlik-soft); }
.qlik-platforms__content strong { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.qlik-platforms__content p { margin: 8px 0 0; color: var(--qlik-muted); font-size: 13px; line-height: 1.65; }

.qlik-industry-list { display: grid; gap: 20px; }
.qlik-industry {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr 1fr;
    gap: 26px;
    padding: 32px;
    border: 1px solid var(--qlik-line);
    border-radius: var(--qlik-radius);
    background: #fff;
}
.qlik-industry h3 { margin: 0 0 12px; font-size: 24px; }
.qlik-industry p { margin: 0; color: var(--qlik-muted); font-size: 13px; line-height: 1.65; }
.qlik-industry strong { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.qlik-industry ul { margin: 12px 0 0; padding-left: 18px; color: var(--qlik-muted); font-size: 13px; line-height: 1.7; }

.qlik-credential-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.qlik-credential-grid article {
    overflow: hidden;
    border: 1px solid var(--qlik-line);
    border-radius: 14px;
    background: #fff;
}
.qlik-credential-grid img { display: block; width: 100%; height: 170px; object-fit: contain; padding: 18px; background: var(--qlik-soft); }
.qlik-credential-grid h3 { margin: 0; padding: 18px; font-size: 14px; line-height: 1.45; }
.qlik-credential-placeholder { display: grid; place-items: center; height: 170px; color: var(--qlik-green); background: var(--qlik-mint); font-size: 40px; }
.qlik-content-note { max-width: 900px; margin: 24px 0 0; color: var(--qlik-muted); font-size: 12px; line-height: 1.6; }

/* Awards are ceremony photographs, not emblems, so they get a cover-cropped
   16:10 strip like the customer-story cards. The badge tile above uses
   object-fit:contain, which is right for square transparent artwork but
   letterboxes a wide stage photograph into an unreadable band. */
.qlik-award-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.qlik-award {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--qlik-line);
    border-radius: 14px;
    background: #fff;
}
.qlik-award__media {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--qlik-soft);
    border-bottom: 1px solid var(--qlik-line);
}
.qlik-award__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}
.qlik-award:hover .qlik-award__media img { transform: scale(1.04); }
.qlik-award h3 { margin: 0; padding: 16px 18px 0; font-size: 14px; line-height: 1.45; }
.qlik-award p { margin: 6px 0 0; padding: 0 18px 18px; color: var(--qlik-muted); font-size: 12.5px; line-height: 1.6; }

.qlik-story-grid,
.qlik-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.qlik-story { display: flex; flex-direction: column; min-height: 420px; padding: 28px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(255,255,255,.05); overflow: hidden; }
/* Full-bleed media strip for the customer-story and resource cards.
   Negative margins escape the card's 28px padding, so no markup restructure is
   needed and .qlik-story__outcome keeps its margin-top:auto bottom alignment. */
.qlik-story__media,
.qlik-resource__media {
    display: block;
    position: relative;
    margin: -28px -28px 22px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: rgba(255,255,255,.06);
}
.qlik-story__media img,
.qlik-resource__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}
.qlik-story:hover .qlik-story__media img,
.qlik-resource:hover .qlik-resource__media img { transform: scale(1.04); }
/* The stories sit on the dark section, so the photograph is progressively
   darkened toward the copy below. Without this it reads as a bright rectangle
   pasted onto the card rather than part of it. */
.qlik-story__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,27,22,.16) 0%, rgba(11,27,22,.72) 100%);
}
.qlik-story > span,
.qlik-resource > span { color: var(--qlik-lime); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.qlik-story h3 { margin: 20px 0; color: #fff; font-size: 20px; line-height: 1.35; }
.qlik-story p { margin: 0 0 14px; color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.65; }
.qlik-story p strong { color: rgba(255,255,255,.9); }
.qlik-story__tech { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.qlik-story__outcome { display: flex; gap: 12px; align-items: center; margin-top: auto; padding: 18px 0; }
.qlik-story__outcome strong { color: var(--qlik-lime); font-size: 27px; }
.qlik-story__outcome span { color: rgba(255,255,255,.7); font-size: 11px; line-height: 1.4; }
.qlik-story a { color: #fff; }

.qlik-resource { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--qlik-line); border-radius: 16px; background: #fff; overflow: hidden; }
.qlik-resource__media { background: var(--qlik-soft); border-bottom: 1px solid var(--qlik-line); }
.qlik-resource a { margin-top: auto; }
.qlik-resource > span { color: var(--qlik-green); }
.qlik-resource h3 { margin: 18px 0 12px; font-size: 20px; line-height: 1.35; }
.qlik-resource p { color: var(--qlik-muted); font-size: 13px; line-height: 1.65; }

.qlik-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qlik-related a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 18px; border: 1px solid var(--qlik-line); border-radius: 10px; color: var(--qlik-ink); background: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
.qlik-related a:hover { border-color: var(--qlik-green); color: var(--qlik-green-dark); }

.qlik-faq__layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(400px, 1.28fr); gap: 70px; align-items: start; }
.qlik-faq__items { border-top: 1px solid var(--qlik-line); }
.qlik-faq summary { font-size: 16px; }
.qlik-faq details > div { padding: 0 40px 24px 4px; }
.qlik-faq details p { margin: 0; color: var(--qlik-muted); font-size: 14px; line-height: 1.75; }

.qlik-final-cta {
    padding: 76px 0;
    color: #fff;
    background:
        radial-gradient(circle at 90% 10%, rgba(169,227,56,.2), transparent 30%),
        var(--qlik-green-dark);
}
.qlik-final-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 50px; align-items: center; }
.qlik-final-cta h2 { max-width: 760px; margin: 0; color: #fff; font-size: clamp(32px, 4vw, 50px); letter-spacing: -.035em; line-height: 1.1; }
.qlik-final-cta p:not(.qlik-eyebrow) { max-width: 720px; margin: 18px 0 0; color: rgba(255,255,255,.75); font-size: 16px; line-height: 1.65; }
.qlik-final-cta .qlik-actions { justify-content: flex-end; }

.qlik-modal {
    width: min(920px, calc(100% - 28px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 0;
    border-radius: 20px;
    color: var(--qlik-ink);
    background: transparent;
    /* style.css opens with `*{margin:0;padding:0;box-sizing:border-box}`, and
       that universal selector also matches <dialog>, cancelling the UA
       stylesheet's `margin:auto`. Without these two lines the modal collapses
       into the top-left corner against `inset:0` instead of centring. Both are
       restated rather than inherited so centring does not depend on which
       height the UA happens to give a modal dialog. */
    margin: auto;
    height: fit-content;
}
.qlik-modal::backdrop { background: rgba(3, 15, 10, .72); backdrop-filter: blur(5px); }
.qlik-modal__surface { position: relative; overflow: auto; max-height: calc(100vh - 32px); padding: 38px; border-radius: 20px; background: #fff; }
.qlik-modal__close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; color: var(--qlik-ink); background: var(--qlik-soft); cursor: pointer; }
.qlik-modal__intro { margin-bottom: 28px; padding-right: 50px; }
.qlik-modal__intro h2 { margin: 0; font-size: 32px; }
.qlik-modal__intro > p:not(.qlik-eyebrow) { margin: 10px 0 0; color: var(--qlik-muted); }
.qlik-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.qlik-form-grid label { display: grid; gap: 7px; color: #283d35; font-size: 12px; font-weight: 700; }
.qlik-form-grid__full { grid-column: 1 / -1; }
/* design-system.css declares
     form label:not(.checkbox-label):not(.form-check-label){display:inline-flex;align-items:center}
   at specificity (0,2,2), which outranked the (0,1,1) rule above and laid every
   label out inline with its control. Label text varies in width, so the inputs
   each started at a different x and the form read as ragged: eleven fields
   produced eleven different left edges. Scoping to the form's id wins on
   specificity without resorting to !important. Typography is left to the design
   system, which sets it with !important; only layout is reclaimed here. */
#qlik-lead-form .qlik-form-grid label {
    display: grid;
    /* Caption row absorbs the slack, control row hugs its content, so the
       control is bottom-anchored. Grid stretches both labels in a row to the
       same height, which means paired controls line up even when one caption
       wraps to two lines and the other does not. Without this, "Business email"
       and "Company (optional)" sat 24px apart in the same row. */
    grid-template-rows: 1fr auto;
    gap: 6px;
    margin-bottom: 0;
}
#qlik-lead-form .qlik-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0;
}
/* The caption is one grid item holding the field name plus its optional/required
   marker, so markers never become sibling rows of the control. */
#qlik-lead-form .qlik-form-grid .qlik-field-label {
    display: block;
    line-height: 1.35;
}
#qlik-lead-form .qlik-form-grid .qlik-optional {
    color: var(--qlik-muted);
    font-weight: 500;
    font-size: .92em;
    letter-spacing: 0;
    text-transform: none;
}
/* Equal control heights so the two columns line up row by row: a <select> and
   an <input> otherwise resolve to slightly different intrinsic heights. */
#qlik-lead-form .qlik-form-grid input,
#qlik-lead-form .qlik-form-grid select { height: 44px; }
#qlik-lead-form .qlik-form-grid textarea { min-height: 96px; resize: vertical; }
.qlik-form-grid input,
.qlik-form-grid select,
.qlik-form-grid textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #cbd8d1;
    border-radius: 8px;
    color: var(--qlik-ink);
    background: #fff;
    font: inherit;
    font-size: 14px;
}
.qlik-form-grid input:focus,
.qlik-form-grid select:focus,
.qlik-form-grid textarea:focus { outline: 3px solid rgba(19,138,75,.18); border-color: var(--qlik-green); }
.qlik-consent { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; color: var(--qlik-muted); font-size: 12px; line-height: 1.5; }
.qlik-consent input { margin-top: 3px; }
.qlik-consent a { color: var(--qlik-green-dark); }
.qlik-honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; pointer-events: none !important; }
.qlik-form-status { min-height: 22px; margin: 14px 0 0; color: var(--qlik-muted); font-size: 13px; }
.qlik-form-status.is-error { color: #a41414; }
.qlik-form-status.is-success { color: var(--qlik-green-dark); }

/* Scroll reveal for card, step, layer and industry entries.
   The hidden state applies only once the script has added .qlik-reveal-pending,
   and the script only adds it to items that start below the fold. So nothing
   visible ever hides after paint (no flash), and a visitor without JS keeps
   every item rendered. Stagger uses transition-delay rather than
   animation-delay because the global reduced-motion reset in
   design-system.css zeroes durations but leaves delays intact. */
[data-qlik-reveal].qlik-reveal-pending {
    opacity: 0;
    transform: translateY(14px);
    /* Must be instant. .qlik-card already declares a transform transition, so
       without this the card visibly slides down as the hidden state is applied. */
    transition: none;
}
[data-qlik-reveal].qlik-reveal-pending.is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease, transform .5s ease;
    transition-delay: var(--qlik-reveal-delay, 0ms);
}

@media (max-width: 1180px) {
    .qlik-subnav__brand span { display: none; }
    .qlik-subnav__menu > a,
    .qlik-subnav__dropdown > summary { padding-inline: 7px; font-size: 11px; }
    .qlik-card-grid,
    .qlik-story-grid,
    .qlik-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qlik-industry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qlik-credential-grid,
    .qlik-award-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .qlik-subnav__toggle { display: inline-flex; align-items: center; gap: 8px; }
    .qlik-subnav__menu {
        position: absolute;
        top: 100%;
        right: 18px;
        left: 18px;
        display: none;
        max-height: min(72vh, 620px);
        overflow: auto;
        align-items: stretch;
        padding: 14px;
        border: 1px solid var(--qlik-line);
        border-radius: 0 0 14px 14px;
        background: #fff;
        box-shadow: var(--qlik-shadow);
    }
    .qlik-subnav__menu.is-open { display: grid; }
    .qlik-subnav__menu > a,
    .qlik-subnav__dropdown > summary { display: block; padding: 12px; font-size: 13px; }
    .qlik-subnav__dropdown { position: static; }
    .qlik-subnav__panel { position: static; width: auto; margin: 4px 0 8px; border: 0; box-shadow: none; background: var(--qlik-soft); }
    .qlik-subnav__cta { margin: 6px 0 0; min-height: 44px; }
    .qlik-hero__grid { grid-template-columns: 1fr; }
    .qlik-flow { max-width: 680px; }
    .qlik-ai-overview__inner { grid-template-columns: 1fr; }
    .qlik-entities { grid-column: 1; }
    .qlik-faq__layout { grid-template-columns: 1fr; gap: 10px; }
    .qlik-platforms__content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qlik-final-cta__inner { grid-template-columns: 1fr; }
    .qlik-final-cta .qlik-actions { justify-content: flex-start; margin-top: 0; }
}

@media (max-width: 720px) {
    .qlik-header-offset { height: var(--nav-height, 72px); }
    .qlik-subnav { top: var(--nav-height, 72px); }
    .qlik-subnav__inner { min-height: 58px; }
    .qlik-hero { padding: 28px 0 62px; }
    .qlik-breadcrumb { margin-bottom: 36px; }
    .qlik-hero h1 { font-size: clamp(38px, 11vw, 54px); }
    .qlik-flow { padding-left: 32px; }
    .qlik-flow__rail { left: 12px; }
    .qlik-flow__node::before { left: -22px; width: 13px; }
    .qlik-section { padding: 68px 0; }
    .qlik-card-grid,
    .qlik-story-grid,
    .qlik-resource-grid,
    .qlik-check-grid,
    .qlik-related,
    .qlik-industry,
    .qlik-platforms__content,
    .qlik-credential-grid,
    .qlik-award-grid { grid-template-columns: 1fr; }
    .qlik-card { min-height: 0; padding: 24px; }
    .qlik-feature { grid-template-columns: 1fr; padding: 28px; }
    .qlik-industry { padding: 24px; }
    .qlik-form-grid { grid-template-columns: 1fr; }
    .qlik-form-grid__full { grid-column: 1; }
    .qlik-modal__surface { padding: 30px 20px; }
    .qlik-journey li:not(:last-child)::after,
    .qlik-architecture article:not(:last-child)::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .qlik-flow__rail::before { animation: none; top: 0; }
    .qlik-button,
    .qlik-card,
    .qlik-card__icon,
    .qlik-platforms summary i,
    .qlik-award__media img,
    .qlik-faq summary i { transition: none; }
    /* Never hide-then-reveal: show the content outright with no movement. */
    [data-qlik-reveal].qlik-reveal-pending,
    [data-qlik-reveal].qlik-reveal-pending.is-revealed {
        opacity: 1;
        transform: none;
        transition: none;
    }
    html:focus-within { scroll-behavior: auto; }
}