/* ============================================================
       ENTERPRISE.TRANGOTECH.COM
       Page: Microsoft Dynamics 365 Business Central Implementation
       ============================================================ */

:root {
   --red: #de253a;
   --red-h: #c41f32;
   --red-tint: #fbe9eb;
   --red-glow: rgba(222, 37, 58, 0.18);
   --dark: #343434;
   --black: #0d0d0d;
   --ink: #141414;
   --ink-2: #1c1c1f;
   --white: #ffffff;
   --gray-60: #565656;
   --gray-40: #777070;
   --gray-20: #d0d0d0;
   --gray-10: #e8e8e8;
   --gray-05: #f6f6f6;
   --gray-02: #f9f9f9;
   --r-lg: 20px;
   --r-md: 15px;
   --r-sm: 10px;
   --shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
   --shadow-h: 0 16px 60px rgba(0, 0, 0, 0.14);
   --t-fast: 140ms;
   --t-base: 220ms;
   --t-slow: 360ms;
   --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}


img {
   max-width: 100%;
   height: auto;
}
a {
   text-decoration: none;
}
button {
   font-family: inherit;
}
/* Prevent any element from causing horizontal scroll on mobile */
main,
section,
.sec-inner,
.bc-hero-inner,
.bc-trust-inner {
   max-width: 100%;
}
/* Force long words to wrap rather than overflow */
h1,
h2,
h3,
h4,
p {
   overflow-wrap: break-word;
   word-wrap: break-word;
}

/* A11Y skip link */
.skip-link {
   position: absolute;
   top: -100px;
   left: 16px;
   background: var(--red);
   color: #fff;
   padding: 12px 20px;
   border-radius: 10px;
   font-size: 14px;
   font-weight: 700;
   z-index: 9999;
   transition: top var(--t-base) var(--ease-out);
}
.skip-link:focus {
   top: 16px;
   color: #fff;
   outline: 3px solid #fff;
   outline-offset: 2px;
}

/* Focus visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible {
   outline: 3px solid var(--red);
   outline-offset: 3px;
   border-radius: 6px;
}
.btn-red:focus-visible,
.btn-ghost:focus-visible {
   outline-offset: 4px;
}

/* Scroll reveal */
[data-r] {
   opacity: 0;
   transform: translateY(22px);
   transition:
      opacity 0.55s var(--ease-out),
      transform 0.55s var(--ease-out);
}
[data-r][data-d="1"] {
   transition-delay: 80ms;
}
[data-r][data-d="2"] {
   transition-delay: 160ms;
}
[data-r][data-d="3"] {
   transition-delay: 240ms;
}
[data-r][data-d="4"] {
   transition-delay: 320ms;
}
[data-r].visible {
   opacity: 1;
   transform: none;
}

@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
   [data-r] {
      opacity: 1 !important;
      transform: none !important;
   }
}

/* ── TOPBAR ── */
.topbar {
   background: var(--red);
   color: #fff;
   font-size: 13px;
   font-weight: 500;
   height: 38px;
   display: flex;
   align-items: center;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 300;
}
.topbar-inner {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.topbar a {
   color: #fff;
   transition: opacity 0.15s;
}
.topbar a:hover {
   opacity: 0.8;
}
.topbar-left,
.topbar-right {
   display: flex;
   align-items: center;
   gap: 18px;
}
.topbar-sep {
   opacity: 0.35;
}

/* ── NAVIGATION ── */
.main-nav {
   background: var(--white);
   height: 70px;
   display: flex;
   align-items: center;
   position: fixed;
   top: 38px;
   left: 0;
   width: 100%;
   z-index: 200;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07);
   transition: box-shadow 0.3s;
}
.main-nav.scrolled {
   box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12);
}
.nav-inner {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.nav-logo {
   display: flex;
   align-items: center;
   gap: 11px;
   text-decoration: none;
}
.nav-logo-mark {
   width: 38px;
   height: 38px;
   background: var(--red);
   border-radius: 9px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}
.nav-logo-mark svg {
   width: 22px;
   height: 22px;
}
.nav-logo-wordmark {
   display: flex;
   flex-direction: column;
   line-height: 1;
}
.nav-logo-name {
   font-size: 15px;
   font-weight: 800;
   color: var(--dark);
   letter-spacing: 0.4px;
}
.nav-logo-sub {
   font-size: 10px;
   font-weight: 700;
   color: var(--red);
   letter-spacing: 1.4px;
   text-transform: uppercase;
   margin-top: 3px;
}
.nav-links {
   display: flex;
   align-items: center;
   gap: 2px;
   list-style: none;
}
.nav-links a {
   font-size: 14px;
   font-weight: 600;
   color: var(--dark);
   padding: 8px 14px;
   border-radius: 9px;
   transition:
      color 0.18s,
      background 0.18s;
}
.nav-links a:hover {
   color: var(--red);
   background: var(--red-tint);
}
.nav-links .nav-cta a {
   background: var(--red);
   color: #fff;
   padding: 10px 22px;
   border-radius: 16px;
   font-weight: 700;
}
.nav-links .nav-cta a:hover {
   background: var(--red-h);
   color: #fff;
}

/* ── BUTTONS ── */
.btn-red {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: var(--red);
   color: #fff;
   font-size: 15px;
   font-weight: 700;
   padding: 15px 30px;
   border-radius: 16px;
   transition:
      background var(--t-base) var(--ease-out),
      transform var(--t-base) var(--ease-out),
      box-shadow var(--t-base) var(--ease-out);
   border: none;
   cursor: pointer;
   text-decoration: none;
   min-height: 48px;
   line-height: 1;
   position: relative;
   overflow: hidden;
}
.btn-red::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
   transform: translateX(-100%);
   transition: transform var(--t-slow) var(--ease-out);
   pointer-events: none;
}
.btn-red:hover {
   background: var(--red-h);
   color: #fff;
   transform: translateY(-2px);
   box-shadow: 0 10px 28px rgba(222, 37, 58, 0.32);
}
.btn-red:hover::before {
   transform: translateX(100%);
}
.btn-red:active {
   transform: translateY(0);
   transition-duration: var(--t-fast);
}
.btn-red i {
   transition: transform var(--t-base) var(--ease-out);
}
.btn-red:hover i {
   transform: translateX(3px);
}
.btn-ghost {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: transparent;
   color: var(--dark);
   font-size: 15px;
   font-weight: 600;
   padding: 15px 30px;
   border-radius: 16px;
   border: 1.5px solid var(--gray-20);
   transition:
      border-color var(--t-base) var(--ease-out),
      background var(--t-base) var(--ease-out),
      color var(--t-base) var(--ease-out);
   text-decoration: none;
   min-height: 48px;
   line-height: 1;
   cursor: pointer;
}
.btn-ghost:hover {
   border-color: var(--gray-40);
   background: var(--gray-05);
   color: var(--dark);
}
.sec-dark .btn-ghost,
.bc-final .btn-ghost {
   color: #fff;
   border-color: rgba(255, 255, 255, 0.45);
   background: rgba(255, 255, 255, 0.03);
}
.sec-dark .btn-ghost:hover,
.bc-final .btn-ghost:hover {
   color: #fff;
   border-color: #fff;
   background: rgba(255, 255, 255, 0.08);
}

/* ── EYEBROW + SECTION TYPOGRAPHY (matched to live enterprise.trangotech.com page) ── */
.eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 18px;
}
.eyebrow::before {
   content: "";
   display: block;
   width: 32px;
   height: 2.5px;
   background: var(--red);
   border-radius: 2px;
}
.eyebrow span {
   font-size: 12px;
   font-weight: 700;
   color: var(--red);
   letter-spacing: 1.8px;
   text-transform: uppercase;
}
.eyebrow-c {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}
.eyebrow-c .eyebrow {
   justify-content: center;
}
/* .sec-title — matches live page pattern: black/red split, 42px → 40px → 30px responsive */
.sec-title {
   font-size: 42px;
   font-weight: 500;
   color: #000;
   line-height: 1.21;
   letter-spacing: 0;
   margin-bottom: 18px;
   text-transform: capitalize;
}
.sec-title .accent,
.sec-title span.accent {
   color: var(--red);
   font-weight: 700;
}
.sec-sub {
   font-size: 17px;
   color: var(--gray-60);
   line-height: 1.75;
   max-width: 640px;
   font-weight: 400;
}
.eyebrow-c .sec-title,
.eyebrow-c .sec-sub {
   text-align: center;
}
.eyebrow-c .sec-sub {
   margin-left: auto;
   margin-right: auto;
}
.sec-dark .sec-title {
   color: #fff;
   font-weight: 700;
}
.sec-dark .sec-title .accent,
.sec-dark .sec-title span.accent {
   color: #ff5d70;
   font-weight: 700;
}
.sec-dark .sec-sub {
   color: rgba(255, 255, 255, 0.72);
}
.sec-dark .eyebrow span {
   color: #ff7a8b;
}
.sec-dark .eyebrow::before {
   background: #ff5d70;
}
.bc-final h2 .accent,
.bc-final h2 span.accent {
   color: var(--red);
   font-weight: 700;
}
@media (max-width: 1024px) {
   .sec-title {
      font-size: 40px;
      line-height: 1.15;
   }
}
@media (max-width: 640px) {
   .sec-title {
      font-size: 30px;
      line-height: 1.25;
   }
}

/* ── SECTION WRAPPERS ── */
.sec-white {
   background: var(--white);
   padding: 100px 0;
   position: relative;
}
.sec-gray {
   background: var(--gray-05);
   padding: 100px 0;
   position: relative;
}
.sec-dark {
   background: var(--ink);
   padding: 100px 0;
   position: relative;
   overflow: hidden;
}
.sec-inner {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
   position: relative;
   z-index: 1;
}

/* ============================================================
       HERO — Product-led split (different from automotive page)
       ============================================================ */
.bc-hero {
   background: #fff;
   padding: 80px 0 64px;
   margin-top: 108px;
   position: relative;
   overflow: hidden;
}
.bc-hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image:
      linear-gradient(var(--gray-10) 1px, transparent 1px), linear-gradient(90deg, var(--gray-10) 1px, transparent 1px);
   background-size: 56px 56px;
   pointer-events: none;
   opacity: 0.35;
}
.bc-hero::after {
   content: "";
   position: absolute;
   bottom: -30%;
   right: -10%;
   width: 700px;
   height: 700px;
   background: radial-gradient(circle, rgba(222, 37, 58, 0.06) 0%, transparent 60%);
   pointer-events: none;
}
.bc-hero-inner {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: 1.05fr 1fr;
   gap: 56px;
   align-items: center;
}

.bc-crumb {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 22px;
   font-size: 13px;
}
.bc-crumb a {
   color: var(--gray-40);
   transition: color 0.18s;
}
.bc-crumb a:hover {
   color: var(--red);
}
.bc-crumb .sep {
   color: var(--gray-20);
   font-size: 10px;
}
.bc-crumb .here {
   color: var(--gray-60);
}

.bc-hero-pill {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: var(--red-tint);
   border: 1px solid rgba(222, 37, 58, 0.22);
   border-radius: 100px;
   padding: 7px 18px 7px 9px;
   margin-bottom: 22px;
}
.bc-hero-pill-dot {
   width: 26px;
   height: 26px;
   background: var(--red);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   color: #fff;
   flex-shrink: 0;
}
.bc-hero-pill-text {
   font-size: 12px;
   font-weight: 700;
   color: var(--red);
   letter-spacing: 0.9px;
   text-transform: uppercase;
}

/* H1 — matches live page .banner-title: 52px → 44px → 34px, weight 700, near-black, lh 1.2 */
.bc-hero h1 {
   font-size: 52px;
   font-weight: 700;
   color: #27282c;
   line-height: 1.2;
   letter-spacing: 0;
   max-width: 580px;
   margin-bottom: 22px;
}
.bc-hero h1 .accent {
   color: var(--red);
   font-weight: 700;
}
@media (max-width: 1200px) {
   .bc-hero h1 {
      font-size: 44px;
      line-height: 54px;
   }
}
@media (max-width: 768px) {
   .bc-hero h1 {
      font-size: 34px;
      line-height: 44px;
   }
}
.bc-hero-sub {
   font-size: 17.5px;
   color: var(--gray-60);
   max-width: 540px;
   line-height: 1.75;
   margin-bottom: 32px;
}
.bc-hero-ctas {
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 0;
}
.bc-hero-ctas .btn-red,
.bc-hero-ctas .btn-ghost {
   padding: 14px 22px;
   font-size: 14.5px;
}

/* Hero right — D365 product screenshot in clean frame */
.bc-hero-img {
   width: 100%;
   max-width: 560px;
   margin-left: auto;
   position: relative;
   aspect-ratio: 16/10.6;
   border-radius: 16px;
   overflow: hidden;
   box-shadow:
      0 30px 80px -18px rgba(0, 0, 0, 0.32),
      0 0 0 1px rgba(0, 0, 0, 0.05);
   background: var(--gray-05);
}
.bc-hero-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top;
   display: block;
}
.bc-hero-img-chip {
   position: absolute;
   top: 14px;
   left: 14px;
   background: rgba(255, 255, 255, 0.96);
   border: 1px solid rgba(14, 14, 15, 0.06);
   color: #1a1a1f;
   font-size: 11px;
   font-weight: 700;
   padding: 6px 11px;
   border-radius: 6px;
   display: inline-flex;
   align-items: center;
   gap: 7px;
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.bc-hero-img-chip i {
   color: #0078d4;
   font-size: 12px;
}

/* ============================================================
       TRUST BAR — different layout from automotive
       ============================================================ */
.bc-trust {
   background: var(--gray-02);
   border-top: 1px solid var(--gray-10);
   border-bottom: 1px solid var(--gray-10);
   padding: 36px 0;
   position: relative;
}
.bc-trust::after {
   content: "";
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 220px;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--red), transparent);
   opacity: 0.35;
}
.bc-trust-inner {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 0;
}
.bc-trust-cell {
   padding: 0 28px;
   border-right: 1px solid var(--gray-10);
   display: flex;
   flex-direction: column;
   gap: 6px;
}
.bc-trust-cell:first-child {
   padding-left: 0;
}
.bc-trust-cell:last-child {
   border-right: none;
   padding-right: 0;
}
.bc-trust-cell-head {
   display: flex;
   align-items: center;
   gap: 10px;
}
.bc-trust-cell-icon {
   width: 36px;
   height: 36px;
   background: var(--red-tint);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--red);
   font-size: 15px;
   flex-shrink: 0;
}
.bc-trust-cell-v {
   font-size: 22px;
   font-weight: 800;
   color: var(--dark);
   line-height: 1;
   letter-spacing: -0.01em;
   font-variant-numeric: tabular-nums;
}
.bc-trust-cell-l {
   font-size: 12.5px;
   color: var(--gray-40);
   line-height: 1.5;
}

/* ── RESPONSIVE BASE ── */
@media (max-width: 1024px) {
   .topbar {
      display: none;
   }
   .main-nav {
      top: 0;
   }
   .bc-hero {
      margin-top: 70px;
      padding: 56px 0 48px;
   }
   .bc-hero-inner {
      grid-template-columns: 1fr;
      gap: 48px;
   }
   .bc-hero h1 {
      max-width: 100%;
   }
   .bc-hero-sub {
      max-width: 100%;
   }
   .bc-hero-img {
      max-width: 560px;
      margin: 0 auto;
   }
   .bc-trust-inner {
      grid-template-columns: 1fr 1fr;
      gap: 28px 0;
   }
   .bc-trust-cell:nth-child(2n) {
      border-right: none;
   }
   .bc-trust-cell:nth-child(n + 3) {
      padding-top: 24px;
      border-top: 1px solid var(--gray-10);
   }
}
@media (max-width: 768px) {
   .nav-links {
      display: none;
   }
   .bc-hero h1 {
      font-size: 36px;
   }
   .bc-hero-sub {
      font-size: 16px;
   }
   .sec-white,
   .sec-gray,
   .sec-dark {
      padding: 64px 0;
   }
}
@media (max-width: 640px) {
   .bc-trust-inner {
      grid-template-columns: 1fr;
   }
   .bc-trust-cell {
      padding: 0 !important;
      border-right: none !important;
      border-top: none !important;
   }
   .bc-trust-cell + .bc-trust-cell {
      padding-top: 18px !important;
      border-top: 1px solid var(--gray-10) !important;
   }
   .btn-red,
   .btn-ghost {
      font-size: 14.5px;
      padding: 14px 22px;
   }
   .sec-title br {
      display: none;
   }
}

/* ============================================================
       SEC 3 — WHEN BC FITS / WHEN IT DOESN'T (split, honest framing)
       ============================================================ */
.bc-fit {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
   margin-top: 56px;
}
.bc-fit-col {
   background: var(--white);
   border: 1px solid var(--gray-10);
   border-radius: var(--r-lg);
   padding: 36px 32px;
   transition:
      border-color var(--t-base) var(--ease-out),
      box-shadow var(--t-base) var(--ease-out);
}
.bc-fit-col.yes {
   border-top: 4px solid #15a663;
}
.bc-fit-col.no {
   border-top: 4px solid var(--gray-40);
}
.bc-fit-col:hover {
   box-shadow: var(--shadow);
}
.bc-fit-head {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 22px;
   padding-bottom: 18px;
   border-bottom: 1px solid var(--gray-10);
}
.bc-fit-icon {
   width: 44px;
   height: 44px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   flex-shrink: 0;
}
.bc-fit-col.yes .bc-fit-icon {
   background: rgba(21, 166, 99, 0.1);
   color: #15a663;
}
.bc-fit-col.no .bc-fit-icon {
   background: var(--gray-05);
   color: var(--gray-40);
}
.bc-fit-h {
   font-size: 19px;
   font-weight: 700;
   color: var(--dark);
   line-height: 1.3;
}
.bc-fit-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 12px;
}
.bc-fit-list li {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   font-size: 14.5px;
   color: var(--gray-60);
   line-height: 1.65;
}
.bc-fit-list li i {
   font-size: 13px;
   margin-top: 4px;
   flex-shrink: 0;
}
.bc-fit-col.yes li i {
   color: #15a663;
}
.bc-fit-col.no li i {
   color: var(--gray-40);
}
.bc-fit-list strong {
   color: var(--dark);
   font-weight: 700;
}
.bc-fit-foot {
   margin-top: 22px;
   padding-top: 18px;
   border-top: 1px dashed var(--gray-10);
   font-size: 13px;
   color: var(--gray-60);
   line-height: 1.65;
}
.bc-fit-foot strong {
   color: var(--dark);
}

/* ============================================================
       SEC 4 — CAPABILITIES & MODULES (6-card grid with screenshot)
       ============================================================ */
.bc-mods {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
   margin-top: 56px;
}
.bc-mod {
   background: var(--white);
   border: 1px solid var(--gray-10);
   border-radius: var(--r-lg);
   padding: 28px 26px;
   transition:
      border-color var(--t-base) var(--ease-out),
      box-shadow var(--t-base) var(--ease-out),
      transform var(--t-base) var(--ease-out);
   display: flex;
   flex-direction: column;
}
.bc-mod:hover {
   border-color: var(--red);
   box-shadow: var(--shadow);
   transform: translateY(-3px);
}
.bc-mod-icon {
   width: 48px;
   height: 48px;
   background: var(--red-tint);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--red);
   font-size: 20px;
   margin-bottom: 18px;
   flex-shrink: 0;
}
.bc-mod h3 {
   font-size: 17px;
   font-weight: 700;
   color: var(--dark);
   line-height: 1.3;
   margin-bottom: 10px;
}
.bc-mod p {
   font-size: 14px;
   color: var(--gray-60);
   line-height: 1.65;
   margin-bottom: 14px;
   flex: 1;
}
.bc-mod-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}
.bc-mod-tag {
   font-size: 11.5px;
   font-weight: 600;
   background: var(--gray-05);
   color: var(--gray-60);
   padding: 4px 10px;
   border-radius: 100px;
   border: 1px solid var(--gray-10);
}

.bc-mods-shot {
   margin-top: 48px;
   position: relative;
   border-radius: var(--r-lg);
   overflow: hidden;
   box-shadow:
      0 24px 60px -16px rgba(0, 0, 0, 0.22),
      0 0 0 1px rgba(0, 0, 0, 0.04);
   aspect-ratio: 16/8;
   max-width: 1100px;
   margin-left: auto;
   margin-right: auto;
}
.bc-mods-shot img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top;
   display: block;
}
.bc-mods-shot-chip {
   position: absolute;
   top: 14px;
   left: 14px;
   background: rgba(255, 255, 255, 0.96);
   color: #1a1a1f;
   font-size: 11px;
   font-weight: 700;
   padding: 6px 11px;
   border-radius: 6px;
   display: inline-flex;
   align-items: center;
   gap: 7px;
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.bc-mods-shot-chip i {
   color: #0078d4;
   font-size: 12px;
}

/* ============================================================
       SEC 5 — COPILOT FOR BC (dark, prompt-led)
       ============================================================ */
.bc-copilot {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 56px;
   margin-top: 56px;
   align-items: start;
}
.bc-copilot-cards {
   display: flex;
   flex-direction: column;
   gap: 14px;
}
.bc-copilot-card {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 14px;
   padding: 20px 22px;
   transition:
      background var(--t-base) var(--ease-out),
      border-color var(--t-base) var(--ease-out);
}
.bc-copilot-card:hover {
   background: rgba(255, 255, 255, 0.06);
   border-color: rgba(255, 255, 255, 0.12);
}
.bc-copilot-card-head {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 10px;
}
.bc-copilot-card-icon {
   width: 36px;
   height: 36px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #0078d4, #50e6ff);
   color: #fff;
   font-size: 14px;
   flex-shrink: 0;
}
.bc-copilot-card-h {
   font-size: 15px;
   font-weight: 700;
   color: #fff;
}
.bc-copilot-card p {
   font-size: 13.5px;
   color: rgba(255, 255, 255, 0.72);
   line-height: 1.65;
   margin: 0;
}
.bc-copilot-prompt {
   font-size: 12px;
   color: #50e6ff;
   background: rgba(80, 230, 255, 0.08);
   border: 1px solid rgba(80, 230, 255, 0.18);
   border-radius: 6px;
   padding: 7px 10px;
   margin-top: 10px;
   display: inline-block;
}
.bc-copilot-vis {
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 18px;
   padding: 18px;
   position: sticky;
   top: 100px;
}
.bc-copilot-vis-shot {
   border-radius: 12px;
   overflow: hidden;
   margin-bottom: 14px;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(255, 255, 255, 0.06);
}
.bc-copilot-vis-shot img {
   width: 100%;
   height: auto;
   display: block;
}
.bc-copilot-vis-head {
   display: flex;
   align-items: center;
   gap: 12px;
   padding-bottom: 14px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   margin-bottom: 16px;
}
.bc-copilot-vis-logo {
   width: 40px;
   height: 40px;
   border-radius: 10px;
   background: linear-gradient(135deg, #0078d4, #50e6ff);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 16px;
}
.bc-copilot-vis-name {
   font-size: 14px;
   font-weight: 800;
   color: #fff;
   line-height: 1.3;
}
.bc-copilot-vis-name small {
   display: block;
   font-size: 11.5px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.55);
   margin-top: 2px;
}
.bc-copilot-vis-msg {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 12px;
   padding: 14px 16px;
   margin-bottom: 12px;
}
.bc-copilot-vis-msg.user {
   background: rgba(222, 37, 58, 0.08);
   border-color: rgba(222, 37, 58, 0.22);
   margin-left: 28px;
}
.bc-copilot-vis-msg-from {
   font-size: 10.5px;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.55);
   letter-spacing: 0.8px;
   text-transform: uppercase;
   margin-bottom: 6px;
}
.bc-copilot-vis-msg.bot .bc-copilot-vis-msg-from {
   color: #50e6ff;
}
.bc-copilot-vis-msg-text {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.85);
   line-height: 1.6;
}
.bc-copilot-vis-data {
   background: rgba(255, 255, 255, 0.04);
   border-radius: 8px;
   padding: 10px 12px;
   margin-top: 10px;
   font-family: var(--mono);
   font-size: 11.5px;
   color: rgba(255, 255, 255, 0.7);
}
.bc-copilot-vis-data .row {
   display: flex;
   justify-content: space-between;
   padding: 2px 0;
}
.bc-copilot-vis-data .row .v {
   color: #4ade80;
   font-weight: 700;
}

@media (max-width: 900px) {
   .bc-fit {
      grid-template-columns: 1fr;
      gap: 18px;
   }
   .bc-mods {
      grid-template-columns: 1fr;
      gap: 16px;
   }
   .bc-copilot {
      grid-template-columns: 1fr;
      gap: 36px;
   }
   .bc-copilot-vis {
      position: static;
   }
}

/* ============================================================
       SEC 6 — IMPLEMENTATION PACKAGES (4 fixed-scope tiers)
       ============================================================ */
.bc-pkg {
   margin-top: 56px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
}
.bc-pkg-card {
   background: var(--white);
   border: 1.5px solid var(--gray-10);
   border-radius: var(--r-md);
   padding: 26px 22px;
   display: flex;
   flex-direction: column;
   transition:
      border-color var(--t-base) var(--ease-out),
      box-shadow var(--t-base) var(--ease-out),
      transform var(--t-base) var(--ease-out);
   position: relative;
}
.bc-pkg-card:hover {
   border-color: var(--red);
   box-shadow: var(--shadow);
   transform: translateY(-3px);
}
.bc-pkg-card.featured {
   border-color: var(--red);
   box-shadow: 0 14px 40px rgba(222, 37, 58, 0.14);
}
.bc-pkg-card.featured::before {
   content: "MOST POPULAR";
   position: absolute;
   top: -12px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--red);
   color: #fff;
   font-size: 10px;
   font-weight: 800;
   padding: 5px 14px;
   border-radius: 100px;
   letter-spacing: 1px;
   box-shadow: 0 4px 14px rgba(222, 37, 58, 0.3);
}
.bc-pkg-tier {
   font-size: 11px;
   font-weight: 600;
   color: var(--red);
   letter-spacing: 1.2px;
   text-transform: uppercase;
   margin-bottom: 8px;
}
.bc-pkg-card h3 {
   font-size: 17px;
   font-weight: 700;
   color: var(--dark);
   line-height: 1.3;
   margin-bottom: 6px;
   letter-spacing: -0.005em;
}
.bc-pkg-fit {
   font-size: 12.5px;
   color: var(--gray-40);
   line-height: 1.5;
   margin-bottom: 18px;
}
.bc-pkg-amt {
   display: flex;
   align-items: baseline;
   gap: 6px;
   padding-bottom: 16px;
   border-bottom: 1px dashed var(--gray-10);
   margin-bottom: 16px;
}
.bc-pkg-from {
   font-size: 11px;
   color: var(--gray-40);
   font-weight: 600;
}
.bc-pkg-num {
   font-size: 28px;
   font-weight: 800;
   color: var(--dark);
   line-height: 1;
   font-variant-numeric: tabular-nums;
}
.bc-pkg-weeks {
   font-size: 12px;
   font-weight: 700;
   color: var(--red);
   margin-left: auto;
   background: var(--red-tint);
   padding: 4px 10px;
   border-radius: 100px;
}
.bc-pkg-list {
   list-style: none;
   padding: 0;
   margin: 0 0 18px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   flex: 1;
}
.bc-pkg-list li {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   font-size: 12.5px;
   color: var(--gray-60);
   line-height: 1.55;
}
.bc-pkg-list li i {
   color: var(--red);
   margin-top: 4px;
   font-size: 10px;
   flex-shrink: 0;
}
.bc-pkg-list li strong {
   color: var(--dark);
   font-weight: 700;
}

/* ============================================================
       SEC 7 — IMPLEMENTATION PHASES (timeline with RACI)
       ============================================================ */
.bc-phases {
   margin-top: 56px;
   display: flex;
   flex-direction: column;
   gap: 0;
   max-width: 980px;
   margin-left: auto;
   margin-right: auto;
}
.bc-phase {
   display: grid;
   grid-template-columns: 80px 1fr;
   gap: 24px;
   padding: 22px 0;
   border-bottom: 1px solid var(--gray-10);
   position: relative;
}
.bc-phase:last-child {
   border-bottom: none;
}
.bc-phase-mark {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
}
.bc-phase-num {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--red-tint);
   color: var(--red);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   font-weight: 700;
   flex-shrink: 0;
   transition:
      background var(--t-base) var(--ease-out),
      color var(--t-base) var(--ease-out);
}
.bc-phase:hover .bc-phase-num {
   background: var(--red);
   color: #fff;
}
.bc-phase-line {
   width: 2px;
   flex: 1;
   background: var(--gray-10);
}
.bc-phase:last-child .bc-phase-line {
   display: none;
}
.bc-phase-body {
   padding-bottom: 8px;
}
.bc-phase-head {
   display: flex;
   align-items: baseline;
   gap: 14px;
   margin-bottom: 8px;
   flex-wrap: wrap;
}
.bc-phase-h {
   font-size: 17px;
   font-weight: 700;
   color: var(--dark);
   line-height: 1.3;
}
.bc-phase-dur {
   font-size: 11.5px;
   font-weight: 600;
   color: var(--red);
   background: var(--red-tint);
   padding: 3px 10px;
   border-radius: 100px;
   letter-spacing: 0.3px;
}
.bc-phase-desc {
   font-size: 14px;
   color: var(--gray-60);
   line-height: 1.7;
   margin-bottom: 14px;
}
.bc-phase-deliverables {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}
.bc-phase-del {
   background: var(--gray-05);
   border: 1px solid var(--gray-10);
   border-radius: 8px;
   padding: 9px 12px;
   font-size: 12.5px;
   color: var(--gray-60);
   display: flex;
   align-items: flex-start;
   gap: 8px;
   line-height: 1.5;
}
.bc-phase-del i {
   color: var(--red);
   font-size: 10px;
   margin-top: 4px;
   flex-shrink: 0;
}
.bc-phase-del strong {
   color: var(--dark);
   font-weight: 700;
}

/* ============================================================
       SEC 8 — MIGRATION PATHS (table)
       ============================================================ */
.bc-mig-wrap {
   margin-top: 56px;
   background: var(--white);
   border: 1px solid var(--gray-10);
   border-radius: var(--r-lg);
   overflow: hidden;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
.bc-mig {
   width: 100%;
   border-collapse: collapse;
   min-width: 760px;
}
.bc-mig thead th {
   background: var(--gray-05);
   padding: 16px 18px;
   text-align: left;
   font-size: 13px;
   font-weight: 700;
   color: var(--gray-60);
   border-bottom: 1px solid var(--gray-10);
}
.bc-mig tbody td {
   padding: 18px;
   border-bottom: 1px solid var(--gray-10);
   font-size: 14px;
   color: var(--gray-60);
   line-height: 1.6;
   vertical-align: top;
}
.bc-mig tbody tr:last-child td {
   border-bottom: none;
}
.bc-mig tbody tr:hover {
   background: var(--gray-02);
}
.bc-mig-from {
   display: flex;
   align-items: center;
   gap: 10px;
}
.bc-mig-from-icon {
   width: 32px;
   height: 32px;
   border-radius: 8px;
   background: var(--gray-05);
   border: 1px solid var(--gray-10);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--gray-60);
   font-size: 14px;
   flex-shrink: 0;
}
.bc-mig-from-name {
   font-weight: 700;
   color: var(--dark);
   font-size: 14.5px;
}
.bc-mig-from-name small {
   display: block;
   font-weight: 500;
   color: var(--gray-40);
   font-size: 11.5px;
   margin-top: 2px;
}
.bc-mig-time {
   font-weight: 700;
   color: var(--dark);
   font-size: 13.5px;
   white-space: nowrap;
}
.bc-mig-risk {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   font-weight: 700;
   padding: 4px 10px;
   border-radius: 100px;
}
.bc-mig-risk.low {
   background: rgba(21, 166, 99, 0.1);
   color: #15a663;
}
.bc-mig-risk.med {
   background: rgba(245, 158, 11, 0.1);
   color: #b45309;
}
.bc-mig-risk.high {
   background: var(--red-tint);
   color: var(--red);
}
.bc-mig-hint {
   display: none;
   align-items: center;
   justify-content: center;
   gap: 6px;
   padding: 10px 16px;
   background: var(--gray-05);
   border-top: 1px solid var(--gray-10);
   font-size: 12px;
   color: var(--gray-40);
   font-weight: 600;
}
.bc-mig-hint i {
   animation: bcMigArrow 1.6s ease-in-out infinite;
}
@keyframes bcMigArrow {
   0%,
   100% {
      transform: translateX(0);
   }
   50% {
      transform: translateX(5px);
   }
}

@media (max-width: 1100px) {
   .bc-pkg {
      grid-template-columns: 1fr 1fr;
   }
}
@media (max-width: 900px) {
   .bc-pkg {
      grid-template-columns: 1fr;
   }
   .bc-phase-deliverables {
      grid-template-columns: 1fr;
   }
   .bc-phase {
      grid-template-columns: 56px 1fr;
      gap: 16px;
   }
   .bc-phase-num {
      width: 40px;
      height: 40px;
      font-size: 14px;
   }
   .bc-mig-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      max-width: 100%;
   }
   .bc-mig-hint {
      display: flex;
   }
}

/* ============================================================
       SEC 9 — BC vs ALTERNATIVES MATRIX
       ============================================================ */
.bc-vs-wrap {
   margin-top: 56px;
   background: var(--white);
   border: 1px solid var(--gray-10);
   border-radius: var(--r-lg);
   overflow: hidden;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
   position: relative;
}
.bc-vs {
   width: 100%;
   border-collapse: collapse;
   min-width: 880px;
}
.bc-vs thead th {
   background: var(--gray-05);
   padding: 22px 14px 18px;
   text-align: left;
   font-size: 12.5px;
   font-weight: 700;
   color: var(--gray-60);
   border-bottom: 1px solid var(--gray-10);
   vertical-align: top;
   line-height: 1.4;
}
.bc-vs thead th.feat {
   background: linear-gradient(180deg, var(--red-tint) 0%, #fff 100%);
   color: var(--red);
   position: relative;
}
.bc-vs-feat-badge {
   display: inline-block;
   background: var(--red);
   color: #fff;
   font-size: 9.5px;
   font-weight: 800;
   padding: 3px 9px;
   border-radius: 100px;
   letter-spacing: 0.9px;
   margin-bottom: 6px;
   box-shadow: 0 3px 10px rgba(222, 37, 58, 0.3);
}
.bc-vs thead th small {
   display: block;
   font-weight: 400;
   color: var(--gray-40);
   font-size: 11px;
   margin-top: 3px;
}
.bc-vs thead th.feat small {
   color: var(--red);
}
.bc-vs tbody td {
   padding: 14px;
   border-bottom: 1px solid var(--gray-10);
   font-size: 13px;
   color: var(--gray-60);
   line-height: 1.5;
   vertical-align: middle;
}
.bc-vs tbody tr:last-child td {
   border-bottom: none;
}
.bc-vs tbody tr:hover {
   background: var(--gray-02);
}
.bc-vs .row-label {
   font-weight: 700;
   color: var(--dark);
   font-size: 13.5px;
}
.bc-vs .row-sub {
   display: block;
   font-weight: 400;
   color: var(--gray-40);
   font-size: 11.5px;
   margin-top: 2px;
}
.bc-vs td.feat {
   background: rgba(251, 233, 235, 0.4);
   border-left: 1px solid rgba(222, 37, 58, 0.18);
   border-right: 1px solid rgba(222, 37, 58, 0.18);
}
.bc-vs tbody tr:last-child td.feat {
   border-bottom: 1px solid rgba(222, 37, 58, 0.18);
}
.bc-vs td.feat strong {
   color: var(--red);
}
.bc-vs-yes {
   color: #15a663;
   font-size: 16px;
}
.bc-vs-no {
   color: var(--gray-20);
   font-size: 16px;
}
.bc-vs-warn {
   color: #f59e0b;
   font-size: 14px;
}
.bc-vs-note {
   display: block;
   font-size: 11px;
   color: var(--gray-40);
   margin-top: 3px;
   line-height: 1.4;
}
.bc-vs-note.feat {
   color: var(--red);
   font-weight: 600;
}

/* ============================================================
       SEC 10 — INDUSTRIES WE SERVE (5 cards with cross-link)
       ============================================================ */
.bc-ind {
   margin-top: 56px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
}
.bc-ind-card {
   background: var(--white);
   border: 1px solid var(--gray-10);
   border-radius: var(--r-lg);
   padding: 28px 26px;
   transition:
      border-color var(--t-base) var(--ease-out),
      box-shadow var(--t-base) var(--ease-out),
      transform var(--t-base) var(--ease-out);
   display: flex;
   flex-direction: column;
   position: relative;
}
.bc-ind-card:hover {
   border-color: var(--red);
   box-shadow: var(--shadow);
   transform: translateY(-3px);
}
.bc-ind-card-head {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 14px;
}
.bc-ind-icon {
   width: 48px;
   height: 48px;
   background: var(--red-tint);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--red);
   font-size: 20px;
   flex-shrink: 0;
   transition:
      background var(--t-base) var(--ease-out),
      color var(--t-base) var(--ease-out);
}
.bc-ind-card:hover .bc-ind-icon {
   background: var(--red);
   color: #fff;
}
.bc-ind-card h3 {
   font-size: 16.5px;
   font-weight: 700;
   color: var(--dark);
   line-height: 1.3;
}
.bc-ind-card p {
   font-size: 13.5px;
   color: var(--gray-60);
   line-height: 1.65;
   margin-bottom: 16px;
   flex: 1;
}
.bc-ind-card .bc-ind-link {
   font-size: 13px;
   font-weight: 700;
   color: var(--red);
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: gap var(--t-base) var(--ease-out);
   margin-top: auto;
}
.bc-ind-card .bc-ind-link:hover {
   gap: 10px;
}
.bc-ind-card .bc-ind-link i {
   font-size: 11px;
}

/* ============================================================
       SEC 11 — INLINE COST ESTIMATOR (simpler than full calculator)
       ============================================================ */
.bc-est {
   margin-top: 52px;
   max-width: 1040px;
   margin-left: auto;
   margin-right: auto;
   background: var(--white);
   border: 1px solid var(--gray-10);
   border-radius: var(--r-lg);
   overflow: hidden;
   box-shadow: var(--shadow);
   display: grid;
   grid-template-columns: 1.05fr 1fr;
}
.bc-est-inputs {
   padding: 36px 32px;
   border-right: 1px solid var(--gray-10);
}
.bc-est-h {
   font-size: 14px;
   font-weight: 700;
   color: var(--dark);
   margin-bottom: 4px;
}
.bc-est-sub {
   font-size: 13px;
   color: var(--gray-40);
   margin-bottom: 24px;
}
.bc-est-field {
   margin-bottom: 22px;
}
.bc-est-field-label {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 10px;
}
.bc-est-label-text {
   font-size: 13.5px;
   font-weight: 700;
   color: var(--dark);
}
.bc-est-label-val {
   font-size: 13px;
   font-weight: 700;
   color: var(--red);
   background: var(--red-tint);
   padding: 4px 11px;
   border-radius: 7px;
   min-width: 80px;
   text-align: center;
}
.bc-est-segs {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
}
.bc-est-seg {
   padding: 8px 14px;
   border: 1.5px solid var(--gray-10);
   background: var(--white);
   border-radius: 100px;
   font-size: 12.5px;
   font-weight: 600;
   color: var(--gray-60);
   cursor: pointer;
   transition:
      border-color var(--t-base) var(--ease-out),
      background var(--t-base) var(--ease-out),
      color var(--t-base) var(--ease-out);
}
.bc-est-seg:hover {
   border-color: var(--red);
   color: var(--red);
}
.bc-est-seg.active {
   background: var(--red);
   color: #fff;
   border-color: var(--red);
}
.bc-est-output {
   padding: 36px 32px;
   background: var(--ink);
   color: #fff;
   position: relative;
}
.bc-est-output::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--red), #ff8a99);
}
.bc-est-out-label {
   font-size: 11px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.55);
   text-transform: uppercase;
   letter-spacing: 1.2px;
   margin-bottom: 8px;
}
.bc-est-out-v {
   font-size: 32px;
   font-weight: 800;
   color: #fff;
   line-height: 1.05;
   margin-bottom: 6px;
   transition: color var(--t-base) var(--ease-out);
   font-variant-numeric: tabular-nums;
   letter-spacing: -0.01em;
}
.bc-est-out-v.update {
   color: #ff7a8b;
}
.bc-est-out-sub {
   font-size: 12.5px;
   color: rgba(255, 255, 255, 0.55);
   margin-bottom: 24px;
}
.bc-est-out-divider {
   height: 1px;
   background: rgba(255, 255, 255, 0.1);
   margin: 22px 0;
}
.bc-est-out-mini {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   margin-bottom: 22px;
}
.bc-est-out-mini-item {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.07);
   border-radius: 9px;
   padding: 12px 14px;
}
.bc-est-out-mini-l {
   font-size: 10.5px;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.5);
   letter-spacing: 0.8px;
   text-transform: uppercase;
   margin-bottom: 5px;
}
.bc-est-out-mini-v {
   font-size: 16px;
   font-weight: 800;
   color: #fff;
   line-height: 1;
}
.bc-est-out-cta,
.bc-est-out-cta input{
   width: 100%;
   background: var(--red) !important;
   color: #fff;
   border: none;
   padding: 13px 20px;
   border-radius: 11px;
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   transition: background var(--t-base) var(--ease-out);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   text-decoration: none;
}
.bc-est-out-cta:hover,
.bc-est-out-cta input:hover {
   background: var(--red-h);
   color: #fff;
}
.bc-est-out-cta.success,
.bc-est-out-cta input {
   background: #15a663;
}
.bc-est-out-cta.success:hover,
.bc-est-out-cta input:hover {
   background: #15a663;
}
.bc-est-out-foot {
   margin-top: 12px;
   font-size: 11px;
   color: rgba(255, 255, 255, 0.42);
   line-height: 1.55;
}
.bc-est-out-foot a {
   color: rgba(255, 255, 255, 0.7);
   text-decoration: underline;
}
.bc-est-out-foot a:hover {
   color: #fff;
}

/* Estimator lead form */
.bc-est-form {
   display: flex;
   flex-direction: column;
   gap: 9px;
   margin-bottom: 10px;
}
.bc-est-form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 9px;
}
.bc-est-form input {
   padding: 11px 13px;
   font-size: 13px;
   font-family: inherit;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 9px;
   color: #fff;
   outline: none;
   transition:
      border-color var(--t-base) var(--ease-out),
      background var(--t-base) var(--ease-out);
   width: 100%;
}
.bc-est-form input::placeholder {
   color: rgba(255, 255, 255, 0.42);
}
.bc-est-form input:focus {
   border-color: var(--red);
   background: rgba(255, 255, 255, 0.08);
}
.bc-est-form input:disabled {
   opacity: 0.55;
   cursor: not-allowed;
}
.bc-est-form-or {
   font-size: 11.5px;
   color: rgba(255, 255, 255, 0.4);
   text-align: center;
   margin: 8px 0;
   position: relative;
}
.bc-est-form-or::before,
.bc-est-form-or::after {
   content: "";
   position: absolute;
   top: 50%;
   width: 35%;
   height: 1px;
   background: rgba(255, 255, 255, 0.08);
}
.bc-est-form-or::before {
   left: 0;
}
.bc-est-form-or::after {
   right: 0;
}
@media (max-width: 480px) {
   .bc-est-form-row {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 1100px) {
   .bc-vs {
      min-width: 720px;
      font-size: 12px;
   }
}
@media (max-width: 900px) {
   .bc-vs-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      max-width: 100%;
   }
   .bc-ind {
      grid-template-columns: 1fr;
      gap: 16px;
   }
   .bc-est {
      grid-template-columns: 1fr;
   }
   .bc-est-inputs {
      border-right: none;
      border-bottom: 1px solid var(--gray-10);
      padding: 28px 22px;
   }
   .bc-est-output {
      padding: 28px 22px;
   }
}

/* ============================================================
       SEC 12 — LICENSE PRICING BREAKDOWN
       ============================================================ */
.bc-lic {
   margin-top: 56px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
}
.bc-lic-card {
   background: var(--white);
   border: 1.5px solid var(--gray-10);
   border-radius: var(--r-lg);
   padding: 30px 28px;
   transition:
      border-color var(--t-base) var(--ease-out),
      box-shadow var(--t-base) var(--ease-out);
   position: relative;
}
.bc-lic-card:hover {
   border-color: var(--red);
   box-shadow: var(--shadow);
}
.bc-lic-card.featured {
   border-color: var(--red);
   box-shadow: 0 14px 40px rgba(222, 37, 58, 0.12);
}
.bc-lic-tier {
   font-size: 11.5px;
   font-weight: 600;
   color: var(--red);
   letter-spacing: 1.2px;
   text-transform: uppercase;
   margin-bottom: 8px;
}
.bc-lic-card h3 {
   font-size: 18px;
   font-weight: 700;
   color: var(--dark);
   line-height: 1.3;
   margin-bottom: 10px;
}
.bc-lic-price {
   display: flex;
   align-items: baseline;
   gap: 4px;
   margin-bottom: 6px;
}
.bc-lic-price-v {
   font-size: 36px;
   font-weight: 800;
   color: var(--dark);
   line-height: 1;
   letter-spacing: -0.015em;
}
.bc-lic-price-suffix {
   font-size: 13px;
   color: var(--gray-40);
   font-weight: 600;
}
.bc-lic-price-foot {
   font-size: 12.5px;
   color: var(--gray-40);
   padding-bottom: 18px;
   border-bottom: 1px dashed var(--gray-10);
   margin-bottom: 18px;
}
.bc-lic-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 9px;
}
.bc-lic-list li {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-size: 13.5px;
   color: var(--gray-60);
   line-height: 1.5;
}
.bc-lic-list li i {
   color: var(--red);
   font-size: 11px;
   margin-top: 4px;
   flex-shrink: 0;
}
.bc-lic-list li strong {
   color: var(--dark);
   font-weight: 700;
}

.bc-lic-note {
   margin-top: 32px;
   background: var(--white);
   border: 1px solid var(--gray-10);
   border-radius: var(--r-md);
   padding: 22px 24px;
   display: flex;
   align-items: flex-start;
   gap: 14px;
}
.bc-lic-note-icon {
   width: 36px;
   height: 36px;
   background: var(--red-tint);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--red);
   font-size: 14px;
   flex-shrink: 0;
}
.bc-lic-note p {
   font-size: 13.5px;
   color: var(--gray-60);
   line-height: 1.7;
}
.bc-lic-note strong {
   color: var(--dark);
}

/* ============================================================
       SEC 13 — APPSOURCE ISV ECOSYSTEM
       ============================================================ */
.bc-isv {
   margin-top: 56px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
}
.bc-isv-card {
   background: var(--white);
   border: 1px solid var(--gray-10);
   border-radius: var(--r-md);
   padding: 22px 20px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   transition:
      border-color var(--t-base) var(--ease-out),
      box-shadow var(--t-base) var(--ease-out),
      transform var(--t-base) var(--ease-out);
}
.bc-isv-card:hover {
   border-color: var(--red);
   box-shadow: var(--shadow);
   transform: translateY(-2px);
}
.bc-isv-name {
   font-size: 14.5px;
   font-weight: 800;
   color: var(--dark);
}
.bc-isv-cat {
   font-size: 10.5px;
   font-weight: 600;
   color: var(--red);
   letter-spacing: 0.8px;
   text-transform: uppercase;
}
.bc-isv-desc {
   font-size: 12.5px;
   color: var(--gray-60);
   line-height: 1.55;
}

/* ============================================================
       SEC 14 — PARTNER VETTING CHECKLIST
       ============================================================ */
.bc-vet {
   margin-top: 56px;
   display: grid;
   grid-template-columns: 1.05fr 0.95fr;
   gap: 32px;
}
.bc-vet-list {
   background: var(--white);
   border: 1px solid var(--gray-10);
   border-radius: var(--r-lg);
   padding: 36px 32px;
}
.bc-vet-list-h {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 22px;
   padding-bottom: 18px;
   border-bottom: 1px solid var(--gray-10);
}
.bc-vet-list-icon {
   width: 40px;
   height: 40px;
   border-radius: 11px;
   background: rgba(21, 166, 99, 0.1);
   color: #15a663;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
}
.bc-vet-list-h-text {
   font-size: 17px;
   font-weight: 700;
   color: var(--dark);
   line-height: 1.3;
}
.bc-vet-q {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   padding: 14px 0;
   border-bottom: 1px solid var(--gray-05);
}
.bc-vet-q:last-child {
   border-bottom: none;
   padding-bottom: 0;
}
.bc-vet-q-num {
   font-size: 12px;
   font-weight: 700;
   color: var(--red);
   background: var(--red-tint);
   padding: 4px 9px;
   border-radius: 6px;
   flex-shrink: 0;
   min-width: 28px;
   text-align: center;
}
.bc-vet-q-body {
   font-size: 13.5px;
   color: var(--gray-60);
   line-height: 1.65;
}
.bc-vet-q-body strong {
   color: var(--dark);
   font-weight: 700;
}
.bc-vet-flags {
   background: var(--ink);
   border-radius: var(--r-lg);
   padding: 36px 32px;
   color: #fff;
}
.bc-vet-flags-h {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 22px;
   padding-bottom: 18px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.bc-vet-flags-icon {
   width: 40px;
   height: 40px;
   border-radius: 11px;
   background: rgba(255, 93, 112, 0.15);
   color: #ff5d70;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
}
.bc-vet-flags-h-text {
   font-size: 17px;
   font-weight: 700;
   color: #fff;
   line-height: 1.3;
}
.bc-vet-flag {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 12px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.bc-vet-flag:last-child {
   border-bottom: none;
   padding-bottom: 0;
}
.bc-vet-flag i {
   color: #ff5d70;
   font-size: 13px;
   margin-top: 4px;
   flex-shrink: 0;
}
.bc-vet-flag span {
   font-size: 13.5px;
   color: rgba(255, 255, 255, 0.78);
   line-height: 1.6;
}
.bc-vet-flag strong {
   color: #fff;
   font-weight: 700;
}

/* ============================================================
       SEC 15 — WHY TRANGO TECH (manifesto cards)
       ============================================================ */
.bc-why {
   margin-top: 56px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
}
.bc-why-card {
   background: var(--white);
   border: 1px solid var(--gray-10);
   border-radius: var(--r-lg);
   padding: 30px 28px;
   position: relative;
   transition:
      border-color var(--t-base) var(--ease-out),
      box-shadow var(--t-base) var(--ease-out),
      transform var(--t-base) var(--ease-out);
   overflow: hidden;
}
.bc-why-card::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   height: 3px;
   width: 0;
   background: var(--red);
   transition: width var(--t-slow) var(--ease-out);
}
.bc-why-card:hover {
   border-color: var(--red);
   box-shadow: var(--shadow);
   transform: translateY(-4px);
}
.bc-why-card:hover::after {
   width: 100%;
}
.bc-why-head {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   margin-bottom: 14px;
   padding-bottom: 14px;
   border-bottom: 1px solid var(--gray-10);
}
.bc-why-num {
   font-size: 13px;
   font-weight: 600;
   color: var(--gray-40);
   letter-spacing: 1.2px;
}
.bc-why-stat {
   font-size: 13.5px;
   font-weight: 800;
   color: var(--red);
}
.bc-why-card h3 {
   font-size: 17px;
   font-weight: 700;
   color: var(--dark);
   line-height: 1.3;
   margin-bottom: 10px;
}
.bc-why-card p {
   font-size: 13.5px;
   color: var(--gray-60);
   line-height: 1.7;
}

@media (max-width: 1100px) {
   .bc-lic {
      grid-template-columns: 1fr 1fr;
   }
   .bc-isv {
      grid-template-columns: 1fr 1fr;
   }
   .bc-why {
      grid-template-columns: 1fr 1fr;
   }
}
@media (max-width: 768px) {
   .bc-lic {
      grid-template-columns: 1fr;
   }
   .bc-isv {
      grid-template-columns: 1fr;
   }
   .bc-vet {
      grid-template-columns: 1fr;
   }
   .bc-why {
      grid-template-columns: 1fr;
   }
}

/* ============================================================
       SEC 16 — CASE STUDIES (3 cards with metrics)
       ============================================================ */
    .bc-cases { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .bc-case { background: var(--white); border: 1px solid var(--gray-10); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
    .bc-case:hover { border-color: var(--red); box-shadow: var(--shadow); transform: translateY(-3px); }
    .bc-case-head { padding: 24px 26px 18px; border-bottom: 1px dashed var(--gray-10); }
    .bc-case-tag { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--red); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
    .bc-case-h { font-size: 16px; font-weight: 700; color: var(--dark); line-height: 1.3; margin-bottom: 8px; }
    .bc-case-meta { font-size: 12px; color: var(--gray-40); }
    .bc-case-body { padding: 22px 26px 24px; }
    .bc-case-text { font-size: 13.5px; color: var(--gray-60); line-height: 1.65; margin-bottom: 18px; }
    .bc-case-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 16px; border-top: 1px solid var(--gray-10); }
    .bc-case-metric { text-align: center; }
    .bc-case-metric-v { font-size: 22px; font-weight: 800; color: var(--red); line-height: 1; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
    .bc-case-metric-l { font-size: 10.5px; color: var(--gray-40); font-weight: 600; line-height: 1.35; }

/* ============================================================
       SEC 17 — TESTIMONIALS (1 featured + 2 supporting)
       ============================================================ */
.bc-test {
   margin-top: 56px;
   display: grid;
   grid-template-columns: 1.5fr 1fr;
   gap: 22px;
   align-items: stretch;
}
.bc-test-feat {
   background: linear-gradient(150deg, #1a1a1f 0%, #0e0e10 100%);
   color: #fff;
   border-radius: var(--r-lg);
   padding: 44px 40px;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 340px;
   overflow: hidden;
}
.bc-test-feat::before {
   content: "\201C";
   position: absolute;
   top: 8px;
   right: 32px;
   font-family: Georgia, serif;
   font-size: 180px;
   color: rgba(222, 37, 58, 0.18);
   line-height: 1;
   pointer-events: none;
}
.bc-test-feat-quote {
   font-size: 21px;
   font-weight: 600;
   color: #fff;
   line-height: 1.5;
   letter-spacing: -0.01em;
   margin-bottom: 26px;
   position: relative;
   z-index: 1;
}
.bc-test-feat-quote span.h {
   background: linear-gradient(90deg, var(--red), #ff5d70);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-weight: 700;
}
.bc-test-feat-author {
   display: flex;
   align-items: center;
   gap: 14px;
   padding-top: 22px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.bc-test-feat-photo {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: var(--red);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   color: #fff;
   font-size: 18px;
   flex-shrink: 0;
}
.bc-test-feat-name {
   font-size: 15px;
   font-weight: 800;
   color: #fff;
}
.bc-test-feat-role {
   font-size: 12.5px;
   color: rgba(255, 255, 255, 0.55);
   margin-top: 2px;
}
.bc-test-side {
   display: flex;
   flex-direction: column;
   gap: 22px;
}
.bc-test-card {
   background: var(--white);
   border: 1px solid var(--gray-10);
   border-radius: var(--r-lg);
   padding: 24px;
   flex: 1;
   transition:
      border-color var(--t-base) var(--ease-out),
      box-shadow var(--t-base) var(--ease-out);
}
.bc-test-card:hover {
   border-color: var(--red);
   box-shadow: var(--shadow);
}
.bc-test-card-quote {
   font-size: 14px;
   color: var(--gray-60);
   line-height: 1.65;
   margin-bottom: 16px;
   font-weight: 500;
}
.bc-test-card-author {
   display: flex;
   align-items: center;
   gap: 12px;
   padding-top: 14px;
   border-top: 1px solid var(--gray-10);
}
.bc-test-card-photo {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--gray-05);
   border: 1px solid var(--gray-10);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   color: var(--red);
   font-size: 12.5px;
}
.bc-test-card-name {
   font-size: 13px;
   font-weight: 800;
   color: var(--dark);
}
.bc-test-card-role {
   font-size: 11.5px;
   color: var(--gray-40);
   margin-top: 1px;
}

/* ============================================================
       SEC 18 — POST GO-LIVE SUPPORT TIERS
       ============================================================ */
.bc-supp {
   margin-top: 56px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
}
.bc-supp-card {
   background: var(--white);
   border: 1.5px solid var(--gray-10);
   border-radius: var(--r-lg);
   padding: 28px 26px;
   transition:
      border-color var(--t-base) var(--ease-out),
      box-shadow var(--t-base) var(--ease-out);
   display: flex;
   flex-direction: column;
}
.bc-supp-card:hover {
   border-color: var(--red);
   box-shadow: var(--shadow);
}
.bc-supp-tier {
   font-size: 11.5px;
   font-weight: 600;
   color: var(--red);
   letter-spacing: 1.2px;
   text-transform: uppercase;
   margin-bottom: 8px;
}
.bc-supp-card h3 {
   font-size: 18px;
   font-weight: 700;
   color: var(--dark);
   line-height: 1.3;
   margin-bottom: 18px;
   padding-bottom: 14px;
   border-bottom: 1px solid var(--gray-10);
}
.bc-supp-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
   flex: 1;
}
.bc-supp-list li {
   display: grid;
   grid-template-columns: 110px 1fr;
   gap: 10px;
   align-items: baseline;
   font-size: 13px;
   line-height: 1.5;
}
.bc-supp-list li .k {
   font-size: 11.5px;
   color: var(--gray-40);
   font-weight: 600;
   letter-spacing: 0.4px;
   text-transform: uppercase;
}
.bc-supp-list li .v {
   color: var(--dark);
   font-weight: 700;
}

/* ============================================================
       SEC 19 — FAQ (12 questions, accordion)
       ============================================================ */
.bc-faqs {
   margin-top: 52px;
   max-width: 920px;
   margin-left: auto;
   margin-right: auto;
   display: flex;
   flex-direction: column;
   gap: 12px;
}
.bc-faq {
   background: var(--white);
   border: 1px solid var(--gray-10);
   border-radius: var(--r-md);
   overflow: hidden;
   transition: border-color var(--t-base) var(--ease-out);
}
.bc-faq.open {
   border-color: var(--red);
   box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
}
.bc-faq-q {
   width: 100%;
   text-align: left;
   padding: 22px 26px;
   background: var(--white);
   border: none;
   cursor: pointer;
   font-size: 16px;
   font-weight: 700;
   color: var(--dark);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   transition: background var(--t-base) var(--ease-out);
}
.bc-faq-q:hover {
   background: var(--gray-05);
}
.bc-faq-q i {
   font-size: 13px;
   color: var(--red);
   transition: transform var(--t-base) var(--ease-spring);
   flex-shrink: 0;
}
.bc-faq.open .bc-faq-q i {
   transform: rotate(45deg);
}
.bc-faq-a {
   padding: 0 26px;
   max-height: 0;
   overflow: hidden;
   transition:
      max-height var(--t-slow) var(--ease-out),
      padding var(--t-slow) var(--ease-out);
   font-size: 14.5px;
   color: var(--gray-60);
   line-height: 1.75;
}
.bc-faq.open .bc-faq-a {
   padding: 0 26px 22px;
   max-height: 800px;
}
.bc-faq-a strong {
   color: var(--dark);
}

/* ============================================================
       SEC 20 — FINAL CTA
       ============================================================ */
.bc-final {
   background: var(--ink);
   padding: 100px 0;
   position: relative;
   overflow: hidden;
}
.bc-final::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image:
      linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
   background-size: 40px 40px;
   pointer-events: none;
}
.bc-final::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 1100px;
   height: 600px;
   background: radial-gradient(ellipse, rgba(222, 37, 58, 0.18) 0%, transparent 65%);
   pointer-events: none;
}
.bc-final-inner {
   max-width: 880px;
   margin: 0 auto;
   padding: 0 24px;
   text-align: center;
   position: relative;
   z-index: 1;
}
.bc-final-pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 7px 16px;
   border-radius: 100px;
   font-size: 12.5px;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.7);
   margin-bottom: 22px;
   letter-spacing: 0.8px;
   text-transform: uppercase;
}
.bc-final-pill i {
   color: var(--red);
}
/* Final CTA H2 — matches live page .driving-cta-title: 52 → 45 → 30, weight 700, white, lh 1.15 */
.bc-final h2 {
   font-size: 52px;
   font-weight: 700;
   color: #fcfcfc;
   line-height: 1.15;
   letter-spacing: 0;
   margin-bottom: 20px;
   text-transform: capitalize;
}
@media (max-width: 1024px) {
   .bc-final h2 {
      font-size: 45px;
   }
}
@media (max-width: 640px) {
   .bc-final h2 {
      font-size: 30px;
      line-height: 40px;
   }
}
.bc-final p {
   font-size: 17px;
   color: rgba(255, 255, 255, 0.72);
   line-height: 1.7;
   max-width: 600px;
   margin: 0 auto 36px;
}
.bc-final-ctas {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   flex-wrap: wrap;
   margin-bottom: 32px;
}
.bc-final-trust {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 28px 32px;
   flex-wrap: wrap;
   padding-top: 28px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.bc-final-trust-item {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13.5px;
   color: rgba(255, 255, 255, 0.7);
   font-weight: 500;
}
.bc-final-trust-item i {
   color: #ff8a99;
   font-size: 13px;
}

@media (max-width: 1100px) {
   .bc-cases {
      grid-template-columns: 1fr 1fr 1fr;
   }
   .bc-supp {
      grid-template-columns: 1fr 1fr 1fr;
   }
}
@media (max-width: 900px) {
   .bc-cases {
      grid-template-columns: 1fr;
   }
   .bc-test {
      grid-template-columns: 1fr;
   }
   .bc-test-feat {
      padding: 32px 26px;
      min-height: 0;
   }
   .bc-test-feat-quote {
      font-size: 18px;
   }
   .bc-supp {
      grid-template-columns: 1fr;
   }
   .footer-top {
      grid-template-columns: 1fr 1fr;
      gap: 36px;
   }
}
@media (max-width: 640px) {
   .bc-faq-q {
      font-size: 14.5px;
      padding: 18px 20px;
   }
   .bc-faq.open .bc-faq-a {
      padding: 0 20px 20px;
      max-height: 1200px;
   }
   .bc-faq-a {
      font-size: 13.5px;
   }
   .footer-top {
      grid-template-columns: 1fr;
      gap: 28px;
   }
   .footer-bottom {
      flex-direction: column;
      text-align: center;
   }
}

/* ── FAQ KEY-FACTS BLOCK (AEO citation magnet) ── */
.bc-faq-keyfacts {
   max-width: 920px;
   margin: 48px auto 32px;
   background: var(--white);
   border: 1px solid var(--gray-10);
   border-left: 4px solid var(--red);
   border-radius: var(--r-md);
   padding: 24px 28px;
   box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}
.bc-faq-keyfacts-h {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 11.5px;
   font-weight: 700;
   color: var(--red);
   letter-spacing: 1.4px;
   text-transform: uppercase;
   margin-bottom: 14px;
   padding-bottom: 12px;
   border-bottom: 1px dashed var(--gray-10);
}
.bc-faq-keyfacts-h i {
   font-size: 13px;
}
.bc-faq-keyfacts-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
}
.bc-faq-keyfacts-list li {
   font-size: 14px;
   color: var(--gray-60);
   line-height: 1.65;
   padding-left: 18px;
   position: relative;
}
.bc-faq-keyfacts-list li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 9px;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--red);
}
.bc-faq-keyfacts-list li strong {
   color: var(--dark);
   font-weight: 700;
}

/* ── ADDITIONAL RESPONSIVE FIXES ── */
@media (max-width: 1100px) {
   .bc-supp {
      grid-template-columns: 1fr 1fr;
   }
   .bc-supp-card:last-child {
      grid-column: 1 / -1;
      max-width: 540px;
      margin: 0 auto;
   }
}
@media (max-width: 900px) {
   .bc-vs {
      font-size: 11.5px;
   }
   .bc-vs thead th {
      padding: 16px 10px 12px;
      font-size: 11.5px;
   }
   .bc-vs tbody td {
      padding: 12px 10px;
      font-size: 12px;
   }
   .bc-faq-keyfacts {
      padding: 20px 22px;
      margin: 36px auto 24px;
   }
}

@media (max-width: 767px) {
	.bc-supp {
      grid-template-columns: 1fr;
   }
	
   .bc-supp-card:last-child {
        grid-column: unset;
        max-width: unset;
        margin: unset;
    }
}

@media (max-width: 480px) {
   .bc-hero {
      padding: 48px 0 36px;
   }
   .bc-hero-pill {
      padding: 5px 14px 5px 7px;
   }
   .bc-hero-pill-dot {
      width: 22px;
      height: 22px;
   }
   .bc-hero-pill-text {
      font-size: 11px;
      letter-spacing: 0.6px;
   }
   .bc-hero-ctas {
      gap: 10px;
      flex-direction: column;
      align-items: stretch;
   }
   .bc-hero-ctas .btn-red,
   .bc-hero-ctas .btn-ghost {
      justify-content: center;
      width: 100%;
   }
   .sec-white,
   .sec-gray,
   .sec-dark {
      padding: 56px 0;
   }
   .sec-inner {
      padding: 0 18px;
   }
   .bc-faq-keyfacts-list li {
      font-size: 13.5px;
   }
   .bc-faq-keyfacts {
      padding: 18px 18px;
   }
}