/* =========================================================
   DEVOPS EXPERTS INDIA - HOME PAGE
========================================================= */


/* =========================================================
   1. TOKENS

   Consumed from the header (do not redefine):
     --dx-header-h   live header height, kept in sync by the
                     header script; 74px desktop / 60px base
                     are the no-JS fallbacks
     --dx-ink        --dx-ink-soft   --dx-ink-muted
     --dx-surface    --dx-surface-soft
     --dx-line       --dx-ease
========================================================= */

.hp {
   

    --hp-blue: #2762F6;
    --hp-indigo: #6D18EF;

    --hp-gradient: linear-gradient(93.06deg, var(--hp-blue) 38.02%, var(--hp-indigo) 80.46%);

    --hp-blue-soft: #EEF3FF;

    /* ---- Ink -------------------------------------------- */

    --hp-heading: #2E3138;
    --hp-body: #5A6070;
    --hp-on-dark: #ffffff;
    --hp-on-dark-soft: rgba(255, 255, 255, 0.82);
    --hp-ink-faint: #9294A5;

    /* ---- Surfaces --------------------------------------- */

    --hp-surface: #ffffff;
    --hp-card: #F7F8FA;
    --hp-card-line: #eaeaea;

    /* ---- Elevation -------------------------------------- */

    --hp-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.05);
    --hp-shadow-md: 0 2px 6px rgba(16, 24, 40, 0.05), 0 12px 28px rgba(16, 24, 40, 0.07);
    --hp-shadow-lg: 0 18px 44px -22px rgba(16, 17, 48, 0.32);

    /* ---- Radius ----------------------------------------- */

    --hp-radius-sm: 8px;
    --hp-radius: 12px;
    --hp-radius-lg: 16px;

    /* ---- Motion ----------------------------------------- */

    --hp-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --hp-dur: 0.28s;

    /* ---- Section rhythm ---------------------------------
       Requirement: desktop caps at 60px, mobile at 40px.
       Sections pick a step, they do not invent values. The
       responsive block rewrites these three at 991px.
    --------------------------------------------------- */

    --hp-pad-sm: 40px;
    --hp-pad: 55px;
    --hp-pad-lg: 60px;
}


/* =========================================================
   2. PAGE BASE

   Typography colour, leading and tracking only. Font sizes
   stay with each section so hierarchy is readable in one
   place per component.
========================================================= */

.hp {
    font-family: 'Lexend Deca', sans-serif;
    color: var(--hp-body);
}

.hp :where(h1, h2, h3, h4) {
    color: var(--hp-heading);
    line-height: 1.22;
    letter-spacing: -0.01em;
    margin: 0;
}

.hp :where(p) {
    line-height: 1.65;
    margin: 0;
}

.hp :where(ul) {
    list-style: none;
    padding: 0;
    margin: 0;
}


/* An author `display` beats the UA sheet's [hidden]{display:none},
   so any panel the tab controller hides must say so explicitly.
   The attribute selector outranks the plain class rule - no
   !important needed. */
.hp-improve__panel[hidden],
.hp-stack__panel[hidden] {
    display: none;
}

.hp :where(img) {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   3. SECTION RHYTHM

   Full-width section -> Bootstrap .container -> content.
   .hp-section owns vertical space only; horizontal gutters
   are the container's job, always.
========================================================= */

.hp-section {
    padding-block: var(--hp-pad);
}


/* Shared centred section intro: title + optional standfirst */

.hp-head {
    text-align: center;
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: 36px;
}

.hp-head__title {
    font-size: 36px;
    font-weight: 600;
}

.hp-head__text {
    margin-top: 12px;
    font-size: 16px;
    color: var(--hp-body);
}

/* Inverted variant, for sections sitting on the gradient */

.hp-section--dark { color: var(--hp-on-dark-soft); }
.hp-section--dark .hp-head__title { color: var(--hp-on-dark); }
.hp-section--dark .hp-head__text { color: var(--hp-on-dark-soft); }


/* =========================================================

/* =========================================================
   4. SECTION 1 - HERO

   Full-bleed video behind a dark scrim, content left-aligned
   in the common .container. The video is confined to this
   section; the header is untouched.
========================================================= */

/* Inline icon sprite - never rendered, only <use>d. */
.hp-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.hp-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;

    /* Exactly the viewport left below the fixed header.
       --dx-header-h is published by the header script;
       74px is its no-JS fallback. svh stops mobile browser
       chrome from cropping the content. */
    min-height: calc(100vh - var(--dx-header-h, 74px));
    min-height: calc(100svh - var(--dx-header-h, 74px));

    padding-block: var(--hp-pad-lg);

    /* Last-resort backdrop. Guarantees the white text always
       has a dark ground, even if neither video nor poster
       paints. */
    background: #101130 var(--hp-gradient);
}

.hp-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* ---- Right-weighted framing (>=992px) ------------------
   The copy is boxed to 600px on the left, so a flat scrim
   spends the same 60% black over the half of the frame that
   has no text on it and the footage never gets to read. From
   992px up the video is pulled toward the right instead:

     - it fades out to the left, dissolving into the brand
       ground the copy sits on;
     - the scrim turns into a horizontal ramp, heavy behind
       the text and light over the right, where the footage
       is now doing the work.

   Both halves are one paint each and the video keeps its
   single compositing layer, so this costs nothing per frame.
   Below 992px the copy runs full width and the flat scrim
   above stays in charge; under 768px the video is off.
------------------------------------------------------- */

@media (min-width: 992px) {

    .hp-hero__video {
        /* Left edge dissolves rather than cutting, so there is no
           seam between footage and background. */
        -webkit-mask-image: linear-gradient(90deg,
                            rgba(0, 0, 0, 0.18) 0%,
                            rgba(0, 0, 0, 0.45) 30%,
                            #000 65%);
                mask-image: linear-gradient(90deg,
                            rgba(0, 0, 0, 0.18) 0%,
                            rgba(0, 0, 0, 0.45) 30%,
                            #000 65%);

        /* Frames the source from its left, which drifts whatever is
           in the middle of the shot over to the right, clear of the
           copy. Only bites on viewports narrow enough for `cover` to
           be cropping horizontally - on very wide screens cover
           crops top and bottom instead and this is a no-op. Raise
           toward 100% to pull the framing back the other way. */
        object-position: 18% center;
    }

    .hp-hero::before {
        background: linear-gradient(90deg,
                    rgba(9, 10, 34, 0.86) 0%,
                    rgba(9, 10, 34, 0.74) 32%,
                    rgba(9, 10, 34, 0.46) 62%,
                    rgba(9, 10, 34, 0.34) 100%);
    }
}

.hp-hero > .container {
    position: relative;
    z-index: 2;
}

.hp-hero__content {
    max-width: 600px;
}

.hp-hero__title {
    color: var(--hp-on-dark);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.2;
}

.hp-hero__text {
    margin-top: 16px;
    font-size: 18px;
    color: var(--hp-on-dark-soft);
}

.hp-hero__points {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
}

.hp-hero__point {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: var(--hp-on-dark);
}

.hp-hero__point svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.hp-hero__cta {
    display: inline-block;
    margin-top: 30px;
    padding: 13px 28px;

    border-radius: var(--hp-radius-sm);
    background: var(--hp-on-dark);

    color: var(--hp-blue);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;

    transition: transform var(--hp-dur) var(--hp-ease),
                box-shadow var(--hp-dur) var(--hp-ease);
}

.hp-hero__cta:hover,
.hp-hero__cta:focus-visible {
    color: var(--hp-blue);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

/* =========================================================
   5. SECTION 2 - STATS + CLIENTS

   Four equal cards on one grid row, then the client strip.
   Logos stay in their original colour - no greyscale filter
   is applied here, deliberately.
========================================================= */

.hp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.hp-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;

    /* Trimmed from 40px now that the icon carries part of the top
       breathing room itself. */
    padding: 32px 28px;

    background: var(--hp-card);
    border-radius: var(--hp-radius-lg);

    transition: transform var(--hp-dur) var(--hp-ease),
                box-shadow var(--hp-dur) var(--hp-ease);
}

.hp-stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--hp-shadow-md);
}

/* Same glyph treatment the About page gives its stats: a brand-blue
   icon above the figure, flipping to the gradient chip on hover. */
.hp-stat__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    /* width: 44px; */
    /* height: 44px; */
    margin-bottom: 8px;
    border-radius: var(--hp-radius);
    /* background: var(--hp-blue-soft); */
    color: var(--hp-blue);
    transition: background var(--hp-dur) var(--hp-ease), color var(--hp-dur) var(--hp-ease);
}

.hp-stat__ico svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* .hp-stat:hover .hp-stat__ico {
    background: var(--hp-gradient);
    color: var(--hp-on-dark);
} */

.hp-stat__figure {
    margin-bottom:4px;

    font-size: 45px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--hp-heading);

    /* Stops the row twitching as the count-up moves through
       digits of different widths. */
    font-variant-numeric: tabular-nums;
}

.hp-stat__label {
    font-size: 21px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--hp-heading);
}

.hp-stat__note {
    font-size: 15px;
    line-height: 1.5;
    color: var(--hp-body);
}


/* ---- Client strip ------------------------------------- */

.hp-clients {
    margin-top: 56px;
}

.hp-clients__head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

.hp-clients__title {
    font-size: 20px;
    font-weight: 500;
    color: var(--hp-heading);
    white-space: nowrap;
}

/* Rules fade outwards, so the title reads as the anchor. */
.hp-clients__rule {
    flex: 1;
    height: 1px;
}

.hp-clients__rule:first-child {
    background: linear-gradient(90deg, var(--hp-card-line), #2762f640);
}

.hp-clients__rule:last-child {
    background: linear-gradient(90deg, #2762f640, var(--hp-card-line));
}

.hp-clients__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

/* Owl forces `width:100%` onto item images; logos have to
   keep their own aspect ratio, so this overrides it. */
.hp-clients__track.owl-carousel .owl-item img {
    width: auto;
    max-width: 100%;
    max-height: 46px;
    margin: 0 auto;
    object-fit: contain;
}

/* =========================================================

/* =========================================================
   6. SECTION 3 - CORE DEVOPS SERVICES

   Accordion rail on the left carries its own copy; the right
   column holds nothing but the matching image.
========================================================= */

.hp-services {
    background: var(--hp-gradient);
}

.hp-services__grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 28px;
    align-items: start;
}


/* ---- Accordion rail ------------------------------------ */

.hp-acc {
    display: grid;
    gap: 2px;
    align-content: start;

    padding: 8px;
    background: var(--hp-surface);
    border-radius: var(--hp-radius-lg);

    /* Matches the media column: same column width, and the
       image is 4:3, so the rail ends level with it at every
       breakpoint instead of at a guessed pixel height. */
    aspect-ratio: 4 / 3;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--hp-line, #D7D7D7) transparent;
}

.hp-acc::-webkit-scrollbar { width: 6px; }
.hp-acc::-webkit-scrollbar-track { background: transparent; }
.hp-acc::-webkit-scrollbar-thumb {
    background: #D9DFEC;
    border-radius: 999px;
}
.hp-acc::-webkit-scrollbar-thumb:hover { background: #A9BFEE; }

/* Hairline only between two closed rows, so the open rows
   rounded corners never collide with a separator. The 2px
   grid gap gives its shadow room without shifting anything. */
.hp-acc__item:not(.is-active) + .hp-acc__item:not(.is-active) {
    border-top: 1px solid var(--hp-card-line);
}

.hp-acc__item.is-active {
    border-radius: var(--hp-radius-sm);
    box-shadow: 0 4px 16px -6px rgba(16, 17, 48, 0.28);
    border: 1px solid #0000ff2e;
}


.hp-tab {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;

    padding: 16px 14px;

    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: var(--hp-radius-sm);

    font-family: inherit;
    text-align: left;
    cursor: pointer;

    transition: border-color var(--hp-dur) var(--hp-ease);
}

.hp-tab__num {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--hp-ink-faint);
    transition: color var(--hp-dur) var(--hp-ease);
}

.hp-tab__title {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--hp-body);
    transition: color var(--hp-dur) var(--hp-ease);
}

.hp-tab__chevron {
    flex: 0 0 12px;
    width: 12px;
    height: 8px;
    color: var(--hp-blue);
    transition: transform var(--hp-dur) var(--hp-ease);
}

/* .hp-tab.is-active { border-left-color: var(--hp-blue); } */
.hp-tab.is-active .hp-tab__num,
.hp-tab.is-active .hp-tab__title { color: var(--hp-blue); }
.hp-tab.is-active .hp-tab__title { font-weight: 600; }
.hp-tab.is-active .hp-tab__chevron { transform: rotate(180deg); }

.hp-tab:focus-visible {
    outline: 2px solid var(--hp-blue);
    outline-offset: -2px;
}

/* 0fr -> 1fr animates to the content's real height, which a
   guessed max-height cannot do without clipping or lag. */
.hp-acc__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--hp-dur) var(--hp-ease);
}

.hp-acc__item.is-active .hp-acc__body {
    grid-template-rows: 1fr;
}

.hp-acc__inner {
    overflow: hidden;
}

.hp-acc__text {
    padding: 0 16px 0 31px;
    font-size: 14px;
    color: var(--hp-body);
}

.hp-acc__list {
    display: grid;
    gap: 7px;
    padding: 12px 16px 18px 31px;
}

.hp-acc__list li {
    position: relative;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--hp-body);
}

.hp-acc__list li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 7px;

    width: 5px;
    height: 5px;

    border-radius: 50%;
    background: var(--hp-blue);
}


/* ---- Media column -------------------------------------- */

.hp-services__media {
    position: sticky;
    top: calc(var(--dx-header-h, 74px) + 20px);

    /* padding: 12px; */
    background: var(--hp-surface);
    border-radius: var(--hp-radius-lg);
}

.hp-shot {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--hp-radius);
    animation: hp-panel-in 0.3s var(--hp-ease) both;
}

.hp-shot[hidden] { display: none; }

/* =========================================================
   SLIDER CONTROLS

   One control set shared by every Owl track: optional
   progress rail plus round prev/next buttons.
========================================================= */

/* Owl floats its items, so cards size to their own copy and
   end up ragged. A flex stage makes every card in a row match
   the tallest; flex:0 0 auto keeps Owl's inline widths exact. */
.hp-track.owl-carousel .owl-stage { display: flex; }

.hp-track.owl-carousel .owl-item {
    display: flex;
    flex: 0 0 auto;
    height: auto;
}

.hp-track.owl-carousel .owl-item > * { width: 100%; }

.hp-slider-nav {
    display: flex;
    align-items: center;
    justify-content:center;
    gap: 28px;
    margin-top: 32px;
}

.hp-slider-nav--left {
    justify-content: flex-start;
    margin-top: 26px;
}

.hp-slider-progress {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: var(--hp-card-line);
    overflow: hidden;
}

.hp-slider-progress__bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--hp-gradient);
    transition: width 0.4s var(--hp-ease);
}

.hp-slider-btns {
    display: flex;
    gap: 12px;
    flex: 0 0 auto;
}

.hp-slider-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* width: 0px; */
    height: 48px;
      padding: 14px;
     background: transparent;
    border: 1px solid var(--hp-blue);
    border-radius: 50%;

    color: var(--hp-blue);
    cursor: pointer;

    transition: background var(--hp-dur) var(--hp-ease),
                color var(--hp-dur) var(--hp-ease),
                opacity var(--hp-dur) var(--hp-ease);
}

.hp-slider-btn svg {
    width: 18px;
    height: 14px;
}

.hp-slider-btn:hover:not(:disabled) {
    background: var(--hp-blue);
    color: var(--hp-on-dark);
}

.hp-slider-btn:focus-visible {
    outline: 2px solid var(--hp-blue);
    outline-offset: 2px;
}

.hp-slider-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* On the gradient section the outline has to invert. */
.hp-section--dark .hp-slider-btn {
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--hp-on-dark);
}

.hp-section--dark .hp-slider-btn:hover:not(:disabled) {
    background: var(--hp-on-dark);
    color: var(--hp-blue);
}
/*==============================================
   7. SECTION 4 - SUCCESS STORIES
========================================================= */

.hp-story {
    display: flex;
    flex-direction: column;
    height: 100%;

    background: var(--hp-surface);
    border: 1px solid var(--hp-card-line);
    border-radius: var(--hp-radius-lg);
    overflow: hidden;

    transition: transform var(--hp-dur) var(--hp-ease),
                box-shadow var(--hp-dur) var(--hp-ease);
}

.hp-story:hover {
    transform: translateY(-4px);
    box-shadow: var(--hp-shadow-lg);
}

.hp-story__img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.hp-story__body {
    padding: 22px 22px 26px;
}

.hp-story__title {
    margin-top: 12px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.34;
}

.hp-story__text {
    margin-top: 10px;
    font-size: 14px;
    color: var(--hp-body);
}

/* Shared label pill, also used by other card sections. */
.hp-pill {
    display: inline-block;
    padding: 6px 12px;

    background: var(--hp-blue-soft);
    border-radius: 999px;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hp-blue);
}


/* =========================================================
   8. SHARED CTA BAND

   The existing CTA treatment, but contained to the grid
   instead of bleeding to the viewport edge.
========================================================= */

.hp-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    margin-top: 44px;
    padding: 40px 44px;

    border-radius: var(--hp-radius-lg);
    background: linear-gradient(110deg, #155eef 0%, #3157e8 45%, #6d18ef 100%);
}

.hp-cta__text { max-width: 680px; }

.hp-cta__title {
    color: var(--hp-on-dark);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
}

.hp-cta__desc {
    margin-top: 10px;
    font-size: 15px;
    color: var(--hp-on-dark-soft);
}

.hp-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;

    min-height: 54px;
    padding: 0 10px 0 26px;

    background: var(--hp-surface);
    border-radius: 999px;

    color: #2450df;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    transition: transform var(--hp-dur) var(--hp-ease);
}

.hp-cta__btn:hover,
.hp-cta__btn:focus-visible {
    color: #2450df;
    text-decoration: none;
    transform: translateY(-2px);
}

.hp-cta__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;
    background: #2450df;
    color: var(--hp-on-dark);
    font-size: 17px;
}


/* =========================================================
   9. SECTION 5 - WHAT DEVOPS IMPROVES
========================================================= */

.hp-improve__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}

.hp-improve__tab {
    padding: 10px 18px;

    background: transparent;
    border: 1px solid #dfdfdf;
    border-radius: 52px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--hp-body);
    cursor: pointer;

    transition: background var(--hp-dur) var(--hp-ease),
                border-color var(--hp-dur) var(--hp-ease),
                color var(--hp-dur) var(--hp-ease);
}

.hp-improve__tab.is-active {
    background: var(--hp-blue);
    border-color: var(--hp-blue);
    color: var(--hp-on-dark);
}

.hp-improve__tab:focus-visible {
    outline: 2px solid var(--hp-blue);
    outline-offset: 2px;
}

.hp-improve__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 370px);
    align-items: center;
    gap: 48px;

    padding: 40px 48px;

    background: #E6EEFF;
    border-radius: 28px;

    animation: hp-panel-in 0.3s var(--hp-ease) both;
}

.hp-improve__title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
}

.hp-improve__text {
    margin-top: 12px;
    font-size: 15px;
    color: var(--hp-body);
}

.hp-improve__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--hp-radius);
}

/* =========================================================

/* =========================================================
   10. SECTION 6 - AI-DRIVEN DEVOPS

   Gradient cards on an Owl track. Equal heights come from the
   flex row Owl puts on the stage.
========================================================= */

.hp-ai__title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.25;
}

.hp-ai__desc {
    margin-top: 14px;
    font-size: 16px;
    color: var(--hp-body);
}



.hp-ai__card {
    display: flex;
    flex-direction: column;
    width: 100%;

    padding: 30px 28px 34px;

    border-radius: 24px;
    background: linear-gradient(150deg, #3D6BFF 0%, #4B4BF0 45%, #7A18E8 100%);

    color: var(--hp-on-dark);
}

.hp-ai__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    background: rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    color: var(--hp-on-dark);
}

.hp-ai__icon svg {
    width: 24px;
    height: 24px;
}

.hp-ai__card-title {
    margin-top: 26px;

    color: var(--hp-on-dark);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
}

.hp-ai__card-text {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
}
/* =========================================================
   11. SECTION 7 - WHAT TO EXPECT
========================================================= */

.hp-expect {
    background: #eef3ff;
}

.hp-expect__title {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.25;
}

.hp-expect__desc {
    margin-top: 14px;
    font-size: 16px;
    color: var(--hp-body);
}


.hp-expect__shot {
    display: block;
    width: 100%;
    margin-top: 50px;
    aspect-ratio: 3 / 2;
    /* object-fit: cover; */
    border-radius: var(--hp-radius-lg);
}

.hp-expect__list {
    display: grid;
    gap: 16px;
}

.hp-expect__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    padding: 22px 24px;

    background: var(--hp-surface);
    border-radius: var(--hp-radius-lg);
}

.hp-expect__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    background: var(--hp-blue-soft);
    border-radius: var(--hp-radius);
    color: var(--hp-blue);
}

.hp-expect__icon svg {
    width: 22px;
    height: 22px;
}

.hp-expect__item-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
}

.hp-expect__item-text {
    margin-top: 8px;
    font-size: 14px;
    color: var(--hp-body);
}


/* =========================================================
   12. SECTION 8 - DEVOPS TECH STACK
========================================================= */

.hp-stack {
    background: linear-gradient(93.06deg, #03133d 10%, #180038 100%);
}

.hp-stack .hp-head__title { color: var(--hp-on-dark); }
.hp-stack .hp-head__text  { color: var(--hp-on-dark-soft); }

.hp-stack .hp-head__title {
    font-size: 30px;
    font-weight: 600;
}

.hp-stack__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;

    margin-bottom: 32px;
    padding: 4px;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
}

.hp-stack__tab {
    flex: 1 1 auto;

    padding: 14px 18px;

    background: transparent;
    border: 0;
    border-radius: 10px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--hp-on-dark-soft);
    cursor: pointer;
    white-space: nowrap;

    transition: background var(--hp-dur) var(--hp-ease),
                color var(--hp-dur) var(--hp-ease);
}

.hp-stack__tab.is-active {
    background: var(--hp-blue);
    color: var(--hp-on-dark);
}

.hp-stack__tab:focus-visible {
    outline: 2px solid var(--hp-on-dark);
    outline-offset: -2px;
}

.hp-stack__panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;

    animation: hp-panel-in 0.3s var(--hp-ease) both;
}

.hp-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;

    min-height: 140px;
    padding: 20px 14px;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;

    color: var(--hp-on-dark);
    font-size: 14px;
    text-align: center;

    transition: background var(--hp-dur) var(--hp-ease),
                border-color var(--hp-dur) var(--hp-ease);
}

.hp-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
}

.hp-chip img,
.hp-chip__glyph {
    width: 40px;
    height: 40px;
}

.hp-chip__glyph { color: var(--hp-on-dark); }


/* =========================================================
   13. SECTION 9 - ENGAGEMENT MODELS
========================================================= */

.hp-engage {
    background: #F8F8FB;
}

.hp-model {
    display: flex;
    flex-direction: column;
    height: 100%;

    padding: 30px 26px;

    background: var(--hp-surface);
    border: 1px solid var(--hp-card-line);
    border-radius: var(--hp-radius-lg);

    transition: border-color var(--hp-dur) var(--hp-ease),
                box-shadow var(--hp-dur) var(--hp-ease);
}

.hp-model:hover {
    border-color: var(--hp-blue);
    box-shadow: var(--hp-shadow-md);
}

.hp-model__num {
    font-size: 33px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #2762f67d;
}

.hp-model__title {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 600;
}

.hp-model__facts {
    margin: 18px 0 0;
}

.hp-model__facts dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #2450dfbf;
}

.hp-model__facts dd {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--hp-body);
}

.hp-model__facts dt + dd { margin-bottom: 16px; }
.hp-model__facts dd:last-child { margin-bottom: 0; }

/* =========================================================
   14. ENGAGEMENT CTA BAND

   The page's second CTA treatment: brand gradient, copy left,
   artwork flush to the bottom edge. Kept distinct from the
   .hp-cta band used after Section 4.
========================================================= */

.hp-cta2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    margin-top: 56px;
    padding: 38px 42px 0;

    border-radius: 24px;
    overflow: hidden;

    background: linear-gradient(93.06deg, #2762F6 38.02%, #6D18EF 80.46%);
}

.hp-cta2__text {
    max-width: 780px;
    padding-bottom: 38px;
}

.hp-cta2__title {
    color: var(--hp-on-dark);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.hp-cta2__desc {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--hp-on-dark-soft);
}

.hp-cta2__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 26px;
    padding: 15px 30px;

    border-radius: 999px;
    background: var(--hp-surface);

    color: #3D4AF3;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;

    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
    transition: transform var(--hp-dur) var(--hp-ease),
                box-shadow var(--hp-dur) var(--hp-ease);
}

.hp-cta2__btn:hover,
.hp-cta2__btn:focus-visible {
    color: #3D4AF3;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

/* Artwork sits on the band's bottom edge, so no bottom padding. */
.hp-cta2__media {
    flex: 0 0 auto;
    align-self: flex-end;
}

.hp-cta2__media img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* =========================================================

/* =========================================================
   15. SECTION 10 - INDUSTRY IMPACT

   Image card under a brand scrim. Title always readable; the
   description opens on hover, and on focus so the keyboard
   reaches it too.
========================================================= */

.hp-industry {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--hp-radius-lg);
}

.hp-industry__img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform 0.6s var(--hp-ease);
}

.hp-industry:hover .hp-industry__img,
.hp-industry:focus-within .hp-industry__img {
    transform: scale(1.06);
}

/* Scrim lives on the card, not a spare div, and deepens with
   the hover so the revealed copy stays legible. */
.hp-industry::after {
    content: '';
    position: absolute;
    inset: 0;

    /* background: linear-gradient(
        180deg,
        rgba(17, 99, 251, 0.10) 0%,
        rgba(17, 99, 251, 0.62) 60%,
        rgba(109, 24, 239, 0.82) 100%
    ); */
    background: #0000006e;

    transition: opacity var(--hp-dur) var(--hp-ease);
}

.hp-industry:hover::after,
.hp-industry:focus-within::after {
    opacity: 0.92;
}

.hp-industry__body {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 2;
}

.hp-industry__title {
    color: var(--hp-on-dark);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.4;
    transition: transform var(--hp-dur) var(--hp-ease);
}

.hp-industry__reveal {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;

    transition: grid-template-rows 0.4s var(--hp-ease),
                opacity 0.3s var(--hp-ease);
}

.hp-industry:hover .hp-industry__reveal,
.hp-industry:focus-within .hp-industry__reveal {
    grid-template-rows: 1fr;
    opacity: 1;
}

.hp-industry__reveal p {
    overflow: hidden;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
}

/* The padding rides on the inner element so it collapses with
   the row rather than leaving a gap when closed. */
.hp-industry:hover .hp-industry__reveal p,
.hp-industry:focus-within .hp-industry__reveal p {
    padding-top: 12px;
}
/*
   16. SECTION 11 - TESTIMONIALS
========================================================= */
 .hp-quotes{background: #F8F8FB;}
.hp-quote {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;

    padding: 24px 22px;

    background: var(--hp-surface);
    border: 1px solid var(--hp-card-line);
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    background: #F8F8FB;
}

.hp-quote__badge {
    align-self: flex-start;

    padding: 5px 14px;

    border-radius: 999px;
    background: rgba(69, 24, 126, 0.1);

    font-size: 12px;
    font-weight: 600;
    color: var(--hp-indigo);
}

.hp-quote__text {
    position: relative;
    flex: 1;

    margin: 18px 0 0;
    padding-top: 14px;

    font-size: 15px;
    line-height: 1.7;
    color: var(--hp-body);
}

/* Decorative open-quote, kept out of the accessibility tree. */
.hp-quote__text::before {
    content: '\201C';
    position: absolute;
    left: -2px;
    top: -10px;

    font-family: Georgia, 'Times New Roman', serif;
    font-size: 44px;
    line-height: 1;
    color: #E7E7E7;
}

.hp-quote__author {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--hp-card-line);
}

.hp-quote__author img {
    width: 42px!important;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.hp-quote__author strong,
.hp-quote__author em {
    display: block;
}

.hp-quote__author strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--hp-heading);
}

.hp-quote__author em {
    margin-top: 2px;
    font-size: 13px;
    font-style: normal;
    color: var(--hp-body);
}


/* =========================================================
   17. SECTION 12 - FAQ

   Bootstrap accordion, restyled. Two columns on desktop so
   ten questions read as a block rather than a long strip.
========================================================= */

 
 
.hp-faq {
    background: #F8F8FB;
}

/* Two columns keeps ten questions reading as a block
   rather than one long strip. */
/* .hp-faq__list {
    columns: 2;
    column-gap: 48px;
} */

.hp-faq__item {
    break-inside: avoid;
    display: inline-block;
    width: 100%;

    margin-bottom: 4px;

    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--hp-line, #D7D7D7);
    border-radius: 0;
    padding-left:20px;
}

/* Bootstrap paints its own chrome on these - override, scoped. */
.hp-faq__btn.accordion-button {
    padding: 22px 34px 22px 0;

    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;

    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--hp-heading);
}

.hp-faq__btn.accordion-button:not(.collapsed) {
    background: transparent;
    box-shadow: none;
    color: var(--hp-blue);
}

.hp-faq__btn.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.hp-faq__btn.accordion-button:focus-visible {
    outline: 2px solid var(--hp-blue);
    outline-offset: 2px;
}

/* Replace Bootstrap's chevron sprite with a themed one. */
.hp-faq__btn.accordion-button::after {
    width: 20px;
    height: 20px;
    background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232762F6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

.hp-faq__body.accordion-body {
    padding: 0 34px 22px 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--hp-body);
}
  

@media (max-width: 1199.98px) {

    .hp-head__title { font-size: 32px; }

    .hp-hero__title { font-size: 40px; }

    .hp-stat__figure { font-size: 48px; }
    .hp-stat__label  { font-size: 19px; }

    .hp-ai__title, .hp-expect__title { font-size: 28px; }
    .hp-improve__panel { gap: 32px; padding: 32px 34px; }

    .hp-cta2__title { font-size: 26px; }

}


@media (max-width: 991.98px) {

    .hp {
        --hp-pad-sm: 32px;
        --hp-pad: 36px;
        --hp-pad-lg: 40px;
    }

    .hp-head { margin-bottom: 28px; }
    .hp-head__title { font-size: 28px; }

    .hp-hero { padding-block: var(--hp-pad-lg); }
    .hp-hero__content { max-width: 100%; }
    .hp-hero__title { font-size: 32px; }
    .hp-hero__text  { font-size: 16px; }

    .hp-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .hp-stat  { padding: 32px 24px; }
    .hp-stat__figure { font-size: 44px; }
    .hp-clients { margin-top: 40px; }

    .hp-services__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }

    .hp-ai__title, .hp-expect__title { font-size: 26px; }
    .hp-ai__intro, .hp-expect__intro { margin-bottom: 8px; }

    /* Copy above image once the row can no longer hold both. */
    .hp-improve__panel { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px; }

    .hp-cta { flex-direction: column; align-items: flex-start; gap: 22px; padding: 32px 28px; }
    .hp-cta__title { font-size: 22px; }

    .hp-stack__tab { flex: 1 1 44%; white-space: normal; }


    /* Artwork drops away before it can squeeze the copy. */
    .hp-cta2 { padding: 32px 28px; }
    .hp-cta2__text { padding-bottom: 0; max-width: 100%; }
    .hp-cta2__media { display: none; }
    .hp-cta2__title { font-size: 23px; }

    .hp-faq__list { columns: 1; }

    .hp-services__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .hp-services__media { position: static; }
    .hp-expect__shot { margin-bottom: 8px; }

    /* Single column: let the rail run at its natural
       height rather than trapping a scroller inside
       the page scroll. */
    .hp-acc { aspect-ratio: auto; overflow: visible; }

}


@media (max-width: 767.98px) {

    .hp-head__title { font-size: 24px; }
    .hp-head__text { font-size: 15px; }

    .hp-hero__title { font-size: 26px; }
    .hp-hero__text  { font-size: 15px; margin-top: 14px; }
    .hp-hero__point { font-size: 14px; }
    .hp-hero__cta   { width: 100%; text-align: center; }

    .hp-stats { gap: 14px; }
    .hp-stat  { padding: 24px 18px; }
    .hp-stat__ico { width: 38px; height: 38px; margin-bottom: 4px; }
    .hp-stat__ico svg { width: 19px; height: 19px; }
    .hp-stat__figure { font-size: 34px; margin-bottom: 10px; }
    .hp-stat__label  { font-size: 16px; }
    .hp-stat__note   { font-size: 13px; }
    .hp-clients__head { gap: 12px; margin-bottom: 20px; }
    .hp-clients__title { font-size: 16px; }

    .hp-tab { padding: 13px 12px; gap: 11px; }
    .hp-tab__title { font-size: 14px; }

    .hp-story__body { padding: 18px 18px 22px; }
    .hp-story__title { font-size: 17px; }

    .hp-ai__title, .hp-expect__title { font-size: 22px; }

    .hp-improve__tabs { gap: 8px; }
    .hp-improve__tab { padding: 8px 14px; font-size: 13px; }
    .hp-improve__panel { padding: 22px 18px; }
    .hp-improve__title { font-size: 20px; }

    .hp-expect__item { padding: 18px; gap: 13px; }

    .hp-stack__tabs { flex-direction: column; }
    .hp-stack__tab { flex: 1 1 auto; text-align: left; }
    .hp-stack__panel { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
    .hp-chip { min-height: 116px; font-size: 13px; gap: 10px; }
    .hp-chip img, .hp-chip__glyph { width: 32px; height: 32px; }

    .hp-cta { padding: 26px 20px; }
    .hp-cta__title { font-size: 19px; }
    .hp-cta__btn { width: 100%; justify-content: space-between; }

    .hp-model { padding: 24px 20px; }


    .hp-cta2 { padding: 26px 20px; margin-top: 36px; }
    .hp-cta2__title { font-size: 20px; }
    .hp-cta2__desc { font-size: 15px; }
    .hp-cta2__btn { width: 100%; }

    .hp-quote { padding: 20px 18px; }
    .hp-quote__text { font-size: 14px; }

    .hp-faq__btn.accordion-button { padding: 18px 30px 18px 0; font-size: 15px; }
    .hp-faq__body.accordion-body { padding: 0 30px 18px 0; font-size: 14px; }

    .hp-tab { padding: 13px 12px; gap: 11px; }
    .hp-tab__title { font-size: 14px; }
    .hp-acc__text { padding-left: 29px; }
    .hp-acc__list { padding-left: 29px; }

    .hp-ai__card { padding: 24px 22px 28px; }
    .hp-ai__card-title { font-size: 20px; margin-top: 20px; }
    .hp-ai__card-text { font-size: 15px; }

    .hp-industry__body { left: 18px; right: 18px; bottom: 18px; }
    .hp-industry__title { font-size: 17px; }

    .hp-slider-nav { gap: 16px; margin-top: 24px; }
    .hp-slider-btn { width: 40px; height: 40px; }
    .hp-slider-btn svg { width: 16px; height: 12px; }
    .hp-hero__video {
        display: none;
    }

}


/* =========================================================
   19. MOTION

   Two mechanisms, both opacity + transform only, so nothing
   in here can trigger layout or paint work beyond compositing:

     a) the hero entrance, a plain CSS animation that starts
        with the first frame - no JS, no waiting;
     b) scroll reveals, one class toggled by an
        IntersectionObserver in homepage.js.

   Everything is gated behind .hp-motion-ready on <html>. A
   small inline script in the page head adds it before the body
   parses, so there is no flash of visible-then-hidden content -
   and with JS off, or reduced motion on, the class never lands
   and every section stays plainly visible.
========================================================= */

/* Smooth anchor jumps (FAQ, in-page links). Opted out of
   automatically for anyone who asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}


/* ---- a) Hero entrance ---------------------------------- */

@keyframes hp-rise-in {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
    to   { opacity: 1; transform: none; }
}

/* Short and delay-free on the title: it is the LCP element, so
   nothing here is allowed to hold it back. The rest follows it
   in, finishing inside half a second. */
.hp-motion-ready .hp-hero__title,
.hp-motion-ready .hp-hero__text,
.hp-motion-ready .hp-hero__point,
.hp-motion-ready .hp-hero__cta {
    animation: hp-rise-in 0.45s var(--hp-ease) both;
}

.hp-motion-ready .hp-hero__text { animation-delay: 0.08s; }

.hp-motion-ready .hp-hero__point:nth-child(1) { animation-delay: 0.14s; }
.hp-motion-ready .hp-hero__point:nth-child(2) { animation-delay: 0.19s; }
.hp-motion-ready .hp-hero__point:nth-child(3) { animation-delay: 0.24s; }
.hp-motion-ready .hp-hero__point:nth-child(4) { animation-delay: 0.29s; }

.hp-motion-ready .hp-hero__cta { animation-delay: 0.34s; }


/* ---- b) Scroll reveal ----------------------------------
   [data-reveal]            the element itself rises in
   [data-reveal="stagger"]  its direct children rise in, one
                            after the next
   homepage.js adds .is-in once the element crosses into view,
   then stops watching it.
------------------------------------------------------- */

.hp-motion-ready [data-reveal],
.hp-motion-ready [data-reveal="stagger"] > * {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 0.5s var(--hp-ease),
                transform 0.5s var(--hp-ease);
}

.hp-motion-ready [data-reveal].is-in,
.hp-motion-ready [data-reveal="stagger"].is-in > * {
    opacity: 1;
    transform: none;
}

/* The stagger container is only a wrapper - the children do the
   moving, so it must not hide itself as well. */
.hp-motion-ready [data-reveal="stagger"] {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Delays live in CSS rather than in inline styles, so the reveal
   costs one class toggle per block and no per-child writes. */
.hp-motion-ready [data-reveal="stagger"] > *:nth-child(2) { transition-delay: 0.07s; }
.hp-motion-ready [data-reveal="stagger"] > *:nth-child(3) { transition-delay: 0.14s; }
.hp-motion-ready [data-reveal="stagger"] > *:nth-child(4) { transition-delay: 0.21s; }
.hp-motion-ready [data-reveal="stagger"] > *:nth-child(5) { transition-delay: 0.28s; }
.hp-motion-ready [data-reveal="stagger"] > *:nth-child(6) { transition-delay: 0.35s; }

/* Past six the stagger stops reading as a sequence and starts
   reading as a delay, so everything after lands together. */
.hp-motion-ready [data-reveal="stagger"] > *:nth-child(n+7) { transition-delay: 0.4s; }


/* ---- c) Micro-interactions -----------------------------
   Hover states on the blocks that had none. All of them are
   transform / shadow / colour, so none of them cost layout.
------------------------------------------------------- */

/* Section 7 - what to expect */
.hp-expect__item {
    transition: transform var(--hp-dur) var(--hp-ease),
                box-shadow var(--hp-dur) var(--hp-ease);
}

.hp-expect__item:hover {
    transform: translateY(-3px);
    box-shadow: var(--hp-shadow-md);
}

.hp-expect__icon {
    transition: background var(--hp-dur) var(--hp-ease),
                color var(--hp-dur) var(--hp-ease);
}

.hp-expect__item:hover .hp-expect__icon {
    background: var(--hp-gradient);
    color: var(--hp-on-dark);
}

/* Section 6 - AI cards. These sit on a gradient already, so they
   lift on shadow rather than on a colour change. */
.hp-ai__card {
    transition: transform var(--hp-dur) var(--hp-ease),
                box-shadow var(--hp-dur) var(--hp-ease);
}

.hp-ai__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -18px rgba(61, 107, 255, 0.55);
}

.hp-ai__icon { transition: background var(--hp-dur) var(--hp-ease); }
.hp-ai__card:hover .hp-ai__icon { background: rgba(255, 255, 255, 0.3); }

/* Section 11 - testimonials */
.hp-quote {
    transition: transform var(--hp-dur) var(--hp-ease),
                box-shadow var(--hp-dur) var(--hp-ease);
}

.hp-quote:hover {
    transform: translateY(-4px);
    box-shadow: var(--hp-shadow-md);
}

/* Client logos: they ship in full colour, so the resting state
   only softens them slightly and hover brings them back. */
.hp-clients__item img {
    opacity: 0.82;
    transition: opacity var(--hp-dur) var(--hp-ease),
                transform var(--hp-dur) var(--hp-ease);
}

.hp-clients__item:hover img {
    opacity: 1;
    transform: scale(1.05);
}

/* FAQ: colour the row on hover so the whole strip reads as the
   hit target, not just the text. */
.hp-faq__btn.accordion-button {
    transition: color var(--hp-dur) var(--hp-ease);
}

.hp-faq__btn.accordion-button:hover { color: var(--hp-blue); }

/* Bootstrap rotates this chevron via a transform; all that is
   missing is something to ease it. */
.hp-faq__btn.accordion-button::after {
    transition: transform var(--hp-dur) var(--hp-ease);
}

/* CTA bands: nudge the arrow along with the button lift. */
.hp-cta__arrow {
    transition: transform var(--hp-dur) var(--hp-ease);
}

.hp-cta__btn:hover .hp-cta__arrow,
.hp-cta__btn:focus-visible .hp-cta__arrow {
    transform: translateX(3px);
}


@media (prefers-reduced-motion: reduce) {

    .hp *,
    .hp *::before,
    .hp *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Belt and braces - the head script already declines to add
       .hp-motion-ready when reduced motion is on, so this only
       matters if the preference changes after load. */
    .hp-motion-ready [data-reveal],
    .hp-motion-ready [data-reveal="stagger"] > * {
        opacity: 1 !important;
        transform: none !important;
    }

}