/* /agent — „Az ügynöke is vásárolhat nálunk" (R82).
   A szerződés: docs/mockupok/shop-agent-lap-R79.html. Tokenek: byb-design-system. */
/* ⛔ A RESET CSAK A SAJÁT ELEMEKRE. Egy `.byb-ag *{padding:0}` a KÖZÖS
   `.byb-wrap` 32px-es oldalpaddingját is levágja, és a hero szövege
   nekimegy a képernyő szélének (mérve a stagingen, 2026-09-04). A
   design system „isolated reset per block" szabálya pont ezért van. */
.byb-ag * {
  box-sizing: border-box;
}
.byb-ag h1,
.byb-ag h2,
.byb-ag h3,
.byb-ag p,
.byb-ag ul,
.byb-ag li,
.byb-ag table,
.byb-ag th,
.byb-ag td {
  margin: 0;
}
.byb-ag ul {
  padding: 0;
}
.byb-ag {
  font-family: 'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;
  color: #0d2b2b;
}
/* ⛔ `color: inherit` NEM MEHET IDE. A `.byb-ag a` (0,1,1) erősebb, mint a
   `.byb-ag__btn` (0,1,0), tehát felülírta a gombok saját színét: a sötét
   gomb felirata sötét lett a sötét gombon, vagyis LÁTHATATLAN (mérve a
   stagingen, 2026-09-04). A link-színt elemenként mondjuk ki. */
.byb-ag a {
  text-decoration: none;
}
.byb-ag__tovabb,
.byb-ag__b2b a:not(.byb-ag__btn) {
  color: #0d2b2b;
}
.byb-ag__eyebrow {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #5ce8a0;
}
.byb-ag__eyebrow--sotet {
  color: #0c6b4e;
}

/* hero: a kezdőlap függőleges rámpája */
.byb-ag__hero {
  background: linear-gradient(180deg, #0b2927 0%, #113631 62%, #18453e 100%);
  color: #f8fdfb;
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}
.byb-ag__hero:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(92, 232, 160, 0.5), transparent);
}
.byb-ag__herogrid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.byb-ag h1 {
  font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 14px 0 16px;
}
.byb-ag__lead {
  font-size: 18px;
  line-height: 1.6;
  color: #c4d1cb;
  max-width: 38ch;
}
.byb-ag__ctarow {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.byb-ag__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #5ce8a0;
  color: #0d2b2b;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 26px;
  border: 1.5px solid #5ce8a0;
  border-radius: 100px;
  transition:
    background 0.2s,
    transform 0.2s;
}
.byb-ag__btn:hover {
  background: #7eecb5;
  transform: translateY(-1px);
}
.byb-ag__btn--ghost {
  background: transparent;
  color: #eaf6f0;
  border-color: rgba(92, 232, 160, 0.5);
}
.byb-ag__btn--ghost:hover {
  background: #5ce8a0;
  color: #0d2b2b;
}
.byb-ag__btn--sotet {
  background: #0d2b2b;
  color: #f8fdfb;
  border-color: #0d2b2b;
}
.byb-ag__btn--sotet:hover {
  background: #123030;
}

/* példa-párbeszéd */
.byb-ag__demo {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(92, 232, 160, 0.12);
  border-radius: 16px;
  padding: 18px;
}
.byb-ag__demobar {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.byb-ag__demobar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.byb-ag__msg {
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  margin-bottom: 9px;
  line-height: 1.5;
}
.byb-ag__msg--u {
  background: rgba(92, 232, 160, 0.1);
  border: 1px solid rgba(92, 232, 160, 0.22);
  color: #eaf6f0;
}
.byb-ag__msg--a {
  background: rgba(255, 255, 255, 0.05);
  color: #c4d1cb;
}
.byb-ag__tool {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #5ce8a0;
  margin-bottom: 6px;
}
.byb-ag__cartlink {
  display: block;
  margin-top: 10px;
  background: #5ce8a0;
  color: #0d2b2b;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  padding: 9px;
  border-radius: 100px;
}

/* szakaszok */
.byb-ag__sec {
  padding: 56px 0;
}
.byb-ag__sec--tint {
  background: #eef9f3;
}
.byb-ag__sechead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
.byb-ag__sechead h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.byb-ag__sub {
  font-size: 14px;
  color: #6b8078;
  margin-top: 6px;
}
.byb-ag__tovabb {
  font-size: 14px;
  font-weight: 700;
  border-bottom: 2px solid #5ce8a0;
  padding-bottom: 2px;
  flex: none;
}

/* három lépés */
.byb-ag__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.byb-ag__step {
  background: #fff;
  border: 1px solid #e8efec;
  border-radius: 16px;
  padding: 22px;
}
.byb-ag__n {
  width: 30px;
  height: 30px;
  border-radius: 100px;
  background: #0d2b2b;
  color: #5ce8a0;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
}
.byb-ag__step h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 7px;
}
.byb-ag__step p {
  font-size: 13.5px;
  color: #4a5e56;
}
.byb-ag__copy {
  margin-top: 13px;
  background: #0d2b2b;
  border-radius: 11px;
  padding: 10px 12px;
}
.byb-ag__copy code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: #5ce8a0;
  overflow-wrap: anywhere;
}

/* a határ */
.byb-ag__guard {
  background: #0d2b2b;
  border-radius: 16px;
  padding: 26px 28px;
  color: #f8fdfb;
  position: relative;
  overflow: hidden;
}
.byb-ag__guard:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(92, 232, 160, 0.5), transparent);
}
.byb-ag__guard h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 10px 0 6px;
}
.byb-ag__guardlead {
  color: #c4d1cb;
  max-width: 62ch;
  font-size: 14.5px;
}
.byb-ag__guard ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 20px;
}
.byb-ag__guard li {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(92, 232, 160, 0.12);
  border-radius: 12px;
  padding: 15px 16px;
}
.byb-ag__guard li b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}
.byb-ag__guard li span {
  color: #9dbab0;
  font-size: 13px;
}

/* eszköz-tábla */
.byb-ag__tablawrap {
  overflow-x: auto;
}
.byb-ag__tabla {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.byb-ag__tabla th,
.byb-ag__tabla td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid #e8efec;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.byb-ag__tabla th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b8078;
}
.byb-ag__tabla td:first-child {
  width: 210px;
}
.byb-ag__tabla code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: #0c6b4e;
  background: #eef9f3;
  padding: 3px 8px;
  border-radius: 7px;
  font-weight: 600;
}
.byb-ag__d {
  font-size: 13.5px;
  color: #4a5e56;
}

/* példák */
.byb-ag__prompts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.byb-ag__prompt {
  background: #fff;
  border: 1px solid #e8efec;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #0d2b2b;
}

/* B2B sáv */
.byb-ag__b2b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #f2f7f5;
  border: 1px solid #e8efec;
  border-radius: 16px;
  padding: 22px 26px;
}
.byb-ag__b2b h3 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.byb-ag__b2b p {
  font-size: 13.5px;
  color: #4a5e56;
  margin-top: 4px;
  max-width: 66ch;
}

/* kezdőlapi sáv */
.byb-agstrip__wrap {
  padding-top: 56px;
}
@media (max-width: 749px) {
  .byb-agstrip__wrap {
    padding-top: 32px;
  }
}
.byb-agstrip {
  background: linear-gradient(180deg, #0b2927, #113631);
  color: #f8fdfb;
  border-radius: 16px;
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  position: relative;
  overflow: hidden;
}
.byb-agstrip:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(92, 232, 160, 0.5), transparent);
}
.byb-agstrip h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 9px 0 6px;
}
.byb-agstrip p {
  color: #c4d1cb;
  font-size: 14.5px;
  max-width: 56ch;
}

@media (max-width: 1040px) {
  .byb-ag__herogrid,
  .byb-ag__steps,
  .byb-ag__guard ul,
  .byb-ag__prompts {
    grid-template-columns: 1fr;
  }
  .byb-ag__herogrid {
    gap: 30px;
  }
  .byb-ag__b2b,
  .byb-agstrip {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 749px) {
  .byb-ag__sec {
    padding: 32px 0;
  }
  .byb-ag__hero {
    padding: 40px 0 36px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .byb-ag__btn {
    transition: none;
  }
}