/* ═══════════════ BUSINESS CENTRAL ROI CALCULATOR ═══════════════ */
.roi { padding: 100px 0 40px; position: relative; z-index: 1; }
.roi-inner { max-width: 1080px; margin: 0 auto; padding: 0 5%; }
.roi-head { text-align: center; margin-bottom: 34px; }
.roi-title { font-size: clamp(26px, 3.4vw, 42px); font-weight: 800; color: var(--white); letter-spacing: -1px; line-height: 1.15; }
.roi-title .accent { color: var(--cyan); }
.roi-sub { font-size: 14px; color: var(--muted); max-width: 620px; margin: 12px auto 0; line-height: 1.7; }

.roi-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 22px; align-items: start; }

/* ── Inputs ── */
.roi-form { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 24px; backdrop-filter: blur(12px); }
.roi-field { margin-bottom: 18px; }
.roi-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.roi-field > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.roi-field > label b { color: var(--cyan); font-weight: 800; }
.roi-field select, .roi-field input[type="number"] { width: 100%; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--border2); border-radius: 9px; color: var(--white); font-family: var(--font); font-size: 13.5px; outline: none; transition: border-color .2s, box-shadow .2s; }
.roi-field select:focus, .roi-field input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(0,242,254,0.15); }

/* range sliders */
.roi-field input[type="range"] { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--cyan2), rgba(0,242,254,0.15)); outline: none; }
.roi-field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--cyan); cursor: pointer; box-shadow: var(--glow-c); border: 3px solid var(--bg); }
.roi-field input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--cyan); cursor: pointer; border: 3px solid var(--bg); }
.roi-range-hint { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 5px; }

/* modules */
.roi-mods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.roi-mod { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; font-size: 12.5px; color: var(--white); cursor: pointer; transition: border-color .2s; }
.roi-mod:hover { border-color: var(--border2); }
.roi-mod input { accent-color: var(--cyan); width: 15px; height: 15px; flex-shrink: 0; }
.roi-mod--on { color: var(--cyan); border-color: var(--border2); opacity: .9; }

/* ── Results ── */
.roi-results { position: sticky; top: 90px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 18px; padding: 24px; backdrop-filter: blur(16px); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.roi-res-badge { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--cyan); background: rgba(0,242,254,0.08); border: 1px solid var(--border2); border-radius: 100px; padding: 5px 14px; margin-bottom: 16px; }
.roi-res-main { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.roi-res-block { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.roi-res-lbl { font-size: 10.5px; color: var(--muted); margin-bottom: 5px; line-height: 1.3; }
.roi-res-num { font-size: 22px; font-weight: 800; color: var(--white); line-height: 1.1; }
.roi-res-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.roi-res-row b { color: var(--white); font-weight: 700; font-size: 14px; text-align: right; }
.roi-res-row--tot { border-bottom: none; }
.roi-res-row--tot span { color: var(--white); font-weight: 700; }
.roi-res-row--tot b { color: var(--cyan); font-size: 16px; }

.roi-res-gain { background: linear-gradient(135deg, rgba(0,242,254,0.07), rgba(189,0,255,0.05)); border: 1px solid var(--border2); border-radius: 14px; padding: 16px; margin: 14px 0 18px; }
.roi-res-gain-row { display: flex; justify-content: space-between; gap: 14px; }
.roi-res-gain-num { font-size: 20px; font-weight: 800; color: var(--cyan); line-height: 1.15; margin-top: 3px; }
.roi-res-payback { text-align: right; }
.roi-res-payback .roi-res-gain-num { color: var(--white); }

.roi-cta { width: 100%; text-align: center; margin-bottom: 10px; }
.roi-cta-alt { display: block; text-align: center; font-size: 12.5px; color: var(--muted); text-decoration: none; transition: color .2s; }
.roi-cta-alt:hover { color: var(--cyan); }
.roi-disclaimer { font-size: 10.5px; color: var(--muted); line-height: 1.55; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ── Light mode ── */
[data-theme="light"] .roi-field select, [data-theme="light"] .roi-field input[type="number"],
[data-theme="light"] .roi-mod { background: rgba(255,255,255,0.6); }

/* ── Responsive ── */
@media(max-width: 860px) {
  .roi-grid { grid-template-columns: 1fr; }
  .roi-results { position: static; }
}
@media(max-width: 480px) {
  .roi-field-row, .roi-mods, .roi-res-main { grid-template-columns: 1fr; }
}