/* ═══════════════════════════════════════════════
   ROI Calculator — Premium Dark Mode
   ═══════════════════════════════════════════════ */

/* ── Section ── */
.roi-calculator { padding: var(--space-12) 0 var(--space-8); position: relative; min-height: 100vh; overflow: hidden; }
.roi-calculator::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--card-border),transparent); }
.roi-calculator .container { position:relative; z-index:1; }

/* ── Ambient Glows ── */
.roi-ambient-glow { position:absolute; top:10%; left:50%; transform:translate(-50%,-50%); width:800px; height:800px; background:radial-gradient(circle,rgba(16,185,129,0.045) 0%,transparent 60%); pointer-events:none; z-index:0; }
.roi-glow-secondary { top:60%; left:70%; width:600px; height:600px; background:radial-gradient(circle,rgba(0,243,255,0.03) 0%,transparent 60%); }
body.light-theme .roi-ambient-glow { background:radial-gradient(circle,rgba(16,185,129,0.06) 0%,transparent 62%); }

/* ── Particles Canvas ── */
.roi-particles { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }

/* ── Header ── */
.roi-header { text-align:center; margin-bottom:var(--space-8); animation:roiFadeUp .8s var(--ease-out-expo) both; }
.roi-header h1 { font-size:clamp(1.8rem,3.5vw,2.8rem); margin-bottom:var(--space-2); letter-spacing:var(--tracking-tight); }
.roi-header p { color:var(--text-secondary); font-size:1.05rem; max-width:560px; margin:0 auto; line-height:var(--leading-relaxed); }

/* Header Badge */
.roi-header-badge { display:inline-flex; align-items:center; gap:.5rem; padding:.45rem 1.1rem; border-radius:var(--radius-full); background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.2); margin-bottom:var(--space-3); font-family:var(--font-heading); font-size:.78rem; font-weight:600; color:#34d399; text-transform:uppercase; letter-spacing:var(--tracking-wider); }
.roi-header-badge i { width:14px; height:14px; }
body.light-theme .roi-header-badge { background:rgba(16,185,129,0.06); color:#059669; border-color:rgba(16,185,129,0.15); }

/* Gradient Text */
.roi-gradient-text { background:linear-gradient(135deg,#34d399,var(--primary-neon),#34d399); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:roiGradientShift 4s ease infinite; }
@keyframes roiGradientShift { 0%,100%{background-position:0% center} 50%{background-position:200% center} }

/* ── Entrance Animation ── */
@keyframes roiFadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/* ── Layout ── */
.roi-layout { display:grid; grid-template-columns:1fr 1.15fr; gap:var(--space-5); align-items:start; }

/* ── Panels ── */
.roi-panel { background:rgba(15,15,25,0.55); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--card-border); border-radius:var(--radius-xl); padding:var(--space-5); position:relative; overflow:hidden; transition:border-color .3s var(--ease-premium),box-shadow .3s var(--ease-premium); }
.roi-panel:hover { border-color:rgba(255,255,255,0.1); box-shadow:0 12px 40px rgba(0,0,0,0.2); }
.roi-panel-inputs { animation:roiFadeUp .8s var(--ease-out-expo) .15s both; }
.roi-panel-outputs { animation:roiFadeUp .8s var(--ease-out-expo) .3s both; }

body.light-theme .roi-panel { background:rgba(255,255,255,0.82); border-color:rgba(17,24,39,0.06); box-shadow:0 1px 0 rgba(255,255,255,0.72) inset,0 12px 36px rgba(15,23,42,0.06); backdrop-filter:blur(12px) saturate(120%); }
body.light-theme .roi-panel:hover { border-color:rgba(17,24,39,0.1); box-shadow:0 1px 0 rgba(255,255,255,0.72) inset,0 18px 48px rgba(15,23,42,0.08); }

/* Panel Top Glow */
.roi-panel-glow { position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,rgba(16,185,129,0.6),var(--primary-neon)); opacity:.7; }
body.light-theme .roi-panel-glow { opacity:.4; }

/* Panel Shimmer */
.roi-panel-shimmer { display:none; }

/* ── Panel Headers ── */
.roi-panel-header { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-4); padding-bottom:var(--space-3); border-bottom:1px solid var(--card-border); }
.roi-panel-icon { width:36px; height:36px; border-radius:var(--radius-md); background:rgba(255,255,255,0.04); border:1px solid var(--card-border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.roi-panel-icon i { width:18px; height:18px; color:var(--primary-neon); }
body.light-theme .roi-panel-icon { background:rgba(111,107,232,0.06); border-color:rgba(111,107,232,0.12); }
.roi-panel-header h2 { font-size:1.1rem; font-weight:700; letter-spacing:var(--tracking-tight); margin:0; }
.roi-panel-subtitle { font-size:.75rem; color:var(--text-muted); letter-spacing:var(--tracking-wide); }
.roi-chart-header { margin-top:var(--space-4); }

/* ── Input Groups ── */
.roi-input-group { margin-bottom:var(--space-4); }
.roi-input-group:last-child { margin-bottom:0; }
.roi-input-label { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-1); }
.roi-label-left { display:flex; align-items:center; gap:.6rem; font-weight:600; font-size:.88rem; color:var(--text-primary); font-family:var(--font-heading); }
.roi-label-left i { width:16px; height:16px; color:var(--text-muted); flex-shrink:0; }
.roi-label-value { font-family:var(--font-heading); font-weight:700; font-size:1rem; color:var(--primary-neon); min-width:50px; text-align:right; text-shadow:0 0 10px var(--primary-neon-glow); }
body.light-theme .roi-label-value { text-shadow:none; }

/* Input Divider */
.roi-input-divider { height:1px; background:linear-gradient(90deg,transparent,var(--card-border),transparent); margin:var(--space-4) 0; }

/* ── Sliders ── */
.roi-slider-track { position:relative; width:100%; height:6px; border-radius:var(--radius-full); background:rgba(255,255,255,0.06); overflow:visible; }
body.light-theme .roi-slider-track { background:rgba(17,24,39,0.06); }
.roi-slider-fill { position:absolute; top:0; left:0; height:100%; border-radius:var(--radius-full); background:linear-gradient(90deg,rgba(16,185,129,0.8),var(--primary-neon)); pointer-events:none; transition:width .05s linear; box-shadow:0 0 10px rgba(16,185,129,0.3); }
body.light-theme .roi-slider-fill { background:linear-gradient(90deg,#059669,var(--primary-neon)); box-shadow:0 0 8px rgba(16,185,129,0.12); }

input[type="range"].roi-slider { -webkit-appearance:none; appearance:none; width:100%; height:6px; background:transparent; outline:none; cursor:pointer; position:relative; z-index:2; margin:0; }
input[type="range"].roi-slider::-webkit-slider-runnable-track { height:6px; background:transparent; border-radius:var(--radius-full); }
input[type="range"].roi-slider::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:var(--radius-full); background:var(--primary-neon); border:3px solid var(--bg-primary); box-shadow:0 0 12px var(--primary-neon-glow),0 2px 8px rgba(0,0,0,0.3); cursor:grab; margin-top:-8px; transition:box-shadow .2s,transform .2s; }
input[type="range"].roi-slider::-webkit-slider-thumb:hover { transform:scale(1.15); box-shadow:0 0 20px var(--primary-neon-glow),0 4px 12px rgba(0,0,0,0.4); }
input[type="range"].roi-slider::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.2); }
input[type="range"].roi-slider::-moz-range-thumb { width:22px; height:22px; border-radius:var(--radius-full); background:var(--primary-neon); border:3px solid var(--bg-primary); box-shadow:0 0 12px var(--primary-neon-glow),0 2px 8px rgba(0,0,0,0.3); cursor:grab; }
input[type="range"].roi-slider::-moz-range-track { height:6px; background:transparent; border-radius:var(--radius-full); }
body.light-theme input[type="range"].roi-slider::-webkit-slider-thumb { border-color:#fff; box-shadow:0 4px 12px rgba(111,107,232,0.2),0 2px 6px rgba(0,0,0,0.1); }
body.light-theme input[type="range"].roi-slider::-moz-range-thumb { border-color:#fff; box-shadow:0 4px 12px rgba(111,107,232,0.2),0 2px 6px rgba(0,0,0,0.1); }

.roi-slider-wrapper { position:relative; height:22px; }
.roi-slider-wrapper .roi-slider-track { position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); }
.roi-slider-wrapper input[type="range"].roi-slider { position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); }
.roi-slider-labels { display:flex; justify-content:space-between; margin-top:28px; font-size:.72rem; color:var(--text-muted); font-family:var(--font-heading); letter-spacing:var(--tracking-wider); }

/* ── Number Inputs ── */
.roi-number-input { position:relative; display:flex; align-items:center; }
.roi-number-prefix { position:absolute; left:14px; color:var(--text-muted); font-weight:600; font-size:.9rem; pointer-events:none; z-index:2; }
.roi-number-suffix { position:absolute; right:14px; color:var(--text-muted); font-weight:500; font-size:.8rem; pointer-events:none; z-index:2; }
input[type="number"].roi-num-field { width:100%; padding:.85rem 3.5rem .85rem 2rem; background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:var(--radius-md); color:var(--text-primary); font-family:var(--font-heading); font-size:1rem; font-weight:600; outline:none; transition:border-color .25s,box-shadow .25s; -moz-appearance:textfield; }
input[type="number"].roi-num-field::-webkit-outer-spin-button,
input[type="number"].roi-num-field::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
input[type="number"].roi-num-field:focus { border-color:var(--primary-neon); box-shadow:0 0 0 3px var(--primary-neon-glow),0 0 15px rgba(0,243,255,0.08); }
body.light-theme input[type="number"].roi-num-field { background:rgba(255,255,255,0.9); border-color:rgba(17,24,39,0.1); }
body.light-theme input[type="number"].roi-num-field:focus { border-color:var(--primary-neon); box-shadow:0 0 0 3px var(--primary-neon-glow); }

/* ═══ OUTPUT PANEL ═══ */

/* ── Hero Savings ── */
.roi-hero-savings { text-align:center; padding:var(--space-4) var(--space-3); margin-bottom:var(--space-4); border-radius:var(--radius-lg); background:linear-gradient(180deg,rgba(16,185,129,0.06) 0%,transparent 100%); border:1px solid rgba(16,185,129,0.15); position:relative; overflow:hidden; }
.roi-hero-savings::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%,rgba(16,185,129,0.08),transparent 70%); pointer-events:none; }
body.light-theme .roi-hero-savings { background:linear-gradient(180deg,rgba(16,185,129,0.04) 0%,transparent 100%); border-color:rgba(16,185,129,0.1); }
.roi-hero-savings-label { display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:.78rem; text-transform:uppercase; letter-spacing:var(--tracking-wider); color:var(--text-secondary); font-weight:600; margin-bottom:.5rem; }
.roi-hero-savings-label i { width:16px; height:16px; color:#34d399; }
body.light-theme .roi-hero-savings-label i { color:#059669; }
.roi-hero-savings-value { font-family:var(--font-heading); font-size:2.8rem; font-weight:700; color:#34d399; text-shadow:0 0 30px rgba(52,211,153,0.3),0 0 60px rgba(52,211,153,0.1); line-height:1.1; margin-bottom:var(--space-3); position:relative; z-index:1; }
body.light-theme .roi-hero-savings-value { color:#059669; text-shadow:none; }

/* Savings Meter */
.roi-savings-meter { padding:0 var(--space-2); }
.roi-meter-track { position:relative; height:8px; border-radius:var(--radius-full); background:rgba(255,255,255,0.06); overflow:visible; margin-bottom:.6rem; }
body.light-theme .roi-meter-track { background:rgba(17,24,39,0.06); }
.roi-meter-fill { height:100%; border-radius:var(--radius-full); background:linear-gradient(90deg,#059669,#34d399,var(--primary-neon)); transition:width .6s var(--ease-out-expo); min-width:2%; }
.roi-meter-glow { position:absolute; top:-4px; width:16px; height:16px; border-radius:var(--radius-full); background:var(--primary-neon); box-shadow:0 0 12px var(--primary-neon-glow); transition:left .6s var(--ease-out-expo); pointer-events:none; }
.roi-meter-label { text-align:center; font-size:.8rem; color:#34d399; font-weight:600; font-family:var(--font-heading); }
body.light-theme .roi-meter-label { color:#059669; }

/* ── Stats Grid ── */
.roi-stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); margin-bottom:var(--space-4); }
.roi-stat-card { text-align:center; padding:var(--space-3) var(--space-2); border-radius:var(--radius-lg); border:1px solid var(--card-border); position:relative; overflow:hidden; transition:all .3s var(--ease-premium); }
.roi-stat-card::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,185,129,0.04) 0%,transparent 100%); pointer-events:none; }
.roi-stat-card:hover { transform:translateY(-3px); border-color:rgba(16,185,129,0.3); box-shadow:0 8px 24px rgba(0,0,0,0.15); }
.roi-stat-card.highlight-card { border-color:rgba(16,185,129,0.25); }
body.light-theme .roi-stat-card { background:rgba(255,255,255,0.6); }
.roi-stat-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius-full); background:rgba(255,255,255,0.04); margin-bottom:.5rem; }
.roi-stat-icon i { width:18px; height:18px; color:var(--text-secondary); }
.roi-stat-card.highlight-card .roi-stat-icon { background:rgba(16,185,129,0.1); }
.roi-stat-card.highlight-card .roi-stat-icon i { color:#34d399; }
body.light-theme .roi-stat-card.highlight-card .roi-stat-icon i { color:#059669; }
.roi-stat-value { font-family:var(--font-heading); font-size:1.6rem; font-weight:700; margin-bottom:.3rem; color:var(--text-primary); }
.roi-stat-value.payback-value { color:var(--primary-neon); text-shadow:0 0 12px var(--primary-neon-glow); }
body.light-theme .roi-stat-value.payback-value { text-shadow:none; }
.roi-stat-label { font-size:.72rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:var(--tracking-wider); font-weight:600; }

/* ── Comparison Row ── */
.roi-comparison { display:grid; grid-template-columns:1fr auto 1fr; gap:var(--space-2); align-items:center; margin-bottom:var(--space-4); }
.roi-cost-block { padding:var(--space-3); border-radius:var(--radius-md); border:1px solid var(--card-border); text-align:center; transition:all .3s var(--ease-premium); }
.roi-cost-block:hover { transform:translateY(-2px); }
.roi-cost-block.old-cost { background:rgba(239,68,68,0.04); border-color:rgba(239,68,68,0.15); }
.roi-cost-block.led-cost { background:rgba(16,185,129,0.04); border-color:rgba(16,185,129,0.15); }
body.light-theme .roi-cost-block.old-cost { background:rgba(239,68,68,0.03); }
body.light-theme .roi-cost-block.led-cost { background:rgba(16,185,129,0.03); }
.roi-cost-icon { margin-bottom:.4rem; }
.roi-cost-icon i { width:20px; height:20px; }
.roi-cost-block.old-cost .roi-cost-icon i { color:#f87171; }
.roi-cost-block.led-cost .roi-cost-icon i { color:#34d399; }
body.light-theme .roi-cost-block.old-cost .roi-cost-icon i { color:#dc2626; }
body.light-theme .roi-cost-block.led-cost .roi-cost-icon i { color:#059669; }
.roi-cost-title { font-size:.7rem; text-transform:uppercase; letter-spacing:var(--tracking-wider); color:var(--text-secondary); font-weight:600; margin-bottom:.4rem; }
.roi-cost-amount { font-family:var(--font-heading); font-size:1.25rem; font-weight:700; }
.roi-cost-block.old-cost .roi-cost-amount { color:#f87171; }
.roi-cost-block.led-cost .roi-cost-amount { color:#34d399; }
body.light-theme .roi-cost-block.old-cost .roi-cost-amount { color:#dc2626; }
body.light-theme .roi-cost-block.led-cost .roi-cost-amount { color:#059669; }
.roi-cost-vs { display:flex; align-items:center; justify-content:center; }
.roi-cost-vs i { width:20px; height:20px; color:var(--text-muted); }

/* ── Badge ── */
.roi-badge-container { text-align:center; margin-bottom:var(--space-3); }
.roi-savings-badge { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.1rem; background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.2); border-radius:var(--radius-full); font-family:var(--font-heading); font-weight:700; font-size:.85rem; color:#34d399; box-shadow:0 0 15px rgba(16,185,129,0.08); animation:roiBadgePulse 3s ease-in-out infinite; }
.roi-savings-badge i { width:16px; height:16px; }
body.light-theme .roi-savings-badge { background:rgba(16,185,129,0.05); color:#059669; animation:none; }
@keyframes roiBadgePulse { 0%,100%{box-shadow:0 0 15px rgba(16,185,129,0.08)} 50%{box-shadow:0 0 25px rgba(16,185,129,0.18)} }

/* ── Chart ── */
.roi-chart-section { margin-top:var(--space-2); }
.roi-chart-wrapper { position:relative; width:100%; height:320px; margin-top:var(--space-2); }
.roi-chart-wrapper canvas { width:100%!important; height:100%!important; }
.roi-chart-legend { display:flex; justify-content:center; gap:var(--space-4); margin-top:var(--space-3); font-size:.8rem; font-weight:500; }
.roi-legend-item { display:flex; align-items:center; gap:.45rem; }
.roi-legend-dot { width:10px; height:10px; border-radius:var(--radius-full); flex-shrink:0; }
.roi-legend-dot.old { background:#f87171; box-shadow:0 0 6px rgba(248,113,113,0.4); }
.roi-legend-dot.led { background:#34d399; box-shadow:0 0 6px rgba(52,211,153,0.4); }
.roi-legend-dot.breakeven { background:#fbbf24; box-shadow:0 0 6px rgba(251,191,36,0.4); }
body.light-theme .roi-legend-dot.old { background:#dc2626; box-shadow:none; }
body.light-theme .roi-legend-dot.led { background:#059669; box-shadow:none; }
body.light-theme .roi-legend-dot.breakeven { background:#d97706; box-shadow:none; }

/* ── 5-Year Summary ── */
.roi-five-year-summary { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--card-border); }
.roi-five-year-item { padding:var(--space-3); border-radius:var(--radius-md); background:rgba(255,255,255,0.02); border:1px solid var(--card-border); text-align:center; transition:transform .3s var(--ease-premium); }
.roi-five-year-item:hover { transform:translateY(-2px); }
body.light-theme .roi-five-year-item { background:rgba(255,255,255,0.5); }
.roi-five-year-total { grid-column:span 2; background:linear-gradient(180deg,rgba(16,185,129,0.04),transparent); border-color:rgba(16,185,129,0.15); }
.roi-five-year-label { font-size:.72rem; text-transform:uppercase; letter-spacing:var(--tracking-wider); color:var(--text-secondary); font-weight:600; margin-bottom:.4rem; }
.roi-five-year-value { font-family:var(--font-heading); font-size:1.15rem; font-weight:700; color:#34d399; }
.roi-cost-red { color:#f87171!important; }
body.light-theme .roi-cost-red { color:#dc2626!important; }
body.light-theme .roi-five-year-value { color:#059669; }
.roi-five-year-hero { font-size:1.6rem!important; text-shadow:0 0 15px rgba(52,211,153,0.2); }
body.light-theme .roi-five-year-hero { text-shadow:none; }

/* ── CTA ── */
.roi-cta { margin-top:var(--space-8); }
.roi-cta-inner { text-align:center; padding:var(--space-6) var(--space-5); border-radius:var(--radius-xl); background:rgba(15,15,25,0.5); backdrop-filter:blur(12px); border:1px solid var(--card-border); position:relative; overflow:hidden; }
.roi-cta-inner::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%,rgba(16,185,129,0.06),transparent 70%); pointer-events:none; }
body.light-theme .roi-cta-inner { background:rgba(255,255,255,0.7); }
.roi-cta-icon { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:var(--radius-full); background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.2); margin-bottom:var(--space-3); }
.roi-cta-icon i { width:22px; height:22px; color:#34d399; }
body.light-theme .roi-cta-icon i { color:#059669; }
.roi-cta-inner h3 { font-size:1.4rem; margin-bottom:var(--space-1); }
.roi-cta-inner p { color:var(--text-secondary); margin-bottom:var(--space-4); font-size:1rem; }
.roi-cta-btn i { width:18px; height:18px; }

/* ═══════════════════════════════════════════
   RESPONSIVE — Tablet
   ═══════════════════════════════════════════ */
@media (max-width:900px) {
    .roi-layout { grid-template-columns:1fr; gap:var(--space-4); }
    .roi-header h1 { font-size:2rem; }
    .roi-header p { font-size:.95rem; }
    .roi-cta-inner { padding:var(--space-5) var(--space-4); }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Mobile
   ═══════════════════════════════════════════ */
@media (max-width:600px) {
    /* Section */
    .roi-calculator { padding:var(--space-6) 0 var(--space-4); }
    .roi-header { margin-bottom:var(--space-5); }
    .roi-header h1 { font-size:1.55rem; line-height:1.25; }
    .roi-header p { font-size:.88rem; max-width:100%; }
    .roi-header-badge { font-size:.7rem; padding:.35rem .85rem; margin-bottom:var(--space-2); }

    /* Ambient effects — reduce for performance */
    .roi-ambient-glow { width:400px; height:400px; }
    .roi-glow-secondary { display:none; }


    /* Panels */
    .roi-panel { padding:var(--space-3); border-radius:var(--radius-lg); }
    .roi-panel-header { margin-bottom:var(--space-3); padding-bottom:var(--space-2); gap:var(--space-1); }
    .roi-panel-icon { width:32px; height:32px; }
    .roi-panel-icon i { width:16px; height:16px; }
    .roi-panel-header h2 { font-size:1rem; }
    .roi-panel-subtitle { font-size:.68rem; }

    /* Inputs */
    .roi-input-group { margin-bottom:var(--space-3); }
    .roi-label-left { font-size:.82rem; gap:.45rem; }
    .roi-label-left i { width:15px; height:15px; }
    .roi-label-value { font-size:.9rem; }
    .roi-input-divider { margin:var(--space-3) 0; }

    /* Sliders — larger touch targets */
    .roi-slider-wrapper { height:28px; }
    input[type="range"].roi-slider::-webkit-slider-thumb {
        width:28px; height:28px; margin-top:-11px;
    }
    input[type="range"].roi-slider::-moz-range-thumb {
        width:28px; height:28px;
    }
    .roi-slider-labels { margin-top:32px; font-size:.68rem; }

    /* Number inputs — larger tap area */
    input[type="number"].roi-num-field { padding:.95rem 3.5rem .95rem 2rem; font-size:1.05rem; }

    /* Hero savings */
    .roi-hero-savings { padding:var(--space-3) var(--space-2); margin-bottom:var(--space-3); }
    .roi-hero-savings-value { font-size:2rem; }
    .roi-hero-savings-label { font-size:.72rem; }
    .roi-meter-track { height:6px; }
    .roi-meter-glow { width:12px; height:12px; top:-3px; }
    .roi-meter-label { font-size:.72rem; }

    /* Stats — 2 columns on mobile, still fits */
    .roi-stats-grid { grid-template-columns:repeat(2,1fr); gap:var(--space-2); }
    .roi-stat-card { padding:var(--space-2); }
    .roi-stat-icon { width:30px; height:30px; margin-bottom:.35rem; }
    .roi-stat-icon i { width:15px; height:15px; }
    .roi-stat-value { font-size:1.3rem; }
    .roi-stat-label { font-size:.65rem; }

    /* Comparison — stack vertically */
    .roi-comparison { grid-template-columns:1fr; gap:var(--space-2); }
    .roi-cost-vs { transform:rotate(90deg); padding:.25rem 0; }
    .roi-cost-vs i { width:16px; height:16px; }
    .roi-cost-block { padding:var(--space-2); }
    .roi-cost-amount { font-size:1.1rem; }

    /* Badge */
    .roi-savings-badge { font-size:.78rem; padding:.45rem .9rem; }

    /* Chart */
    .roi-chart-section { margin-top:var(--space-1); }
    .roi-chart-wrapper { height:240px; }
    .roi-chart-legend { gap:var(--space-2); font-size:.72rem; flex-wrap:wrap; justify-content:center; }

    /* 5-year summary */
    .roi-five-year-summary { grid-template-columns:1fr 1fr; gap:var(--space-2); margin-top:var(--space-3); padding-top:var(--space-3); }
    .roi-five-year-total { grid-column:span 2; }
    .roi-five-year-item { padding:var(--space-2); }
    .roi-five-year-value { font-size:1rem; }
    .roi-five-year-hero { font-size:1.3rem!important; }
    .roi-five-year-label { font-size:.65rem; }

    /* CTA */
    .roi-cta { margin-top:var(--space-5); }
    .roi-cta-inner { padding:var(--space-4) var(--space-3); border-radius:var(--radius-lg); }
    .roi-cta-inner h3 { font-size:1.15rem; }
    .roi-cta-inner p { font-size:.88rem; margin-bottom:var(--space-3); }
    .roi-cta-icon { width:40px; height:40px; }
    .roi-cta-icon i { width:18px; height:18px; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Small Mobile (iPhone SE etc.)
   ═══════════════════════════════════════════ */
@media (max-width:400px) {
    .roi-header h1 { font-size:1.35rem; }
    .roi-panel { padding:var(--space-2) calc(var(--space-2) + 4px); }
    .roi-hero-savings-value { font-size:1.7rem; }
    .roi-stats-grid { grid-template-columns:1fr; }
    .roi-stat-card { flex-direction:row; text-align:left; gap:var(--space-2); padding:var(--space-2) var(--space-3); }
    .roi-stat-icon { margin-bottom:0; }
    .roi-five-year-summary { grid-template-columns:1fr; }
    .roi-five-year-total { grid-column:span 1; }
    .roi-chart-wrapper { height:200px; }
    .roi-chart-legend { font-size:.68rem; gap:var(--space-1); }
}

/* ═══════════════════════════════════════════
   Touch Device Optimizations
   ═══════════════════════════════════════════ */
@media (hover:none) {
    /* Disable hover lifts on touch — prevents sticky hover states */
    .roi-stat-card:hover,
    .roi-cost-block:hover,
    .roi-five-year-item:hover { transform:none; }
    .roi-panel:hover { border-color:var(--card-border); box-shadow:none; }


    /* Ensure slider thumbs are easy to grab */
    input[type="range"].roi-slider::-webkit-slider-thumb { width:30px; height:30px; margin-top:-12px; }
    input[type="range"].roi-slider::-moz-range-thumb { width:30px; height:30px; }
}

/* Safe area for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
    .roi-calculator { padding-bottom:calc(var(--space-6) + env(safe-area-inset-bottom)); }
}

/* ═══════════════════════════════════════════════
   PREMIUM UPGRADES — Presets, Eco Card & Export
   ═══════════════════════════════════════════════ */

/* Smart Presets Group */
.roi-presets-group {
    margin-bottom: var(--space-4);
    padding: var(--space-2) 0;
}
.roi-presets-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}
.roi-presets-label i {
    width: 14px;
    height: 14px;
    color: var(--primary-neon);
}
.roi-presets-grid-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}
.roi-preset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.4rem;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s var(--ease-premium);
}
.roi-preset-btn i {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}
.roi-preset-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}
.roi-preset-btn.active {
    color: var(--bg-primary);
    background: var(--primary-neon);
    border-color: var(--primary-neon);
    box-shadow: 0 0 15px var(--primary-neon-glow);
}
body.light-theme .roi-preset-btn {
    background: rgba(17, 24, 39, 0.03);
    border-color: rgba(17, 24, 39, 0.08);
}
body.light-theme .roi-preset-btn:hover {
    background: rgba(17, 24, 39, 0.06);
    border-color: rgba(17, 24, 39, 0.15);
}
body.light-theme .roi-preset-btn.active {
    color: #fff;
    background: var(--primary-neon);
    box-shadow: 0 4px 12px rgba(111, 107, 232, 0.25);
}

/* Eco Card Pulse & Styling */
.roi-stat-card.eco-card {
    border-color: rgba(16, 185, 129, 0.15);
}
.roi-stat-card.eco-card:hover {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.1);
}
.roi-stat-card.eco-card .roi-stat-icon {
    background: rgba(16, 185, 129, 0.08);
}
.roi-stat-card.eco-card .roi-stat-icon i {
    color: #10b981;
    animation: ecoLeafBreath 3s ease-in-out infinite;
}
.roi-stat-card.eco-card .roi-stat-value {
    color: #10b981;
}
.roi-stat-subtext {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 1px;
}
@keyframes ecoLeafBreath {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.1) rotate(5deg); opacity: 1; filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.4)); }
}

/* Export Button Section */
.roi-export-section {
    margin-top: var(--space-4);
}
.roi-export-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s var(--ease-premium);
}
.roi-export-btn i {
    width: 16px;
    height: 16px;
    color: var(--primary-neon);
}
.roi-export-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}
.roi-export-btn:active {
    transform: translateY(0);
}
body.light-theme .roi-export-btn {
    background: rgba(17, 24, 39, 0.02);
    border-color: rgba(17, 24, 39, 0.08);
}
body.light-theme .roi-export-btn:hover {
    background: rgba(17, 24, 39, 0.05);
    border-color: rgba(17, 24, 39, 0.15);
}

/* Adjust stats grid on desktop to handle 3 columns nicely */
@media (min-width: 901px) {
    .roi-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ═══════════════════════════════════════════
   PRINT-SPECIFIC CSS FOR HIGH-FIDELITY PDF
   ═══════════════════════════════════════════ */
@media print {
    /* Hide navigation, footer, particles, cta, sliders and controls */
    .navbar, footer, .roi-ambient-glow, .roi-particles, .roi-cta,
    .roi-panel-inputs, .roi-export-section, .roi-panel-glow, 
    #theme-toggle, .mobile-menu-btn, .roi-input-divider, .roi-slider-labels,
    .roi-slider-wrapper {
        display: none !important;
    }

    /* Set clean printer colors */
    body {
        background: #ffffff !important;
        color: #111827 !important;
        font-size: 11pt !important;
    }

    .roi-calculator {
        padding: 0 !important;
        min-height: auto !important;
    }

    .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Change layout to standard full-width print report block */
    .roi-layout {
        display: block !important;
    }

    /* Force display and styling of output panel in full-width print mode */
    .roi-panel-outputs {
        width: 100% !important;
        background: #ffffff !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        color: #111827 !important;
    }

    .roi-header {
        margin-bottom: 2rem !important;
        text-align: left !important;
        border-bottom: 2px solid #e5e7eb !important;
        padding-bottom: 1rem !important;
    }

    .roi-header h1 {
        font-size: 24pt !important;
        color: #111827 !important;
    }

    .roi-gradient-text {
        -webkit-text-fill-color: initial !important;
        background: none !important;
        color: #111827 !important;
    }

    .roi-header-badge {
        border: 1px solid #10b981 !important;
        background: none !important;
        color: #10b981 !important;
        font-size: 9pt !important;
        padding: 2px 6px !important;
    }

    /* Premium print summary top section */
    .roi-hero-savings {
        background: #f0fdf4 !important;
        border: 2px dashed #10b981 !important;
        border-radius: 8px !important;
        padding: 1.5rem !important;
        margin-bottom: 2rem !important;
        page-break-inside: avoid;
    }

    .roi-hero-savings-value {
        color: #047857 !important;
        font-size: 36pt !important;
        text-shadow: none !important;
    }

    .roi-savings-meter {
        display: none !important;
    }

    /* Key stats in columns */
    .roi-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
        margin-bottom: 2rem !important;
        page-break-inside: avoid;
    }

    .roi-stat-card {
        background: #f9fafb !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 6px !important;
        padding: 1rem !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .roi-stat-value {
        font-size: 16pt !important;
        color: #111827 !important;
        text-shadow: none !important;
    }
    
    .roi-stat-value.payback-value {
        color: #4f46e5 !important;
    }

    .roi-stat-card.eco-card .roi-stat-value {
        color: #047857 !important;
    }

    .roi-stat-icon {
        display: none !important;
    }

    /* Cost Comparison Block */
    .roi-comparison {
        display: grid !important;
        grid-template-columns: 1fr 40px 1fr !important;
        gap: 1rem !important;
        margin-bottom: 2rem !important;
        page-break-inside: avoid;
    }

    .roi-cost-block {
        border-radius: 6px !important;
        padding: 1rem !important;
        transform: none !important;
    }

    .roi-cost-block.old-cost {
        background: #fef2f2 !important;
        border: 1px solid #fca5a5 !important;
    }

    .roi-cost-block.led-cost {
        background: #f0fdf4 !important;
        border: 1px solid #86efac !important;
    }

    .roi-cost-amount {
        font-size: 14pt !important;
    }

    .roi-cost-block.old-cost .roi-cost-amount {
        color: #b91c1c !important;
    }

    .roi-cost-block.led-cost .roi-cost-amount {
        color: #047857 !important;
    }

    /* Chart Print Optimization */
    .roi-chart-section {
        margin-top: 3rem !important;
        page-break-inside: avoid;
    }

    .roi-chart-wrapper {
        height: 250px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        padding: 10px !important;
        background: #ffffff !important;
    }

    /* 5-Year summary */
    .roi-five-year-summary {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        margin-top: 2rem !important;
        padding-top: 1rem !important;
        border-top: 1px solid #e5e7eb !important;
        page-break-inside: avoid;
    }

    .roi-five-year-item {
        background: #f9fafb !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 6px !important;
        padding: 0.8rem !important;
        transform: none !important;
    }

    .roi-five-year-total {
        grid-column: span 2 !important;
        background: #f0fdf4 !important;
        border: 1px solid #86efac !important;
    }

    .roi-five-year-value {
        font-size: 12pt !important;
        color: #111827 !important;
    }

    .roi-cost-red {
        color: #b91c1c !important;
    }

    .roi-five-year-hero {
        font-size: 18pt !important;
        color: #047857 !important;
    }

    /* Custom printable inputs breakdown for auditing */
    .roi-calculator::after {
        content: "\A--------------------------------------------------\A VINSTA LED ROI AUDIT & PROPOSAL SUMMARY\A Generated on: " attr(data-print-date) " \A Setup Parameters Checked:\A • Traditional Wattage: " attr(data-old-watt) "W\A • LED Replacement Wattage: " attr(data-led-watt) "W\A • Number of LED Lights: " attr(data-qty) " LED lights\A • Daily Operating Hours: " attr(data-hours) " hours/day\A • Commercial Electricity Rate: \20B9" attr(data-rate) "/kWh\A • LED Light Replacement Unit Cost: \20B9" attr(data-led-cost) "\A--------------------------------------------------\A Thank you for choosing Vinsta LED Lights.";
        white-space: pre-wrap;
        display: block;
        margin-top: 4rem;
        padding: 1.5rem;
        border: 1px solid #e5e7eb;
        background: #f9fafb;
        color: #4b5563;
        font-family: monospace;
        font-size: 9pt;
        line-height: 1.6;
        border-radius: 6px;
        page-break-inside: avoid;
    }
}