/* ===============================
   RestioX Trusted Logos - FIXED
================================ */

/* =============================================
   TRUSTED LOGOS — Dual-Row Infinite Marquee
============================================= */
.trusted-logos-section {
    padding: 70px 0 90px;
    background: linear-gradient(160deg, #faf8ff 0%, #f3eeff 50%, #f8f9ff 100%);
    position: relative;
    overflow: hidden;
}
.trusted-logos-section::before,
.trusted-logos-section::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124,58,237,0.15), transparent);
}
.trusted-logos-section::before { top: 0; }
.trusted-logos-section::after  { bottom: 0; }
.tl-header {
    text-align: center;
    margin-bottom: 44px;
    /* This section is full-bleed (no .container), so the heading and sub-copy
       had a 0px side gutter and touched both screen edges on a phone. The
       padding is a no-op on desktop — the copy is centred and far narrower
       than the line box — but guarantees a gutter at every width. */
    padding-inline: 16px;
}
.tl-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(124,58,237,0.08);
    border: 1px solid rgba(124,58,237,0.18);
    color: #7c3aed;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 14px;
}
.tl-badge i { font-size: 14px; }
.tl-header h3 {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
    line-height: 1.25;
}
.tl-header h3 span {
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.tl-header p {
    color: #5f6b7a;
    font-size: 15px;
    margin: 0;
}
.tl-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 44px;
    flex-wrap: wrap;
}
.tl-stat { text-align: center; }
.tl-stat strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
}
.tl-stat span { font-size: 13px; color: #5f6b7a; }
.tl-marquee-wrap {
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}
.tl-marquee-wrap:last-of-type { margin-bottom: 0; }
.tl-marquee-wrap::before,
.tl-marquee-wrap::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 140px;
    z-index: 2;
    pointer-events: none;
}
.tl-marquee-wrap::before {
    left: 0;
    background: linear-gradient(90deg, #f3eeff 0%, transparent 100%);
}
.tl-marquee-wrap::after {
    right: 0;
    background: linear-gradient(270deg, #f3eeff 0%, transparent 100%);
}
.tl-track {
    display: flex;
    width: max-content;
    gap: 16px;
    padding: 8px 0;
}
@keyframes tl-scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes tl-scroll-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
.tl-track.row-left  { animation: tl-scroll-left  28s linear infinite; }
.tl-track.row-right { animation: tl-scroll-right 32s linear infinite; }
.tl-marquee-wrap:hover .tl-track { animation-play-state: paused; }
.tl-logo-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 72px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(124,58,237,0.10);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(124,58,237,0.06);
    flex-shrink: 0;
    transition: all 0.32s cubic-bezier(0.34,1.56,0.64,1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.tl-logo-card::before {
    content: "";
    position: absolute;
    top: 0; left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
}
.tl-logo-card:hover::before { left: 150%; }
.tl-logo-card:hover {
    background: #ffffff;
    border-color: rgba(124,58,237,0.25);
    box-shadow: 0 12px 36px rgba(124,58,237,0.15);
    transform: translateY(-4px) scale(1.04);
}
.tl-logo-card img {
    max-width: 110px;
    max-height: 44px;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.55);
    transition: filter 0.32s ease, transform 0.32s ease;
}
.tl-logo-card:hover img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.06);
}
@media (max-width: 768px) {
    .trusted-logos-section { padding: 50px 0 65px; }
    .tl-header h3 { font-size: 22px; }
    .tl-stats { gap: 24px; }
    .tl-stat strong { font-size: 18px; }
    .tl-logo-card { width: 130px; height: 62px; }
    .tl-logo-card img { max-width: 88px; max-height: 36px; }
    .tl-marquee-wrap::before,
    .tl-marquee-wrap::after { width: 60px; }
}
@media (max-width: 480px) {
    .tl-header h3 { font-size: 18px; }
    .tl-badge { font-size: 11px; }
    .tl-stats { gap: 16px; }
}


.restiox-control-section {
    background: linear-gradient(135deg,#f5f3ff,#ede9fe,#f8f9fc);
    position: relative;
}

/* Glass Card */
.glass-card {
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(15px);
    border-radius: 25px;
    padding: 60px;
    box-shadow: 0 30px 60px rgba(76,42,173,0.15);
    transition: 0.4s ease;
}

/* Floating Shapes */
.floating-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg,#6c4df6,#4b2aad);
    opacity: 0.15;
    animation: float 10s infinite alternate ease-in-out;
}

.shape1 { width:200px;height:200px;top:10%;left:5%; }
.shape2 { width:300px;height:300px;bottom:10%;right:10%; }
.shape3 { width:150px;height:150px;top:50%;right:20%; }

@keyframes float {
    from { transform: translateY(0px); }
    to { transform: translateY(40px); }
}

/* Counters */
.counter {
    font-size: 48px;
    font-weight: 700;
    color: #4b2aad;
}

/* Slide Animations */
.slide-left img { animation: slideLeft .8s ease; }
@keyframes slideLeft { from{transform:translateX(-40px);opacity:0;} to{transform:translateX(0);opacity:1;} }

/* Tab Buttons */
.control-nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 0;
}

.control-nav-pills .nav-item {
    padding: 0;
}

.control-nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 50px;
    padding: 8px 16px;
    background: rgba(255,255,255,.85);
    border: 1.5px solid rgba(88,28,135,.18);
    color: #3b1065;
    font-weight: 600;
    font-size: 13px;
    transition: all .3s ease;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(88,28,135,.05);
}

.control-nav-pills .nav-link i {
    font-size: 14px;
    opacity: 0.85;
}

.control-nav-pills .nav-link.active,
.control-nav-pills .nav-link:hover {
    background: linear-gradient(135deg, #581c87, #7e22ce);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(88,28,135,.28);
    transform: translateY(-2px);
}

.control-nav-pills .nav-link.active i,
.control-nav-pills .nav-link:hover i {
    opacity: 1;
}
/* =========================================
   BRAND DETAIL SECTION – PREMIUM VERSION
========================================= */

.brand-detail {
    padding: 100px 0;
    background: linear-gradient(160deg, #faf8ff 0%, #f3eeff 45%, #f7f9ff 100%);
    position: relative;
    overflow: hidden;
}

/* Top-right radial glow */
.brand-detail::before {
    content: "";
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(124,58,237,0.13) 0%, transparent 68%);
    top: -160px; right: -160px;
    z-index: 0; pointer-events: none;
}

/* Bottom-left counter-glow */
.brand-detail::after {
    content: "";
    position: absolute;
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(79,70,229,0.09) 0%, transparent 68%);
    bottom: -100px; left: -100px;
    z-index: 0; pointer-events: none;
}

.brand-detail .container { position: relative; z-index: 1; }

/* Section-level header (top) */
.brand-detail .section-title h2 {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .8px !important;
    text-transform: uppercase !important;
    color: #7c3aed !important;
    margin-bottom: 10px !important;
    display: inline-flex; align-items: center; gap: 8px;
}
.brand-detail .section-title p {
    font-size: 15px;
    color: #5f6b7a;
    margin-bottom: 0;
}

/* Feature headline */
.brand-detail h2 {
    font-size: 44px;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.15;
    color: #0f172a;
    letter-spacing: -0.7px;
}

/* Sub-paragraph */
.brand-detail p {
    font-size: 17px;
    color: #64748b;
    margin-bottom: 28px;
    max-width: 520px;
    line-height: 1.8;
}

/* ── Features list ── */
.brand-detail .features {
    list-style: none;
    padding: 0;
    margin: 0 0 36px 0;
}

.brand-detail .features li {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    color: #334155;
    margin-bottom: 10px;
    padding: 11px 16px;
    border-radius: 13px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(124,58,237,0.08);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(124,58,237,0.04);
    transition: all 0.28s ease;
}

.brand-detail .features i {
    font-size: 17px;
    color: #7c3aed;
    margin-right: 12px;
    flex-shrink: 0;
    transition: all 0.28s ease;
}

.brand-detail .features li:hover {
    transform: translateX(7px);
    color: #0f172a;
    background: #ffffff;
    border-color: rgba(124,58,237,0.22);
    box-shadow: 0 6px 20px rgba(124,58,237,0.11);
}

.brand-detail .features li:hover i {
    transform: scale(1.22);
    color: #6d28d9;
}

/* ── Image ── */
.brand-detail img {
    border-radius: 22px;
    box-shadow:
        0 48px 96px rgba(124,58,237,0.18),
        0 16px 40px rgba(15,23,42,0.1);
    transition: 0.5s cubic-bezier(0.34,1.56,0.64,1);
    border: 2px solid rgba(255,255,255,0.9);
    position: relative;
}

.brand-detail img:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow:
        0 70px 120px rgba(124,58,237,0.22),
        0 24px 56px rgba(15,23,42,0.12);
}

/* ============================================
   HERO SECTION — PREMIUM REDESIGN
============================================ */

/* Hero + full page background — homepage only */
body.page-home {
    background: linear-gradient(160deg, #ffffff 0%, #faf5ff 40%, #f3e8ff 75%, #ede9fe 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* Hero section itself matches body — seamless */
body.page-home .middle-hero-warp {
    background: transparent;
    overflow: hidden;
}

/* Navbar — home page only: transparent, no border line */
body.page-home #navbar.style3 {
    background: transparent;
}
body.page-home .border-bottom1::before {
    display: none;
}
body.page-home #navbar.style3.sticky {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px rgba(88,28,135,0.1);
}

body.page-home .middle-hero-warp::before {
    display: none;
}

.middle-hero-warp::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(124,58,237,0.25) 0%, transparent 70%);
    bottom: -200px;
    right: -150px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.middle-hero-content {
    position: relative;
    z-index: 2;
    margin-top: 56px;
    margin-bottom: 20px;
}

.middle-hero-content .title {
    display: inline-block;
    background: rgba(88,28,135,0.08);
    border: 1px solid rgba(88,28,135,0.2);
    color: #581c87;
    padding: 7px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}

.middle-hero-content h1,
.middle-hero-content h2 {
    color: #0f172a !important;
    font-size: 58px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 22px;
}

.hero-highlight {
    background: linear-gradient(90deg, #581c87, #7e22ce, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.middle-hero-content p {
    color: #64748b !important;
    font-size: 17px !important;
    max-width: 740px;
    margin: 0 auto 44px !important;
    line-height: 1.85 !important;
}

.middle-benner-btn {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Primary CTA */
.middle-hero-content .default-btn.home-three-main {
    background: linear-gradient(90deg, #7e22ce, #a855f7) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 15px 38px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: 0 14px 40px rgba(124,58,237,0.5) !important;
    transition: all 0.35s ease !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

.middle-hero-content .default-btn.home-three-main:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 20px 50px rgba(124,58,237,0.6) !important;
    color: #fff !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Secondary CTA */
.middle-hero-content .default-btn.style3 {
    background: rgba(255,255,255,0.55) !important;
    color: #581c87 !important;
    border: 1.5px solid rgba(88,28,135,0.3) !important;
    border-radius: 50px !important;
    padding: 15px 38px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    margin-left: 0 !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px) !important;
    text-decoration: none !important;
}

.middle-hero-content .default-btn.style3::before {
    display: none !important;
}

.middle-hero-content .default-btn.style3:hover {
    background: rgba(88,28,135,0.1) !important;
    border-color: #7e22ce !important;
    color: #3b0764 !important;
    transform: translateY(-3px) !important;
}

@media (max-width: 768px) {
    .middle-hero-content h1,
.middle-hero-content h2 { font-size: 36px !important; }
    .middle-hero-content p  { font-size: 15px !important; }
}
@media (max-width: 480px) {
    .middle-hero-content h1,
.middle-hero-content h2 { font-size: 28px !important; }
    .middle-benner-btn { flex-direction: column; align-items: center; }
}

/* ── Hero showcase layout ── */
.rx-hero-showcase { padding: 0 0 0; position: relative; }

/* ══════════════════════════════════════════
   PREMIUM FLOATING METRIC CARDS v2
══════════════════════════════════════════ */
.rx-float-card {
  position: absolute; z-index: 10; width: 182px;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.78);
  box-shadow:
    0 28px 72px rgba(15,23,42,.15),
    0 8px 24px rgba(15,23,42,.09),
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(15,23,42,.03);
  overflow: hidden; cursor: default;
  animation-fill-mode: both;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
}
.rx-float-card:hover {
  /* 3D magnetic snap — card tilts forward out of the screen plane */
  transform: translateY(-15px) scale(1.06) rotateX(-5deg) !important;
  box-shadow:
    0 60px 110px rgba(15,23,42,.24),
    0 20px 48px rgba(15,23,42,.16),
    0 0 0 1.5px rgba(255,255,255,.94),
    0 0 65px var(--fg, rgba(111,66,193,.26));
  animation-play-state: paused;
}

/* Gradient accent strip with shimmer */
.rx-fc-accent {
  height: 4px;
  background: var(--fa, linear-gradient(90deg,#6f42c1,#a855f7));
  position: relative; overflow: hidden;
}
.rx-fc-accent::after {
  content: '';
  position: absolute; top: 0; left: -60%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
  animation: rxAccentShine 2.6s ease-in-out infinite;
}
@keyframes rxAccentShine {
  0%   { left: -60%; }
  100% { left: 160%; }
}

/* Card body */
.rx-fc-body { padding: 14px 16px 17px; }

/* Premium gradient icon box */
.rx-fc-icon {
  width: 44px; height: 44px; border-radius: 14px; margin-bottom: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--fa, linear-gradient(135deg,#6f42c1,#a855f7));
  box-shadow: 0 8px 24px var(--fg, rgba(111,66,193,.38)),
              inset 0 1px 0 rgba(255,255,255,.24);
  position: relative; overflow: hidden; flex-shrink: 0;
}
.rx-fc-icon svg { position: relative; z-index: 1; display: block; }
/* shine sweep across icon */
.rx-fc-icon::after {
  content: ''; position: absolute;
  top: 0; left: -60%; height: 100%; width: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation: rxIconShine 3.5s ease-in-out infinite;
}
@keyframes rxIconShine {
  0%   { left: -60%; }
  55%, 100% { left: 130%; }
}

/* Typography */
.rx-fc-val {
  font-size: 21px; font-weight: 800; color: #0f172a; line-height: 1.1;
  font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -.4px;
}
.rx-fc-label {
  font-size: 10.5px; font-weight: 700; color: #374151; margin-top: 3px;
  letter-spacing: .04em; text-transform: uppercase;
}
.rx-fc-sub { font-size: 9.5px; color: #5f6b7a; margin-top: 2px; letter-spacing: .01em; }

/* Sparkline bars */
.rx-fc-spark { display: flex; align-items: flex-end; gap: 3px; height: 28px; margin-top: 11px; }
.rx-fc-bar {
  flex: 1; border-radius: 4px 4px 0 0;
  background: var(--fa, linear-gradient(0deg,#059669,#34d399)); opacity: .88;
  transform-origin: bottom; animation: rxBarGrow .8s var(--bd,0s) cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes rxBarGrow { from{transform:scaleY(0)} to{transform:scaleY(1)} }

/* Avatar stack */
.rx-fc-avatars { display: flex; margin-top: 11px; }
.rx-fc-av {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.96);
  margin-left: -9px; display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff; overflow: hidden;
  box-shadow: 0 2px 8px rgba(15,23,42,.2);
}
.rx-fc-av:first-child { margin-left: 0; }

/* Stars */
.rx-fc-stars { display: flex; gap: 2px; margin-top: 10px; }
.rx-fc-star {
  font-size: 14px; color: #f59e0b;
  filter: drop-shadow(0 1px 5px rgba(245,158,11,.6));
}

/* Live indicator */
.rx-fc-live { display: flex; align-items: center; gap: 7px; margin-top: 11px; }
.rx-fc-live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #ef4444;
  position: relative; flex-shrink: 0;
  animation: rxFcLivePulse 1.5s ease-in-out infinite;
}
.rx-fc-live-dot::before {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid rgba(239,68,68,.32);
  animation: rxFcLiveRing 1.5s ease-in-out infinite;
}
@keyframes rxFcLivePulse {
  0%,100%{ box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
  50%    { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
@keyframes rxFcLiveRing {
  0%  { transform: scale(1); opacity: 1; }
  100%{ transform: scale(2.4); opacity: 0; }
}
.rx-fc-live-t {
  font-size: 10px; font-weight: 800; color: #ef4444;
  letter-spacing: .1em; text-transform: uppercase;
}

/* Progress bar */
.rx-fc-progress {
  height: 6px; border-radius: 4px;
  background: rgba(203,213,225,.45); margin-top: 11px; overflow: hidden;
}
.rx-fc-progress-fill {
  height: 100%; border-radius: 4px;
  background: var(--fa, linear-gradient(90deg,#6f42c1,#a855f7));
  animation: rxFcProg 1.4s 1.2s ease both;
  position: relative; overflow: hidden;
}
.rx-fc-progress-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: rxProgShine 2.2s 2.6s ease-in-out infinite;
}
@keyframes rxFcProg    { from{width:0} to{width:var(--pw,80%)} }
@keyframes rxProgShine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* ── Card positions & animation ── */

/* ENTRY: blur-pop materialise — cards render from nothing into focus */
@keyframes rxCardPop {
  0%   { opacity:0; transform:scale(.72) translateY(16px); filter:blur(12px); }
  62%  { filter:blur(0); transform:scale(1.05) translateY(-4px); }
  100% { opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
}

/* IDLE: each card traces a unique slow orbital path — no two move the same */
@keyframes rxOrbit1 {
  0%,100%{ transform:translate(0px,  0px) }
  25%    { transform:translate(-5px,-11px) }
  50%    { transform:translate(-2px,-19px) }
  75%    { transform:translate( 4px,-11px) }
}
@keyframes rxOrbit2 {
  0%,100%{ transform:translate(0px,  0px) }
  30%    { transform:translate( 5px, 11px) }
  55%    { transform:translate( 2px, 18px) }
  80%    { transform:translate(-4px,  9px) }
}
@keyframes rxOrbit3 {
  0%,100%{ transform:translate(0px,  0px) }
  20%    { transform:translate(-6px, -8px) }
  45%    { transform:translate( 3px,-15px) }
  70%    { transform:translate( 6px, -7px) }
}
@keyframes rxOrbit4 {
  0%,100%{ transform:translate( 0px,  0px) }
  25%    { transform:translate( 5px,-11px) }
  50%    { transform:translate( 2px,-20px) }
  75%    { transform:translate(-4px,-11px) }
}
@keyframes rxOrbit5 {
  0%,100%{ transform:translate( 0px,  0px) }
  30%    { transform:translate(-5px, 11px) }
  55%    { transform:translate(-2px, 18px) }
  80%    { transform:translate( 5px,  9px) }
}
@keyframes rxOrbit6 {
  0%,100%{ transform:translate(0px,  0px) }
  20%    { transform:translate( 6px, -8px) }
  45%    { transform:translate(-3px,-15px) }
  70%    { transform:translate(-6px, -7px) }
}

.rx-fc-1 { left: 8px;  top: 8%;    animation: rxCardPop .88s .12s cubic-bezier(.16,1,.3,1) both, rxOrbit1 7.2s 1.6s ease-in-out infinite; }
.rx-fc-2 { left: 8px;  top: 39%;   animation: rxCardPop .88s .32s cubic-bezier(.16,1,.3,1) both, rxOrbit2 8.8s 2.2s ease-in-out infinite; }
.rx-fc-3 { left: 8px;  bottom: 7%; animation: rxCardPop .88s .52s cubic-bezier(.16,1,.3,1) both, rxOrbit3 6.8s 2.8s ease-in-out infinite; }
.rx-fc-4 { right: 8px; top: 8%;    animation: rxCardPop .88s .22s cubic-bezier(.16,1,.3,1) both, rxOrbit4 7.6s 1.9s ease-in-out infinite; }
.rx-fc-5 { right: 8px; top: 39%;   animation: rxCardPop .88s .42s cubic-bezier(.16,1,.3,1) both, rxOrbit5 9.2s 2.5s ease-in-out infinite; }
.rx-fc-6 { right: 8px; bottom: 7%; animation: rxCardPop .88s .62s cubic-bezier(.16,1,.3,1) both, rxOrbit6 7.4s 3.2s ease-in-out infinite; }

/* ══════════════════════════════════
   CENTER IMAGE WRAP — larger
══════════════════════════════════ */
.rx-hero-img-wrap {
  position: relative;
  padding: 20px 168px 36px;
  display: flex; align-items: center; justify-content: center;
}

/* ── Subtle dot texture ── */
.rx-hi-dots {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(111,66,193,.09) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, black 10%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, black 10%, transparent 100%);
}


/* ── Corner targeting brackets ── */
.rx-hi-corners {
  position: absolute; inset: -3px; z-index: 13;
  pointer-events: none; border-radius: 22px;
}
.rx-hic {
  position: absolute; width: 24px; height: 24px;
  border-color: rgba(139,92,246,.8); border-style: solid;
  animation: rxCornerPulse 4s ease-in-out infinite;
}
.rx-hic-tl { top:-1px;    left:-1px;  border-width:2.5px 0 0 2.5px; border-radius:8px 0 0 0; }
.rx-hic-tr { top:-1px;    right:-1px; border-width:2.5px 2.5px 0 0; border-radius:0 8px 0 0; animation-delay:1s;  }
.rx-hic-bl { bottom:-1px; left:-1px;  border-width:0 0 2.5px 2.5px; border-radius:0 0 0 8px; animation-delay:2s;  }
.rx-hic-br { bottom:-1px; right:-1px; border-width:0 2.5px 2.5px 0; border-radius:0 0 8px 0; animation-delay:3s;  }
@keyframes rxCornerPulse {
  0%,100%{ opacity:.4;  filter:drop-shadow(0 0 0px  rgba(139,92,246,0));   }
  50%    { opacity:1;   filter:drop-shadow(0 0 6px rgba(139,92,246,.72)); }
}

/* Screen — one-time cinematic entrance only, image stays perfectly static */
.rx-hi-3d {
  position: relative; z-index: 2; width: 100%;
  will-change: opacity, transform;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  animation: rxImgReveal 1.2s .08s cubic-bezier(.16,1,.3,1) both;
}
@keyframes rxImgReveal {
  0%   { opacity:0; transform:scale(.88) translateY(32px); filter:blur(16px) brightness(.8); }
  55%  { filter:blur(0) brightness(1); }
  100% { opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
}

/* Animated gradient border */
.rx-hi-border {
  padding: 2.5px; border-radius: 20px;
  background: linear-gradient(135deg,
    rgba(111,66,193,.96) 0%,
    rgba(147,51,234,.55) 28%,
    rgba(99,102,241,.46) 54%,
    rgba(236,72,153,.62) 78%,
    rgba(111,66,193,.88) 100%);
  background-size: 200% 200%;
  box-shadow:
    0 0 0 1px rgba(111,66,193,.06),
    0 72px 135px rgba(88,28,135,.42),
    0 30px 58px rgba(15,23,42,.24),
    0 0 115px rgba(111,66,193,.23);
  animation: rxBorderFlow 7s ease-in-out infinite;
}
@keyframes rxBorderFlow {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* Screen frame */
.rx-hi-screen { border-radius: 18px; overflow: hidden; background: #fff; position: relative; }
.rx-hi-screen::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 52px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.5));
  pointer-events: none;
}

/* Browser bar */
.rx-hi-bar {
  background: linear-gradient(135deg,#1e1b4b 0%,#2d1f72 55%,#312e81 100%);
  padding: 9px 14px; display: flex; align-items: center; gap: 9px; position: relative;
}
.rx-hi-bar::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(155,92,255,.65), transparent);
}
.rx-hi-dot { width: 9px; height: 9px; border-radius: 50%; }
.rx-hi-url {
  flex: 1; background: rgba(255,255,255,.1); border-radius: 7px;
  padding: 4px 14px; font-size: 11px; color: rgba(255,255,255,.72);
  font-family: monospace; letter-spacing: .2px;
}
.rx-hi-live { display: flex; align-items: center; gap: 5px; font-size: 10px; color: rgba(255,255,255,.65); font-weight: 600; }
.rx-hi-live-dot {
  width: 7px; height: 7px; background: #10b981; border-radius: 50%;
  box-shadow: 0 0 6px #10b981;
  animation: rxLivePls 1.5s ease-in-out infinite;
}
@keyframes rxLivePls { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.65)} }

/* Screenshot */
.rx-hi-screen img {
  width: 100%; display: block;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Reflection */
.rx-hi-reflection {
  position: relative; z-index: 1;
  height: 40px; margin-top: -2px; overflow: hidden;
  transform: scaleY(-1); opacity: .1; filter: blur(5px); pointer-events: none;
}
.rx-hi-reflection img { width: 100%; height: 80px; object-fit: cover; object-position: top; }

/* ── Responsive ── */
@media (max-width: 1400px) { .rx-hero-img-wrap { padding: 18px 155px 32px; } }
@media (max-width: 1200px) {
  .rx-hero-img-wrap { padding: 16px 140px 28px; }
  .rx-float-card { width: 158px !important; }
  .rx-fc-val { font-size: 19px; }
}
@media (max-width: 991px) {
  .rx-float-card { display: none; }
  .rx-hero-img-wrap { padding: 12px 20px 20px; }
}
@media (max-width: 767px) {
  .rx-hi-3d { animation: rxImgReveal 1.1s .1s cubic-bezier(.16,1,.3,1) both !important; }
  .rx-hero-img-wrap { padding: 8px 8px 14px; }
}

/* ══════════════════════════════════════════
   CTA SECTION
══════════════════════════════════════════ */

/* 70% wide card, centered on the page with vertical breathing room */
.cta-wrapper {
  width: 70%;
  margin: 0 auto;
  padding: 80px 0;
}

/* Card with lavender gradient + rounded corners */
.cta-section {
  position: relative;
  padding: 90px 60px;
  border-radius: 28px;
  background: linear-gradient(145deg, #f6f2ff 0%, #ede8ff 30%, #e8eeff 65%, #f4f2ff 100%);
  overflow: hidden;
  text-align: center;
}

/* Dot-grid texture */
.cta-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(124,58,237,0.07) 1.5px, transparent 1.5px);
  background-size: 30px 30px;
  pointer-events: none; z-index: 0;
}

/* Central radial glow */
.cta-section::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse at center, rgba(124,58,237,0.13) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}

/* Hide unused bg images */
.cta-section .bg-img { display: none; }

/* Center content */
.cta-content {
  position: relative;
  z-index: 5;
  max-width: 480px;
  margin: 0 auto;
}

.cta-content h2 {
  font-size: 42px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.18;
  letter-spacing: -0.8px;
  margin-bottom: 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.cta-content p {
  font-size: 16px;
  color: #64748b;
  line-height: 1.75;
  margin-bottom: 34px;
}

/* CTA Button */
.cta-btn {
  display: inline-block;
  background: linear-gradient(135deg, #c81e1e 0%, #e53e3e 60%, #f05252 100%);
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  padding: 16px 44px;
  border-radius: 50px;
  text-decoration: none !important;
  box-shadow: 0 16px 48px rgba(197,48,48,0.45), 0 4px 14px rgba(197,48,48,0.26), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: all 0.32s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.2px;
}
.cta-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  animation: ctaBtnShine 3s ease-in-out infinite;
}
@keyframes ctaBtnShine {
  0%      { left: -60%; }
  55%,100%{ left: 130%; }
}
.cta-btn:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 24px 60px rgba(197,48,48,0.55), 0 6px 20px rgba(197,48,48,0.3);
  color: #fff !important;
  text-decoration: none !important;
}

/* Floating notification cards */
.floating-card {
  position: absolute;
  background: rgba(255,255,255,0.94);
  border-radius: 18px;
  padding: 16px 20px;
  width: 220px;
  box-shadow: 0 20px 48px rgba(15,23,42,0.10), 0 4px 16px rgba(15,23,42,0.06), inset 0 1px 0 rgba(255,255,255,0.96);
  border: 1px solid rgba(255,255,255,0.86);
  z-index: 4;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.floating-card strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin: 9px 0 4px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.floating-card span {
  display: block;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}
.floating-card .icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.floating-card .icon svg { width: 20px; height: 20px; fill: #fff; }

.bg-orange { background: linear-gradient(135deg,#f97316,#fb923c); box-shadow: 0 6px 18px rgba(249,115,22,0.36); }
.bg-blue   { background: linear-gradient(135deg,#3b82f6,#60a5fa); box-shadow: 0 6px 18px rgba(59,130,246,0.36); }
.bg-purple { background: linear-gradient(135deg,#8b5cf6,#a78bfa); box-shadow: 0 6px 18px rgba(139,92,246,0.36); }
.bg-red    { background: linear-gradient(135deg,#ec4899,#f472b6); box-shadow: 0 6px 18px rgba(236,72,153,0.36); }

/* Card positions — inside the 70% card */
.card-1 { top: 16%; left: 3%; }
.card-2 { bottom: 16%; left: 3%; }
.card-3 { top: 16%; right: 3%; }
.card-4 { bottom: 16%; right: 3%; }

@keyframes ctaF1 { 0%,100%{transform:translateY(0)}    50%{transform:translateY(-10px)} }
@keyframes ctaF2 { 0%,100%{transform:translateY(0)}    50%{transform:translateY(10px)}  }
@keyframes ctaF3 { 0%,100%{transform:translateY(-4px)} 50%{transform:translateY(8px)}  }
@keyframes ctaF4 { 0%,100%{transform:translateY(4px)}  50%{transform:translateY(-8px)} }

.card-1 { animation: ctaF1 6.5s ease-in-out infinite; }
.card-2 { animation: ctaF2 8s   ease-in-out infinite; }
.card-3 { animation: ctaF3 5.8s ease-in-out infinite; }
.card-4 { animation: ctaF4 7.2s ease-in-out infinite; }

/* Responsive */
@media (max-width: 1400px) {
  .cta-wrapper { width: 80%; }
}
@media (max-width: 1200px) {
  .cta-wrapper { width: 88%; }
  .floating-card { width: 190px; padding: 13px 15px; }
}
@media (max-width: 991px) {
  .cta-wrapper { width: 92%; padding: 60px 0; }
  .floating-card { display: none; }
  .cta-section { padding: 70px 40px; }
  .cta-content h2 { font-size: 34px; }
}
@media (max-width: 576px) {
  .cta-wrapper { width: 100%; padding: 40px 0; }
  .cta-section { padding: 60px 24px; border-radius: 0; }
  .cta-content h2 { font-size: 28px; }
  .cta-btn { padding: 14px 32px; font-size: 15px; }
}

/* ============================================
   RX-FS-SECTION — Features Split Section
============================================ */
.rx-fs-section {
  padding: 90px 0 100px;
  background: #f9f8ff;
  position: relative;
  overflow: hidden;
}
.rx-fs-section::before {
  content: '';
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse at center, rgba(111,66,193,.07) 0%, transparent 70%);
  pointer-events: none;
}
.rx-fs-hdr { text-align: center; margin-bottom: 60px; }
.rx-fs-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg,#f0eaff,#e6d8ff);
  color: #6f42c1; border: 1.5px solid rgba(111,66,193,.22);
  padding: 7px 20px; border-radius: 50px;
  font-size: 11px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; margin-bottom: 22px;
}
.rx-fs-main-title {
  font-size: 44px; font-weight: 800; color: #0f172a;
  line-height: 1.18; letter-spacing: -.6px; margin-bottom: 16px;
}
.rx-fs-main-title span {
  background: linear-gradient(90deg,#6f42c1,#9333ea);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.rx-fs-main-sub {
  font-size: 17px; color: #64748b; line-height: 1.65;
  max-width: 520px; margin: 0 auto;
}
.rx-fs-card {
  border-radius: 28px; padding: 44px 40px 36px;
  height: 100%; position: relative; overflow: visible;
  border: 1.5px solid rgba(111,66,193,.1);
  box-shadow: 0 24px 64px rgba(111,66,193,.09);
}
.rx-fs-inv { background: linear-gradient(145deg,#faf7ff,#f4eeff,#ede5ff); }
.rx-fs-bill { background: linear-gradient(145deg,#f0f9ff,#e8f4ff,#dceeff); border-color: rgba(3,105,161,.1); box-shadow: 0 24px 64px rgba(3,105,161,.08); }
.rx-fs-card-top { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.rx-fs-icon {
  width: 50px; height: 50px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; flex-shrink: 0;
}
.rx-fs-inv  .rx-fs-icon { background: linear-gradient(135deg,#6f42c1,#9333ea); color: #fff; }
.rx-fs-bill .rx-fs-icon { background: linear-gradient(135deg,#0369a1,#0ea5e9); color: #fff; }
.rx-fs-card-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: .85px; text-transform: uppercase;
}
.rx-fs-inv  .rx-fs-card-lbl { color: #7c3aed; }
.rx-fs-bill .rx-fs-card-lbl { color: #0369a1; }
.rx-fs-card-title {
  font-size: 26px; font-weight: 800; color: #0f172a;
  line-height: 1.25; margin-bottom: 11px;
}
.rx-fs-card-title span { display: block; }
.rx-fs-inv  .rx-fs-card-title span { color: #7c3aed; }
.rx-fs-bill .rx-fs-card-title span { color: #0369a1; }
.rx-fs-card-desc {
  font-size: 14.5px; color: #64748b; line-height: 1.7;
  margin-bottom: 26px; max-width: 420px;
}
.rx-fs-stats { display: flex; gap: 10px; margin-bottom: 26px; }
.rx-fs-stat {
  flex: 1; background: rgba(255,255,255,.8);
  backdrop-filter: blur(8px); border-radius: 14px; padding: 13px 10px;
  text-align: center; border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 4px 12px rgba(15,23,42,.05);
  transition: transform .2s;
}
.rx-fs-stat:hover { transform: translateY(-3px); }
.rx-fs-stat-val { font-size: 22px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.rx-fs-inv  .rx-fs-stat-val { color: #7c3aed; }
.rx-fs-bill .rx-fs-stat-val { color: #0369a1; }
.rx-fs-stat-lbl { font-size: 10.5px; color: #5f6b7a; font-weight: 600; letter-spacing: .2px; }
.rx-fs-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; border-radius: 50px;
  padding: 10px 24px; text-decoration: none; transition: all .22s;
}
.rx-fs-inv .rx-fs-cta {
  background: linear-gradient(135deg,#f0eaff,#e6d8ff); color: #6f42c1;
  border: 1.5px solid rgba(111,66,193,.2);
}
.rx-fs-inv .rx-fs-cta:hover { background: linear-gradient(135deg,#6f42c1,#9333ea); color: #fff; border-color: transparent; }
.rx-fs-bill .rx-fs-cta {
  background: linear-gradient(135deg,#e0f2fe,#bae6fd); color: #0369a1;
  border: 1.5px solid rgba(3,105,161,.2);
}
.rx-fs-bill .rx-fs-cta:hover { background: linear-gradient(135deg,#0369a1,#0ea5e9); color: #fff; border-color: transparent; }

/* Inventory visual */
.rx-inv-viz {
  background: #fff; border-radius: 18px;
  box-shadow: 0 16px 48px rgba(111,66,193,.12);
  padding: 18px 20px; margin-bottom: 26px; position: relative;
}
.rx-inv-hdr {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.rx-inv-ttl { font-size: 12.5px; font-weight: 700; color: #0f172a; }
.rx-inv-alert {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fef2f2; color: #dc2626; border-radius: 50px;
  padding: 4px 11px; font-size: 11px; font-weight: 700;
  animation: rxAlertBlink 2s ease-in-out infinite;
}
@keyframes rxAlertBlink { 0%,100%{opacity:1} 50%{opacity:.55} }
.rx-inv-row { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.rx-inv-row:last-child { margin-bottom: 0; }
.rx-inv-name { font-size: 12px; font-weight: 600; color: #374151; width: 78px; flex-shrink: 0; }
.rx-inv-track { flex: 1; height: 9px; background: #f1f5f9; border-radius: 50px; overflow: hidden; }
.rx-inv-fill {
  height: 100%; border-radius: 50px;
  animation: rxFillGrow 1.4s cubic-bezier(.34,1.26,.64,1) both;
}
.rx-inv-fill.cr { background: linear-gradient(90deg,#ef4444,#dc2626); width: 8%; animation-delay: .1s; }
.rx-inv-fill.wa { background: linear-gradient(90deg,#f59e0b,#f97316); width: 32%; animation-delay: .2s; }
.rx-inv-fill.ok { background: linear-gradient(90deg,#10b981,#059669); width: 71%; animation-delay: .3s; }
.rx-inv-fill.fu { background: linear-gradient(90deg,#7c3aed,#9333ea); width: 95%; animation-delay: .4s; }
@keyframes rxFillGrow { from { width: 0 !important; } }
.rx-inv-pct { font-size: 11px; font-weight: 700; width: 28px; text-align: right; flex-shrink: 0; }
.rx-inv-pct.cr { color: #dc2626; }
.rx-inv-pct.wa { color: #f59e0b; }
.rx-inv-pct.ok { color: #059669; }
.rx-inv-pct.fu { color: #7c3aed; }
.rx-inv-footer {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid #f1f5f9;
}
.rx-inv-badge {
  flex: 1; padding: 7px 6px; border-radius: 10px; text-align: center;
  font-size: 11px; font-weight: 700;
}
.rx-inv-badge.red  { background: #fef2f2; color: #dc2626; }
.rx-inv-badge.org  { background: #fff7ed; color: #ea580c; }
.rx-inv-badge.grn  { background: #f0fdf4; color: #059669; }

/* Billing visual */
.rx-bill-viz {
  background: #fff; border-radius: 18px;
  box-shadow: 0 16px 48px rgba(3,105,161,.1);
  padding: 18px 20px; margin-bottom: 26px; position: relative;
}
.rx-bill-success {
  position: absolute; top: -14px; right: 16px;
  background: linear-gradient(135deg,#059669,#10b981); color: #fff;
  border-radius: 50px; padding: 7px 14px; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 8px 24px rgba(5,150,105,.28);
  animation: rxPayIn .6s .4s ease both, rxPayFloat 4s 1.5s ease-in-out infinite;
}
@keyframes rxPayIn { from { opacity:0; transform:translateY(-10px) scale(.88); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes rxPayFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.rx-bill-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 11px; border-bottom: 1.5px dashed #e2e8f0;
}
.rx-bill-rest { font-size: 13px; font-weight: 800; color: #0f172a; }
.rx-bill-num  { font-size: 11px; color: #5f6b7a; font-weight: 600; }
.rx-bill-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12.5px; }
.rx-bill-iname { color: #374151; font-weight: 500; }
.rx-bill-qty   { color: #5f6b7a; font-size: 11px; margin: 0 8px; }
.rx-bill-price { color: #0f172a; font-weight: 700; }
.rx-bill-div   { border: none; border-top: 1.5px dashed #e2e8f0; margin: 10px 0; }
.rx-bill-total-row { font-size: 15px; }
.rx-bill-total-lbl { font-weight: 800; color: #0f172a; }
.rx-bill-total-amt { font-size: 17px; font-weight: 900; color: #0369a1; }
.rx-bill-methods { display: flex; gap: 8px; margin-top: 14px; }
.rx-bill-method {
  flex: 1; padding: 8px 0; border-radius: 10px; text-align: center;
  font-size: 11.5px; font-weight: 700; cursor: default;
}
.rx-bill-method.on  { background: linear-gradient(135deg,#0369a1,#0ea5e9); color: #fff; box-shadow: 0 4px 14px rgba(3,105,161,.28); }
.rx-bill-method.off { background: #f1f5f9; color: #5f6b7a; }

@media (max-width: 991px) {
  .rx-fs-main-title { font-size: 32px; }
  .rx-fs-card { padding: 32px 28px 28px; }
  .rx-fs-card-title { font-size: 22px; }
  .rx-inv-fill { animation: none; }
}
@media (max-width: 575px) {
  .rx-fs-stats { gap: 7px; }
  .rx-fs-stat-val { font-size: 18px; }
}

/* ============================================
   RX-ECO-WRAP — Dashboard/Ecosystem Visual
============================================ */
.rx-eco-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}
.rx-eco-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(52px);
    z-index: 0;
}
.rx-eco-orb-1 {
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(111,66,193,.14) 0%, transparent 70%);
    top: -60px; right: -20px;
    animation: rxOrbDrift 10s ease-in-out infinite;
}
.rx-eco-orb-2 {
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(147,51,234,.1) 0%, transparent 70%);
    bottom: -40px; left: -20px;
    animation: rxOrbDrift 12s ease-in-out infinite 3.5s;
}
@keyframes rxOrbDrift {
    0%,100% { transform: translate(0,0); }
    33%     { transform: translate(14px,-20px); }
    66%     { transform: translate(-10px,14px); }
}
.rx-eco-scene {
    position: relative;
    z-index: 2;
    padding: 58px 148px 52px 148px;
}
.rx-main-dash {
    width: 238px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 28px 70px rgba(88,28,135,.18), 0 4px 18px rgba(0,0,0,.07);
    border: 1.5px solid rgba(111,66,193,.13);
    overflow: hidden;
    animation: rxDashEnter .8s cubic-bezier(.34,1.46,.64,1) both;
}
@keyframes rxDashEnter {
    from { opacity:0; transform:scale(.9) translateY(18px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
}
.rx-d-hdr {
    background: linear-gradient(135deg, #1e1b4b 0%, #2d1f72 100%);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.rx-d-brand { display: flex; align-items: center; gap: 7px; }
.rx-d-brand-ico {
    width: 22px; height: 22px;
    background: linear-gradient(135deg, #6f42c1, #9333ea);
    border-radius: 6px;
    font-size: 8px; font-weight: 900; color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.rx-d-brand span { font-size: 10px; font-weight: 800; color: #e2d9f3; }
.rx-d-live {
    display: flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,.09);
    border-radius: 20px; padding: 3px 9px;
    font-size: 8px; font-weight: 600; color: #a78bfa;
}
.rx-live-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: #22c55e;
    animation: rxDotPulse 1.5s ease-in-out infinite;
}
@keyframes rxDotPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
    60%     { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}
.rx-d-body { padding: 12px 14px; }
.rx-d-stats {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 5px; margin-bottom: 10px;
}
.rx-d-stat {
    background: linear-gradient(135deg, #f8f7fc, #f0eaff);
    border-radius: 9px; padding: 7px 5px; text-align: center;
    border: 1px solid rgba(111,66,193,.1);
}
.rx-d-stat-v { font-size: 11px; font-weight: 800; color: #0f172a; line-height: 1.2; }
.rx-d-stat-k { font-size: 7px; color: #5f6b7a; margin-top: 2px; }
.rx-d-chart {
    background: #f8fafc; border-radius: 9px;
    padding: 8px 10px; margin-bottom: 10px;
}
.rx-d-chart-hd {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 7.5px; font-weight: 700; color: #64748b; margin-bottom: 5px;
}
.rx-chart-up { color: #15803d; }
.rx-d-bars { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.rx-db {
    flex: 1; border-radius: 3px 3px 0 0; transform-origin: bottom;
    animation: rxBarGrow 1s ease both;
}
.rx-db-1 { background: rgba(111,66,193,.22); height:38%; animation-delay:.1s; }
.rx-db-2 { background: rgba(111,66,193,.32); height:55%; animation-delay:.2s; }
.rx-db-3 { background: rgba(111,66,193,.28); height:44%; animation-delay:.3s; }
.rx-db-4 { background: rgba(111,66,193,.42); height:72%; animation-delay:.4s; }
.rx-db-5 { background: rgba(111,66,193,.38); height:58%; animation-delay:.5s; }
.rx-db-6 { background: linear-gradient(180deg,#9333ea,#6f42c1); height:92%; animation-delay:.6s; }
.rx-db-7 { background: rgba(111,66,193,.48); height:68%; animation-delay:.7s; }
.rx-d-order {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 7px; background: #fff;
    border-radius: 8px; border: 1px solid #f0eaff; margin-bottom: 4px;
}
.rx-d-o-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.rx-d-o-info { flex: 1; min-width: 0; }
.rx-d-o-info strong { font-size: 8.5px; font-weight: 700; color: #0f172a; display: block; }
.rx-d-o-info em { font-size: 7px; color: #5f6b7a; font-style: normal; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-d-o-amt { font-size: 8.5px; font-weight: 800; color: #0f172a; flex-shrink: 0; }
.rx-d-footer {
    background: linear-gradient(135deg, #1e1b4b, #2d1f72);
    border-radius: 10px; padding: 9px 11px;
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px;
}
.rx-d-rev small { font-size: 7px; color: #9b8ec4; text-transform: uppercase; letter-spacing:.5px; display: block; }
.rx-d-rev strong { font-size: 15px; font-weight: 800; color: #fff; }
.rx-d-rev span { font-size: 7px; color: #a78bfa; display: block; margin-top: 1px; }
.rx-d-print {
    background: linear-gradient(135deg, #6f42c1, #9333ea);
    border-radius: 8px; padding: 7px 10px; text-align: center; cursor: default;
}
.rx-d-print i { font-size: 13px; color: #fff; display: block; }
.rx-d-print span { font-size: 7px; color: rgba(255,255,255,.75); margin-top: 1px; display: block; }

/* Floating cards on dashboard visual */
.rx-fc {
    position: absolute;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 32px rgba(15,23,42,.12);
    border: 1px solid rgba(111,66,193,.1);
    z-index: 6;
}
.rx-fc-ico {
    width: 30px; height: 30px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0; color: #fff;
}
.rx-ico-purple { background: linear-gradient(135deg, #6f42c1, #9333ea); }
.rx-ico-green  { background: linear-gradient(135deg, #059669, #10b981); }
.rx-ico-red    { background: linear-gradient(135deg, #dc2626, #ef4444); }
.rx-ico-orange { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.rx-ico-blue   { background: linear-gradient(135deg, #2563eb, #0ea5e9); }
.rx-fc-lbl { font-size: 7px; font-weight: 700; color: #5f6b7a; text-transform: uppercase; letter-spacing:.5px; margin-bottom: 2px; }
.rx-fc-ttl { font-size: 10px; font-weight: 700; color: #0f172a; line-height: 1.3; }
.rx-fc-sub { font-size: 8px; color: #5f6b7a; margin-top: 1px; }
.rx-fc-notif {
    top: 7px; left: 50%; transform: translateX(-50%);
    padding: 8px 13px;
    display: flex; align-items: center; gap: 8px;
    white-space: nowrap;
    animation: rxNotifEnter .7s .25s ease both, rxFloatNotif 5s 1.8s ease-in-out infinite;
}
@keyframes rxNotifEnter {
    from { opacity:0; transform:translateX(-50%) translateY(-12px) scale(.9); }
    to   { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}
@keyframes rxFloatNotif {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50%     { transform: translateX(-50%) translateY(-8px); }
}
.rx-fc-kot {
    top: 52px; left: 4px;
    padding: 10px 12px; width: 138px;
    animation: rxFcUp .7s .15s ease both, rxFloatA 5.5s 1.2s ease-in-out infinite;
}
.rx-fc-pay {
    top: 62px; right: 4px;
    padding: 10px 12px; width: 138px;
    animation: rxFcUp .7s .45s ease both, rxFloatB 6s 1.5s ease-in-out infinite;
}
.rx-fc-inv {
    bottom: 8px; left: 4px;
    padding: 9px 12px; width: 138px;
    animation: rxFcUp .7s .75s ease both, rxFloatB 5.8s 2.2s ease-in-out infinite;
}
.rx-fc-tbl {
    bottom: 8px; right: 4px;
    padding: 9px 12px; width: 138px;
    animation: rxFcUp .7s .95s ease both, rxFloatA 5s 2s ease-in-out infinite;
}
@keyframes rxFloatA {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-9px); }
}
@keyframes rxFloatB {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(8px); }
}
@keyframes rxFcUp {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0); }
}
.rx-kot-row {
    font-size: 8px; color: #374151;
    padding: 2px 0; display: flex; justify-content: space-between;
    border-bottom: 1px dashed rgba(111,66,193,.15);
}
.rx-kot-row:last-child { border: none; }
.rx-tbl-grid {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 3px; margin-top: 6px;
}
.rx-t { border-radius: 5px; padding: 4px 2px; text-align: center; font-size: 7.5px; font-weight: 700; }
.rx-t-occ  { background: #fee2e2; color: #b91c1c; }
.rx-t-free { background: #dcfce7; color: #15803d; }
.rx-t-res  { background: #fef3c7; color: #b45309; }

@media (max-width: 1399px) {
    .rx-eco-scene { padding: 54px 118px 48px 118px; }
    .rx-main-dash { width: 228px; }
    .rx-fc-kot, .rx-fc-inv { width: 112px; left: 2px; }
    .rx-fc-pay, .rx-fc-tbl { width: 112px; right: 2px; }
}
@media (max-width: 1199px) {
    .rx-eco-scene { padding: 50px 100px 44px 100px; }
    .rx-main-dash { width: 218px; }
    .rx-fc-kot, .rx-fc-inv { width: 95px; }
    .rx-fc-pay, .rx-fc-tbl { width: 95px; }
    .rx-fc-ttl { font-size: 9px; }
    .rx-fc-sub, .rx-fc-lbl { font-size: 6.5px; }
}
@media (max-width: 991px) {
    .rx-eco-scene { padding: 52px 132px 46px 132px; }
    .rx-main-dash { width: 238px; }
    .rx-fc-kot, .rx-fc-inv { width: 128px; }
    .rx-fc-pay, .rx-fc-tbl { width: 128px; }
    .rx-fc-ttl { font-size: 10px; }
}
@media (max-width: 767px) {
    .rx-eco-scene { padding: 50px 10px 10px 10px; }
    .rx-eco-wrap { justify-content: flex-start; }
    .rx-main-dash { width: 220px; }
    .rx-fc-kot, .rx-fc-pay, .rx-fc-inv, .rx-fc-tbl { display: none; }
    .rx-fc-notif { left: 50%; font-size: 9px; }
}
@media (max-width: 480px) {
    .rx-eco-scene { padding: 44px 0 0 0; }
    .rx-main-dash { width: 200px; }
}

/* Left column redesign */
.rx-lc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #f0eaff, #e6d8ff);
    color: #6f42c1;
    border: 1.5px solid rgba(111,66,193,.22);
    padding: 7px 18px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
}
.rx-lc-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(111,66,193,.08) 50%, transparent 100%);
    animation: rxShimmer 3s ease-in-out infinite;
    background-size: 200% 100%;
}
@keyframes rxShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.rx-lc-badge i { font-size: 14px; }
.rx-lc-title {
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -.6px;
}
.rx-lc-grad {
    background: linear-gradient(90deg, #6f42c1, #9333ea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.rx-lc-desc {
    font-size: 15px;
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 440px;
}
.rx-lc-list {
    list-style: none;
    padding: 0; margin: 0 0 28px;
    display: flex; flex-direction: column; gap: 12px;
}
.rx-lc-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    line-height: 1.5;
}
.rx-lc-check {
    width: 22px; height: 22px; flex-shrink: 0;
    background: linear-gradient(135deg, #6f42c1, #9333ea);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.rx-lc-check i { font-size: 11px; color: #fff; }
.rx-lc-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
}
.rx-lc-stat {
    flex: 1;
    background: linear-gradient(135deg, #f8f7fc, #f0eaff);
    border: 1.5px solid rgba(111,66,193,.14);
    border-radius: 16px;
    padding: 16px 10px;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.rx-lc-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(111,66,193,.15);
}
.rx-lc-stat-val {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    margin-bottom: 5px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
}
.rx-lc-stat-val .counter { font-size: 28px; font-weight: 800; color: #0f172a; }
.rx-lc-stat-val sup {
    font-size: 13px;
    font-weight: 700;
    color: #6f42c1;
    margin-top: 4px;
}
.rx-lc-stat-lbl { font-size: 11px; color: #5f6b7a; font-weight: 600; }
.rx-lc-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #6f42c1;
    text-decoration: none;
    padding: 10px 22px;
    background: linear-gradient(135deg, #f0eaff, #e6d8ff);
    border: 1.5px solid rgba(111,66,193,.2);
    border-radius: 50px;
    transition: all .25s ease;
}
.rx-lc-cta:hover {
    background: linear-gradient(135deg, #6f42c1, #9333ea);
    color: #fff;
    border-color: transparent;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(111,66,193,.3);
}
.rx-lc-cta i { font-size: 16px; transition: transform .25s ease; }
.rx-lc-cta:hover i { transform: translateX(3px); }

@media (max-width: 1199px) {
    .rx-lc-title { font-size: 30px; }
    .rx-lc-stat-val, .rx-lc-stat-val .counter { font-size: 24px; }
}
@media (max-width: 991px) {
    .rx-lc-title { font-size: 28px; }
    .rx-lc-stats { gap: 10px; }
    .rx-lc-stat { padding: 14px 8px; }
    .rx-lc-stat-val, .rx-lc-stat-val .counter { font-size: 22px; }
}
@media (max-width: 576px) {
    .rx-lc-title { font-size: 24px; letter-spacing: -.3px; }
    .rx-lc-stat-val, .rx-lc-stat-val .counter { font-size: 20px; }
}

/* ============================================
   HOW IT WORKS SECTION
============================================ */
.hiw-section {
    padding: 110px 0 90px;
    background: #fff;
    position: relative;
    overflow: hidden;
}
.hiw-section::before {
    content: "";
    position: absolute;
    top: -220px; right: -180px;
    width: 560px; height: 560px;
    background: radial-gradient(circle, rgba(111,66,193,.055) 0%, transparent 65%);
    pointer-events: none;
}
.hiw-section::after {
    content: "";
    position: absolute;
    bottom: -160px; left: -160px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(147,51,234,.04) 0%, transparent 65%);
    pointer-events: none;
}
.hiw-section .container { position: relative; z-index: 1; }
.hiw-eyebrow {
    display: inline-block;
    background: linear-gradient(135deg, #f0eaff, #e9dbff);
    color: #6f42c1;
    border: 1px solid rgba(111,66,193,.18);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.hiw-heading {
    font-size: 46px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.17;
    margin-bottom: 16px;
}
.hiw-heading span {
    background: linear-gradient(90deg, #6f42c1, #9333ea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hiw-subtext {
    font-size: 17px;
    color: #64748b;
    max-width: 580px;
    margin: 0 auto 80px;
    line-height: 1.72;
}
.hiw-step-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 72px;
    margin-bottom: 90px;
    position: relative;
}
.hiw-step-row:last-of-type { margin-bottom: 0; }
.hiw-step-row:not(:last-of-type)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -46px;
    width: 1px;
    height: 24px;
    background: linear-gradient(180deg, rgba(111,66,193,.3), rgba(111,66,193,.05));
    transform: translateX(-50%);
}
.hiw-num {
    width: 52px; height: 52px;
    background: linear-gradient(135deg, #6f42c1, #9333ea);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 8px 28px rgba(111,66,193,.3);
    flex-shrink: 0;
}
.hiw-step-tag {
    font-size: 11px;
    font-weight: 700;
    color: #9b5cff;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
}
.hiw-step-title {
    font-size: 30px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 14px;
}
.hiw-step-desc {
    font-size: 15px;
    color: #64748b;
    line-height: 1.75;
    margin-bottom: 26px;
}
.hiw-bullets {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 11px;
}
.hiw-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    line-height: 1.55;
}
.hiw-bullets li .hiw-check {
    flex-shrink: 0;
    width: 20px; height: 20px;
    background: linear-gradient(135deg, #6f42c1, #9333ea);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.hiw-bullets li .hiw-check i {
    font-size: 11px;
    color: #fff;
    font-weight: 700;
}
.hiw-visual-col { position: relative; }
.hiw-float-wrap {
    position: relative;
    animation: hiwFloat 5s ease-in-out infinite;
    will-change: transform;
}
.hiw-float-wrap:hover { animation-play-state: paused; }
@keyframes hiwFloat {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
.hiw-cta-wrap {
    margin-top: 64px;
    padding-top: 56px;
    border-top: 1px solid #f0eaff;
    text-align: center;
}
.hiw-cta-wrap p {
    font-size: 15px;
    color: #5f6b7a;
    margin-top: 14px;
}
.hiw-screen-wrap {
    position: relative;
    padding: 0 20px 28px 20px;
}
.hiw-screen {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 32px 80px rgba(15,23,42,.16), 0 4px 20px rgba(111,66,193,.1);
    overflow: hidden;
    border: 1.5px solid rgba(111,66,193,.12);
}
.hiw-sc-bar {
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hiw-sc-dots { display: flex; gap: 5px; align-items: center; }
.hiw-sc-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.hiw-sc-dot-r { background: #ff5f57; }
.hiw-sc-dot-y { background: #febc2e; }
.hiw-sc-dot-g { background: #28c840; }
.hiw-sc-url {
    flex: 1;
    background: #fff;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 10px;
    color: #5f6b7a;
    border: 1px solid #e2e8f0;
}
.hiw-sc-body { display: flex; }
.hiw-sc-sidebar {
    width: 48px;
    background: #1e1b4b;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 2px;
    flex-shrink: 0;
}
.hiw-sc-logo {
    width: 26px; height: 26px;
    background: linear-gradient(135deg, #6f42c1, #9b5cff);
    border-radius: 7px;
    font-size: 8px; font-weight: 900; color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
}
.hiw-sc-nav-i {
    width: 34px; height: 30px;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    color: #6b7280; font-size: 13px;
}
.hiw-sc-nav-i.on { background: rgba(155,92,255,.22); color: #9b5cff; }
.hiw-sc-main {
    flex: 1;
    background: #f8fafc;
    padding: 12px;
    overflow: hidden;
}
.hiw-sc-screen-img { width: 100%; display: block; }
.hiw-toast {
    position: absolute;
    background: #fff;
    border-radius: 12px;
    padding: 9px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 12px 40px rgba(15,23,42,.14);
    border: 1px solid rgba(111,66,193,.1);
    z-index: 3;
    min-width: 148px;
}
.hiw-toast-ico {
    width: 30px; height: 30px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hiw-toast-ico.t-purple { background: linear-gradient(135deg,#6f42c1,#9333ea); }
.hiw-toast-ico.t-green  { background: linear-gradient(135deg,#059669,#10b981); }
.hiw-toast-ico.t-orange { background: linear-gradient(135deg,#f59e0b,#ef4444); }
.hiw-toast-ico i { font-size: 13px; color: #fff; }
.hiw-toast-body b     { display: block; font-size: 11px; font-weight: 700; color: #0f172a; }
.hiw-toast-body span  { display: block; font-size: 9.5px; color: #5f6b7a; }
.hiw-toast-1 { bottom: 6px;  left: -16px; }
.hiw-toast-2 { top: 18px; right: -16px; }

@media (max-width: 991px) {
    .hiw-step-row {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-bottom: 60px;
    }
    .hiw-step-row:not(:last-of-type)::after { display: none; }
    .hiw-heading { font-size: 32px; }
    .hiw-step-title { font-size: 26px; }
    .hiw-subtext { margin-bottom: 52px; }
    .hiw-visual-col { order: -1; }
}
@media (max-width: 576px) {
    .hiw-section { padding: 72px 0 60px; }
    .hiw-heading { font-size: 26px; }
    .hiw-step-title { font-size: 22px; }
}

/* ============================================
   RX-PRICING-HOME — Pricing on Homepage
============================================ */
.rx-pricing-home.packages-pro {
    padding: 90px 0 100px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f3fb 100%);
    position: relative;
}
.rx-pricing-home.packages-pro::before {
    content: ""; position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(88,28,135,0.15) 0%, transparent 70%);
    top: -200px; left: -200px; z-index: 0;
}
.rx-pricing-home .pkg-title { font-size: 42px; font-weight: 700; }
.rx-pricing-home .pkg-sub   { max-width: 600px; margin: auto; color: #666; }
.rx-pricing-home .billing-toggle {
    width: 300px; max-width: 100%; margin: 22px auto 0;
    background: #f1f2f8; border-radius: 50px;
    position: relative; display: flex; padding: 6px;
    cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
.rx-pricing-home .toggle-option {
    flex: 1; text-align: center; padding: 10px 0;
    font-weight: 600; font-size: 14px;
    position: relative; z-index: 2; transition: .3s; color: #555; user-select: none;
}
.rx-pricing-home .billing-toggle.yearly .toggle-option:last-child,
.rx-pricing-home .billing-toggle:not(.yearly) .toggle-option:first-child { color: #581c87; }
.rx-pricing-home .toggle-indicator {
    position: absolute; top: 6px; left: 6px;
    width: calc(50% - 6px); height: calc(100% - 12px);
    background: white; border-radius: 40px;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    transition: .35s cubic-bezier(.4,0,.2,1);
}
.rx-pricing-home .billing-toggle.yearly .toggle-indicator { transform: translateX(100%); }
.rx-pricing-home .save-badge {
    display: inline-block; font-size: 11px;
    background: linear-gradient(90deg, #581c87, #9333ea);
    color: #fff; border-radius: 20px; padding: 2px 7px;
    margin-left: 5px; vertical-align: middle; font-weight: 600;
}
.rx-pricing-home .rx-price-num { transition: opacity .2s ease, transform .2s ease; display: inline-block; }
.rx-pricing-home .rx-currency-wrap { display: flex; justify-content: center; margin-bottom: 28px; }
.rx-pricing-home .rx-currency-dropdown { position: relative; }
.rx-pricing-home .rx-currency-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 18px; background: #fff; border: 1px solid #e8e4f5;
    border-radius: 50px; font-size: 14px; font-weight: 600; color: #374151;
    cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transition: border-color .2s, color .2s; white-space: nowrap;
}
.rx-pricing-home .rx-currency-btn:hover { border-color: #9333ea; color: #581c87; }
.rx-pricing-home .rx-currency-caret { font-size: 11px; transition: transform .25s ease; }
.rx-pricing-home .rx-currency-dropdown.open .rx-currency-caret { transform: rotate(180deg); }
.rx-pricing-home .rx-sym-pill {
    background: rgba(88,28,135,.09); color: #581c87;
    border-radius: 6px; padding: 1px 7px; font-size: 13px; font-weight: 700;
}
.rx-pricing-home .rx-currency-panel {
    position: absolute; top: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: #fff; border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,.12);
    border: 1px solid #f0eeff; padding: 8px;
    min-width: 230px; opacity: 0; visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s; z-index: 500;
}
.rx-pricing-home .rx-currency-dropdown.open .rx-currency-panel {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.rx-pricing-home .rx-currency-search-wrap { padding: 4px 4px 6px; }
.rx-pricing-home .rx-currency-search {
    width: 100%; border: 1px solid #e8e4f5; border-radius: 8px;
    padding: 7px 10px; font-size: 12px; color: #374151;
    outline: none; background: #faf9ff; box-sizing: border-box; transition: border-color .2s;
}
.rx-pricing-home .rx-currency-search:focus { border-color: #9333ea; }
.rx-pricing-home .rx-currency-list { max-height: 240px; overflow-y: auto; }
.rx-pricing-home .rx-currency-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 9px; cursor: pointer;
    font-size: 13px; color: #374151; font-weight: 500; transition: background .15s;
}
.rx-pricing-home .rx-currency-item:hover { background: rgba(111,66,193,.08); color: #6f42c1; }
.rx-pricing-home .rx-currency-item.active { background: rgba(111,66,193,.12); color: #6f42c1; font-weight: 600; }
.rx-pricing-home .rx-cur-code { font-weight: 700; min-width: 38px; }
.rx-pricing-home .rx-cur-name { opacity: .7; font-size: 12px; }
.rx-pricing-home .rx-currency-noresult { font-size: 12px; color: #5f6b7a; text-align: center; padding: 10px 0; margin: 0; }
.rx-pricing-home .package-card-pro {
    background: #fff; padding: 36px 28px 32px;
    border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.05);
    transition: all 0.35s ease; position: relative; z-index: 1; height: 100%;
}
.rx-pricing-home .package-card-pro:hover { transform: translateY(-12px); box-shadow: 0 30px 80px rgba(0,0,0,0.1); }
.rx-pricing-home .package-card-pro h5 { font-size: 22px; font-weight: 700; color: #1e1b4b; letter-spacing: -0.01em; margin-bottom: 6px; }
.rx-pricing-home .package-card-pro.featured h5 {
    background: linear-gradient(90deg, #581c87, #9333ea);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.rx-pricing-home .price {
    font-size: 38px; font-weight: 700; margin: 16px 0 0; color: #581c87;
    border-bottom: 1px solid rgba(88,28,135,0.09); padding-bottom: 14px; margin-bottom: 0;
}
.rx-pricing-home .price span { font-size: 16px; font-weight: 400; color: #5f6b7a; }
.rx-pricing-home .pkg-features { list-style: none; padding: 0; padding-top: 14px; margin-bottom: 20px; text-align: left; }
.rx-pricing-home .pkg-features li {
    display: flex; align-items: center;
    padding: 4px 6px; border-radius: 8px;
    font-size: 13.5px; font-weight: 500; color: #4b5563;
    margin-bottom: 3px; transition: 0.3s ease;
}
.rx-pricing-home .pkg-features li:hover { background: rgba(88,28,135,0.05); color: #1e1b4b; }
.rx-pricing-home .pkg-features i { font-size: 15px; color: #9333ea; margin-right: 9px; animation: none; transition: color 0.2s ease; flex-shrink: 0; }
.rx-pricing-home .package-card-pro.featured .pkg-features i { color: #581c87; }
.rx-pricing-home .package-card-pro:hover .pkg-features i { transform: none; color: #7c3aed; }
.rx-pricing-home .package-card-pro.featured { border: 2px solid #581c87; transform: scale(1.05); }
.rx-pricing-home .package-card-pro.featured:hover { transform: scale(1.05) translateY(-12px); }
.rx-pricing-home .popular-badge {
    position: absolute; top: -15px; right: 24px;
    background: linear-gradient(135deg, #4c1d95 0%, #9333ea 100%);
    color: #fff; padding: 7px 16px 7px 11px; border-radius: 50px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: 0 6px 24px rgba(147,51,234,0.4);
}
.rx-pricing-home .popular-badge i { font-size: 12px; opacity: 0.95; }
@media (max-width: 991px) {
    .rx-pricing-home .pkg-title { font-size: 28px; }
    .rx-pricing-home.packages-pro { padding: 60px 0 70px; }
    .rx-pricing-home .package-card-pro.featured { transform: none; }
    .rx-pricing-home .package-card-pro.featured:hover { transform: translateY(-12px); }
}
@media (max-width: 576px) {
    .rx-pricing-home .package-card-pro { padding: 28px 20px 24px; }
    .rx-pricing-home .price { font-size: 32px; }
    .rx-pricing-home .pkg-title { font-size: 22px; }
}

/* ============================================
   RX-SUPPORT-SECTION
============================================ */
.rx-support-section {
    padding: 96px 0;
    background: #ffffff;
    border-top: 1px solid rgba(15,23,42,0.07);
    overflow: hidden;
}
.rx-support-img-col { position: relative; }
.rx-support-img-frame {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    box-shadow:
        0 40px 80px rgba(15,23,42,0.13),
        0 12px 32px rgba(15,23,42,0.08);
}
.rx-support-img-frame img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform .7s cubic-bezier(.25,1,.5,1);
}
.rx-support-img-frame:hover img { transform: scale(1.04); }
.rx-support-img-frame::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(15,23,42,0.28), transparent);
    pointer-events: none;
}
.rx-support-stat {
    position: absolute;
    bottom: -22px;
    left: 32px;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-radius: 20px;
    padding: 18px 24px;
    box-shadow:
        0 24px 56px rgba(15,23,42,0.14),
        0 4px 16px rgba(15,23,42,0.07),
        inset 0 1.5px 0 rgba(255,255,255,0.95);
    border: 1px solid rgba(255,255,255,0.82);
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 5;
    min-width: 260px;
    animation: rxSupportFloat 5.5s ease-in-out infinite;
}
@keyframes rxSupportFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
.rx-support-stat-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 22px rgba(124,58,237,0.38);
}
.rx-support-stat-text strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}
.rx-support-stat-text span {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
    margin-top: 2px;
    display: block;
}
.rx-support-content {
    padding-left: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 8px;
}
.rx-support-content h2 {
    font-size: 44px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.15;
    letter-spacing: -0.7px;
    margin-bottom: 20px;
}
.rx-support-content > p {
    font-size: 17px;
    color: #64748b;
    line-height: 1.78;
    margin-bottom: 32px;
    max-width: 500px;
}
.rx-support-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}
.rx-support-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(15,23,42,0.08);
    font-size: 16px;
    color: #374151;
    line-height: 1.55;
}
.rx-support-list li:first-child {
    border-top: 1px solid rgba(15,23,42,0.08);
}
.rx-support-check {
    flex-shrink: 0;
    width: 22px; height: 22px;
    color: #7c3aed;
    margin-top: 1px;
}
.rx-support-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}
.rx-support-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #6d28d9, #7c3aed, #a855f7);
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    padding: 15px 36px;
    border-radius: 50px;
    text-decoration: none !important;
    box-shadow:
        0 14px 40px rgba(109,40,217,0.44),
        inset 0 1px 0 rgba(255,255,255,0.2);
    transition: all 0.32s cubic-bezier(0.34,1.56,0.64,1);
    letter-spacing: 0.1px;
}
.rx-support-btn-primary:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 22px 54px rgba(109,40,217,0.55);
    color: #fff !important;
}
.rx-support-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #581c87 !important;
    font-weight: 600;
    font-size: 15px;
    padding: 15px 28px;
    border-radius: 50px;
    text-decoration: none !important;
    border: 1.5px solid rgba(88,28,135,0.28);
    transition: all 0.28s ease;
}
.rx-support-btn-secondary:hover {
    background: rgba(88,28,135,0.06);
    border-color: #7c3aed;
    color: #3b0764 !important;
    transform: translateY(-3px);
}
@media (max-width: 991px) {
    .rx-support-content { padding-left: 0; margin-top: 56px; }
    .rx-support-content h2 { font-size: 34px; }
    .rx-support-img-frame img { height: 380px; }
    .rx-support-stat { left: 16px; min-width: 220px; }
}
@media (max-width: 767px) {
    .rx-support-section { padding: 64px 0; }
    .rx-support-content h2 { font-size: 28px; }
    .rx-support-img-frame img { height: 280px; }
    .rx-support-stat { display: none; }
    .rx-support-btns { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   (audit MKT-06) Mobile Core Web Vitals — horizontal overflow & tap targets
   ==========================================================================
   Measured live at a 360px viewport: document scrollWidth was 400px, i.e. the
   page scrolled sideways by 40px. Google measures that directly as a mobile
   usability / CWV negative, and it is where most restaurant owners first see
   the product.

   The leaks were all decorative, and each one is clipped at its own container
   rather than by hiding overflow on <body> — a body-level clip would also kill
   position:sticky and mask any future regression instead of fixing it.
   -------------------------------------------------------------------------- */
/* The actual source of the 40px was a decorative pseudo-element, which is why it
   never showed up in a DOM scan: .rx-pricing-home.packages-pro::before is a
   600x600 radial gradient pinned at left:-200px, so its right edge sits at exactly
   400px. overflow-x:clip (rather than hidden) contains it without turning the
   section into a scroll container, so position:sticky children keep working. */
.rx-pricing-home.packages-pro { overflow-x: clip; }

@media (max-width: 767.98px) {

    /* .hiw-toast-1/-2 are pinned at left/right:-16px so they hang outside the
       wrapper. Clipping alone (below) stopped the page scrolling sideways but
       sliced 16px off the toasts themselves — "No card required" lost its last
       characters. Pull them flush to the wrapper edge instead, so the clip has
       nothing left to cut and the cards stay whole. */
    .hiw-toast-1 { left: 0; }
    .hiw-toast-2 { right: 0; }
    .hiw-screen-wrap { overflow: hidden; }

    /* Decorative 3D/ecosystem art that renders a few px wider than its column. */
    .rx-eco-wrap,
    .rx-hi-3d { overflow: hidden; }

    /* Swiper tracks are always wider than the viewport by design; the component
       clips them, but pin it here so a missing .swiper wrapper cannot leak. */
    .swiper { overflow: hidden; }

    /* ---- Tap targets -----------------------------------------------------
       Interactive controls were as small as 29x30px. WCAG 2.5.8 asks for 24px
       minimum and Google's mobile-friendly guidance for ~48px; 44px is the
       common iOS/Android target and what the audit specified. Applied as a
       minimum with inline-flex centring so labels stay visually unchanged. */
    .navbar-toggler,
    .mob-close-btn,
    .mob-signup-btn,
    .btn-premium,
    .rx-fs-cta,
    .footer-social a,
    .mob-nav-offcanvas a {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Nav/footer text links: give height without changing their inline flow.
       Covers the header brand and the pill tabs in .restiox-control-section,
       which measured 39-40px tall. */
    .mob-nav-offcanvas .nav-link,
    .navbar-brand,
    .nav-pills .nav-link,
    footer a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* The site footer is a plain <div class="footer-widget">, not a <footer>
       element, so the rule above never reached its links — they measured 18px.
       Also covers the currency picker and the two CTAs that landed just short. */
    .footer-link a,
    .footer-contact a,
    .social-list a,
    .inner-copyright-warp a,
    .rx-currency-btn,
    .rx-lc-cta,
    .packages-pro .text-center > a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Footer lists are stacked text links; centre-align keeps the taller row
       looking deliberate rather than loosely spaced. */
    .footer-link li,
    .footer-contact li { display: flex; align-items: center; }

    /* Cookie banner — the one consent surface every visitor has to hit. */
    #rxCookieBanner a,
    #rxCookieBanner button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* (audit) Partner marks were stretched: the card sets a height while each img's
   width attribute supplied the width, so any mark whose ratio differed from the
   card's got squashed — 10.png measured 39-69% off. Let the box drive both axes
   and have the image fit inside it without distortion. */
.tl-logo-card img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* =============================================================================
   WORLDMAP SECTION — moved out of index.php.
   These rules used to sit in an inline <style> in the body: ~3.2 KB re-sent with
   every single homepage response, on a page that is served private/must-revalidate
   and therefore never cached as a document. Here they ride index.css instead.
   index.css is the last sheet in <head>, so the cascade order is unchanged.
   ============================================================================= */
.worldmap-section {
    position: relative;
    padding: 60px 0 50px;
    background: linear-gradient(135deg, #2e1065 0%, #4c1d95 35%, #3b0764 65%, #1e1b4b 100%);
}
.worldmap-section::before,
.worldmap-section::after { display: none; }

.wm-header {
    text-align: center;
    margin-bottom: 32px;
    position: relative; z-index: 2;
}
.worldmap-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(99,102,241,.15);
    border: 1px solid rgba(139,92,246,.35);
    color: #a78bfa;
    padding: 6px 18px; border-radius: 50px;
    font-size: 12px; font-weight: 700; letter-spacing: .4px;
    margin-bottom: 18px;
}
.wm-header h2 {
    font-size: 42px !important; font-weight: 800 !important;
    color: #ffffff !important; line-height: 1.2 !important;
    margin: 0 0 16px !important;
}
.map-highlight {
    background: linear-gradient(90deg, #818cf8, #c084fc);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.wm-header > p {
    color: rgba(148,163,184,.85) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    max-width: 520px; margin: 0 auto !important;
}

#rx-worldmap {
    width: 100%;
    height: 380px;
    margin-bottom: 40px;
    position: relative; z-index: 2;
}

.wm-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 36px;
    position: relative; z-index: 2;
}
.wm-stat-cell {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 18px;
    padding: 28px 20px;
    text-align: center;
    transition: background .25s, transform .2s;
}
.wm-stat-cell:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-3px);
}
.wm-stat-num {
    display: block;
    font-size: 36px; font-weight: 800;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -.8px; line-height: 1;
    margin-bottom: 8px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.wm-stat-num .counter {
    color: #ffffff !important;
    font-size: inherit;
    font-weight: inherit;
}
.wm-stat-label {
    font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase; letter-spacing: .8px;
}

.worldmap-cta {
    text-align: center;
    position: relative; z-index: 2;
    padding-bottom: 10px;
}
.worldmap-cta p {
    color: rgba(255,255,255,0.55);
    font-size: 12.5px; margin-top: 14px; letter-spacing: .3px;
}

@media (max-width: 991px) {
    .wm-stats-strip { grid-template-columns: repeat(2,1fr); }
    .wm-header h2 { font-size: 30px !important; }
    #rx-worldmap { height: 300px; }
}
@media (max-width: 576px) {
    .worldmap-section { padding: 40px 0 40px; }
    .wm-header h2 { font-size: 24px !important; }
    .wm-stats-strip { grid-template-columns: repeat(2,1fr); }
    .wm-stat-num { font-size: 26px; }
    #rx-worldmap { height: 220px; margin-bottom: 28px; }
}


/* =============================================================================
   HOMEPAGE — AI BAND / CHANNEL GRID / CAPABILITY STRIP  (namespace `homeplus`)
   -----------------------------------------------------------------------------
   Three blocks added so the homepage stops being silent about the AI suite, the
   ordering channels and the loyalty / staff-app / cash-register / delivery /
   multi-branch modules. Tokens are the shared ones: #6f42c1 / #9333ea, ink
   #0f172a, muted #6b7280, 20px card radius, 0 20px 50px rgba(0,0,0,.05) shadow,
   translateY(-8px) hover. The capability strip and the channel headers reuse
   .fx-* classes from feature-plus.css; only what is genuinely new lives here.
   ============================================================================= */

/* -- AI band ------------------------------------------------------------- */
.rx-ai-band {
    position: relative;
    padding: 78px 0 70px;
    background: linear-gradient(135deg, #1e1b4b 0%, #3b0764 45%, #2e1065 100%);
    overflow: hidden;
}
.rx-ai-band::before {
    content: "";
    position: absolute;
    top: -170px; right: -130px;
    width: 430px; height: 430px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(147,51,234,.45) 0%, rgba(147,51,234,0) 70%);
    pointer-events: none;
}
.rx-ai-band .container { position: relative; z-index: 1; }

.rx-ai-head { text-align: center; max-width: 780px; margin: 0 auto 40px; }
.rx-ai-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(147,51,234,.18);
    border: 1px solid rgba(167,139,250,.38);
    color: #c4b5fd;
    padding: 7px 18px; border-radius: 50px;
    font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
    margin-bottom: 18px;
}
.rx-ai-eyebrow i { font-size: 15px; }
.rx-ai-title {
    font-size: 32px; font-weight: 800; line-height: 1.2;
    color: #fff; margin: 0 0 16px;
}
.rx-ai-title span {
    background: linear-gradient(90deg, #a78bfa, #f0abfc);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.rx-ai-sub { font-size: 16px; line-height: 1.75; color: rgba(226,232,240,.82); margin: 0; }

.rx-ai-grid {
    display: grid; grid-template-columns: 1fr;
    gap: 16px; margin: 0 0 34px; padding: 0; list-style: none;
}
.rx-ai-card {
    display: flex; align-items: flex-start; gap: 14px; min-width: 0;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(167,139,250,.22);
    border-radius: 18px; padding: 20px;
    transition: transform .3s ease, background-color .3s ease, border-color .3s ease;
}
.rx-ai-card:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,.12);
    border-color: rgba(167,139,250,.45);
}
.rx-ai-ico {
    width: 46px; height: 46px; flex: 0 0 46px;
    border-radius: 13px;
    background: linear-gradient(135deg, #6f42c1, #9333ea);
    display: flex; align-items: center; justify-content: center;
}
.rx-ai-ico i { font-size: 22px; color: #fff; }
.rx-ai-body { min-width: 0; }
.rx-ai-body h3 { font-size: 16px; font-weight: 700; color: #fff; margin: 2px 0 6px; line-height: 1.35; }
.rx-ai-body p { font-size: 13.5px; line-height: 1.65; color: rgba(203,213,225,.85); margin: 0; overflow-wrap: break-word; }

.rx-ai-foot {
    display: flex; flex-direction: column; align-items: center;
    gap: 22px;
}
.rx-ai-facts {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px; margin: 0; padding: 0; list-style: none;
}
.rx-ai-facts li {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(167,139,250,.24);
    color: #ddd6fe; border-radius: 50px;
    padding: 8px 16px; font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.rx-ai-facts i { font-size: 15px; color: #a78bfa; }
.rx-ai-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px; padding: 13px 30px;
    border-radius: 50px; background: #fff; color: #6f42c1;
    font-size: 15px; font-weight: 700; text-decoration: none;
    box-shadow: 0 14px 30px rgba(21,10,44,.30);
    transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.rx-ai-cta:hover {
    transform: translateY(-3px); background: #faf7ff; color: #6f42c1;
    box-shadow: 0 20px 40px rgba(21,10,44,.36);
}
.rx-ai-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (min-width: 576px) { .rx-ai-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 992px) {
    /* Six tracks so five cards land 3-over-2 with no ragged gap on the second row. */
    .rx-ai-grid { grid-template-columns: repeat(6, minmax(0,1fr)); }
    .rx-ai-grid > li { grid-column: span 2; }
    .rx-ai-grid > li:nth-child(4),
    .rx-ai-grid > li:nth-child(5) { grid-column: span 3; }
    .rx-ai-title { font-size: 42px; }
}

/* -- Channel grid + shared pipeline -------------------------------------- */
.rx-ch-section { padding: 76px 0 56px; background: #f8faff; }
.rx-ch-head { text-align: center; max-width: 780px; margin: 0 auto 36px; }
.rx-ch-head .fx-eyebrow { margin-bottom: 12px; }
.rx-ch-grid { margin: 0 0 30px; }

.rx-ch-card {
    display: block; height: 100%;
    background: #fff;
    border: 1px solid rgba(111,66,193,.08);
    border-radius: 20px; padding: 26px 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,.05);
    color: inherit; text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rx-ch-card:hover {
    transform: translateY(-8px); color: inherit;
    box-shadow: 0 30px 70px rgba(111,66,193,.12);
    border-color: rgba(111,66,193,.20);
}
.rx-ch-card:focus-visible { outline: 2px solid #6f42c1; outline-offset: 3px; }
.rx-ch-ico {
    width: 56px; height: 56px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(111,66,193,.1), rgba(155,92,255,.15));
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.rx-ch-ico i { font-size: 26px; color: #6f42c1; }
.rx-ch-card h3 { font-size: 17px; font-weight: 700; color: #0f172a; margin: 0 0 9px; line-height: 1.35; }
.rx-ch-card p { font-size: 14px; line-height: 1.65; color: #6b7280; margin: 0 0 14px; }
.rx-ch-more {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: #6f42c1;
}
.rx-ch-more i { font-size: 15px; transition: transform .25s ease; }
.rx-ch-card:hover .rx-ch-more i { transform: translateX(4px); }

.rx-ch-pipe {
    background: #fff;
    border: 1px solid rgba(111,66,193,.10);
    border-radius: 20px; padding: 24px 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,.04);
}
.rx-ch-pipe-lbl {
    display: block; text-align: center;
    font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: #6f42c1; margin-bottom: 18px;
}
.rx-ch-flow {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 12px 14px; margin: 0; padding: 0; list-style: none;
}
.rx-ch-flow li {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 13.5px; font-weight: 600; color: #0f172a;
}
.rx-ch-flow li i {
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(111,66,193,.1), rgba(155,92,255,.15));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; color: #6f42c1;
}
.rx-ch-flow li:not(:last-child)::after {
    content: "\2192";
    margin-left: 14px; color: #c4b5fd; font-size: 17px; font-weight: 700;
}
.rx-ch-cta { text-align: center; margin-top: 30px; }

/* -- Capability strip ---------------------------------------------------- */
.rx-cap-section { padding: 0 0 76px; background: #f8faff; }
.rx-cap-head { text-align: center; max-width: 700px; margin: 0 auto 28px; }
.rx-cap-head .fx-eyebrow { margin-bottom: 12px; }
/* .fx-tool is a flex box; hanging it off the <li> keeps every card the same
   height regardless of how long its one line of copy runs. */
.rx-cap-item { display: flex; min-width: 0; }
.rx-cap-item > .fx-tool { flex: 1 1 auto; }

@media (max-width: 575.98px) {
    .rx-ai-band { padding: 56px 0 52px; }
    .rx-ai-title { font-size: 26px; }
    .rx-ch-section { padding: 56px 0 44px; }
    .rx-cap-section { padding: 0 0 56px; }
    .rx-ch-flow li:not(:last-child)::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rx-ai-card, .rx-ai-cta, .rx-ch-card, .rx-ch-more i { transition: none; }
    .rx-ai-card:hover, .rx-ai-cta:hover, .rx-ch-card:hover { transform: none; }
    .rx-ch-card:hover .rx-ch-more i { transform: none; }
}