/* ==========================================================================
   RekordPOS — Landing page
   Depends on rp-core.css (tokens + motion primitives).
   Every animated property is transform / opacity / a CSS custom property.
   ========================================================================== */

.rp-main { position: relative; z-index: 1; }

/* ==========================================================================
   1. HERO
   ========================================================================== */

.rp-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--rp-nav-h) + 3.5rem);
    padding-bottom: 5rem;
    overflow: clip;
    isolation: isolate;
}

/* --- ambient depth field --- */
.rp-hero__blob-a {
    top: -18%;
    inset-inline-start: -12%;
    width: 720px;
    height: 720px;
    background: radial-gradient(circle, rgba(197, 33, 39, .13), transparent 68%);
    opacity: 1;
}
.rp-hero__blob-b {
    top: 8%;
    inset-inline-end: -16%;
    width: 640px;
    height: 640px;
    background: radial-gradient(circle, rgba(226, 87, 31, .11), transparent 70%);
    opacity: 1;
}
.rp-hero__blob-c {
    bottom: -30%;
    inset-inline-start: 32%;
    width: 760px;
    height: 560px;
    background: radial-gradient(circle, rgba(197, 33, 39, .07), transparent 72%);
    opacity: 1;
}

/* Horizon glow line under the hero */
.rp-hero::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(1100px, 92vw);
    height: 1px;
    transform: translateX(-50%);
    background: var(--rp-grad-line);
    opacity: .5;
}

.rp-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
}

/* --- copy column --- */
.rp-hero__title {
    font-size: clamp(2.6rem, 6.4vw, 5.2rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.045em;
    margin: 1.6rem 0 0;
}

.rp-hero__title .rp-hero__line { display: block; }

/* Rotating vertical word */
.rp-rotator {
    display: inline-block;
    min-width: 1ch;
    background: var(--rp-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    transition: transform .42s var(--rp-ease-out), opacity .42s var(--rp-ease-out);
}
.rp-rotator--in  { transform: translateY(0);      opacity: 1; }
.rp-rotator--out { transform: translateY(-.5em);  opacity: 0; }

.rp-hero__desc {
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 1.75;
    color: var(--rp-fg-muted);
    max-width: 50ch;
    margin: 1.75rem 0 0;
}

.rp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .85rem;
    margin-top: 2.5rem;
}

/* Capability chips — factual product traits, not invented metrics */
.rp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--rp-border);
}
.rp-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--rp-border);
    background: var(--rp-surface);
    font-size: .8rem;
    font-weight: 500;
    color: var(--rp-fg-muted);
    transition: border-color .3s var(--rp-ease), color .3s var(--rp-ease), transform .35s var(--rp-ease-spring);
}
.rp-chip i { color: var(--rp-red-lit); font-size: .8rem; }
.rp-chip:hover {
    color: var(--rp-fg);
    border-color: rgba(197, 33, 39, .38);
    transform: translateY(-2px);
}

.rp-hero__stores { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.75rem; }
.rp-hero__stores img {
    height: 46px;
    width: auto;
    object-fit: contain;
    border-radius: 9px;
    transition: transform .35s var(--rp-ease-spring);
}
.rp-hero__stores a:hover img { transform: translateY(-3px) scale(1.03); }

/* --- visual column --- */
.rp-hero__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Pointer depth: --px/--py are written by rp-motion */
    transform: translate3d(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 14px), 0);
}

.rp-hero__glow {
    position: absolute;
    inset: 6% 4%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197, 33, 39, .14), transparent 66%);
    filter: blur(60px);
    z-index: 0;
    animation: rp-breathe 7s var(--rp-ease) infinite;
}
@keyframes rp-breathe {
    0%, 100% { transform: scale(1);    opacity: .78; }
    50%      { transform: scale(1.09); opacity: 1; }
}

/* Two layers: the outer owns the entrance reveal, the inner owns the
   pointer tilt. One transform per element — they never fight. */
.rp-hero__device {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 560px;
}
.rp-hero__device-tilt {
    transform-style: preserve-3d;
    transition: transform .35s var(--rp-ease-out);
}
.rp-hero__device img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 30px 60px rgba(16, 24, 40, .18));
}

/* Live activity panel — one docked card that cycles product states.
   Three nested layers, one transform each:
     .rp-live       → scroll parallax (inline transform from rp-motion)
     .rp-live__rise → entrance reveal (CSS class transform)
     .rp-live__item → slide in/out    (CSS class transform)
   Collapsing these onto one element makes the last writer win the cascade
   and silently kill the others.

   Centred without translateX(-50%) on purpose: .rp-live owns the parallax
   transform, so it can never carry a centring transform too. inset-inline
   + margin-inline:auto does the same job with zero transform. */
.rp-live {
    position: absolute;
    z-index: 3;
    bottom: 1%;
    inset-inline: 0;
    margin-inline: auto;
    width: min(330px, 84%);
}
.rp-live__panel {
    position: relative;
    overflow: hidden;
    padding: .7rem .95rem .85rem;
    border-radius: 18px;
    border: 1px solid var(--rp-border-strong);
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: var(--rp-shadow-md);
}

/* Header row: pulse + label + step dots */
.rp-live__bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
}
.rp-live__pulse {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 999px;
    background: var(--rp-red-lit);
    box-shadow: 0 0 0 0 rgba(197, 33, 39, .45);
    animation: rp-live-pulse 2.4s var(--rp-ease) infinite;
}
@keyframes rp-live-pulse {
    0%       { box-shadow: 0 0 0 0 rgba(197, 33, 39, .45); }
    70%,100% { box-shadow: 0 0 0 7px rgba(197, 33, 39, 0); }
}
.rp-live__label {
    font-family: var(--rp-font-mono);
    font-size: .58rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rp-fg-dim);
}
.rp-live__dots {
    display: flex;
    align-items: center;
    gap: .28rem;
    margin-inline-start: auto;
}
.rp-live__dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--rp-border-strong);
    transition: width .45s var(--rp-ease-out), background-color .45s var(--rp-ease);
}
.rp-live__dot.is-on { width: 15px; background: var(--rp-red-lit); }

/* Stacked states — exactly one is visible at a time */
.rp-live__view {
    position: relative;
    height: 40px;
}
.rp-live__item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: .7rem;
    opacity: 0;
    transform: translate3d(0, 55%, 0);
    transition: transform .5s var(--rp-ease-out), opacity .5s var(--rp-ease-out);
    pointer-events: none;
}
.rp-live__item.is-in  { opacity: 1; transform: translate3d(0, 0, 0); }
.rp-live__item.is-out { opacity: 0; transform: translate3d(0, -55%, 0); }

.rp-live__icon {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: .85rem;
}
.rp-live__k { display: block; font-family: var(--rp-font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rp-fg-dim); }
.rp-live__v { display: block; font-family: var(--rp-font-display); font-size: .95rem; font-weight: 600; color: var(--rp-fg); line-height: 1.25; }

/* Scroll cue */
.rp-cue {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    z-index: 3;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    font-family: var(--rp-font-mono);
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--rp-fg-dim);
}
.rp-cue__rail {
    width: 1px;
    height: 52px;
    background: linear-gradient(180deg, transparent, var(--rp-border-strong));
    position: relative;
    overflow: hidden;
}
.rp-cue__rail::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: -50%;
    height: 50%;
    background: linear-gradient(180deg, transparent, var(--rp-red-lit));
    animation: rp-cue 2.2s var(--rp-ease) infinite;
}
@keyframes rp-cue {
    0%   { transform: translateY(0);    opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translateY(300%); opacity: 0; }
}

@media (max-width: 991px) {
    .rp-hero { min-height: 0; padding-top: calc(var(--rp-nav-h) + 2rem); }
    .rp-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
    .rp-hero__stage { order: -1; }
    .rp-hero__device { max-width: 420px; }
    .rp-cue { display: none; }
}
@media (max-width: 575px) {
    .rp-live { width: min(300px, 90%); }
    .rp-live__panel { padding: .6rem .8rem .75rem; }
    .rp-live__view { height: 36px; }
    .rp-live__icon { width: 32px; height: 32px; }
    .rp-live__v { font-size: .85rem; }
}

/* ==========================================================================
   2. CAPABILITY TICKER
   A single centred line that cross-fades between the real feature titles.
   Deliberately fade + blur rather than a vertical slide, so it does not
   read as a second copy of the hero headline rotator.
   ========================================================================== */

.rp-ticker {
    position: relative;
    padding-block: 1.5rem;
    border-block: 1px solid var(--rp-border);
    background: var(--rp-bg-2);
}
.rp-ticker__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin: 0;
}
.rp-ticker__inner > i { color: var(--rp-red-lit); font-size: .72rem; }
.rp-ticker__word {
    display: inline-block;
    text-align: center;
    font-family: var(--rp-font-mono);
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rp-fg-dim);
    white-space: nowrap;
    /* min-width is measured once by rp-motion so the row never jogs sideways
       as the longest and shortest titles swap in. */
    transition: opacity .38s var(--rp-ease), filter .38s var(--rp-ease);
}
.rp-ticker__word.is-in  { opacity: 1; filter: blur(0); }
.rp-ticker__word.is-out { opacity: 0; filter: blur(4px); }

/* ==========================================================================
   3. FEATURES — bento grid with column drift
   ========================================================================== */

.rp-features__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* A flat tinted band gives the page rhythm on white far better than
       washes do; the tints stay subordinate to the cards sitting on top. */
    background:
        radial-gradient(ellipse 60% 50% at 15% 0%,  rgba(197, 33, 39, .05), transparent 70%),
        radial-gradient(ellipse 50% 50% at 90% 100%, rgba(226, 87, 31, .04), transparent 70%),
        var(--rp-bg-2);
    pointer-events: none;
}

/* Flex, not grid, for the same reason .rp-plans is flex: a trailing partial
   row centres instead of being stranded on the left. Column counts are fixed
   per breakpoint rather than auto-fill, so the track count never wobbles. */
.rp-bento {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.rp-feat {
    position: relative;
    flex: 0 0 calc((100% - 3rem) / 4);
    max-width: calc((100% - 3rem) / 4);
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    min-height: 196px;
    padding: 1.6rem 1.4rem;
    border-radius: var(--rp-r-lg);
    border: 1px solid var(--rp-border);
    background: var(--rp-card);
    box-shadow: var(--rp-shadow-sm);
    overflow: hidden;
    transition: border-color .45s var(--rp-ease), transform .55s var(--rp-ease-out), box-shadow .45s var(--rp-ease);
}
.rp-feat::before {
    content: '';
    position: absolute;
    inset-inline: 15%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rp-red), transparent);
    opacity: .45;
}
.rp-feat:hover {
    transform: translateY(-6px);
    border-color: rgba(197, 33, 39, .38);
    box-shadow: 0 18px 40px -18px rgba(197, 33, 39, .28), var(--rp-shadow-sm);
}

.rp-feat__no {
    position: absolute;
    top: 1.15rem;
    inset-inline-end: 1.25rem;
    font-family: var(--rp-font-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    color: var(--rp-fg-dim);
    opacity: .55;
    transition: color .4s var(--rp-ease), opacity .4s var(--rp-ease);
}
.rp-feat:hover .rp-feat__no { color: var(--rp-red-lit); opacity: 1; }

.rp-feat__icon {
    position: relative;
    width: 58px;
    height: 58px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 17px;
    border: 1px solid var(--rp-border);
    box-shadow: inset 0 1px 0 var(--rp-border);
    transition: transform .5s var(--rp-ease-spring);
}
.rp-feat:hover .rp-feat__icon { transform: translateY(-3px) rotate(-4deg) scale(1.06); }
.rp-feat__icon img { width: 30px; height: 30px; object-fit: contain; }

/* Clamped to two lines with a reserved two-line box, so a one-word title and
   a six-word title produce cards of identical height. Without this the rows
   land on different baselines and the whole grid reads as misaligned. */
.rp-feat__title {
    margin: 0;
    font-family: var(--rp-font-display);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--rp-fg);
    letter-spacing: -.015em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

@media (max-width: 1199px) {
    .rp-feat { flex-basis: calc((100% - 2rem) / 3); max-width: calc((100% - 2rem) / 3); }
}
@media (max-width: 767px) {
    .rp-feat { flex-basis: calc((100% - 1rem) / 2); max-width: calc((100% - 1rem) / 2); }
}
@media (max-width: 419px) {
    .rp-feat { flex-basis: 100%; max-width: 100%; }
}

/* ==========================================================================
   4. INTERFACE RAIL — one centred, swipeable row

   The auto-margin pseudo-spacers are what make this centre when the
   screenshots fit and scroll cleanly when they don't. `justify-content:
   center` cannot do both: once the content overflows a scroll container it
   clips the leading edge and the first screenshot becomes unreachable.
   The spacers absorb the free space when there is any and collapse to zero
   when there isn't, so neither end is ever cut off.
   ========================================================================== */

.rp-rails {
    position: relative;
    display: flex;
    gap: 1.25rem;
    /* Room for the hover lift and the card shadow — the scroll container
       would otherwise clip both and grow a vertical scrollbar. */
    padding: 1.75rem 1rem;
    overflow-x: auto;
    /* Explicit, not left to compute: the entrance reveal starts 42px low and
       would otherwise pop a vertical scrollbar on the way in. */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.rp-rails::-webkit-scrollbar { display: none; }
.rp-rails::before,
.rp-rails::after { content: ''; flex: 0 0 0; margin: auto; }

.rp-shot {
    position: relative;
    flex: none;
    scroll-snap-align: center;
    width: clamp(200px, 20vw, 268px);
    border-radius: 22px;
    padding: 10px;
    border: 1px solid var(--rp-border);
    background: var(--rp-card);
    box-shadow: var(--rp-shadow-md);
    transition: transform .55s var(--rp-ease-out), border-color .4s var(--rp-ease), box-shadow .45s var(--rp-ease);
}
.rp-shot:hover {
    transform: translateY(-10px) scale(1.025);
    border-color: rgba(197, 33, 39, .38);
    box-shadow: 0 22px 48px -20px rgba(197, 33, 39, .3), var(--rp-shadow-sm);
}
.rp-shot img {
    width: 100%;
    height: clamp(300px, 30vw, 420px);
    object-fit: cover;
    object-position: top center;
    border-radius: 14px;
    display: block;
    background: var(--rp-surface-2);
}

/* ==========================================================================
   5. DEMO — scroll-scrubbed reveal frame
   ========================================================================== */

.rp-demo__frame {
    position: relative;
    max-width: 980px;
    margin-inline: auto;
    border-radius: clamp(18px, 2.4vw, 30px);
    padding: 10px;
    border: 1px solid var(--rp-border-strong);
    background: var(--rp-card);
    box-shadow: var(--rp-shadow-lg);
    /* --p is written by rp-motion (0 → 1 as the block crosses the viewport) */
    transform: scale(calc(.88 + (.12 * var(--p, 1)))) translateY(calc((1 - var(--p, 1)) * 40px));
    opacity: calc(.5 + (.5 * var(--p, 1)));
    will-change: transform, opacity;
}

.rp-demo__frame::after {
    content: '';
    position: absolute;
    inset: -30% 10% auto;
    height: 60%;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(197, 33, 39, .16), transparent 72%);
    filter: blur(70px);
    opacity: calc(var(--p, 1));
}

.rp-demo__media {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    border-radius: clamp(12px, 1.8vw, 22px);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--rp-surface-2);
}
.rp-demo__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s var(--rp-ease-out), filter .6s var(--rp-ease);
}
.rp-demo__media:hover img { transform: scale(1.045); filter: brightness(1.06); }

.rp-demo__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(6, 7, 12, .1), rgba(6, 7, 12, .55));
}
.rp-demo__play span {
    position: relative;
    width: clamp(64px, 7vw, 88px);
    height: clamp(64px, 7vw, 88px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    background: var(--rp-grad-ember);
    box-shadow: 0 14px 34px -10px rgba(197, 33, 39, .5), inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .45s var(--rp-ease-spring);
}
.rp-demo__media:hover .rp-demo__play span { transform: scale(1.09); }
.rp-demo__play span::before,
.rp-demo__play span::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(197, 33, 39, .38);
    animation: rp-ring 2.8s var(--rp-ease) infinite;
}
.rp-demo__play span::after { animation-delay: 1.4s; }
@keyframes rp-ring {
    0%   { transform: scale(1);   opacity: .85; }
    100% { transform: scale(2.1); opacity: 0; }
}
.rp-demo__play i { position: relative; z-index: 1; margin-inline-start: 3px; }