*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* Scoped variables */
.bp-page {
  --r: #DC2626; --r-dk: #B91C1C; --bl: #003DA5;
  --nv: #0A1628; --nv2: #111D32; --wh: #FFFFFF;
  --gd: #D4A843;
  --g50:#F9FAFB; --g100:#F3F4F6; --g200:#E5E7EB;
  --g300:#D1D5DB; --g400:#9CA3AF; --g500:#6B7280;
  --g600:#4B5563; --g700:#374151; --g800:#1F2937; --g900:#111827;
  --gr: #059669;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'DM Sans',-apple-system,sans-serif;
  --mw:1280px; --rsm:8px; --rmd:12px; --rlg:20px;
  font-family: var(--sans);
  color: var(--g800);
}
.bp-page *, .bp-page *::before, .bp-page *::after { box-sizing: border-box; margin:0; padding:0; }
.bp-page img { max-width:100%; display:block; }
.bp-page a   { text-decoration:none; color:inherit; }

@keyframes bpFadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes bpPulse  { 0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.35)} 50%{box-shadow:0 0 0 10px rgba(220,38,38,0)} }

/* Reveal — fully scoped, won't clash */
.bp-page .bpr       { opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease; }
.bp-page .bpr.bpvis { opacity:1; transform:translateY(0); }

.bp-w { max-width:var(--mw); margin:0 auto; padding:0 24px; }

/* ── HERO ─────────────────────────────────────────────────────── */
.bp-hero {
  background: var(--nv);
  padding: 80px 0 80px; /* Balanced padding */
  position: relative; 
  overflow: hidden;
  display: flex;       /* Added to center vertically if needed */
  align-items: center;
  justify-content: center;
}
.bp-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at 15% 80%,rgba(0,61,165,.2) 0%,transparent 55%),
              radial-gradient(ellipse at 85% 10%,rgba(220,38,38,.1) 0%,transparent 50%);
}
.bp-hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.013'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.bp-hero-in { 
  position: relative; 
  z-index: 2; 
  display: flex;
  flex-direction: column;
  align-items: center;    /* Centers children horizontally */
  text-align: center;      /* Centers text lines */
  width: 100%;
}

.bp-eye {
  display:inline-block;
  background:rgba(220,38,38,.12); border:1px solid rgba(220,38,38,.28);
  color:#FCA5A5; font-size:13px; font-weight:600;
  padding:6px 18px; border-radius:100px;
  margin-bottom:20px; letter-spacing:.04em;
  animation: bpFadeUp .7s ease both;
}
.bp-hero h1 {
  font-family:var(--serif);
  font-size:clamp(36px,5vw,58px);
  color:var(--wh); line-height:1.1; margin-bottom:16px;
  animation:bpFadeUp .7s ease .1s both;
}
.bp-hero h1 em { font-style:italic; color:var(--gd); }
.bp-hero-desc {
  font-size: 16px; 
  color: rgba(255, 255, 255, .52);
  max-width: 650px;       /* Slightly wider for centered look */
  line-height: 1.7; 
  margin: 0 auto 32px;    /* "0 auto" centers the block itself */
  animation: bpFadeUp .7s ease .2s both;
}

/* Search */
.bp-srch { 
  width: 100%; 
  max-width: 520px; 
  margin: 0 auto;         /* Centers the search bar */
  animation: bpFadeUp .7s ease .3s both; 
}
.bp-srch form {
  display:flex;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  border-radius:var(--rsm); overflow:hidden; transition:border-color .2s;
}
.bp-srch form:focus-within { border-color:rgba(255,255,255,.35); }
.bp-srch input {
  flex:1; padding:13px 18px;
  background:transparent; border:none; outline:none;
  color:var(--wh); font-family:var(--sans); font-size:14px;
}
.bp-srch input::placeholder { color:rgba(255,255,255,.3); }
.bp-srch button {
  padding:13px 22px; background:var(--r); border:none; cursor:pointer;
  color:var(--wh); font-weight:700; font-size:13px;
  letter-spacing:.04em; transition:background .2s; font-family:var(--sans);
}
.bp-srch button:hover { background:var(--r-dk); }

/* Stats row */
.bp-stats-row {
  display: flex; 
  gap: 48px;              /* Increased gap for better symmetry */
  margin: 40px auto 0;    /* Centers the row */
  justify-content: center; /* Centers items inside the row */
  animation: bpFadeUp .7s ease .4s both;
}
.bp-snum { font-family:var(--serif); font-size:28px; color:var(--gd); line-height:1; }
.bp-slbl { font-size:11px; color:rgba(255,255,255,.36); letter-spacing:.08em; text-transform:uppercase; margin-top:3px; }

/* ── TAG BAR ──────────────────────────────────────────────────── */
.bp-tagbar {
  background:var(--g50); border-bottom:1px solid var(--g200);
  padding:13px 0; position:sticky; top:72px; z-index:100;
}
.bp-tagbar-inner {
  display:flex; align-items:center; gap:8px;
  overflow-x:auto; padding-bottom:2px; scrollbar-width:none;
}
.bp-tagbar-inner::-webkit-scrollbar { display:none; }
.bp-tp {
  display:inline-flex; align-items:center;
  padding:7px 16px; border-radius:100px;
  font-size:13px; font-weight:500;
  border:1px solid var(--g200); background:var(--wh); color:var(--g600);
  white-space:nowrap; cursor:pointer; transition:all .2s; flex-shrink:0;
  text-decoration:none; font-family:var(--sans);
}
.bp-tp:hover       { border-color:var(--bl); color:var(--bl); background:rgba(0,61,165,.04); }
.bp-tp.on          { background:var(--nv); color:var(--wh); border-color:var(--nv); }
.bp-tp.all-on      { background:var(--r);  color:var(--wh); border-color:var(--r); }

/* ── FEATURED ─────────────────────────────────────────────────── */
.bp-feat { padding:60px 0 0; background:var(--wh); }
.bp-slabel {
  display:inline-block; font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--r); margin-bottom:10px;
}
.bp-feat h2 {
  font-family:var(--serif);
  font-size:clamp(24px,3vw,36px); color:var(--g900); margin-bottom:28px;
}
.bp-fgrid {
  display:grid; grid-template-columns:1.65fr 1fr; gap:18px;
}
.bp-fc {
  border-radius:var(--rlg); overflow:hidden;
  background:var(--nv); position:relative;
  cursor:pointer; display:block; transition:transform .3s; text-decoration:none;
}
.bp-fc:hover { transform:translateY(-4px); }
.bp-fc.lg  { grid-row:span 2; min-height:450px; }
.bp-fc.sm  { min-height:205px; }
.bp-fc img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bp-fph    {
  position:absolute; inset:0;
  background:linear-gradient(135deg,var(--nv2),var(--bl));
  display:flex; align-items:center; justify-content:center;
  font-size:42px; opacity:.45;
}
.bp-fov    { position:absolute; inset:0; background:linear-gradient(to top,rgba(10,22,40,.92) 0%,rgba(10,22,40,.2) 55%,transparent 100%); }
.bp-fbody  { position:absolute; bottom:0; left:0; right:0; padding:22px; }
.bp-ftag   {
  display:inline-block; background:var(--r); color:var(--wh);
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:4px;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px;
}
.bp-fbody h3 { font-family:var(--serif); color:var(--wh); line-height:1.25; margin-bottom:7px; }
.bp-fc.lg .bp-fbody h3 { font-size:clamp(18px,2vw,26px); }
.bp-fc.sm .bp-fbody h3 { font-size:16px; }
.bp-fmeta  { font-size:12px; color:rgba(255,255,255,.42); }

/* ── GRID ─────────────────────────────────────────────────────── */
.bp-grid-sec { padding:60px 0 72px; background:var(--g50); }
.bp-ghdr {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:28px; flex-wrap:wrap; gap:10px;
}
.bp-ghdr h2 { font-family:var(--serif); font-size:clamp(20px,2.5vw,30px); color:var(--g900); }
.bp-gcnt { font-size:14px; color:var(--g400); }

.bp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* Card */
.bp-card {
  background:var(--wh); border-radius:var(--rlg); overflow:hidden;
  border:1px solid var(--g200); display:flex; flex-direction:column;
  transition:transform .3s,box-shadow .3s,border-color .3s; cursor:pointer;
}
.bp-card:hover { transform:translateY(-5px); box-shadow:0 14px 44px rgba(0,0,0,.08); border-color:var(--g300); }

.bp-cthumb {
  width:100%; aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--nv2),var(--bl));
  overflow:hidden; position:relative; flex-shrink:0;
}
.bp-cthumb img {
  width:100%; height:100%; object-fit:cover; transition:transform .4s;
}
.bp-card:hover .bp-cthumb img { transform:scale(1.04); }
.bp-cthumb iframe { width:100%; height:100%; border:none; pointer-events:none; }
.bp-cicon {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:34px; opacity:.4;
}

.bp-cbody { padding:20px; display:flex; flex-direction:column; flex:1; }
.bp-ctags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.bp-ctag  {
  font-size:11px; font-weight:600; color:var(--bl);
  background:rgba(0,61,165,.07); padding:3px 10px; border-radius:4px;
  letter-spacing:.04em; text-transform:uppercase;
  transition:all .2s; text-decoration:none; font-family:var(--sans);
}
.bp-ctag:hover { background:var(--bl); color:var(--wh); }

.bp-card h3 {
  font-size:16px; font-weight:700; color:var(--g900); line-height:1.4;
  margin-bottom:8px; font-family:var(--sans);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.bp-card p {
  font-size:14px; color:var(--g500); line-height:1.65; margin-bottom:16px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.bp-cfoot {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:auto; padding-top:13px; border-top:1px solid var(--g100);
}
.bp-cdate { font-size:12px; color:var(--g400); }
.bp-crm   { font-size:13px; font-weight:700; color:var(--r); display:inline-flex; align-items:center; gap:4px; transition:gap .2s; }
.bp-card:hover .bp-crm { gap:8px; }

/* Empty */
.bp-empty { grid-column:1/-1; text-align:center; padding:56px 24px; }
.bp-empty h3 { font-size:20px; color:var(--g700); margin-bottom:10px; }
.bp-empty p  { color:var(--g400); margin-bottom:20px; }
.bp-empty a  {
  display:inline-block; background:var(--r); color:var(--wh);
  padding:11px 24px; border-radius:8px; font-weight:700; font-size:14px;
  transition:background .2s; text-decoration:none; font-family:var(--sans);
}
.bp-empty a:hover { background:var(--r-dk); }

/* ── PAGINATION ───────────────────────────────────────────────── */
.bp-pager { display:flex; justify-content:center; gap:7px; margin-top:48px; flex-wrap:wrap; }
.bp-pn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 12px;
  border-radius:var(--rsm); border:1px solid var(--g200);
  background:var(--wh); font-size:14px; color:var(--g700); font-weight:500;
  transition:all .2s; text-decoration:none; font-family:var(--sans);
}
.bp-pn:hover    { border-color:var(--bl); color:var(--bl); }
.bp-pn.cur      { background:var(--nv); color:var(--wh); border-color:var(--nv); }
.bp-pn.off      { opacity:.35; pointer-events:none; }

/* ── FLOAT ────────────────────────────────────────────────────── */
.bp-float {
  position:fixed; bottom:22px; right:22px; z-index:900;
  display:none; gap:10px; align-items:center;
}
.bp-fred {
  padding:12px 22px; border-radius:50px;
  background:var(--r); color:var(--wh); font-weight:700; font-size:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.18); transition:all .2s;
  animation:bpPulse 2.5s infinite; text-decoration:none; font-family:var(--sans);
}
.bp-fred:hover { background:var(--r-dk); transform:translateY(-2px); }
.bp-fwa {
  width:50px; height:50px; border-radius:50%; background:#25D366; color:var(--wh);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; box-shadow:0 6px 24px rgba(0,0,0,.18);
  transition:all .2s; text-decoration:none;
}
.bp-fwa:hover { transform:translateY(-2px); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width:1024px) {
  .bp-fgrid { grid-template-columns:1fr 1fr; }
  .bp-fc.lg { grid-row:span 1; min-height:270px; }
  .bp-grid  { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .bp-hero  { padding:50px 0 42px; }
  .bp-stats-row { gap:18px; flex-wrap:wrap; }
  .bp-fgrid { grid-template-columns:1fr; }
  .bp-fc.lg { min-height:250px; } .bp-fc.sm { min-height:165px; }
  .bp-grid  { grid-template-columns:1fr; }
  .bp-ghdr  { flex-direction:column; }
}