/* ====== BRAND COLORS - change these 4 to match your website ======
     --primary  : main dark color (buttons, popup background)
     --primary2 : second shade for the popup gradient (a little lighter than primary)
     --accent   : highlight color (tag bar, hover, call button)
     --soft     : very light tint (behind the logo on the cards)                      */
  .hb-wrap,.hb-overlay{
    --primary:#000000;
    --primary2:#2e2e2e;
    --accent:#6b7280;
    --soft:#f4f4f6;
    --line:#dfe0e4;      /* thin borders */
    --chip:#ececec;      /* background of the little round icons */
    --muted:#5f6672;
    --shape:44px 10px 44px 10px;   /* card corners: top-left, top-right, bottom-right, bottom-left */
    font-family:inherit;color:var(--primary)   /* uses your site's own font */
  }
  .hb-wrap{max-width:1200px;margin:0 auto}
  .hb-wrap *,.hb-overlay *{box-sizing:border-box}
  .hb-overlay a{text-decoration:none}
  .hb-overlay button{font-family:inherit}

  /* ---------- page title ---------- */
  .hb-title{margin:0 0 26px;text-align:center;font-family:inherit;font-size:clamp(26px,4.2vw,40px);line-height:1.2;font-weight:800;letter-spacing:0;text-transform:none;color:#2e2e2e}

  /* ---------- search + tabs ---------- */
  .hb-searchbox{position:relative;max-width:460px;margin:0 auto 18px}
  .hb-searchbox svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--primary);pointer-events:none}
  .hb-search{display:block;width:100%;padding:14px 18px 14px 46px;border:2px solid var(--primary);border-radius:999px;font-size:16px;background:#fff;font-family:inherit;color:var(--primary)}
  .hb-search:focus{outline:none;box-shadow:0 0 0 4px rgba(0,0,0,.08);border-color:var(--accent)}
  /* fully rounded (pill) search bar, same shape as the tag buttons - !important so the website theme can't square it off */
  .hb-wrap .hb-searchbox input.hb-search{-webkit-appearance:none;appearance:none;border-radius:999px!important;border:2px solid var(--primary)!important;background:#fff!important;box-shadow:none;height:auto;line-height:1.3;padding:12px 20px 12px 46px!important}
  .hb-wrap .hb-searchbox input.hb-search:focus{border-color:var(--accent)!important;box-shadow:0 0 0 4px rgba(0,0,0,.08)}
  .hb-wrap .hb-searchbox input.hb-search::-webkit-search-decoration,.hb-wrap .hb-searchbox input.hb-search::-webkit-search-cancel-button{-webkit-appearance:none}
  .hb-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:30px}
  .hb-tab{border:2px solid var(--primary);background:#fff;color:var(--primary);padding:7px 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}
  .hb-tab:hover{background:var(--soft)}
  .hb-tab.active{background:var(--primary);color:#fff}

  /* ---------- cards (portrait, leaf-shaped) ---------- */
  .hb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:28px}
  .hb-card,.hb-cardface{background:#fff;border:1px solid var(--line);border-radius:var(--shape);box-shadow:0 10px 26px rgba(0,0,0,.10);display:flex;flex-direction:column;overflow:hidden;text-align:center}
  .hb-card{transition:transform .2s,box-shadow .2s,border-color .2s}
  .hb-card:hover{transform:translateY(-6px);box-shadow:0 20px 36px rgba(0,0,0,.18);border-color:var(--accent)}
  .hb-cardface{pointer-events:none}
  .hb-tagbar{flex:0 0 auto;min-height:38px;background:var(--accent);display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:center;padding:10px 22px 9px}
  .hb-cardesc{margin:0;max-width:100%;color:#fff;font-size:12.5px;font-weight:600;line-height:1.35;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
  .hb-cardesc.none{font-style:italic;font-weight:500;opacity:.75}
  .hb-logo{width:100%;height:140px;background:var(--soft);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:14px 16px;cursor:pointer;flex:0 0 auto}
  .hb-logo img{max-width:100%;max-height:100%;object-fit:contain}
  .hb-initial{font-size:52px;font-weight:800;color:var(--primary)}
  .hb-cbody{flex:1;display:flex;flex-direction:column;align-items:center;gap:11px;padding:14px 16px 18px}
  .hb-card h4,.hb-cardface h4{margin:0;font-size:18px;line-height:1.25;font-weight:800;cursor:pointer;color:var(--primary)}
  .hb-quick{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
  .hb-qi{width:40px;height:40px;border-radius:50%;background:var(--chip);color:var(--primary);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background .15s,color .15s,transform .15s}
  .hb-qi svg{width:19px;height:19px}
  .hb-qi:hover{background:var(--accent);color:#fff;transform:scale(1.1)}
  .hb-qi.wa:hover{background:#25a244}
  .hb-view{margin-top:auto;width:100%;border:none;background:var(--primary);color:#fff;padding:12px 14px;border-radius:14px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s}
  .hb-view svg{width:17px;height:17px;transition:transform .2s}
  .hb-view:hover{background:var(--accent)}
  .hb-view:hover svg{transform:rotate(180deg)}
  .hb-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:30px}

  /* ---------- flip popup ---------- */
  .hb-overlay{position:fixed;inset:0;z-index:99999;display:none}
  .hb-backdrop{position:absolute;inset:0;background:rgba(10,15,30,.7);backdrop-filter:blur(4px);opacity:0;transition:opacity .45s}
  .hb-overlay.show .hb-backdrop{opacity:1}
  .hb-flip{position:fixed;z-index:100000;transform-style:preserve-3d;transition:left .8s cubic-bezier(.2,.85,.25,1),top .8s cubic-bezier(.2,.85,.25,1),width .8s cubic-bezier(.2,.85,.25,1),height .8s cubic-bezier(.2,.85,.25,1),transform .8s cubic-bezier(.2,.85,.25,1)}
  .hb-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .hb-backface{transform:rotateY(180deg);background:linear-gradient(160deg,var(--primary) 0%,var(--primary2) 100%);color:#fff;border-radius:var(--shape);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}
  .hb-probe{position:absolute!important;left:-9999px;top:0;visibility:hidden;height:auto!important;inset:auto;transform:none!important}

  .hb-btop{position:relative;width:100%;height:112px;background:#fff;display:flex;align-items:center;justify-content:center;padding:12px 60px}
  .hb-btop img{max-width:100%;max-height:100%;object-fit:contain}
  .hb-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:none;background:var(--primary);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:2}
  .hb-close:hover{background:var(--accent)}
  .hb-back-inner{padding:14px 22px 20px;text-align:center}
  .hb-back-inner h3{margin:0 0 8px;font-family:inherit;font-size:24px;line-height:1.2;font-weight:800;color:#fff;text-transform:none;letter-spacing:0}
  .hb-btags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
  .hb-btag{display:inline-block;background:var(--accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 12px;border-radius:999px}
  .hb-desc{margin:8px 0 0;font-size:14px;line-height:1.45;color:#e6e9f5}
  .hb-desc.none{font-style:italic;opacity:.6}

  .hb-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px;margin:14px 0 14px}
  .hb-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:11px 6px;border-radius:14px;color:#fff;text-decoration:none;font-size:13px;font-weight:700;background:rgba(255,255,255,.14)}
  .hb-act:hover{filter:brightness(1.12)}
  .hb-act svg{width:22px;height:22px}
  .hb-act.call{background:var(--accent)}
  .hb-act.wa{background:#25a244}
  .hb-act.mail{background:#2f6db5}
  .hb-act.web{background:#fff;color:var(--primary)}

  .hb-copytitle{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.65);margin:0 0 8px}
  .hb-taps{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
  .hb-tap{display:inline-flex;align-items:center;gap:7px;max-width:100%;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.22);color:#fff;border-radius:12px;padding:7px 11px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;text-align:left;transition:background .15s}
  .hb-tap:hover{background:rgba(255,255,255,.2)}
  .hb-tap .ci,.hb-tap .cc{display:flex;flex:0 0 auto}
  .hb-tap .ci svg{width:16px;height:16px;color:#fff}
  .hb-tap .cc svg{width:15px;height:15px;color:rgba(255,255,255,.6)}
  .hb-tap .ct{word-break:break-all}
  .hb-tap.ok{background:#25a244;border-color:#25a244}
  .hb-tap.ok .cc svg{color:#fff}

  @media(max-width:480px){
    .hb-wrap,.hb-overlay{--shape:32px 8px 32px 8px}
    .hb-grid{grid-template-columns:repeat(2,1fr);gap:14px}
    .hb-logo{height:100px;padding:10px}
    .hb-tagbar{padding:8px 12px 7px;min-height:32px}.hb-cardesc{font-size:11.5px}
    .hb-cbody{padding:10px 10px 12px;gap:9px}
    .hb-card h4{font-size:15px}
    .hb-qi{width:34px;height:34px}.hb-qi svg{width:16px;height:16px}
    .hb-view{padding:10px;font-size:14px}
    .hb-btop{height:92px}
    .hb-back-inner{padding:12px 14px 16px}.hb-back-inner h3{font-size:21px}
  }
  @media(prefers-reduced-motion:reduce){.hb-flip{transition-duration:.01s!important}.hb-backdrop{transition-duration:.01s}}