.elementor-31 .elementor-element.elementor-element-3bfa819{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-8f75ccd *//* =========================================================
   JRABAWY HOME PAGE
========================================================= */

.jr-page {
  --jr-purple: #350990;
  --jr-purple-2: #7628e8;
  --jr-purple-soft: #f3efff;

  --jr-orange: #fe7e00;
  --jr-orange-soft: #fff0df;

  --jr-white: #fefefe;
  --jr-black: #050504;

  --jr-text: #15111e;
  --jr-muted: #787383;

  --jr-background: #faf9ff;

  --jr-border:
    rgba(53, 9, 144, 0.10);

  --jr-shadow:
    0 20px 60px
    rgba(40, 18, 90, 0.08);

  --jr-container: 1240px;

  width: 100%;

  overflow: hidden;

  background:
    var(--jr-background);

  color:
    var(--jr-text);

  direction: rtl;

  font-family:
    "IBM Plex Sans Arabic",
    sans-serif;

  font-size: 16px;
}


.jr-page *,
.jr-page *::before,
.jr-page *::after {
  box-sizing: border-box;
}


.jr-page a {
  text-decoration: none;
}


.jr-page button,
.jr-page input {
  font-family: inherit;
}


.jr-page img {
  display: block;
  max-width: 100%;
}


body.jr-no-scroll {
  overflow: hidden !important;
}


.jr-container {
  width:
    min(
      calc(100% - 40px),
      var(--jr-container)
    );

  margin-inline: auto;
}



/* =========================================================
   HEADER
========================================================= */

.jr-header {
  width: 100%;
  height: 76px;

  position: sticky;

  top: 0;

  z-index: 9999;

  background:
    rgba(
      255,
      255,
      255,
      0.95
    );

  border-bottom:
    1px solid
    rgba(53, 9, 144, .08);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  transition:
    box-shadow .3s ease,
    background .3s ease;
}


.jr-header.jr-header-scrolled {
  background:
    rgba(
      255,
      255,
      255,
      .98
    );

  box-shadow:
    0 10px 35px
    rgba(31, 16, 57, .07);
}


.jr-header-inner {
  height: 100%;

  display: grid;

  grid-template-columns:
    220px
    1fr
    220px;

  align-items: center;

  gap: 25px;
}



/* LOGO */

.jr-header-logo {
  display: flex;

  align-items: center;

  width: max-content;
}


.jr-header-logo img {
  width: auto;

  height: 52px;

  object-fit: contain;
}



/* NAV */

.jr-nav {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 31px;
}


.jr-nav a {
  position: relative;

  padding:
    27px 0;

  color:
    #514b5b;

  font-size:
    14px;

  font-weight:
    500;

  white-space: nowrap;

  transition:
    color .25s ease;
}


.jr-nav a::after {
  content: "";

  position: absolute;

  right: 0;

  bottom: 18px;

  width: 0;

  height: 2px;

  border-radius:
    10px;

  background:
    var(--jr-orange);

  transition:
    width .3s ease;
}


.jr-nav a:hover,
.jr-nav a.active {
  color:
    var(--jr-purple);
}


.jr-nav a:hover::after,
.jr-nav a.active::after {
  width: 100%;
}



/* HEADER ACTIONS */

.jr-header-actions {
  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: 6px;
}


.jr-icon-btn {
  width: 40px;

  height: 40px;

  position: relative;

  display: grid;

  place-items: center;

  flex-shrink: 0;

  border: 0;

  border-radius:
    50%;

  background:
    transparent;

  color:
    #514b5b;

  cursor: pointer;

  transition:
    color .25s ease,
    background .25s ease,
    transform .25s ease;
}


.jr-icon-btn:hover {
  color:
    var(--jr-purple);

  background:
    var(--jr-purple-soft);

  transform:
    translateY(-1px);
}


.jr-cart-count {
  width: 18px;

  height: 18px;

  position: absolute;

  top: -1px;

  right: -1px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    var(--jr-orange);

  color:
    white;

  font-size:
    9px;

  font-weight:
    700;
}


.jr-custom-header-btn {
  min-height: 43px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  margin-right: 7px;

  padding:
    0 19px;

  border-radius:
    50px;

  background:
    var(--jr-orange);

  color:
    white !important;

  font-size:
    13px;

  font-weight:
    700;

  box-shadow:
    0 8px 22px
    rgba(
      254,
      126,
      0,
      .25
    );

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}


.jr-custom-header-btn:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 13px 30px
    rgba(
      254,
      126,
      0,
      .35
    );
}


.jr-mobile-menu-button {
  display: none;
}



/* =========================================================
   MOBILE MENU
========================================================= */

.jr-mobile-menu {
  position: fixed;

  inset: 0;

  z-index:
    100000;

  display: flex;

  justify-content: flex-end;

  background:
    rgba(5, 3, 10, .63);

  opacity: 0;

  visibility: hidden;

  transition:
    opacity .3s ease,
    visibility .3s ease;
}


.jr-mobile-menu.active {
  opacity: 1;

  visibility: visible;
}


.jr-mobile-menu-inner {
  width:
    min(
      380px,
      88vw
    );

  height:
    100%;

  padding:
    25px;

  background:
    var(--jr-white);

  transform:
    translateX(110%);

  transition:
    transform .35s
    cubic-bezier(.2,.8,.2,1);
}


.jr-mobile-menu.active
.jr-mobile-menu-inner {
  transform:
    translateX(0);
}


.jr-mobile-menu-head {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  padding-bottom:
    24px;

  border-bottom:
    1px solid
    var(--jr-border);
}


.jr-mobile-menu-head img {
  max-height: 48px;

  width: auto;
}


.jr-mobile-menu-head button {
  width: 40px;

  height: 40px;

  display: grid;

  place-items: center;

  border: 0;

  border-radius: 50%;

  background:
    var(--jr-purple-soft);

  color:
    var(--jr-purple);

  cursor: pointer;

  font-size: 26px;
}


.jr-mobile-menu nav {
  display: flex;

  flex-direction: column;

  padding:
    25px 0;
}


.jr-mobile-menu nav a {
  padding:
    15px 5px;

  border-bottom:
    1px solid
    rgba(53,9,144,.07);

  color:
    var(--jr-text);

  font-size:
    15px;

  font-weight:
    600;
}


.jr-mobile-custom-button {
  width: 100%;

  min-height: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius:
    13px;

  background:
    var(--jr-orange);

  color:
    white !important;

  font-weight:
    700;
}



/* =========================================================
   HERO
========================================================= */

.jr-hero {
  min-height:
    690px;

  position:
    relative;

  overflow:
    hidden;

  background:

    radial-gradient(
      circle at 27% 48%,
      rgba(83, 22, 199, .42),
      transparent 29%
    ),

    radial-gradient(
      circle at 80% 10%,
      rgba(254, 126, 0, .06),
      transparent 28%
    ),

    linear-gradient(
      120deg,
      #070412,
      #080415 55%,
      #040308
    );

  color:
    white;
}


.jr-hero::before {
  content: "";

  width: 550px;

  height: 550px;

  position: absolute;

  left: -180px;

  top: 20px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:
    50%;
}


.jr-hero::after {
  content: "";

  width: 460px;

  height: 460px;

  position: absolute;

  right: -180px;

  bottom: -200px;

  border-radius:
    50%;

  background:
    rgba(53,9,144,.10);

  filter:
    blur(40px);
}


.jr-hero-inner {
  min-height:
    630px;

  position:
    relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.06fr)
    minmax(0, .94fr);

  align-items: center;

  gap: 38px;

  padding:
    35px 0;
}


.jr-hero-copy {
  max-width:
    660px;
}


.jr-eyebrow {
  width:
    max-content;

  margin-bottom:
    25px;

  padding:
    9px 15px;

  border:
    1px solid
    rgba(254,126,0,.38);

  border-radius:
    30px;

  background:
    rgba(254,126,0,.07);

  color:
    #ffac4d;

  font-size:
    13px;

  font-weight:
    600;
}


.jr-hero h1 {
  max-width:
    680px;

  margin:
    0 0 24px;

  color:
    white;

  font-size:
    clamp(
      42px,
      4.2vw,
      60px
    );

  font-weight:
    700;

  line-height:
    1.28;

  letter-spacing:
    -1.8px;
}


.jr-hero-title-line {
  display:
    block;

  color:
    white;

  white-space:
    nowrap;
}


.jr-hero-title-line + .jr-hero-title-line {
  margin-top:
    2px;
}


.jr-hero-title-line strong {
  position:
    relative;

  display:
    inline-block;

  color:
    var(--jr-orange);

  font-weight:
    inherit;
}


.jr-hero-title-line strong::after {
  content: "";

  width:
    100%;

  height:
    5px;

  position:
    absolute;

  right: 0;

  bottom:
    -4px;

  border-radius:
    10px;

  background:
    var(--jr-orange);

  transform:
    rotate(-2deg);
}


.jr-hero-description {
  max-width:
    530px;

  margin:
    0 0 30px;

  color:
    rgba(255,255,255,.63);

  font-size:
    17px;

  line-height:
    2;
}


.jr-hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 13px;
}



/* BUTTONS */

.jr-btn {
  min-height: 51px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap: 8px;

  padding:
    0 24px;

  border-radius:
    14px;

  font-size:
    15px;

  font-weight:
    700;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease,
    background .3s ease;
}


.jr-btn-primary {
  background:

    linear-gradient(
      110deg,
      var(--jr-purple-2),
      #5a17cb
    );

  color:
    white !important;

  box-shadow:
    0 12px 30px
    rgba(92,26,205,.34);
}


.jr-btn-primary:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 18px 40px
    rgba(92,26,205,.42);
}


.jr-btn-outline {
  border:
    1px solid
    rgba(255,255,255,.22);

  background:
    rgba(255,255,255,.03);

  color:
    white !important;
}


.jr-btn-outline:hover {
  border-color:
    white;

  background:
    rgba(255,255,255,.07);

  transform:
    translateY(-2px);
}



/* HERO VISUAL */

.jr-hero-visual {
  min-height:
    540px;

  position:
    relative;

  display:
    grid;

  place-items:
    center;
}


.jr-hero-image {
  width: 100%;

  max-width:
    650px;

  max-height:
    550px;

  position:
    relative;

  z-index: 3;

  object-fit:
    contain;

  filter:

    drop-shadow(
      0 35px 55px
      rgba(0,0,0,.45)
    );

  animation:
    jrHeroFloat
    5s ease-in-out
    infinite;
}


@keyframes jrHeroFloat {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-10px);
  }

}


.jr-hero-purple-glow {
  width:
    430px;

  height:
    430px;

  position:
    absolute;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(118,40,232,.42),
      transparent 65%
    );

  filter:
    blur(25px);
}


.jr-hero-platform {
  width:
    440px;

  height:
    75px;

  position:
    absolute;

  bottom:
    45px;

  border-radius:
    50%;

  background:

    linear-gradient(
      180deg,
      #391078,
      #120323
    );

  box-shadow:

    0 0 0 2px
    rgba(118,40,232,.8),

    0 0 30px
    rgba(118,40,232,.7),

    0 40px 60px
    rgba(0,0,0,.7);

  transform:

    perspective(900px)
    rotateX(65deg);

  opacity:
    .72;
}



/* =========================================================
   FEATURES
========================================================= */

.jr-features-strip {
  background:
    #090614;

  border-top:
    1px solid
    rgba(255,255,255,.06);
}


.jr-feature-items {
  min-height:
    68px;

  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      1fr
    );

  align-items:
    center;
}


.jr-feature-item {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap: 8px;

  padding: 10px;

  color:
    rgba(255,255,255,.77);

  font-size:
    12px;

  font-weight:
    600;
}


.jr-feature-icon {
  color:
    var(--jr-orange);
}



/* =========================================================
   GENERAL SECTION
========================================================= */

.jr-section {
  padding:
    100px 0;
}


.jr-section-title {
  margin-bottom:
    39px;

  text-align:
    center;
}


.jr-section-title h2,
.jr-section-heading h2 {
  margin:
    0 0 10px;

  color:
    #15111e;

  font-size:
    clamp(
      31px,
      4vw,
      43px
    );

  font-weight:
    700;
}


.jr-section-title p,
.jr-section-heading p {
  margin: 0;

  color:
    var(--jr-muted);

  font-size:
    15px;
}


.jr-tiny-line {
  width:
    60px;

  height:
    4px;

  margin:
    18px auto 0;

  border-radius:
    10px;

  background:

    linear-gradient(
      90deg,
      var(--jr-purple-2),
      var(--jr-orange)
    );
}



/* =========================================================
   CATEGORY SECTION
========================================================= */

.jr-categories-section {
  background:
    linear-gradient(
      180deg,
      #faf9ff,
      #f7f5fd
    );
}


.jr-section-heading {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    flex-start;

  gap:
    25px;

  text-align:
    right;
}


.jr-categories-section
.jr-tiny-line {
  margin:
    18px 0 30px auto;
}


/* CAROUSEL */

.jr-categories-carousel {
  width:
    100%;

  position:
    relative;
}


.jr-categories-track {
  width:
    100%;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    28px;

  overflow-x:
    auto;

  overflow-y:
    hidden;

  padding:
    18px 64px 28px;

  scroll-snap-type:
    x mandatory;

  scroll-behavior:
    smooth;

  scrollbar-width:
    none;

  cursor:
    grab;

  overscroll-behavior-inline:
    contain;
}


.jr-categories-track::-webkit-scrollbar {
  display:
    none;
}


.jr-categories-track.jr-dragging {
  cursor:
    grabbing;

  scroll-snap-type:
    none;

  user-select:
    none;
}


/* CATEGORY ITEM — transparent image, no card container */

.jr-category-card {
  flex:
    0 0
    210px;

  min-width:
    0;

  min-height:
    286px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  position:
    relative;

  scroll-snap-align:
    center;

  border-radius:
    0;

  background:
    transparent;

  box-shadow:
    none;

  overflow:
    visible;

  transition:
    transform .35s ease;
}


.jr-category-card:hover {
  transform:
    translateY(-6px);
}


.jr-category-image {
  width:
    100%;

  height:
    225px;

  position:
    relative;

  display:
    grid;

  place-items:
    center;
}


.jr-category-image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  object-position:
    center;

  filter:
    drop-shadow(
      0 15px 16px
      rgba(29, 11, 65, .12)
    );

  transition:
    transform .4s ease,
    filter .4s ease;
}


.jr-category-card:hover
.jr-category-image img {
  transform:
    scale(1.035);

  filter:
    drop-shadow(
      0 20px 22px
      rgba(29, 11, 65, .18)
    );
}


.jr-category-placeholder {
  width:
    100%;

  height:
    100%;

  display:
    grid;

  place-items:
    center;

  border-radius:
    24px;

  background:
    linear-gradient(
      140deg,
      var(--jr-purple),
      var(--jr-orange)
    );

  color:
    rgba(255,255,255,.85);

  font-size:
    18px;

  font-weight:
    700;
}


.jr-category-overlay {
  display:
    none;
}


.jr-category-content {
  width:
    100%;

  position:
    static;

  padding-top:
    10px;

  text-align:
    center;
}


.jr-category-content strong {
  display:
    block;

  margin-bottom:
    3px;

  color:
    var(--jr-text);

  font-size:
    16px;

  font-weight:
    700;
}


.jr-category-content span {
  color:
    var(--jr-muted);

  font-size:
    11px;
}


/* iPhone-style carousel arrows */

.jr-carousel-button {
  width:
    52px;

  height:
    52px;

  position:
    absolute;

  top:
    43%;

  z-index:
    20;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    rgba(53, 9, 144, .10);

  border-radius:
    50%;

  background:
    rgba(255, 255, 255, .90);

  color:
    #21172f;

  box-shadow:
    0 14px 34px
    rgba(34, 13, 78, .14);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  cursor:
    pointer;

  transform:
    translateY(-50%);

  transition:
    transform .22s ease,
    background .22s ease,
    color .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}


.jr-carousel-button svg {
  width:
    24px;

  height:
    24px;
}


.jr-carousel-button-prev {
  right:
    -26px;
}


.jr-carousel-button-next {
  left:
    -26px;
}


.jr-carousel-button:hover {
  border-color:
    rgba(53, 9, 144, .24);

  background:
    var(--jr-purple);

  color:
    white;

  box-shadow:
    0 17px 38px
    rgba(53, 9, 144, .25);

  transform:
    translateY(-50%)
    scale(1.06);
}


.jr-carousel-button:active {
  transform:
    translateY(-50%)
    scale(.96);
}


.jr-carousel-button:focus-visible {
  outline:
    3px solid
    rgba(118, 40, 232, .20);

  outline-offset:
    3px;
}


.jr-carousel-hint {
  display:
    none;

  margin-top:
    4px;

  color:
    #8c8695;

  font-size:
    11px;

  text-align:
    center;
}


/* =========================================================
   PRODUCTS
========================================================= */

.jr-products-section {
  background:
    #faf9ff;
}


.jr-product-tabs {
  display:
    flex;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap: 8px;

  margin-bottom:
    35px;
}


.jr-product-tab {
  padding:
    10px 18px;

  border:
    1px solid
    var(--jr-border);

  border-radius:
    40px;

  background:
    white;

  color:
    #625c6c;

  cursor:
    pointer;

  font-size:
    13px;

  font-weight:
    600;

  transition:
    color .25s ease,
    background .25s ease,
    border-color .25s ease;
}


.jr-product-tab:hover,
.jr-product-tab.active {
  border-color:
    var(--jr-purple);

  background:
    var(--jr-purple);

  color:
    white;
}


.jr-products-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:
    20px;
}


.jr-product-card {
  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid
    rgba(53,9,144,.07);

  border-radius:
    24px;

  background:
    white;

  transition:
    opacity .25s ease,
    transform .35s ease,
    box-shadow .35s ease;
}


.jr-product-card:hover {
  transform:
    translateY(-8px);

  box-shadow:
    var(--jr-shadow);
}


.jr-product-card.jr-product-hidden {
  display: none;
}


.jr-product-image {
  height:
    305px;

  position:
    relative;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  background:

    linear-gradient(
      135deg,
      #f5f1ff,
      #eee9ff
    );
}


.jr-product-image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform .4s ease;
}


.jr-product-card:hover
.jr-product-image img {
  transform:
    scale(1.035);
}


.jr-product-placeholder {
  color:
    var(--jr-purple);

  font-weight:
    700;
}


.jr-product-badge {
  position:
    absolute;

  z-index: 4;

  top:
    15px;

  right:
    15px;

  padding:
    7px 11px;

  border-radius:
    20px;

  background:
    var(--jr-orange);

  color:
    white;

  font-size:
    10px;

  font-weight:
    700;
}


.jr-product-body {
  padding:
    20px;
}


.jr-product-category {
  display:
    block;

  overflow:
    hidden;

  color:
    var(--jr-purple-2);

  font-size:
    11px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.jr-product-body h3 {
  margin:
    5px 0 8px;

  color:
    var(--jr-text);

  font-size:
    16px;

  font-weight:
    700;

  line-height:
    1.6;
}


.jr-product-body h3 a {
  color:
    inherit;
}


.jr-product-info {
  margin-bottom:
    7px;

  color:
    #9a94a1;

  font-size:
    11px;
}


.jr-product-price {
  margin-bottom:
    14px;

  color:
    var(--jr-purple-2);

  font-size:
    17px;

  font-weight:
    700;
}


.jr-product-button {
  width:
    100%;

  min-height:
    43px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    8px 12px;

  border-radius:
    13px;

  background:

    linear-gradient(
      90deg,
      #7a2ce8,
      #5e18c7
    );

  color:
    white !important;

  font-size:
    13px;

  font-weight:
    700;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.jr-product-button:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 10px 20px
    rgba(98,27,207,.25);
}


.jr-section-cta {
  margin-top:
    38px;

  text-align:
    center;
}


.jr-see-all {
  min-height:
    48px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 27px;

  border-radius:
    13px;

  background:
    var(--jr-purple);

  color:
    white !important;

  font-size:
    14px;

  font-weight:
    700;

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}


.jr-see-all:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 12px 30px
    rgba(53,9,144,.25);
}



/* =========================================================
   CUSTOM JRAB
========================================================= */

.jr-custom-section {
  position:
    relative;

  overflow:
    hidden;

  padding:
    100px 0;

  background:

    linear-gradient(
      135deg,
      #06020c,
      #100523
    );

  color:
    white;
}


.jr-custom-section::before {
  content: "";

  width:
    600px;

  height:
    600px;

  position:
    absolute;

  top:
    -180px;

  left:
    -170px;

  border-radius:
    50%;

  background:

    radial-gradient(
      circle,
      rgba(112,39,221,.33),
      transparent 65%
    );
}


.jr-custom-section::after {
  content: "";

  width:
    400px;

  height:
    400px;

  position:
    absolute;

  right:
    -100px;

  bottom:
    -100px;

  background:

    radial-gradient(
      circle,
      rgba(254,126,0,.10),
      transparent 70%
    );
}


.jr-custom-card {
  min-height:
    500px;

  position:
    relative;

  z-index:
    2;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  align-items:
    center;

  gap:
    45px;

  padding:
    55px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    36px;

  background:

    linear-gradient(
      120deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}


.jr-custom-content h2 {
  margin:
    0 0 22px;

  color:
    white;

  font-size:
    clamp(
      38px,
      5vw,
      60px
    );

  font-weight:
    700;

  line-height:
    1.2;
}


.jr-custom-content h2 span {
  color:
    var(--jr-orange);
}


.jr-custom-content > p {
  max-width:
    530px;

  margin:
    0 0 28px;

  color:
    rgba(255,255,255,.64);

  line-height:
    2;
}


.jr-custom-steps {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    15px;

  margin-bottom:
    30px;
}


.jr-custom-step {
  padding:
    9px 13px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:
    40px;

  background:
    rgba(255,255,255,.04);

  color:
    rgba(255,255,255,.82);

  font-size:
    12px;
}


.jr-custom-step strong {
  margin-left:
    4px;

  color:
    var(--jr-orange);
}


.jr-custom-visual {
  min-height:
    420px;

  position:
    relative;

  display:
    grid;

  place-items:
    center;
}


.jr-custom-visual img {
  width:
    100%;

  max-width:
    570px;

  max-height:
    450px;

  position:
    relative;

  z-index:
    2;

  object-fit:
    contain;

  filter:

    drop-shadow(
      0 30px 50px
      rgba(0,0,0,.40)
    );
}


.jr-custom-glow {
  width:
    380px;

  height:
    380px;

  position:
    absolute;

  border-radius:
    50%;

  background:

    radial-gradient(
      circle,
      rgba(118,40,232,.38),
      transparent 68%
    );
}



/* =========================================================
   REVIEWS
========================================================= */

.jr-reviews-section {
  background:
    #faf9ff;
}


.jr-reviews-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:
    18px;
}


.jr-review-card {
  padding:
    24px;

  border:
    1px solid
    var(--jr-border);

  border-radius:
    22px;

  background:
    white;

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}


.jr-review-card:hover {
  transform:
    translateY(-6px);

  box-shadow:
    var(--jr-shadow);
}


.jr-review-head {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  margin-bottom:
    15px;
}


.jr-review-avatar {
  width:
    43px;

  height:
    43px;

  display:
    grid;

  place-items:
    center;

  flex-shrink:
    0;

  border-radius:
    50%;

  background:

    linear-gradient(
      135deg,
      var(--jr-purple-2),
      var(--jr-purple)
    );

  color:
    white;

  font-weight:
    700;
}


.jr-review-name {
  color:
    var(--jr-text);

  font-size:
    14px;

  font-weight:
    700;
}


.jr-review-meta {
  color:
    #aaa5b0;

  font-size:
    10px;
}


.jr-review-stars {
  margin-bottom:
    12px;

  color:
    #ffab39;

  font-size:
    13px;

  letter-spacing:
    2px;
}


.jr-review-card p {
  margin: 0;

  color:
    #66606e;

  font-size:
    13px;

  line-height:
    1.9;
}



/* =========================================================
   FAQ
========================================================= */

.jr-faq-section {
  padding:
    95px 0 110px;

  background:
    #faf9ff;
}


.jr-faq {
  width:
    min(
      800px,
      100%
    );

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  margin-inline:
    auto;
}


.jr-faq-item {
  overflow:
    hidden;

  border:
    1px solid
    var(--jr-border);

  border-radius:
    17px;

  background:
    white;
}


.jr-faq-question {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    20px 22px;

  border:
    0;

  background:
    white;

  color:
    var(--jr-text);

  cursor:
    pointer;

  text-align:
    right;

  font-size:
    14px;

  font-weight:
    700;
}


.jr-faq-icon {
  width:
    27px;

  height:
    27px;

  display:
    grid;

  place-items:
    center;

  flex-shrink:
    0;

  border-radius:
    50%;

  background:
    var(--jr-purple-soft);

  color:
    var(--jr-purple-2);

  font-size:
    18px;

  transition:
    transform .3s ease,
    color .3s ease,
    background .3s ease;
}


.jr-faq-answer {
  max-height:
    0;

  overflow:
    hidden;

  padding:
    0 22px;

  color:
    #736d7b;

  font-size:
    13px;

  line-height:
    2;

  transition:
    max-height .4s ease,
    padding .4s ease;
}


.jr-faq-answer p {
  margin: 0;
}


.jr-faq-item.active
.jr-faq-answer {
  max-height:
    250px;

  padding:
    0 22px 20px;
}


.jr-faq-item.active
.jr-faq-icon {
  transform:
    rotate(45deg);

  background:
    var(--jr-purple);

  color:
    white;
}



/* =========================================================
   FOOTER
========================================================= */

.jr-footer {
  padding:
    75px 0 30px;

  background:
    #070411;

  color:
    white;
}


.jr-footer-grid {
  display:
    grid;

  grid-template-columns:
    1.5fr
    1fr
    1fr
    1fr;

  gap:
    50px;

  margin-bottom:
    55px;
}


.jr-footer-logo {
  display:
    inline-flex;
}


.jr-footer-logo img {
  width:
    auto;

  max-width:
    180px;

  max-height:
    75px;

  object-fit:
    contain;
}


.jr-footer-brand > p {
  max-width:
    350px;

  margin:
    17px 0 0;

  color:
    rgba(255,255,255,.48);

  font-size:
    13px;

  line-height:
    2;
}


.jr-footer-column h3 {
  margin:
    0 0 18px;

  color:
    white;

  font-size:
    14px;

  font-weight:
    700;
}


.jr-footer-links {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


.jr-footer-links a {
  color:
    rgba(255,255,255,.48);

  font-size:
    12px;

  transition:
    color .25s ease,
    transform .25s ease;
}


.jr-footer-links a:hover {
  color:
    var(--jr-orange);

  transform:
    translateX(-4px);
}


.jr-socials {
  display:
    flex;

  gap:
    8px;

  margin-top:
    20px;
}


.jr-social {
  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    var(--jr-purple-2);

  color:
    white !important;

  font-size:
    11px;

  font-weight:
    600;

  transition:
    transform .25s ease,
    background .25s ease;
}


.jr-social:hover {
  background:
    var(--jr-orange);

  transform:
    translateY(-3px);
}


.jr-footer-bottom {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding-top:
    25px;

  border-top:
    1px solid
    rgba(255,255,255,.07);

  color:
    rgba(255,255,255,.35);

  font-size:
    11px;
}



/* =========================================================
   LOADING
========================================================= */

.jr-category-skeleton {
  flex:
    0 0
    210px;

  height:
    286px;

  border-radius:
    24px;

  background:

    linear-gradient(
      90deg,
      #ece8f3 25%,
      #f7f5fb 50%,
      #ece8f3 75%
    );

  background-size:
    200% 100%;

  animation:
    jrSkeleton
    1.4s
    infinite;
}


.jr-product-skeleton {
  min-height:
    430px;

  border-radius:
    24px;

  background:

    linear-gradient(
      90deg,
      #ece8f3 25%,
      #f7f5fb 50%,
      #ece8f3 75%
    );

  background-size:
    200% 100%;

  animation:
    jrSkeleton
    1.4s
    infinite;
}


@keyframes jrSkeleton {

  0% {
    background-position:
      200% 0;
  }

  100% {
    background-position:
      -200% 0;
  }

}


.jr-api-message {
  width:
    100%;

  grid-column:
    1 / -1;

  padding:
    25px;

  border:
    1px solid
    rgba(53,9,144,.08);

  border-radius:
    15px;

  background:
    white;

  color:
    var(--jr-muted);

  text-align:
    center;
}



/* =========================================================
   REVEAL
========================================================= */

[data-jr-reveal] {
  opacity: 0;

  transform:
    translateY(30px);

  transition:
    opacity .7s ease,
    transform .7s ease;
}


[data-jr-reveal].jr-revealed {
  opacity: 1;

  transform:
    none;
}



/* =========================================================
   DESKTOP HERO VIEWPORT
========================================================= */

@media
(min-width: 1101px) {

  .jr-hero {
    min-height:
      calc(
        100svh - 144px
      );
  }


  .jr-hero-inner {
    min-height:
      calc(
        100svh - 144px
      );

    padding:
      28px 0;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media
(max-width: 1100px) {

  .jr-header-inner {
    grid-template-columns:
      1fr auto;
  }


  .jr-nav,
  .jr-header-actions {
    display:
      none;
  }


  .jr-mobile-menu-button {
    width:
      43px;

    height:
      43px;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    gap:
      5px;

    border:
      0;

    border-radius:
      12px;

    background:
      var(--jr-purple-soft);

    cursor:
      pointer;
  }


  .jr-mobile-menu-button span {
    width:
      19px;

    height:
      2px;

    border-radius:
      5px;

    background:
      var(--jr-purple);
  }


  .jr-hero-inner {
    grid-template-columns:
      1fr;

    gap:
      20px;

    padding:
      65px 0;

    text-align:
      center;
  }


  .jr-hero-copy {
    margin-inline:
      auto;
  }


  .jr-eyebrow {
    margin-inline:
      auto;
  }


  .jr-hero-description {
    margin-inline:
      auto;
  }


  .jr-hero-actions {
    justify-content:
      center;
  }


  .jr-hero-visual {
    min-height:
      480px;
  }


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


  .jr-custom-card {
    grid-template-columns:
      1fr;

    text-align:
      center;
  }


  .jr-custom-content > p {
    margin-inline:
      auto;
  }


  .jr-custom-steps {
    justify-content:
      center;
  }


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


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


  .jr-feature-items {
    grid-template-columns:
      repeat(
        3,
        1fr
      );
  }


  .jr-feature-item:nth-child(4),
  .jr-feature-item:nth-child(5) {
    display:
      none;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media
(max-width: 650px) {

  .jr-container {
    width:
      min(
        calc(100% - 28px),
        var(--jr-container)
      );
  }


  .jr-header {
    height:
      66px;
  }


  .jr-header-logo img {
    height:
      44px;
  }


  .jr-hero {
    min-height:
      auto;
  }


  .jr-hero-inner {
    min-height:
      0;

    padding:
      65px 0 35px;
  }


  .jr-hero h1 {
    font-size:
      clamp(
        31px,
        9vw,
        38px
      );

    line-height:
      1.32;

    letter-spacing:
      -.8px;
  }


  .jr-hero-title-line {
    white-space:
      nowrap;
  }


  .jr-hero-title-line strong::after {
    height:
      3px;

    bottom:
      -2px;
  }


  .jr-hero-description {
    font-size:
      14px;
  }


  .jr-hero-actions {
    flex-direction:
      column;
  }


  .jr-hero-actions
  .jr-btn {
    width:
      100%;
  }


  .jr-hero-visual {
    min-height:
      340px;
  }


  .jr-hero-image {
    max-height:
      340px;
  }


  .jr-hero-platform {
    width:
      300px;

    bottom:
      25px;
  }


  .jr-feature-items {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }


  .jr-feature-item:nth-child(3) {
    display:
      none;
  }


  .jr-section {
    padding:
      72px 0;
  }


  .jr-section-title h2,
  .jr-section-heading h2 {
    font-size:
      30px;
  }


  .jr-section-heading {
    align-items:
      center;
  }


  .jr-section-heading p {
    font-size:
      13px;
  }


  .jr-categories-track {
    gap:
      18px;

    padding:
      12px 48px 22px;
  }


  .jr-carousel-button {
    width:
      44px;

    height:
      44px;

    top:
      41%;
  }


  .jr-carousel-button svg {
    width:
      21px;

    height:
      21px;
  }


  .jr-carousel-button-prev {
    right:
      0;
  }


  .jr-carousel-button-next {
    left:
      0;
  }


  .jr-category-card {
    flex-basis:
      165px;

    min-height:
      235px;
  }


  .jr-category-image {
    height:
      178px;
  }


  .jr-category-skeleton {
    flex-basis:
      165px;

    height:
      220px;

    border-radius:
      20px;
  }


  .jr-category-content {
    padding-top:
      8px;
  }


  .jr-category-content strong {
    font-size:
      14px;
  }


  .jr-carousel-hint {
    display:
      block;
  }


  .jr-products-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:
      12px;
  }


  .jr-product-image {
    height:
      220px;
  }


  .jr-product-body {
    padding:
      14px;
  }


  .jr-product-body h3 {
    font-size:
      13px;
  }


  .jr-product-category,
  .jr-product-info {
    font-size:
      10px;
  }


  .jr-product-price {
    font-size:
      14px;
  }


  .jr-product-button {
    min-height:
      39px;

    padding:
      6px;

    font-size:
      11px;
  }


  .jr-product-tab {
    padding:
      8px 14px;

    font-size:
      11px;
  }


  .jr-custom-section {
    padding:
      65px 0;
  }


  .jr-custom-card {
    padding:
      35px 20px;

    border-radius:
      27px;
  }


  .jr-custom-content h2 {
    font-size:
      39px;
  }


  .jr-custom-steps {
    gap:
      8px;
  }


  .jr-custom-step {
    font-size:
      10px;
  }


  .jr-custom-visual {
    min-height:
      310px;
  }


  .jr-custom-visual img {
    max-height:
      310px;
  }


  .jr-reviews-grid {
    grid-template-columns:
      1fr;
  }


  .jr-faq-section {
    padding:
      70px 0 80px;
  }


  .jr-faq-question {
    font-size:
      13px;
  }


  .jr-footer {
    padding-top:
      55px;
  }


  .jr-footer-grid {
    grid-template-columns:
      1fr;

    gap:
      35px;
  }


  .jr-footer-brand > p {
    max-width:
      100%;
  }


  .jr-footer-bottom {
    flex-direction:
      column;

    text-align:
      center;
  }


}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media
(prefers-reduced-motion: reduce) {

  .jr-page *,
  .jr-page *::before,
  .jr-page *::after {

    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }

}/* End custom CSS */