document.addEventListener('DOMContentLoaded', function () {
  var section = document.getElementById('s-hero');
  if (!section) return;
  var elAmount    = document.getElementById('s-hero-amount');
  var elAmountR   = document.getElementById('s-hero-amount-range');
  var elDown      = document.getElementById('s-hero-down');
  var elDownR     = document.getElementById('s-hero-down-range');
  var elDownVal   = document.getElementById('s-hero-down-val');
  var elTermVal   = document.getElementById('s-hero-term-val');
  var elTermPills = document.getElementById('s-hero-term-pills');
  var elRate      = document.getElementById('s-hero-rate');
  var elMonthly   = document.getElementById('s-hero-monthly');
  var elLoan      = document.getElementById('s-hero-loan');
  var elTotal     = document.getElementById('s-hero-total');
  if (![elAmount,elAmountR,elDown,elDownR,elDownVal,elTermVal,elTermPills,elRate,elMonthly,elLoan,elTotal].every(Boolean)) return;
  function annuity(p,ar,y){if(p<=0||y<=0)return 0;if(ar<=0)return p/(y*12);var r=ar/100/12,n=y*12,pw=Math.pow(1+r,n);return p*(r*pw)/(pw-1);}
  function fmt(n){return Math.round(n).toLocaleString('bg-BG')+' лв.';}
  function clamp(v,lo,hi){return Math.min(Math.max(v,lo),hi);}
  function paintTrack(r){var lo=parseFloat(r.min)||0,hi=parseFloat(r.max)||100,v=parseFloat(r.value)||lo,p=((v-lo)/(hi-lo))*100;r.style.background='linear-gradient(to right,hsl(136,72%,44%) 0%,hsl(136,72%,44%) '+p+'%,rgba(255,255,255,.1) '+p+'%,rgba(255,255,255,.1) 100%)';}
  function calculate(){
    var pv=parseFloat(elAmount.value)||200000;
    var dp=clamp(parseFloat(elDown.value)||20,10,90);
    var yr=parseFloat(elTermVal.value)||20;
    var rt=parseFloat(elRate.value)||4.5;
    var down=pv*(dp/100),loan=pv-down,mo=annuity(loan,rt,yr),tot=mo*yr*12;
    elDownVal.textContent=fmt(down);
    elMonthly.textContent=fmt(mo);
    elLoan.textContent=fmt(loan);
    elTotal.textContent=fmt(tot);
  }
  elAmount.addEventListener('input',function(){elAmountR.value=this.value;paintTrack(elAmountR);calculate();});
  elAmountR.addEventListener('input',function(){elAmount.value=this.value;paintTrack(this);calculate();});
  elDown.addEventListener('input',function(){var v=clamp(parseFloat(this.value)||20,10,90);elDownR.value=v;paintTrack(elDownR);calculate();});
  elDownR.addEventListener('input',function(){elDown.value=this.value;paintTrack(this);calculate();});
  elRate.addEventListener('input',calculate);
  var pills=elTermPills.querySelectorAll('.s-hero__pill');
  pills.forEach(function(pill){
    pill.addEventListener('click',function(){
      pills.forEach(function(p){p.classList.remove('s-hero__pill--on');p.setAttribute('aria-pressed','false');});
      this.classList.add('s-hero__pill--on');this.setAttribute('aria-pressed','true');
      elTermVal.value=this.getAttribute('data-years');calculate();
    });
    pill.addEventListener('keydown',function(e){if(e.key==='Enter'||e.key===' '){e.preventDefault();this.click();}});
  });
  [document.getElementById('s-hero-btn-primary'),document.getElementById('s-hero-btn-ghost'),document.getElementById('s-hero-card-cta')].forEach(function(el){
    if(!el)return;
    el.addEventListener('click',function(e){var h=el.getAttribute('href')||'';if(h.charAt(0)==='#'){var t=document.querySelector(h);if(t){e.preventDefault();t.scrollIntoView({behavior:'smooth',block:'start']);}}});
  });
  paintTrack(elAmountR);paintTrack(elDownR);calculate();
});

:root {
  --pg-inv: linear-gradient(135deg, hsl(128,78%,68%) 0%, hsl(132,82%,56%) 30%, hsl(136,78%,44%) 60%, hsl(143,72%,30%) 100%);
  --pg-btn-inv: linear-gradient(140deg, hsl(128,74%,72%) 0%, hsl(132,80%,58%) 25%, hsl(136,76%,46%) 55%, hsl(140,72%,34%) 80%, hsl(143,70%,26%) 100%);
  --section-bg-inv: linear-gradient(172deg, hsl(228,34%,15%) 0%, hsl(227,31%,11%) 30%, hsl(225,29%,8%) 60%, hsl(223,32%,5%) 100%);
  --card-inv: linear-gradient(165deg, hsl(226,32%,17%) 0%, hsl(225,29%,14%) 40%, hsl(224,27%,11%) 70%, hsl(222,25%,8%) 100%);
  --card-result-inv: linear-gradient(162deg, hsl(136,52%,26%) 0%, hsl(138,49%,20%) 35%, hsl(140,46%,16%) 65%, hsl(143,43%,11%) 100%);
}
@keyframes s-hero-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .55; transform: scale(.8); }
}
.s-hero__card::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, hsl(128,78%,70%) 0%, hsl(132,80%,55%) 30%, hsl(136,76%,44%) 60%, hsl(143,70%,30%) 100%);
  z-index: 1;
}
.s-hero__h1-em {
  display: block;
  font-style: normal;
  background: var(--pg-inv, linear-gradient(135deg, hsl(128,78%,68%) 0%, hsl(132,82%,56%) 30%, hsl(136,78%,44%) 60%, hsl(143,72%,30%) 100%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.s-hero__social-num {
  display: inline;
  font-weight: 800;
  color: var(--text, hsl(0,0%,95%));
}
.s-hero__label-muted {
  display: inline;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--textm, hsl(216,12%,50%));
}
.s-hero__input {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 0.65rem 0.875rem;
  font-family: var(--fh, 'Raleway', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text, hsl(0,0%,95%));
  -moz-appearance: textfield;
}
.s-hero__input::-webkit-inner-spin-button { -webkit-appearance: none; }
.s-hero__input::-webkit-outer-spin-button { -webkit-appearance: none; }
.s-hero__range {
  display: block;
  width: 100%;
  height: 0.2rem;
  border-radius: var(--r-full, 9999px);
  background: rgba(255,255,255,.1);
  border: none;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.s-hero__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.2rem; height: 1.2rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, hsl(128,80%,74%) 0%, hsl(132,78%,56%) 40%, hsl(140,70%,36%) 100%);
  border: 2px solid var(--n90, hsl(226,30%,9%));
  box-shadow: 0 0 10px rgba(80,220,100,.45);
  cursor: pointer;
  transition: transform var(--df,.16s) ease;
}
.s-hero__range::-webkit-slider-thumb:hover { transform: scale(1.2); }
.s-hero__range::-moz-range-thumb {
  width: 1.2rem; height: 1.2rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, hsl(128,80%,74%) 0%, hsl(132,78%,56%) 40%, hsl(140,70%,36%) 100%);
  border: 2px solid var(--n90, hsl(226,30%,9%));
  cursor: pointer;
}
.s-hero__btn--primary:hover { transform: translateY(-0.18rem); box-shadow: 0 0 36px rgba(80,220,100,.52), 0 8px 24px rgba(0,0,0,.4); }
.s-hero__btn--primary:hover .s-hero__btn-arrow { transform: translateX(0.25rem); }
.s-hero__btn--primary:focus-visible { outline: 2px solid var(--p3, hsl(136,78%,47%)); outline-offset: 3px; }
.s-hero__btn--ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.24); transform: translateY(-0.15rem); }
.s-hero__btn--ghost:focus-visible { outline: 2px solid rgba(255,255,255,.45); outline-offset: 3px; }
.s-hero__pill:hover { border-color: rgba(80,220,100,.38); color: var(--p2, hsl(132,82%,59%)); background: rgba(80,220,100,.07); }
.s-hero__pill:focus-visible { outline: 2px solid var(--p3, hsl(136,78%,47%)); outline-offset: 2px; }
.s-hero__card-cta:hover { transform: translateY(-0.12rem); box-shadow: 0 0 32px rgba(80,220,100,.42), 0 8px 28px rgba(0,0,0,.5); }
.s-hero__card-cta:focus-visible { outline: 2px solid var(--text, hsl(0,0%,95%)); outline-offset: 3px; }
.s-hero__input-group:focus-within { border-color: rgba(80,220,100,.42); box-shadow: 0 0 0 3px rgba(80,220,100,.1); }