/* Inner pages: cinematic banners, vector motion graphics and scroll effects */
strong, b { font-weight: 600; }

/* Banner hero ------------------------------------------------------------- */
.x-hero { position: relative; display: flex; align-items: center; min-height: 86svh; overflow: hidden; isolation: isolate; background: #000; }
.x-hero__img {
  position: absolute; inset: 0; z-index: -3; width: 100%; height: 118%; max-width: none; object-fit: cover;
  animation: xKen 16s ease-out both;
}
.x-hero__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(0deg, #070707 2%, rgba(7, 7, 7, .62) 42%, rgba(7, 7, 7, .38) 72%, rgba(7, 7, 7, .72) 100%), radial-gradient(ellipse at 82% 28%, rgba(242, 29, 53, .3), transparent 48%); }
.x-hero__grid {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 72px 72px, linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 72px 72px;
  -webkit-mask-image: linear-gradient(115deg, transparent 30%, #000 90%); mask-image: linear-gradient(115deg, transparent 30%, #000 90%);
  animation: xGrid 22s linear infinite;
}
.x-hero__inner { width: min(1320px, calc(100% - 8vw)); padding-top: calc(var(--nav-h) + 24px); padding-bottom: 48px; }
.x-hero .page-breadcrumb { flex-wrap: wrap; color: rgba(255, 255, 255, .62); }
.x-hero .page-breadcrumb a { color: rgba(255, 255, 255, .62); }
.x-pill {
  display: inline-flex; align-items: center; gap: 10px; margin: 8px 0 22px; padding: 7px 16px; color: #fff; font-size: .8125rem; font-weight: 500; letter-spacing: .04em;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; backdrop-filter: blur(10px);
}
.x-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: xPulse 1.8s ease-out infinite; }
.x-title { display: flex; flex-wrap: wrap; gap: 0 .26em; max-width: 1120px; margin: 0 0 22px; color: #fff; font-family: var(--font-head); font-size: clamp(1.5rem, 3.96vw, 3.72rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.06; }
.x-word { display: inline-block; overflow: hidden; padding-bottom: .1em; }
.x-word > span { display: inline-block; animation: xRise .9s var(--ease) both; }
.x-word:nth-child(2) > span { animation-delay: .08s; }
.x-word:nth-child(3) > span { animation-delay: .16s; }
.x-word:nth-child(4) > span { animation-delay: .24s; }
.x-word:nth-child(5) > span { animation-delay: .32s; }
.x-word:nth-child(6) > span { animation-delay: .4s; }
.x-word:last-child > span { color: var(--red); }
.x-hero__lead { max-width: 620px; margin: 0 0 30px; color: rgba(255, 255, 255, .84); font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.55; animation: xFade 1s .45s both; }
.x-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; animation: xFade 1s .6s both; }
.x-scroll { display: inline-flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .78); font-size: .875rem; }
.x-scroll__mouse { position: relative; width: 22px; height: 34px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 12px; }
.x-scroll__mouse::before { content: ""; position: absolute; left: 9px; top: 6px; width: 3px; height: 6px; border-radius: 3px; background: var(--red); animation: wheel 1.5s infinite; }

/* Banner applied to listing pages */
.page-hero--banner { display: flex; align-items: center; min-height: 86svh; padding: calc(var(--nav-h) + 24px) 0 48px; isolation: isolate; background: #000; }
.page-hero--banner::before { z-index: -2; background: linear-gradient(0deg, #070707 2%, rgba(7, 7, 7, .6) 46%, rgba(7, 7, 7, .66) 100%), radial-gradient(ellipse at 80% 30%, rgba(242, 29, 53, .28), transparent 48%); }
.page-hero--banner .x-hero__img { z-index: -3; }
.page-hero--banner .page-hero-title { font-size: clamp(1.5rem, 3.72vw, 3.36rem); letter-spacing: -.05em; animation: xFadeUp 1s var(--ease) both; }
.page-hero--banner .page-hero-lead { color: rgba(255, 255, 255, .84); animation: xFade 1s .3s both; }
.page-hero--banner .page-breadcrumb, .page-hero--banner .page-breadcrumb a { color: rgba(255, 255, 255, .62); }

/* Ticker ------------------------------------------------------------------ */
.x-ticker { overflow: hidden; padding: 20px 0; background: var(--red); color: #fff; }
.x-ticker__track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.x-ticker__group { display: flex; flex-shrink: 0; align-items: center; gap: 30px; padding-right: 30px; font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.x-ticker i { font-size: .75rem; opacity: .7; }

/* Introduction ------------------------------------------------------------ */
.x-intro { padding: clamp(72px, 10vw, 140px) 0; background: var(--ink); }
.x-intro__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.x-intro__text { margin: 26px 0 0; color: #fff; font-family: var(--font-head); font-size: clamp(1.25rem, 2.1vw, 1.75rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.45; }
.x-intro__sub { margin: 20px 0 0; max-width: 580px; color: var(--text-dim); font-size: 1.0625rem; line-height: 1.75; }
.x-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 34px 0 0; border-top: 1px solid var(--line); }
.x-facts dt { margin-bottom: 6px; color: var(--red); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.x-facts dd { margin: 0; color: #e7e7ea; font-size: .9375rem; line-height: 1.45; }
.x-intro__art { perspective: 900px; }

/* Vector scenes ----------------------------------------------------------- */
.scene { position: relative; width: min(100%, 520px); margin-inline: auto; aspect-ratio: 1; transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .3s ease-out; }
.scene__glow { position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(circle, rgba(242, 29, 53, .34), transparent 68%); animation: xBreathe 5s ease-in-out infinite; }
.scene__svg { position: relative; width: 100%; height: 100%; overflow: visible; stroke-linecap: round; stroke-linejoin: round; }
.scene__rings circle { stroke: rgba(255, 255, 255, .12); stroke-width: 1.5; stroke-dasharray: 4 12; transform-origin: 260px 260px; animation: xSpin 60s linear infinite; }
.scene__rings circle:nth-child(2) { animation-direction: reverse; animation-duration: 42s; }
.s-body { fill: #141417; stroke: rgba(255, 255, 255, .34); stroke-width: 2; }
.s-screen { fill: #1d1d21; stroke: rgba(255, 255, 255, .16); stroke-width: 1.5; }
.s-line { fill: rgba(255, 255, 255, .62); }
.s-btn, .s-bar--red { fill: var(--red); }
.s-bar { fill: rgba(255, 255, 255, .78); }
.s-dot { fill: rgba(255, 255, 255, .8); }
.s-dot-red { fill: var(--red); }
.s-core { fill: var(--red); filter: drop-shadow(0 0 26px rgba(242, 29, 53, .7)); }
.s-spark { fill: #fff; transform-origin: 260px 260px; animation: xTwinkle 3s ease-in-out infinite; }
.s-link, .s-road, .s-orbit { stroke: rgba(255, 255, 255, .36); stroke-width: 2; }
.s-road { stroke-width: 3; stroke-dasharray: 16 14; animation: xDash 2s linear infinite; }
.s-flow { stroke: var(--red-soft); stroke-dasharray: 8 12; animation: xDash 1.4s linear infinite; }
.s-orbit { stroke-dasharray: 3 14; }
.s-draw { stroke: var(--red); stroke-width: 5; stroke-dasharray: 700; animation: xDraw 5s ease-in-out infinite; }
.s-tap { stroke: var(--red-soft); stroke-width: 3; transform-origin: 364px 290px; animation: xTap 2.4s ease-out infinite; }
.s-wheel { fill: #070707; stroke: #fff; stroke-width: 5; stroke-dasharray: 12 8; transform-box: fill-box; transform-origin: center; animation: xSpin 1.2s linear infinite; }
.s-cursor { fill: #fff; stroke: #070707; stroke-width: 2; animation: xCursor 5s ease-in-out infinite; }
.s-float { animation: xFloat 6s ease-in-out infinite; }
.s-float--late { animation-delay: -3s; }
.s-spin { transform-origin: 260px 260px; animation: xSpin 16s linear infinite; }
.s-spin--slow { animation-duration: 36s; }
.s-drive { animation: xDrive 6s ease-in-out infinite; }
.s-scan { fill: var(--red-soft); animation: xScan 3.2s ease-in-out infinite; }
.s-pin { transform-box: fill-box; transform-origin: center; animation: xPulseShape 2s ease-in-out infinite; }
.s-p1, .s-p2, .s-p3 { transform-box: fill-box; transform-origin: center; animation: xPulseShape 3.4s ease-in-out infinite; }
.s-p2 { animation-delay: -1.1s; }
.s-p3 { animation-delay: -2.2s; }
.s-a1, .s-a2, .s-a3 { animation: xBlink 3s ease-in-out infinite; }
.s-a2 { animation-delay: .4s; }
.s-a3 { animation-delay: .8s; }
.s-b1, .s-b2, .s-b3, .s-b4, .s-b5 { transform-box: fill-box; transform-origin: bottom; animation: xBars 3.6s ease-in-out infinite; }
.s-b2 { animation-delay: .2s; }
.s-b3 { animation-delay: .4s; }
.s-b4 { animation-delay: .6s; }
.s-b5 { animation-delay: .8s; }
.scene__badge {
  position: absolute; right: 7%; bottom: 13%; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 22px; color: #fff; font-size: 1.9rem;
  background: rgba(242, 29, 53, .9); box-shadow: 0 18px 44px rgba(242, 29, 53, .45); animation: xFloat 5s ease-in-out infinite reverse;
}
.scene__badge--kiosk { right: 39.5%; top: 21%; bottom: auto; width: 68px; height: 68px; background: var(--red); }

/* Half to full-screen image ----------------------------------------------- */
.x-expand { background: var(--ink); }
.x-expand__pin { position: relative; display: flex; align-items: center; min-height: 80vh; overflow: hidden; }
.x-expand__frame { position: absolute; inset: 0; }
.x-expand__frame img { width: 100%; height: 100%; object-fit: cover; }
.x-expand__frame::after { content: ""; position: absolute; inset: 0; background: rgba(5, 5, 5, .68); }
.x-expand__copy { position: relative; z-index: 1; }
.x-expand__text { max-width: 920px; margin: 0; color: #fff; font-family: var(--font-head); font-size: clamp(1.7rem, 4vw, 3.4rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.22; }
.x-expand__text--long { max-width: 860px; font-size: clamp(1.25rem, 2.4vw, 2.1rem); letter-spacing: -.02em; line-height: 1.35; }

/* Fit: audience and pains -------------------------------------------------- */
.x-fit { background: var(--ink); }
.x-fit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); }
.x-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.x-tag { padding: 11px 18px; color: #f0f0f2; font-size: .9375rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .04); transition: background .25s, border-color .25s; }
.x-tag:hover { background: rgba(242, 29, 53, .14); border-color: rgba(242, 29, 53, .6); }
.x-pains { margin: 0; padding: 0; list-style: none; }
.x-pains li { display: flex; align-items: baseline; gap: 20px; padding: 20px 0; color: #fff; font-family: var(--font-head); font-size: clamp(1.05rem, 1.7vw, 1.4rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.35; border-bottom: 1px solid var(--line); transition: padding .3s var(--ease), color .3s; }
.x-pains li:hover { padding-left: 12px; color: var(--red-soft); }
.x-pains__n { color: var(--red); font-size: .8125rem; font-weight: 600; }

/* Feature cards ----------------------------------------------------------- */
.x-features { background: var(--paper); color: var(--text-dark); }
.x-features .section-kicker { color: var(--red-deep); }
.x-features__head { margin-bottom: 44px; }
.x-features__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; perspective: 1200px; }
.x-card {
  position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 28px; overflow: hidden; color: #fff; border-radius: var(--radius-lg); background: #0d0d0f;
  transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .25s ease-out, box-shadow .3s;
}
.js .x-card.reveal.visible { transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); }
.x-card:hover { box-shadow: 0 30px 60px -28px rgba(242, 29, 53, .7); }
.x-card__shine { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(242, 29, 53, .34), transparent 70%); transition: opacity .3s; }
.x-card:hover .x-card__shine { opacity: 1; }
.x-card__num { position: absolute; top: 22px; right: 26px; color: rgba(255, 255, 255, .28); font-family: var(--font-head); font-size: .9375rem; font-weight: 600; }
.x-card__icon { position: relative; width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: auto; color: #fff; font-size: 1.45rem; border-radius: 16px; background: var(--red); transition: transform .4s var(--ease); }
.x-card:hover .x-card__icon { transform: rotate(-8deg) scale(1.08); }
.x-card h3 { position: relative; margin: 34px 0 8px; font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.x-card p { position: relative; margin: 0; color: var(--text-dim); font-size: .9875rem; line-height: 1.6; }

/* Each product family arranges its features differently */
.x-page--ai .x-features__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.x-page--ai .x-card { grid-column: span 2; }
.x-page--ai .x-card:nth-child(1) { grid-column: span 4; }
.x-page--ai .x-card:nth-child(4) { grid-column: span 4; flex-direction: row; align-items: center; gap: 24px; min-height: 0; }
.x-page--ai .x-card:nth-child(4) .x-card__icon { flex: 0 0 56px; margin: 0; }
.x-page--ai .x-card:nth-child(4) h3 { margin: 0 0 4px; }
.x-page--payment .x-features__grid { display: flex; gap: 18px; padding-bottom: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.x-page--payment .x-card { flex: 0 0 min(420px, 82vw); min-height: 360px; scroll-snap-align: start; }
.x-page--payment .x-card:nth-child(even) { background: var(--red); }
.x-page--payment .x-card:nth-child(even) .x-card__icon { background: #0d0d0f; }
.x-page--payment .x-card:nth-child(even) p { color: #ffe3e6; }
.x-page--payment .x-card:nth-child(even) .x-card__num { color: rgba(255, 255, 255, .6); }
.x-page--workforce .x-features__grid { display: block; max-width: 880px; margin-inline: auto; }
.x-page--workforce .x-card { position: sticky; top: calc(var(--nav-h) + 16px); min-height: 240px; margin-bottom: 18px; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 -14px 40px rgba(0, 0, 0, .18); }
.x-page--workforce .x-card:nth-child(2) { top: calc(var(--nav-h) + 34px); }
.x-page--workforce .x-card:nth-child(3) { top: calc(var(--nav-h) + 52px); }
.x-page--workforce .x-card:nth-child(4) { top: calc(var(--nav-h) + 70px); }
.x-page--service .x-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.x-page--service .x-card { min-height: 250px; }
.x-page--service .x-card:nth-child(4n + 2), .x-page--service .x-card:nth-child(4n + 3) { background: #fff; color: var(--text-dark); box-shadow: inset 0 0 0 1px var(--line-dark); }
.x-page--service .x-card:nth-child(4n + 2) p, .x-page--service .x-card:nth-child(4n + 3) p { color: var(--text-dark-dim); }
.x-page--service .x-card:nth-child(4n + 2) .x-card__num, .x-page--service .x-card:nth-child(4n + 3) .x-card__num { color: rgba(0, 0, 0, .3); }

/* Process timeline -------------------------------------------------------- */
.x-steps { background: #040404; }
.x-steps__head { margin-bottom: 52px; }
.x-steps__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin: 0; padding: 0; list-style: none; }
.x-steps__list::before { content: ""; position: absolute; top: 28px; left: 28px; right: calc(25% - 47.5px); height: 2px; background: linear-gradient(90deg, var(--red), var(--red) 40%, rgba(255, 255, 255, .16) 40%, rgba(255, 255, 255, .16)); background-size: 250% 100%; animation: xLine 6s ease-in-out infinite alternate; }
.x-steps__list li { position: relative; }
.x-steps__n { position: relative; width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 22px; color: #fff; font-family: var(--font-head); font-size: 1.2rem; font-weight: 600; border: 2px solid var(--red); border-radius: 50%; background: #040404; }
.x-steps__list h3 { margin: 0 0 8px; font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; }
.x-steps__list p { margin: 0; color: var(--text-dim); font-size: .9875rem; line-height: 1.6; }

/* Use cases --------------------------------------------------------------- */
.x-uses { padding: clamp(56px, 7vw, 96px) 0; background: var(--ink); }
.x-uses__title { margin: 0 0 24px; color: var(--text-dim); font-size: .875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.x-uses__rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(1320px, calc(100% - 8vw)); margin-inline: auto; border-top: 1px solid var(--line); }
.x-uses__item { display: flex; align-items: center; gap: 16px; padding: 24px 10px; color: #fff; font-family: var(--font-head); font-size: clamp(1.15rem, 2.2vw, 1.9rem); font-weight: 500; letter-spacing: -.02em; border-bottom: 1px solid var(--line); transition: color .25s, padding .3s var(--ease); }
.x-uses__item i { color: var(--red); font-size: .8em; transition: transform .3s var(--ease); }
.x-uses__item:hover { padding-left: 20px; color: var(--red-soft); }
.x-uses__item:hover i { transform: rotate(45deg); }

/* FAQ --------------------------------------------------------------------- */
.x-faq { background: var(--ink-2); }
.x-faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.x-faq__side { position: sticky; top: calc(var(--nav-h) + 32px); }
.x-faq__side .section-lead { margin-top: 18px; }
.x-link { color: var(--red-soft); text-decoration: underline; text-underline-offset: 4px; }

/* Vector intro on listing pages */
.x-band { padding: clamp(64px, 9vw, 120px) 0; background: var(--ink); }

/* Keyframes --------------------------------------------------------------- */
@keyframes xKen { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes xGrid { to { background-position: 72px 72px, 72px 72px; } }
@keyframes xPulse { 0% { box-shadow: 0 0 0 0 rgba(242, 29, 53, .7); } 100% { box-shadow: 0 0 0 12px rgba(242, 29, 53, 0); } }
@keyframes xRise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes xFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes xFadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes xSpin { to { transform: rotate(360deg); } }
@keyframes xBreathe { 50% { transform: scale(1.16); opacity: .7; } }
@keyframes xFloat { 50% { transform: translateY(-14px); } }
@keyframes xDash { to { stroke-dashoffset: -40; } }
@keyframes xDraw { 0% { stroke-dashoffset: 700; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes xTap { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes xTwinkle { 50% { transform: scale(.72) rotate(45deg); } }
@keyframes xCursor { 0%, 100% { transform: translate(0, 0); } 35% { transform: translate(-150px, 26px); } 70% { transform: translate(-60px, 90px); } }
@keyframes xDrive { 50% { transform: translateX(70px); } }
@keyframes xScan { 0%, 100% { transform: translateY(0); opacity: 0; } 15%, 85% { opacity: 1; } 50% { transform: translateY(232px); } }
@keyframes xPulseShape { 50% { transform: scale(1.1); } }
@keyframes xBlink { 50% { opacity: .35; } }
@keyframes xBars { 50% { transform: scaleY(.68); } }
@keyframes xLine { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Scroll-linked effects where the browser supports them -------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .x-hero__img { animation: xParallax linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .x-expand { height: 165vh; view-timeline: --xp block; }
    .x-expand__pin { position: sticky; top: 0; height: 100vh; }
    .x-expand__frame { clip-path: inset(24% 26% round 28px); animation: xOpen linear both; animation-timeline: --xp; animation-range: contain 0% contain 80%; }
    .x-expand__frame::after { animation: xDim linear both; animation-timeline: --xp; animation-range: contain 10% contain 80%; }
    .x-expand__copy { animation: xCopy linear both; animation-timeline: --xp; animation-range: contain 40% contain 90%; }
  }
}
@keyframes xParallax { from { transform: translateY(0) scale(1); } to { transform: translateY(-12%) scale(1.06); } }
@keyframes xOpen { to { clip-path: inset(0 0 round 0); } }
@keyframes xDim { from { opacity: 0; } to { opacity: 1; } }
@keyframes xCopy { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 991px) {
  .x-intro__grid, .x-fit__grid, .x-faq__grid { grid-template-columns: 1fr; }
  .scene { width: min(100%, 400px); }
  .x-features__grid, .x-page--service .x-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-page--ai .x-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-page--ai .x-card, .x-page--ai .x-card:nth-child(1), .x-page--ai .x-card:nth-child(4) { grid-column: span 1; flex-direction: column; align-items: stretch; min-height: 280px; }
  .x-page--ai .x-card:nth-child(4) .x-card__icon { flex: 0 0 auto; margin-bottom: auto; }
  .x-page--ai .x-card:nth-child(4) h3 { margin: 34px 0 8px; }
  .x-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-steps__list::before { display: none; }
  .x-faq__side { position: static; }
}
@media (max-width: 575px) {
  .x-features__grid, .x-page--service .x-features__grid, .x-page--ai .x-features__grid, .x-steps__list, .x-uses__rail, .x-facts { grid-template-columns: 1fr; }
  .x-page--ai .x-card, .x-page--ai .x-card:nth-child(1), .x-page--ai .x-card:nth-child(4) { min-height: 240px; }
  .x-page--industry .x-card { grid-template-columns: 56px 1fr; }
  .x-page--industry .x-card p { grid-column: 2; }
  .x-page--workforce .x-card { position: static; }
  .x-hero__actions .x-scroll { display: none; }
  .scene__badge { width: 60px; height: 60px; font-size: 1.5rem; border-radius: 16px; }
}
@media (max-width: 767px) {
  .x-hero, .page-hero--banner { min-height: 60svh; }
  .x-hero__inner { padding-top: calc(var(--nav-h) + 20px); padding-bottom: 36px; }
  .page-hero--banner { padding: calc(var(--nav-h) + 20px) 0 36px; }
}
@media (hover: none) { .scene, .x-card { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .x-hero__img, .x-word > span, .x-hero__lead, .x-hero__actions, .x-ticker__track, .scene *, .scene__glow, .scene__badge, .x-steps__list::before { animation: none !important; }
  .s-draw { stroke-dashoffset: 0; }
  .s-tap, .s-scan { display: none; }
}

/* Scene orbits and badges may extend past their column */
.x-page, .x-band { overflow-x: clip; }
.x-title { overflow-wrap: anywhere; }
/* Bootstrap row gutters are wider than the 16px mobile page margin */
@media (max-width: 575px) { footer, main { overflow-x: clip; } }

/* Colour rhythm: light, red and image sections between the dark ones ------- */
.x-intro, .x-band { background: var(--paper); color: var(--text-dark); }
.x-intro .section-kicker, .x-band .section-kicker { color: var(--red-deep); }
.x-intro__text { color: var(--text-dark); }
.x-intro__sub { color: var(--text-dark-dim); }
.x-facts { border-top-color: var(--line-dark); }
.x-facts dd { color: var(--text-dark); }
.x-facts dt { color: var(--red-deep); }
.x-intro__art { padding: clamp(18px, 3vw, 34px); border-radius: 32px; background: radial-gradient(circle at 70% 20%, #2a0a10, #0b0b0d 62%); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55); }
.x-fit { background: linear-gradient(130deg, var(--red-deep), var(--red) 60%, #ff4a5e); color: #fff; }
.x-fit .section-kicker, .x-fit .section-title .accent, .x-fit .x-pains__n { color: #fff; }
.x-fit .x-tag { color: #fff; border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .12); }
.x-fit .x-tag:hover { color: var(--red-deep); background: #fff; border-color: #fff; }
.x-fit .x-pains li { border-bottom-color: rgba(255, 255, 255, .28); }
.x-fit .x-pains li:hover { color: #fff; }
.x-steps { position: relative; overflow: hidden; isolation: isolate; }
.x-steps__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.x-steps::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 4, 4, .92), rgba(4, 4, 4, .62)); }
.x-steps__n { background: var(--red); }
.x-uses { background: #fff; color: var(--text-dark); }
.x-uses__title { color: var(--red-deep); }
.x-uses__rail { border-top-color: var(--line-dark); }
.x-uses__item { color: var(--text-dark); border-bottom-color: var(--line-dark); }
.x-uses__item:hover { color: var(--red-deep); }
.x-faq { background: var(--paper-2); color: var(--text-dark); }
.x-faq .section-kicker { color: var(--red-deep); }
.x-faq .section-lead { color: var(--text-dark-dim); }
.x-faq .x-link { color: var(--red-deep); }
.x-faq .faq-accordion .accordion-item { background: #fff; border: 1px solid var(--line-dark); }
.x-faq .faq-accordion .accordion-button { color: var(--text-dark); background: #fff; }
.x-faq .faq-accordion .accordion-button:not(.collapsed) { color: var(--red-deep); background: rgba(242, 29, 53, .06); }
.x-faq .faq-accordion .accordion-button::after { filter: none; }
.x-faq .faq-accordion .accordion-body { color: var(--text-dark-dim); background: #fff; }

/* Listing pages */
.x-list .services { background: var(--paper); color: var(--text-dark); }
.x-list .services .section-kicker { color: var(--red-deep); }
.x-list .services .section-lead { color: var(--text-dark-dim); }
.x-list .service-detail-card { color: var(--text-dark); background: #fff; border-color: var(--line-dark); box-shadow: 0 24px 50px -36px rgba(0, 0, 0, .5); }
.x-list .service-detail-card p { color: var(--text-dark-dim); }
.x-list .service-detail-card a:not(.btn) { color: var(--text-dark); }
.x-imgcard { display: flex; flex-direction: column; padding: 0 0 26px; overflow: hidden; }
.x-imgcard > *:not(.x-thumb) { margin-inline: 26px; }
.x-thumb { width: 100%; height: 190px; object-fit: cover; margin-bottom: 18px; transition: transform .6s var(--ease); }
.x-imgcard:hover .x-thumb { transform: scale(1.06); }
.x-imgcard .service-detail-icon { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; margin-top: -46px; margin-bottom: 14px; color: #fff; font-size: 1.4rem; border-radius: 16px; background: var(--red); }
.x-imgcard .arrow-link { margin-top: auto; }
.x-formcard { display: grid; grid-template-columns: 1fr 1.1fr; overflow: hidden; color: var(--text-dark); border-radius: var(--radius-lg); background: #fff; }
.x-formcard img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.x-formcard__body { padding: clamp(24px, 3vw, 40px); }
.x-formcard .section-kicker { color: var(--red-deep); }
.x-formcard .section-title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.x-formcard p { margin: 14px 0 22px; color: var(--text-dark-dim); }

/* Cards always carry an image */
.x-card { min-height: 0; padding: 0 0 26px; }
.x-card > h3, .x-card > p { margin-inline: 24px; }
.x-card__media { position: relative; display: block; height: 180px; overflow: hidden; }
.x-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.x-card:hover .x-card__media img { transform: scale(1.07); }
.x-card__icon { z-index: 1; margin: -30px 0 0 24px; }
.x-card h3 { margin-top: 18px; }
.x-card__num { z-index: 1; color: #fff; }
.js .x-card.reveal.visible { transition: transform .25s ease-out, box-shadow .3s; transition-delay: 0s; }

/* Family layouts rebuilt without sticky or sideways scroll areas */
.x-page--ai .x-card:nth-child(1) .x-card__media { height: 260px; }
.x-page--ai .x-card:nth-child(4) { display: grid; grid-template-columns: 46% 1fr; column-gap: 0; align-content: center; padding: 0; }
.x-page--ai .x-card:nth-child(4) .x-card__media { grid-row: 1 / span 3; height: 100%; min-height: 220px; }
.x-page--ai .x-card:nth-child(4) .x-card__icon { margin: 24px 0 0 24px; flex: none; }
.x-page--ai .x-card:nth-child(4) h3 { margin: 14px 24px 6px; }
.x-page--payment .x-features__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
.x-page--payment .x-card { min-height: 0; }
.x-page--payment .x-card__media { height: 240px; }
.x-page--workforce .x-features__grid { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: none; }
.x-page--workforce .x-card, .x-page--workforce .x-card:nth-child(n) { position: relative; top: auto; display: grid; grid-template-columns: 42% 1fr; align-content: center; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
.x-page--workforce .x-card:nth-child(even) { grid-template-columns: 1fr 42%; }
.x-page--workforce .x-card:nth-child(even) .x-card__media { grid-column: 2; }
.x-page--workforce .x-card .x-card__media { grid-row: 1 / span 3; height: 100%; min-height: 200px; }
.x-page--workforce .x-card > :not(.x-card__media):not(.x-card__shine):not(.x-card__num) { grid-column: 1; }
.x-page--workforce .x-card:nth-child(odd) > :not(.x-card__media):not(.x-card__shine):not(.x-card__num) { grid-column: 2; }
.x-page--workforce .x-card__icon { margin: 28px 0 0 24px; }
.x-page--workforce .x-card p { margin-bottom: 26px; }
.x-page--industry .x-card { grid-template-columns: 150px 1fr 1.3fr; padding: 16px 8px; }
.x-page--industry .x-card__media { grid-column: 1; height: 96px; border-radius: 14px; }
.x-page--industry .x-card__icon { display: none; }
.x-page--industry .x-card > h3, .x-page--industry .x-card > p { margin-inline: 0; }
.x-page--service .x-card { display: grid; grid-template-columns: 44% 1fr; align-content: center; min-height: 0; padding: 0; }
.x-page--service .x-card .x-card__media { grid-row: 1 / span 3; height: 100%; min-height: 230px; }
.x-page--service .x-card__icon { margin: 26px 0 0 24px; }

/* Icons sit where they belong in each scene */
.scene__badge--network, .scene__badge--ai { top: 50%; left: 50%; right: auto; bottom: auto; margin: -38px 0 0 -38px; background: transparent; box-shadow: none; animation: none; }
.scene--ai .s-spark { display: none; }
.scene__badge--wireframe { right: 2%; bottom: 3%; }
.scene__badge--phone { right: 8%; bottom: 8%; }
.scene__badge--browser { right: 3%; bottom: 8%; }
.scene__badge--dashboard { right: 2%; bottom: 8%; }
.scene__badge--brand { right: 42%; bottom: 40%; background: transparent; box-shadow: none; display: none; }
.scene__badge--growth { right: 3%; top: 8%; bottom: auto; }

@media (max-width: 991px) {
  .x-page--ai .x-card, .x-page--ai .x-card:nth-child(1), .x-page--ai .x-card:nth-child(4), .x-page--service .x-card, .x-page--workforce .x-card, .x-page--workforce .x-card:nth-child(n) { display: flex; flex-direction: column; min-height: 0; padding: 0 0 26px; }
  .x-page--ai .x-card:nth-child(4) .x-card__media, .x-page--service .x-card .x-card__media, .x-page--workforce .x-card .x-card__media { height: 180px; min-height: 0; }
  .x-page--ai .x-card:nth-child(4) .x-card__icon, .x-page--service .x-card__icon, .x-page--workforce .x-card__icon { margin: -30px 0 0 24px; flex: none; }
  .x-page--payment .x-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-formcard { grid-template-columns: 1fr; }
  .x-formcard img { height: 200px; min-height: 0; }
}
@media (max-width: 575px) {
  .x-page--payment .x-features__grid { grid-template-columns: 1fr; }
  .x-page--industry .x-card { grid-template-columns: 96px 1fr; }
  .x-page--industry .x-card__media { height: 72px; }
}

/* Round-3 fixes */
.x-imgcard .bi-stars, .x-card__icon .bi-stars, .scene__badge .bi-stars { color: #fff; }
.x-page--workforce .x-card, .x-page--workforce .x-card:nth-child(n), .x-page--service .x-card { grid-template-rows: auto auto 1fr; }
.x-page--ai .x-card:nth-child(4) { grid-template-rows: auto auto 1fr; }
.x-list--contact > section.pad-section:not(.x-faq) { background: var(--paper); color: var(--text-dark); }
.x-list--contact .contact-info-label { color: var(--text-dark-dim); }
.x-list--contact .contact-info-value, .x-list--contact .contact-info-value a { color: var(--text-dark); }
.x-list--contact .contact-info-value a:hover { color: var(--red-deep); }
.x-list--contact .contact-info-value small { color: var(--text-dark-dim); }
.x-list--contact .socials a { color: var(--text-dark); border-color: var(--line-dark); }
.x-list--contact .socials a:hover { color: #fff; }
.x-list--contact .x-formcard { box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .5); }
.x-list--contact .btn-outline-light { color: var(--text-dark); border-color: rgba(0, 0, 0, .3); }
.x-list--contact .btn-outline-light:hover { color: #fff; }
.x-list .service-detail-card .btn-outline-light { color: var(--text-dark); border-color: rgba(0, 0, 0, .3); }

/* Feature card button */
.x-card .x-card__cta {
  flex: none; width: max-content; max-width: 100%; justify-self: start;
  position: relative; z-index: 2; display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin: 20px 24px 0; padding: 10px 20px;
  color: var(--red); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  border: 2px solid var(--red); border-radius: 999px; box-shadow: 0 0 15px rgba(242, 29, 53, .2);
  transition: background .25s, color .25s, box-shadow .25s;
}
.x-card__cta i { transition: transform .25s var(--ease); }
.x-card__cta:hover, .x-card__cta:focus-visible { color: #fff; background: var(--red); box-shadow: 0 0 24px rgba(242, 29, 53, .45); }
.x-card__cta:hover i { transform: translate(2px, -2px); }
.x-page--payment .x-card:nth-child(even) .x-card__cta { color: #fff; border-color: #fff; box-shadow: none; }
.x-page--payment .x-card:nth-child(even) .x-card__cta:hover { color: var(--red); background: #fff; }
.x-page--service .x-card, .x-page--ai .x-card:nth-child(4) { grid-template-rows: auto auto auto 1fr; }
.x-page--service .x-card .x-card__media, .x-page--ai .x-card:nth-child(4) .x-card__media { grid-row: 1 / span 4; }
.x-page--service .x-card .x-card__cta, .x-page--ai .x-card:nth-child(4) .x-card__cta { align-self: start; justify-self: start; margin-bottom: 24px; }
@media (min-width: 576px) {
  .x-page--industry .x-card { grid-template-columns: 150px 1fr 1.3fr auto; }
  .x-page--industry .x-card .x-card__cta { margin: 0; align-self: center; }
}
@media (max-width: 575px) {
  .x-page--industry .x-card .x-card__cta { grid-column: 2; margin: 4px 0 0; }
}

/* Workforce: projects-style sticky stack */
@media (min-width: 992px) {
  .x-page--workforce .x-features__grid { display: flex; flex-direction: column; gap: 8vh; max-width: 1200px; margin-inline: auto; }
  .x-page--workforce .x-card, .x-page--workforce .x-card:nth-child(n) {
    position: sticky; top: calc(var(--nav-h) + 24px + var(--i, 0) * 16px); z-index: calc(var(--i, 0) + 1);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto minmax(0, 1fr); column-gap: 24px;
    height: min(78vh, 660px); margin: 0; padding: clamp(24px, 3vw, 40px);
    border: 2px solid var(--red); border-radius: clamp(32px, 4vw, 56px); background: #0c0c0e;
    box-shadow: 0 -30px 60px -34px rgba(0, 0, 0, .75); transform-origin: 50% 0;
  }
  .x-page--workforce .x-card:nth-child(2) { --i: 1; }
  .x-page--workforce .x-card:nth-child(3) { --i: 2; }
  .x-page--workforce .x-card:nth-child(4) { --i: 3; }
  .x-page--workforce .x-card:nth-child(5) { --i: 4; }
  .x-page--workforce .x-card:nth-child(6) { --i: 5; }
  .x-page--workforce .x-card:nth-child(7) { --i: 6; }
  .x-page--workforce .x-card:nth-child(8) { --i: 7; }
  .x-page--workforce .x-card:nth-child(9) { --i: 8; }
  .x-page--workforce .x-card:nth-child(10) { --i: 9; }
  .x-page--workforce .x-card:hover { box-shadow: 0 30px 60px -28px rgba(242, 29, 53, .55); }
  .js .x-page--workforce .x-card.reveal.visible {
    transform: scale(var(--stack, 1)) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
    transition: transform .4s var(--ease), filter .4s var(--ease), box-shadow .3s;
  }
  .x-page--workforce .x-card.is-behind { --stack: .94; filter: brightness(.5); }

  .x-page.x-page--workforce .x-card:nth-child(n) > .x-card__num { grid-area: 1 / 1; position: static; color: var(--red); opacity: .22; font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 800; line-height: .9; }
  .x-page.x-page--workforce .x-card:nth-child(n) > .x-card__cta { grid-area: 1 / 2; align-self: start; justify-self: end; margin: 0; }
  .x-page.x-page--workforce .x-card:nth-child(n) > h3 { grid-area: 2 / 1 / 3 / 3; margin: 10px 0 6px; font-size: clamp(1.75rem, 3.2vw, 3rem); font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; line-height: 1.05; }
  .x-page.x-page--workforce .x-card:nth-child(n) > p { grid-area: 3 / 1 / 4 / 3; max-width: 62ch; margin: 0 0 22px; }
  .x-page.x-page--workforce .x-card:nth-child(n) > .x-card__media { grid-area: 4 / 1 / 5 / 3; height: 100%; min-height: 0; border: 1px solid rgba(255, 255, 255, .06); border-radius: clamp(24px, 3vw, 40px); }
  .x-page.x-page--workforce .x-card:nth-child(n) > .x-card__icon { grid-area: 4 / 1; align-self: start; justify-self: start; margin: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .x-page--workforce .x-card, .x-page--workforce .x-card:nth-child(n) { position: relative; top: auto; }
  .x-page--workforce .x-card.is-behind { --stack: 1; filter: none; }
}

/* Icons placed around each scene */
.scene__chip {
  position: absolute; width: 12%; aspect-ratio: 1; margin: -6% 0 0 -6%; display: grid; place-items: center; color: #fff; font-size: clamp(1rem, 2.2vw, 1.5rem);
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 26%; background: #17171b; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); animation: xFloat 5s ease-in-out infinite;
}
.scene__chip:nth-of-type(even) { animation-delay: -2.5s; }
.scene__chip:nth-of-type(3n) { color: #fff; border-color: transparent; background: var(--red); box-shadow: 0 14px 30px rgba(242, 29, 53, .4); }
.scene--network .s-dot, .scene--network .s-dot-red { display: none; }
.scene--network .scene__chip { border: 0; background: transparent; box-shadow: none; animation: none; color: #fff; }
.scene--network .scene__chip--1 { left: 19.2%; top: 21.2%; color: var(--red-soft); }
.scene--network .scene__chip--2 { left: 80.8%; top: 21.2%; }
.scene--network .scene__chip--3 { left: 19.2%; top: 78.8%; }
.scene--network .scene__chip--4 { left: 80.8%; top: 78.8%; color: var(--red-soft); }
.scene--kiosk .scene__chip--1 { left: 15%; top: 22%; }
.scene--kiosk .scene__chip--2 { left: 86%; top: 20%; }
.scene--kiosk .scene__chip--3 { left: 12%; top: 66%; }
.scene--kiosk .scene__chip--4 { left: 85%; top: 72%; }
.scene--kiosk .s-tap { display: none; }
.scene--browser .scene__chip--1, .scene--wireframe .scene__chip--1 { left: 18%; top: 9%; }
.scene--browser .scene__chip--2, .scene--wireframe .scene__chip--2 { left: 48%; top: 7%; }
.scene--browser .scene__chip--3, .scene--wireframe .scene__chip--3 { left: 78%; top: 9%; }
.scene--browser .scene__chip--4, .scene--wireframe .scene__chip--4 { left: 14%; top: 90%; }
.scene--browser .scene__chip--5, .scene--wireframe .scene__chip--5 { left: 40%; top: 92%; }
.scene--browser .scene__chip--6, .scene--wireframe .scene__chip--6 { left: 66%; top: 92%; }
.scene__badge--browser { right: 2%; bottom: 4%; }

/* Home hero heading, 40% smaller to match inner pages */
.hero h1 { font-size: clamp(1.8rem, 3vw, 3.84rem); }
@media (max-width: 575px) { .hero h1 { font-size: clamp(1.68rem, 7.8vw, 2.28rem); } }

.scene--brand .scene__chip--1 { left: 10%; top: 11%; }
.scene--brand .scene__chip--2 { left: 50%; top: 8%; }
.scene--brand .scene__chip--3 { left: 90%; top: 11%; }
.scene--brand .scene__chip--4 { left: 7%; top: 54%; }
.scene--brand .scene__chip--5 { left: 93%; top: 52%; }
.scene--brand .scene__chip--6 { left: 52%; top: 91%; }

/* Fact cards under the introduction */
.x-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 36px 0 0; border-top: 0; }
.x-fact { display: flex; align-items: flex-start; gap: 14px; padding: 18px 18px 20px; border: 1px solid var(--line-dark); border-radius: 18px; background: #fff; box-shadow: 0 22px 40px -32px rgba(0, 0, 0, .55); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.x-fact:hover { transform: translateY(-4px); border-color: rgba(242, 29, 53, .45); box-shadow: 0 28px 44px -28px rgba(242, 29, 53, .45); }
.x-fact__icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; color: #fff; font-size: 1.1rem; border-radius: 13px; background: linear-gradient(145deg, var(--red), var(--red-deep)); box-shadow: 0 10px 20px -8px rgba(242, 29, 53, .6); transition: transform .4s var(--ease); }
.x-fact:hover .x-fact__icon { transform: rotate(-8deg) scale(1.08); }
.x-facts .x-fact { padding: 18px 18px 20px; }
.x-fact > div { min-width: 0; padding: 0; }
.x-fact dt { margin: 0 0 4px; color: var(--text-dark-dim); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.x-fact dd { margin: 0; color: var(--text-dark); font-family: var(--font-head); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.x-fact--price { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--ink-2), #2a0a10); }
.x-fact--price .x-fact__icon { background: var(--red); }
.x-fact--price dt { color: rgba(255, 255, 255, .62); }
.x-fact--price dd { color: #fff; }
@media (max-width: 991px) { .x-facts { grid-template-columns: 1fr; } }
@media (min-width: 992px) { .x-facts .x-fact { flex-direction: column; gap: 16px; } .x-fact dd { font-size: 1.05rem; } }

/* AI scene: icons inside the node circles */
.scene--ai .s-dot { display: none; }
.scene--ai .scene__chip { width: 11%; border: 0; border-radius: 50%; color: #17171b; background: #dcdce0; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); font-size: clamp(.95rem, 1.9vw, 1.3rem); }
.scene--ai .scene__chip:nth-of-type(3n) { color: #17171b; background: #dcdce0; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.scene--ai .scene__chip--1 { left: 23.1%; top: 28.8%; }
.scene--ai .scene__chip--2 { left: 78.8%; top: 25%; }
.scene--ai .scene__chip--3 { left: 84.6%; top: 61.5%; }
.scene--ai .scene__chip--4 { left: 57.7%; top: 86.5%; }
.scene--ai .scene__chip--5 { left: 17.3%; top: 67.3%; }

/* Previous / next */
.catalog-pager { padding: clamp(48px, 6vw, 80px) 0; background: var(--paper); color: var(--text-dark); }
.pager { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(16px, 3vw, 40px); }
.pager__card {
  position: relative; display: flex; align-items: center; gap: 20px; height: 100%; padding: 18px 26px 18px 18px; overflow: hidden; color: var(--text-dark);
  border: 1px solid var(--line-dark); border-radius: 26px; background: #fff; box-shadow: 0 24px 50px -34px rgba(0, 0, 0, .5);
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.pager__card::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(115deg, rgba(242, 29, 53, .1), transparent 60%); opacity: 0; transition: opacity .4s; }
.pager__card:hover { transform: translateY(-6px); border-color: rgba(242, 29, 53, .5); box-shadow: 0 34px 56px -30px rgba(242, 29, 53, .5); }
.pager__card:hover::before { opacity: 1; }
.pager__thumb { position: relative; z-index: 1; flex: 0 0 84px; width: 84px; height: 84px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; border: 3px solid #fff; background: var(--ink); box-shadow: 0 0 0 2px var(--line-dark), 0 14px 26px -12px rgba(0, 0, 0, .55); transition: box-shadow .4s, transform .5s var(--ease); }
.pager__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pager__thumb--icon { color: #fff; font-size: 1.6rem; background: linear-gradient(145deg, var(--red), var(--red-deep)); }
.pager__card:hover .pager__thumb { transform: rotate(-6deg); box-shadow: 0 0 0 2px var(--red), 0 14px 26px -12px rgba(242, 29, 53, .6); }
.pager__card:hover .pager__thumb img { transform: scale(1.18); }
.pager__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pager__label { display: inline-flex; align-items: center; gap: 8px; color: var(--red); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.pager__label i { transition: transform .35s var(--ease); }
.pager__col--prev .pager__card:hover .pager__label i { transform: translateX(-6px); }
.pager__col--next .pager__card:hover .pager__label i { transform: translateX(6px); }
.pager__text strong { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.pager__text small { color: var(--text-dark-dim); font-size: .9rem; line-height: 1.45; }
.pager__col--next .pager__card { flex-direction: row-reverse; padding: 18px 18px 18px 26px; text-align: right; }
.pager__col--next .pager__text { align-items: flex-end; }
.pager__all {
  position: relative; width: 64px; height: 64px; display: grid; place-items: center; color: var(--red); font-size: 1.4rem; border-radius: 50%; background: #fff;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--line-dark); transition: transform .4s var(--ease), background .3s, color .3s;
}
.pager__all::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--red); opacity: 0; animation: pagerPulse 2.6s ease-out infinite; }
.pager__all:hover { color: #fff; background: var(--red); transform: rotate(90deg) scale(1.08); }
.pager__all:hover i { animation: xTwinkle 1s ease-in-out infinite; }
@keyframes pagerPulse { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(1.7); opacity: 0; } }
.js .catalog-pager .reveal--left { transform: translateX(-60px); }
.js .catalog-pager .reveal--right { transform: translateX(60px); }
.js .catalog-pager .reveal.visible { transform: none; }
.js .catalog-pager .pager__all.reveal { transform: scale(.4) rotate(-90deg); }
.js .catalog-pager .pager__all.reveal.visible { transform: none; transition-delay: .25s; }
@media (max-width: 767px) {
  .pager { grid-template-columns: 1fr; }
  .pager__all { display: none; }
  .pager__col--next .pager__card { flex-direction: row; text-align: left; padding: 18px 26px 18px 18px; }
  .pager__col--next .pager__text { align-items: flex-start; }
  .js .catalog-pager .reveal--left, .js .catalog-pager .reveal--right { transform: translateY(30px); }
}

/* Footer social icons */
.socials { flex-wrap: wrap; }
.socials a { position: relative; overflow: hidden; }
.socials a i { transition: transform .35s var(--ease); }
.socials a:hover i { transform: scale(1.18) rotate(-8deg); }
.mobile-nav-socials { flex-wrap: wrap; justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) { .pager__all::after { animation: none; } }

/* Video scene */
.s-play { fill: #fff; }
.s-progress { transform-box: fill-box; transform-origin: left; animation: xProgress 6s ease-in-out infinite; }
@keyframes xProgress { 0% { transform: scaleX(.04); } 80%, 100% { transform: scaleX(1); } }
.scene--video .scene__chip--1 { left: 12%; top: 11%; }
.scene--video .scene__chip--2 { left: 88%; top: 11%; }
.scene--video .scene__chip--3 { left: 12%; top: 86%; }
.scene--video .scene__chip--4 { left: 88%; top: 86%; }
.scene__badge--video { right: 40%; bottom: 3%; display: none; }

/* Product showcase: two opposing marquee rows */
.pshow { overflow: hidden; background: var(--ink); }
.pshow__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 48px; }
.pshow__aside { display: flex; flex-direction: column; align-items: flex-start; }
.pshow__rows { display: grid; gap: 22px; padding-block: 24px; margin-block: -24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.pshow__row { will-change: translate; }
.pshow__track { display: flex; width: max-content; animation: pshowLeft 70s linear infinite; }
.pshow__row--right .pshow__track { animation-name: pshowRight; animation-duration: 80s; }
.pshow__rows:hover .pshow__track, .pshow__rows:focus-within .pshow__track { animation-play-state: paused; }
.pshow__group { display: flex; flex: 0 0 auto; gap: 22px; padding-right: 22px; }
.pshow__card {
  position: relative; display: block; flex: 0 0 clamp(270px, 28vw, 430px); aspect-ratio: 4 / 3; overflow: hidden; color: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ink-3); transition: transform .5s var(--ease), border-color .4s, box-shadow .5s;
}
.pshow__card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: .85; transform: scale(1.02); transition: transform 1s var(--ease), filter .6s, opacity .6s; }
.pshow__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .35) 46%, transparent 72%); transition: opacity .5s; }
.pshow__card::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; }
.pshow__body { position: absolute; left: 24px; right: 84px; bottom: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; transition: transform .5s var(--ease); }
.pshow__body .project-tag { margin: 0; }
.pshow__name { font-family: var(--font-head); font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
.pshow__go { position: absolute; right: 22px; bottom: 24px; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; background: rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .35s, border-color .35s, transform .5s var(--ease); }
.pshow__card:hover, .pshow__card:focus-visible { transform: translateY(-10px); border-color: rgba(242, 29, 53, .7); box-shadow: 0 30px 60px -28px rgba(242, 29, 53, .6); }
.pshow__card:hover img, .pshow__card:focus-visible img { filter: grayscale(0); opacity: 1; transform: scale(1.1); }
.pshow__card:hover::after { animation: pshowSheen 1s ease; }
.pshow__card:hover .pshow__body { transform: translateY(-4px); }
.pshow__card:hover .pshow__go, .pshow__card:focus-visible .pshow__go { background: var(--red); border-color: var(--red); transform: rotate(45deg); }
@keyframes pshowLeft { to { transform: translateX(-50%); } }
@keyframes pshowRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes pshowSheen { from { left: -70%; opacity: 1; } to { left: 140%; opacity: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pshow__row--left { animation: pshowShiftLeft linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .pshow__row--right { animation: pshowShiftRight linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes pshowShiftLeft { from { translate: 6% 0; } to { translate: -6% 0; } }
@keyframes pshowShiftRight { from { translate: -6% 0; } to { translate: 6% 0; } }
@media (max-width: 991px) { .pshow__head { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) {
  .pshow__rows { -webkit-mask-image: none; mask-image: none; }
  .pshow__row { overflow-x: auto; }
  .pshow__track { animation: none; }
  .pshow__group[aria-hidden="true"] { display: none; }
}
.pshow__body .project-tag { white-space: nowrap; }
@media (max-width: 575px) { .pshow__body { left: 18px; right: 74px; bottom: 18px; } .pshow__body .project-tag { padding: 4px 10px; font-size: .7rem; letter-spacing: .05em; } .pshow__go { right: 16px; bottom: 18px; width: 42px; height: 42px; } }

/* Pricing card opens the enquiry form */
.x-fact--price { cursor: pointer; }
.x-fact__link { color: inherit; }
.x-fact__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.x-fact__link i { display: inline-block; margin-left: 4px; color: var(--red-soft); transition: transform .3s var(--ease); }
.x-fact--price:hover .x-fact__link i, .x-fact__link:focus-visible i { transform: translateX(6px); }
.x-fact__link:focus-visible { outline: none; }
.x-fact--price:has(.x-fact__link:focus-visible) { outline: 2px solid var(--red-soft); outline-offset: 3px; }
/* Plans: Basic and Premium subscription cards with a market comparison */
@property --plan-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.x-plans { position: relative; overflow: hidden; background: var(--paper); color: var(--text-dark); }
.x-plans::before { content: ""; position: absolute; width: 640px; height: 640px; right: -220px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 29, 53, .16), transparent 68%); animation: plan-glow 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes plan-glow { to { transform: translate(-80px, 90px) scale(1.15); } }
.x-plans .section-kicker { color: var(--red-deep); }
.x-plans__head { position: relative; max-width: 760px; margin-bottom: 44px; }
.x-plans__lead { margin: 16px 0 26px; color: var(--text-dark-dim); font-size: 1.0625rem; line-height: 1.65; }

.x-bill { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: #fff; border: 1px solid var(--line-dark); }
.x-bill__thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--ink); transition: transform .45s var(--ease), width .45s var(--ease); }
.x-plans[data-billing="yearly"] .x-bill__thumb { transform: translateX(100%); }
.x-bill__btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; border: 0; border-radius: 999px; background: none; color: var(--text-dark); font-family: var(--font-body); font-size: .9375rem; font-weight: 600; transition: color .35s var(--ease); }
.x-bill__btn.is-on { color: #fff; }
.x-bill__btn em { padding: 3px 9px; border-radius: 999px; background: var(--red); color: #fff; font-size: .6875rem; font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.x-bill__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.x-plans__grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.x-plan { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 38px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line-dark); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.x-plan:hover { transform: translateY(-8px); box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .5); }
.x-plan__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 16px; background: var(--paper); color: var(--red); font-size: 1.4rem; transition: transform .45s var(--ease); }
.x-plan:hover .x-plan__icon { transform: rotate(-10deg) scale(1.1); }
.x-plan h3 { margin: 0 0 6px; font-family: var(--font-head); font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; }
.x-plan__top p { margin: 0; color: var(--text-dark-dim); line-height: 1.55; }
.x-plan__price { margin: 24px 0; padding: 20px 0; border-block: 1px dashed var(--line-dark); }
.x-plan__price strong { display: block; font-family: var(--font-head); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -.03em; }
.x-plan__billed { position: relative; display: block; height: 1.5em; margin-top: 6px; overflow: hidden; color: var(--text-dark-dim); font-size: .9375rem; }
.x-plan__billed span { position: absolute; inset: 0; transition: transform .45s var(--ease), opacity .35s; }
.x-plans[data-billing="monthly"] [data-when="yearly"], .x-plans[data-billing="yearly"] [data-when="monthly"] { opacity: 0; transform: translateY(-100%); }
.x-plans[data-billing="monthly"] [data-when="monthly"], .x-plans[data-billing="yearly"] [data-when="yearly"] { opacity: 1; transform: none; }
.x-plans[data-billing="yearly"] [data-when="yearly"] { color: var(--red-deep); }

.x-plan__list { flex: 1; display: grid; gap: 13px; margin: 0 0 28px; padding: 0; list-style: none; }
.x-plan__list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; }
.x-plan__list i { flex: 0 0 22px; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: rgba(242, 29, 53, .12); color: var(--red); font-size: .95rem; }
.js .x-plan.reveal .x-plan__list li { opacity: 0; transform: translateX(-14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .x-plan.reveal.visible .x-plan__list li { opacity: 1; transform: none; }
.x-plan__list li:nth-child(1) { transition-delay: .25s; } .x-plan__list li:nth-child(2) { transition-delay: .32s; } .x-plan__list li:nth-child(3) { transition-delay: .39s; } .x-plan__list li:nth-child(4) { transition-delay: .46s; }
.x-plan__list li:nth-child(5) { transition-delay: .53s; } .x-plan__list li:nth-child(6) { transition-delay: .6s; } .x-plan__list li:nth-child(7) { transition-delay: .67s; } .x-plan__list li:nth-child(n+8) { transition-delay: .74s; }
.x-plan__all { font-weight: 600; }
.x-plan__cta { align-self: stretch; padding: 14px 24px; text-align: center; }
.x-plan__ghost { border: 1.5px solid var(--ink); color: var(--ink); background: none; }
.x-plan__ghost:hover { background: var(--ink); color: #fff; transform: translateY(-3px); }
.x-plan__cta:hover i { transform: translateX(4px); }

.x-plan--pro { color: #fff; border: 2px solid transparent; background: linear-gradient(160deg, #1a1a1d, #070707) padding-box, conic-gradient(from var(--plan-angle), var(--red), #ffb3bb, var(--red-deep), var(--red)) border-box; box-shadow: 0 40px 70px -36px rgba(242, 29, 53, .6); animation: plan-spin 5s linear infinite; }
@keyframes plan-spin { to { --plan-angle: 360deg; } }
.x-plan--pro .x-plan__icon { background: var(--red); color: #fff; }
.x-plan--pro .x-plan__top p, .x-plan--pro .x-plan__billed { color: #c9c9ce; }
.x-plan--pro .x-plan__price { border-color: rgba(255, 255, 255, .18); }
.x-plan--pro .x-plan__list i { background: var(--red); color: #fff; }
.x-plans[data-billing="yearly"] .x-plan--pro [data-when="yearly"] { color: var(--red-soft); }
.x-plan__badge { position: absolute; top: 22px; right: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; overflow: hidden; border-radius: 999px; background: var(--red); color: #fff; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.x-plan__badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); animation: plan-shine 3.4s ease-in-out infinite; }
@keyframes plan-shine { 55%, 100% { transform: translateX(120%); } }
.x-plan--pro .x-plan__cta { box-shadow: var(--shadow-red); }

.x-compare { position: relative; margin-top: clamp(48px, 6vw, 80px); }
.x-compare__head h3 { margin: 0 0 6px; font-family: var(--font-head); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; letter-spacing: -.03em; }
.x-compare__head p { margin: 0 0 20px; color: var(--text-dark-dim); }
.x-compare__scroll { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line-dark); background: #fff; }
.x-compare__scroll:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.x-compare__table { width: 100%; min-width: 720px; border-collapse: collapse; }
.x-compare__table th, .x-compare__table td { padding: 16px 20px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line-dark); font-size: .975rem; }
.x-compare__table thead th { background: var(--ink); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; }
.x-compare__table thead th.is-pro { background: var(--red); }
.x-compare__table tbody th { font-weight: 600; }
.x-compare__table tbody th i { margin-right: 12px; color: var(--red); }
.x-compare__table td.is-pro { background: rgba(242, 29, 53, .06); font-weight: 600; }
.x-compare__table td.is-pro i { margin-right: 8px; color: var(--red); }
.x-compare__table td.is-market { color: var(--text-dark-dim); font-style: italic; }
.x-compare__table tbody tr:last-child > * { border-bottom: 0; }
.x-compare__row { transition: background .25s; }
.x-compare__row:hover { background: rgba(0, 0, 0, .03); }
.js .x-compare.reveal .x-compare__row { opacity: 0; transform: translateX(-18px); transition: opacity .55s var(--ease), transform .55s var(--ease), background .25s; }
.js .x-compare.reveal.visible .x-compare__row { opacity: 1; transform: none; }
.x-compare__row:nth-child(1) { transition-delay: .15s; } .x-compare__row:nth-child(2) { transition-delay: .23s; } .x-compare__row:nth-child(3) { transition-delay: .31s; } .x-compare__row:nth-child(4) { transition-delay: .39s; }
.x-compare__row:nth-child(5) { transition-delay: .47s; } .x-compare__row:nth-child(6) { transition-delay: .55s; } .x-compare__row:nth-child(7) { transition-delay: .63s; }
.x-compare__note { margin: 16px 0 0; color: var(--text-dark-dim); font-size: .875rem; line-height: 1.6; }
.x-compare__note a { color: var(--red-deep); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 820px) {
  .x-plans__grid { grid-template-columns: 1fr; }
  .x-plan__badge { top: 18px; right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .x-plans::before, .x-plan--pro, .x-plan__badge::after { animation: none; }
  .x-plan, .x-bill__thumb, .x-plan__billed span { transition: none; }
}

/* Online and offline modes for kiosks */
.x-modes { background: #fff; color: var(--text-dark); }
.x-modes .section-kicker { color: var(--red-deep); }
.x-modes__head { max-width: 760px; margin-bottom: 44px; }
.x-modes__lead { margin: 16px 0 26px; color: var(--text-dark-dim); font-size: 1.0625rem; line-height: 1.65; }
.x-modes[data-mode="offline"] .x-bill__thumb { transform: translateX(100%); }
.x-modes .x-bill { background: var(--paper); }
.x-modes .x-bill__btn i { font-size: 1.05rem; }
.x-modes__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }

.x-modes__device { display: grid; justify-items: center; }
.x-modes__screen { position: relative; display: grid; justify-items: center; align-content: center; gap: 14px; width: min(100%, 400px); aspect-ratio: 4 / 4.4; padding: 28px; overflow: hidden; border: 10px solid #1d1d20; border-radius: 28px; background: radial-gradient(circle at 50% 30%, #26262b, #0b0b0d 70%); color: #fff; text-align: center; box-shadow: 0 40px 70px -36px rgba(0, 0, 0, .7); }
.x-modes__stand { width: 120px; height: 46px; background: linear-gradient(#1d1d20, #0b0b0d); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.x-modes__status { position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: .8125rem; font-weight: 600; }
.x-modes__dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: mode-dot 1.8s infinite; }
@keyframes mode-dot { 70%, 100% { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); } }
.x-modes[data-mode="offline"] .x-modes__dot { background: var(--red); animation: none; }
.x-modes__signal { position: relative; display: grid; place-items: center; width: 110px; height: 110px; margin-top: 18px; font-size: 3rem; color: #fff; }
.x-modes__signal b { position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, .5); border-radius: 50%; opacity: 0; animation: mode-ring 2.4s ease-out infinite; }
.x-modes__signal b:nth-of-type(2) { animation-delay: .8s; }
.x-modes__signal b:nth-of-type(3) { animation-delay: 1.6s; }
@keyframes mode-ring { 0% { transform: scale(.45); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.x-modes[data-mode="offline"] .x-modes__signal { color: var(--red-soft); animation: mode-shake 3s ease-in-out infinite; }
.x-modes[data-mode="offline"] .x-modes__signal b { border-color: var(--red); animation: none; opacity: .35; transform: scale(1); border-style: dashed; }
.x-modes[data-mode="offline"] .x-modes__signal b:nth-of-type(n+2) { display: none; }
@keyframes mode-shake { 0%, 80%, 100% { transform: none; } 84% { transform: translateX(-5px); } 88% { transform: translateX(5px); } 92% { transform: translateX(-3px); } }
.x-modes__line { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.x-modes__sub { color: #b4b4b8; font-size: .9375rem; }
.x-modes__queue { display: flex; gap: 8px; }
.x-modes__queue i { width: 34px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .14); }
.x-modes[data-mode="online"] .x-modes__queue i { background: #3ddc84; animation: mode-sent 2.4s ease-in-out infinite; }
.x-modes[data-mode="offline"] .x-modes__queue i { animation: mode-saved 4s ease-in-out infinite; }
.x-modes__queue i:nth-child(2) { animation-delay: .25s !important; } .x-modes__queue i:nth-child(3) { animation-delay: .5s !important; } .x-modes__queue i:nth-child(4) { animation-delay: .75s !important; }
@keyframes mode-sent { 0%, 100% { opacity: .35; transform: scaleX(.6); } 40% { opacity: 1; transform: none; } }
@keyframes mode-saved { 0%, 10% { background: rgba(255, 255, 255, .14); } 35%, 85% { background: var(--red); } 100% { background: rgba(255, 255, 255, .14); } }
.x-modes[data-mode="online"] [data-when="offline"], .x-modes[data-mode="offline"] [data-when="online"] { display: none; }
.x-modes [data-when] { animation: mode-in .5s var(--ease); }
@keyframes mode-in { from { opacity: 0; transform: translateY(8px); } }

.x-modes__panels { display: grid; }
.x-modes__panel { grid-area: 1 / 1; display: grid; gap: 14px; align-content: center; opacity: 0; visibility: hidden; transform: translateX(26px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s; }
.x-modes[data-mode="online"] .x-modes__panel[data-panel="online"], .x-modes[data-mode="offline"] .x-modes__panel[data-panel="offline"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.x-modes__panel h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-family: var(--font-head); font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; }
.x-modes__panel h3 i { color: var(--red); }
.x-modes__point { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--line-dark); border-radius: var(--radius); background: var(--paper); transition: transform .35s var(--ease), border-color .35s; }
.x-modes__point:hover { transform: translateX(8px); border-color: var(--red); }
.x-modes__point > span { flex: 0 0 46px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--ink); color: var(--red-soft); font-size: 1.25rem; }
.x-modes__point strong { display: block; margin-bottom: 2px; font-family: var(--font-head); font-weight: 600; }
.x-modes__point p { margin: 0; color: var(--text-dark-dim); line-height: 1.55; }
.x-modes__note { margin: 28px 0 0; color: var(--text-dark-dim); font-size: .875rem; }

@media (max-width: 860px) { .x-modes__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .x-modes__dot, .x-modes__signal, .x-modes__signal b, .x-modes__queue i, .x-modes [data-when] { animation: none !important; }
  .x-modes__panel { transition: none; }
}

/* Light sections: glass cards with soft grey borders */
.x-list .services { position: relative; overflow: hidden; }
.x-list .services::before, .x-list .services::after { content: ""; position: absolute; z-index: 0; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; }
.x-list .services::before { left: -180px; top: 8%; background: radial-gradient(circle, rgba(242, 29, 53, .16), transparent 68%); }
.x-list .services::after { right: -160px; bottom: -12%; background: radial-gradient(circle, rgba(120, 120, 130, .22), transparent 68%); }
.x-list .services > .container-wide { position: relative; z-index: 1; }
.x-list .service-card {
  border: 1px solid #d6d6da; color: var(--text-dark);
  background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .34));
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 20px 44px -30px rgba(0, 0, 0, .3);
}
.x-list .service-card h3 { color: var(--text-dark); }
.x-list .service-card p { color: var(--text-dark-dim); }
.x-list .service-card .service-icon { background: rgba(242, 29, 53, .08); border-color: rgba(242, 29, 53, .25); }
.x-list .service-card:hover { border-color: rgba(242, 29, 53, .5); box-shadow: inset 0 1px 0 #fff, 0 28px 54px -26px rgba(242, 29, 53, .4); }

/* Contact: friendly info cards */
.ct-head { margin-bottom: 26px; }
.ct-title { margin: 6px 0 12px; font-family: var(--font-head); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 600; line-height: 1.08; letter-spacing: -.04em; }
.ct-head p { margin: 0; color: var(--text-dark-dim); line-height: 1.6; }
.ct-list { display: grid; gap: 12px; }
.ct-card { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid #d6d6da; border-radius: 18px; color: var(--text-dark); background: linear-gradient(145deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .4)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 #fff, 0 16px 34px -26px rgba(0, 0, 0, .35); transition: transform .4s var(--ease), border-color .3s, box-shadow .4s; }
.ct-card:hover { transform: translateY(-4px); border-color: rgba(242, 29, 53, .5); box-shadow: inset 0 1px 0 #fff, 0 24px 44px -26px rgba(242, 29, 53, .4); color: var(--text-dark); }
.ct-card__icon { flex: 0 0 48px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(242, 29, 53, .1); color: var(--red); font-size: 1.25rem; transition: transform .4s var(--ease), background .3s, color .3s; }
.ct-card:hover .ct-card__icon { background: var(--red); color: #fff; transform: rotate(-8deg) scale(1.08); }
.ct-card__text { flex: 1; display: grid; gap: 1px; min-width: 0; }
.ct-card__text small { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dark-dim); }
.ct-card__text strong { font-family: var(--font-head); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ct-card__text em { font-size: .875rem; font-style: normal; color: var(--red-deep); }
.ct-card__go { color: var(--text-dark-dim); transition: transform .35s var(--ease), color .3s; }
.ct-card:hover .ct-card__go { color: var(--red); transform: translate(4px, -4px); }
a.ct-card:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.ct-follow { display: grid; gap: 4px; margin-top: 26px; }
.ct-follow > span { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dark-dim); }
.ct-quote { position: relative; margin: 26px 0 0; padding: 28px; overflow: hidden; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(150deg, #1d1d20, #070707); box-shadow: 0 30px 56px -34px rgba(0, 0, 0, .7); }
.ct-quote::before { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; bottom: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 29, 53, .5), transparent 68%); }
.ct-quote > * { position: relative; }
.ct-quote__mark { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 14px; background: var(--red); font-size: 1.3rem; animation: ct-bob 3.2s ease-in-out infinite; }
@keyframes ct-bob { 50% { transform: translateY(-5px) rotate(-6deg); } }
.ct-quote blockquote { margin: 0 0 14px; font-family: var(--font-head); font-size: 1.1875rem; font-weight: 500; line-height: 1.4; letter-spacing: -.02em; }
.ct-quote figcaption { color: #b4b4b8; font-size: .875rem; }
@media (prefers-reduced-motion: reduce) { .ct-quote__mark { animation: none; } .ct-card, .ct-card__icon { transition: none; } }




/* Contact page v2: aligned grid of cards, then an even two-column split */
.ct-intro { max-width: 720px; margin: 0 auto clamp(32px, 5vw, 52px); text-align: center; }
.ct-intro .ct-title { margin: 8px 0 14px; font-size: clamp(2rem, 4.4vw, 3.4rem); }
.ct-intro p { margin: 0 auto; max-width: 560px; color: var(--text-dark-dim); font-size: 1.0625rem; line-height: 1.65; }
.ct-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.ct-grid .ct-card { flex-direction: column; align-items: flex-start; gap: 18px; height: 100%; padding: 24px; }
.ct-grid .ct-card__text { gap: 4px; width: 100%; }
.ct-grid .ct-card__text strong { font-size: 1.0625rem; }
.ct-grid .ct-card__go { position: absolute; top: 22px; right: 22px; }
.ct-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.ct-cta { position: relative; display: flex; align-items: flex-end; min-height: 440px; overflow: hidden; border-radius: var(--radius-lg); color: #fff; background: var(--ink); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .6); }
.ct-cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .55; transition: transform 1.2s var(--ease); }
.ct-cta:hover .ct-cta__img { transform: scale(1.05); }
.ct-cta__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .92) 8%, rgba(0, 0, 0, .35) 60%, rgba(242, 29, 53, .18)); }
.ct-cta__body { position: relative; width: 100%; padding: clamp(24px, 3.4vw, 44px); }
.ct-cta .section-kicker { color: var(--red-soft); }
.ct-cta h2 { margin: 8px 0 22px; font-family: var(--font-head); font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 600; line-height: 1.08; letter-spacing: -.04em; }
.ct-steps { display: grid; gap: 10px; margin: 0 0 26px; padding: 0; list-style: none; }
.ct-steps li { display: flex; align-items: center; gap: 14px; color: #e4e4e8; }
.ct-steps span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--red); font-size: .8125rem; font-weight: 600; }
.ct-side { display: grid; grid-template-rows: 1fr auto; gap: 20px; }
.ct-side .ct-quote { display: flex; flex-direction: column; justify-content: flex-end; margin: 0; }
.ct-follow { margin: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 20px; padding: 22px 24px; border: 1px solid #d6d6da; border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .4)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 #fff, 0 16px 34px -26px rgba(0, 0, 0, .35); }
.ct-follow > div:first-child { display: grid; gap: 2px; }
.ct-follow strong { font-family: var(--font-head); font-weight: 600; }
.ct-follow small { color: var(--text-dark-dim); font-size: .875rem; letter-spacing: 0; text-transform: none; font-weight: 400; }
.ct-follow .socials { margin-top: 0; }
@media (max-width: 1199px) { .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) { .ct-split { grid-template-columns: 1fr; } .ct-cta { min-height: 400px; } }
@media (max-width: 575px) { .ct-grid { grid-template-columns: 1fr; } .ct-follow { padding: 20px; } }
.ct-follow { flex-direction: column; align-items: flex-start; justify-content: center; }
.ct-follow .socials { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
.ct-follow .socials { display: flex; }

/* Liquid-glass cards on light sections; the icon keeps its normal colour on hover */
.x-list .service-card {
  border: 1px solid rgba(205, 205, 211, .75);
  background: linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .16) 55%, rgba(255, 255, 255, .4));
  -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .5), inset 0 0 22px rgba(255, 255, 255, .35), 0 22px 44px -28px rgba(0, 0, 0, .28);
}
.x-list .service-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 38%); opacity: .7; }
.x-list .service-card > * { position: relative; z-index: 1; }
.x-list .service-card .service-icon { background: rgba(242, 29, 53, .1); color: var(--red); border-color: rgba(242, 29, 53, .28); }
.x-list .service-card:hover .service-icon { background: rgba(242, 29, 53, .14); color: var(--red); border-color: rgba(242, 29, 53, .45); transform: rotate(-6deg) scale(1.06); }
.x-list .service-card:hover { box-shadow: inset 0 1px 1px #fff, inset 0 0 26px rgba(255, 255, 255, .45), 0 28px 54px -26px rgba(242, 29, 53, .4); }

/* Android & iOS app showcase */
.x-app { position: relative; overflow: hidden; color: #fff; background: var(--ink); }
.x-app__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.x-app__lead { margin: 16px 0 22px; max-width: 540px; color: var(--text-dim); font-size: 1.0625rem; line-height: 1.65; }
.x-app__platforms { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.x-app__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-weight: 600; font-size: .875rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .04); }
.x-app__chip i { color: var(--red); font-size: 1.05rem; }
.x-app__points { display: grid; gap: 16px; margin: 0 0 30px; padding: 0; list-style: none; }
.x-app__points li { display: flex; gap: 14px; align-items: flex-start; }
.x-app__points li > span { flex: none; display: grid; place-items: center; width: 42px; height: 42px; color: var(--red); font-size: 1.1rem; border: 1px solid rgba(242, 29, 53, .35); border-radius: 12px; background: rgba(242, 29, 53, .1); }
.x-app__points strong { display: block; margin-bottom: 2px; font-family: var(--font-head); font-weight: 600; }
.x-app__points p { margin: 0; color: var(--text-dim); font-size: .9375rem; line-height: 1.55; }

.x-app__stage { position: relative; display: flex; justify-content: center; align-items: center; min-height: 520px; }
.x-app__glow { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(242, 29, 53, .38), transparent 66%); animation: xBreathe 6s ease-in-out infinite; }
.x-app__phone { position: relative; width: 230px; height: 470px; padding: 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 38px; background: linear-gradient(160deg, #26262b, #0e0e11); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 2px #050506; }
.x-app__phone--android { z-index: 2; margin-right: -40px; transform: rotate(-6deg); animation: xAppFloatA 6s ease-in-out infinite; }
.x-app__phone--ios { margin-top: 70px; border-radius: 44px; transform: rotate(5deg); animation: xAppFloatB 6s ease-in-out infinite; }
.x-app__cam { position: absolute; top: 22px; left: 50%; z-index: 2; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #000; box-shadow: 0 0 0 2px #1c1c20; }
.x-app__island { position: absolute; top: 20px; left: 50%; z-index: 2; width: 76px; height: 20px; margin-left: -38px; border-radius: 999px; background: #000; }
.x-app__screen { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 42px 14px 16px; overflow: hidden; border-radius: 28px; background: #f5f4f2; color: #16161a; }
.x-app__phone--ios .x-app__screen { border-radius: 34px; }
.x-app__bar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; border-bottom: 2px solid var(--red); }
.x-app__bar i { color: var(--red); font-size: .95rem; }
.x-app__row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.x-app__field { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid #dcdce0; border-radius: 10px; background: #fff; }
.x-app__field small { display: flex; align-items: center; gap: 4px; color: #6b6b72; font-size: .5625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.x-app__field--lock { border-color: rgba(242, 29, 53, .45); }
.x-app__field--lock small i { color: var(--red); }
.x-app__type { display: block; width: var(--w); height: 8px; border-radius: 4px; background: #2a2a30; transform-origin: left; animation: xAppType 5s var(--d, 0s) ease-in-out infinite both; }
.x-app__mask { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; }
.x-app__med { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #dcdce0; }
.x-app__med i { color: var(--red); font-size: .8rem; }
.x-app__med .x-app__type { flex: none; }
.x-app__med em { margin-left: auto; font-style: normal; font-size: .625rem; font-weight: 700; color: var(--red-deep); }
.x-app__btn { margin-top: auto; padding: 10px; text-align: center; color: #fff; font-size: .75rem; font-weight: 700; border-radius: 999px; background: var(--red); animation: xAppPress 5s ease-in-out infinite; }
.x-app__doc { display: grid; gap: 9px; padding: 14px 12px; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .4); }
.x-app__docline { display: block; width: var(--w); height: 7px; border-radius: 4px; background: #d9d9de; }
.x-app__rx { color: var(--red); font-family: var(--font-head); font-size: 1.25rem; font-weight: 800; font-style: italic; }
.x-app__toast { position: absolute; left: 12px; right: 12px; bottom: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; color: #fff; font-size: .75rem; font-weight: 700; border-radius: 14px; background: #1f9d55; box-shadow: 0 14px 28px -12px rgba(31, 157, 85, .8); animation: xAppToast 5s ease-in-out infinite; }

.x-stores { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; margin-bottom: 22px; }
.x-store {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: #fff; text-align: left; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 16px; background: linear-gradient(160deg, #1c1c20, #0d0d0f);
  box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .9); transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.x-store i { flex: none; font-size: 1.75rem; line-height: 1; }
.x-store span { display: grid; line-height: 1.15; }
.x-store small { color: var(--text-dim); font-size: .6875rem; letter-spacing: .04em; }
.x-store strong { font-family: var(--font-head); font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }
.x-store:hover, .x-store:focus-visible { transform: translateY(-3px); border-color: var(--red); box-shadow: 0 22px 40px -22px rgba(242, 29, 53, .6); }

.x-dl { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: clamp(24px, 4vw, 36px); overflow-y: auto; color: #fff; border: 1px solid rgba(242, 29, 53, .35); border-radius: 28px; background: #0d0d0f; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9); }
.x-dl[open] { animation: mode-in .35s var(--ease); }
.x-dl::backdrop { background: rgba(4, 4, 5, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.x-dl__close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 38px; height: 38px; color: #fff; border: 1px solid var(--line); border-radius: 50%; background: transparent; transition: background .2s, border-color .2s; }
.x-dl__close:hover { border-color: var(--red); background: rgba(242, 29, 53, .15); }
.x-dl__badge { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; font-size: 1.6rem; border-radius: 16px; background: var(--red); }
.x-dl__badge--ok { background: #1f9d55; }
.x-dl__title { margin: 0 0 8px; padding-right: 40px; font-family: var(--font-head); font-size: clamp(1.4rem, 3vw, 1.75rem); font-weight: 600; letter-spacing: -.03em; }
.x-dl__text { margin: 0 0 22px; color: var(--text-dim); line-height: 1.6; }
.x-dl__note { display: flex; gap: 8px; align-items: center; margin: 14px 0 0; color: var(--text-dim); font-size: .8125rem; }
.x-dl__note i { color: var(--red); }
.x-dl__qr { width: min(240px, 100%); margin: 0 auto 18px; padding: 14px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 6px rgba(242, 29, 53, .18); }
.x-dl__qr svg { display: block; width: 100%; height: auto; }
.x-dl__link { display: flex; justify-content: center; gap: 6px; color: var(--text-dim); font-size: .875rem; }
.x-dl__link:hover { color: #fff; }

@keyframes xAppFloatA { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-14px); } }
@keyframes xAppFloatB { 0%, 100% { transform: rotate(5deg) translateY(-10px); } 50% { transform: rotate(5deg) translateY(6px); } }
@keyframes xAppType { 0%, 8% { transform: scaleX(0); } 30%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes xAppPress { 0%, 60%, 72%, 100% { transform: none; } 66% { transform: scale(.94); box-shadow: 0 0 0 6px rgba(242, 29, 53, .25); } }
@keyframes xAppToast { 0%, 68% { opacity: 0; transform: translateY(16px); } 76%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(16px); } }

@media (max-width: 991px) {
  .x-app__grid { grid-template-columns: 1fr; }
  .x-app__stage { min-height: 460px; }
}
@media (max-width: 575px) {
  .x-stores { grid-template-columns: 1fr 1fr; }
  .x-store { padding: 10px 12px; gap: 8px; }
  .x-store i { font-size: 1.4rem; }
  .x-store strong { font-size: .9375rem; }
  .x-app__phone { width: 170px; height: 360px; }
  .x-app__phone--android { margin-right: -30px; }
  .x-app__stage { min-height: 400px; }
  .x-app__screen { padding: 36px 10px 12px; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .x-app__glow, .x-app__phone, .x-app__type, .x-app__btn, .x-app__toast { animation: none; }
  .x-app__toast { opacity: 1; }
}

/* Industry feature cards: even 3-column grid */
.x-page--industry .x-features__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; border-top: 0; }
.x-page--industry .x-card, .x-page--industry .x-card:nth-child(n) {
  display: flex; flex-direction: column; min-height: 0; padding: 0 0 24px; color: var(--text-dark);
  border: 1px solid var(--line-dark); border-radius: var(--radius-lg); background: #fff;
  box-shadow: 0 24px 50px -38px rgba(0, 0, 0, .45);
}
.x-page--industry .x-card:hover { padding-left: 0; background: #fff; border-color: rgba(242, 29, 53, .4); box-shadow: 0 30px 60px -32px rgba(242, 29, 53, .45); }
.x-page--industry .x-card__media { height: 190px; border-radius: 0; }
.x-page--industry .x-card__icon { display: grid; margin: -28px 0 0 24px; }
.x-page--industry .x-card__num { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 4px 10px; color: #fff; font-size: .75rem; border-radius: 999px; background: rgba(13, 13, 15, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.x-page--industry .x-card > h3, .x-page--industry .x-card > p { margin-inline: 24px; }
.x-page--industry .x-card h3 { margin-top: 18px; margin-bottom: 8px; font-size: 1.1875rem; line-height: 1.3; }
.x-page--industry .x-card p { margin-bottom: 22px; color: var(--text-dark-dim); font-size: .9375rem; }
.x-page--industry .x-card .x-card__cta { grid-column: auto; margin: auto 24px 0; }
@media (max-width: 991px) { .x-page--industry .x-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .x-page--industry .x-features__grid { grid-template-columns: 1fr; } .x-page--industry .x-card__media { height: 180px; } }