/* Free HR software campaign page design layer.
 *
 * The presentation layer for Components/Pages/FreeHrSoftwarePage.razor. Global
 * CSS, linked from App.razor, so the same two rules pages/home.css and
 * pages/saas-pricing.css call out apply here:
 *
 * 1. Nothing confines these rules to this page, so every selector is qfh-
 *    prefixed or a descendant of one. No bare element selectors.
 * 2. @keyframes names are global too, hence the prefix on those as well — they
 *    must not collide with the compiled Tailwind bundle, Home's qh- animations
 *    or the pricing page's qp- ones.
 *
 * These rules are unlayered and Tailwind v4's utilities live inside @layer, so
 * they win regardless of specificity.
 *
 * The palette is the same logo ramp the pricing page uses — #a22dea
 * (magenta-violet) → #7b5ee5 → #5b5de2 (indigo-blue) — because this page and
 * /pricing/saas-pricing are the two halves of one campaign and a visitor
 * bounces between them. Two surfaces are dark, the hero and the closing call to
 * action, and both sit at the deep end of that ramp rather than on a neutral
 * black, so the page opens and closes on the same material.
 *
 * Emerald is the only hue from outside the ramp, and it is used for one thing:
 * the confirmation ticks on the promise the ad campaign makes (free for life,
 * unlimited employees, no credit card). Keeping it to that single job is what
 * makes those ticks read as verification rather than decoration.
 *
 * Content note: this page renders an editable document (see
 * Services/FreeContentDefaults.cs) and its SEO positioning is deliberate — the
 * markup this stylesheet dresses carries the H1/title match, the keyword
 * density and the semantic <strong> usage. Restyle freely; do not restructure
 * the headings.
 */

/* ── shared: buttons ────────────────────────────────────────────────── */
.qfh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 26px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background .25s, color .2s, border-color .25s;
}

.qfh-btn:hover { transform: translateY(-2px); }

.qfh-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* The logo ramp end to end. This is the "create your free account" button
   wherever it appears — one colour the visitor can follow down the page. */
.qfh-btn--brand {
    color: #fff;
    background: linear-gradient(135deg, #a22dea, #5b5de2);
    box-shadow: 0 18px 38px -18px rgba(140, 40, 220, .95);
}

.qfh-btn--brand:hover {
    background: linear-gradient(135deg, #8f1fd6, #4a4cd4);
    box-shadow: 0 26px 52px -18px rgba(140, 40, 220, 1);
}

.qfh-btn--outline {
    color: #1e293b;
    background: #fff;
    border-color: #e4e2f3;
    box-shadow: 0 10px 24px -18px rgba(15, 23, 42, .55);
}

.qfh-btn--outline:hover {
    color: #4f46e5;
    border-color: #c7d2fe;
    box-shadow: 0 18px 34px -20px rgba(79, 70, 229, .6);
}

/* On the two dark surfaces a white card button becomes a second solid button
   competing with the brand one, so it drops to glass instead. */
.qfh-dark .qfh-btn--outline {
    color: #e9e7fb;
    background: rgba(255, 255, 255, .07);
    border-color: rgba(167, 139, 250, .42);
    box-shadow: 0 10px 26px -18px rgba(2, 6, 23, .9);
}

.qfh-dark .qfh-btn--outline:hover {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(196, 181, 253, .72);
    box-shadow: 0 18px 34px -20px rgba(124, 58, 237, .8);
}

.qfh-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

/* ── shared: section heading ────────────────────────────────────────── */
.qfh-head { max-width: 760px; }

.qfh-head--center { margin: 0 auto; text-align: center; }

.qfh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 8px;
    margin-bottom: 20px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(100deg, #4f46e5, #7c3aed 55%, #a855f7);
    box-shadow: 0 12px 30px -12px rgba(99, 102, 241, .85);
}

.qfh-eyebrow__pip {
    width: 21px;
    height: 21px;
    border-radius: 99px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255, 255, 255, .22);
    animation: qfh-pulse 2.8s ease-in-out infinite;
}

.qfh-eyebrow__pip svg { width: 12px; height: 12px; }

@keyframes qfh-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .38); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

.qfh-head__title {
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.16;
    letter-spacing: -.03em;
    font-weight: 800;
    color: #0b1020;
    margin: 0;
}

.qfh-head__sub {
    font-size: 16px;
    line-height: 1.7;
    color: #5b6478;
    margin: 16px 0 0;
}

.qfh-head__sub strong { font-weight: 650; color: #241b4d; }

/* ── hero ───────────────────────────────────────────────────────────── */
/* Deep end of the logo ramp, matching /pricing/saas-pricing so the two campaign
   pages read as one surface. The stat rail below rides up over its lower edge,
   so the hero carries extra bottom padding to sit under it. */
.qfh-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #0d0a24 0%, #14112f 46%, #1b1547 100%);
    padding: 78px 0 132px;
}

.qfh-aurora,
.qfh-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.qfh-aurora i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .72;
    animation: qfh-drift 26s ease-in-out infinite;
}

/* Additive glows on a near-black surface — the alphas run hot because the same
   values that tint white barely lift here. */
.qfh-aurora i:nth-child(1) {
    width: 720px;
    height: 720px;
    top: -400px;
    right: -180px;
    background: radial-gradient(circle, rgba(129, 140, 248, .46), transparent 62%);
}

.qfh-aurora i:nth-child(2) {
    width: 560px;
    height: 560px;
    bottom: -300px;
    left: -200px;
    animation-delay: -9s;
    background: radial-gradient(circle, rgba(167, 139, 250, .40), transparent 62%);
}

.qfh-aurora i:nth-child(3) {
    width: 440px;
    height: 440px;
    top: 26%;
    left: 46%;
    animation-delay: -16s;
    background: radial-gradient(circle, rgba(192, 77, 240, .30), transparent 62%);
}

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

.qfh-grid {
    opacity: .5;
    background-image: radial-gradient(circle at 1px 1px, rgba(196, 181, 253, .42) 1.1px, transparent 0);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 60% 48% at 50% 6%, #000, transparent 72%);
    mask-image: radial-gradient(ellipse 60% 48% at 50% 6%, #000, transparent 72%);
}

/* Copy left, product shot right. The copy column is the wider of the two — the
   headline, the promise and the CTAs are what this page is for, and the shot is
   evidence rather than the subject. */
.qfh-hero__grid {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
    gap: 56px;
}

.qfh-hero__copy { max-width: 660px; }

.qfh-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px 8px 9px;
    margin-bottom: 26px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #ede9ff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(167, 139, 250, .38);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* The live dot is the only thing on the page that says "this is switched on
   right now" without spending a word on it. */
.qfh-badge__dot {
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-radius: 99px;
    flex: 0 0 auto;
    background: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .18);
    animation: qfh-blink 2.4s ease-in-out infinite;
}

@keyframes qfh-blink {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }
    50%      { opacity: .55; box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}

.qfh-hero__title {
    font-size: clamp(33px, 4.4vw, 57px);
    line-height: 1.06;
    letter-spacing: -.035em;
    font-weight: 800;
    color: #fff;
    margin: 0 0 22px;
    max-width: 17ch;
    /* The headline is an editable string, so it cannot be split into an accent
       span. The gradient rides the whole line instead, staying near-white at
       the start where the keyword sits and warming as it wraps. */
    background: linear-gradient(104deg, #fff 0%, #ede9fe 38%, #d8b4fe 72%, #f9a8d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.qfh-hero__lede {
    font-size: clamp(16px, 1.25vw, 18.5px);
    line-height: 1.68;
    color: #a9b0d0;
    max-width: 62ch;
    margin: 0 0 32px;
}

.qfh-hero__lede strong { font-weight: 650; color: #e6e8f6; }

/* ── hero visual ────────────────────────────────────────────────────── */
/* The shot is a light-background PNG on a near-black hero, so it needs a glow
   under it and a hairline around it — dropped straight onto the surface it
   reads as a bright rectangle someone forgot to place. */
.qfh-hero__visual {
    position: relative;
    justify-self: end;
    width: 100%;
    max-width: 620px;
}

.qfh-shot {
    position: relative;
    padding: 10px;
    border-radius: 26px;
    background: linear-gradient(140deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 46%, rgba(162, 45, 234, .12));
    border: 1px solid rgba(167, 139, 250, .28);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 60px 120px -50px rgba(2, 6, 23, .95), 0 20px 50px -35px rgba(124, 58, 237, .8);
    animation: qfh-hover 9s ease-in-out infinite;
}

/* Sits behind the frame, so it spills past the corners rather than being
   clipped by the image's own rounding. */
.qfh-shot__glow {
    position: absolute;
    inset: -14% -10%;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(60px);
    background: radial-gradient(circle at 60% 40%, rgba(162, 45, 234, .5), rgba(91, 93, 226, .32) 45%, transparent 70%);
}

.qfh-shot__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}

/* Barely-there drift. Enough to stop the panel looking pasted on, small enough
   that it never competes with the CTAs for attention. */
@keyframes qfh-hover {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* Hero proof points. Pills rather than a bullet list — five short phrases in a
   row read as a spec strip, which is what they are. */
.qfh-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.qfh-point {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px 8px 9px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: #dcd9f4;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(148, 163, 233, .24);
}

.qfh-point__ic {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 99px;
    color: #052e21;
    background: #6ee7b7;
}

.qfh-point__ic svg { width: 12px; height: 12px; }

/* ── stat rail ──────────────────────────────────────────────────────── */
/* Rides up over the hero's lower edge, which is the only place the dark surface
   meets the light page. The wrapper starts on the hero's end colour and ramps
   back to white through intermediate stops — a straight #1b1547 → #fff fade
   bands visibly. */
.qfh-statwrap {
    position: relative;
    z-index: 6;
    margin-top: -60px;
    padding-bottom: 8px;     
}

/* A gradient hairline rather than a flat border: the page behind it is already
   faintly violet, so a 1px solid line in the same family disappears. */
.qfh-stats {
    padding: 1.5px;
    border-radius: 26px;
    background: linear-gradient(120deg, #a22dea, #7b5ee5 46%, #5b5de2);
    box-shadow: 0 46px 100px -50px rgba(109, 40, 217, .6), 0 12px 30px -20px rgba(15, 23, 42, .3);
}

.qfh-stats__in {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-radius: 24.5px;
    overflow: hidden;
    background: linear-gradient(122deg, #fff 0%, #fdfbff 46%, #f8f3ff 100%);
}

.qfh-stat {
    position: relative;
    padding: 30px 24px;
    text-align: center;
}

/* Hairline dividers drawn as pseudo-elements so the last cell has none and no
   :not() selector is needed. */
.qfh-stat + .qfh-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(124, 58, 237, .22), transparent);
}

.qfh-stat__value {
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 0 0 8px;
    background: linear-gradient(120deg, #a22dea, #5b5de2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.qfh-stat__label {
    font-size: 13px;
    line-height: 1.5;
    font-weight: 550;
    color: #64748b;
    margin: 0;
}

/* ── intro ──────────────────────────────────────────────────────────── */
/* Editorial two-column split: the claim on the left, the argument on the right.
   The heading is sticky on wide screens so it stays with the paragraph a reader
   is on. */
.qfh-intro { padding: 64px 0 18px; }

.qfh-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 56px;
}

.qfh-intro__aside { position: sticky; top: 108px; align-self: start; }

.qfh-rule {
    display: block;
    width: 54px;
    height: 4px;
    margin: 0 0 20px;
    border-radius: 99px;
    background: linear-gradient(90deg, #a22dea, #5b5de2);
}

.qfh-intro__title {
    font-size: clamp(24px, 2.6vw, 33px);
    line-height: 1.18;
    letter-spacing: -.03em;
    font-weight: 800;
    color: #0b1020;
    margin: 0;
}

.qfh-intro__body p {
    font-size: 16.5px;
    line-height: 1.78;
    color: #48506a;
    margin: 0 0 22px;
}

.qfh-intro__body p:last-child { margin-bottom: 0; }

/* First paragraph carries the keyword inside the first 100 words of body copy,
   so it is set a step larger and darker as the entry point into the argument. */
.qfh-intro__body p:first-child {
    font-size: 18px;
    color: #2b3147;
}

.qfh-intro__body strong { font-weight: 650; color: #1b1547; }

/* ── features ───────────────────────────────────────────────────────── */
.qfh-inc {
    position: relative;
    padding: 74px 0 84px;
    background:
        radial-gradient(ellipse 70% 50% at 12% 0%, rgba(162, 45, 234, .06), transparent 60%),
        radial-gradient(ellipse 60% 50% at 92% 30%, rgba(91, 93, 226, .07), transparent 60%),
        linear-gradient(180deg, #fbfaff 0%, #fff 40%, #faf9ff 100%);
    border-top: 1px solid rgba(124, 58, 237, .1);
    border-bottom: 1px solid rgba(124, 58, 237, .1);
}

.qfh-inc__head { margin-bottom: 58px; }

/* Group header. The number is the loud part — five numbered groups is the only
   structure a visitor needs to hold in their head while scanning fifty cards. */
.qfh-group { margin-bottom: 58px; }

.qfh-group:last-of-type { margin-bottom: 0; }

.qfh-group__head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 26px;
}

.qfh-group__no {
    flex: 0 0 auto;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.04em;
    /* Outlined rather than filled: five of these stacked down the page in solid
       violet would out-shout the headings they label. */
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(124, 58, 237, .42);
    opacity: .9;
}

.qfh-group__title {
    font-size: clamp(20px, 2.1vw, 26px);
    line-height: 1.22;
    letter-spacing: -.025em;
    font-weight: 750;
    color: #0b1020;
    margin: 0 0 8px;
}

.qfh-group__intro {
    font-size: 15.5px;
    line-height: 1.65;
    color: #64748b;
    margin: 0;
    max-width: 74ch;
}

.qfh-fgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.qfh-fcard {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 22px 22px 24px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #ecebf6;
    box-shadow: 0 10px 26px -22px rgba(15, 23, 42, .5);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, border-color .28s;
}

/* The gradient edge wipes in on hover instead of sitting there permanently —
   fifty cards each carrying a coloured rule is a striped page, not a calm one. */
.qfh-fcard::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, #a22dea, #5b5de2);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}

.qfh-fcard:hover {
    transform: translateY(-4px);
    border-color: #ddd8f7;
    box-shadow: 0 26px 50px -32px rgba(79, 70, 229, .65);
}

.qfh-fcard:hover::before { transform: scaleX(1); }

.qfh-fcard__top {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 10px;
}

.qfh-fcard__no {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: #5b21b6;
    background: linear-gradient(135deg, #f3e8ff, #e0e7ff);
    transition: color .28s, background .28s;
}

.qfh-fcard:hover .qfh-fcard__no {
    color: #fff;
    background: linear-gradient(135deg, #a22dea, #5b5de2);
}

.qfh-fcard__title {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    color: #131a2e;
    margin: 0;
}

.qfh-fcard__body {
    font-size: 13.8px;
    line-height: 1.65;
    color: #667085;
    margin: 0;
}

/* ── bonus panel ────────────────────────────────────────────────────── */
.qfh-bonus {
    margin-top: 66px;
    padding: 1.5px;
    border-radius: 28px;
    background: linear-gradient(120deg, rgba(162, 45, 234, .55), rgba(91, 93, 226, .55));
    box-shadow: 0 40px 90px -55px rgba(109, 40, 217, .7);
}

.qfh-bonus__in {
    position: relative;
    overflow: hidden;
    padding: 40px 42px 44px;
    border-radius: 26.5px;
    background: linear-gradient(122deg, #fff 0%, #fdfbff 48%, #f7f2ff 100%);
}

.qfh-bonus__in::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    top: -300px;
    right: -150px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(162, 45, 234, .14), transparent 64%);
}

.qfh-bonus__title {
    position: relative;
    font-size: clamp(20px, 2.1vw, 26px);
    line-height: 1.22;
    letter-spacing: -.025em;
    font-weight: 800;
    color: #0b1020;
    margin: 0 0 10px;
}

.qfh-bonus__intro {
    position: relative;
    font-size: 15.5px;
    line-height: 1.65;
    color: #64748b;
    margin: 0 0 30px;
    max-width: 70ch;
}

.qfh-bgrid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 34px;
}

.qfh-bitem { display: flex; align-items: flex-start; gap: 14px; }

.qfh-bitem__ic {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-top: 2px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #34d399, #10b981);
    box-shadow: 0 10px 20px -12px rgba(16, 185, 129, .9);
}

.qfh-bitem__ic svg { width: 16px; height: 16px; }

.qfh-bitem__title {
    font-size: 15.5px;
    line-height: 1.3;
    font-weight: 700;
    color: #131a2e;
    margin: 0 0 5px;
}

.qfh-bitem__body {
    font-size: 14px;
    line-height: 1.66;
    color: #667085;
    margin: 0;
}

.qfh-inc__actions { margin-top: 44px; }

/* ── the catch ──────────────────────────────────────────────────────── */
/* The objection block. It is answered plainly and in the open rather than
   buried in the FAQ, so the cards are deliberately plainer than the feature
   grid — quiet paper, no gradients, nothing that reads as a sales device. */
.qfh-catch { padding: 78px 0 74px; }

.qfh-catch__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 44px;
}

.qfh-catch__card {
    position: relative;
    padding: 30px 28px 32px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #eceaf7;
    box-shadow: 0 14px 34px -26px rgba(15, 23, 42, .5);
}

.qfh-catch__no {
    display: block;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .18em;
    font-variant-numeric: tabular-nums;
    color: #a5a0c9;
    margin-bottom: 14px;
}

.qfh-catch__title {
    font-size: 17.5px;
    line-height: 1.3;
    letter-spacing: -.015em;
    font-weight: 750;
    color: #0b1020;
    margin: 0 0 10px;
}

.qfh-catch__body {
    font-size: 14.5px;
    line-height: 1.72;
    color: #667085;
    margin: 0;
}

/* ── faq ────────────────────────────────────────────────────────────── */
/* Answers stay open. An accordion would hide them from the first paint, and the
   FAQPage structured data on this page is generated from exactly these
   question/answer pairs — visible text and markup have to agree. */
.qfh-faq {
    padding: 74px 0 80px;
    background: linear-gradient(180deg, #faf9ff 0%, #fff 45%, #f9f8ff 100%);
    border-top: 1px solid rgba(124, 58, 237, .1);
    border-bottom: 1px solid rgba(124, 58, 237, .1);
}

.qfh-faq__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
}

.qfh-faq__card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 26px 26px 28px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #ecebf6;
    box-shadow: 0 12px 30px -26px rgba(15, 23, 42, .5);
    transition: border-color .28s, box-shadow .28s;
}

.qfh-faq__card:hover {
    border-color: #ddd8f7;
    box-shadow: 0 22px 44px -32px rgba(79, 70, 229, .55);
}

.qfh-faq__q {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    color: #5b21b6;
    background: linear-gradient(135deg, #f3e8ff, #e0e7ff);
}

.qfh-faq__question {
    font-size: 15.5px;
    line-height: 1.42;
    font-weight: 700;
    color: #131a2e;
    margin: 0 0 8px;
}

.qfh-faq__answer {
    font-size: 14px;
    line-height: 1.7;
    color: #667085;
    margin: 0;
}

/* ── closing call to action ─────────────────────────────────────────── */
/* Same material as the hero, so the page closes where it opened. */
.qfh-cta {
    position: relative;
    overflow: hidden;
    padding: 84px 0 90px;
    background: linear-gradient(180deg, #1b1547 0%, #14112f 54%, #0d0a24 100%);
}

.qfh-cta__inner {
    position: relative;
    z-index: 5;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.qfh-cta__title {
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.14;
    letter-spacing: -.032em;
    font-weight: 800;
    color: #fff;
    margin: 0 0 18px;
}

.qfh-cta__lede {
    font-size: clamp(15.5px, 1.2vw, 17.5px);
    line-height: 1.68;
    color: #a9b0d0;
    margin: 0 0 34px;
}

.qfh-cta__lede strong { font-weight: 650; color: #e6e8f6; }

.qfh-cta .qfh-actions { justify-content: center; }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .qfh-hero__grid { gap: 36px; }
    .qfh-hero__visual { max-width: 480px; }
    .qfh-intro__grid { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 40px; }
    .qfh-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qfh-catch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    /* Stacked, and the shot drops below the CTAs — on a phone the promise and
       the button have to come first. */
    .qfh-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .qfh-hero__copy { max-width: none; }
    .qfh-hero__visual { justify-self: center; max-width: 560px; }
    .qfh-intro__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .qfh-intro__aside { position: static; }
    .qfh-stats__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* With two columns the divider has to fall on the second cell of each row,
       not on every cell but the first. */
    .qfh-stat + .qfh-stat::before { display: none; }
    .qfh-stat:nth-child(2n)::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 22%;
        bottom: 22%;
        width: 1px;
        background: linear-gradient(180deg, transparent, rgba(124, 58, 237, .22), transparent);
    }
    .qfh-bgrid { grid-template-columns: minmax(0, 1fr); }
    .qfh-bonus__in { padding: 32px 28px 36px; }
    .qfh-faq__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .qfh-hero { padding: 58px 0 116px; }
    .qfh-hero__title { max-width: none; }
    .qfh-hero__grid { gap: 36px; }
    .qfh-shot { padding: 7px; border-radius: 20px; }
    .qfh-shot__img { border-radius: 14px; }
    .qfh-btn { width: 100%; }
    .qfh-actions { gap: 12px; }

    .qfh-statwrap { margin-top: -74px; }
    .qfh-stat { padding: 24px 16px; }

    .qfh-intro { padding: 48px 0 10px; }
    .qfh-inc { padding: 58px 0 66px; }
    .qfh-catch { padding: 58px 0 56px; }
    .qfh-faq { padding: 58px 0 62px; }
    .qfh-cta { padding: 64px 0 70px; }

    .qfh-inc__head { margin-bottom: 40px; }
    .qfh-group { margin-bottom: 44px; }
    .qfh-group__head { gap: 14px; }
    .qfh-fgrid { grid-template-columns: minmax(0, 1fr); }
    .qfh-catch__grid { grid-template-columns: minmax(0, 1fr); }
    .qfh-bonus { margin-top: 48px; }
    .qfh-inc__actions { margin-top: 34px; }
}

@media (max-width: 480px) {
    .qfh-stats__in { grid-template-columns: minmax(0, 1fr); }
    .qfh-stat:nth-child(2n)::before { display: none; }
    .qfh-stat + .qfh-stat {
        border-top: 1px solid rgba(124, 58, 237, .14);
    }
}

@media (prefers-reduced-motion: reduce) {
    .qfh-aurora i,
    .qfh-eyebrow__pip,
    .qfh-badge__dot,
    .qfh-shot {
        animation: none !important;
    }

    .qfh-btn,
    .qfh-fcard,
    .qfh-fcard::before,
    .qfh-fcard__no,
    .qfh-faq__card {
        transition: none;
    }

    .qfh-btn:hover,
    .qfh-fcard:hover {
        transform: none;
    }
}