.tjep-ai-section {
  --bg: transparent;
  --card: #ffffff;
  --green: #28a745;
  --green-soft: rgba(29,158,117,.12);
  --orange: #EF9F27;

  --ink: #292929;
  --ink-dim: #626262;
  --line: #e4e4e4;

  margin:0 auto;
  padding:96px 32px 110px;

  font-family:'Inter',sans-serif;
  color:var(--ink);
}


/* Intro */

.tjep-ai-section .eyebrow{
  display:flex;
  align-items:center;
  gap:10px;

  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green);
  font-weight:600;
  margin-bottom:22px;
}

.tjep-ai-section .eyebrow:before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px var(--green-soft);
}


.tjep-ai-section h1{
  font-family:'Fraunces',serif;
  font-weight:500;

  font-size:clamp(34px,5vw,54px);
  line-height:1.08;
  letter-spacing:-.01em;

  color:var(--ink);

  margin:0 0 28px;
  max-width:25ch;
}


.tjep-ai-section h1 em{
  color:var(--green);
}


.tjep-ai-section .lede{
  font-size:19px;
  line-height:1.6;
  color:var(--ink-dim);

  max-width:54ch;
  margin-bottom:40px;
}


.tjep-ai-section .lede strong{
  color:var(--ink);
}


/* Prijs */

.tjep-ai-section .price-row{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;

  margin-bottom:88px;
}


.tjep-ai-section .price-badge{
  position:relative;

  display:inline-flex;
  align-items:baseline;
  gap:6px;

  padding:14px 26px 14px 22px;

  font-family:'Fraunces',serif;
}


.tjep-ai-section .price-badge .from{
  font-family:'Inter',sans-serif;

  font-size:13px;
  font-weight:600;

  text-transform:uppercase;
  letter-spacing:.08em;

  color:var(--orange);
}


.tjep-ai-section .price-badge .amount{
  font-size:40px;
  font-weight:600;
}


.tjep-ai-section .price-badge .unit{
  font-family:'Inter',sans-serif;

  font-size:15px;
  color:var(--ink-dim);
}


.tjep-ai-section .price-badge svg{
  position:absolute;

  inset:-14px -10px -10px -14px;

  width:calc(100% + 24px);
  height:calc(100% + 24px);
}


.tjep-ai-section .price-badge path{
  fill:none;
  stroke:var(--orange);

  stroke-width:2.5;
  stroke-linecap:round;
}


.tjep-ai-section .price-note{
  font-size:14.5px;
  color:var(--ink-dim);

  max-width:22ch;
}


/* Label */

.tjep-ai-section .section-label{
  display:flex;
  align-items:center;

  gap:16px;

  margin-bottom:44px;
}


.tjep-ai-section .section-label span{

  font-size:13px;
  font-weight:600;

  letter-spacing:.1em;
  text-transform:uppercase;

  color:var(--ink-dim);
}


.tjep-ai-section .section-label .line{

  height:1px;
  width:100%;

  background:var(--line);

}


/* Cards */

.tjep-ai-section .agent-grid{

  display:grid;

  grid-template-columns:repeat(5,1fr);

  gap:1px;

  background:var(--line);

  border:1px solid var(--line);

  border-radius:18px;

  overflow:hidden;

}


.tjep-ai-section .agent-tile{

  background:var(--card);

  padding:34px 20px 28px;

  display:flex;

  flex-direction:column;

  align-items:center;

  text-align:center;

  gap:16px;

  transition:.25s ease;

}


.tjep-ai-section .agent-tile:hover{

  background:#f6faf8;

}


.tjep-ai-section .agent-tile-icon{

  width:52px;
  height:52px;

  display:flex;

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

  color:var(--ink);

}


.tjep-ai-section .agent-tile-icon svg{

  width:100%;
  height:100%;

  stroke:currentColor;

  transition:.25s ease;

}


.tjep-ai-section .agent-tile:hover .agent-tile-icon{

  color:var(--green);

}


.tjep-ai-section .agent-tile-label{

  font-size:14px;

  font-weight:600;

  color:var(--ink);

}



/* Responsive */

@media(max-width:820px){

  .tjep-ai-section .agent-grid{

    grid-template-columns:repeat(2,1fr);

  }

}


@media(max-width:480px){

  .tjep-ai-section{

    padding:64px 20px 80px;

  }


  .tjep-ai-section .price-row{

    flex-direction:column;

    align-items:flex-start;

  }

}