/* ============================================================
   CodebyCarter — roi.css
   "Will this pay for itself?" calculator section.
   ============================================================ */

.roi{position:relative;overflow:hidden}
.roi-shell{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:60px;align-items:center}

.roi-controls{
  padding:32px;border-radius:24px;
  background:rgba(15,15,20,.6);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}

.roi-control{margin-bottom:28px}
.roi-control:last-child{margin-bottom:0}
.roi-label{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:12px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#9090A0;
}
.roi-label-value{
  font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:600;letter-spacing:-.02em;
  color:#F5F5F7;text-transform:none;letter-spacing:-.02em;
}
.roi-slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:8px;border-radius:99px;
  background:rgba(255,255,255,.10);
  outline:none;cursor:none;
  background-image:linear-gradient(90deg,#A855F7,#EC4899,#FB923C,#06B6D4);
  background-size:var(--fill,50%) 100%;background-repeat:no-repeat;
}
.roi-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:#F5F5F7;
  border:3px solid #0A0A0F;
  box-shadow:0 6px 18px rgba(168,85,247,.45);
  cursor:none;
  transition:transform .2s ease;
}
.roi-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
.roi-slider::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:#F5F5F7;border:3px solid #0A0A0F;
  box-shadow:0 6px 18px rgba(168,85,247,.45);cursor:pointer;
}
.roi-tick{
  display:flex;justify-content:space-between;margin-top:8px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;color:#5A5A66;
}

.roi-result{
  padding:36px;border-radius:24px;
  background:linear-gradient(160deg,rgba(168,85,247,.22),rgba(236,72,153,.12) 50%,rgba(6,182,212,.12));
  border:1px solid rgba(168,85,247,.32);
  position:relative;overflow:hidden;
  box-shadow:0 30px 80px rgba(168,85,247,.18);
}
.roi-result::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 200px at 30% 0%, rgba(236,72,153,.18), transparent 70%);
}
.roi-result-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#EC4899;font-weight:700;position:relative;z-index:1;
}
.roi-result-number{
  font-size:clamp(56px,8vw,108px);line-height:.95;font-weight:600;letter-spacing:-.04em;
  margin:14px 0 6px;
  background:linear-gradient(135deg,#A855F7,#EC4899,#FB923C);
  background-size:200% 200%;animation:hue 6s linear infinite;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  position:relative;z-index:1;
}
.roi-result-unit{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:24px;color:#F5F5F7;letter-spacing:-.01em;
  position:relative;z-index:1;
}
.roi-result-line{
  margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.10);
  font-size:15.5px;line-height:1.55;color:#C0C0C8;position:relative;z-index:1;
}
.roi-result-line b{color:#F5F5F7;font-weight:600}
.roi-result-pay{
  margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#9090A0;position:relative;z-index:1;
}
.roi-result-pay b{color:#FB923C;font-weight:600}

.roi-note{
  margin-top:36px;text-align:center;font-size:13px;color:#9090A0;
  font-family:'JetBrains Mono',monospace;letter-spacing:.04em;line-height:1.65;
  max-width:64ch;margin-left:auto;margin-right:auto;position:relative;z-index:2;
}

@media (max-width:900px){
  .roi-shell{grid-template-columns:1fr;gap:24px}
}