/* Home page design layer.
 *
 * The presentation layer for Components/Pages/Home.razor. Global CSS, linked
 * from App.razor — it was Blazor-scoped until the stylesheets were consolidated
 * under wwwroot/css. Two consequences worth knowing before editing:
 *
 * 1. Nothing confines these rules to the home page any more, so every selector
 *    is qh- prefixed or a descendant of one.
 * 2. @keyframes names are global too. Hence the qh- prefix on every one of
 *    them, so they cannot collide with the compiled Tailwind bundle.
 *
 * These rules are unlayered and Tailwind v4's utilities live inside @layer, so
 * they win regardless of specificity. Keep every selector class-based and
 * prefixed; a bare element selector here would leak into the rest of the page
 * the same way the deleted css/site.css did.
 *
 * The hero is light — dark copy on white — and the dark surfaces are the console
 * on the right and the logo bar underneath it, which is pulled up over the
 * hero's lower edge so the three read as a single banner.
 *
 * Below the hero the same rhythm continues: light sections carrying white cards,
 * with two dark surfaces — the plans band and the closing call to action — spaced
 * far enough apart to punctuate rather than compete. One accent ramp throughout,
 * #4f46e5 → #7c3aed, the same one the hero's buttons and badge use. Section
 * chrome (.qh-sec, .qh-eyebrow, .qh-h2, .qh-lede, .qh-grid) is shared so every
 * band lines up on the same vertical scale.
 *
 * A few classes on this page's markup still come from the compiled Tailwind
 * bundle — the per-feature chip colours, the per-module gradient pair, and the
 * .startFreeTrial/.bookADemo buttons. The rules here deliberately leave those
 * properties alone and only handle geometry, since unlayered CSS would otherwise
 * beat the utilities and flatten every card to one colour.
 */

.qh-page {
    position: relative;
    min-height: 100vh;
    background: #fff;
}

.qh-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #fbfaff 46%, #f4f2fe 100%);
    color: #0f172a;
    padding: 76px 0 96px;
}

/* ── ambient background ─────────────────────────────────────────────── */
.qh-hero__aurora,
.qh-hero__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

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

.qh-hero__aurora i:nth-child(1) {
    width: 760px;
    height: 760px;
    top: -420px;
    right: -240px;
    background: radial-gradient(circle, rgba(129, 140, 248, .26), transparent 62%);
}

.qh-hero__aurora i:nth-child(2) {
    width: 560px;
    height: 560px;
    bottom: -320px;
    left: -220px;
    animation-delay: -8s;
    background: radial-gradient(circle, rgba(167, 139, 250, .24), transparent 62%);
}

.qh-hero__aurora i:nth-child(3) {
    width: 480px;
    height: 480px;
    top: 30%;
    left: 46%;
    animation-delay: -15s;
    background: radial-gradient(circle, rgba(244, 114, 182, .10), transparent 62%);
}

/* The violet sweep that curves out of the bottom-left corner: an oversized
   ellipse clipped by the section's overflow, so only its upper-right arc shows.
   Kept low and wide so the curve stays in the corner instead of washing the
   whole panel. */
.qh-hero__wave {
    position: absolute;
    left: -6%;
    bottom: -184px;      /* px, not %, so the arc keeps its height whatever the
                            hero's own height turns out to be — a flat sweep of
                            about 90px, well clear of the reassurance tiles */
    width: min(58%, 700px);
    aspect-ratio: 2.55;
    border-radius: 50%;
    background: linear-gradient(150deg, rgba(124, 58, 237, .34), rgba(99, 102, 241, .24) 58%, rgba(129, 140, 248, .16));
    filter: blur(1px);
}

@keyframes qh-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-50px, 40px) scale(1.09); }
    66%      { transform: translate(40px, -30px) scale(.94); }
}

/* Fine dot field rather than the old grid — quieter against a light surface. */
.qh-hero__grid {
    opacity: .55;
    background-image: radial-gradient(circle at 1px 1px, rgba(79, 70, 229, .26) 1.1px, transparent 0);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 26% 22% at 7% 74%, #000, transparent 70%);
    mask-image: radial-gradient(ellipse 26% 22% at 7% 74%, #000, transparent 70%);
}

.qh-hero__inner {
    position: relative;
    z-index: 5;
}

.qh-hero__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr);
    gap: 56px;
    align-items: center;
}

/* ── copy ───────────────────────────────────────────────────────────── */
.qh-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 17px 8px 9px;
    margin-bottom: 30px;
    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);
}

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

@keyframes qh-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); }
}

/* Sized so "Smarter Decisions." holds one line in the left column at the
   container's widest — the two-line headline is the whole shape of the hero. */
.qh-hero__title {
    font-size: clamp(34px, 3.9vw, 56px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 800;
    color: #0b1020;
    margin: 0 0 22px;
}

.qh-hero__accent {
    display: block;
    background: linear-gradient(96deg, #4f46e5 0%, #7c3aed 45%, #ec4899 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.qh-hero__lede {
    font-size: clamp(15.5px, 1.2vw, 17.5px);
    line-height: 1.6;
    color: #64748b;
    max-width: 420px;
    margin: 0;
}

.qh-hero__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 36px;
}

.qh-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 17px 30px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 650;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 20px 40px -16px rgba(79, 70, 229, .85);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}

.qh-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 28px 54px -16px rgba(79, 70, 229, .95);
}

.qh-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%);
    transform: translateX(-120%);
    animation: qh-sheen 5s ease-in-out infinite;
}

@keyframes qh-sheen {
    0%, 72%   { transform: translateX(-120%); }
    88%, 100% { transform: translateX(120%); }
}

/* Secondary action is a white pill on the light hero, not a bare text link. */
.qh-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 26px 15px 15px;
    border-radius: 14px;
    font-size: 15.5px;
    font-weight: 650;
    color: #1e293b;
    background: #fff;
    border: 1px solid #e6e6f2;
    box-shadow: 0 10px 26px -18px rgba(15, 23, 42, .5);
    transition: color .2s, border-color .25s, box-shadow .25s, transform .25s cubic-bezier(.2, .8, .2, 1);
}

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

.qh-btn-ghost__circ {
    width: 32px;
    height: 32px;
    border-radius: 99px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 8px 18px -8px rgba(79, 70, 229, .9);
    transition: transform .25s;
}

.qh-btn-ghost:hover .qh-btn-ghost__circ { transform: scale(1.06); }

/* ── reassurance tiles ──────────────────────────────────────────────── */
.qh-hero__micro {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 34px;
    margin: 38px 0 0;
    padding: 0;
    list-style: none;
}

.qh-micro {
    display: flex;
    align-items: center;
    gap: 11px;
}

.qh-micro__ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #4f46e5;
    background: #eeecfd;
    border: 1px solid rgba(79, 70, 229, .14);
}

.qh-micro__tx {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    color: #64748b;
    max-width: 124px;
}

.qh-micro__tx strong {
    display: block;
    font-weight: 650;
    color: #334155;
}

/* ── console ────────────────────────────────────────────────────────── */
.qh-console {
    position: relative;
    border-radius: 26px;
    padding: 1px;
    background: linear-gradient(150deg, rgba(167, 139, 250, .85), rgba(79, 70, 229, .35) 38%, rgba(148, 163, 184, .18) 72%);
    box-shadow: 0 46px 110px -34px rgba(79, 70, 229, .6), 0 8px 24px -14px rgba(15, 23, 42, .3);
}

.qh-console__in {
    border-radius: 25px;
    background: linear-gradient(180deg, #14142b, #0a0a18);
    overflow: hidden;
}

.qh-console__bar {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.qh-console__dot {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 6px 16px -8px rgba(124, 58, 237, .95);
}

.qh-console__title {
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
}

.qh-console__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, .3);
    background: rgba(16, 185, 129, .1);
    padding: 5px 11px;
    border-radius: 99px;
}

.qh-console__live i {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: #34d399;
    animation: qh-blip 2.2s ease-in-out infinite;
}

@keyframes qh-blip { 50% { opacity: .25; } }

/* Every scene is in the served HTML. Without scripting the first one shows,
   fully written out — the panel is never blank and the copy is always in the
   markup a crawler sees. home-hero.js marks the console .is-enhanced, and only
   then does the one-at-a-time cycling take over.

   Hide the SECOND scene onward rather than "all but :first-of-type" — the first
   div inside .qh-console__in is the title bar, so :first-of-type never matched a
   scene and the panel came up empty whenever the script had not run. */
.qh-scene ~ .qh-scene { display: none; }
.qh-console.is-enhanced .qh-scene { display: none; }
.qh-console.is-enhanced .qh-scene.is-active { display: block; }

.qh-ask {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: linear-gradient(90deg, rgba(79, 70, 229, .16), transparent);
}

.qh-ask__spark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #4f46e5, #8b5cf6);
    box-shadow: 0 6px 18px -6px rgba(91, 91, 245, .9);
}

.qh-ask__q {
    font-size: 16.5px;
    font-weight: 500;
    color: #e2e8f0;
    min-height: 22px;
}

.qh-caret {
    display: none;
    width: 2px;
    height: 19px;
    background: #a5b4fc;
    margin-left: 2px;
    vertical-align: -3px;
    animation: qh-blink 1.05s steps(1) infinite;
}

/* the caret only makes sense while JS is doing the typing */
.qh-console.is-enhanced .qh-caret { display: inline-block; }

@keyframes qh-blink { 50% { opacity: 0; } }

.qh-answer {
    padding: 20px 20px 8px;
    display: grid;
    gap: 10px;
    min-height: 244px;
    align-content: start;
}

.qh-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .07);
}

.qh-console.is-enhanced .qh-scene.is-active .qh-row,
.qh-console.is-enhanced .qh-scene.is-active .qh-summary {
    opacity: 0;
    transform: translateY(10px);
    animation: qh-rise .5s cubic-bezier(.2, .8, .2, 1) forwards;
}

@keyframes qh-rise { to { opacity: 1; transform: none; } }

.qh-row:nth-child(1) { animation-delay: 90ms; }
.qh-row:nth-child(2) { animation-delay: 220ms; }
.qh-row:nth-child(3) { animation-delay: 350ms; }
.qh-summary         { animation-delay: 520ms; }

.qh-row__av {
    width: 36px;
    height: 36px;
    border-radius: 99px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
}

.qh-row__name {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: #e8edf6;
}

.qh-row__meta {
    display: block;
    font-size: 12px;
    color: #7c8aa5;
    margin-top: 2px;
}

.qh-row__tail {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 99px;
    white-space: nowrap;
}

.qh-row__tail.is-ok {
    color: #6ee7b7;
    background: rgba(16, 185, 129, .13);
    border: 1px solid rgba(16, 185, 129, .24);
}

.qh-row__tail.is-warn {
    color: #fcd34d;
    background: rgba(245, 158, 11, .13);
    border: 1px solid rgba(245, 158, 11, .24);
}

.qh-row__tail.is-info {
    color: #93c5fd;
    background: rgba(59, 130, 246, .13);
    border: 1px solid rgba(59, 130, 246, .24);
}

.qh-summary {
    display: flex;
    gap: 11px;
    padding: 15px 16px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #c7d2fe;
    background: linear-gradient(100deg, rgba(79, 70, 229, .2), rgba(139, 92, 246, .09));
    border: 1px solid rgba(139, 92, 246, .26);
}

.qh-console__chips {
    display: flex;
    gap: 8px;
    padding: 12px 20px 20px;
    flex-wrap: wrap;
}

.qh-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .035);
    padding: 6px 10px;
    border-radius: 99px;
}

/* ── trusted-by bar ─────────────────────────────────────────────────── */
.qh-trustbar-wrap {
    position: relative;
    z-index: 6;
    margin-top: -46px;      /* rides up over the hero's lower edge; the hero's own
                               bottom padding stands on its own if this section is
                               switched off or has no logos */
    padding: 56px 0 60px;
    /* Open band, no card: the wash carries the hero's violet down and lets go of
       it before the next section, so the logos sit on air rather than in a box. */
    background: radial-gradient(90% 120% at 50% 0%, #efeafe, #fbfbfe 58%, #fff);
}

.qh-trustbar {
    position: relative;
}

.qh-trustbar__label {
    position: relative;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 34px;
    font-size: 14.5px;
    line-height: 1.65;
    color: #64748b;
}

.qh-trustbar__label em {
    display: block;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #7c3aed;
}

.qh-trustbar__label strong {
    display: block;
    margin: 14px 0 10px;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: #0f172a;
}

.qh-trustbar__label > span {
    display: block;
    max-width: 720px;
    margin: 0 auto;
}

/* Fades the marquee into the band's edges instead of cutting it dead. */
.qh-rail {
    position: relative;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* The track carries the rail twice, so -50% lands on an identical frame whatever
   the logo count is. Hovering anywhere on the row parks it. */
@keyframes qh-rail-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.qh-rail__track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: qh-rail-scroll 72s linear infinite; /* overridden inline per count */
}

.qh-rail:hover .qh-rail__track {
    animation-play-state: paused;
}

/* Hairline between logos, and a fixed row height they all centre on: the source
   images vary wildly in aspect ratio, and a shared baseline is what stops the
   row reading as a jumble. Colours are left untouched. */
.qh-rail__item {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    height: 56px;
    padding: 0 34px;
    border-right: 1px solid rgba(15, 23, 42, .09);
}

.qh-rail__item img {
    max-height: 36px;
    max-width: 150px;
    object-fit: contain;
    transition: transform .25s ease;
}

.qh-rail__item:hover img {
    transform: scale(1.08);
}

.qh-trustbar__proof {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 34px;
}

.qh-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 99px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 6px 14px -12px rgba(15, 23, 42, .5);
    font-size: 12.5px;
    color: #334155;
}

.qh-pill b {
    color: #4338ca;
}

/* The rail is decoration, not content — hold it still for anyone who asked the
   OS to cut motion. */
@media (prefers-reduced-motion: reduce) {
    .qh-rail__track { animation: none; }
    .qh-rail__item:hover img { transform: none; }
}

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    /* minmax(0, 1fr), not 1fr: a bare 1fr floors the track at the console's
       min-content width, which is wider than a phone and pushed the whole hero
       into a horizontal scroll. */
    .qh-hero__cols { grid-template-columns: minmax(0, 1fr); gap: 52px; }
    .qh-hero__lede { max-width: none; }
}

@media (max-width: 860px) {
    .qh-trustbar-wrap { padding: 42px 0 46px; }
    .qh-trustbar__label { margin-bottom: 26px; }
    .qh-rail__item { height: 46px; padding: 0 22px; }
    .qh-rail__item img { max-height: 30px; max-width: 118px; }
    .qh-trustbar__proof { margin-top: 26px; }
}

@media (max-width: 760px) {
    .qh-hero { padding: 56px 0 76px; }
    .qh-hero__title { font-size: clamp(30px, 7.6vw, 42px); }
    .qh-ask__q { font-size: 15px; }
    .qh-hero__micro { gap: 14px 22px; }
    .qh-hero__wave { bottom: -150px; width: 96%; }
    .qh-answer { min-height: 0; }
    .qh-trustbar-wrap { margin-top: -34px; padding: 36px 0 40px; }
}

/* ════════════════════════════════════════════════════════════════════════
   PAGE SECTIONS — everything below the hero and its logo bar.
   ════════════════════════════════════════════════════════════════════════ */

/* ── section shell ──────────────────────────────────────────────────── */
.qh-sec {
    position: relative;
    overflow: hidden;
    padding: 104px 0;
}

/* Soft colour wash. Two blurred discs rather than a flat gradient, so the
   light sections have somewhere for the eye to rest without a hard edge. */
.qh-sec__aura {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.qh-sec__aura i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(90px);
}

.qh-sec__aura i:nth-child(1) {
    width: min(70vw, 560px);
    height: min(60vw, 480px);
    top: -180px;
    right: -140px;
    background: radial-gradient(circle, rgba(129, 140, 248, .20), transparent 64%);
}

.qh-sec__aura i:nth-child(2) {
    width: min(60vw, 440px);
    height: min(52vw, 400px);
    bottom: -200px;
    left: -160px;
    background: radial-gradient(circle, rgba(167, 139, 250, .16), transparent 64%);
}

/* Same dot field as the hero, faded out at the edges so it never meets a
   section boundary as a visible rectangle. */
.qh-sec__dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image: radial-gradient(circle at 1px 1px, rgba(79, 70, 229, .22) 1.1px, transparent 0);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 42%, #000, transparent 72%);
    mask-image: radial-gradient(ellipse 62% 58% at 50% 42%, #000, transparent 72%);
}

.qh-sec .boxed-container {
    position: relative;
    z-index: 2;
}

.qh-sec__head {
    max-width: 720px;
    margin: 0 auto 60px;
    text-align: center;
}

.qh-sec__head--flush { margin-bottom: 0; }

/* ── shared type ────────────────────────────────────────────────────── */
.qh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: #5b21b6;
    background: rgba(124, 58, 237, .07);
    border: 1px solid rgba(124, 58, 237, .16);
}

.qh-eyebrow--sky {
    color: #0369a1;
    background: rgba(14, 165, 233, .08);
    border-color: rgba(14, 165, 233, .2);
}

.qh-eyebrow--dark {
    color: #c4b5fd;
    background: rgba(139, 92, 246, .14);
    border-color: rgba(139, 92, 246, .3);
}

.qh-h2 {
    font-size: clamp(28px, 3.1vw, 42px);
    line-height: 1.14;
    letter-spacing: -.032em;
    font-weight: 800;
    color: #0b1020;
    margin: 0 0 18px;
}

.qh-h2--dark { color: #fff; }

.qh-lede {
    font-size: clamp(15.5px, 1.15vw, 17.5px);
    line-height: 1.65;
    color: #64748b;
    margin: 0;
}

.qh-lede--dark { color: #94a3b8; }

.qh-h2--left,
.qh-lede--left { text-align: left; }

.qh-lede--left { max-width: 560px; }

/* ── shared card grid ───────────────────────────────────────────────── */
.qh-grid {
    display: grid;
    gap: 24px;
}

.qh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* One white card, used by the trust badges. The top hairline is the accent
   ramp, revealed on hover so a grid at rest stays quiet. */
.qh-card {
    position: relative;
    padding: 30px 28px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ecebf5;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -32px rgba(15, 23, 42, .5);
    overflow: hidden;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s;
}

.qh-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed 55%, #ec4899);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.qh-card:hover {
    transform: translateY(-4px);
    border-color: #ddd9f7;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 34px 60px -34px rgba(79, 70, 229, .45);
}

.qh-card:hover::before { transform: scaleX(1); }

/* The badge icons are emoji from the content document, so this is a type
   size rather than a coloured tile. */
.qh-card__glyph {
    display: block;
    font-size: 30px;
    line-height: 1;
    margin-bottom: 18px;
}

.qh-card__title {
    font-size: 17px;
    font-weight: 700;
    color: #0b1020;
    margin: 0 0 9px;
    letter-spacing: -.01em;
}

.qh-card__body {
    font-size: 14px;
    line-height: 1.65;
    color: #64748b;
    margin: 0;
}

/* ── devices ────────────────────────────────────────────────────────── */
.qh-devices {
    background: linear-gradient(180deg, #fff, #fbfaff 55%, #fff);
}

.qh-devices__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 64px;
    align-items: center;
}

.qh-featlist {
    display: grid;
    gap: 10px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

/* Each reason is its own hoverable row rather than a bullet — same idea as
   the hero's reassurance tiles, one step denser. */
.qh-feat {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 14px 16px;
    border-radius: 15px;
    border: 1px solid transparent;
    transition: background .25s, border-color .25s, transform .25s cubic-bezier(.2, .8, .2, 1);
}

.qh-feat:hover {
    transform: translateX(3px);
    background: #fff;
    border-color: #ecebf5;
}

/* Geometry only — the background and text colour arrive on the same element
   from the feature's own chip classes. */
.qh-feat__ic {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

.qh-feat:hover .qh-feat__ic { transform: scale(1.06); }

.qh-feat__tx {
    font-size: 14.5px;
    line-height: 1.6;
    color: #64748b;
    padding-top: 2px;
}

.qh-feat__tx strong {
    font-weight: 700;
    color: #0f172a;
}

/* Browser frame around the video poster. */
.qh-window {
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(150deg, rgba(167, 139, 250, .7), rgba(79, 70, 229, .28) 40%, rgba(148, 163, 184, .16) 76%);
    box-shadow: 0 44px 96px -40px rgba(79, 70, 229, .55), 0 8px 22px -14px rgba(15, 23, 42, .28);
}

.qh-window__in {
    border-radius: 23px;
    background: #fff;
    overflow: hidden;
}

.qh-window__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid #eef0f5;
    background: #fafbfd;
}

.qh-window__tl {
    width: 10px;
    height: 10px;
    border-radius: 99px;
    flex: 0 0 auto;
}

.qh-window__tl.is-r { background: #fb7185; }
.qh-window__tl.is-a { background: #fbbf24; }
.qh-window__tl.is-g { background: #34d399; }

.qh-window__url {
    margin-left: 10px;
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
}

.qh-window__screen {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
}

.qh-play {
    position: absolute;
    inset: 0;
    display: block;
}

.qh-play__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.qh-play:hover .qh-play__poster { transform: scale(1.04); }

.qh-play__veil {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(9, 9, 20, .3), rgba(9, 9, 20, .48));
    transition: background .25s;
}

.qh-play:hover .qh-play__veil { background: linear-gradient(180deg, rgba(9, 9, 20, .22), rgba(9, 9, 20, .4)); }

.qh-play__btn {
    width: 66px;
    height: 66px;
    border-radius: 99px;
    display: grid;
    place-items: center;
    padding-left: 4px;       /* optical centring of the triangle */
    color: #4f46e5;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 40px -16px rgba(9, 9, 20, .8);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), background .2s;
}

.qh-play:hover .qh-play__btn {
    transform: scale(1.08);
    background: #fff;
}

/* ── security / trust badges ────────────────────────────────────────── */
.qh-security { background: #fff; }

/* ── plans (dark band) ──────────────────────────────────────────────── */
.qh-plans {
    background: linear-gradient(180deg, #0b0b14, #0e0e1c 50%, #0b0b14);
}

.qh-plans__aura {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.qh-plans__aura i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(110px);
}

.qh-plans__aura i:nth-child(1) {
    width: min(80vw, 680px);
    height: min(60vw, 480px);
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(99, 102, 241, .34), transparent 64%);
}

.qh-plans__aura i:nth-child(2) {
    width: min(64vw, 520px);
    height: min(54vw, 420px);
    bottom: -240px;
    right: -120px;
    background: radial-gradient(circle, rgba(168, 85, 247, .2), transparent 66%);
}

.qh-plans__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 74%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 74%);
}

.qh-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 30px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .09);
    backdrop-filter: blur(6px);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s;
}

.qh-plan:hover {
    transform: translateY(-5px);
    border-color: rgba(167, 139, 250, .42);
    box-shadow: 0 40px 80px -40px rgba(124, 58, 237, .9);
}

.qh-plan__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.qh-plan.is-featured {
    background: linear-gradient(180deg, rgba(91, 91, 245, .17), rgba(139, 92, 246, .045));
    border-color: rgba(139, 92, 246, .5);
    box-shadow: 0 34px 84px -36px rgba(91, 91, 245, .9);
}

.qh-plan__glyph {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
}

.qh-plan.is-featured .qh-plan__glyph {
    border-color: transparent;
    background: linear-gradient(135deg, #5b5bf5, #8b5cf6);
    box-shadow: 0 10px 24px -10px rgba(91, 91, 245, .95);
}

/* The four cells stand for "how many modules are switched on" — one lit for
   Free, all four for QHRM and for Outsourced HR, which runs the same complete
   platform on the customer's behalf. The count comes from the document's
   modulesLit. */
.qh-plan__cell { fill: rgba(255, 255, 255, .16); }
.qh-plan__cell.is-on { fill: #a5b4fc; }
.qh-plan.is-featured .qh-plan__cell { fill: rgba(255, 255, 255, .34); }
.qh-plan.is-featured .qh-plan__cell.is-on { fill: #fff; }

.qh-plan__badge {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #ddd6fe;
    background: rgba(124, 58, 237, .24);
    border: 1px solid rgba(167, 139, 250, .36);
}

.qh-plan.is-featured .qh-plan__badge {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #5b5bf5, #8b5cf6);
    box-shadow: 0 10px 26px -10px rgba(91, 91, 245, .95);
}

.qh-plan__name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: #fff;
    margin: 0 0 5px;
}

.qh-plan__segment {
    font-size: 13.5px;
    font-weight: 600;
    color: #a5b4fc;
    margin: 0 0 4px;
}

.qh-plan__range {
    font-size: 13px;
    color: #7c8aa5;
    margin: 0 0 14px;
}

.qh-plan__desc {
    font-size: 14px;
    line-height: 1.65;
    color: #94a3b8;
    margin: 0 0 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* ── the part that was not clickable ────────────────────────────────── */
/* The feature list used to sit between the description and this, carrying
   flex-grow and pushing the button to the bottom of the card. The cards show
   only the plan's head now, so the footer does that job itself — margin-top:auto
   keeps the three buttons on one line however long the descriptions run. The
   description's own bottom border is the card's single divider; a border here
   too would draw a second rule across an otherwise empty gap. */
.qh-plan__foot {
    margin-top: auto;
    padding-top: 4px;
}

.qh-plan__price {
    margin: 0 0 14px;
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
}

.qh-plan__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 18px;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 650;
    color: #e2e8f0;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), background-color .22s, border-color .22s, box-shadow .22s, color .22s;
}

.qh-plan__cta:hover {
    transform: translateY(-2px);
    color: #fff;
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .3);
}

.qh-plan__cta:focus-visible {
    outline: 2px solid #a5b4fc;
    outline-offset: 3px;
}

.qh-plan.is-featured .qh-plan__cta {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #5b5bf5, #8b5cf6);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 18px 40px -16px rgba(91, 91, 245, .9);
}

.qh-plan.is-featured .qh-plan__cta:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 26px 50px -16px rgba(91, 91, 245, 1);
}

.qh-plan__arrow { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.qh-plan__cta:hover .qh-plan__arrow { transform: translateX(3px); }

.qh-plans__note {
    margin: 44px 0 0;
    text-align: center;
    font-size: 13.5px;
    color: #7c8aa5;
}

/* ── modules ────────────────────────────────────────────────────────── */
.qh-modules {
    background: linear-gradient(180deg, #fbfaff, #fff 46%, #fbfaff);
    border-bottom: 1px solid #eeecf8;
}

.qh-mod {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 26px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ecebf5;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -32px rgba(15, 23, 42, .5);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s;
}

.qh-mod:hover {
    transform: translateY(-5px);
    border-color: #d9d4f6;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 36px 64px -34px rgba(79, 70, 229, .5);
}

/* Geometry only — the gradient pair is supplied per module by the utilities
   already on this element. */
.qh-mod__ic {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 24px;
    line-height: 1;
    margin-bottom: 20px;
    box-shadow: 0 14px 26px -16px rgba(15, 23, 42, .6);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.qh-mod:hover .qh-mod__ic { transform: scale(1.06) rotate(-3deg); }

.qh-mod__tag {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6d28d9;
    margin: 0 0 8px;
}

.qh-mod__title {
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -.012em;
    color: #0b1020;
    margin: 0 0 10px;
    transition: color .2s;
}

.qh-mod:hover .qh-mod__title { color: #4f46e5; }

.qh-mod__body {
    font-size: 13.5px;
    line-height: 1.65;
    color: #64748b;
    margin: 0;
    flex-grow: 1;
}

.qh-mod__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-size: 13.5px;
    font-weight: 650;
    color: #4f46e5;
}

.qh-mod__cta svg { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }

.qh-mod:hover .qh-mod__cta svg { transform: translateX(4px); }

/* ── how it works ───────────────────────────────────────────────────── */
.qh-how { background: #fff; }

.qh-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

/* The rule that ties the three steps together. It is drawn behind the cards
   and stops short of both outer edges, so it reads as a track rather than a
   border; the one-column layout switches it off. */
.qh-steps::before {
    content: "";
    position: absolute;
    top: 62px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(124, 58, 237, .3) 0 7px, transparent 7px 15px);
}

.qh-step {
    position: relative;
    padding: 32px 28px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ecebf5;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 20px 44px -34px rgba(15, 23, 42, .5);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s;
}

.qh-step:hover {
    transform: translateY(-4px);
    border-color: #ddd9f7;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 34px 60px -34px rgba(79, 70, 229, .45);
}

.qh-step__top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.qh-step__num {
    width: 46px;
    height: 46px;
    border-radius: 99px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 14px 28px -14px rgba(79, 70, 229, .95), 0 0 0 6px #fff;
}

.qh-step__glyph {
    font-size: 28px;
    line-height: 1;
}

.qh-step__title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.012em;
    color: #0b1020;
    margin: 0 0 10px;
}

.qh-step__body {
    font-size: 14px;
    line-height: 1.65;
    color: #64748b;
    margin: 0;
}

/* ── custom sections ────────────────────────────────────────────────── */
.qh-custom { background: #fff; }

.qh-custom__img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 44px;
    border-radius: 22px;
    border: 1px solid #ecebf5;
    box-shadow: 0 40px 80px -44px rgba(15, 23, 42, .55);
}

/* ── closing call to action ─────────────────────────────────────────── */
.qh-cta {
    background: linear-gradient(180deg, #fff, #fbfaff);
}

.qh-cta__panel {
    position: relative;
    overflow: hidden;
    padding: 76px 40px;
    border-radius: 30px;
    background: linear-gradient(140deg, #14142b, #0d0d1c 56%, #171733);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 60px 120px -50px rgba(15, 23, 42, .8);
}

.qh-cta__aura {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.qh-cta__aura i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(100px);
}

.qh-cta__aura i:nth-child(1) {
    width: min(70vw, 520px);
    height: min(50vw, 380px);
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(99, 102, 241, .42), transparent 64%);
}

.qh-cta__aura i:nth-child(2) {
    width: min(56vw, 420px);
    height: min(46vw, 340px);
    bottom: -200px;
    right: -100px;
    background: radial-gradient(circle, rgba(168, 85, 247, .26), transparent 66%);
}

.qh-cta__in {
    position: relative;
    z-index: 2;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.qh-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 34px;
}

.qh-cta__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 34px;
}

.qh-cta__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 999px;
    font-size: 13px;
    color: #cbd5e1;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
}

.qh-cta__badge em {
    font-style: normal;
    color: #34d399;
}

/* ── responsive: sections ───────────────────────────────────────────── */
@media (max-width: 1180px) {
    .qh-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
    .qh-devices__cols { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .qh-lede--left { max-width: none; }
}

@media (max-width: 900px) {
    .qh-sec { padding: 80px 0; }
    .qh-sec__head { margin-bottom: 44px; }
    .qh-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qh-steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .qh-steps::before { display: none; }
    .qh-cta__panel { padding: 56px 28px; }
}

@media (max-width: 640px) {
    .qh-sec { padding: 64px 0; }
    .qh-grid { gap: 18px; }
    .qh-grid--3,
    .qh-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .qh-plan { padding: 26px 22px; }
    .qh-cta__panel { padding: 46px 20px; border-radius: 24px; }
    .qh-cta__actions { flex-direction: column; }
    .qh-cta__actions > * { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .qh-hero__aurora i,
    .qh-badge__pip,
    .qh-console__live i,
    .qh-btn::after,
    .qh-caret,
    .qh-row,
    .qh-summary {
        animation: none !important;
    }

    .qh-console.is-enhanced .qh-scene.is-active .qh-row,
    .qh-console.is-enhanced .qh-scene.is-active .qh-summary {
        opacity: 1;
        transform: none;
    }

    /* Hover lifts and the poster zoom are motion too — leave the colour and
       shadow changes, drop the movement. */
    .qh-card,
    .qh-feat,
    .qh-feat__ic,
    .qh-play__poster,
    .qh-play__btn,
    .qh-plan,
    .qh-plan__cta,
    .qh-plan__arrow,
    .qh-mod,
    .qh-mod__ic,
    .qh-mod__cta svg,
    .qh-step {
        transition-property: box-shadow, border-color, background, color;
    }

    .qh-card:hover,
    .qh-feat:hover,
    .qh-plan:hover,
    .qh-mod:hover,
    .qh-step:hover,
    .qh-feat:hover .qh-feat__ic,
    .qh-mod:hover .qh-mod__ic,
    .qh-play:hover .qh-play__poster,
    .qh-play:hover .qh-play__btn,
    .qh-mod:hover .qh-mod__cta svg {
        transform: none;
    }
}


.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
}

.video-card {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    background: #000;
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-thumbnail {
    position: relative;
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

.video-thumbnail img {
    width: 100%;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.25);
    transition: .3s;
}

.video-thumbnail:hover .play-overlay {
    background: rgba(0,0,0,.4);
}

.play-button {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34px;
    color: #000;
    transition: .3s;
}

.video-thumbnail:hover .play-button {
    transform: scale(1.08);
}






.video-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:24px;
}

.video-card{
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
    background:#000;
}

.thumbnail{
    position:relative;
    width:100%;
}

.thumbnail img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    display:block;
}

.play-btn{
    position:absolute;
    top:18px;
    left:18px;

    width:78px;
    height:78px;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.9);

    display:flex;
    justify-content:center;
    align-items:center;

    cursor:pointer;

    box-shadow:0 10px 30px rgba(0,0,0,.2);

    transition:.3s;
}

.play-btn:hover{
    transform:scale(1.08);
    background:#fff;
}

.play-btn svg{
    width:34px;
    height:34px;
    fill:#000;
    margin-left:5px;
}

.video-wrapper{
    position:relative;
    width:100%;
    padding-top:56.25%;
}

.video-wrapper iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}