:root{
    --ink:#17150F; --bg:#F0E8D8; --panel:#FBFAF6; --panel2:#F5EFE3;
    --cream:#F0E8D8; --white:#FBFAF6; --wood:#392620; --tan:#C9A87E; --tan-d:#8a6a3e;
    --body:#3f3a32; --sec:#5A5348; --muted:#736A5C; --faint:#948A7B; --line:rgba(23,21,15,.12);
    --morelo:#8a6a3e; --concorde:#b0603a; --phoenix:#6f7a3e; --stx:#5c6a86; --dembell:#9a7838;
    --good:#5f7a3e; --warn:#9a7326; --bad:#a85a45;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);
       font-family:'IBM Plex Sans',sans-serif;font-weight:400;line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  a{color:var(--wood)}
  h1,h2,h3,h4{font-family:'Jost',sans-serif;font-weight:400;letter-spacing:.01em;color:var(--ink)}
  .mono{font-family:'IBM Plex Mono',monospace}
  .kick{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--tan-d);font-weight:500}

  header.hero{padding:56px 0 20px}
  .brandmark{font-family:'Jost';letter-spacing:.34em;font-size:14px;color:var(--ink);text-transform:uppercase;margin-bottom:24px}
  h1{font-size:clamp(34px,5vw,62px);line-height:1.06;margin:12px 0 16px;font-weight:400}
  .hero p{font-size:19px;color:var(--sec);max-width:720px;margin:0}
  .hero .brands{margin-top:26px;font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
  .meta{margin-top:30px;font-family:'IBM Plex Mono';font-size:11.5px;color:var(--faint);letter-spacing:.04em}

  section{padding:52px 0;border-bottom:1px solid var(--line)}
  section:last-of-type{border-bottom:none}
  h2{font-size:clamp(25px,3.4vw,38px);margin:0 0 10px;font-weight:400;line-height:1.12}
  h2 .n{font-family:'IBM Plex Mono';font-size:13px;color:var(--tan-d);letter-spacing:.1em;margin-right:14px;vertical-align:middle}
  .lead{color:var(--sec);max-width:820px;margin:0 0 28px;font-size:17.5px;line-height:1.7}
  h3{font-size:21px;margin:30px 0 10px;color:var(--ink);font-weight:500}
  p{margin:0 0 14px;color:var(--body)}
  strong,b{color:var(--ink);font-weight:600}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .card{background:var(--panel);border:1px solid var(--line);padding:24px 26px;box-shadow:0 18px 44px rgba(23,21,15,.06)}
  .card h4{margin:0 0 8px;font-size:18px;color:var(--ink);font-weight:500}
  .card p{font-size:14.5px;color:var(--sec);margin:0}
  .tagline{font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
    display:inline-block;padding:4px 10px;border:1px solid var(--line);margin-bottom:12px;color:var(--tan-d)}

  /* segmented control (kalkulačka) */
  .controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:6px 0 20px}
  .chip{font-family:'IBM Plex Mono';font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
    background:var(--panel);border:1px solid var(--line);color:var(--sec);padding:9px 15px;cursor:pointer;transition:.15s}
  .chip:hover{border-color:var(--wood);color:var(--ink)}
  .chip.active{background:var(--ink);color:var(--white);border-color:var(--ink);font-weight:500}

  table{width:100%;border-collapse:collapse;font-size:14px}
  tbody td{padding:12px 4px;border-bottom:1px solid var(--line);color:var(--sec);vertical-align:top}
  tbody tr:hover{background:rgba(23,21,15,.02)}
  tbody td b{color:var(--ink);font-weight:600}

  .verdict{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:var(--panel);border-left:3px solid var(--tan-d);margin-bottom:12px}
  .verdict p{margin:0;font-size:14.5px;color:var(--sec)} .verdict b{color:var(--ink)}

  .callout{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--tan-d);padding:16px 20px;margin:16px 0}
  .callout h4{margin:0 0 6px;font-size:16px;font-weight:500}
  .callout p{margin:0;font-size:14.5px;color:var(--sec)}

  footer{padding:36px 0 60px;color:var(--faint);font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.03em;border-top:1px solid var(--line)}
  .disclaim{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:10px}
  @media(max-width:820px){
    .grid3,.grid2{grid-template-columns:1fr}
    .hide-sm{display:none}
    section{padding:38px 0}
    header.hero{padding:36px 0 14px}
    .wrap{padding:0 18px}
  }