:root{--bg:#ffffff;--text:#0a0a0a;--muted:#6b7280;--card:#ffffff;--border:#e5e7eb}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.bp-root{min-height:100vh;display:flex;flex-direction:column}
.bp-header{padding:24px 40px}
.bp-logo img{height:36px}
.bp-viewport{display:grid;grid-template-columns:520px 1fr;gap:40px;align-items:center;padding:24px 40px;position:relative}
.bp-left{display:flex;flex-direction:column;gap:28px;align-items:flex-start;justify-content:center;min-height:420px}
.bp-title{font-size:56px;line-height:1.05;font-weight:800;letter-spacing:-0.02em;margin:0}
.bp-social{display:flex;gap:18px}
.bp-social .icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:999px;color:#111;text-decoration:none}
.bp-social .icon svg{width:16px;height:16px}
.bp-scroller{display:flex;gap:28px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:14px;-ms-overflow-style:none;scrollbar-width:none}
.bp-scroller::-webkit-scrollbar{display:none}

.bp-card{flex:0 0 280px;background:var(--card);scroll-snap-align:start}
.bp-img{width:100%;aspect-ratio:4/5;background:#ddd;background-size:cover;background-position:center;border-radius: 14px 14px 0 0;}
.bp-card-title{font-size:20px;line-height:1.35;margin:10px 0 8px;font-weight:700}
.bp-card-desc{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.6;max-width:92%}
.bp-link{display:inline-flex;gap:10px;align-items:center;font-family:'Poppins',sans-serif;font-weight:700;color:#111;text-decoration:none;margin-top:10px;}
.bp-card>*:not(.bp-img){padding-left:8px;padding-right:8px}
@media (max-width: 1024px){
  .bp-viewport{grid-template-columns:1fr;gap:18px;align-items:start}
  /* .bp-title{font-size:40px} */
  .bp-viewport{padding-top:10px}
  .bp-left{min-height:auto;gap:18px}
  .bp-title{font-size:34px;margin-top:2px}
  .bp-social{gap:14px}
  .bp-social .icon{width:34px;height:34px}
}
@media (max-width: 640px){
  .bp-header{padding:16px}
  .bp-viewport{padding:8px 14px}
  .bp-left{min-height:auto;gap:14px;}
  .bp-card-desc{display: none;}
  .bp-title{font-size:30px;margin-top:6px}
  .bp-card-title{font-size:16px;}
  .bp-card{flex-basis:240px}
  .bp-link{display: none;}
  html,body{overflow:hidden;overscroll-behavior:none}
  .bp-scroller{overflow:hidden}
}

/* Extra small devices: tighten vertical whitespace further */
@media (max-width: 430px) and (min-width: 415px){
  .bp-viewport{padding-top:6px;}
  .bp-card-desc{display: none;}
  .bp-title{font-size:26px;margin-top:4px}
  .bp-link{display: none;}
  .bp-card-title{font-size: 14px;}
  .bp-left{margin-top: 6rem; margin-bottom: 2rem;}
  .bp-social{gap:12px}
  .bp-social .icon{width:34px;height:34px}
}

@media (max-width: 414px) and (min-width: 385px){
  .bp-left{margin-top: 2rem; margin-bottom: 2rem;}
}

@media (max-width: 384px){
  .bp-left{margin-top: 5rem; margin-bottom: 2rem;}
}



/* Desktop and large screens: position heading and icons */
@media (min-width: 1024px){
  /* Move social icons above the title while keeping DOM order */
  .bp-social{order:-1}
  /* Position block vertically to match marked area */
  .bp-left{justify-content:flex-start;padding-top:280px}
}

@media (min-width: 1440px){
  .bp-left{padding-top:270px}
  /* Ensure the right column uses the full width on large screens */
  .bp-viewport{width:100%}
  .bp-scroller{width:100%;justify-content:space-between}
}

@media (min-width: 1536px){
  .bp-left{padding-top:300px}
}

/* Navigation buttons below scroller */
.bp-nav{display:flex;gap:10px;margin-top:12px}
.bp-nav-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border);border-radius:999px;background:#fff;color:#111;cursor:pointer}
.bp-nav-btn:disabled{opacity:.5;cursor:default}
.bp-nav-btn:hover{box-shadow:0 2px 8px rgba(0,0,0,.08)}

@media (max-width: 640px){
  .bp-nav{justify-content:flex-start}
}

@media (min-width: 1024px){
  /* Place nav directly under the scroller (right column) */
  .bp-nav{grid-column:2}
}