.roi-page { --roi-line: rgba(148,163,184,.18); }
.roi-page section { scroll-margin-top: 115px; }
.roi-page h1, .roi-page h2, .roi-page h3 { font-family: var(--font-heading); line-height: 1.2; }
.roi-page a:focus-visible, .roi-page button:focus-visible, .roi-page input:focus-visible, .roi-page summary:focus-visible { outline: 3px solid var(--accent-cyan); outline-offset: 3px; }
.roi-page [hidden] { display: none !important; }
.roi-eyebrow { display: inline-block; margin-bottom: 12px; color: var(--accent-cyan); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.roi-hero { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(300px,.8fr); align-items: center; gap: clamp(28px,5vw,80px); padding: clamp(65px,9vw,115px) 0 70px; }
.roi-hero h1 { max-width: 750px; margin: 0 0 22px; font-size: clamp(2.8rem,6vw,5.3rem); letter-spacing: -.045em; }
.roi-hero-lead { max-width: 720px; color: #d0dae9; font-size: clamp(1.05rem,1.7vw,1.25rem); line-height: 1.7; }
.roi-hero-note { margin: 18px 0 28px; color: var(--text-muted); }
.roi-hero-cta { gap: 10px; padding: 14px 28px; }
.roi-hero-visual { display: flex; flex-direction: column; align-items: flex-start; padding: 34px; border: 1px solid rgba(139,92,246,.35); border-radius: 28px; background: radial-gradient(circle at 90% 10%,rgba(139,92,246,.2),transparent 45%),linear-gradient(150deg,#181324,#0b1320); box-shadow: 0 25px 70px rgba(0,0,0,.25); }
.roi-visual-label { color: #b9a2ff; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.roi-hero-visual > strong { margin-top: 24px; color: #fff; font-size: clamp(3rem,6vw,5rem); line-height: 1; }
.roi-hero-visual > strong small { display: block; color: var(--accent-cyan); font-size: 1.1rem; font-weight: 600; margin-top: 10px; }
.roi-hero-visual p { margin-top: 14px; color: #cbd5e1; }
.roi-visual-divider { width: 100%; height: 1px; background: var(--roi-line); margin: 25px 0; }
.roi-hero-visual > span:not(.roi-visual-label) { color: var(--text-muted); font-size: .85rem; }
.roi-hero-visual > b { margin: 5px 0 18px; font-size: 1.6rem; }
.roi-hero-visual > small { color: var(--text-muted); line-height: 1.5; }
.roi-how-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; list-style: none; }
.roi-how-grid li, .roi-scenario-area, .roi-input-panel, .roi-result-panel, .roi-comparison-card, .roi-chart-card, .roi-table-wrap, .roi-example-card { border: 1px solid var(--roi-line); border-radius: 24px; background: rgba(18,20,33,.8); }
.roi-how-grid li { padding: 27px; }
.roi-how-grid li > span { color: var(--accent-cyan); font: 700 1.65rem var(--font-heading); }
.roi-how-grid h3 { margin: 14px 0 10px; font-size: 1.12rem; }
.roi-how-grid p { color: var(--text-muted); line-height: 1.6; }
.roi-scenario-area { padding: clamp(22px,3vw,32px); }
.roi-scenario-area h3 { margin-bottom: 18px; font-size: 1.22rem; }
.roi-scenarios { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.roi-scenario { min-height: 76px; padding: 12px 7px; border: 1px solid var(--roi-line); border-radius: 15px; background: rgba(255,255,255,.03); color: #dbe5f0; cursor: pointer; font: 700 .83rem var(--font-body); transition: border-color .2s,background .2s,transform .2s; }
.roi-scenario i { display: block; color: #b9a2ff; font-size: 1.17rem; margin-bottom: 8px; }
.roi-scenario:hover { border-color: var(--accent-purple); transform: translateY(-2px); }
.roi-scenario[aria-pressed="true"] { border-color: var(--accent-cyan); background: rgba(6,182,212,.14); color: #fff; }
.roi-scenario[aria-pressed="true"] i { color: #67e8f9; }
.roi-scenario-description { min-height: 2em; margin-top: 18px; color: #cbd5e1; line-height: 1.6; }
.roi-mode-wrap { margin: 34px 0 18px; }
.roi-mode-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 5px; border: 1px solid var(--roi-line); border-radius: 17px; background: rgba(255,255,255,.025); }
.roi-mode-tab { padding: 12px 18px; border: 0; border-radius: 12px; background: transparent; color: var(--text-muted); cursor: pointer; font: 700 .9rem var(--font-body); }
.roi-mode-tab[aria-selected="true"] { background: rgba(139,92,246,.24); color: #fff; box-shadow: inset 0 0 0 1px rgba(139,92,246,.5); }
.roi-mode-hint { margin-top: 10px; color: var(--text-muted); font-size: .88rem; }
.roi-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.04fr); align-items: start; gap: 20px; }
.roi-input-panel, .roi-result-panel { min-width: 0; padding: clamp(23px,3vw,35px); }
.roi-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 19px; }
.roi-field--full { grid-column: 1/-1; }
.roi-field label, .roi-range-heading label { display: block; min-height: 2.4em; margin-bottom: 8px; color: #e2e8f0; font-size: .9rem; font-weight: 700; line-height: 1.3; }
.roi-field input { width: 100%; min-width: 0; min-height: 53px; padding: 12px 15px; border: 1px solid rgba(148,163,184,.3); border-radius: 12px; background: rgba(3,6,17,.55); color: #fff; font: 700 1.12rem var(--font-body); font-variant-numeric: tabular-nums; }
.roi-field input:hover { border-color: rgba(139,92,246,.6); }
.roi-field input:focus { border-color: var(--accent-cyan); }
.roi-field small, .roi-field-example, .roi-input-help { display: block; margin-top: 8px; color: var(--text-muted); font-size: .82rem; line-height: 1.5; }
.roi-advanced { margin-top: 20px; padding: 15px 17px; border: 1px solid var(--roi-line); border-radius: 14px; }
.roi-advanced summary { color: #b9eefa; cursor: pointer; font-weight: 700; }
.roi-advanced .roi-field { margin-top: 16px; max-width: 270px; }
.roi-common-fields { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--roi-line); }
.roi-range-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.roi-range-heading label { min-height: 0; }
.roi-range-heading output { color: #67e8f9; font: 700 1.4rem var(--font-heading); }
#roiAutomation { width: 100%; height: 28px; accent-color: var(--accent-cyan); cursor: pointer; }
.roi-range-scale { display: flex; justify-content: space-between; margin-top: -3px; color: var(--text-muted); font-size: .74rem; }
.roi-input-help { margin: 8px 0 23px; }
.roi-privacy { display: flex; align-items: flex-start; gap: 10px; margin-top: 24px; padding: 14px; border-radius: 12px; background: rgba(6,182,212,.07); color: #b9dce4; font-size: .8rem; line-height: 1.5; }
.roi-privacy i { color: var(--accent-cyan); margin-top: 3px; }
.roi-result-panel { background: radial-gradient(circle at 100% 0%,rgba(6,182,212,.11),transparent 42%),rgba(18,20,33,.92); }
.roi-result-panel h3 { margin-bottom: 20px; font-size: 1.5rem; }
.roi-results-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.roi-result { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 17px; border: 1px solid var(--roi-line); border-radius: 15px; background: rgba(255,255,255,.025); }
.roi-result--primary { grid-column: 1/-1; background: linear-gradient(125deg,rgba(139,92,246,.2),rgba(6,182,212,.08)); border-color: rgba(139,92,246,.35); }
.roi-result span { color: #c5cfdd; font-size: .78rem; line-height: 1.45; }
.roi-result strong { overflow-wrap: anywhere; font: 700 clamp(1.1rem,2vw,1.55rem)/1.2 var(--font-heading); color: #fff; font-variant-numeric: tabular-nums; }
.roi-result--primary strong { color: #8de9f5; font-size: clamp(1.7rem,2.7vw,2.2rem); }
.roi-result small { color: #bdc6d6; line-height: 1.45; }
.roi-result-note { margin-top: 15px; color: #fbbf9b; line-height: 1.5; }
.roi-result-note:empty { display: none; }
.roi-result-context { margin-top: 14px; color: var(--text-muted); font-size: .8rem; line-height: 1.5; }
.roi-result-action { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--roi-line); }
.roi-result-action h4 { font-family: var(--font-heading); font-size: 1.08rem; }
.roi-result-action p { margin: 8px 0 17px; color: var(--text-muted); font-size: .85rem; }
.roi-result-action .btn-glow { gap: 8px; }
.roi-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.roi-comparison-card { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 25px; align-items: center; padding: clamp(24px,4vw,42px); }
.roi-before, .roi-after { display: flex; flex-direction: column; min-width: 0; }
.roi-before > span, .roi-after > span { color: var(--accent-cyan); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.roi-before strong, .roi-after strong { margin: 10px 0 3px; font: 700 clamp(1.8rem,3vw,2.6rem) var(--font-heading); }
.roi-before small, .roi-after small { color: var(--text-muted); }
.roi-comparison-arrow { color: var(--accent-purple); }
.roi-bar { display: flex; width: 100%; height: 16px; overflow: hidden; margin-top: 23px; border-radius: 99px; background: rgba(255,255,255,.09); }
.roi-bar--before span { width: 100%; background: linear-gradient(90deg,#8b5cf6,#d7b7ff); }
.roi-bar--after span:first-child { background: #8b5cf6; }
.roi-bar--after span:last-child { background: #06b6d4; }
.roi-after p { margin-top: 12px; color: #a6e6f0; }
.roi-chart-card { padding: clamp(18px,3vw,34px); }
.roi-chart-legend { display: flex; flex-wrap: wrap; gap: 18px; color: #dbe5f0; font-size: .85rem; }
.roi-legend-dot { display: inline-block; width: 11px; height: 11px; margin-right: 6px; border-radius: 50%; background: #ae8eff; }
.roi-legend-dot--effect { background: #39d2df; }
.roi-chart { display: block; width: 100%; height: auto; max-height: 380px; margin-top: 18px; overflow: visible; }
.roi-chart .roi-grid-line { stroke: rgba(148,163,184,.18); stroke-width: 1; }
.roi-chart .roi-axis-label { fill: #9eacc0; font: 12px var(--font-body); }
.roi-chart .roi-cost-line { fill: none; stroke: #ae8eff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.roi-chart .roi-effect-line { fill: none; stroke: #39d2df; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.roi-chart .roi-payback-line { stroke: #f9a07a; stroke-width: 1.5; stroke-dasharray: 5 5; }
.roi-chart .roi-payback-dot { fill: #f9a07a; stroke: #111827; stroke-width: 2; }
.roi-chart .roi-payback-label { fill: #ffba9b; font: 700 12px var(--font-body); }
.roi-chart-summary { color: #bcd0db; font-size: .85rem; line-height: 1.5; }
.roi-table-wrap { overflow: hidden; }
.roi-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.roi-table th, .roi-table td { padding: 17px 23px; border-bottom: 1px solid var(--roi-line); text-align: right; font-variant-numeric: tabular-nums; }
.roi-table th:first-child, .roi-table td:first-child { text-align: left; }
.roi-table thead { background: rgba(139,92,246,.11); color: #e2e8f0; }
.roi-table tbody tr:last-child td { border-bottom: 0; }
.roi-table tbody tr:hover { background: rgba(255,255,255,.025); }
.roi-table .is-negative { color: #fbb39e; }
.roi-table .is-positive { color: #83e1db; }
.roi-example-card { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: clamp(25px,4vw,42px); background: linear-gradient(140deg,rgba(139,92,246,.13),rgba(6,182,212,.05)); }
.roi-example-card h2 { margin: 0 0 14px; font-size: clamp(1.5rem,2.5vw,2rem); }
.roi-example-card p { max-width: 800px; margin-top: 10px; color: #cbd5e1; line-height: 1.6; }
.roi-example-card .roi-example-note { color: var(--text-muted); font-size: .83rem; }
.roi-example-card button { flex-shrink: 0; }
.roi-disclaimer { max-width: 940px; margin: 12px auto; padding: 0 18px; color: var(--text-muted); text-align: center; font-size: .86rem; line-height: 1.6; }
.roi-final-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.roi-final-cta h2 { max-width: 700px; margin-bottom: 12px; font-size: clamp(1.7rem,3vw,2.4rem); }
.roi-final-cta p { max-width: 720px; color: var(--text-muted); line-height: 1.6; }
.roi-final-cta .btn-glow { flex-shrink: 0; gap: 10px; padding: 14px 25px; }
@media (max-width: 1050px) { .roi-scenarios { grid-template-columns: repeat(3,minmax(0,1fr)); } .roi-workspace { grid-template-columns: 1fr; } .roi-hero { grid-template-columns: 1fr; } .roi-hero-visual { max-width: 650px; } }
@media (max-width: 700px) { .roi-how-grid { grid-template-columns: 1fr; } .roi-comparison-card { grid-template-columns: 1fr; } .roi-comparison-arrow { transform: rotate(90deg); justify-self: center; } .roi-example-card, .roi-final-cta { flex-direction: column; align-items: flex-start; } .roi-table thead { display: none; } .roi-table, .roi-table tbody, .roi-table tr, .roi-table td { display: block; } .roi-table tbody { padding: 10px; } .roi-table tr { margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--roi-line); border-radius: 14px; } .roi-table tr:last-child { margin-bottom: 0; } .roi-table td, .roi-table td:first-child { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; border: 0; text-align: right; } .roi-table td::before { content: attr(data-label); flex: 0 0 46%; color: var(--text-muted); text-align: left; } .roi-table td:first-child { font-weight: 800; } }
@media (max-width: 520px) { .roi-hero { padding: 56px 0 22px; } .roi-scenarios { grid-template-columns: repeat(2,minmax(0,1fr)); } .roi-fields, .roi-results-grid { grid-template-columns: 1fr; } .roi-field--full, .roi-result--primary { grid-column: auto; } .roi-field label { min-height: 0; } .roi-mode-tabs { width: 100%; } .roi-mode-tab { flex: 1; padding: 12px 10px; font-size: .8rem; } .roi-chart-legend { gap: 8px 18px; } .roi-chart .roi-axis-label { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .roi-page *, .roi-page *::before, .roi-page *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }