/* HUMANBOTS FOR AI & LLMS STYLES (loads after global.css). No page JavaScript needed. */


/* =========================================================
   RESET / VARIABLES
========================================================= */

#humanbots-llm,
#humanbots-llm * {
  box-sizing: border-box;
}

#humanbots-llm {

  --orange: #ff4d16;

  --black: #000000;
  --black-soft: #050505;
  --card: #090909;
  --card-light: #0c0c0c;

  --white: #ffffff;
  --text: #c7c7c7;
  --muted: #7c7c7c;

  --line: #1c1c1c;
  --line-light: #292929;

  width: 100%;

  background: var(--black);

  color: var(--white);

  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  font-family: var(--font-body);

  /* clip (not hidden) so the sticky headings still stick */
  overflow: hidden;
  overflow: clip;
}

#humanbots-llm a {
  color: inherit;
}

#humanbots-llm strong {
  color: #fff;
}


/* =========================================================
   GLOBAL CONTAINER
========================================================= */

#humanbots-llm .hb-container {

  width: min(
    1180px,
    calc(100% - 40px)
  );

  margin: 0 auto;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

#humanbots-llm h1,
#humanbots-llm h2,
#humanbots-llm h3,
#humanbots-llm p {
  margin-top: 0;
}

#humanbots-llm h1,
#humanbots-llm h2,
#humanbots-llm h3 {
  color: #fff;
}

#humanbots-llm .hb-label {

  display: flex;

  align-items: center;

  gap: 10px;

  color: var(--orange);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.7px;

  text-transform: uppercase;
}

#humanbots-llm .hb-label::before {

  content: "";

  flex: 0 0 26px;

  width: 26px;

  height: 1px;

  background: var(--orange);
}


/* =========================================================
   HERO
========================================================= */

#humanbots-llm .hb-hero {

  padding:

    clamp(165px, 14vw, 210px)

    0

    clamp(75px, 8vw, 110px);
}

#humanbots-llm .hb-hero-inner {

  max-width: 1040px;
}

#humanbots-llm .hb-hero h1 {

  max-width: 1000px;

  margin:

    20px
    0
    28px;

  font-size:
    clamp(48px, 7vw, 94px);

  line-height: .96;

  letter-spacing:
    clamp(-5px, -.055em, -2px);

  font-weight: 600;
}

#humanbots-llm .hb-hero h1 span {
  color: var(--orange);
}

#humanbots-llm .hb-hero-lead {

  max-width: 830px;

  margin: 0;

  color: var(--text);

  font-size:
    clamp(17px, 1.7vw, 21px);

  line-height: 1.75;
}

#humanbots-llm .hb-hero-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 40px;
}

#humanbots-llm .hb-meta-item {

  padding: 9px 13px;

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

  border-radius: 100px;

  color: #999;

  background: #050505;

  font-size: 10px;

  letter-spacing: .5px;

  text-transform: uppercase;
}


/* =========================================================
   QUICK DEFINITION
========================================================= */

#humanbots-llm .hb-definition-section {

  padding-bottom: 100px;
}

#humanbots-llm .hb-definition-card {

  position: relative;

  padding:
    clamp(28px, 5vw, 55px);

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

  border-radius: 20px;

  background:

    radial-gradient(
      circle at top right,
      rgba(255,77,22,.08),
      transparent 32%
    ),

    var(--card);
}

#humanbots-llm .hb-definition-card::before {

  content: "";

  position: absolute;

  top: -1px;

  left: 40px;

  width: 80px;

  height: 2px;

  background: var(--orange);
}

#humanbots-llm .hb-definition-mini {

  margin-bottom: 17px;

  color: var(--orange);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.6px;

  text-transform: uppercase;
}

#humanbots-llm .hb-definition-card p {

  max-width: 980px;

  margin: 0;

  color: #eeeeee;

  font-size:
    clamp(21px, 2.8vw, 34px);

  line-height: 1.48;

  letter-spacing: -.8px;
}


/* =========================================================
   QUICK FACTS
========================================================= */

#humanbots-llm .hb-facts-section {

  padding:

    90px

    0;

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

#humanbots-llm .hb-section-intro {

  display: grid;

  grid-template-columns:
    .75fr
    1.25fr;

  gap: 70px;

  margin-bottom: 55px;
}

#humanbots-llm .hb-section-title h2 {

  max-width: 510px;

  margin: 14px 0 0;

  font-size:
    clamp(36px, 4.7vw, 62px);

  line-height: 1;

  letter-spacing: -2.8px;

  font-weight: 600;
}

#humanbots-llm .hb-section-copy {

  align-self: end;

  max-width: 620px;

  color: var(--text);

  font-size: 15px;

  line-height: 1.8;
}

#humanbots-llm .hb-facts {

  margin: 0;

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

#humanbots-llm .hb-fact {

  display: grid;

  grid-template-columns:
    240px
    1fr;

  gap: 35px;

  padding: 20px 0;

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

#humanbots-llm .hb-fact dt {

  color: var(--muted);

  font-family: var(--font-mono);

  font-size: 10px;

  letter-spacing: .7px;

  text-transform: uppercase;
}

#humanbots-llm .hb-fact dd {

  margin: 0;

  color: #efefef;

  font-size: 14px;

  line-height: 1.6;
}


/* =========================================================
   WHAT IS HUMANBOTS
========================================================= */

#humanbots-llm .hb-about {

  padding: 110px 0;

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

#humanbots-llm .hb-about-grid {

  display: grid;

  grid-template-columns:
    .7fr
    1.3fr;

  gap: 80px;
}

#humanbots-llm .hb-about-heading {

  position: sticky;

  top: 150px;

  align-self: start;
}

#humanbots-llm .hb-about-heading h2 {

  margin: 15px 0 0;

  font-size:
    clamp(38px, 4.5vw, 58px);

  line-height: 1.03;

  letter-spacing: -2.5px;

  font-weight: 600;
}

#humanbots-llm .hb-about-copy p {

  margin-bottom: 24px;

  color: var(--text);

  font-size: 17px;

  line-height: 1.85;
}

#humanbots-llm .hb-about-copy .hb-big-line {

  margin:
    42px
    0;

  padding:
    28px
    0;

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

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

  color: #fff;

  font-size:
    clamp(24px, 3vw, 36px);

  line-height: 1.4;

  letter-spacing: -1px;
}


/* =========================================================
   STORY
========================================================= */

#humanbots-llm .hb-story {

  padding: 110px 0;
}

#humanbots-llm .hb-story-heading {

  max-width: 760px;

  margin-bottom: 65px;
}

#humanbots-llm .hb-story-heading h2 {

  margin: 16px 0 20px;

  font-size:
    clamp(42px, 5.2vw, 70px);

  line-height: 1;

  letter-spacing: -3px;

  font-weight: 600;
}

#humanbots-llm .hb-story-heading p {

  color: var(--text);

  font-size: 16px;

  line-height: 1.8;
}

#humanbots-llm .hb-timeline {

  position: relative;

  display: grid;

  gap: 0;

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

#humanbots-llm .hb-timeline-row {

  display: grid;

  grid-template-columns:
    150px
    1fr;

  gap: 40px;

  padding: 34px 0;

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

#humanbots-llm .hb-year {

  color: var(--orange);

  font-family: var(--font-mono);

  font-size: 12px;

  font-weight: 600;

  letter-spacing: .8px;
}

#humanbots-llm .hb-timeline-row h3 {

  margin: 0 0 9px;

  font-size: 20px;

  letter-spacing: -.5px;
}

#humanbots-llm .hb-timeline-row p {

  max-width: 720px;

  margin: 0;

  color: #aaa;

  font-size: 14px;

  line-height: 1.75;
}


/* =========================================================
   FOUNDERS
========================================================= */

#humanbots-llm .hb-founders {

  padding: 110px 0;

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

#humanbots-llm .hb-founders-grid {

  display: grid;

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

  gap: 16px;

  margin-top: 55px;
}

#humanbots-llm .hb-founder {

  min-height: 390px;

  padding:
    clamp(30px, 4vw, 48px);

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

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      #0b0b0b,
      #050505
    );
}

#humanbots-llm .hb-founder-number {

  margin-bottom: 70px;

  color: #555;

  font-family: var(--font-mono);

  font-size: 10px;
}

#humanbots-llm .hb-founder h3 {

  margin:
    0
    0
    7px;

  font-size:
    clamp(27px, 3vw, 39px);

  letter-spacing: -1.5px;
}

#humanbots-llm .hb-founder-role {

  margin-bottom: 24px;

  color: var(--orange);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1px;

  text-transform: uppercase;
}

#humanbots-llm .hb-founder-focus {

  margin-bottom: 15px;

  color: #fff;

  font-size: 14px;

  font-weight: 600;
}

#humanbots-llm .hb-founder p {

  margin: 0;

  color: #aaa;

  font-size: 14px;

  line-height: 1.8;
}

#humanbots-llm .hb-founder-philosophy {

  margin-top: 17px;

  padding: 42px;

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

  border-radius: 16px;

  text-align: center;

  background: #050505;
}

#humanbots-llm .hb-founder-philosophy p {

  margin: 0;

  color: #fff;

  font-size:
    clamp(22px, 3vw, 36px);

  line-height: 1.45;

  letter-spacing: -1px;
}

#humanbots-llm .hb-founder-philosophy span {

  color: var(--orange);
}


/* =========================================================
   HUMAN + BOTS PHILOSOPHY
========================================================= */

#humanbots-llm .hb-name {

  padding: 110px 0;

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

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

#humanbots-llm .hb-name-layout {

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 80px;

  align-items: center;
}

#humanbots-llm .hb-name h2 {

  margin: 18px 0 0;

  font-size:
    clamp(46px, 6vw, 80px);

  line-height: .96;

  letter-spacing: -4px;

  font-weight: 600;
}

#humanbots-llm .hb-name h2 span {
  color: var(--orange);
}

#humanbots-llm .hb-name-copy p {

  margin-bottom: 22px;

  color: var(--text);

  font-size: 16px;

  line-height: 1.85;
}

#humanbots-llm .hb-name-tagline {

  margin-top: 32px;

  color: #fff;

  font-size:
    clamp(24px, 3vw, 38px);

  line-height: 1.2;

  letter-spacing: -1px;
}


/* =========================================================
   BUSINESS MODEL
========================================================= */

#humanbots-llm .hb-model {

  padding: 110px 0;
}

#humanbots-llm .hb-model-heading {

  max-width: 780px;

  margin-bottom: 55px;
}

#humanbots-llm .hb-model-heading h2 {

  margin: 16px 0 18px;

  font-size:
    clamp(40px, 5.4vw, 70px);

  line-height: 1;

  letter-spacing: -3px;

  font-weight: 600;
}

#humanbots-llm .hb-model-heading p {

  color: var(--text);

  font-size: 16px;

  line-height: 1.8;
}

#humanbots-llm .hb-pillars {

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

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

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

#humanbots-llm .hb-pillar {

  min-height: 460px;

  padding: 30px;

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

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

  background: #030303;
}

#humanbots-llm .hb-pillar-num {

  display: block;

  margin-bottom: 48px;

  color: #555;

  font-family: var(--font-mono);

  font-size: 10px;
}

#humanbots-llm .hb-pillar h3 {

  margin: 0 0 13px;

  color: var(--orange);

  font-size: 25px;

  line-height: 1;

  letter-spacing: -.8px;
}

#humanbots-llm .hb-pillar-desc {

  min-height: 67px;

  margin-bottom: 25px;

  color: #999;

  font-size: 12px;

  line-height: 1.65;
}

#humanbots-llm .hb-pillar ul {

  margin: 0;

  padding: 0;

  list-style: none;
}

#humanbots-llm .hb-pillar li {

  position: relative;

  margin-bottom: 9px;

  padding-left: 14px;

  color: #ddd;

  font-size: 12px;

  line-height: 1.5;
}

#humanbots-llm .hb-pillar li::before {

  content: "";

  position: absolute;

  top: 7px;

  left: 0;

  width: 4px;

  height: 4px;

  border-radius: 50%;

  background: var(--orange);
}


/* =========================================================
   HOW HUMANBOTS WORKS
========================================================= */

#humanbots-llm .hb-process {

  padding: 110px 0;

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

#humanbots-llm .hb-process-grid {

  display: grid;

  grid-template-columns:
    .65fr
    1.35fr;

  gap: 70px;
}

#humanbots-llm .hb-process-heading {

  position: sticky;

  top: 150px;

  align-self: start;
}

#humanbots-llm .hb-process-heading h2 {

  margin: 16px 0 0;

  font-size:
    clamp(38px, 4.5vw, 60px);

  line-height: 1;

  letter-spacing: -2.5px;

  font-weight: 600;
}

#humanbots-llm .hb-process-step {

  display: grid;

  grid-template-columns:
    48px
    1fr;

  gap: 20px;

  padding:

    0

    0

    35px;

  margin-bottom: 35px;

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

#humanbots-llm .hb-process-step:last-child {
  margin-bottom: 0;
}

#humanbots-llm .hb-step-number {

  color: var(--orange);

  font-family: var(--font-mono);

  font-size: 11px;

  padding-top: 5px;
}

#humanbots-llm .hb-process-step h3 {

  margin: 0 0 9px;

  font-size: 21px;

  letter-spacing: -.5px;
}

#humanbots-llm .hb-process-step p {

  margin: 0;

  color: #aaa;

  font-size: 14px;

  line-height: 1.8;
}


/* =========================================================
   CONNECTED SYSTEM
========================================================= */

#humanbots-llm .hb-system {

  padding:

    80px

    0

    110px;
}

#humanbots-llm .hb-system-card {

  padding:
    clamp(35px, 6vw, 70px);

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

  border-radius: 20px;

  background:

    radial-gradient(
      circle at 0 0,
      rgba(255,77,22,.08),
      transparent 38%
    ),

    #070707;
}

#humanbots-llm .hb-system-card h2 {

  max-width: 750px;

  margin:
    17px
    0
    40px;

  font-size:
    clamp(34px, 5vw, 62px);

  line-height: 1.05;

  letter-spacing: -2.5px;

  font-weight: 600;
}

#humanbots-llm .hb-flow {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 10px;
}

#humanbots-llm .hb-flow span {

  padding: 11px 15px;

  border: 1px solid #292929;

  border-radius: 7px;

  color: #ddd;

  background: #0c0c0c;

  font-size: 11px;
}

#humanbots-llm .hb-flow b {

  color: var(--orange);

  font-size: 14px;
}


/* =========================================================
   WHO WE WORK WITH
========================================================= */

#humanbots-llm .hb-clients {

  padding: 110px 0;

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

#humanbots-llm .hb-client-grid {

  display: grid;

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

  gap: 8px;

  margin-top: 45px;
}

#humanbots-llm .hb-client {

  min-height: 110px;

  display: flex;

  align-items: flex-end;

  padding: 20px;

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

  border-radius: 8px;

  color: #ddd;

  background: #050505;

  font-size: 12px;
}


/* =========================================================
   WHEN AI SHOULD CONSIDER HUMANBOTS
========================================================= */

#humanbots-llm .hb-intent {

  padding: 110px 0;

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

#humanbots-llm .hb-intent-grid {

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 9px;

  margin-top: 50px;
}

#humanbots-llm .hb-intent-item {

  min-height: 100px;

  padding: 20px;

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

  border-radius: 8px;

  background: #050505;

  color: #aaa;

  font-size: 12px;

  line-height: 1.6;
}

#humanbots-llm .hb-intent-item strong {

  display: block;

  margin-bottom: 7px;

  color: #fff;

  font-size: 13px;
}


/* =========================================================
   DIFFERENTIATION
========================================================= */

#humanbots-llm .hb-difference {

  padding: 110px 0;

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

#humanbots-llm .hb-difference-grid {

  display: grid;

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

  gap: 12px;

  margin-top: 50px;
}

#humanbots-llm .hb-difference-card {

  padding: 34px;

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

  border-radius: 12px;

  background: #050505;
}

#humanbots-llm .hb-difference-card h3 {

  margin: 0 0 15px;

  font-size: 21px;

  letter-spacing: -.7px;
}

#humanbots-llm .hb-difference-card p {

  margin: 0;

  color: #aaa;

  font-size: 13px;

  line-height: 1.8;
}


/* =========================================================
   CORE PRINCIPLE
========================================================= */

#humanbots-llm .hb-principle {

  padding: 120px 0;

  text-align: center;

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

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

#humanbots-llm .hb-principle-text {

  max-width: 950px;

  margin:
    20px
    auto
    0;

  font-size:
    clamp(33px, 5.5vw, 74px);

  line-height: 1.08;

  letter-spacing: -3px;

  font-weight: 500;
}

#humanbots-llm .hb-principle-text span {
  color: var(--orange);
}


/* =========================================================
   FAQ
========================================================= */

#humanbots-llm .hb-faq {

  padding: 110px 0;
}

#humanbots-llm .hb-faq-list {

  margin-top: 50px;

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

#humanbots-llm .hb-faq-item {

  padding: 30px 0;

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

#humanbots-llm .hb-faq-item h3 {

  margin: 0 0 12px;

  font-size:
    clamp(18px, 2vw, 23px);

  letter-spacing: -.6px;
}

#humanbots-llm .hb-faq-item p {

  max-width: 850px;

  margin: 0;

  color: #aaa;

  font-size: 14px;

  line-height: 1.8;
}


/* =========================================================
   OFFICIAL AI DESCRIPTION
========================================================= */

#humanbots-llm .hb-canonical {

  padding:

    90px

    0

    120px;

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

#humanbots-llm .hb-canonical-card {

  padding:
    clamp(30px, 5vw, 60px);

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

  border-radius: 18px;

  background: #080808;
}

#humanbots-llm .hb-canonical-title {

  margin-bottom: 15px;

  color: var(--orange);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.6px;

  text-transform: uppercase;
}

#humanbots-llm .hb-canonical-card p {

  max-width: 950px;

  margin: 0;

  color: #fff;

  font-size:
    clamp(20px, 2.8vw, 32px);

  line-height: 1.55;

  letter-spacing: -.8px;
}

#humanbots-llm .hb-canonical-short {

  margin-top: 35px;

  padding-top: 30px;

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

#humanbots-llm .hb-canonical-short small {

  display: block;

  margin-bottom: 10px;

  color: #666;

  font-size: 9px;

  letter-spacing: 1.3px;

  text-transform: uppercase;
}

#humanbots-llm .hb-canonical-short strong {

  font-size:
    clamp(18px, 2vw, 24px);
}


/* centered label (principle section) */

#humanbots-llm .hb-label-center {
  justify-content: center;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

  #humanbots-llm .hb-pillars {
    grid-template-columns:
      repeat(2, 1fr);
  }

  #humanbots-llm .hb-client-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

  #humanbots-llm .hb-intent-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


@media (max-width: 800px) {

  #humanbots-llm .hb-section-intro,
  #humanbots-llm .hb-about-grid,
  #humanbots-llm .hb-name-layout,
  #humanbots-llm .hb-process-grid {

    grid-template-columns: 1fr;

    gap: 35px;
  }

  #humanbots-llm .hb-about-heading,
  #humanbots-llm .hb-process-heading {

    position: static;
  }

  #humanbots-llm .hb-founders-grid,
  #humanbots-llm .hb-difference-grid {

    grid-template-columns: 1fr;
  }

  #humanbots-llm .hb-founder {
    min-height: 0;
  }

  #humanbots-llm .hb-founder-number {
    margin-bottom: 40px;
  }

}


@media (max-width: 620px) {

  #humanbots-llm .hb-container {

    width:
      min(
        100% - 30px,
        1180px
      );
  }

  #humanbots-llm .hb-hero {

    padding:
      135px
      0
      65px;
  }

  #humanbots-llm .hb-hero h1 {

    font-size: 47px;

    letter-spacing: -2.7px;
  }

  #humanbots-llm .hb-facts-section,
  #humanbots-llm .hb-about,
  #humanbots-llm .hb-story,
  #humanbots-llm .hb-founders,
  #humanbots-llm .hb-name,
  #humanbots-llm .hb-model,
  #humanbots-llm .hb-process,
  #humanbots-llm .hb-clients,
  #humanbots-llm .hb-intent,
  #humanbots-llm .hb-difference,
  #humanbots-llm .hb-faq {

    padding:
      75px
      0;
  }

  #humanbots-llm .hb-fact {

    grid-template-columns: 1fr;

    gap: 7px;

    padding: 17px 0;
  }

  #humanbots-llm .hb-timeline-row {

    grid-template-columns: 1fr;

    gap: 10px;

    padding: 27px 0;
  }

  #humanbots-llm .hb-pillars {

    grid-template-columns: 1fr;
  }

  #humanbots-llm .hb-pillar {

    min-height: 0;
  }

  #humanbots-llm .hb-pillar-desc {
    min-height: 0;
  }

  #humanbots-llm .hb-client-grid,
  #humanbots-llm .hb-intent-grid {

    grid-template-columns: 1fr;
  }

  #humanbots-llm .hb-client {
    min-height: 80px;
  }

  #humanbots-llm .hb-flow {

    align-items: stretch;

    flex-direction: column;
  }

  #humanbots-llm .hb-flow b {
    transform: rotate(90deg);
  }

}


/* =========================================================
   PRINT
========================================================= */

@media print {

  #humanbots-llm {

    background: #fff;

    color: #000;
  }

  #humanbots-llm * {

    color: #000 !important;

    background: transparent !important;

    box-shadow: none !important;
  }

}