@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap");
.rud-sadu-edge {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: clamp(22px, 4vw, 58px);
  pointer-events: none;
  opacity: 0.52;
  background-color: rgba(2, 29, 22, 0.76);
  background-image:
    linear-gradient(45deg, transparent 38%, rgba(227, 199, 126, 0.88) 39% 47%, transparent 48%),
    linear-gradient(-45deg, transparent 38%, rgba(227, 199, 126, 0.88) 39% 47%, transparent 48%),
    radial-gradient(circle, #e3c77e 0 1.5px, transparent 2.5px);
  background-position:
    0 0,
    0 0,
    11px 11px;
  background-size: 22px 22px;
  box-shadow: 0 0 28px rgba(0, 0, 0, 0.32);
}
.rud-sadu-edge--right {
  right: 0;
  border-left: 1px solid rgba(227, 199, 126, 0.38);
}
.rud-sadu-edge--left {
  left: 0;
  border-right: 1px solid rgba(227, 199, 126, 0.38);
}
@media (max-width: 600px) {
  .rud-sadu-edge {
    width: 20px;
    opacity: 0.42;
    background-size: 16px 16px;
    background-position:
      0 0,
      0 0,
      8px 8px;
  }
}
.rud-national,
.rud-national * {
  box-sizing: border-box;
}
.rud-national {
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: clamp(8px, 1.8vw, 20px);
  background: transparent !important;
  font-family: var(--rud-font);
}
.rud-national__banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  border: 1px solid rgba(211, 169, 74, 0.55);
  border-radius: clamp(16px, 2.7vw, 34px) clamp(16px, 2.7vw, 34px) 0 0;
  background: #021d16;
  box-shadow: 0 18px 50px rgba(2, 29, 22, 0.2);
}
.rud-national__banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1915 / 821;
  object-fit: contain;
}
.rud-national__shine {
  position: absolute;
  inset: -70% auto -70% -28%;
  z-index: 2;
  width: 16%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: rotate(14deg);
  animation: none;
}
.rud-offer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(54px, 6.2vw, 74px);
  margin-top: 0;
  border: 1px solid rgba(211, 169, 74, 0.78);
  border-top: 6px solid #d3a94a;
  border-radius: 0 0 clamp(16px, 2.7vw, 28px) clamp(16px, 2.7vw, 28px);
  color: #fff;
  background-color: #021d16;
  background-image:
    linear-gradient(45deg, transparent 42%, rgba(227, 199, 126, 0.34) 43% 47%, transparent 48%),
    linear-gradient(-45deg, transparent 42%, rgba(227, 199, 126, 0.28) 43% 47%, transparent 48%),
    radial-gradient(circle, rgba(227, 199, 126, 0.34) 0 2px, transparent 3px),
    linear-gradient(110deg, #021d16 0%, #021d16 48%, #021d16 100%);
  background-position:
    0 0,
    0 0,
    14px 14px,
    0 0;
  background-size:
    28px 28px,
    28px 28px,
    28px 28px,
    100% 100%;
  box-shadow:
    0 14px 36px rgba(2, 29, 22, 0.2),
    inset 0 5px rgba(2, 29, 22, 0.9),
    inset 0 6px rgba(227, 199, 126, 0.38);
}
.rud-offer::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 0;
  border: 1px solid rgba(227, 199, 126, 0.4);
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 29, 22, 0.7), transparent 14% 86%, rgba(2, 29, 22, 0.7)),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255, 255, 255, 0.025) 38px 39px);
}
.rud-offer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.52;
  background:
    radial-gradient(circle at 12% 50%, rgba(227, 199, 126, 0.28), transparent 17%),
    radial-gradient(circle at 88% 50%, rgba(227, 199, 126, 0.22), transparent 17%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.035), transparent);
}
.rud-offer__window {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin-inline: clamp(54px, 8vw, 105px);
  direction: ltr;
}
.rud-offer__track {
  position: relative;
  left: 0;
  display: flex;
  width: max-content;
  margin: 0;
  min-height: clamp(54px, 6.2vw, 74px);
  align-items: center;
  justify-content: flex-start;
  direction: ltr;
  animation: rud-offer-move 42s linear infinite;
  will-change: transform;
}
.rud-offer:hover .rud-offer__track {
  animation-play-state: paused;
}
.rud-offer__group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  direction: rtl;
  min-width: max-content;
}
.rud-offer__group span {
  padding-inline: clamp(12px, 2vw, 28px);
  color: #fbf1d6;
  font-size: clamp(14px, 2vw, 22px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.rud-offer__group b {
  color: #e3c77e;
  font-size: 1.18em;
  text-shadow: 0 0 18px rgba(227, 199, 126, 0.35);
}
.rud-offer__group i {
  display: inline-grid;
  width: clamp(24px, 3vw, 40px);
  place-items: center;
  color: #d3a94a;
  font-size: clamp(12px, 1.5vw, 18px);
  font-style: normal;
}
.rud-offer__pattern {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: clamp(46px, 7vw, 90px);
  pointer-events: none;
  background-color: #021d16;
  background-image:
    linear-gradient(45deg, transparent 38%, rgba(227, 199, 126, 0.9) 39% 47%, transparent 48%),
    linear-gradient(-45deg, transparent 38%, rgba(227, 199, 126, 0.9) 39% 47%, transparent 48%),
    radial-gradient(circle, #e3c77e 0 2px, transparent 3px);
  background-size:
    22px 22px,
    22px 22px,
    22px 22px;
  box-shadow: 0 0 24px rgba(2, 29, 22, 0.88);
}
.rud-offer__pattern::after {
  content: "◆";
  position: absolute;
  top: 50%;
  left: 50%;
  color: #e3c77e;
  font-size: clamp(15px, 2vw, 22px);
  transform: translate(-50%, -50%);
  text-shadow: 0 0 14px rgba(227, 199, 126, 0.42);
}
.rud-offer__pattern--right {
  right: 0;
  border-left: 1px solid rgba(211, 169, 74, 0.58);
}
.rud-offer__pattern--left {
  left: 0;
  border-right: 1px solid rgba(211, 169, 74, 0.58);
}
@keyframes rud-offer-move {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@media (max-width: 600px) {
  .rud-national {
    padding: 6px;
  }
  .rud-national__banner {
    border-radius: 16px 16px 0 0;
  }
  .rud-offer {
    margin-top: 0;
    border-top-width: 5px;
    border-radius: 0 0 16px 16px;
  }
  .rud-offer__window {
    margin-inline: 43px;
  }
  .rud-offer__pattern {
    width: 38px;
    background-size: 16px 16px;
  }
  .rud-offer__group span {
    padding-inline: 10px;
  }
  .rud-offer__group i {
    width: 22px;
  }
  .rud-offer__track {
    animation-duration: 34s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rud-offer__track,
  .rud-national__shine {
    animation: none !important;
  }
}
.roadplus-new,
.roadplus-new * {
  box-sizing: border-box;
  letter-spacing: 0;
}
.roadplus-new {
  --turquoise: #00c0c5;
  --green: #5ef26a;
  --mint: #51fbae;
  --petrol: #00382c;
  --charcoal: #657b7d;
  --silver: #c0c1c1;
  --white: #eff0ee;
  --dark: #0c121c;
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 42px 10px;
  color: var(--white);
  background: transparent;
  direction: rtl;
  text-align: center;
}
.roadplus-new::before {
  content: "";
  position: absolute;
  top: 90px;
  right: 50%;
  width: 650px;
  height: 450px;
  transform: translateX(50%);
  border-radius: 50%;
  background: rgba(0, 192, 197, 0.06);
  filter: blur(100px);
  pointer-events: none;
}
.rpn-container {
  width: min(1160px, 100%);
  position: relative;
  margin: auto;
}
.rpn-top-badge {
  width: fit-content;
  margin: 0 auto 10px;
  padding: 7px 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--turquoise);
  border-radius: 50px;
  color: var(--turquoise);
  background: rgba(0, 56, 44, 0.32);
  box-shadow: 0 0 18px rgba(0, 192, 197, 0.13);
  font-size: 12px;
  font-weight: 700;
}
.rpn-top-icon {
  width: 18px;
  height: 18px;
  position: relative;
  border: 1.5px solid var(--turquoise);
  border-radius: 6px;
}
.rpn-top-icon::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 3px;
  width: 8px;
  height: 4px;
  border-bottom: 2px solid var(--turquoise);
  border-left: 2px solid var(--turquoise);
  transform: rotate(-45deg);
}
.rpn-title {
  margin: 0;
  color: var(--white);
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 600;
  line-height: 1.35;
}
.rpn-title span {
  color: var(--turquoise);
}
.rpn-subtitle {
  margin: 8px auto 26px;
  color: var(--silver);
  font-size: clamp(12px, 1.5vw, 16px);
  line-height: 1.8;
}
.rpn-subtitle-dot {
  width: 5px;
  height: 5px;
  margin: 0 9px;
  display: inline-block;
  border-radius: 50%;
  background: var(--turquoise);
  box-shadow: 0 0 7px var(--turquoise);
}
.rpn-stage {
  display: grid;
  grid-template-columns:
    minmax(145px, 0.72fr)
    minmax(460px, 2.5fr)
    minmax(145px, 0.72fr);
  grid-template-areas:
    "activation pass apps"
    "activation pass updates";
  gap: 17px;
  align-items: center;
  direction: ltr;
}
.rpn-stage > * {
  direction: rtl;
}
.rpn-feature {
  min-height: 78px;
  position: relative;
  overflow: hidden;
  padding: 14px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 17px;
  color: var(--white);
  background:
    linear-gradient(145deg, rgba(0, 56, 44, 0.82), rgba(11, 22, 33, 0.97)) padding-box,
    linear-gradient(
        100deg,
        transparent 0%,
        transparent 25%,
        var(--turquoise) 40%,
        var(--mint) 50%,
        var(--green) 58%,
        transparent 72%,
        transparent 100%
      )
      border-box;
  background-size:
    100% 100%,
    320% 100%;
  box-shadow:
    inset 0 1px 0 rgba(239, 240, 238, 0.06),
    0 14px 32px rgba(0, 0, 0, 0.24),
    0 0 15px rgba(0, 192, 197, 0.12);
  font-size: 15px;
  font-weight: 700;
  animation: none;
}
.rpn-activation {
  grid-area: activation;
}
.rpn-apps {
  grid-area: apps;
  animation: none;
}
.rpn-updates {
  grid-area: updates;
  animation: none;
}
.rpn-activation::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -50px;
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, var(--turquoise), transparent);
  box-shadow: 0 0 7px var(--turquoise);
}
.rpn-apps::before,
.rpn-updates::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -50px;
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--turquoise));
  box-shadow: 0 0 7px var(--turquoise);
}
.rpn-feature-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  color: var(--turquoise);
}
.rpn-bolt {
  width: 15px;
  height: 27px;
  display: block;
  background: var(--turquoise);
  clip-path: polygon(48% 0, 100% 0, 69% 38%, 100% 38%, 30% 100%, 45% 55%, 11% 55%);
  filter: drop-shadow(0 0 6px rgba(0, 192, 197, 0.55));
  animation: none;
}
.rpn-app-grid {
  display: grid;
  grid-template-columns: repeat(2, 9px);
  gap: 4px;
  animation: none;
}
.rpn-app-grid span {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--turquoise);
  box-shadow: 0 0 7px rgba(0, 192, 197, 0.45);
}
.rpn-app-grid span:last-child {
  background: var(--mint);
}
.rpn-refresh {
  color: var(--turquoise);
  font:
    700 29px/1 Arial,
    sans-serif;
  text-shadow: 0 0 8px rgba(0, 192, 197, 0.45);
  animation: none;
}
.rpn-pass-frame {
  grid-area: pass;
  position: relative;
  padding: 4px;
  border-radius: 27px;
  background: linear-gradient(145deg, #eff0ee, #657b7d 19%, #eff0ee 40%, #657b7d 64%, #eff0ee);
  box-shadow:
    0 32px 65px rgba(0, 0, 0, 0.4),
    0 0 35px rgba(0, 192, 197, 0.12);
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg);
  animation: none;
}
.rpn-pass-frame::before,
.rpn-pass-frame::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 50%;
  width: 36px;
  height: 70px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--dark);
  box-shadow: 0 0 0 3px rgba(192, 193, 193, 0.75);
}
.rpn-pass-frame::before {
  right: -20px;
}
.rpn-pass-frame::after {
  left: -20px;
}
.rpn-pass {
  min-height: 340px;
  position: relative;
  overflow: hidden;
  padding: 28px 42px;
  border: 1px solid rgba(239, 240, 238, 0.3);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 10%, rgba(239, 240, 238, 0.07), transparent 31%),
    radial-gradient(circle at 80% 70%, rgba(0, 192, 197, 0.08), transparent 34%),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.012) 0,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 7px
    ),
    linear-gradient(150deg, #0c121c, #0c121c 48%, #0c121c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.8);
}
.rpn-pass::before {
  content: "";
  position: absolute;
  inset: 15px;
  border: 1px solid rgba(192, 193, 193, 0.32);
  border-radius: 17px;
  pointer-events: none;
}
.rpn-pass::after {
  content: "";
  position: absolute;
  top: -70%;
  left: -40%;
  width: 45%;
  height: 230%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.055), transparent);
  transform: rotate(18deg);
  animation: none;
}
.rpn-pass-title {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--white);
  font-size: 25px;
  font-weight: 600;
}
.rpn-pass-line {
  width: 180px;
  height: 1px;
  position: relative;
  z-index: 2;
  margin: 9px auto 13px;
  background: linear-gradient(90deg, transparent, var(--turquoise), transparent);
}
.rpn-pass-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 20px;
  align-items: center;
}
.rpn-duration {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rpn-duration-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 9px;
}
.rpn-number {
  color: var(--white);
  font:
    500 clamp(80px, 9vw, 125px)/0.85 Georgia,
    serif;
  text-shadow:
    0 2px 0 #ffffff,
    0 5px 4px rgba(0, 0, 0, 0.7),
    0 0 16px rgba(239, 240, 238, 0.11);
}
.rpn-month {
  padding-bottom: 10px;
  color: var(--silver);
  font-size: 31px;
  font-weight: 700;
}
.rpn-certificate {
  margin-top: 12px;
  color: var(--silver);
  font-size: 13px;
}
.rpn-certificate-dot {
  margin: 0 5px;
  color: var(--turquoise);
}
.rpn-guarantee-frame {
  width: 165px;
  height: 195px;
  position: relative;
  margin: auto;
  padding: 4px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #eff0ee, #657b7d 20%, #eff0ee 45%, #657b7d 68%, #eff0ee);
  clip-path: polygon(50% 0, 92% 17%, 83% 71%, 67% 89%, 50% 100%, 33% 89%, 17% 71%, 8% 17%);
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, 0.75));
}
.rpn-guarantee {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(81, 251, 174, 0.11), transparent 45%),
    linear-gradient(150deg, #0c121c, #021d16);
  clip-path: inherit;
}
.rpn-guarantee-label {
  color: var(--white);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}
.rpn-guarantee-check {
  width: 38px;
  height: 38px;
  position: relative;
  margin-top: 10px;
  border: 2px solid var(--green);
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(94, 242, 106, 0.22);
}
.rpn-guarantee-check::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 7px;
  width: 18px;
  height: 9px;
  border-bottom: 3px solid var(--green);
  border-left: 3px solid var(--green);
  transform: rotate(-45deg);
}
.rpn-difference-title {
  width: fit-content;
  position: relative;
  z-index: 3;
  margin: 24px auto -13px;
  padding: 4px 25px 7px;
  border-radius: 30px;
  color: var(--turquoise);
  background: linear-gradient(135deg, rgba(12, 18, 28, 0.98), rgba(0, 56, 44, 0.98));
  font-size: 16px;
  font-weight: 600;
}
.rpn-comparison {
  min-height: 130px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: stretch;
  border: 1px solid rgba(192, 193, 193, 0.3);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(12, 18, 28, 0.96), rgba(12, 18, 28, 0.97));
  box-shadow: 0 17px 40px rgba(0, 0, 0, 0.24);
}
.rpn-compare-side {
  min-width: 0;
  padding: 24px 15px 15px;
}
.rpn-roadplus {
  background: linear-gradient(130deg, rgba(0, 56, 44, 0.96), rgba(0, 192, 197, 0.12));
}
.rpn-others {
  background: linear-gradient(130deg, rgba(101, 123, 125, 0.18), transparent);
}
.rpn-compare-heading {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
}
.rpn-roadplus .rpn-compare-heading {
  color: var(--turquoise);
}
.rpn-others .rpn-compare-heading {
  color: var(--silver);
}
.rpn-compare-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rpn-compare-item {
  min-width: 0;
  padding: 0 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border-left: 1px solid rgba(192, 193, 193, 0.15);
  color: var(--white);
  font-size: 10px;
  line-height: 1.5;
}
.rpn-compare-item:last-child {
  border-left: 0;
}
.rpn-others .rpn-compare-item {
  color: var(--silver);
}
.rpn-compare-ok,
.rpn-compare-muted {
  width: 27px;
  height: 27px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 9px;
}
.rpn-compare-ok {
  background: rgba(0, 192, 197, 0.12);
}
.rpn-compare-ok::before {
  content: "";
  position: absolute;
  top: 7px;
  right: 6px;
  width: 12px;
  height: 6px;
  border-bottom: 2px solid var(--green);
  border-left: 2px solid var(--green);
  transform: rotate(-45deg);
}
.rpn-compare-muted {
  background: rgba(101, 123, 125, 0.4);
}
.rpn-compare-muted::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 7px;
  width: 13px;
  height: 2px;
  border-radius: 3px;
  background: var(--silver);
}
.rpn-vs {
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 3;
  align-self: center;
  display: grid;
  place-items: center;
  border: 1px solid rgba(192, 193, 193, 0.42);
  border-radius: 50%;
  color: var(--silver);
  background: #0c121c;
  box-shadow: 0 0 0 5px rgba(12, 18, 28, 0.9);
  font:
    700 11px/1 Arial,
    sans-serif;
}
.rpn-action {
  margin-top: 20px;
}
.rpn-button {
  width: min(350px, 88%);
  min-height: 55px;
  padding: 14px 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 2px solid rgba(239, 240, 238, 0.65);
  border-radius: 15px;
  color: var(--petrol) !important;
  background: linear-gradient(135deg, var(--mint), var(--green));
  box-shadow:
    0 0 0 3px rgba(81, 251, 174, 0.07),
    0 15px 35px rgba(81, 251, 174, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.rpn-button:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 4px rgba(81, 251, 174, 0.1),
    0 20px 42px rgba(81, 251, 174, 0.31),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.rpn-button-check {
  width: 25px;
  height: 25px;
  position: relative;
  flex: 0 0 25px;
  border: 2px solid var(--petrol);
  border-radius: 50%;
}
.rpn-button-check::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 5px;
  width: 11px;
  height: 6px;
  border-bottom: 2px solid var(--petrol);
  border-left: 2px solid var(--petrol);
  transform: rotate(-45deg);
}
.rpn-terms {
  margin: 8px 0 0;
  color: var(--silver);
  font-size: 9px;
}
@media (max-width: 760px) {
  .roadplus-new {
    padding: 28px 5px;
  }
  .rpn-top-badge {
    margin-bottom: 7px;
    padding: 5px 10px;
    font-size: 9px;
  }
  .rpn-title {
    font-size: 25px;
  }
  .rpn-subtitle {
    margin: 6px auto 18px;
    padding: 0 5px;
    font-size: 9px;
  }
  .rpn-subtitle-dot {
    width: 4px;
    height: 4px;
    margin: 0 5px;
  }
  .rpn-stage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "pass pass pass"
      "activation apps updates";
    gap: 8px;
  }
  .rpn-pass-frame {
    margin: 0 5px 9px;
    border-radius: 18px;
    transform: perspective(1000px) rotateX(1deg);
  }
  .rpn-pass-frame::before,
  .rpn-pass-frame::after {
    width: 24px;
    height: 46px;
  }
  .rpn-pass-frame::before {
    right: -14px;
  }
  .rpn-pass-frame::after {
    left: -14px;
  }
  .rpn-pass {
    min-height: 220px;
    padding: 20px 25px;
    border-radius: 15px;
  }
  .rpn-pass::before {
    inset: 9px;
    border-radius: 11px;
  }
  .rpn-pass-title {
    font-size: 17px;
  }
  .rpn-pass-line {
    width: 120px;
    margin: 6px auto 8px;
  }
  .rpn-pass-content {
    gap: 8px;
  }
  .rpn-duration-row {
    gap: 5px;
  }
  .rpn-number {
    font-size: clamp(62px, 20vw, 93px);
  }
  .rpn-month {
    padding-bottom: 7px;
    font-size: 21px;
  }
  .rpn-certificate {
    margin-top: 8px;
    font-size: 9px;
  }
  .rpn-guarantee-frame {
    width: 105px;
    height: 125px;
  }
  .rpn-guarantee-label {
    font-size: 11px;
  }
  .rpn-guarantee-check {
    width: 27px;
    height: 27px;
    margin-top: 6px;
    border-radius: 8px;
  }
  .rpn-guarantee-check::before {
    top: 7px;
    right: 5px;
    width: 13px;
    height: 6px;
    border-width: 2px;
  }
  .rpn-feature {
    min-height: 66px;
    padding: 8px 2px;
    flex-direction: column;
    gap: 4px;
    border-radius: 12px;
    font-size: 9px;
    line-height: 1.35;
  }
  .rpn-feature-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }
  .rpn-bolt {
    width: 12px;
    height: 22px;
  }
  .rpn-app-grid {
    grid-template-columns: repeat(2, 7px);
    gap: 3px;
  }
  .rpn-app-grid span {
    width: 7px;
    height: 7px;
    border-radius: 2px;
  }
  .rpn-refresh {
    font-size: 21px;
  }
  .rpn-activation::after,
  .rpn-apps::before,
  .rpn-updates::before {
    display: none;
  }
  .rpn-difference-title {
    margin-top: 18px;
    padding: 3px 17px 6px;
    font-size: 12px;
  }
  .rpn-comparison {
    min-height: 114px;
    grid-template-columns: 1fr 34px 1fr;
    border-radius: 14px;
  }
  .rpn-compare-side {
    padding: 19px 4px 10px;
  }
  .rpn-compare-heading {
    margin-bottom: 8px;
    font-size: 10px;
  }
  .rpn-compare-item {
    padding: 0 2px;
    gap: 4px;
    font-size: 6.5px;
  }
  .rpn-compare-ok,
  .rpn-compare-muted {
    width: 21px;
    height: 21px;
    border-radius: 6px;
  }
  .rpn-compare-ok::before {
    top: 6px;
    right: 5px;
    width: 9px;
    height: 4px;
  }
  .rpn-compare-muted::before {
    top: 9px;
    right: 5px;
    width: 10px;
  }
  .rpn-vs {
    width: 34px;
    height: 34px;
    box-shadow: 0 0 0 3px rgba(12, 18, 28, 0.9);
    font-size: 8px;
  }
  .rpn-action {
    margin-top: 16px;
  }
  .rpn-button {
    min-height: 49px;
    font-size: 14px;
  }
  .rpn-terms {
    padding: 0 10px;
    font-size: 7px;
  }
}
@media (max-width: 360px) {
  .rpn-title {
    font-size: 22px;
  }
  .rpn-pass {
    min-height: 200px;
    padding: 17px 20px;
  }
  .rpn-number {
    font-size: 63px;
  }
  .rpn-month {
    font-size: 17px;
  }
  .rpn-guarantee-frame {
    width: 88px;
    height: 105px;
  }
  .rpn-guarantee-label {
    font-size: 9px;
  }
  .rpn-feature {
    font-size: 8px;
  }
  .rpn-compare-item {
    font-size: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .roadplus-new *,
  .roadplus-new *::before,
  .roadplus-new *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.cx-sections,
.cx-sections * {
  box-sizing: border-box;
}
.cx-sections {
  --gradient: linear-gradient(135deg, #00c0c5 0%, #51fbae 55%, #5ef26a 100%);
  --dark: #073f43;
  --gray: #657b7d;
  width: 100%;
  max-width: 1050px;
  margin: auto;
  padding: 22px 10px;
  direction: rtl;
  color: var(--dark);
  background: transparent;
  font-family: var(--rud-font);
}
.cx-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 24px;
  padding: 0 14px;
}
.cx-header small {
  display: block;
  margin-bottom: 5px;
  color: #00aeb3;
  font-size: 13px;
  font-weight: 700;
}
.cx-header h2 {
  margin: 0;
  color: var(--dark);
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1.2;
}
.cx-decoration {
  display: flex;
  gap: 7px;
  margin-top: 13px;
}
.cx-decoration i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--gradient);
  transform: rotate(45deg);
}
.cx-decoration i:nth-child(2) {
  opacity: 0.7;
}
.cx-decoration i:nth-child(3) {
  opacity: 0.45;
}
.cx-decoration i:nth-child(4) {
  opacity: 0.25;
}
.cx-logo {
  display: grid;
  flex: 0 0 auto;
  width: 85px;
  height: 85px;
  place-items: center;
  border-radius: 27px;
  color: white;
  background: var(--gradient);
  box-shadow: 0 18px 38px rgba(7, 63, 67, 0.18);
  font-size: 48px;
}
.cx-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.cx-card {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 390px;
  overflow: hidden;
  padding: 23px 27px 28px;
  border: 2px solid transparent;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 20px 45px rgba(7, 63, 67, 0.14);
}
.cx-card-green {
  color: white;
  background: var(--gradient);
}
.cx-card-green::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(7, 63, 67, 0.24), transparent 55%);
}
.cx-card-light {
  color: var(--dark);
  background:
    linear-gradient(rgba(255, 255, 255, 0.96), rgba(201, 255, 233, 0.96)) padding-box,
    var(--gradient) border-box;
}
.cx-card:nth-child(1) {
  border-radius: 62px 27px 88px 31px;
}
.cx-card:nth-child(2) {
  border-radius: 31px 68px 31px 88px;
}
.cx-card:nth-child(3) {
  border-radius: 37px 88px 52px 31px;
}
.cx-card:nth-child(4) {
  border-radius: 88px 31px 68px 37px;
}
.cx-content {
  position: relative;
  z-index: 2;
}
.cx-top {
  display: flex;
  min-height: 215px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cx-art {
  position: relative;
  width: 175px;
  height: 175px;
  flex: 0 1 175px;
}
.cx-arrow {
  display: grid;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 25px;
}
.cx-card-green .cx-arrow {
  color: white;
  background: rgba(7, 63, 67, 0.12);
}
.cx-card-light .cx-arrow {
  color: #00aeb3;
  background: #c9ffe9;
}
.cx-card h3 {
  margin: 5px 0 11px;
  color: inherit;
  font-size: clamp(27px, 4vw, 40px);
  line-height: 1.25;
}
.cx-card p {
  margin: 0;
  color: var(--gray);
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 600;
  line-height: 1.8;
}
.cx-card-green p {
  color: rgba(255, 255, 255, 0.9);
}
.cx-phone-bg {
  position: absolute;
  inset: 8px;
  border-radius: 42px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 38px rgba(7, 63, 67, 0.2);
}
.cx-phone {
  position: absolute;
  top: 14px;
  left: 47px;
  width: 82px;
  height: 142px;
  padding: 22px 9px 9px;
  border: 5px solid var(--dark);
  border-radius: 22px;
  background: white;
  transform: rotate(8deg);
}
.cx-phone::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 27px;
  height: 5px;
  border-radius: 10px;
  background: var(--dark);
  transform: translateX(-50%);
}
.cx-phone-apps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}
.cx-phone-apps i {
  display: block;
  aspect-ratio: 1;
  border-radius: 7px;
  background: var(--gradient);
}
.cx-phone-plus {
  position: absolute;
  right: -24px;
  bottom: 19px;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 17px;
  color: #00aeb3;
  background: white;
  box-shadow: 0 13px 25px rgba(7, 63, 67, 0.22);
  font-size: 39px;
  font-weight: 700;
}
.cx-snap-logo {
  position: absolute;
  inset: 8px;
  border: 5px solid rgba(255, 255, 255, 0.7);
  border-radius: 42px;
  background: var(--gradient);
  box-shadow:
    0 20px 38px rgba(7, 63, 67, 0.2),
    inset 0 0 0 5px rgba(7, 63, 67, 0.1);
}
.cx-ghost {
  position: absolute;
  top: 38px;
  left: 47px;
  width: 75px;
  height: 90px;
  border: 4px solid var(--dark);
  border-radius: 48% 48% 30% 30%;
  background: white;
  box-shadow: 0 12px 18px rgba(7, 63, 67, 0.18);
}
.cx-ghost::before,
.cx-ghost::after {
  content: "";
  position: absolute;
  bottom: -12px;
  width: 31px;
  height: 27px;
  border-bottom: 4px solid var(--dark);
  background: white;
}
.cx-ghost::before {
  left: -3px;
  border-left: 4px solid var(--dark);
  border-radius: 0 0 0 20px;
  transform: rotate(-15deg);
}
.cx-ghost::after {
  right: -3px;
  border-right: 4px solid var(--dark);
  border-radius: 0 0 20px 0;
  transform: rotate(15deg);
}
.cx-snap-plus {
  position: absolute;
  top: 13px;
  right: 19px;
  color: white;
  font-size: 45px;
  font-weight: 700;
}
.cx-soldier {
  position: absolute;
  top: 20px;
  right: 35px;
  width: 85px;
  height: 110px;
}
.cx-helmet {
  position: absolute;
  top: 0;
  right: 12px;
  width: 62px;
  height: 54px;
  border-radius: 50% 50% 30% 30%;
  background: linear-gradient(145deg, #073f43, #073f43);
  box-shadow: 0 10px 18px rgba(7, 63, 67, 0.2);
}
.cx-helmet::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: 8px;
  width: 55px;
  height: 15px;
  border-radius: 10px;
  background: #073f43;
  transform: rotate(-5deg);
}
.cx-body {
  position: absolute;
  right: 18px;
  bottom: 0;
  width: 52px;
  height: 66px;
  border-radius: 15px 15px 8px 8px;
  background: linear-gradient(145deg, #073f43, #073f43);
}
.cx-gun {
  position: absolute;
  right: -10px;
  bottom: 27px;
  width: 98px;
  height: 9px;
  border-radius: 8px;
  background: #073f43;
  transform: rotate(-25deg);
}
.cx-pubg {
  position: absolute;
  top: 84px;
  right: 40px;
  z-index: 2;
  padding: 4px 7px;
  border: 2px solid white;
  border-radius: 5px;
  color: white;
  background: var(--dark);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
}
.cx-ball {
  position: absolute;
  display: grid;
  place-items: center;
  border: 4px solid white;
  border-radius: 50%;
  color: white;
  box-shadow: 0 10px 18px rgba(7, 63, 67, 0.2);
  font-weight: 600;
}
.cx-ball-eight {
  bottom: 8px;
  left: 7px;
  width: 58px;
  height: 58px;
  background: #0b1621;
}
.cx-ball-three {
  right: 5px;
  bottom: 5px;
  width: 43px;
  height: 43px;
  background: #00aeb3;
  font-size: 13px;
}
.cx-ball-five {
  right: 43px;
  bottom: -3px;
  width: 40px;
  height: 40px;
  background: #51fbae;
  font-size: 12px;
}
.cx-cue {
  position: absolute;
  top: 16px;
  left: 26px;
  width: 6px;
  height: 135px;
  border-radius: 10px;
  background: linear-gradient(#51fbae, #51fbae);
  transform: rotate(31deg);
}
.cx-box-body {
  position: absolute;
  right: 25px;
  bottom: 8px;
  width: 125px;
  height: 82px;
  border-radius: 7px 7px 18px 18px;
  background: linear-gradient(135deg, #fff, #c9ffe9);
  box-shadow: 0 18px 28px rgba(7, 63, 67, 0.2);
}
.cx-box-body::before {
  content: "+";
  position: absolute;
  top: 12px;
  left: 50%;
  color: #00aeb3;
  font-size: 40px;
  font-weight: 700;
  transform: translateX(-50%);
}
.cx-box-lid {
  position: absolute;
  z-index: 3;
  right: 16px;
  bottom: 80px;
  width: 143px;
  height: 29px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff, #c9ffe9);
  box-shadow: 0 9px 16px rgba(7, 63, 67, 0.18);
  transform: rotate(-3deg);
}
.cx-package-item {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  color: #00aeb3;
  background: white;
  box-shadow: 0 10px 18px rgba(7, 63, 67, 0.2);
  font-weight: 600;
}
.cx-package-phone {
  top: 5px;
  right: 58px;
  width: 51px;
  height: 83px;
  font-size: 26px;
  transform: rotate(7deg);
}
.cx-package-one {
  top: 31px;
  right: 18px;
  width: 43px;
  height: 43px;
  font-size: 25px;
  transform: rotate(-11deg);
}
.cx-package-two {
  top: 28px;
  left: 19px;
  width: 43px;
  height: 43px;
  font-size: 17px;
  transform: rotate(13deg);
}
@media (max-width: 600px) {
  .cx-sections {
    padding: 13px 4px;
  }
  .cx-header {
    align-items: flex-end;
    gap: 7px;
    margin-bottom: 16px;
    padding: 0 3px;
  }
  .cx-header small {
    font-size: 9px;
  }
  .cx-header h2 {
    font-size: clamp(25px, 8vw, 37px);
  }
  .cx-logo {
    width: 55px;
    height: 55px;
    border-radius: 17px;
    font-size: 32px;
  }
  .cx-decoration {
    margin-top: 8px;
  }
  .cx-decoration i {
    width: 7px;
    height: 7px;
  }
  .cx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .cx-card {
    min-height: 270px;
    padding: 9px 8px 14px;
    box-shadow: 0 10px 25px rgba(7, 63, 67, 0.12);
  }
  .cx-card:nth-child(1) {
    border-radius: 28px 13px 40px 15px;
  }
  .cx-card:nth-child(2) {
    border-radius: 15px 30px 15px 40px;
  }
  .cx-card:nth-child(3) {
    border-radius: 16px 40px 28px 14px;
  }
  .cx-card:nth-child(4) {
    border-radius: 40px 14px 30px 16px;
  }
  .cx-top {
    min-height: 148px;
    gap: 2px;
  }
  .cx-art {
    width: 103px;
    height: 115px;
    flex-basis: 103px;
  }
  .cx-arrow {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  .cx-card h3 {
    margin: 3px 0 6px;
    font-size: clamp(17px, 5vw, 21px);
    white-space: nowrap;
  }
  .cx-card p {
    font-size: clamp(9px, 2.8vw, 12px);
    line-height: 1.7;
  }
  .cx-phone-bg,
  .cx-snap-logo {
    inset: 7px;
    border-radius: 25px;
  }
  .cx-phone {
    top: 10px;
    left: 29px;
    width: 49px;
    height: 87px;
    padding: 15px 6px 6px;
    border-width: 3px;
    border-radius: 14px;
  }
  .cx-phone::before {
    top: 5px;
    width: 17px;
    height: 3px;
  }
  .cx-phone-apps {
    gap: 4px;
  }
  .cx-phone-apps i {
    border-radius: 4px;
  }
  .cx-phone-plus {
    right: -13px;
    bottom: 9px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 24px;
  }
  .cx-ghost {
    top: 31px;
    left: 30px;
    width: 45px;
    height: 53px;
    border-width: 3px;
  }
  .cx-ghost::before,
  .cx-ghost::after {
    bottom: -8px;
    width: 20px;
    height: 18px;
    border-bottom-width: 3px;
  }
  .cx-ghost::before {
    border-left-width: 3px;
  }
  .cx-ghost::after {
    border-right-width: 3px;
  }
  .cx-snap-plus {
    top: 9px;
    right: 12px;
    font-size: 29px;
  }
  .cx-soldier {
    top: 14px;
    right: 19px;
    width: 58px;
    height: 75px;
  }
  .cx-helmet {
    right: 9px;
    width: 43px;
    height: 37px;
  }
  .cx-helmet::after {
    width: 39px;
    height: 10px;
  }
  .cx-body {
    right: 13px;
    width: 35px;
    height: 45px;
  }
  .cx-gun {
    right: -6px;
    bottom: 18px;
    width: 65px;
    height: 6px;
  }
  .cx-pubg {
    top: 58px;
    right: 24px;
    padding: 2px 4px;
    font-size: 6px;
  }
  .cx-ball-eight {
    bottom: 4px;
    left: 1px;
    width: 38px;
    height: 38px;
    border-width: 3px;
    font-size: 12px;
  }
  .cx-ball-three {
    right: 0;
    bottom: 4px;
    width: 28px;
    height: 28px;
    border-width: 2px;
    font-size: 8px;
  }
  .cx-ball-five {
    right: 28px;
    bottom: -1px;
    width: 27px;
    height: 27px;
    border-width: 2px;
    font-size: 8px;
  }
  .cx-cue {
    top: 13px;
    left: 17px;
    width: 4px;
    height: 87px;
  }
  .cx-box-body {
    right: 13px;
    bottom: 5px;
    width: 78px;
    height: 52px;
    border-radius: 5px 5px 12px 12px;
  }
  .cx-box-body::before {
    top: 7px;
    font-size: 27px;
  }
  .cx-box-lid {
    right: 8px;
    bottom: 49px;
    width: 90px;
    height: 20px;
  }
  .cx-package-phone {
    top: 5px;
    right: 35px;
    width: 34px;
    height: 55px;
    border-width: 2px;
    border-radius: 8px;
    font-size: 18px;
  }
  .cx-package-one {
    top: 28px;
    right: 7px;
    width: 29px;
    height: 29px;
    border-width: 2px;
    font-size: 18px;
  }
  .cx-package-two {
    top: 25px;
    left: 5px;
    width: 29px;
    height: 29px;
    border-width: 2px;
    font-size: 11px;
  }
}
.ru-cat,
.ru-cat * {
  box-sizing: border-box;
}
.ru-cat {
  --g: linear-gradient(135deg, #00c0c5 0%, #51fbae 55%, #5ef26a 100%);
  --dark: #073f43;
  --muted: #657b7d;
  width: 100%;
  max-width: 1050px;
  margin: auto;
  padding: 22px 10px;
  direction: rtl;
  color: var(--dark);
  background: transparent;
  font-family: var(--rud-font);
}
.ru-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 24px;
  padding: 0 14px;
}
.ru-head small {
  display: block;
  margin-bottom: 5px;
  color: #51fbae;
  font-weight: 700;
}
.ru-head h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1.2;
}
.ru-dots {
  display: flex;
  gap: 7px;
  margin-top: 13px;
}
.ru-dots i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--g);
  transform: rotate(45deg);
}
.ru-dots i:nth-child(2) {
  opacity: 0.7;
}
.ru-dots i:nth-child(3) {
  opacity: 0.45;
}
.ru-dots i:nth-child(4) {
  opacity: 0.25;
}
.ru-logo {
  display: grid;
  flex: 0 0 auto;
  width: 85px;
  height: 85px;
  place-items: center;
  border-radius: 27px;
  color: #fff;
  background: var(--g);
  box-shadow: 0 18px 38px rgba(7, 63, 67, 0.18);
  font-size: 48px;
}
.ru-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ru-card {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 390px;
  overflow: hidden;
  padding: 22px 26px 28px;
  border: 2px solid transparent;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 20px 45px rgba(7, 63, 67, 0.14);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}
.ru-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 65px rgba(7, 63, 67, 0.22);
}
.ru-green {
  color: #fff;
  background: var(--g);
}
.ru-green:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(7, 63, 67, 0.22), transparent 55%);
}
.ru-light {
  color: var(--dark);
  background:
    linear-gradient(rgba(255, 255, 255, 0.97), rgba(201, 255, 233, 0.97)) padding-box,
    var(--g) border-box;
}
.ru-card:nth-child(1) {
  border-radius: 62px 27px 88px 31px;
}
.ru-card:nth-child(2) {
  border-radius: 31px 68px 31px 88px;
}
.ru-card:nth-child(3) {
  border-radius: 37px 88px 52px 31px;
}
.ru-card:nth-child(4) {
  border-radius: 88px 31px 68px 37px;
}
.ru-in {
  position: relative;
  z-index: 2;
}
.ru-top {
  display: flex;
  min-height: 220px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ru-img {
  display: block;
  width: min(245px, 72%);
  height: 215px;
  object-fit: contain;
  filter: drop-shadow(0 17px 16px rgba(7, 63, 67, 0.18));
}
.ru-arrow {
  display: grid;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 25px;
}
.ru-light .ru-arrow {
  color: #00aeb3;
  background: #c9ffe9;
}
.ru-green .ru-arrow {
  color: #fff;
  background: rgba(7, 63, 67, 0.12);
}
.ru-card h3 {
  margin: 5px 0 11px;
  color: inherit;
  font-size: clamp(27px, 4vw, 40px);
  line-height: 1.25;
}
.ru-card p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 600;
  line-height: 1.8;
}
.ru-green p {
  color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 600px) {
  .ru-cat {
    padding: 13px 4px;
  }
  .ru-head {
    align-items: flex-end;
    gap: 7px;
    margin-bottom: 16px;
    padding: 0 3px;
  }
  .ru-head small {
    font-size: 9px;
  }
  .ru-head h2 {
    font-size: clamp(25px, 8vw, 37px);
  }
  .ru-logo {
    width: 55px;
    height: 55px;
    border-radius: 17px;
    font-size: 32px;
  }
  .ru-dots {
    margin-top: 8px;
  }
  .ru-dots i {
    width: 7px;
    height: 7px;
  }
  .ru-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .ru-card {
    min-height: 270px;
    padding: 9px 8px 14px;
    box-shadow: 0 10px 25px rgba(7, 63, 67, 0.12);
  }
  .ru-card:nth-child(1) {
    border-radius: 28px 13px 40px 15px;
  }
  .ru-card:nth-child(2) {
    border-radius: 15px 30px 15px 40px;
  }
  .ru-card:nth-child(3) {
    border-radius: 16px 40px 28px 14px;
  }
  .ru-card:nth-child(4) {
    border-radius: 40px 14px 30px 16px;
  }
  .ru-top {
    min-height: 150px;
    gap: 2px;
  }
  .ru-img {
    width: min(112px, 72%);
    height: 125px;
  }
  .ru-arrow {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  .ru-card h3 {
    margin: 3px 0 6px;
    font-size: clamp(17px, 5vw, 21px);
    white-space: nowrap;
  }
  .ru-card p {
    font-size: clamp(9px, 2.8vw, 12px);
    line-height: 1.65;
  }
}
body.product-index .nav-header {
  margin: 0 auto 24px !important;
  padding: 18px 14px 20px !important;
  border: 1.5px solid transparent !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 84% 18%, rgba(0, 192, 197, 0.1), transparent 34%) padding-box,
    linear-gradient(160deg, rgba(11, 22, 33, 0.98), rgba(7, 16, 25, 0.99)) padding-box,
    linear-gradient(90deg, #00757a, #00c0c5 32%, #c9ffe9 52%, #00c0c5 74%, #00757a) border-box !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  overflow: hidden !important;
}
body.product-index .nav-header .nav-title {
  padding: 0 !important;
  margin: 0 0 14px !important;
  background: transparent !important;
}
body.product-index .sub-nav-header {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body.product-index .sub-nav-header .sub-only,
body.product-index .sub-nav-header .sub-cat-slider {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 18px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.product-index .sub-nav-header .sub-cat-icon {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.product-index .sub-nav-header a.sub-categories {
  width: 100% !important;
  min-height: auto !important;
  padding: 3px 0 !important;
  margin: 0 !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  text-align: right !important;
  text-decoration: none !important;
  transform: none !important;
}
body.product-index .sub-nav-header a.sub-categories::before,
body.product-index .sub-nav-header a.sub-categories::after,
body.product-index .sub-nav-header a.sub-categories .icon-wrapper {
  display: none !important;
  content: none !important;
}
body.product-index .sub-nav-header a.sub-categories .sub-title {
  margin: 0 !important;
  color: #ffffff !important;
  font-family: var(--rud-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  text-align: right !important;
  transition:
    color 0.2s ease,
    transform 0.2s ease !important;
}
body.product-index .sub-nav-header a.sub-categories:hover .sub-title,
body.product-index .sub-nav-header a.sub-categories:focus-visible .sub-title {
  color: #51fbae !important;
  transform: translateX(-2px) !important;
}
body.product-index .s-block-testimonials {
  margin-top: 34px !important;
  padding: 38px 10px 44px !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(0, 192, 197, 0.08), transparent 30%),
    linear-gradient(180deg, #0c121c 0%, #0c121c 50%, #0c121c 100%) !important;
  overflow: hidden !important;
  font-family: var(--rud-font) !important;
}
body.product-index #testimonials-slider,
body.product-index .testimonials-slider {
  overflow: visible !important;
}
body.product-index #testimonials-slider .s-slider-wrapper,
body.product-index .testimonials-slider .s-slider-wrapper {
  align-items: stretch !important;
  gap: 14px !important;
}
body.product-index #testimonials-slider .swiper-slide,
body.product-index .testimonials-slider .swiper-slide {
  height: auto !important;
  padding: 12px 4px 18px !important;
}
body.product-index #testimonials-slider .swiper-slide > *,
body.product-index .testimonials-slider .swiper-slide > * {
  height: 100% !important;
  min-height: 270px !important;
  padding: 58px 22px 24px !important;
  border-radius: 24px !important;
  position: relative !important;
  overflow: visible !important;
  text-align: center !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(0, 192, 197, 0.11), transparent 34%),
    linear-gradient(155deg, rgba(11, 22, 33, 0.96), rgba(7, 16, 25, 0.98)) !important;
  border: 1px solid rgba(0, 192, 197, 0.34) !important;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.3),
    0 0 18px rgba(0, 192, 197, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
body.product-index #testimonials-slider .swiper-slide > *::before,
body.product-index .testimonials-slider .swiper-slide > *::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 18px !important;
  left: 18px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    transparent,
    #00757a,
    #c9ffe9,
    #00c0c5,
    transparent
  ) !important;
  box-shadow: 0 0 12px rgba(0, 192, 197, 0.36) !important;
  pointer-events: none !important;
}
body.product-index #testimonials-slider .swiper-slide > *::after,
body.product-index .testimonials-slider .swiper-slide > *::after {
  content: "“" !important;
  position: absolute !important;
  top: 10px !important;
  inset-inline-start: 18px !important;
  color: rgba(255, 255, 255, 0.12) !important;
  font-family: Arial, sans-serif !important;
  font-size: 62px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  pointer-events: none !important;
}
body.product-index .s-block-testimonials img {
  width: 82px !important;
  height: 82px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 4px solid #ffffff !important;
  box-shadow:
    0 0 0 2px rgba(0, 192, 197, 0.55),
    0 12px 28px rgba(0, 0, 0, 0.3) !important;
}
body.product-index .s-block-testimonials h3,
body.product-index .s-block-testimonials h4,
body.product-index .s-block-testimonials [class*="name"] {
  color: #ffffff !important;
  font-weight: 600 !important;
}
body.product-index .s-block-testimonials p,
body.product-index .s-block-testimonials [class*="content"] {
  color: rgba(255, 255, 255, 0.78) !important;
  line-height: 1.9 !important;
  font-weight: 700 !important;
}
body.product-index .s-block-testimonials .sicon-star2,
body.product-index .s-block-testimonials [class*="star"],
body.product-index .s-block-testimonials svg[class*="star"] {
  color: #51fbae !important;
  fill: #51fbae !important;
}
body.product-index .s-block-testimonials .swiper-scrollbar {
  height: 3px !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
body.product-index .s-block-testimonials .swiper-scrollbar-drag {
  background: linear-gradient(90deg, #00757a, #51fbae) !important;
  border-radius: 999px !important;
}
@media (max-width: 768px) {
  body.product-index .nav-header {
    padding: 16px 14px 18px !important;
    border-radius: 22px !important;
  }
  body.product-index .sub-nav-header .sub-only,
  body.product-index .sub-nav-header .sub-cat-slider {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 16px !important;
  }
  body.product-index .sub-nav-header a.sub-categories .sub-title {
    font-size: 14px !important;
  }
  body.product-index #testimonials-slider .swiper-slide,
  body.product-index .testimonials-slider .swiper-slide {
    width: 84% !important;
  }
}
@media (max-width: 390px) {
  body.product-index .sub-nav-header .sub-only,
  body.product-index .sub-nav-header .sub-cat-slider {
    gap: 7px 12px !important;
  }
  body.product-index .sub-nav-header a.sub-categories .sub-title {
    font-size: 13px !important;
  }
  body.product-index #testimonials-slider .swiper-slide,
  body.product-index .testimonials-slider .swiper-slide {
    width: 88% !important;
  }
}
body.product-index .nav-header {
  width: calc(100% - 24px) !important;
  max-width: none !important;
  align-self: stretch !important;
  margin-inline: 12px !important;
  box-sizing: border-box !important;
}
body.product-index .nav-header > *,
body.product-index .nav-header .nav-title,
body.product-index .nav-header .sub-nav-header {
  width: 100% !important;
  max-width: none !important;
}
@media (max-width: 768px) {
  body.product-index .nav-header {
    width: calc(100% - 20px) !important;
    margin-inline: 10px !important;
  }
}
:root {
  --rud-bg: #0c121c;
  --rud-bg-soft: #0c121c;
  --rud-bg-deep: #071019;
  --rud-card: #0b1621;
  --rud-card-glass: rgba(11, 22, 33, 0.68);
  --rud-brand: #00757a;
  --rud-brand-2: #00c0c5;
  --rud-gold: #51fbae;
  --rud-gold-soft: #5ef26a;
  --rud-white: #ffffff;
  --rud-muted: #c0c1c1;
  --rud-card-radius: 22px;
  --rud-card-border: 1.35px;
  --rud-btn-radius: 14px;
}
section.s-block:not(.s-block--faqs):not(.s-block--testimonials) .s-block__title {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
section.s-block:not(.s-block--faqs):not(.s-block--testimonials) .s-block__title h2,
section.s-block:not(.s-block--faqs):not(.s-block--testimonials) .section-title {
  display: inline-block !important;
  margin-inline: auto !important;
  text-align: center !important;
  font-weight: 600 !important;
  letter-spacing: -0.4px !important;
  line-height: 1.25 !important;
  background-image: linear-gradient(
    90deg,
    #ffffff 0%,
    #7dffc0 25%,
    #ffffff 50%,
    #7dffc0 75%,
    #ffffff 100%
  ) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: none !important;
}
.rtl .s-installment-mispay-content-text,
.rtl .s-installment-madfu-content-text,
.rtl .s-installment-emkan-content-text,
.rtl .s-installment-rajehi-content-text {
  right: 14px !important;
  text-align: right !important;
  margin: 0 0 0 16px !important;
  background-image: linear-gradient(
    90deg,
    #00757a 0%,
    #00c0c5 25%,
    #c9ffe9 50%,
    #00c0c5 75%,
    #00757a 100%
  ) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: none !important;
  font-weight: 700 !important;
}
section#best-offers-2-slider,
section#best-offers-2-slider.s-block,
section#best-offers-2-slider .container,
section#best-offers-2-slider salla-products-slider,
section#best-offers-2-slider salla-products-slider.s-products-slider-wrapper,
salla-products-slider.s-products-slider-wrapper {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
section#best-offers-2-slider::before,
section#best-offers-2-slider::after,
section#best-offers-2-slider .container::before,
section#best-offers-2-slider .container::after,
section#best-offers-2-slider salla-products-slider::before,
section#best-offers-2-slider salla-products-slider::after,
salla-products-slider.s-products-slider-wrapper::before,
salla-products-slider.s-products-slider-wrapper::after {
  content: none !important;
  display: none !important;
}
.s-product-card-entry {
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--rud-card-radius) !important;
  border: 0 !important;
  outline: 0 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 192, 197, 0.07), transparent 36%),
    linear-gradient(180deg, rgba(11, 22, 33, 0.97), rgba(7, 16, 25, 0.96)) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24) !important;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease !important;
}
.s-product-card-entry:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.3),
    0 0 14px rgba(0, 192, 197, 0.11) !important;
}
.s-product-card-entry .s-product-card-vertical,
.s-product-card-entry .s-product-card-bordered,
.s-product-card-entry .s-product-card,
.s-product-card-entry .s-product-card-content,
.s-product-card-entry .s-product-card-image,
.s-product-card-entry .s-product-card-image img {
  border-radius: var(--rud-card-radius) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.s-product-card-entry .s-product-card-vertical::before,
.s-product-card-entry .s-product-card-vertical::after,
.s-product-card-entry .s-product-card-bordered::before,
.s-product-card-entry .s-product-card-bordered::after,
.s-product-card-entry .s-product-card::before,
.s-product-card-entry .s-product-card::after,
.s-product-card-entry .s-product-card-content::before,
.s-product-card-entry .s-product-card-content::after,
.s-product-card-entry .s-product-card-image::before,
.s-product-card-entry .s-product-card-image::after,
.s-product-card-entry::before {
  content: none !important;
  display: none !important;
}
.s-product-card-entry > * {
  position: relative !important;
  z-index: 2 !important;
}
.s-product-card-entry .s-add-to-cart-button,
.s-product-card-entry .s-product-card-entry__button,
.s-product-card-entry .s-button-element,
.s-product-card-entry salla-button .s-button-element,
.s-product-card-entry salla-button button,
.s-product-card-entry button.s-button-element,
.s-product-card-entry button.s-button-primary {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--rud-btn-radius) !important;
  border: 1px solid var(--rud-line) !important;
  background: linear-gradient(115deg, #00757a, #073f43) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease !important;
  cursor: pointer !important;
  animation: none !important;
}
.s-product-card-entry .s-add-to-cart-button *,
.s-product-card-entry .s-product-card-entry__button *,
.s-product-card-entry .s-button-element *,
.s-product-card-entry salla-button .s-button-element *,
.s-product-card-entry salla-button button *,
.s-product-card-entry button.s-button-element *,
.s-product-card-entry button.s-button-primary * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  position: relative !important;
  z-index: 2 !important;
}
.s-product-card-entry .s-add-to-cart-button:hover,
.s-product-card-entry .s-product-card-entry__button:hover,
.s-product-card-entry .s-button-element:hover,
.s-product-card-entry salla-button .s-button-element:hover,
.s-product-card-entry salla-button button:hover,
.s-product-card-entry button.s-button-element:hover,
.s-product-card-entry button.s-button-primary:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: none !important;
  filter: brightness(1.055) saturate(1.04) !important;
}
.s-product-card-entry .s-add-to-cart-button:active,
.s-product-card-entry .s-product-card-entry__button:active,
.s-product-card-entry .s-button-element:active,
.s-product-card-entry salla-button .s-button-element:active,
.s-product-card-entry salla-button button:active,
.s-product-card-entry button.s-button-element:active,
.s-product-card-entry button.s-button-primary:active {
  transform: scale(0.97) !important;
}
main .product-single .s-add-to-cart-button,
main .product-single .s-button-primary,
main .product-single .s-button-element,
.product-single .s-add-to-cart-button,
.product-single .s-button-primary,
.product-single .s-button-element,
.is-sticky-product-bar .s-add-to-cart-button,
.is-sticky-product-bar .s-button-primary,
.is-sticky-product-bar .s-button-element,
.sticky-product-bar .s-add-to-cart-button,
.sticky-product-bar .s-button-primary,
.sticky-product-bar .s-button-element {
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--rud-btn-radius) !important;
  border: 1px solid var(--rud-line) !important;
  background: linear-gradient(115deg, #00757a, #073f43) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  animation: none !important;
}
main .product-single .s-buy-now-button,
main .product-single .s-button-outline,
.product-single .s-buy-now-button,
.product-single .s-button-outline,
.is-sticky-product-bar .s-buy-now-button,
.is-sticky-product-bar .s-button-outline,
.sticky-product-bar .s-buy-now-button,
.sticky-product-bar .s-button-outline {
  border: 1px solid var(--rud-line) !important;
  color: #00c0c5 !important;
  -webkit-text-fill-color: #00c0c5 !important;
  background: rgba(0, 117, 122, 0.05) !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
}
input#copydiscountCode {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  min-height: 52px !important;
  background: linear-gradient(135deg, #00382c, #00757a 58%, #00c0c5) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(94, 242, 106, 0.66) !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  box-shadow:
    0 0 30px rgba(0, 117, 122, 0.25),
    0 0 14px rgba(81, 251, 174, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  cursor: pointer !important;
}
input#copydiscountCode[disabled],
input#copydiscountCode:disabled {
  opacity: 1 !important;
}
salla-gifting,
.salla-gifting,
.salla-gifting.mt-5,
.salla-gifting.hydrated {
  position: relative !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 18px 0 !important;
  padding: 24px 20px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 86% 16%, rgba(0, 192, 197, 0.11), transparent 34%),
    radial-gradient(circle at 14% 86%, rgba(0, 117, 122, 0.07), transparent 32%),
    linear-gradient(135deg, rgba(0, 117, 122, 0.08), rgba(81, 251, 174, 0.06)),
    rgba(11, 22, 33, 0.48) !important;
  border: 1px solid rgba(0, 192, 197, 0.24) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
salla-gifting::before,
.salla-gifting::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.028) 42%,
    transparent 68%
  ) !important;
}
salla-gifting > *,
.salla-gifting > * {
  position: relative !important;
  z-index: 2 !important;
}
salla-gifting h1,
salla-gifting h2,
salla-gifting h3,
salla-gifting .title,
.salla-gifting h1,
.salla-gifting h2,
.salla-gifting h3,
.salla-gifting .title {
  color: #51fbae !important;
  font-weight: 600 !important;
}
salla-gifting p,
salla-gifting span,
.salla-gifting p,
.salla-gifting span {
  color: #eff0ee !important;
}
salla-gifting button,
salla-gifting .btn,
salla-gifting a,
.salla-gifting button,
.salla-gifting .btn,
.salla-gifting a {
  border-radius: 15px !important;
  border: 1px solid rgba(0, 192, 197, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(0, 117, 122, 0.16), rgba(81, 251, 174, 0.1)),
    rgba(255, 255, 255, 0.025) !important;
  color: #ffffff !important;
}
salla-conditional-offer.s-conditional-offer-container,
salla-conditional-offer.hydrated.s-conditional-offer-container {
  direction: rtl !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 22px auto !important;
  padding: 30px 34px 34px !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 90% 8%, rgba(0, 192, 197, 0.13), transparent 34%),
    radial-gradient(circle at 12% 100%, rgba(0, 117, 122, 0.11), transparent 40%),
    linear-gradient(135deg, #0b1621 0%, #0b1621 52%, #0c121c 100%) !important;
  border: 1px solid rgba(0, 192, 197, 0.22) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  color: #ffffff !important;
}
.s-conditional-offer-title-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto 24px !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(0, 117, 122, 0.18), rgba(81, 251, 174, 0.1)),
    rgba(11, 22, 33, 0.52) !important;
  border: 1px solid rgba(0, 192, 197, 0.22) !important;
  text-align: center !important;
}
.s-conditional-offer-title-wrapper,
.s-conditional-offer-title-wrapper * {
  color: #ffffff !important;
  font-size: 21px !important;
  font-weight: 600 !important;
}
.s-conditional-offer-progress-container {
  position: relative !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 38px 34px 42px !important;
  min-height: 132px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(81, 251, 174, 0.13), transparent 38%),
    radial-gradient(circle at 88% 18%, rgba(0, 117, 122, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(11, 22, 33, 0.78), rgba(11, 22, 33, 0.72)) !important;
  border: 1px solid rgba(0, 192, 197, 0.26) !important;
  overflow: hidden !important;
}
.s-conditional-offer-progress-container hr,
.s-conditional-offer-progress-container [class*="line"],
.s-conditional-offer-progress-container [class*="bar"] {
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #00757a, #00c0c5, #51fbae) !important;
  border-color: rgba(0, 192, 197, 0.45) !important;
}
.s-conditional-offer-progress-container [class*="circle"],
.s-conditional-offer-progress-container [class*="step"],
.s-conditional-offer-progress-container [class*="discount"],
.s-conditional-offer-progress-container [class*="percent"],
.s-conditional-offer-progress-container [class*="percentage"] {
  position: relative !important;
  z-index: 5 !important;
  background: linear-gradient(135deg, rgba(7, 16, 25, 0.98), rgba(11, 22, 33, 0.98)) !important;
  border: 1px solid rgba(81, 251, 174, 0.62) !important;
  color: #51fbae !important;
  box-shadow:
    0 0 0 6px rgba(11, 22, 33, 0.92),
    0 0 0 7px rgba(0, 192, 197, 0.16),
    0 0 14px rgba(0, 117, 122, 0.16) !important;
}
.product__description strong {
  background: linear-gradient(90deg, #00c0c5 0%, #5ef26a 55%, #c9ffe9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 600 !important;
}
s-cashback-banner-value {
  padding-inline-start: 0 !important;
  margin-inline-start: 2px !important;
  border-inline-start: 0 !important;
}
salla-cashback-banner .s-cashback-banner-container {
  background: rgba(11, 22, 33, 0.74) !important;
  border: 1px solid rgba(0, 192, 197, 0.24) !important;
  border-radius: 16px !important;
}
salla-cashback-banner .s-cashback-banner-container p,
salla-cashback-banner .s-cashback-banner-label {
  color: rgba(255, 255, 255, 0.9) !important;
}
salla-cashback-banner .s-cashback-banner-value {
  color: #51fbae !important;
  font-weight: 600 !important;
}
salla-cashback-banner .s-cashback-banner-icon {
  background: linear-gradient(135deg, #00382c, #00757a, #00c0c5) !important;
}
.content.content--single-page.opt-text.da-bgg {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  padding: 34px 28px !important;
  background:
    radial-gradient(circle at 80% 10%, rgba(81, 251, 174, 0.12), transparent 34%),
    radial-gradient(circle at 15% 85%, rgba(0, 117, 122, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(11, 22, 33, 0.78), rgba(12, 18, 28, 0.86)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 24px rgba(0, 117, 122, 0.08) !important;
  backdrop-filter: blur(14px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
}
.content.content--single-page.opt-text.da-bgg::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 24px !important;
  left: 24px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    transparent,
    #00757a,
    #00c0c5,
    #c9ffe9,
    transparent
  ) !important;
  opacity: 0.78 !important;
  z-index: 2 !important;
}
.content.content--single-page.opt-text.da-bgg .content-entry {
  position: relative !important;
  z-index: 3 !important;
}
.content.content--single-page.opt-text.da-bgg .content-entry,
.content.content--single-page.opt-text.da-bgg .content-entry p,
.content.content--single-page.opt-text.da-bgg .content-entry li {
  color: rgba(255, 255, 255, 0.76) !important;
  line-height: 1.95 !important;
}
@media (max-width: 768px) {
  section.s-block:not(.s-block--faqs):not(.s-block--testimonials) .s-block__title h2,
  section.s-block:not(.s-block--faqs):not(.s-block--testimonials) .section-title {
    font-size: 26px !important;
  }
  .s-product-card-entry,
  .s-product-card-entry:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24) !important;
  }
  salla-conditional-offer.s-conditional-offer-container,
  salla-conditional-offer.hydrated.s-conditional-offer-container {
    margin: 18px 12px !important;
    padding: 24px 20px 28px !important;
    border-radius: 22px !important;
  }
  .content.content--single-page.opt-text.da-bgg {
    border-radius: 20px !important;
    padding: 26px 18px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
}
body#app.cart .nav-header,
body.cart .nav-header {
  width: calc(100% - 28px) !important;
  max-width: 1180px !important;
  margin: 18px auto 24px !important;
  padding: 18px 14px 20px !important;
  border: 1.5px solid transparent !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 84% 18%, rgba(0, 192, 197, 0.1), transparent 34%) padding-box,
    linear-gradient(160deg, rgba(11, 22, 33, 0.98), rgba(7, 16, 25, 0.99)) padding-box,
    linear-gradient(90deg, #00757a 0%, #00c0c5 32%, #c9ffe9 52%, #00c0c5 74%, #00757a 100%)
      border-box !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
body#app.cart .nav-header::before,
body#app.cart .nav-header::after,
body.cart .nav-header::before,
body.cart .nav-header::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}
body#app.cart .nav-header .nav-title,
body.cart .nav-header .nav-title {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body#app.cart .nav-header .nav-title h1,
body#app.cart .nav-header .nav-title h2,
body.cart .nav-header .nav-title h1,
body.cart .nav-header .nav-title h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  animation: none !important;
}
body#app.cart .nav-header salla-breadcrumb,
body.cart .nav-header salla-breadcrumb {
  position: relative !important;
  z-index: 2 !important;
}
@media (max-width: 768px) {
  body#app.cart .nav-header,
  body.cart .nav-header {
    width: calc(100% - 18px) !important;
    margin: 14px auto 22px !important;
    padding: 18px 14px 20px !important;
    border-radius: 22px !important;
  }
}
:root {
  --rud-heading-gradient: linear-gradient(
    90deg,
    #00757a 0%,
    #00c0c5 42%,
    #51fbae 72%,
    #00c0c5 100%
  );
}
section#best-offers-2-slider .s-block__title h2,
section#best-offers-2-slider .s-block__title .section-title {
  display: inline-block !important;
  background-image: var(--rud-heading-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 10px rgba(0, 192, 197, 0.09) !important;
}
section#best-offers-2-slider .s-block__title a,
section#best-offers-2-slider .s-block__title a *,
section#best-offers-2-slider .s-block__title [class*="show"],
section#best-offers-2-slider .s-block__title [class*="more"] {
  background-image: var(--rud-heading-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}
section#best-offers-2-slider .s-block__title a::after,
section#best-offers-2-slider .s-block__title [class*="show"]::after,
section#best-offers-2-slider .s-block__title [class*="more"]::after {
  background: var(--rud-heading-gradient) !important;
  border-color: transparent !important;
  box-shadow: 0 0 8px rgba(0, 192, 197, 0.14) !important;
}
#wa-angel.wa-angel {
  background: linear-gradient(135deg, #00382c, #00757a 58%, #00c0c5) !important;
  border: 1px solid rgba(94, 242, 106, 0.65) !important;
  box-shadow:
    0 10px 28px rgba(0, 117, 122, 0.45),
    0 0 18px rgba(0, 192, 197, 0.28) !important;
  animation: none !important;
  transition: transform 0.2s ease !important;
}
#wa-angel.wa-angel:hover {
  transform: translateY(-3px) scale(1.05) !important;
}
#wa-angel.wa-angel i {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
@media (prefers-reduced-motion: reduce) {
  #wa-angel.wa-angel {
    animation: none !important;
  }
}
.cx-sections .cx-header h2,
.ru-cat .ru-head h2 {
  background-image: linear-gradient(
    90deg,
    #ffffff 0%,
    #7dffc0 32%,
    #00c0c5 62%,
    #ffffff 100%
  ) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: none !important;
}
.cx-sections .cx-header small,
.ru-cat .ru-head small {
  color: #51fbae !important;
  letter-spacing: 0.2px !important;
}
:root {
  --rud-font: "PingARLT", "Tajawal", sans-serif;
  --rud-font-occasion: "Cairo", sans-serif;
  --font-main: "PingARLT", "Tajawal", sans-serif;
  --rud-turquoise: #00c0c5;
  --rud-turquoise-dark: #00757a;
  --rud-turquoise-mid: #00aeb3;
  --rud-turquoise-deep: #073f43;
  --rud-mint: #51fbae;
  --rud-mint-light: #7dffc0;
  --rud-mint-pale: #c9ffe9;
  --rud-green: #5cf478;
  --rud-green-design: #5ef26a;
  --rud-green-dark: #36ce52;
  --rud-petrol: #00382c;
  --rud-petrol-deep: #021d16;
  --rud-neon-green: var(--rud-mint);
  --rud-neon-cyan: var(--rud-turquoise);
  --rud-silver: #eff0ee;
  --rud-graphite: #0c121c;
  --rud-accent: var(--rud-neon-cyan);
  --rud-accent-soft: var(--rud-mint-light);
  --rud-neon-gradient: linear-gradient(100deg, var(--rud-neon-green), var(--rud-neon-cyan));
  --rud-neon-duration: 18s;
  --rud-neon-duration-slow: 22s;
  --rud-bg: #071019;
  --rud-bg-soft: #0b1621;
  --rud-bg-deep: #070f17;
  --rud-card: #0c121c;
  --rud-card-glass: rgba(12, 18, 28, 0.74);
  --rud-brand: var(--rud-turquoise-deep);
  --rud-brand-2: var(--rud-turquoise);
  --rud-gold: #e3c77e;
  --rud-gold-soft: #f8ebc0;
  --rud-gold-dark: #b98f3c;
  --rud-gold-warm: #e8c989;
  --rud-gold-deep: #d3a94a;
  --rud-cream: #fbf1d6;
  --rud-white: #ffffff;
  --rud-text-secondary: #eff0ee;
  --rud-muted: #c0c1c1;
  --rud-text-subtle: #657b7d;
  --rud-line: rgba(0, 192, 197, 0.22);
  --rud-line-soft: rgba(239, 240, 238, 0.1);
  --rud-card-radius: 18px;
  --rud-card-border: 1px;
  --rud-btn-radius: 12px;
  --rud-heading-gradient: linear-gradient(90deg, var(--rud-mint-pale), var(--rud-white));
  --rud-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rud-inline-nudge: 4px;
  --rud-inlay:
    repeating-linear-gradient(
      45deg,
      transparent 0 23px,
      rgba(0, 192, 197, 0.11) 23px 24px,
      transparent 24px 48px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 23px,
      rgba(81, 251, 174, 0.07) 23px 24px,
      transparent 24px 48px
    );
}
[dir="rtl"] {
  --rud-inline-nudge: -4px;
}
html {
  min-height: 100%;
  background: transparent !important;
  color-scheme: dark;
}
body {
  min-height: 100vh;
  margin: 0;
  color: #ffffff;
  background-color: #071019 !important;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(0, 108, 53, 0.42), transparent 30%),
    radial-gradient(circle at 88% 72%, rgba(0, 192, 197, 0.14), transparent 28%),
    radial-gradient(circle at 50% 48%, rgba(7, 91, 61, 0.28), transparent 43%),
    linear-gradient(135deg, #071019 0%, #063d2d 48%, #071019 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  font-family: var(--rud-font);
  line-height: 1.8;
}
body::before {
  content: none;
}
body#app
  :is(
    .app-inner,
    .page-wrapper,
    .main-content,
    main,
    section,
    .s-block,
    .s-block__content,
    .container,
    .header-inner,
    .nav-header,
    .rud-national,
    .rud-national__banner,
    .rud-national__note,
    .roadplus-new,
    .cx-sections,
    .ru-cat,
    .s-block-testimonials
  ) {
  background: transparent !important;
}
.rud-national,
.rud-national :is(h1, h2, h3, p, a, span),
.rud-offer,
.rud-occasion {
  font-family: var(--rud-font-occasion) !important;
}
.rud-national__banner img,
.rud-blend-image {
  -webkit-mask-image: linear-gradient(to bottom, #000 0 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 78%, transparent 100%);
}
.rud-national,
.roadplus-new,
.cx-sections,
.ru-cat,
.store-header,
.store-footer,
.s-product-card-entry {
  font-family: var(--rud-font);
}
.rud-sadu-edge {
  width: clamp(12px, 1.5vw, 24px);
  opacity: 0.12;
  box-shadow: none;
}
.store-header {
  background: transparent !important;
  color: var(--rud-white);
}
.store-header .top-navbar {
  padding-block: 7px !important;
  background: transparent !important;
  color: var(--rud-muted) !important;
  border-bottom: 1px solid var(--rud-line-soft);
  font-size: 13px;
}
.store-header .top-navbar :where(a, .s-contacts-item, .s-localization-modal-trigger) {
  color: var(--rud-muted);
  text-shadow: none;
}
.store-header #mainnav,
.store-header .main-nav-container {
  min-height: 88px;
  background: transparent !important;
  color: var(--rud-white) !important;
  border: 0 !important;
  border-radius: 0 0 clamp(38px, 7vw, 96px) clamp(20px, 3vw, 40px) / 0 0 38px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}
.store-header #mainnav > .inner,
.store-header .main-nav-container > .inner {
  padding-block: 16px 20px;
  background: transparent !important;
  color: var(--rud-white);
  border-radius: inherit;
  border-bottom: 1px solid rgba(0, 192, 197, 0.28);
  box-shadow: inset 0 -4px 14px rgba(0, 192, 197, 0.025);
}
.store-header .main-nav-container > .inner > .container > div:has(> div > .navbar-brand) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(8px, 2vw, 24px);
  row-gap: 16px;
}
.store-header .main-nav-container > .inner > .container > div > div:has(> .navbar-brand) {
  display: contents;
}
.store-header .main-nav-container > .inner > .container > div > div > .navbar-brand {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  margin: 0 !important;
}
.store-header .main-nav-container > .inner > .container > div > div > .mburger {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
.store-header .main-nav-container > .inner > .container > div > div:not(:has(> .navbar-brand)) {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  min-width: 0;
  width: auto;
}
.store-header
  .main-nav-container
  > .inner
  > .header-container
  > div
  > div:first-child:not(:has(> .navbar-brand)) {
  grid-column: 1;
  justify-self: start;
}
.store-header .header-container .header-btn {
  color: var(--rud-white) !important;
  background: transparent !important;
  border-color: var(--rud-line) !important;
  min-width: 44px;
  min-height: 44px;
}
.store-header .header-container :is(.da-tm, .sicon-menu, .sicon-search, .sicon-user, .sicon-add) {
  color: var(--rud-text-secondary) !important;
}
.store-header .main-nav-container > .inner > .container > div > div > custom-main-menu {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
}
.store-header .navbar-brand {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px 10px 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
  transition:
    transform 450ms var(--rud-ease),
    filter 450ms var(--rud-ease);
}
.store-header .navbar-brand::before {
  content: none !important;
}
.store-header .navbar-brand::after {
  content: "";
  position: absolute;
  inset: auto 12% 0;
  height: 1px;
  border: 0;
  border-radius: 50%;
  clip-path: none;
  background: linear-gradient(
    90deg,
    transparent,
    var(--rud-neon-green) 24%,
    var(--rud-silver) 46%,
    var(--rud-neon-cyan) 68%,
    transparent
  );
  background-size: 240% 100%;
  animation: rud-neon-drift var(--rud-neon-duration) ease-in-out infinite;
  box-shadow: 0 0 8px rgba(0, 192, 197, 0.24);
  opacity: 0.8;
  transition:
    opacity 400ms ease,
    box-shadow 400ms ease;
  pointer-events: none;
}
.store-header .navbar-brand img {
  width: auto !important;
  height: auto !important;
  max-width: 190px !important;
  max-height: 84px !important;
  object-fit: contain !important;
  filter: none !important;
}
.store-header .main-menu > li > a,
.store-header .main-menu > li > span {
  position: relative;
  color: var(--rud-white);
  font-family: var(--rud-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: none;
  transition:
    color 250ms ease,
    background-color 250ms ease;
}
.store-header .main-menu > li > a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -7px;
  height: 1px;
  background: var(--rud-neon-gradient);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 350ms var(--rud-ease);
  pointer-events: none;
}
.store-header .main-menu > li > a:is(:hover, :focus-visible, [aria-current="page"])::after {
  transform: scaleX(0.7);
  box-shadow: 0 0 8px rgba(0, 192, 197, 0.2);
}
.store-header .main-menu > li > a:hover,
.store-header .main-menu > li > a[aria-current="page"] {
  color: var(--rud-accent) !important;
}
.store-header :where(.header-btn__icon, .s-cart-summary-icon, .s-user-menu-trigger, .mburger) {
  color: var(--rud-white) !important;
  text-shadow: none !important;
}
.store-header .mburger i {
  color: var(--rud-white) !important;
}
.store-header :where(.mburger, .s-user-menu-trigger, .s-cart-summary-wrapper) {
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  transition:
    background-color 250ms ease,
    border-color 250ms ease,
    box-shadow 250ms ease,
    transform 350ms var(--rud-ease);
}
.store-header :where(.header-btn__icon, .s-cart-summary-icon) {
  border-color: var(--rud-line) !important;
  background-color: transparent !important;
}
.store-header :where(.s-cart-summary-total, .s-user-menu-trigger-content) {
  color: var(--rud-white) !important;
  font-family: var(--rud-font);
  font-weight: 500;
}
.store-header .s-cart-summary-count {
  background: var(--rud-accent) !important;
  color: var(--rud-bg-deep) !important;
  box-shadow: none !important;
}
.store-header .header-search .s-search-input {
  background: var(--rud-card-glass) !important;
  color: var(--rud-white) !important;
  border: 1px solid var(--rud-line) !important;
  border-radius: 12px !important;
  font-family: var(--rud-font);
  font-size: 16px;
  box-shadow: none !important;
}
.store-header .header-search .s-search-input::placeholder {
  color: var(--rud-muted);
  opacity: 1;
}
.store-footer {
  position: relative;
  isolation: isolate;
  margin-top: clamp(40px, 6vw, 80px);
  padding-top: 32px;
  background: transparent !important;
  color: var(--rud-muted) !important;
  border-top: 1px solid var(--rud-line) !important;
  border-radius: clamp(38px, 7vw, 96px) clamp(20px, 3vw, 40px) 0 0 / 38px 20px 0 0 !important;
  box-shadow: none !important;
}
.store-footer .footer-top,
.store-footer .footer-middle,
.store-footer .footer-bottom,
.store-footer .store-footer__inner {
  background: transparent !important;
  background-image: none !important;
  color: var(--rud-muted) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.store-footer .footer-middle,
.store-footer .store-footer__inner {
  padding-block: clamp(32px, 5vw, 64px) !important;
}
.store-footer .footer-bottom {
  padding-block: 20px !important;
  border-top: 1px solid var(--rud-line-soft) !important;
  font-size: 12px;
}
.store-footer .footer-top::before,
.store-footer .footer-top::after,
.store-footer .footer-middle::before,
.store-footer .footer-middle::after {
  content: none !important;
  display: none !important;
}
.store-footer :where(h2, h3, h4, p, a, small) {
  text-shadow: none !important;
}
.store-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--rud-inlay);
  border-radius: inherit;
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.65) 30%, transparent 82%);
  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.65) 30%, transparent 82%);
  pointer-events: none;
}
.store-footer::after {
  content: "";
  position: absolute;
  inset-inline: 7%;
  top: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 12%,
    var(--rud-neon-green) 32%,
    var(--rud-silver) 50%,
    var(--rud-neon-cyan) 68%,
    transparent 88%
  );
  background-size: 240% 100%;
  animation: rud-footer-glint var(--rud-neon-duration-slow) ease-in-out infinite;
  box-shadow: 0 0 10px rgba(0, 192, 197, 0.12);
  opacity: 0.7;
  pointer-events: none;
}
.store-footer :where(h2, h3, h4, .footer-title) {
  margin-bottom: 14px;
  background: none !important;
  color: var(--rud-white) !important;
  -webkit-text-fill-color: var(--rud-white) !important;
  font-family: var(--rud-font);
  font-size: 16px;
  font-weight: 500 !important;
  line-height: 1.8;
  letter-spacing: 0 !important;
}
.store-footer :where(h2, h3, h4, .footer-title)::after {
  background: var(--rud-accent) !important;
  box-shadow: none !important;
}
.store-footer :where(p, .store-description, .s-contacts-item) {
  color: var(--rud-muted) !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
}
.store-footer a {
  color: var(--rud-muted);
  text-decoration: none;
  text-underline-offset: 5px;
  transition: color 180ms ease;
}
.store-footer :where(.footer-links, .s-menu-footer-list) a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-block: 5px;
  font-size: 14px;
  font-weight: 400;
  background-image: var(--rud-neon-gradient);
  background-size: 0 1px;
  background-position: center calc(100% - 5px);
  background-repeat: no-repeat;
  transition:
    color 250ms ease,
    background-size 350ms var(--rud-ease),
    transform 350ms var(--rud-ease);
}
.store-footer a:hover,
.store-footer a:focus-visible {
  color: var(--rud-accent-soft) !important;
  text-decoration: underline;
}
.store-footer :where(.footer-links, .s-menu-footer-list) a:is(:hover, :focus-visible) {
  background-size: 100% 1px;
  text-decoration: none;
}
.store-footer :where(.social-link, .s-social-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: transparent !important;
  color: var(--rud-muted) !important;
  border: 1px solid var(--rud-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition:
    transform 400ms var(--rud-ease),
    border-color 250ms ease,
    background-color 250ms ease,
    box-shadow 400ms ease;
}
.store-footer :where(.social-link, .s-social-link):hover {
  background: var(--rud-bg-soft) !important;
  color: var(--rud-accent-soft) !important;
  text-decoration: none;
}
.store-footer :where(.copyright-text, .copyrights) {
  color: var(--rud-muted) !important;
  font-size: 12px;
  line-height: 1.9;
}
.mm-ocd {
  --mm-ocd-width: 88%;
  --mm-ocd-min-width: 0px;
  --mm-ocd-max-width: 440px;
}
.mm-ocd.mm-ocd--open {
  background: rgba(2, 29, 22, 0.62) !important;
}
.mm-ocd__content {
  top: 10px;
  bottom: 10px;
  overflow: hidden;
  background: rgba(7, 15, 23, 0.97) !important;
  border: 1px solid var(--rud-line-soft);
  border-radius: 24px 10px 10px 56px / 24px 10px 10px 38px;
  box-shadow: -18px 14px 60px rgba(0, 0, 0, 0.36);
  transition-timing-function: var(--rud-ease);
  transition-duration: 420ms;
}
.mm-ocd--right .mm-ocd__content {
  right: 8px;
}
.mm-ocd--left .mm-ocd__content {
  left: 8px;
  border-radius: 10px 24px 56px 10px / 10px 24px 38px 10px;
}
.mm-ocd__content::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 24px;
  bottom: 38px;
  z-index: 4;
  width: 1px;
  border-radius: 1px;
  background: linear-gradient(
    180deg,
    transparent 8%,
    var(--rud-neon-green) 32%,
    var(--rud-neon-cyan) 60%,
    transparent 88%
  );
  background-size: 100% 240%;
  opacity: 0.65;
  pointer-events: none;
}
.mm-ocd--open .mm-ocd__content::after {
  animation: rud-neon-vertical var(--rud-neon-duration-slow) ease-in-out infinite;
}
nav#mobile-menu.mm-spn {
  --mm-spn-item-height: 58px;
  --mm-spn-item-indent: 18px;
  --mm-spn-line-height: 26px;
  --rud-menu-heading: calc(84px + env(safe-area-inset-top, 0px));
  background: transparent !important;
  color: var(--rud-white) !important;
  font-family: var(--rud-font) !important;
  text-align: start;
}
nav#mobile-menu.mm-spn.mm-spn--navbar::after {
  height: var(--rud-menu-heading);
  padding: env(safe-area-inset-top, 0px) 60px 0;
  background-image: var(--rud-inlay);
  color: var(--rud-white);
  border-bottom: 1px solid var(--rud-line);
  border-end-start-radius: 28px 16px;
  font-size: 19px;
  font-weight: 500;
  line-height: 84px;
  letter-spacing: 0;
  text-align: center;
  opacity: 1;
  box-sizing: border-box;
}
nav#mobile-menu.mm-spn.mm-spn--navbar::before {
  top: calc(42px + env(safe-area-inset-top, 0px));
  color: var(--rud-accent);
  opacity: 1;
  z-index: 2;
}
nav#mobile-menu.mm-spn.mm-spn--navbar.mm-spn--main::before {
  opacity: 0;
}
nav#mobile-menu.mm-spn.mm-spn--navbar ul {
  top: var(--rud-menu-heading);
}
nav#mobile-menu.mm-spn ul {
  padding-top: 18px;
  background: rgba(7, 15, 23, 0.98) !important;
  scrollbar-width: thin;
  scrollbar-color: var(--rud-turquoise-dark) transparent;
  overscroll-behavior-y: contain;
}
nav#mobile-menu.mm-spn ul::after {
  height: calc(28px + env(safe-area-inset-bottom, 0px));
}
nav#mobile-menu.mm-spn li {
  margin-bottom: 6px;
  background: transparent;
}
nav#mobile-menu.mm-spn li::after {
  content: none;
}
nav#mobile-menu.mm-spn li::before {
  color: var(--rud-accent);
  opacity: 0.75;
}
nav#mobile-menu.mm-spn li:has(> ul)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline: 12px;
  z-index: 0;
  margin: 0;
  background: var(--rud-bg-soft);
  border: 0;
  border-radius: 12px;
  opacity: 1;
  pointer-events: none;
}
nav#mobile-menu.mm-spn li:has(> ul)::before {
  z-index: 2;
}
nav#mobile-menu.mm-spn li:not(:has(> ul))::before {
  content: none;
}
nav#mobile-menu.mm-spn li > a,
nav#mobile-menu.mm-spn li > span {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  margin-inline: 12px;
  padding: 14px 18px;
  background: var(--rud-bg-soft);
  color: var(--rud-white);
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: none;
  font-family: var(--rud-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0;
  text-align: start;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  transition:
    background-color 250ms ease,
    border-color 250ms ease,
    color 250ms ease,
    box-shadow 350ms ease,
    transform 350ms var(--rud-ease);
}
.mm-ocd--open nav#mobile-menu.mm-spn ul.mm-spn--open:not(.mm-spn--parent) > li > :is(a, span) {
  animation: rud-menu-reveal 440ms var(--rud-ease) var(--rud-item-delay, 0ms) backwards;
}
nav#mobile-menu.mm-spn li:nth-child(2) {
  --rud-item-delay: 30ms;
}
nav#mobile-menu.mm-spn li:nth-child(3) {
  --rud-item-delay: 60ms;
}
nav#mobile-menu.mm-spn li:nth-child(4) {
  --rud-item-delay: 90ms;
}
nav#mobile-menu.mm-spn li:nth-child(5) {
  --rud-item-delay: 120ms;
}
nav#mobile-menu.mm-spn li:nth-child(6) {
  --rud-item-delay: 150ms;
}
nav#mobile-menu.mm-spn li:nth-child(n + 7) {
  --rud-item-delay: 180ms;
}
nav#mobile-menu.mm-spn li > a:not(:last-child) {
  width: auto;
  margin-inline-end: 56px;
}
nav#mobile-menu.mm-spn li > a:not(:last-child)::after {
  content: none;
}
nav#mobile-menu.mm-spn li > span:not(:last-child) {
  padding-inline-end: 48px;
  background: transparent;
  border-color: var(--rud-line-soft);
}
nav#mobile-menu.mm-spn li > :is(a, span) :is(span, i, svg) {
  padding: 0;
  background: transparent;
}
nav#mobile-menu.mm-spn li > :is(a, span) :is(i, svg) {
  flex-shrink: 0;
  color: var(--rud-accent);
}
nav#mobile-menu.mm-spn li > :is(a, span) img {
  flex-shrink: 0;
  width: auto;
  height: auto;
  max-width: 28px;
  max-height: 28px;
  object-fit: contain;
}
nav#mobile-menu.mm-spn li > a[aria-current="page"],
nav#mobile-menu.mm-spn li.Selected > a,
nav#mobile-menu.mm-spn li.mm-spn--selected > a {
  background: #073f43;
  color: var(--rud-accent-soft);
  border-color: var(--rud-line);
  font-weight: 500;
  box-shadow: inset -2px 0 0 var(--rud-neon-green);
}
[dir="ltr"] nav#mobile-menu.mm-spn li > a[aria-current="page"],
[dir="ltr"] nav#mobile-menu.mm-spn li.Selected > a,
[dir="ltr"] nav#mobile-menu.mm-spn li.mm-spn--selected > a {
  box-shadow: inset 2px 0 0 var(--rud-neon-green);
}
nav#mobile-menu.mm-spn li > a:hover,
nav#mobile-menu.mm-spn li > span:hover {
  background: #073f43;
  color: var(--rud-accent-soft);
  border-color: var(--rud-line);
}
nav#mobile-menu.mm-spn li > a:focus-visible {
  background: #073f43;
  color: var(--rud-accent-soft);
  border-color: var(--rud-accent);
}
nav#mobile-menu.mm-spn li > :is(a, span):active,
.store-header .navbar-brand:active,
.store-header :is(.mburger, .s-user-menu-trigger, .s-cart-summary-wrapper):active,
.store-footer :is(.social-link, .s-social-link):active {
  transform: scale(0.98);
}
[dir="rtl"] nav#mobile-menu.mm-spn li::before {
  right: auto;
  left: 23px;
  transform: rotate(-135deg) translate(0, -50%);
}
[dir="rtl"] nav#mobile-menu.mm-spn.mm-spn--navbar::before {
  right: 25px;
  left: auto;
  transform: rotate(135deg) translate(50%, -50%);
}
.mm-ocd__content
  > :is(
    .close,
    .menu-close,
    [aria-label="Close"],
    [aria-label="close"],
    [aria-label="إغلاق القائمة"]
  ),
nav#mobile-menu.mm-spn > .close-mobile-menu {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top, 0px));
  inset-inline-end: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  color: var(--rud-white);
  border: 1px solid var(--rud-line);
  border-radius: 12px;
  transition:
    background-color 250ms ease,
    border-color 250ms ease,
    color 250ms ease;
}
.mm-ocd__content
  > :is(
    .close,
    .menu-close,
    [aria-label="Close"],
    [aria-label="close"],
    [aria-label="إغلاق القائمة"]
  ):is(:hover, :focus-visible) {
  background: #073f43;
  border-color: var(--rud-accent);
  color: var(--rud-accent-soft);
}
.store-header :is(a, button, input):focus-visible,
.store-footer :is(a, button, input, select, textarea):focus-visible,
nav#mobile-menu.mm-spn :is(a, button, [role="button"]):focus-visible,
.mm-ocd__content > button:focus-visible,
.s-product-card-entry :is(a, button):focus-visible {
  outline: 2px solid var(--rud-accent-soft) !important;
  outline-offset: 3px;
}
section.s-block:not(.s-block--faqs):not(.s-block--testimonials) .s-block__title h2,
section.s-block:not(.s-block--faqs):not(.s-block--testimonials) .section-title,
section#best-offers-2-slider .s-block__title h2,
section#best-offers-2-slider .s-block__title .section-title,
.cx-sections .cx-header h2,
.ru-cat .ru-head h2 {
  background: none !important;
  color: var(--rud-white) !important;
  -webkit-text-fill-color: var(--rud-white) !important;
  font-family: var(--rud-font);
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
  text-shadow: none !important;
  animation: none !important;
}
.cx-sections .cx-header small,
.ru-cat .ru-head small {
  color: var(--rud-accent) !important;
}
.s-product-card-entry,
.s-product-card-entry:hover {
  background: var(--rud-card-glass) !important;
  border: 1px solid var(--rud-line-soft) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}
.s-product-card-entry::after {
  content: none !important;
  display: none !important;
}
.s-product-card-entry .s-product-card-content-title a,
.s-product-card-entry .s-product-card-content-title {
  color: var(--rud-white) !important;
  font-family: var(--rud-font);
  font-weight: 500;
  line-height: 1.8;
}
.s-product-card-entry .s-product-card-price {
  color: var(--rud-accent-soft);
}
.s-product-card-entry .s-product-card-content-subtitle {
  color: var(--rud-muted);
}
body#app
  :is(
    .product-single,
    .product-single__content,
    .product-single__description,
    .cart-page,
    .cart-content
  ) {
  background: transparent !important;
  color: var(--rud-white);
}
body#app :is(.cart-item, .cart-summary, .s-cart-item, .s-cart-summary-items) {
  background: var(--rud-card-glass) !important;
  color: var(--rud-white);
  border-color: var(--rud-line) !important;
  border-radius: var(--rud-card-radius);
}
body#app
  :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not(
        [type="button"]
      ),
    select,
    textarea,
    .s-form-control
  ) {
  background-color: var(--rud-card-glass) !important;
  color: var(--rud-white) !important;
  border-color: var(--rud-line) !important;
  caret-color: var(--rud-mint);
  font-family: var(--rud-font);
  font-size: 16px;
  transition:
    border-color 250ms ease,
    box-shadow 250ms ease;
}
body#app :is(input, textarea)::placeholder {
  color: var(--rud-muted);
  opacity: 1;
}
body#app :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--rud-mint);
  outline-offset: 3px;
  border-color: var(--rud-turquoise) !important;
}
body#app :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--rud-turquoise);
}
body#app .s-button-primary:not(:disabled) {
  background: linear-gradient(
    115deg,
    var(--rud-turquoise-dark),
    var(--rud-turquoise-deep)
  ) !important;
  color: var(--rud-white) !important;
  border-color: var(--rud-line) !important;
}
body#app .s-button-outline-primary {
  background: transparent !important;
  color: var(--rud-mint-light) !important;
  border-color: var(--rud-turquoise) !important;
}
body#app :is(button, .s-button-element):focus-visible {
  outline: 2px solid var(--rud-mint);
  outline-offset: 3px;
}
#wa-angel.wa-angel,
#wa-angel.wa-angel:hover {
  background: #073f43 !important;
  border: 1px solid var(--rud-line) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
  animation: none !important;
  transform: none !important;
}
.rud-national__shine,
.rpn-pass::after {
  display: none;
}
.rud-offer:focus-within .rud-offer__track {
  animation-play-state: paused;
}
@keyframes rud-menu-reveal {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes rud-footer-glint {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes rud-neon-drift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes rud-neon-vertical {
  0%,
  100% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
}
@media (hover: hover) and (pointer: fine) {
  .store-header .navbar-brand:is(:hover, :focus-visible) {
    transform: translateY(-2px);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 9px rgba(0, 192, 197, 0.12));
  }

  .store-header .navbar-brand:is(:hover, :focus-visible)::after {
    opacity: 1;
    box-shadow: 0 0 12px rgba(0, 192, 197, 0.38);
  }

  .store-header :is(.mburger, .s-user-menu-trigger, .s-cart-summary-wrapper):hover {
    background-color: rgba(0, 192, 197, 0.06);
    border-color: var(--rud-accent);
    box-shadow: inset 0 0 0 1px var(--rud-line);
    transform: translateY(-2px);
  }

  .store-footer :where(.footer-links, .s-menu-footer-list) a:hover {
    transform: translateX(var(--rud-inline-nudge));
  }

  .store-footer :is(.social-link, .s-social-link):hover {
    transform: translateY(-4px);
    border-color: var(--rud-accent) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16) !important;
  }

  nav#mobile-menu.mm-spn li > :is(a, span):hover {
    transform: translateX(var(--rud-inline-nudge));
    box-shadow:
      inset -2px 0 0 var(--rud-neon-green),
      0 0 12px rgba(0, 192, 197, 0.07);
  }

  [dir="ltr"] nav#mobile-menu.mm-spn li > :is(a, span):hover {
    box-shadow:
      inset 2px 0 0 var(--rud-neon-green),
      0 0 12px rgba(0, 192, 197, 0.07);
  }
}
@media (max-width: 767px) {
  .store-header #mainnav,
  .store-header .main-nav-container {
    min-height: 74px;
  }

  .store-header #mainnav > .inner,
  .store-header .main-nav-container > .inner {
    padding-block: 14px 20px;
  }

  .store-header .navbar-brand img {
    max-width: min(33vw, 142px) !important;
    max-height: 64px !important;
  }

  .store-header .navbar-brand {
    padding: 4px 6px 12px !important;
  }

  .store-header .header-container .navbar-brand img {
    max-width: clamp(82px, calc(100vw - 236px), 142px) !important;
  }

  .store-footer .footer-middle,
  .store-footer .store-footer__inner {
    padding-block: 32px !important;
  }

  .store-footer :where(.footer-links, .s-menu-footer-list) a {
    min-height: 44px;
  }

  .rud-sadu-edge {
    opacity: 0.07;
  }
}
@media (prefers-reduced-motion: reduce) {
  .store-header *,
  .store-header *::before,
  .store-header *::after,
  .store-footer *,
  nav#mobile-menu.mm-spn *,
  .mm-ocd,
  .mm-ocd__content {
    transition-duration: 0.01ms !important;
  }

  .store-header .navbar-brand::before,
  .store-header .navbar-brand::after,
  .store-footer::after,
  .mm-ocd--open .mm-ocd__content::after,
  .mm-ocd--open nav#mobile-menu.mm-spn ul.mm-spn--open:not(.mm-spn--parent) > li > :is(a, span) {
    animation: none !important;
  }

  .store-header .navbar-brand,
  .store-header :is(.mburger, .s-user-menu-trigger, .s-cart-summary-wrapper),
  .store-footer :is(a, .social-link, .s-social-link),
  nav#mobile-menu.mm-spn li > :is(a, span) {
    transform: none !important;
  }

  .rud-offer__window {
    overflow-x: auto;
  }

  .rud-offer__track {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}

.store-header,
.store-header #mainnav,
.store-header #mainnav > .inner {
  position: relative !important;
  top: auto !important;
  transform: none !important;
}

.store-header #mainnav {
  height: auto !important;
}


/* ═════════════════════════════════════════════════════════════
   رود بلس — إضافات اليوم الوطني ٩٦
   ١) بنر البطل  ٢) القائمة الجانبية  ٣) خط الفوتر النيون
   تُلصق كما هي في آخر ملف الأكواد المخصصة
   ═════════════════════════════════════════════════════════════ */

/* ═══════════════ رود بلس — بنر اليوم الوطني ٩٦ ═══════════════ */
.rd-hero{
  --gold:#E3C77E; --gold-hi:#F8EBC0; --gold-dp:#B98F3C;
  --neon:#5CF478; --teal:#00C0C5; --ink:#071019;
  position:relative; direction:rtl; margin:0 auto 28px; padding-top:0;
  max-width:1200px; background:transparent;
  font-family:var(--rud-font-occasion,'Cairo',sans-serif); isolation:isolate;
}
.rd-hero *{font-family:inherit}

/* ─────── الصورة ─────── */
.rd-hero__media{
  position:relative; width:100%; aspect-ratio:64/29; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 76%, rgba(0,0,0,.35) 92%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 76%, rgba(0,0,0,.35) 92%, transparent 100%);
}
.rd-hero__img{
  width:100%; height:100%; object-fit:cover; object-position:50% 26%; display:block;
  transition:transform 1.2s cubic-bezier(.2,.6,.2,1), filter 1.2s ease;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 13%, rgba(0,0,0,.72) 34%, #000 52%, #000 94%, rgba(0,0,0,.30) 100%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 13%, rgba(0,0,0,.72) 34%, #000 52%, #000 94%, rgba(0,0,0,.30) 100%);
}
.rd-hero__img--m{display:none}
.rd-hero:hover .rd-hero__img{transform:scale(1.045); filter:saturate(1.06) contrast(1.03)}

/* ستارة تدرّج تحت النص */
.rd-hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(270deg, rgba(4,12,9,0) 46%, rgba(4,12,9,.20) 66%, rgba(4,12,9,.34) 100%);
}

/* ✦ غبار ذهبي يطفو ببطء */
.rd-hero__media::before{
  content:""; position:absolute; inset:-10%; z-index:2; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 24%, rgba(248,235,192,.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 31% 68%, rgba(248,235,192,.6),  transparent 60%),
    radial-gradient(1.9px 1.9px at 9%  56%, rgba(227,199,126,.7),  transparent 60%),
    radial-gradient(1.2px 1.2px at 24% 88%, rgba(248,235,192,.5),  transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 16%, rgba(227,199,126,.55), transparent 60%),
    radial-gradient(1.1px 1.1px at 13% 78%, rgba(248,235,192,.5),  transparent 60%);
  animation:rdDust 17s ease-in-out infinite alternate;
}
@keyframes rdDust{
  0%  {transform:translate3d(0,0,0)      scale(1)}
  100%{transform:translate3d(10px,-16px,0) scale(1.05)}
}

/* ─────── النص ─────── */
.rd-hero__body{
  position:absolute; z-index:6; inset:0 auto 0 0; width:min(52%,560px);
  display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
  gap:14px; padding:0 clamp(20px,3.4vw,46px); text-align:right;
}

.rd-hero__kicker{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px; border-radius:999px; white-space:nowrap;
  border:1px solid rgba(227,199,126,.55);
  background:linear-gradient(180deg, rgba(227,199,126,.16), rgba(227,199,126,.05));
  color:var(--gold-hi); font-size:clamp(11px,1.05vw,14px); font-weight:700; letter-spacing:.2px;
  animation:rdBreath 4.8s ease-in-out infinite;
}
.rd-hero__kicker::before,.rd-hero__kicker::after{content:"◆"; font-size:.62em; color:var(--gold); opacity:.9}
@keyframes rdBreath{
  0%,100%{box-shadow:0 0 0 0 rgba(227,199,126,0),      inset 0 0 12px rgba(227,199,126,.06)}
  50%    {box-shadow:0 0 18px 0 rgba(227,199,126,.28), inset 0 0 12px rgba(227,199,126,.16)}
}

.rd-hero__title{
  margin:0; font-weight:900; line-height:1.45;
  font-size:clamp(26px,3.5vw,50px); letter-spacing:-.2px;
  background:linear-gradient(115deg,#FFFFFF 0%,#FBF1D6 22%,var(--gold) 42%,#FFFBEE 51%,var(--gold) 60%,#FBF1D6 76%,var(--gold-dp) 100%);
  background-size:230% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.6));
  animation:rdSheen 11s ease-in-out infinite;
}
.rd-hero__title b{display:block; font-weight:900}
@keyframes rdSheen{0%,100%{background-position:0% 50%} 50%{background-position:100% 50%}}

.rd-hero__sub{
  margin:0; color:#DCE6DF; opacity:.92; line-height:1.85;
  font-size:clamp(13px,1.15vw,17px); max-width:46ch; font-weight:400;
}

.rd-hero__offer{
  display:inline-flex; align-items:center; gap:8px; margin-top:2px; position:relative; overflow:hidden;
  padding:9px 18px; border-radius:12px; white-space:nowrap;
  font-size:clamp(11.5px,1.05vw,14.5px); font-weight:800; color:#0B1A12;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold) 46%,var(--gold-dp));
  box-shadow:0 8px 24px rgba(227,199,126,.26), inset 0 1px 0 rgba(255,255,255,.55);
  animation:rdPulse 3.6s ease-in-out infinite;
}
.rd-hero__offer::after{
  content:""; position:absolute; top:0; bottom:0; width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
  transform:translateX(-220%); animation:rdChip 5.2s ease-in-out infinite;
}
@keyframes rdChip{0%,55%{transform:translateX(-220%)} 85%,100%{transform:translateX(320%)}}
@keyframes rdPulse{
  0%,100%{box-shadow:0 8px 24px rgba(227,199,126,.22), inset 0 1px 0 rgba(255,255,255,.55)}
  50%    {box-shadow:0 8px 34px rgba(227,199,126,.46), inset 0 1px 0 rgba(255,255,255,.55)}
}

/* ─────── الأزرار ─────── */
.rd-hero__cta{display:flex; gap:11px; flex-wrap:wrap; justify-content:flex-end; margin-top:6px}
.rd-hero__btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; padding:12px 22px; border-radius:13px; font-weight:800; white-space:nowrap;
  font-size:clamp(12.5px,1.05vw,15px);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.rd-hero__btn::after{
  content:""; position:absolute; top:0; bottom:0; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-240%); transition:transform .75s cubic-bezier(.3,0,.2,1);
}
.rd-hero__btn:hover::after{transform:translateX(300%)}
.rd-hero__btn--main{
  color:#07140C; background:linear-gradient(135deg,var(--neon),#2FE0A8 55%,var(--teal));
  box-shadow:0 10px 28px rgba(92,244,120,.26);
}
.rd-hero__btn--ghost{
  color:#EAF6EE; border:1px solid rgba(227,199,126,.5);
  background:rgba(7,16,25,.42); backdrop-filter:blur(4px);
}
.rd-hero__btn:hover{transform:translateY(-3px)}
.rd-hero__btn:active{transform:translateY(-1px)}
.rd-hero__btn--main:hover{box-shadow:0 16px 38px rgba(92,244,120,.46)}
.rd-hero__btn--ghost:hover{background:rgba(227,199,126,.14); border-color:rgba(227,199,126,.85)}

/* ─────── نقش السدو على الحافتين (مخفّف) ─────── */
.rd-hero__sadu{
  position:absolute; top:0; bottom:0; width:24px; z-index:7; pointer-events:none; opacity:.16;
  background-color:rgba(7,16,25,.28);
  background-image:
    repeating-linear-gradient(45deg,  var(--gold) 0 1.4px, transparent 1.4px 12px),
    repeating-linear-gradient(-45deg, var(--gold) 0 1.4px, transparent 1.4px 12px),
    repeating-linear-gradient(180deg, rgba(92,244,120,.35) 0 1.2px, transparent 1.2px 24px);
  background-size:24px 24px, 24px 24px, 100% 24px;
  box-shadow:inset 1px 0 0 rgba(227,199,126,.28), inset -1px 0 0 rgba(227,199,126,.28);
  -webkit-mask:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
          mask:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  animation:rdSadu 24s linear infinite;
  transition:opacity .55s ease;
}
.rd-hero:hover .rd-hero__sadu{opacity:.26}
@keyframes rdSadu{from{background-position:0 0,0 0,0 0} to{background-position:0 48px,0 -48px,0 48px}}
.rd-hero__sadu--r{right:0} .rd-hero__sadu--l{left:0}

/* ═══════════════ الجوال ═══════════════ */
@media (max-width:820px){
  .rd-hero{margin-bottom:20px}
  .rd-hero__media{aspect-ratio:3/2}
  .rd-hero__img{display:none}
  .rd-hero__media{
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.70) 76%, rgba(0,0,0,.20) 91%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.70) 76%, rgba(0,0,0,.20) 91%, transparent 100%);
  }
  .rd-hero__img--m{
    display:block; object-position:66% 20%;
    -webkit-mask-image:none; mask-image:none;
  }
  .rd-hero__scrim{background:linear-gradient(0deg, rgba(4,12,9,.34) 0%, rgba(4,12,9,0) 42%)}
  .rd-hero__body{
    position:relative; inset:auto; width:100%; padding:0 18px 20px;
    margin-top:-19%; align-items:center; text-align:center; gap:11px;
  }
  .rd-hero__title{font-size:clamp(23px,6.6vw,32px); line-height:1.5}
  .rd-hero__sub{font-size:14.5px; line-height:1.8; max-width:42ch}
  .rd-hero__cta{justify-content:center; width:100%}
  .rd-hero__btn{flex:1 1 auto; justify-content:center}
  .rd-hero__sadu{width:16px; background-size:16px 16px,16px 16px,100% 16px; opacity:.10}
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  .rd-hero *,.rd-hero *::before,.rd-hero *::after{animation:none!important}
}

/* ─────── خط فاصل ذهبي متحرك بآخر السكشن ─────── */
.rd-hero::after{
  content:""; position:absolute; z-index:9; pointer-events:none;
  left:7%; right:7%; bottom:0; height:2px; border-radius:999px;
  background:linear-gradient(90deg,
    transparent 0%, rgba(227,199,126,.12) 10%, var(--gold-dp) 26%,
    var(--gold) 40%, #FFF8E4 50%, var(--gold) 60%,
    var(--gold-dp) 74%, rgba(227,199,126,.12) 90%, transparent 100%);
  background-size:240% 100%;
  box-shadow:0 0 16px rgba(227,199,126,.34), 0 0 42px rgba(227,199,126,.14);
  animation:rdRule 8s ease-in-out infinite;
}
@keyframes rdRule{0%,100%{background-position:0% 50%} 50%{background-position:100% 50%}}
@media (max-width:820px){ .rd-hero::after{left:9%; right:9%} }

/* يلغي طبقة "القلاس" لو بقيت نسخة قديمة من كتلة البنر بالملف */
.rd-hero__media::after{ content:none; animation:none; }

/* ─── قتل أي فراغ يضيفه غلاف سلة حول البنر (بلا مساس بخلفية المتجر) ─── */
section.s-block:has(.rd-hero),
.s-block__content:has(.rd-hero),
.container:has(> .rd-hero){
  padding-top:0 !important;
  margin-top:0 !important;
  background:transparent !important;
}
section.s-block:has(.rd-hero) .s-block__title{ display:none !important; }


/* ═════════════ القائمة الجانبية + الفوتر ═════════════ */

/* ─── ١) إخفاء السلايدر الفارغ أعلى القائمة (سبب الفراغ الكبير) ─── */
nav#mobile-menu.mm-spn li.mobile-menu-slider:not(:has(img)){
  display:none;
}
nav#mobile-menu.mm-spn ul{ padding-top:12px }

/* ─── ٢) توحيد كل العناصر بنفس الشكل (روابط ومجموعات) ─── */
nav#mobile-menu.mm-spn li > a,
nav#mobile-menu.mm-spn li > a:not(:last-child),
nav#mobile-menu.mm-spn li > span,
nav#mobile-menu.mm-spn li > span:not(:last-child){
  position:relative;
  overflow:hidden;
  width:auto;
  min-height:56px;
  margin-inline:12px;
  padding:14px 20px;
  border:1px solid transparent;
  border-radius:14px;
  color:var(--rud-white);
  background:
    linear-gradient(142deg, #10262F 0%, #0B1621 44%, #070F17 100%) padding-box,
    linear-gradient(125deg, rgba(0,192,197,.62) 0%, rgba(81,251,174,.38) 44%, rgba(0,192,197,.10) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 6px 18px rgba(0,0,0,.30);
  font-weight:500;
  letter-spacing:0;
}
/* مساحة للسهم في عناصر المجموعات فقط */
nav#mobile-menu.mm-spn li > a:not(:last-child),
nav#mobile-menu.mm-spn li > span:not(:last-child){
  padding-inline-end:52px;
  margin-inline-end:12px;
}

/* ─── ٣) شريط نيون على الحافة الأمامية ─── */
nav#mobile-menu.mm-spn li > a::before,
nav#mobile-menu.mm-spn li > span::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:16%; bottom:16%;
  width:3.5px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--rud-turquoise) 0%, #C9FFE9 48%, var(--rud-mint) 100%);
  box-shadow:0 0 12px rgba(0,192,197,.75), 0 0 3px rgba(201,255,233,.9);
  opacity:.9;
  transition:opacity .3s ease, box-shadow .3s ease;
}

/* ─── ٤) بريق هادئ يمر على العناصر ─── */
nav#mobile-menu.mm-spn li > a::after,
nav#mobile-menu.mm-spn li > a:not(:last-child)::after,
nav#mobile-menu.mm-spn li > span::after,
nav#mobile-menu.mm-spn li > span:not(:last-child)::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:45%;
  background:linear-gradient(100deg, transparent, rgba(125,255,192,.09), transparent);
  transform:translateX(-230%);
  pointer-events:none;
  animation:rud-item-sheen 9s cubic-bezier(.45,0,.25,1) infinite;
  animation-delay:var(--rud-item-delay,0ms);
}
@keyframes rud-item-sheen{
  0%,62%{transform:translateX(-230%)}
  92%,100%{transform:translateX(300%)}
}

/* ─── ٥) إزالة الصندوق المزدوج خلف عناصر المجموعات ─── */
nav#mobile-menu.mm-spn li:has(> ul)::after{
  background:transparent;
}

/* ─── ٦) السهم بلون النعناع ─── */
[dir="rtl"] nav#mobile-menu.mm-spn li::before,
nav#mobile-menu.mm-spn li::before{
  color:var(--rud-mint);
  opacity:.9;
  text-shadow:0 0 10px rgba(81,251,174,.45);
}

/* ─── ٧) التفاعل ─── */
nav#mobile-menu.mm-spn li > a:hover,
nav#mobile-menu.mm-spn li > span:hover,
nav#mobile-menu.mm-spn li > a:focus-visible,
nav#mobile-menu.mm-spn li > a[aria-current="page"],
nav#mobile-menu.mm-spn li.mm-spn--selected > a{
  color:var(--rud-accent-soft);
  background:
    linear-gradient(142deg, #0D3A3E 0%, #0A2028 50%, #081119 100%) padding-box,
    linear-gradient(125deg, var(--rud-turquoise) 0%, var(--rud-mint) 50%, rgba(0,192,197,.40) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 10px 26px rgba(0,0,0,.34),
    0 0 20px rgba(0,192,197,.18);
}
nav#mobile-menu.mm-spn li > a:hover::before,
nav#mobile-menu.mm-spn li > span:hover::before,
nav#mobile-menu.mm-spn li > a[aria-current="page"]::before,
nav#mobile-menu.mm-spn li.mm-spn--selected > a::before{
  opacity:1;
  box-shadow:0 0 16px rgba(81,251,174,.8);
}

/* ─── ٨) خيط النيون الجانبي للدرج — أسرع وأوضح ─── */
.mm-ocd__content::after{
  width:2px;
  opacity:.85;
  background:linear-gradient(180deg,
    transparent 0%, rgba(0,192,197,.25) 14%, var(--rud-turquoise) 34%,
    #C9FFE9 50%, var(--rud-mint) 66%, rgba(0,192,197,.25) 86%, transparent 100%);
  background-size:100% 260%;
  box-shadow:0 0 12px rgba(0,192,197,.45);
  animation:rud-neon-vertical 9s ease-in-out infinite;
}

/* ═════════════════════════════════════════════════════════════
   خط الفوتر النيون — نبضة ضوء تجري بدل الزحف البطيء
   ═════════════════════════════════════════════════════════════ */
.store-footer::after{
  height:2px;
  opacity:1;
  background-image:
    linear-gradient(90deg, transparent 4%, var(--rud-turquoise-dark) 20%, var(--rud-turquoise) 40%, var(--rud-mint) 56%, var(--rud-turquoise) 74%, transparent 96%),
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.95) 46%, rgba(201,255,233,.9) 54%, transparent 100%);
  background-size:100% 100%, 26% 100%;
  background-repeat:no-repeat, no-repeat;
  background-position:0 0, -34% 0;
  box-shadow:0 0 12px rgba(0,192,197,.42), 0 0 34px rgba(81,251,174,.16);
  animation:rud-footer-run 7s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes rud-footer-run{
  0%{background-position:0 0, -34% 0}
  58%,100%{background-position:0 0, 134% 0}
}

@media (prefers-reduced-motion:reduce){
  nav#mobile-menu.mm-spn li > :is(a,span)::after,
  .mm-ocd__content::after,
  .store-footer::after{ animation:none !important }
}

/* ═════════════════════════════════════════════════════════════
   رود بلس — دفعة ٢
   ١) تذويب حافة البنر العلوية  ٢) قائمة شفافة بلمسة دارك
   ٣) خاتمة القائمة: فاصل + «عزّنا بطبعنا»
   ═════════════════════════════════════════════════════════════ */

/* ─── ١) حافة البنر العليا: تلاشٍ قصير يذوّب الخط بلا فراغ ─── */
.rd-hero__media{
  -webkit-mask-image:linear-gradient(180deg,
    rgba(0,0,0,.35) 0%, rgba(0,0,0,.85) 2.2%, #000 4.5%,
    #000 76%, rgba(0,0,0,.35) 92%, transparent 100%);
          mask-image:linear-gradient(180deg,
    rgba(0,0,0,.35) 0%, rgba(0,0,0,.85) 2.2%, #000 4.5%,
    #000 76%, rgba(0,0,0,.35) 92%, transparent 100%);
}
@media (max-width:820px){
  .rd-hero__media{
    -webkit-mask-image:linear-gradient(180deg,
      rgba(0,0,0,.35) 0%, rgba(0,0,0,.85) 2.6%, #000 5.5%,
      #000 58%, rgba(0,0,0,.70) 76%, rgba(0,0,0,.20) 91%, transparent 100%);
            mask-image:linear-gradient(180deg,
      rgba(0,0,0,.35) 0%, rgba(0,0,0,.85) 2.6%, #000 5.5%,
      #000 58%, rgba(0,0,0,.70) 76%, rgba(0,0,0,.20) 91%, transparent 100%);
  }
}

/* ─── ٢) القائمة: شفافة بلمسة دارك زي الواجهة الرئيسية ─── */
.mm-ocd__content{
  background:
    linear-gradient(160deg,
      rgba(7,16,25,.66) 0%,
      rgba(6,45,36,.44) 46%,
      rgba(7,16,25,.74) 100%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
          backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid rgba(0,192,197,.20);
  box-shadow:-18px 14px 60px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.05);
}
nav#mobile-menu.mm-spn ul{
  background:transparent !important;
}
nav#mobile-menu.mm-spn.mm-spn--navbar::after{
  background-color:rgba(7,16,25,.34);
  border-bottom:1px solid rgba(0,192,197,.28);
}
/* ملاحظة: بلا backdrop-filter هنا — يحوّل الطبقة لحاوية للعناصر الثابتة فينهار الدرج */
.mm-ocd.mm-ocd--open{
  background:rgba(2,20,16,.60) !important;
}

/* ─── ٣) خاتمة القائمة ─── */
/* مساحة أسفل القائمة حتى لا تختفي الخاتمة تحت العناصر */
nav#mobile-menu.mm-spn > ul::after{
  height:calc(104px + env(safe-area-inset-bottom, 0px));
}
.mm-ocd__content::before{
  content:"عزّنا بطبعنا\A اليوم الوطني السعودي 96";
  white-space:pre-line;
  position:absolute;
  inset-inline:20px;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  z-index:6;
  pointer-events:none;
  padding-top:18px;
  text-align:center;
  font-family:var(--rud-font-occasion, 'Cairo', sans-serif);
  font-size:15px;
  font-weight:800;
  line-height:2.05;
  color:#C9FFE9;
  text-shadow:0 0 16px rgba(0,192,197,.40);
  background-image:linear-gradient(90deg,
    transparent 0%, rgba(0,192,197,.10) 12%, var(--rud-turquoise) 32%,
    #E9FFF6 50%, var(--rud-mint) 68%, rgba(0,192,197,.10) 88%, transparent 100%);
  background-size:200% 1px;
  background-repeat:no-repeat;
  background-position:0% top;
  animation:rud-menu-rule 8s ease-in-out infinite;
}
@keyframes rud-menu-rule{
  0%,100%{background-position:0% top}
  50%    {background-position:100% top}
}

@media (prefers-reduced-motion:reduce){
  .mm-ocd__content::before{ animation:none !important }
}

/* ─── إلغاء حشوة غلاف سلة حول الفاصل (يخصّ الفاصل فقط) ─── */
section.s-block:has(.rd-div),
.s-block__content:has(.rd-div),
.container:has(> .rd-div){
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  background:transparent !important;
}
section.s-block:has(.rd-div) .s-block__title{ display:none !important; }

/* ═════════════════════════════════════════════════════════════
   قاعدة عامة لكل بلوكات «محتوى HTML» — الآن ومستقبلاً
   أي بلوك تضيفه بعد اليوم ينضبط لحاله بلا تعديل CSS
   ═════════════════════════════════════════════════════════════ */
div.app-inner > section.s-block--bundle-html-content,
div.app-inner > section.s-block--bundle-html-content > .s-block-html-content,
div.app-inner > section.s-block--bundle-html-content > [class*="salla-html-content"]{
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
div.app-inner > section.s-block--bundle-html-content .s-block__title{
  display:none !important;
}

/* ═════════════════════════════════════════════════════════════
   رود بلس — الفاصل  .rd-div
   ═════════════════════════════════════════════════════════════ */
.rd-div{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,2vw,22px);
  width:min(100%,1160px);
  margin:clamp(22px,4vw,42px) auto;
  padding:0 clamp(14px,3vw,28px);
  background:transparent;
  direction:rtl;
  isolation:isolate;
}

/* ─── الخيوط + نقش السدو ─── */
.rd-div__line{
  position:relative;
  flex:1 1 0;
  height:22px;
  min-width:0;
}
/* النقشة */
.rd-div__line::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg,  rgba(0,192,197,.55) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-45deg, rgba(81,251,174,.38) 0 1px, transparent 1px 11px);
  background-size:22px 22px;
  opacity:.34;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
  transition:opacity .55s ease;
}
/* الخيط + شرارة تجري عليه */
.rd-div__line::after{
  content:"";
  position:absolute; inset-inline:0; top:50%;
  height:1px; transform:translateY(-50%);
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(0,192,197,.72) 34%, rgba(81,251,174,.58) 66%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #E9FFF6 50%, transparent 100%);
  background-size:100% 100%, 15% 100%;
  background-repeat:no-repeat, no-repeat;
  background-position:0 0, -22% 0;
  box-shadow:0 0 10px rgba(0,192,197,.30);
  animation:rd-div-run 6.5s cubic-bezier(.45,0,.25,1) infinite;
}
.rd-div__line--l::after{ animation-direction:reverse }
@keyframes rd-div-run{
  0%       {background-position:0 0, -22% 0}
  55%,100% {background-position:0 0, 122% 0}
}

/* ─── الجوهرة ─── */
.rd-div__gem{
  position:relative;
  flex:0 0 auto;
  width:13px; height:13px;
  border-radius:3px;
  transform:rotate(45deg);
  background:linear-gradient(135deg, var(--rud-turquoise,#00C0C5) 0%, #E9FFF6 48%, var(--rud-mint,#51FBAE) 100%);
  box-shadow:0 0 14px rgba(0,192,197,.62), 0 0 36px rgba(81,251,174,.22);
  transition:transform .75s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
}
/* حلقة تتنفّس حول الجوهرة */
.rd-div__gem::before{
  content:"";
  position:absolute; inset:-9px;
  border:1px solid rgba(0,192,197,.42);
  border-radius:6px;
  animation:rd-div-ring 4.6s ease-in-out infinite;
}
@keyframes rd-div-ring{
  0%,100%{ transform:scale(1);    opacity:.55 }
  50%    { transform:scale(1.22); opacity:.12 }
}

/* ─── التفاعل ─── */
.rd-div:hover .rd-div__gem{
  transform:rotate(225deg) scale(1.18);
  box-shadow:0 0 22px rgba(0,192,197,.9), 0 0 52px rgba(81,251,174,.4);
}
.rd-div:hover .rd-div__line::before{ opacity:.6 }

@media (max-width:600px){
  .rd-div{ margin-block:20px; gap:12px }
  .rd-div__line{ height:18px }
  .rd-div__line::before{ background-size:18px 18px }
}
@media (prefers-reduced-motion:reduce){
  .rd-div__line::after,.rd-div__gem::before{ animation:none !important }
}

/* ═════════════════════════════════════════════════════════════
   رود بلس — الفاصل  .rd-div  (بلمسة ذهبية)
   ═════════════════════════════════════════════════════════════ */
.rd-div{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,2vw,22px);
  width:min(100%,1160px);
  margin:clamp(22px,4vw,42px) auto;
  padding:0 clamp(14px,3vw,28px);
  background:transparent;
  direction:rtl;
  isolation:isolate;
}

/* ─── الخيوط + نقش السدو ─── */
.rd-div__line{
  position:relative;
  flex:1 1 0;
  height:22px;
  min-width:0;
}
/* النقشة */
.rd-div__line::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg,  rgba(0,192,197,.55) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-45deg, rgba(227,199,126,.42) 0 1px, transparent 1px 11px);
  background-size:22px 22px;
  opacity:.34;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
  transition:opacity .55s ease;
}
/* الخيط + شرارة تجري عليه */
.rd-div__line::after{
  content:"";
  position:absolute; inset-inline:0; top:50%;
  height:1px; transform:translateY(-50%);
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(0,192,197,.70) 26%, rgba(126,222,196,.62) 52%, rgba(227,199,126,.70) 78%, rgba(248,235,192,.55) 100%),
    linear-gradient(90deg, transparent 0%, #E9FFF6 50%, transparent 100%);
  background-size:100% 100%, 15% 100%;
  background-repeat:no-repeat, no-repeat;
  background-position:0 0, -22% 0;
  box-shadow:0 0 10px rgba(0,192,197,.24), 0 0 14px rgba(227,199,126,.18);
  animation:rd-div-run 6.5s cubic-bezier(.45,0,.25,1) infinite;
}
.rd-div__line--l::after{ animation-direction:reverse }
@keyframes rd-div-run{
  0%       {background-position:0 0, -22% 0}
  55%,100% {background-position:0 0, 122% 0}
}

/* ─── الجوهرة ─── */
.rd-div__gem{
  position:relative;
  flex:0 0 auto;
  width:13px; height:13px;
  border-radius:3px;
  transform:rotate(45deg);
  background:linear-gradient(135deg, var(--rud-turquoise,#00C0C5) 0%, #E9FFF6 34%, var(--rud-gold-soft,#F8EBC0) 56%, var(--rud-gold,#E3C77E) 78%, var(--rud-mint,#51FBAE) 100%);
  box-shadow:0 0 13px rgba(227,199,126,.62), 0 0 30px rgba(0,192,197,.34), 0 0 46px rgba(227,199,126,.16);
  transition:transform .75s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
}
/* حلقة تتنفّس حول الجوهرة */
.rd-div__gem::before{
  content:"";
  position:absolute; inset:-9px;
  border:1px solid rgba(227,199,126,.48);
  border-radius:6px;
  animation:rd-div-ring 4.6s ease-in-out infinite;
}
@keyframes rd-div-ring{
  0%,100%{ transform:scale(1);    opacity:.55 }
  50%    { transform:scale(1.22); opacity:.12 }
}

/* ─── التفاعل ─── */
.rd-div:hover .rd-div__gem{
  transform:rotate(225deg) scale(1.18);
  box-shadow:0 0 20px rgba(248,235,192,.95), 0 0 44px rgba(227,199,126,.55), 0 0 66px rgba(0,192,197,.3);
}
.rd-div:hover .rd-div__line::before{ opacity:.6 }

@media (max-width:600px){
  .rd-div{ margin-block:20px; gap:12px }
  .rd-div__line{ height:18px }
  .rd-div__line::before{ background-size:18px 18px }
}
@media (prefers-reduced-motion:reduce){
  .rd-div__line::after,.rd-div__gem::before{ animation:none !important }
}

/* ═════════════════════════════════════════════════════════════
   رود بلس — باقات البلس  .rdp  (المبدّل الملكي)
   ═════════════════════════════════════════════════════════════ */
.rdp{
  --tq:var(--rud-turquoise,#00c0c5); --mint:var(--rud-mint,#51fbae);
  --mintp:var(--rud-mint-pale,#c9ffe9);
  --gold:var(--rud-gold,#e3c77e); --goldS:var(--rud-gold-soft,#f8ebc0); --goldD:var(--rud-gold-dark,#b98f3c);
  position:relative; width:min(100%,800px); margin:0 auto; container-type:inline-size;
  direction:rtl; background:transparent;
  font-family:var(--rud-font-occasion,'Cairo',sans-serif);
}
.rdp *{font-family:inherit; box-sizing:border-box}
.rdp input{position:absolute; opacity:0; pointer-events:none}

/* ─── مفتاح التبديل ─── */
.rdp__sw{
  position:relative; z-index:4; display:flex; width:fit-content; margin:0 auto 14px;
  padding:5px; border-radius:999px; border:1px solid rgba(227,199,126,.5);
  background:linear-gradient(180deg,rgba(7,16,25,.95),rgba(11,22,33,.98));
  box-shadow:0 10px 26px rgba(0,0,0,.4);
}
.rdp__sw label{
  position:relative; z-index:2; cursor:pointer; padding:clamp(7px,1.1cqw,9px) clamp(18px,3.25cqw,26px); border-radius:999px;
  font-size:clamp(11.5px,1.75cqw,14px); font-weight:800; color:#cfe3da; transition:color .35s ease; white-space:nowrap;
}
.rdp__pill{
  position:absolute; z-index:1; top:5px; bottom:5px; right:5px; width:calc(50% - 5px);
  border-radius:999px; background:linear-gradient(135deg,var(--goldS),var(--gold) 55%,var(--goldD));
  box-shadow:0 6px 18px rgba(227,199,126,.35);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
#rdp-g:checked ~ .rdp__sw .rdp__pill{transform:translateX(-100%)}
#rdp-d:checked ~ .rdp__sw label[for="rdp-d"],
#rdp-g:checked ~ .rdp__sw label[for="rdp-g"]{color:#12100a}

/* ─── المسرح ─── */
.rdp__stage{position:relative; aspect-ratio:800/345; overflow:hidden; background:transparent}

/* حواف نيون أفقية */
.rdp__stage::before,.rdp__stage::after{
  content:""; position:absolute; inset-inline:4%; height:1.6px; z-index:6; pointer-events:none;
  border-radius:999px;
  background-image:
    linear-gradient(90deg,transparent 0%,rgba(0,192,197,.10) 8%,rgba(0,192,197,.60) 20%,
      rgba(81,251,174,.78) 34%,#FFF6DE 50%,var(--gold) 64%,rgba(0,192,197,.55) 80%,
      rgba(0,192,197,.10) 92%,transparent 100%),
    linear-gradient(90deg,transparent 0%,rgba(255,255,255,.92) 48%,rgba(201,255,233,.85) 56%,transparent 100%);
  background-size:100% 100%,16% 100%;
  background-repeat:no-repeat,no-repeat;
  background-position:0 0,-22% 0;
  box-shadow:0 0 9px rgba(227,199,126,.32),0 0 22px rgba(0,192,197,.18);
  animation:rdp-rail 9s cubic-bezier(.45,0,.25,1) infinite;
}
.rdp__stage::before{top:0}
.rdp__stage::after{bottom:0; animation-direction:reverse; animation-delay:1.2s}
@keyframes rdp-rail{
  0%       {background-position:0 0,-22% 0}
  60%,100% {background-position:0 0,122% 0}
}

/* شرطتان ذهبيتان على الطرفين */
.rdp__edge{
  position:absolute; top:24%; bottom:24%; width:1.4px; z-index:6; pointer-events:none;
  border-radius:999px;
  background:linear-gradient(180deg,transparent,var(--gold) 22%,#FFF6DE 50%,var(--gold) 78%,transparent);
  box-shadow:0 0 9px rgba(227,199,126,.5);
  animation:rdp-breath 5.4s ease-in-out infinite;
}
.rdp__edge--r{right:4%}
.rdp__edge--l{left:4%; animation-delay:2.7s}
@keyframes rdp-breath{0%,100%{opacity:.42} 50%{opacity:.9}}

/* ─── اللوحان ─── */
.rdp__p{
  position:absolute; inset:0; opacity:0; transform:scale(1.04); pointer-events:none;
  transition:opacity .5s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
#rdp-d:checked ~ .rdp__stage .rdp__p--d,
#rdp-g:checked ~ .rdp__stage .rdp__p--g{opacity:1; transform:scale(1); pointer-events:auto}

/* الصورة تذوب بالخلفية — قناعان على عنصرين (mask-composite مكسور بكروم) */
.rdp__artv{
  position:absolute; inset:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 82%,rgba(0,0,0,.4) 94%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 82%,rgba(0,0,0,.4) 94%,transparent 100%);
}
.rdp__art{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 44%; display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%);
}

/* ─── المحتوى ─── */
.rdp__in{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  gap:clamp(4px,1.25cqw,10px); padding:clamp(12px,3.5cqw,28px) clamp(16px,6.5cqw,52px) clamp(14px,3.75cqw,30px);
}
.rdp__p--d .rdp__in{
  align-items:flex-start;
  background:linear-gradient(270deg,transparent 0%,rgba(3,10,14,.55) 8%,rgba(3,10,14,.6) 32%,transparent 70%);
}
.rdp__p--g .rdp__in{
  align-items:flex-end; text-align:left;
  background:linear-gradient(90deg,transparent 0%,rgba(10,6,2,.55) 8%,rgba(10,6,2,.6) 32%,transparent 70%);
}

.rdp__name{
  margin:0 0 clamp(1px,.75cqw,6px); font-size:clamp(16px,4.75cqw,38px); font-weight:900; line-height:1.3;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.rdp__p--d .rdp__name{background-image:linear-gradient(100deg,#fff,#dff3ff 40%,#9fd8ff)}
.rdp__p--g .rdp__name{background-image:linear-gradient(100deg,#fff,var(--goldS) 40%,var(--gold))}

.rdp__price{
  display:flex; align-items:baseline; gap:6px; margin:0 0 4px;
  font-size:clamp(21px,5.75cqw,46px); font-weight:900; line-height:1; color:#fff;
}
.rdp__price small{font-size:clamp(8px,2cqw,16px); font-weight:800; color:#cfe3da}

/* كبسولة المزايا */
.rdp__f{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:7px 0;
  max-width:min(272px,42%); padding:clamp(6px,1.4cqw,11px) clamp(8px,2.15cqw,17px); border-radius:clamp(9px,1.9cqw,15px);
  border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg,rgba(7,16,25,.62),rgba(7,16,25,.46));
  -webkit-backdrop-filter:blur(9px) saturate(1.1); backdrop-filter:blur(9px) saturate(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.28);
}
.rdp__f span{
  display:inline-flex; align-items:center; padding:0; border:0; background:none;
  font-size:clamp(8.5px,1.5cqw,12px); font-weight:600; line-height:1.6; color:#e8f4ee; white-space:nowrap;
}
.rdp__f span:not(:last-child)::after{
  content:"◆"; margin-inline:clamp(4px,1cqw,8px); font-size:.62em; color:var(--gold); opacity:.8;
}

.rdp__btn{
  align-self:flex-start; margin-top:clamp(2px,.5cqw,4px); padding:clamp(7px,1.5cqw,12px) clamp(13px,3.25cqw,26px); border-radius:clamp(8px,1.5cqw,12px);
  font-size:clamp(10px,1.9cqw,15px); font-weight:800; text-decoration:none; white-space:nowrap;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.rdp__p--g .rdp__btn{align-self:flex-end}
.rdp__p--d .rdp__btn{color:#07140c; background:linear-gradient(135deg,var(--mint),#2FE0A8 55%,var(--tq)); box-shadow:0 10px 26px rgba(92,244,120,.26)}
.rdp__p--g .rdp__btn{color:#1a1204; background:linear-gradient(135deg,var(--goldS),var(--gold) 50%,var(--goldD)); box-shadow:0 10px 26px rgba(227,199,126,.26)}
.rdp__btn:hover{transform:translateY(-3px)}
.rdp__p--d .rdp__btn:hover{box-shadow:0 16px 36px rgba(92,244,120,.44)}
.rdp__p--g .rdp__btn:hover{box-shadow:0 16px 36px rgba(227,199,126,.44)}

/* ═══════════ الجوال ═══════════ */
@media (max-width:760px){
  /* نفس نسبة الديسكتوب العرضية — بلا قصّ للجوانب */
  .rdp__stage{aspect-ratio:16/9}
  .rdp__art{object-position:50% 42%}
  .rdp__f{max-width:48%}
  .rdp__edge--r{right:3%} .rdp__edge--l{left:3%}
}
@media (prefers-reduced-motion:reduce){
  .rdp__stage::before,.rdp__stage::after,.rdp__edge{animation:none !important}
}

/* ═════════════════════════════════════════════════════════════
   رود بلس — فاصل معنون  .rdv
   ═════════════════════════════════════════════════════════════ */
.rdv{
  --tq:var(--rud-turquoise,#00c0c5); --mint:var(--rud-mint,#51fbae);
  --mintp:var(--rud-mint-pale,#c9ffe9);
  --gold:var(--rud-gold,#e3c77e); --goldS:var(--rud-gold-soft,#f8ebc0);
  display:flex; align-items:center; justify-content:center;
  gap:clamp(12px,2.4vw,26px);
  width:min(100%,1000px); margin:clamp(26px,4.5vw,48px) auto;
  padding:0 clamp(14px,3vw,26px);
  background:transparent; direction:rtl; isolation:isolate;
  font-family:var(--rud-font-occasion,'Cairo',sans-serif);
}
.rdv *{font-family:inherit}

/* ─── الخيوط بنقش السدو ─── */
.rdv__line{position:relative; flex:1 1 0; height:20px; min-width:0}
.rdv__line::before{
  content:""; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg,  rgba(0,192,197,.50) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-45deg, rgba(227,199,126,.40) 0 1px, transparent 1px 11px);
  background-size:20px 20px;
  opacity:.30;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 78%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 78%,transparent 100%);
  transition:opacity .55s ease;
}
.rdv__line::after{
  content:""; position:absolute; inset-inline:0; top:50%; height:1px; transform:translateY(-50%);
  background-image:
    linear-gradient(90deg,transparent 0%,rgba(0,192,197,.68) 30%,rgba(126,222,196,.6) 58%,rgba(227,199,126,.66) 84%,rgba(248,235,192,.5) 100%),
    linear-gradient(90deg,transparent 0%,#E9FFF6 50%,transparent 100%);
  background-size:100% 100%,15% 100%;
  background-repeat:no-repeat,no-repeat;
  background-position:0 0,-22% 0;
  box-shadow:0 0 9px rgba(0,192,197,.22),0 0 12px rgba(227,199,126,.16);
  animation:rdv-run 7s cubic-bezier(.45,0,.25,1) infinite;
}
.rdv__line--l::after{animation-direction:reverse; animation-delay:.9s}
@keyframes rdv-run{
  0%       {background-position:0 0,-22% 0}
  56%,100% {background-position:0 0,122% 0}
}

/* ─── النص ─── */
.rdv__txt{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:5px;
  text-align:center; padding:0 clamp(4px,1vw,10px);
}
.rdv__txt b{
  font-size:clamp(16px,2.1vw,25px); font-weight:900; line-height:1.5; letter-spacing:-.2px;
  background-image:linear-gradient(100deg,#FFFFFF 0%,var(--mintp) 26%,#FFFFFF 46%,var(--goldS) 70%,var(--gold) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));
  animation:rdv-sheen 10s ease-in-out infinite;
  white-space:nowrap;
}
@keyframes rdv-sheen{0%,100%{background-position:0% 50%} 50%{background-position:100% 50%}}
.rdv__txt i{
  font-style:normal; font-size:clamp(11px,1.15vw,14px); font-weight:600; line-height:1.7;
  color:#a8c4b8; letter-spacing:.1px; white-space:nowrap;
}

/* ─── تفاعل ─── */
.rdv:hover .rdv__line::before{opacity:.55}
.rdv:hover .rdv__txt i{color:var(--mintp)}
.rdv__txt i{transition:color .5s ease}

/* ─── الجوال ─── */
@media (max-width:620px){
  /* يبقى الخطان يمين ويسار — خيط واحد نظيف بلا نقش */
  .rdv{gap:11px; margin-block:24px; padding-inline:14px}
  .rdv__line{flex:1 1 0; min-width:22px; height:14px}
  .rdv__line::before{display:none}
  .rdv__txt{max-width:76%}
  .rdv__txt b{white-space:normal; font-size:16px; line-height:1.55}
  .rdv__txt i{white-space:normal; font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  .rdv__line::after,.rdv__txt b{animation:none !important}
}

/* ═════════════════════════════════════════════════════════════
   رود بلس — الأقسام  .rdc  (الشريط الثلاثي المائل)
   ═════════════════════════════════════════════════════════════ */
.rdc{
  --tq:var(--rud-turquoise,#00c0c5); --mint:var(--rud-mint,#51fbae); --mintp:var(--rud-mint-pale,#c9ffe9);
  --gold:var(--rud-gold,#e3c77e); --goldS:var(--rud-gold-soft,#f8ebc0);
  position:relative; width:min(100%,1160px); aspect-ratio:1160/400; margin:0 auto;
  direction:rtl; background:transparent; isolation:isolate; container-type:inline-size;
  font-family:var(--rud-font-occasion,'Cairo',sans-serif);
}
.rdc *{font-family:inherit; box-sizing:border-box}

/* ─── الشرائح ─── */
.rdc__s{position:absolute; inset:0; display:block; overflow:hidden; text-decoration:none; color:#fff;
  transition:clip-path .65s cubic-bezier(.22,1,.36,1)}
.rdc__s--1{clip-path:polygon(100% 0,100% 100%,60% 100%,70% 0)}
.rdc__s--2{clip-path:polygon(69% 0,59% 100%,29% 100%,39% 0)}
.rdc__s--3{clip-path:polygon(38% 0,28% 100%,0 100%,0 0)}
/* توسّع الشريحة عند المرور وانضغاط جارتيها */
.rdc:has(.rdc__s--1:hover) .rdc__s--1{clip-path:polygon(100% 0,100% 100%,46% 100%,56% 0)}
.rdc:has(.rdc__s--1:hover) .rdc__s--2{clip-path:polygon(55% 0,45% 100%,22% 100%,32% 0)}
.rdc:has(.rdc__s--1:hover) .rdc__s--3{clip-path:polygon(31% 0,21% 100%,0 100%,0 0)}
.rdc:has(.rdc__s--3:hover) .rdc__s--3{clip-path:polygon(52% 0,42% 100%,0 100%,0 0)}
.rdc:has(.rdc__s--3:hover) .rdc__s--2{clip-path:polygon(78% 0,68% 100%,43% 100%,53% 0)}
.rdc:has(.rdc__s--3:hover) .rdc__s--1{clip-path:polygon(100% 0,100% 100%,69% 100%,79% 0)}
.rdc:has(.rdc__s--2:hover) .rdc__s--2{clip-path:polygon(76% 0,66% 100%,22% 100%,32% 0)}
.rdc:has(.rdc__s--2:hover) .rdc__s--1{clip-path:polygon(100% 0,100% 100%,67% 100%,77% 0)}
.rdc:has(.rdc__s--2:hover) .rdc__s--3{clip-path:polygon(31% 0,21% 100%,0 100%,0 0)}

/* ─── الصور تذوب بالخلفية: قناع رأسي على الغلاف وأفقي على الصورة ─── */
.rdc__art{position:absolute; inset:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 46%,rgba(0,0,0,.35) 58%,transparent 67%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 46%,rgba(0,0,0,.35) 58%,transparent 67%)}
.rdc__img{position:absolute; top:0; height:68%; object-fit:contain; object-position:50% 100%; display:block;
  transition:transform .8s cubic-bezier(.22,1,.36,1), filter .6s ease}
.rdc__s--1 .rdc__img{right:1.5%; width:36%;
  -webkit-mask-image:linear-gradient(270deg,transparent 0%,rgba(0,0,0,.4) 5%,#000 16%);
          mask-image:linear-gradient(270deg,transparent 0%,rgba(0,0,0,.4) 5%,#000 16%)}
.rdc__s--2 .rdc__img{left:31%; width:36%}
.rdc__s--3 .rdc__img{left:1.5%; width:36%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 5%,#000 16%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 5%,#000 16%)}
.rdc__s:hover .rdc__img{transform:scale(1.06); filter:saturate(1.08) brightness(1.05)}
/* ستارة سفلية خفيفة تحت النص */
.rdc__art::after{content:""; position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(3,10,14,.55) 0%,rgba(3,10,14,.2) 22%,transparent 40%)}

/* ─── النصوص — كل نص داخل شريحته ─── */
.rdc__in{position:absolute; top:68%; bottom:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:clamp(2px,.35cqw,4px); padding:0 clamp(6px,1.2cqw,14px) clamp(4px,.8cqw,10px);
  transition:transform .55s cubic-bezier(.22,1,.36,1)}
.rdc__s--1 .rdc__in{right:0; left:62%}
.rdc__s--2 .rdc__in{right:34%; left:34%; transition:transform .55s cubic-bezier(.22,1,.36,1), right .65s cubic-bezier(.22,1,.36,1), left .65s cubic-bezier(.22,1,.36,1)}
.rdc:has(.rdc__s--1:hover) .rdc__s--2 .rdc__in{right:50%; left:22%}
.rdc:has(.rdc__s--3:hover) .rdc__s--2 .rdc__in{right:24%; left:48%}
.rdc:has(.rdc__s--2:hover) .rdc__s--2 .rdc__in{right:30%; left:30%}
.rdc__s--1 .rdc__in,.rdc__s--3 .rdc__in{transition:transform .55s cubic-bezier(.22,1,.36,1), right .65s cubic-bezier(.22,1,.36,1), left .65s cubic-bezier(.22,1,.36,1)}
.rdc:has(.rdc__s--1:hover) .rdc__s--1 .rdc__in{left:52%}
.rdc:has(.rdc__s--3:hover) .rdc__s--3 .rdc__in{right:56%}
.rdc:has(.rdc__s--2:hover) .rdc__s--1 .rdc__in{left:70%}
.rdc:has(.rdc__s--2:hover) .rdc__s--3 .rdc__in{right:76%}
.rdc__s--3 .rdc__in{right:70%; left:0}
.rdc__s:hover .rdc__in{transform:translateY(-3px)}
.rdc__n{font-size:clamp(12px,2.05cqw,24px); font-weight:900; line-height:1.35; white-space:nowrap;
  background-image:linear-gradient(100deg,#fff,var(--mintp) 42%,var(--goldS) 78%,var(--gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))}
.rdc__t{font-style:normal; font-size:clamp(8.5px,1.05cqw,12.5px); font-weight:600; color:#a8c4b8; white-space:nowrap}
.rdc__go{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:clamp(4px,.6cqw,7px); margin-top:clamp(5px,.9cqw,10px);
  padding:clamp(4px,.6cqw,8px) clamp(10px,1.5cqw,18px); border-radius:999px; white-space:nowrap;
  color:#07140c; font-size:clamp(8.5px,1.1cqw,13px); font-weight:800;
  background:linear-gradient(135deg,var(--rud-green,#5CF478),#2FE0A8 55%,var(--tq));
  box-shadow:0 8px 22px rgba(92,244,120,.22), inset 0 1px 0 rgba(255,255,255,.35);
  animation:rdc-pill-glow 4.6s ease-in-out infinite;
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease}
.rdc__go::before{content:"تصفّح القسم"}
/* لمعة خفيفة جداً تمر على الكبسولة */
.rdc__go::after{content:""; position:absolute; top:0; bottom:0; width:38%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-240%); animation:rdc-pill-sheen 6.5s ease-in-out infinite}
@keyframes rdc-pill-sheen{0%,58%{transform:translateX(-240%)} 86%,100%{transform:translateX(320%)}}
@keyframes rdc-pill-glow{0%,100%{box-shadow:0 8px 22px rgba(92,244,120,.20), inset 0 1px 0 rgba(255,255,255,.35)} 50%{box-shadow:0 10px 30px rgba(92,244,120,.42), inset 0 1px 0 rgba(255,255,255,.35)}}
.rdc__s:hover .rdc__go{transform:translateY(-3px); box-shadow:0 14px 34px rgba(92,244,120,.46), inset 0 1px 0 rgba(255,255,255,.4)}

/* ─── الخطان الذهبيان المائلان ─── */
.rdc__edge{position:absolute; inset:0; z-index:5; pointer-events:none;
  filter:drop-shadow(0 0 9px rgba(227,199,126,.55));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent);
  transition:clip-path .65s cubic-bezier(.22,1,.36,1)}
.rdc__edge--a{clip-path:polygon(69.6% 0,70.2% 0,60.2% 100%,59.6% 100%)}
.rdc__edge--b{clip-path:polygon(38.6% 0,39.2% 0,29.2% 100%,28.6% 100%)}
.rdc:has(.rdc__s--1:hover) .rdc__edge--a{clip-path:polygon(55.6% 0,56.2% 0,46.2% 100%,45.6% 100%)}
.rdc:has(.rdc__s--1:hover) .rdc__edge--b{clip-path:polygon(31.6% 0,32.2% 0,22.2% 100%,21.6% 100%)}
.rdc:has(.rdc__s--3:hover) .rdc__edge--a{clip-path:polygon(78.6% 0,79.2% 0,69.2% 100%,68.6% 100%)}
.rdc:has(.rdc__s--3:hover) .rdc__edge--b{clip-path:polygon(52.6% 0,53.2% 0,43.2% 100%,42.6% 100%)}
.rdc:has(.rdc__s--2:hover) .rdc__edge--a{clip-path:polygon(76.6% 0,77.2% 0,67.2% 100%,66.6% 100%)}
.rdc:has(.rdc__s--2:hover) .rdc__edge--b{clip-path:polygon(31.6% 0,32.2% 0,22.2% 100%,21.6% 100%)}

/* ─── الجوال: نفس التخطيط، نسبة أطول قليلاً ─── */
@media (max-width:760px){
  .rdc{aspect-ratio:3/2}
  .rdc__img{object-position:50% 100%}
  .rdc__s--2 .rdc__in{right:36.5%; left:36.5%}
  .rdc__n{font-size:clamp(11px,2.05cqw,24px)}
  .rdc__t{font-size:clamp(8px,1.05cqw,12.5px)}
}

/* ─── حواف نيون أفقية (ذهبي × هوية رود) تتلاشى بالأطراف ─── */
.rdc::before,.rdc::after{
  content:""; position:absolute; inset-inline:4%; height:1.6px; z-index:6; pointer-events:none; border-radius:999px;
  background-image:
    linear-gradient(90deg,transparent 0%,rgba(0,192,197,.10) 8%,rgba(0,192,197,.60) 20%,rgba(81,251,174,.78) 34%,#FFF6DE 50%,var(--gold) 64%,rgba(0,192,197,.55) 80%,rgba(0,192,197,.10) 92%,transparent 100%),
    linear-gradient(90deg,transparent 0%,rgba(255,255,255,.92) 48%,rgba(201,255,233,.85) 56%,transparent 100%);
  background-size:100% 100%,16% 100%; background-repeat:no-repeat,no-repeat; background-position:0 0,-22% 0;
  box-shadow:0 0 9px rgba(227,199,126,.32),0 0 22px rgba(0,192,197,.18);
  animation:rdc-rail 9s cubic-bezier(.45,0,.25,1) infinite;
}
.rdc::before{top:0} .rdc::after{bottom:0; animation-direction:reverse; animation-delay:1.2s}
@keyframes rdc-rail{0%{background-position:0 0,-22% 0} 60%,100%{background-position:0 0,122% 0}}

/* ─── شرارة تجري على الخطين المائلين ─── */
.rdc__edge{
  background-image:
    linear-gradient(180deg,rgba(227,199,126,.10),var(--gold) 30%,#FFF6DE 50%,var(--gold) 70%,rgba(227,199,126,.10)),
    linear-gradient(180deg,transparent 0%,rgba(255,255,255,.95) 50%,transparent 100%);
  background-size:100% 100%,100% 22%; background-repeat:no-repeat,no-repeat; background-position:0 0,0 -30%;
  animation:rdc-spark 6.5s cubic-bezier(.45,0,.25,1) infinite;
}
.rdc__edge--b{animation-delay:1.6s}
@keyframes rdc-spark{0%{background-position:0 0,0 -30%} 62%,100%{background-position:0 0,0 130%}}
.rdc:hover .rdc__edge{filter:drop-shadow(0 0 14px rgba(227,199,126,.9))}
@media (prefers-reduced-motion:reduce){.rdc::before,.rdc::after,.rdc__edge,.rdc__go,.rdc__go::after{animation:none !important}}

/* ═════════════════════════════════════════════════════════════
   رود بلس — خطوات الشراء  .rdz  (المسار القطري من زاوية لزاوية)
   ═════════════════════════════════════════════════════════════ */
.rdz{
  --tq:var(--rud-turquoise,#00c0c5); --mint:var(--rud-mint,#51fbae); --mintp:var(--rud-mint-pale,#c9ffe9);
  --gold:var(--rud-gold,#e3c77e); --goldS:var(--rud-gold-soft,#f8ebc0); --goldD:var(--rud-gold-dark,#b98f3c);
  position:relative; width:min(100%,1060px); margin:0 auto; direction:rtl; background:transparent; isolation:isolate;
  container-type:inline-size; font-family:var(--rud-font-occasion,'Cairo',sans-serif); color:#fff;
}
.rdz *{font-family:inherit; box-sizing:border-box}

/* ─── العنوان ─── */
.rdz__head{display:flex; flex-direction:column; align-items:center; gap:clamp(4px,.7cqw,8px); margin-bottom:clamp(10px,2cqw,22px); text-align:center}
.rdz__kick{display:inline-flex; align-items:center; gap:8px; padding:clamp(4px,.55cqw,6px) clamp(10px,1.5cqw,16px); border-radius:999px;
  border:1px solid rgba(0,192,197,.45); color:var(--mintp); font-size:clamp(10px,1.2cqw,13px); font-weight:700; background:rgba(7,16,25,.35);
  animation:rdz-breath 4.8s ease-in-out infinite}
.rdz__kick::before,.rdz__kick::after{content:"◆"; font-size:.6em; color:var(--gold); opacity:.85}
@keyframes rdz-breath{0%,100%{box-shadow:0 0 0 rgba(0,192,197,0)} 50%{box-shadow:0 0 16px rgba(0,192,197,.28)}}
.rdz__title{margin:0; font-size:clamp(22px,4.4cqw,48px); font-weight:900; line-height:1.35; letter-spacing:-.3px; filter:drop-shadow(0 3px 14px rgba(0,0,0,.5))}
.rdz__title b{font-weight:900; background-image:linear-gradient(100deg,var(--mint),var(--tq)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.rdz__title em{font-style:normal; font-weight:900; background-image:linear-gradient(100deg,var(--goldS),var(--gold) 60%,var(--goldD)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

/* ─── المسرح القطري ─── */
.rdz__stage{position:relative; width:100%; aspect-ratio:1060/440}

/* المنحنى الضوئي بين الخطوات (منحنى S ناعم بدل الخط المستقيم) */
.rdz__curve{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.rdz__curve path{fill:none; stroke-linecap:round}
.rdz__c-glow{stroke:url(#rdzGrad); stroke-width:10; opacity:.22; filter:blur(7px)}
.rdz__c-line{stroke:url(#rdzGrad); stroke-width:1.6; opacity:.85}
.rdz__c-beads{stroke:#e3c77e; stroke-width:3; stroke-dasharray:0.1 26; opacity:.75; animation:rdz-beads 9s linear infinite}
@keyframes rdz-beads{to{stroke-dashoffset:-52}}
.rdz__c-pulse{stroke:#FFF6DE; stroke-width:2.6; stroke-dasharray:46 1400; stroke-dashoffset:46; filter:drop-shadow(0 0 6px #FFF6DE) drop-shadow(0 0 14px rgba(81,251,174,.8));
  animation:rdz-pulse 5.4s cubic-bezier(.45,0,.25,1) infinite}
@keyframes rdz-pulse{0%{stroke-dashoffset:46} 70%,100%{stroke-dashoffset:-1000}}

/* ─── الخطوات: دوائر كريستالية على القطر ─── */
.rdz__step{position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:clamp(6px,.9cqw,10px);
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.rdz__step--1{left:82%; top:22%} .rdz__step--2{left:50%; top:50%} .rdz__step--3{left:18%; top:78%}
.rdz__step:hover{transform:translate(-50%,-50%) translateY(-5px)}
.rdz__disc{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(1px,.3cqw,3px);
  width:clamp(68px,10.4cqw,112px); height:clamp(68px,10.4cqw,112px); border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.2),transparent 46%),linear-gradient(150deg,#12363e,#08171d 60%,#061015);
  box-shadow:0 16px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(0,192,197,.32);
  animation:rdz-node 5.4s ease-in-out infinite}
.rdz__step--1 .rdz__disc{animation-delay:.2s} .rdz__step--2 .rdz__disc{animation-delay:1.9s} .rdz__step--3 .rdz__disc{animation-delay:3.6s}
@keyframes rdz-node{0%,100%{box-shadow:0 16px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(0,192,197,.32)}
  14%{box-shadow:0 16px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(0,192,197,.95), 0 0 30px rgba(81,251,174,.5)}}
/* حلقة ذهبية شعرية تدور */
.rdz__ring{position:absolute; inset:-6px; border-radius:50%; padding:1.3px;
  background:conic-gradient(from 0deg,transparent 0 38%,var(--gold) 50%,#FFF6DE 55%,var(--gold) 60%,transparent 72% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.6; animation:rdz-ring 10s linear infinite; transition:opacity .4s ease}
.rdz__step:hover .rdz__ring{opacity:1; animation-duration:2.6s}
@keyframes rdz-ring{to{transform:rotate(360deg)}}
.rdz__num{font-size:clamp(11px,1.5cqw,16px); font-weight:900; line-height:1; letter-spacing:.5px;
  background-image:linear-gradient(180deg,var(--goldS),var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.rdz__ico{display:grid; place-items:center; width:clamp(26px,4cqw,44px); height:clamp(26px,4cqw,44px); color:var(--mintp); transition:color .4s ease, filter .4s ease}
.rdz__ico svg{width:100%; height:100%}
.rdz__step:hover .rdz__ico{color:var(--goldS); filter:drop-shadow(0 0 10px rgba(227,199,126,.55))}
.rdz__txt{display:flex; flex-direction:column; align-items:center; text-align:center; gap:1px; white-space:nowrap}
.rdz__txt b{font-size:clamp(13px,1.9cqw,21px); font-weight:900; line-height:1.25}
.rdz__txt small{font-size:clamp(8.5px,1.1cqw,12.5px); font-weight:600; color:#a8c4b8; line-height:1.4}

/* ─── الجوال: نفس القطر، مسرح أطول ─── */

/* ─── تفاعل إضافي: المرور على خطوة يُبرزها ويهدّئ الباقي ويُشعل المنحنى ─── */
.rdz__step,.rdz__disc,.rdz__c-glow,.rdz__c-line{transition:opacity .5s ease, filter .5s ease, transform .5s cubic-bezier(.22,1,.36,1)}
.rdz__stage:has(.rdz__step:hover) .rdz__step:not(:hover){opacity:.55; filter:saturate(.75)}
.rdz__stage:has(.rdz__step:hover) .rdz__c-glow{opacity:.5}
.rdz__stage:has(.rdz__step:hover) .rdz__c-line{opacity:1; filter:drop-shadow(0 0 6px rgba(81,251,174,.7))}
.rdz__stage:has(.rdz__step:hover) .rdz__c-pulse{animation-duration:2.4s}
.rdz__step:hover .rdz__disc{transform:rotate(-6deg) scale(1.07); box-shadow:0 22px 46px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(227,199,126,.9), 0 0 34px rgba(227,199,126,.35); animation-play-state:paused}
.rdz__step:hover .rdz__num{filter:drop-shadow(0 0 8px rgba(227,199,126,.8))}
.rdz__step:hover .rdz__txt b{color:var(--goldS); transition:color .4s ease}
.rdz__title{transition:letter-spacing .6s ease}
.rdz:hover .rdz__title{letter-spacing:.2px}

@media (max-width:760px){
    .rdz__stage{aspect-ratio:1/1.1}
}
@media (prefers-reduced-motion:reduce){.rdz *,.rdz *::before,.rdz *::after{animation:none !important}}

/* ═════════════════════════════════════════════════════════════
   رود بلس — الأسئلة الشائعة  .rdq  (أكورديون كريستالي بنيون متحرك)
   ═════════════════════════════════════════════════════════════ */
@property --rdq-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.rdq{
  --tq:var(--rud-turquoise,#00c0c5); --mint:var(--rud-mint,#51fbae); --mintp:var(--rud-mint-pale,#c9ffe9);
  --gold:var(--rud-gold,#e3c77e); --goldS:var(--rud-gold-soft,#f8ebc0); --goldD:var(--rud-gold-dark,#b98f3c);
  position:relative; width:min(100%,940px); margin:0 auto; direction:rtl; background:transparent; isolation:isolate;
  container-type:inline-size; font-family:var(--rud-font-occasion,'Cairo',sans-serif); color:#fff;
}
.rdq *{font-family:inherit; box-sizing:border-box}

/* ─── العنوان ─── */
.rdq__head{display:flex; flex-direction:column; align-items:center; gap:clamp(4px,.7cqw,8px); margin-bottom:clamp(14px,2.4cqw,26px); text-align:center}
.rdq__kick{display:inline-flex; align-items:center; gap:8px; padding:clamp(4px,.55cqw,6px) clamp(10px,1.5cqw,16px); border-radius:999px;
  border:1px solid rgba(0,192,197,.45); color:var(--mintp); font-size:clamp(10px,1.25cqw,13px); font-weight:700; background:rgba(7,16,25,.35);
  animation:rdq-breath 4.8s ease-in-out infinite}
.rdq__kick::before,.rdq__kick::after{content:"◆"; font-size:.6em; color:var(--gold); opacity:.85}
@keyframes rdq-breath{0%,100%{box-shadow:0 0 0 rgba(0,192,197,0)} 50%{box-shadow:0 0 16px rgba(0,192,197,.28)}}
.rdq__title{margin:0; font-size:clamp(22px,4.6cqw,46px); font-weight:900; line-height:1.35; letter-spacing:-.3px; filter:drop-shadow(0 3px 14px rgba(0,0,0,.5))}
.rdq__title b{font-weight:900; background-image:linear-gradient(100deg,var(--goldS),var(--gold) 45%,var(--goldD) 70%,var(--goldS));
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:rdq-flow 7s ease-in-out infinite alternate}
@keyframes rdq-flow{to{background-position:100% 50%}}
.rdq__sub{margin:0; max-width:62ch; color:#a8c4b8; font-size:clamp(11px,1.45cqw,14.5px); font-weight:600; line-height:1.85}
/* نقش سدو ذهبي يتلاشى من الطرفين */
.rdq__sadu{display:block; width:min(100%,520px); height:clamp(7px,1cqw,10px); margin-top:clamp(8px,1.4cqw,14px);
  background:repeating-linear-gradient(45deg,transparent 0 7px,rgba(227,199,126,.55) 7px 10px,transparent 10px 17px,rgba(0,192,197,.35) 17px 20px,transparent 20px 27px),
             repeating-linear-gradient(-45deg,transparent 0 7px,rgba(227,199,126,.45) 7px 10px,transparent 10px 17px,rgba(81,251,174,.25) 17px 20px,transparent 20px 27px);
  border-top:1px solid rgba(227,199,126,.55); border-bottom:1px solid rgba(227,199,126,.4);
  -webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent); mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}

/* ─── القائمة ─── */
.rdq__list{counter-reset:rdq; display:flex; flex-direction:column; gap:clamp(8px,1.2cqw,12px)}
.rdq__item{counter-increment:rdq; position:relative; isolation:isolate;
  clip-path:polygon(16px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 16px),calc(100% - 16px) 100%,7px 100%,0 calc(100% - 7px),0 16px);
  background:linear-gradient(150deg,rgba(18,54,62,.72),rgba(8,23,29,.78) 60%,rgba(6,16,21,.8));
  box-shadow:0 14px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, opacity .45s ease, filter .45s ease}
/* الحافة: خط شعري ثابت + مذنّب نيون يدور حول البطاقة */
.rdq__item::before,.rdq__item::after{content:""; position:absolute; inset:0; padding:1px; pointer-events:none; z-index:1;
  clip-path:polygon(16px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 16px),calc(100% - 16px) 100%,7px 100%,0 calc(100% - 7px),0 16px);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.rdq__item::before{background:linear-gradient(135deg,rgba(227,199,126,.5),rgba(0,192,197,.28) 35%,rgba(227,199,126,.16) 65%,rgba(0,192,197,.45))}
.rdq__item::after{--rdq-a:0deg; opacity:0; padding:1.4px;
  background:conic-gradient(from var(--rdq-a) at 50% 50%,transparent 0 58%,var(--tq) 72%,#fff 78%,var(--mint) 84%,transparent 96%);
  filter:drop-shadow(0 0 6px rgba(81,251,174,.85)); transition:opacity .5s ease; animation:rdq-comet 4.2s linear infinite}
@keyframes rdq-comet{to{--rdq-a:360deg}}
.rdq__item[open]::after,.rdq__item:hover::after{opacity:1}
.rdq__item[open]{box-shadow:0 18px 40px rgba(0,0,0,.42), 0 0 26px rgba(0,192,197,.14), inset 0 1px 0 rgba(255,255,255,.08)}
/* خط ضوء علوي عند الفتح */
.rdq__item .rdq__q::after{content:""; position:absolute; top:0; right:14%; left:14%; height:1px; opacity:0;
  background:linear-gradient(90deg,transparent,rgba(227,199,126,.9) 30%,#fff6de 50%,rgba(0,192,197,.9) 70%,transparent); filter:blur(.2px); transition:opacity .5s ease}
.rdq__item[open] .rdq__q::after{opacity:.9}

/* ─── السؤال ─── */
.rdq__q{position:relative; z-index:2; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:clamp(9px,1.4cqw,16px);
  min-height:clamp(58px,8cqw,76px); padding:clamp(8px,1.2cqw,12px) clamp(12px,2cqw,20px); cursor:pointer; list-style:none; color:#fff; -webkit-tap-highlight-color:transparent}
.rdq__q::-webkit-details-marker{display:none}
.rdq__q b{display:block; min-width:0; font-size:clamp(13px,1.75cqw,17.5px); font-weight:800; line-height:1.6; transition:color .35s ease}
.rdq__item[open] .rdq__q b,.rdq__q:hover b{color:var(--mintp)}
/* الرقم: قرص كريستالي صغير بحلقة ذهبية تدور */
.rdq__n{position:relative; display:grid; place-items:center; width:clamp(34px,4.6cqw,44px); height:clamp(34px,4.6cqw,44px); border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.18),transparent 46%),linear-gradient(150deg,#12363e,#08171d 60%,#061015);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(0,192,197,.3), 0 6px 14px rgba(0,0,0,.4)}
.rdq__n::before{content:counter(rdq,decimal-leading-zero); direction:ltr; font-size:clamp(10px,1.3cqw,13px); font-weight:900; letter-spacing:.6px; line-height:1;
  background-image:linear-gradient(180deg,var(--goldS),var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.rdq__n::after{content:""; position:absolute; inset:-4px; border-radius:50%; padding:1.2px;
  background:conic-gradient(from 0deg,transparent 0 40%,var(--gold) 52%,#fff6de 57%,var(--gold) 62%,transparent 74% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.45; animation:rdq-ring 9s linear infinite; transition:opacity .4s ease}
.rdq__item[open] .rdq__n::after,.rdq__item:hover .rdq__n::after{opacity:1; animation-duration:2.8s}
@keyframes rdq-ring{to{transform:rotate(360deg)}}
/* زر + / − */
.rdq__plus{position:relative; width:clamp(30px,4cqw,38px); height:clamp(30px,4cqw,38px); border-radius:50%;
  background:linear-gradient(150deg,rgba(18,54,62,.9),rgba(6,16,21,.95)); box-shadow:0 0 0 1px rgba(0,192,197,.4), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .4s ease}
.rdq__plus::before,.rdq__plus::after{content:""; position:absolute; left:50%; top:50%; width:38%; height:1.6px; border-radius:2px; background:var(--mintp);
  transform:translate(-50%,-50%); transition:transform .45s cubic-bezier(.22,1,.36,1), background .4s ease}
.rdq__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.rdq__q:hover .rdq__plus{box-shadow:0 0 0 1px rgba(0,192,197,.9), 0 0 16px rgba(0,192,197,.35), inset 0 1px 0 rgba(255,255,255,.08)}
.rdq__item[open] .rdq__plus{transform:rotate(180deg); box-shadow:0 0 0 1px var(--gold), 0 0 18px rgba(227,199,126,.35), inset 0 1px 0 rgba(255,255,255,.08)}
.rdq__item[open] .rdq__plus::before,.rdq__item[open] .rdq__plus::after{background:var(--goldS)}
.rdq__item[open] .rdq__plus::after{transform:translate(-50%,-50%) rotate(0deg)}

/* ─── الجواب ─── */
.rdq__a{position:relative; z-index:2; margin:0 calc(clamp(12px,2cqw,20px) + clamp(34px,4.6cqw,44px) + clamp(9px,1.4cqw,16px)) 0 calc(clamp(12px,2cqw,20px) + clamp(30px,4cqw,38px) + clamp(9px,1.4cqw,16px));
  padding:0 0 clamp(14px,2cqw,20px); color:#b9d6ca; font-size:clamp(11.5px,1.5cqw,15px); font-weight:600; line-height:1.95;
  animation:rdq-reveal .45s cubic-bezier(.22,.61,.36,1) both}
.rdq__a::before{content:""; display:block; height:1px; margin:0 0 clamp(10px,1.4cqw,14px);
  background:linear-gradient(90deg,transparent,rgba(227,199,126,.35) 20%,rgba(0,192,197,.45) 50%,rgba(227,199,126,.35) 80%,transparent)}
.rdq__a p{margin:0; padding-right:clamp(10px,1.4cqw,14px); border-right:1.5px solid; border-image:linear-gradient(180deg,var(--gold),var(--tq)) 1}
@keyframes rdq-reveal{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)}}

/* ─── التفاعل: المرور يرفع البطاقة ويهدّئ الباقي ─── */
@media(hover:hover){
  .rdq__item:hover{transform:translateY(-3px)}
  .rdq__list:has(.rdq__item:hover) .rdq__item:not(:hover){opacity:.62; filter:saturate(.8)}
}
@media(prefers-reduced-motion:reduce){.rdq *,.rdq *::before,.rdq *::after{animation:none!important; transition:none!important}}

/* ═════════════════════════════════════════════════════════════
   رود بلس — توحيد البنر مع الهوية التركوازية (يُلصق بالآخر، يُكمل ولا يحذف)
   ═════════════════════════════════════════════════════════════ */
.rd-hero{--tq:#00C0C5; --mint:#51FBAE; --mintp:#C9FFE9}

/* ١) مسحة تركوازية باردة فوق الصورة تشتد جهة النص، وهالة تركوازية بالزاوية */
.rd-hero__scrim{
  background:
    linear-gradient(270deg, rgba(4,12,9,0) 40%, rgba(0,72,84,.20) 64%, rgba(0,60,70,.40) 84%, rgba(7,16,25,.55) 100%),
    radial-gradient(ellipse 55% 70% at 12% 50%, rgba(0,192,197,.30), transparent 70%),
    radial-gradient(ellipse 40% 40% at 96% 8%, rgba(0,192,197,.16), transparent 70%),
    linear-gradient(180deg, rgba(0,192,197,.06), rgba(0,192,197,0) 35%, rgba(0,192,197,0) 70%, rgba(0,120,130,.22));
}
.rd-hero__img{filter:saturate(.94) contrast(1.02)}
.rd-hero:hover .rd-hero__img{filter:saturate(1) contrast(1.04)}

/* ٢) خطان نيون تركوازيان: أعلى البنر + الحافة اليسرى (جهة النص) — زي شرائط الباقات */
.rd-hero__scrim::before,.rd-hero__scrim::after{content:""; position:absolute; pointer-events:none; border-radius:999px}
.rd-hero__scrim::before{
  top:0; left:6%; right:6%; height:2px;
  background:linear-gradient(90deg, transparent, rgba(0,192,197,.25) 15%, var(--tq) 38%, #F4FFFA 50%, var(--mint) 62%, rgba(0,192,197,.25) 85%, transparent);
  background-size:220% 100%; box-shadow:0 0 14px rgba(0,192,197,.45), 0 0 36px rgba(81,251,174,.18);
  animation:rdTqRule 9s ease-in-out infinite;
}
.rd-hero__scrim::after{
  left:0; top:10%; bottom:16%; width:1.5px;
  background:linear-gradient(180deg, transparent, rgba(0,192,197,.35) 20%, var(--tq) 50%, rgba(0,192,197,.35) 80%, transparent);
  box-shadow:0 0 14px rgba(0,192,197,.5), 0 0 30px rgba(0,192,197,.2);
  animation:rdTqBreath 4.8s ease-in-out infinite;
}
@keyframes rdTqRule{0%,100%{background-position:0% 50%} 50%{background-position:100% 50%}}
@keyframes rdTqBreath{0%,100%{opacity:.55} 50%{opacity:1}}

/* ٣) الشارة العلوية: تركوازية بمعيّنات ذهبية */
.rd-hero__kicker{
  border-color:rgba(0,192,197,.55); color:var(--mintp);
  background:linear-gradient(180deg, rgba(0,192,197,.16), rgba(0,192,197,.04));
  animation:rdKickTq 4.8s ease-in-out infinite;
}
@keyframes rdKickTq{
  0%,100%{box-shadow:0 0 0 0 rgba(0,192,197,0), inset 0 0 12px rgba(0,192,197,.06)}
  50%    {box-shadow:0 0 18px 0 rgba(0,192,197,.32), inset 0 0 12px rgba(0,192,197,.16)}
}

/* ٤) السطر التعريفي بلون المنت الباهت */
.rd-hero__sub{color:var(--mintp); opacity:.9}

/* ٥) الزر الشفاف تركوازي */
.rd-hero__btn--ghost{border-color:rgba(0,192,197,.55); color:var(--mintp)}
.rd-hero__btn--ghost:hover{background:rgba(0,192,197,.14); border-color:rgba(0,192,197,.95); box-shadow:0 10px 26px rgba(0,192,197,.22)}

/* ٦) الغبار: ذهبي + تركوازي */
.rd-hero__media::before{
  background-image:
    radial-gradient(1.6px 1.6px at 18% 24%, rgba(248,235,192,.85), transparent 60%),
    radial-gradient(1.4px 1.4px at 31% 68%, rgba(81,251,174,.75),  transparent 60%),
    radial-gradient(1.9px 1.9px at 9%  56%, rgba(227,199,126,.7),  transparent 60%),
    radial-gradient(1.3px 1.3px at 24% 88%, rgba(0,192,197,.8),    transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 16%, rgba(0,192,197,.7),    transparent 60%),
    radial-gradient(1.1px 1.1px at 13% 78%, rgba(248,235,192,.5),  transparent 60%),
    radial-gradient(1.4px 1.4px at 36% 40%, rgba(81,251,174,.6),   transparent 60%);
}

/* ٧) نقش السدو على الحافتين: الخط الثالث تركوازي بدل الأخضر */
.rd-hero__sadu{
  background-image:
    repeating-linear-gradient(45deg,  var(--gold) 0 1.4px, transparent 1.4px 12px),
    repeating-linear-gradient(-45deg, var(--gold) 0 1.4px, transparent 1.4px 12px),
    repeating-linear-gradient(180deg, rgba(0,192,197,.5) 0 1.2px, transparent 1.2px 24px);
}

/* ٨) الخط الذهبي بالأسفل: أطرافه تركوازية ليسلّم للسكشن التالي */
.rd-hero::after{
  background:linear-gradient(90deg,
    transparent 0%, rgba(0,192,197,.35) 8%, var(--tq) 16%, var(--gold-dp) 30%,
    var(--gold) 42%, #FFF8E4 50%, var(--gold) 58%,
    var(--gold-dp) 70%, var(--tq) 84%, rgba(0,192,197,.35) 92%, transparent 100%);
  background-size:240% 100%;
  box-shadow:0 0 16px rgba(227,199,126,.28), 0 0 42px rgba(0,192,197,.16);
}

/* الجوال: المسحة من الأسفل (النص تحت الصورة) والخط الجانبي أقصر */
@media (max-width:820px){
  .rd-hero__scrim{
    background:
      linear-gradient(0deg, rgba(0,60,70,.42) 0%, rgba(0,72,84,.18) 30%, rgba(4,12,9,0) 55%),
      radial-gradient(ellipse 70% 45% at 50% 100%, rgba(0,192,197,.22), transparent 70%),
      linear-gradient(180deg, rgba(0,192,197,.07), rgba(0,192,197,0) 30%);
  }
  .rd-hero__scrim::after{top:14%; bottom:30%}
}