/* ————— Rizecart FX layer: icons · 3D · texture ————— */

/* icon primitive (injected by site.js) */
.ic{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--g-soft);color:var(--g);flex-shrink:0}
.ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic-inline{width:auto;height:auto;background:none;border-radius:0;margin-inline-end:2px}
.ic-inline svg{width:13px;height:13px;stroke-width:2}
.int-card .ic{margin-bottom:14px}
.step-card .step-head{display:flex;align-items:center;justify-content:space-between}
.badge-row .ic-inline svg{width:12px;height:12px}

/* subtle dot-grid texture on key sections */
.hero,.iso-band{background-image:radial-gradient(circle,rgba(22,22,26,.055) 1px,transparent 1.4px);
  background-size:24px 24px}
.hero{background-image:radial-gradient(900px 420px at 50% -10%,var(--g-soft),transparent 70%),
  radial-gradient(circle,rgba(22,22,26,.05) 1px,transparent 1.4px);background-size:auto,24px 24px}

/* 3D tilt hero */
.hero-mock-wrap{perspective:1400px}
.hero-mock{transform-style:preserve-3d;transition:transform .18s ease-out,box-shadow .3s;will-change:transform}
.hero-mock-wrap .float-card{transform-style:preserve-3d}
.fc1{transform:translateZ(70px)}.fc2{transform:translateZ(90px)}.fc3{transform:translateZ(55px)}
@keyframes bob{0%,100%{transform:translateY(0) translateZ(var(--z,60px))}50%{transform:translateY(-8px) translateZ(var(--z,60px))}}
.fc1{--z:70px}.fc2{--z:90px}.fc3{--z:55px}

/* ————— isometric engine stack ————— */
.iso-band{padding:110px 32px;overflow:hidden}
.iso-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:960px){.iso-inner{grid-template-columns:1fr}}
.iso-stage{height:420px;position:relative;perspective:1100px}
.iso-layer{position:absolute;left:50%;top:50%;width:300px;height:190px;margin:-95px 0 0 -150px;
  border-radius:22px;border:1.5px solid rgba(46,91,255,.3);
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(234,240,255,.75));
  backdrop-filter:blur(6px);box-shadow:0 30px 60px -18px rgba(22,22,40,.28);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  transform:rotateX(56deg) rotateZ(-40deg) translateZ(var(--tz));
  animation:isoFloat 6s ease-in-out infinite;animation-delay:var(--d)}
.iso-layer span{font-weight:700;font-size:1rem;letter-spacing:-.01em;transform:none}
.iso-layer small{font-size:.74rem;color:var(--text-3)}
.iso-layer.l1{--tz:-70px;--d:0s}
.iso-layer.l2{--tz:30px;--d:.7s;border-color:var(--lime);background:linear-gradient(135deg,#2E5BFF,#1F3FC4);color:#fff;
  box-shadow:0 40px 80px -20px rgba(46,91,255,.55)}
.iso-layer.l2 small{color:rgba(255,255,255,.65)}
.iso-layer.l3{--tz:130px;--d:1.4s}
@keyframes isoFloat{0%,100%{transform:rotateX(56deg) rotateZ(-40deg) translateZ(var(--tz))}
  50%{transform:rotateX(56deg) rotateZ(-40deg) translateZ(calc(var(--tz) + 16px))}}
.iso-beam{position:absolute;left:50%;top:50%;width:3px;height:240px;margin:-120px 0 0 -1.5px;
  background:linear-gradient(180deg,transparent,rgba(46,91,255,.5),transparent);
  transform:rotateX(56deg) rotateZ(-40deg) rotateY(90deg);filter:blur(1px)}
.iso-copy h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.03em;line-height:1.14}
.iso-copy p{margin-top:16px;font-size:1rem;color:var(--text-2);line-height:1.7;max-width:46ch}
.iso-legend{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.iso-legend div{display:flex;align-items:center;gap:11px;font-size:.9rem;color:var(--text-2)}
.iso-legend .ic{width:27px;height:27px;border-radius:8px}
.iso-legend .ic svg{width:15px;height:15px;stroke-width:1.9}

/* ————— 3D coin (final CTA decor) ————— */
.final-cta{position:relative;overflow:hidden}
.coin-wrap{position:absolute;top:50%;inset-inline-end:9%;transform:translateY(-50%);perspective:800px;pointer-events:none}
@media(max-width:1100px){.coin-wrap{display:none}}
.coin{width:120px;height:120px;position:relative;transform-style:preserve-3d;animation:coinSpin 7s linear infinite}
.coin-face{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 30%,#4E77FF,#2E5BFF 55%,#1B3AA8);
  border:3px solid rgba(255,255,255,.35);box-shadow:inset 0 0 24px rgba(255,255,255,.18)}
.coin-face.back{transform:rotateY(180deg) translateZ(7px)}
.coin-face.front{transform:translateZ(7px)}
.coin-edge{position:absolute;inset:6px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.4)}
.coin-face svg{width:52px;height:52px;fill:none;stroke:#EAF0FF;stroke-width:1.5;stroke-linecap:round}
@keyframes coinSpin{from{transform:rotateY(0) rotateX(8deg)}to{transform:rotateY(360deg) rotateX(8deg)}}
.coin-glow{position:absolute;inset:-40px;border-radius:50%;background:radial-gradient(closest-side,rgba(90,130,255,.35),transparent 70%);filter:blur(6px)}

/* stat band gets depth */
.stats-band{position:relative;overflow:hidden}
.stats-band::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1.4px);background-size:26px 26px}
.stats-inner{position:relative}

/* nav dropdown */
.nav-dd{position:relative;display:inline-block}
.nav-dd>a::after{content:" ▾";font-size:.7em;color:var(--text-3)}
.dd-menu{position:absolute;top:100%;inset-inline-start:-10px;padding:14px 8px 8px;display:none;z-index:60}
.nav-dd:hover .dd-menu{display:block}
.dd-inner{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-md);
  display:flex;flex-direction:column;min-width:200px;padding:7px;overflow:hidden}
.dd-inner a{padding:10px 14px;border-radius:9px;font-size:.88rem;color:var(--text-2);display:flex;gap:9px;align-items:center}
.dd-inner a:hover{background:var(--g-soft);color:var(--g-dark)}
.dd-inner i{font-family:var(--ar);font-style:normal;font-size:.82rem;width:20px;text-align:center}
.logobar a.lb-mark:hover{color:var(--g)}

/* film section */
.film-wrap{max-width:880px;margin:48px auto 0;position:relative}
.film-frame{border-radius:20px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(46,36,22,.42);border:0;background:#0B0F1E;position:relative}
.film-frame video{display:block;width:100%;aspect-ratio:16/9}
.film-cap{display:flex;justify-content:center;gap:26px;margin-top:16px;font-size:.76rem;color:var(--text-3);flex-wrap:wrap}
.hero-film-link{margin-top:18px;font-size:.9rem;font-weight:650;color:var(--g);display:inline-flex;align-items:center;gap:8px}
.hero-film-link:hover{color:var(--g-dark)}
.play-badge{width:26px;height:26px;border-radius:50%;background:var(--lime);display:inline-grid;place-items:center;color:#fff}
.play-badge::after{content:"";border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #fff;margin-inline-start:2px}

/* real platform logos */
.lb-logo{display:inline-flex;align-items:center}
.lb-logo img{height:26px;width:auto;display:block;filter:grayscale(1);opacity:.6;transition:filter .2s,opacity .2s}
.lb-logo:hover img{filter:none;opacity:1}
.lb-logo.shopify img{height:30px}
.dd-inner img{height:15px;width:auto}
.plat-hero-badge img{height:20px;width:auto;display:block}

/* floating channel field (final CTA) */
.cta-field{position:absolute;inset:0;pointer-events:none}
.final-cta>h2,.final-cta>a,.final-cta>p{position:relative;z-index:2}
.cta-tile{position:absolute;width:var(--s,48px);height:var(--s,48px);border-radius:24%;
  display:grid;place-items:center;background:#1A1E2E;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.55);opacity:.9;
  animation:tileFloat var(--d,9s) ease-in-out var(--dl,0s) infinite alternate}
.cta-tile img{width:52%;height:52%;object-fit:contain}
.cta-tile.lite{background:#F4F2EE;border-color:rgba(255,255,255,.25)}
.cta-tile.lite img{width:62%}
@keyframes tileFloat{
  0%{transform:translate(0,0) rotate(-2deg)}
  100%{transform:translate(var(--tx,6px),var(--ty,-12px)) rotate(2.5deg)}}
@media(max-width:900px){.cta-tile.m-hide{display:none}}

/* pain strip (voice of customer) */
.pain-strip{max-width:1120px;margin:0 auto;padding:76px 32px 0;text-align:center}
.pain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px;text-align:start}
@media(max-width:1000px){.pain-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.pain-grid{grid-template-columns:1fr}}
.pain-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--sh-sm);
  font-size:.93rem;line-height:1.65;color:var(--text-2);position:relative}
.pain-card::before{content:"“";position:absolute;top:6px;inset-inline-start:14px;font-family:var(--disp);
  font-size:2.6rem;color:var(--g-mid);opacity:.5;line-height:1}
.pain-card p{padding-top:16px}
.pain-card.ar p{font-family:"IBM Plex Sans Arabic",sans-serif;direction:rtl;text-align:right;font-size:.98rem}
.pain-foot{margin-top:22px;font-size:.82rem;color:var(--text-3)}

/* Arabic (RTL) page typography */
[dir=rtl] body{font-family:"IBM Plex Sans Arabic",var(--sans)}
[dir=rtl] .hero h1,[dir=rtl] .sect h2,[dir=rtl] .ftext h3,[dir=rtl] .iso-copy h2,[dir=rtl] .final-cta h2,
[dir=rtl] .pain-strip h2,[dir=rtl] .testi blockquote,[dir=rtl] .t-metric,[dir=rtl] .stat-big b,
[dir=rtl] .price b,[dir=rtl] .calc-rev,[dir=rtl] .step-num{font-family:"Noto Kufi Arabic",sans-serif;letter-spacing:0}
[dir=rtl] .eyebrow,[dir=rtl] .snav-logo b{letter-spacing:.03em}
[dir=rtl] .cmp-table th,[dir=rtl] .vs-card h5{letter-spacing:.02em}
.lang-link{font-family:"IBM Plex Sans Arabic",sans-serif}

/* dropdown icon alignment: fixed slot, labels start at same x */
.dd-ico{width:24px;height:24px;display:grid;place-items:center;flex-shrink:0}
.dd-ico img{max-width:18px;max-height:18px;width:auto;height:auto;filter:none;opacity:1}
.dd-inner a>img{display:none}

/* payment trust row (Tap) */
.pay-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:26px}
.pay-row small{width:100%;text-align:center;font-size:.72rem;color:var(--text-3);margin-bottom:2px}
.pay-chip{padding:7px 13px;border-radius:8px;background:#fff;border:1px solid var(--line);
  font-size:.74rem;font-weight:650;color:var(--text-2);letter-spacing:.01em;display:inline-flex;align-items:center}
.pay-chip img{height:20px;width:auto;max-width:76px;object-fit:contain;display:block}

/* film: play overlay + sound-on lightbox
   Rebuilt Jul 2026. Was a dark pill pinned to the bottom edge with a label —
   the dated pattern. Mobbin is unanimous on the modern one: a large CENTRED
   white circle with a dark triangle (Loom, PayPal, Figma, Dropbox, OpenAI).
   Loom's is enormous and unmissable; PayPal keeps a small label under it,
   which is the version used here since the film is silent until you click and
   the label has to say so. */
.film-frame{cursor:pointer;position:relative}
/* A soft vignette so a white button stays legible over any frame of the film. */
.film-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(60% 60% at 50% 50%,rgba(6,10,22,.42) 0%,rgba(6,10,22,.06) 70%,transparent 100%);
  opacity:.9;transition:opacity .3s;
}
.film-frame:hover::after{opacity:.7}

.film-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:13px;
  padding:0;border:0;background:none;
  color:#fff;font-size:.82rem;font-weight:650;white-space:nowrap;
  letter-spacing:.01em;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.fp-icon{
  inline-size:74px;block-size:74px;border-radius:50%;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:grid;place-items:center;flex:none;
  box-shadow:0 16px 40px -8px rgba(0,0,0,.55), 0 0 0 0 rgba(255,255,255,.5);
  transition:transform .24s cubic-bezier(.23,1,.32,1), box-shadow .24s;
}
/* Dark triangle, optically centred — a centred triangle always looks left-heavy.
   margin-left is PHYSICAL on purpose: the triangle must not mirror in RTL, so
   its optical nudge must not either. */
.fp-icon::after{
  content:"";display:block;inline-size:0;block-size:0;border-style:solid;
  border-width:10px 0 10px 17px;
  border-color:transparent transparent transparent #10131C;
  margin-left:5px;
}
.film-play:hover .fp-icon{
  transform:scale(1.08);
  box-shadow:0 20px 48px -8px rgba(0,0,0,.6), 0 0 0 10px rgba(255,255,255,.14);
}
.film-play:active .fp-icon{transform:scale(1.01)}
.film-play:focus-visible .fp-icon{box-shadow:0 0 0 4px var(--g), 0 16px 40px -8px rgba(0,0,0,.55)}


/* Duration chip — the "how long is this?" question every player should answer
   before you commit (OpenAI, Miro). */
.film-dur{
  position:absolute;inset-block-start:14px;inset-inline-end:14px;z-index:2;
  padding:5px 10px;border-radius:8px;
  background:rgba(8,10,18,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.92);font-size:.7rem;font-weight:700;
  font-variant-numeric:tabular-nums;pointer-events:none;
}

@media (max-width:560px){
  .fp-icon{inline-size:60px;block-size:60px}
  .fp-icon::after{border-width:8px 0 8px 14px}
}
@media (prefers-reduced-motion:reduce){
  .film-play:hover .fp-icon{transform:none}
}
.film-modal{position:fixed;inset:0;z-index:120;background:rgba(8,9,14,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.film-modal.open{opacity:1;pointer-events:auto}
.film-modal video{width:min(1200px,94vw);max-height:86vh;border-radius:18px;box-shadow:0 40px 120px -20px rgba(0,0,0,.8);background:#000}
.fm-close{position:absolute;top:20px;inset-inline-end:24px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:1.1rem;
  display:grid;place-items:center;transition:background .2s}
.fm-close:hover{background:rgba(255,255,255,.2)}