/* RG landing custom styles (Tailwind CDN used during development) */

html {
  scroll-behavior: smooth;
}

/* Hero background */
.rg-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(42, 153, 255, 0.22), transparent 60%),
    radial-gradient(700px 420px at 80% 20%, rgba(11, 125, 246, 0.16), transparent 55%),
    radial-gradient(600px 400px at 55% 80%, rgba(255, 255, 255, 0.75), transparent 60%);
}

.rg-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(380px 260px at 50% 0%, black 10%, transparent 70%);
  opacity: 0.55;
}

/* Cards & components */
.rg-card {
  border-radius: 1.75rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.rg-feature-card {
  border-radius: 1.5rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  padding: 1.25rem;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.rg-feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(42, 153, 255, 0.25);
  box-shadow: 0 18px 50px rgba(42, 153, 255, 0.12);
}

.rg-feature-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.25rem;
  background: rgba(42, 153, 255, 0.07);
  border: 1px solid rgba(42, 153, 255, 0.14);
  color: #0b7df6;
}

.rg-parallax {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.rg-step {
  position: relative;
  border-radius: 1.5rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  padding: 1.75rem 1.25rem 1.25rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.rg-step-num {
  position: absolute;
  top: -14px;
  left: 1.25rem;
  width: 42px;
  height: 42px;
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(42, 153, 255, 0.08);
  border: 1px solid rgba(42, 153, 255, 0.16);
  color: #0b7df6;
  font-weight: 800;
  box-shadow: 0 10px 25px rgba(11, 125, 246, 0.12);
}

.rg-price-card {
  border-radius: 1.75rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  padding: 1.5rem;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
}

.rg-price-card--featured {
  border-color: rgba(42, 153, 255, 0.35);
  background: radial-gradient(700px 260px at 30% -10%, rgba(42, 153, 255, 0.14), transparent 55%),
    rgba(255, 255, 255, 0.86);
}

/* Accordion */
.rg-accordion {
  border-radius: 1.5rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.78);
  padding: 0;
  overflow: hidden;
}

.rg-accordion summary {
  list-style: none;
  padding: 1.15rem 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.rg-accordion summary::-webkit-details-marker {
  display: none;
}

.rg-accordion > div {
  padding: 0 1.25rem 1.15rem;
}

.rg-accordion-icon {
  width: 38px;
  height: 38px;
  border-radius: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.75);
  font-weight: 800;
  color: #0f172a;
}

details[open] .rg-accordion-icon {
  transform: rotate(45deg);
  transition: transform 200ms ease;
}

/* Modal */
.rg-modal--open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.rg-modal--open .rg-modal-panel {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.rg-modal-panel {
  transition: transform 220ms ease, opacity 220ms ease;
}

.rg-modal-close:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(42, 153, 255, 0.18);
}