.roi-calc {
  --cpi-deep: #303ab2;
  --cpi-mid: #5461c8;
  --cpi-light: #8b95e0;
  --cpi-pale: #eef0fb;
  --cpi-dark: #1d252d;
  --dk-teal: #57a7c0;
  --dk-teal-d: #3e8ba4;
  --dk-teal-l: #d0eaf3;
  --dk-pale: #f0f8fc;
  --green: #1a7f5a;
  --green-l: #e8f6f0;
  --red-bar: #c05a5a;
  --border: #d4d8f0;
  --surface: #f5f6fd;
  --muted: #6b7280;
  --text: #1d252d;
  --page-bg: #f5f6fd;
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  background: var(--page-bg);
  overflow-wrap: anywhere;
}

.roi-calc, .roi-calc * { box-sizing: border-box; }
.roi-calc a, .roi-calc button, .roi-calc input, .roi-calc select { font-family: inherit; }
.roi-calc p, .roi-calc h1, .roi-calc h2, .roi-calc h3, .roi-calc h4, .roi-calc h5, .roi-calc h6 { margin: 0; }
.roi-calc svg { max-width: 100%; height: auto; }
.roi-calc--only { background: transparent; }

.roi-calc__hero {
  background: linear-gradient(145deg,var(--cpi-deep) 0%,#252eb8 48%,var(--cpi-mid) 100%);
  padding: 44px 24px 72px;
  position: relative;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
}
.roi-calc__hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 600px 350px at 12% 65%,rgba(87,167,192,.22) 0%,transparent 65%),
    radial-gradient(ellipse 350px 250px at 88% 8%,rgba(255,255,255,.06) 0%,transparent 55%);
}
.roi-calc__hero::after {
  content:''; position:absolute; right:-70px; top:-70px; width:360px; height:360px;
  border:1px solid rgba(255,255,255,.07); border-radius:50%; pointer-events:none;
}
.roi-calc__logo-bar, .roi-calc__hero-body {
  max-width: 1060px; margin: 0 auto; position: relative; z-index: 2;
}
.roi-calc__logo-bar {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:40px;
}
.roi-calc__brand--left { flex: 0 1 auto; }
.roi-calc__brand--left svg { height: 32px; width:auto; display:block; }
.roi-calc__logo-sep { width:1px; height:26px; background:rgba(255,255,255,.22); }
.roi-calc__brand--right { display:flex; align-items:center; gap:10px; }
.roi-calc__dk-icon { width:36px; height:36px; flex-shrink:0; }
.roi-calc__dk-text { display:flex; flex-direction:column; line-height:1; }
.roi-calc__dk-name { font-family:'DM Serif Display',serif; font-size:19px; color:var(--dk-teal); letter-spacing:.01em; }
.roi-calc__dk-sub { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:2px; }
.roi-calc__hero-body { text-align:center; }
.roi-calc__badge {
  display:inline-flex; align-items:center; gap:7px; background:rgba(87,167,192,.16); border:1px solid rgba(87,167,192,.38);
  color:var(--dk-teal); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 15px; border-radius:20px; margin-bottom:18px;
}
.roi-calc__badge::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--dk-teal); }
.roi-calc__hero-title {
  font-family:'DM Serif Display',serif; font-size:clamp(24px,4.5vw,42px); color:#fff; line-height:1.18;
  max-width:640px; margin:0 auto 14px;
}
.roi-calc__hero-title em { font-style:italic; color:var(--dk-teal); }
.roi-calc__hero-copy { font-size:14px; color:rgba(255,255,255,.70); max-width:490px; margin:0 auto; line-height:1.65; }
.roi-calc__stats { display:flex; justify-content:center; align-items:stretch; gap:28px; margin-top:32px; flex-wrap:wrap; }
.roi-calc__stat { text-align:center; min-width: 140px; position: relative; }
.roi-calc__stat + .roi-calc__stat::before {
  content:''; position:absolute; left:-14px; top:50%; transform:translateY(-50%); width:1px; height:36px; background:rgba(255,255,255,.14);
}
.roi-calc__stat strong { font-family:'DM Serif Display',serif; font-size:26px; color:var(--dk-teal); line-height:1; font-weight:400; display:block; }
.roi-calc__stat span { font-size:10px; color:rgba(255,255,255,.52); margin-top:3px; letter-spacing:.03em; display:block; }

.roi-calc__wrap { max-width:1060px; margin:-36px auto 0; padding:0 16px; position:relative; z-index:10; }
.roi-calc__wrap--only { margin:0 auto; padding:0; }
.roi-calc__grid {
  display:grid; grid-template-columns:1fr 1fr; background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 20px 70px rgba(48,58,178,.13),0 4px 16px rgba(48,58,178,.07);
}
.roi-calc__inputs { padding:38px 34px; border-right:1px solid var(--border); }
.roi-calc__results { padding:38px 34px; background:var(--surface); display:flex; flex-direction:column; }
.roi-calc__plabel {
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cpi-mid);
  margin-bottom:26px; display:flex; align-items:center; gap:8px;
}
.roi-calc__plabel::after { content:''; flex:1; height:1px; background:var(--border); }
.roi-calc__field { margin-bottom:24px; }
.roi-calc__fl {
  font-size:13px; font-weight:600; color:var(--cpi-dark); margin-bottom:7px;
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.roi-calc__fv { font-weight:700; color:var(--cpi-mid); }
.roi-calc select {
  width:100%; padding:10px 13px; border:1.5px solid var(--border); border-radius:10px; font-size:14px; color:var(--text);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235461c8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
  appearance:none; cursor:pointer; transition:border-color .2s;
}
.roi-calc select:focus { outline:none; border-color:var(--cpi-mid); }
.roi-calc input[type=range] {
  -webkit-appearance:none; appearance:none; width:100%; height:6px; background:var(--border); border-radius:3px; outline:none; cursor:pointer;
}
.roi-calc input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px; background:var(--cpi-mid); border-radius:50%; cursor:pointer;
  box-shadow:0 2px 8px rgba(84,97,200,.38); transition:transform .15s,box-shadow .15s;
}
.roi-calc input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.15); box-shadow:0 3px 14px rgba(84,97,200,.50); }
.roi-calc input[type=range]::-moz-range-thumb { width:20px; height:20px; background:var(--cpi-mid); border:none; border-radius:50%; cursor:pointer; }
.roi-calc__rlabels { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:5px; }
.roi-calc__piw { display:flex; align-items:center; border:1.5px solid var(--border); border-radius:10px; overflow:hidden; transition:border-color .2s; }
.roi-calc__piw:focus-within { border-color:var(--cpi-mid); }
.roi-calc__ppfx { padding:10px 11px; background:var(--cpi-pale); color:var(--cpi-mid); font-weight:700; font-size:14px; border-right:1px solid var(--border); }
.roi-calc__piw input[type=number] { border:none; outline:none; padding:10px 11px; font-size:14px; width:100%; color:var(--text); background:#fff; }
.roi-calc__hidden { display:none; }
.roi-calc__refnote {
  background:var(--dk-pale); border:1px solid var(--dk-teal-l); border-left:3px solid var(--dk-teal); border-radius:8px;
  padding:12px 13px; font-size:12px; color:#2d5f6e; line-height:1.6; margin-top:2px;
}
.roi-calc__green-text { color:var(--green); }
.roi-calc__red-text { color:#b94040; }

.roi-calc__spotlight {
  background:linear-gradient(135deg,var(--green) 0%,#1e9068 100%); border-radius:16px; padding:24px 22px; text-align:center; margin-bottom:18px;
  position:relative; overflow:hidden;
}
.roi-calc__spotlight::before { content:''; position:absolute; top:-40px; right:-40px; width:140px; height:140px; background:rgba(255,255,255,.07); border-radius:50%; }
.roi-calc__spotlight-label { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:7px; }
.roi-calc__spotlight-value {
  font-family:'DM Serif Display',serif; font-size:clamp(34px,5vw,48px); color:#fff; line-height:1; margin-bottom:4px;
  transition:all .32s cubic-bezier(.34,1.56,.64,1);
}
.roi-calc__spotlight-sub { font-size:12px; color:rgba(255,255,255,.58); }
.roi-calc__mgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.roi-calc__mc { background:#fff; border:1px solid var(--border); border-radius:12px; padding:13px 15px; transition:transform .2s,box-shadow .2s; }
.roi-calc__mc:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(48,58,178,.10); }
.roi-calc__mc-lbl { font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.07em; text-transform:uppercase; margin-bottom:5px; }
.roi-calc__mc-val { font-family:'DM Serif Display',serif; font-size:20px; color:var(--cpi-dark); line-height:1; }
.roi-calc__mc-note { font-size:11px; color:var(--muted); margin-top:3px; }

.roi-calc__cmp { background:#fff; border:1px solid var(--border); border-radius:12px; padding:15px 17px; margin-bottom:13px; }
.roi-calc__cmp-ttl { font-size:10px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--muted); margin-bottom:13px; }
.roi-calc__brow { margin-bottom:10px; }
.roi-calc__brow:last-child { margin-bottom:0; }
.roi-calc__blrow { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:5px; }
.roi-calc__bprod { font-size:12px; font-weight:600; color:var(--text); }
.roi-calc__bcost { font-size:12px; font-weight:700; color:var(--cpi-dark); }
.roi-calc__btrack { height:9px; background:#eef0f7; border-radius:5px; overflow:hidden; }
.roi-calc__bfill { height:100%; border-radius:5px; transition:width .55s cubic-bezier(.34,1.1,.64,1); }
.roi-calc__bfill-cur { background:linear-gradient(90deg,#c24444,#dc6a6a); }
.roi-calc__bfill-dk { background:linear-gradient(90deg,var(--dk-teal-d),var(--dk-teal)); }
.roi-calc__stag {
  display:none; align-items:center; gap:4px; background:var(--green-l); color:var(--green);
  font-size:10px; font-weight:700; padding:3px 8px; border-radius:10px; margin-top:5px;
}
.roi-calc__tip {
  background:#fffbec; border:1px solid #f0d97a; border-radius:10px; padding:11px 13px; font-size:12px; color:#7a5500;
  display:flex; gap:8px; margin-bottom:13px; line-height:1.55;
}
.roi-calc__tip-i { flex-shrink:0; font-size:14px; margin-top:1px; }
.roi-calc__proj { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:15px; }
.roi-calc__pc { background:#fff; border:1px solid var(--border); border-radius:10px; padding:11px 8px; text-align:center; }
.roi-calc__py { font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.10em; text-transform:uppercase; margin-bottom:5px; }
.roi-calc__pv { font-family:'DM Serif Display',serif; font-size:17px; color:var(--green); }
.roi-calc__cta-wrap { margin-top:auto; }
.roi-calc__cta {
  display:block; width:100%; background:linear-gradient(135deg,var(--cpi-deep) 0%,var(--cpi-mid) 100%); color:#fff !important;
  font-size:14px; font-weight:600; padding:14px 22px; border:none; border-radius:12px; cursor:pointer;
  text-align:center; text-decoration:none !important; letter-spacing:.02em; transition:opacity .2s,transform .2s,box-shadow .2s;
  box-shadow:0 4px 18px rgba(48,58,178,.34);
}
.roi-calc__cta:hover { opacity:.92; transform:translateY(-2px); box-shadow:0 8px 26px rgba(48,58,178,.44); }
.roi-calc__cta-sub { text-align:center; font-size:11px; color:var(--muted); margin-top:8px; }
.roi-calc__cta-sub a, .roi-calc__ftxt a { color:var(--cpi-mid); text-decoration:none; }

.roi-calc__foot { max-width:1060px; margin:0 auto 0; padding:22px 16px 0; display:flex; flex-direction:column; align-items:center; gap:13px; }
.roi-calc__flogos { display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center; }
.roi-calc__fcpi svg { height:20px; width:auto; display:block; }
.roi-calc__fdiv { width:1px; height:18px; background:var(--border); }
.roi-calc__fdk { font-family:'DM Serif Display',serif; font-size:14px; color:var(--dk-teal-d); }
.roi-calc__flogos-text { font-size:11px; color:var(--muted); }
.roi-calc__ftxt { font-size:11px; color:var(--muted); text-align:center; line-height:1.7; max-width:660px; }

@keyframes roi-calc-popIn { from { opacity:0; transform:translateY(5px) scale(.97); } to { opacity:1; transform:none; } }
.roi-calc__spotlight-value.roi-calc-ani { animation: roi-calc-popIn .3s ease forwards; }

@media (max-width: 720px) {
  .roi-calc__grid { grid-template-columns: 1fr; }
  .roi-calc__inputs { border-right: 0; border-bottom: 1px solid var(--border); }
  .roi-calc__logo-sep { display:none; }
  .roi-calc__hero { border-radius: 20px 20px 0 0; }
}

@media (max-width: 640px) {
  .roi-calc__hero { padding: 28px 16px 56px; }
  .roi-calc__logo-bar { justify-content:center; margin-bottom:28px; }
  .roi-calc__brand--left svg { height: 26px; }
  .roi-calc__dk-name { font-size: 16px; }
  .roi-calc__stats { gap: 14px; }
  .roi-calc__stat { min-width: calc(50% - 7px); }
  .roi-calc__stat + .roi-calc__stat::before { display:none; }
  .roi-calc__wrap { margin: -28px auto 0; padding: 0 10px; }
  .roi-calc__wrap--only { margin:0 auto; padding:0; }
  .roi-calc__inputs, .roi-calc__results { padding:26px 18px; }
  .roi-calc__mgrid { grid-template-columns:1fr; }
  .roi-calc__proj { grid-template-columns:1fr; }
  .roi-calc__blrow { align-items:flex-start; flex-direction:column; gap:4px; }
}

@media (max-width: 480px) {
  .roi-calc__hero-title { font-size: 28px; }
  .roi-calc__hero-copy { font-size: 13px; }
  .roi-calc__stats { flex-direction:column; }
  .roi-calc__stat { min-width: 100%; }
  .roi-calc__plabel { align-items:flex-start; }
  .roi-calc__fl { flex-direction:column; align-items:flex-start; }
  .roi-calc__cta { padding: 13px 16px; font-size: 13px; }
}