:root{
  --bg:#070707;
  --stroke: rgba(255,255,255,.10);
  --gold:#D4AF37;
  --gold2:#F6E7B6;
}

html,body{height:100%;}

body{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(212,175,55,.12), transparent 60%),
    radial-gradient(900px 500px at 90% 15%, rgba(246,231,182,.10), transparent 60%),
    radial-gradient(900px 600px at 50% 100%, rgba(255,255,255,.06), transparent 60%),
    var(--bg);
  color:#fff;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

/* animated grain */
.grain::before{
  content:"";
  position:fixed; inset:-30%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  pointer-events:none;
  opacity:.25;
  transform:translate3d(0,0,0);
  animation:grainMove 10s steps(10) infinite;
  z-index:0;
}
@keyframes grainMove{
  0%{transform:translate(0,0)}
  10%{transform:translate(-5%, -8%)}
  20%{transform:translate(-10%, 5%)}
  30%{transform:translate(7%, -12%)}
  40%{transform:translate(-6%, 10%)}
  50%{transform:translate(-12%, -3%)}
  60%{transform:translate(10%, 8%)}
  70%{transform:translate(3%, 12%)}
  80%{transform:translate(-8%, -10%)}
  90%{transform:translate(12%, 2%)}
  100%{transform:translate(0,0)}
}

.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--stroke);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ring-soft{ box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset; }

.gold-text{
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.cta{
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  color:#0a0a0a;
  box-shadow: 0 20px 60px rgba(212,175,55,.18);
  transform:translateZ(0);
  transition: transform .18s ease, filter .18s ease;
}
.cta:hover{ transform: translateY(-1px) scale(1.01); filter:saturate(1.1); }
.cta:active{ transform: translateY(0px) scale(.995); }

.reveal{ opacity:0; transform: translateY(18px); }
.reveal.is-in{
  opacity:1; transform: translateY(0);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.reveal.delay-1.is-in{ transition-delay: .08s;}
.reveal.delay-2.is-in{ transition-delay: .16s;}

.blob{ filter: blur(40px); opacity:.55; animation: floaty 10s ease-in-out infinite; }
@keyframes floaty{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(20px,-18px) scale(1.08); }
}

.hoverlift{ transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.hoverlift:hover{ transform: translateY(-6px); border-color: rgba(212,175,55,.35); }

.shine{ position:relative; overflow:hidden; }
.shine::after{
  content:"";
  position:absolute; inset:-120%;
  background: conic-gradient(from 180deg, transparent, rgba(246,231,182,.22), transparent 35%);
  animation: spin 4.5s linear infinite;
  opacity:.9;
}
@keyframes spin { to { transform: rotate(360deg);} }
.shine > *{ position:relative; z-index:2; }
.shine::before{
  content:"";
  position:absolute; inset:1px;
  background: linear-gradient(180deg, rgba(10,10,10,.88), rgba(10,10,10,.62));
  border-radius: 1.5rem;
  z-index:1;
}

.focus-gold:focus{
  outline:none;
  box-shadow: 0 0 0 4px rgba(212,175,55,.15);
  border-color: rgba(212,175,55,.55)!important;
}

/* premium “studio” backdrop for transparent PNGs */
.machineStage{
  position: relative;
  background:
    radial-gradient(650px 380px at 50% 40%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%),
    radial-gradient(520px 360px at 70% 65%, rgba(212,175,55,.10), rgba(212,175,55,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
}
.machineStage::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(900px 540px at 50% 85%, rgba(0,0,0,.55), rgba(0,0,0,0) 60%);
  pointer-events:none;
}
.machineStage > *{ position:relative; z-index:1; }

input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  height: 6px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px; height:18px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  border: 2px solid rgba(10,10,10,.8);
  box-shadow: 0 10px 30px rgba(212,175,55,.18);
  cursor:pointer;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .grain::before{ display:none; }
}
/* ✅ Mobile fix for the floating bottom CTA */
.stickyCta{
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.stickyCta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border-radius: 999px;
  white-space: nowrap;
}

/* On small screens: full-width pill so it never breaks/overlaps */
@media (max-width: 640px){
  .stickyCta{
    left: 12px;
    right: 12px;
    transform: none;
  }
  .stickyCta__btn{
    width: 100%;
    padding: 14px 14px;
    font-size: 14px;
    white-space: normal;     /* allow wrap if needed */
    text-align: center;
    line-height: 1.2;
  }
}

/* ===== Revenue Plans (consistent card sizing) ===== */
.plansGrid{
  display:grid;
  gap:1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width:640px){ .plansGrid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:1024px){ .plansGrid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width:1280px){ .plansGrid{ grid-template-columns: repeat(5, 1fr); } }

.planCard{
  height:100%;
  min-width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:1.75rem;
  border-radius:1.5rem; /* keeps your rounded look consistent */
}

.planTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  min-width:0;
}
.planTitleBlock{ min-width:0; }
.planKicker{
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  opacity:.7;
}
.planName{
  font-size:1.65rem;
  font-weight:800;
  margin-top:.35rem;
  line-height:1.1;
}
.planRight{
  text-align:right;
  flex:0 0 auto;
}
.planRightLabel{
  font-size:.75rem;
  opacity:.7;
}
.planRightValue{
  font-size:1.65rem;
  font-weight:800;
  line-height:1.1;
  white-space:nowrap;
}

.planMetricLabel{
  font-size:.9rem;
  opacity:.7;
  margin-top:1.25rem;
}
.planPct{
  font-weight:800;
  margin-top:.35rem;
  line-height:1;
  white-space:nowrap;
  font-size:3.1rem;
}
@media (min-width:640px){
  .planPct{ font-size:3.3rem; }
}

.planDesc{
  margin-top:.75rem;
  opacity:.65;
  font-size:.95rem;
  line-height:1.35;
  min-height:3.1em; /* locks description height so cards align better */
}

.planList{
  margin-top:1.2rem;
  display:grid;
  gap:.7rem;
  font-size:.95rem;
  opacity:.82;
}
.planList li{
  display:flex;
  gap:.65rem;
  align-items:flex-start;
}
.planDot{
  line-height:1;
  margin-top:.2rem;
  font-weight:800;
}

.planCta{
  margin-top:auto;
  padding-top:1.4rem;
}
.planCta a{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:62px;           /* same button height everywhere */
  padding:1rem 1.25rem;
  border-radius:1rem;
  font-weight:800;
}

/* Popular pill sits consistently */
.planBadge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  padding:.55rem 1.05rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
}

.gold-glow {
  color: var(--gold);
  text-shadow:
    0 0 6px rgba(212,175,55,0.9),
    0 0 14px rgba(212,175,55,0.6);
  animation: pulseGlow 1.8s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}