.header-section{
  width: 100%;
  height: 420px;
  background-image: url('/wp-content/themes/Archive/assets/images/blue-orange-purple-black-grainy-gradient-dark-nois.png');
  background-size: cover;
  background-position: center;
  overflow: hidden !important;
}

.about-section{
  background:#fff;
  padding: 72px 20px;       /* generous vertical spacing */
}

.about-wrap{
  max-width: 980px;         /* matches the feel of your screenshot */
  margin: 0 auto;
  text-align: center;
}

.about-wrap h2{
  margin: 0 0 18px;
  font-size: clamp(20px, 2.6vw, 25px);
  line-height: 1.2;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--tb-text);
  font-weight: 500;
}

.trade-bridge-title{
  font-weight: 500 !important;
}

.about-wrap p{
  margin: 0;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.75;
  color: var(--tb-subtext);
}

.about-wrap p strong{
  color: var(--tb-text);
  font-weight: 800;
}

/* optional: subtle divider lines like a card without a box */
.about-section{
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}


/* Our Mission section */
:root{
  --tb-bg-soft: #eef3f5;         /* light card background from mock */
  --tb-text: #2b2f33;
  --tb-sub: #5a6168;
  --tb-accent: #00C2A8;          /* TradeBridge teal */
  --tb-accent-dark: #00a791;
}

.mission-section{
  padding: 48px 20px;            /* page gutters */
  background: #f7f9fa;           /* page strip behind the card (optional) */
}

.mission-card{
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 10px;
  padding: 48px;
}

.mission-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr; /* text heavier, image lighter */
  gap: 40px;
  align-items: center;
}

.mission-copy h2{
  margin: 0 0 16px;
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.2;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--tb-text);
  font-weight: 500;
}

.mission-copy p{
  margin: 0 0 14px;
  color: var(--tb-sub);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.75;
}

.mission-copy ul{
  margin: 0 0 24px 1.2rem;
  color: var(--tb-sub);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
}

.btn-verify{
  display: inline-block;
  background: var(--tb-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border-radius: 8px;
  padding: 12px 18px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), inset 0 -2px 0 rgba(0,0,0,.08);
  transition: transform .06s ease, background .2s ease;
}
.btn-verify:hover{ background: var(--tb-accent-dark); }
.btn-verify:active{ transform: translateY(1px); }

.mission-media{
  margin: 0;
}
.mission-media img{
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 980px){
  .mission-card{ padding: 36px; }
  .mission-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .mission-media{
    order: -1; /* put image on top on mobile if you prefer; remove to keep below */
  }
}
@media (max-width: 520px){
  .mission-card{ padding: 24px; }
  .btn-verify{ width: 100%; text-align: center; }
}



/* 

What tradebridge enables

*/

:root{
  --tb-text: #2b2f33;
  --tb-sub: #5a6168;
  --tb-accent: #00C2A8;   /* teal */
  --card-bg: #fff;
  --card-shadow: 0 10px 30px rgba(2,10,20,.06), 0 1px 0 rgba(0,0,0,.04);
}

.enables-section{
  background:#fff;
  padding: 64px 20px 56px;
}
.enables-wrap{
  max-width: 1200px;
  margin: 0 auto;
}

.enables-head{
  text-align:center;
  margin-bottom: 28px;
}
.enables-head h2{
  margin:0 0 10px;
  font-size: clamp(20px, 2.4vw, 25px);
  text-transform: uppercase;
  letter-spacing:.6px;
  color: var(--tb-text);
  font-weight: 500;
}
.enables-head p{
  max-width: 600px;
  align-self: center;
  margin:0 auto;
  color: var(--tb-sub);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.7;
}

/* Grid */
.enables-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 28px;
}

/* Cards */
.feature-card{
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 28px 28px 26px;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease;
  min-height: 200px;
}
.feature-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(2,10,20,.10), 0 1px 0 rgba(0,0,0,.04);
}

.feature-icon{
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin: 2px auto 12px;
  display:block;
  filter: grayscale(100%) contrast(1.1);   /* subtle, like mock */
}

.feature-card h3{
  margin: 0 0 8px;
  font-size: clamp(18px, 1.6vw, 20px);
  color: var(--tb-text);
  font-weight: 600;
}
.feature-card p{
  margin:0;
  color: var(--tb-sub);
  font-size: clamp(13px, 1.1vw, 14px);
  line-height: 1.7;
}

/* CTA */
.enables-cta{
  text-align:center;
  margin-top: 22px;
}
.btn-primary{
  display:inline-block;
  background: var(--tb-accent);
  color:#fff;
  text-decoration:none;
  font-weight: 500;
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), inset 0 -2px 0 rgba(0,0,0,.08);
  transition: transform .06s ease, filter .2s ease;
}
.btn-primary:hover{ filter: brightness(.95); }
.btn-primary:active{ transform: translateY(1px); }

/* Responsive */
@media (max-width: 900px){
  .enables-grid{ grid-template-columns: 1fr; }
}


/* 

Why tradebridge
? ############################################

*/

:root{
  --tb-text:#2b2f33;
  --tb-sub:#5a6168;
  --tb-accent:#00C2A8;
  --panel:#eef3f5;             /* soft section background */
}

.why-section{
  background: var(--panel);
  padding: 64px 20px;
}
.why-wrap{
  max-width: 1200px;
  margin: 0 auto;
}
.why-grid{
  display: grid;
  grid-template-columns: .9fr 1.1fr;  /* bigger visual on the left */
  gap: 48px;
  align-items: center;
}

/* IMAGE with subtle stacked look */
.why-media{
  margin:0;
  position: relative;
  isolation: isolate;
}
.why-media::before{
  /* faint card peeking behind the main mock */
  content:"";
  position:absolute;
  left: 24px;
  top: -24px;
  width: 86%;
  height: 78%;
  /* background:#fff; */
  border-radius: 18px;
  /* box-shadow: 0 18px 36px rgba(2,10,20,.10); */
  z-index: -1;                 /* behind the image */
  opacity:.7;
  filter: blur(.2px);
}
.why-media img{
  display:block;
  width: 90%;
  height: auto;
  border-radius: 18px;
  margin: 0 auto;
}

/* COPY */
.why-copy h2{
  margin:0 0 14px;
  font-size: clamp(20px, 2.4vw, 25px);
  text-transform: uppercase;
  letter-spacing:.6px;
  color: var(--tb-text);
  font-weight: 500;
}
.why-copy p{
  margin:0 0 18px;
  color: var(--tb-sub);
  font-size: clamp(14px, 1.2vw, 15px);
  line-height:1.75;
}

/* CTA */
.btn-primary{
  display:inline-block;
  background: var(--tb-accent);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  padding:12px 18px;
  border-radius:10px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), inset 0 -2px 0 rgba(0,0,0,.08);
  transition: transform .06s ease, filter .2s ease;
}
.btn-primary:hover{ filter: brightness(.95); }
.btn-primary:active{ transform: translateY(1px); }

/* Responsive */
@media (max-width: 980px){
  .why-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .why-media::before{
    left: 16px; top: -16px; width: 88%; height: 75%;
  }
}
@media (max-width: 520px){
  .why-section{ padding: 44px 16px; }
  .btn-primary{ width:100%; text-align:center; }
}


/* 

Our Vision
? ##########################################################

*/

:root{
  --tb-teal:#00C2A8;
}

/* Full-width band with gradient + subtle noise */
.vision-section{
  position: relative;
  padding: 72px 20px;                /* vertical rhythm */
  color:#fff;
  text-align:center;
  /* gradient similar to the screenshot; tweak stops to match your asset */
  background-image: url('/wp-content/themes/Archive/assets/images/gray-blue-white-grainy-gradient-background-poster.png');

  overflow:hidden;
}

.vision-inner{
  max-width: 980px;
  margin: 0 auto;
  position: relative;                          /* keep above ::before */
  z-index: 1;
}

.vision-inner h2{
  margin:0 0 14px;
  font-size: clamp(20px, 2.6vw, 25px);
  text-transform: uppercase;
  letter-spacing:.6px;
  font-weight:500;
}

.vision-inner p{
  margin:0 0 22px;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.75;
  color: rgba(255,255,255,.92);
}

/* CTA */
.btn-vision{
  display:inline-block;
  background: var(--tb-teal);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  padding:12px 18px;
  border-radius:12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), inset 0 -2px 0 rgba(0,0,0,.12);
  transition: transform .06s ease, filter .2s ease;
}
.btn-vision:hover{ filter:brightness(.95); }
.btn-vision:active{ transform: translateY(1px); }

/* Responsive tightening */
@media (max-width: 520px){
  .vision-section{ padding: 56px 16px; }
  .btn-vision{ width:100%; text-align:center; }
}


/* 

Looking ahead
? #################################################

*/

:root{
  --tb-panel:#eef3f5;
  --tb-text:#2b2f33;
  --tb-sub:#5a6168;
  --tb-teal:#00C2A8;
  --tb-teal-dark:#00a791;
}

.ahead-section{
  padding: 30px 20px;
  background:#f7f9fa;                 /* outer strip like the mock */
}

.ahead-card{
  max-width: 1200px;
  margin: 0 auto;
  /* background: var(--tb-panel); */
  border-radius: 10px;
  /* box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset; */
  padding: 20px;
}

.ahead-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr; /* text heavier than image */
  gap: 32px;
  align-items: center;
}

.ahead-copy h2{
  margin:0 0 14px;
  font-size: clamp(20px, 2.4vw, 25px);
  text-transform: uppercase;
  letter-spacing:.6px;
  font-weight: 500;
  color: var(--tb-text);
}
.ahead-copy p{
  margin: 0 0 10px;
  color: var(--tb-sub);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.75;
}
.ahead-copy ul{
  margin: 0 0 22px 1.2rem;
  color: var(--tb-sub);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.7;

  padding-left: 0;
  list-style-position: inside;
}



.btn-verify{
  display:inline-block;
  background: var(--tb-teal);
  color:#fff;
  text-decoration:none;
  font-weight: 700;
  padding:12px 18px;
  border-radius:10px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), inset 0 -2px 0 rgba(0,0,0,.08);
  transition: transform .06s ease, background .2s ease;
}
.btn-verify:hover{ background: var(--tb-teal-dark); }
.btn-verify:active{ transform: translateY(1px); }

.ahead-media{
  margin:0;
}
.ahead-media img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius: 16px;
}

/* Responsive */
@media (max-width: 980px){
  .ahead-card{ padding: 32px; }
  .ahead-grid{ grid-template-columns: 1fr; gap: 24px; }
  .ahead-media{ order: 2; } /* keep copy first on mobile */
}
@media (max-width: 520px){
  .ahead-card{ padding: 22px; }
  .btn-verify{ width:100%; text-align:center; }
}




/* 
Verification section
? ####################################################################################
*/

/* ===== Static Process Display (no state) ===== */
/* =========================================================
   TradeBridge — Verification Badges (static, no status)
   v3 — clean bubbles, rail below labels, crisp typography
   ========================================================= */
:root{
  --tb-text:#2b2f33;
  --tb-sub:#5a6168;
  --tb-accent:#00C2A8;
  --tb-accent-dark:#00a791;
  --tb-rail:#f6f6f6;
}

.status-section{ background:#fff; padding:56px 20px 28px; }
.status-wrap{ max-width:1200px; margin:0 auto; }
.status-head{ text-align:center; margin-bottom:22px; }
.status-head h2{
  margin:0 0 6px;
  font-size:clamp(20px,2.3vw,28px);
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--tb-text);
  font-weight:600;
}
.status-sub{ margin:0; color:var(--tb-sub); font-size:clamp(13px,1.1vw,15px); }

/* ===== Layout */
.badges-progress{
  --step-size:64px;
  --gap:18px;
  --rail-h:6px;

  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,3vw,40px);
  align-items:start;
  list-style:none;
  margin:0 auto;
  padding:28px 10px 0;
  position:relative;
}

/* Neutral rail centered under icons, safely BELOW labels */
.badges-progress::before{
  content:"";
  position:absolute;
  left:calc(var(--step-size)/2);
  right:calc(var(--step-size)/2);
  top:calc(var(--step-size)/2 + 32px); /* lower than before */
  height:var(--rail-h);
  background:var(--tb-rail);
  border-radius:var(--rail-h);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
  z-index:0;
}

/* Step row */
.badge-step{
  position:relative;
  z-index:1; /* above rail */
  display:grid;
  grid-template-columns:var(--step-size) 1fr;
  gap:var(--gap);
  align-items:center;
}

/* Anchor dot that sits on the rail */
.badge-dot{
  position:absolute;
  left:calc(var(--step-size)/2 - 7px);
  top:calc(var(--step-size)/2 + 16px - 7px); /* match rail position */
  width:14px; height:14px; border-radius:50%;
  background:#cfd9df;
  box-shadow:0 0 0 5px #fff;
  z-index:1;
  display: none;
}

/* -------- Icon bubble + SVG (no gray box) -------- */
.badge-icon-circle{
  width:var(--step-size);
  height:var(--step-size);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff; /* pure white bubble */
  box-shadow:
    0 22px 44px rgba(0,194,168,.18),  /* soft teal glow */
    0 6px 18px rgba(2,10,20,.08),     /* depth */
    inset 0 1px 0 rgba(255,255,255,.9);/* glassy top line */
}
.badge-svg{
  width:44px; height:44px;
  color:var(--tb-accent);            /* line icons use currentColor */
  filter:drop-shadow(0 3px 6px rgba(0,194,168,.22));
}
.badge-svg *{ fill:none; }           /* guarantee no fills sneak in */

/* In case legacy .badge-icon existed (square look), neutralize it */
.badge-icon{ background:transparent; box-shadow:none; padding:0; }

/* -------- Labels (always on top of rail) -------- */
.badge-meta{ margin-top:10px; position:relative; z-index:2; }
.badge-meta .badge-title{
  display:block;
  font-weight:800;
  color:var(--tb-text);
  font-size:clamp(14px,1.2vw,16px);
  letter-spacing:.2px;
}
.badge-meta .badge-desc{
  display:block;
  color:var(--tb-sub);
  font-size:clamp(12px,1vw,14px);
  margin-top:4px;
}

/* -------- CTA -------- */
.status-cta{ text-align:center; margin-top:24px; }
.status-cta .btn-primary{
  display:inline-block;
  background:linear-gradient(180deg, var(--tb-accent), var(--tb-accent-dark));
  color:#fff; text-decoration:none; font-weight:700;
  padding:12px 22px; border-radius:12px;
  box-shadow:0 10px 24px rgba(0,194,168,.22);
  transition:transform .06s ease, filter .2s ease;
}
.status-cta .btn-primary:hover{ filter:brightness(.96); }
.status-cta .btn-primary:active{ transform:translateY(1px); }

/* ===== Responsive */
@media (max-width: 960px){
  .badges-progress{ --step-size:56px; }
  .badge-svg{ width:40px; height:40px; }
}
@media (max-width: 820px){
  .badges-progress{
    grid-template-columns:1fr 1fr;
    row-gap:28px;
  }
  /* hide long rail/dots on small screens to avoid collisions */
  .badges-progress::before,
  .badge-dot{ display:none; }
  .badge-meta{ margin-top:8px; }
}
@media (max-width: 520px){
  .status-section{ padding:44px 16px 18px; }
  .badge-meta .badge-desc{ display:none; } /* compact labels */
}