:root{
  --bg:#0f1720; --surface:#16212e; --surface2:#1d2b3a; --line:#2b3d50;
  --ink:#eaf1f8; --muted:#9fb2c4; --brand:#2f9e8f; --brand2:#38bda8;
  --accent:#f2b134; --danger:#ef6a60; --radius:14px; --max:1080px;
  --shadow:0 8px 30px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Heebo",system-ui,Arial,sans-serif; background:var(--bg);
  color:var(--ink); line-height:1.7; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{line-height:1.25; font-weight:700; margin:0 0 .4em}
a{color:var(--brand2)}
.skip-link{position:absolute; right:-999px; top:0; background:var(--accent); color:#111; padding:10px 16px; z-index:100; border-radius:0 0 10px 0}
.skip-link:focus{right:0}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}

.btn-primary{display:inline-block; background:#0f766e; color:#fff; border:0; font:inherit; font-weight:700;
  padding:13px 26px; border-radius:999px; cursor:pointer; text-decoration:none; transition:transform .1s, background .2s}
.btn-primary:hover{background:#12897e}
.btn-primary:active{transform:scale(.97)}
.btn-ghost{display:inline-block; color:var(--ink); border:1.5px solid var(--line); background:transparent;
  font:inherit; font-weight:500; padding:11px 22px; border-radius:999px; cursor:pointer; text-decoration:none}
.btn-ghost:hover{border-color:var(--brand2); color:var(--brand2)}

/* MODAL */
.modal{position:fixed; inset:0; background:rgba(6,11,17,.78); display:flex; align-items:flex-start; justify-content:center;
  z-index:60; padding:20px; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); overflow-y:auto}
.modal[hidden]{display:none}
.modal-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); max-width:520px;
  padding:32px; position:relative; box-shadow:var(--shadow); margin:auto}
.modal-close{position:absolute; left:16px; top:12px; background:0; border:0; color:var(--muted); font-size:30px; cursor:pointer; line-height:1}
.modal-kicker{color:var(--brand2); font-weight:700; margin:0 0 6px}
.modal-card h2{font-size:1.5rem}
.modal-card p{color:var(--ink); margin:0 0 14px}
.modal-fine{font-size:.86rem; color:var(--muted); background:var(--surface2); padding:12px 14px; border-radius:10px; border:1px solid var(--line)}

/* HERO */
.hero{background:radial-gradient(1200px 500px at 70% -10%, #1c3340 0%, var(--bg) 60%); padding:76px 20px 60px; text-align:center}
.hero-inner{max-width:var(--max); margin:0 auto}
.hero-kicker{color:var(--brand2); font-weight:700; letter-spacing:.5px; margin:0 0 10px}
.hero-figure{font-size:clamp(2.4rem,8vw,5rem); font-weight:900; letter-spacing:-1px; margin:0;
  background:linear-gradient(90deg,#fff,#bfe9e1); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}
.hero-sub{font-size:clamp(1.05rem,3vw,1.4rem); color:var(--ink); margin:12px 0 26px}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.hero-source{margin-top:22px; font-size:.85rem; color:var(--muted)}

/* SECTIONS */
.section{max-width:var(--max); margin:0 auto; padding:60px 20px}
.section-alt{background:var(--surface); max-width:none}
.section-alt>*{max-width:var(--max); margin-left:auto; margin-right:auto}
.section-head{margin-bottom:26px}
.section-head h2{font-size:clamp(1.6rem,4vw,2.3rem)}
.section-head p{color:var(--muted); max-width:640px; margin:0}

/* TOGGLE */
.toggle{display:inline-flex; background:var(--surface2); border:1px solid var(--line); border-radius:999px; padding:4px; gap:4px; margin-bottom:18px}
.toggle-btn{background:0; border:0; color:var(--muted); font:inherit; font-weight:600; padding:9px 18px; border-radius:999px; cursor:pointer}
.toggle-btn.active{background:#0f766e; color:#fff}

/* CHART */
.chart{width:100%; height:min(70vh,560px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)}
.chart-hint{color:var(--muted); font-size:.85rem; margin:12px 2px 0}
.a11y-table{margin-top:16px; overflow-x:auto}
.a11y-table summary{cursor:pointer; color:var(--brand2); font-weight:600}
.a11y-table table{width:100%; border-collapse:collapse; margin-top:12px; font-size:.9rem}
.a11y-table th,.a11y-table td{border:1px solid var(--line); padding:8px 10px; text-align:right}
.a11y-table th{background:var(--surface2)}

/* SEARCH */
.search-box input{width:100%; font:inherit; font-size:1.1rem; padding:15px 18px; border-radius:12px;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink)}
.search-box input:focus{border-color:var(--brand2)}
.search-results{margin-top:18px; display:grid; gap:8px}
.result-row{background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.result-row.income{border-right:4px solid var(--brand)}
.result-row.expense{border-right:4px solid var(--accent)}
.result-row summary{display:flex; align-items:center; gap:12px; padding:14px 15px; cursor:pointer; list-style:none}
.result-row summary::-webkit-details-marker{display:none}
.result-row summary:hover{background:var(--surface2)}
.result-row summary::after{content:'⌄'; color:var(--muted); font-size:1.2rem; line-height:1; transition:transform .2s}
.result-row[open] summary::after{transform:rotate(180deg)}
.result-desc{font-weight:600; flex:1}
.result-amount{font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--brand2)}
.result-detail{padding:2px 16px 14px; border-top:1px solid var(--line)}
.rd-row{display:flex; justify-content:space-between; gap:12px; padding:8px 0; font-size:.92rem; border-bottom:1px solid rgba(255,255,255,.05)}
.rd-row span{color:var(--muted)}
.rd-row b{font-weight:600; text-align:end}
.rd-note{margin-top:10px; background:var(--surface2); padding:11px 13px; border-radius:8px; font-size:.88rem; color:var(--ink); line-height:1.5}
.result-empty{color:var(--muted); padding:14px}

/* ARNONA */
.arnona-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:24px}
.arnona-form{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.arnona-form label{display:block; font-weight:600; margin-bottom:16px}
.arnona-form input,.arnona-form select{width:100%; font:inherit; font-size:1.05rem; margin-top:7px; padding:12px 14px;
  border-radius:10px; border:1.5px solid var(--line); background:var(--surface2); color:var(--ink)}
.arnona-result{margin-top:8px; text-align:center; background:var(--surface2); border-radius:12px; padding:18px}
.arnona-result-label{display:block; color:var(--muted); font-size:.85rem}
.arnona-result-figure{display:block; font-size:2.2rem; font-weight:900; color:var(--brand2); font-variant-numeric:tabular-nums}
.arnona-result-month{display:block; color:var(--muted); font-size:.9rem}
.arnona-breakdown{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.arnona-break-title{font-weight:700; margin:0 0 12px}
.arnona-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.arnona-list li{display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center}
.arnona-bar{grid-column:1/-1; height:8px; border-radius:6px; background:var(--surface2); overflow:hidden}
.arnona-bar>span{display:block; height:100%; background:var(--brand)}
.arnona-amt{font-weight:700; font-variant-numeric:tabular-nums}
.arnona-truth{margin-top:16px; font-size:.85rem; color:var(--muted); background:var(--surface2); padding:12px; border-radius:10px}
.arnona-disclaimer{color:var(--muted); font-size:.82rem; margin-top:16px}

/* ABOUT */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px}
.about-grid h3{color:var(--brand2); margin-top:20px}
.about-grid h3:first-child{margin-top:0}
.fine{color:var(--muted); font-size:.82rem}

.footer{border-top:1px solid var(--line); padding:26px 20px; text-align:center; color:var(--muted); font-size:.85rem}

@media (max-width:760px){
  .arnona-grid,.about-grid{grid-template-columns:1fr}
  .hero{padding:54px 18px 44px}
  .section{padding:46px 18px}
  .modal-card{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto; transition:none!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.arnona-zonehint{font-size:.8rem; color:var(--muted); margin:-8px 0 0}
.contact-lines a{display:inline-block; margin:2px 0; font-size:1.02rem}
.about-me-head{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.about-photo{width:84px; height:84px; border-radius:50%; object-fit:cover; border:2px solid var(--line); flex-shrink:0}
.about-name{color:var(--muted); font-size:.9rem}
.hero-who{margin:14px 0 0}
.linkbtn{background:none; border:0; color:var(--brand2); font:inherit; font-weight:600; cursor:pointer; padding:6px 4px; text-decoration:underline; text-underline-offset:3px}
.linkbtn:hover{color:#fff}
.modal-head{display:flex; align-items:center; gap:14px; margin-bottom:6px}
.modal-photo{width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--line); flex-shrink:0}
.modal-head .modal-kicker{margin:0 0 2px}
.modal-head h2{margin:0; font-size:1.35rem}
.modal-card .btn-primary{display:block; width:fit-content; margin-inline:auto}
.about-photo{width:112px; height:112px}
.appendix-note{margin-top:20px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:2px 4px}
.appendix-note summary{cursor:pointer; color:var(--brand2); font-weight:600; padding:12px 14px; list-style:none}
.appendix-note summary::-webkit-details-marker{display:none}
.appendix-note summary::before{content:'ℹ️ '}
.appendix-body{padding:0 16px 14px; color:var(--ink); font-size:.95rem}
.appendix-body ul{padding-inline-start:20px; line-height:1.9}
.appendix-body p{color:var(--muted)}
.appendix-body strong{color:var(--ink)}
.downloads{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px}