@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');

/* ================= SECTION / FULL BLEED ================= */
.ibnt-section{
  font-family: 'Quicksand', sans-serif;
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  width: 100vw; max-width: 100vw;
  overflow: hidden;
  box-sizing: border-box;
  background: linear-gradient(150deg, #fbf7ee 0%, #f6efdd 50%, #fbf7ee 100%);
  background-size: 220% 220%;
  animation: ibntGradientDrift 20s ease-in-out infinite;
  padding: 54px 0 60px;
}
.ibnt-section *{ box-sizing: border-box; font-family: 'Quicksand', sans-serif; }

@keyframes ibntGradientDrift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* ================= TEXTURE + WATERMARKS ================= */
.ibnt-dots{
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(rgba(18,35,79,0.07) 1.2px, transparent 1.6px);
  background-size: 26px 26px;
}
.ibnt-lines{
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.35;
  background-image: repeating-linear-gradient(0deg, rgba(184,147,94,0.06) 0px, rgba(184,147,94,0.06) 1px, transparent 1px, transparent 34px);
}
.ibnt-watermark{ position: absolute; z-index: 0; pointer-events: none; color: #12234f; opacity: 0.13; }
.ibnt-wm-bell{ top: 6%; right: 5%; width: 130px; height: 130px; transform: rotate(10deg); animation: ibntDriftA 22s ease-in-out infinite; }
.ibnt-wm-section{ bottom: 4%; left: 4%; width: 90px; font-size: 110px; line-height: 1; font-weight: 700; font-family: Georgia, serif; animation: ibntDriftB 24s ease-in-out infinite; }
.ibnt-wm-doc{ top: 10%; left: 8%; width: 84px; height: 84px; transform: rotate(-12deg); animation: ibntDriftA 26s ease-in-out infinite; }

/* Slim gold accent rules top and bottom, to visually anchor the
   full-bleed section against the surrounding page. */
.ibnt-section::before,
.ibnt-section::after{
  content: ""; position: absolute; left: 0; right: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, #c79f5f 20%, #c79f5f 80%, transparent);
  opacity: 0.55;
}
.ibnt-section::before{ top: 0; }
.ibnt-section::after{ bottom: 0; }
@keyframes ibntDriftA{ 0%,100%{ transform: translateY(0) rotate(10deg); } 50%{ transform: translateY(-14px) rotate(6deg); } }
@keyframes ibntDriftB{ 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(12px) rotate(3deg); } }

/* ================= HEADER ================= */
.ibnt-header{
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  width: 100%; margin: 0 0 34px; padding: 0 3vw;
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.ibnt-header.ibnt-in-view{ opacity: 1; transform: translateY(0); }

.ibnt-header-left{ display: flex; align-items: center; gap: 14px; }
.ibnt-diamond{
  width: 10px; height: 10px; background: #c79f5f; transform: rotate(45deg); flex: 0 0 auto;
  animation: ibntPulse 2.6s ease-in-out infinite;
}
@keyframes ibntPulse{ 0%,100%{ transform: rotate(45deg) scale(1); opacity: 1; } 50%{ transform: rotate(45deg) scale(1.3); opacity: 0.7; } }

.ibnt-title{
  margin: 0; color: #10142b; font-weight: 700; font-size: 19px;
  letter-spacing: 1.6px; text-transform: uppercase; line-height: 1.4;
}

.ibnt-viewall{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 26px;
  border: 1.5px solid #12234f; border-radius: 30px;
  color: #12234f; font-weight: 700; font-size: 13px; letter-spacing: 0.5px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.ibnt-viewall:hover{
  background: #12234f; color: #fbf7ee;
  box-shadow: 0 10px 20px rgba(18,35,79,0.2);
}

/* ================= CAROUSEL ================= */
.ibnt-carousel{
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  width: 100%; margin: 0; padding: 0 3vw;
}

.ibnt-arrow{
  flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(18,35,79,0.25);
  background: #ffffff;
  color: #12234f;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 16px rgba(18,35,79,0.1);
}
.ibnt-arrow:hover{ background: #12234f; color: #fbf7ee; transform: scale(1.08); box-shadow: 0 10px 22px rgba(18,35,79,0.22); }
.ibnt-arrow:active{ transform: scale(0.96); }

.ibnt-viewport{
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}

.ibnt-track{
  display: flex;
  gap: 22px;
  width: max-content;
  will-change: transform;
}

/* ================= CARD ================= */
.ibnt-card{
  flex: 0 0 auto;
  width: 270px;
  background: #ffffff;
  border-radius: 16px;
  padding: 22px 20px 20px;
  box-shadow: 0 10px 26px rgba(18,35,79,0.08);
  border: 1px solid rgba(199,159,95,0.18);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s ease;
}
.ibnt-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(18,35,79,0.16);
}

.ibnt-card-top{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.ibnt-badge{
  --ibnt-accent: #12234f;
  display: inline-flex; align-items: center;
  font-weight: 700; font-size: 12px; letter-spacing: 0.4px;
  color: var(--ibnt-accent);
  padding: 3px 0;
  border-bottom: 2px solid var(--ibnt-accent);
}

.ibnt-card-date{ font-size: 11px; color: #8a8f9e; white-space: nowrap; }

.ibnt-card-title{
  margin: 0; font-size: 15px; font-weight: 700; color: #12142b; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.ibnt-card-excerpt{
  margin: 0; font-size: 12.5px; color: #5a5f72; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  flex: 1 1 auto;
}

.ibnt-card-download{
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: #1a5fb4;
  text-decoration: none;
  width: fit-content;
}
.ibnt-card-download svg{ transition: transform 0.25s ease; }
.ibnt-card-download:hover{ color: #123a73; }
.ibnt-card-download:hover svg{ transform: translateY(2px); }

/* ================= RESPONSIVE ================= */
@media (max-width: 900px){
  .ibnt-title{ font-size: 16px; }
  .ibnt-card{ width: 230px; }
  .ibnt-arrow{ width: 36px; height: 36px; }
}
@media (max-width: 560px){
  .ibnt-header{ flex-direction: column; align-items: flex-start; }
  .ibnt-title{ font-size: 14px; letter-spacing: 1px; }
  .ibnt-card{ width: 208px; padding: 18px 16px 16px; }
  .ibnt-arrow{ width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce){
  .ibnt-header, .ibnt-card{ transition: none !important; opacity: 1 !important; transform: none !important; }
  .ibnt-section, .ibnt-wm-bell, .ibnt-wm-section, .ibnt-wm-doc{ animation: none !important; }
  .ibnt-track{ animation: none !important; }
}
