/* ═══════════════════════════════════════════════════════════════
   B2B Landing Page – Black & Gold + Sketch Aesthetic (b2b.css)
   ═══════════════════════════════════════════════════════════════ */

/* ── Color overrides: black & gold palette ──────────────────── */
:root {
  --b2b-black:    #0d0d0d;
  --b2b-black-2:  #1a1a1a;
  --b2b-black-3:  #2a2a2a;
  --b2b-gold:     #C9971C;
  --b2b-gold-lt:  #f5e7b2;
  --b2b-gold-dk:  #a67a0e;
  --b2b-paper:    #fdfcf8;
  --b2b-paper-2:  #f5f3ee;
}

/* ── Page background ────────────────────────────────────────── */
body {
  background: #fff;
}

/* ── Light section background ───────────────────────────────── */
.section--bg {
  background: var(--b2b-paper-2);
}

/* ── Hero — black with gold accents ─────────────────────────── */
.hero {
  background: linear-gradient(150deg, #0d0d0d 0%, #1c1c1c 60%, #111 100%) !important;
}
.hero::before {
  background: none !important;
}

/* ── Site header — black bg on b2b page ─────────────────────── */
.site-header {
  background: var(--b2b-black) !important;
  border-bottom-color: rgba(201,151,28,.2) !important;
}
.site-header .logo span {
  color: #fff !important;
}
.site-header .btn-primary {
  background: var(--b2b-gold) !important;
  border-color: var(--b2b-gold) !important;
  color: var(--b2b-black) !important;
  font-weight: 700;
}
.site-header .btn-primary:hover {
  background: var(--b2b-gold-dk) !important;
  border-color: var(--b2b-gold-dk) !important;
}

/* ── Stats bar — black ──────────────────────────────────────── */
.stats-bar {
  background: var(--b2b-black-2) !important;
  border-top: 1px solid rgba(201,151,28,.15) !important;
  border-bottom: 1px solid rgba(201,151,28,.15) !important;
}
.stat-val {
  color: var(--b2b-gold) !important;
}
.stat-lbl {
  color: rgba(255,255,255,.6) !important;
}

/* ── Overline labels — gold ─────────────────────────────────── */
.overline {
  color: var(--b2b-gold) !important;
  border-color: rgba(201,151,28,.25) !important;
  background: rgba(201,151,28,.08) !important;
}

/* ── Section header sketch underline — gold ─────────────────── */
.section-header h2 {
  position: relative;
  display: inline-block;
}
.section-header h2::after {
  content: '';
  display: block;
  height: 4px;
  width: 56px;
  margin: 10px auto 0;
  background: var(--b2b-gold);
  border-radius: 2px 6px 2px 6px;
  transform: rotate(-1deg);
}

/* ── Image Placeholders — wireframe sketch style ────────────── */
.img-placeholder {
  background: var(--b2b-paper);
  border: 2px dashed #aaa;
  border-radius: 12px 4px 12px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  color: #888;
  font-size: .8rem;
  font-weight: 500;
  text-align: center;
}
.img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);
  background-size: 28px 28px;
}
.img-placeholder::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1.5px solid rgba(0,0,0,.08);
  border-radius: 6px;
  pointer-events: none;
}
.img-placeholder span {
  position: relative;
  z-index: 1;
  padding: 8px 20px;
  background: rgba(253,252,248,.92);
  border-radius: 4px;
  border: 1px dashed #bbb;
}

/* Hero image placeholder (dark themed) */
.b2b-hero-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.b2b-hero-img-wrap .img-placeholder {
  width: 100%;
  min-height: 320px;
  background: rgba(255,255,255,.04);
  border-color: rgba(201,151,28,.3);
  color: rgba(255,255,255,.4);
}
.b2b-hero-img-wrap .img-placeholder::before {
  background-image:
    linear-gradient(rgba(201,151,28,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,151,28,.07) 1px, transparent 1px);
  background-size: 28px 28px;
}
.b2b-hero-img-wrap .img-placeholder::after {
  border-color: rgba(201,151,28,.15);
}
.b2b-hero-img-wrap .img-placeholder span {
  background: rgba(0,0,0,.35);
  border-color: rgba(201,151,28,.25);
  color: rgba(255,255,255,.55);
}
@media (max-width: 767px) {
  .b2b-hero-img-wrap { display: none; }
}

.b2b-section-img {
  width: 100%;
  height: 300px;
}

/* ── Target Audience Pills (hero) — gold ────────────────────── */
.b2b-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.b2b-pill {
  background: rgba(201,151,28,.15);
  color: var(--b2b-gold);
  border: 1.5px solid rgba(201,151,28,.4);
  border-radius: 4px 14px 4px 14px;
  padding: 4px 13px;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── For Whom Grid — black-border sketch cards ──────────────── */
.forwho-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (min-width: 900px) {
  .forwho-grid { grid-template-columns: repeat(4, 1fr); }
}

.forwho-card {
  background: var(--b2b-paper);
  border: 2px solid var(--b2b-black);
  border-radius: 14px 4px 14px 4px;
  box-shadow: 4px 4px 0 var(--b2b-gold);
  padding: 28px 18px 22px;
  text-align: center;
  transition: transform var(--trans), box-shadow var(--trans);
}
.forwho-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--b2b-gold);
}
.forwho-icon {
  width: 52px;
  height: 52px;
  border-radius: 50% 40% 50% 40%;
  background: var(--b2b-gold-lt);
  border: 2px solid var(--b2b-gold-dk);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.forwho-icon svg {
  width: 24px;
  height: 24px;
  color: var(--b2b-black);
  stroke: var(--b2b-black);
}
.forwho-card h3 {
  font-size: .95rem;
  color: var(--b2b-black);
  margin-bottom: 8px;
  line-height: 1.3;
}
.forwho-card p {
  font-size: .82rem;
  color: #555;
  line-height: 1.55;
  margin: 0;
}

/* ── How it works — gold sketch step numbers ────────────────── */
.step-num {
  background: var(--b2b-black) !important;
  color: var(--b2b-gold) !important;
  border: 2px solid var(--b2b-gold) !important;
  box-shadow: 3px 3px 0 var(--b2b-gold-dk) !important;
  border-radius: 50% 40% 50% 40% !important;
  font-weight: 800;
}
.step h3 {
  color: var(--b2b-black);
}

/* ── Pricing cards — black & gold sketch ────────────────────── */
.pricing-card {
  background: var(--b2b-paper) !important;
  border: 2px solid var(--b2b-black) !important;
  border-radius: 14px 4px 14px 4px !important;
  box-shadow: 5px 5px 0 rgba(13,13,13,.15) !important;
  transition: transform var(--trans), box-shadow var(--trans) !important;
}
.pricing-card:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 7px 7px 0 var(--b2b-gold) !important;
}
.pricing-card--featured {
  background: var(--b2b-black) !important;
  border-color: var(--b2b-gold) !important;
  box-shadow: 5px 5px 0 var(--b2b-gold-dk) !important;
}
.pricing-card--featured:hover {
  box-shadow: 7px 7px 0 var(--b2b-gold) !important;
}
.pricing-card-badge {
  background: var(--b2b-gold) !important;
  color: var(--b2b-black) !important;
  font-weight: 700;
}
.pricing-card .pricing-card-name,
.pricing-card .pricing-amount {
  color: var(--b2b-black);
}
.pricing-card--featured .pricing-card-name,
.pricing-card--featured .pricing-amount {
  color: var(--b2b-gold) !important;
}
.pricing-card .btn-outline {
  border-color: var(--b2b-black) !important;
  color: var(--b2b-black) !important;
}
.pricing-card .btn-outline:hover {
  background: var(--b2b-black) !important;
  color: #fff !important;
}

/* ── Testimonial cards — black-border sticky notes ──────────── */
.testimonial-card {
  background: var(--b2b-paper) !important;
  border: 2px solid var(--b2b-black) !important;
  border-radius: 4px 14px 4px 14px !important;
  box-shadow: 4px 4px 0 var(--b2b-gold) !important;
  transform: rotate(-0.5deg);
}
.testimonial-card:nth-child(2) { transform: rotate(0.4deg); }
.testimonial-card:nth-child(3) { transform: rotate(-0.3deg); }
.testimonial-card .stars {
  color: var(--b2b-gold) !important;
}
.testimonial-card .avatar {
  background: var(--b2b-black) !important;
  color: var(--b2b-gold) !important;
  border: 2px solid var(--b2b-gold);
}

/* ── Testimonials — 3-col override ──────────────────────────── */
.b2b-testimonials .testimonials-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .b2b-testimonials .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Trust row icons — gold ──────────────────────────────────── */
.trust-item svg {
  color: var(--b2b-gold) !important;
}

/* ── CTA banner — black + gold sketch frame ──────────────────── */
.cta-banner {
  background: var(--b2b-black) !important;
  border: 2px solid var(--b2b-gold) !important;
  box-shadow: 6px 6px 0 var(--b2b-gold-dk) !important;
  border-radius: 16px 4px 16px 4px !important;
}

/* ── Trust row mobile ────────────────────────────────────────── */
@media (max-width: 640px) {
  .trust-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── Noscript ────────────────────────────────────────────────── */
.b2b-noscript {
  text-align: center;
  padding: 60px 20px;
  color: var(--b2b-black);
  font-size: .95rem;
}