/* ============================================================
   Brand Directory  (brands.html)
   Prefix: bd-   — reuses brnd-* tile styles from brands.css
   ============================================================ */

.bd-wrap{overflow:hidden}
.bd-wrap .container{max-width:1180px}

/* ============================================================
   HERO
   ============================================================ */
.bd-hero{position:relative;color:#fff;isolation:isolate;
  background:linear-gradient(158deg,#0d1420 0%,#2a0d18 52%,#0b1017 100%)}
.bd-hero::before{content:"";position:absolute;inset:-20% -10% 0;z-index:-2;
  background:radial-gradient(560px 380px at 84% 4%,rgba(185,31,66,.5),transparent 60%),
             radial-gradient(520px 360px at 6% 98%,rgba(46,108,246,.36),transparent 62%);
  filter:blur(6px);animation:bdAur 15s ease-in-out infinite alternate}
@keyframes bdAur{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(3%,-2%,0) scale(1.05)}}
.bd-hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.15) 1px,transparent 0);
  background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 86%);
          mask-image:linear-gradient(180deg,#000,transparent 86%)}
.bd-hero-inner{position:relative;padding:56px 0 64px;text-align:center;max-width:720px;margin:0 auto}
.bd-hero .da-eyebrow{color:#ffd7e2;background:rgba(255,255,255,.1)}
.bd-hero h1{font-size:clamp(2rem,4.2vw,3rem);font-weight:800;letter-spacing:-.02em;margin:18px 0 12px}
.bd-hero p{font-size:1.06rem;color:rgba(255,255,255,.8);margin:0 0 26px}
.bd-hsearch{position:relative;max-width:460px;margin:0 auto}
.bd-hsearch i{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:1.1rem}
.bd-hsearch input{width:100%;border:0;border-radius:999px;padding:15px 20px 15px 48px;font-size:1rem;
  font-family:inherit;color:var(--ink);background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.bd-hsearch input:focus{outline:none;box-shadow:0 0 0 4px rgba(255,255,255,.25),0 20px 50px rgba(0,0,0,.35)}

/* ============================================================
   A–Z STICKY INDEX
   ============================================================ */
.bd-az-wrap{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.bd-az{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:14px 0}
.bd-az button{min-width:36px;height:36px;border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:10px;font-weight:700;font-size:.86rem;cursor:pointer;padding:0 6px;
  transition:transform .14s ease,background .14s ease,color .14s ease,border-color .14s ease}
.bd-az button:hover:not(:disabled){transform:translateY(-2px);border-color:var(--brand);color:var(--brand)}
.bd-az button.on{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border-color:transparent;
  box-shadow:0 8px 18px rgba(185,31,66,.28)}
.bd-az button:disabled{opacity:.32;cursor:not-allowed}
.bd-az .all{min-width:auto;padding:0 14px}

/* ============================================================
   GROUPS
   ============================================================ */
.bd-body{padding:40px 0 30px;min-height:46vh}
.bd-group{scroll-margin-top:80px;margin-bottom:34px;display:none}
.bd-group.show{display:block;animation:bdFade .35s ease}
@keyframes bdFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bd-gh{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.bd-gh .ltr{width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),#e0578a);color:#fff;display:grid;place-items:center;
  font-size:1.3rem;font-weight:800;box-shadow:0 10px 22px rgba(185,31,66,.24)}
.bd-gh h2{font-size:1.3rem;font-weight:800;color:var(--ink);margin:0;letter-spacing:-.01em}
.bd-gh .line{flex:1;height:1px;background:var(--line)}
.bd-gh .cnt{font-size:.82rem;color:var(--muted);font-weight:600}
.bd-group .brnd-grid{grid-template-columns:repeat(6,1fr)}
@media(max-width:991px){.bd-group .brnd-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:575px){.bd-group .brnd-grid{grid-template-columns:repeat(2,1fr)}}

/* tile hidden by search */
.brnd-tile.hide{display:none}

/* empty state */
.bd-empty{display:none;text-align:center;padding:60px 10px;color:var(--muted)}
.bd-empty.show{display:block}
.bd-empty i{font-size:2.4rem;color:var(--brand);display:block;margin-bottom:10px}
.bd-empty h3{font-size:1.2rem;color:var(--ink);font-weight:700;margin:0 0 6px}

@media(max-width:575px){
  .bd-az button{min-width:32px;height:32px;font-size:.8rem}
}