/* About page.

   Built on the home page's own design -- the v2-shell heading reset and the
   st- hero, kicker (st-148), heading (st-149), lead (st-150) and section
   containers (st-145/157/158/165) -- so it reads as a main page. This file
   holds only what the home page has no class for. */

.ab { font-family: 'Sora', system-ui, sans-serif; color: #161727; -webkit-font-smoothing: antialiased; }
.ab h3 { margin: 0; }

/* ------------------------------------------------ hero: three objects */
.ab-stack { position: relative; display: grid; gap: 14px; }
.ab-card {
  position: relative; padding: 18px 20px; border-radius: 16px; color: #fff;
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.ab-k { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #b491ee; }
.ab-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin-top: 14px; }
.ab-chain span { padding: 7px 11px; border-radius: 9px; font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.ab-chain span.first { background: rgba(128, 70, 225, .28); border-color: rgba(180, 145, 238, .45); }
.ab-chain span.in { background: rgba(23, 178, 106, .2); border-color: rgba(95, 211, 160, .45); color: #bff0da; }
.ab-chain i { width: 14px; height: 2px; border-radius: 2px; background: rgba(180, 145, 238, .6); }
.ab-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 13px; }
.ab-k + .ab-row { margin-top: 8px; border-top: none; }
.ab-row time { font: 500 12px ui-monospace, 'SFMono-Regular', Menlo, monospace; color: rgba(255, 255, 255, .45); }
.ab-row b { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.ab-row span { font-size: 12px; color: rgba(255, 255, 255, .55); }
.ab-row em { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.ab-row em.ok { background: rgba(23, 178, 106, .16); color: #5fd3a0; }
.ab-row em.warn { background: rgba(245, 165, 36, .16); color: #f5c46b; }
.ab-pdf { display: flex; align-items: center; gap: 14px; }
.ab-pdf-ico { display: grid; place-items: center; width: 38px; height: 46px; flex-shrink: 0; border-radius: 7px; background: #fdecea; color: #b42318; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.ab-pdf b { display: block; font-size: 14.5px; }
.ab-pdf small { font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.ab-note { font-size: 12px; color: rgba(255, 255, 255, .4); }
@media (min-width: 1100px) {
  /* Layered on a wide screen: the log sits across the rules card, the report tucked under it. */
  .ab-stack { display: block; min-height: 400px; }
  .ab-card { position: absolute; }
  .ab-rules { top: 0; left: 0; width: 96%; animation: ab-float 7s ease-in-out infinite; }
  .ab-log { top: 118px; right: 0; width: 86%; z-index: 2; animation: ab-float 7s -2.3s ease-in-out infinite; }
  .ab-pdf { top: 300px; left: 4%; width: 62%; z-index: 3; animation: ab-float 7s -4.6s ease-in-out infinite; }
  .ab-note { position: absolute; left: 4%; top: 392px; }
}
@keyframes ab-float { 50% { transform: translateY(-6px); } }
@media (max-width: 480px) { .ab-row { grid-template-columns: 40px minmax(0, 1fr) auto; } .ab-row span { display: none; } }

/* ----------------------------------------------------------- why */
.ab-why { align-items: start; }
.ab-why-text { display: flex; flex-direction: column; gap: 18px; }
.ab-pull {
  margin: 10px 0 0; padding: 22px 26px; border-left: 3px solid #8046e1; border-radius: 0 16px 16px 0;
  background: linear-gradient(90deg, #f5f2fa, #fff); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.4; font-weight: 600; letter-spacing: -.015em; color: #191a2d;
}

/* ---------------------------------------------------- principles */
.ab-principles { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ab-principles li {
  display: grid; grid-template-columns: 1fr; gap: 14px; padding: 26px 26px; border-radius: 18px;
  background: #fff; border: 1px solid #e6e6ea; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.ab-principles li:hover { border-color: #d6c7ed; box-shadow: 0 20px 44px -30px rgba(84, 32, 172, .4); transform: translateY(-2px); }
@media (min-width: 900px) {
  .ab-principles li { grid-template-columns: 90px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 28px 32px; }
}
.ab-n { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.03em; background: linear-gradient(140deg, #5420ac, #7C3AED); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-principles h3 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; color: #161727; }
.ab-principles p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: #434357; max-width: 640px; }
.ab-proof {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px;
  background: #f5f2fa; color: #5a29ad; font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background .2s, gap .2s;
}
.ab-proof:hover { background: #ebe3f6; gap: 12px; }

/* ------------------------------------------------ four kinds of search */
.ab-kinds { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .ab-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ab-kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ab-kind { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; border-radius: 18px; background: #fff; border: 1px solid #e6e6ea; }
.ab-kind-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #f2eefa; color: #5a29ad; }
.ab-kind h3 { margin-top: 6px; font-size: 19px; font-weight: 600; color: #161727; }
.ab-kind p { font-size: 14.5px; line-height: 1.6; color: #434357; }
.ab-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; }
.ab-fields span { padding: 4px 9px; border-radius: 7px; background: #f8f8f9; border: 1px solid #efeff1; font-size: 12px; color: #434357; }
.ab-links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.ab-links a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #5a29ad; transition: gap .2s; }
.ab-links a:hover { gap: 12px; }

/* ------------------------------------------------------- industries */
.ab-ind { position: relative; overflow: hidden; background: #0a0b13; color: #fff; }
.ab-ind::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 85% 0%, rgba(84, 32, 172, .35), transparent 65%), radial-gradient(40% 50% at 0% 100%, rgba(124, 58, 237, .25), transparent 65%); pointer-events: none; }
.ab-ind .st-145 { position: relative; }
.ab-ind .st-148 { color: #b491ee; }
.ab-ind .st-150 { color: #c6c6d4; }
.ab-ind-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .ab-ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ab-ind-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ab-tile {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 24px; border-radius: 16px; overflow: hidden;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); color: #fff; transition: border-color .25s, transform .25s, background .25s;
}
.ab-tile::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); opacity: .9; }
.ab-tile:hover { transform: translateY(-3px); border-color: var(--c); background: rgba(255, 255, 255, .07); color: #fff; }
.ab-tile-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 11px; color: var(--c); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.ab-tile b { font-size: 16.5px; font-weight: 600; }
.ab-tile small { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .6); }

/* -------------------------------------------------- working with us */
.ab-work { display: grid; gap: 16px; grid-template-columns: 1fr; counter-reset: w; }
@media (min-width: 760px) { .ab-work { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ab-work article { position: relative; padding: 30px 28px; border-radius: 18px; background: #f8f8f9; border: 1px solid #efeff1; overflow: hidden; }
.ab-work article::after { counter-increment: w; content: "0" counter(w); position: absolute; right: 18px; bottom: -22px; font-size: 110px; font-weight: 700; letter-spacing: -.05em; color: rgba(84, 32, 172, .06); }
.ab-step { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid #ebe3f6; color: #5a29ad; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ab-work h3 { margin-top: 16px; font-size: 20px; font-weight: 600; color: #161727; }
.ab-work p { position: relative; margin-top: 8px; font-size: 15px; line-height: 1.6; color: #434357; }