/* About Us page (/:lang/about-us). Ported from frontend-design/about-us/index.html: the
   designer's rules are kept as they are; everything added for this app is in the marked blocks
   (fonts and icons here, "App adaptations" at the end). Linked by layout/partials/page-css.phtml. */

/* Gordita with the designer's metric overrides (centres the ink in its line box). Own family
   name, so the overrides do not reach pages that use the plain "gordita" faces. The files are the
   ones the header's "n2a-gordita" faces use (glass-nav.css): same glyph widths as the designer's
   .otf files, which the copies under /assets/fonts do not have. The page template preloads them,
   so the text does not re-wrap when they arrive. */
@font-face { font-family: 'gordita-ab'; src: url('/new-design/fonts/Gordita-Regular-otf.woff2') format('woff2'), url('/new-design/fonts/Gordita-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 98.3%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: 'gordita-ab'; src: url('/new-design/fonts/Gordita-Medium-otf.woff2') format('woff2'), url('/new-design/fonts/Gordita-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; ascent-override: 98.3%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: 'gordita-ab'; src: url('/new-design/fonts/Gordita-Bold-otf.woff2') format('woff2'), url('/new-design/fonts/Gordita-Bold.otf') format('opentype'); font-weight: 600 900; font-style: normal; font-display: swap; ascent-override: 98.3%; descent-override: 20%; line-gap-override: 0%; }

/* Remix Icon 3.5.0, self-hosted: only the glyphs this page uses (lib/remixicon/, 5 KB instead of
   the 144 KB full font), preloaded by the page template. A new ri-* icon needs its glyph added to the subset and a rule below. */
@font-face { font-family: 'remixicon'; src: url('/new-design/lib/remixicon/remixicon-3.5.0-about-us.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
.ab [class^="ri-"], .ab [class*=" ri-"], .pj3-modal [class^="ri-"], .pj3-modal [class*=" ri-"] { font-family: 'remixicon' !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.ri-add-circle-line::before { content: "\ea11"; }
.ri-arrow-down-line::before { content: "\ea4c"; }
.ri-arrow-right-line::before { content: "\ea6c"; }
.ri-book-open-line::before { content: "\eadb"; }
.ri-brain-line::before { content: "\f2f7"; }
.ri-briefcase-4-line::before { content: "\eaf1"; }
.ri-building-4-line::before { content: "\eb0d"; }
.ri-calendar-event-line::before { content: "\eb25"; }
.ri-check-double-line::before { content: "\eb79"; }
.ri-check-line::before { content: "\eb7b"; }
.ri-checkbox-circle-fill::before { content: "\eb80"; }
.ri-customer-service-2-line::before { content: "\ec0c"; }
.ri-donut-chart-line::before { content: "\ec42"; }
.ri-earth-line::before { content: "\ec7a"; }
.ri-facebook-fill::before { content: "\ecbc"; }
.ri-file-pdf-2-line::before { content: "\f3c7"; }
.ri-file-user-line::before { content: "\ed17"; }
.ri-focus-3-line::before { content: "\ed4c"; }
.ri-global-line::before { content: "\edcf"; }
.ri-group-line::before { content: "\ede3"; }
.ri-hand-coin-line::before { content: "\edf1"; }
.ri-instagram-line::before { content: "\ee66"; }
.ri-layout-column-line::before { content: "\ee8d"; }
.ri-linkedin-fill::before { content: "\eeb5"; }
.ri-mail-send-line::before { content: "\eefc"; }
.ri-map-pin-2-line::before { content: "\ef0a"; }
.ri-rocket-2-line::before { content: "\f094"; }
.ri-route-line::before { content: "\f09b"; }
.ri-search-eye-line::before { content: "\f0cf"; }
.ri-search-line::before { content: "\f0d1"; }
.ri-shake-hands-line::before { content: "\f3ab"; }
.ri-share-forward-line::before { content: "\f0fd"; }
.ri-shield-check-line::before { content: "\f100"; }
.ri-shield-user-line::before { content: "\f10c"; }
.ri-sparkling-2-fill::before { content: "\f36a"; }
.ri-sparkling-2-line::before { content: "\f36b"; }
.ri-team-line::before { content: "\f1ee"; }
.ri-tiktok-fill::before { content: "\f372"; }
.ri-time-line::before { content: "\f20f"; }
.ri-translate-2::before { content: "\f226"; }
.ri-twitter-x-line::before { content: "\f3e7"; }
.ri-user-3-fill::before { content: "\f255"; }
.ri-user-follow-line::before { content: "\f261"; }
.ri-user-search-line::before { content: "\f26c"; }
.ri-user-star-line::before { content: "\f276"; }
.ri-vidicon-line::before { content: "\f288"; }
.ri-youtube-fill::before { content: "\f2d4"; }

/* ===== Designer rules (frontend-design/about-us/index.html) ===== */
.ab { font-family: "gordita-ab", "gordita", sans-serif; color: #0d0e0f; }
.ab { --blue: #265CFF; --blue-d: #1b3fd6; --blue-50: #eef3ff; --blue-100: #dfe8ff; --ink: #0d0e0f; --body: #3b4352; --muted: #6b7280; --line: #e6ebf3; --soft: #f6f8fc; --green: #16a34a; --green-50: #eafaf0; --violet: #7c3aed; --violet-50: #f3edff; --amber: #d97706; --amber-50: #fff6e6; }
.ab img { max-width: 100%; display: block; }
.ab a { text-decoration: none; }
.ab-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ab-sec { padding: 88px 0; }
.ab-sec--soft { background: var(--soft); }

/* Type */
.ab-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--blue-50); border: 1px solid var(--blue-100); font-size: 12.5px; font-weight: 600; line-height: 1.3; letter-spacing: .02em; color: var(--blue); }
.ab-kicker i { font-size: 15px; line-height: 1; }
.ab-h2 { margin: 0; font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.ab-h2 em { font-style: normal; color: var(--blue); }
.ab-lead { margin: 14px 0 0; font-size: 17px; line-height: 1.65; color: var(--muted); }
.ab-head { max-width: 720px; margin: 0 0 44px; }
.ab-head--c { margin-left: auto; margin-right: auto; text-align: center; }
.ab-mark { color: var(--ink); font-weight: 600; background: linear-gradient(180deg, transparent 58%, rgba(38,92,255,.18) 58%, rgba(38,92,255,.18) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Buttons */
.ab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 12px; font-size: 15px; font-weight: 600; line-height: 1.25; text-align: center; transition: transform .2s, box-shadow .2s, background .2s; }
.ab-btn i { font-size: 18px; line-height: 1; }
.ab-btn--solid { background: var(--blue); color: #fff; box-shadow: 0 10px 24px -8px rgba(38,92,255,.6); }
.ab-btn--solid:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -8px rgba(38,92,255,.7); }
.ab-btn--ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.ab-btn--ghost:hover { border-color: var(--blue-100); background: var(--blue-50); }

/* Icon tiles */
.ab-ico { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--blue-50); color: var(--blue); }
.ab-ico i { font-size: 24px; line-height: 1; }
.ab-ico--violet { background: var(--violet-50); color: var(--violet); }
.ab-ico--green { background: var(--green-50); color: var(--green); }
.ab-ico--amber { background: var(--amber-50); color: var(--amber); }
.ab-ico--solid { background: var(--blue); color: #fff; }

/* ================= 1. HERO ================= */
.ab-hero { position: relative; overflow: hidden; padding: 72px 0 80px; background:
    radial-gradient(circle, rgba(38,92,255,.10) 1px, transparent 1.5px) 0 0 / 24px 24px,
    radial-gradient(55% 80% at 85% 20%, #e3ebff 0%, rgba(255,255,255,0) 70%), #fff; }
.ab-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ab-hero h1 { margin: 0; font-size: 54px; font-weight: 700; line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
.ab-hero h1 span { color: var(--blue); }
.ab-hero .ab-lead { font-size: 18px; max-width: 560px; }
.ab-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ab-stats { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 16px; }
.ab-stats li { padding: 0 22px; border-left: 1px solid var(--line); }
.ab-stats li:first-child { padding-left: 0; border-left: 0; }
.ab-stats strong { display: block; white-space: nowrap; font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.ab-stats span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--muted); }

/* Hero illustration: generic pipeline mock */
.ab-ill { position: relative; width: 100%; max-width: 520px; margin-left: auto; padding: 30px 0 30px; }
.ab-ill__card { position: relative; z-index: 1; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 70px -24px rgba(16,40,120,.28); overflow: hidden; }
.ab-ill__bar { display: flex; align-items: center; gap: 12px; padding: 30px 20px 16px; border-bottom: 1px solid var(--line); }
.ab-ill__bar .ab-ico { width: 38px; height: 38px; border-radius: 11px; }
.ab-ill__bar .ab-ico i { font-size: 19px; }
.ab-ill__bar b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.ab-ill__bar small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.ab-ill__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--green-50); color: var(--green); font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.ab-ill__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(22,163,74,.2); }
.ab-ill__tabs { display: flex; gap: 6px; padding: 12px 20px 4px; }
.ab-ill__tabs span { padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--muted); }
.ab-ill__tabs span.is-on { background: var(--blue-50); color: var(--blue); font-weight: 600; }
.ab-ill__list { list-style: none; margin: 0; padding: 8px 12px 14px; }
.ab-ill__list li { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; }
.ab-ill__list li + li { border-top: 1px dashed var(--line); }
.ab-ill__list li:first-child { background: linear-gradient(90deg, var(--blue-50), rgba(238,243,255,0)); }
.ab-av { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; line-height: 1; color: #fff; }
.ab-av--a { background: linear-gradient(135deg, #5b8cff, #265CFF); }
.ab-av--b { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.ab-av--c { background: linear-gradient(135deg, #34d399, #059669); }
.ab-ill__who { min-width: 0; flex: 1; }
.ab-ill__who b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.ab-ill__who span { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.ab-ill__who em { font-style: normal; padding: 2px 7px; border-radius: 6px; background: var(--green-50); color: var(--green); font-size: 11px; font-weight: 600; line-height: 1.4; }
.ab-score { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; font-size: 14px; font-weight: 700; line-height: 1; color: var(--ink);
    background: radial-gradient(closest-side, #fff 76%, transparent 78% 100%), conic-gradient(var(--blue) calc(var(--v) * 1%), #e6ebf3 0); }
.ab-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 36px -12px rgba(16,40,120,.25); font-size: 13px; font-weight: 600; line-height: 1.3; max-width: calc(100% - 40px); }
.ab-float small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.ab-float .ab-ico { width: 34px; height: 34px; border-radius: 10px; }
.ab-float .ab-ico i { font-size: 18px; }
.ab-float--tl { left: 20px; top: 0; }
.ab-float--br { right: 20px; bottom: 0; }
.ab-float__logos { display: flex; }
.ab-float__logos span { width: 26px; height: 26px; margin-left: -6px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ab-float__logos span:first-child { margin-left: 0; }
.ab-float__logos img { width: 18px; height: 18px; object-fit: contain; }

/* ================= 2. WHAT IT COVERS (bento) ================= */
.ab-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ab-tile { position: relative; display: flex; flex-direction: column; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 22px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.ab-tile:hover { transform: translateY(-3px); border-color: var(--blue-100); box-shadow: 0 18px 40px -18px rgba(16,40,120,.22); }
.ab-tile__num { position: absolute; top: 22px; right: 24px; font-size: 13px; font-weight: 700; line-height: 1.3; color: #b6c3de; }
.ab-tile h3 { margin: 16px 0 6px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.ab-tile > p { margin: 0 0 20px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.ab-tile__art { margin-top: auto; display: flex; flex-direction: column; justify-content: center; padding: 14px; min-height: 118px; border-radius: 14px; background: var(--soft); border: 1px solid #edf1f8; min-height: 104px; }
.ab-tile--hl { background: linear-gradient(160deg, #265CFF 0%, #1b3fd6 100%); border-color: transparent; color: #fff; box-shadow: 0 24px 50px -20px rgba(38,92,255,.55); }
.ab-tile--hl > p { color: rgba(255,255,255,.85); }
.ab-tile--hl .ab-tile__num { color: rgba(255,255,255,.55); }
.ab-tile--hl .ab-ico { background: rgba(255,255,255,.16); color: #fff; }
.ab-tile--hl .ab-tile__art { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }
.ab-tile__badge { position: absolute; top: 20px; right: 54px; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--blue); font-size: 11.5px; font-weight: 700; line-height: 1.3; }
/* mini art pieces */
.ab-art-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.ab-art-search i { color: var(--blue); font-size: 15px; line-height: 1; }
.ab-art-job { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--body); }
.ab-art-job::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--blue-100); }
.ab-art-job span { margin-left: auto; font-weight: 500; color: var(--muted); }
.ab-art-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ab-art-logos span { height: 34px; display: flex; align-items: center; justify-content: center; padding: 0 6px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.ab-art-logos img { max-height: 13px; width: auto; object-fit: contain; }
.ab-art-more { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--blue); }
.ab-art-stack { display: flex; align-items: center; }
.ab-art-stack .ab-av { width: 34px; height: 34px; flex-basis: 34px; margin-left: -8px; border: 2px solid var(--soft); font-size: 11px; }
.ab-art-stack .ab-av:first-child { margin-left: 0; }
.ab-art-stack small { margin-left: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--body); }
.ab-art-files { display: flex; gap: 6px; margin-top: 10px; }
.ab-art-files span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 11.5px; font-weight: 500; line-height: 1.3; color: var(--body); }
.ab-art-files i { color: #e11d48; font-size: 13px; line-height: 1; }
.ab-tile__art.ab-art-ai { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; }
.ab-art-ai .ab-score { width: 56px; height: 56px; font-size: 16px; color: #fff; background: radial-gradient(closest-side, #2f56e0 76%, transparent 78% 100%), conic-gradient(#fff calc(var(--v) * 1%), rgba(255,255,255,.25) 0); }
.ab-art-ai ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ab-art-ai li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: #fff; }
.ab-art-ai li i { font-size: 15px; line-height: 1; color: #86efac; }
.ab-tile__art.ab-art-kan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-content: center; }
.ab-art-kan > div { padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.ab-art-kan b { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 600; line-height: 1.3; color: var(--muted); }
.ab-k { display: flex; align-items: center; gap: 4px; margin-top: 4px; padding: 3px 4px; border-radius: 6px; background: var(--soft); }
.ab-k i { flex: 1; height: 6px; border-radius: 3px; background: var(--blue-100); }
.ab-k em { flex: 0 0 auto; font-style: normal; font-size: 10px; font-weight: 700; line-height: 1.3; padding: 1px 4px; border-radius: 4px; background: var(--blue); color: #fff; }
.ab-k.is-g i { background: #bbf0cf; }
.ab-k.is-g em { background: var(--green); }
.ab-art-offer { align-self: flex-start; }
.ab-art-cal { display: flex; align-items: center; gap: 12px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.ab-art-cal__d { flex: 0 0 44px; text-align: center; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.ab-art-cal__d small { display: block; padding: 2px 0; background: var(--blue); color: #fff; font-size: 10px; font-weight: 600; line-height: 1.3; }
.ab-art-cal__d b { display: block; padding: 3px 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.ab-art-cal p { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.ab-art-cal p span { display: block; font-weight: 500; color: var(--muted); }
.ab-art-offer { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--green-50); color: var(--green); font-size: 12px; font-weight: 600; line-height: 1.3; }

/* ================= 3. AI PRE-SCREENING ================= */
.ab-ai { position: relative; overflow: hidden; background:
    radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1.5px) 0 0 / 22px 22px,
    radial-gradient(60% 90% at 100% 0%, #5b85ff 0%, rgba(91,133,255,0) 60%),
    linear-gradient(135deg, #1a3bcc 0%, #265CFF 100%); color: #fff; }
.ab-ai__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.ab-ai .ab-kicker { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.ab-ai .ab-h2 { color: #fff; }
.ab-ai .ab-lead { color: rgba(255,255,255,.85); }
.ab-ai__facts { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ab-ai__facts li { padding: 16px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
.ab-ai__facts strong { display: block; font-size: 24px; font-weight: 700; line-height: 1.2; }
.ab-ai__facts span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.8); }
.ab-ai__cta { margin-top: 28px; background: #fff; color: var(--blue); box-shadow: 0 12px 28px -10px rgba(0,0,0,.35); }
.ab-ai__cta:hover { transform: translateY(-1px); }
/* candidate card illustration */
.ab-cand { position: relative; padding: 24px; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 40px 80px -30px rgba(5,15,70,.6); }
.ab-cand__top { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ab-cand__top .ab-av { width: 52px; height: 52px; flex-basis: 52px; font-size: 16px; }
.ab-cand__top > div { flex: 1; min-width: 0; }
.ab-cand__top .ab-score { flex-shrink: 0; }
.ab-cand__top div b { display: block; font-size: 17px; font-weight: 700; line-height: 1.3; }
.ab-cand__top div span { display: block; font-size: 13px; line-height: 1.35; color: var(--muted); }
.ab-cand__top .ab-score { margin-left: auto; width: 64px; height: 64px; font-size: 19px; }
.ab-cand__steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.ab-cand__steps li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--soft); }
.ab-cand__steps .ab-ico { width: 36px; height: 36px; border-radius: 10px; }
.ab-cand__steps .ab-ico i { font-size: 18px; }
.ab-cand__steps b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.ab-cand__steps small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.ab-cand__steps .ab-ok { margin-left: auto; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; }
.ab-cand__steps .ab-ok i { font-size: 15px; line-height: 1; }
.ab-cand__ready { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 14px; background: var(--green-50); color: #15803d; font-size: 15px; font-weight: 700; line-height: 1.3; }
.ab-cand__ready i { font-size: 19px; line-height: 1; }
.ab-cand__tag { position: absolute; top: -14px; right: 24px; padding: 6px 12px; border-radius: 999px; background: #eaf0ff; color: var(--blue); border: 1px solid #c9d8ff; box-shadow: 0 8px 20px -8px rgba(5,15,70,.4); font-size: 12px; font-weight: 600; line-height: 1.3; display: inline-flex; align-items: center; gap: 6px; }
.ab-cand__tag i { color: var(--blue); font-size: 14px; line-height: 1; }

/* ================= 4. WHO WE SERVE ================= */
.ab-serve { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ab-serve__card { display: flex; flex-direction: column; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 22px; transition: transform .2s, box-shadow .2s; }
.ab-serve__card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(16,40,120,.22); }
.ab-serve__card .ab-ico { width: 56px; height: 56px; border-radius: 16px; }
.ab-serve__card .ab-ico i { font-size: 28px; }
.ab-serve__card h3 { margin: 18px 0 8px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.ab-serve__card > p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.ab-serve__card ul { list-style: none; margin: 18px 0 22px; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.ab-serve__card li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--body); }
.ab-serve__card li i { flex: 0 0 18px; margin-top: 1px; font-size: 18px; line-height: 1; color: var(--green); }
.ab-serve__link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--blue); }
.ab-serve__link i { font-size: 18px; line-height: 1; transition: transform .2s; }
.ab-serve__link:hover i { transform: translateX(3px); }

/* ================= 5. GLOBAL REACH ================= */
.ab-reach { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.ab-reach__list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.ab-reach__list li { display: flex; align-items: center; gap: 14px; }
.ab-reach__list .ab-ico { width: 46px; height: 46px; }
.ab-reach__list div b { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
.ab-reach__list div span { display: block; font-size: 14px; line-height: 1.4; color: var(--muted); }
.ab-map { position: relative; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 24px 60px -30px rgba(16,40,120,.25); }
.ab-map svg { display: block; width: 100%; height: auto; }
.ab-map__land { fill: url(#abDots); }
.ab-pin circle.ab-pin__dot { fill: var(--blue); stroke: #fff; stroke-width: 3; }
.ab-pin circle.ab-pin__pulse { fill: rgba(38,92,255,.25); transform-box: fill-box; transform-origin: center; animation: ab-pulse 2.4s ease-out infinite; }
@keyframes ab-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.ab-pin text { font-family: "gordita-ab", "gordita", sans-serif; font-size: 17px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.ab-logos { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--line); }
.ab-logos p { margin: 0 0 18px; text-align: center; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--muted); }
.ab-logos ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.ab-logos li { height: 60px; display: flex; align-items: center; justify-content: center; padding: 0 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.ab-logos img { max-height: 22px; width: auto; object-fit: contain; }

/* ================= 6. STORY ================= */
.ab-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ab-story__copy > p:not(.ab-kicker) { margin: 16px 0 0; font-size: 16px; line-height: 1.7; color: var(--body); }
.ab-values { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.ab-values li { display: flex; gap: 12px; align-items: flex-start; }
.ab-values .ab-ico { width: 40px; height: 40px; border-radius: 12px; }
.ab-values .ab-ico i { font-size: 20px; }
.ab-values div b { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.ab-values div span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.ab-journey { padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 24px 60px -34px rgba(16,40,120,.3); }
.ab-journey h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.ab-time { list-style: none; margin: 0; padding: 0; }
.ab-time li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
.ab-time li:last-child { padding-bottom: 0; }
.ab-time li::before { content: ""; position: absolute; left: 83px; top: 18px; bottom: -6px; width: 2px; background: var(--blue-100); }
.ab-time li:last-child::before { display: none; }
.ab-time b { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--blue); padding-top: 4px; }
.ab-time div { position: relative; padding-left: 26px; }
.ab-time div::before { content: ""; position: absolute; left: -2px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); }
.ab-time li.is-now div::before { background: var(--blue); box-shadow: 0 0 0 5px var(--blue-50); }
.ab-time strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.ab-time span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* ================= 7. CTA + CONTACT (light) ================= */
.ab-end { padding: 0 0 88px; }
.ab-end__panel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 48px; border-radius: 28px; border: 1px solid var(--blue-100); background:
    radial-gradient(circle, rgba(38,92,255,.10) 1px, transparent 1.5px) 0 0 / 22px 22px,
    radial-gradient(70% 100% at 0% 0%, #dfe8ff 0%, rgba(223,232,255,0) 70%),
    linear-gradient(135deg, #f3f7ff 0%, #eaf0ff 100%); }
.ab-end__panel .ab-lead { max-width: 480px; }
.ab-end__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ab-end__checks { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 20px; }
.ab-end__checks li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--body); }
.ab-end__checks i { color: var(--green); font-size: 17px; line-height: 1; }
.ab-contact { padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 50px -28px rgba(16,40,120,.3); }
.ab-contact h3 { margin: 0 0 16px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.ab-contact ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.ab-contact li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.45; color: var(--body); }
.ab-contact li .ab-ico { width: 38px; height: 38px; border-radius: 11px; }
.ab-contact li .ab-ico i { font-size: 19px; }
.ab-contact li small { display: block; font-size: 12px; line-height: 1.3; color: var(--muted); }
.ab-contact a.ab-mail { color: var(--blue); font-weight: 600; }
.ab-social { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.ab-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--body); transition: background .2s, color .2s, border-color .2s; }
.ab-social a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.ab-social i { font-size: 17px; line-height: 1; }

.ab-end { scroll-margin-top: 90px; }
.ab-host { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 14px 16px; background: #fff; border: 1px solid var(--blue-100); border-radius: 16px; max-width: 480px; }
.ab-host__ph { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eaf0ff, #d3e0ff); color: #8aa3dc; border: 3px solid #fff; box-shadow: 0 6px 16px rgba(13,38,87,.18); }
.ab-host__ph i { font-size: 26px; line-height: 1; }
.pj3-cal__host .ab-host__ph { display: flex; margin-top: 0; color: #8aa3dc; }
.ab-host__ph--sm { flex-basis: 48px; width: 48px; height: 48px; border-width: 2px; }
.ab-host__ph--sm i { font-size: 22px; }
.ab-host small { display: block; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ab-host b { display: block; margin-top: 2px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.ab-host div span { display: block; font-size: 13px; line-height: 1.35; color: var(--muted); }
.ab-host__facts { list-style: none; margin: 0 0 0 auto; padding: 0; display: grid; gap: 6px; }
.ab-host__facts li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--body); white-space: nowrap; }
.ab-host__facts i { font-size: 15px; line-height: 1; color: var(--blue); }
button.ab-btn { border: 0; cursor: pointer; font-family: inherit; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 360px) { .ab-art-files span:nth-child(2) { display: none; } }
@media (max-width: 420px) {
    .ab-host { flex-wrap: wrap; }
    .ab-host__facts { margin: 0; flex-basis: 100%; display: flex; gap: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
}
.pj3-modal { --ink: #0d0e0f; --muted: #5b6270; --line: #e6ebf3; --soft: #f4f6fb; --primary0: #265CFF; color: var(--ink); font-family: "gordita-ab", "gordita", sans-serif; }
.pj3-modal svg { display: block; }
/* Book a Demo pop-up (Calendly iframe, src set only when opened) */
.pj3-modal { position: fixed; inset: 0; z-index: 2100; background: rgba(8, 12, 24, .55); display: none; align-items: center; justify-content: center; padding: 24px; }
.pj3-modal.is-open { display: flex; }
.pj3-modal__card { position: relative; width: min(1040px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: #fff; border-radius: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .3); text-align: left; }
.pj3-modal__close { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pj3-modal__close:hover { color: var(--ink); background: var(--soft); }
.pj3-cal__head { display: flex; align-items: center; gap: 22px; padding: 22px 24px 18px 28px; border-bottom: 1px solid var(--line); }
.pj3-cal__host { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.pj3-cal__host img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(13, 38, 87, .15); }
.pj3-cal__host small { display: block; font-size: 10.5px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.pj3-cal__host b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.pj3-cal__host span { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); margin-top: 2px; }
.pj3-cal__text { flex: 1; min-width: 0; padding-left: 22px; border-left: 1px solid var(--line); }
.pj3-cal__title { font-size: 20px; font-weight: 600; line-height: 1.25; margin: 0 0 4px; color: var(--ink); }
.pj3-cal__sub { font-size: 13.5px; line-height: 20px; color: var(--muted); margin: 0; }
.pj3-cal__frame { height: min(680px, calc(100vh - 220px)); background: #fff; }
.pj3-cal__frame iframe { width: 100%; height: 100%; display: block; border: 0; }
.pj3-cal__fallback { padding: 12px 28px 16px; font-size: 12.5px; line-height: 1.4; color: var(--muted); text-align: center; border-top: 1px solid var(--line); }
.pj3-cal__fallback a { color: var(--primary0); font-weight: 500; }
@media (max-width: 991px) {
    .pj3-modal { padding: 12px; }
    .pj3-modal__card { max-height: calc(100vh - 24px); border-radius: 18px; }
    .pj3-cal__head { flex-wrap: wrap; gap: 14px; padding: 18px 18px 16px 20px; }
    .pj3-cal__text { flex-basis: 100%; order: 3; padding-left: 0; border-left: none; }
    .pj3-cal__host { flex: 1; }
}
/* ================= Responsive ================= */
@media (max-width: 1100px) {
    .ab-hero h1 { font-size: 46px; }
    .ab-stats li { padding: 0 16px; }
    .ab-stats strong { font-size: 23px; }
    .ab-logos ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .ab-sec { padding: 68px 0; }
    .ab-h2 { font-size: 32px; }
    .ab-hero { padding: 48px 0 64px; }
    .ab-hero__grid, .ab-ai__grid, .ab-reach, .ab-story, .ab-end__panel { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .ab-ill { max-width: none; margin: 0; }
    .ab-bento, .ab-serve { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-serve__card:last-child { grid-column: 1 / -1; }
    .ab-cand { max-width: 520px; margin: 0 auto; width: 100%; }
    .ab-end { padding-bottom: 68px; }
    .ab-end__panel { padding: 36px; }
}
@media (max-width: 640px) {
    .ab-wrap { padding: 0 16px; }
    .ab-sec { padding: 56px 0; }
    .ab-h2 { font-size: 27px; }
    .ab-lead { font-size: 15.5px; }
    .ab-head { margin-bottom: 32px; }
    .ab-hero { padding: 36px 0 52px; }
    .ab-hero h1 { font-size: 34px; }
    .ab-hero .ab-lead { font-size: 16px; }
    .ab-hero__btns .ab-btn { flex: 1 1 100%; }
    .ab-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
    .ab-stats li:nth-child(3) { padding-left: 0; border-left: 0; }
    .ab-stats strong { font-size: 22px; }
    .ab-stats li { padding: 0 10px 0 0; }
    .ab-stats li:nth-child(even) { padding-left: 14px; }
    .ab-ill { padding: 28px 0 30px; }
    .ab-float--tl { left: 12px; }
    .ab-float--br { right: 12px; }
    .ab-float { max-width: calc(100% - 24px); }
    .ab-float small, .ab-float__logos { display: none; }
    .ab-float { padding: 8px 12px; font-size: 12.5px; }
    .ab-ill__who em:nth-child(3) { display: none; }
    .ab-ill__bar small { display: none; }
    .ab-ill__tabs span:nth-child(3) { display: none; }
    .ab-bento, .ab-serve { grid-template-columns: minmax(0, 1fr); }
    .ab-tile, .ab-serve__card { padding: 22px 20px; }
    .ab-ai__facts { grid-template-columns: minmax(0, 1fr); }
    .ab-ai__facts li { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; }
    .ab-ai__facts span { margin: 0; }
    .ab-cand { padding: 18px; }
    .ab-cand__top .ab-score { width: 54px; height: 54px; font-size: 16px; }
    .ab-map { padding: 10px; border-radius: 18px; }
    .ab-logos { margin-top: 40px; }
    .ab-logos ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-values { grid-template-columns: minmax(0, 1fr); }
    .ab-journey { padding: 22px 18px; }
    .ab-end { padding-bottom: 56px; }
    .ab-end__panel { padding: 26px 18px; border-radius: 22px; }
    .ab-end__btns .ab-btn { flex: 1 1 100%; }
}

/* ===== App adaptations ===== */
/* The designer page has no framework; here Bootstrap's reboot and style.css load too. These rules
   put back the browser defaults the design was drawn against. */
.ab, .pj3-modal { font-size: 16px; font-weight: 400; line-height: normal; text-align: start; }
/* style.css sets font-family on every element (* { font-family: 'Gordita' }), so the family has
   to be set on every element here as well; it cannot simply inherit from .ab. */
.ab, .ab *, .pj3-modal, .pj3-modal * { font-family: "gordita-ab", "gordita", sans-serif; }
.ab img, .ab svg, .pj3-modal svg { vertical-align: baseline; }
button.ab-btn, button.pj3-modal__close { -webkit-appearance: auto; appearance: auto; }
.pj3-modal__close { padding: 1px 6px; font-size: 13.3333px; }
/* Bootstrap's a:hover (colour + underline) loads later and would win over the designer's
   single-class link rules; links here keep their colour on hover like in the design. */
.ab a:hover, .pj3-modal a:hover { text-decoration: none; }
.ab a.ab-btn--solid:hover { color: #fff; }
.ab a.ab-btn--ghost:hover { color: var(--ink); }
.ab a.ab-ai__cta:hover, .ab a.ab-serve__link:hover, .ab a.ab-mail:hover { color: var(--blue); }
.pj3-cal__fallback a, .pj3-cal__fallback a:hover { color: var(--primary0); text-decoration: underline; }

/* JW-3518 business-email gate, embedded inside the Book a Demo pop-up (step 1; the panel takes
   the calendar's slot at the same height, so the card does not jump when Calendly replaces it).
   Same rules as the Post Job landing (postjoblanding.css), on this page's pop-up. */
.pj3-modal { --blue: #265CFF; }
.pj3-cal__gate .fe-gate-embed { display: none; min-height: min(680px, calc(100vh - 220px)); padding: 32px 28px 40px; background: #fff; }
.pj3-cal__gate .fe-gate-embed.is-open { display: flex; align-items: center; justify-content: center; }
.pj3-cal__gate .fe-gate-embed__inner { width: 100%; max-width: 460px; }
.pj3-cal__gate .fe-gate__lead { margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.pj3-cal__gate .fe-gate__label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 14px; font-weight: 600; }
.pj3-cal__gate .fe-gate__input { display: block; width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-family: inherit; font-size: 15px; line-height: 1.4; transition: border-color .15s ease, box-shadow .15s ease; }
.pj3-cal__gate .fe-gate__input:focus { outline: none; border-color: var(--primary0); box-shadow: 0 0 0 3px rgba(38, 92, 255, .15); }
.pj3-cal__gate .fe-gate__input.is-invalid { border-color: #dc2626; }
.pj3-cal__gate .fe-gate__input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }
.pj3-cal__gate .fe-gate__error { margin-top: 12px; padding: 12px 14px; border: 1px solid #fecaca; border-radius: 10px; background: #fef2f2; color: #991b1b; font-size: 14px; line-height: 1.5; }
.pj3-cal__gate .fe-gate__error[hidden], .pj3-cal__gate .fe-gate__error-hint[hidden] { display: none; }
.pj3-cal__gate .fe-gate__error-title { display: block; font-weight: 700; }
.pj3-cal__gate .fe-gate__error-hint { display: block; margin-top: 6px; color: #7f1d1d; }
.pj3-cal__gate .fe-gate__error-hint a { color: inherit; font-weight: 600; text-decoration: underline; }
.pj3-cal__gate .fe-gate__submit { width: 100%; margin-top: 18px; }
.pj3-cal__gate .fe-gate__submit[disabled] { opacity: .6; cursor: wait; }
@media (max-width: 991px) {
    .pj3-cal__gate .fe-gate-embed { min-height: min(680px, calc(100vh - 220px)); padding: 24px 18px 30px; }
}