/* ==========================================================================
   INTRODUCING BROKER PAGE
   Depends on: base.css, backgrounds.css
   ========================================================================== */

/* ------------------------------------------------------------------
   EYEBROW LABEL
   ------------------------------------------------------------------ */
.ib-eyebrow { display:inline-block; font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:#94a3b8; margin-bottom:12px; }

/* ------------------------------------------------------------------
   HERO CHIPS
   ------------------------------------------------------------------ */
.ib-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:4px; }
.ib-chip { font-size:12px; font-weight:600; color:#334155; background:#fff; border:1px solid rgba(37,99,235,0.15); border-radius:100px; padding:6px 16px; white-space:nowrap; }
@media (max-width: 767px) {
  .ib-chips { gap: 6px; }
  .ib-chip { font-size: 11px; padding: 5px 12px; width: calc(50% - 3px); text-align: center; }
}

/* ------------------------------------------------------------------
   WHAT IS AN IB — S2
   ------------------------------------------------------------------ */
.ib-intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.ib-intro-left { display:flex; flex-direction:column; }
.ib-intro-left .btn-primary { margin-top:24px; width:fit-content; }
.ib-intro-right { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.ib-intro-card { background:#fff; border:1.5px solid rgba(37,99,235,0.08); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:12px; box-shadow:0 2px 16px rgba(37,99,235,0.05); transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.ib-intro-card:hover { transform:translateY(-4px); box-shadow:0 10px 36px rgba(37,99,235,0.1); border-color:rgba(37,99,235,0.2); }
.ib-intro-card-icon { width:44px; height:44px; border-radius:12px; background:rgba(37,99,235,0.07); border:1px solid rgba(37,99,235,0.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ib-intro-card-title { font-size:14px; font-weight:700; color:#0d1321; margin:0 0 4px; }
.ib-intro-card-desc { font-size:12.5px; color:rgba(15,23,42,0.5); line-height:1.65; margin:0; }
@media (max-width: 767px) {
  .ib-intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .ib-intro-left { align-items: center; text-align: center; }
  .ib-intro-left .btn-primary { width: 100%; max-width: 320px; }
}
/* ------------------------------------------------------------------
   HOW IT WORKS — S3
   ------------------------------------------------------------------ */
.ib-how-row { display:flex; align-items:center; justify-content:center; max-width:900px; margin:0 auto; }

.ib-how-card { flex:1; background:rgba(255,255,255,0.03); border:1px solid rgba(96,165,250,0.1); border-radius:20px; padding:32px 28px; display:flex; flex-direction:column; gap:14px; transition:border-color 0.25s, transform 0.25s; }
.ib-how-card:hover { border-color:rgba(96,165,250,0.3); transform:translateY(-4px); }
.ib-how-card-num { font-size:10px; font-weight:800; letter-spacing:2px; color:rgba(96,165,250,0.3); }
.ib-how-card-icon { width:56px; height:56px; border-radius:16px; background:rgba(37,99,235,0.1); border:1px solid rgba(96,165,250,0.2); display:flex; align-items:center; justify-content:center; }
.ib-how-card-title { font-size:18px; font-weight:700; color:#f0f6ff; margin:0; }
.ib-how-card-desc { font-size:13px; color:rgba(240,246,255,0.4); line-height:1.7; margin:0; }

.ib-how-connector { display:flex; align-items:center; flex-shrink:0; padding:0 12px; }
.ib-how-connector-line { width:32px; height:2px; background:rgba(96,165,250,0.2); border-radius:2px; }

/* ------------------------------------------------------------------
   WHY PARTNER — S4
   ------------------------------------------------------------------ */
.ib-why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

.ib-why-card { background:#fff; border:1.5px solid rgba(37,99,235,0.08); border-radius:20px; padding:28px 24px; display:flex; flex-direction:column; gap:14px; box-shadow:0 2px 16px rgba(37,99,235,0.05); transition:transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.ib-why-card:hover { transform:translateY(-5px); box-shadow:0 12px 40px rgba(37,99,235,0.1); border-color:rgba(37,99,235,0.2); }
.ib-why-card-icon { width:48px; height:48px; border-radius:14px; background:rgba(37,99,235,0.07); border:1px solid rgba(37,99,235,0.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ib-why-card-title { font-size:15px; font-weight:700; color:#0d1321; margin:0; }
.ib-why-card-desc { font-size:13px; color:rgba(15,23,42,0.5); line-height:1.7; margin:0; }

/* ------------------------------------------------------------------
   MULTI-TIER — S5
   ------------------------------------------------------------------ */
.ib-tier-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.ib-tier-left { display:flex; flex-direction:column; }
.ib-tier-left .btn-primary { margin-top:28px; width:fit-content; }
.ib-tier-right { display:flex; align-items:center; justify-content:center; }

.ib-tier-diagram { background:rgba(255,255,255,0.03); border:1px solid rgba(96,165,250,0.1); border-radius:24px; padding:36px 32px; display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; max-width:400px; }

.ib-tier-node { border-radius:12px; padding:12px 20px; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:110px; text-align:center; }
.ib-tier-node-label { font-size:12px; font-weight:700; }
.ib-tier-node-tier { font-size:9px; font-weight:600; letter-spacing:1px; text-transform:uppercase; }

.ib-tier-node--root { background:rgba(37,99,235,0.2); border:1.5px solid rgba(96,165,250,0.35); }
.ib-tier-node--root .ib-tier-node-label { color:#60a5fa; }
.ib-tier-node--root .ib-tier-node-tier { color:rgba(96,165,250,0.5); }

.ib-tier-node--sub { background:rgba(255,255,255,0.04); border:1px solid rgba(96,165,250,0.15); }
.ib-tier-node--sub .ib-tier-node-label { color:#f0f6ff; }
.ib-tier-node--sub .ib-tier-node-tier { color:rgba(240,246,255,0.3); }

.ib-tier-node--direct { background:rgba(34,197,94,0.07); border:1px solid rgba(34,197,94,0.2); }
.ib-tier-node--direct .ib-tier-node-label { color:#4ade80; }
.ib-tier-node--direct .ib-tier-node-tier { color:rgba(74,222,128,0.5); }

.ib-tier-branches { display:flex; align-items:flex-start; gap:16px; width:100%; justify-content:center; }
.ib-tier-branch { display:flex; flex-direction:column; align-items:center; gap:8px; }
.ib-tier-branch-line { width:2px; height:24px; background:rgba(96,165,250,0.2); border-radius:2px; }
.ib-tier-clients { display:flex; flex-direction:column; gap:6px; align-items:center; }
.ib-tier-client { font-size:10px; font-weight:600; color:rgba(240,246,255,0.3); background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:6px; padding:4px 12px; }

.ib-tier-note { display:flex; align-items:center; gap:7px; font-size:11px; color:rgba(240,246,255,0.3); padding:10px 16px; background:rgba(37,99,235,0.06); border:1px solid rgba(96,165,250,0.1); border-radius:8px; }

/* ------------------------------------------------------------------
   HOW TO JOIN — S6
   ------------------------------------------------------------------ */
.ib-join-grid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:start; max-width:1000px; margin:0 auto; }

.ib-join-card { background:#fff; border:1.5px solid rgba(37,99,235,0.08); border-radius:20px; padding:28px 22px; display:flex; flex-direction:column; gap:12px; box-shadow:0 2px 16px rgba(37,99,235,0.05); transition:transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.ib-join-card:hover { transform:translateY(-4px); box-shadow:0 10px 36px rgba(37,99,235,0.1); border-color:rgba(37,99,235,0.2); }
.ib-join-card-top { display:flex; align-items:center; justify-content:space-between; }
.ib-join-card-icon { width:44px; height:44px; border-radius:12px; background:rgba(37,99,235,0.07); border:1px solid rgba(37,99,235,0.12); display:flex; align-items:center; justify-content:center; }
.ib-join-card-num { font-size:28px; font-weight:900; color:rgba(37,99,235,0.1); letter-spacing:-1px; }
.ib-join-card-title { font-size:15px; font-weight:700; color:#0d1321; margin:0; }
.ib-join-card-desc { font-size:12.5px; color:rgba(15,23,42,0.5); line-height:1.65; margin:0; }

.ib-join-connector { width:40px; margin-top:44px; height:2px; background:linear-gradient(90deg,rgba(37,99,235,0.2),rgba(96,165,250,0.35),rgba(37,99,235,0.2)); position:relative; }
.ib-join-connector::after { content:''; position:absolute; right:-4px; top:50%; transform:translateY(-50%); width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid rgba(96,165,250,0.35); }

/* ------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------ */
@media(max-width:1024px) {
  .ib-why-grid { grid-template-columns:repeat(2,1fr); }
  .ib-join-grid { grid-template-columns:1fr 1fr; gap:16px; }
  .ib-join-connector { display:none; }
}

@media(max-width:991px) {
  .ib-intro-grid,
  .ib-tier-grid { grid-template-columns:1fr; gap:40px; }
  .ib-tier-left { align-items:center; text-align:center; }
  .ib-tier-left .btn-primary { align-self:center; }
  .ib-how-row { flex-direction:column; gap:12px; }
  .ib-how-connector { transform:rotate(90deg); padding:4px 0; }
}

@media(max-width:767px) {
  .ib-intro-right,
  .ib-why-grid,
  .ib-join-grid { grid-template-columns:1fr; }
  .ib-tier-diagram { padding:20px 14px; max-width:100%; box-sizing:border-box; }
  .ib-tier-branches { flex-direction:column; align-items:center; gap:12px; width:100%; }
  .ib-tier-branch { width:100%; align-items:center; }
  .ib-tier-node { min-width:0; width:85%; padding:10px 14px; box-sizing:border-box; }
  .ib-tier-clients { flex-direction:row; gap:6px; justify-content:center; }
  .ib-tier-note { font-size:10px; padding:8px 12px; text-align:center; width:100%; box-sizing:border-box; justify-content:center; }
}