/* =========================================================
   YUBAO — SELECTED GEARBOX PROJECTS
========================================================= */

#yb-gearbox-module{
  --yb-blue:#0739AC;
  --yb-dark:#061126;
  --yb-text:#4B5A73;
  --yb-border:#D6E5F3;
  --yb-soft:#F5F9FD;

  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  padding:68px 0;
  background:#fff;

  box-sizing:border-box;
  overflow:hidden;
}

#yb-gearbox-module *,
#yb-gearbox-module *::before,
#yb-gearbox-module *::after{
  box-sizing:border-box;
}

#yb-gearbox-module .yb-gearbox-wrap{
  width:100%;
  max-width:1600px;
  margin:0 auto;
  padding:0 48px;
}

/* =========================================================
   Main panel
========================================================= */

#yb-gearbox-module .yb-gearbox-panel{
  position:relative;

  display:grid;
  grid-template-columns:minmax(340px,.72fr) minmax(0,1.28fr);
  gap:48px;
  align-items:center;

  padding:38px 42px;

  background:
    radial-gradient(
      circle at 82% 16%,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.55) 28%,
      transparent 56%
    ),
    linear-gradient(115deg,#F5F9FD 0%,#EDF5FC 100%);

  border:1px solid #E1ECF6;
  border-radius:12px;

  box-shadow:0 18px 46px rgba(18,40,70,.08);
  overflow:hidden;
}

/* subtle technical grid */
#yb-gearbox-module .yb-gearbox-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    linear-gradient(rgba(7,57,172,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(7,57,172,.035) 1px,transparent 1px);

  background-size:46px 46px;
  opacity:.38;
}

#yb-gearbox-module .yb-gearbox-left,
#yb-gearbox-module .yb-gearbox-right{
  position:relative;
  z-index:1;
  min-width:0;
}

/* =========================================================
   Left content
========================================================= */


/* Section label: supports scanning without changing heading hierarchy */
#yb-gearbox-module .yb-section-kicker{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  margin:0 0 11px;
  font-family:'Poppins-Bold','Poppins',Arial,sans-serif;
  font-size:13px;
  line-height:1.2;
  letter-spacing:3.2px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--yb-blue);
}

#yb-gearbox-module h2{
  max-width:520px;
  margin:0 0 17px;

  font-family:'Poppins-Bold','Poppins',Arial,sans-serif;
  font-size:36px;
  line-height:1.18;
  letter-spacing:-.55px;
  font-weight:700;

  color:var(--yb-dark);
}

#yb-gearbox-module .yb-gearbox-desc{
  max-width:520px;
  margin:0 0 22px;

  font-family:'Poppins-Regular','Poppins',Arial,sans-serif;
  font-size:16px;
  line-height:1.65;

  color:var(--yb-text);
}

/* =========================================================
   Capability list
========================================================= */

#yb-gearbox-module .yb-gearbox-points{
  display:grid;
  gap:11px;

  max-width:520px;
  margin:0 0 24px;
  padding:0;

  list-style:none;
}

#yb-gearbox-module .yb-gearbox-points li{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:11px;
  align-items:center;

  margin:0;

  font-family:'Poppins-Regular','Poppins',Arial,sans-serif;
  font-size:14.5px;
  line-height:1.45;

  color:#263650;
}

#yb-gearbox-module .yb-point-check{
  width:20px;
  height:20px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  background:var(--yb-blue);
  color:#fff;

  font-family:Arial,sans-serif;
  font-size:12px;
  line-height:1;
  font-weight:700;
}

/* =========================================================
   CTA
========================================================= */

#yb-gearbox-module .yb-gearbox-btn{
  width:max-content;
  min-width:326px;
  height:54px;
  padding:0 27px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;

  color:#fff!important;
  background:var(--yb-blue);
  border:2px solid var(--yb-blue);
  border-radius:5px;

  text-decoration:none;

  font-family:'Poppins-Bold','Poppins',Arial,sans-serif;
  font-size:15px;
  line-height:1;
  font-weight:700;

  box-shadow:0 12px 28px rgba(7,57,172,.21);

  transition:
    color .28s ease,
    background .28s ease,
    transform .28s ease,
    box-shadow .28s ease;
}

#yb-gearbox-module .yb-gearbox-btn:hover{
  color:var(--yb-blue)!important;
  background:transparent;

  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(7,57,172,.13);
}

#yb-gearbox-module .yb-gearbox-btn span{
  color:inherit;
  font-size:21px;
  line-height:1;

  transition:transform .28s ease;
}

#yb-gearbox-module .yb-gearbox-btn:hover span{
  transform:translateX(6px);
}

/* =========================================================
   Right exploded-view area
========================================================= */

#yb-gearbox-module .yb-exploded-view{
  position:relative;
  min-width:0;
  padding-top:2px;
}

/* Top labels */
#yb-gearbox-module .yb-exploded-labels{
  position:relative;
  z-index:3;

  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;

  margin:0;
  padding:0 8px;
}

#yb-gearbox-module .yb-exploded-label{
  position:relative;
  min-width:0;
  min-height:70px;
  padding:0 3px 43px;

  text-align:center;
}

#yb-gearbox-module .yb-exploded-label b{
  display:block;

  font-family:'Poppins-Bold','Poppins',Arial,sans-serif;
  font-size:13.5px;
  line-height:1.25;
  font-weight:700;

  color:var(--yb-dark);
}

/* blue guide line */
#yb-gearbox-module .yb-exploded-label::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:6px;

  width:1px;
  height:31px;

  border-left:2px dashed rgba(7,57,172,.56);
  transform:translateX(-50%);
}

#yb-gearbox-module .yb-exploded-label::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:3px;

  width:6px;
  height:6px;

  border-radius:50%;
  background:var(--yb-blue);
  transform:translateX(-50%);
}

/* Main image */
#yb-gearbox-module .yb-gearbox-image{
  position:relative;
  z-index:2;

  width:100%;
  height:236px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-top:-8px;
}

#yb-gearbox-module .yb-gearbox-image img{
  display:block;
  width:100%;
  height:100%;

  object-fit:contain;
  object-position:center;
}

/* =========================================================
   Project-scope note
========================================================= */

#yb-gearbox-module .yb-gearbox-note{
  max-width:690px;
  min-height:66px;
  margin:10px 0 0;
  padding:14px 20px;

  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:14px;
  align-items:center;

  background:rgba(255,255,255,.88);
  border:1px solid #DDEAF5;
  border-radius:7px;

  box-shadow:0 7px 18px rgba(18,40,70,.04);
}

#yb-gearbox-module .yb-note-icon{
  width:34px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:2px solid var(--yb-blue);
  border-radius:50%;

  color:var(--yb-blue);

  font-family:'Poppins-Bold','Poppins',Arial,sans-serif;
  font-size:18px;
  line-height:1;
  font-weight:700;
}

#yb-gearbox-module .yb-gearbox-note p{
  margin:0;

  font-family:'Poppins-Regular','Poppins',Arial,sans-serif;
  font-size:13.5px;
  line-height:1.5;

  color:var(--yb-text);
}

#yb-gearbox-module .yb-gearbox-note strong{
  font-family:'Poppins-Bold','Poppins',Arial,sans-serif;
  font-weight:700;
  color:var(--yb-dark);
}

/* =========================================================
   Medium desktop
========================================================= */

@media(max-width:1360px){

  #yb-gearbox-module .yb-gearbox-wrap{
    padding:0 36px;
  }

  #yb-gearbox-module .yb-gearbox-panel{
    grid-template-columns:minmax(310px,.68fr) minmax(0,1.32fr);
    gap:34px;
    padding:34px;
  }

  #yb-gearbox-module .yb-gearbox-image{
    height:218px;
  }

  #yb-gearbox-module .yb-exploded-label b{
    font-size:12.5px;
  }

  #yb-gearbox-module .yb-gearbox-note{
    max-width:620px;
  }
}

/* =========================================================
   Tablet
========================================================= */

@media(max-width:1100px){

  #yb-gearbox-module{
    padding:62px 0;
  }

  #yb-gearbox-module .yb-gearbox-wrap{
    padding:0 30px;
  }

  #yb-gearbox-module .yb-gearbox-panel{
    grid-template-columns:1fr;
    gap:36px;
    padding:36px;
  }

  #yb-gearbox-module .yb-gearbox-desc,
  #yb-gearbox-module .yb-gearbox-points{
    max-width:760px;
  }

  #yb-gearbox-module .yb-gearbox-image{
    height:290px;
  }

  #yb-gearbox-module .yb-gearbox-note{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* =========================================================
   Mobile
========================================================= */

@media(max-width:768px){

  #yb-gearbox-module .yb-section-kicker{
    margin-bottom:9px;
    font-size:12px;
    letter-spacing:2.5px;
  }



  #yb-gearbox-module{
    padding:50px 0;
  }

  #yb-gearbox-module .yb-gearbox-wrap{
    padding:0 16px;
  }

  #yb-gearbox-module .yb-gearbox-panel{
    gap:30px;
    padding:27px 18px;
    border-radius:9px;
  }

  #yb-gearbox-module h2{
    font-size:30px;
    line-height:1.22;
  }

  #yb-gearbox-module .yb-gearbox-desc{
    font-size:15px;
  }

  #yb-gearbox-module .yb-gearbox-points li{
    font-size:14px;
  }

  #yb-gearbox-module .yb-gearbox-btn{
    width:100%;
    min-width:0;
    padding:0 18px;
    font-size:14px;
  }

  /* Labels become compact information cards */
  #yb-gearbox-module .yb-exploded-labels{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding:0;
  }

  #yb-gearbox-module .yb-exploded-label{
    min-height:auto;
    padding:10px 9px;

    background:rgba(255,255,255,.78);
    border:1px solid #D9E7F3;
    border-radius:5px;
  }

  #yb-gearbox-module .yb-exploded-label:nth-child(5){
    grid-column:1 / -1;
  }

  #yb-gearbox-module .yb-exploded-label::before,
  #yb-gearbox-module .yb-exploded-label::after{
    display:none;
  }

  #yb-gearbox-module .yb-exploded-label b{
    font-size:12.5px;
  }

  #yb-gearbox-module .yb-gearbox-image{
    height:215px;
    margin-top:8px;
  }

  #yb-gearbox-module .yb-gearbox-note{
    max-width:none;
    margin-top:12px;
    padding:13px 14px;
  }

  #yb-gearbox-module .yb-gearbox-note p{
    font-size:13px;
  }
}

/* =========================================================
   Narrow mobile
========================================================= */

@media(max-width:480px){

  #yb-gearbox-module .yb-exploded-labels{
    grid-template-columns:1fr;
  }

  #yb-gearbox-module .yb-exploded-label:nth-child(5){
    grid-column:auto;
  }

  #yb-gearbox-module .yb-gearbox-image{
    height:185px;
  }

  #yb-gearbox-module .yb-gearbox-note{
    grid-template-columns:32px minmax(0,1fr);
    gap:11px;
  }

  #yb-gearbox-module .yb-note-icon{
    width:30px;
    height:30px;
    font-size:16px;
  }
}