:root {
  --red: #ff1e3c;
  --red-2: #dc2626;
  --red-glow: rgba(255, 30, 60, 0.45);
  --bg: #0a0a0b;
  --bg-2: #121214;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Vazirmatn', system-ui, sans-serif;
  background: var(--bg);
  color: #e5e5e5;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(255,30,60,0.10), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(220,38,38,0.08), transparent 45%);
  background-attachment: fixed;
}

.rd-logo {
  background: linear-gradient(135deg, var(--red), var(--red-2));
  box-shadow: 0 0 18px var(--red-glow);
}

/* Buttons */
.rd-btn {
  background: linear-gradient(135deg, var(--red), var(--red-2));
  color: #fff;
  box-shadow: 0 6px 22px -6px var(--red-glow);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.rd-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 32px -4px var(--red-glow);
  filter: brightness(1.08);
}
.rd-btn:active { transform: translateY(0) scale(.99); }

.rd-btn-outline {
  border: 1px solid rgba(255,30,60,0.5);
  color: #fff;
  background: rgba(255,30,60,0.05);
  transition: all .18s;
}
.rd-btn-outline:hover {
  background: rgba(255,30,60,0.14);
  border-color: var(--red);
  transform: translateY(-2px);
}

/* Badge */
.rd-badge {
  background: rgba(255,30,60,0.10);
  border: 1px solid rgba(255,30,60,0.3);
  color: #ffb3bf;
}
.rd-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.4); }
}

/* Gradient text */
.rd-gradient-text {
  background: linear-gradient(135deg, #ff5a6e, var(--red), #ff8a00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Cards */
.rd-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(6px);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.rd-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,30,60,0.4);
  box-shadow: 0 12px 30px -12px var(--red-glow);
}
.rd-icon-box {
  background: rgba(255,30,60,0.12);
  border: 1px solid rgba(255,30,60,0.25);
}

/* Price cards */
.rd-price-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.rd-price-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,30,60,0.5);
  box-shadow: 0 14px 34px -14px var(--red-glow);
}
.rd-popular {
  border-color: var(--red);
  box-shadow: 0 0 30px -8px var(--red-glow);
  background: linear-gradient(180deg, rgba(255,30,60,0.10), rgba(255,255,255,0.03));
}
.rd-pop-badge {
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--red), var(--red-2));
  color: #fff; font-size: 11px; font-weight: 800;
  padding: 3px 12px; border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 14px -3px var(--red-glow);
}

/* Toggle */
.rd-toggle {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.rd-toggle-active {
  background: linear-gradient(135deg, var(--red), var(--red-2));
  color: #fff;
  box-shadow: 0 4px 16px -4px var(--red-glow);
}

/* Steps */
.rd-step {
  background: rgba(255,30,60,0.12);
  border: 2px solid var(--red);
  color: #ff8a99;
  box-shadow: 0 0 20px -6px var(--red-glow);
}

/* FAQ */
.rd-faq {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
}
.rd-faq-body {
  overflow: hidden;
  transition: max-height .3s ease;
}

/* CTA */
.rd-cta {
  background: linear-gradient(135deg, rgba(255,30,60,0.16), rgba(20,20,22,0.6));
  border: 1px solid rgba(255,30,60,0.35);
  box-shadow: 0 0 40px -18px var(--red-glow);
}

/* Orbs */
.rd-orbs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  z-index: 0;
}
.rd-orbs span:nth-child(1) {
  width: 320px; height: 320px; background: var(--red);
  top: -80px; right: -60px;
  animation: float1 9s ease-in-out infinite;
}
.rd-orbs span:nth-child(2) {
  width: 260px; height: 260px; background: #ff5a00;
  bottom: -60px; left: -40px;
  animation: float2 11s ease-in-out infinite;
}
.rd-orbs span:nth-child(3) {
  width: 200px; height: 200px; background: var(--red-2);
  top: 40%; left: 45%;
  opacity: .3;
  animation: float1 13s ease-in-out infinite;
}
@keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,30px)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-30px)} }

/* Fade-in animations */
.rd-fade {
  opacity: 0;
  animation: fadeUp .7s ease forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.rd-grid-fade {
  animation: gridIn .4s ease;
}
@keyframes gridIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--red-2); border-radius: 6px; }