/* bridges.css — We Build Bridges brand layer over Bootstrap 5.3
   Professional SaaS look: Inter, indigo accent, soft depth. */

:root {
  --bb-ink: #101828;
  --bb-muted: #5b6472;
  --bb-accent: #4f46e5;
  --bb-accent-dark: #4338ca;
  --bb-soft: #f8f9fc;
  --bb-line: #e7eaf0;
  --bs-body-font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bs-body-color: var(--bb-ink);
  --bs-link-color: var(--bb-accent);
  --bs-link-hover-color: var(--bb-accent-dark);
}

html { scroll-behavior: smooth; }
body { font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

h1, h2, h3, h4, .navbar-brand { letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.12; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.display-lead { font-size: 1.185rem; color: var(--bb-muted); font-weight: 400; }

/* Nav */
.bb-nav { background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bb-line); }
.bb-nav .nav-link { color: var(--bb-muted); font-size: .925rem; }
.bb-nav .nav-link:hover { color: var(--bb-ink); }

/* Hero */
.bb-hero { background: linear-gradient(180deg,#fbfcfe 0%,#ffffff 100%); padding: 5.5rem 0 4rem; }

/* Buttons */
.btn { border-radius: .6rem; font-weight: 600; padding: .68rem 1.35rem; }
.btn-primary { background: var(--bb-accent); border-color: var(--bb-accent); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.btn-primary:hover { background: var(--bb-accent-dark); border-color: var(--bb-accent-dark); transform: translateY(-1px); transition: all .15s ease; }
.btn-outline-secondary { color: var(--bb-ink); border-color: #d5d9e2; }
.btn-outline-secondary:hover { background: var(--bb-soft); color: var(--bb-ink); border-color: #c4c9d4; }

/* Cards */
.card { border: 1px solid var(--bb-line); border-radius: .85rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); transition: border-color .15s ease, box-shadow .15s ease; height: 100%; }
.card:hover { border-color: #d3d9e3; box-shadow: 0 6px 18px rgba(16,24,40,.07); }
.card-title { font-size: 1.04rem; font-weight: 700; margin-bottom: .3rem; }
.card-subtitle { font-size: .82rem; color: var(--bb-muted); font-weight: 500; margin-bottom: .65rem; }
.card p, .card-text { color: var(--bb-muted); font-size: .93rem; }
.card .price-tag { font-weight: 700; color: var(--bb-ink); font-size: 1.02rem; }
.card .price-tag small { display:block; font-weight:400; color:var(--bb-muted); font-size:.78rem; }
.link-buy { font-weight:600; font-size:.92rem; text-decoration:none; }

/* Sections */
.bb-section { padding: 4rem 0; border-top: 1px solid var(--bb-line); }
.bb-section.soft { background: var(--bb-soft); border-top: none; }
.bb-kicker { color: var(--bb-accent); font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: .5rem; }

/* Badges */
.badge-free { background:#ecfdf5; color:#067647; font-weight:600; font-size:.75rem; padding:.32em .8em; border-radius:99px; }
.badge-once { background:#eef2ff; color:#4338ca; font-weight:600; font-size:.75rem; padding:.32em .8em; border-radius:99px; }

/* Steps */
.bb-step-num { width:34px;height:34px;border-radius:50%;background:#eef2ff;color:var(--bb-accent);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.95rem;margin-bottom:.8rem; }

/* Pricing */
.bb-plan { border:1px solid var(--bb-line); border-radius:.9rem; padding:1.8rem 1.5rem; text-align:center; height:100%; }
.bb-plan.featured { border-color:var(--bb-accent); box-shadow:0 8px 26px rgba(79,70,229,.12); }
.bb-plan .amount { font-size:2.35rem; font-weight:800; letter-spacing:-.03em; }
.bb-plan .amount sup { font-size:1rem; font-weight:600; top:-.9em; }
.bb-plan-label { color:var(--bb-muted); font-weight:600; font-size:.88rem; margin-bottom:.4rem; }

/* Guarantee + trust */
.bb-guarantee { background:#fff; border:1px solid var(--bb-line); border-radius:.9rem; padding:1.3rem 1.5rem; }
.bb-trustline { color:var(--bb-muted); font-size:.86rem; }

/* Prompt quotes (product pages) */
.bb-quote { border-left:3px solid var(--bb-accent); background:var(--bb-soft); border-radius:0 .6rem .6rem 0; padding:.7rem 1rem; color:var(--bb-ink); font-size:.92rem; }

/* FAQ */
.accordion-button { font-weight:600; font-size:.98rem; }
.accordion-button:not(.collapsed) { background:#fff; color:var(--bb-accent-dark); box-shadow:none; }
.accordion-item { border-color:var(--bb-line); }

/* Footer */
footer { border-top:1px solid var(--bb-line); color:var(--bb-muted); font-size:.86rem; }
footer a { color:var(--bb-muted); text-decoration:none; }
footer a:hover { color:var(--bb-ink); }

[dir="rtl"] .bb-quote { border-left:none; border-right:3px solid var(--bb-accent); border-radius:.6rem 0 0 .6rem; }
