/* ============================================================
   BBIQ app pages — section layer (app-sections.css)
   Everything below the hero on the four app landing pages
   (Store / Moda / Jewelry / Home): stats ticker, app tour,
   bento features, credit card, security, profit calculator,
   catalogue taste, timeline and the closing download panel.
   ONE layer for all four apps, recoloured by --accent /
   --accent-deep (set on the page wrapper, see app-showcase.css).
   Motion is driven by public/js/app-page.js and is switched off
   under prefers-reduced-motion.
   Rounded geometry — corners come from the --r-* scale set in
   app-showcase.css (!important beats the 90° reset in main.css).
   ============================================================ */

.app-lp {
    overflow: hidden; overflow: clip;            /* clip keeps position: sticky working inside */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    /* Section surface tokens — dark by default, flipped by .ap-light */
    --s-bg: #050505;
    --s-card: #0c0c0a;
    --s-card-2: #111110;
    --s-line: #1f1f1b;
    --s-ink: #fff;
    --s-text: #a9a9a2;
    --s-mute: #7d7d76;
    --s-acc: var(--accent);                      /* accent as text / line */
    --s-tint: var(--a-soft);
}
.ap-light {
    --s-bg: #f6f5f1;
    --s-card: #fff;
    --s-card-2: #faf9f5;
    --s-line: #e7e3da;
    --s-ink: #15130d;
    --s-text: #5f5c53;
    --s-mute: #8c887e;
    --s-acc: var(--a-text);
    --s-tint: color-mix(in srgb, var(--accent) 16%, #fff);
    border-block: 1px solid var(--s-line);
}
.ap-light.ap-light-alt { --s-bg: #fffdf7; }

/* ---------- Scroll progress (moved to <body> by app-page.js) ---------- */
.ap-progress {
    position: fixed; top: 0; inset-inline: 0; z-index: 200; height: 3px; pointer-events: none;
    background: linear-gradient(90deg, var(--accent-deep), var(--accent));
    transform: scaleX(var(--p, 0)); transform-origin: left center;
}
[dir="rtl"] .ap-progress { transform-origin: right center; }

/* ---------- Section rhythm + headings ---------- */
.ap-section { position: relative; padding: 7rem 0; background: var(--s-bg); color: var(--s-ink); }
.ap-head { max-width: 720px; margin: 0 auto 4rem; text-align: center; }
.ap-head .eyebrow { justify-content: center; }
.ap-head .eyebrow, .ap-split-text .eyebrow, .ap-secure-side .eyebrow { color: var(--s-acc); }
.ap-head .eyebrow::before, .ap-split-text .eyebrow::before, .ap-secure-side .eyebrow::before { background: var(--s-acc); }
.ap-head h2, .ap-split-text h2, .ap-secure-side h2 {
    font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; line-height: 1.08;
    letter-spacing: -0.025em; margin-bottom: 1rem; color: var(--s-ink); text-wrap: balance;
}
[dir="rtl"] .ap-head h2, [dir="rtl"] .ap-split-text h2, [dir="rtl"] .ap-secure-side h2 { letter-spacing: 0; line-height: 1.3; }
.ap-head p, .ap-split-text p, .ap-secure-side p { color: var(--s-text); font-size: 1.06rem; line-height: 1.7; }
/* Heading on one side, action on the other */
.ap-head.is-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; max-width: none; text-align: start; margin-bottom: 3rem; }
.ap-head.is-row .eyebrow { justify-content: flex-start; }
.ap-head.is-row p { max-width: 560px; }
.ap-head.is-row .btn-primary { flex-shrink: 0; }

/* Page buttons take the app's own accent */
.app-lp .btn-primary {
    color: var(--a-ink);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 88%, #000) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 14px 30px -14px var(--accent);
}
.app-lp .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 22px 42px -14px var(--accent); }
.ap-light .btn-secondary { border-color: #d4cfc3; color: var(--s-ink); }
.ap-light .btn-secondary:hover { border-color: var(--s-acc); color: var(--s-acc); background: var(--s-tint); }
.ap-arrow-btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.3s var(--ease); }
.ap-arrow-btn:hover svg { transform: translateX(4px); }
[dir="rtl"] .ap-arrow-btn svg { transform: scaleX(-1); }
[dir="rtl"] .ap-arrow-btn:hover svg { transform: scaleX(-1) translateX(4px); }

/* ---------- Reveal on scroll ----------
   The layout's IntersectionObserver adds .in. The entrance is an animation
   that only fills backwards, so once it has played the element is back on
   its own styles and hover transforms / transitions are not held up.
   data-rv picks the entrance, --i staggers siblings. */
.app-lp .reveal { opacity: 0; transform: none; transition: none; }
.app-lp .reveal.in { opacity: 1; animation: apRise 0.85s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
.app-lp .reveal[data-rv="zoom"].in { animation-name: apZoom; }
.app-lp .reveal[data-rv="side"].in { animation-name: apSide; }
[dir="rtl"] .app-lp .reveal[data-rv="side"].in { animation-name: apSideRtl; }
.app-lp .reveal[data-rv="none"].in { animation: none; }
@keyframes apRise { from { opacity: 0; transform: translateY(36px); } }
@keyframes apZoom { from { opacity: 0; transform: translateY(24px) scale(0.93); } }
@keyframes apSide { from { opacity: 0; transform: translateX(-30px); } }
@keyframes apSideRtl { from { opacity: 0; transform: translateX(30px); } }

/* Shared loops */
@keyframes apSpin { to { transform: rotate(360deg); } }
@keyframes apBreath { 0%, 100% { transform: scale(0.96); opacity: 0.8; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes apSheen { 0%, 20% { background-position: 130% 0; } 70%, 100% { background-position: -40% 0; } }
@keyframes apPop { 0%, 12%, 34%, 100% { transform: scale(1); } 22% { transform: scale(1.22); } }

/* Pointer spotlight — --mx / --my are set by app-page.js */
.ap-spot { position: relative; isolation: isolate; }
.ap-spot::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; border-radius: inherit !important;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 18%, transparent), transparent 65%);
    transition: opacity 0.35s ease;
}
.ap-spot:hover::before { opacity: 1; }

/* Icon tile shared by feature and security cards */
.ap-ic {
    width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; margin-bottom: 1.1rem; border-radius: var(--r-md) !important;
    background: var(--s-tint); color: var(--s-acc);
    transition: background 0.3s ease, color 0.3s ease, transform 0.45s var(--ease);
}
.ap-ic svg { width: 23px; height: 23px; }
.ap-cell:hover .ap-ic, .ap-sec:hover .ap-ic { background: var(--accent); color: var(--a-ink); transform: rotate(-6deg) scale(1.06); }

/* ===================== STATS + TICKER ===================== */
.ap-stats { position: relative; background: #080807; border-bottom: 1px solid var(--a-line); }
.ap-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ap-stat { position: relative; text-align: center; padding: 3rem 1rem 2.7rem; border-inline-start: 1px solid rgba(255, 255, 255, 0.06); }
.ap-stat:first-child { border-inline-start: 0; }
.ap-stat .v {
    font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 62%, #fff), var(--accent) 55%, var(--accent-deep));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.ap-stat .l { margin-top: 0.7rem; font-size: 0.88rem; color: #8e8e88; }
/* Underline that draws in after the figure lands */
.ap-stat::after {
    content: ''; position: absolute; bottom: 0; inset-inline: 30%; height: 2px; background: var(--accent); border-radius: 999px !important;
    transform: scaleX(0); transition: transform 0.9s var(--ease) calc(var(--i, 0) * 90ms + 0.35s);
}
.ap-stat.in::after { transform: scaleX(1); }

.ap-ticker {
    overflow: hidden; padding: 1.15rem 0; border-top: 1px solid rgba(255, 255, 255, 0.06);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
/* Four identical sets; one set's width (25%) is one seamless loop */
.ap-ticker-row { display: flex; width: max-content; animation: apTicker 48s linear infinite; }
.ap-ticker:hover .ap-ticker-row { animation-play-state: paused; }
.ap-ticker-set { display: flex; align-items: center; flex-shrink: 0; gap: 2.2rem; padding-inline-end: 2.2rem; }
.ap-ticker .w { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: #77776f; }
.ap-ticker .w:nth-of-type(3n + 1) { color: var(--accent); }
.ap-ticker svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); opacity: 0.5; }
[dir="rtl"] .ap-ticker .w { letter-spacing: 0; }
[dir="rtl"] .ap-ticker-row { animation-name: apTickerRtl; }
@keyframes apTicker { to { transform: translateX(-25%); } }
@keyframes apTickerRtl { to { transform: translateX(25%); } }

/* ===================== APP TOUR ===================== */
.ap-tour-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 4rem; align-items: center; }
.ap-tour-tabs { position: relative; display: grid; gap: 0.7rem; }
.ap-tour-tab {
    position: relative; overflow: hidden; width: 100%;
    display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; gap: 1.1rem;
    padding: 1.35rem 1.5rem; text-align: start; font: inherit; color: inherit; cursor: pointer;
    background: transparent; border: 1px solid var(--s-line); border-radius: var(--r-lg) !important;
    transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.ap-tour-tab:hover { background: color-mix(in srgb, var(--s-card) 65%, transparent); }
.ap-tour-tab:focus-visible { outline: 2px solid var(--s-acc); outline-offset: 3px; }
.ap-tour-tab.is-on { background: var(--s-card); box-shadow: 0 30px 54px -36px rgba(40, 35, 18, 0.5); }
.ap-tour-num { padding-top: 0.95rem; font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--s-mute); transition: color 0.35s ease; }
.ap-tour-ic {
    width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-md) !important;
    background: var(--s-tint); color: var(--s-acc);
    transition: background 0.35s ease, color 0.35s ease, transform 0.45s var(--ease);
}
.ap-tour-ic svg { width: 24px; height: 24px; }
.ap-tour-tab.is-on .ap-tour-num { color: var(--s-acc); }
.ap-tour-tab.is-on .ap-tour-ic { background: var(--accent); color: var(--a-ink); transform: scale(1.06); }
.ap-tour-copy { display: block; min-width: 0; }
.ap-tour-copy .t { display: block; padding-block: 0.7rem 0.3rem; font-size: 1.18rem; font-weight: 800; line-height: 1.3; color: var(--s-ink); }
/* 0fr → 1fr opens the text to its own height with no fixed max-height */
.ap-tour-copy .d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.ap-tour-copy .d > span { min-height: 0; overflow: hidden; font-size: 0.96rem; line-height: 1.65; color: var(--s-text); }
.ap-tour-tab.is-on .ap-tour-copy .d { grid-template-rows: 1fr; }
/* The bar is the autoplay clock: when its fill ends, app-page.js moves on.
   It is inset so it sits on the flat part of the tab's rounded bottom edge. */
.ap-tour-bar { position: absolute; inset-inline: 1.5rem; bottom: 0; height: 3px; overflow: hidden; border-radius: 999px !important; }
.ap-tour-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); transform: scaleX(0); transform-origin: left center; }
[dir="rtl"] .ap-tour-bar i { transform-origin: right center; }
.ap-tour-tab.is-on .ap-tour-bar { background: var(--s-line); }
.ap-tour-tab.is-on .ap-tour-bar i { animation: apFill 6s linear forwards; }
.is-paused .ap-tour-tab.is-on .ap-tour-bar i { animation-play-state: paused; }
@keyframes apFill { to { transform: scaleX(1); } }

.ap-tour-stage { position: relative; display: grid; justify-items: center; align-content: center; min-height: 650px; }
.ap-tour-block {
    position: absolute; top: 11%; width: 310px; height: 78%; border-radius: 44px !important;
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent) 45%, var(--accent-deep));
    box-shadow: 0 50px 90px -50px var(--accent-deep);
    animation: apSway 9s ease-in-out infinite;
}
@keyframes apSway { 0%, 100% { transform: rotate(9deg); } 50% { transform: rotate(5deg) translateY(-8px); } }
.ap-tour-big {
    position: absolute; top: 0; inset-inline-end: 0; direction: ltr;
    font-size: clamp(6rem, 11vw, 9.5rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em;
    color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--s-ink) 16%, transparent);
}
.ap-phone {
    position: relative; z-index: 2; width: 290px; aspect-ratio: 1 / 2; overflow: hidden;
    background: #0b0b0a; border: 8px solid #131311; border-radius: 42px !important;
    box-shadow: 0 0 0 1px var(--a-line), 0 54px 90px -44px rgba(20, 16, 4, 0.85);
    animation: asFloat 7s ease-in-out infinite;
}
.ap-phone img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
    opacity: 0; transform: translateY(20px) scale(1.04);
    transition: opacity 0.55s ease, transform 0.85s var(--ease);
}
.ap-phone img.is-on { z-index: 1; opacity: 1; transform: none; }
.ap-phone::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 38%);
}
.ap-tour-cap {
    position: absolute; z-index: 3; bottom: 9%; inset-inline-start: 0;
    display: inline-flex; align-items: center; gap: 0.65rem; max-width: 250px; padding: 0.75rem 1rem;
    background: #0c0c0a; border: 1px solid var(--a-line); color: #fff; border-radius: var(--r-md) !important;
    font-size: 0.84rem; font-weight: 700; line-height: 1.35;
    box-shadow: 0 24px 44px -22px rgba(0, 0, 0, 0.7);
    animation: asFloat 6s ease-in-out infinite reverse;
}
.ap-tour-cap .dot { width: 8px; height: 8px; flex-shrink: 0; background: var(--accent); border-radius: 999px !important; animation: asPulse 2s ease-in-out infinite; }
.ap-tour-cap .txt.is-swap { animation: apSwap 0.45s ease; }
@keyframes apSwap { from { opacity: 0; transform: translateY(7px); } }
.ap-tour-desc { display: none; }

/* ===================== SPLIT (art + text) ===================== */
.ap-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; align-items: center; }
.ap-split-text p { margin-bottom: 1.9rem; }

.ap-checks { display: grid; gap: 0.75rem; margin-bottom: 2rem; list-style: none; }
.ap-checks li {
    display: flex; align-items: center; gap: 0.95rem; padding: 0.95rem 1.2rem; border-radius: var(--r-md) !important;
    background: var(--s-card); border: 1px solid var(--s-line);
    font-size: 1rem; font-weight: 600; color: var(--s-ink);
    transition: transform 0.35s var(--ease), border-color 0.3s ease;
}
.ap-checks li:hover { transform: translateX(6px); border-color: var(--s-acc); }
[dir="rtl"] .ap-checks li:hover { transform: translateX(-6px); }
.ap-checks .tick { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent); color: var(--a-ink); border-radius: 999px !important; }
/* The check draws itself once its row has arrived */
.ap-checks .tick svg { width: 16px; height: 16px; stroke-width: 3; stroke-dasharray: 24; stroke-dashoffset: 24; }
.ap-checks li.in .tick svg { animation: apDraw 0.5s ease forwards; animation-delay: calc(var(--i, 0) * 90ms + 0.5s); }
@keyframes apDraw { to { stroke-dashoffset: 0; } }

/* Floating icon tiles around an illustration */
.ap-float {
    position: absolute; z-index: 3; width: 54px; height: 54px; display: grid; place-items: center;
    background: #0c0c0a; border: 1px solid var(--a-line); color: var(--accent); border-radius: var(--r-md) !important;
    box-shadow: 0 22px 40px -20px #000;
    animation: asFloat 5.5s ease-in-out infinite;
}
.ap-float svg { width: 24px; height: 24px; }
.ap-float.f1 { top: 9%; inset-inline-start: 5%; }
.ap-float.f2 { bottom: 10%; inset-inline-end: 4%; background: var(--accent); border-color: var(--accent); color: var(--a-ink); animation-duration: 6.5s; animation-direction: reverse; }
.ap-float.f3 { top: 17%; inset-inline-end: 9%; width: 44px; height: 44px; animation-duration: 7.5s; }
.ap-float.f3 svg { width: 20px; height: 20px; }
.ap-light .ap-float { background: #fff; border-color: var(--s-line); color: var(--s-acc); box-shadow: 0 22px 40px -24px rgba(40, 35, 18, 0.45); }
.ap-light .ap-float.f2 { background: var(--accent); border-color: var(--accent); color: var(--a-ink); }

/* ===================== STORE CREDIT CARD ===================== */
.ap-credit, .ap-secure, .ap-margin { --s-bg: #080807; border-block: 1px solid var(--a-line); }
.ap-credit::before, .ap-margin::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(640px 440px at 22% 50%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 66%);
}
.ap-margin::before { transform: scaleX(-1); }                       /* glow sits behind the calculator */
[dir="rtl"] .ap-credit::before { transform: scaleX(-1); }
[dir="rtl"] .ap-margin::before { transform: none; }
.ap-credit-art { position: relative; display: grid; place-items: center; min-height: 460px; }
.ap-ring {
    position: absolute; width: min(400px, 86vw); aspect-ratio: 1; border-radius: 999px !important;
    border: 1px solid var(--a-line); box-shadow: inset 0 0 90px var(--a-soft);
    animation: apBreath 6s ease-in-out infinite;
}
.ap-ring.r2 { width: min(540px, 110vw); border-style: dashed; border-color: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: none; animation: apSpin 70s linear infinite; }
/* Outer box floats, inner box takes the pointer tilt (--rx / --ry from app-page.js) */
.ap-tilt { position: relative; z-index: 2; width: min(100%, 470px); perspective: 1100px; animation: asFloat 7s ease-in-out infinite; }
.ap-tilt-in {
    position: relative;
    transform: rotateX(var(--rx, 9deg)) rotateY(var(--ry, -16deg)) rotateZ(-2deg);
    transition: transform 0.7s var(--ease);
    filter: drop-shadow(0 40px 56px rgba(0, 0, 0, 0.8));
}
[dir="rtl"] .ap-tilt-in { transform: rotateX(var(--rx, 9deg)) rotateY(var(--ry, 16deg)) rotateZ(2deg); }
.ap-tilt.is-live .ap-tilt-in { transition-duration: 0.14s; transition-timing-function: linear; }
.ap-tilt img { display: block; width: 100%; }
.ap-tilt-shine {
    position: absolute; inset: 0; pointer-events: none;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, 0.42) 48%, transparent 62%);
    background-size: 260% 100%; background-repeat: no-repeat;
    animation: apSheen 5.5s ease-in-out infinite;
}

/* ===================== FEATURES — bento ===================== */
.ap-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.2rem; }
.ap-cell {
    display: flex; flex-direction: column; overflow: hidden; grid-column: span 2; border-radius: var(--r-lg) !important;
    background: var(--s-card); border: 1px solid var(--s-line);
    box-shadow: 0 18px 36px -28px rgba(40, 35, 18, 0.32);
    transition: transform 0.4s var(--ease), border-color 0.3s ease, box-shadow 0.4s ease;
}
.ap-cell.w3 { grid-column: span 3; }
.ap-cell.w4 { grid-column: span 4; flex-direction: row; }
.ap-cell:hover {
    transform: translateY(-7px); border-color: var(--s-acc);
    box-shadow: 0 38px 64px -36px color-mix(in srgb, var(--accent-deep) 60%, transparent);
}
.ap-cell-body { padding: 1.8rem 1.8rem 2rem; }
.ap-cell.w4 .ap-cell-body { flex: 1; align-self: center; }
.ap-cell h3 { font-size: 1.22rem; font-weight: 800; line-height: 1.3; margin-bottom: 0.5rem; color: var(--s-ink); }
.ap-cell p { font-size: 0.95rem; line-height: 1.65; color: var(--s-text); }
.ap-cell.w4 .ap-cell-body { padding: 2.2rem; }
.ap-cell.w4 h3 { font-size: 1.55rem; letter-spacing: -0.01em; }
.ap-cell.w4 p { font-size: 1rem; }

/* ---------- Mini illustrations (kept LTR: wordless, direction-free) ---------- */
.ap-viz {
    position: relative; overflow: hidden; direction: ltr;
    display: flex; align-items: center; justify-content: center; gap: 1.1rem;
    min-height: 176px; padding: 1.5rem;
    background-color: var(--s-card-2);
    background-image: radial-gradient(color-mix(in srgb, var(--s-ink) 10%, transparent) 1px, transparent 1.4px);
    background-size: 16px 16px;
    border-bottom: 1px solid var(--s-line);
}
.ap-cell.w4 .ap-viz { order: 2; flex: 0 0 46%; border-bottom: 0; border-inline-start: 1px solid var(--s-line); }

/* catalog — search bar over a drifting shelf of every sector */
.viz-catalog { flex-direction: column; align-items: stretch; gap: 1rem; }
.vz-search {
    display: flex; align-items: center; gap: 0.6rem; width: min(100%, 250px); height: 38px; margin: 0 auto; padding: 0 0.85rem;
    background: var(--s-card); border: 1px solid var(--s-line); color: var(--s-mute); border-radius: 999px !important;
}
.vz-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.vz-search i { height: 6px; background: var(--s-line); border-radius: 999px !important; animation: apSearch 4s ease-in-out infinite; }
@keyframes apSearch { 0%, 100% { width: 16%; } 50% { width: 64%; } }
.vz-belt {
    overflow: hidden; margin-inline: -1.5rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
/* Two identical sets in one row: half the row plus half a gap is one loop */
.vz-belt-row { display: flex; gap: 0.8rem; width: max-content; animation: apBelt 16s linear infinite; }
@keyframes apBelt { to { transform: translateX(calc(-50% - 0.4rem)); } }
.vz-tile {
    width: 66px; height: 66px; flex-shrink: 0; display: grid; place-items: center; color: var(--c); border-radius: var(--r-md) !important;
    background: color-mix(in srgb, var(--c) 12%, var(--s-card)); border: 1px solid color-mix(in srgb, var(--c) 42%, transparent);
}
.vz-tile svg { width: 30px; height: 30px; }

/* route — a parcel travelling between two pins */
.vz-route { width: min(100%, 270px); height: auto; overflow: visible; }
.vz-route .rt { stroke: var(--s-acc); stroke-width: 1.6; stroke-dasharray: 3 6; opacity: 0.75; animation: apDash 1.2s linear infinite; }
@keyframes apDash { to { stroke-dashoffset: -18; } }
.vz-route .stop { fill: var(--s-mute); opacity: 0.6; }
.vz-route .pin { fill: var(--s-card); stroke: var(--s-acc); stroke-width: 2; }
.vz-route .pin.end { fill: var(--accent); }
.vz-route .pulse { fill: var(--accent); transform-box: fill-box; transform-origin: center; animation: apPing 2s ease-out infinite; }
@keyframes apPing { from { opacity: 0.55; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }
.vz-route .van { fill: var(--s-ink); }

/* type — text being typed onto a product */
.vz-tag { width: 78px; height: 78px; flex-shrink: 0; display: grid; place-items: center; background: var(--s-card); border: 1px solid var(--s-line); color: var(--s-acc); border-radius: var(--r-md) !important; }
.vz-tag svg { width: 38px; height: 38px; }
.vz-field {
    display: inline-flex; align-items: center; gap: 2px; min-width: 150px; height: 46px; padding: 0 0.9rem;
    background: var(--s-card); border: 1px solid var(--s-acc); box-shadow: 0 0 0 4px var(--s-tint); border-radius: var(--r-sm) !important;
}
.vz-typed {
    width: 0; overflow: hidden; white-space: nowrap;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
    font-size: 1.05rem; font-weight: 800; letter-spacing: 0.18em; color: var(--s-ink);
    animation: apType 4.6s steps(4, end) infinite;
}
@keyframes apType { 0%, 10% { width: 0; } 45%, 85% { width: calc(4ch + 0.72em); } 100% { width: 0; } }
.vz-caret { width: 2px; height: 20px; background: var(--s-acc); animation: apBlink 0.9s steps(1) infinite; }
@keyframes apBlink { 50% { opacity: 0; } }

/* credit — a prepaid card topping up */
.vz-card {
    position: relative; width: 134px; height: 86px; flex-shrink: 0; padding: 0.8rem;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 0.35rem;
    background: linear-gradient(135deg, #1c1c18, #050505); border: 1px solid var(--a-line); border-radius: var(--r-sm) !important;
    box-shadow: 0 20px 30px -18px rgba(0, 0, 0, 0.6);
    animation: apCardBob 5s ease-in-out infinite;
}
@keyframes apCardBob { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(-3deg) translateY(-6px); } }
.vz-card .chip { position: absolute; top: 0.8rem; left: 0.8rem; width: 22px; height: 16px; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); border-radius: 4px !important; }
.vz-card .ln { height: 5px; width: 70%; background: rgba(255, 255, 255, 0.28); border-radius: 999px !important; }
.vz-card .ln.s { width: 40%; background: var(--accent); }
.vz-side { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; width: 108px; }
.vz-plus { width: 34px; height: 34px; display: grid; place-items: center; background: var(--accent); color: var(--a-ink); font-size: 1.25rem; font-weight: 900; line-height: 1; border-radius: var(--r-sm) !important; animation: apPop 3.6s var(--ease) infinite; }
.vz-meter { width: 100%; height: 8px; overflow: hidden; background: var(--s-line); border-radius: 999px !important; }
.vz-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); transform-origin: left center; animation: apMeter 3.6s var(--ease) infinite; }
@keyframes apMeter { 0%, 12% { transform: scaleX(0.18); } 60%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0.18); } }

/* track — an order moving through its four statuses */
.vz-track { position: relative; display: flex; align-items: center; justify-content: space-between; width: min(100%, 250px); height: 30px; }
.vz-track::before, .vz-track .fill { content: ''; position: absolute; top: 50%; left: 12px; right: 12px; height: 3px; margin-top: -1.5px; border-radius: 999px !important; }
.vz-track::before { background: var(--s-line); }
.vz-track .fill { background: linear-gradient(90deg, var(--accent-deep), var(--accent)); transform-origin: left center; animation: apTrack 6s linear infinite; }
@keyframes apTrack { 0% { transform: scaleX(0); opacity: 1; } 70%, 94% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.vz-track .nd {
    position: relative; z-index: 1; width: 24px; height: 24px; display: grid; place-items: center;
    background: var(--s-card); border: 2px solid var(--s-line); border-radius: 999px !important; color: var(--a-ink);
}
.vz-track .nd svg { width: 12px; height: 12px; opacity: 0; animation: apNdTick 6s linear infinite; }
.vz-track .nd.n0 { background: var(--accent); border-color: var(--s-acc); }
.vz-track .nd.n1 { animation: apNd1 6s linear infinite; }
.vz-track .nd.n2 { animation: apNd2 6s linear infinite; }
.vz-track .nd.n3 { animation: apNd3 6s linear infinite; }
/* Each node lights as the fill reaches it, then the run resets */
@keyframes apNd1 { 0%, 22% { background: var(--s-card); border-color: var(--s-line); transform: scale(1); } 25% { transform: scale(1.35); } 28%, 94% { background: var(--accent); border-color: var(--s-acc); transform: scale(1); } 100% { background: var(--s-card); border-color: var(--s-line); } }
@keyframes apNd2 { 0%, 45% { background: var(--s-card); border-color: var(--s-line); transform: scale(1); } 48% { transform: scale(1.35); } 51%, 94% { background: var(--accent); border-color: var(--s-acc); transform: scale(1); } 100% { background: var(--s-card); border-color: var(--s-line); } }
@keyframes apNd3 { 0%, 68% { background: var(--s-card); border-color: var(--s-line); transform: scale(1); } 71% { transform: scale(1.45); } 74%, 94% { background: var(--accent); border-color: var(--s-acc); transform: scale(1); } 100% { background: var(--s-card); border-color: var(--s-line); } }
@keyframes apNdTick { 0%, 70% { opacity: 0; } 75%, 94% { opacity: 1; } 100% { opacity: 0; } }

/* shield — a one-time code filling in */
.viz-shield { gap: 1.4rem; }
.vz-shield { position: relative; width: 76px; height: 76px; flex-shrink: 0; display: grid; place-items: center; color: var(--s-acc); }
.vz-shield svg { width: 40px; height: 40px; }
.vz-orbit { position: absolute; inset: 0; border: 1.5px dashed var(--s-acc); border-radius: 999px !important; opacity: 0.5; animation: apSpin 14s linear infinite; }
.vz-otp { display: flex; gap: 0.45rem; }
.vz-otp i { position: relative; width: 30px; height: 38px; background: var(--s-card); border: 1px solid var(--s-line); border-radius: 8px !important; }
.vz-otp i::after {
    content: ''; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px;
    background: var(--s-ink); border-radius: 999px !important; transform: scale(0);
    animation: apOtp1 4.8s var(--ease) infinite;
}
.vz-otp i:nth-child(2)::after { animation-name: apOtp2; }
.vz-otp i:nth-child(3)::after { animation-name: apOtp3; }
.vz-otp i:nth-child(4)::after { animation-name: apOtp4; }
@keyframes apOtp1 { 0%, 8% { transform: scale(0); } 14%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes apOtp2 { 0%, 22% { transform: scale(0); } 28%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes apOtp3 { 0%, 36% { transform: scale(0); } 42%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes apOtp4 { 0%, 50% { transform: scale(0); } 56%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }

/* store — the trader's own verified storefront */
.viz-store { flex-direction: column; gap: 0.8rem; }
.vz-shop {
    display: flex; align-items: center; gap: 0.8rem; width: min(100%, 270px); padding: 0.7rem 0.8rem;
    background: var(--s-card); border: 1px solid var(--s-line); box-shadow: 0 16px 26px -20px rgba(40, 35, 18, 0.45); border-radius: var(--r-md) !important;
}
.vz-shop img { width: 42px; height: 42px; flex-shrink: 0; object-fit: cover; border: 1.5px solid var(--accent); }
.vz-lines { flex: 1; display: grid; gap: 0.42rem; }
.vz-lines .ln { height: 7px; width: 72%; background: var(--s-ink); opacity: 0.8; border-radius: 999px !important; }
.vz-lines .ln.s { height: 5px; width: 46%; background: var(--s-mute); opacity: 0.5; }
.vz-ok { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent); color: var(--a-ink); border-radius: 999px !important; animation: apPop 3.6s var(--ease) infinite; }
.vz-ok svg { width: 13px; height: 13px; }
.vz-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; width: min(100%, 270px); }
.vz-shelf i {
    height: 44px; background-color: var(--s-line); border-radius: var(--r-sm) !important;
    background-image: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--s-card) 75%, transparent) 50%, transparent 70%);
    background-size: 220% 100%; background-repeat: no-repeat;
    animation: apShimmer 2.6s linear infinite;
}
.vz-shelf i:nth-child(2) { animation-delay: 0.25s; }
.vz-shelf i:nth-child(3) { animation-delay: 0.5s; }
@keyframes apShimmer { from { background-position: 140% 0; } to { background-position: -110% 0; } }

/* bars — a week of margin building to the Friday payout */
.vz-bars { display: flex; align-items: flex-end; gap: 0.6rem; height: 116px; }
.vz-bars i {
    width: 20px; height: var(--h); background: color-mix(in srgb, var(--s-ink) 16%, var(--s-card-2)); transform-origin: center bottom; border-radius: 6px 6px 2px 2px !important;
    animation: apBar 3.4s var(--ease) infinite alternate; animation-delay: calc(var(--k, 0) * 0.14s);
}
.vz-bars i.pay { background: linear-gradient(180deg, var(--accent), var(--accent-deep)); box-shadow: 0 0 26px -4px var(--accent); }
@keyframes apBar { 0% { transform: scaleY(0.25); } 45%, 100% { transform: scaleY(1); } }

/* ===================== SECURITY ===================== */
.ap-secure-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4.5rem; align-items: start; }
.ap-secure-side { position: sticky; top: 7.5rem; }           /* stays put while the cards scroll past */
.ap-radar { position: relative; width: 290px; aspect-ratio: 1; margin-top: 2.8rem; display: grid; place-items: center; }
.ap-radar .rg { position: absolute; inset: 0; border: 1px solid var(--a-line); border-radius: 999px !important; }
.ap-radar .rg.r2 { inset: 17%; border-style: dashed; animation: apSpin 40s linear infinite; }
.ap-radar .rg.r3 { inset: 34%; background: var(--a-soft); animation: apBreath 4s ease-in-out infinite; }
.ap-radar .sweep {
    position: absolute; inset: 0; border-radius: 999px !important;
    background: conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 36%, transparent), transparent 26%);
    animation: apSpin 5s linear infinite;
}
.ap-radar .core {
    position: relative; width: 78px; height: 78px; display: grid; place-items: center; border-radius: var(--r-lg) !important;
    background: var(--accent); color: var(--a-ink); box-shadow: 0 0 64px -6px var(--accent);
}
.ap-radar .core svg { width: 36px; height: 36px; }

.ap-secure-cards { display: grid; gap: 1.1rem; }
.ap-sec {
    display: flex; align-items: flex-start; gap: 1.3rem; overflow: hidden; padding: 2rem;
    background: rgba(255, 255, 255, 0.02); border: 1px solid var(--s-line); border-radius: var(--r-lg) !important;
    transition: transform 0.4s var(--ease), border-color 0.3s ease;
}
.ap-sec:hover { transform: translateY(-5px); border-color: var(--a-line); }
.ap-sec .ap-ic { width: 52px; height: 52px; margin-bottom: 0; }
.ap-sec h3 { padding-inline-end: 2rem; font-size: 1.2rem; font-weight: 800; line-height: 1.3; margin-bottom: 0.45rem; }
.ap-sec p { font-size: 0.95rem; line-height: 1.65; color: var(--s-text); }
.ap-sec-num { position: absolute; top: 1.3rem; inset-inline-end: 1.5rem; font-size: 0.8rem; font-weight: 800; color: var(--accent); opacity: 0.5; }
/* A scan line crosses the card when it is hovered */
.ap-sec::after {
    content: ''; position: absolute; top: 0; inset-inline: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: translateX(-100%);
}
.ap-sec:hover::after { animation: apScan 1.1s ease; }
@keyframes apScan { to { transform: translateX(100%); } }

/* ===================== CATALOGUE TASTE ===================== */
.ap-shop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.ap-prod {
    display: flex; flex-direction: column; overflow: hidden; color: inherit; border-radius: var(--r-lg) !important;
    background: var(--s-card); border: 1px solid var(--s-line);
    transition: transform 0.4s var(--ease), border-color 0.3s ease, box-shadow 0.4s ease;
}
.ap-prod:hover {
    transform: translateY(-8px); border-color: var(--s-acc);
    box-shadow: 0 38px 64px -36px color-mix(in srgb, var(--accent-deep) 65%, transparent);
}
.ap-prod-img { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; background: var(--s-card-2); }
.ap-prod-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.ap-prod:hover .ap-prod-img img { transform: scale(1.08); }
.ap-prod-img .noimg { font-weight: 800; letter-spacing: 0.1em; color: var(--s-acc); opacity: 0.4; }
/* Arrow button rises into the picture on hover */
.ap-prod-go {
    position: absolute; bottom: 0.9rem; inset-inline-end: 0.9rem; width: 44px; height: 44px; display: grid; place-items: center;
    background: var(--accent); color: var(--a-ink); border-radius: 999px !important;
    transform: translateY(72px); transition: transform 0.45s var(--ease);
}
.ap-prod-go svg { width: 20px; height: 20px; }
[dir="rtl"] .ap-prod-go svg { transform: scaleX(-1); }
.ap-prod:hover .ap-prod-go, .ap-prod:focus-visible .ap-prod-go { transform: none; }
.ap-prod-body { flex: 1; display: flex; flex-direction: column; gap: 0.55rem; padding: 1.1rem 1.2rem 1.3rem; }
.ap-prod-body h3 {
    font-size: 0.98rem; font-weight: 600; line-height: 1.4; color: var(--s-ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ap-prod-price { margin-top: auto; font-size: 1.1rem; font-weight: 800; color: var(--s-acc); }
.ap-prod-price small { font-size: 0.7rem; font-weight: 600; color: var(--s-mute); }
.ap-prod-sku { font-family: 'Courier New', monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; color: var(--s-acc); }
.ap-shop-empty { grid-column: 1 / -1; padding: 3rem 0; text-align: center; color: var(--s-mute); }

/* ===================== HOW IT WORKS — timeline ===================== */
.ap-how {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 64px 64px;
}
.ap-steps { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 5.5rem; }
/* Runs through the centre of the three numbers, and fills once in view */
.ap-steps-line { position: absolute; z-index: 1; top: 0; inset-inline: calc(100% / 6); height: 2px; overflow: hidden; background: var(--s-line); border-radius: 999px !important; }
.ap-steps-line i {
    display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--accent-deep), var(--accent));
    transform: scaleX(0); transform-origin: left center; transition: transform 1.7s var(--ease) 0.2s;
}
[dir="rtl"] .ap-steps-line i { transform-origin: right center; }
.ap-steps.in .ap-steps-line i { transform: scaleX(1); }
.ap-step {
    position: relative; padding: 3.3rem 1.8rem 2.1rem; text-align: center; opacity: 0; border-radius: var(--r-lg) !important;
    background: var(--s-card); border: 1px solid var(--s-line);
    transition: border-color 0.3s ease, transform 0.4s var(--ease);
}
.ap-step:hover { border-color: var(--a-line); transform: translateY(-5px); }
.ap-steps.in .ap-step { opacity: 1; animation: apRise 0.85s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 0.5s + 0.2s); }
.ap-step .n {
    position: absolute; z-index: 2; top: -29px; left: 50%; margin-left: -29px; width: 58px; height: 58px; display: grid; place-items: center;
    background: var(--s-card); border: 2px solid var(--s-line); color: var(--s-mute); font-size: 1.3rem; font-weight: 900; border-radius: 999px !important;
    transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
    transition-delay: calc(var(--i, 0) * 0.5s + 0.55s);
}
.ap-steps.in .ap-step .n { background: var(--accent); border-color: var(--accent); color: var(--a-ink); box-shadow: 0 0 44px -6px var(--accent); }
.ap-step h3 { font-size: 1.2rem; font-weight: 800; line-height: 1.3; margin-bottom: 0.55rem; }
.ap-step p { font-size: 0.95rem; line-height: 1.65; color: var(--s-text); }

/* ===================== MARGIN ENGINE — live calculator ===================== */
.ap-note {
    padding: 1rem 1.2rem; background: var(--a-soft); border: 1px solid var(--a-line); border-radius: var(--r-md) !important;
    font-size: 0.92rem; line-height: 1.6; color: #d8d8d2;
}
.ap-calc {
    display: grid; gap: 0.9rem; padding: 1.6rem;
    background: linear-gradient(180deg, #0f0f0d, #090908); border: 1px solid var(--a-line); border-radius: var(--r-xl) !important;
    box-shadow: 0 60px 100px -60px #000, 0 0 90px -46px var(--accent);
}
.ap-calc-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem;
    padding: 1.25rem 1.4rem; background: #0c0c0a; border: 1px solid #1c1c18; border-radius: var(--r-md) !important;
}
.ap-calc .lbl { font-size: 0.96rem; line-height: 1.5; color: #cfcfca; }
.ap-calc .val { white-space: nowrap; color: #fff; direction: ltr; }
.ap-calc .val b { display: inline-block; font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ap-calc .val small { font-size: 0.72rem; font-weight: 600; color: #8e8e88; }
.ap-calc-row.is-price { border-color: var(--a-line); }
.ap-calc-row.is-price .val b { color: var(--accent); }
.ap-calc-row.is-profit { background: var(--a-soft); border-color: var(--accent); }
.ap-calc-row.is-profit .lbl { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 700; color: #fff; }
.ap-calc-row.is-profit .val b { font-size: 1.75rem; }
.ap-calc .tick { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent); color: var(--a-ink); border-radius: 999px !important; }
.ap-calc .tick svg { width: 16px; height: 16px; stroke-width: 3; }
.ap-calc .val b.is-bump { animation: apBump 0.3s var(--ease); }
@keyframes apBump { 40% { transform: translateY(-3px) scale(1.06); } }
/* Price slider — --pct (how far along) is set by app-page.js */
.ap-calc input[type="range"] {
    -webkit-appearance: none; appearance: none; flex: 0 0 100%; width: 100%; height: 6px; margin: 0.9rem 0 0.4rem; cursor: pointer; border-radius: 999px !important;
    background: linear-gradient(to right, var(--accent) var(--pct, 46%), #2a2a26 var(--pct, 46%));
}
[dir="rtl"] .ap-calc input[type="range"] { background: linear-gradient(to left, var(--accent) var(--pct, 46%), #2a2a26 var(--pct, 46%)); }
.ap-calc input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }
.ap-calc input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 24px; height: 24px; cursor: grab; border-radius: 50% !important;
    background: var(--accent); border: 5px solid #0c0c0a; box-shadow: 0 0 0 1px var(--accent), 0 0 26px -2px var(--accent);
    transition: transform 0.2s var(--ease);
}
.ap-calc input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.ap-calc input[type="range"]::-moz-range-thumb {
    width: 14px; height: 14px; cursor: grab; border-radius: 50% !important;
    background: var(--accent); border: 5px solid #0c0c0a; box-shadow: 0 0 0 1px var(--accent), 0 0 26px -2px var(--accent);
}
.ap-calc input[type="range"]::-moz-range-track { background: transparent; }
/* Cost vs profit, as one bar */
.ap-calc-split { display: flex; gap: 3px; height: 10px; direction: ltr; }
.ap-calc-split .cost { flex: 0 0 var(--cost, 40%); background: #3a3a35; border-radius: 999px 0 0 999px !important; transition: flex-basis 0.25s ease; }
.ap-calc-split .gain { flex: 1; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); border-radius: 0 999px 999px 0 !important; box-shadow: 0 0 22px -4px var(--accent); }

/* ===================== BENEFITS — orbit ===================== */
.ap-orbit { position: relative; display: grid; place-items: center; min-height: 460px; }
.ap-orbit .ob {
    position: absolute; width: min(300px, 62vw); aspect-ratio: 1; border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); animation: apSpin 26s linear infinite;
}
.ap-orbit .ob.o2 { width: min(430px, 88vw); border-style: dashed; animation-duration: 46s; animation-direction: reverse; }
.ap-orbit .ob i { position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; background: var(--accent); border-radius: 999px !important; box-shadow: 0 0 20px var(--accent); }
.ap-orbit .ob.o2 i:nth-child(2) { top: auto; bottom: -7px; background: var(--s-ink); box-shadow: none; }
.ap-orbit-core {
    position: relative; z-index: 2; width: 190px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 999px !important;
    background: #fff; border: 1px solid var(--s-line); box-shadow: 0 44px 70px -38px rgba(40, 35, 18, 0.55);
    animation: asFloat 7s ease-in-out infinite;
}
.ap-orbit-core img { width: 70%; height: 70%; object-fit: cover; border: 2px solid var(--accent); }

/* ===================== DOWNLOAD CTA ===================== */
.ap-cta { position: relative; padding: 6rem 0 6.5rem; background: #050505; border-top: 1px solid var(--a-line); }
.ap-cta-panel {
    position: relative; isolation: isolate; overflow: hidden; padding: 4.5rem 2rem 9rem; text-align: center; color: var(--a-ink); border-radius: var(--r-xl) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, #fff) 0%, var(--accent) 45%, var(--accent-deep) 100%);
    box-shadow: 0 60px 110px -80px var(--accent);
}
.ap-cta-motif {
    position: absolute; z-index: -1; top: 50%; inset-inline-end: -5%; width: min(520px, 70vw); height: auto;
    color: var(--a-ink); opacity: 0.13; transform: translateY(-50%) rotate(-8deg);
    animation: apDrift 14s ease-in-out infinite;
}
@keyframes apDrift { 0%, 100% { transform: translateY(-50%) rotate(-8deg); } 50% { transform: translateY(-54%) rotate(-3deg); } }
.ap-cta-sheen {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(110deg, transparent 36%, rgba(255, 255, 255, 0.34) 50%, transparent 64%);
    background-size: 260% 100%; background-repeat: no-repeat;
    animation: apSheen 7s ease-in-out infinite;
}
.ap-cta-logo { width: 84px; height: 84px; object-fit: cover; margin: 0 auto 1.4rem; border: 3px solid var(--a-ink); box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.65); }
.ap-cta-panel .eyebrow { justify-content: center; color: var(--a-ink); }
.ap-cta-panel .eyebrow::before { background: var(--a-ink); }
.ap-cta-panel h2 {
    max-width: 780px; margin: 0 auto 1rem; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900; line-height: 1.05;
    letter-spacing: -0.03em; color: var(--a-ink); text-wrap: balance;
}
[dir="rtl"] .ap-cta-panel h2 { letter-spacing: 0; line-height: 1.3; }
.ap-cta-panel p { max-width: 560px; margin: 0 auto; font-size: 1.08rem; line-height: 1.65; font-weight: 500; color: color-mix(in srgb, var(--a-ink) 80%, transparent); }
/* The platform cards (app-showcase.css) ride up over the panel's lower edge */
.ap-cta .as-platforms { margin-top: -6rem; padding-inline: 3.5rem; }
.ap-cta .as-platform { background: #0c0c0a; box-shadow: 0 34px 60px -34px #000; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px) {
    .ap-section { padding: 4.75rem 0; }
    .ap-head { margin-bottom: 3rem; }
    .ap-head.is-row { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
    .ap-split, .ap-secure-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
    .ap-credit-art, .ap-orbit { order: -1; min-height: 380px; }

    /* Tour: chips above the phone, the active step's text below it */
    .ap-tour-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .ap-tour-tabs { display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.4rem; scrollbar-width: none; }
    .ap-tour-tabs::-webkit-scrollbar { display: none; }
    .ap-tour-tab { flex: 0 0 auto; width: auto; grid-template-columns: auto auto; align-items: center; gap: 0.6rem; padding: 0.8rem 1.1rem; background: var(--s-card); border-radius: 999px !important; }
    .ap-tour-tab.is-on { border-color: var(--s-acc); }
    .ap-tour-bar { inset-inline: 1.4rem; }
    .ap-tour-ic, .ap-tour-copy .d { display: none; }
    .ap-tour-num { padding-top: 0; }
    .ap-tour-copy .t { padding: 0; font-size: 0.95rem; white-space: nowrap; }
    .ap-tour-stage { min-height: 0; padding-top: 2.2rem; }
    .ap-tour-block { top: 4%; width: 240px; height: 400px; }
    .ap-phone { width: 236px; border-radius: 36px !important; }
    .ap-tour-cap { bottom: auto; top: 380px; inset-inline-start: 4%; }
    .ap-tour-desc { display: block; max-width: 520px; min-height: 5.2em; margin-top: 2.2rem; text-align: center; font-size: 0.98rem; line-height: 1.65; color: var(--s-text); }

    .ap-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ap-cell, .ap-cell.w3 { grid-column: span 1; }
    .ap-cell.w4 { grid-column: span 2; }

    .ap-secure-side { position: static; }
    .ap-radar { width: 220px; margin-inline: auto; }

    .ap-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Timeline turns vertical: the line runs down the left of the cards */
    .ap-steps { grid-template-columns: minmax(0, 1fr); gap: 3.4rem; margin-top: 4.5rem; }
    .ap-steps-line { z-index: -1; inset-inline: auto; inset-inline-start: calc(1.8rem + 28px); bottom: 0; width: 2px; height: auto; }   /* behind the cards: it links them through the gaps */
    .ap-steps-line i { transform: scaleY(0); transform-origin: center top; }
    [dir="rtl"] .ap-steps-line i { transform-origin: center top; }
    .ap-steps.in .ap-steps-line i { transform: scaleY(1); }
    .ap-step { text-align: start; }
    .ap-step .n { left: auto; margin-left: 0; inset-inline-start: 1.8rem; }

    .ap-cta { padding: 4.5rem 0 5rem; }
    .ap-cta-panel { padding: 3.5rem 1.5rem 7.5rem; }
    .ap-cta .as-platforms { margin-top: -5rem; padding-inline: 2.6rem; }
}

@media (max-width: 640px) {
    .ap-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .ap-stat { padding: 2.2rem 1rem 2rem; }
    .ap-stat:nth-child(3) { border-inline-start: 0; }
    .ap-stat:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.06); }

    .ap-bento { grid-template-columns: minmax(0, 1fr); }
    .ap-cell.w4 { grid-column: span 1; flex-direction: column; }
    .ap-cell.w4 .ap-viz { order: 0; flex: none; border-inline-start: 0; border-bottom: 1px solid var(--s-line); }
    .ap-cell-body, .ap-cell.w4 .ap-cell-body { padding: 1.5rem 1.4rem 1.7rem; }
    .ap-cell.w4 h3 { font-size: 1.22rem; letter-spacing: 0; }
    .ap-cell.w4 p { font-size: 0.95rem; }
    .ap-tour-big { display: none; }

    .ap-sec { padding: 1.5rem 1.3rem; gap: 1rem; }
    .ap-shop { gap: 0.8rem; }
    .ap-prod-body { padding: 0.9rem 0.9rem 1.1rem; }
    .ap-calc { padding: 1rem; }
    .ap-calc-row { padding: 1.05rem 1.1rem; }
    .ap-float { width: 46px; height: 46px; }
    .ap-cta .as-platforms { padding-inline: 2.4rem; }
    .ap-head.is-row .btn-primary { width: 100%; }
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
    .app-lp .reveal, .ap-step { opacity: 1; }
    .app-lp .reveal.in, .ap-steps.in .ap-step { animation: none; }
    .app-lp *, .app-lp *::before, .app-lp *::after { animation: none !important; transition: none !important; }
    .ap-checks .tick svg { stroke-dashoffset: 0; }
    .ap-stat::after, .ap-steps-line i { transform: none; }
    .ap-step .n { background: var(--accent); border-color: var(--accent); color: var(--a-ink); }
    .vz-typed { width: auto; }
    .vz-track .nd { background: var(--accent); border-color: var(--s-acc); }
    .vz-track .nd svg, .ap-phone img.is-on { opacity: 1; }
    .vz-otp i::after { transform: scale(1); }
}