/* HVACcalc v3 · Consumer-First Design System */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Palette – warm neutral + decisive accents */
  --ink:       #111827;
  --ink2:      #1f2937;
  --surface:   #ffffff;
  --bg:        #f5f6f8;
  --bg2:       #eef0f3;
  --border:    #e5e7eb;
  --border2:   #d1d5db;
  --muted:     #6b7280;
  --muted2:    #9ca3af;
  /* brand */
  --blue:      #2563eb;
  --blue-d:    #1d4ed8;
  --blue-lt:   #eff6ff;
  --blue-mid:  #bfdbfe;
  /* green */
  --green:     #16a34a;
  --green-d:   #15803d;
  --green-lt:  #f0fdf4;
  --green-mid: #bbf7d0;
  /* amber */
  --amber:     #d97706;
  --amber-lt:  #fffbeb;
  --amber-mid: #fde68a;
  /* red */
  --red:       #dc2626;
  --red-lt:    #fef2f2;
  --red-mid:   #fecaca;
  /* teal */
  --teal:      #0891b2;
  --teal-lt:   #ecfeff;
  --teal-mid:  #a5f3fc;
  /* orange */
  --orange:    #ea580c;
  /* radius */
  --r4:4px;--r6:6px;--r8:8px;--r10:10px;--r12:12px;--r16:16px;--r20:20px;--r24:24px;
  /* shadows */
  --sh0:0 1px 2px rgba(0,0,0,.04);
  --sh1:0 2px 8px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.05);
  --sh2:0 8px 28px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.06);
  --sh3:0 20px 60px rgba(0,0,0,.13),0 4px 16px rgba(0,0,0,.08);
  /* nav */
  --nav-h:60px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Outfit',system-ui,sans-serif;
  background:var(--bg);color:var(--ink);
  min-height:100vh;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--nav-h);overflow-x:hidden;
}
.mono{font-family:'JetBrains Mono',monospace}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}
input[type=range]{
  -webkit-appearance:none;width:100%;height:6px;
  border-radius:3px;background:var(--bg2);outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--blue);cursor:pointer;border:2px solid white;
  box-shadow:0 1px 4px rgba(37,99,235,.35);
}
::-webkit-scrollbar{width:6px;height:5px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-track{background:transparent}
a{color:inherit;text-decoration:none}

/* ── NAVBAR ── */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:300;
  background:white;border-bottom:1px solid var(--border);
  height:var(--nav-h);box-shadow:0 1px 8px rgba(0,0,0,.06);
}
.nav-inner{
  max-width:1200px;margin:0 auto;padding:0 16px;
  height:100%;display:flex;align-items:center;gap:6px;
}
.nav-logo{
  font-family:'Outfit',sans-serif;font-weight:800;font-size:18px;
  letter-spacing:-.03em;color:var(--ink);text-decoration:none;
  flex-shrink:0;margin-right:16px;display:flex;align-items:center;gap:6px;
}
.nav-logo .logo-mark{
  width:28px;height:28px;border-radius:7px;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:white;font-weight:800;flex-shrink:0;
}
.nav-logo span{color:var(--blue)}
.nav-links{display:flex;align-items:center;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-link{
  display:flex;align-items:center;gap:5px;padding:6px 13px;
  border-radius:var(--r8);font-size:13.5px;font-weight:600;
  color:var(--muted);white-space:nowrap;transition:all .15s;
  flex-shrink:0;text-decoration:none;
}
.nav-link:hover{color:var(--ink);background:var(--bg)}
.nav-link.active{color:var(--blue);background:var(--blue-lt)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--muted);margin-left:auto}
.nav-toggle svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;display:block}
.nav-mobile{display:none;background:white;border-bottom:1px solid var(--border);padding:10px 14px;flex-direction:column;gap:4px}
.nav-mobile.open{display:flex}
.nav-mobile .nav-link{border-radius:var(--r8);height:44px}

/* ── PAGE HERO ── */
.page-hero{
  padding:28px 16px 24px;
  border-bottom:1px solid var(--border);
  background:white;
}
.page-hero-inner{max-width:860px;margin:0 auto}
.page-hero h1{font-size:clamp(1.4rem,3.5vw,1.9rem);font-weight:800;letter-spacing:-.03em;margin-bottom:6px}
.page-hero p{color:var(--muted);font-size:15px;max-width:580px;line-height:1.6}

/* Colored hero variants */
.hero-blue .page-hero{background:linear-gradient(135deg,#1e3a8a,#2563eb);color:white}
.hero-blue .page-hero p{color:rgba(255,255,255,.75)}
.hero-teal .page-hero{background:linear-gradient(135deg,#0f4c5c,#0891b2);color:white}
.hero-teal .page-hero p{color:rgba(255,255,255,.75)}
.hero-orange .page-hero{background:linear-gradient(135deg,#7c2d12,#ea580c);color:white}
.hero-orange .page-hero p{color:rgba(255,255,255,.75)}

/* ── AD SLOTS ── */
.ad-slot{
  background:#f9fafb;border:1px dashed var(--border2);border-radius:var(--r8);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted2);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;min-height:90px;
  position:relative;
}
.ad-slot::before{
  content:'reklama';position:absolute;top:-8px;left:12px;
  background:#f9fafb;padding:0 6px;font-size:9px;
  color:var(--muted2);letter-spacing:.08em;font-weight:700;
}
.ad-wrap{padding:16px 0}
.ad-leader{width:100%;min-height:90px}
.ad-banner{width:100%;min-height:90px}
.ad-rect{width:100%;min-height:250px;max-width:336px;margin:0 auto;display:block}

/* ── TAB BAR ── */
.tab-bar{
  background:white;border-bottom:2px solid var(--border);
  display:flex;overflow-x:auto;scrollbar-width:none;
  position:sticky;top:var(--nav-h);z-index:200;
}
.tab-bar::-webkit-scrollbar{display:none}
.tab{
  padding:0 20px;height:50px;display:flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;color:var(--muted);
  cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent;
  transition:all .15s;user-select:none;flex-shrink:0;
}
.tab:hover{color:var(--ink);background:var(--bg)}
.tab.on{color:var(--blue);border-bottom-color:var(--blue)}
.tab-pane{display:none}
.tab-pane.on{display:block;animation:slideIn .18s ease-out}

/* ── STEPS ── */
.steps-bar{
  display:flex;align-items:center;
  background:var(--blue-lt);border:1px solid var(--blue-mid);
  border-radius:var(--r10);padding:12px 18px;margin-bottom:20px;
  overflow-x:auto;scrollbar-width:none;gap:0;flex-wrap:nowrap;
}
.steps-bar::-webkit-scrollbar{display:none}
.step-item{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:13px}
.step-num{
  width:24px;height:24px;border-radius:50%;
  background:var(--blue);color:white;
  font-size:11px;font-weight:800;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;
}
.step-arrow{margin:0 10px;color:var(--blue-mid);font-size:18px;font-weight:300}

/* ── LAYOUT ── */
.page{max-width:1200px;margin:0 auto;padding:24px 16px 80px}
.page-md{max-width:860px;margin:0 auto;padding:24px 16px 80px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* ── CARDS ── */
.card{
  background:white;border-radius:var(--r16);
  border:1px solid var(--border);box-shadow:var(--sh1);padding:22px;
}
.card+.card{margin-top:16px}
.card-title{font-size:1rem;font-weight:700;margin-bottom:4px;letter-spacing:-.01em}
.card-desc{font-size:13px;color:var(--muted);margin-bottom:18px;line-height:1.6}

/* ── RESULT DECISION PANEL ── */
.decision-panel{
  border-radius:var(--r16);overflow:hidden;
  margin-top:4px;display:none;
  animation:slideIn .22s ease-out;
  box-shadow:var(--sh2);
}
.decision-panel.show{display:block}
.dp-header{padding:18px 22px;color:white}
.dp-header.dp-good{background:linear-gradient(135deg,#14532d,#16a34a)}
.dp-header.dp-warn{background:linear-gradient(135deg,#78350f,#d97706)}
.dp-header.dp-bad {background:linear-gradient(135deg,#7f1d1d,#dc2626)}
.dp-header.dp-blue{background:linear-gradient(135deg,#1e3a8a,#2563eb)}
.dp-header.dp-teal{background:linear-gradient(135deg,#0f4c5c,#0891b2)}
.dp-status{font-size:11px;text-transform:uppercase;letter-spacing:.1em;opacity:.7;margin-bottom:4px;font-weight:600}
.dp-value{font-family:'JetBrains Mono',monospace;font-size:clamp(2.2rem,6vw,3.2rem);font-weight:700;line-height:1;margin-bottom:8px}
.dp-summary{font-size:14px;opacity:.9;line-height:1.5;font-weight:500}
.dp-body{background:white;padding:18px 22px;border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r16) var(--r16)}
.dp-answer{font-size:15px;font-weight:700;margin-bottom:12px;color:var(--ink)}
.dp-items{display:flex;flex-direction:column;gap:8px}
.dp-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:11px 14px;border-radius:var(--r8);
  font-size:14px;line-height:1.5;
}
.dp-item.ok{background:var(--green-lt);border:1px solid var(--green-mid);color:#14532d}
.dp-item.warn{background:var(--amber-lt);border:1px solid var(--amber-mid);color:#78350f}
.dp-item.info{background:var(--blue-lt);border:1px solid var(--blue-mid);color:#1e40af}
.dp-item-icon{font-size:16px;flex-shrink:0;margin-top:1px}

/* ── COST PANEL ── */
.cost-panel{
  background:white;border-radius:var(--r12);border:1px solid var(--border);
  padding:16px;margin-top:10px;
}
.cost-panel-title{
  font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);margin-bottom:12px;
  display:flex;align-items:center;gap:6px;
}
.cost-options{display:flex;flex-direction:column;gap:8px}
.cost-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 13px;border-radius:var(--r8);background:var(--bg);
  border:1px solid var(--border);
}
.cost-row-label{font-size:13px;font-weight:500}
.cost-row-sub{font-size:11px;color:var(--muted);margin-top:1px}
.cost-row-price{font-size:14px;font-weight:700;color:var(--blue);font-family:'JetBrains Mono',monospace;white-space:nowrap;flex-shrink:0}
.cost-row.highlight{background:var(--blue-lt);border-color:var(--blue-mid)}
.cost-row.highlight .cost-row-price{color:var(--blue-d)}

/* ── FORM ELEMENTS ── */
.fgroup{margin-bottom:18px}
.flabel{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px;margin-bottom:7px;color:var(--ink)}
.flabel small{font-size:11px;font-weight:400;color:var(--muted)}
.fi{
  width:100%;padding:12px 14px;border:1.5px solid var(--border);
  border-radius:var(--r8);font-size:15px;font-family:'Outfit',sans-serif;
  outline:none;transition:border-color .15s,box-shadow .15s;
  background:white;color:var(--ink);min-height:48px;
  -webkit-appearance:none;appearance:none;
}
.fi:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.fi-lg{font-size:1.35rem;font-weight:700;font-family:'JetBrains Mono',monospace;padding:13px 16px}
.fi.err{border-color:var(--amber)}
select.fi{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.warn-msg{font-size:12px;color:var(--amber);margin-top:5px;display:none;align-items:center;gap:4px}
.warn-msg.show{display:flex}
.range-val{font-size:14px;font-weight:700;color:var(--blue)}
.range-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:4px}

/* ── OPTION PILLS ── */
.opills{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.opill{
  padding:9px 16px;border-radius:var(--r8);font-size:13.5px;font-weight:500;
  cursor:pointer;border:1.5px solid var(--border);background:white;
  color:var(--muted);transition:all .15s;font-family:'Outfit',sans-serif;
  min-height:44px;display:inline-flex;align-items:center;gap:6px;
  text-align:left;line-height:1.3;
}
.opill:hover{border-color:var(--border2);color:var(--ink);background:var(--bg)}
.opill.on{border-color:var(--blue);background:var(--blue-lt);color:var(--blue);font-weight:600}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 22px;border-radius:var(--r8);font-size:14px;font-weight:700;
  cursor:pointer;border:none;transition:all .15s;font-family:'Outfit',sans-serif;
  min-height:44px;text-decoration:none;white-space:nowrap;letter-spacing:.01em;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--blue);color:white}
.btn-primary:hover{background:var(--blue-d);box-shadow:0 4px 14px rgba(37,99,235,.3)}
.btn-green{background:var(--green);color:white}
.btn-green:hover{background:var(--green-d)}
.btn-ghost{background:white;color:var(--muted);border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--border2);color:var(--ink)}
.btn-sm{padding:7px 14px;font-size:12.5px;min-height:36px;border-radius:var(--r6)}
.btn-lg{padding:14px 28px;font-size:16px;min-height:52px;border-radius:var(--r12)}
.btn-full{width:100%}
.btn-del{background:none;border:none;color:var(--muted2);font-size:11px;cursor:pointer;font-family:'Outfit',sans-serif;padding:6px 8px;min-height:36px;border-radius:var(--r4);transition:color .1s}
.btn-del:hover{color:var(--red)}
.qp{background:white;border:1.5px solid var(--border);color:var(--muted);padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;font-family:'Outfit',sans-serif;min-height:34px}
.qp:hover{border-color:var(--border2);color:var(--ink)}
.qp.on{background:var(--blue-lt);border-color:var(--blue);color:var(--blue)}

/* ── STICKY CALC BUTTON (mobile) ── */
.sticky-calc{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:150;
  background:white;border-top:1px solid var(--border);
  padding:12px 16px;box-shadow:0 -4px 16px rgba(0,0,0,.1);
}
.sticky-calc button{
  width:100%;padding:14px;background:var(--blue);color:white;
  border:none;border-radius:var(--r10);font-size:16px;font-weight:700;
  font-family:'Outfit',sans-serif;cursor:pointer;
}

/* ── INSTALLER TABLES ── */
.tcard{background:white;border-radius:var(--r12);border:1px solid var(--border);overflow:hidden;margin-bottom:16px;box-shadow:var(--sh0)}
.tcard-head{padding:12px 18px;background:var(--bg);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:8px}
.tcard-head h3{font-size:14px;font-weight:700}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-scroll::-webkit-scrollbar{height:4px}
.tbl-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.itbl{width:100%;border-collapse:collapse;font-size:13px}
.itbl th{padding:9px 10px;font-size:10px;text-transform:uppercase;font-weight:700;letter-spacing:.04em;border-bottom:2px solid var(--border);text-align:left;background:var(--bg);color:var(--muted);white-space:nowrap}
.itbl td{border-bottom:1px solid var(--bg2);vertical-align:middle}
.itbl tr:hover td{background:#fafafa}
.itbl tr:last-child td{border-bottom:none}
.tbl-footer{padding:10px 14px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--bg)}
.ci{width:100%;background:transparent;border:none;outline:none;padding:8px 10px;font-weight:500;font-family:'Outfit',sans-serif;font-size:13px;transition:background .1s;min-height:38px;color:var(--ink)}
.ci:focus{background:var(--blue-lt);border-radius:var(--r4)}
.ci.mono{font-family:'JetBrains Mono',monospace}
.ci:disabled{color:var(--muted2);cursor:not-allowed;background:var(--bg2)}
.add-row-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--blue);background:var(--blue-lt);border:1.5px dashed var(--blue);border-radius:var(--r8);cursor:pointer;font-family:'Outfit',sans-serif;transition:all .15s;min-height:38px}
.add-row-btn:hover{background:var(--blue-mid)}
.spill{display:inline-flex;align-items:center;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.sp-g{background:var(--green-mid);color:var(--green-d)}
.sp-r{background:var(--red-mid);color:var(--red)}
.sp-y{background:var(--amber-mid);color:#78350f}

/* ── TIP BOXES ── */
.tip{border-radius:var(--r8);padding:13px 16px;font-size:14px;line-height:1.7;border:1px solid}
.tip-b{background:var(--blue-lt);border-color:var(--blue-mid);color:#1e3a6e}
.tip-g{background:var(--green-lt);border-color:var(--green-mid);color:#14532d}
.tip-y{background:var(--amber-lt);border-color:var(--amber-mid);color:#78350f}
.tip-r{background:var(--red-lt);border-color:var(--red-mid);color:#7f1d1d}
.tip strong{font-weight:700}
.tip+.tip{margin-top:10px}
.tip-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

/* ── STAT BOXES ── */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat-box{background:var(--bg);border:1px solid var(--border);border-radius:var(--r10);padding:12px 14px}
.stat-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px}
.stat-val{font-family:'JetBrains Mono',monospace;font-size:1.15rem;font-weight:700;color:var(--ink)}
.stat-box.good .stat-val{color:var(--green)}
.stat-box.bad .stat-val{color:var(--red)}

/* ── ACCORDION (FAQ) ── */
.faq-section{background:white;border-radius:var(--r16);border:1px solid var(--border);padding:6px 22px;margin-top:20px;box-shadow:var(--sh0)}
.faq-section>h2{font-size:1.1rem;font-weight:800;padding:18px 0 8px;letter-spacing:-.02em}
.acc-item{border-bottom:1px solid var(--border)}
.acc-item:last-child{border-bottom:none}
.acc-btn{width:100%;text-align:left;background:none;border:none;padding:14px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:'Outfit',sans-serif;font-size:14.5px;font-weight:600;color:var(--ink);min-height:52px;gap:12px}
.acc-ico{transition:transform .25s;font-size:20px;color:var(--muted2);flex-shrink:0;font-style:normal}
.acc-btn.open .acc-ico{transform:rotate(45deg)}
.acc-body{display:none;padding:0 0 14px;font-size:14px;color:var(--muted);line-height:1.8}
.acc-body.open{display:block}

/* ── SEO TEXT BLOCK ── */
.seo-block{background:white;border-radius:var(--r16);border:1px solid var(--border);padding:24px 26px;margin-top:24px;box-shadow:var(--sh0)}
.seo-block h2{font-size:1.15rem;font-weight:800;margin-bottom:10px;letter-spacing:-.02em}
.seo-block h3{font-size:1rem;font-weight:700;margin:16px 0 7px}
.seo-block p{color:var(--muted);font-size:14px;line-height:1.85;margin-bottom:8px}

/* ── ROI CHART ── */
.roi-chart{height:90px;display:flex;align-items:flex-end;gap:3px;padding-bottom:20px}

/* ── MODAL ── */
.moverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px)}
.moverlay.on{display:flex}
.mbox{background:white;border-radius:var(--r20);max-width:480px;width:100%;padding:26px;box-shadow:var(--sh3)}

/* ── KEYFRAMES ── */
@keyframes slideIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes resultPulse{0%{opacity:.45;transform:scale(.96)}100%{opacity:1;transform:scale(1)}}
/* ── LIVE RESULT UX ── */
.result-context{font-size:11px;color:var(--muted2);font-style:italic;margin-bottom:6px;min-height:14px}
.result-updated{animation:resultPulse .22s ease-out}

/* ══ RESPONSIVE ══ */
@media(max-width:768px){
  :root{--nav-h:54px}
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .two-col{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
  .tip-grid{grid-template-columns:1fr}
  .page,.page-md{padding:18px 12px 100px}
  .card{padding:16px}
  .dp-header{padding:16px 18px}
  .dp-value{font-size:2.4rem}
  .dp-body{padding:16px 18px}
  .steps-bar{font-size:12px;padding:10px 14px}
  .step-arrow{margin:0 6px}
  .sticky-calc{display:block}
  .seo-block,.faq-section{padding:16px}
}
@media(max-width:480px){
  .stat-grid{grid-template-columns:1fr}
  .itbl{min-width:480px}
  .opill{padding:8px 12px;font-size:13px}
}
@media print{
  .navbar,.nav-mobile,.ad-slot,.ad-wrap,.sticky-calc,.tab-bar{display:none!important}
  body{padding-top:0;background:white}
  .card{box-shadow:none;border:1px solid #ccc}
}