/* ══ RCFM WOW — cinematic upgrade v1 ══════════════════════════════════════════ */

/* Canvas hero */
#heroCanvas {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
}

/* Orb blobs */
.hero-orb {
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  animation:orbFloat 9s ease-in-out infinite;
}
.hero-orb-1 {
  width:600px; height:600px; top:-250px; right:-120px;
  background:radial-gradient(circle,rgba(59,130,246,.22) 0%,transparent 70%);
  filter:blur(70px);
}
.hero-orb-2 {
  width:420px; height:420px; bottom:-180px; left:-60px;
  background:radial-gradient(circle,rgba(212,175,55,.18) 0%,transparent 70%);
  filter:blur(60px); animation-delay:-4.5s;
}
.hero-orb-3 {
  width:300px; height:300px; top:30%; left:40%;
  background:radial-gradient(circle,rgba(96,165,250,.12) 0%,transparent 70%);
  filter:blur(50px); animation-delay:-2s;
}
@keyframes orbFloat {
  0%,100%{ transform:translate(0,0) scale(1); }
  33%    { transform:translate(18px,-22px) scale(1.06); }
  66%    { transform:translate(-14px,16px) scale(.95); }
}

/* Hero title shimmer */
.hero-shimmer {
  background:linear-gradient(90deg,#fff 0%,#93c5fd 35%,#d4af37 65%,#fff 100%);
  background-size:300% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; color:transparent;
  animation:heroShimmer 7s linear infinite;
}
@keyframes heroShimmer{0%{background-position:0% center}100%{background-position:300% center}}

/* Proof cards — spin glow */
.proof-card {
  position:relative; overflow:hidden;
  transition:transform .3s,box-shadow .3s;
}
.proof-card::before {
  content:''; position:absolute; inset:-100%;
  background:conic-gradient(from 0deg,transparent 70%,rgba(59,130,246,.2) 85%,transparent 100%);
  animation:pcSpin 7s linear infinite; pointer-events:none;
}
@keyframes pcSpin{to{transform:rotate(360deg)}}
.proof-card:hover{ transform:translateY(-3px); box-shadow:0 8px 32px rgba(59,130,246,.2); }

/* Device cards — glassmorphism */
.device-panel .device-card {
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  background:rgba(10,13,22,.75)!important;
  border:1px solid rgba(59,130,246,.15)!important;
  transition:all .4s cubic-bezier(.34,1.56,.64,1)!important;
  position:relative; overflow:hidden;
}
.device-panel .device-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(59,130,246,.09) 0%,transparent 55%);
  opacity:0; transition:opacity .3s;
}
.device-panel .device-card:hover {
  transform:translateY(-5px) scale(1.02)!important;
  border-color:rgba(59,130,246,.5)!important;
  box-shadow:0 14px 48px rgba(59,130,246,.22),0 0 0 1px rgba(59,130,246,.28)!important;
}
.device-panel .device-card:hover::before { opacity:1; }
.device-panel .device-card .icon {
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  border-radius:14px!important;
}
.device-panel .device-card:hover .icon {
  transform:scale(1.12) rotate(-4deg);
  box-shadow:0 6px 24px rgba(0,0,0,.3);
}

/* Steps timeline */
.steps-tl {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  position:relative; max-width:1100px; margin:0 auto;
  list-style:none; padding:0;
}
.steps-tl::before {
  content:''; position:absolute; top:44px; left:12.5%; right:12.5%; height:2px;
  background:linear-gradient(90deg,#3B82F6 0%,#d4af37 50%,#3B82F6 100%);
  background-size:200% auto; animation:lineFlow 5s linear infinite;
}
@keyframes lineFlow{0%{background-position:0% center}100%{background-position:200% center}}

.step-item {
  position:relative; text-align:center; padding:0 16px 24px;
  background:#0f1218; border:1px solid #1f2530; border-radius:14px;
  margin:0 8px; transition:border-color .3s,box-shadow .3s;
}
.step-item:hover { border-color:#3B82F6; box-shadow:0 8px 32px rgba(59,130,246,.18); }

.step-dot {
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  width:32px; height:32px; border-radius:50%;
  background:#d4af37; color:#0a0c11;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; z-index:2;
  box-shadow:0 0 0 5px rgba(212,175,55,.2),0 0 20px rgba(212,175,55,.35);
}

.step-icon-box {
  width:80px; height:80px; margin:28px auto 16px;
  background:rgba(59,130,246,.08);
  border:1px solid rgba(59,130,246,.2);
  border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  transition:all .35s;
}
.step-item:hover .step-icon-box {
  background:rgba(59,130,246,.18);
  border-color:rgba(59,130,246,.5);
  box-shadow:0 0 28px rgba(59,130,246,.28);
  transform:translateY(-4px) scale(1.05);
}

.step-title { color:#fff; font-size:15px; font-weight:700; margin:0 0 8px; }
.step-desc  { color:#8a93a6; font-size:13px; line-height:1.55; margin:0; }

@media (max-width:820px) {
  .steps-tl { grid-template-columns:repeat(2,1fr); gap:28px; }
  .steps-tl::before { display:none; }
  .step-item { margin:0; }
}
@media (max-width:480px) {
  .steps-tl { grid-template-columns:1fr; gap:28px; }
}

/* Pricing popular card glow */
.price-card-popular {
  animation:priceGlow 3s ease-in-out infinite;
}
@keyframes priceGlow {
  0%,100%{ box-shadow:0 0 28px rgba(212,175,55,.35),0 8px 32px rgba(212,175,55,.15); }
  50%    { box-shadow:0 0 52px rgba(212,175,55,.55),0 12px 48px rgba(212,175,55,.28); }
}

/* Entrance animations */
.fade-up {
  opacity:0; transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}
.fade-up.visible { opacity:1; transform:translateY(0); }

/* Badge pill animate-in */
.kicker-pill {
  display:inline-block;
  animation:badgePop .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes badgePop {
  from{ opacity:0; transform:scale(.7); }
  to  { opacity:1; transform:scale(1); }
}

/* Review cards hover */
.r-card {
  transition:transform .25s,border-color .25s,box-shadow .25s!important;
}
.r-card:hover {
  transform:translateY(-3px)!important;
  border-color:rgba(212,175,55,.35)!important;
  box-shadow:0 8px 32px rgba(212,175,55,.12)!important;
}