/* ==========================================================================
   NexoraTech — Modern POS & RMS product page

   A long-form product page: a lavender hero card with the till screen and a
   phone bleeding over it, a proof band, four alternating feature rows, two
   card grids, a rollout list, a screen gallery and a dark closing CTA.

   Everything here is scoped to the .nex-pos block, so the page can load
   app268c.css for the header, footer and grid utilities and still get a
   layout of its own. Motion is opacity and transform only — the compositor
   keeps it smooth — and every animation is switched off for anyone who asks
   for reduced motion (see the bottom block).
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
.nex-pos {
    --np-purple: #5b21b6;
    --np-purple-deep: #46128e;
    --np-orange: #ff611a;
    --np-ink: #0d0e13;
    --np-body: #584b75;
    --np-lavender: #e8dff5;
    --np-wash: #f6f2fb;
    --np-line: rgba(70, 18, 142, .12);
    --np-radius: 30px;
    --np-shadow: 0 18px 40px -22px rgba(52, 20, 110, .45);
}

/* --------------------------------------------------------- breadcrumbs -- */
.nex-pos__crumbs {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-bottom: 1.5rem;
    color: var(--np-body);
    font-family: poppins-regular;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nex-pos__crumbs a {
    color: var(--np-body);
    text-decoration: none;
    transition: color .3s ease;
}

.nex-pos__crumbs a:hover {
    color: var(--np-orange);
}

.nex-pos__crumbs span[aria-hidden] {
    color: #bbc4d2;
}

/* ------------------------------------------------------------ hero card -- */
.nex-pos__hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2rem, 4.5vw, 3.5rem) clamp(1.25rem, 4vw, 3.5rem);
    border-radius: var(--np-radius);
    background: var(--np-lavender);
}

/* soft light behind the device so it never reads as pasted on */
.nex-pos__hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -18%;
    right: -14%;
    width: 62%;
    padding-bottom: 62%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.nex-pos__hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

.nex-pos__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: var(--np-purple-deep);
    font-family: poppins-regular;
    font-size: .85rem;
    letter-spacing: .01em;
}

.nex-pos__eyebrow i {
    flex: none;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--np-orange);
    animation: nex-pos-pulse 2.4s ease-out infinite;
}

@keyframes nex-pos-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 97, 26, .5); }
    70% { box-shadow: 0 0 0 .6rem rgba(255, 97, 26, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 97, 26, 0); }
}

.nex-pos__title {
    margin: 1.25rem 0 0;
    color: var(--np-ink);
    font-family: poppins-semi-bold;
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.01em;
}

.nex-pos__title span {
    color: var(--np-orange);
}

.nex-pos__lede {
    max-width: 34rem;
    margin: 1.15rem 0 0;
    color: var(--np-body);
    font-family: poppins-light;
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.75;
}

.nex-pos__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem 1.25rem;
    align-items: center;
    margin-top: 1.9rem;
}

/* Primary call to action — same purple pill as the homepage hero */
.nex-pos__cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: 1.05rem 2.1rem;
    border: 0;
    border-radius: 8px;
    background: var(--np-purple);
    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-pos__cta:hover {
    background: #4c1d95;
    box-shadow: 0 18px 36px -14px rgba(91, 33, 182, .95);
    color: #fff;
    transform: translateY(-2px);
}

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

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

/* Secondary CTA — underlined link, so the hero keeps one obvious action */
.nex-pos__cta--ghost {
    padding: 1.05rem .25rem;
    background: none;
    box-shadow: none;
    border-radius: 0;
    color: var(--np-purple-deep);
    font-family: poppins-medium;
    position: relative;
}

.nex-pos__cta--ghost::after {
    content: "";
    position: absolute;
    right: .25rem;
    bottom: .85rem;
    left: .25rem;
    height: 1px;
    background: currentColor;
    opacity: .35;
    transform-origin: 0 50%;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.nex-pos__cta--ghost:hover {
    background: none;
    box-shadow: none;
    color: var(--np-orange);
    transform: none;
}

.nex-pos__cta--ghost:hover::after {
    opacity: 1;
    transform: scaleX(1.02);
}

/* ------------------------------------------------------- hero mockups -- */
.nex-pos__visual {
    position: relative;
    z-index: 1;
}

/* The banner is a transparent cutout, so the element must not paint a card
   behind it: no white fill, no rounded-rectangle shadow. The shadow is cast
   from the artwork's own silhouette instead, which is what makes the devices
   sit on the lavender rather than float over it. */
.nex-pos__screen {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 34px 50px rgba(46, 16, 96, .2));
    animation: nex-pos-zoom .9s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes nex-pos-zoom {
    from { opacity: 0; transform: scale(.94) translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- proof band -- */
.nex-pos__proof {
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.nex-pos__proof .nex-pos__h2 {
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

/* Who the platform suits, kept as one quiet line instead of another row of
   pills vying with the numbers above them. */
.nex-pos__proof-note {
    max-width: 44rem;
    margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
    color: var(--np-body);
    font-family: poppins-light;
    font-size: .95rem;
    line-height: 1.7;
    text-align: center;
}

.nex-pos__stats-list {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nex-pos__stat {
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--np-line);
    border-radius: 20px;
    background: var(--np-wash);
}

.nex-pos__stat-value {
    display: block;
    color: var(--np-purple);
    font-family: poppins-semi-bold;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
}

.nex-pos__stat-label {
    display: block;
    margin-top: .75rem;
    color: var(--np-body);
    font-family: poppins-light;
    font-size: .95rem;
    line-height: 1.6;
}

/* ------------------------------------------------------- section heads -- */
.nex-pos__section {
    padding: clamp(1.75rem, 3.5vw, 3rem) 0;
}

.nex-pos__head {
    max-width: 46rem;
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.nex-pos__head--center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.nex-pos__kicker {
    display: block;
    margin-bottom: .85rem;
    color: var(--np-orange);
    font-family: poppins-medium;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.nex-pos__h2 {
    margin: 0;
    color: var(--np-ink);
    font-family: poppins-semi-bold;
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.nex-pos__sub {
    margin: 1rem 0 0;
    color: var(--np-body);
    font-family: poppins-light;
    font-size: 1.05rem;
    line-height: 1.75;
}

/* --------------------------------------------------------- feature rows -- */
.nex-pos__feature {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
    padding: clamp(1.25rem, 2.5vw, 2rem) 0;
}

.nex-pos__feature+.nex-pos__feature {
    border-top: 1px solid var(--np-line);
}

.nex-pos__feature-media {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: var(--np-wash);
    box-shadow: var(--np-shadow);
}

.nex-pos__feature-media img {
    display: block;
    width: 100%;
    height: auto;
}

.nex-pos__feature-body h3 {
    margin: 0;
    color: var(--np-ink);
    font-family: poppins-semi-bold;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 600;
    line-height: 1.25;
}

.nex-pos__feature-body p {
    margin: 1rem 0 0;
    color: var(--np-body);
    font-family: poppins-light;
    font-size: 1.02rem;
    line-height: 1.75;
}

.nex-pos__bullets {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.nex-pos__bullet {
    display: grid;
    gap: .2rem;
    padding-left: 1.5rem;
    position: relative;
}

.nex-pos__bullet::before {
    content: "";
    position: absolute;
    top: .5rem;
    left: 0;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--np-orange);
}

.nex-pos__bullet strong {
    color: var(--np-ink);
    font-family: poppins-medium;
    font-size: 1rem;
    font-weight: 500;
}

.nex-pos__bullet span {
    color: var(--np-body);
    font-family: poppins-light;
    font-size: .95rem;
    line-height: 1.65;
}

/* --------------------------------------------------------- card grids -- */
.nex-pos__cards,
.nex-pos__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

.nex-pos__card {
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--np-line);
    border-radius: 20px;
    background: #fff;
    transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.nex-pos__card:hover {
    border-color: rgba(255, 97, 26, .45);
    box-shadow: var(--np-shadow);
    transform: translateY(-4px);
}

.nex-pos__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1.1rem;
    border-radius: 12px;
    background: var(--np-lavender);
    color: var(--np-purple-deep);
}

.nex-pos__card-icon svg {
    width: 22px;
    height: 22px;
}

.nex-pos__card h3 {
    margin: 0;
    color: var(--np-ink);
    font-family: poppins-semi-bold;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
}

.nex-pos__card p {
    margin: .6rem 0 0;
    color: var(--np-body);
    font-family: poppins-light;
    font-size: .95rem;
    line-height: 1.7;
}

/* The six capabilities read as a numbered list — a rule above each one, no
   card chrome — so the benefits grid above keeps the weight and the page
   never plays two identical walls of cards back to back. */
.nex-pos__card--numbered {
    position: relative;
    padding: 1.5rem 0 0;
    border: 0;
    border-top: 2px solid var(--np-line);
    border-radius: 0;
    background: none;
}

.nex-pos__card--numbered:hover {
    border-top-color: var(--np-orange);
    box-shadow: none;
    transform: none;
}

.nex-pos__card-num {
    display: block;
    margin-bottom: .9rem;
    color: rgba(70, 18, 142, .28);
    font-family: poppins-semi-bold;
    font-size: .85rem;
    letter-spacing: .12em;
}

/* --------------------------------------------------------------- steps -- */
.nex-pos__steps {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: nex-step;
}

.nex-pos__step {
    position: relative;
    padding: 1.75rem 1.5rem;
    border-radius: 20px;
    background: var(--np-wash);
    counter-increment: nex-step;
}

.nex-pos__step::before {
    content: counter(nex-step, decimal-leading-zero);
    display: block;
    margin-bottom: .75rem;
    color: var(--np-orange);
    font-family: poppins-semi-bold;
    font-size: 1.5rem;
    line-height: 1;
}

.nex-pos__step h3 {
    margin: 0;
    color: var(--np-ink);
    font-family: poppins-semi-bold;
    font-size: 1.1rem;
    font-weight: 600;
}

.nex-pos__step p {
    margin: .6rem 0 0;
    color: var(--np-body);
    font-family: poppins-light;
    font-size: .95rem;
    line-height: 1.7;
}

/* ------------------------------------------------------- closing banner -- */
.nex-pos__cta-band {
    margin-top: clamp(2rem, 4vw, 3.5rem);
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
    border-radius: var(--np-radius);
    background: #000;
    color: #fff;
}

.nex-pos__cta-band h2 {
    margin: 0;
    color: #fff;
    font-family: poppins-semi-bold;
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.nex-pos__cta-band h2 span {
    color: var(--np-orange);
}

.nex-pos__cta-band p {
    max-width: 40rem;
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, .72);
    font-family: poppins-light;
    font-size: 1.05rem;
    line-height: 1.75;
}

.nex-pos__cta-band .nex-pos__actions {
    margin-top: 1.75rem;
}

.nex-pos__cta-band .nex-pos__cta--ghost {
    color: #fff;
}

.nex-pos__contact-lines {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.75rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
    font-family: poppins-regular;
    font-size: .95rem;
}

.nex-pos__contact-lines a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: color .3s ease;
}

.nex-pos__contact-lines a:hover {
    color: var(--np-orange);
}

/* ----------------------------------------------------------- gallery -- */
/* These are transparent cutouts rather than opaque screenshots, so a rounded
   rectangle shadow would surface as a ghost box behind the empty corners and
   the radius would clip artwork that runs to the image edge. Cast the shadow
   from the artwork's own silhouette instead. */
.nex-pos__gallery img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 28px 44px rgba(46, 16, 96, .18));
}

/* --------------------------------------------------------- scroll cue -- */
/* Elements marked data-nex-reveal fade up once and stay put. The class is
   added by nexora-pos.js; without scripting the content simply shows. */
.nex-pos [data-nex-reveal] {
    opacity: 1;
}

.nex-pos.js [data-nex-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--nex-d, 0ms);
}

.nex-pos.js [data-nex-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* -------------------------------------------------------- breakpoints -- */
@media (min-width: 576px) {
    .nex-pos__cards,
    .nex-pos__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (min-width: 992px) {
    /* Hero: copy left, device right — a wide card, not a stacked column */
    .nex-pos__hero-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    }

    .nex-pos__stats-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

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

    /* Feature rows alternate sides. Written as two explicit orders rather
       than a flipped direction, so the reading order in the HTML stays the
       same whatever column a row lands in. */
    .nex-pos__feature {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .nex-pos__feature--flip .nex-pos__feature-media {
        order: 2;
    }

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

@media (min-width: 1200px) {
    .nex-pos__feature {
        gap: clamp(3rem, 6vw, 5rem);
    }
}

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
    .nex-pos *,
    .nex-pos *::before,
    .nex-pos *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        transition-delay: 0ms !important;
    }

    .nex-pos.js [data-nex-reveal] {
        opacity: 1;
        transform: none;
    }
}