/* ==========================================================================
   NexoraTech — homepage hero banner
   Match the reference image: solid lavender background, purple CTA,
   device labels, dashed connecting lines with blue dots.

   Motion: each screenshot zooms in on a stagger while the character slides in
   from the right, and the logo strip below slides as a seamless marquee.
   Everything animates on transform and opacity only, so the compositor does
   the work rather than the layout engine.
   ========================================================================== */

.nex-hero {
    padding: 8rem 0 2rem;
}

/* ---------------------------------------------------------- banner card -- */
.nex-hero__card {
    /* The bottom padding is also the room the "Website" / "Restaurant POS"
       labels hang into. --nex-pad-b lets the character reuse that exact space
       so it can bleed down to the card's bottom edge (see the desktop block). */
    --nex-pad-b: clamp(3.5rem, 5vw, 5rem);
    position: relative;
    isolation: isolate;
    /* the character now sits flush with the bottom edge, so its drop shadow
       has to be clipped here or it smears onto the page under the card */
    overflow: hidden;
    padding: clamp(2.5rem, 5vw, 5rem) clamp(1.25rem, 4vw, 4rem) var(--nex-pad-b);
    border-radius: 30px;
    background: #e8dff5;
}

/* dotted route line behind the screenshots */
.nex-hero__route {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Route geometry lives in nexora-hero.js; the look lives here */
.nex-hero__route line {
    stroke: #b8a9d4;
    stroke-width: 1.5;
    stroke-dasharray: 7 6;
}

/* Blue blinking dots — position comes from the route, opacity pulses here */
.nex-hero__dot {
    fill: #3b82f6;
    animation: nex-dot-blink 2.4s ease-in-out infinite;
}

.nex-hero__route-dots .nex-hero__dot:nth-child(2) {
    animation-delay: 0.8s;
}

.nex-hero__route-dots .nex-hero__dot:nth-child(3) {
    animation-delay: 1.6s;
}

@keyframes nex-dot-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* ------------------------------------------------------------- headline -- */
.nex-hero__intro {
    position: relative;
    z-index: 2;
    max-width: 958px;
    margin: 0 auto;
    text-align: center;
}

.nex-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1.25rem;
    border: 1px solid rgba(70, 18, 142, .16);
    border-radius: 50rem;
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #46128e;
    font-family: poppins-regular;
    font-size: .85rem;
    letter-spacing: .01em;
}

.nex-hero__eyebrow i {
    flex: none;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #c2410c;
    animation: nex-pulse 2.4s ease-out infinite;
}

@keyframes nex-pulse {
    0% { box-shadow: 0 0 0 0 rgba(194, 65, 12, .5); }
    70% { box-shadow: 0 0 0 .6rem rgba(194, 65, 12, 0); }
    100% { box-shadow: 0 0 0 0 rgba(194, 65, 12, 0); }
}

.nex-hero__title {
    margin: 1.25rem 0 0;
    color: #000000;
    font-family: poppins-semi-bold;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.nex-hero__title span {
    color: #c2410c;
}

.nex-hero__lede {
    max-width: 577px;
    margin: 1.15rem auto 0;
    color: #584b75;
    font-family: poppins-light;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.75;
}

.nex-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.9rem;
}

/* Purple CTA button matching the image */
.nex-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: 1.05rem 2.1rem;
    border: 0;
    border-radius: 8px;
    background: #5b21b6;
    box-shadow: 0 14px 32px -14px rgba(91, 33, 182, .8);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-family: poppins-medium;
    font-size: 1rem;
    letter-spacing: .01em;
    text-decoration: none;
    transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.nex-hero__cta:hover {
    background: #4c1d95;
    box-shadow: 0 18px 36px -14px rgba(91, 33, 182, .95);
    color: #fff;
    transform: translateY(-2px);
}

.nex-hero__cta svg {
    flex: none;
    width: 18px;
    height: 18px;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.nex-hero__cta:hover svg {
    transform: translateX(4px);
}

/* ---------------------------------------------------- screenshots stage -- */
/* One composition at every width: the character holds the middle and the four
   products sit in the corners around it, exactly as the desktop spread reads.
   On a phone that collage is simply scaled down — the reference banner keeps
   its screenshots scattered around the main visual on mobile too, rather than
   stacking them into a list below it. Percentages keep the picture the same at
   any size; only the desktop block lower down re-opens the spacing. */
.nex-hero__stage {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: clamp(2.25rem, 4vw, 3.5rem);
}

.nex-hero__slot {
    min-width: 0;
    margin: 0;
    position: absolute;
}

/* Device label badges */
.nex-hero__label {
    display: block;
    width: fit-content;
    padding: .35rem .85rem;
    margin-bottom: .5rem;
    border-radius: 6px;
    background: #5b21b6;
    color: #fff;
    font-family: poppins-medium;
    font-size: .75rem;
    letter-spacing: .02em;
    text-align: center;
}

.nex-hero__shot {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 16px 26px rgba(52, 20, 110, .22));
}

/* Phone proportions: the character takes most of the width and the four
   products grow past their desktop share, which is how the reference banner
   scales its screenshots up on a narrow stage instead of shrinking them away. */
.nex-hero__slot--character {
    position: relative;
    z-index: 2;
    width: 64%;
    /* The character is the one slot left in the flow, so it is what gives the
       stage its height, and its artwork is cut off flat along the bottom edge.
       Dropping it by the card's bottom padding — a relative offset, not a
       negative margin — lands that cut exactly on the card's bottom edge. */
    top: var(--nex-pad-b);
    margin: 0 auto;
}

.nex-hero__slot--mobile {
    top: 0;
    left: 0;
    z-index: 3;
    width: 16%;
}

.nex-hero__slot--console {
    top: 0;
    right: 0;
    z-index: 3;
    width: 24%;
}

.nex-hero__slot--website {
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 26%;
}

.nex-hero__slot--pos {
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 24%;
}

/* Device labels: above the top pair and below the bottom pair, so they never
   sit on top of the artwork. The bottom pair's offset is measured so the label
   stays inside the card's own bottom padding. */
/* They are dropped on a phone — see the 575px block — because a chip like
   "Merchant Console" is wider than the room left beside a 24%-wide card, and
   the card clips its overflow. */
.nex-hero__slot--mobile .nex-hero__label,
.nex-hero__slot--console .nex-hero__label {
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.nex-hero__slot--website .nex-hero__label,
.nex-hero__slot--pos .nex-hero__label {
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* desktop: the same spread, opened out to the reference image's proportions.
   Read the four products against the character's silhouette, not against its
   frame — the artwork is a person, and its frame is mostly air beside the head.

   The character fills the middle 46% — the widest thing on the stage — and the
   four products are sized and placed around it, so the drawing ends up 25px to
   165px clear of the closest screenshot edge at every width:

   - a 5% inset, the tightest the right column can take: the character's
     outstretched arm is at the height of the restaurant POS card, so a smaller
     inset runs the two together;
   - the top pair drops to the character's shoulders. Beside the head the
     drawing is only ~30% as wide as its frame, so a corner-placed screenshot
     can never come near it — held up in the corner the Console card sits 260px
     clear of the drawing. Sliding the pair down to where the shoulders and
     arms are is what actually closes that air;
   - the two columns' slots share a centre line, which is why the taller App
     card starts higher than the Console card it lines up with. */
@media (min-width: 992px) {
    .nex-hero__route {
        display: block;
    }

    .nex-hero__slot--character {
        width: 46%;
    }

    .nex-hero__slot--mobile {
        top: 17%;
        left: 5%;
        width: 17%;
    }

    .nex-hero__slot--console {
        top: 24%;
        right: 5%;
        width: 21%;
    }

    .nex-hero__slot--website {
        left: 5%;
        width: 21%;
    }

    .nex-hero__slot--pos {
        right: 5%;
        width: 21%;
    }

    /* A wide stage has room to hang the bottom labels further down */
    .nex-hero__slot--website .nex-hero__label,
    .nex-hero__slot--pos .nex-hero__label {
        bottom: -3rem;
    }
}

/* ------------------------------------------------- tablet / iPad — fluid -- */
/* Between the phone card and the wide desktop spread the collage morphs from
   one into the other rather than switching: every value below is the phone's
   figure at 576px and the desktop block's figure at 992px, walked linearly in
   between. That keeps the layout continuous at both joins — crossing either
   breakpoint changes nothing on screen — and means no width in this range gets
   read as a compromise between the two designs.

   A tablet is wide enough that the phone's full-bleed character would stand
   over 1100px tall, so the character's width is spelled out in px/vw rather
   than as a percentage of the stage: it starts exactly where the phone leaves
   off and eases down to the desktop's 46% as the viewport approaches 992px. */
@media (min-width: 576px) and (max-width: 991px) {
    /* 546px wide at 576px, 409px at 992px. The margins are half of
       (100% - width), written out so the frame stays dead centre — leave them
       auto on an over-constrained block and the browser flushes it left. */
    .nex-hero__slot--character {
        width: calc(735.8px - 32.97vw);
        margin-left: calc(50% - 367.9px + 16.49vw);
        margin-right: calc(50% - 367.9px + 16.49vw);
    }

    .nex-hero__slot--mobile {
        top: calc(83.8px + 1.34vw);
        left: calc(-61.5px + 10.68vw);
        width: calc(20px + 13.21vw);
    }

    .nex-hero__slot--console {
        top: calc(28.5px + 10.95vw);
        right: calc(-61.5px + 10.68vw);
        width: calc(139.7px + 4.73vw);
    }

    .nex-hero__slot--website {
        left: calc(-61.5px + 10.68vw);
        width: calc(103.5px + 8.38vw);
    }

    .nex-hero__slot--pos {
        right: calc(-61.5px + 10.68vw);
        width: calc(139.7px + 4.73vw);
    }

    /* The chip seam and the rise that pays for it, exactly as on a phone; the
       rise is spent by 992px, where the desktop block has these tiles at 0. */
    .nex-hero__slot--website,
    .nex-hero__slot--pos {
        bottom: calc(57.2px - 5.77vw);
    }

    .nex-hero__slot--website .nex-hero__label,
    .nex-hero__slot--pos .nex-hero__label {
        bottom: -3rem;
    }

    .nex-hero__label {
        font-size: calc(8.2px + .38vw);
    }
}

/* -------------------------------------------------- entrance — zoom in -- */
/* Choreography taken from the Blinkco banner: every screenshot zooms in from a
   third of its size while the character crosses the card from the right.

It lives entirely in the stylesheet, the way Elementor's entrance animations
do: the `both` fill holds the hidden first frame through each card's own delay,
so a card can never flash at full size before its turn, and no script has to
arm or rescue it. The animation ends on the element's natural state, so a
visitor with scripting off gets the same zoom in.

1.25s ease is the duration and easing Elementor runs these at. */
.nex-reveal {
    animation: nex-zoom-in 1.25s ease var(--d, 0ms) both;
}

/* The fade runs ahead of the scale: half way through, the card is already
   fully opaque and still growing. */
@keyframes nex-zoom-in {
    from { opacity: 0; transform: scale3d(.3, .3, .3); }
    50% { opacity: 1; }
    to { opacity: 1; transform: scale3d(1, 1, 1); }
}

/* The character is the banner's main visual, so it arrives across the card
   rather than popping in the middle of it. Its keyframes carry the hidden
   state: it waits off to the right, past the clipped edge of the card. */
.nex-reveal--slide {
    animation-name: nex-slide-in-right;
}

@keyframes nex-slide-in-right {
    from { opacity: 0; transform: translate3d(100%, 0, 0); }
    to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- header drop -- */
/* Plays from the first paint rather than waiting on nexora-hero.js: the header
   is the first thing in the document, and arming it from script would show it,
   hide it, then slide it back in. GSAP drives .header-wrapper on scroll, so the
   drop is on the inner bar and leaves the wrapper's own transform alone. */
.nex-header-in {
    animation: nex-header-drop .8s cubic-bezier(.16, 1, .3, 1);
}

@keyframes nex-header-drop {
    from { opacity: 0; transform: translate3d(0, -1.5rem, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---------------------------------------------------------- logo marquee -- */
/* nexora-hero.js wraps the logos in a track holding a second, identical run,
   so the track can slide by exactly half its own width and land that run where
   the first began — no seam, no jump. Without the script the strip simply
   stays the static row of logos it has always been. */
.clients {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
}

.clients .clients__track {
    display: flex;
    flex: none;
    width: max-content;
    animation: nex-marquee 34s linear infinite;
    will-change: transform;
}

.clients .clients__group {
    display: flex;
    flex: none;
    align-items: center;
}

@keyframes nex-marquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

/* Reading the strip should not mean chasing it */
.clients:hover .clients__track {
    animation-play-state: paused;
}

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 575px) {
    .nex-hero {
        padding-top: 7rem;
    }

    .nex-hero__card {
        border-radius: 22px;
    }

    /* Phone proportions follow the reference banner: the character takes the
       whole card, so the shoulders and arms run to its edges and the four
       screenshots sit on its corners instead of in a lane beside it.

       There is no side lane left, and at this size none is wanted: the App and
       Console cards now sit over the character's empty frame, clearing the head
       itself by 35px to 71px, while the Website and POS cards — lower down,
       where the drawing is widest — ride over the figure at the hips, which is
       exactly what the reference shows them doing. */
    .nex-hero__slot--character {
        /* Wider than the stage on purpose: the frame swallows the card's own
           padding, so the drawing spans ~86% of the card instead of 76%. The
           bleed stops at the card's edge — measured against the artwork, its
           widest row (the extended arm, 97% of the frame) still lands 10px
           inside, so the figure is enlarged, never cropped. */
        width: calc(100% + 2.5rem);
        margin-left: -1.25rem;
        margin-right: -1.25rem;
    }

    /* The character is dropped by the card's bottom padding, so the top of the
       stage sits that far above its head. Pushing the pair down by a similar
       share of the stage puts them beside the head and shoulders rather than
       in the strip above them, their chips tucked under the card's padding. */
    /* 19% rather than 21%: the drawing's head sits left of centre in its frame,
       so at full bleed a 21% App card clips the edge of the hair. 19% leaves it
       grazing by single digits, which reads as touching rather than covering —
       and it matches the reference's phone at ~17% of the card. */
    .nex-hero__slot--mobile {
        top: 12%;
        width: 19%;
    }

    .nex-hero__slot--console {
        top: 12%;
        width: 33%;
    }

    .nex-hero__slot--website {
        width: 30%;
    }

    .nex-hero__slot--pos {
        width: 33%;
    }

    /* "Website" and "Restaurant POS" get more air between chip and tile than
       the reference shows. At -1.5rem the chip hangs almost entirely below its
       tile, leaving a ~2px seam; the pair rises by the room the wider gap
       needs, so the chips stay on the line they were on rather than being
       pushed down into the card's clipped bottom padding. That takes the seam
       to ~26px — the spacing the desktop block already uses — and the top pair
       keeps its tighter spacing. */
    .nex-hero__slot--website,
    .nex-hero__slot--pos {
        bottom: 1.5rem;
    }

    .nex-hero__slot--website .nex-hero__label,
    .nex-hero__slot--pos .nex-hero__label {
        bottom: -3rem;
    }

    /* The reference keeps its chips on a phone, and these are the widths that
       let them: with the character at 82% the screenshots are wide enough that
       "Merchant Console" centred over the 28% console card lands inside the
       card's right edge rather than past it. Sized down so that still holds at
       320px. */
    .nex-hero__label {
        padding: .28rem .6rem;
        font-size: .65rem;
    }
}

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
    .nex-reveal,
    .nex-reveal--slide {
        animation: none;
    }

    .nex-hero__eyebrow i {
        animation: none;
    }

    .nex-hero__dot {
        animation: none;
    }

    .nex-header-in {
        animation: none;
    }

    .clients .clients__track {
        animation: none;
    }

    .nex-hero__cta:hover {
        transform: none;
    }
}

/* ==========================================================================
   NexoraTech — homepage Featured Work

   A five-up card row: product shot, title, one-line summary, CTA. The layout
   follows the reference image, but the palette is NexoraTech's — orange CTA on
   white with ink headings rather than the reference's purple.
   ========================================================================== */

.featured-work {
    padding: 6rem 0;
    background: #fff;
}

.featured-work__title {
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
    color: #0d0e13;
    font-family: poppins-semi-bold;
    font-size: clamp(2rem, 3.2vw, 3.25rem);
    line-height: 1.15;
    text-align: center;
}

/* the orange full stop every other heading on the site carries */
.featured-work__title span {
    color: #ff611a;
}

.featured-work__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
}

.fw-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    text-align: center;
}

/* Fixed-height stage: the shots are wide device mockups of slightly different
   proportions, so bottom-aligning them inside one height keeps them sitting on
   a shared baseline the way the reference's devices do. */
.fw-card__media {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 190px;
    margin-bottom: 1.75rem;
}

.fw-card__media img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.fw-card__title {
    margin: 0 0 .85rem;
    color: #0d0e13;
    font-family: poppins-semi-bold;
    font-size: 1.3rem;
    line-height: 1.3;
}

.fw-card__text {
    margin: 0 0 1.75rem;
    color: #6a7282;
    font-size: 1rem;
    line-height: 1.55;
}

/* The five titles run to wildly different line counts — "Modern POS & RMS" is
   one line while "Inventory Management System" takes three — which used to
   leave the copy and the CTAs sitting at ragged heights. From the first
   multi-column breakpoint up, reserve the longest expected line count so every
   card shares the same internal rhythm: title, summary and button all line up
   across the row. Single-column mobile stacks the cards, so it only needs the
   natural text height. em units keep this correct as the type steps down. */
@media (min-width: 576px) {
    .fw-card__title {
        min-height: 3.9em;
        /* three lines at the 1.3 line-height */
    }

    .fw-card__text {
        min-height: 4.65em;
        /* three lines at the 1.55 line-height */
    }
}

/* margin-top:auto lands every CTA on one line — the reference leaves its
   buttons ragged because the copy above them runs to different lengths. */
.fw-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: .85rem 2rem;
    border-radius: .5rem;
    background: #ff611a;
    color: #fff;
    font-family: poppins-semi-bold;
    font-size: 1rem;
    text-decoration: none;
    transition: background .25s ease, transform .25s ease;
}

.fw-card__btn:hover {
    background: #0d0e13;
    color: #fff;
    transform: translateY(-2px);
}

/* Four cards would leave a lone orphan in a five-up row, so the spacing down
   the breakpoints goes 5 → 3 → 2 → 1 rather than to even columns. */
@media (max-width: 1199.98px) {
    .featured-work__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .featured-work {
        padding: 4rem 0;
    }

    .featured-work__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 1rem;
    }

    .fw-card__media {
        height: 150px;
        margin-bottom: 1.25rem;
    }

    .fw-card__title {
        font-size: 1.15rem;
    }

    .fw-card__text {
        margin-bottom: 1.25rem;
        font-size: .95rem;
    }
}

@media (max-width: 575.98px) {
    .featured-work__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fw-card__media {
        height: 140px;
    }

    .fw-card__btn {
        padding: .75rem 1.5rem;
        font-size: .95rem;
    }
}