/* ==========================================================================
   About Us page — story-led layout (structure inspired by appinventiv.com/about), built on the home page tokens.
   Dark photo hero · sticky section nav · split story · value pillars · dark process band · logo wall ·
   testimonials · portfolio cards · awards · careers · contact. No counters or numbered labels.
   ========================================================================== */
.ab { --rule: 1px solid var(--line); }
.ab-k { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-family: var(--f-label); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); }
.ab-k::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.ab-k--light { color: var(--teal); }
.ab-h2 { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -.035em; max-width: 18ch; }
.ab-h2 em, .ab-hero h1 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--blue); }
.ab-lead { font-size: clamp(16.5px, 1.25vw, 18px); line-height: 1.7; color: var(--text-2); max-width: 600px; }
.ab-lead + .ab-lead { margin-top: 16px; }
.ab-ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(47,107,255,.08); border: 1px solid rgba(47,107,255,.16); color: var(--blue); }
.ab-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.js .ab-rv { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform 1s var(--ease-out); }
.js .ab-rv.is-in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.ab-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(100svh, 920px); margin: 0 var(--inset); border-radius: 0 0 var(--r-xl) var(--r-xl); background: var(--ink-950); color: #fff; }
.ab-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); animation: abDrift 18s var(--ease-out) forwards; }
@keyframes abDrift { to { transform: scale(1); } }
.ab-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,6,13,.92) 0%, rgba(5,6,13,.7) 45%, rgba(5,6,13,.25) 100%), linear-gradient(0deg, rgba(5,6,13,.9) 0%, rgba(5,6,13,0) 55%); }
.ab-hero__in { padding-top: calc(var(--header-h) + clamp(72px, 9vw, 128px)); padding-bottom: clamp(40px, 5vw, 64px); }
.ab-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 3vw, 44px); font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .04em; color: rgba(255,255,255,.6); }
.ab-crumbs a:hover { color: #fff; }
.ab-hero h1 { max-width: 15ch; font-size: clamp(44px, 6.2vw, 92px); line-height: .98; letter-spacing: -.045em; color: #fff; }
.ab-hero h1 em { color: var(--teal); }
.ab-hero__lead { margin-top: 28px; max-width: 620px; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.65; color: rgba(238,241,255,.8); }
.ab-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.ab-highlights { list-style: none; margin: clamp(48px, 6vw, 88px) 0 0; padding: 26px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; border-top: 1px solid rgba(255,255,255,.16); }
.ab-highlights li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; }
.ab-highlights .ab-ic { grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; background: rgba(94,242,225,.1); border-color: rgba(94,242,225,.28); color: var(--teal); }
.ab-highlights strong { font-family: var(--f-label); font-size: 15.5px; font-weight: 600; color: #fff; }
.ab-highlights span:not(.ab-ic) { font-size: 14px; line-height: 1.45; color: rgba(238,241,255,.66); }

/* ---------- Section nav ---------- */

/* ---------- Sections ---------- */
.ab-sec { padding: clamp(80px, 9vw, 136px) 0; scroll-margin-top: 150px; }
.ab-sec--tint { background: var(--paper-2); }
.ab-sec--dark { position: relative; isolation: isolate; overflow: hidden; margin: 0 var(--inset); border-radius: var(--r-xl); background: var(--ink-950); color: var(--on-dark); }
.ab-sec--dark .ab-h2 { color: #fff; }
.ab-sec--dark .ab-h2 em { color: var(--teal); }
.ab-sec--dark .ab-lead { color: var(--on-dark-2); }
.ab-sec--last { padding-bottom: clamp(96px, 10vw, 150px); }
.ab-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(44px, 5vw, 72px); }
.ab-head--center { display: block; text-align: center; }
.ab-head--center .ab-h2 { margin: 0 auto; }

/* ---------- About: story ---------- */
.ab-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ab-intro .ab-h2 { margin-bottom: 26px; }
.ab-intro__media { position: relative; margin: 0; }
.ab-intro__media img { display: block; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--r-lg); }
.ab-badge { position: absolute; left: clamp(-28px, -2vw, -16px); bottom: -28px; display: flex; gap: 14px; align-items: flex-start; max-width: 380px; padding: 20px 22px; border-radius: var(--r-md); background: #fff; border: var(--rule); box-shadow: 0 30px 60px -30px rgba(11,18,32,.35); font-family: var(--f-serif); font-size: 19px; line-height: 1.35; color: var(--text); }
.ab-badge .ab-ic { width: 40px; height: 40px; }
.ab-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(72px, 8vw, 120px); }
.ab-card { padding: clamp(26px, 3vw, 40px); border-radius: var(--r-lg); background: #fff; border: var(--rule); box-shadow: 0 24px 50px -40px rgba(11,18,32,.35); transition: transform .5s var(--ease-out), box-shadow .5s; }
.ab-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(11,18,32,.4); }
.ab-card h3 { margin-top: 22px; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.025em; }
.ab-card p { margin-top: 10px; font-size: 16px; line-height: 1.65; color: var(--text-2); }

/* Value pillars: alternating image / text */
.ab-pillars { margin-top: clamp(96px, 10vw, 150px); display: grid; gap: clamp(56px, 6vw, 96px); }
.ab-pillars .ab-head { margin-bottom: 0; }
.ab-pillar { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ab-pillar--flip .ab-pillar__media { order: 2; }
.ab-pillar__media { overflow: hidden; border-radius: var(--r-lg); }
.ab-pillar__media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ab-pillar:hover .ab-pillar__media img { transform: scale(1.04); }
.ab-pillar__copy h3 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.03em; }
.ab-pillar__copy p { margin-top: 16px; font-size: 16.5px; line-height: 1.7; color: var(--text-2); }
.ab-ticks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.ab-ticks li { position: relative; padding-left: 30px; font-size: 15.5px; color: var(--text); }
.ab-ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 6px; background: #EEF3FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%232F6BFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }

/* Practice chips */
.ab-practices { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(96px, 10vw, 150px); padding: clamp(28px, 3.5vw, 48px); border-radius: var(--r-lg); background: var(--paper-2); }
.ab-practices h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -.03em; }
.ab-practices ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ab-practices a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: #fff; border: var(--rule); font-family: var(--f-label); font-size: 14.5px; font-weight: 500; color: var(--text); transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease-out); }
.ab-practices a::after { content: "\2192"; font-size: 13px; color: var(--blue); transition: transform .3s var(--ease-out), color .3s; }
.ab-practices a:hover { background: var(--text); border-color: var(--text); color: #fff; transform: translateY(-2px); }
.ab-practices a:hover::after { color: var(--teal); transform: translateX(3px); }

/* ---------- How we work: scroll story — pinned photo frame + floating product window, stages scroll past a glowing rail ---------- */
/* overflow: hidden would stop the photo frame from pinning (position: sticky); clip keeps the rounded corners without that */
.ab-sec--dark.ab-how { overflow: clip; }
@supports not (overflow: clip) { .ab-sec--dark.ab-how { overflow: visible; } }
.ab-how::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 50% 40% at 0% 30%, rgba(47,107,255,.24), transparent 70%), radial-gradient(ellipse 45% 40% at 100% 75%, rgba(94,242,225,.12), transparent 70%); pointer-events: none; }
.ab-journey { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(48px, 7vw, 120px); align-items: start; }

/* pinned media */
.ab-jm { position: sticky; top: calc(var(--header-h, 80px) + 40px); height: min(74vh, 620px); margin: 0 0 40px 32px; }
.ab-jm__orbit { position: absolute; right: -60px; top: -60px; z-index: 0; width: 240px; height: 240px; fill: none; stroke: rgba(94,242,225,.28); stroke-width: .8; stroke-dasharray: 3 5; animation: abOrbit 40s linear infinite; }
.ab-jm__orbit .ab-jm__sat { fill: var(--teal); stroke: none; filter: drop-shadow(0 0 6px rgba(94,242,225,.9)); }
@keyframes abOrbit { to { transform: rotate(360deg); } }
.ab-jm__frame { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 28px; background: #0B0F1E; box-shadow: 0 60px 120px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(190,205,255,.12); }
.ab-jm__frame::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(5,6,13,.1) 30%, rgba(5,6,13,.75) 100%), linear-gradient(90deg, rgba(47,107,255,.18), transparent 50%); pointer-events: none; }
.ab-jm__frame img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 100% 0); transform: scale(1.12); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1), transform 1.8s var(--ease-out); }
.ab-jm__frame img.is-on { z-index: 2; clip-path: inset(0 0 0 0); transform: scale(1); }
.ab-jm__frame img.is-prev { z-index: 1; clip-path: inset(0 0 0 0); }
.ab-jm__dots { position: absolute; right: 20px; top: 50%; z-index: 3; display: grid; gap: 10px; transform: translateY(-50%); }
.ab-jm__dots i { display: block; width: 6px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.45); transition: height .5s var(--ease-out), background .3s; }
.ab-jm__dots i.is-on { height: 28px; background: var(--teal); }
.ab-jm__layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); }
.ab-jm__layer.is-active { opacity: 1; }
.ab-jm__chip { position: absolute; left: 24px; top: 24px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px; background: rgba(5,6,13,.55); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--f-label); font-size: 14px; font-weight: 600; color: #fff; transform: translateY(-10px); transition: transform .6s var(--ease-out); }
.ab-jm__chip svg { width: 18px; height: 18px; fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-jm__layer.is-active .ab-jm__chip { transform: none; }
.ab-jm__layer .ab-win { position: absolute; left: -32px; bottom: -32px; width: min(400px, 78%); transform: translateY(24px) scale(.97); transition: transform .8s var(--ease-out) .15s; }
.ab-jm__layer.is-active .ab-win { transform: none; }

/* product window (glass) */
.ab-win { overflow: hidden; border-radius: 18px; background: rgba(11,15,30,.86); border: 1px solid rgba(190,205,255,.18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); }
.ab-win__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid rgba(190,205,255,.1); }
.ab-win__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.ab-win__bar i:first-child { background: #FF6B6B; } .ab-win__bar i:nth-child(2) { background: #F5A524; } .ab-win__bar i:nth-child(3) { background: #3DDC97; }
.ab-win__bar span { margin-left: 8px; font-family: var(--f-mono); font-size: 11.5px; color: var(--on-dark-3); }
.ab-win__body { padding: 16px 18px 18px; color: var(--on-dark); }
/* Assess: checklist ticks in one by one */
.ab-check ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ab-check li { position: relative; padding: 10px 12px 10px 40px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(190,205,255,.1); font-size: 13.5px; color: var(--on-dark); }
.ab-check li::before { content: ""; position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 5px; border: 1.5px solid rgba(190,205,255,.35); }
.ab-check li::after { content: ""; position: absolute; left: 18px; top: 50%; width: 5px; height: 10px; margin-top: -6px; border: solid var(--ink-950); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); }
.is-active .ab-check li::before { animation: abTickBox .4s var(--ease-out) both; }
.is-active .ab-check li::after { animation: abTick .35s var(--ease-out) both; }
.is-active .ab-check li:nth-child(1)::before, .is-active .ab-check li:nth-child(1)::after { animation-delay: .5s; }
.is-active .ab-check li:nth-child(2)::before, .is-active .ab-check li:nth-child(2)::after { animation-delay: .9s; }
.is-active .ab-check li:nth-child(3)::before, .is-active .ab-check li:nth-child(3)::after { animation-delay: 1.3s; }
.is-active .ab-check li:nth-child(4)::before, .is-active .ab-check li:nth-child(4)::after { animation-delay: 1.7s; }
@keyframes abTickBox { to { background: var(--teal); border-color: var(--teal); } }
@keyframes abTick { to { transform: rotate(45deg) scale(1); } }
/* Architect: diagram with flowing links */
.ab-arch svg { display: block; width: 100%; height: auto; }
.ab-arch__links path { fill: none; stroke: rgba(94,242,225,.6); stroke-width: 1.5; stroke-dasharray: 4 5; }
.is-active .ab-arch__links path { animation: abDash 1.2s linear infinite; }
@keyframes abDash { to { stroke-dashoffset: -18; } }
.ab-arch__node rect { fill: #151B33; stroke: rgba(190,205,255,.22); }
.ab-arch__node text { font-family: "Inter", sans-serif; font-size: 12.5px; font-weight: 600; fill: #EEF1FF; text-anchor: middle; }
.ab-arch__node--core rect { fill: #17245A; stroke: #7FA2FF; }
.is-active .ab-arch__node { animation: abIn .6s var(--ease-out) both; }
/* the first <g> holds the links, so the nodes are g 2–7 */
.is-active .ab-arch__node:nth-of-type(3) { animation-delay: .1s; } .is-active .ab-arch__node:nth-of-type(4) { animation-delay: .2s; }
.is-active .ab-arch__node:nth-of-type(5) { animation-delay: .35s; } .is-active .ab-arch__node:nth-of-type(6) { animation-delay: .5s; } .is-active .ab-arch__node:nth-of-type(7) { animation-delay: .6s; }
/* Deliver: sprint board, one card moves to Done */
.ab-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ab-board > div { display: grid; align-content: start; gap: 8px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(190,205,255,.08); }
.ab-board p { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-3); }
.ab-board span { padding: 9px 10px; border-radius: 8px; background: #151B33; border-left: 3px solid rgba(190,205,255,.35); font-size: 12.5px; line-height: 1.3; color: var(--on-dark); }
.ab-board .is-review { border-left-color: #F5A524; }
.ab-board .is-move { position: relative; z-index: 1; border-left-color: var(--blue); }
.ab-board .is-done { border-left-color: var(--teal); color: var(--on-dark-2); }
.is-active .ab-board .is-move { animation: abMove 2.4s var(--ease-out) 1s forwards; }
@keyframes abMove { 0% { transform: none; } 35% { transform: translate(0, -6px) rotate(-2deg); box-shadow: 0 18px 30px -14px rgba(0,0,0,.8); } 100% { transform: translate(calc(100% + 28px), 0); border-left-color: var(--teal); color: var(--on-dark-2); } }
/* Improve: live chart + health */
.ab-mon__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-mon__pills span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 12px; color: var(--on-dark); }
.ab-mon__pills span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.ab-mon__pills .is-ok::before { background: #3DDC97; animation: abPing 1.8s infinite; }
@keyframes abPing { 0% { box-shadow: 0 0 0 0 rgba(61,220,151,.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(61,220,151,0); } }
.ab-mon svg { display: block; width: 100%; height: 92px; margin-top: 12px; }
.ab-mon__area { fill: url(#abMonFill); }
.ab-mon__line { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-active .ab-mon__line { animation: abDraw 1.8s var(--ease-out) .3s forwards; }
@keyframes abDraw { to { stroke-dashoffset: 0; } }
.ab-mon__rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ab-mon__rows p { padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.05); }
.ab-mon__rows span { display: block; font-size: 11px; color: var(--on-dark-3); }
.ab-mon__rows b { display: block; margin-top: 2px; font-family: var(--f-label); font-size: 13px; font-weight: 600; color: #fff; }

/* scrolling stages + glowing rail */
.ab-jsteps { position: relative; padding-left: 76px; }
.ab-jsteps__rail { position: absolute; left: 23px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: rgba(190,205,255,.14); }
.ab-jsteps__fill { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(180deg, var(--teal), var(--blue)); box-shadow: 0 0 14px rgba(94,242,225,.6); transform: scaleY(0); transform-origin: 50% 0; }
.ab-jsteps__list { list-style: none; margin: 0; padding: 0; }
.ab-jstep { position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-height: 66vh; padding: 0 0 48px; opacity: .35; transition: opacity .6s var(--ease); }
.ab-jstep:last-child { min-height: 70vh; padding-bottom: 0; } /* keeps the photo frame pinned while Improve is read */
.ab-jstep.is-on { opacity: 1; }
.ab-jstep__node { position: absolute; left: -76px; top: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #0B0F1E; border: 1.5px solid rgba(190,205,255,.25); color: var(--on-dark-2); transition: border-color .5s, color .5s, box-shadow .5s, background .5s; }
.ab-jstep__node svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-jstep.is-on .ab-jstep__node { background: linear-gradient(140deg, #1742C0, #2F6BFF); border-color: var(--teal); color: #fff; box-shadow: 0 0 0 6px rgba(94,242,225,.12), 0 0 30px rgba(47,107,255,.6); }
.ab-jstep__img { display: none; }
.ab-jstep__k { font-family: var(--f-label); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.ab-jstep h3 { margin-top: 10px; font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -.04em; color: #fff; }
.ab-jstep h3 + p { margin-top: 16px; max-width: 460px; font-size: 16.5px; line-height: 1.7; color: var(--on-dark-2); }
.ab-jstep__chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ab-jstep__chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(190,205,255,.2); background: rgba(255,255,255,.04); font-size: 14px; color: var(--on-dark); }
.ab-jstep__chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.ab-jstep__out { display: flex; align-items: center; gap: 14px; max-width: 460px; margin-top: 22px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(120deg, rgba(47,107,255,.2), rgba(94,242,225,.08)); border: 1px solid rgba(94,242,225,.22); }
.ab-jstep__out svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: rgba(94,242,225,.14); fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-jstep__out small { display: block; font-family: var(--f-label); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.ab-jstep__out span { font-size: 15px; line-height: 1.45; color: #fff; }

/* engagement models: photo cards */
.ab-models__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin: clamp(72px, 8vw, 120px) 0 28px; padding-top: 40px; border-top: 1px solid var(--line-dark); }
.ab-models__head .ab-k { margin: 0; }
.ab-models__head h3 { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.03em; color: #fff; }
.ab-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ab-model { overflow: hidden; border-radius: var(--r-lg); background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); transition: transform .5s var(--ease-out), border-color .4s, box-shadow .5s; }
.ab-model:hover { transform: translateY(-6px); border-color: rgba(94,242,225,.35); box-shadow: 0 40px 70px -40px rgba(0,0,0,.9); }
.ab-model__img { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.ab-model__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ab-model:hover .ab-model__img img { transform: scale(1.07); }
.ab-model__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(5,6,13,.75)); }
.ab-model__img .ab-ic { position: absolute; left: 20px; bottom: -22px; z-index: 1; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(140deg, #1742C0, #2F6BFF); border: 0; color: #fff; box-shadow: 0 16px 30px -12px rgba(47,107,255,.9); }
.ab-model__body { padding: 36px 24px 26px; }
.ab-model h3 { font-size: 21px; letter-spacing: -.02em; color: #fff; }
.ab-model p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--on-dark-2); }
.ab-model .ab-model__fit { display: inline-flex; margin-top: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(94,242,225,.12); font-family: var(--f-label); font-size: 12.5px; font-weight: 600; color: var(--teal); }

@media (max-width: 960px) {
  /* no pinning on small screens: each stage shows its own photo */
  .ab-journey { grid-template-columns: minmax(0, 1fr); }
  .ab-jm { display: none; }
  .ab-jstep { min-height: 0; padding: 28px 0; opacity: 1; }
  .ab-jstep__node { top: 28px; }
  .ab-jstep__img { display: block; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 20px; border-radius: var(--r-md); object-fit: cover; }
  .ab-models { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ab-jsteps { padding-left: 56px; }
  .ab-jsteps__rail { left: 17px; }
  .ab-jstep__node { left: -56px; width: 36px; height: 36px; }
  .ab-jstep__node svg { width: 16px; height: 16px; }
}

/* ---------- Clients ---------- */
.ab-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ab-logos li { display: grid; place-items: center; height: 120px; padding: 20px 26px; border-radius: var(--r-md); background: #fff; border: var(--rule); transition: transform .4s var(--ease-out), box-shadow .4s; }
.ab-logos li:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -30px rgba(11,18,32,.4); }
.ab-logos img { display: block; max-width: 100%; max-height: 60px; width: auto; height: auto; object-fit: contain; }
.ab-sectors { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 40px; padding-top: 28px; border-top: var(--rule); }
.ab-sectors p { font-family: var(--f-label); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ab-sectors ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ab-sectors li { padding: 8px 14px; border-radius: 999px; background: var(--paper-2); font-size: 14px; color: var(--text-2); }

/* ---------- Client testimonials: portrait deck + word-by-word quote + avatar rail with progress rings ----------
   The deck fans the next two clients behind the active one; on change the front card flies off to the left.
   JS sets data-pos on each .ab-tq (0 front, 1 right peek, 2 left peek, out = just left, far = waiting) and --p (0-1) on the active rail button. */
.col-video { position: relative; overflow: hidden; padding: clamp(70px, 9vw, 120px) 0; }
.col-video__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 7vw, 90px); align-items: center; }
.col-video__copy h2 { margin-top: 14px; max-width: 540px; }
.col-video__copy .ab-lead { margin-top: 20px; }
.col-video__figure { position: relative; aspect-ratio: 16 / 10; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; background: #05060d; box-shadow: 0 34px 80px -42px rgba(0,0,0,.8); }
.col-video__video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.col-video__figure::after { content: ""; position: absolute; inset: 45% 0 0; pointer-events: none; background: linear-gradient(transparent,rgba(5,6,13,.8)); }
.col-video__figure figcaption { position: absolute; z-index: 2; left: 24px; bottom: 20px; display: grid; gap: 3px; color: #fff; pointer-events: none; }
.col-video__figure figcaption span { color: var(--on-dark-2); font-size: 13px; }
.col-video__play,.voices__play-audio { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 13px 20px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(5,6,13,.82); color: #fff; font: inherit; font-weight: 700; cursor: pointer; backdrop-filter: blur(12px); }
.col-video__play[hidden],.voices__play-audio[hidden] { display: none; }
.col-video__play:focus-visible,.voices__play-audio:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
@media(max-width:760px) { .col-video__inner { grid-template-columns: 1fr; } .col-video__figure { aspect-ratio: 4 / 3; } }

.ab-voices::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 55% 50% at 15% 0%, rgba(47,107,255,.28), transparent 70%), radial-gradient(ellipse 40% 45% at 100% 100%, rgba(94,242,225,.12), transparent 70%); pointer-events: none; }
.ab-av { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: linear-gradient(140deg, var(--c1, #2F6BFF), var(--c2, #5EF2E1)); font-family: var(--f-label); font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: #fff; }
.ab-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-family: var(--f-label); font-size: 12.5px; font-weight: 500; line-height: 1.2; }
.ab-tag svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-spot__arrows { display: flex; gap: 8px; }
.ab-spot__arrows button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-dark-2); color: #fff; transition: background .3s, color .3s, border-color .3s; }
.ab-spot__arrows button:hover { background: #fff; border-color: #fff; color: var(--ink-950); }
.ab-spot__arrows svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes abIn { from { opacity: 0; transform: translateY(14px); } }

.ab-tm { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(48px, 7vw, 112px); align-items: center; margin-top: clamp(16px, 2vw, 32px); }
/* Deck */
.ab-tm__deck { position: relative; justify-self: center; width: min(400px, 100%); aspect-ratio: 4 / 5; touch-action: pan-y; }
.ab-tm__halo { position: absolute; left: 50%; top: 50%; z-index: -1; width: 150%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(94,242,225,.22); transform: translate(-50%, -50%); animation: abHalo 60s linear infinite; pointer-events: none; }
.ab-tm__halo::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px solid rgba(47,107,255,.18); }
.ab-tm__halo::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(47,107,255,.35), transparent); }
@keyframes abHalo { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ab-tq { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: 28px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(150deg, var(--c1, #2F6BFF), var(--c2, #5EF2E1)); box-shadow: 0 50px 90px -40px rgba(0,0,0,.9); cursor: pointer; transform-origin: 50% 100%; transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .6s var(--ease), filter .6s var(--ease); }
.ab-tq__ini { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 22%; font-family: var(--f-display); font-size: clamp(88px, 10vw, 140px); font-weight: 600; letter-spacing: -.04em; color: rgba(255,255,255,.92); }
.ab-tq img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ab-tq::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,6,13,.92) 0%, rgba(5,6,13,.55) 26%, rgba(5,6,13,0) 52%), linear-gradient(160deg, rgba(47,107,255,.18), transparent 40%); pointer-events: none; }
.ab-tq figcaption { position: absolute; z-index: 1; left: 26px; right: 26px; bottom: 24px; color: #fff; }
.ab-tq figcaption strong { display: block; font-family: var(--f-display); font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.03em; }
.ab-tq figcaption span { display: block; margin-top: 4px; font-size: 14px; color: var(--on-dark-2); }
.ab-tq__tags, .ab-tq blockquote { display: none; }
.ab-tq[data-pos="0"] { z-index: 5; cursor: default; }
.ab-tq[data-pos="1"] { z-index: 4; transform: translateX(20%) rotate(7deg) scale(.88); filter: brightness(.5) saturate(.7); }
.ab-tq[data-pos="2"] { z-index: 3; transform: translateX(-20%) rotate(-7deg) scale(.84); filter: brightness(.4) saturate(.6); }
.ab-tq[data-pos="1"]:hover, .ab-tq[data-pos="2"]:hover { filter: brightness(.75); }
.ab-tq[data-pos="out"] { z-index: 6; opacity: 0; transform: translate(-80%, 8%) rotate(-22deg) scale(.9); pointer-events: none; }
.ab-tq[data-pos="far"] { z-index: 1; opacity: 0; transform: scale(.7); pointer-events: none; }
.ab-tm__mark { position: absolute; z-index: 7; top: -26px; right: -18px; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: linear-gradient(135deg, var(--blue), var(--teal)); box-shadow: 0 20px 40px -14px rgba(47,107,255,.8); transform: rotate(8deg); animation: abBob 5s ease-in-out infinite; }
.ab-tm__mark svg { width: 34px; height: 28px; fill: #fff; }
@keyframes abBob { 50% { transform: rotate(4deg) translateY(-8px); } }
/* Quote */
.ab-tm__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-tm__tags .ab-tag { border: 1px solid var(--line-dark-2); background: rgba(255,255,255,.06); color: var(--on-dark); }
.ab-tm__tags .ab-tag svg { color: var(--teal); }
.ab-tm__q { min-height: 5.1em; margin: 26px 0 0; font-family: var(--f-display); font-size: clamp(26px, 2.7vw, 40px); font-weight: 500; line-height: 1.24; letter-spacing: -.03em; color: #fff; }
.ab-tm__q.is-long { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.38; }
.ab-tm__q span { display: inline-block; animation: abWord .7s var(--ease-out) both; animation-delay: calc(var(--w) * 35ms); }
.ab-tm__q em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--teal); }
@keyframes abWord { from { opacity: 0; transform: translateY(.45em); filter: blur(6px); } }
.ab-tm__by { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.ab-tm__by::before { content: ""; width: 40px; height: 2px; background: linear-gradient(90deg, var(--blue), var(--teal)); }
.ab-tm__name { font-family: var(--f-label); font-size: 17px; font-weight: 600; color: #fff; }
.ab-tm__role { font-size: 15px; color: var(--on-dark-2); }
.ab-tm.is-play .ab-tm__tags, .ab-tm.is-play .ab-tm__by { animation: abIn .7s var(--ease-out) both; }
.ab-tm.is-play .ab-tm__by { animation-delay: .35s; }
/* Rail: one avatar per client; the active one wears a ring that fills as its time runs */
.ab-tm__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-dark); }
.ab-tm__rail { display: flex; flex-wrap: wrap; gap: 10px; }
.ab-tm__rail button { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; transition: transform .4s var(--ease-out); }
.ab-tm__rail .ab-av { width: 46px; height: 46px; font-size: 13px; filter: grayscale(1); opacity: .55; transition: filter .3s, opacity .3s; }
.ab-tm__rail svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 2; }
.ab-tm__rail circle { stroke: rgba(255,255,255,.1); }
.ab-tm__rail circle + circle { stroke: var(--teal); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.ab-tm__rail button:hover { transform: translateY(-3px); }
.ab-tm__rail button:hover .ab-av, .ab-tm__rail button[aria-selected="true"] .ab-av { filter: none; opacity: 1; }
.ab-tm__rail button[aria-selected="true"] circle + circle { stroke-dashoffset: calc(100 - var(--p, 0) * 100); }
.ab-tm__rail button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Client company names drifting past */
@media (max-width: 1100px) {
  .ab-tm { grid-template-columns: minmax(0, 1fr); }
  .ab-tm__deck { width: min(340px, 78%); margin-top: 24px; }
  .ab-tm__q { min-height: 0; }
}
@media (max-width: 600px) {
  .ab-tm__mark { width: 56px; height: 56px; right: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-tm__halo, .ab-tm__mark, .ab-tm__q span { animation: none; }
  .ab-tq { transition: opacity .3s, filter .3s; }
}

/* ---------- Portfolio ---------- */
.ab-work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ab-case { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: #fff; border: var(--rule); transition: transform .5s var(--ease-out), box-shadow .5s; }
.ab-case:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -40px rgba(11,18,32,.5); }
.ab-case__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--paper-2); }
.ab-case__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ab-case:hover .ab-case__media > img { transform: scale(1.06); }
.ab-case__logo { position: absolute; left: 16px; bottom: 16px; display: grid; place-items: center; height: 52px; padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,.95); box-shadow: 0 10px 24px -14px rgba(11,18,32,.5); }
.ab-case__logo img { display: block; max-height: 34px; max-width: 130px; width: auto; object-fit: contain; }
.ab-case__body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.ab-case__tag { font-family: var(--f-label); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.ab-case h3 { margin-top: 10px; font-size: 22px; line-height: 1.2; letter-spacing: -.025em; }
.ab-case p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.ab-case a { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; font-family: var(--f-label); font-size: 14.5px; font-weight: 600; color: var(--blue-700); }
.ab-case a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease-out); }
.ab-case a:hover svg { transform: translateX(4px); }

/* ---------- Awards ---------- */
.ab-awards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab-award { position: relative; overflow: hidden; padding: 30px; border-radius: var(--r-lg); background: #fff; border: var(--rule); transition: transform .5s var(--ease-out), box-shadow .5s; }
.ab-award::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(closest-side, rgba(47,107,255,.12), transparent); pointer-events: none; }
.ab-award:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -40px rgba(11,18,32,.45); }
.ab-award__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(140deg, #F5A524, #F7C35C); color: #fff; box-shadow: 0 14px 26px -14px rgba(245,165,36,.9); }
.ab-award__ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-award small { display: block; margin-top: 24px; font-family: var(--f-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ab-award h3 { margin-top: 8px; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.ab-award p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.ab-reviews { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 20px; padding: 24px 30px; border-radius: var(--r-lg); background: var(--ink-950); color: #fff; }
.ab-reviews p { font-family: var(--f-label); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-2); }
.ab-reviews ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 36px; }
.ab-reviews li { display: flex; align-items: center; gap: 12px; }
.ab-reviews strong { font-family: var(--f-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.ab-stars { font-style: normal; font-size: 15px; letter-spacing: 2px; line-height: 1; color: #F5A524; }
.ab-stars::before { content: "\2605\2605\2605\2605\2605"; }

/* ---------- Careers: copy + image accordion (open panel widens, its story fades in) ---------- */
.ab-careers { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.ab-careers .ab-h2 { margin-bottom: 22px; }
.ab-careers__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.ab-roles__label { margin-top: 30px; font-family: var(--f-label); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ab-roles { list-style: none; margin: 12px 0 34px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ab-roles li { padding: 8px 14px; border-radius: 999px; border: var(--rule); font-size: 14px; color: var(--text-2); }
.ab-acc { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; height: clamp(440px, 38vw, 540px); }
.ab-acc__item { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; isolation: isolate; border-radius: var(--r-md); background: var(--ink-950); transition: flex-grow .6s var(--ease-out); }
.ab-acc__item.is-active { flex-grow: 6; }
.ab-acc__item > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.2s var(--ease-out); }
.ab-acc__item.is-active > img { transform: scale(1); }
.ab-acc__item::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,6,13,.15) 0%, rgba(5,6,13,.55) 55%, rgba(5,6,13,.85) 100%); transition: background .6s; }
.ab-acc__item:not(.is-active)::after { background: rgba(5,6,13,.45); }
/* collapsed: name runs bottom-to-top on a coloured band */
.ab-acc__tab { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; width: 100%; padding: 0 0 24px; cursor: pointer; transition: opacity .3s; }
.ab-acc__tab span { writing-mode: vertical-rl; transform: rotate(180deg); padding: 18px 10px; border-radius: 10px; background: var(--band); font-family: var(--f-display); font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; color: var(--ink); box-shadow: 0 16px 30px -16px rgba(0,0,0,.6); transition: transform .4s var(--ease-out); }
.ab-acc__item:not(.is-active):hover .ab-acc__tab span { transform: rotate(180deg) translateY(6px); }
.ab-acc__item.is-active .ab-acc__tab { opacity: 0; pointer-events: none; }
/* open: title + story fade up after the panel has widened */
.ab-acc__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px, 3vw, 40px); color: #fff; opacity: 0; transform: translateY(18px); visibility: hidden; transition: opacity .3s, transform .3s, visibility 0s .3s; }
.ab-acc__item.is-active .ab-acc__body { min-width: 320px; opacity: 1; transform: none; visibility: visible; transition: opacity .6s .35s, transform .8s var(--ease-out) .35s, visibility 0s; }
.ab-acc__body h3 { display: inline-block; padding-bottom: 10px; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.03em; color: #fff; border-bottom: 3px solid var(--band); }
.ab-acc__body p { max-width: 460px; margin-top: 14px; font-size: 15.5px; line-height: 1.65; color: rgba(238,241,255,.86); }
@media (max-width: 760px) {
  /* stacked: panels become rows; the open one grows taller */
  .ab-acc { flex-direction: column; height: auto; gap: 10px; }
  .ab-acc__item { flex: none; height: 76px; transition: height .6s var(--ease-out); }
  .ab-acc__item.is-active { height: 380px; }
  .ab-acc__tab { align-items: center; justify-content: flex-start; padding: 0 16px; }
  .ab-acc__tab span { writing-mode: horizontal-tb; transform: none; padding: 8px 14px; font-size: 17px; }
  .ab-acc__item:not(.is-active):hover .ab-acc__tab span { transform: translateX(4px); }
  .ab-acc__item.is-active .ab-acc__body { min-width: 0; }
}

/* ---------- Contact ---------- */
.ab-contact { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: center; padding: clamp(32px, 5vw, 72px); border-radius: var(--r-xl); background: linear-gradient(135deg, #EEF3FF 0%, #FFFFFF 55%, #ECFAF8 100%); border: var(--rule); }
.ab-contact .ab-h2 { margin-bottom: 22px; }
.ab-contact__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.ab-contact__list { margin: 0; padding: 8px 28px; border-radius: var(--r-lg); background: #fff; border: var(--rule); box-shadow: 0 30px 60px -44px rgba(11,18,32,.45); }
.ab-contact__list div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 18px 0; border-bottom: var(--rule); }
.ab-contact__list div:last-child { border-bottom: 0; }
.ab-contact__list dt { padding-top: 2px; font-family: var(--f-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ab-contact__list dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text); }
.ab-contact__list dd a { font-weight: 500; }
.ab-contact__list dd a:hover { color: var(--blue-700); }
.ab-contact__list dd small { display: block; font-size: 14px; color: var(--text-3); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .ab-highlights { grid-template-columns: 1fr 1fr; }
  .ab-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ab-intro, .ab-careers, .ab-contact, .ab-practices { grid-template-columns: minmax(0, 1fr); }
  .ab-badge { left: 16px; right: 16px; }
  .ab-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-work, .ab-awards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .ab-mv { grid-template-columns: minmax(0, 1fr); }
  .ab-pillar, .ab-pillar--flip { grid-template-columns: minmax(0, 1fr); }
  .ab-pillar--flip .ab-pillar__media { order: 0; }
}
@media (max-width: 600px) {
  .ab-hero { margin: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .ab-highlights, .ab-work, .ab-awards { grid-template-columns: minmax(0, 1fr); }
  .ab-logos { grid-template-columns: 1fr 1fr; }
  .ab-logos li { height: 96px; padding: 16px; }
  .ab-sec--dark { margin: 0; border-radius: var(--r-lg); }
  .ab-contact__list { padding: 4px 20px; }
  .ab-contact__list div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ab-reviews { padding: 22px; }
}

/* ==========================================================================
   Contact Us page — <main id="contact">. Shares the About page type (.ab-k, .ab-h2, .ab-lead, .ab-sec, .ab-head)
   and the home contact form (.form, .field, .pills); everything else is ct-.
   Hero photo: Unsplash (Unsplash License)
   ========================================================================== */
.ct { --rule: 1px solid var(--line); }
.js.io .ct-rv { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform 1s var(--ease-out); }
.js.io .ct-rv.is-in { opacity: 1; transform: none; }
.ct-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(47,107,255,.08); border: 1px solid rgba(47,107,255,.16); color: var(--blue); }
.ct-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ct .ab-h2 em { color: var(--blue); }

/* ---------- Hero ---------- */
.ct-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(90svh, 820px); margin: 0 var(--inset); border-radius: 0 0 var(--r-xl) var(--r-xl); background: var(--ink-950); color: #fff; }
.ct-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); animation: abDrift 18s var(--ease-out) forwards; }
.ct-hero__shade { position: absolute; inset: 0; z-index: -1; background: var(--hero-shade); }
.ct-hero__in { width: 100%; padding-top: calc(var(--header-h) + clamp(64px, 8vw, 112px)); padding-bottom: clamp(36px, 4vw, 56px); }
.ct-hero h1 { max-width: 13ch; font-size: clamp(44px, 6.2vw, 92px); line-height: .98; letter-spacing: -.045em; color: #fff; }
.ct-hero h1 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--teal); }
.ct-hero__lead { margin-top: 26px; max-width: 600px; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.65; }
.ct-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.ct-quick { list-style: none; margin: clamp(44px, 5vw, 76px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ct-quick li > * { display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px 18px; border-radius: var(--r-lg); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; transition: background .3s, border-color .3s, transform .5s var(--ease-out); }
.ct-quick a:hover { background: rgba(255,255,255,.12); border-color: rgba(94,242,225,.4); transform: translateY(-3px); }
.ct-quick .ct-ic { background: rgba(94,242,225,.1); border-color: rgba(94,242,225,.24); color: var(--teal); }
.ct-quick small { display: block; margin-bottom: 3px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.ct-quick strong { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }

/* ---------- Start a project: what happens next + form ---------- */
.ct-start { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ct-start__aside { position: sticky; top: calc(var(--header-h) + 32px); }
.ct-steps { list-style: none; margin: 40px 0 0; padding: 0; border-top: var(--rule); }
.ct-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: var(--rule); }
.ct-steps strong { display: block; font-family: var(--f-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.ct-steps p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.ct-note { margin-top: 26px; font-size: 15px; color: var(--text-2); }
.ct-note a { font-weight: 600; color: var(--blue); }
.ct-note a:hover { color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; }
.ct-start .form { border: var(--rule); box-shadow: 0 40px 90px -50px rgba(11,18,32,.45); }

/* ---------- Ways to reach us ---------- */
.ct-ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ct-way { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--r-lg); border: var(--rule); background: #fff; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s; }
.ct-way:hover { transform: translateY(-4px); border-color: rgba(47,107,255,.35); box-shadow: 0 30px 60px -40px rgba(11,18,32,.4); }
.ct-way h3 { margin-top: 6px; font-size: 21px; letter-spacing: -.025em; color: var(--text); }
.ct-way p { flex: 1; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.ct-way__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--blue); }
.ct-way__link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease-out); }
.ct-way:hover .ct-way__link svg { transform: translateX(4px); }

/* ---------- Offices ---------- */
.ct-offices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.ct-office { overflow: hidden; border-radius: var(--r-xl); border: var(--rule); background: #fff; }
.ct-office__map { position: relative; aspect-ratio: 16 / 9; background: var(--paper-2); }
.ct-office__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.25); }
.ct-office__body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 26px 28px 30px; }
.ct-office h3 { font-size: 24px; letter-spacing: -.03em; color: var(--text); }
.ct-office p { margin-top: 6px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.ct-office__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ---------- FAQ ---------- */
.ct-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ct-qa { border-top: var(--rule); }
.ct-qa details { border-bottom: var(--rule); }
.ct-qa summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; list-style: none; cursor: pointer; font-family: var(--f-display); font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.ct-qa summary::-webkit-details-marker { display: none; }
.ct-qa summary i { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; border: var(--rule); color: var(--text); transition: background .3s, color .3s, transform .5s var(--ease-out); }
.ct-qa summary i::before, .ct-qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; border-radius: 2px; background: currentColor; transition: transform .4s var(--ease-out); }
.ct-qa summary i::after { transform: rotate(90deg); }
.ct-qa summary:hover i { border-color: var(--text-3); }
.ct-qa details[open] summary i { background: var(--text); border-color: var(--text); color: #fff; transform: rotate(180deg); }
.ct-qa details[open] summary i::after { transform: rotate(0); }
.ct-qa summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
.ct-qa details p { padding: 0 56px 26px 0; font-size: 16px; line-height: 1.7; color: var(--text-2); }

/* ---------- Follow band ---------- */
.ct-band { position: relative; isolation: isolate; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: clamp(36px, 5vw, 72px); border-radius: var(--r-xl); background: var(--ink-950); color: var(--on-dark); }
.ct-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 55% 80% at 0% 0%, rgba(47,107,255,.34), transparent 70%), radial-gradient(ellipse 40% 70% at 100% 100%, rgba(94,242,225,.14), transparent 70%); pointer-events: none; }
.ct-band .ab-h2 { color: #fff; }
.ct-band .ab-h2 em { color: var(--teal); }
.ct-band .ab-lead { margin-top: 16px; color: var(--on-dark-2); }
.ct-band__ctas { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }

@media (max-width: 1100px) {
  .ct-quick, .ct-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-start, .ct-faq { grid-template-columns: minmax(0, 1fr); }
  .ct-start__aside { position: static; }
  .ct-band { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .ct-quick, .ct-ways, .ct-offices { grid-template-columns: minmax(0, 1fr); }
  .ct-office__body { padding: 22px; }
  .ct-qa details p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js.io .ct-rv { opacity: 1; transform: none; transition: none; }
  .ct-hero__bg { animation: none; transform: none; }
}

/* ==========================================================================
   Product pages — Svarank (<main id="svarank">) and PyHRM (<main id="pyhrm">), opened from the Products menu.
   Shared: pd- (hero, cards, comparison table). Svarank visuals: sv-. PyHRM visuals: hr-.
   Type, sections, FAQ and the closing band reuse the About / Contact pieces (.ab-k, .ab-h2, .ab-sec, .ct-ic, .ct-band).
   PyHRM hero photo: Unsplash (Unsplash License)
   ========================================================================== */
.pd { --rule: 1px solid var(--line); }
.js.io .pd-rv { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform 1s var(--ease-out); }
.js.io .pd-rv.is-in { opacity: 1; transform: none; }
.pd .ab-h2 em { color: var(--blue); }
.pd .ab-sec--dark .ab-h2 em, .pd .ct-band .ab-h2 em { color: var(--teal); }

/* ---------- Hero ---------- */
.pd-hero { position: relative; isolation: isolate; overflow: hidden; margin: 0 var(--inset); border-radius: 0 0 var(--r-xl) var(--r-xl); background: var(--ink-950); color: #fff; }
.pd-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 70% at 85% 40%, rgba(47,107,255,.32), transparent 70%), radial-gradient(ellipse 40% 50% at 10% 100%, rgba(94,242,225,.12), transparent 70%); pointer-events: none; }
.pd-hero__bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
.pd-hero__shade { position: absolute; inset: 0; z-index: -2; background: var(--hero-shade); }
.pd-hero--photo::before { display: none; }
.pd-hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 5vw, 80px); align-items: center; padding-top: calc(var(--header-h) + clamp(56px, 7vw, 100px)); padding-bottom: clamp(56px, 6vw, 96px); }
.pd-hero h1 { max-width: 14ch; font-size: clamp(42px, 5.4vw, 80px); line-height: 1; letter-spacing: -.045em; color: #fff; }
.pd-hero h1 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--teal); }
.pd-hero__lead { margin-top: 24px; max-width: 580px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; color: rgba(238,241,255,.82); }
.pd-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pd-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; padding: 0; }
.pd-tags li { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.82); }

/* ---------- Shared cards and table ---------- */
.pd-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pd-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pd-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: var(--r-lg); border: var(--rule); background: #fff; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s; }
.pd-card:hover { transform: translateY(-4px); border-color: rgba(47,107,255,.35); box-shadow: 0 30px 60px -40px rgba(11,18,32,.4); }
.pd-card h3 { margin-top: 6px; font-size: 20px; letter-spacing: -.025em; color: var(--text); }
.pd-card p { font-size: 15.5px; line-height: 1.6; color: var(--text-2); }

@keyframes svOrbit { to { stroke-dashoffset: -480; } }
@keyframes svSpoke { from { stroke-dashoffset: 14; } to { stroke-dashoffset: -100; } }
@keyframes svHub { from { transform: scale(1); opacity: .8; } to { transform: scale(1.75); opacity: 0; } }
.pd-note strong { color: var(--text); }
.pd-split { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.pd-checks { list-style: none; display: grid; gap: 12px; margin: 28px 0 0; padding: 0; }
.pd-checks li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.pd-checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(47,107,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.5 2.6 2.6L14 7.5' fill='none' stroke='%232F6BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.pd-checks strong { color: var(--text); }

/* ---------- Svarank: live call card ---------- */
.sv-call { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 50px 100px -50px rgba(0,0,0,.8); }
.sv-call__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.sv-live { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.sv-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(94,242,225,.6); animation: svPulse 1.8s infinite; }
@keyframes svPulse { 70% { box-shadow: 0 0 0 10px rgba(94,242,225,0); } 100% { box-shadow: 0 0 0 0 rgba(94,242,225,0); } }
.sv-wave { display: flex; align-items: center; gap: 4px; height: 64px; margin: 22px 0; }
.sv-wave span { flex: 1; height: var(--h, 50%); border-radius: 3px; background: linear-gradient(180deg, var(--teal), var(--blue)); transform-origin: center; animation: svWave 1.1s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes svWave { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.sv-msgs { display: grid; gap: 10px; }
.sv-msg { max-width: 88%; padding: 12px 16px; border-radius: 16px; font-size: 15px; line-height: 1.5; opacity: 0; animation: svIn .6s var(--ease-out) forwards; }
.sv-msg small { display: block; margin-bottom: 4px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.sv-msg--caller { background: rgba(255,255,255,.09); color: rgba(255,255,255,.92); border-bottom-left-radius: 4px; }
.sv-msg--agent { margin-left: auto; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.sv-msg:nth-child(2) { animation-delay: .5s; } .sv-msg:nth-child(3) { animation-delay: 1s; } .sv-msg:nth-child(4) { animation-delay: 1.5s; }
@keyframes svIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sv-call__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em; color: rgba(255,255,255,.7); }
.sv-call__foot b { padding: 5px 10px; border-radius: 999px; background: rgba(94,242,225,.1); color: var(--teal); font-weight: 500; }

/* Halo: Svarank's answer for one capability sits in the centre; eight capability circles float on dotted rings around it.
   The active capability cycles on its own; hover, focus or click a circle to bring it to the centre. */
.sv-halo { position: relative; height: 680px; margin-bottom: 24px; }
.sv-halo__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 3px dotted rgba(47,107,255,.32); transform: translate(-50%, -50%); -webkit-mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); pointer-events: none; }
.sv-halo__ring--1 { width: 58%; height: 120%; }
.sv-halo__ring--2 { width: 78%; height: 128%; border-color: rgba(47,107,255,.24); }
.sv-halo__ring--3 { width: 100%; height: 136%; border-color: rgba(47,107,255,.16); }
.sv-halo__core { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; justify-items: center; width: min(560px, 50%); text-align: center; transform: translate(-50%, -50%); }
.sv-halo__k { font-family: var(--f-label); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.sv-halo__k::before, .sv-halo__k::after { content: "/"; margin: 0 8px; }
.sv-halo__t { margin-top: 14px; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.08; letter-spacing: -.04em; color: var(--blue); }
.sv-halo__was { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--paper-2); font-size: 15.5px; color: var(--text-2); }
.sv-halo__was span:first-child { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-label); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.sv-halo__was span:first-child::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: rgba(11,18,32,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m7 7 6 6M13 7l-6 6' fill='none' stroke='%238A93A6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.sv-halo__old { text-decoration: line-through; text-decoration-color: rgba(138,147,166,.6); }
.sv-halo.is-swap .sv-halo__k, .sv-halo.is-swap .sv-halo__t, .sv-halo.is-swap .sv-halo__was { animation: abIn .6s var(--ease-out) both; }
.sv-halo.is-swap .sv-halo__t { animation-delay: .06s; }
.sv-halo.is-swap .sv-halo__was { animation-delay: .12s; }
.sv-halo__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.sv-halo__nodes { list-style: none; margin: 0; padding: 0; }
.sv-halo__node { position: absolute; z-index: 1; left: var(--x); top: var(--y); display: grid; justify-items: center; gap: 10px; transform: translate(-50%, -50%); }
.sv-halo__node button { --s: 104px; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; background: var(--bg, var(--blue)); color: #fff; box-shadow: 0 24px 40px -20px rgba(11,18,32,.5); animation: svFloat 6s ease-in-out infinite; animation-delay: var(--b, 0s); transition: transform .4s var(--ease-out), box-shadow .4s; }
.sv-halo__node--l button { --s: 140px; }
.sv-halo__node--s button { --s: 84px; }
.sv-halo__node--navy button { --bg: linear-gradient(150deg, #1D3A8F, #0B1638); }
.sv-halo__node--blue button { --bg: linear-gradient(150deg, #4F86FF, #2458E8); }
.sv-halo__node--soft button { --bg: #EEF2FA; color: var(--blue); box-shadow: 0 24px 40px -24px rgba(11,18,32,.35); }
.sv-halo__node svg { width: 38%; height: 38%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sv-halo__node button:hover, .sv-halo__node button:focus-visible { transform: scale(1.08); }
.sv-halo__node button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.sv-halo__node.is-on button { box-shadow: 0 0 0 6px #fff, 0 0 0 9px var(--teal), 0 24px 40px -18px rgba(47,107,255,.6); }
.sv-halo__lbl { padding: 3px 10px; border-radius: 999px; background: #fff; font-family: var(--f-label); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); transition: color .3s; }
.sv-halo__node.is-on .sv-halo__lbl { color: var(--blue); }
@keyframes svFloat { 50% { translate: 0 -10px; } }
@media (max-width: 1100px) {
  .sv-halo { height: auto; }
  .sv-halo__ring { display: none; }
  .sv-halo__core { position: relative; left: auto; top: auto; width: auto; transform: none; }
  .sv-halo__nodes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 12px; margin-top: 44px; }
  .sv-halo__node { position: static; transform: none; }
  .sv-halo__node button, .sv-halo__node--l button, .sv-halo__node--s button { --s: 76px; animation: none; }
}
@media (max-width: 600px) {
  .sv-halo__nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-halo__node button { animation: none; }
}
/* ---------- Svarank: IVR vs conversation infographic ----------
   One caller, one question, two phones. Messages play in order (--i) once the figure scrolls into view (.is-in). */
.sv-ig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 230px) minmax(0, 1fr); align-items: center; gap: clamp(16px, 2.5vw, 36px); margin: 0 0 clamp(56px, 6vw, 88px); }
.sv-ig__q { display: grid; justify-items: center; gap: 14px; text-align: center; }
.sv-ig__who { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin: 18px 0 6px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--teal)); color: #fff; box-shadow: 0 0 0 8px rgba(47,107,255,.1), 0 12px 30px -8px rgba(47,107,255,.6); }
.sv-ig__who i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(47,107,255,.5); animation: svRing 2.7s var(--ease-out) infinite; }
.sv-ig__who i:nth-child(2) { animation-delay: .9s; }
.sv-ig__who i:nth-child(3) { animation-delay: 1.8s; }
.sv-ig__eq { display: flex; align-items: center; justify-content: center; gap: 3px; height: 30px; }
.sv-ig__eq span { width: 3px; height: var(--h, 50%); border-radius: 3px; background: linear-gradient(180deg, var(--teal), var(--blue)); animation: svBar .8s var(--d, 0s) ease-in-out infinite alternate; }
/* Voice frequency travelling out from the caller: a faint sine wave each way with bright pulses running along it */
/* The wave runs from the IVR phone, behind the question, into the Svarank phone (it tucks under both phones).
   Pulses flow left to right along it while the whole wave gently breathes. */
.sv-ig__side { position: relative; z-index: 1; }
.sv-ig__wave { --reach: calc(clamp(16px, 2.5vw, 36px) + 140px); display: block; width: calc(100% + 2 * var(--reach)); height: 90px; margin: 0 calc(-1 * var(--reach)); overflow: visible; }
.sv-ig__wave path { fill: none; stroke: url(#svIgGrad); stroke-linecap: round; }
.sv-ig__wave g { transform-box: fill-box; transform-origin: center; animation: svBreathe 2.4s ease-in-out infinite alternate; }
.sv-ig__wave .is-base { stroke-width: 2; opacity: .35; }
.sv-ig__wave .is-base2 { stroke-width: 1.5; opacity: .2; }
.sv-ig__wave .is-pulse { stroke-width: 4; stroke-dasharray: 90 1000; stroke-dashoffset: 90; filter: drop-shadow(0 0 6px rgba(47,107,255,.6)); animation: svPass 2.6s linear infinite; }
.sv-ig__wave .is-pulse:nth-of-type(4) { animation-delay: -.87s; }
.sv-ig__wave .is-pulse:nth-of-type(5) { animation-delay: -1.73s; }
@keyframes svPass { from { stroke-dashoffset: 90; } to { stroke-dashoffset: -1000; } }
@keyframes svBreathe { from { transform: scaleY(.55); } to { transform: scaleY(1.1); } }
.sv-ig__who svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sv-ig__ask { position: relative; padding: 12px 16px; border-radius: 16px; border: var(--rule); background: #fff; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text); box-shadow: 0 16px 30px -22px rgba(11,18,32,.5); }
.sv-ig__q small { font-family: var(--f-label); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.sv-ig__side { display: grid; justify-items: center; gap: 18px; }
.sv-ig__phone { display: flex; flex-direction: column; width: min(340px, 100%); height: 580px; border-radius: 44px; border: 10px solid #0B0D18; overflow: hidden; box-shadow: 0 50px 90px -50px rgba(11,18,32,.7); }
.sv-ig__bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 20px 12px; font-size: 12.5px; font-weight: 600; }
.sv-ig__feed { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; margin: 0; padding: 8px 16px 18px; overflow: hidden; }
.sv-ig__feed li { max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; }
.js .sv-ig__feed li { opacity: 0; }
.sv-ig.is-in .sv-ig__feed li { animation: svIn .5s var(--ease-out) forwards; animation-delay: calc(var(--i) * .55s + .3s); }
.sv-ig__feed small { display: block; margin-bottom: 2px; font-family: var(--f-label); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
/* Old way: grey screen, robotic menu prompts, keypad presses, ends on hold */
.sv-ig__phone--old { background: #F1F3F7; }
.sv-ig__phone--old .sv-ig__bar { color: var(--text-3); border-bottom: var(--rule); }
.sv-ig__bot { align-self: flex-start; border: var(--rule); background: #fff; color: var(--text-2); border-bottom-left-radius: 4px !important; }
.sv-ig__key { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px !important; background: #D9DDE6; color: var(--text-2); font-family: var(--f-mono); font-weight: 600; letter-spacing: .12em; }
.sv-ig__key::before { content: ""; width: 14px; height: 14px; background: radial-gradient(circle, currentColor 1.4px, transparent 1.6px) 0 0 / 4.67px 4.67px; opacity: .6; }
.sv-ig__err { align-self: flex-start; background: #FDECEC; color: #A23A3A; border-bottom-left-radius: 4px !important; }
.sv-ig__hold { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; border-radius: 999px !important; background: rgba(11,18,32,.08); color: var(--text-2); font-weight: 600; }
.sv-ig__hold::before { content: "♪"; color: var(--text-3); }
/* New way: dark screen, natural back-and-forth, ends resolved */
.sv-ig__phone--new { position: relative; isolation: isolate; background: var(--ink-950); color: #fff; }
.sv-ig__phone--new::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(47,107,255,.4), transparent 70%); }
.sv-ig__phone--new .sv-ig__bar { border-bottom: 1px solid rgba(255,255,255,.1); color: var(--on-dark-2); }
.sv-ig__me { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 4px !important; }
.sv-ig__ai { align-self: flex-start; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; border-bottom-left-radius: 4px !important; }
.sv-ig__ai small { color: var(--teal); opacity: 1; }
.sv-ig__done { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; border-radius: 999px !important; background: rgba(94,242,225,.14); color: var(--teal); font-weight: 600; }
.sv-ig__done::before { content: "✓"; }
.sv-ig__verdict { display: inline-flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; color: var(--text); }
.sv-ig__verdict::before { content: ""; width: 24px; height: 24px; border-radius: 50%; }
.sv-ig__side--old .sv-ig__verdict { color: var(--text-3); }
.sv-ig__side--old .sv-ig__verdict::before { background: rgba(11,18,32,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m7 7 6 6M13 7l-6 6' fill='none' stroke='%238A93A6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.sv-ig__side--new .sv-ig__verdict::before { background: rgba(47,107,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.5 2.6 2.6L14 7.5' fill='none' stroke='%232F6BFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }

/* ---------- Svarank: call pipeline ---------- */
/* Wheel carousel: cards turn around a pivot far below the stage, so side cards tilt and drop like a fanned deck.
   JS sets --k (offset from the active card) and is-on / is-side / is-off; without JS the cards stack as a plain list. */
#svarank-how { overflow: hidden; }
.sv-wheel { position: relative; margin-top: clamp(48px, 5vw, 72px); }
.sv-wheel__stage { position: relative; list-style: none; margin: 0; padding: 0; }
.sv-step { --w: min(440px, 80vw); display: flex; flex-direction: column; gap: 14px; width: var(--w); min-height: 500px; margin: 0 auto 20px; padding: 28px; border-radius: 30px; background: #fff; color: var(--text); box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); }
.sv-wheel.is-live .sv-wheel__stage { height: 640px; }
.sv-wheel.is-live .sv-step { position: absolute; top: 0; left: 50%; height: 500px; margin: 0 0 0 calc(var(--w) / -2); transform-origin: 50% 300%; transform: rotate(calc(var(--k, 0) * 24deg)); transition: transform 1s var(--ease-out), opacity .6s var(--ease), visibility 0s .6s; cursor: pointer; }
.sv-wheel.is-live .sv-step.is-on { z-index: 2; cursor: default; transition: transform 1s var(--ease-out), opacity .6s var(--ease); }
.sv-wheel.is-live .sv-step.is-side { z-index: 1; opacity: .9; transition: transform 1s var(--ease-out), opacity .6s var(--ease); }
.sv-wheel.is-live .sv-step.is-side:hover { opacity: 1; }
.sv-wheel.is-live .sv-step.is-off { opacity: 0; visibility: hidden; }
.sv-step__top { display: flex; align-items: center; gap: 16px; }
.sv-step__ic { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: rgba(47,107,255,.08); border: 1px solid rgba(47,107,255,.16); color: var(--blue); }
.sv-step__ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sv-step h3 { font-size: clamp(22px, 2vw, 26px); letter-spacing: -.03em; color: var(--text); }
.sv-step__tag { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--blue-700); }
.sv-step p { font-size: 16px; line-height: 1.6; color: var(--text); }
/* Visual panel: a blue-toned photo with a "speaking" orb whose rings ripple outward like a voice radius */
.sv-step__vis { position: relative; isolation: isolate; display: grid; justify-items: center; align-content: center; gap: 20px; margin-top: auto; min-height: 210px; padding: 26px 30px; border-radius: 120px; background: var(--ink-950); overflow: hidden; }
.sv-step__vis img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.sv-step__vis::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(47,107,255,.62), rgba(5,6,13,.82) 75%); pointer-events: none; }
.sv-orb { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--teal)); box-shadow: 0 0 30px rgba(94,242,225,.45); }
.sv-orb i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(94,242,225,.7); animation: svRing 2.7s var(--ease-out) infinite; }
.sv-orb i:nth-child(2) { animation-delay: .9s; }
.sv-orb i:nth-child(3) { animation-delay: 1.8s; }
@keyframes svRing { from { transform: scale(1); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }
.sv-bars { position: relative; display: flex; align-items: center; justify-content: center; gap: 3px; height: 26px; }
.sv-bars span { width: 3px; height: var(--h, 50%); border-radius: 3px; background: #fff; animation: svBar 1s var(--d, 0s) ease-in-out infinite alternate; }
@keyframes svBar { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.sv-step .sv-io { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; color: #fff; }
.sv-io span { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(5,6,13,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sv-io i { font-style: normal; color: var(--teal); }
.sv-wheel__nav { display: none; align-items: center; justify-content: center; gap: 18px; margin-top: 8px; }
.sv-wheel.is-live .sv-wheel__nav { display: flex; }
.sv-wheel__dots { display: flex; gap: 8px; }
.sv-wheel__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px; background: rgba(255,255,255,.35); cursor: pointer; transition: width .5s var(--ease-out), background .3s; }
.sv-wheel__dots button[aria-current="true"] { width: 30px; background: var(--teal); }
.sv-wheel__nav button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.sv-loop { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 10px 18px; border-radius: 999px; border: 1px dashed rgba(94,242,225,.4); font-size: 14.5px; color: var(--on-dark-2); }
.sv-loop svg { width: 18px; height: 18px; fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Svarank: AI voice agent architecture — live diagram ----------
   Blocks sit on a 3-column grid; JS draws the connectors into .sv-ax__wires and walks the stages in call order
   (.is-live on the active block and its incoming wires). */
.sv-ax { position: relative; padding: clamp(22px, 3vw, 40px); border-radius: var(--r-xl); border: var(--rule); background: #fff; box-shadow: 0 40px 80px -60px rgba(11,18,32,.5); }
.sv-ax__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "sip stt tts" "sip rag tts" ". dlg ." "sec sec sec"; gap: 44px 56px; }
.sv-ax__wires { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sv-ax__wires marker path { fill: #9DB2D9; }
.sv-ax__wires path.w { fill: none; stroke: #C4D2EE; stroke-width: 2; marker-end: url(#svAxHead); }
.sv-ax__wires path.f { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 12; opacity: .35; animation: svAxFlow 1.1s linear infinite; transition: opacity .4s, stroke .4s; }
.sv-ax__wires path.f.is-live { opacity: 1; stroke: var(--teal); stroke-width: 3.5; }
@keyframes svAxFlow { to { stroke-dashoffset: -14; } }
.sv-ax__box { position: relative; z-index: 1; padding: 18px 18px 20px; border-radius: 16px; border: 2px solid var(--bc, #D5DEEE); background: var(--bg, #fff); transition: border-color .4s, box-shadow .5s var(--ease-out), transform .5s var(--ease-out); }
.sv-ax__box h3 { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid rgba(11,18,32,.12); text-align: center; font-size: clamp(15px, 1.25vw, 18px); letter-spacing: -.01em; color: #10204A; }
.sv-ax__box.is-live { border-color: var(--blue); box-shadow: 0 0 0 6px rgba(47,107,255,.12), 0 30px 60px -36px rgba(47,107,255,.7); transform: translateY(-3px); }
.sv-ax__box--sip { grid-area: sip; display: flex; flex-direction: column; justify-content: center; --bc: #BFD0F2; --bg: linear-gradient(180deg, #fff, #F3F7FF); }
.sv-ax__box--stt { grid-area: stt; --bc: #9DD9E8; --bg: linear-gradient(180deg, #fff, #EFFBFD); }
.sv-ax__box--tts { grid-area: tts; display: flex; flex-direction: column; justify-content: center; --bc: #A9E3CF; --bg: linear-gradient(180deg, #fff, #EFFCF6); }
.sv-ax__box--rag { grid-area: rag; --bc: #8FB0FF; --bg: linear-gradient(180deg, #fff, #EEF3FF); }
.sv-ax__box--dlg { grid-area: dlg; --bc: #C2B8F5; --bg: linear-gradient(180deg, #fff, #F5F2FF); }
.sv-ax__box--sec { grid-area: sec; justify-self: center; width: min(760px, 100%); --bc: #D5DCE8; --bg: linear-gradient(180deg, #fff, #F5F7FA); }
.sv-ax__box svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sv-ax__hero { display: flex; align-items: center; justify-content: center; gap: 10px; color: #1A3A8F; }
.sv-ax__hero > svg { width: 48px; height: 48px; }
.sv-ax__rack { display: grid; gap: 3px; padding: 5px; border-radius: 6px; background: #1A2C5C; }
.sv-ax__rack i { display: block; width: 34px; height: 9px; border-radius: 2px; background: linear-gradient(90deg, #5EF2E1 0 6px, #2A3E70 6px 9px, #8FB0FF 9px 15px, #2A3E70 15px); animation: blink 1.6s steps(2) infinite; }
.sv-ax__rack i:nth-child(2) { animation-delay: .4s; }
.sv-ax__rack i:nth-child(3) { animation-delay: .8s; }
.sv-ax__lbl { margin-top: 10px; text-align: center; font-size: 14px; font-weight: 600; color: var(--text-2); }
.sv-ax__pills { list-style: none; display: grid; gap: 10px; margin: 14px 0 0; padding: 0; }
.sv-ax__pills li { padding: 10px 12px; border-radius: 10px; border: 1px solid #D5DEEE; background: #fff; text-align: center; font-size: 14.5px; font-weight: 600; color: #10204A; box-shadow: 0 8px 18px -14px rgba(11,18,32,.35); }
.sv-ax__say { position: relative; }
.sv-ax__steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.sv-ax__steps li { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #10204A; }
.sv-ax__steps svg { width: 40px; height: 40px; color: #1A3A8F; }
.sv-ax__wave { display: flex; align-items: center; gap: 3px; height: 40px; }
.sv-ax__wave i { width: 3px; height: 100%; border-radius: 3px; background: linear-gradient(180deg, var(--teal), var(--blue)); animation: svBar .7s ease-in-out infinite alternate; }
.sv-ax__wave i:nth-child(2n) { animation-delay: -.2s; } .sv-ax__wave i:nth-child(3n) { animation-delay: -.45s; } .sv-ax__wave i:nth-child(5) { animation-delay: -.1s; }
.sv-ax__hero--tts svg { width: 64px; height: 64px; color: #1A3A8F; }
.sv-ax__ring1, .sv-ax__ring2 { stroke: #12B886; animation: svAxRing 1.6s ease-in-out infinite; }
.sv-ax__ring2 { animation-delay: .3s; }
@keyframes svAxRing { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.sv-ax__rag { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 10px 14px; }
.sv-ax__chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #1E3F96; color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.sv-ax__chip svg { flex: none; width: 22px; height: 22px; }
.sv-ax__chip small { display: block; font-size: 11.5px; font-weight: 500; opacity: .8; }
.sv-ax__brain { display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4F86FF, #1A3A8F 70%); color: #fff; text-align: center; font-family: var(--f-display); font-size: 19px; font-weight: 700; line-height: 1.05; box-shadow: 0 0 0 8px rgba(47,107,255,.12), 0 0 40px rgba(47,107,255,.45); animation: nfPulse 2.6s ease-in-out infinite; }
.sv-ax__note { font-size: 13px; font-weight: 600; color: var(--text-2); }
.sv-ax__note--l { grid-column: 1; text-align: center; }
.sv-ax__note--r { grid-column: 3; text-align: center; }
.sv-ax__icons, .sv-ax__shields { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.sv-ax__icons li { display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 14px; font-weight: 600; color: #10204A; }
.sv-ax__icons span { display: grid; place-items: center; width: 58px; height: 52px; border-radius: 10px; background: linear-gradient(150deg, #6A5AE0, #4B3BB8); color: #fff; }
.sv-ax__icons svg { width: 26px; height: 26px; }
.sv-ax__shields li { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 12px; border: 1px solid #D5DEEE; background: #fff; font-size: 14.5px; font-weight: 600; color: #10204A; }
.sv-ax__shields span { flex: none; display: grid; place-items: center; width: 38px; height: 42px; border-radius: 10px 10px 18px 18px; background: #2A3550; color: #fff; }
.sv-ax__shields svg { width: 19px; height: 19px; }
.sv-ax__now { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.sv-ax__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(94,242,225,.6); animation: svPulse 1.8s infinite; }
/* Compact sizing: keep the whole diagram within one screen */
.sv-ax { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.sv-ax__grid { gap: 22px clamp(40px, 5vw, 72px); }
.sv-ax__box { padding: 10px 12px 12px; border-radius: 12px; }
.sv-ax__box h3 { padding-bottom: 7px; margin-bottom: 9px; font-size: 14px; }
.sv-ax__hero > svg { width: 32px; height: 32px; }
.sv-ax__rack i { width: 24px; height: 7px; }
.sv-ax__lbl { margin-top: 6px; font-size: 12.5px; }
.sv-ax__pills { gap: 6px; margin-top: 9px; }
.sv-ax__pills li { padding: 6px 8px; border-radius: 8px; font-size: 12.5px; }
.sv-ax__steps { gap: 6px; }
.sv-ax__steps li { gap: 5px; font-size: 12px; }
.sv-ax__steps svg, .sv-ax__wave { width: auto; height: 28px; }
.sv-ax__steps svg { width: 28px; }
.sv-ax__hero--tts svg { width: 42px; height: 42px; }
.sv-ax__rag { gap: 6px 10px; }
.sv-ax__chip { gap: 7px; padding: 7px 9px; border-radius: 8px; font-size: 12px; }
.sv-ax__chip svg { width: 18px; height: 18px; }
.sv-ax__chip small { font-size: 10.5px; }
.sv-ax__brain { width: 72px; height: 72px; font-size: 14px; box-shadow: 0 0 0 5px rgba(47,107,255,.12), 0 0 28px rgba(47,107,255,.4); }
.sv-ax__note { font-size: 11.5px; white-space: nowrap; }
.sv-ax__icons, .sv-ax__shields { gap: 8px; }
.sv-ax__icons li { gap: 5px; font-size: 12px; }
.sv-ax__icons span { width: 40px; height: 36px; border-radius: 8px; }
.sv-ax__icons svg { width: 19px; height: 19px; }
.sv-ax__box--dlg, .sv-ax__box--sec { justify-self: center; width: 100%; }
.sv-ax__box--sec { width: min(640px, 100%); }
.sv-ax__shields li { gap: 7px; padding: 5px 10px 5px 5px; border-radius: 9px; font-size: 12.5px; }
.sv-ax__shields span { width: 28px; height: 32px; border-radius: 8px 8px 14px 14px; }
.sv-ax__shields svg { width: 15px; height: 15px; }
.sv-ax__now { margin-top: 12px; font-size: 13.5px; }
.sv-ax__box.is-live { box-shadow: 0 0 0 4px rgba(47,107,255,.12), 0 20px 40px -28px rgba(47,107,255,.7); transform: translateY(-2px); }
@media (max-width: 900px) {
  .sv-ax__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sip" "stt" "rag" "dlg" "tts" "sec"; gap: 34px; }
  .sv-ax__wires { display: none; }
  .sv-ax__box:not(:last-of-type)::after { content: ""; position: absolute; left: 50%; bottom: -26px; width: 12px; height: 12px; border-right: 2px solid #9DB2D9; border-bottom: 2px solid #9DB2D9; transform: translateX(-50%) rotate(45deg); }
  .sv-ax__box--sec::after { display: none; }
}
@media (max-width: 560px) {
  .sv-ax__steps, .sv-ax__icons, .sv-ax__shields { grid-template-columns: minmax(0, 1fr); }
  .sv-ax__rag { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .sv-ax__note--l, .sv-ax__note--r { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-ax__wires path.f, .sv-ax__wave i, .sv-ax__ring1, .sv-ax__ring2, .sv-ax__rack i, .sv-ax__brain, .sv-ax__dot { animation: none; }
}

/* ---------- Svarank: technology stack ---------- */
.sv-stack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sv-layer { padding: 20px 22px; border-radius: var(--r-lg); border: var(--rule); background: #fff; transition: border-color .3s, transform .5s var(--ease-out); }
.sv-layer:hover { border-color: rgba(47,107,255,.35); transform: translateY(-3px); }
.sv-layer small { display: block; font-family: var(--f-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); }
.sv-layer strong { display: block; margin-top: 8px; font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.sv-layer p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }

/* ---------- Svarank: self-hosted architecture ---------- */
.sv-arch { position: relative; display: grid; justify-items: center; }
.sv-arch > .sv-pyr, .sv-arch > p { width: 100%; }
.sv-arch__in { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 14px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--text-3); }
.sv-arch__in svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Pyramid: five trapezoid slices, apex (Monitoring) to base (Telephony). Each slice's top edge matches the bottom edge
   of the slice above: --w is its bottom width, --s the inset of its top corners as a share of its own width (5.5% / --w). */
.sv-pyr { list-style: none; display: grid; justify-items: center; gap: 6px; margin: 8px 0 0; padding: 0; }
.sv-pyr li { --w: 100%; --s: 5.5%; display: grid; justify-items: center; align-content: center; gap: 4px; width: var(--w); min-height: 104px; padding: 14px calc(var(--s) + 10px); background: var(--bg); color: #fff; text-align: center; clip-path: polygon(var(--s) 0, calc(100% - var(--s)) 0, 100% 100%, 0 100%); filter: drop-shadow(0 12px 18px rgba(11,18,32,.18)); }
.sv-pyr li:nth-child(1) { --w: 56%; --s: 9.82%; --bg: linear-gradient(180deg, #E4ECFF, #CFDDFF); color: var(--text); }
.sv-pyr li:nth-child(2) { --w: 67%; --s: 8.21%; --bg: linear-gradient(180deg, #BCD0FF, #A3BEFF); color: var(--text); }
.sv-pyr li:nth-child(3) { --w: 78%; --s: 7.05%; --bg: linear-gradient(180deg, #6F9BFF, #5585FF); }
.sv-pyr li:nth-child(4) { --w: 89%; --s: 6.18%; --bg: linear-gradient(180deg, #2F6BFF, #2258E6); }
.sv-pyr li:nth-child(5) { --w: 100%; --s: 5.5%; --bg: linear-gradient(180deg, #1A45C4, #102E8C); }
.sv-pyr strong { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; letter-spacing: -.01em; }
.sv-pyr svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sv-pyr span { font-size: 13px; line-height: 1.45; opacity: .85; }
.js .sv-arch:not(.is-in) .sv-pyr li { opacity: 0; transform: translateY(18px); }
.sv-pyr li { transition: opacity .6s var(--ease), transform .8s var(--ease-out); transition-delay: calc((5 - var(--i)) * .12s + .15s); }
.sv-arch__in--up { margin: 14px 0 0; }
.sv-arch__out { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--blue-700); }

/* ---------- Svarank: where it fits ---------- */
.pd-uses { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.pd-uses li { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; border: var(--rule); background: #fff; font-size: 15.5px; font-weight: 500; color: var(--text); }
.pd-uses li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }

/* ---------- PyHRM: app preview ---------- */
/* ---------- PyHRM: hero — copy and app screens on the left, photo on the right ---------- */
.hr-hero__photo { position: absolute; top: 0; right: 0; bottom: 0; z-index: -3; width: 50%; height: 100%; object-fit: cover; object-position: 50% 22%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, #000 42%); }
.hr-hero .pd-hero__shade { display: none; }

/* ---------- PyHRM: employee lifecycle ---------- */
/* Tall photo cards under a blue wash: small label + stage name at the top, icon and line at the bottom.
   On hover the photo slowly zooms and the wash deepens to brand blue. */
.hr-life { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.hr-life li { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 480px; padding: clamp(26px, 2.6vw, 38px) clamp(22px, 2.2vw, 32px); border-radius: 14px; color: #fff; }
.hr-life img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.hr-life li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,30,80,.82) 0%, rgba(22,44,110,.55) 45%, rgba(10,22,64,.88) 100%); transition: background .5s var(--ease); }
.hr-life li:hover img { transform: scale(1.08); }
.hr-life li:hover::before { background: linear-gradient(180deg, rgba(47,107,255,.85) 0%, rgba(47,107,255,.55) 45%, rgba(16,40,120,.92) 100%); }
.hr-life small { font-size: 14px; letter-spacing: .01em; color: rgba(255,255,255,.85); }
.hr-life h3 { margin-top: 6px; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.1; letter-spacing: -.03em; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.hr-life .hr-life__ic { margin-top: auto; width: 52px; height: 52px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hr-life p { margin-top: 14px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.88); }

/* ---------- PyHRM: one system, three views ---------- */
.hr-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; margin-bottom: 28px; border-radius: 999px; background: var(--paper-2); }
.hr-tabs button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: background .3s, color .3s; }
.hr-tabs button:hover { color: var(--text); }
.hr-tabs button[aria-selected="true"] { background: var(--text); color: #fff; }
.hr-tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Each view: a role photo on the left (with a role chip), heading + checklist on the right */
.hr-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: 14px clamp(28px, 3.5vw, 48px) 14px 14px; border-radius: var(--r-xl); border: var(--rule); background: #fff; animation: panelIn .5s var(--ease); }
.hr-panel[hidden] { display: none; }
.hr-panel__pic { position: relative; overflow: hidden; height: 100%; min-height: 380px; margin: 0; border-radius: calc(var(--r-xl) - 10px); }
.hr-panel__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: hrPic 1.2s var(--ease-out); }
.hr-panel__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,22,64,.55), transparent 45%); }
.hr-panel__pic figcaption { position: absolute; z-index: 1; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--f-label); font-size: 13.5px; font-weight: 600; color: var(--text); }
.hr-panel__pic figcaption::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
@keyframes hrPic { from { transform: scale(1.08); } }
.hr-panel__body { padding: clamp(18px, 2.5vw, 34px) 0; }
.hr-panel h3 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.03em; color: var(--text); }
.hr-panel__body > p { margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--text-2); }
.hr-panel .pd-checks { margin-top: 24px; }

/* ---------- Careers page (#careers-page) ----------
   Rotating photo hero → why-Pyzen split → filter sidebar + expandable role cards → application form
   → team banner with photo strip → business / careers contact cards. */
.cr-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(92svh, 860px); display: flex; align-items: flex-end; background: var(--ink-950); color: #fff; border-radius: 0 0 var(--r-xl) var(--r-xl); }
.cr-slides { position: absolute; inset: 0; z-index: -2; }
.cr-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity 1.2s var(--ease), transform 7s linear; }
.cr-slide.is-on { opacity: 1; transform: scale(1); }
.cr-hero__shade { position: absolute; inset: 0; z-index: -1; background: var(--hero-shade); }
.cr-hero > .container { width: 100%; padding-top: calc(var(--header-h) + clamp(72px, 9vw, 128px)); padding-bottom: clamp(48px, 6vw, 88px); }
.cr-hero .ab-k { color: var(--teal); }
.cr-hero h1 { font-size: clamp(44px, 6.4vw, 100px); font-weight: 600; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.cr-hero h1 .cr-word { display: inline-grid; vertical-align: bottom; }
.cr-hero h1 .cr-word b { grid-area: 1 / 1; font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--teal); opacity: 0; transform: translateY(40%); filter: blur(6px); transition: opacity .6s var(--ease), transform .8s var(--ease-out), filter .6s; }
.cr-hero h1 .cr-word b.is-on { opacity: 1; transform: none; filter: none; }
.cr-hero__lead { margin-top: 22px; max-width: 600px; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.65; color: rgba(238,241,255,.88); text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.cr-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.cr-hero .btn--primary, .cr-band .btn--primary { --btn-fill: #fff; --btn-fg-h: var(--text); }
.cr-dots { display: flex; gap: 10px; margin-top: clamp(36px, 5vw, 60px); }
.cr-dots button { width: 44px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.3); cursor: pointer; overflow: hidden; }
.cr-dots button i { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.cr-dots button[aria-selected="true"] i { animation: crBar 6s linear forwards; }
@keyframes crBar { to { transform: scaleX(1); } }

.cr-sec { padding: clamp(80px, 9vw, 128px) 0; scroll-margin-top: 110px; }
.cr-sec--tint { background: var(--paper-2); }
.cr-h2 { font-size: clamp(34px, 4vw, 58px); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: var(--text); }
.cr-h2 em { font-family: var(--f-serif); font-weight: 400; color: var(--blue); }
.cr-lead { margin-top: 18px; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; color: var(--text-2); }

/* Why Pyzen: copy + photo with floating office badge */
.cr-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.cr-perks { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.cr-perks li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.cr-perks .cr-ic { grid-row: span 2; }
.cr-perks strong { font-family: var(--f-label); font-size: 16px; font-weight: 600; color: var(--text); }
.cr-perks span:not(.cr-ic) { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.cr-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #EEF4FF; color: var(--blue); }
.cr-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cr-why__media { position: relative; }
.cr-why__media img { display: block; width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: var(--r-xl); }
.cr-why__badge { position: absolute; left: -24px; bottom: 32px; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px -20px rgba(5,6,13,.35); font-family: var(--f-label); font-size: 14px; color: var(--text-2); }
.cr-why__badge strong { display: block; font-size: 16px; color: var(--text); }

/* Open roles: filter sidebar + expandable role cards */
.cr-jobs__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: clamp(32px, 4vw, 52px); }
.cr-jobs { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
.cr-filters { position: sticky; top: calc(var(--header-h) + 24px); padding: 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); }
.cr-filters__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cr-filters__top strong { font-family: var(--f-label); font-size: 17px; color: var(--text); }
.cr-filters__top button { border: 0; background: none; font-family: var(--f-label); font-size: 14px; font-weight: 600; color: var(--blue); cursor: pointer; }
.cr-fgroup { border-top: 1px solid var(--line); padding: 14px 0 6px; }
.cr-fgroup summary { display: flex; justify-content: space-between; align-items: center; list-style: none; cursor: pointer; font-family: var(--f-label); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.cr-fgroup summary::-webkit-details-marker { display: none; }
.cr-fgroup summary::after { content: "+"; font-size: 18px; color: var(--blue); transition: transform .3s; }
.cr-fgroup[open] summary::after { transform: rotate(45deg); }
.cr-fgroup label { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 15px; color: var(--text-2); cursor: pointer; }
.cr-fgroup label:first-of-type { margin-top: 8px; }
.cr-fgroup input { width: 18px; height: 18px; accent-color: var(--blue); }
.cr-roles { display: grid; gap: 14px; }
.cr-role { border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); overflow: hidden; transition: border-color .3s, box-shadow .4s var(--ease-out); }
.cr-role[hidden] { display: none; }
.cr-role:hover, .cr-role.is-open { border-color: rgba(47,107,255,.35); box-shadow: 0 22px 44px -28px rgba(47,107,255,.5); }
.cr-role__top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 22px 24px; }
.cr-role h3 { font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; color: var(--text); }
.cr-role__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; font-size: 14px; color: var(--text-2); }
.cr-role__meta span { display: inline-flex; align-items: center; gap: 6px; }
.cr-role__meta svg { width: 16px; height: 16px; fill: none; stroke: var(--blue); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cr-role__toggle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--text); cursor: pointer; transition: transform .4s var(--ease-out), background .3s, color .3s; }
.cr-role__toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.cr-role.is-open .cr-role__toggle { transform: rotate(180deg); background: var(--blue); color: #fff; border-color: var(--blue); }
.cr-role__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.cr-role.is-open .cr-role__body { grid-template-rows: 1fr; }
.cr-role__body > div { overflow: hidden; }
.cr-role__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 0 24px; padding: 22px 0 24px; border-top: 1px solid var(--line); }
.cr-role__cols h4 { font-family: var(--f-label); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-700); }
.cr-role__cols ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.cr-role__cols li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.cr-role__cols li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.cr-role__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 24px 24px; }
.cr-role__tags i { padding: 6px 12px; border-radius: 999px; background: #EEF4FF; font-style: normal; font-family: var(--f-label); font-size: 13px; color: var(--blue-700); }
/* Job details popup */
.cr-job { width: min(860px, calc(100% - 32px)); max-height: min(88vh, 900px); padding: 0; border: 0; border-radius: var(--r-xl); background: #fff; color: var(--text); box-shadow: 0 40px 100px -30px rgba(5,6,13,.6); overflow: hidden; }
.cr-job::backdrop { background: rgba(5,6,13,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cr-job[open] { animation: crJobIn .5s var(--ease-out); }
.cr-job[open]::backdrop { animation: crFade .4s var(--ease); }
@keyframes crJobIn { from { opacity: 0; transform: translateY(30px) scale(.97); } }
@keyframes crFade { from { opacity: 0; } }
.cr-job__x { position: absolute; top: 18px; right: 18px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--text); cursor: pointer; transition: transform .4s var(--ease-out), background .3s, color .3s; }
.cr-job__x:hover { transform: rotate(90deg); background: var(--blue); color: #fff; border-color: var(--blue); }
.cr-job__x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cr-job__body { max-height: min(88vh, 900px); overflow-y: auto; overscroll-behavior: contain; padding: clamp(28px, 4vw, 52px); }
.cr-job__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 24px; padding: 6px 56px 28px 0; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.cr-job__head h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; color: var(--text); }
.cr-job h3 { margin-top: 28px; font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; color: var(--blue); }
.cr-job p { margin-top: 12px; font-size: 16px; line-height: 1.75; color: var(--text-2); }
.cr-job ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.cr-job li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.cr-job li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.cr-job .cr-role__tags { margin: 14px 0 0; }
.cr-job__foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
@media (max-width: 600px) { .cr-job__head { padding-right: 44px; } .cr-job__head .btn { width: 100%; justify-content: center; } }
.cr-empty { padding: 40px; border-radius: var(--r-lg); border: 1px dashed rgba(10,12,24,.2); text-align: center; color: var(--text-2); }

/* Application form */
.cr-apply { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.cr-apply__note { margin-top: 28px; padding: 20px 22px; border-radius: 18px; background: #EEF4FF; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.cr-apply__note a { font-weight: 600; color: var(--blue); }
.cr-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 70px -40px rgba(5,6,13,.35); }
.cr-field { display: grid; gap: 8px; }
.cr-field--full { grid-column: 1 / -1; }
.cr-field label { font-family: var(--f-label); font-size: 14px; font-weight: 600; color: var(--text); }
.cr-field label i { font-style: normal; color: var(--blue); }
.cr-field input, .cr-field select, .cr-field textarea { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(10,12,24,.16); background: #FAFBFF; font: inherit; font-size: 15px; color: var(--text); transition: border-color .25s, box-shadow .25s, background .25s; }
.cr-field textarea { min-height: 120px; resize: vertical; }
.cr-field input:focus, .cr-field select:focus, .cr-field textarea:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(47,107,255,.14); }
.cr-field.is-bad input, .cr-field.is-bad select { border-color: #E5484D; }
.cr-check { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.cr-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--blue); }
.cr-form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.cr-form__msg { font-size: 14.5px; color: var(--text-2); }
.cr-form__msg.is-ok { color: #12805C; }
.cr-form__msg.is-bad { color: #C9353A; }

/* Team banner with photo strip */
.cr-band { position: relative; overflow: hidden; isolation: isolate; padding: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 64px) 0; border-radius: var(--r-xl); background: var(--ink-950); color: #fff; text-align: center; }
.cr-band::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -40%; width: 900px; height: 700px; translate: -50% 0; background: radial-gradient(closest-side, rgba(47,107,255,.5), transparent); }
.cr-band h2 { max-width: 760px; margin: 0 auto; font-size: clamp(32px, 4vw, 56px); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
.cr-band h2 em { font-family: var(--f-serif); font-weight: 400; color: var(--teal); }
.cr-band p { max-width: 560px; margin: 16px auto 0; font-size: 17px; line-height: 1.6; color: rgba(238,241,255,.78); }
.cr-band .btn { margin-top: 28px; }
.cr-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
.cr-strip img { width: 100%; aspect-ratio: 3 / 3.6; object-fit: cover; border-radius: 20px 20px 0 0; transition: transform .6s var(--ease-out); }
.cr-strip img:nth-child(even) { transform: translateY(28px); }
.cr-strip img:hover { transform: translateY(-8px); }

/* Contact cards */
.cr-contacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cr-contact { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); }
.cr-contact .cr-ic { width: 56px; height: 56px; border-radius: 16px; }
.cr-contact h3 { font-size: 22px; font-weight: 600; color: var(--text); }
.cr-contact p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.cr-contact__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; }
.cr-contact__links a { font-family: var(--f-label); font-size: 15.5px; font-weight: 600; color: var(--blue); }
.cr-contact__links a:hover { color: var(--blue-700); }

.cr-rv { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform 1s var(--ease-out); }
.cr-rv.is-in { opacity: 1; transform: none; }
@media (max-width: 1100px) {
  .cr-jobs { grid-template-columns: minmax(0, 1fr); }
  .cr-filters { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .cr-filters__top { grid-column: 1 / -1; }
  .cr-apply { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .cr-why { grid-template-columns: minmax(0, 1fr); }
  .cr-why__badge { left: 16px; }
  .cr-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-strip img:nth-child(n+3) { display: none; }
  .cr-contacts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .cr-perks, .cr-role__cols, .cr-form, .cr-filters { grid-template-columns: minmax(0, 1fr); }
  .cr-role__top { grid-template-columns: minmax(0, 1fr) auto; }
  .cr-role__top .btn { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .cr-rv { opacity: 1; transform: none; transition: none; } .cr-slide { transition: opacity .3s; transform: none; } }


/* =========================================================================
   404 page — <main id="page-not-found">. Dark stage, grid floor, glowing "4 (orbit) 4", headline, ways back.
   ========================================================================= */
.nf__hero { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 100svh; margin: 0 var(--inset); padding: calc(var(--header-h) + clamp(40px, 6vw, 80px)) 0 clamp(64px, 8vw, 110px); border-radius: 0 0 var(--r-xl) var(--r-xl); background: var(--ink-950); color: #fff; text-align: center; --mx: 0; --my: 0; }
.nf__grid { position: absolute; inset: -10% -10% 0; z-index: -2; background-image: linear-gradient(rgba(120,150,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(120,150,255,.09) 1px, transparent 1px); background-size: 56px 56px; transform: perspective(700px) rotateX(58deg) translateY(30%); transform-origin: 50% 100%; -webkit-mask: radial-gradient(ellipse 60% 60% at 50% 70%, #000, transparent 75%); mask: radial-gradient(ellipse 60% 60% at 50% 70%, #000, transparent 75%); animation: nfGrid 6s linear infinite; }
@keyframes nfGrid { to { background-position: 0 56px, 0 0; } }
.nf__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 45% 40% at 50% 38%, rgba(47,107,255,.35), transparent 70%), radial-gradient(ellipse 30% 30% at 70% 80%, rgba(94,242,225,.12), transparent 70%); pointer-events: none; }
.nf__in { display: grid; justify-items: center; }
.is-404 .footer { display: none; } /* the 404 page stands alone: no footer */
.is-404 .nf__hero { margin-bottom: var(--inset); border-radius: var(--r-xl); }
.nf__k { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-2); }
.nf__blink { width: 8px; height: 8px; border-radius: 50%; background: #FF6B6B; box-shadow: 0 0 10px #FF6B6B; animation: blink 1.2s steps(2) infinite; }
.nf__code { display: flex; align-items: center; justify-content: center; gap: .04em; margin-top: clamp(18px, 2.5vw, 30px); font-family: var(--f-display); font-size: clamp(130px, 22vw, 320px); font-weight: 700; line-height: .9; letter-spacing: -.06em; transform: translate(calc(var(--mx) * 16px), calc(var(--my) * 12px)); transition: transform .4s var(--ease-out); }
.nf__digit { background: linear-gradient(180deg, #fff 20%, #8FB0FF 70%, rgba(47,107,255,.35)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 20px 50px rgba(47,107,255,.45)); }
.nf__orb { position: relative; display: grid; place-items: center; width: .74em; height: .74em; margin: 0 .03em; transform: translate(calc(var(--mx) * -22px), calc(var(--my) * -16px)); transition: transform .5s var(--ease-out); }
.nf__ring { position: absolute; inset: 0; border-radius: 50%; border: .028em solid rgba(143,176,255,.85); box-shadow: 0 0 40px rgba(47,107,255,.5), inset 0 0 40px rgba(47,107,255,.35); }
.nf__ring--2 { inset: 16%; border: 2px dashed rgba(94,242,225,.55); box-shadow: none; animation: spin 14s linear infinite; }
.nf__core { width: 34%; height: 34%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--teal) 30%, var(--blue) 75%); box-shadow: 0 0 50px rgba(94,242,225,.6); animation: nfPulse 2.4s ease-in-out infinite; }
@keyframes nfPulse { 50% { transform: scale(.86); box-shadow: 0 0 80px rgba(94,242,225,.9); } }
.nf__sat { position: absolute; inset: 0; animation: spin 5s linear infinite; }
.nf__sat::before { content: ""; position: absolute; top: -.035em; left: 50%; width: .07em; height: .07em; border-radius: 50%; background: var(--teal); box-shadow: 0 0 18px var(--teal), 0 0 4px #fff; transform: translateX(-50%); }
.nf__hero h1 { margin-top: clamp(18px, 2.4vw, 30px); font-size: clamp(34px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.045em; color: #fff; }
.nf__hero h1 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--teal); }
.nf__lead { max-width: 560px; margin-top: 18px; font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.65; color: var(--on-dark-2); }
.nf > * { animation: nfIn .9s var(--ease-out) both; }
@keyframes nfIn { from { opacity: 0; transform: translateY(24px); } }
@media (max-width: 600px) {
  .nf__hero { margin: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .nf__grid, .nf__ring--2, .nf__core, .nf__sat, .nf__blink, .nf > * { animation: none; }
  .nf__code, .nf__orb { transform: none; }
}

/* ---------- PyHRM: modules — photo slider (two cards in view) beside a heading panel with prev/next ----------
   Each card's caption box shows the category and module; on hover it opens to reveal the description. */
.hr-mods { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.hr-mods__view { overflow: hidden; border-radius: 12px; touch-action: pan-y; }
.hr-mods__track { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; transform: translate3d(var(--x, 0px), 0, 0); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.hr-mod { position: relative; flex: 0 0 calc((100% - 20px) / 2); height: clamp(460px, 42vw, 600px); overflow: hidden; border-radius: 12px; background: var(--paper-2); }
.hr-mod img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.hr-mod:hover img { transform: scale(1.06); }
.hr-mod__box { position: absolute; left: 18px; right: 18px; bottom: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 22px 28px; border-radius: 10px; background: #fff; box-shadow: 0 20px 40px -24px rgba(11,18,32,.45); }
.hr-mod__box small { font-size: 15px; color: var(--blue); }
.hr-mod__box small::before { content: "/"; margin-right: 8px; }
.hr-mod__box h3 { grid-column: 1; margin-top: 2px; font-size: clamp(20px, 1.8vw, 25px); letter-spacing: -.02em; color: var(--text); }
.hr-mod__go { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 26px; height: 26px; fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-out), stroke .3s; }
.hr-mod:hover .hr-mod__go { stroke: var(--blue); transform: rotate(45deg); }
.hr-mod__box p { grid-column: 1 / -1; max-height: 0; overflow: hidden; opacity: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); transition: max-height .6s var(--ease-out), opacity .4s var(--ease), margin-top .6s var(--ease-out); }
.hr-mod:hover .hr-mod__box p, .hr-mod:focus-within .hr-mod__box p { max-height: 7em; margin-top: 10px; opacity: 1; }
.hr-mods__panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 3.6vw, 56px); border: var(--rule); border-radius: 12px; background: #fff; }
.hr-mods__panel .ab-h2 { font-size: clamp(32px, 3vw, 48px); }
.hr-mods__panel .ab-lead { margin-top: 20px; }
.hr-mods__nav { display: flex; gap: 12px; margin-top: clamp(28px, 3vw, 44px); }
.hr-mods__btn { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--ink-950); color: #fff; transition: transform .35s var(--ease-out), background .3s; }
.hr-mods__btn--next { background: var(--blue); }
.hr-mods__btn:hover { transform: scale(1.08); }
.hr-mods__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.hr-mods__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1100px) {
  .hr-mods { grid-template-columns: minmax(0, 1fr); }
  .hr-mods__panel { order: -1; }
}
@media (max-width: 760px) {
  .hr-mod { flex-basis: 100%; height: 440px; }
  .hr-mod__box { padding: 18px 20px; }
  .hr-mod__box p { max-height: 7em; margin-top: 10px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-mods__track { transition: none; }
}
/* ---------- PyHRM: screens — bento gallery of real dashboard shots with a full-size viewer ---------- */
.hr-shots2 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 21vw, 320px); gap: 18px; margin: 0; padding: 0; }
.hr-shot--wide { grid-column: span 2; }
.hr-shot--tall { grid-row: span 2; }
.hr-shot button { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 18px; background: #0B0D14; cursor: zoom-in; box-shadow: 0 30px 60px -40px rgba(11,18,32,.6); }
.hr-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.hr-shot--tall img { object-position: 50% 30%; }
.hr-shot button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,6,13,.85), rgba(5,6,13,0) 45%); }
.hr-shot__cap { position: absolute; z-index: 1; left: 24px; right: 70px; bottom: 22px; display: grid; justify-items: start; gap: 8px; text-align: left; color: #fff; }
.hr-shot__cap small { padding: 4px 10px; border-radius: 6px; background: var(--blue); font-family: var(--f-label); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.hr-shot__cap strong { font-family: var(--f-display); font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.hr-shot__zoom { position: absolute; z-index: 1; right: 20px; bottom: 22px; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: background .3s, transform .4s var(--ease-out); }
.hr-shot button:hover img { transform: scale(1.05); }
.hr-shot button:hover .hr-shot__zoom { background: var(--blue); transform: scale(1.1); }
.hr-shot button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.hr-shotbox { width: min(1200px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: 18px; background: #0B0D14; color: #fff; overflow: hidden; }
.hr-shotbox::backdrop { background: rgba(5,6,13,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hr-shotbox[open] { animation: panelIn .4s var(--ease-out); }
.hr-shotbox img { display: block; width: 100%; max-height: calc(92vh - 56px); object-fit: contain; }
.hr-shotbox p { padding: 16px 22px; font-family: var(--f-display); font-size: 17px; font-weight: 600; }
.hr-shotbox__x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; }
.hr-shotbox__x:hover { background: #fff; color: var(--ink-950); }
.hr-shotbox__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 760px) {
  .hr-shots2 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .hr-shot--wide, .hr-shot--tall { grid-column: auto; grid-row: auto; }
  .hr-shot button { aspect-ratio: 3 / 2; height: auto; }
  .hr-shot--tall button { aspect-ratio: 4 / 5; }
}
/* ---------- PyHRM: people reel — two photo rows drifting opposite ways, centre badge with a turning lifecycle ring ---------- */
.hr-reel { position: relative; overflow: hidden; display: grid; gap: 22px; padding: clamp(24px, 3vw, 40px) 0; }
.hr-reel__row { overflow: hidden; }
.hr-reel__track { display: flex; gap: 22px; width: max-content; padding-right: 22px; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }
.hr-reel__pic { flex: none; overflow: hidden; height: clamp(220px, 22vw, 340px); margin: 0; border-radius: 12px; background: var(--paper-2); }
.hr-reel__pic--w { width: clamp(320px, 30vw, 460px); }
.hr-reel__pic--n { width: clamp(220px, 19vw, 300px); }
.hr-reel__pic { position: relative; display: block; isolation: isolate; color: #fff; }
.hr-reel__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
/* Hover: brand-blue wash, arrow in the corner, tag + title rising from the bottom */
.hr-reel__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,52,140,.55), rgba(16,38,110,.82)); opacity: 0; transition: opacity .45s var(--ease); }
.hr-reel__cap { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 22px; display: grid; justify-items: start; gap: 10px; opacity: 0; transform: translateY(16px); transition: opacity .45s var(--ease), transform .6s var(--ease-out); }
.hr-reel__tag { padding: 5px 12px; border-radius: 8px; background: var(--blue); font-family: var(--f-label); font-size: 13.5px; font-weight: 500; }
.hr-reel__cap strong { font-family: var(--f-display); font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.hr-reel__go { position: absolute; z-index: 1; top: 22px; right: 22px; width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translate(-10px, 10px); transition: opacity .45s var(--ease), transform .6s var(--ease-out); }
.hr-reel__pic:hover img, .hr-reel__pic:focus-visible img { transform: scale(1.07); }
.hr-reel__pic:hover::after, .hr-reel__pic:focus-visible::after, .hr-reel__pic:hover .hr-reel__cap, .hr-reel__pic:focus-visible .hr-reel__cap, .hr-reel__pic:hover .hr-reel__go, .hr-reel__pic:focus-visible .hr-reel__go { opacity: 1; transform: none; }
.hr-reel__pic:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.hr-reel__badge { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: clamp(240px, 23vw, 360px); aspect-ratio: 1; border-radius: 50%; background: #fff; text-align: center; transform: translate(-50%, -50%); box-shadow: 0 0 0 10px rgba(255,255,255,.35), 0 40px 80px -30px rgba(11,18,32,.45); pointer-events: none; }
.hr-reel__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: hrRing 30s linear infinite; }
.hr-reel__ring text { font-family: var(--f-label); font-size: 9px; font-weight: 600; fill: var(--blue); }
@keyframes hrRing { to { transform: rotate(360deg); } }
.hr-reel__badge > div { display: grid; justify-items: center; gap: 8px; max-width: 62%; }
.hr-reel__badge small { font-family: var(--f-label); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.hr-reel__badge strong { font-family: var(--f-display); font-size: clamp(32px, 3.2vw, 50px); font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--text); }
.hr-reel__badge em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--blue); }
.hr-reel__badge p { font-size: clamp(13px, 1vw, 15px); line-height: 1.5; color: var(--text-2); }
@media (max-width: 600px) {
  .hr-reel { gap: 14px; }
  .hr-reel__track { gap: 14px; padding-right: 14px; }
  .hr-reel__pic { height: 180px; }
  .hr-reel__pic--w { width: 260px; }
  .hr-reel__pic--n { width: 170px; }
  .hr-reel__badge { width: 210px; }
  .hr-reel__badge p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-reel__ring { animation: none; }
}
/* ---------- PyHRM: app tour — feature tabs drive a phone; the active tab's screen slides in ---------- */
.hr-tour { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.hr-tour__tabs { display: grid; gap: 14px; }
.hr-tour__tabs button { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; width: 100%; padding: 18px 22px; border-radius: 16px; border: var(--rule); background: #fff; text-align: left; transition: border-color .3s, background .3s, box-shadow .3s; }
.hr-tour__tabs button:hover { border-color: rgba(47,107,255,.35); }
.hr-tour__tabs button[aria-selected="true"] { border-color: var(--blue); background: #F2F5FF; box-shadow: 0 18px 36px -26px rgba(47,107,255,.6); }
.hr-tour__tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.hr-tour__ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--paper-2); color: var(--text-3); transition: background .3s, color .3s; }
.hr-tour__ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hr-tour__tabs button[aria-selected="true"] .hr-tour__ic { background: var(--blue); color: #fff; }
.hr-tour__tabs strong { display: block; font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.hr-tour__tabs small { display: block; margin-top: 2px; font-size: 15px; color: var(--text-2); }
.hr-tour__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--blue), var(--teal)); transform: scaleX(var(--p, 0)); transform-origin: left; opacity: 0; }
.hr-tour__tabs button[aria-selected="true"] .hr-tour__bar { opacity: 1; }
.hr-tour__detail { display: grid; margin-top: 18px; padding: clamp(24px, 2.6vw, 34px); border-radius: 18px; border: var(--rule); background: #fff; }
.hr-tour__copy { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .45s var(--ease), transform .6s var(--ease-out), visibility 0s .45s; }
.hr-tour__copy.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease) .1s, transform .6s var(--ease-out) .1s; }
.hr-tour__k { font-family: var(--f-label); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.hr-tour__copy h3 { margin-top: 10px; font-size: clamp(24px, 2.3vw, 32px); letter-spacing: -.03em; color: var(--text); }
.hr-tour__copy > p:not(.hr-tour__k) { margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--text-2); }
.hr-tour__copy .pd-checks { margin-top: 18px; }
/* Phone */
.hr-tour__stage { position: relative; display: grid; place-items: center; padding: 40px 0; }
.hr-tour__stage::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(47,107,255,.18), transparent); }
.hr-phone2 { position: relative; width: min(320px, 78vw); aspect-ratio: 612 / 1394; padding: 10px; border-radius: 52px; background: #0B0D14; box-shadow: 0 0 0 2px #2A2E3A, 0 60px 100px -50px rgba(11,18,32,.75); }
.hr-phone2__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 42px; background: #F4F6FB; }
.hr-phone2__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hr-tour__views { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; }
.hr-view { grid-area: 1 / 1; display: grid; place-items: center; width: 100%; opacity: 0; visibility: hidden; transform: translateX(14%) scale(.96); transition: opacity .5s var(--ease), transform .8s cubic-bezier(.2,.8,.2,1), visibility 0s .8s; }
.hr-view.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease), transform .8s cubic-bezier(.2,.8,.2,1); }
.hr-view.is-out { opacity: 0; visibility: visible; transform: translateX(-14%) scale(.96); }
.hr-view--wide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; box-shadow: 0 50px 90px -46px rgba(11,18,32,.7); }
/* Floating chips */
.hr-tour__chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; border-radius: 16px; background: #fff; box-shadow: 0 24px 50px -24px rgba(11,18,32,.35); animation: svFloat 6s ease-in-out infinite; }
.hr-tour__chip--a { top: 8%; right: 0; }
.hr-tour__chip--b { bottom: 14%; left: 0; animation-delay: -3s; }
.hr-tour__chip span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #E6F8EF; color: #0B7A57; }
.hr-tour__chip--b span { background: #EEEAFF; color: #6A4FE0; }
.hr-tour__chip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hr-tour__chip strong { display: block; font-family: var(--f-display); font-size: 15px; font-weight: 600; color: var(--text); }
.hr-tour__chip small { display: block; font-size: 12.5px; color: var(--text-3); }
@media (max-width: 1100px) {
  .hr-tour { grid-template-columns: minmax(0, 1fr); }
  .hr-tour__stage { order: -1; }
}
@media (max-width: 600px) {
  .hr-tour__chip { display: none; }
  .hr-tour__tabs button { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-view, .hr-tour__copy { transition: none; transform: none; }
  .hr-tour__chip { animation: none; }
}

/* ---------- PyHRM: set-up — settings tiles whose switches flip on, then a chevron rollout roadmap ---------- */
.hr-cfg { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; }
.hr-cfg li { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 24px; border-radius: 18px; border: var(--rule); background: #fff; box-shadow: 0 20px 40px -34px rgba(11,18,32,.5); transition: transform .45s var(--ease-out), border-color .3s, box-shadow .45s var(--ease-out); }
.hr-cfg li:hover { transform: translateY(-4px); border-color: rgba(47,107,255,.35); box-shadow: 0 30px 50px -34px rgba(47,107,255,.55); }
.hr-cfg__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.hr-cfg .ct-ic { width: 46px; height: 46px; }
.hr-cfg__sw { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--blue); transition: background .4s var(--ease); transition-delay: var(--d, 0s); }
.hr-cfg__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(11,18,32,.25); transform: translateX(18px); transition: transform .4s var(--ease-out); transition-delay: var(--d, 0s); }
.js .hr-cfg:not(.is-in) .hr-cfg__sw { background: #D5DAE5; }
.js .hr-cfg:not(.is-in) .hr-cfg__sw::after { transform: none; }
.hr-cfg strong { font-family: var(--f-display); font-size: 17.5px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.hr-cfg p { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.hr-road__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: clamp(64px, 7vw, 96px) 0 24px; }
.hr-road__head h3 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.03em; color: var(--text); }
.hr-road__head p { font-size: 15.5px; color: var(--text-2); }
.hr-road { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 6px; margin: 0; padding: 0; }
.hr-road__chev { display: flex; align-items: center; gap: 14px; height: 92px; padding: 0 44px 0 48px; background: var(--bg); color: #fff; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%, 28px 50%); }
.hr-road li:first-child .hr-road__chev { padding-left: 26px; border-radius: 14px 0 0 14px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%); }
.hr-road li:nth-child(1) { --bg: linear-gradient(90deg, #DCE6FF, #C8D8FF); --fg: var(--text); }
.hr-road li:nth-child(2) { --bg: linear-gradient(90deg, #A8C1FF, #8FB0FF); --fg: var(--text); }
.hr-road li:nth-child(3) { --bg: linear-gradient(90deg, #5585FF, #3D74FF); }
.hr-road li:nth-child(4) { --bg: linear-gradient(90deg, #2458E8, #1638A8); }
.hr-road__chev { color: var(--fg, #fff); }
.hr-road__chev svg { flex: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hr-road__chev strong { font-family: var(--f-display); font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.hr-road p { position: relative; margin-top: 18px; padding: 16px 24px 0 26px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.hr-road p::before { content: ""; position: absolute; left: 26px; top: 0; width: 28px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--teal)); }
.hr-road li { transition: opacity .6s var(--ease), transform .8s var(--ease-out); transition-delay: var(--d, 0s); }
.js .hr-road:not(.is-in) li { opacity: 0; transform: translateX(-24px); }

@media (max-width: 1100px) {
  .pd-hero__in, .pd-split { grid-template-columns: minmax(0, 1fr); }
  .pd-cards, .sv-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-life { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hr-life li { min-height: 400px; }
  .hr-panel { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 12px 8px; }
  .hr-panel__pic { min-height: 260px; }
  .hr-cfg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hr-road { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 28px; }
  .hr-panel__body { padding: 16px 14px 20px; }
  .sv-ig { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 40px; }
  .sv-ig__q { grid-column: 1 / -1; order: -1; }
  .sv-ig__wave { --reach: 0px; }
  .hr-hero__photo { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .hr-hero .pd-hero__shade { display: block; }
}
@media (max-width: 760px) {
  .pd-cards, .pd-cards--3, .sv-stack { grid-template-columns: minmax(0, 1fr); }
  .sv-ig { grid-template-columns: minmax(0, 1fr); }
  .sv-ig__phone { height: 520px; }
  .sv-pyr li:nth-child(n) { width: 100%; padding: 14px 18px; border-radius: 14px; clip-path: none; }
  .sv-step { padding: 22px; }
  .sv-wheel.is-live .sv-wheel__stage { height: 610px; }
  .sv-wheel.is-live .sv-step { height: 480px; }
  .sv-step__vis { padding: 22px; border-radius: 80px; }
  .hr-life { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hr-life li { min-height: 340px; }
  .hr-life li:last-child { grid-column: 1 / -1; }
  .hr-cfg { grid-template-columns: minmax(0, 1fr); }
  .hr-road { grid-template-columns: minmax(0, 1fr); }
  .hr-road__chev, .hr-road li:first-child .hr-road__chev { height: 72px; padding: 0 22px; border-radius: 14px; clip-path: none; }
  .hr-road p { margin-top: 10px; padding: 12px 6px 0; }
  .hr-road p::before { left: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .js.io .pd-rv { opacity: 1; transform: none; transition: none; }
  .sv-wave span, .sv-live::before, .sv-bars span { animation: none; }
  .sv-ig__who i, .sv-ig__eq span, .sv-ig__wave .is-pulse, .sv-ig__wave g { animation: none; }
  .sv-ig__who i { transform: scale(1.5); opacity: .3; }
  .sv-orb i { animation: none; transform: scale(1.6); opacity: .35; }
  .sv-orb i:nth-child(2) { transform: scale(2.2); opacity: .2; }
  .sv-orb i:nth-child(3) { transform: scale(2.8); opacity: .1; }
  .js .sv-ig__feed li, .sv-ig.is-in .sv-ig__feed li { opacity: 1; animation: none; }
  .sv-wheel.is-live .sv-step { transition: opacity .3s, visibility 0s .3s; }
  .sv-msg { animation: none; opacity: 1; }
}

/* ==========================================================================
   AI Capabilities pages — AI Automation, AI Consulting, AI Integration, Artificial Intelligence Services,
   Document AI and Enterprise AI Copilots. Six hidden <main class="acp"> pages share one template that the
   script near the end of this file fills from its data. Section order follows appinventiv.com/ai-consulting-services,
   drawn in Pyzen's theme (inset dark panels, Inter Tight headings, serif italic emphasis).
   ========================================================================== */
.acp { --rule: 1px solid var(--line); background: var(--paper); }
.acp .ac-sec { padding: clamp(80px, 9vw, 130px) 0; position: relative; }
.acp .ac-sec--soft { background: #F6F7F9; }
.acp .x-head { margin-bottom: clamp(36px, 4.5vw, 56px); }
.ac-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: #EEF4FF; color: var(--blue-700); }
.ac-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Hero: dark inset panel over a photo ---------- */
.ac-hero { position: relative; isolation: isolate; overflow: hidden; margin: 0; border-radius: 0; background: var(--ink-950); color: #fff; padding: calc(var(--header-h) + clamp(64px, 8vw, 120px)) 0 clamp(40px, 5vw, 64px); }
.ac-hero__bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; opacity: .5; transform: scale(1.04); animation: acZoom 18s var(--ease) both; }
@keyframes acZoom { from { transform: scale(1.12); } }
.ac-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(5,6,13,.94) 0%, rgba(5,6,13,.72) 45%, rgba(5,6,13,.35) 100%), linear-gradient(0deg, rgba(5,6,13,.9) 0%, rgba(5,6,13,0) 55%); }
.ac-hero::after { content: ""; position: absolute; z-index: -1; right: -12%; top: -35%; width: 820px; height: 820px; background: radial-gradient(closest-side, rgba(47,107,255,.3), rgba(123,108,255,.12) 45%, transparent 72%); }
.ac-hero .x-crumbs { color: rgba(255,255,255,.6); margin-bottom: 30px; flex-wrap: wrap; }
.ac-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.ac-hero .x-k { color: var(--teal); margin-bottom: 20px; }
.ac-hero h1 { max-width: 14ch; font-size: clamp(42px, 5.4vw, 80px); line-height: 1; letter-spacing: -.045em; color: #fff; }
.ac-hero h1 em { color: var(--teal); }
.ac-hero__lead { margin-top: 26px; max-width: 560px; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.65; color: rgba(238,241,255,.8); }
.ac-hero .x-hero__ctas { margin-top: 38px; }

/* ---------- Trusted by: client logo strip (on the same #0f0f0f band as core capabilities, as on appinventiv.com) ---------- */
.ac-trust { padding: clamp(44px, 5vw, 64px) 0 0; background: var(--ink-950); }
.ac-trust p { text-align: center; font-family: var(--f-label); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #a3a3a3; }
.ac-trust--light { background: transparent; }
.ac-trust--light p { color: var(--text-3); }
.ac-marq { position: relative; overflow: hidden; margin-top: 26px; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ac-marq__t { display: flex; width: max-content; gap: 16px; animation: acMarq 46s linear infinite; }
.ac-marq:hover .ac-marq__t { animation-play-state: paused; }
.ac-marq__t span { display: grid; place-items: center; width: 180px; height: 84px; padding: 16px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.ac-marq__t img { max-height: 40px; max-width: 130px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.ac-marq__t span:hover img { filter: none; opacity: 1; }
@keyframes acMarq { to { transform: translateX(-50%); } }

/* ---------- Core capabilities: a row of bordered cards on #0f0f0f; the hovered card turns blue, rounds and scales up
   (same values as appinventiv.com/ai-services-and-solutions) ---------- */
.acp .ac-core { overflow-x: clip; isolation: isolate; background: var(--ink-950); color: var(--on-dark); padding-top: clamp(64px, 7vw, 100px); }
.acp .ac-core::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -30%; width: min(1100px, 120%); height: 70%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(47,107,255,.18), rgba(123,108,255,.06) 60%, transparent); pointer-events: none; }
.ac-core .x-h2 { color: #fff; }
.ac-core .x-h2 em { color: var(--teal); }
.ac-core .x-k { color: var(--teal); }
.ac-core .x-lead { color: var(--on-dark-2); }
.ac-caps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 12px 0 0; }
.ac-caps li { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; min-height: 300px; padding: 26px 22px 28px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01)); cursor: default; transition: transform .6s var(--ease-out), border-color .4s, box-shadow .6s var(--ease-out); }
.ac-caps li::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(130% 90% at 50% 110%, rgba(47,107,255,.55), rgba(123,108,255,.18) 55%, transparent 80%); opacity: 0; transition: opacity .5s var(--ease); }
.ac-caps li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
.ac-caps li:hover { transform: translateY(-8px); border-color: rgba(94,242,225,.35); box-shadow: 0 36px 60px -36px rgba(47,107,255,.65); }
.ac-caps li:hover::before { opacity: 1; }
.ac-caps li:hover::after { transform: none; }
.ac-caps__ic { display: block; }
.ac-caps__ic svg { display: block; width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-out); }
.ac-caps li:hover .ac-caps__ic svg { transform: translateY(-4px); }
.ac-caps strong { display: block; font-family: var(--f-display); font-size: 18.5px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.ac-caps div span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--on-dark-2); transition: color .4s; }
.ac-caps li:hover div span { color: rgba(238,241,255,.9); }

/* ---------- Services: vertical tabs with a detail panel ---------- */
/* Service tabs in a row: the chosen tab's underline draws across, then copy rises in and the photo wipes open
   (after kyndryl.com/in/en/consulting) */
.ac-svc__tabs { display: flex; align-items: stretch; border-bottom: 1px solid var(--line-2); }
.ac-svc__tabs button { position: relative; flex: none; max-width: 220px; padding: 0 18px 16px; text-align: left; text-wrap: balance; font-family: var(--f-display); font-size: 16.5px; font-weight: 500; line-height: 1.3; letter-spacing: -.015em; color: var(--text-3); transition: color .3s; }
.ac-svc__tabs button:first-child { padding-left: 0; }
.ac-svc__tabs button::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: var(--blue-700); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
.ac-svc__tabs button:first-child::after { left: 0; }
.ac-svc__tabs button:hover { color: var(--text); }
.ac-svc__tabs button[aria-selected="true"] { color: var(--text); font-weight: 700; }
.ac-svc__tabs button[aria-selected="true"]::after { transform: none; }
.ac-svc__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-top: clamp(32px, 4vw, 52px); }
.ac-svc__panel[hidden] { display: none; }
.ac-svc__copy > * { opacity: 0; transform: translateY(18px); }
.ac-svc__panel.is-in .ac-svc__copy > * { animation: acSvcUp .7s var(--ease-out) forwards; }
.ac-svc__panel.is-in .ac-svc__copy > :nth-child(2) { animation-delay: .08s; }
.ac-svc__panel.is-in .ac-svc__copy > :nth-child(3) { animation-delay: .16s; }
.ac-svc__panel.is-in .ac-svc__copy > :nth-child(4) { animation-delay: .22s; }
.ac-svc__panel.is-in .ac-svc__copy > :nth-child(5) { animation-delay: .3s; }
@keyframes acSvcUp { to { opacity: 1; transform: none; } }
.ac-svc__copy h3 { font-size: clamp(28px, 2.8vw, 42px); line-height: 1.08; letter-spacing: -.035em; }
.ac-svc__copy > p { margin-top: 16px; max-width: 520px; font-size: 17px; line-height: 1.65; color: var(--text-2); }
.ac-svc__rule { display: block; width: 100px; height: 2px; margin-top: 26px; background: var(--grad); }
.ac-svc__panel.is-in .ac-svc__rule { animation-name: acSvcRule; }
@keyframes acSvcRule { from { opacity: 1; transform: none; width: 0; } to { opacity: 1; transform: none; width: 100px; } }
.ac-svc__copy ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.ac-svc__copy li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.5; color: var(--text); }
.ac-svc__copy li svg { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ac-svc__copy .btn { margin-top: 32px; }
.ac-svc__media { position: relative; margin: 0; aspect-ratio: 16 / 11; overflow: hidden; border-radius: var(--r-lg); background: var(--ink-850); box-shadow: 0 40px 80px -50px rgba(10,12,24,.55); }
.ac-svc__media img { width: 100%; height: 100%; object-fit: cover; }
.ac-svc__panel.is-in .ac-svc__media { animation: acSvcWipe 1s var(--ease-out) both; }
.ac-svc__panel.is-in .ac-svc__media img { animation: acSvcZoom 1.6s var(--ease-out) both; }
@keyframes acSvcWipe { from { clip-path: inset(0 0 0 100% round var(--r-lg)); } to { clip-path: inset(0 0 0 0 round var(--r-lg)); } }
@keyframes acSvcZoom { from { transform: scale(1.14); } }
.ac-svc__media figcaption { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--f-label); font-size: 14px; font-weight: 600; box-shadow: 0 16px 30px -18px rgba(10,12,24,.5); }
.ac-svc__media figcaption .ac-ic { width: 36px; height: 36px; border-radius: 50%; }
.ac-svc__media figcaption .ac-ic svg { width: 18px; height: 18px; }
.ac-svc__panel.is-in figcaption { animation: acPanel .7s var(--ease-out) .45s both; }
@keyframes acPanel { from { opacity: 0; transform: translateY(14px); } }

/* ---------- CTA band ---------- */
.ac-band { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: center; padding: clamp(36px, 5vw, 64px); border-radius: var(--r-xl); background: linear-gradient(115deg, #0D1A4A 0%, #1742C0 52%, #2F6BFF 100%); color: #fff; }
.ac-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask: radial-gradient(ellipse 60% 90% at 85% 50%, #000 20%, transparent 75%); mask: radial-gradient(ellipse 60% 90% at 85% 50%, #000 20%, transparent 75%); }
.ac-band h2 { font-size: clamp(28px, 3vw, 44px); line-height: 1.08; letter-spacing: -.04em; color: #fff; }
.ac-band h2 em { color: var(--teal); }
.ac-band p { margin-top: 12px; max-width: 620px; font-size: 16.5px; line-height: 1.6; color: rgba(238,241,255,.82); }
.ac-band--alt { background: linear-gradient(115deg, #05060D 0%, #151A36 60%, #2A2470 100%); }

/* ---------- Industries: use-case cards ---------- */
.ac-ind { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ac-ind article { display: flex; flex-direction: column; gap: 14px; padding: 26px 24px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); transition: transform .45s var(--ease-out), box-shadow .45s, border-color .3s; }
.ac-ind article:hover { transform: translateY(-5px); border-color: rgba(47,107,255,.3); box-shadow: 0 30px 56px -40px rgba(10,12,24,.5); }
.ac-ind h3 { margin-top: 6px; font-size: 19px; letter-spacing: -.025em; }
.ac-ind p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* ---------- Success stories: home page case studies in a swipeable row ---------- */
.ac-cases { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, calc((100% - 40px) / 3)); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; }
.ac-cases .ab-case { scroll-snap-align: start; }
.ac-cases__nav { display: flex; gap: 8px; }
.ac-cases__nav button { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); transition: background .25s, color .25s; }
.ac-cases__nav button:hover { background: var(--ink-950); color: #fff; }
.ac-cases__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Why Pyzen ---------- */
.ac-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: var(--r-lg); background: var(--line-dark); border: 1px solid var(--line-dark); }
.ac-why article { padding: clamp(26px, 3vw, 40px); background: var(--ink-950); transition: background .35s; }
.ac-why article:hover { background: #0D1022; }
.ac-why .ac-ic { background: rgba(94,242,225,.1); color: var(--teal); }
.ac-why h3 { margin-top: 24px; font-size: 21px; letter-spacing: -.025em; color: #fff; }
.ac-why p { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--on-dark-2); }

/* ---------- Roadmap: timeline that fills as you scroll ---------- */
.ac-road { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.ac-road__copy { position: sticky; top: calc(var(--header-h) + 90px); }
.ac-road__copy .x-lead { margin-top: 22px; }
.ac-steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 44px; }
.ac-steps::before, .ac-steps__fill { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--line); }
.ac-steps__fill { background: linear-gradient(var(--blue), var(--violet), var(--teal)); transform: scaleY(0); transform-origin: 50% 0; }
.ac-steps li { position: relative; padding: 0 0 38px; }
.ac-steps li:last-child { padding-bottom: 0; }
.ac-steps li::before { content: ""; position: absolute; left: -41px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2); transition: border-color .4s, background .4s, box-shadow .4s; }
.ac-steps li.is-on::before { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 6px rgba(47,107,255,.14); }
.ac-steps strong { display: block; font-family: var(--f-display); font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
.ac-steps p { margin-top: 8px; max-width: 560px; font-size: 15.5px; line-height: 1.65; color: var(--text-2); }

/* ---------- Engagement options (AI Automation): photo slider with the next slide peeking in at the edge; the arrows,
   a swipe or a click on the peeking photo slide the track, then the copy rises in (after valtech.com) ---------- */
.ac-eng { overflow: hidden; }
.ac-eng__track { --peek: 110px; --gap: 28px; display: flex; gap: var(--gap); transform: translateX(calc(var(--i, 0) * (var(--peek) - var(--gap) - 100%))); transition: transform 1s var(--ease-out); touch-action: pan-y; }
.ac-eng__slide { flex: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 3vw, 44px); width: calc(100% - var(--peek)); height: clamp(460px, 46vw, 600px); }
.ac-eng__slide:not(.is-on) { cursor: pointer; }
.ac-eng__media { position: relative; overflow: hidden; margin: 0; background: var(--paper-2); }
.ac-eng__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.4s var(--ease-out); }
.ac-eng__slide.is-on .ac-eng__media img { transform: none; }
.ac-eng__pic { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: rgba(5,6,13,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-family: var(--f-label); font-size: 16px; font-weight: 500; opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .35s, transform .5s var(--ease-out); }
.ac-eng__slide.is-on .ac-eng__media:hover .ac-eng__pic { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ac-eng__content { display: flex; flex-direction: column; justify-content: space-between; padding-top: 8px; }
.ac-eng__content > div > * { opacity: 0; transform: translateY(26px); transition: opacity .5s, transform .8s var(--ease-out); }
.ac-eng__slide.is-on .ac-eng__content > div > * { opacity: 1; transform: none; transition-delay: .35s; }
.ac-eng__slide.is-on .ac-eng__content > div > :nth-child(2) { transition-delay: .45s; }
.ac-eng__slide.is-on .ac-eng__content > div > :nth-child(3) { transition-delay: .55s; }
.ac-eng__pre { display: block; font-family: var(--f-label); font-size: 20px; color: var(--text-2); }
.ac-eng__content h3 { margin-top: 6px; font-size: clamp(44px, 5.2vw, 80px); font-weight: 400; line-height: 1; letter-spacing: -.035em; }
.ac-eng__content p { max-width: 520px; font-family: var(--f-label); font-size: clamp(19px, 1.8vw, 27px); font-weight: 400; line-height: 1.45; color: var(--text); }
.ac-eng__content small { display: block; margin-top: 14px; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); }
.ac-eng__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 30px; }
.ac-eng__arrows { display: flex; gap: 22px; }
.ac-eng__arrows button { display: grid; place-items: center; width: 52px; height: 40px; color: var(--text); transition: transform .35s var(--ease-out), color .3s; }
.ac-eng__arrows button:first-child:hover { transform: translateX(-5px); color: var(--blue-700); }
.ac-eng__arrows button:last-child:hover { transform: translateX(5px); color: var(--blue-700); }
.ac-eng__arrows svg { width: 40px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .ac-eng__track { --peek: 36px; --gap: 16px; }
  .ac-eng__slide { grid-template-columns: minmax(0, 1fr); grid-template-rows: 300px auto; height: auto; gap: 22px; }
  .ac-eng__content p { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-eng__track, .ac-eng__media img, .ac-eng__content > div > * { transition: none; }
}

/* ---------- Engagement models ---------- */
.ac-models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ac-models article { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 28px 24px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); }
.ac-models article::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
.ac-models article:hover::after { transform: none; }
.ac-models h3 { margin-top: 22px; font-size: 20px; letter-spacing: -.025em; }
.ac-models p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.ac-models small { margin-top: auto; padding-top: 18px; font-family: var(--f-label); font-size: 12.5px; font-weight: 600; color: var(--blue-700); }

/* ---------- Technology stack ---------- */
.ac-tech__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.ac-tech__tabs button { height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); font-family: var(--f-label); font-size: 14px; font-weight: 500; color: var(--text-2); transition: background .25s, color .25s, border-color .25s; }
.ac-tech__tabs button[aria-selected="true"] { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.ac-tech__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.ac-tech__grid[hidden] { display: none; }
.ac-tech__grid span { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-family: var(--f-label); font-size: 14.5px; font-weight: 600; color: var(--text); animation: acPanel .5s var(--ease-out) both; }
.ac-tech__grid span i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--grad); }

/* ---------- Compliance frameworks ---------- */
.ac-comp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ac-comp div { padding: 22px; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; }
.ac-comp strong { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.ac-comp strong svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ac-comp p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--text-2); }

/* ---------- Related capabilities ---------- */
.ac-rel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ac-rel a { display: flex; flex-direction: column; gap: 14px; padding: 24px 22px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); transition: transform .45s var(--ease-out), box-shadow .45s, border-color .3s; }
.ac-rel a:hover { transform: translateY(-5px); border-color: rgba(47,107,255,.35); box-shadow: 0 30px 56px -40px rgba(10,12,24,.5); }
.ac-rel strong { font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.ac-rel span { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.ac-rel em { margin-top: auto; font-family: var(--f-label); font-style: normal; font-size: 14px; font-weight: 600; color: var(--blue-700); }

/* reveal */
.js .acp .ac-rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform 1.1s var(--ease-out); transition-delay: var(--d, 0s); }
.js .acp .ac-rv.is-in { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .ac-svc__panel, .ac-road { grid-template-columns: minmax(0, 1fr); }
  .ac-svc__media { order: -1; }
  .ac-road__copy { position: static; }
  .ac-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ac-caps li { min-height: 260px; }
  .ac-ind, .ac-models, .ac-comp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-rel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ac-svc__tabs { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .ac-svc__tabs::-webkit-scrollbar { display: none; }
  .ac-svc__tabs button { scroll-snap-align: start; }
}
@media (max-width: 680px) {
  .ac-caps, .ac-ind, .ac-models, .ac-comp, .ac-why, .ac-rel, .ac-svc__copy ul { grid-template-columns: minmax(0, 1fr); }
  .ac-caps li { min-height: 0; gap: 26px; padding: 24px 22px; }
  .ac-band { grid-template-columns: minmax(0, 1fr); }
  .ac-cases { grid-auto-columns: 86%; }
  .ac-marq__t span { width: 140px; height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-hero__bg, .ac-marq__t { animation: none; }
  .ac-caps li { transition: none; }
  .ac-svc__copy > *, .ac-svc__panel.is-in .ac-svc__copy > *, .ac-svc__panel.is-in .ac-svc__media, .ac-svc__panel.is-in .ac-svc__media img, .ac-svc__panel.is-in figcaption { opacity: 1; transform: none; animation: none; }
}

/* ==========================================================================
   AI capability pages — one layout per topic. AI Automation keeps the shared template above; the other topics are
   composed from their own components: kc- AI Consulting (warm editorial), ki- AI Integration (technical, dark),
   ka- Artificial Intelligence Services (aurora), kd- Document AI (clean mint), kp- Enterprise AI Copilots (lavender).
   k- components are shared between layouts.
   ========================================================================== */
.acp [hidden] { display: none !important; }

/* AI capability heroes with a background video: the video fills the hero under a dark shade, and light heroes
   (Consulting, Document AI, Copilots) switch to white text. */
.k-vidhero { position: relative; isolation: isolate; overflow: hidden; background: #05060D !important; color: #fff; }
.k-vid { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
.k-vidcredit { position: absolute; right: 16px; bottom: 12px; z-index: 2; font-family: var(--f-label); font-size: 11.5px; color: rgba(255,255,255,.55); transition: color .25s; }
.k-vidcredit:hover { color: #fff; }
/* Video heroes stay bright: only a soft fade behind the copy on the left and along the bottom edge */
.k-vidshade { position: absolute; inset: 0; z-index: -2; background: var(--hero-shade); pointer-events: none; }
.ac-hero.k-vidhero::before { background: var(--hero-shade); }
/* Readable copy on every photo/video hero: a soft shadow lifts headings, leads, labels and breadcrumbs off the image */
:is(.k-vidhero, .hero.vshow, .vh, .ab-hero, .in-hero--bleed, .inh-hero, .sl-banner, .sl-hero--hub, .ct-hero, .pd-hero--photo) :is(h1, .x-k, .x-crumbs, .ab-k, .ab-crumbs, [class$="__lead"], .in-lead, .hero__copy p, .in-hero__promise li) { text-shadow: 0 2px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.35); }
:is(.k-vidhero, .hero.vshow, .vh, .ab-hero, .in-hero--bleed, .inh-hero, .sl-banner, .sl-hero--hub, .ct-hero, .pd-hero--photo) :is(.in-lead, [class$="__lead"]) { color: rgba(242,245,255,.92); }
@media (max-width: 760px) {
  /* On phones the copy spans the whole photo, so the shade evens out across it */
  :root { --hero-shade: linear-gradient(0deg, rgba(5,6,13,.9) 0%, rgba(5,6,13,.6) 45%, rgba(5,6,13,.42) 100%), linear-gradient(180deg, rgba(5,6,13,.5) 0%, rgba(5,6,13,0) 25%); }
}
.ac-hero.k-vidhero .ac-hero__bg, .ac-hero.k-vidhero .k-vidshade, .ka-hero.k-vidhero .k-vidshade { display: none; }
.kc-hero.k-vidhero::before { display: none; }
.ka-hero.k-vidhero .ka-hero__aurora { opacity: .35; }
.ka-hero.k-vidhero::after { background: var(--hero-shade); }
.acp .k-vidhero h1 { color: #fff; }
.acp .k-vidhero h1 em { color: var(--teal); }
.acp .k-vidhero .x-crumbs { color: rgba(255,255,255,.62); }
.acp .k-vidhero .x-crumbs a:hover { color: #fff; }
.acp .k-vidhero .x-k { color: var(--teal); }
.acp .k-vidhero .kc-hero__lead, .acp .k-vidhero .kd-hero__lead, .acp .k-vidhero .kp-hero__lead { color: rgba(238,241,255,.82); }
.k-vidhero .btn--primary { --btn-fill: #fff; --btn-fg-h: var(--text); }
:where(.acp) :where(svg[viewBox="0 0 24 24"], svg[viewBox="0 0 20 20"]) { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.k-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.k-sec { position: relative; padding: clamp(80px, 9vw, 130px) 0; }
.k-sec--tight { padding: clamp(40px, 5vw, 64px) 0; }
.k-sec--paper2 { background: #F6F7F9; }
.k-dark { background: var(--ink-950); color: var(--on-dark); }
.k-dark .x-h2 { color: #fff; }
.k-dark .x-h2 em { color: var(--teal); }
.k-dark .x-k { color: var(--teal); }
.k-dark .x-lead { color: var(--on-dark-2); }
.k-dark .ac-cases__nav button { border-color: var(--line-dark-2); color: #fff; }
.k-dark .ac-cases__nav button:hover { background: #fff; color: var(--ink-950); }
.k-link { color: var(--blue); font-weight: 600; }
.k-ctrl { display: grid; gap: 22px; justify-items: start; }
.k-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.k-chips > span:first-child { width: 100%; margin-bottom: 2px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.k-chips > span + span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-family: var(--f-label); font-size: 13px; font-weight: 500; color: var(--text-2); }
.k-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.k-ticks li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; }
.k-ticks svg { flex: none; width: 18px; height: 18px; margin-top: 1px; stroke-width: 2.2; color: var(--k-tick, var(--blue)); }
.k-progress { height: 2px; margin-top: 26px; border-radius: 2px; overflow: hidden; background: var(--line-dark-2); }
.k-progress i, .k-stepper__bar i { display: block; width: 100%; height: 100%; background: var(--grad); transform: scaleX(.1); transform-origin: 0 50%; transition: transform .3s; }
.is-drag { scroll-snap-type: none !important; cursor: grabbing !important; user-select: none; }

/* Shared: hover-fill list rows */
.k-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.k-rows a { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 48px minmax(0, .9fr) minmax(0, 1.1fr) 44px; gap: 24px; align-items: center; padding: 26px 8px; border-bottom: 1px solid var(--line); color: var(--text); transition: color .4s, padding .5s var(--ease-out); }
.k-rows a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink-950); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s var(--ease-out); }
.k-rows a:hover, .k-rows a:focus-visible { color: #fff; padding-left: 24px; padding-right: 24px; }
.k-rows a:hover::before, .k-rows a:focus-visible::before { transform: none; }
.k-rows__ic svg { display: block; width: 28px; height: 28px; stroke-width: 1.5; }
.k-rows strong { font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.k-rows__d { font-size: 15.5px; line-height: 1.6; color: var(--text-2); transition: color .4s; }
.k-rows a:hover .k-rows__d, .k-rows a:focus-visible .k-rows__d { color: var(--on-dark-2); }
.k-rows__go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); transition: background .4s, border-color .4s, color .4s, transform .5s var(--ease-out); }
.k-rows__go svg { width: 18px; height: 18px; stroke-width: 1.9; }
.k-rows a:hover .k-rows__go { background: var(--teal); border-color: var(--teal); color: var(--ink-950); transform: rotate(-45deg); }

/* Shared: horizontal expanding accordion */
.k-hacc { display: flex; gap: 10px; height: 540px; }
.k-hacc__p { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 24px; background: linear-gradient(165deg, var(--c1), var(--c2)); color: #fff; transition: flex-grow .8s var(--ease-out); }
.k-hacc__p:nth-child(1) { --c1: #1742C0; --c2: #0D1A4A; }
.k-hacc__p:nth-child(2) { --c1: #2F6BFF; --c2: #0D1A4A; }
.k-hacc__p:nth-child(3) { --c1: #1F55E6; --c2: #05060D; }
.k-hacc__p:nth-child(4) { --c1: #1742C0; --c2: #0A1A40; }
.k-hacc__p:nth-child(5) { --c1: #1742C0; --c2: #0D1022; }
.k-hacc__p:nth-child(6) { --c1: #2F6BFF; --c2: #151A36; }
.k-hacc__p.is-on { flex-grow: 5.5; }
.k-hacc__p::after { content: ""; position: absolute; right: -20%; top: -20%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent); pointer-events: none; }
.k-hacc__tab { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 24px 10px; color: #fff; text-align: left; }
.k-hacc__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.14); }
.k-hacc__ic svg { width: 22px; height: 22px; }
.k-hacc__t { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; transition: opacity .3s; }
.k-hacc__p.is-on .k-hacc__tab { pointer-events: none; align-items: flex-start; padding: 32px; }
.k-hacc__p.is-on .k-hacc__t { opacity: 0; }
.k-hacc__body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; min-width: 460px; padding: clamp(28px, 3vw, 40px); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .3s, transform .5s var(--ease-out), visibility 0s .3s; --k-tick: var(--teal); }
.k-hacc__p.is-on .k-hacc__body { opacity: 1; visibility: visible; transform: none; transition: opacity .5s .3s, transform .7s var(--ease-out) .3s, visibility 0s; }
.k-hacc__body h3 { font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.035em; color: #fff; }
.k-hacc__body > p { max-width: 520px; font-size: 16px; line-height: 1.6; color: rgba(238,241,255,.82); }
.k-hacc__body .k-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); }
.k-hacc__body .btn { align-self: flex-start; margin-top: 8px; }

/* Shared: comparison table */
.k-compare { overflow: hidden; border-radius: 24px; border: 1px solid var(--line); background: #fff; }
.k-compare__row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.k-compare__row + .k-compare__row > * { border-top: 1px solid var(--line); }
.k-compare__row--h span { padding: 18px 28px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); background: #F6F7F9; }
.k-compare__row--h span + span { background: var(--ink-950); color: var(--teal); }
.k-compare__no, .k-compare__yes { display: flex; gap: 14px; padding: 24px 28px; font-size: 15px; line-height: 1.6; }
.k-compare__no { background: #FAFAFB; color: var(--text-3); }
.k-compare__yes { background: var(--ink-950); color: var(--on-dark-2); transition: background .3s; }
.k-compare__row + .k-compare__row > .k-compare__yes { border-top-color: var(--line-dark); }
.k-compare__row:hover .k-compare__yes { background: #0D1022; }
.k-compare i { flex: none; margin-top: 3px; }
.k-compare i svg { display: block; width: 18px; height: 18px; stroke-width: 2.2; }
.k-compare__no i { color: #D0455B; }
.k-compare__yes i { color: var(--teal); }
.k-compare__yes strong { display: block; margin-bottom: 4px; font-family: var(--f-display); font-size: 17.5px; font-weight: 600; letter-spacing: -.02em; color: #fff; }

/* Shared: draggable stepper */
.k-stepper__bar { height: 2px; margin-bottom: 30px; border-radius: 2px; overflow: hidden; background: var(--line); }
.k-stepper__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, calc((100% - 72px) / 4)); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; margin: 0; padding: 0 0 6px; cursor: grab; }
.k-stepper__track::-webkit-scrollbar { display: none; }
.k-stepper__track li { position: relative; scroll-snap-align: start; padding: 30px 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.k-stepper__track li:not(:last-child)::after { content: ""; position: absolute; top: 37px; left: 56px; right: -24px; border-top: 1px dashed var(--line-2); }
.k-stepper__dot { display: block; width: 14px; height: 14px; margin-bottom: 26px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 6px rgba(47,107,255,.14); }
.k-stepper h3 { font-size: 20px; letter-spacing: -.025em; }
.k-stepper p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* Shared: pricing-style tiers */
.k-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.k-tiers article { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 26px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.k-tiers article.is-pick { background: var(--ink-950); border-color: var(--ink-950); color: #fff; box-shadow: 0 40px 70px -40px rgba(47,107,255,.6); }
.k-tiers h3 { margin-top: 10px; font-size: 21px; letter-spacing: -.025em; }
.k-tiers p { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.k-tiers small { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line-2); font-family: var(--f-label); font-size: 13px; font-weight: 600; color: var(--blue-700); }
.k-tiers .btn { align-self: flex-start; }
.k-tiers .is-pick p { color: var(--on-dark-2); }
.k-tiers .is-pick small { color: var(--teal); border-color: var(--line-dark-2); }
.k-tiers .is-pick .ac-ic { background: rgba(94,242,225,.12); color: var(--teal); }
.k-tiers__tag { position: absolute; top: 18px; right: 18px; padding: 5px 10px; border-radius: 999px; background: var(--teal); color: var(--ink-950); font-family: var(--f-label); font-size: 11.5px; font-weight: 700; }

/* Shared: stack columns, compliance badges, related pills, inline compliance */
.k-stackcols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink-950); }
.k-stackcols > div { padding: 26px 24px 8px 0; }
.k-stackcols > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.k-stackcols h3 { margin-bottom: 18px; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.k-stackcols ul { list-style: none; margin: 0; padding: 0; }
.k-stackcols li { padding: 10px 0; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; transition: padding .3s, color .3s; }
.k-stackcols li:hover { padding-left: 8px; color: var(--blue-700); }
.k-badges { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }
.k-badges li { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); font-family: var(--f-display); font-size: 16px; font-weight: 600; cursor: default; outline: none; transition: background .3s, color .3s, border-color .3s; }
.k-badges li > svg { width: 20px; height: 20px; color: var(--blue); }
.k-badges li:hover, .k-badges li:focus-visible { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.k-badges li:hover > svg, .k-badges li:focus-visible > svg { color: var(--teal); }
.k-badges span { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 3; width: min(260px, 70vw); padding: 12px 14px; border-radius: 12px; background: var(--ink-950); color: var(--on-dark); font-family: var(--f-body); font-size: 13.5px; font-weight: 400; line-height: 1.5; box-shadow: var(--shadow); opacity: 0; transform: translate(-50%, 6px); pointer-events: none; transition: opacity .25s, transform .35s var(--ease-out); }
.k-badges li:hover span, .k-badges li:focus-visible span { opacity: 1; transform: translate(-50%, 0); }
.k-rel { display: flex; flex-wrap: wrap; gap: 12px; }
.k-rel a { display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; transition: background .3s, color .3s, border-color .3s; }
.k-rel a:hover { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.k-rel svg { width: 18px; height: 18px; stroke-width: 1.9; }
.k-inline { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: 20px 40px; align-items: center; padding: 28px 32px; border-radius: 24px; background: #F6F7F9; border: 1px solid var(--line); }
.k-inline > p { font-size: 15.5px; line-height: 1.5; color: var(--text-2); }
.k-inline strong { display: block; margin-bottom: 4px; font-family: var(--f-display); font-size: 20px; letter-spacing: -.02em; color: var(--text); }
.k-inline ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.k-inline li { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-family: var(--f-label); font-size: 13.5px; font-weight: 600; }
.k-inline li svg { width: 16px; height: 16px; color: var(--blue); }

/* Shared: segmented toggle */
.k-toggle__bar { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); max-width: 880px; margin: 0 auto; padding: 6px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.k-toggle__bar button { position: relative; z-index: 1; min-height: 50px; padding: 0 14px; border-radius: 999px; font-family: var(--f-label); font-size: 14.5px; font-weight: 600; color: var(--text-2); transition: color .4s; }
.k-toggle__bar button[aria-selected="true"] { color: #fff; }
.k-toggle__pill { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / var(--n)); border-radius: 999px; background: var(--ink-950); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .55s var(--ease-out); }
.k-toggle__panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 32px; align-items: center; max-width: 960px; margin: 28px auto 0; padding: clamp(26px, 3.5vw, 44px); border-radius: 26px; background: #fff; border: 1px solid var(--line); }
.k-toggle__panel.is-in { animation: acPanel .6s var(--ease-out) both; }
.k-toggle__panel .ac-ic { width: 64px; height: 64px; }
.k-toggle__panel h3 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.03em; }
.k-toggle__panel p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.k-toggle__panel small { display: block; margin-top: 12px; font-family: var(--f-label); font-size: 13px; font-weight: 600; color: var(--blue-700); }

/* Shared: split list, centred FAQ, line grid */
.k-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.k-split__copy { position: sticky; top: calc(var(--header-h) + 60px); }
.k-split__copy .x-h2 { margin-top: 18px; }
.k-split__copy .x-lead { margin-top: 22px; }
.k-split__list { list-style: none; margin: 0; padding: 0; }
.k-split__list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 22px; padding: 28px 0; border-top: 1px solid var(--line); }
.k-split__list li:last-child { border-bottom: 1px solid var(--line); }
.k-split__list h3 { font-size: 21px; letter-spacing: -.025em; }
.k-split__list p { margin-top: 8px; font-size: 15.5px; line-height: 1.65; color: var(--text-2); }
.x-wrap.k-faqc { max-width: 920px; text-align: center; }
.k-faqc .x-h2 { margin-top: 18px; }
.k-faqc__list { display: grid; gap: 10px; margin-top: clamp(32px, 4vw, 48px); text-align: left; }
.k-faqc details { border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.k-faqc details[open] { border-color: rgba(47,107,255,.35); box-shadow: 0 24px 50px -36px rgba(10,12,24,.4); }
.k-faqc summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 26px; cursor: pointer; list-style: none; font-family: var(--f-display); font-size: 18.5px; font-weight: 600; letter-spacing: -.02em; }
.k-faqc summary::-webkit-details-marker { display: none; }
.k-faqc summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .4s var(--ease-out); }
.k-faqc details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.k-faqc details p { padding: 0 26px 24px; font-size: 16px; line-height: 1.65; color: var(--text-2); }
.k-faqc__more { margin-top: 28px; color: var(--text-2); }
.k-faqc__more a { color: var(--blue); font-weight: 600; }
.k-lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.k-lines article { position: relative; padding: clamp(26px, 3vw, 40px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .4s; }
.k-lines article::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--violet), var(--blue)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
.k-lines article:hover { background: #FAFAFF; }
.k-lines article:hover::before { transform: none; }
.k-lines .ac-ic { background: #E8EFFF; color: #1742C0; }
.k-lines h3 { margin-top: 22px; font-size: 20px; letter-spacing: -.025em; }
.k-lines p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* ---------- AI Consulting ---------- */
.kc-hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + clamp(56px, 7vw, 100px)) 0 clamp(56px, 7vw, 96px); background: radial-gradient(900px 520px at 85% 20%, rgba(47,107,255,.1), transparent 70%), #F7F9FC; }
.kc-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask: radial-gradient(ellipse at 72% 45%, #000 10%, transparent 70%); mask: radial-gradient(ellipse at 72% 45%, #000 10%, transparent 70%); opacity: .7; }
.kc-hero__grid > div { max-width: 760px; }
.kc-hero .x-crumbs, .kd-hero .x-crumbs, .kp-hero .x-crumbs { color: var(--text-3); flex-wrap: wrap; }
.kc-hero .x-crumbs a:hover, .kd-hero .x-crumbs a:hover, .kp-hero .x-crumbs a:hover { color: var(--text); }
.kc-hero .x-k { margin-bottom: 20px; }
.kc-hero h1, .kd-hero h1, .kp-hero h1, .ki-hero h1 { font-size: clamp(40px, 4.8vw, 72px); line-height: 1.02; letter-spacing: -.045em; }
.kc-hero h1 em { font-family: var(--f-serif); font-weight: 400; letter-spacing: -.02em; color: var(--blue-700); }
.kc-hero__lead, .kd-hero__lead, .kp-hero__lead { margin-top: 24px; max-width: 540px; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.65; color: var(--text-2); }
.kc-hero .x-hero__ctas, .kd-hero .x-hero__ctas, .kp-hero .x-hero__ctas, .ki-hero .x-hero__ctas { margin-top: 34px; }
.acp--consult .ac-trust { background: #F7F9FC; }
.kc-core__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.kc-core__copy { position: sticky; top: calc(var(--header-h) + 60px); }
.kc-core__copy .x-h2 { margin-top: 18px; }
.kc-core__copy .x-lead { margin-top: 22px; }
.kc-stack { list-style: none; margin: 0; padding: 0; }
.kc-stack li { position: sticky; top: calc(var(--header-h) + 40px + var(--k) * 18px); display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 22px; align-content: start; min-height: 230px; margin-bottom: 28px; padding: 34px; overflow: hidden; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(10,12,24,.35); }
.kc-stack li:nth-child(2) { background: #EEF3FF; }
.kc-stack li:nth-child(3), .kc-stack li:nth-child(6) { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.kc-stack li:nth-child(4) { background: #EEF3FF; }
.kc-stack li:nth-child(5) { background: linear-gradient(135deg, #1742C0, #2F6BFF); border-color: transparent; color: #fff; }
.kc-stack__ic { grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--ink-950); color: var(--teal); }
.kc-stack li:nth-child(3) .kc-stack__ic, .kc-stack li:nth-child(5) .kc-stack__ic, .kc-stack li:nth-child(6) .kc-stack__ic { background: rgba(255,255,255,.12); }
.kc-stack__ic svg { width: 26px; height: 26px; }
.kc-stack h3 { align-self: end; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.03em; }
.kc-stack p { max-width: 440px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.kc-stack li:nth-child(3) p, .kc-stack li:nth-child(5) p, .kc-stack li:nth-child(6) p { color: rgba(238,241,255,.78); }
.kc-stack__big { position: absolute; right: -24px; bottom: -34px; opacity: .07; pointer-events: none; }
.kc-stack__big svg { width: 200px; height: 200px; stroke-width: 1; }
.kc-quote { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; padding: clamp(28px, 4vw, 56px) 0; border-top: 2px solid var(--ink-950); border-bottom: 1px solid var(--line-2); }
.kc-quote__q { grid-column: 1 / -1; font-family: var(--f-serif); font-size: clamp(34px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -.02em; }
.kc-quote__q em { color: var(--blue-700); }
.kc-quote > p:not(.kc-quote__q) { max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--text-2); }

/* ---------- AI Integration ---------- */
.ki-hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + clamp(48px, 6vw, 90px)) 0 clamp(56px, 7vw, 96px); background: var(--ink-950); color: #fff; }
.ki-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask: radial-gradient(ellipse 70% 80% at 70% 50%, #000 20%, transparent 75%); mask: radial-gradient(ellipse 70% 80% at 70% 50%, #000 20%, transparent 75%); }
.ki-hero__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.ki-hero .x-crumbs { color: var(--on-dark-3); flex-wrap: wrap; }
.ki-hero .x-k { margin-bottom: 20px; color: var(--teal); }
.ki-hero h1 { color: #fff; }
.ki-hero h1 em { color: var(--teal); }
.ki-hero__lead { margin-top: 24px; max-width: 540px; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.65; color: var(--on-dark-2); }
@keyframes kiDash { to { stroke-dashoffset: -20; } }
@keyframes kiRing { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
/* AI Integration hero infographic: glowing chip, circuit burst, spokes to system icons (transparent, on the dark hero) */
.ki-ai { position: relative; }
.ki-ai > svg { display: block; width: 100%; height: auto; overflow: visible; }
.ki-ai__mark { overflow: hidden; }
.ki-ai__lines { filter: drop-shadow(0 0 3px rgba(94,242,225,.75)); }
.ki-ai__spoke { fill: none; stroke: rgba(170,236,255,.5); stroke-width: 1.1; }
.ki-ai__pulse { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 12 200; stroke-dashoffset: 12; animation: kiAiPulse 3.2s linear infinite; }
@keyframes kiAiPulse { to { stroke-dashoffset: -100; } }
.ki-ai__node { fill: #5EF2E1; }
.ki-ai__burst { fill: none; stroke: rgba(170,236,255,.85); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.ki-ai__bdot { fill: #D6E6FF; animation: kiAiBlink 2.6s ease-in-out infinite; }
@keyframes kiAiBlink { 50% { opacity: .35; } }
.ki-ai__halo { fill: rgba(94,242,225,.08); stroke: rgba(127,233,255,.45); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: kiAiHalo 2.8s ease-in-out infinite; }
@keyframes kiAiHalo { 50% { transform: scale(1.08); opacity: .5; } }
.ki-ai__pins rect { fill: #8FC4FF; }
.ki-ai__chip { fill: url(#kiAiChip); stroke: #8FC4FF; stroke-width: 2; filter: drop-shadow(0 0 18px rgba(94,242,225,.85)); }
.ki-ai__chipline { fill: none; stroke: rgba(127,233,255,.35); stroke-width: 1; }
.ki-ai__logo { filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(127,233,255,.9)); }
.ki-ai__word { fill: #fff; font-family: var(--f-display); font-size: 22px; font-weight: 700; text-anchor: middle; }
.ki-ai__ic { filter: drop-shadow(0 0 5px rgba(94,242,225,.85)); animation: kiAiBlink 3.4s ease-in-out infinite; }
.ki-ai__ic * { fill: none; stroke: #EEF5FF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ki-code { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px; align-items: stretch; }
.ki-code__list { display: grid; gap: 6px; align-content: start; }
.ki-code__list button { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; width: 100%; padding: 16px 18px; border-radius: 14px; border: 1px solid transparent; text-align: left; color: var(--on-dark-2); transition: background .3s, border-color .3s, color .3s; }
.ki-code__list button:hover { background: rgba(255,255,255,.03); }
.ki-code__list button[aria-selected="true"] { background: rgba(47,107,255,.1); border-color: rgba(94,242,225,.3); color: var(--on-dark); }
.ki-code__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.05); color: var(--teal); }
.ki-code__ic svg { width: 20px; height: 20px; }
.ki-code__list strong { display: block; font-family: var(--f-display); font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; color: #fff; }
.ki-code__list small { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; }
.ki-code__win { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #0A0D1C; border: 1px solid var(--line-dark-2); box-shadow: 0 40px 80px -40px rgba(47,107,255,.5); }
.ki-code__pane { flex: 1; }
.ki-code__bar, .ki-term__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line-dark); background: #0D1022; }
.ki-code__bar i, .ki-term__bar i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.ki-code__bar i:nth-child(2), .ki-term__bar i:nth-child(2) { background: #FEBC2E; }
.ki-code__bar i:nth-child(3), .ki-term__bar i:nth-child(3) { background: #28C840; }
.ki-code__bar span, .ki-term__bar span { margin-left: 10px; font-family: var(--f-mono); font-size: 12.5px; color: var(--on-dark-3); }
.ki-code pre { margin: 0; padding: 22px 22px 26px; overflow-x: auto; font-family: var(--f-mono); font-size: 13.5px; line-height: 1.75; color: #D6DCF5; outline: none; }
.ki-code .ln { display: block; min-height: 1.75em; white-space: pre; }
.ki-code__pane.is-in .ln { animation: kiLine .45s var(--ease-out) both; animation-delay: calc(var(--l) * 60ms); }
@keyframes kiLine { from { opacity: 0; transform: translateX(-8px); } }
.c-k { color: #C792EA; }
.c-s { color: var(--teal); }
.c-c { color: #6B7499; font-style: italic; }
.ki-code__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line-dark); font-family: var(--f-mono); font-size: 12px; color: var(--on-dark-3); }
.ki-code__foot span { padding: 4px 9px; border-radius: 6px; background: rgba(255,255,255,.05); color: var(--on-dark); }
.ki-scrolly { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ki-scrolly__stage { position: sticky; top: calc(var(--header-h) + 40px); height: min(520px, 70vh); overflow: hidden; border-radius: 28px; background: radial-gradient(120% 80% at 80% 0%, rgba(94,242,225,.18), transparent 60%), linear-gradient(160deg, #0D1A4A, #05060D 70%); color: #fff; }
.ki-scrolly__card { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 3.5vw, 44px); opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .5s var(--ease), transform .7s var(--ease-out); --k-tick: var(--teal); }
.ki-scrolly__card.is-on { opacity: 1; transform: none; }
.ki-scrolly__ic { position: absolute; top: clamp(28px, 3.5vw, 44px); left: clamp(28px, 3.5vw, 44px); display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: rgba(94,242,225,.12); color: var(--teal); }
.ki-scrolly__ic svg { width: 34px; height: 34px; stroke-width: 1.5; }
.ki-scrolly__card h3 { font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.035em; color: #fff; }
.ki-scrolly__card .k-ticks { margin-top: 20px; color: var(--on-dark); }
.ki-scrolly__steps article { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: min(52vh, 460px); padding: 20px 0 20px 28px; border-left: 2px solid var(--line); opacity: .35; transition: opacity .4s, border-color .4s; }
.ki-scrolly__steps article.is-on { opacity: 1; border-color: var(--blue); }
.ki-scrolly__steps h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.035em; }
.ki-scrolly__steps p { max-width: 460px; font-size: 16.5px; line-height: 1.65; color: var(--text-2); }
.ki-scrolly__steps .btn { align-self: flex-start; margin-top: 6px; }
.ki-scrolly__mini { display: none; }
.ki-scrolly__inline { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ki-term { overflow: hidden; border-radius: 22px; background: #0A0D1C; border: 1px solid var(--line-dark-2); color: var(--on-dark); }
.ki-term__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: end; padding: clamp(28px, 4vw, 52px); }
.ki-term__cmd { grid-column: 1 / -1; font-family: var(--f-mono); font-size: 14px; color: var(--teal); }
.ki-term__cmd span { color: var(--on-dark-3); }
.ki-term__cur { display: inline-block; width: 9px; height: 17px; margin-left: 4px; vertical-align: -3px; background: var(--teal); animation: kiBlink 1s steps(1) infinite; }
@keyframes kiBlink { 50% { opacity: 0; } }
.ki-term h2 { font-size: clamp(28px, 3vw, 44px); line-height: 1.08; letter-spacing: -.04em; color: #fff; }
.ki-term h2 em { color: var(--teal); }
.ki-term__body > div > p { margin-top: 12px; max-width: 600px; font-size: 16.5px; line-height: 1.6; color: var(--on-dark-2); }
.ki-spot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ki-spot article { position: relative; overflow: hidden; isolation: isolate; padding: 28px 24px; border-radius: 20px; background: #0B0E1E; border: 1px solid var(--line-dark); }
.ki-spot article::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(94,242,225,.16), transparent 60%); opacity: 0; transition: opacity .3s; }
.ki-spot article::after { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(94,242,225,.75), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .3s; pointer-events: none; }
.ki-spot:hover article::before, .ki-spot:hover article::after { opacity: 1; }
.ki-spot__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(94,242,225,.08); color: var(--teal); }
.ki-spot__ic svg { width: 22px; height: 22px; }
.ki-spot h3 { margin-top: 22px; font-size: 19px; letter-spacing: -.025em; color: #fff; }
.ki-spot p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--on-dark-2); }
.ki-pipe { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.ki-pipe::before, .ki-pipe::after { content: ""; position: absolute; left: 24px; right: 24px; top: 23px; height: 2px; background: var(--line-dark-2); }
.ki-pipe::after { background: linear-gradient(90deg, var(--blue), var(--teal)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 2.4s var(--ease); }
.ki-pipe.is-in::after { transform: none; }
.ki-pipe li { position: relative; z-index: 1; }
.ki-pipe__node { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink-950); border: 2px solid var(--line-dark-2); transition: border-color .4s, box-shadow .4s; transition-delay: calc(var(--k) * .4s); }
.ki-pipe__node i { width: 14px; height: 14px; border-radius: 50%; background: var(--line-dark-2); transition: background .4s; transition-delay: calc(var(--k) * .4s); }
.ki-pipe.is-in .ki-pipe__node { border-color: var(--teal); box-shadow: 0 0 0 6px rgba(94,242,225,.1); }
.ki-pipe.is-in .ki-pipe__node i { background: var(--teal); }
.ki-pipe h3 { margin-top: 22px; font-size: 18px; letter-spacing: -.02em; color: #fff; }
.ki-pipe p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--on-dark-2); }
.ki-mq { display: grid; gap: 14px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ki-mq__t { display: flex; width: max-content; gap: 14px; animation: acMarq 40s linear infinite; }
.ki-mq__row--rev .ki-mq__t { animation-direction: reverse; animation-duration: 46s; }
.ki-mq:hover .ki-mq__t { animation-play-state: paused; }
.ki-mq__t span { display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 0 26px; border-radius: 16px; background: #0B0E1E; border: 1px solid var(--line-dark); font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -.015em; color: var(--on-dark); white-space: nowrap; }
.ki-mq__t span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--grad); }

/* ---------- Artificial Intelligence Services ---------- */
.ka-hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + clamp(64px, 8vw, 120px)) 0 clamp(64px, 8vw, 110px); background: #070815; color: #fff; text-align: center; }
.ka-hero__aurora { position: absolute; inset: -20%; z-index: -2; filter: blur(70px); opacity: .8; }
.ka-hero__aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: kaFloat 16s ease-in-out infinite alternate; }
.ka-hero__aurora i:nth-child(1) { left: 12%; top: 22%; width: 44%; height: 48%; background: #2F6BFF; }
.ka-hero__aurora i:nth-child(2) { right: 10%; top: 12%; width: 40%; height: 46%; background: #4F7DFF; animation-duration: 19s; animation-delay: -6s; }
.ka-hero__aurora i:nth-child(3) { left: 34%; bottom: 4%; width: 36%; height: 40%; background: #2F6BFF; animation-duration: 22s; animation-delay: -10s; }
@keyframes kaFloat { to { transform: translate(8%, -6%) scale(1.15); } }
.ka-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(7,8,21,.85) 80%); }
.ka-hero__in { display: flex; flex-direction: column; align-items: center; }
.ka-hero .x-crumbs { justify-content: center; flex-wrap: wrap; color: rgba(255,255,255,.6); }
.ka-hero .x-k { margin-bottom: 20px; color: var(--teal); }
.ka-hero h1 { max-width: 18ch; font-size: clamp(42px, 6vw, 92px); line-height: .98; letter-spacing: -.05em; color: #fff; }
.ka-hero h1 em { background: linear-gradient(90deg, #8FB1FF, var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ka-hero__rot { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 6px 6px 6px 18px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--f-label); font-size: 15px; color: rgba(255,255,255,.8); }
.ka-rot { display: inline-block; height: 34px; overflow: hidden; border-radius: 999px; background: #fff; color: var(--ink-950); }
.ka-rot > span { display: flex; flex-direction: column; animation: kaRot 12s var(--ease) infinite; }
.ka-rot b { display: block; height: 34px; padding: 0 16px; line-height: 34px; font-weight: 700; white-space: nowrap; text-align: left; }
@keyframes kaRot { 0%, 16% { transform: translateY(0); } 20%, 36% { transform: translateY(-16.6667%); } 40%, 56% { transform: translateY(-33.3333%); } 60%, 76% { transform: translateY(-50%); } 80%, 96% { transform: translateY(-66.6667%); } 100% { transform: translateY(-83.3333%); } }
.ka-hero__lead { max-width: 640px; margin-top: 24px; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.65; color: rgba(238,241,255,.8); }
.ka-hero .x-hero__ctas { justify-content: center; margin-top: 34px; }
.ka-hero__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 46px 0 0; padding: 0; list-style: none; }
.ka-hero__pills li { padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-family: var(--f-label); font-size: 13.5px; color: rgba(255,255,255,.85); animation: kaBob 6s ease-in-out infinite; animation-delay: calc(var(--k) * -.8s); }
@keyframes kaBob { 50% { transform: translateY(-6px); } }
.ka-auto { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.ka-auto__list { display: grid; align-content: start; }
.ka-auto__list button { position: relative; display: block; width: 100%; padding: 20px 4px 22px; border-top: 1px solid var(--line); text-align: left; color: var(--text-3); transition: color .3s; }
.ka-auto__list button:last-child { border-bottom: 1px solid var(--line); }
.ka-auto__list button:hover, .ka-auto__list button[aria-selected="true"] { color: var(--text); }
.ka-auto__list strong { display: block; font-family: var(--f-display); font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; letter-spacing: -.025em; }
.ka-auto__list span { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); transition: max-height .5s var(--ease-out), opacity .4s, margin .5s var(--ease-out); }
.ka-auto__list [aria-selected="true"] span { max-height: 90px; margin-top: 8px; opacity: 1; }
.ka-auto__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; }
.ka-auto:not(.is-run) [aria-selected="true"] .ka-auto__bar { transform: none; }
.ka-auto.is-run [aria-selected="true"] .ka-auto__bar { animation: kaFill var(--dur, 5s) linear forwards; }
@keyframes kaFill { to { transform: none; } }
.ka-auto__stage { position: relative; min-height: 460px; overflow: hidden; border-radius: 30px; background: #070815; color: #fff; }
.ka-auto__panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 3.5vw, 44px); }
.ka-auto__panel:nth-child(1) { --c1: #8FB1FF; --c2: #2F6BFF; }
.ka-auto__panel:nth-child(2) { --c1: #B9CCFF; --c2: #4F7DFF; }
.ka-auto__panel:nth-child(3) { --c1: #BFD3FF; --c2: #2F6BFF; }
.ka-auto__panel:nth-child(4) { --c1: #8FC4FF; --c2: #1F55E6; }
.ka-auto__panel:nth-child(5) { --c1: #FFD58A; --c2: #2F6BFF; }
.ka-auto__panel:nth-child(6) { --c1: #B9F5D0; --c2: #1F55E6; }
.ka-auto__panel.is-in { animation: acPanel .7s var(--ease-out) both; }
.ka-auto__panel::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(7,8,21,.92)); }
.ka-auto__art { position: absolute; inset: 0; display: grid; place-items: center; }
.ka-auto__orb { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--c1), var(--c2) 55%, transparent 72%); filter: blur(10px); opacity: .9; animation: kaSpin 14s linear infinite; }
.ka-auto__ring { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); animation: kaPulse 3.2s ease-out infinite; }
.ka-auto__ring--2 { animation-delay: 1.6s; }
@keyframes kaPulse { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@keyframes kaSpin { to { transform: rotate(360deg); } }
.ka-auto__icon { position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 16%; border-radius: 28px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ka-auto__icon svg { width: 44px; height: 44px; stroke-width: 1.5; }
.ka-auto__panel h3, .ka-auto__panel p { position: relative; z-index: 1; }
.ka-auto__panel h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.035em; color: #fff; }
.ka-auto__panel p { max-width: 460px; margin-top: 10px; font-size: 16px; line-height: 1.6; color: rgba(238,241,255,.82); }
.ka-car__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(440px, 84vw); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) 10px; scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); cursor: grab; }
.ka-car__track::-webkit-scrollbar { display: none; }
.ka-car__card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 14px; min-height: 480px; padding: 30px; border-radius: 28px; scroll-snap-align: start; background: linear-gradient(165deg, var(--c1), var(--c2)); color: #fff; --k-tick: var(--teal); }
.ka-car__card:nth-child(1) { --c1: #1742C0; --c2: #0D1A4A; }
.ka-car__card:nth-child(2) { --c1: #2F6BFF; --c2: #0D1A4A; }
.ka-car__card:nth-child(3) { --c1: #1742C0; --c2: #0A1A40; }
.ka-car__card:nth-child(4) { --c1: #2F6BFF; --c2: #151A36; }
.ka-car__card:nth-child(5) { --c1: #4F7DFF; --c2: #0D1022; }
.ka-car__card:nth-child(6) { --c1: #2F6BFF; --c2: #0B2545; }
.ka-car__card::after { content: ""; position: absolute; z-index: -1; right: -30%; top: -30%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent); transition: transform .8s var(--ease-out); }
.ka-car__card:hover::after { transform: translate(-12%, 12%) scale(1.2); }
.ka-car__card .ac-ic { background: rgba(255,255,255,.14); color: #fff; }
.ka-car__card h3 { margin-top: 18px; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.035em; color: #fff; }
.ka-car__card > p { font-size: 15.5px; line-height: 1.6; color: rgba(238,241,255,.82); }
.ka-car__card .k-ticks { margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); }
.ka-car__card .btn { align-self: flex-start; margin-top: auto; }
.ka-glow { position: relative; overflow: hidden; isolation: isolate; padding: 1.5px; border-radius: var(--r-xl); }
.ka-glow::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; background: conic-gradient(from 0deg, transparent 0 60%, var(--teal), var(--violet), var(--blue), transparent 95%); transform: translate(-50%, -50%); animation: kaSpinC 6s linear infinite; }
@keyframes kaSpinC { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ka-glow__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; padding: clamp(32px, 4.5vw, 60px); border-radius: calc(var(--r-xl) - 1.5px); background: radial-gradient(80% 140% at 0% 0%, rgba(123,108,255,.25), transparent 60%), #070815; color: #fff; }
.ka-glow h2 { font-size: clamp(28px, 3vw, 44px); line-height: 1.08; letter-spacing: -.04em; color: #fff; }
.ka-glow h2 em { color: var(--teal); }
.ka-glow p { max-width: 600px; margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--on-dark-2); }
.ka-flip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ka-flip__c { min-height: 240px; perspective: 1200px; outline: none; cursor: pointer; }
.ka-flip__in { position: relative; height: 100%; min-height: 240px; transform-style: preserve-3d; transition: transform .8s var(--ease-out); }
.ka-flip__c:hover .ka-flip__in, .ka-flip__c:focus .ka-flip__in { transform: rotateY(180deg); }
.ka-flip__c:focus-visible .ka-flip__b { box-shadow: 0 0 0 3px var(--teal); }
.ka-flip__f, .ka-flip__b { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 26px 24px; border-radius: 22px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ka-flip__f { justify-content: space-between; background: #fff; border: 1px solid var(--line); }
.ka-flip__b { justify-content: flex-end; transform: rotateY(180deg); background: linear-gradient(160deg, #2F6BFF, #4F7DFF); color: #fff; }
.ka-flip__ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, #EEF4FF, #F1F5FF); color: var(--blue-700); }
.ka-flip__ic svg { width: 26px; height: 26px; }
.ka-flip__f h3 { font-size: 21px; letter-spacing: -.025em; }
.ka-flip__f small { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ka-flip__b h3 { font-size: 19px; letter-spacing: -.02em; color: #fff; }
.ka-flip__b p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.9); }
.ka-type { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-dark-2); }
.ka-type li { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 0 24px; padding: 26px 0; border-bottom: 1px solid var(--line-dark-2); outline: none; cursor: default; }
.ka-type h3 { font-size: clamp(26px, 3.4vw, 50px); line-height: 1.05; letter-spacing: -.045em; color: rgba(238,241,255,.42); transition: color .4s, transform .6s var(--ease-out); }
.ka-type p { grid-column: 1; max-width: 620px; max-height: 0; overflow: hidden; opacity: 0; font-size: 16px; line-height: 1.6; color: var(--on-dark-2); transition: max-height .6s var(--ease-out), opacity .4s, margin .5s var(--ease-out), transform .6s var(--ease-out); }
.ka-type li:hover h3, .ka-type li:focus-visible h3 { color: #fff; transform: translateX(14px); }
.ka-type li:hover p, .ka-type li:focus-visible p { max-height: 120px; margin-top: 12px; opacity: 1; transform: translateX(14px); }
.ka-type__ic { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-dark-2); color: var(--teal); transition: background .4s, color .4s, transform .6s var(--ease-out); }
.ka-type__ic svg { width: 24px; height: 24px; }
.ka-type li:hover .ka-type__ic, .ka-type li:focus-visible .ka-type__ic { background: var(--teal); color: var(--ink-950); transform: rotate(-12deg); }
@media (hover: none) {
  .ka-type h3 { color: #fff; }
  .ka-type p { max-height: none; margin-top: 10px; opacity: 1; }
}
.ka-ring { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ka-ring__copy .x-h2 { margin-top: 18px; }
.ka-ring__copy .x-lead { margin-top: 22px; }
.ka-ring__dial { position: relative; width: min(100%, 560px); aspect-ratio: 1; margin: 0 auto; }
.ka-ring__track, .ka-ring__arc { position: absolute; inset: 9%; border-radius: 50%; }
.ka-ring__track { border: 1px dashed var(--line-2); }
.ka-ring__arc { background: conic-gradient(from calc(-180deg / var(--n)), var(--blue), var(--violet) calc(360deg / var(--n)), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); transform: rotate(calc(var(--i, 0) * 360deg / var(--n))); transition: transform .8s var(--ease-out); }
.ka-ring__dial button { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 124px; transform: translate(-50%, -9px); text-align: center; font-family: var(--f-label); font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--text-3); transition: color .3s; }
.ka-ring__dial button i { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2); transition: background .3s, border-color .3s, box-shadow .3s, transform .4s var(--ease-out); }
.ka-ring__dial button span { padding: 3px 8px; border-radius: 8px; background: rgba(255,255,255,.9); }
.ka-ring__dial button:hover, .ka-ring__dial button[aria-selected="true"] { color: var(--text); }
.ka-ring__dial button[aria-selected="true"] i { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 7px rgba(47,107,255,.15); transform: scale(1.15); }
.ka-ring__core { position: absolute; inset: 25%; display: grid; place-items: center; border-radius: 50%; text-align: center; background: radial-gradient(circle, #fff 60%, #F3F5FF); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(10,12,24,.4); }
.ka-ring__panel { padding: 0 10%; }
.ka-ring__panel.is-in { animation: acPanel .6s var(--ease-out) both; }
.ka-ring__panel h3 { font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -.03em; }
.ka-ring__panel p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.ka-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
.ka-qa > div { padding: 26px 0; border-top: 1px solid var(--line); }
.ka-qa h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
.ka-qa p { margin-top: 10px; font-size: 15.5px; line-height: 1.65; color: var(--text-2); }

/* ---------- Document AI ---------- */
.kd-soft { background: #F5F7FC; }
.kd-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + clamp(48px, 6vw, 90px)) 0 clamp(56px, 7vw, 96px); background: linear-gradient(180deg, #EEF2FB, #fff); }
.kd-hero__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.kd-hero .x-k { margin-bottom: 20px; color: #1742C0; }
.kd-hero h1 em { color: #1F55E6; }
.kd-cmp { position: relative; height: clamp(440px, 40vw, 520px); overflow: hidden; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 50px 90px -50px rgba(10,40,40,.45); user-select: none; }
.kd-cmp__data, .kd-cmp__scan { position: absolute; inset: 0; padding: clamp(18px, 2.4vw, 30px); }
.kd-cmp__data { background: linear-gradient(180deg, #fff, #F5F8FF); }
.kd-cmp__scan { clip-path: inset(0 calc(100% - var(--pos)) 0 0); background: #DDE3EE; }
.kd-cmp__line { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(10,12,24,.12); pointer-events: none; }
.kd-cmp__line b { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--ink-950); color: #fff; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); transition: box-shadow .3s; }
.kd-cmp__line svg { width: 20px; height: 20px; stroke-width: 2; }
.kd-cmp:focus-within .kd-cmp__line b { box-shadow: 0 0 0 4px rgba(47, 107, 255,.45); }
.kd-cmp input { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.kd-cmp__tag { position: absolute; bottom: 14px; z-index: 3; padding: 6px 12px; border-radius: 999px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.kd-cmp__tag--l { left: 14px; background: rgba(10,12,24,.75); color: #fff; }
.kd-cmp__tag--r { right: 14px; background: #1F55E6; color: #fff; }
.kd-inv { position: relative; height: 100%; padding: 22px 24px; overflow: hidden; background: #F7F9FC repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 3px); color: #3A3A3A; font-family: "Courier New", var(--f-mono); font-size: 12.5px; line-height: 1.5; transform: rotate(-1.4deg); box-shadow: 0 12px 30px -16px rgba(0,0,0,.35); filter: contrast(.92) blur(.25px); }
.kd-inv--clean { background: #fff; color: #1D2433; font-family: var(--f-label); transform: none; filter: none; box-shadow: none; border: 1px solid var(--line); border-radius: 12px; }
.kd-inv mark { background: none; color: inherit; }
.kd-inv--clean mark { border-radius: 3px; background: rgba(47, 107, 255,.12); outline: 1.5px solid rgba(47, 107, 255,.7); }
.kd-inv__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid #444; }
.kd-inv__head strong { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.kd-inv__head span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.kd-inv__meta { display: grid; gap: 3px; margin: 12px 0; }
.kd-inv table { width: 100%; border-collapse: collapse; }
.kd-inv th, .kd-inv td { padding: 5px 0; text-align: left; border-bottom: 1px dotted #999; }
.kd-inv th:last-child, .kd-inv td:last-child { text-align: right; }
.kd-inv__tot { display: grid; justify-items: end; gap: 3px; margin-top: 10px; }
.kd-inv__tot b { font-size: 14px; }
.kd-inv__stamp { position: absolute; right: 30px; bottom: 60px; padding: 4px 10px; border: 2px solid rgba(200,40,60,.6); color: rgba(200,40,60,.65); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-12deg); }
.kd-inv__sig { position: absolute; left: 26px; bottom: 26px; width: 120px; height: 34px; fill: none; stroke: #2A3A8A; stroke-width: 1.6; stroke-linecap: round; }
.kd-out { position: absolute; right: 18px; top: 18px; bottom: 18px; display: flex; flex-direction: column; width: min(54%, 300px); overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(10,40,40,.4); font-family: var(--f-label); }
.kd-out__h { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.kd-out__h span { padding: 4px 9px; border-radius: 999px; background: #E8EFFF; color: #1742C0; font-size: 11px; }
.kd-out dl { display: grid; margin: 0; padding: 4px 16px; }
.kd-out dl div { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.kd-out dl div:last-child { border-bottom: 0; }
.kd-out dt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.kd-out dd { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.kd-out dd em { flex: none; font-style: normal; font-size: 11px; color: #1F55E6; }
.kd-out dd em::before { content: "✓ "; }
.kd-scan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.kd-scan__doc { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: 32px 30px 36px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(10,40,40,.5); }
.kd-scan__beam { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 80px; background: linear-gradient(180deg, transparent, rgba(47, 107, 255,.16) 70%, rgba(47, 107, 255,.7) 98%, transparent); pointer-events: none; animation: kdBeam 3.6s var(--ease) infinite; }
@keyframes kdBeam { from { transform: translateY(-90px); } to { transform: translateY(620px); } }
.kd-r { position: relative; display: grid; gap: 8px; padding: 10px; border-radius: 10px; outline: 1.5px dashed transparent; transition: outline-color .3s, background .3s; }
.kd-r.is-on { outline-color: #2F6BFF; background: rgba(47, 107, 255,.07); }
.kd-r__tag { position: absolute; right: 8px; top: -11px; z-index: 3; padding: 3px 9px; border-radius: 999px; background: #2F6BFF; color: #fff; font-family: var(--f-label); font-size: 11px; font-weight: 700; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .4s var(--ease-out); }
.kd-r.is-on .kd-r__tag { opacity: 1; transform: none; }
.kd-l { display: block; height: 8px; border-radius: 4px; background: #E3E8EF; }
.kd-l--hl { background: rgba(255,196,0,.5); }
.kd-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 9px 12px; }
.kd-doc__h { display: flex; align-items: center; justify-content: space-between; }
.kd-doc__h b { padding: 4px 10px; border-radius: 6px; background: var(--ink-950); color: #fff; font-family: var(--f-label); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.kd-doc__tot { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.kd-doc__tot b { font-family: var(--f-display); font-size: 18px; }
.kd-doc__q { display: grid; gap: 6px; font-family: var(--f-label); font-size: 13px; }
.kd-doc__q span { justify-self: end; padding: 7px 12px; border-radius: 12px 12px 4px 12px; background: var(--ink-950); color: #fff; }
.kd-doc__q em { justify-self: start; padding: 7px 12px; border-radius: 12px 12px 12px 4px; background: #E3F7F3; color: #0E5E55; font-style: normal; }
.kd-scan__list { display: grid; gap: 8px; }
.kd-scan__list button { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; padding: 14px 16px; border-radius: 16px; border: 1px solid transparent; text-align: left; transition: background .3s, border-color .3s, box-shadow .3s; }
.kd-scan__list button:hover { background: rgba(255,255,255,.6); }
.kd-scan__list button[aria-selected="true"] { background: #fff; border-color: rgba(47, 107, 255,.4); box-shadow: 0 20px 40px -30px rgba(10,40,40,.5); }
.acp--doc .ac-ic { background: #E8EFFF; color: #1742C0; }
.kd-scan__list strong { display: block; font-family: var(--f-display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.kd-scan__list small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.kd-acc { border-top: 1px solid var(--line); --k-tick: #1F55E6; }
.kd-acc__item { border-bottom: 1px solid var(--line); }
.kd-acc__head { display: grid; grid-template-columns: 48px minmax(0, .9fr) minmax(0, 1.1fr) 40px; gap: 24px; align-items: center; width: 100%; padding: 24px 4px; text-align: left; }
.kd-acc__head strong { font-family: var(--f-display); font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; letter-spacing: -.025em; transition: color .3s; }
.kd-acc__head:hover strong { color: #1742C0; }
.kd-acc__d { font-size: 15px; line-height: 1.55; color: var(--text-2); }
.kd-acc__pm { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); transition: background .3s, border-color .3s, color .3s, transform .5s var(--ease-out); }
.kd-acc__pm::before, .kd-acc__pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: currentColor; }
.kd-acc__pm::after { transform: rotate(90deg); transition: transform .4s var(--ease-out); }
.is-open .kd-acc__pm { background: #1F55E6; border-color: #1F55E6; color: #fff; transform: rotate(180deg); }
.is-open .kd-acc__pm::after { transform: none; }
.kd-acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.is-open .kd-acc__body { grid-template-rows: 1fr; }
.kd-acc__body > div { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; min-height: 0; overflow: hidden; padding-left: 76px; visibility: hidden; transition: visibility 0s .5s; }
.is-open .kd-acc__body > div { padding-bottom: 28px; visibility: visible; transition-delay: 0s; }
.kd-acc__body .k-ticks { flex: 1 1 420px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.kd-drop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 36px; align-items: center; padding: clamp(28px, 4vw, 52px); border-radius: var(--r-xl); border: 2px dashed rgba(31, 85, 230,.45); background: repeating-linear-gradient(-45deg, rgba(47, 107, 255,.05) 0 14px, transparent 14px 28px), #F5F8FF; transition: border-color .3s; }
.kd-drop:hover { border-color: #1F55E6; }
.kd-drop__ic { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 24px; background: #fff; border: 1px solid rgba(31, 85, 230,.25); color: #1F55E6; animation: kdBob 3s ease-in-out infinite; }
.kd-drop__ic svg { width: 38px; height: 38px; stroke-width: 1.5; }
@keyframes kdBob { 50% { transform: translateY(-8px); } }
.kd-drop h2 { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -.04em; }
.kd-drop h2 em { color: #1F55E6; }
.kd-drop p { max-width: 560px; margin-top: 10px; font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
.kd-table { overflow-x: auto; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.kd-table table { width: 100%; min-width: 640px; border-collapse: collapse; }
.kd-table thead th { padding: 16px 24px; text-align: left; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); background: #F7F9FC; border-bottom: 1px solid var(--line); }
.kd-table tbody th { padding: 18px 24px; text-align: left; font-family: var(--f-display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.kd-tcell { display: flex; align-items: center; gap: 14px; }
.kd-table .ac-ic { width: 40px; height: 40px; border-radius: 12px; }
.kd-table .ac-ic svg { width: 20px; height: 20px; }
.kd-table tbody td { padding: 18px 24px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.kd-table tbody tr + tr > * { border-top: 1px solid var(--line); }
.kd-table tbody tr { transition: background .25s; }
.kd-table tbody tr:hover { background: #F5F8FF; }
.kd-table td:last-child { width: 72px; }
.kd-table td a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); transition: background .3s, border-color .3s, color .3s; }
.kd-table td a:hover { background: #1F55E6; border-color: #1F55E6; color: #fff; }
.kd-table td a svg { width: 16px; height: 16px; stroke-width: 1.9; }
.kd-why { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.kd-why .x-h2 { margin-top: 18px; }
.kd-why .x-lead { margin-top: 22px; }
.kd-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 32px; list-style: none; margin: 0; padding: 0; }
.kd-checks li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; }
.kd-checks i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #1F55E6; color: #fff; }
.kd-checks i svg { width: 18px; height: 18px; stroke-width: 2.4; }
.kd-checks h3 { font-size: 18.5px; line-height: 1.3; letter-spacing: -.02em; }
.kd-checks p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.kd-zig { position: relative; max-width: 1040px; margin: 0 auto; padding: 0; list-style: none; }
.kd-zig::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(#2F6BFF, #2F6BFF); opacity: .35; }
.kd-zig li { position: relative; width: 50%; padding: 0 44px 0 0; }
.kd-zig li + li { margin-top: -40px; }
.kd-zig li:nth-child(even) { margin-left: 50%; padding: 0 0 0 44px; }
.kd-zig li::before { content: ""; position: absolute; top: 26px; right: -9px; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #2F6BFF; }
.kd-zig li:nth-child(even)::before { right: auto; left: -9px; }
.kd-zig li::after { content: ""; position: absolute; top: 34px; right: 9px; width: 35px; height: 2px; background: rgba(47, 107, 255,.4); }
.kd-zig li:nth-child(even)::after { right: auto; left: 9px; }
.kd-zig__card { padding: 24px 26px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -40px rgba(10,40,40,.5); }
.kd-zig h3 { font-size: 19px; letter-spacing: -.025em; }
.kd-zig p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.kd-quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border-radius: 26px; border: 1px solid var(--line); }
.kd-quad article { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 20px; align-content: start; padding: clamp(26px, 3vw, 40px); background: #fff; transition: background .3s; }
.kd-quad article:nth-child(odd) { border-right: 1px solid var(--line); }
.kd-quad article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.kd-quad article:hover { background: #F5F8FF; }
.kd-quad .ac-ic { grid-row: span 3; width: 56px; height: 56px; }
.kd-quad h3 { font-size: 21px; letter-spacing: -.025em; }
.kd-quad p { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.kd-quad small { margin-top: 6px; font-family: var(--f-label); font-size: 13px; font-weight: 600; color: #1742C0; }
.kd-flow { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr); align-items: stretch; }
.kd-flow__col { padding: 24px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.kd-flow__col h3 { margin-bottom: 14px; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #1742C0; }
.kd-flow__col ul { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.kd-flow__col li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #F5F7FC; font-family: var(--f-label); font-size: 14px; font-weight: 600; }
.k-tlogo { flex: none; width: 22px; height: 22px; object-fit: contain; }
.k-tlogo--mono { display: grid; place-items: center; border-radius: 6px; background: #E3EBFF; color: #1742C0; font-family: var(--f-label); font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }
.kd-flow__arrow { display: grid; place-items: center; color: #1F55E6; }
.kd-flow__arrow svg { width: 20px; height: 20px; stroke-width: 2; animation: kdNudge 1.6s ease-in-out infinite; }
@keyframes kdNudge { 50% { transform: translateX(4px); } }
.kd-faq__search { display: flex; align-items: center; gap: 10px; max-width: 420px; height: 54px; margin-top: 28px; padding: 0 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); transition: border-color .3s, box-shadow .3s; }
.kd-faq__search:focus-within { border-color: #1F55E6; box-shadow: 0 0 0 4px rgba(47, 107, 255,.15); }
.kd-faq__search svg { flex: none; width: 20px; height: 20px; color: var(--text-3); }
.kd-faq__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 15.5px; color: var(--text); }
.kd-faq__none { padding: 22px 0; color: var(--text-2); }
.kd-faq__none a { color: #1742C0; font-weight: 600; }

/* ---------- Enterprise AI Copilots ---------- */
.kp-soft { background: #F5F7FF; }
.acp--copilot .ac-ic { background: #E8EFFF; color: #1742C0; }
.kp-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + clamp(48px, 6vw, 90px)) 0 clamp(56px, 7vw, 96px); background: radial-gradient(800px 500px at 90% 10%, rgba(123,108,255,.18), transparent 70%), radial-gradient(700px 500px at 0% 100%, rgba(94,242,225,.14), transparent 70%), #FAFAFF; }
.kp-hero__grid > div { max-width: 760px; }
.kp-hero .x-k { margin-bottom: 20px; color: #2F6BFF; }
.kp-hero h1 em { color: var(--violet); }
.kp-msg { display: none; max-width: 82%; padding: 12px 15px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.kp-msg.is-shown { display: block; animation: kpIn .5s var(--ease-out) both; }
@keyframes kpIn { from { opacity: 0; transform: translateY(10px); } }
.kp-msg--me { align-self: flex-end; background: var(--ink-950); color: #fff; border-bottom-right-radius: 6px; }
.kp-msg--ai { align-self: flex-start; background: #F1F0FF; color: var(--text); border-bottom-left-radius: 6px; }
.kp-cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kp-cite { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: #fff; border: 1px solid rgba(123,108,255,.3); font-family: var(--f-label); font-size: 11.5px; font-weight: 600; color: #1742C0; }
.kp-cite::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--violet); }
.kp-acts { display: flex; gap: 8px; margin-top: 10px; }
.kp-acts b { padding: 6px 12px; border-radius: 8px; background: var(--blue); color: #fff; font-family: var(--f-label); font-size: 12.5px; }
.kp-acts b + b { background: #fff; color: var(--text); border: 1px solid var(--line-2); }
.acp--copilot .ac-trust { background: #FAFAFF; }
.kp-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kp-bento__t { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 24px; background: #fff; border: 1px solid rgba(123,108,255,.14); transition: transform .5s var(--ease-out), box-shadow .5s; }
.kp-bento__t:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -40px rgba(40,30,120,.5); }
.kp-bento__t--0, .kp-bento__t--3, .kp-bento__t--4 { grid-column: span 2; }
.kp-bento h3 { margin-top: 6px; font-size: 20px; letter-spacing: -.025em; }
.kp-bento p { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.kp-ui { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 132px; margin-bottom: 10px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, #F7F9FF, #EFF7FF); font-family: var(--f-label); font-size: 13px; }
.kp-ui-search { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.kp-ui-search svg { flex: none; width: 16px; height: 16px; color: var(--text-3); }
.kp-type { display: inline-block; overflow: hidden; white-space: nowrap; border-right: 2px solid var(--violet); width: 0; animation: kpType 5s steps(26) infinite; }
@keyframes kpType { 0% { width: 0; } 45%, 85% { width: 26ch; } 100% { width: 0; } }
.kp-ui-ans i { display: block; height: 7px; margin-top: 7px; border-radius: 4px; background: #D6E2FF; }
.kp-ui-ans .kp-cite { margin-top: 10px; }
.kp-ui-card { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.kp-ui-card b { font-size: 14px; }
.kp-ui-card span { font-size: 12.5px; color: var(--text-3); }
.kp-ui-card .kp-cite { justify-self: start; margin-top: 6px; }
.kp-ui-code { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--ink-950); color: #D6DCF5; font-family: var(--f-mono); font-size: 12.5px; }
.kp-ui-code .ok { color: var(--teal); }
.kp-ui-bars { display: flex; align-items: flex-end; gap: 8px; height: 70px; }
.kp-ui-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(var(--violet), var(--blue)); transform-origin: bottom; animation: kpGrow 2.4s var(--ease-out) infinite alternate; }
.kp-ui-bars i:nth-child(2) { animation-delay: .2s; }
.kp-ui-bars i:nth-child(3) { animation-delay: .4s; }
.kp-ui-bars i:nth-child(4) { animation-delay: .6s; }
.kp-ui-bars i:nth-child(5) { animation-delay: .8s; }
@keyframes kpGrow { from { transform: scaleY(.45); } }
.kp-ui-q { font-size: 12.5px; color: var(--text-3); }
.kp-ui-bub { display: grid; gap: 8px; }
.kp-ui-bub span { justify-self: end; padding: 8px 12px; border-radius: 12px 12px 4px 12px; background: var(--ink-950); color: #fff; }
.kp-ui-bub .ai { justify-self: start; border-radius: 12px 12px 12px 4px; background: #fff; color: var(--text); border: 1px solid var(--line); }
.kp-ui-lock { display: grid; justify-items: start; gap: 8px; }
.kp-ui-lock svg { width: 26px; height: 26px; color: var(--violet); }
.kp-ui-lock span { padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-weight: 600; }
.kp-ui-lock .no { color: var(--text-3); text-decoration: line-through; }
.kp-convo__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.kp-convo__tabs button { height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-family: var(--f-label); font-size: 14px; font-weight: 600; color: var(--text-2); transition: background .3s, color .3s, border-color .3s; }
.kp-convo__tabs button:hover { border-color: var(--violet); }
.kp-convo__tabs button[aria-selected="true"] { background: var(--violet); border-color: var(--violet); color: #fff; }
.kp-convo__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(26px, 3.5vw, 48px); border-radius: 30px; background: #fff; border: 1px solid rgba(123,108,255,.18); --k-tick: var(--violet); }
.kp-convo__panel.is-in { animation: acPanel .6s var(--ease-out) both; }
.kp-convo__copy h3 { margin-top: 18px; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.035em; }
.kp-convo__copy > p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.kp-convo__copy .k-ticks { margin: 22px 0 26px; }
.kp-convo__chat { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 260px; padding: 24px; border-radius: 22px; background: linear-gradient(160deg, #F5F7FF, #EEF6FF); }
.kp-convo__chat .kp-msg { max-width: 88%; }
.kp-convo__chat .kp-msg--ai { background: #fff; animation-delay: .35s; }
.kp-secure { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 36px; align-items: center; padding: clamp(28px, 4vw, 52px); border-radius: var(--r-xl); background: linear-gradient(120deg, #0D1A4A, #1742C0 60%, #4F7DFF); color: #fff; }
.kp-secure__ic { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.12); }
.kp-secure__ic::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); animation: kaPulse 2.8s ease-out infinite; }
.kp-secure__ic svg { width: 36px; height: 36px; stroke-width: 1.5; }
.kp-secure h2 { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -.04em; color: #fff; }
.kp-secure h2 em { color: var(--teal); }
.kp-secure p { max-width: 580px; margin-top: 10px; font-size: 16.5px; line-height: 1.6; color: rgba(238,241,255,.85); }
.kp-wall { columns: 3 300px; column-gap: 16px; }
.kp-wall__b { margin: 0 0 16px; padding: 22px; break-inside: avoid; border-radius: 22px 22px 22px 6px; background: #fff; border: 1px solid rgba(123,108,255,.16); box-shadow: 0 20px 40px -34px rgba(40,30,120,.5); }
.kp-wall__b.is-r { border-radius: 22px 22px 6px 22px; background: linear-gradient(160deg, #fff, #F3F6FF); }
.kp-wall figcaption { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.kp-wall .ac-ic { width: 40px; height: 40px; border-radius: 12px; }
.kp-wall .ac-ic svg { width: 20px; height: 20px; }
.kp-wall p { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.kp-check { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.kp-check__copy { position: sticky; top: calc(var(--header-h) + 60px); }
.kp-check__copy .x-h2 { margin-top: 18px; }
.kp-check__copy .x-lead { margin-top: 22px; }
.kp-check__prog { max-width: 380px; margin-top: 34px; }
.kp-check__prog span { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.kp-check__prog div { height: 10px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: #E3EBFF; }
.kp-check__prog i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--blue)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
.kp-check__list { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.kp-check__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid rgba(123,108,255,.16); transition: border-color .4s, box-shadow .4s; }
.kp-check__box { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; border: 2px solid var(--line-2); color: transparent; transition: background .4s, border-color .4s, color .4s, transform .5s var(--ease-out); }
.kp-check__box svg { width: 18px; height: 18px; stroke-width: 2.6; }
.kp-check__list li.is-done { border-color: rgba(123,108,255,.45); box-shadow: 0 24px 50px -40px rgba(40,30,120,.55); }
.kp-check__list li.is-done .kp-check__box { background: var(--violet); border-color: var(--violet); color: #fff; transform: scale(1.06); }
.kp-check__list h3 { font-size: 19px; letter-spacing: -.025em; }
.kp-check__list p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.kp-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kp-apps > div { padding: 24px; border-radius: 22px; background: #fff; border: 1px solid rgba(123,108,255,.16); }
.kp-apps h3 { margin-bottom: 14px; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #1742C0; }
.kp-apps ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.kp-apps li { display: flex; align-items: center; gap: 12px; font-family: var(--f-label); font-size: 14.5px; font-weight: 600; }
.kp-apps__av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: hsl(var(--h) 80% 94%); color: hsl(var(--h) 55% 38%); font-family: var(--f-display); font-size: 15px; font-weight: 700; }
.kp-faq { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.kp-faq__head .x-h2 { margin-top: 18px; }
.kp-faq__head .x-lead { margin-top: 20px; }
.kp-faq__list { display: grid; gap: 14px; }
.kp-faq summary { display: flex; justify-content: flex-end; cursor: pointer; list-style: none; }
.kp-faq summary::-webkit-details-marker { display: none; }
.kp-faq summary .kp-msg { max-width: 86%; font-family: var(--f-display); font-size: 16px; font-weight: 600; animation: none; transition: background .3s; }
.kp-faq summary:hover .kp-msg { background: #1A1F3D; }
.kp-faq details > .kp-msg { max-width: 90%; margin-top: 10px; background: #fff; font-size: 15.5px; }

@media (max-width: 1080px) {
  .ki-hero__grid, .kd-hero__grid, .kc-core__grid, .k-split, .ki-code, .ki-scrolly, .ka-auto, .ka-ring, .kd-scan, .kd-why, .kp-check, .kp-faq, .kp-convo__panel { grid-template-columns: minmax(0, 1fr); }
  .kc-core__copy, .k-split__copy, .kp-check__copy { position: static; }
  .kc-stack li { position: relative; top: auto; }
  .k-tiers, .ki-spot, .ka-flip, .kp-apps, .k-stackcols, .k-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-stackcols > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .ki-scrolly__stage { display: none; }
  .ki-scrolly__steps article { min-height: 0; padding: 24px 0 24px 22px; opacity: 1; border-color: var(--blue); }
  .ki-scrolly__inline { position: static; width: auto; height: auto; overflow: visible; clip: auto; margin: 4px 0; }
  .ki-scrolly__mini { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #EEF4FF; color: var(--blue-700); }
  .ki-scrolly__mini svg { width: 22px; height: 22px; }
  .ki-pipe { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ki-pipe::before, .ki-pipe::after { left: 23px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; }
  .ki-pipe::after { transform: scaleY(0); transform-origin: 50% 0; }
  .ki-pipe.is-in::after { transform: none; }
  .ki-pipe li { padding-left: 72px; }
  .ki-pipe__node { position: absolute; left: 0; top: 0; }
  .ki-pipe h3 { margin-top: 10px; }
  .kp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp-bento__t--3, .kp-bento__t--4 { grid-column: auto; }
  .kd-flow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .kd-flow__arrow { height: 30px; transform: rotate(90deg); }
  .k-hacc { flex-direction: column; height: auto; }
  .k-hacc__p { flex: none; }
  .k-hacc__tab { position: relative; flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; padding: 16px 18px; }
  .k-hacc__p.is-on .k-hacc__tab { padding: 18px 18px 0; }
  .k-hacc__t { writing-mode: horizontal-tb; transform: none; white-space: normal; font-size: 18px; }
  .k-hacc__p.is-on .k-hacc__t { opacity: 1; }
  .k-hacc__body { position: static; display: none; min-width: 0; padding: 18px 22px 24px; }
  .k-hacc__body h3 { display: none; }
  .k-hacc__p.is-on .k-hacc__body { display: flex; }
  .k-compare__row { grid-template-columns: minmax(0, 1fr); }
  .k-compare__row--h { display: none; }
  .k-compare__row + .k-compare__row > .k-compare__yes { border-top: 0; }
  .k-inline { grid-template-columns: minmax(0, 1fr); }
  .k-rows a { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 6px 18px; }
  .k-rows__d { grid-column: 2; grid-row: 2; }
  .k-rows__go { grid-column: 3; grid-row: 1; width: 40px; height: 40px; }
  .kd-acc__head { grid-template-columns: 44px minmax(0, 1fr) 40px; gap: 6px 18px; }
  .kd-acc__d { grid-column: 2; grid-row: 2; }
  .kd-acc__pm { grid-column: 3; grid-row: 1; }
  .kd-acc__body > div { padding-left: 0; }
  .ka-ring__copy { text-align: left; }
}
@media (max-width: 760px) {
  .ka-ring__dial { width: 100%; aspect-ratio: auto; }
  .ka-ring__track, .ka-ring__arc { display: none; }
  .ka-ring__dial [role="tablist"] { display: flex; flex-wrap: wrap; gap: 8px; }
  .ka-ring__dial button { position: static; flex-direction: row; width: auto; padding: 8px 14px 8px 10px; transform: none; border-radius: 999px; border: 1px solid var(--line-2); }
  .ka-ring__dial button i { width: 12px; height: 12px; }
  .ka-ring__dial button span { padding: 0; background: none; }
  .ka-ring__core { position: static; display: block; margin-top: 18px; padding: 24px; border-radius: 22px; text-align: left; }
  .ka-ring__panel { padding: 0; }
}
@media (max-width: 680px) {
  .k-tiers, .ki-spot, .ka-flip, .kp-apps, .k-stackcols, .k-lines, .kp-bento, .kd-checks, .kd-quad, .ka-qa, .k-hacc__body .k-ticks, .kd-acc__body .k-ticks { grid-template-columns: minmax(0, 1fr); }
  .kp-bento__t--0 { grid-column: auto; }
  .k-stackcols > div + div { padding-left: 0; border-left: 0; }
  .kd-quad article { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .kc-quote, .ki-term__body, .ka-glow__in, .kd-drop, .kp-secure, .k-toggle__panel { grid-template-columns: minmax(0, 1fr); }
  .k-toggle__bar { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 22px; }
  .k-toggle__pill { display: none; }
  .k-toggle__bar button[aria-selected="true"] { background: var(--ink-950); }
  .kd-zig::before { left: 18px; }
  .kd-zig li, .kd-zig li:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 0 48px; }
  .kd-zig li + li { margin-top: 18px; }
  .kd-zig li::before, .kd-zig li:nth-child(even)::before { left: 9px; right: auto; }
  .kd-zig li::after { display: none; }
  .kd-out { width: 64%; }
}
/* ================= Industry pages: 38 sector pages + the "All industries" hub =================
   Every sector page shares one full-bleed photo hero and the blue accent (--ia, --ia2); each has its own photos and run of sections. */
.ind { --ia: #2F6BFF; --ia2: #5CB8FF; background: var(--paper); }
.ind .x-k { color: var(--ia); }
.ind .x-h2 em { color: var(--ia); }
.ind svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ind .k-ticks { --k-tick: var(--ia); margin-top: 28px; }
.in-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px; background: color-mix(in srgb, var(--ia) 12%, #fff); color: var(--ia); transition: background .3s, color .3s; }
.in-ic svg { width: 22px; height: 22px; }
.in-sec { position: relative; padding: clamp(80px, 9vw, 130px) 0; }
.in-sec--paper { background: #F6F7F9; }
.in-sec--tint { background: color-mix(in srgb, var(--ia) 6%, #F7F8FB); }
.in-sec--dark { background: var(--ink-950); color: #fff; }
.in-sec--dark .x-h2 { color: #fff; }
.in-sec--dark .x-h2 em, .in-sec--dark .x-k { color: var(--ia2); }
.in-sec--dark .x-lead { color: var(--on-dark-2); }
.in-sec h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.02em; }

/* Heroes (shared) */
.in-hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + clamp(40px, 5vw, 80px)) 0 clamp(56px, 6vw, 96px); }
.in-hero h1 { font-family: var(--f-display); font-size: clamp(40px, 5vw, 76px); font-weight: 600; line-height: 1.05; letter-spacing: -.04em; color: var(--text); }
.in-hero h1 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--ia); }
.in-hero .x-k { margin-bottom: 18px; }
.in-hero > .x-wrap { width: 100%; }
.in-hero .x-crumbs { flex-wrap: wrap; color: var(--text-2); }
.in-hero .x-crumbs a:hover { color: var(--ia); }
.in-lead { margin-top: 22px; max-width: 560px; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.65; color: var(--text-2); }
.in-hero--dark { background: var(--ink-950); color: #fff; }
.in-hero--dark h1 { color: #fff; }
.in-hero--dark h1 em, .in-hero--dark .x-k { color: var(--ia2); }
.in-hero--dark .in-lead { color: rgba(238,241,255,.84); }
.in-hero--dark .x-crumbs { color: rgba(255,255,255,.62); }
.in-hero--dark .x-crumbs a:hover { color: #fff; }
.in-hero--dark .btn--primary, .in-quote .btn--primary { --btn-fill: #fff; --btn-fg-h: var(--text); }
/* Bleed: full-screen photo with copy and glass tags along the bottom */
.in-hero--bleed { min-height: min(94svh, 980px); display: flex; align-items: flex-end; }
.in-bleed__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; animation: inZoom 22s ease-out both; }
.in-hero--bleed::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-shade); }
@keyframes inZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.in-bleed { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.in-bleed > div { max-width: 760px; }
.in-bleed__tags { display: grid; gap: 10px; justify-items: end; margin: 0; padding: 0; list-style: none; }
.in-bleed__tags li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--f-label); font-size: 14px; color: #fff; white-space: nowrap; }
.in-bleed__tags li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ia2); box-shadow: 0 0 10px var(--ia2); }
@keyframes inSpin { to { transform: rotate(360deg); } }

/* Pyzen proof (from pyzenlabs.com): hero promises, a floating facts panel, case studies and client quotes */
.in-hero--bleed { padding-bottom: clamp(110px, 10vw, 150px); }
.in-hero__promise { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 24px 0 0; padding: 0; list-style: none; }
.in-hero__promise li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(238,241,255,.88); }
.in-hero__promise svg { width: 16px; height: 16px; color: var(--ia2); stroke-width: 2.4 !important; }
.inp { position: relative; z-index: 2; margin-top: -64px; }
.inp__card { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 40px 80px -40px rgba(10,12,24,.4), 0 0 0 1px var(--line); }
.inp__card > div { padding: 28px 30px; border-left: 1px solid var(--line); }
.inp__card > div:first-child { border-left: 0; }
.inp__card strong { display: block; font-family: var(--f-display); font-size: clamp(36px, 3.6vw, 52px); font-weight: 600; line-height: 1; letter-spacing: -.04em; background: linear-gradient(135deg, var(--ia), var(--ia2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.inp__card span { display: block; margin-top: 10px; font-size: 14.5px; color: var(--text-2); }
.inp__card .inp__clutch strong { font-size: clamp(22px, 2vw, 28px); letter-spacing: .12em; line-height: 1.6; background: none; color: #F5A623; -webkit-text-fill-color: #F5A623; }
.incs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.incs__card { display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; border: 1px solid var(--line); background: #fff; color: var(--text); transition: transform .5s var(--ease-out), box-shadow .5s; }
.incs__card:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--ia) 60%, transparent); }
.incs__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.incs__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.incs__card:hover .incs__media img { transform: scale(1.06); }
.incs__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.45), transparent 50%); }
.incs__tag, .incs__nda { position: absolute; z-index: 1; top: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.incs__tag { left: 16px; background: rgba(0,0,0,.45); }
.incs__nda { right: 16px; background: color-mix(in srgb, var(--ia) 70%, transparent); }
.incs__nda svg { width: 13px; height: 13px; }
.incs__body { display: flex; flex: 1; flex-direction: column; padding: 24px 26px 26px; }
.incs__body small { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ia); }
.incs__body h3 { margin: 8px 0; font-family: var(--f-display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.incs__body p { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.incs__m { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.incs__m div { padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--ia) 8%, #fff); }
.incs__m b { display: block; font-family: var(--f-display); font-size: 28px; font-weight: 600; letter-spacing: -.03em; color: var(--ia); }
.incs__m span { font-size: 13px; color: var(--text-2); }
.incs__body .k-link { margin-top: auto; color: var(--ia); }
/* Client voices: dark spotlight — a floating review card that rotates through clients, a Clutch badge, and a moving client strip */
.intm { overflow: hidden; isolation: isolate; background: var(--ink-950); color: #fff; }
.intm::before { content: ""; position: absolute; inset: -20% -10%; z-index: -1; background: radial-gradient(38% 45% at 12% 25%, color-mix(in srgb, var(--ia) 38%, transparent), transparent 70%), radial-gradient(36% 42% at 88% 80%, color-mix(in srgb, var(--ia2) 26%, transparent), transparent 70%); animation: intmGlow 14s ease-in-out infinite alternate; }
@keyframes intmGlow { to { transform: translate(-3%, 3%) scale(1.05); } }
.intm__wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.intm .x-k, .intm .x-h2 em { color: var(--ia2); }
.intm .x-h2 { margin-top: 16px; color: #fff; }
.intm .x-lead { margin-top: 18px; color: var(--on-dark-2); }
.intm__badge { display: inline-flex; align-items: center; gap: 16px; margin-top: 32px; padding: 16px 22px 16px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.intm__badge > span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #8FC4FF, #F5A623); font-family: var(--f-display); font-size: 22px; font-weight: 700; color: #0D1A4A; }
.intm__badge strong { display: block; font-family: var(--f-display); font-size: 17px; font-weight: 600; color: #fff; }
.intm__badge small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--on-dark-2); }
.intm__badge em { font-style: normal; letter-spacing: .12em; color: #8FC4FF; }
.intm__stage { position: relative; overflow: hidden; border-radius: 32px; background: #fff; color: var(--text); box-shadow: 0 60px 120px -50px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); }
.intm__stage::before { content: ""; position: absolute; top: -120px; right: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ia) 22%, transparent), transparent 70%); pointer-events: none; }
.intm__q { position: relative; min-height: 340px; margin: 0; padding: clamp(32px, 4vw, 52px) clamp(28px, 4vw, 52px) 30px; }
.intm__q.is-in { animation: inFade .7s var(--ease-out); }
.intm__mark { position: absolute; top: 8px; left: clamp(20px, 3vw, 40px); font-family: var(--f-serif); font-size: 150px; line-height: 1; background: linear-gradient(135deg, var(--ia), var(--ia2)); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .2; pointer-events: none; }
.intm__stars { position: relative; font-size: 17px; letter-spacing: .16em; color: #F5A623; }
.intm__q blockquote { position: relative; margin: 18px 0 30px; font-family: var(--f-display); font-size: clamp(19px, 1.7vw, 24px); font-weight: 500; line-height: 1.5; letter-spacing: -.015em; color: var(--text); }
.intm__q figcaption { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--text-2); }
.intm__q figcaption strong { display: block; font-family: var(--f-display); font-size: 17px; font-weight: 600; color: var(--text); }
.intm__av { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--ia), var(--ia2)); font-family: var(--f-display); font-size: 17px; font-weight: 600; color: #fff; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--ia) 70%, transparent); }
.intm__dots { display: flex; align-items: center; gap: 10px; padding: 0 clamp(28px, 4vw, 52px) clamp(28px, 3.4vw, 40px); }
.intm__dots button { position: relative; width: 10px; height: 10px; overflow: hidden; border-radius: 999px; background: #D5DCE8; transition: width .45s var(--ease-out), background .3s; }
.intm__dots button:hover { background: #B9C3D6; }
.intm__dots button[aria-selected="true"] { width: 44px; background: color-mix(in srgb, var(--ia) 22%, #fff); }
.intm__dots i { position: absolute; inset: 0; border-radius: inherit; background: var(--ia); transform: scaleX(0); transform-origin: 0 50%; }
.intm__dots button[aria-selected="true"] i { transform: scaleX(1); }
.intm__stage.is-run .intm__dots button[aria-selected="true"] i { transform: scaleX(0); animation: intmFill var(--dur, 10000ms) linear forwards; }
@keyframes intmFill { to { transform: scaleX(1); } }
.intm__marq { margin-top: clamp(48px, 6vw, 80px); overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.intm__marq > div { display: flex; gap: 14px; width: max-content; padding-right: 14px; animation: inMarq 40s linear infinite; }
.intm__marq span { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); font-family: var(--f-label); font-size: 14.5px; color: rgba(238,241,255,.82); white-space: nowrap; }
.intm__marq span::before { content: "★"; color: #8FC4FF; }

/* Solutions: spotlight grid */
.in-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.in-grid article { position: relative; overflow: hidden; padding: 30px 28px 32px; border-radius: 22px; border: 1px solid var(--line); background: #fff; transition: transform .45s var(--ease-out), box-shadow .45s, border-color .45s; }
.in-grid article::before { content: ""; position: absolute; inset: 0; background: radial-gradient(380px circle at var(--mx, -400px) var(--my, -400px), color-mix(in srgb, var(--ia) 15%, transparent), transparent 62%); pointer-events: none; }
.in-grid article:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ia) 40%, transparent); box-shadow: 0 30px 60px -38px rgba(10,12,24,.4); }
.in-grid article:hover .in-ic { background: var(--ia); color: #fff; }
.in-grid h3 { margin: 24px 0 10px; font-size: 21px; }
.in-grid p, .in-track p, .in-bento p, .in-stack p, .in-outs p, .in-proc p { font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
/* Solutions: vertical tabs with a photo panel */
.in-tabs { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.in-tabs__list { display: grid; gap: 6px; }
.in-tabs__list button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px 12px 12px; border-radius: 18px; text-align: left; font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--text-2); transition: background .3s, color .3s, box-shadow .3s; }
.in-tabs__list button:hover { color: var(--text); }
.in-tabs__list button .in-ic { width: 40px; height: 40px; }
.in-tabs__list button[aria-selected="true"] { background: #fff; color: var(--text); box-shadow: 0 18px 40px -26px rgba(10,12,24,.45); }
.in-tabs__list button[aria-selected="true"] .in-ic { background: var(--ia); color: #fff; }
.in-tabs__panel { overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 40px 80px -50px rgba(10,12,24,.45); }
.in-tabs__panel.is-in { animation: inFade .6s var(--ease-out); }
@keyframes inFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.in-tabs__panel img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.in-tabs__body { padding: 28px 32px 32px; }
.in-tabs__body h3 { font-size: 26px; }
.in-tabs__body p { margin: 10px 0 18px; font-size: 16px; line-height: 1.65; color: var(--text-2); }
.in-tabs__body .k-link { color: var(--ia); }
/* Solutions: horizontal photo track */
.in-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 360px); gap: 20px; padding-bottom: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.in-track::-webkit-scrollbar { display: none; }
.in-track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.in-track article { overflow: hidden; scroll-snap-align: start; border-radius: 24px; border: 1px solid var(--line); background: #fff; }
.in-track img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; pointer-events: none; }
.in-track__body { padding: 22px 24px 26px; }
.in-track__body .in-ic { margin-top: -46px; position: relative; box-shadow: 0 0 0 5px #fff; background: var(--ia); color: #fff; }
.in-track h3 { margin: 16px 0 8px; font-size: 20px; }
.in-track__nav { display: flex; align-items: center; gap: 24px; margin-top: 28px; }
.in-prog { flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: var(--line); }
.in-prog i { display: block; height: 100%; background: var(--ia); transform: scaleX(.08); transform-origin: 0 50%; transition: transform .2s; }
/* Solutions: bento */
.in-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); gap: 16px; }
.in-bento > * { position: relative; overflow: hidden; margin: 0; padding: 26px; border-radius: 24px; border: 1px solid var(--line); background: #fff; }
.in-bento h3 { margin: 18px 0 8px; font-size: 19px; }
.in-bento__big { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; border: 0 !important; color: #fff; isolation: isolate; }
.in-bento__big > img, .in-bento__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.in-bento__big::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5,6,13,.85), rgba(5,6,13,.1) 65%); }
.in-bento__big h3 { font-size: 28px; color: #fff; }
.in-bento__big p { color: rgba(255,255,255,.82) !important; max-width: 440px; }
.in-bento__big .in-ic { background: var(--ia); color: #fff; }
.in-bento__photo { grid-column: span 2; padding: 0 !important; border: 0 !important; min-height: 210px; }
.in-bento__cta { display: flex; flex-direction: column; justify-content: space-between; border: 0 !important; background: linear-gradient(140deg, var(--ia), color-mix(in srgb, var(--ia2) 70%, var(--ia))) !important; color: #fff; }
.in-bento__cta span { font-size: 15px; opacity: .85; }
.in-bento__cta strong { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.in-bento__cta svg { width: 20px; height: 20px; transition: transform .35s var(--ease-out); }
.in-bento__cta:hover svg { transform: translateX(4px); }
/* Solutions: sticky photo with stacked rows */
.in-stack { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.in-stack__side { position: sticky; top: calc(var(--header-h) + 32px); }
.in-stack__side .x-h2 { margin-top: 16px; }
.in-stack__side .x-lead { margin-top: 18px; }
.in-stack__side img { display: block; width: 100%; aspect-ratio: 5 / 4; margin-top: 30px; object-fit: cover; border-radius: 26px; }
.in-stack__rows article { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; padding: 28px 0; border-top: 1px solid var(--line); }
.in-stack__rows article:first-child { border-top: 0; padding-top: 0; }
.in-stack__rows .in-ic { width: 52px; height: 52px; border-radius: 16px; }
.in-stack__rows h3 { margin-bottom: 8px; font-size: 23px; }

/* Solutions: flip cards (photo front, details on the back) */
.in-flipg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.in-flipc { position: relative; aspect-ratio: 4 / 4.4; perspective: 1400px; border-radius: 24px; outline-offset: 4px; cursor: pointer; }
.in-flipc__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s var(--ease-out); }
.in-flipc:hover .in-flipc__in, .in-flipc:focus-within .in-flipc__in { transform: rotateY(180deg); }
.in-flipc__f, .in-flipc__b { position: absolute; inset: 0; overflow: hidden; border-radius: 24px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.in-flipc__f img { width: 100%; height: 100%; object-fit: cover; }
.in-flipc__f::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,6,13,.82), transparent 55%); }
.in-flipc__f h3 { position: absolute; left: 24px; right: 64px; bottom: 22px; z-index: 1; font-size: 22px; color: #fff; }
.in-flipc__hint { position: absolute; right: 18px; bottom: 20px; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.in-flipc__hint svg { width: 16px; height: 16px; }
.in-flipc__b { display: flex; flex-direction: column; padding: 30px 28px; background: linear-gradient(150deg, var(--ia), color-mix(in srgb, var(--ia2) 60%, var(--ia))); color: #fff; transform: rotateY(180deg); }
.in-flipc__b .in-ic { background: rgba(255,255,255,.18); color: #fff; }
.in-flipc__b h3 { margin: 22px 0 10px; font-size: 22px; }
.in-flipc__b p { font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.88); }
.in-flipc__b a { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-weight: 600; color: #fff; }
.in-flipc__b a svg { width: 16px; height: 16px; }
/* Solutions: frosted glass cards over a photo */
.in-glass { overflow: hidden; isolation: isolate; color: #fff; }
.in-glass__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.in-glass::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(5,6,13,.9) 0%, rgba(5,6,13,.62) 55%, color-mix(in srgb, var(--ia) 55%, rgba(5,6,13,.7)) 100%); }
.in-glass .x-h2 { color: #fff; }
.in-glass .x-h2 em, .in-glass .x-k { color: var(--ia2); }
.in-glass .x-lead { color: rgba(238,241,255,.8); }
.in-glass__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.in-glass__grid article { padding: 28px; border-radius: 22px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: background .35s, transform .45s var(--ease-out); }
.in-glass__grid article:hover { background: rgba(255,255,255,.14); transform: translateY(-4px); }
.in-glass__grid .in-ic { background: rgba(255,255,255,.14); color: #fff; }
.in-glass__grid h3 { margin: 22px 0 8px; font-size: 20px; color: #fff; }
.in-glass__grid p { font-size: 15px; line-height: 1.6; color: rgba(238,241,255,.78); }
/* Solutions: cards that stack as you scroll */
.in-stk { display: grid; gap: 26px; }
.in-stk article { position: sticky; top: calc(var(--header-h) + 20px + var(--k) * 16px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 380px; overflow: hidden; border-radius: 30px; border: 1px solid var(--line); background: #fff; box-shadow: 0 -24px 60px -40px rgba(10,12,24,.4); }
.in-stk article:nth-child(even) { background: color-mix(in srgb, var(--ia) 7%, #fff); }
.in-stk__txt { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 52px); }
.in-stk h3 { margin: 20px 0 10px; font-size: clamp(24px, 2.4vw, 30px); }
.in-stk p { font-size: 16px; line-height: 1.6; color: var(--text-2); }
.in-stk ul { display: grid; gap: 8px; margin: 18px 0 22px; padding: 0; list-style: none; }
.in-stk li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.in-stk li svg { width: 18px; height: 18px; color: var(--ia); }
.in-stk .k-link { color: var(--ia); }
.in-stk article > img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
/* Solutions: zigzag photo rows */
.in-zz { display: grid; gap: clamp(56px, 7vw, 110px); }
.in-zz__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.in-zz__row figure { margin: 0 20px 20px 0; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 28px; box-shadow: 20px 20px 0 color-mix(in srgb, var(--ia) 16%, transparent); }
.in-zz__row:nth-child(even) figure { order: 2; margin: 0 0 20px 20px; box-shadow: -20px 20px 0 color-mix(in srgb, var(--ia2) 22%, transparent); }
.in-zz__row figure img { width: 100%; height: 100%; object-fit: cover; }
.in-zz article { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.in-zz article:last-child { border-bottom: 0; }
.in-zz article .in-ic { width: 52px; height: 52px; border-radius: 16px; }
.in-zz h3 { margin-bottom: 8px; font-size: 23px; }
.in-zz p { font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
/* Solutions: expanding cards (the first is open until another is hovered or focused) */
.in-xp { display: flex; gap: 12px; height: 440px; }
.in-xp article { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; overflow: hidden; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--ia) 20%, transparent); background: color-mix(in srgb, var(--ia) 7%, #fff); cursor: pointer; outline-offset: 3px; transition: flex .7s var(--ease-out), background .5s, color .5s; }
.in-xp h3 { font-size: 19px; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }
.in-xp p { display: none; }
:is(.in-xp article:hover, .in-xp article:focus-within, .in-xp:not(:hover):not(:focus-within) article:first-child) { flex: 3.2; border-color: transparent; background: linear-gradient(155deg, var(--ia), color-mix(in srgb, var(--ia2) 65%, var(--ia))); color: #fff; }
:is(.in-xp article:hover, .in-xp article:focus-within, .in-xp:not(:hover):not(:focus-within) article:first-child) h3 { font-size: 26px; white-space: normal; writing-mode: horizontal-tb; transform: none; }
:is(.in-xp article:hover, .in-xp article:focus-within, .in-xp:not(:hover):not(:focus-within) article:first-child) p { display: block; max-width: 400px; margin-top: 10px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.9); }
:is(.in-xp article:hover, .in-xp article:focus-within, .in-xp:not(:hover):not(:focus-within) article:first-child) .in-ic { background: rgba(255,255,255,.2); color: #fff; }
/* Solutions: list rows that show a photo following the pointer */
.in-rvl { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.in-rvl a { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) 48px; gap: 24px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); transition: padding .5s var(--ease-out), background .4s; }
.in-rvl a:hover, .in-rvl a:focus-visible { padding-left: 18px; padding-right: 12px; background: color-mix(in srgb, var(--ia) 5%, transparent); }
.in-rvl strong { font-family: var(--f-display); font-size: clamp(22px, 2.6vw, 36px); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; transition: color .3s; }
.in-rvl a:hover strong { color: var(--ia); }
.in-rvl span:not(.in-ic):not(.in-rvl__go) { font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.in-rvl__go { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); transition: background .3s, color .3s, transform .5s var(--ease-out); }
.in-rvl__go svg { width: 18px; height: 18px; }
.in-rvl a:hover .in-rvl__go { background: var(--ia); border-color: var(--ia); color: #fff; transform: rotate(-45deg); }
/* Products: polaroid cards */
.in-pol { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 22px; padding-top: 10px; }
.in-pol figure { position: relative; width: calc((100% - 110px) / 6); margin: 0; padding: 12px 12px 66px; background: #fff; box-shadow: 0 26px 50px -26px rgba(10,12,24,.45); transform: rotate(var(--r)); transition: transform .6s var(--ease-out), box-shadow .6s; }
.in-pol figure::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 26px; margin-left: -45px; background: color-mix(in srgb, var(--ia2) 45%, rgba(255,255,255,.6)); opacity: .8; transform: rotate(calc(var(--r) * -1.5)); }
.in-pol figure:hover { z-index: 1; transform: rotate(0) translateY(-10px) scale(1.04); box-shadow: 0 40px 70px -30px rgba(10,12,24,.5); }
.in-pol img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.in-pol figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: center; height: 46px; font-family: var(--f-serif); font-size: 18px; font-style: italic; line-height: 1.1; text-align: center; color: var(--text); }
/* Features: gradient-border cards */
.in-f2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.in-f2 li { display: flex; align-items: center; gap: 16px; padding: 24px; border: 1.5px solid transparent; border-radius: 20px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--ia), var(--ia2)) border-box; font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; transition: transform .4s var(--ease-out), box-shadow .4s; }
.in-f2 li:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--ia) 70%, transparent); }
.in-f2 li > span:first-child { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--ia), var(--ia2)); color: #fff; }
.in-f2 svg { width: 20px; height: 20px; stroke-width: 2.4 !important; }
/* Call-to-action: split card (photo + accent panel) */
.in-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border-radius: 32px; background: linear-gradient(150deg, var(--ia), color-mix(in srgb, var(--ia2) 55%, var(--ia))); color: #fff; }
.in-cta > img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.in-cta > div { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(32px, 5vw, 72px); }
.in-cta h2 { font-family: var(--f-display); font-size: clamp(30px, 3.4vw, 48px); font-weight: 600; line-height: 1.08; letter-spacing: -.04em; }
.in-cta h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.in-cta p { max-width: 460px; margin: 16px 0 30px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.9); }

/* Apps: pill cloud beside a circular photo */
.in-apps { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.in-apps .x-h2 { margin-top: 16px; }
.in-apps .x-lead { margin-top: 18px; }
.in-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.in-pills li { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-family: var(--f-label); font-size: 15px; font-weight: 500; transition: border-color .3s, transform .35s var(--ease-out); }
.in-pills li:hover { border-color: var(--ia); transform: translateY(-2px); }
.in-pills svg { width: 18px; height: 18px; color: var(--ia); }
.in-apps__media { position: relative; justify-self: center; width: min(100%, 440px); aspect-ratio: 1; }
.in-apps__media::before { content: ""; position: absolute; inset: -20px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--ia) 55%, transparent); animation: inSpin 50s linear infinite; }
.in-apps__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.in-apps__badge { position: absolute; left: -4%; bottom: 10%; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 12px; border-radius: 999px; background: #fff; box-shadow: 0 20px 40px -20px rgba(10,12,24,.45); font-family: var(--f-label); font-size: 14px; }
.in-apps__badge svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--ia); color: #fff; }

/* Problem → solution: editorial layout — a sticky photo beside three plainly typeset entries separated by hairlines */
.ipx { background: #fff; }
.ipx__body { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ipx__photo { position: sticky; top: calc(var(--header-h) + 32px); overflow: hidden; aspect-ratio: 4 / 5; margin: 0; border-radius: 20px; }
.ipx__photo img { width: 100%; height: 100%; object-fit: cover; }
.ipx__photo figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,.94); font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.ipx__photo figcaption strong { color: var(--text); font-weight: 600; }
.ipx__list article { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 32px; padding: 36px 0; border-top: 1px solid var(--line); }
.ipx__list article:first-child { padding-top: 0; border-top: 0; }
.ipx__lbl, .ipx__tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.ipx__lbl::before, .ipx__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ipx__lbl { background: #FDECEC; color: #C2353B; }
.ipx__tag { margin-top: 18px; background: color-mix(in srgb, var(--ia) 10%, #fff); color: var(--ia); }
.ipx__list h3 { margin-top: 12px; font-family: var(--f-display); font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.22; letter-spacing: -.025em; }
.ipx__fix { margin-top: 10px; font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--text); }
.ipx__res { margin-top: 18px; padding-left: 14px; border-left: 2px solid var(--ia); font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.ipx__res strong { font-weight: 600; color: var(--text); }
.ipx__thumb { width: 132px; height: 100px; margin-top: 4px; object-fit: cover; border-radius: 14px; }
@media (max-width: 680px) {
  .ipx__list article { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ipx__thumb { display: none; }
}


/* Before/after compare: greyscale "before" on the left, colour "after" on the right */
.in-cmpw { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.in-cmpw .x-h2 { margin-top: 16px; }
.in-cmpw .x-lead { margin-top: 18px; }
.in-cmp { --pos: 50%; position: relative; overflow: hidden; aspect-ratio: 16 / 11; border-radius: 28px; user-select: none; box-shadow: 0 50px 90px -50px rgba(10,12,24,.55); }
.in-cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.in-cmp__b { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.in-cmp__b img { filter: grayscale(1) contrast(.92) brightness(.82); }
.in-cmp__tag { position: absolute; top: 18px; left: 18px; padding: 8px 14px; border-radius: 999px; background: rgba(5,6,13,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #fff; pointer-events: none; }
.in-cmp__tag--b { left: auto; right: 18px; background: var(--ia); }
.in-cmp__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; }
.in-cmp__line i { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--ia); transform: translate(-50%, -50%); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.in-cmp__line svg { width: 22px; height: 22px; }
.in-cmp input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

/* Outcomes */
.in-outs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.in-outs article { display: flex; flex-direction: column; min-height: 250px; padding: 30px 26px; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--ia) 22%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--ia) 10%, #fff), #fff 62%); }
.in-outs .in-ic { width: 54px; height: 54px; border-radius: 17px; background: var(--ia); color: #fff; }
.in-outs h3 { margin-top: auto; padding-top: 36px; margin-bottom: 8px; font-size: 24px; }

/* Features: overlapping photos beside a checklist */
.in-feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.in-feat .x-h2 { margin-top: 16px; }
.in-feat .x-lead { margin-top: 18px; }
.in-feat__media { position: relative; padding-bottom: 12%; }
.in-feat__media img:first-child { display: block; width: 78%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; }
.in-feat__media img:last-child { position: absolute; right: 0; bottom: 0; width: 50%; aspect-ratio: 1; object-fit: cover; border-radius: 24px; border: 8px solid #fff; box-shadow: 0 30px 60px -30px rgba(10,12,24,.5); }
.in-sec--paper .in-feat__media img:last-child { border-color: #F6F7F9; }
.in-feat__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.in-feat__list li { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; font-size: 15.5px; font-weight: 500; line-height: 1.45; }
.in-feat__list svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--ia); color: #fff; stroke-width: 2.6 !important; }

/* Gallery: photos that widen on hover or focus */
.in-gal { display: flex; gap: 14px; height: clamp(380px, 42vw, 540px); }
.in-gal figure { position: relative; flex: 1; min-width: 0; margin: 0; overflow: hidden; border-radius: 26px; cursor: pointer; outline-offset: 4px; transition: flex .8s var(--ease-out); }
.in-gal figure:hover, .in-gal figure:focus-visible { flex: 2.6; }
.in-gal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.in-gal figcaption { position: absolute; inset: auto 0 0; padding: 70px 24px 24px; background: linear-gradient(0deg, rgba(5,6,13,.85), transparent); color: #fff; }
.in-gal strong { display: block; font-family: var(--f-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.in-gal span { display: block; max-height: 0; margin-top: 0; overflow: hidden; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.82); opacity: 0; transition: max-height .6s var(--ease-out), opacity .4s, margin .4s; }
.in-gal figure:hover span, .in-gal figure:focus-visible span { max-height: 80px; margin-top: 8px; opacity: 1; }

/* Technology marquee */
.in-tech { display: grid; gap: 14px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.in-tech__row { display: flex; gap: 14px; width: max-content; animation: inMarq 46s linear infinite; }
.in-tech__row--r { animation-direction: reverse; }
.in-tech:hover .in-tech__row { animation-play-state: paused; }
.in-tech__row > span { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); font-family: var(--f-label); font-size: 16px; font-weight: 500; color: #EEF1FF; white-space: nowrap; }
.in-tech .k-tlogo { width: 34px; height: 34px; padding: 6px; border-radius: 10px; background: #fff; }
.in-tech .k-tlogo--mono { padding: 0; font-size: 10.5px; }
@keyframes inMarq { to { transform: translateX(-50%); } }

/* Delivery process: icons on a line (no step numbers) */
.in-proc { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.in-proc::before { content: ""; position: absolute; left: 10%; right: 10%; top: 31px; height: 2px; background: linear-gradient(90deg, var(--ia), var(--ia2)); opacity: .45; }
.in-proc li { position: relative; text-align: center; }
.in-proc .in-ic { width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; border: 2px solid var(--ia); background: #fff; box-shadow: 0 0 0 8px #fff; }
.in-sec--paper .in-proc .in-ic { box-shadow: 0 0 0 8px #F6F7F9; }
.in-proc h3 { margin-bottom: 8px; font-size: 19px; }

/* Statement band over a photo */
.in-quote { position: relative; overflow: hidden; isolation: isolate; padding: clamp(100px, 12vw, 180px) 0; color: #fff; }
.in-quote > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.in-quote::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, rgba(5,6,13,.86) 10%, rgba(5,6,13,.4) 60%, color-mix(in srgb, var(--ia) 40%, transparent)); }
.in-quote .x-k { color: var(--ia2); }
.in-quote h2 { max-width: 15ch; margin-top: 18px; font-family: var(--f-display); font-size: clamp(36px, 4.6vw, 68px); font-weight: 600; line-height: 1.04; letter-spacing: -.04em; }
.in-quote h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--ia2); }
.in-quote p { max-width: 540px; margin: 22px 0 34px; font-size: 18px; line-height: 1.6; color: rgba(238,241,255,.85); }

/* Why Pyzen (dark) */
.in-why { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.in-why .x-h2 { margin-top: 16px; }
.in-why .x-lead { margin-top: 18px; }
.in-why__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.in-why__grid article { padding: 24px; border-radius: 20px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); }
.in-why__grid .in-ic { background: color-mix(in srgb, var(--ia2) 18%, transparent); color: var(--ia2); }
.in-why__grid h3 { margin: 18px 0 6px; font-size: 19px; color: #fff; }
.in-why__grid p { font-size: 14.5px; line-height: 1.55; color: var(--on-dark-2); }
.in-why__media { position: relative; aspect-ratio: 4 / 5; }
.in-why__media img:first-child { position: absolute; top: 0; right: 0; width: 82%; height: 84%; object-fit: cover; border-radius: 28px; }
.in-why__media img:last-child { position: absolute; left: 0; bottom: 0; width: 54%; aspect-ratio: 1; object-fit: cover; border-radius: 24px; border: 8px solid var(--ink-950); }

/* "All industries" hub */
.inh-hero { min-height: 78svh; display: flex; align-items: center; }
.inh-hero { padding-bottom: clamp(120px, 12vw, 160px); }
.inh-vid { position: absolute; inset: 0; z-index: -2; background: var(--ink-950); }
.inh-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.inh-vid video.is-on { opacity: 1; }
.inh-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-shade); }
.inh-hero h1, .inh-hero .in-lead { text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.inh-clips { position: absolute; left: 0; right: 0; bottom: clamp(26px, 3vw, 40px); }
.inh-clips .x-wrap { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; }
.inh-clips .x-wrap::-webkit-scrollbar { display: none; }
.inh-clips a { position: relative; flex: 1 0 118px; max-width: 200px; white-space: nowrap; padding-top: 14px; font-family: var(--f-label); font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,.62); transition: color .3s; }
.inh-clips a::before, .inh-clips i { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: rgba(255,255,255,.25); }
.inh-clips i { background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.inh-clips a.is-on, .inh-clips a:hover { color: #fff; }
.inh-clips a.is-on i { animation: inhFill 7s linear forwards; }
@keyframes inhFill { to { transform: scaleX(1); } }
.inh-hero h1 { max-width: 14ch; }
.inh-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 34px; }
.inh-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.inh-filter button { padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-family: var(--f-label); font-size: 14.5px; font-weight: 500; color: var(--text-2); transition: background .3s, color .3s, border-color .3s; }
.inh-filter button:hover { color: var(--text); border-color: var(--text); }
.inh-filter button[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: #fff; }
.inh-search { position: relative; display: block; }
.inh-search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; color: var(--text-2); transform: translateY(-50%); pointer-events: none; }
.inh-search input { width: min(320px, 80vw); padding: 13px 18px 13px 44px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 15px; }
.inh-search input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.inh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.inh-card { position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 3 / 4; border-radius: 24px; color: #fff; }
.inh-card[hidden] { display: none; }
.inh-card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.inh-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5,6,13,.92) 0%, rgba(5,6,13,.35) 55%, rgba(5,6,13,.05)); transition: background .4s; }
.inh-card:hover > img { transform: scale(1.07); }
.inh-card:hover::before { background: linear-gradient(0deg, rgba(5,6,13,.94) 0%, color-mix(in srgb, var(--ia) 45%, transparent) 70%, rgba(5,6,13,.05)); }
.inh-card__go { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--text); opacity: 0; transform: scale(.8) rotate(-45deg); transition: opacity .35s, transform .45s var(--ease-out); }
.inh-card__go svg { width: 18px; height: 18px; }
.inh-card:hover .inh-card__go, .inh-card:focus-visible .inh-card__go { opacity: 1; transform: none; }
.inh-card__body { position: absolute; inset: auto 0 0; display: grid; gap: 6px; padding: 22px; }
.inh-card__body small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ia2); }
.inh-card__body strong { font-family: var(--f-display); font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.inh-card__body > span { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.8); }
.inh-none { margin-top: 24px; font-size: 16px; color: var(--text-2); }

@media (max-width: 1180px) {
  .inh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .in-outs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .in-tabs, .in-stack, .in-apps, .in-cmpw, .in-feat, .in-why, .in-bleed, .in-zz__row, .in-stk article, .in-cta { grid-template-columns: minmax(0, 1fr); }
  .in-bleed__tags { justify-items: start; grid-auto-flow: row; }
  .in-grid, .in-flipg, .in-glass__grid, .in-f2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-pol figure { width: calc((100% - 44px) / 3); }
  .in-zz__row:nth-child(even) figure { order: 0; }
  .ipx__body, .incs__grid, .intm__wrap { grid-template-columns: minmax(0, 1fr); }
  .ipx__photo { position: relative; top: auto; aspect-ratio: 16 / 10; }
  .inp__card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inp__card > div:nth-child(3) { border-left: 0; }
  .inp__card > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .in-stk article { position: relative; top: auto; }
  .in-xp { flex-direction: column; height: auto; }
  .in-xp article { flex: none !important; border-color: transparent; background: linear-gradient(155deg, var(--ia), color-mix(in srgb, var(--ia2) 65%, var(--ia))); color: #fff; }
  .in-xp article h3 { font-size: 22px; white-space: normal; writing-mode: horizontal-tb; transform: none; margin-top: 16px; }
  .in-xp article p { display: block; margin-top: 8px; color: rgba(255,255,255,.9); }
  .in-xp article .in-ic { background: rgba(255,255,255,.2); color: #fff; }
  .in-rvl a { grid-template-columns: 48px minmax(0, 1fr) 44px; gap: 16px; }
  .in-rvl span:not(.in-ic):not(.in-rvl__go) { grid-column: 2; grid-row: 2; }
  .in-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-stack__side { position: static; }
  .in-proc { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .in-proc::before { left: 31px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: linear-gradient(var(--ia), var(--ia2)); }
  .in-proc li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 20px; text-align: left; align-items: start; }
  .in-proc .in-ic { grid-row: span 2; margin: 0; }
  .in-gal { flex-direction: column; height: auto; }
  .in-gal figure { flex: none !important; height: 240px; }
  .in-gal span { max-height: none; margin-top: 8px; opacity: 1; }
  .in-why__media { max-width: 480px; }
  .inh-clips a { font-size: 12.5px; }
}
@media (max-width: 680px) {
  .in-grid, .in-outs, .in-feat__list, .in-why__grid, .in-bento, .in-flipg, .in-glass__grid, .in-f2 { grid-template-columns: minmax(0, 1fr); }
  .in-pol figure { width: calc(50% - 12px); padding-bottom: 46px; }
  .in-pol figcaption { font-size: 17px; }
  .in-bento__big, .in-bento__photo { grid-column: auto; grid-row: auto; min-height: 320px; }
  .inh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .inh-card__body { padding: 16px; } .inh-card__body strong { font-size: 18px; } .inh-card__body > span { display: none; }
}
@media (max-width: 420px) {
  .inh-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .in-apps__media::before, .in-tech__row, .in-bleed__bg { animation: none !important; }
  .in-flipc__in, .in-xp article { transition: none; }
  .intm::before, .intm__marq > div { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ki-ai__pulse { display: none; }
  .ki-ai__bdot, .ki-ai__halo, .ki-ai__ic,.ka-hero__aurora i, .ka-rot > span, .ka-hero__pills li, .ka-auto__orb, .ka-auto__ring, .ka-glow::before, .kd-scan__beam, .kd-drop__ic, .kd-flow__arrow svg, .kp-ui-bars i, .ki-term__cur, .kp-secure__ic::before, .ki-mq__t { animation: none !important; }
  .kp-type { width: auto; border: 0; animation: none; }
  .k-hacc__p, .ka-flip__in { transition: none; }
}

/* ==========================================================================
   AI by Industry — AI for BFSI (kb-, navy and gold), Healthcare (kh-, calm sky blue), Logistics (kl-, asphalt and
   amber) and Retail (kr-, cream and coral). Photography-led components; shared parts come from the k- kit above.
   ========================================================================== */
.kh-hero .x-crumbs, .kr-hero .x-crumbs { color: var(--text-3); flex-wrap: wrap; }
.kb-hero .x-crumbs, .kl-hero .x-crumbs { color: rgba(255,255,255,.6); flex-wrap: wrap; }
.kb-hero h1, .kh-hero h1, .kl-hero h1, .kr-hero h1 { font-size: clamp(40px, 4.8vw, 72px); line-height: 1.02; letter-spacing: -.045em; }
.kb-hero .x-hero__ctas, .kh-hero .x-hero__ctas, .kl-hero .x-hero__ctas, .kr-hero .x-hero__ctas { margin-top: 34px; }
.kb-hero__lead, .kh-hero__lead, .kl-hero__lead, .kr-hero__lead { margin-top: 24px; max-width: 540px; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.65; color: var(--text-2); }
.kb-hero__lead, .kl-hero__lead { color: var(--on-dark-2); }

/* ---------- AI for BFSI ---------- */
.kb-navy { background: #0A1330; }
.acp--bfsi .ac-trust { background: #0A1330; }
.kb-navy .x-h2 em, .kb-hero h1 em, .kb-stage .x-h2 em { color: #5CB8FF; }
.kb-navy .x-k, .kb-hero .x-k, .kb-stage .x-k { color: #5CB8FF; }
.kb-hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + clamp(48px, 6vw, 90px)) 0 0; background: radial-gradient(900px 600px at 80% 30%, rgba(47,107,255,.25), transparent 70%), #0A1330; color: #fff; }
.kb-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; padding-bottom: clamp(56px, 6vw, 88px); }
.kb-hero .x-k { margin-bottom: 20px; }
.kb-hero h1 { color: #fff; }
.kb-stack { position: relative; height: clamp(380px, 38vw, 520px); }
.kb-stack img, .kb-alert, .kb-chip { transition: translate .6s var(--ease-out); }
.kb-stack img { position: absolute; object-fit: cover; border-radius: 22px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.kb-stack__a { left: 6%; top: 6%; width: 68%; height: 62%; transform: rotate(-3deg); }
.kb-stack__b { right: 0; top: 32%; width: 48%; height: 44%; transform: rotate(4deg); border: 4px solid #0A1330; }
.kb-stack__c { left: 0; bottom: 0; width: 44%; height: 36%; transform: rotate(2deg); border: 4px solid #0A1330; }
.kb-alert { position: absolute; right: 2%; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 16px; background: rgba(255,255,255,.96); color: var(--text); box-shadow: 0 24px 50px -20px rgba(0,0,0,.6); animation: kbFloat 5s ease-in-out infinite; }
.kb-alert__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #E8EFFF; color: #1742C0; }
.kb-alert__ic svg { width: 20px; height: 20px; }
.kb-alert strong { display: block; font-family: var(--f-label); font-size: 14px; }
.kb-alert small { font-size: 12.5px; color: var(--text-3); }
.kb-chip { position: absolute; left: 36%; bottom: 6%; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #5CB8FF; color: #0A1330; font-family: var(--f-label); font-size: 13.5px; font-weight: 700; box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); animation: kbFloat 6s ease-in-out -2s infinite; }
.kb-chip svg { width: 16px; height: 16px; stroke-width: 2.6; }
@keyframes kbFloat { 50% { transform: translateY(-8px); } }
.kb-tape { overflow: hidden; padding: 15px 0; border-top: 1px solid var(--line-dark); background: rgba(255,255,255,.03); }
.kb-tape__t { display: flex; gap: 44px; width: max-content; animation: acMarq 50s linear infinite; }
.kb-tape span { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 13px; color: var(--on-dark-2); white-space: nowrap; }
.kb-tape b { font-weight: 500; color: #fff; }
.kb-tape i { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34,197,94,.16); }
.kb-tape .is-warn i { background: #F59E0B; box-shadow: 0 0 0 4px rgba(245,158,11,.16); }
.kb-tape .is-info i { background: var(--teal); box-shadow: 0 0 0 4px rgba(94,242,225,.16); }
.kb-reveal { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-dark-2); }
.kb-reveal a { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) 48px; gap: 24px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line-dark-2); color: var(--on-dark); transition: padding .5s var(--ease-out); }
.kb-reveal a:hover, .kb-reveal a:focus-visible { padding-left: 18px; }
.kb-reveal__tag { justify-self: start; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(92, 184, 255,.4); color: #E9B949; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.kb-reveal strong { font-family: var(--f-display); font-size: clamp(24px, 3vw, 42px); font-weight: 600; line-height: 1.05; letter-spacing: -.04em; color: #fff; transition: color .3s; }
.kb-reveal a:hover strong, .kb-reveal a:focus-visible strong { color: #5CB8FF; }
.kb-reveal__d { font-size: 15.5px; line-height: 1.6; color: var(--on-dark-2); }
.kb-reveal__go { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-dark-2); transition: background .3s, border-color .3s, color .3s, transform .5s var(--ease-out); }
.kb-reveal__go svg { width: 18px; height: 18px; stroke-width: 1.9; }
.kb-reveal a:hover .kb-reveal__go { background: #5CB8FF; border-color: #5CB8FF; color: #0A1330; transform: rotate(-45deg); }
.kb-reveal__thumb { display: none; }
.kb-reveal__float { position: fixed; left: 0; top: 0; z-index: 40; width: 300px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.8) rotate(-4deg); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); transition: opacity .3s, transform .45s var(--ease-out); }
.kb-reveal__float.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); }
.kb-stage { position: relative; overflow: hidden; isolation: isolate; padding: clamp(80px, 9vw, 130px) 0; background: #0A1330; color: #fff; }
.kb-stage__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1s var(--ease), transform 7s linear; }
.kb-stage__bg.is-on { opacity: 1; transform: scale(1); }
.kb-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,19,48,.95) 0%, rgba(10,19,48,.8) 45%, rgba(10,19,48,.5) 100%); }
.kb-stage .x-h2 { max-width: 14ch; margin-top: 18px; color: #fff; }
.kb-stage__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(36px, 4.5vw, 56px); }
.kb-stage__tabs { display: grid; }
.kb-stage__tabs button { position: relative; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.14); text-align: left; font-family: var(--f-display); font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -.02em; color: rgba(238,241,255,.5); transition: color .3s, padding .4s var(--ease-out); }
.kb-stage__tabs button:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.kb-stage__tabs button:hover { color: #fff; }
.kb-stage__tabs button[aria-selected="true"] { padding-left: 14px; color: #fff; }
.kb-stage__tabs i { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #5CB8FF; transform: scaleX(0); transform-origin: 0 50%; }
.kb-stage:not(.is-run) [aria-selected="true"] i { transform: none; }
.kb-stage.is-run [aria-selected="true"] i { animation: kaFill var(--dur, 7s) linear forwards; }
.kb-stage__panel { padding: clamp(26px, 3.5vw, 44px); border-radius: 26px; background: rgba(10,19,48,.55); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); --k-tick: #5CB8FF; }
.kb-stage__panel.is-in { animation: acPanel .6s var(--ease-out) both; }
.kb-stage__panel .ac-ic { background: rgba(92, 184, 255,.14); color: #5CB8FF; }
.kb-stage__panel h3 { margin-top: 20px; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.035em; color: #fff; }
.kb-stage__panel > p { margin-top: 12px; font-size: 16.5px; line-height: 1.65; color: rgba(238,241,255,.82); }
.kb-stage__panel .k-ticks { grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 22px 0 28px; color: #fff; }
.kb-switch { max-width: 980px; margin: 0 auto; }
.kb-switch__bar { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 34px; font-family: var(--f-label); font-size: 15px; font-weight: 600; color: var(--text-3); }
.kb-switch__bar span { transition: color .3s; }
.kb-switch:not(.is-on) .kb-switch__bar span:first-child, .kb-switch.is-on .kb-switch__bar span:last-child { color: var(--text); }
.kb-switch__btn { position: relative; width: 72px; height: 38px; border-radius: 999px; background: #D7DAE3; transition: background .4s; }
.kb-switch.is-on .kb-switch__btn { background: #0A1330; }
.kb-switch__btn i { position: absolute; left: 4px; top: 4px; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.2); transition: transform .5s var(--ease-out), background .4s; }
.kb-switch.is-on .kb-switch__btn i { transform: translateX(34px); background: #5CB8FF; }
.kb-switch__rows { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.kb-switch__rows li { display: grid; grid-template-columns: minmax(0, .45fr) minmax(0, 1.55fr); gap: 20px; align-items: center; padding: 20px 24px; border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: background .5s, border-color .5s; transition-delay: calc(var(--k) * 90ms); }
.kb-switch.is-on .kb-switch__rows li { background: #0A1330; border-color: #0A1330; }
.kb-switch__rows strong { font-family: var(--f-display); font-size: 17px; letter-spacing: -.02em; transition: color .5s; transition-delay: inherit; }
.kb-switch.is-on .kb-switch__rows strong { color: #5CB8FF; }
.kb-switch__cell { display: grid; }
.kb-switch__cell p { grid-area: 1 / 1; font-size: 15.5px; line-height: 1.55; transition: opacity .4s, transform .5s var(--ease-out); transition-delay: inherit; }
.kb-switch__off { color: var(--text-2); }
.kb-switch__on { color: #fff; opacity: 0; transform: translateY(10px); }
.kb-switch.is-on .kb-switch__off { opacity: 0; transform: translateY(-10px); }
.kb-switch.is-on .kb-switch__on { opacity: 1; transform: none; }
.kb-tl { display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 80vw); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; margin: 0; padding: 6px max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) 10px; scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); cursor: grab; }
.kb-tl::-webkit-scrollbar { display: none; }
.kb-tl li { scroll-snap-align: start; }
.kb-tl figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 20px; }
.kb-tl img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform .8s var(--ease-out); }
.kb-tl li:hover img { transform: scale(1.06); }
.kb-tl__dot { position: relative; display: block; height: 2px; margin: 26px 0 22px; background: var(--line-dark-2); }
.kb-tl li:not(:last-child) .kb-tl__dot { margin-right: -22px; }
.kb-tl__dot::before { content: ""; position: absolute; left: 0; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: #5CB8FF; box-shadow: 0 0 0 6px rgba(92, 184, 255,.18); }
.kb-tl h3 { font-size: 20px; letter-spacing: -.025em; color: #fff; }
.kb-tl p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--on-dark-2); }
.kb-navy .k-progress { background: var(--line-dark-2); }
.kb-seals { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.kb-seals li { position: relative; display: grid; justify-items: center; align-content: start; text-align: center; }
.kb-seals svg { width: 100%; max-width: 150px; aspect-ratio: 1; animation: kaSpin 24s linear infinite; }
.kb-seals text { font-family: var(--f-mono); font-size: 8.2px; letter-spacing: 1.8px; fill: var(--text-3); }
.kb-seals b { position: absolute; top: 0; left: 50%; z-index: 0; display: grid; place-items: center; width: min(100%, 150px); aspect-ratio: 1; transform: translateX(-50%); font-family: var(--f-display); font-size: 16px; letter-spacing: -.02em; color: #fff; }
.kb-seals b::before { content: ""; position: absolute; inset: 21%; z-index: -1; border-radius: 50%; background: #0A1330; transition: background .3s, transform .5s var(--ease-out); }
.kb-seals li:hover b { color: #0A1330; }
.kb-seals li:hover b::before { background: #5CB8FF; transform: scale(1.08); }
.kb-seals span { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }

/* ---------- AI for Healthcare ---------- */
.kh-soft { background: #F2F7FB; }
.acp--health .ac-ic { background: #E4F0FB; color: #1E6FB8; }
.kh-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + clamp(48px, 6vw, 90px)) 0 clamp(56px, 7vw, 96px); background: radial-gradient(800px 500px at 85% 20%, rgba(56,163,232,.16), transparent 70%), #F7FBFE; }
.kh-hero__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.kh-hero .x-k { margin-bottom: 20px; color: #1E6FB8; }
.kh-hero h1 em { color: #1E88D6; }
.kh-visual { position: relative; padding: 20px 0 30px 40px; }
.kh-visual__img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 220px 28px 28px 28px; box-shadow: 0 50px 90px -50px rgba(20,60,100,.5); }
.kh-float { position: absolute; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.93); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 24px 50px -24px rgba(20,60,100,.45); font-family: var(--f-label); animation: kbFloat 6s ease-in-out infinite; }
.kh-float--a { left: 0; top: 34%; flex-direction: column; align-items: flex-start; gap: 6px; width: 230px; }
.kh-float--b { right: -10px; bottom: 6%; animation-delay: -2s; }
.kh-float--c { right: 8%; top: 4%; font-size: 13px; font-weight: 600; animation-delay: -4s; }
.kh-float--c svg { width: 18px; height: 18px; color: #1E88D6; }
.kh-float--a small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.kh-float strong { font-size: 14.5px; }
.kh-float--b small { display: block; font-size: 12.5px; color: var(--text-3); }
.kh-ecg { width: 100%; height: 40px; fill: none; stroke: #E5484D; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 300; animation: khEcg 2.6s linear infinite; }
@keyframes khEcg { from { stroke-dashoffset: 300; } to { stroke-dashoffset: -300; } }
.kh-pill { padding: 4px 10px; border-radius: 999px; background: #FDECEC; color: #C2262E; font-size: 12px; font-weight: 700; }
.kh-tick { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #16A34A; color: #fff; }
.kh-tick svg { width: 18px; height: 18px; stroke-width: 2.6; }
.acp--health .ac-trust { background: #F7FBFE; }
.kh-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 230px; gap: 14px; }
.kh-mosaic__t--0 { grid-column: span 2; grid-row: span 2; }
.kh-mosaic__t--3, .kh-mosaic__t--4, .kh-mosaic__t--5 { grid-column: span 2; }
.kh-mosaic__t { position: relative; isolation: isolate; overflow: hidden; margin: 0; border-radius: 24px; outline: none; }
.kh-mosaic__t img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.kh-mosaic__t::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(6,30,50,.9)); }
.kh-mosaic__t:hover img, .kh-mosaic__t:focus-visible img { transform: scale(1.07); }
.kh-mosaic__t:focus-visible { box-shadow: 0 0 0 3px #1E88D6; }
.kh-mosaic figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; color: #fff; }
.kh-mosaic figcaption span { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.kh-mosaic strong { display: block; margin-top: 10px; font-family: var(--f-display); font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -.025em; }
.kh-mosaic p { max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.86); transition: max-height .5s var(--ease-out), opacity .4s, margin .4s; }
.kh-mosaic__t:hover p, .kh-mosaic__t:focus-visible p, .kh-mosaic__t--0 p { max-height: 90px; margin-top: 8px; opacity: 1; }
.kh-acc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.kh-acc__item { border-bottom: 1px solid var(--line); }
.kh-acc__item:first-child { border-top: 1px solid var(--line); }
.kh-acc__item > button { display: grid; grid-template-columns: 48px minmax(0, 1fr) 28px; gap: 16px; align-items: center; width: 100%; padding: 20px 0; text-align: left; }
.kh-acc__item strong { font-family: var(--f-display); font-size: clamp(18px, 1.6vw, 21px); font-weight: 600; letter-spacing: -.02em; transition: color .3s; }
.kh-acc__item > button:hover strong, .kh-acc__item > button[aria-selected="true"] strong { color: #1E6FB8; }
.kh-acc__pm { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform .4s var(--ease-out), background .3s, border-color .3s, color .3s; }
.kh-acc__pm::before, .kh-acc__pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; background: currentColor; }
.kh-acc__pm::after { transform: rotate(90deg); }
[aria-selected="true"] .kh-acc__pm { transform: rotate(45deg); background: #1E6FB8; border-color: #1E6FB8; color: #fff; }
.kh-acc__panel { padding: 0 0 26px 64px; --k-tick: #1E88D6; }
.kh-acc__panel.is-in { animation: acPanel .5s var(--ease-out) both; }
.kh-acc__panel > p { font-size: 16px; line-height: 1.6; color: var(--text-2); }
.kh-acc__panel .k-ticks { margin: 16px 0 20px; }
.kh-acc__media { position: sticky; top: calc(var(--header-h) + 40px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 28px 28px 160px 28px; background: #DCEAF6; }
.kh-acc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease), transform 1.2s var(--ease-out); }
.kh-acc__media img.is-on { opacity: 1; transform: none; }
.kh-journey { position: relative; height: 350px; }
.kh-journey__path { position: absolute; left: 0; top: 0; width: 100%; height: 220px; overflow: visible; }
.kh-journey__path path { fill: none; stroke: #1E88D6; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3000; stroke-dashoffset: 3000; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 2.6s var(--ease); }
.kh-journey.is-in path { stroke-dashoffset: 0; }
.kh-journey ol { list-style: none; margin: 0; padding: 0; }
.kh-journey li { position: absolute; left: var(--x); top: var(--y); width: 180px; transform: translate(-50%, -28px); text-align: center; }
.kh-journey__dot { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; background: #fff; border: 2px solid #1E88D6; color: #1E6FB8; box-shadow: 0 0 0 8px rgba(30,136,214,.1); transform: scale(0); transition: transform .6s var(--ease-out); transition-delay: calc(.3s + var(--k) * .35s); }
.kh-journey__dot svg { width: 24px; height: 24px; }
.kh-journey.is-in .kh-journey__dot { transform: none; }
.kh-journey h3 { margin-top: 14px; font-size: 17.5px; letter-spacing: -.02em; }
.kh-journey p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.kh-std { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.kh-std .x-h2 { margin-top: 18px; }
.kh-std .x-lead { margin-top: 22px; }
.kh-std ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.kh-std li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: border-color .3s, transform .5s var(--ease-out); }
.kh-std li:hover { border-color: rgba(30,136,214,.4); transform: translateY(-3px); }
.kh-std strong { font-family: var(--f-display); font-size: 18px; letter-spacing: -.02em; }
.kh-std p { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.kh-banner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border-radius: var(--r-xl); background: #0B2A45; color: #fff; }
.kh-banner img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.kh-banner > div { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; padding: clamp(32px, 4.5vw, 60px); }
.kh-banner h2 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.05; letter-spacing: -.04em; color: #fff; }
.kh-banner h2 em { color: #7CC4F5; }
.kh-banner p { max-width: 460px; font-size: 16.5px; line-height: 1.6; color: rgba(238,241,255,.82); }

/* ---------- AI for Logistics ---------- */
.kl-asphalt { background: #0E1116; }
.acp--logi .ac-trust { background: #0E1116; }
.kl-asphalt .x-h2 em, .kl-hero h1 em { color: #5CB8FF; }
.kl-asphalt .x-k, .kl-hero .x-k { color: #5CB8FF; }
.kl-hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + clamp(48px, 6vw, 90px)) 0 clamp(56px, 7vw, 96px); background: #0E1116; color: #fff; }
.kl-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .5; animation: acZoom 18s var(--ease) both; }
.kl-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,17,22,.96), rgba(14,17,22,.72) 50%, rgba(14,17,22,.5)); }
.kl-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.kl-hero .x-k { margin-bottom: 20px; }
.kl-hero h1 { color: #fff; }
.kl-map { position: relative; }
.kl-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.kl-route { fill: none; stroke: rgba(92, 184, 255,.4); stroke-width: 2; stroke-dasharray: 6 8; animation: kiDash 1.4s linear infinite; }
.kl-truck { fill: #5CB8FF; filter: drop-shadow(0 0 6px rgba(92, 184, 255,.9)); }
.kl-city circle { fill: #0E1116; stroke: #5CB8FF; stroke-width: 2.5; }
.kl-city .halo { fill: rgba(92, 184, 255,.2); stroke: none; transform-box: fill-box; transform-origin: center; animation: kiRing 2.8s ease-out infinite; }
.kl-city text { fill: #fff; font-family: var(--f-label); font-size: 14px; font-weight: 600; paint-order: stroke; stroke: rgba(14,17,22,.8); stroke-width: 4px; }
.kl-eta { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.96); color: var(--text); font-family: var(--f-label); box-shadow: 0 24px 50px -20px rgba(0,0,0,.6); animation: kbFloat 5s ease-in-out infinite; }
.kl-eta i { width: 10px; height: 10px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 5px rgba(34,197,94,.2); }
.kl-eta strong { display: block; font-size: 13.5px; }
.kl-eta small { font-size: 12px; color: var(--text-3); }
.kl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kl-cards article { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 22px; outline: none; }
.kl-cards img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform 1s var(--ease-out), filter .6s; }
.kl-cards article::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,17,22,0) 30%, rgba(14,17,22,.94)); }
.kl-cards article > div { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; transform: translateY(calc(100% - 92px)); transition: transform .6s var(--ease-out); }
.kl-cards h3 { font-size: 22px; letter-spacing: -.025em; color: #fff; }
.kl-cards h3::before { content: ""; display: block; width: 32px; height: 3px; margin-bottom: 14px; background: #5CB8FF; }
.kl-cards p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.86); opacity: 0; transition: opacity .4s .1s; }
.kl-cards article:hover > div, .kl-cards article:focus-visible > div { transform: none; }
.kl-cards article:hover p, .kl-cards article:focus-visible p { opacity: 1; }
.kl-cards article:hover img, .kl-cards article:focus-visible img { transform: scale(1.08); filter: saturate(1.05); }
.kl-cards article:focus-visible { box-shadow: 0 0 0 3px #5CB8FF; }
.kl-track__bar { position: relative; height: 100px; margin: 0 clamp(36px, 5vw, 70px) 26px; }
.kl-track__line { position: absolute; left: 0; right: 0; top: 46px; height: 6px; overflow: hidden; border-radius: 6px; background: #E6E8EE; }
.kl-track__line i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #5CB8FF, #2F6BFF); transform: scaleX(calc(var(--i, 0) / (var(--n) - 1))); transform-origin: 0 50%; transition: transform .9s var(--ease-out); }
.kl-track__truck { position: absolute; top: 0; left: calc(var(--i, 0) * 100% / (var(--n) - 1)); z-index: 2; display: grid; place-items: center; width: 46px; height: 34px; margin-left: -23px; border-radius: 10px; background: #0E1116; color: #5CB8FF; box-shadow: 0 12px 24px -12px rgba(0,0,0,.6); transition: left .9s var(--ease-out); }
.kl-track__truck svg { width: 22px; height: 22px; }
.kl-track__truck::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-top-color: #0E1116; border-bottom: 0; }
.kl-track__bar [role="tab"] { position: absolute; top: 38px; display: flex; flex-direction: column; align-items: center; gap: 12px; transform: translateX(-50%); font-family: var(--f-label); font-size: 13.5px; font-weight: 600; white-space: nowrap; color: var(--text-3); transition: color .3s; }
.kl-track__bar [role="tab"] i { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #D4D8E1; transition: border-color .4s, background .4s; }
.kl-track__bar [role="tab"]:hover, .kl-track__bar [aria-selected="true"] { color: var(--text); }
.kl-track__bar [aria-selected="true"] i { background: #5CB8FF; border-color: #2F6BFF; }
.kl-track__panel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(16px, 2vw, 22px); border-radius: 30px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 80px -60px rgba(10,12,24,.5); --k-tick: #2F6BFF; }
.kl-track__panel.is-in { animation: acPanel .6s var(--ease-out) both; }
.kl-track__panel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; }
.kl-track__panel > div { padding-right: clamp(8px, 2vw, 24px); }
.acp--logi .ac-ic { background: #E8EFFF; color: #1742C0; }
.kl-track__panel h3 { margin-top: 18px; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.035em; }
.kl-track__panel p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.kl-track__panel .k-ticks { margin: 20px 0 26px; }
.kl-tower { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.kl-tower .x-h2 { margin-top: 18px; }
.kl-tower .x-lead { margin-top: 22px; }
.kl-tower .btn { margin-top: 30px; }
.kl-dash { overflow: hidden; border-radius: 22px; background: #12161D; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 50px 100px -50px rgba(92, 184, 255,.35); }
.kl-dash__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); font-family: var(--f-mono); font-size: 12.5px; color: var(--on-dark-3); }
.kl-dash__bar i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.kl-dash__bar i:nth-child(2) { background: #FEBC2E; }
.kl-dash__bar i:nth-child(3) { background: #28C840; }
.kl-dash__bar span { margin-left: 10px; }
.kl-dash__bar b { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 500; color: #22C55E; }
.kl-dash__bar b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22C55E; animation: klBlink 1.4s ease-in-out infinite; }
@keyframes klBlink { 50% { opacity: .3; } }
.kl-dash__body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1px; background: rgba(255,255,255,.06); }
.kl-dash__body > div { padding: 20px; background: #12161D; }
.kl-dash small { display: block; margin-bottom: 14px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-3); }
.kl-dash__lanes div { margin-bottom: 16px; }
.kl-dash__lanes span { display: block; margin-bottom: 7px; font-family: var(--f-label); font-size: 13px; color: var(--on-dark); }
.kl-dash__lanes i { display: block; width: var(--w); height: 8px; border-radius: 6px; background: linear-gradient(90deg, #5CB8FF, #2F6BFF); transform-origin: 0 50%; animation: klGrow 3s var(--ease-out) infinite alternate; }
@keyframes klGrow { from { transform: scaleX(.7); } }
.kl-dash__feed { height: 280px; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.kl-dash__feed ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; animation: klFeed 18s linear infinite; }
@keyframes klFeed { to { transform: translateY(calc(-50% - 5px)); } }
.kl-dash__feed li { display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border-left: 3px solid #22C55E; font-family: var(--f-label); font-size: 13px; color: var(--on-dark-2); }
.kl-dash__feed .is-warn { border-left-color: #F59E0B; }
.kl-dash__feed .is-info { border-left-color: var(--teal); }
.kl-dash__feed b { font-size: 13.5px; color: #fff; }
.kl-dash__feed em { font-style: normal; font-weight: 600; color: #5CB8FF; }
.kl-road { position: relative; max-width: 1000px; margin: 0 auto; padding: 0; list-style: none; }
.kl-road::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 64px; margin-left: -32px; border-radius: 32px; background: #1A1F28; }
.kl-road::after { content: ""; position: absolute; left: 50%; top: 20px; bottom: 20px; width: 4px; margin-left: -2px; background: repeating-linear-gradient(#5CB8FF 0 22px, transparent 22px 44px); animation: klLane 1.2s linear infinite; }
@keyframes klLane { to { background-position: 0 44px; } }
.kl-road li { position: relative; z-index: 1; width: 50%; padding: 0 76px 0 0; }
.kl-road li + li { margin-top: -26px; }
.kl-road li:nth-child(even) { margin-left: 50%; padding: 0 0 0 76px; }
.kl-road__sign { position: relative; padding: 22px 24px; border-radius: 14px; background: #5CB8FF; color: #1A1206; box-shadow: 0 20px 40px -24px rgba(23, 66, 192,.6); }
.kl-road__sign::after { content: ""; position: absolute; top: 50%; right: -44px; width: 44px; height: 4px; margin-top: -2px; background: #123A9C; }
.kl-road li:nth-child(even) .kl-road__sign::after { right: auto; left: -44px; }
.kl-road h3 { font-size: 19px; letter-spacing: -.02em; }
.kl-road p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: rgba(26,18,6,.8); }

/* ---------- AI for Retail ---------- */
.kr-soft { background: #F5F7FC; }
.acp--retail .x-h2 em, .acp--retail .k-faqc__more a { color: #2F6BFF; }
.acp--retail .k-sec .x-k { color: #1F55E6; }
.acp--retail .ac-band { background: linear-gradient(115deg, #0D1A4A 0%, #1F55E6 55%, #7CC0FF 100%); }
.acp--health .k-sec .x-h2 em { color: #1E88D6; }
.acp--health .k-sec .x-k { color: #1E6FB8; }
.acp--logi .k-sec:not(.k-dark) .x-h2 em { color: #2F6BFF; }
.acp--logi .k-sec:not(.k-dark) .x-k { color: #1742C0; }
.acp .x-dark .x-h2 em { color: var(--teal); }
.acp--retail .ac-ic { background: #E8EFFF; color: #1F55E6; }
.kr-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + clamp(32px, 4vw, 56px)) 0 0; background: radial-gradient(700px 500px at 0% 10%, rgba(47, 107, 255,.13), transparent 70%), #F7F9FC; }
.kr-hero__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.kr-hero__grid > div:first-child { padding-bottom: clamp(48px, 6vw, 80px); }
.kr-hero .x-k { margin-bottom: 20px; color: #1F55E6; }
.kr-hero h1 em { color: #2F6BFF; }
.acp--retail .ac-trust { background: #F7F9FC; }
.kr-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; height: clamp(520px, 52vw, 680px); overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.kr-col > div { display: grid; gap: 14px; animation: krUp 32s linear infinite; }
.kr-col--1 > div { animation-direction: reverse; animation-duration: 38s; }
.kr-col--2 > div { animation-duration: 27s; }
.kr-cols:hover .kr-col > div { animation-play-state: paused; }
@keyframes krUp { to { transform: translateY(calc(-50% - 7px)); } }
.kr-col img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 20px; }
.kr-hot { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr); gap: 24px; align-items: start; }
.kr-hot__img { position: relative; }
.kr-hot__img > img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 28px; }
.kr-hot__pt { position: absolute; z-index: 2; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(255,255,255,.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .3s, transform .3s; }
.kr-hot__pt:hover { transform: scale(1.15); }
.kr-hot__pt i { position: absolute; inset: 8px; border-radius: 50%; background: #fff; animation: krPing 2s ease-out infinite; }
.kr-hot__pt.is-on { background: rgba(47, 107, 255,.5); }
.kr-hot__pt.is-on i { background: #2F6BFF; }
@keyframes krPing { from { box-shadow: 0 0 0 0 rgba(255,255,255,.75); } to { box-shadow: 0 0 0 18px rgba(255,255,255,0); } }
.kr-hot__card { position: absolute; z-index: 3; width: 280px; margin: 28px 0 0 -30px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 30px 60px -30px rgba(8, 16, 48,.55); }
.kr-hot__card.is-l { margin-left: -250px; }
.kr-hot__card.is-up { translate: 0 calc(-100% - 56px); }
.kr-hot__card.is-in { animation: acPanel .45s var(--ease-out) both; }
.kr-hot__card strong { display: block; margin-top: 12px; font-family: var(--f-display); font-size: 18px; letter-spacing: -.02em; }
.kr-hot__card p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.kr-hot__list { display: grid; gap: 8px; }
.kr-hot__list button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; text-align: left; font-family: var(--f-label); font-size: 14.5px; font-weight: 600; color: var(--text-2); transition: background .3s, border-color .3s, color .3s; }
.kr-hot__list button:hover { color: var(--text); }
.kr-hot__list button[aria-selected="true"] { background: #fff; border-color: rgba(47, 107, 255,.35); color: var(--text); box-shadow: 0 16px 32px -24px rgba(8, 16, 48,.5); }
.kr-hot__list .ac-ic { width: 38px; height: 38px; border-radius: 11px; }
.kr-hot__list .ac-ic svg { width: 18px; height: 18px; }
.kr-deck { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.kr-deck__list { display: grid; }
.kr-deck__list button { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); text-align: left; font-family: var(--f-display); font-size: clamp(18px, 1.7vw, 23px); font-weight: 600; letter-spacing: -.02em; color: var(--text-3); transition: color .3s; }
.kr-deck__list button::before { content: ""; flex: none; width: 0; height: 3px; border-radius: 3px; background: #2F6BFF; transition: width .4s var(--ease-out); }
.kr-deck__list button:hover, .kr-deck__list [aria-current="true"] { color: var(--text); }
.kr-deck__list [aria-current="true"]::before { width: 26px; }
.kr-deck__nav { margin-top: 24px; }
.kr-deck__stack { position: relative; height: 600px; margin: 56px 80px 0 0; }
.kr-card { position: absolute; inset: 0; display: grid; grid-template-rows: 44% minmax(0, 1fr); overflow: hidden; border-radius: 28px; background: #fff; border: 1px solid rgba(8, 16, 48,.08); box-shadow: 0 40px 80px -50px rgba(8, 16, 48,.45); transform: translate(calc(var(--p) * 24px), calc(var(--p) * -16px)) scale(calc(1 - var(--p) * .05)); z-index: calc(20 - var(--p)); opacity: clamp(0, calc(1.25 - var(--p) * .3), 1); transition: transform .7s var(--ease-out), opacity .5s; --k-tick: #2F6BFF; }
.kr-card img { width: 100%; height: 100%; object-fit: cover; }
.kr-card > div { padding: 22px 28px; overflow: hidden; }
.kr-card h3 { margin-top: 12px; font-size: 24px; letter-spacing: -.03em; }
.kr-card p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.kr-card .k-ticks { grid-template-columns: 1fr 1fr; gap: 8px 20px; margin: 14px 0 18px; }
.kr-card .k-ticks li { font-size: 14px; }
.kr-words { overflow: hidden; padding: clamp(26px, 4vw, 46px) 0; background: #2F6BFF; color: #fff; }
.kr-words__t { display: flex; width: max-content; animation: acMarq 34s linear infinite; }
.kr-words span { display: inline-flex; align-items: center; font-family: var(--f-display); font-size: clamp(44px, 7vw, 110px); font-weight: 700; line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.kr-words span::after { content: ""; display: inline-block; width: .3em; height: .3em; margin: 0 .55em; border-radius: 50%; background: #BFD3FF; }
.kr-words span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px #fff; }
.kr-polar { display: grid; grid-auto-flow: column; grid-auto-columns: min(300px, 76vw); gap: 34px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; margin: 0; padding: 22px max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) 24px; scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); cursor: grab; }
.kr-polar::-webkit-scrollbar { display: none; }
.kr-polar li { scroll-snap-align: start; transform: rotate(var(--r)); transition: transform .5s var(--ease-out); }
.kr-polar li:hover { transform: rotate(0) translateY(-6px); }
.kr-polar figure { margin: 0; padding: 12px 12px 18px; border-radius: 4px; background: #fff; box-shadow: 0 24px 50px -28px rgba(8, 16, 48,.45); }
.kr-polar img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; pointer-events: none; }
.kr-polar figcaption { margin-top: 14px; font-family: var(--f-serif); font-size: 25px; line-height: 1.1; }
.kr-polar p { margin-top: 16px; padding: 0 6px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.kr-soft .k-progress { background: rgba(8, 16, 48,.12); }

@media (max-width: 1080px) {
  .kb-hero__grid, .kh-hero__grid, .kl-hero__grid, .kr-hero__grid, .kb-stage__grid, .kh-acc, .kh-std, .kl-tower, .kr-hot, .kr-deck, .kl-track__panel { grid-template-columns: minmax(0, 1fr); }
  .kb-reveal a { grid-template-columns: minmax(0, 1fr) 44px; gap: 10px 18px; }
  .kb-reveal__tag { grid-column: 1; }
  .kb-reveal strong, .kb-reveal__d { grid-column: 1; }
  .kb-reveal__go { grid-column: 2; grid-row: 1 / span 3; }
  .kb-reveal__thumb { display: block; grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; }
  .kb-reveal__float { display: none; }
  .kb-seals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kh-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-mosaic__t--0, .kh-mosaic__t--3, .kh-mosaic__t--4, .kh-mosaic__t--5 { grid-column: span 2; grid-row: auto; }
  .kh-acc__media { display: none; }
  .kh-journey { height: auto; }
  .kh-journey__path { display: none; }
  .kh-journey ol { display: grid; gap: 22px; }
  .kh-journey li { position: static; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; width: auto; transform: none; text-align: left; }
  .kh-journey__dot { grid-row: span 2; margin: 0; transform: none; }
  .kh-journey h3 { margin-top: 4px; }
  .kh-banner { grid-template-columns: minmax(0, 1fr); }
  .kh-banner img { min-height: 260px; }
  .kl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kr-cols { height: 460px; }
  .kr-hot__card { position: static; width: auto; margin: 14px 0 0; translate: none !important; }
  .kr-deck__stack { margin-right: 60px; }
  .kl-track__bar { overflow-x: auto; }
}
@media (max-width: 680px) {
  .kb-seals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-stage__panel .k-ticks, .kr-card .k-ticks, .kh-std ul, .kl-cards { grid-template-columns: minmax(0, 1fr); }
  .kb-switch__rows li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kh-mosaic { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 260px; }
  .kh-mosaic__t--0, .kh-mosaic__t--3, .kh-mosaic__t--4, .kh-mosaic__t--5 { grid-column: auto; }
  .kh-mosaic p { max-height: 90px; margin-top: 8px; opacity: 1; }
  .kh-float--a { display: none; }
  .kh-visual { padding-left: 0; }
  .kl-road::before { left: 26px; }
  .kl-road::after { left: 26px; }
  .kl-road li, .kl-road li:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 0 76px; }
  .kl-road li + li { margin-top: 16px; }
  .kl-road__sign::after, .kl-road li:nth-child(even) .kl-road__sign::after { right: auto; left: -18px; width: 18px; }
  .kl-track__bar { margin: 0 0 20px; height: 90px; }
  .kl-track__bar [role="tab"] span { display: none; }
  .kl-dash__body { grid-template-columns: minmax(0, 1fr); }
  .kr-cols { height: 360px; }
  .kr-deck__stack { height: 640px; margin: 40px 40px 0 0; }
  .kr-card { transform: translate(calc(var(--p) * 12px), calc(var(--p) * -10px)) scale(calc(1 - var(--p) * .04)); }
}
@media (hover: none) {
  .kh-mosaic p { max-height: 90px; margin-top: 8px; opacity: 1; }
  .kl-cards article > div { transform: none; }
  .kl-cards p { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-alert, .kb-chip, .kb-tape__t, .kb-seals svg, .kh-float, .kh-ecg, .kl-route, .kl-city .halo, .kl-eta, .kl-dash__lanes i, .kl-dash__feed ul, .kl-road::after, .kr-col > div, .kr-hot__pt i, .kr-words__t, .kl-hero__bg { animation: none !important; }
  .kl-truck { display: none; }
  .kh-journey__path path { transition: none; stroke-dashoffset: 0; }
  .kh-journey__dot { transform: none; transition: none; }
}
/* ================= Solution pages: eight Solutions-menu pages + the "Solutions" hub =================
   Built on the industry page base (.ind: in-sec, in-ic, proof blocks). Each solution has its own accent pair, hero and
   signature components (prefix sl-). */
.acp--sol-cloud { --ia: #2F6BFF; --ia2: #5CB8FF; }
.acp--sol-cyber { --ia: #2F6BFF; --ia2: #5CB8FF; }
.acp--sol-data { --ia: #2F6BFF; --ia2: #5CB8FF; }
.acp--sol-digital { --ia: #2F6BFF; --ia2: #5CB8FF; }
.acp--sol-ecom { --ia: #2F6BFF; --ia2: #5CB8FF; }
.acp--sol-ent { --ia: #2F6BFF; --ia2: #5CB8FF; }
.acp--sol-legacy { --ia: #2F6BFF; --ia2: #5CB8FF; }
.acp--sol-flow { --ia: #2F6BFF; --ia2: #5CB8FF; }
.sol .in-sec--dark .k-ticks li { color: var(--on-dark); }
:is(.sl-mig__col--cloud, .sl-stack, .sl-plat__list, .sl-bus__row) .k-tlogo--mono { width: 30px; height: 30px; border-radius: 9px; font-size: 10.5px; }

/* Hero shell: copy on the left, a live visual on the right */
.sl-hero { padding-bottom: clamp(120px, 11vw, 160px); background: radial-gradient(900px 520px at 85% 30%, color-mix(in srgb, var(--ia) 30%, transparent), transparent 70%), var(--ink-950); }
.sl-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask: radial-gradient(ellipse at 70% 40%, #000, transparent 75%); mask: radial-gradient(ellipse at 70% 40%, #000, transparent 75%); pointer-events: none; }
.sl-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .26; animation: inZoom 22s ease-out both; }
.sl-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.sl-hero__copy { max-width: 680px; }
.sl-hero h1 { font-size: clamp(40px, 4.6vw, 70px); }
/* Solution heroes: a full-bleed photo banner that fades into the dark "What is …?" intro below it */
.sl-banner { min-height: min(76svh, 720px); display: flex; align-items: flex-end; padding-bottom: clamp(56px, 6vw, 90px); background: var(--ink-950); }
.sl-banner__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; animation: inZoom 22s ease-out both; }
.sl-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--ink-950) 0%, rgba(5,6,13,0) 34%), linear-gradient(100deg, color-mix(in srgb, var(--ia) 30%, transparent), transparent 55%), var(--hero-shade); }
.sl-banner__copy { max-width: 780px; }
.sl-banner .in-lead { max-width: 620px; }
.sl-banner .x-crumbs { margin: 30px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); width: fit-content; }
.sl-intro { position: relative; isolation: isolate; padding: clamp(16px, 2vw, 32px) 0 clamp(130px, 12vw, 170px); background: radial-gradient(700px 420px at 15% 40%, color-mix(in srgb, var(--ia) 16%, transparent), transparent 70%), var(--ink-950); color: #fff; }
.sl-intro__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sl-intro__media { position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center; min-height: 540px; margin: 0; padding: clamp(22px, 3.4vw, 46px); border-radius: 30px; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 60px 100px -50px rgba(0,0,0,.9); }
.sl-intro__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.sl-intro__media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(5,6,13,.35), rgba(5,6,13,.78)), linear-gradient(0deg, color-mix(in srgb, var(--ia) 28%, transparent), transparent 60%); }
.sl-intro__media:hover .sl-intro__bg { transform: scale(1.05); }
.sl-intro__media--plain { overflow: visible; padding: 0; border: 0; box-shadow: none; }
.sl-intro__media--plain::before { display: none; }
.sl-intro__vis { display: grid; place-items: center; width: 100%; }
.sl-intro__vis > * { width: 100%; }
.sl-intro__vis > .sl-shop { width: auto; }
.sl-intro__vis > .sl-radar { width: min(460px, 100%); }
.sl-intro__k { padding-left: 12px; border-left: 2px solid var(--ia2); font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); }
.sl-intro .x-h2 { margin-top: 18px; color: #fff; }
.sl-intro .x-h2 em { color: var(--ia2); }
.sl-intro__p { margin-top: 22px; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; color: rgba(238,241,255,.82); }
.sl-intro__list { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.sl-intro__list li { display: flex; gap: 14px; line-height: 1.55; color: #EEF1FF; }
.sl-intro__list i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--ia2); }
.sl-intro__list i::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ia2); box-shadow: 0 0 10px var(--ia2); }
.sl-intro .in-hero__promise { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.sl-intro .btn { margin-top: 30px; }

/* Cloud: on-premises systems flowing into the cloud */
.sl-mig { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr); padding: 54px 22px 64px; border-radius: 28px; border: 1px solid rgba(255,255,255,.14); background: rgba(8,12,30,.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 60px 100px -50px rgba(0,0,0,.8); }
.sl-mig__col { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 340px; }
.sl-mig__col small { position: absolute; top: -34px; left: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); }
.sl-mig__col > span { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); font-family: var(--f-label); font-size: 13.5px; color: #fff; }
.sl-mig__col > span svg { flex: none; width: 18px; height: 18px; color: var(--on-dark-2); }
.sl-mig__col--cloud > span { height: 64px; border-color: color-mix(in srgb, var(--ia2) 45%, transparent); background: color-mix(in srgb, var(--ia) 22%, transparent); box-shadow: 0 0 30px -8px var(--ia); font-weight: 600; }
.sl-mig__col--cloud img.k-tlogo { width: 30px; height: 30px; padding: 5px; border-radius: 9px; background: #fff; }
.sl-mig__lines { width: 160px; height: 340px; overflow: visible; }
.sl-mig__lines path { fill: none; stroke: rgba(124,192,255,.28); stroke-width: 1.4; stroke-dasharray: 4 5; }
.sl-mig__lines circle { fill: var(--ia2); filter: drop-shadow(0 0 6px var(--ia2)); }
.sl-mig__foot { position: absolute; left: 22px; bottom: 20px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-dark-2); }
.sl-mig__foot svg { width: 16px; height: 16px; color: var(--ia2); }

.sl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sl-tiles article { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 30px; border-radius: 24px; border: 1px solid var(--line); background: radial-gradient(420px circle at var(--mx, -200px) var(--my, -200px), color-mix(in srgb, var(--ia) 10%, transparent), transparent 60%), #fff; transition: border-color .3s, transform .5s var(--ease-out); }
.sl-tiles article:hover { border-color: color-mix(in srgb, var(--ia) 40%, transparent); transform: translateY(-4px); }
.sl-tiles__ic { display: grid; place-items: center; width: 58px; height: 46px; margin-bottom: 8px; border-radius: 26px 26px 26px 10px; background: linear-gradient(135deg, var(--ia), var(--ia2)); color: #fff; }
.sl-tiles__ic svg { width: 22px; height: 22px; }
.sl-tiles h3 { font-size: 21px; }
.sl-tiles p { flex: 1; color: var(--text-2); font-size: 15px; }

.sl-6r { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; }
.sl-6r__list { display: grid; gap: 8px; align-content: start; }
.sl-6r__list button { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; text-align: left; transition: background .3s, color .3s, border-color .3s; }
.sl-6r__list svg { width: 20px; height: 20px; color: var(--ia); }
.sl-6r__list button[aria-selected="true"] { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.sl-6r__list button[aria-selected="true"] svg { color: var(--ia2); }
.sl-6r__panel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px; padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.sl-6r__panel.is-in { animation: slIn .6s var(--ease-out) both; }
@keyframes slIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sl-6r__big { display: block; margin-bottom: 18px; font-family: var(--f-display); font-size: clamp(44px, 5vw, 76px); font-weight: 700; letter-spacing: -.05em; line-height: .9; background: linear-gradient(120deg, var(--ia), var(--ia2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sl-6r__panel h3 { font-size: clamp(20px, 1.8vw, 25px); line-height: 1.25; }
.sl-6r__panel dl { display: grid; gap: 14px; margin: 24px 0 0; }
.sl-6r__panel dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ia); }
.sl-6r__panel dd { margin: 4px 0 0; color: var(--text-2); }
.sl-6r__meters { display: grid; gap: 18px; align-content: center; padding-left: 32px; border-left: 1px solid var(--line); }
.sl-6r__meters .btn { justify-self: start; margin-top: 10px; }
.sl-meter { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; font-size: 14px; }
.sl-meter > span { font-weight: 500; }
.sl-meter em { font-family: var(--f-mono); font-style: normal; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.sl-meter i { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.sl-meter b { height: 8px; border-radius: 4px; background: var(--paper-2); }
.sl-meter i b:nth-child(-n+1) { background: var(--ia); }
.sl-meter i[style*="--v:2"] b:nth-child(-n+2), .sl-meter i[style*="--v:3"] b { background: var(--ia); }

.sl-waves { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.sl-waves__line { position: absolute; top: 31px; left: 32px; right: 32px; height: 3px; border-radius: 3px; background: var(--paper-2); }
.sl-waves__line i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ia), var(--ia2)); transform: scaleX(0); transform-origin: 0 50%; }
.sl-waves li { position: relative; }
.sl-waves__dot { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 20px; border-radius: 50%; border: 2px solid var(--ia); background: #fff; color: var(--ia); box-shadow: 0 0 0 8px #fff; }
.sl-waves__dot svg { width: 24px; height: 24px; }
.sl-waves small { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ia); }
.sl-waves h3 { margin: 6px 0 8px; font-size: 21px; }
.sl-waves p { font-size: 14.5px; color: var(--text-2); }

.sl-prov { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sl-prov .x-head { display: block; margin-bottom: 18px; }
.sl-prov__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-top: 28px; border-radius: 24px; }
.sl-prov__tabs { padding: 10px; border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.sl-prov__tabs [role="tablist"] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; border-radius: 20px; background: var(--paper-2); }
.sl-prov__tabs [role="tab"] { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 15px; font-family: var(--f-label); font-weight: 600; font-size: 15px; transition: background .3s, box-shadow .3s; }
.sl-prov__tabs [role="tab"][aria-selected="true"] { background: #fff; box-shadow: 0 6px 16px -8px rgba(10,12,24,.3); }
.sl-prov__tabs [role="tabpanel"] { padding: 28px 26px 22px; }
.sl-prov__tabs [role="tabpanel"] > p { margin-bottom: 18px; font-family: var(--f-display); font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.sl-prov__tabs .k-ticks { --k-tick: var(--ia); }

/* Shared outcome row and photo band */
.sl-outs__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: 26px; background: var(--line); border: 1px solid var(--line); }
.sl-outs__row article { padding: 30px 28px; background: #fff; }
.sl-outs__row .in-ic { margin-bottom: 22px; background: linear-gradient(135deg, var(--ia), var(--ia2)); color: #fff; }
.sl-outs__row h3 { margin-bottom: 8px; font-size: 21px; }
.sl-outs__row p { font-size: 15px; color: var(--text-2); }
.sl-band { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: clamp(32px, 5vw, 64px); border-radius: 32px; color: #fff; }
.sl-band > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.sl-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(5,6,13,.92) 25%, color-mix(in srgb, var(--ia) 60%, rgba(5,6,13,.5))); }
.sl-band h2 { font-size: clamp(30px, 3.4vw, 50px); letter-spacing: -.04em; }
.sl-band h2 em { color: var(--ia2); }
.sl-band p { max-width: 560px; margin-top: 12px; color: rgba(238,241,255,.84); }

/* Cybersecurity: radar hero */
.sl-radar { --s: min(520px, 100%); position: relative; justify-self: center; width: var(--s); aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 calc(12.5% - 1px), rgba(94,242,225,.18) calc(12.5% - 1px) 12.5%), radial-gradient(circle, rgba(47, 107, 255,.25), transparent 70%); border: 1px solid rgba(94,242,225,.3); }
.sl-radar::before, .sl-radar::after { content: ""; position: absolute; background: rgba(94,242,225,.16); }
.sl-radar::before { top: 0; bottom: 0; left: 50%; width: 1px; }
.sl-radar::after { left: 0; right: 0; top: 50%; height: 1px; }
.sl-radar__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(94,242,225,.42), rgba(94,242,225,0) 22%, transparent); animation: inSpin 4.5s linear infinite; }
.sl-radar__core { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 22px; background: var(--ia); color: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 10px rgba(47, 107, 255,.2), 0 0 60px var(--ia2); }
.sl-radar__core svg { width: 34px; height: 34px; }
.sl-radar__blip { position: absolute; left: var(--x); top: var(--y); z-index: 1; display: flex; align-items: center; gap: 8px; }
.sl-radar__blip i { width: 12px; height: 12px; border-radius: 50%; background: #FF5D5D; box-shadow: 0 0 0 0 rgba(255,93,93,.6); animation: slPing 2.4s var(--d) infinite; }
.sl-radar__blip em { padding: 5px 10px; border-radius: 999px; background: rgba(5,6,13,.75); border: 1px solid rgba(255,255,255,.14); font-family: var(--f-mono); font-style: normal; font-size: 11px; letter-spacing: .04em; color: #fff; white-space: nowrap; animation: slBlink 4.5s var(--d) infinite; }
@keyframes slPing { 0% { box-shadow: 0 0 0 0 rgba(255,93,93,.6); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255,93,93,0); } }
@keyframes slBlink { 0%, 100% { opacity: .35; } 20%, 60% { opacity: 1; } }

.acp--sol-cyber .inp { background: linear-gradient(transparent 64px, var(--ink-950) 64px); }
.sl-sentry-sec { background: radial-gradient(800px 400px at 50% 0%, color-mix(in srgb, var(--ia) 22%, transparent), transparent 70%), var(--ink-950); }
.sl-sentry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sl-sentry article { position: relative; padding: 30px; border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); transition: border-color .4s, background .4s; }
.sl-sentry article::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--a, 0deg), transparent 70%, var(--ia2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity .4s; }
.sl-sentry article:hover { background: rgba(94,242,225,.06); }
.sl-sentry article:hover::before { opacity: 1; animation: slTurn 2.6s linear infinite; }
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes slTurn { to { --a: 360deg; } }
.sl-sentry .in-ic { margin-bottom: 20px; background: rgba(94,242,225,.12); color: var(--ia2); }
.sl-sentry h3 { margin-bottom: 8px; font-size: 21px; color: #fff; }
.sl-sentry p { font-size: 15px; color: var(--on-dark-2); }

.sl-zt { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.sl-zt .x-head { display: block; margin-bottom: 18px; }
.sl-zt__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.sl-zt__rings { position: relative; width: 100%; aspect-ratio: 1; }
.sl-zt__rings button { position: absolute; inset: calc(var(--k) * 9.5%); z-index: var(--k); display: flex; justify-content: center; padding-top: calc(2.4% + 4px); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ia) 30%, transparent); background: color-mix(in srgb, var(--ia) calc(6% + var(--k) * 5%), #fff); transition: background .3s, box-shadow .3s; }
.sl-zt__rings button span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ia); }
.sl-zt__rings button:hover { background: color-mix(in srgb, var(--ia) calc(14% + var(--k) * 5%), #fff); }
.sl-zt__rings button[aria-selected="true"] { background: var(--ia); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ia2) 50%, transparent); }
.sl-zt__rings button[aria-selected="true"] span { color: #fff; }
.sl-zt__core { position: absolute; inset: 47.5%; z-index: 6; display: grid; place-items: center; margin: -22px; border-radius: 50%; background: var(--ink-950); color: var(--ia2); pointer-events: none; }
.sl-zt__core svg { width: 20px; height: 20px; }
.sl-zt__panels [role="tabpanel"] { padding: 30px; border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.sl-zt__panels [role="tabpanel"].is-in { animation: slIn .5s var(--ease-out) both; }
.sl-zt__panels h3 { margin: 18px 0 8px; font-size: 26px; }
.sl-zt__panels p { color: var(--text-2); }

.sl-chk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.sl-chk .x-h2, .sl-safe .x-h2, .sl-ba .x-h2, .sl-hl .x-h2 { margin-top: 16px; }
.sl-chk .x-lead, .sl-safe .x-lead, .sl-ba .x-lead, .sl-hl .x-lead { margin-top: 18px; }
.sl-chk__res { --fill: 0; margin-top: 32px; padding: 26px; border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.sl-chk__bar { height: 10px; margin-bottom: 18px; border-radius: 6px; background: var(--paper-2); overflow: hidden; }
.sl-chk__bar i { display: block; height: 100%; width: calc(var(--fill) * 100%); min-width: 6%; border-radius: inherit; background: #E5484D; transition: width .5s var(--ease-out), background .5s; }
.sl-chk__res[data-level="1"] .sl-chk__bar i { background: #F5A524; }
.sl-chk__res[data-level="2"] .sl-chk__bar i { background: var(--ia); }
.sl-chk__res strong { display: block; font-family: var(--f-display); font-size: 26px; letter-spacing: -.03em; }
.sl-chk__res p { margin: 6px 0 20px; color: var(--text-2); }
.sl-chk__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sl-chk__list label { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; font-weight: 500; cursor: pointer; transition: border-color .3s, background .3s; }
.sl-chk__list input { position: absolute; opacity: 0; pointer-events: none; }
.sl-chk__box { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--line-2); color: transparent; transition: background .25s, border-color .25s, color .25s; }
.sl-chk__box svg { width: 16px; height: 16px; stroke-width: 2.6 !important; }
.sl-chk__list input:checked + .sl-chk__box { background: var(--ia); border-color: var(--ia); color: #fff; }
.sl-chk__list label:has(input:checked) { border-color: color-mix(in srgb, var(--ia) 45%, transparent); background: color-mix(in srgb, var(--ia) 5%, #fff); }
.sl-chk__list input:focus-visible + .sl-chk__box { outline: 2px solid var(--ia); outline-offset: 2px; }

.sl-soc-wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.sl-soc-wrap .x-head { display: block; margin-bottom: 18px; }
.sl-soc-wrap .k-chips > span:first-child { color: var(--on-dark-3); }
.sl-soc-wrap .k-chips > span + span { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: var(--on-dark); }
.sl-soc { overflow: hidden; border-radius: 22px; border: 1px solid rgba(255,255,255,.12); background: #070A14; font-family: var(--f-mono); font-size: 13.5px; box-shadow: 0 50px 90px -40px color-mix(in srgb, var(--ia) 50%, transparent); }
.sl-soc__bar, .sl-ask__bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sl-soc__bar i, .sl-ask__bar i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.sl-soc__bar i:nth-child(2), .sl-ask__bar i:nth-child(2) { background: #FEBC2E; }
.sl-soc__bar i:nth-child(3), .sl-ask__bar i:nth-child(3) { background: #28C840; }
.sl-soc__bar span, .sl-ask__bar span { margin-left: 10px; font-size: 12px; color: var(--on-dark-3); }
.sl-soc ol { display: grid; gap: 12px; margin: 0; padding: 22px 22px 8px; list-style: none; }
.sl-soc li { display: grid; grid-template-columns: 104px 1fr; gap: 12px; color: var(--on-dark-2); line-height: 1.5; opacity: 0; transform: translateX(-8px); }
.sl-soc li b { color: var(--ia2); font-weight: 500; }
.sl-soc li b::before { content: "› "; color: var(--on-dark-3); }
.sl-soc.is-in li, .sl-soc.is-in .sl-soc__ok { animation: slType .5s var(--d) var(--ease-out) forwards; }
.sl-soc__ok { display: flex; align-items: center; gap: 10px; margin: 8px 22px 22px; padding: 12px 14px; border-radius: 12px; background: rgba(94,242,225,.1); color: var(--ia2); opacity: 0; }
.sl-soc__ok svg { width: 16px; height: 16px; }
@keyframes slType { to { opacity: 1; transform: none; } }

/* Data: pipeline hero */
.sl-pipe { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: center; padding: 34px 26px; border-radius: 28px; border: 1px solid rgba(255,255,255,.12); background: rgba(10,10,30,.6); }
.sl-pipe__col { display: grid; gap: 10px; }
.sl-pipe__col span { position: relative; display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); font-family: var(--f-label); font-size: 13px; color: #fff; }
.sl-pipe__col svg { flex: none; width: 17px; height: 17px; color: var(--ia2); }
.sl-pipe__col span::after { content: ""; position: absolute; top: 50%; left: 100%; width: 34px; height: 2px; background: repeating-linear-gradient(90deg, var(--ia2) 0 6px, transparent 6px 12px); background-size: 24px 2px; opacity: .7; animation: slFlow 1s linear infinite; }
.sl-pipe__col--out span::after { left: auto; right: 100%; }
@keyframes slFlow { to { background-position: 24px 0; } }
.sl-pipe__hub { display: grid; gap: 8px; padding: 20px 16px; border-radius: 22px; background: linear-gradient(160deg, color-mix(in srgb, var(--ia) 40%, #0A1230), #0A1230); border: 1px solid color-mix(in srgb, var(--ia2) 40%, transparent); box-shadow: 0 0 60px -10px var(--ia); text-align: center; }
.sl-pipe__hub small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ia2); }
.sl-pipe__l { display: block; padding: 10px; border-radius: 10px; font-family: var(--f-display); font-style: normal; font-size: 15px; font-weight: 600; color: #1A1206; animation: slGlow 3s infinite; }
.sl-pipe__l--bronze { background: linear-gradient(90deg, #B87333, #E3A36B); }
.sl-pipe__l--silver { background: linear-gradient(90deg, #A8B0BD, #E4E8EE); animation-delay: 1s; }
.sl-pipe__l--gold { background: linear-gradient(90deg, #D4A017, #FFE08A); animation-delay: 2s; }
@keyframes slGlow { 0%, 100% { filter: none; } 15% { filter: brightness(1.25) drop-shadow(0 0 10px rgba(255,255,255,.5)); } }
.sl-pipe__hub em { font-family: var(--f-label); display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--on-dark-2); }
.sl-pipe__hub em svg { width: 14px; height: 14px; color: var(--ia2); }

.sl-ledger { display: grid; border-top: 1px solid var(--line); }
.sl-ledger a { position: relative; display: grid; grid-template-columns: auto minmax(0, .9fr) minmax(0, 1.3fr) auto; gap: 24px; align-items: center; padding: 26px 8px; border-bottom: 1px solid var(--line); transition: padding .5s var(--ease-out), background .4s; }
.sl-ledger a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--ia) 9%, #fff), transparent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
.sl-ledger a:hover { padding-left: 22px; }
.sl-ledger a:hover::before { transform: none; }
.sl-ledger h3 { font-size: clamp(20px, 1.8vw, 26px); }
.sl-ledger p { color: var(--text-2); }
.sl-ledger__go { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); transition: background .3s, color .3s, border-color .3s, transform .4s; }
.sl-ledger__go svg { width: 18px; height: 18px; }
.sl-ledger a:hover .sl-ledger__go { background: var(--ia); border-color: var(--ia); color: #fff; transform: rotate(-45deg); }

.sl-medal { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.sl-medal .x-head { display: block; margin-bottom: 18px; }
.sl-medal__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.sl-medal__stack { display: grid; gap: 4px; padding: 20px 0; perspective: 900px; }
.sl-medal__plate { display: grid; gap: 2px; padding: 22px 24px; border-radius: 18px; text-align: left; color: #1A1206; transform: rotateX(48deg) rotateZ(-8deg); transform-origin: 50% 50%; transition: transform .6s var(--ease-out), box-shadow .5s, filter .4s; filter: saturate(.75) brightness(.8); box-shadow: 0 24px 40px -20px rgba(0,0,0,.8); }
.sl-medal__plate strong { font-family: var(--f-display); font-size: 22px; letter-spacing: -.02em; }
.sl-medal__plate span { font-size: 13.5px; opacity: .8; }
.sl-medal__plate--gold { background: linear-gradient(110deg, #C9970F, #FFE08A); }
.sl-medal__plate--silver { background: linear-gradient(110deg, #9AA3B2, #EEF1F5); }
.sl-medal__plate--bronze { background: linear-gradient(110deg, #A8622B, #E8AC74); }
.sl-medal__plate:hover { filter: none; }
.sl-medal__plate[aria-selected="true"] { filter: none; transform: rotateX(0) rotateZ(0) scale(1.04); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 3px rgba(255,255,255,.5); }
.sl-medal__panel h3 { font-size: 26px; color: #fff; }
.sl-medal__panel h3 em { font-family: var(--f-serif); font-weight: 400; color: var(--ia2); }
.sl-medal__panel p { margin: 12px 0 20px; color: var(--on-dark-2); }
.sl-medal__panel.is-in { animation: slIn .5s var(--ease-out) both; }

.sl-ask { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; }
.sl-ask__qs { display: grid; gap: 10px; align-content: start; }
.sl-ask__qs button { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: #fff; font-family: var(--f-label); font-size: 15.5px; font-weight: 500; text-align: left; transition: border-color .3s, box-shadow .3s; }
.sl-ask__qs svg { flex: none; width: 18px; height: 18px; color: var(--ia); }
.sl-ask__qs button[aria-selected="true"] { border-color: var(--ia); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ia) 18%, transparent); }
.sl-ask__screen { overflow: hidden; border-radius: 22px; background: #0A0F24; color: #E7E7FF; box-shadow: 0 40px 80px -40px rgba(10,12,24,.6); }
.sl-ask__screen pre { margin: 0; padding: 22px 24px; overflow-x: auto; font-family: var(--f-mono); font-size: 13.5px; line-height: 1.7; color: #BFD3FF; }
.sl-ask__screen [role="tabpanel"].is-in pre { animation: slReveal 1.1s steps(18) both; }
@keyframes slReveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.sl-ask__ans { display: flex; gap: 12px; margin: 0 20px 20px; padding: 18px; border-radius: 16px; background: color-mix(in srgb, var(--ia) 22%, #0A0F24); }
.sl-ask__ans svg { flex: none; width: 20px; height: 20px; color: var(--ia2); }
.sl-ask__screen [role="tabpanel"].is-in .sl-ask__ans { animation: slIn .5s 1s var(--ease-out) both; }

.sl-stairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; margin: 0; padding: 0; list-style: none; }
.sl-stairs li { display: flex; }
.sl-stairs__step { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; min-height: calc(190px + var(--k) * 70px); padding: 26px; border-radius: 22px 22px 6px 6px; background: color-mix(in srgb, var(--ia) calc(8% + var(--k) * 18%), #fff); color: var(--text); }
.sl-stairs li:last-child .sl-stairs__step { background: linear-gradient(160deg, var(--ia), color-mix(in srgb, var(--ia) 70%, #0D1A4A)); color: #fff; }
.sl-stairs strong { font-family: var(--f-display); font-size: 24px; letter-spacing: -.03em; }
.sl-stairs p { margin-top: 8px; font-size: 14.5px; opacity: .82; }

.sl-stack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sl-stack > div { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.sl-stack small { margin-bottom: 4px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ia); }
.sl-stack span { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.sl-stack img.k-tlogo { width: 30px; height: 30px; padding: 5px; border-radius: 9px; border: 1px solid var(--line); }

/* Digital: photo collage hero with a rotating word */
.sl-rot { display: inline-block; }
.sl-rot.is-in em { display: inline-block; animation: slWord .7s var(--ease-out) both; }
@keyframes slWord { from { opacity: 0; transform: translateY(.4em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.sl-col { position: relative; height: clamp(420px, 40vw, 560px); }
.sl-col__f { position: absolute; margin: 0; overflow: hidden; border-radius: 26px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
.sl-col__f img { width: 100%; height: 100%; object-fit: cover; }
.sl-col__f--0 { top: 0; right: 0; width: 64%; height: 58%; animation: slFloat 9s ease-in-out infinite; }
.sl-col__f--1 { bottom: 0; left: 0; width: 56%; height: 52%; animation: slFloat 10s -3s ease-in-out infinite; }
.sl-col__f--2 { bottom: 6%; right: 6%; width: 34%; height: 34%; border: 4px solid var(--ink-950); animation: slFloat 8s -5s ease-in-out infinite; }
@keyframes slFloat { 50% { transform: translateY(-12px); } }
.sl-col__tag { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--f-label); font-size: 13.5px; color: #fff; }
.sl-col__tag svg { width: 16px; height: 16px; color: var(--ia2); }
.sl-col__tag--a { top: 46%; left: 4%; }
.sl-col__tag--b { top: 8%; left: 14%; }

.sl-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sl-mosaic article { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; padding: 28px; border-radius: 26px; background: color-mix(in srgb, var(--ia) 7%, #F7F9FC); }
.sl-mosaic article .in-ic { margin-bottom: auto; }
.sl-mosaic h3 { margin: 26px 0 8px; font-size: 22px; }
.sl-mosaic p { color: var(--text-2); font-size: 15px; }
.sl-mosaic--photo { grid-row: span 2; min-height: 460px; color: #fff; }
.sl-mosaic--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.sl-mosaic--photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(5,6,13,.9) 10%, rgba(5,6,13,.1) 70%); }
.sl-mosaic--photo > div { position: relative; z-index: 2; }
.sl-mosaic--photo p { color: rgba(238,241,255,.85); }
.sl-mosaic--photo .in-ic { background: var(--ia); color: #fff; }
.sl-mosaic--photo:hover > img { transform: scale(1.06); }
.sl-mosaic article:nth-child(4) { grid-column: 3; grid-row: 2 / span 2; }
.sl-mosaic article:nth-child(6) { grid-column: 1 / span 2; min-height: 200px; }

.sl-cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.sl-cmp__dial { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; }
.sl-cmp__q { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px; padding: clamp(18px, 2.4vw, 28px); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #fff; text-align: left; transition: background .4s, border-color .4s; }
.sl-cmp__q--0 { border-radius: 100% 14px 14px 14px; }
.sl-cmp__q--1 { border-radius: 14px 100% 14px 14px; align-items: flex-end; text-align: right; }
.sl-cmp__q--2 { border-radius: 14px 14px 14px 100%; justify-content: flex-start; }
.sl-cmp__q--3 { border-radius: 14px 14px 100% 14px; justify-content: flex-start; align-items: flex-end; text-align: right; }
.sl-cmp__q--0 { padding-right: 56px; } .sl-cmp__q--1 { padding-left: 56px; } .sl-cmp__q--2 { padding-right: 56px; } .sl-cmp__q--3 { padding-left: 56px; }
.sl-cmp__q svg { width: 22px; height: 22px; color: var(--ia2); }
.sl-cmp__q strong { font-family: var(--f-display); font-size: 20px; letter-spacing: -.02em; }
.sl-cmp__q span { font-size: 13px; color: var(--on-dark-2); }
.sl-cmp__q:hover { background: rgba(255,255,255,.09); }
.sl-cmp__q[aria-selected="true"] { background: linear-gradient(135deg, var(--ia), color-mix(in srgb, var(--ia2) 70%, var(--ia))); border-color: transparent; }
.sl-cmp__q[aria-selected="true"] svg, .sl-cmp__q[aria-selected="true"] span { color: #fff; }
.sl-cmp__hub { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--ink-950); border: 1px solid rgba(255,255,255,.18); transform: translate(-50%, -50%); pointer-events: none; }
.sl-cmp__hub i { width: 4px; height: 38px; border-radius: 4px; background: linear-gradient(var(--ia2) 50%, rgba(255,255,255,.3) 50%); transform: rotate(var(--ang, -45deg)); transition: transform .8s var(--ease-out); }
.sl-cmp__q--1[aria-selected="true"] ~ .sl-cmp__hub i { --ang: 45deg; }
.sl-cmp__q--2[aria-selected="true"] ~ .sl-cmp__hub i { --ang: -135deg; }
.sl-cmp__q--3[aria-selected="true"] ~ .sl-cmp__hub i { --ang: 135deg; }
.sl-cmp__panels [role="tabpanel"].is-in { animation: slIn .5s var(--ease-out) both; }
.sl-cmp__panels small { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ia2); }
.sl-cmp__panels h3 { margin: 10px 0 14px; font-size: clamp(30px, 3vw, 44px); color: #fff; letter-spacing: -.04em; }
.sl-cmp__panels p { margin-bottom: 22px; color: var(--on-dark-2); font-size: 17px; }

.sl-ba, .sl-hl { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sl-ba__card, .sl-hl__card { padding: clamp(22px, 3vw, 34px); border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.sl-ba__sw { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; font-family: var(--f-label); font-size: 14px; font-weight: 600; }
.sl-ba__sw i { position: relative; width: 52px; height: 30px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line-2); transition: background .4s; }
.sl-ba__sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .45s var(--ease-out); }
.is-on > .sl-ba__sw i { background: var(--ia); border-color: var(--ia); }
.is-on > .sl-ba__sw i::after { transform: translateX(22px); }
.sl-ba__sw span { color: var(--text-3); transition: color .3s; }
.sl-ba__card:not(.is-on) .sl-ba__sw span:first-child, .sl-ba__card.is-on .sl-ba__sw span:last-child, .sl-hl__card:not(.is-on) .sl-ba__sw span:first-child, .sl-hl__card.is-on .sl-ba__sw span:last-child { color: var(--text); }
.sl-ba__card ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sl-ba__card li { position: relative; display: grid; min-height: 60px; }
.sl-ba__card li > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; transition: opacity .5s, transform .6s var(--ease-out); }
.sl-ba__card li svg { flex: none; width: 18px; height: 18px; stroke-width: 2.4 !important; }
.sl-ba__a { background: #F1F3F8; color: #41455A; }
.sl-ba__b { background: color-mix(in srgb, var(--ia) 10%, #fff); color: var(--text); opacity: 0; transform: rotateX(-80deg); }
.sl-ba__b svg { color: var(--ia); }
.sl-ba__card.is-on .sl-ba__a { opacity: 0; transform: rotateX(80deg); }
.sl-ba__card.is-on .sl-ba__b { opacity: 1; transform: none; }
.sl-ba__card li:nth-child(2) > span { transition-delay: .08s; }
.sl-ba__card li:nth-child(3) > span { transition-delay: .16s; }
.sl-ba__card li:nth-child(4) > span { transition-delay: .24s; }

.sl-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sl-board__col { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: 26px; background: #F6F4F2; }
.sl-board__col:nth-child(2) { background: color-mix(in srgb, var(--ia) 8%, #F3F5F9); }
.sl-board__col:nth-child(3) { background: color-mix(in srgb, var(--ia) 15%, #F3F5F9); }
.sl-board header { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 8px 10px; }
.sl-board header strong { font-family: var(--f-display); font-size: 28px; letter-spacing: -.04em; }
.sl-board header span { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.sl-board article { padding: 18px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(10,12,24,.06); transition: transform .4s var(--ease-out), box-shadow .4s; }
.sl-board article:hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 18px 30px -18px rgba(10,12,24,.35); }
.sl-board article p { margin-top: 10px; font-weight: 500; }
.sl-tag { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.sl-tag--customer { background: #2F6BFF; color: #fff; }
.sl-tag--operations { background: #E3EBFF; color: #1742C0; }
.sl-tag--people { background: #EEF5FF; color: #1F55E6; border: 1px solid #C9DAFF; }
.sl-tag--technology { background: #0D1A4A; color: #fff; }

/* eCommerce: phone storefront hero with order toasts */
.sl-shop { position: relative; justify-self: center; padding: 30px 90px; }
.sl-shop__phone { width: 280px; padding: 14px; border-radius: 40px; background: #fff; border: 8px solid #1B1B24; color: var(--text); box-shadow: 0 60px 100px -40px rgba(0,0,0,.9), 0 0 80px -20px var(--ia); transform: rotate(-3deg); }
.sl-shop__top { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 12px; font-family: var(--f-display); }
.sl-shop__top svg { width: 20px; height: 20px; }
.sl-shop__banner { position: relative; overflow: hidden; height: 110px; border-radius: 18px; }
.sl-shop__banner img { width: 100%; height: 100%; object-fit: cover; }
.sl-shop__banner span { position: absolute; left: 12px; bottom: 10px; font-family: var(--f-display); font-weight: 700; font-size: 18px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.sl-shop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.sl-shop__grid div { display: grid; gap: 2px; }
.sl-shop__grid img { width: 100%; height: 76px; object-fit: cover; border-radius: 12px; margin-bottom: 4px; }
.sl-shop__grid b { font-size: 12.5px; }
.sl-shop__grid small { font-size: 12px; color: var(--ia); font-weight: 600; }
.sl-shop__btn { display: block; padding: 12px; border-radius: 14px; background: var(--ia); color: #fff; text-align: center; font-family: var(--f-label); font-weight: 600; font-size: 14px; }
.sl-shop__toast { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: #fff; color: var(--text); font-family: var(--f-label); font-size: 13.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 20px 40px -16px rgba(0,0,0,.6); opacity: 0; animation: slToast 10s calc(var(--k) * 2.5s) infinite; }
.sl-shop__toast svg { width: 18px; height: 18px; padding: 3px; border-radius: 6px; background: color-mix(in srgb, var(--ia) 14%, #fff); color: var(--ia); box-sizing: content-box; }
.sl-shop__toast:nth-of-type(1) { top: 14%; right: 0; }
.sl-shop__toast:nth-of-type(2) { top: 40%; left: 0; }
.sl-shop__toast:nth-of-type(3) { top: 64%; right: -10px; }
.sl-shop__toast:nth-of-type(4) { bottom: 8%; left: 10px; }
@keyframes slToast { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 4%, 22% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; transform: translateY(-10px); } }

.sl-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sl-shelf article { display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; border: 1px solid var(--line); background: #fff; transition: box-shadow .4s, transform .5s var(--ease-out); }
.sl-shelf article:hover { transform: translateY(-5px); box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--ia) 60%, transparent); }
.sl-shelf figure { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.sl-shelf figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.sl-shelf article:hover figure img { transform: scale(1.06); }
.sl-shelf figure small { position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; background: #fff; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ia); }
.sl-shelf article > div { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 24px; }
.sl-shelf .in-ic { margin-top: -50px; position: relative; background: var(--ia); color: #fff; box-shadow: 0 0 0 5px #fff; }
.sl-shelf h3 { font-size: 21px; }
.sl-shelf p { flex: 1; font-size: 15px; color: var(--text-2); }
.sl-shelf__add { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: 6px; padding: 9px 16px 9px 9px; border-radius: 999px; border: 1px solid var(--line-2); font-family: var(--f-label); font-size: 14px; font-weight: 600; transition: background .3s, border-color .3s, color .3s; }
.sl-shelf__plus { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--ia) 12%, #fff); color: var(--ia); font-size: 18px; line-height: 1; transition: transform .4s var(--ease-out), background .3s, color .3s; }
.sl-shelf__add[aria-pressed="true"] { background: var(--ia); border-color: var(--ia); color: #fff; }
.sl-shelf__add[aria-pressed="true"] .sl-shelf__plus { background: #fff; transform: rotate(45deg); }
.sl-plan { position: sticky; bottom: 20px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; padding: 14px 14px 14px 22px; border-radius: 22px; background: var(--ink-950); color: #fff; box-shadow: 0 30px 60px -20px rgba(10,12,24,.6); animation: slIn .4s var(--ease-out) both; }
.sl-plan > span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-label); font-weight: 600; }
.sl-plan > span svg { width: 18px; height: 18px; color: var(--ia2); }
.sl-plan ul { display: flex; flex: 1; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sl-plan li { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 13px; }

.sl-hl__dia { position: relative; display: grid; gap: 14px; min-height: 300px; }
.sl-hl__heads, .sl-hl__eng { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-hl__heads span, .sl-hl__eng span { padding: 10px 14px; border-radius: 12px; font-family: var(--f-label); font-size: 13.5px; font-weight: 500; transition: opacity .5s, transform .6s var(--ease-out); }
.sl-hl__heads span { background: color-mix(in srgb, var(--ia) 12%, #fff); color: var(--ia); }
.sl-hl__eng span { background: var(--paper-2); }
.sl-hl__api { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: 14px; background: linear-gradient(90deg, var(--ia), color-mix(in srgb, var(--ia2) 80%, var(--ia))); color: #fff; font-family: var(--f-label); font-weight: 600; transition: opacity .5s, transform .6s var(--ease-out); }
.sl-hl__api svg { width: 18px; height: 18px; }
.sl-hl__mono { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; padding: 28px; border-radius: 20px; background: repeating-linear-gradient(135deg, #F2F3F6 0 12px, #ECEDF2 12px 24px); border: 2px dashed var(--line-2); text-align: center; transition: opacity .5s, transform .6s var(--ease-out); }
.sl-hl__mono strong { font-family: var(--f-display); font-size: 26px; letter-spacing: -.03em; }
.sl-hl__mono span { max-width: 300px; color: var(--text-2); }
.sl-hl__card:not(.is-on) .sl-hl__heads span, .sl-hl__card:not(.is-on) .sl-hl__eng span, .sl-hl__card:not(.is-on) .sl-hl__api { opacity: 0; transform: scale(.9); }
.sl-hl__card.is-on .sl-hl__mono { opacity: 0; transform: scale(1.05); pointer-events: none; }
.sl-hl__card.is-on .sl-hl__heads span:nth-child(2), .sl-hl__card.is-on .sl-hl__eng span:nth-child(2) { transition-delay: .06s; }
.sl-hl__card.is-on .sl-hl__heads span:nth-child(3), .sl-hl__card.is-on .sl-hl__eng span:nth-child(3) { transition-delay: .12s; }
.sl-hl__card.is-on .sl-hl__heads span:nth-child(n+4), .sl-hl__card.is-on .sl-hl__eng span:nth-child(n+4) { transition-delay: .18s; }
.sl-hl .k-ticks { --k-tick: var(--ia2); margin-top: 26px; }

.sl-plat { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; }
.sl-plat__list { display: grid; gap: 8px; align-content: start; }
.sl-plat__list button { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; font-family: var(--f-label); font-size: 16px; font-weight: 600; text-align: left; transition: border-color .3s, background .3s, color .3s; }
.sl-plat__list img.k-tlogo { width: 30px; height: 30px; padding: 5px; border-radius: 9px; border: 1px solid var(--line); background: #fff; }
.sl-plat__list button[aria-selected="true"] { background: var(--ia); border-color: var(--ia); color: #fff; }
.sl-plat__panel { padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.sl-plat__panel.is-in { animation: slIn .5s var(--ease-out) both; }
.sl-plat__panel small { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ia); }
.sl-plat__panel h3 { margin: 8px 0 22px; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.04em; }
.sl-plat__panel .k-ticks { --k-tick: var(--ia); }
.sl-plat__note { display: flex; gap: 12px; margin-top: 26px; padding: 16px 18px; border-radius: 16px; background: #FFF7E8; color: #6B4A00; font-size: 15px; }
.sl-plat__note svg { flex: none; width: 20px; height: 20px; }

.sl-jr__steps { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); margin-bottom: 30px; }
.sl-jr__steps button { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; font-family: var(--f-label); font-size: 14.5px; font-weight: 600; color: var(--text-3); transition: color .3s; }
.sl-jr__dot { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--line-2); background: #fff; transition: background .4s, border-color .4s, color .4s, transform .4s var(--ease-out); }
.sl-jr__dot svg { width: 22px; height: 22px; }
.sl-jr__steps button[aria-selected="true"] { color: var(--text); }
.sl-jr__steps button[aria-selected="true"] .sl-jr__dot { background: var(--ia); border-color: var(--ia); color: #fff; transform: scale(1.12); }
.sl-jr__track { position: absolute; top: 26px; left: calc(100% / 12); right: calc(100% / 12); height: 2px; background: var(--line); }
.sl-jr__track i { position: absolute; inset: 0; background: var(--ia); transform: scaleX(calc(var(--i, 0) / 5)); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
.sl-jr__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border-radius: 28px; background: color-mix(in srgb, var(--ia) 6%, #fff); }
.sl-jr__panel.is-in { animation: slIn .5s var(--ease-out) both; }
.sl-jr__panel img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.sl-jr__panel > div { align-self: center; padding: clamp(28px, 4vw, 56px); }
.sl-jr__panel h3 { margin-bottom: 12px; font-size: clamp(30px, 3vw, 44px); letter-spacing: -.04em; }
.sl-jr__panel p { font-size: 17px; color: var(--text-2); }

/* Enterprise: app window hero */
.sl-app { overflow: hidden; border-radius: 22px; border: 1px solid rgba(255,255,255,.14); background: #0C1424; box-shadow: 0 60px 100px -40px rgba(0,0,0,.85), 0 0 80px -30px var(--ia); font-family: var(--f-label); }
.sl-app__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #111B30; border-bottom: 1px solid rgba(255,255,255,.08); }
.sl-app__bar > i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.22); }
.sl-app__bar > span { display: flex; align-items: center; gap: 8px; margin-left: 14px; padding: 7px 12px; border-radius: 9px; background: rgba(255,255,255,.06); font-size: 12px; color: var(--on-dark-3); flex: 1; }
.sl-app__bar svg { width: 13px; height: 13px; }
.sl-app__body { display: grid; grid-template-columns: 150px 1fr; min-height: 360px; }
.sl-app__body nav { display: grid; align-content: start; gap: 4px; padding: 14px 10px; border-right: 1px solid rgba(255,255,255,.08); }
.sl-app__body nav span { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px; font-size: 12.5px; color: var(--on-dark-2); animation: slNav 12s calc(var(--k) * 2s) infinite; }
.sl-app__body nav svg { width: 15px; height: 15px; }
@keyframes slNav { 0%, 16% { background: color-mix(in srgb, var(--ia) 40%, transparent); color: #fff; } 17%, 100% { background: transparent; } }
.sl-app__main { display: grid; align-content: start; gap: 10px; padding: 18px; }
.sl-app__main > b { color: #fff; font-size: 15px; }
.sl-app__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.sl-app__cards span { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.05); }
.sl-app__cards small { font-size: 10.5px; color: var(--on-dark-3); }
.sl-app__cards i { height: 18px; width: 60%; border-radius: 5px; background: linear-gradient(90deg, var(--ia2), transparent); opacity: .7; }
.sl-app__row { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 11px; background: rgba(255,255,255,.035); }
.sl-app__row > i:first-child { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.12); }
.sl-app__row > i:nth-child(2) { height: 8px; border-radius: 4px; background: rgba(255,255,255,.14); }
.sl-app__st { font-family: var(--f-label); padding: 4px 10px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 600; }
.sl-app__st--ok { background: rgba(40,200,120,.16); color: #6EE7A8; }
.sl-app__st--wait { background: rgba(245,165,36,.16); color: #FCD34D; }
.sl-app__st--rev { background: color-mix(in srgb, var(--ia2) 18%, transparent); color: var(--ia2); }

.sl-mod { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; }
.sl-mod__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.sl-mod__grid button { display: grid; gap: 14px; justify-items: start; padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: #fff; font-family: var(--f-display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; text-align: left; transition: border-color .3s, box-shadow .3s, background .3s; }
.sl-mod__grid button[aria-selected="true"] { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.sl-mod__grid button[aria-selected="true"] .in-ic { background: var(--ia); color: #fff; }
.sl-mod__panel { overflow: hidden; border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.sl-mod__panel.is-in { animation: slIn .5s var(--ease-out) both; }
.sl-mod__panel > img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.sl-mod__panel > div { padding: 28px 30px 30px; }
.sl-mod__panel h3 { font-size: 28px; letter-spacing: -.03em; }
.sl-mod__panel p { margin: 10px 0 18px; color: var(--text-2); }
.sl-mod__panel .k-ticks { grid-template-columns: 1fr 1fr; margin-bottom: 20px; --k-tick: var(--ia); }

.sl-bus { display: grid; gap: 22px; }
.sl-bus__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sl-bus__row span { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); font-family: var(--f-label); font-weight: 500; color: #fff; }
.sl-bus__row span::after { content: ""; position: absolute; left: 50%; width: 2px; height: 22px; background: linear-gradient(var(--ia2), transparent); }
.sl-bus__row:first-child span::after { top: 100%; }
.sl-bus__row:last-child span::after { bottom: 100%; transform: scaleY(-1); }
.sl-bus__row img.k-tlogo { width: 30px; height: 30px; padding: 5px; border-radius: 9px; background: #fff; }
.sl-bus__line { position: relative; overflow: hidden; display: grid; place-items: center; height: 64px; border-radius: 999px; background: color-mix(in srgb, var(--ia) 25%, #0B1426); border: 1px solid color-mix(in srgb, var(--ia2) 40%, transparent); }
.sl-bus__line i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ia2) 50%, transparent), transparent); background-size: 30% 100%; background-repeat: no-repeat; animation: slBus 3s linear infinite; }
@keyframes slBus { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.sl-bus__line strong { position: relative; display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 18px; color: #fff; }
.sl-bus__line svg { width: 20px; height: 20px; color: var(--ia2); }

.sl-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: 26px; border: 1px solid var(--line); background: var(--line); }
.sl-grade article { display: flex; gap: 18px; padding: 30px; background: #fff; transition: background .3s; }
.sl-grade article:hover { background: color-mix(in srgb, var(--ia) 5%, #fff); }
.sl-grade svg { flex: none; width: 28px; height: 28px; color: var(--ia); }
.sl-grade h3 { margin-bottom: 6px; font-size: 19px; }
.sl-grade p { font-size: 15px; color: var(--text-2); }

.sl-vs { overflow: hidden; border-radius: 26px; border: 1px solid var(--line); background: #fff; }
.sl-vs [role="row"] { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.sl-vs [role="row"]:first-child { border-top: 0; }
.sl-vs [role="row"] > span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 16px; text-align: center; }
.sl-vs [role="rowheader"] { justify-content: flex-start !important; font-weight: 500; text-align: left !important; }
.sl-vs__h > span { font-family: var(--f-display); font-size: 17px; font-weight: 600; }
.sl-vs__us { background: color-mix(in srgb, var(--ia) 8%, #fff); }
.sl-vs__h .sl-vs__us { background: var(--ia); color: #fff; }
.sl-vs em { font-family: var(--f-label); font-style: normal; font-size: 13.5px; color: var(--text-3); }
.sl-vs svg { width: 20px; height: 20px; stroke-width: 2.4 !important; }
.sl-vs__yes svg { color: #15944A; }
.sl-vs__no svg { color: #D14343; }
.sl-vs__part i { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(90deg, #F5A524 50%, var(--paper-2) 50%); border: 1px solid #F5A524; }

/* Legacy: green screen vs modern screen in the hero */
.sl-lx { --pos: 50%; position: relative; overflow: hidden; aspect-ratio: 5 / 4; border-radius: 26px; user-select: none; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 60px 100px -40px rgba(0,0,0,.9); }
.sl-lx__old, .sl-lx__new { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; }
.sl-lx__old { background: #031A08; }
.sl-lx__old pre { margin: 0; font-family: var(--f-mono); font-size: clamp(9px, .92vw, 13px); line-height: 1.55; color: #3DF57A; text-shadow: 0 0 8px rgba(61,245,122,.55); white-space: pre; }
.sl-lx__old::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 4px); pointer-events: none; }
.sl-lx__new { background: linear-gradient(140deg, #EEF3FF, #FFFFFF); clip-path: inset(0 0 0 var(--pos)); }
.sl-lx__ui { display: grid; gap: 10px; width: min(360px, 90%); padding: 22px; border-radius: 20px; background: #fff; color: var(--text); box-shadow: 0 30px 60px -30px rgba(10,12,24,.4); font-family: var(--f-label); }
.sl-lx__uh { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; font-size: 18px; }
.sl-lx__chip { padding: 4px 10px; border-radius: 999px; background: #E7F8EE; color: #15944A; font-size: 12px; font-weight: 600; }
.sl-lx__ur { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #F6F7F9; font-size: 14px; }
.sl-lx__ur em { font-family: var(--f-label); font-style: normal; color: var(--ia); font-weight: 600; }
.sl-lx__ub { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.sl-lx__ub span { padding: 11px; border-radius: 12px; background: var(--ia); color: #fff; text-align: center; font-size: 13.5px; font-weight: 600; }
.sl-lx__ub span + span { background: #fff; color: var(--text); border: 1px solid var(--line-2); }
.sl-lx__tag { position: absolute; top: 16px; left: 16px; z-index: 2; padding: 7px 12px; border-radius: 999px; background: rgba(0,0,0,.6); font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #3DF57A; pointer-events: none; }
.sl-lx__tag--b { left: auto; right: 16px; background: var(--ia); color: #fff; }
.sl-lx .in-cmp__line { z-index: 2; }
.sl-lx input { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

.sl-blue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 18px; border-radius: 30px; background: linear-gradient(rgba(47, 107, 255,.08) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(47, 107, 255,.08) 1px, transparent 1px) 0 0 / 28px 28px, #F7F9FF; }
.sl-blue article { padding: 28px; border-radius: 20px; border: 1.5px dashed color-mix(in srgb, var(--ia) 45%, transparent); background: rgba(255,255,255,.85); transition: border-style .3s, border-color .3s, box-shadow .4s; }
.sl-blue article:hover { border-style: solid; border-color: var(--ia); box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--ia) 70%, transparent); }
.sl-blue .in-ic { margin-bottom: 18px; }
.sl-blue h3 { margin-bottom: 8px; font-size: 21px; }
.sl-blue p { font-size: 15px; color: var(--text-2); }

.sl-fig__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); }
.sl-fig__steps .x-h2 { margin: 16px 0 30px; }
.sl-fig__steps article { min-height: clamp(260px, 46vh, 520px); padding: 28px 0 28px 26px; border-left: 2px solid rgba(255,255,255,.12); opacity: .4; transition: opacity .5s, border-color .5s; }
.sl-fig__steps article:last-child { min-height: clamp(200px, 30vh, 360px); }
.sl-fig__steps article.is-on { opacity: 1; border-color: var(--ia2); }
.sl-fig__steps h3 { margin-bottom: 10px; font-size: 30px; color: #fff; }
.sl-fig__steps p { max-width: 460px; font-size: 17px; color: var(--on-dark-2); }
.sl-fig__sticky { position: sticky; top: clamp(calc(var(--header-h) + 16px), calc(50vh - 220px), 320px); height: 440px; }
.sl-fig__box { position: absolute; top: 0; bottom: 0; width: 42%; border-radius: 22px; border: 1.5px dashed rgba(255,255,255,.25); }
.sl-fig__box small { position: absolute; top: 16px; left: 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); }
.sl-fig__box--old { left: 0; background: rgba(255,255,255,.03); }
.sl-fig__box--new { right: 0; border-style: solid; border-color: color-mix(in srgb, var(--ia2) 50%, transparent); background: color-mix(in srgb, var(--ia) 14%, transparent); }
.sl-fig__facade { position: absolute; top: 50%; left: 50%; padding: 10px 12px; border-radius: 12px; background: var(--ia); color: #fff; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transform: translate(-50%, -50%) rotate(-90deg); }
.sl-fig__m { --y: calc(64px + var(--k) * 60px); position: absolute; top: var(--y); left: 4%; width: 34%; padding: 12px 14px; border-radius: 12px; background: #2A2F40; color: var(--on-dark-2); font-family: var(--f-label); font-size: 14px; font-weight: 500; text-align: center; transition: left .9s var(--ease-out), background .6s, color .6s; }
.sl-fig[data-stage="1"] .sl-fig__m:nth-of-type(-n+2), .sl-fig[data-stage="2"] .sl-fig__m:nth-of-type(-n+4), .sl-fig[data-stage="3"] .sl-fig__m { left: 62%; background: var(--ia); color: #fff; }
.sl-fig[data-stage="3"] .sl-fig__box--old { opacity: .25; transition: opacity .8s; }

.sl-opts { display: flex; gap: 10px; min-height: 380px; }
.sl-opts article { position: relative; overflow: hidden; display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 24px 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); cursor: default; transition: flex .7s var(--ease-out), background .4s, color .4s; }
.sl-opts h3 { margin-top: auto; font-size: 20px; white-space: nowrap; }
.sl-opts article > div { display: grid; gap: 14px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease-out), opacity .4s, margin .4s; }
.sl-opts p { font-size: 15px; }
.sl-opts dl { display: flex; gap: 22px; margin: 0; }
.sl-opts dt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.sl-opts dd { margin: 2px 0 0; font-weight: 600; }
:is(.sl-opts article:hover, .sl-opts article:focus-within, .sl-opts article:focus, .sl-opts:not(:hover):not(:focus-within) article:first-child) { flex: 3.2; background: var(--ia); color: #fff; }
:is(.sl-opts article:hover, .sl-opts article:focus, .sl-opts:not(:hover):not(:focus-within) article:first-child) > div { max-height: 220px; margin-top: 12px; opacity: 1; }
:is(.sl-opts article:hover, .sl-opts article:focus, .sl-opts:not(:hover):not(:focus-within) article:first-child) .in-ic { background: rgba(255,255,255,.2); color: #fff; }

.sl-safe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.sl-safe__img { width: 100%; aspect-ratio: 16 / 10; margin-top: 28px; object-fit: cover; border-radius: 24px; }
.sl-safe__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sl-safe__list li { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 18px; background: color-mix(in srgb, var(--ia) 6%, #fff); border: 1px solid color-mix(in srgb, var(--ia) 16%, transparent); font-weight: 500; }
.sl-safe__list svg { flex: none; width: 24px; height: 24px; color: var(--ia); }

.sl-ft { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: center; }
.sl-ft > div { display: flex; flex-wrap: wrap; gap: 10px; padding: 26px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.sl-ft small { width: 100%; margin-bottom: 4px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.sl-ft > div:first-child span { padding: 9px 14px; border-radius: 10px; background: #F1F1EC; font-family: var(--f-mono); font-size: 13px; color: #5D5A4E; text-decoration: line-through; text-decoration-color: rgba(47, 107, 255,.5); }
.sl-ft > div:last-child span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 10px; background: color-mix(in srgb, var(--ia) 9%, #fff); font-weight: 500; }
.sl-ft img.k-tlogo { width: 26px; height: 26px; padding: 4px; border-radius: 7px; background: #fff; }
.sl-ft__arrow { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--ia); color: #fff; }
.sl-ft__arrow svg { width: 24px; height: 24px; }

/* Workflow: node canvas hero */
.sl-canvas { position: relative; display: grid; justify-items: center; padding: 34px 26px; border-radius: 28px; border: 1px solid rgba(255,255,255,.12); background: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.5px) 0 0 / 20px 20px, rgba(8,16,12,.7); }
.sl-node { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; width: min(300px, 100%); padding: 12px 16px; border-radius: 16px; background: #fff; color: var(--text); box-shadow: 0 16px 30px -16px rgba(0,0,0,.6); }
.sl-node svg { grid-row: span 2; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: color-mix(in srgb, var(--ia) 14%, #fff); color: var(--ia); }
.sl-node small { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.sl-node b { font-family: var(--f-label); font-size: 14px; font-weight: 600; line-height: 1.3; }
.sl-node--ai svg { background: linear-gradient(135deg, #4F7DFF, #5EF2E1); color: #fff; }
.sl-node--if { outline: 2px dashed color-mix(in srgb, var(--ia2) 70%, transparent); outline-offset: 3px; }
.sl-node--ok svg { background: var(--ia); color: #fff; }
.sl-wire { display: block; width: 2px; height: 26px; background: repeating-linear-gradient(var(--ia2) 0 5px, transparent 5px 10px); background-size: 2px 20px; animation: slWire 1s linear infinite; }
@keyframes slWire { to { background-position: 0 20px; } }
.sl-canvas__split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; margin-top: 26px; position: relative; }
.sl-canvas__split::before { content: ""; position: absolute; top: -26px; left: 25%; right: 25%; height: 14px; border: 2px dashed color-mix(in srgb, var(--ia2) 70%, transparent); border-bottom: 0; border-radius: 12px 12px 0 0; }
.sl-canvas__split > div { display: grid; justify-items: center; gap: 6px; }
.sl-canvas__split em { font-family: var(--f-mono); font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ia2); }
.sl-canvas__split .sl-node { width: 100%; }
.sl-canvas .sl-node { animation: slPulse 6s infinite; }
.sl-canvas > .sl-node:nth-of-type(2) { animation-delay: 1s; }
.sl-canvas > .sl-node:nth-of-type(3) { animation-delay: 2s; }
.sl-canvas__split .sl-node { animation-delay: 3s; }
.sl-canvas > .sl-node:last-child { animation-delay: 4s; }
@keyframes slPulse { 0%, 14%, 100% { box-shadow: 0 16px 30px -16px rgba(0,0,0,.6); } 5% { box-shadow: 0 0 0 3px var(--ia2), 0 0 30px var(--ia2); } }

.sl-chain { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 22px; }
.sl-chain::before { content: ""; position: absolute; top: 23px; left: 23px; right: 23px; height: 2px; background: repeating-linear-gradient(90deg, var(--ia) 0 8px, transparent 8px 14px); opacity: .5; }
.sl-chain article { position: relative; display: grid; gap: 16px; }
.sl-chain article:nth-child(n+4)::before { content: ""; position: absolute; top: -20px; left: 23px; width: calc(100% - 23px); height: 2px; background: repeating-linear-gradient(90deg, var(--ia) 0 8px, transparent 8px 14px); opacity: .3; }
.sl-chain .in-ic { position: relative; background: var(--ia); color: #fff; box-shadow: 0 0 0 6px #fff; }
.sl-chain article > div { padding: 22px; border-radius: 20px; background: color-mix(in srgb, var(--ia) 6%, #fff); border: 1px solid color-mix(in srgb, var(--ia) 14%, transparent); transition: transform .5s var(--ease-out), box-shadow .4s; }
.sl-chain article:hover > div { transform: translateY(-4px); box-shadow: 0 24px 40px -26px color-mix(in srgb, var(--ia) 70%, transparent); }
.sl-chain h3 { margin-bottom: 6px; font-size: 20px; }
.sl-chain p { font-size: 15px; color: var(--text-2); }

.sl-dept__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.sl-dept__tabs button { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); font-family: var(--f-label); font-size: 15px; font-weight: 500; color: var(--on-dark-2); transition: background .3s, color .3s; }
.sl-dept__tabs svg { width: 17px; height: 17px; }
.sl-dept__tabs button[aria-selected="true"] { background: #fff; color: var(--text); }
.sl-dept__tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--ia); transform: scaleX(0); transform-origin: 0 50%; }
.sl-dept.is-run .sl-dept__tabs button[aria-selected="true"]::after { animation: slBar var(--dur) linear forwards; }
@keyframes slBar { to { transform: scaleX(1); } }
.sl-dept__panel ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sl-dept__panel li { position: relative; display: grid; gap: 14px; align-content: start; min-height: 150px; padding: 20px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); font-family: var(--f-label); font-size: 15px; font-weight: 500; color: #fff; opacity: 0; transform: translateY(10px); }
.sl-dept__panel.is-in li { animation: slType .5s calc(var(--j) * .35s) var(--ease-out) forwards; }
.sl-dept__panel li:not(:last-child)::after { content: ""; position: absolute; top: 38px; left: 100%; width: 14px; height: 2px; background: var(--ia2); }
.sl-dept__panel li span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--ia) 35%, transparent); color: var(--ia2); }
.sl-dept__panel li:last-child span { background: var(--ia); color: #fff; }
.sl-dept__panel li svg { width: 19px; height: 19px; }

.sl-lanes { display: grid; gap: 14px; }
.sl-lanes__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.sl-lanes__row strong { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 18px; }
.sl-lanes__row strong svg { width: 20px; height: 20px; }
.sl-lanes__row ol { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sl-lanes__row li { display: grid; place-items: center; flex: 1; padding: 14px 12px; border-radius: 14px; font-size: 14px; font-weight: 500; text-align: center; }
.sl-lanes__row--m strong svg { color: var(--text-3); }
.sl-lanes__row--m li { background: #F1F2F6; color: var(--text-2); }
.sl-lanes__row--m li:nth-child(4), .sl-lanes__row--m li:nth-child(6) { background: repeating-linear-gradient(135deg, #E6E8EF 0 8px, #F1F2F6 8px 16px); }
.sl-lanes__row--a { background: color-mix(in srgb, var(--ia) 6%, #fff); border-color: color-mix(in srgb, var(--ia) 25%, transparent); }
.sl-lanes__row--a strong svg { color: var(--ia); }
.sl-lanes__row--a ol { max-width: 72%; }
.sl-lanes__row--a li { background: var(--ia); color: #fff; }
.sl-lanes.is-in .sl-lanes__row li { animation: slType .4s calc(var(--j) * .12s) var(--ease-out) backwards; }

/* Solutions hub */
.sl-hero--hub { min-height: min(80svh, 780px); display: flex; align-items: flex-end; --ia: #2F6BFF; --ia2: #7CC0FF; }
.sl-hero--hub h1 { max-width: 16ch; }
.sl-hero--hub .sl-hero__bg { opacity: 1; }
.sl-hero--hub::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-shade); }
.sl-hero--hub::after { display: none; }
.sl-find { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sl-find .x-h2 { margin-top: 16px; }
.sl-find .x-lead { margin-top: 18px; }
.sl-find__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sl-find__chips button { padding: 14px 20px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-family: var(--f-label); font-size: 15px; font-weight: 500; transition: background .3s, color .3s, border-color .3s; }
.sl-find__chips button:hover { border-color: var(--ia); }
.sl-find__chips button[aria-pressed="true"] { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.sl-hubg + .sl-hubg { margin-top: clamp(56px, 6vw, 88px); }
.sl-hubg__h { margin-bottom: 26px; font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -.04em; }
.sl-hubg__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sl-hcard { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; border: 1px solid var(--line); background: #fff; transition: transform .5s var(--ease-out), box-shadow .4s, opacity .4s, border-color .4s; }
.sl-hcard figure { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.sl-hcard figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--ia) 55%, transparent), transparent 60%); }
.sl-hcard img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.sl-hcard > div { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 22px; border-top: 4px solid var(--ia); }
.sl-hcard small { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ia); }
.sl-hcard strong { font-family: var(--f-display); font-size: 22px; letter-spacing: -.03em; line-height: 1.15; }
.sl-hcard span { flex: 1; font-size: 14.5px; color: var(--text-2); }
.sl-hcard em { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--f-label); font-style: normal; font-weight: 600; color: var(--ia); }
.sl-hcard em svg { width: 16px; height: 16px; transition: transform .4s var(--ease-out); }
.sl-hcard:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--ia) 70%, transparent); }
.sl-hcard:hover img { transform: scale(1.06); }
.sl-hcard:hover em svg { transform: translateX(4px); }
.sl-hcard.is-dim { opacity: .35; }
.sl-hcard.is-match { border-color: var(--ia); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ia) 35%, transparent), 0 40px 70px -40px color-mix(in srgb, var(--ia) 70%, transparent); }

@media (max-width: 1080px) {
  .sl-intro__grid { grid-template-columns: minmax(0, 1fr); }
  .sl-intro__media { min-height: 0; }
  .sl-hero__grid, .sl-prov, .sl-zt, .sl-chk, .sl-soc-wrap, .sl-medal, .sl-cmp, .sl-ba, .sl-hl, .sl-safe, .sl-fig__grid, .sl-find { grid-template-columns: minmax(0, 1fr); }
  .sl-hero__grid > :last-child { max-width: 640px; width: 100%; justify-self: start; }
  .sl-radar { --s: min(440px, 100%); justify-self: start; }
  .sl-tiles, .sl-sentry, .sl-shelf, .sl-blue, .sl-grade, .sl-mosaic, .sl-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-mosaic article:nth-child(4) { grid-column: auto; grid-row: span 2; }
  .sl-hubg__grid, .sl-outs__row, .sl-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-waves { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .sl-waves__line { display: none; }
  .sl-dept__panel ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sl-dept__panel li::after { display: none; }
  .sl-chain::before, .sl-chain article::before { display: none !important; }
  .sl-fig__stage { order: -1; }
  .sl-fig__sticky { top: calc(var(--header-h) + 10px); height: 360px; z-index: 2; }
  .sl-fig__m { --y: calc(48px + var(--k) * 50px); padding: 9px 10px; font-size: 13px; }
  .sl-fig__steps article { min-height: 0; padding: 22px 0 22px 22px; }
  .sl-opts { flex-direction: column; min-height: 0; }
  .sl-opts article > div { max-height: none !important; opacity: 1 !important; margin-top: 12px; }
  .sl-opts h3 { margin-top: 14px; }
  :is(.sl-opts article:hover, .sl-opts article:focus-within, .sl-opts article:focus, .sl-opts:not(:hover):not(:focus-within) article:first-child) { background: #fff; color: inherit; }
  :is(.sl-opts article:hover, .sl-opts article:focus, .sl-opts:not(:hover):not(:focus-within) article:first-child) .in-ic { background: color-mix(in srgb, var(--ia) 12%, #fff); color: var(--ia); }
}
@media (max-width: 760px) {
  .sl-mig { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 46px 14px 58px; }
  .sl-mig__lines { display: none; }
  .sl-mig__col { height: auto; gap: 8px; }
  .sl-mig__col > span { height: 46px; font-size: 12.5px; }
  .sl-pipe { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sl-pipe__col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-pipe__col span::after { display: none; }
  .sl-radar__blip em { font-size: 9.5px; padding: 4px 7px; }
  .sl-6r, .sl-plat, .sl-ask, .sl-mod, .sl-zt__body, .sl-medal__body { grid-template-columns: minmax(0, 1fr); }
  .sl-6r__list, .sl-plat__list, .sl-ask__qs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .sl-6r__list button, .sl-plat__list button { flex: none; }
  .sl-ask__qs button { flex: 0 0 82%; }
  .sl-6r__panel { grid-template-columns: minmax(0, 1fr); }
  .sl-6r__meters { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .sl-tiles, .sl-sentry, .sl-shelf, .sl-blue, .sl-grade, .sl-mosaic, .sl-chain, .sl-hubg__grid, .sl-outs__row, .sl-stack, .sl-board, .sl-stairs { grid-template-columns: minmax(0, 1fr); }
  .sl-mosaic article, .sl-mosaic--photo, .sl-mosaic article:nth-child(4), .sl-mosaic article:nth-child(6) { grid-column: auto; grid-row: auto; min-height: 240px; }
  .sl-mosaic--photo { min-height: 340px; }
  .sl-stairs__step { min-height: 0; }
  .sl-waves { grid-template-columns: minmax(0, 1fr); }
  .sl-ledger a { grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; }
  .sl-ledger p { grid-column: 2; }
  .sl-ledger__go { display: none; }
  .sl-zt__rings { max-width: 340px; justify-self: center; }
  .sl-col { height: 380px; }
  .sl-shop { padding: 20px 0; justify-self: center; }
  .sl-shop__phone { width: 240px; }
  .sl-shop__toast { font-size: 12px; padding: 9px 12px; }
  .sl-shop__toast:nth-of-type(odd) { right: -6px; }
  .sl-shop__toast:nth-of-type(even) { left: -6px; }
  .sl-jr__steps { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  .sl-jr__track { display: none; }
  .sl-jr__panel { grid-template-columns: minmax(0, 1fr); }
  .sl-jr__panel img { min-height: 200px; aspect-ratio: 16 / 9; }
  .sl-app__body { grid-template-columns: minmax(0, 1fr); }
  .sl-app__body nav { display: flex; overflow: hidden; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .sl-app__body nav span { flex: none; }
  .sl-mod__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sl-mod__panel .k-ticks { grid-template-columns: minmax(0, 1fr); }
  .sl-bus__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-bus__row span::after { display: none; }
  .sl-vs { overflow-x: auto; }
  .sl-vs [role="row"] { min-width: 560px; }
  .sl-lx { aspect-ratio: 4 / 5; }
  .sl-lx__old pre { font-size: 8.5px; }
  .sl-ft { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .sl-ft > div { width: 100%; }
  .sl-ft__arrow { transform: rotate(90deg); }
  .sl-dept__panel ol { grid-template-columns: minmax(0, 1fr); }
  .sl-dept__panel li { min-height: 0; grid-template-columns: auto 1fr; align-items: center; }
  .sl-lanes__row { grid-template-columns: minmax(0, 1fr); }
  .sl-lanes__row ol { flex-direction: column; }
  .sl-lanes__row--a ol { max-width: none; }
  .sl-band { grid-template-columns: minmax(0, 1fr); }
  .sl-canvas__split { grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
  .sl-canvas__split::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-radar__sweep, .sl-mig__lines circle, .sl-pipe__col span::after, .sl-col__f, .sl-shop__toast, .sl-app__body nav span, .sl-bus__line i, .sl-wire, .sl-canvas .sl-node, .sl-pipe__l { animation: none !important; }
  .sl-shop__toast { opacity: 1; }
  .sl-shop__toast:nth-of-type(n+3) { display: none; }
}
/* ================= Service, Work and Resource pages =================
   Built on the solution page hero (sl-banner + sl-intro) and the industry page sections; prefixes sv- (services hub
   and intro card), wk- (case studies), rs- (resources). */
.sv-card { width: min(400px, 100%); justify-self: center; padding: 26px; border-radius: 24px; background: rgba(8,12,30,.62); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); color: #fff; }
.sl-intro__vis > .sv-card { width: min(400px, 100%); }
.sv-card small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ia2); }
.sv-card strong { display: block; margin: 8px 0 18px; font-family: var(--f-display); font-size: 26px; letter-spacing: -.03em; line-height: 1.15; }
.sv-card ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sv-card li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); font-family: var(--f-label); font-size: 14.5px; font-weight: 500; animation: svIn .6s var(--ease-out) both; }
.sv-card li:nth-child(2) { animation-delay: .1s; } .sv-card li:nth-child(3) { animation-delay: .2s; } .sv-card li:nth-child(4) { animation-delay: .3s; }
@keyframes svIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.sv-card .in-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--ia); color: #fff; }
.sv-card .in-ic svg { width: 18px; height: 18px; }
.sv-card__foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 12.5px; color: var(--on-dark-2); }
.sv-card__foot svg { flex: none; width: 15px; height: 15px; color: var(--ia2); }
.sv-tools { position: sticky; top: calc(var(--header-h) + 8px); z-index: 4; padding: 12px; margin-bottom: 36px; border-radius: 20px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 12px 30px -20px rgba(10,12,24,.35); }
.sv-tools .inh-filter a { display: inline-flex; align-items: center; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-family: var(--f-label); font-size: 13.5px; font-weight: 500; transition: background .3s, color .3s; }
.sv-tools .inh-filter a:hover { background: var(--ink-950); color: #fff; border-color: var(--ink-950); }
.sv-group { scroll-margin-top: 180px; }
.sv-group + .sv-group { margin-top: clamp(56px, 6vw, 88px); }
.sv-group__head { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; align-items: center; margin-bottom: 24px; }
.sv-group__head img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; }
.sv-group__head h2 { font-size: clamp(28px, 3vw, 42px); letter-spacing: -.04em; }
.sv-group__head p { margin-top: 8px; color: var(--text-2); }
.sv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sv-hcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: #fff; transition: border-color .3s, transform .4s var(--ease-out), box-shadow .4s; }
.sv-hcard strong { display: block; font-family: var(--f-display); font-size: 17px; letter-spacing: -.02em; line-height: 1.25; }
.sv-hcard small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.sv-hcard > svg { width: 18px; height: 18px; color: var(--ia); transition: transform .4s var(--ease-out); }
.sv-hcard:hover { border-color: color-mix(in srgb, var(--ia) 45%, transparent); transform: translateY(-3px); box-shadow: 0 24px 40px -28px color-mix(in srgb, var(--ia) 70%, transparent); }
.sv-hcard:hover > svg { transform: translateX(4px); }
.sv-hcard:hover .in-ic { background: var(--ia); color: #fff; }

.wk-facts { position: relative; z-index: 2; margin-top: -10px; padding-bottom: 10px; background: linear-gradient(var(--ink-950) 50%, transparent 50%); }
.wk-facts__card { display: flex; flex-wrap: wrap; overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 40px 80px -40px rgba(10,12,24,.4), 0 0 0 1px var(--line); }
.wk-facts__card > div { flex: 1 1 180px; padding: 26px 28px; border-left: 1px solid var(--line); }
.wk-facts__card > div:first-child { border-left: 0; }
.wk-facts__m strong { display: block; font-family: var(--f-display); font-size: clamp(36px, 3.6vw, 52px); font-weight: 600; line-height: 1; letter-spacing: -.04em; background: linear-gradient(135deg, var(--ia), var(--ia2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wk-facts__m span { display: block; margin-top: 8px; font-size: 14.5px; color: var(--text-2); }
.wk-facts__card small { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.wk-facts__card b { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-family: var(--f-display); font-size: 18px; font-weight: 600; }
.wk-facts__card b svg { width: 16px; height: 16px; color: var(--ia); }
.wk-story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.wk-story__img { position: sticky; top: calc(var(--header-h) + 24px); margin: 0; overflow: hidden; border-radius: 28px; }
.wk-story__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.wk-story__txt { display: grid; gap: 18px; }
.wk-story__txt article { display: flex; gap: 20px; padding: 28px; border-radius: 24px; border: 1px solid var(--line); background: #fff; }
.wk-story__txt h2 { margin-bottom: 10px; font-size: 26px; letter-spacing: -.03em; }
.wk-story__txt p { font-size: 16.5px; line-height: 1.7; color: var(--text-2); }
.wk-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.wk-steps::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--ia), var(--ia2)); opacity: .5; }
.wk-steps li { position: relative; padding-top: 38px; }
.wk-steps__dot { position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--ia); box-shadow: 0 0 0 6px rgba(47,107,255,.2); }
.wk-steps h3 { margin-bottom: 8px; font-size: 21px; color: #fff; }
.wk-steps p { font-size: 15px; color: var(--on-dark-2); }
.wk-quote .x-wrap { max-width: 900px; }
.wk-quote .intm__q { position: relative; }
.wk-filter { margin-bottom: 30px; }

.rs-doc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.rs-toc { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 2px; padding: 20px; border-radius: 20px; background: #F6F7F9; }
.rs-toc small { margin-bottom: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.rs-toc a { padding: 9px 12px; border-left: 2px solid transparent; border-radius: 0 10px 10px 0; font-family: var(--f-label); font-size: 14px; color: var(--text-2); transition: color .25s, background .25s, border-color .25s; }
.rs-toc a:hover, .rs-toc a.is-on { color: var(--ia); background: #fff; border-color: var(--ia); }
.rs-body { max-width: 760px; counter-reset: rs; }
.rs-upd { margin-bottom: 26px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.rs-body > section { position: relative; padding: 0 0 34px; margin-bottom: 34px; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.rs-body > section:last-child { border-bottom: 0; }
.rs-step { display: block; width: 36px; height: 4px; margin-bottom: 18px; border-radius: 4px; background: linear-gradient(90deg, var(--ia), var(--ia2)); }
.rs-body h2 { margin-bottom: 14px; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.03em; }
.rs-body p, .rs-body li { font-size: 17px; line-height: 1.75; color: var(--text-2); }
.rs-body p + p, .rs-body ul + p, .rs-body p + ul { margin-top: 14px; }
.rs-body ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rs-body li { position: relative; padding-left: 28px; }
.rs-body li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ia); }
.rs-filter { margin-bottom: 28px; }
.rs-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.rs-post { overflow: hidden; border-radius: 24px; border: 1px solid var(--line); background: #fff; transition: box-shadow .4s, transform .5s var(--ease-out); }
.rs-post:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(10,12,24,.4); }
.rs-post summary { display: grid; gap: 8px; padding: 0 0 22px; list-style: none; cursor: pointer; }
.rs-post summary::-webkit-details-marker { display: none; }
.rs-post summary img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 10px; }
.rs-post summary small, .rs-post summary strong, .rs-post summary span, .rs-post summary em { margin: 0 24px; }
.rs-post summary small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ia); }
.rs-post summary strong { font-family: var(--f-display); font-size: 21px; letter-spacing: -.02em; line-height: 1.25; }
.rs-post summary span { font-size: 15px; color: var(--text-2); }
.rs-post summary em { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-label); font-style: normal; font-weight: 600; color: var(--ia); }
.rs-post summary em svg { width: 16px; height: 16px; transition: transform .4s var(--ease-out); }
.rs-post[open] summary em svg { transform: rotate(90deg); }
.rs-post__body { padding: 0 24px 24px; }
.rs-post__body p, .rs-post__body li { font-size: 15.5px; line-height: 1.7; color: var(--text-2); }
.rs-post__body p + p, .rs-post__body p + ul { margin-top: 10px; }
.rs-post__body ul { margin: 0; padding-left: 18px; }
.rs-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rs-press { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.rs-press .x-h2 { margin: 16px 0 18px; }
.rs-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; overflow: hidden; border-radius: 24px; border: 1px solid var(--line); background: var(--line); }
.rs-facts div { padding: 22px; background: #fff; }
.rs-facts dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.rs-facts dd { margin: 8px 0 0; font-family: var(--f-display); font-size: 24px; font-weight: 600; letter-spacing: -.03em; color: var(--ia); }
.rs-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rs-media { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: clamp(28px, 4vw, 52px); border-radius: 30px; background: var(--ink-950); color: #fff; }
.rs-media h2 { margin: 12px 0 10px; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.04em; }
.rs-media h2 em { color: var(--ia2); }
.rs-media p { max-width: 520px; color: var(--on-dark-2); }
.rs-media .x-k { color: var(--ia2); }
.rs-media__links { display: grid; gap: 10px; }
.rs-media__links a { display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.08); font-family: var(--f-label); font-weight: 600; transition: background .3s; }
.rs-media__links a:hover { background: var(--ia); }
.rs-media__links svg { width: 18px; height: 18px; }
.rs-faq { max-width: 960px; }
.rs-faq__tools { display: grid; gap: 14px; margin-bottom: 26px; }
.rs-faq__list { display: grid; gap: 10px; }
.rs-faq__list details { padding: 0 22px; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.rs-faq__list details[open] { border-color: color-mix(in srgb, var(--ia) 40%, transparent); box-shadow: 0 20px 40px -30px rgba(47,107,255,.6); }
.rs-faq__list summary { display: grid; gap: 4px; padding: 20px 30px 20px 0; position: relative; font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; list-style: none; cursor: pointer; }
.rs-faq__list summary::-webkit-details-marker { display: none; }
.rs-faq__list summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--ia); transition: transform .3s; }
.rs-faq__list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.rs-faq__list summary small { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ia); }
.rs-faq__list details p { padding: 0 0 22px; color: var(--text-2); line-height: 1.7; }
.rs-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; }
.rs-map__col h2 { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ia); font-size: 20px; letter-spacing: -.02em; }
.rs-map__col ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rs-map__col a { display: block; padding: 4px 0; font-size: 14.5px; color: var(--text-2); transition: color .25s, transform .3s; }
.rs-map__col a:hover { color: var(--ia); transform: translateX(3px); }
@media (max-width: 1080px) {
  .sv-grid, .rs-posts, .rs-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-story, .rs-doc, .rs-press { grid-template-columns: minmax(0, 1fr); }
  .wk-story__img, .rs-toc { position: static; }
  .wk-story__img img { aspect-ratio: 16 / 9; }
  .wk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .wk-steps::before { display: none; }
  .rs-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sv-grid, .rs-posts, .rs-guides, .wk-steps, .rs-map, .rs-facts { grid-template-columns: minmax(0, 1fr); }
  .sv-group__head { grid-template-columns: minmax(0, 1fr); }
  .sv-tools { position: static; }
  .rs-media { grid-template-columns: minmax(0, 1fr); }
  .wk-story__txt article { flex-direction: column; padding: 22px; }
}